:root {
--lane2: #60a5fa;
--lane3: #a78bfa;
--lane4: #f472b6;
--panel: #324cab;
}
* { box-sizing: border-box; }
body {
margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
background: radial-gradient(1200px 800px at 70% -10%, #1a2332 0%, var(--bg) 60%);
color: #ffffff;
display: grid; place-items: center; min-height: 100vh;
}
.wrap {
width: min(1100px, 96vw);
display: grid; gap: 14px;
grid-template-columns: 1fr 320px;
align-items: start;
}
@media (max-width: 980px) {
.wrap { grid-template-columns: 1fr; }
}
.panel {
background: linear-gradient(180deg, #101725 0%, var(--panel) 100%);
border: 1px solid #7c7f83; border-radius: 16px; padding: 14px 14px 10px;
box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,0.04);
}
.toolbar { display: grid; gap: 10px; }
.toolbar label { font-size: 12px; opacity: .8; }
.row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.btn {
cursor: pointer; border: 0; padding: 10px 14px; border-radius: 12px; font-weight: 600;
background: var(--accent); color: #cad0d7; box-shadow: 0 6px 14px rgba(102, 204, 255, .25);
}
.btn.secondary { background: #222b3d; color: #cdd7e1; box-shadow: none; border: 1px solid #2b354a; }
.btn:disabled { opacity: .5; cursor: not-allowed; }


canvas { width: 100%; height: auto; display: block; background: #0d1220; border-radius: 16px; border: 1px solid #1f293b; }
.legend { display: grid; gap: 6px; grid-template-columns: repeat(4, 1fr); margin-top: 8px; }
.key {
display: grid; gap: 4px; padding: 10px; border-radius: 12px; border: 1px solid #233047; text-align: center;
background: #11182a; font-size: 12px;
}
.key kbd { font-weight: 700; letter-spacing: .6px; padding: 4px 6px; border-radius: 6px; background: #0b1222; border: 1px solid #233047; display: inline-block; }
.key small { opacity: .7; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.stat { background: #0f1627; border: 1px solid #223049; padding: 10px; border-radius: 12px; text-align: center; }
.stat h3 { margin: 6px 0 2px; font-size: 22px; }
.stat p { margin: 0; font-size: 12px; opacity: .8; }