#hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;overflow:hidden;border-bottom:1px solid var(--border);padding:72px 24px 48px}
#field{position:absolute;inset:0;width:100%;height:100%;display:block}
.content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;
  pointer-events:none;width:100%}
.content a{pointer-events:auto}
#wordmark-space{width:min(94vw,1500px);aspect-ratio:106/20;margin-bottom:40px}
h1{font-size:clamp(20px,3vw,30px);font-weight:500;letter-spacing:-.01em;text-wrap:balance}
.sub{margin-top:16px;font-size:15px;line-height:1.7;color:var(--text2)}
.cta{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.stagger{opacity:0;transform:translateY(8px);animation:in .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(1.1s + var(--s)*.15s)}
@keyframes in{to{opacity:1;transform:none}}
#picker{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:20;max-width:calc(100vw - 24px);
  display:flex;align-items:center;gap:6px;padding:6px;background:color-mix(in srgb,var(--bg) 85%,transparent);
  backdrop-filter:blur(12px);border:1px solid var(--border)}
#picker .lbl{font-size:12px;color:var(--text2);padding:0 8px;white-space:nowrap}
#chips{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
#chips::-webkit-scrollbar{display:none}
#chips button{font:500 12px var(--mono);color:var(--text2);background:transparent;border:1px solid transparent;
  padding:6px 10px;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
#chips button:hover{background:var(--hov);color:var(--text)}
#chips button[aria-pressed=true]{background:var(--brand);color:var(--onbrand)}
@media (prefers-reduced-motion:reduce){.stagger{animation:none;opacity:1;transform:none}}