/* Liquid lab / mercury switch. Gooey blobs merge through a small, local SVG filter. */
.mercury-card{background:radial-gradient(circle at 45% 45%,#36444a,#172329 78%);position:relative}
.mercury-hint{position:absolute;top:24px;left:24px;font:10px monospace;color:#b1c6c8;letter-spacing:.09em}
.mercury-switch{--mercury:#b9e8dc;--fluid-duration:650ms;--fluid-stretch:1.32;position:relative;width:220px;height:110px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer;touch-action:manipulation}
.mercury-switch:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:12px}
.mercury-switch .mercury-fluid{position:absolute;inset:0;pointer-events:none;filter:url(#micro-mercury-goo)}
.mercury-track{position:absolute;left:14px;right:14px;top:26px;bottom:26px;border-radius:50px;background:var(--mercury);opacity:.88;box-shadow:inset 0 1px 2px #fff9,0 6px 26px #08141945}
.mercury-drop{position:absolute;top:13px;left:8px;width:84px;height:84px;border-radius:50%;background:var(--mercury);box-shadow:inset -12px -12px 19px #05233166,inset 12px 14px 20px #fff9;transform:translateX(0) scale(1);transition:transform var(--fluid-duration) cubic-bezier(.22,1.45,.27,1),border-radius var(--fluid-duration) ease}
.mercury-switch[aria-checked="true"] .mercury-drop{transform:translateX(122px) scale(1);border-radius:38% 62% 48% 52% / 62% 44% 56% 38%}
.mercury-switch .mercury-sheen{position:absolute;top:20px;left:25px;width:45px;height:25px;border-top:3px solid #fff9;border-radius:50%;transform:translateX(0) rotate(-20deg);transition:transform var(--fluid-duration) cubic-bezier(.22,1.45,.27,1);pointer-events:none}
.mercury-switch[aria-checked="true"] .mercury-sheen{transform:translateX(122px) rotate(-20deg)}
.mercury-switch .mercury-flare{position:absolute;left:85px;top:43px;width:48px;height:24px;border-radius:100%;background:var(--mercury);opacity:0;pointer-events:none;transform:scaleX(.4);transition:opacity calc(var(--fluid-duration)*.35),transform var(--fluid-duration)}
.mercury-switch.is-flowing .mercury-flare{opacity:1;transform:scaleX(var(--fluid-stretch))}
.mercury-label{position:absolute;bottom:-25px;left:0;right:0;font:10px monospace;letter-spacing:.18em;text-align:center;color:#aec9c7}
.mercury-playground[hidden]{display:none!important}
.mercury-playground{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#32454b,#14252b 80%)}
.mercury-playground .mercury-switch{transform:scale(1.1)}
.mercury-playground .mercury-label{bottom:-24px}
.mercury-controls[hidden]{display:none!important}
.mercury-controls{display:grid;gap:18px;border-top:1px solid #3b4547;padding-top:21px}
.mercury-controls .range-control{display:block}
.mercury-instruction{position:absolute;left:23px;top:22px;color:#a6b9b9;font:10px monospace;letter-spacing:.1em}
@media(max-width:440px){.mercury-playground .mercury-switch{transform:scale(.86)}}
@media(prefers-reduced-motion:reduce){.mercury-switch .mercury-drop,.mercury-switch .mercury-sheen,.mercury-switch .mercury-flare{transition:none!important}.mercury-switch.is-flowing .mercury-flare{opacity:0}}