@font-face{font-family:Bureau;src:url('/assets/fonts/STKBureauSans-Regular.woff2?v=ea10d06641') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Bureau;src:url('/assets/fonts/STKBureauSans-Book.woff2?v=3d58b63772') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:Berkeley;src:url('/assets/fonts/BerkeleyMonoVariable.woff2?v=a4c6bf5156') format('woff2');font-display:swap}

/* One monochrome dark surface. Colour comes only from the album: a soft light
   behind the object in each scene.

   Type, spacing and motion follow one small system: a fixed type scale with a
   56px ceiling, tight tracking on headings, a 1200px page band with hairline
   rules, spacing in steps of 8, and one easing curve for interface motion. */
@property --glow{syntax:"<color>";inherits:true;initial-value:rgb(255 255 255 / .08)}
:root{
 color-scheme:dark;
 --background:#000;--ink:#fff;--ink-2:#c9c9c6;--ink-3:#8a8a87;--rule:rgb(255 255 255 / .1);
 --sans:Bureau,Helvetica,Arial,sans-serif;--mono:Berkeley,ui-monospace,'SF Mono',Menlo,monospace;
 --pad:20px;--page:min(100vw - 2*var(--pad),1200px);
 /* Where the page band starts, inside any full-width box; the hairlines that
    frame the page run down both of its edges. */
 --band:max(var(--pad),50% - 600px);--mark:rgb(255 255 255 / .34);
 /* The copy's inner margin inside the page band, given up as the screen narrows. */
 --inset:clamp(32px,(100vw - 1120px)*.25,80px);
 /* The strip under each screen's frame. */
 --foot:0px;--head:72px;
 --ease:cubic-bezier(.6,.6,0,1);--ease-soft:cubic-bezier(.4,0,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);--display:-.025em;
}
@media(min-width:768px){:root{--pad:40px}}
@media(min-width:1024px){:root{--pad:48px}}
@media(min-width:1024px) and (min-height:601px){:root{--foot:48px}}
@media(min-width:1024px){:root{--wait-x:calc(var(--band) + min(100% - 2*var(--pad),1200px)*.72 + min(var(--band),120px)/2);--wait-y:calc(50% + 12px)}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--background)}
body{position:relative;margin:0;background:var(--background);color:var(--ink);font:300 15px/22px var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
p,h1,h2,figure{margin:0}
h1,h2{font-weight:400;letter-spacing:var(--display);text-wrap:balance}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
button:focus-visible,a:focus-visible{outline:1px solid currentColor;outline-offset:5px;border-radius:2px}
img{display:block;max-width:100%;user-select:none;-webkit-user-drag:none}
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Type scale: display 52/56, hero 56/60, heading 44/48, subheading 36/40,
   quote 28/36, body 17/24, small 15/22, label 14/20, eyebrow 12/16. */
.eyebrow{font:500 12px/16px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.link-chevron{display:inline-flex;align-items:center;gap:7px;min-height:40px;font:400 14px/20px var(--sans);color:var(--ink);white-space:nowrap}
.chevron{flex:none;transition:transform .15s var(--ease)}
:is(.link-chevron,.pill):is(:hover,:focus-visible) .chevron{transform:translateX(3px)}
:is(.link-chevron,.pill):is(:hover,:focus-visible) .chevron-down{transform:translateY(3px)}
/* Buttons: one solid, one glass. */
.pill{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 18px;border-radius:999px;font:400 14px/20px var(--sans);white-space:nowrap;color:var(--ink);background:rgb(255 255 255 / .06);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .18);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);transition:background .15s var(--ease),transform .15s var(--ease)}
.pill:hover{background:rgb(255 255 255 / .13)}
.pill:active{transform:scale(.98)}
.pill-solid{background:#fff;color:#000;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.pill-solid:hover{background:#e4e4e0}
.pill:focus-visible{outline-offset:3px;border-radius:999px}

/* Fine grain over everything keeps the dark gradients from banding. */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.1 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:220px 220px}

/* The story is six screens of the page. Their copy scrolls with the page; the
   stage behind them stays on screen and its 3D view moves to the open side. */
.experience{position:relative;display:grid}
.hero-stage{grid-area:1/1;position:sticky;top:0;align-self:start;width:100%;height:100svh;overflow:hidden;background:var(--background);isolation:isolate;contain:paint;--glow:rgb(255 255 255 / .075)}
/* The text renderer draws past its own box; that never widens the page. */
.story-track{grid-area:1/1;position:relative;z-index:2;min-width:0;overflow-x:clip;pointer-events:none}
.beat{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1200px);justify-content:center;align-items:center;padding:var(--head) var(--pad) 48px}
.beat>*{pointer-events:auto;min-width:0}

/* The frame. One band runs the length of the page between two hairlines, and
   every screen of the story is a cell of it: a rule under the header, a rule
   at the foot, a small mark where rules meet. The side rules sit behind the 3D
   view, so the object passes in front of them; the foot rules scroll with the copy. */
.hero-stage::after{content:'';position:absolute;z-index:0;top:0;bottom:0;left:var(--band);right:var(--band);border-inline:1px solid var(--rule);pointer-events:none}
.site-header::after,.beat::after{content:'';position:absolute;left:calc(var(--band) - 1px);right:calc(var(--band) - 1px);height:3px;pointer-events:none;background:linear-gradient(var(--mark),var(--mark)) left/3px 3px no-repeat,linear-gradient(var(--mark),var(--mark)) right/3px 3px no-repeat,linear-gradient(var(--rule),var(--rule)) center/100% 1px no-repeat}
.beat::after{bottom:calc(var(--foot) - 1px)}
.discover-anchor{position:absolute;pointer-events:none}
/* Touch screens snap one screen per swipe. Everything under the story is a
   single tall snap area, which scrolls freely inside itself. */
html[data-snap=native]{scroll-snap-type:y mandatory}
html[data-snap=native] .beat{scroll-snap-align:start;scroll-snap-stop:always}
.free-scroll{position:absolute;left:0;bottom:0;width:1px;pointer-events:none;visibility:hidden}
html[data-snap=native] .free-scroll{scroll-snap-align:start}

/* Light behind the object. It follows the 3D view and takes the album's blue once the story starts. */
.hero-stage[data-scene="1"]{--glow:rgb(58 128 240 / .3)}
.hero-stage[data-scene="2"]{--glow:rgb(40 156 222 / .27)}
.hero-stage[data-scene="3"]{--glow:rgb(122 160 255 / .22)}
.hero-stage[data-scene="4"]{--glow:rgb(84 96 255 / .22)}
.hero-stage[data-scene="5"]{--glow:rgb(58 128 240 / .32)}
.stage-atmosphere{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;transition:opacity 1.6s var(--ease-soft)}
/* The rings stop at the frame. */
@media(min-width:700px){.stage-rings-clip{position:absolute;inset:0;clip-path:inset(var(--head) var(--band) var(--foot) var(--band))}}
.stage-glow,.stage-rings{position:absolute;left:0;top:0;aspect-ratio:1}
.stage-rings{transform:translate3d(calc(var(--scene-cx,50vw) - 50%),calc(var(--scene-cy,50vh) - 50%),0)}
/* The glow is painted once at 640px and then only moved and scaled (src/hero.js),
   so following the view never repaints it. */
.stage-glow{width:640px;border-radius:50%;will-change:transform;transition:--glow 1.8s var(--ease-soft);
 background:radial-gradient(closest-side,var(--glow) 0%,color-mix(in srgb,var(--glow) 78%,transparent) 16%,color-mix(in srgb,var(--glow) 50%,transparent) 34%,color-mix(in srgb,var(--glow) 26%,transparent) 52%,color-mix(in srgb,var(--glow) 10%,transparent) 72%,transparent 100%)}
/* Rings around the hero disc, like sound leaving it. */
.stage-rings{width:calc(var(--scene-h,600px)*var(--ring-scale,1.44));overflow:visible;transition:opacity 1s var(--ease-soft),scale 1.4s var(--ease-out);-webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent 100%);mask-image:radial-gradient(closest-side,#000 40%,transparent 100%)}
.stage-rings circle{stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke;opacity:.05;animation:ring-pulse 6s ease-in-out infinite}
.stage-rings circle:nth-child(2){animation-delay:.5s}.stage-rings circle:nth-child(3){animation-delay:1s}.stage-rings circle:nth-child(4){animation-delay:1.5s}.stage-rings circle:nth-child(5){animation-delay:2s}
@keyframes ring-pulse{0%,60%,100%{opacity:.05}18%{opacity:.18}}
.hero-stage[data-layout=stack]{--ring-scale:1.8}
.hero-stage:not([data-scene="0"]) .stage-rings{opacity:0;scale:1.25}
/* Once they have faded out, the rings stop animating. */
.hero-stage:not([data-scene="0"]) .stage-rings circle{animation-play-state:paused}

/* 3D scene */
.scene-viewport{position:absolute;z-index:1;overflow:hidden;isolation:isolate}
@property --float-distance{syntax:"<length>";inherits:false;initial-value:3px}
.scene-layer{--float-distance:3px;transition:--float-distance 1.2s ease;position:absolute;inset:0;z-index:1;animation:scene-float 8s ease-in-out infinite;will-change:transform}
.hero-stage.is-story .scene-layer{--float-distance:10px}
.hero-stage[data-ambient-paused=true] .scene-layer{animation-play-state:paused}
/* The canvas keeps the size of the largest view (src/hero.js) and is cut to the
   current one by its viewport. */
.scene-layer>canvas{position:absolute;left:0;top:0;z-index:1;display:block;max-width:none;pointer-events:none;transform:translateZ(0);backface-visibility:hidden}
@keyframes scene-float{0%,100%{transform:translate3d(0,calc(0px - var(--float-distance)),0)}50%{transform:translate3d(0,var(--float-distance),0)}}
.hero-orbit-target{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.hero-orbit-target[data-dragging=true]{cursor:grabbing}
.hero-orbit-target:focus-visible{outline:1px solid rgb(255 255 255 / .35);outline-offset:8px;border-radius:50%}
/* A vertical swipe over the disc scrolls the page; a sideways drag turns it. */
@media(pointer:coarse){.hero-orbit-target{touch-action:pan-y}}

/* The scene fades out at the edges of its view, so objects arrive out of the
   dark and the light behind them carries through. */
.edge-fade{display:none}
.scene-viewport{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 28px,#000 calc(100% - 48px),transparent),linear-gradient(to right,transparent,#000 11%,#000 89%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 28px,#000 calc(100% - 48px),transparent),linear-gradient(to right,transparent,#000 11%,#000 89%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.hero-stage[data-layout=stack] .scene-viewport{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 28px,#000 calc(100% - 40px),transparent),linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 28px,#000 calc(100% - 40px),transparent),linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)}

/* Header */
.site-header{position:absolute;top:0;left:0;right:0;z-index:4;height:var(--head);display:grid;place-items:center;pointer-events:none}
.site-header::before{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule)}
.site-header::after{bottom:-1px;background:linear-gradient(var(--mark),var(--mark)) left/3px 3px no-repeat,linear-gradient(var(--mark),var(--mark)) right/3px 3px no-repeat}
/* Both names, small: the Totem wordmark, a hairline, then AudioPhysical and its mark. */
.brand{display:flex;align-items:center;gap:14px;margin:0;font:400 16px/20px var(--sans);letter-spacing:-.01em;animation:soft-in 1.4s var(--ease-soft) .1s both}
.brand-totem{display:block;height:12px;width:auto}
.brand-rule{width:1px;height:16px;background:rgb(255 255 255 / .28)}
.brand-ap{display:flex;align-items:center;gap:7px}
.brand-mark{height:17px;width:auto}
@keyframes soft-in{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}
@keyframes rise-in{from{opacity:0;filter:blur(8px);transform:translateY(14px)}to{opacity:1;filter:blur(0);transform:none}}

/* Loading */
/* The loading mark waits where the object will appear. */
#hero-loading{position:absolute;z-index:3;left:var(--scene-cx,var(--wait-x,50%));top:var(--scene-cy,var(--wait-y,42%));transform:translate(-50%,-50%);display:grid;place-items:center;font:11px var(--mono);color:var(--ink-3);pointer-events:none}
.loader-arc{width:22px;height:22px;border-radius:50%;border:1.5px solid rgb(255 255 255 / .14);border-top-color:var(--ink);animation:loader-arc-spin .9s linear infinite}
@keyframes loader-arc-spin{to{transform:rotate(360deg)}}
#story-status{position:absolute;bottom:4%;left:var(--pad);font:11px var(--mono);color:var(--ink-3);z-index:5}
/* The frame and the pitch are on the page from its first paint. What belongs
   to the 3D object waits for the object's first frame. */
.js .experience:not([data-ready]) :is(.hero-intro,.stage-atmosphere){opacity:0}

/* Hero: the pitch on the left, the disc on the right with its name under it. */
.hero-pitch{justify-self:start;margin-left:var(--inset);width:min(520px,46%)}
.hero-headline{margin-top:24px;font-size:clamp(44px,3.9vw,56px);line-height:1.07}
.hero-lede{margin-top:16px;max-width:26em;font-size:17px;line-height:24px;color:var(--ink-2)}
.hero-links{margin-top:40px;display:flex;align-items:center;gap:24px;animation:rise-in 1.1s var(--ease-soft) .9s both}
.hero-pitch .eyebrow{animation:soft-in 1.1s var(--ease-soft) .3s both}
.hero-intro{position:absolute;z-index:3;left:calc(var(--scene-cx,50vw) - 150px);width:300px;top:calc(var(--scene-cy,50vh) + var(--scene-h,600px)*var(--disc-reach,.33));display:grid;grid-template-rows:20px 18px 24px;justify-items:center;align-items:center;text-align:center;pointer-events:none;transition:opacity .9s var(--ease-soft) .3s,filter .9s var(--ease-soft) .3s,visibility 0s}
.hero-stage[data-layout=stack]{--disc-reach:.4}
.hero-intro .hero-product-name{grid-row:1;grid-column:1;font:400 15px/20px var(--sans);letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.hero-intro #hero-product-availability,.hero-intro #hero-discover{grid-row:2;grid-column:1;font:500 11px/16px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.hero-intro #hero-discover{display:block;pointer-events:auto;padding:1px 8px;transition:color .15s var(--ease)}
.hero-intro #hero-discover:hover{color:var(--ink)}
.hero-intro:not([data-format=mini]) #hero-discover{pointer-events:none}
.hero-discover-label{display:block;min-width:72px}
.hero-intro .hero-discover-arrow{grid-row:3;grid-column:1;display:grid;place-items:center;color:var(--ink-3);opacity:0;transition:opacity .4s ease;animation:cue-bob 2.4s ease-in-out infinite}
.hero-intro[data-format=mini] .hero-discover-arrow{opacity:1}
.hero-intro[data-format=ap] .hero-discover-label:empty,.hero-intro[data-format=mini] #hero-product-availability:empty{visibility:hidden}
@keyframes cue-bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
/* The disc's label leaves as soon as the story is chosen. */
.hero-stage:not([data-scene="0"]) .hero-intro{opacity:0;filter:blur(6px);visibility:hidden;pointer-events:none;transition:opacity .35s var(--ease-soft),filter .35s var(--ease-soft),visibility 0s .35s}
.hero-stage:not([data-scene="0"]) .hero-intro #hero-discover{pointer-events:none}

.hero-wipe{--wipe-ms:400ms}
.hero-wipe.is-wiping{animation:hero-wipe var(--wipe-ms) ease-in-out both}
.hero-wipe.is-wiping-out{animation:hero-wipe-out calc(var(--wipe-ms)*.45) ease-in both}
.hero-wipe.is-wiping-in{animation:hero-wipe-in calc(var(--wipe-ms)*.5) ease-out calc(var(--wipe-ms)*.5) both}
@keyframes hero-wipe{0%{opacity:1}45%,55%{opacity:0}100%{opacity:1}}
@keyframes hero-wipe-out{from{opacity:1}to{opacity:0}}
@keyframes hero-wipe-in{from{opacity:0}to{opacity:1}}

.drag-cue{position:absolute;left:var(--scene-cx,50%);top:calc(var(--scene-cy,50vh) - var(--scene-h,600px)*.37);transform:translateX(-50%);z-index:3;margin:0;font:500 11px/16px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);opacity:0;transition:opacity .8s ease;pointer-events:none;white-space:nowrap}
.drag-cue.is-visible{opacity:.8}
.hero-stage:not([data-scene="0"]) .drag-cue{opacity:0}

/* Chapter copy: one block per screen, beside the scene. */
.chapter-copy{justify-self:start;margin:0 var(--inset);width:min(400px,42%)}
.beat[data-side=right] .chapter-copy{justify-self:end}
.chapter-copy .eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:24px;white-space:nowrap}
.chapter-copy .eyebrow::before{content:'';width:24px;height:1px;background:currentColor;opacity:.7}
.chapter-title{font-size:clamp(36px,3.05vw,44px);line-height:1.09;white-space:pre-wrap;overflow-wrap:anywhere}
.chapter-detail{margin-top:16px;font-size:17px;line-height:24px;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere}
.copy-line{display:block;min-height:1lh}
.copy-paragraph{display:block}
.orb-text{position:relative;display:inline-block;max-width:100%;overflow:visible;vertical-align:top}
.orb-text__source{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.orb-text__canvas{pointer-events:none;display:block;max-width:none;margin:-96px}

/* The close: the line and the two ways in, under the fanned albums. */
.beat-ending{align-items:end;padding-bottom:calc(var(--foot) + 32px + var(--ending-lift,0px))}
.ending-copy{width:100%;display:grid;justify-items:center;gap:32px;text-align:center}
.ending-copy h2{width:100%;font-size:clamp(36px,3.6vw,52px);line-height:1.08}
.ending-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

/* Scene index: four hairlines on the right edge. The current one is longer
   and fills as its scene plays. */
.chapter-ticks{position:absolute;z-index:4;right:10px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end}
.chapter-ticks button{position:relative;height:24px;display:flex;align-items:center;justify-content:flex-end;padding:0 6px;color:var(--ink-3);transition:color .15s var(--ease)}
.chapter-ticks button::after{content:'';width:10px;height:1px;background:currentColor;transition:width .5s var(--ease-out)}
.chapter-ticks button:hover{color:var(--ink)}
.chapter-ticks button[aria-current=step]{color:var(--ink)}
.chapter-ticks button[aria-current=step]::after{width:22px;background:linear-gradient(to right,#fff calc(var(--section-complete,1)*100%),rgb(255 255 255 / .28) 0)}
.tick-label{position:absolute;right:100%;font:500 11px/16px var(--mono);letter-spacing:.04em;white-space:nowrap;text-transform:uppercase;color:var(--ink-2);opacity:0;transform:translateX(6px);transition:opacity .15s var(--ease),transform .15s var(--ease);pointer-events:none}
.chapter-ticks button:is(:hover,:focus-visible) .tick-label{opacity:1;transform:none}
.section-pie{display:none}
.hero-stage[data-layout=stack] .chapter-ticks{display:none}

/* Stacked: tablets and phones upright. The scene sits over the copy, and each
   screen's copy rests on the bottom edge. */
@media(max-width:1023px) and (min-height:601px),(max-width:639px){
 :root{--head:64px}
 .beat{align-items:end;padding:var(--head) var(--pad) max(28px,env(safe-area-inset-bottom) + 12px)}
 .hero-pitch{justify-self:center;margin:0;width:min(100%,560px);text-align:center}
 .hero-pitch .eyebrow{display:none}
 .hero-headline{margin-top:0;font-size:clamp(34px,6.6vw,52px)}
 .hero-lede{max-width:min(26em,100%);margin:14px auto 0}
 .hero-links{justify-content:center;gap:20px;margin-top:24px}
 .chapter-copy,.beat[data-side=right] .chapter-copy{justify-self:center;margin:0;width:min(100%,520px)}
 .chapter-copy .eyebrow{margin-bottom:14px}
 .chapter-title{font-size:clamp(30px,5vw,36px);line-height:1.12}
 .chapter-detail{margin-top:12px}
 .beat-ending{padding-bottom:calc(max(40px,env(safe-area-inset-bottom) + 20px) + var(--ending-lift,0px))}
 .ending-copy{gap:24px}
 .ending-copy h2{font-size:clamp(34px,6.6vw,52px)}
 .drag-cue{display:none}
}
@media(max-width:699px){
 /* Phones keep the horizontal rules only, edge to edge, as the page below does. */
 .hero-stage::after,.site-header::after{display:none}
 .beat::after{left:0;right:0;background:linear-gradient(var(--rule),var(--rule)) center/100% 1px no-repeat}
 .beat-ending::after{display:none}
 .hero-lede,.chapter-detail{font-size:15px;line-height:22px}
 .hero-lede{max-width:21.5em}
 .hero-intro{grid-template-rows:20px 18px 18px}
}
/* A phone on its side: copy beside the scene, one size down. */
@media(max-height:600px) and (min-width:640px){
 :root{--head:56px}
 .brand{font-size:15px;gap:12px}
 .brand-totem{height:11px}
 .brand-mark{height:16px}
 .beat{padding:var(--head) var(--pad) 12px}
 .beat::after{display:none}
 .hero-pitch,.chapter-copy{margin:0 16px;width:min(360px,42%)}
 .hero-pitch .eyebrow,.chapter-copy .eyebrow{display:none}
 .hero-headline{margin-top:0;font-size:32px}
 .chapter-title{font-size:26px;line-height:1.14}
 .hero-lede,.chapter-detail{margin-top:10px;font-size:14px;line-height:20px}
 .hero-links{margin-top:16px;gap:16px}
 .beat-ending{padding-bottom:16px}
 .ending-copy{gap:12px}
 .ending-copy h2{font-size:28px}
 .pill{height:36px;padding:0 16px}
 .hero-intro,.drag-cue,.chapter-ticks{display:none}
}

/* Phone screen */
.phone-dom{position:absolute;inset:0;z-index:0;pointer-events:none}
.native-phone-screen{position:relative;background:#000;overflow:hidden;backface-visibility:hidden}
.native-player-frame{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;border:0;background:#000;transform-origin:50% 82%;will-change:transform,opacity}
.phone-chrome{position:absolute;inset:0;z-index:5;width:100%;height:100%;pointer-events:none}
.studio-lock-screen,.studio-notification{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.studio-lock-screen{z-index:0}
.studio-notification{z-index:2;opacity:0;transform-origin:50% 82.4%}
.studio-screen-sleep{position:absolute;inset:0;z-index:6;background:#000;pointer-events:none}
.studio-notification-touch{position:absolute;left:63.5%;top:82.4%;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.32);border:1px solid rgba(255,255,255,.6);box-shadow:0 0 12px rgba(255,255,255,.3);z-index:4;opacity:0;pointer-events:none}

/* Sound control: a small glass button beside the phone. */
.sound-toggle{position:absolute;z-index:5;padding:0;font:11px var(--mono);color:var(--ink)}
.glass-play{z-index:8;width:56px;height:56px;min-width:56px;min-height:56px;display:grid;place-items:center;padding:0;color:#fff;border-radius:50%;background:rgb(255 255 255 / .09);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);box-shadow:inset 0 1px .5px -.5px rgb(255 255 255 / .5),inset 0 0 0 .5px rgb(255 255 255 / .22),0 10px 24px -12px #000;transition:transform .2s,background .2s}
.glass-play:hover{background:rgb(255 255 255 / .15)}
.glass-play::before{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(165deg,rgb(255 255 255 / .16),transparent 42%,transparent 72%,rgb(255 255 255 / .05));pointer-events:none}
.glass-play svg{position:relative}
.glass-sound{width:44px;height:44px;min-width:44px;min-height:44px;transform:translate(-50%,-50%)}
.glass-sound:active{transform:translate(-50%,-50%) scale(.94)}
/* The sound control presses in step with the phone's mute switch (90 ms press, 45 ms hold, 230 ms release). */
.glass-sound.is-pressing{animation:sound-switch-press 365ms linear both}
@keyframes sound-switch-press{0%{transform:translate(-50%,-50%) scale(1)}24.7%,37%{transform:translate(calc(-50% + 2px),-50%) scale(.9);background:rgb(255 255 255 / .2)}100%{transform:translate(-50%,-50%) scale(1)}}
.volume-control{white-space:nowrap;font:400 12px var(--sans);letter-spacing:0;color:#fff}
.volume-style-2{width:132px;display:flex;gap:9px;padding:0 14px;border-radius:24px}
.volume-style-3{width:90px;min-width:90px;display:flex;gap:15px;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0;border-bottom:1px solid var(--rule);height:36px;min-height:36px}
.volume-style-3::before{display:none}
.volume-style-4{width:123px;border-radius:24px;display:flex;gap:10px;padding:0 14px}
.volume-style-5{width:104px;display:flex;gap:10px;border-radius:24px}
.volume-style-2::before,.volume-style-4::before,.volume-style-5::before{border-radius:24px}
.sound-bars{display:flex;gap:3px;height:17px;align-items:center}
.sound-bars i{display:block;width:2px;height:4px;background:currentColor;border-radius:2px}
.volume-control[data-sound-on=true] .sound-bars i{animation:audio-bar .9s ease-in-out infinite alternate}
.volume-control[data-sound-on=true] .sound-bars i:nth-child(2){animation-delay:-.45s}
.volume-control[data-sound-on=true] .sound-bars i:nth-child(3){animation-delay:-.2s}
@keyframes audio-bar{from{height:4px}to{height:17px}}
.sound-switch{display:block;position:relative;width:34px;height:20px;border-radius:12px;background:rgb(255 255 255 / .2);transition:background .3s}
.sound-switch i{position:absolute;top:3px;left:3px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform .3s}
.volume-control[data-sound-on=true] .sound-switch{background:rgb(255 255 255 / .55)}
.volume-control[data-sound-on=true] .sound-switch i{transform:translateX(14px)}

/* About: the page band, ruled with hairlines. A title beside its text, the
   product on lit panels, the mission, then the way in. */
.about{position:relative;padding:0 var(--pad);overflow-x:clip;scroll-margin-top:0;border-top:1px solid var(--rule)}
:is(.about-inner,.footer-inner){position:relative;max-width:1200px;margin:0 auto;border-inline:1px solid var(--rule)}
:is(.about-inner,.footer-inner)>*{position:relative;min-width:0}
:is(.about-inner,.footer-inner)>*+*{border-top:1px solid var(--rule)}
/* A small mark where each rule meets the band's edge. */
:is(.about-inner,.footer-inner):is(::before,::after),:is(.about-inner,.footer-inner)>*+*:is(::before,::after){content:'';position:absolute;z-index:1;top:-2px;width:3px;height:3px;background:var(--mark)}
:is(.about-inner,.footer-inner)::before,:is(.about-inner,.footer-inner)>*+*::before{left:-2px}:is(.about-inner,.footer-inner)::after,:is(.about-inner,.footer-inner)>*+*::after{right:-2px}
.about-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;align-items:start;padding:120px 80px 80px}
.about-title{font-size:clamp(36px,3.6vw,52px);line-height:1.08}
.about-body{display:grid;gap:24px}
.about-body p{font-size:17px;line-height:26px;color:var(--ink-2)}
.about-stills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:40px;background:rgb(255 255 255 / .018)}
/* Each still sits on its own lit panel, like an object on a shelf. */
.still{position:relative;aspect-ratio:1;overflow:hidden;border-radius:12px;background:radial-gradient(120% 100% at 50% 0%,rgb(255 255 255 / .075),rgb(255 255 255 / .02) 62%),#050506;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .07),inset 0 1px 0 rgb(255 255 255 / .09)}
.still-wide{grid-column:span 2;aspect-ratio:auto}
.still-lit{background:radial-gradient(closest-side at 50% 54%,rgb(58 128 240 / .32),rgb(58 128 240 / .09) 62%,transparent),radial-gradient(120% 100% at 50% 0%,rgb(255 255 255 / .06),rgb(255 255 255 / .02) 62%),#050506}
.still img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform 1.2s var(--ease-out)}
.still:hover img{transform:scale(1.03)}
[data-rise]{opacity:0;filter:blur(10px);transform:translateY(16px);transition:opacity 1.2s var(--ease-soft),filter 1.2s var(--ease-soft),transform 1.4s var(--ease-out)}
[data-rise].is-revealed{opacity:1;filter:blur(0);transform:none}
.about-stills figure:nth-child(2),.about-stills figure:nth-child(4){transition-delay:.12s}.about-stills figure:nth-child(5){transition-delay:.24s}
.about-mission{padding:120px 80px;font-weight:400;font-size:clamp(28px,2.5vw,36px);line-height:1.12;letter-spacing:var(--display);text-align:center;text-wrap:balance}
.about-mission>*{max-width:20em;margin-inline:auto}
.about-charts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;align-items:start;padding:56px 80px}
.chart-logos{width:min(100%,400px);height:auto;opacity:0;filter:blur(7px);transform:translateY(6px);transition:opacity 1.2s var(--ease-soft),filter 1.2s var(--ease-soft),transform 1.2s var(--ease-soft)}
.chart-logos.is-revealed{opacity:1;filter:blur(0);transform:none}
.partner-link{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:40px 80px;font:400 clamp(28px,3.05vw,44px)/1.09 var(--sans);letter-spacing:var(--display);transition:background .3s var(--ease),padding .5s var(--ease-out)}
.partner-link svg{flex:none;width:clamp(24px,2.6vw,36px);height:auto;transition:transform .5s var(--ease-out)}
.partner-link:hover{background:rgb(255 255 255 / .035);padding-left:92px}
.partner-link:hover svg{transform:translate(4px,-4px)}
@media(max-width:1023px){
 .about-head{grid-template-columns:1fr;row-gap:32px;padding:80px 40px 56px}
 .about-stills{padding:24px;gap:12px}
 .about-mission{padding:80px 40px}
 .about-charts{padding:40px}
 .partner-link,.partner-link:hover{padding:32px 40px}
}
@media(max-width:699px){
 .about,.site-footer{padding:0}
 :is(.about-inner,.footer-inner){border-inline:0}
 :is(.about-inner,.footer-inner):is(::before,::after),:is(.about-inner,.footer-inner)>*+*:is(::before,::after){display:none}
 .about-head{padding:64px 20px 40px;row-gap:24px}
 .about-body{gap:16px}
 .about-body p{font-size:15px;line-height:23px}
 .about-stills{grid-template-columns:1fr 1fr;padding:16px;gap:8px}
 .still-wide{aspect-ratio:2}
 .about-mission{padding:64px 20px}
 .about-charts{display:block;padding:32px 20px}
 .chart-logos{margin-top:20px;width:min(78%,330px)}
 .partner-link,.partner-link:hover{padding:24px 20px}
}

/* Footer */
/* Footer: the last two cells of the band. */
.site-footer{padding:0 var(--pad);border-top:1px solid var(--rule);color:var(--ink-3);overflow:hidden}
.footer-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding:20px 80px}
.footer-brand{display:flex;align-items:center;gap:8px}
.footer-brand img{width:20px;height:20px}
.site-footer small{font:300 14px/20px var(--sans);letter-spacing:.0075em;white-space:nowrap}
.site-footer nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px}
.site-footer nav a{display:inline-flex;align-items:center;min-height:40px;font:300 14px/20px var(--sans);color:var(--ink-2);white-space:nowrap;transition:color .15s var(--ease)}
.site-footer nav a:hover,.site-footer nav a:focus-visible{color:var(--ink)}
@media(max-width:1023px){.footer-row{padding:20px 40px}}
@media(max-width:699px){.site-footer{padding:0}.footer-row{padding:16px 20px}}
@media(max-width:480px){.site-footer nav{display:grid;grid-template-columns:auto auto;justify-content:start;gap:0 32px;width:100%}}
.footer-wordmark{margin:0;padding:clamp(16px,3vw,40px) 0 0;margin-bottom:-.17em;text-align:center;white-space:nowrap;font:400 min(15.4vw,calc(var(--page)*.154))/.9 var(--sans);letter-spacing:-.05em;color:transparent;background:linear-gradient(to bottom,rgb(255 255 255 / .16),rgb(255 255 255 / .012) 82%);-webkit-background-clip:text;background-clip:text;user-select:none;pointer-events:none}

/* Touch targets of at least 44px, without moving anything. */
@media(pointer:coarse){
 .hero-intro #hero-discover,.site-footer nav a,.link-chevron,.pill{position:relative}
 .hero-intro #hero-discover::after,.site-footer nav a::after,.link-chevron::after,.pill::after{content:'';position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
 .hero-intro[data-format=mini] #hero-discover{pointer-events:auto}
}

/* Reduced motion: nothing floats, bobs, pulses or blurs in. */
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .loader-arc{animation-duration:2.4s}
 .scene-layer{animation:none!important;transition:none}
 .brand,.hero-pitch .eyebrow,.hero-links{animation:none}
 .stage-rings circle{animation:none;opacity:.09}
 .stage-rings,.stage-glow,.stage-atmosphere{transition:none}
 .hero-intro .hero-discover-arrow{animation:none;transform:none}
 .hero-intro{transition:none;filter:none!important}
 .chart-logos,[data-rise]{transition:none;transform:none;filter:none;opacity:1}
 .chapter-ticks button::after,.tick-label,.pill,.partner-link,.partner-link svg,.still img{transition:none}
 .glass-sound.is-pressing{animation:none}
 .sound-bars i{animation:none!important}
 .sound-switch,.sound-switch i{transition:none}
}

/* Local review tools */
.qa-panel{position:fixed;top:8px;left:8px;z-index:50;background:rgb(20 20 20 / .9);color:#fff;padding:8px;display:flex;gap:8px;align-items:center;font:10px monospace}
.qa-panel label{display:flex;gap:4px;align-items:center}
.qa-panel input{width:60px}
.qa-panel button{border:1px solid #666;padding:4px}
.qa-panel output{min-width:50px}
html[data-layout-review=true] :is(.drag-cue,.hero-pitch,.stage-rings,.ending-copy,.grain){display:none!important}
html[data-layout-review=true][data-review-kind=scene] .about,html[data-layout-review=true][data-review-kind=scene] footer{display:none}
html[data-layout-review=true][data-review-kind=about] .experience{display:none}
html[data-layout-review=true] [data-rise]{opacity:1;filter:none;transform:none;transition:none}
html[data-layout-review=true] .chart-logos{opacity:1;filter:none;transform:none;transition:none}