@layer components{.demo-rail{grid-template-columns:repeat(var(--steps), minmax(0, 1fr));display:grid;position:relative}.demo-rail>li{justify-content:center;display:flex;position:relative}.demo-rail>li+li:before{content:"";background:var(--color-night-line);height:1px;position:absolute;top:1.1rem;left:calc(1rem - 50%);right:calc(50% + 1rem)}.demo-rail>li+li:after{content:"";background:var(--color-signal-night);transform-origin:0;height:1px;transition:transform var(--dur-3) var(--ease-out-soft);position:absolute;top:1.1rem;left:calc(1rem - 50%);right:calc(50% + 1rem);transform:scaleX(0)}.demo-rail>li[data-state=active]:after,.demo-rail>li[data-state=done]:after{transform:scaleX(1)}.demo-rail-btn{border-radius:var(--radius-sm);min-width:2.75rem;min-height:2.75rem;color:var(--color-night-muted);flex-direction:column;align-items:center;gap:.5rem;padding:.1rem .25rem;display:flex}.demo-rail-dot{border:1px solid var(--color-night-line);background:var(--color-night);width:2.2rem;height:2.2rem;font-family:var(--font-mono);transition:background-color var(--dur-2) ease, border-color var(--dur-2) ease, color var(--dur-2) ease;border-radius:999px;place-items:center;font-size:.75rem;display:grid}.demo-rail-label{text-align:center;font-size:.78rem;line-height:1.2}.demo-rail>li[data-state=active] .demo-rail-dot{border-color:var(--color-signal-night);color:var(--color-signal-night)}.demo-rail-dot{position:relative}.demo-rail-dot:after{content:"";border-radius:inherit;border:1px solid var(--color-signal-night);opacity:0;pointer-events:none;position:absolute;inset:-1px}[data-playing=true] .demo-rail>li[data-state=active] .demo-rail-dot:after{animation:demo-ring 1.6s var(--ease-out-soft) 2}.demo-rail-progress{background:color-mix(in oklab, var(--color-signal-night) 55%, transparent);transform-origin:0;height:1px;animation:demo-progress var(--dur,1.9s) linear both;pointer-events:none;position:absolute;top:1.1rem;left:calc(50% + 1rem);right:calc(1rem - 50%);transform:scaleX(0)}.demo-rail>li[data-state=active] .demo-rail-btn{color:var(--color-night-text)}.demo-rail>li[data-state=done] .demo-rail-dot{background:var(--color-signal-night);border-color:var(--color-signal-night);color:var(--color-night)}.demo-rail-btn:hover .demo-rail-dot{border-color:var(--color-night-muted)}@media (max-width:47.99rem){.demo-rail-label{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.demo-rail{padding-bottom:1.15rem}.demo-rail>li[data-state=active] .demo-rail-label{clip:auto;width:max-content;height:auto;font-size:.7rem;top:calc(100% - .1rem);left:50%;overflow:visible;transform:translate(-50%)}.demo-rail>li:first-child[data-state=active] .demo-rail-label{left:0;transform:none}.demo-rail>li:last-child[data-state=active] .demo-rail-label{left:auto;right:0;transform:none}.demo-rail>li+li:before,.demo-rail>li+li:after{left:calc(.9rem - 50%);right:calc(50% + .9rem)}}.demo-panel{border:1px solid var(--color-night-line);border-radius:var(--radius-md);background:var(--color-night-2);transition:border-color var(--dur-2) ease, box-shadow var(--dur-2) ease;flex-direction:column;display:flex;position:relative}.demo-panel[data-state=active]{border-color:color-mix(in oklab, var(--color-signal-night) 70%, transparent);box-shadow:0 0 0 1px color-mix(in oklab, var(--color-signal-night) 35%, transparent)}.demo-panel-body{flex:1;position:relative}.demo-panel[data-state=pending]{background:0 0;border-style:dashed}.demo-panel[data-state=pending] .demo-panel-content{opacity:.16;filter:grayscale()blur(1.5px);-webkit-user-select:none;user-select:none;pointer-events:none;transition:opacity var(--dur-3) var(--ease-out-soft), filter var(--dur-3) var(--ease-out-soft)}.demo-panel-state{min-width:5.75rem;font-family:var(--font-mono);letter-spacing:.02em;color:var(--color-night-muted);white-space:nowrap;flex:none;justify-content:flex-end;align-items:center;gap:.35rem;font-size:.72rem;display:inline-flex}.demo-panel[data-state=active] .demo-panel-state{color:var(--color-signal-night)}.demo-panel[data-state=done] .demo-panel-state{color:var(--color-ok-night)}.demo-panel[data-state=active] .demo-panel-content,.demo-panel[data-state=done] .demo-panel-content{animation:enter-up var(--dur-3) var(--ease-out-soft) both}.demo-panel[data-state=done] .demo-panel-content{animation:none}.demo-panel[data-state=active] .demo-stagger{animation:enter-up var(--dur-2) var(--ease-out-soft) both;animation-delay:calc(var(--i,0) * var(--stagger,70ms) + .12s)}.demo-stagger-read{--stagger:90ms}.demo-added{animation:enter-up var(--dur-2) var(--ease-out-soft) both}.value-flash{isolation:isolate;display:inline-block;position:relative}.value-flash:after{content:"";z-index:-1;border-radius:var(--radius-xs);background:color-mix(in oklab, var(--color-signal-night) 30%, transparent);opacity:0;animation:value-flash .9s var(--ease-out-soft) both;position:absolute;inset:-.1rem -.3rem}.demo-reveal{transition:opacity var(--dur-2) var(--ease-out-soft), transform var(--dur-2) var(--ease-out-soft)}.demo-reveal[data-on=false]{visibility:hidden;opacity:0;transform:translateY(8px)}@media (max-width:63.99rem){.demo-stage{grid-template-columns:minmax(0,1fr)}.demo-stage .demo-panel{min-height:16rem;transition:opacity var(--dur-2) var(--ease-out-soft), transform var(--dur-2) var(--ease-out-soft), visibility 0s linear var(--dur-2);grid-area:1/1}.demo-stage .demo-panel[data-state=active]{transition:opacity var(--dur-2) var(--ease-out-soft), transform var(--dur-2) var(--ease-out-soft), visibility 0s}.demo-stage .demo-panel:not([data-state=active]){visibility:hidden;opacity:0;pointer-events:none}.demo-stage .demo-panel[data-state=pending]{transform:translate(12px)}.demo-stage .demo-panel[data-state=done]{transform:translate(-12px)}.demo-stage .demo-panel[data-state=active] .demo-panel-content{animation:none}.demo-stage-fixed{grid-area:2/1}}.demo-choice{border-radius:var(--radius-sm);border:1px solid var(--color-night-line);text-align:left;min-height:2.75rem;color:var(--color-night-text);transition:border-color var(--dur-1) ease, background-color var(--dur-1) ease;padding:.5rem .85rem}.demo-choice:hover{border-color:var(--color-night-muted)}.demo-choice.is-selected{border-color:var(--color-signal-night);background:color-mix(in oklab, var(--color-signal-night) 10%, var(--color-night))}.paper-doc{background:var(--color-card);color:var(--color-ink);border-radius:var(--radius-sm);box-shadow:0 1px #0003,0 12px 28px -12px #0009}.doc-field{isolation:isolate;border-radius:3px;position:relative}.doc-field:after{content:"";z-index:-1;border-radius:inherit;background:color-mix(in oklab, var(--color-signal) 14%, transparent);box-shadow:0 0 0 1.5px var(--color-signal);opacity:0;transform-origin:0;transition:opacity var(--dur-2) var(--ease-out-soft), transform var(--dur-2) var(--ease-out-soft);position:absolute;inset:0;transform:scaleX(.4)}.doc-field[data-hl=true]:after{opacity:1;transition-delay:calc(var(--i,0) * 90ms);transform:none}.demo-scan{z-index:1;pointer-events:none;position:absolute;inset:0;overflow:hidden}.demo-scan:after{content:"";top:0;background:linear-gradient(to bottom, transparent, color-mix(in oklab, var(--color-signal) 18%, transparent), transparent);height:24%;animation:1.2s linear both demo-scan;position:absolute;inset-inline:0}.demo-validation{border:1px dashed color-mix(in oklab, var(--color-hold-night) 60%, transparent);border-radius:var(--radius-md);background:var(--color-night-2);position:relative}.demo-validation:before{content:"";border:1px solid var(--color-ok-night);border-radius:inherit;opacity:0;pointer-events:none;transition:opacity .24s var(--ease-out-soft);position:absolute;inset:-1px}.demo-validation[data-decision=approved]:before{opacity:1}.demo-validation[data-decision=edited]:before{border-color:var(--color-night-muted);opacity:1}.demo-validation-icon{animation:demo-settle .24s var(--ease-out-soft) both;flex:none}.demo-validation-stamp{border:1px solid color-mix(in oklab, var(--color-ok-night) 60%, transparent);border-radius:var(--radius-xs);color:var(--color-ok-night);letter-spacing:.03em;animation:enter-up var(--dur-2) var(--ease-out-soft) .12s both;align-items:center;padding:.2rem .55rem;font-size:.78rem;display:inline-flex}.demo-validation-outcome{animation:enter-up var(--dur-2) var(--ease-out-soft) .2s both}}@keyframes demo-ring{0%{opacity:.55;transform:scale(1)}to{opacity:0;transform:scale(1.45)}}@keyframes demo-progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes demo-scan{0%{transform:translateY(-100%)}to{transform:translateY(420%)}}@keyframes demo-settle{0%{opacity:.4;transform:scale(.98)}to{opacity:1;transform:none}}@keyframes value-flash{0%{opacity:0}18%{opacity:1}to{opacity:0}}@keyframes flow-dash{to{stroke-dashoffset:-24px}}@keyframes pulse-node{0%,to{box-shadow:0 0 0 0 color-mix(in oklab, currentColor 40%, transparent)}50%{box-shadow:0 0 0 6px color-mix(in oklab, currentColor 0%, transparent)}}@keyframes enter-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes question-in{0%{opacity:0;transform:translate(16px)}to{opacity:1;transform:none}}@keyframes caret{50%{opacity:0}}.anim-enter{animation:enter-up var(--dur-3) var(--ease-out-soft) both}.anim-pulse{animation:1.6s ease-out 3 pulse-node}.anim-flow{stroke-dasharray:4 8;animation:1.2s linear infinite flow-dash}[data-inview=false] .reveal-item{opacity:0;transform:translateY(10px)}[data-inview=true] .reveal-item{animation:enter-up var(--dur-3) var(--ease-out-soft) both;animation-delay:calc(var(--i,0) * var(--stagger,90ms))}[data-inview] .rail-line{transform-origin:top;transition:transform .52s var(--ease-out-soft);transition-delay:calc(var(--i,0) * var(--stagger,90ms) + .22s)}[data-inview=false] .rail-line{transform:scaleY(0)}@media (min-width:64rem){.lg\:h-px.rail-line{transform-origin:0}[data-inview=false] .lg\:h-px.rail-line{transform:scaleX(0)}}