/* ==========================================================================
   See Through Their Eyes (/vision-development/), page styles.

   Linked AFTER ../assets/site.css, which must come first: the tokens, reset,
   nav, .phead, .view-toggle and the focus ring all come from there, and this
   file overrides them only where the page needs it. It uses site tokens only
   (--bg, --surface, --ink*, --line*, --theme-*, --s*, --r-*, --sh-*, --dur-*,
   --ease, --dp, --bd, --mn and the --label-* multipliers). No new colours.

   One block per owner, so several people can edit at once. Edit only inside
   your own block, and keep each block's media queries at the END of that
   block, so a base rule always comes before the override that depends on it.

     css:shell   E3  page shell, the viewer, the tabbed panel, shared helpers
     css:W1      content writer 1
     css:W2      content writer 2
     css:W3      content writer 3
     css:E1      chart

   Class names carry a short vd- prefix, in the site's abbreviated style.
   ========================================================================== */


/* ==== Page shell and the viewer ==== */

/* [hidden] has to win everywhere on this page. Several rules below set
   display:grid or display:flex, which beat the user-agent rule for [hidden],
   and the viewer ships its controls hidden and reveals them from script. */
.vd [hidden]{display:none!important}

/* ── Page header ───────────────────────────────────────────────────────────
   .phead comes from site.css. Its `.phead p` rule would restyle the eyebrow
   too, so the eyebrow is scoped to win on specificity. */
.phead .vd-pe{
  margin-bottom:var(--s5);max-width:none;line-height:1.4;
  font-family:var(--label-face);font-size:calc(var(--label-size) * .68rem);
  letter-spacing:calc(var(--label-track) * .1em);text-transform:var(--label-case);
  color:var(--on-dark-3);
}

/* ── Section scaffolding, shared by every section on the page ─────────────
   .con owns the horizontal rhythm and .sec the vertical, as everywhere on the
   site. The eyebrow, heading and lede are the homepage's .slb, .st and .sb,
   which are inline in index.html and so not available here. */
.vd-ey{
  display:flex;align-items:center;gap:8px;margin-bottom:var(--s3);
  font-family:var(--label-face);font-size:calc(var(--label-size) * .68rem);
  letter-spacing:calc(var(--label-track) * .2em);text-transform:var(--label-case);
  color:var(--theme-1-ink);
}
.vd-ey::before{content:'';display:block;width:20px;height:1px;background:currentColor;flex-shrink:0}
.vd-h{
  font-size:clamp(1.75rem,3vw,2.4rem);color:var(--ink-strong);
  line-height:1.18;margin-bottom:var(--s4);
}
.vd-h3{font-size:1.4rem;color:var(--ink-strong);margin-bottom:var(--s3)}
.vd-lede{
  max-width:var(--measure);margin-bottom:var(--s8);
  font-size:1rem;line-height:1.75;color:var(--ink-2);
}
.vd-sub{margin-top:var(--s16)}

/* Helpers for the people writing the other sections. Prose goes in a
   .vd-prose wrapper, which sets the measure, the rhythm and the link style;
   a callout is .vd-note, a figure .vd-fig, a table .vd-tbl. */
.vd-prose{max-width:var(--measure);font-size:1rem;line-height:1.75;color:var(--ink)}
.vd-prose > * + *{margin-top:var(--s4)}
.vd-prose h3,.vd-prose h4{color:var(--ink-strong);margin-top:var(--s8)}
.vd-prose h3{font-size:1.4rem}
.vd-prose h4{font-size:1.15rem}
.vd-prose ul,.vd-prose ol{padding-left:1.35rem}
.vd-prose li + li{margin-top:var(--s2)}
.vd-prose strong{color:var(--ink-strong);font-weight:600}
.vd-prose a,.vd-lede a,.vd-ps a,.vd-hint a,.vd-foot a,a.cite{
  color:var(--theme-1-ink);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.18em;
  transition:color var(--dur-1) var(--ease);
}
.vd-prose a:hover,.vd-lede a:hover,.vd-ps a:hover,.vd-hint a:hover,.vd-foot a:hover,a.cite:hover{color:var(--ink-strong)}
.vd-note{
  padding:var(--s4) var(--s5);border-left:3px solid var(--theme-2);
  border-radius:0 var(--r-md) var(--r-md) 0;background:var(--sunken);
  font-size:.92rem;line-height:1.65;color:var(--ink);
}
.vd-fig{margin:var(--s6) 0}
.vd-fig figcaption{margin-top:var(--s2);font-size:.82rem;line-height:1.55;color:var(--ink-2);max-width:var(--measure)}
.vd-tbl{width:100%;border-collapse:collapse;font-size:.86rem;font-variant-numeric:tabular-nums}
.vd-tbl caption{text-align:left;padding-bottom:var(--s2);font-size:.82rem;color:var(--ink-2)}
.vd-tbl th,.vd-tbl td{padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.vd-tbl thead th{color:var(--ink-strong);font-weight:600;border-bottom-color:var(--line-control)}

/* ── The picture's band ───────────────────────────────────────────────────
   #look is the tool, and it is built to sit on the first screen of a laptop,
   the way Building a Brain's model does. From the top: a heading row (the
   step, the heading, one line on what the picture is), the age timeline across
   the page, then on the left the picture with, directly under it, the distance
   controls, a row of Hold, Split, Settings and Calibrate, and a one-line hint,
   and on the right the tabbed panel alone, as tall as that whole left column.
   The one-line summary runs across both beneath them. vd-viewer.js sizes the
   picture so that the left column ends at the bottom of the window (--vd-w,
   below); the panel scrolls inside itself if its text is longer. */
.vd #look.sec{padding-block:var(--s4) var(--s10)}
#look > .con{container:vdlook / inline-size}
.vd #look .vd-head{display:grid;gap:var(--s2) var(--s8);align-items:end;margin-bottom:var(--s2)}
.vd #look .vd-head .vd-ey{margin-bottom:var(--s1)}
.vd #look .vd-head .vd-h{font-size:clamp(1.4rem,2.1vw,1.75rem);margin-bottom:0}
.vd #look .vd-head .vd-lede{max-width:64ch;margin:0;font-size:.9rem;line-height:1.55}

/* ── The viewer ───────────────────────────────────────────────────────────
   One column on a phone or tablet (the picture, the distance, the compare
   buttons, the summary, then the panel) and two from 1000px: the picture and
   what goes with it, as wide as vd-viewer.js has worked out (--vd-w, a fallback
   share until it has), and the rest of the width for the panel. minmax(0, ...)
   is what lets a column shrink below the width of its widest child. */
.vd-viewer{margin-top:var(--s2)}
.vd-ui{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3);align-items:start}
.vd-stage{min-width:0}
.vd-pic{min-width:0;container:vdpic / inline-size}
.vd-side{min-width:0}

.vd-fallback,.vd-nojs{
  margin-bottom:var(--s6);padding:var(--s4) var(--s5);border:var(--card-edge);border-left:3px solid var(--theme-2);
  border-radius:var(--r-md);background:var(--surface);
  font-size:.92rem;line-height:1.65;color:var(--ink);max-width:var(--measure);
}

/* The readout is filled in by script, and an empty one takes no room. */
.vd-ro:empty{display:none}

/* The frame stays navy in both themes, like the nav: the picture inside is an
   illustration with fixed colours and must not change with the theme. The
   frame is a size container so the badge can move off the picture when there
   is no room for it beside the age chip. */
.vd-frame{
  position:relative;margin:0;
  container-type:inline-size;
  border:1px solid var(--line-control);border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface-inverse);box-shadow:var(--sh-2);
}
.vd-cw{position:relative;line-height:0;touch-action:pan-y}
.vd-canvas{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:3 / 2;background:var(--surface-inverse)}

/* Overlays. Navy with white type reads over any part of the picture, in both
   themes. The hairline separates the pill from a dark part of the scene. */
.vd-chip,.vd-lbl,.vd-badge{
  position:absolute;z-index:2;max-width:calc(100% - var(--s6));
  padding:5px 11px;border:1px solid var(--hairline-dark);border-radius:var(--r-pill);
  background:rgba(13,31,60,.88);color:var(--white);
  font-family:var(--label-face);font-size:calc(var(--label-size) * .7rem);
  letter-spacing:calc(var(--label-track) * .05em);text-transform:var(--label-case);
  line-height:1.4;pointer-events:none;
}
.vd-chip{top:var(--s3);left:var(--s3)}
.vd-badge{top:var(--s3);right:var(--s3)}
.vd-lbl{bottom:var(--s3)}
.vd-lbl-l{left:var(--s3)}
.vd-lbl-r{right:var(--s3)}
.vd-busy{
  position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;
  background:rgba(13,31,60,.55);color:var(--white);
  font-family:var(--label-face);font-size:calc(var(--label-size) * .8rem);
  letter-spacing:calc(var(--label-track) * .08em);text-transform:var(--label-case);
  line-height:1.4;
}

/* The split divider is a real slider: a 44px-wide strip with the visible line
   and grip drawn inside it. The ring goes on the grip rather than on the
   full-height strip, which would draw a tall rectangle across the picture. */
.vd-div{
  position:absolute;top:0;bottom:0;left:var(--x,50%);z-index:3;
  width:44px;margin-left:-22px;cursor:ew-resize;touch-action:none;
}
.vd-div::before{
  content:'';position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;
  background:var(--white);box-shadow:0 0 0 1px rgba(13,31,60,.55);
}
.vd-grip{
  position:absolute;top:50%;left:50%;width:32px;height:32px;margin:-16px 0 0 -16px;
  border-radius:50%;background:var(--white);border:2px solid var(--brand-navy);
  box-shadow:0 2px 6px rgba(13,31,60,.35);
}
.vd-grip::before,.vd-grip::after{
  content:'';position:absolute;top:50%;width:0;height:0;margin-top:-5px;
  border:5px solid transparent;
}
.vd-grip::before{left:3px;border-right-color:var(--brand-navy);border-left-width:0}
.vd-grip::after{right:3px;border-left-color:var(--brand-navy);border-right-width:0}
.vd-div:focus-visible{box-shadow:none}
.vd-div:focus-visible .vd-grip{box-shadow:var(--ring-dark)}

/* ── Controls ─────────────────────────────────────────────────────────── */
.vd-row{min-width:0}
.vd-lab{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s3);margin-bottom:var(--s1);
  font-size:.9rem;font-weight:600;line-height:1.5;color:var(--ink-strong);
}
.vd-val{font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums}
.vd-hint{
  margin-top:var(--s1);max-width:var(--measure);
  font-size:.82rem;line-height:1.55;color:var(--ink-2);
}
.vd-hint:empty{display:none}

.vd-range{
  display:block;width:100%;height:44px;margin:0;border-radius:var(--r-md);
  background:transparent;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.vd-range::-webkit-slider-runnable-track{height:6px;border-radius:var(--r-pill);background:var(--line-control)}
.vd-range::-moz-range-track{height:6px;border-radius:var(--r-pill);background:var(--line-control)}
.vd-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;box-sizing:border-box;
  width:22px;height:22px;margin-top:-8px;border-radius:50%;
  background:var(--selected-bg);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--ink-steel);
}
.vd-range::-moz-range-thumb{
  box-sizing:border-box;width:22px;height:22px;border-radius:50%;
  background:var(--selected-bg);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--ink-steel);
}

/* Visible tick labels under the age rail. Each is placed at the centre of the
   thumb for its step, which is why the thumb width is a variable here. They
   are decoration for sighted users (aria-hidden); the slider itself announces
   the age through aria-valuetext. */
.vd-rw{position:relative;--th:22px}
.vd-ticks{position:relative;height:1.6rem;margin-top:calc(-1 * var(--s2))}
.vd-ticks span{
  position:absolute;top:0;left:calc(var(--th) / 2 + (100% - var(--th)) * var(--i) / var(--n));
  transform:translateX(-50%);white-space:nowrap;
  font-family:var(--label-face);font-size:calc(var(--label-size) * .66rem);
  letter-spacing:calc(var(--label-track) * .02em);text-transform:var(--label-case);
  color:var(--ink-2);
}
.vd-ticks span:first-child{transform:translateX(-35%)}
.vd-ticks span:last-child{transform:translateX(-65%)}
.vd-ticks span.on{color:var(--ink-strong);font-weight:600}

/* Segmented controls reuse .view-toggle from site.css. Here the group fills
   its row and the buttons share it, so three labels still fit at 320px. The
   selected state is aria-pressed, which is what the script keeps current. */
.vd-seg{display:flex;width:100%;max-width:32rem}
.vd-seg button{flex:1 1 0;min-width:0;padding-inline:var(--s2);line-height:1.3}
.vd-seg button[aria-pressed="true"]{background:var(--ink-steel);color:var(--selected-ink)}
.vd-seg button[aria-disabled="true"]{color:var(--ink-3);cursor:not-allowed;background:var(--surface)}
.vd-seg button[aria-disabled="true"][aria-pressed="true"]{background:var(--sunken);color:var(--ink-2)}

.vd-acts{display:flex;flex-wrap:wrap;gap:var(--s2)}
.vd-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;padding:7px 16px;
  border:1px solid var(--line-control);border-radius:var(--r-md);
  background:var(--surface);color:var(--ink-steel);
  font-size:.85rem;font-weight:500;line-height:1.3;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease),
             border-color var(--dur-1) var(--ease);
}
.vd-btn:hover{border-color:var(--theme-1);color:var(--theme-1-ink)}
.vd-btn[aria-pressed="true"]{background:var(--ink-steel);border-color:var(--ink-steel);color:var(--selected-ink)}

.vd-feat{list-style:none;display:grid;gap:var(--s2);margin:var(--s4) 0}
.vd-fr{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s3);align-items:center;
  padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--sunken);
}
.vd-fl{grid-column:1;font-size:.9rem;font-weight:500;line-height:1.4;color:var(--ink-strong)}
.vd-fq{
  grid-column:1;font-family:var(--label-face);font-size:calc(var(--label-size) * .66rem);
  letter-spacing:calc(var(--label-track) * .03em);text-transform:var(--label-case);color:var(--ink-2);
}
.vd-fr .vd-st{grid-column:2;grid-row:1 / span 2}
.vd-feat:empty{display:none}

/* Status = a word plus a shape. The word is always ink, the shape carries a
   tint that only reinforces it, so nothing here depends on colour. */
.vd-st{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;line-height:1.3;color:var(--ink-strong)}
.vd-st svg{flex-shrink:0;display:block}
.vd-st[data-st="clear"] svg{color:var(--theme-3-ink)}
.vd-st[data-st="blurred"] svg{color:var(--theme-2-ink)}
.vd-st[data-st="lost"] svg{color:var(--ink-2)}
.vd-st[data-st="fine"] svg{color:var(--ink-2)}
/* The three colour statuses are diamonds, so a colour row never reads as one of
   the detail statuses above (circles and squares). Solid, half, and an outline
   with a bar through it. */
.vd-st[data-st="cshows"] svg{color:var(--theme-3-ink)}
.vd-st[data-st="cfaint"] svg{color:var(--theme-2-ink)}
.vd-st[data-st="cgray"] svg{color:var(--ink-2)}
.vd-st[data-st="cnone"] svg{color:var(--ink-2)}
/* Colour rows wait for the picture to finish drawing, so while it does they
   stay but are marked out of date. */
.vd-feat[aria-busy="true"]{opacity:.55}
.vd-feat-h{margin:var(--s5) 0 calc(-1 * var(--s2));font-size:1rem;color:var(--ink-strong)}
.vd-feat-h[hidden] + .vd-feat{display:none}
/* A colour row carries two swatches, the colour as drawn and the colour as the
   rule leaves it at this age, beside its words. */
.vd-sw{display:inline-flex;gap:3px;vertical-align:middle;margin-right:var(--s2)}
.vd-sw i{width:14px;height:14px;border-radius:3px;border:1px solid var(--line-control)}
.vd-seg-wide button{white-space:normal}
.vd-legend{list-style:none;display:grid;gap:var(--s2);margin:var(--s4) 0 var(--s3);font-size:.82rem;line-height:1.55;color:var(--ink-2)}
.vd-legend .vd-st{margin-right:var(--s1)}

.vd-why + .vd-why{margin-top:var(--s5)}
.vd-why{max-width:var(--measure);font-size:.9rem;line-height:1.7;color:var(--ink)}
.vd-why > * + *{margin-top:var(--s3)}
.vd-why h4{font-size:1.05rem;color:var(--ink-strong)}
.vd-why a{color:var(--theme-1-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}

/* The computed readout in "How we know". */
.vd-ro{margin-bottom:var(--s5)}
.vd-ro h4{margin:var(--s5) 0 var(--s2);font-size:1rem;color:var(--ink-strong)}
.vd-ro h4:first-child{margin-top:0}
.vd-ro p{max-width:var(--measure);font-size:.86rem;line-height:1.65;color:var(--ink-2)}
.vd-ro p + p{margin-top:var(--s2)}
.vd-ro a{color:var(--theme-1-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.vd-kv{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
  padding:var(--s2) 0;border-bottom:1px solid var(--line);font-size:.86rem;line-height:1.5;
}
.vd-kv dt{min-width:0;color:var(--ink-2)}
.vd-kv dd{flex-shrink:0;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.vd-kv.on dt,.vd-kv.on dd{color:var(--ink-strong);font-weight:600}
.vd-ro .vd-tbl{margin-top:var(--s2)}

/* ── The age timeline ─────────────────────────────────────────────────────
   A card across the page: Play, the rail with a labelled stop for every age,
   and the age shown large with the same age in other words beneath it. The
   range input is the control (its arrow keys step one age); the stops are a
   pointer shortcut. Selectors start at .vd-tl so they beat the base rules for
   .vd-range and .vd-ticks above, which the rest of the page still uses. */
.vd-tl{
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"play read" "track track";
  align-items:center;gap:var(--s1) var(--s4);
  margin-bottom:var(--s2);padding:6px var(--s4);
  background:var(--surface);border:var(--card-edge);border-radius:var(--r-lg);box-shadow:var(--sh-1);
}
.vd-play{
  grid-area:play;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border-radius:50%;
  border:2px solid var(--selected-bg);background:var(--selected-bg);color:var(--selected-ink);
  cursor:pointer;touch-action:manipulation;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.vd-play svg{display:block;fill:currentColor}
.vd-play .vd-ic-pause{display:none}
.vd-play[aria-pressed="true"]{background:var(--surface);color:var(--selected-bg)}
.vd-play[aria-pressed="true"] .vd-ic-play{display:none}
.vd-play[aria-pressed="true"] .vd-ic-pause{display:block}
.vd-tl-track{grid-area:track;min-width:0}
.vd-tl .vd-range{height:26px}
.vd-tl .vd-ticks{height:1.5rem;margin-top:-2px}
.vd-tl .vd-ticks span{
  top:0;padding:5px 4px 1px;cursor:pointer;border-radius:var(--r-sm);
  transition:color var(--dur-1) var(--ease);
}
/* The script hides the stops that would run into their neighbours at this width. */
.vd-tl .vd-ticks span.h{display:none}
.vd-tl .vd-ticks span::before{
  content:'';position:absolute;left:50%;top:0;width:1px;height:5px;margin-left:-.5px;background:var(--line-control);
}
.vd-tl .vd-ticks span:hover{color:var(--ink-strong)}
.vd-tl .vd-ticks span.on{color:var(--ink-strong);font-weight:500}
.vd-tl .vd-ticks span.on::before{height:7px;width:2px;margin-left:-1px;background:var(--ink-strong)}

.vd-tl-r{grid-area:read;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--s2)}
.vd-tl-l{
  font-family:var(--label-face);font-size:calc(var(--label-size) * .66rem);
  letter-spacing:calc(var(--label-track) * .14em);text-transform:var(--label-case);color:var(--ink-2);
}
.vd-tl-v{
  font-family:var(--dp);font-size:1.45rem;line-height:1.15;white-space:nowrap;color:var(--ink-strong);
}
.vd-tl-s{flex:0 0 100%;font-size:.8rem;line-height:1.4;color:var(--ink-2)}

/* ── Distance, and the buttons that open more ────────────────────────────
   Distance is three presets and the slider for anything between. Under the
   picture on a wide screen it is a flat block: the label with the value, the
   face note beside it, then the presets and the slider on one row. On a phone
   or tablet it is a card, label, presets, slider, then the note. Settings and
   Calibrate sit in the row with Hold and Split. Settings opens as a sheet that
   stands over the panel at the right (below it, on a phone), so nothing moves
   and the picture stays in view while a choice is made; Escape or a click
   outside closes it. */
.vd-ctl{
  display:grid;gap:var(--s3);padding:var(--s4);
  background:var(--surface);border:var(--card-edge);border-radius:var(--r-lg);box-shadow:var(--sh-1);
}
.vd-dist{display:grid}
.vd-dist-h{display:contents}
.vd-dist .vd-lab{margin-bottom:0}
.vd-dist .vd-range{height:30px;margin-top:var(--s1)}
.vd-dist .vd-hint{order:4;margin-top:0}
.vd-presets{display:flex;width:100%;max-width:none;margin-top:var(--s2)}
.vd-presets button{
  flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:44px;padding:5px var(--s2);
  font-family:var(--bd);font-size:.88rem;font-weight:600;letter-spacing:0;text-transform:none;
  line-height:1.2;text-align:center;white-space:normal;
}
.vd-sub-t{display:block;font-size:.72rem;font-weight:400;line-height:1.25}

.vd-actrow{
  position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:var(--s2) var(--s3);margin-top:var(--s2);
}
.vd-cmp{min-width:0}
.vd-pills{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s2)}
.vd-dis,.vd-calbtn{min-width:0}
.vd-dis > summary,.vd-calbtn{
  min-height:34px;padding:7px 14px;
  border:1px solid var(--line-control);border-radius:var(--r-md);
  background:var(--surface);color:var(--ink-steel);
  font-size:.85rem;font-weight:500;line-height:1.3;cursor:pointer;
  -webkit-user-select:none;user-select:none;touch-action:manipulation;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease),
             border-color var(--dur-1) var(--ease);
}
.vd-dis > summary{width:fit-content;list-style:none}
.vd-dis > summary::-webkit-details-marker{display:none}
.vd-dis > summary:hover,.vd-calbtn:hover{border-color:var(--theme-1);color:var(--theme-1-ink)}
.vd-dis[open] > summary,.vd-calbtn[aria-expanded="true"]{
  background:var(--ink-steel);border-color:var(--ink-steel);color:var(--selected-ink);
}
.vd-dis[open] > summary:hover,.vd-calbtn[aria-expanded="true"]:hover{color:var(--selected-ink)}
.vd-rs-b{
  display:grid;gap:var(--s3);padding:var(--s4);
  background:var(--surface);border:1px solid var(--line-control);border-radius:var(--r-md);
}
.vd-dis[open] > .vd-rs-b{
  position:absolute;z-index:6;left:0;right:0;top:calc(100% + var(--s2));
  max-height:min(75vh,34rem);overflow-y:auto;overscroll-behavior:contain;box-shadow:var(--sh-3);
}
.vd-sg{
  padding-top:var(--s3);border-top:1px solid var(--line);
  font-family:var(--label-face);font-size:calc(var(--label-size) * .66rem);
  letter-spacing:calc(var(--label-track) * .12em);text-transform:var(--label-case);color:var(--ink-2);
}

/* ── Under the picture: the hint, then the summary ────────────────────────
   The hint is one small line under the compare row. The summary has room kept
   for two lines, so what follows the tool does not jump as an age is chosen
   and the summary grows or shrinks. */
.vd-pic > .vd-hint{margin-top:var(--s1);max-width:none;font-size:.78rem}
.vd-status{
  margin-top:var(--s3);padding:var(--s2) var(--s3);
  min-height:calc(var(--vd-st-lines,2) * 1.45 * .8rem + 2 * var(--s2));
  border-left:3px solid var(--theme-1);border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:var(--sunken);font-size:.8rem;line-height:1.45;color:var(--ink);
}
.vd-status:empty{display:none}

/* ── The tabbed panel ─────────────────────────────────────────────────────
   Four .vd-tp sections that the script upgrades into tab panels, the same
   upgrade-in-place the homepage's research matrix uses. Without the script
   they are four headed sections stacked in order, which still reads. Once
   upgraded the tab names do the headings' job (they stay for assistive
   technology, out of sight), the tab row stays put, and the open panel
   scrolls inside the card. */
.vd-panel{
  min-width:0;padding:var(--s5);
  background:var(--surface);border:var(--card-edge);border-radius:var(--r-lg);box-shadow:var(--sh-1);
}
.vd-panel.vd-tabbed{display:flex;flex-direction:column;padding:0;overflow:hidden}
.vd-tabs{
  flex:none;display:flex;gap:0;padding:var(--s1) var(--s3) 0;
  border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;
}
.vd-tabs::-webkit-scrollbar{display:none}
.vd-tab{
  flex:none;min-height:40px;padding:8px 10px 7px;margin-bottom:-1px;
  border:0;border-bottom:3px solid transparent;border-radius:var(--r-sm) var(--r-sm) 0 0;
  background:none;color:var(--ink-2);cursor:pointer;
  font-size:.86rem;font-weight:600;line-height:1.3;white-space:nowrap;
  transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}
.vd-tab:hover{color:var(--ink-strong)}
.vd-tab[aria-selected="true"]{color:var(--ink-strong);border-bottom-color:var(--selected-bg)}
.vd-tp-h{font-size:1.2rem;color:var(--ink-strong);margin-bottom:var(--s3)}
.vd-tp + .vd-tp{margin-top:var(--s8)}
.vd-tabbed .vd-tp-h{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.vd-tabbed .vd-tp{margin-top:0;padding:var(--s3) var(--s5) var(--s4)}
.vd-tabbed .vd-tp:focus-visible{box-shadow:inset 0 0 0 2px var(--ring-outer)}
.vd-ps{max-width:var(--measure);font-size:.88rem;line-height:1.65;color:var(--ink-2)}
.vd-ps + .vd-ps{margin-top:var(--s3)}
.vd-small{font-size:.8rem}

/* "This age": one written note for the age shown. */
.vd-age > * + *{margin-top:var(--s3)}
.vd-age-h{font-family:var(--dp);font-size:1.3rem;font-weight:400;line-height:1.25;color:var(--ink-strong)}
.vd-age ul{list-style:disc;padding-left:1.15rem}
.vd-age li{font-size:.92rem;line-height:1.6;color:var(--ink)}
.vd-age li + li{margin-top:var(--s2)}
.vd-age a{
  color:var(--theme-1-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;
}
.vd-notice,.vd-try{
  padding:var(--s3) var(--s4);border-left:3px solid var(--theme-3);border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:var(--sunken);font-size:.88rem;line-height:1.55;color:var(--ink);
}
.vd-try{border-left-color:var(--theme-1)}
.vd-notice strong,.vd-try strong{color:var(--ink-strong)}
.vd-age-live{margin-top:var(--s3)}
.vd-age-live:first-child{margin-top:0}
.vd-linkbtn{
  display:inline;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;color:var(--theme-1-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;
}
.vd-linkbtn:hover{color:var(--ink-strong)}

/* Folds inside the panel: long text kept one click away. The marker is the
   site's +/- and the summary's display is left alone (it is the property that
   has broken toggling in some browsers), so its height comes from padding. */
.vd-pf{border-top:1px solid var(--line)}
.vd-pf:last-child{border-bottom:1px solid var(--line)}
.vd-tp > .vd-pf:first-child{border-top:0}
.vd-pf > summary{
  position:relative;list-style:none;cursor:pointer;
  padding:9px 0 9px 1.6rem;border-radius:var(--r-sm);
  font-size:.9rem;font-weight:600;line-height:1.4;color:var(--ink-strong);
}
.vd-pf > summary::-webkit-details-marker{display:none}
.vd-pf > summary h4{display:inline;margin:0;font:inherit;color:inherit}
.vd-pf > summary::before{
  content:'+';position:absolute;left:0;top:9px;width:1.1rem;text-align:center;
  font-family:var(--mn);line-height:1.4;color:var(--ink-2);
}
.vd-pf[open] > summary::before{content:'\2212'}
.vd-pf > summary:hover{color:var(--theme-1-ink)}
.vd-pf-b{padding:0 0 var(--s4)}
.vd-pf-b > :first-child{margin-top:0}
.vd-pf-b.vd-prose{max-width:none;font-size:.88rem;line-height:1.65}
.vd-pf-b .vd-ro{margin-bottom:0}
.vd-pf-b .vd-legend{margin-top:0}

/* ── Calibrate your screen ────────────────────────────────────────────────
   Below the tool at the full width of the page, because the blind-spot test
   needs a box wider than the side column to measure a normal viewing distance.
   The summary holds the heading; the button in the controls card opens it. */
.vd-calib{
  margin-top:var(--s5);
  background:var(--surface);border:var(--card-edge);border-radius:var(--r-lg);box-shadow:var(--sh-1);
}
.vd-calib > summary{
  position:relative;list-style:none;cursor:pointer;
  padding:var(--s3) var(--s5) var(--s3) calc(var(--s5) + 1.6rem);border-radius:var(--r-lg);
}
.vd-calib > summary::-webkit-details-marker{display:none}
.vd-calib > summary h3{display:inline;margin:0;font-size:1.05rem}
.vd-calib > summary::before{
  content:'+';position:absolute;left:var(--s5);top:50%;transform:translateY(-50%);
  width:1.1rem;text-align:center;font-family:var(--mn);color:var(--ink-2);
}
.vd-calib[open] > summary::before{content:'\2212'}
.vd-calib > summary:hover{background:var(--sunken)}
.vd-calib[open] > summary{border-bottom:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0}
.vd-calib-b{padding:var(--s2) var(--s5) var(--s6)}
.vd-calib-b .vd-cal{box-shadow:none}
.vd-calib-b .vd-prose h4:first-child{margin-top:0}

/* ── References and page footer ───────────────────────────────────────── */
.refs-fold > summary{cursor:pointer;width:fit-content}
.refs-fold > summary h2{
  display:inline;margin:0;font-size:clamp(1.75rem,3vw,2.4rem);
  color:var(--ink-strong);line-height:1.18;
}
/* The count sits inside the h2, as on Building a Brain: CI's 2020 validator
   accepts a <summary> holding a single heading and nothing beside it. */
.refs-fold > summary .refs-n{font:400 .9rem var(--bd);color:var(--ink-2)}
.vd-refs{
  list-style:none;display:grid;gap:var(--s3);margin-top:var(--s5);max-width:var(--measure);
  font-size:.9rem;line-height:1.65;color:var(--ink);
}
.vd-refs li{padding:var(--s1) var(--s2) var(--s1) calc(2rem + var(--s2));text-indent:-2rem;border-radius:var(--r-sm)}
.vd-refs li:target{background:var(--theme-2-wash)}
.vd-refs a{
  overflow-wrap:anywhere;color:var(--theme-1-ink);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.18em;
}

.vd-foot{padding:var(--s10) 0 var(--s12);background:var(--bg);font-size:.82rem;line-height:1.65;color:var(--ink-2)}
.vd-foot p + p{margin-top:var(--s1)}
.vd-ver:empty{display:none}

/* ── The calibration widget (vd-calibrate.js) ─────────────────────────────
   A bordered card of three steps. It ships hidden and the script reveals it.
   The card rectangle is a slider whose width in CSS pixels the script sets, so
   its size is the one thing here that must not be touched by a stylesheet: no
   max-width, no padding on the box that changes the border-box width. */
/* A button that cannot be used yet is dashed rather than only paler, so the
   difference does not rest on colour, and its words still clear 4.5:1. */
.vd-btn[aria-disabled="true"]{color:var(--ink-2);border-style:dashed;background:transparent;cursor:not-allowed}
.vd-btn[aria-disabled="true"]:hover{color:var(--ink-2);border-color:var(--line-control)}
.vd-cal{
  margin-top:var(--s5);padding:var(--s6);display:grid;gap:var(--s8);
  background:var(--surface);border:var(--card-edge);border-radius:var(--r-lg);box-shadow:var(--sh-1);
}
.vd-cs{min-width:0;display:grid;gap:var(--s3);align-content:start}
.vd-cs + .vd-cs{padding-top:var(--s6);border-top:1px solid var(--line)}
.vd-cs-h{display:flex;align-items:center;gap:var(--s3);font-size:1.15rem;color:var(--ink-strong)}
.vd-cs-n{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:1.7rem;height:1.7rem;border-radius:50%;
  background:var(--selected-bg);color:var(--selected-ink);
  font-family:var(--mn);font-size:.8rem;line-height:1;
}
.vd-cstage{
  display:flex;align-items:flex-start;padding:var(--s3);overflow:hidden;
  background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-md);
}
.vd-ccard{
  position:relative;flex-shrink:0;box-sizing:border-box;touch-action:none;cursor:ew-resize;
  border:2px solid var(--ink-strong);border-radius:var(--r-md);background:var(--surface);
  -webkit-user-select:none;user-select:none;
}
.vd-ccard-mm{
  position:absolute;left:var(--s3);bottom:var(--s2);
  font-family:var(--label-face);font-size:calc(var(--label-size) * .72rem);
  letter-spacing:calc(var(--label-track) * .04em);color:var(--ink-2);
}
.vd-ccard-h{position:absolute;top:0;bottom:0;right:0;width:2.75rem}
.vd-ccard-h::before{
  content:'';position:absolute;top:50%;right:var(--s3);width:4px;height:2rem;margin-top:-1rem;
  border-radius:var(--r-pill);background:var(--ink-2);
}
.vd-num{
  width:8rem;min-height:44px;padding:var(--s2) var(--s3);
  border:1px solid var(--line-control);border-radius:var(--r-md);
  background:var(--surface);color:var(--ink);font-size:1rem;font-variant-numeric:tabular-nums;
}
.vd-num:focus{outline:none;border-color:var(--theme-1);box-shadow:var(--ring-card)}
.vd-cpanel{display:grid;gap:var(--s3);min-width:0}
.vd-bstage{
  position:relative;height:7rem;overflow:hidden;touch-action:pan-y;
  background:var(--sunken);border:1px solid var(--line-control);border-radius:var(--r-md);
}
.vd-bfix,.vd-bdot{position:absolute;top:50%;background:var(--ink-strong)}
.vd-bfix{width:20px;height:20px;margin:-10px 0 0 -10px}
.vd-bdot{width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%}
.vd-cal-status{
  padding:var(--s3) var(--s4);border-left:3px solid var(--theme-1);border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:var(--sunken);font-size:.92rem;line-height:1.6;color:var(--ink);
}
.vd-cal-status:empty{display:none}
.vd-cal[data-state="calibrated"] .vd-cal-status{border-left-color:var(--theme-3)}
.vd-cal[data-state="stale"] .vd-cal-status{border-left-color:var(--theme-2)}

/* ── Responsive and accessibility, kept at the end of the block ───────── */

/* The layout follows the width the section has, not the window's: the page's
   guide panel can take 320px off the side of a wide window, and what is left is
   a tablet's width. #look's .con is the container (vdlook); 936px is the width
   its content has in a 1000px window. A phone or a tablet: one column, in the
   order a visitor uses it. The stage,
   the picture's wrapper and the side column dissolve so that their parts can be
   ordered together: the picture, the distance, the compare and settings buttons,
   the hint, the summary, the panel. */
@container vdlook (max-width:935px){
  .vd-viewer{max-width:640px;margin-inline:auto}
  .vd-stage,.vd-pic,.vd-side{display:contents}
  .vd-frame{order:1}
  .vd-ctl{order:2}
  .vd-actrow{order:3;margin-top:0}
  .vd-pic > .vd-hint{order:3;margin-top:0}
  .vd-status{order:4;margin-top:0}
  .vd-panel{order:5}
}

/* Two columns, from 936px of section width up. The picture, with everything that goes with it, is one grid area
   and the panel another, as tall as the picture's column (the row is), so its
   tabs sit level with the picture's top edge and it scrolls inside itself if its
   text is longer; a floor keeps it usable when there is little room. The
   summary runs across both beneath them. All of it is under .vd-on, which the
   script puts on the viewer when it starts, so that without the script (or if
   it fails) the panel's sections are just a column. The picture's column is not
   sticky: it slid down over the summary line beneath it while the page was
   scrolled (Dr. Shen, 19 October 2026), since a sticky item moves within the
   whole grid, not its own row; and the panel beside it is the same height. */
@container vdlook (min-width:936px){
  .vd #look .vd-head{grid-template-columns:auto minmax(0,1fr)}
  .vd #look .vd-head-t{display:flex;align-items:baseline;gap:var(--s4)}
  .vd #look .vd-head .vd-ey{margin-bottom:0}
  .vd #look .vd-head .vd-lede{padding-bottom:2px}
  .vd-on .vd-ui{grid-template-columns:minmax(0,var(--vd-w,1.55fr)) minmax(0,1fr);gap:var(--s3) var(--s6)}
  .vd-on .vd-stage{display:contents}
  .vd-on .vd-pic{grid-column:1;grid-row:1}
  .vd-on .vd-side{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-self:stretch}
  .vd-on .vd-status{grid-column:1 / -1;grid-row:2;margin-top:0}
  .vd-panel.vd-tabbed{flex:1 1 0;min-height:160px}
  .vd-tabbed .vd-tp{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}

  /* The distance block, flat under the picture. */
  .vd-on .vd-ctl{margin-top:var(--s2);padding:0;gap:0;background:none;border:0;border-radius:0;box-shadow:none}
  .vd-on .vd-dist{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:var(--s4);row-gap:var(--s1)}
  .vd-on .vd-dist-h{
    grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 var(--s4);
  }
  .vd-on .vd-dist .vd-hint{order:0;font-size:.76rem}
  .vd-on .vd-dist .vd-lab{font-size:.84rem}
  .vd-on .vd-presets{width:auto;margin-top:0}
  .vd-on .vd-presets button{flex:0 0 auto;min-height:40px;padding-inline:var(--s3)}
  .vd-on .vd-dist .vd-range{margin-top:0}

  /* Settings stands over the panel, level with the bottom of the picture's column. */
  .vd-on .vd-dis[open] > .vd-rs-b{
    left:calc(100% + var(--s6));right:auto;top:auto;bottom:0;
    width:min(23.5rem,calc(100vw - 2 * var(--gutter)));
  }
}

/* A phone: the picture and the age and distance controls have to be on the first
   screen, so the heading is only its step label (the h2 stays for assistive
   technology) and the line about the picture moves to the foot of the tool. */
@media(max-width:699px){
  .vd #look.sec{padding-block:var(--s3) var(--s8)}
  #look > .con{display:flex;flex-direction:column}
  .vd #look .vd-head{display:contents}
  .vd #look .vd-head-t{order:1}
  .vd #look .vd-head .vd-ey{margin-bottom:var(--s2)}
  .vd #look .vd-head .vd-h{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
  .vd #look .vd-viewer{order:2;width:100%;margin-top:0}
  .vd #look .vd-head .vd-lede{order:3;margin-top:var(--s5);font-size:.86rem}
  .vd-tl{gap:2px var(--s3);padding:var(--s1) var(--s3) 2px;margin-bottom:var(--s2)}
  .vd-tl .vd-ticks{margin-top:-8px}
  .vd-ui{gap:var(--s2)}
  .vd-ctl{padding:var(--s3);gap:var(--s2)}
  .vd-dist .vd-lab{font-size:.8rem;column-gap:var(--s2)}
}

/* Four tab names do not fit one row on the narrowest phones: two by two. */
@media(max-width:400px){
  .vd-tabs{display:grid;grid-template-columns:1fr 1fr;padding-inline:var(--s2);overflow:visible}
  .vd-tab{margin-bottom:0;text-align:center;white-space:normal}
}

@media(min-width:700px){
  .vd .phead{padding:var(--s8) 0 var(--s6)}
  .vd-tl{
    grid-template-columns:auto minmax(0,1fr) 13rem;grid-template-areas:"play track read";
    gap:var(--s5);padding:6px var(--s5);
  }
  .vd-tl-r{justify-content:flex-end;text-align:right}
}

/* When the picture is narrower than the badge and the age chip together, the
   badge moves to the picture's bottom edge, clear of the chip; on a phone-sized
   picture, where it would wrap over the picture, it leaves the picture and sits
   beneath it as a caption strip. (A strip at every width up to 620 px cost a
   28 px line of height exactly where a short laptop window has none.) */
@container (min-width:441px) and (max-width:620px){
  .vd-badge{top:auto;bottom:var(--s3)}
}
@container (max-width:440px){
  .vd-badge{
    position:static;display:block;max-width:none;
    padding:4px var(--s3);border:0;border-top:1px solid var(--hairline-dark);
    border-radius:0;background:var(--surface-inverse);line-height:1.5;
    font-size:calc(var(--label-size) * .62rem);letter-spacing:calc(var(--label-track) * .03em);
  }
}

/* A narrow picture column (a short window, or the guide open at the side): the
   four buttons in the row under the picture shrink to share it, and the presets
   and the slider each take a row if they cannot sit side by side. */
@container vdpic (max-width:520px){
  .vd-actrow,.vd-pills,.vd-acts{gap:6px}
  .vd-actrow .vd-btn,.vd-dis > summary{padding-inline:10px}
}
@container vdpic (max-width:420px){
  .vd-on .vd-dist{grid-template-columns:minmax(0,1fr)}
  .vd-on .vd-presets{margin-bottom:var(--s1)}
}

/* The stops that do not fit the rail's width are hidden by the script (class .h),
   whatever the width of the window, since the rail's width also depends on the
   panel at the side of the page. */
@media(max-width:520px){
  .vd-tl-v{font-size:1.3rem}
}

@media(pointer:coarse){
  .vd-btn,.vd-tab{min-height:44px}
  .vd-dis > summary,.vd-calbtn{min-height:44px;padding-block:11px}
  .vd-presets button,.vd-on .vd-presets button{min-height:44px}
  .vd-tl .vd-range,.vd-dist .vd-range{height:44px}
  .vd-pf > summary{padding-block:12px}
  .vd-pf > summary::before{top:12px}
}

@media(prefers-reduced-motion:reduce){
  .vd *,.vd *::before,.vd *::after{transition:none!important;animation:none!important}
}

@media(forced-colors:active){
  .vd-chip,.vd-lbl,.vd-badge,.vd-busy{border:1px solid CanvasText;background:Canvas;color:CanvasText}
  .vd-div::before{background:CanvasText;box-shadow:none}
  .vd-grip{background:Canvas;border-color:CanvasText;box-shadow:none}
  .vd-grip::before{border-right-color:CanvasText}
  .vd-grip::after{border-left-color:CanvasText}
  .vd-seg button[aria-pressed="true"],.vd-btn[aria-pressed="true"],.vd-tab[aria-selected="true"],
  .vd-dis[open] > summary,.vd-calbtn[aria-expanded="true"],.vd-play[aria-pressed="true"]{
    forced-color-adjust:none;background:Highlight;border-color:Highlight;color:HighlightText;
  }
  .vd-play{border-color:ButtonText}
  .vd-tl .vd-ticks span.on::before{background:CanvasText}
  .vd-range::-webkit-slider-thumb{background:CanvasText;border-color:Canvas;box-shadow:none}
  .vd-range::-moz-range-thumb{background:CanvasText;border-color:Canvas;box-shadow:none}
  .vd-st svg{color:CanvasText}
  .vd-ccard{border-color:CanvasText}
  .vd-ccard-h::before,.vd-bfix,.vd-bdot,.vd-cs-n{forced-color-adjust:none;background:CanvasText;color:Canvas}
}



/* ==== The numbers, the contrast lab, the quiz and About this simulation ==== */
/* ── "How we know" panel: static prose under the computed readout ─────────
   The panel's own paragraphs are .vd-ps (small, quiet); these headings
   separate the reference values from the newborn value. */
.vd-how h4{margin:var(--s5) 0 var(--s2);font-size:1rem;color:var(--ink-strong)}
.vd-how h4:first-child{margin-top:0}
.vd-how .vd-ps + .vd-ps{margin-top:var(--s3)}

/* ── Sections written by W1: lists inside .vd-prose ───────────────────────
   The leading words of each item are bold and carry the topic, so a skimming
   reader can pick the one they want. */
.vd-prose .vdl{padding-left:1.35rem}
.vd-prose .vdl li{padding-left:.25rem}
.vd-prose .vdl strong{color:var(--ink-strong)}
.vd-prose dl.vda{display:grid;gap:var(--s3)}
.vd-prose dl.vda dt{font-weight:600;color:var(--ink-strong)}
.vd-prose dl.vda dd{margin:var(--s1) 0 0}
.vd-prose .vd-note{margin-top:var(--s5)}
.vd-src{margin-top:var(--s3)}
.vdc-pick{margin-top:var(--s4)}

/* ── The contrast lab ─────────────────────────────────────────────────────
   Two cards. The stripes and the faces are illustrations drawn in fixed grey
   on a canvas, so, like the viewer's picture, they do not change with the
   theme; only the frame, labels and controls do. Controls reuse the viewer's
   .vd-range, .vd-btn, .vd-lab and .vd-hint. */
.vdc{margin-top:var(--s10)}
.vdc-card{
  max-width:56rem;margin-top:var(--s6);padding:var(--s5);
  background:var(--surface);border:var(--card-edge);border-radius:var(--r-lg);box-shadow:var(--sh-1);
}
.vdc-h{margin:0 0 var(--s2);font-size:1.15rem;color:var(--ink-strong)}
.vdc-card > .vd-ps{max-width:var(--measure)}
.vdc-fig{margin:var(--s4) 0 0}
.vdc-canvas{
  display:block;width:100%;height:auto;aspect-ratio:3 / 1;
  border:1px solid var(--line-control);border-radius:var(--r-md);
}
.vdc-ctl{margin-top:var(--s4);display:grid;gap:var(--s4)}

/* Marks under the slider, placed on the same log scale as the thumb. --p is a
   fraction from 0 to 1 that the script sets from each mark's data-pct. The
   labels are text, not colour: a tick plus words. */
.vdc-rw{position:relative;--th:22px}
.vdc-marks{position:relative;height:3.6rem;margin-top:calc(-1 * var(--s2))}
.vdc-mk{
  position:absolute;top:0;left:calc(var(--th) / 2 + (100% - var(--th)) * var(--p, 0));
  width:0;height:100%;
}
.vdc-mk::before{
  content:'';position:absolute;top:0;left:-1px;width:2px;height:.75rem;
  background:var(--ink-steel);border-radius:1px;
}
.vdc-mk[data-kind="adult"]::before{height:2.15rem}
.vdc-mk span{
  position:absolute;top:.85rem;white-space:nowrap;
  font-size:.78rem;line-height:1.35;color:var(--ink);
}
.vdc-mk[data-kind="adult"] span{top:2.2rem}
.vdc-mk[data-end="left"] span{left:-5px}
.vdc-mk[data-end="right"] span{right:-5px;text-align:right}

.vdc-sel{
  display:block;width:100%;max-width:20rem;min-height:44px;padding:8px 12px;
  border:1px solid var(--line-control);border-radius:var(--r-md);
  background-color:var(--surface);color:var(--ink);font:inherit;font-size:.95rem;
}
.vdc-faces{
  list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:var(--s2);margin:var(--s4) 0 0;padding:0;
}
.vdc-face{
  min-width:0;display:flex;flex-direction:column;gap:var(--s1);
  padding:var(--s2);border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--sunken);text-align:center;
}
.vdc-face[data-st="edge"]{border:2px solid var(--ink-steel);padding:calc(var(--s2) - 1px)}
.vdc-fc{display:block;width:100%;height:auto;aspect-ratio:1 / 1;border-radius:var(--r-sm)}
.vdc-fl{font-size:.92rem;font-weight:600;line-height:1.3;color:var(--ink-strong)}
.vdc-fs{font-size:.74rem;line-height:1.3;color:var(--ink-2)}
.vdc-fst{min-height:2.6em;font-size:.74rem;line-height:1.35;color:var(--ink)}
.vdc-face[data-st="beyond"] .vdc-fst{color:var(--ink-2)}
.vdc-face[data-st="edge"] .vdc-fst{font-weight:600;color:var(--ink-strong)}
.vdc-face[data-st="edge"] .vdc-fst::before{content:'\25B2\00a0'}
.vdc-tw{margin-top:var(--s3);overflow-x:auto}
.vdc-tw:focus-visible{border-radius:var(--r-sm)}
.vdc-det{margin-top:var(--s6);max-width:var(--measure)}
.vdc-det summary{
  position:relative;list-style:none;cursor:pointer;padding:7px 0 7px 1.5rem;
  font-size:.9rem;font-weight:600;color:var(--ink-strong);
}
.vdc-det summary::-webkit-details-marker{display:none}
.vdc-det summary::before{
  content:'+';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1.1rem;text-align:center;font-family:var(--mn);color:var(--ink-2);
}
.vdc-det[open] summary::before{content:'\2212'}
.vdc-det .vd-tbl{min-width:30rem}

/* Media queries stay at the end of the block, after the rules they override. */
@media(max-width:640px){
  .vdc-faces{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vdc-card{padding:var(--s4)}
}
@media(forced-colors:active){
  .vdc-face[data-st="edge"]{border-color:Highlight}
  .vdc-mk::before{background:CanvasText}
}



/* ==== How babies are tested, the tester game, color, and depth ==== */

/* ── Methods: the four-step trial and the "Be the tester" game ────────────
   Tokens only, so both themes and both reading registers follow. The simulated
   baby's face uses the brand constants and not the theme tokens, so it looks
   the same in light and dark, like the scene illustration; the card around it
   follows the theme. */
.vd-stp{
  list-style:none;counter-reset:vdstp;display:grid;gap:var(--s3);
  max-width:var(--measure);margin:var(--s5) 0;padding:0;
}
.vd-stp li{
  counter-increment:vdstp;position:relative;
  padding:var(--s4) var(--s5) var(--s4) calc(var(--s5) + 2.6rem);
  border:var(--card-edge);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--sh-1);
  font-size:.95rem;line-height:1.7;color:var(--ink);
}
.vd-stp li::before{
  content:counter(vdstp);position:absolute;left:var(--s5);top:var(--s4);
  display:inline-flex;align-items:center;justify-content:center;
  width:1.7rem;height:1.7rem;border-radius:50%;
  background:var(--selected-bg);color:var(--selected-ink);
  font-family:var(--mn);font-size:.8rem;line-height:1;
}
.vd-stp strong{color:var(--ink-strong);font-weight:600}
.vd-stp a,.vd-al-t a,.vd-tt a{
  color:var(--theme-1-ink);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.18em;transition:color var(--dur-1) var(--ease);
}
.vd-stp a:hover,.vd-al-t a:hover,.vd-tt a:hover{color:var(--ink-strong)}

.vd-sel{
  display:block;width:100%;max-width:26rem;min-height:44px;padding:var(--s2) var(--s3);
  border:1px solid var(--line-control);border-radius:var(--r-md);
  background:var(--surface);color:var(--ink);font-size:.95rem;line-height:1.4;
}
.vd-sel:focus{outline:none;border-color:var(--theme-1);box-shadow:var(--ring-card)}

.vd-tt{
  margin-top:var(--s5);padding:var(--s6);display:grid;gap:var(--s6);
  background:var(--surface);border:var(--card-edge);border-radius:var(--r-lg);box-shadow:var(--sh-1);
}
.vd-tt-cfg{display:grid;gap:var(--s5)}
.vd-tt-play,.vd-tt-res{display:grid;gap:var(--s4);min-width:0}
.vd-tt-who{font-size:.95rem;font-weight:600;line-height:1.5;color:var(--ink-strong)}
.vd-tt-prog{
  font-family:var(--label-face);font-size:calc(var(--label-size) * .74rem);
  letter-spacing:calc(var(--label-track) * .04em);text-transform:var(--label-case);
  line-height:1.5;color:var(--ink-2);
}
.vd-tt-fig{margin:0;min-width:0}
.vd-tt-fig figcaption{margin-top:var(--s2);max-width:var(--measure);font-size:.82rem;line-height:1.55;color:var(--ink-2)}
.vd-tt-svg{display:block;width:100%;max-width:28rem;height:auto}
.vd-tt-card{fill:var(--sunken);stroke:var(--line-control);stroke-width:2}
.vd-tt-t{
  fill:var(--ink-2);font-family:var(--label-face);font-size:15px;
  letter-spacing:calc(var(--label-track) * .06em);text-transform:var(--label-case);
}
.vd-tt-hole{fill:var(--surface-inverse)}
.vd-tt-rim{fill:none;stroke:var(--ink-strong);stroke-width:3}
.vd-tt-skin{fill:var(--brand-sand)}
.vd-tt-brow{fill:none;stroke:var(--brand-steel);stroke-width:3;stroke-linecap:round}
.vd-tt-sclera{fill:var(--white);stroke:var(--brand-navy);stroke-width:1.5}
.vd-tt-iris{fill:var(--brand-steel)}
.vd-tt-pupil{fill:var(--brand-navy)}
.vd-tt-face,.vd-tt-pup{transition:transform .5s var(--ease)}
.vd-tt-say{
  max-width:var(--measure);min-height:1.7em;
  font-size:.95rem;line-height:1.7;color:var(--ink);
}
.vd-tt-judge{display:grid;gap:var(--s2)}
.vd-tt-btn{min-height:44px;padding:10px 20px;font-size:.95rem}
.vd-tt-fb{
  max-width:var(--measure);padding:var(--s3) var(--s4);
  border-left:3px solid var(--theme-1);border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:var(--sunken);font-size:.92rem;line-height:1.6;color:var(--ink);
}
.vd-tt-fb:empty{display:none}
.vd-tt-resh{font-size:1.2rem;color:var(--ink-strong)}
.vd-tt-resh:focus-visible{border-radius:var(--r-sm)}
.vd-tt-rt{display:grid;gap:var(--s2);max-width:var(--measure);font-size:.95rem;line-height:1.7;color:var(--ink)}
.vd-tt-tbl{max-width:34rem}
.vd-tt-tbl td{font-variant-numeric:tabular-nums}

/* ── Color and depth: the age-by-age list ─────────────────────────────────
   One card per age, as in the childhood list. The age tag is a scanning aid
   and is aria-hidden: the sentence beside it states the same age. */
.vd-al{
  list-style:none;display:grid;gap:var(--s3);
  max-width:calc(var(--measure) + 9rem);margin:var(--s6) 0;padding:0;
}
.vd-al li{
  display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:var(--s4);align-items:start;
  padding:var(--s4) var(--s5);
  border:var(--card-edge);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--sh-1);
}
.vd-al-a{
  font-family:var(--label-face);font-size:calc(var(--label-size) * .78rem);font-weight:500;
  letter-spacing:calc(var(--label-track) * .04em);text-transform:var(--label-case);
  line-height:1.5;color:var(--ink-strong);
}
.vd-al-t{min-width:0;font-size:.95rem;line-height:1.7;color:var(--ink)}

/* Media queries stay at the end of the block, after the rules they override. */
@media(max-width:560px){
  .vd-al li{grid-template-columns:minmax(0,1fr);gap:var(--s1);padding:var(--s4)}
  .vd-tt{padding:var(--s4)}
  .vd-stp li{padding:var(--s4) var(--s4) var(--s4) calc(var(--s4) + 2.4rem)}
  .vd-stp li::before{left:var(--s4)}
  .vd-tt-btn{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){
  .vd-tt-face,.vd-tt-pup{transition:none}
}
@media(forced-colors:active){
  .vd-tt-card,.vd-tt-skin,.vd-tt-sclera{fill:Canvas;stroke:CanvasText}
  .vd-tt-hole{fill:Canvas}
  .vd-tt-rim,.vd-tt-brow{stroke:CanvasText}
  .vd-tt-iris,.vd-tt-pupil,.vd-tt-t{fill:CanvasText}
  .vd-stp li::before{forced-color-adjust:none;background:CanvasText;color:Canvas}
}



/* ==== Calibration text, childhood and seeing traffic ==== */

/* ── Still developing through childhood: the milestone list ───────────────
   An ordered list, one card per ability. The age tag on the left is a scanning
   aid and is aria-hidden: the sentence beside it states the same age, so a
   screen reader loses nothing. Tokens only, so both themes and both reading
   registers follow. */
.vd-ms{
  list-style:none;display:grid;gap:var(--s3);
  max-width:calc(var(--measure) + 9rem);margin:var(--s8) 0;padding:0;
}
.vd-ms li{
  display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:var(--s4);align-items:start;
  padding:var(--s4) var(--s5);
  border:var(--card-edge);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--sh-1);
}
.vd-ms-age{
  font-family:var(--label-face);font-size:calc(var(--label-size) * .78rem);font-weight:500;
  letter-spacing:calc(var(--label-track) * .04em);text-transform:var(--label-case);
  line-height:1.5;color:var(--ink-strong);
}
.vd-ms-t{min-width:0;font-size:.95rem;line-height:1.7;color:var(--ink)}
.vd-ms-t a{
  color:var(--theme-1-ink);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.18em;transition:color var(--dur-1) var(--ease);
}
.vd-ms-t a:hover{color:var(--ink-strong)}

/* ── Seeing traffic: the looming-threshold table ──────────────────────────
   Numeric columns are right-aligned so the decimals line up. */
.vd-roadtbl{max-width:38rem}
.vd-roadtbl thead th:not(:first-child),.vd-roadtbl td{text-align:right}
.vd-roadtbl tbody th{font-weight:500;color:var(--ink-strong)}

/* Media queries stay at the end of the block, after the rules they override. */
@media(max-width:560px){
  .vd-ms li{grid-template-columns:minmax(0,1fr);gap:var(--s1);padding:var(--s4)}
}



/* ==== The acuity chart ==== */

/* ── The acuity chart (vd-chart.js) ───────────────────────────────────────
   An inline SVG drawn at the width it is given, plus a key and a table. Every
   colour is a site token, so it follows the theme; every series also has its
   own shape, so nothing depends on colour alone. The SVG's own text is the
   body face at a fixed pixel size, which is why it is drawn at the container's
   width instead of being scaled down on a phone. */
.vd-chart{
  min-width:0;max-width:100%;padding:var(--s4);
  background:var(--surface);border:var(--card-edge);border-radius:var(--r-lg);box-shadow:var(--sh-1);
}
.vd-ch-fig{margin:0;min-width:0}
.vd-ch-plot{min-width:0}
.vd-ch-svg{display:block;width:100%;height:auto;max-width:100%;overflow:visible}
.vd-ch-grid{stroke:var(--line);stroke-width:1;fill:none}
.vd-ch-axis{stroke:var(--line-control);stroke-width:1;fill:none}
.vd-ch-tick,.vd-ch-title{font-family:var(--bd);font-size:12px;fill:var(--ink-2)}
.vd-ch-slot{fill:var(--sunken);stroke:none}
.vd-ch-slot.vd-ch-on{stroke:var(--ink-strong);stroke-width:1.5}
.vd-ch-band{fill:var(--theme-1);fill-opacity:.2;stroke:none}
.vd-ch-edge{fill:none;stroke:var(--theme-1);stroke-width:1.25}
.vd-ch-mid{fill:none;stroke:var(--theme-1-ink);stroke-width:2;stroke-dasharray:6 4}
.vd-ch-nb1,.vd-ch-nb2{fill:var(--theme-2-ink);stroke:var(--surface);stroke-width:1.25}
.vd-ch-whisk{fill:none;stroke:var(--theme-2-ink);stroke-width:1.5}
.vd-ch-tri{fill:var(--surface);stroke:var(--theme-3-ink);stroke-width:2}
.vd-ch-sq{fill:var(--surface);stroke:var(--ink-steel);stroke-width:2}
.vd-ch-now-line{stroke:var(--ink-strong);stroke-width:2}
.vd-ch-now-dot{fill:var(--surface);stroke:var(--ink-strong);stroke-width:2.5}
.vd-ch-now-dot.vd-ch-ring{fill:none}
.vd-ch-now-t{
  font-family:var(--bd);font-size:12px;font-weight:600;fill:var(--ink-strong);
  paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round;
}

/* The key: one row per series, the swatch beside its words. */
.vd-ch-legend{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);margin:var(--s4) 0 0;padding:0;list-style:none;
  font-size:.82rem;line-height:1.45;color:var(--ink-2);
}
.vd-ch-legend li{display:flex;align-items:center;gap:var(--s2);min-width:0}
.vd-ch-key{flex:none;overflow:visible}
.vd-ch-legend a.cite{white-space:nowrap}
.vd-ch-note{
  max-width:var(--measure);margin:var(--s3) 0 0;
  font-size:.82rem;line-height:1.55;color:var(--ink-2);
}
.vd-ch-acts{margin-top:var(--s4)}
.vd-ch-table{margin-top:var(--s4)}
.vd-ch-scroll{max-width:100%;overflow-x:auto;border-radius:var(--r-sm)}
.vd-ch-scroll .vd-tbl{margin-bottom:var(--s6)}
.vd-ch-scroll .vd-tbl:last-child{margin-bottom:0}
.vd-ch-tbl th,.vd-ch-tbl td{white-space:normal}
.vd-ch-tbl .vd-ch-n{white-space:nowrap}
.vd-ch-tbl tbody th{font-weight:500;color:var(--ink-strong)}
.vd-ch-meth{font-size:.8rem;color:var(--ink-2)}

/* Media queries stay at the end of the block, after the rules they override. */
@media(max-width:560px){
  .vd-chart{padding:var(--s3)}
  .vd-ch-legend{flex-direction:column;flex-wrap:nowrap}
  .vd-ch-tbl th,.vd-ch-tbl td{padding-inline:var(--s2)}
}


/* ==== css:A1 Page structure: the header, Explore, Parents' questions, Myth or fact, the quiz stepper, For teachers ====

   Written for the redesign of October 2026 (_source/vision-development/
   REDESIGN-PLAN.md). Tokens only, so both themes and both reading registers
   follow. Media queries are at the END of this block, after the rules they
   override. The viewer's own rules are in css:shell and the guide's in
   css:guide; neither is touched here. */

/* ── The numbered eyebrow ─────────────────────────────────────────────────
   "2 Explore": the number is the sequence a first-time visitor can see. It
   replaces the short rule .vd-ey draws before its label, and it is aria-hidden
   because the "On this page" list in the header already carries the order. */
.vd-ey-s::before{display:none}
.vd-ey-n{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:1.55rem;height:1.55rem;border-radius:50%;
  background:var(--selected-bg);color:var(--selected-ink);
  font-family:var(--mn);font-size:.7rem;line-height:1;letter-spacing:0;
}

/* Tighter vertical rhythm than the site's 5rem: this page has six bands and
   they should not read as six pages. Scoped by id so the picture's own band
   (#look) keeps the spacing css:shell gives it. */
.vd #explore,.vd #faq,.vd #myths,.vd #about,.vd #refs{padding-block:var(--s12)}

/* ── The header ───────────────────────────────────────────────────────────
   Compact, like Building a Brain's, so the picture reaches the first screen:
   title and promise on one line where they fit, the "How to use this page"
   button (ships hidden, vd-guide.js reveals it) at the right, and "On this
   page" beneath. The selectors carry one more class than css:shell's
   .vd .phead rule, which is how they win without editing it. */
.vd .phead.vd-phead{padding:var(--s3) 0 var(--s3)}
.vd-ph{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s2) var(--s5)}
.vd-ph-t{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--s4)}
.vd .phead .vd-pe{flex:0 0 100%;margin-bottom:var(--s1)}
.vd .vd-phead h1{font-size:clamp(1.55rem,2.4vw,1.95rem);margin-bottom:0}
.vd-phead #phead-sub{font-size:.9rem;line-height:1.5}

.vd-ph-how{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:36px;padding:7px 16px;
  border:1px solid rgba(255,255,255,.34);border-radius:var(--r-md);
  color:var(--on-dark-1);font-size:.85rem;font-weight:500;line-height:1.3;white-space:nowrap;
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.vd-ph-how:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.06);color:var(--white)}

.vd-toc{
  grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s4);
  padding-top:var(--s2);border-top:1px solid var(--hairline-dark);
}
.vd-toc-l{
  flex:none;font-family:var(--label-face);font-size:calc(var(--label-size) * .66rem);
  letter-spacing:calc(var(--label-track) * .12em);text-transform:var(--label-case);
  line-height:1.4;color:var(--on-dark-3);
}
.vd-toc-list{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s1);padding:0;counter-reset:vdtoc}
.vd-toc-list li{counter-increment:vdtoc}
.vd-toc-list a{
  display:inline-flex;align-items:center;gap:var(--s2);
  min-height:30px;padding:2px var(--s3) 2px 3px;border-radius:var(--r-pill);
  color:var(--on-dark-1);font-size:.84rem;font-weight:500;line-height:1.3;white-space:nowrap;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.vd-toc-list a::before{
  content:counter(vdtoc);flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:1.4rem;height:1.4rem;border-radius:50%;border:1px solid rgba(255,255,255,.34);
  font-family:var(--mn);font-size:.66rem;line-height:1;color:var(--on-dark-2);
}
.vd-toc-list a:hover{background:rgba(255,255,255,.08);color:var(--white)}

/* ── Explore: the topic cards ─────────────────────────────────────────────
   Raised surfaces that lift on hover read as "press me", as the injury
   matrix's controls on the home page do. The selected card inverts, a filled
   pill like a selected chip, so the choice is a luminance step and not a hue.
   Twelve columns so seven cards make two full rows: four across, then three
   wider ones. */
.vd-ex-intro{margin-bottom:var(--s6)}
.vd-ex-intro:has(> [data-slot]:empty){display:none}
.vd-topics{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s3)}
.vd-tcard{
  grid-column:span 3;
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);
  min-width:0;padding:var(--s4) var(--s5);text-align:left;
  border:1px solid var(--line-control);border-radius:var(--r-lg);
  background:var(--surface);color:var(--ink);box-shadow:var(--sh-2);
  transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),
             border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease);
}
.vd-tcard:nth-child(n+5){grid-column:span 4}
.vd-tcard:hover{transform:translateY(-2px);box-shadow:var(--sh-3);border-color:var(--theme-1)}
.vd-tcard-t{font-family:var(--dp);font-size:1.15rem;line-height:1.2;letter-spacing:-.012em;color:var(--ink-strong)}
.vd-tcard-d{font-size:.85rem;line-height:1.5;color:var(--ink-2)}
.vd-tcard[aria-selected="true"],.vd-tcard[aria-selected="true"]:hover{
  transform:none;background:var(--selected-bg);border-color:var(--selected-bg);box-shadow:var(--sh-1);
}
/* The cards and the panel carry a shadow of their own, which would replace the
   site's focus ring (also a box-shadow) at equal or higher specificity. */
.vd-tcard:focus-visible,.vd-tcard[aria-selected="true"]:focus-visible{box-shadow:var(--ring-card)}
.vd-tcard[aria-selected="true"] .vd-tcard-t{color:var(--selected-ink)}
.vd-tcard[aria-selected="true"] .vd-tcard-d{color:var(--selected-ink);opacity:.86}

/* ── Explore: a topic ─────────────────────────────────────────────────────
   Without the script these are seven headed sections, set apart by a rule.
   Once vd-page.js has made them tab panels (.vd-tabs-on) the shown one is a
   card hung from the cards above it. */
.vd-panels{margin-top:var(--s5)}
.vd-topic + .vd-topic{margin-top:var(--s12);padding-top:var(--s8);border-top:1px solid var(--line)}
.vd-tabs-on .vd-topic{
  padding:var(--s6) var(--s8) var(--s8);
  background:var(--bg);border:var(--card-edge);border-top:3px solid var(--ink-steel);
  border-radius:var(--r-md) var(--r-md) var(--r-lg) var(--r-lg);box-shadow:var(--sh-1);
}
.vd-tabs-on .vd-topic + .vd-topic{margin-top:0}
.vd-topic:focus-visible{border-radius:var(--r-md)}
.vd-tabs-on .vd-topic:focus-visible{box-shadow:var(--ring)}
.vd-topic-h{font-size:clamp(1.4rem,2.2vw,1.75rem);line-height:1.2;color:var(--ink-strong);margin-bottom:var(--s3)}
.vd-tlede{max-width:var(--measure);margin-bottom:var(--s5);font-size:1.05rem;line-height:1.7;color:var(--ink)}
.vd-tlede:has(> [data-slot]:empty){display:none}
.vd-tlede > * + *{margin-top:var(--s3)}
.vd-tpl{
  margin:var(--s6) 0 var(--s2);
  font-family:var(--label-face);font-size:calc(var(--label-size) * .68rem);font-weight:400;
  letter-spacing:calc(var(--label-track) * .14em);text-transform:var(--label-case);
  line-height:1.4;color:var(--ink-2);
}
.vd-tpl:has(+ .vd-tpoints > [data-slot]:empty){display:none}
.vd-tpoints ul{list-style:none;display:grid;gap:var(--s3);max-width:var(--measure);padding:0}
.vd-tpoints li{position:relative;padding-left:1.4rem;font-size:.98rem;line-height:1.65;color:var(--ink)}
.vd-tpoints li::before{content:'';position:absolute;left:.15rem;top:.62em;width:.5rem;height:.5rem;border-radius:50%;background:var(--theme-1)}
.vd-tlede a,.vd-tpoints a,.vd-faq a,.vd-myth a,.vd-about-note a,.vd-fold-b a{
  color:var(--theme-1-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;
  transition:color var(--dur-1) var(--ease);
}
.vd-tlede a:hover,.vd-tpoints a:hover,.vd-faq a:hover,.vd-myth a:hover,.vd-about-note a:hover,.vd-fold-b a:hover{color:var(--ink-strong)}

/* The interactives sit in the panel at their own width. */
.vd-topic .vd-chart{margin:var(--s5) 0 var(--s2)}
.vd-topic .vd-chart:empty{display:none}
.vd-topic .vd-sub{margin-top:var(--s6)}
.vd-topic .vdc{margin-top:var(--s6)}

/* "See it in the picture": a link into the picture, here and in the answers. */
a.vd-see{font-weight:500}
a.vd-see::after{content:'\00a0\2192'}

/* ── The folds: "Read the full explanation", and the About folds ─────────
   Native <details>, with the +/- marker the site's other folds use. The
   summary's display is left alone: it is the property that has broken toggling
   in some browsers, so the height comes from padding. */
.vd-more,.vd-fold{border:1px solid var(--line-control);border-radius:var(--r-md);background:var(--surface)}
.vd-more{margin-top:var(--s6)}
.vd-more > summary,.vd-fold > summary{
  position:relative;list-style:none;cursor:pointer;
  padding:var(--s3) var(--s4) var(--s3) calc(var(--s4) + 1.5rem);
  border-radius:var(--r-md);
  font-size:.95rem;font-weight:600;line-height:1.5;color:var(--ink-strong);
}
.vd-more > summary::-webkit-details-marker,.vd-fold > summary::-webkit-details-marker{display:none}
.vd-more > summary::before,.vd-fold > summary::before{
  content:'+';position:absolute;left:var(--s4);top:50%;transform:translateY(-50%);
  width:1.1rem;text-align:center;font-family:var(--mn);color:var(--ink-2);
}
.vd-more[open] > summary::before,.vd-fold[open] > summary::before{content:'\2212'}
.vd-more > summary:hover,.vd-fold > summary:hover{background:var(--sunken)}
.vd-more[open] > summary,.vd-fold[open] > summary{border-bottom:1px solid var(--line);border-radius:var(--r-md) var(--r-md) 0 0}
.vd-more-b,.vd-fold-b{padding:var(--s2) var(--s5) var(--s6)}
.vd-more-b > :first-child,.vd-fold-b > :first-child{margin-top:var(--s4)}
.vd-more-b > .vd-prose:first-child > h4:first-child,.vd-more-b > h4:first-child{margin-top:0}
.vd-more-b .vd-lede{margin-bottom:var(--s4)}
.vd-more-b .vd-sub{margin-top:var(--s8)}

/* ── Questions parents ask ────────────────────────────────────────────── */
.vd-faq{max-width:50rem}
.vd-faq > [data-slot]{display:contents}
.vd-faq details{border-bottom:1px solid var(--line)}
.vd-faq details:first-child,.vd-faq > [data-slot] > details:first-child{border-top:1px solid var(--line)}
.vd-faq summary{
  position:relative;list-style:none;cursor:pointer;
  padding:var(--s4) var(--s4) var(--s4) 1.75rem;
  font-size:1.02rem;font-weight:600;line-height:1.5;color:var(--ink-strong);
}
.vd-faq summary::-webkit-details-marker{display:none}
.vd-faq summary::before{
  content:'+';position:absolute;left:0;top:calc(var(--s4) + .05em);
  width:1.1rem;text-align:center;font-family:var(--mn);color:var(--ink-2);
}
.vd-faq details[open] > summary::before{content:'\2212'}
.vd-faq summary:hover{color:var(--theme-1-ink)}
.vd-faq details > :not(summary){
  max-width:var(--measure);margin:0 0 var(--s4) 1.75rem;
  font-size:.96rem;line-height:1.7;color:var(--ink);
}
.vd-faq details > :not(summary) + :not(summary){margin-top:calc(-1 * var(--s2))}
/* The answers are written as <div class="vd-faq-a"> holding a paragraph and,
   where it fits, a "See it in the picture" line. */
.vd-faq-a > * + *{margin-top:var(--s2)}
.vd-faq-go{font-size:.92rem}

/* ── Myth or fact ─────────────────────────────────────────────────────────
   The claim is shown and the answer is behind a real button (vd-page.js).
   Without the script the verdict and reason simply follow the claim. */
.vd-myth-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);align-items:start}
.vd-myth-grid > [data-slot]{display:contents}
.vd-myth{
  min-width:0;display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5);
  background:var(--surface);border:var(--card-edge);border-radius:var(--r-lg);box-shadow:var(--sh-1);
}
.vd-myth[data-open="1"]{border-color:var(--ink-steel)}
.vd-myth-claim{font-family:var(--dp);font-size:1.2rem;line-height:1.3;letter-spacing:-.012em;color:var(--ink-strong)}
.vd-myth-btn{align-self:flex-start}
.vd-myth-a{display:grid;gap:var(--s2);padding-top:var(--s3);border-top:1px solid var(--line)}
.vd-myth-verdict{display:flex;align-items:center;gap:var(--s2);font-size:1.15rem;font-weight:600;line-height:1.35;color:var(--ink-strong)}
.vd-myth-mark{flex:none;display:inline-flex;color:var(--ink-steel)}
.vd-myth-mark svg{width:18px;height:18px}
.vd-myth-why{font-size:.92rem;line-height:1.65;color:var(--ink)}
.vd-myth-a .vd-see{font-size:.9rem}

/* ── For teachers and the curious ─────────────────────────────────────── */
.vd-about-sum{margin-bottom:var(--s4)}
.vd-about-sum:has(> [data-slot]:empty){display:none}
.vd-about-note{max-width:var(--measure);margin-bottom:var(--s6)}
/* The note is the fallback for the summary above it: it says the page has not
   been reviewed by a pediatric vision scientist and is not a reconstruction of
   what a baby sees, and it shows only while that summary is empty. Once the
   summary is filled in it carries the same sentence, and the note is redundant
   and can be deleted. */
.vd-about-sum:not(:has(> [data-slot]:empty)) + .vd-about-note{display:none}
.vd-abouts{display:grid;gap:var(--s3);max-width:calc(var(--measure) + 4rem)}
.vd-fold-b.vd-prose{max-width:none}
.vd-fold-b.vd-prose > ul{max-width:var(--measure)}

/* Media queries stay at the end of the block, after the rules they override. */
@media(max-width:999px){
  .vd-tcard,.vd-tcard:nth-child(n+5){grid-column:span 6}
  .vd-tcard:last-child:nth-child(odd){grid-column:1 / -1}
  .vd-myth-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:899px){
  /* "On this page" becomes one row that scrolls sideways, with a fade at the
     edge that says so, once its six links no longer fit on a line. */
  .vd-toc{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
            mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
  }
  .vd-toc::-webkit-scrollbar{display:none}
  .vd-toc-list{flex-wrap:nowrap;padding-right:var(--s6)}
}
@media(max-width:699px){
  .vd .phead.vd-phead{padding:var(--s2) 0 var(--s2)}
  /* The button takes the eyebrow's row, so the title is not pushed down. */
  .vd-ph{display:block;position:relative}
  .vd-ph-how{position:absolute;top:0;right:0;min-height:36px;padding:6px 12px;font-size:.8rem}
  .vd .phead .vd-pe{min-height:36px;display:flex;align-items:center;margin-bottom:0}
  .vd-ph-t{display:block}
  .vd-phead #phead-sub{font-size:.85rem}
  .vd-toc{margin-top:var(--s2)}
  .vd-toc-list a{min-height:32px}
  .vd #explore,.vd #faq,.vd #myths,.vd #about,.vd #refs{padding-block:var(--s10)}
  .vd-topics{gap:var(--s2)}
  .vd-tcard{padding:var(--s3) var(--s4)}
  .vd-tcard-t{font-size:1.05rem}
  .vd-tcard-d{font-size:.8rem}
  .vd-tabs-on .vd-topic{padding:var(--s5) var(--s4) var(--s6)}
  .vd-more-b,.vd-fold-b{padding-inline:var(--s4)}
  .vd-myth-grid{grid-template-columns:minmax(0,1fr)}
}
@media(pointer:coarse){
  .vd-ph-how{min-height:44px}
  .vd-myth-btn{min-height:44px}
}
@media(max-width:699px) and (pointer:coarse){
  /* The 44px button takes the eyebrow's whole row. */
  .vd .phead .vd-pe{min-height:44px}
}
@media(prefers-reduced-motion:reduce){
  .vd-tcard:hover{transform:none}
}
@media(forced-colors:active){
  .vd-tcard[aria-selected="true"],.vd-ey-n{forced-color-adjust:none;background:Highlight;border-color:Highlight;color:HighlightText}
  .vd-tcard[aria-selected="true"] .vd-tcard-t,.vd-tcard[aria-selected="true"] .vd-tcard-d{color:HighlightText;opacity:1}
  .vd-tabs-on .vd-topic{border-top-color:CanvasText}
  .vd-ph-how,.vd-toc-list a::before{border-color:CanvasText}
  .vd-tpoints li::before{background:CanvasText}
}


/* ==== css:guide: the "How to use this page" panel and the first-visit tour ====

   Driven by vd-guide.js. All of the wording is in index.html, between the
   region:guide comments. Keep this block LAST in the file.

   Classes carry a vg- prefix. State on the root element is vg-is-open (the
   panel) and vg-is-on (the tour), and neither may share a name with a
   component class: a component rule that also matched the root shifted
   Building a Brain's whole page 10px once.

   The offer, the tour card and the dimming sit above the site nav (z-index
   1000), so the dimming covers the whole page. The panel sits just under it,
   because it starts below the nav. Every colour is a token: surfaces and inks
   follow the theme, the ring is the two brand constants the site's own dark
   focus ring uses, and the two scrims are alphas of the colours the team
   modal and the QR dialog already use. */

.vg-offer[hidden],.vg-card[hidden],.vg-spot[hidden],.vg-ring[hidden],
.vg-drw[hidden],.vg-tab[hidden]{display:none!important}

.vg-offer,.vg-card{
  position:fixed;z-index:1100;box-sizing:border-box;
  width:min(360px,calc(100vw - 24px));padding:var(--s4) var(--s5);
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line-control);border-radius:var(--r-lg);box-shadow:var(--sh-3);
  font-size:.92rem;line-height:calc(var(--body-leading) - .15);
}
.vg-offer{right:16px;bottom:16px}
.vg-offer p{margin:0 0 var(--s3)}
.vg-card{z-index:1101}
.vg-card.vg-dock{right:16px;bottom:16px}
.vg-card h2{
  margin:2px 36px var(--s2) 0;
  font-family:var(--dp);font-weight:400;font-size:1.25rem;line-height:1.25;color:var(--ink-strong);
}
.vg-card p{margin:0 0 var(--s3)}
.vg-card strong{color:var(--ink-strong);font-weight:600}
.vg-card h2:focus-visible,.vg-drw-h h2:focus-visible{box-shadow:none}
.vg-row{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:flex-end}
/* The step counter is a mono micro-label, so it multiplies the --label-*
   tokens like the rest of the page's labels. */
.vg-n{
  margin:0;font-family:var(--label-face);font-size:calc(var(--label-size) * .72rem);
  letter-spacing:calc(var(--label-track) * .06em);text-transform:var(--label-case);
  line-height:1.4;color:var(--ink-2);
}

.vg-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:36px;padding:7px 16px;
  border:1px solid var(--line-control);border-radius:var(--r-md);
  background:var(--surface);color:var(--ink-steel);
  font-family:var(--bd);font-size:.85rem;font-weight:500;line-height:1.3;
  cursor:pointer;touch-action:manipulation;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease),
             border-color var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.vg-btn:hover{border-color:var(--theme-1);color:var(--theme-1-ink)}
.vg-btn:disabled{color:var(--ink-3);cursor:not-allowed}
.vg-btn:disabled:hover{border-color:var(--line-control);color:var(--ink-3)}
/* The primary action is the site's amber button, navy on amber, 8.91:1. */
.vg-pri{background:var(--brand-accent);border-color:var(--brand-accent);color:var(--brand-navy);font-weight:600}
.vg-pri:hover{border-color:var(--brand-accent);color:var(--brand-navy);box-shadow:var(--sh-glow-accent)}

.vg-x{
  position:absolute;top:6px;right:6px;width:36px;height:36px;
  border:0;border-radius:var(--r-md);background:none;color:var(--ink-2);
  font-size:1.35rem;line-height:1;cursor:pointer;
}
.vg-x:hover{background:var(--sunken);color:var(--ink-strong)}

/* .vg-spot dims the page with a hole for each lit part (an SVG path that
   vd-guide.js redraws), and .vg-ring marks the control the step is about,
   inside one of them. Neither takes pointer events, so a visitor can use the
   page during a step. */
.vg-spot{position:fixed;inset:0;z-index:1099;pointer-events:none}
.vg-spot svg{display:block;width:100%;height:100%}
.vg-spot path{fill:rgba(13,31,60,.5)}
[data-theme="dark"] .vg-spot path{fill:rgba(4,8,16,.66)}
.vg-ring{position:fixed;z-index:1099;border-radius:var(--r-lg);pointer-events:none;box-shadow:0 0 0 3px var(--brand-navy),0 0 0 6px var(--brand-accent)}

/* The panel. At 1000px and up it is a column on the right, below the nav, and
   the page moves over to make room for it (#main and the footer take a right
   margin; the nav stays full width, since it needs 1040px for its row). Below
   1000px there is no room side by side, so it is a sheet over the lower half
   of the screen, and the page gets bottom padding so everything can still be
   scrolled into view above it. --vg-top is the nav's measured height, set by
   vd-guide.js: the nav is 65px on one line and taller where the name wraps. */
.vg-drw{
  position:fixed;z-index:990;box-sizing:border-box;display:flex;flex-direction:column;
  background:var(--surface);color:var(--ink);
  font-size:.92rem;line-height:calc(var(--body-leading) - .15);
}
.vg-drw-h{
  flex:none;display:flex;align-items:center;gap:var(--s2);
  padding:var(--s2) var(--s2) var(--s2) var(--s5);border-bottom:1px solid var(--line);
}
.vg-drw-h h2{
  flex:1;min-width:0;margin:0;
  font-family:var(--dp);font-weight:400;font-size:1.3rem;line-height:1.25;color:var(--ink-strong);
}
.vg-drw-h .vg-x{position:static;flex:none}
.vg-drw-b{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--s4) var(--s5) var(--s5)}
.vg-drw h3{
  margin:var(--s5) 0 var(--s2);
  font-family:var(--bd);font-weight:600;font-size:1rem;line-height:1.3;color:var(--ink-strong);
}
.vg-drw p,.vg-drw ul{margin:0 0 var(--s2)}
.vg-drw ul{padding-left:1.2rem}
.vg-drw li{margin:3px 0}
.vg-drw strong{color:var(--ink-strong);font-weight:600}
.vg-lede{color:var(--ink-2)}
.vg-drw a{
  color:var(--theme-1-ink);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.18em;
}
.vg-drw a:hover{color:var(--ink-strong)}
.vg-drw kbd,.vg-drw code{
  padding:0 .35em;border:1px solid var(--line-control);border-radius:var(--r-sm);
  background:var(--sunken);color:var(--ink-strong);
  font-family:var(--mn);font-size:.82em;white-space:nowrap;
}
.vg-drw code{overflow-wrap:anywhere;white-space:normal}
.vg-offer :focus-visible,.vg-card :focus-visible,.vg-drw :focus-visible,.vg-tab:focus-visible{box-shadow:var(--ring-card)}

/* The collapsed handle: a tab on the right edge, or a pill in the corner on
   small screens. Hidden while the panel is open and during the tour. */
.vg-tab{
  position:fixed;z-index:990;right:0;top:50%;transform:translateY(-50%);
  writing-mode:vertical-rl;padding:14px 6px;
  border:1px solid var(--line-control);border-right:0;border-radius:var(--r-md) 0 0 var(--r-md);
  background:var(--surface);color:var(--ink-strong);
  font-family:var(--bd);font-size:.8rem;font-weight:600;line-height:1;
  cursor:pointer;box-shadow:var(--sh-2);
}
.vg-tab:hover{border-color:var(--theme-1);color:var(--theme-1-ink)}
html.vg-is-open .vg-tab,html.vg-is-on .vg-tab{display:none}

@media(pointer:coarse){
  .vg-btn,.vg-x,.vg-tab{min-height:44px}
  .vg-x{width:44px;height:44px}
  .vg-tab{min-width:44px}
}
@media(min-width:1000px){
  .vg-drw{
    top:var(--vg-top,calc(var(--nav-h) + 1px));right:0;bottom:0;width:320px;
    border-left:1px solid var(--line-control);box-shadow:var(--sh-3);
  }
  html.vg-is-open #main,html.vg-is-open footer.pf{margin-right:320px}
  .vg-full-btn{display:none}
}
@media(max-width:999px){
  .vg-drw{
    left:0;right:0;bottom:0;height:50vh;height:50dvh;
    border-top:1px solid var(--line-control);border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--sh-3);
  }
  .vg-drw.vg-full{height:calc(100vh - var(--vg-top,65px));height:calc(100dvh - var(--vg-top,65px));border-radius:0}
  html.vg-is-open body{padding-bottom:50vh;padding-bottom:50dvh}
  .vg-tab{
    top:auto;bottom:12px;right:12px;transform:none;writing-mode:horizontal-tb;
    padding:10px 14px;border-right:1px solid var(--line-control);border-radius:var(--r-pill);
  }
}
@media(max-width:640px){
  .vg-offer,.vg-card.vg-dock{left:12px;right:12px;bottom:12px;width:auto}
}
/* Windows High Contrast drops box-shadow, so the highlight needs an outline. */
@media(forced-colors:active){
  .vg-spot{display:none}
  .vg-ring{box-shadow:none;outline:3px solid Highlight}
}
@media print{
  .vg-offer,.vg-card,.vg-spot,.vg-ring,.vg-drw,.vg-tab,#vdGdOpen{display:none!important}
}

/* css:review  main session, 18 October 2026
   A short laptop window (1366x768, 1280x800): the page's own eyebrow and some of
   the section's top padding give their height to the picture and its controls.
   The eyebrow repeats what the nav already marks (Teaching). */
@media (min-width:1000px) and (max-height:860px){
  .vd-phead .vd-pe{display:none}
  #look.vd-sec{padding-top:var(--s2)}
}