/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}[hidden],template{display:none}:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--radius-xs:6px;--radius-sm:10px;--radius-md:14px;--radius-lg:18px;--radius-xl:24px;--radius-2xl:32px;--radius-pill:999px;--text-xs:12px;--text-sm:13px;--text-md:15px;--text-lg:18px;--text-xl:22px;--text-2xl:28px;--text-3xl:36px;--text-display:clamp(38px,5.2vw,64px);--tracking-tight:-0.022em;--tracking-normal:0;--tracking-wide:0.08em;--tracking-caps:0.16em;--leading-tight:1.15;--leading-normal:1.5;--leading-relaxed:1.7;--tap-min:44px;--control-h:40px;--control-h-lg:48px;--safe-t:env(safe-area-inset-top,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--page-max:1240px;--page-max-wide:1440px;--page-gutter:24px;--ease-out:cubic-bezier(0.22,1,0.36,1);--ease-spring:cubic-bezier(0.34,1.42,0.64,1);--ease-in-out:cubic-bezier(0.65,0,0.35,1);--dur-fast:120ms;--dur-base:220ms;--dur-slow:380ms;--ok:#34d399;--warn:#fbbf24;--danger:#fb7185;--info:#60a5fa;color-scheme:dark;--bg:#070b16;--bg-elev:#0b1220;--panel:rgba(17,26,45,.72);--panel-strong:rgba(23,34,57,.92);--line:rgba(148,163,184,.16);--line-strong:rgba(148,163,184,.28);--text:#f4f7fb;--muted:#9aa8bd;--accent:#8b5cf6;--accent-2:#22d3ee;--accent-soft:rgba(139,92,246,.18);--accent-glow:rgba(139,92,246,.38);--on-accent:#fff;--track:rgba(3,7,18,.5);--glass-highlight:inset 0 1px 0 hsla(0,0%,100%,.07);--glass-blur:20px;--elev-1:0 1px 2px rgba(2,6,18,.28),0 2px 6px rgba(2,6,18,.2);--elev-2:0 2px 6px rgba(2,6,18,.3),0 8px 20px rgba(2,6,18,.28);--elev-3:0 6px 16px rgba(2,6,18,.34),0 20px 44px rgba(2,6,18,.36);--elev-4:0 12px 30px rgba(2,6,18,.4),0 36px 80px rgba(2,6,18,.46);--shadow:var(--elev-2);--score-bg:#0e1729;--score-text:#e6ecf5;--score-muted:#9aa8bd;--score-highlight:rgba(139,92,246,.2);--key-white-face:linear-gradient(178deg,#fff,#f7f9fc 62%,#e3e9f1);--key-white-edge:#c3ccd9;--key-black-face:linear-gradient(178deg,#2a3446,#10151f 58%,#05080f);--key-bed:#05070d}:root[data-theme=midnight]{color-scheme:dark;--bg:#03060f;--bg-elev:#080d1a;--panel:rgba(15,23,42,.78);--panel-strong:rgba(19,27,48,.95);--line:rgba(148,163,184,.14);--line-strong:rgba(148,163,184,.26);--accent:#6366f1;--accent-2:#a855f7;--accent-soft:rgba(99,102,241,.2);--accent-glow:rgba(99,102,241,.4);--score-bg:#0d1425;--score-highlight:rgba(99,102,241,.22)}:root[data-theme=sunset]{color-scheme:dark;--bg:#180a16;--bg-elev:#210d1c;--panel:rgba(48,19,40,.78);--panel-strong:rgba(58,24,47,.95);--line:rgba(251,146,60,.18);--line-strong:rgba(251,146,60,.3);--text:#fff6ee;--muted:#e3ab9c;--accent:#f43f5e;--accent-2:#fb923c;--accent-soft:rgba(244,63,94,.18);--accent-glow:rgba(244,63,94,.4);--score-bg:#2a1122;--score-text:#fff6ee;--score-muted:#d79f92;--score-highlight:rgba(244,63,94,.22)}:root[data-theme=zen]{color-scheme:light;--bg:#f2f6f3;--bg-elev:#fff;--panel:hsla(0,0%,100%,.82);--panel-strong:#fff;--line:rgba(23,53,43,.12);--line-strong:rgba(23,53,43,.22);--text:#122a22;--muted:#4a655b;--accent:#12806a;--accent-2:#3f7d1f;--accent-soft:rgba(18,128,106,.12);--accent-glow:rgba(18,128,106,.28);--track:rgba(214,231,223,.7);--ok:#0f766e;--danger:#be123c;--warn:#b45309;--info:#1d4ed8;--glass-highlight:inset 0 1px 0 hsla(0,0%,100%,.9);--elev-1:0 1px 2px rgba(23,53,43,.06),0 2px 6px rgba(23,53,43,.05);--elev-2:0 2px 6px rgba(23,53,43,.07),0 8px 20px rgba(23,53,43,.07);--elev-3:0 6px 16px rgba(23,53,43,.08),0 20px 44px rgba(23,53,43,.09);--elev-4:0 12px 30px rgba(23,53,43,.1),0 36px 80px rgba(23,53,43,.12);--score-bg:#fff;--score-text:#122a22;--score-muted:#4a655b;--score-highlight:rgba(18,128,106,.14);--key-bed:#16241f}:root{--surface:var(--panel);--surface-2:var(--panel-strong);--purple:var(--accent);--cyan:var(--accent-2);--green:var(--ok)}@media (max-width:1199px){:root{--page-gutter:20px}}@media (max-width:640px){:root{--page-gutter:14px}}:root[data-motion=off] *,:root[data-motion=off] :after,:root[data-motion=off] :before{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}@media (prefers-reduced-motion:reduce){*,:after,:before{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.page-shell{width:100%;max-width:calc(var(--page-max) + var(--page-gutter) * 2);margin-left:auto;margin-right:auto;padding-left:var(--page-gutter);padding-right:var(--page-gutter)}.surface-card{border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--panel);box-shadow:var(--elev-2),var(--glass-highlight);backdrop-filter:blur(var(--glass-blur)) saturate(140%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%)}@media screen and (max-width:1365px){#app .responsive-section-a{width:90%}}@media screen and (min-width:1366px) and (max-width:1599px){#app .responsive-section-a{width:87.5%}}@media screen and (min-width:1600px) and (max-width:1919px){#app .responsive-section-a{width:85%}}@media screen and (min-width:1920px){#app .responsive-section-a{width:80%}#app .component-autopiano .piano-wrap .piano-band{height:45px;line-height:45px;background-size:135px 45px}}.clearfix{clear:both;*zoom:1}.clearfix:before{content:"";display:block}.clearfix:after{content:"";display:table;height:0;clear:both}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{background:var(--bg);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}#app,body,html{width:100%;min-width:0;min-height:100%}body,html{position:relative;overflow-x:hidden;color:var(--text);background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,SF Pro SC,SF Pro Text,Segoe UI,Inter,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{min-height:100vh;min-height:100dvh;overscroll-behavior-x:none;overscroll-behavior-y:auto;-ms-touch-action:pan-y;touch-action:pan-y}#app{isolation:isolate;padding-left:var(--safe-l);padding-right:var(--safe-r)}a,button,input,select,textarea{-ms-touch-action:manipulation;touch-action:manipulation}[role=button],a,button,label{-webkit-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}button{appearance:none;-webkit-appearance:none;font:inherit;background:none;border:0}a,button{color:inherit}a{text-decoration:none}img{max-width:100%}@media (hover:none) and (pointer:coarse){input,select,textarea{font-size:16px}}@media (hover:none){:hover{transition-duration:0ms}}:focus{outline:none}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-xs)}::selection{background:var(--accent-soft);color:var(--text)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:var(--radius-pill);background:rgba(148,163,184,.38);background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.6);background-clip:padding-box}@media (hover:none) and (pointer:coarse){::-webkit-scrollbar{width:0;height:0}}.learning-home{min-height:100vh;color:var(--text);background:var(--bg);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,sans-serif}.learning-home *{box-sizing:border-box}.learning-home a,.learning-home button,.learning-home input{font:inherit}.learning-home a{color:inherit;text-decoration:none}.learning-home button{color:inherit}:root[data-density=compact] .learning-home .practice-preview,:root[data-density=compact] .learning-home .song-library{margin-top:20px}:root[data-density=compact] .learning-home .practice-main,:root[data-density=compact] .learning-home .today-panel{padding:18px}.learn-nav{width:calc(100% - var(--page-gutter) * 2);max-width:var(--page-max-wide);min-height:72px;margin:calc(var(--safe-t) + var(--space-4)) auto var(--space-2);padding:0 var(--space-5);gap:var(--space-6);position:sticky;top:calc(var(--safe-t) + var(--space-2));z-index:20;border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--panel-strong);box-shadow:var(--elev-2),var(--glass-highlight);backdrop-filter:blur(var(--glass-blur)) saturate(150%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%)}.learn-nav,.learn-nav .brand{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.learn-nav .brand{min-width:205px;gap:12px}.learn-nav .brand img{width:44px;height:44px;border-radius:12px;object-fit:cover}.learn-nav .brand small,.learn-nav .brand strong{display:block}.learn-nav .brand strong{letter-spacing:.06em}.learn-nav .brand small{margin-top:2px;color:var(--muted);font-size:11px}.learn-nav nav{margin:auto;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:38px}.learn-nav nav a{padding:25px 2px 22px;position:relative;color:var(--muted);font-size:14px}.learn-nav nav a.active,.learn-nav nav a:hover{color:var(--text)}.learn-nav nav a.active:after{content:"";height:2px;position:absolute;left:0;right:0;bottom:15px;background:linear-gradient(90deg,var(--purple),var(--cyan))}.learn-nav .learner-status{min-width:205px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;gap:18px;color:var(--muted);font-size:12px}.learn-nav .learner-status strong{color:var(--accent);font-size:16px}.learn-nav .learner-status button{min-height:var(--tap-min);border:1px solid var(--line);background:var(--surface-2);cursor:pointer}.learn-nav .learner-status>button:last-child{width:var(--tap-min);border-radius:50%}.learn-nav .settings-trigger{width:auto;padding:0 13px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:7px;border-radius:12px}.learn-nav .settings-trigger em{font-style:normal;font-size:12px}.journey-hero{min-height:min(510px,92svh);position:relative;overflow:hidden;border-bottom:1px solid var(--line)}.journey-hero .hero-backdrop{position:absolute;inset:0;background:url(/static/images/song-journey-hero.jpg) 100%/cover no-repeat}.journey-hero .hero-backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,8,18,.98),rgba(3,8,18,.87) 36%,rgba(3,8,18,.08) 76%),linear-gradient(0deg,var(--bg),transparent 42%)}.journey-hero .hero-content{width:calc(100% - var(--page-gutter) * 2);max-width:var(--page-max-wide);min-height:min(510px,92svh);margin:auto;padding:68px 4px 30px;position:relative;z-index:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;color:#f8fafc}.journey-hero .eyebrow{display:-ms-inline-flexbox;display:inline-flex;margin:0 0 16px;padding:6px 14px;border-radius:99px;color:#ddd6fe;background:rgba(139,92,246,.2);font-size:12px;font-weight:800;letter-spacing:.06em}.journey-hero h1{max-width:16ch;margin:0;font-size:var(--text-display);line-height:1.06;letter-spacing:var(--tracking-tight)}.journey-hero .hero-meta{margin-top:22px;display:-ms-flexbox;display:flex;gap:28px;color:#cbd5e1}.journey-hero .hero-meta strong{color:#ddd6fe;font-size:20px}.journey-hero .primary-cta{min-width:min(330px,100%);min-height:56px;margin-top:30px;padding:0 28px;border:0;border-radius:18px;color:#fff;background:linear-gradient(120deg,var(--purple),var(--cyan));font-size:18px;font-weight:900;cursor:pointer;box-shadow:0 18px 50px rgba(99,102,241,.22)}.journey-steps{width:100%;max-width:760px;margin:auto 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);list-style:none}.journey-steps li{position:relative}.journey-steps li:not(:last-child):after{content:"";height:2px;position:absolute;left:48px;right:0;top:17px;background:rgba(148,163,184,.28)}.journey-steps li.done:not(:last-child):after{background:linear-gradient(90deg,var(--purple),var(--cyan))}.journey-steps button{width:100%;padding:0 8px 0 0;display:grid;grid-template-columns:36px 1fr;grid-template-rows:20px 18px;text-align:left;border:0;background:none;cursor:pointer}.journey-steps button>span{width:36px;height:36px;grid-row:1/3;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:1;border:1px solid #64748b;border-radius:50%;background:#111c30}.journey-steps small,.journey-steps strong{margin-left:10px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.journey-steps strong{color:#e2e8f0;font-size:var(--text-sm)}.journey-steps small{color:var(--muted);font-size:var(--text-xs)}.journey-steps li.current button>span,.journey-steps li.done button>span{border-color:var(--accent);background:var(--accent)}.journey-steps li.current strong{color:#fff}.practice-preview,.song-library{width:calc(100% - var(--page-gutter) * 2);max-width:var(--page-max-wide);margin:var(--space-6) auto}.practice-preview{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px;scroll-margin-top:92px}.practice-main,.today-panel{border:1px solid var(--line);border-radius:22px;background:var(--surface)}.practice-main{padding:24px;min-width:0}.section-head{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;gap:18px}.section-head .eyebrow,.song-library .eyebrow,.today-panel .eyebrow{margin:0 0 5px;color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.12em}.section-head h2{margin:0;font-size:22px}.practice-actions{display:-ms-flexbox;display:flex;gap:8px}.lesson-controls button,.practice-actions button{min-height:38px;padding:0 13px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);cursor:pointer}.practice-actions button.active{color:var(--text);border-color:var(--purple);background:var(--panel-strong)}.practice-actions button.pulse{transform:translateY(-1px);box-shadow:0 0 0 4px var(--accent-soft)}.score-panel{margin-top:20px;padding:18px;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--score-bg);color:var(--score-text)}.score-info{gap:18px;color:var(--score-muted);font-size:var(--text-xs)}.number-score,.score-info{display:-ms-flexbox;display:flex}.number-score{margin-top:14px;overflow-x:auto;scrollbar-width:thin}.score-bar{min-width:230px;padding:10px 18px;border-right:1px solid var(--line);opacity:.42}.score-bar.active{opacity:1;background:var(--score-highlight);border-radius:var(--radius-sm)}.score-bar>small{display:block;margin-bottom:15px;color:var(--score-muted)}.score-bar>div{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;gap:8px}.score-bar button{min-width:36px;padding:5px;border:0;border-radius:7px;color:var(--score-text);background:transparent;cursor:pointer}.score-bar button span,.score-bar button strong{display:block}.score-bar button strong{font-size:23px}.score-bar button span{margin-top:6px;color:var(--score-muted);font-size:var(--text-xs)}.score-bar button.current{color:var(--on-accent);background:var(--accent);box-shadow:var(--shadow)}.score-bar button.current span{color:var(--on-accent);opacity:.8}.score-bar button.complete{color:var(--accent)}.score-caption{margin-top:12px;gap:18px;color:var(--score-muted);font-size:var(--text-xs)}.keyboard-label,.score-caption{display:-ms-flexbox;display:flex}.keyboard-label{margin:17px 2px 8px;-ms-flex-pack:justify;justify-content:space-between;color:var(--muted);font-size:11px}.keyboard-label strong{color:var(--text)}.mini-keyboard{height:190px;padding:0;position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--key-bed);box-shadow:inset 0 2px 8px rgba(0,0,0,.5);-ms-user-select:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.mini-keyboard,.white-key{display:-ms-flexbox;display:flex;-ms-touch-action:none;touch-action:none}.white-key{-ms-flex:1;flex:1;min-width:52px;height:100%;padding:0 0 13px;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;gap:4px;border:1px solid #cbd5e1;border-radius:0 0 8px 8px;color:#334155;background:linear-gradient(90deg,#dce3ea,#fff 25%,#f8fafc 78%,#dce3ea);cursor:pointer}.white-key span{font-weight:900}.white-key small{font-size:10px}.white-key.guide{color:#6d28d9;background:linear-gradient(180deg,#fff,#ddd6fe);box-shadow:inset 0 -8px 0 #8b5cf6}.white-key.pressed{transform:translateY(-2px);filter:brightness(.9)}.white-key.wrong{color:#be123c;background:#fecdd3}.black-key{width:6.4%;height:62%;-ms-touch-action:none;touch-action:none;padding:0 0 9px;position:absolute;top:0;z-index:2;display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center;border:1px solid #020617;border-radius:0 0 6px 6px;color:#cbd5e1;background:linear-gradient(90deg,#020617,#334155 60%,#020617);cursor:pointer}.black-key small{font-size:8px}.lesson-controls{margin-top:14px;-ms-flex-align:center}.lesson-controls,.lesson-controls label{display:-ms-flexbox;display:flex;align-items:center;gap:10px}.lesson-controls label{-ms-flex:1;flex:1;-ms-flex-align:center;color:var(--muted);font-size:11px}.lesson-controls input{width:40%;max-width:220px;accent-color:var(--purple)}.lesson-controls strong{color:var(--text)}.lesson-controls .complete-button{color:#fff;border-color:transparent;background:linear-gradient(120deg,var(--purple),#6366f1)}.lesson-controls button:disabled{opacity:.38;cursor:not-allowed}.live-feedback{min-height:20px;margin:11px 2px 0;color:var(--muted);font-size:12px}.live-feedback.correct{color:var(--green)}.live-feedback.wrong{color:#fb7185}.today-panel{min-height:100%;padding:22px;-ms-flex-direction:column;flex-direction:column}.today-panel,.today-panel header{display:-ms-flexbox;display:flex}.today-panel header{-ms-flex-align:start;align-items:start;-ms-flex-pack:justify;justify-content:space-between}.today-panel header>strong{color:var(--accent)}.today-panel ol{margin:8px 0 0;padding:0;list-style:none}.today-panel li{padding:17px 0;gap:12px;border-bottom:1px solid var(--line)}.today-panel li,.today-panel li>span{display:-ms-flexbox;display:flex}.today-panel li>span{width:27px;height:27px;-ms-flex:0 0 27px;flex:0 0 27px;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:50%;color:#fff;background:var(--accent);font-size:11px;font-weight:900}.today-panel li small,.today-panel li strong{display:block}.today-panel li strong{font-size:13px}.today-panel li small{margin-top:4px;color:var(--muted);font-size:10px}.today-panel li.done{opacity:.58}.today-panel li.done>span{background:#059669}.encouragement{margin-top:auto;padding-top:22px}.encouragement strong{color:var(--accent)}.encouragement p{color:var(--muted);font-size:12px;line-height:1.6}.song-library{padding:24px 0 70px}.song-list{margin-top:15px;border-top:1px solid var(--line)}.song-list button{width:100%;padding:17px 4px;display:grid;grid-template-columns:54px 1fr auto;-ms-flex-align:center;align-items:center;gap:12px;text-align:left;border:0;border-bottom:1px solid var(--line);color:var(--text);background:transparent;cursor:pointer}.song-order{color:var(--accent);font-weight:900}.song-list button small,.song-list button strong{display:block}.song-list button small{margin-top:4px;color:var(--muted)}.song-state{color:var(--accent);font-size:11px}.profile-popover{width:270px;padding:18px;position:fixed;top:96px;right:28px;z-index:30;display:grid;gap:9px;border:1px solid var(--line);border-radius:15px;background:var(--panel-strong);box-shadow:var(--shadow)}.profile-popover span{color:var(--muted);font-size:11px}.profile-popover button{min-height:36px;margin-top:5px;border:1px solid var(--line);border-radius:9px;background:transparent;cursor:pointer}@media (min-width:641px) and (max-width:1199px){.learning-home .practice-preview{grid-template-columns:minmax(0,1fr)}.learning-home .today-panel{min-height:auto}.learning-home .today-panel ol{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}.learning-home .today-panel li{border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-3)}.learning-home .mini-keyboard{height:220px}.learning-home .white-key{min-width:60px}}@media (hover:none) and (pointer:coarse){.learning-home .learn-nav{backdrop-filter:none;-webkit-backdrop-filter:none}.learning-home .lesson-controls button,.learning-home .practice-actions button,.learning-home .song-list button{min-height:var(--tap-min)}}@media (max-width:640px){.learning-home .song-library{padding-bottom:calc(var(--safe-b) + var(--space-6))}}@media (max-width:1000px){.learn-nav,.learn-nav nav{gap:18px}.learner-status>span{display:none}.practice-preview{grid-template-columns:1fr}.today-panel{min-height:auto}.encouragement{margin-top:15px}.today-panel ol{display:grid;grid-template-columns:1fr 1fr;gap:14px}.today-panel li{border:1px solid var(--line);border-radius:12px;padding:14px}}@media (max-width:700px){.learn-nav{height:64px;padding:0 14px;-webkit-backdrop-filter:none;backdrop-filter:none}.learn-nav .brand{min-width:0}.learn-nav .brand img{width:38px;height:38px}.learn-nav .brand span{display:none}.learn-nav nav{-ms-flex-pack:center;justify-content:center;overflow-x:auto;gap:14px}.learn-nav nav a{padding:21px 0 18px;font-size:var(--text-xs);white-space:nowrap}.learn-nav .learner-status{min-width:0;gap:7px}.learn-nav .learner-status button{height:36px}.learn-nav .settings-trigger{width:36px;padding:0;-ms-flex-pack:center;justify-content:center}.learn-nav .settings-trigger em{font-size:0}.learn-nav .settings-trigger em:after{content:"\8BBE\7F6E";font-size:10px}.journey-hero{min-height:min(570px,96svh)}.journey-hero .hero-content{width:calc(100% - 28px);min-height:min(570px,96svh);padding-top:62px}.journey-hero .hero-backdrop{background-position:68%}.journey-hero .hero-backdrop:after{background:linear-gradient(90deg,rgba(3,8,18,.98),rgba(3,8,18,.62)),linear-gradient(0deg,var(--bg),transparent 45%)}.journey-hero h1{max-width:340px;font-size:42px}.journey-hero .primary-cta{width:100%;min-width:0}.journey-steps{grid-template-columns:1fr 1fr;gap:18px 0}.journey-steps li:nth-child(2):after{display:none}.practice-preview,.song-library{width:calc(100% - 20px);margin-top:18px}.practice-main{padding:14px}.section-head{-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:column;flex-direction:column}.practice-actions{width:100%}.practice-actions button{-ms-flex:1;flex:1}.score-panel{padding:12px}.score-bar{min-width:210px;padding:9px 12px}.mini-keyboard{height:180px;overflow-x:auto;overscroll-behavior-x:contain}.white-key{min-width:56px}.black-key{width:34px}.lesson-controls{-ms-flex-align:stretch;align-items:stretch;-ms-flex-wrap:wrap;flex-wrap:wrap}.lesson-controls label{-ms-flex-preferred-size:100%;flex-basis:100%}.lesson-controls button{-ms-flex:1;flex:1}.today-panel ol{grid-template-columns:1fr}.song-list button{grid-template-columns:36px 1fr}.song-state{grid-column:2}}.settings-backdrop{position:fixed;inset:0;z-index:180;background:rgba(2,6,23,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:settings-fade var(--dur-base) var(--ease-out)}.global-settings{width:420px;max-width:calc(100vw - var(--space-4) * 2);position:fixed;top:calc(var(--safe-t) + var(--space-3));right:calc(var(--safe-r) + var(--space-3));bottom:calc(var(--safe-b) + var(--space-3));z-index:181;padding:var(--space-5);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;color:var(--text);border:1px solid var(--line);border-radius:var(--radius-2xl);background:var(--panel-strong);box-shadow:var(--elev-4);animation:settings-slide var(--dur-base) var(--ease-out)}.global-settings *{box-sizing:border-box}.global-settings .settings-head{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:start;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-5)}.global-settings .eyebrow{margin:0 0 var(--space-1);color:var(--accent);font-size:var(--text-xs);font-weight:800;letter-spacing:var(--tracking-caps)}.global-settings h2{margin:0;color:var(--text);font-size:var(--text-xl);letter-spacing:var(--tracking-tight)}.global-settings .close-button{width:var(--tap-min);height:var(--tap-min);-ms-flex:0 0 var(--tap-min);flex:0 0 var(--tap-min);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:1px solid var(--line);border-radius:var(--radius-md);color:var(--text);background:var(--panel);cursor:pointer;font-size:22px;line-height:1}.global-settings .settings-section{padding:var(--space-4) 0;border-top:1px solid var(--line)}.global-settings .section-title{margin:0 0 var(--space-3);color:var(--muted);font-size:var(--text-xs);font-weight:700;letter-spacing:var(--tracking-wide)}.global-settings .theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}.global-settings .theme-option{min-height:52px;padding:0 var(--space-3);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--space-2);border:1px solid var(--line);border-radius:var(--radius-md);color:var(--muted);background:var(--panel);cursor:pointer;font:inherit;font-size:var(--text-sm);transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}.global-settings .theme-option.active{color:var(--text);border-color:var(--accent);background:var(--accent-soft)}.global-settings .swatch{width:16px;height:16px;-ms-flex:0 0 16px;flex:0 0 16px;border-radius:50%;background:var(--swatch);box-shadow:0 0 12px var(--swatch)}.global-settings .setting-row{min-height:56px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;gap:var(--space-4)}.global-settings .setting-copy{min-width:0}.global-settings .setting-copy strong{display:block;color:var(--text);font-size:var(--text-md)}.global-settings .setting-copy span{display:block;margin-top:3px;color:var(--muted);font-size:var(--text-xs);line-height:var(--leading-normal)}.global-settings .switch{width:46px;height:28px;-ms-flex:0 0 46px;flex:0 0 46px;padding:3px;border:0;border-radius:var(--radius-pill);background:rgba(148,163,184,.3);cursor:pointer;transition:background var(--dur-base) var(--ease-out)}.global-settings .switch:after{content:"";display:block;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform var(--dur-base) var(--ease-spring)}.global-settings .switch.active{background:var(--accent)}.global-settings .switch.active:after{transform:translateX(18px)}.global-settings .switch:disabled{opacity:.4;cursor:not-allowed}.global-settings .field-stack{display:grid;gap:var(--space-2);margin-top:var(--space-3)}.global-settings .field-stack label{color:var(--muted);font-size:var(--text-xs);font-weight:700}.global-settings .settings-input{width:100%;height:var(--tap-min);padding:0 var(--space-3);border:1px solid var(--line);border-radius:var(--radius-md);outline:none;color:var(--text);background:var(--panel);font:inherit;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}.global-settings .settings-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.global-settings .range-row{margin-top:var(--space-2);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--space-3)}.global-settings .range-row input{min-width:0;-ms-flex:1;flex:1;accent-color:var(--accent)}.global-settings .range-value{min-width:46px;color:var(--text);font-size:var(--text-sm);text-align:right;font-variant-numeric:tabular-nums}.global-settings .connection-note{margin:var(--space-3) 0 0;padding:var(--space-3);border-radius:var(--radius-md);color:var(--muted);background:var(--accent-soft);font-size:var(--text-xs);line-height:var(--leading-normal)}.global-settings .reset-button{width:100%;min-height:var(--tap-min);margin-top:var(--space-2);border:1px solid var(--line);border-radius:var(--radius-md);color:var(--text);background:var(--panel);cursor:pointer;font:inherit}@media (hover:hover) and (pointer:fine){.global-settings .close-button:hover,.global-settings .reset-button:hover,.global-settings .theme-option:hover{border-color:var(--accent)}}@media (max-width:640px){.global-settings{width:100%;max-width:none;top:auto;right:0;left:0;bottom:0;max-height:88dvh;padding:var(--space-4) var(--space-4) calc(var(--safe-b) + var(--space-5));border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;border-bottom:0;animation:settings-sheet var(--dur-base) var(--ease-out)}}@media (max-width:640px){.global-settings .settings-head:before{content:"";width:40px;height:4px;position:absolute;top:var(--space-2);left:50%;transform:translateX(-50%);border-radius:var(--radius-pill);background:var(--line-strong)}.global-settings .settings-head{position:relative;padding-top:var(--space-4)}}@keyframes settings-fade{0%{opacity:0}}@keyframes settings-slide{0%{opacity:0;transform:translateX(16px)}}@keyframes settings-sheet{0%{opacity:0;transform:translateY(24px)}}.page-pc{width:100%;min-height:100vh;min-height:100dvh;position:relative;overflow-x:hidden;color:var(--text);background:var(--bg)}.page-pc *{box-sizing:border-box}.page-pc a{color:inherit;text-decoration:none}.page-pc .app-bg{position:absolute;inset:0;z-index:0;opacity:.07;background-size:cover;background-position:top}.page-pc .app-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(80% 50% at 12% -6%,var(--accent-soft),transparent 62%),radial-gradient(70% 46% at 92% 4%,rgba(34,211,238,.08),transparent 60%),linear-gradient(180deg,transparent,var(--bg) 46rem)}.page-pc .app-content{width:100%;min-height:100vh;position:relative;z-index:2;padding-bottom:var(--safe-b)}.page-pc .workspace-bar{width:calc(100% - var(--page-gutter) * 2);max-width:var(--page-max);margin:var(--space-4) auto var(--space-3);padding:var(--space-4) var(--space-5);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;gap:var(--space-5);border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--panel);box-shadow:var(--glass-highlight)}.page-pc .workspace-copy{min-width:0}.page-pc .workspace-copy h2{margin:0;color:var(--text);font-size:var(--text-lg);letter-spacing:var(--tracking-tight)}.page-pc .workspace-copy p{margin:var(--space-1) 0 0;color:var(--muted);font-size:var(--text-sm)}.page-pc .quick-actions{display:-ms-flexbox;display:flex;gap:var(--space-2);-ms-flex:0 0 auto;flex:0 0 auto}.page-pc .quick-action{min-height:var(--tap-min);padding:0 var(--space-4);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:1px solid var(--line);border-radius:var(--radius-md);color:var(--text);background:var(--panel-strong);font:inherit;font-size:var(--text-sm);white-space:nowrap;cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}.page-pc .quick-action:active{transform:translateY(1px)}.page-pc .quick-action.primary{color:var(--on-accent);border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:var(--elev-1)}@media (min-width:1200px){.page-pc .ai-composer,.page-pc .autoplay-hub,.page-pc .practice-wrap{content-visibility:auto;contain-intrinsic-size:1px 620px}}.page-pc .practice-wrap{width:100%;margin:0 auto}.page-pc .practice-wrap .component-manual-list{margin-top:0}.page-pc .deferred-panels{min-height:300px}.page-pc .deferred-panel-placeholder{width:calc(100% - var(--page-gutter) * 2);max-width:var(--page-max);min-height:180px;margin:var(--space-5) auto;padding:var(--space-5);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:1px dashed var(--line);border-radius:var(--radius-xl);color:var(--muted);background:var(--panel);font-size:var(--text-sm)}@media (hover:hover) and (pointer:fine){.page-pc .quick-action:hover{border-color:var(--accent)}.page-pc .quick-action.primary:hover{border-color:transparent;filter:brightness(1.08)}}@media (min-width:641px) and (max-width:1199px){.page-pc .workspace-bar{padding:var(--space-4)}.page-pc .quick-actions{-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:end;justify-content:flex-end}}@media (max-width:640px){.page-pc .workspace-bar{-ms-flex-align:stretch;align-items:stretch;-ms-flex-direction:column;flex-direction:column;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg)}.page-pc .quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}.page-pc .quick-action{padding:0 var(--space-2)}}:root[data-wallpaper=off] .page-pc .app-bg{display:none}:root[data-density=compact] .page-pc .workspace-bar{margin-top:var(--space-2);padding:var(--space-3) var(--space-4)}:root[data-density=compact] .page-pc .ai-composer,:root[data-density=compact] .page-pc .autoplay-hub{margin-top:var(--space-4);margin-bottom:var(--space-4);padding:var(--space-4)}.component-page-header{width:calc(100% - var(--page-gutter) * 2);max-width:var(--page-max);min-height:68px;margin:calc(var(--safe-t) + var(--space-4)) auto 0;padding:var(--space-2) var(--space-3);-ms-flex-pack:justify;justify-content:space-between;gap:var(--space-4);position:sticky;top:calc(var(--safe-t) + var(--space-2));z-index:30;border:1px solid var(--line);border-radius:var(--radius-xl);color:var(--text);background:var(--panel);box-shadow:var(--elev-2),var(--glass-highlight);backdrop-filter:blur(var(--glass-blur)) saturate(150%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);box-sizing:border-box}.component-page-header,.component-page-header .trade-mark{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.component-page-header .trade-mark{min-width:0;gap:var(--space-3)}.component-page-header .brand-logo{width:44px;height:44px;-ms-flex:0 0 44px;flex:0 0 44px;object-fit:cover;border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--elev-1)}.component-page-header .trade-mark-copy{min-width:0}.component-page-header .trade-mark-txt{margin:0;color:var(--text);font-size:var(--text-lg);line-height:var(--leading-tight);font-weight:700;letter-spacing:var(--tracking-tight);white-space:nowrap}.component-page-header .brand-subtitle{display:block;margin-top:3px;color:var(--muted);font-size:var(--text-xs);line-height:1;letter-spacing:var(--tracking-caps);text-transform:uppercase}.component-page-header .menu{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;gap:var(--space-1);min-width:0}.component-page-header .menu,.component-page-header .menu-item{-ms-flex-align:center;align-items:center}.component-page-header .menu-item{min-height:var(--tap-min);padding:0 var(--space-4);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;border:1px solid transparent;border-radius:var(--radius-md);color:var(--muted);background:transparent;font:inherit;font-size:var(--text-sm);white-space:nowrap;cursor:pointer;transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}.component-page-header .menu-item-active{color:var(--text);border-color:var(--line);background:var(--accent-soft)}.component-page-header .autoplay-entry{color:var(--on-accent);background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:var(--elev-1)}.component-page-header .settings-entry{border-color:var(--line)}@media (hover:hover) and (pointer:fine){.component-page-header .menu-item:hover{color:var(--text);border-color:var(--line);background:var(--accent-soft)}.component-page-header .autoplay-entry:hover{color:var(--on-accent);border-color:transparent;filter:brightness(1.08)}}@media (min-width:641px) and (max-width:1199px){.component-page-header .menu-item{padding:0 var(--space-3)}}@media (max-width:640px){.component-page-header{min-height:60px;margin-top:calc(var(--safe-t) + var(--space-2));padding:var(--space-1) var(--space-2);border-radius:var(--radius-lg);gap:var(--space-2)}.component-page-header .brand-logo{width:38px;height:38px;-ms-flex-preferred-size:38px;flex-basis:38px}.component-page-header .trade-mark-txt{font-size:var(--text-md)}.component-page-header .brand-subtitle{display:none}.component-page-header .menu{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.component-page-header .menu::-webkit-scrollbar{display:none}.component-page-header .menu-item{padding:0 var(--space-3);font-size:var(--text-xs)}}@media (max-width:400px){.component-page-header .trade-mark-copy{display:none}}.component-page-footer{width:calc(100% - var(--page-gutter) * 2);max-width:var(--page-max);min-height:60px;margin:var(--space-6) auto calc(var(--safe-b) + var(--space-4));padding:var(--space-3) var(--space-4);-ms-flex-pack:justify;justify-content:space-between;gap:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-lg);color:var(--muted);background:var(--panel);box-shadow:var(--elev-1),var(--glass-highlight);font-size:var(--text-sm)}.component-page-footer,.component-page-footer .footer-brand{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.component-page-footer .footer-brand{gap:var(--space-2);color:var(--text);font-weight:600}.component-page-footer .brand-dot{width:9px;height:9px;-ms-flex:0 0 9px;flex:0 0 9px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 0 10px var(--accent-glow)}.component-page-footer .footer-note{text-align:right}@media (max-width:640px){.component-page-footer{-ms-flex-direction:column;flex-direction:column;gap:var(--space-1);margin-bottom:calc(var(--safe-b) + var(--space-3));text-align:center}.component-page-footer .footer-note{text-align:center}}.component-autopiano{--key-h:200px;width:100%;position:relative;color:var(--text)}.component-autopiano .piano-shell{width:calc(100% - var(--page-gutter) * 2);max-width:var(--page-max);margin:0 auto var(--space-3);border:1px solid var(--line);border-radius:var(--radius-2xl);position:relative;overflow:hidden;opacity:0;transform:translateY(12px) scale(.995);background:linear-gradient(180deg,#10151f,#070a11 46%,var(--key-bed));box-shadow:var(--elev-4),inset 0 1px 0 hsla(0,0%,100%,.08);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}.component-autopiano .piano-shell.visible{opacity:1;transform:none}.component-autopiano .piano-band{height:56px;padding:0 var(--space-4);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;gap:var(--space-3);position:relative;background:linear-gradient(180deg,#1b2230,#0c111b);box-shadow:inset 0 -1px 0 hsla(0,0%,100%,.06)}.component-autopiano .brand-mark{min-width:0;-ms-flex:0 1 auto;flex:0 1 auto;overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline;gap:var(--space-2);color:#fff;font-size:var(--text-sm);font-weight:800;letter-spacing:var(--tracking-caps);white-space:nowrap}.component-autopiano .brand-mark em{font-style:normal;color:var(--accent-2);font-size:var(--text-xs);font-weight:700}.component-autopiano .band-actions{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--space-2);-ms-flex:0 0 auto;flex:0 0 auto}.component-autopiano .octave-btn{width:38px;height:34px;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:1px solid hsla(0,0%,100%,.12);border-radius:var(--radius-sm);color:#cbd5e1;background:hsla(0,0%,100%,.05);font-size:var(--text-sm);cursor:pointer;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}.component-autopiano .octave-btn:disabled{opacity:.3;cursor:default}.component-autopiano .octave-readout{min-width:86px;padding:0 var(--space-2);color:#94a3b8;font-size:var(--text-xs);text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}.component-autopiano .band-hint,.component-autopiano .band-status{min-width:0;-ms-flex:0 1 auto;flex:0 1 auto;font-size:var(--text-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.component-autopiano .band-hint{color:#94a3b8}.component-autopiano .band-status{color:var(--accent-2)}.component-autopiano .felt{height:5px;background:linear-gradient(180deg,var(--accent),rgba(0,0,0,.55));opacity:.55}.component-autopiano .keybed{height:var(--key-h);position:relative;background:var(--key-bed);-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}.component-autopiano .piano-key{position:absolute;top:0;padding:0;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;-ms-touch-action:none;touch-action:none}.component-autopiano .wkey{height:100%;border-radius:0 0 var(--radius-sm) var(--radius-sm);background:var(--key-white-face);box-shadow:inset 0 1px 0 hsla(0,0%,100%,.9),inset -1px 0 0 var(--key-white-edge),inset 0 -14px 18px -12px rgba(15,23,42,.34),0 6px 10px rgba(0,0,0,.4);transition:transform var(--dur-fast) var(--ease-out),filter var(--dur-fast) var(--ease-out);transform-origin:top center}.component-autopiano .wkey:after{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;border-radius:0 0 var(--radius-sm) var(--radius-sm);background:linear-gradient(180deg,rgba(15,23,42,.06),rgba(15,23,42,.16))}.component-autopiano .wkey .keytip{position:absolute;left:0;right:0;bottom:14px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;gap:3px;color:#64748b;font-size:var(--text-xs);pointer-events:none}.component-autopiano .wkey .notename{color:var(--accent);font-weight:800}.component-autopiano .bkey{height:62%;border-radius:0 0 var(--radius-xs) var(--radius-xs);background:var(--key-black-face);box-shadow:inset 0 1px 0 hsla(0,0%,100%,.22),inset 0 -6px 8px -6px hsla(0,0%,100%,.18),0 6px 12px rgba(0,0,0,.6);transition:transform var(--dur-fast) var(--ease-out),filter var(--dur-fast) var(--ease-out);transform-origin:top center;z-index:3}.component-autopiano .bkey .keytip{position:absolute;left:0;right:0;bottom:8px;color:#94a3b8;font-size:10px;line-height:1.1;text-align:center;pointer-events:none}.component-autopiano .wkey[data-down]{transform:scaleY(.982);filter:brightness(.93);box-shadow:inset 0 1px 0 hsla(0,0%,100%,.7),inset -1px 0 0 var(--key-white-edge),0 2px 4px rgba(0,0,0,.34)}.component-autopiano .bkey[data-down]{transform:scaleY(.965);filter:brightness(1.35)}.component-autopiano .wkey[data-auto]{background:linear-gradient(180deg,#fff,var(--accent-2));box-shadow:inset 0 1px 0 hsla(0,0%,100%,.9),0 0 26px var(--accent-glow)}.component-autopiano .bkey[data-auto]{background:linear-gradient(180deg,var(--accent-2),var(--accent));box-shadow:0 0 22px var(--accent-glow)}.component-autopiano .wkey.guide-key{z-index:2}.component-autopiano .bkey.guide-key{z-index:4}.component-autopiano .wkey.guide-key{background:linear-gradient(180deg,#fff,#fde9a9);box-shadow:inset 0 0 0 2px var(--warn),0 0 24px rgba(251,191,36,.45)}.component-autopiano .bkey.guide-key{box-shadow:inset 0 0 0 2px var(--warn),0 0 24px rgba(251,191,36,.5)}.component-autopiano.high-contrast-guide .wkey.guide-key{background:linear-gradient(180deg,#fff,#facc15);box-shadow:inset 0 0 0 3px #78350f,0 0 34px #facc15}.component-autopiano.high-contrast-guide .bkey.guide-key{background:linear-gradient(180deg,#fef08a,#ca8a04);box-shadow:inset 0 0 0 3px #fff,0 0 34px #facc15}.component-autopiano.high-contrast-guide .piano-key.wrong-key{animation-duration:.22s}.component-autopiano .piano-key.wrong-key{animation:wrong-key-flash .3s var(--ease-out) 2}@keyframes wrong-key-flash{50%{filter:brightness(1.1) saturate(1.6) hue-rotate(-18deg);box-shadow:inset 0 0 0 2px var(--danger)}}.component-autopiano .piano-options{width:calc(100% - var(--page-gutter) * 2);max-width:var(--page-max);margin:0 auto var(--space-4);padding:var(--space-2) var(--space-3);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--space-2) var(--space-4);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);box-shadow:var(--glass-highlight)}.component-autopiano .range-note{margin-right:auto;color:var(--muted);font-size:var(--text-xs)}.component-autopiano .switch{min-height:var(--tap-min);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:var(--space-2);color:var(--muted);font-size:var(--text-sm);cursor:pointer}.component-autopiano .switch>input{position:absolute;width:1px;height:1px;opacity:0}.component-autopiano .switch i{width:40px;height:24px;-ms-flex:0 0 40px;flex:0 0 40px;border-radius:var(--radius-pill);position:relative;background:rgba(148,163,184,.3);transition:background var(--dur-base) var(--ease-out)}.component-autopiano .switch i:after{content:"";width:20px;height:20px;position:absolute;top:2px;left:2px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform var(--dur-base) var(--ease-spring)}.component-autopiano .switch>input:checked+i{background:var(--accent)}.component-autopiano .switch>input:checked+i:after{transform:translateX(16px)}.component-autopiano .switch>input:focus-visible+i{outline:2px solid var(--accent);outline-offset:3px}@media (hover:hover) and (pointer:fine){.component-autopiano .octave-btn:hover:not(:disabled){color:#fff;background:hsla(0,0%,100%,.12)}.component-autopiano .wkey:hover{filter:brightness(.985)}}@media (min-width:641px) and (max-width:1199px){.component-autopiano{--key-h:244px}.component-autopiano .piano-band{height:60px}}@media (max-width:640px){.component-autopiano{--key-h:196px}.component-autopiano .piano-band{height:54px;padding:0 var(--space-3);-ms-flex-pack:center;justify-content:center}.component-autopiano .band-hint,.component-autopiano .brand-mark{display:none}.component-autopiano .octave-readout{min-width:78px}.component-autopiano .piano-options{-ms-flex-pack:justify;justify-content:space-between}.component-autopiano .range-note{width:100%;margin:0 0 var(--space-1)}}@media (max-height:520px){.component-autopiano{--key-h:148px}.component-autopiano .piano-band{height:46px}}.score-container.component-manual-list{--judge-x:18%;--beat-gap:118px;--stage-h:172px;width:calc(100% - var(--page-gutter) * 2);max-width:var(--page-max);margin:0 auto var(--space-5);padding:var(--space-5);color:var(--text);border:1px solid var(--line);border-radius:var(--radius-2xl);background:linear-gradient(160deg,var(--accent-soft),transparent 32%),var(--panel);box-shadow:var(--elev-2),var(--glass-highlight)}.score-container.component-manual-list *{box-sizing:border-box}.score-container.component-manual-list button,.score-container.component-manual-list input,.score-container.component-manual-list select{font:inherit}.score-container.component-manual-list .coach-head{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:justify;justify-content:space-between;gap:var(--space-5)}.score-container.component-manual-list .coach-actions{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--space-2)}.score-container.component-manual-list .coach-kicker{margin:0 0 var(--space-2);color:var(--accent);font-size:var(--text-xs);font-weight:800;letter-spacing:var(--tracking-caps)}.score-container.component-manual-list h2{margin:0;font-size:var(--text-xl);letter-spacing:var(--tracking-tight)}.score-container.component-manual-list .coach-subtitle{margin:var(--space-2) 0 0;color:var(--muted);font-size:var(--text-sm)}.score-container.component-manual-list .focus-button,.score-container.component-manual-list .score-select{min-height:var(--tap-min);border:1px solid var(--line);border-radius:var(--radius-md);color:var(--text);background:var(--panel-strong);transition:border-color var(--dur-fast) var(--ease-out)}.score-container.component-manual-list .score-select{min-width:230px;max-width:320px;padding:0 var(--space-3);outline:none}.score-container.component-manual-list .focus-button{padding:0 var(--space-4);white-space:nowrap;cursor:pointer}.score-container.component-manual-list .practice-toolbar{margin-top:var(--space-4);padding:var(--space-2);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--space-2);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel-strong)}.score-container.component-manual-list .display-switch,.score-container.component-manual-list .mode-switch{display:-ms-flexbox;display:flex;padding:3px;border-radius:var(--radius-md);background:var(--track)}.score-container.component-manual-list .display-switch{gap:3px}.score-container.component-manual-list .display-button,.score-container.component-manual-list .mode-button,.score-container.component-manual-list .speed-button,.score-container.component-manual-list .tool-button{min-height:38px;padding:0 var(--space-3);border:1px solid transparent;border-radius:var(--radius-sm);color:var(--muted);background:transparent;cursor:pointer;white-space:nowrap;transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}.score-container.component-manual-list .display-button[aria-pressed=true],.score-container.component-manual-list .mode-button[aria-pressed=true],.score-container.component-manual-list .speed-button[aria-pressed=true]{color:var(--text);border-color:var(--accent);background:var(--accent-soft)}.score-container.component-manual-list .tool-button{border-color:var(--line);color:var(--text)}.score-container.component-manual-list .tool-button.primary{min-width:104px;color:var(--on-accent);border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent-2));font-weight:700;box-shadow:var(--elev-1)}.score-container.component-manual-list .tool-button.primary:active{transform:translateY(1px)}.score-container.component-manual-list .tempo-control{min-width:200px;-ms-flex:1 1 200px;flex:1 1 200px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--space-2);color:var(--muted);font-size:var(--text-xs)}.score-container.component-manual-list .tempo-control input{min-width:80px;-ms-flex:1;flex:1;accent-color:var(--accent)}.score-container.component-manual-list .tempo-control strong{min-width:62px;color:var(--text);font-variant-numeric:tabular-nums}.score-container.component-manual-list .speed-group{display:-ms-flexbox;display:flex;gap:3px;margin-left:auto}.score-container.component-manual-list .metronome-toggle{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--space-2);color:var(--muted);font-size:var(--text-xs);white-space:nowrap;cursor:pointer}.score-container.component-manual-list .metronome-toggle input{width:18px;height:18px;accent-color:var(--accent)}.score-container.component-manual-list .assist-toggle{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--space-2);color:var(--ok);font-size:var(--text-xs);white-space:nowrap;cursor:pointer}.score-container.component-manual-list .assist-toggle input{width:18px;height:18px;accent-color:var(--accent)}.score-container.component-manual-list .rhythm-stage{height:var(--stage-h);margin-top:var(--space-3);position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(90deg,transparent 17.8%,rgba(251,191,36,.14) 18%,transparent 18.2%),repeating-linear-gradient(90deg,transparent 13.9%,rgba(148,163,184,.07) 14%,transparent 14.2%),var(--track)}.score-container.component-manual-list .note-layer{position:absolute;inset:0;z-index:1;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}.score-container.component-manual-list .stage-label{position:absolute;top:var(--space-3);left:var(--space-3);z-index:2;max-width:calc(var(--judge-x) - 24px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--muted);font-size:var(--text-xs)}.score-container.component-manual-list .judgement-line{width:2px;height:100%;position:absolute;left:var(--judge-x);top:0;z-index:2;background:var(--warn);box-shadow:0 0 16px rgba(251,191,36,.5)}.score-container.component-manual-list .judgement-line:after{content:"\73B0\5728";position:absolute;top:var(--space-3);left:7px;color:var(--warn);font-size:var(--text-xs);font-weight:700;white-space:nowrap}.score-container.component-manual-list .hit-window{height:100%;position:absolute;top:0;z-index:1;pointer-events:none;border-left:1px solid rgba(52,211,153,.4);border-right:1px solid rgba(52,211,153,.4);background:linear-gradient(90deg,rgba(52,211,153,.02),rgba(52,211,153,.12),rgba(52,211,153,.02))}.score-container.component-manual-list .hit-window span{position:absolute;left:50%;bottom:var(--space-2);transform:translateX(-50%);color:var(--ok);font-size:var(--text-xs);white-space:nowrap}.score-container.component-manual-list .beat-orb{width:10px;height:10px;position:absolute;top:var(--space-3);right:var(--space-3);border-radius:50%;background:var(--muted);transition:transform var(--dur-fast) var(--ease-spring),background var(--dur-fast)}.score-container.component-manual-list .beat-orb.active{background:var(--warn);box-shadow:0 0 18px var(--warn);transform:scale(1.4)}.score-container.component-manual-list .timeline-note{width:52px;height:62px;position:absolute;left:var(--judge-x);top:50%;margin-top:-31px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:1px solid var(--line-strong);border-radius:var(--radius-md);color:var(--text);background:var(--panel-strong);font-size:var(--text-xl);font-weight:800;text-transform:uppercase;transition:border-color var(--dur-fast),background var(--dur-fast),color var(--dur-fast);transform:translate3d(calc(var(--beat-gap) * (var(--note-beat) - var(--playhead, 0))),0,0);will-change:transform;contain:layout paint style;-webkit-backface-visibility:hidden;backface-visibility:hidden}.score-container.component-manual-list .timeline-note.current{color:#111827;border-color:var(--warn);background:var(--warn);box-shadow:0 10px 28px rgba(251,191,36,.3)}.score-container.component-manual-list .timeline-note.done{color:var(--ok);border-color:rgba(52,211,153,.4);opacity:.4}.score-container.component-manual-list .timeline-note.missed{color:var(--danger);border-color:var(--danger);opacity:.5}.score-container.component-manual-list .timeline-note small{position:absolute;bottom:-22px;color:var(--muted);font-size:var(--text-xs);font-weight:600;white-space:nowrap}.score-container.component-manual-list .timeline-note .note-sub{position:absolute;top:5px;color:var(--muted);font-size:10px;font-weight:700;text-transform:none}.score-container.component-manual-list .countdown{position:absolute;inset:0;z-index:5;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:#fff;background:rgba(5,7,13,.8);font-size:56px;font-weight:800;font-variant-numeric:tabular-nums;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.score-container.component-manual-list .timing-badge{position:absolute;right:34px;top:var(--space-2);z-index:2;padding:4px var(--space-2);border:1px solid var(--line);border-radius:var(--radius-pill);color:var(--muted);background:var(--panel);font-size:var(--text-xs);white-space:nowrap}.score-container.component-manual-list .practice-bottom{margin-top:var(--space-3);display:grid;grid-template-columns:minmax(170px,.7fr) minmax(280px,1.6fr) minmax(240px,1fr);gap:var(--space-3);-ms-flex-align:stretch;align-items:stretch}.score-container.component-manual-list .ai-coach,.score-container.component-manual-list .next-card,.score-container.component-manual-list .progress-card{min-width:0;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel-strong)}.score-container.component-manual-list .next-card{padding:var(--space-3);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--space-3)}.score-container.component-manual-list .next-key{width:56px;height:56px;-ms-flex:0 0 56px;flex:0 0 56px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:var(--radius-md);color:#111827;background:var(--warn);font-size:var(--text-2xl);font-weight:800;text-transform:uppercase;box-shadow:0 6px 18px rgba(251,191,36,.28)}.score-container.component-manual-list .next-key-wrap{display:grid;justify-items:center;gap:2px}.score-container.component-manual-list .next-key-name{color:var(--muted);font-size:var(--text-xs);font-weight:700}.score-container.component-manual-list .next-copy{min-width:0}.score-container.component-manual-list .next-copy span{display:block;color:var(--muted);font-size:var(--text-xs)}.score-container.component-manual-list .next-copy strong{display:block;margin-top:var(--space-1);font-size:var(--text-sm)}.score-container.component-manual-list .progress-card{padding:var(--space-3)}.score-container.component-manual-list .progress-row{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;gap:var(--space-3);color:var(--muted);font-size:var(--text-xs);white-space:nowrap}.score-container.component-manual-list .progress-bar{height:8px;margin:var(--space-2) 0 var(--space-3);overflow:hidden;border-radius:var(--radius-pill);background:var(--track)}.score-container.component-manual-list .progress-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width var(--dur-base) var(--ease-out)}.score-container.component-manual-list .metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-1)}.score-container.component-manual-list .metric{padding:var(--space-2) var(--space-1);border-radius:var(--radius-sm);background:var(--track);text-align:center}.score-container.component-manual-list .metric strong{display:block;margin-bottom:2px;font-size:var(--text-lg);font-variant-numeric:tabular-nums}.score-container.component-manual-list .metric span{display:block;color:var(--muted);font-size:var(--text-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.score-container.component-manual-list .ai-coach{padding:var(--space-3) var(--space-4);border-left:3px solid var(--accent)}.score-container.component-manual-list .ai-title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--space-2);color:var(--accent);font-size:var(--text-xs);font-weight:800;letter-spacing:var(--tracking-wide)}.score-container.component-manual-list .ai-dot{width:7px;height:7px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 10px var(--accent-2)}.score-container.component-manual-list .ai-coach p{margin:var(--space-2) 0 0;color:var(--muted);font-size:var(--text-sm);line-height:var(--leading-normal)}.score-container.component-manual-list .feedback{margin:var(--space-3) 2px 0;min-height:20px;color:var(--muted);font-size:var(--text-sm)}.score-container.component-manual-list .feedback.correct,.score-container.component-manual-list .feedback.perfect{color:var(--ok)}.score-container.component-manual-list .feedback.early{color:var(--info)}.score-container.component-manual-list .feedback.late,.score-container.component-manual-list .feedback.wrong{color:var(--danger)}.score-container.component-manual-list .feedback.complete{color:var(--warn)}.score-container.component-manual-list .timing-guide{margin:var(--space-2) 2px 0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--space-2);color:var(--muted);font-size:var(--text-xs)}.score-container.component-manual-list .timing-guide i{width:7px;height:7px;-ms-flex:0 0 7px;flex:0 0 7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px rgba(52,211,153,.7)}.score-container.component-manual-list .shortcut-hint{margin:var(--space-2) 2px 0;color:var(--muted);font-size:var(--text-xs)}.score-container.component-manual-list kbd{padding:2px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:var(--radius-xs);color:var(--text);background:var(--panel-strong);font:var(--text-xs)/1.2 inherit}.score-container.component-manual-list:-webkit-full-screen{--stage-h:clamp(200px,30vh,320px);width:100%;max-width:none;min-height:100%;margin:0;padding:clamp(16px,3vw,40px) clamp(16px,3vw,40px) calc(clamp(16px, 3vw, 40px) + var(--safe-b));display:flex;flex-direction:column;justify-content:center;border:0;border-radius:0;background:var(--bg)}.score-container.component-manual-list:-ms-fullscreen{--stage-h:clamp(200px,30vh,320px);width:100%;max-width:none;min-height:100%;margin:0;padding:clamp(16px,3vw,40px) clamp(16px,3vw,40px) calc(clamp(16px, 3vw, 40px) + var(--safe-b));display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;border:0;border-radius:0;background:var(--bg)}.score-container.component-manual-list:fullscreen{--stage-h:clamp(200px,30vh,320px);width:100%;max-width:none;min-height:100%;margin:0;padding:clamp(16px,3vw,40px) clamp(16px,3vw,40px) calc(clamp(16px, 3vw, 40px) + var(--safe-b));display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;border:0;border-radius:0;background:var(--bg)}.score-container.component-manual-list:-webkit-full-screen .coach-subtitle{font-size:var(--text-md)}.score-container.component-manual-list:-ms-fullscreen .coach-subtitle{font-size:var(--text-md)}.score-container.component-manual-list:fullscreen .coach-subtitle{font-size:var(--text-md)}.score-container.component-manual-list:-webkit-full-screen .timeline-note{width:72px;height:82px;margin-top:-41px;font-size:32px}.score-container.component-manual-list:-ms-fullscreen .timeline-note{width:72px;height:82px;margin-top:-41px;font-size:32px}.score-container.component-manual-list:fullscreen .timeline-note{width:72px;height:82px;margin-top:-41px;font-size:32px}.score-container.component-manual-list:-webkit-full-screen .timeline-note .note-sub{top:8px;font-size:var(--text-xs)}.score-container.component-manual-list:-ms-fullscreen .timeline-note .note-sub{top:8px;font-size:var(--text-xs)}.score-container.component-manual-list:fullscreen .timeline-note .note-sub{top:8px;font-size:var(--text-xs)}.score-container.component-manual-list:-webkit-full-screen .next-key{width:76px;height:76px;flex-basis:76px;font-size:34px}.score-container.component-manual-list:-ms-fullscreen .next-key{width:76px;height:76px;-ms-flex-preferred-size:76px;flex-basis:76px;font-size:34px}.score-container.component-manual-list:fullscreen .next-key{width:76px;height:76px;-ms-flex-preferred-size:76px;flex-basis:76px;font-size:34px}.score-container.component-manual-list:-webkit-full-screen .next-copy strong{font-size:var(--text-lg)}.score-container.component-manual-list:-ms-fullscreen .next-copy strong{font-size:var(--text-lg)}.score-container.component-manual-list:fullscreen .next-copy strong{font-size:var(--text-lg)}.score-container.component-manual-list:-webkit-full-screen .feedback{font-size:var(--text-md)}.score-container.component-manual-list:-ms-fullscreen .feedback{font-size:var(--text-md)}.score-container.component-manual-list:fullscreen .feedback{font-size:var(--text-md)}@media (hover:hover) and (pointer:fine){.score-container.component-manual-list .focus-button:hover,.score-container.component-manual-list .score-select:hover,.score-container.component-manual-list .tool-button:hover{border-color:var(--accent)}.score-container.component-manual-list .display-button:hover,.score-container.component-manual-list .mode-button:hover,.score-container.component-manual-list .speed-button:hover{color:var(--text)}}@media (min-width:641px) and (max-width:1199px){.score-container.component-manual-list{padding:var(--space-4);--stage-h:168px}.score-container.component-manual-list .practice-bottom{grid-template-columns:minmax(160px,.7fr) minmax(0,1.4fr)}.score-container.component-manual-list .ai-coach{grid-column:1/-1}.score-container.component-manual-list .coach-head{-ms-flex-align:center;align-items:center}.score-container.component-manual-list .score-select{min-width:180px}}@media (max-width:640px){.score-container.component-manual-list{padding:var(--space-3);border-radius:var(--radius-xl);--stage-h:152px}.score-container.component-manual-list .coach-head{-ms-flex-direction:column;flex-direction:column;gap:var(--space-3)}.score-container.component-manual-list .coach-actions{width:100%}.score-container.component-manual-list .score-select{-ms-flex:1;flex:1;min-width:0;max-width:none}.score-container.component-manual-list .practice-toolbar{-ms-flex-align:stretch;align-items:stretch}.score-container.component-manual-list .mode-switch{width:100%}.score-container.component-manual-list .mode-button{-ms-flex:1;flex:1}.score-container.component-manual-list .display-switch{margin-left:auto}.score-container.component-manual-list .tempo-control{-ms-flex-order:5;order:5;-ms-flex-preferred-size:100%;flex-basis:100%}.score-container.component-manual-list .speed-group{margin-left:0}.score-container.component-manual-list .speed-button,.score-container.component-manual-list .tool-button{-ms-flex:1;flex:1}.score-container.component-manual-list .timing-badge{display:none}.score-container.component-manual-list .timeline-note{width:44px;height:54px;margin-top:-27px;font-size:var(--text-lg)}.score-container.component-manual-list .practice-bottom{grid-template-columns:1fr}.score-container.component-manual-list .metrics{gap:var(--space-1)}.score-container.component-manual-list .shortcut-hint{display:none}.score-container.component-manual-list .timing-guide{-ms-flex-pack:center;justify-content:center}}@media (hover:none) and (pointer:coarse){.score-container.component-manual-list .shortcut-hint{display:none}.score-container.component-manual-list .assist-toggle,.score-container.component-manual-list .display-button,.score-container.component-manual-list .metronome-toggle,.score-container.component-manual-list .mode-button,.score-container.component-manual-list .speed-button,.score-container.component-manual-list .tool-button{min-height:var(--tap-min)}}.autoplay-hub{width:calc(100% - var(--page-gutter) * 2);max-width:var(--page-max);margin:var(--space-5) auto;padding:var(--space-5);color:var(--text);border:1px solid var(--line);border-radius:var(--radius-2xl);background:var(--panel);box-shadow:var(--elev-2),var(--glass-highlight)}.autoplay-hub *{box-sizing:border-box}.autoplay-hub button,.autoplay-hub input{font:inherit}.autoplay-hub .hub-head{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:justify;justify-content:space-between;gap:var(--space-5);margin-bottom:var(--space-5)}.autoplay-hub .eyebrow{margin:0 0 var(--space-2);color:var(--accent);font-size:var(--text-xs);font-weight:800;letter-spacing:var(--tracking-caps)}.autoplay-hub h2{margin:0;font-size:var(--text-xl);letter-spacing:var(--tracking-tight)}.autoplay-hub .desc{margin:var(--space-2) 0 0;color:var(--muted);font-size:var(--text-sm)}.autoplay-hub .playing-badge{padding:var(--space-2) var(--space-3);-ms-flex:0 0 auto;flex:0 0 auto;border-radius:var(--radius-pill);color:var(--accent);background:var(--accent-soft);font-size:var(--text-xs);white-space:nowrap}.autoplay-hub .hub-tools{-ms-flex-align:center;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}.autoplay-hub .hub-tools,.autoplay-hub .tabs{display:-ms-flexbox;display:flex}.autoplay-hub .tabs{gap:var(--space-1);padding:3px;border-radius:var(--radius-md);background:var(--track)}.autoplay-hub .tab{min-height:38px;padding:0 var(--space-4);border:1px solid transparent;border-radius:var(--radius-sm);color:var(--muted);background:transparent;cursor:pointer;white-space:nowrap;transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}.autoplay-hub .tab[aria-selected=true]{color:var(--text);border-color:var(--accent);background:var(--accent-soft)}.autoplay-hub .search{min-width:180px;height:40px;margin-left:auto;padding:0 var(--space-3);color:var(--text);border:1px solid var(--line);border-radius:var(--radius-md);outline:none;background:var(--panel-strong);transition:border-color var(--dur-fast) var(--ease-out)}.autoplay-hub .search:focus{border-color:var(--accent)}.autoplay-hub .song-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-3)}.autoplay-hub .song-card{min-width:0;min-height:104px;padding:var(--space-3) var(--space-4);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:justify;justify-content:space-between;gap:var(--space-2);border:1px solid var(--line);border-radius:var(--radius-lg);color:var(--text);background:var(--panel-strong);text-align:left;cursor:pointer;transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}.autoplay-hub .song-card:active{transform:scale(.985)}.autoplay-hub .song-card.playing{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 26px var(--accent-glow)}.autoplay-hub .song-card:disabled{opacity:.6;cursor:progress}.autoplay-hub .song-name{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--text-md);font-weight:700}.autoplay-hub .song-meta{color:var(--muted);font-size:var(--text-xs)}.autoplay-hub .play-action{color:var(--accent);font-size:var(--text-xs);font-weight:600}.autoplay-hub .empty{padding:var(--space-7) var(--space-4);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;gap:var(--space-3);border:1px dashed var(--line-strong);border-radius:var(--radius-lg);color:var(--muted);background:var(--track);text-align:center;font-size:var(--text-sm)}.autoplay-hub .empty button{min-height:var(--tap-min);padding:0 var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);color:var(--text);background:var(--panel-strong);cursor:pointer}.autoplay-hub .status-bar{margin-top:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm)}.autoplay-hub .status-bar.loading{color:var(--accent);background:var(--accent-soft)}.autoplay-hub .status-bar.error{color:var(--danger);border:1px solid var(--danger);background:transparent}.autoplay-hub .player-bar{margin-top:var(--space-4);padding:var(--space-3) var(--space-4);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--space-3);border:1px solid var(--accent);border-radius:var(--radius-lg);background:var(--accent-soft)}.autoplay-hub .player-icon{width:36px;height:36px;-ms-flex:0 0 36px;flex:0 0 36px;object-fit:contain}.autoplay-hub .player-copy{min-width:0;-ms-flex:1;flex:1}.autoplay-hub .player-copy strong{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.autoplay-hub .player-copy span{display:block;color:var(--muted);font-size:var(--text-xs)}.autoplay-hub .stop-button{min-height:var(--tap-min);padding:0 var(--space-4);-ms-flex:0 0 auto;flex:0 0 auto;border:1px solid var(--line);border-radius:var(--radius-md);color:var(--text);background:var(--panel-strong);cursor:pointer}@media (hover:hover) and (pointer:fine){.autoplay-hub .song-card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--elev-2)}.autoplay-hub .tab:hover{color:var(--text)}}@media (min-width:641px) and (max-width:1199px){.autoplay-hub{padding:var(--space-4)}.autoplay-hub .song-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}@media (max-width:640px){.autoplay-hub{padding:var(--space-4);border-radius:var(--radius-xl)}.autoplay-hub .hub-head{gap:var(--space-3)}.autoplay-hub .hub-head,.autoplay-hub .hub-tools{-ms-flex-direction:column;flex-direction:column}.autoplay-hub .hub-tools{-ms-flex-align:stretch;align-items:stretch}.autoplay-hub .tabs{overflow-x:auto}.autoplay-hub .tab{-ms-flex:1;flex:1;padding:0 var(--space-2)}.autoplay-hub .search{width:100%;margin-left:0}.autoplay-hub .song-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-2)}.autoplay-hub .song-card{min-height:92px;padding:var(--space-3)}}@media (hover:none) and (pointer:coarse){.autoplay-hub .empty button,.autoplay-hub .stop-button,.autoplay-hub .tab{min-height:var(--tap-min)}}.ai-composer{width:calc(100% - var(--page-gutter) * 2);max-width:var(--page-max);margin:var(--space-5) auto var(--space-6);padding:var(--space-5);color:var(--text);border:1px solid var(--line);border-top:2px solid var(--accent);border-radius:var(--radius-2xl);background:linear-gradient(150deg,var(--accent-soft),transparent 30%),var(--panel);box-shadow:var(--elev-2),var(--glass-highlight)}.ai-composer *{box-sizing:border-box}.ai-composer button,.ai-composer input,.ai-composer select{font:inherit}.ai-composer .composer-head{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;gap:var(--space-5)}.ai-composer .eyebrow{margin:0 0 var(--space-2);color:var(--accent);font-size:var(--text-xs);font-weight:800;letter-spacing:var(--tracking-caps)}.ai-composer h2{margin:0;font-size:var(--text-xl);letter-spacing:var(--tracking-tight)}.ai-composer .composer-desc{max-width:60ch;margin:var(--space-2) 0 0;color:var(--muted);font-size:var(--text-sm);line-height:var(--leading-normal)}.ai-composer .composer-actions{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--space-2);-ms-flex:0 0 auto;flex:0 0 auto}.ai-composer .model-chip{max-width:220px;padding:6px var(--space-3);overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-pill);color:var(--muted);background:var(--panel-strong);font-size:var(--text-xs);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;text-overflow:ellipsis}.ai-composer .expand-button{min-height:var(--tap-min);padding:0 var(--space-4);-ms-flex:0 0 auto;flex:0 0 auto;border:1px solid var(--line);border-radius:var(--radius-md);color:var(--text);background:var(--panel-strong);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out)}.ai-composer .composer-grid{display:grid;margin-top:var(--space-5);grid-template-columns:minmax(260px,.8fr) minmax(0,1.6fr);gap:var(--space-4)}.ai-composer .control-panel,.ai-composer .result-panel{min-width:0;border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--panel-strong)}.ai-composer .control-panel{padding:var(--space-4)}.ai-composer .control-group{margin-bottom:var(--space-4)}.ai-composer .control-group:last-child{margin-bottom:0}.ai-composer .control-label{display:block;margin-bottom:var(--space-2);color:var(--muted);font-size:var(--text-xs);font-weight:700}.ai-composer .segmented{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}.ai-composer .choice,.ai-composer .primary,.ai-composer .secondary{border:1px solid var(--line);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}.ai-composer .choice{min-height:var(--tap-min);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);color:var(--muted);background:transparent}.ai-composer .choice.active{color:var(--text);border-color:var(--accent);background:var(--accent-soft)}.ai-composer select{width:100%;height:var(--tap-min);padding:0 var(--space-3);color:var(--text);border:1px solid var(--line);border-radius:var(--radius-md);outline:none;background:var(--panel-strong)}.ai-composer .range-row{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--space-3)}.ai-composer input[type=range]{min-width:0;-ms-flex:1;flex:1;accent-color:var(--accent)}.ai-composer .tempo-value{min-width:68px;color:var(--text);font-size:var(--text-sm);text-align:right;font-variant-numeric:tabular-nums}.ai-composer .result-panel{min-height:320px;padding:var(--space-5);-ms-flex-direction:column;flex-direction:column}.ai-composer .result-panel,.ai-composer .result-top{display:-ms-flexbox;display:flex}.ai-composer .result-top{-ms-flex-pack:justify;justify-content:space-between;gap:var(--space-4)}.ai-composer .result-kicker{color:var(--muted);font-size:var(--text-xs)}.ai-composer .result-title{margin:var(--space-2) 0 0;font-size:var(--text-lg)}.ai-composer .mood-orb{width:56px;height:56px;-ms-flex:0 0 56px;flex:0 0 56px;border-radius:var(--radius-lg);background:radial-gradient(circle at 30% 28%,#fff,var(--accent) 26%,transparent 72%);box-shadow:0 0 30px var(--accent-glow)}.ai-composer .note-track{min-height:124px;margin:var(--space-5) 0 var(--space-4);padding:var(--space-4);gap:var(--space-2);overflow-x:auto;border-radius:var(--radius-lg);background:var(--track);-webkit-overflow-scrolling:touch}.ai-composer .note,.ai-composer .note-track{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end}.ai-composer .note{min-width:44px;height:var(--note-height);padding:var(--space-2) var(--space-1);-ms-flex-pack:center;justify-content:center;border-radius:var(--radius-sm) var(--radius-sm) var(--radius-xs) var(--radius-xs);color:var(--on-accent);background:linear-gradient(180deg,var(--accent-2),var(--accent));font-size:var(--text-xs);font-weight:700;box-shadow:var(--elev-1)}.ai-composer .insight{margin:auto 0 var(--space-4);padding:var(--space-3) var(--space-4);border-left:3px solid var(--accent);border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--muted);background:var(--accent-soft);font-size:var(--text-sm);line-height:var(--leading-normal)}.ai-composer .actions{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--space-2)}.ai-composer .primary,.ai-composer .secondary{min-height:var(--tap-min);padding:0 var(--space-4);border-radius:var(--radius-md)}.ai-composer .primary{color:var(--on-accent);border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent-2));font-weight:700;box-shadow:var(--elev-1)}.ai-composer .primary:active,.ai-composer .secondary:active{transform:translateY(1px)}.ai-composer .secondary{color:var(--text);background:transparent}.ai-composer button:disabled{opacity:.5;cursor:not-allowed;transform:none}.ai-composer .generation-status,.ai-composer .tip{margin:var(--space-3) 0 0;color:var(--muted);font-size:var(--text-xs)}.ai-composer .generation-status.error{color:var(--danger)}@media (hover:hover) and (pointer:fine){.ai-composer .choice:hover{color:var(--text);border-color:var(--accent);background:var(--accent-soft)}.ai-composer .expand-button:hover,.ai-composer .secondary:hover{border-color:var(--accent)}}@media (min-width:641px) and (max-width:1199px){.ai-composer{padding:var(--space-4)}.ai-composer .composer-grid{grid-template-columns:minmax(220px,.8fr) minmax(0,1.4fr)}.ai-composer .result-panel{padding:var(--space-4)}}@media (max-width:640px){.ai-composer{padding:var(--space-4);border-radius:var(--radius-xl)}.ai-composer .composer-head{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch;gap:var(--space-3)}.ai-composer .composer-actions{-ms-flex-pack:justify;justify-content:space-between}.ai-composer .model-chip{max-width:calc(100% - 120px)}.ai-composer .composer-grid{grid-template-columns:1fr}.ai-composer .result-panel{min-height:0;padding:var(--space-4)}.ai-composer .actions .primary,.ai-composer .actions .secondary{-ms-flex:1 1 46%;flex:1 1 46%}}.music-guide{min-height:100vh;min-height:100dvh;padding:calc(var(--safe-t) + var(--space-4)) var(--page-gutter) calc(var(--safe-b) + var(--space-7));color:var(--text);background:radial-gradient(circle at 12% 0,var(--accent-soft),transparent 32%),var(--bg);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,sans-serif}.music-guide *{box-sizing:border-box}.music-guide .faq-section,.music-guide .guide-hero,.music-guide .guide-nav,.music-guide .knowledge-grid,.music-guide .practice-guide,.music-guide footer{width:100%;max-width:var(--page-max);margin-left:auto;margin-right:auto}.music-guide .guide-nav{min-height:var(--tap-min);-ms-flex-pack:justify;justify-content:space-between;gap:var(--space-3)}.music-guide .brand,.music-guide .guide-nav{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.music-guide .brand{gap:10px;color:var(--text);font-weight:800}.music-guide .brand img{width:32px;height:32px;border-radius:10px;object-fit:cover}.music-guide .back,.music-guide footer a{min-height:var(--tap-min);padding:0 var(--space-4);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;white-space:nowrap;border:1px solid var(--line);border-radius:var(--radius-md);color:var(--text);background:var(--panel);transition:border-color var(--dur-fast) var(--ease-out)}.music-guide .guide-hero{padding:76px 0 54px}.music-guide .eyebrow{margin:0 0 10px;color:var(--accent-2);font-size:11px;font-weight:900;letter-spacing:.18em}.music-guide h1{max-width:18ch;margin:0;font-size:var(--text-display);line-height:1.06;letter-spacing:var(--tracking-tight)}.music-guide .guide-hero>p:not(.eyebrow){max-width:62ch;margin:var(--space-5) 0 0;color:var(--muted);font-size:var(--text-md);line-height:var(--leading-relaxed)}.music-guide .hero-tags{margin-top:25px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:8px}.music-guide .hero-tags span{padding:7px 11px;border:1px solid var(--line);border-radius:99px;color:var(--muted);background:var(--panel);font-size:11px}.music-guide .knowledge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-3)}.music-guide .knowledge-card{min-height:230px;padding:22px;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:19px;background:linear-gradient(145deg,var(--accent-soft),transparent 45%),var(--panel)}.music-guide .card-index{color:var(--accent-2);font-size:10px;font-weight:900}.music-guide .knowledge-card h2{margin:28px 0 10px;font-size:20px}.music-guide .knowledge-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}.music-guide .example{margin-top:18px;padding:var(--space-3);border-radius:var(--radius-sm);color:var(--accent-2);background:var(--track);font:var(--text-xs)/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}.music-guide .practice-guide{margin-top:42px;padding:28px;display:grid;grid-template-columns:.7fr 1.3fr;gap:32px;border:1px solid var(--line);border-radius:22px;background:var(--panel)}.music-guide .practice-guide h2,.music-guide .section-title h2{margin:0;font-size:28px;letter-spacing:-.03em}.music-guide .practice-guide ol{margin:0;padding:0;display:grid;gap:8px;list-style:none}.music-guide .practice-guide li{padding:12px;display:grid;grid-template-columns:76px 1fr;gap:10px;border-radius:12px;background:var(--panel-strong)}.music-guide .practice-guide li strong{color:var(--accent-2);font-size:12px}.music-guide .practice-guide li span{color:var(--muted);font-size:12px;line-height:1.6}.music-guide .faq-section{margin-top:64px;display:grid;grid-template-columns:.65fr 1.35fr;gap:42px}.music-guide .section-title>p:last-child{margin:12px 0 0;color:var(--muted);font-size:13px;line-height:1.7}.music-guide .faq-list{display:grid;gap:8px}.music-guide details{border:1px solid var(--line);border-radius:14px;background:var(--panel)}.music-guide summary{min-height:var(--tap-min);padding:var(--space-4);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;gap:15px;cursor:pointer;color:var(--text);font-size:14px;font-weight:700;list-style:none}.music-guide summary::-webkit-details-marker{display:none}.music-guide summary span{color:var(--accent-2)}.music-guide details[open] summary span{transform:rotate(45deg)}.music-guide details p{margin:0;padding:0 18px 18px;color:var(--muted);font-size:13px;line-height:1.75}.music-guide footer{margin-top:64px;padding-top:22px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;border-top:1px solid var(--line);color:var(--muted);font-size:12px}@media (hover:hover) and (pointer:fine){.music-guide .back:hover,.music-guide footer a:hover{border-color:var(--accent)}.music-guide summary:hover{color:var(--accent)}}@media (min-width:641px) and (max-width:1199px){.music-guide .faq-section,.music-guide .practice-guide{grid-template-columns:1fr;gap:var(--space-6)}}@media (max-width:760px){.music-guide{padding:calc(var(--safe-t) + var(--space-3)) var(--page-gutter) calc(var(--safe-b) + var(--space-6))}.music-guide .guide-hero{padding:48px 0 34px}.music-guide .knowledge-grid{grid-template-columns:1fr}.music-guide .knowledge-card{min-height:0}.music-guide .faq-section,.music-guide .practice-guide{grid-template-columns:1fr;gap:22px}.music-guide .practice-guide{padding:20px}.music-guide footer{-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:column;flex-direction:column;gap:18px}}