:root{--bg-base:#ffffff;--bg-surface:#f8f9fa;--text-primary:#212529;--interactive-primary:#228be6;--interactive-hover:#1c7ed6;--border-default:#dee2e6;--radius-sm:8px;--footer-height:80px}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Helvetica,Arial,sans-serif;color:var(--text-primary)}[hidden]{display:none!important}.music-player-app{display:flex;flex-direction:column;height:100%;position:relative;overflow:hidden;border:1px solid var(--border-default);background:var(--bg-base)}.score-area{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}.score-viewport{flex:1;overflow:auto;background:var(--bg-base);padding:20px;scroll-behavior:smooth;min-height:0}.score-meta-header{flex-shrink:0;padding:14px 20px 10px;background:var(--bg-base);border-bottom:1px solid var(--border-default);text-align:center}.score-title{margin:0;font-size:clamp(16px,2.5vw,22px);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.score-subtitle{margin:4px 0 0;font-size:clamp(12px,1.8vw,15px);color:#495057;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.score-composer{margin:4px 0 0;font-size:clamp(11px,1.6vw,13px);color:#868e96;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.score-meta-footer{flex-shrink:0;padding:6px 20px;background:var(--bg-base);border-top:1px solid var(--border-default);text-align:center;font-size:10px;color:#adb5bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:480px){.score-meta-header{padding:8px 12px 6px}.score-subtitle,.score-composer{display:none}.score-meta-footer{padding:4px 12px}}.player-footer{height:var(--footer-height);display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:var(--bg-surface);border-top:1px solid var(--border-default);gap:20px}.player__left{display:flex;align-items:center;gap:12px;min-width:200px}.ctrl-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--border-default);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.ctrl-btn:hover:not(:disabled){background:#f1f3f5;border-color:#adb5bd}.ctrl-btn:disabled{opacity:.5;cursor:not-allowed}.ctrl-btn--primary{background:var(--interactive-primary);color:#fff;border:none}.ctrl-btn--primary:hover:not(:disabled){background:var(--interactive-hover)}.ctrl-btn--active{background:var(--interactive-primary);color:#fff;border-color:var(--interactive-primary)}.layout-toggle{display:flex;background:#e9ecef;padding:4px;border-radius:var(--radius-sm);margin-left:8px}.layout-btn{border:none;background:0 0;padding:6px 12px;border-radius:4px;cursor:pointer;font-weight:700;font-size:12px;color:#495057}.layout-btn--active{background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1);color:var(--interactive-primary)}.player__progress{flex:1;display:flex;align-items:center;gap:12px;max-width:600px}.progress-bar{flex:1;height:6px;position:relative}.progress-bar__track{height:100%;background:var(--border-default);border-radius:3px;overflow:hidden}.progress-bar__fill{height:100%;width:0%;background:var(--interactive-primary);transition:width .1s linear}.time-label{font-size:13px;font-variant-numeric:tabular-nums;color:#868e96;min-width:35px}.player__right{display:flex;align-items:center;gap:12px;min-width:220px;justify-content:flex-end}.player__label{font-size:12px;font-weight:600;text-transform:uppercase;color:#adb5bd}.tempo-input{padding:4px 8px;border:1px solid var(--border-default);border-radius:4px;text-align:center}.zoom-slider{width:80px;cursor:pointer}@media(max-width:700px){.player-footer{padding:0 12px;gap:10px}.player__left,.player__right{min-width:0;gap:8px}.player__progress{max-width:none}.player__label{display:none}.zoom-slider{width:60px}}@media(max-width:480px){.player-footer{height:auto;flex-wrap:wrap;padding:10px 12px;row-gap:10px}.player__progress{order:3;flex-basis:100%;max-width:none}}.loading-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(255,255,255,.9);z-index:50}.spinner{width:40px;height:40px;border:4px solid var(--border-default);border-top-color:var(--interactive-primary);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:12px}@keyframes spin{to{transform:rotate(360deg)}}.count-in-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.85);z-index:55;pointer-events:none}.count-in-number{font-size:clamp(48px,14vw,96px);font-weight:700;color:var(--interactive-primary);font-variant-numeric:tabular-nums}.count-in-number--pulse{animation:count-in-pulse .3s ease-out}@keyframes count-in-pulse{from{transform:scale(1.5);opacity:.3}to{transform:scale(1);opacity:1}}.error-banner{background:#fff5f5;color:#fa5252;padding:12px;text-align:center;border-bottom:1px solid #ffc9c9}#osmdContainer img[id^=cursorImg]{z-index:100!important;pointer-events:none}.osmd-container img[id^=cursorImg]{max-width:none}.ctrl-btn svg{width:20px;height:20px}.stop-btn svg,.count-in-toggle svg{width:18px;height:18px}