:root { color-scheme: dark; --ink:#f4f1e8; --muted:#9197a8; --line:rgba(255,255,255,.12); --acid:#c8ff3d; --violet:#9887ff; font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 72% 28%,#242047 0,transparent 34%),radial-gradient(circle at 12% 75%,#173029 0,transparent 31%),#090b12; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.22; 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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); }
.shell { width:min(1180px,calc(100% - 32px)); margin:auto; padding:64px 0 72px; position:relative; }
header { display:grid; grid-template-columns:1.5fr 1fr; gap:32px; align-items:end; margin-bottom:46px; }
.eyebrow { grid-column:1/-1; margin:0; color:var(--acid); font-size:.72rem; font-weight:750; letter-spacing:.18em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(3rem,7.5vw,6.8rem); line-height:.86; letter-spacing:-.065em; font-weight:600; }
.intro { max-width:460px; color:#b5b8c4; font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.6; }
.lab { overflow:hidden; display:grid; grid-template-columns:1.12fr .88fr; min-height:650px; border:1px solid var(--line); border-radius:28px; background:rgba(14,16,25,.72); box-shadow:0 30px 90px #0008; backdrop-filter:blur(18px); }
.stage { position:relative; min-height:560px; overflow:hidden; touch-action:none; background:radial-gradient(circle at center,rgba(200,255,61,.09),transparent 9%),linear-gradient(135deg,rgba(152,135,255,.08),transparent 50%); }
.stage::after { content:"FRONT"; position:absolute; left:50%; top:7%; transform:translateX(-50%); color:#777c8c; letter-spacing:.25em; font-size:.58rem; }
.orbit { position:absolute; width:72%; aspect-ratio:1; left:14%; top:50%; border:1px solid #ffffff25; border-radius:50%; transform:translateY(-50%) rotateX(65deg); }
.orbit-back { border-color:#ffffff13; transform:translateY(-50%) scale(.64) rotateX(65deg); }
.axis { position:absolute; left:50%; top:50%; background:#ffffff12; }
.axis-x { width:72%; height:1px; transform:translate(-50%,-50%); }.axis-y { width:1px; height:58%; transform:translate(-50%,-50%); }
.head { position:absolute; left:50%; top:50%; width:92px; height:108px; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; border:1px solid #ffffff2f; border-radius:48% 48% 43% 43%; background:#12151f; box-shadow:0 0 45px #c8ff3d16; color:#5c6271; }
.ear { position:absolute; font-size:.54rem; color:#858a98; }.ear.left { left:-19px }.ear.right { right:-19px }.face { font-size:1rem;color:var(--acid); }
.source { position:absolute; z-index:4; left:50%; top:14%; width:44px; height:44px; margin:-22px; border:1px solid #e7ffad; border-radius:50%; background:#c8ff3d18; box-shadow:0 0 0 10px #c8ff3d0a,0 0 32px #c8ff3d77; cursor:grab; }
.source:active { cursor:grabbing; }.source span { position:absolute; inset:14px; border-radius:50%; background:var(--acid); }
.stage-help { position:absolute; left:0; right:0; bottom:20px; text-align:center; color:#737887; font-size:.72rem; }
.console { border-left:1px solid var(--line); padding:34px; display:flex; flex-direction:column; gap:25px; }
label,legend { font-size:.72rem; letter-spacing:.04em; color:#a4a8b4; } select { width:100%; margin-top:8px; padding:13px 38px 13px 13px; color:var(--ink); border:1px solid var(--line); border-radius:11px; background:#171a24; }
#file { position:absolute; width:1px; height:1px; opacity:0; }.file-button { display:inline-block; margin-top:10px; padding:8px 11px; border:1px solid var(--line); border-radius:9px; cursor:pointer; color:#d5d7dd; }.file-name { margin-left:8px; color:#626775; font-size:.65rem; }
fieldset { border:0; margin:0; padding:0; }.modes { display:grid; gap:7px; }.modes legend { margin-bottom:8px; }.modes label { display:flex; align-items:center; padding:11px 12px; border:1px solid var(--line); border-radius:12px; cursor:pointer; }.modes label:has(input:checked) { border-color:#c8ff3d78; background:#c8ff3d0a; }.modes input { accent-color:var(--acid); margin-right:11px; }.modes b,.modes small { display:block; }.modes b { color:var(--ink); font-size:.79rem; }.modes small { color:#757a88; margin-top:2px; }
.transport { display:flex; align-items:center; gap:16px; }.play { flex:none; width:104px; height:48px; border:0; border-radius:50px; color:#10130a; background:var(--acid); font-weight:750; cursor:pointer; }.play-icon { margin-right:5px; }.time { flex:1; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; color:#777c89; font-size:.62rem; }
input[type=range] { width:100%; accent-color:var(--acid); }.controls { display:grid; gap:13px; }.controls label>span { display:flex; justify-content:space-between; margin-bottom:3px; }.controls output { color:var(--ink); }
.toggle { display:flex; align-items:center; gap:9px; cursor:pointer; }.toggle input { position:absolute; opacity:0; }.toggle span { width:34px; height:19px; border-radius:20px; background:#343846; padding:3px; }.toggle span::after { content:""; display:block; width:13px; height:13px; border-radius:50%; background:#8b909e; transition:.2s; }.toggle input:checked+span { background:#c8ff3d44; }.toggle input:checked+span::after { transform:translateX(15px); background:var(--acid); }
.notes { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:1px; background:var(--line); border:1px solid var(--line); border-radius:22px; overflow:hidden; }.notes article { padding:28px; background:#0d1018; }.notes span { color:var(--violet); font-size:.65rem; }.notes h2 { margin:18px 0 9px; font-size:1rem; }.notes p { margin:0; color:#858a98; line-height:1.55; font-size:.82rem; }
@media (max-width:800px) { .shell{padding-top:38px} header{grid-template-columns:1fr}.eyebrow{grid-column:auto} .intro{margin:0}.lab{grid-template-columns:1fr}.stage{min-height:440px}.console{border-left:0;border-top:1px solid var(--line);padding:25px}.notes{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }