:root{--paper:#fbf8ef;--line:#d9e4f2;--ink:#1d2b53;--red:#c8372d;--blue:#2457c5;--hl:#fff176;--green:#2e8b57;--hand:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;--mono:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:17px/1.5 var(--hand);background:var(--paper);
 background-image:linear-gradient(var(--line) 1px,transparent 1px);background-size:100% 28px;}
body::before{content:"";position:fixed;left:44px;top:0;bottom:0;width:2px;background:#f2a9a3;z-index:-1}
.top{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:10px;padding:22px 20px 6px 64px}
h1{margin:0;font-size:2.6rem;line-height:1;transform:rotate(0deg)}
.cur{animation:blink 1s steps(1) infinite;color:var(--red)}@keyframes blink{50%{opacity:0}}
.sub{margin:6px 0 0;font-size:.95rem;opacity:.8}
.score{font-family:var(--mono);font-size:.9rem;border:2px solid var(--ink);padding:4px 10px;border-radius:3px 12px 4px 10px;background:#fff}
.score b{color:var(--red);display:inline-block}.score b.pop{animation:pop .4s}@keyframes pop{50%{transform:scale(1.7)}}
.score button{margin-left:8px;font-size:.7rem;padding:1px 6px}
nav{position:sticky;top:0;z-index:10;display:flex;gap:4px;overflow-x:auto;padding:8px 10px 8px 60px;background:rgba(251,248,239,.95);border-bottom:2px dashed #b9c6da;scrollbar-width:none}
nav a{flex:none;color:var(--ink);text-decoration:none;padding:2px 10px;border:1.5px solid var(--ink);border-radius:12px 4px 10px 3px;background:#fff;transition:transform .2s,background .2s;font-size:.95rem}
nav a:hover,nav a.on{background:var(--hl)}
main{max-width:900px;margin:0 auto;padding:0 18px 0 60px}
.page{padding-top:30px;opacity:0;transform:translateY(24px);transition:opacity .6s,transform .6s}
.page.seen{opacity:1;transform:none}
h2{font-size:1.75rem;margin:10px 0 6px;position:relative;display:inline-block}
h2::after{content:"";position:absolute;left:-4px;right:-6px;bottom:4px;height:12px;background:var(--hl);z-index:-1;transform:skew(0deg) rotate(0deg);opacity:.85}
.num{font-family:var(--mono);font-size:.9rem;color:var(--red);vertical-align:middle;margin-right:6px}
h3{margin:0 0 4px;font-size:1.3rem;text-decoration:underline wavy #f2a9a3 1.5px;text-underline-offset:5px}
.note{margin:2px 0 8px;color:#555}
.card,.game{background:#fff;border:2px solid var(--ink);border-radius:6px 14px 8px 16px/14px 6px 16px 8px;padding:14px 16px;margin:16px 0;box-shadow:4px 5px 0 rgba(29,43,83,.15)}
.card.inner{box-shadow:none;border-style:dashed;margin:10px 0 0}
.small{font-size:.9rem;color:#555}
label{display:block;margin:6px 0;font-size:.95rem}
input[type=range]{width:100%;accent-color:var(--red)}
input:not([type]),input[type=text]{font:15px var(--mono);border:none;border-bottom:2px solid var(--ink);background:#fffde7;padding:3px 4px;width:7em;max-width:100%}
input[size]{width:auto}
select{font:15px var(--hand);border:1.5px solid var(--ink);border-radius:6px;padding:2px 6px;background:#fff}
button{font:16px var(--hand);font-weight:700;color:var(--ink);background:var(--hl);border:2px solid var(--ink);border-radius:255px 15px 225px 15px/15px 225px 15px 255px;padding:3px 14px;cursor:pointer;transition:transform .15s}
button:hover{transform:translateY(-2px) rotate(0deg)}button:active{transform:scale(.95)}
.big{font:600 1.5rem var(--mono);margin:6px 0}
.mono{font-family:var(--mono);font-size:.88rem}
.work{white-space:pre-wrap;background:#f6f8fc;border-left:4px solid var(--blue);padding:8px 10px;margin-top:8px;min-height:1em}
.fb{font-weight:700}.fb.ok{color:var(--green)}.fb.no{color:var(--red)}
.split{display:grid;grid-template-columns:minmax(0,220px) 1fr;gap:16px;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.row{margin:8px 0}
svg,canvas{max-width:100%;display:block;touch-action:none}
#target{width:220px;max-width:100%}
.verdict{font-size:1.15rem;font-weight:700;color:var(--red);transform:rotate(0deg)}
.bar{position:relative;height:14px;border:1.5px solid var(--ink);border-radius:8px;overflow:hidden;margin-top:6px}
.bar div{height:100%;background:repeating-linear-gradient(45deg,var(--red) 0 6px,#e46a5f 6px 12px);transition:width .3s}
.bar .tick{position:absolute;left:23.9%;top:-2px;bottom:-2px;border-left:2px dashed var(--ink)}
/* matcher */
.m-title{font-size:1.3rem;font-weight:700;margin-bottom:4px}
.pool{display:flex;flex-wrap:wrap;gap:8px;min-height:44px;padding:6px;border:1.5px dashed #9aa;border-radius:10px;margin:8px 0}
.chip{font:600 14px var(--mono);padding:6px 10px;background:var(--hl);border:1.5px solid var(--ink);border-radius:4px 10px 4px 10px;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;transition:transform .2s,box-shadow .2s}
.chip.sel{box-shadow:0 0 0 3px var(--blue);transform:rotate(0deg) scale(1.05)}
.chip.drag{position:fixed;z-index:99;pointer-events:none;transform:rotate(0deg) scale(1.1);box-shadow:4px 6px 0 rgba(0,0,0,.2);transition:none}
.chip.shake{animation:shake .4s}@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.slot{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 8px;border-bottom:2px solid var(--ink);min-height:44px;transition:background .3s}
.slot .lbl{font-size:.98rem}
.slot .hole{min-width:80px;min-height:32px;border:1.5px dashed #9aa;border-radius:6px;display:flex;align-items:center;justify-content:center}
.slot.hover{background:#fffbd0}
.m-hint{font-size:.85rem;opacity:.7;margin:2px 0 8px}
.slots.armed .slot:not(.done){background:#f1f6ff;outline:2px dashed var(--blue);outline-offset:-2px;cursor:pointer}
.pool .chip{min-height:36px;display:inline-flex;align-items:center}
@media(pointer:coarse){.chip{padding:9px 13px;font-size:15px}.slot{min-height:52px}}
.slot.done{background:#e8f6ec}.slot.done .chip{background:#bfe8cc;cursor:default}
.slot.done .lbl::after{content:" ✓";color:var(--green);font-weight:700}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.tabs button{font-size:.9rem;padding:1px 10px;background:#fff}.tabs button.on{background:var(--hl)}
.step{opacity:0;transform:translateX(-10px);transition:all .4s;margin:4px 0}.step.show{opacity:1;transform:none}
.qtext{font-size:1.15rem;margin:6px 0}
.letters{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.letters button{min-width:46px;background:#fff;font-family:var(--mono)}
.letters button.on{background:var(--hl);text-decoration:line-through}
.letters button.left{background:var(--red);color:#fff}
.eqs{display:flex;flex-wrap:wrap;gap:10px 22px;font:600 1rem var(--mono);justify-content:center;background:#fffde7}
.graphs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.wide{width:100%}
.ink-r{color:var(--red);font-weight:700}.ink-b{color:var(--blue);font-weight:700}
#toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,120px) rotate(0deg);background:var(--ink);color:#fff;padding:8px 16px;border-radius:10px 3px 10px 3px;transition:transform .4s cubic-bezier(.2,1.6,.4,1);z-index:100}
#toast.show{transform:translate(-50%,0) rotate(0deg)}
footer{text-align:center;padding:30px 10px;font-size:.85rem;opacity:.6}
@media(max-width:600px){
 body::before{left:14px}.top{padding:16px 12px 6px 26px}h1{font-size:2rem}
 nav{padding-left:24px}main{padding:0 10px 0 24px}
 .split,.grid2,.graphs{grid-template-columns:1fr}#target{margin:auto}
 .card,.game{padding:12px 11px}
 .slots{grid-template-columns:1fr}
}