:root[data-theme=dark]{
  color-scheme:dark;
  --bg:#222935;--panel:#2b3442;--panel-2:#343f50;--text:#e7edf4;--muted:#bcc8d6;
  --line:#465367;--wall:#151d29;--grid:#303b4a;--cell:#424e60;
  --canvas-dot:rgba(188,200,218,.055);--canvas-blue:rgba(95,134,195,.14);--canvas-gold:rgba(186,155,96,.07);
  --panel-shadow:0 8px 24px rgba(12,20,32,.14);
}
:root[data-theme=light]{
  color-scheme:light;
  --bg:#e2ded4;--panel:#eeece5;--panel-2:#e0e4e3;--text:#2a3543;--muted:#596575;
  --line:#c4cbc9;--accent:#3168d8;--wall:#596b83;--grid:#b7c0c6;--cell:#e8e9e5;
  --unset:var(--cell);--off:#d9e1ec;--on:#f2c343;--on-glow:rgba(190,137,20,.24);
  --mark:#af6800;--press:#c83754;--ok:#167a50;--bad:#c33150;--warn:#956008;
  --water:#286799;--why:#3168d8;
  --canvas-dot:rgba(88,106,131,.085);--canvas-blue:rgba(111,151,188,.16);--canvas-gold:rgba(199,167,103,.13);
  --panel-shadow:0 8px 24px rgba(46,58,74,.055);
}
:root{--canvas:radial-gradient(circle,var(--canvas-dot) .7px,transparent .9px),radial-gradient(ellipse at 12% 0%,var(--canvas-blue),transparent 65%),radial-gradient(ellipse at 100% 35%,var(--canvas-gold),transparent 68%)}
html{background:var(--bg)}body{min-height:100vh}
:root body,:root body.replay-open #replayScreen{background-color:var(--bg);background-image:var(--canvas);background-size:28px 28px,100% 700px,100% 700px;background-repeat:repeat,no-repeat,no-repeat}
.card,.method{box-shadow:var(--panel-shadow)}
#replayScreen .replay-panel>.card{box-shadow:none}
.head-actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.theme-toggle,.lang .language-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;min-height:34px;padding:0;font:inherit;line-height:1;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;touch-action:manipulation}
.theme-toggle:hover,.lang .language-toggle:hover{background:var(--panel-2);border-color:var(--line);color:var(--text)}.theme-toggle:focus-visible,.lang .language-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.theme-label{display:none}.theme-icon{display:block;width:19px;height:19px;font-size:0;background:currentColor;mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.4 1.4m11.2 11.2L19 19M5 19l1.4-1.4M17.6 6.4L19 5'/></g></svg>") center/contain no-repeat}
:root[data-theme=light] .theme-icon{mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.5 14A9 9 0 0 1 10 3.5 9 9 0 1 0 20.5 14Z' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.lang .language-toggle::before{display:none}.lang .language-toggle span{width:auto;font-size:12px;font-weight:600;line-height:1;color:inherit}
.lang .language-toggle:not(.is-en) span:first-child,.lang .language-toggle.is-en span:last-child{display:none}
.lang .language-toggle.is-en span:first-child{font-size:0}.lang .language-toggle.is-en span:first-child::after{content:'中';font-size:14px}
@media(max-width:900px),(pointer:coarse){.theme-toggle,.lang .language-toggle{width:44px;height:44px;min-height:44px}}
.replay-head .theme-toggle{flex:none;width:40px;min-height:40px;padding:0;order:1}.replay-head .theme-toggle .theme-label{display:none}.replay-head .replay-close{order:2}#replayScreen .replay-head .replay-title{flex:1;min-width:0;font-size:17px;line-height:1.15}
/* Local page styles include a few state colours outside the shared palette. */
:root[data-theme=light] button:focus-visible,:root[data-theme=light] textarea:focus-visible,:root[data-theme=light] select:focus-visible,:root[data-theme=light] input:focus-visible{outline-color:var(--accent)}
:root[data-theme=light] .glyph.map{background:linear-gradient(145deg,#edf2f8,#dfe7f1);box-shadow:inset 0 1px 0 #fff,0 3px 8px #24304414}
:root[data-theme=light] .glyph.map svg>rect:first-child{fill:#edf2f8;stroke:#8997aa}
:root[data-theme=light] .glyph.map svg text{fill:#805c16}
:root[data-theme=light] body[data-puzzle=flip]{--off:#d9e1ec}
:root[data-theme=light] body[data-puzzle=flip] .cell{box-shadow:inset 0 1px 0 #fff8,0 1px 2px #25354f12}
:root[data-theme=light] body[data-puzzle=flip] .cell.on{box-shadow:inset 0 1px 0 #fff6,0 0 12px var(--on-glow)}
:root[data-theme=light] body[data-puzzle=flip] .cell.flash{box-shadow:inset 0 0 0 1px var(--press)}
:root[data-theme=light] body[data-puzzle=sudoku] .cell{background:var(--cell);color:var(--text)}
:root[data-theme=light] body[data-puzzle=sudoku] .cell.peer{background:#e7edf7}
:root[data-theme=light] body[data-puzzle=sudoku] .cell.answer{color:#285bad}
:root[data-theme=light] body[data-puzzle=sudoku] .cell.same{color:#8d5900}
:root[data-theme=light] body[data-puzzle=sudoku] .cell.conflict{color:var(--bad);background:#ffe6eb}
:root[data-theme=light] body[data-puzzle=sudoku] .cell.selected{background:#dce8fd;box-shadow:inset 0 0 0 2px var(--accent)}
:root[data-theme=light] body[data-puzzle=sudoku] .cell.latest{box-shadow:inset 0 0 0 2px var(--mark)}
:root[data-theme=light] body[data-puzzle=sudoku] .cell.elim{background:#fce8ee;box-shadow:inset 0 0 0 2px var(--bad)}
:root[data-theme=light] body[data-puzzle=sudoku] .cell:focus-visible{outline-color:var(--accent)}
:root[data-theme=light] body[data-puzzle=nonograms] #board button.on{background:#303e54;color:#fff}
:root[data-theme=light] body[data-puzzle=nonograms] #board button.cross{color:#53677f}
:root[data-theme=light] body[data-puzzle=nonograms] #board .selected-line:not(.on){background:#dce8fd}
:root[data-theme=light] body[data-puzzle=nonograms] #board .on.selected-line{background:#254e85}
:root[data-theme=light] body[data-puzzle=nonograms] #marks button.active,:root[data-theme=light] .clue-tabs button[aria-pressed=true]{background:#dce8fd;color:#254b8c}
:root[data-theme=light] body[data-puzzle=battleships] .cell{background:var(--cell)}
:root[data-theme=light] body[data-puzzle=battleships] .cell.ship{background:#303e54;box-shadow:inset 0 0 0 2px #7e92ad}
:root[data-theme=light] body[data-puzzle=battleships] .cell.water{background:#d8eafb}
:root[data-theme=light] body[data-puzzle=battleships] .cell.given.ship{box-shadow:inset 0 0 0 2px #d89814}
:root[data-theme=light] body[data-puzzle=battleships] .cell.new{outline-color:var(--bad)}
:root[data-theme=light] body[data-puzzle=battleships] .cell:focus-visible{outline-color:var(--accent)}
:root[data-theme=light] body[data-puzzle=battleships] .clue input:focus{background:#dce8fd}
:root[data-theme=light] body[data-puzzle=battleships] .tools button.active{color:#254b8c;background:#dce8fd}
:root[data-theme=light] body[data-puzzle=battleships] .fleet .shape{color:#445c79}
:root[data-theme=light] body[data-puzzle=star-battle] .cell.rg,:root[data-theme=light] body[data-puzzle=galaxies] .cell.rg{background:color-mix(in srgb,var(--rc) 24%,var(--unset))}
:root[data-theme=light] body[data-puzzle=galaxies] .cell.rg.cur{background:color-mix(in srgb,var(--rc) 50%,var(--unset))}
:root[data-theme=light] body[data-puzzle=star-battle] .cell.rg.done,:root[data-theme=light] body[data-puzzle=galaxies] .cell.rg.done{background:color-mix(in srgb,var(--rc) 40%,var(--unset))}
:root[data-theme=light] body[data-puzzle=star-battle] .cell{color:#795000}
:root[data-theme=light] body[data-puzzle=star-battle] .cell.x{color:#52637a}
:root[data-theme=light] body[data-puzzle=star-battle] .cell.new{color:#a65300}