.language-picker { position: relative; z-index: 8; isolation: isolate; flex: 0 0 56px; width: 56px; height: 56px; transition: flex-basis .25s ease, width .25s ease; }
.language-picker:hover, .language-picker:focus-within { flex-basis: 112px; width: 112px; }
.language-picker.is-collapsed, .language-picker.is-collapsed:hover, .language-picker.is-collapsed:focus-within { flex-basis: 56px; width: 56px; }
.language-picker::before { position: absolute; z-index: 0; inset: 2px; border: 1px solid var(--green); border-radius: 999px; background: var(--ink); content: ""; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.language-picker:hover::before, .language-picker:focus-within::before { opacity: 1; }
.language-picker.is-collapsed::before, .language-picker.is-collapsed:hover::before, .language-picker.is-collapsed:focus-within::before { opacity: 0; }
.language-current, .language-choice { position: absolute; z-index: 1; top: 0; width: 56px; height: 56px; display: grid; place-items: center; }
.language-current { left: 0; }
.language-choice { left: 56px; padding: 0; border: 0; background: transparent; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.language-picker:hover .language-choice, .language-picker:focus-within .language-choice { opacity: 1; pointer-events: auto; }
.language-picker.is-collapsed .language-choice, .language-picker.is-collapsed:hover .language-choice, .language-picker.is-collapsed:focus-within .language-choice { opacity: 0; pointer-events: none; }
.language-orb { --language-accent: #ed1b2e; position: relative; width: 30px; height: 30px; border: 1px solid color-mix(in srgb, var(--language-accent) 70%, var(--paper)); border-radius: 50%; box-shadow: 0 0 13px 3px color-mix(in srgb, var(--language-accent) 55%, transparent); }
.language-orb::before { position: absolute; inset: -7px; border: 1px solid var(--language-accent); border-radius: 50%; content: ""; pointer-events: none; }
.language-current .language-orb { grid-area: 1 / 1; }
.language-current .language-orb-fade { opacity: 0; transition: opacity .25s ease; }
.language-current .language-orb-fade.is-fading { opacity: 1; }
.language-picker[data-selected-language="es"] .language-current .language-orb:not(.language-orb-fade),
.language-current .language-orb-fade[data-fade-language="es"],
.language-choice[data-language-choice="es"] .language-orb { --language-accent: #c82d34; background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .45), transparent 42%), linear-gradient(to bottom, #c82d34 0 27%, #f6c445 27% 73%, #c82d34 73%); }
.language-picker[data-selected-language="en"] .language-current .language-orb:not(.language-orb-fade),
.language-current .language-orb-fade[data-fade-language="en"],
.language-choice[data-language-choice="en"] .language-orb { --language-accent: #234078; background-color: #012169; background-image: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .3), transparent 42%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M0 0 60 60M60 0 0 60' stroke='%23fff' stroke-width='12'/%3E%3Cpath d='M-3 0 57 60' stroke='%23C8102E' stroke-width='5'/%3E%3Cpath d='M57 0 -3 60' stroke='%23C8102E' stroke-width='5'/%3E%3Cpath d='M0 30H60M30 0V60' stroke='%23fff' stroke-width='16'/%3E%3Cpath d='M0 30H60M30 0V60' stroke='%23C8102E' stroke-width='8'/%3E%3C/svg%3E"); background-size: auto, 100% 100%; }
.language-choice:hover .language-orb, .language-choice:focus-visible .language-orb { box-shadow: 0 0 18px 6px color-mix(in srgb, var(--language-accent) 70%, transparent); }