.kb{display:flex;flex-direction:column;gap:6px;-webkit-user-select:none;user-select:none;width:100%}.kb-row{display:flex;gap:5px;justify-content:center;align-items:stretch}.kb-key{--fk: rgba(255, 255, 255, .25);min-width:36px;height:40px;padding:0 4px;border-radius:8px;display:grid;place-items:center;font-family:var(--font-num);font-weight:800;font-size:15px;color:var(--ink);background:#ffffff0d;border:1px solid rgba(255,255,255,.12);border-bottom:3px solid var(--fk);transition:transform .08s,filter .15s;cursor:default}.kb-key.mod{min-width:48px;font-size:11px;font-weight:700;color:var(--ink-dim);background:#ffffff08}.kb-key[role=button]{cursor:pointer}.kb-key[role=button]:hover{filter:brightness(1.5)}.kb-key.fam{filter:brightness(1.55);box-shadow:0 0 10px color-mix(in srgb,var(--fk) 60%,transparent)}.kb-key.pressed{transform:translateY(3px) scale(.94);filter:brightness(1.7);border-bottom-width:1px}.kb-key.pulse{animation:kbPulse .9s ease-in-out infinite;box-shadow:0 0 0 2px var(--fk),0 0 18px var(--fk);z-index:2}@keyframes kbPulse{0%,to{transform:translateY(0);filter:brightness(1.1)}50%{transform:translateY(-4px);filter:brightness(1.8)}}.kb-key.flash-ok{animation:kbOk .5s ease-out}.kb-key.flash-err{animation:kbErr .5s ease-out}@keyframes kbOk{0%{background:#58ffa4d9;transform:translateY(3px) scale(.94)}60%{background:#58ffa459;box-shadow:0 0 22px #58ffa4cc}to{background:initial}}@keyframes kbErr{0%{background:#ff6b6be6}20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}to{background:initial;transform:translate(0)}}.kb-key.kb-thumb{flex:0 1 220px}.kb-compact .kb-row{gap:3px}.kb-compact .kb-key{min-width:0;flex:1;max-width:34px;height:27px;font-size:11px;border-radius:6px;border-bottom-width:2px}.kb-compact .kb-key.mod{flex:1.4;max-width:46px;font-size:8px;min-width:0}.kb-compact .kb-key.kb-thumb{max-width:none}.kb-compact .kb-key.pulse{animation-duration:.7s}.finger-legend{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:14px}.fchip-group{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.fchip-hand{font-size:12px;color:var(--ink-dim);font-weight:700}.fchip{--fc: var(--ink-dim);display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);font-size:12.5px;transition:all .2s}.fchip .dot{width:10px;height:10px;border-radius:50%;background:var(--fc);box-shadow:0 0 6px var(--fc)}.fchip.active{border-color:var(--fc);background:#ffffff24;transform:translateY(-3px);animation:chipBounce .8s ease-in-out infinite}@keyframes chipBounce{0%,to{transform:translateY(-3px)}50%{transform:translateY(2px)}}.demo-banner{display:flex;align-items:center;justify-content:center;gap:14px;background:#7c6cf624;border:1px solid rgba(124,108,246,.4);border-radius:16px;padding:12px 18px;margin:16px 0;font-size:16px;min-height:56px}.prompt-line{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:16px;min-height:74px}.prompt-key{font-family:var(--font-num);font-weight:800;font-size:46px;width:84px;height:78px;display:grid;place-items:center;border-radius:16px;background:#00000059;border:2px solid var(--pk, var(--accent-2));color:#fff;box-shadow:0 0 26px color-mix(in srgb,var(--pk, #22d3ee) 45%,transparent);animation:chipBounce 1s ease-in-out infinite}@media (max-width: 700px){.tut-rules{grid-template-columns:1fr}.grad-stats{grid-template-columns:1fr 1fr 1fr}.tutorial-banner{flex-direction:column;align-items:flex-start}.tutorial-banner .tb-cta{margin-left:0}}.game-root{position:fixed;top:0;right:0;bottom:0;left:0;background:#070b26;z-index:10;overflow:hidden}.game-root canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.game-root.fever:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;box-shadow:inset 0 0 90px #ffd43b59;animation:feverPulse .9s ease-in-out infinite}@keyframes feverPulse{0%,to{opacity:.55}50%{opacity:1}}.hud{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;padding:14px 16px}.hud button,.hud-btn{pointer-events:auto}.hud-top{display:flex;align-items:flex-start;gap:16px}.hud-left,.hud-right{display:flex;align-items:center;gap:10px;flex:1}.hud-right{justify-content:flex-end}.hud-btn{width:40px;height:40px;border-radius:13px;border:1px solid rgba(255,255,255,.16);background:#0a0e2899;color:#fff;font-size:18px;cursor:pointer;display:grid;place-items:center;transition:transform .12s,background .15s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.hud-btn:hover{background:#7c6cf666;transform:translateY(-2px)}.lives{font-size:19px;letter-spacing:2px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.hud-center{text-align:center;min-width:200px}.hud-score{font-size:44px;font-weight:800;line-height:1;color:#fff;text-shadow:0 0 24px rgba(124,108,246,.8),0 3px 0 rgba(0,0,0,.4)}.hud-time{font-size:15px;color:#b8c0e8;margin-top:2px}.hud-time-unit{font-size:11px;margin-left:2px}.hud-timebar{height:5px;background:#ffffff24;border-radius:999px;margin-top:6px;overflow:hidden}.hud-timebar>div{height:100%;width:100%;background:linear-gradient(90deg,#22d3ee,#58ffa4);border-radius:999px;transition:width .2s linear}.hud-stats{display:flex;gap:8px;align-items:center;font-size:13.5px;color:#cdd5f5}.hud-stats b{color:#fff;font-size:15px}.hud-chip{min-width:58px;text-align:center}.hud-combo{display:inline-block;font-size:24px;font-weight:800;color:var(--gold);text-shadow:0 0 16px rgba(255,212,59,.7),0 2px 0 rgba(0,0,0,.4)}.hud-chip.combo-pop .hud-combo{animation:comboBounce .25s cubic-bezier(.34,1.56,.64,1)}@keyframes comboBounce{0%{transform:scale(1)}45%{transform:scale(1.45)}to{transform:scale(1)}}.hud-tier{font-size:11.5px;color:#b8c0e8;background:#ffffff1a;padding:3px 10px;border-radius:999px}.hud-bottom{display:flex;flex-direction:column;align-items:center;gap:8px;padding-bottom:10px}.typer-box{position:relative;width:min(560px,92vw);height:62px;background:#080c23d1;border:2px solid rgba(116,192,252,.45);border-radius:18px;display:flex;align-items:center;justify-content:center;padding:0 22px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 8px 30px #00000073,inset 0 0 24px #74c0fc0f;transition:border-color .2s}.typer-box.locked{border-color:#58ffa4bf}.typer-box.shake{animation:shakeX .3s;border-color:#ff6b6bd9}.typer-text{font-family:var(--font-num);font-weight:800;font-size:27px;color:#fff;letter-spacing:4px}.typer-caret{width:3px;height:30px;margin-left:4px;background:var(--accent-2);border-radius:2px;animation:caretBlink 1s steps(1) infinite}@keyframes caretBlink{0%,55%{opacity:1}56%,to{opacity:0}}.typer-placeholder{position:absolute;font-size:14px;color:#b8c0e873;pointer-events:none}.typer-text:not(:empty)+.typer-caret~.typer-placeholder,.typer-box.has-text .typer-placeholder{display:none}.typer-text:not(:empty)~.typer-placeholder{display:none}.hud-hint{font-size:12px;color:#b8c0e899}.kb-hint-wrap{width:min(700px,94vw);margin-bottom:10px;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:6px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}.kb-hint-chip{--fc: var(--accent-2);min-height:20px;font-size:13px;font-weight:700;color:var(--ink-dim)}.kb-hint-chip:not(:empty){color:var(--fc);text-shadow:0 0 10px var(--fc)}.hud-btn-on{border-color:#ffd43b99!important;background:#ffd43b2e!important}.result-modal{width:min(500px,calc(100vw - 28px));max-height:calc(100vh - 36px);max-height:calc(100dvh - 36px);display:flex;flex-direction:column;text-align:center;padding:20px 22px 16px;overflow:hidden}.result-modal h2{font-size:22px;flex-shrink:0}.result-scroll{flex:1;min-height:0;overflow-y:auto;margin:0 -10px;padding:2px 10px 6px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent}.result-scroll::-webkit-scrollbar{width:6px}.result-scroll::-webkit-scrollbar-thumb{background:#ffffff38;border-radius:999px}.result-scroll::-webkit-scrollbar-track{background:transparent}.result-stars{font-size:32px;letter-spacing:7px;margin:2px 0 4px;height:40px}.result-stars .star{display:inline-block;color:#ffffff2e;transform:scale(0)}.result-stars .star.on{color:var(--gold);text-shadow:0 0 18px rgba(255,212,59,.8);animation:starPop .5s cubic-bezier(.34,1.56,.64,1) forwards}.result-score{font-size:44px;font-weight:800;color:#fff;line-height:1.15;text-shadow:0 0 30px rgba(124,108,246,.7);display:flex;justify-content:center;align-items:center;gap:12px}.new-record{font-size:13px;font-family:var(--font-display);color:#5c4400;background:linear-gradient(120deg,#ffe066,#ffd43b,#ffe066);background-size:200% auto;padding:3px 12px;border-radius:999px;animation:shine 1.6s linear infinite}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.result-grid>div{background:#00000040;border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:9px 4px}.result-grid b{display:block;font-size:19px;color:#fff}.result-grid span{font-size:11px;color:var(--ink-dim)}.result-note{color:var(--ink-dim);font-size:13.5px;margin:0 0 10px}.result-note.error{color:var(--danger)}.rewards{background:#ffd43b14;border:1px solid rgba(255,212,59,.3);border-radius:14px;padding:12px;margin-bottom:12px}.reward-points{font-size:16px;color:var(--gold)}.reward-points b{font-size:22px}.level-up{margin-top:8px;font-family:var(--font-display);font-size:16px;color:#58ffa4;animation:popIn .4s cubic-bezier(.34,1.56,.64,1)}.reward-sub{margin-top:8px;font-size:12px;color:var(--ink-dim)}.new-badges{display:flex;flex-direction:column;gap:8px;margin-top:10px}.badge-shine{display:flex;align-items:center;gap:12px;text-align:left;background:linear-gradient(120deg,#ffe06633,#ffffff0f,#ffe06633);background-size:200% auto;border:1px solid rgba(255,212,59,.5);border-radius:12px;padding:8px 12px;animation:popIn .5s cubic-bezier(.34,1.56,.64,1) backwards,shine 2.2s linear infinite}.badge-shine .bi{font-size:25px}.badge-shine b{display:block;font-size:13.5px;color:var(--gold)}.badge-shine span:not(.bi){font-size:11.5px;color:var(--ink-dim)}.guest-note{background:#22d3ee14;border:1px solid rgba(34,211,238,.3);border-radius:14px;padding:12px;margin-bottom:4px}.guest-note p{font-size:13px;color:var(--ink-dim);margin:0 0 10px;line-height:1.7}.result-actions{display:flex;gap:12px;justify-content:center;flex-shrink:0;padding-top:12px}.result-actions .btn.big{font-size:17px;padding:12px 26px}@media (max-height: 700px){.result-modal{padding:14px 18px 12px}.result-modal h2{font-size:19px}.result-stars{font-size:26px;height:32px;margin:0 0 2px}.result-score{font-size:36px}.result-grid{margin:10px 0}.result-actions{padding-top:8px}.result-actions .btn.big{font-size:15px;padding:10px 20px}}@media (max-width: 700px){.hud-score{font-size:32px}.hud-stats{display:none}}.tutorial-page{width:min(860px,100% - 40px);margin:0 auto;padding:26px 0 60px;flex:1}.tut-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.tut-steps{display:flex;gap:8px}.tut-step-dot{width:34px;height:8px;border-radius:999px;background:#ffffff1f;transition:background .3s}.tut-step-dot.on{background:linear-gradient(90deg,var(--accent-2),var(--accent))}.tut-card{animation:popIn .35s cubic-bezier(.34,1.56,.64,1)}.tut-title{font-size:26px;margin-bottom:6px;display:flex;align-items:center;gap:10px}.tut-sub{color:var(--ink-dim);font-size:14.5px;line-height:1.8;margin-bottom:18px}.tut-actions{display:flex;gap:12px;justify-content:center;margin-top:22px}.hand-chart{display:block;width:min(560px,100%);margin:0 auto 18px;border-radius:16px;border:1px solid rgba(255,255,255,.15);box-shadow:0 12px 40px #0006}.demo-banner{display:flex;align-items:center;justify-content:center;gap:14px;background:#7c6cf624;border:1px solid rgba(124,108,246,.4);border-radius:16px;padding:12px 18px;margin:16px 0;font-size:15.5px;min-height:56px;flex-wrap:wrap}.demo-banner .demo-key{font-family:var(--font-num);font-weight:800;font-size:24px;width:44px;height:44px;display:grid;place-items:center;border-radius:10px;background:#00000059;border-bottom:3px solid var(--dk, var(--accent-2));animation:chipBounce .8s ease-in-out infinite}.tut-rules{margin:14px 0 0;padding-left:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}.tut-rules li{font-size:13.5px;color:var(--ink-dim);line-height:1.7;padding-left:22px;position:relative}.tut-rules li:before{content:"✔";position:absolute;left:0;color:var(--ok)}.practice-hud{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}.lesson-tabs{display:flex;gap:6px;flex-wrap:wrap}.lesson-tab{border:1px solid rgba(255,255,255,.12);background:#ffffff0a;color:var(--ink-dim);border-radius:999px;padding:6px 14px;font-size:12.5px;font-family:inherit;cursor:pointer;transition:all .18s}.lesson-tab.on{background:linear-gradient(135deg,var(--accent),#5a4ae0);color:#fff;border-color:transparent;box-shadow:0 3px #0000004d}.practice-stats{display:flex;gap:14px;font-size:13.5px;color:var(--ink-dim)}.practice-stats b{color:var(--ink);font-family:var(--font-num)}.practice-stage{text-align:center;margin:10px 0 18px}.prompt-line{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:16px;min-height:84px;flex-wrap:wrap}.prompt-key{font-family:var(--font-num);font-weight:800;font-size:44px;width:84px;height:78px;display:grid;place-items:center;border-radius:16px;background:#00000059;border:2px solid var(--pk, var(--accent-2));color:#fff;box-shadow:0 0 26px var(--pk, #22d3ee);animation:chipBounce 1s ease-in-out infinite}.prompt-arrow{font-size:26px;color:var(--ink-dim)}.progress-dots{display:flex;gap:5px;justify-content:center;flex-wrap:wrap}.pdot{width:12px;height:12px;border-radius:50%;background:#ffffff24;transition:all .25s}.pdot.cur{background:var(--accent-2);box-shadow:0 0 8px var(--accent-2);transform:scale(1.25)}.pdot.ok{background:var(--ok)}.pdot.err{background:var(--danger)}.practice-msg{min-height:24px;font-size:15px;margin-top:12px;color:var(--ink-dim)}.practice-msg.good{color:var(--ok);font-weight:700}.practice-msg.bad{color:var(--danger)}.grad-crown{font-size:60px;text-align:center;margin-bottom:6px;animation:bob 2.4s ease-in-out infinite}.grad-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.grad-stat{background:#00000040;border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:14px 8px;text-align:center}.grad-stat b{display:block;font-size:24px;font-family:var(--font-num)}.grad-stat span{font-size:12px;color:var(--ink-dim)}.finger-advice{background:#22d3ee14;border:1px solid rgba(34,211,238,.25);border-radius:14px;padding:12px 16px;font-size:13.5px;color:var(--ink-dim);line-height:1.8;margin-bottom:6px}.tutorial-banner{display:flex;align-items:center;gap:20px;width:100%;text-align:left;font-family:inherit;color:var(--ink);background:linear-gradient(120deg,#ffd43b24,#7c6cf61f);border:1px solid rgba(255,212,59,.35);border-radius:24px;padding:22px 28px;margin:26px 0 -4px;cursor:pointer;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}.tutorial-banner:hover{transform:translateY(-4px)}.tutorial-banner .tb-icon{font-size:42px;animation:bob 3s ease-in-out infinite}.tutorial-banner h3{font-size:22px;margin-bottom:5px}.tutorial-banner p{color:var(--ink-dim);font-size:13.5px;margin:0}.tutorial-banner .tb-cta{margin-left:auto;flex-shrink:0}@media (max-width: 700px){.tut-rules{grid-template-columns:1fr}.tutorial-banner{flex-direction:column;align-items:flex-start}.tutorial-banner .tb-cta{margin-left:0}}:root{--bg-0: #070b26;--bg-1: #141034;--bg-2: #251550;--card: rgba(255, 255, 255, .06);--card-border: rgba(255, 255, 255, .12);--ink: #eef2ff;--ink-dim: #b8c0e8;--accent: #7c6cf6;--accent-2: #22d3ee;--accent-3: #f472b6;--gold: #ffd43b;--ok: #58ffa4;--danger: #ff6b6b;--font-display: "ZCOOL KuaiLe", "Baloo 2", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;--font-num: "Baloo 2", "ZCOOL KuaiLe", "PingFang SC", system-ui, sans-serif;--radius: 20px;--shadow-chunk: 0 6px 0 rgba(0, 0, 0, .28)}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:PingFang SC,Hiragino Sans GB,Microsoft YaHei,system-ui,sans-serif;color:var(--ink);background:radial-gradient(1100px 500px at 85% -10%,rgba(124,108,246,.22),transparent 60%),radial-gradient(900px 480px at 0% 110%,rgba(34,211,238,.12),transparent 60%),linear-gradient(180deg,var(--bg-0) 0%,var(--bg-1) 55%,var(--bg-2) 100%);background-attachment:fixed;min-height:100vh;-webkit-font-smoothing:antialiased}#root{min-height:100vh;display:flex;flex-direction:column}h1,h2,h3{font-family:var(--font-display);font-weight:400;margin:0}.num{font-family:var(--font-num);font-variant-numeric:tabular-nums}.page{width:min(1120px,100% - 40px);margin:0 auto;padding:26px 0 60px;flex:1}.topbar{position:sticky;top:0;z-index:50;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#0a0c22b8;border-bottom:1px solid rgba(255,255,255,.08)}.topbar-inner{width:min(1120px,100% - 40px);margin:0 auto;display:flex;align-items:center;gap:22px;padding:12px 0}.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:22px;color:var(--ink);text-decoration:none;letter-spacing:1px}.logo .logo-icon{font-size:26px;filter:drop-shadow(0 0 10px rgba(124,108,246,.8));display:inline-block;animation:bob 2.6s ease-in-out infinite}.nav{display:flex;gap:6px;flex:1}.nav a{color:var(--ink-dim);text-decoration:none;padding:8px 16px;border-radius:999px;font-size:15px;transition:all .18s}.nav a:hover{color:var(--ink);background:#ffffff14}.nav a.active{color:#fff;background:linear-gradient(135deg,var(--accent),#5a4ae0);box-shadow:0 3px #0000004d}.user-chip{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--card-border);padding:5px 14px 5px 6px;border-radius:999px;cursor:pointer;color:var(--ink);text-decoration:none;transition:transform .15s}.user-chip:hover{transform:translateY(-1px)}.user-chip .avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#2a2450,#3b2a68);display:grid;place-items:center;font-size:20px}.user-chip .who{display:flex;flex-direction:column;line-height:1.15}.user-chip .who b{font-size:14px}.user-chip .who span{font-size:11px;color:var(--gold)}.btn{--btn-bg: linear-gradient(135deg, var(--accent), #5a4ae0);display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;font-family:inherit;font-size:16px;font-weight:700;color:#fff;background:var(--btn-bg);padding:12px 26px;border-radius:16px;box-shadow:var(--shadow-chunk);transition:transform .12s,box-shadow .12s,filter .15s;text-decoration:none;-webkit-user-select:none;user-select:none}.btn:hover{filter:brightness(1.1);transform:translateY(-2px)}.btn:active{transform:translateY(2px);box-shadow:0 2px #00000047}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn.cyan{--btn-bg: linear-gradient(135deg, #22d3ee, #0891b2)}.btn.pink{--btn-bg: linear-gradient(135deg, #f472b6, #db2777)}.btn.gold{--btn-bg: linear-gradient(135deg, #ffd43b, #f59f00);color:#5c4400}.btn.ghost{background:var(--card);border:1px solid var(--card-border);box-shadow:none;color:var(--ink)}.btn.ghost:hover{background:#ffffff1a}.btn.big{font-size:20px;padding:16px 40px;border-radius:20px}.btn.sm{font-size:13px;padding:8px 16px;border-radius:12px}.card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:22px}.card-title{font-size:19px;margin-bottom:14px;display:flex;align-items:center;gap:8px}.field{display:flex;flex-direction:column;gap:7px;margin-bottom:15px}.field label{font-size:13px;color:var(--ink-dim)}.field input{background:#0000004d;border:1.5px solid rgba(255,255,255,.14);color:var(--ink);border-radius:13px;padding:12px 15px;font-size:16px;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s}.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #7c6cf640}.form-error{color:var(--danger);font-size:13.5px;min-height:18px;margin:-6px 0 8px}.modal-mask{position:fixed;top:0;right:0;bottom:0;left:0;background:#050614b8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:100;animation:fadeIn .2s;padding:20px}.modal{width:min(420px,100%);background:linear-gradient(160deg,#191a42,#221748);border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:28px;box-shadow:0 24px 70px #0000008c;animation:popIn .28s cubic-bezier(.34,1.56,.64,1);max-height:90vh;overflow:auto}.modal h2{font-size:24px;text-align:center;margin-bottom:4px}.modal .modal-sub{text-align:center;color:var(--ink-dim);font-size:13.5px;margin-bottom:20px}.tabs{display:flex;background:#0000004d;border-radius:14px;padding:4px;margin-bottom:20px}.tabs button{flex:1;border:none;background:transparent;color:var(--ink-dim);font-size:15px;font-weight:700;padding:9px;border-radius:11px;cursor:pointer;font-family:inherit;transition:all .18s}.tabs button.active{background:linear-gradient(135deg,var(--accent),#5a4ae0);color:#fff}.hero{text-align:center;padding:52px 0 30px}.hero .brand-chip{display:inline-block;font-family:PingFang SC,Microsoft YaHei,system-ui,sans-serif;font-size:13.5px;font-weight:700;letter-spacing:2px;color:var(--gold);background:#ffd43b1f;border:1px solid rgba(255,212,59,.4);border-radius:999px;padding:6px 18px;margin-bottom:14px}.hero h1{font-size:clamp(40px,6vw,64px);background:linear-gradient(120deg,#74c0fc 10%,#a29bfe,#f783ac 80%);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:4px;filter:drop-shadow(0 6px 18px rgba(124,108,246,.35))}.hero p{color:var(--ink-dim);font-size:17px;margin:14px 0 26px}.hero-planes{font-size:30px;letter-spacing:18px;margin-bottom:8px;display:block}.hero-planes span{display:inline-block;animation:fly 3.2s ease-in-out infinite}.hero-planes span:nth-child(2){animation-delay:.4s}.hero-planes span:nth-child(3){animation-delay:.8s}.hero-planes span:nth-child(4){animation-delay:1.2s}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:26px 0}.mode-card{position:relative;overflow:hidden;border-radius:26px;padding:30px 28px;border:1px solid rgba(255,255,255,.14);cursor:pointer;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;text-align:left;color:var(--ink);font-family:inherit}.mode-card:hover{transform:translateY(-6px) scale(1.015)}.mode-card.letters{background:linear-gradient(140deg,#22d3ee29,#7c6cf61a)}.mode-card.words{background:linear-gradient(140deg,#f472b626,#7c6cf61a)}.mode-card .mode-icon{font-size:44px;display:inline-block;margin-bottom:12px;animation:bob 3s ease-in-out infinite}.mode-card h3{font-size:26px;margin-bottom:8px}.mode-card p{color:var(--ink-dim);font-size:14.5px;line-height:1.7;margin:0 0 18px}.mode-card .mode-preview{font-family:var(--font-num);font-weight:800;font-size:15px;color:#ffffff8c;margin-bottom:20px;letter-spacing:2px}.mode-card .mode-tag{position:absolute;top:18px;right:18px;font-size:12px;padding:4px 12px;border-radius:999px;background:#ffffff1f}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px}.step{text-align:center;padding:20px 12px}.step .step-icon{font-size:34px;margin-bottom:10px}.step b{display:block;margin-bottom:6px;font-size:15px}.step span{font-size:13px;color:var(--ink-dim);line-height:1.6}.kbd-row{display:flex;justify-content:center;gap:8px;margin:16px 0 6px}.kbd{min-width:44px;height:46px;display:grid;place-items:center;font-family:var(--font-num);font-weight:800;font-size:17px;color:#fff;background:linear-gradient(180deg,#3b3b6e,#2a2a55);border-radius:10px;box-shadow:0 4px #15152e;animation:pressKey 2.8s ease-in-out infinite}.kbd-row .kbd:nth-child(2){animation-delay:.35s}.kbd-row .kbd:nth-child(3){animation-delay:.7s}.kbd-row .kbd:nth-child(4){animation-delay:1.05s}.kbd-row .kbd:nth-child(5){animation-delay:1.4s}.kbd-row .kbd:nth-child(6){animation-delay:1.75s}.kbd-row .kbd:nth-child(7){animation-delay:2.1s}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}.stat{background:var(--card);border:1px solid var(--card-border);border-radius:18px;padding:16px 18px}.stat .stat-label{font-size:12.5px;color:var(--ink-dim);margin-bottom:6px}.stat .stat-value{font-family:var(--font-num);font-weight:800;font-size:28px;line-height:1}.stat .stat-value small{font-size:14px;color:var(--ink-dim);font-weight:600}.podium{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;align-items:end;margin:22px 0 26px}.podium-item{text-align:center;padding:20px 12px 16px;border-radius:20px;border:1px solid rgba(255,255,255,.15);position:relative;animation:popIn .45s cubic-bezier(.34,1.56,.64,1) backwards}.podium-item:nth-child(1){background:linear-gradient(160deg,#c9a96138,#ffffff0d);animation-delay:.1s}.podium-item:nth-child(2){background:linear-gradient(160deg,#a0aec033,#ffffff0d);animation-delay:0s}.podium-item:nth-child(3){background:linear-gradient(160deg,#c47c4833,#ffffff0d);animation-delay:.2s}.podium-item .medal{font-size:34px;display:block;margin-bottom:4px}.podium-item .p-avatar{font-size:40px;display:block;margin:6px 0}.podium-item .p-name{font-weight:700;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.podium-item .p-value{font-family:var(--font-num);font-weight:800;font-size:26px;color:var(--gold)}.podium-item .p-level{font-size:11.5px;color:var(--ink-dim);margin-top:3px}.lb-row{display:flex;align-items:center;gap:14px;padding:11px 16px;border-radius:14px;border:1px solid transparent;transition:background .15s}.lb-row:hover{background:#ffffff0d}.lb-row.me{background:#7c6cf62e;border-color:#7c6cf680}.lb-row .rank-n{font-family:var(--font-num);font-weight:800;width:34px;text-align:center;font-size:16px;color:var(--ink-dim)}.lb-row.top1 .rank-n,.lb-row.top2 .rank-n,.lb-row.top3 .rank-n{font-size:20px}.lb-row .lb-name{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-row .lb-level{font-size:11.5px;color:var(--gold);background:#ffd43b1f;padding:2px 9px;border-radius:999px;white-space:nowrap}.lb-row .lb-value{font-family:var(--font-num);font-weight:800;font-size:17px;min-width:64px;text-align:right}.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}.badge-card{text-align:center;padding:18px 12px;border-radius:18px;background:var(--card);border:1px solid var(--card-border);transition:transform .18s}.badge-card:hover{transform:translateY(-3px)}.badge-card.earned{background:linear-gradient(160deg,#ffd43b24,#ffffff0a);border-color:#ffd43b73}.badge-card .badge-icon{font-size:36px;display:block;margin-bottom:8px}.badge-card.locked .badge-icon{filter:grayscale(1) brightness(.55)}.badge-card b{display:block;font-size:14.5px;margin-bottom:5px}.badge-card span{font-size:11.5px;color:var(--ink-dim);line-height:1.5;display:block}.badge-card .badge-date{font-size:10.5px;color:var(--gold);margin-top:6px}.progress{height:14px;background:#00000059;border-radius:999px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}.progress>div{height:100%;background:linear-gradient(90deg,var(--accent-2),var(--accent),var(--accent-3));border-radius:999px;transition:width .6s cubic-bezier(.22,1,.36,1)}.table{width:100%;border-collapse:collapse;font-size:14px}.table th{text-align:left;color:var(--ink-dim);font-weight:600;font-size:12.5px;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.1)}.table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.05)}.table .num{font-weight:700}.win-badge{color:var(--ok);font-size:12px;background:#58ffa41f;padding:2px 10px;border-radius:999px}.lose-badge{color:var(--danger);font-size:12px;background:#ff6b6b1f;padding:2px 10px;border-radius:999px}.track-card{display:flex;align-items:center;gap:16px;width:100%;text-align:left;font-family:inherit;color:var(--ink);background:linear-gradient(140deg,#f472b626,#7c6cf61a);border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:18px 20px;margin-bottom:14px;cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1),filter .18s}.track-card:last-child{background:linear-gradient(140deg,#22d3ee29,#7c6cf61a);margin-bottom:0}.track-card:hover{transform:translateY(-3px);filter:brightness(1.15)}.track-card .track-icon{font-size:34px;flex-shrink:0}.track-card .track-body{flex:1;display:flex;flex-direction:column;gap:4px}.track-card .track-body b{font-size:17px}.track-card .track-body span{font-size:12.5px;color:var(--ink-dim);font-family:var(--font-num);letter-spacing:.5px}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes fly{0%,to{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12px) rotate(5deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes popIn{0%{opacity:0;transform:scale(.8) translateY(14px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes pressKey{0%,84%,to{transform:translateY(0);box-shadow:0 4px #15152e}90%{transform:translateY(4px);box-shadow:0 0 #15152e}}@keyframes shakeX{0%,to{transform:translate(0)}20%{transform:translate(-9px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(4px)}}@keyframes shine{0%{background-position:-200% center}to{background-position:200% center}}@keyframes starPop{0%{transform:scale(0) rotate(-30deg);opacity:0}60%{transform:scale(1.35) rotate(8deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}.page-footer{text-align:center;color:#b8c0e873;font-size:12.5px;padding:26px 0 30px}@media (max-width: 760px){.mode-grid,.steps,.podium{grid-template-columns:1fr}.nav{display:none}}