:root{color-scheme:dark;--ink:#0b111b;--paper:#edeef4;--acid:#b9f6ef;--mute:#a8b3c2;--line:#ffffff1a;--scene-x:0px;--scene-y:0px}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;background:var(--ink);color:var(--paper);font-family:Arial,Helvetica,sans-serif}body{overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--acid);outline-offset:5px}button:disabled{opacity:.45;cursor:wait}[hidden]{display:none!important}
#experience{position:relative;isolation:isolate;height:100svh;min-height:0;width:100%;overflow:hidden;touch-action:none;outline:none;background:var(--ink)}#world,#fallback{position:absolute;inset:0;width:100%;height:100%;z-index:3;touch-action:none;cursor:grab}#world:active,#fallback:active{cursor:grabbing}#source{position:absolute;width:1px;height:1px;opacity:.001;pointer-events:none;bottom:0;left:0}
.spatial-title{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;display:flex;justify-content:center;flex-direction:column;font-size:clamp(90px,25.3vw,500px);font-weight:900;line-height:.76;letter-spacing:-.085em;white-space:nowrap;color:#e5ebff;opacity:.035;transform:translate(var(--scene-x),var(--scene-y));transition:opacity 1.8s}.spatial-title span:first-child{margin-left:-.055em}.spatial-title span:last-child{align-self:flex-end;margin-right:-.05em;color:transparent;-webkit-text-stroke:1px #a7cbff}.has-started .spatial-title{opacity:.035}.stage-haze{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 62% 48%,#3d526a38,transparent 46%),radial-gradient(ellipse at 27% 72%,#87552b16,transparent 44%)}
.grain{display:none;position:absolute;inset:0;z-index:9;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.8' filter='url(%23n)'/%3E%3C/svg%3E")}.vignette{display:none;position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(0deg,#05070d 0,transparent 19%,transparent 82%,#05070d99),linear-gradient(90deg,#05070d77,transparent 40%,transparent 80%,#05070d44)}
.topbar{position:absolute;z-index:20;left:0;right:0;top:0;padding:36px 42px;display:flex;gap:19px;align-items:center;transition:opacity .7s}.mark{font-size:29px;font-weight:800;letter-spacing:-3px;line-height:1}.mark i{font-style:normal;font-weight:400;font-size:28px;color:var(--acid);margin:0 6px}.edition{font-size:12px;letter-spacing:1.35px;font-weight:600;line-height:1.55}.edition span{display:block;font-size:12px;letter-spacing:1.1px;font-weight:400;color:var(--mute)}.top-actions{margin-left:auto;display:flex;align-items:center;gap:22px}.utility,.icon-button{display:flex;align-items:center;justify-content:center;gap:9px;min-width:44px;min-height:44px;padding:0;font:12px/1.3 'Courier New',monospace;letter-spacing:.5px;white-space:nowrap;transition:color .25s,opacity .25s}.utility:hover,.icon-button:hover{color:var(--acid)}.utility svg,.icon-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}#sound .sound-waves{display:none}#sound[aria-pressed=true] .sound-waves{display:block}#sound[aria-pressed=true] .sound-slash{display:none}
.opening{position:absolute;z-index:10;left:9%;top:50%;transform:translateY(-48%);pointer-events:none;transition:opacity .7s,transform 1.1s cubic-bezier(.2,.65,.2,1),visibility .7s;max-width:48%}.opening-number{display:flex;align-items:center;gap:14px;font:12px 'Courier New',monospace;letter-spacing:2px;color:#b0b9c8;margin-bottom:24px}.fine-rule{width:30px;height:1px;background:var(--acid);display:block}.opening h1{font-size:clamp(66px,min(7.25vw,12.5vh),140px);font-weight:800;letter-spacing:-.07em;line-height:.86;margin:0}.opening h1>span{display:block}.opening h1 .outline{color:transparent;-webkit-text-stroke:1px #d3dbe399;line-height:1.03;font-weight:500;letter-spacing:-.062em}.period{color:var(--acid);-webkit-text-stroke:0}.opening-instruction{font-size:16px;line-height:1.5;letter-spacing:-.015em;color:#a4afbc;margin:24px 0 0}.opening-bottom{margin-top:27px;pointer-events:auto}.enter{display:flex;align-items:center;gap:18px;min-height:60px;padding:14px 24px 14px 18px;border:1px solid #d7e8f533;border-radius:40px;background:#b9dfed09;backdrop-filter:blur(12px);transition:border-color .25s,background .25s,transform .3s;box-shadow:inset 0 0 26px #cde7ff04}.enter:hover{border-color:#c9fff399;background:#c9fff310;transform:translateY(-2px)}.enter-icon{width:18px;height:18px;fill:currentColor;flex:none}.enter>span:last-child{font-size:12px;font-weight:600;line-height:1.5;letter-spacing:1px}.enter small{display:block;font-size:12px;letter-spacing:0;font-weight:400;color:#8995a4;margin-top:2px}.compact-play-label{display:none}.has-started .opening{opacity:0;transform:translateY(-45%) translateX(-28px);visibility:hidden}.has-started .opening-bottom{pointer-events:none}
.control-deck{position:absolute;z-index:20;bottom:36px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:16px;padding:5px 18px 5px 10px;min-height:56px;border:1px solid #e3f0ff1f;background:#090d189e;box-shadow:0 6px 36px #0002,inset 0 1px 0 #ffffff07;backdrop-filter:blur(20px);border-radius:40px;opacity:0;visibility:hidden;transition:opacity .7s,visibility .7s;white-space:nowrap}.has-started .control-deck{opacity:1;visibility:visible}.media-choices{order:2;display:flex;gap:2px;align-items:center}.medium{position:relative;min-height:44px;min-width:65px;padding:0 15px;font-size:14px;letter-spacing:.3px;color:#adb6c4;border-radius:24px;transition:color .3s,background .3s}.medium.active{color:#dffef7;background:#bcefeb10}.medium:hover{color:white}.medium.active:after{content:'';position:absolute;width:3px;height:3px;border-radius:50%;background:var(--acid);left:50%;bottom:5px;box-shadow:0 0 8px #b9f6ef80}.transport{order:1;display:flex;align-items:center;padding-right:10px;border-right:1px solid #d3e3ff18}#play{min-width:36px}#replay{display:none}.ended #play{display:none}.ended #replay{display:flex}.replay-symbol{font-size:25px}
.engagement{position:absolute;z-index:21;right:40px;bottom:36px;opacity:0;visibility:hidden;transition:opacity .7s,visibility .7s}.engagement.visible{opacity:1;visibility:visible}.like-button{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border:1px solid #e3f0ff1f;border-radius:50%;background:#090d1888;backdrop-filter:blur(16px);transition:background .25s,transform .4s,border-color .3s}.like-button:hover{border-color:#ffaccf66;background:#ffaccf0d;transform:scale(1.06)}.like-button:active{transform:scale(.88)}.like-button svg{width:23px;height:23px;fill:transparent;stroke:#dae7ee;stroke-width:1.3;transition:fill .5s,stroke .5s}.like-button.liked svg{fill:#ff9aba;stroke:#ff9aba;filter:drop-shadow(0 0 8px #ff92bb40)}
.bottom-line{position:absolute;z-index:19;bottom:48px;left:42px;right:auto;pointer-events:none;display:flex;align-items:center;gap:20px;font:12px 'Courier New',monospace;letter-spacing:1px;color:#858fa0}.bottom-line>span:first-child{max-width:190px}.bottom-line button{margin-left:auto;pointer-events:auto;min-height:32px;font-size:12px;letter-spacing:.6px;color:#b8c1cb}.bottom-line button span{font-size:17px;padding-left:9px}.bottom-line button:hover{color:var(--acid)}
.cursor{position:absolute;z-index:23;pointer-events:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #d8fbef70;border-radius:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s,width .4s,height .4s,border-color .3s}.cursor span{display:none}.cursor.held{width:64px;height:64px;border-color:#f9ddb970}.cursor.held:after{content:'';width:4px;height:4px;background:#f0d9c0;border-radius:50%}#traces{position:absolute;inset:0;width:100%;height:100%;z-index:8;pointer-events:none}
.depth-message{position:absolute;z-index:10;left:0;right:0;bottom:21%;display:flex;flex-direction:column;align-items:center;pointer-events:none;opacity:0;text-align:center;font-size:14px;letter-spacing:3px;line-height:1.8;color:#d8edff}.depth-message .outline{font-size:clamp(42px,7vw,110px);font-weight:500;letter-spacing:-.045em;color:transparent;-webkit-text-stroke:1px #bfdfff99}.inside .topbar,.inside .control-deck,.inside .bottom-line{opacity:.3}.inside .topbar:focus-within,.inside .control-deck:focus-within{opacity:1}
.film-titles{position:absolute;z-index:10;left:9%;bottom:24%;max-width:35%;pointer-events:none;opacity:0;transition:opacity .8s}.has-started .film-titles{opacity:1}.chapter-kicker{font:12px 'Courier New',monospace;color:var(--acid);letter-spacing:2px;margin-bottom:18px}.chapter-title{font-size:clamp(32px,4vw,70px);font-weight:500;line-height:.97;letter-spacing:-.05em;white-space:pre-line}.chapter-sub{max-width:240px;font-size:14px;line-height:1.5;color:#94a1b3;margin-top:20px;white-space:pre-line}.free-play .film-titles,.film-titles.vanish{display:none}
.media-error{position:absolute;z-index:30;left:50%;bottom:120px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 40px);padding:16px 22px;border:1px solid #d8e6fb33;border-radius:16px;background:#101725f5;font-size:14px;line-height:1.5}.no-script{position:absolute;z-index:50;inset:0;display:grid;place-items:center;background:#05070d;padding:30px;font-size:20px;text-align:center}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.metrics,.gesture-guide,.gesture-demo,.ending-actions,.like-action,#like-caption,#like-count,.looks-label,.medium>span,.timeline,.timecode,#play-label,.replay-label,.view-controls{display:none!important}.heart-mode{--acid:#ffabc6}.heart-mode .medium.active{background:#ffc3d80e;color:#ffd8e7}.heart-mode .stage-haze{background:radial-gradient(ellipse at 62% 48%,#7d23491a,transparent 48%)}.calm .cursor{display:none}.calm .enter:hover{transform:none}.calm .spatial-title{transform:none}
@media(min-width:1700px){.opening,.film-titles{left:12%}.topbar{padding:40px 55px}.bottom-line{left:55px}.engagement{right:55px}}
@media(max-width:1100px){.opening{left:7%;max-width:53%}.opening h1{font-size:clamp(52px,8vw,90px)}.topbar{padding:28px}.bottom-line{left:28px;right:auto;bottom:46px}.bottom-line>span:first-child{display:none}.engagement{right:28px}.control-deck{bottom:34px}.film-titles{left:7%;max-width:38%}}
@media(max-width:700px),(pointer:coarse){.topbar{padding:max(20px,env(safe-area-inset-top)) 22px 16px;gap:14px}.mark{font-size:25px}.mark i{font-size:24px;margin:0 5px}.edition{font-size:12px;letter-spacing:1px}.edition span,#sound>span{display:none}.top-actions{gap:0}#sound{min-width:44px}.cursor{display:none!important}.spatial-title{font-size:39vw;line-height:1.3;justify-content:space-around;opacity:.028}.spatial-title span:first-child{margin-top:17%}.spatial-title span:last-child{margin-bottom:16%}.stage-haze{background:radial-gradient(ellipse at 50% 44%,#3d526a38,transparent 58%)}.opening{left:24px;right:24px;top:auto;bottom:14%;max-width:none;transform:none;text-align:center}.opening-number,.opening-instruction{display:none}.opening h1{font-size:clamp(28px,7vw,45px);line-height:1.08;letter-spacing:-.05em;font-weight:500}.opening h1>span{display:inline}.opening h1>span:first-child:after,.opening h1>span:nth-child(2):after{content:' '}.opening h1 .outline{display:block;font-size:clamp(45px,12vw,74px);line-height:1.05;letter-spacing:-.045em;-webkit-text-stroke:1px #d3dbe3bd;margin-top:2px}.opening-bottom{margin-top:22px;display:flex;justify-content:center}.enter{min-height:52px;padding:12px 22px;gap:12px}.enter-icon{width:14px;height:14px}.enter>span:last-child{font-size:12px;letter-spacing:1px}.enter small,.wide-play-label{display:none}.compact-play-label{display:inline}.has-started .opening{transform:translateY(15px)}.control-deck{left:calc(50% - 27px);bottom:max(22px,env(safe-area-inset-bottom));min-height:54px;gap:6px;padding:4px 9px 4px 6px;max-width:calc(100% - 90px)}.medium{min-width:55px;padding:0 11px;font-size:14px;min-height:44px}.transport{padding-right:4px}#play{min-width:34px}.media-choices{gap:0}.engagement{right:18px;bottom:max(22px,env(safe-area-inset-bottom))}.like-button{width:54px;height:54px}.like-button svg{width:22px;height:22px}.bottom-line{display:none}.depth-message{bottom:24%;font-size:12px;letter-spacing:2px}.depth-message .outline{font-size:15vw}.film-titles{left:7%;bottom:22%;max-width:56%}.chapter-title{font-size:8vw}.chapter-kicker,.chapter-sub{display:none}.vignette{background:linear-gradient(0deg,#05070d 0,transparent 25%,transparent 84%,#05070d88)}}
@media(max-height:600px){.opening h1{font-size:clamp(30px,11vh,65px)}.opening-number{margin-bottom:14px}.opening-instruction{margin-top:14px}.opening-bottom{margin-top:17px}.topbar{padding-top:16px}.control-deck,.engagement{bottom:16px}.bottom-line{bottom:27px}.enter{min-height:48px}.depth-message{bottom:21%}}
@media(max-width:360px){.edition{font-size:12px;letter-spacing:0}.topbar{padding-left:16px;padding-right:16px;gap:12px}.medium{min-width:48px;padding:0 8px}.control-deck{left:calc(50% - 28px)}.opening{bottom:17%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.spatial-title{transform:none}}

/* The spatial controls stay visible; the artwork supplies the explanation. */
#signal-field{position:absolute;inset:0;width:100%;height:100%;z-index:7;pointer-events:none}
.space-controls{position:absolute;z-index:22;left:50%;bottom:108px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:6px;width:466px;max-width:calc(100% - 32px);padding:3px 9px;border:1px solid #c5e8f529;border-radius:14px;background:#0c1522c9;backdrop-filter:blur(14px);box-shadow:0 8px 35px #0002}
.space-controls button{display:flex;align-items:center;justify-content:center;min-width:34px;height:44px;font:12px 'Courier New',monospace;color:#c2cfdb;border-radius:8px}
.space-controls button:hover,.space-controls button[aria-pressed=true]{color:#dcfcff;background:#c5f1fc13}
.turn-controls,.zoom-controls{display:flex;align-items:center}
.turn-controls button,.zoom-controls button{font-size:21px}
.relief-control{display:flex;align-items:center;gap:10px;flex:1;min-width:112px;padding:0 8px;font:12px 'Courier New',monospace;letter-spacing:.6px;color:#bcc8d3}
.relief-control input{width:100%;min-width:40px;height:44px;margin:0;accent-color:#c5f7ef;cursor:ew-resize;touch-action:none}
#orbit-auto{min-width:76px;letter-spacing:.3px}#center-view{font-size:23px}
.gesture-line{position:absolute;z-index:18;bottom:108px;left:14px;right:14px;pointer-events:none;text-align:center;font:12px/1.5 'Courier New',monospace;letter-spacing:1px;color:#a9c2ce;opacity:0;transition:opacity .4s}
.has-started .gesture-line{opacity:.8}.is-3d .gesture-line{bottom:173px}
.charge-button{position:relative;isolation:isolate;overflow:hidden;order:3;display:flex;align-items:center;justify-content:center;gap:7px;min-width:94px;min-height:44px;padding:0 13px;border:1px solid #c7e8ed30;border-radius:24px;color:#c6eef5;background:#bedcff08;font:12px 'Courier New',monospace;letter-spacing:.5px;touch-action:none;user-select:none;-webkit-user-select:none}
.charge-button:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#b2f3ff2b,#ffb87c33);width:var(--charge,0%);transition:width .1s linear}
.charge-button.charging{border-color:#f6d0a3;color:#fff1da;box-shadow:0 0 22px #ffc5921c}
.charge-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;flex:none}
.control-deck{gap:10px;padding-right:6px}
.control-deck .engagement{position:static;order:4;opacity:1;visibility:visible;flex:none;transform:none}
.control-deck .like-button{width:44px;height:44px;border:0;background:none;backdrop-filter:none}
.inside .topbar,.inside .control-deck,.inside .bottom-line{opacity:.9}
.depth-message{bottom:27%;font-size:12px;letter-spacing:3px;z-index:8}
.depth-message .outline{font-size:clamp(46px,7vw,108px);-webkit-text-stroke-color:#d1edf6aa}
.view-controls{display:flex!important;order:5;border-left:1px solid #d3e3ff18;padding-left:8px}.view-controls #motion{display:none}
@media(max-width:1000px){.bottom-line{bottom:auto;top:112px;left:28px}.bottom-line #watch-film{font-size:12px}.bottom-line #scene-label{display:none}}
@media(max-width:700px),(pointer:coarse){
  .control-deck{left:50%;bottom:max(18px,env(safe-area-inset-bottom));width:max-content;max-width:calc(100% - 16px);gap:4px;padding:4px;min-height:54px}
  .control-deck .transport{padding:0;border:0}.control-deck #play{min-width:36px}
  .control-deck .medium{min-width:44px;padding:0 7px;font-size:12px}
  .charge-button{min-width:64px;padding:0 7px;gap:5px;letter-spacing:0}.charge-button svg{width:13px}
  .control-deck .engagement{right:auto;bottom:auto}.control-deck .like-button{width:40px;height:44px}
  .space-controls{bottom:calc(max(18px,env(safe-area-inset-bottom)) + 66px);width:356px;max-width:calc(100% - 24px);gap:3px;padding:3px 6px;border-radius:12px}
  .space-controls .zoom-controls{display:none}.space-controls button{min-width:32px}.turn-controls button{width:36px}
  .relief-control{gap:6px;min-width:84px;padding:0 5px;letter-spacing:0}#orbit-auto{min-width:66px;font-size:12px}
  .gesture-line{bottom:calc(max(18px,env(safe-area-inset-bottom)) + 66px);font-size:12px;letter-spacing:0;white-space:nowrap}
  .is-3d .gesture-line{bottom:calc(max(18px,env(safe-area-inset-bottom)) + 126px)}
  .view-controls{display:none!important}.depth-message{bottom:32%}.depth-message .outline{font-size:15vw}
}
@media(max-height:540px){.space-controls{bottom:82px}.is-3d .gesture-line{bottom:139px}.gesture-line{bottom:82px}.control-deck{bottom:16px}.depth-message{bottom:36%}.depth-message .outline{font-size:40px}}

/* Signal That Remembers: give the controls room without hiding capability. */
#memory-field{position:absolute;inset:0;width:100%;height:100%;z-index:8;pointer-events:none}
.top-actions{gap:12px}.top-actions #motion{display:flex;min-width:84px;font-size:12px}
.space-controls button{min-width:44px}.relief-control{min-width:144px}
.space-controls{width:550px}.gesture-line{font-size:14px;letter-spacing:.6px}
#experience[data-phase=return] .gesture-line{color:#ffddad}
#experience[data-phase=pirate] .gesture-line{opacity:0}
#experience[data-phase=pirate] .spatial-title{opacity:0}
.depth-message{color:#edf8f5;text-shadow:0 1px 20px #0b111b}
.inside .control-deck,.inside .topbar{opacity:1}
@media(max-width:700px),(pointer:coarse){
  .topbar{padding: max(12px,env(safe-area-inset-top)) 16px 8px;gap:10px}
  .top-actions{gap:2px}.top-actions #motion{min-width:60px;font-size:12px;letter-spacing:0}
  .edition{font-size:12px;letter-spacing:.25px}.top-actions #fullscreen{display:none}
  .control-deck{display:flex;gap:2px;padding:4px 6px;width:max-content;max-width:calc(100% - 20px);border-radius:18px}
  .control-deck #play,.control-deck .medium,.control-deck .like-button{min-width:44px;width:44px;min-height:44px}
  .control-deck .medium{font-size:14px;padding:0 4px}.charge-button{min-width:62px;font-size:14px}.charge-button svg{display:none}
  .control-deck .view-controls{display:flex!important;padding:0;border:0}.control-deck #fullscreen{width:44px}
  .space-controls{display:grid;grid-template-columns:88px 1fr 44px 88px;grid-template-rows:44px 44px;gap:4px;padding:6px 8px;width:calc(100% - 28px);max-width:440px;border-radius:16px;bottom:calc(max(18px,env(safe-area-inset-bottom)) + 68px)}
  .space-controls .turn-controls{grid-column:1;grid-row:1}.space-controls .relief-control{grid-column:1/-1;grid-row:2;min-width:0;width:100%;padding:0 6px;font-size:14px;gap:14px}
  .space-controls .relief-control input{flex:1;min-width:160px}.space-controls .zoom-controls{display:flex;grid-column:4;grid-row:1}
  .space-controls #orbit-auto{grid-column:2;grid-row:1;width:100%;min-width:60px;font-size:12px}.space-controls #center-view{grid-column:3;grid-row:1}
  .space-controls button{min-width:44px;width:44px}.turn-controls button{width:44px}
  .is-3d .gesture-line{bottom:calc(max(18px,env(safe-area-inset-bottom)) + 181px);font-size:14px;white-space:normal}
  .gesture-line{bottom:calc(max(18px,env(safe-area-inset-bottom)) + 68px);font-size:14px;white-space:normal;letter-spacing:0}
  .depth-message{bottom:38%}.opening h1{font-size:32px}.opening-instruction{display:block;font-size:16px;margin:14px auto 0;max-width:260px}
  .opening{bottom:13%}.opening-bottom{margin-top:18px}.enter{min-height:54px}.enter>span:last-child{font-size:14px}
}
@media(max-height:540px){.space-controls{right:12px;left:auto;bottom:80px;transform:none;max-width:360px}.is-3d .gesture-line{bottom:190px}.topbar{padding-top:8px}.depth-message{bottom:32%}}

@media(max-width:700px),(pointer:coarse){.media-choices{gap:3px}.control-deck .medium{min-width:46px;padding:0 4px}}

[data-renderer=canvas] .control-deck,[data-renderer=canvas] .space-controls,[data-renderer=canvas] .enter{backdrop-filter:none;background:#101822ee}

/* Monochrome is a material choice, independent of Type / Wave / 3D. */
:root{--ink:#080b10;--paper:#edf2f5;--acid:#d0e6ef;--mute:#a3adb8}
#experience{background:#080b10}
.stage-haze{background:radial-gradient(ellipse at 56% 44%,#22313c24,transparent 62%)}
.spatial-title{opacity:.018}
.grain{opacity:.025}
.vignette{background:linear-gradient(0deg,#080b10 0,transparent 19%,transparent 88%,#080b1055)}
.tone-controls{position:absolute;z-index:24;top:31px;left:50%;transform:translateX(-50%);display:flex;gap:2px;padding:3px;border:1px solid #d5e2eb24;border-radius:999px;background:#11171dcc}
.tone-controls button{min-width:70px;min-height:44px;border-radius:999px;font:14px 'Courier New',monospace;letter-spacing:.4px;color:#99a5af;transition:color .18s,background .18s}
.tone-controls button[aria-pressed=true]{background:#dfe9ef;color:#15212a}
.tone-controls button:hover{color:#fff}.tone-controls button[aria-pressed=true]:hover{color:#15212a}
.control-deck,.space-controls{border-color:#d5e2eb26;background:#11171de8;box-shadow:0 8px 28px #0003}
.medium.active{background:#dfe9ef;color:#15212a}
.gesture-line{color:#c1cbd3;font-size:13px;letter-spacing:1px}
.has-started .gesture-line{opacity:.68}
.charge-button{color:#dfe9ef;border-color:#dfe9ef55;background:#dfe9ef09}
.charge-button.charging{color:#fff;border-color:#eaf4ff;box-shadow:0 0 24px #d2e7ff22}
.charge-button:before{background:linear-gradient(90deg,#c1d8e533,#fff2)}
.opening-instruction{color:#b8c2cb}
#experience[data-tone=color] .stage-haze{background:radial-gradient(ellipse at 56% 44%,#68453e18,transparent 62%)}
@media(max-width:1000px){.tone-controls{top:91px}.bottom-line{top:154px}}
@media(max-width:700px),(pointer:coarse){
  .tone-controls{top:66px;padding:2px}.tone-controls button{min-width:66px;min-height:44px;font-size:14px}
  .spatial-title{opacity:.012}.stage-haze{background:radial-gradient(ellipse at 50% 42%,#25334422,transparent 58%)}
  .gesture-line,.is-3d .gesture-line{font-size:12px;letter-spacing:.7px}
  .space-controls{background:#11171df2}.control-deck{background:#11171df2}
  .opening-instruction{font-size:16px}.opening h1 .outline{-webkit-text-stroke-color:#e3ebf3}
}
@media(max-height:540px){.tone-controls{top:8px;left:50%}.tone-controls button{min-height:40px}}

/* Keep the image ahead of the background typography. */
.has-started .spatial-title{opacity:.006}
@media(max-width:700px),(pointer:coarse){.has-started .spatial-title{opacity:.004}}

/* Keep the mobile frame for the portrait; preserve every control at hand. */
.space-controls{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none}
[data-renderer=canvas] .space-controls{background:transparent}
.heart-mode .like-button{color:#ff92ac}
@media(max-width:700px),(pointer:coarse){
  .topbar{gap:10px;padding: max(10px,env(safe-area-inset-top)) 14px 6px}
  .edition{display:none}
  .tone-controls{position:static;transform:none;margin-left:auto;padding:2px;flex:none;gap:0}
  .tone-controls button{min-width:55px;min-height:44px;font-size:12px;letter-spacing:0}
  .top-actions{margin-left:0;gap:0}
  .space-controls{grid-template-rows:44px 44px;gap:0;padding:0 4px;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 58px);background:transparent;border:0;box-shadow:none}
  .space-controls .relief-control{gap:12px;font-size:12px;color:#a9b5bd}
  .relief-control input{accent-color:#d4e2ea}
  .control-deck{bottom:max(10px,env(safe-area-inset-bottom));min-height:52px;border-radius:16px;background:#10161de8;box-shadow:none;gap:0;padding:3px 5px}
  .media-choices{gap:0}
  .control-deck .medium{min-width:44px;width:44px}
  .charge-button{min-width:60px;padding:0 8px}
  .gesture-line{bottom:calc(max(10px,env(safe-area-inset-bottom)) + 64px);font-size:12px}
  .is-3d .gesture-line{bottom:calc(max(10px,env(safe-area-inset-bottom)) + 148px);font-size:12px}
  .has-started .gesture-line{opacity:.6}
}
@media(max-width:380px){
  .topbar{gap:6px}.mark{font-size:23px}.mark i{font-size:22px;margin:0 4px}
  .top-actions #motion{width:44px;min-width:44px}.top-actions #motion span{font-size:0}
  .top-actions #motion:after{content:'◐';font:21px Arial,sans-serif}
  .control-deck{width:calc(100% - 12px);max-width:none;padding:3px 2px;justify-content:center}
  .control-deck .medium{min-width:42px;width:42px}.charge-button{min-width:56px}
}