:root{--font-serif:"Literata", "Iowan Old Style", Georgia, serif;--font-sans:"Libre Franklin", "Segoe UI", sans-serif;--radius-sm:3px;--radius-md:6px;--radius-lg:10px;font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--color-desk:oklch(90% .023 72);--color-paper:oklch(97.5% .012 85);--color-paper-inset:oklch(93.5% .018 78);--color-ink:oklch(21% .02 50);--color-ink-soft:oklch(40% .02 50);--color-ink-faint:oklch(55% .017 55);--color-rule:oklch(80% .018 65);--color-rule-strong:var(--color-ink);--color-pen:oklch(47% .13 78);--color-pen-soft:oklch(90% .05 82);--color-pencil:oklch(46% .028 250);--color-highlight:oklch(89% .07 92);--color-highlight-border:oklch(63% .1 75);--color-success:oklch(42% .09 150);--color-success-bg:oklch(93% .05 150);--color-success-border:oklch(68% .1 150);--color-error:oklch(46% .15 27);--color-error-bg:oklch(93% .04 30);--color-error-border:oklch(67% .12 30);color:var(--color-ink);background:var(--color-desk);font-weight:400;line-height:1.5}:root[data-theme=dark]{--color-desk:oklch(11.5% .005 50);--color-paper:oklch(17.5% .007 50);--color-paper-inset:oklch(23% .009 50);--color-ink:oklch(93% .008 75);--color-ink-soft:oklch(76% .009 70);--color-ink-faint:oklch(55% .009 65);--color-rule:oklch(31% .011 55);--color-rule-strong:var(--color-ink);--color-pen:oklch(76% .1 195);--color-pen-soft:oklch(26% .05 195);--color-pencil:oklch(74% .045 245);--color-highlight:oklch(30% .055 195);--color-highlight-border:oklch(60% .1 195);--color-success:oklch(76% .13 150);--color-success-bg:oklch(22% .045 150);--color-success-border:oklch(46% .1 150);--color-error:oklch(70% .17 27);--color-error-bg:oklch(24% .055 30);--color-error-border:oklch(52% .14 30)}*{box-sizing:border-box}::selection{background:var(--color-highlight)}body{background:radial-gradient(circle at 12% 8%, oklch(100% 0 0/.4) 0%, transparent 42%), radial-gradient(circle at 88% 92%, oklch(0% 0 0/.06) 0%, transparent 40%), radial-gradient(oklch(0% 0 0/.05) 1px, transparent 1px) 0 0 / 3px 3px, var(--color-desk);min-height:100vh;margin:0}:root[data-theme=dark] body{background:radial-gradient(circle at 12% 8%, oklch(100% 0 0/.03) 0%, transparent 42%), radial-gradient(oklch(100% 0 0/.04) 1px, transparent 1px) 0 0 / 3px 3px, var(--color-desk)}#app{place-items:center;min-height:100vh;padding:1.5rem 1.25rem;display:grid}button{touch-action:manipulation}button:focus-visible,select:focus-visible{outline:2px solid var(--color-pen);outline-offset:2px;border-radius:var(--radius-sm)}.layout{grid-template-columns:2fr 1fr;grid-template-areas:"masthead masthead""board panel";gap:1.1rem;width:min(1000px,100%);display:grid}.masthead{background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius-lg);grid-area:masthead;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1.15rem 1.4rem 1rem;display:flex;box-shadow:0 1px 3px oklch(0% 0 0/.08),0 1px 2px oklch(0% 0 0/.05)}.masthead-main{border-bottom:3px double var(--color-rule-strong);flex:1;min-width:0;padding-bottom:.6rem}.masthead-title{font-family:var(--font-serif);letter-spacing:-.01em;text-wrap:balance;margin:0;font-size:clamp(2rem,4.4vw,2.65rem);font-style:italic;font-weight:600}.masthead-subtitle{font-family:var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink-faint);margin:.3rem 0 0;font-size:.82rem;font-weight:600}.theme-toggle{border:1px solid var(--color-rule);border-radius:var(--radius-sm);background:var(--color-paper);width:40px;height:40px;color:var(--color-ink-soft);flex-shrink:0;place-items:center;padding:0;transition:transform .12s cubic-bezier(.16,1,.3,1),border-color .15s ease-out,color .15s ease-out,background-color .15s ease-out;display:grid}@media (hover:hover){.theme-toggle:hover{border-color:var(--color-pen);color:var(--color-pen)}}.theme-toggle:active{transform:scale(.94)}.board{aspect-ratio:1;background:var(--color-paper);border:2px solid var(--color-rule-strong);border-radius:var(--radius-md);grid-area:board;grid-template-columns:repeat(9,minmax(0,1fr));display:grid;overflow:hidden;box-shadow:0 1px 3px oklch(0% 0 0/.08),0 1px 2px oklch(0% 0 0/.05)}.cell{border:1px solid var(--color-rule);font-family:var(--font-serif);font-variant-numeric:tabular-nums lining-nums;color:var(--color-pen);touch-action:manipulation;background:0 0;padding:0;font-size:clamp(1rem,3.3vw,1.4rem);font-weight:500;position:relative}.cell.prefilled{background:var(--color-paper-inset);color:var(--color-ink);font-weight:700}@media (hover:hover){.cell:hover{background:var(--color-pen-soft)}.cell.prefilled:hover{background:var(--color-paper-inset)}}.cell.selected{background:var(--color-pen-soft);box-shadow:inset 0 0 0 2px var(--color-pen);transition:box-shadow .12s ease-out,background-color .12s ease-out}.cell.matching-value{background:var(--color-highlight);box-shadow:inset 0 0 0 1px var(--color-highlight-border)}.cell.selected.matching-value{background:var(--color-highlight);box-shadow:inset 0 0 0 2px var(--color-pen)}.cell.conflict{color:var(--color-error);background:var(--color-error-bg);box-shadow:inset 0 0 0 1px var(--color-error-border)}.cell.conflict.prefilled{color:var(--color-error)}.cell.selected.conflict{box-shadow:inset 0 0 0 2px var(--color-error)}.cell:focus-visible{outline:2px solid var(--color-pen);outline-offset:-3px;z-index:1}.cell:nth-child(3n){border-right:2px solid var(--color-rule-strong)}.cell:nth-child(9n){border-right:none}.cell:nth-child(n+19):nth-child(-n+27),.cell:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid var(--color-rule-strong)}.cell-notes{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);place-items:center;padding:.15rem;display:grid;position:absolute;inset:0}.note-value{font-family:var(--font-sans);color:var(--color-pencil);font-size:.56rem;font-weight:600;line-height:1}.panel{background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius-lg);grid-area:panel;align-content:start;gap:1.1rem;padding:1.1rem;display:grid;box-shadow:0 1px 3px oklch(0% 0 0/.08),0 1px 2px oklch(0% 0 0/.05)}.panel h2{border-bottom:1px solid var(--color-rule);font-family:var(--font-sans);letter-spacing:.09em;text-transform:uppercase;color:var(--color-ink-faint);margin:0;padding-bottom:.5rem;font-size:.78rem;font-weight:700}.difficulty-control{gap:.5rem;display:grid}.difficulty-control label{font-family:var(--font-sans);letter-spacing:.03em;color:var(--color-ink-soft);font-size:.8rem;font-weight:600}.difficulty-row{grid-template-columns:1fr auto;gap:.5rem;display:grid}.difficulty-control select{font:inherit;font-family:var(--font-sans);border:1px solid var(--color-rule);border-radius:var(--radius-sm);background:var(--color-paper);color:var(--color-ink);padding:.55rem .6rem}.new-game-btn{white-space:nowrap}.difficulty-hint{font-family:var(--font-sans);font-variant-numeric:tabular-nums;color:var(--color-ink-faint);margin:0;font-size:.78rem}.number-grid{grid-template-columns:repeat(3,1fr);gap:.5rem;display:grid}.num-btn{font-family:var(--font-serif);aspect-ratio:1;padding:0;font-size:1.15rem;font-weight:600}button{font:inherit;font-family:var(--font-sans);letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--color-rule);border-radius:var(--radius-sm);background:var(--color-paper);color:var(--color-ink);min-height:40px;padding:.6rem .7rem;font-size:.82rem;font-weight:600;transition:transform .12s cubic-bezier(.16,1,.3,1),border-color .15s ease-out,background-color .15s ease-out,color .15s ease-out}@media (hover:hover){button:not(:disabled):not(.cell):hover{cursor:pointer;border-color:var(--color-pen);color:var(--color-pen)}}button:not(:disabled):active{transform:scale(.95)}.cell:not(:disabled):active{transform:none}button:disabled{opacity:.5;cursor:not-allowed}.notes-toggle{justify-content:center;align-items:center;gap:.45rem;display:flex}.notes-toggle .pencil-icon{color:var(--color-pencil);flex-shrink:0}button.active{border-color:var(--color-pen);background:var(--color-pen-soft);color:var(--color-pen)}button.active .pencil-icon{color:var(--color-pen)}.actions{grid-template-columns:repeat(3,1fr);gap:.5rem;display:grid}.actions button{padding-left:.4rem;padding-right:.4rem}.check-result{border-radius:var(--radius-sm);font-family:var(--font-sans);letter-spacing:.08em;text-transform:uppercase;border:2px solid #0000;justify-self:start;margin:0;padding:.55rem .9rem;font-size:.85rem;font-weight:800;animation:.22s cubic-bezier(.16,1,.3,1) stamp-in;transform:rotate(-1.5deg)}@keyframes stamp-in{0%{opacity:0;transform:rotate(-1.5deg)translateY(8px)scale(.97)}to{opacity:1;transform:rotate(-1.5deg)translateY(0)scale(1)}}.check-result.correct{background:var(--color-success-bg);border-color:var(--color-success-border);color:var(--color-success)}.check-result.incorrect{background:var(--color-error-bg);border-color:var(--color-error-border);color:var(--color-error)}@media (prefers-reduced-motion:reduce){.check-result{animation:none}*{transition-duration:.01ms!important}}@media (width<=840px){.layout{grid-template-columns:1fr;grid-template-areas:"masthead""board""panel"}.masthead{padding:1rem 1.1rem .9rem}.panel{gap:.85rem;padding:.9rem 1.1rem}.number-grid{grid-template-columns:repeat(9,1fr);gap:.35rem}.num-btn{aspect-ratio:auto;min-height:44px;font-size:1rem}}@media (width<=420px){.masthead-subtitle{display:none}}.consent-banner{background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius-lg);gap:.85rem;width:min(1000px,100%);margin-bottom:1.1rem;padding:1.1rem 1.2rem;display:grid;box-shadow:0 1px 3px oklch(0% 0 0/.08),0 1px 2px oklch(0% 0 0/.05)}.consent-text{font-family:var(--font-sans);color:var(--color-ink-soft);margin:0;font-size:.85rem;line-height:1.5}.consent-actions{justify-content:flex-end;gap:.6rem;display:flex}.consent-accept{border-color:var(--color-pen);color:var(--color-pen)}@media (width<=480px){.consent-actions{flex-direction:column-reverse}.consent-actions button{width:100%}}.save-control{align-items:center;display:flex}.save-toggle{font-family:var(--font-sans);color:var(--color-ink-soft);cursor:pointer;align-items:center;gap:.5rem;font-size:.78rem;font-weight:600;display:flex}.save-toggle input{width:15px;height:15px;accent-color:var(--color-pen)}
