:root{--canvas:#f7f3ec;--surface:#fffdf8;--ink:#1c1a17;--muted:#6f6a60;--faint:#9a9488;--accent:#2f5fa8;--amber:#b8863b;--green:#4f8a63;--red:#c1685c;--red-text:#a4463f;--divider:#1c1a170f;--card-border:#1c1a1714;--secondary-fill:#1c1a170d;--cell-empty:#1c1a170b;--cell-filled:#1c1a170f;--cell-given:#1c1a171c;--accent-tint:#2f5fa817;--accent-border:#2f5fa866;--accent-active:#2f5fa829;--scrim:#1c1a1757;--radius-sheet:26px;--radius-large:21px;--radius:17px;--radius-chip:14px;--radius-sm:12px;--radius-cell:7px;--shadow-card:0 1px 2px #1c1a170a;--shadow-chip:0 8px 20px #1c1a172e;--shadow-modal:0 20px 50px #1c1a1740;--serif:Georgia, "Source Serif 4", "Gelasio", "Times New Roman", serif}*{box-sizing:border-box}html,body{margin:0;padding:0}body{min-height:100dvh;color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,Inter,sans-serif;font-size:16px;line-height:1.5}button{font:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.page{flex-direction:column;min-height:100dvh;display:flex}.scroll{flex:1;overflow-y:auto}.wrap{max-width:48.75rem;margin:0 auto;padding:1.25rem 1.25rem 0}.topbar{align-items:center;gap:.75rem;margin-bottom:1.25rem;display:flex}.brand{font-family:var(--serif);letter-spacing:-.01em;text-transform:none;color:var(--ink);font-size:1.15rem;font-weight:400}.topbar .spacer{flex:1}.icon-btn{border:1px solid var(--card-border);border-radius:var(--radius-chip);background:var(--surface);height:2.3rem;color:var(--muted);cursor:pointer;align-items:center;gap:.4rem;padding:0 .8rem;font-size:.85rem;transition:background .15s,border-color .15s;display:inline-flex}.icon-btn:hover{background:var(--canvas);border-color:#1c1a1729}.icon-btn.active{background:var(--accent-tint);border-color:var(--accent-border);color:var(--accent)}.badge{background:var(--amber);color:#fff;font-variant-numeric:tabular-nums;border-radius:999px;place-items:center;min-width:1.15rem;height:1.15rem;padding:0 .3rem;font-size:.7rem;font-weight:600;display:inline-grid}.head{margin-bottom:1rem}.reference{font-family:var(--serif);letter-spacing:-.01em;color:var(--ink);margin-bottom:.4rem;font-size:clamp(1.45rem,4vw,1.65rem);font-weight:400;line-height:1.2}.reference.hidden{color:var(--faint);letter-spacing:0;font-style:italic}.chips{flex-wrap:wrap;gap:.35rem;display:flex}.chip{letter-spacing:.04em;text-transform:uppercase;background:var(--surface);border:1px solid var(--card-border);color:var(--muted);border-radius:999px;padding:.2rem .5rem;font-size:.72rem;font-weight:600}.progress{background:var(--cell-given);border-radius:999px;height:5px;margin:.9rem 0 1.5rem;overflow:hidden}.progress>span{background:var(--accent);border-radius:999px;height:100%;transition:width .5s cubic-bezier(.4,0,.2,1);display:block}.progress.done>span{background:var(--green)}.board{flex-wrap:wrap;justify-content:center;gap:1rem .875rem;max-width:100%;padding-bottom:2rem;display:flex}.word{flex-wrap:wrap;gap:.1875rem;max-width:100%;display:flex}.cell{width:var(--cell-size,1.625rem);flex-direction:column;align-items:center;display:flex}.cell button{border-radius:var(--radius-cell);background:var(--cell-empty);width:100%;height:1.625rem;color:var(--ink);cursor:pointer;border:1.5px solid #0000;padding:0;font:600 .875rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;transition:background .12s,border-color .12s}.cell button:hover,.cell.filled button{background:var(--cell-filled)}.cell.given button{background:var(--cell-given);color:var(--ink);cursor:default}.cell.cursor button{background:var(--accent-active);border-color:var(--accent);color:var(--ink)}.cell.wrong button{color:var(--red-text);background:#c1685c29;border-color:#c1685c8c}.cell .code{color:var(--faint);font-variant-numeric:tabular-nums;min-height:.95rem;margin-top:.125rem;font-size:.656rem}.cell.cursor .code{color:var(--accent);font-weight:700}.cell.fixed{width:auto}.cell.fixed .glyph{height:1.625rem;color:var(--muted);place-items:center;font-size:1rem;display:grid}.board.locked{opacity:.55}.board.locked .cell button{pointer-events:none}.card{background:var(--surface);border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--shadow-card);margin-bottom:1.1rem;padding:1rem}.card h2{letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:0 0 .7rem;font-size:.688rem;font-weight:500}.card h2+p{margin-top:-.4rem}.note{color:var(--muted);margin:.5rem 0 0;font-size:.82rem}.card.waiting h2{letter-spacing:0;text-transform:none;color:var(--amber);margin-bottom:.4rem;font-size:.95rem;font-weight:600}.card.waiting .row-actions{margin-top:.8rem}.race .lane{align-items:center;gap:.6rem;display:flex}.race .lane+.lane{margin-top:.65rem}.race .who{min-width:5.5rem;color:var(--ink);align-items:center;gap:.35rem;font-size:.85rem;font-weight:600;display:flex}.race .dot{background:var(--accent);border-radius:999px;flex:none;width:.45rem;height:.45rem}.race .lane.them .dot{background:var(--amber)}.race .track{background:var(--cell-given);border-radius:999px;flex:1;height:5px;overflow:hidden}.race .track>span{background:var(--accent);height:100%;transition:width .5s;display:block}.race .lane.them .track>span{background:var(--amber)}.race .stats{color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;min-width:4.2rem;font-size:.75rem}.race .warn{color:var(--amber);gap:.35rem;margin-top:.6rem;font-size:.8rem;display:flex}.field{margin-bottom:.9rem}.field:last-child{margin-bottom:0}.field>label{color:var(--muted);margin-bottom:.35rem;font-size:.78rem;font-weight:500;display:block}.segmented{background:var(--secondary-fill);border:1px solid var(--card-border);border-radius:999px;gap:.25rem;padding:.25rem;display:flex}.segmented button{color:var(--muted);cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:999px;flex:1;padding:.45rem .3rem;font-size:.82rem;transition:background .15s,color .15s}.segmented button:hover{color:var(--ink)}.segmented button[aria-pressed=true]{background:var(--accent);color:#fff;font-weight:600}.hint{color:var(--faint);margin-top:.4rem;font-size:.78rem}.input{border-radius:var(--radius-sm);border:1px solid var(--card-border);background:var(--surface);width:100%;color:var(--ink);padding:.6rem .7rem;font-size:.92rem;transition:border-color .15s}.input:focus{border-color:var(--accent);outline:none}.input.mono{letter-spacing:.14em;text-transform:uppercase;font-family:ui-monospace,Menlo,monospace}.btn{border-radius:var(--radius-sm);background:var(--accent);color:#fff;cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;gap:.4rem;padding:.55rem .9rem;font-size:.87rem;font-weight:600;transition:filter .15s,transform .1s;display:inline-flex}.btn:hover{filter:brightness(1.06)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.35;cursor:default;filter:none;transform:none}.btn.ghost{background:var(--secondary-fill);border-color:var(--card-border);color:var(--muted);font-weight:500}.btn.ghost:hover{background:var(--cell-given)}.row-actions{flex-wrap:wrap;gap:.45rem;display:flex}.people{margin:0;padding:0;list-style:none}.people li{border-top:1px solid var(--divider);align-items:center;gap:.6rem;padding:.5rem 0;display:flex}.people li:first-child{border-top:0}.people .name{flex:1;font-size:.9rem}.avatar{background:var(--accent);color:#fff;border-radius:.75rem;flex:none;place-items:center;width:2.25rem;height:2.25rem;font-size:.84rem;font-weight:600;display:grid}.pill-code{letter-spacing:.12em;background:var(--secondary-fill);border:1px solid var(--card-border);border-radius:var(--radius-sm);word-break:break-all;padding:.45rem .7rem;font-family:ui-monospace,Menlo,monospace;font-size:.9rem;display:inline-block}.banner{cursor:pointer;color:var(--ink);border-radius:var(--radius-sm);background:#b8863b1f;border:1px solid #b8863b66;align-items:center;gap:.5rem;margin-bottom:1rem;padding:.6rem .8rem;font-size:.85rem;display:flex}.solved{text-align:center;padding-bottom:1.5rem}.solved .seal{color:var(--green);font-size:1.6rem}.solved .title{font-family:var(--serif);margin:.3rem 0 .2rem;font-size:1.6rem;font-weight:400}.solved .verse{font-family:var(--serif);max-width:34rem;color:var(--ink);margin:.6rem auto 1.2rem}.outcome{align-items:stretch;gap:.8rem;max-width:26rem;margin:0 auto;display:flex}.outcome .side{background:var(--surface);border:1px solid var(--card-border);border-radius:var(--radius);flex:1;padding:.8rem .5rem}.outcome .side .who{color:var(--muted);font-size:.82rem}.outcome .time{font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-family:ui-monospace,Menlo,monospace;font-size:1.5rem;font-weight:500}.outcome .sub{color:var(--faint);font-size:.74rem}.keys{padding:.6rem .6rem calc(.6rem + env(safe-area-inset-bottom));background:var(--canvas);border-top:1px solid var(--divider);position:sticky;bottom:0}.keys .inner{max-width:34rem;margin:0 auto}.keys .row{justify-content:center;gap:.375rem;margin-bottom:.375rem;display:flex}.keys .row:last-child{margin-bottom:0}.keys .key{border:1px solid var(--card-border);background:var(--surface);max-width:3.1rem;height:2.75rem;color:var(--ink);cursor:pointer;border-radius:.5625rem;flex:1 1 0;font-size:1rem;font-weight:500;transition:background .1s,transform 80ms;box-shadow:0 1px #1c1a170f}.keys .key:hover:not(:disabled){background:var(--canvas)}.keys .key:active:not(:disabled){transform:scale(.95)}.keys .key.used{background:var(--secondary-fill);color:#c3bdb0}.keys .key:disabled{opacity:.35;cursor:default}.keys .tools{flex-wrap:wrap;gap:.375rem;margin-bottom:.45rem}.keys .tool{border:1px solid var(--card-border);background:var(--surface);min-width:0;max-width:none;height:2.5rem;color:var(--muted);cursor:pointer;border-radius:.5625rem;flex:1 1 0;padding:0 .5rem;font-size:.8rem;transition:background .12s,color .12s}.keys .tool:hover:not(:disabled){background:var(--canvas);color:var(--ink)}.keys .tool:disabled{opacity:.35;cursor:default}.keys .tool.primary{background:var(--accent);color:#fff;border-color:#0000;font-weight:600}@media (max-width:30rem){.board{gap:.875rem .75rem}.keys .key{height:2.75rem}}@media (min-width:70rem){.wrap{max-width:76rem;padding-inline:1.875rem}.desk{grid-template-columns:19.125rem 1fr;align-items:start;gap:1.75rem;display:grid}.desk>.rail{position:sticky;top:1.25rem}.cell{width:2.125rem}.cell button{height:2.125rem;font-size:1.0625rem}.cell.fixed .glyph{height:2.125rem}.board{max-width:48.75rem;margin:0 auto}.keys .row:not(.tools){display:none}.keys{border-top:0}.keys .tools{margin-bottom:0}.keys .inner{max-width:48.75rem}.keys .tool{max-width:11rem}.kbd-hint{border-top:1px solid var(--divider);color:var(--faint);text-align:center;padding:1rem 0;font-size:.8rem}.kbd-hint kbd{background:var(--surface);border:1px solid var(--card-border);color:var(--muted);border-radius:5px;margin:0 .15rem;padding:.1rem .35rem;font-family:ui-monospace,Menlo,monospace;font-size:.75rem}.tool-list{flex-direction:column;gap:.375rem;display:flex}.tool-list button{border:1px solid var(--card-border);border-radius:var(--radius-sm);background:var(--surface);width:100%;height:2.375rem;color:var(--muted);cursor:pointer;justify-content:space-between;align-items:center;gap:.5rem;padding:0 .75rem;font-size:.85rem;transition:background .12s,color .12s;display:flex}.tool-list button:hover:not(:disabled){background:var(--canvas);color:var(--ink)}.tool-list button:disabled{opacity:.35;cursor:default}.tool-list .sc{color:var(--faint);font-family:ui-monospace,Menlo,monospace;font-size:.72rem}}@media (max-width:69.99rem){.desk{display:block}.kbd-hint,.tool-list{display:none}}.tool-list{display:none}