:root,:root[data-theme=dark]{--bg: #15161a;--surface: #1e2027;--tile: #3a3d47;--line: #3a3d47;--text: #f2f3f5;--muted: #8b909c;--accent: #6b7cff;--accent-solid: #5364ea;--good: #4ec98a;--bad: #e2606b;--bonus: #f0a94c;--on-accent: #ffffff;--on-good: #0f2419;--on-bonus: #2a1c08;--hairline: transparent;--shadow: none;--glow: rgb(78 201 138 / .5);--good-tint: #427260;--guide: #4b5286;--guide-hi: #535ea7;--radius: 12px;--ease: cubic-bezier(.25, .8, .35, 1);--quick: .18s;--base: .3s;--slow: .5s}:root[data-theme=light]{--bg: #f1f1ee;--surface: #ffffff;--tile: #e2e3e9;--line: #d3d5dd;--text: #1b1c21;--muted: #6c6f78;--accent: #4a5bf0;--accent-solid: #4a5bf0;--good: #0b6e46;--bad: #c1263a;--bonus: #96550a;--muted: #5f626b;--on-accent: #ffffff;--on-good: #ffffff;--on-bonus: #ffffff;--hairline: #e4e5ea;--shadow: 0 1px 2px rgb(20 22 30 / .06);--glow: rgb(11 110 70 / .3);--good-tint: #90b7ab;--guide: #aeb5eb;--guide-hi: #939ced}@media(prefers-color-scheme:light){:root:not([data-theme]){--bg: #f1f1ee;--surface: #ffffff;--tile: #e2e3e9;--line: #d3d5dd;--text: #1b1c21;--muted: #6c6f78;--accent: #4a5bf0;--accent-solid: #4a5bf0;--good: #0b6e46;--bad: #c1263a;--bonus: #96550a;--muted: #5f626b;--on-accent: #ffffff;--on-good: #ffffff;--on-bonus: #ffffff;--hairline: #e4e5ea;--shadow: 0 1px 2px rgb(20 22 30 / .06);--glow: rgb(11 110 70 / .3);--good-tint: #90b7ab;--guide: #aeb5eb;--guide-hi: #939ced}}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font-family:ui-rounded,Nunito,Segoe UI,system-ui,sans-serif;-webkit-tap-highlight-color:transparent}header,main,footer{width:100%;max-width:30rem;margin:0 auto}header{display:grid;grid-template-columns:3rem 1fr 3rem;align-items:center;gap:.5rem;padding:.75rem 1rem}h1{margin:0;font-size:1.25rem;text-align:center}main{flex:1;padding:0 1rem 2rem}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}button.icon{width:2.5rem;height:2.5rem;display:grid;place-items:center;position:relative;border:1px solid var(--hairline);border-radius:50%;background:var(--surface);box-shadow:var(--shadow);font-size:1.1rem}button.icon:disabled{opacity:.35;cursor:default}.badge{position:absolute;top:-.25rem;right:-.25rem;min-width:1.15rem;padding:0 .2rem;border-radius:999px;background:var(--accent-solid);color:var(--on-accent);font-size:.7rem;line-height:1.15rem;text-align:center}button.primary{display:block;width:100%;max-width:18rem;margin:1.5rem auto 0;padding:.85rem 1.5rem;border-radius:var(--radius);background:var(--accent-solid);color:var(--on-accent);font-weight:700}.counter{display:grid;place-items:center;margin:.5rem 0 0;min-height:2.2rem;padding:0 .5rem;text-align:center;font-size:1.35rem;font-weight:700;text-wrap:balance}.counter.flash{font-size:1.15rem;animation:flash-in var(--base) var(--ease)}.counter.flash.good{color:var(--good)}.counter.flash.bad{color:var(--bad)}.counter.flash.bonus{color:var(--bonus)}.counter.flash.muted{color:var(--muted)}.counter.flash.longest{color:var(--good);font-size:1.05rem;animation:flash-longest var(--slow) var(--ease);text-shadow:0 0 1.5rem var(--glow)}@keyframes flash-in{0%{opacity:0;transform:translateY(.3rem)}}@keyframes flash-longest{0%{opacity:0;transform:scale(.94)}}.current-word{margin:.5rem 0;height:2rem;text-align:center;font-size:1.35rem;font-weight:700;letter-spacing:.15em;color:var(--accent);opacity:0;transition:opacity .12s;cursor:pointer;pointer-events:none}.current-word.visible{opacity:1;pointer-events:auto}.timer{margin:1rem 0 0;text-align:center;font-size:1.5rem;font-variant-numeric:tabular-nums;color:var(--muted)}.board{display:block;width:100%;touch-action:none;user-select:none;overflow:visible}.edge{stroke:var(--line);stroke-width:3.2;stroke-linecap:round;transition:opacity var(--slow) var(--ease),stroke-width var(--slow) var(--ease)}.edge.dead{opacity:0;stroke-width:0;pointer-events:none}.trace{fill:none;stroke:var(--accent);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.tile circle{fill:var(--tile);transition:fill var(--quick) var(--ease),opacity var(--slow) var(--ease),r var(--slow) var(--ease)}.tile text{fill:var(--text);font-size:8px;font-weight:800;text-anchor:middle;dominant-baseline:central;pointer-events:none;transition:opacity var(--base) var(--ease)}.tile.active circle{fill:var(--accent-solid)}.tile.active text{fill:var(--on-accent)}.tile.hinted circle{fill:var(--bonus)}.tile.hinted text{fill:var(--on-bonus)}.tile.dead{pointer-events:none}.tile.dead circle{opacity:0;r:0}.tile.dead text{opacity:0}.tile:focus-visible circle{stroke:var(--text);stroke-width:1.5}.done-label{margin:2rem 0 0;text-align:center;color:var(--muted)}.final-time{margin:.25rem 0;text-align:center;font-size:3rem;font-weight:800;font-variant-numeric:tabular-nums}.vs{margin:0 auto;padding:.4rem .9rem;width:fit-content;border-radius:999px;font-weight:700;font-size:.9rem}.vs.faster{background:color-mix(in srgb,var(--good) 15%,transparent);color:var(--good)}.vs.slower{background:color-mix(in srgb,var(--bad) 15%,transparent);color:var(--bad)}.streak{margin:.75rem 0 0;text-align:center;font-weight:700;color:var(--bonus)}.muted{margin:.35rem 0 0;text-align:center;color:var(--muted);font-size:.9rem}.word-list{display:grid;gap:.75rem;margin-top:2rem}.word-card{position:relative;padding:1rem;border:1px solid var(--hairline);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);text-align:center}.word-card.longest{border:1px solid color-mix(in srgb,var(--good) 40%,transparent);background:linear-gradient(color-mix(in srgb,var(--good) 8%,transparent),transparent)}.word-card.longest h3{color:var(--good)}.tag{display:inline-block;margin-bottom:.5rem;padding:.15rem .55rem;border-radius:999px;background:color-mix(in srgb,var(--good) 18%,transparent);color:var(--good);font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.primary.copied{background:var(--good);color:var(--on-good)}.word-card h3{margin:0;letter-spacing:.08em}.word-card p{margin:.5rem 0 .9rem;color:var(--muted);font-size:.95rem}.word-card dl{display:flex;justify-content:center;gap:2rem;margin:0}.word-card dt{color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em}.word-card dd{margin:.15rem 0 0;font-weight:700;font-variant-numeric:tabular-nums}dialog{max-width:26rem;border:1px solid var(--hairline);border-radius:var(--radius);background:var(--surface);color:var(--text);padding:1.5rem}dialog::backdrop{background:#0009}dialog h2{margin:1.25rem 0 .5rem;font-size:1.1rem}dialog h2:first-child{margin-top:0}dialog ol{margin:0;padding-left:1.2rem;color:var(--muted);line-height:1.5}footer{padding:1rem;text-align:center;font-size:.75rem;color:var(--muted)}footer a{color:inherit}.error{margin-top:3rem;text-align:center;color:var(--muted)}.mode-line{width:fit-content;margin:0 auto .25rem;padding:.2rem .6rem;border-radius:999px;background:var(--tile);color:var(--muted);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em}.mode-line.hard{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}button.secondary{display:block;width:100%;max-width:18rem;margin:.75rem auto 0;padding:.75rem 1rem;border:1px solid var(--tile);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);font-weight:700}.menu-actions button.secondary{max-width:none}.dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.dialog-head h2{margin:0}button.icon.close{width:2rem;height:2rem;background:transparent;color:var(--muted)}dialog h3{margin:1.5rem 0 .6rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}dialog h3:first-of-type{margin-top:0}.modes{display:grid;gap:.5rem}.mode-card{display:grid;gap:.15rem;padding:.85rem 1rem;border:1px solid var(--tile);border-radius:var(--radius);background:var(--bg);text-align:left}.mode-card.current{border-color:var(--accent)}.mode-name{font-weight:800}.mode-detail{font-size:.8rem;color:var(--muted)}.mode-state{font-size:.8rem;font-weight:700;color:var(--good)}.setting{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 0;font-weight:600}.segmented{display:flex;padding:.2rem;border-radius:999px;background:var(--bg)}.segmented.wide{width:100%;margin-bottom:.5rem}.segmented.wide button{flex:1}.segmented button{padding:.4rem .75rem;border-radius:999px;font-size:.85rem;font-weight:700;color:var(--muted)}.segmented button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}.switch{flex:none;width:3rem;height:1.7rem;padding:.2rem;border-radius:999px;background:var(--tile);transition:background .15s}.switch.on{background:var(--accent-solid)}.knob{display:block;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--surface);transition:transform .15s}.switch.on .knob{transform:translate(1.3rem)}.knob{box-shadow:var(--shadow)}.checkbox{cursor:pointer;font-weight:400;color:var(--muted)}.menu-actions{margin-top:1.5rem}.archive-list{display:grid;gap:.4rem;max-height:55vh;overflow-y:auto}.archive-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;padding:.75rem 1rem;border:1px solid var(--tile);border-radius:var(--radius);background:var(--bg);text-align:left}.archive-item.solved{border-color:color-mix(in srgb,var(--good) 45%,transparent)}.archive-item.started{border-color:color-mix(in srgb,var(--bonus) 55%,transparent)}.archive-n{font-weight:800}.archive-note{font-size:.85rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}.archive-item.solved .archive-note{color:var(--good)}.archive-item.started .archive-note{color:var(--bonus)}.tutorial-intro{margin:.25rem 0 0;text-align:center;font-size:1.4rem;font-weight:800}.counter.tutorial-prompt{font-size:1.05rem;font-weight:600;color:var(--muted)}.counter.tutorial-prompt b{color:var(--accent);font-weight:800;letter-spacing:.05em}.tile.guide circle{fill:var(--guide);animation:guide-pulse 2.4s ease-in-out infinite}@keyframes guide-pulse{50%{fill:var(--guide-hi)}}button.link{display:block;margin:1.5rem auto 0;padding:.5rem;color:var(--muted);font-size:.9rem;font-weight:600;text-decoration:underline;text-underline-offset:3px}button.link:hover{color:var(--text)}.tile.dealing{animation:deal .42s var(--ease) backwards;animation-delay:var(--deal, 0ms)}@keyframes deal{0%{opacity:0;transform:scale(.86)}}.tile{transform-box:fill-box;transform-origin:center}.tile.landed circle{animation:landed var(--slow) var(--ease)}@keyframes landed{35%{fill:var(--good-tint);r:10.4}}.word-card{animation:card-in var(--slow) var(--ease) backwards}@keyframes card-in{0%{opacity:0;transform:translateY(8px)}}.final-time{animation:score-in var(--slow) var(--ease)}@keyframes score-in{0%{opacity:0;transform:scale(.92)}}.vs{animation:card-in var(--base) .12s var(--ease) backwards}dialog[open]{animation:dialog-in var(--base) var(--ease)}dialog::backdrop{animation:fade-in var(--base)}@keyframes dialog-in{0%{opacity:0;transform:translateY(6px) scale(.99)}}@keyframes fade-in{0%{opacity:0}}button.primary,button.secondary,button.icon,.mode-card,.archive-item{transition:transform var(--quick) var(--ease),background var(--quick) var(--ease),border-color var(--quick) var(--ease)}button.primary:active,button.secondary:active,button.icon:not(:disabled):active,.mode-card:active,.archive-item:active{transform:scale(.975)}.archive-item:hover,.mode-card:hover{border-color:var(--accent)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.15s!important}}.tile{cursor:pointer}.tile.dead{cursor:default}.board:active{cursor:grabbing}.tile.hover:not(.dead):not(.active) circle{fill:color-mix(in srgb,var(--accent) 22%,var(--tile))}