.ttt{--ttt-surface:#fff;--ttt-background:#f4f6fb;--ttt-text:#182339;--ttt-muted:#526078;--ttt-border:#c8d1df;--ttt-x:#2559b8;--ttt-o:#923caf;--ttt-win:#d9f5e6;--ttt-focus:#2559b8;color:var(--ttt-text);overflow-wrap:anywhere;max-width:58rem;margin-inline:auto;padding:1rem}.dark .ttt{--ttt-surface:#1d293c;--ttt-background:#142033;--ttt-text:#eef2fa;--ttt-muted:#b6c3d8;--ttt-border:#52627a;--ttt-x:#8cb5ff;--ttt-o:#e1a6fa;--ttt-win:#244c40;--ttt-focus:#8cb5ff}.ttt *{box-sizing:border-box}.ttt h1{margin-block:.5rem;font-size:clamp(2rem,7vw,3rem)}.ttt h2{font-size:1.2rem}.ttt p{line-height:1.6}.ttt .ttt-muted{color:var(--ttt-muted)}.ttt-panel{background:var(--ttt-background);border:1px solid var(--ttt-border);border-radius:1.25rem;margin-block:1.5rem;padding:clamp(.75rem,3vw,1.5rem)}.ttt-controls,.ttt-actions,.ttt-links{flex-wrap:wrap;gap:.75rem;display:flex}.ttt-controls label{flex:12rem;gap:.4rem;display:grid}.ttt select{border:1px solid var(--ttt-border);background:var(--ttt-surface);width:100%;min-height:44px;color:var(--ttt-text);font:inherit;border-radius:.5rem;padding:.5rem}.ttt-score{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-block:1.25rem;display:grid}.ttt-score div{text-align:center;background:var(--ttt-surface);border-radius:.75rem;padding:.75rem .25rem}.ttt-score dt{color:var(--ttt-muted);font-size:.85rem}.ttt-score dd{margin:.25rem 0 0;font-size:1.6rem;font-weight:700}.ttt-status{text-align:center;min-height:1.6em;font-weight:600}.ttt-board{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;width:min(100%,22rem);margin:1rem auto 1.5rem;display:grid}.ttt-cell{aspect-ratio:1;border:1px solid var(--ttt-border);background:var(--ttt-surface);min-width:40px;min-height:40px;color:var(--ttt-text);font:inherit;cursor:pointer;border-radius:.8rem;font-size:clamp(2rem,10vw,3.5rem);font-weight:700}.ttt-cell[data-mark=X]{color:var(--ttt-x)}.ttt-cell[data-mark=O]{color:var(--ttt-o)}.ttt-cell[data-winning=true]{background:var(--ttt-win);border-width:3px}.ttt-cell:disabled{cursor:default;opacity:1}.ttt :is(button,select,a):focus-visible{outline:3px solid var(--ttt-focus);outline-offset:3px}.ttt-actions{justify-content:center}.ttt-actions button{min-height:44px}.ttt-links a,.ttt-back{min-height:44px;color:inherit;text-underline-offset:.2em;align-items:center;padding:.5rem;text-decoration:underline;display:inline-flex}.ttt-board{background:linear-gradient(160deg, color-mix(in oklab, var(--ttt-border) 55%, var(--ttt-surface)), var(--ttt-surface));box-shadow:var(--shadow-lg,0 12px 30px -14px #00000059);border-radius:1.2rem;padding:.6rem}.ttt-cell{box-shadow:inset 0 -3px 0 color-mix(in oklab, var(--ttt-border) 70%, transparent);place-items:center;padding:14%;transition:transform .12s,background .15s;display:grid}.ttt-cell:not(:disabled):hover{background:color-mix(in oklab, var(--ttt-surface) 85%, var(--ttt-border));transform:translateY(-2px)}.ttt-mark{fill:none;stroke-linecap:round;stroke-width:11px;width:100%;height:100%}.ttt-x path{stroke:var(--ttt-x);stroke-dasharray:80;stroke-dashoffset:80px;animation:.18s ease-out forwards ttt-draw}.ttt-x path+path{animation-delay:.12s}.ttt-o circle{stroke:var(--ttt-o);stroke-dasharray:170;stroke-dashoffset:170px;transform-origin:50%;animation:.32s ease-out forwards ttt-draw;transform:rotate(-90deg)}@keyframes ttt-draw{to{stroke-dashoffset:0}}.ttt-cell[data-winning=true]{border-color:var(--ttt-focus);animation:.7s ease-in-out 2 ttt-win}@keyframes ttt-win{50%{transform:scale(1.06)}}@media (prefers-reduced-motion:reduce){.ttt-mark *,.ttt-cell{stroke-dashoffset:0!important;transition:none!important;animation:none!important}}