:root{color-scheme:dark;--bg:#080d15;--panel:#101722;--line:#24303e;--muted:#8a9bab;--text:#e6edf2;--amber:#f0b269;--teal:#65d9c7;--red:#ff8585}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}button,input,select,textarea{font:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.35;cursor:not-allowed}a{color:inherit;text-decoration:none}button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--teal);outline-offset:3px}.topbar{height:86px;display:flex;justify-content:space-between;align-items:center;padding:0 32px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:14px;font-size:16px;font-weight:650;letter-spacing:1.4px}.brand b{font-weight:400;color:var(--amber);margin:0 5px}.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:2.5px;font-weight:500;margin-top:3px}.brand-mark{height:39px;width:43px;display:flex;align-items:center;justify-content:center;border:1px solid #5b5544;color:var(--amber);font:700 17px ui-monospace,monospace;letter-spacing:-4px;padding-right:4px;transform:skewY(-5deg)}.brand-mark span{color:var(--teal)}.top-status{display:flex;align-items:center;gap:9px;font:10px ui-monospace,monospace;letter-spacing:.7px}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 12px #f0b26955}.status-dot.ready{background:var(--teal);box-shadow:0 0 12px #65d9c755}.version{color:var(--muted);border-left:1px solid var(--line);margin-left:12px;padding-left:20px}.tabs{height:58px;display:flex;align-items:stretch;border-bottom:1px solid var(--line);padding:0 24px;gap:10px}.tabs button{background:transparent;border:0;border-bottom:2px solid transparent;color:#647486;padding:0 16px;font:10px ui-monospace,monospace;letter-spacing:.8px}.tabs button span{font:12px ui-sans-serif,system-ui;margin-left:9px;letter-spacing:.1px;color:var(--muted)}.tabs button.active{border-bottom-color:var(--amber);color:var(--amber)}.tabs button.active span{color:var(--text)}.nav-note{margin-left:auto;align-self:center;color:#6f8193;font:10px ui-monospace,monospace;white-space:nowrap}.nav-note span{color:#b6a283;padding:0 9px}.workspace{display:grid;grid-template-columns:420px minmax(0,1fr);height:calc(100dvh - 180px);min-height:650px}.workbench{background:linear-gradient(135deg,#121a26,#0e1520);border-right:1px solid var(--line);overflow:auto}.panel{display:none;padding:34px 30px 28px}.panel.active{display:block}.eyebrow{font:9px ui-monospace,monospace;letter-spacing:2px;color:var(--amber);margin-bottom:16px}h1{font-size:39px;line-height:1.12;font-weight:550;letter-spacing:-1.6px;margin:0 0 20px}h2{font-size:27px;font-weight:540;letter-spacing:-.7px;line-height:1.25;margin:0 0 15px}p{color:var(--muted);font-size:12px;line-height:1.85;margin:0 0 20px}.intro{font-size:13px}.route{margin:25px 0 13px;border-top:1px solid var(--line)}.route>div{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line);padding:16px 0}.route b{font:10px ui-monospace,monospace;color:#798998}.route span{font-size:12px}.route small{display:block;font-size:10px;color:var(--muted);margin-top:2px}.route code{margin-left:auto;color:var(--teal);font-size:10px;border:1px solid #294640;padding:3px 7px;border-radius:3px}.micro{font-size:10px;color:#74869b;line-height:1.75}.section-line{display:flex;justify-content:space-between;color:var(--muted);font:9px ui-monospace,monospace;letter-spacing:1px;margin:28px 0 15px}.section-line span+span{color:var(--teal)}.control-label{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#b9c8d3;margin-bottom:16px;gap:16px}select,input{border:1px solid #324251;background:#111d2a;color:var(--text);border-radius:4px;padding:8px 10px;font-size:11px}select{max-width:100%}.button{padding:11px 12px;font-size:11px;font-weight:550;border:1px solid #344556;border-radius:4px;white-space:nowrap}.button.primary{background:var(--amber);color:#14202a;border-color:var(--amber)}.button.primary:hover:not(:disabled){background:#ffcb8d}.button.secondary{background:#172333;color:#cad6df}.button.secondary:hover:not(:disabled){background:#213248}.button-row{display:flex;gap:9px;margin:14px 0}.button-row>*{flex:1}.boundary{padding:16px 17px;border:1px solid #303b47;border-left:2px solid #7c725a;border-radius:3px;margin:27px 0 16px;background:#141c28}.boundary b{font-size:11px;font-weight:550}.boundary p{font-size:10px;line-height:1.75;margin:7px 0 0}.text-button{display:block;text-align:left;border:0;padding:0;background:none;font-size:11px;color:var(--teal);margin-top:23px}.text-button span{margin-left:7px}.visual-panel{position:relative;overflow:hidden;background:radial-gradient(ellipse at 58% 55%,#152435 0%,#080d15 65%)}#viewport{position:absolute;inset:0}#viewport canvas{display:block;width:100%;height:100%;touch-action:none}.viewport-title{pointer-events:none;position:absolute;top:32px;left:34px}.viewport-title .eyebrow{font-size:8px;color:#91a5b3;margin-bottom:8px}.viewport-title h2{font-size:21px;letter-spacing:-.3px}.viewport-title h2 span{vertical-align:top;color:var(--amber);font:9px ui-monospace,monospace;margin-left:8px}.viewport-hint{position:absolute;top:39px;right:30px;font:8px ui-monospace,monospace;letter-spacing:1px;color:#7a91a5;pointer-events:none}.viewport-hint span{margin:0 8px}.hud{position:absolute;left:34px;right:34px;bottom:26px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #3a485655;padding-top:21px;pointer-events:none}.hud>div{padding:0 20px;border-right:1px solid #3a485655}.hud>div:first-child{padding-left:0}.hud>div:last-child{border:0}.hud span{display:block;font:8px ui-monospace,monospace;letter-spacing:1px;color:#8ca0b0;margin-bottom:8px}.hud strong{font-size:22px;font-weight:450;letter-spacing:-.6px}.hud small{font-size:9px;color:#8ba0b0;letter-spacing:.5px;margin-left:3px}.hud strong.accent{color:var(--teal);font:18px ui-monospace,monospace}.hud .accent small{color:#6cac9f}.fatal{position:absolute;inset:28% 10% auto;padding:22px;background:#231c22e8;border:1px solid #694b53;border-radius:6px;white-space:pre-wrap;color:#ffb7b7;z-index:5;font-size:12px}.busy-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#080d15dd;gap:13px;z-index:4;text-align:center;padding:25px}.busy-overlay[hidden],.fatal[hidden],[hidden]{display:none!important}.busy-overlay b{font-size:16px;font-weight:500}.busy-overlay span{font-size:11px;color:var(--muted);max-width:330px}.spinner{width:32px;height:32px;border:1px solid #324351;border-top-color:var(--amber);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:8px}@keyframes spin{to{transform:rotate(360deg)}}footer{height:36px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);color:#6e8396;font:9px ui-monospace,monospace;gap:12px}footer span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}footer span:last-child{font-size:8px;white-space:nowrap}footer b{font-weight:400;margin:0 10px}.full{width:100%}.small-row{display:flex;gap:15px;margin:12px 0;align-items:center;justify-content:space-between;font-size:10px;color:var(--muted)}.small-row input{max-width:120px;margin-left:8px}.file-button{cursor:pointer;border-bottom:1px solid #577163}.file-button input{display:none}.editor-tabs{display:flex;align-items:center;border:1px solid #2c3b4b;border-bottom:0;border-radius:4px 4px 0 0;margin-top:18px;background:#17212e}.editor-tabs button{background:none;border:0;color:#8396a8;padding:10px 11px;font:9px ui-monospace,monospace}.editor-tabs button.active{color:var(--amber);background:#1d2937}.editor-tabs span{font:8px ui-monospace,monospace;color:#79928b;margin-left:auto;padding:0 8px}textarea{display:block;border:1px solid #2c3b4b;background:#090f18;color:#d3dfdf;padding:15px 13px;width:100%;height:330px;resize:vertical;font:10.5px/1.75 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre;tab-size:4;border-radius:0 0 4px 4px}.compiler-message{white-space:pre-wrap;overflow-wrap:anywhere;color:#829a9b;font:10px/1.7 ui-monospace,monospace;padding:12px 0;margin:8px 0 0}.compiler-message.error{color:var(--red)}.test-summary{display:grid;grid-template-columns:repeat(3,1fr);padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:22px 0}.test-summary div{text-align:center;border-right:1px solid var(--line)}.test-summary div:last-child{border:0}.test-summary strong{display:block;font-size:28px;font-weight:450}.test-summary span{font-size:10px;color:var(--muted)}#test-passed{color:var(--teal)}#test-failed{color:var(--red)}.results-list{margin-top:18px;max-height:350px;overflow:auto}.empty-state{border:1px dashed #314254;text-align:center;padding:35px 15px;color:#93a6b7;font:10px ui-monospace,monospace;line-height:1.8}.empty-state small{display:block;font:10px/1.8 ui-sans-serif,system-ui;color:#73899c;margin-top:8px}.test-row{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid #273545;font-size:10px}.test-row b{color:var(--teal);font:9px ui-monospace,monospace;padding-top:2px}.test-row.fail b{color:var(--red)}.test-row span{color:#c2d0da;overflow-wrap:anywhere}.test-row small{display:block;color:var(--red);font-size:9px;white-space:pre-wrap}.progress{height:3px;background:#1c2c3b;margin-top:20px}.progress>div{height:100%;width:0;background:var(--teal);transition:width .2s}.timer-note{font-size:10px;color:#8da99f;padding:12px 0;border-bottom:1px solid var(--line)}.bench-row{margin-bottom:15px;border-bottom:1px solid #273545;padding-bottom:12px}.bench-row>div:first-child{display:flex;justify-content:space-between;font-size:10px}.bench-row strong{color:var(--teal);font-weight:550}.bench-row small{font-size:9px;color:#7d91a4}.bench-track{height:3px;background:#26394b;margin:8px 0}.bench-track div{height:100%;background:#64b8af}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}
@media(min-width:1600px){.workspace{grid-template-columns:465px minmax(0,1fr)}.panel{padding:40px}.intro{font-size:14px}h1{font-size:45px}textarea{height:380px}}
@media(max-width:1100px){.nav-note{display:none}.workspace{grid-template-columns:365px minmax(0,1fr)}.panel{padding:26px 22px}.viewport-hint{display:none}.hud{left:24px;right:24px;grid-template-columns:repeat(2,1fr);gap:14px}.hud>div{padding:0;border:0}.hud strong{font-size:18px}.topbar{padding:0 24px}.version{display:none}.tabs{padding:0 8px;gap:0}.tabs button{padding:0 15px}}
@media(max-width:740px){.topbar{height:73px;padding:0 18px}.brand{font-size:12px;letter-spacing:.7px;gap:10px}.brand small{font-size:7px;letter-spacing:1.6px}.brand-mark{width:33px;height:33px;font-size:14px}.top-status{font-size:8px;max-width:120px;line-height:1.5}.tabs{height:52px;justify-content:space-around}.tabs button{padding:0 7px;font-size:8px}.tabs button span{font-size:10px;margin-left:5px}.workspace{height:auto;min-height:0;grid-template-columns:1fr}.workbench{border-right:0;border-bottom:1px solid var(--line);order:2}.visual-panel{height:440px;order:1}.panel{padding:30px 24px}h1{font-size:34px}.viewport-title{top:25px;left:23px}.viewport-title .eyebrow{font-size:7px}.viewport-title h2{font-size:19px}.hud{grid-template-columns:repeat(4,1fr);gap:7px;left:23px;right:23px;bottom:18px;padding-top:15px}.hud span{font-size:6px;letter-spacing:.5px}.hud strong{font-size:16px}.hud small{font-size:7px}.hud strong.accent{font-size:12px}.hud .accent small{display:block;font-size:7px;margin:3px 0}footer{padding:0 18px}footer span:last-child{display:none}.fatal{inset:27% 6% auto;font-size:10px}textarea{height:340px}}
@media(prefers-reduced-motion:reduce){.spinner{animation:none}.progress>div{transition:none}}