/* ================= HUD skin: overrides everything above ================= */
:root,:root:not([data-theme="dark"]),:root[data-theme="light"]{
  --page:#0b0c0d; --sheet:#101213; --raised:#15181a; --line:#22262a; --line-2:#363b40;
  --ink:#e6e9e7; --ink-2:#a3a8a6; --ink-3:#6e7472;
  --accent:#e6e9e7; --info:#b9b1a2; --ok:#e6e9e7;
  --high:#e5482f; --med:#c3c8c5; --low:#868c89; --red:#e5482f;
  --dot:transparent; --glow:0; --r:0px; --cm:18px; --cmw:1.5px;
  --sans:"Schibsted Grotesk",system-ui,sans-serif;
  --mono:"Martian Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark}
body{font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
.ground,.spot{display:none}
*:not(.dot):not(.sn):not(.chrome i){border-radius:0!important}
*{font-variation-settings:"wdth" 80}  /* Martian Mono, condensed; font shorthands can't reset this */
:focus-visible{outline-color:var(--red)!important}

/* type */
h2{font:900 clamp(44px,7.2vw,108px)/.86 var(--sans);text-transform:uppercase;letter-spacing:-.035em}
.head{max-width:none;gap:16px}
.head p{max-width:58ch;font-size:17px;color:var(--ink-2)}
.eyebrow{font:500 11.5px var(--mono);letter-spacing:.09em;color:var(--ink-2);text-transform:uppercase}
.eyebrow::before{content:"";display:inline-block;width:.62em;height:.62em;border-radius:50%;background:var(--red);margin-right:.7em;vertical-align:.02em}
.tl{font:500 11.5px/1.7 var(--mono);font-stretch:87.5%;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* frames with crop marks */
.cm{position:relative}
.cm::before{content:"";position:absolute;inset:0;pointer-events:none;--c:var(--ink-3);
  background:
    linear-gradient(var(--c),var(--c)) left top/var(--cm) var(--cmw),linear-gradient(var(--c),var(--c)) left top/var(--cmw) var(--cm),
    linear-gradient(var(--c),var(--c)) right top/var(--cm) var(--cmw),linear-gradient(var(--c),var(--c)) right top/var(--cmw) var(--cm),
    linear-gradient(var(--c),var(--c)) left bottom/var(--cm) var(--cmw),linear-gradient(var(--c),var(--c)) left bottom/var(--cmw) var(--cm),
    linear-gradient(var(--c),var(--c)) right bottom/var(--cm) var(--cmw),linear-gradient(var(--c),var(--c)) right bottom/var(--cmw) var(--cm);
  background-repeat:no-repeat}
section.blk.cm{padding:60px 40px 52px;margin-top:64px}
section.blk.cm:first-of-type{margin-top:40px}
@media (max-width:560px){section.blk.cm{padding:48px 16px 32px;margin-top:40px}}

/* product chrome, sharpened */

.pane>.t{font:500 10.5px var(--mono);font-stretch:87.5%;letter-spacing:.09em}
.steps button{font:500 11px var(--mono);font-stretch:87.5%;letter-spacing:.09em;text-transform:uppercase;transition:background .25s ease,color .25s ease}
.steps button.on{background:var(--ink);color:var(--page)}
.steps button.on b{color:var(--red)}
.caption{font-size:16px}
.cmd{font-stretch:87.5%}
.btn{background:var(--ink);color:var(--page);font:500 11.5px var(--mono);letter-spacing:.09em;text-transform:uppercase}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)}

/* live = red: the stage that is running now */
.pipe .stage.run{border-color:var(--red)}
.pipe .stage.run .sn{border-color:var(--red);color:var(--red)}
.pipe .stage.run .sb{color:var(--red)}
.pipe .stage.run::before{background:linear-gradient(90deg,var(--line),var(--red))}
.pipe .stage.run::after{border-color:var(--red)}

.aitabs2 .prog{background:var(--red)}
.toggle.slide .thumb{background:var(--ink)}

/* ---------- HUD hero ---------- */
.hud{position:relative;height:100svh;min-height:640px;overflow:hidden;margin-inline:-16px}
.hud>.cm{position:absolute;inset:18px;z-index:3;pointer-events:none}
.hud-media{position:absolute;top:0;right:0;bottom:0;width:66%;z-index:0;overflow:hidden}
.hud-media.full{width:100%}   /* footage runs full-bleed; type sits on its dark side */
.hud-media.full::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--page) 0%,rgb(11 12 13/.82) 28%,rgb(11 12 13/.5) 44%,transparent 62%)}
@media (max-width:900px){.hud-media.full::after{background:linear-gradient(0deg,var(--page) 6%,rgb(11 12 13/.78) 34%,rgb(11 12 13/.1) 56%,transparent 70%)}}
.trk.flip .tl{left:auto;right:0}
.hud-media canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .5s ease}
.hud-media canvas.on{opacity:1}
.trk{position:absolute;z-index:2;--cm:14px;transition:left .6s cubic-bezier(.2,.8,.2,1),top .6s cubic-bezier(.2,.8,.2,1),width .6s cubic-bezier(.2,.8,.2,1),height .6s cubic-bezier(.2,.8,.2,1)}
.trk::before{--c:var(--ink)}
.trk .tl{position:absolute;left:0;top:-1.9em;white-space:nowrap;color:var(--ink)}
.hud .tl-l,.hud .tl-r{position:absolute;top:34px;z-index:3}
.hud .tl-l{left:40px} .hud .tl-r{right:40px;text-align:right}
.hud .tl-r button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--ink);background:none;border:0;padding:0;cursor:pointer}
/* SOUND: OFF gets a reticle and a hint for the first seconds, so people find it */
#sound{position:relative;transition:color .6s}
#sound.cue{color:var(--red)}
#sound::before,#sound::after{content:"";position:absolute;pointer-events:none;opacity:0;transition:opacity .6s}
#sound::before{inset:-5px -8px;--c:linear-gradient(var(--red),var(--red));background-repeat:no-repeat;
  background-image:var(--c),var(--c),var(--c),var(--c),var(--c),var(--c),var(--c),var(--c);
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;background-size:7px 2px,2px 7px,7px 2px,2px 7px,7px 2px,2px 7px,7px 2px,2px 7px}
#sound::after{content:"Click for vibes ▸";right:calc(100% + 18px);top:0;white-space:nowrap;color:var(--red)}
#sound.cue::before,#sound.cue::after{opacity:1}
#sound.cue::before{animation:reticle .5s cubic-bezier(.2,.9,.25,1) both}
#sound.zap{animation:sndg .4s steps(4) both}
@keyframes sndg{0%{text-shadow:-3px 0 rgb(229 72 47/.9),2px 0 rgb(230 233 231/.4);transform:translateX(2px);clip-path:inset(0 0 45% 0)}
  33%{text-shadow:3px 0 rgb(229 72 47/.8);transform:translateX(-2px);clip-path:inset(40% 0 0 0)}
  66%{text-shadow:-2px 0 rgb(229 72 47/.6);clip-path:none}100%{text-shadow:none;transform:none}}
@media (prefers-reduced-motion:reduce){#sound.cue::before,#sound.zap{animation:none}}
#fc{transition:color .4s ease} #fc.hit{color:var(--red);transition:none}
.dot{display:inline-block;width:.62em;height:.62em;border-radius:50%;background:var(--red);margin-right:.6em;vertical-align:.02em}
.hud-copy{position:absolute;left:40px;right:40px;bottom:84px;z-index:3;display:grid;gap:22px;justify-items:start}
.hud-copy h1{margin:0;font:900 clamp(54px,min(11.5vw,15.5svh),168px)/.86 var(--sans);text-transform:uppercase;letter-spacing:-.035em}
.hud-copy h1 span{display:block}
.hud-copy .ctas .cmd{background:rgb(11 12 13/.75)}
.ticker{position:absolute;left:18px;right:18px;bottom:18px;z-index:3;height:44px;display:flex;align-items:center;overflow:hidden;border-top:1px solid var(--line);
  -webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ticker .run{display:flex;flex:none;white-space:nowrap;animation:tick 90s linear infinite}
.ticker .run span{padding-inline:22px}
.ticker .run b{color:var(--ink);font-weight:500}
.ticker .run i{font-style:normal;color:var(--red)}
@keyframes tick{to{transform:translateX(-50%)}}
.still .ticker .run{animation-play-state:paused}
.ticker.inset{position:relative;left:auto;right:auto;bottom:auto;border-bottom:1px solid var(--line)}
.ticker.inset .run{animation-duration:120s;animation-direction:reverse}
.ticker.inset.fwd .run{animation-direction:normal}
/* the CI list is content, not decoration: when it stops moving, nothing may stay clipped */
.still .ticker.cis{height:auto;min-height:44px;padding-block:6px}
.still .ticker.cis .run{flex:1 1 100%;flex-wrap:wrap;white-space:normal}
.still .ticker.cis .run span:nth-child(n+12){display:none}
.end{--ggfs:clamp(96px,22vw,300px)}
.gg{font-size:var(--ggfs);line-height:.8}
.ggw{min-height:calc(var(--ggfs)*1.6)}
/* after the countdown the sign-off flashes the EP's name, sized to the same block, then GG. WP. returns */
.gg.eotx{font-size:calc(var(--ggfs)*.55)}
/* end of transmission: the signal drops, the type breaks up, the feed stops */
.eot-top .sq{display:inline-block;width:.62em;height:.62em;margin-right:.7em;vertical-align:.02em;background:var(--red);border-radius:50%;transition:border-radius .2s}
.eot-top.stop .sq{border-radius:0}
.eot-top b{color:var(--ink);font-weight:500}
.ggw{position:relative;overflow:hidden}
.glitch{position:relative}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;white-space:pre-line;pointer-events:none;visibility:hidden}
.glitch::before{color:var(--red)}
.glitch::after{color:var(--ink);background:var(--page)}
.glitch.burst{animation:gflick .36s steps(1) both}
.glitch.burst::before{visibility:visible;animation:gred .36s steps(1) both}
.glitch.burst::after{visibility:visible;animation:gcut .36s steps(1) both}
@keyframes gflick{0%{opacity:1}15%{opacity:.35}25%{opacity:1}60%{opacity:.6}70%{opacity:1}}
@keyframes gred{0%{clip-path:inset(14% 0 66% 0);transform:translateX(-.06em)}25%{clip-path:inset(58% 0 22% 0);transform:translateX(.04em)}50%{clip-path:inset(34% 0 48% 0);transform:translateX(-.03em)}75%{clip-path:inset(82% 0 4% 0);transform:translateX(.07em)}100%{clip-path:inset(0 0 100% 0)}}
@keyframes gcut{0%{clip-path:inset(40% 0 44% 0);transform:translateX(.09em)}20%{clip-path:inset(8% 0 80% 0);transform:translateX(-.05em)}45%{clip-path:inset(66% 0 18% 0);transform:translateX(.12em)}70%{clip-path:inset(24% 0 62% 0);transform:translateX(-.08em)}100%{clip-path:inset(0 0 100% 0)}}
/* "bad rules" gets killed: scrambles, a red strike slashes through, then it stays dim and flickers */
.kill{position:relative;display:inline-block;white-space:nowrap;transition:color .5s ease .35s}
.kill::after{content:"";position:absolute;left:-.04em;right:-.04em;top:52%;height:.11em;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.7,0,.3,1)}
.kill.dead{color:var(--ink-3)}
.kill.dead::after{transform:scaleX(1)}
.kill.flick{animation:gflick .3s steps(1)}
.js .kill:not(.dead):not(.scr){color:var(--ink)}

/* scrubbed data reads as redacted: the values turn into red bars, the toggle goes red */
.red[data-k]{background:var(--red);color:var(--page);font-weight:700;letter-spacing:.06em;padding:0 5px}
.anon[data-k]{color:var(--red);background:color-mix(in srgb,var(--red) 16%,transparent);box-shadow:inset 2px 0 var(--red);padding:0 5px}
/* the kind tag in front of every scrubbed value */
.red[data-k]::before,.anon[data-k]::before{content:attr(data-k);font:700 .78em var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-right:6px;padding:0 4px;
  border-right:1px solid currentColor;opacity:.85}
.toggle.slide.on .thumb{background:var(--red)}
.toggle.slide.on #sc-on{color:var(--ink)}

/* "burn the identities": signal red, tearing now and then; the white slices are the names flickering back */
.burn{display:block;color:var(--red)}
.burn::before{color:var(--ink)}
.burn::after{color:var(--ink);background:var(--page)}

/* whole-page signal: faint scanlines and moving grain; quiet enough to read through */
.crt{position:fixed;inset:0;z-index:40;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgb(230 233 231/.018) 0 1px,transparent 1px 3px)}
.crt::after{content:"";position:absolute;inset:-50%;opacity:.055;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .32s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-7%,4%)}40%{transform:translate(5%,-6%)}60%{transform:translate(-3%,7%)}80%{transform:translate(8%,2%)}100%{transform:translate(0,0)}}
.hud-media.jolt canvas.on{animation:jolt .2s steps(2) both}
@keyframes jolt{0%{transform:translateX(7px);filter:contrast(1.3)}50%{transform:translateX(-4px)}100%{transform:none}}
.still .crt::after{animation-play-state:paused}
/* film: dark vignette; headings tear red once as they arrive */
.crt::before{content:"";position:absolute;inset:0;background:radial-gradient(125% 95% at 50% 45%,transparent 52%,rgb(0 0 0/.55) 100%)}
h2.ghost{animation:ghost .32s steps(4) both}
@keyframes ghost{0%{text-shadow:-.06em 0 rgb(229 72 47/.8),.05em 0 rgb(230 233 231/.3);transform:translateX(.02em);clip-path:inset(0 0 40% 0)}33%{text-shadow:.04em 0 rgb(229 72 47/.7);transform:translateX(-.015em);clip-path:inset(30% 0 0 0)}66%{text-shadow:-.02em 0 rgb(229 72 47/.5);clip-path:none}100%{text-shadow:none;transform:none}}
@media (prefers-reduced-motion:reduce){h2.ghost{animation:none}}
@media (prefers-reduced-motion:reduce){.crt::after,.hud-media.jolt canvas.on{animation:none}}

/* "Nothing ships unchecked": a reticle locks on NOTHING, the rest of the line racks from blur into focus */
.rack{padding-top:26px}
.rack .nth{position:relative;display:inline-block;color:var(--ink)}
.rack .nth::before,.rack .nth::after{content:"";position:absolute;pointer-events:none;opacity:0}
.rack .nth::before{inset:-.08em -.14em -.02em;--c:linear-gradient(var(--red),var(--red));
  background:var(--c) 0 0/.28em 3px,var(--c) 0 0/3px .28em,var(--c) 100% 0/.28em 3px,var(--c) 100% 0/3px .28em,
  var(--c) 0 100%/.28em 3px,var(--c) 0 100%/3px .28em,var(--c) 100% 100%/.28em 3px,var(--c) 100% 100%/3px .28em;background-repeat:no-repeat}
.rack .nth::after{content:"LOCK · 0 UNCHECKED";right:0;bottom:calc(100% + 14px);font:600 11px var(--mono);letter-spacing:.12em;color:var(--red);white-space:nowrap}
.rack .rest{display:inline-block;transition:filter .7s cubic-bezier(.2,.7,.2,1),opacity .7s}
.js .rack:not(.lock) .rest{filter:blur(7px);opacity:.25}
.rack.lock .nth::before,.rack.lock .nth::after{opacity:1}
.rack.lock .nth::before{animation:reticle .5s cubic-bezier(.2,.9,.25,1) both}
.rack.lock .nth::after{animation:fade .3s .45s both}
.rack.lock .rest{transition-delay:.75s}
@keyframes reticle{0%{opacity:0;transform:scale(1.9)}55%{opacity:1;transform:scale(.94)}75%{transform:scale(1.03)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rack .rest{transition:none}.rack .nth::before,.rack .nth::after{animation:none!important;opacity:1}}
/* EP player: one queue for the whole page; native range inputs for position and volume */
.player{display:grid;gap:14px;padding:22px 20px 14px}
.player .ep-h{color:var(--red)}
/* the ending: GG. WP. and install on the left, the EP player beside it */
@media (min-width:900px){.end{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px}
  .end{--ggfs:clamp(96px,12vw,210px)}
  .end>*{grid-column:1}.end>.player{grid-column:2;grid-row:2/span 5;align-self:start;justify-self:stretch;margin-top:calc(var(--ggfs)*.042)}}
.player .now{display:flex;justify-content:space-between;gap:12px;color:var(--ink)}
.player input[type=range]{width:100%;accent-color:var(--red);cursor:pointer}
.player .ctls{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.player .ctl{font:500 12px var(--mono);color:var(--ink-2);background:none;border:1px solid var(--line);border-radius:4px;padding:8px 14px;cursor:pointer}
.player .ctl:hover,.player #ep-play{color:var(--ink);border-color:var(--line-2)}
/* Play and Pause labels differ in width; a fixed width keeps the row from wrapping the volume */
.player #ep-play{min-width:13ch}
.player .vol{display:flex;align-items:center;gap:10px;flex:1;min-width:140px}
.tracks{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.tracks button{display:grid;grid-template-columns:2.4em minmax(0,1fr) 3.4em;gap:12px;width:100%;align-items:baseline;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:10px 4px;cursor:pointer;color:var(--ink-2);font:15px var(--sans)}
.tracks button:hover{color:var(--ink)}
.tracks .n,.tracks .d{font:12px var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.tracks .d{text-align:right}
.tracks button.on{color:var(--ink);box-shadow:inset 2px 0 var(--red)}
.tracks button.on .n{color:var(--red)}
@media (max-width:560px){.player .vol{margin-left:0;width:100%}}
.roll{position:absolute;left:0;right:0;top:-12%;height:10%;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(0deg,rgb(230 233 231/.18) 0 1px,transparent 1px 3px),linear-gradient(rgb(230 233 231/0),rgb(230 233 231/.08),rgb(230 233 231/0))}
.roll.go{animation:roll .7s linear both}
@keyframes roll{0%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(1150%)}}
.end .cmd{max-width:100%} .end{display:grid;gap:12px;justify-items:start}
.end>*{min-width:0}
@media (max-width:900px){.hud-media{width:100%;opacity:.55}}
@media (max-width:560px){
  .hud>.cm{inset:10px}.ticker{left:10px;right:10px;bottom:10px}
  .hud .tl-l{left:24px;top:24px}.hud .tl-r{right:24px;top:24px}.hud .opt{display:none}
  .hud-copy{left:24px;right:24px;bottom:70px}}
@media (prefers-reduced-motion:reduce){.ticker .run{animation:none}.trk,.hud-media canvas{transition:none}}

/* ---------- pre-launch: brew commands shown but not live yet, under an UNAVAILABLE rubber stamp ---------- */
.stamped{position:relative;display:grid;gap:12px;justify-items:start;min-width:0;max-width:100%}
.stamp{position:absolute;left:50%;top:50%;z-index:2;pointer-events:none;white-space:nowrap;
  transform:translate(-50%,-50%) rotate(-9deg);
  font:900 clamp(22px,4.2vw,34px)/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--high);
  padding:8px 18px 7px;border:5px double var(--high);border-radius:10px;
  background:color-mix(in srgb,var(--page) 55%,transparent);opacity:.92;
  /* worn ink: speckled holes from a noise mask */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -7 4.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/240px 120px;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -7 4.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/240px 120px}
.soon-badge{font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--high);
  border:1px solid color-mix(in srgb,var(--high) 55%,transparent);background:color-mix(in srgb,var(--high) 12%,transparent);padding:1px 6px;margin-left:6px;vertical-align:2px}
.btn.is-soon s{text-decoration-thickness:2px;text-decoration-color:var(--high);opacity:.6}
.cmd.is-soon{filter:saturate(.4)} .cmd.is-soon code{opacity:.5}
.cmd.is-soon button:disabled{opacity:.45;cursor:not-allowed}

/* split-name wordmark: Killy over cibo */
.gg.duo{font-size:calc(var(--ggfs)*.62);line-height:calc(.84em + 20px);padding-bottom:12px}
.gg .w{display:block;position:relative}
.gg .role{position:absolute;left:.06em;top:calc(100% - 14px);font:500 11.5px/1.7 var(--mono);font-stretch:87.5%;letter-spacing:.09em;text-transform:uppercase;color:var(--red);white-space:nowrap}