.demo-bar{position:fixed;inset:auto 0 0 0;z-index:90;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px clamp(16px,4vw,40px);background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line-2);font-family:var(--sans);color:var(--ink-2);font-size:12px}.demo-bar__id{display:flex;align-items:baseline;gap:10px;min-width:0}.demo-bar__tag{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-2);flex:none}.demo-bar__name{font-family:var(--serif);font-size:17px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.demo-bar__theme{color:var(--ink-3);white-space:nowrap}.demo-bar__actions{display:flex;align-items:center;gap:8px;flex:none}.demo-bar__all,.demo-bar__cta,.demo-bar__step{display:inline-flex;align-items:center;justify-content:center;height:34px;padding-inline:14px;border:1px solid var(--line-2);color:var(--ink-2);font-size:11px;letter-spacing:.16em;text-transform:uppercase;transition:color .4s var(--ease,cubic-bezier(.16,1,.3,1)),border-color .4s var(--ease,cubic-bezier(.16,1,.3,1))}.demo-bar__step{width:34px;padding-inline:0;font-size:14px;letter-spacing:0}.demo-bar__all:focus-visible,.demo-bar__all:hover,.demo-bar__step:focus-visible,.demo-bar__step:hover{color:var(--ink);border-color:var(--gold)}.demo-bar__cta{background:var(--gold);border-color:var(--gold);color:var(--bg);font-weight:600}.demo-bar__cta:focus-visible,.demo-bar__cta:hover{background:var(--gold-2);border-color:var(--gold-2)}.demo-shell{padding-bottom:60px}@media (max-width:720px){.demo-bar{gap:12px;padding:10px 16px}.demo-bar__all,.demo-bar__theme{display:none}}