:root{color-scheme:light dark;font-family:ui-rounded,SF Pro Rounded,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-synthesis:none;--paper: #f4efe4;--paper-line: rgba(120, 110, 95, .12);--paper-grain: rgba(66, 59, 48, .045);--graphite: #4a4741;--muted: #69645b;--x: #c8412f;--o: #2f5e9e;--note: #fff3b0;--note-line: rgba(126, 107, 43, .14);--control-ink: #403b31;--desk-edge: #292825;--desk-center: #55514a;color:var(--graphite);background:var(--desk-edge)}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0}#app{display:grid;place-items:center}html,body{overflow:hidden}body{min-width:320px;color:var(--graphite);background-color:var(--desk-edge);background-image:radial-gradient(ellipse at 50% 42%,rgba(255,255,255,.1),transparent 48%),repeating-linear-gradient(87deg,rgba(255,255,255,.018) 0 1px,transparent 1px 46px),linear-gradient(135deg,var(--desk-edge),var(--desk-center) 52%,#34332f)}button,a{font:inherit}button{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid var(--o);outline-offset:3px}.pencil-defs{position:absolute;pointer-events:none}.stage{width:min(100%,520px);height:min(100svh,960px);margin:auto;padding:12px 0;display:flex;flex-direction:column;align-items:center;gap:14px}.sheet{position:relative;width:100%;flex:1;min-height:0;padding:22px 30px 15px;display:flex;flex-direction:column;overflow:hidden;background-color:var(--paper);background-image:repeating-radial-gradient(circle at 17% 23%,var(--paper-grain) 0 .45px,transparent .75px 4px),repeating-linear-gradient(to bottom,transparent 0 27px,var(--paper-line) 27px 28px);background-size:9px 11px,100% 28px;box-shadow:0 24px 60px #00000059;transform:rotate(-.4deg);transform-origin:center center}.sheet:after{position:absolute;inset:0;border:1px solid rgba(55,48,39,.08);content:"";pointer-events:none}.masthead{display:flex;align-items:flex-end;justify-content:space-between;flex:none}.eyebrow{margin:0 0 2px;color:var(--muted);font-size:.66rem;font-weight:760;letter-spacing:.15em;text-transform:uppercase}h1{margin:0;color:var(--graphite);font-size:clamp(1.8rem,4vw,2.35rem);font-weight:850;line-height:.98;letter-spacing:.025em}.mini-mark{width:86px;height:45px;flex:none;overflow:visible;transform:rotate(-3deg)}.mini-mark path,.status-underline path,.frame path,.tally-svg path,.board-lines path,.mark path,.win-overlay path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.pencil-ink{stroke-width:3.5}.pencil-ghost{opacity:.55;stroke-width:2.5;transform:translate(1.2px,1px)}.mini-x{color:var(--x)}.mini-o{color:var(--o)}.mini-mark .pencil-ink{stroke-width:4.2}.mini-mark .pencil-ghost{stroke-width:2.8}.scoreboard{min-height:51px;margin:12px 0 3px;padding:5px 0 4px;display:grid;grid-template-columns:1fr 1.35fr 1fr;align-items:start;flex:none}.tally{min-width:0;display:flex;flex-direction:column;align-items:center;color:var(--graphite);text-align:center}.tally-art{min-height:23px;display:flex;align-items:center;justify-content:center;gap:4px;color:var(--graphite)}.tally-svg{display:block;max-width:100%;overflow:visible}.tally-svg .pencil-ink{stroke-width:3.5}.tally-svg .pencil-ghost{stroke-width:2.5}.tally-count{font-size:.72rem;font-weight:800}.tally-label{display:block;max-width:100%;overflow:hidden;color:var(--muted);font-size:.62rem;font-weight:740;line-height:1.1;letter-spacing:.035em;text-overflow:ellipsis;white-space:nowrap}.status-block{width:min(76%,260px);min-height:41px;margin:1px auto 0;flex:none}.status{min-height:26px;margin:0;color:var(--graphite);font-size:1.08rem;font-weight:500;line-height:1.45;letter-spacing:.012em;text-align:center;transform:skew(-4deg)}.status-underline{width:100%;height:8px;display:block;color:var(--graphite);overflow:visible}.status-underline .pencil-ink{stroke-width:1.9}.status-underline .pencil-ghost{stroke-width:1.25}.board-region{width:100%;flex:1;min-height:0;display:grid;place-items:center;container-type:size}.board-wrap{position:relative;width:min(88cqw,100cqh);aspect-ratio:1}.board,.board-lines,.win-overlay{position:absolute;inset:0;width:100%;height:100%}.board{display:grid;grid-template-columns:repeat(3,1fr)}.board-lines,.win-overlay{overflow:visible;color:var(--graphite);pointer-events:none}.board-lines .pencil-ink{stroke-width:3.5}.board-lines .pencil-ghost{stroke-width:2.5}.cell{border:0;border-radius:20%;padding:13%;background:transparent;cursor:pointer;transition:background-color .14s ease,opacity .18s ease,filter .18s ease}.cell:disabled{cursor:default}.cell.dimmed{opacity:.35}.cell.winning{filter:drop-shadow(0 2px 3px color-mix(in srgb,currentColor,transparent 58%))}.mark{width:100%;height:100%;display:block;overflow:visible}.mark-x{color:var(--x);transform:rotate(-1.5deg)}.mark-o{color:var(--o);transform:rotate(1.4deg)}.mark .pencil-ink{stroke-width:3.5}.mark .pencil-ghost{stroke-width:2.5}.mark path{stroke-dasharray:180;stroke-dashoffset:180;animation:draw-pencil .14s cubic-bezier(.2,.72,.3,1) forwards}.mark-x .stroke-2{animation-delay:.14s}.mark-o path{stroke-dasharray:190;stroke-dashoffset:190;animation-duration:.28s}.win-overlay path{stroke-dasharray:400;stroke-dashoffset:400}.win-overlay.visible path{animation:draw-pencil .26s ease-out forwards}.win-overlay.x-win{color:var(--x)}.win-overlay.o-win{color:var(--o)}.win-overlay .pencil-ink{stroke-width:3.5}.win-overlay .pencil-ghost{stroke-width:2.5}footer{min-height:17px;padding-top:2px;flex:none;color:var(--muted);font-size:.65rem;font-weight:720;letter-spacing:.03em;text-align:center}footer a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}.notepad{position:relative;width:min(calc(100% - 36px),480px);padding:12px 18px 13px;flex:none;overflow:hidden;color:var(--control-ink);background-color:var(--note);background-image:repeating-radial-gradient(circle at 72% 31%,rgba(70,59,29,.045) 0 .45px,transparent .75px 4px),repeating-linear-gradient(to bottom,transparent 0 25px,var(--note-line) 25px 26px);background-size:9px 11px,100% 26px;box-shadow:0 12px 24px #00000040;transform:rotate(.6deg);transform-origin:center center}.notepad:before{position:absolute;top:0;bottom:0;left:10px;width:1px;background:#be4e393d;content:""}.notepad:after{position:absolute;right:0;bottom:0;width:18px;height:18px;background:linear-gradient(135deg,#5f512724 0 49%,color-mix(in srgb,var(--note),white 11%) 50%);content:"";pointer-events:none}.segmented,.actions{display:grid;gap:7px}.segmented{grid-template-columns:1fr 1fr}.segmented button,.actions button{position:relative;min-width:0;border:0;padding:3px 8px;color:var(--control-ink);background:transparent;font-size:.72rem;font-weight:760;line-height:1.05;cursor:pointer}.segmented button{min-height:34px}.segmented button>span,.actions button>span{position:relative;z-index:1}.frame{position:absolute;inset:0;width:100%;height:100%;color:var(--control-ink);overflow:visible;pointer-events:none}.frame-fill{fill:transparent}.active .frame-fill{fill:url(#hatch);opacity:.42}.frame .pencil-ink{stroke-width:1.8}.frame .pencil-ghost{stroke-width:1.15}.segmented button.active{font-weight:850}.difficulty-wrap{min-height:29px;margin-top:5px;display:grid;grid-template-columns:45px 1fr;align-items:center;gap:5px;transition:opacity .14s ease}.difficulty-wrap.is-hidden{display:none}.difficulty-caption{color:var(--control-ink);font-size:.6rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.segmented.compact{gap:6px}.segmented.compact button{min-height:27px;font-size:.65rem}.actions{margin-top:6px;grid-template-columns:1fr 1fr 1.35fr}.actions button{min-height:33px;padding-inline:5px;font-size:.66rem}.actions button:active:not(:disabled){transform:translateY(1px) rotate(-.3deg)}.actions button:disabled{cursor:default;opacity:.38}.hatch-line{stroke:var(--control-ink)}@keyframes draw-pencil{to{stroke-dashoffset:0}}@media(hover:hover){.cell:not(:disabled):hover{background:color-mix(in srgb,var(--graphite),transparent 94%)}.segmented button:not(.active):hover,.actions button:not(:disabled):hover{color:var(--control-ink)}.segmented button:not(.active):hover .frame,.actions button:not(:disabled):hover .frame{color:color-mix(in srgb,var(--control-ink),var(--x) 28%)}}@media(min-width:900px){.stage{width:min(100%,580px)}.board-wrap{width:min(92cqw,96cqh)}}@media(max-width:899px){:root{background:var(--paper)}body{background-color:var(--paper);background-image:repeating-radial-gradient(circle at 17% 23%,var(--paper-grain) 0 .45px,transparent .75px 4px),repeating-linear-gradient(to bottom,transparent 0 27px,var(--paper-line) 27px 28px);background-size:9px 11px,100% 28px}.stage{height:100svh;padding:0;gap:0}.sheet{padding:14px 20px 6px;background:transparent;box-shadow:none;transform:none}.sheet:after{display:none}.notepad{width:100%;padding:10px 16px 11px;box-shadow:0 -7px 18px #372f1e21;transform:none}}@media(max-height:760px){.sheet{padding-top:10px}.scoreboard{margin-top:7px}.notepad{padding-block:8px 9px}.difficulty-wrap{margin-top:3px}.actions{margin-top:4px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important}}@media(prefers-color-scheme:dark){:root{--paper: #23211d;--paper-line: rgba(255, 255, 255, .05);--paper-grain: rgba(255, 255, 255, .028);--graphite: #d9d4c7;--muted: #bdb6a8;--x: #e8624f;--o: #5d8fd6;--note: #5a5030;--note-line: rgba(255, 255, 255, .065);--control-ink: #f1ead8;--desk-edge: #171816;--desk-center: #292a26}.sheet:after{border-color:#ffffff0b}.notepad:before{background:#e76f5847}.notepad:after{background:linear-gradient(135deg,#13120e2e 0 49%,#665b38 50%)}}