@charset "UTF-8";
:root{--paper:#f6f5f0;--white:#fffefa;--ink:#263a36;--muted:#7a827a;--line:#e1e4da;--teal:#217764;--teal-light:#e4efe7;--font:"Yu Gothic UI","Meiryo",sans-serif;--serif:"Palatino Linotype","Yu Mincho",serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px var(--font);padding-bottom:100px}button,input,select{font:inherit}button,select,input[type=range]{cursor:pointer}button{border:1px solid transparent;border-radius:7px;min-height:38px;padding:8px 13px;background:transparent;color:var(--ink);font-weight:600;transition:background .15s,transform .15s}button:hover{background:#e9ece3}button:active{transform:translateY(1px)}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #66ab97;outline-offset:3px}.primary{background:var(--teal);color:white}.primary:hover{background:#175e4e}.outline{border-color:#cbd5c9;background:var(--white)}.quiet{font-size:12px;color:#647268}.square{padding:6px;min-width:34px;font-size:20px}.full{width:100%}[hidden]{display:none!important}.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid var(--line);background:var(--white)}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font:700 26px var(--serif);letter-spacing:-1px}.brand-mark{display:grid;place-items:center;background:var(--teal);color:#e1edd1;width:36px;height:36px;border-radius:10px;font:italic 24px var(--serif);letter-spacing:-3px;padding-right:3px}.brand-sub{font:10px var(--font);letter-spacing:2px;margin-left:12px;color:#7c887c}.header-actions{display:flex;align-items:center;gap:16px}.local-badge{font-size:10px;color:var(--muted)}.teal-dot{display:inline-block;width:6px;height:6px;background:var(--teal);border-radius:50%;margin-right:7px}.layout{display:grid;grid-template-columns:246px minmax(0,1fr);max-width:1920px;margin:auto;min-height:calc(100vh - 178px)}.sidebar{padding:30px 22px 24px;border-right:1px solid var(--line);display:flex;flex-direction:column;background:linear-gradient(170deg,#f0f1e9,#f6f5f0)}.sidebar-heading{display:flex;justify-content:space-between;align-items:center}.eyebrow{font-size:10px;letter-spacing:2px;color:#7a8979;font-weight:700}.count{font-size:11px;border:1px solid #d6ddcf;border-radius:5px;padding:3px 6px}h2{font-size:18px;margin:16px 0 8px}.muted{color:var(--muted);font-size:12px}.sidebar-intro{margin:0 0 24px;line-height:1.8}.phrase-list{margin-top:18px;display:flex;flex-direction:column;gap:8px}.phrase-empty{border:1px dashed #cdd5c7;border-radius:8px;padding:25px 13px;color:#899181;text-align:center;font-size:12px;line-height:1.9}.phrase-card{padding:12px;background:#ffffff85;border:1px solid var(--line);border-radius:8px}.phrase-card.selected{border-color:var(--teal);background:var(--teal-light)}.phrase-card button.phrase-select{display:block;text-align:left;width:100%;padding:0;min-height:0}.phrase-card strong{display:block;font-size:13px;overflow-wrap:anywhere}.phrase-card small{display:block;color:var(--muted);margin-top:7px;font-size:10px}.phrase-actions{display:flex;justify-content:flex-end;margin-top:8px;gap:2px}.phrase-actions button{font-size:10px;padding:2px 7px;min-height:24px}.sidebar-bottom{margin-top:auto;padding-top:40px}.tiny-label{font-size:10px;letter-spacing:1px;color:#869180}.sidebar-bottom p{font-size:11px;line-height:2;color:#8a9384;margin:10px 0 24px}.sidebar-bottom button{text-align:left}.workspace{padding:32px 36px 12px;min-width:0;animation:reveal .45s ease-out}.song-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.heading-dot{padding:0 14px;color:#bbc2b2}h1{font:500 clamp(24px,2.5vw,36px) var(--serif);letter-spacing:-.5px;margin:12px 0 9px;overflow-wrap:anywhere}.song-heading p{margin:0}.status{min-height:33px;padding:10px 0;font-size:11px;color:#7d8c7a}.status.error{color:#af4536}.editor{border:1px solid #d8dfd2;border-radius:12px;overflow:hidden;background:var(--white);box-shadow:0 6px 24px #293d3010}.editor-toolbar{min-height:66px;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--line);gap:12px}.track-label{display:flex;align-items:center;gap:12px;min-width:0}select{border:1px solid var(--line);border-radius:6px;background:var(--white);color:var(--ink);padding:8px;max-width:230px}#partSelect{max-width:min(230px,25vw);font-size:12px}.view-tools{display:flex;align-items:center;gap:3px}.active{background:var(--teal-light)!important;color:var(--teal)!important}.divider{width:1px;height:18px;background:var(--line);margin:0 10px}.zoom-label{font-size:10px;min-width:35px;text-align:center;color:var(--muted)}.roll-hint{display:flex;justify-content:space-between;padding:12px 20px;font-size:10px;color:#899382}.hint-separator{padding:0 10px}.roll-viewport{height:360px;overflow:auto;overscroll-behavior-x:contain;background:#fafbf6;position:relative;scrollbar-color:#b9c9b6 #eff2e8;scrollbar-width:thin}.roll-viewport canvas{display:block;touch-action:pan-y}.overview{height:44px;display:flex;align-items:center;gap:16px;padding:0 20px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}input[type=range]{accent-color:var(--teal);height:4px}#seek{flex:1;min-width:0}.range-panel,.practice-panel{display:flex;align-items:center;gap:22px;padding:21px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}.range-caption{display:flex;align-items:center;gap:12px;min-width:205px}.section-index{font:italic 23px var(--serif);color:#9aa78b;align-self:flex-start}h3{font-size:13px;margin:0 0 7px}.range-caption p{margin:0;font-size:11px;color:var(--muted)}.range-fields{display:flex;align-items:center;gap:12px;margin-left:auto}.range-fields label{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:8px}.range-fields input{width:55px;border:1px solid #d8dfd2;border-radius:5px;padding:9px 5px 9px 10px;background:var(--white);color:var(--ink)}.range-arrow{color:#a5af9d}.range-panel>.primary{font-size:11px}.mode-switch{display:flex;background:#e9ede2;border-radius:7px;padding:3px}.mode-switch button{font-size:11px;font-weight:500;min-height:33px;padding:8px 14px}.mode-switch .selected{background:var(--white);box-shadow:0 1px 4px #273b2520;color:var(--teal)}.wait-field{font-size:11px;display:flex;align-items:center;gap:8px}#modeHint{font-size:10px}.workspace-footer{display:flex;justify-content:space-between;gap:12px;font-size:9px;color:#97a08f;padding-top:16px;flex-wrap:wrap}kbd{font:9px var(--font);padding:2px 4px;border:1px solid #d9dfd1;border-radius:3px;margin:0 3px}.transport{position:fixed;bottom:0;left:0;right:0;z-index:5;min-height:90px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 34px;background:#fffefaf5;backdrop-filter:blur(16px);border-top:1px solid #d7dece;box-shadow:0 -3px 25px #283b2b06}.transport-title{display:flex;align-items:center;gap:12px;width:205px;min-width:0}.transport-title strong{font-size:12px;display:block;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.transport-title span:not(.playing-indicator){font-size:10px;color:var(--muted);display:block;margin-top:5px}.playing-indicator{width:10px;height:22px;background:repeating-linear-gradient(to right,#a5b59b 0 2px,transparent 2px 4px);border-radius:1px}.playing-indicator.running{background:repeating-linear-gradient(to right,var(--teal) 0 2px,transparent 2px 4px);animation:pulse .8s infinite alternate}.transport-center{display:flex;align-items:center;gap:14px}.play-button{border-radius:50%;width:50px;height:50px;min-width:50px;background:var(--teal);color:white;font-size:18px;padding:0}.play-button:hover{background:#175e4e}.clock{font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}.clock>span:nth-child(2),.clock>span:last-child{color:#99a18e}.loop-button{font-size:11px;border:1px solid var(--line);white-space:nowrap}.transport-settings{display:flex;align-items:center;gap:24px}.speed-control,.volume-control{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--muted)}.speed-control input{width:85px}.speed-control output{width:35px;color:var(--ink)}.volume-control input{width:55px}dialog{width:min(480px,calc(100vw - 30px));border:1px solid var(--line);border-radius:14px;background:var(--white);color:var(--ink);padding:26px;box-shadow:0 20px 100px #162c3930}dialog::backdrop{background:#1a302d66;backdrop-filter:blur(3px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between}.dialog-heading h2,dialog h2{margin:0 0 10px}.dialog-field{display:flex;flex-direction:column;gap:10px;margin:24px 0;font-size:12px}.dialog-field input{padding:12px;border:1px solid #cad5c2;border-radius:6px;background:white}.dialog-actions{display:flex;justify-content:flex-end;gap:10px}#projectList{max-height:50vh;overflow:auto;margin:20px 0}.project-item{border-top:1px solid var(--line);padding:14px 0;display:flex;gap:8px;align-items:center}.project-item button:first-child{text-align:left;flex:1;overflow-wrap:anywhere}.project-item small{display:block;font-weight:normal;font-size:10px;color:var(--muted);margin-top:7px}.drop-overlay{position:fixed;inset:0;background:#eaf2e6ed;border:5px dashed var(--teal);z-index:50;display:grid;place-items:center;text-align:center;font-size:28px}.drop-overlay span{display:block;font-size:14px;margin-top:20px;color:var(--muted)}@keyframes reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{to{height:12px}}@media(min-width:1450px){.roll-viewport{height:440px}.workspace{padding:40px 48px 16px}}@media(max-width:1150px){.layout{grid-template-columns:205px minmax(0,1fr)}.sidebar{padding:26px 16px}.workspace{padding:26px 22px 12px}.brand-sub{display:none}.transport{padding:14px 22px;gap:12px}.volume-control{display:none}.transport-title{width:160px}.transport-center{gap:9px}.range-fields{margin-left:0}.range-panel>.primary{margin-left:auto}.range-caption{min-width:180px}.practice-panel{gap:14px}.transport-settings{gap:8px}}@media(max-width:780px){body{padding-bottom:136px}.topbar{padding:0 16px;height:65px}.brand{font-size:23px}.header-actions{gap:4px}.local-badge{display:none}.layout{display:flex;flex-direction:column}.workspace{order:0;padding:22px 16px 8px}.sidebar{order:1;border-right:0;border-top:1px solid var(--line);padding:22px 16px}.sidebar-heading{justify-content:flex-start;gap:12px}.sidebar h2{margin-top:8px}.sidebar-intro{margin-bottom:12px}.sidebar>.outline{max-width:300px}.sidebar-bottom{padding-top:18px}.sidebar-bottom>.tiny-label,.sidebar-bottom>p{display:none}.sidebar-bottom button{display:inline-block;width:auto}.phrase-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.song-heading{align-items:flex-start}.song-heading .quiet{font-size:10px;white-space:nowrap;padding:4px}h1{font-size:25px}.editor-toolbar{padding:10px;gap:4px}.track-label{gap:6px}.track-label>.tiny-label{display:none}#partSelect{max-width:36vw}.view-tools .divider{margin:0 3px}.view-tools .quiet{padding:6px;font-size:10px}.view-tools .square{min-width:27px}.roll-hint{padding:10px;font-size:9px}#viewLabel{display:none}.hint-separator{padding:0 4px}.roll-viewport{height:310px}.range-panel,.practice-panel{gap:16px;padding:18px 0}.range-fields{gap:8px;flex-wrap:wrap}.range-fields label{gap:5px}.range-fields input{width:48px}.range-panel>.primary{margin-left:0}.range-caption{min-width:0}.transport{min-height:116px;padding:12px 16px;display:grid;grid-template-columns:1fr auto;gap:8px 10px}.transport-title{width:auto}.transport-center{grid-row:1;grid-column:1/3;justify-content:center}.transport-settings{justify-self:end}.transport-title strong{max-width:150px;font-size:10px}.transport-title span:not(.playing-indicator){font-size:9px}.play-button{height:44px;width:44px;min-width:44px}.speed-control input{width:75px}.workspace-footer{line-height:1.8}.mode-switch button{padding:8px 12px}#modeHint{display:none}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}