:root {
  color-scheme: light dark;
  --background: light-dark(#ffffff, #181818);
  --foreground: light-dark(#1a1c1f, #ffffff);
  --card: color-mix(in srgb, var(--foreground) 5%, transparent);
  --card-foreground: var(--foreground);
  --primary: light-dark(#339cff, #83c3ff);
  --primary-foreground: light-dark(#ffffff, #0d0d0d);
  --secondary: light-dark(rgba(255,255,255,.96), rgba(54,54,54,.96));
  --secondary-foreground: var(--foreground);
  --muted-foreground: light-dark(rgba(26,28,31,.62), rgba(255,255,255,.64));
  --destructive: light-dark(#c44908, #ff8549);
  --border: light-dark(rgba(26,28,31,.12), rgba(255,255,255,.12));
  --input: light-dark(rgba(26,28,31,.16), rgba(255,255,255,.16));
  --ring: var(--primary);
  --viz-series-1: var(--primary);
  --viz-series-2: light-dark(#f3883b, #f59a56);
  --viz-series-6: light-dark(#3ab9b1, #5acbc2);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-size-base: 14px;
  --font-size-small: 12px;
  --font-weight-medium: 600;
  --radius-sm: 6px;
  --radius-lg: 10px;
  --radius-2xl: 16px;
  --radius-full: 9999px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  padding: 16px;
  color: var(--foreground);
  background: var(--background);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.5;
}
a { color: color-mix(in srgb, var(--primary) 82%, var(--foreground) 18%); }
h1,h2,h3,h4,p { margin: 0; }
h1 { font-size: clamp(1.55rem, 3vw, 2.15rem); line-height: 1.2; }
h3 { font-size: clamp(1.12rem, 2vw, 1.4rem); line-height: 1.3; }
h4 { font-size: 1.05rem; line-height: 1.3; }
button { font: inherit; }
.card {
  min-width: 0;
  padding: 12px;
  overflow: hidden;
  overflow-wrap: break-word;
  border-radius: var(--radius-2xl);
  color: var(--card-foreground);
  background: var(--card);
}
.text-small { font-size: var(--font-size-small); line-height: 1.45; }
.text-muted { color: var(--muted-foreground); }
.viz-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.viz-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 12px; }
.viz-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  color: var(--foreground);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.btn {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--input);
  border-radius: var(--radius-lg);
  color: var(--secondary-foreground);
  background: var(--secondary);
  cursor: pointer;
}
.btn:not(:disabled):hover { background: color-mix(in srgb,var(--foreground) 7%,var(--secondary)); }
.btn-primary { border-color: transparent; color: var(--primary-foreground); background: var(--primary); }
.btn-primary:not(:disabled):hover { background: color-mix(in srgb,var(--primary) 84%,var(--foreground)); }
.btn-ghost { border-color: transparent; color: var(--muted-foreground); background: transparent; }
.btn:disabled { cursor: not-allowed; opacity: .45; }
.btn[aria-pressed="true"], .btn[aria-selected="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.btn:focus-visible, a:focus-visible, [tabindex="0"]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
svg { display: block; max-width: 100%; height: auto; }
@media (max-width: 560px) { body { padding: 10px; } }

#cell-architecture {
    width: 100%;
    color: var(--foreground);

    /* material colours, tuned to read on both the light and dark surface */
    --ca-copper: light-dark(#c07f42, #b87333);
    --ca-graphite: light-dark(#6b7d86, #46565e);
    --ca-polymer: light-dark(#ded8ab, #cdc79a);
    --ca-oxide: light-dark(#5aa98d, #4f987f);
    --ca-aluminium: light-dark(#b9c8d1, #a8bbc5);
    --ca-liquid: light-dark(#3f8bb4, #4a97bf);
  }

  /* ---------- header ---------- */
  #cell-architecture .ca-title { margin-bottom: 3px; }
  #cell-architecture .ca-subtitle { max-width: 84ch; }
  #cell-architecture .ca-scope {
    max-width: 84ch;
    margin-top: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--destructive);
    background: color-mix(in srgb, var(--destructive) 7%, transparent);
    color: var(--muted-foreground);
  }

  #cell-architecture .ca-step-title { margin-top: 30px; }
  #cell-architecture .ca-step-intro { max-width: 84ch; margin-top: 2px; }

  /* ---------- rail ---------- */
  #cell-architecture .ca-rail {
    position: sticky; top: 6px; z-index: 20;
    display: grid; grid-template-columns: auto 1fr auto;
    gap: 12px; align-items: center;
    margin-top: 16px; padding: 10px 12px;
    background: var(--background);
    border: 1px solid var(--border);
  }
  #cell-architecture .ca-rail-label {
    color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .1em;
    font-weight: var(--font-weight-medium);
  }
  #cell-architecture .ca-mini-stack {
    display: grid; grid-template-columns: .35fr 1.3fr .5fr 1.3fr .35fr; gap: 4px; height: 34px;
  }
  #cell-architecture .ca-mini {
    min-width: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm);
  }
  #cell-architecture .ca-mini[aria-current="true"] {
    outline: 2px solid var(--primary); outline-offset: 2px;
  }
  #cell-architecture .ca-rail-location { font-weight: var(--font-weight-medium); white-space: nowrap; }

  /* ---------- layer skins (shared by tiles and rail) ---------- */
  #cell-architecture .skin-1 { background: linear-gradient(160deg,#e7ac78,#b87333 58%,#733913); }
  #cell-architecture .skin-2 { background: linear-gradient(160deg,#5f6f77,#46565e 55%,#26353c); }
  #cell-architecture .skin-3 { background: repeating-linear-gradient(45deg,#ece7c6,#ece7c6 7px,#bbb58e 7px,#bbb58e 11px); }
  #cell-architecture .skin-4 { background: linear-gradient(160deg,#6eb198,#4f987f 55%,#265e4d); }
  #cell-architecture .skin-5 { background: linear-gradient(160deg,#e0e7ea,#a8bbc5 58%,#687b85); }

  /* ---------- assembly ---------- */
  #cell-architecture .ca-assembly {
    display: grid; grid-template-columns: 1.35fr .65fr; gap: 12px; margin-top: 12px;
  }
  #cell-architecture .ca-stage-head {
    display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 10px;
  }
  #cell-architecture .ca-layer-stack {
    display: grid; grid-template-columns: .38fr 1.35fr .52fr 1.35fr .38fr; gap: 7px; min-height: 310px;
  }
  #cell-architecture .ca-tile {
    position: relative; display: flex; flex-direction: column;
    justify-content: space-between; align-items: center;
    padding: 10px 5px; min-height: 0;
    border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-lg);
    opacity: .16; transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease;
  }
  #cell-architecture .ca-tile.is-revealed { opacity: 1; transform: none; }
  #cell-architecture .ca-tile[aria-pressed="true"] {
    outline: 3px solid var(--primary); outline-offset: 3px;
  }
  #cell-architecture .ca-tile .ca-num {
    display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px;
    border-radius: 50%; background: rgba(7,19,29,.82); color: #edf6f8;
    font-size: var(--font-size-small); font-weight: 700;
  }
  #cell-architecture .ca-tile .ca-name {
    writing-mode: vertical-rl; transform: rotate(180deg);
    padding: 2px 4px; border-radius: var(--radius-sm);
    background: rgba(7,19,29,.72); color: #edf6f8;
    font-weight: var(--font-weight-medium);
  }
  /* Captions and labels sit on a scrim: the tile gradients are mid-tone, so no
     single ink colour clears 4.5:1 on all five. */
  #cell-architecture .ca-tile .ca-cap {
    padding: 2px 7px; border-radius: var(--radius-full);
    background: rgba(7,19,29,.82); color: #edf6f8;
    font-size: var(--font-size-small); font-weight: var(--font-weight-medium);
  }

  #cell-architecture .ca-controls { margin-top: 12px; }
  #cell-architecture .ca-progress {
    margin-top: 12px; padding: 10px 12px;
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
  }

  #cell-architecture .ca-info h4 { margin-top: 2px; }
  #cell-architecture .ca-dd { display: grid; gap: 10px; margin: 12px 0 0; }
  #cell-architecture .ca-dl > div { padding-top: 10px; border-top: 1px solid var(--border); }
  #cell-architecture .ca-dl dt {
    color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .08em;
    font-weight: var(--font-weight-medium);
  }
  #cell-architecture .ca-dl dd { margin: 3px 0 0; }

  /* ---------- callout note ---------- */
  #cell-architecture .ca-note {
    margin-top: 16px; padding: 12px 14px;
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--viz-series-6);
    background: color-mix(in srgb, var(--viz-series-6) 8%, transparent);
  }
  #cell-architecture .ca-note > p { margin-top: 6px; max-width: 84ch; }
  #cell-architecture .ca-note-tight { margin-top: 12px; }

  #cell-architecture .ca-liquid-map {
    display: grid; grid-template-columns: .38fr 1.35fr .52fr 1.35fr .38fr;
    gap: 7px; height: 92px; margin: 10px 0;
  }
  #cell-architecture .ca-liquid {
    position: relative; overflow: hidden;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
  }
  #cell-architecture .ca-liquid.dry { background: color-mix(in srgb, var(--foreground) 5%, transparent); }
  #cell-architecture .ca-liquid.wet {
    background: linear-gradient(color-mix(in srgb, var(--ca-liquid) 42%, transparent), color-mix(in srgb, var(--ca-liquid) 42%, transparent)),
                radial-gradient(circle at 20% 20%, var(--viz-series-1) 0 3px, transparent 4px);
    background-size: auto, 25px 25px;
  }
  #cell-architecture .ca-liquid.wet-sep {
    background: repeating-linear-gradient(90deg, var(--ca-polymer) 0 8px, color-mix(in srgb, var(--ca-liquid) 60%, transparent) 8px 14px);
  }
  #cell-architecture .ca-liquid[data-wet]::after {
    content: attr(data-wet);
    position: absolute; inset: auto 4px 5px;
    padding: 2px; border-radius: var(--radius-sm);
    background: rgba(7,19,29,.82); color: #edf6f8;
    font-size: max(9px, calc(var(--font-size-base) - 5px)); font-weight: 600; text-align: center;
  }

  /* ---------- zoom ---------- */
  #cell-architecture .ca-zoom {
    display: grid; grid-template-columns: .68fr 1.32fr; gap: 12px; margin-top: 12px;
  }
  #cell-architecture .ca-choice {
    display: block; width: 100%; margin-top: 6px; padding: 9px 12px;
    border: 1px solid var(--input); border-radius: var(--radius-lg);
    background: var(--secondary); color: var(--foreground);
    text-align: left; font: inherit; font-weight: var(--font-weight-medium);
    cursor: pointer;
  }
  #cell-architecture .ca-choice:hover { background: color-mix(in srgb, var(--foreground) 6%, var(--secondary)); }
  #cell-architecture .ca-choice[aria-pressed="true"] {
    border-color: var(--primary); box-shadow: inset 3px 0 0 var(--primary);
  }
  #cell-architecture .ca-choice:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

  #cell-architecture .ca-panel h4 { margin-top: 2px; }
  #cell-architecture .ca-visual {
    position: relative; min-height: 290px; overflow: hidden;
    margin: 12px 0 8px;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--foreground) 4%, transparent);
  }
  #cell-architecture .ca-visual [data-tooltip] { cursor: help; }
  #cell-architecture .ca-visual [data-tooltip]:hover,
  #cell-architecture .ca-visual [data-tooltip]:focus-visible {
    filter: brightness(1.15); outline: 2px solid var(--ring); outline-offset: 2px;
  }
  #cell-architecture .ca-helper { margin-bottom: 8px; }
  #cell-architecture .ca-readout {
    min-height: 62px; padding: 9px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--foreground) 3%, transparent);
  }
  #cell-architecture .ca-readout-label {
    color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .08em;
    font-weight: var(--font-weight-medium);
  }
  #cell-architecture .ca-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  #cell-architecture .ca-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 9px; border-radius: var(--radius-full);
    border: 1px solid var(--border); background: color-mix(in srgb, var(--foreground) 3%, transparent);
    font-size: var(--font-size-small);
  }
  #cell-architecture .ca-swatch { display: inline-block; width: 13px; height: 13px; flex: 0 0 13px; border-radius: 50%; }

  #cell-architecture .ca-crumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin-top: 12px; padding: 8px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--foreground) 3%, transparent);
  }
  #cell-architecture .ca-sep { color: var(--primary); font-weight: var(--font-weight-medium); }

  /* zoom contents */
  #cell-architecture .ca-foil {
    position: absolute; inset: 12% 32%; border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
  }
  #cell-architecture .ca-foil.copper { background: linear-gradient(90deg,#713613,#e6a66e 48%,#b87333 72%,#5d2b0d); }
  #cell-architecture .ca-foil.aluminium { background: linear-gradient(90deg,#687b85,#e0e7ea 48%,#a8bbc5 72%,#596b75); }

  #cell-architecture .ca-composite {
    position: absolute; inset: 7%; overflow: hidden;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--ca-liquid) 22%, transparent);
  }
  #cell-architecture .ca-grain { position: absolute; border: 2px solid rgba(255,255,255,.18); }
  /* graphite reads as stacked sheets; the oxide reads as a faceted grain */
  #cell-architecture .ca-grain.graphite {
    border-radius: 6px;
    background: repeating-linear-gradient(0deg,#74858e 0 4px,#39474e 4px 9px);
  }
  #cell-architecture .ca-grain.oxide {
    border-radius: 44% 56% 52% 48%;
    background: radial-gradient(circle at 34% 28%,#8fd9bd,#4f987f 62%,#1f4d3f);
  }
  #cell-architecture .ca-grain.g1 { width: 104px; height: 88px; left: 8%; top: 15%; }
  #cell-architecture .ca-grain.g2 { width: 90px; height: 104px; left: 42%; top: 8%; }
  #cell-architecture .ca-grain.g3 { width: 116px; height: 84px; right: 7%; top: 28%; }
  #cell-architecture .ca-grain.g4 { width: 98px; height: 92px; left: 25%; bottom: 8%; }
  #cell-architecture .ca-grain.g5 { width: 84px; height: 78px; right: 22%; bottom: 7%; }
  #cell-architecture .ca-carbon {
    position: absolute; width: 13px; height: 13px; border-radius: 50%;
    background: #0c0c0c; box-shadow: 0 0 0 2px rgba(255,255,255,.16);
  }
  #cell-architecture .ca-binder {
    position: absolute: height: 4px; border-radius: var(--radius-full);
    background: var(--viz-series-2); transform-origin: left center;
  }
  #cell-architecture .ca-poreion {
    position: absolute; display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--viz-series-1); color: var(--primary-foreground);
    font-size: var(--font-size-small); font-weight: 700;
  }
  #cell-architecture .ca-separator {
    position: absolute: inset: 8%; border-radius: var(--radius-lg);
    background: repeating-linear-gradient(90deg, var(--ca-polymer) 0 18px, color-mix(in srgb, var(--ca-liquid) 62%, transparent) 18px 30px);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.14);
  }

  /* ---------- lock ---------- */
  #cell-architecture .ca-lock {
    display: grid; justify-items: center; gap: 6px;
    margin-top: 12px; padding: 24px; text-align: center;
  }
  #cell-architecture .ca-lock p { max-width: 62ch; }
  #cell-architecture .ca-lock .btn { margin-top: 6px; }

  /* ---------- molecules ---------- */
  #cell-architecture .ca-mol-layout {
    display: grid; grid-template-columns: 1.25fr .75fr; gap: 12px; margin-top: 12px;
  }
  #cell-architecture .ca-tabs { margin: 12px 0; }
  #cell-architecture .ca-mol-svg {
    width: 100%; min-height: 320px;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--foreground) 4%, transparent);
  }
  #cell-architecture .ca-bond { stroke: light-dark(#5c6a70, #c9d6db); stroke-width: 4; stroke-linecap: round; }
  #cell-architecture .ca-atom circle { stroke: var(--background); stroke-width: 2; }
  #cell-architecture .ca-atom text {
    fill: #07131d; font-size: 17px; font-weight: 700;
    text-anchor: middle; dominant-baseline: middle;
  }
  #cell-architecture .ca-atom.oxygen circle { fill: #ff8b8b; }
  #cell-architecture .ca-atom.carbon circle { fill: #b9c8cf; }
  #cell-architecture .ca-formula {
    color: var(--primary); font-size: var(--font-size-h3); font-weight: var(--font-weight-medium);
  }

  /* ---------- salt lab ---------- */
  #cell-architecture .ca-salt {
    display: grid; grid-template-columns: .82fr 1.18fr; gap: 14px;
    align-items: start; margin-top: 12px;
  }
  #cell-architecture .ca-salt h4 { margin-top: 2px; }
  #cell-architecture .ca-salt-steps {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0;
  }
  #cell-architecture .ca-change { display: grid; gap: 8px; margin-top: 12px; }
  #cell-architecture .ca-change > div {
    display: grid; gap: 2px; padding: 9px 11px;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--foreground) 3%, transparent);
  }
  #cell-architecture .ca-change-label {
    color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .08em;
    font-weight: var(--font-weight-medium);
  }

  #cell-architecture .ca-salt-visual { display: grid; gap: 10px; }
  #cell-architecture .ca-salt-stage {
    position: relative; min-height: 430px; overflow: hidden;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--ca-liquid) 14%, transparent), transparent 44%),
                color-mix(in srgb, var(--foreground) 4%, transparent);
  }
  #cell-architecture .ca-stage-tag {
    position: absolute; left: 12px; top: 10px; z-index: 5;
    padding: 3px 9px; border-radius: var(--radius-full);
    border: 1px solid var(--border); background: var(--background);
    color: var(--primary); font-weight: var(--font-weight-medium);
  }
  #cell-architecture .ca-stage-note { position: absolute; right: 12px; top: 12px; z-index: 5; }
  #cell-architecture .ca-ion {
    position: absolute; z-index: 4; display: grid; place-items: center;
    width: 62px; height: 62px; border-radius: 50%;
    font-weight: 700; transform: translate(-50%, -50%);
    transition: left .7s ease, top .7s ease, box-shadow .35s ease;
  }
  #cell-architecture .ca-ion-li { background: var(--viz-series-1); color: var(--primary-foreground); }
  #cell-architecture .ca-ion-pf { background: var(--viz-series-2); color: #2c1600; }
  #cell-architecture .ca-salt-stage[data-step="0"] .ca-ion-li { left: 47%; top: 50%; }
  #cell-architecture .ca-salt-stage[data-step="0"] .ca-ion-pf { left: 54%; top: 50%; }
  #cell-architecture .ca-salt-stage:not([data-step="0"]) .ca-ion-li { left: 28%; top: 51%; }
  #cell-architecture .ca-salt-stage:not([data-step="0"]) .ca-ion-pf { left: 74%; top: 51%; }
  #cell-architecture .ca-salt-stage[data-step="2"] .ca-ion {
    box-shadow: 0 0 0 12px color-mix(in srgb, var(--foreground) 4%, transparent);
  }
  #cell-architecture .ca-assoc {
    position: absolute; z-index: 3; left: 48%; top: 50%; width: 7%;
    border-top: 3px dotted var(--muted-foreground);
    transform: translateY(-50%); transition: opacity .3s ease;
  }
  #cell-architecture .ca-salt-stage:not([data-step="0"]) .ca-assoc { opacity: 0; }

  /* Orientation uses flex-direction, never rotation: rotating the pill mirrors
     its text. The O end always faces the ion it coordinates to. */
  #cell-architecture .ca-solvent {
    position: absolute; z-index: 2; display: flex; align-items: center;
    padding: 2px; border-radius: var(--radius-full);
    background: light-dark(#f1f5f7, #e5eef2); color: #082031;
    box-shadow: var(--shadow-sm);
    transform: translate(-50%, -50%);
    left: var(--x0); top: var(--y0);
    transition: left .75s ease, top .75s ease;
  }
  #cell-architecture .ca-salt-stage[data-step="1"] .ca-solvent { left: var(--x1); top: var(--y1); }
  #cell-architecture .ca-salt-stage[data-step="2"] .ca-solvent { left: var(--x2); top: var(--y2); }
  #cell-architecture .ca-salt-stage[data-step="2"] .ca-solvent[data-face="left"]  { flex-direction: row; }
  #cell-architecture .ca-salt-stage[data-step="2"] .ca-solvent[data-face="right"] { flex-direction: row-reverse; }
  #cell-architecture .ca-salt-stage[data-step="2"] .ca-solvent[data-face="up"]    { flex-direction: column; }
  #cell-architecture .ca-salt-stage[data-step="2"] .ca-solvent[data-face="down"]  { flex-direction: column-reverse; }
  #cell-architecture .ca-salt-stage[data-step="2"] .ca-solvent.is-weak { opacity: .55; }
  #cell-architecture .ca-solvent .end-o,
  #cell-architecture .ca-solvent .end-d {
    display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    font-size: var(--font-size-small); font-weight: 700;
  }
  #cell-architecture .ca-solvent .end-o { background: #ff8b8b; color: #401010; }
  #cell-architecture .ca-solvent .end-d { background: #cbd8de; color: #24343c; }
  #cell-architecture .ca-solvent .end-b {
    padding: 0 7px; font-size: var(--font-size-small); font-weight: 700;
  }

  #cell-architecture .ca-salt-info {
    display: grid; gap: 8px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--foreground) 3%, transparent);
  }
  #cell-architecture .ca-key {
    display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%;
    color: #07131d; font-size: max(9px, calc(var(--font-size-base) - 5px)); font-weight: 700; font-style: normal;
  }
  #cell-architecture .ca-key-o { background: #ff8b8b; }
  #cell-architecture .ca-key-d { background: #cbd8de; }

  /* ---------- transport ---------- */
  #cell-architecture .ca-transport { margin-top: 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  #cell-architecture .ca-list { margin: 10px 0 0; padding-left: 18px; color: var(--muted-foreground); }
  #cell-architecture .ca-list li + li { margin-top: 6px; }
  #cell-architecture .ca-list strong { color: var(--foreground); }

  /* ---------- responsive ---------- */
  @media (max-width: 900px) {
    #cell-architecture .ca-assembly,
    #cell-architecture .ca-zoom,
    #cell-architecture .ca-mol-layout,
    #cell-architecture .ca-salt { grid-template-columns: 1fr; }
    #cell-architecture .ca-rail { grid-template-columns: 1fr; }
    #cell-architecture .ca-rail-location { white-space: normal; }
    #cell-architecture .ca-rail-label { display: none; }
    #cell-architecture .ca-scroll { overflow-x: auto; scrollbar-width: thin; }
    #cell-architecture .ca-layer-stack,
    #cell-architecture .ca-liquid-map { min-width: 640px; }
    #cell-architecture .ca-mini-stack { min-width: 240px; }
  }

  @media (prefers-reduced-motion: reduce) {
    #cell-architecture .ca-tile,
    #cell-architecture .ca-ion,
    #cell-architecture .ca-solvent,
    #cell-architecture .ca-assoc { transition: none; }
  }


/* Repository-page additions */
.ca-skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 8px 12px;
  border-radius: var(--radius-lg);
  color: var(--primary-foreground);
  background: var(--primary);
}
.ca-skip-link:focus { top: 12px; }
#cell-architecture .ca-module-nav { margin-bottom: 8px; }
#cell-architecture .ca-module-nav a { margin-left: 2px; }