: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}}

/* Content pages and footer */
#site-title[href]{display:block;color:inherit;text-decoration:none}
.page-header{max-width:680px;margin:0 auto;padding:20px 16px 8px}
.page{max-width:680px;margin:0 auto;padding:8px 16px 32px;font-size:1.0625rem;line-height:1.7}
.page h1{margin:20px 0 8px;font-size:1.875rem;font-weight:600;line-height:1.25;letter-spacing:.04em}
.page h2{margin:32px 0 6px;padding-top:12px;border-top:1px solid var(--hair);font-size:1.25rem;font-weight:600;letter-spacing:.04em;line-height:1.35}
.page h3{margin:20px 0 2px;font-size:1.0625rem;font-weight:600}
.page p,.page ul{margin:0 0 12px}
.page ul{padding-left:1.25em}
.page li{margin-bottom:8px}
.page a,.game-note a{color:var(--seal);text-underline-offset:2px}
.page code{font:.9375em ui-monospace,Menlo,monospace;overflow-wrap:anywhere}
.lede{font-size:1.1875rem;color:var(--sumi-soft)}
.updated{color:var(--sumi-soft);font-size:.9375rem}
.play-link{display:inline-flex;align-items:center;min-height:44px;margin:12px 0 0;padding:0 20px;background:var(--sumi);color:var(--paper)!important;text-decoration:none}
.game-note{max-width:560px;margin:-16px auto 0;padding:0 12px 16px;color:var(--sumi-soft)}
.game-note p{margin:0}
.site-foot{border-top:1px solid var(--hair);padding:6px 12px 24px}
.site-foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0 20px}
.site-foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--sumi);font-size:.9375rem;text-underline-offset:3px}
.site-foot a[aria-current]{color:var(--seal)}
@media (min-width:900px){.game-note{max-width:1120px;margin-top:-8px;padding:0 32px 24px}.game-note p{max-width:66ch}.page-header{padding-top:36px}}

/* Retention panels */
:root{--rt-fg:var(--sumi);--rt-soft:var(--sumi-soft);--rt-bg:var(--sheet);--rt-acc:var(--seal);--rt-on:var(--paper);--rt-line:var(--hair)}
.view-row{display:none}
#board-scroll{display:contents}
.pan-corner,.pan-top,.pan-left{display:none}
@media (max-width:719px){
  #puzzle:has(#board[data-size="10"],#board[data-size="15"]) .view-row{display:flex;grid-column:1/-1;align-items:center;justify-content:space-between;gap:12px;font-size:.875rem;color:var(--sumi-soft)}
  .view-toggle{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--sumi);font-weight:600;cursor:pointer;white-space:nowrap}
  .view-toggle input{width:22px;height:22px;margin:0;accent-color:var(--seal)}
  #puzzle:has(#board[data-size="10"],#board[data-size="15"]):not(:has(#view-fit:checked)) #board-scroll{display:grid;grid-column:1/-1;grid-template-columns:24px max-content;overflow:auto;max-height:66svh;-webkit-overflow-scrolling:touch;background:var(--sheet);border:1px solid var(--hair)}
  #puzzle:has(#board[data-size="10"],#board[data-size="15"]):not(:has(#view-fit:checked)) #board{--clue:1.375rem;margin:0;grid-column:2;grid-row:2;width:calc(var(--cols)*46px);border-left:0;border-top:0}
  #puzzle:has(#board[data-size="10"],#board[data-size="15"]):not(:has(#view-fit:checked)) :is(.pan-corner,.pan-top,.pan-left){display:block;position:sticky;background:var(--paper);touch-action:pan-x pan-y;z-index:5}
  .pan-corner{top:0;left:0;z-index:6!important;grid-column:1;grid-row:1;height:24px}
  .pan-top{top:0;grid-column:2;grid-row:1;height:24px;background-image:repeating-linear-gradient(90deg,var(--hair) 0 1px,#0000 1px 46px)!important;border-bottom:1px solid var(--sumi)}
  .pan-left{left:0;grid-column:1;grid-row:2;background-image:repeating-linear-gradient(0deg,var(--hair) 0 1px,#0000 1px 46px)!important;border-right:1px solid var(--sumi)}
}
body[data-pending] #puzzle,body[data-pending] #controls{display:none}
.rt p{margin:0}
#rt-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0;padding:10px 12px;background:var(--rt-bg);color:var(--rt-fg);border:1px solid var(--rt-line);border-left:4px solid var(--rt-acc)}
.rt button,.rt .rt-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;font:inherit;color:var(--rt-fg);background:none;border:1px solid var(--rt-line);border-radius:2px;text-decoration:none;cursor:pointer}
.rt .rt-primary{background:var(--rt-acc);color:var(--rt-on);border-color:var(--rt-acc);font-weight:700}
#win.rt,#result.rt,#win-panel.rt{margin-top:14px;padding:14px;background:var(--rt-bg);color:var(--rt-fg);border:1px solid var(--rt-line);border-top:3px solid var(--rt-acc);display:flex;flex-direction:column;gap:8px}
.rt-title{margin:0;font-size:1.5rem;color:var(--rt-acc)}
.rt-big{font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums}
.rt-vs{font-weight:600}
.rt-line,.rt-next,.rt-msg{font-size:.9375rem;color:var(--rt-soft)}
.rt-next{font-variant-numeric:tabular-nums}
.rt-row{display:flex;flex-wrap:wrap;gap:8px}
.rt-tray{display:flex;flex-direction:column;gap:8px}
.rt input[type=text],.rt textarea{width:100%;min-height:44px;padding:8px;font:inherit;font-size:1rem;color:var(--rt-fg);background:var(--rt-bg);border:1px solid var(--rt-line)}
.rt-share{margin:0;padding:8px;font:.875rem/1.45 ui-monospace,Menlo,monospace;white-space:pre-wrap;border:1px dashed var(--rt-line)}
dialog.rt{width:min(520px,calc(100vw - 16px));max-height:calc(100dvh - 24px);padding:16px;color:var(--rt-fg);background:var(--rt-bg);border:1px solid var(--rt-line)}
dialog.rt::backdrop{background:#0006}
.rt-dlg-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rt-dlg-head h2{margin:0;font-size:1.25rem}
dialog.rt h3{margin:16px 0 6px;font-size:.9375rem}
.rt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px;margin:12px 0 0}
.rt-grid dd{margin:0;font-size:1.5rem;font-weight:700}.rt-grid dt{font-size:.8125rem;color:var(--rt-soft)}
.rt-list{list-style:none;margin:0;padding:0}
.rt-list li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--rt-line);font-variant-numeric:tabular-nums}
.rt-cal{display:grid;grid-template-columns:repeat(14,1fr);gap:3px}
.rt-cal i{aspect-ratio:1;background:var(--rt-line);opacity:.4}.rt-cal i.on{background:var(--rt-acc);opacity:1}
.rt-bars{display:flex;align-items:flex-end;gap:2px;height:48px}
.rt-bars i{flex:1;background:var(--rt-acc);min-height:2px}

/* Onboarding */
.ob-q{position:absolute;top:8px;right:8px;z-index:20;width:44px;height:44px;min-height:44px;padding:0;border:1px solid var(--rt-line);border-radius:50%;background:var(--rt-bg);color:var(--rt-fg);font:700 1.25rem/1 var(--ob-font,inherit);cursor:pointer}
.ob-card{position:fixed;left:8px;right:8px;bottom:8px;z-index:30;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 12px;padding:10px;background:var(--rt-bg);color:var(--rt-fg);border:1px solid var(--rt-line);border-top:3px solid var(--rt-acc);box-shadow:0 4px 14px #0005}
.ob-text{margin:0;font-size:.9375rem;line-height:1.35}
.ob-ctl{grid-column:1/-1;display:flex;gap:8px;align-items:center}
.ob-ctl button:last-child{margin-left:auto}
.ob-strip{position:fixed;left:8px;right:8px;bottom:8px;z-index:30;display:flex;gap:8px;padding:6px;background:var(--rt-bg);border:1px solid var(--rt-line)}
.ob-strip button:first-child{flex:1}
.ob-demo{display:flex;gap:10px;justify-content:center;pointer-events:none}
.ob-stage{position:relative;display:grid;width:var(--ob-w);overflow:hidden}
.ob-dot{position:absolute;top:0;left:0;z-index:6;width:var(--ob-dot);height:var(--ob-dot);pointer-events:none}
.ob-dot::before{content:"";display:block;width:56%;height:56%;margin:22%;border-radius:50%;background:var(--ob-tap,#0009);box-shadow:0 0 0 2px #fff}
.ob-frame{margin:0;text-align:center;font-size:.75rem}
.ob-dlg .ob-demo{margin:12px 0}
.ob-dlg .ob-text{margin:8px 0}
.ob-dlg .ob-stage{--ob-w:var(--ob-w-lg)}
.ob-legend{list-style:none;margin:12px 0;padding:0}
.ob-legend li{display:flex;align-items:center;gap:12px;padding:5px 0}
.ob-sw{position:relative;flex:none;display:block;width:40px;height:40px}
.ob-sw>*{position:absolute;inset:0;height:40px}
#rt-banner .ob-how{padding:0;border:0;background:none;color:inherit;text-decoration:underline}
.ob-cue::after{content:"";position:absolute;inset:1px;border:3px solid var(--ob-cue,var(--rt-acc));pointer-events:none;z-index:4;animation:ob-pulse .9s ease-out 3}
@keyframes ob-pulse{from{transform:scale(.7);opacity:.2}to{transform:scale(1.05);opacity:1}}
@media (prefers-reduced-motion:reduce){.ob-cue::after{animation:none}}
.ob-stage{--ob-w:126px;--ob-w-lg:210px;--ob-dot:33.333%;--clue:1.5rem;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);aspect-ratio:1;background:var(--sheet);border:2px solid var(--sumi)}
.ob-sw{--clue:1.1rem}
.clue.ob-cue{position:relative}
@media (min-width:900px){.ob-card{right:auto;left:24px;bottom:24px;width:344px}}
.ob-card:has(.ob-frame){grid-template-columns:1fr}
.ob-card .ob-frame .ob-stage{--ob-w:110px}