/* Cellfig home. Tokens follow design/direction-A/DESIGN.md ("Proof"). */
:root {
  color-scheme: light dark;
  --paper: #F6F3EA; --panel: #FBF9F3; --sunk: #EDE8DB;
  --line: #D9D2C0; --line-strong: #BDB59F;
  --ink: #1D2125; --ink-2: #4A4F55; --ink-3: #62666B;
  --accent: #0E5A57; --accent-hover: #0A4644; --accent-press: #073533; --tint: #DCEBE8; --on-accent: #FFFFFF;
  --warn-bg: #FCE98A; --warn-edge: #C9A400; --warn-ink: #1D2125; --warn-hatch: rgba(201,164,0,.4);
  --err: #B3261E;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --t: 140ms ease;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #16181A; --panel: #1C1F21; --sunk: #101213;
    --line: #34393C; --line-strong: #4C5357;
    --ink: #E8E4D8; --ink-2: #B5B2A6; --ink-3: #8E8C83;
    --accent: #5FB8AF; --accent-hover: #7CC9C1; --accent-press: #4A9F96; --tint: #1D3533; --on-accent: #0B1F1E;
    --warn-bg: #4A3F0F; --warn-edge: #B89B10; --warn-ink: #F5E27A; --warn-hatch: rgba(184,155,16,.35);
    --err: #FF8A80;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 24px; }
a { color: inherit; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color var(--t); }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hp { position: absolute; left: -9999px; }
.wrap { width: min(100%, 1344px); margin-inline: auto; padding-inline: 32px; }

/* top */
.top { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
.brand { display: block; }
.brand img { height: 28px; width: auto; }
.top nav { display: flex; gap: 28px; font-size: 14px; color: var(--ink-2); }
.top nav a { text-decoration: none; }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; padding-block: 24px 32px; }
h1 { font: 600 44px/48px var(--serif); letter-spacing: -.01em; text-wrap: balance; max-width: 15.5em; }
.lede { font: 400 17px/26px var(--serif); color: var(--ink); max-width: 34em; }

/* form */
.notify { margin-top: 16px; position: relative; }
.fields { display: flex; gap: 8px; }
.fields input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px; font: 400 15px/24px var(--sans); color: var(--ink); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 2px; transition: border-color var(--t); }
.fields input::placeholder { color: var(--ink-3); }
.fields input:hover { border-color: var(--ink-3); }
.fields input:focus-visible { outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.fields input[aria-invalid="true"] { border-color: var(--err); }
.fields button, .btn { height: 44px; padding: 0 16px; flex: none; font: 500 15px/24px var(--sans); color: var(--on-accent); background: var(--accent); border: 0; border-radius: 2px; cursor: pointer; transition: background-color var(--t); }
.fields button:hover, .btn:hover { background: var(--accent-hover); }
.fields button:active, .btn:active { background: var(--accent-press); }
.fields button[disabled] { opacity: .4; cursor: default; }
.status { margin-top: 8px; font-size: 13px; line-height: 20px; color: var(--ink-3); min-height: 20px; }
.status.is-ok { color: var(--ink); font-weight: 500; }
.status.is-err { color: var(--err); }

/* product frame */
.frame { background: var(--panel); border: 1px solid var(--line); }
.frame-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.frame-title { font: 600 14px/20px var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frame-count { flex: none; font-size: 13px; line-height: 20px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.frame-count b { font-weight: 600; color: var(--ink); }
.frame-body { display: grid; grid-template-columns: minmax(0, 1fr) 368px; align-items: start; }
.surround { background: var(--sunk); padding: 24px; }
.paper { background: #FFF; border: 1px solid rgba(29,33,37,.1); overflow: hidden; }
.fig svg { width: 100%; height: auto; color: #1D2125; }
.fig text { font-family: var(--sans); }
.fig-phone { display: none; }
/* Phone layout: the arm heading rule would cross the first arrow. Heading stays, rule goes. */
.fig-phone .arm + line { display: none; }
.reveal { display: none; }

/* figure states */
.paper .edge { transition: opacity var(--t); cursor: pointer; }
.paper .edge-line { transition: stroke var(--t), stroke-width var(--t); }
.paper .edge:hover .edge-line { stroke: #0E5A57; stroke-width: 2.25; }
.paper svg.has-sel .edge:not(.is-sel) { opacity: .3; }
.paper .edge.is-sel .edge-line { stroke: #0E5A57; stroke-width: 2.5; }
.paper .edge.is-sel polygon, .paper .edge.is-sel circle:not([fill="#FFFFFF"]) { fill: #0E5A57; stroke: #0E5A57; }
.paper .word { transition: fill var(--t), opacity var(--t); }
.paper svg.has-sel .word:not(.is-sel) { opacity: .4; }
.paper .word.is-sel { fill: #0E5A57; font-weight: 500; }
.is-swapped .edge[data-edge="e6"] .edge-line { stroke-dasharray: none; }

/* check panel */
.check { border-left: 1px solid var(--line); padding: 16px; min-height: 0; height: var(--panel-h, auto); overflow-y: auto; scrollbar-width: thin; scrollbar-gutter: stable; }
.check-title { font: 600 15px/22px var(--sans); }
.check-sub { margin-top: 16px; font: 500 13px/20px var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.items { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.items-ok { gap: 0; margin-top: 4px; }
.item { border: 1px solid var(--line); background: var(--paper); transition: border-color var(--t); }
.items-ok .item { border-color: transparent; background: none; }
.item.is-open { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--panel); }
.item-head { display: block; width: 100%; padding: 10px 12px; text-align: left; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; transition: background-color var(--t); }
.items-ok .item-head { padding-block: 6px; }
.item-head:hover { background: var(--sunk); }
.item.is-open .item-head:hover { background: none; }
.tag { display: inline-block; padding: 0 6px; margin-bottom: 4px; font: 500 12px/20px var(--sans); color: var(--warn-ink); background: var(--warn-bg) repeating-linear-gradient(135deg, var(--warn-hatch) 0 1px, transparent 1px 5px); border: 1px solid var(--warn-edge); border-radius: 2px; }
.tag.is-done { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.triple { display: block; font-size: 13px; line-height: 20px; font-weight: 500; }
.triple i { font-style: normal; font-weight: 400; color: var(--ink-2); padding-inline: 2px; }
.triple em { font-style: italic; }
.item:not(.is-open) .item-body { display: none; }
.item-body { padding: 0 12px 12px; }
.item-body blockquote { font: 400 14px/22px var(--serif); }
.item-body mark { color: inherit; background: var(--tint); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding-inline: 1px; }
.why { margin-top: 8px; font-size: 13px; line-height: 20px; color: var(--ink-2); }
.acts { margin-top: 12px; display: flex; align-items: center; gap: 12px; }
.acts .btn { height: 36px; padding: 0 12px; font-size: 13px; }
.link { padding: 0; font: inherit; font-size: 13px; color: var(--ink); background: none; border: 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.link:hover { color: var(--accent); }
.acts [hidden] { display: none; }

.cite { margin-top: 12px; max-width: 86ch; font-size: 13px; line-height: 20px; color: var(--ink-3); }

/* bands */
.band { padding-block: 96px 0; }
h2 { font: 600 30px/36px var(--serif); letter-spacing: -.005em; text-wrap: balance; }
.band-head { max-width: 42em; }
.band-head p, .split-copy p { margin-top: 12px; font: 400 17px/28px var(--serif); color: var(--ink); max-width: 68ch; }
.split-copy p + p { margin-top: 16px; }

/* reading */
.reading { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
.abstract blockquote { font: 400 18px/32px var(--serif); max-width: 68ch; }
.abstract em { font-style: italic; }
.abstract sup { font: 600 11px/1 var(--sans); color: var(--accent); padding-left: 1px; }
.in { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-skip-ink: none; }
.out { text-decoration: underline dashed; text-decoration-color: var(--ink-3); text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-skip-ink: none; transition: background-color var(--t); }
.out.is-hot { background: var(--warn-bg); color: var(--warn-ink); }
.key { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; line-height: 20px; color: var(--ink-2); }
.key span { display: inline-flex; align-items: center; gap: 8px; }
.sw { display: inline-block; width: 24px; }
.sw-in { border-top: 2px solid var(--accent); }
.sw-out { border-top: 1px dashed var(--ink-3); }
.left-out { position: sticky; top: 24px; }
.left-out h3 { font: 600 20px/28px var(--serif); }
#notes { margin-top: 12px; counter-reset: n; }
#notes li { counter-increment: n; position: relative; padding: 10px 8px 10px 28px; font-size: 15px; line-height: 22px; border-radius: 2px; transition: background-color var(--t); }
#notes li::before { content: counter(n); position: absolute; left: 8px; top: 10px; font: 600 12px/22px var(--sans); color: var(--accent); }
#notes li.is-hot, #notes li:hover { background: var(--sunk); }
.after { margin-top: 12px; padding-left: 8px; font-size: 13px; line-height: 20px; color: var(--ink-2); }

/* export */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.formats { margin-top: 24px; }
.formats div { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding-block: 8px; font-size: 14px; line-height: 22px; }
.formats dt { font-weight: 500; }
.formats dd { color: var(--ink-2); }
.code { background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.code figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 16px; font-size: 13px; line-height: 20px; font-weight: 500; border-bottom: 1px solid var(--line); }
.code figcaption span { font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.code pre { margin: 0; padding: 16px; overflow-x: auto; font: 400 13px/22px var(--mono); color: var(--ink-2); scrollbar-width: thin; }
.code b { font-weight: 500; color: var(--accent); }
.code .o { color: var(--ink-3); }

/* icon sources */
.sources { margin-top: 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.spec { height: 168px; display: grid; place-items: center; background: #FFF; border: 1px solid rgba(29,33,37,.1); padding: 16px; }
.spec img { max-height: 136px; width: auto; height: auto; max-width: 100%; }
.sources h3 { margin-top: 12px; font: 500 15px/22px var(--sans); }
.sources p { margin-top: 2px; font-size: 13px; line-height: 20px; color: var(--ink-2); }
.split-tight { margin-top: 48px; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.statement { background: var(--panel); border: 1px solid var(--line); padding: 16px; }
.statement figcaption { font-size: 13px; line-height: 20px; font-weight: 500; }
.statement p { margin-top: 8px; font: 400 15px/24px var(--serif); }

/* biomedicine */
.rules { margin-top: 32px; }
.rules > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; padding-block: 16px; }
.rules dt { font: 500 15px/24px var(--sans); }
.rules dd p { font: 400 16px/26px var(--serif); max-width: 62ch; }
.marks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; margin-bottom: 12px; font-size: 13px; line-height: 20px; }
.marks li { display: flex; align-items: center; gap: 12px; }
.marks svg { flex: none; overflow: visible; }
.marks path, .marks circle { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.marks .f { fill: var(--ink); stroke: none; }
.marks .p { fill: var(--paper); }
.marks text { font: 600 9px/1 var(--sans); fill: var(--ink); }

/* faq */
.faq { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
.faq h3 { font: 600 20px/28px var(--serif); }
.faq p { margin-top: 6px; font: 400 16px/26px var(--serif); color: var(--ink); max-width: 62ch; }

/* close */
.close { padding-block: 96px 72px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
.close .notify { margin-top: 0; }
.foot { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-block: 24px 40px; font-size: 13px; line-height: 20px; color: var(--ink-3); }

@media (max-width: 1099px) {
  .frame-body { grid-template-columns: minmax(0, 1fr); }
  .check { border-left: 0; border-top: 1px solid var(--line); height: auto; overflow: visible; scrollbar-gutter: auto; }
  .hero, .reading, .split, .split-tight, .close { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .left-out { position: static; }
  .rules > div { gap: 8px; grid-template-columns: minmax(0, 1fr); }
  .band { padding-block-start: 72px; }
  .sources { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .item-head { min-height: 44px; }
}
@media (max-width: 720px) {
  .wrap { padding-inline: 16px; }
  .top { height: 60px; }
  .top nav { display: none; }
  .hero { padding-block: 8px 24px; gap: 12px; }
  h1 { font-size: 32px; line-height: 38px; }
  h2 { font-size: 26px; line-height: 32px; }
  .fields { flex-direction: column; }
  .fields button { width: 100%; }
  .frame { margin-inline: -16px; border-inline: 0; }
  .frame-bar { height: auto; flex-direction: column; align-items: flex-start; gap: 0; padding-block: 8px; }
  .frame-title { white-space: normal; }
  .surround { padding: 8px; }
  .fig-wide { display: none; }
  .fig-phone { display: block; }
  .paper.is-capped { height: 440px; position: relative; }
  .paper.is-capped .fig-phone { transition: transform 240ms ease; }
  .paper.is-capped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32px; background: linear-gradient(to bottom, rgba(255,255,255,0), #FFF); pointer-events: none; }
  .reveal { display: block; margin: 8px 0 0; min-height: 44px; }
  .check { padding: 16px; }
  .cite { margin-top: 12px; }
  .band { padding-block-start: 56px; }
  .abstract blockquote { font-size: 17px; line-height: 30px; }
  .marks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 12px; }
  .marks li { flex-direction: column; align-items: flex-start; gap: 4px; }
  .sources img { max-height: 112px; }
  .spec { height: 136px; padding: 8px; }
  .faq { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .close { padding-block: 56px 48px; }
  .code pre { font-size: 12px; line-height: 20px; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}
@media (forced-colors: active) {
  .item.is-open { border-width: 2px; }
}