/* Proof Choreography: the video is the interface; every instrument owns a lane. */
:root {
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 18px;
  --space-lg: 24px;
  --topbar-h: 54px;
  --session-h: 44px;
  --chrome-h: calc(var(--topbar-h) + var(--session-h));
  --proof-w: 360px;
  --grade-h: 92px;
  --stage-gutter: var(--space-md);
  --tool-rail-w: 56px;
}

html,
body {
  height: 100%;
  overflow: hidden;
  background: var(--stage);
}

.intake-shell {
  height: 100svh;
  min-height: 0;
  padding: 0 !important;
}

/* Two explicit rows replace the former pile-up of header and session controls. */
.intake-topbar {
  position: fixed;
  z-index: 60;
  inset: 0 0 auto;
  min-height: var(--topbar-h);
  height: var(--topbar-h);
  border: 0;
  color: var(--white);
  background: rgb(16 18 22 / 94%);
  transition: background-color 240ms ease;
}

.intake-topbar nav { display: none; }
.intake-topbar .wordmark svg { fill: var(--white); }
.intake-topbar .operator { justify-self: end; width: max-content; }
.intake-topbar .operator span { color: var(--rule); }

.session-rail {
  position: fixed;
  z-index: 55;
  inset: var(--topbar-h) 0 auto;
  min-height: var(--session-h);
  height: var(--session-h);
  grid-template-columns: minmax(180px, .72fr) minmax(220px, 1fr) auto auto;
  gap: clamp(16px, 2.5vw, 36px);
  padding: 0 clamp(18px, 3vw, 48px);
  border: 0;
  border-top: 1px solid rgb(255 254 249 / 12%);
  color: var(--white);
  background: rgb(16 18 22 / 84%);
  transition: opacity 220ms ease, transform 320ms var(--ease);
}

.session-identity strong,
.session-progress,
.session-progress b,
.session-facts b { color: var(--white); }
.session-identity span,
.session-facts span { color: var(--rule); }
.session-progress .progress-track { background: rgb(255 254 249 / 20%); }
.session-progress .progress-track i { background: var(--white); }
.session-rail .quiet-action {
  min-height: 44px;
  border-color: rgb(255 254 249 / 42%);
  color: var(--white);
}
.session-rail .quiet-action:hover { color: var(--ink); background: var(--white); }

body.ui-asleep:not([data-mode="correction"]):not([data-mode="editing"]) .session-rail {
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
}
body.ui-asleep .intake-topbar {
  pointer-events: auto !important;
  opacity: 1 !important;
  transform: none !important;
  background: rgb(16 18 22 / 82%);
}
.session-rail:focus-within {
  pointer-events: auto !important;
  opacity: 1 !important;
  transform: none !important;
}

.edge-tools {
  position: fixed;
  z-index: 70;
  top: 50%;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  transform: translateY(-50%);
}
.edge-tools button {
  width: var(--tool-rail-w);
  min-width: 46px;
  min-height: 46px;
  padding: 8px 10px;
  border: 0;
  color: var(--white);
  background: rgb(16 18 22 / 88%);
  font-size: .7rem;
  font-weight: 650;
  writing-mode: vertical-rl;
  text-transform: uppercase;
}
.edge-tools button:hover,
.edge-tools button:focus-visible { color: var(--ink); background: var(--white); }
.edge-tools #edge-undo {
  color: var(--ink);
  background: var(--yellow);
  writing-mode: horizontal-tb;
}
.edge-tools kbd { display: block; margin-top: 5px; }
.edge-tools #recent-toggle[aria-expanded="true"] { color: var(--ink); background: var(--paper); }

.recognition-instrument {
  position: fixed;
  z-index: 1;
  inset: 0;
  display: block;
  border: 0;
  background: var(--stage);
}
.image-stage {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.image-stage::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(16 18 22 / 20%), transparent 24%, transparent 74%, rgb(16 18 22 / 38%));
}
.image-stage,
.stage-status { color: var(--white); }
.proof-rail,
.grade-rail,
.recent-strip { color: var(--ink); }
.standby-surface::before {
  inset: clamp(32px, 5vw, 78px);
  border-color: rgb(201 200 192 / 45%);
}

.captured-card {
  z-index: 4;
  width: min(48vh, 345px);
  view-transition-name: captured-proof;
}
.image-stage[data-state="capturing"] .captured-card {
  filter: blur(2px);
  opacity: .78;
  transform: translate(-50%, -50%) rotate(-1.5deg) scale(.72);
}
.image-stage[data-state="matched"] .captured-card {
  transform: translate(-50%, -50%) rotate(-.25deg) scale(1);
}
.image-stage[data-state="frozen"] .captured-card {
  transform: translate(-50%, -50%) rotate(-.25deg) scale(1);
}
.image-stage:not(.frame-frozen) .standby-surface {
  animation: demo-feed 7s ease-in-out infinite alternate;
}
.image-stage.frame-frozen .standby-surface { animation-play-state: paused; }
body[data-mode="grading"] .image-stage[data-state="matched"] .captured-card,
body[data-mode="committed"] .image-stage[data-state="frozen"] .captured-card {
  top: calc(var(--chrome-h) + (100svh - var(--chrome-h) - var(--grade-h) - var(--stage-gutter)) / 2);
  left: calc((100vw - var(--proof-w)) / 2);
  width: min(345px, calc((100vw - var(--proof-w) - 84px) * .5), calc((100svh - var(--chrome-h) - var(--grade-h) - 54px) * .715));
}
body[data-mode="committed"] #proof-frame { transition: opacity 280ms ease; }
body .real-camera .captured-card { display: none; }

.stage-status {
  z-index: 12;
  right: auto;
  bottom: 18px;
  left: 18px;
  width: auto;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid rgb(255 254 249 / 35%);
  background: rgb(16 18 22 / 82%);
  transition: opacity 200ms ease, transform 280ms var(--ease);
}
.stage-status > span:nth-child(2) { max-width: 36ch; }
.stage-status #camera-settings { display: block; }
.prototype-label { color: var(--rule); white-space: nowrap; }
body[data-mode="grading"] .stage-status,
body[data-mode="committed"] .stage-status {
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
}

.proof-rail {
  position: fixed;
  z-index: 20;
  top: calc(var(--chrome-h) + 18px);
  right: var(--stage-gutter);
  width: min(var(--proof-w), calc(100vw - 48px));
  max-height: calc(100svh - var(--chrome-h) - var(--grade-h) - 76px);
  display: flex;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  background: var(--paper);
  box-shadow: 0 18px 40px rgb(0 0 0 / 20%);
  clip-path: inset(0);
  transform-origin: right center;
  transition: clip-path 380ms var(--ease), opacity 180ms ease, transform 380ms var(--ease);
}
.identity-primary h1 { font-size: clamp(2.5rem, 4vw, 4.2rem); }
.correct-identity { margin: 12px 14px 14px; }
body[data-mode="recognition"] .proof-rail {
  pointer-events: none;
  opacity: 0;
  clip-path: inset(0 0 0 100%);
  transform: translateX(28px);
}
body[data-mode="correction"] .proof-rail { opacity: .24; transform: translateX(12px); }

.grade-rail {
  position: fixed;
  z-index: 22;
  right: 50%;
  bottom: var(--stage-gutter);
  width: min(1040px, calc(100vw - 48px));
  min-height: 0;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  border: 0;
  background: var(--paper);
  box-shadow: 0 18px 42px rgb(0 0 0 / 24%);
  clip-path: inset(0);
  transform: translateX(50%);
  transition: clip-path 380ms var(--ease), opacity 180ms ease, transform 380ms var(--ease);
}
.grade-actions {
  position: static !important;
  height: auto !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.grade-secondary { display: none; }
.human-boundary,
.grade-actions button { min-height: var(--grade-h); }
body:not([data-mode="grading"]) .grade-rail {
  pointer-events: none;
  opacity: 0;
  clip-path: inset(100% 0 0);
  transform: translate(50%, 28px);
}

.commit-rail {
  position: fixed !important;
  z-index: 24;
  right: 50% !important;
  bottom: var(--stage-gutter) !important;
  left: auto !important;
  width: min(760px, calc(100vw - 48px));
  min-height: 72px;
  padding: 10px 12px 10px 22px !important;
  border: 0;
  transform: translateX(50%);
  box-shadow: 0 18px 42px rgb(0 0 0 / 28%);
  animation: commit-in 280ms var(--ease);
}

.camera-drawer {
  position: fixed;
  z-index: 65;
  top: 50%;
  right: auto;
  bottom: auto;
  left: calc(var(--tool-rail-w) + 8px);
  width: min(390px, calc(100vw - var(--tool-rail-w) - 26px));
  max-height: calc(100svh - 24px);
  overflow: auto;
  transform: translateY(-50%);
}
.camera-drawer select,
.camera-drawer button { min-height: 44px; }
.correction-sheet {
  position: fixed;
  z-index: 75;
  inset: 0 0 0 auto;
  width: min(560px, 100vw);
  max-width: none;
  height: 100svh;
  max-height: none;
  margin: 0;
  border: 0;
  box-shadow: -24px 0 54px rgb(0 0 0 / 28%);
}
.correction-sheet header button,
.set-aside-correction { min-height: 44px; }
.correction-sheet::backdrop { background: rgb(16 18 22 / 58%); }
.record-editor::backdrop { background: rgb(16 18 22 / 78%); }
dialog:not([open]) { display: none; }

/* Recent and editor are mutually exclusive layers. */
.recent-strip {
  position: fixed;
  z-index: 44;
  top: calc(var(--chrome-h) + 12px);
  bottom: 12px;
  left: calc(var(--tool-rail-w) + 8px);
  width: min(760px, calc(100vw - var(--tool-rail-w) - 72px));
  height: auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  border: 0;
  background: var(--paper);
  box-shadow: 0 22px 54px rgb(0 0 0 / 30%);
  visibility: hidden;
  transform: translateX(calc(-100% - 20px));
  transition: transform 420ms var(--ease), visibility 0s linear 420ms;
}
.recent-strip > header {
  position: relative;
  min-height: 0;
  justify-content: flex-start;
  padding: 28px 24px;
  border-right: 1px solid var(--ink);
  border-bottom: 0;
}
.recent-strip #close-recent {
  position: absolute;
  top: 12px;
  right: 12px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--strong);
  background: transparent;
  font-size: .7rem;
}
.recent-records {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  overflow: auto;
}
.record-card {
  min-height: 88px;
  width: auto;
  flex-basis: auto;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 5px 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
}
.record-card i {
  grid-row: 1 / -1;
  width: 32px;
  height: 44px;
  margin: 0;
}
.record-card strong { grid-column: 2; grid-row: 1; }
.record-card span { grid-column: 2; grid-row: 2; margin: 0; }
.record-card em {
  grid-column: 3;
  grid-row: 1 / -1;
  align-self: center;
  margin: 0;
  text-align: right;
}
body.recent-open .recent-strip {
  visibility: visible;
  transform: none;
  transition: transform 420ms var(--ease);
}
body.recent-open .image-stage { filter: saturate(.72); }

.session-audit { margin-top: 10px; }
.session-audit summary {
  font-size: .7rem;
  font-weight: 650;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.session-audit ol {
  position: absolute;
  z-index: 2;
  bottom: 12px;
  left: 12px;
  width: min(430px, calc(100% - 24px));
  max-height: 190px;
  margin: 0;
  padding: 8px;
  overflow: auto;
  border: 1px solid var(--strong);
  background: var(--white);
  list-style: none;
  box-shadow: 0 10px 24px rgb(16 18 22 / 16%);
}
.session-audit li {
  display: grid;
  gap: 3px;
  padding: 7px 8px;
  border-bottom: 1px solid var(--rule);
  font-size: .7rem;
}
.session-audit li:last-child { border-bottom: 0; }
.session-audit strong { text-transform: capitalize; }
.session-audit span { color: var(--soft); }

.record-editor[open] {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
  overflow: auto;
  grid-template-columns: 1fr;
  grid-template-areas:
    "heading"
    "identity"
    "grade"
    "actions"
    "audit"
    "footer";
  align-content: start;
  align-items: start;
  border: 0;
  color: var(--ink);
  box-shadow: none;
}
.record-editor::backdrop { background: transparent; }
.editor-heading { grid-area: heading; padding-right: 72px; }
.editor-identity {
  grid-area: identity;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  border-top: 1px solid var(--rule);
}
.editor-identity div { padding: 10px; border-bottom: 1px solid var(--rule); }
.editor-identity div:nth-child(even) { border-left: 1px solid var(--rule); }
.editor-identity dt { color: var(--soft); font-size: .7rem; text-transform: uppercase; }
.editor-identity dd { margin: 4px 0 0; font: 500 .72rem var(--mono); }
.editor-grade-section { grid-area: grade; }
.editor-grade-section h4,
.editor-audit-section h4 { margin: 0 0 9px; font-size: .72rem; text-transform: uppercase; }
.editor-identity-section {
  grid-area: actions;
  padding-top: 12px;
  border-top: 1px solid var(--ink);
}
.editor-identity-section > button,
.editor-footer button {
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--strong);
  background: transparent;
  font-size: .75rem;
}
.editor-identity-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 10px;
  border-top: 1px solid var(--rule);
}
.editor-identity-tools[hidden] { display: none; }
.editor-identity-search {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}
.editor-identity-search span {
  color: var(--soft);
  font-size: .7rem;
  font-weight: 650;
  text-transform: uppercase;
}
.editor-identity-search input {
  width: 100%;
  min-height: 44px;
  padding: 0 11px;
  border: 1px solid var(--strong);
  background: var(--white);
}
.editor-identity-empty { margin: 0; padding: 14px 10px; color: var(--soft); font-size: .75rem; }
.editor-identity-options[hidden] { display: none; }
.editor-identity-options button {
  display: block;
  min-height: 58px;
  padding: 10px;
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  text-align: left;
}
.editor-identity-options button:hover { background: var(--deep); }
.editor-identity-options strong,
.editor-identity-options span { display: block; }
.editor-identity-options span { margin-top: 5px; color: var(--soft); font: 500 .7rem var(--mono); }
.editor-audit-section { grid-area: audit; padding-top: 12px; border-top: 1px solid var(--rule); }
.editor-audit-section ol { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.editor-audit-section li {
  display: grid;
  grid-template-columns: minmax(130px, .7fr) minmax(180px, 1fr) auto;
  gap: 12px;
  padding: 8px 10px;
  background: var(--deep);
  font-size: .72rem;
}
.editor-audit-section strong { text-transform: capitalize; }
.editor-audit-section span { color: var(--soft); }
.editor-audit-section time { font: 500 .68rem var(--mono); }
.editor-footer {
  grid-area: footer;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ink);
}
.editor-footer #delete-retry { border-color: var(--magenta); color: var(--deep-magenta); }
.record-editor button,
.correction-sheet,
.correction-sheet button,
.camera-drawer,
.camera-drawer button { color: var(--ink); }

@media (min-width: 621px) {
  .record-editor[open] {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    grid-template-areas:
      "heading grade"
      "identity grade"
      "actions actions"
      "audit audit"
      "footer footer";
    gap: 20px;
    padding: 24px;
  }
}

.toast { z-index: 80; bottom: 112px; }
.toast:not(.show) { pointer-events: none; }
body .capture-state i { box-shadow: none !important; }

::view-transition-old(captured-proof),
::view-transition-new(captured-proof) {
  animation-duration: 420ms;
  animation-timing-function: var(--ease);
}
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 180ms; }

@keyframes commit-in {
  from { opacity: 0; clip-path: inset(100% 0 0); transform: translate(50%, 18px); }
  to { opacity: 1; clip-path: inset(0); transform: translateX(50%); }
}

@keyframes demo-feed {
  from { filter: brightness(.96); transform: scale(1); }
  to { filter: brightness(1.04); transform: scale(1.012); }
}

@media (max-width: 900px) {
  :root { --proof-w: 330px; --stage-gutter: 14px; --grade-h: 82px; }
  .session-rail { grid-template-columns: 1fr auto auto; }
  .session-progress,
  .session-facts { display: none; }
  .captured-card { width: min(43vh, 290px); }
  .proof-rail {
    top: calc(var(--chrome-h) + 14px);
    right: 14px;
    width: min(var(--proof-w), calc(100vw - 28px));
    max-height: calc(100svh - var(--chrome-h) - var(--grade-h) - 58px);
  }
  .grade-rail { width: calc(100vw - 28px); grid-template-columns: 130px 1fr; }
  .grade-actions span { display: none; }
  .commit-rail { width: calc(100vw - 28px); }
}

@media (max-height: 560px) and (min-width: 621px) {
  :root { --grade-h: 82px; --stage-gutter: var(--space-xs); }
  body[data-mode="grading"] .image-stage[data-state="matched"] .captured-card,
  body[data-mode="committed"] .image-stage[data-state="frozen"] .captured-card {
    top: calc(var(--chrome-h) + (100svh - var(--chrome-h) - var(--grade-h)) / 2);
    width: min(30vh, 112px);
    height: min(42vh, 157px);
    overflow: hidden;
  }
  .proof-rail {
    top: calc(var(--chrome-h) + var(--space-xs));
    max-height: calc(100svh - var(--chrome-h) - var(--grade-h) - var(--space-lg));
  }
  .proof-status { min-height: 38px; padding-block: 7px; }
  .identity-primary { padding: var(--space-sm); }
  .identity-primary h1 { font-size: 2.5rem; }
  .identity-primary span { margin-top: var(--space-xs); }
  .identity-ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .identity-ledger div { padding: var(--space-xs); }
  .identity-ledger div:nth-child(even) { border-left: 0; }
  .identity-ledger div + div { border-left: 1px solid var(--rule); }
  .identity-ledger div:nth-child(4) { border-left: 0; }
  .correct-identity { min-height: 44px; margin: var(--space-xs); }
}

@media (max-width: 620px) {
  :root {
    --topbar-h: 46px;
    --session-h: 34px;
    --grade-h: 107px;
    --stage-gutter: 8px;
    --tool-rail-w: 48px;
  }
  .intake-topbar { min-height: var(--topbar-h); padding-inline: 18px; }
  .intake-topbar .operator { display: none; }
  .session-rail {
    top: var(--topbar-h);
    right: 0;
    left: 0;
    min-height: var(--session-h);
    height: var(--session-h);
    display: flex;
    justify-content: flex-end;
    padding: 0 12px;
    background: rgb(16 18 22 / 72%);
  }
  .session-identity span,
  .session-progress,
  .session-facts,
  .session-rail #end-session { display: none; }
  .session-identity strong { font-size: .9rem; }
  body.ui-asleep:not([data-mode="correction"]):not([data-mode="editing"]) .session-rail {
    opacity: 1;
    transform: none;
  }
  .recognition-instrument { height: 100svh; }
  .registration-corner { width: 38px; height: 38px; }
  .edge-tools { top: 35%; }
  .edge-tools button { min-width: 44px; min-height: 44px; padding: 6px; }
  body[data-mode="grading"] .image-stage[data-state="matched"] .captured-card,
  body[data-mode="committed"] .image-stage[data-state="frozen"] .captured-card {
    top: 27%;
    left: 50%;
    width: min(180px, 25vh);
    transform: translate(-50%, -50%) rotate(-.25deg) scale(1);
  }
  .proof-rail,
  body[data-mode="grading"] .proof-rail {
    top: 46svh;
    right: 10px;
    bottom: auto;
    left: 10px;
    width: auto;
    max-height: calc(100svh - 46svh - var(--grade-h) - 60px);
    overflow-y: auto;
  }
  .proof-status { min-height: 38px; }
  .identity-primary { padding: 10px 12px; }
  .identity-primary h1 { font-size: 1.85rem; }
  .identity-primary span { margin-top: 8px; }
  .identity-ledger { grid-template-columns: repeat(3, 1fr); }
  .identity-ledger div { padding: 7px 8px; }
  .correct-identity { min-height: 44px; margin: 10px 8px 8px; }
  .grade-rail {
    right: 8px;
    bottom: 8px;
    left: 8px;
    width: auto;
    grid-template-columns: 1fr;
    transform: none;
  }
  body:not([data-mode="grading"]) .grade-rail { transform: translateY(28px); }
  .human-boundary {
    display: flex;
    min-height: 28px;
    padding: 4px 10px;
  }
  .human-boundary span,
  .human-boundary i { display: none; }
  .human-boundary strong { margin: 0; font-size: .72rem; }
  .grade-actions button { min-height: 78px; padding: 7px; }
  .grade-actions strong { font-size: .72rem; }
  .commit-rail {
    right: 8px !important;
    bottom: 8px !important;
    left: 8px !important;
    width: auto;
    grid-template-columns: 1fr 1fr;
    transform: none;
  }
  .commit-rail > div { grid-column: 1 / -1; }
  .recent-strip {
    top: var(--chrome-h);
    right: auto;
    bottom: 0;
    left: calc(var(--tool-rail-w) + 8px);
    width: calc(100vw - var(--tool-rail-w) - 8px);
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .recent-strip > header {
    min-height: 132px;
    padding: 18px 54px 16px 20px;
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }
  .recent-records { grid-template-columns: 1fr; height: auto; }
  .record-card { min-height: 88px; }
  .record-editor[open] {
    inset: 0;
    width: 100%;
  }
  .editor-identity-options { grid-template-columns: 1fr; }
  .editor-audit-section li { grid-template-columns: 1fr auto; }
  .editor-audit-section li span { grid-column: 1 / -1; }
  .stage-status { bottom: 94px; }
  .toast { right: 8px; bottom: 104px; left: 8px; max-width: none; }
  .correction-sheet { width: 100vw; }
  .camera-drawer {
    top: 35%;
    left: calc(var(--tool-rail-w) + 8px);
    width: calc(100vw - var(--tool-rail-w) - 16px);
    max-height: calc(100svh - 16px);
  }
  .prototype-label {
    position: fixed;
    top: calc(var(--chrome-h) + 6px);
    left: 8px;
    display: block;
    padding: 5px 7px;
    color: var(--rule);
    background: rgb(16 18 22 / 82%);
    font-size: .7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .session-rail,
  .proof-rail,
  .grade-rail,
  .recent-strip { transition-duration: .01ms; }
  .commit-rail { animation: none; }
  ::view-transition-old(captured-proof),
  ::view-transition-new(captured-proof),
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: .01ms; }
}