:root{--paper: #f7f6f2;--rule: #dbe6f1;--ink: #1c2733;--ink-soft: #5a6b7a;--ghost: #b3bfca;--ghost-line: #ccd6df;--hl-a: #ffd84d;--hl-b: #ff9fb8;--hl-c: #6cd9a2;--hl-d: #79c4ea;--band-a: color-mix(in srgb, var(--hl-a) 45%, var(--paper));--band-b: color-mix(in srgb, var(--hl-b) 45%, var(--paper));--band-c: color-mix(in srgb, var(--hl-c) 45%, var(--paper));--band-d: color-mix(in srgb, var(--hl-d) 45%, var(--paper));--trace-cell: #e8eef4;--trace-band: #dde6ee;--bad: #d64943;--disp: "Bricolage Grotesque", system-ui, sans-serif;--num: "Space Grotesk", system-ui, sans-serif;--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;--shadow: #1c2733}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0}body{min-height:100vh;min-height:100dvh;background:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px),var(--paper);background-size:24px 24px,24px 24px,auto;color:var(--ink);font-family:var(--num);display:flex;flex-direction:column;align-items:center;overflow-x:hidden;touch-action:manipulation}button{font-family:var(--num);font-weight:700;font-size:14px;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:11px;padding:8px 14px;cursor:pointer;box-shadow:2.5px 2.5px 0 var(--shadow)}button:active{transform:translate(2px,2px);box-shadow:none}button:focus-visible{outline:3px solid var(--hl-b);outline-offset:2px}button.accent{background:var(--hl-a)}button.big{font-size:22px;letter-spacing:2px;padding:14px 46px;border-width:2.5px;box-shadow:4px 4px 0 var(--shadow);border-radius:14px}.iconbtn{width:38px;height:38px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:17px;border-radius:10px}header{width:100%;max-width:500px;padding:14px 16px 0}.hrow{display:flex;align-items:center;justify-content:space-between}.brandrow{align-items:center}.brand{display:flex;align-items:center;gap:10px}.wordmark{font-family:var(--disp);font-weight:800;font-size:28px;margin:0;letter-spacing:.2px}.badge{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid var(--ink);border-radius:999px;padding:4px 9px;background:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}body.practice .badge{background:var(--hl-a);font-size:9px;letter-spacing:.03em}.brand{min-width:0}.clock{flex-shrink:0}.clock{font-family:var(--mono);font-size:22px;font-variant-numeric:tabular-nums}.clockgroup{display:flex;align-items:center;gap:10px;flex-shrink:0}#hintBtn{width:34px;height:34px;font-size:15px}#hintBtn:disabled{opacity:.4;cursor:default;box-shadow:1.5px 1.5px 0 var(--shadow)}.flame{font-family:var(--mono);font-size:12px;font-weight:500;white-space:nowrap;border:1.5px solid var(--ink);border-radius:999px;padding:3px 8px;background:#fff}.flame[hidden]{display:none}.toolbar{margin-top:10px}.tgroup{display:flex;gap:8px;align-items:center}.practice-only{display:none!important}body.practice .practice-only{display:flex!important}body.practice .daily-only{display:none!important}#practiceRow{margin-top:10px}.seg{gap:6px}.segbtn{border-radius:999px;padding:7px 14px}.segbtn.sel{background:var(--ink);color:var(--paper)}#practiceBtn.locked{color:var(--ink-soft)}#stagewrap{width:100%;display:flex;justify-content:center;margin-top:2px;overflow:hidden}#stage{position:relative;flex:none;transform-origin:top center;touch-action:none}#bands{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none}.band{position:absolute;z-index:1}.cell{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;background:#fff;border:2.5px solid var(--ink);border-radius:16px;box-shadow:3.5px 3.5px 0 var(--shadow);font-family:var(--num);font-weight:700;color:var(--ink);user-select:none;-webkit-user-select:none;cursor:pointer}.cell.active{background:var(--trace-cell)}.cell[data-path="0"]{background:var(--hl-a)}.cell[data-path="1"]{background:var(--hl-b)}.cell[data-path="2"]{background:var(--hl-c)}.cell[data-path="3"]{background:var(--hl-d)}#stage.ghost .cell{background:#fbfcfd;border-color:var(--ghost-line);color:var(--ghost);box-shadow:2.5px 2.5px #dde4ea}#stage.ghost .op{color:var(--ghost);background:var(--paper)}.op{position:absolute;z-index:3;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:500;color:var(--ink);background:var(--paper);border-radius:10px;-webkit-user-select:none;user-select:none;pointer-events:none}.op.onband{background:transparent}.chip{position:absolute;z-index:4;-webkit-user-select:none;user-select:none;cursor:default;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--num);line-height:1;border-radius:11px;padding:7px 9px;min-width:40px;background:#fff;border:2px solid var(--ink);box-shadow:2.5px 2.5px 0 var(--shadow)}.chip .val{font-weight:700;font-size:19px;display:flex;align-items:center;gap:4px}.chip .ck{font-size:13px;display:none}.chip.done .ck{display:inline}.chip.pickable{cursor:pointer;animation:pickpulse 1s infinite}@keyframes pickpulse{50%{transform:scale(1.08)}}body.picking #stage .chip:not(.pickable){opacity:.55}.chip .dot{position:absolute;top:-4px;right:-4px;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink)}.chip .tick{position:absolute;background:var(--ink);opacity:.45}.chip .arrow{position:absolute;width:0;height:0;border:5px solid transparent}.cell.hintmark{outline:3.5px solid var(--hintc, var(--hl-a));outline-offset:3px;animation:hintpulse 1.2s infinite}@keyframes hintpulse{50%{outline-offset:6px}}#veil{position:absolute;z-index:5;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--paper) 35%,transparent);border-radius:20px}#veil.counting{background:transparent;pointer-events:none}#veil .count{font-family:var(--disp);font-weight:800;font-size:110px;color:var(--ink);text-shadow:3px 0 0 var(--paper),-3px 0 0 var(--paper),0 3px 0 var(--paper),0 -3px 0 var(--paper)}#tape{width:min(92vw,440px);margin:8px auto 0;background:#fff;border:2px solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--shadow);font-family:var(--mono);font-size:16px;padding:11px 14px;min-height:46px;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;text-align:center;position:relative}#tape .ph{color:var(--ink-soft);font-size:13px}#tape.err{border-color:var(--bad);color:var(--bad);animation:shake .3s}@keyframes shake{25%{transform:translate(-4px)}50%{transform:translate(4px)}75%{transform:translate(-2px)}}.flyp{position:fixed;z-index:35;pointer-events:none;font-family:var(--mono);font-weight:700;font-size:16px;color:var(--bad);transition:transform .6s cubic-bezier(.45,-.15,.75,1),opacity .6s ease-in}.clock.bump{animation:clockbump .7s}@keyframes clockbump{15%,85%{color:var(--bad)}30%{transform:scale(1.22)}}.clock{position:relative}.penstatic{position:absolute;right:100%;margin-right:7px;top:50%;transform:translateY(-50%);color:var(--bad);font-size:14px;font-family:var(--mono);white-space:nowrap}.statusrow{min-height:52px;display:flex;align-items:flex-start;justify-content:center;padding-top:10px;margin-bottom:18px}#resultPill{font-family:var(--mono);font-weight:500;font-size:13px;border-radius:999px;padding:8px 16px}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#1c273373;z-index:20;display:none;align-items:center;justify-content:center;padding:18px}.overlay.show{display:flex}.card{background:var(--paper);border:2.5px solid var(--ink);border-radius:16px;max-width:420px;width:100%;padding:22px 20px;box-shadow:6px 6px #1c273359;max-height:88vh;overflow-y:auto}.card h2{font-family:var(--disp);font-weight:800;margin:0 0 10px;font-size:24px}.cardhead{display:flex;align-items:flex-start;justify-content:space-between}.cardhead h2{margin-bottom:6px}.card .lead{margin:0 0 12px;font-size:14px;color:var(--ink-soft)}.cardrow{display:flex;gap:10px;justify-content:center;margin-top:16px}#demo{margin:4px 0 14px}.demoboard{position:relative;display:flex;align-items:center;justify-content:center;gap:7px}.dcell2{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:2.5px solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--shadow);font-weight:700;font-size:20px;transition:background .25s}.dcell2.on{background:var(--hl-a)}.dop2{font-family:var(--mono);color:var(--ink-soft);font-size:15px}.dchip{display:inline-flex;flex-direction:column;align-items:center;margin-left:10px;border:2px solid var(--ink);border-radius:10px;padding:4px 8px;background:#fff;box-shadow:2px 2px 0 var(--shadow);line-height:1;transition:background .25s}.dchip .dval{font-weight:700;font-size:15px}.dchip.done{background:var(--hl-a)}.dchip.done .dval:after{content:" ✓";font-size:11px}.dptr{position:absolute;width:18px;height:18px;border-radius:50%;background:#1c273359;border:2px solid var(--ink);opacity:0;transition:left .45s ease,top .45s ease,opacity .2s;pointer-events:none}.dtape{font-family:var(--mono);font-size:13px;text-align:center;margin-top:10px;min-height:18px;font-variant-numeric:tabular-nums}.darr{width:0;height:0;border:5px solid transparent;border-left-color:var(--ink-soft);margin-left:2px}.dframes{display:flex;flex-direction:column;gap:12px}.dframe .dtape{margin-top:6px}.steps{list-style:none;counter-reset:step;margin:0;padding:0}.steps li{counter-increment:step;position:relative;padding-left:34px;font-size:13.5px;line-height:1.5;margin-bottom:10px}.steps li:before{content:counter(step);position:absolute;left:0;top:1px;width:21px;height:21px;display:flex;align-items:center;justify-content:center;background:var(--hl-a);border:1.5px solid var(--ink);border-radius:6px;font-size:12px;font-weight:700}.bigtime{font-family:var(--mono);font-size:46px;text-align:center;margin:4px 0 2px;font-variant-numeric:tabular-nums}.streakbig{text-align:center;font-size:26px;font-weight:700;margin:2px 0 4px}.streakbig[hidden],.milestone[hidden]{display:none}.streakbig.pop{animation:streakpop .5s}@keyframes streakpop{35%{transform:scale(1.3)}}.milestone{text-align:center;font-family:var(--disp);font-weight:800;font-size:18px;margin:0 0 4px}.burst{position:fixed;z-index:40;width:9px;height:9px;border-radius:3px;border:1.5px solid var(--ink);pointer-events:none;transition:transform .85s cubic-bezier(.15,.6,.4,1),opacity .85s ease-in}.cap{text-align:center;color:var(--ink-soft);font-size:13px;font-family:var(--mono)}.swatches{display:flex;gap:6px;justify-content:center;margin:12px 0 4px}.swatches i{width:24px;height:24px;border-radius:7px;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--shadow)}.streakline{text-align:center;font-size:13px;color:var(--ink-soft);margin-top:8px}.mistline{text-align:center;font-family:var(--mono);font-size:11.5px;color:var(--bad);margin-top:4px;min-height:15px}.nextline{text-align:center;font-family:var(--mono);font-size:12px;color:var(--ink-soft);margin-top:14px;min-height:20px}.nextline button{font-size:13px}.statgrid{display:flex;justify-content:space-between;gap:8px;margin:10px 0 16px}.statgrid .st{flex:1;text-align:center}.statgrid .st b{display:block;font-size:26px;font-weight:700}.statgrid .st span{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}.histhead{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}.histrow{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-family:var(--mono);font-size:11px}.histrow .lbl{width:46px;text-align:right;color:var(--ink-soft)}.histrow .track{display:block;flex:1;height:14px;background:#ecefee;border-radius:4px;overflow:hidden}.histrow .fill{display:block;height:100%;background:var(--hl-a);border-radius:4px;min-width:2px}.histrow .n{width:20px}.cal{margin-top:16px}.calhead{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}.calhead button{padding:2px 9px;font-size:13px;border-radius:7px;box-shadow:1.5px 1.5px 0 var(--shadow)}.calhead button:disabled{opacity:.35;cursor:default}.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;justify-items:center;align-items:center}.caldow{font-family:var(--mono);font-size:8px;color:var(--ink-soft)}.cald{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--ghost-line);box-sizing:border-box}.cald.done{border-color:var(--ink);box-shadow:1.5px 1.5px 0 var(--shadow)}.cald.today{border-color:var(--ink);border-width:2px}.cald.future{opacity:.35}.cald.blank{border:none;box-shadow:none}#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%) translateY(20px);background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:13px;padding:10px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:40;white-space:nowrap}#toast.show{opacity:1;transform:translate(-50%) translateY(0)}#tip{position:fixed;left:50%;bottom:24px;transform:translate(-50%);display:flex;align-items:center;gap:10px;z-index:26;cursor:pointer;background:#fff;border:2px solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--shadow);padding:10px 12px 10px 16px;font-family:var(--mono);font-size:12.5px;max-width:min(92vw,380px)}#tip[hidden]{display:none}#tip button{border:none;box-shadow:none;padding:2px 6px;font-size:15px;background:none}#tip.attimer{bottom:auto;top:58px;left:auto;right:10px;transform:none}.confetti{position:fixed;top:-14px;width:10px;height:10px;z-index:30;border-radius:2px;pointer-events:none;animation:fall linear forwards}@keyframes fall{to{transform:translateY(105vh) rotate(720deg)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}