/* Practice page. Everything is scoped to #practice and borrows the site's theme colours (Normal / Light / Dark). */
#practice{--dim:var(--muted);--key:var(--surface);--acc:var(--accent);--bad:var(--error);--ok:var(--ink)}
#practice h1{margin-bottom:16px}
#practice .bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
#practice .modes button{font:inherit;background:none;border:1px solid var(--line);color:var(--dim);padding:6px 14px;border-radius:6px;cursor:pointer;margin-right:6px}
#practice .modes button.on{color:#fff;background:var(--acc);border-color:var(--acc)}
#practice .cust{display:inline-flex;align-items:center;gap:6px;color:var(--dim);margin-top:6px}
#practice .cust input{width:58px;font:inherit;padding:5px 6px;border:1px solid var(--line);border-radius:6px;background:var(--key);color:var(--ink)}
#practice .cust button{margin:0 0 0 4px!important}
#practice .stats{display:flex;gap:22px;font-variant-numeric:tabular-nums;color:var(--dim)}
#practice .stats b{color:var(--ink);font-size:1.5rem;font-weight:600;margin-right:4px}
#practice #time b{color:var(--acc)}
#practice .stage{position:relative;overflow:hidden;margin:16px 0 40px;height:110px;border-bottom:1px solid var(--line);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
#practice .stage::before{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:0;border-left:0}
#practice #pr-track{position:absolute;left:0;top:0;white-space:nowrap;transition:transform .18s ease-out;font-family:var(--mono);font-size:clamp(1.6rem,4.5vw,2.8rem);line-height:100px}
#practice .w{display:inline-block;margin:0 .6em;opacity:.22;transition:opacity .18s,transform .18s;transform-origin:center bottom}
#practice .w.n1, #practice .w.n2{opacity:.8}
#practice .w.cur{opacity:1;transform:scale(1.08)}
#practice .w.done{opacity:.18}
#practice .w.done.bad{color:var(--bad)}
#practice .w .c{color:var(--dim);position:relative}
#practice .w.cur .c{color:var(--dim)}
#practice .w .c.ok{color:var(--ok)}
#practice .w .c.no{color:var(--bad)}
#practice .w.cur .c.at::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:3px;background:var(--acc);border-radius:2px;animation:pr-bl 1s steps(2) infinite}
@keyframes pr-bl{50%{opacity:.2}}
@media (prefers-reduced-motion:reduce){
#practice #pr-track, #practice .w{transition:none}
#practice .w .c.at::after{animation:none}
}
#practice .kb{display:flex;flex-direction:column;align-items:center;gap:6px;user-select:none}
#practice .row{display:flex;gap:6px}
#practice .k{width:clamp(26px,7vw,54px);height:clamp(30px,8vw,54px);display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:7px;background:var(--key);color:var(--dim);font-size:clamp(.8rem,2.4vw,1.2rem);text-transform:uppercase;transition:background .1s}
#practice .k.space{width:clamp(140px,40vw,330px)}
#practice .k.hit{background:var(--f);color:#fff;border-color:var(--f);box-shadow:0 0 0 3px color-mix(in srgb,var(--f) 30%,transparent)}
#practice .k.press{transform:translateY(2px)}
#practice .hands{display:block;width:min(100%,520px);margin:14px auto 0;overflow:visible}
#practice .hands .pm{fill:var(--key);stroke:var(--dim);stroke-width:2.5}
#practice .hands .fg path, #practice .hands .fg circle{fill:var(--key);stroke:var(--dim);stroke-width:2.5;transition:transform .12s,fill .12s,stroke .12s}
#practice .hands .fg.on path, #practice .hands .fg.on circle{fill:color-mix(in srgb,var(--f) 28%,var(--key));stroke:var(--f);stroke-width:4;transform:translateY(-14px)}
#practice .hands.color .fg path{fill:color-mix(in srgb,var(--f) 20%,var(--key));stroke:color-mix(in srgb,var(--f) 55%,var(--dim))}
#practice .hands.color .fg.on path, #practice .hands.dots .fg.on circle{fill:var(--f);stroke:var(--f)}
#practice #pr-fname{text-align:center;color:var(--dim);height:1.4em;margin-top:6px}
#practice #pr-hstyle{text-align:center;margin-top:12px}
#practice .chip{display:inline-block;margin:4px;padding:6px 12px;border-radius:8px;background:var(--f);color:#fff;font-weight:600}
#practice .chip small{font-weight:400;opacity:.85}
#practice .card button.ghost{background:none;color:var(--acc);border:1px solid var(--acc);margin-right:8px}
#practice #pr-closep{display:block;margin:6px auto 0;font:inherit;background:none;border:1px solid var(--line);color:var(--dim);padding:4px 12px;border-radius:6px;cursor:pointer}
#practice #pr-closep[hidden]{display:none}
#practice #pr-lvl{margin-top:16px;text-align:center}
#practice #lvd{color:var(--dim);font-size:.9rem;margin-top:4px}
#practice #pr-phase{text-align:center;color:var(--acc);height:1.4em;margin-top:22px}
#practice .kbrow{display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap}
#practice .live{display:flex;flex-direction:row;align-items:baseline;gap:20px;color:var(--dim);font-variant-numeric:tabular-nums}
#practice .live b{color:var(--ink);font-size:1.7rem;font-weight:600;margin-right:5px}
#practice #pr-time2 b{color:var(--acc)}
#practice .hint{text-align:center;color:var(--dim);margin-top:20px;font-size:.9rem}
#practice #pr-res{z-index:30;position:fixed;inset:0;background:color-mix(in srgb,var(--bg) 90%,transparent);display:none;align-items:center;justify-content:center;padding:20px}
#practice #pr-res.show{display:flex}
#practice .card{background:var(--key);border:1px solid var(--line);border-radius:12px;padding:28px;max-width:420px;width:100%;text-align:center}
#practice .card h2{margin:0 0 16px;font-weight:600}
#practice .big{display:flex;justify-content:space-around;margin-bottom:16px}
#practice .big div{font-size:.9rem;color:var(--dim)}
#practice .big b{display:block;font-size:2.4rem;color:var(--ink);font-weight:600}
#practice .card p{color:var(--dim);margin:8px 0 20px}
#practice .card button{font:inherit;background:var(--acc);color:#fff;border:0;border-radius:8px;padding:10px 22px;cursor:pointer}
#practice .bar{justify-content:flex-start;gap:12px 32px}
#practice #pr-lvl{margin-top:0;text-align:left}