:root {
  color-scheme: dark;
  --ink: #f5f4ea;
  --soft: #aeb6b7;
  --panel: rgba(9, 12, 14, .78);
  --line: rgba(255, 255, 255, .19);
  --yellow: #f6c916;
  --cyan: #49e7e4;
  --world-alpha: 0;
  --world-scale: 1.1;
  --logo-speed: 7.2s;
  --safe-bottom: max(18px, env(safe-area-inset-bottom));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; background: #080b0d; }
body { margin: 0; overflow: hidden; color: var(--ink); }
button, input { font: inherit; }
button { color: inherit; }
.skip-link {
  position: fixed; left: 12px; top: -100px; z-index: 50;
  padding: 10px 14px; border: 2px solid var(--yellow); border-radius: 6px;
  color: #080b0d; background: var(--yellow); font-weight: 800;
}
.skip-link:focus { top: 12px; }
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}
.experience {
  position: relative; width: 100vw; height: 100svh; min-height: 100svh;
  overflow: hidden; isolation: isolate; background: #07090a;
}
.world-video, .world-shade, .atmosphere, .machine, .glass, .noise {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.world-video {
  z-index: 0; object-fit: cover; object-position: center; opacity: var(--world-alpha);
  transform: scale(var(--world-scale)); transition: opacity .5s ease;
}
.world-shade {
  z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2,4,5,.62), transparent 25%, transparent 66%, rgba(2,4,5,.82)),
    radial-gradient(circle at center, rgba(0,0,0,.08) 20%, rgba(0,0,0,.62) 100%);
}
.machine {
  z-index: 3; pointer-events: none; --pointer-x: 0; --pointer-y: 0; --fit-scale: 1;
  transform: perspective(1200px)
    translate3d(calc(var(--pointer-x) * .38vh), calc(var(--pointer-y) * .25vh), 0)
    rotateY(calc(var(--pointer-x) * 1.3deg)) rotateX(calc(var(--pointer-y) * -1deg))
    scale(var(--fit-scale));
  transform-style: preserve-3d; transition: transform .16s ease-out;
}
.machine.pointer-active { will-change: transform; }
.experience.is-resizing .machine { transition-duration: .05s; }
.topology { position: absolute; inset: 0; z-index: 1; transform-style: preserve-3d; }
.receiver-wrap {
  position: absolute; z-index: 3; left: 50%; top: calc(50% + 1vh);
  width: 47.78vh; height: 86vh; transform: translate(-50%, -50%) translateZ(4px);
  overflow: hidden; border-radius: 2.2vh;
  animation: receiver-arrive .72s cubic-bezier(.2,.78,.22,1) both;
  --signal-brightness: 1; --signal-contrast: 1.12; --signal-saturation: 1;
  --signal-hue: 0deg; --signal-blur: 0px; --signal-shift-x: 0%; --signal-shift-y: 0%;
  --signal-scale-y: 1; --static-level: .08;
  box-shadow: 0 2.5vh 3vh rgba(0,0,0,.58);
}
.receiver-wrap.arrived { animation: none; }
@keyframes receiver-arrive {
  from { opacity: 0; transform: translate(-50%, -46%) translateZ(4px) scale(.94); }
  to { opacity: 1; transform: translate(-50%, -50%) translateZ(4px) scale(1); }
}
.receiver-wrap::after {
  content: ""; position: absolute; z-index: 5; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% 35%, rgba(73,231,228,.08), transparent 34%);
  mix-blend-mode: screen;
}
.receiver-video { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.receiver-screen-viewport {
  position: absolute; z-index: 2; left: 7.29%; top: 6.71%; width: 85.42%; height: 46.3%;
  overflow: hidden; contain: paint; isolation: isolate; border-radius: 9% / 8%; background: #061314;
  box-shadow: inset 0 0 0 .34vh rgba(3,8,8,.86), inset 0 0 1.25vh rgba(0,0,0,.68), 0 0 .42vh rgba(73,231,228,.22);
  transform: translateZ(0); opacity: 0; transition: opacity .12s ease;
}
.receiver-wrap.screen-on .receiver-screen-viewport { opacity: 1; }
.receiver-screen-viewport::after {
  content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset .35vh .3vh .8vh rgba(255,255,255,.08), inset -.45vh -.4vh .9vh rgba(0,0,0,.46);
}
.receiver-screen-loop {
  position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: fill; opacity: 0; transition: opacity .18s ease; pointer-events: none;
  transform: translate(var(--signal-shift-x), var(--signal-shift-y)) scaleY(var(--signal-scale-y));
  filter: brightness(var(--signal-brightness)) contrast(var(--signal-contrast)) saturate(var(--signal-saturation)) hue-rotate(var(--signal-hue)) blur(var(--signal-blur));
}
.receiver-wrap.screen-on .receiver-screen-loop { opacity: 1; }
.logo-stage {
  position: absolute; z-index: 8; left: 50%; bottom: calc(var(--safe-bottom) + 76px); width: 27vh; height: 18vh;
  display: grid; place-items: center; opacity: 1; pointer-events: none;
  translate: -50% 0; transition: bottom .3s ease;
}
.logo-stage::before {
  content: ""; position: absolute; left: 20%; right: 20%; bottom: 3%; height: 17%; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.7), rgba(0,0,0,.22) 54%, transparent 74%);
  transform: scaleY(.36);
}
.experience.controls-open .logo-stage { bottom: calc(var(--safe-bottom) + 146px); }
.logo-prism {
  position: relative; width: 17vh; height: 17vh; overflow: hidden; contain: strict;
  background: url('/media/web-circuits-logo-poster.webp?v=1') center / 100% 100% no-repeat;
}
.logo-prism.sprite-ready {
  background: url('/media/web-circuits-logo-solid.webp?v=2') left center / 4800% 100% no-repeat;
  animation: logo-spin var(--logo-speed) steps(47,end) infinite;
}
@keyframes logo-spin { to { background-position: 100% center; } }
.vhs-glitch-layer {
  position: absolute; z-index: 2; inset: 0;
  overflow: hidden; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background:
    repeating-linear-gradient(0deg, transparent 0 1.1%, rgba(255,255,255,.72) 1.2% 1.5%, transparent 1.6% 4.8%),
    repeating-linear-gradient(90deg, rgba(73,231,228,.34) 0 2%, rgba(228,76,130,.26) 2% 4%, transparent 4% 7%);
}
.vhs-glitch-layer::before {
  content: ""; position: absolute; inset: -8%; opacity: .48;
  background:
    radial-gradient(circle, rgba(255,255,255,.7) 0 .08vh, transparent .11vh) 0 0 / .72vh .91vh,
    radial-gradient(circle, rgba(73,231,228,.5) 0 .06vh, transparent .1vh) .31vh .17vh / 1.13vh .67vh,
    radial-gradient(circle, rgba(228,76,130,.36) 0 .05vh, transparent .09vh) .7vh .41vh / .83vh 1.21vh;
  animation: vhs-snow-drift .17s steps(3,end) infinite;
}
.vhs-glitch-layer::after {
  content: ""; position: absolute; left: -8%; right: -8%; top: 12%; height: 17%;
  background: linear-gradient(180deg, transparent, rgba(221,255,251,.85) 44%, rgba(31,58,59,.5) 52%, transparent);
  box-shadow: 0 0 1.2vh rgba(73,231,228,.8);
}
.receiver-wrap.screen-on .vhs-glitch-layer { opacity: calc(.025 + var(--static-level) * .18); animation: vhs-idle-static .23s steps(3,end) infinite; }
.receiver-wrap.noise-boost .vhs-glitch-layer { opacity: calc(.16 + var(--static-level) * .42); }
.receiver-wrap.signal-locked .vhs-glitch-layer { opacity: .018; }
.receiver-wrap.screen-on .vhs-glitch-layer::after { opacity: .12; animation: vhs-idle-scan 6.7s linear infinite; }
.receiver-wrap.vhs-micro .receiver-screen-loop { animation: vhs-micro-jump .14s steps(1,end) 1; }
.receiver-wrap.vhs-micro .vhs-glitch-layer { animation: vhs-micro-noise .14s steps(2,end) 1; }
.receiver-wrap.vhs-scan .receiver-screen-loop { animation: vhs-channel-scan .72s steps(5,end) 1; }
.receiver-wrap.vhs-scan .vhs-glitch-layer { animation: vhs-scan-noise .72s steps(5,end) 1; }
.receiver-wrap.vhs-scan .vhs-glitch-layer::after { animation: vhs-tracking-roll .72s linear 1; }
.receiver-wrap.vhs-snow .vhs-glitch-layer { animation: vhs-snow-burst .32s steps(5,end) 1; }
.receiver-wrap.vhs-snow .receiver-screen-loop { animation: vhs-snow-screen .32s steps(3,end) 1; }
.receiver-wrap.vhs-roll .receiver-screen-loop { animation: vhs-sync-roll .62s steps(6,end) 1; }
.receiver-wrap.vhs-roll .vhs-glitch-layer::after { animation: vhs-tracking-roll .62s linear 1; }
.receiver-wrap.vhs-tear .receiver-screen-loop { animation: vhs-horizontal-tear .22s steps(1,end) 1; }
.receiver-wrap.vhs-tear .vhs-glitch-layer { animation: vhs-micro-noise .22s steps(3,end) 1; }
.receiver-wrap.vhs-drop .receiver-screen-loop { animation: vhs-signal-drop .16s steps(1,end) 1; }
.receiver-wrap.vhs-glitch .receiver-screen-loop { animation: vhs-screen-jump .38s steps(1,end) 1; }
.receiver-wrap.vhs-glitch .vhs-glitch-layer { animation: vhs-static-burst .38s steps(1,end) 1; }
.receiver-wrap.vhs-glitch .vhs-glitch-layer::after { animation: vhs-tracking-roll .38s steps(4,end) 1; }
@keyframes vhs-snow-drift {
  0% { translate: 0 0; rotate: 0deg; }
  33% { translate: .5vh -.3vh; rotate: .2deg; }
  66% { translate: -.35vh .65vh; rotate: -.15deg; }
}
@keyframes vhs-idle-static {
  0% { background-position: 0 0,0 0; transform: translateX(0); }
  33% { background-position: .7vh 1.1vh,-.4vh 0; transform: translateX(.08%); }
  66% { background-position: -.5vh 2.3vh,.8vh 0; transform: translateX(-.08%); }
}
@keyframes vhs-idle-scan { from { top: -25%; } to { top: 115%; } }
@keyframes vhs-micro-jump {
  0%,100% { transform: translateX(0); filter: saturate(.96) contrast(1.02); }
  30% { transform: translateX(-.7%) scaleX(1.01); filter: contrast(1.4) drop-shadow(.25vh 0 #49e7e4); }
  58% { transform: translateX(.35%); filter: brightness(.65) contrast(1.5); }
}
@keyframes vhs-micro-noise {
  0%,100% { opacity: .04; transform: translateX(0); }
  35% { opacity: .48; transform: translateX(1.1%); }
  68% { opacity: .18; transform: translateX(-.5%); }
}
@keyframes vhs-channel-scan {
  0%,100% { transform: translateY(0); filter: saturate(.96) contrast(1.02); }
  14% { transform: translateY(1.6%) scaleY(.97); filter: grayscale(1) contrast(1.9) brightness(.45); }
  31% { transform: translateY(-2.2%) scaleY(1.045); filter: contrast(2.2) brightness(1.45); }
  49% { transform: translateY(1%); filter: hue-rotate(55deg) saturate(1.8) contrast(1.4); }
  72% { transform: translateY(-.4%); filter: grayscale(.35) contrast(1.25); }
}
@keyframes vhs-scan-noise {
  0%,100% { opacity: .04; }
  18% { opacity: .76; background-position: 0 2vh,1vh 0; }
  48% { opacity: .25; background-position: -1vh 5vh,-.7vh 0; }
  70% { opacity: .52; background-position: .5vh 8vh,.4vh 0; }
}
@keyframes vhs-snow-burst {
  0%,100% { opacity: .04; }
  15% { opacity: .9; background-position: -2vh 1vh,2vh 0; filter: contrast(2); }
  42% { opacity: .55; background-position: 3vh 4vh,-1vh 0; }
  71% { opacity: .78; background-position: -1vh 7vh,.5vh 0; }
}
@keyframes vhs-snow-screen {
  0%,100% { filter: saturate(.96) contrast(1.02); }
  28% { filter: grayscale(1) contrast(2.3) brightness(.35); }
  62% { filter: contrast(1.8) brightness(1.35); }
}
@keyframes vhs-sync-roll {
  0%,100% { transform: translateY(0) scaleY(1); }
  18% { transform: translateY(7%) scaleY(.92); filter: contrast(1.55); }
  48% { transform: translateY(-8%) scaleY(1.09); filter: brightness(.55) contrast(1.8); }
  74% { transform: translateY(2%) scaleY(.98); }
}
@keyframes vhs-horizontal-tear {
  0%,100% { transform: translateX(0); clip-path: inset(0); }
  18% { transform: translateX(-2.2%); clip-path: inset(0 0 58% 0); filter: drop-shadow(.5vh 0 #49e7e4); }
  42% { transform: translateX(1.5%); clip-path: inset(39% 0 12% 0); filter: drop-shadow(-.45vh 0 #e44c82); }
  68% { transform: translateX(-.5%); clip-path: inset(61% 0 0 0); }
}
@keyframes vhs-signal-drop {
  0%,100% { opacity: 1; filter: none; }
  20% { opacity: .08; filter: brightness(3); }
  52% { opacity: .2; filter: grayscale(1) contrast(2); }
  76% { opacity: .82; }
}
@keyframes vhs-screen-jump {
  0% { transform: translateX(0); filter: saturate(.96) contrast(1.02); clip-path: inset(0); }
  8% { transform: translateX(-2.4%) scaleX(1.035); filter: contrast(1.8) brightness(1.3) drop-shadow(.8vh 0 #49e7e4) drop-shadow(-.7vh 0 #e44c82); clip-path: inset(8% 0 2% 0); }
  19% { transform: translateX(1.7%) scaleX(.98); filter: grayscale(.8) contrast(2.1) brightness(.45); clip-path: inset(0 0 43% 0); }
  31% { transform: translateX(-.9%); filter: brightness(2.2) contrast(1.6); clip-path: inset(38% 0 0 0); }
  43% { transform: translateX(1.1%) skewX(-1deg); filter: saturate(1.7) contrast(1.35) drop-shadow(.35vh 0 #49e7e4); clip-path: inset(3% 0 5% 0); }
  61% { transform: translateX(-.35%); filter: contrast(1.18) brightness(.9); clip-path: inset(0); }
  100% { transform: translateX(0); filter: saturate(.96) contrast(1.02); clip-path: inset(0); }
}
@keyframes vhs-static-burst {
  0%,100% { opacity: 0; transform: translateX(0); }
  8% { opacity: .95; transform: translateX(2.4%); }
  19% { opacity: .32; transform: translateX(-1.3%); }
  31% { opacity: .88; transform: translateX(.7%); }
  43% { opacity: .25; transform: translateX(-.4%); }
  61% { opacity: .1; transform: translateX(0); }
}
@keyframes vhs-tracking-roll {
  0% { top: -18%; transform: scaleY(.55); }
  45% { top: 54%; transform: scaleY(1.35); }
  100% { top: 112%; transform: scaleY(.7); }
}
.receiver-controls {
  position: absolute; z-index: 3; left: .6%; top: 56.5%; width: 98.8%; height: 16.8%;
  overflow: hidden; color: #252a28; text-transform: uppercase;
  border-top: .18vh solid #777b76; border-bottom: .22vh solid #737771;
  background:
    linear-gradient(90deg, transparent 0 24%, rgba(255,255,255,.25) 36% 64%, transparent 76%),
    linear-gradient(180deg, #d8dad7 0, #bfc2bf 14%, #d8d9d6 48%, #aaada9 100%);
  box-shadow: inset 0 .15vh rgba(255,255,255,.7), inset 0 -.35vh .7vh rgba(39,43,40,.24);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.panel-label {
  position: absolute; top: 6%; z-index: 3; font-size: .72vh; font-weight: 900; letter-spacing: .12em;
}
.volume-label { left: 7%; }
.tuning-label { right: 6%; }
.experience[data-atmosphere="signal"] .panel-label,
.experience[data-atmosphere="signal"] .small-controls span { color: #075e5c; text-shadow: 0 0 .35vh rgba(73,231,228,.32); }
.frequency-scale {
  position: absolute; z-index: 2; left: 25.2%; top: 5.5%; width: 49.6%; height: 22%;
  display: flex; align-items: flex-start; justify-content: space-around; padding-top: .25vh;
  color: #102d2d; border: .25vh solid #58635e; border-radius: .28vh;
  background:
    repeating-linear-gradient(90deg, rgba(5,35,35,.7) 0 .08vh, transparent .08vh 1.05vh),
    linear-gradient(180deg, #69e8e3, #a8fbf0 58%, #55bfbd);
  box-shadow: inset 0 0 .7vh rgba(9,56,55,.56), 0 .1vh .2vh rgba(255,255,255,.5);
}
.frequency-scale::before {
  content: ""; position: absolute; z-index: 3; left: var(--frequency-position, 50%); top: 4%; bottom: 5%; width: .18vh;
  background: #f6c916; box-shadow: 0 0 .55vh #f6c916; transform: translateX(-50%); pointer-events: none;
}
.frequency-scale::after {
  content: ""; position: absolute; left: 4%; right: 4%; bottom: 13%; height: 32%;
  background: repeating-linear-gradient(90deg, #173f3e 0 .08vh, transparent .08vh .62vh);
}
.frequency-input { position: absolute; z-index: 6; inset: 0; width: 100%; height: 100%; margin: 0; opacity: .001; cursor: ew-resize; pointer-events: auto; }
.frequency-scale b { position: relative; z-index: 1; font-size: .63vh; line-height: 1; }
.large-knob {
  position: absolute; z-index: 3; top: 27%; width: 20.5%; aspect-ratio: 1;
  border: .45vh solid #c89e16; border-radius: 50%; cursor: grab;
  background:
    repeating-conic-gradient(from -4deg, #54491d 0 1deg, transparent 1deg 14deg),
    radial-gradient(circle, #d2ad28 0 67%, #a57d0d 69% 100%);
  box-shadow: inset 0 0 0 .22vh rgba(255,225,91,.45), 0 .35vh .6vh rgba(0,0,0,.38);
}
.volume-knob { left: 2.6%; }
.tuning-knob { right: 2.6%; }
.large-knob i {
  position: absolute; inset: 17%; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #5c615e, #171b1a 43%, #050606 70%);
  border: .25vh solid #383d3a; box-shadow: inset .35vh -.45vh .8vh #000, 0 0 0 .12vh #777b76;
  transform: rotate(var(--knob-angle, -25deg)); transition: transform .08s linear;
}
.large-knob i::after {
  content: ""; position: absolute; left: 47%; top: 4%; width: .32vh; height: 38%;
  border-radius: 999px; background: #f4f2e6; transform-origin: 50% 100%;
  box-shadow: 0 0 .18vh rgba(255,255,255,.5);
}
.small-controls {
  position: absolute; z-index: 4; left: 26%; right: 26%; top: 30%; bottom: 5%;
  display: grid; grid-template-columns: repeat(4,1fr); gap: 2%;
}
.small-controls label { position: relative; display: grid; grid-template-rows: 1fr 2.8fr 1fr; place-items: center; min-width: 0; cursor: grab; }
.small-controls span, .small-controls b {
  display: block; max-width: 100%; overflow: hidden; color: #292e2b; font-size: .64vh; font-weight: 900; line-height: 1; letter-spacing: .04em; white-space: nowrap;
}
.small-controls b { color: #353a37; font-size: .58vh; }
.small-controls i {
  position: relative; display: block; width: 2.85vh; max-width: 76%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #626763, #1a1e1c 45%, #090b0a 68%);
  border: .22vh solid #6c716c; box-shadow: inset .2vh -.25vh .45vh #000, 0 .25vh .38vh rgba(0,0,0,.35);
  transform: rotate(var(--knob-angle, 0deg)); transition: transform .08s linear;
}
.small-controls i::after {
  content: ""; position: absolute; left: 50%; top: 7%; width: .2vh; height: 39%;
  border-radius: 999px; background: #e8e6dc; transform: translateX(-50%) rotate(38deg); transform-origin: 50% 100%;
}
.knob-input {
  position: absolute; z-index: 8; inset: 0; width: 100%; height: 100%; margin: 0; opacity: .001;
  cursor: grab; pointer-events: auto; touch-action: none;
}
.large-knob.is-turning, .small-controls label.is-turning, .knob-row label.is-turning,
.knob-input:active { cursor: grabbing; }
.large-knob.is-turning i, .small-controls label.is-turning i, .knob-row label.is-turning i { transition: none; }
.hardware-range:focus-visible, .hardware-button:focus-visible { outline: .32vh solid var(--cyan); outline-offset: .24vh; }
.large-knob:focus-within, .small-controls label:focus-within, .knob-row label:focus-within, .base-slot:focus-within, .frequency-scale:focus-within { filter: drop-shadow(0 0 .8vh var(--cyan)); }
.status-lamp {
  appearance: none; position: absolute; z-index: 9; bottom: 13%; width: 1.2vh; padding: 0; aspect-ratio: 1; border-radius: 50%; border: .18vh solid #555a56;
  cursor: pointer; pointer-events: auto;
  box-shadow: 0 0 .75vh currentColor;
}
.lamp-amber { left: 24%; color: #ffcb27; background: #7a5d09; }
.lamp-green { right: 24%; color: #32c66a; background: #0f6331; }
.status-lamp[aria-pressed="true"] { background: currentColor; box-shadow: 0 0 1.25vh currentColor, 0 0 .28vh #fff inset; }
.cell {
  position: absolute; z-index: 1; width: 13.5vh; height: 13vh;
  opacity: 0; transform-origin: 50% 50%; contain: layout paint style;
  backface-visibility: hidden;
  transition: transform .52s cubic-bezier(.18,.8,.2,1.08), opacity .24s ease-out;
}
.cell.instant { transition: none; }
.experience.is-resizing .cell:not(.instant) {
  transition-duration: .07s, .07s;
  transition-timing-function: linear, linear;
}
.tile-face {
  position: absolute; inset: 0; overflow: hidden; border: .28vh solid #686b66; border-radius: 1.35vh;
  background:
    radial-gradient(circle at 7% 10%, #343936 0 .24vh, #777b73 .28vh .4vh, transparent .44vh),
    radial-gradient(circle at 93% 10%, #343936 0 .24vh, #777b73 .28vh .4vh, transparent .44vh),
    radial-gradient(circle at 7% 90%, #343936 0 .24vh, #777b73 .28vh .4vh, transparent .44vh),
    radial-gradient(circle at 93% 90%, #343936 0 .24vh, #777b73 .28vh .4vh, transparent .44vh),
    linear-gradient(180deg, #f1eddf, #d8d2bf 54%, #aaa795);
  box-shadow:
    inset 0 .12vh rgba(255,255,255,.72),
    inset 0 -.35vh .55vh rgba(31,35,33,.24),
    0 .7vh 1vh rgba(0,0,0,.34);
}
.tile-face::after {
  content: ""; position: absolute; z-index: 8; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 1.4vh var(--cyan); opacity: 0;
}
.cell:not(.resolved) .tile-content { opacity: 0; }
.cell.resolved .tile-content { opacity: 1; transition: opacity .1s linear var(--resolve-delay, 0ms); }
.cell.resolved .tile-face::after { animation: tile-resolve-pulse .28s ease-out var(--resolve-delay, 0ms) 1; }
@keyframes tile-resolve-pulse { 0% { opacity: .82; } 100% { opacity: 0; } }
.tile-content { position: absolute; inset: 1.25vh 1.35vh; }
.vent-lines {
  border-radius: .5vh;
  background: repeating-linear-gradient(0deg, #59605b 0 .28vh, transparent .3vh .76vh);
}
.speaker-cone {
  border-radius: 50%;
  background: radial-gradient(circle, #606762 0 11%, #181d1c 13% 43%, #050707 46% 66%, #454b47 69% 75%, #161a19 78%);
  box-shadow: inset 0 0 0 .3vh #777b73;
}
.meter-face {
  border: .32vh solid #343936; border-radius: .7vh;
  background:
    repeating-conic-gradient(from 220deg at 50% 92%, #353b38 0 1deg, transparent 1deg 8deg),
    linear-gradient(180deg,#f1e9cb,#d7cfad);
  overflow: hidden;
}
.meter-face::after {
  content: ""; position: absolute; left: 49%; bottom: 7%; width: .28vh; height: 63%;
  background: var(--yellow); transform-origin: 50% 100%; transform: rotate(31deg); box-shadow: 0 0 .4vh rgba(246,201,22,.5);
}
.mini-display {
  border: .42vh solid #3e4542; border-radius: 1vh;
  background:
    repeating-linear-gradient(0deg, rgba(73,231,228,.08) 0 1px, transparent 1px .75vh),
    radial-gradient(circle, #143b3c, #081617 72%, #020506);
  overflow: hidden;
}
.mini-display::after {
  content: ""; position: absolute; inset: 18% 10%; background: var(--cyan);
  clip-path: polygon(0 57%, 8% 48%, 16% 70%, 25% 28%, 34% 62%, 43% 43%, 53% 55%, 62% 31%, 71% 67%, 81% 39%, 91% 58%, 100% 47%, 100% 53%, 91% 64%, 81% 45%, 71% 73%, 62% 37%, 53% 61%, 43% 49%, 34% 68%, 25% 34%, 16% 76%, 8% 54%, 0 63%);
  filter: drop-shadow(0 0 .45vh var(--cyan));
}
.switch-grid, .patch-grid {
  appearance: none; border: 0; padding: 0; pointer-events: auto; cursor: pointer;
  background-size: 25% 33.33%; border-radius: .6vh;
  background-image: radial-gradient(circle, var(--dot, #49e7e4) 0 .48vh, #404743 .52vh .72vh, transparent .76vh);
}
.switch-grid {
  --dot: #49e7e4;
  background-color: rgba(29,34,32,.18);
  box-shadow: inset 2.4vh 0 rgba(246,201,22,.16), inset -2.4vh 0 rgba(228,76,130,.14);
}
.patch-grid { --dot: #1d2321; background-color: rgba(28,32,30,.2); }
.switch-grid:active, .patch-grid:active, .patch-grid[aria-pressed="true"] { filter: brightness(1.55); box-shadow: 0 0 1vh var(--cyan) inset; }
.knob-row { display: flex; align-items: center; justify-content: space-around; }
.knob-row label { position: relative; display: grid; place-items: center; width: 31%; aspect-ratio: 1; cursor: grab; }
.knob-row i {
  display: block; width: 2.55vh; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 37% 33%, #666c67, #181d1c 42%, #080a09 68%);
  border: .3vh solid #71766f; box-shadow: 0 .4vh .6vh rgba(0,0,0,.45);
  transform: rotate(var(--knob-angle, 0deg)); transition: transform .08s linear;
}
.knob-row label:nth-child(2) i { border-color: var(--yellow); }
.base-slot {
  inset: 3.3vh 1.2vh; border-radius: .55vh;
  background: linear-gradient(90deg, var(--cyan) 0 35%, #252b29 35% 52%, var(--yellow) 52% 100%);
  box-shadow: inset 0 .5vh 1vh rgba(0,0,0,.55); pointer-events: auto;
}
.base-slot::after {
  content: ""; position: absolute; top: -32%; bottom: -32%; left: var(--fader-position, 50%); width: .7vh;
  border-radius: .2vh; background: #ece9db; border: .16vh solid #363b38; box-shadow: 0 .25vh .4vh rgba(0,0,0,.5); transform: translateX(-50%);
}
.aux-fader { position: absolute; z-index: 3; inset: -65% 0; width: 100%; opacity: .001; cursor: ew-resize; pointer-events: auto; }
.blank-panel { border: .18vh solid rgba(77,81,76,.35); border-radius: .7vh; }
.collapse-wave {
  position: absolute; z-index: 4; left: 50%; top: 50%; width: .6vh; height: 75vh;
  opacity: 0; transform: translate(-50%,-50%); border-radius: 50%;
  background: linear-gradient(180deg, transparent, var(--cyan) 18% 82%, transparent);
  box-shadow: 0 0 1.8vh var(--cyan), 0 0 4vh rgba(73,231,228,.52);
  mix-blend-mode: screen; pointer-events: none;
}
.antenna {
  position: absolute; z-index: 2; height: .24vh; min-height: 2px; opacity: 0;
  transform-origin: 0 50%; border-radius: 999px;
  background: linear-gradient(90deg,#5b625e,#ecf0eb 28%,#929a94 70%,#f3f5f1);
  box-shadow: 0 0 .25vh rgba(255,255,255,.34);
}
.atmosphere { z-index: 2; pointer-events: none; overflow: hidden; opacity: .8; }
.particle { position: absolute; display: none; pointer-events: none; }
/* Baseline: clean diagonal rainfall. */
.experience[data-atmosphere="rain"] .particle.rain {
  display: block; width: 1px; height: var(--length); left: var(--x); top: -12%;
  background: linear-gradient(180deg,transparent,#b9e7ed); opacity: var(--opacity);
  transform: rotate(14deg); animation: rain-fall var(--duration) linear infinite; animation-delay: var(--delay);
}
/* Glass: sparse, weighty trails that feel attached to the lens. */
.experience[data-atmosphere="glass"] .particle.rain {
  display: block; width: 1px; height: var(--length); left: var(--x); top: -16%;
  border-radius: 999px; opacity: var(--opacity);
  background: linear-gradient(180deg,transparent,rgba(218,243,246,.82) 35%,rgba(143,199,207,.28),transparent);
  box-shadow: 0 0 .35vh rgba(185,231,237,.2);
  animation: glass-trail var(--slow-duration) cubic-bezier(.32,.02,.5,1) infinite; animation-delay: var(--slow-delay);
}
.experience[data-atmosphere="glass"] .particle.rain:nth-of-type(5n) { width: 2px; height: calc(var(--length) + 5vh); opacity: .38; }
/* Signal ink: viscous cyan/amber pigment sliding down the lens. */
.experience[data-atmosphere="signal"] .particle.rain {
  display: block; left: var(--x); top: -18%; width: 3px; height: calc(var(--length) + 4vh);
  border-radius: 65% 38% 58% 44% / 14% 18% 82% 86%; opacity: var(--opacity);
  transform-origin: 50% 0;
  background: linear-gradient(180deg,rgba(4,13,14,.06),rgba(8,35,36,.76) 23%,rgba(73,231,228,.76) 78%,rgba(10,39,40,.92));
  box-shadow: inset 1px 0 rgba(218,255,251,.28),0 0 .42vh rgba(73,231,228,.2);
  animation: signal-ink-slide var(--slow-duration) cubic-bezier(.38,.02,.46,1) infinite;
  animation-delay: var(--slow-delay);
}
.experience[data-atmosphere="signal"] .particle.rain::after {
  content: ""; position: absolute; left: 50%; bottom: -.45vh; width: .75vh; aspect-ratio: .76;
  translate: -50% 0; border-radius: 46% 54% 62% 38% / 38% 44% 56% 62%;
  background: radial-gradient(circle at 38% 30%,rgba(220,255,251,.7),rgba(73,231,228,.82) 34%,rgba(7,33,34,.96) 78%);
  box-shadow: 0 .18vh .35vh rgba(0,0,0,.32),0 0 .6vh rgba(73,231,228,.24);
}
.experience[data-atmosphere="signal"] .particle.rain:nth-of-type(3n) { width: 5px; height: calc(var(--length) + 7vh); }
.experience[data-atmosphere="signal"] .particle.rain:nth-of-type(4n) {
  background: linear-gradient(180deg,rgba(24,19,4,.08),rgba(69,52,5,.76) 24%,rgba(246,201,22,.82) 78%,rgba(57,43,4,.94));
  box-shadow: inset 1px 0 rgba(255,246,185,.28),0 0 .4vh rgba(246,201,22,.2);
}
.experience[data-atmosphere="signal"] .particle.rain:nth-of-type(4n)::after {
  background: radial-gradient(circle at 38% 30%,#fff5b9,rgba(246,201,22,.88) 36%,rgba(60,45,3,.98) 80%);
  box-shadow: 0 .18vh .35vh rgba(0,0,0,.32),0 0 .55vh rgba(246,201,22,.22);
}
/* Mist: low-frequency suspended moisture with rare horizontal glints. */
.experience[data-atmosphere="mist"] .particle.mote {
  display: block; width: max(.5vh,var(--size)); aspect-ratio: 1; left: var(--x); top: var(--y);
  border-radius: 50%; opacity: var(--opacity);
  background: radial-gradient(circle,rgba(226,248,247,.72),rgba(73,231,228,.14) 45%,transparent 72%);
  box-shadow: 0 0 1.8vh rgba(73,231,228,.18);
  animation: mist-drift var(--slow-duration) ease-in-out infinite alternate; animation-delay: var(--slow-delay);
}
.experience[data-atmosphere="mist"] .particle.streak:nth-of-type(4n) {
  display: block; width: var(--length); height: 1px; left: -15%; top: var(--y); opacity: .18;
  background: linear-gradient(90deg,transparent,#d9f4f2,transparent);
  animation: mist-glint var(--slow-duration) linear infinite; animation-delay: var(--slow-delay);
}
@keyframes rain-fall { to { translate: -8vw 125vh; } }
@keyframes glass-trail {
  0% { translate: 0 -12vh; scale: 1 .35; opacity: 0; }
  16% { opacity: .52; }
  76% { opacity: .28; }
  100% { translate: .8vw 132vh; scale: 1 1.18; opacity: 0; }
}
@keyframes signal-ink-slide {
  0% { translate: 0 -18vh; scale: .72 .2; opacity: 0; }
  9% { opacity: .78; }
  28% { translate: -.28vw 16vh; scale: .9 .58; }
  55% { translate: .22vw 58vh; scale: 1 1.08; }
  78% { translate: -.16vw 91vh; scale: .86 1.35; opacity: .68; }
  100% { translate: .32vw 132vh; scale: .72 1.62; opacity: 0; }
}
@keyframes mist-drift { to { translate: 7vw -5vh; scale: 1.28; } }
@keyframes mist-glint { to { translate: 135vw 1vh; } }
.glass {
  z-index: 5; pointer-events: none; opacity: calc(.08 + var(--world-alpha) * .12);
  background: linear-gradient(112deg,transparent 19%,rgba(255,255,255,.07) 30%,transparent 39%), radial-gradient(circle at 70% 23%,rgba(73,231,228,.08),transparent 27%);
}
.noise {
  z-index: 6; pointer-events: none; opacity: .075;
  background-image: repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px), radial-gradient(circle at 30% 20%,rgba(255,255,255,.1) 0 1px,transparent 1.5px);
  background-size: auto,7px 7px;
}
.signal-ink-video {
  position: absolute; z-index: 7; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; pointer-events: none; mix-blend-mode: screen; contain: strict;
  transform: translate(var(--ink-x,0),var(--ink-y,0)) scaleX(var(--ink-flip,1)) scale(var(--ink-scale,1));
  transition: opacity .16s ease;
}
.experience[data-atmosphere="signal"] .signal-ink-video.is-active { opacity: var(--ink-opacity,.55); will-change: opacity,transform; }
.teaser-copy {
  position: absolute; z-index: 9; left: 50%; bottom: calc(var(--safe-bottom) + 20px);
  transform: translateX(-50%); width: max-content; text-align: center;
  text-shadow: 0 2px 20px #000,0 0 26px rgba(73,231,228,.18);
}
.teaser-copy h2 { margin: 0; color: var(--ink); font: 650 clamp(20px,2.1vw,32px)/1 "Arial Narrow","Roboto Condensed",sans-serif; letter-spacing: .035em; }
.teaser-copy p { margin: 7px 0 0; color: var(--yellow); font: 800 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .22em; text-transform: uppercase; }
.teaser-copy a { color: inherit; text-decoration-color: rgba(246,201,22,.48); text-underline-offset: .28em; }
.teaser-copy a:hover { color: #fff1a5; }
.teaser-copy a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 5px; }
.controls-toggle {
  position: absolute; z-index: 13; right: max(14px,env(safe-area-inset-right)); bottom: var(--safe-bottom);
  min-width: 58px; min-height: 36px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--cyan); background: rgba(7,10,11,.92); box-shadow: 0 8px 26px rgba(0,0,0,.35);
  font: 800 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .13em; text-transform: uppercase; cursor: pointer;
}
.controls-toggle:hover { border-color: var(--cyan); background: rgba(12,18,19,.9); }
.controls-toggle[aria-expanded="true"] { color: #15120a; border-color: var(--yellow); background: var(--yellow); }
.experience.controls-open .controls-toggle { bottom: calc(var(--safe-bottom) + 76px); }
.experience.controls-open .teaser-copy { bottom: calc(var(--safe-bottom) + 88px); }
.controls {
  position: absolute; z-index: 12; left: 50%; bottom: var(--safe-bottom); width: min(920px,calc(100vw - 24px));
  max-height: calc(100dvh - 64px); overflow: auto;
  transform: translateX(-50%); display: grid; grid-template-columns: auto minmax(220px,1fr) auto; gap: 14px; align-items: end;
  padding: 11px; border: 1px solid var(--line); border-radius: 13px; background: rgba(9,12,14,.94);
  box-shadow: 0 18px 55px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.06);
}
.controls[hidden] { display: none; }
.environment-controls { display: grid; gap: 6px; }
.scene-switcher, .atmosphere-switcher, .actions { display: flex; gap: 6px; flex-wrap: wrap; }
.scene-switcher button, .atmosphere-switcher button, .actions button {
  min-height: 38px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; color: #d9dedb; background: rgba(255,255,255,.055); cursor: pointer;
  font-size: 12px; font-weight: 760; transition: background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.scene-switcher button:hover, .atmosphere-switcher button:hover, .actions button:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.34); }
.scene-switcher button[aria-pressed="true"] { background: var(--yellow); color: #15120a; border-color: var(--yellow); }
.atmosphere-switcher button[aria-pressed="true"] { background: var(--cyan); color: #071011; border-color: var(--cyan); }
button:active { transform: translateY(1px); }
button:focus-visible, input:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.width-control label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; font: 700 10px/1 ui-monospace,monospace; letter-spacing: .08em; text-transform: uppercase; }
.width-control output { color: var(--cyan); }
.width-control input { display: block; width: 100%; height: 18px; margin: 0; accent-color: var(--yellow); cursor: ew-resize; }
.range-labels { display: flex; justify-content: space-between; color: #899193; font: 700 9px/1 ui-monospace,monospace; text-transform: uppercase; }
.actions { justify-content: flex-end; }
.actions button { color: #d9dedb; }
.actions button[aria-pressed="true"] { color: #080b0d; background: var(--cyan); border-color: var(--cyan); }
.media-paused .noise, .media-paused .particle, .media-paused .logo-prism, .media-paused .vhs-glitch-layer, .media-paused .vhs-glitch-layer::before, .media-paused .vhs-glitch-layer::after { animation-play-state: paused; }
.noscript { position: fixed; inset: auto 20px 20px; z-index: 30; padding: 15px; color: #111; background: var(--yellow); }
@media (max-width: 760px) {
  .experience.controls-open .teaser-copy { bottom: calc(var(--safe-bottom) + 190px); }
  .experience.controls-open .logo-stage { bottom: calc(var(--safe-bottom) + 246px); }
  .experience.controls-open .controls-toggle { bottom: calc(var(--safe-bottom) + 180px); }
  .controls { grid-template-columns: 1fr; gap: 9px; width: min(520px,calc(100vw - 20px)); }
  .scene-switcher, .atmosphere-switcher, .actions { justify-content: center; }
  .width-control { order: -1; }
}
@media (max-height: 620px) {
  .teaser-copy { display: block; bottom: var(--safe-bottom); }
  .teaser-copy h2 { font-size: clamp(16px,5vh,23px); }
  .teaser-copy p { margin-top: 4px; font-size: 8px; }
  .controls { bottom: 8px; padding: 8px; }
  .scene-switcher button, .atmosphere-switcher button, .actions button { min-height: 32px; padding-block: 5px; }
}
@media (max-width: 450px) {
  .scene-switcher button, .atmosphere-switcher button, .actions button { min-height: 34px; padding: 6px 9px; font-size: 11px; }
  .controls { padding: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation: none !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}