/* Native controls stay usable while the authored shader loads or if WebGL fails. */
:root {
  --vl-liquid-plate: #0b0c0e;
  --vl-liquid-hot: #08090a;
  --vl-liquid-text: #ffffff;
  --vl-liquid-focus: #c8a45c;
  --vl-liquid-rim: rgba(210,220,237,.45);
  --vl-liquid-metal: linear-gradient(115deg, rgba(244,247,250,.78) 0%, rgba(170,183,200,.28) 19%, rgba(243,246,250,.62) 38%, rgba(109,120,139,.2) 55%, rgba(220,228,239,.56) 77%, rgba(157,174,192,.27) 100%);
}

.liquid-metal-button,
.ink-site .liquid-metal-button:not(.liquid-metal-rendered) {
  position: relative;
  z-index: 1;
  isolation: isolate;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  /* Keep the centre opaque for readable labels. The outer gradient retains a
     metallic edge without compiling a WebGL scene before any interaction. */
  background: linear-gradient(var(--vl-liquid-plate), var(--vl-liquid-plate)) padding-box,
    var(--vl-liquid-metal) border-box !important;
  color: var(--vl-liquid-text) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.95);
  box-shadow: 0 5px 11px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  transition: box-shadow .2s ease, border-color .2s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.liquid-metal-inline { display: inline-flex; align-items: center; justify-content: center; }
.liquid-metal-button::before,
.liquid-metal-button::after { content: none !important; }
.liquid-metal-button:hover,
.ink-site .liquid-metal-button:not(.liquid-metal-rendered):hover { background: linear-gradient(var(--vl-liquid-hot), var(--vl-liquid-hot)) padding-box,
  var(--vl-liquid-metal) border-box !important; }
.liquid-metal-button:focus-visible { outline: 2px solid var(--vl-liquid-focus) !important; outline-offset: 4px; }
.liquid-metal-button.is-pressed { box-shadow: inset 0 2px 5px rgba(0,0,0,.8); }
.liquid-metal-button:disabled,
.liquid-metal-button[aria-disabled="true"] { cursor: not-allowed !important; opacity: .46; }
.liquid-metal-button.active,
.liquid-metal-button[aria-selected="true"],
.liquid-metal-button[aria-pressed="true"] { outline: 1px solid var(--vl-liquid-focus); outline-offset: 2px; }
.liquid-metal-button.liquid-metal-rendered,
.liquid-metal-button.liquid-metal-rendered:hover { background: transparent !important; box-shadow: none !important; border-color: transparent !important; }

/* An out-of-flow sibling shares the control's layout and stacking context.
   It never replaces, wraps, or captures events from a link or form control. */
.vl-liquid-layer {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  border-radius: 999px;
  overflow: visible !important;
  isolation: isolate;
}
.vl-liquid-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--vl-liquid-plate);
  box-shadow:
    0 calc(var(--liquid-h)*.10) calc(var(--liquid-h)*.22) rgba(0,0,0,.72),
    0 calc(var(--liquid-h)*.30) calc(var(--liquid-h)*.66) rgba(0,0,0,.62),
    0 calc(var(--liquid-h)*.62) calc(var(--liquid-h)*1.30) rgba(0,0,0,.42);
  visibility: hidden;
}
.vl-liquid-layer.has-snapshot::before { visibility: visible; }
.vl-liquid-layer.is-live::before { visibility: hidden; }
.vl-liquid-scene,
.vl-liquid-snapshot {
  position: absolute !important;
  left: calc(-1 * var(--liquid-pad)) !important;
  top: calc(-1 * var(--liquid-pad)) !important;
  width: calc(100% + 2 * var(--liquid-pad)) !important;
  height: calc(100% + 2 * var(--liquid-pad)) !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  background: transparent !important;
  visibility: hidden;
  display: block !important;
}
.vl-liquid-layer.has-snapshot > .vl-liquid-snapshot { visibility: visible; }
/* A hidden iframe can have its first animation frame throttled indefinitely.
   Keep the scene visible behind the native fallback until its ready message. */
.vl-liquid-layer > .vl-liquid-scene { visibility: visible; }
.vl-liquid-layer > .vl-liquid-scene { opacity: 0; }
.vl-liquid-layer.is-live > .vl-liquid-scene { opacity: 1; }
.vl-liquid-layer.is-live > .vl-liquid-snapshot { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .liquid-metal-button { animation: none !important; transition: none !important; }
}
@media print {
  .vl-liquid-layer { display: none !important; }
  .liquid-metal-button.liquid-metal-rendered { color: #000 !important; border: 1px solid #000 !important; }
}
/* Keep the transparent shader halo inside scrollable overlays. The pill and
   its authored motion keep their full size; the surrounding glow has 12px. */
.brief-tray .vl-liquid-layer,.studio-search .vl-liquid-layer,.atlas-dialog .vl-liquid-layer{overflow:clip!important;overflow-clip-margin:12px}