.demo-page{--demo-bg:var(--si-surface-subtle-warm);--demo-text:var(--si-ink);--demo-heading:var(--si-navy);--demo-muted:var(--si-text-muted);--demo-hairline:var(--si-border-subtle);--demo-chip-bg:var(--si-white);--demo-chip-text:var(--si-navy);--demo-current:var(--si-navy);--demo-link:var(--si-blue);--demo-band:var(--si-surface-page);--demo-focus:var(--si-blue)}.hv3.demo-page{background:var(--demo-bg);min-height:100vh;color:var(--demo-text)}body:has(.demo-page){background:var(--si-surface-subtle-warm)}.demo-root{overflow-x:hidden}html.has-launch-banner .demo-page{padding-top:44px}html.has-launch-banner .demo-page main{padding-top:0}.demo-wrap{box-sizing:border-box;width:100%;max-width:calc(1080px + 2 * var(--si-gutter));padding-inline:var(--si-gutter);margin-inline:auto}.demo-top{justify-content:space-between;align-items:center;gap:16px;min-height:72px;display:flex}.hv3.demo-page .demo-top a.demo-top__home:is(:link,:visited){min-height:44px;color:var(--demo-heading);letter-spacing:-.3px;align-items:center;gap:10px;font-size:20px;font-weight:700;text-decoration:none;display:inline-flex}.hv3.demo-page .demo-top a.demo-top__home:is(:link,:visited):hover{color:var(--demo-heading);text-decoration:none}.demo-top__note{color:var(--demo-muted);text-align:right;font-size:14px}.demo-head{padding:32px 0 40px}.demo-head__h1{color:var(--demo-heading);max-width:820px}.demo-head__lead{max-width:60ch;color:var(--demo-muted);margin:18px 0 0;font-size:18px;line-height:1.55}.demo-stage{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;gap:32px;display:grid}@media (max-width:760px){.demo-stage{grid-template-columns:minmax(0,1fr);gap:24px}.demo-head{padding:16px 0 28px}}.demo-screen{box-sizing:border-box;border:1px solid var(--si-border-subtle);background:var(--si-white);min-width:0;min-height:420px;box-shadow:var(--si-shadow-card);color:var(--si-ink);overflow-wrap:anywhere;border-radius:22px;padding:22px;container:demo-screen/inline-size}.demo-screen__body{flex-direction:column;gap:16px;display:flex}@container demo-screen (max-width:300px){.demo-screen__body{zoom:.92}}@container demo-screen (max-width:260px){.demo-screen__body{zoom:.84}}@media (max-width:760px){.demo-screen{min-height:0;padding:18px}}.demo-screen__bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;display:flex}.demo-screen__note{color:var(--si-text-muted);margin:0;font-size:15px;line-height:1.5}.demo-overline{letter-spacing:.06em;text-transform:uppercase;color:#4a5261;font-size:12px;font-weight:700}.demo-form{flex-direction:column;gap:14px;margin:0;display:flex}.demo-form__field{flex-direction:column;gap:6px;display:flex}.demo-form__value{box-sizing:border-box;border:1px solid var(--si-border-subtle);background:var(--si-tint-cool);border-radius:12px;flex-wrap:wrap;align-items:center;gap:10px;min-height:48px;margin:0;padding:11px 14px;font-size:16px;display:flex}.demo-form__value--answer{background:var(--si-tint-warm);border-color:#f9b882b3}.demo-tools{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.demo-tools__row{border:1px solid #1a1d1f14;border-radius:12px;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 14px;display:flex}.demo-tools__mark{background:var(--si-tint-cool);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.hv3 .demo-publish[aria-disabled=true]{background:var(--si-tint-green);color:#1e7a52;cursor:default}.demo-switch{background:var(--si-tint-cool);border-radius:14px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding:18px;display:flex}.demo-switch__pills{align-items:center;gap:10px;display:inline-flex}.demo-switch__pills .hv3-pill{padding:7px 14px;font-size:15px}.demo-switch__active{animation:.3s 1.2s both demoDim}.demo-switch__on{align-items:center;gap:12px;display:inline-flex}.demo-switch__label{color:var(--si-blue);font-size:16px;font-weight:700;animation:.4s 1.4s both siUp}@keyframes demoDim{0%{opacity:1}to{opacity:.7}}.demo-slack{color:var(--si-slack-ink);flex-direction:column;gap:18px;display:flex}.demo-slack__head{border-bottom:1px solid #ddd;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding-bottom:14px;display:flex}.demo-slack__list{flex-direction:column;gap:18px;display:flex}.demo-slack__mark{box-sizing:border-box;background:var(--si-white);border:1px solid #ddd;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;display:flex}.demo-slack__tag{color:#4a4a4a;letter-spacing:.04em;text-transform:uppercase;vertical-align:1px;background:#e8e8e8;border-radius:4px;padding:1px 5px;font-size:11px;font-weight:700;display:inline-block}.demo-slack__source{background:var(--si-tint-warm);box-shadow:inset 0 0 0 1.5px var(--si-coral);color:var(--si-source-blue);border-radius:8px;align-self:flex-start;gap:8px;padding:6px 10px;font-size:15px;line-height:1.4;display:inline-flex}.demo-panel{flex-direction:column;gap:24px;min-width:0;display:flex}.demo-chips{flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.demo-chip{box-sizing:border-box;border:1px solid var(--demo-hairline);border-radius:var(--si-radius-pill);background:var(--demo-chip-bg);min-height:44px;color:var(--demo-chip-text);cursor:pointer;align-items:center;gap:8px;padding:8px 14px 8px 8px;font-family:inherit;font-size:15px;font-weight:600;display:inline-flex}.demo-chip__n{background:var(--si-pale-blue-50);width:26px;height:26px;color:var(--si-navy);border-radius:50%;justify-content:center;align-items:center;font-size:13px;font-weight:700;display:inline-flex}.demo-chip[aria-current=step]{background:var(--demo-current);border-color:var(--demo-current);color:var(--si-white)}.demo-chip[aria-current=step] .demo-chip__n{color:var(--si-white);background:#ffffff2e}.demo-caption{flex-direction:column;gap:10px;display:flex}.demo-caption__h{letter-spacing:-.4px;color:var(--demo-heading);margin:0;font-size:26px;font-weight:600;line-height:1.2}.demo-caption__h:focus:not(:focus-visible){outline:none}.demo-caption__p{max-width:46ch;color:var(--demo-muted);margin:0;font-size:17px;line-height:1.55}.demo-nav{flex-wrap:wrap;gap:12px;display:flex}.hv3 .demo-back:disabled{opacity:.45;cursor:not-allowed;filter:none}.demo-end{border-top:1px solid var(--demo-hairline);color:var(--demo-muted);padding-top:20px;font-size:15px;line-height:1.55}.demo-end p{margin:0}.demo-end p+p{margin-top:8px}.hv3.demo-page .demo-end a.demo-end__link:is(:link,:visited),.hv3.demo-page .demo-end a.demo-end__link:is(:link,:visited):hover{color:var(--demo-link);text-underline-offset:3px;font-weight:700;text-decoration:underline}.demo-close{background:var(--demo-band);border-top:1px solid var(--demo-hairline);margin-top:64px;padding:36px 0}.demo-close__row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;display:flex}.demo-close__line{color:var(--demo-heading);margin:0;font-size:24px;font-weight:600;line-height:1.25}.demo-close__ctas{flex-wrap:wrap;gap:12px;display:flex}.hv3.demo-page a:focus-visible,.hv3.demo-page button:focus-visible,.hv3.demo-page [tabindex]:focus-visible{outline:3px solid var(--demo-focus);outline-offset:3px}@media (prefers-color-scheme:dark){.demo-page{--demo-bg:var(--si-surface-dark);--demo-text:var(--si-text-on-dark);--demo-heading:var(--si-white);--demo-muted:var(--si-text-on-dark-muted);--demo-hairline:var(--si-border-on-dark);--demo-chip-bg:#ffffff0f;--demo-chip-text:var(--si-white);--demo-current:var(--si-blue);--demo-link:var(--si-peach);--demo-band:var(--si-surface-darker);--demo-focus:var(--si-pale-blue)}body:has(.demo-page){background:var(--si-surface-dark)}.hv3 .demo-back{border-color:var(--si-border-on-dark);color:var(--si-white);background:#ffffff14}.hv3 .demo-back:hover{color:var(--si-white);background:#ffffff29}.hv3 .demo-next{background:var(--si-blue)}.demo-chip__n{color:var(--si-white);background:#ffffff1f}.hv3 .demo-close__secondary{border-color:var(--si-border-on-dark);color:var(--si-white);background:#ffffff14}}