:root{color-scheme:light;--ink:#163e57;--muted:#526f82;--line:#cbdfe9;--accent:#91d8f6;--cell:30px;--row:23px;font-family:"Yu Gothic UI","Meiryo",system-ui,sans-serif;font-size:16px;background:#f4f8fa;color:var(--ink)}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,summary{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #357fc0;outline-offset:2px}
main{max-width:1680px;margin:0 auto;padding:20px 24px}.editor{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;min-width:0}.editor.dragover{outline:3px solid #358db8;outline-offset:-3px}.editor-heading{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;gap:16px}h1,h2,p{margin:0}h1{font-size:1.125rem;line-height:1.5;min-width:0;overflow-wrap:anywhere}h2{font-size:1rem;line-height:1.5}.heading-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.heading-actions select{width:200px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 12px;min-height:38px;border:1px solid #bac6ce;background:#fff;color:var(--ink);border-radius:5px;font-size:.875rem;font-weight:600;white-space:nowrap}.button:hover:enabled{background:#edf2f5}.button.primary{background:#216d99;border-color:#216d99;color:#fff}.button.primary:hover:enabled{background:#1c6289}.button.subtle{border-color:transparent;background:transparent}.button.subtle:hover:enabled{background:#edf2f5}.button.danger{color:#a03529;border-color:#e3b7af;background:#fff6f4;white-space:normal}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:10px 20px;background:#f8fafb;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}label{display:flex;align-items:center;gap:7px;font-size:.875rem}.toolbar label{white-space:nowrap}.toolbar input{width:64px}.unit{color:var(--muted)}input,select{padding:7px 8px;min-height:36px;border:1px solid #bfcbd3;border-radius:5px;color:var(--ink);background:#fff}select{max-width:100%}input[type=checkbox]{min-height:0;accent-color:#216d99}.export-actions{display:flex;gap:6px;margin-left:auto}
.roll-viewport{overflow-x:auto;overflow-y:hidden;border-bottom:1px solid var(--line);scrollbar-color:#afbdc7 #eff8fc}.roll{width:max-content;position:relative}.grid-row{display:flex;height:var(--row)}.grid-row.unavailable{--row:16px}.grid-row.header-row{height:28px;background:#e2f4fc}.key{width:84px;min-width:84px;position:sticky;left:0;z-index:3;display:flex;align-items:center;justify-content:flex-end;padding:0 9px;background:#fff;border-bottom:1px solid #d8dee3;border-right:2px solid #526774;font:600 .75rem ui-monospace,Consolas,monospace;user-select:none}.key.black{background:#f0f2f4}.key.black::before{content:"";position:absolute;left:0;top:3px;width:30px;height:17px;background:#22303a;border-radius:0 2px 2px 0}.key.unavailable{color:var(--muted);gap:4px}.key.unavailable.black::before{top:4px;width:14px;height:8px}.key.unavailable::after{content:'×';display:grid;place-items:center;flex:0 0 14px;height:14px;border-radius:2px;background:#fff0d3;color:#775014;font:600 .75rem system-ui,sans-serif}.header-row .key{z-index:6;background:#e2f4fc}
.cell,.step-label{flex:0 0 var(--cell);width:var(--cell);height:var(--row);border:0;border-right:1px solid #cbdfe9;border-bottom:1px solid #e1e7eb;border-radius:0;background:#fff;padding:0;position:relative}.step-label{height:28px;display:grid;place-items:center;font:600 .75rem ui-monospace,Consolas,monospace;background:#e2f4fc;border-bottom:1px solid #9bc9dd}.step-label.selected{background:#216d99;color:#fff}.cell.beat,.step-label.beat{border-left:1px solid #a5b3bf}.cell.bar,.step-label.bar{border-left:2px solid #6d8595}.cell.black{background:#f4f6f8}.cell.unavailable{background:repeating-linear-gradient(135deg,#eceff1,#eceff1 4px,#bcc7ce 4px,#bcc7ce 6px);cursor:default}.cell:disabled{opacity:1}.cell.active{background:var(--accent);box-shadow:inset 0 0 0 1px #48a8d0}.cell.outside{background:repeating-linear-gradient(135deg,#ffd2c9,#ffd2c9 4px,#efb4a8 4px,#efb4a8 6px);box-shadow:inset 0 0 0 1px #d47b6c;cursor:pointer}.cell:hover:not(.unavailable){background:#e1f3fc}.cell.active:hover{background:#70c8ed}.cell:focus-visible,.step-label:focus-visible{outline:2px solid #2675b3;outline-offset:-2px;z-index:2}.cell.playing,.step-label.playing{box-shadow:inset 2px 0 #2974ae,inset -1px 0 #2974ae}.cell.playing::after{content:"";position:absolute;inset:0;background:#2872a51a;pointer-events:none}
.editor-footer{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:8px 16px;font-size:.8125rem;color:var(--muted)}
.settings{border-top:1px solid var(--line);font-size:.875rem}.settings summary{cursor:pointer;padding:10px 20px;color:var(--muted);width:fit-content}.settings-content{padding:4px 20px 20px}.settings-fields{display:flex;flex-wrap:wrap;gap:16px 24px}.settings-fields #interval{width:84px}.filename{display:flex;align-items:center;border:1px solid #bfcbd3;border-radius:5px;overflow:hidden;max-width:100%}.filename input{width:180px;border:0;min-width:0}.filename span{padding:0 10px;font-size:.875rem;color:var(--muted)}.preview-heading{margin:16px 0 8px;color:var(--muted)}#txtPreview{display:block;width:100%;height:140px;resize:vertical;border:1px solid #d4dee5;border-radius:5px;background:#f8fafb;padding:12px;color:#304959;font:.8125rem/1.65 ui-monospace,Consolas,monospace;white-space:pre;tab-size:2}.template-info{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 16px;font-size:.8125rem;color:var(--muted);line-height:1.7;margin-top:16px}.template-info a{color:#216d99;text-underline-offset:3px}
.midi-panel{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding:8px 20px;border-bottom:1px solid var(--line);font-size:.875rem}.midi-panel input[type=number]{width:65px}.midi-panel details{min-width:0}.midi-panel summary{cursor:pointer;padding:8px 0}.midi-panel details[open]{flex-basis:100%;order:1}.track-actions{display:flex;flex-wrap:wrap;gap:8px}.track-list{max-height:180px;overflow:auto;margin:4px 0}.track-option{display:flex;align-items:flex-start;gap:8px;padding:6px 0;font-size:.875rem;overflow-wrap:anywhere}.track-option input{flex-shrink:0;min-height:0;margin-top:4px}
.unsupported-panel{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:8px 20px;background:#fff6f4;border-bottom:1px solid #e9c7be}.warning{color:#8c3528;font-size:.875rem;line-height:1.6}.status{font-size:.8125rem;color:var(--muted);padding:0 20px;line-height:1.7}.status:not(:empty){padding:8px 20px;border-top:1px solid var(--line)}.status.error{color:#a03529}[hidden]{display:none!important}
@media(min-width:1450px){:root{--cell:32px;--row:24px}}
@media(max-width:780px){main{padding:12px}.editor-heading{flex-wrap:wrap;padding:12px;gap:10px}.heading-actions{margin-left:auto}.heading-actions select{width:180px}.toolbar{padding:10px 12px;gap:10px}.editor-footer{padding:8px 12px}.key{width:72px;min-width:72px}.settings-content{padding:4px 12px 12px}.settings summary{padding:10px 12px}.status:not(:empty){padding:8px 12px}}
@media(max-width:480px){main{padding:8px}.heading-actions{width:100%;margin-left:0;flex-wrap:nowrap;gap:4px}.heading-actions select{width:0;flex:1}.toolbar{gap:8px}.toolbar label{font-size:.8125rem}.toolbar #bpm{width:54px}.toolbar #subdivision{width:112px}.toolbar>label:last-of-type{margin-left:auto}.export-actions{margin-left:0}.editor-footer{gap:4px}.settings-fields label{flex-wrap:wrap}.filename{max-width:100%}.filename input{width:160px}}