.pk-frame{display:flex;justify-content:flex-start;align-items:center;width:100%;height:100%;min-width:0;min-height:0;overflow-x:auto;overflow-y:hidden;touch-action:pan-x}.pk{position:relative;width:100%;height:100%;min-height:150px;display:block;flex:0 0 auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;border-radius:var(--radius-md);overflow:hidden;background:var(--skin-stage-bg)}.pk.is-sized{width:var(--pk-natural-width, 100%)}.pk__whites{position:relative;z-index:1;display:flex;width:100%;height:100%}.pk__blacks{position:absolute;inset:0;z-index:2;pointer-events:none}.pk-key{position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;transition:background var(--motion-press) linear,transform var(--motion-press) var(--ease-standard),box-shadow var(--motion-press) linear;will-change:transform}.pk-key--white{flex:0 0 auto;height:100%;background:var(--skin-key-bg);border-right:3px solid var(--skin-key-border);border-bottom:12px solid var(--skin-key-shadow);border-radius:0 0 7px 7px;box-shadow:0 2px 2px var(--skin-key-shadow)}.pk-key--white:first-child{border-radius:0 0 0 7px}.pk-key--white:last-child{border-right:none;border-radius:0 0 7px}.pk-key--black{position:absolute;top:0;height:62%;pointer-events:auto;background:var(--skin-key-black-bg);border-radius:0 0 6px 6px;box-shadow:0 6px 4px var(--skin-key-shadow);z-index:2;padding-bottom:6px}.pk-key--white.is-pressed{background:var(--skin-key-active);transform:translateY(5px);border-bottom-width:4px;box-shadow:0 0 0 var(--skin-key-shadow);transition-duration:45ms}.pk-key--black.is-pressed{background:var(--skin-key-black-active);transform:translateY(4px);box-shadow:0 2px 2px var(--skin-key-shadow);transition-duration:45ms}.pk-key.is-guide{outline:3px solid var(--skin-guide);outline-offset:-3px;z-index:3}.pk-key.is-next{outline:1px solid var(--skin-guide);outline-offset:-2px}.pk-key--black.is-guide,.pk-key--black.is-next{outline-color:var(--skin-guide-on-black)}.pk-key__finger{position:absolute;left:50%;bottom:18%;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:var(--skin-guide);box-shadow:var(--shadow-raised);animation:pk-finger 1.5s var(--ease-gentle) infinite;pointer-events:none;z-index:4}.pk-key--black .pk-key__finger{background:var(--skin-guide-on-black);bottom:82%;width:20px;height:20px;margin-left:-10px}@keyframes pk-finger{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}.pk-key.is-correct{animation:pk-correct var(--motion-reward) var(--ease-standard)}.pk-key.is-wrong{animation:pk-wrong var(--motion-page) var(--ease-standard)}@keyframes pk-correct{0%{background:var(--skin-key-active)}35%{background:var(--color-correct-flash)}to{background:var(--skin-key-bg)}}@keyframes pk-wrong{0%,to{transform:translate(0)}25%{transform:translate(-3px)}60%{transform:translate(3px)}}.pk-key--black.is-correct{animation:pk-correct-black var(--motion-reward) var(--ease-standard)}@keyframes pk-correct-black{0%{background:var(--skin-key-black-active)}35%{background:var(--color-correct-flash-on-black)}to{background:var(--skin-key-black-bg)}}.pk-key__label{font-size:var(--font-size-micro);font-weight:var(--font-weight-semibold);color:var(--skin-key-label);letter-spacing:.03em;pointer-events:none}.pk-key--black .pk-key__label{color:var(--skin-key-black-label)}@media(prefers-reduced-motion:reduce){.pk-key__finger{animation:none}.pk-key.is-correct,.pk-key.is-wrong,.pk-key--black.is-correct{animation-duration:1ms}}.home{display:grid;grid-template-rows:auto minmax(0,1fr);height:100%;min-height:0}.home__bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-2);min-width:0;padding:var(--space-2) var(--space-4);background:var(--color-surface);border-bottom:1px solid var(--color-border);min-height:64px}.home__brand-name{flex:1 1 auto;margin:0;font-size:var(--font-size-h1);font-weight:var(--font-weight-semibold);letter-spacing:.04em;line-height:var(--line-height-tight)}.home__nav{grid-column:1;display:flex;align-items:center;justify-self:start;gap:var(--space-2);min-width:0}.home__nav-btn{display:inline-flex;align-items:center;gap:6px;text-decoration:none;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-label);font-weight:var(--font-weight-semibold)}.home__nav-btn:active{transform:translateY(1px)}.home__hud{grid-column:3;display:flex;align-items:center;justify-self:end;gap:var(--space-2);min-width:0}.home__stage{display:flex;min-height:0;min-width:0;padding:var(--space-3) var(--space-4) max(var(--space-3),env(safe-area-inset-bottom))}.home__stage>*{flex:1 1 150px;min-width:0;min-height:150px}.home__brand-name{grid-column:2;margin:0;font-size:var(--font-size-h1);font-weight:var(--font-weight-semibold);letter-spacing:.02em;white-space:nowrap;line-height:var(--line-height-tight)}.home__nav-btn{min-height:44px;padding:0 var(--space-3);border:1px solid var(--color-border-strong);box-shadow:var(--shadow-contact)}.home__nav-btn:active{background:var(--color-surface-soft);transform:translateY(1px)}.songs__filters{display:flex;gap:var(--space-2);margin:var(--space-2) 0 var(--space-3);flex-wrap:wrap}.songs__filter{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;border-radius:var(--radius-md);background:var(--color-surface);border:1px solid var(--color-border);font-size:var(--font-size-label);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);transition:background var(--motion-press) linear,color var(--motion-press) linear,border-color var(--motion-press) linear}.songs__filter.is-active{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-text-on-accent)}.songs__filter-count{font-size:var(--font-size-micro);opacity:.7;font-variant-numeric:tabular-nums}.songs__hint{margin:0 0 var(--space-3);font-size:var(--font-size-label);color:var(--color-text-secondary);line-height:var(--line-height-relaxed)}.songs__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}.song-card{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);width:100%;min-height:84px;padding:var(--space-4);border-radius:var(--radius-lg);background:var(--color-surface);border:1px solid var(--color-border);text-align:left;transition:transform var(--motion-press) var(--ease-standard),border-color var(--motion-button) linear}.song-card:active{transform:scale(.985)}.song-card.is-done{border-color:var(--color-success-border)}.song-card__main{display:flex;flex-direction:column;gap:2px;min-width:0}.song-card__title{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-h2);font-weight:var(--font-weight-semibold)}.song-card__check{color:var(--color-success)}.song-card__subtitle{font-size:var(--font-size-label);color:var(--color-text-secondary)}.song-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}.song-card__tag{padding:2px 8px;border-radius:var(--radius-sm);background:var(--color-surface-soft);font-size:var(--font-size-micro);color:var(--color-text-secondary);font-variant-numeric:tabular-nums}.song-card__meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:0 0 auto}.song-card__difficulty{display:flex;gap:4px}.song-card__dot{width:8px;height:8px;border-radius:50%;background:var(--color-text-faint)}.song-card__dot.is-on{background:var(--color-accent)}.song-card__best{font-weight:var(--font-weight-semibold);color:var(--color-success);font-size:var(--font-size-label)}.songs__footnote{margin:var(--space-5) 0 0;font-size:var(--font-size-micro);color:var(--color-text-secondary);line-height:var(--line-height-relaxed)}@media(min-width:900px){.songs__list{grid-template-columns:repeat(2,minmax(0,1fr))}}.staff{display:block;width:100%;height:auto;overflow:visible}.staff__lines line,.staff__ledger{stroke:var(--color-text-tertiary-strong);stroke-width:1.1;stroke-linecap:butt}.staff__stem{stroke:var(--color-text);stroke-width:1.9;stroke-linecap:round}.staff__glyph path{fill:var(--color-text)}.staff__reference text{fill:var(--color-text-tertiary-strong);font-size:var(--font-size-micro);font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,Noto Sans SC,sans-serif;text-anchor:start;dominant-baseline:middle}.staff__labels{text-anchor:middle}.staff__label-box{fill:none;stroke:var(--color-text-tertiary-strong);stroke-width:1}.staff__label-solfege{fill:var(--color-text);font-weight:var(--font-weight-semibold);font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,Noto Sans SC,sans-serif}.staff__label-pinyin{fill:var(--color-accent-strong);font-weight:var(--font-weight-medium);font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,Noto Sans SC,sans-serif}.pp{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;min-height:0;padding:0 var(--space-4) max(var(--space-3),env(safe-area-inset-bottom));gap:var(--space-3);background:var(--skin-stage-bg)}.pp__top{display:flex;align-items:center;gap:var(--space-3);min-height:64px}.pp__back{flex:0 0 auto;padding:0 var(--space-3)}.pp__title{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}.pp__title-name{font-size:var(--font-size-h1);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pp__title-meta{font-size:var(--font-size-micro);color:var(--color-text-secondary)}.pp__top-actions{display:flex;align-items:center;gap:var(--space-2);flex:0 0 auto}.pp__tempo{display:flex;align-items:center;gap:4px;padding:3px;background:var(--color-surface-soft);border-radius:var(--radius-md)}.pp__tempo-btn{padding:9px 16px;border-radius:var(--radius-sm);font-size:var(--font-size-label);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);transition:background var(--motion-press) linear,color var(--motion-press) linear}.pp__tempo-btn.is-active{background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-contact)}.pp__stage{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:var(--space-3);min-height:0;min-width:0}.pp__prompt{min-height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);text-align:center}.pp__note-row{display:flex;align-items:center;gap:var(--space-4)}.pp__staff{width:100%;max-height:24vh}.pp__note-current{font-size:var(--font-size-h2);font-weight:var(--font-weight-semibold);line-height:var(--line-height-none);color:var(--skin-guide)}.pp__note-next{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.pp__note-next-label{font-size:var(--font-size-micro);color:var(--color-text-secondary)}.pp__note-next-value{font-size:var(--font-size-h2);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary)}.pp__mistake-hint{margin:0;font-size:var(--font-size-body);color:var(--color-text-secondary)}.pp__hold{display:flex;align-items:center;gap:var(--space-2);height:22px}.pp__hold-label{font-size:var(--font-size-body);color:var(--color-text-secondary);font-variant-numeric:tabular-nums}.pp__hold-track{width:112px;height:6px;border-radius:var(--radius-sm);background:var(--color-track);overflow:hidden}.pp__hold-bar{width:100%;height:100%;border-radius:var(--radius-sm);background:var(--skin-guide);transform:scaleX(0);transform-origin:left center;animation:pp-hold-fill var(--pp-hold-ms, .6s) linear forwards}@keyframes pp-hold-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@media(prefers-reduced-motion:reduce){.pp__hold-bar{animation:none}}.app[data-reduced-motion=true] .pp__hold-bar{animation-name:none}.pp__idle-hint{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.pp__idle-main{font-size:var(--font-size-h1);font-weight:var(--font-weight-semibold)}.pp__idle-sub{font-size:var(--font-size-body);color:var(--color-text-secondary)}.pp__listen-hint{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-h2);color:var(--color-text-secondary)}.pp__listen-icon{color:var(--skin-guide)}.pp__keyboard{min-height:0;display:flex;min-width:0}.pp__keyboard>*{flex:1 1 auto;min-width:0}.pp__progress{height:6px;border-radius:var(--radius-sm);background:var(--color-track);overflow:hidden}.pp__progress-bar{height:100%;border-radius:var(--radius-sm);background:var(--skin-guide);transition:width var(--motion-reward) var(--ease-standard)}.pp__bottom{display:flex;align-items:center;gap:var(--space-3);min-height:var(--tap-target);flex-wrap:nowrap}.pp__bottom-actions{display:flex;align-items:center;gap:var(--space-2);flex:1 1 auto;justify-content:center}.pp__stats{display:flex;gap:var(--space-2);flex:0 0 auto}.pp__keysize--real{background:var(--color-success-soft);color:var(--color-success-strong)}.pp-result{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:var(--space-4);background:var(--color-scrim);backdrop-filter:blur(3px);animation:pp-result-in var(--motion-page) var(--ease-standard)}@keyframes pp-result-in{0%{opacity:0}to{opacity:1}}.pp-result__card{width:min(560px,100%);max-height:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-6) var(--space-5) var(--space-4);border-radius:var(--radius-xl);background:var(--color-surface);box-shadow:var(--shadow-overlay);text-align:center;animation:pp-card-in var(--motion-reward) var(--ease-standard)}@keyframes pp-card-in{0%{transform:translateY(18px) scale(.96)}to{transform:translateY(0) scale(1)}}.pp-result__title{margin:0;font-size:var(--font-size-display);font-weight:var(--font-weight-semibold);line-height:var(--line-height-none)}.pp-result__stars{display:flex;gap:var(--space-3);font-size:var(--font-size-display);line-height:var(--line-height-none)}.pp-result__star{color:var(--color-text-faint);transform:scale(.8);transition:color var(--motion-reward) var(--ease-standard),transform var(--motion-reward) var(--ease-standard)}.pp-result__star.is-on{color:var(--color-warning);transform:scale(1)}.pp-result__facts{margin:0;font-size:var(--font-size-body);color:var(--color-text-secondary);font-variant-numeric:tabular-nums}.pp-result__gain{display:inline-flex;align-items:center;gap:var(--space-1);margin:0;font-size:var(--font-size-body);font-weight:var(--font-weight-semibold);color:var(--color-warning);font-variant-numeric:tabular-nums}.pp-result__earned{margin:0;font-size:var(--font-size-label);color:var(--color-text-secondary)}.pp-result__unlock{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3) var(--space-1) var(--space-1);border-radius:var(--radius-pill);background:var(--color-accent-soft);font-size:var(--font-size-body);font-weight:var(--font-weight-semibold);color:var(--color-accent-strong);transition:transform var(--motion-press) var(--ease-standard)}.pp-result__unlock:active{transform:scale(.98)}.pp-result__unlock-sample{flex:0 0 56px;width:56px;border-radius:var(--radius-sm);overflow:hidden}.pp-result__actions{display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center;width:100%}.pp-result__actions .ui-btn{flex:1 1 156px}.pp-result__replay{flex:1 1 126px}.pp-result__exit{font-size:var(--font-size-label)}@media(orientation:landscape){.pp__staff{max-height:16vh}}@media(orientation:landscape)and (max-height:560px){.pp__prompt{min-height:62px}.pp__staff{max-height:20vh}.pp-result__card{padding:var(--space-5) var(--space-4) var(--space-3);gap:var(--space-2)}.pp-result{--font-size-display: clamp(26px, 5vw, 34px)}}@media(max-width:640px){.pp__title-meta{display:none}.pp__bottom{flex-wrap:wrap;gap:var(--space-2)}.pp__bottom-actions{order:-1;width:100%}}@media(prefers-reduced-motion:reduce){.pp-result,.pp-result__card{animation-duration:1ms}}.app{height:100%;min-height:100%;background:var(--color-bg);color:var(--color-text)}.app[data-reduced-motion=true] *,.app[data-reduced-motion=true] *:before,.app[data-reduced-motion=true] *:after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}.route-fallback{display:grid;place-items:center;height:100%;color:var(--color-text-secondary)}.page{display:grid;grid-template-rows:auto minmax(0,1fr);height:100%;min-height:0}.page__bar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);min-height:64px}.page__title{flex:1 1 auto;margin:0;font-size:var(--font-size-h1);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);letter-spacing:.01em}.page__bar .ui-btn,.tune__top .ui-btn,.pp__top .ui-btn,.chl__top .ui-btn{min-height:var(--tap-target-compact)}.page__body{min-height:0;overflow:auto;padding:0 var(--space-4) max(var(--space-5),env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}.hud-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:var(--radius-md);background:var(--color-surface);border:1px solid var(--color-border);font-weight:var(--font-weight-semibold);font-size:var(--font-size-body);transition:transform var(--motion-press) var(--ease-standard)}.hud-btn:active{transform:scale(.96)}.hud-btn--icon{padding:0;width:44px;justify-content:center}.hud-stars{color:var(--color-text);font-variant-numeric:tabular-nums}.icon{display:inline-block;vertical-align:middle;flex:0 0 auto}:root{--color-bg: #f7f7f3;--color-surface: #ffffff;--color-surface-soft: #f1f2ee;--color-text: #252824;--color-text-secondary: #6f746d;--color-text-tertiary: #9a9f97;--color-text-on-accent: #ffffff;--color-border: #e3e5df;--color-border-strong: #d0d4cc;--color-accent: #4c8a67;--color-accent-soft: #e5f0e8;--color-success: #4d8a62;--color-success-soft: #e8f1ea;--color-warning: #b98232;--color-danger: #b4574d;--color-text-tertiary-strong: #83887f;--color-text-faint: #d5d7d2;--color-text-on-accent-soft: rgba(255, 255, 255, .84);--color-text-on-accent-muted: rgba(255, 255, 255, .72);--color-border-soft: #eceee9;--color-accent-border: #a8c4b3;--color-accent-strong: #3a6b4e;--color-success-border: #a9c6b2;--color-success-strong: #406f52;--color-danger-soft: #f7e9e7;--color-track: #e3e5df;--color-scrim: rgba(37, 40, 36, .42);--color-correct-flash: #cfe8d8;--color-correct-flash-on-black: #4d8a62;--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-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-pill: 999px;--shadow-contact: 0 1px 2px rgba(25, 30, 25, .05);--shadow-raised: 0 2px 5px rgba(25, 30, 25, .07);--shadow-overlay: 0 8px 24px rgba(25, 30, 25, .1);--font-size-display: clamp(42px, 6.4vw, 56px);--font-size-metric: clamp(32px, 4.4vw, 40px);--font-size-h1: clamp(24px, 3vw, 28px);--font-size-h2: clamp(18px, 2.2vw, 20px);--font-size-body: 16px;--font-size-label: 14px;--font-size-micro: 12px;--line-height-none: 1;--line-height-tight: 1.25;--line-height-body: 1.5;--line-height-relaxed: 1.65;--content-max-width: 720px;--measure-narrow: 560px;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--motion-press: 90ms;--motion-button: .15s;--motion-panel: .22s;--motion-page: .32s;--motion-reward: .52s;--ease-standard: cubic-bezier(.2, .8, .2, 1);--ease-gentle: cubic-bezier(.4, 0, .2, 1);--tap-target: 56px;--tap-target-compact: 44px;--skin-key-bg: linear-gradient(180deg, #fffdf9 0%, #fbf7f0 100%);--skin-key-active: #ded3bd;--skin-key-border: #d9cdb6;--skin-key-shadow: rgba(74, 58, 34, .2);--skin-key-label: #6b5b45;--skin-key-black-bg: #3a342a;--skin-key-black-active: #5c5342;--skin-key-black-label: #e8dfce;--skin-guide: #a9662f;--skin-guide-on-black: #e8b071;--skin-stage-bg: radial-gradient(120% 120% at 50% 0%, #fdfbf7 0%, #efe9de 100%);--skin-decoration: #d9cdb6}@media(prefers-reduced-motion:reduce){:root{--motion-press: 1ms;--motion-button: 1ms;--motion-panel: 1ms;--motion-page: 1ms;--motion-reward: 1ms}}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}html{-webkit-text-size-adjust:100%}body{background:var(--color-bg);color:var(--color-text);font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,Noto Sans SC,sans-serif;font-size:var(--font-size-body);font-weight:var(--font-weight-regular);line-height:var(--line-height-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}button,input,select{font:inherit;color:inherit}button{cursor:pointer;border:none;background:none}html,body,#root{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.is-selectable{user-select:text;-webkit-user-select:text;-webkit-touch-callout:default}:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-sm)}.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--tap-target);padding:0 var(--space-5);border-radius:var(--radius-md);background:var(--color-surface);border:1px solid var(--color-border-strong);color:var(--color-text);font-size:var(--font-size-body);font-weight:var(--font-weight-semibold);transition:transform var(--motion-press) var(--ease-standard),background-color var(--motion-button) linear,border-color var(--motion-button) linear;touch-action:manipulation}.ui-btn:active{transform:scale(.97)}.ui-btn--primary{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-text-on-accent)}.ui-btn--ghost{background:transparent;border-color:transparent;color:var(--color-text-secondary)}.ui-btn--lg{min-height:68px;padding:0 var(--space-6);font-size:var(--font-size-h2);border-radius:var(--radius-lg)}.ui-btn:disabled{opacity:.45;cursor:not-allowed}.ui-pill{display:inline-flex;align-items:center;gap:var(--space-1);padding:6px 14px;border-radius:var(--radius-pill);background:var(--color-surface-soft);font-size:var(--font-size-label);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary)}