.language-bar { display:flex; align-items:center; justify-content:flex-end; gap:10px; width:min(calc(100% - 48px), 1240px); margin:0 auto; padding-block:8px; color:var(--muted); font-size:12px; }
.language-bar label { font-weight:700; }
.language-bar select { min-height:44px; max-width:150px; padding:8px 30px 8px 14px; border:1px solid var(--border, var(--line)); border-radius:999px; background:var(--surface, var(--white)); color:var(--ink); font:inherit; font-weight:700; cursor:pointer; }
.language-bar select:focus-visible { outline:3px solid var(--brand, var(--green)); outline-offset:3px; }
html:not([lang="nb"]) h1, html:not([lang="nb"]) h2, html:not([lang="nb"]) h3 { overflow-wrap:anywhere; hyphens:auto; }
html:not([lang="nb"]) .project-body h3 { min-height:0; }
html:not([lang="nb"]) .project-body .text-link { margin-top:auto; }
html:not([lang="nb"]) .button, html:not([lang="nb"]) .demo-button { white-space:normal; text-align:center; }
@media(max-width:800px) {
 .language-bar {width:calc(100% - 40px); padding-block:4px;}
 html:not([lang="nb"]) .benefits-row > div {min-width:0; gap:6px;}
 html:not([lang="nb"]) .benefits-row strong {font-size:12px; overflow-wrap:anywhere;}
 html:not([lang="nb"]) .benefits-row small {font-size:11px;}
 html:not([lang="nb"]) .benefit-icon {flex-shrink:0;}
 html:not([lang="nb"]) .hero h1 {font-size:clamp(2.25rem,9.5vw,3.2rem);}
 html:not([lang="nb"]) .demo-hero h1 {font-size:clamp(2.4rem,10vw,4rem);}
 html:not([lang="nb"]) .demo-section h2 {font-size:clamp(2rem,8vw,3.5rem);}
 .tag-list li {overflow-wrap:anywhere; max-width:100%;}
}