/* assets/site.css
   Shared chrome for untetheredatom.com: fonts, colour tokens, typography,
   header, footer and the common page furniture.
   Pages keep their own <style> for anything specific to them, and any rule
   here can still be overridden by a page because this file loads first.
   Generated from all 56 pages. */

@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;src:url(/assets/fonts/source-serif-4-latin-opsz-normal.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:200 900;font-display:swap;src:url(/assets/fonts/source-serif-4-latin-opsz-italic.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;src:url(/assets/fonts/source-serif-4-latin-ext-opsz-normal.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin-wght-normal.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:optional;src:url(/assets/fonts/playfair-display-latin-wght-normal.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

*{box-sizing:border-box;}
body{color:var(--ink);}
#themeBtn:hover{border-color:var(--copper);}
.btn{cursor:pointer;}
.btn:hover{border-color:var(--copper);}
.checkline input{accent-color:var(--copper);width:16px;height:16px;}
.citebox{overflow-wrap:break-word;overflow-wrap:anywhere;}
.citebox pre{overflow-wrap:break-word;overflow-wrap:anywhere;}
.crosslink{display:grid;gap:14px;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));margin:34px 0 0;}
.crosslink a:hover{border-color:var(--steel);}
.ctrl .val{font-weight:600;}
.delta{font-variant-numeric:tabular-nums;font-weight:650;}
.demo-body{padding:18px 20px;}
.eqcard .ev{font-size:1.06rem;font-weight:650;font-variant-numeric:tabular-nums;}
.eqcard.lead-eq{border-color:var(--copper);}
.eqrow{display:grid;gap:8px;grid-template-columns:repeat(auto-fit, minmax(180px,1fr));margin:14px 0;}
.eyebrow{text-transform:uppercase;}
.grabbable{cursor:ew-resize;}
.grabbable-y{cursor:ns-resize;}
.hint-drag::before{content:"";width:14px;height:2px;border-radius:3px;background:var(--copper);flex:none;}
.jump{display:flex;gap:10px;flex-wrap:wrap;margin:30px 0 8px;padding:0;list-style:none;}
.jump a:hover{border-color:var(--steel);color:var(--ink);}
.kbd{font-size:0.69rem;}
.kicker{display:inline-block;text-transform:uppercase;}
.lead strong{font-weight:650;}
.legend{display:flex;flex-wrap:wrap;}
.legend .item{display:inline-flex;align-items:center;gap:7px;}
.modecard.active{border-color:var(--copper);}
.modechip:hover{border-color:var(--steel);color:var(--ink);}
.modegrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit, minmax(150px,1fr));margin:16px 0;}
.modes{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px;padding:0;list-style:none;}
.modhead{margin-bottom:6px;}
.note .tag{font-size:0.69rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;display:block;margin-bottom:4px;}
.note p:last-child{margin-bottom:0;}
.note.key{border-left-color:var(--copper);}
.pill{display:inline-block;}
.rail{display:flex;flex-direction:column;gap:12px;}
.rail .controls{margin-top:0;grid-template-columns:1fr;gap:12px;}
.rail .stats{margin-top:0;grid-template-columns:repeat(auto-fit, minmax(112px,1fr));}
.segmented button:last-child{border-right:0;}
.seriescard.soon{border-style:dashed;cursor:default;}
.seriescard:hover{border-color:var(--steel);}
.seriesgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit, minmax(215px,1fr));}
.serieswrap h3{margin:0 0 4px;font-size:1.06rem;}
.split{display:grid;gap:18px;grid-template-columns:1fr;}
.split > *{min-width:0;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
.srcs li{margin-bottom:6px;}
.stat .k.sym{text-transform:none;letter-spacing:.02em;font-size:0.69rem;}
.stat .v{font-variant-numeric:tabular-nums;}
.stats{display:grid;gap:10px;grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));margin-top:16px;}
.swatch.line{height:3px;width:16px;border-radius:3px;}
.tablewrap{overflow-x:auto;margin:14px 0;}
.themebtn{border-radius:100px;cursor:pointer;width:32px;height:32px;display:grid;padding:0;}
.themebtn:hover{color:var(--ink);border-color:var(--copper);}
.tip .th{font-weight:650;margin-bottom:3px;}
.tip .tr{display:flex;gap:10px;justify-content:space-between;}
.tip .tr span:last-child{font-variant-numeric:tabular-nums;font-weight:600;}
.topbar a:hover{color:var(--copper);}
.topbar-in{margin:0 auto;display:flex;align-items:center;}
.topnav{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap;align-items:center;}
.topnav a[aria-current="page"]{color:var(--ink);font-weight:600;border-bottom-color:var(--copper);}
.verdict .vk{font-size:0.69rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;}
.verdict .vt strong{color:var(--ink);}
a:hover{color:var(--copper);}
details.deeper .inner p:last-child{margin-bottom:0;}
details.deeper .inner strong{color:var(--ink);}
details.deeper > summary::-webkit-details-marker{display:none;}
details.deeper > summary:hover{color:var(--ink);}
details.deeper[open] > summary::before{content:"–";}
footer.pagefoot a:hover{color:var(--copper);}
header.hero{padding:60px 0 20px;}
section.module:first-of-type{border-top:none;}
td.num, th.num{text-align:right;font-variant-numeric:tabular-nums;}
th.nocaps, td.nocaps{text-transform:none;}
ul.tight li, ol.tight li{margin-bottom:7px;}
ul.tight, ol.tight{padding-left:20px;margin:0 0 14px;}

@media (max-width: 620px){body { font-size: 1rem; } .lead { font-size: 1rem; } .demo-body { padding: 13px; } .demo-hint { display: none; }}
@media (min-width: 780px){.split.wide-left { grid-template-columns: minmax(0,1.55fr) minmax(230px,1fr); } .split.even { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important;scroll-behavior:auto !important}}

/* Colour and type tokens, shared by the pages that agreed on them.
   Dark values sit on [data-theme="dark"] on purpose: it is the lowest
   specificity any page uses, so a page's own value always wins. */
/* ============================================================
   UNTETHEREDATOM DESIGN TOKENS  (Site Layout & Design System, §0)
   One place to change colour, type, spacing, widths, radii,
   shadows and motion for the whole site. Components and page
   shells must read these; do not hard-code reusable values.
   Legacy token names below alias the semantic ones, so the 87
   existing pages keep working while only these need editing.
   ============================================================ */
/* ============================================================
   UNTETHEREDATOM DESIGN TOKENS — v2.0
   Canonical spec: docs/design-system/CANONICAL-v2-layout-and-visual-system.md
   Palette: coral red + titanium blue + silver + platinum.
   Everything reusable lives here. Components read these; they do not
   hard-code values. Legacy names at the bottom alias the semantic
   tokens so all 90 pages inherit a change made in this block alone.
   ============================================================ */
:root{
/* --- 3. brand scales ------------------------------------ */
--coral-100:#FFF0EC;--coral-200:#FFD8CE;--coral-300:#FFB09F;--coral-400:#FF887B;
--coral-500:#FF6A45;--coral-600:#E84A3B;--coral-700:#C7382B;--coral-800:#A12F27;--coral-900:#8F2A22;
--titanium-100:#EAF7FF;--titanium-200:#CBEAFF;--titanium-300:#8FD7FF;--titanium-400:#4FA7E3;
--titanium-500:#2E6EBE;--titanium-600:#245B9F;--titanium-700:#1D4C8F;--titanium-800:#173D72;--titanium-900:#0F335E;
--silver-050:#FBFCFD;--silver-100:#F5F7FA;--silver-200:#E1E6EA;--silver-300:#C4CCD3;--silver-400:#AAB3BC;
--silver-500:#8F98A2;--silver-600:#747E89;--silver-700:#5E6773;--silver-800:#444D58;--silver-900:#2D343C;
--platinum-050:#FFFEFC;--platinum-100:#FAF9F6;--platinum-200:#F3F0EC;--platinum-300:#E4E0DA;
--platinum-400:#C9C2B8;--platinum-500:#AEA69B;--platinum-600:#9E958A;--platinum-700:#81786E;
--platinum-800:#6F675E;--platinum-900:#4D4741;
/* --- 4. semantic accents (secondary states only) -------- */
--ua-info:#00B9C1;--ua-warning:#F4B942;--ua-success:#2EAF7D;--ua-insight:#8B5CF6;--ua-danger:#D74335;
/* --- 11-13. type ---------------------------------------- */
--ua-font-display:'Source Serif 4','Iowan Old Style',Georgia,serif;
--ua-font-sans:'Inter','IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
--ua-font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
--ua-font-size-hero:2.6rem;
--ua-font-size-page-title:2.6rem;
--ua-font-size-h2:1.7rem;
--ua-font-size-h3:1.15rem;
--ua-font-size-body:1rem;--ua-font-size-article:1.05rem;--ua-font-size-card:.95rem;
--ua-font-size-small:.875rem;--ua-font-size-meta:.8125rem;--ua-font-size-eyebrow:.6875rem;
--ua-line-height-tight:1.08;--ua-line-height-heading:1.15;--ua-line-height-body:1.55;--ua-line-height-article:1.72;
--ua-tracking-hero:-.035em;--ua-tracking-h2:-.02em;--ua-tracking-eyebrow:.30em;--ua-tracking-label:.20em;
/* --- 8, 37, 42. widths and gutters ---------------------- */
/* LOCKED OVERRIDE A (master design spec): ONE horizontal rail for the whole
   site. Content width = viewport minus two gutters, capped at --ua-page-max,
   centered. The gutter is a fixed value per breakpoint (below), not a clamp.
   --ua-content-max is kept only as an alias so nothing that still reads it
   can open a second, narrower rail. */
--ua-page-max:1600px;--ua-content-max:var(--ua-page-max);--ua-reading-max:820px;--ua-tool-max:1360px;
--ua-modal-max:860px;--ua-menu-max:1200px;--ua-figure-max:820px;--ua-figure-wide:1100px;
--ua-figure-hero:1360px;--ua-prose-measure:68ch;--ua-hero-copy-max:540px;
--ua-page-gutter:40px;
--ua-gutter-mobile:20px;--ua-gutter-tablet:32px;--ua-gutter-desktop:56px;--ua-gutter-wide:72px;
/* --- 36. spacing ---------------------------------------- */
--ua-space-1:4px;--ua-space-2:8px;--ua-space-3:12px;--ua-space-4:16px;--ua-space-5:20px;
--ua-space-6:24px;--ua-space-7:32px;--ua-space-8:40px;--ua-space-9:48px;--ua-space-10:64px;
--ua-space-11:80px;--ua-space-12:96px;--ua-space-13:120px;
--ua-grid-gap:20px;--ua-card-padding:28px;--ua-card-padding-sm:22px;--ua-card-padding-lg:34px;
--ua-section-gap:88px;--ua-page-section-gap:48px;--ua-heading-gap:16px;--ua-hero-padding:36px;
/* --- 9, 15, 23, 51, 56, 57. component sizes ------------- */
--ua-header-height:64px;--ua-header-height-mobile:58px;
--ua-hero-min-h:500px;--ua-entry-card-min-h:210px;--ua-dark-section-min-h:400px;--ua-stats-min-h:165px;
--ua-button-height:44px;--ua-button-height-hero:48px;--ua-button-padding-x:22px;
--ua-input-height:48px;--ua-pill-height:32px;--ua-pill-padding:5px 12px;
--ua-icon-circle:50px;--ua-card-min-h-small:150px;--ua-card-min-h-standard:240px;--ua-card-min-h-featured:360px;
--ua-sandbox-h-small:360px;--ua-sandbox-h-standard:540px;--ua-sandbox-h-large:640px;
--ua-search-max:720px;--ua-toc-width:240px;--ua-hero-visual-min-h:240px;
/* --- 39. radii ------------------------------------------ */
--ua-radius-sm:8px;--ua-radius-md:12px;--ua-radius-lg:18px;--ua-radius-feature:24px;--ua-radius-pill:999px;
/* --- 62. motion ----------------------------------------- */
--ua-motion-fast:150ms;--ua-motion-standard:220ms;--ua-motion-slow:420ms;
--ua-ease:cubic-bezier(.2,.6,.2,1);
/* --- 6. brand gradients (localised, never full-page) ---- */
--ua-gradient-coral:linear-gradient(135deg,#F0512F 0%,#E63A26 52%,#E22C1B 100%);
--ua-gradient-titanium:linear-gradient(135deg,#8FD7FF 0%,#4FA7E3 42%,#2E6EBE 72%,#0F335E 100%);
--ua-gradient-atomic:linear-gradient(120deg,#FF6A45 0%,#E84A3B 30%,#4FA7E3 67%,#0F335E 100%);
--ua-gradient-silver:linear-gradient(135deg,#F5F7FA,#C4CCD3 55%,#5E6773);
--ua-gradient-platinum:linear-gradient(135deg,#FAF9F6,#E4E0DA 58%,#9E958A);
--ua-dark-section-bg:radial-gradient(circle at 0% 100%,rgba(255,95,67,.30),transparent 26%),
  radial-gradient(circle at 62% 18%,rgba(79,167,227,.22),transparent 34%),
  linear-gradient(115deg,#0A1B26 0%,#102B3A 38%,#174459 60%,#0A202B 100%);

/* ===== 5. LIGHT THEME ==================================== */
--ua-bg:#FAF9F6;--ua-bg-subtle:#F5F7FA;
--ua-surface:#FFFFFF;--ua-surface-soft:#F8F9FA;--ua-surface-platinum:#F3F0EC;
--ua-text:#102436;--ua-text-secondary:#435363;--ua-text-muted:#5E6773;
--ua-border:#E1E6EA;--ua-border-soft:rgba(94,103,115,.12);--ua-divider:rgba(94,103,115,.13);
--ua-accent:#FF5F43;--ua-accent-hover:#E84A3B;--ua-accent-secondary:#2E6EBE;
--ua-focus:rgba(255,95,67,.18);
/* text-safe accents: the brand values above are for fills and large type;
   these meet AA at body size and are used for links and small text. */
--ua-accent-text:#C7382B;--ua-accent-secondary-text:#245B9F;--ua-accent-rule:#FF5638;--ua-accent-fill:#E22C1B;
--ua-on-accent:#FFFFFF;
--ua-success-text:#1B7A55;--ua-warning-text:#8A6410;--ua-danger-text:#B5352A;--ua-insight-text:#6D3FD4;
/* 40. shadows */
--ua-shadow-card:0 12px 28px rgba(27,48,65,.07);
--ua-shadow-card-hover:0 16px 34px rgba(27,48,65,.10);
--ua-shadow-feature:0 24px 56px rgba(15,51,94,.13);
--ua-shadow-menu:0 18px 42px rgba(34,41,48,.10);
--ua-shadow-cta:0 10px 26px rgba(232,74,59,.20);
/* 75. dropdown surface: warmer and quieter than the rest of the site */
--ua-menu-bg:#F7F3EF;--ua-menu-surface:#FBF9F6;--ua-menu-border:#E6DED6;
--ua-menu-divider:rgba(94,103,115,.12);
--ua-menu-heading:#AE5733;--ua-menu-title:#2B3137;--ua-menu-text:#6B7077;
--ua-menu-link:#AE5733;--ua-menu-link-hover:#8F4527;
--ua-menu-pill-bg:#FFF4EE;--ua-menu-pill-border:rgba(200,106,67,.30);--ua-menu-pill-text:#8F4527;
--ua-menu-lab-pill-bg:#F4EEF8;--ua-menu-lab-pill-border:rgba(139,92,246,.24);--ua-menu-lab-pill-text:#6D3FD4;
--ua-menu-hover:rgba(255,95,67,.05);
--ua-nav-bg:rgba(250,249,246,.94);

/* ===== legacy aliases: the 90 existing pages read these === */
--bg:var(--ua-bg);--card:var(--ua-surface);--bg-alt:var(--ua-surface-platinum);
--surface:var(--ua-surface-soft);--surface-2:var(--ua-surface-soft);--plane:var(--ua-bg);--screen:#09151E;
--ink:var(--ua-text);--ink-2:var(--ua-text-secondary);--ink-soft:var(--ua-text-secondary);
--muted:var(--ua-text-muted);
--copper:var(--ua-accent);--copper-dark:var(--ua-accent-text);--copper-fill:var(--ua-accent);
--copper-hover:var(--ua-accent-hover);
--steel:var(--ua-accent-secondary);--steel-light:var(--titanium-200);
--warning:var(--ua-warning);--warning-text:var(--ua-warning-text);--serious:var(--ua-warning);
--good:var(--ua-success-text);--good-fill:var(--ua-success);--critical:var(--ua-danger-text);
--line:var(--ua-border);--grid:var(--ua-border);--border:var(--ua-border-soft);
--border-2:var(--silver-300);--axis:var(--silver-300);
--kicker-bg:var(--coral-100);--kicker-ink:var(--ua-accent-text);
--btn-ink:var(--ua-on-accent);--nav-bg:var(--ua-nav-bg);
--shadow:var(--ua-shadow-card);--shadow-hover:var(--ua-shadow-card-hover);
--radius:var(--ua-radius-sm);--radius-md:var(--ua-radius-md);--radius-lg:var(--ua-radius-lg);
--sans:var(--ua-font-sans);--serif:var(--ua-font-display);--mono:var(--ua-font-mono);
--s1:var(--ua-accent-secondary);--s2:var(--ua-accent);--s3:var(--ua-insight);
--d-tem:var(--ua-accent);--d-ebsd:var(--ua-success);--d-apt:var(--ua-insight);
--d-crystallography:var(--ua-warning);--d-phase:var(--coral-600);--d-tribology:var(--coral-700);
--d-nanoindentation:var(--titanium-500);--d-scratch:var(--ua-warning);--d-insitu:var(--titanium-400);
--hero-glow:rgba(255,106,69,.18);--glow-2:rgba(79,167,227,.14);
--section-gap:var(--ua-section-gap);--card-gap:var(--ua-grid-gap);
}
/* LOCKED OVERRIDE A: gutter per breakpoint. Never below 20px. */
@media (max-width:1023px){:root{--ua-page-gutter:24px}}
@media (max-width:767px){:root{--ua-page-gutter:16px}}
/* The shared rail itself. build.js's .wrap and site-nav.js's header /
   breadcrumb inners all use this exact box model: gutter outside, cap
   inside, no padding of their own. */
.ua-shell{width:calc(100% - (2 * var(--ua-page-gutter)));max-width:var(--ua-page-max);margin-left:auto;margin-right:auto;box-sizing:border-box}
/* ===== 5. DARK THEME: same roles, redefined ============== */
[data-theme="dark"]{
--ua-bg:#09151E;--ua-bg-subtle:#0D1D29;
--ua-surface:#102330;--ua-surface-soft:#152A38;--ua-surface-platinum:#1B2D38;
--ua-text:#F7F5F1;--ua-text-secondary:#C7D0D6;--ua-text-muted:#8F9CA6;
--ua-border:rgba(225,230,234,.14);--ua-border-soft:rgba(225,230,234,.08);--ua-divider:rgba(225,230,234,.09);
--ua-accent:#FF6A45;--ua-accent-hover:#FF887B;--ua-accent-secondary:#4FA7E3;
--ua-focus:rgba(255,106,69,.22);
--ua-accent-text:#FF8C6A;--ua-accent-secondary-text:#8FD7FF;--ua-on-accent:#0A1B26;--ua-accent-rule:#FF6A45;--ua-accent-fill:#C7382B;
--ua-success-text:#5FCFA0;--ua-warning-text:#F4B942;--ua-danger-text:#F08A7E;--ua-insight-text:#C7B0FF;
--ua-shadow-card:0 16px 38px rgba(0,0,0,.30);
--ua-shadow-card-hover:0 20px 46px rgba(0,0,0,.38);
--ua-shadow-feature:0 26px 62px rgba(0,0,0,.42);
--ua-shadow-menu:0 20px 48px rgba(0,0,0,.28);
--ua-shadow-cta:0 10px 26px rgba(0,0,0,.34);
--ua-menu-bg:#12202B;--ua-menu-surface:#162734;--ua-menu-border:rgba(225,230,234,.12);
--ua-menu-divider:rgba(225,230,234,.08);
--ua-menu-heading:#FF8C6A;--ua-menu-title:#F3F5F7;--ua-menu-text:#A7B0B8;
--ua-menu-link:#FF8C6A;--ua-menu-link-hover:#FFB09F;
--ua-menu-pill-bg:rgba(255,106,69,.10);--ua-menu-pill-border:rgba(255,106,69,.24);--ua-menu-pill-text:#FF8C6A;
--ua-menu-lab-pill-bg:rgba(139,92,246,.12);--ua-menu-lab-pill-border:rgba(139,92,246,.24);--ua-menu-lab-pill-text:#C7B0FF;
--ua-menu-hover:rgba(255,106,69,.08);
--ua-nav-bg:rgba(9,21,30,.92);
--screen:#050D14;--steel-light:var(--titanium-800);--axis:var(--silver-700);
--kicker-bg:rgba(255,106,69,.12);
--border-2:rgba(225,230,234,.22);
--hero-glow:rgba(255,106,69,.22);--glow-2:rgba(79,167,227,.18);
--d-apt:var(--ua-insight-text);--d-nanoindentation:var(--titanium-400);
}
/* --- 0.5 colour: DARK theme redefines the same roles ----- */
/* keyboard focus: one visible ring everywhere (spec 54) */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--ua-accent);outline-offset:2px}