:root{--paper:#fbf8ef;--ink:#222d2d;--muted:#67716b;--blue:#386a80;--line:#deded2}*{box-sizing:border-box}body{margin:0;background:#efeee5;color:var(--ink);font:16px/1.5 system-ui,sans-serif}header{max-width:1150px;margin:auto;padding:24px 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font:italic 28px Georgia,serif;color:var(--ink);text-decoration:none}.brand span{font-weight:bold}.brand small{display:block;font:9px system-ui;letter-spacing:4px;margin-top:1px}select{padding:8px;border:1px solid var(--line);background:var(--paper);border-radius:30px}main{max-width:1100px;margin:45px auto;padding:0 25px}h1{font:normal clamp(34px,5vw,58px)/1.08 Georgia,serif;letter-spacing:-1.5px;margin:14px 0 20px}h2{font:normal 26px Georgia,serif}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--blue);font-weight:700}.intro{color:var(--muted);margin-bottom:35px}.editor-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:60px}.paper{background:var(--paper);padding:28px;border:1px solid var(--line);border-radius:18px}label{display:block;font-weight:600;font-size:14px;margin:12px 0 7px}input,textarea{font:inherit;border:1px solid #d6d8cf;border-radius:8px;background:#fffdf8;padding:12px;width:100%;color:var(--ink)}textarea{resize:vertical;font-size:14px;line-height:1.7}.hint{font-size:12px;color:var(--muted)}button,.import{font:500 13px system-ui;cursor:pointer;border:1px solid #cbd0c8;border-radius:30px;background:transparent;color:var(--ink);padding:12px 18px;display:inline-block;margin:6px 4px 6px 0}button:hover,.import:hover{background:#e3e8df}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #559bb6;outline-offset:2px}.primary{background:var(--ink);color:white;border-color:var(--ink)}.primary:hover{background:var(--blue);color:white}.mini-grid{font:26px/1.5 monospace;letter-spacing:7px;background:var(--ink);color:var(--paper);padding:24px;border-radius:14px;width:215px;margin:20px 0}.import input{display:none}.puzzle-head{border-bottom:1px solid var(--line);padding-bottom:15px;margin-bottom:30px}.puzzle-head h1{font-size:42px}.puzzle-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.8fr);gap:30px}#grid{display:grid;background:#17272c;gap:1px;border:7px solid #17272c;border-radius:9px;width:100%;max-width:650px}.cell{position:relative;aspect-ratio:1;background:var(--paper);min-width:0}.cell input{width:100%;height:100%;padding:15% 0 0;text-align:center;border:none;border-radius:0;font-size:clamp(13px,2.4vw,26px);font-weight:500;text-transform:uppercase;background:transparent}.cell small{position:absolute;left:3px;top:0;font-size:clamp(7px,1.1vw,11px);pointer-events:none}.cell.selected{background:#d9e9ec}.cell:focus-within{background:#92c6d9}.cell.wrong{box-shadow:inset 0 0 0 2px #b7553d}.cell.correct{background:#dae9ce}.black{background:#17272c}.clues{display:grid;grid-template-columns:1fr 1fr;gap:20px;background:var(--paper);border-radius:15px;padding:20px;align-content:start}.clues h2{font:600 14px system-ui;margin:4px 0 18px}.clues ol{list-style:none;padding:0;margin:0}.clues button{border:0;border-radius:5px;text-align:left;font-size:14px;line-height:1.5;padding:7px 5px;margin:0 0 5px;width:100%}.clues button.selected{background:#d9e9ec}.active-clue{min-height:48px;background:#e2e9e2;border-radius:8px;padding:10px 14px;margin-bottom:12px;font-size:14px}#status,#error{font-size:14px;color:var(--blue)}footer{max-width:1100px;margin:55px auto 25px;padding:0 25px;color:var(--muted);font-size:12px}footer span{margin:0 10px}[hidden]{display:none!important}@media(max-width:720px){header{padding:17px 20px}main{padding:0 16px;margin-top:30px}.editor-grid,.puzzle-layout{grid-template-columns:1fr;gap:22px}.paper{padding:18px}.editor-grid aside{padding:0 8px}.mini-grid{display:none}.puzzle-head h1{font-size:34px}.clues{gap:14px;padding:16px}.cell input{font-size:clamp(12px,4vw,24px)}.cell small{font-size:8px}.toolbar button{padding:10px 13px}.puzzle-layout{gap:10px}}


/* Bound unusually tall desktop grids without shrinking the mobile layout. */
@media(min-width:721px){#grid{max-width:min(650px,var(--tall-grid-width,650px))}}