:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#0b0d10;color:#eef2f7}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 0%,#1d2632 0,#0b0d10 45%);padding:20px}
.wrap{max-width:980px;margin:auto}.phoneOnly{max-width:720px}.hero{padding:20px 0 14px}.hero h1{font-size:clamp(28px,5vw,46px);margin:0 0 8px}.muted{color:#9ba7b4}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.card{display:block;background:#12161c;border:1px solid #26303a;border-radius:16px;padding:16px;box-shadow:0 12px 40px #0005;text-decoration:none;color:inherit}
.big{font-size:27px;font-variant-numeric:tabular-nums}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.btn{appearance:none;border:1px solid #465566;background:#1e2731;color:#fff;border-radius:12px;padding:12px 16px;font-size:16px;cursor:pointer}
.btn.primary{background:#e8eef6;color:#111820;border-color:#fff}.btn.warn{background:#3a221f}.btn:disabled{opacity:.45;cursor:not-allowed}.pill{display:inline-flex;border-radius:999px;padding:6px 10px;border:1px solid #34404c;background:#151b22;font-size:13px}
.ok{color:#79e7a0}.bad{color:#ff8d8d}.warnText{color:#ffd27d}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.metric{background:#0c1015;border-radius:12px;padding:10px;min-width:0}.metric b{display:block;font-size:20px;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}.metric span{font-size:12px;color:#8d99a6}
.canvasWrap{background:#07090c;border-radius:12px;overflow:hidden;border:1px solid #202832}.canvasWrap canvas{width:100%;height:260px;display:block}.small{font-size:12px}.log{white-space:pre-wrap;background:#080a0d;border:1px solid #202832;padding:10px;border-radius:12px;min-height:84px;max-height:260px;overflow:auto;font:12px ui-monospace,SFMono-Regular,Consolas,monospace}
.separator{height:1px;background:#26303a;margin:14px 0}a{color:#c9e5ff}code{background:#080a0d;padding:2px 6px;border-radius:6px}.dangerBanner{border:1px solid #64483d;background:#231714;border-radius:14px;padding:12px;color:#ffd4c4;margin-bottom:12px}
@media(max-width:520px){body{padding:12px}.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.metric{padding:8px}.metric b{font-size:17px}.btn{flex:1 1 auto}}

.sceneWrap{height:430px;position:relative}
.sceneWrap canvas{width:100%;height:100%;display:block;touch-action:none}
.sceneLegend{margin-top:10px}
@media(max-width:700px){.sceneWrap{height:340px}.sceneLegend .pill{font-size:11px}}