: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{flex:1;font-size:20px}.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)}.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);border-radius:5px;padding:0;transition:background 80ms,border-color 80ms}.step.downbeat{border-color:#3a4052}.step:hover{border-color:var(--accent)}.step.on{background:var(--on);border-color:var(--on-strong)}.step.current{box-shadow:inset 0 0 0 2px var(--text-strong)}.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)}.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}