:root{--ink:#101828;--muted:#667085;--paper:#fff;--bg:#eef2f6;--mint:#79e5c3;--mint-dark:#087f68;--coral:#ff7657;--line:#d8dee8;--shadow:0 14px 35px rgba(16,24,40,.10);--note-label-size:15px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px}[hidden]{display:none!important}.topbar{min-height:82px;padding:14px clamp(16px,3vw,38px);display:flex;align-items:center;justify-content:space-between;gap:22px;background:var(--ink);color:white}.brand{display:flex;align-items:center;gap:12px}.brand-note{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--mint);color:var(--ink);font-size:30px;font-weight:800}.brand h1{font-size:1.3rem;margin:0}.brand p{margin:2px 0 0;color:#b6c1d1;font-size:.88rem}.file-actions{display:flex;flex-wrap:wrap;gap:10px}.file-button,.ghost,.rectangular{min-height:42px;border-radius:10px;padding:0 16px;border:1px solid #536174;background:#26344a;color:#fff;font:inherit;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.file-button:hover,.ghost:hover{border-color:var(--mint);background:#32435c}.file-button input{position:absolute;opacity:0;pointer-events:none}main{padding:18px clamp(12px,2.8vw,38px) 34px}.transport{display:grid;grid-template-columns:auto minmax(220px,1fr) auto;gap:22px;align-items:center;background:white;padding:16px 20px;border-radius:18px;box-shadow:var(--shadow)}.main-controls{display:flex;gap:9px}.round{width:46px;height:46px;border:0;border-radius:50%;background:#e9edf3;color:var(--ink);font-size:1.12rem;font-weight:900;cursor:pointer}.round.primary,.rectangular.primary{background:var(--coral);color:white}.round:hover{transform:translateY(-1px);filter:brightness(.97)}.timeline-wrap{min-width:0}.now-playing{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:8px}.now-playing strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.now-playing span{font-size:.8rem;color:var(--muted);white-space:nowrap}.timeline{width:100%;accent-color:var(--coral)}.time-row{display:flex;justify-content:space-between;color:var(--muted);font-size:.78rem}.tempo-box{min-width:188px}.control-label{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800;margin-bottom:5px}.stepper{display:flex;align-items:center;gap:8px}.stepper button{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:white;font-size:1.35rem;cursor:pointer}.stepper output{min-width:42px;text-align:right;font-size:1.35rem;font-weight:850}.stepper span{font-size:.8rem;color:var(--muted)}.hint{font-size:.72rem;color:var(--mint-dark)}.practice-area{position:relative}.controls-stack{position:sticky;top:0;z-index:30;padding-top:8px;background:var(--bg)}.toolstrip{position:relative;z-index:1;margin:8px 0 12px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:11px 14px;background:#dde5ed;border-radius:13px;box-shadow:0 8px 20px rgba(16,24,40,.12)}.switch-label,.compact{display:flex;align-items:center;gap:9px;font-weight:650;font-size:.9rem}.switch-label input{position:absolute;opacity:0}.switch{width:42px;height:24px;border-radius:99px;background:#98a2b3;position:relative}.switch:after{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:white;border-radius:50%;transition:.18s}.switch-label input:checked+.switch{background:var(--mint-dark)}.switch-label input:checked+.switch:after{transform:translateX(18px)}.compact input{width:110px;accent-color:var(--mint-dark)}.compact output{min-width:48px;color:var(--muted);font-variant-numeric:tabular-nums}.ghost.small{min-height:35px;padding:0 12px;color:var(--ink);background:transparent;border-color:#98a2b3}.toolstrip .ghost.small:last-child{margin-left:auto}.score-panel{min-height:520px;background:var(--paper);border-radius:16px;box-shadow:var(--shadow);overflow:auto;position:relative}.empty-state{min-height:520px;display:grid;place-content:center;text-align:center;padding:36px;max-width:650px;margin:auto}.empty-icon{font-size:4rem;color:var(--mint-dark)}.empty-state h2{font-size:clamp(1.5rem,3vw,2.3rem);margin:4px 0 10px}.empty-state p{line-height:1.6;color:var(--muted);margin:0 auto 22px}.rectangular{justify-self:center;border:0}.score{padding:28px 28px 60px;min-width:760px}.score-title{text-align:center;margin:0 0 22px;font-family:Georgia,serif}.system{margin:0 auto 38px;position:relative;width:min(1120px,100%)}.staff-svg{display:block;width:100%;height:auto;overflow:visible}.measure-hit{cursor:pointer}.measure-hit:hover{fill:rgba(121,229,195,.12)}.note-head{fill:var(--ink);transition:fill .08s,filter .08s,transform .08s;transform-box:fill-box;transform-origin:center}.note-active .note-head{fill:var(--coral);filter:drop-shadow(0 0 5px rgba(255,118,87,.7));transform:scale(1.16)}.note-active .stem{stroke:var(--coral)}.note-name{font:700 13px Inter,system-ui,sans-serif;fill:var(--mint-dark);text-anchor:middle;pointer-events:none}.bar-number{font:600 11px Inter,system-ui,sans-serif;fill:#98a2b3}.playhead{position:absolute;top:13px;bottom:-6px;width:3px;background:var(--coral);border-radius:3px;box-shadow:0 0 0 2px rgba(255,118,87,.15);pointer-events:none;transition:left .07s linear;display:none}dialog{max-width:520px;border:0;border-radius:18px;padding:28px 34px;box-shadow:0 28px 80px rgba(16,24,40,.28);line-height:1.55}dialog::backdrop{background:rgba(16,24,40,.65)}.dialog-close{position:absolute;right:14px;top:10px;border:0;background:transparent;font-size:1.8rem;cursor:pointer}
@media(max-width:860px){.topbar{align-items:flex-start;flex-direction:column}.transport{grid-template-columns:1fr}.tempo-box{border-top:1px solid var(--line);padding-top:10px}.now-playing{align-items:flex-start;flex-direction:column}.toolstrip .ghost.small:last-child{margin-left:0}.score-panel{border-radius:10px}.score{padding-left:14px;padding-right:14px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.lyric{font:600 12px Georgia,serif;fill:#344054;text-anchor:middle;pointer-events:none}
.score{min-width:0;padding:22px 18px 60px}.vrv-page{position:relative;max-width:1220px;margin:0 auto 24px;background:#fff}.vrv-page svg{display:block;width:100%;height:auto}.vrv-page g.measure{cursor:pointer}.vrv-page g.measure:hover{filter:drop-shadow(0 0 3px rgba(8,127,104,.28))}.vrv-page g.playback-active,.vrv-page g.playback-active *{fill:var(--coral)!important;color:var(--coral)!important}.verovio-note-label{position:absolute;z-index:2;transform:translateX(-50%);padding:1px 2px 2px;border:0;border-bottom:3px solid transparent;border-radius:3px;background:rgba(255,255,255,.94);color:var(--mint-dark);font-size:var(--note-label-size);font-weight:850;line-height:1.05;white-space:nowrap;pointer-events:none;transition:color .08s,background-color .08s,border-color .08s,text-shadow .08s}.verovio-note-label.position-top{transform:translate(-50%,-100%)}.verovio-note-label.active{color:var(--coral);background:#fff7f4;border-bottom-color:var(--coral);text-shadow:0 0 7px rgba(255,118,87,.35)}.engine-credit{margin-left:auto;color:#475467;font-size:.78rem;font-weight:700}.engine-credit:hover{color:var(--mint-dark)}
.back-link{text-decoration:none}.loading-state{min-height:96px;display:grid;place-content:center;justify-items:center;text-align:center;padding:16px;color:var(--muted)}.loading-state h2{color:var(--ink);margin:.2rem 0}.loading-note{font-size:2.5rem;color:var(--mint-dark);animation:loadingPulse 1.25s ease-in-out infinite}.score-zoom{gap:6px}.zoom-button{width:30px;height:30px;padding:0;border:1px solid #98a2b3;border-radius:8px;background:#fff;color:var(--ink);font-size:1.15rem;font-weight:850;line-height:1;cursor:pointer}.zoom-button:hover:not(:disabled){border-color:var(--mint-dark);background:#f2fffb}.zoom-button:disabled{opacity:.4;cursor:not-allowed}.practice-area:fullscreen,.practice-area.is-fullscreen{display:flex;height:100vh;max-height:100vh;overflow:hidden;flex-direction:column;background:var(--bg);padding:0 12px 12px}.practice-area:fullscreen .controls-stack,.practice-area.is-fullscreen .controls-stack{position:relative!important;top:auto!important;z-index:2147483647;flex:0 0 auto;width:100%;padding-top:0;visibility:visible!important}.practice-area:fullscreen .transport,.practice-area.is-fullscreen .transport{border-radius:0 0 18px 18px}.practice-area:fullscreen .toolstrip,.practice-area.is-fullscreen .toolstrip{position:relative!important;top:auto!important;margin:8px 0}.practice-area:fullscreen .score-panel,.practice-area.is-fullscreen .score-panel{flex:1 1 auto;min-height:0;overflow:auto}.catalog-body{min-height:100vh}.catalog-topbar{justify-content:flex-start}.catalog-main{width:min(1120px,100%);margin:0 auto;padding:clamp(28px,5vw,62px) clamp(16px,3vw,32px) 60px}.catalog-intro{max-width:720px}.eyebrow{margin:0 0 8px;text-transform:uppercase;letter-spacing:.12em;color:var(--mint-dark);font-size:.78rem;font-weight:850}.catalog-intro h2{margin:0;font-size:clamp(2rem,5vw,3.5rem);letter-spacing:-.04em}.catalog-intro>p:not(.eyebrow){color:var(--muted);font-size:1.05rem;line-height:1.6}.song-search{display:grid;gap:7px;margin-top:26px;font-weight:800}.song-search input{width:min(520px,100%);min-height:48px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:0 15px;font:inherit;box-shadow:0 6px 18px rgba(16,24,40,.06)}.song-search input:focus{outline:3px solid rgba(121,229,195,.42);border-color:var(--mint-dark)}.catalog-status{margin:30px 0 12px;color:var(--muted);font-size:.9rem;font-weight:700}.song-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.song-card{display:flex;gap:16px;align-items:center;min-height:138px;padding:20px;border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--ink);text-decoration:none;box-shadow:var(--shadow);transition:transform .16s,border-color .16s,box-shadow .16s}.song-card:hover,.song-card:focus-visible{transform:translateY(-3px);border-color:var(--mint-dark);box-shadow:0 18px 38px rgba(16,24,40,.15);outline:none}.song-card-icon{display:grid;place-items:center;flex:0 0 58px;width:58px;height:58px;border-radius:16px;background:var(--ink);color:var(--mint);font-size:34px}.song-card-body{display:grid;gap:5px;min-width:0}.song-card-body strong{font-size:1.15rem}.song-card-body>span:not(.song-card-action){color:var(--muted);font-size:.9rem}.song-card-action{margin-top:8px;color:var(--mint-dark);font-size:.85rem;font-weight:850}@keyframes loadingPulse{50%{transform:scale(1.12);opacity:.55}}
.compact select{min-height:32px;border:1px solid #98a2b3;border-radius:8px;background:#fff;padding:0 28px 0 9px;color:var(--ink);font:inherit}.compact select:disabled{opacity:.55;cursor:not-allowed}.sync-rate output{min-width:64px}
.instrument-panel{min-height:132px;margin:-4px 0 12px;padding:9px 18px;display:grid;grid-template-columns:minmax(210px,1fr) 78px minmax(210px,1fr);align-items:center;gap:18px;border:1px solid #b7c7d7;border-radius:13px;background:#f8fbfd;box-shadow:0 7px 18px rgba(16,24,40,.10)}
.instrument-status{display:grid;align-content:center;justify-items:start}.instrument-status .control-label{margin-bottom:3px}.instrument-note{font-size:clamp(1.75rem,3vw,2.45rem);line-height:1;color:var(--mint-dark)}.instrument-hint{max-width:360px;margin-top:7px;color:var(--muted);font-size:.82rem;line-height:1.35}.instrument-panel.is-pause .instrument-note{color:var(--coral)}
.recorder-diagram{display:block;width:68px;height:126px;margin:auto;overflow:visible}.recorder-body{fill:#dff8ef;stroke:#526275;stroke-width:2.4}.recorder-window{fill:#526275}.thumb-guide{fill:none;stroke:#526275;stroke-width:1.8}.recorder-hole text{fill:#344054;font:700 11px Inter,system-ui,sans-serif}.hole-base{fill:#fff;stroke:#344054;stroke-width:1.9}.hole-fill,.hole-half-fill,.hole-quarter-fill{fill:var(--coral);opacity:0;transition:opacity .08s}.recorder-hole.closed .hole-fill{opacity:1}.recorder-hole.single.half .hole-half-fill,.recorder-hole.single.quarter .hole-quarter-fill{opacity:1}.recorder-hole.double.half .hole-fill.left,.recorder-hole.double.quarter .hole-fill.left{opacity:1}.recorder-hole.closed,.recorder-hole.half,.recorder-hole.quarter{filter:drop-shadow(0 0 3px rgba(255,118,87,.65))}
.instrument-guide{display:grid;grid-template-columns:repeat(3,max-content);justify-content:end;align-items:center;gap:6px 13px;color:#475467;font-size:.78rem}.instrument-guide strong{color:var(--ink)}.instrument-guide small{grid-column:1/-1;justify-self:end;color:var(--muted);font-size:.72rem}
@media(max-width:860px){.instrument-panel{grid-template-columns:minmax(0,1fr) 68px;min-height:126px;padding:8px 14px;gap:12px}.recorder-diagram{width:60px;height:112px}.instrument-guide{display:none}}
.print-title{display:none}
@media print{
  @page{margin:12mm}
  body.player-body{background:#fff!important;color:#000!important}
  .player-body .topbar,.player-body .controls-stack,.player-body dialog,.player-body audio,.player-body .loading-state{display:none!important}
  .player-body main{padding:0!important}
  .player-body .practice-area,.player-body .practice-area:fullscreen,.player-body .practice-area.is-fullscreen{display:block!important;height:auto!important;max-height:none!important;overflow:visible!important;padding:0!important;background:#fff!important}
  .player-body .score-panel,.player-body .practice-area:fullscreen .score-panel,.player-body .practice-area.is-fullscreen .score-panel{display:block!important;min-height:0!important;overflow:visible!important;border-radius:0!important;box-shadow:none!important;background:#fff!important}
  .player-body .print-title{display:block!important;position:absolute!important;top:2mm;left:0;right:0;z-index:5;margin:0!important;text-align:center;font:700 18pt Georgia,serif;color:#000;pointer-events:none}
  .player-body .score{display:block!important;padding:0!important;min-width:0!important}
  .player-body .vrv-page{max-width:none!important;margin:0 auto!important;break-inside:avoid;page-break-inside:avoid;break-after:page;page-break-after:always}
  .player-body .vrv-page:last-child{break-after:auto;page-break-after:auto}
  .player-body .vrv-page svg{display:block!important;width:100%!important;height:auto!important}
  .player-body .verovio-note-label{padding:0 1px!important;border:0!important;background:#fff!important;color:#000!important;font-size:8pt!important;font-weight:700!important;line-height:1!important;text-shadow:none!important}
}