:root{--bg: #0f1115;--panel: #171a21;--panel-2: #1f232c;--text: #e6e8ec;--muted: #9aa3b2;--accent: #f0a500;--accent-2: #ffd166;--danger: #ef4444;--ok: #22c55e;--light: #ead9b8;--dark: #6b4f2a}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.app{min-height:100%;display:flex;flex-direction:column}main{flex:1;padding:24px;max-width:960px;margin:0 auto;width:100%}.nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 24px;background:var(--panel);border-bottom:1px solid #2a2f3a}.nav a{color:var(--text);text-decoration:none;padding:6px 10px;border-radius:6px}.nav a:hover{background:var(--panel-2)}.nav .brand{font-weight:700;font-size:18px}.nav nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}.nav-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}@media (max-width: 540px){.nav{padding:10px 14px;gap:8px}.nav nav{order:3;width:100%}}.nav .cta{background:var(--accent);color:#1a1300;font-weight:600}.nav .cta:hover{background:var(--accent-2)}.user{color:var(--muted)}footer{padding:16px 24px;color:var(--muted);text-align:center;border-top:1px solid #2a2f3a}.card{background:var(--panel);padding:24px;border-radius:12px;border:1px solid #2a2f3a}.card.narrow{max-width:420px;margin:24px auto}.card h1{margin-top:0}.card h2{margin-top:24px;color:var(--accent-2)}.lede{color:var(--muted)}.row{display:flex;gap:12px;align-items:center;margin-top:16px;flex-wrap:wrap}.row.between{justify-content:space-between}button,.cta,.ghost-btn{border:none;padding:10px 16px;border-radius:8px;cursor:pointer;font-weight:600;text-decoration:none;display:inline-block}.cta{background:var(--accent);color:#1a1300}.cta:hover{background:var(--accent-2)}.ghost,.ghost-btn{background:var(--panel-2);color:var(--text)}.ghost:hover,.ghost-btn:hover{background:#2a2f3a}form{display:flex;flex-direction:column;gap:12px;margin-top:12px}label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:13px}input{background:var(--bg);color:var(--text);border:1px solid #2a2f3a;padding:10px 12px;border-radius:8px;font:inherit}input:focus{outline:2px solid var(--accent)}.error{color:#fff;background:var(--danger);padding:8px 12px;border-radius:6px}.info{color:#07210e;background:var(--ok);padding:8px 12px;border-radius:6px;margin-top:12px}.muted{color:var(--muted)}.muted a{color:var(--accent-2)}.formula{background:var(--bg);padding:10px 14px;border-radius:6px;border:1px solid #2a2f3a}table.lb{width:100%;border-collapse:collapse;margin-top:12px}table.lb th,table.lb td{padding:10px 12px;border-bottom:1px solid #2a2f3a;text-align:left}table.lb th{color:var(--muted);font-weight:600}table.lb .rank{font-weight:700;color:var(--accent-2)}table.lb td.right,.right{text-align:right}table.lb td.right button{margin-left:6px}.ghost.danger{background:#3a1a1a;color:#ffb3b3}.ghost.danger:hover{background:#5a2424}.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:16px}.mode-card{text-align:left;background:var(--panel-2);color:var(--text);border:1px solid #2a2f3a;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:transform .05s ease,border-color .1s ease}.mode-card:hover{border-color:var(--accent);transform:translateY(-1px)}.mode-title{font-size:18px;font-weight:700}.mode-desc{color:var(--muted);font-weight:400;font-size:14px}.hud{display:flex;gap:16px;color:var(--muted);margin-top:8px}.status{margin:12px 0}.board{display:grid;grid-template-columns:repeat(8,1fr);width:min(560px,100%);aspect-ratio:1 / 1;margin:12px auto;border:2px solid #2a2f3a;border-radius:6px;overflow:hidden;-webkit-user-select:none;user-select:none}.sq{position:relative;display:flex;align-items:center;justify-content:center}.sq.light{background:var(--light)}.sq.dark{background:var(--dark)}.sq.target:after{content:"";position:absolute;width:28%;height:28%;border-radius:50%;background:#f0a500b3;box-shadow:0 0 0 4px #f0a50040}.sq.sel{outline:3px solid var(--accent);outline-offset:-3px}.piece{width:70%;height:70%;border-radius:50%;box-shadow:inset 0 -4px 6px #0006,0 2px 4px #0006}.piece.w{background:radial-gradient(circle at 30% 30%,#fff,#cfcfcf)}.piece.b{background:radial-gradient(circle at 30% 30%,#555,#111)}.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:start;margin-top:8px}@media (max-width: 880px){.hero{grid-template-columns:1fr}}.hero-title{margin:0 0 8px;font-size:44px;letter-spacing:-.5px;line-height:1.05}.hero-title .accent{color:var(--accent)}.hero-lede{color:var(--muted);font-size:16px;max-width:60ch}.bullets{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}@media (max-width: 600px){.bullets{grid-template-columns:1fr}}.bullet{background:var(--panel);padding:14px;border-radius:10px;border:1px solid #2a2f3a}.bullet span{font-size:20px;display:block;margin-bottom:6px}.bullet b{display:block;margin-bottom:2px}.bullet p{margin:0;color:var(--muted);font-size:13px}.demo-wrap{margin:20px 0 8px}.demo-board{position:relative;display:grid;grid-template-columns:repeat(8,1fr);width:min(360px,100%);aspect-ratio:1 / 1;border:2px solid #2a2f3a;border-radius:8px;overflow:hidden;box-shadow:0 12px 32px #00000073}.demo-sq{position:relative;display:flex;align-items:center;justify-content:center}.demo-sq.light{background:var(--light)}.demo-sq.dark{background:var(--dark)}.demo-piece{width:70%;height:70%;border-radius:50%;box-shadow:inset 0 -3px 4px #0006,0 1px 3px #0006;animation:piecePulse 4s ease-in-out infinite}.demo-piece.w{background:radial-gradient(circle at 30% 30%,#fff,#cfcfcf)}.demo-piece.b{background:radial-gradient(circle at 30% 30%,#555,#111);animation-delay:2s}@keyframes piecePulse{0%,to{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.03);filter:brightness(1.08)}}.demo-mover{position:absolute;width:8.75%;height:8.75%;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ffe7a1,var(--accent));box-shadow:0 0 0 4px #f0a50040,inset 0 -3px 4px #00000059;left:26.875%;top:64.375%;animation:hop 6s ease-in-out infinite}@keyframes hop{0%{left:26.875%;top:64.375%}20%{left:39.375%;top:51.875%}40%{left:51.875%;top:39.375%}60%{left:64.375%;top:39.375%}80%{left:76.875%;top:26.875%}to{left:26.875%;top:64.375%}}.demo-caption{margin-top:10px}.auth-card{background:var(--panel);border:1px solid #2a2f3a;border-radius:14px;padding:22px;position:sticky;top:16px}.auth-card h2{margin-top:0}.tabs{display:flex;gap:6px;background:var(--bg);padding:4px;border-radius:10px;margin-bottom:14px}.tab{flex:1;background:transparent;color:var(--muted);padding:8px 12px;border-radius:8px;font-weight:600;cursor:pointer;border:none}.tab.active{background:var(--panel-2);color:var(--text);box-shadow:0 1px 2px #0000004d}.auth-actions{display:flex;flex-direction:column;gap:10px;margin-top:12px}.cta-outline{background:transparent;border:1px solid var(--accent);color:var(--accent-2);padding:10px 16px;border-radius:8px;cursor:pointer;font-weight:600}.cta-outline:hover{background:#f0a50014}.muted.center,.center{text-align:center}.muted.small,.small{font-size:12px}