@keyframes next-wait{to{transform:scaleX(1)}}@keyframes nudge{50%{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}}:root{--bg:#eceff5;--panel:#ffffff;--panel-2:#f5f7fb;--text:#121826;--muted:#667085;--faint:#98a2b3;--accent:#3f5fd8;--dot:#17875a;--dot-soft:#e4f4ec;--accent-ink:#2a44ad;--accent-soft:#e6ebfc;--good:#17875a;--good-soft:#e4f4ec;--bad:#cf4040;--bad-soft:#fdeded;--warn-ink:#7a6320;--warn-soft:#fbf5e4;--stroke:#3e4a60;--given:#99a2b3;--guide:#d7dbe4;--border:#dfe4ec;--border-strong:#cdd4e0;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--r-sm:8px;--r-md:12px;--r-lg:16px;--shadow:0 1px 2px rgba(18, 24, 38, .04), 0 8px 24px rgba(18, 24, 38, .06);--shadow-lift:0 2px 6px rgba(18, 24, 38, .08), 0 16px 40px rgba(18, 24, 38, .10);--font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--grid-dot:rgba(18, 24, 38, .055)}*{box-sizing:border-box}html{background:var(--bg)}body,h1{color:var(--text)}body{margin:0;min-height:100vh;width:100%;background:var(--bg);font-family:var(--font);-webkit-font-smoothing:antialiased;display:flex;justify-content:center;padding:var(--s4) 5px var(--s6)}#app{width:100%;max-width:1280px}h1{font-size:clamp(20px,5vw,26px);font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin:0 0 var(--s3);padding-bottom:var(--s3);position:relative}h1::after{content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);width:46px;height:8px;background-image:radial-gradient(circle 3.5px at 3.5px 4px,var(--accent) 3.5px,transparent 4px),radial-gradient(circle 3.5px at 42.5px 4px,var(--accent) 3.5px,transparent 4px),linear-gradient(var(--guide),var(--guide));background-size:46px 8px,46px 8px,46px 2px;background-position:left,right,center;background-repeat:no-repeat}#help,#note{max-width:62ch}#help,h1{text-align:center}#help{color:var(--muted);font-size:13.5px;line-height:1.6;margin:0 auto var(--s2)}#note{color:var(--warn-ink);background:var(--warn-soft);border:0;border-left:2px dotted currentColor;border-radius:0 var(--r-sm) var(--r-sm)0;padding:var(--s2) var(--s3);font-size:12.5px;line-height:1.5;margin:0 auto var(--s5)}button{font:inherit;font-size:13px;font-weight:600;padding:10px 16px;border-radius:var(--r-sm);cursor:pointer;background:var(--accent);color:#fff;border:1px solid var(--accent);transition:background .12s ease,border-color .12s ease,color .12s ease,box-shadow .12s ease,transform .08s ease}button:hover:not(:disabled){background:var(--accent-ink);border-color:var(--accent-ink)}button.secondary{background:0 0;color:var(--muted);border:1px solid var(--border-strong)}button.secondary:hover:not(:disabled){background:var(--panel);border-color:var(--faint);color:var(--text)}button:disabled{opacity:.38;cursor:not-allowed}button:active:not(:disabled){transform:translateY(1px)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}#calendarBox,#setup{display:flex;justify-content:center;align-items:center;gap:var(--s2)}#setup{flex-wrap:wrap}#calendarBox{margin:0 0 var(--s5)}#dayNote{margin:0 0 var(--s5);text-align:center;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}#dayNote:empty{display:none}#dayNote a{color:var(--accent-ink);font-weight:600}#calendarBox:has(+#dayNote:not(:empty)){margin-bottom:var(--s1)}a.nav{width:34px;height:34px;border-radius:50%;font-size:17px;line-height:1;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:0 0;border:1px solid var(--border-strong);color:var(--muted);font-weight:700;cursor:pointer;transition:background .12s,border-color .12s,color .12s}a.nav:hover{background:var(--panel);border-color:var(--accent);color:var(--accent)}a.nav.off{opacity:.3;pointer-events:none}#datePicker{background:var(--panel);cursor:pointer;border:1px solid var(--border);border-radius:var(--r-sm);padding:9px 12px;font-size:14px;color:var(--text);font-family:inherit;transition:border-color .12s}#datePicker:hover{border-color:var(--accent)}#datePicker::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.55}#status{font-size:15px;color:var(--muted);line-height:1.5;text-align:center}#ladder{display:flex;justify-content:center;gap:6px;margin:0 auto var(--s3)}#ladder:empty{display:none}.rung{min-width:30px;height:30px;padding:0 6px;border-radius:var(--r-sm);border:1.5px solid var(--border-strong);background:var(--panel);color:var(--faint);font:700 14px/27px var(--font);text-align:center}.rung.current{border-color:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 3px var(--accent-soft)}.rung.solved{border-color:var(--good);background:var(--good-soft);color:var(--good)}.rung.missed{border-color:var(--bad);background:var(--bad-soft);color:var(--bad)}.end-next{margin-top:var(--s3)}.next-level{position:relative;overflow:hidden}.next-level.auto::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:rgba(255,255,255,.75);transform-origin:left;transform:scaleX(0);animation:next-wait var(--wait, 2s) linear forwards}@media (prefers-reduced-motion:reduce){.next-level.auto::after{animation:none;transform:scaleX(1)}}.ladder-done{margin-top:var(--s2)}#attemptsLeft{font-weight:600;white-space:nowrap}#attemptsLeft::before{content:" · ";font-weight:400}#goal{display:block;margin-bottom:var(--s1);font-size:18px;line-height:1.35}#goal,#status .word,#status b{color:var(--text);font-weight:700}#status .word{font-size:22px;font-weight:800;letter-spacing:2px}#status.won .word{color:var(--good)}#canvasWrap{overflow-x:auto;background:radial-gradient(circle,var(--grid-dot) 1px,transparent 1px)0 0/16px 16px,var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s2);box-shadow:var(--shadow)}#canvas{position:relative;height:150px}#canvas svg{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}#canvas svg .guide{stroke:var(--guide);stroke-width:1;stroke-dasharray:2 4}#canvas svg .edge{stroke:var(--stroke);stroke-width:6;stroke-linecap:round}#canvas svg .edge.correct{stroke:var(--good);stroke-width:3;transition:stroke-width .15s ease}#canvas svg.graded .edge.correct{stroke-width:3}#canvas svg .edge.incorrect{stroke:var(--bad);stroke-width:3;stroke-dasharray:1 6}.pt,.pt::after{position:absolute;border-radius:50%}.pt{width:var(--pt-size, 20px);height:var(--pt-size, 20px);margin-left:calc(var(--pt-size, 20px)/-2);margin-top:calc(var(--pt-size, 20px)/-2);cursor:grab;background:var(--dot);box-shadow:0 0 0 3px var(--panel),0 2px 6px rgba(18,24,38,.22);touch-action:none;transition:transform .1s ease,box-shadow .12s ease}.pt:hover{transform:scale(1.08)}.pt::after{content:"";top:50%;left:50%;width:var(--pt-hit, 32px);height:var(--pt-hit, 32px);transform:translate(-50%,-50%)}.pt.dragging{cursor:grabbing;z-index:20;transform:scale(1.12);box-shadow:0 0 0 3px var(--panel),0 0 0 7px var(--dot-soft),0 4px 10px rgba(18,24,38,.25)}.pt.locked,.pt.red{cursor:default}.pt.locked:hover{transform:none}.pt.red{background:var(--bad);pointer-events:none;box-shadow:0 0 0 3px var(--panel),0 0 0 5px var(--bad-soft)}.hist-row{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s2) 8px;margin-bottom:var(--s2);overflow-x:auto}.hist-head{font-size:11px;color:var(--faint);font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--s1)}.hist-stage{position:relative}.hist-pt,.hist-svg{position:absolute;pointer-events:none}.hist-svg{left:0;top:0}.hist-svg line[stroke="#e4e5ea"]{stroke:var(--guide)}.hist-svg line[stroke="#8b8f9a"]{stroke:var(--given)}.hist-svg line[stroke="#1e9e63"]{stroke:var(--good)}.hist-svg line[stroke="#d64545"]{stroke:var(--bad)}.hist-pt{width:11px;height:11px;margin-left:-5.5px;margin-top:-5.5px;border-radius:50%;background:var(--dot);box-shadow:0 0 0 2px var(--panel)}#msg,#winBanner{display:none;max-width:718px;margin-left:auto;margin-right:auto;border:0;border-radius:0 var(--r-sm) var(--r-sm)0}#msg{background:var(--bad-soft);border-left:3px solid var(--bad);color:#9a3232;padding:10px var(--s3);margin-bottom:var(--s3);font-size:13px;font-weight:600}#msg.tip{background:var(--accent-soft);border-left-color:var(--accent);color:var(--accent-ink)}#winBanner{background:var(--good-soft);border-left:3px solid var(--good);color:#0f6b47;padding:var(--s3) var(--s4);margin-bottom:var(--s4);font-weight:700;font-size:15px}#winBanner.lost{background:var(--bad-soft);border-left-color:var(--bad);color:#8c2b2b}#shareOut{display:none;position:fixed;left:50%;bottom:var(--s5);transform:translateX(-50%);width:min(720px,calc(100% - var(--s6)));z-index:60;margin:0;background:var(--panel);border:1px solid var(--border-strong);border-radius:var(--r-lg);padding:var(--s4);box-shadow:var(--shadow-lift)}#shareText,button.lg-card{width:100%;background:var(--panel);border:1px solid var(--border)}#shareText{border-radius:var(--r-sm);padding:var(--s3);font-size:14px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--text);resize:vertical;line-height:1.6}#shareHint{font-size:12px;color:var(--faint);margin-top:var(--s1)}#legendSortRow{display:flex;align-items:center;justify-content:center;gap:var(--s1);flex-wrap:wrap}.sort-label{font-size:11px;color:var(--faint);font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-right:var(--s1)}#legend{display:grid;background:0 0;border:0;border-radius:0;padding:0;grid-template-columns:repeat(13,1fr);gap:var(--s2);justify-items:center}button.lg-card{min-width:0;border-radius:var(--r-md);padding:var(--s2) var(--s1) 10px;text-align:center;cursor:pointer;font:inherit;color:inherit;transition:border-color .12s,box-shadow .12s,transform .08s}button.lg-card:hover:not(:disabled){background:var(--accent-soft);color:var(--text);border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-1px)}button.lg-card:hover:not(:disabled) .lg-letter{color:var(--accent-ink)}.lg-letter,.stats-grid b{font-weight:800;color:var(--text);line-height:1.1}.lg-letter{font-size:13px;letter-spacing:.06em;margin-bottom:var(--s1)}.lg-stage,.lg-svg{width:48px;height:48px}.lg-stage{position:relative;margin:0 auto}.lg-svg{position:absolute;left:0;top:0;pointer-events:none}.lg-svg line{stroke:var(--stroke);stroke-width:2.5;stroke-linecap:round}.lg-dot,.stats-head::before{width:6px;height:6px;border-radius:50%}.lg-dot{position:absolute;margin-left:-3px;margin-top:-3px;background:var(--dot)}.lg-cost{font-size:10px;color:var(--faint);margin-top:var(--s1);letter-spacing:.06em;font-variant-numeric:tabular-nums}@media (max-width:1099px){#legend{gap:6px}button.lg-card{max-width:68px;padding:4px 2px 5px}.lg-stage{width:32px;height:32px;transform:scale(.666);transform-origin:top left;margin:0 auto}.lg-letter{font-size:11px;margin-bottom:1px}.lg-cost{font-size:9px;margin-top:0;letter-spacing:0}}@media (max-width:619px){#legend{grid-template-columns:repeat(9,1fr)}}#stats{display:none;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s4) var(--s4) var(--s3);margin-bottom:var(--s5);box-shadow:var(--shadow)}.stats-grid span,.stats-head{font-size:11px;color:var(--faint)}.stats-head{font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin:0 0 var(--s3);display:flex;align-items:center;gap:var(--s2)}.stats-head::before{content:"";background:var(--accent);flex:none}.stats-grid{display:flex;gap:var(--s5);margin-bottom:var(--s4);flex-wrap:wrap}.dist-row,.stats-grid div{display:flex;align-items:center}.stats-grid div{flex-direction:column;min-width:52px}.stats-grid b{font-size:26px}.stats-grid span{margin-top:2px}.dist-row{gap:var(--s2);margin-bottom:var(--s1)}.dist-bar,.dist-n,.stats-grid b{font-variant-numeric:tabular-nums}.dist-n{font-size:12px;color:var(--faint);width:10px}.dist-bar{background:var(--good);color:#fff;font-size:11px;font-weight:700;text-align:right;padding:3px var(--s2);border-radius:999px;min-width:16px}#stats button{margin-top:var(--s3);padding:7px 12px;font-size:12px}@media (prefers-color-scheme:dark){:root{--bg:#0f1320;--panel:#171d2c;--panel-2:#1d2435;--text:#e8ecf6;--muted:#9aa5bb;--faint:#78839a;--accent:#6e8bff;--dot:#3ecf8e;--dot-soft:#14301f;--accent-ink:#8ea5ff;--accent-soft:#222c4a;--good:#3ecf8e;--good-soft:#14301f;--bad:#ff6b6b;--bad-soft:#2e1a1c;--warn-ink:#d8bd7a;--warn-soft:#2a2417;--stroke:#aab4c8;--given:#6b7488;--guide:#2c3448;--border:#242c3f;--border-strong:#323c54;--shadow:0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .32);--shadow-lift:0 2px 6px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .45);--grid-dot:rgba(255, 255, 255, .05)}#msg{color:#ffb4b4}#msg.tip{color:#b9c6ff}#winBanner{color:#7ae0b2}#winBanner.lost{color:#ffb4b4}.dist-bar{color:#08130d}button{color:#0d1220}#datePicker::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.7}}@media (max-height:560px){h1{font-size:17px;margin-bottom:var(--s1);padding-bottom:10px}h1::after{width:34px;background-size:34px 8px,34px 8px,34px 2px}#calendarBox,#dayNote,#status{margin-bottom:var(--s2)}#canvasWrap,.hist-row{padding:var(--s1)}#canvasWrap{margin-bottom:var(--s3)}#setup{margin-bottom:var(--s2);gap:6px}button{padding:7px 12px}#legendSortRow{margin-bottom:6px}#legend{margin-bottom:var(--s4)}#winBanner{padding:var(--s2) var(--s3);margin-bottom:var(--s2);font-size:13px}}@media (max-width:640px){body{padding:var(--s3) 5px var(--s5)}#canvasWrap,.hist-row{padding:4px}#canvasWrap{margin-bottom:var(--s4)}h1{margin-bottom:var(--s2);padding-bottom:var(--s3);letter-spacing:.1em}#calendarBox,#dayNote,#status{margin-bottom:var(--s3)}#legend{gap:5px}button.lg-card{padding:4px 2px 5px}.lg-letter{font-size:10px}.lg-cost{font-size:8px}#setup{gap:6px;margin-bottom:var(--s4)}button{padding:11px 13px}.stats-grid{gap:var(--s4)}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}#contact{margin:0 auto var(--s5);text-align:center;font-size:13px;color:var(--muted)}#contact a{color:var(--accent-ink);text-decoration:none}#contact a:hover{text-decoration:underline}#canvas,button.lg-card{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}#legend.nudge .lg-card{animation:nudge .8s ease 2}@media (prefers-reduced-motion:reduce){#legend.nudge .lg-card{animation:none;border-color:var(--accent)}}.hist-pt.red{background:var(--bad);box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--bad-soft)}.gauge{font-family:"Segoe UI Symbol","Apple Braille","Noto Sans Symbols 2","DejaVu Sans",sans-serif;letter-spacing:.08em;color:var(--accent)}.gauge-grid{margin-top:var(--s2)}.gauge-row{font-size:20px;line-height:1.35;display:flex;align-items:baseline;gap:var(--s2)}.gauge-mark{font-size:15px}.gauge-len{min-width:1ch;text-align:right}.gauge-len,.gauge-score{font-size:15px;font-weight:700}.gauge-hint{margin-top:var(--s1);font-size:12px;font-weight:400;opacity:.8}.hist-head .gauge{font-size:15px;margin-left:var(--s1);vertical-align:-1px}.share-links{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}.share-link{display:inline-flex;align-items:center;padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--panel);color:var(--text);font-size:13px;font-weight:600;text-decoration:none}#shareTextBtn.secondary,.share-link:hover{border-color:var(--accent);color:var(--accent)}.share-close{margin-left:auto}#shareTextBtn.secondary{color:var(--accent-ink);background:var(--accent-soft)}#shareTextBtn.secondary:hover:not(:disabled){color:#fff;background:var(--accent);border-color:var(--accent)}.end-share,.next-puzzle{margin-top:var(--s3)}.next-puzzle{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;opacity:.85}.next-puzzle-link{color:inherit;font-weight:700}.end-extras{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid rgba(127,127,127,.25);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}.end-prev{display:inline-flex;align-items:center;padding:8px 14px;border-radius:var(--r-sm);background:var(--accent);color:#fff;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}.end-prev:hover{filter:brightness(1.08)}#canvasWrap{margin-bottom:var(--s3)}#legend{margin-bottom:var(--s4)}@media (min-width:1100px){#legend{gap:6px}button.lg-card{padding:4px 3px 5px}.lg-letter{margin-bottom:2px}.lg-stage{width:40px;height:40px;transform:scale(.8333);transform-origin:top left;margin:0 auto}.lg-cost{margin-top:2px}}@media (max-width:640px){#canvasWrap{margin-bottom:var(--s2)}#legend{gap:4px}button.lg-card{padding:3px 2px 4px}}#legend{justify-content:center}button.lg-card{max-width:none}@media (min-width:1100px){#legend{grid-template-columns:repeat(13,minmax(0,54px));gap:6px}}@media (max-width:1099px){#legend{grid-template-columns:repeat(13,minmax(0,46px));gap:5px}}@media (max-width:619px){#legend{grid-template-columns:repeat(9,minmax(0,46px))}}@media (max-width:430px){#legend{grid-template-columns:repeat(9,minmax(0,40px));gap:3px}button.lg-card{padding:2px 1px 3px;border-radius:var(--r-sm)}.lg-stage{width:26px;height:26px;transform:scale(.5417)}.lg-letter{font-size:10px;margin-bottom:0}.lg-cost{font-size:8px}}#setup{gap:6px}#setup button.secondary{padding-left:12px;padding-right:12px}#status{margin-bottom:var(--s3)}#history{margin-bottom:var(--s2)}#history:empty{margin-bottom:0}.hist-row{padding-top:6px;padding-bottom:6px}.hist-head{margin-bottom:2px;line-height:1.3}.hist-stage{height:92px}.filter-pick{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);font-weight:600}.filter-select{font:inherit;font-size:12px;padding:3px 4px;color:var(--text);background:var(--panel);border:1px solid var(--border);border-radius:var(--r-sm);cursor:pointer}.filter-select.set{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}.filter-select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}button.filter-reset{padding:3px 10px;font-size:12px}.filter-note{font-size:12px;color:var(--muted);min-width:0}#legendSortRow{gap:6px 10px;margin-bottom:var(--s3)}.filter-picks{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:6px 10px}#setup{margin-bottom:var(--s4)}.filter-tail{display:inline-flex;align-items:center;gap:10px}.filter-note:empty{display:none}@media (max-width:640px){#legendSortRow .sort-label{flex-basis:100%;text-align:center;margin-right:0}.filter-picks{gap:4px 8px}.filter-select{padding:3px 2px}.filter-pick{gap:3px}.filter-tail{flex-basis:100%;justify-content:center}}.lg-cost,.lg-letter{display:none}button.lg-card{padding-top:5px;padding-bottom:5px}@media (max-width:430px){button.lg-card{padding:3px 1px}.lg-stage{width:28px;height:28px;transform:scale(.5833)}}