:root {
  color-scheme: light;
  --ink: #17231f;
  --muted: #61706a;
  --paper: #f8faf8;
  --panel: #ffffff;
  --line: #d8e0dc;
  --accent: #0f8b6f;
  --accent-dark: #086554;
  --warn: #c56b2d;
  --bad: #b94747;
  --truth: #146db5;
  --shadow: 0 20px 60px rgba(28, 44, 38, .12);
  --radius-card: .5rem;
  --radius-control: .45rem;
  --control-min: 2.75rem;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans TC", "Segoe UI", sans-serif;
}

/* 00. Base reset and shared text safety */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100svh;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

button,
input,
a {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.eyebrow {
  margin: 0 0 .45rem;
  color: var(--accent-dark);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

p,
h1,
h2,
h3,
strong,
span,
a,
button,
input {
  overflow-wrap: anywhere;
  word-break: break-word;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(20, 109, 181, .38);
  outline-offset: 2px;
}

[data-motion-active="true"] {
  will-change: transform, opacity, filter;
}

/* 01. Landing entry surface */

.landing {
  background: #101a17;
}

.split-entry {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 28rem);
}

.entry-visual {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: clamp(2rem, 7vw, 6rem);
  color: #f7faf8;
}

.entry-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 20, 18, .92), rgba(10, 20, 18, .36)),
    radial-gradient(circle at 60% 38%, #8fd9c8 0 8%, transparent 9%),
    radial-gradient(circle at 72% 56%, #eec276 0 5%, transparent 6%),
    radial-gradient(circle at 42% 68%, #7aa8c8 0 7%, transparent 8%),
    #21322f;
}

.capsid-field span {
  position: absolute;
  width: clamp(4rem, 10vw, 9rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.9), rgba(171,205,197,.55) 38%, rgba(30,48,44,.45) 76%);
  animation: drift 11s ease-in-out infinite alternate;
}

.capsid-field span:nth-child(1) { left: 55%; top: 12%; }
.capsid-field span:nth-child(2) { left: 72%; top: 26%; animation-delay: -2s; }
.capsid-field span:nth-child(3) { left: 47%; top: 42%; animation-delay: -4s; }
.capsid-field span:nth-child(4) { left: 67%; top: 62%; animation-delay: -1s; }
.capsid-field span:nth-child(5) { left: 35%; top: 22%; animation-delay: -5s; }
.capsid-field span:nth-child(n+6) { opacity: .35; transform: scale(.55); }
.capsid-field span:nth-child(6) { left: 82%; top: 72%; }
.capsid-field span:nth-child(7) { left: 25%; top: 74%; }
.capsid-field span:nth-child(8) { left: 76%; top: 7%; }
.capsid-field span:nth-child(9) { left: 58%; top: 81%; }
.capsid-field span:nth-child(10) { left: 88%; top: 42%; }

.entry-copy {
  position: relative;
  max-width: 38rem;
  animation: rise .7s ease both;
}

.entry-copy h1 {
  margin-bottom: 1rem;
  font-size: clamp(3rem, 8vw, 7.6rem);
  line-height: .95;
}

.entry-copy p:last-child {
  max-width: 33rem;
  color: rgba(247, 250, 248, .82);
  font-size: 1.15rem;
  line-height: 1.7;
}

.entry-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  background: var(--paper);
}

.primary-link,
.secondary-link,
.ghost-link,
.action-button,
.secondary-button {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-card);
  border: 1px solid var(--ink);
  padding: .8rem 1rem;
  text-decoration: none;
  font-weight: 800;
  cursor: pointer;
}

.primary-link,
.action-button {
  color: white;
  background: var(--ink);
}

.secondary-link,
.secondary-button,
.ghost-link {
  color: var(--ink);
  background: transparent;
}

.action-button:disabled {
  border-color: var(--line);
  color: #8a9691;
  background: #e6ece9;
  cursor: not-allowed;
}

/* 02. Shared shells and primitives */

.teacher-shell,
.student-shell {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
  max-width: 100%;
}

.topbar,
.student-hero,
.preview-heading,
.model-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.topbar > *,
.student-hero > *,
.preview-heading > *,
.model-heading > *,
.intro-section > *,
.visual-pair > *,
.teacher-layout > *,
.qr-layout > * {
  min-width: 0;
}

.topbar {
  min-height: 7.5rem;
  padding: 1.5rem 0;
}

.topbar h1,
.student-hero h1 {
  margin: 0;
}

.teacher-layout {
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr);
  gap: 1rem;
  padding-bottom: 2rem;
}

.pack-list,
.pack-preview,
.model-panel,
.validation-section,
.intro-section,
.empty-state {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}

/* 03. Teacher setup and QR workflow */

.pack-list {
  align-self: start;
  padding: 1rem;
}

.pack-list h2 {
  font-size: 1rem;
}

.pack-button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .65rem;
  padding: .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  color: var(--ink);
  background: white;
  cursor: pointer;
}

.pack-button.is-selected {
  border-color: var(--accent);
  background: #eef8f5;
}

.pack-button span {
  color: var(--muted);
  white-space: nowrap;
}

.pack-preview {
  padding: clamp(1rem, 4vw, 2rem);
}

.preview-heading h2 {
  margin-bottom: .4rem;
  font-size: clamp(1.8rem, 5vw, 3.5rem);
}

.qr-layout {
  display: grid;
  grid-template-columns: minmax(12rem, 18.5rem) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  margin-top: 2rem;
  max-width: 100%;
}

.qr-canvas {
  width: 100%;
  max-width: 18.5rem;
  aspect-ratio: 1;
  justify-self: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.url-box {
  display: grid;
  gap: .65rem;
}

.url-box label {
  color: var(--muted);
  font-size: .9rem;
  font-weight: 800;
}

.url-box input {
  width: 100%;
  min-height: 3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  padding: .75rem;
  color: var(--ink);
}

.teacher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .75rem;
  margin-top: 1.5rem;
}

.stat-block {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}

.stat-block strong {
  display: block;
  font-size: 2rem;
}

.stat-block span,
.teacher-sources a,
.method,
.locked-copy,
.takeaway {
  color: var(--muted);
}

.teacher-sources {
  display: grid;
  gap: .5rem;
  margin-top: 1.5rem;
}

.teacher-runbook {
  margin-top: 1.5rem;
}

.teacher-sources a {
  overflow-wrap: anywhere;
}

/* 04. Shared student lesson primitives */

.student-shell {
  width: 100%;
  max-width: 1180px;
  padding: 1rem 1rem 2rem;
}

.student-hero {
  min-height: 11rem;
  padding: clamp(1rem, 5vw, 2.5rem) 0;
}

.student-hero h1 {
  max-width: 100%;
  font-size: clamp(2.05rem, 9vw, 5rem);
  line-height: 1;
  overflow-wrap: anywhere;
  word-break: normal;
}

.student-hero p:last-child {
  max-width: min(44rem, 100%);
  color: var(--muted);
  line-height: 1.7;
  overflow-wrap: anywhere;
  word-break: normal;
}

.intro-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14rem;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  margin-bottom: 1rem;
  overflow: hidden;
}

.intro-section h2 {
  margin-bottom: .5rem;
}

.intro-section p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.65;
}

.activity-section {
  width: 100%;
  max-width: 100%;
  margin-top: 1rem;
  padding: clamp(1rem, 4vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.activity-section.is-locked {
  background: #f3f6f4;
}

.activity-section.is-complete {
  border-color: rgba(15, 139, 111, .35);
}

.lab-hero {
  border-bottom: 1px solid var(--line);
}

.section-heading {
  max-width: 56rem;
}

.section-heading h2 {
  margin-bottom: .45rem;
  font-size: clamp(1.45rem, 4vw, 2.35rem);
  line-height: 1.08;
}

.section-heading p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.65;
}

.step-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
  margin-bottom: .65rem;
}

.step-kicker span,
.step-kicker strong {
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .35rem .7rem;
  font-size: .8rem;
  font-weight: 900;
}

.step-kicker span {
  color: white;
  background: var(--ink);
}

.step-kicker strong {
  color: var(--accent-dark);
  background: #e6f3ef;
}

.timeline-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}

.timeline-strip span {
  flex: 1 1 8.5rem;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .45rem .65rem;
  color: var(--muted);
  background: #fbfcfb;
  font-size: .86rem;
  font-weight: 800;
  text-align: center;
}

.budget-meter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem .9rem;
  align-items: center;
  margin: 1rem 0;
  padding: .9rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: #fbfcfb;
}

.budget-meter span {
  color: var(--muted);
  font-weight: 800;
}

.budget-meter strong {
  font-size: 1.15rem;
}

.budget-bar {
  grid-column: 1 / -1;
  height: .55rem;
  border-radius: 999px;
  background: #dfe7e3;
  overflow: hidden;
}

.budget-bar i {
  width: calc(var(--fill) * 100%);
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--accent);
  transition: width .2s ease;
}

.budget-meter.is-full .budget-bar i {
  background: #146db5;
}

.candidate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: .75rem;
  margin-top: 1rem;
}

.candidate-card {
  min-height: 14.5rem;
  display: grid;
  align-content: start;
  gap: .65rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  padding: .9rem;
  color: var(--ink);
  background: white;
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.candidate-card > * {
  min-width: 0;
}

.candidate-card:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(15, 139, 111, .45);
  box-shadow: 0 12px 28px rgba(28, 44, 38, .1);
}

.candidate-card:disabled {
  cursor: not-allowed;
}

.candidate-card.is-selected {
  border-color: var(--accent);
  background: #eef8f5;
}

.candidate-card.is-advised {
  box-shadow: inset 0 0 0 2px rgba(20, 109, 181, .22);
}

.candidate-card.is-truth {
  border-color: rgba(20, 109, 181, .45);
  background: #eef6fc;
}

.candidate-card.is-decoy {
  border-color: rgba(185, 71, 71, .35);
  background: #fff6f3;
}

.card-topline,
.card-action {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
}

.card-topline strong {
  font-size: 1rem;
  line-height: 1.3;
}

.card-topline em,
.card-action small {
  flex: 0 0 auto;
  color: var(--muted);
  font-style: normal;
  font-weight: 800;
}

.candidate-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.candidate-tags i {
  border-radius: 999px;
  padding: .25rem .5rem;
  color: #41524b;
  background: #eef2ef;
  font-size: .76rem;
  font-style: normal;
  font-weight: 800;
}

.candidate-copy {
  display: block;
  color: var(--muted);
  font-size: .93rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: normal;
}

.card-action {
  align-self: end;
  align-items: center;
  margin-top: .2rem;
}

.card-action b {
  color: var(--accent-dark);
  font-size: .9rem;
}

.locked-summary {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: #fbfcfb;
}

.locked-summary h3 {
  margin-bottom: .75rem;
}

.selection-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.selection-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .45rem .6rem;
  color: var(--ink);
  background: white;
  font-size: .86rem;
  font-weight: 800;
}

.selection-chip.is-truth {
  border-color: rgba(20, 109, 181, .35);
  background: #eaf4fb;
}

.selection-chip.is-decoy {
  border-color: rgba(185, 71, 71, .32);
  background: #fff1ed;
}

.empty-copy {
  color: var(--muted);
}

.model-advice {
  margin-top: 1rem;
}

.model-advice-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: #fbfcfb;
}

.model-advice-top h3 {
  margin-bottom: .35rem;
  font-size: clamp(1.15rem, 4vw, 1.65rem);
}

.model-panel,
.validation-section,
.empty-state {
  margin-top: 1rem;
  padding: clamp(1rem, 4vw, 1.5rem);
  overflow: hidden;
}

.model-heading h2 {
  margin-bottom: 0;
  font-size: clamp(1.25rem, 6vw, 2.1rem);
}

.method {
  line-height: 1.6;
}

.visual-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(10rem, .65fr);
  gap: 1rem;
  align-items: center;
  margin: 1rem 0;
}

.sequence-map {
  min-width: 0;
  padding: .45rem 0 .25rem;
  max-width: 100%;
  overflow: visible;
}

.sequence-axis {
  position: relative;
  height: 3.35rem;
  border-radius: .5rem;
  border: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(15,139,111,.08) 0 1px, transparent 1px) 0 0 / 8.33% 100%,
    #fbfcfb;
  overflow: hidden;
}

.sequence-axis::before {
  content: "";
  position: absolute;
  left: .75rem;
  right: .75rem;
  top: 1.5rem;
  height: .35rem;
  border-radius: 999px;
  background: #ccd8d3;
}

.sequence-track {
  position: absolute;
  left: .75rem;
  right: .75rem;
  top: 1.5rem;
  height: .35rem;
  border-radius: 999px;
}

.sequence-highlight-layer {
  position: absolute;
  left: .75rem;
  right: .75rem;
  top: 1.5rem;
  height: .35rem;
  pointer-events: none;
}

.sequence-active-range {
  position: absolute;
  left: var(--range-left);
  width: var(--range-width);
  top: -.12rem;
  bottom: -.12rem;
  min-width: .42rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  box-shadow: 0 0 0 .13rem rgba(15, 139, 111, .16), 0 .35rem .8rem rgba(15, 139, 111, .2);
}

.sequence-tick {
  position: absolute;
  top: .55rem;
  bottom: .55rem;
  width: 1px;
  background: rgba(23, 35, 31, .16);
}

.sequence-tick b {
  position: absolute;
  left: 50%;
  top: 1.35rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  transform: translateX(-50%);
  white-space: nowrap;
}

.sequence-tick.is-start b {
  left: 0;
  transform: none;
}

.sequence-tick.is-end b {
  right: 0;
  left: auto;
  text-align: right;
  transform: none;
}

.sequence-marker-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(4.75rem, 6.35rem);
  gap: .45rem;
  max-width: 100%;
  padding: .55rem .05rem .35rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: .4rem;
  scrollbar-width: thin;
}

.sequence-marker-strip.is-dragging {
  user-select: none;
}

.sequence-marker-strip::-webkit-scrollbar {
  height: .45rem;
}

.sequence-marker-strip::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(23, 35, 31, .22);
}

.region-marker {
  position: relative;
  min-height: 3.65rem;
  min-width: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .12rem;
  border: 1px solid rgba(23, 35, 31, .16);
  border-radius: .4rem;
  padding: .45rem .35rem;
  color: var(--muted);
  background: rgba(255, 255, 255, .75);
  text-align: center;
  transform: translateZ(0);
  transition: transform .2s ease, background .2s ease, color .2s ease;
}

.region-marker::before {
  content: "";
  position: absolute;
  top: -.55rem;
  left: 50%;
  width: max(calc(var(--span) * .05rem), .35rem);
  max-width: 1.6rem;
  height: .18rem;
  border-radius: 999px;
  background: rgba(23, 35, 31, .22);
  transform: translateX(-50%);
}

.region-marker strong {
  color: currentColor;
  font-size: .78rem;
  line-height: 1;
}

.region-marker span {
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

.region-marker.is-predicted {
  z-index: 2;
  color: white;
  background: var(--accent);
  transform: translateY(-.12rem);
}

.region-marker.is-truth {
  color: white;
  background: var(--truth);
}

.region-marker.is-decoy {
  background: rgba(185, 71, 71, .12);
  border-color: rgba(185, 71, 71, .35);
}

.sequence-labels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  color: var(--muted);
  font-size: .78rem;
  padding-top: .4rem;
}

.sequence-labels span:nth-child(2) {
  text-align: center;
}

.sequence-labels span:last-child {
  text-align: right;
}

.capsid-svg {
  width: 100%;
  min-height: 12rem;
  filter: drop-shadow(0 18px 28px rgba(23, 35, 31, .16));
}

.capsid-point {
  fill: rgba(255,255,255,.55);
  stroke: rgba(23,35,31,.22);
  stroke-width: .8;
  transition: r .2s ease, fill .2s ease;
}

.capsid-point.is-predicted {
  fill: var(--accent);
  stroke: white;
  stroke-width: 1.5;
}

.capsid-point.is-truth {
  fill: var(--truth);
  stroke: white;
}

.capsid-point.is-decoy {
  fill: var(--bad);
  opacity: .45;
}

.prediction-list {
  display: grid;
  gap: .6rem;
}

.prediction-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) 4.6rem minmax(5rem, .8fr) 3rem auto;
  gap: .6rem;
  align-items: center;
  padding: .65rem 0;
  border-top: 1px solid var(--line);
}

.prediction-row.is-selected strong {
  color: var(--accent-dark);
}

.prediction-row span,
.prediction-row em {
  color: var(--muted);
  font-style: normal;
}

meter {
  width: 100%;
  height: .7rem;
}

.mini-button {
  min-height: 2.25rem;
  border: 1px solid var(--line);
  border-radius: .45rem;
  padding: .35rem .6rem;
  color: var(--ink);
  background: white;
  font-weight: 900;
  cursor: pointer;
}

.mini-button:disabled {
  color: #8a9691;
  background: #eef2ef;
  cursor: not-allowed;
}

.takeaway,
.locked-copy {
  margin: 1rem 0 0;
  line-height: 1.65;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.legend-item::before {
  content: "";
  width: .85rem;
  height: .85rem;
  display: inline-block;
  margin-right: .35rem;
  border-radius: 50%;
  vertical-align: -1px;
  background: var(--accent);
}

.legend-item.truth::before {
  background: var(--truth);
}

.legend-item.decoy::before {
  background: var(--bad);
  opacity: .6;
}

.model-tabs {
  display: flex;
  gap: .5rem;
  margin: 1rem 0;
  overflow-x: auto;
}

.model-tabs button {
  min-height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: .45rem;
  padding: .55rem .8rem;
  background: white;
  color: var(--ink);
  white-space: nowrap;
}

.model-tabs button.is-selected {
  border-color: var(--accent);
  background: #eef8f5;
}

.matrix-wrap {
  margin-top: 1rem;
}

.matrix-title {
  margin-bottom: .5rem;
  font-weight: 900;
}

.matrix-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

.matrix-axis {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
}

.matrix-cell {
  min-height: 8rem;
  display: grid;
  align-content: start;
  gap: .35rem;
  border-radius: .5rem;
  padding: .85rem;
  border: 1px solid var(--line);
  background: #fbfcfb;
}

.matrix-cell strong {
  font-size: 2.4rem;
  line-height: 1;
}

.matrix-cell small {
  color: var(--muted);
  line-height: 1.45;
}

.matrix-cell.tp {
  border-color: rgba(15,139,111,.35);
  background: #eef8f5;
}

.matrix-cell.fp,
.matrix-cell.fn {
  border-color: rgba(185,71,71,.28);
  background: #fff5f2;
}

.metric-strip {
  display: flex;
  gap: .75rem;
  margin-top: .75rem;
  font-weight: 900;
}

.metric-strip span {
  padding: .5rem .75rem;
  border-radius: .45rem;
  background: #eef2ef;
}

.box-quote {
  display: grid;
  gap: .4rem;
  margin: 1rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--line);
}

.box-quote strong {
  font-size: clamp(1.2rem, 6vw, 2rem);
}

.box-quote span {
  color: var(--muted);
  line-height: 1.6;
}

.delta-banner {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin: 1rem 0;
}

.delta-banner strong,
.delta-banner span {
  border-radius: 999px;
  padding: .55rem .8rem;
  font-weight: 900;
}

.delta-banner strong {
  color: white;
  background: var(--ink);
}

.delta-banner span {
  color: #24453d;
  background: #e6f3ef;
}

.experiment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.experiment-card {
  display: grid;
  align-content: start;
  gap: .8rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  padding: 1rem;
  background: #fbfcfb;
}

.experiment-card.ai {
  border-color: rgba(20, 109, 181, .35);
  background: #eef6fc;
}

.experiment-card h3 {
  margin-bottom: 0;
}

.result-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}

.result-metrics span {
  min-height: 4.7rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: .45rem;
  color: var(--muted);
  background: white;
  font-weight: 900;
  text-align: center;
}

.result-metrics b {
  display: block;
  color: var(--ink);
  font-size: 2rem;
  line-height: 1;
}

.scoreline {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  font-weight: 900;
}

.scoreline span {
  border-radius: .45rem;
  padding: .45rem .6rem;
  background: white;
}

.feedback-panel,
.reflection-panel {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.feedback-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: .75rem;
}

.feedback-item {
  border: 1px solid var(--line);
  border-radius: .5rem;
  padding: .9rem;
  background: #fbfcfb;
}

.feedback-item.is-truth {
  border-color: rgba(20, 109, 181, .35);
  background: #eef6fc;
}

.feedback-item.is-decoy {
  border-color: rgba(185, 71, 71, .28);
  background: #fff5f2;
}

.feedback-item strong,
.feedback-item span {
  display: block;
}

.feedback-item span {
  margin: .25rem 0 .45rem;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 800;
}

.feedback-item p,
.reflection-panel p {
  margin-bottom: .6rem;
  color: var(--muted);
  line-height: 1.6;
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(-1rem, 1.2rem, 0) rotate(12deg); }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
  }

  .capsid-field span,
  .lab-scene {
    animation: none !important;
    transform: none !important;
  }
}

@media (max-width: 820px) {
  .split-entry,
  .teacher-layout,
  .qr-layout,
  .visual-pair,
.intro-section {
    grid-template-columns: 1fr;
  }

  .split-entry {
    min-height: auto;
  }

  .entry-visual {
    min-height: 62svh;
  }

  .topbar,
  .student-hero,
  .preview-heading,
  .model-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .ghost-link,
  .primary-link,
  .secondary-link,
  .action-button,
  .secondary-button {
    width: 100%;
  }

  .teacher-grid,
  .prediction-row {
    grid-template-columns: 1fr;
  }

  .qr-layout {
    justify-items: center;
  }

  .url-box {
    width: 100%;
  }

  .intro-section .capsid-svg {
    max-height: 14rem;
  }

  .matrix-cell {
    min-height: 9rem;
  }
}

@media (max-width: 430px) {
  .teacher-shell {
    width: min(calc(100% - 1rem), 1120px);
  }

  .qr-layout {
    gap: 1rem;
  }

  .qr-canvas {
    max-width: min(18.5rem, 100%);
  }

  .student-shell {
    padding-right: .5rem;
    padding-left: .5rem;
  }

  .student-hero h1 {
    font-size: 2.15rem;
  }

  .student-hero p,
  .intro-section p,
  .method {
    line-break: anywhere;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .model-panel,
  .validation-section,
  .pack-preview,
  .pack-list {
    border-radius: .4rem;
  }

  .sequence-axis {
    height: 3.2rem;
  }

  .sequence-marker-strip {
    grid-auto-columns: minmax(4.35rem, 5.25rem);
    gap: .35rem;
  }

  .region-marker {
    min-height: 3.5rem;
  }
}

/* Interactive student lab redesign */
body.lab-student-body {
  --lab-ink: #17231f;
  --lab-muted: #5b6964;
  --lab-bg: #edf2ef;
  --lab-panel: #fbfcfb;
  --lab-rail: #e0e7e3;
  --lab-line: #c9d5d0;
  --lab-green: #0f8b6f;
  --lab-blue: #146db5;
  --lab-amber: #c56b2d;
  --lab-red: #b94747;
  background:
    linear-gradient(180deg, rgba(255,255,255,.7), rgba(237,242,239,0) 18rem),
    var(--lab-bg);
}

.lab-student-body .student-shell {
  width: min(1180px, 100%);
  padding: 1rem 1rem 7.2rem;
}

.lab-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: end;
  padding: 1.25rem 0 1rem;
  border-bottom: 1px solid var(--lab-line);
}

.lab-titleblock h1 {
  margin: 0 0 .65rem;
  font-size: 3.4rem;
  line-height: .98;
}

.lab-titleblock p:last-child {
  max-width: 44rem;
  margin-bottom: 0;
  color: var(--lab-muted);
  line-height: 1.65;
}

.scene-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(8.2rem, 9.75rem);
  gap: .5rem;
  padding: .85rem 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: .5rem;
  scrollbar-width: none;
}

.scene-rail::-webkit-scrollbar {
  display: none;
}

.scene-step {
  min-height: 3.35rem;
  min-width: 0;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: .5rem;
  align-items: center;
  border: 1px solid var(--lab-line);
  border-radius: .5rem;
  padding: .45rem .55rem;
  color: var(--lab-muted);
  background: rgba(251,252,251,.82);
  text-align: left;
  cursor: pointer;
}

.scene-step b {
  width: 1.75rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: #45564f;
  font-size: .78rem;
}

.scene-step span {
  font-size: .82rem;
  font-weight: 900;
  line-height: 1.2;
  min-width: 0;
}

.scene-step.is-current {
  border-color: var(--lab-green);
  color: var(--lab-ink);
  background: #eef8f5;
}

.scene-step.is-current b,
.scene-step.is-done b {
  background: var(--lab-green);
}

.scene-step.is-locked {
  opacity: .48;
  cursor: not-allowed;
}

.lab-scene {
  min-height: 35rem;
  border: 1px solid var(--lab-line);
  border-radius: .5rem;
  padding: 1.25rem;
  background: rgba(251,252,251,.94);
  box-shadow: 0 24px 70px rgba(28, 44, 38, .1);
}

.lab-scene.is-entering {
  animation: rise .22s ease both;
}

.lab-scene-heading {
  max-width: 52rem;
  margin-bottom: 1rem;
}

.lab-scene-heading h2 {
  margin-bottom: .45rem;
  font-size: 2rem;
  line-height: 1.08;
}

.lab-scene-heading p {
  margin-bottom: .5rem;
  color: var(--lab-muted);
  line-height: 1.65;
}

.lab-scene-heading > strong {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  border-radius: 999px;
  padding: .35rem .7rem;
  color: #114f42;
  background: #e3f2ee;
  font-size: .82rem;
}

.brief-grid,
.workspace-grid,
.debrief-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(20rem, .75fr);
  gap: 1rem;
  align-items: start;
}

.brief-grid > *,
.workspace-grid > *,
.debrief-grid > *,
.model-dashboard > *,
.model-decision-card > *,
.threshold-console > *,
.plate-compare > *,
.lab-header > * {
  min-width: 0;
}

.lab-student-body p,
.lab-student-body h1,
.lab-student-body h2,
.lab-student-body h3,
.lab-student-body span,
.lab-student-body strong,
.lab-student-body button {
  overflow-wrap: anywhere;
}

.brief-copy,
.hero-instrument,
.instrument-frame,
.evidence-panel,
.model-decision-card,
.threshold-console,
.plate-block,
.final-readout,
.lab-lock {
  border: 1px solid var(--lab-line);
  border-radius: .5rem;
  background: white;
}

.brief-copy {
  padding: 1rem;
}

.brief-copy > p {
  color: var(--lab-muted);
  line-height: 1.7;
}

.stat-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0;
}

.stat-pill {
  min-height: 3.25rem;
  display: inline-grid;
  align-content: center;
  justify-items: center;
  border: 1px solid var(--lab-line);
  border-radius: .5rem;
  padding: .55rem .75rem;
  background: #f6f8f7;
  color: var(--lab-muted);
  font-size: .84rem;
  font-weight: 800;
  text-align: center;
}

.stat-pill b {
  display: block;
  color: var(--lab-ink);
  font-size: 1.35rem;
  line-height: 1;
}

.scene-note {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--lab-line);
}

.hero-instrument {
  padding: 1rem;
  background:
    linear-gradient(145deg, rgba(20,109,181,.08), rgba(15,139,111,.08)),
    white;
}

.hero-instrument .capsid-svg {
  min-height: 18rem;
}

.instrument-readout {
  display: grid;
  gap: .25rem;
  border-top: 1px solid var(--lab-line);
  padding-top: .85rem;
}

.instrument-readout span {
  color: var(--lab-muted);
  line-height: 1.45;
}

@media (hover: hover) and (pointer: fine) {
  .sequence-marker-strip,
  .capsid-turntable {
    cursor: grab;
  }

  .sequence-marker-strip.is-dragging,
  .capsid-turntable.is-dragging {
    cursor: grabbing;
  }
}

.protein-explorer {
  display: grid;
  gap: 1rem;
}

.instrument-frame {
  padding: .8rem;
  overflow: hidden;
}

.surface-frame {
  padding-bottom: 5rem;
}

.instrument-topline,
.plate-title {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  align-items: center;
  margin-bottom: .55rem;
  color: var(--lab-muted);
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.instrument-topline b,
.plate-title strong {
  color: var(--lab-ink);
}

.lab-sequence-map {
  padding-top: .25rem;
}

.lab-sequence-map .sequence-axis {
  height: 3.35rem;
  border-color: #becdc6;
  background:
    linear-gradient(90deg, rgba(20,109,181,.08) 0 1px, transparent 1px) 0 0 / 10% 100%,
    linear-gradient(180deg, #fbfcfb, #edf3ef);
}

.lab-sequence-map .region-marker {
  cursor: pointer;
}

.lab-capsid-map {
  min-height: 15rem;
}

.lab-capsid-map [data-region-id] {
  cursor: pointer;
}

.capsid-turntable {
  display: grid;
  gap: .65rem;
  touch-action: pan-y;
  user-select: none;
}

.surface-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .35rem;
  width: min(100%, 22rem);
  justify-self: center;
}

.surface-mode-switch button {
  min-height: 2.55rem;
  display: grid;
  place-items: center;
  gap: .05rem;
  border: 1px solid var(--lab-line);
  border-radius: .45rem;
  color: var(--lab-muted);
  background: #fbfcfb;
  font: inherit;
  cursor: pointer;
}

.surface-mode-switch button.is-active {
  border-color: rgba(15, 145, 113, .82);
  color: white;
  background: var(--lab-green);
  box-shadow: 0 .45rem 1rem rgba(15, 145, 113, .18);
}

.surface-mode-switch span {
  font-size: .82rem;
  font-weight: 900;
  line-height: 1.05;
}

.surface-mode-switch small {
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.05;
}

.turntable-stage {
  position: relative;
  width: min(100%, 26rem);
  min-height: 15rem;
  aspect-ratio: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(20, 109, 181, .14);
  border-radius: .5rem;
  background:
    radial-gradient(circle at 46% 38%, rgba(255,255,255,.95), rgba(237,243,241,.86) 56%, rgba(218,228,231,.74) 100%),
    #f8faf8;
}

.turntable-stage img {
  width: min(100%, 32rem);
  height: auto;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 16px 24px rgba(23, 35, 31, .13));
}

.surface-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--overlay-opacity, .72);
  background: rgba(16, 145, 113, .95);
  -webkit-mask-image: var(--overlay-mask);
  mask-image: var(--overlay-mask);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  mix-blend-mode: multiply;
}

.surface-overlay.is-low-exposure {
  background:
    repeating-linear-gradient(135deg, rgba(16,145,113,.92) 0 .22rem, transparent .22rem .46rem),
    rgba(16,145,113,.34);
  mix-blend-mode: multiply;
}

.surface-overlay.is-truth {
  background: rgba(20, 109, 181, .86);
}

.surface-overlay.is-decoy {
  opacity: min(var(--overlay-opacity, .54), .54);
  background:
    repeating-linear-gradient(135deg, rgba(181,75,49,.74) 0 .2rem, transparent .2rem .48rem),
    rgba(181,75,49,.28);
}

.capsid-projection-marker {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 1rem;
  height: 1rem;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 999px;
  padding: 0;
  color: white;
  background: rgba(23,35,31,.48);
  box-shadow: 0 0 0 1px rgba(23,35,31,.28), 0 .35rem .9rem rgba(23,35,31,.2);
  transform: translate(-50%, -50%);
  transition: width .16s ease, height .16s ease, background .16s ease, transform .16s ease;
}

.capsid-projection-marker span {
  opacity: 0;
  font-size: .64rem;
  font-weight: 900;
  line-height: 1;
}

.capsid-projection-marker.is-predicted {
  width: 1.35rem;
  height: 1.35rem;
  background: var(--lab-green);
  z-index: 2;
}

.capsid-projection-marker:hover,
.capsid-projection-marker:focus-visible {
  width: 2.6rem;
  height: 2.1rem;
  border-radius: .45rem;
  background: var(--lab-green);
  transform: translate(-50%, -50%) scale(1.03);
  z-index: 3;
}

.capsid-projection-marker:hover span,
.capsid-projection-marker:focus-visible span {
  opacity: 1;
}

.capsid-projection-marker.is-truth {
  background: var(--lab-blue);
}

.capsid-projection-marker.is-decoy {
  background: var(--lab-red);
  opacity: .62;
}

.turntable-controls {
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr) 2.35rem;
  gap: .45rem;
  align-items: center;
}

.turntable-controls button {
  min-height: 2.25rem;
  border: 1px solid var(--lab-line);
  border-radius: .45rem;
  color: var(--lab-ink);
  background: #fbfcfb;
  font-size: 1.2rem;
  font-weight: 900;
  cursor: pointer;
}

.turntable-controls span {
  color: var(--lab-muted);
  font-size: .78rem;
  font-weight: 800;
  text-align: center;
}

.evidence-panel {
  position: sticky;
  top: .75rem;
  padding: 1rem;
}

.evidence-title {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.evidence-title h3 {
  margin-bottom: .35rem;
  font-size: 1.35rem;
  line-height: 1.15;
}

.evidence-title span,
.candidate-main small,
.model-note span {
  color: var(--lab-muted);
  line-height: 1.45;
}

.panel-action {
  flex: 0 0 auto;
  min-height: 2.65rem;
  border: 1px solid var(--lab-green);
  border-radius: .5rem;
  padding: .55rem .75rem;
  color: white;
  background: var(--lab-green);
  font-weight: 900;
  cursor: pointer;
}

.panel-action.is-selected {
  color: var(--lab-ink);
  background: #e8f5f1;
}

.panel-action:disabled {
  border-color: var(--lab-line);
  color: #7d8a84;
  background: #edf2ef;
  cursor: not-allowed;
}

.evidence-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4.4rem, 1fr));
  gap: .35rem;
  margin: 1rem 0;
}

.evidence-tabs button {
  min-height: 2.35rem;
  border: 1px solid var(--lab-line);
  border-radius: .45rem;
  color: var(--lab-muted);
  background: #f8faf8;
  font-size: .82rem;
  font-weight: 900;
  cursor: pointer;
}

.evidence-tabs button.is-active {
  border-color: var(--lab-ink);
  color: white;
  background: var(--lab-ink);
}

.evidence-copy {
  display: grid;
  gap: .8rem;
}

.evidence-copy p {
  margin-bottom: 0;
  color: var(--lab-muted);
  line-height: 1.65;
}

.misconception-box,
.active-model-note {
  display: grid;
  gap: .25rem;
  border-left: 4px solid var(--lab-amber);
  padding: .75rem .85rem;
  background: #fff8ef;
  color: #5d4936;
}

.active-model-note {
  border-left-color: var(--lab-blue);
  background: #eef6fc;
  color: #264761;
}

.mobile-region-sheet {
  display: none;
}

.model-note-list {
  display: grid;
  gap: .65rem;
}

.model-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6rem;
  gap: .75rem;
  align-items: center;
  border: 1px solid var(--lab-line);
  border-radius: .5rem;
  padding: .65rem;
  background: #f8faf8;
}

.model-note strong,
.model-note span {
  display: block;
}

.model-note meter {
  width: 100%;
}

.model-note em {
  color: var(--lab-muted);
  font-size: .78rem;
  font-style: normal;
  font-weight: 900;
  text-align: right;
}

.bench-column {
  min-width: 0;
}

.lab-budget-panel {
  display: grid;
  gap: .75rem;
  margin-bottom: 1rem;
}

.candidate-bench {
  display: grid;
  gap: .45rem;
}

.candidate-row {
  min-height: 4.25rem;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 4.5rem 3.5rem;
  gap: .65rem;
  align-items: center;
  border: 1px solid var(--lab-line);
  border-radius: .5rem;
  padding: .6rem;
  color: var(--lab-ink);
  background: white;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.candidate-row:hover {
  transform: translateY(-1px);
  border-color: rgba(15,139,111,.45);
}

.candidate-row.is-active {
  border-color: var(--lab-ink);
}

.candidate-row.is-selected {
  border-color: var(--lab-green);
  background: #edf8f4;
}

.candidate-row.is-advised {
  box-shadow: inset 0 0 0 2px rgba(20,109,181,.18);
}

.candidate-row.is-truth {
  border-color: rgba(20,109,181,.45);
  background: #edf6fc;
}

.candidate-row.is-decoy {
  border-color: rgba(185,71,71,.35);
  background: #fff4f1;
}

.candidate-row.is-full:not(.is-selected) {
  color: #7b8782;
  background: #f1f4f2;
}

.candidate-id {
  width: 2.35rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: #45564f;
  font-size: .78rem;
  font-weight: 900;
}

.candidate-row.is-selected .candidate-id {
  background: var(--lab-green);
}

.candidate-main {
  min-width: 0;
  display: grid;
  gap: .15rem;
}

.candidate-main strong {
  line-height: 1.25;
}

.candidate-signal {
  justify-self: end;
  border-radius: 999px;
  padding: .3rem .5rem;
  color: #314740;
  background: #edf2ef;
  font-size: .78rem;
  font-weight: 900;
  white-space: nowrap;
}

.candidate-row > b {
  justify-self: end;
  color: var(--lab-green);
  font-size: .84rem;
}

.lab-wide-action {
  width: 100%;
  margin-top: 1rem;
}

.lab-lock {
  padding: 1rem;
}

.model-dashboard {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}

.model-tabs-lab {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  margin: 0;
}

.model-tabs-lab button {
  display: grid;
  gap: .25rem;
  min-height: 4.25rem;
  border-radius: .5rem;
  padding: .65rem;
  text-align: left;
}

.model-tabs-lab button span {
  color: var(--lab-muted);
  font-size: .78rem;
  font-weight: 800;
  white-space: normal;
}

.model-decision-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, .9fr);
  gap: 1rem;
  padding: 1rem;
  max-width: 100%;
}

.model-decision-card h3 {
  margin-bottom: .45rem;
  font-size: 1.25rem;
}

.model-decision-card p,
.model-review-note {
  margin-bottom: 0;
  color: var(--lab-muted);
  line-height: 1.6;
}

.model-decision-card .console-actions {
  grid-column: auto;
  align-self: end;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.model-review-panel {
  display: grid;
  gap: .85rem;
}

.model-review-panel h3 {
  margin-bottom: .45rem;
  font-size: 1.25rem;
}

.model-review-panel p {
  margin-bottom: 0;
  color: var(--lab-muted);
  line-height: 1.6;
}

.model-compare-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}

.model-compare-card {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: .35rem;
  border: 1px solid var(--lab-line);
  border-radius: .5rem;
  padding: .7rem;
  background: #f8faf8;
  color: var(--lab-muted);
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.model-compare-card:hover,
.model-compare-card:focus-visible {
  border-color: rgba(13, 111, 94, .55);
}

.model-compare-card.is-selected {
  border-color: var(--lab-green);
  background: #e8f6f1;
  box-shadow: inset 0 0 0 1px rgba(13, 111, 94, .18);
}

.model-compare-card strong {
  color: var(--lab-ink);
  line-height: 1.25;
}

.model-compare-card .eyebrow {
  margin-bottom: 0;
  color: var(--lab-green);
}

.model-compare-values {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .4rem;
  align-items: baseline;
  color: var(--lab-muted);
  font-size: .78rem;
}

.model-compare-values b {
  color: var(--lab-ink);
  font-size: 1.05rem;
}

.threshold-console {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, .8fr);
  gap: 1rem;
  padding: 1rem;
  max-width: 100%;
}

.threshold-console h3 {
  margin-bottom: .45rem;
  font-size: 1.25rem;
}

.threshold-console p {
  margin-bottom: 0;
  color: var(--lab-muted);
  line-height: 1.6;
}

.threshold-control {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: .55rem;
  color: var(--lab-ink);
  font-weight: 900;
}

.threshold-control input {
  min-width: 0;
  width: 100%;
  accent-color: var(--lab-green);
}

.model-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}

.model-metrics span {
  min-height: 4rem;
  min-width: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--lab-line);
  border-radius: .5rem;
  padding: .55rem;
  color: var(--lab-muted);
  background: #f8faf8;
  font-size: .78rem;
  font-weight: 900;
  text-align: center;
}

.model-metrics b {
  display: block;
  color: var(--lab-ink);
  font-size: 1.35rem;
  line-height: 1;
}

.d3-threshold-chart {
  grid-column: 1 / -1;
  width: 100%;
  height: 5.25rem;
  min-width: 0;
  overflow: visible;
}

.d3-threshold-chart text {
  fill: var(--lab-muted);
  font-size: .72rem;
  font-weight: 900;
}

.d3-threshold-chart [data-d3-mark="threshold-track"] {
  fill: #dce6e1;
}

.d3-threshold-chart [data-d3-mark="threshold-bar"] {
  fill: var(--lab-blue);
}

.d3-threshold-chart [data-metric="selected"][data-d3-mark="threshold-bar"] {
  fill: var(--lab-green);
}

.model-review-panel .model-metrics {
  grid-column: 1 / -1;
}

.model-review-detail {
  background: #fff;
}

.model-review-note {
  grid-column: 1 / -1;
}

.console-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  min-width: 0;
}

.validation-console,
.result-stack {
  display: grid;
  gap: 1rem;
}

.plate-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 100%;
}

.plate-block {
  min-width: 0;
  padding: 1rem;
}

.plate-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(2.25rem, 1fr));
  gap: .5rem;
  max-width: 100%;
}

.d3-validation-strip {
  display: grid;
  grid-template-columns: repeat(10, minmax(.9rem, 1fr));
  gap: .25rem;
  margin-top: .75rem;
}

.d3-validation-mark {
  min-width: 0;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid #c9d6d0;
  border-radius: 999px;
  color: #65736d;
  background: #eef3f0;
  font-size: .62rem;
  font-weight: 1000;
  line-height: 1;
}

.d3-validation-mark.state-loaded {
  border-color: var(--lab-green);
  color: white;
  background: var(--lab-green);
}

.d3-validation-mark.state-hit {
  border-color: var(--lab-blue);
  color: white;
  background: var(--lab-blue);
}

.d3-validation-mark.state-false {
  border-color: var(--lab-red);
  border-radius: .18rem;
  color: white;
  background: var(--lab-red);
}

.d3-validation-mark.state-missed {
  border-color: #b97a20;
  border-radius: .12rem .7rem .7rem;
  color: #4c3517;
  background: var(--lab-amber);
}

.well {
  min-width: 0;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid #cbd7d2;
  border-radius: 50%;
  color: #738079;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(226,233,229,.9) 55%, rgba(197,210,204,.95));
  font-size: .78rem;
  font-weight: 900;
}

.well.is-loaded {
  border-color: var(--lab-green);
  color: white;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), rgba(15,139,111,.88) 58%, rgba(6,86,70,.95));
}

.well.is-hit {
  border-color: var(--lab-blue);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), rgba(20,109,181,.9) 58%, rgba(15,71,116,.98));
}

.well.is-false {
  border-color: var(--lab-red);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), rgba(185,71,71,.88) 58%, rgba(120,46,46,.96));
}

.well.is-missed {
  border-color: var(--lab-amber);
  color: #6b4b23;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.8), rgba(232,177,91,.72) 58%, rgba(196,132,39,.82));
}

.debrief-grid {
  grid-template-columns: minmax(0, 1fr) minmax(18rem, .8fr);
}

.lab-reflection,
.final-readout {
  margin-top: 0;
  padding: 1rem;
  border-top: 0;
}

.lab-reflection h3 {
  margin-bottom: .75rem;
}

.lab-reflection p {
  border-bottom: 1px solid var(--lab-line);
  padding-bottom: .7rem;
}

.final-readout {
  display: grid;
  gap: 1rem;
}

.lab-dock {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: .75rem;
  width: min(760px, calc(100vw - 1rem));
  max-width: calc(100vw - 1rem);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: center;
  border: 1px solid rgba(23,35,31,.18);
  border-radius: .5rem;
  padding: .55rem;
  background: rgba(251,252,251,.94);
  box-shadow: 0 18px 60px rgba(23,35,31,.22);
  backdrop-filter: blur(14px);
  overflow: hidden;
}

.dock-button {
  min-width: 0;
  min-height: 2.9rem;
  border: 1px solid var(--lab-line);
  border-radius: .45rem;
  padding: .55rem .8rem;
  color: var(--lab-ink);
  background: white;
  font-weight: 900;
  cursor: pointer;
  line-height: 1.15;
  white-space: normal;
}

.dock-button.is-primary {
  border-color: var(--lab-ink);
  color: white;
  background: var(--lab-ink);
}

.dock-button:disabled {
  color: #8a9691;
  background: #e8eeeb;
  cursor: not-allowed;
}

.dock-status {
  min-width: 0;
  display: grid;
  gap: .1rem;
}

.dock-status strong {
  line-height: 1.2;
  min-width: 0;
}

.dock-status span {
  color: var(--lab-muted);
  font-size: .78rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 820px) {
  .lab-student-body .student-shell {
    padding: .65rem .65rem 7rem;
  }

  .lab-header,
  .brief-grid,
  .workspace-grid,
  .debrief-grid,
  .model-decision-card,
  .model-compare-grid,
  .threshold-console,
  .plate-compare {
    grid-template-columns: 1fr;
  }

  .lab-header {
    align-items: start;
  }

  .lab-titleblock h1 {
    font-size: 2.35rem;
  }

  .lab-scene {
    min-height: auto;
    padding: .85rem;
  }

  .lab-scene-heading h2 {
    font-size: 1.55rem;
  }

  .evidence-panel {
    position: static;
  }

  .evidence-panel.is-mobile-sheet-source {
    display: none;
  }

  .mobile-region-sheet {
    position: fixed;
    z-index: 19;
    inset: 0;
    display: block;
    pointer-events: none;
  }

  .mobile-sheet-scrim {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(23,35,31,.26);
    font-size: 0;
    cursor: pointer;
    pointer-events: auto;
  }

  .mobile-sheet-card {
    position: absolute;
    left: .65rem;
    right: .65rem;
    bottom: 5.35rem;
    max-height: min(66svh, 34rem);
    display: grid;
    gap: .65rem;
    border: 1px solid rgba(23,35,31,.2);
    border-radius: .65rem;
    padding: .7rem;
    background: rgba(251,252,251,.98);
    box-shadow: 0 24px 80px rgba(23,35,31,.25);
    overflow: auto;
    overscroll-behavior: contain;
    pointer-events: auto;
  }

  .mobile-sheet-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    color: var(--lab-muted);
    font-size: .78rem;
    font-weight: 900;
  }

  .mobile-sheet-close {
    min-height: 2.15rem;
    border: 1px solid var(--lab-line);
    border-radius: .45rem;
    padding: .35rem .7rem;
    color: var(--lab-ink);
    background: white;
    font-size: .82rem;
    font-weight: 900;
    cursor: pointer;
  }

  .evidence-panel.is-sheet-panel {
    padding: .85rem;
  }

  .model-tabs-lab,
  .console-actions {
    grid-template-columns: 1fr;
  }

  .model-decision-card .console-actions {
    grid-column: 1 / -1;
  }

  .candidate-row {
    grid-template-columns: 2.8rem minmax(0, 1fr) 3.8rem;
  }

  .candidate-row > b {
    grid-column: 2 / -1;
    justify-self: start;
    font-size: 0;
  }

  .candidate-row > b::after {
    content: "查看";
    font-size: .76rem;
  }

  .candidate-row.is-selected > b::after {
    content: "已選";
  }

  .candidate-row.is-full:not(.is-selected) > b::after {
    content: "滿額";
  }

  .hero-instrument .capsid-svg,
  .lab-capsid-map {
    min-height: 13rem;
    max-height: 16rem;
  }

  .turntable-stage {
    min-height: 13rem;
  }

  .capsid-turntable.lab-capsid-map {
    max-height: none;
  }

  .turntable-stage img {
    width: min(100%, 20rem);
  }

  .lab-dock {
    grid-template-columns: minmax(4.8rem, .75fr) minmax(0, 1fr) minmax(6.4rem, auto);
    gap: .4rem;
  }

  .dock-button {
    padding: .5rem .55rem;
    font-size: .88rem;
  }
}

@media (max-width: 430px) {
  .scene-rail {
    grid-auto-columns: minmax(6.9rem, 7.35rem);
    gap: .4rem;
  }

  .scene-step span {
    font-size: .76rem;
  }

  .lab-titleblock h1 {
    font-size: 2.05rem;
  }

  .evidence-title {
    display: grid;
  }

  .panel-action {
    width: 100%;
  }

  .evidence-tabs {
    grid-template-columns: repeat(auto-fit, minmax(3.9rem, 1fr));
    gap: .25rem;
  }

  .evidence-tabs button {
    min-height: 2.15rem;
    padding: .25rem;
    font-size: .76rem;
  }

  .candidate-row {
    min-height: 4.8rem;
    grid-template-columns: 2.55rem minmax(0, 1fr) 3.3rem;
    gap: .45rem;
    padding: .5rem;
  }

  .candidate-id {
    width: 2.1rem;
    font-size: .7rem;
  }

  .candidate-main strong {
    font-size: .92rem;
  }

  .candidate-main small,
  .candidate-signal,
  .candidate-row > b {
    font-size: .74rem;
  }

  .candidate-row > b {
    font-size: 0;
  }

  .candidate-row > b::after {
    font-size: .74rem;
  }

  .model-metrics {
    grid-template-columns: 1fr;
  }

  .d3-validation-strip {
    grid-template-columns: repeat(6, minmax(.9rem, 1fr));
  }

  .console-actions {
    grid-template-columns: 1fr;
  }

  .plate-grid {
    grid-template-columns: repeat(5, minmax(2rem, 1fr));
    gap: .35rem;
  }

  .well {
    font-size: .68rem;
  }

  .dock-status span {
    display: none;
  }

  .lab-dock {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.18fr);
    bottom: .5rem;
    padding: .45rem;
  }

  .mobile-sheet-card {
    left: .5rem;
    right: .5rem;
    bottom: 4.85rem;
    max-height: 67svh;
    padding: .6rem;
  }

  .dock-status {
    display: none;
  }

  .dock-button {
    width: 100%;
  }
}