.loop-deck-embed{--ld-braun-orange: #ff5500;--ld-braun-green: #00b06c;--ld-crop-fill: rgba(255, 85, 0, .12);--ld-font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;--ld-wave-h: 140px;--ld-timeline-h: 32px;--ld-bg-color: var(--code-bg);--ld-panel-bg: var(--bg-surface);--ld-text-main: var(--text-main);--ld-text-muted: var(--text-muted);--ld-border-color: var(--border-color);--ld-surface-inset: color-mix(in srgb, var(--border-color) 35%, var(--bg-surface));--ld-wave-bg: color-mix(in srgb, var(--border-color) 55%, var(--bg-surface));--ld-wave-fill: color-mix(in srgb, var(--text-main) 42%, var(--code-bg));--ld-wave-dim: color-mix(in srgb, var(--bg-base) 55%, transparent);--ld-timeline-line: color-mix(in srgb, var(--border-color) 80%, var(--text-muted));--ld-timeline-tick: color-mix(in srgb, var(--border-color) 65%, var(--text-muted));--ld-timeline-edge: var(--text-muted);--ld-timeline-text: var(--text-muted);--ld-playhead: #ef4444;--ld-trim-line: var(--text-main);--ld-trim-label-bg: color-mix(in srgb, var(--bg-surface) 82%, var(--text-main));--ld-trim-label-text: var(--text-main);--ld-btn-top: var(--bg-surface);--ld-btn-bottom: color-mix(in srgb, var(--border-color) 45%, var(--bg-surface));--ld-btn-label: var(--text-main);--ld-btn-border: var(--border-color);--ld-shadow: 0 16px 40px var(--shadow-card);--ld-led-idle: color-mix(in srgb, var(--text-muted) 55%, var(--border-color));--ld-switch-knob: #ffffff;position:relative;box-sizing:border-box;display:flex;justify-content:center;width:100%;color:var(--ld-text-main)}html[data-theme=dark] .loop-deck-embed{--ld-bg-color: color-mix(in srgb, var(--bg-base) 70%, #0b0f17);--ld-surface-inset: color-mix(in srgb, var(--bg-base) 55%, #090a0d);--ld-wave-bg: #07080a;--ld-wave-fill: #8b93a7;--ld-wave-dim: rgba(0, 0, 0, .72);--ld-timeline-line: #2a2a2a;--ld-timeline-tick: #383838;--ld-timeline-edge: #525252;--ld-timeline-text: #737373;--ld-trim-label-bg: rgba(0, 0, 0, .72);--ld-trim-label-text: #fff;--ld-btn-top: #1c1e26;--ld-btn-bottom: #12131a;--ld-btn-label: #e8e8e8;--ld-shadow: 0 24px 48px rgba(0, 0, 0, .45);--ld-led-idle: #444;--ld-switch-knob: #f4f4f6}.loop-deck-embed .ld-drop-overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;border-radius:12px;background:color-mix(in srgb,var(--ld-bg-color) 75%,var(--ld-text-main));color:var(--ld-text-main);font-family:var(--ld-font-mono);font-size:14px;font-weight:600;pointer-events:none}.loop-deck-embed .ld-drop-overlay[hidden]{display:none}.loop-deck-embed .editor-container{width:100%;max-width:760px;padding:32px;background-color:var(--ld-panel-bg);border:1px solid var(--ld-border-color);border-radius:8px;box-shadow:var(--ld-shadow)}.loop-deck-embed .ld-tabs{margin-top:4px}.loop-deck-embed .ld-tab-list{display:flex;gap:4px;padding:4px;border:1px solid var(--ld-border-color);border-radius:6px;background:var(--ld-surface-inset);margin-bottom:20px}.loop-deck-embed .ld-tab{flex:1;padding:8px 12px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--ld-text-muted);font-family:var(--ld-font-mono);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}.loop-deck-embed .ld-tab:hover{color:var(--ld-text-main);background:color-mix(in srgb,var(--ld-panel-bg) 70%,var(--ld-border-color))}.loop-deck-embed .ld-tab.is-active{color:var(--ld-text-main);background:var(--ld-panel-bg);border-color:var(--ld-border-color);box-shadow:0 1px 2px var(--shadow-card)}.loop-deck-embed .ld-tab-panel .control-grid{margin-bottom:16px}.loop-deck-embed .ld-tab-panel .matrix-row-compact{margin-bottom:0;padding-top:0;border-top:none}.loop-deck-embed .deck-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px dashed var(--ld-border-color);padding-bottom:14px;margin-bottom:20px;gap:16px}.loop-deck-embed .deck-header .ld-status-line{flex:1;min-width:0;margin:0}.loop-deck-embed .file-input-wrapper{position:relative;flex-shrink:0}.loop-deck-embed .file-btn{padding:8px 16px;border:1px solid var(--ld-text-main);font-family:var(--ld-font-mono);font-size:11px;font-weight:700;background:transparent;color:var(--ld-text-main);cursor:pointer;border-radius:2px;transition:background .15s ease,color .15s ease}.loop-deck-embed .file-btn:hover{background:var(--ld-text-main);color:var(--ld-panel-bg)}.loop-deck-embed #loopDeckAudioFile{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.loop-deck-embed .ld-viz-stack{position:relative;border:1px solid var(--ld-border-color);border-radius:4px;overflow:hidden;background:var(--ld-wave-bg);margin-bottom:8px}.loop-deck-embed .ld-viz{position:relative;height:var(--ld-wave-h);cursor:crosshair;border-bottom:1px solid var(--ld-border-color)}.loop-deck-embed .ld-viz.is-scrubbing{cursor:ew-resize}.loop-deck-embed .ld-viz.is-selecting{cursor:crosshair;user-select:none}.loop-deck-embed #loopDeckWaveCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}.loop-deck-embed .ld-selection-box{position:absolute;top:0;height:100%;background:color-mix(in srgb,var(--ld-braun-orange) 18%,transparent);border-left:1px solid color-mix(in srgb,var(--ld-braun-orange) 55%,transparent);border-right:1px solid color-mix(in srgb,var(--ld-braun-orange) 55%,transparent);pointer-events:none;z-index:1}.loop-deck-embed .ld-selection-box[hidden]{display:none}.loop-deck-embed .ld-timeline{position:relative;height:var(--ld-timeline-h);background:color-mix(in srgb,var(--ld-wave-bg) 88%,var(--ld-border-color))}.loop-deck-embed #loopDeckTimelineCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}.loop-deck-embed .ld-trim-overlay{position:absolute;inset:0;pointer-events:none;z-index:2}.loop-deck-embed .ld-trim-line{position:absolute;top:0;bottom:0;width:2px;transform:translate(-50%);background:color-mix(in srgb,var(--ld-trim-line) 92%,transparent);box-shadow:0 0 4px color-mix(in srgb,var(--ld-trim-line) 25%,transparent)}.loop-deck-embed .ld-trim-label{position:absolute;top:calc(var(--ld-wave-h) - 21px);font-size:10px;line-height:1.2;font-family:var(--ld-font-mono);font-variant-numeric:tabular-nums;color:var(--ld-trim-label-text);white-space:nowrap;background:var(--ld-trim-label-bg);padding:2px 6px;border-radius:3px;border:1px solid color-mix(in srgb,var(--ld-border-color) 70%,var(--ld-text-main))}.loop-deck-embed .ld-trim-tag{color:var(--ld-text-muted);margin-right:2px}.loop-deck-embed .ld-playhead{position:absolute;top:0;left:0;bottom:0;width:1px;background:var(--ld-playhead);box-shadow:0 0 6px color-mix(in srgb,var(--ld-playhead) 45%,transparent);pointer-events:none;z-index:3;transform:translate(0);will-change:transform}.loop-deck-embed .ld-playhead.is-dragging{box-shadow:0 0 10px color-mix(in srgb,var(--ld-playhead) 70%,transparent)}.loop-deck-embed .ld-playhead-handle{position:absolute;top:0;left:50%;transform:translate(-50%);width:16px;height:var(--ld-wave-h);cursor:ew-resize;pointer-events:auto;z-index:4}.loop-deck-embed .ld-playback-info{display:flex;justify-content:space-between;font-family:var(--ld-font-mono);font-size:10px;color:var(--ld-text-muted);margin-bottom:20px}.loop-deck-embed .ld-playback-info strong{color:var(--ld-text-main);font-weight:600}.loop-deck-embed .control-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.loop-deck-embed .control-block{display:flex;flex-direction:column;gap:8px}.loop-deck-embed .control-block label{font-family:var(--ld-font-mono);font-size:10px;color:var(--ld-text-muted);font-weight:700;display:flex;justify-content:space-between}.loop-deck-embed .control-block label span{color:var(--ld-text-main)}.loop-deck-embed input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--ld-border-color);outline:none;margin:12px 0}.loop-deck-embed input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:18px;background:var(--ld-text-main);cursor:pointer;border-radius:1px}.loop-deck-embed input[type=range]::-moz-range-thumb{width:10px;height:18px;background:var(--ld-text-main);cursor:pointer;border:none;border-radius:1px}.loop-deck-embed input[type=range]:disabled{opacity:.45;cursor:not-allowed}.loop-deck-embed input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed}.loop-deck-embed #loopDeckStartSlider::-webkit-slider-thumb,.loop-deck-embed #loopDeckEndSlider::-webkit-slider-thumb,.loop-deck-embed #loopDeckStartSlider::-moz-range-thumb,.loop-deck-embed #loopDeckEndSlider::-moz-range-thumb{background:var(--ld-braun-orange)}.loop-deck-embed .matrix-row{border-top:1px dashed var(--ld-border-color);padding-top:24px;margin-bottom:16px}.loop-deck-embed .matrix-row-switches{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:12px}.loop-deck-embed .ld-status-line{display:flex;align-items:center;gap:8px;min-height:1em}.loop-deck-embed .ld-status-dot{width:6px;height:6px;border-radius:50%;background:var(--ld-led-idle);flex-shrink:0;transition:background .15s ease,box-shadow .15s ease}.loop-deck-embed .ld-status-dot.is-warn{background:var(--ld-braun-orange);box-shadow:0 0 6px color-mix(in srgb,var(--ld-braun-orange) 45%,transparent)}.loop-deck-embed .ld-status-dot.is-ok{background:var(--ld-braun-green);box-shadow:0 0 6px color-mix(in srgb,var(--ld-braun-green) 45%,transparent)}.loop-deck-embed .switch-box{display:flex;align-items:center;justify-content:space-between;background:var(--ld-surface-inset);border:1px solid var(--ld-border-color);padding:12px 16px;border-radius:4px}.loop-deck-embed .switch-box-wide{grid-column:span 2}.loop-deck-embed .ld-inline-label{font-family:var(--ld-font-mono);font-size:10px;font-weight:700;color:var(--ld-text-muted)}.loop-deck-embed .ld-status-text{font-family:var(--ld-font-mono);font-size:10px;color:var(--ld-text-muted);line-height:1.2}.loop-deck-embed .switch-track{width:44px;height:22px;background:var(--ld-border-color);border-radius:11px;position:relative;cursor:pointer;flex-shrink:0}.loop-deck-embed .switch-knob{width:16px;height:16px;background:var(--ld-switch-knob);border-radius:8px;position:absolute;top:3px;left:3px;transition:transform .2s;box-shadow:0 1px 2px #0000002e}.loop-deck-embed .switch-track.active{background-color:var(--ld-braun-green)}.loop-deck-embed .switch-track.active .switch-knob{transform:translate(22px)}.loop-deck-embed .button-matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;border:1px solid var(--ld-btn-border);padding:6px;background:var(--ld-surface-inset);border-radius:4px}.loop-deck-embed .button-matrix-2{margin-top:10px;grid-template-columns:repeat(2,1fr)}.loop-deck-embed .matrix-btn{height:54px;background:linear-gradient(to bottom,var(--ld-btn-top),var(--ld-btn-bottom));border:1px solid var(--ld-btn-border);border-radius:3px;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;color:var(--ld-btn-label);transition:background .15s ease,border-color .15s ease}.loop-deck-embed .matrix-btn:hover{border-color:color-mix(in srgb,var(--ld-btn-border) 50%,var(--ld-text-main))}.loop-deck-embed .matrix-btn:active{background:var(--ld-border-color)}.loop-deck-embed .matrix-btn-label{font-family:var(--ld-font-mono);font-size:9px;font-weight:700;color:inherit;pointer-events:none;text-align:center;line-height:1.3}.loop-deck-embed .led-indicator{width:5px;height:5px;border-radius:50%;background-color:var(--ld-led-idle);flex-shrink:0}.loop-deck-embed .led-orange.active{background-color:var(--ld-braun-orange);box-shadow:0 0 6px var(--ld-braun-orange)}@media(max-width:640px){.loop-deck-embed .editor-container{padding:20px 16px}.loop-deck-embed .deck-header{flex-wrap:wrap;align-items:stretch}.loop-deck-embed .deck-header .file-input-wrapper,.loop-deck-embed .deck-header .file-btn{width:100%}.loop-deck-embed .control-grid,.loop-deck-embed .matrix-row{grid-template-columns:1fr}.loop-deck-embed .ld-tab{padding:8px 6px;font-size:9px}.loop-deck-embed .switch-box-wide{grid-column:span 1}.loop-deck-embed .button-matrix{grid-template-columns:1fr}}