:root{
  color-scheme:dark;
  --bg:#000;
  --border:#767676;
  --panel:#000;
  --text:#f1f1f1;
  --muted:#c8c8c8;
  --mag:#ff00ff;
  --cyan:#00f4ff;
  --yellow:#ffe900;
}
*{box-sizing:border-box}
body{margin:0;background:#000;color:var(--text);font-family:Menlo,Monaco,Consolas,"Courier New",monospace}
.window{width:min(1240px,calc(100vw - 28px));margin:18px auto;background:#000;border:1px solid #202020;border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px #1f1f1f}
.titlebar{height:34px;background:#e7e7e7;color:#3b3b3b;border-bottom:1px solid #d4d4d4;display:flex;align-items:center;justify-content:center;position:relative;font-family:system-ui,sans-serif;font-weight:600}
.traffic{position:absolute;left:10px;display:flex;gap:8px}.traffic span{width:14px;height:14px;border-radius:50%;display:inline-block}.traffic .red{background:#c8c8c8}.traffic .yellow{background:#e3a72a}.traffic .green{background:#2ac14d}.title{font-size:17px}
.grid{display:grid;grid-template-columns:1fr 1fr 1fr;grid-auto-rows:310px}
.panel{background:var(--panel);border-right:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden;position:relative}.panel:nth-child(3n){border-right:none}.grid>.panel:nth-last-child(-n+3){border-bottom:none}
canvas{display:block;width:100%;height:100%;background:#000}
.instructions{padding:8px 10px;font-size:12px;line-height:1.45}.instructions p{margin:0 0 6px 0}.inst-title{font-size:13px;margin-bottom:6px}.mag{color:var(--mag)}
.blank-panel{padding:0;background:#000}.control-pad,.comp-pane{position:absolute;inset:0}.hidden{display:none!important}
.control-pad{padding:10px 14px;color:var(--muted);font-size:12px;display:flex;flex-direction:column;gap:8px}
.control-title{color:#fff;margin-bottom:2px}.readouts{display:grid;grid-template-columns:1fr;gap:4px;padding:4px 0 2px}.readouts div{display:flex;justify-content:space-between;align-items:center;color:#fff}.readouts span{color:#bdbdbd}.readouts output{text-align:right;color:var(--mag);font-variant-numeric:tabular-nums;min-width:70px}.hint-box{border:1px solid #5a5a5a;padding:8px 9px;color:#d8d8d8;line-height:1.4}#status{margin-top:auto;color:#aaa;font-size:11px;white-space:pre-wrap}
.quick-controls{margin-top:10px;border-top:1px solid #4c4c4c;padding-top:8px;display:grid;gap:8px}.quick-controls label{display:flex;align-items:center;gap:8px}.speed-line input[type="range"]{flex:1;accent-color:#c0c0c0}.quick-buttons{display:flex;gap:10px}button{background:#111;color:#fff;border:1px solid #6c6c6c;border-radius:4px;padding:5px 8px;font:inherit;cursor:pointer}
@media (max-width:1100px){.window{width:calc(100vw - 10px);margin:5px auto}.grid{grid-template-columns:1fr 1fr;grid-auto-rows:300px}.panel:nth-child(3n){border-right:1px solid var(--border)}.panel:nth-child(2n){border-right:none}}
@media (max-width:760px){.grid{grid-template-columns:1fr;grid-auto-rows:290px}.panel{border-right:none}.title{font-size:14px;padding:0 70px;text-align:center}}