/* Static demo only. No animation, canvas, or product-page changes. */
.demo-steps{margin-bottom:24px}
.demo-steps ol{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;padding:0;margin:0}
.demo-steps a{display:inline-flex;gap:8px;align-items:center;min-height:48px;padding:6px 10px;border-radius:12px;border:2px solid transparent;background:var(--paper2);color:var(--ink);font-size:1rem;text-decoration:none}
.demo-steps a[aria-current]{border-color:var(--leaf);background:var(--leaf2);color:var(--leaf)}
.demo-steps a:hover{text-decoration:underline}
.demo-steps a>span{display:grid;place-items:center;width:28px;height:28px;border:1px solid currentColor;border-radius:50%;flex-shrink:0}
.secondary-panel{margin:0}
.secondary-panel>summary{font:500 1.5rem/1.3 var(--serif);min-height:48px;padding:8px 36px 8px 0;color:var(--ink)}
.secondary-panel>div{padding-top:14px}
.secondary-panel[open]>summary{margin-bottom:0}
.clip-review{scroll-margin-top:24px}
.clip-review .clip{margin-block:18px}
.clip-review .status{min-height:4.95em}
.screen.scene{overflow:hidden;background:var(--paper2)}
.screen>svg.scene-art{display:block;width:100%;height:100%;border-radius:14px}
.scene-label{margin:0;padding:8px 4px 0;color:var(--ink2);font-size:1rem}
@media(min-width:920px){
  .session-clips{grid-column:2;grid-row:1}
  .session-notes{grid-column:1;grid-row:1}
  .fam{grid-template-rows:auto 1fr;gap:22px clamp(28px,5vw,64px)}
  .fam-list{grid-column:1;grid-row:1}
  .fam-main{grid-column:2;grid-row:1 / span 2}
  .fam-side{grid-column:1;grid-row:2}
}
@media(max-width:919px){
  .fam .secondary-panel{order:0}
  .demo-steps ol{gap:4px}
  .demo-steps li{flex:1 1 150px}
  .demo-steps a{width:100%;height:100%;line-height:1.4}
}