:root{--bg:#f6f7fb;--fg:#1c2233;--card:#fff;--grid:#e4e7ef;--axis:#777;--img:#c2410c;--bd:#d5d9e5;--ac:#3b4b7a;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#12151f;--fg:#e6e9f4;--card:#1b2030;--grid:#2a3042;--axis:#8a93ad;--img:#ff9a5c;--bd:#323955;--ac:#7f93d6}}
:root[data-theme="dark"]{--bg:#12151f;--fg:#e6e9f4;--card:#1b2030;--grid:#2a3042;--axis:#8a93ad;--img:#ff9a5c;--bd:#323955;--ac:#7f93d6}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.4 system-ui,Segoe UI,Roboto,sans-serif}
h1{font-size:18px;margin:4px 0 10px}h2{font-size:14px;margin:0 0 4px}
select,input,button{font:inherit;color:var(--fg);background:var(--card);border:1px solid var(--bd);border-radius:6px;padding:4px 8px}
button{cursor:pointer}button.on{background:var(--ac);color:#fff}
input[type=number]{width:64px}input[type=checkbox]{padding:0}
canvas{width:100%;display:block;background:var(--card);border:1px solid var(--bd);border-radius:8px;touch-action:none}
.card{background:var(--card);border:1px solid var(--bd);border-radius:8px;padding:8px 10px;margin-top:10px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0}
.muted{opacity:.75;font-size:13px}
button:disabled{opacity:.4;cursor:default}
.grp{display:flex;gap:4px;align-items:center}.sep{width:1px;align-self:stretch;background:var(--bd)}.grow{flex:1}
.tb svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
.mb button{border:0;background:none;padding:3px 10px;border-radius:6px}.mb button:hover{background:var(--grid)}
#ctx hr{border:0;border-top:1px solid var(--bd);margin:4px 0}#ctx .k{float:right;opacity:.6;margin-left:18px;font-size:12px}
#mdl{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:20}
.mc{background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:14px;min-width:300px;max-width:600px;width:92%;max-height:82vh;overflow:auto}.mc h2{font-size:15px;margin:0 0 8px}
#toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--ac);color:#fff;padding:6px 14px;border-radius:8px;display:none;z-index:30}
.cfgrow{display:flex;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--bd)}.cfgrow img{width:90px;border:1px solid var(--bd);border-radius:4px}.cfgrow .nm{flex:1;word-break:break-word}
#ctx{position:fixed;z-index:9;display:none;min-width:190px;background:var(--card);border:1px solid var(--bd);border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.25);padding:4px}
#ctx div{padding:5px 10px;border-radius:5px;cursor:pointer}#ctx div:hover{background:var(--ac);color:#fff}#ctx .h{opacity:.6;cursor:default;font-size:12px}#ctx div.sws{display:flex;gap:7px;padding:6px 10px;cursor:default}#ctx div.sws:hover{background:none;color:inherit}#ctx .sws i{width:20px;height:20px;border-radius:50%;box-sizing:border-box;border:2px solid transparent;cursor:pointer}#ctx .sws i:hover{transform:scale(1.15)}#ctx .sws i.on{border-color:var(--fg)}#ctx .h:hover{background:none;color:inherit}

/* ---- zoom indicator ---- */
.cvw{position:relative}
.zoom{position:absolute;right:10px;bottom:10px;background:var(--card);border:1px solid var(--bd);border-radius:999px;padding:2px;box-shadow:0 1px 4px rgba(0,0,0,.18);opacity:.94}
.zoom .grp{display:flex;gap:0;padding:0;margin:0}
.zoom button{border:0;background:none;border-radius:999px;min-width:28px;padding:2px 6px}
.zoom button:hover:not(:disabled){background:var(--grid)}
.zoom [data-act=zoomlvl]{min-width:56px;font-variant-numeric:tabular-nums}
/* ---- mode switcher ---- */
.seg{display:inline-flex;border:1px solid var(--bd);border-radius:999px;padding:2px;background:var(--card)}
.seg button{border:0;background:none;border-radius:999px;padding:3px 14px}
.seg button.on{background:var(--ac);color:#fff}
body.practice .seg{border-color:var(--pc)}body.practice .seg button.on{background:var(--pc)}
/* ---- practice mode ---- */
:root{--pc:#d97f00;--pcbg:rgba(224,138,0,.13);--pcd:#a35a00;--pcfg:#fff}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--pc:#ffb347;--pcbg:rgba(255,179,71,.14);--pcd:#ffb347;--pcfg:#1b1300}}
:root[data-theme="dark"]{--pc:#ffb347;--pcbg:rgba(255,179,71,.14);--pcd:#ffb347;--pcfg:#1b1300}
body.practice #prac{border:2px solid var(--pc);background:linear-gradient(var(--pcbg),var(--pcbg)),var(--card)}
.dis{opacity:.32;filter:grayscale(1);cursor:not-allowed!important}
#ctx div.d{opacity:.35;cursor:not-allowed}#ctx div.d:hover{background:none;color:inherit}