@layer components{.demo{padding-bottom:64px}.demo .demo-story{max-width:62ch;color:var(--fg);margin-top:14px;font-size:1.05rem;line-height:1.6}.demo .demo-meet{max-width:62ch;color:var(--cream);margin-top:10px;font-weight:520;line-height:1.5}.demo .demo-intro{max-width:62ch;color:var(--fg-muted);font-size:var(--t-sm);margin-top:6px;line-height:1.6}.demo .demo-steps{gap:12px;max-width:920px;margin:8px 0 0;padding:0;list-style:none;display:grid}.demo .demo-steps>li{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;padding:18px 20px;display:grid}.demo .demo-n{background:var(--surface-2);width:32px;height:32px;box-shadow:0 0 0 1px var(--line);color:var(--lamp);font-size:var(--t-sm);font-variant-numeric:tabular-nums;border-radius:50%;justify-content:center;align-items:center;font-weight:560;display:inline-flex}.demo .demo-steps>li:first-child .demo-n{background:var(--cream);color:var(--lamp-ink);box-shadow:0 0 12px var(--glow)}.demo .demo-body h2{font-size:var(--t-h2);letter-spacing:-.01em;font-weight:560}.demo .demo-body p{color:var(--fg-muted);font-size:var(--t-sm);margin-top:4px;line-height:1.55}.demo .demo-body .demo-note{color:var(--fg-subtle);margin-top:8px}.demo .demo-close{text-wrap:balance;max-width:62ch;color:var(--cream);letter-spacing:-.005em;margin-top:28px;font-size:1.15rem;font-weight:520;line-height:1.5}.demo .demo-steps .btn{min-height:fit-content}@media (pointer:coarse){.demo .demo-steps .btn{height:44px}}@media (max-width:640px){.demo .demo-steps>li{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:12px 14px;padding:16px}.demo .demo-steps .btn{white-space:normal;grid-column:2;justify-self:start}}}