:root{color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,sans-serif;background:#f6f6f6;color:#0a0a0a;--bg: #f6f6f6;--surface: #ffffff;--surface-strong: #ffffff;--ink: #0a0a0a;--muted: #4f4f4f;--line: #d6d6d6;--accent: #0070f3;--accent-ink: #ffffff;--accent-strong: #0a0a0a;--shadow: rgba(0, 0, 0, .12);--soft-shadow: rgba(0, 0, 0, .06)}*{box-sizing:border-box}body{margin:0;min-height:100vh;-webkit-user-select:none;user-select:none;background:radial-gradient(circle at 20% 20%,#fff,#f7f7f7,#f0f0f0);color:var(--ink)}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.03) 0 1px,transparent 1px 5px);opacity:.12;pointer-events:none;z-index:0}#root{min-height:100vh}.app{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;gap:16px;padding:22px clamp(14px,3vw,44px) 28px;position:relative;z-index:1}.app__header{display:grid;gap:10px;border:1px solid var(--line);padding:12px 16px;background:#ffffffe6;box-shadow:0 10px 30px var(--soft-shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:0;z-index:10;-webkit-user-select:text;user-select:text;border-radius:14px}.app__brand{font-size:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em}.app__project{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}.app__status{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.perf-panel{display:flex;align-items:baseline;gap:10px;padding:5px 10px;border:1px solid var(--line);background:var(--surface);font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;min-width:200px;border-radius:999px}.perf-panel__label{font-weight:600}.perf-panel__metric{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-variant-numeric:tabular-nums}.app__header-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.app__header-row--primary{align-items:flex-start;justify-content:space-between}.app__header-row--secondary{justify-content:space-between;gap:16px}.app__main{display:grid;grid-template-columns:1fr;gap:16px}.panel{border:1px solid var(--line);background:var(--surface-strong);padding:14px;display:grid;gap:10px;border-radius:16px;box-shadow:0 10px 20px var(--soft-shadow)}.panel.transport{background:var(--surface)}.panel__title{display:flex;justify-content:space-between;align-items:center;font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.8rem}.panel__actions{display:flex;gap:8px}.clip-rack .panel__actions button{font-weight:400}.session-bar__field{display:grid;gap:6px;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em}.session-bar__field input,.session-bar__field select{border:1px solid var(--line);padding:8px 10px;font:inherit;background:var(--surface-strong);border-radius:10px}.session-bar__field select:disabled{opacity:.6}.session-bar__input{display:none}.app__header-hint{font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);flex:1}.session-bar__group--export{display:flex;gap:8px;flex-wrap:wrap}.session-bar__details{border:1px solid var(--line);padding:6px 8px;background:var(--surface-strong);min-width:240px;border-radius:12px}.session-bar__details summary{cursor:pointer;text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;list-style:none}.session-bar__details summary::-webkit-details-marker{display:none}.session-bar__details-body{display:grid;gap:10px;margin-top:10px}.deck-stack__list{display:grid;gap:10px;grid-template-columns:1fr}.deck-stack__header{display:flex;justify-content:flex-end;margin-bottom:12px}.deck-stack__list>.deck:only-child{grid-column:1 / -1}.deck{border:1px solid var(--line);padding:14px;display:grid;gap:10px;background:var(--surface-strong);border-radius:16px;box-shadow:0 10px 22px var(--soft-shadow)}.deck__header{display:flex;justify-content:space-between;align-items:center;font-size:.76rem;text-transform:uppercase;letter-spacing:.14em}.deck__label-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1}.deck__label{display:inline-flex;align-items:baseline;gap:10px;min-width:0}.deck__label-text{font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.8rem}.deck__title{font-size:.66rem;letter-spacing:.08em;text-transform:none;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}.deck__actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-start}.deck__action{padding:4px 6px;font-size:.7rem}.deck__meta{display:flex;align-items:center;gap:10px;color:var(--muted)}.deck__bpm-summary{display:inline-flex;align-items:center;gap:8px;font-size:.64rem;letter-spacing:.12em}.deck__status{font-size:.7rem}.deck__status--loading{color:#7a4b00}.deck__status--playing{color:#0b5d4a}.deck__status--error{color:#9c1f1f}.deck__remove{padding:4px 8px;font-size:.75rem}.deck__waveform{position:relative;height:110px;margin-top:18px;border:1px dashed var(--line);display:grid;place-items:center;background:linear-gradient(120deg,#fff,#f6f6f6);overflow:visible;border-radius:12px}.deck__waveform-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:stretch}.deck__waveform-side{display:grid;grid-template-rows:auto 1fr;gap:10px;align-items:start}.deck__waveform canvas{width:100%;height:100%;display:block}.deck__waveform-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.deck__loop-region{position:absolute;top:0;bottom:0;background:#0074ff14;pointer-events:none;opacity:.2;transition:opacity .25s ease}.deck__loop-region.is-active{opacity:1}.deck__loop-handle{position:absolute;top:-24px;width:40px;height:24px;margin-left:-20px;background:var(--accent);color:var(--accent-ink);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;display:grid;place-items:center;border:1px solid var(--accent);cursor:grab;-webkit-user-select:none;user-select:none;opacity:.35;transition:opacity .25s ease;pointer-events:auto;border-radius:999px}.deck__loop-handle.is-active{opacity:1}.deck__loop-handle:active{cursor:grabbing}.deck__loop-connector{position:absolute;top:-14px;height:6px;background:var(--accent);left:0;width:0;border-radius:999px;opacity:.35;cursor:grab;pointer-events:auto;transition:opacity .25s ease}.deck__loop-connector.is-active{opacity:.9}.deck__waveform--empty{color:#222}.deck__waveform--interactive{cursor:pointer}.deck__waveform--interactive:active{cursor:grabbing}.deck__controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;row-gap:10px}.deck__file-input{display:none}.deck__gain-knob{display:grid;justify-items:center}.deck__zoom{display:grid;gap:6px;font-size:.66rem;text-transform:uppercase;letter-spacing:.14em}.deck__zoom-controls{display:grid;grid-template-columns:repeat(3,auto);gap:6px;align-items:center}.deck__zoom-button,.deck__zoom-readout{padding:6px 8px;font-size:.66rem}.deck__zoom-readout{min-width:48px}.deck__bpm-slider input{width:100%}.deck__bpm-slider--vertical{display:grid;justify-items:center;gap:8px;font-size:.6rem;text-transform:uppercase;letter-spacing:.14em}.deck__bpm-slider--vertical input{writing-mode:bt-lr;-webkit-appearance:slider-vertical;width:18px;height:90px}.deck__pitch-sync{display:inline-flex;align-items:center;gap:6px;font-size:.62rem;text-transform:none}.knob.is-disabled{opacity:.5}.knob.is-disabled .knob__control{cursor:not-allowed}.automation-lane.is-disabled{opacity:.6}.deck__bpm-toggle{display:flex;align-items:center;justify-content:space-between;font-size:.64rem;text-transform:uppercase;letter-spacing:.14em}.deck__bpm-status{font-size:.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:.14em}.deck__fx{border-top:1px dashed var(--line);padding-top:8px;display:grid;gap:6px;font-size:.7rem;text-transform:uppercase;letter-spacing:.14em}.deck__fx-title{color:var(--muted)}.deck__fx-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;text-align:center}.deck__fx-row--single{grid-template-columns:repeat(2,minmax(0,1fr))}.deck__fx-row--eq{grid-template-columns:repeat(3,minmax(0,1fr))}.deck__fx-unit{border:1px solid var(--line);padding:6px;background:var(--surface);display:grid;gap:6px;border-radius:10px;position:relative}.deck__fx-unit-title{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.deck__fx-hint{position:absolute;top:0;right:0;width:0;height:0;border-top:18px solid #e7e9ef;border-left:18px solid transparent;border-top-right-radius:8px;box-shadow:inset -1px -1px #0000001f;cursor:help;-webkit-user-select:none;user-select:none}.deck__fx-unit--span-2{grid-column:span 2}.deck__stretch-grid{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}.deck__stretch-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;row-gap:10px;justify-items:center}.deck-stack__list--single .deck__stretch-controls{grid-template-columns:repeat(4,minmax(0,1fr))}.deck__delay-controls{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;row-gap:10px;justify-items:center}.deck__delay-toggle{display:grid;gap:6px;justify-items:center;font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.deck__delay-toggle input{width:16px;height:16px}.deck__fx-actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;row-gap:4px;column-gap:10px;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase}.deck__fx-actions .deck__action{font-size:.6rem}.knob{display:grid;gap:6px;justify-items:center}.knob--compact{gap:10px}.knob--compact .knob__label{font-size:.54rem;letter-spacing:.12em}.knob--compact .knob__control{width:48px;height:48px}.knob--compact .knob__dial{width:40px;height:40px}.knob--compact .knob__value{font-size:.54rem;gap:4px}.knob--compact .knob__fine{font-size:.48rem;letter-spacing:.12em}.knob__label{font-size:.62rem;letter-spacing:.14em}.knob__control{width:64px;height:64px;border-radius:999px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:ew-resize;outline:none;box-shadow:inset 0 0 0 1px #0000000d}.knob__control.is-dragging{background:#0070f326}.knob__dial{width:54px;height:54px}.knob__ring{fill:none;stroke:#111;stroke-width:1.5}.knob__indicator{stroke:#111;stroke-width:3;stroke-linecap:round}.knob__value{font-size:.62rem;color:var(--muted);display:inline-flex;gap:6px;align-items:center}.knob__fine{font-size:.56rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}.automation-lane{display:grid;gap:6px}.automation-lane__header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;row-gap:4px;column-gap:10px;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase}.automation-lane__actions{display:inline-flex;gap:6px;flex-wrap:wrap}.automation-lane__toggle,.automation-lane__reset{padding:4px 8px;font-size:.6rem}.automation-lane__toggle.is-active{background:#0070f326;color:var(--ink)}.automation-lane__canvas{border:1px solid var(--line);background:#fafafa;cursor:crosshair;position:relative;overflow:hidden}.automation-lane__canvas canvas{display:block;width:100%;height:70px}.automation-lane__playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);opacity:0;pointer-events:none;transform:translate(0);will-change:transform}.automation-lane__value{font-size:.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:.14em}button{border:1px solid var(--line);background:var(--surface);font:inherit;padding:5px 9px;font-size:.68rem;text-transform:uppercase;letter-spacing:.18em;border-radius:999px;transition:box-shadow .2s ease,background .2s ease,border-color .2s ease;cursor:pointer}button.is-active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}button:hover{background:#f5f5f5;color:var(--ink);box-shadow:0 6px 14px #0000000a}button:active{box-shadow:none}.fx--global{background:var(--surface)}.fx__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.fx__unit{border:1px solid var(--line);padding:12px;text-align:center;background:#fafafa;border-radius:14px}.clip-rack{background:var(--surface);display:grid;gap:10px}.clip-rack__meta{display:flex;gap:12px;font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}.clip-rack__error{font-size:.68rem;color:#9c1f1f}.clip-rack__list{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.clip-rack__empty{font-size:.68rem;color:var(--muted)}.clip-rack__clip{border:1px solid var(--line);padding:8px;background:var(--surface-strong);display:grid;gap:6px;border-radius:10px}.clip-rack__clip-waveform{border:1px solid var(--line);background:#f6f6f6;height:44px;border-radius:8px}.clip-rack__clip-waveform canvas{display:block;width:100%;height:100%}.clip-rack__clip-info{display:flex;justify-content:space-between;font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;gap:8px;min-width:0}.clip-rack__clip-info span:first-child{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clip-rack__clip-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:space-between}.clip-rack__clip-loads{display:flex;gap:6px;flex-wrap:wrap}.transport__record{border:1px solid var(--line);background:var(--surface-strong)}.transport__controls{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}.transport__export{display:flex;align-items:center;gap:10px}.transport__export label{display:inline-flex;align-items:center;gap:8px;font-size:.68rem;text-transform:uppercase;letter-spacing:.14em}.transport__export input{width:70px;padding:4px 6px;border:1px solid var(--line);font-size:.68rem;border-radius:8px}@keyframes rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.app__header,.panel,.clip-rack,.deck{animation:rise .5s ease both}@media (max-width: 900px){.deck-stack__list{grid-template-columns:1fr}.deck__controls,.deck__fx-row{grid-template-columns:repeat(2,minmax(0,1fr))}.deck__stretch-grid,.app__header{grid-template-columns:1fr}.app__header-row{align-items:stretch}.app__header-row--secondary{flex-direction:column;align-items:flex-start}.session-bar__row--primary{grid-template-columns:1fr;align-items:stretch;min-width:0}.session-bar__group--export{width:100%;justify-content:flex-start}.session-bar__details{width:100%}}@media (min-width: 1200px){.deck__fx{grid-template-columns:repeat(5,minmax(0,1fr))}.deck__fx-title{grid-column:1 / -1}.deck__fx-row{display:contents}}@media (min-width: 1500px){.deck-stack__list{grid-template-columns:repeat(2,minmax(0,1fr))}.deck-stack__list--single .deck__fx{grid-template-columns:repeat(7,minmax(0,1fr))}}
