:root{
  --bg:#0b0e14; --panel:#141924; --line:#232a38;
  --fg:#e6e9ef; --muted:#8a93a6; --accent:#5ac8fa;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
     font:14px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
header{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
       padding:10px 14px;background:var(--panel);border-bottom:1px solid var(--line)}
h1{font-size:14px;margin:0 10px 0 0;letter-spacing:.08em;text-transform:uppercase;
   color:var(--accent);font-weight:600}
label{color:var(--muted);display:flex;align-items:center;gap:6px}
select,input,button{background:#0f131c;color:var(--fg);border:1px solid var(--line);
  border-radius:6px;padding:6px 9px;font:inherit;font-size:13px}
select:focus,input:focus{outline:1px solid var(--accent);border-color:var(--accent)}
button{cursor:pointer}
button:hover{border-color:var(--accent);color:var(--accent)}
#rate{width:74px}
.sep{flex:1}
.stats{display:flex;gap:16px;flex-wrap:wrap;padding:8px 14px;
       border-bottom:1px solid var(--line);color:var(--muted);font-size:12px}
.stats b{color:var(--fg);font-weight:600}
#state{padding:8px 14px;font-size:12px;color:var(--muted);
       border-bottom:1px solid var(--line)}
#wrap{padding:12px 14px}
canvas{display:block;width:100%;border:1px solid var(--line);border-radius:8px;
       background:#080a10}
#legend{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
        padding:10px 14px;color:var(--muted);font-size:12px}
.sw{width:26px;height:12px;border-radius:2px;display:inline-block}
#tip{position:fixed;pointer-events:none;background:#000c;border:1px solid var(--line);
     border-radius:6px;padding:5px 8px;font-size:12px;display:none;z-index:9}