:root{color-scheme:dark;--bg:#10162a;--pn:#182040;--pn2:#222c52;--fg:#eaeefc;--mut:#a9b4d6;--ac:#ffd23f;--ab:#9db0ff;--pt:#10162a;--on:#10162a;--ok:#86efac;--bad:#ffb4b4;--okbg:rgba(134,239,172,.15);--badbg:rgba(255,120,120,.3);--hl:rgba(255,210,63,.25);--cr:#ffd23f;--bd:#34416e;--ovl:rgba(16,22,42,.82);
--tk:#c9b6ff;--tf:#8fd3ff;--ts:#ffd68a;--tn:#ffa987;--tc:#8a97c0;--to:#f4b6f4;
--f0:#fb7185;--f1:#fb923c;--f2:#facc15;--f3:#4ade80;--f4:#2dd4bf;--f5:#38bdf8;--f6:#a78bfa;--f7:#f472b6;--f8:#94a3b8;
--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--serif:Georgia,'Iowan Old Style',serif}
[data-theme=light]{color-scheme:light;--bg:#eaeff8;--pn:#fff;--pn2:#e3e9f6;--fg:#12182b;--mut:#4a5679;--ab:#2b46c4;--pt:#fff;--ok:#146c38;--bad:#9b1c1c;--okbg:rgba(21,128,61,.12);--badbg:rgba(220,38,38,.18);--hl:rgba(255,210,63,.6);--cr:#b45309;--bd:#bcc7e2;--ovl:rgba(234,239,248,.86);
--tk:#5b21b6;--tf:#075985;--ts:#8a4b00;--tn:#a3320c;--tc:#586585;--to:#86198f}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
h1,h2,h3,.brand{font-family:var(--serif);line-height:1.2}
h1{font-size:2rem;margin:.2rem 0 .4rem}h2{font-size:1.35rem;margin:1.6rem 0 .6rem}h3{font-size:1.05rem;margin:.2rem 0}
[hidden]{display:none!important}
.sr,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;top:.5rem;left:.5rem;z-index:9;background:var(--ab);color:var(--pt);padding:.5rem 1rem;border-radius:8px}
:focus-visible{outline:3px solid var(--ab);outline-offset:2px}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding:.6rem 1rem;background:var(--pn);border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:5}
.brand{font-size:1.25rem;font-weight:700;margin-right:auto}
.brand b{background:var(--ac);color:#10162a;padding:0 .4rem;border-radius:4px;font:700 1rem var(--mono)}
nav{display:flex;gap:.3rem}
.menu{display:none}
main,footer{max-width:1000px;margin:0 auto;padding:1rem}
footer{border-top:1px solid var(--bd);margin-top:2rem;color:var(--mut);font-size:.9rem}
.btn{font:inherit;color:var(--fg);background:var(--pn2);border:1px solid var(--bd);border-radius:8px;padding:.4rem .9rem;min-height:40px;cursor:pointer}
.btn:hover{border-color:var(--ab)}
.btn[aria-pressed=true],nav [aria-current=page],.pri{background:var(--ab);color:var(--pt);border-color:var(--ab);font-weight:600}
.danger{border-color:var(--bad);color:var(--bad)}
.sub,.lbl{color:var(--mut);font-size:.9rem}
.err{color:var(--bad);font-weight:600}
.note,.box{background:var(--pn);border:1px solid var(--bd);border-radius:12px;padding:.8rem 1rem;margin:.6rem 0}
.note:empty{display:none}
.filters,.row,.seg{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end;margin:.8rem 0}
.seg{margin:.2rem 0 0}
label{display:flex;flex-direction:column;gap:.2rem;font-size:.9rem;color:var(--mut)}
input,select,textarea{font:inherit;color:var(--fg);background:var(--pn);border:1px solid var(--bd);border-radius:8px;padding:.4rem .6rem;min-height:40px}
textarea{font-family:var(--mono);width:100%}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.7rem;padding:0;list-style:none}
.card{display:flex;flex-direction:column;gap:.3rem;align-items:flex-start;text-align:left;font:inherit;color:var(--fg);background:var(--pn);border:1px solid var(--bd);border-left:5px solid var(--ab);border-radius:10px;padding:.8rem;cursor:pointer}
.card:hover{border-color:var(--ab)}
.tag,.chip{font-size:.78rem;border:1px solid var(--bd);border-radius:99px;padding:0 .55rem;color:var(--mut);width:fit-content}
.chip{display:inline-block;margin:0 .4rem .4rem 0;color:var(--fg);padding:.1rem .6rem}
kbd{font:700 .95rem var(--mono);background:var(--ac);color:#10162a;border-radius:4px;padding:0 .35rem}
.box.off{opacity:.7}.box.on{border-color:var(--ok)}
.box{display:flex;flex-direction:column;gap:.3rem}
progress{width:100%;height:12px;accent-color:var(--ab)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:.5rem;margin:.8rem 0}
.stats>div{background:var(--pn);border:1px solid var(--bd);border-radius:10px;padding:.4rem .7rem}
.stats span{display:block;font-size:.8rem;color:var(--mut)}
.stats b{font:700 1.25rem var(--mono);overflow-wrap:anywhere}
.stage{position:relative;background:var(--pn);border:1px solid var(--bd);border-radius:12px;margin:.6rem 0}
.stage:focus-within{border-color:var(--ab);box-shadow:0 0 0 2px var(--ab)}
.code{font:1.05rem/1.75 var(--mono);white-space:pre-wrap;word-break:break-all;tab-size:4}
#prompt{position:relative;max-height:15rem;overflow:hidden;padding:1rem;user-select:none}
#ta{position:absolute;inset:0;width:100%;height:100%;opacity:0;resize:none;cursor:text;border:0;overflow:hidden}
.ov{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:var(--ovl);font-weight:600;border-radius:12px;pointer-events:none;text-align:center;padding:1rem}
.stage:not(:focus-within) .ov,.stage.paused .ov{display:flex}
.tk{color:var(--tk)}.tf{color:var(--tf)}.ts{color:var(--ts)}.tn{color:var(--tn)}.tc{color:var(--tc);font-style:italic}.to{color:var(--to)}
.ch.ok{background:var(--okbg)}
.ch.bad,.bad{background:var(--badbg);color:var(--bad);text-decoration:underline wavy}
.miss{background:var(--badbg)}
.ch.cur{box-shadow:inset 3px 0 var(--cr);background:var(--hl)}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cmp pre{margin:0;padding:.8rem;background:var(--pn);border:1px solid var(--bd);border-radius:10px;max-height:18rem;overflow:auto}
.hint{min-height:1.6em;font-weight:600;margin:.4rem 0}
.kb{display:flex;flex-direction:column;gap:4px;max-width:780px;margin:.4rem auto;overflow-x:auto}
.kr{display:flex;gap:4px}
.key{--c:var(--f8);position:relative;flex:1 1 0;min-width:1.7rem;height:2.4rem;display:flex;align-items:center;justify-content:center;font:.8rem var(--mono);background:var(--pn);background:color-mix(in srgb,var(--c) 20%,var(--pn));border:1px solid var(--bd);border-bottom:4px solid var(--c);border-radius:6px}
.key small{position:absolute;right:3px;bottom:0;font-size:.55rem;color:var(--mut);pointer-events:none}
.f0{--c:var(--f0)}.f1{--c:var(--f1)}.f2{--c:var(--f2)}.f3{--c:var(--f3)}.f4{--c:var(--f4)}.f5{--c:var(--f5)}.f6{--c:var(--f6)}.f7{--c:var(--f7)}
.key.home{text-decoration:underline}
.key.next{background:var(--ac);color:#10162a;font-weight:700;border-color:var(--fg)}
.tw{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th,td{text-align:left;padding:.4rem .6rem;border-bottom:1px solid var(--bd);white-space:nowrap}
#toast{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);background:var(--ab);color:var(--pt);padding:.6rem 1rem;border-radius:10px;max-width:90vw;opacity:0;pointer-events:none;transition:opacity .2s}
#toast.on{opacity:1}
@media(max-width:720px){
  .menu{display:inline-flex}
  nav{display:none;width:100%;flex-direction:column}nav.open{display:flex}
  h1{font-size:1.6rem}.cmp{grid-template-columns:1fr}.code{font-size:.95rem}.key{min-width:1.3rem;font-size:.65rem;height:2rem}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.key.next small{color:#10162a}
.fing{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.4rem;max-width:780px;margin:.4rem auto}
.fchip{display:flex;flex-direction:column;background:var(--pn);border:1px solid var(--bd);border-left:6px solid var(--f8);border-radius:8px;padding:.3rem .6rem;font-size:.82rem}
.fchip span{font-family:var(--mono);color:var(--mut);overflow-wrap:anywhere}
.fchip.on{background:var(--ac);color:#10162a;border-color:var(--fg)}.fchip.on span{color:#10162a}
input[type=range]{padding:0;border:0;min-height:40px;accent-color:var(--ab);background:none}
@media(max-width:720px){.key small{font-size:.5rem;right:2px}}