/* SeenIn demo ribbon. Sits above the Studio in normal flow; the Studio keeps the rest of the screen.
   Colours come from the Studio's own tokens, so it follows every style and Light/Dark. */
:root{--demo-h:30px}
body{display:flex;flex-direction:column;height:100vh;height:100dvh}
#root{flex:1;min-height:0;position:relative}
#root>.app{height:100%}
.demo-ribbon{flex:none;display:flex;align-items:center;gap:14px;height:var(--demo-h);padding:0 14px;box-sizing:border-box;
  background:var(--raise-2);color:var(--dim);border-bottom:1px solid var(--line);font:500 12.5px/1 var(--text);white-space:nowrap;overflow:hidden}
.demo-ribbon p{margin:0;margin-inline-end:auto;overflow:hidden;text-overflow:ellipsis}
.demo-ribbon b{color:var(--ink);font-weight:600}
.demo-ribbon a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;padding:6px 0}
.demo-ribbon a:hover{text-decoration-thickness:2px}
.demo-ribbon a:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
.demo-ribbon a.demo-buy{color:var(--accent-text);font-weight:600}
/* fixed Studio parts that measure from the top of the window move down by the ribbon */
@media (max-width:760px){.stylemenu-pop{margin-top:var(--demo-h)}}
[data-style=timeline] .app[data-tab=poster] .cropview{top:calc(52px + var(--demo-h))}
[data-style=timeline] .detail{height:calc(100dvh - 172px - var(--demo-h))}
@media (max-width:420px){.demo-ribbon{gap:12px;padding:0 12px}.demo-ribbon .demo-long{display:none}}