.ttt{--s:max(min(calc(100svh / 960), calc(100vw / 1536)), min(.5px, calc(100vw / 1536)));--line:calc(14 * var(--s));box-sizing:border-box;color:var(--chalk);background:var(--board);border:solid var(--wood);border-width:0 calc(20 * var(--s)) calc(32 * var(--s));font:700 calc(48 * var(--s)) / 1.15 var(--hand);-webkit-tap-highlight-color:transparent;touch-action:manipulation;flex-direction:column;min-height:100svh;display:flex;position:relative;overflow:clip}.ttt-stage{flex:1;align-content:center;display:grid}.ttt *,.ttt :before,.ttt :after{box-sizing:border-box}.ttt [hidden]{display:none!important}.ttt p{margin:0}.ttt :where(button){font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}.ttt a{color:inherit;text-decoration:none}.ttt :is(button,a):focus-visible{outline:max(3px, calc(4 * var(--s))) dashed var(--chalk);outline-offset:calc(6 * var(--s));border-radius:calc(10 * var(--s))}.ttt ::selection{background:var(--action);color:var(--board)}.ttt svg{fill:none;stroke-linecap:round;stroke-linejoin:round;display:block;overflow:visible}.ttt-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.ttt :is(.ttt-logo,.ttt-nav a,.ttt-sound,.ttt-check,.ttt-level,.ttt-clear,.ttt-again){min-height:44px}.ttt-rail{height:max(48px, calc(68 * var(--s)));margin:0 calc(-20 * var(--s));padding:0 calc(38 * var(--s));background:var(--wood);align-items:center;display:flex;position:relative}.ttt-logo{align-items:center;gap:calc(14 * var(--s));font-size:max(22px, calc(58 * var(--s)));letter-spacing:-.01em;line-height:1;display:flex}.ttt-logo img{width:max(24px, calc(50 * var(--s)));height:max(24px, calc(50 * var(--s)))}.ttt-nav{align-items:center;gap:calc(76 * var(--s));height:100%;translate:-50% calc(-4 * var(--s));font-size:max(19px, calc(44 * var(--s)));display:flex;position:absolute;top:0;left:50%}.ttt-nav a{align-items:center;display:flex}.ttt-sound{align-items:center;gap:calc(24 * var(--s));font-size:max(19px, calc(42 * var(--s)));margin-left:auto;display:flex}.ttt-switch{width:max(40px, calc(84 * var(--s)));height:max(24px, calc(46 * var(--s)));border:max(2px, calc(4 * var(--s))) solid var(--cream);background:var(--switch);border-radius:999px;transition:background .16s;position:relative}.ttt-switch:after{content:"";aspect-ratio:1;background:var(--chalk);border-radius:50%;width:42%;transition:translate .16s cubic-bezier(.16,1,.3,1);position:absolute;top:50%;right:12%;translate:0 -50%}.ttt-sound[aria-pressed=false] .ttt-switch{background:var(--board)}.ttt-sound[aria-pressed=false] .ttt-switch:after{translate:-112% -50%}.ttt-frame{width:calc(1496 * var(--s));height:calc(860 * var(--s));margin:0 auto;position:relative}.ttt-frame>*{position:absolute}.ttt-say{left:calc(32 * var(--s));top:calc(40 * var(--s));width:calc(330 * var(--s))}.ttt-say.fresh{animation:.2s cubic-bezier(.16,1,.3,1) ttt-fade}@keyframes ttt-fade{0%{opacity:0}}.ttt-status{font-size:calc(60 * var(--s));white-space:nowrap;line-height:1.1}.ttt[data-over] .ttt-status{font-size:calc(78 * var(--s))}.ttt-arrow{width:calc(110 * var(--s));height:calc(108 * var(--s));margin:calc(2 * var(--s)) 0 0 calc(50 * var(--s));stroke:var(--chalk);stroke-width:calc(7 * var(--s))}.ttt[data-turn=O] .ttt-say{left:auto;right:calc(32 * var(--s));text-align:right}.ttt[data-turn=O] .ttt-arrow{margin:calc(2 * var(--s)) calc(50 * var(--s)) 0 auto;scale:-1 1}.ttt[data-over] .ttt-arrow{display:none}.ttt[data-over=draw] .ttt-say{left:calc(32 * var(--s));text-align:left;right:auto}.ttt-again{left:calc(100 * var(--s));top:calc(560 * var(--s));width:calc(280 * var(--s));height:calc(76 * var(--s));border:calc(5 * var(--s)) solid var(--action);color:var(--action);font-size:calc(46 * var(--s));white-space:nowrap;border-radius:46% 54% 50% 48%/60% 46% 54% 40%}.ttt[data-turn=O] .ttt-again{left:calc(1116 * var(--s))}.ttt[data-over=draw] .ttt-again{left:calc(100 * var(--s))}.ttt-side{top:calc(210 * var(--s));width:calc(240 * var(--s));flex-direction:column;align-items:center;display:flex}.ttt-side[data-side=X]{left:calc(120 * var(--s));--c:var(--x)}.ttt-side[data-side=O]{left:calc(1136 * var(--s));--c:var(--o)}.ttt-score{height:calc(136 * var(--s));font-size:calc(190 * var(--s));line-height:calc(150 * var(--s));font-variant-numeric:tabular-nums}.ttt-name{color:var(--c);margin-top:calc(17 * var(--s));font-size:calc(74 * var(--s));white-space:nowrap;order:1;line-height:1}.ttt-score.bump{animation:.52s cubic-bezier(.16,1,.3,1) ttt-bump}@keyframes ttt-bump{0%{color:var(--c,var(--chalk));transform:scale(1.5)rotate(-8deg)}to{transform:none}}.mk path{stroke:var(--m);stroke-width:10px}.mk[data-m=X]{--m:var(--x)}.mk[data-m=O]{--m:var(--o)}.ttt-play{left:calc(398 * var(--s));top:calc(14 * var(--s));width:calc(700 * var(--s));height:calc(640 * var(--s));container-type:inline-size}.ttt-lines,.ttt-board,.ttt-strike{width:100%;height:100%;position:absolute;inset:0}.ttt-lines path{stroke:var(--chalk);stroke-width:var(--line);vector-effect:non-scaling-stroke}.ttt-board{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;grid-template:repeat(3,1fr)/repeat(3,1fr);display:grid}.ttt-cell{border-radius:calc(16 * var(--s));position:relative}.ttt-cell:focus-visible{outline-offset:calc(-14 * var(--s))!important}.ttt-cell .mk{width:94%;height:94%;position:absolute;top:50%;left:50%;translate:-50% -50%}.ttt-cell.new .mk path{stroke-dasharray:1;animation:.16s cubic-bezier(.5,0,.3,1) both ttt-draw}.ttt-cell.new .mk path+path{animation-delay:.11s}.ttt[data-keys]:not([data-over]) .ttt-cell:empty:after{content:attr(data-key);font-size:calc(64 * var(--s));opacity:.3;place-items:center;display:grid;position:absolute;inset:0}.ttt[data-keys=pad]:not([data-over]) .ttt-cell:empty:after{content:attr(data-pad)}@keyframes ttt-draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}.ttt[data-over=draw] .ttt-cell .mk,.ttt[data-over=win] .ttt-cell:not(.win) .mk{opacity:.6;transition:opacity .3s}.ttt-strike{pointer-events:none}.ttt-strike line{stroke:var(--chalk);stroke-width:calc(22 * var(--s));vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:50%;visibility:hidden}.ttt[data-over=win] .ttt-strike line{visibility:visible;animation:.28s cubic-bezier(.16,1,.3,1) 60ms both ttt-grow}@keyframes ttt-grow{0%{scale:0}to{scale:1}}.ttt[data-over=win] .ttt-cell.win .mk{animation:ttt-pop .46s cubic-bezier(.16, 1, .3, 1) calc(.24s + var(--d,0s)) both}@keyframes ttt-pop{0%{scale:1}45%{rotate:-6deg;scale:1.22}to{rotate:0deg;scale:1}}.ttt[data-cheer] .ttt-status{transform-origin:0;animation:.62s cubic-bezier(.16,1,.3,1) .12s both ttt-cheer}.ttt[data-cheer][data-turn=O] .ttt-status{transform-origin:100%}@keyframes ttt-cheer{0%{rotate:-8deg;scale:.6}60%{rotate:3deg;scale:1.12}to{rotate:0deg;scale:1}}.ttt-party{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.ttt-party path{stroke:var(--action);stroke-width:calc(9 * var(--s));vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1px;animation:ttt-burst 2.4s cubic-bezier(.16, 1, .3, 1) calc(.26s + var(--d,0s)) forwards}@keyframes ttt-burst{0%{stroke-dashoffset:1px;opacity:1}14%{stroke-dashoffset:0}70%{opacity:1;stroke-dashoffset:0}to{stroke-dashoffset:0;opacity:0}}.ttt-eraser{width:calc(96 * var(--s));border-radius:calc(10 * var(--s));background:linear-gradient(90deg, var(--wood) 0 38%, var(--felt) 38%);opacity:0;pointer-events:none;height:92%;position:absolute;top:4%;left:0}.ttt[data-wiping] .ttt-eraser{animation:.44s cubic-bezier(.45,0,.55,1) both ttt-sweep}@keyframes ttt-sweep{0%{opacity:1;translate:0}85%{opacity:1}to{opacity:0;translate:calc(100cqw - 100%)}}.ttt[data-wiping] .mk.old{animation:.2s linear both ttt-erase}.ttt[data-wiping] .ttt-cell:nth-child(3n+2) .mk.old{animation-delay:.12s}.ttt[data-wiping] .ttt-cell:nth-child(3n) .mk.old{animation-delay:.24s}@keyframes ttt-erase{to{clip-path:inset(0 0 0 100%)}}.ttt-draws{left:calc(398 * var(--s));top:calc(664 * var(--s));width:calc(700 * var(--s));justify-content:center;align-items:center;gap:calc(14 * var(--s));font-size:calc(64 * var(--s));line-height:1.1;display:flex}.ttt-draws b{font-variant-numeric:tabular-nums}.ttt-clear{margin-left:calc(10 * var(--s));height:calc(56 * var(--s));padding:0 calc(20 * var(--s)) 0 calc(14 * var(--s));align-items:center;gap:calc(8 * var(--s));border:max(2px, calc(3 * var(--s))) solid var(--chalk-dim);color:var(--chalk);font-size:max(16px, calc(32 * var(--s)));white-space:nowrap;border-radius:999px;font-weight:400;display:flex}.ttt-clear svg{width:max(18px, calc(32 * var(--s)));height:max(18px, calc(32 * var(--s)));stroke:currentColor;stroke-width:2.6px}.ttt-clear[data-armed]{color:var(--action);border-color:var(--action)}.ttt-clear[data-armed] .ttt-clear-label:after{content:"?"}.ttt-controls{left:calc(62 * var(--s));right:calc(26 * var(--s));top:calc(746 * var(--s));height:calc(92 * var(--s));align-items:center;font-weight:400;display:flex}.ttt-kinds,.ttt-levels{align-items:center;display:flex}.ttt-kinds{gap:calc(44 * var(--s))}.ttt-check{align-items:center;gap:calc(18 * var(--s));height:calc(78 * var(--s));white-space:nowrap;display:flex}.ttt-check svg{width:calc(62 * var(--s));height:calc(62 * var(--s))}.ttt-check .box{stroke:var(--chalk);stroke-width:calc(6 * var(--s))}.ttt-check .tick{stroke:var(--action);stroke-width:calc(8 * var(--s));stroke-dasharray:1;stroke-dashoffset:1px;transition:stroke-dashoffset .18s cubic-bezier(.5,0,.3,1)}.ttt-check[aria-pressed=true] .tick{stroke-dashoffset:0}.ttt-divider{width:calc(5 * var(--s));height:calc(56 * var(--s));margin:0 calc(34 * var(--s)) 0 calc(36 * var(--s));background:var(--chalk);border-radius:999px;flex:none}.ttt-levels{gap:calc(14 * var(--s))}.ttt-level{padding:calc(6 * var(--s)) calc(16 * var(--s));white-space:nowrap;position:relative}.ttt-level svg{inset:calc(-8 * var(--s)) calc(-12 * var(--s));width:calc(100% + 24 * var(--s));height:calc(100% + 16 * var(--s));position:absolute}.ttt-level path{stroke:var(--chalk);stroke-width:5px;stroke-dasharray:1;stroke-dashoffset:1px;transition:stroke-dashoffset .22s cubic-bezier(.5,0,.3,1)}.ttt-level:not([aria-pressed=true]) path{stroke:#0000}.ttt-level[aria-pressed=true] path{stroke-dashoffset:0}.ttt[data-kind="2p"] :is(.ttt-levels,.ttt-divider){display:none}@media (hover:hover){.ttt-nav a:hover,.ttt-logo:hover{text-decoration:underline;text-decoration-thickness:calc(3 * var(--s));text-underline-offset:calc(8 * var(--s))}.ttt-again:hover{background:#f8f8f814}.ttt:not([data-over]) .ttt-cell:empty:hover{background:#f8f8f80f}.ttt-clear:hover{color:var(--action);border-color:var(--action)}.ttt-check:hover,.ttt-level:not([aria-pressed=true]):hover{color:var(--action)}}@media (aspect-ratio<=4/5){.ttt{--s:calc(100vw / 760);--line:calc(10 * var(--s));border-width:0 calc(10 * var(--s)) calc(20 * var(--s));min-height:0;display:block}.ttt-rail{height:auto;margin:0 calc(-10 * var(--s));padding:4px calc(20 * var(--s))}.ttt-nav{display:none}.ttt-sound-label{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.ttt-frame{width:auto;height:auto;padding:calc(16 * var(--s)) calc(20 * var(--s)) calc(28 * var(--s));row-gap:calc(12 * var(--s));grid-template:"say say say""x draws o""play play play""ctl ctl ctl"/1fr auto 1fr;display:grid}.ttt-frame>*{position:static;inset:auto}.ttt-say,.ttt[data-turn=O] .ttt-say,.ttt[data-over=draw] .ttt-say{text-align:center;grid-area:say;justify-content:center;align-items:center;width:auto;min-height:44px;display:flex}.ttt-status,.ttt[data-over] .ttt-status{font-size:calc(56 * var(--s))}.ttt .ttt-arrow{display:none}.ttt-again{width:auto;height:44px;padding:0 calc(30 * var(--s));font-size:calc(40 * var(--s));grid-area:say;place-self:center end}.ttt[data-over] .ttt-say{padding-left:calc(8 * var(--s));justify-content:flex-start}.ttt-side{width:auto;padding-left:calc(16 * var(--s));flex-direction:column;grid-area:x;align-items:flex-start;display:flex}.ttt-side[data-side=O]{padding:0 calc(16 * var(--s)) 0 0;grid-area:o;align-items:flex-end}.ttt-score{height:auto;font-size:calc(64 * var(--s));order:1;margin:0;line-height:1}.ttt-name{font-size:calc(36 * var(--s));padding-bottom:calc(4 * var(--s));border-bottom:calc(6 * var(--s)) solid transparent;order:0;margin:0}.ttt:not([data-over])[data-turn=X] .ttt-side[data-side=X] .ttt-name,.ttt:not([data-over])[data-turn=O] .ttt-side[data-side=O] .ttt-name{border-bottom-color:var(--c)}.ttt-draws{width:auto;font-size:calc(34 * var(--s));flex-direction:column;grid-area:draws;gap:0}.ttt-draws b{font-size:calc(56 * var(--s))}.ttt-clear{height:44px;margin:4px 0 0;font-size:16px}.ttt{--fixed:184px;--chrome:308}.ttt[data-kind="2p"]{--fixed:140px}.ttt-play{width:min(100%, calc(100svh - var(--fixed) - var(--chrome) * var(--s)));min-width:calc(440 * var(--s));aspect-ratio:1;grid-area:play;justify-self:center;height:auto;position:relative!important}.ttt-controls{height:auto;font-size:calc(40 * var(--s));flex-direction:column;grid-area:ctl;gap:0}.ttt-kinds{gap:calc(36 * var(--s))}.ttt-check{height:auto}.ttt-check svg{width:calc(52 * var(--s));height:calc(52 * var(--s))}.ttt-level{align-items:center;display:flex}.ttt-divider{display:none}.ttt-level svg{inset:2px calc(-4 * var(--s));width:calc(100% + 8 * var(--s));height:calc(100% - 4px)}}@media (prefers-reduced-motion:reduce){.ttt *,.ttt :before,.ttt :after{transition-duration:1ms!important;animation-duration:1ms!important;animation-delay:0s!important}}