.language-picker{position:relative;flex-shrink:0;font-family:var(--ui)}
.language-toggle{height:40px;display:flex;align-items:center;gap:6px;padding:0 10px;border:1px solid var(--line);border-radius:24px;background:rgba(255,250,240,.5);color:var(--ink);font-size:11px;font-weight:600;transition:background .18s}
.language-toggle:hover,.language-toggle[aria-expanded=true]{background:var(--paper)}
.language-toggle svg{width:18px;height:18px}.language-chevron{font-size:14px;line-height:1}
.language-menu{position:absolute;right:0;top:calc(100% + 10px);width:205px;max-width:calc(100vw - 24px);padding:10px;border:1px solid var(--line);border-radius:16px;background:#fffcf6;box-shadow:0 14px 40px #30251c24;z-index:100;text-align:left}
.language-menu p{margin:4px 8px 9px;font-size:10px;letter-spacing:.04em;color:var(--ink-soft)}
.language-options{display:grid;gap:3px}.language-options button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:9px;background:transparent;font-size:14px;text-align:left;min-height:42px}
.language-options button:hover{background:#f3ebdd}.language-options button[aria-pressed=true]{background:#eee2d4;color:var(--wine-dark);font-weight:600}.language-check{opacity:0}.language-options button[aria-pressed=true] .language-check{opacity:1}
html:not([lang=vi]) .steps button{white-space:nowrap;padding-inline:9px}
html:lang(zh-CN),html:lang(ko),html:lang(ja){line-break:auto;word-break:normal}
body.reading .steps{display:none}
/* Keep the navigation on a separate row when translated step names need room. */
@media(max-width:760px){
 :root{--topbar:calc(106px + env(safe-area-inset-top,0px))}
 .topbar{flex-wrap:wrap;align-content:center;gap:5px 10px;padding-bottom:7px}
 .brand{margin-right:auto}.toggles{margin-left:0;gap:5px}.steps{order:3;width:100%;justify-content:center;gap:2px}
 .steps button,html:not([lang=vi]) .steps button{font-size:11px;padding:4px 7px;gap:4px;max-width:none}
 .steps button:before{width:17px;height:17px;font-size:10px;flex-shrink:0}
 body.reading{--topbar:calc(64px + env(safe-area-inset-top,0px))}
 body.reading .topbar{flex-wrap:nowrap;padding-bottom:0}
 .language-toggle{height:36px;padding:0 9px}.language-toggle .language-chevron{display:none}
 .toggles .icon-btn{height:36px;width:36px}
 .language-menu{top:calc(100% + 8px)}
}
@media(max-width:380px){.steps button,html:not([lang=vi]) .steps button{font-size:10px;padding:4px;gap:3px}.topbar .brand{font-size:22px}.language-toggle{padding:0 7px}}
.topbar{z-index:50}
html:not([lang=vi]) #groupMode button{white-space:normal;line-height:1.4;overflow:visible;text-overflow:clip}
@media(max-width:760px){body.mailbox-mode{--topbar:calc(64px + env(safe-area-inset-top,0px))}}