.filament-button{--filament:#f4c76b;--width:300px;--cast-x:5px;--cast-y:9px;--cast-blur:16px;position:relative;display:block;width:min(var(--width),100%);aspect-ratio:360/116;height:auto;padding:0;border:0;border-radius:999px;background:none;box-shadow:var(--cast-x) var(--cast-y) var(--cast-blur) #30210b26,0 2px 3px #30210b15;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;flex-shrink:1}
.filament-button svg{display:block;width:100%;height:auto;overflow:visible;pointer-events:none}
.filament-button .part-body{fill:var(--filament)}
.filament-button .side-top{stop-color:var(--filament)}.filament-button .side-bottom{stop-color:color-mix(in srgb,var(--filament),black 25%)}
.filament-button .layer{fill:var(--side-material);stroke:color-mix(in srgb,var(--filament),black 16%);stroke-width:.4}
.filament-button .cavity{fill:color-mix(in srgb,var(--filament),black 18%);filter:var(--pressed-type)}
.filament-button .road-shadow{fill:none;stroke:color-mix(in srgb,var(--filament),black var(--groove,30%));stroke-linejoin:round;stroke-linecap:round}
.filament-button .road-body{fill:none;stroke:var(--filament);stroke-linejoin:round;stroke-linecap:round}
.filament-button .road-shine{fill:none;stroke:white;stroke-opacity:var(--shine,.55);stroke-linejoin:round;stroke-linecap:round}
.filament-button .floor-shadow{fill:none;stroke:black;stroke-opacity:.27;stroke-linejoin:round;stroke-linecap:round}
.filament-button .floor-shine{fill:none;stroke:var(--filament);stroke-opacity:.6;stroke-linejoin:round;stroke-linecap:round}
.filament-button:hover{transform:translateY(-1.5px);filter:brightness(1.025)}
.filament-button:active,.filament-button.is-pressed{transform:translateY(3px);box-shadow:1px 2px 4px #30210b20;filter:brightness(.98)}
.filament-button:focus-visible{outline:2px solid #777;outline-offset:8px}
@media(prefers-reduced-motion:reduce){.filament-button{transition:none}}
/* Softer bead cross-sections and same-material recessed floors. */
.filament-button{box-shadow:var(--cast-x) var(--cast-y) var(--cast-blur) #211a1023,0 1px 2px #211a1019}
.filament-button .layer{stroke:color-mix(in srgb,var(--filament),black 12%);stroke-width:.25}
.filament-button .side-bottom{stop-color:color-mix(in srgb,var(--filament),black 20%)}
.filament-button .cavity{fill:color-mix(in srgb,var(--filament),black 11%)}
.filament-button .floor-shadow{stroke-opacity:.21}
.filament-button .floor-body{fill:none;stroke:color-mix(in srgb,var(--filament),black 6%);stroke-linejoin:round;stroke-linecap:round}
.filament-button .floor-shine{stroke:white;stroke-opacity:.19}
.filament-button .road-soft-highlight{fill:none;stroke:white;stroke-opacity:.12;stroke-linejoin:round;stroke-linecap:round}
.filament-button .road-specular{fill:none;stroke:white;stroke-opacity:calc(var(--shine)*.6);stroke-linejoin:round;stroke-linecap:round}

.filament-button .cavity{filter:none}
/* The socket and printed body share SVG geometry, including their radii. */
.button-mount{--surface:#f5f5f5;position:relative;display:inline-block;flex-shrink:0;width:min(var(--mount-width),100%);padding:0;background:none;isolation:isolate}
.button-mount .filament-button{position:relative;z-index:1;flex-shrink:0;box-shadow:none;transition:filter .12s ease}
.filament-button .seat-lip{fill:var(--surface);stroke:#000;stroke-opacity:.11;stroke-width:.35}
.filament-button .seat-gap{fill:#252525}
.filament-button .side-wall{fill:var(--side-material);filter:drop-shadow(var(--cast-x) var(--cast-y) var(--cast-blur) #00000029)}
.filament-button .side-groove{fill:none;stroke:color-mix(in srgb,var(--filament),black 40%);stroke-opacity:var(--layer-depth,.5);stroke-width:var(--layer-groove-width,.17)}
.filament-button .side-ridge{fill:none;stroke:color-mix(in srgb,var(--filament),white 65%);stroke-opacity:var(--layer-highlight,.62);stroke-width:var(--layer-ridge-width,.14)}
.filament-button .key-body{transition:transform .12s ease}
.button-mount .filament-button:hover{transform:none;filter:brightness(1.015)}
.button-mount .filament-button:active,.button-mount .filament-button.is-pressed{transform:none;box-shadow:none;filter:brightness(.98)}
.button-mount .filament-button:active .key-body,.button-mount .filament-button.is-pressed .key-body{transform:translateY(var(--press-travel,2px))}
@media(prefers-reduced-motion:reduce){.button-mount *{transition:none!important}}

/* Keep the supplied key proportions, with sizes suited to each placement. */
.flow-site .filament-cta,.flow-site .pack-buy.filament-cta,.flow-site #sheet .object-buy.filament-cta,.flow-site .nav-links a.filament-cta{
 --mount-width:200px;position:relative;display:inline-block;width:var(--mount-width);max-width:100%;height:auto;min-height:0;aspect-ratio:auto;padding:0;border:0;background:none;box-shadow:none;border-radius:999px;color:#666;font-family:inherit;font-size:12px;line-height:1.2;cursor:pointer;text-align:center;transform:none;overflow:visible;flex-shrink:0;text-decoration:none
}
.flow-site .filament-cta:hover,.flow-site .pack-buy.filament-cta:hover,.flow-site #sheet .object-buy.filament-cta:hover,.flow-site .nav-links a.filament-cta:hover{background:none;box-shadow:none;transform:none}
.flow-site .nav-links a.filament-compact{--mount-width:112px;margin-left:4px}
.flow-site #sheet .object-buy.filament-cta{--mount-width:220px}
.flow-site .filament-cta .filament-button{width:100%;pointer-events:none}
.flow-site .filament-cta:active .key-body{transform:translateY(var(--press-travel,2px))}
.flow-site .filament-cta:hover .filament-button{filter:brightness(1.015)}
.flow-site .filament-cta:active .filament-button{filter:brightness(.98)}
.flow-site .filament-purchase-note{display:block;margin-top:10px;color:#777;font-size:12px;font-weight:500;letter-spacing:0;line-height:1.3}
.flow-site .filament-cta:focus-visible{outline:2px solid #247ccb;outline-offset:6px}
@media(max-width:700px){
 .flow-site .nav-links a.filament-compact{--mount-width:96px;margin-left:3px}
 .flow-site .pack-buy.filament-cta{--mount-width:190px}
 .flow-site #sheet .object-buy.filament-cta{--mount-width:200px}
}

.flow-site #process .bench-window{isolation:isolate}

/* Scale with both viewport dimensions, without a jump at tablet breakpoints. */
.flow-site #make-yours .pack-buy.filament-cta{--mount-width:clamp(128px,min(10vw,18svh),160px)}
.flow-site #make-yours .filament-purchase-note{font-size:12px;margin-top:8px}