:root{--cell-size:56px;--gap:4px;--bg:#0f172a;--app-bg:#0f172ae6;--panel-bg:#0f172ab3;--cell-bg:#111827;--light-border:#334155;--muted-text:#94a3b8;--text:#f8fafc;--primary:#60a5fa;--success:#34d399;--danger:#fb7185}*{box-sizing:border-box}body{background:radial-gradient(1400px 500px at 10% 10%, #60a5ff29, transparent), var(--bg);color:var(--text);min-height:100vh;margin:0;font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Roboto Mono,Courier New,monospace}button{font:inherit}.app{-webkit-backdrop-filter:none;backdrop-filter:none;width:min(100%,1420px);box-shadow:none;background:0 0;border:0;border-radius:0;margin:0 auto;padding:24px}.hero{justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;display:flex}.eyebrow{letter-spacing:.24em;text-transform:uppercase;color:var(--primary);margin:0 0 4px;font-size:.78rem}.hero h1{margin:0;font-size:2rem}.hero-copy{color:var(--muted-text);max-width:720px;margin:6px 0 0;line-height:1.6}.controls{flex-wrap:wrap;align-items:center;gap:10px;display:flex}button{color:var(--text);cursor:pointer;background:#ffffff0d;border:1px solid #ffffff14;border-radius:12px;padding:12px 14px;transition:transform .12s,box-shadow .12s,border-color .12s}button:hover,button:focus-visible{border-color:#60a5ff4d;transform:translateY(-1px);box-shadow:0 8px 22px #06152899}.app-shell{grid-template-columns:minmax(560px,1.2fr) minmax(320px,.8fr);align-items:start;gap:20px;display:grid}.panel{background:var(--panel-bg);border:1px solid #ffffff14;border-radius:20px;padding:18px}.board-panel{justify-content:center;display:flex}.steps-panel{flex-direction:column;max-height:610px;display:flex;overflow:hidden}.panel-heading{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px;display:flex}.panel-heading-actions{flex-direction:column;align-items:flex-end;gap:10px;display:flex}.step-controls{flex-wrap:wrap;gap:8px;display:flex}.step-controls button{min-width:110px}.step-controls button:disabled{opacity:.45;cursor:not-allowed;background:#ffffff0a;border-color:#ffffff0f}.panel-heading h2{margin:4px 0 0;font-size:1.1rem}.step-count{min-width:56px;color:var(--primary);background:#60a5ff29;border-radius:999px;justify-content:center;align-items:center;padding:8px 10px;font-weight:700;display:inline-flex}.board-shell{flex-direction:column;align-items:flex-start;gap:8px;display:flex}.board-header{grid-template-columns:34px repeat(9, var(--cell-size));gap:var(--gap);align-items:center;display:grid}.grid-label{height:28px;color:var(--muted-text);justify-content:center;align-items:center;font-size:.9rem;font-weight:700;display:flex}.corner-label{width:34px}.sudoku-grid{gap:var(--gap);width:calc(var(--cell-size) * 9 + var(--gap) * 8 + 34px + var(--gap));background:0 0;flex-direction:column;display:flex}.sudoku-row-wrapper{align-items:center;gap:var(--gap);grid-template-columns:34px 1fr;display:grid}.sudoku-row{grid-template-columns:repeat(9, var(--cell-size));gap:var(--gap);display:grid}.cell{width:var(--cell-size);height:var(--cell-size);text-align:center;font-family:inherit;font-size:1.05rem;line-height:var(--cell-size);border:1px solid var(--light-border);background:var(--cell-bg);color:var(--text);border-radius:10px;outline:none}.cell:focus{border-color:#60a5ffb3;box-shadow:0 0 0 3px #60a5ff33}.cell-border-right{border-right:3px solid #ffffff29}.cell-border-bottom{border-bottom:3px solid #ffffff29}.cell-initial{color:#061526;background:linear-gradient(#60a5fff2,#60a5ffd1);font-weight:700}.cell-solution{color:#042916;background:linear-gradient(#34d399f2,#22c55ed1);font-weight:700}.cell-current-step{outline:2px solid #fffffff2;transform:scale(1.02);box-shadow:inset 0 0 0 2px #60a5ffa6}.cell-removed{border-color:#f87171d9;box-shadow:inset 0 0 0 2px #f8717140}.cell-reasoning{border-color:#4ade80e6;box-shadow:inset 0 0 0 2px #4ade8040}.cell-removed.cell-reasoning{border-color:#4ade80f2;box-shadow:inset 0 0 0 2px #4ade804d}.cell-unsolved{color:#2b0a0f;background:linear-gradient(#fb7185f2,#f43f5ed1);font-weight:700}.cell-initial.cell-solution{background:linear-gradient(#1e90fff2,#1e90ffd9)}.step-list{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#ffffff24 transparent;flex-direction:column;flex:1;gap:8px;margin:0;padding:0 4px 0 0;list-style:none;display:flex;overflow-y:auto}.step-list::-webkit-scrollbar{width:8px}.step-list::-webkit-scrollbar-track{background:0 0}.step-list::-webkit-scrollbar-thumb{background-color:#ffffff24;background-clip:content-box;border:2px solid #0000;border-radius:999px}.step-list::-webkit-scrollbar-thumb:hover{background-color:#ffffff3d}.step-list:focus-visible{outline-offset:4px;border-radius:16px;outline:2px solid #60a5ff73}.step-item{text-align:left;width:100%;color:var(--text);background:#ffffff0a;border:1px solid #0000;border-radius:14px;align-items:flex-start;gap:10px;padding:12px;transition:transform .15s,box-shadow .15s,border-color .15s,background-color .15s;display:flex}.step-item:hover,.step-item:focus-visible{border-color:#60a5ff3d;transform:translateY(-1px);box-shadow:0 10px 24px #06152866}.step-item.active{background:linear-gradient(135deg,#60a5ff33,#60a5ff24);border-color:#60a5ff80;transform:translate(4px);box-shadow:0 14px 30px #0615288c,inset 0 0 0 1px #ffffff14}.step-item--error{background:#f871711f;border-color:#f8717180}.step-item--error.active{background:#f871712e}.step-item--fill{background:#34d3991f;border-color:#34d39980}.step-item--fill.active{background:#34d3992e}.step-item--guess{background:#fb923c1f;border-color:#fb923c8c}.step-item--guess.active{background:#fb923c2e}.step-item.active .step-index{background:var(--primary);color:#fff;box-shadow:0 0 0 2px #60a5ff47}.step-item.active .step-copy{color:#dbeafe}.step-item.active .step-copy strong{color:#fff}.step-index{min-width:28px;height:28px;color:var(--muted-text);background:#ffffff14;border-radius:999px;justify-content:center;align-items:center;padding:2px;font-weight:700;display:inline-flex}.step-copy{color:var(--muted-text);flex-direction:column;gap:4px;display:flex}.step-copy strong{color:var(--text)}.empty-state{color:var(--muted-text);margin:8px 0 0;line-height:1.6}.notes{text-align:left;color:var(--muted-text);margin-top:18px;font-size:.95rem;line-height:1.6}.notes strong{margin-bottom:8px;display:block}.version-footer{color:var(--muted-text);text-align:center;margin-top:14px;font-size:.85rem}@media (width<=1100px){.app-shell{grid-template-columns:1fr}.steps-panel{min-height:auto}}