:root{color:#e7e9ed;background:#111317;font-family:Yu Gothic UI,Noto Sans JP,sans-serif;font-synthesis:none}*{box-sizing:border-box}html,body,#app{height:100%}body{margin:0;min-width:760px;overflow:hidden}#app{display:flex;flex-direction:column;min-height:0}button,textarea,select,input{font:inherit}button,.file-button{color:#dfe3e9;background:#292d35;border:1px solid #424955;border-radius:4px;padding:6px 10px;cursor:pointer}button:hover,.file-button:hover{background:#343a45}button.active{color:#fff;border-color:#65a7ff;background:#244d78}.app-header{flex:0 0 62px;height:62px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 16px;border-bottom:1px solid #30343c;background:#191c21}.app-header>div{display:flex;flex:0 0 auto;align-items:baseline;gap:12px}.title-input{width:min(260px,22vw);color:#f0f2f5;background:#111419;border:1px solid #3d444f;border-radius:4px;padding:6px 8px}.title-input:focus{outline:1px solid #65a7ff;border-color:#65a7ff}h1,h2{margin:0;font-weight:600}h1{font-size:19px;white-space:nowrap}h2{font-size:16px}.variant-badge{padding:2px 6px;border:1px solid #46505d;border-radius:10px;color:#aeb8c5;font-size:10px;white-space:nowrap}.save-status{color:#959daa;font-size:12px;white-space:nowrap}.toolbar,.grid-controls,.midi-panel{display:flex;align-items:center;gap:7px}.toolbar{min-width:0;overflow-x:auto}.toolbar button,.toolbar .file-button{flex:0 0 auto;padding:6px 8px;white-space:nowrap;font-size:12px}.file-button input{display:none}.midi-panel{flex:0 0 auto;padding:8px 16px;background:#21252c;border-bottom:1px solid #353a43;flex-wrap:wrap}.project-message{flex:0 0 30px;height:30px;overflow:hidden;padding:5px 16px;color:#b9d7b9;background:#1d3024;border-bottom:1px solid #36513d;font-size:13px;line-height:19px;white-space:nowrap}.project-message.error{color:#ffabab;background:#3a2023;border-color:#62353a}.project-message.empty{color:transparent;background:#171a1f;border-color:#30343c}.midi-panel select{margin-left:7px;color:#eee;background:#171a1f;border:1px solid #444b56;padding:5px}.warning{color:#ffd27a}.error{color:#ff8d8d}main{flex:1 1 auto;height:auto;min-height:0;display:grid;grid-template-rows:minmax(260px,45%) minmax(0,1fr);gap:10px;padding:10px}.editors{display:grid;grid-template-columns:minmax(280px,1fr) minmax(340px,1.15fr);gap:10px;min-height:0}.left-column{display:flex;flex-direction:column;min-height:0}.tabs{display:flex;gap:4px;height:35px}.editor-pane{display:flex;flex-direction:column;min-height:0;height:100%}.left-column .editor-pane{height:calc(100% - 35px)}.editor-label{display:flex;align-items:center;gap:6px;color:#bbc1ca;height:27px;font-size:13px;padding:2px}.help-button{display:inline-grid;place-items:center;width:20px;height:20px;padding:0;border-radius:50%;color:#cbd4df;font-size:12px;line-height:1}textarea{flex:1;min-height:0;resize:none;padding:10px 12px;border:1px solid #343a43;border-radius:5px;outline:none;color:#f1f2f4;background:#171a1f;line-height:1.55;overflow-wrap:anywhere;word-break:break-all;white-space:pre-wrap;overflow-x:hidden}textarea:focus{border-color:#5f9ce4;box-shadow:0 0 0 1px #5f9ce4}.issues{max-height:72px;overflow:auto;padding:5px 8px;color:#ffabab;background:#3a2023;font-size:12px}.melody-panel{min-height:0;display:flex;flex-direction:column;padding:10px;border:1px solid #343a43;border-radius:6px;background:#181b20}.melody-header{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:7px}.melody-header>div:first-child{display:flex;align-items:baseline;gap:12px;font-size:13px}.segmented{display:flex}.segmented button{border-radius:0}.segmented button:first-child{border-radius:4px 0 0 4px}.segmented button:last-child{border-radius:0 4px 4px 0}.legend{display:flex;gap:4px;margin:0 0 5px 44px;font-size:11px}.legend span{min-width:24px;padding:1px 5px;text-align:center;border-radius:3px;color:#fff}.grid-scroll{min-height:0;overflow:auto;padding-right:4px}.section-break{position:relative;height:12px;margin:2px 0 4px 43px;border-top:3px solid #e5a84b}.section-break span{position:absolute;top:-9px;right:6px;padding:0 5px;color:#f2c778;background:#181b20;font-size:10px}.measure-row{display:grid;grid-template-columns:38px minmax(0,1fr);gap:5px;margin-bottom:5px}.measure-label{display:flex;align-items:center;justify-content:flex-end;padding-right:5px;color:#7f8793;font:12px Consolas,monospace}.grid-row{display:grid;grid-template-columns:repeat(var(--grid-columns),minmax(30px,1fr));min-width:calc(var(--grid-columns) * 31px)}.grid-cell{height:38px;min-width:0;padding:1px;border:1px solid #3b414b;border-radius:0;overflow:hidden;color:#f7f7f8;background:#282d35;font-size:14px;white-space:nowrap;text-overflow:ellipsis}.grid-cell.disabled{color:#59606b;background:repeating-linear-gradient(135deg,#17191d,#17191d 5px,#1e2126 5px 10px)}.grid-cell.beat-start{border-left:2px solid #737c89}.grid-cell.measure-start{border-left:3px solid #c0c6ce}.grid-cell.active{outline:3px solid #fff;outline-offset:-3px;z-index:1}.grid-cell.vowel-a,.vowel-a{background:#8d3d45}.grid-cell.vowel-i,.vowel-i{background:#326b91}.grid-cell.vowel-u,.vowel-u{background:#477347}.grid-cell.vowel-e,.vowel-e{background:#8a682e}.grid-cell.vowel-o,.vowel-o{background:#694a8f}.grid-cell.special-placeholder,.special-placeholder{background:#087f85;color:#fff}.grid-cell.special-breath,.special-breath{background:#8a356f;color:#fff}.grid-cell.particle-conversion{box-shadow:inset 0 -4px #ffda45}.legend .particle-conversion{border-bottom:4px solid #ffda45}.modal-backdrop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;background:#040609c2}.synth-modal,.help-modal,.ai-modal{display:flex;flex-direction:column;width:min(760px,90vw);max-height:80vh;padding:16px;border:1px solid #596270;border-radius:7px;background:#1b1f25;box-shadow:0 18px 60px #000b}.ai-modal{width:min(980px,94vw);max-height:90vh}.ai-content{overflow:auto;margin-top:10px;padding-right:8px;color:#cbd0d8;font-size:13px}.ai-note{margin:0 0 10px;color:#aeb5bf}.ai-section{padding:10px;margin-bottom:10px;border:1px solid #343a43;border-radius:5px;background:#171a1f}.ai-section h3{margin:0 0 8px;color:#edf0f4;font-size:14px}.ai-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}.ai-content label{display:flex;flex-direction:column;gap:4px;color:#bfc5ce}.ai-content input,.ai-content select{min-width:0;padding:6px 8px;color:#f1f2f4;background:#111419;border:1px solid #3d444f;border-radius:4px}.ai-content textarea{min-height:58px;flex:none;resize:vertical}.ai-wide-field{margin-top:9px}.ai-settings-row{display:grid;grid-template-columns:minmax(260px,2fr) minmax(160px,1fr) 95px 85px;gap:9px}.ai-error{padding:8px 10px;color:#ffabab;background:#3a2023;border-radius:4px}.ai-payload{margin:10px 0}.ai-payload summary{cursor:pointer;color:#b9d5ff}.ai-payload pre{max-height:260px;overflow:auto;padding:10px;color:#d7dce3;background:#101216;border-radius:4px;white-space:pre-wrap}.ai-actions{display:flex;align-items:center;gap:8px;min-height:36px}.ai-actions .primary{border-color:#65a7ff;background:#244d78}button:disabled{cursor:not-allowed;opacity:.5}.ai-candidates{display:grid;gap:8px;margin-top:10px}.ai-candidate{padding:10px;border:1px solid #405064;border-radius:5px;background:#171d25}.ai-candidate.invalid{border-color:#6b3c42;background:#27191c}.ai-candidate>div{display:flex;align-items:baseline;gap:14px}.candidate-line{color:#fff;font-size:16px}.ai-candidate p{margin:6px 0}.ai-candidate small{color:#9da6b2}.ai-candidate ul{margin:7px 0;color:#ffabab}.ai-candidate button{float:right;margin-top:-4px}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.synth-modal p{margin:10px 0 7px;color:#aeb5bf;font-size:13px}.synth-output{min-height:180px;cursor:copy}.copy-status{min-height:24px;padding-top:6px;color:#a9d8b2;font-size:12px}.help-content{overflow:auto;margin-top:10px;padding-right:8px;color:#cbd0d8;font-size:13px;line-height:1.65}.help-content h3{margin:16px 0 5px;color:#edf0f4;font-size:14px}.help-content p{margin:7px 0}.help-content pre{margin:7px 0;padding:9px 11px;border-radius:4px;background:#111419;color:#e9edf2}.help-content code{color:#f0d58b;font-family:Consolas,monospace}.help-content dl{display:grid;grid-template-columns:max-content 1fr;gap:5px 14px;margin:7px 0}.help-content dt{color:#edf0f4}.help-content dd{margin:0}.help-content ul{margin:6px 0;padding-left:22px}@media(max-width:1000px){.app-header{flex-basis:auto;height:auto;align-items:flex-start}.toolbar{flex-wrap:wrap;justify-content:flex-end}main{height:auto;min-height:0;grid-template-rows:minmax(260px,45%) minmax(0,1fr)}.ai-settings-row{grid-template-columns:1fr 1fr}}
