:root{--bg:#101116;--panel:#181a22;--panel-2:#1f222c;--border:#2b2f3b;--text:#c8cbd4;--text-strong:#f2f4f8;--muted:#7d8496;--accent:#ff5c3a;--accent-soft:#ff5c3a29;--on:#ffb020;--on-strong:#ffd166;--danger:#ff6b6b;--ok:#4ade80;--sans:system-ui, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;--mono:ui-monospace, "SFMono-Regular", Consolas, monospace;font:16px/1.6 var(--sans);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{min-height:100svh;margin:0}h1,h2{color:var(--text-strong);margin:0;font-weight:600}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.4}input,textarea{font:inherit;color:inherit}.muted{color:var(--muted);font-size:14px}.error{color:var(--danger);margin:0;font-size:14px}.input,.textarea{background:var(--panel-2);border:1px solid var(--border);color:var(--text-strong);border-radius:6px;width:100%;padding:8px 10px}.input:focus,.textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}.textarea{font-family:var(--mono);resize:vertical;font-size:13px;line-height:1.6}.button{background:var(--panel-2);border:1px solid var(--border);color:var(--text-strong);border-radius:6px;padding:8px 14px;transition:border-color .15s,background .15s}.button:hover:not(:disabled){border-color:var(--accent)}.button.primary{background:var(--accent);border-color:var(--accent);color:#140603;font-weight:600}.button.ghost{background:0 0}.button.tiny{padding:4px 10px;font-size:13px}.app{max-width:980px;margin:0 auto;padding:0 20px 80px}.app-head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:16px 0;display:flex}.brand{color:var(--text-strong);letter-spacing:.02em;font-weight:600;text-decoration:none}.page{flex-direction:column;gap:24px;padding:24px 0;display:flex}.section-head{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px;display:flex}.section-title{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:15px}.gate{place-items:center;min-height:100svh;padding:20px;display:grid}.gate-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;flex-direction:column;gap:14px;width:320px;max-width:100%;padding:28px;display:flex}.gate-title{font-size:22px}.gate-lead{color:var(--muted);margin:0;font-size:14px}.create-row{gap:8px;display:flex}.create-row .button{white-space:nowrap;flex:none}.project-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.project-item{background:var(--panel);border:1px solid var(--border);border-radius:10px;align-items:stretch;gap:8px;padding:8px 12px;display:flex}.project-open{color:inherit;text-align:left;background:0 0;border:none;flex-direction:column;flex:1;align-items:flex-start;gap:2px;padding:6px 4px;display:flex}.project-name{color:var(--text-strong);font-weight:600}.project-meta{color:var(--muted);font-size:13px}.editor-head{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.editor-title-box{flex:1;align-items:center;gap:10px;min-width:220px;display:flex}.editor-title{font-size:20px}.editor-title-input{max-width:360px;font-size:20px}.pattern-tabs{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.pattern-tab{background:var(--panel);border:1px solid var(--border);border-radius:8px;align-items:center;display:flex;overflow:hidden}.pattern-tab.active{border-color:var(--accent);background:var(--accent-soft)}.pattern-tab-label{color:var(--text);text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:0 0;border:none;max-width:220px;padding:7px 4px 7px 12px;overflow:hidden}.pattern-tab.active .pattern-tab-label{color:var(--accent);font-weight:600}.pattern-tab-delete{color:var(--muted);background:0 0;border:none;padding:7px 10px;line-height:1}.pattern-tab-delete:hover:not(:disabled){color:var(--danger)}.pattern-tab.editing{padding:0 4px}.pattern-tab-input{width:180px;padding:5px 8px}.pattern-tab-add{background:var(--panel-2);border:1px dashed var(--border);color:var(--text-strong);border-radius:8px;padding:7px 12px;line-height:1}.pattern-tab-add:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.tab-error{margin-top:8px}.save-state{align-items:center;gap:10px;display:flex}.save-label{color:var(--muted);text-align:right;min-width:7em;font-size:13px}.save-label.saved{color:var(--ok)}.save-label.error{color:var(--danger)}.transport{background:var(--panel);border:1px solid var(--border);border-radius:10px;flex-wrap:wrap;align-items:center;gap:16px;padding:12px 16px;display:flex}.button.play{min-width:108px;font-weight:600}.button.play.playing{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.bpm{align-items:center;gap:10px;display:flex}.bpm-label{letter-spacing:.08em;color:var(--muted);font-size:13px}.bpm input[type=range]{width:200px;accent-color:var(--accent)}.bpm-number{text-align:center;width:74px;font-family:var(--mono)}.bpm.swing input[type=range]{width:130px}.swing-value{text-align:right;width:46px;font-family:var(--mono);color:var(--text-strong);font-size:13px}.sequencer{background:var(--panel);border:1px solid var(--border);border-radius:10px;flex-direction:column;gap:6px;padding:14px;display:flex;overflow-x:auto}.grid-row{align-items:center;gap:10px;min-width:640px;display:flex}.track-head{width:84px;color:var(--text-strong);text-align:left;font-size:14px;font-family:var(--mono);background:0 0;border:none;flex:none;padding:4px 0}button.track-head:hover{color:var(--accent)}.track-tail{flex:none;justify-content:flex-end;width:64px;display:flex}.grid-steps{flex:1;grid-template-columns:repeat(16,1fr);gap:4px;display:grid}.step{aspect-ratio:1;border:1px solid var(--border);background:var(--panel-2);touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border-radius:5px;padding:0;transition:background 80ms,border-color 80ms;position:relative;overflow:hidden}.step.downbeat{border-color:#3a4052}.step:hover{border-color:var(--accent)}.step.on{border-color:var(--on-strong)}.step-fill{pointer-events:none;gap:2px;display:grid;position:absolute;bottom:2px;left:2px;right:2px}.step-tick{background:var(--on);border-radius:2px}.step.level-1 .step-fill{opacity:.5;height:28%}.step.level-2 .step-fill{height:62%}.step.level-3 .step-fill{height:92%}.step.level-3 .step-tick{background:var(--on-strong);box-shadow:0 0 6px var(--on-strong)}.step.chance{border-style:dashed;border-color:var(--text-strong)}.step.current{box-shadow:inset 0 0 0 2px var(--text-strong)}.step.editing{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.sequencer-hint{margin:-14px 0 0;font-size:13px}.popover-backdrop{z-index:20;position:fixed;inset:0}.step-popover{z-index:21;background:var(--panel);border:1px solid var(--accent);border-radius:10px;flex-direction:column;gap:10px;width:224px;padding:12px;display:flex;position:fixed;transform:translate(-50%);box-shadow:0 10px 30px #00000073}.step-popover-head{color:var(--text-strong);font-size:13px;font-family:var(--mono)}.step-popover-head .muted{margin-left:4px}.step-popover-hint{margin:0;font-size:12px}.step-popover-field{flex-direction:column;gap:6px;display:flex}.step-popover-field input[type=range]{width:100%;accent-color:var(--accent)}.step-popover-choices{gap:6px;display:flex}.step-popover-choices .tag{text-align:center;flex:1}.step-popover-actions{justify-content:space-between;gap:8px;display:flex}.tag.tiny{padding:3px 8px;font-size:12px}.beat-ruler .beat-mark{text-align:center;font-size:11px;font-family:var(--mono);color:var(--muted);height:16px}.beat-ruler .beat-mark.downbeat{color:var(--text-strong)}.beat-ruler .beat-mark.current{color:var(--accent)}.tag-row{flex-wrap:wrap;gap:8px;display:flex}.tag{background:var(--panel-2);border:1px solid var(--border);color:var(--text);font-size:14px;font-family:var(--mono);border-radius:999px;padding:5px 14px}.tag:hover:not(:disabled){border-color:var(--accent)}.tag.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.generate{background:var(--panel);border:1px solid var(--border);border-radius:10px;flex-direction:column;gap:10px;padding:16px;display:flex}.generate-form{flex-wrap:wrap;gap:12px;display:flex}.generate-form .field{flex:1;min-width:220px}.generate-form .generate-instruction{flex:1;min-width:280px}.generate-form .generate-bpm{flex:none;width:200px}.textarea.plain{font-family:inherit;font-size:14px}.generate-actions{flex-wrap:wrap;gap:8px;display:flex}.generate p{margin:0;font-size:13px}.history{background:var(--panel);border:1px solid var(--border);border-radius:10px;flex-direction:column;gap:10px;padding:16px;display:flex}.history p{margin:0;font-size:13px}.history-list{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.history-item{border:1px solid var(--border);width:100%;color:inherit;text-align:left;cursor:pointer;background:0 0;border-radius:8px;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;display:flex}.history-item:hover{border-color:var(--accent)}.history-item.applied{border-color:var(--accent);background:var(--accent-soft)}.history-time{color:var(--muted);align-items:center;gap:8px;font-size:12px;display:flex}.history-badge{letter-spacing:.06em;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:0 6px;font-size:11px}.history-instruction{color:var(--text-strong);text-overflow:ellipsis;white-space:nowrap;width:100%;font-size:14px;display:block;overflow:hidden}.history-meta{color:var(--muted);font-size:12px}.history-toggle{align-self:flex-start}.suno{background:var(--panel);border:1px solid var(--border);border-radius:10px;flex-direction:column;gap:10px;padding:16px;display:flex}.suno .button{align-self:flex-start}.field{flex-direction:column;gap:6px;display:flex}.field-label{color:var(--muted);font-size:13px}.breakdown{color:var(--muted);flex-direction:column;gap:4px;margin:8px 0 0;font-size:13px;display:flex}.breakdown>div{gap:10px;display:flex}.breakdown dt{width:6em;color:var(--text);flex:none}.breakdown dd{font-family:var(--mono);margin:0}.export{background:var(--panel);border:1px solid var(--border);border-radius:10px;flex-direction:column;gap:10px;padding:16px;display:flex}.export p{margin:0;font-size:13px}.export-form{flex-wrap:wrap;align-items:flex-end;gap:12px;display:flex}.export-target{flex:none;width:140px}.export-target .input{font-family:var(--mono);text-align:center}