Skip to content
Skip to content
/*
* Nexus estate header (live on the six homes since 2026-10-24).
*
* One in-page navigation for every page of GCRI, GRF, GRA, Nexus Standards, Risk Academy and Nexus Reports, rendered
* at the top of the page content directly under the theme header (owner, 2026-10-20: the theme headers stay as they
* are; no logo or wordmark here): a network strip, the
* institution bar with mega menus modelled on the Nexus Foundry Products menu, the Light / Dark / System switch top
* right, and on a subsite a contextual bar with its breadcrumb and sections. Rendered by nexus-header.js inside a
* shadow root, so no theme or plugin stylesheet reaches it; the @font-face block below is lifted to the document
* (fonts cannot be declared inside a shadow root).
*
* Rules (OWNER-DIRECTIONS.md, KITS.md, docs/design/NEXUS_FOUNDRY_UI_UX_KIT.md in the main repository):
* tokens only (every colour literal lives in the token blocks), black and white base, one institution accent,
* the 2px institution gradient only as a rule, 2px corners on cards, controls and tiles, square chips, no pills, line icons in
* currentColor at one stroke weight, sentence case, focus always visible, targets at least 24px.
* Type (Estate Instrument v4, D4): IBM Plex Sans for headings, navigation, labels and descriptors; IBM Plex Mono for codes,
* eyebrows and counts. Self-hosted from nexus-assets/chrome/fonts/ (see the rollout notes); system stack otherwise.
*/
/* ---- fonts (document level) */
/* fonts: IBM Plex comes from the page (the explorer kit and the theme); the header carries no font files of its own (a relative fonts/ path 404s on every site) */
/* ---- tokens: base (light, the estate default) */
:host {
/* nxh-tokens:light:start */
--h-canvas: #ffffff;
--h-elevated: #fafafa;
--h-sunken: #f4f4f5;
--h-hover: #ededed;
--h-line: rgba(0, 0, 0, 0.1);
--h-line-strong: rgba(0, 0, 0, 0.2);
--h-text: #000000;
--h-text-2: #262626;
--h-muted: #525252;
--h-primary-bg: #000000;
--h-primary-ink: #ffffff;
--h-primary-hover: #262626;
--h-shadow: 0 28px 64px -28px rgba(0, 0, 0, 0.28);
--h-scrim: rgba(255, 255, 255, 0.92);
/* nxh-tokens:light:end */
--h-accent: var(--h-text);
--h-a: var(--h-text);
--h-b: var(--h-text);
--h-c: var(--h-text);
--h-sans: "IBM Plex Sans", "IBM Plex Sans Variable", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--h-body: "IBM Plex Sans", "IBM Plex Sans Variable", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--h-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--h-stuck-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
--h-a11y-mark: #ffda00;
--h-dc-canvas: #000000;
--h-dc-elevated: #0a0a0a;
--h-dc-sunken: #000000;
--h-dc-hover: #1f1f1f;
--h-dc-line: rgba(255, 255, 255, 0.55);
--h-dc-line-strong: #ffffff;
--h-dc-text: #ffffff;
--h-dc-text-2: #ffffff;
--h-dc-muted: #f0f0f0;
--h-dc-accent: #ffda00;
--h-lc-canvas: #ffffff;
--h-lc-elevated: #ffffff;
--h-lc-sunken: #ffffff;
--h-lc-hover: #e6e6e6;
--h-lc-line: rgba(0, 0, 0, 0.6);
--h-lc-line-strong: #000000;
--h-lc-text: #000000;
--h-lc-text-2: #000000;
--h-lc-muted: #111111;
--h-lc-accent: #0000cc;
--h-r: 5px;
--h-r-chip: 4px;
--h-fast: 120ms;
--h-base: 180ms;
--h-ease: cubic-bezier(0.2, 0, 0, 1);
--h-gutter: 32px;
--h-max: 1216px;
--h-net-h: 32px;
--h-bar-h: 56px;
--h-ctx-h: 44px;
}
:host([data-theme="dark"]) {
/* nxh-tokens:dark:start */
--h-canvas: #000000;
--h-elevated: #111111;
--h-sunken: #0a0a0a;
--h-hover: #1a1a1a;
--h-line: rgba(255, 255, 255, 0.1);
--h-line-strong: rgba(255, 255, 255, 0.2);
--h-text: #ffffff;
--h-text-2: #d4d4d4;
--h-muted: #a3a3a3;
--h-primary-bg: #ffffff;
--h-primary-ink: #000000;
--h-primary-hover: #e5e5e5;
--h-shadow: 0 28px 64px -24px rgba(0, 0, 0, 0.9);
--h-scrim: rgba(0, 0, 0, 0.88);
/* nxh-tokens:dark:end */
}
/* ---- tokens: institution accent (KITS.md values; text accent meets AA on its canvas) */
:host([data-inst="gcri"]) { /* nxh-tokens:gcri-light */ --h-accent: #a16000; --h-a: #ffe66d; --h-b: #ffb300; --h-c: #ff8c00; }
:host([data-inst="grf"]) { /* nxh-tokens:grf-light */ --h-accent: #d81c45; --h-a: #ffb3c1; --h-b: #ff4d6d; --h-c: #e11d48; }
:host([data-inst="gra"]) { /* nxh-tokens:gra-light */ --h-accent: #2563eb; --h-a: #9ec5ff; --h-b: #4f8cff; --h-c: #2563eb; }
:host([data-inst="ra"]) { /* nxh-tokens:ra-light */ --h-accent: #081df4; --h-a: #aab4ff; --h-b: #4a5cff; --h-c: #081df4; }
:host([data-inst="nxs"]) { /* nxh-tokens:nxs-light */ --h-accent: #b3122e; --h-a: #e0a800; --h-b: #d9480f; --h-c: #b3122e; }
:host([data-inst="grx"]) { /* nxh-tokens:grx-light */ --h-accent: #c2410c; --h-a: #ea7a3a; --h-b: #c2410c; --h-c: #9a3412; }
:host([data-inst="gcri"][data-theme="dark"]) { /* nxh-tokens:gcri-dark */ --h-accent: #ffc233; --h-a: #fff1a8; --h-b: #ffc233; --h-c: #ff9f1c; }
:host([data-inst="grf"][data-theme="dark"]) { /* nxh-tokens:grf-dark */ --h-accent: #ff5c75; --h-a: #ffd1da; --h-b: #ff8fa3; --h-c: #ff5c75; }
:host([data-inst="gra"][data-theme="dark"]) { /* nxh-tokens:gra-dark */ --h-accent: #6ea8ff; --h-a: #cfe3ff; --h-b: #8fbaff; --h-c: #6ea8ff; }
:host([data-inst="ra"][data-theme="dark"]) { /* nxh-tokens:ra-dark */ --h-accent: #8c9aff; --h-a: #c9cfff; --h-b: #8c9aff; --h-c: #5b6cff; }
:host([data-inst="nxs"][data-theme="dark"]) { /* nxh-tokens:nxs-dark */ --h-accent: #e4546f; --h-a: #ffc93d; --h-b: #ff7a45; --h-c: #e4546f; }
:host([data-inst="grx"][data-theme="dark"]) { /* nxh-tokens:grx-dark */ --h-accent: #ff8a3d; --h-a: #ffc29a; --h-b: #ff8a3d; --h-c: #e8691f; }
:host([data-inst="nxs"]) { /* nxh-tokens:nxs-light (owner 2026-10-25: Standards is white, black, red, yellow; red from the nexus-standards site) */ --h-accent: #b3122e; --h-a: #e0a800; --h-b: #d9480f; --h-c: #b3122e; }
/* The Global Risks Index (owner 2026-10-25): the Index theme's own orange, --brand #ff5f00 */
:host([data-inst="index"]) { --h-accent: #c94a00; --h-a: #ff8a4c; --h-b: #ff5f00; --h-c: #c94a00; }
:host([data-inst="index"][data-theme="dark"]) { --h-accent: #ff8a4c; --h-a: #ffb07f; --h-b: #ff5f00; --h-c: #ff8a4c; }
:host {
--h-rule: linear-gradient(90deg, var(--h-a), var(--h-b), var(--h-c));
--h-focus: var(--h-accent);
display: block;
position: relative;
z-index: 90;
width: 100%;
color-scheme: light;
}
/* the footer shares this sheet; it must never paint over an open menu on a short page */
:host([data-nxf]) { z-index: auto; }
:host([data-theme="dark"]) { color-scheme: dark; }
:host([data-sticky]) { position: sticky; top: var(--nxh-top, 0px); }
:host([data-float]) { position: fixed; top: var(--nxh-top, 0px); left: 0; right: 0; }
/* no will-change here: a transform hint makes the host the containing block of the fixed mega panels */
:host([data-sticky]) { transition: transform 260ms cubic-bezier(0.2, 0, 0, 1), opacity 200ms ease; }
:host([data-hide]) { transform: translateY(calc(-100% - var(--nxh-top, 0px))); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { :host([data-sticky]) { transition: none; } }
:host([hidden]) { display: none; }
*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
svg { display: block; flex: none; }
.ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--h-focus); outline-offset: 2px; border-radius: var(--h-r); }
.h {
position: relative;
background: var(--h-canvas);
color: var(--h-text-2);
font: 400 14px/1.4 var(--h-sans);
border-block-end: 1px solid var(--h-line);
-webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--h-max); margin: 0 auto; padding: 0 var(--h-gutter); display: flex; align-items: center; min-width: 0; }
/* ---- network strip */
.net { background: var(--h-sunken); border-block-end: 1px solid var(--h-line); height: var(--h-net-h); overflow: hidden; transition: height var(--h-base) var(--h-ease), border-color var(--h-base) var(--h-ease); }
:host([data-stuck]) .net { height: 0; border-color: transparent; overflow: hidden; visibility: hidden; }
:host([data-stuck]) { --h-bar-h: 48px; --h-ctx-h: 40px; box-shadow: 0 1px 0 var(--h-line), var(--h-stuck-shadow); }
.net .wrap { height: var(--h-net-h); gap: 20px; }
.eyebrow { font: 500 11px/1 var(--h-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--h-muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; }
.rule { display: inline-block; width: 16px; height: 2px; background: var(--h-rule); flex: none; }
.net ul { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1; }
.net a { display: inline-flex; align-items: center; height: var(--h-net-h); padding: 0 8px; font-size: 12.5px; color: var(--h-text-2); position: relative; white-space: nowrap; transition: color var(--h-fast) var(--h-ease); }
.net a:hover { color: var(--h-text); }
.net a[aria-current] { color: var(--h-text); font-weight: 500; }
.net a[aria-current]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; background: var(--h-accent); }
.net .foundry { margin-inline-start: auto; gap: 6px; }
/* ---- institution bar */
.bar .wrap { height: var(--h-bar-h); gap: 20px; }
.main { flex: 1; min-width: 0; }
.menus { display: flex; align-items: center; gap: 2px; }
.trig, .link {
display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: var(--h-r);
font: 400 14px/1 var(--h-sans); color: var(--h-text-2); white-space: nowrap; position: relative;
transition: color var(--h-fast) var(--h-ease), background-color var(--h-fast) var(--h-ease);
}
.trig:hover, .link:hover { color: var(--h-text); background: var(--h-hover); }
.trig[aria-expanded="true"] { color: var(--h-text); }
.trig[aria-expanded="true"]::after, .link[aria-current]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -8px; height: 2px; background: var(--h-accent); }
.link[aria-current] { color: var(--h-text); }
.chev { width: 14px; height: 14px; transition: transform var(--h-base) var(--h-ease); }
.trig[aria-expanded="true"] .chev { transform: rotate(180deg); }
.end { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; flex: none; }
.end .contact { height: 40px; }
/* the accessibility plugin's button mounts in the light-DOM span nexus-header[data-nx-a11y-slot], shown here by the named
slot beside the appearance switch; empty it takes no room */
.end slot[name="a11y"] { display: contents; }
.end ::slotted([data-nx-a11y-slot]) { display: inline-flex; align-items: center; flex: none; }
.end ::slotted([data-nx-a11y-slot]:empty) { display: none; }
/* ---- appearance switch (top right, same place on every site) */
.theme { display: inline-flex; align-items: center; height: 32px; border: 0; padding: 0; gap: 2px; }
.theme button { display: inline-flex; align-items: center; justify-content: center; gap: 0; width: 32px; height: 32px; padding: 0; border-radius: var(--h-r); font: 400 12.5px/1 var(--h-sans); color: var(--h-muted); transition: color var(--h-fast) var(--h-ease), background-color var(--h-fast) var(--h-ease); }
.theme button:hover { color: var(--h-text); }
.theme button[aria-pressed="true"] { background: var(--h-hover); color: var(--h-text); font-weight: 500; }
.theme .ic { width: 16px; height: 16px; }
/* icon-only appearance control (owner 2026-10-25): the words stay for screen readers */
.theme .tl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.theme button[aria-pressed="true"] { color: var(--h-accent); }
@media (max-width: 640px) {
}
/* language control beside the appearance control, same style (nexus-site-core contract classes) */
.nx-lang { position: relative; display: inline-flex; }
.nx-lang__menu { position: relative; }
.nx-lang__btn { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 9px; border: 1px solid var(--h-line-strong); border-radius: var(--h-r); font: 400 12.5px/1 var(--h-sans); color: var(--h-muted); cursor: pointer; white-space: nowrap; }
.nx-lang__btn::-webkit-details-marker { display: none; }
.nx-lang__btn:hover { color: var(--h-text); }
.nx-lang__i, .nx-lang__chev { width: 14px; height: 14px; }
.nx-lang__code { display: none; }
.nx-lang__list { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 4; min-width: 176px; max-height: 60vh; overflow: auto; margin: 0; padding: 4px; background: var(--h-canvas); border: 1px solid var(--h-line); border-radius: var(--h-r); box-shadow: var(--h-shadow); }
.nx-lang__link { display: flex; align-items: center; min-height: 32px; padding: 0 8px; border-radius: var(--h-r); color: var(--h-text-2); font-size: 13px; }
a.nx-lang__link:hover { background: var(--h-hover); color: var(--h-text); }
.nx-lang__item.is-current .nx-lang__link { color: var(--h-text); font-weight: 500; }
.nx-lang__item.is-unavailable .nx-lang__link { color: var(--h-muted); justify-content: space-between; gap: 12px; cursor: default; }
/* institution flags: small, crisp, a hairline edge so white fields read on light and dark */
.flags { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 7px; vertical-align: middle; flex: none; }
.flag { display: block; height: 10px; width: auto; border-radius: 1.5px; box-shadow: 0 0 0 0.5px var(--h-line-strong); }
.flag-ch { width: 10px; }
.flag-us { width: 19px; }
.flag-ca { width: 20px; }
.net .flags { margin-inline-start: 6px; gap: 3px; }
.net .flag { height: 8px; }
.net .flag-ch { width: 8px; } .net .flag-us { width: 15.2px; } .net .flag-ca { width: 16px; }
.r-t .flags { margin-inline-start: 8px; }
.f-site .flags { margin-inline-start: 12px; gap: 6px; }
.f-site .flag { height: 14px; } .f-site .flag-ch { width: 14px; } .f-site .flag-us { width: 26.6px; } .f-site .flag-ca { width: 28px; }
.f-copy .flags { margin-inline-start: 8px; }
.nx-lang__vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nx-lang__soon { font: 400 10.5px/1 var(--h-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--h-muted); white-space: nowrap; }
.nx-lang__list { min-width: 248px; }
.f-lang .nx-lang__btn { height: 40px; padding: 0 14px; }
.rows.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.burger { display: none; height: 40px; gap: 8px; padding: 0 14px 0 12px; align-items: center; justify-content: center; border: 1px solid var(--h-line-strong); border-radius: var(--h-r); color: var(--h-text); font: 500 14px/1 var(--h-sans); }
.burger .ic { width: 18px; height: 18px; }
/* ---- mega panel (Nexus Foundry Products menu grammar) */
/* full width, end to end under the header (owner, 2026-10-25); the content keeps a wide measure inside */
.panel {
--p-in: max(var(--h-gutter), calc((100vw - 1560px) / 2));
position: fixed; left: 0; right: 0; top: var(--nxh-bottom, 160px); z-index: 2;
max-height: calc(100vh - var(--nxh-bottom, 160px)); overflow-y: auto; overscroll-behavior: contain;
background: var(--h-canvas); color: var(--h-text-2); border-block: 1px solid var(--h-line); border-radius: 0; box-shadow: var(--h-shadow);
}
.panel[hidden] { display: none; }
.panel::before { content: ""; position: sticky; top: 0; display: block; height: 2px; margin: -1px -1px 0; background: var(--h-rule); border-radius: var(--h-r) var(--h-r) 0 0; z-index: 1; }
.p-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--p-in); border-block-end: 1px solid var(--h-line); }
.p-head .eyebrow:first-child { color: var(--h-text-2); }
.p-meta { display: flex; align-items: center; gap: 12px; min-width: 0; }
.p-meta .sep { width: 20px; height: 1px; background: var(--h-line-strong); flex: none; }
.p-meta .eyebrow:last-child { overflow: hidden; text-overflow: ellipsis; }
.all { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; font: 500 12.5px/1 var(--h-sans); color: var(--h-text-2); white-space: nowrap; }
.all:hover { color: var(--h-text); }
.arrow { width: 13px; height: 13px; }
.p-body { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)) 272px; gap: 0 28px; padding: 22px var(--p-in) 26px; }
/* views: vertical tabs, three columns a view, the action column with its motion */
.p-body.tabbed { grid-template-columns: 200px minmax(0, 1fr) 272px; }
.vtabs { display: flex; flex-direction: column; gap: 2px; padding-inline-end: 20px; border-inline-end: 1px solid var(--h-line); }
.vtab { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; min-height: 44px; padding: 9px 12px; border-radius: var(--h-r); text-align: start; color: var(--h-text-2); box-shadow: inset 2px 0 0 transparent; transition: background-color var(--h-fast) var(--h-ease), box-shadow var(--h-fast) var(--h-ease), color var(--h-fast) var(--h-ease); }
.vtab:hover { background: var(--h-hover); color: var(--h-text); }
.vtab[aria-selected="true"] { background: var(--h-elevated); color: var(--h-text); box-shadow: inset 2px 0 0 var(--h-accent); }
.vtab[aria-selected="true"]:dir(rtl) { box-shadow: inset -2px 0 0 var(--h-accent); }
/* right-to-left: directional arrows point the reading way (their hover nudge follows, it runs inside the flip) */
.arrow:dir(rtl) { scale: -1 1; }
.vtab:focus-visible { outline-offset: -2px; }
.vt-l { font: 500 13.5px/1.2 var(--h-sans); letter-spacing: -0.005em; }
.vt-d { font: 400 11.5px/1.3 var(--h-body); color: var(--h-muted); }
.vpane { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 0 28px; min-width: 0; animation: nxh-in var(--h-base) var(--h-ease); }
.vpane[hidden] { display: none; }
/* movement only: text is never shown at reduced opacity, so contrast holds from the first frame */
@keyframes nxh-in { from { transform: translateY(4px); } to { transform: none; } }
/* the action column: no frame; the motion sits in the header itself, the actions under it */
.rail.slim { padding: 0; background: none; border: 0; }
.viz { height: 200px; margin: -6px 0 18px; }
.viz canvas { display: block; width: 100%; height: 100%; }
.p-body[data-rail="none"] { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.col { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.g-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block-end: 10px; border-block-end: 1px solid var(--h-line); }
.g-head .eyebrow { color: var(--h-text-2); }
.g-head a.eyebrow:hover { color: var(--h-text); }
.g-desc { font: 400 11.5px/1.25 var(--h-body); color: var(--h-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow: hidden; min-width: 0; }
.rows { margin-top: 6px; }
.row {
display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 5px 8px; margin: 0 -8px; border-radius: var(--h-r);
transition: background-color var(--h-fast) var(--h-ease);
}
.row:hover, .row:focus-visible { background: var(--h-hover); }
.row:focus-visible { outline-offset: -2px; }
.row[aria-current] .r-t { color: var(--h-accent); }
.itile { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border: 1px solid var(--h-line); border-radius: var(--h-r); color: var(--h-text-2); flex: none; transition: border-color var(--h-fast) var(--h-ease), color var(--h-fast) var(--h-ease); }
.row:hover .itile, .row:focus-visible .itile { border-color: var(--h-line-strong); color: var(--h-text); }
.r-txt { display: block; min-width: 0; flex: 1; }
.r-t { display: block; font: 500 13.5px/1.2 var(--h-sans); letter-spacing: -0.005em; color: var(--h-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-d { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-top: 3px; font: 400 12px/1.35 var(--h-body); color: var(--h-muted); white-space: normal; overflow: hidden; }
.row .arrow { opacity: 0; color: var(--h-muted); transition: opacity var(--h-fast) var(--h-ease), transform var(--h-fast) var(--h-ease); }
.row:hover .arrow, .row:focus-visible .arrow { opacity: 1; transform: translateX(2px); }
.row.compact { min-height: 38px; padding-block: 3px; gap: 10px; }
.row.compact .itile { width: 28px; height: 28px; }
.row.compact .itile .ic { width: 15px; height: 15px; }
.vpane .row.compact .r-t { font-weight: 450; color: var(--h-text-2); }
.vpane .row.compact:hover .r-t, .vpane .row.compact:focus-visible .r-t { color: var(--h-text); }
/* ---- start here rail */
.rail { display: flex; flex-direction: column; padding: 20px; background: var(--h-elevated); border: 1px solid var(--h-line); border-radius: var(--h-r); min-width: 0; }
.feat { display: block; margin-top: 10px; border-radius: var(--h-r); }
.feat-t { display: flex; align-items: center; gap: 8px; margin-top: 0; font: 500 15px/1.25 var(--h-sans); letter-spacing: -0.01em; color: var(--h-text); }
.feat-d { display: block; margin-top: 4px; font: 400 12.5px/1.45 var(--h-body); color: var(--h-muted); }
.feat:hover .feat-t .arrow { transform: translateX(2px); }
.acts { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--h-r); font: 500 13px/1 var(--h-sans); white-space: nowrap; transition: background-color var(--h-fast) var(--h-ease), border-color var(--h-fast) var(--h-ease); }
.btn.primary { background: var(--h-primary-bg); color: var(--h-primary-ink); }
.btn.primary:hover { background: var(--h-primary-hover); }
.btn.secondary { border: 1px solid var(--h-line-strong); color: var(--h-text); }
.btn.secondary:hover { border-color: var(--h-text); background: var(--h-hover); }
.pts { margin: 18px 0 0; border-block-start: 1px solid var(--h-line); }
.pt { display: flex; flex-direction: column; gap: 5px; padding: 10px 0; border-block-end: 1px solid var(--h-line); }
.pt-v { font: 400 12px/1.45 var(--h-body); color: var(--h-text-2); }
.p-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 12px 24px; border-block-start: 1px solid var(--h-line); }
.p-foot a { font: 400 12.5px/1 var(--h-sans); color: var(--h-muted); min-height: 24px; display: inline-flex; align-items: center; }
.p-foot a:hover { color: var(--h-text); }
/* ---- contextual bar (subsites) */
.ctx { border-block-start: 1px solid var(--h-line); }
.ctx .wrap { height: var(--h-ctx-h); gap: 16px; }
.crumbs { display: flex; align-items: center; gap: 8px; flex: none; min-width: 0; font-size: 13px; }
.crumbs li { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.crumbs li + li::before { content: "/"; color: var(--h-muted); }
.crumbs a { color: var(--h-muted); min-height: 24px; display: inline-flex; align-items: center; }
.crumbs a:hover { color: var(--h-text); }
.crumbs a[aria-current] { color: var(--h-text); font-weight: 500; }
.vsep { width: 1px; height: 18px; background: var(--h-line-strong); flex: none; }
.inl { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1; overflow-x: auto; scrollbar-width: none; }
.inl::-webkit-scrollbar { display: none; }
.inl a[hidden] { display: none; }
.inl a { display: inline-flex; align-items: center; height: 32px; padding: 0 10px; border-radius: var(--h-r); font-size: 13px; color: var(--h-text-2); white-space: nowrap; }
.inl a:hover { background: var(--h-hover); color: var(--h-text); }
.inl a[aria-current] { color: var(--h-text); font-weight: 500; box-shadow: inset 0 -2px 0 var(--h-accent); border-radius: 0; }
.ctx .trig { height: 32px; font-size: 13px; flex: none; border: 1px solid var(--h-line-strong); }
.ctx .trig[aria-expanded="true"]::after { display: none; }
/* ---- drawer (phones and narrow tablets) */
.drawer { position: fixed; inset: var(--nxh-bottom, 56px) 0 0 0; z-index: 3; background: var(--h-canvas); color: var(--h-text-2); overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px 40px; border-block-start: 1px solid var(--h-line); }
.drawer[hidden] { display: none; }
.d-sec { border-block-end: 1px solid var(--h-line); }
.d-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 8px 0; text-align: start; }
.d-btn .d-l { display: block; font: 500 16px/1.2 var(--h-sans); color: var(--h-text); letter-spacing: -0.01em; }
.d-btn .eyebrow { display: block; margin-top: 6px; white-space: normal; line-height: 1.45; }
.d-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.d-body { padding: 0 0 18px; }
.d-body[hidden] { display: none; }
.d-group + .d-group { margin-top: 18px; }
.d-group .g-head { margin-bottom: 4px; }
.d-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.d-links { display: flex; flex-direction: column; padding: 12px 0; border-block-end: 1px solid var(--h-line); }
.d-links a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; font: 500 15px/1.2 var(--h-sans); color: var(--h-text); }
.d-net { padding: 18px 0 0; }
.d-net ul { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.d-net a { display: flex; align-items: center; min-height: 40px; font-size: 14px; color: var(--h-text-2); }
.d-net a[aria-current] { color: var(--h-text); font-weight: 500; box-shadow: inset 2px 0 0 var(--h-accent); padding-inline-start: 10px; }
.d-net a[aria-current]:dir(rtl) { box-shadow: inset -2px 0 0 var(--h-accent); }
.d-crumbs { padding: 14px 0 4px; }
/* ---- responsive: name and contact give way first; the drawer below 960px */
/* below 1280 the panel keeps titles only (kit 15.3: a wide menu hides descriptors), the rail narrows */
@media (max-width: 1279px) {
.panel .r-d, .panel .g-desc { display: none; }
.p-body { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)) 232px; gap: 0 24px; }
.p-body.tabbed { grid-template-columns: 184px minmax(0, 1fr) 232px; }
.vpane { gap: 0 24px; }
.vt-d { display: none; }
.row { min-height: 38px; }
}
@media (max-width: 1199px) { .nx-lang__label { display: none; } .nx-lang__code { display: inline; } .theme .tl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .theme button { padding: 0 7px; } .end .contact { display: none; } }
@media (max-width: 959px) {
:host { --h-gutter: 16px; --h-bar-h: 56px; --h-ctx-h: 40px; }
.net, .main, .end .contact { display: none; }
.bar .wrap { justify-content: space-between; }
.burger { display: inline-flex; }
.ctx .inl, .ctx .vsep, .ctx .trig { display: none; }
.crumbs { flex: 1; overflow: hidden; }
.crumbs li:not(:first-child):not(:last-child) { display: none; }
.crumbs li:last-child { overflow: hidden; }
.crumbs li:last-child a { overflow: hidden; text-overflow: ellipsis; display: block; line-height: 24px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
/* ---- estate footer v3 (OD-10, nexus-footer.js): end of the page content; the site's only footer once the theme
footers are emptied (owner, 2026-10-21). A context band (site, role, its documentation, back to top), two rows of
five columns with a line icon per column (the page's context, then the whole Consortium), then the record bar.
No logo, no theme switch; 5px controls, 4px icon tiles, the institution gradient only as the top rule. */
.f { position: relative; background: var(--h-elevated); color: var(--h-text); border-top: 1px solid var(--h-line); font: 400 14px/1.5 var(--h-body); -webkit-font-smoothing: antialiased; }
.f::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--h-rule); }
.f-wrap { max-width: var(--h-max); margin: 0 auto; padding: 44px var(--h-gutter) 24px; }
.f-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 40px; padding-bottom: 32px; }
.f-id { min-width: 0; }
.f-site { font: 500 22px/1.25 var(--h-sans); letter-spacing: -0.015em; color: var(--h-text); text-decoration: none; }
.f-site:hover { text-decoration: underline; text-underline-offset: 3px; }
.f-role { margin: 8px 0 0; color: var(--h-text-2); font-size: 14px; line-height: 1.55; max-width: 76ch; }
.f-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.f-act { appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 1px solid var(--h-line-strong); border-radius: var(--h-r); background: var(--h-canvas); color: var(--h-text); font: 500 13px/1 var(--h-sans); text-decoration: none; cursor: pointer; white-space: nowrap; }
.f-act:hover { background: var(--h-hover); }
.f-docs { background: var(--h-primary-bg); border-color: var(--h-primary-bg); color: var(--h-primary-ink); }
.f-docs:hover { background: var(--h-primary-hover); border-color: var(--h-primary-hover); }
.f-row { border-top: 1px solid var(--h-line); padding: 26px 0 30px; }
.f-row-h { margin: 0 0 22px; }
.f-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 32px; }
.f-col { min-width: 0; }
.f-col > summary { list-style: none; cursor: default; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.f-col > summary::-webkit-details-marker { display: none; }
.f-ch { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font: 600 13.5px/1.3 var(--h-sans); color: var(--h-text); }
.f-ci { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border: 1px solid var(--h-line); border-radius: var(--h-r); background: var(--h-canvas); color: var(--h-text-2); }
.f-ci .ic { width: 14px; height: 14px; }
.f-chev { display: none; }
.f-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.f-col a { color: var(--h-text-2); text-decoration: none; font: 400 13.5px/1.35 var(--h-body); display: inline-flex; align-items: center; min-height: 28px; padding: 3px 0; }
.f-col a:hover { color: var(--h-text); }
.f-col a:hover > span:last-child { text-decoration: underline; text-underline-offset: 3px; }
/* one quiet line icon a link (owner, 2026-10-25) */
.f-li { display: inline-flex; width: 16px; height: 16px; margin-inline-end: 10px; color: var(--h-muted); flex: none; transition: color var(--h-fast) var(--h-ease); }
.f-li .ic { width: 15px; height: 15px; stroke-width: 1.6; }
.f-col a:hover .f-li { color: var(--h-text); }
.f-col a[aria-current="page"] { color: var(--h-text); font-weight: 500; }
.f-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-top: 18px; border-top: 1px solid var(--h-line); color: var(--h-muted); font: 400 12.5px/1.4 var(--h-body); }
.f-copy { font: 500 12px/1.4 var(--h-mono); letter-spacing: 0.02em; color: var(--h-text-2); }
.f-links { list-style: none; margin-block: 0; margin-inline: auto 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.f-links a { color: var(--h-text-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; }
.f-links a:hover { color: var(--h-text); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1080px) { .f-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } .f-head { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 720px) {
.f-wrap { padding: 32px 16px 20px; }
.f-head { gap: 14px; padding-bottom: 24px; }
.f-site { font-size: 20px; }
.f-row { padding: 14px 0 16px; }
.f-row-h { margin-bottom: 6px; }
.f-cols { grid-template-columns: 1fr; gap: 0; }
.f-col { border-bottom: 1px solid var(--h-line); }
.f-col > summary { cursor: pointer; min-height: 48px; margin: 0; }
.f-chev { display: block; flex: none; transition: transform var(--h-fast) var(--h-ease); }
.f-col[open] .f-chev { transform: rotate(180deg); }
.f-col ul { padding-bottom: 10px; }
.f-col a { min-height: 40px; }
.f-links { margin-inline-start: 0; }
}
/* country rows (Index): a small flag and the name in small mono, wrapping only between words */
.itile.ccf { border-color: transparent; font: 14px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.row.cty { gap: 7px; min-height: 26px; padding-block: 2px; align-items: flex-start; }
.row.cty .itile.ccf { width: 16px; height: 16px; margin-top: 1px; }
.row.cty .r-t { font: 400 11px/1.35 var(--h-mono); letter-spacing: 0.01em; color: var(--h-text-2); white-space: normal; overflow: visible; text-overflow: clip; word-break: normal; overflow-wrap: normal; hyphens: none; }
.row.cty:hover .r-t, .row.cty:focus-visible .r-t { color: var(--h-text); }
.row.cty .arrow { display: none; }
/* On this page (owner 2026-10-26): the page's sections under the pinned navigation, the current one marked, a progress
line along the bottom edge. Shown only while the navigation is pinned; it slides away with it over full-width
components. */
.onp { display: none; position: relative; border-block-start: 1px solid var(--h-line); background: inherit; }
:host([data-stuck][data-onp]) .onp { display: block; }
.onp .wrap { height: 40px; gap: 16px; }
.onp-l { flex: 0 0 auto; }
/* the section list scrolls on its own line: snap to items, a fade on each inline edge only while there is more that way
(data-fade, set by nexus-header.js; the gradient runs the other way in right-to-left text), no visible scrollbar */
.onp-list { --onp-fs: 0px; --onp-fe: 0px; display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 40px; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, transparent 0, black var(--onp-fs), black calc(100% - var(--onp-fe)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, black var(--onp-fs), black calc(100% - var(--onp-fe)), transparent 100%); }
.onp-list:dir(rtl) { -webkit-mask-image: linear-gradient(to left, transparent 0, black var(--onp-fs), black calc(100% - var(--onp-fe)), transparent 100%); mask-image: linear-gradient(to left, transparent 0, black var(--onp-fs), black calc(100% - var(--onp-fe)), transparent 100%); }
.onp-list[data-fade~="start"] { --onp-fs: 40px; }
.onp-list[data-fade~="end"] { --onp-fe: 40px; }
.onp-list > li { flex: none; scroll-snap-align: start; }
.onp-list::-webkit-scrollbar { display: none; }
.onp-list a { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: var(--h-r); font: 400 13px/1 var(--h-body); color: var(--h-muted); white-space: nowrap; text-decoration: none; transition: color var(--h-fast) var(--h-ease), background var(--h-fast) var(--h-ease); }
.onp-list a:hover { background: var(--h-hover); color: var(--h-text); }
.onp-list a:focus-visible { outline: 2px solid var(--h-accent); outline-offset: -2px; }
.onp-list a[aria-current] { color: var(--h-text); font-weight: 500; box-shadow: inset 0 -2px 0 var(--h-accent); border-radius: 0; }
.onp-n { flex: 0 0 auto; font: 500 11px/1 var(--h-mono); letter-spacing: 0.08em; color: var(--h-muted); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; } /* "5 / 10" reads left to right in every script */
.onp-prog { position: absolute; inset-inline-start: 0; inset-block-end: -1px; height: 2px; width: var(--onp-p, 0%); background: linear-gradient(90deg, var(--h-a), var(--h-b), var(--h-c)); transition: width 120ms linear; pointer-events: none; }
@media (max-width: 760px) { .onp-l { display: none; } .onp .wrap { height: 38px; gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .onp-prog, .onp-list a { transition: none; } }
@media print { .onp { display: none !important; } }
/* Accessibility tools (Readabler on any site, owner 2026-10-26): nexus-header.js mirrors the tool's state on the host
as data-a11y with --a11y-font and --a11y-line; its letter spacing and colours are document custom properties that
reach this shadow root. */
:host([data-a11y~="readable-font"]) .h, :host([data-a11y~="readable-font"]) .h * { font-family: Verdana, "Atkinson Hyperlegible", Tahoma, Arial, sans-serif !important; }
:host([data-a11y~="dyslexia-font"]) .h, :host([data-a11y~="dyslexia-font"]) .h * { font-family: "OpenDyslexic", Verdana, Arial, sans-serif !important; }
:host([data-a11y~="letter-spacing"]) .h * { letter-spacing: var(--readabler-letter-spacing, 0.05em) !important; }
:host([data-a11y~="font-sizing"]) :is(.main .menus, .net ul, .inl, .crumbs, .onp-list, .end) { zoom: var(--a11y-font, 1); }
:host([data-a11y~="highlight-links"]) a { outline: 2px solid var(--readabler-color, var(--h-a11y-mark)) !important; outline-offset: 2px; text-decoration: underline !important; }
:host([data-a11y~="highlight-focus"]) :focus-visible, :host([data-a11y~="highlight-focus"]) :focus { outline: 3px solid var(--readabler-color, var(--h-a11y-mark)) !important; outline-offset: 2px !important; }
:host([data-a11y~="highlight-hover"]) :is(a, button, summary):hover { outline: 2px dashed var(--readabler-color, var(--h-a11y-mark)) !important; outline-offset: 2px; }
:host([data-a11y~="dark-contrast"]) { --h-canvas: var(--h-dc-canvas); --h-elevated: var(--h-dc-elevated); --h-sunken: var(--h-dc-sunken); --h-hover: var(--h-dc-hover); --h-line: var(--h-dc-line); --h-line-strong: var(--h-dc-line-strong); --h-text: var(--h-dc-text); --h-text-2: var(--h-dc-text-2); --h-muted: var(--h-dc-muted); --h-accent: var(--h-dc-accent); color-scheme: dark; }
:host([data-a11y~="light-contrast"]) { --h-canvas: var(--h-lc-canvas); --h-elevated: var(--h-lc-elevated); --h-sunken: var(--h-lc-sunken); --h-hover: var(--h-lc-hover); --h-line: var(--h-lc-line); --h-line-strong: var(--h-lc-line-strong); --h-text: var(--h-lc-text); --h-text-2: var(--h-lc-text-2); --h-muted: var(--h-lc-muted); --h-accent: var(--h-lc-accent); color-scheme: light; }
:host([data-a11y~="stop-animations"]) *, :host([data-a11y~="stop-animations"]) *::before, :host([data-a11y~="stop-animations"]) *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
:host([data-a11y~="hide-images"]) img { visibility: hidden !important; }
/* nxh-i18n:start - generated by kits/build-tokens.mjs from kits/tokens.json system.script (kits/fonts/script-typography.mjs); do not edit by hand */
:host { --h-code: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
/* Arab: IBM Plex Sans Arabic (ar, fa, ur) */
:host(:lang(ar)), :host(:lang(fa)), :host(:lang(ur)) { --h-sans: "IBM Plex Sans Arabic", "IBM Plex Sans", "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", sans-serif; --h-body: "IBM Plex Sans Arabic", "IBM Plex Sans", "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", sans-serif; --h-mono: "IBM Plex Sans Arabic", "IBM Plex Sans", "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", sans-serif; --h-code: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, "SFMono-Regular", Consolas, monospace; --nx-lh-body: 1.8; --nx-lh-heading: 1.45; --nx-weight-heading: 500; --nx-weight-strong: 500; font-synthesis-weight: none; font-synthesis-style: none; font-variant-numeric: lining-nums; text-justify: inter-word; }
:host(:lang(ar)) *, :host(:lang(fa)) *, :host(:lang(ur)) * { letter-spacing: 0 !important; text-transform: none !important; }
:host(:lang(ar)) :is(code, kbd, samp, pre, var, data, .nx-code, .nx-uni, .nx-num, [data-nx-code], [data-num], [class*="-code"], [class*="-uni"], [class*="-num"]), :host(:lang(ar)) :is(code, kbd, samp, pre, var, data, .nx-code, .nx-uni, .nx-num, [data-nx-code], [data-num], [class*="-code"], [class*="-uni"], [class*="-num"]) *, :host(:lang(fa)) :is(code, kbd, samp, pre, var, data, .nx-code, .nx-uni, .nx-num, [data-nx-code], [data-num], [class*="-code"], [class*="-uni"], [class*="-num"]), :host(:lang(fa)) :is(code, kbd, samp, pre, var, data, .nx-code, .nx-uni, .nx-num, [data-nx-code], [data-num], [class*="-code"], [class*="-uni"], [class*="-num"]) *, :host(:lang(ur)) :is(code, kbd, samp, pre, var, data, .nx-code, .nx-uni, .nx-num, [data-nx-code], [data-num], [class*="-code"], [class*="-uni"], [class*="-num"]), :host(:lang(ur)) :is(code, kbd, samp, pre, var, data, .nx-code, .nx-uni, .nx-num, [data-nx-code], [data-num], [class*="-code"], [class*="-uni"], [class*="-num"]) * { --h-mono: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, "SFMono-Regular", Consolas, monospace; font-weight: 400; unicode-bidi: isolate; }
:host(:lang(ar)) :is(h1, h2, h3, h4, h5, h6, [role=heading]), :host(:lang(fa)) :is(h1, h2, h3, h4, h5, h6, [role=heading]), :host(:lang(ur)) :is(h1, h2, h3, h4, h5, h6, [role=heading]) { font-weight: var(--nx-weight-heading, 500); line-height: var(--nx-lh-heading, 1.45); }
:host(:lang(ar)) :is(b, strong, th, dt, summary, legend), :host(:lang(fa)) :is(b, strong, th, dt, summary, legend), :host(:lang(ur)) :is(b, strong, th, dt, summary, legend) { font-weight: var(--nx-weight-strong, 500); }
:host(:lang(ar)) :is(p, li, dd, blockquote, figcaption), :host(:lang(fa)) :is(p, li, dd, blockquote, figcaption), :host(:lang(ur)) :is(p, li, dd, blockquote, figcaption) { line-height: var(--nx-lh-body, 1.8); }
:host(:lang(ar)) :is(.f-site, .f-role, .f-copy, .f-boundary, .g-desc, .feat-d, .feat-t, .acct-d, .pt-v), :host(:lang(fa)) :is(.f-site, .f-role, .f-copy, .f-boundary, .g-desc, .feat-d, .feat-t, .acct-d, .pt-v), :host(:lang(ur)) :is(.f-site, .f-role, .f-copy, .f-boundary, .g-desc, .feat-d, .feat-t, .acct-d, .pt-v) { line-height: var(--nx-lh-body, 1.8); }
:host(:lang(ar)) :is(.has-text-align-justify, [style*="text-align: justify"], [style*="text-align:justify"], [align="justify"]), :host(:lang(fa)) :is(.has-text-align-justify, [style*="text-align: justify"], [style*="text-align:justify"], [align="justify"]), :host(:lang(ur)) :is(.has-text-align-justify, [style*="text-align: justify"], [style*="text-align:justify"], [align="justify"]) { text-align: start !important; }
/* Hans: IBM Plex Sans SC (zh) */
:host(:lang(zh)) { --h-sans: "Nexus Page SC", "IBM Plex Sans SC", "IBM Plex Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif; --h-body: "Nexus Page SC", "IBM Plex Sans SC", "IBM Plex Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif; --h-mono: "Nexus Page SC", "IBM Plex Sans SC", "IBM Plex Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif; --h-code: "IBM Plex Mono", "IBM Plex Sans SC", ui-monospace, "SFMono-Regular", Consolas, monospace; --nx-lh-body: 1.7; --nx-lh-heading: 1.4; --nx-weight-heading: 600; --nx-weight-strong: 600; font-synthesis-weight: none; font-synthesis-style: none; font-variant-numeric: lining-nums; line-break: strict; text-autospace: normal; }
:host(:lang(zh)) * { letter-spacing: 0 !important; text-transform: none !important; }
:host(:lang(zh)) :is(code, kbd, samp, pre, var, data, .nx-code, .nx-uni, .nx-num, [data-nx-code], [data-num], [class*="-code"], [class*="-uni"], [class*="-num"]), :host(:lang(zh)) :is(code, kbd, samp, pre, var, data, .nx-code, .nx-uni, .nx-num, [data-nx-code], [data-num], [class*="-code"], [class*="-uni"], [class*="-num"]) * { --h-mono: "IBM Plex Mono", "IBM Plex Sans SC", ui-monospace, "SFMono-Regular", Consolas, monospace; font-weight: 400; unicode-bidi: isolate; }
:host(:lang(zh)) :is(h1, h2, h3, h4, h5, h6, [role=heading]) { font-weight: var(--nx-weight-heading, 600); line-height: var(--nx-lh-heading, 1.4); text-wrap: balance; }
:host(:lang(zh)) :is(b, strong, th, dt, summary, legend) { font-weight: var(--nx-weight-strong, 600); }
:host(:lang(zh)) :is(p, li, dd, blockquote, figcaption) { line-height: var(--nx-lh-body, 1.7); }
:host(:lang(zh)) :is(.f-site, .f-role, .f-copy, .f-boundary, .g-desc, .feat-d, .feat-t, .acct-d, .pt-v) { line-height: var(--nx-lh-body, 1.7); }
:host(:lang(zh)) :is(.has-text-align-justify, [style*="text-align: justify"], [style*="text-align:justify"], [align="justify"]) { text-align: start !important; }
/* Jpan: IBM Plex Sans JP (ja) */
:host(:lang(ja)) { --h-sans: "IBM Plex Sans JP", "IBM Plex Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Noto Sans CJK JP", sans-serif; --h-body: "IBM Plex Sans JP", "IBM Plex Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Noto Sans CJK JP", sans-serif; --h-mono: "IBM Plex Sans JP", "IBM Plex Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Noto Sans CJK JP", sans-serif; --h-code: "IBM Plex Mono", "IBM Plex Sans JP", ui-monospace, "SFMono-Regular", Consolas, monospace; --nx-lh-body: 1.7; --nx-lh-heading: 1.4; --nx-weight-heading: 500; --nx-weight-strong: 500; font-synthesis-weight: none; font-synthesis-style: none; font-variant-numeric: lining-nums; line-break: strict; text-autospace: normal; word-break: auto-phrase; overflow-wrap: break-word; }
:host(:lang(ja)) * { letter-spacing: 0 !important; text-transform: none !important; }
:host(:lang(ja)) :is(code, kbd, samp, pre, var, data, .nx-code, .nx-uni, .nx-num, [data-nx-code], [data-num], [class*="-code"], [class*="-uni"], [class*="-num"]), :host(:lang(ja)) :is(code, kbd, samp, pre, var, data, .nx-code, .nx-uni, .nx-num, [data-nx-code], [data-num], [class*="-code"], [class*="-uni"], [class*="-num"]) * { --h-mono: "IBM Plex Mono", "IBM Plex Sans JP", ui-monospace, "SFMono-Regular", Consolas, monospace; font-weight: 400; unicode-bidi: isolate; }
:host(:lang(ja)) :is(h1, h2, h3, h4, h5, h6, [role=heading]) { font-weight: var(--nx-weight-heading, 500); line-height: var(--nx-lh-heading, 1.4); text-wrap: balance; word-break: auto-phrase; }
:host(:lang(ja)) :is(b, strong, th, dt, summary, legend) { font-weight: var(--nx-weight-strong, 500); }
:host(:lang(ja)) :is(p, li, dd, blockquote, figcaption) { line-height: var(--nx-lh-body, 1.7); }
:host(:lang(ja)) :is(.f-site, .f-role, .f-copy, .f-boundary, .g-desc, .feat-d, .feat-t, .acct-d, .pt-v) { line-height: var(--nx-lh-body, 1.7); }
:host(:lang(ja)) :is(.has-text-align-justify, [style*="text-align: justify"], [style*="text-align:justify"], [align="justify"]) { text-align: start !important; }
/* Kore: IBM Plex Sans KR (ko) */
:host(:lang(ko)) { --h-sans: "IBM Plex Sans KR", "IBM Plex Sans", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", sans-serif; --h-body: "IBM Plex Sans KR", "IBM Plex Sans", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", sans-serif; --h-mono: "IBM Plex Sans KR", "IBM Plex Sans", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", sans-serif; --h-code: "IBM Plex Mono", "IBM Plex Sans KR", ui-monospace, "SFMono-Regular", Consolas, monospace; --nx-lh-body: 1.7; --nx-lh-heading: 1.4; --nx-weight-heading: 500; --nx-weight-strong: 500; font-synthesis-weight: none; font-synthesis-style: none; font-variant-numeric: lining-nums; line-break: strict; word-break: keep-all; overflow-wrap: break-word; }
:host(:lang(ko)) * { letter-spacing: 0 !important; text-transform: none !important; }
:host(:lang(ko)) :is(code, kbd, samp, pre, var, data, .nx-code, .nx-uni, .nx-num, [data-nx-code], [data-num], [class*="-code"], [class*="-uni"], [class*="-num"]), :host(:lang(ko)) :is(code, kbd, samp, pre, var, data, .nx-code, .nx-uni, .nx-num, [data-nx-code], [data-num], [class*="-code"], [class*="-uni"], [class*="-num"]) * { --h-mono: "IBM Plex Mono", "IBM Plex Sans KR", ui-monospace, "SFMono-Regular", Consolas, monospace; font-weight: 400; unicode-bidi: isolate; }
:host(:lang(ko)) :is(h1, h2, h3, h4, h5, h6, [role=heading]) { font-weight: var(--nx-weight-heading, 500); line-height: var(--nx-lh-heading, 1.4); text-wrap: balance; }
:host(:lang(ko)) :is(b, strong, th, dt, summary, legend) { font-weight: var(--nx-weight-strong, 500); }
:host(:lang(ko)) :is(p, li, dd, blockquote, figcaption) { line-height: var(--nx-lh-body, 1.7); }
:host(:lang(ko)) :is(.f-site, .f-role, .f-copy, .f-boundary, .g-desc, .feat-d, .feat-t, .acct-d, .pt-v) { line-height: var(--nx-lh-body, 1.7); }
:host(:lang(ko)) :is(.has-text-align-justify, [style*="text-align: justify"], [style*="text-align:justify"], [align="justify"]) { text-align: start !important; }
/* Deva: IBM Plex Sans Devanagari (hi) */
:host(:lang(hi)) { --h-sans: "IBM Plex Sans Devanagari", "IBM Plex Sans", "Noto Sans Devanagari", "Kohinoor Devanagari", "Nirmala UI", sans-serif; --h-body: "IBM Plex Sans Devanagari", "IBM Plex Sans", "Noto Sans Devanagari", "Kohinoor Devanagari", "Nirmala UI", sans-serif; --h-mono: "IBM Plex Sans Devanagari", "IBM Plex Sans", "Noto Sans Devanagari", "Kohinoor Devanagari", "Nirmala UI", sans-serif; --h-code: "IBM Plex Mono", "IBM Plex Sans Devanagari", ui-monospace, "SFMono-Regular", Consolas, monospace; --nx-lh-body: 1.75; --nx-lh-heading: 1.45; --nx-weight-heading: 500; --nx-weight-strong: 500; font-synthesis-weight: none; font-synthesis-style: none; font-variant-numeric: lining-nums; }
:host(:lang(hi)) * { letter-spacing: 0 !important; text-transform: none !important; }
:host(:lang(hi)) :is(code, kbd, samp, pre, var, data, .nx-code, .nx-uni, .nx-num, [data-nx-code], [data-num], [class*="-code"], [class*="-uni"], [class*="-num"]), :host(:lang(hi)) :is(code, kbd, samp, pre, var, data, .nx-code, .nx-uni, .nx-num, [data-nx-code], [data-num], [class*="-code"], [class*="-uni"], [class*="-num"]) * { --h-mono: "IBM Plex Mono", "IBM Plex Sans Devanagari", ui-monospace, "SFMono-Regular", Consolas, monospace; font-weight: 400; unicode-bidi: isolate; }
:host(:lang(hi)) :is(h1, h2, h3, h4, h5, h6, [role=heading]) { font-weight: var(--nx-weight-heading, 500); line-height: var(--nx-lh-heading, 1.45); }
:host(:lang(hi)) :is(b, strong, th, dt, summary, legend) { font-weight: var(--nx-weight-strong, 500); }
:host(:lang(hi)) :is(p, li, dd, blockquote, figcaption) { line-height: var(--nx-lh-body, 1.75); }
:host(:lang(hi)) :is(.f-site, .f-role, .f-copy, .f-boundary, .g-desc, .feat-d, .feat-t, .acct-d, .pt-v) { line-height: var(--nx-lh-body, 1.75); }
/* Beng: Noto Sans Bengali (bn) */
:host(:lang(bn)) { --h-sans: "Noto Sans Bengali", "IBM Plex Sans", "Kohinoor Bangla", "Nirmala UI", sans-serif; --h-body: "Noto Sans Bengali", "IBM Plex Sans", "Kohinoor Bangla", "Nirmala UI", sans-serif; --h-mono: "Noto Sans Bengali", "IBM Plex Sans", "Kohinoor Bangla", "Nirmala UI", sans-serif; --h-code: "IBM Plex Mono", "Noto Sans Bengali", ui-monospace, "SFMono-Regular", Consolas, monospace; --nx-lh-body: 1.75; --nx-lh-heading: 1.45; --nx-weight-heading: 400; --nx-weight-strong: 400; font-synthesis-weight: none; font-synthesis-style: none; font-variant-numeric: lining-nums; }
:host(:lang(bn)) * { letter-spacing: 0 !important; text-transform: none !important; }
:host(:lang(bn)) :is(code, kbd, samp, pre, var, data, .nx-code, .nx-uni, .nx-num, [data-nx-code], [data-num], [class*="-code"], [class*="-uni"], [class*="-num"]), :host(:lang(bn)) :is(code, kbd, samp, pre, var, data, .nx-code, .nx-uni, .nx-num, [data-nx-code], [data-num], [class*="-code"], [class*="-uni"], [class*="-num"]) * { --h-mono: "IBM Plex Mono", "Noto Sans Bengali", ui-monospace, "SFMono-Regular", Consolas, monospace; font-weight: 400; unicode-bidi: isolate; }
:host(:lang(bn)) :is(h1, h2, h3, h4, h5, h6, [role=heading]) { font-weight: var(--nx-weight-heading, 400); line-height: var(--nx-lh-heading, 1.45); }
:host(:lang(bn)) :is(b, strong, th, dt, summary, legend) { font-weight: var(--nx-weight-strong, 400); }
:host(:lang(bn)) :is(p, li, dd, blockquote, figcaption) { line-height: var(--nx-lh-body, 1.75); }
:host(:lang(bn)) :is(.f-site, .f-role, .f-copy, .f-boundary, .g-desc, .feat-d, .feat-t, .acct-d, .pt-v) { line-height: var(--nx-lh-body, 1.75); }
:host(:not(:lang(ar)):not(:lang(fa)):not(:lang(ur))) :is(.nx-lang__list, .nx-lang-list, [data-nx-lang-list]) :lang(ar), :host(:not(:lang(ar)):not(:lang(fa)):not(:lang(ur))) :is(.nx-lang__list, .nx-lang-list, [data-nx-lang-list]) :lang(fa), :host(:not(:lang(ar)):not(:lang(fa)):not(:lang(ur))) :is(.nx-lang__list, .nx-lang-list, [data-nx-lang-list]) :lang(ur) { font-family: "Segoe UI", Tahoma, "Geeza Pro", "Noto Sans Arabic", system-ui, sans-serif; }
:host(:not(:lang(zh))) :is(.nx-lang__list, .nx-lang-list, [data-nx-lang-list]) :lang(zh) { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif; }
:host(:not(:lang(ja))) :is(.nx-lang__list, .nx-lang-list, [data-nx-lang-list]) :lang(ja) { font-family: "Hiragino Sans", "Yu Gothic", Meiryo, "Noto Sans CJK JP", system-ui, sans-serif; }
:host(:not(:lang(ko))) :is(.nx-lang__list, .nx-lang-list, [data-nx-lang-list]) :lang(ko) { font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", system-ui, sans-serif; }
:host(:not(:lang(hi))) :is(.nx-lang__list, .nx-lang-list, [data-nx-lang-list]) :lang(hi) { font-family: "Kohinoor Devanagari", "Nirmala UI", "Noto Sans Devanagari", system-ui, sans-serif; }
:host(:not(:lang(bn))) :is(.nx-lang__list, .nx-lang-list, [data-nx-lang-list]) :lang(bn) { font-family: "Kohinoor Bangla", "Nirmala UI", "Noto Sans Bengali", system-ui, sans-serif; }
:host(:not(:lang(ru))) :is(.nx-lang__list, .nx-lang-list, [data-nx-lang-list]) :lang(ru) { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; }
:host :is(table, .nx-num, [data-num], [data-nx-num]) { font-variant-numeric: tabular-nums lining-nums; }
:host :is(bdi, .nx-ltr, [data-nx-bidi]) { unicode-bidi: isolate; }
:host .nx-ltr { direction: ltr; }
:host :is(.nx-arrow, .nx-chev, .nx-dir, [data-nx-mirror], .lucide-arrow-right, .lucide-arrow-left, .lucide-chevron-right, .lucide-chevron-left, .lucide-move-right, .lucide-arrow-up-right):dir(rtl) { scale: -1 1; }
:host :is(img, video, canvas, picture, iframe, .nx-logo, [data-nx-no-mirror], .maplibregl-map, .nx-figure, .nx-chart, .nx-map):dir(rtl) { scale: none; }
:host :is(.footnote-backref, .nx-backref, a[href^="#fnref"]):dir(rtl) { display: inline-block; scale: -1 1; }
/* nxh-i18n:end */
/* owner 2026-10-29: one scroll-progress line, on the very top; the second under the On this page bar is gone */
.onp-prog { display: none; }
/* account panel icons (owner 2026-10-29) */
/* nx-account:begin (generated by kits/account/build-account.mjs; edit kits/account/nx-account.css) */
.nxa { --nxa-text: var(--h-text, var(--nx-text-primary, CanvasText)); --nxa-text-2: var(--h-text-2, var(--nx-text-secondary, CanvasText)); --nxa-muted: var(--h-muted, var(--nx-text-muted, GrayText)); --nxa-line: var(--h-line, var(--nx-border-hairline, GrayText)); --nxa-line-strong: var(--h-line-strong, var(--nx-border-hairline-strong, GrayText)); --nxa-bg: var(--h-canvas, var(--nx-bg-elevated, Canvas)); --nxa-hover: var(--h-hover, var(--nx-bg-hover, Canvas)); --nxa-accent: var(--h-accent, var(--nx-accent, Highlight)); --nxa-shadow: var(--h-shadow, var(--nx-shadow, 0 12px 32px -12px color-mix(in srgb, CanvasText 45%, transparent))); --nxa-r: var(--h-r, 5px); --nxa-ri: var(--h-r-chip, 4px); --nxa-font: var(--h-sans, var(--nx-font-sans, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif)); position: relative; display: inline-flex; flex: none; font-family: var(--nxa-font); font-size: 13px; line-height: 1.2; text-align: start; }
nx-account { display: inline-flex; flex: none; min-inline-size: 36px; min-block-size: 36px; align-items: center; }
nx-account > a { color: inherit; font-size: 13px; text-decoration: none; padding: 0 10px; }
.nxa *, .nxa *::before, .nxa *::after { box-sizing: border-box; }
.nxa .nxa__btn { display: inline-flex; align-items: center; gap: 8px; block-size: 36px; min-inline-size: 36px; max-inline-size: 220px; margin: 0; padding-block: 0; padding-inline: 10px; border: 1px solid var(--nxa-line-strong); border-radius: var(--nxa-r); background: transparent; color: var(--nxa-text-2); font: 500 13px/1 var(--nxa-font); letter-spacing: normal; text-transform: none; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: none; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
.nxa .nxa__btn:hover, .nxa[data-open] .nxa__btn { background: var(--nxa-hover); color: var(--nxa-text); border-color: var(--nxa-line-strong); }
.nxa .nxa__btn:focus-visible { outline: 2px solid var(--nxa-accent); outline-offset: 2px; }
.nxa .nxa__i { inline-size: 16px; block-size: 16px; flex: none; }
.nxa .nxa__chev { inline-size: 14px; block-size: 14px; color: var(--nxa-muted); transition: transform 0.15s ease; }
.nxa[data-open] .nxa__chev { transform: rotate(180deg); }
.nxa .nxa__lbl { overflow: hidden; text-overflow: ellipsis; }
.nxa .nxa__av { inline-size: 24px; block-size: 24px; flex: none; border-radius: 4px; object-fit: cover; background: var(--nxa-hover); }
.nxa .nxa__av--i { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--nxa-line-strong); color: var(--nxa-text); font: 600 12px/1 var(--nxa-font); }
.nxa .nxa__av--l { inline-size: 36px; block-size: 36px; font-size: 15px; }
.nxa .nxa__menu { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 6px); z-index: 1400; inline-size: min(18rem, calc(100vw - 16px)); margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--nxa-line-strong); border-radius: var(--nxa-r); background: var(--nxa-bg); color: var(--nxa-text); box-shadow: var(--nxa-shadow); }
.nxa .nxa__menu[hidden] { display: none; }
.nxa .nxa__head, .nxa .nxa__who { display: flex; padding: 10px 12px; border-block-end: 1px solid var(--nxa-line); }
.nxa .nxa__head { flex-direction: column; gap: 4px; }
.nxa .nxa__who { align-items: center; gap: 10px; }
.nxa .nxa__eye { color: var(--nxa-muted); font: 500 10.5px/1 var(--h-mono, var(--nx-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)); letter-spacing: 0.08em; text-transform: uppercase; }
.nxa .nxa__ttl, .nxa .nxa__nm { color: var(--nxa-text); font: 500 13.5px/1.3 var(--nxa-font); overflow: hidden; text-overflow: ellipsis; }
.nxa .nxa__sep { block-size: 1px; margin: 4px 0; background: var(--nxa-line); }
.nxa .nxa__menu > .nxa__item:first-of-type { margin-block-start: 6px; }
.nxa .nxa__item { display: flex; align-items: center; gap: 10px; min-block-size: 36px; margin: 2px 6px; padding: 8px 10px; border-radius: var(--nxa-ri); color: var(--nxa-text-2); font: 500 13px/1.2 var(--nxa-font); text-decoration: none; cursor: pointer; }
.nxa .nxa__menu > .nxa__item:last-child { margin-block-end: 6px; }
.nxa .nxa__item .nxa__i { color: var(--nxa-muted); }
.nxa .nxa__item:hover, .nxa .nxa__item:focus-visible { background: var(--nxa-hover); color: var(--nxa-text); outline: none; }
.nxa .nxa__item:focus-visible { box-shadow: inset 0 0 0 2px var(--nxa-accent); }
.nxa .nxa__item:hover .nxa__i, .nxa .nxa__item:focus-visible .nxa__i { color: var(--nxa-text); }
.nxa .nxa__i--flip:dir(rtl) { transform: scaleX(-1); }
@media (max-width: 719px) {
.nxa .nxa__btn { padding-inline: 9px; gap: 6px; }
.nxa .nxa__btn .nxa__lbl { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nxa .nxa__chev { display: none; }
}
@media (prefers-reduced-motion: reduce) { .nxa .nxa__btn, .nxa .nxa__chev { transition: none; } }
/* nx-account:end */
/* nexus-standalone: languages with no page are not listed */
.nx-lang__item.is-unavailable{display:none}