:root{--bg:#000;--fg:#d8dce6;--dim:#4a5060;--line:#1c2030;--acc:#ff3355;--acc2:#3388ff}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 30% 0%,#0b0d18 0,#000 60%);color:var(--fg);font-family:'IBM Plex Mono',monospace;min-height:100vh}
body::after{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
header{padding:18px 20px 6px}
h1{font-family:'Major Mono Display',monospace;font-size:clamp(40px,8vw,84px);margin:0;letter-spacing:4px;background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;color:transparent}
.dots{animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}
.sub{margin:0;color:var(--dim);font-weight:200;font-size:13px}
main{display:flex;gap:20px;padding:14px 20px;flex-wrap:wrap;align-items:flex-start}
.stage{flex:1 1 480px;max-width:min(92vh,100%)}
.canvas-wrap{position:relative;aspect-ratio:1;border:1px solid var(--line);box-shadow:0 0 40px rgba(51,136,255,.12),0 0 80px rgba(255,51,85,.07)}
#canvas{width:100%;height:100%;display:block;image-rendering:pixelated;cursor:crosshair;touch-action:none}
.toast{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.85);border:1px solid var(--acc);color:var(--acc);padding:14px 20px;font-weight:700;letter-spacing:2px;animation:shake .4s}
.hidden{display:none}
@keyframes shake{25%{transform:translate(-52%,-50%)}75%{transform:translate(-48%,-50%)}}
.hover{position:absolute;bottom:6px;right:8px;font-size:11px;color:var(--dim);pointer-events:none}
.statusbar{display:flex;justify-content:space-between;font-size:12px;padding:8px 2px;color:var(--dim)}
.statusbar b{color:var(--fg)}
.jam{font-weight:700;letter-spacing:2px}
.jam.free{color:#33ff99}.jam.cong{color:#ffcc33}.jam.lock{color:var(--acc);animation:blink .6s steps(2) infinite}
aside{flex:0 1 340px;display:flex;flex-direction:column;gap:14px;width:100%}
.card{border:1px solid var(--line);background:rgba(12,14,24,.7);backdrop-filter:blur(6px);padding:14px}
h2{font-family:'Major Mono Display',monospace;font-size:15px;margin:0 0 10px;color:#fff}
label{display:block;font-size:12px;margin:8px 0;color:var(--dim)}
label b{color:var(--fg)}
input[type=range]{width:100%;accent-color:var(--acc2)}
button,select{font-family:inherit;background:#0a0c14;color:var(--fg);border:1px solid #2a3044;padding:7px 10px;font-size:12px;cursor:pointer}
button:hover{border-color:var(--acc2)}
button.primary{border-color:var(--acc);color:var(--acc);font-weight:700}
.btns{display:flex;gap:6px}.btns button{flex:1}
.wide{width:100%;margin-top:8px}
.seg{display:flex;margin:8px 0}.seg button{flex:1}
.seg button.on{background:var(--acc2);color:#000;border-color:var(--acc2)}
.srow{display:grid;grid-template-columns:22px 52px 1fr 40px;gap:6px;align-items:center;margin:6px 0;font-size:11px}
.sw{width:20px;height:20px;border:2px solid transparent;cursor:pointer}
.sw.sel{border-color:#fff;box-shadow:0 0 8px currentColor}
.srow select{padding:3px}
.bar{display:flex;align-items:center;gap:6px;font-size:11px;margin:4px 0}
.bar .t{flex:1;height:6px;background:#111}
.bar .f{height:100%;transition:width .15s}
#spark{width:100%;height:60px;margin-top:8px;border-top:1px solid var(--line)}
.hint{font-size:10px;color:var(--dim);margin:6px 0 0}
footer{text-align:center;padding:20px;font-size:12px}
footer a{color:var(--dim)}