:root{
  --bg: #0f1115;
  --panel: #171923;
  --surface: #1e2130;
  --grid: #2a2f45;
  --grid-bold: #3a4060;
  --text: #e8ecf1;
  --muted: #9aa3b2;
  --accent: #6AD17B;
  --accent-2: #6bb6ff;
  --error: #ff6b6b;
  --warn: #ffb85c;
  --given: #c7d1db;
  --cell: #131726;
  --select: #2a3150;
  --hover: #20263d;
  --shadow: 0 10px 25px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light){
  :root{
    --bg: #f4f6fb;
    --panel: #ffffff;
    --surface: #ffffff;
    --grid: #dae1f1;
    --grid-bold: #b7c3e3;
    --text: #0b1220;
    --muted: #58627a;
    --accent: #2f9e44;
    --accent-2: #2667d1;
    --error: #d64545;
    --warn: #e67700;
    --given: #2d3a4b;
    --cell: #fff;
    --select: #e7edff;
    --hover: #f1f4ff;
    --shadow: 0 6px 18px rgba(0,20,60,.12);
  }
}
html,body{height:100%}
html{color-scheme:light dark}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  background: radial-gradient(1200px 600px at 20% -20%, rgba(255,255,255,.06), transparent 60%),
              radial-gradient(1200px 600px at 120% 120%, rgba(255,255,255,.06), transparent 60%),
              var(--bg);
  color: var(--text);
}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding: .75rem clamp(.75rem, 2vw, 1.5rem);
  background: var(--panel);
  position: sticky; top:0; z-index: 5;
  box-shadow: var(--shadow);
}
.brand{display:flex;align-items:center; gap:.5rem; font-weight:700; letter-spacing:.2px}
.brand .logo{opacity:.9}
.controls{display:flex; align-items:center; gap:.5rem; flex-wrap: wrap;}
.select{display:flex; align-items:center; gap:.4rem; padding: .25rem .5rem; background: var(--surface); border-radius: .5rem; border:1px solid var(--grid);}
.select select{appearance:none; font:inherit; background:transparent; border:none; color:var(--text); padding:.25rem .25rem}
.btn{
  border:1px solid var(--grid);
  background: var(--surface);
  color: var(--text);
  padding: .5rem .75rem;
  border-radius: .5rem; cursor: pointer;
}
.btn.primary{background: var(--accent); border: none; color:#07150a; font-weight:600}
.btn:where(:hover,:focus-visible){outline:none; box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 45%, transparent);}
.btn:active{transform: translateY(1px)}

.stat{display:flex; align-items:center; gap:.25rem; padding:.25rem .5rem; background: var(--surface); border-radius:.5rem; border:1px solid var(--grid)}

.main{
  max-width: 1100px; margin: 2rem auto; padding: 0 clamp(.75rem, 3vw, 2rem);
  display:grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; justify-items:center;
}
.board-wrap{display:grid; gap:1rem; align-items: start; justify-items:center}

.board{
  --size: min(92vw, 560px);
  width: var(--size); aspect-ratio: 1;
  display:grid; grid-template-columns: repeat(9,1fr);
  background: var(--cell);
  border-radius: .75rem; overflow: clip;
  box-shadow: var(--shadow);
  position: relative;
}
.cell{
  position: relative;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid var(--grid);
  font-weight: 600; font-size: clamp(18px, 4vw, 26px);
  user-select: none; -webkit-user-select: none;
  background: var(--cell); color: var(--text);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.cell:hover{background: var(--hover)}
.cell.given{color: var(--given)}
.cell.selected{background: var(--select); box-shadow: inset 0 0 0 2px var(--accent-2)}
.cell.error{background: color-mix(in oklab, var(--error) 25%, var(--cell));}
.cell .note-grid{
  position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr);
  font-weight:500; font-size: clamp(10px, 2.2vw, 14px); opacity:.9; color: var(--muted);
  pointer-events: none;
}
.cell .note{display:flex; align-items:center; justify-content:center;}

.thick-top{border-top:2px solid var(--grid-bold)!important}
.thick-bottom{border-bottom:2px solid var(--grid-bold)!important}
.thick-left{border-left:2px solid var(--grid-bold)!important}
.thick-right{border-right:2px solid var(--grid-bold)!important}

.panel{display:grid; gap:.5rem; justify-items:center}
.panel .row{display:flex; gap:.5rem; flex-wrap: wrap}

.keypad{display:flex; justify-content:center}
.digits{display:grid; grid-template-columns: repeat(9, min(10vw, 56px)); gap:.5rem}
.key{
  border:1px solid var(--grid); background: var(--surface); color: var(--text);
  border-radius:.5rem; padding:.6rem 0; font-weight:700; cursor:pointer;
}
.key:where(:hover,:focus-visible){outline:none; box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 45%, transparent)}

.footer{max-width:900px; margin:2rem auto; text-align:center; color:var(--muted)}

dialog{border:none; border-radius:.75rem; background: var(--panel); color:var(--text); box-shadow:var(--shadow); padding:1rem 1.25rem; max-width: min(92vw, 420px)}
dialog::backdrop{background: rgba(0,0,0,.55)}
dialog menu{display:flex; justify-content:flex-end; gap:.5rem; padding:0; margin-top:1rem}
.muted{color:var(--muted)}

kbd{display:inline-block; padding:.1em .35em; border:1px solid var(--grid); border-bottom-width:2px; border-radius:.35em; background:var(--surface)}

@media (min-width: 980px){
  .main{grid-template-columns: 1fr}
}