:root{--bg:#0b0e17;--panel:#171b2b;--line:#f5f7ff1a;--text:#f5f7ff;--muted:#8a93b2;--cyan:#35e0d0;--coral:#ff6b6b;--gold:#ffc857;--green:#5ce1a4;--safe-l:max(62px, env(safe-area-inset-left,0px));--safe-r:max(62px, env(safe-area-inset-right,0px));--safe-b:max(21px, env(safe-area-inset-bottom,0px));--top:40px;--kb:138px}*{box-sizing:border-box}.hidden{display:none!important}html,body{background:#05070d;height:100%;margin:0;overflow:hidden}body{color:var(--text);-webkit-font-smoothing:antialiased;overscroll-behavior:none;place-items:center;font-family:SF Pro Display,PingFang SC,Microsoft YaHei,system-ui,-apple-system,sans-serif;display:grid}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit}.app{width:100vw;height:100vh;max-width:956px;height:100dvh;max-height:440px;padding:0 var(--safe-r) var(--safe-b) var(--safe-l);background:linear-gradient(180deg, #080b1352, #080b13ad 58%, #05070ded), var(--app-bg,url(/images/backgrounds/bg-main-2868x1320.webp)) center / cover no-repeat;flex-direction:column;display:flex;position:relative;overflow:hidden}.app:before{content:"";pointer-events:none;opacity:.38;background-image:linear-gradient(#ffffff06 1px,#0000 1px),linear-gradient(90deg,#ffffff06 1px,#0000 1px);background-size:48px 48px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000c,#0000 72%);mask-image:linear-gradient(#000c,#0000 72%)}.app:after{content:"";pointer-events:none;background:radial-gradient(420px 220px at 78% 0,#35e0d01a,#0000 70%);position:absolute;inset:0}.topbar{flex:0 0 var(--top);height:var(--top);z-index:5;justify-content:space-between;align-items:center;gap:8px;display:flex;position:relative}.brand{flex:none;align-items:center;display:flex}.logo{object-fit:contain;width:112px;height:28px;display:block}.nav{border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#171b2b80;border-radius:999px;align-items:center;gap:2px;padding:3px;display:flex}.nav-link{color:var(--muted);white-space:nowrap;border-radius:999px;padding:5px 8px;font-size:8px;text-decoration:none}.nav-link.active{color:var(--text);background:#ffffff14}.top-actions{flex:none;align-items:center;gap:4px;display:flex}.daily{border:1px solid var(--line);height:25px;color:var(--muted);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#171b2b94;border-radius:8px;align-items:center;gap:4px;padding:0 8px;font-size:8px;text-decoration:none;display:flex}.daily b{color:var(--gold);font-weight:600}.icon-btn{border:1px solid var(--line);width:25px;height:25px;color:var(--muted);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#171b2b94;border-radius:8px;place-items:center;font-size:12px;text-decoration:none;display:grid}.view{z-index:2;flex:auto;min-height:0;position:relative}.home-view{flex-direction:column;gap:6px;height:100%;padding-top:5px;display:flex}.home-main{flex:1;grid-template-columns:minmax(260px,300px) 1fr;gap:10px;min-height:0;display:grid}.hero-card{border:1px solid var(--line);background:radial-gradient(220px 150px at 100% 0,#35e0d01a,#0000 70%),linear-gradient(160deg,#1c2235eb,#0d111cf0);border-radius:16px;gap:10px;min-width:0;padding:10px;display:flex;overflow:hidden;box-shadow:0 12px 30px #00000038,inset 0 1px #ffffff0d}.hero-cover{object-fit:cover;border:1px solid #ffffff1f;border-radius:12px;flex:none;width:98px;height:98px;box-shadow:0 6px 18px #0000004d}.hero-body{flex-direction:column;flex:1;min-width:0;display:flex}.eyebrow{letter-spacing:1.3px;color:var(--muted);text-transform:uppercase;margin:0;font-size:8px}.hero-card h1{letter-spacing:.2px;margin:3px 0 2px;font-size:24px;line-height:1.05}.hero-card .sub{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:9px;overflow:hidden}.chips{flex-wrap:wrap;gap:4px;margin:8px 0 6px;display:flex}.chip{color:#c9d0e4;border:1px solid var(--line);white-space:nowrap;background:#ffffff0d;border-radius:6px;padding:3px 5px;font-size:8px}.chip b{color:var(--text);font-weight:600}.primary{cursor:pointer;color:#06211f;background:linear-gradient(135deg,#67f3e4,#35e0d0);border:0;border-radius:10px;justify-content:space-between;align-items:center;height:36px;margin-top:auto;padding:0 11px;font-size:11.5px;font-weight:700;display:flex;box-shadow:0 6px 18px #35e0d038,inset 0 1px #ffffff73}.primary span{font-size:15px}.modes{min-width:0}.mode-grid{grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;gap:10px;height:100%;display:grid}.mode-card{text-align:left;cursor:pointer;border:1px solid var(--line);background:radial-gradient(200px 100px at 100% 0,#35e0d01a,#0000 66%),linear-gradient(160deg,#1e2438e6,#101420eb);border-radius:14px;padding:10px;transition:transform .15s,border-color .15s;position:relative;overflow:hidden}.mode-card.tone-coral{background:radial-gradient(200px 100px at 100% 0,#ff6b6b1f,#0000 66%),linear-gradient(160deg,#221e2ee6,#101420eb)}.mode-card.tone-gold{background:radial-gradient(200px 100px at 100% 0,#ffc8571a,#0000 66%),linear-gradient(160deg,#20222ee6,#101420eb)}.mode-card.tone-blue{background:radial-gradient(200px 100px at 100% 0,#5b8cff1f,#0000 66%),linear-gradient(160deg,#1a2034e6,#101420eb)}.mode-card:active{transform:scale(.985)}.mode-icon{width:28px;height:28px;color:var(--cyan);background:#35e0d017;border:1px solid #35e0d02e;border-radius:8px;place-items:center;margin-bottom:4px;font-size:14px;display:grid}.tone-coral .mode-icon{color:var(--coral);background:#ff6b6b17;border-color:#ff6b6b2e}.tone-gold .mode-icon{color:var(--gold);background:#ffc85717;border-color:#ffc8572e}.tone-blue .mode-icon{color:#7f9bff;background:#5b8cff1a;border-color:#5b8cff33}.mode-card h3{letter-spacing:.1px;margin:0;font-size:15px}.mode-card p{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;margin:2px 0 0;font-size:9.5px;overflow:hidden}.mode-badge{color:#06211f;background:var(--gold);border-radius:999px;padding:3px 5px;font-size:7.5px;font-weight:700;position:absolute;top:8px;right:8px}.tone-coral .mode-badge{background:var(--coral);color:#2a0707}.tone-gold .mode-badge{color:#c9d0e4;background:#ffffff24;font-weight:500}.tone-blue .mode-badge{color:#bfd0ff;background:#5b8cff38;font-weight:500}.keyboard-preview-wrap{flex:0 0 var(--kb);height:var(--kb);flex-direction:column;min-height:0;display:flex}.keyboard-meta{height:18px;color:var(--muted);flex:none;justify-content:space-between;align-items:center;padding:0 2px;font-size:8px;display:flex}.keyboard-hint{align-items:center;gap:5px;display:flex}.keyboard-hint b{color:var(--cyan);margin:0 1px;font-size:10px}.pulse-dot{background:var(--cyan);border-radius:50%;width:5px;height:5px;animation:1.8s infinite pulse;box-shadow:0 0 #35e0d080}@keyframes pulse{0%{box-shadow:0 0 #35e0d073}70%{box-shadow:0 0 0 7px #35e0d000}to{box-shadow:0 0 #35e0d000}}.keyboard-preview{background:linear-gradient(#181d2de0,#090c14f2);border:1px solid #ffffff14;border-radius:14px;flex:1;min-height:0;padding:3px 5px 5px;position:relative;box-shadow:0 -6px 28px #35e0d012,inset 0 1px #ffffff14}.white-row{gap:2px;display:flex;position:absolute;inset:3px 5px 5px}.white-key{background:linear-gradient(#fff 0%,#eef2fb 55%,#ced8ec 100%);border-radius:0 0 9px 9px;flex:1;justify-content:center;align-items:flex-end;padding-bottom:8px;display:flex;box-shadow:inset 0 1px #fff,inset 0 -5px 10px #7887aa38,0 4px 10px #00000047}.white-key .key-label{color:#65708c;font-size:9px;font-weight:600}.black-key{z-index:3;background:linear-gradient(#323a52 0%,#171d2c 55%,#090c14 100%);border:1px solid #ffffff0f;border-radius:0 0 7px 7px;justify-content:center;align-items:flex-end;width:6.2%;height:60%;padding-bottom:6px;display:flex;position:absolute;top:3px;box-shadow:inset 0 1px #ffffff24,0 6px 12px #00000080}.black-key .key-label{color:#9aa4c2;font-size:7.5px;font-weight:600}.piano-key{font:inherit;touch-action:none;cursor:pointer;-webkit-user-select:none;user-select:none;border:0;padding:0;transition:transform 60ms,filter 60ms,box-shadow .12s}.piano-key .key-label{pointer-events:none}.piano-key.pressed{filter:brightness(1.08);transform:translateY(3px)}.white-key.pressed{background:linear-gradient(#fff,#dffffb 55%,#a9f4ec);box-shadow:0 0 20px #35e0d08c,inset 0 1px #fff,inset 0 -5px 10px #35e0d040}.black-key.pressed{border-color:#35e0d099;box-shadow:0 0 18px #35e0d08c,inset 0 1px #fff3}.white-key.pressed .key-label{color:#0b5b57}.black-key.pressed .key-label{color:#d9fffb}.piano-key.target{outline-offset:-2px;outline:1.5px solid #35e0d0bf;box-shadow:0 0 18px #35e0d059}.piano-key.dimmed{opacity:.42}.piano-key.focused{opacity:1}.hide-labels .key-label{opacity:0}.keyboard-preview.disabled{opacity:.65;pointer-events:none}.placeholder-view{place-items:center;height:100%;padding:8px;display:grid}.placeholder-card{border:1px solid var(--line);text-align:center;background:radial-gradient(280px 140px at 50% 0,#35e0d01a,#0000 70%),linear-gradient(#181e30f0,#0c101af5);border-radius:18px;width:min(520px,88%);padding:24px;box-shadow:0 20px 60px #00000059,inset 0 1px #ffffff0f}.placeholder-card h1{margin:5px 0 6px;font-size:26px}.placeholder-copy{max-width:380px;color:var(--muted);margin:0 auto 14px;font-size:10px;line-height:1.6}.phase-pill{letter-spacing:.8px;color:var(--cyan);background:#35e0d014;border:1px solid #35e0d040;border-radius:999px;padding:4px 8px;font-size:8px;display:inline-block}.btn{cursor:pointer;border:0;border-radius:10px;height:34px;padding:0 14px;font-size:10px;font-weight:600}.btn-primary{color:#06211f;background:linear-gradient(135deg,#67f3e4,#35e0d0)}.btn-ghost{border:1px solid var(--line);color:var(--text);background:#ffffff0f}.btn-danger{background:var(--coral);color:#2a0707}.settings-view{flex-direction:column;gap:4px;height:100%;min-height:0;display:flex}.view-head{flex:none;align-items:center;gap:8px;padding-top:4px;display:flex}.back-btn{border:1px solid var(--line);width:28px;height:28px;color:var(--muted);cursor:pointer;background:#171b2bb3;border-radius:8px;flex:none;font-size:13px}.view-titlebox h1{margin:2px 0 0;font-size:20px}.settings-scroll{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;flex:1;min-height:0;padding-right:2px;overflow-y:auto}.settings-scroll::-webkit-scrollbar{width:4px}.settings-scroll::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:999px}.settings-section{border:1px solid var(--line);background:linear-gradient(160deg,#1c2235c7,#0d111ce6);border-radius:14px;margin-bottom:8px;padding:10px 12px}.settings-section-title{color:var(--cyan);letter-spacing:1px;margin:0 0 5px;font-size:10px;font-weight:600}.setting-row{border-top:1px solid #ffffff0d;grid-template-columns:1fr auto;align-items:center;gap:4px 8px;padding:5px 0;display:grid}.settings-section .setting-row:first-of-type{border-top:0}.setting-label{color:var(--text);font-size:9.5px}.setting-value{color:var(--muted);font-variant-numeric:tabular-nums;font-size:9px}.range-input{width:100%;height:14px;accent-color:var(--cyan);cursor:pointer;grid-column:1/-1}.choice-group{gap:3px;display:flex}.choice-btn{border:1px solid var(--line);color:var(--muted);cursor:pointer;background:#ffffff0a;border-radius:6px;padding:4px 7px;font-size:8px}.choice-btn.active{color:var(--cyan);background:#35e0d01f;border-color:#35e0d066}.toggle-text{flex-direction:column;gap:1px;display:flex}.setting-help{color:var(--muted);font-size:7.5px}.switch{border:1px solid var(--line);cursor:pointer;background:#ffffff14;border-radius:999px;width:32px;height:18px;position:relative}.switch:after{content:"";background:#b4bdd3;border-radius:50%;width:12px;height:12px;transition:transform .15s,background .15s;position:absolute;top:2px;left:2px}.switch.on{background:#35e0d040;border-color:#35e0d066}.switch.on:after{background:var(--cyan);transform:translate(14px)}.setting-note{color:var(--muted);margin:5px 0 0;font-size:7.5px;line-height:1.5}.data-btn{text-align:left;border:1px solid var(--line);width:100%;color:var(--text);cursor:pointer;background:#ffffff0a;border-radius:8px;margin-top:5px;padding:8px 9px;font-size:9px}.data-btn.danger{color:#ffb3b3;border-color:#ff6b6b33}.toast{z-index:30;left:50%;top:calc(var(--top) + 6px);opacity:0;pointer-events:none;color:var(--text);letter-spacing:.4px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap;background:#0b0e17e6;border:1px solid #35e0d04d;border-radius:999px;padding:5px 9px;font-size:9px;transition:all .2s;position:absolute;transform:translate(-50%,-6px);box-shadow:0 6px 20px #00000059}.toast.show{opacity:1;transform:translate(-50%)}.toast[data-tone=error]{color:#ffb3b3;border-color:#ff6b6b73}.toast[data-tone=success]{color:var(--green);border-color:#5ce1a466}.modal-backdrop{z-index:40;background:#0000009e;place-items:center;padding:20px;display:grid;position:absolute;inset:0}.modal-panel{border:1px solid var(--line);background:linear-gradient(#1c2235fa,#0d111cfc);border-radius:16px;width:min(400px,90%);padding:18px;box-shadow:0 24px 70px #00000080}.modal-title{margin:0 0 6px;font-size:16px}.modal-message{color:var(--muted);margin:0;font-size:10px;line-height:1.6}.modal-actions{justify-content:flex-end;gap:8px;margin-top:16px;display:flex}.boot-error{text-align:center;background:var(--bg);min-height:100dvh;color:var(--text);place-content:center;gap:8px;font-family:inherit;display:grid}.boot-error h1{margin:0;font-size:24px}.boot-error p{color:var(--muted);margin:0;font-size:12px}.boot-error button{background:var(--cyan);color:#06211f;cursor:pointer;border:0;border-radius:10px;margin:8px auto 0;padding:8px 14px;font-weight:700}@media (max-height:420px){:root{--top:36px;--kb:128px}.home-main{grid-template-columns:minmax(250px,286px) 1fr;gap:8px}.hero-card{gap:8px;padding:8px}.hero-cover{width:84px;height:84px}.hero-card h1{font-size:21px}.chips{margin:5px 0 4px}.primary{height:32px;font-size:10.5px}.mode-grid{gap:8px}.mode-card{padding:8px}.mode-icon{width:24px;height:24px;margin-bottom:2px;font-size:12px}.mode-card h3{font-size:14px}.mode-card p{font-size:9px}.placeholder-card{padding:18px}.placeholder-card h1{font-size:22px}}@media (max-height:380px){:root{--top:30px;--kb:112px}.home-main{grid-template-columns:minmax(228px,260px) 1fr;gap:7px}.hero-card{gap:7px;padding:7px}.hero-cover{width:64px;height:64px}.hero-card .eyebrow,.hero-card .sub,.chips{display:none}.hero-card h1{margin:2px 0;font-size:19px}.primary{height:30px;font-size:10px}.mode-grid{gap:7px}.mode-card{padding:7px}.mode-icon{width:20px;height:20px;margin-bottom:1px;font-size:10px}.mode-card h3{font-size:13px}.mode-card p,.mode-badge{display:none}.settings-section{padding:8px 10px}}@media (max-height:340px){:root{--top:28px;--kb:100px}.hero-cover{width:52px;height:52px}.hero-card h1{font-size:17px}.primary{height:28px}.mode-icon{width:18px;height:18px}.mode-card h3{font-size:12px}}@media (orientation:portrait){.app{display:none}body:after{content:"请横屏游玩";z-index:100;color:var(--text);letter-spacing:1px;background:radial-gradient(260px 180px at 50% 42%,#35e0d01a,#0000 70%),#080b14;place-items:center;font-size:18px;display:grid;position:fixed;inset:0}}html[data-reduced-motion=true] *,html[data-reduced-motion=true] :before,html[data-reduced-motion=true] :after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.songbook-view{flex-direction:column;gap:5px;height:100%;min-height:0;display:flex}.view-summary{color:var(--muted);margin-left:auto;padding-top:16px;font-size:8px}.category-tabs{border:1px solid var(--line);background:#171b2b7a;border-radius:999px;flex:none;gap:4px;width:-moz-fit-content;width:fit-content;padding:2px;display:flex}.category-tab{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:4px 8px;font-size:8px}.category-tab.active{color:var(--cyan);background:#35e0d024}.song-grid{flex:1;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;align-content:start;gap:8px;min-height:0;padding-bottom:2px;display:grid;overflow-y:auto}.song-card{text-align:left;border:1px solid var(--line);cursor:pointer;background:radial-gradient(160px 90px at 100% 0,#35e0d014,#0000 70%),linear-gradient(160deg,#1c2235d6,#0d111ceb);border-radius:12px;align-items:center;gap:9px;min-height:0;padding:8px;display:flex;overflow:hidden}.song-card:active{transform:scale(.99)}.song-cover{object-fit:cover;border:1px solid #ffffff1a;border-radius:9px;flex:none;width:76px;height:76px}.song-card-body{flex-direction:column;gap:3px;min-width:0;display:flex}.song-card-top{align-items:center;gap:5px;display:flex}.song-title{white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:600;overflow:hidden}.song-grade{color:var(--gold);margin-left:auto;font-size:11px;font-weight:700}.song-meta,.song-best{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:7.5px;overflow:hidden}.song-stars{letter-spacing:1px;color:var(--gold);font-size:8px}.song-best{color:#9aa8c7}.empty-copy{text-align:center;color:var(--muted);grid-column:1/-1;margin:20px 0;font-size:9px}.song-detail-view{flex-direction:column;gap:5px;height:100%;display:flex}.song-detail-card{border:1px solid var(--line);background:radial-gradient(420px 220px at 80% 0,#35e0d01a,#0000 70%),linear-gradient(160deg,#1c2235e6,#0d111cf0);border-radius:16px;flex:1;align-items:center;gap:18px;min-height:0;padding:16px;display:flex}.song-detail-cover{object-fit:cover;border:1px solid #ffffff1f;border-radius:14px;flex:none;width:160px;height:160px;box-shadow:0 10px 30px #00000059}.song-detail-info{flex-direction:column;align-self:stretch;min-width:0;display:flex}.song-detail-info h1{margin:3px 0 2px;font-size:28px}.song-detail-sub,.song-detail-keys,.song-detail-stars,.song-detail-best{color:var(--muted);margin:0;font-size:9px}.song-detail-keys{color:#b9c4dc;margin-top:5px}.song-detail-stars{letter-spacing:1px;color:var(--gold);margin-top:5px;font-size:11px}.song-detail-best{margin-top:10px;font-size:9px}.song-detail-best b{color:var(--gold);font-size:12px}.song-detail-actions{gap:7px;margin-top:auto;display:flex}.song-detail-actions .btn{min-width:88px}@media (max-height:420px){.song-cover{width:62px;height:62px}.song-card{gap:6px;padding:6px}.song-title{font-size:11px}.song-detail-cover{width:130px;height:130px}.song-detail-info h1{font-size:24px}}@media (max-height:380px){.songbook-view{gap:3px}.song-grid{gap:5px}.song-cover{width:48px;height:48px}.song-card{gap:5px;padding:5px}.song-card-body{gap:1px}.song-title{font-size:10px}.song-meta,.song-best{font-size:6.5px}.song-stars{font-size:7px}.song-detail-cover{width:100px;height:100px}.song-detail-card{gap:10px;padding:10px}.song-detail-info h1{font-size:20px}.song-detail-sub,.song-detail-keys,.song-detail-best{font-size:7.5px}}.play-view{flex-direction:column;gap:5px;height:100%;padding-top:4px;display:flex}.play-hud{flex:0 0 32px;align-items:center;gap:7px;min-width:0;display:flex}.play-title{align-items:baseline;gap:4px;min-width:0;display:flex}.play-title strong{white-space:nowrap;font-size:12.5px;font-weight:600}.play-title span{color:var(--muted);white-space:nowrap;font-size:8.5px}.play-progress{background:#ffffff14;border-radius:999px;flex:1;min-width:20px;height:4px;overflow:hidden}.play-progress i{background:linear-gradient(90deg, var(--cyan), #8ff9ef);border-radius:999px;width:0;height:100%;transition:width .1s linear;display:block}.play-score{text-align:right;flex:none;line-height:1}.play-score b{font-variant-numeric:tabular-nums;font-size:16px;display:block}.play-score span{letter-spacing:1px;color:var(--muted);font-size:7.5px}.pause-btn{border:1px solid var(--line);width:26px;height:26px;color:var(--muted);cursor:pointer;background:#171b2bb3;border-radius:8px;flex:none;font-size:10px}.game-field{border:1px solid var(--line);background:radial-gradient(420px 200px at 50% 0,#35e0d014,#0000 70%),linear-gradient(#0d121fc7,#080b12eb);border-radius:14px;flex:1;min-height:0;position:relative;overflow:hidden}.game-lanes{position:absolute;inset:0}.game-lane{border-left:1px solid #ffffff09;position:absolute;top:0;bottom:0}.game-lane:first-child{border-left:0}.game-notes{position:absolute;inset:0}.game-note{color:#06211f;will-change:top;background:linear-gradient(#8ffff3,#35e0d0);border:1px solid #ffffff42;border-radius:9px;justify-content:center;align-items:center;width:30px;height:58px;font-size:10px;font-weight:700;display:flex;position:absolute;transform:translate(-50%);box-shadow:0 0 16px #35e0d059,inset 0 1px #ffffff8c}.game-note.black{color:#2a0707;background:linear-gradient(#ffa3a3,#ff5a6e);box-shadow:0 0 16px #ff6b6b4d,inset 0 1px #ffffff73}.game-note.chord{color:#2b1a02;background:linear-gradient(#ffe39a,#ffc857);width:34px}.game-note.hit{opacity:0;transition:opacity .12s,transform .12s;transform:translate(-50%)scale(1.35)}.game-note.missed{opacity:.25}.judgment-line{background:linear-gradient(90deg,#0000,#35e0d0e6,#0000);border-radius:999px;height:4px;position:absolute;bottom:14px;left:12px;right:12px;box-shadow:0 0 14px #35e0d08c}.judgment-text{letter-spacing:2px;white-space:nowrap;opacity:0;color:var(--cyan);text-shadow:0 0 16px #35e0d08c;font-size:24px;font-style:italic;font-weight:800;transition:all .12s;position:absolute;bottom:24px;left:50%;transform:translate(-50%,6px)}.judgment-text.show{opacity:1;transform:translate(-50%)}.judgment-great{color:var(--gold);text-shadow:0 0 16px #ffc85773}.judgment-good{color:var(--text)}.judgment-miss{color:var(--coral);text-shadow:0 0 16px #ff6b6b73}.combo-badge{align-items:flex-end;gap:4px;display:flex;position:absolute;bottom:38px;left:12px}.combo-badge span:first-child{margin-bottom:1px;font-size:14px}.combo-badge b{color:var(--gold);text-shadow:0 0 14px #ffc85740;font-size:26px;font-weight:800;line-height:.9}.combo-badge span:last-child{letter-spacing:1.5px;color:var(--muted);margin-bottom:2px;font-size:7px}.countdown{color:var(--gold);opacity:0;pointer-events:none;text-shadow:0 0 30px #ffc85759;place-items:center;font-size:64px;font-weight:800;transition:opacity .15s;display:grid;position:absolute;inset:0}.countdown.show{opacity:1}.pause-overlay{z-index:10;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#04070eb8;place-items:center;display:grid;position:absolute;inset:0}.pause-card{border:1px solid var(--line);text-align:center;background:linear-gradient(#1c2235fa,#0d111cfc);border-radius:14px;flex-direction:column;gap:7px;width:170px;padding:16px;display:flex}.pause-card h2{margin:0 0 4px;font-size:15px}.play-keyboard{flex:0 0 var(--kb);height:var(--kb);flex-direction:column;min-height:0;display:flex}.play-keyboard .keyboard-preview{flex:1}@media (max-height:380px){.game-note{width:25px;height:46px;font-size:8.5px}.judgment-text{letter-spacing:1.5px;font-size:19px;bottom:20px}.combo-badge{bottom:32px}.combo-badge b{font-size:21px}}.result-view{place-items:center;height:100%;padding:4px;display:grid}.result-panel{border:1px solid var(--line);background:radial-gradient(360px 200px at 50% 0,#35e0d01a,#0000 70%),linear-gradient(#181e30f2,#0c101af7);border-radius:18px;width:min(720px,92%);padding:14px 18px;box-shadow:0 22px 70px #0006,inset 0 1px #ffffff0f}.result-head{border-bottom:1px solid #ffffff0f;align-items:center;gap:10px;padding-bottom:8px;display:flex}.result-cover{object-fit:cover;border:1px solid #ffffff1a;border-radius:9px;width:44px;height:44px}.result-head-text h1{margin:1px 0 0;font-size:17px}.result-meta{color:var(--muted);margin:2px 0 0;font-size:8px}.record-badge{color:#06211f;background:var(--gold);border-radius:999px;margin-left:auto;padding:3px 7px;font-size:8px;font-weight:700}.result-score-row{align-items:center;gap:18px;padding:9px 0 7px;display:flex}.result-grade{text-shadow:0 0 18px;border:2px solid #fff3;border-radius:50%;flex:none;place-items:center;width:74px;height:74px;font-size:44px;font-weight:800;line-height:1;display:grid}.grade-S{color:var(--gold);background:radial-gradient(circle,#ffc8572e,#0000 70%);border-color:#ffc8578c}.grade-A{color:var(--cyan);background:radial-gradient(circle,#35e0d024,#0000 70%);border-color:#35e0d080}.grade-B{color:#7f9bff;border-color:#7f9bff73}.grade-C{color:#b4bdd3;border-color:#b4bdd359}.grade-D{color:var(--coral);border-color:#ff6b6b73}.result-score{flex-direction:column;gap:1px;display:flex}.result-score-label{letter-spacing:1.5px;color:var(--muted);font-size:8px}.result-score b{font-variant-numeric:tabular-nums;font-size:30px;line-height:1}.result-stats{border-top:1px solid #ffffff0f;grid-template-columns:repeat(4,1fr);gap:5px;padding-top:8px;display:grid}.result-stat{color:var(--muted);background:#ffffff09;border-radius:6px;justify-content:space-between;align-items:baseline;gap:4px;padding:4px 6px;font-size:7.5px;display:flex}.result-stat b{color:var(--text);font-variant-numeric:tabular-nums;font-size:9px}.result-actions{justify-content:flex-end;gap:6px;margin-top:10px;display:flex}.result-actions .btn{height:30px;padding:0 11px;font-size:9px}@media (max-height:380px){.result-panel{padding:9px 12px}.result-grade{width:58px;height:58px;font-size:34px}.result-score b{font-size:24px}.result-stats{grid-template-columns:repeat(4,1fr);gap:4px;padding-top:5px}.result-stat{padding:3px 5px}.result-actions{margin-top:6px}.result-actions .btn{height:26px}}.follow-view{flex-direction:column;gap:5px;height:100%;padding-top:4px;display:flex}.follow-phrase-label{color:var(--muted);white-space:nowrap;margin-left:auto;font-size:8px}.follow-stage{border:1px solid var(--line);background:radial-gradient(420px 220px at 50% 0,#35e0d014,#0000 70%),linear-gradient(#0d121fc7,#080b12eb);border-radius:14px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:10px;min-height:0;display:flex;position:relative;overflow:hidden}.follow-banner{letter-spacing:1px;color:var(--text);text-align:center;font-size:22px;font-weight:700}.follow-banner.listen{color:var(--cyan);text-shadow:0 0 20px #35e0d04d}.follow-banner.turn{color:var(--gold);text-shadow:0 0 20px #ffc8574d}.follow-target{flex-direction:column;align-items:center;gap:3px;display:flex}.follow-target-note{color:var(--cyan);text-shadow:0 0 24px #35e0d059;font-size:52px;font-weight:800;line-height:1}.follow-target-hint{color:var(--muted);letter-spacing:.5px;font-size:8px}.follow-feedback{letter-spacing:1px;color:#0000;min-height:14px;font-size:10px}.follow-feedback.good{color:var(--green)}.follow-feedback.bad{color:var(--coral)}.follow-dots{gap:4px;display:flex;position:absolute;bottom:10px;left:50%;transform:translate(-50%)}.follow-dot{background:#ffffff2e;border-radius:50%;width:5px;height:5px}.follow-dot.done{background:var(--cyan)}.follow-dot.current{background:var(--gold);box-shadow:0 0 8px #ffc85780}.follow-stage .countdown{color:var(--gold);opacity:0;pointer-events:none;place-items:center;font-size:54px;font-weight:800;transition:opacity .15s;display:grid;position:absolute;inset:0}.follow-stage .countdown.show{opacity:1}@media (max-height:380px){.follow-banner{font-size:18px}.follow-target-note{font-size:40px}.follow-stage{gap:6px}}.prompt-input{border:1px solid var(--line);width:100%;color:var(--text);background:#ffffff0d;border-radius:8px;outline:none;margin-top:10px;padding:8px 9px;font-size:11px}.prompt-input:focus{border-color:#35e0d073}.btn:disabled{opacity:.45;cursor:not-allowed}.free-view{flex-direction:column;gap:5px;height:100%;padding-top:4px;display:flex}.free-hud{flex:0 0 32px;align-items:center;gap:7px;min-width:0;display:flex}.timbre-switch{border:1px solid var(--line);background:#171b2b8c;border-radius:7px;gap:2px;margin-left:auto;padding:2px;display:flex}.timbre-btn{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:5px;padding:3px 5px;font-size:7.5px}.timbre-btn.active{color:var(--cyan);background:#35e0d026}.metronome-btn,.record-btn{border:1px solid var(--line);color:var(--muted);cursor:pointer;white-space:nowrap;background:#171b2b8c;border-radius:7px;padding:5px 7px;font-size:8px}.metronome-btn.on{color:var(--cyan);border-color:#35e0d059}.record-btn{color:#ffb3b3;border-color:#ff6b6b40}.record-btn.recording{color:var(--coral);background:#ff6b6b24;border-color:#ff6b6b73}.free-stage{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:6px;min-height:0;display:flex;position:relative}.chord-panel{background:radial-gradient(300px 130px at 50% 0,#35e0d01f,#0000 70%),linear-gradient(#181e30f0,#0c101af5);border:1px solid #ffffff1a;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;width:min(420px,86%);min-height:116px;padding:14px;display:flex;box-shadow:0 16px 50px #00000059,inset 0 1px #ffffff0f}.chord-tag{letter-spacing:1.5px;color:var(--muted);margin-bottom:3px;font-size:7px}.chord-en{letter-spacing:.5px;font-size:30px;font-weight:700;line-height:1}.chord-cn{color:var(--cyan);margin-top:4px;font-size:11px}.chord-notes{gap:4px;min-height:17px;margin-top:8px;display:flex}.chord-notes span{color:#c9d0e4;border:1px solid var(--line);background:#ffffff0d;border-radius:5px;padding:3px 5px;font-size:7.5px}.record-status{color:var(--coral);opacity:0;letter-spacing:.4px;font-size:8px}.record-status.visible{opacity:1}@media (max-height:380px){.chord-panel{min-height:88px;padding:8px}.chord-en{font-size:22px}.chord-cn{margin-top:2px;font-size:9px}.chord-notes{margin-top:4px}.free-hud{gap:4px}.timbre-btn{padding:2px 4px;font-size:6.5px}.metronome-btn,.record-btn{padding:4px 5px;font-size:7px}}.records-view{flex-direction:column;gap:4px;height:100%;min-height:0;display:flex}.records-progress{flex:none;align-items:center;gap:6px;height:16px;display:flex}.records-progress i{background:linear-gradient(90deg, var(--cyan), #8ff9ef);border-radius:999px;flex:1;width:0;height:3px;display:block}.records-progress span{color:var(--muted);font-variant-numeric:tabular-nums;font-size:7px}.record-list{flex-direction:column;flex:1;gap:5px;min-height:0;padding-right:2px;display:flex;overflow-y:auto}.record-card{border:1px solid var(--line);background:linear-gradient(160deg,#1c2235d1,#0d111ce6);border-radius:10px;align-items:center;gap:8px;padding:7px;display:flex}.record-card.playing{background:linear-gradient(160deg,#1c2d38d6,#0d111ce6);border-color:#35e0d059}.record-play{width:30px;height:30px;color:var(--cyan);cursor:pointer;background:#35e0d01a;border:1px solid #35e0d04d;border-radius:50%;flex:none;font-size:10px}.record-body{flex:1;min-width:0}.record-top{align-items:center;gap:5px;display:flex}.record-top strong{white-space:nowrap;text-overflow:ellipsis;font-size:10px;overflow:hidden}.record-source{color:var(--muted);border:1px solid var(--line);border-radius:999px;flex:none;margin-left:auto;padding:2px 5px;font-size:7px}.record-meta{color:var(--muted);margin:3px 0 0;font-size:7px}.record-actions{gap:3px;margin-top:3px;display:flex}.record-action{color:var(--muted);cursor:pointer;background:0 0;border:0;padding:1px 0;font-size:7px}.record-action.danger{color:#ff9c9c}.records-empty{text-align:center;color:var(--muted);flex-direction:column;align-items:center;gap:5px;margin:auto;display:flex}.records-empty h2{color:var(--text);margin:0;font-size:18px}.records-empty p{margin:0;font-size:8px}.records-keyboard{flex:0 0 var(--kb);height:var(--kb);flex-direction:column;min-height:0;display:flex}.records-keyboard .keyboard-preview{flex:1}@media (max-height:380px){.record-card{padding:5px}.record-play{width:26px;height:26px}}.achievements-view{flex-direction:column;gap:5px;height:100%;min-height:0;display:flex}.achievement-grid{flex:1;grid-template-rows:1fr 1fr;grid-template-columns:repeat(5,1fr);gap:7px;min-height:0;display:grid}.achievement-card{border:1px solid var(--line);background:linear-gradient(160deg,#1c2235d1,#0d111ce6);border-radius:10px;flex-direction:column;min-width:0;padding:7px;display:flex;position:relative;overflow:hidden}.achievement-card.locked{opacity:.62}.achievement-card.unlocked{background:radial-gradient(120px 80px at 50% 0,#ffc8571a,#0000 70%),linear-gradient(160deg,#20222ee0,#0d111ce6);border-color:#ffc85740}.achievement-icon{margin-bottom:4px;font-size:21px;line-height:1}.achievement-body{flex-direction:column;gap:2px;min-width:0;display:flex}.achievement-category{color:var(--cyan);letter-spacing:.8px;font-size:6px}.achievement-body h2{margin:0;font-size:9px;font-weight:600}.achievement-body p{color:var(--muted);margin:0;font-size:6.5px;line-height:1.35}.achievement-progress{background:#ffffff14;border-radius:999px;height:3px;margin-top:3px;overflow:hidden}.achievement-progress i{background:var(--cyan);border-radius:999px;height:100%;display:block}.achievement-count,.achievement-date{color:var(--muted);font-size:6px}.achievement-date{color:var(--gold)}@media (max-height:380px){.achievement-grid{gap:5px}.achievement-card{padding:5px}.achievement-icon{margin-bottom:2px;font-size:17px}.achievement-body h2{font-size:8px}.achievement-body p{font-size:6px}}.daily-view{flex-direction:column;gap:5px;height:100%;display:flex}.daily-streak{color:var(--gold);margin-left:auto;padding-top:17px;font-size:9px}.daily-card{border:1px solid var(--line);background:radial-gradient(420px 220px at 70% 0,#ffc8571a,#0000 70%),linear-gradient(160deg,#1c2235e6,#0d111cf0);border-radius:16px;flex:1;align-items:center;gap:18px;min-height:0;padding:16px;display:flex}.daily-cover{object-fit:cover;border:1px solid #ffffff1f;border-radius:14px;flex:none;width:150px;height:150px}.daily-info{flex-direction:column;align-self:stretch;min-width:0;display:flex}.daily-info h2{margin:3px 0 2px;font-size:27px}.daily-meta,.daily-best,.daily-hint{color:var(--muted);margin:0;font-size:9px}.daily-best{color:var(--gold);margin-top:8px;font-size:10px}.daily-hint{margin-top:4px;font-size:8px}.daily-info .btn{width:100px;margin-top:auto}.daily-calendar{flex-direction:column;align-self:flex-end;gap:4px;margin-left:auto;display:flex}.daily-day{color:var(--muted);border:1px solid var(--line);text-align:center;border-radius:5px;padding:3px 6px;font-size:7px}.daily-day.today{color:var(--gold);background:#ffc85714;border-color:#ffc85766}@media (max-height:380px){.daily-card{gap:10px;padding:10px}.daily-cover{width:100px;height:100px}.daily-info h2{font-size:21px}.daily-calendar{display:none}}.levels-view{flex-direction:column;gap:5px;height:100%;min-height:0;display:flex}.chapter-tabs{flex:none;gap:4px;padding-bottom:1px;display:flex;overflow-x:auto}.chapter-tab{border:1px solid var(--line);color:var(--muted);cursor:pointer;white-space:nowrap;background:#171b2b8c;border-radius:999px;padding:4px 8px;font-size:8px}.chapter-tab.active{color:var(--cyan);background:#35e0d01a;border-color:#35e0d059}.chapter-tab.locked{opacity:.5}.levels-body{flex:1;min-height:0;padding-right:2px;overflow-y:auto}.chapter-head{align-items:baseline;gap:8px;margin-bottom:5px;display:flex}.chapter-head h2{margin:0;font-size:17px}.chapter-head p{color:var(--muted);margin:0;font-size:8px}.level-grid{grid-template-columns:repeat(3,1fr);gap:7px;display:grid}.level-card{border:1px solid var(--line);text-align:left;cursor:pointer;background:linear-gradient(160deg,#1c2235d6,#0d111ceb);border-radius:10px;min-height:66px;padding:8px;position:relative;overflow:hidden}.level-card.cleared{border-color:#ffc8573d}.level-card.locked{opacity:.45}.level-id{color:var(--cyan);letter-spacing:.8px;font-size:7px}.level-card h3{margin:2px 0;font-size:11px}.level-card p{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:7px;overflow:hidden}.level-stars{color:#ffffff26;gap:1px;margin-top:3px;font-size:9px;display:flex}.level-stars .star.on{color:var(--gold)}.level-mode{color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 4px;font-size:6px;position:absolute;top:7px;right:7px}@media (max-height:380px){.level-grid{grid-template-columns:repeat(4,1fr);gap:5px}.level-card{min-height:58px;padding:6px}.level-card p{display:none}}.share-view{flex-direction:column;gap:4px;height:100%;display:flex}.share-body{flex:1;justify-content:center;align-items:center;gap:16px;min-height:0;display:flex}.share-canvas{background:var(--panel);border-radius:12px;width:auto;max-width:46%;height:min(300px,82%);box-shadow:0 18px 50px #00000073}.share-controls{flex-direction:column;gap:7px;display:flex}.share-controls .btn{width:110px}@media (max-height:380px){.share-canvas{height:min(250px,84%)}.share-controls .btn{height:28px;font-size:8px}}