@font-face{font-family:Montserrat;font-weight:600;font-display:swap;src:url(../fonts/montserrat-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:800;font-display:swap;src:url(../fonts/montserrat-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(../fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(../fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(../fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:700;font-display:swap;src:url(../fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2")}

:root{--ink:#0c0b10;--ink2:#15131b;--bone:#f6efe6;--mute:#b9afc0;--teal:#19e6d6;--teal-d:#0aa79b;--amber:#ffb26b;--mag:#ff4fb8;--line:rgba(246,239,230,.14);
  --glass:rgba(18,15,24,.72);--r:16px;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
  --display:Montserrat,system-ui,sans-serif;--body:Inter,system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--ink);color:var(--bone);font-family:var(--body);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
body{overflow:hidden}
html.plain body{overflow:auto}
button{font:inherit;color:inherit;cursor:pointer}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;opacity:0;transition:opacity 1.2s ease}
html.ready #gl{opacity:1}
body::after{content:"";position:fixed;inset:0;z-index:5;pointer-events:none;background:radial-gradient(115% 95% at 50% 45%,transparent 55%,rgba(6,4,10,.5) 100%);opacity:0;transition:opacity 1.2s}
html.ready body::after{opacity:1}
html.plain body::after,html.inos body::after{display:none}
.skip{position:fixed;left:12px;top:-60px;z-index:90;background:var(--bone);color:var(--ink);padding:10px 14px;border-radius:10px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* loader */
#loader{position:fixed;inset:0;z-index:60;display:grid;place-content:center;justify-items:center;gap:22px;background:radial-gradient(120% 90% at 50% 110%,#3a1640 0%,#17101f 45%,#0c0b10 100%);transition:opacity .9s ease,visibility .9s}
html.ready #loader{opacity:0;visibility:hidden}
.ld-mark,.mark{font-family:var(--display);font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;line-height:1}
.ld-mark{font-size:clamp(56px,12vw,112px);text-shadow:0 0 40px rgba(255,236,214,.35)}
.ld-mark i,.mark i{font-style:normal;color:var(--teal);margin:0 .04em;text-shadow:0 0 24px rgba(25,230,214,.8)}
.ld-mark span,.ld-mark i{animation:flick 2.6s infinite}
.ld-mark i{animation-delay:.25s}.ld-mark span:last-child{animation-delay:.4s}
@keyframes flick{0%,100%{opacity:1}3%{opacity:.35}6%{opacity:1}9%{opacity:.6}12%{opacity:1}}
.ld-bar{width:min(260px,60vw);height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.ld-bar b{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--bone));transition:width .25s ease}
#ld-text{margin:0;font-size:13px;letter-spacing:.04em;color:var(--mute)}

/* chrome */
#chrome{position:fixed;z-index:20;top:calc(14px + var(--sat));left:calc(18px + var(--sal));right:calc(18px + var(--sar));display:flex;justify-content:space-between;align-items:center;pointer-events:none;opacity:0;transition:opacity .8s ease .6s}
html.ready #chrome{opacity:1}
#chrome>*{pointer-events:auto}
.mark{font-size:22px;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.cta{border:0;border-radius:999px;padding:12px 20px;min-height:44px;font-weight:600;font-size:15px;background:var(--bone);color:var(--ink);box-shadow:0 6px 24px rgba(0,0,0,.35);transition:transform .2s,background .2s}
.cta:hover{background:#fff;transform:translateY(-1px)}
.cta:focus-visible,.x:focus-visible,.pin:focus-visible,#sound:focus-visible,#back:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.cta.ghost{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 1px var(--line)}
.cta.ghost:hover{background:rgba(246,239,230,.08)}
#hint{position:fixed;z-index:15;left:50%;bottom:calc(26px + var(--sab));transform:translateX(-50%);margin:0;padding:10px 16px;border-radius:999px;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:13.5px;color:var(--bone);white-space:nowrap;opacity:0;transition:opacity .8s ease;pointer-events:none;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
html.ready #hint.on{opacity:.95}
#sound,#back{position:fixed;z-index:20;bottom:calc(18px + var(--sab));min-height:44px;display:flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:10px 14px;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:13px;color:var(--bone);opacity:0;transition:opacity .8s ease .8s}
#sound{left:calc(18px + var(--sal))}
#back{left:50%;transform:translateX(-50%);font-weight:600;padding:10px 18px}
html.ready #sound,html.ready #back{opacity:1}
#sound svg{width:18px;height:18px;fill:currentColor}#sound svg .w{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;opacity:.25}
#sound[aria-pressed=true] svg .w{opacity:1}
#sound[aria-pressed=true] span{display:none}
[hidden]{display:none!important}

/* pins */
#pins{position:fixed;inset:0;z-index:10;pointer-events:none}
.pin{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border:0;background:none;padding:0;pointer-events:auto;will-change:transform,opacity}
.pin::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--bone);box-shadow:0 0 12px rgba(255,236,214,.9)}
.pin::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px;border-radius:50%;border:1.5px solid rgba(246,239,230,.75);animation:ping 2.6s ease-out infinite}
.pin.os::before{background:var(--teal);box-shadow:0 0 12px rgba(25,230,214,.9)}.pin.os::after{border-color:var(--teal)}
@keyframes ping{0%,55%{transform:scale(1);opacity:.85}100%{transform:scale(2.1);opacity:0}}
.pin span{position:absolute;left:50%;bottom:36px;transform:translate(-50%,6px);white-space:nowrap;padding:6px 11px;border-radius:999px;background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:12.5px;font-weight:500;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.pin:hover span,.pin:focus-visible span,.pin.show span{opacity:1;transform:translate(-50%,0)}
.pin.os.show span{bottom:auto;top:36px;font-size:11.5px;padding:5px 10px}
html.focus .pin,html.inos .pin{opacity:0!important;pointer-events:none}

/* card */
#card{position:fixed;z-index:30;top:calc(76px + var(--sat));right:calc(22px + var(--sar));bottom:calc(22px + var(--sab));width:min(420px,38vw);padding:26px 26px 22px;border-radius:22px;background:var(--glass);backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 0 0 1px var(--line);overflow:auto;display:flex;flex-direction:column;gap:12px;animation:cardin .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes cardin{from{opacity:0;transform:translateX(24px)}}
#card .kind{margin:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
#card h2{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(26px,2.4vw,34px);letter-spacing:-.02em;line-height:1.05}
#card p{margin:0;font-size:15px;line-height:1.55;color:#e9e1dc}
#card-body{display:grid;gap:10px}
#card .media{position:relative;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:16/9;flex:none}
#card .media video,#card .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#card .media .slate{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:22px;background:linear-gradient(135deg,#2a1036,#0b3a3c)}
.unmute{position:absolute;right:10px;bottom:10px;border:0;border-radius:999px;min-height:36px;padding:6px 12px;background:rgba(12,11,16,.7);font-size:12px}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{border:0;border-radius:999px;padding:7px 12px;min-height:34px;font-size:12.5px;background:rgba(246,239,230,.08);color:var(--mute)}
.tabs button[aria-pressed=true]{background:var(--bone);color:var(--ink)}
.tabs:empty{display:none}
#card .cta{margin-top:auto;align-self:flex-start}
.x{position:absolute;top:12px;right:12px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(246,239,230,.08);font-size:22px;line-height:1}
.x:hover{background:rgba(246,239,230,.16)}

/* form */
dialog#book{border:0;padding:0;background:transparent;color:var(--bone);width:min(560px,94vw);max-height:92dvh}
dialog#book::backdrop{background:rgba(8,6,12,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#book form,#book-done{position:relative;display:grid;gap:14px;padding:30px 28px 26px;border-radius:22px;background:#17131d;box-shadow:0 40px 120px rgba(0,0,0,.6),inset 0 0 0 1px var(--line)}
#book h2{margin:0;font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.02em}
#book .sub{margin:-6px 0 4px;color:var(--mute);font-size:14.5px}
#book label{display:grid;gap:6px;font-size:12.5px;letter-spacing:.03em;color:var(--mute)}
#book small{opacity:.7}
#book input,#book select,#book textarea{font:400 16px var(--body);color:var(--bone);background:#0f0c14;border:1px solid var(--line);border-radius:12px;padding:12px 13px;width:100%;min-height:46px}
#book textarea{resize:vertical}
#book input:focus,#book select:focus,#book textarea:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:transparent}
#book .bad{border-color:#ff7a7a}
#book .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#book .err{margin:0;min-height:1.2em;color:#ff9a9a;font-size:13.5px}
#book .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#book .cta{justify-self:start}
#book .cta[disabled]{opacity:.6}

/* plain text version / fallback */
#plain{max-width:980px;margin:0 auto;padding:calc(24px + var(--sat)) 22px 80px;position:relative;z-index:40;background:var(--ink)}
html.plain #gl,html.plain #pins,html.plain #hint,html.plain #sound,html.plain #card,html.plain #back{display:none!important}
html.plain #chrome{position:sticky;background:linear-gradient(var(--ink),transparent)}
#plain .still{width:100%;height:auto;border-radius:18px;display:block}
#plain h1{font-family:var(--display);font-weight:800;font-size:clamp(40px,7vw,72px);letter-spacing:-.03em;margin:28px 0 8px}
#plain h1 small{display:block;font:500 15px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--teal);margin-top:6px}
#plain h2{font-family:var(--display);font-weight:800;font-size:28px;margin:44px 0 14px}
#plain .lead{font-size:19px;line-height:1.5;max-width:60ch;color:#e9e1dc}
#plain-work{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
#plain-work article{padding:16px;border-radius:16px;background:var(--ink2);box-shadow:inset 0 0 0 1px var(--line)}
#plain-work img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:block;background:#000}
#plain-work h3{font-family:var(--display);font-size:20px;margin:12px 0 2px}
#plain-work .k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);margin:0 0 8px}
#plain-work p,#plain-about p,#plain-about li{font-size:15px;line-height:1.55;color:#ddd4d0;margin:0 0 8px}
#plain a{color:var(--teal)}

@media (max-width:820px),(max-height:520px){
  .mark{font-size:19px}.cta{padding:10px 16px;font-size:14px}
  #card{top:auto;left:0;right:0;bottom:0;width:auto;max-height:58dvh;border-radius:22px 22px 0 0;padding:20px 18px calc(18px + var(--sab));animation-name:cardup}
  @keyframes cardup{from{opacity:0;transform:translateY(30px)}}
  #card h2{font-size:24px}#card p{font-size:14.5px}
  #hint{font-size:12.5px;bottom:calc(74px + var(--sab))}
  #book .row{grid-template-columns:1fr}
  #book form,#book-done{padding:24px 18px 20px}
  #sound span,#lights span{display:none}
  html.focus #back{display:none}
}
@media (max-height:520px) and (orientation:landscape){
  #card{top:calc(60px + var(--sat));left:auto;right:calc(10px + var(--sar));bottom:10px;width:46vw;max-height:none;border-radius:18px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* case study */
#case{position:fixed;inset:0;z-index:70;background:rgba(10,8,14,.9);backdrop-filter:blur(26px) saturate(1.2);-webkit-backdrop-filter:blur(26px) saturate(1.2);opacity:0;transform:translateY(14px);transition:opacity .32s ease,transform .32s ease;display:grid;grid-template-rows:auto 1fr}
#case.on{opacity:1;transform:none}
.cs-bar{display:flex;align-items:center;gap:14px;padding:calc(10px + var(--sat)) calc(18px + var(--sar)) 10px calc(18px + var(--sal));border-bottom:1px solid var(--line)}
.cs-back{white-space:nowrap;border:0;background:none;color:var(--bone);font-weight:600;font-size:14.5px;min-height:44px;padding:0 6px}
.cs-back::before{content:"‹ ";color:var(--teal)}
.cs-bar .cta{white-space:nowrap;flex:none}
.cs-name{min-width:0;font-family:var(--display);font-weight:800;margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-scroll{overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.cs-in{max-width:1120px;margin:0 auto;padding:36px 24px calc(80px + var(--sab))}
.cs-head .kind{margin:0 0 8px;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--teal)}
.cs-head h1{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(40px,7vw,92px);letter-spacing:-.03em;line-height:.98}
.cs-meta{display:flex;flex-wrap:wrap;gap:10px 44px;margin:26px 0 16px}
.cs-meta dt{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin-bottom:3px}.cs-meta dd{margin:0;font-size:16px;font-weight:500}
.cs-chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.cs-chips li{padding:7px 13px;border-radius:999px;font-size:13px;background:rgba(246,239,230,.08);box-shadow:inset 0 0 0 1px var(--line)}
.cs-hero{margin:30px 0 8px;display:grid;gap:12px}
.cs-stage{aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.cs-stage video,.cs-stage img{width:100%;height:100%;object-fit:contain;display:block}
.cs-in section{margin-top:54px}
.cs-in h2{font-family:var(--display);font-weight:800;font-size:clamp(24px,3vw,36px);letter-spacing:-.02em;margin:0 0 16px}
.cs-in p{font-size:17px;line-height:1.6;color:#e6dde0;max-width:68ch;margin:0 0 12px}
.cs-lead p:first-child{font-size:clamp(19px,2vw,24px);line-height:1.45;color:var(--bone)}
.cs-camp .sub{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin:-8px 0 12px}
.cs-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px}
.cs-steps li{padding:20px;border-radius:16px;background:rgba(246,239,230,.05);box-shadow:inset 0 0 0 1px var(--line)}
.cs-steps b{font:400 13px var(--mono);color:var(--teal)}.cs-steps h3{font-family:var(--display);font-size:18px;margin:8px 0 8px}.cs-steps p{font-size:14.5px;line-height:1.55;margin:0}
.cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-top:18px}
.cs-shot{border:0;padding:0;background:#000;border-radius:14px;overflow:hidden;aspect-ratio:16/10;cursor:zoom-in}
.cs-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}.cs-shot:hover img{transform:scale(1.04)}
.cs-shot:focus-visible,.cs-play:focus-visible,.cs-back:focus-visible,.cs-nav:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.cs-sessions{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.cs-play{position:relative;border:0;padding:0;border-radius:16px;overflow:hidden;aspect-ratio:16/9;background:#000;color:var(--bone)}
.cs-play img{width:100%;height:100%;object-fit:cover;display:block;opacity:.8}
.cs-play span{position:absolute;left:14px;bottom:12px;display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;text-shadow:0 1px 10px #000}
.cs-play i{width:42px;height:42px;border-radius:50%;background:var(--bone);position:relative}.cs-play i::after{content:"";position:absolute;left:16px;top:12px;border:9px solid transparent;border-left:14px solid var(--ink);border-right:0}
.cs-frame{width:100%;aspect-ratio:16/9;border:0;border-radius:16px;background:#000}
.cs-two{display:grid;grid-template-columns:1.4fr 1fr;gap:40px}
.cs-list{margin:0;padding-left:20px}.cs-list li{font-size:16px;line-height:1.55;margin-bottom:8px;color:#e6dde0}
.cs-cta{text-align:center;padding:46px 20px;border-radius:22px;background:linear-gradient(135deg,rgba(25,230,214,.14),rgba(255,79,184,.12));box-shadow:inset 0 0 0 1px var(--line)}
.cs-cta h2{margin-bottom:18px}
.cs-lb{position:absolute;inset:0;z-index:5;background:rgba(6,4,10,.94);display:grid;grid-template-columns:64px 1fr 64px;align-items:center;justify-items:center}
.cs-lb figure{margin:0;max-width:100%;max-height:100%;display:grid;gap:10px;justify-items:center;padding:20px 0}
.cs-lb img{max-width:100%;max-height:calc(100dvh - 110px);border-radius:12px;display:block}
.cs-lb figcaption{font-size:13.5px;color:var(--mute)}
.cs-nav{width:48px;height:48px;border:0;border-radius:50%;background:rgba(246,239,230,.1);font-size:26px;color:var(--bone)}
#card .btns{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}
#card .btns .cta{margin:0}
@media (max-width:820px){.cs-in{padding:24px 16px calc(70px + var(--sab))}.cs-two{grid-template-columns:1fr;gap:28px}.cs-in p{font-size:16px}.cs-grid{grid-template-columns:1fr 1fr;gap:8px}.cs-lb{grid-template-columns:44px 1fr 44px}.cs-nav{width:40px;height:44px}.cs-bar .cta{padding:8px 14px}}
.cs-big{width:100%;border-radius:18px;display:block;box-shadow:0 30px 80px rgba(0,0,0,.5);background:#000}
.cs-motion{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.cs-motion figure{margin:0}.cs-motion video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;display:block;background:#000}
.cs-motion figcaption{margin-top:8px;font-size:13px;color:var(--mute)}

/* brand line under the mark */
.brand{display:flex;flex-direction:column;gap:5px;pointer-events:none}
.tag{margin:0;font-size:12.5px;font-weight:500;letter-spacing:.02em;color:var(--bone);opacity:.82;text-shadow:0 1px 10px rgba(0,0,0,.8)}
html.inos .tag{opacity:0}

/* the opening is drawn in the scene (see main.js); these only keep the page controls out of the way while it plays */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html.intro #sound,html.intro #lights,html.intro .tag{opacity:0!important;pointer-events:none}

/* room lights */
#lights{position:fixed;z-index:20;left:calc(18px + var(--sal));bottom:calc(70px + var(--sab));min-height:44px;display:flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:10px 14px;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:13px;color:var(--bone);opacity:0;transition:opacity .8s ease .8s}
html.ready #lights{opacity:1}
#lights svg{width:18px;height:18px;fill:currentColor}
#lights:focus-visible,#lt-pop button:focus-visible,#lt-range:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
#lt-pop{position:fixed;z-index:21;left:calc(18px + var(--sal));bottom:calc(124px + var(--sab));width:236px;padding:14px 16px 16px;border-radius:18px;background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 0 0 1px var(--line);display:grid;gap:10px}
#lt-pop label{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:600}
#lt-pop output{color:var(--bone)}
#lt-range{width:100%;height:28px;accent-color:var(--amber);margin:0}
#lt-sw{display:flex;gap:8px;justify-content:space-between}
#lt-sw button{width:28px;height:28px;border-radius:50%;border:0;padding:0;background:var(--c);box-shadow:0 0 14px color-mix(in srgb,var(--c) 60%,transparent),inset 0 0 0 1px rgba(255,255,255,.25)}
#lt-sw button[aria-pressed=true]{outline:2px solid var(--bone);outline-offset:3px}
html.focus #lights,html.inos #lights,html.focus #lt-pop,html.inos #lt-pop,html.plain #lights,html.plain #lt-pop{display:none!important}

/* project card standing in the room (wide screens) */
#card3d{position:fixed!important;inset:0;z-index:30;pointer-events:none}
#card.in3d{position:fixed;top:0;left:0;right:auto;bottom:auto;transform-origin:50% 50%;will-change:transform;animation:none;box-shadow:0 30px 90px rgba(0,0,0,.55),inset 0 0 0 1px rgba(246,239,230,.22),0 0 60px rgba(25,230,214,.08);background:rgba(16,13,22,.8);backface-visibility:hidden;border-top:2px solid var(--teal);scrollbar-width:thin;scrollbar-color:rgba(246,239,230,.25) transparent}
.tether{position:fixed;left:0;top:0;z-index:29;height:2px;margin-top:-1px;transform-origin:0 50%;background:linear-gradient(90deg,rgba(25,230,214,0),var(--teal));box-shadow:0 0 12px var(--teal);border-radius:2px;pointer-events:none;opacity:0}
html:not(.focus) .tether{display:none}

/* the edit: 2062 on a timeline */
#edit{position:fixed;inset:0;z-index:40;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:#121117;color:var(--bone);opacity:0;transition:opacity .4s ease;font-size:14px;
  padding:var(--sat) var(--sar) var(--sab) var(--sal)}
#edit[hidden]{display:none}
#edit.on{opacity:1}
.ed-bar{display:flex;align-items:center;gap:18px;padding:8px 12px;background:#0c0b10;border-bottom:1px solid #26242f}
.ed-name{font-family:var(--display);font-weight:800;font-size:15px;white-space:nowrap}
.ed-name i{font-style:normal;color:var(--teal)}
.ed-name span{font-family:var(--mono);font-weight:400;font-size:12px;color:#8f879c;margin-left:10px}
.ed-tabs{display:flex;gap:22px;margin:0 auto;color:#8f879c;font-weight:500}
.ed-tabs .on{color:var(--teal);box-shadow:0 2px 0 var(--teal)}
.ed-x{border:0;border-radius:999px;min-height:40px;padding:8px 16px;background:var(--bone);color:var(--ink);font-weight:600;white-space:nowrap}
.ed-x:focus-visible,#edit button:focus-visible,.ed-lane:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.ed-main{display:grid;grid-template-columns:230px minmax(0,1fr) 290px;gap:8px;padding:8px;min-height:0}
.ed-bin,.ed-info,.ed-prog{background:#1b1a22;border-radius:10px;min-height:0}
.ed-bin{display:flex;flex-direction:column;overflow:hidden}
.ed-bin h3{margin:0;padding:12px 14px 8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8f879c;font-weight:600}
.ed-bin ol{list-style:none;margin:0;padding:0 8px 8px;overflow:auto;display:grid;gap:4px}
.ed-bin button{width:100%;display:flex;align-items:center;gap:10px;border:0;border-radius:8px;padding:6px;background:transparent;text-align:left;min-height:44px}
.ed-bin button:hover{background:#26242f}
.ed-bin li.on button{background:#2b2836;box-shadow:inset 2px 0 0 var(--mag)}
.ed-bin i{flex:none;width:30px;height:52px;border-radius:4px;background:#0c0b10 url(../../media/2062/strip.webp) 0 0/3600% 100% no-repeat}
.ed-bin span{display:grid;gap:2px}.ed-bin b{font-weight:600}.ed-bin small{font-family:var(--mono);font-size:11px;color:#8f879c}
.ed-prog{display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden}
.ed-frame{position:relative;display:grid;place-items:center;min-height:0;background:#08070b;overflow:hidden}
.ed-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;cursor:pointer;background:#08070b}
.ed-big{position:relative;z-index:1;display:flex;align-items:center;gap:12px;border:0;border-radius:999px;padding:16px 26px 16px 20px;background:var(--bone);color:var(--ink);font-family:var(--display);font-weight:800;font-size:20px;box-shadow:0 10px 50px rgba(0,0,0,.6);transition:transform .2s}
.ed-big:hover{transform:scale(1.04)}
.ed-big[hidden]{display:none}
.ed-big svg{width:26px;height:26px;fill:currentColor}
.ed-ctl{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#15141b;border-top:1px solid #26242f}
.ed-ctl button{border:0;background:transparent;border-radius:8px;min-width:44px;min-height:44px;display:grid;place-items:center;color:var(--bone)}
.ed-ctl button:hover{background:#26242f}
.ed-ctl svg{width:20px;height:20px;fill:currentColor}
.ed-ctl #ed-play{background:var(--teal);color:var(--ink);border-radius:50%}
.ed-ctl output{font-family:var(--mono);font-weight:700;color:var(--teal);margin:0 auto 0 10px;font-size:15px}
.ed-ctl .txt{padding:0 12px;font-weight:500;font-size:13px;color:var(--mute);white-space:nowrap}
.ed-info{padding:20px;overflow:auto;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.ed-info .kind{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);font-weight:600}
.ed-info h2{margin:0;font-family:var(--display);font-weight:800;font-size:44px;letter-spacing:-.03em;line-height:1}
.ed-info p{margin:0;line-height:1.55;color:#d9cfe0}
.ed-info .cta{margin-top:8px}
.ed-tl{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 6px;padding:0 8px 8px}
.ed-heads{display:grid;grid-template-rows:22px 30px 64px 46px;gap:4px;font-weight:700;font-size:11px;color:#b9afc0}
.ed-heads span{display:grid;place-items:center;background:#26242f;border-radius:5px}.ed-heads span:first-child{background:none}
.ed-lane{position:relative;display:grid;grid-template-rows:22px 30px 64px 46px;gap:4px;touch-action:none;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.ed-ruler{position:relative;border-bottom:1px solid #2e2c38}
.ed-ruler span{position:absolute;bottom:2px;padding-left:5px;border-left:1px solid #4a4658;font-family:var(--mono);font-size:10.5px;color:#7d758c;line-height:1.5}
.ed-trk{position:relative;background:#17161d;border-radius:5px;overflow:hidden}
.ed-ttl{position:absolute;left:0;top:2px;bottom:2px;width:9.2%;min-width:96px;border-radius:5px;background:#b06bff;color:#1b1028;font-weight:700;font-size:11px;display:flex;align-items:center;padding:0 8px;white-space:nowrap;overflow:hidden}
.ed-trk.v1{background:#0c0b10 url(../../media/2062/strip.webp) 0 0/100% 100% no-repeat}
.ed-clip{position:absolute;top:0;bottom:0;border:1.5px solid #49c2ff;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(12,11,16,.55)}
.ed-clip span{position:absolute;left:3px;top:3px;padding:1px 5px;border-radius:3px;background:rgba(12,11,16,.72);font-size:10.5px;font-weight:600;color:#cfe9ff}
.ed-clip.on{border-color:#fff;box-shadow:inset 0 0 0 1px rgba(12,11,16,.55),0 0 0 1px #fff}
.ed-trk.a1{background:#12301f}
.ed-trk.a1 i{position:absolute;inset:3px 0;background:#39d98a;-webkit-mask:url(../../media/2062/wave.png) 0 0/100% 100% no-repeat;mask:url(../../media/2062/wave.png) 0 0/100% 100% no-repeat}
.ed-ph{position:absolute;top:0;bottom:0;width:0;pointer-events:none}
.ed-ph::before{content:"";position:absolute;left:-1px;top:8px;bottom:0;width:2px;background:var(--mag);box-shadow:0 0 10px rgba(255,79,184,.8)}
.ed-ph b{position:absolute;left:-8px;top:0;border:8px solid transparent;border-top:11px solid var(--mag);border-bottom:0}
@media (max-width:980px){
  .ed-tabs{display:none}.ed-name span{display:none}.ed-bar{justify-content:space-between}
  .ed-main{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;overflow:hidden}
  .ed-bin{display:none}
  .ed-info{flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px 14px;gap:6px 14px}
  .ed-info h2{font-size:26px}.ed-info .kind{display:none}.ed-info p{font-size:13px;flex:1 1 200px}.ed-info p+p{display:none}.ed-info .cta{margin:0}
  .ed-ctl .txt{padding:0 8px;font-size:12px}#ed-full{display:none}.ed-ruler span:nth-child(even){display:none}
  .ed-heads,.ed-lane{grid-template-rows:20px 22px 52px 34px}
  .ed-tl{grid-template-columns:30px minmax(0,1fr)}
}
@media (max-height:520px) and (orientation:landscape){
  .ed-main{grid-template-columns:minmax(0,1fr) 240px;grid-template-rows:1fr}.ed-bin{display:none}
  .ed-heads,.ed-lane{grid-template-rows:16px 0 40px 0}.ed-trk.v2,.ed-trk.a1,.ed-heads span:nth-child(2),.ed-heads span:nth-child(4){display:none}
}
html.plain #edit,html.plain #card3d{display:none!important}

@media (max-width:620px){.tag span{display:none}.tag{font-size:11.5px}}

/* wide screens: the lit sign in the room is the logo, so the page mark steps aside and the line sits top centre */
html:not(.rail):not(.focus):not(.plain) #chrome .mark{opacity:0;height:0;overflow:hidden}
html:not(.rail):not(.plain) #chrome .brand{position:absolute;left:50%;top:6px;transform:translateX(-50%);align-items:center;text-align:center;white-space:nowrap}
html:not(.rail):not(.plain) #chrome{justify-content:flex-end}
html:not(.rail):not(.plain) .tag{font-size:13px;padding:7px 14px;border-radius:999px;background:rgba(12,11,16,.42);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:opacity .5s}
html.focus .tag{opacity:0}

@media (max-width:820px),(max-height:520px){#lights{left:calc(72px + var(--sal));bottom:calc(18px + var(--sab))}#lt-pop{bottom:calc(72px + var(--sab))}}

/* ---------------------------------------------------------------- game-style interface: sharp plates, tracked caps, light that pulses on the thing to press */
#card.in3d{pointer-events:auto}
.cta{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:4px;padding:12px 22px;min-height:46px;font-family:var(--display);font-weight:800;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(180deg,#fffaf1,#e6d8c6);color:#0c0b10;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 4px 0 0 var(--teal),0 0 22px rgba(246,239,230,.28),0 10px 28px rgba(0,0,0,.5);transition:transform .18s,box-shadow .18s,filter .18s}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%);transform:translateX(-130%);animation:sheen 4.2s ease-in-out infinite;pointer-events:none;mix-blend-mode:overlay}
@keyframes sheen{0%,62%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.cta:hover{background:linear-gradient(180deg,#fff,#f3e8d9);transform:translateY(-2px) scale(1.02);box-shadow:inset 0 0 0 1px #fff,inset 4px 0 0 var(--teal),0 0 34px rgba(246,239,230,.5),0 14px 34px rgba(0,0,0,.55)}
.cta:active{transform:translateY(0) scale(.98)}
.cta.ghost{background:linear-gradient(180deg,rgba(25,230,214,.16),rgba(12,11,16,.72));color:var(--bone);box-shadow:inset 0 0 0 1px rgba(25,230,214,.65),inset 4px 0 0 var(--teal),0 0 18px rgba(25,230,214,.22),0 10px 28px rgba(0,0,0,.45)}
.cta.ghost:hover{background:linear-gradient(180deg,rgba(25,230,214,.3),rgba(12,11,16,.72));box-shadow:inset 0 0 0 1px var(--teal),inset 4px 0 0 var(--teal),0 0 30px rgba(25,230,214,.5),0 14px 34px rgba(0,0,0,.5)}
.cta.hot{min-height:54px;padding:14px 24px;font-size:13.5px;flex:1 1 auto;background:linear-gradient(180deg,#5cfff2,#12c9bb);color:#04201e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 0 26px rgba(25,230,214,.75),0 10px 30px rgba(0,0,0,.5);animation:hot 1.5s ease-in-out infinite}
.cta.hot:hover{background:linear-gradient(180deg,#9afff7,#19e6d6);filter:brightness(1.08)}
@keyframes hot{0%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 0 18px rgba(25,230,214,.6),0 0 0 0 rgba(25,230,214,.65),0 10px 30px rgba(0,0,0,.5)}55%{box-shadow:inset 0 0 0 1px #fff,0 0 42px rgba(25,230,214,1),0 0 0 12px rgba(25,230,214,0),0 10px 30px rgba(0,0,0,.5)}}
.cta svg{width:15px;height:15px;fill:currentColor;flex:none;animation:nudge 1.5s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}55%{transform:translateX(5px)}}
#chrome .cta{animation:idleglow 3.4s ease-in-out infinite}
@keyframes idleglow{0%,100%{filter:drop-shadow(0 0 0 rgba(246,239,230,0))}50%{filter:drop-shadow(0 0 12px rgba(246,239,230,.55))}}
#sound,#back,#lights,#hint{border-radius:4px;font-family:var(--display);font-weight:800;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;background:rgba(12,11,16,.7);box-shadow:inset 0 0 0 1px rgba(246,239,230,.2),inset 3px 0 0 var(--teal),0 8px 24px rgba(0,0,0,.4)}
#sound:hover,#lights:hover,#back:hover{box-shadow:inset 0 0 0 1px var(--teal),inset 3px 0 0 var(--teal),0 0 22px rgba(25,230,214,.45)}
#back{padding:12px 20px;animation:idleglow 3s ease-in-out infinite}
#hint{padding:11px 18px}
#lt-pop{border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 0 0 1px rgba(25,230,214,.4),inset 0 2px 0 var(--teal)}
/* markers on the things you can open */
.pin::before{width:10px;height:10px;margin:-5px;border-radius:1px;transform:rotate(45deg);background:#fff;box-shadow:0 0 14px #fff,0 0 26px rgba(25,230,214,.9)}
.pin::after{width:26px;height:26px;margin:-13px;border-radius:2px;transform:rotate(45deg);border:1.5px solid rgba(255,255,255,.9);box-shadow:0 0 12px rgba(25,230,214,.7);animation:pingd 1.8s ease-out infinite}
@keyframes pingd{0%{transform:rotate(45deg) scale(.55);opacity:1}100%{transform:rotate(45deg) scale(1.9);opacity:0}}
.pin.os::before{background:var(--teal);box-shadow:0 0 14px var(--teal),0 0 28px var(--teal)}
.pin span{border-radius:3px;font-family:var(--display);font-weight:800;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:7px 11px;background:rgba(12,11,16,.82);box-shadow:inset 0 0 0 1px rgba(25,230,214,.55),inset 3px 0 0 var(--teal),0 0 16px rgba(25,230,214,.3)}
.pin.os span{opacity:1;transform:translate(-50%,0);bottom:auto;top:38px}
.pin:hover::before{transform:rotate(45deg) scale(1.35)}
/* the project panel */
#card{border-radius:6px;gap:13px;background:
  linear-gradient(var(--teal),var(--teal)) left top/22px 2px no-repeat,linear-gradient(var(--teal),var(--teal)) left top/2px 22px no-repeat,
  linear-gradient(var(--teal),var(--teal)) right bottom/22px 2px no-repeat,linear-gradient(var(--teal),var(--teal)) right bottom/2px 22px no-repeat,
  repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),rgba(13,11,19,.84);
  box-shadow:0 30px 90px rgba(0,0,0,.6),inset 0 0 0 1px rgba(25,230,214,.28),0 0 50px rgba(25,230,214,.12)}
#card.in3d{border-top:0;background:
  linear-gradient(var(--teal),var(--teal)) left top/22px 2px no-repeat,linear-gradient(var(--teal),var(--teal)) left top/2px 22px no-repeat,
  linear-gradient(var(--teal),var(--teal)) right bottom/22px 2px no-repeat,linear-gradient(var(--teal),var(--teal)) right bottom/2px 22px no-repeat,
  repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),rgba(13,11,19,.86)}
#card .kind{font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.2em}
#card .kind::before{content:"PROJECT FILE  //  ";color:var(--mute)}
#card h2{text-transform:uppercase;letter-spacing:-.01em;text-shadow:0 0 24px rgba(246,239,230,.25)}
#card .media{border-radius:4px;box-shadow:inset 0 0 0 1px rgba(246,239,230,.14)}
#card .btns{gap:10px;flex-wrap:wrap}
#card .btns .cta{flex:1 1 100%}
#card .btns .cta.ghost{min-height:42px}
.tabs button{border-radius:3px;font-family:var(--display);font-weight:800;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.tabs button[aria-pressed=true]{background:var(--teal);color:#04201e;box-shadow:0 0 14px rgba(25,230,214,.5)}
.x{border-radius:4px;box-shadow:inset 0 0 0 1px rgba(246,239,230,.2)}
.x:hover{box-shadow:inset 0 0 0 1px var(--teal),0 0 16px rgba(25,230,214,.5)}
.ed-x,.ed-big{border-radius:4px;font-family:var(--display);font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.ed-x{font-size:12px}
.ed-big{box-shadow:0 0 0 1px #fff inset,0 0 40px rgba(246,239,230,.6),0 10px 50px rgba(0,0,0,.6);animation:hotw 1.5s ease-in-out infinite}
@keyframes hotw{0%,100%{box-shadow:0 0 0 1px #fff inset,0 0 24px rgba(246,239,230,.5),0 0 0 0 rgba(246,239,230,.6)}55%{box-shadow:0 0 0 1px #fff inset,0 0 50px rgba(246,239,230,.9),0 0 0 16px rgba(246,239,230,0)}}
@media (max-width:820px),(max-height:520px){.cta{font-size:11.5px;padding:10px 16px;letter-spacing:.14em}.cta.hot{font-size:12.5px;min-height:50px}#card .btns{flex-wrap:wrap}}

/* the reel on the laptop */
#reel-video{position:fixed;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none}
#reel{position:fixed;z-index:30;left:0;right:0;bottom:0;display:flex;justify-content:center;padding:0 calc(14px + var(--sar)) calc(16px + var(--sab)) calc(14px + var(--sal));pointer-events:none;opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .4s ease}
#reel[hidden]{display:none}
#reel.on{opacity:1;transform:none}
.rl-bar{pointer-events:auto;display:flex;align-items:center;gap:12px;width:min(940px,100%);padding:10px 12px;border-radius:6px;background:rgba(12,11,16,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(25,230,214,.4),inset 0 2px 0 var(--teal),0 18px 50px rgba(0,0,0,.55)}
.rl-i{flex:none;width:46px;height:46px;display:grid;place-items:center;border:0;border-radius:4px;background:rgba(246,239,230,.08);color:var(--bone);box-shadow:inset 0 0 0 1px rgba(246,239,230,.22)}
.rl-i:hover{box-shadow:inset 0 0 0 1px var(--teal),0 0 18px rgba(25,230,214,.45)}
.rl-i:focus-visible,#reel-seek:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.rl-i svg{width:22px;height:22px;fill:currentColor}
#reel-play .pa{display:none}#reel-play.on .pa{display:block}#reel-play.on .pl{display:none}
#reel-mute svg .w,#reel-mute svg .o{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
#reel-mute[aria-pressed=true] .o,#reel-mute[aria-pressed=false] .w{display:none}
#reel-seek{flex:1;min-width:60px;height:30px;margin:0;accent-color:var(--teal)}
#reel-time{flex:none;font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.1em;color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.rl-bar .cta{flex:none;white-space:nowrap;padding:11px 16px}
html.inreel #sound,html.inreel #lights,html.inreel #lt-pop,html.inreel #hint{display:none!important}
html.inreel .pin{opacity:0!important;pointer-events:none}html.inreel .tag{opacity:0}
@media (max-width:720px){#reel-book,#reel-time{display:none}.rl-bar{gap:8px;padding:8px}.rl-bar .cta{padding:10px 12px}}
html.plain #reel{display:none!important}

#card.in3d{padding:22px 22px 20px;gap:11px}
#card.in3d p{font-size:14px;line-height:1.5}
#card.in3d h2{font-size:28px}

/* the main action stays in view at the bottom of the panel, even when the text scrolls */
#card .btns{position:sticky;bottom:-6px;z-index:2;margin-top:auto;padding:14px 0 6px;background:linear-gradient(rgba(13,11,19,0),rgba(13,11,19,.97) 30%)}

/* ---------------------------------------------------------------- round D: big icon controls, the guide written into the room, App Store link */
#sound.hud,#lights.hud{width:64px;height:64px;min-height:0;padding:0;display:grid;place-items:center;gap:0;border-radius:8px;bottom:calc(20px + var(--sab));color:var(--bone);background:rgba(12,11,16,.74);box-shadow:inset 0 0 0 1.5px rgba(246,239,230,.34),inset 0 3px 0 var(--teal),0 10px 30px rgba(0,0,0,.5),0 0 22px rgba(25,230,214,.22);animation:hudidle 3.6s ease-in-out infinite}
#sound.hud{left:calc(20px + var(--sal))}#lights.hud{left:calc(96px + var(--sal))}
@keyframes hudidle{0%,100%{box-shadow:inset 0 0 0 1.5px rgba(246,239,230,.34),inset 0 3px 0 var(--teal),0 10px 30px rgba(0,0,0,.5),0 0 16px rgba(25,230,214,.18)}50%{box-shadow:inset 0 0 0 1.5px rgba(246,239,230,.5),inset 0 3px 0 var(--teal),0 10px 30px rgba(0,0,0,.5),0 0 34px rgba(25,230,214,.5)}}
.hud svg{width:34px!important;height:34px!important}
.hud svg .f{fill:currentColor}.hud svg .w,.hud svg .o{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;opacity:1!important}
#sound.hud[aria-pressed=false] .w{display:none}#sound.hud[aria-pressed=true] .o{display:none}
#sound.hud[aria-pressed=false] .o{stroke:var(--mag)}
#sound.hud[aria-pressed=true],#lights.hud[aria-expanded=true]{color:var(--teal);background:rgba(8,30,32,.82)}
#sound.hud:hover,#lights.hud:hover{animation:none;transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--teal),inset 0 3px 0 var(--teal),0 0 34px rgba(25,230,214,.65)}
#lights.hud{color:var(--lamp,#ffc98f)}#lights.hud svg{filter:drop-shadow(0 0 7px var(--lamp,#ffb26b))}
.hud::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(4px);padding:6px 10px;border-radius:4px;background:rgba(12,11,16,.9);box-shadow:inset 0 0 0 1px rgba(25,230,214,.45);font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.hud:hover::after,.hud:focus-visible::after{opacity:1;transform:translateX(-50%)}
#lt-pop{left:calc(20px + var(--sal));bottom:calc(98px + var(--sab))}
@media (max-width:820px),(max-height:520px){#sound.hud,#lights.hud{width:54px;height:54px;bottom:calc(14px + var(--sab))}#sound.hud{left:calc(14px + var(--sal))}#lights.hud{left:calc(78px + var(--sal))}.hud svg{width:29px!important;height:29px!important}#lt-pop{left:calc(14px + var(--sal));bottom:calc(80px + var(--sab))}.hud::after{display:none}}

@media (prefers-reduced-motion:reduce){.hud{animation:none!important}}

#card-store[hidden]{display:none}
a.cta{text-decoration:none}
.cs-store{margin:22px 0 0}.cs-store .cta{display:inline-flex}
.cs-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---------------------------------------------------------------- round E: the video comes first on a project page; the lights cue */
.cs-hero.vid{width:100%;min-width:0;max-width:min(980px,max(560px,calc((100vh - 390px)*1.7778)));margin:22px auto 8px}
.cs-hero.vid .cs-stage{min-width:0;width:100%}
@media (max-width:820px){.cs-hero.vid{max-width:100%}}
.cs-hero.vid .cs-stage{border-radius:6px;box-shadow:0 0 0 1px rgba(25,230,214,.35),0 30px 80px rgba(0,0,0,.55),0 0 60px rgba(25,230,214,.1)}
.cs-stage .cs-frame{width:100%;height:100%;aspect-ratio:auto;border-radius:0;display:block}
.cs-hero.vid .cs-tabs{justify-content:center}
.watch{position:absolute;left:10px;bottom:10px;z-index:2;display:flex;align-items:center;gap:9px;min-height:38px;padding:7px 13px 7px 8px;border:0;border-radius:4px;background:rgba(12,11,16,.82);color:var(--bone);font-family:var(--display);font-weight:800;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(25,230,214,.6),0 0 18px rgba(25,230,214,.35);animation:hudidle 2.6s ease-in-out infinite}
.watch i{width:24px;height:24px;border-radius:50%;background:var(--teal);position:relative;flex:none}
.watch i::after{content:"";position:absolute;left:9px;top:6.5px;border:5.5px solid transparent;border-left:9px solid var(--ink);border-right:0}
.watch:hover{background:rgba(8,30,32,.92)}.watch:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
#lt-pop.cue{animation:cuepop .5s cubic-bezier(.2,1.2,.3,1) both;box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 0 0 1px var(--teal),inset 0 2px 0 var(--teal),0 0 34px rgba(25,230,214,.5)}
#lt-pop.cue #lt-range{pointer-events:auto}
@keyframes cuepop{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
#case{grid-template-columns:minmax(0,1fr)}

/* ---------------------------------------------------------------- round F: at the glass, looking at the city */
html.incity .pin{opacity:0!important;pointer-events:none}html.incity .tag{opacity:0}
html.incity #lights,html.incity #lt-pop,html.incity #hint{display:none!important}

/* ---------------------------------------------------------------- round G: objectives, controls legend, toast */
#quest{position:fixed;z-index:19;right:calc(20px + var(--sar));top:calc(76px + var(--sat));width:262px;border-radius:6px;background:rgba(12,11,16,.66);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(246,239,230,.16),inset 3px 0 0 var(--teal),0 12px 34px rgba(0,0,0,.4);opacity:0;transition:opacity .8s ease .6s;font-family:var(--display)}
html.ready #quest{opacity:1}
#quest[hidden]{display:none}
#quest-h{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;border:0;background:none;color:var(--bone);padding:11px 12px 9px 15px;font:inherit;font-weight:800;font-size:11px;letter-spacing:.18em;text-transform:uppercase;min-height:40px}
#quest-h b{color:var(--teal);font-weight:800;letter-spacing:.08em;font-variant-numeric:tabular-nums}
#quest-l{list-style:none;margin:0;padding:0 6px 8px 8px;display:grid;gap:1px}
#quest-l button{width:100%;display:flex;align-items:center;gap:10px;border:0;border-radius:4px;background:none;color:var(--bone);padding:7px 8px;font-family:var(--body);font-size:13.5px;text-align:left;min-height:34px}
#quest-l button:hover{background:rgba(25,230,214,.12)}
#quest-l i{flex:none;width:13px;height:13px;transform:rotate(45deg);box-shadow:inset 0 0 0 1.5px var(--teal);transition:background .3s}
#quest-l .done i{background:var(--teal);box-shadow:0 0 10px rgba(25,230,214,.8)}
#quest-l .done span{color:var(--mute);text-decoration:line-through;text-decoration-color:rgba(185,175,192,.5)}
#quest.shut #quest-l,#quest.shut #quest-book{display:none}
#quest.all #quest-h b{text-shadow:0 0 12px var(--teal)}
#quest-book{margin:2px 10px 12px;width:calc(100% - 20px)}
#quest-book[hidden]{display:none}
#quest-h:focus-visible,#quest-l button:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
html.intro #quest,html.focus #quest,html.inos #quest,html.inreel #quest,html.incity #quest,html.plain #quest{display:none!important}
#keys{position:fixed;z-index:18;right:calc(20px + var(--sar));bottom:calc(24px + var(--sab));display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 14px;max-width:min(560px,calc(100vw - 230px));pointer-events:none;opacity:0;transition:opacity .8s ease .8s;font-family:var(--display);font-weight:800;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone);text-shadow:0 1px 8px rgba(0,0,0,.9)}
html.ready #keys{opacity:.92}
#keys[hidden]{display:none}
#keys span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
#keys kbd{font:inherit;padding:5px 8px;border-radius:4px;background:rgba(12,11,16,.78);color:var(--teal);box-shadow:inset 0 0 0 1px rgba(25,230,214,.55),0 2px 0 rgba(25,230,214,.35)}
html.inos #keys,html.plain #keys{display:none!important}
html.inreel #keys{bottom:calc(92px + var(--sab))}
#toast{position:fixed;z-index:60;left:50%;top:calc(70px + var(--sat));transform:translate(-50%,-16px);display:grid;gap:3px;justify-items:center;padding:11px 22px 12px;border-radius:6px;background:rgba(12,11,16,.84);box-shadow:inset 0 0 0 1px rgba(25,230,214,.6),inset 0 2px 0 var(--teal),0 0 40px rgba(25,230,214,.3);opacity:0;pointer-events:none;transition:opacity .4s ease,transform .4s ease;white-space:nowrap;max-width:92vw}
#toast.on{opacity:1;transform:translate(-50%,0)}
#toast b{font-family:var(--display);font-weight:800;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal)}
#toast span{font-size:14.5px;color:var(--bone);overflow:hidden;text-overflow:ellipsis;max-width:84vw}
.pin.ping{animation:pinping 1.1s ease-out 3}
@keyframes pinping{0%{filter:drop-shadow(0 0 0 rgba(25,230,214,0))}40%{filter:drop-shadow(0 0 16px rgba(25,230,214,1)) brightness(1.6)}100%{filter:drop-shadow(0 0 0 rgba(25,230,214,0))}}
@media (max-width:820px),(max-height:520px){
  #quest{right:calc(12px + var(--sar));top:calc(64px + var(--sat));width:min(236px,calc(100vw - 24px))}
  #quest:not(.open) #quest-l,#quest:not(.open) #quest-book{display:none}
  #quest:not(.open){width:auto}
  #quest-h{gap:14px;min-height:38px;padding:9px 12px 9px 14px}
  #keys{right:calc(12px + var(--sar));bottom:calc(20px + var(--sab));max-width:calc(100vw - 150px);font-size:9.5px;gap:5px 9px}
  #keys kbd{padding:4px 6px}
  #toast{top:calc(58px + var(--sat))}
}
@media (prefers-reduced-motion:reduce){.pin.ping{animation:none}}

/* ---------------------------------------------------------------- round I: less on screen. Phones: no list, no legend, quiet markers with one lit at a time. Desktop: a smaller list. */
#quest{width:198px;top:calc(72px + var(--sat));background:rgba(12,11,16,.5);box-shadow:inset 0 0 0 1px rgba(246,239,230,.12),inset 2px 0 0 var(--teal)}
#quest-h{padding:8px 10px 6px 12px;font-size:9.5px;min-height:30px;letter-spacing:.16em}
#quest-l{padding:0 4px 6px 6px}
#quest-l button{padding:4px 6px;font-size:11.5px;min-height:25px;gap:8px}
#quest-l i{width:9px;height:9px}
#quest-book{margin:2px 8px 9px;width:calc(100% - 16px);padding:9px 10px;font-size:10px}
@media (max-width:820px),(max-height:520px){#quest,#keys,#toast{display:none!important}}
html.rail #quest,html.rail #keys,html.rail #toast{display:none!important}
html.rail .pin::after{display:none}
html.rail .pin::before{width:7px;height:7px;margin:-3.5px;border-radius:50%;transform:none;background:rgba(255,255,255,.85);box-shadow:0 0 8px rgba(25,230,214,.7)}
html.rail .pin span,html.rail .pin.os span{opacity:0;transform:translate(-50%,4px)}
html.rail .pin.near::after{display:block}
html.rail .pin.near::before{width:10px;height:10px;margin:-5px;border-radius:1px;transform:rotate(45deg);background:#fff;box-shadow:0 0 14px #fff,0 0 26px rgba(25,230,214,.9)}
html.rail .pin.os.near::before{background:var(--teal)}
html.rail .pin.near span,html.rail .pin.os.near span{opacity:1;transform:translate(-50%,0)}

/* round J: arriving from the homepage's Enter the studio. The homepage hands over on these loading colours, so the mark does not pop in. */
html.enter .ld-mark{display:none}

/* round L: no markers. Whatever is pointed at sits in a pool of light and is named once. The buttons stay for keyboard and screen readers. */
.pin{opacity:0!important;pointer-events:none!important}
.pin:focus-visible{opacity:1!important}
#hov{position:fixed;left:0;top:0;z-index:18;display:flex;flex-direction:column;align-items:flex-start;gap:3px;border:0;margin:0;padding:9px 13px;border-radius:4px;background:rgba(12,11,16,.78);box-shadow:inset 0 0 0 1px rgba(246,239,230,.18),inset 3px 0 0 var(--teal),0 8px 24px rgba(0,0,0,.4);color:var(--bone);font-family:var(--display);text-align:left;pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);will-change:transform}
#hov[hidden]{display:none}
#hov b{font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
#hov i{font-style:normal;font-family:var(--body);font-size:11.5px;color:var(--bone);opacity:.72}
#hov.dock{left:50%;top:auto;bottom:calc(84px + var(--sab));transform:translateX(-50%)!important;pointer-events:auto;min-height:44px;align-items:center;text-align:center;padding:10px 18px}
html.focus #hov,html.inos #hov,html.inreel #hov,html.incity #hov,html.plain #hov,html.intro #hov{display:none!important}