:root{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 28%,transparent) transparent}
/* WebKit page + menus: transparent track, muted ink thumb. */
html::-webkit-scrollbar,
.lang-menu-scroll::-webkit-scrollbar,
.site-menu::-webkit-scrollbar,
.theme-menu::-webkit-scrollbar,
.prose::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
html::-webkit-scrollbar-track,
.lang-menu-scroll::-webkit-scrollbar-track,
.site-menu::-webkit-scrollbar-track,
.theme-menu::-webkit-scrollbar-track,
.prose::-webkit-scrollbar-track {
  background: transparent;
}
html::-webkit-scrollbar-thumb,
.lang-menu-scroll::-webkit-scrollbar-thumb,
.site-menu::-webkit-scrollbar-thumb,
.theme-menu::-webkit-scrollbar-thumb,
.prose::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 28%, transparent);
  border-radius: 999px;
}
html::-webkit-scrollbar-thumb:hover,
.lang-menu-scroll::-webkit-scrollbar-thumb:hover,
.site-menu::-webkit-scrollbar-thumb:hover,
.theme-menu::-webkit-scrollbar-thumb:hover,
.prose::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ink) 45%, transparent);
}

.studio-language{--feather:#fff;--line:#1F2A44;--pond:#E8F4EF;--yolk-pale:#FFF1C9;--beak-text:#C25210}
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  width: min(280px, calc(100vw - 32px)); margin: 0; padding: 0;
  background: var(--feather); border: 3px solid var(--line); border-radius: 22px;
  /* Soft lift via filter so overflow:hidden still clips the inner scrollbar to the curve. */
  box-shadow: none;
  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--ink) 12%, transparent));
  display: flex; flex-direction: column;
  max-height: min(360px, calc(100dvh - 96px));
  overflow: hidden;
  transform-origin: top right;
  animation: menu-pop .18s ease-out;
}
.lang-menu[hidden] { display: none; animation: none; filter: none; }
/* Inner scroller keeps the thumb off the rounded sticker corners. */
.lang-menu-scroll {
  flex: 1 1 auto;
  min-height: 0;
  margin: 4px;
  padding: 4px;
  display: flex; flex-direction: column; gap: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink) 28%, transparent) transparent;
  border-radius: 16px;
}
.lang-option {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 14px; text-decoration: none;
  font-weight: 700; font-size: 16px; color: var(--ink); border: 0; background: transparent;
  font: inherit; cursor: pointer; text-align: left; width: 100%;
}
.lang-option:hover { background: var(--pond); color: var(--beak-text); }
.lang-option[aria-current="true"] { background: var(--yolk-pale); }
.lang-label { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.lang-flag {
  display: inline-block; width: 22px; height: 16px; flex: none;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* Compact SVG flags (data URIs) — reliable on Windows, no emoji letter fallbacks. */
.lang-flag--pl { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='1' fill='%23fff'/%3E%3Crect y='1' width='3' height='1' fill='%23DC143C'/%3E%3C/svg%3E"); }
.lang-flag--en { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect width='60' height='40' fill='%23012169'/%3E%3Cpath d='M0,0 60,40 M60,0 0,40' stroke='%23fff' stroke-width='8'/%3E%3Cpath d='M0,0 60,40 M60,0 0,40' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0 v40 M0,20 h60' stroke='%23fff' stroke-width='12'/%3E%3Cpath d='M30,0 v40 M0,20 h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E"); }
.lang-flag--de { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23000'/%3E%3Crect y='.667' width='3' height='.667' fill='%23D00'/%3E%3Crect y='1.333' width='3' height='.667' fill='%23FFCE00'/%3E%3C/svg%3E"); }
.lang-flag--es { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23AA151B'/%3E%3Crect y='.5' width='3' height='1' fill='%23F1BF00'/%3E%3C/svg%3E"); }
.lang-flag--fr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='1' height='2' fill='%23002395'/%3E%3Crect x='1' width='1' height='2' fill='%23fff'/%3E%3Crect x='2' width='1' height='2' fill='%23ED2939'/%3E%3C/svg%3E"); }
.lang-flag--it { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='1' height='2' fill='%23009646'/%3E%3Crect x='1' width='1' height='2' fill='%23fff'/%3E%3Crect x='2' width='1' height='2' fill='%23CE2B37'/%3E%3C/svg%3E"); }
.lang-flag--cs { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='1' fill='%23fff'/%3E%3Crect y='1' width='3' height='1' fill='%23D7141A'/%3E%3Cpath d='M0 0l1.5 1L0 2z' fill='%2311457E'/%3E%3C/svg%3E"); }
.lang-flag--sk { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='.667' fill='%23fff'/%3E%3Crect y='.667' width='3' height='.667' fill='%230B4EA2'/%3E%3Crect y='1.333' width='3' height='.667' fill='%23EE1C25'/%3E%3Cpath d='M.55.55h.7v.9H.55z' fill='%23EE1C25'/%3E%3Cpath d='M.7.7h.4v.55H.7z' fill='%23fff'/%3E%3Ccircle cx='.9' cy='.88' r='.12' fill='%230B4EA2'/%3E%3C/svg%3E"); }
.lang-flag--sq { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23E41E20'/%3E%3Cpath d='M1.5.35l.12.35h.38l-.3.22.12.35-.32-.22-.32.22.12-.35-.3-.22h.38z' fill='%23000'/%3E%3C/svg%3E"); }
.lang-flag--sr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='.667' fill='%23C6363C'/%3E%3Crect y='.667' width='3' height='.667' fill='%230C4076'/%3E%3Crect y='1.333' width='3' height='.667' fill='%23fff'/%3E%3C/svg%3E"); }
.lang-flag--el { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%230D5EAF'/%3E%3Cpath d='M0 .22h3M0 .44h3M0 .66h3M0 .88h3M0 1.1h3M0 1.32h3M0 1.54h3M0 1.76h3' stroke='%23fff' stroke-width='.12'/%3E%3Crect width='1.1' height='1.1' fill='%230D5EAF'/%3E%3Cpath d='M0 .55h1.1M.55 0v1.1' stroke='%23fff' stroke-width='.18'/%3E%3C/svg%3E"); }
.lang-flag--lt { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='.667' fill='%23FDB913'/%3E%3Crect y='.667' width='3' height='.667' fill='%23006A44'/%3E%3Crect y='1.333' width='3' height='.667' fill='%23C1272D'/%3E%3C/svg%3E"); }
.lang-flag--ka { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23fff'/%3E%3Cpath d='M0 .85h3v.3H0zM1.35 0h.3v2h-.3z' fill='%23FF0000'/%3E%3Cpath d='M.35.25h.35v.12H.47v.35H.35zm1.95 0h.35v.12h-.23v.35h-.12zm0 1.15h.35v.12h-.23v.35h-.12zM.35 1.4h.35v.12H.47v.35H.35z' fill='%23FF0000'/%3E%3C/svg%3E"); }
.lang-flag--ro { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='1' height='2' fill='%23002496'/%3E%3Crect x='1' width='1' height='2' fill='%23FCD116'/%3E%3Crect x='2' width='1' height='2' fill='%23CE1126'/%3E%3C/svg%3E"); }
.lang-option .check { width: 18px; height: 18px; flex: none; opacity: 0; }
.lang-option[aria-current="true"] .check { opacity: 1; }

.theme-picker { position: relative; }
.theme-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--feather); color: var(--ink); cursor: pointer; }
.theme-toggle svg { width: 22px; height: 22px; }
.theme-toggle:hover { color: var(--beak-text); }
.theme-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20;
  width: min(300px, calc(100vw - 32px)); margin: 0; padding: 8px; list-style: none;
  background: var(--feather); border: 3px solid var(--line); border-radius: 22px;
  box-shadow: var(--lift);
}
.theme-menu[hidden] { display: none; }
.theme-menu .menu-title { margin: 6px 10px 6px; font-weight: 800; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); }
.theme-option {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; align-items: center; gap: 12px;
  width: 100%; min-height: 56px; padding: 8px 10px; border: 0; border-radius: 16px;
  background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.theme-option:hover { background: var(--pond); }
.theme-option strong { display: block; font-family: var(--display); font-weight: 600; font-size: 17px; line-height: 1.2; }
.theme-option small { display: block; font-size: 13px; line-height: 1.3; color: var(--ink-soft); }
.theme-option .check { width: 20px; height: 20px; color: var(--grass); visibility: hidden; }
.theme-option[aria-checked="true"] .check { visibility: visible; }
/* Swatches show each look's own colours, whatever look is active. */
.swatch { width: 40px; height: 40px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--ink) 20%, transparent); }
.swatch-pond { background: conic-gradient(#FFD45C 0 25%, #FF8A3D 0 50%, #1C7A50 0 75%, #E8F4EF 0); }
.swatch-midnight { background: conic-gradient(#3DE0D2 0 25%, #F0B06A 0 50%, #142022 0 75%, #070B0C 0); }
.swatch-neon { background: conic-gradient(#D4FF6B 0 25%, #FF85C0 0 50%, #241C58 0 75%, #100C2C 0); }


.studio-language-menu.lang-menu{padding:0;overflow:hidden;max-height:min(360px,calc(100dvh - 96px));border:3px solid var(--line);border-radius:22px;width:min(280px,calc(100vw - 32px))}
.studio-language-menu .lang-menu-scroll{margin:4px;padding:4px;min-height:0;overflow-y:auto;border-radius:16px}
.studio-language-menu a.lang-option{font:700 15px/1.4 var(--body);padding:10px 12px;border-radius:14px;min-height:44px}
.studio-language-menu a[aria-current=page]{background:var(--yolk-pale)}
.studio-language-menu a[aria-current=page] .check{opacity:1}
.studio-language summary .lang-current-name{font:700 15px/1 var(--body)}
.studio-language[open] summary>svg{transform:rotate(180deg)}
@media(max-width:480px){.studio-language summary .lang-current-name{display:none}.studio-language summary{gap:9px;padding-inline:11px}}
@keyframes menu-pop{from{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}