:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}:root{--bg:#0f1220;--grid:#2b2f45;--cell:#161a2e;--accent:#8a90ff;--x:#4ade80;--o:#60a5fa;--stroke:10px;--radius:20px;--dur:.22s;--e:ease-out}.rootBox{width:min(90vmin,540px);aspect-ratio:1/1;margin:32px auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px;background:linear-gradient(180deg,#151935,#0e1022);border-radius:calc(var(--radius) + 4px);box-shadow:0 10px 30px #0006}.square{position:relative;background:var(--cell);border:1px solid var(--grid);border-radius:var(--radius);display:grid;place-items:center;cursor:pointer;outline:none;transition:transform var(--dur) var(--e),box-shadow var(--dur) var(--e);--scale: .8}.square:focus-visible{box-shadow:0 0 0 3px #8a90ff73}.square.null:hover{box-shadow:inset 0 0 0 2px var(--accent);transform:translateY(-1px)}.o:before{content:"";position:absolute;inset:15%;border:var(--stroke) solid var(--o);border-radius:50%;transform:scale(var(--scale));opacity:0;animation:o-in var(--dur) var(--e) forwards;filter:drop-shadow(0 0 10px rgba(96,165,250,.35))}.x:before,.x:after{content:"";position:absolute;width:70%;height:var(--stroke);background:linear-gradient(90deg,#4ade80,#4ade80);border-radius:999px;transform-origin:center;opacity:0;transform:scaleX(.9) rotate(45deg);box-shadow:0 0 14px #4ade8059}.x:after{transform:scaleX(.9) rotate(-45deg)!important}.x:before{animation:x-in var(--dur) var(--e) forwards}.x:after{animation:x-in var(--dur) var(--e) .06s forwards}.player.X{color:var(--x)}.player.O{color:var(--o)}@keyframes o-in{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}@keyframes x-in{0%{transform:scaleX(.6) rotate(var(--r,45deg));opacity:0}to{transform:scaleX(1) rotate(var(--r,45deg));opacity:1}}