/* Site frame (V6.8.0): one header for every page, and the home page that holds the Live feed. */
:root{--site-header-height:56px;--site-ink:#172035;--site-muted:#5f6b80;--site-paper:#f4f3ee;--site-line:#d9dde4;--site-blue:#485aff}

body{background:var(--site-paper);color:var(--site-ink)}
main{padding-bottom:0;min-height:calc(100svh - var(--site-header-height))}
.demo-header{height:var(--site-header-height);background:var(--site-paper);border-color:var(--site-line);padding:0 2.4%;gap:20px}
.demo-logo img{width:84px}
.header-descriptor{font:var(--text-label) var(--font-mono);letter-spacing:var(--track-label);color:var(--site-muted);white-space:nowrap;padding-left:20px;line-height:1.4}
.demo-header nav{gap:6px}
.demo-header nav a,.demo-header nav>a:first-child{font-size:var(--text-body);color:var(--site-muted)}
.demo-header nav a[aria-current=page],.demo-header nav>a[aria-current=page]{color:var(--site-ink)}

.site-experiments-nav{display:flex;justify-content:center;gap:5px;background:#eaece8;border-bottom:1px solid var(--site-line);height:36px;padding:3px 12px;overflow-x:auto;scrollbar-width:none}
.site-experiments-nav a{font:var(--text-meta) var(--font-mono);padding:8px 14px;white-space:nowrap;color:var(--site-muted);border-radius:4px}
.site-experiments-nav a[aria-current=page]{background:#172035;color:#fff}
.site-experiments-nav[hidden]{display:none}
.site-eyebrow{font:var(--text-label)/1.5 var(--font-mono);letter-spacing:var(--track-label);color:var(--site-muted);display:block}

.site-home{background:#f7f8fa}
.home-live-stage{min-width:0}
.home-unavailable{padding:50px 24px;color:var(--site-muted);font-size:var(--text-body)}
.not-found{padding:80px 7%;min-height:70svh}
.not-found h1{font-size:var(--text-display);font-weight:500;letter-spacing:var(--track-display);line-height:1.08;margin:20px 0 30px}
.not-found a{color:var(--site-blue);font-size:var(--text-body)}

@media(max-width:760px){
 .demo-header{padding:0 16px;gap:14px;flex-wrap:nowrap;align-content:normal}
 .demo-logo img{width:74px}
 .demo-header nav a{font-size:var(--text-small);padding:8px 11px}
 .site-experiments-nav{justify-content:flex-start}
 .site-experiments-nav a{padding:8px 10px}
}
@media(max-width:440px){.header-descriptor{display:none}}
/* Below the demo tabs a page is as tall as what is left of the window, so nothing scrolls past its end. */
.site-experiments-nav:not([hidden])~main{min-height:calc(100svh - var(--site-header-height) - 36px)}
.site-experiments-nav:not([hidden])~main .translation-page{min-height:var(--translation-height,calc(100svh - var(--site-header-height) - 36px))}