.echo-hw{max-width:100%;--hw-well:var(--echo-space-2,4px);--hw-outer:var(--echo-control-default,44px);--hw-h:calc(var(--hw-outer) - 2 * var(--hw-well));--hw-well-radius:calc(var(--hw-radius) + var(--hw-well) - 1px);--hw-px:18px;--hw-font:12px;--hw-radius:max(calc(11px * var(--echo-radius-scale, 1)),calc(var(--echo-cap-round, 0) * 999px));--hw-gap:var(--echo-space-4);--hw-icon:var(--echo-icon-md,16px);display:inline-flex;flex-direction:column;align-items:center;gap:var(--echo-space-4)}.echo-hw[data-size=sm]{--hw-well:var(--echo-space-1,2px);--hw-outer:var(--echo-control-compact,32px);--hw-px:12px;--hw-font:11px;--hw-radius:max(calc(8px * var(--echo-radius-scale, 1)),calc(var(--echo-cap-round, 0) * 999px));--hw-gap:var(--echo-space-3);--hw-icon:var(--echo-icon-sm,14px)}.echo-hw[data-size=lg]{--hw-outer:var(--echo-control-large,60px);--hw-px:22px;--hw-font:13px;--hw-radius:max(calc(13px * var(--echo-radius-scale, 1)),calc(var(--echo-cap-round, 0) * 999px));--hw-gap:var(--echo-space-5);--hw-icon:var(--echo-icon-md,16px)}.echo-hw[data-full-width]{display:flex;align-items:stretch;inline-size:100%}.echo-hw[data-full-width] .echo-hw__cap,.echo-hw[data-full-width] .echo-hw__well{box-sizing:border-box;inline-size:100%}.echo-hw__well{padding:var(--hw-well);border-radius:var(--hw-well-radius);box-shadow:inset 0 2px 5px color-mix(in oklab,var(--echo-cast-ink,black) calc(.6 * var(--echo-shade, 1) * 100%),transparent),inset 0 -1px 0 rgb(255 255 255/calc(.05 * var(--echo-gloss, 1)))}.echo-hw__cap,.echo-hw__well{box-sizing:border-box;max-width:100%}.echo-hw__cap{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--hw-gap);height:var(--hw-h);min-width:0;padding:0 var(--hw-px);border:0;border-radius:var(--hw-radius);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--echo-text);font-family:var(--echo-font-machine,ui-sans-serif,system-ui,sans-serif);font-size:var(--hw-font);font-weight:var(--echo-weight-bold,700);letter-spacing:var(--echo-tracking-wider,.12em);text-transform:uppercase;will-change:transform;text-decoration:none;--hw-seam:calc(4px + 1px * var(--lift, 0) - 3px * var(--press, 0));--hw-drop-y:calc(9px + 5px * var(--lift, 0) - 6px * var(--press, 0));--hw-drop-blur:calc(14px + 10px * var(--lift, 0) - 9px * var(--press, 0) - 3px * var(--load, 0))}.echo-hw__cap:after{content:"";position:absolute;inset-block:calc(-1 * var(--hw-well));inset-inline:0}.echo-hw__cap[data-icon-only=true]{padding:0;width:var(--hw-h)}.echo-hw__cap[data-variant=neutral]{background:radial-gradient(115% 85% at 32% 0,color-mix(in oklab,var(--echo-paper-stock,var(--echo-text)) calc(var(--echo-pillow, 0) * 34%),transparent) 0,transparent 72%),linear-gradient(180deg,var(--echo-cap-highlight) 0,var(--echo-cap) 40%,var(--echo-cap) 62%,var(--echo-cap-shadow) 100%);box-shadow:inset 0 calc(-10px * var(--echo-pillow, 0)) calc(16px * var(--echo-pillow, 0)) color-mix(in oklab,var(--echo-cast-ink,black) calc(.42 * var(--echo-shade, 1) * 100%),transparent),inset 0 1.5px 0 rgb(255 255 255/calc(.42 * var(--echo-gloss, 1))),inset 0 -1px 0 rgb(255 255 255/calc(.05 * var(--echo-gloss, 1))),inset 0 -3px 4px color-mix(in oklab,var(--echo-cast-ink,black) calc(.5 * var(--echo-shade, 1) * 100%),transparent),0 0 0 var(--echo-line-width,0) var(--echo-line,transparent),0 calc(var(--hw-seam) * (1 - .5 * var(--echo-drawn, 0))) 0 var(--echo-line-width,0) var(--echo-seam),var(--hw-light-x,0) calc(var(--hw-drop-y) + var(--hw-light-y, 0px)) var(--hw-drop-blur) color-mix(in oklab,var(--echo-cast-ink,black) calc(.55 * var(--echo-shade, 1) * 100%),transparent)}.echo-hw__cap[data-variant=primary]{color:var(--echo-drawn-key-ink,var(--echo-primary-cap-ink,var(--echo-text)));background:var(--echo-drawn-key,radial-gradient(115% 85% at 32% 0,color-mix(in oklab,var(--echo-paper-stock,var(--echo-text)) calc(var(--echo-pillow, 0) * 34%),transparent) 0,transparent 56%),linear-gradient(180deg,var(--echo-primary-cap-top) 0,var(--echo-primary-cap-mid) 45%,var(--echo-primary-cap-base) 100%));box-shadow:inset 0 calc(-10px * var(--echo-pillow, 0)) calc(16px * var(--echo-pillow, 0)) color-mix(in oklab,var(--echo-cast-ink,black) calc(.42 * var(--echo-shade, 1) * 100%),transparent),inset 0 1px 0 rgb(255 255 255/calc(.45 * var(--echo-gloss, 1))),inset 0 -2px 4px color-mix(in oklab,var(--echo-cast-ink,black) calc(.35 * var(--echo-shade, 1) * 100%),transparent),0 0 0 var(--echo-line-width,0) var(--echo-line,transparent),0 calc(var(--hw-seam) + 4px * var(--echo-drawn, 0)) 0 var(--echo-line-width,0) var(--echo-lit-edge,var(--echo-accent-6)),calc(var(--hw-light-x, 0px) * (1 - var(--echo-drawn, 0))) calc((var(--hw-drop-y) - 1px + var(--hw-light-y, 0px)) * (1 - var(--echo-drawn, 0))) calc((var(--hw-drop-blur) + 6px) * (1 - var(--echo-drawn, 0))) color-mix(in oklch,var(--echo-accent-4) 40%,transparent)}.echo-hw[data-variant=ghost] .echo-hw__well{padding:0;box-shadow:none}.echo-hw__cap[data-variant=ghost]{background:transparent;box-shadow:none;color:var(--echo-text)}.echo-hw__cap[data-variant=ghost] .echo-hw__content>:not(.echo-hw__icon){text-decoration-line:var(--echo-drawn-decoration,none);text-decoration-thickness:var(--echo-line-width,0);text-underline-offset:.3em;padding-block-end:calc(.45em * var(--echo-drawn, 0))}@media (hover:hover){.echo-hw__cap[data-variant=ghost]:hover{background:color-mix(in oklab,var(--echo-text) 8%,transparent)}}.echo-hw__well[data-impact]{position:relative}.echo-hw__well[data-impact]:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 1px var(--echo-accent-glow),0 0 calc(10px * (1 - var(--echo-drawn, 0))) color-mix(in oklch,var(--echo-accent-glow) 55%,transparent);opacity:calc(.85 * var(--impact, 0));transform:scale(calc(1 - .06 * var(--impact, 0)))}.echo-hw__cap:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px var(--echo-surface),0 0 0 4px var(--echo-accent-ink,var(--echo-accent-glow)),0 0 calc(12px * (1 - var(--echo-drawn, 0))) color-mix(in oklch,var(--echo-accent-ink,var(--echo-accent-glow)) 60%,transparent)}.echo-hw__cap:disabled{cursor:default;opacity:.45}.echo-hw__cap[data-loading=true]{cursor:progress}.echo-hw__cap[data-engraved=true]{color:var(--echo-seam);text-shadow:0 -1px 1px color-mix(in oklab,var(--echo-cast-ink,black) calc(.4 * var(--echo-shade, 1) * 100%),transparent),0 1px .5px rgb(255 255 255/calc(.3 * var(--echo-gloss, 1)))}.echo-hw__cap[data-engraved=true][data-variant=primary]{color:var(--echo-accent-6)}.echo-hw__content{position:relative;z-index:var(--echo-z-raised,1);display:inline-flex;align-items:center;min-width:0;gap:var(--hw-gap)}.echo-hw__content>span:not(.echo-hw__icon){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.echo-hw__content[data-hidden=true]{opacity:0}.echo-hw__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--hw-icon);height:var(--hw-icon)}.echo-hw__glint{position:absolute;inset:0;border-radius:inherit;z-index:var(--echo-z-base,0);background:radial-gradient(circle at var(--mx,50%) var(--my,0),rgb(255 255 255/calc(.3 * var(--echo-gloss, 1))) 0,rgb(255 255 255/calc(.08 * var(--echo-gloss, 1))) 35%,transparent 70%);opacity:calc(var(--lift, 0) * (1 - .6 * var(--press, 0)) * (1 - .5 * var(--load, 0)));pointer-events:none}.echo-hw__cap:disabled .echo-hw__glint{opacity:0}.echo-hw__fill{position:absolute;inset:0;z-index:var(--echo-z-base,0);pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,var(--echo-pour-top,var(--echo-primary-cap-top)) 0,var(--echo-pour-mid,var(--echo-primary-cap-mid)) 45%,var(--echo-pour-base,var(--echo-primary-cap-base)) 100%);clip-path:inset(0 calc((1 - var(--hw-fill, 0)) * 100%) 0 0)}.echo-hw__fill:dir(rtl){clip-path:inset(0 0 0 calc((1 - var(--hw-fill, 0)) * 100%))}.echo-hw__dots{position:absolute;inset:0;z-index:var(--echo-z-top,2);display:inline-flex;align-items:center;justify-content:center;gap:var(--echo-space-3)}.echo-hw__dots>i{width:6px;height:6px;border-radius:var(--echo-radius-full);background:currentColor;animation:echo-hw-pulse 1s ease-in-out infinite}.echo-hw__dots>i:nth-child(2){animation-delay:.16s}.echo-hw__dots>i:nth-child(3){animation-delay:.32s}@keyframes echo-hw-pulse{0%,to{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}.echo-hw__caption{overflow-wrap:anywhere;text-align:center;font-family:var(--echo-font-machine,ui-sans-serif,system-ui,sans-serif);font-size:var(--echo-text-3xs);font-weight:var(--echo-weight-semibold,600);letter-spacing:var(--echo-tracking-label,.2em);text-transform:uppercase;color:var(--echo-text-dim);text-shadow:0 1px 0 color-mix(in oklab,var(--echo-cast-ink,black) calc(.6 * var(--echo-shade, 1) * 100%),transparent)}@media (prefers-reduced-motion:reduce){.echo-hw__dots>i{animation:none;opacity:.7}}@media (pointer:coarse){.echo-hw[data-size=sm]{--hw-outer:44px}.echo-hw__cap[data-icon-only=true]{--echo-hit-area:44px}.echo-hw__cap[data-icon-only=true]:after{inset-inline:min(0px,calc((var(--hw-h) - 44px) / 2))}.echo-hw[data-size=sm] .echo-hw__cap:not([data-icon-only=true]){min-inline-size:44px}}@media (forced-colors:active){.echo-hw__well[data-impact]:after{display:none}.echo-hw__cap{border:var(--echo-border-hairline,1px) solid ButtonText}.echo-hw__dots>i{background:ButtonText;opacity:1}.echo-hw__cap[data-loading=true]{opacity:1}}