.ttt{justify-content:center;align-items:center;gap:var(--gap-group);height:100svh;padding:calc(var(--nav-h,64px) + var(--s5)) var(--page-pad-x) var(--s8);background:var(--spring);color:var(--ink);flex-direction:column;display:flex;position:relative;overflow:hidden}.ttt-404{z-index:1;width:100%;height:100%;fill:var(--ink);opacity:.045;pointer-events:none;-webkit-user-select:none;user-select:none;position:absolute;inset:0}.ttt-404 text{margin:0}.ttt-head,.ttt-foot{align-items:center;gap:var(--gap-head);text-align:center;flex-direction:column;display:flex}.ttt-foot{min-height:calc(56px * var(--vp-scale))}.ttt-head .ttt-l1,.ttt-head .ttt-l2{text-wrap:balance;display:block}.ttt-head h1 br{display:none}.ttt-stage{flex:1 1 0;place-items:center;width:100%;min-height:0;display:grid;container-type:size}.ttt-board{--cell:min(28vw, calc(140px * var(--vp-scale)), calc((100cqh - 6px) / 3));grid-template-columns:repeat(3, var(--cell));grid-template-rows:repeat(3, var(--cell));background:var(--ink);gap:3px;display:grid}.ttt-cell{background:var(--spring);cursor:pointer;perspective:calc(700px * var(--vp-scale));transition:background-color .26s var(--ease-site);border:0;place-items:center;padding:0;display:grid;position:relative}.ttt-cell[aria-disabled=true],.ttt-board.is-waiting .ttt-cell{cursor:default}.ttt-card,.ttt-mark,.ttt-ghost,.ttt-face{place-items:center;display:grid;position:absolute;inset:0}.ttt-heart{width:56%;height:56%;fill:var(--cinnabar)}.ttt-mark .ttt-heart{animation:.52s cubic-bezier(.34,1.56,.64,1) both ttt-pop}.ttt-x{fill:none;width:64%;height:64%;stroke:var(--ink);stroke-width:11px;stroke-linecap:round}.ttt-face .ttt-x path{stroke-dasharray:1;stroke-dashoffset:1px;animation:.24s cubic-bezier(.65,0,.35,1) forwards ttt-draw}.ttt-face .ttt-x path+path{animation-delay:.2s}.ttt-ghost{opacity:0;transition:opacity .22s var(--ease-site)}.ttt-ghost .ttt-x{stroke:var(--ink);opacity:.14}@media (hover:hover){.ttt-board:not(.is-waiting) .ttt-cell:not([aria-disabled=true]):hover .ttt-ghost{opacity:1}}.ttt-card{transform-style:preserve-3d}.ttt-face{backface-visibility:hidden}.ttt-back{transform:rotateY(180deg)}.ttt-cell:has(.is-turned){z-index:1}.ttt-card.is-turned{animation:.9s both ttt-flip}@keyframes ttt-flip{0%{animation-timing-function:cubic-bezier(.33,0,.2,1);transform:translateZ(0)rotateY(0)rotate(0)}16%{transform:translateZ(calc(22px * var(--vp-scale))) rotateY(-10deg) rotateZ(-2deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}72%{transform:translateZ(calc(46px * var(--vp-scale))) rotateY(188deg) rotateZ(1deg);animation-timing-function:cubic-bezier(.22,1,.36,1)}to{transform:translateZ(0)rotateY(180deg)rotate(0)}}.ttt-board{position:relative}.ttt-strike{z-index:2;pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.ttt-pen{fill:none;stroke:var(--ink);stroke-width:4px;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1px;animation:.62s cubic-bezier(.45,0,.2,1) .12s forwards ttt-draw}.ttt-cell.is-line .ttt-mark,.ttt-cell.is-line .ttt-back .ttt-heart{animation:.56s both ttt-beat;animation-delay:calc(.2s + var(--o) * .21s)}.ttt-card,.ttt-mark{--r:0deg}.ttt-card.is-turned{--r:180deg}.ttt-board.is-clearing .ttt-card,.ttt-board.is-clearing .ttt-mark{animation:.56s both ttt-unflip;animation-delay:calc(var(--i) * 35ms)}.ttt-board.is-clearing .ttt-strike{animation:.32s cubic-bezier(.55,0,.75,0) forwards ttt-clear}.ttt-say{animation:.36s cubic-bezier(.22,1,.36,1) both ttt-say;display:inline-block}@keyframes ttt-pop{0%{opacity:0;transform:scale(.5)}60%{opacity:1}to{opacity:1;transform:scale(1)}}@keyframes ttt-draw{to{stroke-dashoffset:0}}@keyframes ttt-beat{0%{animation-timing-function:cubic-bezier(.22,1,.36,1);transform:scale(1)}30%{animation-timing-function:cubic-bezier(.65,0,.35,1);transform:scale(1.22)}58%{animation-timing-function:cubic-bezier(.22,1,.36,1);transform:scale(.96)}to{transform:scale(1)}}@keyframes ttt-unflip{0%{transform:translateZ(0) rotateY(var(--r)) rotateZ(0);opacity:1;animation-timing-function:cubic-bezier(.33,0,.2,1)}22%{transform:translateZ(calc(22px * var(--vp-scale))) rotateY(calc(var(--r) - 10deg)) rotateZ(-2deg);opacity:1;animation-timing-function:cubic-bezier(.55,0,.75,0)}58%{transform:translateZ(calc(40px * var(--vp-scale))) rotateY(calc(var(--r) + 90deg)) rotateZ(1deg);opacity:1}59%,to{transform:translateZ(calc(40px * var(--vp-scale))) rotateY(calc(var(--r) + 90deg)) rotateZ(1deg);opacity:0}}@keyframes ttt-clear{to{opacity:0;transform:scale(.86)}}@keyframes ttt-say{0%{opacity:0;transform:translateY(calc(6px * var(--vp-scale)))}to{opacity:1;transform:none}}.ttt-again{color:var(--ink)}button.ttt-again{cursor:pointer;background:0 0;border:0;padding:0}@media (orientation:landscape) and (max-height:520px){.ttt{column-gap:var(--gap-group);row-gap:var(--gap-block);grid-template:"head stage"1fr"foot stage"/1fr auto;align-items:end;display:grid}.ttt-head{grid-area:head}.ttt-foot{grid-area:foot;align-self:start}.ttt-stage{aspect-ratio:1;grid-area:stage;width:auto;height:100%}}.ttt-actions{gap:var(--gap-block);display:flex}.ttt--zero{gap:var(--gap-block);padding-bottom:var(--s6)}.ttt--zero .ttt-stage{--h:min(100cqh, calc((100cqw - 2 * var(--s5)) / 2.3));justify-content:center;align-items:center;gap:var(--s5);display:flex}.ttt--zero .ttt-board{--cell:calc((var(--h) - 6px) / 3)}.ttt--zero .ttt-four{font-size:calc(var(--h) / .79);height:var(--h);color:var(--ink);-webkit-user-select:none;user-select:none;align-items:flex-end;line-height:.79;display:flex}@media (max-width:809px){.ttt--zero .ttt-stage{--h:min(100cqh, calc((100cqw - 2 * var(--s3)) / 2.27));gap:var(--s3);justify-content:space-between}.ttt--zero .ttt-four{margin-inline-start:0}}@media (orientation:landscape) and (max-height:520px){.ttt--zero{grid-template-columns:auto 1fr}.ttt--zero .ttt-stage{--h:min(100cqh, calc((100cqw - 2 * var(--s3)) / 2.3));aspect-ratio:auto;gap:var(--s3);width:100%}}@media (prefers-reduced-motion:reduce){.ttt-mark .ttt-heart,.ttt-cell.is-line .ttt-mark,.ttt-cell.is-line .ttt-back .ttt-heart,.ttt-say{animation:none}.ttt-pen,.ttt-face .ttt-x path,.ttt-card.is-turned{animation-duration:1ms;animation-delay:0s}.ttt-board.is-clearing .ttt-card,.ttt-board.is-clearing .ttt-mark{animation:.32s both ttt-clear}}.ttt-brag{cursor:pointer;background:0 0;border:0;place-items:center;width:100vw;max-width:none;height:100svh;max-height:none;margin:0;padding:0;display:grid;inset:0;overflow:hidden}.ttt-brag:not([open]){display:none}.ttt-brag::backdrop{background:#f1ece3c7;animation:.36s cubic-bezier(.22,1,.36,1) both ttt-say}.ttt-brag.is-out::backdrop{animation:.56s cubic-bezier(.55,0,.75,0) both ttt-fade-off}.ttt-band{grid-area:1/1;justify-content:center;justify-self:start;width:130vw;display:flex;position:relative;left:-15vw}.ttt-band-red{z-index:2;padding:var(--s6) 0;background:var(--cinnabar);color:var(--spring);text-align:center;animation:.64s cubic-bezier(.22,1,.36,1) both ttt-swipe;rotate:-4deg}.ttt-brag{--brag-fs:calc(clamp(29px, calc(14.51px + 3.714vw), 68px) * var(--vp-scale))}.ttt-band-red .display{font-size:var(--brag-fs);max-width:min(18em, calc(100vw - 2 * var(--page-pad-x)));text-wrap:balance;margin-left:0}.ttt-band-ink{z-index:1;padding:var(--s3) 0;background:var(--ink);color:var(--spring);justify-content:flex-start;animation:.64s cubic-bezier(.22,1,.36,1) .12s both ttt-swipe-back;overflow:hidden;rotate:7deg}.ttt-ticker{white-space:nowrap;animation:14s linear infinite ttt-tick}.ttt-brag.is-out .ttt-band-red{animation:.56s cubic-bezier(.55,0,.75,0) both ttt-swipe-off}.ttt-brag.is-out .ttt-band-ink{animation:.56s cubic-bezier(.55,0,.75,0) both ttt-swipe-off-back}@media (max-width:809px){.ttt-band-ink{translate:0 calc(var(--s6) + 1.6 * var(--brag-fs))}}@keyframes ttt-swipe{0%{transform:translate(-120%)}to{transform:none}}@keyframes ttt-swipe-back{0%{transform:translate(120%)}to{transform:none}}@keyframes ttt-swipe-off{to{transform:translate(120%)}}@keyframes ttt-swipe-off-back{to{transform:translate(-120%)}}@keyframes ttt-tick{to{transform:translate(-50%)}}@keyframes ttt-fade-off{0%{opacity:1}to{opacity:0}}.ttt-burst{pointer-events:none;position:fixed;inset:0;overflow:hidden}.ttt-bit{left:0;bottom:calc(-12px * var(--vp-scale));width:calc(14px * var(--vp-scale));height:calc(8px * var(--vp-scale));background:var(--ink);opacity:0;animation:ttt-confetti var(--d) var(--t) both;position:absolute}.ttt-bit.is-right{left:auto;right:0}.ttt-bit.is-heart{width:calc(22px * var(--vp-scale));height:calc(22px * var(--vp-scale));background:0 0}.ttt-bit .ttt-heart{width:100%;height:100%}@keyframes ttt-confetti{0%{transform:translate(0, 0) rotate(0) scale(var(--s));opacity:1;animation-timing-function:cubic-bezier(.15,.7,.35,1)}35%{transform:translate(var(--dx), calc(var(--up) * -1)) rotate(calc(var(--r) * .4)) scale(var(--s));opacity:1;animation-timing-function:cubic-bezier(.45,0,.85,.5)}82%{opacity:1}to{transform:translate(calc(var(--dx) * 1.3), calc(var(--fall) - var(--up))) rotate(var(--r)) scale(var(--s));opacity:0}}@media (prefers-reduced-motion:reduce){.ttt-band,.ttt-ticker,.ttt-brag::backdrop{animation:none!important}.ttt-burst{display:none}}