:root{--accent:#246c70;--pale:#edf5f3;--font-type:'DM Mono',monospace;--stamp:var(--accent)}
.page{max-width:880px}.logo{font-family:var(--font-ui);font-size:19px;font-weight:800;line-height:.95;letter-spacing:.12em}.logo span{display:block;font-size:12px;margin-top:5px;letter-spacing:.21em}.doc{border-radius:16px;padding:24px;background:#fffdf8;color:#243638;overflow:visible}.heading{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:#647778;padding-bottom:18px}.heading #number{font-weight:800;color:#243638}.tabs{padding:0;gap:8px}.tab{border-radius:30px;border-bottom:1px solid var(--desk-line)}.tab[aria-pressed=true]{background:var(--desk-ink);color:var(--desk)}.workspace{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:30px;align-items:start}.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:2px solid #365b5e;border-radius:7px;overflow:hidden;background:#d0ddda;gap:1px}.cell{position:relative;min-width:0;aspect-ratio:1.12;appearance:none;border:0;border-radius:0;background:#fffdf8;color:#1e4d51;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:5px;font-family:var(--font-type)}.cell:nth-child(4n+2){border-right:2px solid #365b5e}.cell:nth-child(n+5):nth-child(-n+8){border-bottom:2px solid #365b5e}.cell.peer{background:#f0f4ef}.cell.selected{background:#dcefe9;box-shadow:inset 0 0 0 2px var(--accent)}.cell.conflict{box-shadow:inset 0 0 0 2px #ad493c}.cell .fragment{font-size:10px;color:#667d7a;letter-spacing:.15em;white-space:pre}.cell .entry{font-size:clamp(12px,1.5vw,18px);font-weight:500;letter-spacing:.03em}.cell .placeholder{color:#687e7b;font-size:16px;letter-spacing:.15em}.cell .pencil{font-size:12px;letter-spacing:.15em;color:#677978}.cell:focus-visible{z-index:1;outline:2px solid #a96931;outline-offset:-4px}.tools{display:flex;gap:5px;justify-content:space-between;margin-top:12px;flex-wrap:wrap}.tool{appearance:none;border:1px solid #ccd7d0;border-radius:7px;background:transparent;color:#496462;padding:8px 9px;font:600 12px var(--font-ui);cursor:pointer;min-height:38px}.tool[aria-pressed=true]{background:var(--accent);color:white;border-color:var(--accent)}button:disabled{opacity:.5;cursor:default}.guide{color:#6a7a73;font-size:12px;min-height:18px;margin:8px 0 0}.clue-side h2{font-size:15px;margin:0 0 12px}.clue-side h2 span{display:block;font-size:11px;font-weight:400;color:#6a7a73;margin-top:2px}.clue{display:grid;grid-template-columns:36px 1fr;column-gap:10px;align-items:center;margin-bottom:13px}.badge{grid-row:span 2;width:36px;height:42px;border:1px solid #b6cac2;border-radius:7px;background:#edf4ed;color:#245c5c;font:500 17px var(--font-type);cursor:pointer}.clue label{font-size:13px;line-height:1.3}.clue input{width:100%;min-width:0;letter-spacing:.18em;text-transform:uppercase;font:500 17px var(--font-type);color:#243638;background:transparent;border:0;border-bottom:1px solid #b6cac2;border-radius:0;padding:5px 0;outline-offset:2px}.clue input::placeholder{color:#a0aaa3;letter-spacing:.3em}.tally{font-size:12px;color:#6a7a73;margin:14px 0 10px}.btn{border-radius:8px;border-color:var(--accent);color:var(--accent)}.btn.primary{background:var(--accent);color:white}.check{width:100%;min-height:43px}.feedback{font-size:13px;min-height:20px;color:#9d4737}.result{border-top:1px solid #c5d2cc;margin-top:18px;padding-top:18px}.result h2{font:800 23px var(--font-ui);letter-spacing:-.03em}.result-actions{display:flex;flex-wrap:wrap;gap:8px}.archive-row{display:flex;justify-content:space-between;width:100%;gap:12px;border:0;border-bottom:1px solid #d4dfd7;background:none;color:#243638;padding:16px 0;font:14px var(--font-ui);text-align:left;cursor:pointer}.complete .cell{background:#eff6ed}.placed{animation:settle .18s ease-out}.revealed{animation:reveal .38s ease-out}.complete .cell{animation:reveal .35s ease-out both;animation-delay:calc(var(--i)*22ms)}@keyframes settle{from{transform:translateY(2px);opacity:.5}to{transform:none;opacity:1}}@keyframes reveal{from{opacity:.35}to{opacity:1}}
@media(max-width:650px){.page{max-width:440px;gap:12px}.workspace{grid-template-columns:1fr;gap:20px}.doc{padding:18px 16px}.board{max-width:400px;margin:auto}.cell{aspect-ratio:1.5}.cell .entry{font-size:15px}.clue-side h2 span{display:inline;margin-left:8px}.clue{margin-bottom:10px}.clue input{font-size:16px}.clue-side{min-width:0}.guide{margin-bottom:0}.heading{padding-bottom:12px}.logo{font-size:16px}.logo span{font-size:10px}.top{gap:8px}.brand{gap:8px}.ghost{padding-inline:10px}.cell .fragment{font-size:9px}.clue{grid-template-columns:32px 1fr}.badge{width:32px;height:40px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.cell .fragment{font-size:11px;letter-spacing:.12em}.cell.given .fragment{color:#335f60;font-weight:500}.cell.vacant .fragment{font-size:18px}.cell.vacant .placeholder{display:none}.cell.vacant:not(.given) .fragment{color:#a8b6af}.cell.vacant.given .fragment{letter-spacing:.1em}
@media(max-width:650px){.cell.vacant .fragment{font-size:16px}.cell .fragment{font-size:10px}}

.finished .tools,.finished #check,.finished #tally,.finished #feedback{display:none}.finished .badge{opacity:1}.finished input:disabled{opacity:1;-webkit-text-fill-color:#243638}.result h2{text-transform:none}.result h2:focus{outline:none}

/* Select a word first; four compact tiles live directly beneath the grid. */
.page{max-width:650px}.workspace{display:flex;flex-direction:column;gap:18px}.board-side,.clue-side{width:100%}.board{max-width:440px;margin:auto}.cell{aspect-ratio:1.45}.cell .entry{font-size:17px}.cell.fixed{background:#e3ede5;box-shadow:inset 0 0 0 1px #b6c9ba}.cell.fixed .fragment{font:10px var(--font-ui);letter-spacing:0;color:#506859}.cell .pencil{font-size:9px;letter-spacing:0;line-height:1.4;overflow-wrap:anywhere}.rule-line{font-size:14px;text-align:center;margin:0 0 16px;color:#496462}.clue-side h2{font-size:14px;margin:0 0 10px}.clue-side h2 span{display:inline;font-size:12px;margin-left:8px}#clues{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.word-tile{position:relative;display:flex;flex-direction:column;border:1px solid #c4d5ca;border-radius:9px;padding:10px;background:#f8faf5;min-width:0}.word-tile.chosen{border:2px solid var(--accent);padding:9px;background:#e2f0e9}.word-tile label{font-size:12px;line-height:1.35;min-height:34px}.given-label{font-size:10px;color:#587565;min-height:14px}.word-tile input{box-sizing:border-box;width:100%;min-width:0;border:0;border-bottom:1px solid #bccdc1;background:transparent;color:#243638;padding:5px 0;font:500 20px var(--font-type);letter-spacing:.04em;text-transform:uppercase;border-radius:0}.word-tile input[readonly]{color:#36604d}.choose-word{border:0;border-radius:5px;padding:9px 2px 5px;margin-top:4px;background:transparent;color:#246c70;font:600 11px var(--font-ui);cursor:pointer;min-height:36px}.chosen .choose-word{font-weight:800}.choose-word:disabled{opacity:.55}.guide{min-height:34px}.tools{justify-content:center;gap:8px}.tally{text-align:center}.check{display:block;max-width:320px;margin:auto}.feedback{text-align:center}.finished .choose-word{display:none}
dialog{width:min(94vw,480px);max-height:90dvh;overflow:auto;box-sizing:border-box;border:0;border-radius:18px;padding:24px;background:#fffdf8;color:#243638;font-family:var(--font-ui);box-shadow:0 16px 70px #0006}dialog::backdrop{background:#1119}dialog h2{font-size:22px;line-height:1.2;margin:0 0 12px}dialog p{font-size:14px;line-height:1.55}.demo-row,.demo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:2px solid #365b5e;gap:1px;background:#bccdc1;border-radius:6px;overflow:hidden;margin:18px 0}.demo-cell{border:0;background:#fffdf8;color:#243638;min-width:0;min-height:50px;padding:8px 2px;font:500 14px var(--font-type);opacity:1!important}.demo-cell:not(:disabled){background:#dcefe9;box-shadow:inset 0 0 0 2px var(--accent);cursor:pointer}.demo-grid .demo-cell:nth-child(4n+2){border-right:2px solid #365b5e}.demo-grid .demo-cell:nth-child(n+5):nth-child(-n+8){border-bottom:2px solid #365b5e}.demo-box{background:#edf4db}.demo-word{font:500 14px var(--font-type);padding:10px 2px;min-width:0;border:1px solid #b6cac2;background:#f5f8f1;color:#245c5c;border-radius:6px;cursor:pointer}.demo-word[aria-pressed=true]{color:white;background:#246c70}#demo-words{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}#demo-feedback{min-height:44px;color:#246c70}.intro-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:650px){.cell .entry{font-size:15px}.workspace{gap:10px}.clue-side h2 span{display:block;margin:3px 0 0}#clues{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.word-tile{padding:8px}.word-tile.chosen{padding:7px}.word-tile label{min-height:17px}.word-tile input{font-size:19px}.choose-word{padding:6px 0;min-height:30px}.rule-line{font-size:12px;margin-bottom:12px}.guide{margin-bottom:0;font-size:12px;min-height:30px}.tools{gap:5px}.tool{font-size:11px;padding:7px}.doc{padding:16px 14px}}
