:root{
  --bg:#03050a;
  --ink:#eef6ff;
  --muted:#8b95ab;
  --faint:#4d5568;
  --line:rgba(160,210,255,.14);
  --cyan:#72f5ff;
  --violet:#9c70ff;
  --lime:#c7ff5e;
  --pink:#ff6fd8;
  --mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Manrope',system-ui,sans-serif;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow:hidden;color-scheme:dark}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
button:focus-visible,input:focus-visible,a:focus-visible{outline:1px solid var(--cyan);outline-offset:3px}
::selection{background:rgba(114,245,255,.22)}

#field{position:fixed;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.grain,.scanlines{position:fixed;inset:0;pointer-events:none;z-index:2}
.grain{opacity:.16;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
.scanlines{opacity:.05;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.14) 3px 4px)}

.hud-frame{position:fixed;inset:14px;z-index:3;pointer-events:none}
.hud-frame i{position:absolute;width:22px;height:22px;border:1px solid rgba(114,245,255,.35)}
.hud-frame i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.hud-frame i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.hud-frame i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.hud-frame i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}

.top{position:fixed;z-index:6;left:0;right:0;top:0;padding:calc(16px + var(--safe-top)) clamp(18px,3vw,42px) 12px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;pointer-events:none}
.top a,.top button{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;text-transform:uppercase;letter-spacing:.14em;font:500 10px var(--mono);color:var(--muted)}
.brand:hover{color:var(--ink)}
.brand-mark{width:22px;height:22px;position:relative;display:inline-grid;place-items:center}
.brand-mark i{position:absolute;width:15px;height:15px;border:1px solid var(--cyan);border-radius:50%;opacity:.55;animation:orbit 8s linear infinite}
.brand-mark i:nth-child(2){transform:rotate(60deg) scale(.68);border-color:var(--pink)}
.brand-mark i:nth-child(3){transform:rotate(120deg) scale(.36);border-color:var(--lime)}
@keyframes orbit{50%{border-radius:34% 66% 52% 48%;transform:rotate(180deg) scale(.86)}}
.title-wrap{display:flex;align-items:center;gap:10px;font-family:var(--mono);letter-spacing:.16em}
.title-wrap span,.title-wrap em{font-size:8px;color:var(--faint);font-style:normal}
.title-wrap strong{font-size:11px}
.host-chip{justify-self:end;font:400 8px var(--mono);letter-spacing:.12em;color:var(--cyan);text-decoration:none;border:1px solid var(--line);padding:7px 10px;border-radius:999px}
.host-chip:hover{border-color:rgba(114,245,255,.5)}

.copy{position:fixed;z-index:5;left:clamp(22px,5vw,72px);top:clamp(96px,16vh,168px);max-width:520px;pointer-events:none;transition:opacity .5s ease,transform .5s ease}
.copy.is-hidden{opacity:.12;transform:translateY(-8px)}
.kicker{font:500 8px var(--mono);letter-spacing:.22em;color:var(--cyan)}
.copy h1{margin:12px 0 12px;font-weight:300;font-size:clamp(34px,5vw,68px);letter-spacing:-.045em;line-height:.95}
.copy p{margin:0;max-width:440px;color:var(--muted);font-size:13px;line-height:1.7}

.readout{position:fixed;z-index:5;left:clamp(22px,5vw,72px);bottom:calc(220px + var(--safe-bottom));font:400 8px var(--mono);letter-spacing:.14em;color:rgba(255,255,255,.38);pointer-events:none}

.telemetry{position:fixed;z-index:5;right:clamp(18px,3vw,48px);top:clamp(96px,18vh,160px);display:grid;gap:14px;pointer-events:none}
.telemetry div{min-width:88px}
.telemetry span{display:block;font:400 7px var(--mono);letter-spacing:.16em;color:var(--faint)}
.telemetry strong{display:block;margin-top:4px;font:400 13px var(--mono);letter-spacing:.08em;color:var(--cyan)}

.gate{position:fixed;z-index:7;left:50%;top:54%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:12px;transition:opacity .4s ease,transform .4s ease}
.gate.is-off{opacity:0;pointer-events:none;transform:translate(-50%,-46%) scale(.96)}
.ignite{position:relative;width:148px;height:148px;border-radius:50%;border:1px solid rgba(114,245,255,.45);background:radial-gradient(circle at 50% 42%,rgba(114,245,255,.16),rgba(5,8,16,.4) 62%);font:500 11px var(--mono);letter-spacing:.22em;box-shadow:0 0 40px rgba(114,245,255,.12),inset 0 0 30px rgba(156,112,255,.08)}
.ignite:hover{border-color:var(--cyan);box-shadow:0 0 56px rgba(114,245,255,.22)}
.ignite-orb{position:absolute;inset:18px;border-radius:50%;border:1px solid rgba(114,245,255,.2);animation:pulse 2.8s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(.86);opacity:.55}}
.gate small{font:400 8px var(--mono);letter-spacing:.16em;color:var(--faint)}

.hud{position:fixed;z-index:6;left:14px;right:14px;bottom:calc(14px + var(--safe-bottom));display:flex;justify-content:center;pointer-events:none}
.rack{width:min(1180px,100%);display:flex;flex-direction:column;gap:6px;pointer-events:auto}
.rack-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center}
.group{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1px solid var(--line);background:rgba(4,6,12,.55);backdrop-filter:blur(14px);padding:6px 8px}
.group>em{font:500 7px var(--mono);letter-spacing:.16em;color:var(--faint);font-style:normal}
.chip,.chip-group .chip{border:1px solid rgba(255,255,255,.12);background:rgba(4,6,12,.62);backdrop-filter:blur(14px);padding:8px 11px;color:rgba(255,255,255,.58);font:500 8px var(--mono);letter-spacing:.11em;cursor:pointer}
.chip-group{display:flex;flex-wrap:wrap;gap:6px}
.chip:hover,.chip.is-on,.chip[aria-pressed="true"]{border-color:rgba(114,245,255,.45);color:#fff}
.chip.is-armed[aria-pressed="true"]{border-color:var(--lime);color:var(--lime)}
.chip.slider{display:flex;align-items:center;gap:8px;cursor:default}
.chip.slider input{width:78px;accent-color:var(--cyan)}
.chip.slider output{color:var(--cyan);min-width:2.2em;font:400 8px var(--mono)}
.page{display:none;flex-direction:column;gap:6px}
.page.is-on{display:flex}
.slots{display:flex;flex-direction:column;gap:6px}
.slot{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1px solid var(--line);background:rgba(4,6,12,.55);backdrop-filter:blur(14px);padding:6px 8px}
.slot>em{font:500 7px var(--mono);letter-spacing:.16em;color:var(--faint);font-style:normal;min-width:10px}
.slot .chip{padding:6px 8px}

.toast{position:fixed;z-index:20;left:50%;bottom:calc(220px + var(--safe-bottom));transform:translate(-50%,12px);padding:10px 13px;border:1px solid var(--line);background:rgba(4,6,10,.92);color:var(--muted);font:500 8px var(--mono);letter-spacing:.12em;opacity:0;pointer-events:none;transition:.25s}
.toast.show{opacity:1;transform:translate(-50%,0)}

body.is-live .copy{opacity:.22}
@media(max-width:820px){
  .top{grid-template-columns:auto 1fr auto}
  .host-chip{display:none}
  .telemetry{display:none}
  .copy{top:clamp(84px,12vh,120px);max-width:calc(100% - 32px)}
  .copy h1{font-size:34px}
  .copy p{font-size:12px;max-width:320px}
  .readout{bottom:calc(46vh + var(--safe-bottom));left:16px}
  .hud{justify-content:stretch}
  .rack{max-height:42vh;overflow:auto}
  .rack-row{justify-content:flex-start}
  .chip{padding:7px 9px}
  .chip.slider{flex:1 1 calc(50% - 6px)}
  .chip.slider input{width:100%;min-width:0;flex:1}
  .chip-group{width:auto}
  .toast{top:calc(64px + var(--safe-top));bottom:auto}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .scanlines{display:none}
}