:root { color-scheme: light; font-family: Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { background: #fff; color: #111; overflow: hidden; }
main { position: relative; width: 100%; height: 100svh; min-height: 320px; overflow: hidden; background: #fff; }
.journey-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.journey-source { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sound { position: absolute; z-index: 2; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #111; border-radius: 50%; padding: 0; background: #fff; color: #111; cursor: pointer; }
.sound svg { display: block; }
.sound[aria-pressed="false"] .sound-on, .sound[aria-pressed="true"] .sound-off { display: none; }
.sound:hover { background: #111; color: #fff; }
.sound:focus-visible { outline: 2px solid #111; outline-offset: 4px; }