.fb-wrap{width:100%;padding:0 6px}.fb{padding-left:30px;position:relative}.fb-nums{margin-bottom:3px;display:flex}.fb-num{text-align:center;color:var(--text-3);font-variant-numeric:tabular-nums;flex-basis:0;font-size:9px;font-weight:600}.fb-board{box-shadow:inset 0 2px 8px #0006, var(--shadow);background:linear-gradient(#3b2a20,#2c1f18);border-radius:8px;padding:13px 0 6px;position:relative;overflow:hidden}.fb-cells{display:flex;position:absolute;inset:0}.fb-cell{border-right:2px solid #d8dee98c;flex-basis:0;position:relative}.fb-cell:last-child{border-right:none}.nut-cell{background:#00000038;border-right:4px solid #e8ecf2}.marker{background:#ffffff42;border-radius:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;position:absolute;top:50%;left:50%}.marker.double.up{top:28%}.marker.double.down{top:72%}.fb-string-row{align-items:center;height:34px;display:flex;position:relative}.fb-string-line{pointer-events:none;background:linear-gradient(#f2f5f9,#9aa5b4 45%,#6b7686);border-radius:2px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);box-shadow:0 1px 2px #00000073}.fb-frets{width:100%;height:100%;display:flex;position:relative}.fb-dot{cursor:pointer;background:0 0;border:none;flex-basis:0;justify-content:center;align-items:center;min-width:0;padding:4px 2px;display:flex;position:relative}.fb-dot.target{z-index:3}.hit{pointer-events:none;border-radius:50%;justify-content:center;align-items:center;width:25px;height:25px;display:flex;position:relative}.fb-dot.done .hit{background:#17a67352;box-shadow:inset 0 0 0 1px #17a6738c}.fb-dot.open .hit{background:0 0;box-shadow:inset 0 0 0 2px #ffffff73}.fb-dot.open .hit:before{content:"○";color:#ffffffb3;font-size:12px;font-weight:700}.fb-dot.open.done .hit{background:#17a67352;box-shadow:inset 0 0 0 2px #17a673b3}.fb-dot.open.done .hit:before{content:"●";color:#fff}.fb-dot.start .hit{background:var(--blue-600);pointer-events:none;width:30px;height:30px;animation:1.1s ease-in-out infinite startPulse;box-shadow:0 0 0 3px #ffffffeb,0 0 18px #6366f1d9}.fb-dot.start.done .hit{background:#17a67352;width:25px;height:25px;animation:none;box-shadow:inset 0 0 0 2px #17a673b3}@keyframes startPulse{0%,to{transform:scale(1);box-shadow:0 0 0 3px #ffffffeb,0 0 18px #6366f1d9}50%{transform:scale(1.08);box-shadow:0 0 0 4px #fffffff2,0 0 26px #6366f1}}.lbl{color:#ffffff9e;letter-spacing:-.02em;font-size:10px;font-style:normal;font-weight:700}.fb-dot.target .hit{background:var(--blue-600);box-shadow:0 0 0 2px #ffffffd9,0 0 14px #3f6ff0e6}.fb-dot.target .lbl{color:#fff}.ring{border:2px solid var(--blue-300);border-radius:50%;animation:1.15s ease-out infinite ringPulse;position:absolute;inset:-5px}@keyframes ringPulse{0%{opacity:.9;transform:scale(.85)}to{opacity:0;transform:scale(1.5)}}.fb-dot.wrong .hit{background:var(--danger);animation:.42s ease-out wrongFlash}.fb-dot.wrong .lbl{color:#fff}@keyframes wrongFlash{0%,to{transform:scale(1)}25%{transform:scale(1.32)}60%{transform:scale(.94)}}.arrow-cue{border-left:6px solid #0000;border-right:6px solid #0000;border-top:8px solid var(--blue-300);filter:drop-shadow(0 1px 3px #00000080);pointer-events:none;width:0;height:0;margin-left:-6px;animation:.5s ease-in-out infinite arrowBounce;position:absolute;bottom:calc(100% + 3px);left:50%}@keyframes arrowBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.fb-dot.target.blink .hit{animation:.42s ease-in-out 2 targetBlink}@keyframes targetBlink{0%,to{box-shadow:0 0 0 2px #ffffffd9,0 0 14px #3f6ff0e6}50%{box-shadow:0 0 0 5px #fffffff2,0 0 26px #3f6ff0}}.fb-strings-label{flex-direction:column;justify-content:flex-start;width:28px;padding:13px 0 6px;display:flex;position:absolute;top:16px;bottom:0;left:0}.fb-slabel{flex-direction:column;justify-content:center;align-items:center;height:34px;line-height:1.1;display:flex}.fb-slabel b{color:var(--blue-700);font-size:13px;font-weight:750}.fb-slabel span{color:var(--text-3);font-size:9px}.rotate-tip{z-index:2147483000;background:var(--bg);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:30px;display:flex;position:fixed;inset:0}.phone-icon{color:var(--blue-600);margin-bottom:14px;position:relative}.phone-icon>svg:first-child{width:66px;height:66px;animation:2s ease-in-out infinite tilt}@keyframes tilt{0%,55%,to{transform:rotate(0)}75%,90%{transform:rotate(-90deg)}}.phone-icon .arrow{width:24px;height:24px;color:var(--blue-400);position:absolute;top:6px;right:-26px}.rotate-tip h3{margin:0;font-size:18px;font-weight:700}.rotate-tip p{color:var(--text-3);max-width:260px;margin:0 0 18px;font-size:13px;line-height:1.6}.natural-landscape{z-index:2147483000;background:var(--bg);width:100dvw;height:100dvh;position:fixed;inset:0;overflow:hidden}.fullscreen-button{right:max(10px, env(safe-area-inset-right,0px));bottom:max(10px, env(safe-area-inset-bottom,0px));z-index:95;color:#fff;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#1a1d24b8;border-radius:999px;padding:7px 11px;font-size:11px;font-weight:700;position:fixed}.force-landscape{z-index:2147483000;background:var(--bg);transform-origin:0 0;width:100vh;height:100vw;position:fixed;top:0;left:100%;overflow:auto;transform:rotate(90deg)}.game{flex-direction:column;gap:7px;min-height:100%;padding:8px 10px 12px;display:flex;position:relative}.game-hud{justify-content:space-between;align-items:center;gap:10px;display:flex}.hud-quit,.hud-toggle{flex:none;padding:5px 9px;font-size:12px}.hud-toggle{border:1px solid var(--border);color:var(--text-3)}.hud-toggle.on{background:var(--blue-50);border-color:var(--blue-300);color:var(--blue-700)}.hud-stats{color:var(--text-3);font-variant-numeric:tabular-nums;gap:14px;font-size:12px;display:flex}.hud-stats b{color:var(--blue-700);font-size:14px;font-weight:700}.hud-stats .phase{color:var(--blue-700);background:var(--blue-50);border:1px solid var(--blue-200);border-radius:999px;padding:2px 8px;font-weight:700}.hud-stats .phase.returning{color:var(--success);background:var(--success-bg);border-color:#17a67347}.game-progress{flex:none}.target-tip{color:var(--text-2);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);align-items:center;gap:9px;padding:7px 12px;font-size:12px;display:flex}.self-tip{text-align:center;color:var(--text-2);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);margin:0 auto 4px;padding:7px 12px;font-size:12px}.start-hint{text-align:center;color:var(--text);border-radius:var(--radius-sm);background:#6366f11f;border:1px solid #6366f166;margin:0 auto 4px;padding:7px 12px;font-size:13px}.start-hint b{color:var(--blue-700)}.start-hint .start-note{color:var(--text-2)}.t-str{color:var(--blue-700);font-weight:700}.t-fret{font-weight:600}.t-note{color:var(--blue-600);letter-spacing:-.02em;font-size:16px;font-weight:750}.t-err{color:var(--danger);background:var(--danger-bg);border-radius:999px;padding:2px 8px;font-weight:650}.fb-blink{animation:.32s ease-in-out shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.result-mask{z-index:120;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#10182873;justify-content:center;align-items:center;padding:18px;display:flex;position:fixed;inset:0}.result{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);text-align:center;width:100%;max-width:380px;max-height:calc(100dvh - 36px);padding:22px;overflow-y:auto}.result h3{color:var(--blue-700);margin:0;font-size:19px;font-weight:700}.result-lv{color:var(--text-3);margin:4px 0 16px;font-size:13px}.result-btns{gap:8px;margin-top:18px;display:flex}.result-btns .btn{flex:1}.best{color:var(--success);background:var(--success-bg);border-radius:999px;padding:2px 8px;font-size:11px;font-weight:600}.lv-meta{flex-wrap:wrap;gap:6px;display:flex}.lv-meta span{color:var(--blue-700);background:var(--blue-50);border:1px solid var(--blue-100);border-radius:999px;padding:3px 9px;font-size:11px;font-weight:600}.lv-meta .tag-open{color:var(--warn);background:#fff6e8;border-color:#ffe4bd}.lv-desc{color:var(--text-2);margin:11px 0 0;font-size:12px;line-height:1.65}.lv-note-seq,.result-scale{align-items:flex-start;gap:8px;margin-top:10px;font-size:12px;display:flex}.result-scale{border-top:1px solid var(--border);margin-top:14px;padding-top:12px}.seq-label{color:var(--text-3);white-space:nowrap;flex:none;font-weight:600}.seq-notes{color:var(--blue-700);letter-spacing:.03em;word-break:break-all;font-weight:600;line-height:1.6}.pattern-rows{text-align:left;color:var(--blue-700);flex:1;gap:3px;font-weight:600;line-height:1.45;display:grid}.pattern-rows>span{grid-template-columns:36px 1fr;gap:7px;display:grid}.pattern-rows b{color:var(--text-3);font-size:10px}.lv-list{flex-direction:column;gap:6px;display:flex}.lv-item{border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border);text-align:left;align-items:center;gap:11px;padding:10px 12px;transition:all .15s;display:flex}.lv-item.active{background:var(--blue-50);border-color:var(--blue-400)}.lv-no{background:var(--surface);border:1px solid var(--border-strong);width:26px;height:26px;color:var(--text-2);border-radius:50%;flex:none;justify-content:center;align-items:center;font-size:12px;font-weight:700;display:flex}.lv-item.active .lv-no{background:var(--blue-600);border-color:var(--blue-600);color:#fff}.lv-info{flex:1;min-width:0}.lv-info b{font-size:13.5px;font-weight:650;display:block}.lv-info i{color:var(--text-3);margin-top:1px;font-size:11px;font-style:normal;display:block}.lv-done{color:var(--success);font-size:15px;font-weight:700}.btn.sm{padding:2px 8px;font-size:11px}.rec-list{flex-direction:column;display:flex}.rec{border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:9px 2px;font-size:12.5px;display:flex}.rec:last-child{border-bottom:none}.rec-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-weight:600;overflow:hidden}.rec-acc{color:var(--blue-700);font-variant-numeric:tabular-nums;font-weight:700}.rec-time,.rec-date{color:var(--text-3);font-variant-numeric:tabular-nums;font-size:11.5px}@media (orientation:landscape) and (height<=460px){.game{gap:5px;padding:6px 8px 8px}.fb-string-row,.fb-slabel{height:30px}.target-tip{padding:5px 10px}.result{padding:14px 18px}.result-lv{margin-bottom:10px}.result-scale{margin-top:9px;padding-top:8px}.result-btns{margin-top:10px}}.metro-main{text-align:center}.bpm-display{justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;display:flex}.bpm-nudge{background:var(--surface-2);border:1px solid var(--border);width:42px;height:42px;color:var(--text-2);border-radius:50%;flex:none;justify-content:center;align-items:center;font-size:22px;font-weight:500;line-height:1;transition:all .15s;display:flex}.bpm-nudge:active{background:var(--blue-50);border-color:var(--blue-300);color:var(--blue-700);transform:scale(.94)}.bpm-center{flex:1}.bpm-value{letter-spacing:-.04em;color:var(--blue-700);font-variant-numeric:tabular-nums;font-size:58px;font-weight:750;line-height:1}.bpm-unit{letter-spacing:.14em;color:var(--text-3);margin-top:3px;font-size:11px;font-weight:700}.bpm-term{color:var(--text-3);margin-top:5px;font-size:12px}.range-scale{color:var(--text-3);font-variant-numeric:tabular-nums;justify-content:space-between;margin-top:5px;font-size:10px;display:flex}.beats{grid-template-columns:repeat(var(--n), 1fr);gap:6px;margin:18px 0 6px;display:grid}.beat{aspect-ratio:1;border-radius:var(--radius-sm);background:var(--surface-2);border:1.5px solid var(--border);max-height:46px;color:var(--text-3);font-variant-numeric:tabular-nums;justify-content:center;align-items:center;font-size:12px;font-weight:700;transition:background .1s,border-color .1s,color .1s;display:flex}.beat.accent{border-color:var(--blue-400);background:var(--blue-50);color:var(--blue-700)}.beat.on{background:var(--blue-500);border-color:var(--blue-500);color:#fff;transform:scale(1.04)}.beat.accent.on{color:#fff;background:linear-gradient(135deg,#ff7043,#ff1744);border-color:#ff1744;animation:.42s ease-out accentPulse;transform:scale(1.18);box-shadow:0 0 0 5px #ff174438,0 0 18px #ff17448c}@keyframes accentPulse{0%{transform:scale(1.04)}40%{transform:scale(1.28)}to{transform:scale(1.18)}}.hint{color:var(--text-3);margin:0 0 14px;font-size:11px}.audio-hint{color:var(--danger);margin:-7px 0 12px;font-size:12px;font-weight:600}.metro-actions{grid-template-columns:1fr 1.4fr;gap:10px;display:grid}.play-btn{height:50px;font-size:16px}.play-btn.running{background:var(--danger);border-color:var(--danger);box-shadow:0 2px 8px #e5484d4d}.vol-num{color:var(--blue-700);font-variant-numeric:tabular-nums}.bg-note{text-align:center;color:var(--text-3);margin:14px 0 4px;font-size:11px}:root{--blue-50:#eef4ff;--blue-100:#dbe7ff;--blue-200:#bdd2ff;--blue-300:#93b4ff;--blue-400:#6690fb;--blue-500:#3f6ff0;--blue-600:#1f6feb;--blue-700:#1a54c4;--blue-800:#17439b;--bg:#f7f8fb;--surface:#fff;--surface-2:#f2f5fa;--border:#e3e8f0;--border-strong:#ccd6e5;--text:#1a1d24;--text-2:#4a5364;--text-3:#808b9e;--success:#17a673;--success-bg:#e6f7f0;--danger:#e5484d;--danger-bg:#fdeced;--warn:#d98014;--radius-sm:8px;--radius:14px;--radius-lg:20px;--shadow-sm:0 1px 2px #14203c0f;--shadow:0 2px 12px #14203c14;--shadow-lg:0 8px 30px #14203c1f;--nav-h:62px;--font:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0;padding:0}body{font-family:var(--font);background:var(--bg);color:var(--text);overscroll-behavior:none;-webkit-font-smoothing:antialiased}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}.app{background:var(--bg);flex-direction:column;max-width:720px;height:100%;margin:0 auto;display:flex;position:relative}.app-body{-webkit-overflow-scrolling:touch;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));flex:1;overflow-y:auto}body.practice-active{touch-action:none;overflow:hidden}body.practice-active .app{width:100%;max-width:none;height:100dvh}body.practice-active .appbar,body.practice-active .tabbar{display:none!important}body.practice-active .app-body{padding-bottom:0;overflow:hidden}.appbar{z-index:20;-webkit-backdrop-filter:saturate(180%)blur(12px);backdrop-filter:saturate(180%)blur(12px);border-bottom:1px solid var(--border);background:#f7f8fbe0;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;display:flex;position:sticky;top:0}.appbar-title{letter-spacing:-.01em;font-size:17px;font-weight:650}.appbar-sub{color:var(--text-3);margin-top:2px;font-size:12px}.metro-pill{background:var(--blue-50);border:1px solid var(--blue-200);color:var(--blue-700);font-variant-numeric:tabular-nums;white-space:nowrap;border-radius:999px;align-items:center;gap:7px;padding:6px 11px;font-size:12px;font-weight:600;display:inline-flex}.metro-pill.off{background:var(--surface-2);border-color:var(--border);color:var(--text-3)}.metro-pill .dot{background:var(--blue-600);border-radius:50%;width:7px;height:7px}.metro-pill.off .dot{background:var(--text-3)}.metro-pill.beating .dot{animation:.16s ease-out pulse}.metro-pill.accent{color:#ff1744;border-color:#ff1744}.metro-pill.accent .dot{background:#ff1744;box-shadow:0 0 8px #ff1744b3}@keyframes pulse{0%{opacity:.5;transform:scale(1.9)}to{opacity:1;transform:scale(1)}}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:16px}.card+.card{margin-top:12px}.card-title{color:var(--text-2);justify-content:space-between;align-items:center;margin:0 0 12px;font-size:13px;font-weight:650;display:flex}.page{padding:14px}.tabbar{z-index:30;height:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);-webkit-backdrop-filter:saturate(180%)blur(14px);backdrop-filter:saturate(180%)blur(14px);border-top:1px solid var(--border);background:#fffffff0;display:flex;position:absolute;bottom:0;left:0;right:0}.tabbar button{color:var(--text-3);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;font-size:11px;font-weight:600;transition:color .15s;display:flex;position:relative}.tabbar button.active{color:var(--blue-600)}.tabbar button .badge{background:var(--blue-600);width:7px;height:7px;box-shadow:0 0 0 2px var(--surface);border-radius:50%;position:absolute;top:8px;right:50%;transform:translate(20px)}.tabbar svg{width:23px;height:23px}.btn{border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);justify-content:center;align-items:center;gap:6px;padding:10px 16px;font-size:14px;font-weight:600;transition:all .15s;display:inline-flex}.btn:active{transform:scale(.97)}.btn.primary{background:var(--blue-600);color:#fff;border-color:var(--blue-600);box-shadow:0 2px 8px #1f6feb47}.btn.ghost{color:var(--blue-600);background:0 0;border-color:#0000}.btn.danger{color:var(--danger)}.btn.block{width:100%}.btn:disabled{opacity:.45;cursor:not-allowed}.segmented{flex-wrap:wrap;gap:6px;display:flex}.seg-item{border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);padding:8px 13px;font-size:13px;font-weight:600;transition:all .15s}.seg-item.active{background:var(--blue-600);border-color:var(--blue-600);color:#fff}.seg-item .sub{opacity:.7;margin-top:1px;font-size:10px;font-weight:500;display:block}.stat-row{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.stat{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);text-align:center;padding:10px 8px}.stat .v{color:var(--blue-700);font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:18px;font-weight:700}.stat .k{color:var(--text-3);margin-top:2px;font-size:11px}.progress{background:var(--border);border-radius:999px;height:6px;overflow:hidden}.progress>i{background:linear-gradient(90deg, var(--blue-400), var(--blue-600));border-radius:999px;height:100%;transition:width .25s;display:block}input[type=range]{appearance:none;background:var(--border-strong);border-radius:999px;outline:none;width:100%;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--surface);border:2px solid var(--blue-600);width:24px;height:24px;box-shadow:var(--shadow);cursor:pointer;border-radius:50%}input[type=range]::-moz-range-thumb{background:var(--surface);border:2px solid var(--blue-600);width:24px;height:24px;box-shadow:var(--shadow);cursor:pointer;border-color:var(--blue-600);border-radius:50%}.empty{text-align:center;color:var(--text-3);padding:26px 10px;font-size:13px}