/* Compact mode follows SceneNode's w-28 / p-1.5 variant in the product source. */
.bl-demo-strip button[data-demo-scene], .bl-demo-strip .bl-demo-idea, .bl-demo-strip .bl-demo-reel-node { width:112px; padding:6px; min-height:108px; }
.bl-demo-strip button[data-demo-scene] > p { font-size:9px; }
.bl-demo-strip button[data-demo-scene] > div:last-child { margin-top:4px; }
.bl-demo-strip .bl-demo-idea p { font-size:9px; line-height:13px; min-height:0; -webkit-line-clamp:3; }
.bl-demo-strip .bl-demo-idea p:last-child { display:none; }
.bl-demo-strip button[aria-pressed="true"] { border-color:var(--brand); box-shadow:0 0 0 1px var(--brand-soft); }
.bl-demo-strip button[aria-pressed="false"] { border-color:var(--border); box-shadow:none; }
.bl-demo-stage { min-width:0; }
body[data-demo-mode="reel"] .bl-demo-strip{display:none}
.bl-demo-reel .bl-demo-player { height:410px; aspect-ratio:auto; }
.bl-demo-reel .bl-demo-player > video { height:100%; width:100%; }
.bl-demo-reel .bl-demo-player > button[aria-label] { bottom:40px; }
.bl-demo-reel .bl-demo-player [data-demo-subtitle] { bottom:47px; }
.bl-demo-reel .bl-demo-inspector { height:410px; max-height:410px; overflow-y:auto; }
.bl-demo-reel .bl-demo-inspector > div:nth-last-child(-n+3) { display:none; }
.bl-demo-reel .bl-demo-track { overflow:hidden; }
.bl-demo-reel .bl-demo-track > div:first-child { display:none; }
.bl-demo-reel .bl-demo-track-row { min-width:0; width:100%; position:relative;touch-action:pan-y;cursor:ew-resize; }
.bl-demo-reel .bl-demo-track-row > div { width:auto !important; min-width:48px; height:72px; }
.bl-demo-reel .bl-demo-track-row > div[data-selected="true"] { border-color:#38634e; box-shadow:inset 0 0 0 2px #b1d7bd,0 0 0 2px #38634e; }
.bl-demo-reel .bl-demo-track-row > div[data-selected="true"]>button[aria-label^="Select"]{background:#b1d7bd22}
.bl-demo-reel .bl-demo-track-row > div[data-selected="true"] button[aria-label^="Trim"]{background:#38634e;width:9px}
.bl-demo-reel .bl-demo-track-row > div[data-selected="false"] { border-color:var(--border); box-shadow:none; }
.bl-demo-variant[aria-pressed="true"] { border-color:var(--brand); background:var(--brand-soft); }
.bl-demo-variant[aria-pressed="false"] { border-color:var(--border); background:var(--background); }
.bl-demo-reel .bl-demo-track-row button[aria-label^="Trim"] { touch-action:none; width:8px; }
.bl-demo-reel .bl-demo-track-row button[aria-label^="Trim"]:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.bl-demo-reel .bl-demo-track-row > .bl-demo-playhead { position:absolute; top:0; bottom:0; width:1px !important; min-width:0; height:100%; z-index:15; background:#e4b346; pointer-events:none; }
.bl-demo-reel .bl-demo-track-row > .bl-demo-playhead::before { content:""; position:absolute; left:-3px; top:0; border-inline:4px solid transparent; border-top:5px solid #e4b346; }
.bl-demo-time-input { width:100%; padding:0; border:0; outline:none; background:transparent; color:inherit; font:inherit; font-variant-numeric:tabular-nums; }
.bl-demo-time-input:focus { box-shadow:0 1px var(--brand); }
.bl-demo-note { position:fixed; left:50%; bottom:64px; transform:translateX(-50%); z-index:80; max-width:460px; padding:8px 12px; border:1px solid var(--border); border-radius:6px; background:var(--background); color:var(--foreground); font-size:11px; box-shadow:0 4px 20px #0001; }
.bl-demo-track-dialog { width:min(1080px,90vw); padding:18px; border:1px solid var(--border); border-radius:10px; background:var(--background); color:var(--foreground); }
.bl-demo-track-dialog::backdrop { background:#06180ee0; }
.bl-demo-track-dialog header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; font-size:13px; }
.bl-demo-track-dialog header button { border:1px solid var(--border); border-radius:4px; padding:4px 10px; }
.bl-demo-track-dialog img { width:100%; max-height:620px; object-fit:contain; background:#08120b; border-radius:6px; }
.bl-demo-track-dialog p { margin-top:10px; color:var(--muted-foreground); font-size:11px; }
.bl-demo-reel [data-demo-playing="true"] .bl-demo-center-play { display:none; }
[data-demo-node][data-selected="false"] { border-color:var(--border); box-shadow:var(--floating-shadow); }
[data-demo-node][data-selected="true"] { border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-soft),var(--floating-shadow); }
.bl-demo-stack-dialog { width:min(1040px,86vw); }
.bl-demo-stack-menu { position:fixed; z-index:90; min-width:220px; padding:4px; border:1px solid var(--border); border-radius:6px; color:var(--foreground); background:var(--background); box-shadow:var(--floating-shadow); }
.bl-demo-stack-menu button { display:block; width:100%; padding:8px 10px; border-radius:3px; text-align:left; font-size:12px; }
.bl-demo-stack-menu button:hover,.bl-demo-stack-menu button:focus-visible { background:var(--muted); outline:none; }
.bl-demo-stack-history.bl-demo-history-open { display:flex !important; position:absolute; z-index:50; top:var(--app-header-height); bottom:0; right:0; width:var(--app-history-width); box-shadow:var(--floating-shadow); }
.bl-demo-motion-preview { position:relative; }
.bl-demo-generation { position:absolute; inset:0; z-index:8; overflow:hidden; border-radius:inherit; background:#0c1812; pointer-events:none; }
.bl-demo-generation img { width:100%; height:100%; object-fit:cover; opacity:.62; }
.bl-demo-generation > span { position:absolute; bottom:20px; left:20px; padding:8px 12px; border:1px solid #ffffff30; border-radius:6px; background:#10241fe6; color:#fff; font-size:12px; }
.bl-demo-generation > i { position:absolute; bottom:0; left:0; width:100%; height:3px; background:#87bb95; transform-origin:left; }
.bl-demo-generation.is-ready::after { content:'▶'; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:42px; text-shadow:0 2px 18px #0008; }
.bl-demo-generating { outline:2px solid #729c7e; outline-offset:3px; }
.bl-demo-reel .bl-demo-track-row button.bl-demo-dragging { background:#74aa89; box-shadow:0 0 0 4px #74aa8940; z-index:20; }
.bl-demo-dragging::after { content:'↔'; position:absolute; top:24px; left:50%; transform:translateX(-50%); width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:#163f2e; color:white; font-size:16px; pointer-events:none; }