@layer components{.demo-body{grid-template-columns:minmax(0,1fr);display:grid}.demo-left{display:contents}.demo-pane{min-width:0;padding:calc(var(--spacing,.25rem) * 4)}.demo-strip{display:none}@media (min-width:48rem){.demo-pane{padding:calc(var(--spacing,.25rem) * 5) calc(var(--spacing,.25rem) * 6)}}@media not all and (min-width:64rem){.demo-pane[data-selected=false]{display:none}}@media (min-width:64rem){.demo-pane{padding:calc(var(--spacing,.25rem) * 5)}.demo-strip{border-bottom:1px solid var(--color-border);background:var(--color-canvas);grid-column:1/-1;display:block}.demo-pane[data-pane=input]{border-bottom:1px solid var(--color-border)}.demo-pane[data-pane=steps]{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}[data-layout=three] .demo-body{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}[data-layout=three] .demo-pane[data-pane=input]{border-bottom:0;border-right:1px solid var(--color-border)}}@media (min-width:80rem){.demo-pane{padding:calc(var(--spacing,.25rem) * 6)}.demo-strip{display:none}.demo-pane[data-pane=steps]{clip-path:none;white-space:normal;width:auto;height:auto;padding:calc(var(--spacing,.25rem) * 6) calc(var(--spacing,.25rem) * 5);background:var(--color-canvas);margin:0;position:static;overflow:visible}[data-layout=three] .demo-body{grid-template-columns:minmax(0,30fr) minmax(0,25fr) minmax(0,45fr)}[data-layout=three] .demo-pane[data-pane=steps]{border-right:1px solid var(--color-border)}[data-layout=result-wide] .demo-body{grid-template-columns:minmax(0,29fr) minmax(0,71fr)}[data-layout=result-wide] .demo-left{border-right:1px solid var(--color-border);background:var(--color-canvas);flex-direction:column;display:flex}[data-layout=result-wide] .demo-pane[data-pane=input]{border-bottom:1px solid var(--color-border)}[data-layout=result-wide] .demo-pane[data-pane=steps]{padding-block:calc(var(--spacing,.25rem) * 5);flex:auto}}.demo-body{--demo-bar:0rem}.demo-body :where(a,button,input,textarea,select,[tabindex]){scroll-margin-top:calc(var(--spacing-header) + var(--demo-bar))}@media (min-width:48rem){.demo-body{--demo-bar:8.25rem}}@media (min-width:64rem){.demo-body{--demo-bar:4.5rem}}@media (max-height:32rem){.demo-body{--demo-bar:0rem}}@media not all and (min-width:48rem),(max-height:32rem){[data-step-mode=true][data-status=running] .demo-body :where(a,button,input,textarea,select,[tabindex]),[data-step-mode=true][data-status=running] [data-step-output]{scroll-margin-bottom:4.5rem}}.demo-pane[role=tabpanel]:focus-visible{outline-offset:-2px}.demo-stack{grid-template-columns:minmax(0,1fr);display:grid}.demo-stack>*{grid-area:1/1;min-width:0}.demo-layer{transition:opacity var(--duration-demo) var(--ease-out), visibility 0s linear 0s}.demo-layer[data-shown=false]{opacity:0;visibility:hidden;transition:opacity var(--duration-demo) var(--ease-out), visibility 0s linear var(--duration-demo)}@media (prefers-reduced-motion:reduce){[data-demo] *,[data-demo] :before,[data-demo] :after{transition-delay:0s!important;animation-delay:0s!important}}.demo-pending{border-radius:var(--radius-card);border:1px dashed var(--color-border-strong);height:100%;min-height:5.5rem;transition:border-color var(--duration-demo) var(--ease-out);flex-direction:column;display:flex;overflow:hidden}.demo-pending-head{justify-content:space-between;align-items:center;gap:calc(var(--spacing,.25rem) * 3);padding:calc(var(--spacing,.25rem) * 3) calc(var(--spacing,.25rem) * 4) var(--spacing,.25rem);transition:background-color var(--duration-demo) var(--ease-out);display:flex}.demo-pending-note{padding:0 calc(var(--spacing,.25rem) * 4) calc(var(--spacing,.25rem) * 3);font-size:var(--text-ui);line-height:var(--text-ui--line-height);color:var(--color-muted)}.demo-pending[data-active=true]{border-style:solid;border-color:var(--color-border)}.demo-pending[data-active=true] .demo-pending-head{background:var(--color-quiet);padding-bottom:calc(var(--spacing,.25rem) * 3)}.demo-pending[data-active=true][data-kind=ai] .demo-pending-head{background:var(--color-ai-soft)}.demo-pending[data-active=true][data-kind=human] .demo-pending-head{background:var(--color-review-soft)}.demo-pending[data-active=true] .demo-pending-note{padding-top:calc(var(--spacing,.25rem) * 2.5)}.demo-steps{flex-direction:column;display:flex;position:relative}.demo-step{--marker:28px;grid-template-columns:var(--marker) minmax(0, 1fr);column-gap:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2);display:grid;position:relative}.demo-steps[data-density=compact] .demo-step{--marker:24px;padding-block:calc(var(--spacing,.25rem) * 1.5);column-gap:calc(var(--spacing,.25rem) * 2.5)}.demo-step:not(:last-child):before{content:"";left:calc(var(--marker) / 2 - 1px);top:calc(calc(var(--spacing,.25rem) * 2) + var(--marker) + 4px);bottom:calc(-1 * calc(var(--spacing,.25rem) * 2) + 4px);background:var(--color-border);width:2px;transition:background-color var(--duration-demo) var(--ease-out);border-radius:2px;position:absolute}.demo-steps[data-density=compact] .demo-step:not(:last-child):before{top:calc(calc(var(--spacing,.25rem) * 1.5) + var(--marker) + 3px);bottom:calc(-1 * calc(var(--spacing,.25rem) * 1.5) + 3px)}.demo-step[data-state=done]:not(:last-child):before{background:#83ad98}@supports (color:color-mix(in lab, red, red)){.demo-step[data-state=done]:not(:last-child):before{background:color-mix(in oklab, var(--color-success) 55%, var(--color-surface))}}.demo-step-marker{z-index:1;width:var(--marker);height:var(--marker);border:1.5px solid var(--color-border-strong);background:var(--color-surface);color:var(--color-muted);font-family:var(--font-mono);transition:background-color var(--duration-demo) var(--ease-out), border-color var(--duration-demo) var(--ease-out), color var(--duration-demo) var(--ease-out), box-shadow var(--duration-demo) var(--ease-out);border-radius:999px;justify-content:center;align-items:center;font-size:.8125rem;font-weight:500;display:inline-flex;position:relative}.demo-step[data-state=active] .demo-step-marker{border-color:var(--color-ink);color:var(--color-ink);box-shadow:0 0 0 3px var(--color-quiet)}.demo-step[data-state=active][data-kind=ai] .demo-step-marker{border-color:var(--color-ai);color:var(--color-ai);background:var(--color-ai-soft);box-shadow:0 0 0 3px #315e9129}@supports (color:color-mix(in lab, red, red)){.demo-step[data-state=active][data-kind=ai] .demo-step-marker{box-shadow:0 0 0 3px color-mix(in oklab, var(--color-ai) 16%, transparent)}}.demo-step[data-state=active][data-kind=human] .demo-step-marker{border-color:var(--color-review-solid);color:var(--color-review);background:var(--color-review-soft);box-shadow:0 0 0 3px #ad721c33}@supports (color:color-mix(in lab, red, red)){.demo-step[data-state=active][data-kind=human] .demo-step-marker{box-shadow:0 0 0 3px color-mix(in oklab, var(--color-review-solid) 20%, transparent)}}.demo-step[data-state=done] .demo-step-marker{border-color:var(--color-success);background:var(--color-success);color:var(--color-brand-on)}.demo-step-label{font-size:var(--text-ui);color:var(--color-ink-2);padding-top:calc((var(--marker) - 1.4em) / 2);transition:color var(--duration-demo) var(--ease-out);font-weight:500;line-height:1.4}.demo-step:is([data-state=active],[data-state=done]) .demo-step-label{color:var(--color-ink)}.demo-step-row{border-radius:var(--radius-control);margin-inline:calc(-1 * calc(var(--spacing,.25rem) * 2));padding-inline:calc(var(--spacing,.25rem) * 2);transition:background-color var(--duration-demo) var(--ease-out)}.demo-step[data-state=active] .demo-step-row{background:#ece9e1b3}@supports (color:color-mix(in lab, red, red)){.demo-step[data-state=active] .demo-step-row{background:color-mix(in oklab, var(--color-quiet) 70%, transparent)}}.demo-step[data-state=active][data-kind=ai] .demo-step-row{background:#e7eef7d9}@supports (color:color-mix(in lab, red, red)){.demo-step[data-state=active][data-kind=ai] .demo-step-row{background:color-mix(in oklab, var(--color-ai-soft) 85%, transparent)}}.demo-step[data-state=active][data-kind=human] .demo-step-row{background:#fff1d9e6}@supports (color:color-mix(in lab, red, red)){.demo-step[data-state=active][data-kind=human] .demo-step-row{background:color-mix(in oklab, var(--color-review-soft) 90%, transparent)}}.demo-progress{gap:3px;height:3px;display:flex}.demo-progress>span{background:var(--color-border);transition:background-color var(--duration-demo) var(--ease-out);border-radius:2px;flex:1 1 0}.demo-progress>span[data-state=done]{background:var(--color-success)}.demo-progress>span[data-state=active]{background:var(--color-ink)}.demo-progress>span[data-state=active][data-kind=ai]{background:var(--color-ai)}.demo-progress>span[data-state=active][data-kind=human]{background:var(--color-review-solid)}.demo-scan{z-index:1;background:var(--color-ai);inset-inline:0;height:2px;position:absolute;top:0;box-shadow:0 -10px 14px -4px #315e9138}@supports (color:color-mix(in lab, red, red)){.demo-scan{box-shadow:0 -10px 14px -4px color-mix(in oklab, var(--color-ai) 22%, transparent)}}.demo-scan{pointer-events:none;animation:demo-scan 1.2s var(--ease-in-out) forwards}[data-paused=true] .demo-scan{animation-play-state:paused}@keyframes demo-scan{0%{opacity:1;top:0}92%{opacity:1}to{opacity:0;top:calc(100% - 2px)}}.demo-selector{align-items:flex-start;gap:calc(var(--spacing,.25rem) * 3);border-radius:var(--radius-card);min-width:0;padding:calc(var(--spacing,.25rem) * 3) calc(var(--spacing,.25rem) * 3.5);text-align:left;color:var(--color-ink-2);transition:background-color var(--duration-tab) var(--ease-out), border-color var(--duration-tab) var(--ease-out), box-shadow var(--duration-tab) var(--ease-out), color var(--duration-tab) var(--ease-out);border:1px solid #0000;display:flex;position:relative}.demo-selector:hover{background:#ffffff8c}@supports (color:color-mix(in lab, red, red)){.demo-selector:hover{background:color-mix(in oklab, var(--color-surface) 55%, transparent)}}.demo-selector:hover{color:var(--color-ink)}.demo-selector[aria-selected=true]{background:var(--color-surface);border-color:var(--color-border-input);color:var(--color-ink);box-shadow:var(--shadow-xs)}.demo-selector-icon{border-radius:var(--radius-control);background:var(--color-surface);border:1px solid var(--color-border);width:32px;height:32px;color:var(--color-ink-2);transition:background-color var(--duration-tab) var(--ease-out), color var(--duration-tab) var(--ease-out), border-color var(--duration-tab) var(--ease-out);flex:none;justify-content:center;align-items:center;display:inline-flex}.demo-selector[aria-selected=true] .demo-selector-icon{background:var(--color-brand);border-color:var(--color-brand);color:var(--color-brand-on)}@media not all and (min-width:80rem){.demo-selector{padding:calc(var(--spacing,.25rem) * 2) calc(var(--spacing,.25rem) * 3) calc(var(--spacing,.25rem) * 2) calc(var(--spacing,.25rem) * 2);border-color:var(--color-border-strong);background:#fff6;align-items:center;min-height:44px}@supports (color:color-mix(in lab, red, red)){.demo-selector{background:color-mix(in oklab, var(--color-surface) 40%, transparent)}}.demo-selector-icon{width:28px;height:28px}}@media not all and (min-width:64rem){.demo-selector{justify-content:center;gap:calc(var(--spacing,.25rem) * 1.5);min-height:4.25rem;padding:calc(var(--spacing,.25rem) * 2) var(--spacing,.25rem);text-align:center;flex-direction:column}.demo-selector>span:last-child{align-items:center}}}