@font-face{font-family:Space Grotesk;src:url('/assets/fonts/space-grotesk-400.ttf')}@font-face{font-family:Space Grotesk;src:url('/assets/fonts/space-grotesk-600.ttf');font-weight:600}@font-face{font-family:IBM Plex Mono;src:url('/assets/fonts/ibm-plex-mono-400-normal-latin.woff2')}
:root{color-scheme:dark;--bg:#17191f;--panel:#232630;--raised:#303440;--line:#505767;--text:#eceef4;--muted:#b4baca;--iris:#bea1ff;font-family:'Space Grotesk',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}button,input,select{font:inherit}button,select{min-height:38px;padding:7px 12px;border:1px solid var(--line);border-radius:4px;background:var(--raised);color:var(--text)}button{cursor:pointer}button:hover{border-color:var(--iris)}button:disabled{cursor:default;opacity:.5}button[aria-pressed=true],button.primary{background:var(--iris);color:#1a1429;border-color:var(--iris)}:focus-visible{outline:3px solid var(--iris);outline-offset:3px}.skip{position:absolute;top:8px;left:12px;transform:translateY(-200%);z-index:10;background:var(--iris);color:var(--bg);padding:12px}.skip:focus{transform:none}.demo-header{display:flex;align-items:center;gap:20px;padding:18px 32px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:9px;font-size:30px;letter-spacing:-1.8px;font-weight:600}.demo-badge{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--iris);letter-spacing:.07em;border-left:1px solid var(--line);padding-left:20px}.demo-badge span{display:block;color:var(--muted);margin-top:4px}.back{margin-left:auto;font-size:13px;color:var(--muted)}main{max-width:1600px;margin:0 auto;padding:0 32px 32px}.welcome{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:38px 0 30px}.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;color:var(--iris);margin:0 0 12px}h1{font-size:36px;letter-spacing:-1.3px;line-height:1.1;margin:0 0 10px}.welcome p:not(.eyebrow){font-size:14px;color:var(--muted);margin:0;line-height:1.7}.demo-limits{display:flex;flex-direction:column;gap:6px;border-left:2px solid var(--iris);padding-left:18px;font-size:12px;color:var(--muted);line-height:1.5}.demo-limits strong{color:var(--text);font-size:13px}.transport{display:flex;align-items:center;gap:8px;padding:12px;background:var(--panel);border:1px solid var(--line);flex-wrap:wrap;font-size:12px}.transport output{font:600 18px 'IBM Plex Mono',monospace;padding:0 12px;min-width:105px}.tempo{border-inline:1px solid var(--line);padding:0 12px;white-space:nowrap}.tempo span{color:var(--muted);padding-left:6px}.range-fields{display:flex;align-items:center;gap:8px}.range-fields label{display:flex;gap:6px;align-items:center;color:var(--muted);white-space:nowrap}.range-fields select{padding:7px 5px}.history{margin-left:auto;display:flex;gap:8px}.status{font-size:12px;color:var(--muted);min-height:20px;margin:12px 0 20px}.section-label{display:flex;align-items:center;gap:16px;min-height:48px;padding:10px 15px;background:var(--panel);border:1px solid var(--line)}h2{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin:0}.section-label>span{font-size:11px;color:var(--muted);margin-left:auto}.timeline-scroll,.notes-scroll{overflow-x:auto;border-inline:1px solid var(--line);border-bottom:1px solid var(--line)}#timeline{min-width:720px;--playhead:0%}.timeline-head,.track{display:grid;grid-template-columns:184px 1fr}.timeline-head{height:35px;background:#1e2028;color:var(--muted);font:10px 'IBM Plex Mono',monospace}.track-heading{padding:12px 10px;font-size:9px}.bars{display:grid;grid-template-columns:repeat(8,1fr)}.bars>span{padding:11px 8px;border-left:1px solid var(--line)}.track{height:78px;border-top:1px solid var(--line)}.track-label{position:relative;padding:8px 48px 8px 10px;background:var(--panel);border-left:3px solid var(--track)}.track-name{display:block;min-height:26px;background:none;border:0;padding:0;font-size:12px;white-space:nowrap;text-align:left}.track-label>span{display:block;margin-top:13px;font:9px 'IBM Plex Mono',monospace;color:var(--muted)}.mix-buttons{display:flex;gap:4px;position:absolute;bottom:10px;right:8px}.mix-buttons button{min-height:22px;width:27px;padding:2px;font-size:10px}.clips{display:grid;grid-template-columns:repeat(8,1fr);position:relative;isolation:isolate}.clip{position:relative;min-width:0;border:0;border-left:1px solid #343743;border-right:1px solid #343743;border-radius:0;margin:4px 0;padding:0;background:var(--track);color:#17191f;opacity:.68;touch-action:pan-y}.clip>span{display:block;padding:4px 7px;text-align:left;background:#00000010;font-size:10px;white-space:nowrap;overflow:hidden}.clip svg{width:100%;height:39px;display:block;fill:#17191f}.clip.in-range{opacity:1}.clip.selected,.clip[aria-pressed=true]{outline:2px solid #fff;outline-offset:-3px;background:var(--track);color:#17191f}.clip:focus-visible{outline:3px solid white;outline-offset:-3px;z-index:2}.clip:hover{filter:brightness(1.1)}.playhead{display:none;pointer-events:none;position:absolute;top:0;bottom:0;left:var(--playhead);width:2px;background:#fff;z-index:3;box-shadow:0 0 7px #000}.playing .playhead{display:block}.note-editor{margin-top:22px}.bar-navigation{display:flex;gap:4px}.bar-navigation button{min-height:28px;padding:2px 10px}#notes{min-width:680px;padding:8px 12px 14px;background:#1c1f27}.note-row,.note-ruler{display:grid;grid-template-columns:88px repeat(16,minmax(0,1fr));gap:2px}.note-ruler{height:27px;align-items:center;font:10px 'IBM Plex Mono',monospace;color:var(--muted)}.note-ruler span{text-align:center}.note-ruler span:first-child{text-align:left;font-size:8px}.note-row>span{font:10px 'IBM Plex Mono',monospace;align-self:center;color:var(--muted)}.note-row{margin-top:2px}.note-row button{border-radius:0;min-height:28px;padding:0;border:1px solid #4b5161;background:#262a35;font-size:12px}.note-row button:nth-child(4n+2){border-left:2px solid #939aad}.note-row button[aria-pressed=true]{background:var(--track);color:#17191f;border-color:var(--track)}.note-row button:focus-visible{z-index:1;outline-color:white;outline-offset:-3px}.mixer{margin-top:22px;border:1px solid var(--line);background:var(--panel)}summary{padding:16px;cursor:pointer;font-size:12px}summary>span{color:var(--muted);margin-left:20px;font-size:11px}#faders{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:8px 20px 20px}#faders label{display:grid;grid-template-columns:1fr auto;gap:10px;border-top:3px solid var(--track);padding-top:14px;font-size:12px}#faders output{color:var(--muted);font:11px 'IBM Plex Mono',monospace}#faders input{grid-column:1/-1;width:100%;accent-color:var(--track)}.demo-footer{display:flex;justify-content:space-between;gap:15px;font-size:10px;color:var(--muted);padding:22px 0}.demo-footer a{text-decoration:underline}.notice{padding:20px;border:1px solid var(--line)}.notice a{text-decoration:underline}[hidden]{display:none!important}
@media(max-width:1100px){.history{margin-left:0}.section-label>span{max-width:340px;line-height:1.5}.welcome{padding-top:28px}.range-fields{flex-wrap:wrap}}
@media(max-width:720px){main{padding:0 16px 24px}.demo-header{padding:16px;gap:14px}.demo-badge{padding-left:14px}.welcome{flex-direction:column;align-items:start;gap:18px;padding:26px 0}.welcome h1{font-size:30px}.demo-limits{font-size:11px}.section-label{flex-wrap:wrap;gap:8px}.section-label>span{margin:0;max-width:none;flex-basis:100%}.transport{gap:7px}.tempo{padding:0 7px}.range-fields{flex-basis:100%;font-size:11px}.transport output{padding:0 7px;min-width:87px}.demo-footer{flex-direction:column;line-height:1.6}#faders{grid-template-columns:1fr 1fr;gap:20px}.back{font-size:11px}.demo-badge{font-size:8px}.brand{font-size:27px}}
@media(forced-colors:active){.clip,.note-row button[aria-pressed=true]{forced-color-adjust:none;background:Highlight!important;color:HighlightText!important}.clip svg{fill:HighlightText}.clip.selected{outline-color:CanvasText}.clip.in-range{border-top:3px solid CanvasText}.playhead{background:CanvasText}.note-row button:focus-visible{outline-color:CanvasText}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}