.demo{border:1px solid var(--border);border-radius:var(--fui-radius-lg);background:var(--card);--fui-dither-bg:var(--card);overflow:clip}.demo-bar{align-items:center;gap:var(--fui-space-2) var(--fui-space-4);min-height:3rem;padding:var(--fui-space-2) var(--fui-space-4);border-bottom:1px solid var(--border);flex-wrap:wrap;display:flex}.demo-bar-note{color:var(--muted-foreground);font-size:var(--fui-text-sm);margin:0}.demo-body{grid-template-columns:minmax(0,1fr) 22rem;min-width:0;display:grid}.demo-stage{align-content:start;gap:var(--fui-space-5);min-width:0;padding:var(--fui-space-5);display:grid}.demo-side{border-left:1px solid var(--border);background:var(--background);align-content:start;min-width:0;display:grid}.demo-side-head{justify-content:space-between;align-items:center;gap:var(--fui-space-2);min-height:2.75rem;padding:var(--fui-space-1) var(--fui-space-2) var(--fui-space-1) var(--fui-space-4);border-bottom:1px solid var(--border);display:flex}.demo-side-head>div{align-items:center;gap:var(--fui-space-2);display:flex}.demo-side-body{align-content:start;gap:var(--fui-space-5);padding:var(--fui-space-4);display:grid}.demo-chapter{gap:var(--fui-space-1);display:grid}.demo-chapter p{color:var(--muted-foreground);font-size:var(--fui-text-sm);margin:0}.demo-chapter h3{font:var(--fui-weight-semibold) clamp(1.75rem, 2.4vw, 2.5rem) / 1 var(--fui-font-display);text-wrap:balance;margin:0}.demo-needs{gap:var(--fui-space-6);padding-block:var(--fui-space-2);border-block:1px solid var(--border);flex-wrap:wrap;margin:0;display:flex}.demo-needs div{align-items:baseline;gap:var(--fui-space-2);display:flex}.demo-needs dt{color:var(--muted-foreground);font-size:var(--fui-text-sm)}.demo-needs dd{font-weight:var(--fui-weight-medium);font-variant-numeric:tabular-nums;margin:0}.demo-choice{align-items:center;gap:var(--fui-space-1-5);height:1.75rem;padding-inline:var(--fui-space-2-5);border:1px solid var(--border);border-radius:var(--fui-radius-md);color:var(--muted-foreground);font-size:var(--fui-text-xs);display:inline-flex}.demo-choice[data-selected]{border-color:var(--foreground);background:var(--foreground);color:var(--background)}.demo-requirements-fixed{color:var(--muted-foreground);font-size:var(--fui-text-sm);align-self:center;margin:0}.demo-reason{gap:2px;display:grid}.demo-reason small{color:var(--muted-foreground);font-size:var(--fui-text-xs);align-items:center;gap:3px;display:inline-flex}.demo-reason small svg{flex:none;width:.8rem;height:.8rem}.demo-machine{width:100%;max-width:11rem;color:var(--foreground);margin-inline:auto;display:block}.demo-reason small[data-good]{color:var(--fui-success-ink)}.demo-transport{gap:var(--fui-space-3);padding:var(--fui-space-3) var(--fui-space-4) var(--fui-space-4);border-top:1px solid var(--border);display:grid}.demo-controls{align-items:center;gap:var(--fui-space-2);flex-wrap:wrap;display:flex}.demo-chapters{min-width:0;margin:0 var(--fui-space-2);flex:24rem;gap:3px;padding:0;list-style:none;display:flex}.demo-chapters li{flex-basis:0;min-width:0}.demo-chapters button{width:100%;color:var(--muted-foreground);text-align:left;cursor:pointer;background:0 0;border:0;padding:.875rem 0 0;display:grid;position:relative}.demo-chapters button:before,.demo-chapter-fill{content:"";background:color-mix(in oklab, var(--foreground) 14%, transparent);border-radius:1px;width:100%;height:6px;position:absolute;top:0;left:0}.demo-chapter-fill{background:var(--brand-ink);transform-origin:0}.demo-chapter-label{font-size:var(--fui-text-xs);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.demo-chapters button[aria-current],.demo-chapters button:hover{color:var(--foreground)}.demo-time{min-width:4.5rem;color:var(--muted-foreground);font-size:var(--fui-text-xs);font-variant-numeric:tabular-nums;text-align:right}.demo-caption{max-width:60ch;min-height:2rem;font-size:var(--fui-text-lg);margin:0;line-height:1.5}.demo-error{color:var(--fui-danger-ink);font-size:var(--fui-text-sm);margin:0}.demo-requirements{align-items:flex-end;gap:var(--fui-space-3);flex-wrap:wrap;display:flex}.demo-selection{justify-content:space-between;align-items:center;gap:var(--fui-space-3);padding-top:var(--fui-space-4);border-top:1px solid var(--border);flex-wrap:wrap;display:flex}.demo-prompt{align-items:flex-start;gap:var(--fui-space-2);padding:var(--fui-space-3);border:1px solid var(--border);border-radius:var(--fui-radius-md);background:var(--card);display:flex}.demo-prompt p{font-size:var(--fui-text-sm);flex:1;margin:0;line-height:1.5}.demo-steps{gap:var(--fui-space-2);color:var(--muted-foreground);font-size:var(--fui-text-sm);margin:0;padding-left:1.25rem;line-height:1.5;display:grid}.demo-steps a{color:var(--brand-ink);text-underline-offset:3px;text-decoration:underline}.demo-call{padding-block:var(--fui-space-3);border-block:1px solid var(--border)}.demo-call summary{font-size:var(--fui-text-sm);font-weight:var(--fui-weight-medium);cursor:pointer}@media (max-width:1100px){.demo-body{grid-template-columns:minmax(0,1fr)}.demo-side{border-top:1px solid var(--border);border-left:0}}@media (max-width:639px){.demo-stage{padding:var(--fui-space-4)}.demo-chapter-label{display:none}.demo-chapters{margin:var(--fui-space-1) 0 0;flex-basis:100%;order:5}}@keyframes demo-enter{0%{opacity:0;transform:translateY(6px)}}.tour-enter{animation:demo-enter var(--fui-duration-slow) var(--fui-ease)}@media (prefers-reduced-motion:reduce){.tour-enter{animation:none}}