:root{color-scheme:light;--bg: #ffffff;--card: #ffffff;--fill: #f7f7f7;--fill-hover: #f0f0f0;--scrim: rgba(60, 60, 60, .45);--text: #4b4b4b;--text-2: #777777;--text-3: #afafaf;--text-disabled: #cccccc;--line: #e5e5e5;--line-strong: #d4d4d4;--line-input: #e5e5e5;--green: #58cc02;--green-edge: #58a700;--green-tint: #d7ffb8;--green-ink: #4a9902;--blue: #1cb0f6;--blue-edge: #1899d6;--blue-tint: #ddf4ff;--blue-line: #84d8ff;--orange: #ff9600;--orange-tint: #ffe5c4;--yellow: #ffc800;--yellow-tint: #fff1c1;--red: #ff4b4b;--red-edge: #ea2b2b;--red-tint: #ffdfe0;--ok: var(--green-edge);--ok-ink: #ffffff;--ok-tint: var(--green-tint);--bad: var(--red);--bad-ink: #ffffff;--bad-tint: var(--red-tint);--gold: var(--orange);--accent: var(--green);--accent-hover: #61e002;--accent-press: var(--green-edge);--accent-tint: var(--green-tint);--accent-glow: rgba(88, 204, 2, .35);--ink-on-accent: #ffffff;--surface-1: var(--card);--surface-2: var(--fill);--surface-3: var(--fill-hover);--surface-hover: var(--fill);--overlay-hover: rgba(0, 0, 0, .04);--overlay-press: rgba(0, 0, 0, .07);--bg-2: var(--card);--ink: var(--text);--ink-soft: var(--text-2);--accent-2: var(--green);--font-display: "Nunito", system-ui, -apple-system, sans-serif;--font-sans: "Nunito", system-ui, -apple-system, sans-serif;--font-mono: "Nunito", system-ui, -apple-system, sans-serif;--s1: 4px;--s1-5: 6px;--s2: 8px;--s2-5: 10px;--s3: 12px;--s4: 16px;--s5: 20px;--s6: 24px;--s7: 32px;--s8: 40px;--r-xs: 8px;--r-sm: 10px;--r-md: 12px;--r-lg: 16px;--r-xl: 20px;--shadow-md: 0 6px 18px rgba(0, 0, 0, .1);--shadow-lg: 0 12px 32px rgba(0, 0, 0, .14);--dur-instant: 80ms;--dur-fast: .12s;--dur-base: .18s;--ease: cubic-bezier(.4, 0, .2, 1);--ease-out: cubic-bezier(0, .4, 0, 1);--ease-spring: cubic-bezier(.34, 1.4, .64, 1)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font-sans);font-weight:600;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh;min-height:100dvh;padding:var(--s4) var(--s4) calc(92px + env(safe-area-inset-bottom));padding-top:calc(var(--s4) + env(safe-area-inset-top))}.container{max-width:640px;margin:0 auto}button{touch-action:manipulation;-webkit-appearance:none;user-select:none;-webkit-user-select:none;font-family:inherit;color:inherit}button:focus{outline:none}:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--r-xs)}input,textarea{font-family:inherit}.top-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s4)}.title{font-family:var(--font-display);font-weight:900;font-size:20px;letter-spacing:-.01em;line-height:1;color:var(--green)}.title em{font-style:normal;color:var(--green)}.key-badge{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);background:var(--fill);border:2px solid var(--line);padding:4px 10px;border-radius:99px;font-variant-numeric:tabular-nums}.view-nav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:var(--s1);align-items:stretch;background:var(--card);border-top:2px solid var(--line);padding:6px var(--s2) calc(6px + env(safe-area-inset-bottom))}.view-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;border:2px solid transparent;background:transparent;color:var(--text-3);font-weight:800;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:6px 2px 5px;border-radius:var(--r-md);cursor:pointer;transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}.view-tab .vt-ico{font-size:21px;line-height:1;filter:grayscale(1) opacity(.5);transition:filter var(--dur-fast) var(--ease)}.view-tab.active{background:var(--blue-tint);border-color:var(--blue-line);color:var(--blue-edge)}.view-tab.active .vt-ico{filter:none}.top-actions{display:flex;align-items:center;gap:var(--s3)}.auth-btn{background:none;border:none;color:var(--text-3);font-size:13px;font-weight:700;cursor:pointer;transition:color var(--dur-fast) var(--ease)}#auth-slot{position:relative}.auth-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:50;display:flex;flex-direction:column;gap:6px;min-width:220px;background:var(--card);border:2px solid var(--line);border-radius:var(--r-lg);padding:10px;box-shadow:var(--shadow-lg)}.auth-opt{width:100%;text-align:left;cursor:pointer;background:var(--card);color:var(--text);border:2px solid var(--line);border-radius:var(--r-md);padding:10px 12px;font-size:14px;font-weight:800}.auth-opt:active{background:var(--blue-tint);color:var(--blue-edge);border-color:var(--blue-line)}.auth-opt.secondary{background:none;border-color:transparent;color:var(--text-2);font-weight:700;font-size:13px;padding:6px 12px}.auth-opt.secondary:active{background:var(--overlay-press);color:var(--text)}#ios-audio-hint{display:flex;align-items:center;gap:var(--s2);justify-content:space-between;background:var(--blue-tint);border:2px solid var(--blue-line);border-radius:var(--r-lg);padding:10px 14px;margin-bottom:var(--s3);font-size:13px;line-height:1.45;color:var(--text)}#install-hint{display:flex;align-items:center;gap:var(--s2);background:var(--green-tint);border:2px solid var(--green);border-radius:var(--r-lg);padding:10px 14px;margin-bottom:var(--s3);font-size:13px;line-height:1.45;color:var(--text)}#install-hint span{flex:1}#install-hint b{color:var(--green-edge)}#install-hint-btn{flex:none;background:var(--green);color:#fff;border:none;border-radius:var(--r-md);padding:8px 14px;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;box-shadow:0 2px 0 var(--green-edge)}#install-hint-x{background:none;border:none;cursor:pointer;color:var(--text-2);font-size:15px;flex:none}#ios-audio-hint b{color:var(--blue-edge)}#ios-audio-hint button{background:none;border:none;cursor:pointer;color:var(--text-2);font-size:15px;flex:none}.mode-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s1);margin-bottom:var(--s5);padding:var(--s1);background:var(--fill);border:2px solid var(--line);border-radius:var(--r-lg)}.mode-tabs.five{grid-template-columns:repeat(5,1fr)}.mode-tab{background:transparent;border:none;padding:10px 4px;font-size:13px;font-weight:800;color:var(--text-3);cursor:pointer;border-radius:var(--r-md);transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);text-align:center;white-space:nowrap;position:relative}.mode-tab>*{pointer-events:none}.mode-tab.active{background:var(--card);color:var(--blue-edge);box-shadow:0 2px 4px #0000000f}.play-area{text-align:center;margin-bottom:var(--s5)}.prompt{font-size:16px;color:var(--text-2);font-weight:700;line-height:1.45;margin-bottom:var(--s4);min-height:40px;display:flex;align-items:center;justify-content:center;padding:0 var(--s2)}.big-btn{background:var(--green);color:#fff;border:none;padding:15px 28px;font-size:15px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border-radius:var(--r-lg);width:100%;max-width:380px;box-shadow:0 4px 0 var(--green-edge);transition:filter var(--dur-fast) var(--ease)}.big-btn:disabled{background:var(--fill);color:var(--text-3);box-shadow:0 4px 0 var(--line)}.secondary-actions{display:flex;justify-content:center;gap:var(--s2);margin-top:var(--s4);flex-wrap:wrap}.small-btn{background:var(--card);border:2px solid var(--line);color:var(--text-2);padding:8px 14px;font-size:13px;font-weight:800;cursor:pointer;border-radius:var(--r-md);min-height:40px;box-shadow:0 2px 0 var(--line);transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}.small-btn:disabled{opacity:.4;box-shadow:none}.small-btn.active{background:var(--blue-tint);color:var(--blue-edge);border-color:var(--blue-line);box-shadow:0 2px 0 var(--blue-line)}#sing-status{display:none;align-items:center;justify-content:center;gap:var(--s2);margin-top:var(--s3);font-size:13px;font-weight:800;color:var(--green-edge)}.progression-slots{display:flex;justify-content:center;gap:var(--s2);margin-bottom:var(--s4);min-height:72px}.prog-slot{width:70px;height:72px;padding:0;border:2px solid var(--line);border-radius:var(--r-md);background:var(--card);color:var(--text);box-shadow:0 3px 0 var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:border-color var(--dur-base) var(--ease),background var(--dur-base) var(--ease)}.prog-slot:disabled{cursor:default;opacity:1}.prog-slot.active{border-color:var(--blue);box-shadow:0 3px 0 var(--blue)}.prog-slot.filled{border-color:var(--line-strong);cursor:pointer}.prog-slot.correct{background:var(--green-tint);color:var(--green-ink);border-color:var(--green);box-shadow:0 3px 0 var(--green)}.prog-slot.wrong{background:var(--red-tint);color:var(--red-edge);border-color:var(--red);box-shadow:0 3px 0 var(--red)}.prog-slot.locked{opacity:.9}.prog-slot .slot-roman{font-size:21px;font-weight:900;line-height:1.1;color:inherit}.prog-slot .slot-pos{font-size:10px;font-weight:800;color:var(--text-3);margin-bottom:3px;font-variant-numeric:tabular-nums}.prog-slot.correct .slot-pos,.prog-slot.wrong .slot-pos{color:currentColor;opacity:.7}.prog-slot .slot-reveal{font-size:10px;font-weight:700;opacity:.9;margin-top:2px}.answer-grid{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s5)}.answer-row{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s2)}.degree-btn{background:var(--card);border:2px solid var(--line);padding:14px 2px 12px;cursor:pointer;border-radius:var(--r-md);box-shadow:0 4px 0 var(--line);position:relative;overflow:hidden;color:var(--text);min-height:68px;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-instant) var(--ease)}.degree-btn:disabled{cursor:not-allowed}.degree-btn.correct{background:var(--green-tint)!important;color:var(--green-ink)!important;border-color:var(--green)!important;box-shadow:0 4px 0 var(--green)!important}.degree-btn.wrong{background:var(--red-tint)!important;color:var(--red-edge)!important;border-color:var(--red)!important;box-shadow:0 4px 0 var(--red)!important}.degree-btn.reveal{box-shadow:inset 0 0 0 2px var(--green),0 4px 0 var(--line)}.degree-btn.dim{opacity:.35;pointer-events:none}.roman{font-size:22px;font-weight:900;line-height:1;display:block;pointer-events:none}.note-name{font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--text-3);margin-top:6px;display:block;pointer-events:none;font-variant-numeric:tabular-nums}.degree-btn.correct .note-name,.degree-btn.wrong .note-name{color:currentColor;opacity:.75}.mastery-bar{position:absolute;bottom:0;left:0;height:4px;background:var(--green);transition:width .4s var(--ease-out);pointer-events:none}.panel{background:var(--card);border:2px solid var(--line);border-radius:var(--r-lg);margin-bottom:var(--s3);overflow:hidden}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:14px var(--s4);cursor:pointer;background:transparent;border:none;width:100%;text-align:left;color:var(--text);transition:background var(--dur-fast) var(--ease)}.panel-title{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);pointer-events:none;display:flex;align-items:center;gap:var(--s2)}.panel-summary{font-size:11px;font-weight:700;color:var(--text-3);pointer-events:none}.panel-chevron{font-size:10px;color:var(--text-3);transition:transform var(--dur-base) var(--ease);pointer-events:none}.panel.open .panel-chevron{transform:rotate(90deg)}.panel-body{display:none;padding:0 var(--s4) var(--s4)}.panel.open .panel-body{display:block}.panel .tip{font-size:13.5px;font-weight:600;color:var(--text-2);line-height:1.5;margin-bottom:var(--s2-5);padding:10px 12px;background:var(--fill);border-radius:var(--r-md)}.panel .tip b{color:var(--text);font-weight:800}.panel .tip:last-child{margin-bottom:0}.stats-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-bottom:var(--s2)}.stat-mini{text-align:center}.stat-mini-num{font-size:26px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}.stat-mini-label{font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--text-3);text-transform:uppercase;margin-top:5px}.summary-bar{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:11px var(--s4);background:var(--fill);border:2px solid transparent;border-radius:var(--r-lg);margin-bottom:var(--s3);font-size:13px;font-weight:700;color:var(--text-2);flex-wrap:wrap}.summary-bar .sb-stats{display:flex;gap:var(--s4);flex-wrap:wrap}.summary-bar .sb-num{color:var(--text);font-weight:900;font-variant-numeric:tabular-nums}.summary-bar .sb-focus{color:var(--blue-edge);font-weight:800}.opt-row{display:flex;align-items:center;gap:var(--s2-5);margin-bottom:var(--s2-5);flex-wrap:wrap}.opt-row:last-child{margin-bottom:0}.opt-label{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--text-3);text-transform:uppercase;min-width:64px}.opt-buttons{display:flex;gap:var(--s1-5);flex-wrap:wrap;flex:1}.opt-buttons .small-btn{flex:1;min-width:0;padding:8px;font-size:12.5px}.checkbox-row{display:flex;align-items:center;gap:var(--s2);font-size:13.5px;font-weight:600;color:var(--text-2);text-transform:none;cursor:pointer;line-height:1.4}.checkbox-row input[type=checkbox]{accent-color:var(--green);width:18px;height:18px;flex:none}.checkbox-row em{font-style:normal;color:var(--text);font-weight:800}.drill-picker-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s1-5);margin-bottom:var(--s2-5)}.drill-pick{background:var(--card);border:2px solid var(--line);box-shadow:0 2px 0 var(--line);padding:11px 2px;font-size:16px;font-weight:900;color:var(--text);cursor:pointer;border-radius:var(--r-md);min-height:46px;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}.drill-pick.selected{background:var(--blue-tint);color:var(--blue-edge);border-color:var(--blue-line);box-shadow:0 2px 0 var(--blue-line)}.drill-pick:disabled{opacity:.35}.history-list{font-size:13px;font-weight:600;color:var(--text-2);line-height:1.7;max-height:220px;overflow-y:auto;font-variant-numeric:tabular-nums}.history-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:2px solid var(--fill);gap:var(--s2)}.history-row:last-child{border-bottom:none}.history-row .h-correct{color:var(--green-edge)}.history-row .h-wrong{color:var(--red-edge)}.history-row .h-target{font-weight:800;color:var(--text)}.history-row .h-meta{color:var(--text-3)}.history-empty{color:var(--text-3);font-style:italic}.reset-link{background:none;border:none;color:var(--text-3);font-size:12.5px;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:var(--s2) 0;margin-top:var(--s1);transition:color var(--dur-fast) var(--ease)}.pattern-name{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:var(--yellow-tint);color:#b58a00;padding:3px 9px;border-radius:99px;margin-left:var(--s1-5)}.keyboard-hints{display:none;text-align:center;margin-top:var(--s5);font-size:12px;font-weight:600;color:var(--text-3);line-height:2}.keyboard-hints kbd{font-family:inherit;background:var(--fill);border:2px solid var(--line);padding:1px 7px;border-radius:6px;font-size:11px;font-weight:800;color:var(--text-2)}#song-card{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:var(--s4)}.song-card-head{display:flex;justify-content:space-between;align-items:center}#song-streak{font-size:13px;font-weight:800;color:var(--orange);font-variant-numeric:tabular-nums}#song-now{margin-top:calc(-1 * var(--s2))}.song-now-title{font-weight:900;font-size:18px;color:var(--text);line-height:1.25}.song-now-sub{font-size:12px;font-weight:700;color:var(--text-3);margin-top:2px}.song-controls{display:flex;align-items:center;gap:var(--s3)}#song-play{flex:1}.song-source{display:flex;gap:var(--s1-5)}.song-source button{padding:9px 11px;font-size:18px;cursor:pointer;border-radius:var(--r-md);background:var(--card);border:2px solid var(--line);opacity:.55;transition:opacity var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}.song-source button.active{opacity:1;background:var(--blue-tint);border-color:var(--blue-line)}.phase-label{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--s1-5)}#song-dont-know{align-self:flex-start;background:none;border:none;color:var(--blue);cursor:pointer;padding:var(--s1) 0;font-size:13.5px;font-weight:800}#song-reveal{padding:var(--s4);border-radius:var(--r-lg);background:var(--card);border:2px solid var(--line)}#song-reveal .rv-mark{font-weight:900;font-size:18px}#song-reveal .rv-title{font-weight:800;font-size:15px;color:var(--text);margin-top:2px}#song-reveal .rv-sec{font-size:12px;font-weight:700;color:var(--text-3);margin-top:3px}#song-replay-clip{margin-top:var(--s2);background:var(--card);border:2px solid var(--line);box-shadow:0 2px 0 var(--line);border-radius:var(--r-md);padding:8px 12px;cursor:pointer;font-size:13px;font-weight:700;color:var(--text-2)}#song-empty{text-align:center;color:var(--text-2);padding:var(--s6)}.contour-svg{width:100%;height:90px;color:var(--text-3);display:block}.contour-dot{cursor:pointer}.contour-ctl{display:flex;gap:var(--s2);justify-content:center;margin-top:var(--s2)}.contour-dir{flex:1;max-width:130px;padding:12px 8px;font-size:14px;cursor:pointer}.browse{display:flex;flex-direction:column;gap:var(--s3)}.browse-top,.drill-head{display:flex;gap:var(--s2);align-items:center}.browse-search{flex:1;width:100%;padding:11px 14px;font-size:15px;font-weight:600;border:2px solid var(--line);border-radius:var(--r-md);background:var(--fill);color:var(--text);transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}.browse-search::placeholder{color:var(--text-3)}.browse-search:focus{outline:none;border-color:var(--blue-line);background:var(--card)}.browse-done,.drill-all{padding:11px 16px;font-size:13px;cursor:pointer;white-space:nowrap;background:var(--green);color:#fff;border:none;border-radius:var(--r-md);font-weight:800;text-transform:uppercase;letter-spacing:.05em;box-shadow:0 3px 0 var(--green-edge)}.browse-done:disabled{background:var(--fill);color:var(--text-3);box-shadow:0 3px 0 var(--line)}.art-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--s4);max-height:64vh;overflow:auto;padding:var(--s1)}.art-card{position:relative;cursor:pointer;text-align:center}.art-pic{width:100%;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:22px;overflow:hidden;background-size:cover;background-position:center;box-shadow:0 4px 12px #00000026;transition:transform var(--dur-base) var(--ease)}.art-card.sel .art-pic{outline:3px solid var(--green);outline-offset:2px}.art-name{font-size:13px;font-weight:700;color:var(--text);margin-top:var(--s1-5);line-height:1.2}.art-count{font-size:11px;font-weight:700;color:var(--text-3);margin-top:2px}.art-add{position:absolute;top:0;right:0;width:28px;height:28px;border-radius:50%;border:2px solid var(--bg);background:#00000080;color:#fff;cursor:pointer;font-size:15px;line-height:1}.art-card.sel .art-add{background:var(--green);color:#fff}.drill-head{margin-bottom:var(--s2-5)}.drill-back{background:none;border:none;color:var(--blue);cursor:pointer;font-size:14px;font-weight:800}.drill-name{font-weight:800;flex:1;color:var(--text)}.song-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--s3);max-height:64vh;overflow:auto}.song-tile{cursor:pointer;background:transparent;border:none;padding:0;text-align:left;display:block;width:100%}.song-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:var(--fill)}.song-thumb img{width:100%;height:100%;object-fit:cover;display:block}.song-check{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#d7ffb8bf;box-shadow:inset 0 0 0 3px var(--green);color:var(--green-edge);font-size:26px}.song-tile.sel .song-check{display:flex}.song-t{display:block;font-size:13px;font-weight:700;color:var(--text);margin-top:var(--s1);line-height:1.2}.song-s{display:block;font-size:11px;font-weight:700;color:var(--text-3);margin-top:1px}.browse-error,.browse-loading,.browse-empty{color:var(--text-3);padding:var(--s3);text-align:center}.browse-list{max-height:280px;overflow-y:auto;border:2px solid var(--line);border-radius:var(--r-md)}.browse-item{display:block;width:100%;text-align:left;background:transparent;border:0;border-bottom:2px solid var(--fill);padding:10px 12px;font-size:13px;cursor:pointer;transition:background var(--dur-fast) var(--ease)}.browse-item:last-child{border-bottom:none}.browse-item-title{display:block;font-weight:700;color:var(--text)}.browse-item-meta{display:block;font-size:11px;font-weight:600;color:var(--text-3);margin-top:1px}#sketch-lane-wrap{background:var(--fill);border:2px solid var(--line);border-radius:var(--r-lg);padding:var(--s2);margin:var(--s3) 0;color:var(--text-3);overflow-x:auto}.sketch-lane{display:block;height:140px}.sketch-tune{display:flex;gap:var(--s2-5);margin:var(--s3) 0}.sketch-tune .big-btn{flex:1}.sketch-tune #sketch-add{flex:2}.sketch-readout{margin-top:var(--s4);text-align:center}.sketch-notes{font-size:15px;font-weight:800;color:var(--text);letter-spacing:.04em;min-height:18px;font-variant-numeric:tabular-nums}.sketch-key{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-top:var(--s2);min-height:14px}#sketch-timbre{margin-left:auto;display:flex;gap:var(--s1-5)}@media(hover:hover)and (pointer:fine){.view-tab:hover:not(.active){color:var(--text-2);background:var(--fill)}.mode-tab:hover:not(.active){color:var(--text-2);background:var(--overlay-hover)}.big-btn:hover:not(:disabled){filter:brightness(1.06)}.small-btn:hover:not(:disabled):not(.active){color:var(--text);background:var(--fill)}.degree-btn:hover:not(:disabled):not(.correct):not(.wrong){background:var(--fill)}.drill-pick:hover:not(:disabled):not(.selected){background:var(--fill)}.panel-header:hover{background:var(--overlay-hover)}.reset-link:hover,.auth-btn:hover,#song-dont-know:hover,.drill-back:hover{color:var(--text)}.art-card:hover .art-pic{transform:translateY(-2px)}.song-source button:hover:not(.active){opacity:.85}.browse-item:hover{background:var(--fill)}.path-level:not(:disabled):not(.current):hover{background:var(--fill)}.contour-dir:hover:not(.active){color:var(--text);background:var(--fill)}.keyboard-hints{display:block}}@media(prefers-reduced-motion:no-preference){.big-btn:active:not(:disabled){transform:translateY(4px);box-shadow:none}.small-btn:active:not(:disabled){transform:translateY(2px);box-shadow:none}.degree-btn:active:not(:disabled):not(.correct):not(.wrong){transform:translateY(4px);box-shadow:none}.drill-pick:active:not(:disabled){transform:translateY(2px);box-shadow:none}.degree-btn.correct{animation:pop var(--dur-base) var(--ease-spring)}@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.05)}to{transform:scale(1)}}}#workout-bar{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}.wb-track{flex:1;height:14px;background:var(--line);border-radius:99px;overflow:hidden}.wb-fill{height:100%;width:0;background:var(--green);border-radius:99px;transition:width var(--dur-base) var(--ease-out)}.wb-count{font-size:12.5px;font-weight:800;color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}.wb-end{background:transparent;border:2px solid var(--line);color:var(--text-3);font-weight:800;font-size:12px;padding:5px 12px;border-radius:99px;cursor:pointer}.path-title{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin:var(--s5) 0 var(--s3)}.path-level{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;background:var(--card);border:2px solid var(--line);border-radius:var(--r-lg);padding:var(--s3) var(--s4);margin-bottom:var(--s2);cursor:pointer;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}.path-level:disabled{cursor:default;opacity:.55}.path-level.current{border-color:var(--green);background:var(--card);box-shadow:0 3px 0 var(--green)}.pl-badge{flex:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;background:var(--fill);color:var(--text-3)}.path-level.done .pl-badge,.path-level.current .pl-badge{background:var(--green);color:#fff}.pl-text{display:flex;flex-direction:column;gap:2px}.pl-name{font-weight:800;font-size:14.5px;color:var(--text)}.path-level.locked .pl-name{color:var(--text-2)}.pl-desc{font-size:12.5px;font-weight:600;color:var(--text-3);line-height:1.35}#insights-view{display:flex;flex-direction:column;gap:var(--s3)}.ins-section{background:var(--card);border:2px solid var(--line);border-radius:var(--r-lg);padding:var(--s4)}.ins-section .stats-mini{margin-bottom:0}.ins-title{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--s3)}.ins-bar-row{display:grid;grid-template-columns:54px 1fr 68px;align-items:center;gap:var(--s2-5);margin-bottom:var(--s2)}.ins-bar-row:last-child{margin-bottom:0}.ins-bar-label{font-weight:900;font-size:16px;color:var(--text)}.ins-bar-label.reg{font-size:12.5px;font-weight:700;color:var(--text-2)}.ins-track{height:12px;background:var(--fill);border-radius:99px;overflow:hidden}.ins-fill{display:block;height:100%;border-radius:99px;background:var(--green);transition:width .4s var(--ease-out)}.ins-fill.low{background:var(--red)}.ins-fill.mid{background:var(--yellow)}.ins-fill.high{background:var(--green)}.ins-bar-meta{font-size:11.5px;font-weight:700;color:var(--text-3);text-align:right;font-variant-numeric:tabular-nums}.ins-conf-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:2px solid var(--fill)}.ins-conf-row:last-child{border-bottom:none}.ins-conf-pair{font-weight:900;font-size:16px;color:var(--text)}.ins-conf-pair .to{color:var(--text-3);margin:0 var(--s1-5);font-weight:600;font-size:12px}.ins-conf-n{font-size:12px;font-weight:700;color:var(--text-3);font-variant-numeric:tabular-nums}.ins-empty{text-align:center;color:var(--text-2);padding:var(--s7) var(--s4);line-height:1.5}.ins-empty.small{padding:var(--s4);font-size:13px}.ins-empty .big{font-size:18px;font-weight:900;color:var(--text);margin-bottom:var(--s2)}.ins-empty b{color:var(--green-edge);font-weight:800}.help-btn{flex:none;width:28px;height:28px;border-radius:50%;background:var(--fill);border:2px solid var(--line);color:var(--text-3);font-weight:900;font-size:14px;cursor:pointer;line-height:1}.onb-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:var(--s4);background:var(--scrim);backdrop-filter:blur(4px)}.onb-card{width:100%;max-width:440px;background:var(--card);border:2px solid var(--line);border-radius:var(--r-xl);padding:var(--s6);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:var(--s3)}@media(prefers-reduced-motion:no-preference){.onb-card{animation:onb-in .26s var(--ease-out)}}@keyframes onb-in{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}.onb-eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--green-edge)}.onb-h{font-size:23px;font-weight:900;color:var(--text);line-height:1.15}.onb-p{font-size:15px;font-weight:600;color:var(--text-2);line-height:1.55}.onb-p b{color:var(--text);font-weight:800}.onb-hint{display:block;margin-top:var(--s2);color:var(--text-3);font-size:13.5px}.onb-hint b{color:var(--green-edge)}.onb-list{list-style:none;display:flex;flex-direction:column;gap:var(--s2)}.onb-list li{font-size:14px;font-weight:600;color:var(--text-2);padding:8px 12px;background:var(--fill);border-radius:var(--r-md);line-height:1.4}.onb-list b{color:var(--text)}.onb-choices{display:flex;gap:var(--s2);margin-top:var(--s1)}.onb-choice{flex:1;background:var(--card);border:2px solid var(--line);box-shadow:0 4px 0 var(--line);color:var(--text);font-weight:900;font-size:18px;padding:16px 4px;border-radius:var(--r-md);cursor:pointer;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}.onb-choice.right{background:var(--green-tint);color:var(--green-ink);border-color:var(--green);box-shadow:0 4px 0 var(--green)}@media(prefers-reduced-motion:no-preference){.onb-choice.onb-target:not(.right){animation:onb-pulse 1.6s ease-in-out infinite}}@keyframes onb-pulse{0%,to{border-color:var(--line)}50%{border-color:var(--green)}}.onb-feedback{min-height:18px;font-size:13.5px;font-weight:700}.onb-feedback.ok{color:var(--green-edge)}.onb-feedback.bad{color:var(--text-3)}.onb-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:var(--s2)}.onb-actions.col{flex-direction:column;align-items:stretch}.onb-actions.col .big-btn{max-width:none}.onb-ghost{background:transparent;border:none;color:var(--text-3);font-weight:800;font-size:14px;padding:10px 12px;cursor:pointer}.onb-ghost:disabled{opacity:.4}.onb-dots{display:flex;gap:6px;justify-content:center;margin-top:var(--s1)}.onb-dots span{width:7px;height:7px;border-radius:50%;background:var(--line)}.onb-dots span.on{background:var(--green)}@media(hover:hover)and (pointer:fine){.help-btn:hover{color:var(--text-2);border-color:var(--line-strong)}.onb-ghost:hover{color:var(--text)}.onb-choice:not(.right):hover{background:var(--fill)}}@media(min-width:700px){body{padding:var(--s6) var(--s5) var(--s8)}.title{font-size:24px}.roman{font-size:26px}.degree-btn{min-height:86px;padding:20px 4px 16px}.note-name{font-size:11px}.big-btn{font-size:15px;padding:16px 36px}.prompt{font-size:16px;min-height:28px}.prog-slot{width:84px;height:84px}.prog-slot .slot-roman{font-size:26px}.stat-mini-num{font-size:30px}.view-nav{position:static;border-top:none;padding:var(--s1);background:var(--fill);border:2px solid var(--line);border-radius:var(--r-lg);margin-bottom:var(--s5)}.view-tab{flex-direction:row;justify-content:center;gap:7px;font-size:12px;padding:9px 6px}.view-tab .vt-ico{font-size:16px}}#today-view .gcard{background:var(--card);border:2px solid var(--line);border-radius:var(--r-lg);padding:20px 18px 18px;margin-bottom:var(--s3)}#today-view .streak{text-align:center;padding:6px 0 2px}#today-view .streak .sn{font-weight:900;font-size:64px;line-height:.95;color:var(--orange);font-variant-numeric:tabular-nums}#today-view .streak .su{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-top:8px}#today-view .week{display:flex;justify-content:center;gap:11px;margin:18px 0 6px}#today-view .week .day{display:flex;flex-direction:column;align-items:center;gap:6px}#today-view .week .day .d{font-size:10px;font-weight:800;color:var(--text-3)}#today-view .week .day .dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--line)}#today-view .week .day.on .dot{background:var(--orange);border-color:var(--orange)}#today-view .week .day.today .dot{border-color:var(--orange);border-style:dashed}#today-view .week .day.today.on .dot{border-style:solid;box-shadow:0 0 0 3px var(--orange-tint)}#today-view .today-state{text-align:center;font-size:13.5px;font-weight:600;margin-top:8px;color:var(--text-2)}#today-view .today-state.done{color:var(--green-edge)}#today-view .today-state b{color:var(--text);font-weight:800}#today-view .stat-inline{display:flex;justify-content:center;gap:28px;margin:16px 0 4px;padding-top:14px;border-top:2px solid var(--fill)}#today-view .stat-inline .s{text-align:center}#today-view .stat-inline .k{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}#today-view .stat-inline .v{font-size:18px;font-weight:900;margin-top:4px;font-variant-numeric:tabular-nums;color:var(--text)}#today-view .stat-inline .v.pine{color:var(--green-edge)}#today-view .gcard .big-btn{margin-top:18px;width:100%;max-width:none}#today-view .gsection{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin:22px 0 10px 2px}#today-view .glevel{display:flex;align-items:center;gap:10px;margin-bottom:14px}#today-view .glevel .n{font-size:12px;font-weight:900;color:#fff;background:var(--green);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none}#today-view .glevel .t{font-size:15px;font-weight:800;color:var(--text)}#today-view .glevel .t small{display:block;font-size:12.5px;font-weight:600;color:var(--text-2);margin-top:2px}#today-view .mastery{display:flex;align-items:flex-end;gap:6px;height:48px;padding:0 2px}#today-view .mastery .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}#today-view .mastery .bar{width:100%;background:var(--fill);border-radius:6px;position:relative;height:34px;overflow:hidden}#today-view .mastery .fill{position:absolute;bottom:0;left:0;right:0;background:var(--green);border-radius:6px 6px 0 0}#today-view .mastery .lab{font-size:10px;font-weight:800;color:var(--text-3)}#today-view .shelf{display:flex;gap:9px;flex-wrap:wrap}#today-view .badge{width:48px;text-align:center}#today-view .badge .mk{width:48px;height:48px;border-radius:var(--r-md);border:2px solid var(--line);display:grid;place-items:center;color:var(--text-disabled);background:var(--card)}#today-view .badge .mk svg{width:22px;height:22px}#today-view .badge.on .mk{border-color:var(--yellow);color:#b58a00;background:var(--yellow-tint)}#today-view .badge.on.ink .mk{border-color:var(--line-strong);color:var(--text);background:var(--fill)}#today-view .badge .bl{font-size:9px;font-weight:700;color:var(--text-3);margin-top:5px;line-height:1.15}#today-view .reward-banner{background:var(--green-tint);border:2px solid var(--green);border-radius:var(--r-lg);padding:12px 15px;margin-bottom:12px}#today-view .reward-banner .rb-mark{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--green-edge)}#today-view .reward-banner .rb-body{font-size:15px;font-weight:700;margin-top:3px;color:var(--text)}#today-view .reward-banner .rb-body b{font-weight:900}#today-view .freeze-line{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--text-2);margin-top:6px}#today-view .freeze-line svg{width:13px;height:13px;color:var(--blue);flex:none}#badge-toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translate(-50%,140%);display:flex;align-items:center;gap:11px;background:var(--card);color:var(--text);border:2px solid var(--line);border-radius:var(--r-lg);padding:11px 15px;box-shadow:var(--shadow-lg);z-index:60;max-width:88vw;opacity:0;transition:transform .32s cubic-bezier(.22,.61,.36,1),opacity .32s}#badge-toast.show{transform:translate(-50%);opacity:1}#badge-toast .mk{width:36px;height:36px;border-radius:var(--r-sm);border:2px solid var(--yellow);color:#b58a00;background:var(--yellow-tint);display:grid;place-items:center;flex:none}#badge-toast .mk svg{width:18px;height:18px}#badge-toast .txt .k{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--green-edge)}#badge-toast .txt .n{font-size:15px;font-weight:800;margin-top:2px}@media(prefers-reduced-motion:reduce){#badge-toast{transition:opacity .2s}}#today-view .sp-card{background:var(--card);border:2px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:var(--s3)}#today-view .sp-card .sp-lead{font-size:15px;font-weight:800;color:var(--text)}#today-view .sp-card .sp-sub{font-size:13px;font-weight:600;color:var(--text-2);margin-top:3px;line-height:1.45}#today-view .sp-card .sp-k{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}#today-view .sp-card .sp-title{font-size:18px;font-weight:900;color:var(--text);margin-top:3px;line-height:1.15}#today-view .sp-card .sp-artist{font-size:13px;font-weight:600;color:var(--text-2);margin-top:1px}#today-view .sp-card .sp-connect{margin-top:11px}#today-view .sp-card .sp-actions{display:flex;gap:8px;align-items:center;margin-top:12px}#today-view .sp-card .sp-actions .big-btn{flex:1}