:root{--bg: #f6f5f1;--surface: #ffffff;--line: #dedbd2;--fg: #1c1b18;--muted: #6b675e;--accent: #b45309;--accent-soft: #fde68a;--danger: #b91c1c;--radius: 12px;--bar: 3.25rem;color-scheme:light dark}@media(prefers-color-scheme:dark){:root{--bg: #15161a;--surface: #1e2026;--line: #32353d;--fg: #ecebe7;--muted: #9b9789;--accent: #f59e0b;--accent-soft: #78350f}}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-text-size-adjust:100%;overscroll-behavior:none}button{font:inherit;color:inherit;cursor:pointer}input{font:inherit;color:inherit}.app{display:flex;flex-direction:column;height:var(--vh, 100dvh);overflow:hidden}.centered,.centered-note{flex:1;display:grid;place-content:center;color:var(--muted);padding:2rem;text-align:center}.bar{display:flex;align-items:center;gap:.5rem;min-height:var(--bar);padding:.35rem .6rem;padding-top:max(.35rem,env(safe-area-inset-top));background:var(--surface);border-bottom:1px solid var(--line);flex:none}.bar strong{flex:1;font-size:.95rem}.ghost{background:none;border:1px solid var(--line);border-radius:999px;padding:.35rem .75rem;font-size:.85rem;white-space:nowrap}.ghost:active{background:var(--bg)}.primary,.primary-action,.secondary-action{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;border:none;border-radius:var(--radius);background:var(--accent);color:#fff;font-weight:650;padding:.9rem 1rem;text-align:center}.primary:disabled{opacity:.45}.primary-action,.secondary-action{position:relative;overflow:hidden;cursor:pointer}.primary-action input,.secondary-action input{position:absolute;inset:0;opacity:0;cursor:pointer}.primary-action.is-busy,.secondary-action.is-busy{background:var(--muted);pointer-events:none}.is-disabled{opacity:.4;pointer-events:none}.secondary-action{margin-top:.6rem;background:none;color:var(--accent);border:1px solid var(--line);font-weight:600}.error{color:var(--danger);font-size:.9rem;margin:.5rem 0 0}.notice{margin:0;padding:.6rem .9rem;background:var(--accent-soft);color:#78350f;font-size:.85rem;flex:none}@media(prefers-color-scheme:dark){.notice{color:var(--accent-soft)}}.hint{color:var(--muted);font-size:.85rem;margin:0 0 .75rem}.spinner{width:1.1em;height:1.1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.home{overflow:auto}.home-inner{margin:auto;padding:2rem 1.25rem max(2rem,env(safe-area-inset-bottom));max-width:26rem;width:100%}.home h1{font-size:1.9rem;margin:0 0 .25rem;letter-spacing:-.02em}.lede{color:var(--muted);margin:0 0 1.75rem}.field{display:block;margin-bottom:1rem}.field span{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.3rem}.field input,.modal input{width:100%;padding:.7rem .8rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.steps{color:var(--muted);font-size:.9rem;margin:2rem 0 0;padding-left:1.2rem}.steps li{margin-bottom:.4rem}.board-scroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;background:var(--bg);touch-action:pan-x pan-y;display:flex;flex-direction:column;justify-content:safe center;align-items:safe center}.board{position:relative;width:100%;flex:none}.board img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}.overlay{position:absolute;inset:0}.cell{position:absolute;display:grid;place-items:center;container-type:size;cursor:pointer;-webkit-tap-highlight-color:transparent}.letter{font-size:3.5vw;font-size:62cqh;font-weight:700;line-height:1;color:var(--ink, var(--fg))}@media(prefers-color-scheme:dark){.letter{color:var(--ink, #111)}}.cell.pencil .letter{opacity:.5;font-style:italic;font-weight:600}.cell.in-word{background:#2563eb24}.cell.selected{background:#f59e0b57;box-shadow:inset 0 0 0 2px var(--accent)}.cell.has-peer{box-shadow:inset 0 0 0 3px var(--peer)}.cell.selected.has-peer{box-shadow:inset 0 0 0 2px var(--accent),inset 0 0 0 5px var(--peer)}.hidden-input{position:absolute;width:1px;height:1px;opacity:0;border:0;padding:0;pointer-events:none}.presence{flex:1;min-width:0;overflow:hidden}.chips{display:flex;gap:.3rem;list-style:none;margin:0;padding:0;overflow-x:auto}.chip{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .55rem;border-radius:999px;background:color-mix(in srgb,var(--who, var(--muted)) 14%,transparent);color:var(--who, var(--muted));font-size:.78rem;font-weight:600;white-space:nowrap}.chip .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--who)}.chip.alone{background:none;color:var(--muted);font-weight:400}.conn{font-size:.8rem;color:var(--muted)}.conn.offline{color:var(--danger)}.toolbar{display:flex;align-items:center;gap:.35rem;padding:.4rem .6rem;padding-bottom:max(.4rem,env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);flex:none}.tool{display:flex;flex-direction:column;align-items:center;gap:.1rem;flex:1;padding:.4rem .2rem;border:1px solid transparent;border-radius:var(--radius);background:none;font-size:1.1rem}.tool span:last-child{font-size:.65rem;color:var(--muted)}.tool.active{background:var(--accent-soft);border-color:var(--accent)}.tool.active span:last-child{color:var(--accent)}.zoom{display:flex;gap:.25rem}.zoom button{width:2.2rem;height:2.2rem;border:1px solid var(--line);border-radius:var(--radius);background:none;font-size:1.1rem}.zoom button:disabled{opacity:.35}.setup-board{flex:1;overflow:auto;padding:.6rem;display:grid;place-content:center}.setup-board>*{width:100%}.setup-board .board,.crop{position:relative;max-width:34rem;margin:0 auto}.setup-board img,.crop img{display:block;width:100%;user-select:none;-webkit-user-drag:none}.setup-cell{position:absolute}.setup-cell.writable{background:#16a34a29;outline:1px solid rgba(22,163,74,.45);outline-offset:-1px}.setup-cell.clue{background:#dc262642;outline:1px solid rgba(220,38,38,.55);outline-offset:-1px}.swatch-writable{color:#15803d}.swatch-clue{color:var(--danger)}.crop-outline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.crop-outline polygon{fill:#f59e0b2e;stroke:var(--accent);stroke-width:.5;vector-effect:non-scaling-stroke}.handle{position:absolute;width:2.4rem;height:2.4rem;margin:-1.2rem 0 0 -1.2rem;border-radius:50%;border:3px solid var(--accent);background:#ffffff8c;touch-action:none}.setup-controls{flex:none;padding:.75rem .9rem max(.75rem,env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line)}.steppers{display:flex;gap:.75rem;margin-bottom:.6rem}.stepper{display:flex;align-items:center;gap:.4rem;flex:1;border:1px solid var(--line);border-radius:var(--radius);padding:.3rem .5rem}.stepper span{flex:1;font-size:.8rem;color:var(--muted)}.stepper b{min-width:1.5rem;text-align:center}.stepper button{width:2rem;height:2rem;border:none;border-radius:8px;background:var(--bg);font-size:1.1rem}.modal-backdrop{position:fixed;inset:0;display:grid;place-items:center;padding:1.25rem;background:#00000080;z-index:10}.modal{width:100%;max-width:22rem;background:var(--surface);border-radius:16px;padding:1.25rem}.modal h2{margin:0 0 .4rem;font-size:1.15rem}.modal p{margin:0 0 1rem;color:var(--muted);font-size:.9rem}.modal input{margin-bottom:.75rem}