:root{--bg: #0f172a;--panel: #1e293b;--panel-border: rgba(255, 255, 255, .08);--primary: #6366f1;--primary-glow: rgba(99, 102, 241, .4);--accent: #d946ef;--up: #34d399;--down: #f472b6;--gold: #fbbf24;--text: #f8fafc;--text-dim: #94a3b8;--success: #10b981;--error: #ef4444;--font: "Segoe UI", system-ui, -apple-system, sans-serif;--radius: 16px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;scrollbar-width:none}*::-webkit-scrollbar{display:none;width:0;height:0}body{margin:0;height:100dvh;font-family:var(--font);background:radial-gradient(circle at top right,#1e293b 0%,var(--bg) 70%);color:var(--text);overflow:hidden}h1,h2,h3,p{margin-top:0}.page{max-width:1100px;margin:0 auto;padding:.75rem;display:grid;gap:.75rem;height:100dvh;overflow:auto}.training-page{overflow:hidden;grid-template-rows:auto minmax(0,.86fr) minmax(0,1fr);gap:.6rem}.page-center{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:1rem;overflow:hidden}.card{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:.95rem;box-shadow:0 8px 20px #00000040;min-height:0}.training-visual-card,.training-input-card{display:flex;flex-direction:column;min-height:0}.training-input-card>p{margin:.25rem 0 .55rem;color:var(--text-dim)}.landing{max-width:640px}.landing h1{color:var(--gold);letter-spacing:.5px}.landing p{color:var(--text-dim)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem .95rem;background:var(--panel);border-radius:var(--radius);border:1px solid var(--panel-border)}.topbar h1{margin-bottom:.25rem}.topbar p{margin:0;color:var(--text-dim)}.grid-2{display:grid;gap:.75rem;grid-template-columns:repeat(2,minmax(0,1fr))}.column{display:flex;flex-direction:column;gap:.6rem}.row{display:flex;flex-wrap:wrap;gap:.45rem}button,.link-btn{border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#334155;color:var(--text);font-weight:700;padding:.58rem .9rem;cursor:pointer;text-decoration:none;transition:.18s}button:hover,.link-btn:hover{transform:translateY(-1px)}.link-btn{background:linear-gradient(90deg,var(--primary),#7c3aed);border-color:transparent;box-shadow:0 4px 12px var(--primary-glow)}button.secondary,.secondary{background:#ffffff0d;color:var(--text-dim)}button:disabled{opacity:.45;cursor:not-allowed}.error{color:var(--error)}.history{margin:0;padding-left:1rem;color:#dbe4f0;display:grid;gap:.45rem}.melody-canvas{width:100%;height:clamp(165px,30dvh,285px);background:#0b1220;border-radius:12px;border:1px solid var(--panel-border);box-shadow:inset 0 0 40px #0000008c}.audio-status{margin:.5rem 0 0;color:var(--gold);font-size:.85rem;font-weight:600}.interval-grid-wrapper{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;flex:1;min-height:0}.interval-column{border:1px solid var(--panel-border);border-radius:12px;overflow:hidden;background:#0003;min-height:0;display:flex;flex-direction:column}.interval-column h3{margin:0;text-align:center;font-size:.83rem;letter-spacing:.7px;text-transform:uppercase;padding:.5rem}.interval-column:first-child h3{color:var(--down);background:#f472b61f}.interval-column:last-child h3{color:var(--up);background:#34d3991f}.interval-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.42rem;padding:.42rem;min-height:0;overflow:auto}.interval-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.08rem;min-height:50px;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:9px;padding:.2rem;font-size:.82rem}.interval-btn small{color:#fff9;font-size:.62rem}.interval-btn.up:hover:not(:disabled){background:var(--up);color:#03170f;box-shadow:0 0 14px #34d39973;border-color:transparent}.interval-btn.down:hover:not(:disabled){background:var(--down);color:#24010f;box-shadow:0 0 14px #f472b673;border-color:transparent}.timeline{margin-top:.8rem;display:flex;gap:.4rem;flex-wrap:wrap}.timeline-point{background:#ffffff14;color:var(--text);border:1px solid var(--panel-border);min-width:40px}.timeline-point.active{background:linear-gradient(90deg,var(--primary),#7c3aed);border-color:transparent;color:#fff;box-shadow:0 0 12px var(--primary-glow)}.timeline-point.done{border:1px solid var(--success)}.yt-frame iframe{width:100%;height:clamp(170px,30dvh,300px);border-radius:12px;border:1px solid var(--panel-border)}.settings-modal-overlay{position:fixed;inset:0;z-index:100;background:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:grid;place-items:center;padding:1rem}.settings-modal{width:min(640px,100%);max-height:min(90dvh,900px);background:var(--panel);border:1px solid var(--panel-border);border-radius:20px;box-shadow:0 20px 50px #00000073;display:grid;grid-template-rows:auto minmax(0,1fr) auto}.settings-modal-header,.settings-modal-footer{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.9rem 1rem}.settings-modal-header{border-bottom:1px solid var(--panel-border)}.settings-modal-header h2{margin:0}.settings-modal-footer{border-top:1px solid var(--panel-border)}.settings-modal-scroll{overflow:auto;padding:.9rem 1rem .2rem}.settings-group{margin-bottom:.8rem;border:1px solid rgba(255,255,255,.06);background:#0003;border-radius:12px;padding:.75rem;display:grid;gap:.45rem}.settings-group h3{margin:0 0 .15rem;font-size:.86rem;text-transform:uppercase;letter-spacing:.5px;color:var(--primary)}.settings-group label{font-size:.9rem;color:#dbe4f0}.settings-group input[type=range]{width:100%;accent-color:var(--primary)}.settings-range-labels{display:flex;justify-content:space-between;font-size:.74rem;color:var(--text-dim)}.settings-help{margin:0;font-size:.78rem;color:var(--text-dim);line-height:1.45}.settings-cursor-zones{margin:.2rem 0 0;padding-left:1.1rem;font-size:.76rem;color:#c8d4e6;line-height:1.5}.settings-cursor-zones li{margin-bottom:.35rem}.settings-cursor-zones strong{color:var(--gold);font-weight:700}.settings-note{margin:.35rem 0 0;font-size:.76rem;line-height:1.45;color:var(--text-dim)}.settings-note-warn{padding:.45rem .55rem;border-radius:8px;background:#fbbf2414;border:1px solid rgba(251,191,36,.25);color:#fde68a}.settings-chip-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}.settings-chip-grid-modes{grid-template-columns:repeat(2,minmax(0,1fr))}@media(min-width:520px){.settings-chip-grid-modes{grid-template-columns:repeat(3,minmax(0,1fr))}}.settings-mode-toolbar{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.55rem}.settings-chip-grid-intervals{grid-template-columns:repeat(4,minmax(0,1fr))}.settings-chip{background:#334155;color:var(--text);border:1px solid transparent;border-radius:8px;padding:.45rem .55rem;font-size:.8rem}.settings-chip.active{background:linear-gradient(90deg,var(--primary),#7c3aed);border-color:transparent;box-shadow:0 0 10px var(--primary-glow)}@media(max-width:900px){.grid-2,.interval-grid-wrapper{grid-template-columns:1fr}.training-page{grid-template-rows:auto minmax(0,.8fr) minmax(0,1fr)}.interval-grid,.settings-chip-grid-intervals{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-height:820px){.page{padding:.5rem;gap:.5rem}.topbar{padding:.55rem .7rem}.topbar h1{font-size:1.45rem;margin-bottom:.1rem}.card{padding:.7rem}.interval-btn{min-height:44px;font-size:.75rem}.interval-btn small{font-size:.58rem}}@media(max-height:720px){.training-page{grid-template-rows:auto minmax(0,.75fr) minmax(0,1fr)}.melody-canvas,.yt-frame iframe{height:clamp(135px,25dvh,210px)}}.mm-reference-layout{grid-template-rows:auto minmax(0,180px) minmax(0,1fr) auto;overflow:hidden;gap:.5rem}.mm-header{display:flex;justify-content:space-between;align-items:center;gap:.55rem;padding:.5rem .65rem;background:var(--panel);border-radius:var(--radius);border:1px solid var(--panel-border);min-height:58px}.mm-header-left{position:relative;display:flex;align-items:center;gap:.55rem;flex:1;min-width:0}.mm-rank-icon{font-size:1.35rem;flex-shrink:0}.mm-rank-text{display:flex;flex-direction:column;min-width:0}.mm-level-pill{width:fit-content;font-size:.62rem;color:var(--text-dim);border-radius:5px;background:#00000038;padding:1px 6px;margin-bottom:.1rem}.mm-rank-title{color:var(--gold);font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.35px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:min(100%,200px)}.mm-rank-title-loading{color:var(--text-dim);text-transform:none;font-weight:600;letter-spacing:0}.mm-xp-track{position:absolute;left:0;bottom:-.52rem;width:100%;height:3px;border-radius:2px;background:#0000004d;overflow:hidden}.mm-xp-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));transition:width .35s ease}.mm-xp-track-loading{opacity:.85}.mm-xp-fill-indeterminate{width:40%;animation:mmXpIndeterminate 1.1s ease-in-out infinite}@keyframes mmXpIndeterminate{0%{transform:translate(-100%)}to{transform:translate(350%)}}.mm-header-right{display:flex;align-items:center;gap:.35rem}.mm-bicinium-pill{font-size:.55rem;padding:.12rem .35rem;border-radius:999px;background:#a855f740;border:1px solid rgba(168,85,247,.4);color:#e9d5ff}.mm-poly-warning{margin:.5rem 1rem 0;padding:.5rem .75rem;border-radius:8px;background:#dc26261f;border:1px solid rgba(248,113,113,.35);font-size:.85rem}.settings-select{width:100%;margin:.35rem 0 .5rem;padding:.45rem .5rem;border-radius:8px;background:#00000059;border:1px solid var(--panel-border);color:inherit}.settings-checkbox-row{display:flex;flex-wrap:wrap;gap:.75rem 1rem;margin:.5rem 0}.settings-pair-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:.35rem 0 .75rem}.settings-pair-row .settings-select{flex:1;min-width:120px;margin:0}.interval-grid-vertical .interval-btn.vertical{min-width:72px}.mm-stat-badge{min-width:45px;padding:.22rem .42rem;border-radius:8px;text-align:center;display:flex;flex-direction:column;background:#0000004d;border:1px solid var(--panel-border)}.mm-stat-badge span{font-size:.53rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px}.mm-stat-badge strong{font-size:.88rem}.mm-stat-badge.trophy strong{color:var(--gold)}.mm-icon-btn{border:none;display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:transparent;color:var(--text);font-size:1rem;cursor:pointer;text-decoration:none}.mm-icon-btn:hover{background:#ffffff1a}.mm-visual-card{position:relative;padding:.4rem;overflow:hidden}.mm-visual-card .melody-canvas{height:100%;border-radius:14px}.mm-feedback{position:absolute;top:.7rem;left:50%;transform:translate(-50%);background:#000000bd;border:1px solid rgba(251,191,36,.3);color:var(--gold);border-radius:999px;padding:.2rem .65rem;font-size:.78rem;font-weight:700}.mm-feedback-idle{border-color:#fbbf244d;color:var(--gold)}.mm-feedback-correct{border-color:#10b9818c;color:#6ee7b7;background:#052e20c7;animation:mmPulseGood .36s ease-out}.mm-feedback-wrong{border-color:#ef44448c;color:#fca5a5;background:#450a0ac7;animation:mmShakeBad .32s ease-out}.mm-flavor-badge,.mm-bounce-badge{position:absolute;bottom:.75rem;font-size:.62rem;border-radius:4px;padding:.13rem .35rem;background:#0009;font-weight:700}.mm-flavor-badge{right:.7rem;color:var(--primary);border:1px solid var(--primary);max-width:min(96%,280px);line-height:1.25;text-align:right}.mm-transition-step-badge{position:absolute;bottom:.75rem;left:.7rem;z-index:2;padding:.13rem .4rem;font-size:.62rem;font-weight:700;line-height:1.25;color:var(--text-dim);background:#0009;border:1px solid rgba(255,255,255,.12);border-radius:4px;letter-spacing:.04em;font-variant-numeric:tabular-nums}.mm-flavor-hint-overlay{position:absolute;bottom:.75rem;right:.7rem;z-index:2;margin:0;padding:.2rem .42rem;max-width:min(96%,280px);font-size:.62rem;font-weight:700;line-height:1.25;text-align:right;font-family:inherit;cursor:pointer;color:#e0e7ff;background:#6366f152;border:1px solid rgba(129,140,248,.55);border-radius:4px;box-shadow:0 2px 10px #00000059}.mm-flavor-hint-overlay:hover{background:#6366f17a}.mm-bounce-badge{left:.7rem;color:var(--accent);border:1px solid var(--accent)}.mm-input-card{padding:.4rem;overflow:hidden}.mm-interval-grid{flex:1}.mm-reference-layout .interval-grid-wrapper{gap:.45rem}.mm-reference-layout .interval-column{border-radius:13px}.mm-reference-layout .interval-column h3{font-size:.75rem;padding:.42rem}.mm-reference-layout .interval-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem;padding:.34rem;overflow:auto;flex:1;min-height:0}.mm-reference-layout .interval-btn{min-height:46px;font-size:.77rem;border-radius:8px}.mm-reference-layout .interval-btn small{font-size:.56rem}.interval-btn.is-correct{border-color:#10b981cc;background:#10b98133;box-shadow:0 0 0 1px #10b98159,0 0 14px #10b98147;animation:mmPulseGood .32s ease-out}.interval-btn.is-wrong{border-color:#ef4444cc;background:#ef444433;box-shadow:0 0 0 1px #ef444459,0 0 14px #ef444433;animation:mmShakeBad .32s ease-out}.mm-command-bar{display:flex;flex-wrap:wrap;gap:.42rem;min-height:56px;height:auto;border-radius:16px;padding:.35rem;background:var(--panel);border:1px solid var(--panel-border)}.mm-btn{border:none;border-radius:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-direction:column;line-height:1}.mm-btn span{font-size:1rem;margin-bottom:.07rem}.mm-btn-play{flex:1 1 0;min-width:78px;color:#fff;background:#334155;border:1px solid rgba(255,255,255,.1);font-size:.7rem}.mm-btn-secondary{flex:0 1 auto;min-width:64px;color:#e2e8f0;background:#0f172aa6;border:1px solid rgba(148,163,184,.35);font-size:.65rem}.mm-pair-hint{font-size:.85em;opacity:.85}.mm-btn-next{flex:1.5 1 120px;background:var(--primary);color:#fff;text-transform:uppercase;letter-spacing:.6px}.mm-btn-hint{flex:1 1 100px;min-width:88px;background:#6366f138;color:#e0e7ff;border:1px solid rgba(129,140,248,.45);font-size:.65rem;text-transform:none;letter-spacing:.02em;padding:.35rem .45rem}.mm-btn-hint:disabled{opacity:.45;cursor:not-allowed}.mm-btn-hint:not(:disabled):hover{background:#6366f159}@keyframes mmPulseGood{0%{transform:scale(.96)}65%{transform:scale(1.04)}to{transform:scale(1)}}@keyframes mmShakeBad{0%{transform:translate(0)}25%{transform:translate(-3px)}50%{transform:translate(3px)}75%{transform:translate(-2px)}to{transform:translate(0)}}@media(min-width:1200px){.mm-reference-layout .interval-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:860px){.mm-reference-layout{gap:.35rem}.mm-rank-title{max-width:min(100%,130px);font-size:.68rem}.mm-header{padding:.4rem}.mm-stat-badge{min-width:40px;padding:.2rem .3rem}.mm-reference-layout .interval-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.28rem;padding:.28rem}.mm-reference-layout .interval-btn{min-height:42px;font-size:.72rem}.mm-reference-layout .interval-btn small{font-size:.52rem}}.mm-profile-trigger{border:none;background:transparent;padding:0;margin:0;text-align:left;cursor:pointer;flex:1;min-width:0;font:inherit;color:inherit}.mm-profile-meta{display:flex;align-items:center;gap:.45rem;font-size:.68rem;color:var(--text-dim);margin-top:.06rem}.mm-mastery-stars{letter-spacing:.04em}.mm-profile-overlay{position:fixed;inset:0;z-index:220;background:#000000d9;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:.75rem}.mm-profile-modal{padding:0;height:80vh;max-height:600px;display:flex;flex-direction:column;overflow:hidden;background:#0f172a;border-radius:24px;width:90%;max-width:400px;border:1px solid rgba(255,255,255,.1);box-shadow:0 25px 50px #0009;position:relative}.profile-header-compact{background:#1e293b;padding:20px 20px 15px;position:relative;border-bottom:1px solid rgba(255,255,255,.1);display:block;align-items:center;gap:15px;flex-shrink:0;z-index:10;box-shadow:0 4px 20px #0003}.profile-top-row{display:flex;align-items:center;gap:15px;margin-bottom:15px;padding-right:30px}.profile-avatar-small{font-size:2rem;width:60px;height:60px;background:#ffffff0d;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--primary);box-shadow:0 0 10px #6366f14d}.profile-info-compact{flex:1;display:flex;flex-direction:column;justify-content:center}.mastery-meta-row{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--primary);font-weight:700;margin-top:4px;text-transform:uppercase;letter-spacing:.5px}.mastery-icon-badge{background:#ffffff1a;width:24px;height:24px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:1rem}.profile-xp-track{height:6px;background:#ffffff1a;border-radius:3px;margin:10px 0 8px;overflow:hidden;position:relative}.profile-xp-fill{height:100%;background:var(--primary);width:0%;transition:width .5s ease-out;box-shadow:0 0 10px #6366f14d}.profile-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:5px}.mini-stat-box{background:#ffffff08;border-radius:8px;padding:6px 10px;display:flex;align-items:center;gap:10px}.mini-stat-icon{font-size:1.1rem;opacity:.8}.mini-stat-info{display:flex;flex-direction:column;line-height:1}.mini-stat-val{font-weight:800;font-size:.9rem;color:#fff}.mini-stat-label{font-size:.55rem;text-transform:uppercase;color:var(--text-dim);margin-top:3px}.timeline-connector-top{position:absolute;left:50px;bottom:-20px;width:2px;height:20px;background:#ffffff1a;z-index:0}.timeline-scroll-area{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px;background:linear-gradient(180deg,#0f172a,#1e1b4b);scrollbar-width:none}.timeline-scroll-area::-webkit-scrollbar{display:none}.tl-node{display:flex;align-items:center;gap:15px;padding:10px;margin-bottom:0;position:relative;opacity:.5;transition:all .3s}.tl-node:before{content:"";position:absolute;left:29px;top:40px;bottom:-20px;width:2px;background:#ffffff1a;z-index:0}.tl-node:last-child:before{display:none}.tl-icon{width:40px;height:40px;border-radius:50%;background:#334155;display:flex;align-items:center;justify-content:center;font-size:1.2rem;z-index:1;border:2px solid #475569}.tl-content{background:#ffffff08;padding:8px 12px;border-radius:8px;flex:1}.profile-footer-fixed{padding:15px;background:#1e293b;border-top:1px solid rgba(255,255,255,.1);z-index:10;flex-shrink:0}.btn-prestige{background:linear-gradient(135deg,#fbbf24,#b45309);border:1px solid #fbbf24;color:#fff;padding:15px;width:100%;border-radius:16px;font-size:1.1rem;font-weight:900;text-transform:uppercase;letter-spacing:1px;box-shadow:0 4px 15px #fbbf2466;cursor:pointer;position:relative;overflow:hidden;transition:all .3s;display:flex;flex-direction:column;align-items:center;justify-content:center}.btn-prestige:hover{transform:scale(1.02);box-shadow:0 0 25px #fbbf2499}.btn-prestige:active{transform:scale(.98)}.btn-prestige:disabled{background:#334155;border-color:#475569;color:#64748b;box-shadow:none;cursor:not-allowed;filter:grayscale(1)}.btn-prestige .shiny{position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:skew(-20deg);animation:shine 3s infinite}@keyframes shine{0%{left:-100%}to{left:200%}}.prestige-main-txt{font-size:1.2rem;font-weight:900}.prestige-sub-txt{font-size:.75rem;opacity:1;margin-top:4px;font-weight:700;color:#ffffffe6}.modal-help-icon{width:24px;height:24px;border-radius:50%;background:#ffffff1a;display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--text-dim);cursor:pointer;transition:all .2s}.modal-help-icon:hover{background:#fff3;color:var(--text)}.modal-help-icon:active{transform:scale(.95)}.mm-yt-header-meta{flex-wrap:wrap;justify-content:flex-end}.mm-yt-feedback{margin:0;font-size:.72rem;color:var(--text-dim);max-width:160px;text-align:right;line-height:1.25}.dashboard-topbar{align-items:flex-start}.dashboard-topbar-left{display:flex;align-items:center;gap:.65rem;min-width:0}.dashboard-topbar-left .mm-profile-trigger .mm-header-left{padding-bottom:.55rem}.dashboard-xp-line{margin:.5rem 0 0;font-size:.85rem;color:var(--text-dim)}