/* ============================================================================
   proof (#prueba) · confianza.
   A ledger of hairline cells holds three voices: the lead quote beside a gold
   panel where an e-ink tablet fills itself in, then two voices at two scales, each
   with a small line drawing of what they said. Then a case file (folder
   tab, instrument brackets) whose process untangles with your scroll and
   runs live, a stopwatch at 18 minutes, and the Gen 1 strip.
   The accent lives only on the gold panel and inside the case; the voices,
   their drawings and the strip are ink.
   Every drawn state is the finished state unless JS arms it (.proof--armed),
   so no-JS and reduced motion always show complete content.
   ========================================================================== */

.proof {
  --pf-pad: clamp(1.6rem, 2.7vw, 2.75rem);
  --pf-line: var(--rule);
  overflow-x: clip;
}
.proof__h { max-width: 16ch; margin-bottom: clamp(2.8rem, 6.5vh, 4.25rem); }

/* ------------------------------------------------------------- ledger -- */
.proof__sheet {
  --lx: -50rem; --ly: -50rem;
  position: relative; isolation: isolate;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px; padding: 1px;
  background: var(--pf-line);
}
/* Lines that ink in near the pointer: this layer sits under the opaque
   cells, so it only shows through the 1px gaps. */
.proof__sheet::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(19rem 19rem at var(--lx) var(--ly),
    color-mix(in oklab, var(--sc-ink) 62%, transparent) 0%,
    color-mix(in oklab, var(--sc-ink) 26%, transparent) 38%,
    transparent 70%);
  opacity: 0; transition: opacity 360ms var(--ease-out);
}
.proof__sheet.is-lit::before { opacity: 1; }
.proof__sheet > * { position: relative; z-index: 1; }

/* registration marks, as on a printed sheet */
.proof__sheet > .proof__reg {
  position: absolute; z-index: 2; width: 13px; height: 13px; pointer-events: none;
  background:
    linear-gradient(var(--rule-strong), var(--rule-strong)) center / 1px 100% no-repeat,
    linear-gradient(var(--rule-strong), var(--rule-strong)) center / 100% 1px no-repeat;
}
.proof__reg--tl { left: -24px; top: -24px; }
.proof__reg--tr { right: -24px; top: -24px; }
.proof__reg--bl { left: -24px; bottom: -24px; }
.proof__reg--br { right: -24px; bottom: -24px; }

.proof__cell {
  background: var(--ground);
  padding: var(--pf-pad);
  transition: background-color var(--theme-dur) var(--ease-out);
}

/* -------------------------------------------------------- lead quote -- */
.proof__lead {
  grid-column: 1 / -1; margin: 0;
  display: grid; grid-template-columns: subgrid;
}
@supports not (grid-template-columns: subgrid) {
  .proof__lead { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1px; }
  .proof__lead > .proof__panel, .proof__lead > .proof__lead-body { grid-column: auto; }
}
.proof__panel {
  grid-column: 1 / 6;
  position: relative; overflow: hidden;
  min-height: clamp(24rem, 58vh, 33rem);
  display: grid; place-items: center;
  background: var(--ground);
  color: var(--sc-accent-ink);
}
.proof__gold {
  position: absolute; inset: 0;
  background: var(--sc-accent);
  transition: background-color var(--theme-dur) var(--ease-out);
}
/* engraved shading: denser toward the lower left, so the gold reads printed */
.proof__gold::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(-36deg,
    color-mix(in oklab, var(--sc-accent-ink) 13%, transparent) 0 1px, transparent 1px 6px);
  -webkit-mask: radial-gradient(95% 85% at 12% 100%, #000 0%, rgb(0 0 0 / 0.55) 38%, transparent 72%);
          mask: radial-gradient(95% 85% at 12% 100%, #000 0%, rgb(0 0 0 / 0.55) 38%, transparent 72%);
}
.proof__gold::after { /* a hairline sun rising behind the tablet: its upper half clears the top edge */
  content: ""; position: absolute; left: 52%; top: 30%;
  width: 96%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: repeating-radial-gradient(circle,
    color-mix(in oklab, var(--sc-accent-ink) 10%, transparent) 0 1px, transparent 1px 7px);
  -webkit-mask: radial-gradient(closest-side, #000 60%, transparent 100%);
          mask: radial-gradient(closest-side, #000 60%, transparent 100%);
}
.proof__panel .proof__ticks { position: absolute; inset: 1.1rem; padding: 0; z-index: 2; }
.proof__ticks::before, .proof__ticks::after { --t: 13px; --c: color-mix(in oklab, var(--sc-accent-ink) 60%, transparent); }
.proof__nb {
  position: relative; z-index: 1;
  width: min(96%, 32rem); aspect-ratio: 1100 / 855;
  will-change: transform;
}
/* the tablet's body: an opaque gold silhouette (hull of tableta.webp, taken
   from its alpha) under the engraved lines, so the sun rings and the shading of
   the panel stop at the tablet instead of showing through its screen */
.proof__nb-body {
  position: absolute; inset: 0;
  background: var(--sc-accent);
  transition: background-color var(--theme-dur) var(--ease-out);
  -webkit-clip-path: polygon(42.91% 5.73%, 41.64% 6.32%, 40.64% 7.60%, 6.45% 65.26%, 4.64% 68.54%, 4.45% 69.24%, 4.55% 71.23%, 4.82% 72.05%, 5.09% 72.40%, 6.73% 73.22%, 59.64% 94.15%, 61.00% 94.15%, 62.00% 93.57%, 63.09% 91.81%, 82.36% 51.93%, 95.27% 25.85%, 95.55% 25.03%, 95.55% 23.04%, 95.27% 22.22%, 94.91% 21.75%, 93.82% 21.17%, 43.73% 5.73%);
          clip-path: polygon(42.91% 5.73%, 41.64% 6.32%, 40.64% 7.60%, 6.45% 65.26%, 4.64% 68.54%, 4.45% 69.24%, 4.55% 71.23%, 4.82% 72.05%, 5.09% 72.40%, 6.73% 73.22%, 59.64% 94.15%, 61.00% 94.15%, 62.00% 93.57%, 63.09% 91.81%, 82.36% 51.93%, 95.27% 25.85%, 95.55% 25.03%, 95.55% 23.04%, 95.27% 22.22%, 94.91% 21.75%, 93.82% 21.17%, 43.73% 5.73%);
}
.proof__nb-img {
  position: absolute; inset: 0; --engr-ink: var(--sc-accent-ink);
  /* set here, not through --src: a url() inside a custom property resolves
     against core.css, which points at css/assets/. The box's aspect (1100 / 855)
     must match the mask and the ink's viewBox, or the writing drifts off the screen. */
  -webkit-mask: url(../../assets/misc/tableta.webp) center / contain no-repeat;
          mask: url(../../assets/misc/tableta.webp) center / contain no-repeat;
}
.proof__nb-ink { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.proof__nb-ink path {
  fill: none; stroke: var(--sc-accent-ink);
  stroke-width: 3.1; stroke-linecap: round; stroke-linejoin: round;
}
.proof__nb-ink .nb-box { stroke-width: 2.6; }
.proof__nb-ink .nb-check { stroke-width: 4.4; }

.proof__lead-body { grid-column: 6 / -1; display: flex; align-items: center; padding: clamp(2.2rem, 4vw, 4rem) clamp(2rem, 4.4vw, 4.75rem); }
.proof__lead-in { margin: 0; width: 100%; display: flex; flex-direction: column; gap: clamp(2rem, 5.5vh, 3.25rem); }
.proof__lead-q { margin: 0; }
.proof__lead-q p {
  position: relative;
  font-family: var(--sc-font-display);
  font-optical-sizing: auto;
  font-weight: 420;
  font-size: clamp(1.95rem, 1.05rem + 1.85vw, 2.9rem);
  line-height: 1.1; letter-spacing: -0.022em;
  text-wrap: balance; max-width: 19ch;
  color: var(--sc-ink);
}
:root[data-theme="night"] .proof__lead-q p { font-weight: 420; letter-spacing: -0.016em; }
.proof__lead-q p::before, .proof__q p::before {
  content: "\201C"; position: absolute; right: 100%; top: 0;
  margin-right: 0.06em; color: var(--sc-ink-soft);
}

/* the highlighter pass over "en una semana" */
.proof__mark {
  --hl: color-mix(in oklab, var(--sc-accent) 66%, transparent);
  --hl-h: 0.4em; --hl-y: 86%;
  color: inherit; background-color: transparent;
  padding: 0 0.05em; margin: 0 -0.05em;
  background-image: linear-gradient(var(--hl), var(--hl));
  background-repeat: no-repeat;
  background-position: 0 var(--hl-y);
  background-size: 100% var(--hl-h);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* at night a translucent fill turns muddy on the dark paper: the pass is a
   line of sodium ink under the phrase instead */
:root[data-theme="night"] .proof__mark { --hl: color-mix(in oklab, var(--sc-accent) 92%, transparent); --hl-h: 0.085em; --hl-y: 91%; }

/* armed lead: the gold rises, the tablet settles onto it, the highlighter
   passes over the phrase that matters */
.proof--armed .proof__gold { clip-path: inset(100% 0 0 0); transition: clip-path 1050ms var(--ease-io), background-color var(--theme-dur) var(--ease-out); }
.proof--armed .proof__lead.is-in .proof__gold { clip-path: inset(0 0 0 0); }
.proof--armed .proof__nb-img, .proof--armed .proof__ticks { opacity: 0; transition: opacity 700ms var(--ease-out) 380ms; }
/* the body waits for the gold to have risen under it, so it never shows as a gold
   tablet on bare paper; the sun then slips behind it */
.proof--armed .proof__nb-body { opacity: 0; transition: opacity 500ms var(--ease-out) 800ms, background-color var(--theme-dur) var(--ease-out); }
.proof--armed .proof__lead.is-in .proof__nb-img, .proof--armed .proof__lead.is-in .proof__nb-body, .proof--armed .proof__lead.is-in .proof__ticks { opacity: 1; }
.proof--armed .proof__mark { transition: background-size 1000ms var(--ease-out) 900ms; }
.proof--armed .proof__lead:not(.is-in) .proof__mark { background-size: 0% var(--hl-h); }
.proof--armed .proof__lead.is-marked .proof__mark { transition: none; }

/* attribution */
.proof__by {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem; row-gap: 0.2rem; align-items: center; margin: 0;
}
.proof__name { grid-column: 1; font: 560 0.98rem/1.3 var(--sc-font-text); color: var(--sc-ink); letter-spacing: -0.005em; }
.proof__role { grid-column: 1; font: 400 0.9rem/1.4 var(--sc-font-text); color: var(--sc-ink-soft); }
.proof__prog { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
.proof__lead .proof__by { padding-top: 1.2rem; border-top: 1px solid var(--rule); }

/* ------------------------------------------------------------ voices -- */
/* Two voices under the lead, at two scales. José takes the wide cell, his
   words first and large; Daniela the narrow one, her drawing first and her
   words set low. The row splits 7|5 against the lead's 5|7, so no column
   line runs through both rows, and the two signatures close on one line. */
.proof__v { margin: 0; display: flex; }
.proof__v-in { margin: 0; width: 100%; display: flex; flex-direction: column; gap: 1.6rem; }
.proof__v--jose { grid-column: 1 / 8; }
.proof__v--dani { grid-column: 8 / -1; }
/* José: the quote reads across the cell; the trays sit under it as a
   counterweight, level with the signature */
.proof__v--jose .proof__v-in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "q q" "g by";
  align-items: end;
  gap: clamp(2rem, 4.6vh, 2.9rem) clamp(1.6rem, 3vw, 2.9rem);
}
.proof__v--jose .proof__q { grid-area: q; align-self: start; }
.proof__v--jose .proof__glyph { grid-area: g; }
.proof__v--jose .proof__by { grid-area: by; }
/* Daniela: the knot hangs at the top of the cell; her words drop to the foot */
.proof__v--dani .proof__v-in { gap: 1.5rem; }
.proof__v--dani .proof__q { margin-top: auto; padding-top: 1.4rem; }
.proof__v .proof__by { padding-top: 0.2rem; }

.proof__q { margin: 0; }
.proof__q p {
  position: relative;
  font-family: var(--sc-font-display);
  font-optical-sizing: auto;
  font-weight: 440;
  font-size: clamp(1.2rem, 0.92rem + 0.55vw, 1.48rem);
  line-height: 1.26; letter-spacing: -0.012em;
  color: var(--sc-ink); text-wrap: pretty;
}
:root[data-theme="night"] .proof__q p { font-weight: 420; letter-spacing: -0.006em; }
.proof__v--dani .proof__q p { max-width: 24ch; }
.proof__v--jose .proof__q p {
  font-size: clamp(1.6rem, 0.9rem + 1.3vw, 2.35rem);
  font-weight: 420; line-height: 1.13; letter-spacing: -0.02em;
  max-width: 27ch; text-wrap: balance;
}

/* ---- glyphs: small line drawings in ink, one idea each ---- */
.proof__glyph { display: block; height: auto; flex: none; overflow: visible; }
.proof__glyph--sort { width: clamp(10rem, 15vw, 13.75rem); }
.proof__glyph--knot { width: min(100%, clamp(11rem, 16.5vw, 15rem)); }
/* replay on hover: the finished drawing dims first, so the reset never flashes */
.proof__glyph { transition: opacity 280ms var(--ease-out); }
.proof__v.is-redraw .proof__glyph { opacity: 0.2; transition-duration: 130ms; }
.gl { fill: none; stroke: var(--sc-ink); stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.gl--soft { stroke: color-mix(in oklab, var(--sc-ink-soft) 80%, transparent); stroke-width: 1.1; }
.gl--acc { stroke: var(--sc-ink); stroke-width: 1.9; }
.gn { fill: var(--sc-ink); }
.gn--ring { fill: none; stroke: var(--sc-ink); stroke-width: 1.3; }
.gn--end { fill: var(--sc-ink-soft); stroke: var(--sc-ink); stroke-width: 1.3; }
.vo circle { fill: var(--sc-ink-soft); stroke: var(--sc-ink); stroke-width: 1.2; }
.vo rect { fill: none; stroke: var(--sc-ink); stroke-width: 1.4; }
.vo path { fill: var(--sc-ink); }
.gn, .vo { transform-box: fill-box; transform-origin: center; }

/* armed: undrawn until the cell arrives (.is-drawn) */
/* dash 1, gap 2: the next dash starts past the end, so no round-cap dot shows */
.proof--armed .gl--d { stroke-dasharray: 1 2; stroke-dashoffset: 1.001; }
.proof--armed .is-drawn .gl--d {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--gd, 900ms) var(--ease-out) var(--gdl, 0ms);
}
.proof--armed .gn { opacity: 0; transform: scale(0.5); }
.proof--armed .is-drawn .gn {
  opacity: 1; transform: none;
  transition: opacity 260ms var(--ease-out) var(--pdl, 0ms), transform 420ms var(--ease-out) var(--pdl, 0ms);
}

/* hard to simple */
.proof__glyph--knot .gl--knot { --gd: 1500ms; }
.proof__glyph--knot .gl--ruler { --gd: 700ms; --gdl: 950ms; }
.proof__glyph--knot .gn { --pdl: 1300ms; }
.proof__glyph--knot .gn--ring { --pdl: 1420ms; }
/* scattered things, sorted into trays */
.proof--armed .proof__v:not(.is-drawn) .vo { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
.proof--armed .vo { transition: transform 820ms var(--ease-out) calc(var(--i) * 34ms); }
.proof__glyph--sort .gl--guide { --gd: 1100ms; }
.proof__glyph--sort .gl--tray { --gd: 700ms; --gdl: 760ms; }

/* ------------------------------------------------------------- case -- */
.proof__case {
  --pf-paper: var(--sc-surface);
  position: relative;
  margin-top: clamp(5.5rem, 13vh, 8.5rem);
}
.proof__tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.65rem;
  margin: 0 0 -1px 2.25rem;
  padding: 0.78rem 2.6rem 0.7rem 1.15rem;
  background: var(--pf-paper);
  border-radius: var(--sc-r-md) 0 0 0;
  clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 100%, 0 100%);
  font: 500 0.72rem/1.25 var(--sc-font-mono);
  font-variation-settings: normal;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sc-ink);
  transition: background-color var(--theme-dur) var(--ease-out);
}
/* the night h3 rule in core (weight 360, tight tracking) outranks the class */
:root[data-theme="night"] .proof__tab { font-weight: 500; letter-spacing: 0.1em; }
.proof__tab::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 1px; background: var(--sc-accent); box-shadow: 0 0 0 1px var(--accent-deep); }
.proof__file {
  background: var(--pf-paper);
  border-radius: 0 var(--sc-r-md) var(--sc-r-md) var(--sc-r-md);
  /* a box-shadow, not a filter: the live run repaints inside every frame */
  box-shadow: var(--sc-e2), var(--sc-edge);
  padding: clamp(2.1rem, 3.5vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.4rem, 5vh, 3.4rem) clamp(2.5rem, 4.6vw, 4.75rem);
  transition: background-color var(--theme-dur) var(--ease-out);
}
:root[data-theme="night"] .proof__case { --pf-paper: color-mix(in oklab, var(--sc-surface) 96%, var(--sc-ink)); }
:root[data-theme="night"] .proof__file { box-shadow: inset 0 0 0 1px var(--rule), var(--sc-e2), var(--sc-edge); }
/* instrument corners sit just outside the sheet of the file */
.proof__file.bracket::before, .proof__file.bracket::after { inset: -11px; --t: 12px; --c: var(--rule-strong); }

.proof__ba { margin: 0; display: grid; gap: 1.15rem; }
.proof__ba-row { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: 1rem; align-items: baseline; }
.proof__ba dt {
  font: 500 0.72rem/1.4 var(--sc-font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sc-ink-soft); transition: color 400ms var(--ease-out);
}
.proof__ba dd {
  margin: 0; max-width: 46ch;
  font: 400 1.05rem/1.55 var(--sc-font-text); color: var(--sc-ink-soft);
  transition: color 400ms var(--ease-out);
}
.proof__ba-row.is-now dt { color: var(--accent-deep); }
.proof__ba-row.is-now dd { color: var(--sc-ink); }
/* "Antes:" is a toggle (added by JS): it puts the process back how it was */
.proof__ba-k {
  display: inline-flex; align-items: center; min-height: 24px;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  background: none; border: 0; margin: -0.2rem -0.3rem; padding: 0.2rem 0.3rem;
  border-radius: var(--sc-r-sm); cursor: pointer;
  text-decoration: underline dotted; text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.4em; text-decoration-thickness: 1px;
  transition: text-decoration-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.proof__ba-k[aria-pressed="true"] { text-decoration-style: solid; text-decoration-color: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .proof__ba-k:hover { text-decoration-color: currentColor; }
}

.proof__pipe { position: relative; margin-top: clamp(1.9rem, 4.5vh, 2.6rem); padding-top: 2.4rem; border-top: 1px dashed var(--rule-strong); }
.proof__live { position: absolute; right: 0; top: 0.95rem; transition: opacity 400ms var(--ease-out); }
.proof__pipe:not(.is-live) .proof__live { opacity: 0; }
.proof__pipe-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pp-src path { fill: none; stroke: var(--sc-ink-soft); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.pp-wires path { fill: none; stroke: color-mix(in oklab, var(--sc-ink-soft) 85%, transparent); stroke-width: 1.05; }
.pp-edge { fill: none; stroke: var(--sc-ink); stroke-width: 1.25; }
.pp-edge--branch { stroke: var(--accent-deep); stroke-dasharray: 3 4; }
.pp-disc { fill: var(--pf-paper); stroke: var(--sc-ink); stroke-width: 1.3; transition: fill var(--theme-dur) var(--ease-out); }
.pp-ico { fill: none; stroke: var(--sc-ink); stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.pp-ico--fill { fill: var(--sc-ink); stroke: none; }
.pp-ico--soft { stroke: var(--sc-ink-soft); stroke-width: 1.2; }
.pp-node--human .pp-disc { stroke: var(--accent-deep); }
.pp-seal { fill: var(--sc-accent); stroke: var(--accent-deep); stroke-width: 1; transform-box: fill-box; transform-origin: center; transition: transform 380ms var(--ease-out); }
.pp-seal.is-hit { transform: scale(1.45); transition-duration: 90ms; }
.pp-lbl { font: 400 13.5px var(--sc-font-mono); fill: var(--sc-ink-soft); letter-spacing: 0.01em; }
.tl-lbl { font: 400 12.5px var(--sc-font-mono); fill: var(--sc-ink-soft); letter-spacing: 0.02em; }
/* a doubtful item waits at human review; a check is traced when it is cleared */
.pp-ok {
  fill: none; stroke: var(--accent-deep); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 2; stroke-dashoffset: 1.001; opacity: 0;
  transition: opacity 360ms var(--ease-out), stroke-dashoffset 0s linear 360ms;
}
.pp-node--human.is-ok .pp-ok { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 220ms var(--ease-out), opacity 60ms linear; }
.pp-node--human .pp-disc { transition: fill var(--theme-dur) var(--ease-out), stroke-width 200ms var(--ease-out); }
.pp-node--human.is-looking .pp-disc { stroke-width: 2.1; }
.proof__legend { display: none; }
.pp-packets circle { fill: var(--signal); }
.pp-packets circle.pk--doubt { fill: var(--sc-accent); stroke: var(--accent-deep); stroke-width: 1; }

.proof__clock { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; text-align: center; }
.proof__watch { --v: 0.3; position: relative; width: min(100%, 17.5rem); }
.proof__dial { display: block; width: 100%; height: auto; overflow: visible; }
.dl-crown { fill: var(--pf-paper); stroke: var(--sc-ink); stroke-width: 1.3; transition: fill var(--theme-dur) var(--ease-out); }
.dl-ring { fill: none; stroke: var(--sc-ink); stroke-width: 1.6; }
.dl-ring--in { stroke: var(--rule-strong); stroke-width: 1; }
.dl-tick { fill: none; stroke: color-mix(in oklab, var(--sc-ink-soft) 85%, transparent); stroke-width: 1; }
.dl-tick--major { stroke: var(--sc-ink); stroke-width: 1.7; }
.dl-track { fill: none; stroke: var(--rule); stroke-width: 11; }
.dl-arc {
  fill: none; stroke: var(--sc-accent); stroke-width: 11;
  stroke-dasharray: 490.09; stroke-dashoffset: calc(490.09 * (1 - var(--v)));
  transform: rotate(-90deg); transform-origin: 130px 160px;
}
.dl-mark { fill: none; stroke: var(--accent-deep); stroke-width: 2.4; stroke-linecap: round; transform-origin: 130px 160px; transform: rotate(calc(var(--v) * 360deg)); }
.dl-sweep { transform-origin: 130px 160px; }
.dl-sweep circle { fill: var(--sc-ink); }
.proof--armed .proof__watch .dl-sweep { animation: proof-sweep 60s linear infinite; animation-play-state: paused; }
.proof--armed .proof__watch.is-running .dl-sweep { animation-play-state: running; }
@keyframes proof-sweep { to { transform: rotate(360deg); } }

.proof__fig {
  position: absolute; left: 50%; top: 55.17%;
  transform: translate(-50%, -50%);
  margin: 0; display: flex; flex-direction: column; align-items: center;
}
.proof__num {
  font-family: var(--sc-font-display);
  font-weight: 320;
  font-size: clamp(4rem, 2.9rem + 2.7vw, 5.5rem);
  line-height: 0.86; letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--sc-ink);
}
.proof__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.proof__unit { margin-top: 0.45rem; font: 500 0.74rem/1 var(--sc-font-mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-deep); }
.proof__clock-cap { font: 400 1.02rem/1.5 var(--sc-font-text); color: var(--sc-ink); max-width: 36ch; text-wrap: balance; }
.proof__clock-cap > span { display: block; }

.proof__build {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 4.5vw, 4.5rem); align-items: center;
  padding-top: clamp(1.8rem, 4.2vh, 2.6rem);
  border-top: 1px solid var(--rule);
}
.proof__build-p { font: 400 1rem/1.62 var(--sc-font-text); color: var(--sc-ink-soft); max-width: 44ch; }
.proof__line { display: block; width: 100%; height: auto; overflow: visible; }
.tl-base { fill: none; stroke: var(--sc-ink); stroke-width: 1.4; }
.tl-weeks { fill: none; stroke: var(--sc-ink-soft); stroke-width: 1.1; }
.tl-hito path:first-child { fill: var(--sc-accent); stroke: var(--sc-ink); stroke-width: 1.2; stroke-linejoin: round; }
.tl-ok { fill: none; stroke: var(--sc-ink-soft); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tl-dash { fill: none; stroke: var(--accent-deep); stroke-width: 1.4; stroke-dasharray: 3 5; }
.tl-pin { fill: none; stroke: var(--accent-deep); stroke-width: 1.4; }
.tl-pin-dot { fill: var(--accent-deep); }
.tl-hito { transform-box: fill-box; transform-origin: center; }

.proof--armed .proof__build:not(.is-drawn) .tl-base { stroke-dashoffset: 1.001; }
.proof--armed .proof__build .tl-base { stroke-dasharray: 1 2; transition: stroke-dashoffset 1100ms var(--ease-out); }
.proof--armed .proof__build:not(.is-drawn) .tl-weeks { opacity: 0; }
.proof--armed .proof__build .tl-weeks { transition: opacity 500ms var(--ease-out) 250ms; }
.proof--armed .proof__build:not(.is-drawn) .tl-hito { opacity: 0; transform: translateY(6px) scale(0.7); }
.proof--armed .proof__build .tl-hito { transition: opacity 300ms var(--ease-out) calc(300ms + var(--i) * 190ms), transform 480ms var(--ease-out) calc(300ms + var(--i) * 190ms); }
.proof--armed .proof__build:not(.is-drawn) .tl-next { clip-path: inset(0 100% 0 0); }
.proof--armed .proof__build .tl-next { transition: clip-path 800ms var(--ease-out) 1200ms; }

/* --------------------------------------------------------- Gen 1 strip -- */
.proof__gen {
  margin-top: clamp(3.2rem, 7.5vh, 4.75rem);
  padding-top: 1.75rem; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: minmax(11rem, 3fr) minmax(0, 9fr);
  gap: 1.2rem 2rem; align-items: start;
}
.proof__gen-l { margin: 0; padding-top: 0.7rem; max-width: 30ch; line-height: 1.6; text-wrap: balance; }
.proof__jobs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.65rem; }
.proof__jobs .proof__job {
  gap: 0.65rem;
  padding: 0.62rem 0.95rem 0.62rem 0.75rem;
  font: 450 0.92rem/1.25 var(--sc-font-text); letter-spacing: -0.003em;
  color: var(--sc-ink);
  background: var(--sc-surface);
  border-color: var(--rule-strong);
  border-radius: var(--sc-r-sm);
  white-space: normal;
  transition: border-color 180ms var(--ease-out), background-color var(--theme-dur) var(--ease-out), opacity 620ms var(--sc-ease-out, var(--ease-out)), transform 620ms var(--sc-ease-out, var(--ease-out));
}
.proof__job svg { width: 1.15rem; height: 1.15rem; flex: none; fill: none; stroke: var(--sc-ink-soft); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
  .proof__jobs .proof__job:hover { border-color: var(--sc-ink-soft); }
}

/* --------------------------------------------------------- responsive -- */
@media (max-width: 1100px) {
  .proof__sheet > .proof__reg { display: none; }
}
@media (max-width: 900px) {
  .proof__sheet { grid-template-columns: minmax(0, 1fr); }
  .proof__lead { grid-template-columns: minmax(0, 1fr); }
  .proof__panel, .proof__lead-body, .proof__v--jose, .proof__v--dani { grid-column: 1 / -1; }
  .proof__panel { min-height: 0; aspect-ratio: 5 / 4; }
  /* the panel is 5:4 here and the tablet 1100:855, so it gets a little more air */
  .proof__nb { width: min(88%, 30rem); }
  .proof__v--jose .proof__v-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "g" "q" "by"; align-items: start; gap: 1.6rem; }
  .proof__v--jose .proof__q p { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.8rem); }
  .proof__v--dani .proof__q { margin-top: 0; padding-top: 0; }
  .proof__file { grid-template-columns: minmax(0, 1fr); }
  .proof__build { grid-template-columns: minmax(0, 1fr); }
  .proof__gen { grid-template-columns: minmax(0, 1fr); }
  .proof__lead-q p::before, .proof__q p::before { position: static; margin-right: 0.04em; }
}
@media (max-width: 560px) {
  .proof__tab { margin-left: 1rem; padding-right: 2.2rem; font-size: 0.64rem; letter-spacing: 0.07em; }
  :root[data-theme="night"] .proof__tab { letter-spacing: 0.07em; }
  .proof__ba-row { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .proof__file { padding: 1.6rem 1.3rem; }
  /* the diagram's own labels would be ~6px here: one HTML line instead */
  .proof__pipe-svg .pp-lbl { display: none; }
  .tl-lbl { font-size: 19px; }
  .proof__legend {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.55rem;
    list-style: none; margin: 1rem 0 0; padding: 0;
    font: 400 0.72rem/1.4 var(--sc-font-mono); letter-spacing: 0.02em; color: var(--sc-ink-soft);
  }
  .proof__legend li { display: inline-flex; align-items: center; gap: 0.55rem; }
  .proof__legend li + li::before { content: ""; width: 0.9rem; height: 1px; background: var(--rule-strong); }
}

@media (prefers-reduced-motion: reduce) {
  .proof__nb { transform: none !important; will-change: auto; }
  .dl-sweep { animation: none !important; }
  .proof__sheet::before { display: none; }
  .proof__glyph { transition: none; }
}

/* Night: the gold panel becomes walnut slats under a hidden warm LED strip
   (the desk at night, see core.css "night: the desk"). The tablet turns into a
   light object on the wood; the handwriting stays in the person's ink. */
:root[data-theme="night"] .proof__panel { --sc-accent-ink: #12261A; }
:root[data-theme="night"] .proof__gold { background: var(--wood-slats); }
:root[data-theme="night"] .proof__gold::before {
  background: var(--wood-hatch-v);
  -webkit-mask: var(--led-mask); mask: var(--led-mask);
}
:root[data-theme="night"] .proof__gold::after {
  left: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none; border-radius: 0;
  -webkit-mask: none; mask: none;
  background: var(--led-wash), radial-gradient(55% 40% at 50% 52%, rgb(var(--lamp) / 0.16), transparent 72%);
  mix-blend-mode: screen;
}
:root[data-theme="night"] .proof__panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, transparent 40%, rgb(2 15 17 / 0.6) 100%);
}
:root[data-theme="night"] .proof__nb-body { background: #DCD0B8; }
:root[data-theme="night"] .proof__nb-img { --engr-ink: #12261A; }
:root[data-theme="night"] .proof__nb-ink path { stroke: #8A5800; }
:root[data-theme="night"] .proof__nb { filter: drop-shadow(-10px 16px 14px rgb(0 0 0 / 0.5)); }
:root[data-theme="night"] .proof__panel .proof__ticks::before,
:root[data-theme="night"] .proof__panel .proof__ticks::after { --c: #A7A299; }