@import '../shared/glossary.css';
@font-face{font-family:'Caveat';src:url('../fonts/caveat-digits.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Caveat';src:url('../fonts/caveat-digits-bold.woff2') format('woff2');font-weight:700;font-display:swap}
:root{--page:#f8f8f5;--paper:#fff;--ink:#243531;--muted:#6e7b77;--green:#23695b;--mint:#e6f0eb;--line:#dce2dc;--gold:#f5edcf;--shadow:0 8px 30px #21362b06;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);font-size:15px;font-synthesis:none;text-rendering:optimizeLegibility}
*{box-sizing:border-box}body{margin:0;background:var(--page);line-height:1.5}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.42}button,a{touch-action:manipulation}a{color:var(--green)}button{transition:background .15s,border-color .15s,color .15s}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #38917d;outline-offset:3px}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-weight:550}h1{font-size:38px;letter-spacing:-1.6px;line-height:1.18;margin-bottom:12px}h2{font-size:27px;line-height:1.3;letter-spacing:-.9px;margin-bottom:16px}h3{font-size:16px}p{margin-bottom:16px}svg{flex-shrink:0;vertical-align:middle}[hidden]{display:none!important}.skip-link{position:fixed;top:-100px;left:20px;z-index:110;background:var(--green);color:white;padding:12px}.skip-link:focus{top:10px}
.site-header{height:100px;max-width:1240px;margin:auto;padding:0 40px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:36px}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}.brand-mark{color:var(--green);display:flex;align-items:center;justify-content:center}.brand-name{font-size:23px;font-weight:650;letter-spacing:-1px;line-height:1}.brand-name>span{font-weight:400;color:var(--green)}.brand-name small{font-size:7px;display:block;letter-spacing:1.6px;font-weight:550;color:var(--muted);margin-top:8px}.main-nav{display:flex;align-items:center;gap:8px}.main-nav a{font-size:13px;display:flex;align-items:center;gap:8px;padding:10px 15px;text-decoration:none;color:var(--muted);border-radius:7px}@media(hover:hover){.main-nav a:hover{color:var(--green);background:#eef2ec}}.main-nav a.active{background:var(--mint);color:var(--green);font-weight:600}.header-end{display:flex;align-items:center;gap:12px}#view{max-width:1160px;margin:auto;padding:38px 0 44px;min-height:calc(100svh - 190px);outline:none}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:32px}.eyebrow{font-size:9px;letter-spacing:1.7px;font-weight:650;color:var(--green);margin-bottom:12px;line-height:1.5}.page-heading p{font-size:13px;color:var(--muted);margin-bottom:0}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);border-radius:7px;padding:11px 16px;font-size:12px;font-weight:550;min-height:42px;background:var(--paper);text-decoration:none;color:var(--ink);line-height:1.4}@media(hover:hover){.button:hover{background:#f0f3ed;border-color:#bac9bd}}.button.primary{background:var(--green);border-color:var(--green);color:#fff}@media(hover:hover){.button.primary:hover{background:#195546}}.button.soft{background:var(--mint);border-color:transparent;color:var(--green)}.button.full{width:100%}.button.text{background:none;border-color:transparent;color:var(--green);padding-left:0;padding-right:0}.button.small{padding:8px 11px;min-height:37px;font-size:11px}.danger-text{color:#a34235!important}.button.danger{background:#a34235;color:#fff;border-color:#a34235}
.game-layout{display:grid;grid-template-columns:minmax(0,568px) minmax(280px,360px);gap:70px;align-items:start;justify-content:center}.game-column,.coach-column{min-width:0}.game-topline{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 11px 20px;min-height:28px;font-size:11px}.game-topline>div{display:flex;align-items:center;gap:12px}.difficulty-pill{font-size:10px;line-height:1.4;font-weight:600;color:var(--green);background:var(--mint);padding:5px 10px;border-radius:4px}.game-clock{font-variant-numeric:tabular-nums;color:var(--muted)}.game-clock button{border:0;background:none;display:grid;place-items:center;width:32px;height:32px;border-radius:5px}@media(hover:hover){.game-clock button:hover{background:var(--mint)}}.play-board-shell{display:grid;grid-template-columns:20px minmax(0,1fr);grid-template-rows:18px auto}.board-axis{font-size:9px;color:#87948a;user-select:none;display:grid}.board-axis.top{grid-column:2;grid-template-columns:repeat(9,1fr)}.board-axis.side{grid-row:2;grid-template-rows:repeat(9,1fr)}.board-axis span{display:flex;align-items:center;justify-content:center}.play-grid-wrap{position:relative;grid-column:2;grid-row:2;min-width:0}.play-grid{display:grid;grid-template-columns:repeat(9,1fr);aspect-ratio:1;border:1.5px solid #73877e;border-radius:5px;background:var(--paper);overflow:hidden}.play-cell{position:relative;aspect-ratio:1;border-right:1px solid #e3e8e2;border-bottom:1px solid #e3e8e2;display:flex;align-items:center;justify-content:center;cursor:pointer;min-width:0;outline:none;transition:background .12s}.play-cell:nth-child(9n){border-right:0}.play-cell:nth-child(n+73){border-bottom:0}.play-cell.box-r{border-right:2px solid #a0afa6}.play-cell.box-b{border-bottom:2px solid #a0afa6}.play-cell.peer-cell{background:#f2f5ef}.play-cell.same-value{background:#e1eee5}.play-cell.context-cell{background:#f1f3e7}.play-cell.evidence-cell{background:#fbefc8}.play-cell.end-cell{background:#dbefdf}.play-cell.chosen{background:#daebe3;box-shadow:inset 0 0 0 2px #33745c}.play-cell:focus-visible{outline:none;box-shadow:inset 0 0 0 3px #33745c;z-index:1}.play-cell.error-cell .big-number{color:#b4463e}.play-cell.error-cell{background:#fff0e9}.big-number{font-size:34px;font-weight:450;font-variant-numeric:tabular-nums;line-height:1;user-select:none}.big-number.given{color:var(--ink);font-weight:500}.big-number.entered{color:#287b66}.play-notes{position:absolute;inset:3px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);line-height:1}.note-number{font-size:11px;background:none;border:0;padding:0;color:#677966;display:flex;align-items:center;justify-content:center;line-height:1;border-radius:2px;min-width:0}@media(hover:hover){.note-number:hover{background:#e2e8d7}}.note-number.dim-note{opacity:.45}.note-number.focus-note{color:#0d5a45;font-weight:700;font-size:1.14em}.note-number.picked-note{background:var(--green);color:white}.note-number.erased-note{background:#f5d8ca;color:#9e4a3e;text-decoration:line-through}.play-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}.board-tools{display:flex;gap:10px;justify-content:space-between;margin:13px 0 12px 20px}.board-tools .button{border-color:transparent;background:none;flex:1;font-size:11px;min-height:39px;padding:7px 4px;color:var(--muted)}.board-tools .button.selected{background:var(--mint);color:var(--green)}@media(hover:hover){.board-tools .button:hover{background:var(--mint);color:var(--green)}}.number-pad{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:7px;margin-left:20px}.number-pad button{background:var(--paper);border:1px solid #dce3dc;min-height:61px;border-radius:8px;padding:8px 0 5px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--green);box-shadow:0 1px 1px #24353106}@media(hover:hover){.number-pad button:hover{background:var(--mint);border-color:#aebfb5}}.number-pad button:active{background:#dbeae2;box-shadow:inset 0 1px 2px #24353112}.number-pad b{font-size:27px;line-height:1.1;font-weight:500}.number-pad small{font-size:9px;color:var(--muted);margin-top:5px}.number-pad .digit-complete{opacity:.4}.coach-column{padding-top:38px}.coach-card{padding:0 0 28px;border-bottom:1px solid var(--line)}.coach-card p{font-size:13px;color:var(--muted);line-height:1.85;margin-bottom:24px}.term-chips{display:flex;flex-wrap:wrap;gap:7px}.term-chips button{font-size:10px;color:var(--green);border:1px solid var(--line);background:none;border-radius:4px;padding:7px 9px}@media(hover:hover){.term-chips button:hover{background:var(--mint)}}.term-chips.large button{font-size:12px;padding:10px 12px}.hint-card{animation:appear .2s ease-out}.hint-top{display:flex;align-items:center;justify-content:space-between}.hint-top .eyebrow{margin:0}.hint-top>button{border:0;background:none;font-size:25px;color:var(--muted);padding:4px 9px}.step-dots{display:flex;gap:5px;margin:18px 0 22px}.step-dots i{height:3px;flex:1;border-radius:3px;background:#e0e6db}.step-dots i.done{background:#4d8d71}.step-eyebrow{font-size:9px;color:var(--muted);letter-spacing:1.2px;margin-bottom:10px}.hint-card h2{font-size:25px}.coach-prose{font-size:13px;line-height:1.95;color:#4c6054}.coach-prose p{font-size:13px;color:#4c6054;margin:12px 0;line-height:1.95}.coach-prose b{color:var(--ink)}.coord{border:0;border-bottom:1px dotted #88a895;background:none;color:var(--green);font-family:ui-monospace,monospace;padding:0 2px;white-space:nowrap}.plain-rule{padding:14px;background:#edf2e9;font-size:12px!important;border-radius:5px}.hint-quiz{padding:15px;background:#f2f0df;margin-top:20px;border-radius:5px}.hint-quiz p{font-size:12px;margin-bottom:12px}.quiz-actions{display:flex;gap:7px}.hint-navigation{display:flex;gap:12px;justify-content:space-between;margin-top:24px}.hint-navigation .primary{flex:1}.hint-feedback{padding:13px 15px;font-size:12px;line-height:1.8;background:#eaf2e5;border-left:3px solid #6c9667;margin-top:20px}.paused-board{aspect-ratio:1;border:1.5px solid #73877e;display:grid;place-items:center;background:#edf2e8;border-radius:5px;text-align:center}.paused-board>div{max-width:80%}.paused-board svg{margin-bottom:20px;color:var(--green)}.paused-board p{font-size:13px;color:var(--muted)}.game-completion{margin:14px 0 0 20px;padding:15px;background:var(--mint);display:flex;align-items:center;justify-content:space-between;font-size:13px;gap:8px}.game-completion span{display:flex;align-items:center;gap:8px}.game-completion button{border:0;background:none;font-size:12px;color:var(--green)}.busy-bar{height:4px;background:#e4e9dc;overflow:hidden;border-radius:3px;margin:25px 0}.busy-bar:after{content:'';display:block;background:#5d9476;width:30%;height:100%;animation:busy 1s ease-in-out infinite alternate}@keyframes busy{to{transform:translateX(230%)}}@keyframes appear{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);margin:36px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);gap:24px}.stat-grid article{padding:25px 0}.stat-grid span{font-size:12px;color:var(--muted)}.stat-grid b{display:block;font-size:38px;font-weight:500;letter-spacing:-1px;line-height:1.2;margin:12px 0 0}.stat-grid b em{font-style:normal;font-size:16px;color:var(--muted)}.stat-grid small{font-size:10px;color:var(--muted)}.progress-columns{display:grid;grid-template-columns:1.35fr 1fr;gap:65px}.panel{padding:0 0 24px}.panel h2{font-size:24px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.panel-heading a{font-size:11px;text-decoration:none}.muted{color:var(--muted);font-size:13px;line-height:1.85}.small{font-size:11px!important;line-height:1.8}.technique-shelf{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.technique-shelf button{border:1px solid var(--line);padding:8px 10px;border-radius:5px;background:none;font-size:11px;color:var(--muted)}.technique-shelf button.learned{background:var(--mint);border-color:#bdd4bd;color:var(--green)}.finish-row{padding:15px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px}.finish-row small{display:block;font-size:10px;color:var(--muted);margin-top:4px}.empty-progress{padding:24px 0;color:var(--muted);font-size:13px;line-height:1.8}.settings-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:42px 70px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;padding:20px 0;border-bottom:1px solid var(--line);cursor:pointer}.setting-row b{display:block;font-size:13px;font-weight:550}.setting-row small{display:block;font-size:11px;color:var(--muted);line-height:1.7;margin-top:6px;max-width:360px}.setting-row input{opacity:0;position:absolute;right:0;width:44px;height:28px;z-index:1;cursor:pointer}.toggle-ui{width:44px;height:27px;background:#d9e1d6;border-radius:30px;position:relative;flex-shrink:0}.toggle-ui:after{content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:transform .17s}.setting-row input:checked+.toggle-ui{background:var(--green)}.setting-row input:checked+.toggle-ui:after{transform:translateX(17px)}.setting-row input:focus-visible+.toggle-ui{outline:3px solid #38917d;outline-offset:3px}.stack-buttons{display:flex;flex-direction:column;gap:8px;margin:21px 0}.settings-links{display:flex;gap:20px;margin-top:18px}.settings-links button{border:0;background:none;padding:0;font-size:12px;color:var(--muted)}
.library-controls{display:flex;align-items:center;gap:16px;margin:12px 0 32px}.search-field{display:flex;align-items:center;gap:12px;flex:1;border:1px solid var(--line);background:white;border-radius:7px;padding:0 14px;color:var(--muted)}.search-field input{border:0;width:100%;padding:13px 0;background:none;outline:none;font-size:13px;color:var(--ink)}.search-field:focus-within{outline:2px solid var(--green)}.library-controls select{padding:12px;border:1px solid var(--line);border-radius:7px;font-size:12px;background:white;color:var(--ink)}.technique-group{font-size:10px;letter-spacing:1.4px;color:var(--green);text-transform:uppercase;margin:30px 0 12px}.foundation-reader{max-width:660px;margin:8px auto 60px}.foundation-reader h1{font-size:34px;margin:14px 0 18px}.foundation-reader .step-dots{margin:12px 0 14px}.foundation-copy{font-size:17px;line-height:1.95;color:#4c6054}.foundation-copy h2{margin-top:28px;font-size:24px}.foundation-example{border-left:3px solid #8eaf8b;padding:20px 24px;background:#eef3e7;margin-top:28px;font-size:15px;line-height:1.85;color:#50644e}.foundation-example .eyebrow{display:block;font-size:8px}.answer-options{display:flex;flex-direction:column;gap:12px}.answer-options button{border:1px solid var(--line);border-radius:6px;background:white;text-align:left;padding:17px 20px;font-size:14px;line-height:1.8}@media(hover:hover){.answer-options button:hover{background:var(--mint);border-color:#9ab7a0}}.check-prompt{font-size:17px;line-height:1.8}.lesson-detail{padding:23px 0;font-size:12px;color:var(--muted);line-height:1.85}.lesson-detail summary{cursor:pointer;color:var(--green)}.lesson-detail div{margin-top:16px}.lesson-complete{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}.lesson-complete b{font-size:13px;color:var(--green)}.lesson-complete p{font-size:12px;margin-top:10px}.sync-conflict{padding:18px 0;border-top:1px solid var(--line)}
.app-dialog:focus{outline:none}.app-dialog{border:1px solid var(--line);border-radius:12px;padding:30px;background:var(--page);width:calc(100% - 32px);max-width:530px;max-height:85dvh;overflow:auto;box-shadow:0 25px 100px #18312630;color:var(--ink)}.app-dialog::backdrop{background:#1e322968;backdrop-filter:blur(3px)}.app-dialog[open]{animation:appear .17s ease-out}.app-dialog h2{font-size:27px;margin-right:20px}.app-dialog p{font-size:13px;line-height:1.85}.dialog-close{float:right;background:none;border:0;padding:0 7px;color:var(--muted);font-size:25px}.app-dialog label{display:block;font-size:12px;color:var(--muted);margin:16px 0}.app-dialog input,.app-dialog textarea{display:block;width:100%;padding:12px 13px;border:1px solid #cad6c7;background:white;border-radius:6px;color:var(--ink);margin-top:6px;font-size:16px}.app-dialog textarea{font-family:ui-monospace,monospace;line-height:1.6;letter-spacing:3px;resize:vertical;max-height:320px;margin-bottom:17px}.two-buttons{display:flex;gap:10px;margin-top:20px}.two-buttons .button{flex:1}.dialog-feedback:not(:empty){padding:14px;background:#f6eedb;border-radius:6px;font-size:12px;line-height:1.8;margin-top:20px;color:#805e28}.notice{padding:17px;background:#ecf2e6;font-size:12px;color:#536b4b;line-height:1.85;border-radius:6px;margin:20px 0}.difficulty-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0 12px}.difficulty-options button{border:1px solid var(--line);padding:14px 16px;text-align:left;background:white;border-radius:7px}.difficulty-options button.preferred{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}@media(hover:hover){.difficulty-options button:hover{background:var(--mint);border-color:#a3b99b}}.difficulty-options b{display:block;font-size:17px;font-weight:550;margin:5px 0 3px}.difficulty-options small{display:block;font-size:11px;line-height:1.8;color:var(--muted)}.level-icon{display:inline-flex;color:var(--green)}.saved-games{display:flex;flex-direction:column;gap:9px}.saved-game-row{display:flex;border-bottom:1px solid var(--line);gap:8px}.saved-games button[data-load-game]{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:15px 0;border:0;background:none;text-align:left}.saved-games b{font-size:13px}.saved-games small{display:block;font-size:11px;color:var(--muted);margin-top:6px}.remove-game{background:none;border:0;padding:8px;color:#a34235;font-size:11px}.offer-button{display:flex;justify-content:space-between;align-items:center;gap:15px;width:100%;padding:18px;border:1px solid var(--line);border-radius:6px;background:white;text-align:left;margin-bottom:10px}.offer-button b{font-size:14px}.offer-button small{font-size:11px;color:var(--muted);display:block}.app-toast{position:fixed;z-index:110;bottom:28px;left:50%;transform:translateX(-50%);width:max-content;max-width:min(600px,calc(100vw - 32px));padding:14px 19px;background:#244c3e;border-radius:8px;color:white;font-size:12px;line-height:1.7;box-shadow:0 7px 25px #21392d22}.startup{max-width:600px;margin:80px auto;padding:30px;text-align:center;color:var(--muted)}.startup h1,.startup h2{color:var(--ink)}.startup p{font-size:14px}.assumption-note{background:#fff4db;padding:13px;font-size:12px;border-left:3px solid #cba867}
@media(min-width:1000px){.coach-column{position:sticky;top:24px}}@media(max-width:1240px){#view{margin-left:40px;margin-right:40px}.game-layout{gap:45px}}@media(max-width:1000px){.site-header{gap:20px;padding:0 28px}.main-nav{gap:1px}.main-nav a{padding:10px}.main-nav a svg{display:none}#view{margin-left:28px;margin-right:28px}.game-layout{grid-template-columns:minmax(0,1.3fr) minmax(260px,1fr);gap:30px}.big-number{font-size:29px}.note-number{font-size:10px}.coach-column{padding-top:35px}.settings-layout{gap:35px}.progress-columns{gap:35px}.number-pad{gap:5px}.number-pad button{min-height:55px}.number-pad b{font-size:24px}}
/* Mobile columns measure the board only; row labels hang in the outer gutter. */
@media(max-width:720px){body{padding-bottom:80px}.site-header{height:78px;margin:0 20px;padding:0;gap:12px;padding-top:env(safe-area-inset-top);height:calc(78px + env(safe-area-inset-top))}.brand-name{font-size:22px}.brand-name small{font-size:6px}.brand-mark svg{width:25px}.main-nav{position:fixed;z-index:30;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);background:#f8f9f4f5;border-top:1px solid var(--line);backdrop-filter:blur(16px);gap:6px;padding:8px 13px max(9px,env(safe-area-inset-bottom))}.main-nav a{display:flex;flex-direction:column;font-size:10px;gap:5px;min-height:48px;padding:6px;border-radius:6px}.main-nav a svg{display:block;width:20px;height:20px}.main-nav a.active{background:var(--mint)}#view{margin:0;padding:23px 18px 28px;min-height:calc(100svh - 170px)}.page-heading{gap:18px;align-items:flex-start;margin-bottom:25px}.page-heading h1{font-size:30px}.page-heading .eyebrow{font-size:8px;letter-spacing:1.3px;margin-bottom:9px}.page-heading p{font-size:12px}.game-layout{display:flex;flex-direction:column;gap:28px;align-items:stretch}.game-column{width:calc(100% - 16px);max-width:534px;align-self:center}.coach-column{width:100%;max-width:550px;align-self:center;padding-top:0}.game-topline{margin-left:0;margin-bottom:8px}.game-topline>div{gap:9px}.game-clock{font-size:11px}.play-board-shell{position:relative;grid-template-columns:minmax(0,1fr);grid-template-rows:16px auto}.board-axis.top,.play-grid-wrap{grid-column:1}.board-axis.side{position:absolute;grid-row:auto;left:-16px;top:16px;bottom:0;width:16px}.board-axis{font-size:8px}.big-number{font-size:clamp(24px,7.4vw,38px)}.note-number{font-size:clamp(9px,2.4vw,13px)}.play-notes{inset:2px}.board-tools,.number-pad,.game-completion,.paused-board{margin-left:0}.board-tools{gap:4px;margin-top:9px;margin-bottom:9px}.board-tools .button{font-size:10px;min-height:37px;gap:6px}.board-tools .button svg{width:16px}.number-pad{gap:4px}.number-pad button{min-height:53px}.number-pad b{font-size:25px}.number-pad small{font-size:8px;margin-top:3px}.hint-card{padding:0 0 24px}.hint-card h2{font-size:26px}.coach-prose,.coach-prose p{font-size:14px}.hint-quiz p{font-size:13px}.stat-grid{grid-template-columns:repeat(2,1fr);gap:0 20px;margin:26px 0}.stat-grid article{padding:20px 0}.stat-grid b{font-size:33px}.stat-grid span{font-size:11px}.stat-grid small{font-size:10px}.progress-columns,.settings-layout{grid-template-columns:1fr;gap:30px}.panel h2{font-size:25px}.setting-row b{font-size:13px}.setting-row small{font-size:11px}.setting-row{padding:18px 0}.library-controls{gap:10px}.search-field{padding:0 10px;gap:8px}.search-field input{font-size:12px;min-width:0}.library-controls select{max-width:105px;font-size:11px;padding:12px 7px}.foundation-reader{margin:4px 0 40px}.foundation-reader h1{font-size:29px;margin:10px 0 14px}.foundation-copy{font-size:16px;line-height:1.95}.foundation-example{font-size:14px;padding:17px 20px}.answer-options button{font-size:14px}.app-toast{bottom:calc(87px + env(safe-area-inset-bottom));font-size:12px}.app-dialog{padding:25px;max-height:82dvh}.app-dialog h2{font-size:25px}.difficulty-options button{padding:15px}.game-completion{font-size:12px}.two-buttons{gap:8px}.two-buttons .button{font-size:11px}.site-header,#view{padding-left:max(0px,env(safe-area-inset-left));padding-right:max(0px,env(safe-area-inset-right))}#view{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}}
@media(max-width:360px){.brand-name{font-size:20px}.note-number{font-size:8px}.board-tools .button{font-size:9px;gap:4px}.number-pad b{font-size:22px}.number-pad{gap:3px}.app-dialog{padding:20px}.difficulty-options{gap:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(min-width:721px){.site-header{height:80px}#view{padding-top:25px}.page-heading{margin-bottom:24px}.game-layout{grid-template-columns:minmax(0,clamp(380px,calc(100svh - 355px),530px)) minmax(280px,340px)}}
@media(max-width:720px){.coach-column:has(.hint-card){scroll-margin-top:18px}}
.foundation-visual{margin-top:25px}.example-row{display:grid;grid-template-columns:repeat(9,1fr);border:1px solid #8da08e;max-width:560px;background:white}.example-row>span{display:grid;place-items:center;aspect-ratio:1;border-right:1px solid var(--line);font-size:24px}.example-row>span:nth-child(3n){border-right:2px solid #8da08e}.example-row>span:last-child{border:0}.example-row .missing{background:var(--mint);color:var(--green)}.foundation-visual p{font-size:12px;color:var(--muted);line-height:1.8;margin:15px 0 0}.candidate-example{display:flex;align-items:center;gap:25px}.example-cell{width:105px;height:105px;flex-shrink:0;display:grid;grid-template-columns:repeat(3,1fr);border:2px solid #829b84;border-radius:3px;background:white;padding:8px}.example-cell span{display:grid;place-items:center;font-size:18px}.example-cell .possible{color:var(--green);font-weight:650}.example-cell .ruled-out{color:#b0b9af;text-decoration:line-through}.candidate-example p{margin:0}.hint-card{scroll-margin-top:18px}
@media(max-width:720px){.site-header{height:calc(55px + env(safe-area-inset-top))}.board-tools .button{flex-direction:column;gap:5px;min-height:46px;font-size:10px}.board-tools{margin-top:10px;margin-bottom:9px}.example-row>span{font-size:20px}}

/* Play stays quiet until the player asks for a walkthrough. */
.play-workspace{--board-width:clamp(380px,calc(100svh - 360px),530px);max-width:var(--board-width);margin:0 auto}
.play-workspace.with-coach{max-width:940px}
.play-layout{grid-template-columns:minmax(0,var(--board-width));gap:48px}
.with-coach .play-layout{grid-template-columns:minmax(0,var(--board-width)) minmax(280px,340px)}
.play-workspace .board-tools{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.play-workspace .board-tools .button{display:flex;flex-direction:column;font-size:11px;gap:5px;min-height:48px;padding:6px 2px}
.play-workspace .coach-column{padding-top:0}
.hint-top h2{margin:0;font-size:24px}
.hint-library-link{display:inline-block;font-size:12px;margin-top:5px;text-decoration:none}
.play-layout .hint-card{animation:none}
@media(min-width:721px) and (max-width:1000px){.with-coach .play-layout{grid-template-columns:minmax(0,1.3fr) minmax(260px,1fr);gap:28px}}
@media(max-width:720px){.play-workspace,.play-workspace.with-coach{max-width:550px;width:100%}.play-layout,.with-coach .play-layout{display:flex;gap:25px}.play-workspace .game-column{max-width:min(calc(100% - 16px),534px,max(260px,calc(100svh - 404px - env(safe-area-inset-top) - env(safe-area-inset-bottom))))}.play-workspace .board-tools .button{font-size:10px;min-height:46px}}
@media(max-width:360px){.play-workspace .board-tools .button{font-size:9px}}
@media(max-width:720px) and (max-height:760px){
  #view:has(.play-workspace){padding-top:10px}
  .play-workspace .game-column{max-width:min(calc(100% - 16px),max(260px,calc(100svh - 382px - env(safe-area-inset-top) - env(safe-area-inset-bottom))))}
  .play-workspace .game-topline{margin-bottom:5px}
  .play-workspace .big-number{font-size:clamp(23px,6.4vw,30px)}
  .play-workspace .note-number{font-size:8px}
}

.play-workspace .board-tools .button{white-space:nowrap}

/* Play: one row to pick a puzzle, one line to name it, the board, then pencil and pen rows. */
.puzzle-badge{display:inline-flex;align-items:center;gap:3px;border:0;font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:0 7px 0 10px;min-height:30px;border-radius:6px;color:#fff;white-space:nowrap;box-shadow:0 1px 2px #21362b33}
.puzzle-badge svg{opacity:.8}
.puzzle-badge.daily{background:#1f5c4e}@media(hover:hover){.puzzle-badge.daily:hover{background:#28705f}}
.puzzle-badge.own{background:var(--ink)}@media(hover:hover){.puzzle-badge.own:hover{background:#3a4d48}}

.menu-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px 16px;border:1px solid var(--line);border-radius:8px;background:white;color:var(--green)}
@media(hover:hover){.menu-row:hover{background:var(--mint);border-color:#a3b99b}}
.menu-row>span{flex:1;color:var(--ink)}.menu-row b{display:block;font-size:14px;font-weight:550}.menu-row small{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.version-line{font-size:11px;color:var(--muted);margin:26px 0 0;font-variant-numeric:tabular-nums}
.difficulty-pill{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.game-clock{display:flex;align-items:center;gap:2px}
.number-pad button.focused{background:var(--mint);border-color:#8fb3a3}
.notes-pad{margin-bottom:5px}
.notes-pad button{min-height:50px;padding:2px .22em 2px 0;font-family:'Caveat','Bradley Hand','Segoe Print',cursive;font-size:28px;font-weight:500;color:#5c6f66;background:#f3f5f0;border:1px dashed #c9d3c9;box-shadow:none}
@media(hover:hover){.notes-pad button:hover{background:#e9eee6;border-color:#a9bdb1}}
.notes-pad button.focused{background:var(--mint);border-color:#8fb3a3;color:var(--green)}
.note-number{font-family:'Caveat','Bradley Hand','Segoe Print',cursive;font-weight:500;padding-right:.22em}
.play-cell .note-number{font-size:13px}
.saved-game-row.current{background:#f1f5ee;border-radius:6px;padding:0 8px}
.saved-games b em{font-style:normal;font-weight:500;color:var(--green);font-size:11px}
@media(max-width:1000px){.play-cell .note-number{font-size:12px}}
@media(max-width:720px){
  .puzzle-badge{font-size:9.5px;min-height:30px;padding:0 6px 0 9px}
  .game-topline>div{gap:7px}.game-clock button{width:29px}
  .play-cell .note-number{font-size:clamp(10px,2.9vw,15px)}
  .notes-pad button{min-height:48px;font-size:27px}
  .number-pad button{min-height:58px}
  .number-pad b{font-size:27px}
  .play-workspace .board-tools .button{min-height:48px}
  /* The walkthrough is a pull-up sheet over the pads: its header drags between three heights. */
  .play-layout .coach-column:not([hidden]){position:fixed;left:0;right:0;bottom:70px;z-index:25;margin:0;max-width:none;width:auto;height:46svh;display:flex;flex-direction:column;overflow:hidden;background:var(--page);border-top:1px solid var(--line);border-radius:18px 18px 0 0;box-shadow:0 -12px 34px #21362b2e;padding:0}
  .play-layout .coach-column.sheet-animate{transition:height .28s cubic-bezier(.2,.9,.25,1)}
  .play-layout .coach-column[data-detent="large"]{box-shadow:0 -18px 50px #21362b44}
  .sheet-head{flex:none;padding:0 18px 4px;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
  .sheet-handle{display:flex;justify-content:center;width:100%;border:0;background:none;padding:8px 0 6px;margin:0;touch-action:none;cursor:grab}
  .sheet-handle i{width:40px;height:5px;border-radius:3px;background:#c3cdc4}
  .sheet-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 18px calc(14px + env(safe-area-inset-bottom))}
  .play-layout .coach-column .coach-card{padding-bottom:12px;border-bottom:0}
  .play-layout .coach-column .step-dots{margin:6px 0 12px}
  .play-layout .coach-column .coach-prose,.play-layout .coach-column .coach-prose p{font-size:15px;line-height:1.7;margin:8px 0}
  .play-layout .coach-column .hint-quiz p{font-size:14px}
  .play-layout .coach-column .hint-navigation{margin-top:16px}
}
@media(max-width:360px){
  .notes-pad button{min-height:42px;font-size:24px}
  .number-pad button{min-height:52px}
  .puzzle-badge{padding:0 8px;font-size:9px}.puzzle-badge svg{display:none}
  .difficulty-pill{padding:5px 6px}.difficulty-pill span{display:none}
  .game-topline>div{gap:6px}.game-clock button{width:28px}
}
@media(max-width:720px) and (max-height:760px){
  .play-workspace .notes-pad button{min-height:42px;font-size:24px}
  .play-workspace .number-pad button{min-height:52px}
  .play-workspace .board-tools .button{min-height:42px}
  .play-workspace .play-cell .note-number{font-size:10px}
}
/* The Play column is sized to end above the fixed nav, so it needs no clearance padding. */
@media(max-width:720px){body:has(.play-workspace){padding-bottom:0}#view:has(.play-workspace){padding-bottom:0;min-height:0}}

.difficulty-pill em{font-style:normal;font-weight:500;color:#5f8577;font-variant-numeric:tabular-nums}
/* Slips: three marks that fill, then a count. */
.slips{display:inline-flex;align-items:center;gap:3px;font-size:10px;color:var(--muted);margin-left:2px}
.slips i{width:8px;height:8px;border-radius:50%;border:1.5px solid #b9c4bb;display:inline-block}
.slips i.done{background:#c9755f;border-color:#c9755f}
.slips b{font-weight:600;color:#a34235;margin-right:2px}
/* Hint card: the technique is the headline; the step is the subhead. */
.hint-technique{font-size:24px;letter-spacing:-.6px;margin:0}
.step-title{font-size:16px;font-weight:600;margin:0 0 8px;letter-spacing:-.2px}
@media(min-width:721px){.sheet-handle{display:none}}
/* Solved: a small burst, then the numbers. */
.celebrate{text-align:center;position:relative}
.celebrate-mark{width:72px;height:72px;margin:6px auto 14px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;animation:pop .45s cubic-bezier(.2,1.4,.4,1) both}
.celebrate-line{display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px;color:var(--ink);margin-bottom:14px}
.celebrate-stats{display:flex;justify-content:center;gap:28px;margin:6px 0 18px}
.celebrate-stats span{display:flex;flex-direction:column;align-items:center}.celebrate-stats b{font-size:26px;font-weight:550;letter-spacing:-.6px}.celebrate-stats small{font-size:10px;color:var(--muted);letter-spacing:.6px;text-transform:uppercase;margin-top:2px}
.confetti{position:absolute;inset:-30px 0 auto 0;height:0;pointer-events:none}
.confetti i{position:absolute;left:50%;top:40px;width:7px;height:11px;border-radius:2px;opacity:0;background:var(--green);animation:burst 1.1s ease-out forwards;animation-delay:calc(var(--i) * 18ms)}
.confetti i:nth-child(3n){background:#d9a441;width:6px;height:6px;border-radius:50%}.confetti i:nth-child(3n+1){background:#c9755f}.confetti i:nth-child(4n){background:#3d7f6f}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes burst{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(calc((var(--i) - 8.5) * 26px),calc(120px + (var(--i) * 7px) * -1 + 60px)) rotate(calc(var(--i) * 70deg));opacity:0}}
@media(max-width:720px){
  .hint-technique{font-size:22px}.step-title{font-size:16px}
  .difficulty-options{gap:8px}.difficulty-options button{padding:12px 13px}.difficulty-options b{font-size:15px}.difficulty-options small{font-size:10.5px;line-height:1.6}
  .celebrate-stats{gap:22px}
}


/* Learn: one list style for the basics and the techniques. */
.lesson-section{margin-bottom:30px}
.lesson-section-title{font-size:13px;font-weight:650;letter-spacing:1px;text-transform:uppercase;color:var(--green);margin:0 0 6px}
.lesson-list{border-top:1px solid var(--line)}
.lesson-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:none;padding:14px 0;color:var(--ink)}
.lesson-row>svg{color:var(--green);flex:none}
.lesson-status{width:26px;flex:none;display:grid;place-items:center;color:var(--green)}
.lesson-number{width:22px;height:22px;border-radius:50%;border:1.5px solid #b9c9bd;display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--green);font-variant-numeric:tabular-nums}
.lesson-text{flex:1;min-width:0}.lesson-text b{display:block;font-size:14px;font-weight:550}.lesson-text small{display:block;font-size:12px;line-height:1.55;color:var(--muted);margin-top:3px}
.lesson-kind{font-size:10px;color:var(--muted);white-space:nowrap;border:1px solid var(--line);border-radius:4px;padding:2px 6px}
.technique-group{font-size:11px;letter-spacing:1px;color:var(--muted);text-transform:uppercase;margin:22px 0 2px;font-weight:600}
@media(hover:hover){.lesson-row:hover{background:#f0f3eb}}
/* Every lesson page shares one header: the back link with the lesson's badge across from it, then the title. */
.lesson-head{margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.lesson-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 4px}
.back-link{display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:6px 0;margin:0 0 0 -3px;font-size:14px;color:var(--green);text-decoration:none;min-height:36px}
.lesson-title{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.lesson-title h1{font-size:26px;letter-spacing:-.8px;line-height:1.2;margin:0}
.lesson-badge{font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;padding:4px 8px;border-radius:5px;color:#fff}
.lesson-badge.practice{background:#34628a}.lesson-badge.basics{background:#1f5c4e}.lesson-badge.reference{background:#5f6f6a}

.reader-title{font-size:22px;letter-spacing:-.5px;margin:0 0 14px}
.foundation-reader .step-dots{margin:4px 0 10px}
/* Practice boards wear a blue palette so a lesson never looks like your game. */
.practice-board .play-grid{border-color:#46698c;background:#fbfcfe}
.practice-board .play-cell{border-right-color:#e1e7ef;border-bottom-color:#e1e7ef}
.practice-board .play-cell.box-r{border-right-color:#9cb0c6}.practice-board .play-cell.box-b{border-bottom-color:#9cb0c6}
.practice-board .play-cell.peer-cell{background:#eef3f9}
.practice-board .play-cell.same-value{background:#dde8f4}
.practice-board .play-cell.chosen{background:#d8e5f3;box-shadow:inset 0 0 0 2px #34628a}
.practice-board .big-number.entered{color:#34628a}
.practice-board .board-axis{color:#7f93a8}
.practice-board .note-number{color:#5e7288}
.practice-board .note-number.focus-note{color:#1f4c75}
/* Lesson highlights stay off the game's greens: violet for your picks and a pattern's ends, lavender
   for the house being read. Gold evidence and struck-out targets mean the same on both boards. */
.practice-board .play-cell.context-cell{background:#f0ecf7}
.practice-board .play-cell.end-cell{background:#e4dbf2}
.practice-board .note-number.picked-note{background:#5a3e8f}
/* A picked mark is always white on its chip, at full strength, whatever digit is in focus. */
.note-number.picked-note,.practice-board .note-number.picked-note{color:#fff;font-weight:700;opacity:1}
/* Stats: a row per difficulty the player has actually finished. */
.tier-table{border-top:1px solid var(--line);margin-bottom:10px}
.tier-row{display:grid;grid-template-columns:1.5fr .75fr .9fr .9fr 1fr;gap:6px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px;font-variant-numeric:tabular-nums}
.tier-row span{display:flex;align-items:center;gap:6px}
.tier-row.head{font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);padding:8px 0}
.tier-row.total{font-weight:650;border-top:1.5px solid #b3c0b8;margin-top:-1px}
.ranked-tag{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#fff;background:var(--ink);border-radius:3px;padding:1px 5px;margin-left:4px;vertical-align:1px}
/* The header stays put while a page scrolls, like an app's navigation bar. */
@media(max-width:720px){
  .site-header{position:sticky;top:0;z-index:30;background:var(--page);margin:0;padding-left:20px;padding-right:20px}
  #view.edge-dragging{box-shadow:-16px 0 30px #21362b22}
  .lesson-title h1{font-size:24px}
  .lesson-head{margin-top:-14px}
  .tier-row{font-size:12.5px}
}

/* Ranked: its own badge, a three-tool row, and the score front and centre when it is solved. */
.puzzle-badge.ranked{background:#6b4f1d}@media(hover:hover){.puzzle-badge.ranked:hover{background:#7d5d24}}
.play-workspace .board-tools.ranked-tools{grid-template-columns:repeat(3,minmax(0,1fr))}
.undo-left{font-style:normal;font-weight:700;color:#6b4f1d;margin-left:1px}
.ranked-rules{color:#6b4f1d!important}
.rules-list{margin:4px 0 14px;padding-left:18px;font-size:14px;line-height:1.9}
.celebrate-score{margin:4px 0 12px}.celebrate-score b{display:block;font-size:44px;font-weight:600;letter-spacing:-1.4px;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ink)}.celebrate-score small{font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.leaderboard{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--line)}
.leaderboard li{display:grid;grid-template-columns:28px 1fr auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line)}
.leaderboard li.me{background:#f3eee2;border-radius:6px}
.lb-rank{grid-row:span 2;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums;text-align:center}
.lb-name{font-size:14px;font-weight:550}.lb-time{grid-column:2;font-size:11px;color:var(--muted)}
.lb-score{grid-row:1 / span 2;grid-column:3;font-size:17px;font-variant-numeric:tabular-nums}
.stats-actions{display:flex;gap:10px;flex-wrap:wrap;margin:-8px 0 22px}

/* Tutor chat, inside the same pull-up sheet as hints. */
.tutor-body{display:flex;flex-direction:column;gap:10px}
.tutor-log{display:flex;flex-direction:column;gap:8px}
.msg{max-width:88%;padding:10px 13px;border-radius:14px;font-size:14.5px;line-height:1.55}
.msg.user{align-self:flex-end;background:var(--green);color:#fff;border-bottom-right-radius:4px}
.msg.assistant{align-self:flex-start;background:#fff;border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:4px}
.msg.typing{display:flex;gap:4px;padding:13px 14px}.msg.typing i{width:6px;height:6px;border-radius:50%;background:#9aaba1;animation:typing 1s infinite ease-in-out}.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.tutor-intro{font-size:13.5px;margin:2px 0 0}
.tutor-starters{display:flex;flex-wrap:wrap;gap:7px}
.tutor-starters button{border:1px solid #bcd0c3;background:#fff;color:var(--green);border-radius:16px;padding:8px 12px;font-size:13px;min-height:36px}
.tutor-form{display:flex;gap:8px;align-items:center;position:sticky;bottom:0;background:var(--page);padding-top:4px}
.tutor-form input{flex:1;min-width:0;border:1px solid #c9d5c9;border-radius:20px;padding:10px 14px;font-size:16px;background:#fff;color:var(--ink)}
.tutor-form .button{border-radius:20px;min-height:40px}
.tutor-meta{font-size:11px;color:var(--muted);margin:0}
.tutor-error{font-size:12.5px;color:#a34235;margin:2px 0 0}
/* Settings: the tutor style is one choice among three. */
.choice-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.choice-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);cursor:pointer}
.choice-row input{width:20px;height:20px;accent-color:var(--green);margin:0;flex:none}
.choice-row b{display:block;font-size:13px;font-weight:550}.choice-row small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
@media(min-width:721px){.coach-column .tutor-body{max-height:calc(100svh - 220px);overflow:auto}}

/* Correct placements: a brief glow; in ranked play a quick run floats its streak bonus. */
.play-cell.placed-right .big-number{animation:placed .5s ease-out}
@keyframes placed{0%{transform:scale(.7);color:#2d9a6c}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.flow-pop{position:absolute;transform:translate(-50%,-10%);pointer-events:none;z-index:5;font-weight:700;font-size:15px;color:#8a5a12;text-align:center;animation:flow-up 1.1s ease-out forwards;text-shadow:0 1px 0 #fff}
.flow-pop small{display:block;font-size:9px;font-weight:650;letter-spacing:.6px;text-transform:uppercase;color:#6b4f1d}
@keyframes flow-up{0%{opacity:0;transform:translate(-50%,0)}15%{opacity:1}100%{opacity:0;transform:translate(-50%,-160%)}}

/* The tutor's whiteboard: a blue copy of the board, like practice boards, so it never looks like your game. */
.whiteboard{margin:10px 0 2px;padding:0}
.whiteboard figcaption{font-size:13px;line-height:1.45;color:var(--ink);margin-bottom:6px}
.wb-grid-wrap{position:relative;width:100%;max-width:300px}
.wb-grid{display:grid;grid-template-columns:repeat(9,1fr);aspect-ratio:1;border:1.5px solid #46698c;border-radius:4px;background:#fbfcfe;overflow:hidden}
.wb-cell{position:relative;aspect-ratio:1;display:grid;place-items:center;border-right:1px solid #e1e7ef;border-bottom:1px solid #e1e7ef;font-size:15px;line-height:1}
.wb-cell:nth-child(9n){border-right:0}.wb-cell:nth-child(n+73){border-bottom:0}
.wb-cell.box-r{border-right:1.5px solid #9cb0c6}.wb-cell.box-b{border-bottom:1.5px solid #9cb0c6}
.wb-given{color:var(--ink);font-weight:600}.wb-entered{color:#34628a;font-weight:500}.wb-new{color:#1f4c75;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.wb-focus{background:#dde8f4}.wb-evidence{background:#fbefc8}.wb-target{background:#d3eddc}
.wb-conflict{background:#f8d4cc!important;box-shadow:inset 0 0 0 2px #c0473a}
.wb-notes{position:absolute;inset:1px;display:grid;grid-template-columns:repeat(3,1fr);font-family:'Caveat','Bradley Hand',cursive;font-size:8.5px;color:#5e7288}
.wb-notes i{font-style:normal;display:grid;place-items:center}
.wb-struck{color:#c0473a!important;text-decoration:line-through;font-weight:700}
.wb-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.wb-note{font-size:11.5px;color:#a34235;margin:6px 0 0}
.wb-stepper{display:flex;align-items:center;gap:12px;margin-top:8px}
.wb-stepper button{width:40px;height:34px;border:1px solid #c5d3e1;border-radius:8px;background:#fff;color:#34628a;font-size:16px}
.wb-stepper button:disabled{opacity:.35}
.wb-stepper span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.msg.assistant:has(.whiteboard){max-width:100%}
.msg.ended{border-color:#e5c9a8;background:#fbf4ea}
.tutor-ended{margin-top:4px}

/* Sheet parked: the board gives up about the sheet header's height so the pads sit above it. */
@media(max-width:720px){
  .play-workspace.sheet-peek .game-column{max-width:min(calc(100% - 16px),534px,max(220px,calc(100svh - 482px - env(safe-area-inset-top) - env(safe-area-inset-bottom))))}
  .play-workspace .game-column{transition:max-width .25s ease}
}
@media(max-width:720px) and (max-height:760px){
  .play-workspace.sheet-peek .game-column{max-width:min(calc(100% - 16px),max(220px,calc(100svh - 454px - env(safe-area-inset-top) - env(safe-area-inset-bottom))))}
}

/* Account: one pill with the sync status; tapping it opens sign-in or the account. No picture: we never collect one. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.account-pill{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 13px 0 16px;border:1px solid var(--line);border-radius:22px;background:transparent;color:var(--muted);font-size:12px;white-space:nowrap}
.account-pill svg{color:var(--green)}
@media(hover:hover){.account-pill:hover{background:var(--mint);color:var(--green)}}
@media(max-width:720px){.account-pill{height:38px;font-size:11px;padding:0 11px 0 14px}}
/* Lessons read top to bottom in one column: the step, the board, then what to do next. They wear blue
   throughout (text, buttons, progress), so a lesson never feels like your game. */
.lesson-page{--green:#2f5f8a;--mint:#e5edf6;--ink:#1f3550;--muted:#5d7089;--line:#d9e2ec;color:var(--ink)}
#view>.lesson-page{max-width:600px;margin:0 auto}
.lesson-page .lesson-badge.basics{background:#1f4c75}.lesson-page .lesson-badge.reference{background:#5b6b80}
.lesson-page .button.primary:hover{background:#244d73;border-color:#244d73}
.lesson-page .step-dots i{background:#dce5ef}.lesson-page .step-dots i.done{background:#4b79a8}
.lesson-page .coach-prose{color:#3b4f66}
.lesson-page .hint-quiz{background:#edf2f8}
.lesson-page .hint-feedback{background:#e9f0f8;border-left-color:#5a86b4}
.lesson-page .plain-rule{background:#edf2f8;color:#2d4560}
.lesson-page .msg.typing i{background:#98aac0}
@media(hover:hover){.lesson-page .button:hover{background:var(--mint);color:var(--green);border-color:#b8c9dc}}
.lesson-step{padding:0 0 16px;border-bottom:0}
.lesson-step .step-dots{margin:2px 0 12px}
.lesson-step .step-title{font-size:19px;letter-spacing:-.3px;margin:0 0 8px}
.lesson-step .coach-prose{font-size:14.5px;line-height:1.75}
.lesson-prompt{margin:12px 0 0;padding:11px 13px;border-radius:8px;background:var(--mint);font-size:13.5px;line-height:1.55}
.lesson-prompt p{margin:0}
.prompt-actions{display:flex;align-items:center;gap:14px;margin-top:10px}.prompt-actions .button.primary{min-width:96px}
.prompt-feedback{margin-top:9px!important;padding-top:9px;border-top:1px solid #cfdcea;font-size:13px}
.lesson-before{margin:-4px 0 14px;font-size:13px;line-height:1.7;color:var(--muted)}
.lesson-before summary{cursor:pointer;color:var(--green);font-weight:600;padding:4px 0;min-height:32px;display:flex;align-items:center;gap:6px;list-style:none}
.lesson-before summary::-webkit-details-marker{display:none}.lesson-before summary svg{transition:transform .15s}.lesson-before[open] summary svg{transform:rotate(180deg)}
.lesson-before .glossary-copy{padding:6px 0 4px}.lesson-before p{margin:0 0 6px}
.lesson-page .lesson-tools{margin:12px 0 4px}
.lesson-page .hint-navigation{margin-top:14px}
.lesson-page .hint-navigation .button{flex:1;min-height:48px}
.lesson-tutor .tutor-body{max-height:none;overflow:visible}
@media(max-width:720px){.lesson-step .step-title{font-size:18px}}
/* Play's top line: New opens the game chooser; beside it, the game's type and difficulty. */
.new-game{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);background:var(--paper);color:var(--green);font-size:11px;font-weight:650;padding:0 10px 0 7px;min-height:30px;border-radius:15px;white-space:nowrap}
@media(hover:hover){.new-game:hover{background:var(--mint)}}
.game-pill{display:inline-flex;align-items:stretch;border-radius:6px;overflow:hidden;min-height:28px}
.game-pill .puzzle-badge{cursor:default;border-radius:0;min-height:0;padding:0 8px}
.game-pill .difficulty-pill{border-radius:0}
@media(max-width:480px){.game-pill .difficulty-pill svg,.game-pill .difficulty-pill em{display:none}.game-topline{gap:6px}.game-topline>div{gap:5px}.new-game{padding:0 8px 0 5px;gap:2px}.game-pill .puzzle-badge{padding:0 6px}.game-pill .difficulty-pill{padding:5px 7px}.slips{gap:2px;margin-left:0}.slips i{width:7px;height:7px}.game-clock button{width:29px}}
/* The New game chooser. */
.mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:10px;background:#eef1ec;margin:2px 0 10px}
.mode-toggle button{border:0;background:none;border-radius:7px;min-height:40px;font-size:14px;font-weight:600;color:var(--muted)}
.mode-toggle button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px #21362b22}
.mode-note{font-size:12.5px;margin:0 0 14px}
.new-game-label{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
.difficulty-options.compact{grid-template-columns:repeat(3,1fr);gap:8px}
.difficulty-options.compact{margin:0}.difficulty-options.compact button{padding:12px 6px;min-height:64px;text-align:center}.difficulty-options.compact b{font-size:14px;margin:4px 0 0}
.new-game-more{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 24px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.new-game-more .button{gap:6px}
.celebrate-note{margin:4px 0 12px;text-align:center}
@media(max-width:380px){.new-game span{display:none}.new-game{padding:0 7px}}
/* The running score beside the timer; each correct number's points rise from its cell. */
.live-score{display:inline-flex;align-items:baseline;gap:2px;margin-right:6px;color:var(--green);font-variant-numeric:tabular-nums}
.live-score b{font-size:13px;font-weight:700}.live-score small{font-size:9px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;opacity:.75}
.live-score:empty{display:none}
button.game-pill{border:0;padding:0;background:none;cursor:pointer;font:inherit}
.flow-pop{color:var(--green);font-size:13px}.flow-pop.streak{color:#8a5a12;font-size:15px}
.celebrate-sum{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
@media(max-width:410px){.live-score small{display:none}.live-score{margin-right:3px}}
/* Line above the board: the puzzle on the left, how it is going on the right. Every control is a 34px pill with a 44px touch area. */
.game-topline{gap:8px;margin:0 0 10px 20px;min-height:34px}
.game-topline .topline-puzzle,.game-topline .topline-status{display:flex;align-items:center;gap:6px;min-width:0}
.game-topline .topline-puzzle>*,.game-topline .topline-status>*{flex-shrink:0}
.game-topline .new-game,.game-topline .game-pill,.topline-chip,.topline-icon{position:relative;height:34px;min-height:34px;border-radius:17px}
.game-topline .new-game::after,.game-topline .game-pill::after,.topline-chip::after,.topline-icon::after{content:'';position:absolute;inset:-5px -3px}
.game-topline .new-game{font-size:13px;padding:0 12px 0 9px;gap:4px}
.game-topline .game-pill{border:1px solid #cfe0d7;background:var(--mint);overflow:visible}
.game-topline .game-pill .puzzle-badge{border-radius:16px 0 0 16px;min-height:0;font-size:10px;padding:0 8px 0 11px}
.game-topline .game-pill .difficulty-pill{background:none;border-radius:16px;font-size:13px;font-weight:600;padding:0 9px 0 11px;gap:5px}
.game-topline .game-pill .puzzle-badge+.difficulty-pill{padding-left:8px}
.game-topline .game-pill .difficulty-pill em{display:inline;font-weight:500;color:#4f7a6b}
.game-topline .game-pill .difficulty-pill>svg:last-child{opacity:.7;margin-left:-1px}
.topline-chip,.topline-icon{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;padding:0 11px}
.topline-icon{width:34px;padding:0;color:var(--green)}
.topline-chip.done{color:var(--muted)}
.clock-chip{color:var(--muted)}.clock-chip svg{color:var(--green)}
.score-chip .live-score{margin:0}.score-chip .live-score b{font-size:13px}
.score-chip .slips{margin:0;gap:3px}.score-chip .live-score+.slips{padding-left:7px;border-left:1px solid var(--line);height:16px}
@media(hover:hover){.topline-chip:hover,.topline-icon:hover{background:var(--mint);border-color:#cfe0d7}}
@media(max-width:480px){.game-topline{margin-left:0}.game-topline .game-pill .difficulty-pill em{display:inline}.game-topline .game-pill .difficulty-pill>svg{display:none}.game-topline .game-pill .difficulty-pill>svg:last-child{display:inline}.topline-chip{padding:0 9px;gap:6px}.score-chip .live-score small{display:none}}
@media(max-width:410px){.topline-chip{padding:0 8px}.game-topline .new-game{padding:0 9px 0 6px}.game-topline .game-pill .difficulty-pill{padding:0 7px 0 10px}.game-topline .topline-status,.game-topline .topline-puzzle{gap:5px}}
@media(max-width:380px){.game-topline .game-pill .difficulty-pill>svg:last-child{display:none}.game-topline .game-pill .difficulty-pill{padding:0 10px}.clock-chip svg{width:13px}.game-topline .new-game span{display:none}.game-topline .new-game{width:34px;padding:0;justify-content:center}.topline-chip{padding:0 8px}.score-chip .slips i{width:6px;height:6px}}
.header-share{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--green);position:relative}
.header-share::after{content:'';position:absolute;inset:-3px}
@media(hover:hover){.header-share:hover{background:var(--mint)}}
@media(max-width:720px){.header-share{width:38px;height:38px}}
/* Solved: a result card takes the place of the tools and pads, which have nothing left to do. */
.game-column.solved .board-tools,.game-column.solved .number-pad{display:none}
.game-completion{margin:16px 0 0;padding:16px;border-radius:12px;background:var(--mint);border:1px solid #cfe0d7;display:flex;flex-direction:column;align-items:stretch;gap:14px;font-size:13px}
.game-completion .result-summary{display:flex;align-items:center;gap:12px;color:var(--green)}
.game-completion .result-summary span{display:flex;flex-direction:column;gap:1px;color:var(--ink)}
.game-completion .result-summary b{font-size:17px;font-weight:600}
.game-completion .result-summary small{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.game-completion .result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.game-completion .result-actions .button{min-height:46px;justify-content:center;font-size:14px}
.game-completion .result-actions .button{border:1px solid var(--line);background:var(--paper);color:var(--green);font-weight:600}
.game-completion .result-actions .button.primary{background:var(--green);border-color:var(--green);color:#fff}
.game-completion .result-summary span{align-items:flex-start}
/* Paused: the puzzle, the numbers so far, and a way to read how scoring works. */
.paused-board h2{font-size:24px;margin:0 0 6px}
.paused-board .paused-level{display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px;color:var(--green);font-weight:600;margin:0 0 16px}
.paused-board .paused-level svg{margin:0}
.paused-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px;margin:0 0 20px}
.paused-stats span{display:flex;flex-direction:column;align-items:center}
.paused-stats b{font-size:22px;font-weight:550;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.paused-stats small{font-size:10px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase}
.paused-board .button{min-height:46px}
.paused-board .button.text{margin-top:8px}
.score-steps{padding-left:20px;margin:0 0 14px;display:grid;gap:10px;font-size:14px;line-height:1.45}
.score-steps b{font-weight:600}
/* Recent puzzles: every row the same shape, and each one shareable. */
.finish-row{display:grid;grid-template-columns:minmax(0,1fr) auto 44px;align-items:center;gap:10px;font-size:14px}
.finish-row .finish-what b{display:flex;align-items:center;gap:6px;font-weight:600}
.finish-row .finish-what em{font-style:normal;font-weight:500;color:#5f8577;font-size:12px}
.finish-row .finish-result{text-align:right;font-variant-numeric:tabular-nums}
.finish-row .finish-result b{font-weight:600;font-size:15px}
.finish-row .finish-result b small{display:inline;font-size:11px;font-weight:500;color:var(--muted);margin:0}
.finish-row small{font-size:12px}
.finish-row .no-score{font-weight:400;font-size:13px;color:var(--muted)}
.finish-share{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--green);display:grid;place-items:center}
@media(hover:hover){.finish-share:hover{background:var(--mint)}}
.paused-board>div{display:flex;flex-direction:column;align-items:center}
/* Sign in: Apple and Google first, email below a rule. */
.provider-buttons{display:grid;gap:10px;margin:4px 0 14px}
.provider-button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;border-radius:10px;font-size:16px;font-weight:600;border:1px solid var(--line);background:var(--paper);color:#1f1f1f}
.provider-button.apple{background:#000;border-color:#000;color:#fff}
@media(hover:hover){.provider-button.google:hover{background:#f6f7f6}}
.or-rule{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);margin:0 0 10px}
.or-rule::before,.or-rule::after{content:'';flex:1;border-top:1px solid var(--line)}
/* Settings: the tutor plan, the story, the coffee menu. */
.tutor-plan{margin:0 0 16px}
.usage-meter{height:10px;border-radius:5px;background:#e3e9e3;overflow:hidden;margin:4px 0 8px}
.usage-meter span{display:block;height:100%;background:var(--green);border-radius:5px;min-width:2px}
.about-panel p{font-size:15px;line-height:1.55}
.about-panel .signoff{font-style:italic;color:var(--muted);margin-top:-4px}
.offer-list{display:grid;gap:10px;margin:0 0 14px}
.offer-button{display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:left;width:100%;min-height:60px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink)}
.offer-button span{display:flex;flex-direction:column;gap:3px}
.offer-button span b{font-size:15px;font-weight:600}
.offer-button small{font-size:12px;color:var(--muted);line-height:1.4}
.offer-button>b{font-size:16px;color:var(--green);white-space:nowrap}
.offer-button>b small{font-weight:500}
@media(hover:hover){.offer-button:hover{border-color:#b9d3c6;background:#f7fbf8}}
.linkish{border:0;background:none;padding:0;color:var(--green);text-decoration:underline;font-size:inherit}
/* Settings ends on one line: the maker, then privacy and terms. */
.settings-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;margin-top:22px}
.settings-links .maker-credit b{color:var(--green);font-weight:600}
.settings-links a,.settings-links button{border:0;background:none;padding:10px 0;font:inherit;font-size:13px;color:var(--muted);text-decoration:none}
@media(hover:hover){.settings-links a:hover,.settings-links button:hover{color:var(--green)}}
/* The coffee pop-up reads as one voice: every line the same size, the secondary ones in grey. */
.coffee-copy p,.coffee-copy .offer-list p{font-size:14px;line-height:1.6;margin:0 0 14px}
.coffee-copy .offer-list{margin:16px 0}
/* Lessons wear the blue palette everywhere, including the worked-example box and the answer choices. */
.lesson-page .foundation-copy{color:#3b4f66}
.lesson-page .foundation-example{border-left-color:#7d9dc2;background:#edf2f8;color:#34506e}
.lesson-page .foundation-example .eyebrow{color:#2f5f8a}
@media(hover:hover){.lesson-page .answer-options button:hover{background:var(--mint);border-color:#9fb7d3}}
.lesson-page .example-row,.lesson-page .example-cell,.lesson-page .example-row>span:nth-child(3n){border-color:#9aaec4}

/* Learn on a computer: the basics as a grid of cards, the techniques in two columns. */
@media(min-width:1024px){
  #view:has(.lesson-section) .page-heading{margin-bottom:28px}
  .lesson-section .lesson-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;border:0}
  .lesson-section .lesson-list .lesson-row{border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:16px 18px}
  @media(hover:hover){.lesson-section .lesson-list .lesson-row:hover{border-color:#b9cfc3;background:#fbfcfa}}
  #technique-results{column-count:2;column-gap:48px}
  #technique-results .technique-group{break-after:avoid;margin-top:0;padding-top:24px}
  #technique-results .lesson-row{break-inside:avoid}
  .lesson-page{max-width:720px}
}

/* Phone top line: the two groups never shrink into each other; fitTopline() sheds detail until the line fits. */
.puzzle-badge svg{display:none}
@media(max-width:1023px){
  .game-topline .topline-puzzle,.game-topline .topline-status{flex-shrink:0}
  .game-topline.fit-new .new-game span{display:none}
  .game-topline.fit-new .new-game{width:34px;padding:0;justify-content:center}
  .game-topline.fit-badge .puzzle-badge>span{display:none}
  .game-topline.fit-badge .puzzle-badge svg{display:block;opacity:1}
  .game-topline.fit-badge .game-pill .puzzle-badge{padding:0 7px 0 10px}
  .game-topline.fit-rating .game-pill .difficulty-pill em{display:none}
  .game-topline.fit-chevron .game-pill .difficulty-pill>svg:last-child{display:none}
  .game-topline.fit-chevron .topline-chip{padding:0 7px}
  .game-topline.fit-pause .clock-chip>svg{display:none}
  .game-topline.fit-squeeze .topline-puzzle,.game-topline.fit-squeeze .game-pill,.game-topline.fit-squeeze .difficulty-pill{flex-shrink:1;min-width:0}
  .game-topline.fit-squeeze .difficulty-pill>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .game-topline.fit-squeeze .score-chip .slips{gap:2px}.game-topline.fit-squeeze .score-chip .slips i{width:6px;height:6px}
}

/* ---------- The website on a computer: the board as a sheet of paper, with a notebook margin beside it ----------
   Tools in a slim rail on the left; the pencil and pen rows under the board, as in the app; and in the margin, the
   scorecard at the top with hints and the tutor written below it. */
.margin-note{display:none}
@media(min-width:1024px){
  .site-header{max-width:none;height:68px;margin:0;padding:0 max(32px,calc((100vw - 1240px) / 2));background:var(--paper)}
  .main-nav{gap:4px}.main-nav a{font-size:14px;padding:10px 16px;border-radius:9px}.main-nav a svg{display:block}
  #view{max-width:1240px;padding:24px 32px 40px;margin:0 auto}
  #view:has(.play-workspace){min-height:0}

  .play-workspace,.play-workspace.with-coach{--margin:clamp(280px,26vw,360px);--board:clamp(400px,min(calc(100svh - 268px),calc(100vw - 256px - var(--margin))),640px);--top:150px;--rule:#efc6b8;--serif:ui-serif,'New York','Iowan Old Style',Georgia,serif;max-width:none}
  .play-layout,.with-coach .play-layout{display:grid;justify-content:center;column-gap:24px;row-gap:12px;
    grid-template-columns:72px calc(var(--board) + 20px) var(--margin);
    grid-template-rows:var(--top) calc(var(--board) + 8px - var(--top)) 48px 60px;
    grid-template-areas:"tools board top" "tools board margin" "tools notes margin" "tools pad margin"}
  .play-layout .game-column{display:contents}
  /* The margin's rule runs the full height beside the scorecard and notes. */
  .play-layout::before{content:'';grid-column:3;grid-row:1 / -1;justify-self:start;align-self:stretch;width:0;border-left:2px solid var(--rule);margin-left:-2px}
  .play-layout>.game-column>*,.play-layout>.coach-column{min-width:0}
  .play-layout #board-area{grid-area:board}
  .play-layout .play-grid{box-shadow:0 22px 50px #21362b12,0 2px 6px #21362b0d}
  .play-layout .big-number{font-size:clamp(28px,calc(var(--board) / 15),42px)}
  .play-layout .play-cell .note-number{font-size:clamp(10px,calc(var(--board) / 52),13px)}
  .play-layout .board-axis{font-size:10px}

  /* Tool rail. */
  .play-layout .board-tools,.play-layout .board-tools.ranked-tools{grid-area:tools;display:flex;flex-direction:column;gap:4px;margin:26px 0 0;align-self:start}
  .play-layout .board-tools .button{flex-direction:column;gap:6px;min-height:66px;padding:8px 4px;border:0;border-radius:12px;background:none;font-size:12px;color:var(--muted)}
  .play-layout .board-tools .button svg{width:20px;height:20px;color:var(--green)}
  @media(hover:hover){.play-layout .board-tools .button:hover{background:var(--mint);color:var(--green)}}
  .play-layout .board-tools .button.selected{background:var(--mint);color:var(--green)}

  /* Pencil and pen rows under the board. */
  .play-layout .notes-pad{grid-area:notes;margin:0 0 0 20px;gap:6px}
  .play-layout .entry-pad{grid-area:pad;margin:0 0 0 20px;gap:6px}
  .play-layout .notes-pad button{min-height:48px;font-size:26px}
  .play-layout .entry-pad button{min-height:60px;padding:4px 0}
  .play-layout .entry-pad b{font-size:26px}

  /* The margin: the scorecard. */
  .play-layout .game-topline{grid-area:top;flex-direction:column;align-items:stretch;justify-content:space-between;gap:10px;margin:0;padding:6px 0 14px 28px;border-bottom:1px solid var(--line);min-height:0}
  .play-layout .game-topline .topline-puzzle{justify-content:space-between;align-items:flex-start;gap:12px}
  .play-layout .game-topline .game-pill{display:flex;flex-direction:column;align-items:flex-start;gap:4px;height:auto;min-height:0;border:0;background:none;padding:0;border-radius:6px;text-align:left}
  .play-layout .game-topline .game-pill::after{inset:-6px}
  .play-layout .game-topline .game-pill .puzzle-badge{background:none;box-shadow:none;color:var(--green);padding:0;min-height:0;border-radius:0;font-size:11px;letter-spacing:1.4px}
  .play-layout .game-topline .game-pill .difficulty-pill{font-family:var(--serif);font-size:32px;font-weight:600;letter-spacing:-.6px;color:var(--ink);padding:0;gap:8px;line-height:1.1}
  .play-layout .game-topline .game-pill .puzzle-badge+.difficulty-pill{padding:0}
  .play-layout .game-topline .game-pill .difficulty-pill em{font-family:inherit;font-weight:400;color:var(--muted)}
  .play-layout .game-topline .game-pill .difficulty-pill>svg{width:18px;height:18px;color:var(--green)}
  .play-layout .game-topline .game-pill .difficulty-pill>svg:last-child{width:14px;height:14px;opacity:.6}
  @media(hover:hover){.play-layout .game-topline .game-pill:hover .difficulty-pill em{color:var(--green)}}
  .play-layout .game-topline .new-game{order:2;height:36px;font-size:14px;padding:0 14px 0 10px;border-radius:18px;flex:none}
  .play-layout .game-topline .topline-status{justify-content:space-between;gap:8px}
  .play-layout .topline-chip{height:38px;border:0;background:none;padding:0 8px;margin:0 -8px;border-radius:10px;font-size:17px;color:var(--ink)}
  .play-layout .score-chip .live-score b{font-size:18px}.play-layout .score-chip .live-score small{display:inline;font-size:12px;color:var(--muted);margin-left:2px}
  .play-layout .score-chip .live-score+.slips{border:0;padding-left:4px}
  .play-layout .clock-chip{color:var(--muted)}.play-layout .clock-chip svg{width:16px;height:16px}

  /* The margin: notes, hints and the tutor, written beside the board. */
  .play-layout .margin-note,.play-layout .coach-column,.play-layout .game-completion{grid-area:margin;align-self:stretch;min-height:0;overflow:auto;padding:6px 4px 0 28px;margin:0}
  .play-layout .margin-note{display:block}
  .with-coach .margin-note,.game-column.solved .margin-note{display:none}
  .margin-hand{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.55;color:#4d625a;margin:6px 0 14px}
  .margin-hand button{border:0;background:none;padding:0;font:inherit;color:var(--green);text-decoration:underline;text-decoration-color:#9cc3b3;text-underline-offset:3px;cursor:pointer}
  .margin-keys{font-size:12px;line-height:2;color:var(--muted);margin:26px 0 0;padding-top:14px;border-top:1px dashed var(--line)}
  .margin-keys kbd{font:inherit;font-size:11px;padding:1px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:var(--paper);color:var(--ink)}
  .play-layout .coach-column{border:0;background:none}
  .play-layout .coach-column .hint-top h2,.play-layout .coach-column .hint-technique{font-family:var(--serif);font-size:26px}
  .play-layout .coach-column .tutor-body{max-height:none}
  .play-layout .coach-card{border-bottom:0}
  .play-layout .game-completion{background:none;border:0;border-radius:0;gap:16px;justify-content:flex-start}
  .play-layout .game-completion .result-summary b{font-family:var(--serif);font-size:26px}
  .play-layout .game-completion .result-actions{grid-template-columns:1fr 1fr}
}

/* ---------- The website's own shell: the same header as every page on the site, and no app tab bar ---------- */
.topline-share,.web-share{display:none}
.web .web-top{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line)}
.web-top-in{max-width:1240px;margin:0 auto;height:68px;padding:0 32px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.web-brand{justify-self:start;display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-size:22px;font-weight:650;letter-spacing:-.03em}
.web-brand svg{color:var(--green)}.web-brand b{font-weight:400;color:var(--green)}
.web-nav{display:flex;gap:4px}
.web-nav a{color:var(--muted);text-decoration:none;font-size:15px;padding:10px 16px;border-radius:9px;white-space:nowrap}
@media(hover:hover){.web-nav a:hover{color:var(--green);background:var(--mint)}}
.web-nav a{font-weight:500}
.web-nav a[aria-current]{color:var(--green);background:var(--mint)}
.web-end{justify-self:end;position:relative}
.web-account{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid var(--line);border-radius:20px;background:var(--paper);color:var(--ink);font-size:14px;position:relative}
.web-account::after{content:'';position:absolute;inset:-4px}
.web-account .ico-menu{display:none}.web-account>span{display:inline-flex}
.web-account svg{color:var(--green)}
.web-account.active,.web-account[aria-expanded="true"]{background:var(--mint);border-color:#cfe0d7;color:var(--green)}
.web-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:236px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px #21362b1f;padding:8px;display:flex;flex-direction:column;z-index:50}
.web-menu[hidden]{display:none}
.web-menu a,.web-menu button{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border:0;background:none;border-radius:9px;color:var(--ink);text-decoration:none;font-size:15px;text-align:left;width:100%}
@media(hover:hover){.web-menu a:hover,.web-menu button:hover{background:var(--mint);color:var(--green)}}
.web-menu svg{color:var(--green);flex:none}
.web-menu a.active{color:var(--green);font-weight:600}
.web-menu-pages{display:none}
@media(max-width:860px){
  .web-top-in{grid-template-columns:1fr auto;height:60px;padding:0 16px;padding-top:env(safe-area-inset-top)}
  .web-nav{display:none}
  .web-account .ico-menu{display:inline-flex}.web-account .ico-user{display:none}
  .web-menu-pages{display:flex;flex-direction:column;border-bottom:1px solid var(--line);margin-bottom:6px;padding-bottom:6px}
  .web-menu-pages a[aria-current]{color:var(--green);font-weight:600}
}
@media(max-width:720px){
  body.web{padding-bottom:0}
  .web #view{min-height:calc(100svh - 60px)}
  .web .app-toast{bottom:calc(20px + env(safe-area-inset-bottom))}
  /* No tab bar on the website, so the board takes that room, less a line for sharing. */
  .web .play-workspace .game-column{max-width:min(calc(100% - 16px),534px,max(260px,calc(100svh - 368px - env(safe-area-inset-top) - env(safe-area-inset-bottom))))}
  .web .web-share{display:flex;justify-content:center;margin:6px 0 0}
  .web .web-share .button{margin:0;min-height:44px}
}
@media(min-width:721px) and (max-width:1023px){.web .web-share{display:flex;margin-top:10px;margin-left:20px}}

/* On a computer: the scorecard in the margin has the puzzle's name, its score and time, then Share and New. */
@media(min-width:1024px){
  .web .play-workspace{--top:196px}
  .web .play-layout .game-topline{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;grid-template-areas:"pill pill" "score clock" "share new";align-content:space-between;gap:10px 12px}
  .web .play-layout .game-topline .topline-puzzle,.web .play-layout .game-topline .topline-status{display:contents}
  .web .play-layout .game-topline .game-pill{grid-area:pill}
  .web .play-layout .game-topline .score-chip{grid-area:score;justify-self:start}
  .web .play-layout .game-topline .clock-chip{grid-area:clock;justify-self:end}
  .web .play-layout .game-topline .topline-share{grid-area:share;display:inline-flex;align-items:center}
  .web .play-layout .game-topline .new-game{grid-area:new}
  .web .play-layout .game-topline .topline-share,.web .play-layout .game-topline .new-game{order:0;justify-content:center;gap:7px;height:40px;border-radius:20px;border:1px solid var(--line);background:var(--paper);color:var(--green);font-size:14px;font-weight:550;padding:0 14px}
  @media(hover:hover){.web .play-layout .game-topline .topline-share:hover,.web .play-layout .game-topline .new-game:hover{background:var(--mint)}}

  /* Stats and Settings read as pages of the site: a serif title, then each section with its name in the margin. */
  .web #view:not(:has(.play-workspace)):not(:has(.lesson-page)){max-width:1120px}
  .web #view:not(:has(.play-workspace)) .page-heading{padding-left:254px;margin:18px 0 8px}
  .web #view:not(:has(.play-workspace)) .page-heading h1{font-family:ui-serif,'New York','Iowan Old Style',Georgia,serif;font-size:48px;font-weight:600;letter-spacing:-.02em}
  .web .settings-layout,.web .progress-columns{display:block}
  .web .stat-grid{margin:0 0 0 254px}
  .web #view .panel,.web .stats-actions{position:relative;padding:40px 0 40px 254px;margin:0;border-top:1px solid var(--line)}
  .web #view .panel::before,.web .stats-actions::before{content:'';position:absolute;left:210px;top:0;bottom:0;border-left:2px solid #efc6b8}
  .web #view .panel>h2,.web #view .panel>.panel-heading{position:absolute;left:0;top:40px;width:182px;text-align:right;display:block;margin:0}
  .web #view .panel>h2,.web #view .panel>.panel-heading h2{font-family:ui-serif,'New York','Iowan Old Style',Georgia,serif;font-style:italic;font-weight:400;font-size:21px;line-height:1.3;color:#8a6f64;margin:0 0 8px}
  .web #view .panel>.panel-heading a{font-size:13px}
  .web #view .panel>*:not(h2):not(.panel-heading){max-width:720px}
  .web .stats-actions{display:flex;gap:12px}
}

/* The website's headline above the board, for someone new to the site. */
.web-hero{display:none}
.web .web-hero{display:block;margin:4px 0 18px}
.web-hero h1{font-family:ui-serif,'New York','Iowan Old Style',Georgia,serif;font-size:clamp(27px,3vw,42px);line-height:1.1;letter-spacing:-.02em;font-weight:600;margin:0 0 8px;color:var(--ink)}
.web-hero p{font-size:16px;line-height:1.55;color:var(--muted);margin:0;max-width:40em}
.web-hero-points{display:none;list-style:none;margin:0;padding:0}
@media(min-width:1024px){
  .web .play-workspace.with-hero{--board:clamp(380px,min(calc(100svh - 392px),calc(100vw - 256px - var(--margin))),640px)}
  .web .web-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:36px;width:max(960px,calc(var(--board) + var(--margin) + 140px));max-width:100%;margin:2px auto 22px}
  .web-hero h1{font-size:clamp(30px,2.7vw,38px);white-space:nowrap}
  .web-hero p{font-size:17px}
  .web-hero-points{display:grid;grid-template-columns:auto auto;gap:6px 24px;font-size:14px;color:var(--muted);padding-bottom:4px}
  .web-hero-points li{white-space:nowrap}
  .web-hero-points li::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#c9937f;margin-right:9px;vertical-align:2px}
}
/* A scrollbar that comes and goes would nudge the centered header sideways between pages. */
html:has(body.web){scrollbar-gutter:stable}
.web-brand{line-height:1.2}.web-nav a{line-height:1.4}.web-account{line-height:1.2}