:root { --bg:#0b1020; --fg:#e9eefc; --muted:#95a1c7; --accent:#6aa6ff; --accent2:#ff9f6a; }
html,body{height:100%; margin:0; background:var(--bg); color:var(--fg); font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
h1{font-size:20px; margin:0 0 8px 0}
.wrap{max-width:1120px; margin:16px auto; padding:16px}
.controls{display:grid; grid-template-columns: 1fr auto auto auto auto; gap:12px; align-items:center; background:#111733; padding:12px 16px; border-radius:16px; box-shadow:0 6px 24px rgba(0,0,0,.25)}
.range{display:flex; align-items:center; gap:10px}
input[type="range"]{width:100%}
.panes{margin-top:16px; display:grid; grid-template-columns:1fr 1fr; gap:16px}
.pane{background:#111733; border-radius:16px; padding:12px; box-shadow:0 6px 24px rgba(0,0,0,.25)}
.pane header{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; color:var(--muted)}
canvas{width:100%; height:360px; display:block; background:#0d1430; border-radius:12px; cursor:grab}
canvas.dragging{cursor:grabbing}
.eqs{margin-top:16px; display:grid; grid-template-columns:1fr 1fr; gap:16px}
.card{background:#111733; border-radius:16px; padding:12px; box-shadow:0 6px 24px rgba(0,0,0,.25)}
.code{font-size:15px; line-height:1.65}
.row{display:flex; justify-content:space-between; gap:12px}
.small{font-size:12px; color:var(--muted)}
.pill{background:#0b183a; padding:4px 8px; border-radius:999px; font-size:12px; color:#cfe0ff}
.legend{margin-top:6px; font-size:12px; color:var(--muted)}
label{font-size:12px; color:var(--muted)}
.num{font-variant-numeric: tabular-nums}
.toolbar{display:flex; gap:8px; align-items:center; margin-top:6px}
.btn{font-size:12px; background:#0b183a; color:#cfe0ff; border:1px solid #243660; border-radius:10px; padding:6px 10px; cursor:pointer}
.mathline{margin:2px 0}
.description{margin-top:24px; background:#111733; padding:16px; border-radius:16px; font-size:14px; line-height:1.6; color:var(--muted)}
@media (max-width:900px){ .panes, .eqs{grid-template-columns:1fr} }

@media (max-width:600px){
  .controls{grid-template-columns:1fr; gap:8px;}
  .wrap{padding:12px;}
  canvas{height:240px;}
}