@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-italic.woff2) format("woff2")}
/* A night version of the fast* paper look: warm ink panels, paper text, the same five accents. */
:root{--bg:#141118;--panel:#1b1720;--panel2:#221e28;--raise:#2b2632;--raise2:#353040;--line:#322c3a;--line2:#3e3748;--ink:#f3ede4;--soft:#a39bad;--dim:#6e6679;--c1:#ff5d5d;--c2:#ffb02e;--c3:#2ec4a6;--c4:#4c7dff;--c5:#b15cff;--accent:var(--c2);--good:#2ec4a6;--warn:#ffb02e;--bad:#ff5d5d;--serif:"Instrument Serif",Georgia,serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--radius:10px;--bar:52px;font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);font-size:13px;font-synthesis:none;-webkit-font-smoothing:antialiased;color-scheme:dark}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;overflow:hidden;background:var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:none;border:0;padding:0}
button:disabled{opacity:.4;cursor:default}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}[hidden]{display:none!important}
select{background:var(--raise);border:1px solid var(--line2);border-radius:7px;padding:4px 24px 4px 8px;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),linear-gradient(135deg,var(--soft) 50%,transparent 50%);background-position:calc(100% - 12px) 52%,calc(100% - 8px) 52%;background-size:4px 4px;background-repeat:no-repeat;min-width:0}
input[type=range]{accent-color:var(--accent)}
.icon{width:18px;height:18px;display:block;flex-shrink:0}
.icon-btn{display:inline-grid;place-items:center;min-width:30px;height:30px;border-radius:8px;color:var(--soft);transition:background .12s,color .12s}.icon-btn:hover{background:var(--raise);color:var(--ink)}.icon-btn[aria-pressed=true],.icon-btn.on{color:var(--accent);background:color-mix(in oklab,var(--accent) 16%,transparent)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 14px;border-radius:9px;background:var(--raise);border:1px solid var(--line2);font-weight:600;white-space:nowrap;transition:background .12s,border-color .12s}.btn:hover{background:var(--raise2);border-color:var(--dim)}
.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}.btn.primary:hover{background:#fff}.btn.danger.primary{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.small{padding:5px 10px;font-size:12px;border-radius:7px}.btn .icon{width:15px;height:15px}
.text{width:100%;background:var(--bg);border:1px solid var(--line2);border-radius:8px;padding:9px 11px;font-size:14px}.text:focus{outline:none;border-color:var(--accent)}
kbd{font:600 11px var(--mono);background:var(--raise);border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;padding:1px 5px;color:var(--soft)}

/* ------------------------------------------------------------------ top bar */
.bar{height:var(--bar);display:flex;align-items:center;gap:14px;padding:0 12px;background:var(--panel);border-bottom:1px solid var(--line);position:relative;z-index:5}
.logo{display:flex;align-items:center;gap:9px;font:italic 25px/1 var(--serif);letter-spacing:-.01em;color:var(--ink);padding:4px 4px 4px 2px;flex-shrink:0}
.logo-bars{display:flex;align-items:flex-end;gap:2.5px;height:20px}.logo-bars i{width:4.5px;border-radius:3px;background:var(--c1);height:60%;transition:height .25s}
.logo-bars i:nth-child(2){background:var(--c2);height:100%}.logo-bars i:nth-child(3){background:var(--c3);height:75%}.logo-bars i:nth-child(4){background:var(--c4);height:45%}
.playing .logo-bars i{animation:bounce .5s ease-in-out infinite alternate}.playing .logo-bars i:nth-child(2){animation-delay:-.12s}.playing .logo-bars i:nth-child(3){animation-delay:-.27s}.playing .logo-bars i:nth-child(4){animation-delay:-.4s}
@keyframes bounce{from{height:25%}to{height:100%}}
.menus{display:flex;gap:1px}.menus button{padding:6px 9px;border-radius:7px;color:var(--soft);font-weight:600}.menus button:hover,.menus button.open{background:var(--raise);color:var(--ink)}
.transport{display:flex;align-items:center;gap:6px;margin-left:auto}
.seg{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:2px}.seg button{padding:5px 10px;border-radius:7px;font-weight:700;font-size:12px;color:var(--dim)}.seg button[aria-checked=true]{background:var(--raise2);color:var(--ink)}
.tbtn{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--raise);color:var(--soft);transition:background .12s,color .12s,transform .1s}.tbtn:hover{background:var(--raise2);color:var(--ink)}.tbtn:active{transform:scale(.94)}.tbtn .icon{width:16px;height:16px}
.tbtn.play[aria-pressed=true]{background:var(--c3);color:#06231d}.tbtn.rec[aria-pressed=true]{background:var(--c1);color:#fff;animation:pulse 1.2s ease-in-out infinite}.tbtn.small{width:30px;height:30px}.tbtn.small[aria-pressed=true]{color:var(--accent)}
@keyframes pulse{50%{box-shadow:0 0 0 4px color-mix(in oklab,var(--c1) 30%,transparent)}}
.lcd{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;min-width:86px;height:36px;padding:0 10px;border-radius:9px;background:#0d0b10;border:1px solid var(--line);font-family:var(--mono);line-height:1.1}
.lcd b{font-size:15px;color:var(--c2);font-weight:600;letter-spacing:.02em}.lcd span{font-size:10px;color:var(--dim)}
.tempo{display:flex;align-items:baseline;gap:4px;height:36px;padding:0 10px;border-radius:9px;background:#0d0b10;border:1px solid var(--line);cursor:ns-resize}
.tempo input{width:50px;background:none;border:0;text-align:right;font:600 15px/34px var(--mono);color:var(--c2);cursor:ns-resize}.tempo input:focus{outline:none;cursor:text}.tempo span{font-size:10px;color:var(--dim);font-weight:700}
.swing{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:10px;color:var(--dim);font-weight:700}.swing input{width:64px;height:14px}
.patterns{display:flex;align-items:center;gap:2px}
.pattern-name{display:flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:9px;background:var(--raise);font-weight:700;max-width:170px;min-width:110px}.pattern-name i{width:10px;height:10px;border-radius:3px;background:var(--c1);flex-shrink:0}.pattern-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pattern-name:hover{background:var(--raise2)}
.bar-right{display:flex;align-items:center;gap:6px;margin-left:6px}
.master-meter{width:60px;height:28px;border-radius:5px;background:#0d0b10}
.save-state{width:8px;height:8px;border-radius:50%;background:var(--good);opacity:.7;transition:background .3s}.save-state.unsaved{background:var(--warn)}
.cta{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 11px;border-radius:10px;background:var(--ink);color:var(--bg);font-weight:700;transition:transform .15s,background .15s}.cta:hover{background:#fff;transform:translateY(-1px)}
.cta-icon{display:flex;gap:2px;align-items:flex-end;height:14px}.cta-icon::before,.cta-icon::after{content:"";width:4px;border-radius:2px;background:var(--c1);height:100%}.cta-icon::after{background:var(--c4);height:60%}

/* ------------------------------------------------------------------ workspace */
.workspace{display:flex;height:calc(100% - var(--bar));min-height:0}
.browser{width:var(--browser-w,270px);flex-shrink:0;background:var(--panel);display:flex;flex-direction:column;min-height:0}
.inspector{width:var(--inspector-w,330px);flex-shrink:0;background:var(--panel);overflow:auto;min-height:0}
.splitter{width:5px;flex-shrink:0;cursor:col-resize;background:var(--line);opacity:.6;transition:background .15s}.splitter:hover{background:var(--accent)}
.hide-browser .browser,.hide-browser #split-left,.hide-inspector .inspector,.hide-inspector #split-right{display:none}
.stage{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0;background:var(--bg)}
.tabs{display:flex;align-items:center;gap:2px;padding:6px 8px 0;background:var(--panel);border-bottom:1px solid var(--line);flex-shrink:0;overflow-x:auto;scrollbar-width:none}
.tabs [role=tab]{padding:8px 13px 9px;border-radius:9px 9px 0 0;font-weight:700;color:var(--dim);white-space:nowrap;position:relative}.tabs [role=tab]:hover{color:var(--soft)}
.tabs [role=tab][aria-selected=true]{color:var(--ink);background:var(--bg)}.tabs [role=tab][aria-selected=true]::after{content:"";position:absolute;left:12px;right:12px;top:0;height:2px;border-radius:2px;background:var(--accent)}
.tabs-fill{flex:1}
.view{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.toolbar{display:flex;align-items:center;gap:6px;padding:7px 10px;border-bottom:1px solid var(--line);background:var(--panel2);flex-shrink:0;flex-wrap:wrap;min-height:44px}
.toolbar .sep{width:1px;height:20px;background:var(--line2);margin:0 4px}.toolbar label{display:flex;align-items:center;gap:6px;color:var(--soft);font-size:12px;font-weight:600}
.toolbar .title{font-weight:800;font-size:13px;margin-right:4px;display:flex;align-items:center;gap:7px;max-width:240px}.toolbar .title i{width:10px;height:10px;border-radius:3px;flex-shrink:0}.toolbar .title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toolbar .grow{flex:1}
.tool-group{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:2px}.tool-group button{display:grid;place-items:center;width:28px;height:26px;border-radius:6px;color:var(--dim)}.tool-group button:hover{color:var(--ink)}.tool-group button[aria-pressed=true]{background:var(--raise2);color:var(--accent)}.tool-group .icon{width:16px;height:16px}
.empty{margin:auto;text-align:center;color:var(--soft);max-width:380px;padding:30px;line-height:1.5}.empty h3{font:italic 30px/1.1 var(--serif);color:var(--ink);margin:0 0 8px;font-weight:400}.empty .btn{margin-top:14px}

/* ------------------------------------------------------------------ browser */
.browser-head{padding:10px 10px 8px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--line)}
.browser-tabs{display:flex;gap:2px;background:var(--bg);border-radius:9px;padding:2px;border:1px solid var(--line)}.browser-tabs button{flex:1;padding:5px 4px;border-radius:7px;font-weight:700;font-size:12px;color:var(--dim)}.browser-tabs button[aria-selected=true]{background:var(--raise2);color:var(--ink)}
.search{position:relative}.search .icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--dim)}.search input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:7px 9px 7px 30px}.search input:focus{outline:none;border-color:var(--line2)}
.browser-list{flex:1;overflow:auto;padding:6px 6px 30px;min-height:0;overscroll-behavior:contain}
.group-title{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding:12px 8px 5px}
.folder{border-radius:8px}.folder>button{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border-radius:7px;text-align:left;font-weight:650}.folder>button:hover{background:var(--raise)}
.folder>button::before{content:"";width:0;height:0;border-left:5px solid var(--dim);border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s;flex-shrink:0}.folder.open>button::before{transform:rotate(90deg)}
.folder>button small{margin-left:auto;color:var(--dim);font-weight:600;font-size:11px}
.folder-items{padding:1px 0 6px 12px}
.sound{display:flex;align-items:center;gap:7px;width:100%;padding:4px 8px;border-radius:6px;text-align:left;color:var(--soft);cursor:grab;user-select:none}.sound:hover{background:var(--raise);color:var(--ink)}.sound.playing{color:var(--accent)}.sound.selected{background:color-mix(in oklab,var(--accent) 14%,transparent);color:var(--ink)}
.sound i{width:7px;height:7px;border-radius:2px;flex-shrink:0;background:var(--dim)}.sound span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.sound small{color:var(--dim);font:10.5px var(--mono)}
.sound .add{opacity:0;color:var(--dim);width:22px;height:20px;display:grid;place-items:center;border-radius:5px}.sound:hover .add{opacity:1}.sound .add:hover{background:var(--raise2);color:var(--ink)}.sound .add .icon{width:13px;height:13px}
.t-kick{background:var(--c1)!important}.t-snare,.t-clap{background:var(--c2)!important}.t-hat,.t-openhat,.t-cymbal{background:var(--c3)!important}.t-tom,.t-rim,.t-perc{background:var(--c4)!important}.t-bass,.t-vox{background:var(--c5)!important}.t-fx,.t-loop{background:#ff7ab8!important}
.browser-foot{padding:8px;border-top:1px solid var(--line);display:flex;gap:6px;flex-wrap:wrap}.browser-foot .btn{flex:1}
.inst-card{display:flex;align-items:center;gap:9px;width:100%;padding:7px 8px;border-radius:8px;text-align:left}.inst-card:hover{background:var(--raise)}.inst-card .badge{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--raise2);color:var(--soft);flex-shrink:0}.inst-card .badge .icon{width:16px;height:16px}
.inst-card div{min-width:0}.inst-card b{display:block;font-weight:700}.inst-card small{display:block;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.credit{font-size:11px;color:var(--dim);padding:2px 8px 6px;line-height:1.4}.credit a{color:var(--soft)}

/* ------------------------------------------------------------------ channel rack */
.rack{flex:1;overflow:auto;padding:10px 12px 60px;min-height:0}
.rack-row{display:flex;align-items:center;gap:6px;height:38px;margin-bottom:4px;border-radius:9px}
.rack-row.selected .ch-name{box-shadow:inset 0 0 0 1.5px var(--accent)}
.ch-led{width:14px;height:14px;border-radius:4px;background:var(--good);box-shadow:0 0 8px color-mix(in oklab,var(--good) 60%,transparent);flex-shrink:0}.ch-led.off{background:var(--raise2);box-shadow:none}
.rack-row .knob.xs{margin:0 -2px}
.ch-name{display:flex;align-items:center;gap:8px;width:148px;height:34px;padding:0 6px 0 4px;border-radius:8px;background:var(--raise);text-align:left;font-weight:700;flex-shrink:0;position:relative;overflow:hidden}
.ch-name i{width:5px;height:24px;border-radius:3px;flex-shrink:0}.ch-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.ch-name:hover{background:var(--raise2)}
.ch-name .flash{position:absolute;inset:0;background:var(--ch,var(--accent));opacity:0;pointer-events:none;transition:opacity .25s}.ch-name .flash.on{opacity:.22;transition:none}
.ch-insert{width:30px;height:24px;border-radius:6px;background:var(--bg);border:1px solid var(--line);font:600 11px var(--mono);color:var(--soft);flex-shrink:0}.ch-insert:hover{color:var(--ink);border-color:var(--line2)}
.steps{display:flex;gap:3px;flex-shrink:0}.beat{display:flex;gap:2px}
.step{width:var(--step-w,26px);height:32px;border-radius:5px;background:var(--raise);position:relative;transition:background .08s}.beat:nth-child(odd) .step{background:#2f2a37}.beat:nth-child(even) .step{background:#25212b}
.step:hover{filter:brightness(1.35)}.step.on{background:var(--ch)!important;box-shadow:inset 0 -3px 0 #0003}.step.on::after{content:"";position:absolute;left:4px;right:4px;bottom:5px;height:3px;border-radius:2px;background:#fff8;transform-origin:left;transform:scaleX(var(--vel,1))}
.step.now{outline:2px solid #fff6;outline-offset:-2px}
.mini-roll{height:32px;border-radius:6px;background:var(--panel2);position:relative;overflow:hidden;flex-shrink:0;cursor:pointer;border:1px dashed var(--line2)}.mini-roll canvas{position:absolute;inset:0;width:100%;height:100%}
.rack-add{display:flex;gap:6px;margin-top:10px;padding-left:20px;flex-wrap:wrap}
.rack-tip{color:var(--dim);font-size:12px;margin:14px 0 0 22px;line-height:1.6}

/* ------------------------------------------------------------------ canvases */
.canvas-wrap{flex:1;position:relative;min-height:0;overflow:hidden}.canvas-wrap canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.roll-area{flex:1;display:flex;flex-direction:column;min-height:0}
.vel-lane{height:90px;border-top:1px solid var(--line);position:relative;flex-shrink:0}.vel-lane canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.hscroll{height:12px;background:var(--panel);position:relative;flex-shrink:0}
.overlay-hint{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);text-align:center;color:var(--soft);pointer-events:none;line-height:1.5}.overlay-hint b{display:block;font:italic 28px var(--serif);color:var(--ink);font-weight:400}
.chord-pad{display:flex;gap:4px}.chord-pad button{padding:4px 8px;border-radius:6px;background:var(--raise);font-weight:700;font-size:12px}.chord-pad button:hover{background:var(--raise2)}
.playlist-side{width:170px;border-right:1px solid var(--line);overflow:auto;background:var(--panel2);flex-shrink:0;padding:6px}
.clip-src{display:flex;align-items:center;gap:7px;width:100%;padding:6px 7px;border-radius:7px;font-weight:650;text-align:left;cursor:grab}.clip-src:hover{background:var(--raise)}.clip-src.selected{background:var(--raise2)}.clip-src i{width:10px;height:10px;border-radius:3px;flex-shrink:0}.clip-src span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.playlist-body{flex:1;display:flex;min-height:0}

/* ------------------------------------------------------------------ mixer */
.mixer{flex:1;display:flex;min-height:0}
.strips{flex:1;display:flex;gap:4px;overflow-x:auto;padding:10px;min-width:0}
.strip{width:74px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;border-radius:10px;background:var(--panel2);border:1px solid transparent;cursor:pointer}
.strip.selected{border-color:var(--accent);background:var(--raise)}.strip.master{width:88px;background:#211c27}
.strip-name{font-weight:700;font-size:11.5px;width:100%;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}.strip-num{font:600 10px var(--mono);color:var(--dim)}
.strip-meter-wrap{display:flex;gap:6px;flex:1;min-height:120px;align-items:stretch}
.strip-meter{width:8px;border-radius:4px;background:#0d0b10;position:relative;overflow:hidden}.strip-meter canvas{position:absolute;inset:0;width:100%;height:100%}
.fader{width:22px;position:relative;cursor:ns-resize;touch-action:none}.fader-track{position:absolute;left:9px;width:4px;top:7px;bottom:7px;border-radius:2px;background:#0d0b10;overflow:hidden}.fader-fill{position:absolute;left:0;right:0;bottom:0;background:var(--dim)}
.fader-thumb{position:absolute;left:0;width:22px;height:14px;border-radius:4px;background:linear-gradient(#e9e3da,#b7b0a6);box-shadow:0 2px 4px #0008}.fader-thumb::after{content:"";position:absolute;left:4px;right:4px;top:6px;height:2px;background:#0005}
.strip-btns{display:flex;gap:3px}.strip-btns button{width:24px;height:20px;border-radius:5px;background:var(--raise2);font:700 10px var(--mono);color:var(--soft)}.strip-btns button[aria-pressed=true].m{background:var(--c1);color:#fff}.strip-btns button[aria-pressed=true].s{background:var(--c2);color:#2a1d00}
.strip-fx{display:flex;flex-direction:column;gap:2px;width:100%}.strip-fx span{font-size:10px;padding:2px 4px;border-radius:4px;background:var(--bg);color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}.strip-fx span.off{opacity:.4;text-decoration:line-through}
.strip-route{font:600 10px var(--mono);color:var(--dim)}
.fx-panel{width:340px;border-left:1px solid var(--line);background:var(--panel);overflow:auto;flex-shrink:0;padding:12px}
.fx-panel h3{margin:0 0 4px;font:italic 26px var(--serif);font-weight:400}
.fx-slot{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--panel2);overflow:hidden}
.fx-slot-head{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--raise)}.fx-slot-head b{flex:1;font-size:12.5px}.fx-slot-head .power{width:22px;height:22px;border-radius:6px;display:grid;place-items:center}.fx-slot-head .power i{width:9px;height:9px;border-radius:50%;background:var(--dim)}.fx-slot-head .power.on i{background:var(--good);box-shadow:0 0 6px var(--good)}
.fx-slot-body{display:flex;flex-wrap:wrap;gap:6px 2px;padding:10px 6px;justify-content:flex-start;align-items:center}.fx-slot.collapsed .fx-slot-body{display:none}

/* ------------------------------------------------------------------ inspector */
.insp-head{padding:12px 12px 10px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px;position:sticky;top:0;background:var(--panel);z-index:2}
.insp-title{display:flex;align-items:center;gap:8px}.insp-title i{width:12px;height:30px;border-radius:4px;flex-shrink:0;cursor:pointer}.insp-title input{flex:1;min-width:0;background:none;border:0;border-bottom:1.5px dashed transparent;font:italic 26px/1.1 var(--serif);padding:2px 0}.insp-title input:hover,.insp-title input:focus{outline:none;border-bottom-color:var(--line2)}
.insp-sub{display:flex;align-items:center;gap:6px;color:var(--soft);font-size:12px}.insp-sub label{min-width:0}.insp-sub select{max-width:150px;text-overflow:ellipsis}
.section{padding:12px;border-bottom:1px solid var(--line)}.section h4{margin:0 0 10px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:8px}.section h4 .grow{flex:1}
.knobs{display:flex;flex-wrap:wrap;gap:8px 4px}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.row+.row{margin-top:8px}.row label{color:var(--soft);font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}
.wave-box{height:96px;border-radius:9px;background:#0d0b10;position:relative;overflow:hidden;margin-bottom:8px;touch-action:none}.wave-box canvas{position:absolute;inset:0;width:100%;height:100%}
.chip-btn{padding:4px 9px;border-radius:7px;background:var(--raise);font-weight:700;font-size:12px;color:var(--soft)}.chip-btn:hover{color:var(--ink);background:var(--raise2)}.chip-btn[aria-pressed=true]{background:color-mix(in oklab,var(--accent) 22%,var(--raise));color:var(--ink)}
.osc-card{border:1px solid var(--line);border-radius:10px;padding:8px;margin-bottom:8px;background:var(--panel2)}.osc-card header{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-weight:700}
.keyboard{height:64px;position:relative;border-radius:8px;overflow:hidden;background:#0d0b10;margin-top:8px;touch-action:none;user-select:none}
.keyboard .w,.keyboard .b{position:absolute;top:0;border-radius:0 0 4px 4px}.keyboard .w{background:#e9e3da;border-right:1px solid #0004;bottom:0}.keyboard .b{background:#1b171f;height:60%;z-index:1}.keyboard .down{background:var(--accent)!important}
.keyboard .root::after{content:"";position:absolute;bottom:4px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--c1)}
.preset-row{display:flex;gap:6px;align-items:center}.preset-row select{flex:1}

/* ------------------------------------------------------------------ sample editor */
.editor{flex:1;display:flex;flex-direction:column;min-height:0}
.editor-wave{flex:1;position:relative;min-height:0;background:#0d0b10}
.editor-overview{height:44px;border-top:1px solid var(--line);position:relative;background:var(--panel);flex-shrink:0}.editor-overview canvas,.editor-wave canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.editor-status{display:flex;gap:16px;padding:6px 12px;font:12px var(--mono);color:var(--soft);border-top:1px solid var(--line);flex-shrink:0;flex-wrap:wrap}.editor-status b{color:var(--ink);font-weight:600}
.rec-meter{height:6px;border-radius:3px;background:#0d0b10;overflow:hidden;width:120px}.rec-meter i{display:block;height:100%;background:var(--c1);width:0}

/* ------------------------------------------------------------------ knobs */
.knob{display:flex;flex-direction:column;align-items:center;gap:1px;width:52px;cursor:ns-resize;user-select:none;touch-action:none;border-radius:8px;padding:2px 0;--knob:var(--accent)}
.knob:focus-visible{outline-offset:0}.knob-svg{width:34px;height:34px}.knob .knob-track{fill:none;stroke:#0d0b10;stroke-width:3.4}.knob .knob-arc{fill:none;stroke:var(--knob);stroke-width:3.4;stroke-linecap:round}
.knob .knob-pointer{stroke:var(--ink);stroke-width:2;stroke-linecap:round}.knob-label{font-size:9.5px;font-weight:700;color:var(--soft);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.knob-value{font:10px var(--mono);color:var(--dim);white-space:nowrap}
.knob.active .knob-value,.knob:hover .knob-value{color:var(--ink)}
.knob.sm{width:50px}.knob.sm .knob-svg{width:28px;height:28px}
.knob.xs{width:26px}.knob.xs .knob-svg{width:22px;height:22px}.knob.xs .knob-value{display:none}.knob.xs .knob-label{display:none}

/* ------------------------------------------------------------------ menus, dialogs, toasts */
.menu{position:fixed;z-index:100;min-width:200px;max-width:320px;background:#26212d;border:1px solid var(--line2);border-radius:11px;padding:5px;box-shadow:0 18px 50px -12px #000c;animation:pop .12s ease-out}
.menu.sub{position:absolute;display:none;max-height:70vh;overflow:auto}.menu-item.has-sub:hover>.menu.sub,.menu-item.has-sub:focus-within>.menu.sub{display:block}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}}
.menu-item{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;border-radius:7px;text-align:left;position:relative;white-space:nowrap}.menu-item:hover:not(:disabled){background:var(--raise2)}
.menu-item span{flex:1;overflow:hidden;text-overflow:ellipsis}.menu-item small{color:var(--dim);font-size:11px;font-family:var(--mono)}.menu-item.danger{color:#ff8b8b}
.menu-item.checked::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);margin-left:-2px}.menu-item.has-sub::after{content:"›";color:var(--dim);font-size:15px;line-height:1}
.menu-sep{height:1px;background:var(--line2);margin:5px 4px}.menu-heading{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding:7px 9px 3px}.menu-swatch{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.scrim{position:fixed;inset:0;z-index:90;background:#07050acc;display:grid;place-items:center;padding:16px;animation:fade .15s}@keyframes fade{from{opacity:0}}
.dialog{width:min(440px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line2);border-radius:16px;box-shadow:0 30px 80px -20px #000;animation:rise .2s cubic-bezier(.2,.8,.2,1)}.dialog.wide{width:min(760px,100%)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.dialog-head{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 4px 20px}.dialog-head h2{margin:0;font:italic 30px/1.1 var(--serif);font-weight:400}
.dialog-body{padding:10px 20px 6px;overflow:auto;line-height:1.5;color:var(--soft)}.dialog-body p{margin:0 0 10px}.dialog-body b{color:var(--ink)}
.dialog-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px 18px}
.export-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.export-card{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px;border-radius:11px;background:var(--raise);border:1px solid var(--line2);text-align:left;transition:border-color .12s,transform .12s}.export-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.export-card b{color:var(--ink);font-size:14px}.export-card small{color:var(--dim);font-size:11.5px;line-height:1.35}
.form-row{display:flex;align-items:center;gap:10px;margin:10px 0;color:var(--soft);flex-wrap:wrap}.form-row>span{min-width:90px;font-weight:600}
.progress{height:6px;border-radius:3px;background:var(--bg);overflow:hidden;margin:14px 0 4px}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3));transition:width .2s}
.shortcuts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:12.5px}.shortcuts span:nth-child(odd){text-align:right}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:120;display:flex;align-items:center;gap:14px;padding:10px 14px 10px 18px;border-radius:12px;background:var(--ink);color:var(--bg);font-weight:600;box-shadow:0 14px 40px -10px #000;max-width:calc(100% - 32px);animation:rise .2s}
#toast button{font-weight:800;color:var(--c4);padding:4px 6px;border-radius:6px}#toast button:hover{background:#0001}

/* ------------------------------------------------------------------ start screen */
.start{position:fixed;inset:0;z-index:50;overflow:auto;background:radial-gradient(1200px 600px at 10% -10%,#ff5d5d22,transparent 60%),radial-gradient(900px 600px at 100% 10%,#4c7dff22,transparent 60%),radial-gradient(800px 500px at 50% 120%,#2ec4a61c,transparent 60%),var(--bg)}
.start-inner{max-width:1080px;margin:0 auto;padding:clamp(28px,7vh,80px) 16px 50px}
.start-hero{text-align:center;max-width:760px;margin:0 auto 38px}
.hero-bars{display:inline-flex;align-items:flex-end;gap:6px;height:56px;margin-bottom:16px}.hero-bars i{width:12px;border-radius:6px;background:var(--c1);animation:bounce .55s ease-in-out infinite alternate}
.hero-bars i:nth-child(8n+2){background:var(--c2);animation-delay:-.1s}.hero-bars i:nth-child(8n+3){background:var(--c3);animation-delay:-.33s}.hero-bars i:nth-child(8n+4){background:var(--c4);animation-delay:-.2s}.hero-bars i:nth-child(8n+5){background:var(--c5);animation-delay:-.45s}.hero-bars i:nth-child(8n+6){background:var(--c2);animation-delay:-.05s}.hero-bars i:nth-child(8n+7){background:var(--c3);animation-delay:-.38s}.hero-bars i:nth-child(8n){background:var(--c1);animation-delay:-.25s}
.start h1{font:400 clamp(48px,8vw,96px)/.92 var(--serif);letter-spacing:-.025em;margin:0}.start h1 em{background:linear-gradient(95deg,var(--c1),var(--c2) 35%,var(--c5) 70%,var(--c4));-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .06em .08em}
.lede{font-size:clamp(15px,1.8vw,18px);color:var(--soft);margin:18px auto 0;max-width:36em;line-height:1.5}
.start-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:28px}.start-grid:not(:has(#recent-col:not([hidden]))){grid-template-columns:1fr}
.start-col h2{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);margin:0 0 10px}
.templates{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.template{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px;border-radius:16px;background:var(--panel);border:1px solid var(--line);text-align:left;min-height:120px;position:relative;overflow:hidden;transition:transform .2s cubic-bezier(.3,1.5,.5,1),border-color .15s}
.template:hover{transform:translateY(-3px) rotate(-.6deg);border-color:var(--t,var(--accent))}.template b{font:italic 26px/1 var(--serif);font-weight:400}.template small{color:var(--soft);line-height:1.4}.template .bpm{font:600 11px var(--mono);color:var(--t,var(--accent))}
.template::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:var(--t,var(--accent));opacity:.15;filter:blur(8px)}
.start-actions{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.recent{display:flex;flex-direction:column;gap:6px}
.recent-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--panel);border:1px solid var(--line);text-align:left;width:100%}.recent-item:hover{border-color:var(--line2);background:var(--panel2)}
.recent-item b{display:block;font-weight:700}.recent-item small{color:var(--dim)}.recent-item div{flex:1;min-width:0}.recent-item .del{opacity:0}.recent-item:hover .del{opacity:1}
.recent-thumb{width:46px;height:34px;border-radius:7px;background:var(--raise);flex-shrink:0;display:flex;align-items:flex-end;gap:2px;padding:5px}.recent-thumb i{flex:1;border-radius:2px}
.start .fine{text-align:center;color:var(--dim);font-size:12.5px;margin-top:36px}
.drop-overlay{position:fixed;inset:0;z-index:200;display:none;place-items:center;background:#07050ad9;pointer-events:none}.drop-overlay span{font:italic 40px var(--serif);border:2px dashed var(--line2);border-radius:28px;padding:40px 50px}body.dragover .drop-overlay{display:grid}

/* ------------------------------------------------------------------ narrow screens */
@media (max-width:1100px){.swing,.menus button[data-menu=help]{display:none}.inspector{position:fixed;right:0;top:var(--bar);bottom:0;z-index:20;box-shadow:-20px 0 50px #0009;width:min(340px,92vw)}#split-right{display:none}}
@media (max-width:860px){.browser{position:fixed;left:0;top:var(--bar);bottom:0;z-index:20;box-shadow:20px 0 50px #0009;width:min(300px,88vw)}#split-left{display:none}.menus{display:none}.patterns{display:none}.lcd{min-width:70px}.save-state,.master-meter{display:none}.start-grid{grid-template-columns:1fr}}
@media (max-width:600px){.bar{gap:6px;padding:0 8px;overflow-x:auto;scrollbar-width:none}.bar::-webkit-scrollbar{display:none}.bar>*{flex-shrink:0}#stop,.lcd span,.tempo span{display:none}.lcd{min-width:58px;padding:0 7px}.ch-name{width:104px}.rack-row>.knob:first-of-type{display:none}.rack{padding:8px 8px 60px}.toolbar{gap:4px}.logo{font-size:0;gap:0}.cta{padding:0 10px;font-size:0;gap:0}.cta-icon{margin:0}.tempo input{width:38px}#metro,#undo,#redo{display:none}.transport{gap:4px}.seg button{padding:5px 7px}.tabs [role=tab]{padding:8px 9px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}