:root { --line: var(--rule); --bg: var(--paper); --up: var(--good); --down: var(--bad); --accent: var(--teal); }
.practice { font-size: 15px; line-height: 1.45; }
.practice h1 { font: 700 18px/1.3 system-ui, sans-serif; margin: 0; letter-spacing: 0; }
.practice h2 { font: 700 15px/1.3 system-ui, sans-serif; margin: 0 0 8px; }
.practice .notice { background:#fff4d6; border-bottom:1px solid #e6d28f; padding:8px 16px; font-size:13px; }
.practice header { padding:12px 16px; display:flex; flex-wrap:wrap; gap:8px 20px; align-items:baseline; }
.practice main { display:grid; grid-template-columns:minmax(0,3fr) minmax(280px,2fr); gap:12px; padding:0 16px 24px; }
@media (max-width:820px) { .practice main { grid-template-columns:minmax(0,1fr); } }
.practice .card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px; margin-bottom:12px; overflow-x:auto; }
.practice .stats { display:flex; flex-wrap:wrap; gap:6px 20px; }
.practice .stats b { display:block; font-size:17px; }
.practice .stats span { color:var(--dim); font-size:12px; }
.practice table { border-collapse:collapse; width:100%; font-size:13px; font-variant-numeric:tabular-nums; }
.practice th, .practice td { padding:4px 6px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
.practice th:first-child, .practice td:first-child { text-align:left; }
.practice th { color:var(--dim); font-weight:500; }
.practice td.pick { cursor:pointer; color:var(--accent); }
.practice td.pick:hover { background:#e9f1fa; }
.practice td.strike { font-weight:600; text-align:center; background:var(--bg); }
.practice button, .practice select, .practice input { font:inherit; padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); }
.practice button { cursor:pointer; }
.practice button.main { background:var(--accent); border-color:var(--accent); color:#fff; }
.practice button:disabled { opacity:.5; cursor:default; }
.practice .row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px; }
.practice .up { color:var(--up); }
.practice .down { color:var(--down); }
.practice .dim { color:var(--dim); font-size:13px; }
.practice .err { color:var(--down); min-height:1.3em; font-size:13px; }
.practice canvas { width:100%; height:260px; display:block; }
.practice #log { max-height:220px; overflow-y:auto; font-size:13px; }
.practice #log div { padding:2px 0; border-bottom:1px solid var(--bg); }
.practice .call { background:#fde8e6; color:var(--down); border:1px solid #f0bdb8; border-radius:6px; padding:8px; margin-bottom:8px; }
.practice [hidden] { display:none !important; }
.practice .notice-bar { background:#fff4d6; color:#3d3000; border-bottom:1px solid #e6d28f; padding:8px 16px; font-size:13px; }
.practice button.main { color:#fff; }
@media (prefers-color-scheme: dark) { .practice button.main { color:#0d1615; } .practice button,.practice select,.practice input { background:var(--card); } }