:root{--wb: keep-all;--sat: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));--sab: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));--kbb: max(var(--sab), 16px);--sal: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));--sar: var(--safe-area-inset-right, env(safe-area-inset-right, 0px))}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}html[lang^=ja],html[lang^=zh]{--wb: normal}body{background:#0d1420;color:#e8eef6;font-family:-apple-system,Noto Sans KR,Malgun Gothic,sans-serif;overscroll-behavior:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.center-msg{height:100%;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;color:#9fb2c8}button.banner-cta{display:block;width:100%;cursor:pointer;font:inherit;font-weight:700;color:inherit;border:1px solid rgba(255,255,255,.25);border-radius:10px}button.banner-cta:active{transform:scale(.99)}button.banner-cta:disabled{opacity:.7;cursor:progress}.acquisition-primary{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;box-sizing:border-box;text-align:center;text-decoration:none;line-height:1.35;white-space:normal}.mp-plus-retention{background:linear-gradient(90deg,#12312e,#143a36);border-color:#2c6b63;color:#c8fff7}.acq-footer-link{display:block;width:100%;text-align:center;margin-top:10px;padding:8px 0}button.header-signin{width:auto;padding:0 10px;font-size:13px;white-space:nowrap}.header-account{align-self:center;font-size:12px;color:#7fd7cc;white-space:nowrap}.account-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.text-action{background:none;border:none;padding:2px 0;font:inherit;font-size:13px;color:#a9c3e0;text-decoration:underline;cursor:pointer}.text-action:hover{color:#d5e6f7}.text-action:focus-visible{outline:2px solid #3fd6c8;outline-offset:2px}.text-action.danger{color:#d99a9a}.text-action.danger:hover{color:#f0b9b9}.text-action:disabled{opacity:.6;cursor:progress}.login-code{font-size:1.6rem;font-weight:700;letter-spacing:.15em;text-align:center;padding:10px 0;user-select:all;-webkit-user-select:all}.library{max-width:560px;margin:0 auto;padding:calc(16px + var(--sat)) 16px calc(24px + var(--sab))}.lib-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}.header-btns{display:flex;gap:8px}.header-btns .hud-btn{display:flex;align-items:center;justify-content:center}.lib-header h1{font-size:26px;letter-spacing:.5px}.subtitle{color:#8fa3ba;font-size:13px;margin-top:4px}.banner-slot{background:linear-gradient(90deg,#14273f,#1a2c46);border:1px solid #27405f;border-radius:10px;padding:10px 14px;font-size:13px;color:#a9c3e0;margin-bottom:14px}.update-banner .update-title{margin:0 0 4px;font-weight:700;color:#d5e6f7}.update-banner .update-desc{margin:0 0 10px}.update-banner .update-actions{display:flex;gap:8px}.update-banner .update-actions .btn{flex:none;padding:8px 18px}.song-list{list-style:none;display:flex;flex-direction:column;gap:8px}.song-list li{display:flex;align-items:center;gap:12px;background:#131e30;border:1px solid #1f3049;border-radius:12px;padding:12px 14px;cursor:pointer;transition:background .15s}.song-list li:active{background:#1a2a42}.song-list li.locked{opacity:.55}.song-order{width:32px;height:32px;border-radius:8px;background:#1d3050;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#7fd7cc;flex-shrink:0}.preview-btn{width:36px;height:36px;border-radius:50%;flex-shrink:0;border:1px solid #2c4667;background:#1d3050;color:#7fd7cc;font-size:13px;cursor:pointer}.preview-btn.on{background:#1f6f66;border-color:#3fd6c8;color:#eafffb}.song-info{flex:1;min-width:0}.song-title{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-sub{font-size:12px;color:#8fa3ba;margin-top:2px}.stars{color:#ffd45e;font-size:14px;letter-spacing:1px}.lock{font-size:16px}.overlay{position:fixed;inset:0;background:#050a12b8;display:flex;align-items:center;justify-content:center;z-index:40}.modal{background:#16223a;border:1px solid #27405f;border-radius:16px;padding:22px;width:min(92vw,380px);display:flex;flex-direction:column;gap:14px;max-height:86vh;overflow-y:auto}.modal h2{font-size:19px}.modal-desc{color:#a9bdd6;font-size:14px}.modal-fineprint{color:#6d829b;font-size:12px}.ios-sub-info{display:flex;flex-direction:column;gap:6px;line-height:1.45}.ios-sub-links{display:flex;flex-wrap:wrap;gap:12px}.ios-sub-links .text-action{font-size:12px}.opt-group{display:flex;flex-direction:column;gap:8px}.opt-group>label{font-size:13px;color:#a9bdd6}.seg{display:flex;gap:6px}.seg button{flex:1;padding:10px 4px;border-radius:10px;border:1px solid #27405f;background:#101a2c;color:#c6d6e8;font-size:14px;cursor:pointer;display:flex;flex-direction:column;gap:2px;align-items:center}.seg button small{font-size:10px;color:#7189a3}.seg button.on{background:#1f4d49;border-color:#3fd6c8;color:#c8fff7}.btn{padding:11px 16px;border-radius:12px;border:1px solid #2c4667;background:#182842;color:#dce8f5;font-size:15px;cursor:pointer}.btn.primary{background:#1f6f66;border-color:#3fd6c8;color:#eafffb;font-weight:700}.btn.big{padding:14px 16px}input[type=range]{width:100%;accent-color:#3fd6c8}.game-root{position:fixed;inset:0;background:#0a1220}.game-canvas{width:100%;height:calc(100% - var(--kbb));display:block;touch-action:none}.hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:8px 12px;padding-top:calc(8px + var(--sat));pointer-events:none}.hud-btn{pointer-events:auto;width:38px;height:38px;border-radius:10px;border:1px solid #2c4667;background:#101a2ccc;color:#c6d6e8;font-size:15px;cursor:pointer;flex-shrink:0}.hud-title{flex:1;font-size:14px;color:#b9cde2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud-stats{display:flex;gap:12px;font-size:15px;font-weight:700;color:#d8fff4}.combo{color:#ffd45e}.progress-bar{position:absolute;top:0;left:0;right:0;height:3px;background:#ffffff14}.progress-bar>div{height:100%;background:#3fd6c8;transition:width .2s linear}.countdown{font-size:84px;font-weight:800;color:#d8fff4}.rotate-hint{display:none}@media (orientation: portrait){.game-root .rotate-hint{display:flex;position:absolute;inset:0;z-index:30;background:#080e18eb;align-items:center;justify-content:center;font-size:18px;color:#c6d6e8;pointer-events:none}}.freeplay-top{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;gap:10px;padding:8px 12px;padding-top:calc(8px + var(--sat))}.freeplay-canvas{position:absolute;left:0;right:0;bottom:var(--kbb);top:calc(54px + var(--sat));width:100%;height:calc(100% - 54px - var(--sat) - var(--kbb));touch-action:none}.octave-label{font-size:13px;color:#7fd7cc;min-width:30px;text-align:center}.listen-root{position:fixed;inset:0;display:flex;flex-direction:column;background:#0a1220;padding-bottom:var(--kbb)}.listen-top{display:flex;align-items:center;gap:10px;padding:8px 12px;padding-top:calc(8px + var(--sat))}.falling-toggle{display:flex;align-items:center;gap:6px;font-size:12px;color:#a9bdd6;white-space:nowrap;cursor:pointer}.falling-toggle input{accent-color:#2f7ff6}.listen-progress{position:static;flex-shrink:0;height:5px}.listen-progress-hit{padding:6px 0;cursor:pointer;flex-shrink:0;touch-action:manipulation}.score-pane{flex:1;overflow-y:auto;background:#fdfcf8;position:relative;border-radius:10px;margin:6px 8px}.score-pane .center-msg{color:#667}.free-badge{font-size:11px;font-weight:700;color:#2fd67f;border:1px solid rgba(47,214,127,.55);border-radius:10px;padding:1px 8px;margin-right:8px;vertical-align:middle}.popular-badge{color:#ff9f5b;border-color:#ff9f5b8c}.ad-fail{color:#ff8b8b}.measure-flash{position:absolute;pointer-events:none;border-radius:4px;background:#33e02f38;border:2px solid rgba(51,224,47,.65);animation:measure-flash-fade 1.1s ease-out forwards}@keyframes measure-flash-fade{0%{opacity:1}55%{opacity:1}to{opacity:0}}.listen-canvas{width:100%;display:block;flex-shrink:0;touch-action:none}.score-lock-note{flex-shrink:0;text-align:center;font-size:12px;color:#ffd45e;padding:4px 8px;background:#ffd45e14}.music-pass-pitch{font-size:14px;line-height:1.6;color:#d8fff4;background:linear-gradient(135deg,#143c3a,#1a2c46);border:1px solid #3fd6c8;border-radius:12px;padding:14px}.result{height:100%;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;padding:20px}.result h2{font-size:20px;color:#b9cde2}.result-stars .star{font-size:46px;color:#33415a;margin:0 4px}.result-stars .star.on{color:#ffd45e;text-shadow:0 0 18px rgba(255,212,94,.5)}.result-acc{font-size:52px;font-weight:800;color:#eafffb}.result-detail{display:flex;gap:18px;color:#8fa3ba;font-size:14px}.result-msg{color:#a9bdd6;font-size:15px;margin-bottom:8px}.result .btn{width:min(80vw,300px)}.settings{max-width:560px;margin:0 auto;padding:calc(20px + var(--sat)) 16px calc(20px + var(--sab));display:flex;flex-direction:column;gap:20px}.exit-toast{position:fixed;left:50%;bottom:48px;transform:translate(-50%);background:#141c2af2;color:#dce8f5;padding:10px 18px;border-radius:20px;font-size:14px;border:1px solid rgba(255,255,255,.12);z-index:1000;pointer-events:none;white-space:nowrap}.doc-screen{position:fixed;inset:0;z-index:900;display:flex;flex-direction:column;background:#0d1420}.doc-header{flex:0 0 auto;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));border-bottom:1px solid rgba(255,255,255,.08)}.doc-frame{flex:1 1 auto;width:100%;border:0;background:#fdfcf8}.learn-entry{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;margin-bottom:10px;padding:12px 14px;background:linear-gradient(90deg,#14273f,#182c4a);border:1px solid #2a4468;border-radius:12px;color:inherit;font:inherit;text-align:left;cursor:pointer}.learn-entry:active{background:#1a2a42}.learn-entry-icon{width:42px;height:42px;border-radius:10px;background:#1d3050;color:#7fd7cc;display:flex;align-items:center;justify-content:center;flex-shrink:0}.learn-entry-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.learn-entry-title{font-weight:700;font-size:16px}.learn-entry-sub{font-size:12px;color:#8fa3ba;white-space:normal;word-break:var(--wb);overflow-wrap:anywhere}.learn-entry-chevron{color:#7fd7cc;font-size:22px;line-height:1;flex-shrink:0}.learn{position:fixed;inset:0;max-width:560px;margin:0 auto;background:#0d1420;display:flex;flex-direction:column;padding:calc(8px + var(--sat)) max(16px,var(--sar)) calc(24px + var(--sab)) max(16px,var(--sal))}.learn-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}.learn-header{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;margin-bottom:14px}.learn-back{background:none;border:none;color:#7fb2ff;font:inherit;font-size:16px;min-height:44px;padding:10px 8px 10px 0;cursor:pointer;white-space:nowrap;flex-shrink:0}.learn-page-title{flex:1;font-size:18px;font-weight:700;text-align:center}.learn-header-spacer{width:64px;flex-shrink:0}.learn-course-title{font-size:30px;font-weight:800;line-height:1.2;margin-top:4px}.learn-course-sub{color:#9fb2c8;font-size:15px;margin-top:6px;word-break:var(--wb);overflow-wrap:anywhere}.learn-progress-text{margin-top:22px;font-size:15px;color:#c6d6e8}.learn-progress-text strong{font-size:20px;font-weight:800;color:#eaf3ff;margin-right:4px}.learn-progress-bar{display:flex;gap:4px;margin:8px 0 22px}.learn-progress-bar span{flex:1;height:8px;border-radius:4px;background:#1a2d4a}.learn-progress-bar span.on{background:#3fd6f0}.learn-all-done{color:#7fd7cc;font-size:13px;margin:-10px 0 16px;word-break:var(--wb);overflow-wrap:anywhere}.learn-steps{list-style:none;display:flex;flex-direction:column}.learn-step{display:flex;gap:12px;align-items:stretch}.learn-rail{width:44px;flex-shrink:0;display:flex;flex-direction:column;align-items:center}.learn-num{width:40px;height:40px;border-radius:50%;border:2px solid #34506f;background:#0d1420;color:#c6d6e8;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;margin-top:26px;flex-shrink:0}.learn-line{flex:1;width:3px;background:#2a3f5c;margin-top:4px;margin-bottom:-26px;min-height:30px}.learn-step.done .learn-num{border-color:#2fd67f;color:#5cf09a}.learn-step.done .learn-line{background:#2fd67f}.learn-step.next .learn-num{border-color:#6c7cf2;color:#9aa8ff}.learn-card{flex:1;min-width:0;margin-bottom:12px;padding:12px 14px 14px;min-height:88px;background:#16243a;border:1px solid #27405f;border-radius:14px;color:inherit;font:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:6px}.learn-step.done .learn-card{background:#132a2e;border-color:#2c6b5c}.learn-step.next .learn-card{background:#182a4d;border-color:#6c7cf2}.learn-card:active{filter:brightness(1.12)}.learn-card-step{font-size:12px;color:#9fb2c8}.learn-card-row{display:flex;align-items:center;gap:10px}.learn-card-icon{color:#eaf3ff;width:32px;display:flex;justify-content:center;flex-shrink:0}.learn-card-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.learn-card-title{font-size:19px;font-weight:700;line-height:1.25;white-space:normal;word-break:var(--wb);overflow-wrap:anywhere}.learn-card-desc{font-size:13px;color:#a9bdd6;line-height:1.35;white-space:normal;word-break:var(--wb);overflow-wrap:anywhere}.learn-card-status{font-size:13px;font-weight:700;flex-shrink:0;color:#a9bdd6;text-align:right;white-space:nowrap;margin-left:2px}.learn-step.done .learn-card-status{color:#5cf09a}.learn-step.next .learn-card-status{color:#9aa8ff}.learn-step.inprogress .learn-card-status{color:#ffd45e}.learn-step-root{position:fixed;inset:0;background:#0d1420;display:flex;flex-direction:column;padding-left:var(--sal);padding-right:var(--sar)}.learn-step-top{display:flex;align-items:center;gap:8px;padding:4px 12px;padding-top:calc(4px + var(--sat));min-height:52px}.learn-step-heading{flex:1;min-width:0;text-align:center;display:flex;flex-direction:column;align-items:center}.learn-step-heading h1{font-size:16px;font-weight:700;line-height:1.25;white-space:normal}.learn-step-body{flex:1;min-height:0;overflow-y:auto;padding:2px 16px 6px;display:flex;flex-direction:column;gap:8px}.learn-step-body>*{flex-shrink:0}.learn-goal{display:flex;gap:12px;align-items:flex-start;background:#16243a;border:1px solid #27405f;border-radius:14px;padding:10px 14px}.learn-goal-icon{color:#7fd7cc;flex-shrink:0;margin-top:1px}.learn-goal p{font-size:15px;line-height:1.45;color:#dce8f5;white-space:normal;word-break:var(--wb);overflow-wrap:anywhere}.learn-practice{display:flex;flex-direction:column;gap:4px}.learn-practice-progress{font-size:20px;font-weight:800;color:#eaf3ff}.learn-practice-hint{font-size:15px;color:#c6d6e8;word-break:var(--wb);overflow-wrap:anywhere}.learn-staff-wrap{background:#16243a;border:1px solid #27405f;border-radius:14px;padding:8px 10px;overflow-x:auto}.learn-done-title{font-size:20px;font-weight:800;color:#5cf09a;word-break:var(--wb);overflow-wrap:anywhere}.learn-feedback{min-height:22px;font-size:15px;word-break:var(--wb);overflow-wrap:anywhere}.learn-feedback.good{color:#5cf09a}.learn-feedback.gentle{color:#ffd45e}.learn-actions{display:flex;flex-direction:column;gap:10px;margin-top:auto}.learn-actions .btn{min-height:48px;width:100%}.learn-keyboard{flex-shrink:0;width:100%;height:min(33vh,236px);min-height:170px;display:block;touch-action:none;margin-bottom:var(--kbb)}@media (orientation: portrait) and (max-height: 860px){.learn-keyboard{height:min(33vh,192px)}}.learn-target{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 0 4px;text-align:center}.learn-target-sub{font-size:14px;color:#9fb2c8;word-break:var(--wb);overflow-wrap:anywhere}.learn-target-key{font-size:64px;font-weight:800;line-height:1.1;color:#eaf3ff;letter-spacing:.02em}.learn-swap{display:grid}.learn-swap-item{grid-area:1 / 1;min-width:0}.learn-swap-item.off{visibility:hidden}.learn-target.pending .learn-target-key{opacity:.5}.learn-beat-dots{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}.learn-beat-dots span{display:inline-block;border-radius:50%;background:#1f3350;border:2px solid #34506f;transition:transform .08s ease-out}.learn-beat-dots .ci{width:12px;height:12px}.learn-beat-dots .bt{width:22px;height:22px}.learn-beat-dots .past{opacity:.45}.learn-beat-dots .now{background:#3fd6f0;border-color:#3fd6f0;transform:scale(1.35);box-shadow:0 0 12px #3fd6f0b3;opacity:1}.learn-beat-dots .hit{background:#2fd67f;border-color:#2fd67f;opacity:1}.learn-hold{display:flex;flex-direction:column;gap:4px;margin-top:8px}.learn-hold-bar{height:10px;border-radius:5px;background:#1a2d4a;overflow:hidden}.learn-hold-bar>div{height:100%;background:#3fd6c8;transition:width .08s linear}.learn-hold-label{font-size:12px;color:#8fa3ba}@media (orientation: landscape) and (max-height: 520px){.learn-keyboard{height:30vh;min-height:112px}.learn-step-top{min-height:40px;padding-top:calc(2px + var(--sat))}.learn-step-body{padding:2px 16px 6px;gap:8px}.learn-goal{padding:8px 12px}.learn-goal p{font-size:13px;line-height:1.35}.learn-practice-progress{font-size:17px}.learn-target{padding:4px 0}.learn-target-key{font-size:36px}.learn-actions .btn{min-height:44px;padding:8px 16px}}.learn-title-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin-top:4px}.learn-title-row .learn-course-title{margin-top:0;min-width:0;word-break:var(--wb);overflow-wrap:anywhere}.learn-chapter-badge{flex-shrink:0;font-size:12px;font-weight:700;color:#9aa8ff;background:#182a4d;border:1px solid #3a4a8a;border-radius:999px;padding:3px 10px;white-space:nowrap;align-self:center}.learn-chapter-tabs{display:flex;gap:6px;margin-top:14px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:4px;-webkit-overflow-scrolling:touch}.learn-chapter-tabs::-webkit-scrollbar{height:4px}.learn-chapter-tabs::-webkit-scrollbar-thumb{background:#27405f;border-radius:2px}.learn-chapter-tab{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:56px;padding:8px;background:#16243a;border:1px solid #27405f;border-radius:12px;color:inherit;font:inherit;text-align:left;cursor:pointer;min-width:0;flex:0 0 auto;width:132px;scroll-snap-align:start}.learn-chapter-tab.on{background:#182a4d;border-color:#6c7cf2}.learn-chapter-tab:active{filter:brightness(1.12)}.learn-chapter-tab-num{font-size:11px;font-weight:700;color:#9aa8ff;white-space:nowrap}.learn-chapter-tab-title{font-size:12px;line-height:1.25;color:#dce8f5;word-break:var(--wb);overflow-wrap:anywhere}.learn-chapter-tab-progress{font-size:11px;color:#8fa3ba}.learn-chapter-tab.all .learn-chapter-tab-progress{color:#5cf09a}.learn-practice-sub{font-size:13px;color:#9fb2c8}.learn-practice-hint.strong{font-weight:700;color:#eaf3ff}.learn-practice-hint.release{color:#5cf09a;font-weight:700}.learn-target-key.small{font-size:34px}.learn-hold-gauge{display:flex;flex-direction:column;gap:6px;padding:6px 0}.learn-hold-gauge svg{display:block}.learn-hold-items{display:flex;gap:6px;flex-wrap:wrap}.learn-hold-item{font-size:12px;padding:3px 9px;border-radius:999px;background:#1a2d4a;color:#9fb2c8;border:1px solid #2a3f5c}.learn-hold-item.active{color:#eaf3ff;border-color:#3fd6f0;background:#163a52}.learn-hold-item.done{color:#5cf09a;border-color:#2fd67f}.learn-hold-item.missed{color:#ffd45e;border-color:#7a6a2a}.learn-beat-dots .bt.half{width:14px;height:14px}.learn-beat-dots .bt.bar{margin-left:10px}.learn-keyboards{display:flex;flex-direction:column;flex-shrink:0;margin-bottom:var(--kbb)}.learn-keyboards .learn-keyboard{margin-bottom:0}.learn-keyboard-part{display:flex;flex-direction:column;min-width:0}.learn-keyboard-label{font-size:11px;color:#8fa3ba;padding:2px 12px 0;background:#0d1a2c}.learn-keyboards.two{flex-direction:column-reverse}.learn-keyboards.two .learn-keyboard{height:min(22vh,160px);min-height:104px}.learn-step-root.two-parts .learn-step-body{gap:8px}@media (orientation: landscape) and (max-height: 520px){.learn-keyboards.two{flex-direction:row}.learn-keyboards.two .learn-keyboard-part{flex:1}.learn-keyboards.two .learn-keyboard{height:30vh;min-height:112px}.learn-chapter-tabs{margin-top:8px}.learn-hold-gauge{gap:3px;padding:2px 0}}@media (max-width: 360px){.learn-chapter-tab{width:118px}}@media (orientation: landscape) and (max-height: 520px){.learn-target{padding:0;gap:0}.learn-target-key{font-size:28px}.learn-target-key.small{font-size:24px}.learn-staff-wrap{padding:4px 8px}.learn-practice{gap:2px}.learn-practice-progress{font-size:15px}}@media (orientation: landscape) and (max-height: 520px){.learn-step-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:max-content max-content max-content;column-gap:12px;row-gap:6px;align-content:start}.learn-goal{grid-column:2;grid-row:1;align-self:start}.learn-practice{grid-column:1;grid-row:1}.learn-feedback,.learn-done{grid-column:1;grid-row:2}.learn-staff-wrap{grid-column:2;grid-row:2 / span 2;align-self:start}.learn-staff-wrap{max-height:62vh;overflow-y:auto}.learn-actions{grid-column:1;grid-row:3;margin-top:0}}.learn-beat-gauge{display:block}.learn-gauge-section{display:flex;flex-direction:column;gap:4px;background:#16243a;border:1px solid #27405f;border-radius:14px;padding:8px 12px 6px}.learn-gauge-text{font-size:14px;color:#c6d6e8;word-break:var(--wb);overflow-wrap:anywhere;min-height:20px}.learn-gauge-text.release{color:#5cf09a;font-weight:700}@media (orientation: landscape) and (max-height: 520px){.learn-step-body{grid-template-rows:max-content max-content max-content max-content}.learn-gauge-section{grid-column:1;grid-row:2}.learn-feedback,.learn-done{grid-row:3}.learn-actions{grid-row:4}.learn-staff-wrap{grid-row:2 / span 3}}.learn-keyboards.two{position:relative}.learn-keyboards.two .learn-keyboard{height:min(17vh,124px);min-height:96px}.learn-keyboard-part{position:relative}.learn-keyboard-part .learn-keyboard-label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:3px 12px 2px}.learn-keyboard-part.inactive .learn-keyboard-label{opacity:.55}.learn-keyboard-now{font-size:10px;font-weight:800;color:#0d1420;background:currentColor;border-radius:999px;padding:1px 7px}.learn-keyboard-now{color:inherit;background:#ffffff1f}.learn-keyboard-part.active .learn-keyboard-now{color:#0d1420;background:#eaf3ff}.learn-keyboard-divider{position:absolute;left:12px;right:12px;top:50%;height:2px;background:linear-gradient(90deg,#9aa8ff,#3fd6c8);opacity:.55;border-radius:1px;pointer-events:none}.learn-step-root.two-parts .learn-target-key{font-size:44px}.learn-step-root.two-parts .learn-goal p{font-size:14px;line-height:1.4}@media (orientation: landscape) and (max-height: 520px){.learn-keyboards.two{gap:14px;padding:0 4px}.learn-keyboards.two .learn-keyboard-part{flex:1;min-width:0}.learn-keyboards.two .learn-keyboard{height:28vh;min-height:104px}.learn-keyboard-divider{inset:6px auto 6px 50%;width:4px;height:auto;transform:translate(-50%);background:linear-gradient(180deg,#9aa8ff,#3fd6c8);box-shadow:0 0 10px #9aa8ff99;opacity:.9}}@media (orientation: landscape) and (max-height: 520px){.learn-staff-wrap{grid-row:1 / span 2}.learn-goal{grid-row:3}.learn-step-root.two-parts .learn-staff-wrap{max-height:56vh}}.learn-score{position:relative;width:max-content;min-width:100%}.learn-score.with-labels{padding-bottom:22px}.learn-score-host{display:block}.learn-score-host>div{display:block}.learn-score-host svg{display:block}.learn-score-current{position:absolute;pointer-events:none;border-radius:8px;background:#3fd6c81f;border:1.5px solid rgba(63,214,200,.55);box-sizing:border-box}.learn-score-cursor{position:absolute;left:0;width:0;pointer-events:none;transition:none}.learn-score-cursor>span{position:absolute;left:-1px;top:0;bottom:0;width:2px;background:#ffd45e;border-radius:1px}.learn-score-cursor>span:before{content:"";position:absolute;left:-5px;top:-8px;border:6px solid transparent;border-top:8px solid #ffd45e;border-bottom:0}.learn-score-cursor.ready>span{background:repeating-linear-gradient(180deg,#ffd45e 0 4px,transparent 4px 7px);opacity:.75}.learn-score-label{position:absolute;transform:translate(-50%);font-size:11px;color:#e8eef6b3;white-space:nowrap;pointer-events:none}.learn-score-label.cur{color:#3fd6c8;font-weight:700}.learn-score-label.row2{transform:translate(-50%,14px)}.learn-score-label.row3{transform:translate(-50%,28px)}.learn-score-label.tight{font-size:9px}.learn-beat-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:6px}.learn-beat-row .learn-beat-dots{margin-top:0}.learn-beat-dots .bt.first{border-color:#ffd45e}.learn-beat-dots .bt.first.now{background:#ffd45e;border-color:#ffd45e;box-shadow:0 0 12px #ffd45eb3}.learn-click-toggle{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;font-weight:700;color:#dce8f5;background:#16243a;border:1px solid #27405f;border-radius:999px;padding:6px 12px;cursor:pointer;min-height:36px}.learn-click-toggle[aria-pressed=false]{color:#8fa3ba;text-decoration:line-through}.learn-click-toggle:active{filter:brightness(1.12)}.learn-confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}.learn-done-badge{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:#0d1420;background:#ffd45e;border-radius:999px;padding:6px 14px;margin-bottom:8px;animation:learn-badge-pop .45s cubic-bezier(.2,1.4,.4,1) both}.learn-done-badge.chapter{background:linear-gradient(90deg,#ffd45e,#5cf09a)}.learn-done-badge.review{background:#1e3a5a;color:#dce8f5;font-weight:700;animation:none}.learn-done-progress{font-size:13px;color:#9fb2c8;margin-top:6px}@keyframes learn-badge-pop{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}@media (prefers-reduced-motion: reduce){.learn-done-badge{animation:none}}.learn-compare{display:flex;flex-direction:column;gap:10px;margin-top:6px}.learn-compare-card{display:flex;flex-direction:column;gap:6px;background:#16243a;border:1px solid #27405f;border-radius:14px;padding:10px 12px}.learn-compare-card.heard{border-color:#2fd67f}.learn-compare-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.learn-compare-label{font-size:14px;font-weight:700;color:#eaf3ff;word-break:var(--wb)}.learn-compare-heard{font-size:12px;font-weight:700;color:#5cf09a}.learn-staff-wrap.small{padding:4px 6px;background:#0f1a2c}.learn-compare .btn{min-height:44px}@media (orientation: landscape) and (max-height: 520px){.learn-compare{grid-column:1 / span 2;grid-row:2}.learn-compare-card{flex-direction:row;align-items:center;flex-wrap:wrap}.learn-compare-card .learn-staff-wrap.small{flex:1 1 260px;max-height:120px}}.learn-theory-btn{width:64px;flex-shrink:0;font:inherit;font-size:13px;font-weight:700;color:#9aa8ff;background:#182a4d;border:1px solid #3a4a8a;border-radius:999px;padding:6px 0;cursor:pointer}.th-root{display:flex;flex-direction:column;height:100dvh;padding-bottom:0}.th-header{margin-bottom:8px;flex-shrink:0}.th-title{font-size:20px;flex:1;min-width:0;text-align:center;word-break:var(--wb);overflow-wrap:anywhere}.th-pick-btn{flex-shrink:0;min-height:44px;font:inherit;font-size:15px;font-weight:700;color:#eaf3ff;background:#182a4d;border:1px solid #3a4a8a;border-radius:12px;padding:8px 14px;cursor:pointer}.th-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-bottom:8px}.th-lead{margin:0;font-size:18px;line-height:1.5;color:#dce8f5;white-space:normal;word-break:var(--wb);overflow-wrap:anywhere}.th-hint{margin:0;font-size:15px;color:#9fb2c8;word-break:var(--wb);overflow-wrap:anywhere}.th-label{font-size:19px;font-weight:800;color:#eaf3ff;line-height:1.3;word-break:var(--wb);overflow-wrap:anywhere}.th-sub{font-size:15px;color:#9fb2c8;margin-top:2px;word-break:var(--wb);overflow-wrap:anywhere}.th-note{margin:0;font-size:17px;line-height:1.5;color:#dce8f5;word-break:var(--wb);overflow-wrap:anywhere}.th-playing-text{font-size:14px;font-weight:700;color:#ffd45e}.th-listen{min-height:48px;font-size:16px;padding:10px 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px}.th-listen.on{background:#3a2f10;border-color:#ffd45e;color:#ffd45e}.th-rows{display:flex;flex-direction:column;gap:8px}.th-row{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;row-gap:6px;align-items:center;background:#16243a;border:1px solid #27405f;border-radius:14px;padding:7px 12px}.th-row.playing{border-color:#ffd45e;background:#1a2b3f}.th-row-score{grid-column:1;grid-row:1 / span 2;overflow:visible}.th-row-score .learn-score{min-width:0;width:100%}.th-row-text{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:2px;min-width:0;align-self:end}.th-row-act{grid-column:2;grid-row:2;display:flex;align-items:center;gap:8px;min-width:0;align-self:start}.th-row-act .th-bar{flex:1;min-width:40px;margin-top:0}.th-row-act .th-listen{flex-shrink:0;padding:10px;min-width:108px}.th-row-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}.th-len{font-size:16px;font-weight:700;color:#7fd7cc;white-space:nowrap}.th-bar{position:relative;display:flex;gap:4px;height:16px;margin-top:3px}.th-bar-cell{flex:1;position:relative;overflow:hidden;background:#10203a;border:1px solid #2a3f5c;border-radius:4px;box-sizing:border-box}.th-bar-cell-fill{position:absolute;left:0;top:0;bottom:0;background:#3fd6c88c;border-radius:2px;pointer-events:none}.th-bar-cell.lit{border-color:#ffd45e;box-shadow:0 0 6px #ffd45e99}.th-bar-cell.lit .th-bar-cell-fill{background:#ffd45e}.th-bar-cell.lit.full{background:#3a2f10}@media (prefers-reduced-motion: reduce){.th-bar-cell.lit{box-shadow:none}}.th-stack{display:flex;flex-direction:column;gap:12px}.th-card{display:flex;flex-direction:column;gap:8px;background:#16243a;border:1px solid #27405f;border-radius:14px;padding:12px 14px}.th-card.playing{border-color:#ffd45e;background:#1a2b3f}.th-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.th-card-score{background:#0f1a2c;border-radius:10px;padding:6px 8px;overflow:visible}.th-card-score .learn-score{min-width:0;width:100%}.th-keys{display:block;width:100%;height:64px}.th-beats{display:flex;align-items:center;gap:8px}.th-beat{width:16px;height:16px;border-radius:50%;background:#1f3350;border:2px solid #34506f}.th-beat.strong{width:22px;height:22px;border-color:#ffd45e}.th-beat.medium{width:19px;height:19px;border-color:#c9a94a;border-style:dashed}.th-beat.gap{margin-left:12px}.th-beat.now{background:#3fd6f0;border-color:#3fd6f0;box-shadow:0 0 10px #3fd6f0b3}.th-tabs{display:flex;flex-wrap:wrap;gap:8px}.th-stepper{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}.th-step-btn{min-height:48px;font-size:16px}.th-step-btn:disabled{opacity:.4}.th-step-pos{font-size:15px;color:#9fb2c8;white-space:nowrap}.th-tab{min-height:48px;padding:8px 16px;font:inherit;font-size:17px;font-weight:700;color:#dce8f5;background:#16243a;border:1px solid #27405f;border-radius:12px;cursor:pointer}.th-tab.on{background:#182a4d;border-color:#6c7cf2;color:#fff;text-decoration:underline;text-underline-offset:4px}.th-more{display:flex;flex-direction:column;gap:8px}.th-more-btn{align-self:flex-start;min-height:44px;font:inherit;font-size:15px;font-weight:700;color:#9aa8ff;background:transparent;border:1px solid #3a4a8a;border-radius:999px;padding:8px 14px;cursor:pointer}.th-more-text{margin:0;font-size:17px;line-height:1.5;color:#c6d6e8;word-break:var(--wb);overflow-wrap:anywhere}.th-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:10px 0 calc(10px + var(--kbb, 0px));flex-shrink:0;border-top:1px solid #1c2c44}.th-nav-btn{min-height:48px;font-size:16px}.th-nav-btn:disabled{opacity:.4}.th-pos{font-size:15px;color:#9fb2c8;white-space:nowrap}.th-picker{position:fixed;inset:0;background:#0d1420;z-index:20;display:flex;flex-direction:column;padding:calc(12px + var(--sat, 0px)) max(16px,var(--sar)) calc(16px + var(--sab, 0px)) max(16px,var(--sal))}.th-picker-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;margin-bottom:8px}.th-picker-title{font-size:20px;font-weight:800;color:#eaf3ff}.th-picker-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin:12px 0 0;padding:0;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}.th-picker-item{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 14px;font:inherit;font-size:18px;font-weight:700;color:#eaf3ff;background:#16243a;border:1px solid #27405f;border-radius:12px;cursor:pointer;text-align:left}.th-picker-item.on{border-color:#6c7cf2;background:#182a4d}.th-picker-icon{color:#7fd7cc;display:inline-flex;flex-shrink:0}.th-picker-name{flex:1;min-width:0;word-break:var(--wb);overflow-wrap:anywhere}.th-picker-num{font-size:14px;color:#8fa3ba}@media (max-width: 360px){.th-title{font-size:18px}.th-row{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto}.th-row-score{grid-column:1;grid-row:1}.th-row-text{grid-column:1;grid-row:2}.th-row-act{grid-column:1;grid-row:3}}@media (orientation: landscape) and (max-height: 520px){.th-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.th-stack>.th-tabs{grid-column:1 / -1}.th-stack>.th-card:only-child,.th-stack>.th-tabs~.th-card{grid-column:1 / -1}.th-nav{padding:6px 0 calc(6px + var(--kbb, 0px))}}.learn-done-mp{font-size:15px;font-weight:700;color:#ffd45e;word-break:var(--wb);overflow-wrap:anywhere;margin:6px 0 0}.lang-select{width:100%;font-size:16px;padding:10px 12px;border-radius:10px;background:#0f1a2c;color:#eaf3ff;border:1px solid #27405f}.lang-prompt .lang-select{margin:4px 0 2px}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.modal-head h2{min-width:0;flex:1;word-break:var(--wb);overflow-wrap:anywhere}.btn.small{padding:6px 10px;font-size:13px;white-space:nowrap;flex-shrink:0}.song-access{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}.song-access small{font-size:11px;color:#7fd7cc;white-space:nowrap}.song-buy-song{font-weight:700;color:#eaf3ff;margin:-6px 0 0}.song-buy-option{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid #27405f;border-radius:12px;background:#121d30}.song-buy-option h3{font-size:16px;margin:0}.song-buy-bullets{margin:0;padding-left:18px;color:#a9bdd6;font-size:13px;line-height:1.45;display:flex;flex-direction:column;gap:3px;word-break:var(--wb);overflow-wrap:anywhere}.song-buy-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}.sheet-pdf-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.sheet-pdf-license{color:#6d829b;font-size:12px;line-height:1.5;margin:0 0 10px}.sheet-pdf-viewer-wrap{position:fixed;inset:0;display:flex;flex-direction:column;background:#0b1220;padding:calc(8px + var(--sat)) max(12px,var(--sar)) calc(12px + var(--sab)) max(12px,var(--sal))}.sheet-pdf-viewer-head{flex-shrink:0}.sheet-pdf-scroll{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}.sheet-pdf-pages{display:flex;flex-direction:column;gap:8px;align-items:center}.sheet-pdf-page{background:#fff;max-width:100%;box-shadow:0 2px 8px #0006}