/* Sidebar contents shrink to their column; only vertical scrolling is needed. */
body { --left-panel-size:280px; --right-panel-size:290px; }
.studio-mode .workspace { grid-template-columns:var(--left-panel-size) minmax(0,1fr) var(--right-panel-size); height:calc(100dvh - 104px - var(--site-footer-height)); }
.studio-mode .left-panel,.studio-mode .right-panel { min-width:0; overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; }
.studio-panel { width:100%; min-width:0; }
.studio-presets { grid-template-columns:repeat(2,minmax(0,1fr)); }
.studio-panel button,.studio-panel label,.studio-panel details,.studio-panel summary { min-width:0; max-width:100%; overflow-wrap:anywhere; }
.studio-panel button { white-space:normal; }
.studio-file input { display:block; min-width:0; max-width:100%; }
.studio-label { flex-wrap:wrap; }
.studio-source small { overflow-wrap:anywhere; }
.effect-row { width:100%; min-width:0; }
.effect-row .effect-name { overflow:hidden; white-space:normal; overflow-wrap:anywhere; }
.effect-name small { display:block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
.effect-row .effect-toggle,.effect-row .effect-remove { width:30px; padding:5px!important; }
.panel-collapse-bar { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:36px; padding:2px 8px; background:var(--panel); border-bottom:1px solid var(--line); flex:none; }
.panel-collapse-bar span { font-size:10px; color:var(--muted); }
.panel-collapse-bar button { width:28px; height:28px; min-height:28px; flex:none; padding:4px; border-radius:4px; color:#858585; }
.panel-collapse-bar button:hover { color:#b5b5b5; background:#ffffff06; }
.panel-collapse-bar svg { width:20px; height:20px; }
.panel-collapse-bar button:focus-visible,#previewTimelineDivider:focus-visible { outline:2px solid #eee; outline-offset:-2px; }
body.left-panel-collapsed { --left-panel-size:36px; }
body.right-panel-collapsed { --right-panel-size:36px; }
.studio-mode.left-panel-collapsed .left-panel>:not(.panel-collapse-bar),
.studio-mode.right-panel-collapsed .right-panel>:not(.panel-collapse-bar) { display:none!important; }
.left-panel-collapsed .left-panel .panel-collapse-bar,
.right-panel-collapsed .right-panel .panel-collapse-bar { padding:2px 3px; justify-content:center; }
.left-panel-collapsed .left-panel .panel-collapse-bar span,
.right-panel-collapsed .right-panel .panel-collapse-bar span { display:none; }
body:not(.studio-mode) .panel-collapse-bar,body:not(.studio-mode) #previewTimelineDivider { display:none; }
#studioDrawer { right:calc(var(--right-panel-size) + 12px); }
#studioDrawer h2 { min-width:0; overflow-wrap:anywhere; }
#drawerBody { overflow-x:hidden; }
.studio-mode .center-panel { min-width:0; overflow:hidden; }
.studio-mode .center-panel>.stage { flex:1 1 0; min-height:160px; height:auto; order:0; }
#previewTimelineDivider { display:flex; flex:0 0 10px; height:10px; align-items:center; justify-content:center; background:#161616; border-top:1px solid #333; border-bottom:1px solid #333; cursor:row-resize; touch-action:none; user-select:none; order:0; }
#previewTimelineDivider::after { content:""; width:38px; height:2px; border-radius:1px; background:#777; }
#previewTimelineDivider:hover,#previewTimelineDivider:focus-visible { background:#303030; }
#previewTimelineDivider:hover::after { background:#eee; }
.studio-mode .center-panel>.timeline { flex:0 0 var(--timeline-height,240px); height:var(--timeline-height,240px); min-height:0; max-height:none; display:flex; flex-direction:column; overflow:hidden; padding-bottom:0; border-top:0; order:0; }
body.resizing-timeline,body.resizing-timeline * { cursor:row-resize!important; user-select:none!important; }
@media (max-width:1100px) {
 body { --left-panel-size:235px; --right-panel-size:245px; }
}
@media (max-width:960px) {
 .studio-mode .workspace { display:flex; flex-direction:row; flex-wrap:wrap; height:auto; }
 .studio-mode .center-panel { width:100%; height:max(460px,75dvh); min-height:460px; order:0; }
 .studio-mode .left-panel,.studio-mode .right-panel { width:50%; flex:1 1 40%; height:55dvh; max-height:600px; min-height:0; order:1; overflow-x:hidden; overflow-y:auto; }
 .studio-mode.left-panel-collapsed .left-panel,.studio-mode.right-panel-collapsed .right-panel { width:36px; flex:0 0 36px; }
 #studioDrawer { right:12px; }
}
@media (max-width:520px) {
 .studio-mode .left-panel,.studio-mode .right-panel { width:100%; flex:0 0 100%; }
 .studio-mode.left-panel-collapsed .left-panel,.studio-mode.right-panel-collapsed .right-panel { width:100%; flex:0 0 100%; height:36px; }
 .left-panel-collapsed .left-panel .panel-collapse-bar,.right-panel-collapsed .right-panel .panel-collapse-bar { justify-content:flex-end; }
 .studio-mode .center-panel { height:max(460px,76dvh); }
}

/* The media ruler and transport never enter the effects' scrolling viewport. */
.timeline-pinned { flex:none; min-width:0; padding-bottom:8px; background:#141414; }
.timeline-effects-scroll { flex:1 1 0; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-gutter:stable; overscroll-behavior-y:contain; padding-bottom:12px; }
.timeline:focus-visible { outline:1px solid #666; outline-offset:-1px; }

/* Track count is independent of viewport height; keep navigation visible. */
.effect-track-navigation{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:10px;color:#aaa;padding:6px 0}.effect-track-navigation[hidden]{display:none}.effect-track-navigation button{padding:3px 7px;min-height:24px;color:#ddd;background:#252525;border:1px solid #444;border-radius:4px;font-size:10px}.effect-track-navigation button:disabled{opacity:.4}.effect-track-navigation span:first-child{color:#ddd;margin-right:auto}.timeline-effects-scroll:focus-visible{outline:1px solid #888;outline-offset:-1px}.timeline-effects-scroll::-webkit-scrollbar{width:10px}.timeline-effects-scroll::-webkit-scrollbar-thumb{background:#626262;border:2px solid #181818;border-radius:6px}.timeline-effects-scroll::-webkit-scrollbar-track{background:#181818}
/* Same canvas in fullscreen; preview state never becomes project content. */
.fullscreen-preview-bar,.fullscreen-preview-transport{display:none}
.studio-mode .center-panel>.stage.preview-fullscreen{position:fixed;inset:0;z-index:15000;width:100vw;height:100dvh;min-height:0;max-height:none;box-sizing:border-box;padding:68px 24px 72px;background:#090909}
.stage.preview-fullscreen>.stage-label,.stage.preview-fullscreen>.stage-footer{display:none}
.preview-fullscreen .fullscreen-preview-bar,.preview-fullscreen .fullscreen-preview-transport{position:absolute;left:20px;right:20px;display:flex;align-items:center;gap:12px;color:#ddd;font-size:12px;line-height:1.4;z-index:8}
.fullscreen-preview-bar{top:16px}.fullscreen-preview-bar strong{margin-right:auto;font-weight:500}.fullscreen-preview-bar span{color:#999;font-size:11px}.fullscreen-preview-transport{bottom:18px}.fullscreen-preview-transport input{flex:1;min-width:0;accent-color:#ddd}.fullscreen-preview-transport output{font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.preview-fullscreen button{background:#252525;border:1px solid #555;color:#eee;border-radius:5px;padding:8px 12px;min-height:34px}.preview-fullscreen button[aria-pressed=true]{background:#eee;color:#111}.preview-fullscreen button:focus-visible{outline:2px solid #ddd;outline-offset:2px}
body.preview-fullscreen-fallback{overflow:hidden}
@media(max-width:600px){.studio-mode .center-panel>.stage.preview-fullscreen{padding:64px 12px 68px}.preview-fullscreen .fullscreen-preview-bar,.preview-fullscreen .fullscreen-preview-transport{left:12px;right:12px;gap:8px}.fullscreen-preview-bar span{display:none}.preview-fullscreen button{padding:8px}.fullscreen-preview-transport output{font-size:10px}}

.snapping-to-playhead .effect-lane-playhead{width:2px!important;background:#fff!important;box-shadow:0 0 0 2px #ffffff30}.effect-time-tools #effectTimeSnap[aria-pressed=true]{background:#e5e5e5;color:#151515}