:root{--paper:#f6f5f0;--ink:#233c35;--muted:#78847e;--green:#1d6256;--line:#d9ddd5;--wash:#e9eee7;--selected:#c8e0d4;--error:#a34035;--surface:#fffefb;--surface-bright:#fff;--on-accent:#fff;--accent-fill:#1d6256;--accent-fill-hover:#174e44;--border-strong:#bacabd;--border-soft:#cbd4c8;--mini-line:#a6b5a4;--text-soft:#66766b;--text-strong:#526356;--text-faint:#8f9890;--note:#688176;--sage:#739c75;--focus:#b88e42;--selected-ring:#72a38e;--cell-line:#d6dcd4;--related:#f0f3ed;--same:#e0eade;--conflict-bg:#fbe7e0;--conflict-ring:#c67e69;--diagram-bg:#f6f7f2;--card:#eaece3;--pad-border:#dfe3d9;--tip-symbol:#9c956d;--warning-bg:#f0e5ca;--warning-ink:#6f5824;--hard-frame:#252a2d}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:3px}button:disabled{opacity:.36;cursor:default}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.masthead{height:100px;max-width:1120px;margin:auto;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:20px}.brand{display:flex;align-items:center;gap:10px;font-size:25px;letter-spacing:-1.2px;text-decoration:none;color:var(--ink);font-weight:700}.brand-mark{font-size:37px;line-height:1;color:var(--green)}.brand-sub{letter-spacing:2.3px;font-size:10px;margin:8px 0 0 2px;font-weight:400}.tagline{margin-left:auto;font:italic 16px Georgia,serif;color:var(--muted)}main{max-width:1000px;margin:0 auto}.intro{display:flex;align-items:center;justify-content:space-between;padding:46px 0 32px}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:700;color:var(--muted)}h1{font:normal 54px/1.05 Georgia,serif;letter-spacing:-2px;margin:12px 0 0}h2{font:normal 36px/1.17 Georgia,serif;letter-spacing:-.8px}.intro p{font-size:14px;line-height:1.7;color:var(--muted);margin:20px 4px 0}.game-layout{display:grid;grid-template-columns:minmax(0,550px) 1fr;gap:70px}.board-shell{position:relative}#board{display:grid;grid-template-columns:repeat(9,1fr);aspect-ratio:1;border:2px solid var(--ink);border-radius:3px;overflow:hidden;background:var(--surface);box-shadow:0 8px 30px #32463a05}.cell{position:relative;border:0;border-right:1px solid var(--cell-line);border-bottom:1px solid var(--cell-line);background:transparent;font-size:29px;font-weight:400;padding:0;min-width:0;min-height:0;line-height:1;display:flex;align-items:center;justify-content:center;color:var(--green);user-select:none}.cell:nth-child(3n){border-right:2px solid var(--ink)}.cell:nth-child(9n){border-right:0}.cell:nth-child(n+19):nth-child(-n+27),.cell:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid var(--ink)}.cell:nth-child(n+73){border-bottom:0}.cell.given{color:var(--ink);font-weight:500}.cell.related{background:var(--related)}.cell.same{background:var(--same)}.cell.selected{background:var(--selected);box-shadow:inset 0 0 0 2px var(--selected-ring)}.cell.conflict{color:var(--error);background:var(--conflict-bg)}.cell.selected.conflict{box-shadow:inset 0 0 0 2px var(--conflict-ring)}.cell:focus-visible{outline:0;box-shadow:inset 0 0 0 3px var(--focus)}.pencil-grid{display:grid;grid-template-columns:repeat(3,1fr);position:absolute;inset:4px;font-size:11px;line-height:1;align-items:center;color:var(--note)}.pencil-grid span{display:flex;justify-content:center;align-items:center}.board-footer{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);padding:13px 0 21px;gap:5px}.board-footer i{display:inline-block;width:5px;height:5px;background:var(--sage);border-radius:50%;margin-right:4px}.number-pad{display:grid;grid-template-columns:repeat(9,1fr);gap:6px}.number-pad button{border:1px solid var(--pad-border);background:var(--surface);border-radius:5px;height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:25px;color:var(--green)}.number-pad button small{font-size:9px;color:var(--muted)}.number-pad button:hover{background:var(--wash)}.number-pad.notes-mode button{border-style:dashed}.tools{display:flex;justify-content:space-around;padding:23px 4px 0;gap:5px}.tools button{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;color:var(--text-soft);padding:8px 12px;border-radius:6px}.tools small{font-size:8px;letter-spacing:.7px;margin-left:2px}.status{font-size:12px;line-height:1.5;color:var(--text-soft);text-align:center;min-height:36px;margin:16px 0 0}.sidebar{padding-top:76px}.aside-heading h2{margin:17px 0}.aside-heading p{font-size:14px;line-height:1.8;color:var(--muted);margin:0 0 27px}.primary,.secondary{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 19px;border-radius:5px;font-size:13px;border:1px solid var(--accent-fill);background:var(--accent-fill);color:var(--on-accent)}.primary:hover{background:var(--accent-fill-hover)}.secondary{margin-top:10px;background:transparent;color:var(--ink);border-color:var(--border-soft)}.primary span,.secondary span{font-size:19px}.divider{height:1px;background:var(--line);margin:31px 0}.tip{display:flex;gap:17px}.tip-symbol{font-size:31px;color:var(--tip-symbol);margin-top:2px}.tip p{font:17px/1.6 Georgia,serif;margin:9px 0 0;color:var(--text-soft)}.rule-card{display:flex;align-items:center;gap:17px;margin-top:30px;background:var(--card);padding:20px 17px;border-radius:5px}.rule-card strong{font-size:11px;font-weight:600}.rule-card p{font-size:11px;line-height:1.7;color:var(--muted);margin:7px 0 0}.mini-grid{display:grid;grid-template-columns:repeat(3,16px);flex-shrink:0;border-top:1px solid var(--mini-line);border-left:1px solid var(--mini-line);color:var(--sage)}.mini-grid span{font-size:8px;height:16px;border-right:1px solid var(--mini-line);border-bottom:1px solid var(--mini-line);text-align:center;padding-top:3px}.keyboard-hint{font-size:10px;line-height:2;color:var(--text-faint);margin:23px 0}kbd{font:inherit;color:var(--text-soft)}footer{display:flex;justify-content:space-between;max-width:1120px;margin:44px auto 0;padding:23px 0;border-top:1px solid var(--line);color:var(--text-faint);font-size:10px}footer span:last-child{font-size:8px;letter-spacing:2px}dialog{border:1px solid var(--line);border-radius:12px;padding:35px;max-width:430px;width:calc(100% - 36px);background:var(--paper);color:var(--ink);box-shadow:0 20px 100px #122e3440}dialog::backdrop{background:#15352d66;backdrop-filter:blur(3px)}dialog h2{margin:16px 0;font-size:32px}#dialog-body{font-size:14px;line-height:1.7;color:var(--text-soft)}#dialog-body p{margin:12px 0}#dialog-actions{display:flex;gap:10px;margin-top:25px}#dialog-actions button{justify-content:center}.dialog-close{position:absolute;right:13px;top:10px;border:0;background:transparent;font-size:26px;color:var(--muted)}
@media(min-width:1450px){main{max-width:1030px}.game-layout{grid-template-columns:560px 1fr;gap:90px}.intro{padding-top:55px}}
@media(max-width:1150px){.masthead,footer{margin-left:35px;margin-right:35px}main{margin-left:60px;margin-right:60px}.game-layout{gap:40px;grid-template-columns:minmax(0,520px) minmax(220px,1fr)}}
@media(prefers-reduced-motion:no-preference){button{transition:background .15s,box-shadow .15s}}
/* Home screen installation and a browsable solving guide. */
[hidden]{display:none!important}.brand-icon{border-radius:8px}.tip-content{min-width:0;flex:1}.tip h3{font-size:14px;font-weight:600;margin:12px 0 0}.tip h3+p{font-size:16px;margin-top:8px}.tip-counter{display:block;font-size:10px;color:var(--muted);margin-top:13px}.tip-controls{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}.tip-controls button{border:1px solid var(--border-soft);background:transparent;border-radius:4px;padding:9px 10px;font-size:11px;min-height:35px}.tip-controls button:hover{background:var(--wash)}dialog{max-height:calc(100dvh - 40px);overflow:auto;overscroll-behavior:contain}.guide-section>h3{font:24px Georgia,serif;margin:27px 0 12px;color:var(--ink)}.guide-section details{border-top:1px solid var(--line);padding:12px 0}.guide-section details:last-child{border-bottom:1px solid var(--line)}.guide-section summary{cursor:pointer;color:var(--green);font-size:14px;font-weight:600;padding:3px 0;line-height:1.5}.guide-section summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px}.tip-example{background:var(--wash);padding:12px 14px;border-radius:5px;font-size:12px}.install-banner{position:fixed;right:24px;bottom:max(24px,env(safe-area-inset-bottom));width:min(420px,calc(100% - 32px));z-index:5;display:flex;align-items:flex-start;gap:14px;background:var(--surface);border:1px solid var(--border-soft);border-radius:12px;padding:20px 36px 18px 18px;box-shadow:0 10px 45px #173f3225}.install-banner>img{border-radius:11px;flex-shrink:0}.install-banner strong{font-size:13px;line-height:1.5}.install-banner p{font-size:12px;line-height:1.5;margin:5px 0 12px;color:var(--muted)}#install-now{border:0;border-radius:4px;background:var(--accent-fill);color:var(--on-accent);padding:10px 14px;font-size:12px;min-height:38px}#install-now span{margin-left:15px}#install-dismiss{position:absolute;right:6px;top:6px;border:0;background:transparent;color:var(--muted);font-size:24px;width:32px;height:32px}.install-dialog-icon{text-align:center;margin:18px 0}.install-dialog-icon img{border-radius:16px}

/* Icon controls reclaim space for the board. */
.mobile-only{display:none}
#board{grid-template-rows:repeat(9,minmax(0,1fr))}
.primary>.control-label,.secondary>.control-label{font-size:inherit}
.control-icon{flex-shrink:0}
.game>.tools{padding-top:0;padding-bottom:16px}
@media(max-width:800px),(max-width:1000px) and (max-height:500px) and (orientation:landscape){
  :root{
    --mobile-top:env(safe-area-inset-top,0px);
    --mobile-bottom:env(safe-area-inset-bottom,0px);
    --mobile-left:env(safe-area-inset-left,0px);
    --mobile-right:env(safe-area-inset-right,0px);
    --mobile-width:calc(100vw - 12px - var(--mobile-left) - var(--mobile-right));
    --board-size:min(var(--mobile-width),max(180px,calc(100dvh - 204px - var(--mobile-top) - var(--mobile-bottom))));
  }
  body{min-height:100dvh}
  .masthead{height:calc(44px + var(--mobile-top));margin:0 calc(6px + var(--mobile-right)) 0 calc(6px + var(--mobile-left));padding:var(--mobile-top) 0 0;gap:6px}
  .brand{font-size:19px;gap:6px;margin-right:auto}
  .brand-icon{width:25px;height:25px;border-radius:6px}
  .brand-sub{font-size:7px;letter-spacing:1.4px;margin-top:4px}
  .masthead .tagline{display:none}
  main{width:var(--mobile-width);max-width:none;margin:0 calc(6px + var(--mobile-right)) 0 calc(6px + var(--mobile-left));padding:4px 0 calc(4px + var(--mobile-bottom))}
  .intro,footer{display:none}
  .game-layout{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));row-gap:4px;column-gap:0}
  .game,.tools,.sidebar{display:contents}






  .board-shell{grid-column:1/-1;grid-row:2;width:var(--board-size);max-width:100%;justify-self:center}
  .cell{font-size:clamp(18px,calc(var(--board-size)/14),42px)}
  .pencil-grid{inset:2px;font-size:clamp(7px,calc(var(--board-size)/40),15px)}
  .board-footer{grid-column:1/-1;grid-row:3;height:16px;padding:0;font-size:9px;align-items:center}
  .number-pad{grid-column:1/-1;grid-row:4;gap:3px;height:44px}
  .number-pad button{height:44px;font-size:24px;gap:2px}
  .number-pad button small{font-size:8px}
  .tools>button,.sidebar>.primary,.sidebar>.secondary{position:relative;grid-row:1;display:flex;align-items:center;justify-content:center;flex-direction:row;height:44px;min-width:0;margin:0;padding:0;border:0;border-radius:6px;background:transparent;color:var(--green)}
  #hint{grid-column:1}#undo{grid-column:2}#erase{grid-column:3}#new-game{grid-column:4}#auto-notes{grid-column:5}#check{grid-column:6}
  .tools>button svg,.sidebar>button svg{width:22px;height:22px}
  .tools>button:hover,.sidebar>button:hover{background:var(--wash)}
  .control-label{display:none}
  .status{grid-column:1/-1;grid-row:5;height:32px;min-height:32px;margin:0;font-size:11px;line-height:16px;overflow:auto;overflow-wrap:anywhere}
  .aside-heading,.divider,.rule-card,.keyboard-hint,.sidebar .tip{display:none}
  dialog{padding:28px 22px;max-height:calc(100dvh - 24px - var(--mobile-top) - var(--mobile-bottom))}
  dialog h2{font-size:28px}
  .install-banner{left:calc(6px + var(--mobile-left));right:calc(6px + var(--mobile-right));bottom:auto;top:calc(48px + var(--mobile-top));width:auto;gap:10px;padding:12px 36px 12px 12px}
  .install-banner>img{width:36px;height:36px;border-radius:8px}
  .install-banner strong{font-size:12px}
  .install-banner p{margin:3px 0 7px;font-size:11px}
  #install-now{padding:7px 12px;min-height:32px;font-size:11px}
}
/* Landscape uses the full available height for the grid. */
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){
  :root{--board-size:min(calc((var(--mobile-width) - 12px)/2),max(150px,calc(100dvh - 52px - var(--mobile-top) - var(--mobile-bottom))))}
  main{height:calc(100dvh - 44px - var(--mobile-top));min-height:240px}
  .game-layout{height:100%;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:44px 44px minmax(0,1fr) 32px;gap:4px 12px}
  .game{display:contents}




  .board-shell{grid-column:1;grid-row:1/-1;align-self:start}
  .board-footer{display:none}
  .number-pad{grid-column:2;grid-row:3;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));height:100%}
  .number-pad button{height:100%;min-height:0;font-size:21px;gap:1px}
  .game>.tools{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:0;height:44px}
  .sidebar{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:0;height:44px}
  .tools>button,.sidebar>#auto-notes,.sidebar>#check{grid-column:auto;grid-row:auto}
  .status{grid-column:2;grid-row:4}
}
/* Personal records live entirely in the trophy dialog. */
.header-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;border:1px solid var(--border-strong);border-radius:5px;background:transparent;font-size:12px;white-space:nowrap}
.header-action svg{width:19px;height:19px}
#dialog-actions{flex-wrap:wrap}#dialog-actions button{flex:1 1 120px;width:auto;margin:0;min-height:42px}
.scores-dialog{max-width:520px}
.scores-dialog h3{font-size:14px;margin:24px 0 12px;color:var(--ink)}
.score-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,135px),1fr));gap:10px;margin:20px 0 15px}
.score-summary>div{background:var(--wash);padding:14px;border-radius:7px;min-width:0;display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:12px;align-items:center;overflow-x:auto}
.score-summary>.score-wide{grid-column:1 / -1}
.score-summary>div>.score-icon{grid-row:1 / 3}
.score-summary strong{display:block;font:clamp(22px,5vw,30px) Georgia,serif;color:var(--green)}
.score-summary span{display:block;font-size:11px;margin-top:3px}
.score-detail{font-size:11px;line-height:1.7}
.score-warning,.score-notice{padding:10px 12px;border-radius:5px;font-size:12px;background:var(--warning-bg);color:var(--warning-ink)}
.score-notice{background:var(--wash);color:var(--green)}
.score-table-wrap{overflow-x:auto}
.score-table{border-collapse:collapse;width:100%;font-size:12px;font-variant-numeric:tabular-nums}
.score-table th,.score-table td{padding:11px 5px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
.score-table thead th{font-size:10px;font-weight:600;line-height:1.5}
.score-table tbody th{font-weight:600;color:var(--ink)}
.score-table small{display:block;font-size:9px;white-space:nowrap;color:var(--muted);margin-top:4px}
.score-history article{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);font-size:12px}
.score-history article>div:last-child{text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}
.score-history strong{color:var(--ink)}
.score-history span,.score-history small{display:block;font-size:10px;line-height:1.6;margin-top:3px}
.score-history small{font-size:9px;color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.scores-dialog .score-number{white-space:nowrap;overflow-wrap:normal;word-break:normal;font-variant-numeric:tabular-nums}
.scores-dialog .score-icon{width:20px;height:20px;flex-shrink:0;color:var(--green);vertical-align:middle}
.score-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px 16px;margin:20px 0}
.score-details>div{min-width:0;overflow-x:auto}
.score-detail-label{display:block;font-size:11px;line-height:1.5;margin-top:4px}
.scores-dialog .score-metric{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;margin:0;font-size:13px;line-height:1.4}
.score-metric .score-number{font-weight:600}
.score-column{display:inline-flex;flex-direction:column;align-items:center;gap:4px;min-height:24px;font-size:9px}
.score-table td:not(:first-child),.score-table th:not(:first-child){text-align:right}
.score-history .score-assistance{display:flex;align-items:center;gap:5px}
.score-history .score-assistance .score-icon{width:14px;height:14px}
.score-game{min-width:0;max-width:100%}
.score-game-metrics{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px}
.score-game-metrics .score-icon{width:16px;height:16px}
.score-history .score-metric-label{display:inline;font-size:10px;line-height:inherit;margin:0}
.score-history .score-result{margin-left:auto;align-self:center;max-width:100%;overflow-x:auto}
.score-history .score-result small{display:inline;font-size:10px}
.scores-dialog #dialog-actions button{justify-content:center;gap:8px;min-height:44px}
.score-empty{padding:18px 0;font:17px/1.6 Georgia,serif}
.score-rules{margin-top:22px;padding:14px 0;border-block:1px solid var(--line);font-size:12px}
.score-rules summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--green)}
.score-privacy{font-size:10px;line-height:1.7;color:var(--muted)}
@media(max-width:800px),(max-width:1000px) and (max-height:500px) and (orientation:landscape){
 .header-action{padding:0;width:36px;height:36px;border:0;flex-shrink:0}
 .header-action svg{width:21px;height:21px}
 .scores-dialog{padding:28px 18px}
}

/* Keep the remaining hint allowance inside the existing toolbar button. */
#hint{position:relative}
.hint-count{position:absolute;top:2px;right:2px;min-width:16px;height:16px;border-radius:8px;background:var(--accent-fill);color:var(--on-accent);font:700 10px/16px Arial,sans-serif;text-align:center;padding:0 3px;pointer-events:none}

/* Suppress the browser refresh gesture while retaining normal page/dialog scrolling. */
html,body{overscroll-behavior-y:none}

/* One header control shows the active level; choices stay inside the dialog. */
.difficulty-current{position:relative;width:40px;height:40px;padding:7px;flex-shrink:0}
.difficulty-icon{fill:none;stroke:none;flex-shrink:0}
.difficulty-icon .mountain-frame{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.difficulty-icon .mountain-easy,.difficulty-icon .mountain-medium,.difficulty-icon .mountain-hard{display:none}
[data-difficulty=easy] .mountain-easy,[data-difficulty=medium] .mountain-medium,[data-difficulty=hard] .mountain-hard{display:block}
.difficulty-letter{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.difficulty-dialog #dialog-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:18px}
#dialog-actions .difficulty-option{display:flex;align-items:center;gap:15px;width:100%;min-height:66px;padding:12px 15px;border:1px solid var(--line);border-radius:7px;background:transparent;text-align:left;color:var(--ink);justify-content:flex-start}
#dialog-actions .difficulty-option[aria-pressed=true]{background:var(--wash);border-color:var(--green)}
.difficulty-option strong,.difficulty-option small{display:block}
.difficulty-option strong{font-size:15px;font-weight:600}
.difficulty-option small{font-size:11px;color:var(--muted);margin-top:4px}
.difficulty-option .difficulty-icon{width:25px;height:25px;color:var(--green)}
.difficulty-selected{margin-left:auto;font-size:18px;color:var(--green)}
@media(max-width:360px){.masthead{gap:3px}.brand-sub{display:none}}

/* Hard uses a bold summit and a thicker badge border at toolbar size. */
[data-difficulty=hard] .mountain-frame{stroke:var(--hard-frame);stroke-width:2.7}

/* Wider number targets: Notes and 1–4 above 5–9. */
.number-pad{grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(2,auto)}
.number-pad button{grid-column:span 2}
.number-pad #notes{background:var(--surface-bright)}
.number-pad #notes[aria-pressed=true]{background:var(--accent-fill);border:1px solid var(--accent-fill);color:var(--on-accent)}
@media(max-width:800px),(max-width:1000px) and (max-height:500px) and (orientation:landscape){
 .number-pad{height:92px;grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(2,44px);gap:4px}
}
@media(max-width:800px) and (orientation:portrait){
 :root{--board-size:min(var(--mobile-width),max(180px,calc(100dvh - 252px - var(--mobile-top) - var(--mobile-bottom))))}
}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){
 .number-pad{height:100%;grid-template-rows:repeat(2,minmax(44px,1fr))}
}

/* Illustrated guide examples never read or write the active puzzle. */
.guide-dialog{max-width:680px}
.guide-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0 28px}
.guide-rules figure{margin:0;text-align:center;min-width:0}
.guide-rule-board{display:block;width:100%;height:auto;max-width:150px;margin:auto;stroke-width:.5;stroke:var(--line);border-radius:3px}
.guide-rule-board .rule-square{fill:var(--surface)}
.guide-rule-board .rule-highlight{fill:var(--selected)}
.guide-rule-board path{fill:none;stroke:var(--ink);stroke-width:1}
.guide-rule-board text{fill:var(--ink);stroke:none;font:6.5px Arial,sans-serif;text-anchor:middle;dominant-baseline:middle}
.guide-rules figcaption{font-size:13px;font-weight:600;color:var(--ink);margin-top:8px}
.guide-rules figcaption span{display:block;font-size:11px;font-weight:400;color:var(--text-soft)}
.guide-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.guide-feature{min-width:0;padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.guide-feature h4{font-size:14px;line-height:1.45;color:var(--ink);margin:14px 0 0}
#dialog-body .guide-feature p{font-size:13px;line-height:1.6;margin:8px 0 0}
.guide-demo{display:flex;align-items:center;gap:14px;min-width:0}
.guide-demo svg{display:block;flex:0 0 86px;width:86px;height:86px;stroke-width:1;stroke:var(--line)}
.guide-demo rect{fill:var(--surface)}
.guide-demo .demo-selected{fill:var(--selected);stroke:var(--selected-ring);stroke-width:2}
.guide-demo text{font:16px Arial,sans-serif;fill:var(--ink);stroke:none;text-anchor:middle;dominant-baseline:middle}
.guide-demo .demo-answer,.guide-demo .demo-remove{fill:var(--green)}
.guide-demo .demo-note{font-size:6px;fill:var(--text-strong)}
.guide-demo .demo-error{fill:var(--error)}
.guide-demo .demo-frame{fill:none;stroke:var(--ink);stroke-width:1.5}
.guide-demo .demo-error-ring{fill:none;stroke:var(--error);stroke-width:2}
.demo-control{font-size:11px;line-height:1.4;color:var(--green);background:var(--wash);border:1px solid var(--border-strong);border-radius:5px;padding:7px 9px;text-align:center}
.demo-remove{opacity:0}
@media(prefers-reduced-motion:no-preference){
 .guide-demo .demo-appear{animation:guide-reveal 2.4s ease both}
 .guide-demo .demo-remove{animation:guide-erase 2.4s ease both}
 @keyframes guide-reveal{0%,35%{opacity:0}75%,100%{opacity:1}}
 @keyframes guide-erase{0%,35%{opacity:1}75%,100%{opacity:0}}
}
@media(max-width:540px){
 .guide-features{grid-template-columns:minmax(0,1fr)}
 .guide-feature{display:grid;grid-template-columns:80px minmax(0,1fr);align-items:center;gap:10px 14px;padding:14px}
 .guide-feature>div:last-child{display:contents}
 #dialog-body .guide-feature p,.guide-feature .guide-replay{grid-column:1/-1;margin:0}
 .guide-demo{flex:0 0 80px;flex-direction:column;gap:8px}
 .guide-demo svg{flex-basis:auto;width:76px;height:76px}
 .guide-feature h4{margin:0}
 .guide-rules{gap:8px}
 .guide-rules figcaption{font-size:12px}
 .guide-rules figcaption span{font-size:10px}
}
.guide-replay{display:block;min-height:44px;margin-top:8px;padding:8px 0;border:0;background:transparent;color:var(--green);font-size:12px;text-decoration:underline;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){.guide-replay{display:none}}

/* Keep lessons readable as individual rules with their own worked image. */
.guide-nav{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 24px}
.guide-nav button{flex:1;min-height:44px;padding:9px 12px;background:var(--surface);border:1px solid var(--border-strong);border-radius:6px;color:var(--green);font-size:13px;white-space:nowrap}
.guide-nav button:hover{background:var(--wash)}
.guide-start{padding:16px 18px 16px 36px;margin:18px 0 30px;background:var(--wash);border-radius:7px}
.guide-start li{padding-left:3px;margin:8px 0;line-height:1.6}
.guide-start strong{color:var(--ink)}
#dialog-body .guide-callout{background:var(--wash);border-left:3px solid var(--green);padding:16px 18px;margin:24px 0}
.guide-callout h4{margin:0;color:var(--ink);font-size:14px}
.guide-callout ul{padding-left:18px;margin:8px 0 0}
.guide-callout li{margin:6px 0}
.guide-section details{margin:10px 0;border:1px solid var(--line);border-radius:7px;background:var(--surface);padding:0}
.guide-section summary{padding:16px 14px;min-height:52px;list-style-position:inside}
.guide-section details[open] summary{border-bottom:1px solid var(--line);background:var(--wash);border-radius:7px 7px 0 0}
.tip-number{display:inline-block;font-size:11px;font-weight:400;color:var(--text-soft);min-width:25px;margin-left:4px}
.tip-lesson{padding:2px 18px 16px}
.tip-lesson h4{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--green);margin:18px 0 0}
#dialog-body .tip-lesson>p{margin:7px 0 18px;line-height:1.75}
.diagram-key{display:flex;flex-wrap:wrap;gap:10px 20px;font-size:12px;margin:16px 0}
.diagram-key span{display:flex;align-items:center;gap:7px}
.diagram-key i{display:inline-flex;width:16px;height:16px;align-items:center;justify-content:center;font-style:normal}
.key-focus{background:var(--selected);border:1px solid var(--selected-ring);border-radius:2px}
.key-eliminate{color:var(--error);font-size:22px}
#dialog-body .guide-diagram-note{font-size:12px;line-height:1.6;margin-bottom:24px}
.tip-diagram{margin:18px 0;padding:18px 14px;background:var(--diagram-bg);border:1px solid var(--line);border-radius:6px}
.diagram-label{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:16px;text-align:center}
.tip-diagram-image{display:block;width:100%;height:auto;max-width:410px;margin:0 auto 16px;stroke:none;fill:none}
.tip-diagram-image.diagram-size-3{max-width:210px}
.tip-diagram-image rect{stroke:var(--border-soft);stroke-width:.7}
.diagram-square{fill:var(--surface)}
.diagram-unit{fill:var(--wash)}
.diagram-focus{fill:var(--selected)}
.tip-diagram-image text{fill:var(--ink);font:16px Arial,sans-serif;text-anchor:middle;dominant-baseline:middle;stroke:none}
.tip-diagram-image .diagram-candidates{font-size:11px}
.tip-diagram-image.diagram-size-9 text{font-size:14px}
.tip-diagram-image.diagram-size-9 .diagram-candidates{font-size:10px}
.tip-diagram-image .diagram-eliminated{fill:var(--error)}
.diagram-cross{stroke:var(--error);stroke-width:1.7;stroke-linecap:round;fill:none}
.diagram-boundary{stroke:var(--ink);stroke-width:1.2;fill:none}
.diagram-link{stroke:var(--green);stroke-width:1.4;stroke-dasharray:4 3;fill:none}
.tip-diagram-image .diagram-coordinate{font-size:8px;fill:var(--text-soft)}
.tip-diagram figcaption{font:13px/1.7 Arial,Helvetica,sans-serif;color:var(--text-strong)}
#tip-visual .tip-diagram{padding:12px 10px;margin:16px 0 0}
#tip-visual .diagram-label{font-size:11px}
#tip-visual .tip-diagram figcaption{font-size:12px;line-height:1.6}
@media(max-width:540px){
 .guide-nav{gap:6px}
 .guide-nav button{padding:9px 8px;font-size:12px}
 .tip-lesson{padding:2px 12px 12px}
 .tip-diagram{padding:14px 10px}
 .tip-number{min-width:21px}
 .guide-section summary{padding:14px 10px}
}

.guide-dialog h3[id]{scroll-margin-top:12px}

/* Only the dialog content scrolls; its close button stays within reach. */
dialog#dialog{padding:0;overflow:hidden}
dialog[open]{display:flex;flex-direction:column}
.dialog-scroll{min-height:0;overflow:auto;overscroll-behavior:contain;padding:35px}
#dialog .dialog-close{z-index:2;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:var(--paper);border:1px solid var(--line);border-radius:50%;color:var(--ink)}
#dialog .dialog-close:hover{background:var(--wash)}
@media(max-width:800px){.dialog-scroll{padding:52px 22px 28px}.scores-dialog .dialog-scroll{padding-left:18px;padding-right:18px}}

/* The logo opens a drawer holding the guide, install, theme, and credits. */
.brand{border:0;background:transparent;padding:4px 6px 4px 0;border-radius:8px;cursor:pointer}
.brand:hover .brand-icon{box-shadow:0 0 0 3px var(--wash)}
dialog#menu{position:fixed;inset:0 auto 0 0;margin:0;width:min(320px,86vw);max-width:none;height:100dvh;max-height:none;border:0;border-right:1px solid var(--line);border-radius:0 14px 14px 0;padding:calc(18px + env(safe-area-inset-top,0px)) 20px calc(20px + env(safe-area-inset-bottom,0px)) calc(20px + env(safe-area-inset-left,0px));overflow:auto}
.menu-head{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.menu-head .brand-icon{border-radius:7px}
.menu-title{font:20px Georgia,serif}
.menu-close{margin-left:auto;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:transparent;font-size:26px;line-height:1;color:var(--ink)}
.menu-close:hover{background:var(--wash)}
.menu-list{display:grid;gap:4px;padding:6px 0 16px;border-block:1px solid var(--line)}
.menu-item{display:flex;align-items:center;gap:14px;width:100%;min-height:48px;padding:10px 12px;border:0;border-radius:7px;background:transparent;color:var(--ink);font-size:15px;text-align:left}
.menu-item:hover{background:var(--wash)}
.menu-item svg{color:var(--green);flex-shrink:0}
.menu-switch{position:relative;margin-left:auto;width:38px;height:22px;border-radius:11px;background:var(--border-soft);flex-shrink:0}
.menu-switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--surface-bright)}
[aria-checked=true] .menu-switch{background:var(--accent-fill)}
[aria-checked=true] .menu-switch::after{transform:translateX(16px)}
.menu-credits{padding-top:18px;font-size:13px;line-height:1.7;color:var(--text-soft)}
.menu-credits p{margin:6px 0 18px}
.menu-credits a{color:var(--green);text-underline-offset:3px;overflow-wrap:anywhere}
@media(prefers-reduced-motion:no-preference){
 dialog#menu[open]{animation:menu-in .22s ease-out}
 dialog#menu[open]::backdrop{animation:menu-fade .22s ease-out}
 .menu-switch::after{transition:transform .15s}
 @keyframes menu-in{from{transform:translateX(-100%)}}
 @keyframes menu-fade{from{opacity:0}}
}

/* Dark theme: the head script and the menu switch set data-theme on the root element. */
:root[data-theme=dark]{color-scheme:dark;--paper:#151b19;--ink:#e2e8e3;--muted:#94a199;--green:#7ec4ae;--line:#2f3a36;--wash:#22302b;--selected:#2d5447;--error:#f08b7d;--surface:#1c2421;--surface-bright:#24302b;--on-accent:#fff;--accent-fill:#2a7a69;--accent-fill-hover:#33907c;--border-strong:#44564e;--border-soft:#3a4943;--mini-line:#4d5e56;--text-soft:#a5b2aa;--text-strong:#bac6be;--text-faint:#7f8c85;--note:#98b8a8;--sage:#8fb891;--focus:#d8ab5c;--selected-ring:#5fa58c;--cell-line:#2d3834;--related:#1f2a26;--same:#27372f;--conflict-bg:#4a2621;--conflict-ring:#c67e69;--diagram-bg:#19211e;--card:#1f2925;--pad-border:#34423d;--tip-symbol:#c4b97f;--warning-bg:#3d331c;--warning-ink:#e8cf90;--hard-frame:var(--ink)}

/* Nonogram's clues and three marking tools replace Sudoku's number pad. */
#board-scroll{overflow:auto;overscroll-behavior:contain}#board{grid-template-columns:var(--clue-w) repeat(var(--n),minmax(0,1fr));grid-template-rows:var(--clue-h) repeat(var(--n),minmax(0,1fr));border:0;border-radius:0;overflow:visible;background:transparent;box-shadow:none;user-select:none;touch-action:none}
#board .cell{border:0;border-right:1px solid var(--cell-line);border-bottom:1px solid var(--cell-line);background:var(--surface);font-size:clamp(10px,2.5vw,22px)}#board .cell.end-col{border-right:2px solid var(--ink)}#board .cell.end-row{border-bottom:2px solid var(--ink)}#board .cell.first-col{border-left:2px solid var(--ink)}#board .cell.first-row{border-top:2px solid var(--ink)}#board .cell[data-v="1"]{background:var(--ink)}#board .cell[data-v="-1"]{color:var(--muted)}#board .cell.active{box-shadow:inset 0 0 0 2px var(--selected-ring)}
.clue{display:flex;justify-content:flex-end;align-items:center;padding:0 4px 0 0;font-size:clamp(9px,2vw,14px);font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}.clue.col{flex-direction:column;justify-content:flex-end;padding:0 0 4px}.clue.done{color:var(--muted)}.clue.selected{background:var(--related)}.corner{display:flex;align-items:flex-end;justify-content:flex-end;color:var(--muted)}
#tools{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr}#tools button{grid-column:auto;display:flex;flex-direction:row;gap:8px;font-size:14px}#tools button[aria-pressed=true]{background:var(--accent-fill);color:var(--on-accent);border-color:var(--accent-fill)}.fill-icon{width:14px;height:14px;background:currentColor}.zoomed #board{min-width:570px;touch-action:pan-x pan-y}
#modal,#difficulty{padding:0;overflow:hidden;max-height:calc(100dvh - 24px)}#modal .dialog-close,#difficulty .dialog-close{z-index:2;right:8px;top:8px;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--paper)}#modal-content{font-size:14px;line-height:1.7;color:var(--text-soft)}.dialog-action{width:100%;padding:12px;border:1px solid var(--accent-fill);border-radius:5px;background:var(--accent-fill);color:var(--on-accent)}#difficulty-options{display:grid;gap:8px}#difficulty-options button{min-height:66px;padding:12px 15px;border:1px solid var(--line);border-radius:7px;background:transparent;text-align:left}#difficulty-options button[aria-pressed=true]{background:var(--wash);border-color:var(--green)}#difficulty-options small{display:block;color:var(--muted);margin-top:4px}
@media(max-width:800px),(max-width:1000px) and (max-height:500px) and (orientation:landscape){:root{--board-size:min(var(--mobile-width),max(150px,calc(100dvh - 190px - var(--mobile-top) - var(--mobile-bottom))))}.game-layout{grid-template-columns:repeat(4,minmax(0,1fr))}.tools>button{grid-row:1}#hint{grid-column:1}#undo{grid-column:2}#erase{grid-column:3}#new{grid-column:4}.board-shell{grid-row:2}.board-footer{grid-row:3}#tools{grid-row:4;height:44px}.status{grid-row:5;height:24px;min-height:24px}.sidebar{display:none}}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){:root{--board-size:min(calc((var(--mobile-width) - 12px)/2),calc(100dvh - 52px - var(--mobile-top) - var(--mobile-bottom)))}.game-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:44px 44px 44px 1fr;gap:4px 12px}.game>.tools{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(4,1fr)}.tools>button{grid-column:auto!important}.board-shell{grid-column:1;grid-row:1/-1}.board-footer{display:none}#tools{grid-column:2;grid-row:2}.status{grid-column:2;grid-row:3}}

#difficulty-options button{display:grid;grid-template-columns:25px 1fr;align-items:center;column-gap:15px}#difficulty-options button svg{grid-row:1 / 3;width:25px;height:25px}#difficulty-options button small{grid-column:2}