.viewer{--bg:#1e1e20;--panel:#2a2a2d;--panel-2:#323236;--lane:#262628;--lane-alt:#232325;--line:#3a3a3e;--line-strong:#4a4a50;--text:#dcdcdc;--muted:#8d8d93;--accent:#f0b84a;--select:#3d4f66;--added:#4cd964;--removed:#ff5f57;--changed:#fc3;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);background:var(--bg);border-radius:8px;flex-direction:column;font:12px/1.35 -apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;display:flex;overflow:hidden}.viewer button{background:var(--panel-2);color:var(--text);border:1px solid var(--line-strong);cursor:pointer;font:inherit;border-radius:4px;padding:2px 10px}.viewer .muted{color:var(--muted)}.viewer .small{font-size:11px}.viewer .ellipsis{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.arrange{background:var(--lane);flex:1;position:relative;overflow:auto}.arrange-inner{position:relative}.arrange-head{z-index:3;position:sticky;top:0}.ruler-row{height:34px;display:flex}.marker-row{height:18px;display:flex}.marker-corner{text-transform:uppercase;padding:2px 8px;font-size:10px}.marker-lane{background:#1b1b1d;border-bottom:1px solid #111;flex-shrink:0;position:relative}.marker{color:#111;white-space:nowrap;text-overflow:ellipsis;border-left:2px solid #fff;border-radius:0 3px 3px 0;padding:0 5px;font-size:10px;font-weight:600;line-height:15px;position:absolute;top:1px;bottom:1px;overflow:hidden}.marker-0{background:#c9a2e8}.marker-1{background:#8fd1c8}.marker-2{background:#e8c27a}.marker-3{background:#9fb7ef}.corner{z-index:4;background:var(--panel);color:var(--muted);border-bottom:1px solid #111;border-right:1px solid #111;flex-shrink:0;padding:10px 8px;position:sticky;left:0}.ruler{background:var(--panel-2);border-bottom:1px solid #111;flex-shrink:0;position:relative}.ruler-bar{border-left:1px solid var(--line-strong);position:absolute;top:0;bottom:0}.bar-num{color:var(--text);position:absolute;bottom:2px;left:3px}.sig-marker{color:var(--accent);font-size:10px;position:absolute;top:1px;left:3px}.beat-tick{border-left:1px solid var(--line-strong);height:6px;position:absolute;bottom:0}.tempo-marker{color:#9fd4ff;white-space:nowrap;font-size:10px;position:absolute;top:1px;transform:translate(26px)}.track-row{border-bottom:1px solid #1a1a1a;height:56px;display:flex}.track-row:nth-child(odd) .lane{background:var(--lane-alt)}.track-header{z-index:2;background:var(--panel);cursor:pointer;border-left:4px solid;border-right:1px solid #111;flex-shrink:0;padding:6px 8px;position:sticky;left:0}.track-row.selected .track-header{background:var(--select)}.track-name{margin-bottom:4px;font-weight:600}.track-sub{align-items:center;gap:6px;display:flex}.badge{text-transform:uppercase;color:#fff;background:#555;border-radius:3px;padding:1px 5px;font-size:9px}.kind-instrument{background:#2f7d4f}.kind-audio{background:#2f5d9d}.kind-aux{background:#7d5a2f}.kind-midi{background:#6d2f7d}.lane{flex-shrink:0;position:relative}.bar-line{border-left:1px solid var(--line);pointer-events:none;position:absolute;top:0;bottom:0}.region{cursor:pointer;background:color-mix(in srgb, var(--region-color) 55%, #1a1a1a);border:1px solid color-mix(in srgb, var(--region-color) 80%, #fff);border-radius:4px;position:absolute;top:3px;bottom:3px;overflow:hidden}.region.selected{outline-offset:-1px;outline:2px solid #fff}.region-name{background:color-mix(in srgb, var(--region-color) 85%, #000);color:#111;white-space:nowrap;text-overflow:ellipsis;padding:0 4px;font-size:11px;font-weight:600;overflow:hidden}.region-audio{background:#284665;border-color:#7fb4e8}.region-audio .region-name{background:#7fb4e8}.region-sub{color:#cfe3f7;white-space:nowrap;text-overflow:ellipsis;padding:0 4px;font-size:10px;overflow:hidden}.audio-wave{background:linear-gradient(#0000 calc(50% - .5px),#cfe3f799 calc(50% - .5px) calc(50% + .5px),#0000 calc(50% + .5px)),repeating-linear-gradient(90deg,#cfe3f740 0 1px,#0000 1px 4px);position:absolute;inset:32px 0 3px}.mini-roll{width:100%;height:calc(100% - 20px);position:absolute;inset:18px 0 2px}.mini-roll line{stroke:#f4f4f4;stroke-width:2px}.piano-roll{background:var(--panel);border-top:2px solid #111;flex-direction:column;flex-shrink:0;height:380px;display:flex}.piano-roll.pr-audio{height:auto}.pr-header{border-bottom:1px solid #111;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:4px 10px;display:flex}.pr-header button{margin-left:auto}.pr-empty{padding:20px}.pr-body{flex:1;position:relative;overflow:auto}.pr-canvas{position:relative}.pr-keys{z-index:2;background:#ddd;position:sticky;left:0}.pr-key{color:#333;border-bottom:1px solid #aaa;align-items:center;padding-left:4px;font-size:9px;display:flex}.pr-key.black{color:#aaa;background:#222}.pr-grid{background:var(--lane);position:absolute;top:0}.pr-row{border-bottom:1px solid #2c2c2f;position:absolute;left:0;right:0}.pr-row.black{background:#1f1f21}.pr-vline{border-left:1px solid #333;position:absolute;top:0;bottom:0}.pr-vline.bar{border-left-color:#555}.pr-barnum{color:var(--muted);font-size:9px;position:absolute;top:0;left:2px}.pr-note{background:var(--region-color);border:1px solid #0009;border-radius:2px;position:absolute}.pr-lanes{z-index:1;position:sticky;bottom:0}.pr-vel,.pr-ctrl{background:#1a1a1c;border-top:1px solid #111;position:relative}.pr-lane-label{background:var(--panel);height:100%;color:var(--muted);z-index:1;padding:4px 2px;font-size:10px;position:sticky;left:0}.pr-vel-bar{background:var(--region-color);width:3px;position:absolute;bottom:2px}.pr-ctrl-select{background:var(--panel-2);width:52px;color:var(--text);border:1px solid var(--line-strong);font-size:10px}.pr-ctrl-svg{position:absolute;top:0}.ctrl-center{stroke:#444;stroke-dasharray:2 3}.ctrl-step{fill:none;stroke:var(--region-color);stroke-width:1.5px;opacity:.8}.ctrl-point line{stroke:var(--region-color);stroke-width:2px;opacity:.6}.ctrl-point circle{fill:var(--region-color)}.ctrl-program{fill:#e8c27a;font-size:9px}.ctrl-empty{fill:var(--muted);font-size:10px}.pr-past-end{pointer-events:none;background:#0000004d;position:absolute;top:0;bottom:0;right:0}:root{--paper:#f6f1e9;--ink:#1e1a15;--marker:#ffc933;--ink-soft:#1e1a159e;--rule:#1e1a1524;--tint:#1e1a150d;--font-head:"Bricolage Grotesque", "Inter", system-ui, sans-serif;--font-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", ui-monospace, Menlo, monospace;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{margin:0}body{background:var(--paper);color:var(--ink);font:16px/1.5 var(--font-body);-webkit-font-smoothing:antialiased}h1,h2{font-family:var(--font-head);margin:0 0 16px;font-weight:800;line-height:1.15}h1{font-size:32px}h2{font-size:20px;font-weight:600}a{color:inherit;text-underline-offset:3px}.mono{font-family:var(--font-mono);font-size:.9em}.muted{color:var(--ink-soft)}.error{color:var(--ink);border-left:3px solid var(--ink);padding-left:10px}.column{max-width:760px;margin:0 auto;padding:0 16px}.column.wide{max-width:1180px}main.column{padding-top:32px;padding-bottom:64px}.narrow{max-width:440px}.site-header{border-bottom:1px solid var(--rule)}.header-row{flex-wrap:wrap;align-items:center;gap:8px 16px;min-height:60px;padding-top:10px;padding-bottom:10px;display:flex}.wordmark{font-family:var(--font-head);background:linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 92%, transparent 92%);padding:0 2px;font-size:24px;font-weight:800;text-decoration:none}.header-nav{flex-wrap:wrap;align-items:center;gap:16px;margin-left:auto;font-size:15px;display:flex}.header-email{color:var(--ink-soft);overflow-wrap:anywhere}button,.button{font:inherit}.primary{background:var(--ink);color:var(--paper);cursor:pointer;border:0;border-radius:8px;padding:11px 18px;font-weight:600;text-decoration:none;display:inline-block}.primary:disabled{opacity:.6;cursor:default}.link-button{color:inherit;text-underline-offset:3px;cursor:pointer;background:0 0;border:0;padding:0;text-decoration:underline}.stack{flex-direction:column;align-items:flex-start;gap:14px;display:flex}.field{flex-direction:column;gap:6px;width:100%;font-weight:500;display:flex}.field input{font:inherit;border:1px solid var(--rule);color:var(--ink);background:#fff;border-radius:8px;width:100%;padding:10px 12px}.field input:focus{outline:2px solid var(--marker);outline-offset:1px;border-color:var(--ink)}.notice{background:var(--tint);border-radius:8px;padding:12px 14px}.steps{padding-left:22px}.steps li{margin-bottom:10px}.back{margin:0 0 12px;font-size:15px}.rows{border-top:1px solid var(--rule);margin:0;padding:0;list-style:none}.rows li{border-bottom:1px solid var(--rule)}.row-link{flex-direction:column;gap:2px;padding:14px 4px;text-decoration:none;display:flex}.row-link:hover{background:var(--tint)}.row-title{font-size:18px;font-weight:600}.row-meta{color:var(--ink-soft);flex-wrap:wrap;gap:4px 14px;font-size:15px;display:flex}.row-meta .version-label{color:var(--ink)}.project-layout{grid-template-columns:280px minmax(0,1fr);align-items:start;gap:32px;display:grid}.history-list{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.history-item{text-align:left;width:100%;color:inherit;cursor:pointer;background:0 0;border:0;border-left:4px solid #0000;border-radius:0 6px 6px 0;flex-direction:column;gap:2px;padding:8px 10px;display:flex}.history-item:hover{background:var(--tint)}.history-item.selected{border-left-color:var(--marker);background:#ffc93347}.history-item .version-label{overflow-wrap:anywhere;font-weight:500}.history-meta{color:var(--ink-soft);overflow-wrap:anywhere;flex-wrap:wrap;gap:2px 10px;font-size:13px;display:flex}.version-detail h2{overflow-wrap:anywhere}.version-meta{color:var(--ink-soft);overflow-wrap:anywhere;margin:-8px 0 12px;font-size:15px}.quiet-note{color:var(--ink-soft);margin:0 0 12px;font-size:14px}.arrangement-facts{font-size:14px;font-family:var(--font-mono);flex-wrap:wrap;align-items:center;gap:6px 16px;margin-bottom:10px;display:flex}.arrangement-zoom{font-family:var(--font-body);color:var(--ink-soft);align-items:center;gap:8px;margin-left:auto;display:flex}.arrangement .arrange{max-height:440px}@media (width<=760px){h1{font-size:26px}.project-layout{grid-template-columns:minmax(0,1fr);gap:20px}.viewer .corner,.viewer .track-header{width:128px!important}}