:root {
  --bg: #030A1C; --bg-top: #061430; --deep: #0A1E3F;
  --surface: linear-gradient(160deg, rgba(18,52,92,.55), rgba(6,20,48,.72)); --surface-flat: #0B1F3E; --well: rgba(2,8,22,.4);
  --ink: #DCEFF7; --soft: #BFD3E0; --muted: #93B2C8; --line: rgba(120,210,240,.2); --line-strong: rgba(120,220,245,.5);
  --cyan: #4FE0F0; --cyan-dim: #2A9FB4; --on-cyan: #022030; --accent: #6FE6F4; --focus: #4FE0F0;
  --gC: #7C9BB4; --gC-fill: #4B6A86; --magenta: #FF4FA0; --mag-text: #FF7DB8;
  --dot-near: #DCEFF7; --dot-far: #4FE0F0;
  --leak: rgba(79,224,240,.9); --leak-mag: rgba(255,79,160,.9);
  --shadow: 0 0 0 4px rgba(79,224,240,.03), 0 0 0 5px rgba(79,224,240,.07), 0 30px 60px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(200,245,255,.08);
  --glow: 0 0 22px -4px var(--cyan);
  --page-bg:
    radial-gradient(1100px 700px at 72% 6%, rgba(40,140,200,.20), transparent 60%),
    radial-gradient(800px 600px at -10% 40%, rgba(30,90,170,.16), transparent 60%),
    linear-gradient(180deg, var(--bg-top) 0, var(--bg) 900px);
  --maxw: 1320px;
  --sans: "Familjen Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --prose: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, monospace;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #E6EFF5; --bg-top: #F3F8FB; --deep: #D7E6EF;
  --surface: linear-gradient(160deg, rgba(255,255,255,.92), rgba(240,247,251,.85)); --surface-flat: #FFFFFF; --well: rgba(10,60,110,.04);
  --ink: #0A1E3F; --soft: #22385A; --muted: #44607A; --line: rgba(10,60,110,.16); --line-strong: rgba(10,100,140,.45);
  --cyan: #087A90; --cyan-dim: #5FB3C4; --on-cyan: #FFFFFF; --accent: #086F84; --focus: #087A90;
  --gC: #5E7890; --gC-fill: #9DB2C4; --magenta: #C2185B; --mag-text: #B0124F;
  --dot-near: #0A3A66; --dot-far: #1A9FB8;
  --leak: rgba(8,122,144,.6); --leak-mag: rgba(194,24,91,.6);
  --shadow: 0 1px 2px rgba(10,30,63,.06), 0 18px 40px -26px rgba(10,30,63,.35);
  --glow: none;
  --page-bg: radial-gradient(1000px 600px at 75% 0, rgba(79,200,230,.18), transparent 60%), linear-gradient(180deg, var(--bg-top), var(--bg) 900px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; background: var(--page-bg); background-repeat: no-repeat; background-color: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--sans); font-variant-numeric: tabular-nums; overflow-x: hidden; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.02em; line-height: 1.12; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
button, select, input { font: inherit; color: inherit; }
sup { font-size: .68em; line-height: 0; }
sup + sup { margin-left: .25em; }
sup a { text-decoration: none; padding: 0 .1em; color: var(--accent); font-family: var(--mono); font-size: .9em; }
.num { font-family: var(--mono); font-size: .9em; letter-spacing: -.02em; }
select { appearance: none; -webkit-appearance: none; background: var(--surface-flat) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2393B2C8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center; border: 1px solid var(--line); border-radius: 8px; padding: 8px 32px 8px 12px; cursor: pointer; color: var(--ink); }
select:hover { border-color: var(--line-strong); }

/* glass panes: layered rings, a light leak on the top edge, a soft bloom in one corner */
.pane, .row, .syskey, .dhead, .verdict > div, .toolbar, .compare-bar, .related li a, .search {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
}
.row::before, .syskey::before, .dhead::before, .verdict > div::before, .toolbar::before {
  content: ""; position: absolute; left: 5%; right: 5%; top: -1px; height: 1px; pointer-events: none; opacity: .6;
  background: linear-gradient(90deg, transparent, var(--leak) 35%, rgba(230,252,255,.9) 50%, var(--leak) 65%, transparent);
}
.row.gD::before, .row.f-not_approved::before, .dhead.f-not_approved::before { background: linear-gradient(90deg, transparent, var(--leak-mag) 40%, rgba(255,210,235,.9) 50%, transparent 90%); }

.top { max-width: var(--maxw); margin: 0 auto; padding: 24px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { color: var(--ink); text-decoration: none; font-weight: 600; letter-spacing: -.01em; font-size: 1.1rem; display: inline-flex; align-items: center; gap: 10px; }
.brand svg { color: var(--cyan); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--cyan) 70%, transparent)); }
.top nav { display: flex; align-items: center; gap: 6px; }
.top nav a { color: var(--muted); text-decoration: none; padding: 7px 12px; border-radius: 8px; border: 1px solid transparent; }
.top nav a:hover { color: var(--ink); border-color: var(--line); }
.theme { background: none; border: 1px solid var(--line); border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; color: var(--muted); margin-left: 6px; }
.theme:hover { color: var(--ink); border-color: var(--line-strong); }
main { max-width: var(--maxw); margin: 0 auto; padding: 0 24px 72px; }
footer { max-width: var(--maxw); margin: 0 auto; padding: 28px 24px 48px; border-top: 1px solid var(--line); color: var(--muted); font: .9rem/1.55 var(--prose); }
footer p { max-width: 72ch; }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 32px; align-items: center; padding: 8px 0 48px; }
.hero h1 { font-size: clamp(2.6rem, 1.4rem + 3.2vw, 4.1rem); letter-spacing: -.035em; line-height: 1.02; margin-bottom: .5em; }
.hero .lede { color: var(--muted); font-size: 1.12rem; max-width: 38ch; margin-bottom: 1.6em; }
.hero .lede .num { color: var(--ink); }
.search { display: flex; align-items: center; gap: 12px; border-radius: 12px; padding: 0 18px; height: 56px; color: var(--cyan); }
.search:focus-within { border-color: var(--line-strong); }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 1.02rem; color: var(--ink); height: 100%; }
.search input::placeholder { color: var(--muted); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.dist { margin-top: 26px; }
.dist-bar, .mix { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; }
.dist-bar i, .mix i { display: block; }
.dist ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; justify-content: space-between; gap: 8px; font-size: .85rem; color: var(--muted); }
.dist b { font: 400 .95rem var(--mono); color: var(--ink); margin-right: 5px; }
i.gA { background: var(--cyan); } i.gB { background: var(--cyan-dim); } i.gC { background: var(--gC-fill); } i.gD { background: var(--magenta); }

.map { position: relative; aspect-ratio: 900 / 660; perspective: 1400px; }
.body { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.body .floor { fill: url(#floorg); }
.body .grid, .body .rings, .body .dots path, .dfig .dots path { fill: none; stroke-linecap: round; }
.body .grid { stroke: var(--cyan); opacity: .4; }
.body .rings { stroke: var(--muted); opacity: .35; }
.dots .b0 { stroke: var(--dot-far); opacity: .3; } .dots .b1 { stroke: var(--dot-far); opacity: .5; }
.dots .b2 { stroke: var(--dot-near); opacity: .75; } .dots .b3 { stroke: var(--dot-near); opacity: 1; }
.body .dots { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--cyan) 55%, transparent)); }
:root[data-theme="light"] .body .dots { filter: none; }
.body .halo { opacity: .55; }
:root[data-theme="light"] .body .halo { display: none; }
.region { cursor: pointer; outline: none; }
.region .hit { fill: transparent; }
.region .ring { fill: none; stroke: var(--cyan); stroke-width: 1; }
.region .aura { fill: var(--cyan); opacity: .35; }
.region .core { fill: #F2FBFF; stroke: var(--cyan); stroke-width: 1.5; }
:root[data-theme="light"] .region .core { fill: var(--cyan); stroke: #fff; }
.region, .region > * { transition: opacity .25s; }
.region:hover .aura, .region.hot .aura, .region[aria-pressed="true"] .aura { opacity: .85; }
.region[aria-pressed="true"] .ring, .region:focus-visible .ring { stroke-width: 2.5; }
.region:focus-visible .ring { stroke: var(--ink); }
.body:has([aria-pressed="true"]) .region[aria-pressed="false"]:not(.hot), .body[data-hover] .region:not(.hot):not([aria-pressed="true"]) { opacity: .35; }
@media (hover: hover) { .body:has(.region:hover) .region:not(:hover):not([aria-pressed="true"]) { opacity: .35; } }

.syskeys { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.syskeys li { position: absolute; top: calc(4% + var(--row) * 24%); width: 22%; pointer-events: auto; transform-style: preserve-3d; }
.syskeys li.l { left: 0; transform: rotateY(22deg); } .syskeys li.r { right: 0; transform: rotateY(-22deg); }
.syskey { display: grid; gap: 8px; width: 100%; text-align: left; padding: 12px 14px 13px; cursor: pointer; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.sk-name { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 600; font-size: 1rem; letter-spacing: -.01em; line-height: 1.2; }
.sk-name .n { font: 400 .92rem var(--mono); color: var(--cyan); }
.mix { height: 4px; }
.sk-key { font: 400 .72rem var(--mono); color: var(--muted); letter-spacing: -.02em; }
.syskey:hover, .syskey.hot { border-color: var(--line-strong); }
.syskey[aria-pressed="true"] { border-color: var(--cyan); box-shadow: var(--shadow), 0 0 28px -8px var(--cyan); }
.leads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.leads path { fill: none; stroke: var(--cyan); stroke-width: 1; opacity: .5; }
.leads circle { fill: var(--cyan); }

/* index */
.toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 20px; }
.toolbar h2 { margin: 0; font-size: 1.45rem; letter-spacing: -.025em; }
.toolbar h2 span { font: 400 1.05rem var(--mono); color: var(--cyan); margin-left: .35em; }
#clear { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: .18em; font-size: .95rem; }
.selects { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.selects select { font-size: .93rem; }
.rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id grade" "figs figs" "claims claims" "foot foot"; transition: border-color .2s; }
.row[hidden] { display: none; }
.row:hover { border-color: var(--line-strong); }
.row.gD, .row.f-not_approved { border-color: color-mix(in srgb, var(--magenta) 32%, transparent); }
.r-id { grid-area: id; padding: 18px 0 14px 18px; display: flex; flex-direction: column; min-width: 0; }
.row .name { color: var(--ink); text-decoration: none; font-size: 1.32rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.row .name::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.row .cls { color: var(--muted); font-size: .9rem; margin-top: 3px; }
.row .status { margin-top: 10px; }
.r-grade { grid-area: grade; padding: 18px 18px 14px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.glabel { font-size: .74rem; color: var(--muted); line-height: 1.25; max-width: 84px; margin-top: 5px; }
.figs { grid-area: figs; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); background: var(--well); }
.figs > div { padding: 8px 12px; min-width: 0; }
.figs > div + div { border-left: 1px solid var(--line); }
.figs dt { font-size: .76rem; color: var(--muted); }
.figs dd { margin: 2px 0 0; font: 400 .9rem var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.figs dd.w { font: 400 .9rem var(--sans); }
.claims { grid-area: claims; padding: 14px 18px 4px; }
.claims h3 { font-size: .8rem; font-weight: 500; color: var(--muted); margin: 0 0 3px; display: flex; align-items: center; gap: 8px; letter-spacing: 0; }
.claims h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.claims p { font: .93rem/1.5 var(--prose); margin: 0 0 12px; }
.claims .hype { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.claims .say { color: var(--ink); }
.r-foot { grid-area: foot; display: flex; justify-content: space-between; align-items: center; padding: 4px 18px 14px; font-size: .86rem; }
.r-foot .sys { color: var(--muted); }
.row .pick { position: relative; z-index: 1; font-size: .85rem; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border: 1px solid var(--line); border-radius: 8px; padding: 4px 11px; }
.row .pick:hover { border-color: var(--line-strong); }
.row .pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.row .pick:has(:checked) { background: color-mix(in srgb, var(--cyan) 16%, transparent); border-color: var(--cyan); color: var(--ink); }
.row .pick:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.row .pick span::before { content: "+"; font-weight: 500; margin-right: 3px; color: var(--cyan); }
.row .pick:has(:checked) span::before { content: "✓"; }
.empty { color: var(--muted); padding: 40px 0; }
.rows.anim .row:not([hidden]) { animation: fade .2s ease-out both; }
@keyframes fade { from { opacity: 0; } }

/* grade tiles: A solid, B outlined, C dashed, D magenta; the meter repeats the order as 4/3/2/1 lit segments */
.grade { display: inline-grid; grid-auto-flow: column; align-items: center; gap: 10px; vertical-align: middle; }
.grade > span { display: none; }
.grade b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; font: 600 1.05rem var(--mono); }
.row .grade b { width: 50px; height: 50px; font-size: 1.4rem; border-radius: 10px; }
.grade.big b { width: 64px; height: 64px; font-size: 1.8rem; border-radius: 12px; }
.grade.gA b { background: var(--cyan); color: var(--on-cyan); box-shadow: var(--glow); }
.grade.gB b { border: 1.5px solid var(--cyan); color: var(--cyan); background: color-mix(in srgb, var(--cyan) 9%, transparent); }
.grade.gC b { border: 1.5px dashed var(--gC); color: var(--ink); }
.grade.gD b { border: 1.5px solid var(--magenta); color: var(--magenta); background: color-mix(in srgb, var(--magenta) 9%, transparent); box-shadow: 0 0 22px -6px var(--magenta); }
.meter { display: inline-flex; gap: 3px; margin-top: 6px; }
.meter i { width: 10px; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--muted) 25%, transparent); }
.meter.gA i { background: var(--cyan); }
.meter.gB i:nth-child(-n+3) { background: var(--cyan); }
.meter.gC i:nth-child(-n+2) { background: var(--muted); }
.meter.gD i:first-child { background: var(--magenta); }

/* FDA status: a glyph per state so it reads without colour */
.status, .fda { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; white-space: nowrap; }
.status::before { content: ""; flex: none; width: 10px; height: 10px; box-sizing: border-box; }
.status.f-approved { color: var(--cyan); } .status.f-approved::before { border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.status.f-trials { color: var(--ink); } .status.f-trials::before { border-radius: 50%; border: 2px solid var(--ink); background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); }
.status.f-cosmetic { color: var(--muted); } .status.f-cosmetic::before { border: 1.5px solid var(--muted); transform: rotate(45deg) scale(.8); }
.status.f-not_approved { color: var(--mag-text); } .status.f-not_approved::before { border-radius: 50%; border: 2px solid var(--magenta); background: linear-gradient(135deg, transparent 43%, var(--magenta) 43%, var(--magenta) 57%, transparent 57%); }

.compare-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: var(--surface-flat); padding: 12px 18px; display: flex; gap: 16px; align-items: center; font-size: .95rem; max-width: calc(100vw - 32px); z-index: 5; border-color: var(--line-strong); box-shadow: var(--shadow), 0 16px 40px -12px rgba(0,0,0,.6); }
.compare-bar[hidden] { display: none; }
.compare-bar .go { color: var(--accent); font-weight: 600; white-space: nowrap; }
.compare-bar .go[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.compare-bar .reset { background: none; border: 0; color: var(--muted); cursor: pointer; }

/* detail page as a record */
.detail { display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-areas: "head head" "toc prose"; column-gap: 56px; row-gap: 40px; margin-top: 8px; }
.dhead { grid-area: head; display: grid; grid-template-columns: minmax(0, 1fr) 190px; grid-template-areas: "text fig" "glance glance"; overflow: hidden; }
.dtext { grid-area: text; padding: 26px 30px 22px; }
.dfig { grid-area: fig; width: 170px; height: 255px; align-self: end; margin: 10px 20px 0 0; }
.dfig .dots path { stroke-width: 2.4px; }
.dfig .dots .b0, .dfig .dots .b1 { opacity: .55; }
.dfig .ring { fill: none; stroke: var(--cyan); stroke-width: 1.2; } .dfig .core { fill: var(--cyan); }
.crumb { color: var(--muted); font-size: .92rem; margin-bottom: 1.4em; }
.crumb a { color: inherit; text-decoration: none; } .crumb a:hover { color: var(--ink); } .crumb span { margin: 0 .4em; opacity: .5; }
.dhead h1 { font-size: clamp(2.5rem, 1.6rem + 3vw, 4.2rem); letter-spacing: -.035em; line-height: 1; margin-bottom: .2em; overflow-wrap: anywhere; }
.dhead .lede { font-size: 1.15rem; color: var(--soft); margin-bottom: .2em; }
.aliases { color: var(--muted); font-size: .95rem; margin: 0; }
.glance { grid-area: glance; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); background: var(--well); }
.glance > div { padding: 16px 22px 18px; }
.glance > div + div { border-left: 1px solid var(--line); }
.glance dt { color: var(--muted); font-size: .82rem; margin-bottom: 8px; }
.glance dd { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.glance dd small { display: block; width: 100%; color: var(--muted); font-size: .85rem; margin-top: -6px; }
.glance .gtext { display: grid; line-height: 1.3; }
.glance .status { font-size: 1.05rem; }
.toc { grid-area: toc; position: sticky; top: 24px; align-self: start; font-size: .95rem; }
.toc ul { list-style: none; margin: 0 0 20px; padding: 0; border-left: 1px solid var(--line); }
.toc li a { display: block; padding: 6px 0 6px 14px; color: var(--muted); text-decoration: none; margin-left: -1px; border-left: 1px solid transparent; }
.toc li a:hover { color: var(--ink); border-left-color: var(--cyan); }
.btn { display: inline-block; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--line-strong); color: var(--ink); text-decoration: none; font-size: .95rem; }
.btn:hover { border-color: var(--cyan); }
.prose { grid-area: prose; max-width: 68ch; font-family: var(--prose); }
.prose h1, .prose h2, .prose h3 { font-family: var(--sans); }
.prose h2 { font-size: 1.6rem; margin-top: 2.4em; }
.prose p, .prose li { font-size: 1.05rem; line-height: 1.68; color: var(--soft); }
.verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.verdict > div { padding: 20px 22px; }
.verdict .finding { border-color: color-mix(in srgb, var(--cyan) 45%, transparent); }
.detail.gD .verdict .finding { border-color: color-mix(in srgb, var(--magenta) 45%, transparent); }
.verdict h2 { font-size: .9rem; color: var(--muted); margin: 0 0 8px; letter-spacing: 0; font-weight: 500; }
.verdict .finding h2 { color: var(--cyan); }
.detail.gD .verdict .finding h2 { color: var(--mag-text); }
.verdict > div p { margin: 0; line-height: 1.58; }
.verdict .finding p { color: var(--ink); }
.verdict .why { grid-column: 1 / -1; margin: 8px 0 0; font-size: 1rem; }
.verdict .why b { color: var(--ink); font-weight: 600; font-family: var(--sans); }
.studies { width: 100%; border-collapse: collapse; font-size: .95rem; margin-top: 16px; }
.studies th { text-align: left; font: 500 .82rem var(--sans); color: var(--muted); border-bottom: 1px solid var(--line-strong); padding: 6px 10px 8px 0; }
.studies td { vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); color: var(--soft); line-height: 1.5; }
.studies td:first-child { font-weight: 500; min-width: 9em; color: var(--ink); }
.faq details { border-bottom: 1px solid var(--line); padding: 13px 0; }
.faq summary { cursor: pointer; font: 500 1.05rem var(--sans); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--cyan); font-family: var(--mono); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 12px 0 4px; }
.cites ol { padding-left: 2.2em; } .cites li { font-size: .9rem; color: var(--muted); margin-bottom: 8px; word-break: break-word; line-height: 1.5; }
.cites li::marker { font-family: var(--mono); font-size: .85em; color: var(--cyan); }
.cites li:target { color: var(--ink); background: color-mix(in srgb, var(--cyan) 12%, transparent); border-radius: 4px; }
.related ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.related li a { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "g n" "g c"; column-gap: 14px; align-items: center; padding: 12px 16px; text-decoration: none; color: var(--ink); }
.related li a:hover { border-color: var(--line-strong); }
.related .grade { grid-area: g; } .related .rname { grid-area: n; font: 600 1.02rem var(--sans); } .related .rcls { grid-area: c; color: var(--muted); font-size: .88rem; }

.compare h1, .about h1 { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.6rem); letter-spacing: -.03em; margin-top: 12px; }
.hint { color: var(--muted); margin-top: 20px; max-width: 60ch; }
.about { max-width: 68ch; }
.about h2 { margin-top: 1.8em; }
.grades { display: grid; grid-template-columns: auto 1fr; gap: 16px 18px; align-items: center; margin: 20px 0; }
.grades dd { margin: 0; }

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; gap: 8px; }
  .hero-text { max-width: 640px; }
}
@media (max-width: 860px) {
  .map { aspect-ratio: auto; perspective: none; overflow: hidden; }
  .body { position: relative; width: 136%; height: auto; margin-left: -18%; aspect-ratio: 900 / 660; }
  .body .halo, .body .rings, .leads { display: none; }
  .syskeys { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: -8%; }
  .syskeys li, .syskeys li.l, .syskeys li.r { position: static; width: auto; transform: none; }
  .detail { grid-template-columns: 1fr; grid-template-areas: "head" "prose"; }
  .toc { display: none; }
  .glance { grid-template-columns: 1fr 1fr; }
  .glance > div:nth-child(3) { border-left: 0; }
  .glance > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .top { padding: 16px; } main { padding: 0 16px 56px; } footer { padding: 24px 16px 40px; }
  .top nav { gap: 2px; } .top nav a { padding: 6px 8px; } .top nav a[href="/glossary/"] { display: none; }
  .brand { font-size: 1rem; gap: 8px; }
  .hero h1 { font-size: 2.5rem; }
  .search { height: 52px; padding: 0 14px; }
  .search input { font-size: .98rem; }
  .syskey { padding: 10px 11px 11px; }
  .sk-name { font-size: .93rem; }
  .toolbar { padding: 12px 14px; }
  .toolbar h2 { font-size: 1.2rem; }
  .selects { margin-left: 0; width: 100%; }
  .selects select { flex: 1 1 40%; font-size: .88rem; padding-right: 28px; }
  .rows { grid-template-columns: 1fr; gap: 14px; }
  .figs > div { padding: 8px 9px; }
  .dhead { grid-template-columns: minmax(0, 1fr) 84px; }
  .dtext { padding: 20px 0 16px 18px; }
  .dfig { width: 84px; height: 126px; margin-right: 8px; }
  .glance > div { padding: 13px 14px 15px; }
  .verdict { grid-template-columns: 1fr; }
  .verdict > div { padding: 16px 18px; }
  .studies, .studies tbody, .studies tr, .studies td { display: block; }
  .studies thead { display: none; }
  .studies tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .studies td { border: 0; padding: 2px 0; }
  .studies td:nth-child(2) { color: var(--muted); font-size: .9rem; }
}

/* motion: one load moment (the cloud resolves band by band, then the nodes light), a slow pulse on the nodes */
.body .floor, .body .grid, .body .rings { animation: fade 1.2s ease-out both; }
.body .dots path { animation: fade .9s ease-out both; }
.body .dots .b1 { animation-delay: .15s; } .body .dots .b2 { animation-delay: .3s; } .body .dots .b3 { animation-delay: .45s; }
.body .halo { animation: fade 1.4s ease-out .5s both; }
.region { animation: fade .5s ease-out both; animation-delay: calc(.8s + var(--i) * 70ms); }
.region .ring { transform-box: fill-box; transform-origin: center; animation: pulse 3.2s ease-in-out 1.6s infinite; }
@keyframes pulse { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: .8; transform: scale(1.6); } }
.syskeys li, .leads { animation: fade .6s ease-out .9s both; }

@media (prefers-reduced-motion: reduce) {
  /* calm branch: nothing moves on its own, nothing loops, state changes cross-fade in 200 ms */
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition-duration: .2s !important; transition-property: opacity, color, background-color, border-color, box-shadow, stroke-width !important; }
  .region .ring { opacity: .6; }
}

/* compare */
.compare .lede { color: var(--muted); max-width: 56ch; margin-bottom: 28px; }
.cslots { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; }
.add-third { grid-column: 1 / -1; justify-self: start; background: none; border: 1px dashed var(--line-strong); border-radius: 999px; padding: 7px 14px; color: var(--muted); cursor: pointer; font-size: .9rem; }
.add-third:hover { color: var(--cyan); border-color: var(--cyan); }
.add-third[hidden], .third[hidden] { display: none; }
.third { grid-column: 1 / -1; }
.cmp.n3 .cmp-head, .cmp.n3 .facet { grid-template-columns: 1fr 1fr 1fr; }
.slot { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; min-height: 96px; box-shadow: var(--shadow); }
.slot.filled { border-color: var(--line-strong); }
.ta { display: block; }
.ta[hidden] { display: none; }
.ta-label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: 6px; }
.ta input { width: 100%; background: var(--well); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 1.05rem; color: var(--ink); outline: none; }
.ta input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 20%, transparent); }
.ta input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ta-list { position: absolute; left: 10px; right: 10px; top: calc(100% - 6px); z-index: 20; margin: 0; padding: 6px; list-style: none; background: var(--surface-flat); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); max-height: 360px; overflow: auto; }
.ta-list[hidden] { display: none; }
.ta-list li { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "g n" "g c"; column-gap: 12px; align-items: center; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.ta-list li .grade { grid-area: g; } .ta-list li .grade b { width: 32px; height: 32px; font-size: .9rem; }
.ta-list li .tn { grid-area: n; font-weight: 600; } .ta-list li .tc { grid-area: c; color: var(--muted); font-size: .85rem; }
.ta-list li:hover, .ta-list li.active { background: color-mix(in srgb, var(--cyan) 12%, transparent); }
.ta-list li.none { display: block; color: var(--muted); cursor: default; }
.picked { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name grade" "class grade" "change grade"; column-gap: 14px; align-items: center; }
.picked[hidden] { display: none; }
.picked .pname { grid-area: name; font: 600 1.35rem var(--sans); color: var(--ink); text-decoration: none; letter-spacing: -.02em; }
.picked .pname:hover { color: var(--cyan); }
.picked .pclass { grid-area: class; color: var(--muted); font-size: .9rem; }
.picked .pgrade { grid-area: grade; display: grid; justify-items: center; }
.picked .change { grid-area: change; justify-self: start; margin-top: 8px; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; color: var(--muted); cursor: pointer; font-size: .85rem; }
.picked .change:hover { color: var(--ink); border-color: var(--line-strong); }
.swap { align-self: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-flat); color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.swap:hover { color: var(--cyan); border-color: var(--line-strong); }
.pairs { margin-top: 26px; }
.pairs[hidden] { display: none; }
.pairs p { color: var(--muted); font-size: .9rem; margin-bottom: 10px; }
.pairs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pairs a { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: .95rem; }
.pairs a span { color: var(--muted); margin: 0 .3em; font-size: .85em; }
.pairs a:hover { border-color: var(--cyan); color: var(--cyan); }
.cmp { margin-top: 32px; }
.cmp-head { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 12px 0; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.cmp-head a { font: 600 1.25rem var(--sans); color: var(--ink); text-decoration: none; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-head a:hover { color: var(--cyan); }
.bottom { margin: 20px 0 8px; padding: 16px 20px; border-left: 3px solid var(--cyan); background: var(--well); border-radius: 0 12px 12px 0; font-size: 1.05rem; line-height: 1.5; }
.facet { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.facet h3 { grid-column: 1 / -1; margin: 0 0 2px; font: 500 .82rem var(--sans); color: var(--muted); letter-spacing: .01em; }
.facet .cell { font: .98rem/1.55 var(--prose); min-width: 0; padding-left: 12px; border-left: 2px solid transparent; }
.facet .cell.lead { border-left-color: var(--cyan); }
.facet .cell p { margin: 8px 0 0; color: var(--soft); }
.facet .cell .gl { display: block; margin-top: 6px; }
.bar { position: relative; height: 26px; display: flex; align-items: center; }
.bar i { display: block; height: 10px; border-radius: 5px; background: var(--cyan-dim); min-width: 4px; }
.bar .num { margin-left: 10px; color: var(--ink); }
.cmp-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 22px 0; }
.cmp-actions .copy { background: var(--cyan); color: var(--on-cyan); border: 0; border-radius: 999px; padding: 9px 18px; font-weight: 600; cursor: pointer; }
@media (max-width: 700px) {
  .cslots { grid-template-columns: 1fr; gap: 10px; }
  .swap { justify-self: center; transform: rotate(90deg); width: 38px; height: 38px; }
  .slot { padding: 14px; min-height: 0; }
  .picked .pname { font-size: 1.15rem; }
  .cmp-head a { font-size: 1rem; }
  .facet { gap: 10px; padding: 14px 0; }
  .facet .cell { font-size: .9rem; padding-left: 8px; }
  .bottom { font-size: .98rem; padding: 12px 14px; }
  .cmp-actions .btn, .cmp-actions .copy { flex: 1 1 100%; text-align: center; }
  .cmp.n3 .facet .cell { font-size: .82rem; padding-left: 6px; }
  .cmp.n3 .cmp-head a { font-size: .9rem; }
}

/* enrichment: uses, checklist, clinician questions, updates, provenance, essays */
.uses { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.uses a { display: inline-block; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--soft); text-decoration: none; font-size: .82rem; }
.uses a:hover { border-color: var(--cyan); color: var(--cyan); }
.prov { color: var(--muted); font-size: .88rem; margin: 14px 0 0; }
.prov-note { color: var(--muted); font-size: .88rem; margin-top: 10px; }
.checklist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.checklist li { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; align-items: start; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--well); }
.checklist .mark { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--muted); position: relative; margin-top: 2px; }
.checklist .yes .mark { border-color: var(--cyan); background: var(--cyan); }
.checklist .yes .mark::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--on-cyan); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.checklist .no .mark { border-color: var(--magenta); }
.checklist .no .mark::before, .checklist .no .mark::after { content: ""; position: absolute; left: 9px; top: 4px; width: 1.5px; height: 10px; background: var(--magenta); transform: rotate(45deg); }
.checklist .no .mark::after { transform: rotate(-45deg); }
.checklist .na .mark::after { content: ""; position: absolute; left: 5px; top: 8.5px; width: 8px; height: 1.5px; background: var(--muted); }
.checklist .ck b { font-weight: 600; }
.checklist .note { display: block; color: var(--muted); font-size: .88rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ask ul { padding-left: 1.2em; } .ask li { margin-bottom: 8px; }
.updates ul { list-style: none; padding: 0; margin: 0; }
.updates li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.updates li .num { color: var(--cyan); margin-right: 10px; }
.essay h1 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem); letter-spacing: -.03em; max-width: 22ch; }
.essay .lede { color: var(--muted); font-size: 1.15rem; }
.essay-list { list-style: none; padding: 0; } .essay-list li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.essay-list a { font-weight: 600; text-decoration: none; }

/* plain-language layer: tooltips, glossary terms, size notes, the "for you" box, the grade key */
[data-tip] { position: relative; }
.tipbtn { width: 20px; height: 20px; line-height: 1; border-radius: 50%; border: 1px solid var(--line-strong); background: none; color: var(--muted); font: 600 .7rem var(--sans); cursor: pointer; vertical-align: middle; margin-left: 4px; padding: 0; }
.tipbtn:hover, .tipbtn:focus-visible { color: var(--cyan); border-color: var(--cyan); }
dfn.g { font-style: normal; text-decoration: underline dotted var(--cyan-dim); text-underline-offset: .2em; cursor: help; }
.n { text-decoration: underline dotted var(--line-strong); text-underline-offset: .2em; cursor: help; }
[data-tip]:hover::after, [data-tip]:focus::after, [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30; width: max-content; max-width: min(300px, 80vw); padding: 10px 12px; border-radius: 10px; background: var(--surface-flat); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); font: 400 .88rem/1.45 var(--sans); white-space: normal; text-decoration: none; pointer-events: none; }
.tipbtn[data-tip]:hover::after, .tipbtn[data-tip]:focus::after { left: 50%; transform: translateX(-50%); }
.plain { grid-column: 1 / -1; font: 500 1.25rem/1.45 var(--sans); letter-spacing: -.01em; color: var(--ink); margin: 0 0 6px; max-width: 40ch; }
.means dl { margin: 0; display: grid; gap: 10px; }
.means dl div { padding: 14px 16px; border-radius: 12px; background: var(--well); border: 1px solid var(--line); }
.means dt { color: var(--muted); font-size: .85rem; margin-bottom: 4px; }
.means dd { margin: 0; font-size: 1.05rem; }
.dist-h { color: var(--muted); font-size: .85rem; margin: 0 0 8px; }
.dist ul { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.dist li { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.dist li .grade b { width: 28px; height: 28px; font-size: .85rem; }
.dist li .dk b { font: 500 .9rem var(--sans); color: var(--ink); margin: 0; }
.dist li .dk .num { color: var(--muted); margin-left: 6px; }
.gloss { display: grid; grid-template-columns: max-content 1fr; gap: 12px 24px; }
.gloss dt { font-weight: 600; } .gloss dd { margin: 0; color: var(--soft); }
@media (max-width: 600px) {
  .dist ul { grid-template-columns: 1fr; }
  .gloss { grid-template-columns: 1fr; gap: 4px; } .gloss dd { margin-bottom: 12px; }
  .plain { font-size: 1.1rem; }
}