@layer components{:root,:root:has(option[value=Light]:checked){--grid-theme:"Light"}:root:has(option[value=Dark]:checked){--grid-theme:"Dark"}#sudoku-app{padding:5px;background-color:var(--color-grid-primary,var(--color-site-background));color:var(--color-text-primary);padding-block:4rem;padding-inline:1.5rem;@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:#dde4eb;--color-accent-secondary:#b24934;--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{grid-template-columns:1fr;grid-template-areas:"grid""hud""info";gap:2rem;max-width:1200px;display:grid;position:relative;@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{aspect-ratio:1;outline:2px solid var(--color-text-secondary);user-select:none;cursor:pointer;color:var(--color-text-primary);grid-area:grid;grid-template-columns:repeat(9,1fr);display:grid;position:relative;container-type:inline-size;&.solved{outline:4px solid var(--color-grid-solved)}&:before{z-index:1;content:"";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;position:absolute;inset:0}}.cell{aspect-ratio:1;outline:1px solid var(--color-grid-secondary);background-color:var(--color-grid-primary);place-content:center;font-size:5cqw;line-height:1;display:grid;position:relative;&: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{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);grid-template-areas:"p1 p5 p2""p7 p9 p8""p3 p6 p4";font-size:.5em;display:grid;position:absolute;inset:0;& span{place-content:center;display:grid;&:first-child{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{flex-direction:column;grid-area:info;gap:1rem;display:flex;& .info-title{justify-content:space-between;align-items:center;gap:1rem;display:flex;& .restart{&:hover svg{color:var(--color-accent-secondary)}& svg{width:20px;height:20px;fill:var(--color-text-secondary)}}}& .info-author{border-bottom:1px solid var(--color-accent-primary);flex-wrap:wrap;align-items:center;gap:1rem;padding-bottom:1rem;display:flex;& .difficulty{background:var(--color-accent-secondary);color:var(--color-text-light);border-radius:5px;padding:4px 8px}}& .info-option{cursor:pointer;height:40px;position:relative;& select{appearance:none;cursor:pointer;border:1px solid var(--color-text-secondary);color:var(--color-text-secondary);fill:var(--color-text-secondary);background-color:#0000;border-radius:5px;padding:5px 15px;position:absolute;inset:0;&:focus{outline:none}}&:after{content:"";-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") 50%/contain no-repeat;background-color:currentColor;width:16px;height:16px;position:absolute;top:50%;right:15px;transform:translateY(-50%);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") 50%/contain no-repeat}}}.hud{grid-area:hud;gap:1rem;display:grid;& 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;border:1px solid var(--color-text-secondary);border-radius:5px;display:flex;& button{background:0 0;border:0;flex:1;padding:10px 14px;&:not(.selected){color:var(--color-text-secondary)}&.selected{background-color:var(--color-accent-primary)}}}& .hud-digits{grid-template-columns:repeat(5,1fr);gap:.5rem;display:grid;& button{aspect-ratio:1}@container content-grid (inline-size>850px){grid-template-columns:repeat(3,1fr);& .p0{display:none}}}& .hud-tools{gap:.5rem;display:flex;& button{flex:1;place-items:center;padding:7px;display:grid;& svg{fill:currentColor;width:16px;height:16px}}}}.modal--overlay{z-index:2;background:#0006;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.modal--box{background:var(--color-grid-primary);border-radius:12px;flex-direction:column;align-items:flex-start;gap:1rem;width:70%;max-width:65ch;max-height:80vh;padding:1rem 1.5rem;display:flex;position:relative;box-shadow:0 8px 20px #00000040;& .modal--options{gap:1rem;display:flex;& 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{padding:10px;position:absolute;top:0;right:0;& svg{fill:var(--color-text-primary);width:20px;height:20px}}}.sudoku-app-failure{color:var(--color-accent-secondary-100);border:1px solid var(--color-accent-secondary-100);background-color:#fffc;padding:1rem;display:inline-block}.load-state{max-width:1200px;height:90svh;position:relative;@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(/icons/loader.svg) content-box content-box;&:before{content:"";animation:5s infinite shimmer;position:absolute;inset:0}}@keyframes shimmer{to{transform:translate(100%)}}}