:root:has(.demo-bar){--altura-da-barra-demo:84px}@media (max-width:720px){:root:has(.demo-bar){--altura-da-barra-demo:80px}}.demo-bar{position:fixed;left:0;right:0;bottom:max(12px,env(safe-area-inset-bottom));z-index:90;display:flex;justify-content:center;padding-inline:clamp(10px,2vw,20px);pointer-events:none}.demo-bar__pill{pointer-events:auto;box-sizing:border-box;width:min(100%,1040px);display:flex;align-items:center;gap:16px;padding:8px 8px 8px 22px;border-radius:999px;border:1px solid hsla(0,0%,4%,.08);background:hsla(0,0%,100%,.86);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);box-shadow:0 1px 2px hsla(0,0%,4%,.06),0 18px 44px -18px hsla(0,0%,4%,.4);color:#0a0a0a;font-family:var(--font-archivo),"Archivo",-apple-system,sans-serif;font-size:13px;line-height:1.2}.demo-bar__brand{flex:none;font-size:18px;font-weight:600;letter-spacing:-.03em;color:#0a0a0a;text-decoration:none}.demo-bar__brand em{font-style:normal}.demo-bar__sep{flex:none;width:1px;height:22px;background:hsla(0,0%,4%,.12)}.demo-bar__id{display:flex;align-items:center;gap:12px;min-width:0;margin:0}.demo-bar__tag{flex:none;font-family:var(--font-plex-mono),"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:hsla(0,0%,4%,.62)}.demo-bar__titulo{display:flex;align-items:baseline;gap:8px;min-width:0}.demo-bar__name{font-size:16px;font-weight:600;letter-spacing:-.01em;color:#0a0a0a;text-decoration:none;white-space:nowrap;position:relative}.demo-bar__name:after{content:"";position:absolute;inset:-12px -8px}.demo-bar__name:hover{text-decoration:underline;text-underline-offset:3px}.demo-bar__theme{color:hsla(0,0%,4%,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.demo-bar__actions{display:flex;align-items:center;gap:6px;flex:none;margin-left:auto}.demo-bar__all,.demo-bar__cta,.demo-bar__step{display:inline-flex;align-items:center;justify-content:center;height:42px;border-radius:999px;border:0;text-decoration:none;font-family:var(--font-plex-mono),"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transition:background-color .3s cubic-bezier(.16,1,.3,1)}.demo-bar__all,.demo-bar__step{background:hsla(0,0%,4%,.06);color:#0a0a0a}.demo-bar__step{width:42px}.demo-bar__all{padding-inline:18px}.demo-bar__all:hover,.demo-bar__step:hover{background:hsla(0,0%,4%,.12)}.demo-bar__cta{padding-inline:22px;background:#0a0a0a;color:#fff}.demo-bar__cta:hover{background:#3a3a3a;color:#fff}.demo-bar a:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #0a0a0a}.demo-shell{padding-bottom:var(--altura-da-barra-demo,84px)}.demo-shell .nav-mobile{padding-bottom:calc(48px + var(--altura-da-barra-demo, 84px))}@media (max-width:900px){.demo-bar__theme{display:none}}@media (max-width:720px){.demo-bar__pill{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-column-gap:10px;column-gap:10px;padding:6px 6px 6px 18px}.demo-bar__all,.demo-bar__sep,.demo-bar__tag{display:none}.demo-bar__brand{grid-column:1;grid-row:1;align-self:end;font-size:12px;line-height:1.25}.demo-bar__id{grid-column:1;grid-row:2;align-self:start;flex-direction:column;align-items:flex-start;gap:2px}.demo-bar__actions{grid-column:2;grid-row:1/3}.demo-bar__name{font-size:15px}.demo-bar__cta,.demo-bar__step{height:44px;min-width:44px}.demo-bar__cta{padding-inline:16px}}@media (prefers-reduced-motion:reduce){.demo-bar__all,.demo-bar__cta,.demo-bar__step{transition:none}}