:root{--bg-base:#0b0e13;--bg-surface:#141922;--bg-surface-hover:#1a2130;--bg-card:#171d28;--border:#252d3d;--accent:#ff7a00;--accent-hover:#ff9124;--accent-pressed:#e36b00;--accent-bg:#ff7a001a;--accent-border:#ff7a0066;--accent-soft-bg:#2d1c10;--accent-secondary:#27c7ff;--accent-secondary-bg:#11232c;--color-success:#2ccf7a;--color-warning:#ffb547;--color-error:#ff6262;--color-info:#7ab8ff;--text-primary:#f5f7fa;--text-secondary:#a8b2c5;--text-muted:#738099;--text-disabled:#525b6a;--text:var(--text-secondary);--text-h:var(--text-primary);--bg:var(--bg-surface);--code-bg:var(--bg-card);--social-bg:var(--bg-surface-hover);--shadow-sm:0 1px 2px #0000004d;--shadow:0 4px 12px #0006, 0 1px 3px #0000004d;--shadow-lg:0 10px 25px #00000080, 0 4px 10px #0000004d;--sans:"Inter", system-ui, -apple-system, sans-serif;--heading:"Space Grotesk", system-ui, sans-serif;--mono:"JetBrains Mono", ui-monospace, Consolas, monospace;--motion-micro:.12s;--motion-normal:.22s;--motion-page:.3s;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;font:16px/1.5 var(--sans);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text-secondary);background:var(--bg-base);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (width<=1024px){:root{font-size:15px}}#root{box-sizing:border-box;flex-direction:column;width:100%;max-width:100%;min-height:100svh;margin:0 auto;display:flex}body{background:var(--bg-base);margin:0}h1,h2{font-family:var(--heading);color:var(--text-primary);font-weight:600}h1{letter-spacing:-.5px;margin:16px 0;font-size:32px}@media (width<=1024px){h1{margin:12px 0;font-size:26px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:1.2}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-primary);border-radius:4px;display:inline-flex}code{background:var(--bg-card);padding:4px 8px;font-size:14px;line-height:1.4}.landing{color:#e8ecf4;background:radial-gradient(circle at 100% 0,#ff6b3514,#0000 40%),linear-gradient(#09111f 0%,#0d1425 100%);min-height:100vh;overflow-x:hidden}.landing__navbar{z-index:100;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#0a0a14b3;border-bottom:1px solid #ffffff0f;height:72px;position:fixed;top:0;left:0;right:0}.landing__navbar-inner{justify-content:space-between;align-items:center;max-width:1280px;height:100%;margin:0 auto;padding:0 2rem;display:flex}.landing__logo-img{height:36px}.landing__nav-links{gap:2rem;margin:0;padding:0;list-style:none;display:flex}.landing__nav-links a{color:#aab0c5;font-size:.9rem;font-weight:500;text-decoration:none;transition:color .2s}.landing__nav-links a:hover{color:#fff}.landing__nav-auth{align-items:center;gap:1rem;display:flex}.landing__nav-login{color:#aab0c5;border:1px solid #ffffff26;border-radius:8px;padding:6px 14px;font-size:.9rem;font-weight:500;text-decoration:none;transition:color .2s,border-color .2s}.landing__nav-login:hover{color:#fff;border-color:#ffffff4d}.landing__nav-cta{color:#fff;background:#ff6b35;border-radius:8px;padding:8px 18px;font-size:.9rem;font-weight:600;text-decoration:none;transition:transform .15s,box-shadow .15s}.landing__nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px #ff6b354d}.landing__hero{grid-template-columns:1fr 1.3fr;align-items:center;gap:3rem;max-width:1280px;margin:0 auto;padding:100px 2rem 40px;display:grid}.landing__hero-left{flex-direction:column;gap:1rem;display:flex}.landing__badge{color:#ff6b35;letter-spacing:.06em;background:#ff6b3514;border:1px solid #ff6b3540;border-radius:999px;align-items:center;width:fit-content;height:32px;padding:0 14px;font-size:.7rem;font-weight:700;display:inline-flex}.landing__title{color:#fff;margin:0;font-size:clamp(2.4rem,4.5vw,3.8rem);font-weight:800;line-height:1.05}.landing__highlight{color:#ff6b35;font-style:italic}.landing__subtitle{color:#aab0c5;max-width:520px;margin:0;font-size:clamp(.95rem,1.3vw,1.1rem);line-height:1.7}.landing__benefits{flex-wrap:wrap;gap:8px 16px;display:flex}.landing__benefit{color:#ccc;white-space:nowrap;font-size:.8rem}.landing__cta{flex-wrap:wrap;gap:14px;margin-top:.5rem;display:flex}.landing__btn{cursor:pointer;border-radius:12px;justify-content:center;align-items:center;padding:.8rem 1.8rem;font-size:.95rem;font-weight:600;text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s;display:inline-flex}.landing__btn--primary{color:#fff;background:#ff6b35;box-shadow:0 4px 20px #ff6b3540}.landing__btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 40px #ff6b3559}.landing__btn--secondary{color:#e8ecf4;background:0 0;border:1px solid #ffffff24}.landing__btn--secondary:hover{background:#ffffff0a;border-color:#ffffff4d}.landing__btn--large{padding:1rem 2.5rem;font-size:1.05rem}.landing__social-proof{align-items:center;gap:10px;margin-top:.25rem;display:flex}.landing__avatars{display:flex}.landing__avatar{background:#1e2538;border:2px solid #0d1425;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;margin-left:-6px;font-size:13px;display:flex}.landing__avatar:first-child{margin-left:0}.landing__proof-text{color:#aab0c5;align-items:center;gap:6px;font-size:.8rem;display:flex}.landing__stars{color:#ff6b35;letter-spacing:1px}.landing__hero-right{justify-content:center;align-items:center;display:flex}.landing__screenshots{width:100%;max-width:620px;height:420px;position:relative}.landing__screenshot{border:1px solid #ffffff14;border-radius:12px;transition:transform .3s;position:absolute;overflow:hidden;box-shadow:0 20px 60px #0006}.landing__screenshot:hover{transform:translateY(-4px)}.landing__screenshot img{object-fit:cover;width:100%;height:100%;display:block}.landing__screenshot-label{color:#fff;z-index:2;letter-spacing:.02em;background:#000000b3;border-radius:4px;padding:3px 8px;font-size:.65rem;font-weight:600;position:absolute;top:8px;left:10px}.landing__screenshot--main{z-index:1;width:75%;height:70%;top:0;left:0}.landing__screenshot--editor{z-index:3;width:55%;height:45%;bottom:0;left:5%}.landing__screenshot--transcription{z-index:2;width:45%;height:55%;top:5%;right:0}.landing__features{border-top:1px solid #ffffff0a;max-width:1200px;margin:0 auto;padding:3rem 2rem}.landing__features-grid{grid-template-columns:repeat(5,1fr);gap:1.5rem;display:grid}.landing__feature{text-align:center;padding:1.25rem .75rem}.landing__feature-icon{margin-bottom:.6rem;font-size:1.8rem}.landing__feature h3{color:#fff;margin-bottom:.4rem;font-size:.9rem;font-weight:600}.landing__feature p{color:#aab0c5;font-size:.8rem;line-height:1.5}.landing__differentiator{max-width:1000px;margin:0 auto;padding:4rem 2rem}.landing__differentiator h2{text-align:center;color:#fff;margin-bottom:2.5rem;font-size:1.8rem;font-weight:700}.landing__diff-grid{grid-template-columns:repeat(3,1fr);gap:2rem;display:grid}.landing__diff-item{background:#ffffff05;border:1px solid #ffffff0f;border-radius:12px;padding:1.5rem}.landing__diff-item h3{color:#fff;margin-bottom:.6rem;font-size:1rem;font-weight:600}.landing__diff-item p{color:#aab0c5;font-size:.9rem;line-height:1.6}.landing__roadmap{border-top:1px solid #ffffff0a;max-width:1000px;margin:0 auto;padding:4rem 2rem}.landing__roadmap h2{text-align:center;color:#fff;margin-bottom:2rem;font-size:1.8rem;font-weight:700}.landing__roadmap-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem;display:grid}.landing__roadmap-card{background:#ffffff05;border:1px dashed #ffffff1a;border-radius:12px;padding:1.5rem}.landing__roadmap-card h3{color:#fff;margin-bottom:.5rem;font-size:.95rem;font-weight:600}.landing__roadmap-card p{color:#aab0c5;font-size:.85rem;line-height:1.5}.landing__bottom-cta{text-align:center;border-top:1px solid #ffffff0a;padding:5rem 2rem}.landing__bottom-cta h2{color:#fff;margin-bottom:1rem;font-size:2rem;font-weight:700}.landing__bottom-cta p{color:#aab0c5;margin-bottom:2rem;font-size:1.1rem}@media (width<=1024px){.landing__hero{grid-template-columns:1fr;gap:3rem;min-height:auto;padding-top:120px}.landing__hero-left{text-align:center;align-items:center}.landing__subtitle{text-align:center}.landing__benefits,.landing__cta,.landing__social-proof{justify-content:center}.landing__screenshots{max-width:500px;height:380px;margin:0 auto}.landing__features-grid{grid-template-columns:repeat(3,1fr)}.landing__diff-grid,.landing__roadmap-grid{grid-template-columns:1fr}}@media (width<=768px){.landing__navbar-inner{padding:0 1rem}.landing__nav-links,.landing__nav-login{display:none}.landing__hero{padding:100px 1.25rem 3rem}.landing__title{font-size:2.2rem}.landing__cta{flex-direction:column;width:100%}.landing__btn{justify-content:center;width:100%}.landing__screenshots{max-width:100%;height:300px}.landing__screenshot--main{width:80%;height:65%}.landing__screenshot--editor{width:50%;height:40%}.landing__screenshot--transcription{width:40%;height:45%}.landing__features-grid{grid-template-columns:repeat(2,1fr)}.landing__social-proof{flex-direction:column;gap:6px}.landing__benefits{font-size:.75rem}}@media (width<=480px){.landing__hero{padding:90px 1rem 2rem}.landing__title{font-size:1.9rem}.landing__screenshots{height:240px}.landing__features-grid{grid-template-columns:1fr}}.top-toolbar{background:#1e1e2e;border-bottom:1px solid #333;justify-content:space-between;align-items:center;gap:8px;min-height:44px;padding:6px 12px;display:flex}.top-toolbar__section{align-items:center;gap:6px;display:flex}.top-toolbar__section--left{flex:1;justify-content:flex-start}.top-toolbar__section--center{flex:none}.top-toolbar__section--right{flex:1;justify-content:flex-end}.top-toolbar__btn{color:#e0e0e0;cursor:pointer;background:#2a2a3e;border:1px solid #444;border-radius:4px;justify-content:center;align-items:center;min-width:32px;height:32px;padding:4px 8px;font-size:14px;transition:background .15s,border-color .15s;display:inline-flex}.top-toolbar__btn:hover:not(:disabled){background:#3a3a5e;border-color:#666}.top-toolbar__btn:disabled{opacity:.4;cursor:not-allowed}.top-toolbar__btn--small{min-width:24px;height:24px;padding:2px 4px;font-size:16px}.top-toolbar__btn--nav{min-width:28px;height:28px;font-size:12px}.top-toolbar__btn--toggle{border-color:#444}.top-toolbar__btn--toggle.top-toolbar__btn--active{background:#4a4a7e;border-color:#7a7aff}.top-toolbar__btn--save{color:#fff;background:#2e7d32;border-color:#4caf50;padding:4px 12px;font-weight:500}.top-toolbar__btn--save:hover:not(:disabled){background:#388e3c;border-color:#66bb6a}.top-toolbar__tempo{align-items:center;gap:4px;display:flex}.top-toolbar__tempo-value{color:#ccc;text-align:center;font-variant-numeric:tabular-nums;min-width:60px;font-size:13px}.top-toolbar__time-sig{color:#aaa;background:#2a2a3e;border:1px solid #444;border-radius:3px;padding:2px 6px;font-size:13px}.top-toolbar__measure-nav{align-items:center;gap:8px;display:flex}.top-toolbar__measure-label{color:#e0e0e0;text-align:center;font-variant-numeric:tabular-nums;min-width:60px;font-size:14px;font-weight:500}.top-toolbar__separator{background:#444;width:1px;height:20px;margin:0 4px}.top-toolbar__dirty-indicator{color:#ffb74d;white-space:nowrap;background:#ffb74d1a;border-radius:3px;padding:2px 8px;font-size:12px}.top-toolbar__btn--exit{color:#e57373;border-color:#e57373;font-size:16px}.top-toolbar__btn--exit:hover:not(:disabled){color:#ef5350;background:#e5737326;border-color:#ef5350}.top-toolbar__btn--danger{color:#e57373;border-color:#555}.top-toolbar__btn--danger:hover:not(:disabled){background:#e5737326;border-color:#e57373}@media (width<=1024px) and (orientation:landscape){.top-toolbar{gap:4px;padding:2px 8px}.top-toolbar__btn{min-width:28px;height:26px;padding:2px 6px;font-size:12px}.top-toolbar__btn--small{min-width:22px;height:22px}.top-toolbar__measure-label{font-size:12px}.top-toolbar__separator{height:16px;margin:0 2px}.top-toolbar__section{gap:3px}}.left-sidebar{background-color:#1e1e2e;border-right:1px solid #333;flex-direction:column;width:200px;height:100%;padding:8px 0;display:flex;overflow-y:auto}.left-sidebar__section{border-bottom:1px solid #2a2a3a;padding:8px 12px}.left-sidebar__section:last-of-type{border-bottom:none}.left-sidebar__section-title{color:#888;text-transform:uppercase;letter-spacing:.5px;margin:0 0 8px;padding:0;font-size:11px;font-weight:600}.left-sidebar__options{flex-direction:column;gap:2px;display:flex}.left-sidebar__option{color:#ccc;cursor:pointer;text-align:left;background:0 0;border:none;border-radius:4px;align-items:center;gap:8px;width:100%;padding:6px 8px;font-size:13px;transition:background-color .15s;display:flex}.left-sidebar__option:hover{background-color:#2a2a3a}.left-sidebar__option--active{color:#fff;background-color:#3a3a5a}.left-sidebar__option-icon{text-align:center;flex-shrink:0;width:24px;font-size:16px}.left-sidebar__option-label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.left-sidebar__footer{border-top:1px solid #2a2a3a;margin-top:auto;padding:12px}.left-sidebar__toggle{cursor:pointer;color:#ccc;align-items:center;gap:8px;font-size:13px;display:flex}.left-sidebar__toggle input[type=checkbox]{cursor:pointer;width:16px;height:16px}.left-sidebar__toggle-label{-webkit-user-select:none;user-select:none}@media (width<=1024px) and (orientation:landscape){.left-sidebar{border-bottom:none;border-right:1px solid #333;flex-direction:column;align-items:center;gap:2px;width:40px;height:100%;padding:4px 0;overflow:hidden auto}.left-sidebar__section{border-bottom:none;flex-direction:column;flex-shrink:0;align-items:center;gap:2px;padding:0;display:flex}.left-sidebar__section-title{display:none}.left-sidebar__options{flex-flow:column;gap:1px}.left-sidebar__option{border-radius:4px;justify-content:center;gap:0;width:32px;height:28px;padding:4px}.left-sidebar__option--active{background-color:#5a5a8a;box-shadow:0 0 0 2px #88f}.left-sidebar__option-icon{width:auto;font-size:16px}.left-sidebar__option-label,.left-sidebar__footer{display:none}.left-sidebar__view-toggle{border-top:1px solid #2a2a3a;border-left:none;flex-direction:column;gap:2px;margin-top:4px;padding:4px 0;display:flex}.left-sidebar__view-btn{width:28px;height:24px}}@media (width<=768px) and (orientation:portrait){.left-sidebar{display:none}}.left-sidebar__view-toggle{display:none}@media (width<=1024px){.left-sidebar__view-toggle{border-left:1px solid #2a2a3a;flex-shrink:0;align-items:center;gap:2px;padding:0 8px;display:flex}.left-sidebar__view-btn{color:#888;cursor:pointer;background:#2a2a3a;border:1px solid #444;border-radius:4px;justify-content:center;align-items:center;width:28px;height:24px;font-size:.85rem;transition:color .15s,background .15s;display:flex}.left-sidebar__view-btn--active{color:#fff;background:#5a5a8a;border-color:#88f}}.grid-area{background:#1a1a2e;border-radius:4px;flex-direction:column;flex:1;display:flex;overflow:hidden}.grid-area__header{background:var(--bg-primary,#fff);border-bottom:1px solid var(--border,#e5e7eb);flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;display:flex}.grid-area__header-left{align-items:center;gap:10px;display:flex}.grid-area__header-right{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.grid-area__measure-label{color:var(--text-primary,#1f2937);align-items:center;gap:4px;font-size:.95rem;font-weight:600;display:flex}.grid-area__edit-icon{font-size:.85rem}.grid-area__time-signature-badge{background:var(--accent-light,#e0e7ff);color:var(--accent,#4f46e5);letter-spacing:.02em;border-radius:4px;justify-content:center;align-items:center;padding:2px 8px;font-size:.8rem;font-weight:600;display:inline-flex}.grid-area__subdivisions-label{color:var(--text-secondary,#6b7280);align-items:center;gap:4px;font-size:.8rem;display:flex}.grid-area__subdivisions-select{border:1px solid var(--border,#e5e7eb);background:var(--bg-primary,#fff);color:var(--text-primary,#1f2937);cursor:pointer;border-radius:4px;padding:3px 6px;font-size:.8rem}.grid-area__subdivisions-select:focus{outline:2px solid var(--accent,#4f46e5);outline-offset:1px}.grid-area__loop-btn,.grid-area__play-btn{border:1px solid var(--border,#e5e7eb);background:var(--bg-primary,#fff);color:var(--text-primary,#1f2937);cursor:pointer;border-radius:4px;align-items:center;gap:4px;padding:4px 10px;font-size:.8rem;transition:background .15s,border-color .15s;display:inline-flex}.grid-area__loop-btn:hover,.grid-area__play-btn:hover{background:var(--bg-hover,#f3f4f6);border-color:var(--accent,#4f46e5)}.grid-area__loop-btn:focus-visible,.grid-area__play-btn:focus-visible{outline:2px solid var(--accent,#4f46e5);outline-offset:1px}.grid-area__body{flex-direction:column;flex:1;gap:12px;padding:12px;display:flex;overflow:auto}.grid-area__grid-container{min-width:0;overflow:auto}.grid-area__preview-container{width:100%;max-width:100%}.grid-area__footer{background:var(--bg-primary,#fff);border-top:1px solid var(--border,#e5e7eb);flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:6px 12px;display:flex}.grid-area__footer-left{align-items:center;display:flex}.grid-area__footer-right{align-items:center;gap:12px;display:flex}.grid-area__articulation-legend{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.grid-area__legend-item{color:var(--text-secondary,#6b7280);align-items:center;gap:3px;font-size:.75rem;display:inline-flex}.grid-area__legend-symbol{font-size:.85rem;line-height:1}.grid-area__legend-symbol--normal{color:#374151}.grid-area__legend-symbol--rimshot{color:#d97706}.grid-area__legend-symbol--open{color:#059669}.grid-area__legend-symbol--closed{color:#dc2626}.grid-area__legend-symbol--bell{color:#7c3aed}.grid-area__legend-label{color:var(--text-secondary,#6b7280)}.grid-area__view-toggle{border:1px solid var(--border,#e5e7eb);border-radius:4px;display:inline-flex;overflow:hidden}.grid-area__view-btn{background:var(--bg-primary,#fff);color:var(--text-secondary,#6b7280);cursor:pointer;border:none;padding:3px 10px;font-size:.75rem;transition:background .15s,color .15s}.grid-area__view-btn:not(:last-child){border-right:1px solid var(--border,#e5e7eb)}.grid-area__view-btn--active{background:var(--accent,#4f46e5);color:#fff}.grid-area__view-btn:hover:not(.grid-area__view-btn--active){background:var(--bg-hover,#f3f4f6)}.grid-area__view-btn:focus-visible{outline:2px solid var(--accent,#4f46e5);outline-offset:-2px}.grid-area__zoom-controls{align-items:center;gap:4px;display:inline-flex}.grid-area__zoom-btn{border:1px solid var(--border,#e5e7eb);background:var(--bg-primary,#fff);width:24px;height:24px;color:var(--text-primary,#1f2937);cursor:pointer;border-radius:4px;justify-content:center;align-items:center;font-size:.85rem;transition:background .15s;display:inline-flex}.grid-area__zoom-btn:hover{background:var(--bg-hover,#f3f4f6)}.grid-area__zoom-btn:focus-visible{outline:2px solid var(--accent,#4f46e5);outline-offset:1px}.grid-area__zoom-btn--reset{font-size:.9rem}.grid-area__zoom-level{color:var(--text-secondary,#6b7280);text-align:center;min-width:36px;font-size:.75rem}.grid-area__zoom-label{margin-right:2px;font-size:.75rem}.grid-area__articulation-selector{align-items:center;gap:4px;display:inline-flex}.grid-area__articulation-btn{border:1px solid var(--border,#e5e7eb);background:var(--bg-primary,#fff);color:var(--text-secondary,#6b7280);cursor:pointer;border-radius:4px;align-items:center;gap:4px;padding:4px 8px;font-size:.8rem;transition:background .15s,border-color .15s,color .15s;display:inline-flex}.grid-area__articulation-btn:hover{background:var(--bg-hover,#f3f4f6);border-color:var(--accent-border,#a5b4fc)}.grid-area__articulation-btn--active{background:var(--accent-soft-bg,#eef2ff);border-color:var(--accent,#4f46e5);color:var(--accent,#4f46e5);font-weight:600}.grid-area__articulation-symbol{font-size:1rem;line-height:1}.grid-area__articulation-symbol--normal{color:#374151}.grid-area__articulation-symbol--rimshot{color:#d97706}.grid-area__articulation-symbol--open{color:#059669}.grid-area__articulation-symbol--closed{color:#dc2626}.grid-area__articulation-symbol--bell{color:#7c3aed}.grid-area__articulation-label{font-size:.75rem}.grid-area__mobile-toggle{background:#1a1a2e;border-bottom:1px solid #333;justify-content:center;gap:2px;padding:2px 4px;display:none}.grid-area__mobile-toggle-btn{color:#888;cursor:pointer;background:#2a2a3a;border:1px solid #444;border-radius:4px;justify-content:center;align-items:center;width:32px;height:24px;font-size:.9rem;transition:color .15s,background .15s;display:flex}.grid-area__mobile-toggle-btn--active{color:#fff;background:#5a5a8a;border-color:#88f}@media (width<=1024px){.color-legend{display:none}.grid-area__articulation-legend{flex-wrap:wrap;gap:6px;font-size:.7rem;display:flex}.grid-area__articulation-selector,.grid-area__footer{display:none}.grid-area__zoom-btn{width:32px;height:32px;font-size:1.1rem;font-weight:700}.grid-area__zoom-level{min-width:40px;font-size:.85rem;font-weight:600}.grid-area__body{gap:4px;padding:4px}.grid-area__header{gap:6px;padding:4px 8px}.grid-area__header-right{gap:4px}.grid-area__measure-label{font-size:.8rem}.grid-area__mobile-toggle,.grid-area__grid-container--mobile-hide,.grid-area__preview-container--mobile-hide{display:none}}.editor-layout .score-strip{background:#fff;border-top:1px solid #333;flex-direction:column;height:130px;min-height:130px;display:flex;position:relative;overflow:hidden}.editor-layout .score-strip__container{cursor:pointer;flex:1;height:100%;position:relative;overflow:auto hidden}.editor-layout .score-strip__osmd{position:relative}.editor-layout .score-strip__measure-numbers{pointer-events:none;z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.editor-layout .score-strip__measure-number{color:#9ca3af;-webkit-user-select:none;user-select:none;font-size:.625rem;font-weight:600;position:absolute;top:2px;transform:translate(-50%)}.editor-layout .score-strip__highlight{pointer-events:none;z-index:2;background:#4caf5026;border-left:3px solid #4caf50e6;transition:left .15s,width .15s;position:absolute;top:0;bottom:0}.editor-layout .score-strip__fallback{color:#9ca3af;justify-content:center;align-items:center;height:100%;font-size:.875rem;display:flex}.editor-layout .score-strip__loading{color:#9ca3af;z-index:3;background:#1a1a2ecc;justify-content:center;align-items:center;font-size:.8rem;display:flex;position:absolute;inset:0}.editor-layout .minimap{border-top:1px solid var(--border,#e5e7eb);-webkit-user-select:none;user-select:none;background:#f3f4f6;width:100%;padding:4px 8px}.editor-layout .minimap__track{cursor:pointer;touch-action:none;background:#e5e7eb;border-radius:3px;height:12px;position:relative;overflow:hidden}.editor-layout .minimap__track--dragging{cursor:grabbing}.editor-layout .minimap__ticks{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.editor-layout .minimap__tick{background:#00000014;width:1px;position:absolute;top:0;bottom:0}.editor-layout .minimap__viewport{pointer-events:none;background:#3b82f633;border:1px solid #3b82f680;border-radius:2px;transition:left .1s,width .1s;position:absolute;top:0;bottom:0}.editor-layout .minimap__active{pointer-events:none;background:#3b82f6e6;border-radius:1px;width:3px;margin-left:-1px;transition:left .15s;position:absolute;top:1px;bottom:1px}.editor-layout{z-index:100;background:#121212;grid-template:"toolbar toolbar""sidebar main"minmax(0,1fr)"strip strip"minmax(130px,auto)/200px 1fr;height:100vh;display:grid;position:fixed;inset:0;overflow:hidden}@media (width<=1024px){.editor-layout{grid-template:"toolbar toolbar toolbar""sidebar main strip"minmax(0,1fr)/40px 1fr 44px}.editor-layout__sidebar{max-height:none;overflow:hidden auto}.editor-layout__strip{background:#1e1e2e;border-left:1px solid #333;flex-direction:column;justify-content:flex-start;align-items:center;gap:4px;padding:4px 2px;display:flex;overflow-y:auto}.editor-layout__viewport-warning{display:none}}@media (width<=768px) and (orientation:portrait){.editor-layout__toolbar,.editor-layout__sidebar,.editor-layout__main,.editor-layout__strip{display:none!important}.editor-layout{justify-content:center;align-items:center;display:flex}.editor-layout:after{content:"📱↔️ Rota tu dispositivo para editar";color:#ccc;text-align:center;padding:32px;font-size:1.1rem}}.editor-layout__toolbar{grid-area:toolbar}.editor-layout__sidebar{grid-area:sidebar;overflow-y:auto}.editor-layout__main{flex-direction:column;grid-area:main;display:flex;overflow:auto}.editor-layout__strip{grid-area:strip;overflow:hidden}.editor-layout__viewport-warning{color:#92400e;text-align:center;background:#fef3c7;border-bottom:1px solid #f59e0b;grid-column:1/-1;padding:.5rem 1rem;font-size:.8125rem;line-height:1.4}.editor-layout__strip-desktop{display:contents}.editor-layout__strip-mobile-tools{display:none}@media (width<=1024px) and (orientation:landscape){.editor-layout__strip-desktop{display:none}.editor-layout__strip-mobile-tools{flex-direction:column;align-items:center;gap:4px;display:flex}.editor-layout__tool-btn{color:#aaa;cursor:pointer;background:#2a2a3a;border:1px solid #444;border-radius:4px;justify-content:center;align-items:center;width:34px;height:30px;font-size:1rem;transition:background .15s,color .15s;display:flex}.editor-layout__tool-btn--active{color:#fff;background:#5a5a8a;border-color:#88f}}.dashboard{max-width:960px;margin:0 auto;padding:2rem 1.5rem}.dashboard__header{margin-bottom:2.5rem}.dashboard__header h1{color:#fff;margin:0;font-size:2rem;font-weight:700}.dashboard__sections{flex-direction:column;gap:2rem;display:flex}.dashboard__feature{background:#ffffff08;border:1px solid #ffffff0f;border-radius:12px;flex-direction:column;gap:1rem;padding:1.5rem;display:flex}.dashboard__feature-icon{font-size:2.5rem;line-height:1}.dashboard__feature-content h2{color:#fff;margin:0 0 .5rem;font-size:1.25rem;font-weight:600}.dashboard__feature-content p{color:#aab0c5;margin:0 0 .75rem;font-size:.95rem;line-height:1.6}.dashboard__tips{color:#aab0c5;margin:0 0 1rem;padding-left:1.25rem;font-size:.875rem;line-height:1.7;list-style:outside}.dashboard__tips li{margin-bottom:.25rem}.dashboard__cta{color:#fff;background:#ff6b35;border-radius:8px;justify-content:center;align-items:center;padding:.65rem 1.4rem;font-size:.9rem;font-weight:600;text-decoration:none;transition:transform .15s,box-shadow .15s;display:inline-flex}.dashboard__cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px #ff6b354d}.dashboard__cta:focus-visible{outline-offset:3px;outline:2px solid #ff6b35}@media (width>=768px){.dashboard__feature{flex-direction:row;align-items:flex-start;gap:1.5rem}.dashboard__feature-icon{flex-shrink:0;font-size:3rem}}.filter-bar{flex-direction:column;gap:12px;margin-bottom:32px;display:flex}.filter-bar__search-input{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);width:100%;color:var(--text-primary);box-sizing:border-box;transition:border-color var(--motion-normal), box-shadow var(--motion-normal);padding:12px 16px;font-size:15px}.filter-bar__search-input::placeholder{color:var(--text-muted)}.filter-bar__search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);outline:none}.filter-bar__row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.filter-bar__select{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-primary);cursor:pointer;min-width:140px;transition:border-color var(--motion-normal), box-shadow var(--motion-normal);padding:10px 14px;font-size:14px}.filter-bar__select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);outline:none}.filter-bar__artist-wrapper{align-items:center;gap:4px;display:flex}.filter-bar__artist-filter{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-primary);width:120px;transition:border-color var(--motion-normal), box-shadow var(--motion-normal);padding:10px 14px;font-size:14px}.filter-bar__artist-filter::placeholder{color:var(--text-muted)}.filter-bar__artist-filter:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);outline:none}.filter-bar__bpm-range{align-items:center;gap:8px;display:flex}.filter-bar__bpm-input{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);width:80px;color:var(--text-primary);transition:border-color var(--motion-normal), box-shadow var(--motion-normal);padding:10px 12px;font-size:14px}.filter-bar__bpm-input::placeholder{color:var(--text-muted)}.filter-bar__bpm-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);outline:none}.filter-bar__bpm-separator{color:var(--text-muted)}.filter-bar__clear-btn{border:1px solid var(--accent-border);border-radius:var(--radius-md);background:var(--accent-bg);color:var(--accent);cursor:pointer;transition:background var(--motion-normal), color var(--motion-normal), border-color var(--motion-normal);padding:10px 18px;font-size:14px;font-weight:500}.filter-bar__clear-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}.catalog-page{text-align:left;padding:0 32px 48px}@media (width<=768px){.catalog-page{padding:0 16px 32px}}.catalog-page__header{text-align:center;margin-bottom:24px}.catalog-page__header h1{margin-bottom:8px;font-size:36px}@media (width<=768px){.catalog-page__header h1{font-size:28px}}.catalog-page__header p{color:var(--text-secondary);font-size:16px}.catalog-page__create-btn{border-radius:var(--radius-md);cursor:pointer;background:var(--accent);color:#fff;transition:background var(--motion-normal), transform var(--motion-normal);border:none;padding:10px 20px;font-size:14px;font-weight:600}.catalog-page__create-btn:hover{background:var(--accent-hover);transform:translateY(-1px)}.catalog-page__create-btn:active{background:var(--accent-pressed);transform:translateY(0)}.catalog-page__filters{flex-direction:column;gap:12px;margin-bottom:32px;display:flex}.catalog-page__search-input{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);width:100%;color:var(--text-primary);box-sizing:border-box;transition:border-color var(--motion-normal), box-shadow var(--motion-normal);padding:12px 16px;font-size:15px}.catalog-page__search-input::placeholder{color:var(--text-muted)}.catalog-page__search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);outline:none}.catalog-page__filter-row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.catalog-page__select{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-primary);cursor:pointer;min-width:160px;transition:border-color var(--motion-normal), box-shadow var(--motion-normal);padding:10px 14px;font-size:14px}.catalog-page__select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);outline:none}.catalog-page__bpm-range{align-items:center;gap:8px;display:flex}.catalog-page__bpm-input{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);width:90px;color:var(--text-primary);transition:border-color var(--motion-normal), box-shadow var(--motion-normal);padding:10px 12px;font-size:14px}.catalog-page__bpm-input::placeholder{color:var(--text-muted)}.catalog-page__bpm-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);outline:none}.catalog-page__bpm-separator{color:var(--text-muted);font-size:16px}.catalog-page__clear-btn{border:1px solid var(--accent-border);border-radius:var(--radius-md);background:var(--accent-bg);color:var(--accent);cursor:pointer;transition:background var(--motion-normal), color var(--motion-normal), border-color var(--motion-normal);padding:10px 18px;font-size:14px;font-weight:500}.catalog-page__clear-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}.catalog-page__clear-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.catalog-page__grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;display:grid}@media (width<=640px){.catalog-page__grid{grid-template-columns:1fr}}.catalog-page__no-results{text-align:center;color:var(--text-secondary);padding:48px 16px}.catalog-page__no-results p{margin-bottom:16px;font-size:16px}.score-card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-card);color:inherit;transition:box-shadow var(--motion-normal), border-color var(--motion-normal), transform var(--motion-normal);flex-direction:column;gap:8px;padding:20px;text-decoration:none;display:flex}.score-card:hover{box-shadow:var(--shadow), 0 0 20px #ff7a0014;border-color:var(--accent-border);transform:translateY(-3px)}.score-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.score-card__badges{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.score-card__genre-badge{text-transform:capitalize;background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border);border-radius:12px;padding:3px 10px;font-size:11px;font-weight:500;display:inline-block}.score-card__level-badge{text-transform:capitalize;border-radius:12px;padding:3px 10px;font-size:11px;font-weight:600;display:inline-block}.score-card__level-badge--easy{color:var(--color-success);background:#2ccf7a1a;border:1px solid #2ccf7a66}.score-card__level-badge--moderate{color:var(--color-warning);background:#ffb5471a;border:1px solid #ffb54766}.score-card__level-badge--expert{color:var(--color-error);background:#ff62621a;border:1px solid #ff626266}.score-card__title{color:var(--text-primary);margin:4px 0 0;font-size:18px;font-weight:600;line-height:1.3}.score-card__artist{color:var(--text-secondary);margin:0;font-size:14px}.score-card__meta{color:var(--text-secondary);gap:12px;margin-top:auto;padding-top:8px;font-size:13px;display:flex}.score-card__bpm{font-family:var(--mono);color:var(--text-primary);font-weight:500}.score-card__time-sig{font-family:var(--mono)}.score-card__midi-badge{background:var(--accent);color:#fff;border-radius:8px;padding:1px 6px;font-size:.7rem;font-weight:600}.score-card__rating{align-items:center;gap:6px;font-size:14px;display:flex}.score-card__stars{color:var(--color-warning);letter-spacing:1px}.score-card__rating-count{color:var(--text-muted);font-size:12px}.layout{flex-direction:column;min-height:100vh;display:flex}.layout__navbar{border-bottom:1px solid var(--border);background:var(--bg-surface);z-index:100;justify-content:space-between;align-items:center;padding:14px 32px;display:flex;position:sticky;top:0}@media (width<=768px){.layout__navbar{gap:0;padding:8px 12px}}.layout__navbar-brand{font-size:20px;font-weight:700;font-family:var(--heading)}.layout__brand-link{color:var(--accent);align-items:center;text-decoration:none;display:flex}.layout__brand-logo{width:auto;height:36px;display:block}@media (width<=768px){.layout__brand-logo{height:28px}}.layout__nav-links{gap:4px;margin:0;padding:0;list-style:none;display:flex}@media (width<=768px){.layout__nav-links{display:none}}.layout__nav-link{border-radius:var(--radius-sm);color:var(--text-secondary);transition:background var(--motion-normal), color var(--motion-normal);padding:8px 16px;font-size:14px;font-weight:500;text-decoration:none}.layout__nav-link:hover{background:var(--bg-surface-hover);color:var(--text-primary)}.layout__nav-link--active{background:var(--accent-soft-bg);color:var(--accent);font-weight:600}.layout__content{flex:1;padding:32px}@media (width<=768px){.layout__content{padding:16px}}.layout__content:has(.catalog-page){padding:0}.transcription-page{text-align:left;max-width:1400px;margin:0 auto;padding:0 32px 48px}@media (width<=768px){.transcription-page{padding:0 16px 32px}}.transcription-page__layout{grid-template-columns:380px 1fr;align-items:start;gap:32px;display:grid}@media (width<=900px){.transcription-page__layout{grid-template-columns:1fr}}.transcription-page__left{position:sticky;top:80px}.transcription-page__right{min-width:0}.transcription-page__header{text-align:center;margin-bottom:24px}.transcription-page__header h1{margin-bottom:8px;font-size:36px}@media (width<=768px){.transcription-page__header h1{font-size:28px}}.transcription-page__header p{color:var(--text-secondary);font-size:16px}.transcription-page__mode-selector{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-surface);margin-bottom:20px;display:flex;overflow:hidden}.transcription-page__mode-btn{color:var(--text-secondary);cursor:pointer;transition:background var(--motion-normal), color var(--motion-normal);background:0 0;border:none;flex:1;padding:10px 16px;font-size:14px;font-weight:500}.transcription-page__mode-btn:hover:not(.transcription-page__mode-btn--active){background:var(--bg-surface-hover);color:var(--text-primary)}.transcription-page__mode-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.transcription-page__mode-btn--active{background:var(--accent);color:#fff;font-weight:600}.transcription-page__upload{margin-bottom:32px}.transcription-page__dropzone{border:2px dashed var(--border);border-radius:var(--radius-lg);text-align:center;cursor:pointer;background:var(--bg-card);transition:border-color var(--motion-normal), background var(--motion-normal);padding:48px 24px}.transcription-page__dropzone:hover{border-color:var(--accent-border);background:var(--accent-soft-bg)}.transcription-page__dropzone:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.transcription-page__dropzone--active{border-color:var(--accent);background:var(--accent-soft-bg)}.transcription-page__dropzone--has-file{border-style:solid;border-color:var(--accent-border);cursor:default;padding:20px 24px}.transcription-page__dropzone-content{flex-direction:column;align-items:center;gap:8px;display:flex}.transcription-page__dropzone-icon{margin-bottom:8px;font-size:48px;line-height:1}.transcription-page__dropzone-text{color:var(--text-primary);font-size:16px;font-weight:500}.transcription-page__dropzone-hint{color:var(--text-muted);font-size:14px}.transcription-page__file-info{align-items:center;gap:12px;display:flex}.transcription-page__file-icon{font-size:24px;line-height:1}.transcription-page__file-name{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:15px;font-weight:500;overflow:hidden}.transcription-page__file-remove{color:var(--text-muted);cursor:pointer;transition:color var(--motion-normal), background var(--motion-normal);background:0 0;border:none;border-radius:4px;padding:4px 8px;font-size:18px}.transcription-page__file-remove:hover{color:var(--text-primary);background:var(--bg-surface-hover)}.transcription-page__file-remove:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.transcription-page__file-input{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;position:absolute;overflow:hidden}.transcription-page__error{color:var(--color-error);margin-top:8px;font-size:14px}.transcription-page__config{margin-bottom:32px}.transcription-page__config h2{margin-bottom:16px;font-size:20px}.transcription-page__form{flex-direction:column;gap:20px;display:flex}.transcription-page__field{flex-direction:column;gap:6px;display:flex}.transcription-page__label{color:var(--text-primary);font-size:14px;font-weight:500}.transcription-page__input,.transcription-page__select{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-primary);transition:border-color var(--motion-normal), box-shadow var(--motion-normal);padding:12px 14px;font-size:15px}:is(.transcription-page__input,.transcription-page__select)::placeholder{color:var(--text-muted)}:is(.transcription-page__input,.transcription-page__select):focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);outline:none}.transcription-page__field-hint{color:var(--text-muted);font-size:13px;font-family:var(--mono)}.transcription-page__style-desc{color:var(--accent);margin-top:2px;font-size:13px;font-style:italic}.transcription-page__checkboxes{flex-direction:column;gap:12px;display:flex}.transcription-page__checkbox-label{color:var(--text-primary);cursor:pointer;align-items:center;gap:10px;font-size:15px;display:flex}.transcription-page__checkbox-label input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}.transcription-page__checkbox-hint{color:var(--text-muted);margin-left:auto;font-size:13px}.transcription-page__url-section{margin-bottom:32px}.transcription-page__url-input{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);width:100%;color:var(--text-primary);box-sizing:border-box;transition:border-color var(--motion-normal), box-shadow var(--motion-normal);padding:12px 14px;font-size:15px}.transcription-page__url-input::placeholder{color:var(--text-muted)}.transcription-page__url-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);outline:none}.transcription-page__url-input[aria-invalid=true]{border-color:var(--color-error)}.transcription-page__url-input[aria-invalid=true]:focus{box-shadow:0 0 0 3px #ff626226}.transcription-page__actions{margin-bottom:24px}.transcription-page__submit-btn{border-radius:var(--radius-lg);background:var(--accent);color:#fff;cursor:pointer;width:100%;height:48px;transition:background var(--motion-normal), transform var(--motion-normal), box-shadow var(--motion-normal);border:none;padding:14px 24px;font-size:16px;font-weight:600}.transcription-page__submit-btn:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 16px #ff7a0040}.transcription-page__submit-btn:active:not(:disabled){background:var(--accent-pressed);transform:translateY(0)}.transcription-page__submit-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.transcription-page__submit-btn:disabled{opacity:.4;cursor:not-allowed}.transcription-page__status{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-secondary);padding:20px;font-size:14px}.transcription-page__status-label{margin-bottom:8px;font-weight:500}.transcription-page__status-label--completed{color:var(--color-success)}.transcription-page__status-label--error{color:var(--color-error)}.transcription-page__status-label--processing{color:var(--accent-secondary)}.transcription-page__status-label--pending{color:var(--color-warning)}.transcription-page__progress{margin-top:12px}.transcription-page__progress details summary{cursor:pointer;color:var(--text-secondary);font-size:13px}.transcription-page__progress-list{color:var(--text-muted);font-size:13px;font-family:var(--mono);margin:8px 0 0;padding-left:20px;line-height:1.8}.transcription-page__result{border:1px solid var(--accent-border);border-radius:var(--radius-md);background:var(--accent-soft-bg);margin-top:16px;padding:20px}.transcription-page__result-text{color:var(--text-primary);margin-bottom:12px;font-size:15px;font-weight:500}.transcription-page__result-actions{flex-wrap:wrap;gap:12px;display:flex}.transcription-page__pairs{margin-bottom:12px}.transcription-page__pairs-label{color:var(--text-secondary);margin-bottom:10px;font-size:14px}.transcription-page__pairs-buttons{flex-wrap:wrap;gap:10px;display:flex}.transcription-page__preview{border-radius:var(--radius-md);border:1px solid var(--border);background:#fff;min-height:200px;margin-top:16px;padding:16px}.transcription-page__preview-loading{color:var(--text-secondary);margin-top:12px;font-size:13px}.transcription-page__result-btn--active{background:var(--accent);color:#fff;border-color:var(--accent)}.transcription-page__result-btn{border-radius:var(--radius-md);cursor:pointer;transition:background var(--motion-normal), border-color var(--motion-normal), transform var(--motion-normal);border:1px solid #0000;padding:10px 20px;font-size:14px;font-weight:500}.transcription-page__result-btn--primary{background:var(--accent);color:#fff;border-color:var(--accent)}.transcription-page__result-btn--primary:hover{background:var(--accent-hover);transform:translateY(-1px)}.transcription-page__result-btn--secondary{background:var(--bg-surface);color:var(--text-secondary);border-color:var(--border)}.transcription-page__result-btn--secondary:hover{border-color:var(--accent-border);color:var(--text-primary)}.score-viewer-page{text-align:left;padding:0 32px 48px}@media (width<=768px){.score-viewer-page{padding:0 16px 32px}}.score-viewer-page h1{text-align:center;margin-bottom:24px;font-size:32px}@media (width<=768px){.score-viewer-page h1{display:none}}.score-viewer-page__dropzone{border:2px dashed var(--border);border-radius:var(--radius-lg);text-align:center;background:var(--bg-card);transition:border-color var(--motion-normal), background var(--motion-normal);padding:64px 24px}.score-viewer-page__dropzone:hover{border-color:var(--accent-border);background:var(--accent-soft-bg)}.score-viewer-page__dropzone p{color:var(--text-secondary);margin-bottom:8px;font-size:16px}.score-viewer-page__dropzone--active{border-color:var(--accent);background:var(--accent-soft-bg)}.score-viewer-page__dropzone-hint{color:var(--text-muted);font-size:14px}.score-viewer-page__file-label{border-radius:var(--radius-md);cursor:pointer;background:var(--bg-surface-hover);color:var(--text-primary);border:1px solid var(--border);transition:border-color var(--motion-normal), background var(--motion-normal);margin-top:8px;padding:10px 20px;font-size:14px;font-weight:500;display:inline-block}.score-viewer-page__file-label:hover{border-color:var(--accent-border);background:var(--accent-soft-bg)}.score-viewer-page__file-input{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;position:absolute;overflow:hidden}.score-viewer-page__error{border-radius:var(--radius-sm);color:var(--color-error);background:#ff62621a;border:1px solid #ff62624d;margin-top:12px;padding:12px 16px;font-size:14px}.score-viewer-page__metadata{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-secondary);font-size:14px;font-family:var(--mono);flex-wrap:wrap;gap:24px;margin-bottom:20px;padding:16px 20px;display:flex}@media (width<=768px){.score-viewer-page__metadata{gap:8px;margin-bottom:6px;padding:6px 10px;font-size:11px}}.score-viewer-page__metadata strong{color:var(--text-primary);font-family:var(--sans)}.score-viewer-page__edit-btn,.score-viewer-page__update-midi-btn{border-radius:var(--radius-md);cursor:pointer;transition:background var(--motion-normal), transform var(--motion-normal);background:var(--accent);color:#fff;border:none;padding:8px 16px;font-size:13px;font-weight:600}.score-viewer-page__edit-btn:hover,.score-viewer-page__update-midi-btn:hover{background:var(--accent-hover);transform:translateY(-1px)}.score-viewer-page__edit-btn:active,.score-viewer-page__update-midi-btn:active{background:var(--accent-pressed);transform:translateY(0)}.score-viewer-page__edit-btn:disabled,.score-viewer-page__update-midi-btn:disabled{opacity:.5;cursor:default;transform:none}.score-viewer-page__edit-btn:focus-visible,.score-viewer-page__update-midi-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (width<=768px){.score-viewer-page__edit-btn,.score-viewer-page__update-midi-btn{padding:6px 12px;font-size:12px}}.score-viewer-page__youtube-url-editor{align-items:center;gap:6px;width:100%;margin-top:4px;display:flex}.score-viewer-page__youtube-url-input{border:1px solid var(--border);border-radius:var(--radius-sm,4px);background:var(--bg-surface);min-width:0;max-width:320px;color:var(--text-primary);font-size:12px;font-family:var(--mono);flex:1;padding:4px 8px}.score-viewer-page__youtube-url-input::placeholder{color:var(--text-muted,#666)}.score-viewer-page__youtube-url-btn{border-radius:var(--radius-sm,4px);background:var(--accent);color:#fff;cursor:pointer;border:none;padding:6px 12px;font-size:12px;font-weight:600;transition:background .15s,transform .15s}.score-viewer-page__youtube-url-btn:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-1px)}.score-viewer-page__youtube-url-btn:disabled{opacity:.5;cursor:default;transform:none}.score-viewer-page__youtube-url-btn--clear{border:1px solid var(--border);color:var(--color-error,#e53e3e);background:0 0}.score-viewer-page__youtube-url-btn--clear:hover:not(:disabled){border-color:var(--color-error,#e53e3e);background:#e53e3e1a;transform:translateY(-1px)}@media (width<=768px){.score-viewer-page__youtube-url-input{max-width:200px;font-size:11px}}.score-viewer-page__youtube-panel{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);flex-flow:wrap;flex-basis:100%;align-items:center;gap:12px;margin-top:4px;padding:12px 16px;display:flex}.score-viewer-page__youtube-panel-left{flex-direction:column;flex:1;gap:8px;min-width:0;display:flex}.score-viewer-page__youtube-panel-right{flex-shrink:0;margin-left:auto}.score-viewer-page__youtube-player-always{flex-shrink:0}.score-viewer-page__youtube-section{border-top:1px solid var(--border);flex-direction:column;gap:8px;margin-top:4px;padding:8px 0;display:flex}.score-viewer-page__youtube-toggle{color:var(--text-primary);cursor:pointer;align-items:center;gap:8px;font-size:13px;font-weight:600;display:flex}.score-viewer-page__youtube-toggle input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}.score-viewer-page__midi-loader{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);text-align:center;margin-bottom:20px;padding:16px}.score-viewer-page__controls{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);z-index:50;flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:20px;padding:12px 16px;display:flex;position:sticky;top:60px}.score-viewer-page__controls--collapsed{gap:8px;padding:6px 16px}.score-viewer-page__controls--playing{opacity:.5;transition:opacity .3s}.score-viewer-page__collapse-btn{border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;opacity:.7;background:0 0;margin-left:auto;padding:2px 8px;font-size:.7rem;line-height:1;transition:opacity .15s}.score-viewer-page__collapse-btn:hover{opacity:1;color:var(--text-primary)}.score-viewer-page__controls .channel-mixer{flex-basis:100%;margin-top:4px}.score-viewer-page__score{border-radius:var(--radius-lg);border:1px solid var(--border);background:#fff;min-height:300px;margin-bottom:20px;padding:24px}.score-viewer-page__actions{text-align:center;padding-top:16px}.score-viewer-page__midi-badge{background:var(--accent-soft-bg,#e8f5e9);border:1px solid var(--accent,#4caf50);border-radius:var(--radius-sm,4px);color:var(--accent,#4caf50);align-items:center;gap:6px;margin-bottom:12px;padding:6px 12px;font-size:13px;font-weight:500;display:inline-flex}.score-viewer-page__midi-badge-icon{font-size:14px}@media (width<=768px){.score-viewer-page{padding:0 4px 8px}.score-viewer-page__controls{border-radius:var(--radius-sm);gap:6px;margin-bottom:4px;padding:6px 8px;top:40px}.score-viewer-page__controls--collapsed{gap:4px;padding:4px 8px}.score-viewer-page__score{border-radius:var(--radius-sm);min-height:150px;margin-bottom:4px;padding:8px 4px 4px}.score-viewer-page__metadata{gap:6px;margin-bottom:6px;padding:6px 10px;font-size:11px}.midi-player{gap:6px}.midi-player__controls button{min-width:32px;padding:4px 8px;font-size:14px}.midi-player__info{font-size:12px}.training-mode-panel{gap:4px}.training-mode-panel__row{gap:6px}.training-mode-panel__field{min-width:70px}.training-mode-panel__label{font-size:11px}.training-mode-panel__input{padding:6px 8px;font-size:13px}.training-mode-panel__hint{font-size:10px}.tempo-control{gap:4px}.tempo-control__label{font-size:11px}.channel-mixer__header{padding:4px 0;font-size:12px}.score-viewer-page__collapse-btn{padding:2px 6px;font-size:.6rem}}.toast{border-radius:var(--radius-md,8px);z-index:9999;align-items:center;gap:12px;padding:12px 20px;animation:.3s ease-out toast-slide-up;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #00000026}.toast--error{color:#991b1b;background:#fef2f2;border:1px solid #fca5a5}.toast--info{color:#1e40af;background:#eff6ff;border:1px solid #93c5fd}.toast--success{color:#166534;background:#f0fdf4;border:1px solid #86efac}.toast__message{font-size:14px}.toast__dismiss{cursor:pointer;opacity:.7;color:inherit;background:0 0;border:none;padding:0 4px;font-size:18px}.toast__dismiss:hover{opacity:1}@keyframes toast-slide-up{0%{opacity:0;transform:translate(-50%)translateY(20px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.layout__auth{align-items:center;gap:8px;display:flex}@media (width<=768px){.layout__auth{display:none}}.layout__user-menu{align-items:center;gap:12px;display:flex}.layout__username{color:var(--text-primary);font-size:14px;font-weight:500}.layout__logout-btn{border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:background var(--motion-normal), color var(--motion-normal), border-color var(--motion-normal);background:0 0;padding:6px 14px;font-size:13px}.layout__logout-btn:hover{background:var(--bg-surface-hover);color:var(--text-primary);border-color:var(--accent-border)}.layout__auth-links{align-items:center;gap:8px;display:flex}.layout__auth-link{border-radius:var(--radius-sm);color:var(--text-secondary);transition:background var(--motion-normal), color var(--motion-normal);padding:6px 14px;font-size:14px;font-weight:500;text-decoration:none}.layout__auth-link:hover{background:var(--bg-surface-hover);color:var(--text-primary)}.layout__auth-link--register{background:var(--accent);color:#fff;border-radius:var(--radius-md)}.layout__auth-link--register:hover{background:var(--accent-hover);color:#fff}.auth-page{justify-content:center;align-items:center;min-height:calc(100vh - 200px);padding:32px 16px;display:flex}.auth-page__card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:420px;padding:40px 32px}.auth-page__title{font-size:28px;font-weight:700;font-family:var(--heading);color:var(--text-primary);text-align:center;margin-bottom:8px}.auth-page__subtitle{color:var(--text-secondary);text-align:center;margin-bottom:28px;font-size:15px}.auth-page__error{border-radius:var(--radius-sm);color:var(--color-error);background:#ff62621a;border:1px solid #ff62624d;margin-bottom:20px;padding:12px 16px;font-size:14px}.auth-page__form{flex-direction:column;gap:20px;display:flex}.auth-page__field{flex-direction:column;gap:6px;display:flex}.auth-page__label{color:var(--text-primary);font-size:14px;font-weight:500}.auth-page__input{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-surface);color:var(--text-primary);transition:border-color var(--motion-normal), box-shadow var(--motion-normal);padding:12px 14px;font-size:15px}.auth-page__input::placeholder{color:var(--text-muted)}.auth-page__input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);outline:none}.auth-page__submit-btn{border-radius:var(--radius-lg);background:var(--accent);color:#fff;cursor:pointer;width:100%;height:48px;transition:background var(--motion-normal), transform var(--motion-normal), box-shadow var(--motion-normal);border:none;margin-top:8px;padding:14px 24px;font-size:16px;font-weight:600}.auth-page__submit-btn:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 16px #ff7a0040}.auth-page__submit-btn:active:not(:disabled){background:var(--accent-pressed);transform:translateY(0)}.auth-page__submit-btn:disabled{opacity:.4;cursor:not-allowed}.auth-page__footer{text-align:center;color:var(--text-secondary);margin-top:24px;font-size:14px}.auth-page__link{color:var(--accent);font-weight:500;text-decoration:none}.auth-page__link:hover{text-decoration:underline}.catalog-page__loading,.catalog-page__error{text-align:center;color:var(--text-secondary);padding:48px 16px;font-size:16px}.catalog-page__error{color:var(--color-error)}.catalog-page__offline-notice{text-align:center;border-radius:var(--radius-sm);color:var(--color-warning);background:#ffb5471a;border:1px solid #ffb5474d;margin-bottom:16px;padding:8px 16px;font-size:13px}.catalog-page__pagination{justify-content:center;align-items:center;gap:16px;padding:32px 0;display:flex}.catalog-page__page-btn{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-primary);cursor:pointer;transition:background var(--motion-normal), border-color var(--motion-normal);padding:10px 20px;font-size:14px;font-weight:500}.catalog-page__page-btn:hover:not(:disabled){background:var(--bg-surface-hover);border-color:var(--accent-border)}.catalog-page__page-btn:disabled{opacity:.4;cursor:not-allowed}.catalog-page__page-info{color:var(--text-secondary);font-size:14px}.library-page{text-align:left;padding:0 32px 48px}@media (width<=768px){.library-page{padding:0 16px 32px}}.library-page__header{text-align:center;margin-bottom:24px}.library-page__header h1{margin-bottom:8px;font-size:32px}.library-page__header p{color:var(--text-secondary);font-size:16px}.library-page__actions{justify-content:flex-end;margin-bottom:24px;display:flex}.library-page__new-btn{border-radius:var(--radius-md);background:var(--accent);color:#fff;transition:background var(--motion-normal), transform var(--motion-normal);padding:10px 20px;font-size:14px;font-weight:600;text-decoration:none}.library-page__new-btn:hover{background:var(--accent-hover);transform:translateY(-1px)}.library-page__error{border-radius:var(--radius-sm);color:var(--color-error);background:#ff62621a;border:1px solid #ff62624d;margin-bottom:20px;padding:12px 16px;font-size:14px}.library-page__loading{text-align:center;color:var(--text-secondary);padding:48px 16px;font-size:16px}.library-page__empty{text-align:center;color:var(--text-secondary);padding:64px 16px}.library-page__empty p{margin-bottom:12px;font-size:16px}.library-page__empty-btn{border-radius:var(--radius-md);background:var(--accent);color:#fff;transition:background var(--motion-normal);margin-top:16px;padding:12px 24px;font-size:14px;font-weight:600;text-decoration:none;display:inline-block}.library-page__empty-btn:hover{background:var(--accent-hover)}.library-page__grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;display:grid}@media (width<=640px){.library-page__grid{grid-template-columns:1fr}}.library-page__pagination{justify-content:center;align-items:center;gap:16px;padding:32px 0;display:flex}.library-page__page-btn{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-primary);cursor:pointer;transition:background var(--motion-normal), border-color var(--motion-normal);padding:10px 20px;font-size:14px;font-weight:500}.library-page__page-btn:hover:not(:disabled){background:var(--bg-surface-hover);border-color:var(--accent-border)}.library-page__page-btn:disabled{opacity:.4;cursor:not-allowed}.library-page__page-info{color:var(--text-secondary);font-size:14px}.project-card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-card);transition:box-shadow var(--motion-normal), border-color var(--motion-normal);flex-direction:column;gap:12px;padding:20px;display:flex}.project-card:hover{box-shadow:var(--shadow);border-color:var(--accent-border)}.project-card__header{justify-content:space-between;align-items:flex-start;display:flex}.project-card__name{color:var(--text-primary);margin:0;font-size:17px;font-weight:600}.project-card__delete-btn{color:var(--text-muted);cursor:pointer;transition:color var(--motion-normal), background var(--motion-normal);background:0 0;border:none;border-radius:4px;padding:4px 8px;font-size:16px}.project-card__delete-btn:hover{color:var(--color-error);background:#ff62621a}.project-card__delete-btn:disabled{opacity:.4;cursor:not-allowed}.project-card__meta{font-size:13px;font-family:var(--mono);color:var(--text-secondary);flex-wrap:wrap;gap:12px;display:flex}.project-card__bpm{color:var(--text-primary);font-weight:500}.project-card__footer{border-top:1px solid var(--border);justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px;display:flex}.project-card__date{color:var(--text-muted);font-size:12px}.project-card__view-btn{border-radius:var(--radius-sm);background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border);transition:background var(--motion-normal), color var(--motion-normal);padding:6px 14px;font-size:13px;font-weight:500;text-decoration:none}.project-card__view-btn:hover{background:var(--accent);color:#fff}.requests-page{text-align:left;max-width:800px;margin:0 auto;padding:0 32px 48px}@media (width<=768px){.requests-page{padding:0 16px 32px}}.requests-page__header{text-align:center;margin-bottom:24px}.requests-page__header h1{margin-bottom:8px;font-size:32px}.requests-page__header p{color:var(--text-secondary);font-size:16px}.requests-page__actions{justify-content:flex-end;margin-bottom:20px;display:flex}.requests-page__new-btn{border-radius:var(--radius-md);background:var(--accent);color:#fff;cursor:pointer;transition:background var(--motion-normal), transform var(--motion-normal);border:none;padding:10px 20px;font-size:14px;font-weight:600}.requests-page__new-btn:hover{background:var(--accent-hover);transform:translateY(-1px)}.requests-page__form{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:24px;padding:20px}.requests-page__form-error{border-radius:var(--radius-sm);color:var(--color-error);background:#ff62621a;border:1px solid #ff62624d;margin-bottom:12px;padding:10px 14px;font-size:13px}.requests-page__form-row{flex-wrap:wrap;gap:12px;display:flex}.requests-page__form-input{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-surface);min-width:150px;color:var(--text-primary);transition:border-color var(--motion-normal), box-shadow var(--motion-normal);flex:1;padding:10px 14px;font-size:14px}.requests-page__form-input::placeholder{color:var(--text-muted)}.requests-page__form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);outline:none}.requests-page__form-submit{border-radius:var(--radius-md);background:var(--accent);color:#fff;cursor:pointer;transition:background var(--motion-normal);border:none;padding:10px 20px;font-size:14px;font-weight:600}.requests-page__form-submit:hover:not(:disabled){background:var(--accent-hover)}.requests-page__form-submit:disabled{opacity:.4;cursor:not-allowed}.requests-page__error{border-radius:var(--radius-sm);color:var(--color-error);background:#ff62621a;border:1px solid #ff62624d;margin-bottom:20px;padding:12px 16px;font-size:14px}.requests-page__loading,.requests-page__empty{text-align:center;color:var(--text-secondary);padding:48px 16px;font-size:16px}.requests-page__list{flex-direction:column;gap:12px;display:flex}.requests-page__pagination{justify-content:center;align-items:center;gap:16px;padding:32px 0;display:flex}.requests-page__page-btn{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-primary);cursor:pointer;transition:background var(--motion-normal), border-color var(--motion-normal);padding:10px 20px;font-size:14px;font-weight:500}.requests-page__page-btn:hover:not(:disabled){background:var(--bg-surface-hover);border-color:var(--accent-border)}.requests-page__page-btn:disabled{opacity:.4;cursor:not-allowed}.requests-page__page-info{color:var(--text-secondary);font-size:14px}.requests-page__auth-hint{text-align:center;color:var(--text-muted);margin-top:24px;font-size:14px}.requests-page__auth-link{color:var(--accent);font-weight:500;text-decoration:none}.requests-page__auth-link:hover{text-decoration:underline}.request-card{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);transition:border-color var(--motion-normal), box-shadow var(--motion-normal);align-items:center;gap:16px;padding:16px 20px;display:flex}.request-card:hover{border-color:var(--accent-border)}.request-card__vote-btn{border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:background var(--motion-normal), border-color var(--motion-normal), color var(--motion-normal);background:0 0;flex-direction:column;align-items:center;gap:2px;min-width:48px;padding:8px 12px;display:flex}.request-card__vote-btn:hover:not(:disabled){border-color:var(--accent);background:var(--accent-bg)}.request-card__vote-btn:disabled{opacity:.5;cursor:not-allowed}.request-card__vote-btn--voted{border-color:var(--accent);background:var(--accent-bg)}.request-card__vote-btn--voted .request-card__vote-arrow,.request-card__vote-btn--voted .request-card__vote-count{color:var(--accent)}.request-card__vote-arrow{color:var(--text-muted);font-size:14px;line-height:1}.request-card__vote-count{color:var(--text-primary);font-size:14px;font-weight:600;font-family:var(--mono)}.request-card__info{flex:1}.request-card__title{color:var(--text-primary);margin:0 0 4px;font-size:16px;font-weight:600}.request-card__artist{color:var(--text-secondary);margin:0;font-size:14px}.request-card__status{text-transform:capitalize;border-radius:12px;padding:4px 10px;font-size:12px;font-weight:500}.request-card__status--pending{color:var(--color-warning);background:#ffb5471a;border:1px solid #ffb5474d}.request-card__status--in_progress{color:var(--accent-secondary);background:#27c7ff1a;border:1px solid #27c7ff4d}.request-card__status--completed{color:var(--color-success);background:#2ccf7a1a;border:1px solid #2ccf7a4d}.view-mode-selector{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);gap:4px;width:fit-content;margin-bottom:20px;padding:4px;display:flex}.view-mode-selector__btn{border-radius:var(--radius-sm);cursor:pointer;color:var(--text-secondary);transition:background var(--motion-normal), color var(--motion-normal);background:0 0;border:none;padding:8px 18px;font-size:14px;font-weight:500}.view-mode-selector__btn:hover{background:var(--bg-surface-hover);color:var(--text-primary)}.view-mode-selector__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.view-mode-selector__btn--active{background:var(--accent);color:#fff}.view-mode-selector__btn--active:hover{background:var(--accent-hover);color:#fff}.group-list{margin-top:8px}.group-list__loading,.group-list__empty{text-align:center;color:var(--text-secondary);padding:48px 16px;font-size:16px}.group-list__items{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.group-list__item{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);overflow:hidden}.group-list__header{width:100%;color:var(--text-primary);cursor:pointer;text-align:left;transition:background var(--motion-normal);background:0 0;border:none;align-items:center;gap:12px;padding:16px 20px;font-size:16px;font-weight:500;display:flex}.group-list__header:hover{background:var(--bg-surface-hover)}.group-list__header:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.group-list__header--expanded{background:var(--bg-surface-hover);border-bottom:1px solid var(--border)}.group-list__name{flex:1}.group-list__count{color:var(--text-muted);font-size:13px;font-weight:400}.group-list__chevron{color:var(--text-muted);text-align:center;width:20px;font-size:14px}.group-list__scores{padding:16px 20px}.group-list__scores-loading{color:var(--text-secondary);text-align:center;padding:16px 0;font-size:14px}.group-list__scores-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;display:grid}@media (width<=640px){.group-list__scores-grid{grid-template-columns:1fr}}.score-card__author{color:var(--text-muted);margin:0;font-size:12px}.score-card__bot-icon{font-size:12px}.version-badge{background:var(--accent-secondary-bg);color:var(--accent-secondary);border:1px solid #27c7ff4d;border-radius:10px;margin-left:auto;padding:2px 8px;font-size:11px;font-weight:600;display:inline-block}.version-list{text-align:left;padding:0 32px 48px}@media (width<=768px){.version-list{padding:0 16px 32px}}.version-list__loading,.version-list__error{text-align:center;color:var(--text-secondary);padding:48px 16px;font-size:16px}.version-list__error{color:var(--color-error)}.version-list__header{margin-bottom:24px}.version-list__back{color:var(--accent);margin-bottom:16px;font-size:14px;text-decoration:none;display:inline-block}.version-list__back:hover{text-decoration:underline}.version-list__title{color:var(--text-primary);margin:0 0 4px;font-size:32px;font-weight:700}.version-list__artist{color:var(--text-secondary);margin:0 0 8px;font-size:18px}.version-list__subtitle{color:var(--text-muted);margin:0;font-size:14px}.version-list__grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;display:grid}@media (width<=640px){.version-list__grid{grid-template-columns:1fr}}.score-viewer-page__author{align-items:center;gap:4px;display:flex}.score-viewer-page__bot-icon{font-size:16px}.metronome-toggle{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.metronome-toggle__btn{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-primary);cursor:pointer;transition:background var(--motion-normal), border-color var(--motion-normal), color var(--motion-normal);padding:8px 16px;font-size:14px;font-weight:500}.metronome-toggle__btn:hover{border-color:var(--accent-border);background:var(--accent-soft-bg)}.metronome-toggle__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.metronome-toggle__btn--active{background:var(--accent);color:#fff;border-color:var(--accent)}.metronome-toggle__btn--active:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.metronome-toggle__count-in{align-items:center;gap:8px;display:flex}.metronome-toggle__label{color:var(--text-secondary);white-space:nowrap;font-size:14px;font-weight:500}.metronome-toggle__select{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-primary);cursor:pointer;min-width:60px;transition:border-color var(--motion-normal), box-shadow var(--motion-normal);padding:8px 12px;font-size:14px}.metronome-toggle__select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);outline:none}.training-mode-panel{flex-direction:column;gap:6px;display:flex}.training-mode-panel__row{flex-wrap:wrap;align-items:flex-end;gap:10px;display:flex}.training-mode-panel__field{flex-direction:column;flex:1;gap:2px;min-width:100px;display:flex}.training-mode-panel__label{color:var(--text-primary);font-size:13px;font-weight:500}.training-mode-panel__input{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-surface);color:var(--text-primary);transition:border-color var(--motion-normal), box-shadow var(--motion-normal);padding:10px 12px;font-size:14px}.training-mode-panel__input::placeholder{color:var(--text-muted)}.training-mode-panel__input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);outline:none}.training-mode-panel__input:disabled{opacity:.5;cursor:not-allowed}.training-mode-panel__hint{color:var(--text-muted);font-size:11px;font-family:var(--mono)}.training-mode-panel__errors{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.training-mode-panel__error{color:var(--color-error);font-size:13px}.training-mode-panel__status{background:var(--accent-soft-bg);border:1px solid var(--accent-border);border-radius:var(--radius-sm);flex-direction:column;gap:8px;padding:12px 16px;display:flex}.training-mode-panel__current-tempo{color:var(--accent);font-size:14px;font-weight:600;font-family:var(--mono)}.training-mode-panel__progress-bar{background:var(--bg-surface);border-radius:4px;width:100%;height:8px;overflow:hidden}.training-mode-panel__progress-fill{background:var(--accent);height:100%;transition:width var(--motion-normal);border-radius:4px}.training-mode-panel__progress-text{color:var(--text-secondary);font-size:12px}.training-mode-panel__button{border-radius:var(--radius-md);cursor:pointer;transition:background var(--motion-normal), transform var(--motion-normal);border:none;padding:10px 20px;font-size:14px;font-weight:600}.training-mode-panel__button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.training-mode-panel__button--activate{background:var(--accent);color:#fff}.training-mode-panel__button--activate:hover{background:var(--accent-hover);transform:translateY(-1px)}.training-mode-panel__button--activate:active{background:var(--accent-pressed);transform:translateY(0)}.training-mode-panel__button--deactivate{background:var(--bg-surface-hover);color:var(--text-primary);border:1px solid var(--border)}.training-mode-panel__button--deactivate:hover{border-color:var(--color-error);color:var(--color-error)}.channel-mixer{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);width:100%;overflow:hidden}.channel-mixer__header{background:var(--bg-surface);border:none;border-bottom:1px solid var(--border);cursor:pointer;text-align:left;width:100%;color:var(--text-primary);transition:background var(--motion-normal);justify-content:space-between;align-items:center;padding:8px 12px;font-size:13px;font-weight:600;display:flex}.channel-mixer__header:hover{background:var(--bg-surface-hover)}.channel-mixer__header:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.channel-mixer__title{align-items:center;gap:4px;font-weight:600;display:flex}.channel-mixer__count{color:var(--text-muted);font-size:12px;font-weight:400}.channel-mixer__backing-indicator{font-size:12px}.channel-mixer__collapse-icon{color:var(--text-muted);font-size:10px}.channel-mixer__content{padding:8px 12px}.channel-mixer__placeholder-container{text-align:center;padding:12px 8px}.channel-mixer__placeholder{text-align:center;color:var(--text-muted);margin:0;font-size:13px;font-style:italic}.channel-mixer__backing-badge{text-align:center;color:var(--color-success,#4caf50);margin:0;font-size:13px}.channel-mixer__grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px;margin:0;padding:0;list-style:none;display:grid}.channel-mixer__channel{border-radius:var(--radius-sm);transition:background var(--motion-normal);align-items:center;gap:6px;padding:4px 6px;display:flex}.channel-mixer__channel:hover{background:var(--bg-surface-hover)}.channel-mixer__badge{background:var(--accent);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;font-size:10px;font-weight:700;display:inline-flex}.channel-mixer__label{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:12px;overflow:hidden}.channel-mixer__mute-btn,.channel-mixer__solo-btn{border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;background:var(--bg-surface);color:var(--text-secondary);transition:background var(--motion-normal), color var(--motion-normal), border-color var(--motion-normal);padding:2px 6px;font-size:11px;font-weight:600}:is(.channel-mixer__mute-btn,.channel-mixer__solo-btn):hover{background:var(--bg-surface-hover);border-color:var(--accent-border)}:is(.channel-mixer__mute-btn,.channel-mixer__solo-btn):focus-visible{outline:2px solid var(--accent);outline-offset:2px}.channel-mixer__mute-btn--active{background:var(--color-error);color:#fff;border-color:var(--color-error)}.channel-mixer__mute-btn--active:hover{background:#e04040;border-color:#e04040}.channel-mixer__solo-btn--active{background:var(--color-warning);color:#fff;border-color:var(--color-warning)}.channel-mixer__solo-btn--active:hover{background:#e6a030;border-color:#e6a030}.channel-mixer__sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.count-in-overlay{background:var(--accent-soft-bg);border:1px solid var(--accent-border);border-radius:var(--radius-md);justify-content:center;align-items:center;margin-bottom:20px;padding:16px 24px;animation:.5s ease-in-out infinite alternate count-in-pulse;display:flex}.count-in-overlay__content{align-items:center;gap:12px;display:flex}.count-in-overlay__beat{font-size:36px;font-weight:700;font-family:var(--mono);color:var(--accent);text-align:center;min-width:48px}.count-in-overlay__label{color:var(--text-secondary);font-size:14px;font-weight:500}@keyframes count-in-pulse{0%{opacity:.8;transform:scale(1)}to{opacity:1;transform:scale(1.02)}}.save-dialog__backdrop{z-index:1000;background:#0009;justify-content:center;align-items:center;padding:16px;animation:.2s ease-out save-dialog-fade-in;display:flex;position:fixed;inset:0}.save-dialog{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:480px;max-height:90vh;padding:32px;animation:.25s ease-out save-dialog-slide-up;overflow-y:auto;box-shadow:0 8px 32px #0006}@media (width<=768px){.save-dialog{padding:24px 20px}}.save-dialog__title{font-size:22px;font-weight:700;font-family:var(--heading);color:var(--text-primary);margin:0 0 24px}.save-dialog__form{flex-direction:column;gap:18px;display:flex}.save-dialog__field{flex-direction:column;gap:6px;display:flex}.save-dialog__label{color:var(--text-primary);font-size:14px;font-weight:500}.save-dialog__input{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-surface);color:var(--text-primary);transition:border-color var(--motion-normal), box-shadow var(--motion-normal);padding:12px 14px;font-size:15px}.save-dialog__input::placeholder{color:var(--text-muted)}.save-dialog__input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);outline:none}.save-dialog__input:disabled{opacity:.6;cursor:not-allowed}.save-dialog__input--error{border-color:var(--color-error)}.save-dialog__input--error:focus{border-color:var(--color-error);box-shadow:0 0 0 3px #ff626226}.save-dialog__select{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-surface);color:var(--text-primary);cursor:pointer;transition:border-color var(--motion-normal), box-shadow var(--motion-normal);padding:12px 14px;font-size:15px}.save-dialog__select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);outline:none}.save-dialog__select:disabled{opacity:.6;cursor:not-allowed}.save-dialog__checkbox-label{color:var(--text-primary);cursor:pointer;align-items:center;gap:10px;font-size:15px;display:flex}.save-dialog__checkbox-label input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}.save-dialog__field-error{color:var(--color-error);font-size:13px}.save-dialog__error{border-radius:var(--radius-sm);color:var(--color-error);background:#ff62621a;border:1px solid #ff62624d;padding:12px 16px;font-size:14px}.save-dialog__actions{gap:12px;margin-top:8px;display:flex}.save-dialog__btn{border-radius:var(--radius-md);cursor:pointer;transition:background var(--motion-normal), transform var(--motion-normal), box-shadow var(--motion-normal);border:1px solid #0000;padding:12px 24px;font-size:15px;font-weight:600}.save-dialog__btn:disabled{opacity:.4;cursor:not-allowed}.save-dialog__btn--primary{background:var(--accent);color:#fff;border-color:var(--accent);flex:1}.save-dialog__btn--primary:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 16px #ff7a0040}.save-dialog__btn--primary:active:not(:disabled){background:var(--accent-pressed);transform:translateY(0)}.save-dialog__btn--secondary{background:var(--bg-surface);color:var(--text-secondary);border-color:var(--border)}.save-dialog__btn--secondary:hover:not(:disabled){border-color:var(--accent-border);color:var(--text-primary)}.save-dialog__duplicate{flex-direction:column;gap:20px;display:flex}.save-dialog__duplicate-text{color:var(--color-warning);border-radius:var(--radius-sm);background:#ffb5471a;border:1px solid #ffb5474d;padding:16px;font-size:15px;line-height:1.5}.save-dialog__duplicate-actions{gap:12px;display:flex}@keyframes save-dialog-fade-in{0%{opacity:0}to{opacity:1}}@keyframes save-dialog-slide-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.score-editor-overlay{z-index:60;flex-direction:column;gap:8px;display:flex;position:relative}.score-editor-overlay__grid-row{align-items:flex-start;gap:12px;display:flex}.score-editor-overlay__grid-row>.drum-grid{flex:none}.score-editor-overlay__toolbar{background:var(--bg-surface);border:1px solid var(--accent-border);border-radius:var(--radius-md);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;display:flex}.score-editor-overlay__toolbar-left,.score-editor-overlay__toolbar-center,.score-editor-overlay__toolbar-right{align-items:center;gap:8px;display:flex}.score-editor-overlay__toolbar-center{flex:1;justify-content:center}.score-editor-overlay__btn{border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:background var(--motion-normal), color var(--motion-normal), border-color var(--motion-normal), opacity var(--motion-normal);padding:8px 14px;font-size:13px;font-weight:500}.score-editor-overlay__btn:disabled{opacity:.4;cursor:not-allowed}.score-editor-overlay__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.score-editor-overlay__btn--exit{color:var(--text-secondary);border-color:var(--border);background:0 0}.score-editor-overlay__btn--exit:hover:not(:disabled){background:var(--bg-surface-hover);color:var(--text-primary);border-color:var(--accent-border)}.score-editor-overlay__btn--action{color:var(--text-secondary);border-color:var(--border);background:0 0}.score-editor-overlay__btn--action:hover:not(:disabled){background:var(--bg-surface-hover);color:var(--text-primary);border-color:var(--accent-border)}.score-editor-overlay__btn--save{background:var(--accent);color:#fff;border-color:var(--accent)}.score-editor-overlay__btn--save:hover:not(:disabled){background:var(--accent-hover)}.score-editor-overlay__btn--save:disabled{opacity:.4;cursor:not-allowed}.score-editor-overlay__cursor-info{font-size:13px;font-family:var(--mono);color:var(--text-primary);align-items:center;gap:8px;display:flex}.score-editor-overlay__cursor-measure,.score-editor-overlay__cursor-position{font-weight:500}.score-editor-overlay__cursor-instrument{color:var(--accent);font-weight:600}.score-editor-overlay__cursor-separator{color:var(--text-muted)}.score-editor-overlay__error{border-radius:var(--radius-sm);color:var(--color-error);background:#ff62621a;border:1px solid #ff62624d;padding:8px 14px;font-size:13px}.score-editor-overlay__warnings{flex-wrap:wrap;gap:6px;padding:8px 16px;display:flex}.score-editor-overlay__warning{border-radius:var(--radius-sm);padding:4px 10px;font-size:12px;font-weight:500}.score-editor-overlay__warning--overflow{color:var(--color-error);background:#ff62621a;border:1px solid #ff626266}.score-editor-overlay__warning--underflow{color:var(--color-warning);background:#ffb5471a;border:1px solid #ffb54766}.score-editor-overlay__dirty-indicator{color:var(--color-warning);font-size:12px;font-weight:500;position:absolute;top:10px;right:16px}.drum-grid{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);flex-direction:column;gap:2px;padding:16px;display:flex;overflow-x:auto}.drum-grid__header{border-bottom:1px solid var(--border);align-items:center;margin-bottom:4px;padding-bottom:4px;display:flex}.drum-grid__label-spacer{flex-shrink:0;min-width:90px}.drum-grid__header-cells{grid-template-columns:repeat(var(--grid-columns), var(--grid-cell-size,28px));display:grid}.drum-grid__col-header{width:var(--grid-cell-size,28px);height:20px;color:var(--text-secondary);-webkit-user-select:none;user-select:none;box-sizing:border-box;justify-content:center;align-items:center;font-size:11px;font-weight:600;display:flex}.drum-grid__col-header--divider{border-left:2px solid var(--accent-border)}.drum-grid__row{align-items:center;display:flex}.drum-grid__row-label{min-width:90px;color:var(--text-secondary);text-align:right;-webkit-user-select:none;user-select:none;white-space:nowrap;text-overflow:ellipsis;flex-shrink:0;justify-content:flex-end;align-items:center;padding-right:8px;font-size:12px;font-weight:500;display:inline-flex;overflow:hidden}.drum-grid__row-cells{grid-template-columns:repeat(var(--grid-columns), var(--grid-cell-size,28px));display:grid}.drum-grid__cell-slot{width:var(--grid-cell-size,28px);box-sizing:border-box;justify-content:center;align-items:center;display:flex}.drum-grid__cell-slot--divider{border-left:2px solid var(--accent-border)}.grid-cell{width:var(--grid-cell-size,28px);height:var(--grid-cell-size,28px);border:1px solid var(--border);cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;transition:background var(--motion-micro), border-color var(--motion-micro), box-shadow var(--motion-micro);border-radius:4px;justify-content:center;align-items:center;display:flex;position:relative}.grid-cell--empty{background:var(--bg-surface)}.grid-cell--filled{background:var(--accent);border-color:var(--accent-hover)}.grid-cell--hovered{background:var(--bg-surface-hover);border-color:var(--accent-border)}.grid-cell--filled.grid-cell--hovered{background:var(--accent-hover)}.grid-cell--focused{outline:2px solid var(--accent-secondary);outline-offset:1px;box-shadow:0 0 0 3px #27c7ff33}.grid-cell--alt-articulation{background:var(--accent-secondary);border-color:var(--accent-secondary)}.grid-cell--alt-articulation.grid-cell--hovered{background:#4dd4ff}.grid-cell__indicator{color:#fff;pointer-events:none;z-index:1;font-size:12px;line-height:1;position:relative}.grid-cell--occupied{cursor:default;background:0 0;border-color:#ff6b3580}.grid-cell__span-overlay{pointer-events:none;z-index:0;background:#ff6b354d;border-radius:4px;position:absolute;inset:2px}.grid-cell__span-overlay--start{border-radius:4px 0 0 4px}.grid-cell__span-overlay--mid{border-radius:0}.grid-cell__span-overlay--end{border-radius:0 4px 4px 0}.grid-cell__span-overlay--single{border-radius:4px}.grid-cell__span-overlay--highlighted{background:#ff6b3580}.grid-cell--filled .grid-cell__span-overlay--highlighted{background:var(--accent-hover)}.grid-cell--span-highlighted{border-color:var(--accent-hover)}.grid-cell--filled.grid-cell--span-highlighted{background:var(--accent-hover)}.grid-cell__occupied-indicator{pointer-events:none;z-index:1;background:#ff6b3599;border-radius:2px;width:60%;height:4px;display:block}.grid-cell--color-coded{background:var(--instrument-color);border-color:var(--instrument-color)}.grid-cell--color-coded.grid-cell--hovered{background:var(--instrument-color);border-color:var(--instrument-color);filter:brightness(1.2)}.grid-cell--color-coded.grid-cell--span-highlighted{background:var(--instrument-color);filter:brightness(1.15)}.grid-cell--color-coded .grid-cell__span-overlay--highlighted{background:var(--instrument-color);opacity:.7}.drum-grid__row-label-indicator{border-radius:50%;flex-shrink:0;width:8px;height:8px;margin-right:6px;display:inline-block}.drum-grid__row-label-short{display:none}.drum-grid__row-label-full{display:inline}@media (width<=768px){.drum-grid__row-label{min-width:32px;padding-right:4px;font-size:11px;font-weight:700}.drum-grid__label-spacer{min-width:32px}.drum-grid__row-label-short{display:inline}.drum-grid__row-label-full{display:none}.drum-grid__row-label-indicator{width:6px;height:6px;margin-right:3px}}.measure-navigator{justify-content:center;align-items:center;gap:12px;padding:8px 0;display:flex}.measure-navigator__btn{border:1px solid var(--border);border-radius:var(--radius-sm);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;transition:background var(--motion-micro), color var(--motion-micro), border-color var(--motion-micro);background:0 0;justify-content:center;align-items:center;font-size:14px;display:flex}.measure-navigator__btn:hover:not(:disabled){background:var(--bg-surface-hover);border-color:var(--accent-border);color:var(--text-primary)}.measure-navigator__btn:disabled{opacity:.4;cursor:not-allowed}.measure-navigator__label{color:var(--text-primary);text-align:center;min-width:100px;font-size:14px;font-weight:500}.duration-selector{justify-content:center;align-items:center;gap:4px;margin:4px 0;padding:8px 12px;display:flex}.duration-selector__btn{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-surface);min-width:36px;height:44px;color:var(--text-secondary);cursor:pointer;transition:background var(--motion-micro), border-color var(--motion-micro), color var(--motion-micro), box-shadow var(--motion-micro);flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:4px 8px;font-size:14px;display:flex}.duration-selector__btn:hover{background:var(--bg-surface-hover);border-color:var(--accent-border);color:var(--text-primary)}.duration-selector__btn:focus-visible{outline:2px solid var(--accent-secondary);outline-offset:1px}.duration-selector__btn--active{background:var(--accent);border-color:var(--accent-hover);color:#fff;box-shadow:0 2px 8px #ff6b354d}.duration-selector__btn--active:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}.duration-selector__btn-label{font-size:16px;font-weight:500;line-height:1}.duration-selector__btn-hint{opacity:.7;font-size:10px;line-height:1;font-family:var(--mono)}.duration-selector__btn--active .duration-selector__btn-hint{opacity:.9}.tempo-control{align-items:center;gap:8px;font-size:13px;display:flex}.tempo-control__label{color:var(--text-secondary);white-space:nowrap;font-size:12px;font-weight:500}.tempo-control__slider-row{align-items:center;gap:6px;display:flex}.tempo-control__slider{cursor:pointer;width:100px;height:4px;accent-color:var(--accent)}.tempo-control__value{font-size:12px;font-family:var(--mono);color:var(--text-primary);text-align:right;white-space:nowrap;min-width:56px;font-weight:600}.tempo-control__percentage{font-size:11px;font-family:var(--mono);color:var(--text-muted);min-width:30px}.tempo-control__reset-btn{border:1px solid var(--border);background:var(--bg-surface);color:var(--text-secondary);cursor:pointer;border-radius:4px;padding:2px 8px;font-size:11px;font-weight:500;transition:background .15s,border-color .15s,color .15s}.tempo-control__reset-btn:hover:not(:disabled){background:var(--bg-surface-hover);border-color:var(--accent);color:var(--text-primary)}.tempo-control__reset-btn:disabled{opacity:.4;cursor:default}.youtube-controls{flex-flow:wrap;align-items:center;gap:16px;font-size:13px;display:flex}.youtube-controls__section{align-items:center;gap:8px;display:flex}.youtube-controls__label{color:var(--text-secondary);white-space:nowrap;font-size:12px;font-weight:500}.youtube-controls__slider-row{align-items:center;gap:6px;display:flex}.youtube-controls__slider{cursor:pointer;width:100px;height:4px;accent-color:var(--accent)}.youtube-controls__value{font-size:12px;font-family:var(--mono);color:var(--text-primary);text-align:right;min-width:40px}.youtube-controls__mute-btn{border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:background var(--motion-normal), border-color var(--motion-normal);background:0 0;padding:2px 6px;font-size:14px;line-height:1}.youtube-controls__mute-btn:hover{background:var(--bg-surface-hover);border-color:var(--accent-border)}.youtube-controls__mute-btn--active{background:#ff62621a;border-color:#ff626266}.youtube-controls__step-btn{border:1px solid var(--border);background:var(--bg-surface);width:24px;height:24px;color:var(--text-primary);cursor:pointer;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;font-size:14px;font-weight:700;transition:background .15s,border-color .15s;display:inline-flex}.youtube-controls__step-btn:hover:not(:disabled){background:var(--bg-surface-hover);border-color:var(--accent)}.youtube-controls__step-btn:disabled{opacity:.4;cursor:default}.youtube-controls__muted-indicator{color:var(--color-error);font-size:11px;font-weight:500}.youtube-controls__offset-header{align-items:center;gap:8px;margin-bottom:2px;display:flex}.youtube-controls__tap-sync-btn{border:1px solid var(--accent-border,#ff6b35);color:var(--accent,#ff6b35);cursor:pointer;background:#ff6b351a;border-radius:8px;align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:600;transition:background .15s,transform .1s;display:inline-flex}.youtube-controls__tap-sync-btn:hover:not(:disabled){background:#ff6b3533;transform:scale(1.02)}.youtube-controls__tap-sync-btn:active:not(:disabled){background:#ff6b354d;transform:scale(.96)}.youtube-controls__tap-sync-btn--listening{background:var(--accent,#ff6b35);color:#fff;border-color:var(--accent,#ff6b35);animation:.8s ease-in-out infinite tap-pulse}.youtube-controls__tap-sync-btn--listening:hover:not(:disabled){background:#e55a2b}@keyframes tap-pulse{0%,to{box-shadow:0 0 #ff6b3566}50%{box-shadow:0 0 0 6px #ff6b3500}}.youtube-controls__tap-sync-btn--disabled,.youtube-controls__tap-sync-btn:disabled{opacity:.5;cursor:default}.youtube-controls__hint{color:var(--text-muted,#888);margin-top:2px;font-size:10px}@media (width<=768px){.youtube-controls{gap:8px;font-size:11px}.youtube-controls__slider{width:70px}.youtube-controls__label{font-size:11px}.youtube-controls__value{min-width:32px;font-size:11px}.youtube-controls__tap-sync-btn{padding:7px 14px;font-size:12px}.youtube-controls__hint{font-size:9px}}.upload-dialog{background:var(--bg-main,var(--bg-card));z-index:1000;padding:32px;animation:.2s ease-out save-dialog-fade-in;position:fixed;inset:0;overflow-y:auto}@media (width<=768px){.upload-dialog{padding:16px}}.upload-dialog__inner{max-width:1200px;margin:0 auto}.upload-dialog__action-bar{z-index:10;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);justify-content:space-between;align-items:center;gap:12px;margin-bottom:24px;padding:12px 24px;display:flex;position:sticky;top:0}@media (width<=768px){.upload-dialog__action-bar{margin-bottom:16px;padding:10px 16px}}.upload-dialog__action-bar-title{color:var(--text-primary);margin:0;font-size:16px;font-weight:600}.upload-dialog__action-bar-buttons{gap:12px;display:flex}.upload-dialog__select{flex-direction:column;gap:20px;max-width:600px;margin:0 auto;display:flex}.upload-dialog__dropzone{border:2px dashed var(--border);border-radius:var(--radius-lg);text-align:center;cursor:pointer;background:var(--bg-surface);transition:border-color var(--motion-normal), background var(--motion-normal);padding:48px 24px}.upload-dialog__dropzone:hover{border-color:var(--accent-border);background:var(--accent-soft-bg)}.upload-dialog__dropzone:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.upload-dialog__dropzone--active{border-color:var(--accent);background:var(--accent-soft-bg);border-style:solid}.upload-dialog__dropzone-content{flex-direction:column;align-items:center;gap:8px;display:flex}.upload-dialog__dropzone-icon{font-size:48px;line-height:1}.upload-dialog__dropzone-text{color:var(--text-primary);font-size:16px;font-weight:500}.upload-dialog__dropzone-hint{color:var(--text-muted);font-size:14px}.upload-dialog__file-info{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-surface);flex-direction:column;align-items:center;gap:8px;padding:16px;display:flex}.upload-dialog__file-preview{object-fit:contain;border-radius:var(--radius-sm);border:1px solid var(--border);max-width:200px;max-height:200px}.upload-dialog__pdf-preview{color:var(--text-secondary);align-items:center;gap:8px;font-size:16px;display:flex}.upload-dialog__file-name{color:var(--text-primary);word-break:break-all;font-size:14px;font-weight:500}.upload-dialog__file-size{color:var(--text-muted);font-size:13px}.upload-dialog__page-warning{border:1px solid var(--color-warning);border-radius:var(--radius-md);color:var(--text-primary);background:#ffb5471a;padding:16px}.upload-dialog__page-warning p{margin:0 0 12px;font-size:14px}.upload-dialog__page-warning-actions{gap:12px;display:flex}.upload-dialog__progress{text-align:center;flex-direction:column;align-items:center;gap:16px;max-width:600px;margin:0 auto;padding:48px 24px;display:flex}.upload-dialog__progress p{color:var(--text-primary);margin:0;font-size:16px}.upload-dialog__progress-bar{background:var(--bg-surface);border:1px solid var(--border);border-radius:4px;width:100%;max-width:400px;height:8px;overflow:hidden}.upload-dialog__progress-fill{background:var(--accent);border-radius:4px;height:100%;transition:width .3s}.upload-dialog__progress-percent{color:var(--accent);font-size:14px;font-weight:600;font-family:var(--mono)}.upload-dialog__preview{flex-direction:column;gap:20px;display:flex}.upload-dialog__summary{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-surface);padding:16px}.upload-dialog__summary h3{color:var(--text-primary);margin:0 0 12px;font-size:16px;font-weight:600}.upload-dialog__summary-grid{color:var(--text-secondary);grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px;display:grid}.upload-dialog__summary-grid span:nth-child(2n){color:var(--text-primary);font-weight:500;font-family:var(--mono)}.upload-dialog__warning{border-radius:var(--radius-sm);color:var(--color-warning);background:#ffb5471a;border:1px solid #ffb54766;margin-top:12px;padding:10px 14px;font-size:13px;font-weight:500}.upload-dialog__comparison{flex-direction:column;gap:16px;display:flex}.upload-dialog__comparison-col{flex-direction:column;gap:8px;min-width:0;display:flex}.upload-dialog__comparison-col h4{color:var(--text-primary);margin:0;font-size:14px;font-weight:600}.upload-dialog__comparison-col .score-viewer{border-radius:var(--radius-sm);background:#fff;width:100%;padding:16px}.upload-dialog__original-image{object-fit:contain;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;width:100%;max-height:300px}.upload-dialog__pdf-placeholder{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-surface);color:var(--text-secondary);justify-content:center;align-items:center;padding:16px;font-size:14px;display:flex}.upload-dialog__file-bar{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-surface);color:var(--text-secondary);align-items:center;gap:12px;padding:10px 16px;font-size:14px;display:flex}.upload-dialog__file-bar-icon{font-size:18px}.upload-dialog__file-bar-name{color:var(--text-primary);font-weight:500}.upload-dialog__confirm{flex-direction:column;gap:16px;max-width:600px;margin:0 auto;display:flex}.upload-dialog__hint{color:var(--text-muted);margin-top:4px;font-size:13px}.upload-dialog__error{text-align:center;flex-direction:column;align-items:center;gap:20px;max-width:600px;margin:0 auto;padding:32px 24px;display:flex}.upload-dialog__error-message{flex-direction:column;align-items:center;gap:12px;display:flex}.upload-dialog__error-icon{font-size:32px}.upload-dialog__error-message p{color:var(--text-primary);margin:0;font-size:15px}.upload-dialog__discard-confirm{z-index:1010;background:#000000b3;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:32px;display:flex;position:fixed;inset:0}.upload-dialog__discard-confirm p{color:var(--text-primary);text-align:center;margin:0;font-size:16px}.catalog-page__actions{justify-content:center;gap:12px;margin-top:12px;display:flex}