:root[data-theme=light]{--bg: #f7f5f0;--fg: #1d1d1b;--muted: #6b6a66;--panel: #ffffff;--border: #d9d6cd;--accent: #2557d6;--on-accent: #ffffff;--correct: #1e7a3c}:root[data-theme=dark]{--bg: #16181d;--fg: #ecebe6;--muted: #9a9a94;--panel: #1f222a;--border: #343845;--accent: #7aa2ff;--on-accent: #0d1220;--correct: #5ad17f}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,sans-serif}main{max-width:520px;margin:0 auto;padding:16px;display:grid;gap:16px}header{display:flex;justify-content:space-between;align-items:baseline}h1{margin:0;font-size:1.5rem}h2{margin:0;font-size:1.15rem}#counter{font-variant-numeric:tabular-nums;color:var(--muted)}.bar{display:grid;gap:8px}.actions{display:flex;flex-wrap:wrap;gap:8px}#puzzle-date{font-variant-numeric:tabular-nums;color:var(--muted)}canvas{width:100%;aspect-ratio:1;background:var(--panel);border:1px solid var(--border);border-radius:8px}#guesses{margin:0;padding-left:1.4rem;color:var(--muted)}#guesses li.correct{color:var(--correct);font-weight:600}#guesses li.answer{list-style:none;margin-left:-1.4rem;color:var(--fg);font-weight:600}#guesses li.correct:after{content:" ✓Correct"}form{display:flex;gap:8px}input[type=text],input[type=date],select{padding:10px 12px;font-size:1rem;color:var(--fg);background:var(--panel);border:1px solid var(--border);border-radius:6px}#guess-input{flex:1}button{padding:10px 16px;font-size:1rem;color:var(--on-accent);background:var(--accent);border:0;border-radius:6px;cursor:pointer}button.secondary{color:var(--fg);background:transparent;border:1px solid var(--border)}button.small{padding:4px 10px;font-size:.875rem}button:disabled,input:disabled{opacity:.5;cursor:not-allowed}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#message{margin:0;min-height:1.5em}#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);max-width:calc(100vw - 32px);padding:12px 18px;border-radius:8px;background:var(--correct);color:var(--bg);font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}#toast.info{background:var(--fg)}#toast.show{opacity:1;transform:translate(-50%)}@media(prefers-reduced-motion:reduce){#toast{transition:none}}dialog{width:min(420px,calc(100vw - 32px));max-height:80vh;padding:0;color:var(--fg);background:var(--panel);border:1px solid var(--border);border-radius:10px}dialog::backdrop{background:#00000073}.dialog-body{padding:16px;display:grid;gap:12px}.dialog-body form{justify-content:flex-end}fieldset{display:grid;gap:10px;margin:0;padding:12px;border:1px solid var(--border);border-radius:8px}.choice{display:flex;gap:8px;align-items:center}#puzzle-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:50vh;overflow:auto}#puzzle-list button{width:100%;display:flex;justify-content:space-between;gap:12px;color:var(--fg);background:var(--bg);border:1px solid var(--border);text-align:left}#puzzle-list button[aria-current=true]{border-color:var(--accent)}#puzzle-list .state{color:var(--muted)}.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.field{display:grid;gap:4px}.palette{display:flex;flex-wrap:wrap;gap:10px}.swatch{display:flex;gap:6px;align-items:center;padding:4px;border:2px solid transparent;border-radius:8px}.swatch.active{border-color:var(--accent)}.swatch input[type=color]{flex:none;width:36px;height:36px;padding:0;background:none;border:1px solid var(--border)}#lines{margin:0;padding-left:1.6rem}#lines li{margin-bottom:6px;padding:2px 4px;border-radius:6px}#lines li>*{margin-right:6px}#lines li.selected{outline:2px solid var(--accent)}.pick{display:inline-flex;gap:8px;align-items:center;padding:4px 8px;color:var(--fg);background:none;border:0}.dot{width:14px;height:14px;border-radius:50%;border:1px solid var(--border)}#hint{margin:0;color:var(--muted)}main.editor{max-width:none;grid-template-columns:minmax(0,1fr) minmax(320px,420px);align-items:start;gap:24px}.stage{position:sticky;top:16px}.stage canvas{display:block;width:min(100%,calc(100vh - 32px));margin:0 auto}.panel{display:grid;gap:16px;min-width:0}@media(max-width:800px){main.editor{grid-template-columns:1fr}.stage{position:static}.stage canvas{width:100%}}input[type=file]{color:var(--fg)}button[aria-pressed=true]{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}.bar select{width:100%}a{color:var(--accent)}.footer{margin:0;text-align:center;color:var(--muted)}.field input[type=text],.field select{width:100%}
