:root{--grid-theme: "Light"}:root:has(option[value=Light]:checked){--grid-theme: "Light"}:root:has(option[value=Dark]:checked){--grid-theme: "Dark"}#sudoku-app{padding:5px;margin-block:2rem;padding-block:4rem;background-color:var(--color-grid-primary, var(--color-site-background));color:var(--color-text-primary);@container style(--grid-theme: "Light"){--color-background-primary: var(--color-site-background);--color-text-primary: #333;--color-text-secondary: var(--color-text-50);--color-text-cell: #2C3E91;--color-text-light: white;--color-grid-primary: var(--color-site-background);--color-grid-secondary: #333;--color-grid-solved: #A7DCA0;--color-accent-primary: rgb(221, 228, 235);--color-accent-secondary: hsl(10, 55%, 45%);--color-accent-tertiary: #ddeada}@container style(--grid-theme: "Dark"){--color-background-primary: #1E1E1E;--color-text-primary: #E0E0E0;--color-text-secondary: #A0A0A0;--color-text-cell: #A3D9FF;--color-text-light: #F5F5F5;--color-grid-primary: #393E46;--color-grid-secondary: #666;--color-grid-solved: #6BCB77;--color-accent-primary: #3B4B61;--color-accent-secondary: #3B4B61;--color-accent-tertiary: #69855e}}.sudoku{position:relative;display:grid;grid-template-columns:1fr;grid-template-areas:"grid" "hud" "info";gap:2rem;@container content-grid (inline-size > 600px){grid-template-columns:minmax(min-content,50%) 1fr;grid-template-areas:"grid grid" "hud info"}@container content-grid (inline-size > 800px){grid-template-columns:minmax(0,75svh) minmax(0,300px);grid-template-areas:"grid info" "grid hud"}&:focus{outline:none}}.sudoku-grid{grid-area:grid;container-type:inline-size;aspect-ratio:1;position:relative;display:grid;grid-template-columns:repeat(9,1fr);outline:2px solid var(--color-text-secondary);user-select:none;cursor:pointer;color:var(--color-text-primary);&.solved{outline:4px solid var(--color-grid-solved)}&:before{z-index:1;content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,var(--color-grid-secondary) 3px,transparent 0) left 33.33% top / 2px 100% no-repeat,linear-gradient(to right,var(--color-grid-secondary) 3px,transparent 0) left 66.66% top / 2px 100% no-repeat,linear-gradient(to bottom,var(--color-grid-secondary) 3px,transparent 0) left top 33.33% / 100% 2px no-repeat,linear-gradient(to bottom,var(--color-grid-secondary) 3px,transparent 0) left top 66.66% / 100% 2px no-repeat}}.cell{position:relative;display:grid;place-content:center;aspect-ratio:1;font-size:7cqw;line-height:1;outline:1px solid var(--color-grid-secondary);background-color:var(--color-grid-primary);&:not(.is-given){color:var(--color-text-cell)}&[aria-selected=true]{background-color:var(--color-accent-primary)}}.digit{font-size:1em}.pencil-marks.center{font-size:.5em;&[data-pm-count="7"]{font-size:.43em}&[data-pm-count="8"]{font-size:.4em}&[data-pm-count="9"]{font-size:.36em}}.pencil-marks.corner{position:absolute;inset:0;display:grid;grid-template-areas:"p1 p5 p2" "p7 p9 p8" "p3 p6 p4";grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);font-size:.5em;span{display:grid;place-content:center;&:nth-child(1){grid-area:p1}&:nth-child(2){grid-area:p2}&:nth-child(3){grid-area:p3}&:nth-child(4){grid-area:p4}&:nth-child(5){grid-area:p5}&:nth-child(6){grid-area:p6}&:nth-child(7){grid-area:p7}&:nth-child(8){grid-area:p8}&:nth-child(9){grid-area:p9}}}.info{grid-area:info;display:flex;flex-direction:column;gap:1rem;.info-title{display:flex;align-items:center;justify-content:space-between;gap:1rem;.restart{&:hover svg{color:var(--color-accent-secondary)}svg{width:20px;height:20px;fill:var(--color-text-secondary)}}}.info-author{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;padding-bottom:1rem;border-bottom:1px solid var(--color-accent-primary);.difficulty{padding:4px 8px;background:var(--color-accent-secondary);border-radius:5px;color:var(--color-text-light)}}.info-option{position:relative;height:40px;cursor:pointer;& select{position:absolute;inset:0;appearance:none;cursor:pointer;border:1px solid var(--color-text-secondary);color:var(--color-text-secondary);fill:var(--color-text-secondary);border-radius:5px;background-color:transparent;padding:5px 15px;&:focus{outline:none}}&:after{content:"";position:absolute;top:50%;transform:translateY(-50%);right:15px;width:16px;height:16px;-webkit-mask:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20viewBox='0%200%2024%2024'%20stroke-width='1.5'%20stroke='currentColor'%3e%3cpath%20stroke-linecap='round'%20stroke-linejoin='round'%20d='m8.25%204.5%207.5%207.5-7.5%207.5'%20/%3e%3c/svg%3e") no-repeat center;-webkit-mask-size:contain;mask:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20viewBox='0%200%2024%2024'%20stroke-width='1.5'%20stroke='currentColor'%3e%3cpath%20stroke-linecap='round'%20stroke-linejoin='round'%20d='m8.25%204.5%207.5%207.5-7.5%207.5'%20/%3e%3c/svg%3e") no-repeat center;mask-size:contain;background-color:currentColor}}}.hud{grid-area:hud;display:grid;gap:1rem;button{color:var(--color-text-primary);border:1px solid var(--color-text-secondary);background:var(--color-accent-primary);border-radius:5px}.hud-mode{cursor:pointer;display:flex;border:1px solid var(--color-text-secondary);border-radius:5px;& button{flex:1;border:0;background:transparent;padding:10px 14px;&:not(.selected){color:var(--color-text-secondary)}&.selected{background-color:var(--color-accent-primary)}}}.hud-digits{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;button{aspect-ratio:1}@container content-grid (inline-size > 850px){grid-template-columns:repeat(3,1fr);.p0{display:none}}}.hud-tools{display:flex;gap:.5rem;& button{flex:1;display:grid;place-items:center;padding:7px;& svg{width:16px;height:16px;fill:currentColor}}}}.modal--overlay{position:absolute;height:100%;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);background:#0006;display:flex;justify-content:center;align-items:center;z-index:2}.modal--box{position:relative;max-width:65ch;background:var(--color-grid-primary);padding:1rem 1.5rem;border-radius:12px;box-shadow:0 8px 20px #00000040;width:70%;max-height:80vh;display:flex;flex-direction:column;align-items:flex-start;gap:1rem;.modal--options{display:flex;gap:1rem;& button{border:1px solid var(--color-text-secondary);border-radius:5px;padding:5px 14px;&.stop{color:var(--color-text-light);background-color:var(--color-accent-secondary)}&.go{color:var(--color-text-primary);background-color:var(--color-accent-primary)}&.hold{color:var(--color-text-primary);background-color:var(--color-accent-tertiary)}}}.close{position:absolute;top:0;right:0;padding:10px;& svg{fill:var(--color-text-primary);width:20px;height:20px}}}.sudoku-app-failure{display:inline-block;color:var(--color-accent-secondary-100);background-color:#fffc;padding:1rem;border:1px solid var(--color-accent-secondary-100)}.load-state{position:relative;height:90svh;@container content-grid (inline-size < 850px){height:65svh}@container content-grid (inline-size < 800px){height:125svh}@container content-grid (650px < inline-size < 750px){height:120svh}background:url(/assets/icons/loader.svg) repeat;background-clip:content-box;background-origin:content-box;&:before{content:"";position:absolute;inset:0;animation:shimmer 5s infinite}}@keyframes shimmer{to{transform:translate(100%)}}