/* Portfolio motion identity: portfolio-evidence-intake/motion-design/DESIGN.md. */
:root {
  color-scheme: light;
  --paper: #f6f2ea;
  --ink: #172033;
  --teal: #1f6f78;
  --quiet: #5d6675;
  --rule: #cec5b7;
  --pale-teal: #8bd2d1;
  --display: "Fraunces", Georgia, serif;
  --body: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;
  --frame-pad: clamp(22px, 5vw, 96px);
  --meta-space: clamp(76px, 12.5vh, 135px);
  --bottom-space: clamp(28px, 5.5vh, 60px);
  --scene-gap: clamp(14px, 2.7vw, 52px);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; background: var(--paper); color: var(--ink); font-family: var(--body); }
button, a { font: inherit; }

.motion-composition {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
}

.composition-meta {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  min-height: var(--meta-space);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(18px, 3.7vh, 40px) var(--frame-pad) 15px;
  pointer-events: none;
}

.meta-title {
  max-width: 62%;
  margin: 0;
  font-size: clamp(12px, 1.25vw, 24px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.02em;
}

.evidence-label {
  display: inline-flex;
  align-items: center;
  gap: .65em;
  flex-shrink: 0;
  margin: 0;
  color: var(--teal);
  font-family: var(--mono);
  font-size: clamp(10px, 1.06vw, 20px);
  font-weight: 500;
  line-height: 1.35;
}

.evidence-label::before {
  content: "";
  width: .48em;
  height: .48em;
  flex-shrink: 0;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.meta-rule {
  position: absolute;
  bottom: 4px;
  left: var(--frame-pad);
  right: var(--frame-pad);
  height: 1px;
  background: var(--rule);
  transform-origin: left center;
}

.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--paper);
  opacity: 0;
}

.scene:first-of-type { opacity: 1; }
.scene.is-first { opacity: 1; }
.scene:nth-of-type(2) { z-index: 2; }
.scene:nth-of-type(3) { z-index: 3; }
.scene:nth-of-type(4) { z-index: 4; }
.scene:nth-of-type(5) { z-index: 5; }

.scene-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(12px, 2.3vh, 25px);
  width: 100%;
  height: 100%;
  padding: calc(var(--meta-space) + 24px) var(--frame-pad) var(--bottom-space);
  box-sizing: border-box;
}

.scene-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.09fr) minmax(0, .91fr);
  align-items: center;
  gap: var(--scene-gap);
  min-height: 0;
  width: 100%;
  flex: 1;
}

.scene-copy { min-width: 0; }
.scene-kicker {
  margin: 0 0 clamp(12px, 2.5vh, 27px);
  color: var(--teal);
  font-family: var(--mono);
  font-size: clamp(11px, 1.2vw, 23px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .02em;
}

.scene-kicker .scene-index { margin-right: .8em; font-variant-numeric: tabular-nums; }
.scene-title {
  margin: 0;
  max-width: 11em;
  font-family: var(--display);
  font-size: clamp(28px, 4.95vw, 95px);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.scene-title.compact-title { font-size: clamp(28px, 4.4vw, 84px); }
.scene-description {
  margin: clamp(14px, 3.5vh, 38px) 0 0;
  max-width: 27em;
  font-size: clamp(16px, 1.91vw, 36px);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: -.015em;
  text-wrap: pretty;
}

.scene-description strong { font-weight: 600; }
.artifact { min-width: 0; width: 100%; }
.artifact-label {
  margin: 0 0 clamp(10px, 1.6vh, 18px);
  color: var(--quiet);
  font-family: var(--mono);
  font-size: clamp(11px, 1.2vw, 23px);
  font-weight: 500;
  line-height: 1.35;
}

.paper-sheet {
  width: 100%;
  padding: clamp(18px, 2.2vw, 42px);
  border: 1.5px solid var(--ink);
  background: var(--paper);
  box-shadow: 8px 8px 0 rgba(23, 32, 51, .055);
}

.sheet-rule { height: 1px; background: var(--ink); transform-origin: left center; }
.sheet-heading {
  margin: 0 0 clamp(13px, 2vh, 24px);
  color: var(--ink);
  font-size: clamp(16px, 1.7vw, 32px);
  font-weight: 600;
  line-height: 1.2;
}

.field-list { display: flex; flex-direction: column; margin-top: clamp(5px, 1.8vh, 20px); }
.field-row {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 29px);
  min-height: clamp(42px, 8.8vh, 95px);
  border-bottom: 1px solid var(--rule);
}
.field-row:last-child { border-bottom: 0; }
.field-name {
  flex-shrink: 0;
  min-width: 4.5em;
  margin: 0;
  font-size: clamp(18px, 2.2vw, 42px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.field-placeholder { flex: 1; min-width: 16px; height: 1px; background: var(--rule); }
.field-check { color: var(--teal); font-size: clamp(20px, 2.4vw, 46px); font-weight: 400; line-height: 1; }

.timing-plan { margin-bottom: clamp(18px, 3vh, 32px); }
.timing-labels {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: clamp(12px, 1.2vw, 23px);
  line-height: 1.3;
}
.timing-line { position: relative; height: 2px; margin: 0 5px; background: var(--teal); transform-origin: left center; }
.timing-line::before, .timing-line::after { content: ""; position: absolute; top: -4px; width: 10px; height: 10px; background: var(--teal); border-radius: 50%; }
.timing-line::before { left: -5px; }
.timing-line::after { right: -5px; }
.source-stack { display: flex; flex-direction: column; gap: clamp(10px, 1.8vh, 20px); }
.source-row { display: flex; align-items: center; gap: 18px; padding: clamp(10px, 1.35vw, 26px) 0; border-bottom: 1px solid var(--rule); }
.source-row.primary-source { padding: clamp(16px, 1.9vw, 36px); background: var(--ink); color: var(--paper); border: 0; }
.source-name { margin: 0; font-size: clamp(18px, 2.24vw, 43px); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; }
.source-mark { font-family: var(--mono); color: var(--teal); font-size: clamp(12px, 1.3vw, 25px); line-height: 1.1; }
.primary-source .source-mark { color: var(--pale-teal); }

.owner-signal { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: clamp(18px, 2.15vw, 40px); border: 1.5px solid var(--teal); }
.owner-signal p { margin: 0; font-size: clamp(22px, 2.5vw, 48px); line-height: 1.1; }
.missing-label { font-family: var(--mono); font-size: clamp(12px, 1.2vw, 23px); font-weight: 500; color: var(--teal); }
.question-note { margin-top: clamp(17px, 3.2vh, 35px); padding: clamp(18px, 2.2vw, 42px); background: var(--ink); color: var(--paper); }
.question-note .artifact-label { color: var(--pale-teal); margin-bottom: 14px; }
.question-note .question-text { margin: 0; font-family: var(--display); font-size: clamp(23px, 2.8vw, 54px); font-weight: 400; line-height: 1.16; letter-spacing: -.02em; }
.question-connector { width: 2px; height: clamp(17px, 3vh, 32px); margin: 0 0 0 clamp(28px, 3.8vw, 72px); background: var(--teal); transform-origin: top center; }
.question-note.connected-note { margin-top: 0; }

.condition-object { display: flex; align-items: center; gap: clamp(18px, 2vw, 38px); padding-bottom: clamp(18px, 3vh, 32px); border-bottom: 1px solid var(--rule); }
.if-word { color: var(--teal); font-family: var(--display); font-size: clamp(48px, 5.8vw, 112px); font-weight: 400; line-height: .95; }
.condition-object p { margin: 0; max-width: 9em; font-size: clamp(20px, 2.1vw, 40px); font-weight: 500; line-height: 1.22; letter-spacing: -.015em; }
.decision-route { display: flex; flex-direction: column; align-items: stretch; padding: clamp(20px, 3.3vh, 36px) 0 0; }
.decision-step { display: flex; align-items: center; gap: 20px; }
.decision-step p { margin: 0; font-size: clamp(21px, 2.5vw, 48px); font-weight: 500; line-height: 1.12; letter-spacing: -.02em; }
.decision-dot { width: clamp(12px, 1.15vw, 22px); height: clamp(12px, 1.15vw, 22px); flex-shrink: 0; border: 2px solid var(--teal); border-radius: 50%; }
.decision-step:last-child .decision-dot { background: var(--teal); }
.decision-link { width: 2px; height: clamp(28px, 5vh, 54px); background: var(--teal); margin: 10px 0 10px calc(clamp(12px, 1.15vw, 22px) / 2 - 1px); transform-origin: top center; }

.question-board { padding: clamp(25px, 3vw, 58px); border: 1.5px solid var(--ink); }
.question-board .question-value { margin: 0; font-family: var(--display); font-size: clamp(36px, 4.2vw, 80px); font-weight: 400; line-height: 1.03; letter-spacing: -.035em; }
.question-board .question-value span { color: var(--teal); }
.phase-preview { display: flex; align-items: center; gap: clamp(12px, 2vw, 38px); margin-top: clamp(22px, 4.4vh, 48px); }
.phase-preview span { font-family: var(--mono); font-size: clamp(12px, 1.4vw, 27px); white-space: nowrap; }
.phase-connector { height: 2px; min-width: 22px; flex: 1; background: var(--teal); transform-origin: left center; }
.phase-board { display: flex; flex-direction: column; gap: clamp(16px, 3vh, 32px); }
.phase-panel { display: flex; align-items: center; gap: clamp(18px, 2vw, 38px); padding: clamp(20px, 2.5vw, 48px); border: 1.5px solid var(--ink); }
.phase-panel.emphasized { background: var(--ink); color: var(--paper); }
.phase-number { flex-shrink: 0; font-family: var(--mono); font-size: clamp(32px, 4vw, 76px); font-weight: 400; line-height: 1; color: var(--teal); }
.emphasized .phase-number { color: var(--pale-teal); }
.phase-panel .phase-name { margin: 0; font-size: clamp(23px, 2.7vw, 52px); font-weight: 500; line-height: 1.18; letter-spacing: -.02em; }

.workflow { border-top: 1px solid var(--rule); padding-top: clamp(14px, 2.5vh, 27px); }
.workflow-origin { display: flex; align-items: center; gap: 14px; color: var(--quiet); margin: 0 0 clamp(20px, 3.3vh, 36px); font-family: var(--mono); font-size: clamp(12px, 1.25vw, 24px); line-height: 1.2; }
.transcript-mark { width: clamp(24px, 2.5vw, 48px); height: clamp(31px, 3.1vw, 60px); flex-shrink: 0; border: 1.5px solid var(--ink); position: relative; }
.transcript-mark::before, .transcript-mark::after { content: ""; position: absolute; left: 22%; right: 22%; height: 1px; background: var(--rule); }
.transcript-mark::before { top: 36%; }
.transcript-mark::after { top: 60%; }
.workflow-steps { display: flex; flex-direction: column; align-items: stretch; }
.workflow-step { display: flex; align-items: center; gap: clamp(18px, 2vw, 38px); padding: clamp(18px, 2vw, 38px); border: 1.5px solid var(--ink); }
.workflow-step.software-step { color: var(--paper); background: var(--ink); }
.workflow-step .step-mark { font-family: var(--mono); font-size: clamp(12px, 1.35vw, 26px); color: var(--teal); }
.software-step .step-mark { color: var(--pale-teal); }
.workflow-step p { margin: 0; font-size: clamp(20px, 2.1vw, 40px); line-height: 1.18; font-weight: 500; letter-spacing: -.02em; }
.workflow-link { width: 2px; height: clamp(17px, 2.8vh, 30px); margin-left: clamp(33px, 4.3vw, 82px); background: var(--teal); transform-origin: top center; }

.theme-list { display: flex; flex-wrap: wrap; gap: clamp(10px, 1.15vw, 22px); margin-bottom: clamp(19px, 3.3vh, 36px); }
.theme-tag { display: inline-block; padding: .4em .62em; border: 1px solid var(--teal); color: var(--teal); font-size: clamp(16px, 1.7vw, 32px); font-weight: 500; line-height: 1.15; }
.theme-line { height: 2px; width: 100%; margin-bottom: clamp(20px, 3.3vh, 36px); background: var(--teal); transform-origin: left center; }
.readout-object { padding: clamp(24px, 3vw, 58px); color: var(--paper); background: var(--ink); }
.readout-object .artifact-label { color: var(--pale-teal); }
.readout-title { margin: 0; font-family: var(--display); font-size: clamp(30px, 3.55vw, 68px); font-weight: 400; line-height: 1.1; letter-spacing: -.025em; }
.readout-deliverables { margin: clamp(18px, 3vh, 32px) 0 0; font-size: clamp(15px, 1.6vw, 31px); line-height: 1.3; letter-spacing: -.02em; }

.competency-sheet { border: 1.5px solid var(--ink); padding: clamp(26px, 3.2vw, 62px); }
.criterion { margin: clamp(20px, 3.2vh, 35px) 0; max-width: 9em; font-family: var(--display); font-size: clamp(34px, 4vw, 76px); font-weight: 400; line-height: 1.08; letter-spacing: -.025em; }
.criterion-rule { width: 30%; height: 3px; background: var(--teal); transform-origin: left center; }
.anchor-list { display: flex; flex-direction: column; padding-top: 7px; }
.anchor-row { display: flex; align-items: center; gap: clamp(18px, 2vw, 38px); padding: clamp(17px, 3.2vh, 35px) 0; border-bottom: 1px solid var(--rule); }
.anchor-row:last-child { border-bottom: 0; }
.anchor-box { width: clamp(18px, 2vw, 38px); height: clamp(18px, 2vw, 38px); flex-shrink: 0; border: 1.5px solid var(--teal); }
.anchor-row p { margin: 0; font-size: clamp(23px, 2.7vw, 52px); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; }
.sample-sheet { border: 1.5px solid var(--ink); padding: clamp(24px, 2.7vw, 52px); }
.sample-text { margin: 0; font-family: var(--display); font-size: clamp(27px, 3.05vw, 58px); font-weight: 400; line-height: 1.35; letter-spacing: -.02em; text-wrap: pretty; }
.sample-emphasis { color: var(--teal); text-decoration: underline; text-decoration-thickness: .045em; text-underline-offset: .1em; }
.sample-annotations { display: flex; gap: clamp(10px, 1.5vw, 29px); flex-wrap: wrap; padding-top: clamp(15px, 2.5vh, 27px); margin-top: clamp(15px, 2.5vh, 27px); border-top: 1px solid var(--rule); }
.sample-annotations span { color: var(--teal); font-family: var(--mono); font-size: clamp(11px, 1.1vw, 21px); line-height: 1.3; }
.missing-anchor { display: flex; align-items: center; gap: 12px; margin-top: clamp(18px, 3.1vh, 34px); color: var(--ink); font-size: clamp(18px, 1.8vw, 34px); font-weight: 500; line-height: 1.25; }
.missing-anchor::before { content: ""; width: .7em; height: .7em; flex-shrink: 0; border: 1.5px solid var(--teal); }
.calibration-sheet { border-top: 1px solid var(--rule); }
.calibration-section { padding: clamp(20px, 3vw, 58px) 0; }
.calibration-section .artifact-label { color: var(--teal); }
.calibration-section p:last-child { margin: 0; font-family: var(--display); font-size: clamp(29px, 3.1vw, 60px); font-weight: 400; line-height: 1.15; letter-spacing: -.02em; }
.calibration-section.action-section { padding: clamp(22px, 2.7vw, 52px); background: var(--ink); color: var(--paper); }
.calibration-section.action-section .artifact-label { color: var(--pale-teal); }
.calibration-link { width: 2px; height: clamp(19px, 3vh, 32px); margin-left: clamp(30px, 4vw, 76px); background: var(--teal); transform-origin: top center; }

.playback-rule { position: absolute; z-index: 30; bottom: 0; left: 0; width: 100%; height: 3px; background: var(--teal); transform-origin: left center; pointer-events: none; }

@media (max-width: 850px) and (min-aspect-ratio: 1/1) {
  :root { --frame-pad: 4vw; --scene-gap: 3vw; --meta-space: clamp(59px, 13vh, 84px); }
  .scene-content { padding-top: calc(var(--meta-space) + 12px); }
  .scene-description { margin-top: 14px; font-size: 16px; }
  .scene-kicker { margin-bottom: 12px; }
  .field-row { min-height: 38px; }
  .phase-panel { padding: 18px; gap: 17px; }
  .phase-panel .phase-name { font-size: 22px; }
  .workflow-step { padding: 14px 18px; }
  .workflow-origin { margin-bottom: 14px; }
  .sample-text { font-size: 25px; }
  .sample-sheet { padding: 20px; }
}

/* A portrait frame receives its own composition, with readable type and compact artifacts. */
@media (max-aspect-ratio: 1/1) {
  :root { --frame-pad: clamp(18px, 5vw, 32px); --meta-space: clamp(66px, 14.5vh, 91px); --bottom-space: 18px; --scene-gap: 14px; }
  .composition-meta { flex-direction: column; gap: 5px; min-height: var(--meta-space); padding: 15px var(--frame-pad) 13px; }
  .meta-title { max-width: 100%; font-size: clamp(11px, 2.85vw, 16px); line-height: 1.2; }
  .evidence-label { font-size: clamp(10px, 2.6vw, 14px); line-height: 1.25; }
  .scene-content { padding-top: calc(var(--meta-space) + 10px); gap: 10px; justify-content: center; }
  .scene-layout { display: flex; flex-direction: column; align-items: stretch; justify-content: center; flex: 0; gap: 16px; }
  .scene-title, .scene-title.compact-title { max-width: 15em; font-size: clamp(26px, 7.2vw, 42px); line-height: 1.05; letter-spacing: -.032em; }
  .scene-kicker { margin-bottom: 8px; font-size: clamp(10px, 2.6vw, 14px); line-height: 1.2; }
  .scene-description { max-width: none; margin-top: 10px; font-size: clamp(15px, 3.8vw, 20px); line-height: 1.32; }
  .artifact-label { margin-bottom: 9px; font-size: clamp(10px, 2.65vw, 15px); line-height: 1.2; }
  .paper-sheet { padding: 15px 18px; box-shadow: 5px 5px 0 rgba(23, 32, 51, .055); }
  .sheet-heading { margin-bottom: 9px; font-size: clamp(15px, 4vw, 21px); }
  .field-list { margin-top: 6px; }
  .field-row { min-height: 33px; gap: 16px; }
  .field-name { font-size: clamp(17px, 4.3vw, 24px); min-width: 4.2em; }
  .field-check { font-size: 22px; }
  .timing-plan { margin-bottom: 15px; }
  .timing-labels { margin-bottom: 9px; font-size: clamp(11px, 2.85vw, 15px); }
  .timing-line::before, .timing-line::after { width: 8px; height: 8px; top: -3px; }
  .source-stack { gap: 3px; }
  .source-row { padding: 8px 0; gap: 15px; }
  .source-row.primary-source { padding: 13px 18px; }
  .source-name { font-size: clamp(17px, 4.3vw, 24px); }
  .source-mark { font-size: 12px; }
  .owner-signal { padding: 17px 20px; }
  .owner-signal p { font-size: clamp(21px, 5.5vw, 30px); }
  .missing-label { font-size: clamp(11px, 2.85vw, 16px); }
  .question-connector { height: 15px; margin-left: 30px; }
  .question-note { padding: 16px 20px; }
  .question-note .artifact-label { margin-bottom: 7px; }
  .question-note .question-text { font-size: clamp(21px, 5.5vw, 29px); line-height: 1.13; }
  .condition-object { gap: 18px; padding-bottom: 14px; }
  .if-word { font-size: clamp(45px, 12vw, 68px); }
  .condition-object p { max-width: 11em; font-size: clamp(18px, 4.6vw, 25px); }
  .decision-route { padding-top: 15px; }
  .decision-step { gap: 16px; }
  .decision-step p { font-size: clamp(19px, 4.9vw, 27px); }
  .decision-dot { width: 12px; height: 12px; }
  .decision-link { height: 22px; margin: 6px 0 6px 5px; }
  .question-board { padding: 19px 23px; }
  .question-board .question-value { font-size: clamp(32px, 8.8vw, 49px); }
  .phase-preview { margin-top: 18px; gap: 16px; }
  .phase-preview span { font-size: clamp(12px, 3.2vw, 18px); }
  .phase-board { gap: 12px; }
  .phase-panel { gap: 20px; padding: 17px 21px; }
  .phase-number { font-size: clamp(29px, 8vw, 44px); }
  .phase-panel .phase-name { font-size: clamp(20px, 5vw, 27px); line-height: 1.12; }
  .workflow { padding-top: 10px; }
  .workflow-origin { gap: 11px; margin-bottom: 12px; font-size: clamp(11px, 2.8vw, 16px); }
  .transcript-mark { width: 19px; height: 24px; }
  .workflow-steps { flex-direction: row; align-items: stretch; }
  .workflow-step { flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: 7px; padding: 12px 11px; }
  .workflow-step .step-mark { font-size: 10px; }
  .workflow-step p { font-size: clamp(15px, 3.95vw, 21px); line-height: 1.15; }
  .workflow-link { flex-shrink: 0; width: 13px; height: 2px; margin: auto 0; transform-origin: left center; }
  .theme-list { gap: 7px; margin-bottom: 13px; }
  .theme-tag { padding: .33em .45em; font-size: clamp(14px, 3.6vw, 20px); }
  .theme-line { margin-bottom: 13px; }
  .readout-object { padding: 18px 23px; }
  .readout-title { font-size: clamp(27px, 7.2vw, 39px); line-height: 1.06; }
  .readout-deliverables { margin-top: 12px; font-size: clamp(14px, 3.6vw, 20px); }
  .competency-sheet { padding: 23px 27px; }
  .criterion { max-width: 12em; margin: 13px 0 19px; font-size: clamp(29px, 7.8vw, 43px); }
  .criterion-rule { height: 2px; }
  .anchor-list { padding-top: 0; }
  .anchor-row { gap: 16px; padding: 14px 0; }
  .anchor-box { width: 18px; height: 18px; }
  .anchor-row p { font-size: clamp(20px, 5.2vw, 28px); }
  .sample-sheet { padding: 19px 22px; }
  .sample-text { font-size: clamp(23px, 6vw, 32px); line-height: 1.26; }
  .sample-annotations { gap: 12px; padding-top: 11px; margin-top: 13px; }
  .sample-annotations span { font-size: clamp(10px, 2.6vw, 14px); }
  .missing-anchor { margin-top: 13px; font-size: clamp(15px, 3.8vw, 21px); line-height: 1.2; }
  .calibration-section { padding: 17px 0; }
  .calibration-section .artifact-label { margin-bottom: 8px; }
  .calibration-section p:last-child { font-size: clamp(24px, 6.1vw, 34px); line-height: 1.13; }
  .calibration-section.action-section { padding: 18px 22px; }
  .calibration-link { height: 15px; margin-left: 29px; }
  .rubric-inspection .scene-layout, .rubric-calibration .scene-layout { gap: 13px; }
}

@media (max-width: 360px) and (max-aspect-ratio: 1/1) {
  :root { --frame-pad: 17px; --meta-space: 66px; --bottom-space: 15px; }
  .scene-content { padding-top: calc(var(--meta-space) + 8px); }
  .scene-layout { gap: 12px; }
  .scene-title, .scene-title.compact-title { font-size: 25px; }
  .scene-kicker { font-size: 10px; margin-bottom: 6px; }
  .scene-description { font-size: 14px; line-height: 1.28; margin-top: 8px; }
  .artifact-label { font-size: 10px; }
  .phase-panel { padding: 14px 18px; gap: 15px; }
  .phase-panel .phase-name { font-size: 18px; }
  .phase-board { gap: 10px; }
  .workflow-step { padding: 10px 9px; }
  .workflow-step p { font-size: 14px; }
  .workflow-link { width: 10px; }
  .sample-sheet { padding: 16px 18px; }
  .sample-text { font-size: 21px; }
  .sample-annotations { gap: 8px; }
  .calibration-section p:last-child { font-size: 22px; }
  .calibration-section { padding: 14px 0; }
  .calibration-section.action-section { padding: 17px 19px; }
  .question-note .question-text { font-size: 20px; }
  .readout-title { font-size: 25px; }
  .theme-tag { font-size: 13px; }
  .criterion { font-size: 28px; }
  .anchor-row { padding: 12px 0; }
  .anchor-row p { font-size: 19px; }
}