.app-demo{max-width:1100px;margin:48px auto;border:1px solid hsl(var(--cp-border));border-radius:var(--cp-radius-panel,16px);background:hsl(var(--cp-card));color:hsl(var(--cp-foreground));overflow:hidden;letter-spacing:0}
.demo-topbar{height:68px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid hsl(var(--cp-border))}
.demo-brand,.demo-topbar-actions{display:flex;align-items:center;gap:12px;min-width:0}
.demo-brand{font-size:17px;font-weight:600;white-space:nowrap}
.demo-brand>svg{width:30px;height:25px;fill:currentColor;flex:none}
.demo-edition{font-size:12px;font-weight:400;color:hsl(var(--cp-muted-foreground));border-left:1px solid hsl(var(--cp-border));padding-left:12px}
.demo-badge{font-size:12px;line-height:1.5;color:hsl(var(--cp-muted-foreground));white-space:nowrap}
.demo-icon-button{width:44px;height:44px;padding:0;flex:none;display:inline-flex;align-items:center;justify-content:center}
.demo-icon-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.demo-nav{display:none;gap:4px;padding:10px 16px;overflow-x:auto;scrollbar-width:thin;border-bottom:1px solid hsl(var(--cp-border))}
.demo-enhanced .demo-nav{display:flex}
.demo-tab{min-height:44px;flex:none;max-width:100%;padding:9px 16px;border:1px solid transparent;border-radius:var(--cp-radius-button,999px);background:transparent;color:hsl(var(--cp-muted-foreground));font:inherit;font-size:14px;line-height:1.35;white-space:nowrap;cursor:pointer;transition:background-color 180ms ease,color 180ms ease}
.demo-tab:hover{background:hsl(var(--cp-muted));color:hsl(var(--cp-foreground))}
.demo-tab[aria-selected=true]{background:hsl(var(--cp-primary));color:hsl(var(--cp-primary-foreground));font-weight:600}
.demo-tab:focus-visible,.demo-icon-button:focus-visible{outline:2px solid hsl(var(--cp-ring));outline-offset:2px}
.demo-viewport{display:none;position:relative;height:700px;background:hsl(var(--cp-background))}
.demo-enhanced .demo-viewport{display:block}
.demo-viewport iframe{display:block;width:100%;height:100%;border:0;background:hsl(var(--cp-background));opacity:0;transition:opacity 220ms ease}
.demo-ready .demo-viewport iframe{opacity:1}
.demo-loading,.demo-load-error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;font-size:14px;color:hsl(var(--cp-muted-foreground));padding:24px;text-align:center}
.demo-ready .demo-loading{display:none}
.demo-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:76px;padding:14px 22px;border-top:1px solid hsl(var(--cp-border))}
.demo-footer p{margin:0;font-size:12px;line-height:1.65;color:hsl(var(--cp-muted-foreground))}
.demo-footer>a{min-height:44px;flex:none;font-size:13px;gap:12px}
.demo-noscript{padding:24px;line-height:1.8;font-size:14px}
.studio-team>.app-demo,.studio-personal-stage>.app-demo{width:100%;max-width:none;margin-top:44px;margin-bottom:0}
.app-demo [hidden]{display:none!important}
@media(max-width:780px){
  .app-demo{margin:32px auto}
  .demo-topbar{height:62px;padding:0 12px;gap:6px}
  .demo-brand{gap:8px;font-size:15px}
  .demo-brand>svg{width:24px;height:20px}
  .demo-edition{padding-left:8px;font-size:11px}
  .demo-topbar-actions{gap:0}
  .demo-topbar-actions>.demo-badge{display:none}
  .demo-nav{padding:8px;gap:2px}
  .demo-tab{padding:8px 12px;font-size:13px}
  .demo-viewport{height:760px}
  .demo-footer{align-items:flex-start;flex-direction:column;gap:12px;padding:16px}
  .demo-footer>a{align-self:flex-end}
  .studio-team>.app-demo,.studio-personal-stage>.app-demo{width:calc(100% + 32px);margin-left:-16px;margin-top:32px}
}
@media(prefers-reduced-motion:reduce){.demo-tab,.demo-viewport iframe{transition:none}}