:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#193546;background:#f8f7f2;font-synthesis:none;-webkit-text-size-adjust:100%}
*{box-sizing:border-box}html,body{margin:0;min-width:0;width:100%;min-height:100%;overflow-x:hidden}button,select{font:inherit}button{touch-action:manipulation;cursor:pointer}button:focus-visible,select:focus-visible{outline:3px solid #1677ad;outline-offset:1px}
.app{width:100%;max-width:560px;min-height:100dvh;margin:auto;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 8px) 6px calc(env(safe-area-inset-bottom) + 8px)}
.status{display:flex;align-items:center;gap:15px;justify-content:flex-end;color:#617582;font-size:12px;padding:8px 5px}.status strong{margin-right:auto;color:#193546;font-size:14px}.status span b{display:block;color:#193546;font-size:15px;text-align:center;font-variant-numeric:tabular-nums}
.breathing-room{flex:1;min-height:20px}.play-area{width:100%;margin-top:auto}.controls{display:flex;align-items:center;gap:7px;margin-bottom:7px}.controls button{min-height:44px;padding:8px 12px;border:1px solid #c2d2db;border-radius:11px;background:white;color:#24566f;font-weight:700}.controls .check{background:#e1f1f8;border-color:#a4c9da}.flex-space{flex:1}.cage-info{min-height:24px;color:#385f72;font-size:12px;font-weight:700;padding:3px 5px}
.board-wrap{position:relative;width:100%;aspect-ratio:1;border:2px solid #193747;background:white}.board{position:absolute;inset:0;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));grid-template-rows:repeat(9,minmax(0,1fr));width:100%;height:100%}.board{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.cell{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;padding:0;border:0;border-right:1px solid #d0dce2;border-bottom:1px solid #d0dce2;border-radius:0;background:white;color:#173748}.cell.cage-selected{background:#e7f3f9}.cell.multi-selected{background:#c4e8f5;box-shadow:inset 0 0 0 2px #247b9d}.cell.multi-selected.selected{background:#a7d7eb;box-shadow:inset 0 0 0 3px #135c80}.cell.selected{background:#b4e2f5;box-shadow:inset 0 0 0 2px #1378a8;z-index:2}.cell.incorrect{background:#ffd4d0}.cell .sum{position:absolute;top:1px;left:2px;font-size:clamp(12px,3vw,14px);font-weight:800;line-height:1;z-index:3;background:rgba(255,255,255,.88);padding:1px}.cell .value{font-size:clamp(19px,6vw,32px);font-weight:650;line-height:1;padding-top:8px}.cell .notes{position:absolute;top:13px;left:2px;right:2px;bottom:2px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);font-size:clamp(8px,2.1vw,11px);font-weight:700;color:#216687}.cell .notes span{display:flex;align-items:center;justify-content:center;line-height:1}.cage-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.pad[hidden],.completion[hidden],.fatal[hidden],.hide-errors[hidden]{display:none}.pad{position:fixed;z-index:100;width:182px;padding:8px;background:#fff;border:2px solid #32657c;border-radius:15px;box-shadow:0 7px 25px #19374745;touch-action:manipulation;overflow:visible}.pad-tools button[hidden]{display:none}.digit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.digit-grid button{min-width:0;height:48px;background:#eef5f8;border:1px solid #cbdce4;border-radius:9px;color:#194a63;font-size:23px;font-weight:700}.digit-grid button.active{background:#c5e8f7;border-color:#317ea1}.pad-tools{display:flex;gap:4px;margin-top:7px}.pad-tools button{height:44px;flex:1;min-width:0;border:1px solid #cbdce4;border-radius:8px;background:#fff;color:#194a63;font-size:12px;font-weight:750}.pad-tools button[aria-pressed="true"]{background:#d2ebf7}
.completion{margin:9px 0;background:#e1f5e8;border-radius:8px;padding:10px}.fatal{margin:10px 0;color:#8c2222;font-weight:700}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
dialog{max-width:min(360px,calc(100vw - 30px));border:1px solid #a8c3d0;border-radius:14px;padding:22px;color:#193546;box-shadow:0 15px 50px #0004}dialog::backdrop{background:#11273355}dialog h2{margin:0;font-size:21px}dialog .hint{color:#667e8a;font-size:13px}.dialog-buttons{display:flex;gap:8px;flex-wrap:wrap}.dialog-buttons button{border:1px solid #b9ced7;border-radius:9px;background:#e9f4fa;padding:9px 12px;font-weight:700}.hide-errors{position:fixed;right:72px;top:calc(env(safe-area-inset-top) + 10px);z-index:30;border:1px solid #d0a9a9;border-radius:9px;background:#ffe5e3;padding:10px;font-weight:700}
@media(min-width:600px){.app{padding-left:10px;padding-right:10px}.breathing-room{min-height:30px}}
@media(max-height:600px){.breathing-room{flex:0 0 8px}.app{min-height:100dvh}}
.save-warning{margin:4px 5px;padding:8px;border:1px solid #ad7636;border-radius:8px;background:#fff2d9;color:#694316;font-size:13px}

/* Reserve separate space for larger cage sums, including nine-note cells. */
.cell.has-sum{--sum-space:17px}
.cell.cage-selected .sum{font-size:clamp(16px,4vw,19px);color:#102c3c;background:#fff}
.cell.has-sum .notes{top:var(--sum-space)}

/* Resting labels sit inside the upper-left cage frame. Focus grows upward
   from that same bottom edge, without moving committed digits. */
.cell .sum{top:6px;left:5px;right:auto;bottom:auto;line-height:.7;padding:0;white-space:nowrap}
.cell.cage-selected .sum{top:auto;bottom:calc(100% - (6px + clamp(8.4px,2.1vw,9.8px)));line-height:1;padding:1px}
.cell.has-sum{overflow:visible;z-index:auto}
.cell.cage-selected .sum{z-index:6}

/* Keep dense notes above a sum legible when upward enlargement has no room. */
.cell.cage-selected.sum-constrained .sum{font-size:clamp(12px,3vw,14px)}
.cell.sum-clearance .notes{bottom:4px}

.puzzle-navigation{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:0 5px}.puzzle-navigation button,.puzzle-navigation select{min-height:44px;padding:5px 8px;border:1px solid #bdcbd2;border-radius:9px;background:white;color:#193747;font-size:12px;font-weight:700}.puzzle-navigation label{flex:1}.puzzle-navigation select{width:100%}.puzzle-picker{max-width:48%}.puzzle-picker select{max-width:100%;font-size:12px}.tier-progress{font-size:12px;font-weight:700;padding:4px 5px}.option{display:flex;gap:8px;align-items:center;min-height:44px}.browse-list{display:grid;gap:6px;margin:8px 0;max-height:50dvh;overflow:auto}.browse-list button{text-align:left;min-height:48px;padding:8px;border:1px solid #bdcbd2;border-radius:8px;background:#fff;color:#193747;font-weight:700}.browse-list small{display:block;font-weight:400;margin-top:3px}dialog{max-height:85dvh;overflow:auto}dialog button{min-height:44px}dialog form{margin-top:8px}dialog select{min-height:44px;max-width:100%}

.completion-check{font-size:32px;color:#24566f}.primary{background:#24566f!important;color:white!important}.completion-check{animation:quiet-finish .45s ease-out}@keyframes quiet-finish{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.completion-check{animation:none}}

/* Theme changes affect colors and upper-screen art only, never cell geometry. */
:root{--page:#f8f7f2;--board:#fff;--ink:#193546;--muted:#385f72;--note:#216687;--grid:#d0dce2;--house:#193747;--cage:#48677b;--accent:#24566f;--primary-ink:#fff;--panel:#fff;--border:#a8c3d0;--selected:#b4e2f5;--cage-selected:#e7f3f9;--multi:#c4e8f5;--progress-done:#24566f;--progress-stroke:#24566f;--progress-check:#fff}
:root[data-theme="book"]{--page:#f4ebd9;--board:#fff9ee;--ink:#342e28;--muted:#635846;--note:#59432a;--grid:#b7ab97;--house:#342e28;--cage:#665d51;--accent:#795c3a;--panel:#fff9ee;--border:#9b876b;--selected:#e5d2ab;--cage-selected:#f0e3ca;--multi:#dfc498;--progress-done:#795c3a;--progress-stroke:#76593a}
:root[data-theme="landscape"]{--page:#e6f0f0;--board:#fff;--ink:#173e4b;--muted:#325964;--note:#216687;--house:#173e4b;--cage:#48677b;--accent:#1e6883;--panel:#fff;--selected:#b4e2f5;--cage-selected:#dfeef1;--multi:#c4e8f5;--progress-done:#2d7180;--progress-stroke:#245c62}
:root[data-theme="studio"]{--page:#0e293d;--board:#18384c;--ink:#dceef4;--muted:#bed2de;--note:#b7d7e9;--grid:#3e6379;--house:#dceef4;--cage:#9eb7c5;--accent:#ddbe78;--primary-ink:#172e3c;--panel:#18384c;--border:#9eb7c5;--selected:#315a70;--cage-selected:#24485f;--multi:#396579;--progress-done:#e3bd69;--progress-stroke:#c8e4ef;--progress-check:#122e43}
html,body{background:var(--page);color:var(--ink)}.brand small,.status,.hint,.cage-info,.tier-progress{color:var(--muted)}.board-wrap{border-color:var(--house);background:var(--board)}.cell{background:var(--board);color:var(--ink);border-color:var(--grid)}.cell.cage-selected{background:var(--cage-selected)}.cell.multi-selected{background:var(--multi)}.cell.selected,.cell.multi-selected.selected{background:var(--selected)}.cell .sum,.cell.cage-selected .sum{background:var(--board);color:var(--ink)}.cell .notes{color:var(--note)}#cage-lines path:first-child{stroke:var(--cage)}#cage-lines path:last-child{stroke:var(--house)}
.controls button,.controls .check,.puzzle-picker select,.puzzle-navigation button,.puzzle-navigation select,.browse-list button,dialog,dialog button,dialog select,.pad,.pad-tools button,.digit-grid button{background:var(--panel);color:var(--ink);border-color:var(--border)}.controls .check,.digit-grid button{background:var(--cage-selected)}.digit-grid button.active,.pad-tools button[aria-pressed="true"]{background:var(--selected);border-color:var(--accent)}.primary{background:var(--accent)!important;color:var(--primary-ink)!important}.completion-check{color:var(--accent)}
.cell.incorrect{background:#ffd4d0;color:#752a1c;box-shadow:inset 0 0 0 2px #9b4032}.cell.incorrect .sum{background:#ffd4d0;color:#752a1c}.cell.incorrect .notes{color:#752a1c}
.theme-scene{height:40px;margin:3px 5px;overflow:hidden;border-radius:8px}.theme-scene img{width:100%;height:100%;object-fit:cover;object-position:center 65%}.progress-visual{height:44px;margin:3px 5px}.progress-visual svg,[data-tier-art] svg{width:100%;height:100%;max-height:70px}.theme-scene[hidden],.progress-visual[hidden]{display:none}[data-motion="off"] .completion-check{animation:none}@media(max-height:650px){.theme-scene,.progress-visual{display:none}}

.cell.selected,.cell.multi-selected{box-shadow:inset 0 0 0 2px var(--accent)}.cell.multi-selected.selected{box-shadow:inset 0 0 0 3px var(--accent)}button:focus-visible,select:focus-visible{outline-color:var(--accent)}
.status strong,.status span b{color:var(--ink)}dialog .hint{color:var(--muted)}.hide-errors{color:#752a1c}:root[data-theme="studio"] .cell.incorrect{background:#5b2330;color:#fff4f4;box-shadow:inset 0 0 0 2px #ffb4a3}:root[data-theme="studio"] .cell.incorrect .sum{background:#5b2330;color:#fff4f4}:root[data-theme="studio"] .cell.incorrect .notes{color:#fff4f4}

/* Header v2: static text-free art; identical geometry in every theme. */
.menu-actions{display:grid;gap:8px}.menu-actions button{text-align:left}.status{flex-wrap:wrap;padding:12px 0}.option select{flex:1;min-width:0;width:auto}
:root[data-theme="book"]{--page:#f8f1e5;--ink:#26302f;--muted:#485c59;--panel:#fff9f0;--border:#806f56;--accent:#466d5b;--primary-ink:#fff}
:root[data-theme="landscape"]{--page:#eaf5f3;--ink:#173a47;--muted:#3b6170;--panel:#f6fcfa;--border:#4b8782;--accent:#176b73;--primary-ink:#fff}
:root[data-theme="studio"]{--page:#0d2535;--ink:#f6fafc;--muted:#d8e8ef;--panel:#173b50;--border:#7697a8;--accent:#e3bf7d;--primary-ink:#183445}
button,select,option{background:var(--panel);color:var(--ink);border:1px solid var(--border)}
button:not(.cell),select{min-height:44px;border-radius:9px;padding:8px 12px}
dialog{background:var(--panel);color:var(--ink);border-color:var(--border);width:min(380px,calc(100vw - 24px));max-height:85dvh}
dialog .hint,dialog small,dialog label{color:var(--muted)}dialog select,dialog option{background:var(--panel);color:var(--ink);border-color:var(--border)}
button:disabled{opacity:1;color:var(--muted);background:var(--panel);border-color:var(--border);cursor:default}
button:not(.cell):hover{box-shadow:inset 0 0 0 1px var(--border)}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
:root{--board:#fff;--note:#245a77;--grid:#d0dce2;--house:#1e4255;--cage:#345467;--selected:#b4e2f5;--cage-selected:#e7f3f9;--multi:#c4e8f5}
:root[data-theme]{--board:#fff;--note:#245a77;--grid:#d0dce2;--house:#1e4255;--cage:#345467;--selected:#b4e2f5;--cage-selected:#e7f3f9;--multi:#c4e8f5}
.cell,.cell .value{color:#183445}.cell .sum,.cell.cage-selected .sum{color:#345467;background:#fff}.cell .notes{color:#245a77}
.cell.selected,.cell.multi-selected{box-shadow:inset 0 0 0 2px #247b9d}.cell.multi-selected.selected{box-shadow:inset 0 0 0 3px #135c80}
.cell.incorrect,:root[data-theme="studio"] .cell.incorrect{background:#ffd4d0;color:#752a1c;box-shadow:inset 0 0 0 2px #9b4032}.cell.incorrect .value,.cell.incorrect .sum,.cell.incorrect .notes,:root[data-theme="studio"] .cell.incorrect .sum,:root[data-theme="studio"] .cell.incorrect .notes{color:#752a1c}.cell.incorrect .sum,:root[data-theme="studio"] .cell.incorrect .sum{background:#ffd4d0}
.pad{--ink:#183445;--muted:#245a77;--panel:#fff;--border:#32657c;--accent:#247b9d;--cage-selected:#eef5f8;--selected:#c5e8f7;color:var(--ink);background:#fff}
.pad button{padding:0}.controls button:disabled{color:var(--muted)}.cage-info:empty{visibility:hidden}.progress-visual{display:none!important}[data-tier-art]{height:70px;margin:10px 0}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}[data-motion="off"] *,[data-motion="off"] *::before,[data-motion="off"] *::after{animation:none!important;transition:none!important}
/* Override legacy class-specific button defaults on themed surfaces. */
dialog .dialog-buttons button,dialog .browse-list button,dialog form button,.header button{background:var(--panel);color:var(--ink);border:1px solid var(--border)}
:root:not([data-theme]),:root[data-theme="none"]{--border:#667f8a}
.controls .check{background:var(--panel);color:var(--ink);border-color:var(--border)}
dialog select{appearance:none;-webkit-appearance:none;height:44px;padding:8px 12px}
button:not(.cell){min-width:44px}

/* Quiet Grove identity retains the same header and board dimensions. */
:root[data-theme="landscape"]{--page:#f6f1e7;--ink:#24383c;--muted:#425d60;--panel:#fffaf0;--border:#687e78;--accent:#41645c;--primary-ink:#fff}

/* Playing view is artwork first; identity and navigation live outside the banner. */
#menu-dialog #difficulty-open{position:static;max-width:none;border-radius:9px;padding:8px 12px}
#menu-dialog #tier-progress{display:block;font-size:12px;margin-top:4px;color:var(--muted)}

/* Independent portrait artwork, overlay controls and opaque playing surface. */
body{position:relative;isolation:isolate;min-height:100dvh}
.theme-background{position:absolute;inset:0;z-index:0;pointer-events:none;user-select:none;background-size:cover;background-position:center top;background-repeat:no-repeat}
.app{position:relative;z-index:1;background:transparent}
.overlay-controls{display:flex;align-items:center;gap:10px;flex:none;min-height:56px;padding:6px 5px;background:none;border:0;border-radius:0}
.overlay-controls button{background:var(--panel);color:var(--ink);border:1px solid var(--border);min-height:44px}
#difficulty-toggle{border-radius:24px;padding:8px 14px;font-weight:700}
.overlay-controls #more{margin-left:auto;width:44px;height:44px;padding:0;border-radius:50%;font-size:25px}
.board-wrap{box-shadow:0 4px 16px #10273324}
.cage-info:not(:empty){display:table;background:var(--panel);color:var(--ink);border-radius:5px;margin-bottom:2px;min-height:22px}

/* One-handed layout: center the full-width board; keep the dock in flow below it. */
:root{--grid-offset:0px;--board-size:min(calc(100vw - 12px),548px)}
:root[data-grid-position="higher"]{--grid-offset:-56px}:root[data-grid-position="lower"]{--grid-offset:56px}
.breathing-room{flex:none;min-height:0;height:max(12px,calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--board-size))/2 - 64px + var(--grid-offset)))}
.play-area{margin-top:0}.bottom-room{flex:1;min-height:12px}.cage-info{height:24px;min-height:24px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.cage-info:not(:empty){display:block;width:fit-content;margin-bottom:0;height:24px;min-height:24px}
.play-dock{display:flex;width:fit-content;max-width:100%;justify-content:center;gap:12px;margin:12px auto 0;padding:8px 12px;border-radius:28px;background:#edf3efed;box-shadow:0 3px 14px #10273318}
.play-dock button{width:48px;height:48px;min-height:48px;flex:none;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:#f8fcf9;color:#245569;font-weight:700}
.play-dock button svg{width:24px;height:24px;pointer-events:none}.play-dock button:disabled{opacity:1;background:#e1eae5;color:#4f6570;border:0}
:root[data-theme="book"] .play-dock{background:#f2e8d6ee}:root[data-theme="book"] .play-dock button{background:#fff9ee;color:#443e32}:root[data-theme="book"] .play-dock button:disabled{background:#e9deca;color:#645a49}
:root[data-theme="studio"] .play-dock{background:#173b50e8;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
:root[data-theme="studio"] .play-dock button{background:#2b5368;color:#f6fafc}:root[data-theme="studio"] .play-dock button:disabled{background:#234456;color:#c9dce5}
.controls.play-dock button:hover{box-shadow:inset 0 0 0 2px currentColor}
@media(min-width:600px){:root{--board-size:540px}}
/* Library navigation is a separate screen; Play retains the centered board. */
.library-screen[hidden]{display:none!important}.app:not([data-screen="play"]) .overlay-controls,.app:not([data-screen="play"]) .play-area,.app:not([data-screen="play"]) .breathing-room,.app:not([data-screen="play"]) .bottom-room{display:none}
.library-screen{position:relative;border-radius:20px;min-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);padding:12px;background:var(--ek-bg);color:var(--ek-ink);width:100%;}
.library-top{display:flex;align-items:center;gap:10px}.library-top h1{font-size:22px;margin:0;flex:1;line-height:1.2}.library-top button{border-radius:50%;background:var(--ek-card);color:var(--ek-ink);min-width:44px;min-height:44px;border-color:var(--ek-border)}
.library-art{display:block;aspect-ratio:2.1;width:100%;max-height:180px;object-fit:cover;pointer-events:none;border-radius:15px;margin:14px 0}
.library-context{color:var(--ek-muted);font-size:14px}.resume-card{padding:16px;margin-bottom:16px}.resume-card h2{font-size:19px;margin:0}.resume-card p{color:var(--ek-muted)}
.collection-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}.collection-cards button{text-align:left;min-height:104px;padding:14px;border-radius:18px;background:var(--ek-card);color:var(--ek-ink);border:1px solid var(--ek-border)}.collection-cards strong,.collection-cards span{display:block}.collection-cards span{font-size:13px;margin:8px 0;color:var(--ek-muted)}progress{width:100%;height:5px;accent-color:var(--ek-accent)}
.library-screen .ek-primary,#puzzle-detail-dialog .ek-primary{background:var(--ek-accent);color:var(--ek-accent-ink);border:0;min-height:48px;padding:10px 18px;border-radius:24px;font-weight:700}.start-collection{width:100%}.quiet-link{background:transparent;color:var(--ek-ink);border:0;border-radius:18px;min-height:44px;padding:8px}
.collection-browser{margin-top:20px}.collection-browser summary{min-height:44px;cursor:pointer;font-weight:700}.puzzle-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.puzzle-tiles button{min-height:64px;min-width:0;background:var(--ek-card);color:var(--ek-ink);border:1px solid var(--ek-border);border-radius:12px;padding:6px;display:flex;align-items:center;flex-direction:column;gap:4px}.puzzle-tiles img{width:20px;height:20px;pointer-events:none}.puzzle-tiles button:focus-visible{outline:3px solid var(--ek-accent)}
.completion-art{display:block;width:100%;aspect-ratio:2.1;object-fit:cover;pointer-events:none;border-radius:12px;margin-bottom:12px}#completion-dialog{background:var(--ek-card);color:var(--ek-ink)}
.library-screen button:focus-visible{outline-color:var(--ek-accent)}

/* Keep supplied semantic palettes, strengthening interactive edges on light cards. */
:root{--ek-border:#607e7c}:root[data-theme="book"]{--ek-border:#8f795d}:root[data-theme="studio"]{--ek-border:#8aadb9}
.puzzle-tiles img{background:#fff;border-radius:50%;padding:1px}
:root{--ek-track:#c6d5d0}:root[data-theme="book"]{--ek-track:#dfd2ba}:root[data-theme="studio"]{--ek-track:#426173}
.library-screen progress{appearance:none;-webkit-appearance:none;border:0;border-radius:4px;background:var(--ek-track);color:var(--ek-accent);overflow:hidden}
.library-screen progress::-webkit-progress-bar{background:var(--ek-track)}.library-screen progress::-webkit-progress-value{background:var(--ek-accent)}.library-screen progress::-moz-progress-bar{background:var(--ek-accent)}

.library-top button svg{width:22px;height:22px;display:block;pointer-events:none}#completion-library{display:inline-flex;align-items:center;gap:7px}#completion-library svg{width:20px;height:20px;pointer-events:none}
:root[data-theme="none"]{--ek-bg:var(--page);--ek-card:var(--panel);--ek-ink:var(--ink);--ek-muted:var(--muted)}
[data-theme="none"] .library-art,[data-theme="none"] .completion-art{display:none}

.completion-art.completion-check{animation-duration:.25s}

#redo{display:flex;align-items:center;gap:8px}#redo svg{width:22px;height:22px;flex:none;pointer-events:none}
#restart-dialog button{border-radius:24px;padding:10px 16px}#restart-confirm{background:var(--accent);color:var(--primary-ink);border:1px solid var(--border)}
#restart-error{color:var(--ink);font-weight:700}button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.restart-notice{position:fixed;top:calc(env(safe-area-inset-top) + 54px);left:50%;transform:translateX(-50%);z-index:45;max-width:calc(100vw - 24px);width:max-content;background:var(--panel);color:var(--ink);border-radius:16px;padding:8px 12px;font-size:13px;pointer-events:none;box-shadow:0 2px 8px #0002}
#menu-dialog #redo:disabled{background:var(--panel);color:var(--muted);border-style:dashed;cursor:default;opacity:1}

/* Frosted surface only: puzzle digits never show through digit targets. */
.pad{--frost:rgba(218,234,246,.85);background:var(--frost);backdrop-filter:blur(8px) saturate(140%);-webkit-backdrop-filter:blur(8px) saturate(140%);box-shadow:inset 0 1px 0 #ffffffd9,0 7px 25px #19374745}
[data-theme="book"] .pad{--frost:rgba(244,231,207,.85)}
[data-theme="landscape"] .pad{--frost:rgba(219,237,231,.85)}
.pad .digit-grid button,.pad .pad-tools button{background:#f1f6f9;color:#183445;opacity:1}
.pad .digit-grid button.active,.pad .pad-tools button[aria-pressed="true"]{background:#c5e8f7;color:#183445}.pad .digit-grid button.partial{border-style:dashed;border-color:#317ea1}
.keypad-settings .option{justify-content:space-between;gap:12px}.keypad-settings input[type="number"]{width:76px;min-height:44px;border:1px solid var(--border);border-radius:9px;padding:8px;background:var(--panel);color:var(--ink)}
/* Tighten spacing, never touch targets, when the clear region is short. */
.pad.compact .digit-grid button{height:44px;min-height:44px}
.pad.compact{padding:3px 3px 0;border-width:1px}.pad.compact .digit-grid{gap:1px}.pad.compact .pad-tools{gap:1px;margin-top:1px}

/* Hint demonstration outlines add information without replacing cell contents. */
.cell.hint-support{outline:2px dashed #90641f;outline-offset:-5px}.cell.hint-target{outline:3px double #805713;outline-offset:-5px}
#hint-dialog{width:min(380px,calc(100vw - 24px));max-height:85dvh}#hint-dialog .dialog-buttons{margin-top:12px}#hint-dialog h3{font-size:17px}#hint-evidence{font-size:14px;line-height:1.45}#hint-apply{background:var(--accent);color:var(--primary-ink)}
#hint-benchmark-result{font-size:12px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}

/* Requested teaching is a separate document layer; it never covers or resizes the board. */
#hint-dialog.marlow-panel{position:absolute;inset:auto;left:50%;transform:translateX(-50%);margin:0;z-index:25;width:min(420px,calc(100vw - 20px));max-width:calc(100vw - 20px);padding:14px;box-sizing:border-box;background:var(--panel);color:var(--ink);border:1px solid var(--border);border-radius:18px;box-shadow:0 5px 24px #10273330;overflow:visible}
.marlow-header{display:flex;align-items:center;gap:10px}.marlow-header img{width:64px;height:64px;object-fit:contain;flex:none}.marlow-header h2{font-size:18px;margin:2px 0}.marlow-header h3{font-size:15px;margin:3px 0}.marlow-header small{font-size:12px;color:var(--muted)}#hint-text{font-size:15px;line-height:1.4;margin:10px 0}.marlow-panel .dialog-buttons{gap:6px}.marlow-panel button{min-height:44px;border:1px solid var(--border);border-radius:14px;background:var(--panel);color:var(--ink);padding:8px 12px;font-weight:650}.marlow-panel form{margin:0}#hint-feedback{font-size:13px;margin-top:8px}#hint-feedback summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
#lesson-dialog{width:min(560px,calc(100vw - 12px));padding:0;box-sizing:border-box}#lesson-dialog>h2{padding:12px 12px 0}#lesson-content>p,#lesson-work,#lesson-practice-area,.lesson-figure figcaption{margin-left:12px;margin-right:12px}#lesson-content>.dialog-buttons,#lesson-dialog>.dialog-buttons{margin:8px 12px 12px}.lesson-surface{width:100%;aspect-ratio:1;container-type:inline-size}.lesson-board .notes{font-size:clamp(8px,calc(4.8889cqw - 10.1334px),10.9px)}.lesson-board .cell{cursor:default;touch-action:auto}.lesson-board .sum{color:#345467!important;background:#fff!important}.lesson-board .value{color:#183445!important}.lesson-board .lesson-support{background:#e7f3f9;outline:1px dashed #32657c;outline-offset:-3px}.lesson-board[data-phase="reason"] .lesson-support{background:#fff0ce}.lesson-board .lesson-target,.lesson-board .lesson-changed{background:#b4e2f5;box-shadow:inset 0 0 0 2px #1378a8}.lesson-board .notes .lesson-removed{color:#8f3023;text-decoration:line-through;text-decoration-thickness:2px;background:#ffe5df}.lesson-figure{margin:10px 0}.lesson-figure figcaption{font-size:12px;line-height:1.4;margin-top:6px;color:var(--muted)}.practice-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.practice-choices button{min-width:44px;min-height:44px}#lesson-dialog button:disabled{opacity:1;color:var(--muted);border-style:dashed}

/* Keep teaching overflow on the document, avoiding a second body scroll container. */
body{overflow-x:clip}

#hint-dialog.marlow-panel{padding:12px}.marlow-header img{width:48px;height:48px}#hint-dialog .dialog-buttons{margin-top:0}

/* Guidance uses only the existing space above the playing surface. */
#hint-dialog.marlow-panel{display:none;flex-direction:column;padding:10px;overflow:hidden;gap:6px}
#hint-dialog.marlow-panel[open]{display:flex}.hint-guidance{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}.hint-actions{flex:none;align-items:center;margin:0!important;gap:4px!important}.hint-actions #marlow-action-portrait,.hint-actions #hint-action-stage{display:none}.app[data-hint-open="true"] .overlay-controls #more{visibility:hidden}
#hint-dialog[data-compact="true"]{padding:4px;gap:2px;border-radius:12px}#hint-dialog[data-compact="true"] .marlow-header img,#hint-dialog[data-compact="true"] .marlow-header small,#hint-dialog[data-compact="true"] #hint-stage{display:none}#hint-dialog[data-compact="true"] .marlow-header{display:block}#hint-dialog[data-compact="true"] .marlow-header h3{font-size:13px;margin:0 0 3px}#hint-dialog[data-compact="true"] #hint-text{font-size:15px;line-height:1.25;margin:0}#hint-dialog[data-compact="true"][data-stage="5"] .marlow-header{display:none}#hint-dialog[data-compact="true"] .hint-actions{flex-wrap:nowrap}#hint-dialog[data-compact="true"] .hint-actions button{min-height:44px;padding:4px 8px;font-size:14px;flex:none}#hint-dialog[data-compact="true"] .hint-actions #marlow-action-portrait{display:block;width:28px;height:28px;object-fit:contain;flex:none}#hint-dialog[data-compact="true"] #hint-action-stage{display:block;font-size:11px;white-space:nowrap;flex:none}
#hint-dialog[data-compact="true"] #hint-previous,#hint-dialog[data-compact="true"] #hint-next,#hint-dialog[data-compact="true"] #hint-lesson,#hint-dialog[data-compact="true"] form button{width:44px;padding:0}#hint-dialog[data-compact="true"] #hint-previous span,#hint-dialog[data-compact="true"] #hint-next span,#hint-dialog[data-compact="true"] #hint-lesson span,#hint-dialog[data-compact="true"] form button span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#hint-dialog[data-compact="true"] #hint-previous::before{content:'←';font-size:22px}#hint-dialog[data-compact="true"] #hint-next::before{content:'→';font-size:22px}#hint-dialog[data-compact="true"] #hint-lesson::before{content:'▤';font-size:22px}#hint-dialog[data-compact="true"] form button::before{content:'×';font-size:24px}

#hint-dialog[data-compact="true"] #hint-action-stage{font-size:12px}#hint-dialog[data-compact="true"] #hint-lesson{width:auto;padding:4px 8px}#hint-dialog[data-compact="true"] #hint-lesson::before{content:'Learn';font-size:14px}

/* Marlow is a conversation, in the spare space above the fixed playing surface. */
#hint-dialog.marlow-panel{--hint-frost:rgba(255,249,240,.93);background:var(--hint-frost);backdrop-filter:blur(12px) saturate(115%);-webkit-backdrop-filter:blur(12px) saturate(115%);opacity:1;width:min(350px,calc(100vw - 20px));border:1px solid color-mix(in srgb,var(--border) 45%,transparent);border-radius:24px 24px 24px 8px;box-shadow:0 6px 20px #10273324,inset 0 1px 0 #ffffff30;padding:10px;gap:6px}
[data-theme="landscape"] #hint-dialog{--hint-frost:rgba(255,250,240,.93)}[data-theme="studio"] #hint-dialog{--hint-frost:rgba(23,59,80,.93)}
#hint-dialog[data-side="left"]{left:10px;transform:none}#hint-dialog[data-side="right"]{left:auto;right:10px;transform:none;border-radius:24px 24px 8px 24px}
#hint-dialog[data-expanded="true"]{width:min(420px,calc(100vw - 20px))}
.marlow-header img{width:40px;height:40px}.marlow-header h2{font-size:15px;line-height:1.2;margin:2px 0}.marlow-header small{font-size:11px}.marlow-header h3{font-size:14px}#hint-dialog #hint-text{margin:6px 0;font-size:15px;line-height:1.35;color:var(--ink)}
.hint-guidance{flex:0 1 auto}.hint-actions{justify-content:flex-end}.hint-actions button{padding:6px 10px;border-radius:18px}
#hint-back,#hint-expand,#hint-lesson{width:44px;min-width:44px;padding:0!important}
#hint-back span,#hint-expand span,#hint-lesson span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#hint-back::before{content:'‹';font-size:26px}#hint-expand::before{content:'↕';font-size:22px}#hint-lesson::before{content:'▤';font-size:22px}
#hint-dialog[data-compact="true"]{width:min(420px,calc(100vw - 20px));padding:4px;gap:2px;border-radius:18px 18px 18px 6px}
#hint-dialog[data-compact="true"] #hint-text{margin:0;line-height:1.25}
#hint-dialog[data-compact="true"] #hint-lesson{width:44px;padding:0}#hint-dialog[data-compact="true"] #hint-lesson::before{content:'▤';font-size:22px}
#hint-dialog[data-stage="5"] #hint-action-stage{display:none}
.menu-group{display:grid;gap:6px}.menu-group h3{font-size:12px;letter-spacing:.04em;margin:8px 0 2px;color:var(--muted)}.menu-group button{width:100%;border-radius:16px}
#menu-dialog{border-radius:24px;padding:16px}#menu-dialog h2{font-size:20px;margin:0}.marlow-invitation h3{margin-top:0}#hint-open{font-weight:700;background:var(--accent);color:var(--primary-ink)}
#hint-dialog .hint-actions #hint-previous,#hint-dialog .hint-actions #hint-next{width:44px;padding:0}
#hint-dialog #hint-previous span,#hint-dialog #hint-next span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#hint-dialog #hint-previous::before{content:'←';font-size:22px}#hint-dialog #hint-next::before{content:'→';font-size:22px}
#hint-dialog[data-stage="5"] #hint-stage{display:none}#hint-dialog[data-stage="5"] #hint-text{margin:3px 0}

/* Hint context replaces the redundant status, retaining its layout space. */
.app[data-hint-open="true"] .cage-info{visibility:hidden}
#hint-dialog .hint-guidance:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* Larger notes retain their 3×3 positions and clear the resting sum label. */
.cell .notes{font-size:clamp(10px,2.65vw,12px);font-weight:750;bottom:3px}
.cell.has-sum{--sum-space:14px}
.cell.sum-clearance .notes{bottom:3px}
/* When the preceding cell has bottom-row notes, keep the sum wholly inside its own cell. */
.cell.cage-selected.sum-constrained .sum{top:6px;bottom:auto;line-height:.7;padding:0}

/* Compact four-icon dock, shared geometry with themed frosted surfaces. */
.play-dock{--dock-surface:rgba(232,242,239,.86);--dock-button:rgba(247,253,251,.94);--dock-line:#587c7940;width:264px;height:60px;gap:12px;padding:6px 12px;border:1px solid #ffffff60;border-radius:32px;background:var(--dock-surface);box-shadow:0 5px 16px #10273320,inset 0 1px 0 #ffffff40;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.controls.play-dock button{position:relative;width:48px;height:48px;min-height:44px;background:var(--dock-button);color:#164c60;border:1px solid #ffffff80;border-radius:50%}
.play-dock button svg{width:25px;height:25px}
.play-dock button+button::before{content:'';position:absolute;left:-7px;top:11px;width:1px;height:24px;background:var(--dock-line);pointer-events:none}
.controls.play-dock #hint-open{background:#f9edce;color:#164c60}
.controls.play-dock button:disabled{background:var(--dock-button);color:#586d73;opacity:1}
:root[data-theme="book"] .play-dock{--dock-surface:rgba(243,234,216,.86);--dock-button:rgba(255,251,242,.95);--dock-line:#7b725a40;background:var(--dock-surface)}
:root[data-theme="studio"] .play-dock{--dock-surface:rgba(23,59,80,.88);--dock-button:rgba(237,249,250,.96);--dock-line:#cee2e450;background:var(--dock-surface)}
:root[data-theme="studio"] .controls.play-dock button{color:#164c60;background:var(--dock-button)}
:root[data-theme="studio"] .controls.play-dock #hint-open{background:#f5e7c2}
:root[data-theme="studio"] .controls.play-dock button:disabled{color:#586d73}
.pad.compact.tight{padding:0;border-width:1px}.pad.compact.tight .digit-grid{gap:0}.pad.compact.tight .pad-tools{margin-top:0;gap:0}
/* A single compact ribbon, wholly above the stationary playing surface. */
#hint-dialog.marlow-panel{left:24px;right:8px;transform:none;width:auto;max-width:none;border-radius:20px;padding:8px 10px 6px 32px;gap:2px;overflow:visible;background:rgba(255,248,232,.95);color:#263f48;box-shadow:0 4px 18px #10273324;display:none}
#hint-dialog.marlow-panel[open]{display:flex}
:root[data-theme="landscape"] #hint-dialog.marlow-panel{background:rgba(237,248,247,.95);color:#173f4c}
:root[data-theme="studio"] #hint-dialog.marlow-panel{background:rgba(20,48,66,.95);color:#fff6e6}
#hint-dialog #marlow-portrait{position:absolute;left:-22px;top:0;width:58px;height:64px;object-fit:contain;pointer-events:none}
#hint-dialog .hint-guidance{flex:1 1 auto;min-height:20px;overflow:auto;overscroll-behavior:contain;background:none;padding:0}
#hint-dialog .marlow-header{display:block}#hint-dialog #hint-stage{display:block;font-size:11px;font-weight:650;margin:0;color:inherit}
#hint-dialog #hint-technique{font-size:13px;margin:2px 0;color:inherit}
#hint-dialog #hint-text{font-size:15px;line-height:1.35;margin:3px 0;color:inherit;opacity:1}
#hint-dialog .hint-stage-navigation,#hint-dialog .hint-demonstration{display:flex;align-items:center;gap:4px;flex:none}
#hint-dialog [hidden]{display:none!important}
#hint-dialog #hint-stage-count{font-size:11px;margin-right:auto;color:inherit}
#hint-dialog button{background:transparent;color:inherit;border:0;min-width:44px;min-height:44px;padding:0;border-radius:50%;font-size:24px}
#hint-dialog #hint-more,#hint-dialog #hint-back{width:44px;font-size:28px}
#hint-dialog #hint-back::before,#hint-dialog #hint-previous::before,#hint-dialog #hint-next::before{content:none}
#hint-dialog #hint-apply{font-size:13px;min-width:64px;border-radius:16px;background:var(--accent);color:var(--primary-ink)}
#hint-dialog #hint-step-count{font-size:11px;margin-right:auto}
#hint-dialog .hint-demonstration{border-top:1px solid var(--border)}
#hint-dialog[data-compact="true"]{padding-top:2px;padding-bottom:2px;gap:0}
#hint-dialog[data-compact="true"] #hint-text{line-height:1.3}
#hint-dialog[data-compact="true"] .hint-stage-navigation,#hint-dialog[data-compact="true"] .hint-demonstration{position:relative}
/* Error and selection paint never owns hit testing; native cell buttons do. */
.cell>* , .cell::before,.cell::after{pointer-events:none}
.cell.incorrect.multi-selected{background:#f1d9d2;outline:3px solid #247b9d;outline-offset:-4px}
.cell.incorrect.multi-selected.selected{outline-color:#135c80}
.cell.incorrect.selected:not(.multi-selected){outline:3px solid #1378a8;outline-offset:-4px}
.app[data-hint-open="true"]~#hide-errors{visibility:hidden}

.timing-stepper{display:flex;align-items:center;gap:4px;flex:none}.timing-stepper button{width:44px;height:44px;min-width:44px;border:1px solid var(--border);border-radius:12px;background:var(--panel);color:var(--ink);font-size:22px}.timing-stepper output{width:54px;text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}.timing-stepper button:disabled{opacity:1;color:var(--muted);border-style:dashed}
.puzzle-tiles button[aria-current="true"]{outline:2px solid var(--ek-accent);outline-offset:2px}.puzzle-tiles small{font-size:10px;line-height:1.1}.collection-browser{padding-bottom:env(safe-area-inset-bottom)}
/* Constrain tracks before sizing glyphs: fractional tracks must not expand to min-content. */
.cell .notes,.cell.has-sum .notes{top:16px;bottom:4.5px;left:5px;right:5px;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));font-size:clamp(8px,calc(4.8889vw - 10.1334px),10.9px);line-height:1}
.cell .notes span{min-width:0;min-height:0;line-height:1}.cell.sum-clearance .notes{bottom:4.5px}

/* Pinch zoom reduces the visual viewport, without reducing touch targets. */
.pad.zoom-narrow{padding:0;border-width:1px}.pad.zoom-narrow .digit-grid{grid-template-columns:repeat(var(--keypad-columns),1fr);gap:0}.pad.zoom-narrow .digit-grid button{min-width:44px}.pad.zoom-narrow .pad-tools{flex-wrap:wrap;gap:0}.pad.zoom-narrow .pad-tools button{min-width:44px;flex-basis:44px}

/* Variant controls and proof roles share geometry across visual themes. */
.variant-switch{display:flex;justify-content:center;gap:8px;margin:8px 0 12px}
.variant-switch button{min-width:100px;min-height:44px;border-radius:24px;color:var(--ink);background:var(--panel)}
.variant-switch button[aria-pressed="true"]{outline:2px solid currentColor;font-weight:750}
.cell.given .value{font-weight:800}
.cell.hint-scope{box-shadow:inset 0 0 0 1px #426a7b}
.cell[data-hint-role="A"]::after,.cell[data-hint-role="B"]::after{content:attr(data-hint-role);position:absolute;bottom:0;right:2px;font-size:10px;font-weight:800;color:#193747;background:#fff}
.notes [data-hint-role="candidate"]{outline:1px solid #193747;border-radius:2px}
.notes [data-hint-role="eliminated"]{text-decoration:line-through double;text-decoration-thickness:1px}
#hint-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
#hint-links line{stroke:#193747;stroke-width:3;opacity:.85}#hint-links .weak{stroke-dasharray:8 6}
#hint-dialog[data-stage="3"] #hint-evidence{display:block}
#hint-dialog .hint-demonstration{margin-top:8px}
#hint-close{font-size:22px}

.cell[data-hint-role]::after{pointer-events:none}
/* Compact ribbons retain their level-two heading for assistive navigation. */
#hint-dialog[data-compact="true"] .marlow-header #hint-stage{display:block}

/* Marlow Manyways Studio: the supplied portrait fills the decorative layer only. */
:root[data-theme="manyways"]{--page:#f5e6cc;--ink:#183e50;--muted:#445b60;--panel:#fff8e9;--border:#75624a;--accent:#245b70;--primary-ink:#fff;--progress-done:#795c3a;--progress-stroke:#76593a;--ek-bg:#f6ead5;--ek-ink:#183e50;--ek-muted:#4c5e60;--ek-card:#fff8e9;--ek-border:#806d51;--ek-accent:#245b70;--ek-accent-ink:#fff;--ek-overlay:#fff8e9;--ek-track:#d9c9ac}
:root[data-theme="manyways"] .play-dock{--dock-surface:rgba(249,239,219,.92);--dock-button:#fffaf0;--dock-line:#7b725a40;background:var(--dock-surface)}
[data-theme="manyways"] .pad{--frost:rgba(249,237,216,.87)}
:root[data-theme="manyways"] #hint-dialog.marlow-panel{background:rgba(255,248,233,.95);color:#183e50}

.studio-return{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);padding:8px;text-underline-offset:3px}.transfer-page{width:min(560px,calc(100% - 32px));margin:32px auto;line-height:1.5}.transfer-page input{display:block;max-width:100%;margin:12px 0;font-size:16px}.transfer-page button{margin:8px 0}.transfer-page a{color:var(--ink)}