@font-face{font-family:InterTimeline;src:url('/api/timeline/font') format('opentype');font-weight:500;font-display:swap}nav{flex-wrap:wrap}#timeline .tl-workspace{display:grid;grid-template-columns:230px minmax(240px,1fr) 290px;gap:16px;margin-top:20px}#timeline aside,#timeline article{padding:16px;min-width:0}#timeline .tl-preview-panel{display:flex;flex-direction:column;align-items:center;background:#2b2b2b}#tl-canvas{width:min(100%,250px);height:auto;aspect-ratio:9/16;background:#181818;touch-action:none;cursor:move}#timeline input[type=checkbox]{display:inline-block;margin-right:5px}#timeline .tl-tools{padding:16px 0}#timeline .tl-tools label{display:flex;gap:8px;align-items:center}#tl-zoom{width:100px}#tl-assets{display:grid;gap:10px;max-height:400px;overflow:auto}#tl-assets .tl-asset{border:1px solid #505050;border-left:4px solid #32896e;border-radius:6px;padding:8px;overflow-wrap:anywhere}#tl-assets button{padding:5px 8px;margin:5px 4px 0 0}#tl-assets canvas{width:100%;height:26px}#tl-audition{width:100%;margin-top:12px}#tl-status{min-height:24px}#timeline .tl-scroll{overflow-x:auto;background:#202020;border:1px solid #484848;border-radius:8px;padding-bottom:8px}#tl-tracks{min-width:100%}.tl-row{display:flex;height:56px;position:relative;border-bottom:1px solid #414141}.tl-label{position:sticky;left:0;background:#2b2b2b;width:105px;flex-shrink:0;z-index:4;display:flex;align-items:center;padding:8px;font-size:13px}.tl-lane{flex:1;position:relative;background:repeating-linear-gradient(to right,transparent,transparent 47px,#393939 48px)}#timeline .tl-clip{position:absolute;top:5px;height:45px;border-radius:4px;border:1px solid #5b86aa;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:4px 9px;font-size:12px;text-align:left;touch-action:none;cursor:grab;background:#294963;color:#e0edfa}#timeline .tl-clip.text{background:#584a25;border-color:#a48a43;color:#ffedb4}#timeline .tl-clip.sound{background:#264e43;border-color:#528d79;color:#d1f1e5}#timeline .tl-clip.chosen{outline:2px solid #285fa5;outline-offset:1px}#timeline .tl-clip canvas{position:absolute;inset:17px 0 0;width:100%;height:22px;pointer-events:none;opacity:.6}#timeline .tl-handle{position:absolute;right:0;top:0;bottom:0;width:8px;background:#0002;cursor:ew-resize}#timeline .tl-head{position:absolute;top:0;bottom:0;width:2px;background:#d83355;z-index:3;pointer-events:none}#timeline .tl-tick{position:absolute;top:10px;font-size:12px;color:#b4b4b4}#timeline .tl-ruler{height:34px}#tl-inspector label{margin-bottom:10px}#tl-inspector .tl-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}#tl-inspector textarea{min-height:75px}#timeline .tl-primary{background:#285fa5;color:white}#timeline .tl-locked{opacity:.65}#timeline .tl-error{color:#ff9ca8}@media(max-width:1100px){#timeline .tl-workspace{grid-template-columns:190px 1fr}#timeline .tl-workspace>aside:last-child{grid-column:1/-1}#tl-inspector{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}}@media(max-width:650px){#timeline .tl-workspace{display:flex;flex-direction:column}#tl-inspector{display:block}#timeline .actions{align-items:stretch}#tl-canvas{max-width:220px}}

#timeline .tl-label{flex-wrap:wrap;gap:3px}#timeline .tl-label button{font-size:11px;padding:2px 4px;border-radius:3px}#timeline .tl-label button[aria-pressed=true]{background:#285fa5;color:white}
@media(min-width:1101px){body:has(#studio:not([hidden]) #timeline:not([hidden])) main{padding-top:10px}body:has(#studio:not([hidden]) #timeline:not([hidden])) header{padding:14px 4%}body:has(#studio:not([hidden]) #timeline:not([hidden])) #notice:empty{display:none}body:has(#studio:not([hidden]) #timeline:not([hidden])) nav{gap:6px;margin-bottom:14px;padding-bottom:10px}body:has(#studio:not([hidden]) #timeline:not([hidden])) nav button{font-size:14px;padding:8px 10px}#timeline h1{font-size:24px;margin:0}#timeline .eyebrow{display:none}#timeline .heading{margin:8px 0}#tl-status{margin:8px 0;font-size:14px}#timeline>.actions label{font-size:12px}#timeline>.actions button{padding:7px 10px;font-size:14px}#timeline .tl-workspace{height:clamp(300px,40vh,380px);margin-top:12px}#timeline .tl-workspace>aside{overflow-y:auto}#timeline .tl-preview-panel{padding:12px;overflow:hidden}#tl-canvas{height:calc(clamp(300px,40vh,380px) - 145px);width:auto;max-width:100%;flex-shrink:0}#timeline .tl-preview-panel .actions{gap:8px;flex-wrap:nowrap}#timeline .tl-preview-panel label{font-size:12px;margin:0}#timeline .tl-preview-panel button{font-size:13px;padding:6px 10px}#timeline .tl-preview-panel p{font-size:12px;margin:6px 0}#tl-scrub{padding:0;margin:5px 0}#tl-clock{font-size:12px}#timeline .tl-tools{padding:10px 0}#timeline .tl-tools button{font-size:13px;padding:6px 9px}#timeline .tl-row{height:40px}#timeline .tl-ruler{height:30px}#timeline .tl-clip{height:32px;top:3px}#timeline .tl-clip canvas{height:16px;top:13px}#tl-inspector h2{font-size:16px}}

#timeline .tl-workspace{height:clamp(480px,65vh,720px)}
#timeline .tl-preview-panel{min-height:0;overflow:hidden;gap:6px}
#tl-preview-viewport{flex:1;min-height:0;width:100%;overflow:auto;background:#181818;border-radius:6px;padding:8px}
#tl-canvas{display:block;max-width:none;margin:0 auto;flex-shrink:0}
#tl-preview-zoom{width:100px;padding:0;margin:0}
#timeline .tl-preview-panel .actions{flex-wrap:wrap;justify-content:center;flex-shrink:0}
#timeline .tl-preview-panel.tl-expanded{position:fixed;inset:12px;z-index:1000;margin:0;box-shadow:0 0 0 40px #000000cc}
#sfx-list audio{width:100%;max-width:100%}#sfx-list article{overflow-wrap:anywhere}
#timeline-render{margin-top:28px;border-top:1px solid #484848;padding-top:16px}
#timeline-render details{padding:16px;background:#2b2b2b;border-radius:10px;margin-top:16px}
#category-create{margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid #414141}
@media(max-width:1100px){#timeline .tl-workspace{height:auto}#timeline .tl-preview-panel{height:540px}#timeline .tl-preview-panel.tl-expanded{height:auto}}
@media(max-width:650px){#timeline .tl-workspace>aside:first-child{max-height:220px;overflow:auto}#timeline .tl-preview-panel{height:560px}}

#timeline .tl-label{width:190px;flex-wrap:nowrap;gap:4px;padding:5px 8px}
#timeline .tl-label>span{min-width:43px}
#timeline .tl-label button{min-width:23px;height:26px;padding:3px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
#timeline .tl-monitor svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#timeline .tl-monitor[aria-pressed=true],#tl-audio-only[aria-pressed=true]{background:#7a3e16;color:#fff;border-color:#7a3e16}
#timeline .tl-preview-off .tl-clip{opacity:.4}#timeline .tl-preview-off .tl-clip.chosen{opacity:.7}
#timeline .tl-handle{width:12px;z-index:2;background:#0002}
#timeline .tl-handle-left{left:0;right:auto}
#timeline .tl-handle::after{content:'';position:absolute;top:25%;bottom:25%;left:5px;border-left:2px solid #ffffff80}
#timeline .tl-clip.chosen .tl-handle,#timeline .tl-clip:hover .tl-handle{background:#135cb950}
#timeline .tl-clip:has(.tl-handle-left){padding-left:15px;padding-right:15px}
#tl-drag-tip{position:fixed;z-index:1200;pointer-events:none;background:#383838;color:#fff;padding:8px 12px;border-radius:6px;font-size:13px;max-width:calc(100vw - 16px);box-shadow:0 2px 10px #0003}
#tl-preview-state{font-size:13px;margin:2px 0 10px}

/* Keep preview, transport and tracks together inside one screen-sized editor. */
#tl-editor{scroll-margin-top:12px;min-width:0}
#timeline .tl-transport{padding:6px 0;min-width:0}
#timeline .tl-transport .actions{gap:8px;align-items:center}
#timeline .tl-transport button{padding:6px 10px;font-size:13px}
#timeline .tl-transport label{margin:0;font-size:12px}
#tl-preview-state{margin:4px 0 0;font-size:12px}
#timeline .tl-scroll{position:relative;overscroll-behavior:contain;scrollbar-gutter:stable}
#timeline .tl-scrub-row{position:sticky;top:0;height:30px;z-index:7;background:#2b2b2b}
#timeline .tl-ruler:not(.tl-scrub-row){position:sticky;top:30px;z-index:6;background:#2b2b2b}
#timeline .tl-scrub-row .tl-lane{display:flex;align-items:center;background:#2b2b2b}
#timeline #tl-scrub{width:100%;min-width:0;padding:0;margin:0;height:24px;cursor:ew-resize;accent-color:#285fa5}
#timeline .tl-invalid{border:2px solid #ed8394;box-shadow:inset 0 0 0 1px #fff}
#tl-sfx-errors{margin:10px 0;padding:10px;background:#40272c;border:1px solid #ed8394;border-radius:8px;max-height:160px;overflow:auto}
#tl-sfx-errors strong{display:block;color:#ff9ca8}
#tl-sfx-errors button{display:block;text-align:left;margin-top:6px;color:#ff9ca8;padding:5px 8px;font-size:13px}
#tl-inspector .tl-source-range{font-size:13px;background:#2b2b2b;padding:8px;border-radius:5px}
@media(min-width:900px){
 #tl-editor{height:calc(100dvh - 24px);min-height:480px;display:grid;grid-template-rows:minmax(180px,1fr) auto auto minmax(150px,1fr);gap:0}
 #timeline #tl-editor .tl-workspace{height:auto;min-height:0;margin:0;grid-template-columns:clamp(170px,17vw,230px) minmax(200px,1fr) clamp(220px,21vw,290px);gap:12px}
 #timeline #tl-editor .tl-workspace>aside{grid-column:auto;overflow:auto;min-height:0;padding:12px}
 #timeline #tl-editor #tl-inspector{display:block}
 #timeline #tl-editor .tl-preview-panel{height:auto;min-height:0;padding:8px;margin:0}
 #timeline #tl-editor .tl-workspace>aside:first-child{display:flex;flex-direction:column}
 #timeline #tl-editor .tl-workspace>aside:first-child>h2,#timeline #tl-editor .tl-workspace>aside:first-child>p{margin:0 0 8px;flex-shrink:0;font-size:13px}
 #timeline #tl-editor #tl-assets{min-height:0;max-height:none;flex:1;overflow:auto}
 #tl-audition{height:32px;flex-shrink:0}
 #timeline #tl-editor .tl-tools{padding:7px 0;gap:6px}
 #timeline #tl-editor .tl-tools button{padding:5px 8px;font-size:12px}
 #timeline #tl-editor .tl-scroll{min-height:0;overflow:auto}
 #timeline #tl-editor .tl-row{height:40px}
 #timeline #tl-editor .tl-ruler{height:30px}
 #timeline #tl-editor .tl-clip{height:32px;top:3px}
 #tl-preview-note{font-size:11px;margin:2px 0}
}
@media(max-width:899px){
 #tl-editor{display:flex;flex-direction:column}
 #timeline #tl-editor .tl-workspace{display:contents}
 #timeline #tl-editor .tl-preview-panel{order:0;position:sticky;top:8px;z-index:8;height:280px;margin:0;box-shadow:0 2px 8px #142f5120}
 #timeline #tl-editor .tl-tools{order:1;gap:5px;padding:8px 0}
 #timeline #tl-editor .tl-transport{order:2}
 #timeline #tl-editor .tl-scroll{order:3;max-height:360px;overflow:auto}
 #timeline #tl-editor .tl-workspace>aside{order:4;max-height:260px;overflow:auto;margin-top:12px}
 #timeline #tl-editor #tl-inspector{display:block}
 #tl-preview-note{display:none}
 #timeline #tl-editor .tl-preview-panel .actions{gap:4px}
 #timeline #tl-editor .tl-preview-panel button{padding:5px;font-size:12px}
 #timeline #tl-editor .tl-preview-panel label{font-size:12px}
}
#timeline #tl-editor .tl-preview-panel.tl-expanded{position:fixed;inset:12px;height:auto;z-index:1000}

#tl-catalog{background:#2b2b2b;border:1px solid #505050;border-radius:12px;padding:12px 16px;margin:12px 0}#tl-catalog summary{cursor:pointer;font-weight:700}#tl-catalog .actions{margin-top:12px;align-items:end}#tl-catalog-info{margin:8px 0 0;font-size:.9rem}.tl-catalog-choice{flex:1;min-width:240px}#tl-template-picker{width:100%}#tl-version-mode{padding:12px;background:#4b4025;border-radius:8px;font-weight:600}#tl-create-dialog{border:1px solid #505050;border-radius:16px;width:min(480px,90vw);color:#ececec}#tl-create-dialog::backdrop{background:#00000099}#tl-create-form{display:grid;gap:16px}#tl-create-error{color:#ff9ca8;margin:0}#tl-service{max-width:220px}
#tl-selection-info{margin:10px 0 0;color:#d4d4d4;font-size:.9rem}#tl-archive-template{border-color:#b77e7e;color:#ffd6d6}#tl-archive-dialog{border:1px solid #725454;border-radius:16px;width:min(480px,90vw);color:#ececec;background:#2b2b2b}#tl-archive-dialog::backdrop{background:#000a}#tl-archive-form{display:grid;gap:12px}#tl-archive-error{color:#ff9ca8;margin:0}#tl-archive-description{font-weight:600;overflow-wrap:anywhere}@media(max-width:650px){#tl-catalog .tl-catalog-choice{flex-basis:100%}}