.score-body{min-width:0;min-height:0;touch-action:manipulation;--score-paper: #fffcf8;--score-ink: #282529;--score-muted: #88807c;--score-rule: #c7bfb9;--score-highlight: #f7dce3;--score-accent: #bd5279;--score-safe-top: env(safe-area-inset-top, 0px);--score-safe-right: env(safe-area-inset-right, 0px);--score-safe-bottom: env(safe-area-inset-bottom, 0px);--score-safe-left: env(safe-area-inset-left, 0px);--score-tool-size: 44px;--score-edge-space: max(4px, var(--score-safe-right));--score-edge-guard: 4px;--score-rail-width: calc(var(--score-tool-size) + 8px + var(--score-edge-space))}.score-body[data-tools-edge=flush]{--score-edge-space: 4px;--score-edge-guard: clamp(12px, var(--score-safe-right), 24px)}.score-loading:not([hidden]){position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:max(1rem,var(--score-safe-top)) max(1rem,var(--score-safe-right)) max(1rem,var(--score-safe-bottom)) max(1rem,var(--score-safe-left));background:#f7f3f1e5}.score-loading-card{width:min(28rem,100%);padding:1.2rem;border:1px solid var(--score-rule);border-radius:.6rem;background:var(--score-paper);color:var(--score-ink);line-height:1.6}.score-loading-card h2{margin:0;font-size:1.1rem}.score-loading-card p{margin:.65rem 0 1rem}.score-loading-card :is(button,a){display:inline-flex;align-items:center;min-height:44px;padding:.35rem .7rem;border:1px solid var(--score-rule);border-radius:.35rem;background:var(--score-paper);color:var(--score-ink);font:inherit;text-decoration:none}.score-loading-card button{background:var(--score-highlight)}.score-loading-card [hidden]{display:none}.score-shell:not([data-library-state=ready]) :is(.score-title-row>*,#score-sheet,#score-add-bars){visibility:hidden}.score-shell:not([data-library-state=ready]) .score-title-row{position:relative}.score-shell:not([data-library-state=ready]) .score-title-row:after{content:"";position:absolute;inset:.35rem 0;width:80%;border-radius:.25rem;background:linear-gradient(90deg,#e9e1db 52%,transparent 52% 58%,#eee7e1 58%)}.score-body .score-shell{grid-template-columns:minmax(0,1.1fr) minmax(0,1.65fr) minmax(0,1.05fr) var(--score-rail-width);grid-template-areas:"chords score melody tools";gap:clamp(.35rem,.7vw,.65rem);padding:max(.35rem,var(--score-safe-top)) 0 max(.35rem,var(--score-safe-bottom)) max(.35rem,var(--score-safe-left))}.score-shell .chord-panel{grid-area:chords;grid-template-rows:1.65rem minmax(0,1fr)}.score-shell .score-chord-heading{align-items:center;border-radius:.45rem .45rem 0 0}.score-shell .score-chord-heading .audio-log{text-align:right}.score-shell .chord-panel .touch-surface{border-top-left-radius:0;border-top-right-radius:0;touch-action:none}.score-shell .pop-chord-region{pointer-events:auto;touch-action:none}.score-shell .pop-chord-region:focus-visible{outline:2px solid var(--score-ink);outline-offset:-3px}.score-shell .score-panel{grid-area:score;position:relative;display:grid;min-width:0;min-height:0;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border:1px solid #d9d0cb;border-radius:.5rem;background:var(--score-paper);color:var(--score-ink)}:is(.score-panel,.score-tool-rail) :is(button,select,input,summary,a){font:inherit;touch-action:manipulation}:is(.score-panel,.score-tool-rail) :is(button,select,summary,a){-webkit-tap-highlight-color:transparent}:is(.score-panel,.score-tool-rail) :is(button,select,input,summary,a):focus-visible{outline:2px solid var(--score-accent);outline-offset:2px}:is(.score-panel,.score-tool-rail) :is(button,select){min-width:2.4rem;min-height:2.35rem;border:1px solid transparent;border-radius:.35rem;background:transparent;color:inherit}:is(.score-panel,.score-tool-rail) button:disabled{opacity:.32}@media(hover:hover){:is(.score-panel,.score-tool-rail) button:not(:disabled):not(.score-beat):not(.score-play):hover{background-color:#eee6e2}}:is(.score-panel,.score-tool-rail) button:not(:disabled):is(:active,[data-pressed=true]){transform:none;filter:none;box-shadow:none}:is(.score-panel,.score-tool-rail) button:not(:disabled):not(.score-play):not(.score-beat):not(.score-melody-beat):is(:active,[data-pressed=true]){background-color:var(--score-highlight)}.score-shell .score-heading{position:relative;z-index:5;display:flex;min-width:0;align-items:center;gap:.6rem;padding:.65rem .85rem .45rem}.score-shell .score-title-group{display:grid;min-width:0;flex:1;gap:.1rem}.score-shell #score-title{width:100%;min-width:0;padding:.12rem 0;border:0;border-radius:.2rem;background:transparent;color:var(--score-ink);font-size:clamp(1rem,1.8vw,1.5rem);font-weight:720;user-select:text;-webkit-user-select:text}.score-title-row{display:flex;align-items:center;min-width:0;gap:.5rem}.score-song-meta{display:flex;flex:0 0 auto;align-items:center;gap:4px;padding-left:8px;border-left:1px solid #e9e0d9;font-variant-numeric:tabular-nums}.score-shell .score-quick-control{position:relative;display:flex;align-items:center;justify-content:center;gap:3px;min-height:30px;padding:3px 5px;border:1px solid #dfd4cf;border-radius:5px;background:#f6f0ea;font-size:12px;white-space:nowrap;cursor:pointer}.score-shell .score-quick-control:focus-within{outline:2px solid var(--score-accent);outline-offset:1px}.score-shell #score-bpm{width:3ch;min-width:0;padding:0;border:0;background:transparent;color:inherit;font-size:16px;font-weight:650;text-align:center;appearance:textfield;outline:none;cursor:text}.score-shell #score-bpm::-webkit-inner-spin-button,.score-shell #score-bpm::-webkit-outer-spin-button{margin:0;appearance:none}.score-tempo-control span{color:var(--score-muted);font-size:9px}.score-shell .score-key-control{min-width:32px;font-weight:650}.score-shell #score-key{position:absolute;inset:0;width:100%;height:100%;min-height:0;min-width:0;opacity:0;cursor:pointer}.score-song-picker{position:relative;flex:0 0 auto;padding:.25rem .3rem;border:1px solid #dfd4cf;border-radius:.3rem;font-size:.8rem;font-variant-numeric:tabular-nums;white-space:nowrap}.score-shell #score-song{position:absolute;inset:0;width:100%;height:100%;min-height:0;opacity:0}.score-song-picker:focus-within{outline:2px solid var(--score-accent);outline-offset:2px}.score-library-tools{display:grid;gap:.4rem;padding-block:.5rem;border-top:1px solid #e9e0d9}.score-library-actions{display:flex;gap:.5rem}.score-shell .score-library-actions button{flex:1;border:1px solid #dfd4cf}#score-library-status{font-size:.72rem;line-height:1.4}.score-import-dialog{max-width:min(26rem,calc(100vw - 3rem));max-height:calc(100dvh - 3rem);padding:1.25rem;border:1px solid #dfd4cf;border-radius:.6rem;color:#302c30;background:#fffdf8;overflow:auto;font:.9rem/1.5 system-ui,sans-serif}.score-import-dialog::backdrop{background:#302c3066}.score-import-dialog h2{margin:0;font-size:1.1rem}.score-import-dialog button{padding:.5rem .75rem;font:inherit}#score-import-confirm{background:#f3d5e0;border:1px solid #ddb6c4;border-radius:.3rem}.score-shell #score-save-status{overflow:hidden;color:var(--score-muted);font-size:.65rem;text-overflow:ellipsis;white-space:nowrap}.score-shell .score-back-link,.score-shell .score-settings summary{display:grid;min-width:2.4rem;min-height:2.4rem;place-items:center;border-radius:.35rem;color:#726867;font-size:.75rem;text-decoration:none;white-space:nowrap;cursor:pointer}.score-shell .score-settings summary{list-style:none}.score-shell .score-settings summary::-webkit-details-marker{display:none}.score-shell .score-settings[open] summary{background:var(--score-highlight);color:var(--score-accent)}.score-shell .score-settings-popover{position:fixed;bottom:max(.75rem,var(--score-safe-bottom));right:calc(var(--score-rail-width) + .5rem);z-index:30;display:grid;width:min(17.5rem,calc(100dvw - var(--score-rail-width) - max(.5rem,var(--score-safe-left)) - 1rem));max-height:calc(100dvh - max(.75rem,var(--score-safe-top)) - max(.75rem,var(--score-safe-bottom)));overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;gap:.3rem;padding:.7rem;border:1px solid #d8cbc8;border-radius:.5rem;background:var(--score-paper);box-shadow:0 .5rem 1.5rem #33282b25;font-size:.8rem}.score-shell .score-settings-popover label,.score-shell .score-meter{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.score-shell .score-settings-popover :is(select,input){width:7.25rem;min-width:0;min-height:2.35rem;padding:.25rem .45rem;border:1px solid #d8ceca;border-radius:.3rem;background:#fff;color:var(--score-ink);font-size:1rem}.score-shell .score-settings-popover input{user-select:text;-webkit-user-select:text}.score-shell .score-meter{padding:.4rem .1rem .2rem;color:var(--score-muted)}.score-shell .score-toolbar{display:flex;min-width:0;flex-direction:column;align-items:stretch;gap:8px;padding:0;font-size:.8rem}.score-shell .score-transport,.score-shell .score-history{display:flex;flex-direction:column;align-items:stretch;gap:4px}.score-shell .score-history{padding-top:8px;border-top:1px solid #ddd2cc}.score-shell #score-play{--score-play-background: var(--score-ink);--score-play-color: var(--score-paper);background:var(--score-play-background);color:var(--score-play-color);font-weight:650;white-space:nowrap;transform:none;filter:none;box-shadow:none}.score-shell #score-play[data-state=stopped]{--score-play-background: var(--score-ink);--score-play-color: var(--score-paper)}.score-shell #score-play:is([data-state=loading],[data-state=playing]){--score-play-background: var(--score-highlight);--score-play-color: var(--score-ink)}@media(hover:hover){.score-shell #score-play:is([data-state=stopped],[data-state=paused]):not(:disabled):hover{--score-play-background: #484148}.score-shell #score-play:is([data-state=loading],[data-state=playing]):not(:disabled):hover{--score-play-background: #f0ccd8}}.score-shell .score-stop{font-size:.7rem}.score-shell .score-input-mode{border:1px solid #d7ccc7;font-weight:650;white-space:nowrap}.score-shell .score-input-mode[aria-pressed=true]{border-color:#e7bac8;background:var(--score-highlight);color:#984060}.score-shell .score-tool-rail{grid-area:tools;z-index:20;display:flex;min-width:0;min-height:0;flex-direction:column;gap:8px;padding:var(--score-edge-guard) var(--score-edge-space) var(--score-edge-guard) 8px;border-left:1px solid #ded4ce;background:#f0e9e3;color:var(--score-ink)}.score-shell .score-tool-scroll{min-height:0;flex:1;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain;touch-action:pan-y}.score-shell .score-tool-scroll::-webkit-scrollbar{display:none}.score-shell .score-toolbar button,.score-shell .score-tool-rail .score-settings summary{display:flex;width:100%;min-width:0;height:var(--score-tool-size);min-height:var(--score-tool-size);flex:0 0 auto;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:3px 0;border-radius:6px;line-height:1}.score-shell .score-tool-icon{display:flex;height:20px;align-items:center;justify-content:center;font-size:19px;line-height:1}.score-shell .score-tool-icon svg{width:19px;height:19px}.score-shell .score-tool-label{font-size:10px;font-weight:550;white-space:nowrap}.score-shell .score-tool-rail .score-settings{flex:0 0 auto}.score-shell .score-settings-popover :is(#score-edge-fit,#score-loop){width:18px;height:18px;min-height:0;flex:0 0 auto;accent-color:var(--score-accent)}.score-shell .score-settings-popover small{color:var(--score-muted);font-size:.68rem;line-height:1.5}.score-shell .score-settings-popover .score-cursor-controls{justify-content:flex-end;padding-block:.2rem}.score-shell .score-settings-popover .score-back-link{margin-top:.3rem;min-height:44px;border:1px solid #c490a0;background:var(--score-highlight);color:var(--score-ink);font-weight:650;box-shadow:0 2px #dec6ce}.score-shell .score-settings-popover .score-back-link:active{background:#ecc7d3;box-shadow:inset 0 1px 3px #c490a04d}.score-shell .score-viewport{min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#cbbcb8 transparent;scroll-padding-block:1rem;touch-action:pan-y;-webkit-overflow-scrolling:touch}.score-shell .score-sheet{display:grid;gap:.65rem;padding:.65rem 1rem .75rem}.score-shell .score-system{display:grid;min-width:0;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:.65rem;align-items:stretch}.score-shell .score-bar{position:relative;min-width:0;border-right:1.5px solid var(--score-rule)}.score-shell .score-bar:first-child{border-left:1.5px solid var(--score-rule)}.score-shell .score-bar-number{position:absolute;z-index:3;top:.25rem;left:.42rem;color:#9b9189;font-size:.58rem;font-weight:500;font-variant-numeric:tabular-nums;pointer-events:none}.score-shell .score-beats{position:relative;isolation:isolate;display:grid;min-width:0;grid-template-columns:repeat(4,minmax(0,1fr))}.score-shell .score-beat{position:relative;z-index:1;display:flex;min-width:0;min-height:1.9rem;align-items:center;justify-content:flex-start;padding:.45rem .12rem .1rem .25rem;border:0;border-radius:0;color:var(--score-ink);text-align:left;touch-action:pan-y}.score-shell .score-chord-range{position:absolute;z-index:0;top:0;height:50%;left:calc(var(--score-range-start, 0) * 100%);width:calc(var(--score-range-span, 0) * 100%);background:var(--score-highlight);pointer-events:none}.score-shell .score-chord-range[hidden]{display:none}.score-shell .score-position-line{position:absolute;z-index:4;inset-block:0;left:calc(var(--score-line-offset, 0) * 100%);width:2px;background:var(--score-accent);pointer-events:none;transition:none;animation:none}.score-shell .score-beat:focus-visible{z-index:2;outline-offset:-2px}.score-shell .score-chord-label{position:absolute;z-index:2;top:60%;left:.25rem;width:calc(var(--chord-span, 1) * 100% - .35rem);max-width:none;font-family:Avenir Next,Trebuchet MS,system-ui,sans-serif;font-size:clamp(1rem,1.9vw,1.65rem);font-weight:650;letter-spacing:-.06em;line-height:1.2;transform:translateY(-50%);white-space:nowrap;pointer-events:none}.score-shell .score-chord-label sup{font-size:.65em}.score-sheet[data-chord-notation=numeric] .score-chord-label{font-family:Iowan Old Style,Palatino Linotype,Palatino,Times New Roman,serif;font-weight:760;letter-spacing:-.02em}.score-shell .score-chord-text{display:inline-block;width:max-content;padding-inline-end:1px;transform:scaleX(var(--chord-scale, 0));transform-origin:left center}.score-shell .score-chord-label.is-compact{left:1px;width:calc(var(--chord-span, 1) * 100% - 2px)}.score-shell .score-add-bars{display:block;margin:.25rem auto 1.1rem;padding-inline:1rem;color:#857673;font-size:.8rem}.score-shell .score-footer{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:.3rem .8rem;padding:.35rem .7rem;border-top:1px solid #e9e0d9;background:#f6f0ea;font-size:.75rem}.score-shell .score-cursor-controls{display:flex;flex:0 0 auto;align-items:center;gap:.3rem}.score-shell .score-cursor-controls button{min-width:2.5rem;border-color:#ded2cc;background:var(--score-paper);font-size:1.2rem}.score-shell #score-position{min-width:3.15rem;color:#6a3f50;font-size:1rem;font-weight:700;font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap}.score-shell .score-step-field{display:flex;flex:0 0 auto;align-items:center;gap:.35rem;margin-left:auto;color:#7b6c67;white-space:nowrap}.score-shell #score-step{min-height:2.35rem;padding:.25rem;border-color:#ded2cc;background:var(--score-paper);font-size:.8rem}.score-shell .score-hint{min-width:0;flex:1;text-align:right;overflow:hidden;color:#8d8079;font-size:.62rem;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}@media(max-width:1100px){.score-shell .score-sheet{padding-inline:.8rem}.score-shell .score-chord-label{font-size:clamp(1rem,2.7vw,1.6rem)}}@media(max-height:500px)and (min-width:601px){.score-body{--score-tool-size: 40px}.score-shell .score-heading{gap:.35rem;padding:.3rem .6rem .15rem}.score-shell #score-title{padding:0;font-size:1rem}.score-shell #score-save-status{font-size:.56rem}.score-shell .score-tool-rail,.score-shell .score-toolbar{gap:4px}.score-shell .score-history{padding-top:4px}.score-shell .score-sheet{gap:.5rem;padding-top:.5rem}.score-shell .score-beat{min-height:1.7rem}.score-shell .score-footer{gap:.12rem .5rem;padding:.22rem .55rem}.score-shell .score-hint{font-size:.57rem}}@media(max-width:600px)and (orientation:portrait){.score-body .score-shell{grid-template-columns:minmax(0,1fr) minmax(0,1fr) var(--score-rail-width);grid-template-rows:minmax(10rem,42%) minmax(0,1fr);grid-template-areas:"chords melody tools" "score score tools";gap:.4rem}.score-shell .score-heading{padding:.3rem .6rem}.score-shell .score-chord-label{font-size:1rem}.score-shell .score-sheet{padding-inline:.55rem}.score-shell .score-beat{min-height:1.9rem;padding-left:.15rem}}.score-shell .score-melody-panel{grid-area:melody;position:relative;min-width:0;min-height:0;overflow:hidden}.score-shell .score-melody-heading{position:absolute;z-index:5;top:0;left:0;max-width:73%;display:grid;gap:2px;padding:5px 7px;background:transparent;color:var(--score-ink);pointer-events:none}.score-shell #score-melody-status{font-size:10px;color:#877}.score-shell .score-melody-panel .melody-region{width:min(11cqw,9cqh);min-width:18px;height:auto;min-height:0;touch-action:none;pointer-events:auto;cursor:pointer;font:inherit}.score-shell .score-melody-panel .melody-key-black-circle{width:min(8cqw,7cqh);min-width:14px}.score-shell .score-melody-panel .melody-note-label{font-size:clamp(10px,4cqw,18px)}.score-shell .score-melody-panel .melody-key-black-circle .melody-note-label{font-size:clamp(8px,3cqw,13px)}.score-shell .score-melody-panel .score-melody-command .melody-note-label{font-size:clamp(12px,5cqw,22px)}.score-shell .score-beat-column{display:grid;min-width:0;grid-template-rows:1fr 1fr}.score-shell .score-melody-beat{position:relative;z-index:1;display:flex;min-width:0;width:100%;min-height:1.9rem;padding:0;align-items:stretch;border:0;border-top:1px solid rgb(152 128 124 / 12%);border-left:1px solid rgb(152 128 124 / 10%);border-radius:0;background:#e3d3cd24;font-family:Avenir Next,Trebuchet MS,system-ui,sans-serif;font-size:clamp(13px,1.7vw,22px);line-height:1;font-weight:600;touch-action:pan-y}.score-shell .score-melody-beat.is-selected{background:#f7dce3bf}.score-shell .score-sheet[data-input-mode=write] :is(.score-chord-range,.score-melody-beat.is-selected){background-color:#efa7bf;transition:none}.score-shell .score-sheet[data-input-mode=write][data-write-phase=dim] :is(.score-chord-range,.score-melody-beat.is-selected){background-color:#fbedf2}@media(prefers-reduced-motion:reduce){.score-shell .score-sheet[data-input-mode=write][data-write-phase] :is(.score-chord-range,.score-melody-beat.is-selected){background-color:#efa7bf}}.score-note{position:relative;display:flex;flex:1;min-width:0;align-items:center;justify-content:center;padding-block:5px 6px;white-space:nowrap}.score-note.is-rest{color:#998b85}.score-melody-beat.is-eighth-pair:after{position:absolute;content:"";bottom:2px;left:10%;right:10%;border-bottom:1px solid currentColor;pointer-events:none}.score-melody-beat.is-eighth-pair{letter-spacing:-.06em}.score-octave-dots{position:absolute;left:0;right:0;text-align:center;font-size:12px;line-height:5px}.score-octave-dots.is-upper{top:3px}.score-octave-dots.is-lower{bottom:5px}@media(max-width:1100px){.score-shell .score-sheet{padding-inline:.35rem}.score-shell .score-heading{padding-inline:.4rem}.score-title-row{flex-wrap:wrap;gap:3px 6px}.score-shell #score-title{flex:1;width:4rem;font-size:1rem}.score-song-meta{margin-left:auto;padding-left:0;border:0}.score-shell .score-chord-label{font-size:1.05rem}.score-shell .score-footer{padding-inline:.35rem}.score-shell .score-melody-beat{min-height:1.7rem}}@media(min-width:601px),(orientation:landscape){.score-body .score-shell{grid-template-columns:minmax(0,1.1fr) minmax(0,2.7fr) var(--score-rail-width);grid-template-areas:"chords workspace tools"}.score-shell .score-panel{grid-area:workspace}.score-shell .score-melody-panel{grid-area:workspace;z-index:10;width:min(68%,calc(100dvh - max(.35rem,var(--score-safe-top)) - max(.35rem,var(--score-safe-bottom))));height:auto;aspect-ratio:1;align-self:end;justify-self:end;overflow:visible;border:0;background:transparent;pointer-events:none}.score-shell .score-melody-panel>.melody-surface{border:0;background:transparent;pointer-events:auto;clip-path:polygon(80% 0,74% 24%,51% 43%,28% 63%,0 73%,0 100%,100% 100%,100% 0)}.score-shell .score-melody-heading{top:56%;left:61%;max-width:37%;padding:0}.score-shell .score-melody-heading h2{font-size:12px}.score-shell #score-melody-status{font-size:10px;line-height:1.5}.score-shell .score-viewport{align-self:start;scrollbar-width:none}.score-shell .score-viewport::-webkit-scrollbar{display:none}.score-shell .score-system{justify-self:start}.score-shell .score-footer{justify-self:start;border-radius:0 5px 0 0}}
