@layer components{.hd-stage{--ease:cubic-bezier(.2, .7, .2, 1);--spring:cubic-bezier(.34, 1.4, .64, 1)}@media (min-width:1024px){.hd-float{animation:9s ease-in-out infinite hd-float;animation-delay:var(--float-delay,0s)}}@keyframes hd-float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.hd-swap{display:grid}.hd-layer{opacity:0;min-width:0;transform:var(--from,translateY(6px));transition:opacity .42s var(--ease), transform .5s var(--ease);pointer-events:none;grid-area:1/1}.hd-layer[data-active=true]{opacity:1;transition-delay:var(--d,0s);transform:none}.hd-drop{--from:translateY(-22px) scale(.96)}.hd-drop[data-active=true]{transition:opacity .3s var(--ease), transform .55s var(--spring)}.hd-slide{--from:translateX(18px)}.hd-bar{background:var(--pine);border-radius:999px;width:0;height:100%;transition:width 1.15s cubic-bezier(.4,.1,.2,1)}.hd-bar[data-on=true]{width:100%}.hd-chip{white-space:nowrap;color:#0000;background-color:var(--pane-3);max-width:100%;min-height:30px;transition:color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease), transform .45s var(--spring);border-radius:999px;align-items:center;gap:.4rem;padding:0 .7rem;font-size:.8rem;font-weight:560;display:inline-flex;transform:scale(.94);box-shadow:inset 0 0 0 1px #0000}.hd-chip[data-on=true]{color:var(--ink-2);background-color:var(--pane-2);box-shadow:inset 0 0 0 1px var(--line);transition-delay:var(--d,0s);transform:none}.hd-chip-dot{background:var(--pine);opacity:0;width:6px;height:6px;transition:opacity .3s var(--ease);border-radius:999px;flex:none}.hd-chip[data-on=true] .hd-chip-dot{opacity:1;transition-delay:var(--d,0s)}.hd-tap-button{background:var(--accent);min-height:26px;color:var(--accent-ink);border-radius:999px;align-items:center;padding:0 .7rem;font-size:.76rem;font-weight:650;display:inline-flex;position:relative}.hd-layer[data-active=true] .hd-tap-button{animation:hd-tap-press .5s var(--ease) .75s both}.hd-tap-button:after{content:"";border-radius:inherit;box-shadow:0 0 0 0 var(--accent);opacity:0;position:absolute;inset:-3px}.hd-layer[data-active=true] .hd-tap-button:after{animation:hd-tap-ring .9s var(--ease) .8s both}@keyframes hd-tap-press{0%,to{transform:scale(1)}40%{transform:scale(.9)}}@keyframes hd-tap-ring{0%{opacity:.55;box-shadow:0 0 0 0 var(--accent)}to{opacity:0;box-shadow:0 0 0 12px var(--accent)}}}