/* SPDX-License-Identifier: MIT */
.mix-timeline{margin:16px 0;padding:16px;background:#10161e;border:1px solid #344452;border-radius:14px;color:#e9f0f5;min-width:0;text-align:left;--label-width:190px}.mix-timeline *{box-sizing:border-box}.mix-timeline header,.timeline-transport,.timeline-tools,.timeline-edit-buttons,.timeline-fields{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.mix-timeline header{margin-bottom:12px}.mix-timeline header>div{margin-right:auto}.mix-timeline header small{color:#7e98a8;font-size:10px;letter-spacing:.15em}.mix-timeline h2{font-size:19px;margin:3px 0}.mix-timeline [data-id=clock]{font:600 21px ui-monospace,monospace;min-width:105px;color:#f0cf74}.mix-timeline button{min-height:44px;border:1px solid #465a6b;background:#1d2a36;color:#e8eff5;border-radius:7px;padding:8px 13px;font:600 13px system-ui;touch-action:manipulation;cursor:pointer}.mix-timeline button:hover{border-color:#e1bd5d}.mix-timeline button:disabled{opacity:.4;cursor:default}.mix-timeline button:focus-visible,.timeline-clip:focus-visible{outline:3px solid #4ad9e6;outline-offset:2px}.mix-timeline [data-a=play]{background:#dcb957;color:#101419}.mix-timeline [data-a=record]{background:#ab2348;border-color:#e35473;color:#fff}.mix-timeline [data-a=stop-take]:enabled{background:#e14e62;color:#fff}.timeline-transport{padding-bottom:10px;border-bottom:1px solid #293b48}.mix-timeline label{display:inline-flex;gap:5px;align-items:center;font:12px system-ui;color:#aebeca}.mix-timeline label small{font-size:10px;color:#7f94a3}.mix-timeline input{min-height:36px;color:#f1f5f8;background:#0b121a;border:1px solid #415564;border-radius:5px;padding:5px;font:13px system-ui}.mix-timeline input[type=number]{width:76px}.mix-timeline input[type=range]{accent-color:#4ad9e6;height:36px;width:100px;min-height:36px}.mix-timeline input[type=checkbox]{min-height:22px;width:22px;accent-color:#4ad9e6}.timeline-tools{padding:10px 0}.timeline-viewport{width:100%;max-height:540px;overflow:auto;border:1px solid #324553;border-radius:8px;overscroll-behavior:contain;position:relative;touch-action:pan-x pan-y}.timeline-surface{position:relative;min-width:100%;padding-bottom:10px}.timeline-ruler{display:flex;height:36px;position:sticky;top:0;background:#17222d;z-index:5;border-bottom:1px solid #3c5262}.timeline-ruler>[data-id=ruler]{position:relative;cursor:crosshair;flex-shrink:0}.timeline-ruler span{position:absolute;top:0;height:36px;border-left:1px solid #546977;padding:6px 4px;font:11px ui-monospace,monospace;color:#9eb5c5}.timeline-label{width:190px;min-width:190px;position:sticky;left:0;z-index:4;background:#16212c;border-right:1px solid #354c5e;padding:8px;flex-shrink:0}.timeline-ruler>.timeline-label{z-index:6;font:700 11px system-ui;letter-spacing:.12em;padding:11px}.timeline-track{display:flex;min-height:136px;border-bottom:1px solid #2a3b47}.timeline-track>.timeline-label>input[aria-label="Track name"]{width:100%;height:30px;min-height:30px;border:0;background:#0d1721;font-weight:600}.track-switches{display:flex;gap:3px;margin-top:4px}.mix-timeline .track-switches button{padding:3px;min-width:25px;min-height:36px;font-size:12px;flex:1}.track-switches button[aria-pressed=true]{background:#5e4930;color:#ffe38c;border-color:#f4c865}.timeline-track .timeline-label>input[type=range]{width:100%;height:26px;min-height:26px;margin:0}.timeline-lane{position:relative;flex-shrink:0;min-height:136px;background:repeating-linear-gradient(to right,transparent 0,transparent 119px,#263746 120px);overflow:hidden}.timeline-clip{position:absolute;top:18px;height:100px;border:1px solid var(--track-color,#4ad9e6);border-radius:6px;background:color-mix(in srgb,var(--track-color,#4ad9e6) 12%,#12202c);overflow:hidden;cursor:grab;touch-action:none;min-width:12px}.timeline-clip[aria-pressed=true]{box-shadow:inset 0 0 0 2px #fff;border-color:#fff}.timeline-clip canvas{width:100%;height:70px;display:block;pointer-events:none}.timeline-clip>span{display:block;position:absolute;top:75px;left:12px;right:12px;overflow:hidden;white-space:nowrap;font:11px system-ui;color:#edf5fa;pointer-events:none}.trim-handle{position:absolute;width:14px;top:0;height:100%;background:#ffffff0d;cursor:ew-resize}.trim-handle:after{content:'';position:absolute;top:35px;left:5px;height:24px;border-left:3px solid #fff9}.trim-handle.left{left:0}.trim-handle.right{right:0}.timeline-playhead{position:absolute;top:36px;bottom:10px;width:2px;background:#ffcf5a;pointer-events:none;z-index:3}.timeline-playhead:before{content:'';position:absolute;top:0;left:-4px;border:5px solid transparent;border-top-color:#ffcf5a}.mix-timeline .clip-tools{margin-top:12px;border:1px solid #354a59;padding:12px;border-radius:8px;display:flex;flex-direction:column;gap:10px}.mix-timeline .clip-tools>strong{font:600 13px system-ui;color:#cfdae3}.timeline-fields label{margin-right:6px}.mix-timeline [role=status],.timeline-empty{font:13px/1.6 system-ui;color:#9db0bd;margin:9px 0 0}.track-error,.track-loading{margin:30px 16px;font:13px system-ui;max-width:500px}.track-error{color:#ff9cb2}.live-take{position:absolute;top:18px;height:100px;min-width:100px;border:1px solid #ff6688;background:linear-gradient(#ab234855,#ab2348aa);box-shadow:inset 0 0 calc(30px * var(--level,0)) #ff6688;color:#fff;padding:8px;font:700 11px system-ui;white-space:nowrap}.mix-timeline audio{display:block;width:min(100%,500px);margin-top:10px}.mix-timeline audio[hidden]{display:none}@media(max-width:700px){.mix-timeline{padding:10px;margin:10px 0}.mix-timeline header{gap:7px}.mix-timeline header>div{flex-basis:calc(100% - 130px)}.mix-timeline header>button{flex:1}.timeline-transport>button{flex:1 1 100px}.timeline-tools>button{flex:1 1 90px}.timeline-edit-buttons>button{flex:1 1 90px}.timeline-fields>label{flex:1 1 130px}.timeline-fields>button{width:100%}.mix-timeline .track-switches button{min-height:44px}.timeline-track{min-height:144px}.timeline-lane{min-height:144px}.timeline-clip{height:108px}.mix-timeline .clip-tools{padding:8px}.timeline-viewport{max-height:480px}}@media(prefers-reduced-motion:reduce){.mix-timeline *{animation:none!important;transition:none!important}}
.live-take canvas{display:block;width:100%;height:70px;pointer-events:none}
.mix-timeline select{min-height:44px;max-width:170px;background:#14222f;color:#dbe7ef;border:1px solid #465a6b;border-radius:7px;padding:7px;font:12px system-ui}.mix-timeline button[hidden]{display:none}
.mix-timeline .track-switches button{min-height:44px}.timeline-track>.timeline-label>input[aria-label="Track name"]{font-size:14px}@media(pointer:coarse){.trim-handle{width:24px}.trim-handle:after{left:10px}.timeline-clip>span{left:25px;right:25px}}

.keep-vocal{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:600 12px system-ui;color:#cbd9e3;white-space:nowrap}.keep-vocal input{width:20px;height:20px;accent-color:#e0bd62}
.record-strip{flex-wrap:wrap;max-width:100%}.keep-vocal{flex-shrink:0}