@charset "UTF-8";
:root{--bg:#eeeff3;--panel:#fff;--paper:#fff;--ink:#252733;--muted:#6d7180;--line:#e2e4eb;--line-strong:#c5c8d1;--accent:#6857d9;--accent-hover:#5544c6;--accent-soft:#efecfd;--danger:#b64556;--header:#242531;--score-scale:1;color:var(--ink);font:14px/1.45 "Inter","Segoe UI",system-ui,sans-serif;font-synthesis:none;color-scheme:light}
*{box-sizing:border-box}body{margin:0;background:var(--bg)}button,input,select{font:inherit;color:inherit}button,select{cursor:pointer}button{transition:background .15s,color .15s,border-color .15s}button:disabled,select:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #9585f5;outline-offset:3px}input[type=number]{appearance:textfield;-moz-appearance:textfield}input::-webkit-inner-spin-button{appearance:none}a{color:inherit;text-decoration:none}[hidden]{display:none!important}h1,h2,h3,p{margin:0}svg{display:block}button svg,[data-icon] svg{width:19px;height:19px;flex:none}kbd{font:11px/1.5 "Segoe UI",sans-serif;padding:1px 5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;background:var(--panel);color:var(--muted)}
/* Оболочка остаётся на экране; прокручивается только нотный лист. */
.app-shell{height:100dvh;min-height:560px;display:flex;flex-direction:column;overflow:hidden}
.app-header{display:flex;flex:0 0 64px;align-items:center;gap:28px;padding:0 24px;background:var(--header);color:#f6f5fc}
.brand{display:flex;align-items:center;gap:9px;font-size:20px;font-weight:680;letter-spacing:-.8px;line-height:1;flex:none}.brand-sub{display:block;margin-top:5px;font-size:9px;font-weight:500;letter-spacing:4px;color:#b6b5c8}.brand-mark{width:26px;height:29px;display:flex;align-items:center;gap:3px;color:#b0a2ff}.brand-mark i{width:4px;height:10px;border-radius:3px;background:currentColor}.brand-mark i:nth-child(2){height:26px}.brand-mark i:nth-child(3){height:18px}.brand-mark i:nth-child(4){height:13px}
.main-nav{display:flex;align-self:stretch;gap:18px}.nav-item{padding:2px 0 0;border:0;border-bottom:2px solid transparent;color:#b6b5c8;background:none;font-size:13px}.nav-item:hover{color:white}.nav-item.active{color:white;border-bottom-color:#b0a2ff}.header-document{padding-left:25px;border-left:1px solid #444450;min-width:0}.header-document h1{font-size:18px;line-height:1.35;font-weight:600;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.document-caption{font-size:11px;color:#b6b5c8}.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}.save-status{font-size:11px;color:#b6b5c8;display:flex;align-items:center;gap:5px;margin-right:6px}.save-status svg{width:14px;height:14px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;border:1px solid var(--line);border-radius:7px;padding:7px 13px;background:var(--panel);font-size:13px;font-weight:550;white-space:nowrap}.button:hover{background:var(--bg)}.button-primary{color:white;background:var(--accent);border-color:var(--accent)}.button-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.app-header .button-primary{background:#b3a5fc;border-color:#b3a5fc;color:#242039}.app-header .button-primary:hover{background:#c4b9ff}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;border-radius:6px;background:transparent;color:var(--muted);padding:6px;flex:none}.icon-button:hover{background:var(--bg);color:var(--ink)}.icon-button[aria-pressed=true],.button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent);border-color:#c7bff1}.app-header .icon-button{color:#c6c3d5}.app-header .icon-button:hover{background:#393945;color:white}
#editor-view{display:flex;flex-direction:column;flex:1;min-height:0}
.tracks-bar{display:flex;align-items:stretch;gap:18px;padding:0 24px;background:var(--panel);border-bottom:1px solid var(--line);flex:0 0 64px}.tracks-caption{display:flex;flex-direction:column;justify-content:center;gap:3px;flex:none}.tracks-caption>span{font-size:10px;letter-spacing:1.2px;font-weight:650}.tracks-caption small{color:var(--muted);font-size:11px}.track-list{display:flex;align-items:stretch;min-width:0;gap:6px;overflow-x:auto}.track-item{display:flex;align-items:center;gap:8px;padding:0 12px;position:relative;flex:none;border-bottom:3px solid transparent;margin-top:3px}.track-item.active{background:var(--accent-soft);border-bottom-color:var(--accent);border-radius:7px 7px 0 0}.track-icon{color:var(--muted)}.track-icon svg{width:21px;height:21px}.track-item.active .track-icon{color:var(--accent)}.track-label{background:none;border:0;text-align:left;padding:8px 0;color:inherit}.track-label strong{display:block;font-size:13px;font-weight:600}.track-label small{display:block;font-size:10px;color:var(--muted);margin-top:3px}.track-label:hover strong{color:var(--accent)}.track-item.muted .track-label small{color:#a15f3b}.track-mute{display:grid;place-items:center;width:30px;height:32px;border:0;border-radius:5px;background:none;color:var(--muted)}.track-mute:hover{background:var(--line)}.track-mute[aria-pressed=true]{background:#f7eae1;color:#a56642}.track-mute svg{width:16px;height:16px}.tracks-hint{display:flex;align-items:center;gap:8px;margin-left:auto;white-space:nowrap;color:var(--muted);font-size:11px}
.edit-toolbar{display:flex;flex:0 0 52px;align-items:center;gap:14px;padding:0 24px;background:var(--panel);border-bottom:1px solid var(--line)}.tool-group{display:flex;align-items:center;gap:4px;flex:none}.history-tools{gap:0}.toolbar-divider{height:22px;width:1px;background:var(--line);flex:none}.toolbar-label,.compact-select{font-size:12px;color:var(--muted)}.toolbar-label{margin-right:8px}.duration-button{display:flex;align-items:center;justify-content:center;gap:8px;height:36px;min-width:61px;border:1px solid transparent;background:none;border-radius:6px}.duration-button>span{font-size:23px;line-height:1}.duration-button small{font-size:11px}.duration-button:hover{background:var(--bg)}.duration-button.selected{color:var(--accent);background:var(--accent-soft);border-color:#d5cdfa}.dot-button{font-size:27px;width:28px}.compact-select{display:flex;align-items:center;gap:8px;white-space:nowrap}select{min-height:34px;border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:3px 7px;color:var(--ink);font-size:13px}.compact-select select{min-height:30px;border-color:transparent;background:var(--bg)}.toolbar-end{display:flex;align-items:center;gap:20px;margin-left:auto}.focus-button{border:0;background:none;padding:6px 8px}.focus-button svg{width:16px;height:16px}
/* Табулатура. Минимальный размер сохраняет читаемые цифры на узких экранах. */
.score-workspace{flex:1;min-height:130px;overflow:auto;padding:16px 28px;overscroll-behavior:contain;scrollbar-gutter:stable}.score-paper{max-width:1100px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:0 3px 12px #29233305;padding:0 18px;overflow:hidden}.paper-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;height:43px;padding:0 14px;border-bottom:1px solid var(--line)}.paper-track{display:flex;align-items:center;gap:9px;min-width:0}.paper-track h2{font-size:13px;font-weight:600;white-space:nowrap}.paper-track>span:last-child{color:var(--muted);font-size:11px;margin-left:5px}.track-color-dot{width:6px;height:6px;background:var(--accent);border-radius:50%;flex:none}.paper-tuning{display:flex;align-items:center;gap:18px}.tuning-display{display:flex;gap:9px;font-size:11px;color:var(--muted)}.time-signature{font-size:14px;font-weight:650;padding-left:15px;border-left:1px solid var(--line)}.score-area{overflow-x:auto;padding:9px 0 2px}.score-system{display:block;width:calc(100% * var(--score-scale));min-width:calc(1000px * var(--score-scale));margin-bottom:5px}.score-system text{font-family:"Inter","Segoe UI",system-ui,sans-serif}.tab-line{stroke:var(--line-strong);stroke-width:.8}.bar-line{stroke:#9da1af;stroke-width:1}.measure-number{fill:var(--ink);font-size:11px;font-weight:600;cursor:pointer}.measure-button{cursor:pointer}.measure-button rect{fill:var(--bg)}.measure-button:hover rect,.measure-button.active rect{fill:var(--accent-soft)}.measure-button.active text{fill:var(--accent)}.beat-number{fill:var(--muted);font-size:9px}.tuning-label{fill:var(--muted);font-size:11px;font-weight:600}.note-face{fill:var(--paper)}.note-face.selected{fill:var(--accent)}.note-number{fill:var(--ink);font-size:15px;font-weight:600;pointer-events:none}.note-number.selected{fill:white}.note-rhythm{fill:var(--muted);font-size:16px;pointer-events:none}.tab-cell{fill:transparent;stroke:transparent;stroke-width:1.3;cursor:pointer}.tab-cell:hover{fill:#8c79e514;stroke:#8c79e533}.tab-cell.selected-empty{fill:var(--accent-soft);stroke:var(--accent);stroke-dasharray:3 2}.tab-cell:focus-visible{outline:none;stroke:var(--accent);stroke-width:2}.selection-column,.loop-shade{fill:var(--accent-soft);opacity:.65;pointer-events:none}.loop-marker{fill:var(--accent);font-size:9px}.playhead{stroke:var(--accent);stroke-width:1.2;pointer-events:none;opacity:.7}.playhead-head{fill:var(--accent);pointer-events:none}.paper-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:8px 14px 11px;font-size:11px;color:var(--muted)}.paper-footer kbd{margin:0 2px}
.note-dock{display:flex;align-items:center;gap:24px;flex:0 0 76px;padding:9px 28px;background:var(--panel);border-top:1px solid var(--line)}.selection-info{display:flex;flex-direction:column;gap:5px;min-width:148px}.selection-info strong{font-size:13px;font-weight:600}.selection-info>span{font-size:11px;color:var(--muted)}.note-pitch-block{display:flex;align-items:center;gap:11px;min-width:123px;border-left:1px solid var(--line);padding-left:20px}.note-pitch-block>strong{color:var(--accent);font-size:27px;line-height:1;font-weight:550}.note-pitch-block>div{display:flex;flex-direction:column;gap:2px;font-size:12px}.note-pitch-block small{color:var(--muted);font-size:10px}.dock-field{display:flex;flex-direction:column;gap:4px}.dock-field>span,.dock-field>label{font-size:11px;color:var(--muted)}.dock-field select{min-width:130px}.fret-caption{color:var(--muted);font-size:10px;margin-left:8px}.fret-stepper{display:flex;height:34px;border:1px solid var(--line);border-radius:6px;overflow:hidden}.fret-stepper button{width:32px;border:0;background:var(--bg);font-size:18px}.fret-stepper button:hover{background:var(--accent-soft);color:var(--accent)}.fret-stepper input{width:46px;min-width:0;text-align:center;border:0;background:var(--panel);font-size:15px;font-weight:600}.input-hint{color:var(--muted);font-size:11px;line-height:1.8}.input-hint>span{font-size:10px}.note-action{margin-left:auto}.remove-note{color:var(--muted);border-color:transparent;background:none}.remove-note:hover{color:var(--danger);background:#b645560b}
.transport{display:flex;align-items:center;flex:0 0 74px;gap:32px;padding:8px 28px;border-top:1px solid var(--line);background:var(--panel);box-shadow:0 -2px 12px #19142b03}.transport-play{display:flex;align-items:center;gap:12px}.play-button{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--accent);color:white}.play-button:hover{background:var(--accent-hover)}.play-button svg{width:22px;height:22px}.position-readout{display:flex;flex-direction:column;min-width:90px;margin-left:5px;gap:2px}.position-readout strong{font-variant-numeric:tabular-nums;font-size:20px;font-weight:550;letter-spacing:.5px}.position-readout>span{font-size:10px;color:var(--muted)}.transport-middle{display:flex;gap:24px;border-left:1px solid var(--line);padding-left:30px}.tempo-control,.speed-control{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--muted)}.tempo-control>div{display:flex;gap:5px;align-items:center}.tempo-control input{width:44px;height:28px;border:1px solid var(--line);border-radius:5px;background:var(--panel);text-align:center;font-size:14px;color:var(--ink)}.tempo-unit{font-size:10px}.speed-control select{min-height:28px;padding:2px 5px}.loop-control{display:flex;align-items:center;gap:12px;border-left:1px solid var(--line);padding-left:30px}.loop-control>.button{border-color:transparent;color:var(--muted)}.loop-control>.button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent)}.loop-range{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}.loop-range select{min-height:29px;padding:2px 6px;font-size:12px}.demo-label{display:flex;gap:6px;align-items:center;font-size:10px;color:var(--muted);margin-left:auto;white-space:nowrap}.demo-label i{width:5px;height:5px;border-radius:50%;background:#b9aecf}
body.focus-mode .app-header{flex-basis:50px}body.focus-mode .brand-sub,body.focus-mode .main-nav,body.focus-mode .document-caption,body.focus-mode .tracks-bar{display:none}body.focus-mode .score-workspace{padding:14px 28px}body.focus-mode .note-dock{flex-basis:70px}
/* Каталог: компактные строки, поиск и фильтр по инструменту. */
.catalog-view{flex:1;overflow:auto;padding:48px max(28px,calc((100vw - 1140px)/2)) 40px}body.catalog-mode .header-document,body.catalog-mode #save-button,body.catalog-mode .save-status{display:none}.catalog-heading{display:flex;align-items:center;justify-content:space-between;gap:25px}.eyebrow{display:block;font-size:10px;letter-spacing:1.5px;color:var(--accent);font-weight:650;margin-bottom:9px}.catalog-heading h1{font-size:40px;font-weight:650;letter-spacing:-1.6px;line-height:1.2}.catalog-heading p{font-size:13px;color:var(--muted);margin-top:12px}.catalog-heading>.button{padding:11px 17px}.catalog-tools{display:flex;align-items:center;gap:24px;margin-top:32px}.catalog-search{display:flex;align-items:center;gap:12px;flex:1;max-width:620px;border:1px solid var(--line-strong);background:var(--panel);border-radius:8px;padding:13px 16px;color:var(--muted)}.catalog-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.catalog-search input{min-width:0;width:100%;border:0;background:transparent;outline:none;font-size:13px}.catalog-search input::placeholder{color:var(--muted)}.catalog-filters{display:flex;gap:4px}.catalog-filters button{border:1px solid transparent;border-radius:6px;padding:8px 14px;background:transparent;color:var(--muted);font-size:12px}.catalog-filters button:hover{background:var(--panel)}.catalog-filters button[aria-pressed=true]{background:var(--accent-soft);border-color:#d5cdfa;color:var(--accent)}.catalog-section-heading{display:flex;align-items:center;justify-content:space-between;margin:35px 0 15px}.catalog-section-heading h2{font-size:15px;font-weight:600}.catalog-section-heading>span{font-size:12px;color:var(--muted)}.catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.composition-card{display:flex;align-items:center;gap:18px;border:1px solid var(--line);border-radius:9px;padding:19px;background:var(--panel);transition:border-color .15s}.composition-card:hover{border-color:#bfb4ec}.composition-preview{width:78px;height:78px;border-radius:7px;background:var(--accent-soft);color:var(--accent);display:flex;flex-direction:column;justify-content:space-between;padding:9px;flex:none;overflow:hidden}.composition-number{font-size:10px;font-weight:600;letter-spacing:.5px}.composition-preview svg{width:102px;height:38px}.composition-preview .mini-line{stroke:currentColor;opacity:.3}.composition-preview text{fill:currentColor;font-size:13px;font-family:inherit}.composition-card:nth-child(3n+2) .composition-preview{color:#a57b43;background:#f5efe2}.composition-card:nth-child(3n) .composition-preview{color:#52847d;background:#e9f1ef}.composition-body{flex:1;min-width:0}.composition-body h3{font-size:16px;font-weight:600;letter-spacing:-.3px}.composition-body>p{color:var(--muted);font-size:11px;margin-top:3px}.composition-tags{display:flex;gap:12px;font-size:10px;color:var(--muted);margin-top:14px}.composition-tags span+span::before{content:"·";margin-right:12px}.open-composition{display:flex;align-items:center;gap:8px;flex:none;background:none;border:1px solid var(--line);color:var(--accent);padding:8px 10px;border-radius:6px;font-size:12px}.open-composition:hover{background:var(--accent-soft);border-color:#d5cdfa}.open-composition svg{width:16px;height:16px}.catalog-footnote{color:var(--muted);font-size:11px;margin-top:26px}.empty-state{padding:50px 20px;text-align:center;color:var(--muted)}
dialog{width:490px;max-width:calc(100vw - 32px);border:1px solid var(--line);border-radius:13px;background:var(--panel);color:var(--ink);padding:25px;box-shadow:0 20px 80px #14102333}dialog::backdrop{background:#19152866;backdrop-filter:blur(3px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.dialog-heading h2{font-size:20px;letter-spacing:-.4px}.dialog-intro{color:var(--muted);font-size:12px;margin-top:10px}.shortcuts{display:grid;grid-template-columns:1fr auto;gap:20px;font-size:12px;margin:26px 0}.shortcuts dt{color:var(--muted)}.shortcuts dd{margin:0}.dialog-note{font-size:12px;color:var(--muted);line-height:1.7;border-top:1px solid var(--line);padding-top:16px}.import-illustration{background:var(--bg);border:1px dashed var(--line-strong);border-radius:8px;padding:26px 14px;margin:20px 0;text-align:center}.import-illustration>[data-icon]{display:flex;justify-content:center;color:var(--accent);margin-bottom:14px}.import-illustration strong{display:block}.import-illustration p{font-size:12px;color:var(--muted);line-height:1.8;margin-top:9px}.full-width{width:100%;margin-top:18px}.toast{position:fixed;bottom:94px;left:50%;transform:translate(-50%,10px);max-width:calc(100% - 40px);color:white;background:#292734;border-radius:8px;padding:12px 20px;font-size:13px;opacity:0;pointer-events:none;z-index:20;box-shadow:0 5px 24px #0002;transition:opacity .15s,transform .15s}.toast.show{opacity:1;transform:translate(-50%,0)}
body.dark{--bg:#1b1c25;--panel:#252630;--paper:#292a35;--ink:#eeedf5;--muted:#a6a6b8;--line:#383a48;--line-strong:#525565;--accent:#b4a5ff;--accent-hover:#c7bcff;--accent-soft:#39334e;--danger:#f092a1;color-scheme:dark}body.dark .button-primary,body.dark .play-button{color:#262035}body.dark .note-number.selected{fill:#262035}body.dark .track-mute[aria-pressed=true]{background:#49392f;color:#e4b58c}body.dark .track-item.muted .track-label small{color:#e4b58c}body.dark .composition-card:nth-child(3n+2) .composition-preview{color:#d1b588;background:#3e372b}body.dark .composition-card:nth-child(3n) .composition-preview{color:#91bcb1;background:#2b3c3a}
@media(min-width:1500px){.score-workspace{padding:24px 48px}.score-paper{padding:0 30px}}
@media(max-width:1200px){.app-header{gap:20px;padding:0 18px}.save-status,.tracks-hint{display:none}.header-document{padding-left:20px}.tracks-bar,.edit-toolbar{padding-left:18px;padding-right:18px}.tracks-bar{gap:13px}.track-item{padding:0 10px}.note-dock,.transport{padding-left:22px;padding-right:22px;gap:22px}.input-hint{display:none}.transport-middle,.loop-control{padding-left:22px}}
@media(max-width:1000px){.app-header{gap:18px}.brand{font-size:18px}.main-nav{gap:13px}.header-document{padding-left:16px}.header-document h1{font-size:16px}.header-actions{gap:4px}.document-caption{font-size:10px}.tracks-caption{display:none}.edit-toolbar{gap:10px}.toolbar-end{gap:9px}.zoom-control>span{display:none}.duration-button{min-width:51px;gap:6px}.note-dock{gap:20px}.note-pitch-block{min-width:108px;padding-left:16px}.transport{gap:20px}.transport-middle{gap:16px;padding-left:20px}.loop-control{padding-left:15px;gap:4px}.transport .demo-label{display:none}.composition-card{gap:13px;padding:15px}.composition-preview{width:60px;height:68px}.composition-tags{gap:7px}.composition-tags span+span::before{margin-right:7px}.open-composition>span{display:none}}
@media(max-width:760px){.app-header{flex-basis:64px;gap:14px;padding:0 14px}.brand>span:last-child,.header-document .document-caption,.header-actions #theme-button{display:none}.main-nav{gap:10px}.nav-item{font-size:12px}.header-document{border:0;padding:0}.header-document h1{font-size:15px}.header-actions .button>span:last-child{display:none}.header-actions .button{padding:7px 9px}.tracks-bar{padding:0 10px;flex-basis:59px}.track-item{gap:7px;padding:0 9px}.track-icon{display:none}.track-label strong{font-size:12px}.track-label small{font-size:10px}.edit-toolbar{gap:8px;padding:0 10px}.toolbar-label,.zoom-control,.focus-button>span:last-child{display:none}.toolbar-end{gap:0}.duration-button{min-width:45px;gap:4px}.duration-button small{font-size:10px}.history-tools .icon-button{width:29px}.dot-button{width:25px}.score-workspace,body.focus-mode .score-workspace{padding:12px}.score-paper{padding:0 8px}.paper-heading{padding:0 7px}.paper-track>span:last-child,.paper-tuning .tuning-display{display:none}.paper-footer{font-size:10px;padding-left:5px}.paper-footer>span:last-child{display:none}.note-dock{gap:12px;flex-basis:78px;padding:8px 14px}.selection-info{min-width:116px}.selection-info strong{font-size:12px}.selection-info>span{font-size:10px}.note-pitch-block{display:none}.dock-field select{min-width:115px;font-size:12px}.note-action{font-size:11px;padding:6px 8px;gap:4px}.remove-note>span:not([data-icon]){display:none}.transport{flex-basis:74px;gap:16px;padding:8px 14px}.transport-play{gap:7px}.transport-play>.icon-button{width:27px}.play-button{width:39px;height:39px}.position-readout{min-width:74px;margin-left:2px}.position-readout strong{font-size:17px}.transport-middle{padding-left:15px;gap:12px}.loop-control{margin-left:auto;padding-left:10px}.loop-control>.button{padding:7px;font-size:0;gap:0}.loop-unit,.tempo-unit{display:none}.catalog-view{padding:30px 20px}.catalog-heading h1{font-size:33px}.catalog-heading p{max-width:290px}.catalog-heading>.button{font-size:12px;padding:9px 11px}.catalog-tools{flex-wrap:wrap;gap:12px;margin-top:24px}.catalog-search{flex-basis:100%;max-width:none}.catalog-grid{grid-template-columns:1fr}.composition-preview{width:68px;height:68px}.open-composition>span{display:inline}}
@media(max-width:520px){.app-header{gap:12px}.main-nav{gap:9px}.header-document{margin-left:auto}.header-document h1{max-width:116px;font-size:13px}.header-actions{margin-left:0}#help-button{display:none}.edit-toolbar{gap:5px}.duration-button{min-width:35px}.duration-button small{display:none}.compact-select{gap:5px;font-size:11px}.toolbar-divider{margin:0 2px}.focus-button{padding:6px}.note-dock{flex-wrap:wrap;gap:8px 12px;flex-basis:112px;padding:8px 12px}.selection-info{flex-basis:100%;flex-direction:row;justify-content:space-between}.dock-field{gap:2px}.dock-field>span,.dock-field>label{font-size:10px}.note-action{align-self:flex-end}.transport{flex-wrap:wrap;gap:9px;flex-basis:120px;padding:8px 12px}.transport-middle{margin-left:auto}.loop-control{width:100%;padding:5px 0 0;border-left:0;border-top:1px solid var(--line);gap:10px;justify-content:center}.loop-control>.button{min-height:28px;font-size:12px;gap:6px;padding:2px 7px}.loop-unit{display:inline}.loop-range{gap:10px}body.focus-mode .note-dock{flex-basis:112px}.catalog-heading{flex-direction:column;align-items:flex-start;gap:18px}.catalog-section-heading h2{font-size:13px}.catalog-section-heading>span{font-size:11px}.composition-card{gap:11px;padding:12px}.composition-body h3{font-size:14px}.composition-tags{font-size:9px}.open-composition{padding:8px}.open-composition>span{display:none}.shortcuts{grid-template-columns:1fr;gap:10px}.shortcuts dd{margin-bottom:5px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
body { color: var(--ink); }

@media(max-width:520px){.note-action{font-size:0;gap:0;min-width:34px}}

/* Нотный лист продолжается вниз; используется обычная прокрутка страницы. */
html { scrollbar-gutter: stable; scroll-padding-top: 70px; scroll-padding-bottom: calc(var(--controls-height, 150px) + 24px); }
.app-shell { height: auto; min-height: 100dvh; overflow: visible; }
.app-header { min-height: 64px; }
#editor-view { flex: none; min-height: calc(100dvh - 64px); padding-bottom: calc(var(--controls-height, 150px) + 28px); }
.tracks-bar { min-height: 64px; }
.edit-toolbar { min-height: 52px; position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 6px #19142b05; }
.score-workspace { flex: none; min-height: 0; overflow: visible; overscroll-behavior: auto; scrollbar-gutter: auto; padding-top: 24px; padding-bottom: 24px; }
.score-paper { padding-top: 8px; }
.score-area { padding-top: 20px; }
.score-system { margin-bottom: 28px; }
.score-system { width: 100%; min-width: 0; }
.score-system:last-child { margin-bottom: 10px; }
.tab-line { stroke-width: 1; }
.measure-number { font-size: 13px; }
.beat-number { font-size: 12px; }
.tuning-label { font-size: 14px; }
.note-number { font-size: 20px; }
.note-rhythm { font-size: 22px; }
.paper-track h2 { font-size: 15px; }
.paper-track>span:last-child, .tuning-display, .paper-footer { font-size: 12px; }
.fixed-controls { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; box-shadow: 0 -5px 24px #19142b0a; background: var(--panel); }
.note-dock { min-height: 76px; }
.transport { min-height: 74px; }
.toast { bottom: calc(var(--controls-height, 150px) + 16px); }
.catalog-view { overflow: visible; }
body.focus-mode .app-header { min-height: 50px; }
body.focus-mode #editor-view { min-height: calc(100dvh - 50px); }
body.focus-mode .note-dock { min-height: 70px; }
@media(max-width:760px) {
  .tracks-bar { min-height: 59px; }
  .note-dock { min-height: 78px; }
}
@media(max-width:520px) {
  .note-dock, body.focus-mode .note-dock { min-height: 112px; }
  .transport { min-height: 120px; }
}

/* Просмотр использует общую табулатуру и проигрыватель без ввода нот. */
.viewer-heading, .viewer-toolbar-hint, #edit-mode-button { display: none; }
.viewer-shortcuts { display: none; }
body.viewer-mode .viewer-shortcuts { display: grid; }
body.viewer-mode .editor-shortcuts { display: none; }
body.viewer-mode .viewer-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; max-width: 1156px; margin: 0 auto; padding: 24px 28px 22px; }
.viewer-heading h1 { font-size: 34px; line-height: 1.2; letter-spacing: -1px; font-weight: 650; }
.viewer-heading p { margin-top: 10px; font-size: 13px; color: var(--muted); }
.viewer-heading p>span { margin: 0 8px; }
.practice-action { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.practice-action>.button { min-height: 42px; padding: 9px 16px; color: var(--accent); border-color: #c7bff1; background: var(--panel); }
.practice-action>.button[aria-pressed=true] { background: var(--accent-soft); }
.practice-action>span { color: var(--muted); font-size: 11px; }
body.viewer-mode .history-tools, body.viewer-mode .duration-tools, body.viewer-mode .toolbar-divider, body.viewer-mode .grid-control, body.viewer-mode .note-dock, body.viewer-mode #save-button, body.viewer-mode .save-status, body.viewer-mode .header-document { display: none; }
body.viewer-mode #edit-mode-button { display: inline-flex; }
body.viewer-mode .viewer-toolbar-hint { display: block; color: var(--muted); font-size: 12px; }
body.viewer-mode .edit-toolbar { min-height: 48px; }
body.viewer-mode .paper-heading { height: 49px; }
body.viewer-mode .score-paper { max-width: 1100px; }
body.viewer-mode .score-workspace { padding-top: 22px; }
body.viewer-mode .selection-column { opacity: .8; }
body.viewer-mode .tab-cell.selected-empty { fill: transparent; stroke: transparent; }
body.viewer-mode .tab-cell:hover { fill: var(--accent-soft); stroke: transparent; }
body.viewer-mode .playhead { stroke-width: 2; opacity: 1; }
body.focus-mode .viewer-heading { display: none; }
body.catalog-mode #edit-mode-button { display: none; }
@media(max-width:1000px) { .app-header { gap: 16px; } .main-nav { gap: 12px; } }
@media(max-width:760px) {
  body.viewer-mode .viewer-heading { padding: 24px 18px 20px; align-items: flex-start; }
  .viewer-heading h1 { font-size: 28px; }
  .viewer-heading p { font-size: 11px; }
  .practice-action>span { max-width: 150px; text-align: right; }
  .practice-action>.button { font-size: 11px; padding: 9px; }
  body.viewer-mode .viewer-toolbar-hint { font-size: 11px; }
}
@media(max-width:520px) {
  body.viewer-mode .viewer-heading { flex-direction: column; gap: 18px; }
  .main-nav [data-view=editor] { display: none; }
  .practice-action { align-items: flex-start; }
  .practice-action>span { max-width: none; text-align: left; }
  .viewer-heading h1 { font-size: 29px; }
  .app-header { gap: 9px; } .nav-item { font-size: 11px; }
  body.viewer-mode .viewer-toolbar-hint { max-width: 265px; }
}