@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap";:root{--bg-base: #07111f;--bg-surface: #0d1b2f;--bg-raised: #14243a;--bg-glass: rgba(20, 184, 166, .09);--bg-glass-hover:rgba(245, 158, 11, .12);--accent: #14b8a6;--accent-light: #f59e0b;--accent-glow: rgba(20, 184, 166, .34);--accent-dim: rgba(20, 184, 166, .18);--accent-warm: #fb7185;--accent-sky: #38bdf8;--text-primary: #f7fbff;--text-secondary:#b7c8db;--text-muted: #71859b;--border: rgba(148, 197, 220, .18);--border-strong: rgba(20, 184, 166, .42);--sidebar-w: 280px;--player-h: 110px;--topbar-h: 56px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 18px;--radius-xl: 26px;--shadow-glow: 0 0 36px rgba(20, 184, 166, .2);--shadow-card: 0 16px 36px rgba(1, 8, 18, .45);--shadow-btn: 0 8px 20px rgba(20, 184, 166, .28);--transition: .2s cubic-bezier(.4, 0, .2, 1);--transition-slow: .4s cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{height:100%;font-size:16px}body{height:100%;background:linear-gradient(135deg,rgba(20,184,166,.08),transparent 32%),linear-gradient(315deg,rgba(251,113,133,.07),transparent 36%),var(--bg-base);color:var(--text-primary);font-family:Inter,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--accent-dim);border-radius:99px}::-webkit-scrollbar-thumb:hover{background:var(--accent)}#app{display:flex;height:100vh;overflow:hidden}.sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);height:100vh;background:linear-gradient(180deg,rgba(20,184,166,.08),transparent 24%),linear-gradient(0deg,rgba(56,189,248,.05),transparent 40%),var(--bg-surface);border-right:1px solid var(--border);display:flex;flex-direction:column;gap:0;overflow-x:hidden;overflow-y:auto;transition:width var(--transition-slow),min-width var(--transition-slow);position:relative;z-index:10}.sidebar.collapsed{width:0;min-width:0}body.home-mode .sidebar{width:0;min-width:0;border-right:0;opacity:0;pointer-events:none}body.home-mode #btnToggleSidebar{display:none}body.canta-mode .sidebar{width:0;min-width:0;border-right:0;opacity:0;pointer-events:none}body.canta-mode #btnToggleSidebar{display:none}.sidebar-header{padding:18px 20px 16px;border-bottom:1px solid var(--border);flex-shrink:0}.logo{display:flex;align-items:center;gap:10px}.logo-icon{width:36px;height:36px;background:linear-gradient(135deg,var(--accent),var(--accent-sky));border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:#fff;padding:6px;box-shadow:var(--shadow-btn);flex-shrink:0}.logo-text{font-family:Outfit,sans-serif;font-size:1.3rem;font-weight:700;background:linear-gradient(135deg,var(--text-primary),#a7f3d0 55%,var(--accent-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.3px}.role-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:16px;padding:4px;border:1px solid var(--border);border-radius:12px;background:#ffffff0b}.topbar-role-switch{margin-top:0;width:214px;flex:0 0 auto}.role-switch-btn{height:32px;border:0;border-radius:8px;background:transparent;color:var(--text-secondary);cursor:pointer;font-family:Inter,sans-serif;font-size:.76rem;font-weight:800;transition:var(--transition)}.role-switch-btn:hover{color:var(--text-primary);background:#ffffff0f}.role-switch-btn.active{color:#03131f;background:linear-gradient(135deg,var(--accent),var(--accent-light));box-shadow:0 8px 18px #14b8a62e}.upload-zone{margin:16px;border:1px dashed var(--border-strong);border-radius:14px;padding:20px 16px;text-align:center;cursor:pointer;transition:var(--transition);background:linear-gradient(135deg,#14b8a624,#38bdf80f),#ffffff05;flex-shrink:0}.upload-zone:hover,.upload-zone.drag-over{border-color:var(--accent-light);background:linear-gradient(135deg,#f59e0b24,#14b8a61f),#ffffff08;box-shadow:0 0 22px #14b8a629}.upload-zone.drag-over{transform:scale(1.02)}.upload-icon{width:40px;height:40px;margin:0 auto 10px;color:var(--accent-light);animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.upload-text{font-size:.8rem;font-weight:500;color:var(--text-secondary);margin-bottom:2px}.upload-sub{font-size:.72rem;color:var(--text-muted);margin-bottom:12px}.btn-upload{background:linear-gradient(135deg,var(--accent),var(--accent-sky));color:#03131f;border:none;border-radius:var(--radius-sm);padding:8px 16px;font-size:.78rem;font-weight:600;font-family:Inter,sans-serif;cursor:pointer;transition:var(--transition);box-shadow:var(--shadow-btn);letter-spacing:.2px}.btn-upload:hover{transform:translateY(-1px);box-shadow:0 8px 22px var(--accent-glow)}.score-tools-panel{margin:0 16px 10px;padding:13px;border:1px solid rgba(20,184,166,.26);border-radius:14px;background:linear-gradient(145deg,#14b8a61f,#f59e0b0e),#07111f8f;box-shadow:inset 0 1px #ffffff0b,0 14px 30px #01081233;flex-shrink:0;max-height:min(32vh,250px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}.score-tools-title{position:sticky;top:0;z-index:2;padding-bottom:10px;margin-bottom:12px;background:linear-gradient(145deg,#14b8a61f,#f59e0b0e),#0a1728;color:var(--accent-light);font-size:.68rem;font-weight:900;letter-spacing:1px;text-transform:uppercase}.score-tools-title:after{content:"Configura la lectura y las ayudas visuales";display:block;margin-top:4px;color:var(--text-muted);font-size:.7rem;font-weight:600;letter-spacing:0;line-height:1.3;text-transform:none}.layout-quick-bar{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;margin:0 16px 10px;padding:9px;border:1px solid rgba(20,184,166,.24);border-radius:11px;background:linear-gradient(135deg,#14b8a61f,#38bdf80e),#07111f80}.topbar-layout-quick-bar{width:auto;min-width:0;height:32px;grid-template-columns:auto auto;gap:7px;margin:0;padding:3px 4px 3px 8px;border-radius:9px;border-color:#94c5dc24;background:#ffffff09;box-shadow:none;flex:0 0 auto}body.home-mode .topbar-layout-quick-bar{display:none}.layout-quick-copy{display:grid;gap:1px;min-width:0}.topbar-layout-quick-bar .layout-quick-copy{display:flex;align-items:center}.layout-quick-copy span{color:var(--text-primary);font-size:.78rem;font-weight:900}.topbar-layout-quick-bar .layout-quick-copy span{color:var(--text-muted);font-size:.66rem;font-weight:850;text-transform:uppercase;letter-spacing:.8px}.layout-quick-copy small{color:var(--text-muted);font-size:.64rem;font-weight:700}.topbar-layout-quick-bar .layout-quick-copy small{display:none}.layout-quick-actions{display:flex;gap:6px}.topbar-layout-quick-bar .layout-quick-actions{gap:3px}.layout-quick-btn{width:34px;height:32px;border:1px solid rgba(148,197,220,.16);border-radius:8px;background:#07111f94;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition)}.topbar-layout-quick-bar .layout-quick-btn{width:27px;height:24px;border-radius:7px;border-color:transparent;background:transparent}.layout-quick-btn svg{width:17px;height:17px}.topbar-layout-quick-bar .layout-quick-btn svg{width:15px;height:15px}.layout-quick-btn:hover{color:var(--text-primary);border-color:#14b8a66b;background:#14b8a61f}.layout-quick-btn.active{color:#03131f;border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent-light));box-shadow:0 8px 18px #14b8a629}.topbar-layout-quick-bar .layout-quick-btn.active{box-shadow:none}.layout-quick-btn.kids-view-btn.active{background:linear-gradient(135deg,#f59e0b,#fef08a);box-shadow:0 8px 18px #f59e0b38}.score-tools-panel .topbar-actions{display:grid;grid-template-columns:1fr;gap:10px;min-width:0}.score-tools-panel .layout-source-toggle{display:none!important}.score-tool-group{display:grid;gap:8px;padding:10px;border:1px solid rgba(148,197,220,.14);border-radius:12px;background:#07111f57}.score-tool-group-head{width:100%;border:0;background:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:0;text-align:left}.score-tool-group-head span{color:var(--text-primary);font-family:Outfit,sans-serif;font-size:.9rem;font-weight:800;display:inline-flex;align-items:center;gap:7px}.score-tool-group-head span:after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.65;transition:var(--transition)}.score-tool-group:not(.collapsed) .score-tool-group-head span:after{transform:rotate(225deg) translateY(-2px)}.score-tool-group-head small{color:var(--text-muted);font-size:.66rem;font-weight:700;text-align:right}.score-tool-group.collapsed{gap:0}.score-tool-group.collapsed .score-tool-item{display:none}.score-tool-item{display:grid;gap:8px;padding:9px;border:1px solid rgba(148,197,220,.13);border-radius:10px;background:#ffffff09;transition:var(--transition)}.score-tool-item:hover{border-color:#14b8a657;background:#14b8a612}.score-tool-copy{display:grid;grid-template-columns:28px 1fr;align-items:center;gap:8px}.score-tool-copy strong{display:block;color:var(--text-primary);font-size:.78rem;font-weight:850;line-height:1.15}.score-tool-copy small{display:block;margin-top:2px;color:var(--text-muted);font-size:.66rem;line-height:1.25}.score-tool-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#f59e0b1f;color:var(--accent-light);font-size:.74rem;font-weight:900}.score-tools-panel .instrument-dropdown-container,.score-tools-panel .note-names-control,.score-tools-panel .switch-container,.score-tools-panel .transpose-control{width:100%!important;height:36px!important;margin:0!important;border-radius:9px!important;background:#07111fa3!important;border:1px solid rgba(148,197,220,.16)!important;box-shadow:inset 0 1px #ffffff09}.score-tools-panel .instrument-dropdown-container,.score-tools-panel .note-names-control{display:flex;align-items:center}.score-tools-panel .control-select,.score-tools-panel #instrument-selector,.score-tools-panel #note-names-selector{width:100%!important;min-width:0!important;color:var(--text-primary);background:transparent!important;font-size:.78rem!important;font-weight:700}.score-tools-panel .score-native-select{display:none!important}.score-custom-select{flex:1;min-width:0;position:relative}.score-custom-select-btn{width:100%;height:34px;border:0;border-radius:8px;background:transparent;color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px;font-family:Inter,sans-serif;font-size:.78rem;font-weight:800;text-align:left}.score-custom-select-btn:after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.68;transition:var(--transition);flex:0 0 auto}.score-custom-select.open .score-custom-select-btn:after{transform:rotate(225deg) translateY(-2px)}.score-custom-select-list{display:none;grid-template-columns:1fr;gap:4px;max-height:148px;overflow-y:auto;margin-top:6px;padding:6px;border:1px solid rgba(148,197,220,.16);border-radius:10px;background:linear-gradient(180deg,rgba(20,184,166,.08),transparent),#040c16f0;box-shadow:inset 0 1px #ffffff0a}.score-custom-select.open .score-custom-select-list{display:grid}.score-custom-select-group{padding:7px 8px 3px;color:var(--accent-light);font-size:.61rem;font-weight:900;letter-spacing:.8px;text-transform:uppercase}.score-custom-select-option{min-height:30px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text-secondary);cursor:pointer;padding:0 9px;font-family:Inter,sans-serif;font-size:.75rem;font-weight:750;text-align:left;transition:var(--transition)}.score-custom-select-option:hover{color:var(--text-primary);background:#fff1}.score-custom-select-option.active{color:#03131f;background:linear-gradient(135deg,var(--accent),var(--accent-light));border-color:transparent}.score-tools-panel #btnToggleLayout,.score-tools-panel #btnZoomOut,.score-tools-panel #btnZoomIn{width:36px;height:36px;border:1px solid rgba(148,197,220,.16);border-radius:9px;background:#07111fa3}.score-tools-panel .switch-container{display:flex;justify-content:space-between}.score-tools-panel .switch-label{color:var(--text-secondary)!important;font-size:.76rem!important;font-weight:800}.score-tools-panel .transpose-control{justify-content:space-between}.score-tools-panel .zoom-label{align-self:center;min-width:auto}.score-tools-view-row{display:grid;grid-template-columns:36px 1fr 36px;align-items:center;gap:8px}.score-tools-view-row .zoom-label{height:36px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(148,197,220,.16);border-radius:9px;background:#07111fa3}.role-dashboard{margin:0 16px 10px;flex-shrink:0}.role-dashboard-panel{padding:14px;border:1px solid rgba(20,184,166,.28);border-radius:12px;background:linear-gradient(135deg,#14b8a629,#f59e0b14),#ffffff06;box-shadow:inset 0 1px #ffffff0b}.role-dashboard-panel.hidden{display:none}.role-dashboard-kicker{margin-bottom:4px;color:var(--accent-light);font-size:.64rem;font-weight:900;letter-spacing:1px;text-transform:uppercase}.role-dashboard-title{color:var(--text-primary);font-family:Outfit,sans-serif;font-size:.98rem;font-weight:700;line-height:1.25}.role-dashboard-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.role-action-btn{height:34px;border:1px solid var(--border);border-radius:8px;background:#07111f7a;color:var(--text-secondary);cursor:pointer;font-size:.78rem;font-weight:800;transition:var(--transition)}.role-action-btn:hover{color:var(--text-primary);border-color:var(--accent);background:#14b8a624}.student-progress-row{display:flex;justify-content:space-between;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border);color:var(--text-muted);font-size:.72rem}.student-progress-row strong{color:var(--text-secondary);font-weight:800}.welcome-role-kicker{display:inline-flex;align-items:center;width:fit-content;margin-top:10px;padding:5px 10px;border:1px solid rgba(20,184,166,.3);border-radius:999px;background:#14b8a61a;color:var(--accent-light);font-size:.72rem;font-weight:900;letter-spacing:.8px;text-transform:uppercase}.student-only,body.student-mode .teacher-only,body.student-mode #tab-editor,body.student-mode #tab-melody,body.student-mode .upload-zone{display:none!important}body.student-mode .start-action.student-only,body.student-mode button.student-only{display:inline-flex!important}body.student-mode .start-card.student-only{display:block!important}body.student-mode .workspace-mode-switch{grid-template-columns:1fr}body.student-mode .score-tools-title:after{content:"Ajustes simples para practicar sin distracciones"}body.teacher-mode .student-only{display:none!important}.library-section{flex:1;display:flex;flex-direction:column;min-height:0;padding:0 12px 12px}.library-header{display:flex;justify-content:space-between;align-items:center;padding:12px 8px 8px;font-size:.72rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.8px;flex-shrink:0}.btn-icon{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:6px;transition:var(--transition);display:flex;align-items:center;justify-content:center}.btn-icon svg{width:16px;height:16px}.btn-icon:hover{color:var(--text-primary);background:var(--bg-glass-hover)}.library-list{list-style:none;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:4px}.library-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:30px 20px;color:var(--text-muted);font-size:.8rem}.library-empty svg{width:36px;height:36px;opacity:.4}.library-item{padding:10px 12px;border-radius:10px;cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:10px;border:1px solid transparent;position:relative;overflow:hidden}.library-item:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#14b8a629,#f59e0b0f);opacity:0;transition:var(--transition);pointer-events:none}.library-item:hover:before{opacity:1}.library-item:hover{border-color:var(--border)}.library-item.active{background:linear-gradient(135deg,#14b8a629,#38bdf814);border-color:var(--accent)}.library-item.active:before{opacity:0}.library-item.lyrics-item .lib-item-icon{color:#fbbf24;background:#f59e0b1a}.lib-item-icon{width:32px;height:32px;border-radius:9px;background:#ffffff0e;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent-light)}.lib-item-icon svg{width:16px;height:16px}.lib-item-info{flex:1;min-width:0}.lib-item-name{font-size:.82rem;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}.lib-item-meta{font-size:.68rem;color:var(--text-muted)}.lib-item-delete{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:3px;border-radius:4px;opacity:0;transition:var(--transition);flex-shrink:0;position:relative;z-index:2}.lib-item-delete svg{width:14px;height:14px}.library-item:hover .lib-item-delete{opacity:1}.lib-item-delete:hover{color:#f87171}.sidebar-footer{padding:12px 16px;border-top:1px solid var(--border);flex-shrink:0}.btn-install{width:100%;background:none;border:1px solid var(--border);color:var(--text-secondary);padding:10px 14px;border-radius:var(--radius-sm);font-size:.8rem;font-weight:500;font-family:Inter,sans-serif;cursor:pointer;display:flex;align-items:center;gap:8px;transition:var(--transition)}.btn-install svg{width:16px;height:16px}.btn-install:hover{border-color:var(--accent);color:#a7f3d0;background:var(--bg-glass)}.main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}.topbar{min-height:var(--topbar-h);height:auto;background:#07111fdb;-webkit-backdrop-filter:blur(18px) saturate(135%);backdrop-filter:blur(18px) saturate(135%);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:8px 14px;flex-shrink:0;z-index:5}.topbar-btn{width:34px;height:34px;border-radius:var(--radius-sm);background:#ffffff09;border:1px solid var(--border)}.topbar-btn svg{width:18px;height:18px}.topbar-title{flex:1 1 170px;min-width:130px;font-size:.92rem;font-weight:600;color:var(--text-primary);font-family:Outfit,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.workspace-mode-switch{display:flex;align-items:center;gap:4px;height:36px;padding:3px;border:1px solid var(--border);border-radius:10px;background:#ffffff0b;flex:0 0 auto}.workspace-mode-btn{height:28px;min-width:86px;padding:0 12px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--text-secondary);cursor:pointer;font-family:Inter,sans-serif;font-size:.78rem;font-weight:700;transition:var(--transition)}.workspace-mode-btn:hover{color:var(--text-primary);background:#ffffff0f}.workspace-mode-btn.active{color:#03131f;background:linear-gradient(135deg,var(--accent),var(--accent-light));box-shadow:0 8px 18px #14b8a633}.topbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:2 1 auto;min-width:0}.instrument-dropdown-container,.note-names-control{height:36px!important;background:#ffffff0e!important;border:1px solid var(--border)!important;border-radius:10px!important;padding:0 10px!important;margin-right:0!important;box-shadow:inset 0 1px #ffffff0a}.instrument-dropdown-container{border-color:#14b8a661!important}.note-names-control{display:flex;align-items:center}.topbar .control-select{height:100%;min-height:0;color:var(--text-primary);font-weight:600}#instrument-selector{min-width:168px!important}#note-names-selector{min-width:142px!important;background:transparent!important;border:none!important}.topbar .switch-container{height:36px;padding:0 10px;margin-right:0!important;border-radius:10px;border:1px solid rgba(245,158,11,.32);background:#f59e0b14}.topbar .switch-label{color:var(--text-secondary)!important;font-weight:600}.zoom-label{font-size:.75rem;color:var(--text-secondary);min-width:42px;text-align:center;font-variant-numeric:tabular-nums;font-weight:700;padding:0 3px}.transpose-control{display:flex;align-items:center;background:#38bdf814;border:1px solid rgba(56,189,248,.28);border-radius:10px;overflow:hidden;height:36px;margin-right:0}.transpose-btn{background:transparent;border:none;color:var(--text-secondary);width:32px;height:100%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;line-height:1;transition:var(--transition)}.transpose-btn:hover{background:#38bdf824;color:var(--text-primary)}.transpose-btn:active{background:var(--border)}.transpose-label{font-size:.8rem;color:var(--text-primary);min-width:30px;text-align:center;font-variant-numeric:tabular-nums;font-weight:600;font-family:Outfit,sans-serif}body.canta-mode .topbar-actions,body.canta-mode .topbar-layout-quick-bar,body.canta-mode .player-bar,body.canta-mode .visual-metronome-indicator{display:none!important}body.canta-mode .topbar{background:linear-gradient(90deg,#14b8a61f,#f59e0b14),#07111fe6}body.canta-mode .topbar-title{color:#fef3c7}.score-area-wrapper{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;position:relative}.score-container{flex:1;min-height:0;overflow:auto;padding:12px;position:relative;background:#081320;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),radial-gradient(ellipse at 18% 8%,rgba(20,184,166,.12) 0%,transparent 45%),radial-gradient(ellipse at 80% 88%,rgba(245,158,11,.1) 0%,transparent 42%),radial-gradient(ellipse at 58% 42%,rgba(56,189,248,.06) 0%,transparent 46%);background-size:100% 28px,auto,auto,auto}.canta-workstation{display:none;flex:1 1 auto;min-height:0;padding:18px;background:linear-gradient(135deg,rgba(20,184,166,.12),transparent 32%),linear-gradient(315deg,rgba(245,158,11,.09),transparent 34%),var(--bg-base);overflow:hidden}.canta-shell{width:100%;min-height:0;display:grid;grid-template-columns:minmax(320px,.82fr) minmax(0,1.18fr);gap:14px}.canta-panel{min-height:0;border:1px solid var(--border);border-radius:12px;background:linear-gradient(180deg,#fff1,#ffffff05),#07111fdb;box-shadow:var(--shadow-card);overflow:hidden}.canta-editor-panel,.canta-stage-panel{display:flex;flex-direction:column}.canta-panel-head,.canta-stage-toolbar{min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,#ffffff0e,#ffffff05),#040a122e}.canta-stage-toolbar{align-items:stretch}.canta-heading{min-width:0;display:grid;align-content:center}.canta-kicker{display:block;margin-bottom:4px;color:var(--accent-light);font-size:.68rem;font-weight:900;letter-spacing:.8px;text-transform:uppercase}.canta-panel h2{color:var(--text-primary);font-family:Outfit,sans-serif;font-size:1.2rem;font-weight:900;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.canta-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto}.canta-primary-btn,.canta-secondary-btn{min-height:38px;border-radius:8px;cursor:pointer;font-family:Inter,sans-serif;font-size:.82rem;font-weight:900;padding:0 15px;display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}.canta-primary-btn{border:0;background:linear-gradient(135deg,var(--accent),var(--accent-light));color:#03131f;box-shadow:var(--shadow-btn)}.canta-secondary-btn{border:1px solid rgba(20,184,166,.28);background:#14b8a617;color:#d1fae5}.canta-secondary-btn:hover{border-color:#14b8a67a;background:#14b8a626;color:#fff}.canta-primary-btn svg,.canta-secondary-btn svg{width:16px;height:16px}.canta-form-grid{display:grid;grid-template-columns:minmax(0,1fr) 130px;gap:10px;padding:14px 16px 0}.canta-form-grid label{display:grid;gap:6px;color:var(--text-secondary);font-size:.72rem;font-weight:900}.canta-form-grid input,.canta-form-grid select{width:100%;min-height:38px;border:1px solid rgba(255,255,255,.13);border-radius:8px;outline:none;background:#040a1294;color:var(--text-primary);font-family:Inter,sans-serif;font-size:.9rem;padding:8px 10px}.canta-editor-guide{margin:12px 16px 0;display:grid;gap:4px;border:1px solid rgba(20,184,166,.2);border-radius:10px;background:linear-gradient(135deg,#14b8a61f,#f59e0b0e),#040a1275;padding:10px 12px}.canta-editor-guide strong{color:var(--text-primary);font-size:.86rem;font-weight:900;line-height:1.25}.canta-editor-guide span{color:var(--text-muted);font-size:.74rem;line-height:1.45}.canta-structure-tools{margin:10px 16px 0;display:grid;grid-template-columns:minmax(0,1fr) 92px auto;align-items:center;gap:10px;border:1px solid rgba(245,158,11,.2);border-radius:10px;background:#f59e0b0f;padding:9px 10px}.canta-structure-tools span{display:block;color:var(--text-primary);font-size:.78rem;font-weight:900;line-height:1.2}.canta-structure-tools small{display:block;margin-top:2px;color:var(--text-muted);font-size:.68rem;line-height:1.25}.canta-structure-tools label{display:grid;gap:4px;color:var(--text-secondary);font-size:.62rem;font-weight:900;line-height:1}.canta-structure-tools input{width:100%;min-height:32px;border:1px solid rgba(255,255,255,.12);border-radius:7px;background:#040a1294;color:var(--text-primary);font-family:Outfit,sans-serif;font-size:.78rem;font-weight:850;text-align:center}.canta-editor{flex:1 1 auto;min-height:220px;margin:12px 16px 14px;resize:none;border:1px solid rgba(20,184,166,.28);border-radius:10px;outline:none;background:#040a12d1;color:var(--text-primary);font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.96rem;line-height:1.65;padding:14px}.canta-editor:focus{border-color:#f59e0b8c;box-shadow:0 0 0 3px #f59e0b1a}.canta-editor-hint{margin:0 16px 16px;color:var(--text-muted);font-size:.76rem;line-height:1.5}.canta-stage-controls{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:0 0 auto}.canta-key-readout{min-width:112px;min-height:52px;display:grid;align-content:center;gap:3px;padding:8px 12px;border:1px solid rgba(20,184,166,.26);border-radius:9px;background:#14b8a613}.canta-key-readout span{color:#d1fae5;font-family:Outfit,sans-serif;font-size:.86rem;font-weight:900;line-height:1}.canta-key-readout small{color:var(--text-muted);font-family:Inter,sans-serif;font-size:.68rem;font-weight:800;line-height:1.15}.canta-transpose-card{min-height:52px;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;align-items:center;gap:5px 8px;padding:7px 8px;border:1px solid rgba(245,158,11,.28);border-radius:9px;background:#f59e0b13}.canta-transpose-card>span{grid-column:1 / -1;color:#fef3c7;font-family:Outfit,sans-serif;font-size:.68rem;font-weight:900;letter-spacing:.4px;line-height:1;text-transform:uppercase}.canta-transpose-control{display:grid;grid-template-columns:34px 48px 34px;align-items:center;border:1px solid rgba(245,158,11,.34);border-radius:8px;background:#f59e0b1a;overflow:hidden}.canta-transpose-control button{height:32px;border:0;background:transparent;color:#fef3c7;cursor:pointer;font-family:Outfit,sans-serif;font-size:1.2rem;font-weight:900}.canta-transpose-control button:hover{background:#f59e0b2e;color:#fff}.canta-transpose-control strong{color:#fff;font-family:Outfit,sans-serif;font-size:.94rem;font-weight:900;text-align:center;font-variant-numeric:tabular-nums}.canta-reset-btn{height:32px;min-width:54px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:#ffffff0e;color:var(--text-secondary);cursor:pointer;font-family:Inter,sans-serif;font-size:.7rem;font-weight:900}.canta-reset-btn:hover{color:#fff;border-color:#f59e0b66;background:#f59e0b24}.canta-preview{flex:1 1 auto;min-height:0;overflow:auto;padding:34px clamp(24px,5vw,64px) 46px;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 28%),#040a1280}.canta-line,.canta-line.chorded,.canta-line.chord-row{max-width:900px;margin:0 auto 22px;color:var(--text-primary);font-family:Outfit,sans-serif;font-size:clamp(1.65rem,2.4vw,2.65rem);font-weight:850;line-height:1.18;letter-spacing:0}.canta-line.chorded,.canta-line.chord-row{display:flex;align-items:flex-end;justify-content:center;flex-wrap:wrap;gap:2px 9px;text-align:left}.canta-preserved-pair{width:max-content;max-width:none;margin:0 auto 22px}.canta-line.preserved,.canta-line.canta-plain-preserved,.canta-line.canta-instrumental-line{display:block;width:calc(var(--line-chars, 1) * 1ch);max-width:none;margin:0 auto;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;text-align:left;white-space:pre}.canta-line.canta-instrumental-line{margin-bottom:22px;color:var(--text-secondary);font-size:clamp(1.2rem,1.8vw,1.9rem);font-weight:900}.canta-instrumental-chord{color:#fbbf24;text-shadow:0 0 16px rgba(245,158,11,.24)}.canta-line.preserved{position:relative;min-height:1.05em;margin-bottom:0}.canta-line.canta-plain-preserved{margin-bottom:22px}.canta-preserved-pair .canta-line.canta-plain-preserved{margin-bottom:0}.canta-preserved-chord-slot{position:absolute;top:0;font:inherit;line-height:1;white-space:nowrap}.canta-preserved-chord{display:inline-block;color:#fbbf24;font-size:.56em;font-weight:950;line-height:1;text-shadow:0 0 16px rgba(245,158,11,.32);white-space:nowrap}.canta-chord-segment{display:inline-grid;grid-template-rows:1.05em auto;align-items:end}.canta-chord{color:#fbbf24;font-size:.48em;font-weight:950;line-height:1;text-shadow:0 0 16px rgba(245,158,11,.32);white-space:nowrap}.canta-chord.empty{visibility:hidden}.canta-chord.standalone{min-width:64px;padding:6px 11px;border:1px solid rgba(245,158,11,.34);border-radius:8px;background:#f59e0b1f;font-size:.55em;text-align:center}.canta-word{white-space:pre-wrap}.canta-line-spacer,.canta-line.empty{min-height:18px}.melody-workstation{display:none;flex-direction:column;gap:7px;position:absolute;left:0;right:0;bottom:94px;z-index:45;max-height:min(46vh,352px);overflow-x:hidden;overflow-y:auto;padding:8px 14px 10px;border-top:1px solid var(--border);background:linear-gradient(180deg,rgba(20,184,166,.08),transparent 64%),var(--bg-raised);box-shadow:0 -18px 38px #01081273}.melody-workstation>div:first-child{display:grid!important;grid-template-columns:minmax(170px,1.1fr) minmax(280px,1.45fr) minmax(92px,.52fr) minmax(150px,.78fr);align-items:end!important;gap:8px!important;margin-bottom:0!important;padding:5px 8px;border:1px solid rgba(148,197,220,.14);border-radius:12px;background:linear-gradient(135deg,#14b8a617,#f59e0b0b),#ffffff08}.melody-workstation>div:nth-child(2){display:grid!important;grid-template-columns:minmax(0,1.22fr) minmax(300px,.78fr);align-items:stretch!important;gap:7px!important}.melody-workstation>div:nth-child(2)>div{min-width:0;padding:8px;border:1px solid rgba(148,197,220,.14);border-radius:12px;background:#07111f7a;box-shadow:inset 0 1px #ffffff09}.melody-workstation>div:nth-child(2)>div:first-child{max-width:none!important;border-right:1px solid rgba(148,197,220,.14)!important;padding-right:12px!important}.melody-workstation>div:nth-child(2)>div:nth-child(2){display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-content:start;gap:4px!important}.melody-workstation>div:nth-child(2)>div:nth-child(2)>.rhythm-info{align-self:center;color:var(--text-muted);font-size:.62rem!important;font-weight:900!important;text-transform:uppercase}.melody-workstation>div:nth-child(2)>div:nth-child(2)>#mb-chords-container{grid-column:1 / -1}.melody-workstation>div:nth-child(2)>div:nth-child(2)>#btn-mb-remove-chord{grid-column:2;grid-row:1;min-height:22px;padding-inline:8px;font-size:.66rem!important}.melody-workstation label,.melody-workstation .rhythm-info{color:var(--text-secondary);font-size:.72rem!important;font-weight:850!important;letter-spacing:0}.melody-workstation input,.melody-workstation select{min-height:26px;border-color:#94c5dc2e!important;border-radius:9px!important;background:#07111f9e!important;color:var(--text-primary)!important;font-size:.8rem}.melody-workstation .mb-rehearsal-control{min-width:0}.melody-workstation .mb-rehearsal-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px;margin-top:4px}.melody-workstation #mb-rehearsal-mark{width:100%;min-width:0;text-transform:none;font-weight:800}.melody-workstation #btn-mb-clear-rehearsal{min-height:26px;padding-inline:8px;border-radius:9px!important;font-size:.7rem;font-weight:850}.melody-workstation #mb-figures-container{display:grid!important;grid-template-columns:repeat(8,minmax(34px,1fr));flex:1 1 220px;gap:5px!important}.melody-workstation #mb-figures-container+div{display:grid!important;grid-template-columns:repeat(2,38px);align-content:start;justify-content:end;flex:0 0 84px;gap:6px!important}.melody-workstation .mb-figure-btn{min-width:0;min-height:36px;border:1px solid rgba(148,197,220,.16);border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.045),transparent),#07111fad;color:var(--text-secondary);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;transition:var(--transition)}.melody-workstation .mb-figure-btn:after{content:none}.melody-workstation .mb-figure-btn:hover{color:var(--text-primary);border-color:#14b8a675;background:#14b8a61f;transform:translateY(-1px)}.melody-workstation .mb-figure-btn.active{color:#03131f;border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent-light));box-shadow:0 8px 18px #14b8a62e}.melody-workstation .mb-figure-btn img{height:20px!important}.melody-workstation .mb-figure-btn[data-figure^=rest_] img{height:24px!important}.melody-workstation #mb-chords-container{max-height:none;overflow-y:visible;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px!important}.melody-workstation .mb-chord-btn{min-height:23px;border-radius:7px;padding:0 5px;font-size:.69rem;font-weight:850}.melody-workstation #btn-mb-dot,.melody-workstation #btn-mb-tie,.melody-workstation #btn-mb-clear-all,.melody-workstation #btn-mb-remove-chord{min-height:31px;margin-left:0!important;border-radius:9px!important;font-size:.78rem;font-weight:850}.melody-workstation #btn-mb-dot,.melody-workstation #btn-mb-tie{width:34px;min-width:34px;min-height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center}.melody-workstation #btn-mb-dot svg,.melody-workstation #btn-mb-tie svg{width:17px;height:17px}.melody-workstation #btn-mb-clear-all{grid-column:1 / -1;width:100%;padding-inline:8px}.melody-workstation .mb-custom-chord-editor{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:7px;min-width:230px;padding:9px;border:1px solid rgba(245,158,11,.18);border-radius:12px;background:linear-gradient(180deg,#f59e0b14,#ffffff05),#0208129e;box-shadow:inset 0 1px #ffffff0d}.melody-workstation .mb-custom-chord-editor label{font-size:.62rem!important;font-weight:900!important;color:var(--text-muted);text-transform:uppercase}.melody-workstation .mb-custom-chord-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px}.melody-workstation #mb-custom-chord{width:100%;min-width:0;text-transform:none}.melody-workstation #mb-custom-chord.invalid{border-color:#f87171db!important;box-shadow:0 0 0 2px #f8717129}.melody-workstation #btn-mb-add-custom-chord{min-height:28px;border-radius:9px!important;padding-inline:10px;font-size:.72rem;font-weight:850}.melody-workstation .mb-custom-chord-suggestions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.melody-workstation .mb-custom-chord-chip{min-width:0;min-height:24px;border:1px solid rgba(245,158,11,.22);border-radius:7px;background:linear-gradient(180deg,#f59e0b21,#f59e0b09),#07111f94;color:#fde68a;cursor:pointer;font-size:.67rem;font-weight:850;transition:var(--transition)}.melody-workstation .mb-custom-chord-chip:hover{border-color:#f59e0b80;background:#f59e0b29;transform:translateY(-1px)}.melody-workstation #btn-mb-dot.active,.melody-workstation #btn-mb-tie.active{color:#03131f;border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent-light))}.melody-workstation>div:nth-child(3){gap:0!important;margin-top:0!important;padding:7px 8px 8px;border:1px solid rgba(148,197,220,.14);border-radius:13px;background:linear-gradient(180deg,#38bdf812,#ffffff05),#07111f8f}.melody-workstation>div:nth-child(3):before{content:none}.melody-workstation>div:nth-child(3)>div{min-height:105px!important;gap:2px!important;padding:9px 8px 7px;border-radius:12px;background:linear-gradient(180deg,#ffffff17,#ffffff05),#020812d1;border:1px solid rgba(148,197,220,.14);box-shadow:inset 0 1px #ffffff0f}.melody-workstation .mb-pitch-btn.white-key{align-items:flex-end!important;justify-content:center!important;min-width:0;height:100%!important;padding-bottom:8px!important;font-size:.82rem!important;border:1px solid rgba(2,8,18,.22)!important;border-radius:0 0 8px 8px!important;background:linear-gradient(180deg,#fff,#eaf2f8 72%,#cbd5e1)!important;color:#0f172a!important;box-shadow:inset 0 -12px 18px #0f172a1f;transition:transform .12s ease,filter .12s ease}.melody-workstation .mb-pitch-btn.black-key{width:5%!important;height:63%!important;padding-bottom:6px!important;font-size:.64rem!important;border-radius:0 0 7px 7px!important;background:linear-gradient(180deg,#1f2937,#020617 82%)!important;color:#e5e7eb!important;box-shadow:0 8px 16px #0000006b;transition:transform .12s ease,filter .12s ease}.melody-workstation .mb-pitch-btn:hover{filter:brightness(.96);transform:translateY(1px)}.melody-workstation .mb-piano-panel{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(230px,.28fr);align-items:stretch;gap:8px!important;margin-top:10px!important}.melody-workstation .mb-piano-scroll{width:100%;height:124px!important;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:rgba(148,197,220,.65) rgba(2,8,18,.5)}.melody-workstation .mb-piano-scroll::-webkit-scrollbar{height:9px}.melody-workstation .mb-piano-scroll::-webkit-scrollbar-track{background:#02081280;border-radius:999px}.melody-workstation .mb-piano-scroll::-webkit-scrollbar-thumb{background:#94c5dcb8;border-radius:999px}.melody-workstation .mb-piano-keyboard{--mb-white-key-width: 58px;position:relative;display:flex;width:calc(18 * var(--mb-white-key-width));min-width:calc(18 * var(--mb-white-key-width));height:100%;padding:0 1px 10px}.melody-workstation .mb-piano-keyboard .mb-pitch-btn.white-key{flex:0 0 var(--mb-white-key-width);min-width:var(--mb-white-key-width)}.melody-workstation .mb-piano-keyboard .mb-pitch-btn.black-key{position:absolute;top:0;z-index:2;width:34px!important}.welcome-screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:34px}.welcome-screen.hidden{display:none}body.on-welcome-screen .player-bar,body.on-welcome-screen .topbar,body.on-welcome-screen .sidebar,body.on-welcome-screen .visual-metronome-indicator{display:none!important}.start-dashboard{width:min(980px,100%);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.75fr);gap:18px;align-items:stretch}.start-hero,.start-card{border:1px solid var(--border);border-radius:14px;background:linear-gradient(135deg,#14b8a61c,#f59e0b0f),#07111fc7;box-shadow:var(--shadow-card)}.start-hero{min-height:420px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(28px,5vw,54px);overflow:hidden}.start-brand-lockup{display:flex;align-items:center;gap:18px}.start-brand-icon{width:clamp(68px,8vw,92px);height:clamp(68px,8vw,92px);flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:15px;border:1px solid rgba(255,255,255,.18);border-radius:20px;background:linear-gradient(135deg,#ffffff2e,#fff0),linear-gradient(135deg,var(--accent),var(--accent-sky));color:#f7fbff;box-shadow:0 18px 44px #14b8a647}.start-brand-icon svg{width:100%;height:100%;filter:drop-shadow(0 8px 14px rgba(4,12,24,.22))}.start-side{display:grid;gap:14px}.start-card{padding:18px}.start-card-header{display:flex;align-items:center;justify-content:space-between;gap:10px}.start-card-kicker{margin-bottom:5px;color:var(--accent-light);font-size:.66rem;font-weight:900;letter-spacing:.9px;text-transform:uppercase}.start-card-title{color:var(--text-primary);font-family:Outfit,sans-serif;font-size:1.05rem;font-weight:800;line-height:1.25}.start-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}.start-card-grid span{min-height:42px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:9px;background:#07111f7a;color:var(--text-secondary);font-size:.72rem;font-weight:800}.welcome-icon{width:86px;height:86px;color:var(--accent-light);opacity:.86;margin-bottom:10px;filter:drop-shadow(0 10px 22px rgba(245,158,11,.16));animation:pulse-icon 4s ease-in-out infinite}@keyframes pulse-icon{0%,to{opacity:.4;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}.welcome-title{font-family:Outfit,sans-serif;font-size:clamp(2.3rem,5vw,4.8rem);font-weight:800;background:linear-gradient(135deg,var(--text-primary),#a7f3d0 45%,var(--accent-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:0;line-height:.95;margin-top:0}.welcome-sub{margin-top:18px;font-size:1rem;color:var(--text-secondary);max-width:520px;line-height:1.6}.welcome-formats{display:flex;gap:8px}.format-badge{background:#ffffff0b;border:1px solid var(--border);color:#a7f3d0;padding:4px 12px;border-radius:99px;font-size:.75rem;font-weight:600;font-family:Outfit,sans-serif}.start-actions{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:10px;width:min(560px,100%);margin-top:30px}.start-action{min-height:48px;border:1px solid var(--border);border-radius:10px;background:#ffffff0e;color:var(--text-secondary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:Inter,sans-serif;font-size:.86rem;font-weight:900;transition:var(--transition)}.start-action svg{width:18px;height:18px}.start-action:hover{color:var(--text-primary);border-color:var(--accent);background:#14b8a621;transform:translateY(-1px)}.start-action.primary{color:#03131f;background:linear-gradient(135deg,var(--accent),var(--accent-light));border-color:transparent;box-shadow:var(--shadow-btn)}.welcome-recent-list{display:grid;gap:8px;margin-top:14px}.welcome-recent-item,.welcome-recent-empty{width:100%;min-height:52px;border:1px solid var(--border);border-radius:10px;background:#07111f75;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;gap:10px;padding:10px;text-align:left;transition:var(--transition)}.welcome-recent-item:hover,.welcome-recent-empty:hover{border-color:var(--accent);background:#14b8a61f;color:var(--text-primary)}.welcome-recent-icon{width:38px;height:32px;border-radius:8px;background:#f59e0b1f;color:var(--accent-light);display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:.66rem;font-weight:900}.welcome-recent-copy{min-width:0;display:grid;gap:2px}.welcome-recent-copy strong{color:var(--text-primary);font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.welcome-recent-copy small{color:var(--text-muted);font-size:.72rem}.welcome-recent-empty{justify-content:center;text-align:center;font-weight:900}.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-sky));color:#03131f;border:none;border-radius:var(--radius-md);padding:12px 28px;font-size:.9rem;font-weight:600;font-family:Inter,sans-serif;cursor:pointer;display:flex;align-items:center;gap:8px;transition:var(--transition);box-shadow:var(--shadow-btn);margin-top:8px}.btn-primary svg{width:18px;height:18px}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px var(--accent-glow)}.btn-primary:active{transform:translateY(0)}.osmd-wrapper{display:none;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-card),var(--shadow-glow);overflow:hidden;min-height:100%;transform-origin:top center;position:relative}.osmd-wrapper.visible{display:block}.player-bar{height:68px;margin:0 20px 18px;border-radius:18px;background:linear-gradient(135deg,#14b8a629,#38bdf80f),#0a1828eb;-webkit-backdrop-filter:blur(22px) saturate(145%);backdrop-filter:blur(22px) saturate(145%);border:1px solid rgba(148,197,220,.24);padding:0 18px;display:flex;flex-direction:row;align-items:center;gap:16px;flex-shrink:0;box-shadow:0 18px 42px #0108127a,inset 0 1px #ffffff0d;position:relative;z-index:90;transition:all .3s ease}.player-controls-left,.player-controls-right{display:flex;align-items:center;gap:10px}.progress-area{display:flex;align-items:center;gap:12px;flex:1;min-width:120px}.time-label{font-size:.72rem;color:var(--text-secondary);font-variant-numeric:tabular-nums;min-width:32px}.progress-track{flex:1;height:5px;background:#ffffff1f;border-radius:99px;position:relative;cursor:pointer;transition:height var(--transition)}.progress-track:hover{height:7px}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-sky),var(--accent-light));border-radius:99px;width:0%;transition:width .1s linear;box-shadow:0 0 8px var(--accent-glow)}.progress-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:13px;height:13px;background:#fff;border-radius:50%;left:0%;opacity:0;transition:opacity var(--transition);box-shadow:0 0 0 3px var(--accent-glow),0 2px 6px #00000080;pointer-events:none}.progress-track:hover .progress-thumb{opacity:1}.ctrl-btn{background:#ffffff0a;border:1px solid rgba(148,197,220,.2);color:var(--text-secondary);width:42px;height:42px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition)}.ctrl-btn svg{width:20px;height:20px}.ctrl-btn:hover:not(:disabled){border-color:var(--accent);color:var(--text-primary);background:var(--accent-dim)}.ctrl-btn:disabled{opacity:.3;cursor:not-allowed}.ctrl-play{width:52px;height:52px;background:linear-gradient(135deg,var(--accent),var(--accent-sky));border-color:transparent;color:#03131f;box-shadow:var(--shadow-btn)}.ctrl-play:hover:not(:disabled){background:linear-gradient(135deg,#2dd4bf,var(--accent-light));border-color:transparent;color:#03131f;transform:scale(1.08);box-shadow:0 6px 24px var(--accent-glow)}.ctrl-play svg{width:24px;height:24px}.tempo-control{display:flex;align-items:center;gap:8px;background:#ffffff0e;border:1px solid rgba(245,158,11,.3);border-radius:10px;padding:6px 12px}.tempo-icon{width:14px;height:14px;color:var(--accent-light);flex-shrink:0}.tempo-label{font-size:.75rem;color:var(--text-primary);white-space:nowrap;min-width:52px}.player-extra{position:absolute;right:24px;bottom:42px}.volume-control{display:flex;align-items:center;gap:8px}.volume-icon{width:16px;height:16px;color:var(--text-muted)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:#ffffff24;border-radius:99px;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent-light);cursor:pointer;box-shadow:0 0 6px var(--accent-glow);transition:var(--transition)}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.3)}.tempo-slider,.volume-slider{width:80px}.toast-container{position:fixed;bottom:150px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:1000}.toast{background:#0d1b2ff5;border:1px solid var(--border-strong);color:var(--text-primary);padding:10px 16px;border-radius:var(--radius-sm);font-size:.82rem;box-shadow:var(--shadow-card);animation:toast-in .3s ease;max-width:300px;display:flex;align-items:center;gap:8px}.toast.success{border-color:#22c55e}.toast.error{border-color:#f87171}.toast.info{border-color:var(--accent-sky)}@keyframes toast-in{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes toast-out{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(20px)}}.loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#07111fe0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}.loading-spinner{width:48px;height:48px;border:3px solid var(--accent-dim);border-top-color:var(--accent-light);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-overlay p{color:var(--text-secondary);font-size:.9rem}@media(max-width:640px){:root{--sidebar-w: 260px;--player-h: 140px}.canta-workstation{padding:10px}.canta-form-grid,.canta-structure-tools{grid-template-columns:1fr}.canta-panel-head,.canta-stage-toolbar{align-items:stretch;flex-direction:column}.canta-header-actions{justify-content:stretch}.canta-header-actions>button{flex:1 1 0;justify-content:center}.canta-stage-controls{align-items:stretch;flex-direction:column}.canta-key-readout,.canta-transpose-card{width:100%}.canta-transpose-card{grid-template-columns:1fr auto}.canta-line,.canta-line.chorded,.canta-line.chord-row{font-size:1.55rem}.sidebar{position:absolute;left:0;top:0;height:100vh;z-index:100;box-shadow:var(--shadow-card)}.sidebar.collapsed{transform:translate(-100%)}.tempo-control{display:none}.player-extra{position:static}}@media(max-width:1100px){.canta-shell{grid-template-columns:1fr;overflow:auto}.canta-panel{min-height:360px}.canta-editor-panel{min-height:540px}.canta-stage-toolbar{align-items:stretch;flex-direction:column;min-height:auto}.canta-stage-controls{flex:1 1 100%;justify-content:space-between}.topbar{align-items:stretch;flex-wrap:wrap;gap:8px}.topbar-title{flex:1 1 calc(100% - 360px)}.workspace-mode-switch{order:2}.topbar-actions{order:3}.workspace-mode-btn{min-width:78px}.welcome-screen{align-items:stretch;justify-content:flex-start;overflow-y:auto}.start-dashboard{grid-template-columns:1fr}.start-hero{min-height:330px}.start-side{grid-template-columns:repeat(2,minmax(0,1fr))}.melody-workstation>div:first-child{grid-template-columns:repeat(2,minmax(140px,1fr))}.melody-workstation>div:nth-child(2){grid-template-columns:1fr}.melody-workstation .mb-piano-panel{grid-template-columns:1fr}.melody-workstation .mb-custom-chord-suggestions{grid-template-columns:repeat(6,minmax(0,1fr))}.melody-workstation>div:nth-child(2)>div:first-child{max-width:none!important;border-right:0!important;border-bottom:1px solid var(--border);padding-right:0!important;padding-bottom:12px}.topbar-actions{flex:1 1 100%;justify-content:flex-start;flex-wrap:wrap;overflow:visible;padding-bottom:0}.topbar-actions>*{flex-shrink:0}}@media(max-width:560px){.workspace-mode-switch{order:3;width:100%}.workspace-mode-btn{flex:1;min-width:0;padding:0 8px}.welcome-screen{padding:18px}.start-hero{min-height:0;padding:24px}.start-actions,.start-side,.start-card-grid{grid-template-columns:1fr}.melody-workstation{max-height:52vh;padding:12px}.melody-workstation>div:first-child{grid-template-columns:1fr}.melody-workstation>div:first-child>div:nth-child(2),.melody-workstation>div:nth-child(2)>div:nth-child(2)>div{flex-wrap:wrap}#instrument-selector{min-width:148px!important}#note-names-selector{min-width:128px!important}.topbar .switch-container{padding:0 8px}.player-bar{height:auto;min-height:74px;flex-wrap:wrap;align-content:center;gap:10px;padding:10px 14px}.progress-area{order:3;flex-basis:100%}.player-controls-right{margin-left:auto}}.osmd-wrapper.visible{cursor:pointer}.osmd-wrapper.visible:hover{box-shadow:var(--shadow-card),0 0 0 2px var(--accent-dim),var(--shadow-glow);transition:box-shadow var(--transition)}.score-hint{position:absolute;bottom:20px;left:50%;transform:translate(-50%);z-index:100;background:var(--bg-raised);border:1px solid var(--border-strong);color:var(--text-secondary);padding:8px 16px;border-radius:99px;font-size:.75rem;font-family:Inter,sans-serif;pointer-events:none;box-shadow:var(--shadow-card),0 4px 12px #7c3aed26;display:flex;align-items:center;gap:8px;white-space:nowrap;animation:hint-in .3s ease-out forwards}.score-hint span{color:var(--accent-light);font-weight:700}.score-hint.fade-out{animation:hint-out .4s ease-in forwards}@keyframes hint-in{0%{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%)}}@keyframes hint-out{0%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-8px)}}.score-container{position:relative}body.scrubbing,body.scrubbing *{cursor:grabbing!important;-webkit-user-select:none;user-select:none}.progress-track.scrubbing{height:7px}.progress-track.scrubbing .progress-thumb{opacity:1}.measure-indicator{position:fixed;z-index:9998;background:var(--bg-raised);border:1px solid var(--accent);color:var(--accent-light);padding:6px 14px;border-radius:99px;font-size:.8rem;font-family:Inter,sans-serif;font-weight:500;box-shadow:0 4px 20px var(--accent-glow);pointer-events:none;animation:measure-pop .2s cubic-bezier(.34,1.56,.64,1);white-space:nowrap}.measure-indicator.fade-out{animation:measure-fade .3s ease forwards}@keyframes measure-pop{0%{opacity:0;transform:scale(.8) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes measure-fade{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}.osmd-wrapper.horizontal-mode{width:max-content!important;min-width:100%}body.rhythm-mode .score-container,body.melody-mode .score-container{overflow-x:hidden}body.rhythm-mode .osmd-wrapper:not(.horizontal-mode),body.melody-mode .osmd-wrapper:not(.horizontal-mode){width:100%;max-width:100%}body.rhythm-mode .osmd-wrapper:not(.horizontal-mode) [id^=osmdCanvasPage],body.melody-mode .osmd-wrapper:not(.horizontal-mode) [id^=osmdCanvasPage]{width:100%!important;max-width:100%;overflow:hidden}body.rhythm-mode .osmd-wrapper:not(.horizontal-mode) svg,body.melody-mode .osmd-wrapper:not(.horizontal-mode) svg{width:100%!important;max-width:100%;height:auto}.loop-control{display:flex;align-items:center;gap:8px;background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 12px;transition:var(--transition)}.loop-control.active{border-color:var(--accent);background:#7c3aed26;box-shadow:0 0 10px #7c3aed33}.loop-control.active #btnToggleLoop{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:var(--shadow-btn)}.loop-icon-svg{width:16px;height:16px;stroke:currentColor;display:block}.loop-range{display:flex;align-items:center;gap:6px}.loop-label{color:var(--text-secondary);font-size:.75rem;font-weight:500}.loop-separator{color:var(--text-muted);font-size:.75rem}.loop-number-input{width:46px;background:var(--bg-raised);border:1px solid var(--border);color:var(--text-primary);border-radius:4px;padding:2px 4px;font-size:.75rem;text-align:center;font-family:Inter,sans-serif;outline:none;transition:var(--transition);-moz-appearance:textfield}.loop-number-input::-webkit-outer-spin-button,.loop-number-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.loop-number-input:focus{border-color:var(--accent);background:var(--bg-surface)}.loop-number-input:disabled{opacity:.5;cursor:not-allowed}.loop-control button:disabled{opacity:.4;cursor:not-allowed}.metronome-control{display:flex;align-items:center;gap:6px}.ctrl-btn-metronome{width:auto!important;padding:0 14px!important;border-radius:20px!important;gap:8px;font-family:Inter,sans-serif;font-size:.85rem;font-weight:500}.ctrl-btn-metronome span{display:inline-block}.ctrl-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:var(--shadow-btn),0 0 8px var(--accent-dim)}.visual-metronome-indicator{position:absolute;top:16px;left:50%;transform:translate(-50%);display:flex;gap:8px;align-items:center;justify-content:center;padding:8px 12px;background:#1e1e2399;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:20px;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 12px #00000026;pointer-events:none;z-index:1000}.visual-metronome-indicator:empty{display:none}.metronome-led{width:32px;height:32px;border-radius:8px;background-color:#ffffff26;transition:background-color .1s,box-shadow .1s;display:flex;align-items:center;justify-content:center;color:#fff6;font-family:Outfit,sans-serif;font-weight:700;font-size:16px}@keyframes flashAccentSeq{0%{background-color:#ff2a2a;box-shadow:0 0 12px 2px #ff2a2acc;color:#fff}to{background-color:#ffffff26;box-shadow:0 0 #ff2a2a00;color:#fff6}}@keyframes flashNormalSeq{0%{background-color:#32d74b;box-shadow:0 0 10px 2px #32d74bb3;color:#fff}to{background-color:#ffffff26;box-shadow:0 0 #32d74b00;color:#fff6}}.metronome-led.flash-accent{animation:flashAccentSeq .3s cubic-bezier(.2,.8,.2,1) forwards}.metronome-led.flash-normal{animation:flashNormalSeq .3s cubic-bezier(.2,.8,.2,1) forwards}.measure-highlight{position:absolute;background-color:#ffeb3b59;border:2px solid rgba(255,235,59,.8);border-radius:4px;pointer-events:none;z-index:50;transition:all .2s ease;box-shadow:0 0 15px #ffeb3b66}.lyrics-panel{flex:0 0 245px;min-height:220px;max-height:34vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#07111ff5,#0d1b2ffa),var(--bg-surface);border-top:1px solid rgba(245,158,11,.26);box-shadow:0 -12px 36px #00000057;overflow:hidden}.lyrics-panel.hidden{display:none}.main:has(.lyrics-panel:not(.hidden)) .score-container{flex:1 1 0;min-height:120px}.score-area-wrapper.lyrics-only-mode .score-container{display:none}.score-area-wrapper.lyrics-only-mode .lyrics-panel{flex:1 1 auto;min-height:0;max-height:none;border-top:none}.score-area-wrapper.lyrics-only-mode .lyrics-stage{min-height:360px}.lyrics-toolbar{min-height:118px;display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.07);background:linear-gradient(180deg,#ffffff0b,#ffffff05),#ffffff06}.lyrics-title-group{grid-column:1;min-width:0;text-align:center}.lyrics-kicker{color:#fbbf24;font-family:Outfit,sans-serif;font-size:.72rem;font-weight:900;letter-spacing:.7px;text-transform:uppercase}.lyrics-status{color:var(--text-secondary);font-size:.72rem;line-height:1.2}.lyrics-song-title{color:var(--text-primary);font-family:Outfit,sans-serif;font-size:clamp(1.8rem,2.6vw,2.6rem);font-weight:950;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lyrics-controls{grid-column:1;justify-self:center;display:grid;grid-template-columns:auto auto minmax(260px,auto) minmax(280px,1fr) auto auto;align-items:stretch;justify-content:center;gap:9px;width:min(100%,1240px);min-width:0}.lyrics-control-group{min-height:58px;display:grid;align-content:center;gap:6px;min-width:0;padding:7px 8px;border:1px solid rgba(148,197,220,.13);border-radius:9px;background:#07111f6b;overflow:hidden}.lyrics-control-group-primary{border-color:#f59e0b33;background:#f59e0b11}.lyrics-control-group-reading{min-width:230px}.lyrics-control-group-edit{border-color:#14b8a638;background:#14b8a60f}.lyrics-control-group-label{color:var(--text-muted);font-family:Outfit,sans-serif;font-size:.6rem;font-weight:900;letter-spacing:.6px;line-height:1;text-transform:uppercase}.lyrics-control-cluster{display:flex;align-items:center;gap:6px;min-width:0}.lyrics-control-group-reading .lyrics-control-cluster{display:grid;grid-template-columns:minmax(0,1fr)}.lyrics-control-btn,.lyrics-text-btn{min-width:34px;min-height:32px;border:1px solid rgba(255,255,255,.1);border-radius:7px;background:#ffffff0e;color:var(--text-secondary);cursor:pointer;font-family:Outfit,sans-serif;font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 9px}.lyrics-text-btn{white-space:nowrap}.lyrics-control-btn svg{width:17px;height:17px}.lyrics-control-btn:hover,.lyrics-text-btn:hover,.lyrics-text-btn.active{color:#fff;border-color:#f59e0b70;background:#f59e0b24}#btnLyricsEdit{min-height:36px;padding:0 16px;border-color:#14b8a685;background:linear-gradient(135deg,#14b8a6f0,#f59e0beb);color:#03131f;font-size:.78rem;font-weight:950;box-shadow:0 10px 22px #14b8a62e}#btnLyricsEdit:hover,#btnLyricsEdit.active{color:#03131f;border-color:#f59e0bc7;background:linear-gradient(135deg,#2dd4bf,#fbbf24);box-shadow:0 12px 28px #f59e0b3d}.lyrics-field-label,.lyrics-range-label{min-height:32px;display:flex;align-items:center;gap:7px;padding:0 8px;border:1px solid rgba(255,255,255,.09);border-radius:7px;background:#ffffff0a;color:var(--text-secondary);font-family:Outfit,sans-serif;font-size:.68rem;font-weight:800;white-space:nowrap}.lyrics-field-label{min-width:66px;min-height:42px;display:grid;justify-items:center;gap:4px;padding:5px 6px;font-size:.62rem;line-height:1}.lyrics-range-label{min-height:34px;display:grid;grid-template-columns:48px minmax(92px,1fr);min-width:0;width:100%}.lyrics-range-label span{min-width:0;font-size:.66rem;font-weight:900;overflow:hidden;text-overflow:ellipsis}.lyrics-range-speed{border-color:#38bdf833;background:#38bdf80e}.lyrics-range-size{border-color:#f59e0b33;background:#f59e0b0e}.lyrics-range-label input{width:94px}.lyrics-range-speed input{accent-color:#38bdf8}.lyrics-range-size input{accent-color:#fbbf24}.lyrics-number-label input{width:46px;min-height:28px;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:#ffffff12;color:var(--text-primary);font-family:Outfit,sans-serif;font-size:.75rem;font-weight:800;text-align:center}.lyrics-tap-btn{gap:5px;color:#fef3c7;border-color:#f59e0b4d}.lyrics-tap-btn span{color:#fff;font-variant-numeric:tabular-nums}.lyrics-transpose-mini{min-height:32px;display:inline-grid;grid-template-columns:30px 42px 30px;align-items:center;border:1px solid rgba(245,158,11,.28);border-radius:7px;background:#f59e0b14;overflow:hidden}.lyrics-transpose-mini button{height:32px;border:0;background:transparent;color:#fef3c7;cursor:pointer;font-family:Outfit,sans-serif;font-size:1rem;font-weight:900}.lyrics-transpose-mini button:hover{background:#f59e0b29;color:#fff}.lyrics-transpose-mini span{color:#fff;font-family:Outfit,sans-serif;font-size:.78rem;font-weight:900;text-align:center;font-variant-numeric:tabular-nums}.lyrics-stage{position:relative;flex:1 1 0;min-height:0;overflow:hidden;cursor:grab}.lyrics-stage:active{cursor:grabbing}.lyrics-count-in{position:absolute;left:50%;top:50%;z-index:5;width:132px;height:132px;display:flex;align-items:center;justify-content:center;border:2px solid rgba(245,158,11,.7);border-radius:50%;background:#07111feb;color:#fff;font-family:Outfit,sans-serif;font-size:4.6rem;font-weight:900;line-height:1;box-shadow:0 0 36px #f59e0b57,inset 0 0 28px #f59e0b24;transform:translate(-50%,-50%);pointer-events:none;font-variant-numeric:tabular-nums}.lyrics-count-in.hidden{display:none}.lyrics-count-in.accent{border-color:#14b8a6d1;box-shadow:0 0 40px #14b8a661,inset 0 0 28px #14b8a629}.lyrics-scroller{position:absolute;left:0;right:0;top:0;padding:34px 36px 64px;transform:translateY(0);will-change:transform}.lyrics-line{max-width:1100px;margin:0 auto 18px;color:#f7fbff9e;font-family:Outfit,sans-serif;font-size:var(--lyrics-font-size, 34px);font-weight:800;line-height:1.18;letter-spacing:0;text-align:center;text-wrap:balance;transition:color .18s ease,transform .18s ease,opacity .18s ease}.lyrics-line.active{color:#fff;opacity:1;transform:scale(1.035);text-shadow:0 0 20px rgba(245,158,11,.28)}.lyrics-line.chorded,.lyrics-line.chord-row{display:flex;justify-content:center;align-items:flex-end;flex-wrap:wrap;gap:2px 8px;text-align:left}.lyrics-preserved-pair{width:max-content;max-width:none;margin:0 auto 18px}.lyrics-line.preserved,.lyrics-line.lyrics-plain-preserved,.lyrics-line.lyrics-instrumental-line{display:block;width:calc(var(--line-chars, 1) * 1ch);max-width:none;margin:0 auto;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;text-align:left;white-space:pre;text-wrap:nowrap}.lyrics-line.lyrics-instrumental-line{margin-bottom:18px;color:var(--text-secondary);font-size:calc(var(--lyrics-font-size, 34px) * .66);font-weight:900}.lyrics-instrumental-chord{color:#fbbf24;text-shadow:0 0 14px rgba(245,158,11,.24)}.lyrics-line.preserved{position:relative;min-height:1.05em;margin-bottom:0}.lyrics-line.lyrics-plain-preserved{margin-bottom:18px}.lyrics-preserved-pair .lyrics-line.lyrics-plain-preserved{margin-bottom:0}.lyrics-preserved-chord-slot{position:absolute;top:0;font:inherit;line-height:1;white-space:nowrap}.lyrics-preserved-chord{display:inline-block;color:#fbbf24;font-size:calc(var(--lyrics-font-size, 34px) * .52);font-weight:900;line-height:1;text-shadow:0 0 14px rgba(245,158,11,.32);white-space:nowrap}.lyrics-chord-segment{display:inline-grid;grid-template-rows:1.05em auto;align-items:end;min-width:0}.lyrics-chord{color:#fbbf24;font-size:calc(var(--lyrics-font-size, 34px) * .48);font-weight:900;line-height:1;text-shadow:0 0 14px rgba(245,158,11,.32);white-space:nowrap}.lyrics-chord.empty{visibility:hidden}.lyrics-chord.standalone{display:inline-flex;align-items:center;justify-content:center;min-width:58px;padding:5px 10px;border:1px solid rgba(245,158,11,.34);border-radius:7px;background:#f59e0b1f;font-size:calc(var(--lyrics-font-size, 34px) * .55)}.lyrics-word{white-space:pre-wrap}.lyrics-pause-line,.canta-pause-line{display:flex;width:fit-content;min-width:260px;align-items:center;justify-content:center;margin-top:10px;margin-bottom:28px;padding:12px 22px;border:1px solid rgba(245,158,11,.36);border-radius:7px;background:#f59e0b1a;color:#fcd34d;font-size:calc(var(--lyrics-font-size, 34px) * .52);text-transform:uppercase}.canta-pause-line{min-width:220px;margin:8px 0 22px;font-size:1rem}.lyrics-pause-line.active{color:#fff7ed;background:#f59e0b2e;border-color:#f59e0ba3}.lyrics-line.empty{min-height:28px}.lyrics-placeholder{max-width:760px;margin:36px auto 0;color:var(--text-muted);font-size:1rem;line-height:1.6;text-align:center}.lyrics-fade{position:absolute;left:0;right:0;z-index:2;pointer-events:none}.lyrics-fade-top{top:0;height:50px;background:linear-gradient(180deg,#07111f,#07111f00)}.lyrics-fade-bottom{bottom:0;height:70px;background:linear-gradient(0deg,#0d1b2f,#0d1b2f00)}.lyrics-editor{display:none;flex:1 1 0;width:100%;min-height:0;resize:none;border:none;border-top:1px solid rgba(255,255,255,.08);outline:none;background:#040a12eb;color:var(--text-primary);font-family:Inter,sans-serif;font-size:1rem;line-height:1.55;padding:18px 22px}.lyrics-panel.editing .lyrics-stage{display:none}.lyrics-panel.editing .lyrics-editor{display:block}@media(max-width:1280px){.lyrics-controls{grid-template-columns:repeat(auto-fit,minmax(220px,max-content));align-items:stretch}.lyrics-control-group-reading{min-width:300px}}@media(max-width:900px){.lyrics-panel{flex-basis:300px;max-height:42vh}.lyrics-toolbar{display:flex;align-items:stretch;flex-direction:column;min-height:auto}.lyrics-title-group,.lyrics-controls{grid-column:auto}.lyrics-title-group{text-align:center}.lyrics-controls{justify-self:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));justify-content:center}.lyrics-control-group,.lyrics-control-group-reading{min-width:0}.lyrics-control-cluster{flex-wrap:wrap}.lyrics-range-label{flex:1 1 190px}.lyrics-range-label input{width:80px}.lyrics-scroller{padding:30px 18px 56px}}.instrument-guide-panel{min-height:220px;height:auto;max-height:38vh;padding-bottom:0;overflow-y:auto;overflow-x:hidden;background:#120220fa;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-top:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;box-shadow:0 -8px 40px #0009;z-index:20;transition:transform .3s ease}.instrument-guide-panel.chords-only{height:285px}.instrument-guide-panel.chords-only .guide-content{justify-content:center;align-items:center}.instrument-guide-panel.chords-only .chord-visualization{flex:1;max-width:400px;border-right:none;padding-right:0}.instrument-guide-panel.hidden{display:none}.guide-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;border-bottom:1px solid var(--border);background:var(--bg-surface)}.control-select{background:var(--bg-raised);color:var(--text-primary);border:1px solid var(--border);padding:6px 12px;border-radius:var(--radius-sm);font-family:Inter,sans-serif;font-size:.9rem;outline:none}select.control-select option,select.control-select optgroup{background-color:var(--bg-surface);color:var(--text-primary)}.switch-container{display:flex;align-items:center}.switch{position:relative;display:inline-block;width:34px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--bg-surface);border:1px solid var(--border);transition:.4s}.slider:before{position:absolute;content:"";height:14px;width:14px;left:2px;bottom:2px;background-color:var(--text-muted);transition:.4s}input:checked+.slider{background-color:var(--accent);border-color:var(--accent)}input:checked+.slider:before{transform:translate(14px);background-color:#fff}.slider.round{border-radius:20px}.slider.round:before{border-radius:50%}.guide-content{display:flex;gap:20px;flex:1}.guide-content.bass-mode .chord-visualization{flex:0 0 auto;border-right:1px solid var(--border);padding-right:20px}.guide-content.bass-mode .chord-diagram-container{display:none!important}.guide-content.bass-mode .strumming-section{padding-left:20px}.guide-content.piano-mode .chord-visualization,.guide-content.piano-mode .strumming-section,.guide-content.drums-mode .chord-visualization,.guide-content.drums-mode .strumming-section{display:none!important}.guide-content.piano-mode .piano-guide,.guide-content.drums-mode .drum-guide{display:flex!important}.main:has(.instrument-guide-panel.piano-mode:not(.hidden)) .score-container,.main:has(.instrument-guide-panel.xylophone-mode:not(.hidden)) .score-container{flex:0 1 50%;max-height:50vh;min-height:96px}.main:has(.instrument-guide-panel.drums-mode:not(.hidden)) .score-container{flex:0 1 55%;max-height:55vh;min-height:96px}.instrument-guide-panel.piano-mode,.instrument-guide-panel.xylophone-mode{flex:1 1 0;height:auto;min-height:min(330px,calc(100% - 96px));max-height:none;overflow:hidden;background:linear-gradient(180deg,#0d1b2ffa,#07111ffa)!important}.instrument-guide-panel.drums-mode{flex:1 1 45%;height:auto;min-height:min(280px,calc(100% - 96px));max-height:none;overflow-x:hidden;overflow-y:auto;background:linear-gradient(180deg,#0d1b2ffa,#07111ffa)!important}.instrument-guide-panel.piano-mode .guide-header,.instrument-guide-panel.xylophone-mode .guide-header,.instrument-guide-panel.drums-mode .guide-header{min-height:24px;padding:2px 10px;justify-content:flex-end;background:transparent!important;border-bottom:none!important}.instrument-guide-panel.piano-mode .guide-header-left,.instrument-guide-panel.xylophone-mode .guide-header-left,.instrument-guide-panel.drums-mode .guide-header-left{display:none!important}.instrument-guide-panel.piano-mode .guide-header-right,.instrument-guide-panel.xylophone-mode .guide-header-right,.instrument-guide-panel.drums-mode .guide-header-right{gap:6px!important}.instrument-guide-panel.piano-mode .icon-btn,.instrument-guide-panel.xylophone-mode .icon-btn,.instrument-guide-panel.drums-mode .icon-btn{width:22px;height:22px;min-width:22px;padding:0;border-radius:6px;font-size:.8rem}.instrument-guide-panel.piano-mode .guide-content,.instrument-guide-panel.xylophone-mode .guide-content{align-items:stretch;gap:0;min-height:0;overflow:hidden;background:transparent!important;padding:0!important}.instrument-guide-panel.drums-mode .guide-content{align-items:stretch;gap:0;min-height:0;overflow:visible;background:transparent!important;padding:0!important}.instrument-guide-panel.drums-mode .drum-guide{flex:0 0 auto!important;height:auto!important;min-height:0;overflow:visible}.instrument-guide-panel.drums-mode .drum-guide:has(.drum-timeline-container.drum-chart-hidden){flex:1 1 0!important;height:100%!important}.instrument-guide-panel.piano-mode .piano-guide,.instrument-guide-panel.xylophone-mode .xylophone-guide,.instrument-guide-panel.drums-mode .drum-guide{display:flex!important;flex:1 1 0!important;min-height:0;height:100%;gap:6px!important}.instrument-guide-panel.piano-mode .piano-header{flex-shrink:0;margin-bottom:0!important}.instrument-guide-panel.piano-mode .piano-controls{gap:8px;margin-bottom:0!important;padding:0 8px!important}.instrument-guide-panel.piano-mode .hand-control{min-width:0;padding:8px 12px!important;border-radius:8px!important;background:#ffffff0d!important;border:2px solid!important;transition:all .2s ease!important;box-shadow:inset 0 1px 2px #ffffff1a!important}.instrument-guide-panel.piano-mode .hand-control:hover{background:#ffffff14!important;box-shadow:inset 0 1px 3px #ffffff26,0 4px 12px #0003!important}.instrument-guide-panel.piano-mode .left-hand{border-color:#ef444480!important;background:linear-gradient(135deg,#ef444414,#ef44440a)!important}.instrument-guide-panel.piano-mode .left-hand:hover{border-color:#ef4444!important;background:linear-gradient(135deg,#ef44441f,#ef444414)!important}.instrument-guide-panel.piano-mode .right-hand{border-color:#3b82f680!important;background:linear-gradient(135deg,#3b82f614,#3b82f60a)!important}.instrument-guide-panel.piano-mode .right-hand:hover{border-color:#3b82f6!important;background:linear-gradient(135deg,#3b82f61f,#3b82f614)!important}.instrument-guide-panel.piano-mode .hand-control span{font-size:.75rem!important;margin-right:8px!important;white-space:nowrap;font-weight:600!important;letter-spacing:.3px!important}.instrument-guide-panel.piano-mode .hand-control select{max-width:150px;font-size:.8rem!important;font-weight:500!important;background:#ffffff14!important;border:1px solid rgba(255,255,255,.15)!important;border-radius:6px!important;padding:4px 8px!important;cursor:pointer!important;transition:all .2s ease!important}.instrument-guide-panel.piano-mode .hand-control select:hover{background:#ffffff1f!important;border-color:#ffffff40!important}.instrument-guide-panel.piano-mode .hand-control select:focus{outline:none!important;background:#ffffff26!important;border-color:#fff6!important;box-shadow:0 0 8px #ffffff1a!important}.instrument-guide-panel.piano-mode #piano-chord-name{font-size:1.8rem!important;line-height:1;font-weight:700!important;color:var(--accent-light)!important;text-shadow:0 2px 8px rgba(20,184,166,.3),0 0 20px rgba(20,184,166,.15)!important;font-family:Outfit,sans-serif!important;letter-spacing:-.5px!important;padding:8px 16px!important;background:linear-gradient(135deg,#14b8a61a,#38bdf80d)!important;border-radius:8px!important;border:1px solid rgba(20,184,166,.2)!important;min-width:100px!important;text-align:center!important}.instrument-guide-panel.piano-mode .piano-diagram-container,.instrument-guide-panel.xylophone-mode .xylophone-diagram-container{flex:1 1 0!important;min-height:190px;overflow:hidden!important;padding:14px!important;background:#0f172a73!important;border:1px solid rgba(148,197,220,.12)!important;border-radius:16px!important;box-shadow:inset 0 2px 6px #00000059,0 8px 24px #00000040!important}.instrument-guide-panel.piano-mode .piano-diagram-container svg,.instrument-guide-panel.xylophone-mode .xylophone-diagram-container svg{max-width:100%;max-height:100%}.guide-content.xylophone-mode .chord-visualization,.guide-content.xylophone-mode .strumming-section{display:none!important}.guide-content.xylophone-mode .xylophone-guide{display:flex!important}.piano-tab:hover:not(.active){background:var(--bg-hover)!important}.chord-visualization{flex:0 0 220px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid var(--border);padding-right:20px}.chord-name{font-family:Outfit,sans-serif;font-size:2.2rem;font-weight:700;color:var(--accent-light);margin-bottom:4px;margin-top:0;text-align:center;width:100%;text-shadow:0 0 20px var(--accent-glow)}.chord-diagram-container{width:100%;height:180px;background:var(--bg-raised);border-radius:var(--radius-md);border:1px solid var(--border);display:flex;align-items:center;justify-content:center}.strumming-section{flex:1;display:flex;flex-direction:column;justify-content:center;padding-left:50px}.guide-content.left-handed-layout{flex-direction:row-reverse}.guide-content.left-handed-layout .chord-visualization{border-right:none;padding-right:0;border-left:1px solid var(--border);padding-left:20px}.guide-content.left-handed-layout .strumming-section{padding-left:0;padding-right:50px}.strumming-header{display:flex;flex-direction:column;align-items:center;margin-bottom:10px;width:100%;gap:6px}.strumming-controls{display:flex;gap:8px;justify-content:center}.strumming-title{font-size:1.35rem;font-family:Outfit,sans-serif;color:var(--accent-light);font-weight:600;text-transform:uppercase;letter-spacing:1.5px;margin:0;text-shadow:0 0 15px var(--accent-glow)}.btn-preview-pattern{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:20px;border:1px solid var(--accent);background:#7c3aed26;color:var(--accent-light);font-family:Outfit,sans-serif;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .25s ease;letter-spacing:.5px;white-space:nowrap}.btn-preview-pattern svg{width:14px;height:14px;flex-shrink:0}.btn-preview-pattern:hover{background:#7c3aed4d;box-shadow:0 0 14px var(--accent-glow);transform:translateY(-1px)}.btn-preview-pattern:active{transform:translateY(0)}.btn-preview-pattern.playing{background:var(--accent);color:#fff;border-color:var(--accent-light);box-shadow:0 0 18px var(--accent-glow);animation:previewPulse 1.2s ease-in-out infinite}@keyframes previewPulse{0%,to{box-shadow:0 0 12px var(--accent-glow)}50%{box-shadow:0 0 24px var(--accent-glow),0 0 40px #7c3aed33}}.strum-slot.preview-active{border-color:var(--accent-light)!important;background:#7c3aed59!important;box-shadow:0 0 20px var(--accent-glow),inset 0 0 8px #7c3aed4d!important;color:#fff!important;transition:all .06s ease!important}.strumming-grid{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;width:100%;max-width:800px;margin:0 auto}.strumming-grid.grid-16{flex-wrap:wrap}.strum-beat-group{display:flex;flex-direction:column;align-items:center;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:6px;gap:6px}.beat-header{font-family:Outfit,sans-serif;font-size:.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-right:-1px}.beat-slots-container{display:flex;flex-direction:row;gap:3px}.strum-multiplier-label{font-family:Outfit,sans-serif;font-size:2.2rem;font-weight:800;color:var(--accent);text-shadow:0 0 15px var(--accent-glow);margin-left:10px;-webkit-user-select:none;user-select:none}.strum-slot{width:32px;height:32px;flex-shrink:0;background:var(--bg-raised);border:2px solid var(--border);border-radius:var(--radius-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none;position:relative}.strum-slot.strum-down{border-color:#32d74b40;color:#32d74b}.strum-slot.strum-down:hover{border-color:#32d74b;background:#32d74b1a}.strum-slot.strum-ghost-down{border-color:#32d74b33;border-style:dashed;color:#32d74b66}.strum-slot.strum-ghost-down:hover{border-color:#32d74b80;background:#32d74b0d}.strum-slot.strum-up{border-color:#0a84ff40;color:#0a84ff}.strum-slot.strum-up:hover{border-color:#0a84ff;background:#0a84ff1a}.strum-slot.strum-ghost-up{border-color:#0a84ff33;border-style:dashed;color:#0a84ff66}.strum-slot.strum-ghost-up:hover{border-color:#0a84ff80;background:#0a84ff0d}.strum-slot.strum-mute{border-color:#ff9f0a40;color:#ff9f0a}.strum-slot.strum-mute:hover{border-color:#ff9f0a;background:#ff9f0a1a}.strum-slot.strum-rest{border-color:var(--border-strong);color:var(--text-muted)}.strum-slot.strum-rest:hover{border-color:var(--text-secondary);background:#ffffff0d}.strum-slot.bass-root{border-color:#ff453a99;color:#ff453a;background:#ff453a1a}.strum-slot.bass-root:hover{border-color:#ff453a;background:#ff453a33}.strum-slot.bass-root-hi{border-color:#bf5af299;color:#bf5af2;background:#bf5af21a}.strum-slot.bass-root-hi:hover{border-color:#bf5af2;background:#bf5af233}.strum-slot.bass-third{border-color:#ff9f0a99;color:#ff9f0a;background:#ff9f0a1a}.strum-slot.bass-third:hover{border-color:#ff9f0a;background:#ff9f0a33}.strum-slot.bass-fifth-hi{border-color:#30d15899;color:#30d158;background:#30d1581a}.strum-slot.bass-fifth-hi:hover{border-color:#30d158;background:#30d15833}.strum-slot.bass-fifth-lo{border-color:#0a84ff99;color:#0a84ff;background:#0a84ff1a}.strum-slot.bass-fifth-lo:hover{border-color:#0a84ff;background:#0a84ff33}.strum-slot.strum-down.active-strong{border-color:#32d74b;background:#32d74b40;box-shadow:0 0 25px #32d74bcc,inset 0 0 10px #32d74b66;color:#fff}.strum-slot.strum-up.active-strong{border-color:#0a84ff;background:#0a84ff40;box-shadow:0 0 25px #0a84ffcc,inset 0 0 10px #0a84ff66;color:#fff}.strum-slot.strum-mute.active-strong{border-color:#ff9f0a;background:#ff9f0a40;box-shadow:0 0 25px #ff9f0acc,inset 0 0 10px #ff9f0a66;color:#fff}.strum-slot.active-dim{border-color:#ffffff59;background:#ffffff14;box-shadow:0 0 12px #fff3,inset 0 0 5px #ffffff1a;color:#ffffffb3}.strum-icon{font-size:1.05rem;line-height:1}.strum-label{font-size:.55rem;color:var(--text-muted);position:absolute;bottom:1px}.beamed-group{position:relative;margin-top:32px}.strum-slot:before{content:"";position:absolute;bottom:calc(100% + 1px);left:50%;transform:translate(-50%);width:2px;height:26px;background:var(--accent);transition:opacity .2s;opacity:1}.beamed-group:after,.beamed-sixteenths:before{content:"";position:absolute;background:var(--accent);height:4px;border-radius:0;opacity:1;box-shadow:0 0 6px var(--accent-glow);pointer-events:none}.beamed-group:after{top:-26px;left:15px;right:15px}.beamed-sixteenths:before{top:-20px;left:15px;right:15px}.strumming-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem;margin-top:15px;margin-bottom:0;font-size:.72rem;color:var(--text-muted)}.strumming-legend .legend-item{display:flex;align-items:center;gap:.3rem}.strumming-legend .strum-icon{font-size:.95rem;font-weight:700}.strumming-legend .strum-down{color:#32d74b}.strumming-legend .strum-up{color:#0a84ff}.strumming-legend .strum-ghost-down{color:#32d74ba6}.strumming-legend .strum-ghost-up{color:#0a84ffa6}.strumming-legend .strum-mute{color:#ff9f0a}.strumming-legend .bass-root{color:#ff453a;font-weight:600}.strumming-legend .bass-root-hi{color:#bf5af2;font-weight:600}.strumming-legend .bass-third{color:#ff9f0a;font-weight:600}.strumming-legend .bass-fifth-hi{color:#30d158}.strumming-legend .bass-fifth-lo{color:#0a84ff}.strumming-legend .strum-rest{color:var(--text-muted)}.kids-mode-active .vf-notehead path{transform-origin:center;transform-box:fill-box;transform:scale(1.35)}.drum-guide{box-sizing:border-box}.drum-timeline-container{flex:0 0 auto;min-height:0;overflow:visible}.drum-map-title{display:flex;align-items:baseline;gap:8px;color:var(--text-muted);font-size:.72rem;font-weight:800;letter-spacing:0;text-transform:uppercase}#drum-map-summary{color:#94a3b8b8;font-size:.62rem;font-weight:700;text-transform:none}.drum-timeline-track{display:flex!important;flex:0 0 auto;position:relative;background:#0000004d!important;border:1px solid rgba(255,255,255,.08)!important;min-height:88px;height:132px!important;overflow-x:auto!important;overflow-y:hidden!important;align-items:stretch;gap:0;padding:0;box-shadow:0 12px 28px #00000038}.drum-timeline-section-block{border:1px solid rgba(255,255,255,.08)!important;border-radius:0;align-items:stretch!important;justify-content:center!important;color:var(--text-secondary)!important;min-height:100%;padding:8px 7px 31px!important}.drum-timeline-section-block:last-child{border-right:1px solid rgba(255,255,255,.08)!important}.drum-timeline-section-block.active-section-block{background:#3b82f633!important;color:#fff!important;text-shadow:0 0 6px rgba(59,130,246,.8);border-color:#3b82f666!important;box-shadow:inset 0 -4px 0 0 var(--accent-light, #3b82f6),0 0 22px #3b82f62e}.drum-chart-section-name{position:relative;z-index:2;color:#fff;font-size:.92rem;font-weight:900;line-height:1;overflow:hidden;text-align:center;text-overflow:ellipsis}.drum-chart-section-bars{position:relative;z-index:2;color:var(--text-muted);font-size:.62rem;font-weight:800;line-height:1;text-align:center;text-transform:uppercase}.drum-chart-section-range{position:relative;z-index:2;color:#94a3b8b8;font-size:.58rem;font-weight:700;line-height:1;text-align:center}.drum-chart-chips{position:absolute;left:8px;right:8px;bottom:5px;z-index:2;display:flex;flex-direction:column;gap:4px;min-width:0;width:auto}.drum-chart-chip{width:100%;min-height:24px;border:1px solid rgba(96,165,250,.32);border-radius:6px 6px 7px 7px;background:linear-gradient(180deg,#2563eb33,#0f172a85);color:#dbeafe;cursor:pointer;font-family:Outfit,sans-serif;font-size:.64rem;font-weight:800;line-height:1.1;overflow:hidden;padding:3px 6px 4px;text-align:center;text-overflow:ellipsis;white-space:nowrap;box-shadow:inset 0 -3px #3b82f63d}.drum-main-layout{display:none!important;flex:0 0 190px!important;max-height:170px;opacity:.82;overflow:hidden}.drum-timeline-container.drum-chart-hidden,#drum-sequencer-toolbar-container{display:none!important}#drum-sequencer-toolbar-container.drum-editor-open{display:flex!important}.drum-main-layout.drum-editor-open{display:flex!important;flex:1 1 0!important;max-height:none;opacity:1;padding-top:0!important}.drum-main-layout.drum-editor-mode-groove #drum-sequencer-panel-right,.drum-main-layout.drum-editor-mode-fill #drum-sequencer-panel-left{display:none!important}.drum-main-layout.drum-editor-mode-groove #drum-sequencer-panel-left,.drum-main-layout.drum-editor-mode-fill #drum-sequencer-panel-right{flex:1 1 100%!important;opacity:1!important;pointer-events:auto!important}.drum-editor-title{color:#fff;font-family:Outfit,sans-serif;font-size:.78rem;font-weight:900;margin-right:auto}.drum-editor-close-btn{min-height:26px;border:1px solid rgba(255,255,255,.1);border-radius:5px;background:#ffffff0d;color:var(--text-secondary);cursor:pointer;font-family:Outfit,sans-serif;font-size:.68rem;font-weight:800;padding:0 8px}.drum-chart-chip:hover{background:linear-gradient(180deg,#3b82f647,#0f172a9e);border-color:#93c5fd73;color:#fff}.drum-chart-groove-chip{border-color:#3b82f640;background:#3b82f61a}.drum-sequencer-cell.active{transform:scale(.96)}.cymbal-icon{color:#00f0ff;text-shadow:0 0 4px rgba(0,240,255,.3)}.cymbal-active{color:#00f0ff!important;background:#00f0ff1f!important;border-color:#00f0ff59!important;box-shadow:0 0 10px #00f0ff40!important;text-shadow:0 0 5px #00f0ff}.snare-icon{color:#ff9500;text-shadow:0 0 4px rgba(255,149,0,.3)}.snare-active{color:#ff9500!important;background:#ff95001f!important;border-color:#ff950059!important;box-shadow:0 0 10px #ff950040!important;text-shadow:0 0 5px #ff9500}.tom-icon{color:#bf5af2;text-shadow:0 0 4px rgba(191,90,242,.3)}.tom-active{color:#bf5af2!important;background:#bf5af21f!important;border-color:#bf5af259!important;box-shadow:0 0 10px #bf5af240!important;text-shadow:0 0 5px #bf5af2}.kick-icon{color:#ff453a;text-shadow:0 0 4px rgba(255,69,58,.3)}.kick-active{color:#ff453a!important;background:#ff453a26!important;border-color:#ff453a59!important;box-shadow:0 0 12px #ff453a4d!important;text-shadow:0 0 5px #ff453a}.drum-sequencer-cell.current-step{border-color:#ffffff80!important;background:#ffffff14!important;box-shadow:0 0 8px #ffffff26}.drum-sequencer-cell.current-step.active{border-color:#fff!important;box-shadow:0 0 12px #fff6}.drum-sequencer-cell.triggered{transform:scale(1.08)!important}@keyframes slide-stripes{0%{background-position:0 0}to{background-position:40px 0}}@keyframes pulse-fill{0%{transform:scale(1);filter:drop-shadow(0 0 4px rgba(251,191,36,.4))}to{transform:scale(1.15);filter:drop-shadow(0 0 12px rgba(239,68,68,.8))}}.drum-fill-card.fill-approaching{border-color:#ef444473!important;box-shadow:0 0 15px #ef444433!important;background:#ef44440a!important}.drum-fill-card.fill-approaching .fill-bg-pattern{opacity:1!important;animation:slide-stripes 1s linear infinite!important}.drum-fill-card.fill-approaching #drum-fill-title{color:#ef4444!important;text-shadow:0 0 8px rgba(239,68,68,.5)}.drum-sequencer-cell{min-width:0;height:20px!important}.drum-sequencer-row{margin-bottom:2px!important}.drum-step-header{line-height:1.1}.drum-sequencer-cell:hover{background:#ffffff14!important;border-color:#ffffff40!important;box-shadow:0 0 5px #ffffff1a}.drum-sequencer-cell:active{transform:scale(.92)!important}.drum-sequencer-toolbar select{font-family:Outfit,sans-serif;background:#0d1b2f99!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:6px;color:var(--text-primary)!important;padding:4px 8px;outline:none;cursor:pointer;font-size:.75rem;transition:all .2s}.drum-sequencer-toolbar select:hover{border-color:#ffffff40!important;background:#0d1b2fcc!important}.drum-sequencer-toolbar select option{background:#0d1b2f!important;color:#fff!important}.drum-sequencer-side-panel{transition:all .3s cubic-bezier(.4,0,.2,1);opacity:.78}.drum-sequencer-side-panel.dimmed{opacity:.18;pointer-events:none;filter:grayscale(40%) blur(.2px)}.drum-sequencer-side-panel.fill-approaching{border-color:#ef444473!important;box-shadow:0 0 15px #ef44442e!important}.drum-sequencer-side-panel.fill-approaching .fill-bg-pattern{opacity:1!important;animation:slide-stripes 1.2s linear infinite!important}.drum-panel-header{border-bottom:1px solid rgba(255,255,255,.05)}.drum-preview-btn{min-height:24px;border:1px solid rgba(20,184,166,.36);border-radius:5px;background:#14b8a61f;color:#a7f3d0;cursor:pointer;font-family:Outfit,sans-serif;font-size:.66rem;font-weight:800;margin-left:auto;padding:2px 8px}.drum-preview-btn:hover,.drum-preview-btn.playing{border-color:#f59e0b8c;background:#f59e0b29;color:#fff7ed}.drum-variant-tabs{display:flex;align-items:center;gap:4px;margin:0 0 7px;padding:0 2px;min-width:0}.drum-variant-tab,.drum-copy-variant-btn{min-height:24px;border:1px solid rgba(255,255,255,.08);border-radius:5px;background:#ffffff09;color:var(--text-secondary);font-family:Outfit,sans-serif;font-size:.62rem;font-weight:700;line-height:1;padding:0 7px;cursor:pointer;white-space:nowrap}.drum-variant-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}.drum-copy-variant-btn{margin-left:auto;color:var(--text-primary);background:#3b82f61f;border-color:#3b82f647}.drum-sequencer-cell{font-size:.8rem;line-height:1}.drum-row-label{width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:9999;transition:opacity .3s ease}.modal-overlay.hidden{display:none!important;opacity:0;pointer-events:none}.modal-content{background-color:var(--bg-primary);border-radius:16px;box-shadow:0 10px 30px #0000004d;overflow:hidden;border:1px solid var(--border-color);animation:modalPop .3s cubic-bezier(.175,.885,.32,1.275)}.modal-header{padding:16px 24px;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;background-color:var(--bg-secondary)}.modal-header h2{margin:0;font-size:1.25rem;color:var(--text-primary)}.btn-close-modal{background:none;border:none;color:var(--text-secondary);font-size:1.5rem;cursor:pointer;line-height:1;padding:4px;transition:color .2s}.btn-close-modal:hover{color:var(--danger-color, #ef4444)}.modal-footer{padding:16px 24px;border-top:1px solid var(--border-color);background-color:var(--bg-secondary);display:flex;justify-content:flex-end;gap:12px}@keyframes modalPop{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}.rhythm-builder-modal{width:90vw;max-width:1200px;height:80vh;max-height:800px;display:flex;flex-direction:column}.rhythm-builder-body{flex:1;display:flex;flex-direction:row;overflow:hidden;background-color:var(--bg-primary)}.rhythm-sidebar{width:240px;background-color:var(--bg-secondary);border-right:1px solid var(--border-color);display:flex;flex-direction:column;overflow-y:auto;padding:16px}.rhythm-sidebar-title{font-size:1.1rem;font-weight:700;color:var(--text-primary);margin:0 0 16px;text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid var(--primary-color);padding-bottom:8px}.palette-section{margin-bottom:24px}.palette-section-title{font-size:.9rem;font-weight:600;color:var(--text-secondary);margin:0 0 12px}.rhythm-canvas{flex:1;display:flex;flex-direction:column;overflow:hidden;background-color:var(--bg-primary)}.rhythm-toolbar{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid var(--border-color);background-color:var(--bg-secondary)}.rhythm-info{font-size:.9rem;color:var(--text-secondary)}#panel-editor{padding:0 14px 18px!important;gap:12px;scrollbar-width:thin}#panel-editor>div:first-child{margin-bottom:10px!important;padding:12px;border:1px solid rgba(148,197,220,.14);border-radius:12px;background:linear-gradient(135deg,#14b8a617,#f59e0b0b),#ffffff08}body.rhythm-mode #panel-editor>div:first-child{order:20;gap:9px!important;margin:2px 0 10px!important}body.rhythm-mode #panel-editor>div:first-child label{font-size:.72rem!important}body.rhythm-mode #panel-editor input,body.rhythm-mode #panel-editor select{min-height:32px;padding-top:4px!important;padding-bottom:4px!important}body.rhythm-mode .layout-quick-bar{margin-bottom:10px;padding:9px 14px}body.rhythm-mode .topbar-layout-quick-bar{margin:0;padding:3px 4px 3px 8px}body.rhythm-mode .layout-quick-copy small{display:none}body.rhythm-mode #btn-rb-undo{order:21}body.rhythm-mode #btn-rb-clear-all{order:22;margin-bottom:12px}body.rhythm-mode #btn-rb-undo,body.rhythm-mode #btn-rb-clear-all{min-height:38px;border-radius:10px!important}#panel-editor input,#panel-editor select{min-height:36px;border-color:#94c5dc2e!important;border-radius:9px!important;background:#07111f94!important}#panel-editor .palette-section-title{margin:2px 0 0;color:var(--text-primary);font-family:Outfit,sans-serif;font-size:1rem;font-weight:800;letter-spacing:0}.rhythm-actions{display:flex;gap:12px}.rhythm-canvas{flex:1;display:flex;flex-direction:column;overflow:hidden;background-color:var(--bg-tertiary)}.rhythm-canvas-body{flex:1;overflow-y:auto;padding:24px}.rhythm-figures-palette{display:flex;flex-direction:column;gap:12px}.rb-figure-btn{background-color:var(--bg-primary);border:2px solid var(--border-color);border-radius:12px;padding:12px 16px;cursor:grab;display:flex;flex-direction:column;align-items:center;gap:8px;transition:all .2s ease;min-width:100px}.rb-figure-btn:active{cursor:grabbing}.rb-figure-btn:hover{border-color:var(--primary-color);transform:translateY(-2px);box-shadow:0 4px 12px #0003}.rb-figure-btn.dragging{opacity:.5;transform:scale(.95)}.rb-figure-btn img{height:32px;opacity:.9;pointer-events:none}.rb-figure-btn span{color:var(--text-primary);font-size:.85rem;font-weight:500;pointer-events:none}.rhythm-measures-container{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;padding:24px;overflow-y:auto;flex:1}.rb-measure{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:320px;flex:1}.rb-measure-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color);padding-bottom:8px}.rb-measure-title{color:var(--text-secondary);font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.rb-measure-controls{display:flex;gap:8px}.rb-btn-icon{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:4px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .2s}.rb-btn-icon:hover{background-color:var(--bg-tertiary);color:var(--text-primary)}.rb-btn-icon.delete:hover{background-color:#ef44441a;color:var(--danger-color, #ef4444)}.rb-beats{display:flex;gap:8px;height:80px}.rb-beat{flex:1;background-color:var(--bg-primary);border:2px dashed var(--border-color);border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;position:relative;overflow:hidden}.rb-beat.droppable{cursor:pointer}.rb-beat.droppable:hover{border-color:var(--primary-color);background-color:#3b82f60d}.rb-beat.drag-over{border-color:var(--primary-color);background-color:#3b82f633;border-style:solid;transform:scale(1.02)}.rb-beat.drag-error{border-color:var(--danger-color, #ef4444);background-color:#ef44441a}.rb-beat.filled{border-style:solid;background-color:var(--bg-tertiary);cursor:default}.rb-beat img{height:48px;pointer-events:none}.rb-beat-delete{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:10px;background-color:#ef4444e6;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;border:none;cursor:pointer;opacity:0;transition:opacity .2s}.rb-beat:hover .rb-beat-delete{opacity:1}.palette-group{margin-bottom:10px;background:linear-gradient(180deg,#ffffff0a,#ffffff04),#07111f80;border:1px solid rgba(148,197,220,.14);border-radius:12px;padding:10px;box-shadow:inset 0 1px #ffffff09}.palette-group-title{font-size:.66rem;text-transform:uppercase;letter-spacing:.85px;color:var(--accent-light);margin-bottom:9px;text-align:left;font-weight:900}.rhythm-figures-grid{display:grid;gap:8px}.rhythm-figures-grid.grid-2{grid-template-columns:1fr 1fr}.rhythm-figures-grid.grid-3{grid-template-columns:1fr 1fr 1fr}.rhythm-figures-grid.grid-4{grid-template-columns:1fr 1fr 1fr 1fr}#panel-editor .rb-figure-btn{min-width:0;min-height:58px;padding:8px 6px;gap:6px;border:1px solid rgba(148,197,220,.16);border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.045),transparent),#07111fad;color:var(--text-primary);box-shadow:none}#panel-editor .rb-figure-btn:after{content:attr(data-label);max-width:100%;color:var(--text-secondary);font-size:.64rem;font-weight:850;line-height:1.1;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}#panel-editor .rb-figure-btn:hover{border-color:#14b8a67a;background:linear-gradient(180deg,#14b8a629,#14b8a60e),#07111fbd;transform:translateY(-1px);box-shadow:0 10px 22px #02081242}#panel-editor .rb-figure-btn.priority{border-color:#14b8a657;background:linear-gradient(135deg,#14b8a633,#f59e0b17),#07111fb8}#panel-editor .rb-figure-btn img{height:28px}#panel-editor .rhythm-basic-grid .rb-figure-btn{min-height:74px}#panel-editor .rhythm-basic-grid .rb-figure-btn img{height:34px}#panel-editor .rhythm-basic-grid .rb-figure-btn:after{color:var(--text-primary);font-size:.72rem}.rb-modifier-btn{min-width:0;min-height:50px;background:#07111fad;border:1px solid rgba(148,197,220,.16);border-radius:10px;padding:7px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:all .2s ease;color:var(--text-secondary)}.rb-modifier-btn:hover{background:var(--bg-glass-hover);border-color:var(--text-primary);color:var(--text-primary)}.rb-modifier-btn.active{background:var(--accent);color:#03131f;border-color:var(--accent-glow);box-shadow:0 0 10px var(--accent-glow)}.rb-modifier-btn.active svg path,.rb-modifier-btn.active svg circle,.rb-modifier-btn.active svg ellipse,.rb-modifier-btn.active svg rect{fill:#03131f;stroke:#03131f}.rb-figure-btn svg{height:24px;width:auto;max-width:100%}.rb-modifier-btn svg{height:24px;width:auto}