@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root { --ink:#e9e6dd; --muted:#8e918b; --line:#303432; --acid:#d7f45b; --orange:#ff7048; --bg:#101211; }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--ink); font-family:'Space Grotesk',sans-serif; min-height:100vh; }
.shell { max-width:1440px; margin:auto; padding:0 42px; } .topbar { height:88px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.08em; }
.brand { display:flex; align-items:center; gap:10px; font-weight:500; } .brand small { color:var(--muted); margin-left:11px; font-size:9px; } .signal,.live-dot { width:7px; height:7px; display:inline-block; border-radius:50%; background:var(--acid); box-shadow:0 0 14px var(--acid); } .status { color:var(--muted); display:flex; align-items:center; gap:10px; } .divider { height:14px; width:1px; background:var(--line); margin:0 5px; }
.hero { display:grid; grid-template-columns:35% 65%; min-height:calc(100vh - 160px); align-items:center; padding:35px 0 45px; } .copy { padding-right:40px; } .eyebrow,.stage-label,.stage-footer { color:var(--muted); font:11px 'DM Mono',monospace; letter-spacing:.1em; } .eyebrow { color:var(--acid); margin:0 0 25px; } h1 { font-size:clamp(44px,5vw,75px); line-height:.98; letter-spacing:-.065em; margin:0 0 28px; font-weight:500; } h1 em { color:var(--acid); font-style:normal; } .lede { max-width:320px; color:#a9aba4; font-size:15px; line-height:1.55; } .controls { display:grid; grid-template-columns:repeat(4,36px) 1fr; gap:6px; align-items:center; margin:35px 0 28px; } .key { background:transparent; color:var(--ink); border:1px solid #555a52; height:34px; font-size:16px; cursor:pointer; } .key:hover { border-color:var(--acid); color:var(--acid); } .controls span { color:var(--muted); font:10px 'DM Mono',monospace; margin-left:10px; } .reset { border:0; background:var(--acid); color:#151811; padding:13px 16px; font:11px 'DM Mono',monospace; letter-spacing:.08em; cursor:pointer; } .reset span { margin-left:24px; font-size:15px; }
.stage-wrap { position:relative; height:min(690px,72vh); border:1px solid var(--line); background:radial-gradient(circle at 50% 44%,#20251f 0,#121512 45%,#101211 76%); overflow:hidden; } #stage,#overlay { position:absolute; inset:0; width:100%; height:100%; display:block; } #overlay { touch-action:none; } .stage-label,.stage-footer { position:absolute; left:18px; right:18px; display:flex; justify-content:space-between; z-index:2; } .stage-label { top:16px; } .stage-label span:nth-child(2) { position:absolute; left:50%; transform:translateX(-50%); } .stage-footer { bottom:16px; } .stage-footer b { color:var(--acid); font-weight:400; } .crosshair { position:absolute; width:14px; height:14px; opacity:.6; } .crosshair:before,.crosshair:after { content:''; position:absolute; background:var(--acid); } .crosshair:before { width:1px; height:14px; left:6px; }.crosshair:after { height:1px; width:14px; top:6px; }.crosshair-tl { top:55px; left:18px; }.crosshair-br { bottom:52px; right:18px; transform:rotate(45deg); }
.footer { border-top:1px solid var(--line); padding:18px 0; color:#5f645d; font:9px 'DM Mono',monospace; display:flex; justify-content:space-between; gap:20px; letter-spacing:.05em; } a { color:inherit; }
@media (max-width:800px) { .shell{padding:0 20px}.topbar{height:68px}.status span:last-child,.brand small{display:none}.hero{display:block;padding-top:38px}.copy{padding:0 0 28px}.stage-wrap{height:62vh;min-height:420px}h1{font-size:52px}.footer{display:block;line-height:2}.footer span{display:block} }