@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&family=Space+Grotesk:wght@400;500;700&display=swap";:root{color:#e8eef7;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--panel-bg:#0b121ce0;--panel-border:#78a7d129;--panel-glow:#438dff29;--card-bg:#0a1018c7;--card-border:#94b9da1f;--copy-soft:#8fa6bc;--copy-strong:#f6fbff;--accent:#ff8554;--accent-bright:#ffb36f;--accent-cool:#66bfff;--mono:"JetBrains Mono", monospace;background:radial-gradient(circle at top,#ff8c5224,#0000 34%),radial-gradient(circle at 80% 20%,#5399ff2e,#0000 30%),linear-gradient(#091119 0%,#04070c 48%,#05070b 100%);font-family:Space Grotesk,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;min-height:100%}body{min-height:100vh;color:var(--copy-strong);margin:0;overflow:hidden}button,input,kbd{font:inherit}button{cursor:pointer;border:0}input{color:inherit}code,kbd{font-family:var(--mono)}#app{width:100vw;height:100vh;min-height:100vh}.shell{width:100%;height:100%;min-height:100vh;position:relative;overflow:hidden}.panel{z-index:4;border:1px solid var(--panel-border);background:linear-gradient(180deg, #101926f5, #090e16e6), var(--panel-bg);width:min(390px,100vw - 36px);max-height:calc(100vh - 36px);box-shadow:inset 0 1px 0 #ffffff08, 0 24px 80px #00000059, 0 0 0 1px var(--panel-glow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:26px;flex-direction:column;gap:16px;padding:24px;display:flex;position:absolute;top:18px;left:18px;overflow:auto}.panel__intro{padding-bottom:6px}.eyebrow{color:var(--accent-bright);font-size:.78rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;margin:0 0 8px}h1,h2,p{margin:0}h1{letter-spacing:-.05em;font-size:clamp(2rem,4vw,3.2rem);line-height:.94}h2{letter-spacing:.02em;font-size:1rem}.lede,.card__header p,.mode-copy,.hint,.footer-copy,.metric-label{color:var(--copy-soft)}.lede{max-width:28ch;margin-top:12px;line-height:1.45}.card{border:1px solid var(--card-border);background:linear-gradient(180deg, #121c28eb, #070b12db), var(--card-bg);border-radius:18px;gap:14px;padding:16px;display:grid}.card__header{gap:4px;display:grid}.mode-switch{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.mode-button,.actions button{min-height:44px;color:var(--copy-strong);background:#0e1622eb;border:1px solid #8ab0d624;border-radius:12px;transition:transform .12s,border-color .12s,background .12s}.mode-button:hover,.actions button:hover{border-color:#ffb36f8c;transform:translateY(-1px)}.mode-button.is-active{background:linear-gradient(135deg,#ff855438,#3fa8ff24);border-color:#ffb36fb3}.field{gap:7px;font-size:.94rem;display:grid}.field span{color:var(--copy-soft)}.field__label{justify-content:space-between;align-items:center;gap:12px;display:flex}.field__label strong{min-width:2ch;color:var(--accent-bright);font-family:var(--mono);text-align:center;background:#ffb36f24;border-radius:999px;padding:.18rem .5rem;font-size:.82rem}.field input{background:#050a10e0;border:1px solid #79a6cc29;border-radius:12px;width:100%;min-height:44px;padding:0 14px}.field input[type=range]{padding:0}.field input:focus-visible,.mode-button:focus-visible,.actions button:focus-visible{outline-offset:2px;outline:2px solid #66bfffcc}.metrics-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.metrics-grid--tight{grid-template-columns:repeat(2,minmax(0,1fr))}.metrics-grid>div{background:#04080dbd;border:1px solid #82aacd14;border-radius:14px;gap:4px;padding:12px;display:grid}.metric-label{text-transform:uppercase;letter-spacing:.09em;font-size:.75rem}.metrics-grid strong{font-size:1rem;font-family:var(--mono)}.actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.hint{font-size:.88rem;line-height:1.45}kbd{background:#050a10e0;border:1px solid #7aaad229;border-radius:.45rem;padding:.16rem .45rem;font-size:.82rem}.arena-wrap{min-width:0;position:absolute;inset:0}.arena-frame{background:radial-gradient(circle at 50% 14%,#66bfff12,#0000 26%),linear-gradient(#04080c6b,#04080c14);border-radius:0;min-height:100vh;position:absolute;inset:0;overflow:hidden;box-shadow:inset 0 1px #ffffff0a,0 32px 100px #0000006b}.top-bar{z-index:3;pointer-events:none;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;display:grid;position:absolute;top:18px;left:430px;right:18px}.top-stat{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:linear-gradient(#0f1825e0,#070b12d1),#070b12c7;border:1px solid #8ab4d624;border-radius:18px;gap:4px;min-height:64px;padding:12px 14px;display:grid;box-shadow:inset 0 1px #ffffff0a,0 18px 45px #00000038}.top-stat span{color:var(--copy-soft);letter-spacing:.11em;text-transform:uppercase;font-size:.72rem}.top-stat strong{font-size:1.06rem;font-family:var(--mono)}.top-stat--accent{background:linear-gradient(135deg,#ff855438,#44afff1f),#070b12d1;border-color:#ffb36f57}.viewport{width:100%;height:100%}.viewport canvas{width:100%;height:100%;display:block}.arena-overlay{pointer-events:none;justify-content:flex-end;align-items:center;gap:10px;display:flex;position:absolute;inset:92px 18px auto auto}.status-pill{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#070c12d1;border:1px solid #85b5d81f;border-radius:999px;align-items:center;gap:10px;min-height:40px;padding:0 14px;font-size:.86rem;display:inline-flex}.status-pill--ghost{color:var(--accent-bright)}.status-pill__dot{background:#ff80526b;border-radius:999px;width:10px;height:10px;box-shadow:0 0 #ff805242}.status-pill__dot.is-live{background:#61ffb3;box-shadow:0 0 22px #61ffb38c}.crosshair{pointer-events:none;border-radius:999px;width:28px;height:28px;margin:-14px 0 0 -14px;position:absolute;inset:50% auto auto 50%}.crosshair:before,.crosshair:after{content:"";background:#f4f9fff0;position:absolute;inset:50%;box-shadow:0 0 16px #fff3}.crosshair:before{width:18px;height:2px;margin-top:-1px;margin-left:-9px}.crosshair:after{width:2px;height:18px;margin-top:-9px;margin-left:-1px}.footer-copy{z-index:3;text-align:right;pointer-events:none;width:min(360px,100vw - 36px);padding:0;font-size:.9rem;position:absolute;bottom:18px;right:18px}@media (width<=1080px){.panel{width:min(360px,100vw - 36px)}.top-bar{grid-template-columns:repeat(4,minmax(0,1fr));left:394px}}@media (width<=720px){.panel{border-radius:20px;width:calc(100vw - 24px);max-height:min(52vh,100vh - 24px);padding:16px;top:12px;left:12px}.metrics-grid,.metrics-grid--tight,.actions{grid-template-columns:repeat(2,minmax(0,1fr))}.top-bar{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;inset:auto 12px 68px}.top-stat{min-height:58px;padding:10px 12px}.arena-overlay{flex-direction:column-reverse;align-items:flex-end;inset:auto 12px 12px auto}.footer-copy{text-align:left;width:min(280px,100vw - 24px);bottom:12px;left:12px;right:auto}}