.demo-body{background:var(--bg);padding:calc(4rem + var(--space-xl)) var(--grid-gutter) var(--space-xl-2xl)}.demo-wrap{max-width:var(--grid-max-width);margin:0 auto}.demo-console{container:demo-console/inline-size;display:flex;flex-direction:column;gap:var(--space-xs)}.demo-dare{padding-block:var(--space-s)}.demo-dare-intro{font-family:var(--head);font-size:var(--step-3);font-weight:500;color:var(--fg);line-height:1.15;margin:0 0 var(--space-3xs);max-width:720px}.demo-dare-note{font-family:var(--body);font-size:var(--step--1);color:var(--fg3);line-height:1.5;margin:0 0 var(--space-s);max-width:720px}.demo-pick{position:relative;display:inline-block;max-width:100%}.demo-pick-trigger{display:inline-flex;align-items:center;gap:var(--space-2xs);max-width:100%;min-height:2.5rem;padding:var(--space-3xs) var(--space-xs);font-family:var(--head);font-size:var(--step--1);font-weight:600;letter-spacing:-.2px;line-height:1.15;color:var(--fg);text-align:left;background:var(--bg2);border:1px solid var(--border2);border-radius:10px;cursor:pointer;transition:background .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease)}.demo-pick-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.demo-pick-trigger:hover:not(:disabled){background:var(--white);border-color:var(--ac)}.demo-pick-trigger:focus-visible,.demo-pick-trigger[aria-expanded=true]{outline:none;background:var(--white);border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-l)}.demo-pick-trigger:disabled{cursor:default;color:var(--fg2)}.demo-pick-chevron{width:16px;height:16px;flex-shrink:0;padding:var(--space-3xs);border-radius:5px;color:var(--fg3);background:var(--white);border:1px solid var(--border);transition:transform .18s var(--ease),color .15s var(--ease)}.demo-pick-trigger:hover:not(:disabled) .demo-pick-chevron,.demo-pick-trigger[aria-expanded=true] .demo-pick-chevron{color:var(--ac);border-color:var(--ac-bg)}.demo-pick-trigger[aria-expanded=true] .demo-pick-chevron{transform:rotate(180deg)}.demo-pick-overlay{position:fixed;inset:0;z-index:30}.demo-pick-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:31;margin:0;padding:var(--space-3xs);max-width:min(420px,90vw);list-style:none;background:var(--white);border:1px solid var(--border);border-radius:12px;box-shadow:0 4px 10px rgba(20,20,45,.06),0 18px 44px rgba(20,20,45,.16);animation:demoMenuIn .16s var(--ease);min-width:0;width:100%;max-height:min(60svh,28rem);overflow-y:auto;overscroll-behavior:contain}@keyframes demoMenuIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.demo-pick-item{display:flex;align-items:center;gap:var(--space-2xs);width:100%;padding:var(--space-2xs) var(--space-xs);text-align:left;background:transparent;border:none;border-radius:8px;cursor:pointer;transition:background .12s var(--ease)}.demo-pick-item:hover{background:var(--bg2)}.demo-pick-item.sel{background:var(--ac-l)}.demo-pick-item:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ac-l)}.demo-pick-item-name{flex:1 1;min-width:0;font-family:var(--head);font-size:var(--step--1);font-weight:400;color:var(--fg2)}.demo-pick-item.sel .demo-pick-item-name{font-weight:600;color:var(--fg)}.demo-pick-item-check{width:15px;height:15px;flex-shrink:0;color:var(--ac)}.demo-dare-orders{display:grid}.demo-dare-order{grid-area:1/1;margin:var(--space-xs) 0 0;font-family:var(--body);font-size:var(--step-0);font-weight:500;line-height:1.5;color:var(--fg);max-width:960px;text-wrap:pretty}.demo-play{display:inline-flex;align-items:center;gap:var(--space-2xs);border:1px solid transparent;min-height:2.5rem;padding:var(--space-3xs) var(--space-s);font-size:var(--step--1);line-height:1.4;font-weight:500;cursor:pointer;box-shadow:0 1px 2px rgba(28,25,110,.16),0 4px 12px rgba(66,60,210,.16)}.demo-play:disabled{cursor:default;box-shadow:none}.demo-play-glyph{width:11px;height:13px;flex-shrink:0}.demo-play-spin{width:13px;height:13px;border-radius:50%;border:2px solid hsla(0,0%,100%,.45);border-top-color:#fff;animation:demoSpin .7s linear infinite}@keyframes demoSpin{to{transform:rotate(1turn)}}.demo-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));grid-gap:var(--space-s);gap:var(--space-s);list-style:none;margin:var(--space-xs) 0;padding:0}.demo-step{padding:var(--space-s);border-top:2px solid var(--border);border-radius:0 0 var(--space-2xs) var(--space-2xs);color:var(--fg3);transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}.demo-step.active{background:var(--ac-bg);border-color:var(--ac);color:var(--fg)}.demo-step.complete{color:var(--fg2)}.demo-step-heading{display:flex;align-items:center;gap:var(--space-2xs);margin-bottom:var(--space-2xs)}.demo-step-number{display:grid;place-items:center;width:1.75rem;height:1.75rem;border:1px solid var(--border);border-radius:50%;flex:none;font-size:var(--step--2)}.demo-step.active .demo-step-number{background:var(--ac);border-color:var(--ac);color:var(--white)}.demo-step-status{font-size:var(--step--2)}.demo-step p{margin:0;font-size:var(--step--1);line-height:1.5;min-height:7.5em}@media (prefers-reduced-motion:reduce){.demo-step{transition:none}.demo-outcome{animation:none}}.demo-outcome{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2xs) var(--space-s);margin-top:var(--space-s);padding:var(--space-xs) var(--space-s);background:#eef3ed;border:1px solid rgba(84,129,100,.22);border-radius:8px;animation:demoFadeUp .4s var(--ease)}@keyframes demoFadeUp{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.demo-outcome-mark{width:20px;height:20px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#548164;color:#fff}.demo-outcome-mark svg{width:12px;height:12px}.demo-outcome-label{font-family:var(--mono);font-size:var(--step--2);font-weight:600;letter-spacing:.12em;color:#548164}.demo-outcome-text{flex:1 1 260px;min-width:0;font-family:var(--body);font-size:var(--step--2);color:var(--fg);line-height:1.5}.demo-error{font-family:var(--mono);font-size:var(--step--2);color:var(--warm);margin:var(--space-xs) 0 0}.demo-stage{container:demo-stage/inline-size;display:flex;flex-direction:column;border:0;border-radius:var(--space-2xs);background:var(--white);overflow:hidden;min-width:0}.demo-stage-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-xs);padding:var(--space-2xs) 0;border-bottom:0;background:transparent}.demo-stage-reset{justify-content:center;min-height:2.5rem;min-width:2.5rem}.demo-stage-actions,.demo-stage-reset{display:inline-flex;align-items:center}.demo-stage-actions{flex-wrap:wrap;gap:var(--space-xs)}.demo-playback-control{display:flex;align-items:center;gap:var(--space-2xs)}.demo-stage-open{display:inline-flex;align-items:center;text-decoration:none}.demo-stage-fs,.demo-stage-open,.demo-stage-reset{font-family:var(--body);font-size:var(--step--2);color:var(--fg2);white-space:nowrap}.demo-stage-fs,.demo-stage-open,.demo-stage-reset{min-height:2.5rem;background:transparent;border:1px solid transparent;border-radius:var(--space-2xs);padding:var(--space-3xs) var(--space-2xs);cursor:pointer;transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}.demo-stage-fs:hover:not(:disabled),.demo-stage-open:hover:not(:disabled),.demo-stage-reset:hover:not(:disabled){background:var(--ac-bg);color:var(--fg)}.demo-stage-open:disabled,.demo-stage-reset:disabled{opacity:.5;cursor:default}.demo-stage-view{border-radius:var(--space-2xs);box-shadow:0 16px 48px rgb(16 17 20/8%);position:relative;background:var(--bg3);overflow:hidden;height:min(75svh,48rem);min-height:22.5rem}.demo-stage:-webkit-full-screen{border:0;border-radius:0}.demo-stage:fullscreen{border:0;border-radius:0}.demo-stage:-webkit-full-screen .demo-stage-view{height:auto;flex:1 1}.demo-stage:fullscreen .demo-stage-view{height:auto;flex:1 1}.demo-frame{position:absolute;top:0;left:0;width:var(--demo-frame-width,100%);height:var(--demo-frame-height,100%);transform:scale(var(--demo-frame-scale,1));transform-origin:0 0;max-width:none;border:0;visibility:hidden;background:var(--white)}.demo-frame.on{visibility:visible}.demo-stage-empty{position:absolute;inset:0;z-index:2;background:var(--bg3);display:flex;align-items:center;justify-content:center;padding:var(--space-m);text-align:center;font-family:var(--mono);font-size:var(--step--1);line-height:1.6;color:var(--fg2)}.demo-cta{background:#15142e;color:#fff;padding:var(--space-xl);padding-inline:var(--grid-gutter)}.demo-cta-in{max-width:1460px;margin:0 auto}.demo-cta .kk{color:hsla(0,0%,100%,.45)}.demo-cta h2{font-family:var(--head);font-size:var(--step-3);font-weight:600;letter-spacing:-.8px;line-height:1.22;margin-bottom:var(--space-xs)}.demo-cta p:not(.kk){font-size:var(--step--1);color:hsla(0,0%,100%,.72);line-height:1.7;max-width:560px}.demo-cta-btns{display:flex;gap:var(--space-xs);flex-wrap:wrap;margin-top:var(--space-s)}.demo-cta-btns :is(.ba,.bo){display:inline-flex;align-items:center;justify-content:center;min-height:2.5rem;padding:var(--space-3xs) var(--space-s);line-height:1.4}@media (pointer:coarse){.demo-cta-btns :is(.ba,.bo),.demo-pick-trigger,.demo-play,.demo-stage-fs,.demo-stage-open,.demo-stage-reset{min-height:2.75rem}}.demo-cta .bo{background:transparent;color:#fff;border-color:hsla(0,0%,100%,.35)}.demo-cta .bo:hover{border-color:#fff;color:#fff}.demo-disclaimer{font-family:var(--mono);font-size:var(--step--2);color:hsla(0,0%,100%,.45);margin-top:var(--space-m);max-width:620px}@container demo-console (width < 40rem){.demo-steps{gap:var(--space-2xs)}.demo-step{display:grid;grid-template-columns:1.75rem minmax(0,1fr);grid-gap:var(--space-3xs) var(--space-xs);gap:var(--space-3xs) var(--space-xs);padding:var(--space-xs) var(--space-3xs)}.demo-step-heading{display:contents}.demo-step-number{grid-row:span 2}.demo-step p{grid-column:2;min-height:0}.demo-stage-bar{gap:var(--space-2xs)}.demo-stage-actions{width:100%;justify-content:space-between;gap:var(--space-3xs)}}@container demo-stage (width < 48rem){.demo-frame{width:100%;height:100%;transform:none}.demo-stage-view,.product-live-tour.demo-stage .demo-stage-view{height:clamp(24rem,120cqi,36rem)}}