/* A shared optical axis and controls remain fixed throughout the journey. */
:root{--art-size:min(66vw,36svh,350px);--orbit-size:min(77vw,42svh,408px);--axis:39%;--controls:73svh}
html,body{background:#941313;overscroll-behavior-y:none}body{background:radial-gradient(ellipse at 48% 43%,#bc1919,#790c0d 130%)}
.journey{height:780svh}.stage{height:100vh;background:radial-gradient(ellipse at 48% 43%,#bc1919 0%,#a11414 48%,#790c0d 130%)}
.brand b{font-size:34px;letter-spacing:-.055em}.brand small{font:8px/1.3 Georgia,serif;letter-spacing:.025em}
.radio-brand{pointer-events:auto;text-align:right;display:grid;justify-items:end;gap:5px}.radio-brand button{display:flex;align-items:center;gap:7px;background:none;border:0;padding:0;font:10px Georgia,serif;color:#f4e9dfbd}.radio-brand svg{width:27px;height:26px;stroke:currentColor;fill:none;stroke-width:1.2}.radio-brand small{font:8px Georgia,serif;color:#f4e9dfab}.radio-brand [aria-pressed=true]{color:#fff7eb;filter:drop-shadow(0 0 5px #ffb6a7)}
.paint-type{background:#f4e9df!important;color:#f4e9df!important;background-clip:text!important;-webkit-background-clip:text!important;filter:url(#paintRough);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.52' numOctaves='3' seed='9'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='2.2' intercept='.1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cpath d='M0 0h150v150H0z' filter='url(%23n)'/%3E%3C/svg%3E");mask-size:150px;mask-position:var(--grainX,0px) var(--grainY,0px)}
.flower-field{display:none}.flower-rotor,.iris-art{top:var(--axis);width:var(--art-size);height:var(--art-size);max-width:none;max-height:none}.flower-rotor img{transform:scale(1.1)}.flower-rotor:after{display:none}
.tuning,.orbit{top:var(--axis);width:var(--orbit-size);height:var(--orbit-size);max-width:none;max-height:none}.tuning{touch-action:pan-y;cursor:default}.tuning.armed{touch-action:none;cursor:grab}.tuning svg .trace,.tuning svg g{display:none}.tuning .touch-half{stroke-width:20}.tuning:not(.armed) .touch-half{pointer-events:none}
.source-readout{top:calc(var(--axis) + var(--orbit-size)/2 + 13px);gap:13px}.source-readout .status{margin:0;font-size:10px;letter-spacing:.05em}.readout{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:90vw}.readout button{background:none;border:0;padding:7px 3px;font:10px ui-monospace,monospace;color:#f4e9dfbd}.readout button[aria-pressed=true]{color:#fff;border-bottom:1px solid #f4e9df80}#tuneHint{font:8px ui-monospace,monospace;opacity:.42;letter-spacing:.025em}
.source-foot{top:85svh;bottom:auto;gap:7px}.source-foot .invitation{font-size:14px}.source-foot .begin{font-size:10px;opacity:.6}
.pupil{top:var(--axis);width:calc(var(--art-size)*.255);height:calc(var(--art-size)*.255);max-width:none;max-height:none;overflow:hidden;background:radial-gradient(ellipse at 38% 35%,#391026 0%,#09020a 52%,#000 100%);box-shadow:inset 0 0 8px #000}
.pupil:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 34% 60%,#d67c7c70,transparent 27%),radial-gradient(ellipse at 68% 32%,#936cbe55,transparent 24%),linear-gradient(130deg,transparent 30%,#dfa7a733 47%,#e6c5c74a 50%,#ae83952b 53%,transparent 68%);filter:blur(2px);transform:rotate(-15deg)}.pupil svg{position:relative;width:94%;height:94%}.pupil .starfield circle{opacity:.63}.pupil .starfield circle:nth-child(3n){opacity:.3}.pupil .starfield circle:nth-child(11n){opacity:.95;filter:drop-shadow(0 0 1px #fff)}.pupil .constellation-active line{stroke-opacity:.35;stroke-width:.35}.pupil .constellation-active circle{filter:drop-shadow(0 0 1px #fff);}
.orbit button{opacity:.46;width:44px;height:44px;font-size:20px;text-shadow:0 0 9px #841010;z-index:1}.orbit button.selected,.orbit:hover button.selected,.orbit:focus-within button.selected{opacity:1;color:#fff9e9;text-shadow:0 0 10px #ffd6b6}.orbit:hover button{opacity:.55}.orbit .frequency{display:none}.iris-axis{top:61svh;display:block;width:auto}.iris-axis strong{font-size:44px}
.hands-art{top:var(--axis);width:min(112vw,780px);height:auto;max-height:none;transform:translate(-50%,-55%);mask-image:radial-gradient(ellipse 61% 20% at 50% 55%,#000 40%,transparent 98%)}.coherence-title{top:59svh;font-size:clamp(28px,7.5vw,48px);letter-spacing:.06em}.coherence-copy{top:86svh;bottom:auto;font-size:11px;max-width:305px;margin:0;line-height:1.5;opacity:.8}
.shared-controls{position:absolute;z-index:22;left:50%;top:var(--controls);transform:translate(-50%,-50%);display:grid;grid-template-columns:64px 64px 64px;gap:24px;align-items:center}.shared-controls button{height:57px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:5px;color:#f3e1d4be}.shared-controls small{font:8px/1 ui-monospace,monospace;letter-spacing:.02em}.shared-controls .preset-trigger span{font:28px/.85 Georgia,serif}.shared-controls .amb-trigger{font-size:29px}.shared-controls button:hover{color:#fff3e6}
.outline-art{position:absolute;overflow:visible;pointer-events:none;left:50%;top:var(--axis);transform:translate(-50%,-50%);isolation:isolate}.butterfly-art{width:min(84vw,48svh,450px);height:auto;aspect-ratio:320/275;mask-image:radial-gradient(ellipse,#000 30%,#000 56%,transparent 76%)}.horse-art{width:min(110vw,78svh,820px);height:auto;aspect-ratio:736/520;mask-image:radial-gradient(ellipse,#000 20%,#000 48%,transparent 72%)}.void-art{top:48%;height:100svh;width:auto;aspect-ratio:736/1308;mask-image:linear-gradient(transparent,#000 10% 86%,transparent)}
.scene-caption{position:absolute;top:60svh;width:100%;text-align:center;display:grid;gap:12px}.scene-caption span,.void-caption span{font:9px ui-monospace,monospace;letter-spacing:.22em;opacity:.5}.scene-caption strong{font:25px Georgia,serif;letter-spacing:.15em}.void-caption{position:absolute;top:85svh;bottom:auto;width:100%;display:grid;text-align:center;gap:14px}.void-caption strong{font:24px Georgia,serif;letter-spacing:.1em}
#lightCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:20;pointer-events:none}#notice{position:absolute;bottom:22%;left:50%;transform:translateX(-50%);z-index:32;width:max-content;max-width:85%;font:10px/1.6 ui-monospace,monospace;text-align:center;opacity:0;transition:opacity .3s}#notice.visible{opacity:1}
.global-foot{z-index:30}.overlay{z-index:45}.crown-layer{z-index:44}.crown-hint{bottom:-25px}.crown button{min-height:40px}.global-foot .play{background:#690d0d40}
@media(max-height:690px){:root{--art-size:min(60vw,31svh,320px);--orbit-size:min(72vw,38svh,375px);--axis:36%;--controls:74svh}.source-readout{gap:7px}.source-foot{top:86svh;bottom:auto}.coherence-copy{font-size:10px;top:87svh;bottom:auto;max-width:285px}.coherence-title{top:58svh}.iris-axis{top:60svh}.scene-caption{top:59svh}.global-head{padding-top:17px}.global-foot{padding-bottom:15px}}
@media(min-width:750px){.brand b{font-size:40px}.brand small{font-size:10px}.radio-brand small{font-size:10px}.source-readout{top:calc(var(--axis) + var(--orbit-size)/2 + 13px)}.iris-axis{top:62svh}.coherence-title{top:59svh}.source-foot{top:85svh;bottom:auto}.coherence-copy{top:86svh;bottom:auto}.void-art{width:min(82vw,740px);height:auto;max-height:none}.shared-controls{gap:34px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.paint-type{mask-position:0 0}}
/* Keep all traced edges inside the viewport, including wide screens. */
.flower-rotor img{transform:scale(1.35)}
.horse-art{width:min(96vw,74svh,820px)}
.void-art{width:min(100vw,56.27svh,600px);height:auto;top:47%;max-height:none}
/* The cue sits just inside the glyph ring instead of obscuring its letter. */
.orbit button{margin-top:0}
.void-art{mask-image:linear-gradient(to right,transparent,#000 9% 91%,transparent),linear-gradient(to bottom,transparent,#000 8% 85%,transparent);mask-composite:intersect;-webkit-mask-composite:source-in}
/* Feedback revision: solid ink over the artwork's own paper grain. */
.paint-type{color:#f4e9df!important;background:none!important;mask-image:none!important;-webkit-mask-image:none!important;filter:url(#inkTexture);text-shadow:0 .3px .3px #51090928}
.brand small{color:#f4e9df;opacity:.95}
.stage:before{display:none}.paper-texture{position:absolute;inset:0;z-index:14;pointer-events:none;opacity:.52;mix-blend-mode:soft-light}
.stage{background:radial-gradient(ellipse at 48% 43%,#b7211b 0%,#a21714 55%,#80100f 130%)}
.radio-brand{justify-items:start;min-width:93px;gap:4px}.radio-brand button{color:#fff1ce;justify-content:flex-start;width:44px;height:35px;padding:0;filter:drop-shadow(0 0 2px #ffdbbb30)}.radio-brand svg{width:30px;height:30px;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.radio-brand small{text-align:left;font-size:8px;color:#f4e9dfd9}
:root{--orbit-size:min(68vw,37svh,365px)}
.tuning{pointer-events:none;touch-action:pan-y}.tuning svg{pointer-events:none}.tuning .guide{opacity:.13;stroke-width:.65}.tuning .touch-half{display:none}.star-control{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;pointer-events:auto;touch-action:none;border:0;background:none;padding:0;border-radius:50%;cursor:grab;z-index:3}.star-control:active{cursor:grabbing}.star-control:focus-visible{outline:1px solid #fff4d8a0;outline-offset:-6px}
.source-readout{top:calc(var(--axis) + var(--orbit-size)/2 - 2px);gap:5px}.source-readout .status{font-size:8px;letter-spacing:.025em;min-height:12px}.source-readout.dial-open .status{visibility:hidden}.readout{width:min(88vw,310px);gap:22px}.readout button{border:0!important;padding:7px 0;font-size:10px}.readout button[aria-pressed=true]{color:#fff3d6;text-shadow:0 0 5px #ffd4a838}.readout button:after{display:none}
.frequency-dials{width:min(88vw,310px);display:grid;grid-template-columns:1fr 1fr;gap:22px;position:relative;margin-top:0}.frequency-dial{display:grid;place-items:center}.frequency-dial[hidden]{display:none}#carrierDial{grid-column:1}#beatDial{grid-column:2;grid-row:1}.dial-wheel{width:82px;height:82px;position:relative;cursor:grab;touch-action:none;border-radius:50%;user-select:none}.dial-wheel:active{cursor:grabbing}.dial-wheel svg{width:100%;height:100%;overflow:visible}.dial-ticks{transform-origin:50px 50px;stroke:#f4e9df72;stroke-width:.7}.dial-ticks .major{stroke:#fff1d6b0;stroke-width:1}.dial-needle{stroke:#fff4da;stroke-width:1.7;stroke-linecap:round}.dial-wheel output{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;pointer-events:none;font:13px ui-monospace,monospace}.dial-wheel output small{font-size:8px;opacity:.5}
.pupil{background:#090207;box-shadow:inset 0 0 5px #000}.pupil:before{inset:20%;background:radial-gradient(ellipse at 36% 60%,#5223343d,transparent 55%);filter:none;transform:none}.pupil svg{width:71%;height:71%;overflow:hidden}.pupil .starfield path{fill:#f5e4d3;opacity:.58}.pupil .starfield path:nth-child(3n){opacity:.3}.pupil .constellation-active line{stroke:#f5e4d3;stroke-opacity:.64;stroke-width:.34}.pupil .constellation-active path{fill:#fff2d9;filter:none}.pupil .constellation-active circle{display:none}
@media(max-height:690px){:root{--orbit-size:min(65vw,34svh,330px)}.source-readout{gap:1px}.dial-wheel{width:65px;height:65px}.source-readout .status{font-size:7px}.readout button{font-size:9px}.frequency-dials{margin-top:-2px}}
@media(min-width:750px){.radio-brand small{font-size:10px}.radio-brand{min-width:116px}.source-readout{top:calc(var(--axis) + var(--orbit-size)/2 - 2px)}}
/* Use the actual red paper sample as the background, below the scene artwork. */
.paper-texture{z-index:0;opacity:1;mix-blend-mode:normal}.scene{z-index:1}
.dial-wheel{width:clamp(44px,calc(34svh - var(--orbit-size)/2 - 88px),76px);height:clamp(44px,calc(34svh - var(--orbit-size)/2 - 88px),76px)}
@media(max-height:690px){.dial-wheel{width:48px;height:48px}.dial-wheel output{font-size:10px;gap:0}.dial-wheel output small{font-size:7px}}
.hands-art{mask-image:radial-gradient(ellipse 61% 20% at 50% 55%,#000 40%,transparent 98%),linear-gradient(to right,transparent,#000 9% 91%,transparent);mask-composite:intersect;-webkit-mask-composite:source-in}
/* A quieter radio mark, closer rays, and a slightly raised lower composition. */
.radio-brand svg{width:27px;height:27px;stroke-width:1.15}.radio-brand button{filter:none;color:#f8e7ce}
:root{--orbit-size:min(63vw,35svh,342px);--controls:69svh}
.shared-controls{gap:15px}.source-foot{top:81svh;bottom:auto}.coherence-copy{top:82svh;bottom:auto}.void-caption{top:81svh;bottom:auto}
.dial-wheel{width:clamp(44px,calc(30svh - var(--orbit-size)/2 - 87px),68px);height:clamp(44px,calc(30svh - var(--orbit-size)/2 - 87px),68px)}
.return-eye{position:absolute;left:50%;top:var(--axis);width:var(--art-size);height:var(--art-size);transform:translate(-50%,-50%) scale(.72);opacity:0.8;pointer-events:none;mix-blend-mode:overlay;mask-image:radial-gradient(circle,#000 0 34%,#000b0 44%,transparent 59%);will-change:opacity,transform;z-index:2}
.return-iris{position:absolute;inset:0;background:url('assets/iris.jpg') center/cover no-repeat;filter:saturate(.65)}.return-pupil{position:absolute;left:37%;top:37%;width:26%;height:26%;border-radius:50%;background:#080105}
@media(max-height:690px){:root{--orbit-size:min(59vw,31.8svh,312px);--controls:71svh}.source-foot{top:82svh;bottom:auto}.coherence-copy{top:83svh;bottom:auto}.dial-wheel{width:44px;height:44px}.source-readout{gap:0}}
@media(min-width:750px){.shared-controls{gap:23px}.source-foot{top:81svh;bottom:auto}.coherence-copy{top:82svh;bottom:auto}}
@media(prefers-reduced-motion:reduce){.return-eye{will-change:auto}}
.return-eye{mix-blend-mode:normal;mask-image:radial-gradient(circle,#000 0 34%,rgba(0,0,0,.7) 44%,transparent 53%)}
@media(min-width:750px){.source-readout{top:calc(var(--axis) + var(--orbit-size)/2 - 10px);gap:2px}}
.iris-axis{top:59svh}
@media(max-height:690px){.iris-axis{top:58svh}}
.return-iris{filter:saturate(.45) brightness(1.3)}
.return-pupil{display:grid;place-items:center}.return-pupil svg{width:71%;height:71%;overflow:hidden}.return-pupil path{fill:#f5e4d3}.return-pupil .starfield{opacity:.55}.return-pupil line{stroke:#f5e4d3;stroke-opacity:.6;stroke-width:.34}