:root{
  --paper:#f1eadb;--sheet:#f8f3e8;--sumi:#1c1a17;--sumi-soft:#4f4a41;--hair:#c9bfa9;--seal:#a8281e;--disabled:#6f685a;
  --wash-0:#e3dccc;--wash-1:#d8d1c1;--wash-2:#cfc8b8;--wash-3:#c5beae;--wash-4:#dcd3bd;--wash-5:#bfb8a8;
  --bad:#f0d3c6;
  --font:"Hiragino Mincho ProN","Yu Mincho",ui-serif,"New York","Iowan Old Style",Georgia,serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--sumi);font-family:var(--font);line-height:1.5;
  background-color:var(--paper);
  background-image:repeating-linear-gradient(93deg,#0000 0 7px,#8a7a5a0d 7px 8px,#0000 8px 19px),repeating-linear-gradient(2deg,#0000 0 11px,#8a7a5a0a 11px 12px);}
#site-header{display:flex;align-items:center;gap:12px;padding:16px 16px 4px}
#site-header img{width:40px;height:40px;display:block}
.wordmark{min-width:0}
#site-title{margin:0;font-size:2rem;font-weight:600;letter-spacing:.14em;line-height:1.15}
.stroke{display:block;width:150px;height:8px;margin-top:2px;fill:var(--sumi)}
#game{padding:0 12px 40px;max-width:560px;margin:0 auto}
button{font:inherit;color:inherit;background:none;border:0;min-height:44px;cursor:pointer;touch-action:manipulation}
button:disabled{color:var(--disabled);cursor:default}
:focus-visible{outline:3px solid var(--seal);outline-offset:2px}
#modes,#sizes{display:flex;border-bottom:1px solid var(--hair)}
#modes button,#sizes button{flex:1;font-size:1rem;border-bottom:3px solid #0000;margin-bottom:-1px}
#sizes button{font-size:.9375rem;color:var(--sumi-soft)}
#modes button[aria-pressed=true],#sizes button[aria-pressed=true]{border-bottom-color:var(--seal);color:var(--sumi);font-weight:600}
#puzzle{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:0 12px;margin-top:12px}
#puzzle-label{margin:0;font-size:1rem;font-weight:500}
#puzzle>p:first-of-type{margin:0;color:var(--sumi-soft);font-variant-numeric:tabular-nums}
#board{grid-column:1/-1;margin-top:8px;display:grid;width:100%;aspect-ratio:1;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:repeat(var(--rows),minmax(0,1fr));
  background:var(--sheet);border:2px solid var(--sumi);touch-action:none;user-select:none;-webkit-user-select:none;--clue:1.25rem}
#board[data-size="5"]{--clue:2.25rem}#board[data-size="7"]{--clue:1.7rem}#board[data-size="15"]{--clue:.875rem}
.cell{border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.rect{z-index:1;pointer-events:none;box-shadow:inset 0 0 0 2px var(--sumi)}
.rect[data-color="0"]{background:var(--wash-0)}.rect[data-color="1"]{background:var(--wash-1)}.rect[data-color="2"]{background:var(--wash-2)}
.rect[data-color="3"]{background:var(--wash-3)}.rect[data-color="4"]{background:var(--wash-4)}.rect[data-color="5"]{background:var(--wash-5)}
.rect[data-valid=false]{background:var(--sheet) repeating-linear-gradient(45deg,#a8281e26 0 2px,#0000 2px 8px);box-shadow:none;outline:2px dashed var(--sumi-soft);outline-offset:-2px}
.rect[data-wrong=true]{background:var(--bad) repeating-linear-gradient(-45deg,#a8281e59 0 3px,#0000 3px 7px);outline:3px solid var(--seal);outline-offset:-3px;box-shadow:none}
.rect--preview,.rect--preview[data-valid]{z-index:3;display:flex;align-items:center;justify-content:center;background:#1c1a1726;font-size:var(--clue);font-weight:600;outline:2px dashed var(--sumi);outline-offset:-2px;box-shadow:none}
.rect--preview[data-valid=true]{background:#a8281e33;outline:2px solid var(--seal)}
.clue{z-index:2;pointer-events:none;display:flex;align-items:center;justify-content:center;font-size:var(--clue);font-weight:600;font-variant-numeric:lining-nums}
#status{grid-column:1/-1;min-height:1.5em;margin:6px 0 0;color:var(--sumi-soft);font-size:.9375rem}
#controls{display:flex;margin-top:2px;border-top:1px solid var(--sumi);border-bottom:1px solid var(--hair)}
#controls button{flex:1;font-size:1.0625rem;min-height:52px}
#controls button+button{border-left:1px solid var(--hair)}
#win{margin-top:20px;padding:4px 0 4px 16px;border-left:4px solid var(--seal)}
#win-title{margin:0;font-size:1.5rem;color:var(--seal);letter-spacing:.1em}
#share-text{margin:8px 0;font:.9375rem/1.5 ui-monospace,Menlo,monospace;white-space:pre-wrap}
#share{padding:0 20px;background:var(--sumi);color:var(--paper)}
#stats dl{display:grid;grid-template-columns:repeat(3,1fr);gap:0 12px;margin:24px 0 0}
#stats dt{grid-row:2;font-size:.8125rem;color:var(--sumi-soft);line-height:1.3}
#stats dd{grid-row:1;margin:0;font-size:1.75rem;font-weight:600}
#rules{margin-top:28px}
#rules h2{font-size:1.0625rem;margin:0 0 4px;letter-spacing:.08em}
#rules p{margin:0 0 8px;color:var(--sumi-soft)}
@media (min-width:900px){
  #site-header{display:none}
  body{min-height:100vh}
  #game{max-width:1120px;display:grid;gap:0 64px;padding:36px 32px 40px;
    grid-template-columns:300px minmax(0,1fr);
    grid-template-rows:auto auto auto auto 1fr auto auto;
    grid-template-areas:"brand puzzle" "modes puzzle" "sizes puzzle" "stats puzzle" "rules puzzle" ". controls" ". win"}
  #site-header.in-rail{display:flex}
  #modes{grid-area:modes}#sizes{grid-area:sizes}#stats{grid-area:stats}#rules{grid-area:rules}
  #puzzle{grid-area:puzzle;margin-top:0;width:min(100%,calc(100svh - 190px));justify-self:center}
  #controls{grid-area:controls;width:min(100%,calc(100svh - 190px));justify-self:center}
  #win{grid-area:win;justify-self:center;width:min(100%,calc(100svh - 190px))}
  #stats dl{grid-template-columns:1fr;gap:0}
  #stats dt,#stats dd{grid-row:auto}
  #stats dd{font-size:1.5rem;margin-bottom:6px}
  #stats dt{order:0}
}
@media (prefers-reduced-motion:no-preference){button{transition:color .15s,border-color .15s}}