:root{font-family:'Yu Gothic UI','Meiryo',system-ui,sans-serif;color:#253247;background:#eef1f4;font-synthesis:none;--navy:#20374c;--accent:#1b7067;--line:#d8dee4;--muted:#738091;--chord:26px;--lyric:14px;--title:28px;--artist:12px}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer;border:1px solid var(--line);background:#fff;color:#344459;border-radius:6px;padding:8px 13px;white-space:nowrap;transition:background .15s,border-color .15s}button:hover{background:#edf4f3;border-color:#9abbb5}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #258d80;outline-offset:2px}input,select,textarea{min-width:0;border:1px solid var(--line);border-radius:5px;padding:8px 9px;background:white;color:#253247}input[type=checkbox]{accent-color:var(--accent)}button.primary{background:var(--accent);border-color:var(--accent);color:white}.primary:hover{background:#12594f}.app-header{height:82px;background:#fff;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 30px;gap:15px}.brand{font-weight:700;display:flex;gap:12px;align-items:center;font-size:19px;letter-spacing:.04em}.brand small{display:block;font-weight:400;font-size:11px;color:var(--muted);letter-spacing:.04em;margin-top:3px}.brand-icon{background:var(--navy);color:#fff;width:38px;height:42px;display:grid;place-items:center;font:30px Georgia;border-radius:9px}.app-header nav{display:flex;gap:8px;font-size:13px}.print-button{margin-left:10px}.app-body{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:calc(100vh - 82px)}.sidebar{background:#fbfcfd;border-right:1px solid var(--line);padding:22px 20px;display:flex;flex-direction:column;gap:20px}.side-tabs{display:flex;border-bottom:1px solid var(--line);margin:0 -3px}.side-tabs button{flex:1;font-size:12px;border:0;border-radius:0;background:transparent;padding:10px 0;color:var(--muted)}.side-tabs button[aria-selected=true]{border-bottom:2px solid var(--accent);color:var(--accent);font-weight:700}.sidebar h2{font-size:13px;color:#34485b;margin:0 0 15px;font-weight:700;letter-spacing:.05em}.sidebar label{display:flex;flex-direction:column;font-size:11px;color:#637185;gap:6px;margin-bottom:14px}.sidebar label span{color:#97a1ad}.sidebar input,.sidebar select,.sidebar textarea{width:100%;font-size:13px}.sidebar textarea{resize:vertical}.form-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.sidebar .check-label{flex-direction:row;align-items:center;gap:8px;margin:15px 0}.sidebar .check-label input{width:14px;height:14px}.side-rule{height:1px;background:var(--line);margin:20px 0}.field-note{color:#8b95a1;font-size:10px;line-height:1.8;margin:8px 0}.wide{width:100%;font-size:12px;margin-bottom:9px}.text-button{border-color:transparent;background:transparent;color:var(--accent);font-size:12px}.danger{color:#b04e43}.local-note{margin-top:auto;color:#7c8895;font-size:10px;padding-top:25px}.local-note span{color:#4c9b83;font-size:8px;margin-right:5px}.local-note small{display:block;margin:6px 0 0 15px;font-size:10px}.bar-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.bar-nav h2{margin:0}.bar-nav button{padding:3px 10px}.workspace{min-width:0;padding-bottom:45px}.toolbar{position:sticky;top:0;z-index:5;background:#f8fafbeF;backdrop-filter:blur(8px);border-bottom:1px solid var(--line);min-height:66px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:12px 27px;font-size:12px}.transpose-tools,.edit-tools{display:flex;align-items:center;gap:7px}.toolbar-label{color:#738091;font-size:11px;margin-right:5px}.toolbar button{padding:6px 10px}.toolbar select{padding:6px 7px;max-width:120px}.shift-info{color:#8b95a1;font-size:10px}.workspace-info{max-width:884px;display:flex;justify-content:space-between;align-items:center;margin:22px auto 13px;padding:0 20px;font-size:10px;color:#8a95a2;gap:10px}.workspace-info p{margin:0;color:#66778a;font-weight:600}.workspace-info span{text-align:right}#paperArea{padding:0 24px;overflow-x:auto}.paper{width:794px;min-height:1123px;height:auto;background:#fff;margin:0 auto 25px;padding:43px 44px 42px;box-shadow:0 3px 20px #2237470c;border:1px solid #e0e4e8;position:relative;display:flex;flex-direction:column;color:#20252b}.paper-header{border-bottom:1.5px solid #273c4e;padding-bottom:13px;margin-bottom:15px}.score-title{display:block;border:0;border-radius:0;background:transparent;font:bold var(--title) Arial,'Meiryo',sans-serif;color:#1b2531;width:100%;padding:0;min-height:1.25em;overflow-wrap:anywhere;white-space:pre-wrap;line-height:1.25}.score-title:focus{outline:none;background:#f3f8f7;box-shadow:0 2px #70a99d}.score-meta{display:flex;justify-content:space-between;align-items:end;gap:15px;margin-top:8px}.score-artist{font:var(--artist) Arial,'Meiryo',sans-serif;flex:1;min-width:0;border:0;background:transparent;padding:0;border-radius:0;white-space:pre-wrap;overflow-wrap:anywhere}.meta-right{font:11px Arial,sans-serif;white-space:nowrap;color:#4d5b68}.paper-body{flex:1}.system{margin-bottom:8px;break-inside:avoid}.bar-labels,.chord-row,.lyric-row,.annotation-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.bar-label{display:flex;align-items:center;justify-content:space-between;min-height:14px;gap:2px;padding:0 4px;color:#536273;font-size:9px}.bar-label .number{border:0;background:none;color:#99a3ad;border-radius:3px;padding:1px 3px;font:9px Arial}.bar-label .number:hover{background:#dbede8;color:#1b7067}.bar-label .section{font-weight:700;color:#324b5e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bar-label .mark{font-size:9px;color:#405367;white-space:nowrap}.measure{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #72818d;border-right:0;position:relative;min-height:32px}.measure:last-child{border-right:1px solid #72818d}.measure.selected{box-shadow:0 0 0 2px #258d80;z-index:1}.slot{display:block;width:100%;font-family:Arial,'Meiryo',sans-serif;font-size:var(--chord);text-align:center;padding:2px 1px;background:#fff8e1;border:0;border-right:1px solid #d0cec0;border-radius:0;line-height:1.15;min-height:30px;color:#171f26}.slot:last-child{border-right:0}.slot:focus{position:relative;z-index:2;outline:2px solid #208378;outline-offset:-2px;background:#fffdf3}.slot.none{font-style:italic;color:#90969b}.measure.none-measure{background:white;border:0;border-bottom:1px solid #bbb;border-top:1px solid #bbb}.none-measure .slot{background:white;border:0}.measure.blank-measure{visibility:hidden}.measure.repeat-start{border-left:4px double #273c4e}.measure.repeat-start:before{content:'𝄆';position:absolute;left:-2px;bottom:-1px;font-size:21px;z-index:2;pointer-events:none}.measure.repeat-start .slot:first-of-type{padding-left:9px}.measure.repeat-end{border-right:4px double #273c4e}.measure.final{border-right:4px double #273c4e}.measure.repeat-end:after{content:'𝄇';position:absolute;right:-2px;bottom:-1px;font-size:21px;z-index:2;pointer-events:none}.measure.ending:after{content:attr(data-ending);position:absolute;left:2px;right:2px;top:-8px;height:9px;border-top:1px solid #273c4e;border-left:1px solid #273c4e;font-size:8px;padding-left:3px;pointer-events:none}.lyric-row{min-height:9px;align-items:stretch}.score-lyrics{background:#f5f9fc;white-space:pre-wrap;overflow-wrap:anywhere;font:var(--lyric)/1.3 Arial,'Meiryo',sans-serif;margin:0;padding:2px 3px;min-height:1.3em;border:0;outline-offset:-2px}.score-lyrics:focus{outline:2px solid #79aaa1;background:#f3f8f7}.annotation-row span{font:9px/1.4 Arial,'Meiryo',sans-serif;color:#72808d;padding:2px 3px;overflow-wrap:anywhere;white-space:pre-wrap}.paper-footer{font-size:10px;color:#8a95a0;text-align:center;padding-top:18px}.append-area{display:flex;align-items:center;justify-content:center;gap:15px;font-size:11px;color:#8a95a2;margin-top:10px}.append-area button{background:transparent;border:1px dashed #b1bfc9;font-size:12px;color:#547083}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#20374c;color:white;box-shadow:0 5px 20px #0002;border-radius:8px;max-width:min(650px,90vw);padding:13px 22px;z-index:40;font-size:13px;line-height:1.6}#toast.error{background:#9c4137}dialog{width:min(640px,90vw);max-height:85vh;border:0;border-radius:12px;padding:26px;color:#33465a;box-shadow:0 15px 80px #0004;font-size:13px;line-height:1.9}dialog::backdrop{background:#20374c66}.dialog-heading{display:flex;justify-content:space-between;align-items:center}.dialog-heading h2{font-size:18px;margin:0}.dialog-heading button{border:0;font-size:23px;padding:0 8px}dialog h3{font-size:14px;margin-top:22px}dialog ol{padding-left:23px}dialog li{margin-bottom:7px}body.monochrome .slot,body.monochrome .score-lyrics{background:#fff}body.reading .sidebar{display:none}body.reading .app-body{grid-template-columns:1fr}body.reading .bar-label .number{visibility:hidden}body.reading .slot,body.reading .score-lyrics{background:white}body.reading .measure.selected{box-shadow:none}body.reading .append-area{display:none}body.reading #modeHint{visibility:hidden}body.reading #preview{background:#e1eee9;color:#176455;border-color:#a5c9bc}[hidden]{display:none!important}
@media(max-width:1200px){.toolbar{padding:12px 18px}.shift-info{display:none}.workspace-info{font-size:9px}.app-header{padding:0 20px}.app-body{grid-template-columns:224px minmax(0,1fr)}.sidebar{padding:18px 15px}}
@media(max-width:760px){.app-header{height:auto;min-height:100px;padding:14px 16px;flex-wrap:wrap}.brand{font-size:17px}.brand small{display:none}.app-header nav{font-size:12px;width:100%;justify-content:end}.app-header nav button{padding:6px 11px}.app-body{display:flex;flex-direction:column}.sidebar{border-right:0;border-bottom:1px solid var(--line);padding:12px 18px}.sidebar section{display:grid;grid-template-columns:1fr 1fr;gap:0 15px}.sidebar section h2,.sidebar section .side-rule,.sidebar section .field-note{grid-column:1/-1}.sidebar section .side-rule{margin:10px 0}.sidebar .form-pair{gap:10px}.sidebar .local-note{display:none}.bar-nav{grid-column:1/-1}#helpButton{width:100%}.toolbar{position:relative;padding:12px;justify-content:center;font-size:11px;gap:9px}.toolbar-label{display:none}.toolbar .text-button{padding:6px}.edit-tools{gap:5px}.workspace-info{margin-top:15px}.workspace-info span{display:none}#paperArea{padding:0 12px}.paper{margin-left:0}.append-area{margin:15px}.sidebar .wide{align-self:start}body.reading .paper{margin-left:auto}.print-button{margin-left:0}}
@page{size:A4 portrait;margin:0}
@media print{html,body{background:white!important;min-width:0!important;margin:0!important;padding:0!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.app-header,.sidebar,.toolbar,.workspace-info,.append-area,#toast,dialog{display:none!important}.app-body,.workspace{display:block!important;margin:0!important;padding:0!important}#paperArea{display:block!important;margin:0!important;padding:0!important;overflow:visible!important}.paper{width:210mm!important;height:297mm!important;min-height:297mm!important;max-height:297mm!important;box-shadow:none!important;border:0!important;margin:0!important;padding:11.4mm 11.6mm 11.1mm!important;break-after:page;break-inside:avoid;overflow:hidden}.paper:last-child{break-after:auto}.measure.selected{box-shadow:none!important}.bar-label .number{visibility:hidden!important}.slot{outline:0!important}.score-title:focus,.score-lyrics:focus{outline:0;box-shadow:none}.score-title,.score-artist,.score-lyrics{background:transparent!important}.paper-footer{padding-top:12px}}
.none-measure+.measure{border-left-color:transparent}

/* Display a chord across following empty slots, retaining all four input targets. */
.slot{grid-row:1;position:relative;z-index:1}
.slot[data-span="2"],.slot[data-span="3"],.slot[data-span="4"]{text-align:left;padding-left:6px}
.slot.span-to-end{border-right:0}
.slot.covered{z-index:3;background:transparent!important;border-right:0;color:transparent}
.slot:focus{z-index:2}
body.reading .slot.covered{pointer-events:none}
@media print{.slot.covered{visibility:hidden}}

/* Lyrics use the same empty-slot display behavior, one editable target per measure. */
.score-lyrics{grid-row:1;position:relative;z-index:1;min-width:0}
.score-lyrics.covered{z-index:3;background:transparent!important;color:transparent}
.score-lyrics.none{font-style:italic;color:#90969b}
.score-lyrics:focus{z-index:2}
body.reading .score-lyrics.covered{pointer-events:none}
@media print{.score-lyrics.covered{visibility:hidden}}

/* Fixed row counts define pages; scale their contents to fit A4 without extra breaks. */
.measure,.measure.none-measure{border-top:0}
.paper{height:1123px;overflow:hidden}
.paper-content{display:flow-root;flex:none;transform-origin:top left}
.paper-footer{position:absolute;left:44px;right:44px;bottom:42px;padding-top:0}
@media print{.paper-footer{left:11.6mm;right:11.6mm;bottom:11.1mm;padding-top:0}}

/* Draw full-height repeat barlines and large centered dots without font glyphs. */
.measure.repeat-start{border-left:0}
.measure.repeat-end{border-right:0}
.measure.repeat-start::before,.measure.repeat-end:not(.ending)::after{content:none}
.repeat-sign{--dot-size:clamp(6px,calc(var(--chord)*.22),8px);position:absolute;top:0;bottom:0;width:22px;color:#171f26;z-index:4;pointer-events:none}
.repeat-sign-start{left:0;background:linear-gradient(currentColor,currentColor) left top/4px 100% no-repeat,linear-gradient(currentColor,currentColor) 8px top/1.5px 100% no-repeat}
.repeat-sign-end{right:0;background:linear-gradient(currentColor,currentColor) right top/4px 100% no-repeat,linear-gradient(currentColor,currentColor) right 8px top/1.5px 100% no-repeat}
.repeat-dot{position:absolute;display:block;width:var(--dot-size);height:var(--dot-size);border-radius:50%;background:currentColor;top:calc(50% - var(--dot-size) - 3px)}
.repeat-dot+ .repeat-dot{top:calc(50% + 3px)}
.repeat-sign-start .repeat-dot{left:13px}
.repeat-sign-end .repeat-dot{right:13px}
.measure.repeat-start .slot[data-slot="0"]{padding-left:24px}
.measure.repeat-end .slot.span-to-end{padding-right:24px}

/* Give navigation marks and endings a dedicated, legible band above the chords. */
#startMark,#endMark,#startMark option,#endMark option{font-size:18px;line-height:1.5}
#startMark,#endMark{padding:9px 10px;min-height:44px;color:#171f26}
.mark-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
.measure-marks{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:3px 6px;min-width:0;padding:0 5px 4px;color:#171f26}
.measure-marks.has-mark{min-height:38px}
.performance-mark{font:700 18px/1.25 Arial,'Meiryo',sans-serif;white-space:normal;overflow-wrap:anywhere}
.performance-mark.end-mark{margin-left:auto;text-align:right}
.navigation-symbol{display:block;width:32px;height:36px;flex-shrink:0}
.measure-marks.ending-mark{border-top:2px solid #171f26;border-left:2px solid #171f26;padding-top:3px;padding-left:6px}
.measure.ending::after{content:none}

/* Keep the desktop editor alongside the score, with its own vertical scroll area. */
@media screen and (min-width:761px){
  .app-header{position:sticky;top:0;z-index:20}
  .sidebar{position:sticky;top:82px;align-self:start;height:calc(100vh - 82px);height:calc(100dvh - 82px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
  .sidebar>*{flex-shrink:0}
  .toolbar{top:82px}
}

/* Fit one page or a two-page spread to the available score area. */
@media screen{
  html{scrollbar-gutter:stable}
  #paperArea{display:grid;grid-template-columns:var(--page-width,794px);justify-content:center;align-items:start;gap:24px 20px}
  #paperArea[data-page-view="spread"]{grid-template-columns:repeat(2,var(--page-width,794px))}
  .page-frame{position:relative;width:var(--page-width,794px);height:var(--page-height,1123px);min-width:0;overflow:hidden;overflow:clip;box-shadow:0 3px 20px #2237470c}
  .page-frame>.paper{position:absolute;left:0;top:0;margin:0;box-shadow:none;transform:scale(var(--page-zoom,1));transform-origin:top left}
  #pageView{max-width:142px}
}
@media print{.page-frame{display:contents!important}}

.edit-tools{flex-wrap:wrap;justify-content:flex-end;min-width:0;margin-left:auto}
.zoom-tools{display:flex;align-items:center;gap:3px;white-space:nowrap}
.zoom-tools button{padding:6px 9px}
.zoom-tools select{width:122px;max-width:122px}
.zoom-tools output{min-width:30px;color:#738091;font-size:10px;text-align:right}
@media screen{#paperArea[data-overflow="true"]{justify-content:start}}