.liquid-language {
  --lls-width: 156px;
  --lls-height: 48px;
  --lls-text: #182331;
  --lls-selected-text: #182331;
  --lls-track: linear-gradient(155deg,#ffffffed 0%,#eff5ffbd 48%,#ffffffd6 100%);
  --lls-border: #e1e7ef;
  --lls-accent-soft: #eff5ff;
  --lls-solid: #edf3fc;
  --lls-focus: #075fcb;
  --lls-rim: #ffffff;
  --lls-solid-border: #cfdbed;
  --lls-divider: #d2dce8;
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  width: var(--lls-width);
  height: var(--lls-height);
  padding: 4px;
  box-sizing: border-box;
  isolation: isolate;
  flex: none;
  border: 1px solid #ffffff;
  border-radius: 999px;
  background: var(--lls-track);
  box-shadow: 0 0 0 1px #cbd9e5a3, 0 8px 24px #344f7510, inset 0 2px 2px #fff, inset 0 -2px 3px #b4c7e447;
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
}
.liquid-language::after { content: ''; position: absolute; left: 50%; top: 16px; width: 1px; height: 14px; background: var(--lls-divider); pointer-events: none; z-index: 0; }
.lls-optics { position: absolute; inset: 3px; overflow: hidden; border-radius: 999px; pointer-events: none; z-index: 0; }
.lls-pill {
  position: absolute; inset: 0 auto 0 0; width: 50%; border-radius: 999px;
  box-sizing: border-box;
  background: linear-gradient(145deg, #ffffffed, var(--lls-accent-soft));
  border: 1px solid var(--lls-rim);
  box-shadow: inset 0 -1px 2px #344f7510, 0 1px 3px #b4c7e447;
  transform-origin: center;
}
.lls-rim { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.lls-rim::before {
  content: ''; position: absolute; inset: -35% -65%;
  background: linear-gradient(115deg, transparent 35%, #fff0 40%, #ffffffc9 48%, #fff0 55%, transparent 60%);
}
.liquid-language button {
  appearance: none; -webkit-appearance: none; border: 0; padding: 0; margin: 0;
  position: relative; z-index: 1; background: transparent; border-radius: 999px;
  color: var(--lls-text); font: 600 13px/1 system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: .01em; cursor: pointer; touch-action: manipulation;
}
.liquid-language button[aria-checked='true'] { color: var(--lls-selected-text); }
.liquid-language button:hover { background: #ffffffb8; }
.liquid-language button:focus-visible { outline: 2px solid var(--lls-focus); outline-offset: 4px; }
.liquid-language[data-appearance='solid'] { background: var(--lls-solid); border-color: var(--lls-solid-border); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.liquid-language[data-appearance='solid'] .lls-pill { background: var(--lls-solid); border-color: var(--lls-solid-border); box-shadow: none; }
.liquid-language[data-appearance='solid'] .lls-rim { display: none; }
@media (prefers-reduced-transparency: reduce) {
  .liquid-language { background: var(--lls-solid); border-color: var(--lls-solid-border); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .liquid-language .lls-pill { background: var(--lls-solid); border-color: var(--lls-solid-border); box-shadow: none; }
  .liquid-language .lls-rim { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .liquid-language *, .liquid-language *::before { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .liquid-language { border-color: ButtonText; }
  .lls-pill { background: Highlight; border: 2px solid Highlight; box-shadow: none; }
  .lls-rim { display: none; }
  .liquid-language button[aria-checked='true'] { outline: 2px solid Highlight; outline-offset: -3px; }
}
