.language-picker{position:relative;display:flex;align-items:center;height:100%}.language-picker:after{content:"";position:absolute;top:100%;inset-inline:0;height:var(--space-xs)}.language-picker__button{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);background:linear-gradient(to bottom,var(--bg-nav-start) 0%,var(--bg-nav-middle) 70%,var(--bg-nav-end) 100%);border:none;border-radius:var(--radius-pill);font-family:var(--font-body);font-size:var(--fs-sm);color:var(--text-on-dark);cursor:pointer;box-shadow:var(--shadow-sm);transition:all var(--transition-base)}.language-picker__button:hover{background-color:hsl(var(--clr-magenta-600) / .5);box-shadow:var(--shadow-sm)}.language-picker__flag{font-size:1.1em;line-height:1}.language-picker__code{font-size:var(--fs-xs);font-weight:600;opacity:.9}.language-picker__arrow{font-size:var(--fs-xs);transition:transform var(--transition-base)}.language-picker:hover .language-picker__arrow{transform:rotate(180deg)}.language-picker__dropdown{position:absolute;top:calc(100% + var(--space-xs));inset-inline-end:0;width:min(90vw,22rem);column-count:2;column-gap:0;background-color:var(--bg-dropdown);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden;z-index:1001;opacity:0;visibility:hidden;transition:all var(--transition-base)}.language-picker:hover .language-picker__dropdown,.language-picker__dropdown:hover{opacity:1;visibility:visible}.language-picker__group{break-inside:avoid}.language-picker__option{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);color:var(--text-on-dark);font-family:var(--font-body);font-size:var(--fs-sm);transition:all var(--transition-base)}.language-picker__option:hover{background-color:hsl(var(--clr-magenta-600) / .5);color:var(--text-accent)}.language-picker__option[data-state=current]{background-color:hsl(var(--clr-green-600) / .4)}.language-picker__option[data-state=current]:hover{background-color:hsl(var(--clr-magenta-600) / .5)}.language-picker__name{flex-grow:1;font-weight:500}@media(min-width:768px){.language-picker__dropdown{width:min(90vw,34rem);column-count:3}}@media(max-width:768px){.language-picker__button{padding:var(--space-xxs) var(--space-xs);font-size:var(--fs-xs);gap:var(--space-xxs)}}@media(max-width:480px){.language-picker__button{padding:var(--space-xxs)}}