:root{--bg0: #07070c;--bg1: #0c0c16;--bg2: #12121f;--ink: #f3f3f9;--ink-2: #a5a5bd;--ink-3: #66667f;--line: rgba(255, 255, 255, .1);--line-strong: rgba(255, 255, 255, .16);--glass-bg: rgba(255, 255, 255, .065);--glass-bg-strong: rgba(22, 22, 36, .55);--glass-hi: rgba(255, 255, 255, .16);--glass-blur: 24px;--c-interval: #ffa94d;--c-scale: #4cc9f0;--c-chord: #ff6ac1;--c-prog: #a78bfa;--c-ear: #3ddc97;--c-tool: #8b9dff;--c-danger: #ff5d73;--c-gold: #ffd166;--acc: var(--c-ear);--acc-soft: rgba(61, 220, 151, .16);--r-xl: 28px;--r-l: 22px;--r-m: 16px;--r-s: 11px;--spring: cubic-bezier(.34, 1.56, .64, 1);--ease-out: cubic-bezier(.22, .61, .36, 1);--t-fast: .18s;--t-med: .32s;--mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "HarmonyOS Sans SC", sans-serif;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;height:100%;overscroll-behavior:none}body{background:var(--bg0);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}#app{height:100dvh;position:relative;overflow:hidden}button{font-family:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer;touch-action:manipulation}.mono{font-family:var(--mono);font-feature-settings:"tnum"}.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}.ambient:before,.ambient:after{content:"";position:absolute;width:130vw;height:130vw;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform}.ambient:before{top:-70vw;right:-55vw;background:radial-gradient(circle at center,var(--acc-soft) 0%,transparent 62%);animation:drift-a 26s ease-in-out infinite alternate}.ambient:after{bottom:-78vw;left:-60vw;background:radial-gradient(circle at center,rgba(124,108,255,.13) 0%,transparent 60%);animation:drift-b 34s ease-in-out infinite alternate}@keyframes drift-a{0%{transform:translateZ(0) scale(1)}to{transform:translate3d(-9vw,7vw,0) scale(1.14)}}@keyframes drift-b{0%{transform:translateZ(0) scale(1.1)}to{transform:translate3d(7vw,-6vw,0) scale(.95)}}.glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);backdrop-filter:blur(var(--glass-blur)) saturate(160%);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:inset 0 1px #ffffff17,0 12px 34px #0000006b}.glass-strong{background:var(--glass-bg-strong);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(170%);backdrop-filter:blur(var(--glass-blur)) saturate(170%);border:1px solid var(--line-strong);border-radius:var(--r-l);box-shadow:inset 0 1px #ffffff1a,0 18px 44px #00000080}.acc-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-l);background:linear-gradient(150deg,color-mix(in srgb,var(--acc) 26%,transparent),#ffffff09 46%),#0e0e1899;-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);backdrop-filter:blur(var(--glass-blur)) saturate(160%);box-shadow:inset 0 1px #ffffff1f,0 14px 36px #00000073}.acc-card:after{content:"";position:absolute;top:-46px;right:-30px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--acc) 38%,transparent) 0%,transparent 70%);filter:blur(6px);pointer-events:none}.screen{position:absolute;inset:0;display:flex;flex-direction:column;z-index:1;animation:screen-in var(--t-med) var(--ease-out) both}@keyframes screen-in{0%{opacity:0;transform:translate3d(0,14px,0) scale(.99)}to{opacity:1;transform:none}}.screen-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:calc(var(--safe-top) + 14px) calc(var(--safe-right) + 18px) 24px calc(var(--safe-left) + 18px)}.page-title{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:4px 0 2px}.page-sub{color:var(--ink-2);font-size:14px;margin:0 0 18px}.section-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--ink-2);text-transform:uppercase;margin:22px 0 10px}.section-label:after{content:"";flex:1;height:1px;background:var(--line)}.tabbar{position:absolute;left:calc(var(--safe-left) + 12px);right:calc(var(--safe-right) + 12px);bottom:calc(var(--safe-bottom) + 10px);z-index:10;display:flex;padding:7px;gap:4px;border-radius:26px;background:var(--glass-bg-strong);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(170%);backdrop-filter:blur(var(--glass-blur)) saturate(170%);border:1px solid var(--line-strong);box-shadow:inset 0 1px #ffffff1a,0 16px 40px #0000008c}.tab-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 6px;border-radius:19px;color:var(--ink-3);font-size:11px;font-weight:600;transition:color var(--t-fast) linear,background var(--t-fast) linear,transform var(--t-fast) var(--spring)}.tab-item:active{transform:scale(.93)}.tab-item.on{color:var(--ink);background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 30%,transparent),color-mix(in srgb,var(--acc) 10%,transparent));box-shadow:inset 0 1px #ffffff24,0 4px 16px color-mix(in srgb,var(--acc) 26%,transparent)}.tab-icon{width:21px;height:21px;display:block}.tab-icon *{vector-effect:non-scaling-stroke}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 22px;border-radius:var(--r-m);font-size:16px;font-weight:700;color:var(--ink);white-space:nowrap;background:var(--glass-bg);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform var(--t-fast) var(--spring),background var(--t-fast) linear,box-shadow var(--t-fast) linear}.btn:active{transform:scale(.96)}.btn-primary{background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 88%,white),color-mix(in srgb,var(--acc) 74%,black));border:1px solid color-mix(in srgb,var(--acc) 55%,white);color:#0a0a12;box-shadow:inset 0 1px #ffffff59,0 8px 24px color-mix(in srgb,var(--acc) 34%,transparent)}.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink-2)}.btn:disabled{opacity:.4;pointer-events:none}.btn-lg{width:100%;padding:17px 22px;font-size:17px;border-radius:var(--r-l)}.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:700;background:var(--glass-bg);border:1px solid var(--line);color:var(--ink-2)}.chip.acc{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 45%,transparent);background:color-mix(in srgb,var(--acc) 12%,transparent)}.card{padding:18px;margin-bottom:12px}.row{display:flex;align-items:center;gap:12px}.grow{flex:1;min-width:0}.bar{height:7px;border-radius:999px;background:#ffffff17;overflow:hidden}.bar>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 70%,transparent),var(--acc));box-shadow:0 0 12px color-mix(in srgb,var(--acc) 60%,transparent);transition:width .5s var(--ease-out)}.kbd{position:relative;width:100%;border-radius:var(--r-m);overflow:hidden;background:#0a0a128c;border:1px solid var(--line)}.kb-white{position:absolute;top:0;bottom:0;border:1px solid rgba(255,255,255,.07);border-radius:0 0 7px 7px;background:linear-gradient(180deg,#ffffffed,#e9e9f2d1);box-shadow:inset 0 -5px 9px #00000024;transition:background .09s linear,transform .09s linear}.kb-white.held,.kb-white.lit{background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 46%,white),color-mix(in srgb,var(--acc) 30%,white));box-shadow:inset 0 -3px 8px #0000001f,0 0 18px color-mix(in srgb,var(--acc) 55%,transparent)}.kb-black{position:absolute;top:0;height:61%;border-radius:0 0 6px 6px;background:linear-gradient(180deg,#17171f,#060609 88%);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px #ffffff21,0 5px 10px #00000080;z-index:2;transition:background .09s linear}.kb-black.held,.kb-black.lit{background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 55%,#101018),color-mix(in srgb,var(--acc) 34%,#050508));box-shadow:0 0 20px color-mix(in srgb,var(--acc) 60%,transparent)}.kb-label{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:10.5px;font-weight:700;color:#0a0a1480;font-family:var(--mono);pointer-events:none}.kb-black .kb-label{color:#ffffff8c;font-size:9px}.flash-good{animation:flash-good .5s var(--ease-out)}@keyframes flash-good{0%{box-shadow:0 0 color-mix(in srgb,var(--c-ear) 55%,transparent)}to{box-shadow:0 0 0 26px transparent}}.flash-bad{animation:flash-bad .5s var(--ease-out)}@keyframes flash-bad{0%{box-shadow:0 0 color-mix(in srgb,var(--c-danger) 60%,transparent)}to{box-shadow:0 0 0 26px transparent}}.pop{animation:pop .42s var(--spring)}@keyframes pop{0%{transform:scale(.86)}to{transform:scale(1)}}.combo-pop{animation:combo-pop .4s var(--spring);display:inline-block}@keyframes combo-pop{0%{transform:scale(1.55)}to{transform:scale(1)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes rise-in{0%{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}.rise{animation:rise-in .4s var(--ease-out) both}.lesson-body{font-size:15.5px;color:var(--ink);line-height:1.7}.lesson-body p{margin:0 0 10px}.lesson-body b{color:var(--ink)}.lesson-body .t{font-family:var(--mono);font-size:.92em;color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent);padding:1px 6px;border-radius:6px;white-space:nowrap}.lesson-body em{font-style:normal;color:var(--ink-2);font-size:.9em}.callout{border-left:3px solid var(--acc);background:color-mix(in srgb,var(--acc) 9%,transparent);border-radius:0 var(--r-s) var(--r-s) 0;padding:10px 13px;font-size:14px;color:var(--ink-2);margin:12px 0}.opt{padding:15px 14px;border-radius:var(--r-m);background:var(--glass-bg);border:1.5px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:15.5px;font-weight:700;color:var(--ink);text-align:center;transition:transform var(--t-fast) var(--spring),background var(--t-fast) linear,border-color var(--t-fast) linear}.opt:active{transform:scale(.955)}.opt.correct{border-color:var(--c-ear);background:color-mix(in srgb,var(--c-ear) 20%,transparent);color:var(--c-ear)}.opt.wrong{border-color:var(--c-danger);background:color-mix(in srgb,var(--c-danger) 16%,transparent);color:var(--c-danger);animation:shake .4s linear}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}50%{transform:translate(5px)}75%{transform:translate(-3px)}}.opt.dim{opacity:.45}.ring{position:relative;display:inline-block}.ring svg{transform:rotate(-90deg)}.ring .ring-val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800}.beat-canvas{width:100%;height:120px;display:block;border-radius:var(--r-m);background:#08081099;border:1px solid var(--line)}.slider{-webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent}.slider::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:#ffffff1f}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-9px;border-radius:50%;background:linear-gradient(160deg,#fff,#cfd2e4);border:1px solid rgba(255,255,255,.7);box-shadow:0 3px 10px #00000073,0 0 14px color-mix(in srgb,var(--acc) 45%,transparent)}.cof-wrap{display:flex;justify-content:center;padding:6px 0}.cof text{font-family:var(--mono);font-weight:700}.hide{display:none!important}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:1ms!important;transition-duration:1ms!important}}