/* GENERATED by build.py from style.css - do not edit.
   Only the sections that style site.js's widgets. */

/* ---- prose tables --------------------------------------------------
   A data table in running text - not the widget's own scale table,
   which has its own class. Kept inside the prose column, same as code
   blocks and <hr>, rather than stretched to figure width: these tables
   are short (a handful of columns of numbers), and figure-width would
   just spread the digits apart with nothing gained. */

article.post table {
  width: 100%;
  margin: 2rem 0;
  border-collapse: collapse;
  font: 0.85rem var(--mono);
}

article.post th,
article.post td {
  text-align: left;
  padding: 0.5rem 0.9rem 0.5rem 0;
  border-bottom: 1px solid var(--hairline);
  font-variant-numeric: tabular-nums;
}

article.post th {
  font-weight: 400;
  color: var(--faint);
  letter-spacing: 0.03em;
}

article.post td { color: var(--grey); }

@media (max-width: 600px) {
  article.post table { font-size: 0.78rem; }
  article.post th, article.post td { padding-right: 0.5rem; }
}

/* ---- grokking figure --------------------------------------------- */
/* Interactive accuracy plot. Hidden until site.js has fetched the run
   data and added .is-ready, so a failed fetch shows nothing rather than
   empty axes; <noscript> carries the original static plot. */

/* article.post figure sets margin:0, so this needs the same prefix to
   win on specificity and keep the figure clear of the surrounding prose. */
article.post .grok-demo { margin: 2.75rem 0 3rem; }
.grok-demo .grok-head,
.grok-demo .grok-plot,
.grok-demo .grok-scrub { display: none; }
/* .grok-head must come back as flex, not block: a blanket display:block
   here outranks the flex declaration below and silently kills the
   switch/readout row layout. */
.grok-demo.is-ready .grok-head { display: flex; }
.grok-demo.is-ready .grok-plot,
.grok-demo.is-ready .grok-scrub { display: block; }

.grok-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

/* ---- segmented switch indicator -----------------------------------
   Shared by every real single-select switch (weight decay, ray mode,
   hash-digest length): one block that slides to whichever button is
   pressed, mounted by site.js's mountSwitchIndicator(). Scoped with
   :has() rather than a shared markup class so the birthday-demo run
   controls (step / auto-run / reset - independent actions, not a
   choice) are untouched: site.js only ever mounts an indicator on the
   three containers that are genuinely one-of-many switches, and this
   rule only fires where that indicator actually exists. */
.grok-switch,
.ray-switch,
.birthday-switch,
.blocksize-switch {
  position: relative;
}

.grok-switch button,
.ray-switch button,
.birthday-switch button,
.blocksize-switch button {
  position: relative;
  z-index: 1;
}

.switch-indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--ink);
  z-index: 0;
  pointer-events: none;
  transition: transform 200ms cubic-bezier(.16, .78, .18, 1),
    width 200ms cubic-bezier(.16, .78, .18, 1);
}

.grok-switch:has(.switch-indicator) button[aria-pressed="true"],
.ray-switch:has(.switch-indicator) button[aria-pressed="true"],
.birthday-switch:has(.switch-indicator) button[aria-pressed="true"],
.blocksize-switch:has(.switch-indicator) button[aria-pressed="true"] {
  background: none;
}

@media (prefers-reduced-motion: reduce) {
  .switch-indicator { transition: none; }
}

.grok-switch { display: flex; gap: 0; }

.grok-switch button {
  font: 0.7rem var(--mono);
  letter-spacing: 0.04em;
  padding: 0.35rem 0.7rem;
  background: none;
  color: var(--grey);
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.grok-switch button + button { border-left: 0; }
.grok-switch button:hover { color: var(--ink); border-color: var(--ink); }

.grok-switch button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.grok-readout {
  margin: 0;
  display: flex;
  gap: 1rem;
  font: 0.7rem var(--mono);
  letter-spacing: 0.03em;
  color: var(--faint);
}

.grok-readout b { font-weight: 400; color: var(--ink); }

.grok-plot { width: 100%; height: auto; overflow: visible; }

.grok-plot .grok-grid { stroke: var(--hairline); stroke-width: 1; }
.grok-plot .grok-axis,
.grok-plot .grok-tick { stroke: var(--grey); stroke-width: 1; }

.grok-plot .grok-label {
  fill: var(--faint);
  font-family: var(--mono);
  font-size: 11px;
}

.grok-plot .grok-label-y { text-anchor: end; }
.grok-plot .grok-label-x { text-anchor: middle; }

.grok-plot .grok-line-train,
.grok-plot .grok-line-val { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.grok-plot .grok-line-train,
.grok-plot .grok-swatch-train { stroke: var(--grey); stroke-width: 1.2; }
.grok-plot .grok-line-val,
.grok-plot .grok-swatch-val { stroke: var(--ink); stroke-width: 2; }

.grok-plot .grok-grokline {
  stroke: var(--grey);
  stroke-width: 1;
  stroke-dasharray: 4 5;
}

.grok-plot .grok-grokline[hidden] { display: none; }
.grok-plot .grok-head-line { stroke: var(--ink); stroke-width: 1; opacity: 0.35; }
.grok-plot .grok-dot-train { fill: var(--grey); }
.grok-plot .grok-dot-val { fill: var(--ink); }

.grok-scrub { margin-top: 0.5rem; }
.grok-scrub input { width: 100%; accent-color: var(--ink); cursor: pointer; }

/* article.post figcaption pulls captions up under an <img>; this figure
   has a slider there instead, so cancel the negative margin. Needs the
   article.post prefix to outrank that rule's specificity. */
article.post .grok-demo figcaption {
  margin-top: 1rem;
  margin-bottom: 0;
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  .grok-switch button { transition: none; }
}

/* ---- Lorenz divergence figure -------------------------------------- */

article.post .chaos-demo { margin: 2.75rem 0 3rem; }

.chaos-demo .chaos-head,
.chaos-demo .chaos-canvas { display: none; }
.chaos-demo.is-ready .chaos-head { display: flex; }
.chaos-demo.is-ready .chaos-canvas { display: block; }

.chaos-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.chaos-restart {
  font: 0.7rem var(--mono);
  letter-spacing: 0.04em;
  padding: 0.35rem 0.7rem;
  background: none;
  color: var(--grey);
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.chaos-restart:hover { color: var(--ink); border-color: var(--ink); }

.chaos-readout {
  margin: 0;
  font: 0.7rem var(--mono);
  letter-spacing: 0.03em;
  color: var(--faint);
}

.chaos-readout b { font-weight: 400; color: var(--ink); }

.chaos-demo .chaos-params { display: none; }
.chaos-demo.is-ready .chaos-params { display: flex; }

.chaos-params {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.5rem;
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--hairline);
}

.chaos-params label {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font: 0.7rem var(--mono);
  letter-spacing: 0.03em;
  color: var(--faint);
}

.chaos-params output {
  min-width: 2.6em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.chaos-params input[type="range"] {
  width: 6.5rem;
  accent-color: var(--ink);
  cursor: pointer;
}

.chaos-defaults {
  font: 0.7rem var(--mono);
  letter-spacing: 0.04em;
  padding: 0.3rem 0.6rem;
  background: none;
  color: var(--grey);
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.chaos-defaults:hover { color: var(--ink); border-color: var(--ink); }

.chaos-canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 852 / 480;
  border: 1px solid var(--hairline);
}

article.post .chaos-demo figcaption {
  margin-top: 1rem;
  margin-bottom: 0;
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  .chaos-restart,
  .chaos-defaults { transition: none; }
}

/* ---- sphere-tracing figure ----------------------------------------- */

article.post .ray-demo { margin: 2.75rem 0 3rem; }

.ray-demo .ray-head,
.ray-demo .ray-canvas { display: none; }
.ray-demo.is-ready .ray-head { display: flex; }
.ray-demo.is-ready .ray-canvas { display: block; }

.ray-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.ray-switch { display: flex; gap: 0; }

.ray-switch button {
  font: 0.7rem var(--mono);
  letter-spacing: 0.04em;
  padding: 0.35rem 0.7rem;
  background: none;
  color: var(--grey);
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.ray-switch button + button { border-left: 0; }
.ray-switch button:hover { color: var(--ink); border-color: var(--ink); }

.ray-switch button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.ray-readout {
  margin: 0;
  font: 0.7rem var(--mono);
  letter-spacing: 0.03em;
  color: var(--faint);
}

.ray-readout b { font-weight: 400; color: var(--ink); }

.ray-canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 852 / 420;
  border: 1px solid var(--hairline);
  cursor: crosshair;
}

article.post .ray-demo figcaption {
  margin-top: 1rem;
  margin-bottom: 0;
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  .ray-switch button { transition: none; }
}

/* ---- birthday-collision figures ------------------------------------ */

article.post .birthday-demo,
article.post .birthday-scale { margin: 2.75rem 0 3rem; }

.birthday-demo .birthday-head,
.birthday-demo .birthday-readout,
.birthday-demo .birthday-grid,
.birthday-demo .birthday-hist-wrap,
.birthday-scale .birthday-scale-head,
.birthday-scale .birthday-scale-body { display: none; }

.birthday-demo.is-ready .birthday-head,
.birthday-demo.is-ready .birthday-readout,
.birthday-demo.is-ready .birthday-grid,
.birthday-demo.is-ready .birthday-hist-wrap { display: block; }
.birthday-demo.is-ready .birthday-head { display: flex; }

.birthday-scale.is-ready .birthday-scale-head,
.birthday-scale.is-ready .birthday-scale-body { display: block; }

.birthday-head {
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
  margin-bottom: 1.1rem;
}

.birthday-n {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font: 0.7rem var(--mono);
  letter-spacing: 0.03em;
  color: var(--faint);
}

.birthday-n output {
  min-width: 3.4em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.birthday-n input[type="range"] {
  width: 9rem;
  accent-color: var(--ink);
  cursor: pointer;
}

/* Reuses the switch-button look already established by grok/chaos/ray -
   same visual language for every widget's controls, on purpose. */
.birthday-switch,
.birthday-scale-head .birthday-switch { display: flex; gap: 0; flex-wrap: wrap; }

.birthday-switch button {
  font: 0.7rem var(--mono);
  letter-spacing: 0.04em;
  padding: 0.35rem 0.7rem;
  background: none;
  color: var(--grey);
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.birthday-switch button + button { border-left: 0; }
.birthday-switch button:hover { color: var(--ink); border-color: var(--ink); }
.birthday-switch button:disabled { opacity: 0.4; cursor: default; }

.birthday-switch button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.birthday-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin: 0 0 0.85rem;
  font: 0.7rem var(--mono);
  letter-spacing: 0.03em;
  color: var(--faint);
}

.birthday-readout b { font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
.birthday-readout .is-hit { color: var(--ink); }

.birthday-grid {
  width: 100%;
  height: auto;
  aspect-ratio: 852 / 280;
  border: 1px solid var(--hairline);
  margin-bottom: 1.25rem;
}

.birthday-hist-label {
  margin: 0 0 0.5rem;
  font: 0.68rem var(--mono);
  letter-spacing: 0.03em;
  color: var(--faint);
}

.birthday-hist-label b { font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }

.birthday-hist {
  width: 100%;
  height: auto;
  aspect-ratio: 852 / 140;
  border: 1px solid var(--hairline);
}

article.post .birthday-demo figcaption,
article.post .birthday-scale figcaption {
  margin-top: 1rem;
  margin-bottom: 0;
  text-align: left;
}

.birthday-scale-head { margin-bottom: 1.25rem; }

.birthday-scale-body {
  border: 1px solid var(--hairline);
  padding: 1.25rem 1.4rem;
}

.birthday-scale-stat {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 0.4rem 0;
  font: 0.85rem var(--mono);
  color: var(--grey);
  border-bottom: 1px solid var(--hairline);
}

.birthday-scale-stat b { font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }

.birthday-scale-table {
  width: 100%;
  margin-top: 0.9rem;
  border-collapse: collapse;
  font: 0.78rem var(--mono);
}

.birthday-scale-table th,
.birthday-scale-table td {
  text-align: left;
  padding: 0.5rem 0.6rem 0.5rem 0;
  border-bottom: 1px solid var(--hairline);
  font-variant-numeric: tabular-nums;
}

.birthday-scale-table th {
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.66rem;
  color: var(--faint);
}

.birthday-scale-table td:last-child { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .birthday-switch button { transition: none; }
}

@media (max-width: 600px) {
  .birthday-n input[type="range"] { width: 6rem; }
  .birthday-scale-table { font-size: 0.72rem; }
}

/* ---- colormap carousel ------------------------------------------- */
/* Lives here rather than in a per-post <style> block: the page CSP sets
   style-src without 'unsafe-inline', so an inline <style> is blocked and
   the carousel silently collapsed into 11 stacked full-size images. */

.colormap-carousel { margin: 1.5rem 0 2rem; }

.colormap-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 0.25rem;
}

.colormap-slide {
  flex: 0 0 85%;
  max-width: 420px;
  scroll-snap-align: center;
  scroll-margin-left: 1rem;
  margin: 0;
}

.colormap-slide img {
  width: 100%;
  display: block;
  border-radius: 4px;
}

.colormap-slide figcaption {
  text-align: center;
  margin-top: 0.4rem;
  font-size: 0.85em;
  opacity: 0.75;
}

.colormap-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin-top: 0.75rem;
}

.colormap-dots a {
  font-size: 0.6rem;
  line-height: 1;
  text-decoration: none;
  opacity: 0.35;
  transition: opacity 0.15s;
}

.colormap-dots a:hover,
.colormap-dots a:focus { opacity: 1; }

@media (min-width: 640px) {
  .colormap-slide { flex-basis: 45%; }
}

/* ---- in-app browser banner ----------------------------------------- */

.iab-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  padding: 0.65rem 2.25rem 0.65rem 1rem;
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  font: 0.75rem/1.5 var(--mono);
  text-align: center;
  position: relative;
}

.iab-banner a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.iab-close {
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
  font: 1rem/1 var(--mono);
  color: inherit;
  background: none;
  border: 0;
  padding: 0.2rem 0.4rem;
  cursor: pointer;
  opacity: 0.7;
}

.iab-close:hover { opacity: 1; }

/* ---- 3D structure viewer (3Dmol.js) --------------------------------
   The one place on the site color is load-bearing rather than
   decorative: pLDDT confidence has an actual meaning, and AlphaFold's
   own four-band palette is the shared vocabulary for reading it, so
   it's kept exactly rather than translated to monochrome. Everything
   around it - labels, borders, the legend text - stays inside the
   site's usual ink/paper/hairline set. */

article.post .structure-demo { margin: 2.75rem 0 3rem; }

.structure-demo .structure-head,
.structure-demo .structure-panels { display: none; }
.structure-demo.is-ready .structure-head { display: flex; }
.structure-demo.is-ready .structure-panels { display: grid; }

.structure-head {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.25rem;
  font: 0.7rem var(--mono);
  letter-spacing: 0.03em;
  color: var(--faint);
}

.structure-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; }

.structure-key { display: inline-flex; align-items: center; gap: 0.4rem; }

.structure-swatch {
  width: 0.7rem;
  height: 0.7rem;
  flex: 0 0 auto;
  border: 1px solid var(--hairline);
}
.structure-swatch.is-high { background: #0053D6; }
.structure-swatch.is-confident { background: #65CBF3; }
.structure-swatch.is-low { background: #FFDB13; }
.structure-swatch.is-verylow { background: #FF7D45; }

.structure-panels {
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.structure-panel { border: 1px solid var(--hairline); }

.structure-panel-label {
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--hairline);
  font: 0.68rem var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
}

.structure-viewer {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  cursor: grab;
}
.structure-viewer:active { cursor: grabbing; }

.structure-scores {
  margin: 0;
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid var(--hairline);
  font: 0.72rem var(--mono);
  letter-spacing: 0.03em;
  color: var(--faint);
}
.structure-scores b { font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }

.structure-pae-label {
  padding: 0.55rem 0.85rem 0;
  font: 0.65rem var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
}

.structure-pae {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin-top: 0.55rem;
}

article.post .structure-demo figcaption {
  margin-top: 1rem;
  margin-bottom: 0;
  text-align: left;
}

.structure-downloads {
  margin: 0.9rem 0 0;
  font: 0.72rem var(--mono);
  letter-spacing: 0.03em;
  color: var(--faint);
}

@media (max-width: 700px) {
  .structure-panels { grid-template-columns: 1fr; }
}