.demo-document{--demo-deep:#0b4f4a;--demo-deep-hover:#083b37;--demo-ivory:#fbf7ef;--demo-mist:#d5e4e1;--demo-gold:#e2b354;--demo-bezel:#1c1917}.demo-bar{z-index:60;padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom));background:var(--demo-deep);color:var(--demo-ivory);border-top:2px solid var(--demo-gold);flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem 1rem;font:500 .875rem/1.4 system-ui,-apple-system,Segoe UI,sans-serif;display:flex;position:sticky;bottom:0}.demo-bar__note{color:var(--demo-mist);text-align:center;margin:0}.demo-bar__note strong{color:var(--demo-gold);letter-spacing:.08em;text-transform:uppercase;font-weight:600}.demo-bar__types{padding-inline-end:1.5rem;flex-wrap:nowrap;gap:.25rem;max-width:100%;margin:0;padding:0;list-style:none;display:flex;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 1.5rem),#0000);mask-image:linear-gradient(90deg,#000 calc(100% - 1.5rem),#0000)}.demo-bar a{min-height:2.75rem;color:var(--demo-ivory);border-radius:999px;align-items:center;padding:0 1rem;text-decoration:none;display:inline-flex}.demo-bar a:hover{background:var(--demo-deep-hover)}.demo-bar a:focus-visible{outline:2px solid var(--demo-gold);outline-offset:2px}.demo-bar a[aria-current=page]{box-shadow:inset 0 0 0 1px var(--demo-gold)}.demo-bar a.demo-bar__bg{box-shadow:inset 0 0 0 1px var(--demo-mist)}.demo-bar a.demo-bar__cta{background:var(--demo-gold);color:#1c1917;font-weight:600}.demo-bar a.demo-bar__cta:hover{background:var(--demo-ivory)}@media (max-width:40rem){.demo-bar__note{flex-basis:100%;font-size:.8125rem}.demo-bar__note span{display:none}}.demo-bar__views{gap:.25rem;margin:0;padding:0;list-style:none;display:none}.demo-screen:focus-visible{outline:none}.demo-screen:focus-visible:after{content:"";z-index:70;pointer-events:none;box-shadow:inset 0 0 0 3px var(--demo-gold);border:3px solid #1c1917;position:fixed;inset:0}@media (min-width:48rem){.demo-bar__views{display:flex}.demo-bar a{padding:0 .75rem}.demo-document body:has(>.demo-stage[data-view=phone]){background:radial-gradient(ellipse 70% 60% at 50% 40%, color-mix(in oklab, var(--demo-deep) 80%, var(--demo-ivory)), transparent 70%), var(--demo-deep);flex-direction:column;height:100dvh;display:flex}.demo-stage[data-view=phone]{flex:1;justify-content:center;align-items:center;min-height:0;padding:1.5rem 1rem;display:flex}.demo-stage[data-view=phone] .demo-phone{box-sizing:border-box;border:12px solid var(--demo-bezel);background:var(--demo-bezel);width:414px;height:min(868px,100%);box-shadow:0 0 0 1px color-mix(in oklab, var(--demo-gold) 55%, transparent), 0 1.5rem 3rem #00000059;border-radius:2.75rem;flex-shrink:0;overflow:hidden;transform:translateZ(0)}.demo-stage[data-view=phone] .demo-screen{overscroll-behavior:contain;scrollbar-width:none;height:100%;overflow:hidden auto}.demo-stage[data-view=phone] .demo-phone:has(>.demo-screen:focus-visible){outline:3px solid var(--demo-gold);outline-offset:4px}@supports not selector(:has(*)){.demo-stage[data-view=phone] .demo-phone:focus-within{outline:3px solid var(--demo-gold);outline-offset:4px}}.demo-stage[data-view=phone] .demo-screen:focus-visible:after{content:none}.demo-stage[data-view=phone] .demo-screen::-webkit-scrollbar{display:none}.demo-stage[data-view=phone] .inv{min-height:100%}.demo-bar__note span{display:none}}@media (min-width:72rem){.demo-bar{flex-wrap:nowrap}.demo-bar>a,.demo-bar__note,.demo-bar__views{white-space:nowrap;flex-shrink:0}.demo-bar__types{min-width:0}.demo-bar a{white-space:nowrap}}