:root{font-family:Inter,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;-webkit-text-size-adjust:100%}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}html,body{height:100%}body{min-height:100vh;display:flex;flex-direction:column;place-items:center;margin:0}h1{font-size:3.2em;line-height:1.1}#app{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.vanilla:hover{filter:drop-shadow(0 0 2em #f7df1eaa)}.card{padding:2em}.read-the-docs{color:#888}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}}.game-board{display:flex;flex-direction:column;align-items:center;margin-top:2rem}.outer-board{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:15px;margin-bottom:1rem}.outer-cell{display:flex;justify-content:center;align-items:center;font-size:2rem;font-weight:700;min-height:140px;min-width:140px}.inner-board-container{border:3px solid #646cff;border-radius:8px;padding:10px;background-color:#64b9ff59;width:140px;height:140px;display:flex;justify-content:center;align-items:center;box-sizing:border-box}.inner-board-container.full{border-color:#c8c8ff66;background-color:#646cff0d}.inner-board{display:grid;grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,40px);grid-gap:5px}.cell{width:40px;height:40px;display:flex;justify-content:center;align-items:center;font-size:1.5rem;font-weight:700;border-radius:4px;padding:0;cursor:pointer;box-sizing:border-box;flex-shrink:0;flex-grow:0}.cell:disabled{opacity:.6;cursor:not-allowed}.winner-x{color:#ff6464;border:3px solid #ff6464;border-radius:8px}.winner-o{color:#64ff64;border:3px solid #64ff64;border-radius:8px}.status{margin-top:1rem;font-size:1.2rem;font-weight:700;padding:10px;border-radius:8px}.status.game-over{background-color:#ff646433;color:#ff6464;border:2px solid #ff6464;font-size:1.4rem}.status.game-over.tie{background-color:#64646433;color:#aaa;border:2px solid #aaaaaa}.inner-board.winner-x,.inner-board.winner-o{position:relative}.winner-marker{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;font-size:3rem;font-weight:700;z-index:10}.instructions{margin-top:2rem;padding:1rem;background-color:#646cff1a;border:1px solid #646cff;border-radius:8px;max-width:500px;margin-left:auto;margin-right:auto}.instructions h3{margin-top:0;color:#646cff;font-size:1.3rem}.instructions p{text-align:left;margin:.5rem 0;line-height:1.4}footer{position:fixed;bottom:0;left:0;width:100%;padding:1rem;text-align:center;background-color:var(--background-color)}footer a{color:var(--text-color);text-decoration:none}footer a:hover{opacity:.8}.menu{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh}.menu .logo{width:64px;height:64px;margin-bottom:1.5rem}.menu h2{margin-bottom:2rem;font-size:2.2rem;color:#64b9ff;letter-spacing:1px}.menu button{margin:.5rem 0;padding:.8rem 2.5rem;font-size:1.2rem;border-radius:8px;border:none;background:#64b9ff;color:#fff;font-weight:700;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s;box-shadow:0 2px 8px #64b9ff14;width:220px;max-width:90vw;display:block}.menu button:hover{background:#4096d6;color:#eaf6ff}