/* ConstantID: crisp "periodic table" reference. System fonts only. */
:root {
  --bg: #f7f7fb; --fg: #17162b; --muted: #5e5c78; --card: #ffffff; --line: #e2e1ee; --soft: #efeef7;
  --ink: #14123a; --ink2: #24216a; --accent: #4c5fd5; --accent-fg: #ffffff; --link: #3a4bc4;
  --g-universal: #4c5fd5; --g-electromagnetic: #e8590c; --g-atomic: #0a9a9e; --g-physchem: #c2255c;
  --g-units: #5c940d; --g-adopted: #9c36b5; --g-equiv: #6b6a80;
  --ok: #2b8a3e; --bad: #c92a2a;
  --radius: 14px; --shadow: 0 1px 2px rgba(20, 18, 58, .06), 0 4px 14px rgba(20, 18, 58, .06);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --math: math, "STIX Two Math", "Cambria Math", "Latin Modern Math", "Times New Roman", serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f0e1d; --fg: #e9e8f5; --muted: #a3a1bd; --card: #18172b; --line: #2c2a45; --soft: #1f1e36;
    --ink: #0a0918; --ink2: #1b1850; --accent: #7b8cf0; --accent-fg: #0f0e1d; --link: #9aa7ff;
    --g-universal: #6477e0; --g-electromagnetic: #e8661c; --g-atomic: #139ea3; --g-physchem: #d63a70;
    --g-units: #5f9a12; --g-adopted: #ad4fc6; --g-equiv: #8a89a3;
    --ok: #69db7c; --bad: #ff8787;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 var(--sans); }
a { color: var(--link); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); margin: .4em 0 .3em; }
h2 { font-size: 1.4rem; margin: 2em 0 .6em; }
h3 { font-size: 1.1rem; margin: 1.5em 0 .5em; }
img { max-width: 100%; height: auto; }
math { font-family: var(--math); font-size: 1.08em; }
sup { line-height: 0; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--card); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.lede { font-size: 1.12rem; color: var(--fg); max-width: 60em; }
.num { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.num .u, .v .u, .t-val .u { color: var(--muted); }
.num .x, .t-val .x { white-space: nowrap; }
.ok { color: var(--ok); } .bad { color: var(--bad); font-weight: 700; }
.more { font-weight: 600; }

/* header */
.top { background: var(--ink); color: #fff; position: sticky; top: 0; z-index: 20; box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.bar { display: flex; align-items: center; gap: 18px; min-height: 58px; }
.brand { display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; font-size: 1.15rem; letter-spacing: -.01em; }
.brand b { color: #a9b4ff; }
.top nav { display: flex; gap: 2px; flex-wrap: wrap; }
.top nav a { color: #d8d7ef; text-decoration: none; padding: 6px 10px; border-radius: 8px; font-size: .95rem; }
.top nav a:hover, .top nav a[aria-current] { background: rgba(255, 255, 255, .1); color: #fff; }
.qs { margin-left: auto; position: relative; }
.qs input { width: 240px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: #fff; font: inherit; font-size: .95rem; }
.qs input::placeholder { color: #b7b5d6; }
.qs-list { position: absolute; right: 0; top: calc(100% + 6px); width: min(440px, 92vw); background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; z-index: 30; }
.qs-list a { display: grid; grid-template-columns: 3.2em 1fr; gap: 2px 10px; padding: 8px 12px; text-decoration: none; color: inherit; border-left: 4px solid var(--gc, var(--line)); }
.qs-list a[aria-selected="true"], .qs-list a:hover { background: var(--soft); }
.qs-list .qs-s { grid-row: span 2; font-family: var(--math); font-size: 1.2rem; align-self: center; text-align: center; font-style: italic; }
.qs-list .qs-n { font-weight: 600; font-size: .95rem; }
.qs-list .qs-v { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.qs-list .qs-empty { padding: 10px 12px; color: var(--muted); }

/* hero */
.hero { background: radial-gradient(1200px 400px at 80% 0, #2c2690 0, transparent 60%), linear-gradient(160deg, var(--ink) 0, var(--ink2) 100%); color: #fff; }
.hero-in { display: grid; grid-template-columns: 1.25fr 1fr; gap: 32px; align-items: center; padding-top: 40px; padding-bottom: 48px; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.3rem); margin: .2em 0 .35em; letter-spacing: -.02em; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, #8fa0ff, #ff9b6a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: #b8b6e6; margin: 0; }
.hero .sub { font-size: 1.12rem; color: #dddcf3; max-width: 34em; }
.bigsearch { position: relative; display: flex; gap: 8px; margin-top: 22px; max-width: 560px; }
.bigsearch input { flex: 1; min-width: 0; padding: 13px 16px; font: inherit; font-size: 1.05rem; border-radius: 12px; border: 0; background: #fff; color: #17162b; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
.bigsearch button { padding: 0 18px; border: 0; border-radius: 12px; background: #ff8f5a; color: #1d1030; font: inherit; font-weight: 700; cursor: pointer; }
.bigsearch .qs-list { left: 0; right: auto; width: 100%; }
.hero-svg { width: 100%; height: auto; color: #fff; }
.hero-svg .orb { stroke: rgba(255, 255, 255, .18); stroke-width: 1.2; }
.htile rect { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .25); }
.h-u rect { fill: rgba(100, 119, 224, .35); stroke: #8fa0ff; }
.h-e rect { stroke: #ff9b6a; } .h-a rect { stroke: #4fd1d5; } .h-p rect { stroke: #f06595; } .h-d rect { stroke: #8fa0ff; }
.hs, .hs2 { font-family: var(--math); font-style: italic; fill: #fff; }
.hs { font-size: 64px; } .hs2 { font-size: 40px; }
.hk { font: 600 11px var(--sans); fill: #cfd5ff; letter-spacing: .06em; text-transform: uppercase; }
.hv { font: 12px var(--sans); fill: #dfe2ff; font-variant-numeric: tabular-nums; }
.dot1 { fill: #ff9b6a; } .dot2 { fill: #4fd1d5; } .dot3 { fill: #f06595; }

/* section heads */
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sec-head h2 { margin-bottom: .4em; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font-size: .85rem; color: var(--muted); }
.lg::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--gc); margin-right: 6px; vertical-align: -1px; }

/* group colour hook */
.g-universal { --gc: var(--g-universal); } .g-electromagnetic { --gc: var(--g-electromagnetic); } .g-atomic { --gc: var(--g-atomic); }
.g-physchem { --gc: var(--g-physchem); } .g-units { --gc: var(--g-units); } .g-adopted { --gc: var(--g-adopted); } .g-equiv { --gc: var(--g-equiv); }

/* tiles: the periodic-table cards */
.grid { display: grid; gap: 12px; }
.tiles { --n: 6; display: flex; flex-wrap: wrap; justify-content: center; }   /* PARK-56: 6 / 4 / 3 / 2 columns (sets of 4 or 8 go 4 / 2, sets of 6 go 6 / 3 / 2), short last row centred */
.tiles > * { flex: 0 1 calc((100% - (var(--n) - 1) * 12px) / var(--n)); min-width: 0; }
.tiles:has(> :nth-child(4):last-child), .tiles:has(> :nth-child(8):last-child) { --n: 4; }
@media (max-width: 1100px) { .tiles { --n: 4; } .tiles:has(> :nth-child(6):last-child) { --n: 3; } }
@media (max-width: 760px) { .tiles { --n: 3; } .tiles:has(> :nth-child(4):last-child), .tiles:has(> :nth-child(8):last-child) { --n: 2; } }
.tile { position: relative; display: flex; flex-direction: column; min-height: 156px; padding: 12px 12px 10px; border-radius: var(--radius); text-decoration: none; color: var(--fg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gc) 13%, var(--card)) 0, var(--card) 70%); border: 1px solid color-mix(in srgb, var(--gc) 35%, var(--line));
  box-shadow: var(--shadow); transition: transform .12s ease, box-shadow .12s ease; overflow: hidden; }
.tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--gc); }
.tile:hover, .tile:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 26px color-mix(in srgb, var(--gc) 25%, transparent); }
.t-grp { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: color-mix(in srgb, var(--gc) 75%, var(--fg)); font-weight: 700; }
.t-ex { position: absolute; top: 10px; right: 10px; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 99px; background: var(--gc); color: #fff; }
.t-sym { font-size: 2.05rem; line-height: 1.15; margin: 6px 0 2px; min-height: 2.4rem; }
.t-sym math { font-size: 1em; }
.t-name { font-weight: 650; font-size: .95rem; line-height: 1.25; }
.t-val { margin-top: auto; padding-top: 6px; font-size: .82rem; font-variant-numeric: tabular-nums; line-height: 1.35; overflow-wrap: anywhere; }
.t-unit { font-size: .78rem; color: var(--muted); }

/* SI strip */
.seven { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; counter-reset: s7; }   /* PARK-56: all seven in one row, then 4 + 3 and 2 per row, centred */
.seven > li { flex: 1 1 0; min-width: 0; }
@media (max-width: 1000px) { .seven > li { flex: 0 1 calc((100% - 30px) / 4); } }
@media (max-width: 560px) { .seven > li { flex-basis: calc((100% - 10px) / 2); } }
.seven a { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--fg); border-left: 4px solid var(--g-adopted); }
.s7-sym { font-size: 1.6rem; } .s7-u { font-size: .85rem; color: var(--muted); } .s7-v { font-size: .78rem; font-variant-numeric: tabular-nums; margin-top: auto; }

/* group cards / tools */
.groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* PARK-56: six groups, 3 / 2 / 1 */
@media (max-width: 1000px) { .groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .groups { grid-template-columns: 1fr; } }
.gcard, .tool { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--fg); box-shadow: var(--shadow); }
.gcard { border-top: 5px solid var(--gc); }
.gcard b, .tool b { font-size: 1.05rem; }
.gcard span, .tool span { color: var(--muted); font-size: .93rem; }
.gcard em { font-style: normal; font-size: .85rem; color: color-mix(in srgb, var(--gc) 80%, var(--fg)); font-weight: 600; margin-top: auto; }
.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* PARK-56: 3 tools (15 on /units/), 3 then 1 */
@media (max-width: 700px) { .three { grid-template-columns: 1fr; } }
.links { columns: 2 280px; padding-left: 1.1em; }
.links li { margin: .2em 0; break-inside: avoid; }
.faces { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.faces a { flex: 0 0 auto; width: 104px; text-decoration: none; color: var(--fg); font-size: .85rem; text-align: center; }
.faces img { width: 96px; height: 120px; object-fit: cover; object-position: top; border-radius: 12px; display: block; margin: 0 auto 6px; filter: grayscale(.2); }

/* crumbs */
.crumbs { font-size: .88rem; color: var(--muted); margin-top: 18px; }
.crumbs a { color: var(--muted); }

/* constant page */
.c-head { display: flex; gap: 18px; align-items: center; margin-top: 10px; }
.c-badge { flex: 0 0 auto; width: 92px; height: 92px; border-radius: 18px; display: grid; place-items: center; font-size: 2.3rem; color: #fff;
  background: linear-gradient(145deg, var(--gc), color-mix(in srgb, var(--gc) 60%, #000)); box-shadow: 0 8px 22px color-mix(in srgb, var(--gc) 35%, transparent); overflow: hidden; padding: 4px; }
.c-badge math { font-size: clamp(.55em, 1em, 1em); }
.c-head h1 { margin: 0 0 .25em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.chip { font-size: .78rem; padding: 2px 10px; border-radius: 99px; text-decoration: none; border: 1px solid color-mix(in srgb, var(--gc, var(--muted)) 50%, transparent); color: color-mix(in srgb, var(--gc, var(--fg)) 80%, var(--fg)); background: color-mix(in srgb, var(--gc, var(--muted)) 10%, transparent); font-weight: 600; }
.chip.def { --gc: var(--g-adopted); }
.chip.exact { --gc: var(--ok); } .chip.meas { --gc: var(--muted); }
.valuebox { margin-top: 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow); border-left: 6px solid var(--gc); }
.bigval { font-size: clamp(1.35rem, 3.6vw, 2.2rem); margin: 0 0 14px; font-variant-numeric: tabular-nums lining-nums; line-height: 1.35; overflow-wrap: anywhere; }
.bigval .eq { color: var(--muted); margin: 0 .1em; }
.bigval .unit { color: var(--muted); font-size: .7em; }
.bigval .u { color: color-mix(in srgb, var(--gc) 75%, var(--fg)); }
.bigval.small { font-size: 1.3rem; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 24px; margin: 0; }
.facts div { border-top: 1px solid var(--line); padding-top: 8px; }
.facts dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.facts dd { margin: 2px 0 0; white-space: normal; overflow-wrap: anywhere; }
.note { font-size: .92rem; color: var(--muted); margin: 14px 0 0; overflow-wrap: anywhere; }
.note .long { color: var(--fg); white-space: normal; }

.calc { margin-top: 18px; }
.calc h2 { margin-top: 1.4em; }
.calc-ui { background: var(--soft); border-radius: var(--radius); padding: 14px 16px; }
.calc-row { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-bottom: 10px; }
.calc select, .conv select, .conv input { font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--fg); }
.calc-out { display: grid; gap: 8px; }
.calc-out div { display: grid; grid-template-columns: 4.5em 1fr auto; gap: 10px; align-items: center; }
.calc-out span { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.calc-out code, pre code { font-family: var(--mono); font-size: .9rem; }
.calc-out code { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; overflow-x: auto; white-space: nowrap; }
.calc-out button, #cv-swap { font: inherit; font-size: .85rem; padding: 6px 12px; border-radius: 8px; border: 0; background: var(--accent); color: var(--accent-fg); cursor: pointer; font-weight: 600; }
.calc-out button.done { background: var(--ok); }
pre.static-calc { background: var(--soft); border-radius: var(--radius); padding: 12px 16px; overflow-x: auto; margin: 0; }
html.js pre.static-calc { display: none; }

.about-grid { display: grid; gap: 28px; }
.about-grid.has-p { grid-template-columns: 1fr 260px; }
.eqs { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.eqs li { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; overflow-x: auto; }
.eqs math[display="block"] { margin: 0; font-size: 1.25rem; }
.eqs .cap { font-size: .85rem; color: var(--muted); }
.person p { font-size: .92rem; }
.portrait { margin: 0; }
.portrait img { border-radius: 12px; display: block; width: 100%; max-width: 260px; }
.portrait figcaption { font-size: .9rem; margin-top: 6px; }
.credit { display: block; color: var(--muted); font-size: .72rem; line-height: 1.4; margin-top: 3px; }
.credit a { color: var(--muted); }

/* tables */
.tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--soft); position: sticky; top: 0; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
.clist tr td:first-child { border-left: 4px solid var(--gc, transparent); }
.clist .sym { font-size: 1.1rem; white-space: nowrap; }
.clist .unit { color: var(--muted); white-space: nowrap; }
.clist tbody tr:hover { background: var(--soft); }
table.small { font-size: .85rem; }
.alts td:first-child { min-width: 12em; }
.alts.big td { font-size: 1.02rem; }
.equiv th[scope="row"] { background: var(--soft); white-space: nowrap; }
.equiv td { font-size: .85rem; }
.equiv td.ex { font-weight: 650; }
.equiv td.diag { color: var(--muted); text-align: center; }
.equiv td:target { outline: 3px solid var(--accent); outline-offset: -3px; }
.htab td:first-child { font-weight: 600; }
.seven-t td { vertical-align: top; }
.facts-list li { margin: .35em 0; }

/* charts */
.chartbox { margin: 0 0 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; overflow-x: auto; }
.chart { display: block; width: 100%; min-width: 520px; height: auto; }
.chart .gl { stroke: var(--line); stroke-width: 1; }
.chart .zero { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; }
.chart .ax { font: 12px var(--sans); fill: var(--muted); }
.chart .ax.ex { font-weight: 600; fill: var(--ok); }
.chart .trend { stroke: var(--gc); stroke-opacity: .35; stroke-width: 2; }
.chart .err { stroke: var(--gc); stroke-width: 2; stroke-linecap: round; }
.chart .pt { fill: var(--gc); stroke: var(--card); stroke-width: 2; }
.chart .pt.exact { fill: var(--card); stroke: var(--gc); stroke-width: 2.5; }
.chart .bar { fill: var(--gc); }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart .hit:hover, .chart .hit:focus { fill: color-mix(in srgb, var(--gc) 8%, transparent); outline: none; }
#tip { position: fixed; z-index: 60; pointer-events: none; max-width: 320px; background: var(--fg); color: var(--bg); font-size: .84rem; padding: 7px 10px; border-radius: 8px; box-shadow: var(--shadow); font-variant-numeric: tabular-nums; }
.equiv td[data-tip] { cursor: help; }

/* diagrams */
.diagram { margin: 18px 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; overflow-x: auto; }
.diagram figcaption { font-size: .9rem; color: var(--muted); margin-top: 8px; }
.si-svg { width: 100%; min-width: 560px; max-width: 760px; height: auto; display: block; margin: 0 auto; }
.si-svg .edge { fill: none; stroke: var(--muted); stroke-opacity: .45; stroke-width: 1.6; }
.si-svg .edge.main { stroke: var(--g-adopted); stroke-opacity: 1; stroke-width: 3; }
.si-svg .node rect { fill: var(--soft); stroke: var(--g-adopted); stroke-width: 1.5; }
.si-svg .node.u rect { fill: color-mix(in srgb, var(--g-universal) 14%, var(--card)); stroke: var(--g-universal); }
.si-svg .sym { font: italic 22px var(--math); fill: var(--fg); }
.si-svg .u .sym { font-style: normal; font-weight: 700; font-family: var(--sans); font-size: 18px; }
.si-svg .sb { font-size: 13px; }
.si-svg .nm { font: 13px var(--sans); fill: var(--muted); }
.si-svg .hd { font: 600 12px var(--sans); fill: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.concise-svg { width: 100%; min-width: 520px; max-width: 640px; display: block; }
.concise-svg .big { font: 54px var(--sans); fill: var(--fg); font-variant-numeric: tabular-nums; }
.concise-svg .last { fill: var(--g-universal); } .concise-svg .unc { fill: var(--g-electromagnetic); } .concise-svg .exp { font-size: 30px; }
.concise-svg .lab { font: 14px var(--sans); fill: var(--muted); }
.concise-svg .brace { fill: none; stroke: var(--g-electromagnetic); stroke-width: 2; }

/* filters, converter */
.filters { margin: 14px 0; display: grid; gap: 10px; }
.filters input { font: inherit; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--fg); max-width: 520px; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchips button { font: inherit; font-size: .85rem; padding: 4px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--fg); cursor: pointer; }
.fchips button[aria-pressed="true"] { background: var(--gc, var(--accent)); border-color: var(--gc, var(--accent)); color: #fff; }
.conv { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); margin: 14px 0 6px; }
.conv-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.conv label { display: grid; gap: 4px; font-size: .82rem; color: var(--muted); }
.conv input { width: 12em; }
.conv-out { display: block; font-size: 1.5rem; margin-top: 14px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.conv details { margin-top: 8px; }
.toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0; }
.toc a { padding: 4px 12px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); text-decoration: none; font-size: .9rem; }
.ghead { border-left: 6px solid var(--gc); padding-left: 16px; }
.aliases { columns: 2 340px; font-size: .9rem; }
.people { display: grid; gap: 18px; }
.pcard { display: grid; grid-template-columns: 180px 1fr; gap: 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; scroll-margin-top: 80px; }
.pcard h2 { margin: 0 0 .3em; }
.pcard .portrait img { max-width: 180px; }

/* footer */
.foot { margin-top: 64px; background: var(--ink); color: #cfcde8; font-size: .9rem; }
.foot a { color: #b9c2ff; }
.footgrid { display: grid; grid-template-columns: 1.1fr 2fr 1fr; gap: 28px; padding-top: 30px; padding-bottom: 30px; }
.small-brand { color: #fff; }
.foot .muted { color: #9a98bd; }

@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-art { display: none; }
  .about-grid.has-p { grid-template-columns: 1fr; }
  .footgrid { grid-template-columns: 1fr; }
  .qs input { width: 170px; }
}
@media (max-width: 700px) {
  .bar { flex-wrap: wrap; gap: 4px 10px; padding-top: 8px; padding-bottom: 8px; }
  .top { position: static; }
  .top nav { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .hide-sm { display: none; }
  .qs { margin-left: auto; }
  .qs input { width: 150px; }
  .tiles { gap: 10px; } .tiles > * { flex-basis: calc((100% - 10px) / 2); }
  .tile { min-height: 140px; padding: 10px; }
  .t-sym { font-size: 1.7rem; }
  .valuebox { padding: 16px; }
  .c-badge { width: 68px; height: 68px; font-size: 1.7rem; border-radius: 14px; }
  .calc-out div { grid-template-columns: 1fr auto; }
  .calc-out span { grid-column: 1 / -1; }
  .pcard { grid-template-columns: 1fr; }
  .pcard .portrait img { max-width: 160px; }
  th, td { padding: 7px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .top, .foot, .calc, .qs, .filters { display: none; }
}
@media (max-width: 700px) {
  .t-grp { font-size: .6rem; display: block; max-width: calc(100% - 46px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .t-ex { font-size: .58rem; padding: 1px 5px; top: 9px; right: 8px; }
}
.chart { max-width: 780px; margin: 0 auto; }
.chart .arrow { fill: none; }
.concise-svg .brace.v { stroke: var(--g-universal); }
.concise-svg .eqv { fill: var(--fg); font-size: 16px; }
.clist td:nth-child(2) { min-width: 11em; }
@media (max-width: 700px) {
  .seven-t thead { display: none; }
  .seven-t tr { display: block; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .seven-t td { display: block; border: 0; padding: 2px 0; }
  .seven-t td:last-child { color: var(--muted); font-size: .9rem; }
}