.locale-controls { display:flex; align-items:center; gap:4px; flex:none; }
.locale-controls :is(a, button) {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px; border-radius:6px; border:0;
  padding-inline:8px; color:inherit; background:transparent; text-decoration:none;
  font-family:inherit; font-weight:500; font-size:14px; line-height:1.2; white-space:nowrap; cursor:pointer;
  transition:background-color 140ms ease;
}
.locale-controls button { padding:0; }
.locale-controls :is(a,button):hover { background:color-mix(in srgb,currentColor 9%,transparent); }
.locale-controls :is(a,button):active { background:color-mix(in srgb,currentColor 15%,transparent); }
.locale-controls :is(a,button):focus-visible { outline:2px solid currentColor; outline-offset:2px; }
.locale-controls svg { width:20px; height:20px; pointer-events:none; }
@media (prefers-reduced-motion:reduce) { .locale-controls :is(a,button) { transition:none; } }

.story-language { display:flex; justify-content:space-between; align-items:center; gap:14px;
  position:sticky; top:0; z-index:15; padding:4px max(18px,env(safe-area-inset-left)); color:#f8f3eb;
  background:#292522; border-bottom:1px solid #60554d; }
.story-language > a { font-weight:650; min-height:44px; display:flex; align-items:center; }
.slide { scroll-margin-top:53px; }
:root[data-theme=light] .story-language { color:#302820; background:#f5efe6; border-bottom-color:#cfbfb0; }