:root {
  --ink: #f3ffff;
  --muted: #bdd7da;
  --green: #38d8da;
  --green-2: #77f5f0;
  --mint: rgba(80, 234, 224, .14);
  --mint-2: #071f25;
  --lime: #a8fff2;
  --coral: #ff9f83;
  --line: rgba(128, 245, 241, .4);
  --white: rgba(10, 53, 62, .76);
  color: var(--ink);
  background: #071f25;
}

body {
  color: var(--ink);
  background: #071f25 url("generated-assets/complex-background.webp") center / cover fixed no-repeat;
}

.brand-logo {
  position: fixed;
  z-index: 60;
  top: 6px;
  left: 14px;
  width: 156px;
  height: 46px;
  padding: 4px 9px;
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 10px;
  object-fit: contain;
  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 22px rgba(0,24,31,.18);
}

@media (min-width: 1051px) {
  .sequence-intro { margin-left: 174px; }
}

.lab-shell {
  position: relative;
  isolation: isolate;
  grid-template-columns: 250px minmax(0, 1fr);
  background: linear-gradient(115deg, rgba(2, 25, 31, .86), rgba(8, 55, 63, .42) 54%, rgba(5, 31, 38, .7));
}

.lab-shell::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(rgba(111, 246, 241, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 246, 241, .035) 1px, transparent 1px),
    radial-gradient(circle at 74% 15%, rgba(68, 234, 229, .18), transparent 29%);
  background-size: 54px 54px, 54px 54px, auto;
  pointer-events: none;
}

.sequencer {
  border-right: 1px solid rgba(107, 243, 239, .55);
  color: var(--ink);
  background: linear-gradient(180deg, rgba(4, 42, 49, .82), rgba(5, 31, 38, .66));
  box-shadow: inset -1px 0 rgba(207, 255, 252, .18), 18px 0 60px rgba(0, 18, 24, .28);
  backdrop-filter: blur(25px) saturate(145%);
  -webkit-backdrop-filter: blur(25px) saturate(145%);
}

.sequencer::before {
  background-image:
    linear-gradient(rgba(113, 245, 241, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(113, 245, 241, .07) 1px, transparent 1px);
}

.sequence-symbol,
.sequence-cell,
.sequence-readout {
  border-color: rgba(120, 245, 240, .42);
  color: #dffefd;
  background: rgba(18, 86, 95, .28);
  box-shadow: inset 0 0 22px rgba(49, 225, 221, .05);
}

.sequence-symbol {
  color: #83fffa;
  box-shadow: 0 0 18px rgba(65, 235, 231, .2), inset 0 0 14px rgba(65, 235, 231, .12);
}

.sequence-intro p,
.sequence-meta span,
.sequence-readout small {
  color: #a8cacc;
}

.helix::before,
.helix::after {
  border-color: #68efeb;
  filter: drop-shadow(0 0 8px rgba(79, 239, 235, .42));
}

.helix-rung span,
.helix-rung em,
.helix-rung b {
  background: #55d9d5;
}

.sequence-cell.is-active {
  border-color: #83fffa;
  color: #f6ffff;
  background: rgba(38, 174, 174, .28);
  box-shadow: 0 0 22px rgba(54, 231, 226, .16), inset 0 0 18px rgba(95, 255, 250, .09);
}

.sequence-readout code,
.sequence-cell code {
  color: #8afffa;
}

.game {
  padding: clamp(18px, 2.5vw, 38px);
  background: linear-gradient(135deg, rgba(0, 24, 31, .22), rgba(7, 53, 62, .08));
}

.screen {
  position: relative;
  width: min(1250px, 100%);
  padding: clamp(20px, 2.25vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(126, 249, 245, .54);
  border-radius: 24px;
  color: var(--ink);
  background: linear-gradient(135deg, rgba(7, 52, 61, .76), rgba(5, 35, 43, .56));
  box-shadow:
    0 24px 70px rgba(0, 16, 22, .34),
    0 0 28px rgba(45, 221, 218, .11),
    inset 0 1px rgba(229, 255, 254, .27),
    inset 0 0 42px rgba(73, 235, 231, .04);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  animation: none;
}

.screen::before,
.screen::after {
  content: "";
  position: absolute;
  z-index: 4;
  width: 72px;
  height: 25px;
  pointer-events: none;
}

.screen::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid #b4fffb;
  border-left: 2px solid #b4fffb;
  border-radius: 24px 0 0;
  filter: drop-shadow(0 0 7px #4ee9e4);
}

.screen::after {
  right: -1px;
  bottom: -1px;
  border-right: 2px solid #b4fffb;
  border-bottom: 2px solid #b4fffb;
  border-radius: 0 0 24px;
  filter: drop-shadow(0 0 7px #4ee9e4);
}

.language-switch {
  top: 12px;
  right: 14px;
  border-color: rgba(125, 246, 242, .48);
  background: rgba(6, 44, 52, .72);
  box-shadow: 0 8px 28px rgba(0, 20, 26, .32), inset 0 1px rgba(255, 255, 255, .12);
  backdrop-filter: blur(18px);
}

.language-switch button {
  color: #a9cdcf;
}

.language-switch button.is-active {
  color: #06292f;
  background: #8afffa;
  box-shadow: 0 0 16px rgba(82, 241, 237, .42);
}

.eyebrow {
  color: #7ff8f3;
}

h1,
h2,
h3,
.score,
.sequence-meta strong {
  color: #f5ffff;
  text-shadow: 0 0 20px rgba(100, 242, 239, .08);
}

.screen h1:focus,
.screen h2:focus {
  outline: none;
}

h1 em {
  color: #7ff8f3;
  text-shadow: 0 0 22px rgba(61, 232, 227, .28);
}

.lead,
.question-copy,
.fact-card p,
.result-score-card p,
.takeaways p,
.game-rule p {
  color: #bfd8da;
}

.speaker p,
.quiz-guide p,
.fact-card,
.game-rule,
.answer,
.feedback,
.cross-card,
.result-score-card,
.takeaways p {
  border-color: rgba(128, 242, 238, .34);
  color: #eaffff;
  background: linear-gradient(135deg, rgba(24, 91, 101, .56), rgba(11, 58, 68, .44));
  box-shadow: inset 0 1px rgba(230, 255, 254, .12), 0 12px 30px rgba(0, 19, 25, .17);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.speaker p::after,
.quiz-guide p::before {
  border-color: rgba(128, 242, 238, .34);
  background: #155865;
}

.region-list b,
.breed-labels b,
.formula span,
.result-fragments span,
.cross-card span {
  border-color: rgba(122, 239, 235, .36);
  color: #cffffc;
  background: rgba(29, 119, 125, .36);
}

.lab-art {
  border-color: rgba(130, 250, 246, .62);
  background: rgba(6, 48, 57, .7);
  box-shadow: 0 18px 44px rgba(0, 17, 23, .34), 0 0 26px rgba(57, 230, 225, .13), inset 0 1px rgba(255,255,255,.22);
}

.lab-art img,
.speaker img,
.quiz-guide img {
  animation: none !important;
  transition: none !important;
}

.lab-art.is-loading img {
  opacity: 1;
}

.scan-grid {
  opacity: .54;
  background-image:
    linear-gradient(rgba(109, 244, 240, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109, 244, 240, .12) 1px, transparent 1px);
}

.art-status,
.score {
  border-color: rgba(128, 247, 243, .48);
  color: #9ffffa;
  background: rgba(4, 42, 50, .78);
  box-shadow: 0 0 18px rgba(63, 233, 228, .14);
}

.answer::after {
  border-color: rgba(141, 241, 238, .38);
  color: #a8d8d8;
}

.answer:hover:not(:disabled) {
  border-color: #91fffb;
  background: rgba(31, 121, 129, .55);
  box-shadow: 0 0 18px rgba(69, 235, 230, .13), inset 0 1px rgba(255,255,255,.15);
}

.answer.is-correct {
  border-color: #8bffcd;
  color: #effff8;
  background: rgba(32, 135, 104, .68);
}

.answer.is-wrong {
  border-color: #ff9f83;
  color: #fff2ed;
  background: rgba(137, 60, 48, .62);
}

.choice-warning {
  border-color: #ff9f83;
  color: #ffe6de;
  background: rgba(116, 48, 40, .64);
}

.primary {
  border: 1px solid rgba(145, 255, 251, .72);
  color: #062d34;
  background: linear-gradient(135deg, #9afff9, #47d9dc);
  box-shadow: 0 12px 30px rgba(0, 20, 26, .3), 0 0 22px rgba(54, 230, 226, .22), inset 0 1px rgba(255,255,255,.7);
}

.primary:hover {
  color: #031f25;
  background: linear-gradient(135deg, #c6fffc, #69efec);
}

.primary span {
  color: #07535a;
}

.result-score-card,
.feedback,
.game-rule {
  border-left-color: #86ffed;
}

.formula strong {
  color: #052e34;
  background: #87f9f4;
}

/* Instrument status bar: the latest client reference uses a slim HUD,
   not a persistent navigation sidebar. */
.lab-shell {
  grid-template-columns: 1fr;
  grid-template-rows: 58px minmax(0, 1fr);
}

.sequencer {
  z-index: 30;
  grid-row: 1;
  width: 100%;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 22px;
  overflow: visible;
  border-right: 0;
  border-bottom: 1px solid rgba(107, 243, 239, .4);
  background: linear-gradient(90deg, rgba(3, 31, 38, .86), rgba(5, 53, 61, .58), rgba(3, 31, 38, .82));
  box-shadow: 0 12px 36px rgba(0, 15, 21, .22), inset 0 -1px rgba(207, 255, 252, .11);
}

.sequencer::before {
  background-size: 54px 54px;
}

.sequence-intro {
  flex: 1 1 auto;
  align-items: center;
  gap: 9px;
}

.sequence-symbol {
  width: 32px;
  height: 32px;
  font-size: 15px;
}

.sequence-intro strong {
  margin: 0;
  color: #8afffa;
  font-size: 14px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.sequence-intro p,
.helix,
.sequence-readout,
.sequence-cell b,
.sequence-cell code {
  display: none;
}

.sequence-meta {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-align: right;
}

.sequence-meta strong {
  font-size: 17px;
}

.sequence-meta span {
  font-size: 9px;
  letter-spacing: .04em;
}

.sequence-cells {
  flex: 0 0 auto;
  width: 176px;
  display: grid;
  grid-template-columns: repeat(6, 18px);
  justify-content: end;
  gap: 10px;
  margin: 0;
}

.sequence-cell {
  width: 18px;
  min-height: 18px;
  padding: 0;
  border-radius: 50%;
  background: rgba(18, 86, 95, .42);
}

.sequence-cell.is-active {
  background: #8afffa;
  box-shadow: 0 0 15px rgba(92, 255, 250, .72), inset 0 0 0 4px rgba(6, 46, 54, .34);
}

.sequence-cell.is-wrong {
  border-color: #ff9f83;
  background: #ff9f83;
  box-shadow: 0 0 13px rgba(255, 126, 96, .55);
}

.game {
  grid-row: 2;
  height: 100%;
  padding: 10px 18px;
}

@media (min-width: 1051px) and (max-height: 800px) {
  .game { padding: 8px 16px; }
  .screen { padding: 13px 18px; border-radius: 18px; }
}

/* Scenario order from the brief: a clean poster first, all context from frame two. */
body[data-active-screen="start"] .sequencer,
body[data-active-screen="start"] .language-switch {
  display: none;
}

body[data-active-screen="start"] .game {
  padding: 0;
}

.screen[data-screen="start"] {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(0, 36, 45, .12), transparent 48%, rgba(0, 35, 43, .06)),
    url("generated-assets/complex-aerial.webp") center / cover no-repeat;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.screen[data-screen="start"]::before,
.screen[data-screen="start"]::after {
  display: none;
}

.screen[data-screen="start"] .opening-dialogue,
.screen[data-screen="start"] .game-rule,
.screen[data-screen="start"] .eyebrow,
.screen[data-screen="start"] > .lab-art {
  display: none;
}

.screen[data-screen="start"] .start-copy {
  position: absolute;
  z-index: 4;
  top: 23dvh;
  left: clamp(44px, 18vw, 350px);
  width: min(520px, 42vw);
  padding: clamp(18px, 2vw, 30px);
  border-left: 2px solid rgba(141, 255, 252, .82);
  background: linear-gradient(100deg, rgba(1, 54, 65, .74), rgba(2, 57, 68, .34) 72%, transparent);
  box-shadow: inset 0 1px rgba(255,255,255,.15), 0 18px 60px rgba(0,24,31,.14);
  backdrop-filter: blur(8px) saturate(155%);
  -webkit-backdrop-filter: blur(8px) saturate(155%);
}

.screen[data-screen="start"] h1 {
  max-width: 9ch;
  margin-bottom: 16px;
  font-size: clamp(48px, 5.1vw, 84px);
  line-height: .9;
}

.screen[data-screen="start"] .lead {
  max-width: 470px;
  margin-bottom: 0;
}

.screen[data-screen="start"] .primary {
  margin-top: 28px;
}

/* The background genome becomes more vivid as its six rungs are unlocked. */
@media (min-width: 1051px) {
  body:not([data-active-screen="start"]) .sequencer .helix {
    position: fixed;
    z-index: 1;
    top: 16dvh;
    left: 4vw;
    width: 144px;
    height: 275px;
    display: block;
    margin: 0;
    opacity: .18;
    transform: scale(1.75);
    transform-origin: top left;
    filter: blur(.1px) drop-shadow(0 0 12px rgba(79,239,235,.18));
    pointer-events: none;
  }

  body:not([data-active-screen="start"]) .sequencer:has(.sequence-cell.is-active) .helix {
    opacity: .28;
  }

  body:not([data-active-screen="start"]) .sequencer:has(.sequence-cell:nth-child(4).is-active) .helix {
    opacity: .40;
    filter: drop-shadow(0 0 20px rgba(79,239,235,.34));
  }

  body:not([data-active-screen="start"]) .sequencer:has(.sequence-cell:nth-child(6).is-active) .helix {
    opacity: .58;
    filter: drop-shadow(0 0 28px rgba(104,255,248,.52));
  }

  body[data-active-screen="result"] .sequencer .helix {
    display: none;
  }
}

@media (max-width: 1050px) {
  .screen[data-screen="start"] {
    height: 100dvh;
    min-height: 620px;
    background-position: 54% center;
  }

  .screen[data-screen="start"] .start-copy {
    top: 18dvh;
    left: 7vw;
    width: min(520px, 62vw);
  }
}

@media (max-width: 650px) {
  .screen[data-screen="start"] {
    min-height: 100dvh;
    background-position: 58% center;
  }

  .screen[data-screen="start"] .start-copy {
    top: 16dvh;
    left: 18px;
    width: calc(100vw - 36px);
    padding: 18px;
  }

  .screen[data-screen="start"] h1 {
    font-size: clamp(44px, 15vw, 62px);
  }
}

/* Keep the full answer state and its primary action inside short displays. */
@media (min-width: 651px) {
  .screen[data-screen="quiz"] .question-column {
    transform: scale(var(--quiz-fit, 1));
    transform-origin: left top;
  }

  .screen[data-screen="quiz"].quiz-is-fitted .question-next {
    position: relative;
    z-index: 12;
    box-shadow: 0 10px 26px rgba(36,114,95,.24), 0 0 0 4px rgba(244,250,244,.72);
  }
}

@media (min-width: 651px) and (max-height: 950px) {
  .screen[data-screen="quiz"] .quiz-guide img { width: 42px; height: 52px; }
  .screen[data-screen="quiz"] .quiz-guide p { padding: 7px 10px; font-size: 10px; }
  .screen[data-screen="quiz"] .question-column h2 { margin: 6px 0; font-size: clamp(24px,2.25vw,34px); }
  .screen[data-screen="quiz"] .question-copy { margin-bottom: 5px; font-size: 12px; line-height: 1.28; }
  .screen[data-screen="quiz"] .answers { gap: 5px; margin-top: 8px; }
  .screen[data-screen="quiz"] .answer { min-height: 44px; padding: 8px 40px 8px 12px; font-size: 12px; }
  .screen[data-screen="quiz"] .feedback,
  .screen[data-screen="quiz"] .cross-card { margin-top: 6px; padding: 8px 10px; }
  .screen[data-screen="quiz"] .feedback strong { font-size: 13px; }
  .screen[data-screen="quiz"] .feedback p { margin-top: 3px; font-size: 10px; line-height: 1.25; }
  .screen[data-screen="quiz"] .cross-card { gap: 4px; }
  .screen[data-screen="quiz"] .cross-card span { padding: 4px 6px; font-size: 9px; }
  .screen[data-screen="quiz"] .question-next { min-height: 42px; margin-top: 6px; }
}

@media (min-width: 651px) and (max-height: 680px) {
  .screen[data-screen="quiz"] .quiz-guide img { width: 30px; height: 37px; }
  .screen[data-screen="quiz"] .quiz-guide p { padding: 5px 8px; font-size: 8px; }
  .screen[data-screen="quiz"] .question-column h2 { margin: 3px 0; font-size: clamp(20px,2vw,27px); }
  .screen[data-screen="quiz"] .question-copy { margin-bottom: 3px; font-size: 9px; line-height: 1.18; }
  .screen[data-screen="quiz"] .answers { gap: 3px; margin-top: 4px; }
  .screen[data-screen="quiz"] .answer { min-height: 37px; padding: 5px 36px 5px 9px; font-size: 10px; line-height: 1.14; }
  .screen[data-screen="quiz"] .feedback,
  .screen[data-screen="quiz"] .cross-card { margin-top: 3px; padding: 5px 7px; }
  .screen[data-screen="quiz"] .feedback strong { font-size: 10px; }
  .screen[data-screen="quiz"] .feedback p { margin-top: 2px; font-size: 8px; line-height: 1.16; }
  .screen[data-screen="quiz"] .cross-card { gap: 2px; }
  .screen[data-screen="quiz"] .cross-card span { padding: 3px 4px; font-size: 7px; }
  .screen[data-screen="quiz"] .question-next { min-height: 38px; margin-top: 4px; }
}

/* Enlarged touch-first genome viewer. */
.genome-pod {
  cursor: zoom-in;
  touch-action: manipulation;
}

.genome-pod:focus-visible {
  outline: 3px solid rgba(67, 144, 116, .72);
  outline-offset: 4px;
}

.genome-viewer[hidden] { display: none; }

.genome-viewer {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2.4vw, 32px);
  opacity: 0;
  transition: opacity .18s ease;
}

.genome-viewer.is-open { opacity: 1; }

.genome-viewer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(226, 237, 226, .72);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
}

.genome-viewer__panel {
  position: relative;
  width: min(760px, 96vw);
  height: min(880px, 92dvh);
  min-height: 430px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: clamp(14px, 2vw, 24px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 32px;
  color: #1d4f40;
  background:
    linear-gradient(145deg, rgba(255,255,255,.90), rgba(232,244,234,.74)),
    rgba(248,252,247,.84);
  box-shadow: 0 28px 90px rgba(33,74,59,.22), inset 0 1px 0 #fff;
}

.genome-viewer__panel header {
  padding: 2px 52px 0 4px;
}

.genome-viewer__panel header span {
  display: block;
  margin-bottom: 5px;
  color: #5a806f;
  font: 800 11px/1.2 var(--brand-font);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.genome-viewer__panel h2 {
  margin: 0;
  font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.02;
}

.genome-viewer__close {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(74,133,110,.26);
  border-radius: 50%;
  color: #255e4d;
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 22px rgba(44,91,73,.12);
  font: 400 34px/1 var(--brand-font);
}

.genome-viewer__stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(81,151,124,.30);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.98), rgba(220,241,225,.72) 58%, rgba(183,220,204,.46)),
    linear-gradient(135deg, rgba(255,255,255,.75), rgba(200,229,214,.48));
  box-shadow: inset 0 0 40px rgba(74,145,117,.13), 0 14px 34px rgba(52,101,81,.10);
}

.genome-viewer__stage::before,
.genome-viewer__stage::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 7%;
  border: 1px solid rgba(81,151,124,.12);
  border-radius: 22px;
  pointer-events: none;
}

.genome-viewer__stage::after { inset: 14%; }

.genome-viewer__canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
}

.genome-viewer__canvas:active { cursor: grabbing; }

.genome-viewer__hint {
  margin: 0;
  color: #54786a;
  font-size: clamp(12px, 1.4vw, 15px);
  font-weight: 700;
  text-align: center;
}

body.genome-viewer-open { overflow: hidden; }

@media (max-width: 650px) {
  .genome-viewer { padding: 8px; }
  .genome-viewer__panel {
    width: 100%;
    height: min(96dvh, 820px);
    min-height: 360px;
    gap: 8px;
    padding: 12px;
    border-radius: 24px;
  }
  .genome-viewer__panel header { padding-right: 44px; }
  .genome-viewer__panel header span { font-size: 9px; }
  .genome-viewer__close {
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
  }
  .genome-viewer__stage { border-radius: 20px; }
}

@media (max-width: 1050px) {
  body { background-attachment: scroll; }
  .lab-shell {
    grid-template-columns: 1fr;
    grid-template-rows: 52px auto;
    background: linear-gradient(180deg, rgba(3, 31, 38, .78), rgba(6, 48, 56, .52));
  }
  .sequencer {
    position: sticky;
    height: 52px;
    display: flex;
    padding: 7px 12px;
    border-right: 0;
    border-bottom: 1px solid rgba(107, 243, 239, .55);
    background: rgba(4, 42, 49, .88);
  }
  .sequence-intro { display: flex; }
  .sequence-intro strong { font-size: 11px; }
  .sequence-symbol { display: grid; width: 28px; height: 28px; }
  .sequence-meta { display: none; }
  .sequence-cells { width: 142px; grid-template-columns: repeat(6, 16px); gap: 7px; }
  .sequence-cell { width: 16px; min-height: 16px; }
  .game { height: auto; padding: 58px 18px 30px; }
  .screen { padding: 22px; }
}

@media (max-width: 650px) {
  .game { padding: 60px 10px 18px; }
  .screen { padding: 16px 12px; border-radius: 17px; }
  .speaker p,
  .quiz-guide p { background: rgba(18, 76, 86, .82); }
}

/* Reference-aligned transparent HUD: the production complex is the scene,
   while the interface floats above it as separate liquid-glass layers. */
.lab-shell {
  background:
    radial-gradient(circle at 12% 18%, rgba(20, 204, 216, .13), transparent 31%),
    linear-gradient(112deg, rgba(0, 15, 22, .58), rgba(3, 27, 35, .16) 42%, rgba(0, 18, 25, .38));
}

.lab-shell::before {
  background:
    linear-gradient(rgba(120, 251, 248, .042) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 251, 248, .042) 1px, transparent 1px),
    radial-gradient(circle at 71% 23%, rgba(64, 244, 240, .13), transparent 24%);
  background-size: 52px 52px, 52px 52px, auto;
}

.screen {
  border-color: rgba(135, 255, 252, .76);
  background:
    linear-gradient(112deg, rgba(235,255,255,.075), transparent 20% 72%, rgba(76,246,241,.045)),
    rgba(3, 37, 47, .105);
  box-shadow:
    0 28px 80px rgba(0, 10, 17, .25),
    0 0 17px rgba(75, 246, 241, .22),
    inset 0 0 0 1px rgba(218,255,254,.10),
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 -1px 0 rgba(75,246,241,.26);
  backdrop-filter: blur(7px) saturate(150%) brightness(1.04);
  -webkit-backdrop-filter: blur(7px) saturate(150%) brightness(1.04);
}

.screen::before {
  background:
    linear-gradient(108deg, transparent 0 5%, rgba(255,255,255,.16) 7%, transparent 14%),
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 13% 84%, rgba(93,255,250,.06)),
    radial-gradient(ellipse at 68% -10%, rgba(218,255,254,.15), transparent 32%);
}

.screen::after {
  padding: 1.5px;
  background: conic-gradient(from 205deg, transparent 0 7%, #e0fffe 10%, #66faf5 12%, transparent 17% 40%, rgba(185,255,253,.90) 45%, transparent 51% 81%, #78fff9 86%, #e4fffe 88%, transparent 94%);
  filter: drop-shadow(0 0 6px rgba(90, 255, 249, .88));
}

.speaker p,
.quiz-guide p,
.fact-card,
.game-rule,
.answer,
.feedback,
.cross-card,
.result-score-card,
.takeaways p {
  border-color: rgba(134, 255, 251, .58);
  border-top-color: rgba(229, 255, 254, .72);
  background:
    radial-gradient(ellipse at 18% -30%, rgba(255,255,255,.20), transparent 47%),
    linear-gradient(115deg, rgba(112, 236, 236, .14), rgba(7, 61, 72, .23) 52%, rgba(62, 221, 221, .09));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 1px 0 0 rgba(183,255,253,.16),
    inset 0 -14px 28px rgba(0,31,40,.08),
    0 12px 30px rgba(0, 11, 18, .15),
    0 0 12px rgba(75,246,241,.13);
  backdrop-filter: blur(16px) saturate(175%) brightness(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(175%) brightness(1.08);
}

.answer {
  background:
    linear-gradient(105deg, rgba(182,255,253,.12), transparent 30%),
    rgba(10, 91, 104, .20);
  box-shadow: inset 0 1px rgba(255,255,255,.30), inset 0 -1px rgba(79,245,240,.18), 0 0 12px rgba(68,238,234,.10);
}

.answer:hover:not(:disabled) {
  border-color: #b9fffd;
  background:
    linear-gradient(105deg, rgba(220,255,254,.20), transparent 34%),
    rgba(18, 142, 153, .30);
  box-shadow: inset 0 1px rgba(255,255,255,.46), 0 0 22px rgba(76,247,242,.28);
}

.lab-art {
  border-color: rgba(123, 255, 251, .34);
  background: rgba(2, 34, 43, .04);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.lab-art img {
  opacity: .92;
  filter: saturate(.88) contrast(1.02) brightness(.90) hue-rotate(2deg);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 96%, transparent 100%);
}

.lab-art::before {
  background:
    linear-gradient(110deg, rgba(255,255,255,.18), transparent 10% 75%, rgba(116,255,251,.06)),
    repeating-linear-gradient(90deg, transparent 0 74px, rgba(116,255,251,.07) 75px, transparent 76px),
    radial-gradient(circle at 85% 10%, rgba(132,255,252,.17), transparent 20%);
}

.lab-art::after {
  border-color: rgba(139,255,252,.70);
  box-shadow: inset 0 0 24px rgba(61,236,231,.16), 0 0 22px rgba(61,236,231,.28);
}

.art-status,
.score,
.language-switch {
  border-color: rgba(157,255,252,.72);
  background:
    linear-gradient(115deg, rgba(187,255,253,.15), transparent 28%),
    rgba(3, 45, 56, .44);
  box-shadow: inset 0 1px rgba(255,255,255,.38), 0 0 18px rgba(70,244,239,.20);
  backdrop-filter: blur(18px) saturate(190%);
  -webkit-backdrop-filter: blur(18px) saturate(190%);
}

.primary {
  color: #eaffff;
  text-shadow: 0 1px 8px rgba(0,26,33,.38);
  background:
    linear-gradient(108deg, rgba(255,255,255,.34), transparent 20% 73%, rgba(255,255,255,.13)),
    linear-gradient(135deg, rgba(18,184,194,.78), rgba(0,79,96,.82));
  box-shadow: inset 0 1px rgba(255,255,255,.64), inset 0 -10px 20px rgba(0,31,42,.20), 0 14px 32px rgba(0, 13, 20, .30), 0 0 26px rgba(61,241,236,.36);
  backdrop-filter: blur(16px) saturate(190%);
  -webkit-backdrop-filter: blur(16px) saturate(190%);
}

.primary span { color: #dffffd; }

.sequence-cell.is-active {
  background: radial-gradient(circle at 35% 30%, #f1ffff 0 18%, #7cfff9 32% 58%, #0baeba 72%);
  box-shadow: 0 0 7px #e6fffe, 0 0 20px rgba(92,255,250,.92), inset 0 0 0 3px rgba(1,45,55,.30);
}

@media (max-width: 650px) {
  .screen {
    background:
      linear-gradient(112deg, rgba(235,255,255,.08), transparent 25% 72%, rgba(76,246,241,.05)),
      rgba(3, 37, 47, .20);
    backdrop-filter: blur(4px) saturate(145%);
    -webkit-backdrop-filter: blur(4px) saturate(145%);
  }
  .lab-art img {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 96%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 96%, transparent 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen,
  .lab-art img,
  .speaker img,
  .quiz-guide img { animation: none !important; transition: none !important; }
}

/* Liquid-glass research interface */
:root {
  --glass-fill: rgba(8, 61, 72, .36);
  --glass-deep: rgba(2, 29, 37, .66);
  --glass-line: rgba(134, 255, 251, .62);
  --glass-shine: rgba(231, 255, 255, .28);
  --glass-cyan: #63f8f4;
}

.lab-shell::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse at 48% 105%, rgba(116, 255, 249, .12), transparent 48%),
    linear-gradient(112deg, rgba(4, 35, 43, .62) 0 18%, transparent 42% 68%, rgba(3, 29, 36, .47));
  pointer-events: none;
}

.screen {
  isolation: isolate;
  border: 1px solid rgba(139, 255, 251, .68);
  border-radius: 18px 34px 22px 38px;
  background:
    radial-gradient(circle at 12% 0, rgba(210, 255, 254, .12), transparent 34%),
    radial-gradient(circle at 88% 100%, rgba(48, 225, 222, .13), transparent 38%),
    linear-gradient(118deg, rgba(18, 88, 99, .50), rgba(5, 44, 54, .30) 45%, rgba(11, 72, 83, .38));
  box-shadow:
    0 38px 90px rgba(0, 12, 18, .44),
    0 0 34px rgba(54, 239, 235, .15),
    inset 0 1px 0 rgba(246, 255, 255, .44),
    inset 1px 0 0 rgba(182, 255, 253, .20),
    inset 0 -22px 48px rgba(0, 20, 28, .16);
  backdrop-filter: blur(32px) saturate(185%) contrast(108%);
  -webkit-backdrop-filter: blur(32px) saturate(185%) contrast(108%);
}

.screen::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: inherit;
  background:
    linear-gradient(104deg, transparent 0 7%, rgba(255,255,255,.12) 9%, transparent 17%),
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 16% 78%, rgba(101,246,242,.08)),
    radial-gradient(ellipse at 72% -8%, rgba(210,255,254,.17), transparent 35%);
  filter: none;
  pointer-events: none;
}

.screen::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: -1px;
  width: auto;
  height: auto;
  border: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from 210deg, transparent 0 9%, #c5fffd 13%, transparent 18% 42%, rgba(102,249,245,.65) 48%, transparent 55% 83%, #a4fffc 88%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 5px rgba(94, 244, 240, .72));
  pointer-events: none;
}

.sequencer {
  border-bottom-color: rgba(138, 255, 252, .66);
  background:
    linear-gradient(105deg, rgba(255,255,255,.08), transparent 18%),
    linear-gradient(90deg, rgba(3, 35, 43, .82), rgba(12, 76, 86, .43), rgba(2, 31, 39, .78));
  box-shadow: 0 18px 52px rgba(0, 15, 21, .30), inset 0 1px rgba(225,255,254,.24), inset 0 -1px rgba(93,255,249,.2);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
}

.sequence-symbol,
.language-switch,
.sequence-cell {
  background: linear-gradient(145deg, rgba(75, 206, 207, .22), rgba(4, 46, 56, .54));
  box-shadow: inset 0 1px rgba(255,255,255,.28), inset 0 -8px 18px rgba(0,26,35,.18), 0 0 18px rgba(70,241,236,.12);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
}

.speaker p,
.quiz-guide p,
.fact-card,
.game-rule,
.answer,
.feedback,
.cross-card,
.result-score-card,
.takeaways p {
  border: 1px solid rgba(142, 255, 251, .43);
  border-top-color: rgba(228, 255, 254, .55);
  border-radius: 15px 22px 15px 22px;
  background:
    linear-gradient(112deg, rgba(255,255,255,.10), transparent 20% 68%, rgba(92,246,241,.06)),
    linear-gradient(135deg, rgba(30, 111, 121, .45), rgba(5, 49, 59, .36));
  box-shadow:
    inset 0 1px rgba(255,255,255,.22),
    inset 0 -12px 24px rgba(0,25,33,.12),
    0 16px 34px rgba(0, 14, 20, .20),
    0 0 16px rgba(73,236,231,.06);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}

.speaker p,
.quiz-guide p {
  border-radius: 19px;
  background:
    linear-gradient(120deg, rgba(255,255,255,.14), transparent 31%),
    rgba(12, 73, 84, .50);
}

.speaker p::after,
.quiz-guide p::before {
  border-color: rgba(161, 255, 252, .54);
  background: rgba(20, 88, 99, .86);
  box-shadow: -2px 2px 6px rgba(55,230,226,.10);
}

.lab-art {
  isolation: isolate;
  border: 1px solid rgba(154, 255, 252, .72);
  border-radius: 24px 14px 28px 16px;
  background:
    linear-gradient(125deg, rgba(255,255,255,.12), transparent 24%),
    rgba(3, 38, 47, .42);
  box-shadow:
    0 24px 58px rgba(0, 13, 20, .38),
    0 0 30px rgba(65, 239, 234, .16),
    inset 0 1px rgba(255,255,255,.36),
    inset 0 -28px 48px rgba(0,21,29,.16);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.lab-art::before,
.lab-art::after {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.lab-art::before {
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(105deg, rgba(255,255,255,.20), transparent 11% 72%, rgba(116,255,251,.07)),
    radial-gradient(circle at 85% 10%, rgba(132,255,252,.18), transparent 21%);
  mix-blend-mode: screen;
}

.lab-art::after {
  top: 18px;
  right: 18px;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(121,255,250,.42);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 27%, rgba(103,251,246,.28) 29% 31%, transparent 33%),
    conic-gradient(from 30deg, transparent 0 12%, rgba(112,255,250,.72) 13% 15%, transparent 16% 37%, rgba(112,255,250,.52) 38% 40%, transparent 41% 72%, rgba(112,255,250,.55) 73% 75%, transparent 76%);
  box-shadow: inset 0 0 22px rgba(61,236,231,.12), 0 0 18px rgba(61,236,231,.14);
}

.lab-art img {
  opacity: .94;
  filter: saturate(.82) contrast(1.04) brightness(.88) hue-rotate(2deg);
}

.scan-grid {
  z-index: 2;
  opacity: .64;
  background-image:
    linear-gradient(rgba(113, 255, 250, .11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(113, 255, 250, .11) 1px, transparent 1px),
    linear-gradient(90deg, transparent 49.7%, rgba(157,255,252,.3) 50%, transparent 50.3%);
  background-size: 38px 38px, 38px 38px, 100% 100%;
}

.art-status {
  z-index: 6;
  padding: 8px 13px;
  border: 1px solid rgba(151,255,252,.66);
  border-radius: 9px 14px 9px 14px;
  color: #cafffd;
  background: linear-gradient(120deg, rgba(41,151,158,.55), rgba(3,43,53,.76));
  box-shadow: inset 0 1px rgba(255,255,255,.28), 0 0 20px rgba(61,237,232,.19);
  backdrop-filter: blur(18px) saturate(190%);
  -webkit-backdrop-filter: blur(18px) saturate(190%);
}

.answer {
  overflow: hidden;
  min-height: 54px;
  border-radius: 10px 17px 10px 17px;
}

.answer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 38%;
  height: 1px;
  background: linear-gradient(90deg, #d7fffd, transparent);
  box-shadow: 0 0 8px #6cfff9;
}

.primary {
  position: relative;
  overflow: hidden;
  border-radius: 10px 18px 10px 18px;
  border-color: rgba(194,255,253,.82);
  background:
    linear-gradient(110deg, rgba(255,255,255,.60), transparent 18% 72%, rgba(255,255,255,.18)),
    linear-gradient(135deg, #72f8f3, #18aeb8);
  box-shadow: inset 0 1px rgba(255,255,255,.75), inset 0 -10px 20px rgba(0,69,78,.13), 0 14px 36px rgba(0, 18, 25, .38), 0 0 24px rgba(62,236,232,.28);
}

.primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 11%;
  width: 42%;
  height: 1px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 10px #fff;
}

.quiz-layout {
  position: relative;
}

.visual-column {
  position: relative;
  padding-top: 34px;
}

.visual-column::before {
  content: attr(data-label);
}

.screen[data-screen="quiz"] .visual-column::before {
  content: "СВК // GENOME // " attr(data-module);
  position: absolute;
  z-index: 7;
  top: 0;
  left: 4px;
  color: rgba(174,255,252,.82);
  font: 800 9px/1.2 var(--brand-font);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.screen[data-screen="quiz"] .visual-column::after {
  content: "● LIVE   37.2°   DNA/06";
  position: absolute;
  z-index: 7;
  top: 0;
  right: 5px;
  color: rgba(158,255,217,.82);
  font: 700 9px/1.2 var(--brand-font);
  letter-spacing: .08em;
}

.screen[data-module="heredity"] .lab-art::after { border-radius: 12px; transform: rotate(45deg); }
.screen[data-module="benefits"] .lab-art::after { border-radius: 50% 50% 45% 55%; box-shadow: inset 0 0 0 10px rgba(77,244,196,.06), 0 0 20px rgba(77,244,196,.18); }
.screen[data-module="breeds"] .lab-art::after { border-radius: 16px; background-size: 22px 22px; }
.screen[data-module="f1"] .lab-art::after { border-radius: 50%; border-style: dashed; }
.screen[data-module="line"] .lab-art::after { border-radius: 8px 28px; transform: rotate(-8deg); }
.screen[data-module="records"] .lab-art::after { border-radius: 8px; background: repeating-linear-gradient(90deg, rgba(111,255,250,.65) 0 2px, transparent 2px 7px); }

@media (min-width: 1051px) and (max-height: 800px) {
  .screen { border-radius: 16px 26px 18px 30px; }
  .visual-column { padding-top: 24px; }
  .lab-art::after { width: 58px; height: 58px; top: 12px; right: 12px; }
  .speaker p, .quiz-guide p, .fact-card, .game-rule, .answer, .feedback, .cross-card, .result-score-card, .takeaways p { backdrop-filter: blur(16px) saturate(175%); -webkit-backdrop-filter: blur(16px) saturate(175%); }
}

@media (max-width: 650px) {
  .screen { border-radius: 14px 24px 16px 26px; }
  .visual-column { padding-top: 28px; }
  .screen[data-screen="quiz"] .visual-column::after { display: none; }
  .lab-art::after { width: 52px; height: 52px; top: 12px; right: 12px; }
}

/* Final cascade: keep the real production complex visible through the glass. */
.lab-shell {
  background: radial-gradient(circle at 12% 18%, rgba(20,204,216,.13), transparent 31%), linear-gradient(112deg, rgba(0,15,22,.58), rgba(3,27,35,.16) 42%, rgba(0,18,25,.38));
}

.screen {
  border-color: rgba(135,255,252,.76);
  background: linear-gradient(112deg, rgba(235,255,255,.075), transparent 20% 72%, rgba(76,246,241,.045)), rgba(3,37,47,.105);
  box-shadow: 0 28px 80px rgba(0,10,17,.25), 0 0 17px rgba(75,246,241,.22), inset 0 0 0 1px rgba(218,255,254,.10), inset 0 1px 0 rgba(255,255,255,.52), inset 0 -1px 0 rgba(75,246,241,.26);
  backdrop-filter: blur(7px) saturate(150%) brightness(1.04);
  -webkit-backdrop-filter: blur(7px) saturate(150%) brightness(1.04);
}

.screen::before {
  background: linear-gradient(108deg, transparent 0 5%, rgba(255,255,255,.16) 7%, transparent 14%), linear-gradient(180deg, rgba(255,255,255,.10), transparent 13% 84%, rgba(93,255,250,.06)), radial-gradient(ellipse at 68% -10%, rgba(218,255,254,.15), transparent 32%);
}

.screen::after {
  padding: 1.5px;
  background: conic-gradient(from 205deg, transparent 0 7%, #e0fffe 10%, #66faf5 12%, transparent 17% 40%, rgba(185,255,253,.90) 45%, transparent 51% 81%, #78fff9 86%, #e4fffe 88%, transparent 94%);
  filter: drop-shadow(0 0 6px rgba(90,255,249,.88));
}

.speaker p,
.quiz-guide p,
.fact-card,
.game-rule,
.answer,
.feedback,
.cross-card,
.result-score-card,
.takeaways p {
  border-color: rgba(134,255,251,.58);
  border-top-color: rgba(229,255,254,.72);
  background: radial-gradient(ellipse at 18% -30%, rgba(255,255,255,.20), transparent 47%), linear-gradient(115deg, rgba(112,236,236,.14), rgba(7,61,72,.23) 52%, rgba(62,221,221,.09));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 1px 0 0 rgba(183,255,253,.16), inset 0 -14px 28px rgba(0,31,40,.08), 0 12px 30px rgba(0,11,18,.15), 0 0 12px rgba(75,246,241,.13);
  backdrop-filter: blur(16px) saturate(175%) brightness(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(175%) brightness(1.08);
}

.answer {
  background: linear-gradient(105deg, rgba(182,255,253,.12), transparent 30%), rgba(10,91,104,.20);
  box-shadow: inset 0 1px rgba(255,255,255,.30), inset 0 -1px rgba(79,245,240,.18), 0 0 12px rgba(68,238,234,.10);
}

.lab-art {
  border: 1px solid rgba(128, 255, 251, .48);
  background: rgba(2,34,43,.22);
  box-shadow: inset 0 1px rgba(255,255,255,.24), 0 18px 44px rgba(0,17,23,.24), 0 0 24px rgba(57,230,225,.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.lab-art img {
  opacity: 1;
  filter: saturate(.9) contrast(1.05) brightness(.88);
  -webkit-mask-image: none;
  mask-image: none;
}

.art-status,
.score,
.language-switch {
  border-color: rgba(157,255,252,.72);
  background: linear-gradient(115deg, rgba(187,255,253,.15), transparent 28%), rgba(3,45,56,.44);
  box-shadow: inset 0 1px rgba(255,255,255,.38), 0 0 18px rgba(70,244,239,.20);
  backdrop-filter: blur(18px) saturate(190%);
  -webkit-backdrop-filter: blur(18px) saturate(190%);
}

.primary {
  color: #eaffff;
  text-shadow: 0 1px 8px rgba(0,26,33,.38);
  background: linear-gradient(108deg, rgba(255,255,255,.34), transparent 20% 73%, rgba(255,255,255,.13)), linear-gradient(135deg, rgba(18,184,194,.78), rgba(0,79,96,.82));
  box-shadow: inset 0 1px rgba(255,255,255,.64), inset 0 -10px 20px rgba(0,31,42,.20), 0 14px 32px rgba(0,13,20,.30), 0 0 26px rgba(61,241,236,.36);
  backdrop-filter: blur(16px) saturate(190%);
  -webkit-backdrop-filter: blur(16px) saturate(190%);
}

.primary span { color: #dffffd; }

@media (max-width: 650px) {
  .screen { background: linear-gradient(112deg, rgba(235,255,255,.08), transparent 25% 72%, rgba(76,246,241,.05)), rgba(3,37,47,.20); backdrop-filter: blur(4px) saturate(145%); -webkit-backdrop-filter: blur(4px) saturate(145%); }
  .lab-art img { -webkit-mask-image: none; mask-image: none; }
}

/* Full-screen production-complex scene. The changing UI is one large glass display
   floating above the same real facility background from the first frame onward. */
@media (min-width: 1051px) {
  html,
  body,
  .lab-shell {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  body,
  .lab-shell {
    background:
      linear-gradient(110deg, rgba(0, 25, 33, .42), rgba(4, 45, 53, .12) 48%, rgba(0, 24, 32, .34)),
      url("generated-assets/complex-background.webp") center / cover no-repeat fixed;
  }

  .lab-shell {
    display: block;
    position: relative;
  }

  .lab-shell::before {
    z-index: 0;
    background:
      linear-gradient(rgba(116, 255, 251, .035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(116, 255, 251, .035) 1px, transparent 1px),
      radial-gradient(circle at 74% 18%, rgba(68, 234, 229, .12), transparent 27%);
    background-size: 54px 54px, 54px 54px, auto;
  }

  .lab-shell::after {
    z-index: 0;
    background: linear-gradient(180deg, rgba(0, 24, 31, .15), transparent 18% 76%, rgba(0, 22, 29, .22));
  }

  .sequencer {
    position: fixed;
    z-index: 40;
    top: 0;
    right: 0;
    left: 0;
    width: 100vw;
    height: 58px;
    border-bottom: 1px solid rgba(119, 255, 251, .55);
    background: linear-gradient(90deg, rgba(2, 37, 45, .52), rgba(7, 69, 78, .20), rgba(2, 34, 42, .46));
    box-shadow: inset 0 1px rgba(255,255,255,.18), 0 10px 28px rgba(0,15,21,.13);
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
  }

  .game {
    position: relative;
    z-index: 2;
    width: 100vw;
    height: 100dvh;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
  }

  .language-switch {
    position: fixed;
    z-index: 50;
    top: 70px;
    right: 3vw;
  }

  .screen {
    width: 88vw;
    max-width: none;
    height: 78dvh;
    max-height: none;
    margin: 11dvh auto;
    padding: clamp(22px, 2.2vw, 42px);
    overflow: hidden;
    border-radius: 18px 32px 22px 36px;
    background:
      linear-gradient(112deg, rgba(235,255,255,.085), transparent 20% 72%, rgba(76,246,241,.05)),
      rgba(3, 37, 47, .12);
    backdrop-filter: blur(9px) saturate(155%) brightness(1.04);
    -webkit-backdrop-filter: blur(9px) saturate(155%) brightness(1.04);
  }

  .screen[data-screen="start"].is-active,
  .screen[data-screen="intro"].is-active,
  .screen[data-screen="quiz"].is-active,
  .screen[data-screen="result"].is-active {
    align-content: center;
  }

  .screen[data-screen="start"] {
    grid-template-columns: minmax(360px, .9fr) minmax(440px, 1.1fr);
  }

  .screen[data-screen="start"].is-active {
    display: grid;
  }

  .opening-dialogue {
    width: min(1050px, 92%);
  }

  .intro-layout,
  .quiz-layout,
  .result-layout {
    height: auto;
    align-items: center;
  }

  .quiz-layout {
    grid-template-columns: minmax(470px, 1.03fr) minmax(430px, .97fr);
  }

  .lab-art {
    max-height: 60dvh;
  }

  .lab-art img {
    object-fit: contain;
  }
}

@media (min-width: 1051px) and (max-height: 800px) {
  .screen {
    width: calc(100vw - 38px);
    height: calc(100dvh - 86px);
    margin: 70px auto 16px;
    padding: 14px 20px;
  }

  .language-switch {
    top: 64px;
    right: 24px;
  }
}

/* Viewport-locked responsive layouts: every game frame stays on one screen. */
@media (max-width: 1050px) {
  html, body, .lab-shell {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .lab-shell { grid-template-rows: 52px minmax(0, 1fr); }

  .brand-logo {
    top: 4px;
    left: 7px;
    width: 112px;
    height: 44px;
    padding: 4px 7px;
  }

  .sequencer .sequence-intro { display: none; }
  .sequencer { justify-content: flex-end; }

  .game {
    height: calc(100dvh - 52px);
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  .screen {
    width: calc(100vw - 24px);
    height: calc(100dvh - 64px);
    min-height: 0;
    margin: 6px auto;
    padding: 14px 16px;
    overflow: hidden;
  }

  .intro-layout, .quiz-layout, .result-layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
    gap: 16px;
    align-items: center;
  }

  .visual-column, .question-column { grid-row: auto; }

  body[data-active-screen="start"] .lab-shell {
    display: block;
    height: 100dvh;
  }

  body[data-active-screen="start"] .game {
    width: 100vw;
    height: 100dvh;
  }

  .screen[data-screen="start"] {
    width: 100vw;
    height: 100dvh;
    min-height: 0;
    margin: 0;
  }
}

@media (min-width: 651px) and (max-width: 1050px) {
  .screen[data-screen="quiz"] { padding: 12px 16px; }
  .screen[data-screen="quiz"] .question-head { margin-bottom: 4px; }
  .screen[data-screen="quiz"] .quiz-layout { gap: 14px; }
  .screen[data-screen="quiz"] .quiz-guide img { width: 38px; height: 48px; }
  .screen[data-screen="quiz"] .quiz-guide p { padding: 6px 10px; font-size: 9px; }
  .screen[data-screen="quiz"] .question-column h2 { margin: 5px 0; font-size: clamp(22px, 3vw, 30px); line-height: 1.02; }
  .screen[data-screen="quiz"] .question-copy { margin: 0 0 5px; font-size: 10px; line-height: 1.25; }
  .screen[data-screen="quiz"] .answers { gap: 5px; margin-top: 5px; }
  .screen[data-screen="quiz"] .answer { min-height: 45px; padding: 7px 38px 7px 11px; font-size: 11px; line-height: 1.2; }
  .screen[data-screen="quiz"] .feedback,
  .screen[data-screen="quiz"] .cross-card { margin-top: 5px; padding: 7px 9px; }
  .screen[data-screen="quiz"] .feedback strong { font-size: 11px; }
  .screen[data-screen="quiz"] .feedback p { font-size: 9px; line-height: 1.2; }
  .screen[data-screen="quiz"] .cross-card { gap: 3px; }
  .screen[data-screen="quiz"] .cross-card span { padding: 4px 5px; font-size: 8px; }
  .screen[data-screen="quiz"] .question-next { min-height: 44px; margin-top: 6px; }
}

@media (max-width: 650px) {
  .screen {
    width: calc(100vw - 10px);
    height: calc(100dvh - 58px);
    margin: 3px auto;
    padding: 9px 10px;
    border-radius: 13px 20px 15px 22px;
  }

  .language-switch { top: 7px; right: 8px; }

  .intro-layout, .quiz-layout, .result-layout {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .intro-dialogue {
    grid-template-columns: 1fr;
    gap: 3px;
    margin-bottom: 4px;
  }

  .intro-dialogue .speaker { min-width: 0; }

  .intro-dialogue .speaker img,
  .quiz-guide img,
  .final-dialogue .speaker img {
    width: 34px;
    height: 43px;
  }

  .intro-dialogue .speaker p,
  .quiz-guide p,
  .final-dialogue .speaker p {
    max-width: none;
    padding: 5px 7px;
    font-size: 7.5px;
    line-height: 1.2;
  }

  .intro-layout .lab-art,
  .quiz-layout .visual-column {
    position: fixed;
    right: 12px;
    bottom: 12px;
    width: calc(100% - 24px);
    height: min(29dvh, 230px);
    display: block;
    opacity: .92;
    pointer-events: none;
  }

  .result-layout .lab-art {
    position: fixed;
    right: 12px;
    bottom: 12px;
    width: calc(100% - 24px);
    height: min(29dvh, 230px);
    display: block;
    opacity: .92;
    pointer-events: none;
  }

  .quiz-layout .visual-column .lab-art {
    width: 100%;
    height: 100%;
    display: block;
  }

  .intro-copy { gap: 4px; }
  .fact-card { padding: 7px 9px; }
  .fact-card h2 { margin-bottom: 2px; font-size: 14px; }
  .fact-card p { font-size: 8.5px; line-height: 1.25; }

  .region-list, .breed-labels {
    gap: 3px;
    margin-top: 4px;
  }

  .region-list b, .breed-labels b {
    padding: 4px 5px;
    font-size: 7.5px;
  }

  .eyebrow { margin-bottom: 4px; font-size: 8px; }
  .question-head { margin-bottom: 3px; }

  .question-column h2 {
    margin: 5px 0;
    font-size: clamp(19px, 6vw, 24px);
    line-height: 1.02;
  }

  .question-copy {
    margin-bottom: 4px;
    font-size: 9px;
    line-height: 1.25;
  }

  .answers { gap: 4px; margin-top: 5px; }

  .answer {
    min-height: 42px;
    padding: 6px 34px 6px 10px;
    font-size: 10px;
    line-height: 1.18;
  }

  .answer::after { right: 8px; }

  .feedback, .cross-card {
    margin-top: 4px;
    padding: 6px 8px;
  }

  .feedback strong { font-size: 10px; }

  .feedback p, .choice-warning {
    font-size: 8.5px;
    line-height: 1.2;
  }

  .cross-card { gap: 3px; }
  .cross-card span { padding: 3px 4px; font-size: 7px; }

  .primary, .question-next {
    min-height: 40px;
    margin-top: 5px;
  }

  .result-copy h2 { margin: 4px 0; font-size: 25px; }
  .result-score-card, .takeaways p { padding: 6px 8px; }
  .result-score-card strong { margin: 2px 0; font-size: 18px; }

  .result-score-card p, .takeaways p {
    font-size: 8px;
    line-height: 1.2;
  }

  .takeaways, .formula, .result-fragments, .final-dialogue {
    gap: 3px;
    margin-top: 4px;
  }

  .formula span, .formula strong, .result-fragments span {
    padding: 4px;
    font-size: 7px;
  }

  .final-dialogue { grid-template-columns: 1fr 1fr; }
}

/* Real-complex light theme: authentic production photography replaces the
   former dark laboratory HUD while the genetic-code interaction stays intact. */
:root {
  --ink: #153f37;
  --muted: #58736c;
  --green: #287b66;
  --green-2: #45a187;
  --mint: rgba(219, 240, 230, .72);
  --mint-2: #eef6ef;
  --lime: #dff26a;
  --coral: #ed8e70;
  --line: rgba(96, 151, 132, .34);
  --white: rgba(252, 255, 252, .82);
  --glass-fill: rgba(244, 251, 246, .72);
  --glass-deep: rgba(229, 242, 233, .78);
  --glass-line: rgba(255, 255, 255, .9);
  --glass-shine: rgba(255, 255, 255, .72);
  --glass-cyan: #5caa91;
  color: var(--ink);
  background-color: #e7f1e9;
}

body,
.lab-shell {
  color: var(--ink);
  background: #e7f1e9;
}

body:not([data-active-screen="start"]),
body:not([data-active-screen="start"]) .lab-shell {
  background:
    linear-gradient(108deg, rgba(238, 247, 240, .34), rgba(247, 250, 244, .10) 48%, rgba(224, 239, 229, .30)),
    url("generated-assets/complex-background-hq.webp") center / cover no-repeat fixed;
}

.lab-shell {
  background-color: transparent;
}

.lab-shell::before {
  opacity: .34;
  background:
    linear-gradient(rgba(53, 121, 99, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 121, 99, .045) 1px, transparent 1px),
    radial-gradient(circle at 76% 17%, rgba(221, 242, 104, .24), transparent 27%);
  background-size: 54px 54px, 54px 54px, auto;
}

.lab-shell::after {
  background: linear-gradient(180deg, rgba(241, 249, 242, .25), transparent 20% 76%, rgba(224, 239, 228, .28));
}

.brand-logo {
  border-color: rgba(255,255,255,.94);
  background: rgba(255,255,255,.96);
  box-shadow: 0 9px 28px rgba(31, 79, 64, .14);
}

.sequencer {
  color: var(--ink);
  border-color: rgba(85, 145, 124, .34);
  background: linear-gradient(100deg, rgba(250,253,249,.88), rgba(228,242,232,.72), rgba(247,251,246,.82));
  box-shadow: inset 0 1px rgba(255,255,255,.94), 0 10px 30px rgba(29,79,63,.10);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}

.sequence-intro strong,
.sequence-meta strong,
.sequence-readout code,
.sequence-cell code { color: #245f50; }

.sequence-intro p,
.sequence-meta span,
.sequence-readout small { color: #678078; }

.sequence-symbol,
.sequence-cell,
.sequence-readout {
  color: #356e5e;
  border-color: rgba(82,145,124,.32);
  background: rgba(255,255,255,.58);
  box-shadow: inset 0 1px rgba(255,255,255,.8);
}

.helix::before,
.helix::after { border-color: #5ea98f; filter: none; }
.helix-rung span,
.helix-rung em,
.helix-rung b { background: #71b39c; }

.sequence-cell.is-active {
  color: #17483d;
  border-color: rgba(75,141,118,.58);
  background: radial-gradient(circle at 35% 30%, #ffffff 0 18%, #e6f58c 34% 62%, #76b79e 78%);
  box-shadow: 0 0 0 4px rgba(223,242,106,.18), 0 8px 22px rgba(47,103,83,.15);
}

.sequence-cell.is-wrong {
  border-color: #e49a82;
  background: #f1ad95;
  box-shadow: 0 8px 20px rgba(157,86,62,.15);
}

.game { background: transparent; }

.screen {
  color: var(--ink);
  border-color: rgba(255,255,255,.92);
  background:
    radial-gradient(ellipse at 12% -20%, rgba(255,255,255,.82), transparent 38%),
    linear-gradient(128deg, rgba(249,253,249,.82), rgba(229,241,232,.68));
  box-shadow: 0 28px 80px rgba(32,78,64,.17), inset 0 1px rgba(255,255,255,.96), inset 0 -1px rgba(89,145,125,.20);
  backdrop-filter: blur(18px) saturate(118%) brightness(1.04);
  -webkit-backdrop-filter: blur(18px) saturate(118%) brightness(1.04);
}

.screen::before {
  border-color: #ffffff;
  filter: drop-shadow(0 0 7px rgba(94,166,143,.26));
  background: linear-gradient(108deg, rgba(255,255,255,.58), transparent 16%), linear-gradient(180deg, rgba(255,255,255,.36), transparent 22% 82%, rgba(103,166,145,.08));
}

.screen::after {
  border-color: #83bba8;
  background: conic-gradient(from 205deg, transparent 0 7%, #ffffff 10%, #8fc6b2 12%, transparent 17% 42%, rgba(255,255,255,.9) 47%, transparent 53% 84%, #dff26a 88%, transparent 94%);
  filter: drop-shadow(0 0 5px rgba(76,137,116,.32));
}

.eyebrow { color: #317966; }
h1,
h2,
h3,
.score,
.sequence-meta strong { color: #173f36; text-shadow: none; }
h1 em { color: #318875; text-shadow: none; }

.lead,
.question-copy,
.fact-card p,
.result-score-card p,
.takeaways p,
.game-rule p { color: #4f6c64; }

.speaker p,
.quiz-guide p,
.fact-card,
.game-rule,
.answer,
.feedback,
.cross-card,
.result-score-card,
.takeaways p {
  color: #244e43;
  border-color: rgba(92,151,130,.34);
  border-top-color: rgba(255,255,255,.94);
  background: radial-gradient(ellipse at 16% -35%, rgba(255,255,255,.92), transparent 54%), linear-gradient(125deg, rgba(255,255,255,.78), rgba(230,241,233,.64));
  box-shadow: inset 0 1px rgba(255,255,255,.94), 0 10px 30px rgba(37,86,69,.10);
  backdrop-filter: blur(15px) saturate(120%);
  -webkit-backdrop-filter: blur(15px) saturate(120%);
}

.speaker p::before,
.quiz-guide p::before {
  border-color: rgba(92,151,130,.34);
  background: rgba(246,251,247,.9);
}

.answer:hover:not(:disabled),
.answer:focus-visible {
  color: #173f36;
  border-color: #63a88f;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(39,96,76,.13), inset 0 1px #fff;
}

.answer::after { color: #55766d; border-color: rgba(87,142,123,.36); }
.answer.is-correct { color: #164b3c; border-color: #5fa47c; background: rgba(222,244,225,.93); }
.answer.is-wrong { color: #773f31; border-color: #df8a70; background: rgba(252,231,223,.94); }

.region-list b,
.breed-labels b,
.formula span,
.result-fragments span,
.cross-card span {
  color: #2c6958;
  border-color: rgba(91,151,129,.30);
  background: rgba(231,243,234,.82);
}

.feedback { border-left-color: #91b84d; }
.choice-warning { color: #7b4737; background: rgba(255,239,231,.94); }

.language-switch,
.score,
.art-status {
  color: #2d6858;
  border-color: rgba(92,151,130,.42);
  background: rgba(251,254,251,.78);
  box-shadow: inset 0 1px rgba(255,255,255,.96), 0 9px 24px rgba(37,86,69,.11);
  backdrop-filter: blur(15px) saturate(125%);
  -webkit-backdrop-filter: blur(15px) saturate(125%);
}

.language-switch button { color: #58746c; }
.language-switch button.is-active {
  color: #fff;
  background: #317c68;
  box-shadow: 0 6px 16px rgba(44,113,91,.20);
}

.primary {
  color: #fff;
  text-shadow: none;
  border: 1px solid rgba(255,255,255,.78);
  background: linear-gradient(112deg, rgba(255,255,255,.22), transparent 25%), linear-gradient(135deg, #4a9a82, #236d5b);
  box-shadow: inset 0 1px rgba(255,255,255,.68), 0 13px 30px rgba(35,101,80,.24);
  backdrop-filter: blur(12px) saturate(125%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
}
.primary:hover { background: linear-gradient(135deg, #55a88e, #2b7965); }
.primary span { color: #efffa9; }

.lab-art {
  overflow: hidden;
  border-color: rgba(255,255,255,.90);
  background: #dfece3;
  box-shadow: inset 0 1px rgba(255,255,255,.94), 0 18px 44px rgba(33,79,64,.18);
}

.lab-art img {
  opacity: 1;
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(.92) contrast(1.025) brightness(1.07) sepia(.025);
  -webkit-mask-image: none;
  mask-image: none;
}

.screen[data-screen="intro"] .lab-art img,
.screen[data-screen="result"] .lab-art img { filter: none; }

.screen[data-module="heredity"] .lab-art img { object-position: 50% 44%; }
.screen[data-module="benefits"] .lab-art img { object-position: 50% 52%; filter: saturate(.84) contrast(1.025) brightness(1.08); }
.screen[data-module="breeds"] .lab-art img { object-position: 50% 54%; filter: saturate(.86) contrast(1.025) brightness(1.07); }
.screen[data-module="f1"] .lab-art img { object-position: 50% 58%; filter: saturate(.83) contrast(1.02) brightness(1.08); }
.screen[data-module="line"] .lab-art img { object-position: 50% 55%; filter: saturate(.84) contrast(1.025) brightness(1.08); }
.screen[data-module="records"] .lab-art img { object-position: 50% 43%; filter: saturate(.72) contrast(1.02) brightness(1.10) hue-rotate(-2deg); }

.scan-grid {
  opacity: .08;
  background-image:
    linear-gradient(rgba(44,116,94,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44,116,94,.12) 1px, transparent 1px),
    linear-gradient(90deg, transparent 49.7%, rgba(255,255,255,.42) 50%, transparent 50.3%);
}

.lab-art::before { opacity: .34; mix-blend-mode: soft-light; }
.lab-art::after { border-color: rgba(255,255,255,.72); box-shadow: inset 0 0 20px rgba(255,255,255,.20), 0 0 14px rgba(45,109,88,.16); }

.screen[data-screen="quiz"] .visual-column::before,
.screen[data-screen="quiz"] .visual-column::after { display: none; }

.screen[data-screen="start"] {
  background:
    linear-gradient(90deg, rgba(241,248,241,.20), transparent 52%, rgba(237,246,239,.12)),
    url("generated-assets/complex-aerial-hq.webp") center / cover no-repeat;
}

.screen[data-screen="start"] .start-copy {
  border: 1px solid rgba(255,255,255,.94);
  border-left: 3px solid rgba(72,147,123,.74);
  border-radius: 26px 34px 28px 38px;
  background: radial-gradient(ellipse at 15% -20%, rgba(255,255,255,.92), transparent 55%), linear-gradient(125deg, rgba(248,252,248,.90), rgba(225,239,229,.74));
  box-shadow: inset 0 1px rgba(255,255,255,.96), 0 20px 56px rgba(40,83,68,.19);
  backdrop-filter: blur(15px) saturate(120%);
  -webkit-backdrop-filter: blur(15px) saturate(120%);
}

.screen[data-screen="start"] h1 { color: #173f36; }
.screen[data-screen="start"] h1 em { color: #318875; }
.screen[data-screen="start"] .lead { color: #49685f; }

@media (max-width: 1050px) {
  body:not([data-active-screen="start"]),
  body:not([data-active-screen="start"]) .lab-shell {
    background:
      linear-gradient(108deg, rgba(238,247,240,.36), rgba(247,250,244,.12) 48%, rgba(224,239,229,.32)),
      url("generated-assets/complex-background-hq.webp") center / cover no-repeat;
  }

  .sequencer { background: rgba(247,251,247,.90); }
}

@media (max-width: 650px) {
  .screen[data-screen="start"] {
    background:
      linear-gradient(90deg, rgba(241,248,241,.20), transparent 52%, rgba(237,246,239,.12)),
      url("generated-assets/complex-aerial.webp") center / cover no-repeat;
  }

  body:not([data-active-screen="start"]),
  body:not([data-active-screen="start"]) .lab-shell {
    background:
      linear-gradient(108deg, rgba(238,247,240,.36), rgba(247,250,244,.12) 48%, rgba(224,239,229,.32)),
      url("generated-assets/complex-background.webp") center / cover no-repeat;
  }

  .screen {
    background: linear-gradient(135deg, rgba(250,253,250,.84), rgba(227,240,231,.72));
    backdrop-filter: blur(9px) saturate(116%);
    -webkit-backdrop-filter: blur(9px) saturate(116%);
  }

  .speaker p,
  .quiz-guide p { background: rgba(249,253,249,.84); }

  .lab-art img { object-fit: cover; }
}

/* Volumetric genome assembly: a dedicated right-hand instrument, never a text overlay. */
body:not([data-active-screen="start"]) .sequencer .helix {
  display: none !important;
}

.visual-column,
.result-visual-column {
  min-width: 0;
}

.screen[data-screen="quiz"] .visual-column,
.result-visual-column {
  display: grid;
  grid-template-rows: minmax(118px, .34fr) minmax(0, 1fr);
  gap: 12px;
  padding-top: 0;
}

.genome-display {
  position: relative;
  min-height: 118px;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(132px, .52fr) minmax(230px, 1fr);
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid rgba(255,255,255,.96);
  border-radius: 18px 28px 20px 30px;
  background:
    radial-gradient(circle at 78% 50%, rgba(127,236,209,.20), transparent 40%),
    linear-gradient(118deg, rgba(255,255,255,.84), rgba(220,239,229,.64));
  box-shadow:
    inset 0 1px rgba(255,255,255,1),
    inset 0 -1px rgba(69,145,120,.16),
    0 15px 38px rgba(31,82,65,.14);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.genome-display::before,
.genome-display::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.genome-display::before {
  inset: 7px;
  border: 1px solid rgba(84,165,139,.22);
  border-radius: 13px 22px 15px 24px;
}

.genome-display::after {
  top: -45%;
  left: 35%;
  width: 34%;
  height: 190%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.58), transparent);
  transform: rotate(18deg);
}

.genome-display__copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 7px;
  align-content: center;
}

.genome-display__copy span {
  color: #4d7469;
  font: 800 10px/1.25 var(--brand-font);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.genome-display__copy strong {
  color: #245f50;
  font: 900 clamp(23px,2vw,32px)/1 var(--brand-font);
  letter-spacing: -.03em;
}

.genome-pod {
  position: relative;
  height: 92px;
  overflow: hidden;
  border: 1px solid rgba(86,159,136,.30);
  border-radius: 46px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.64), rgba(194,226,212,.24) 56%, transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.44), rgba(125,186,163,.08));
  box-shadow: inset 0 10px 20px rgba(255,255,255,.52), inset 0 -10px 22px rgba(56,137,109,.10), 0 6px 18px rgba(41,104,83,.10);
  perspective: 720px;
}

.genome-pod::before,
.genome-pod::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 10px;
  bottom: 10px;
  width: 9px;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(81,139,121,.18), rgba(255,255,255,.96), rgba(53,126,103,.20));
  box-shadow: 0 0 13px rgba(72,165,137,.28);
}

.genome-pod::before { left: 7px; }
.genome-pod::after { right: 7px; }

.genome-model {
  position: absolute;
  inset: 8px 18px;
  visibility: hidden;
  transform-style: preserve-3d;
  transform: rotateY(-8deg) rotateZ(-2deg);
}

.genome-model::before,
.genome-model::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 18px;
  bottom: 18px;
  width: 100%;
  border: 4px solid rgba(73,145,122,.42);
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;
  filter: drop-shadow(0 5px 6px rgba(38,105,83,.15));
}

.genome-model::before { transform: translateY(-13px) rotate(-6deg) translateZ(-5px); }
.genome-model::after { transform: translateY(13px) rotate(6deg) translateZ(5px); }

.genome-rung {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: var(--x, 50%);
  width: clamp(30px,3.6vw,54px);
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: .48;
  transform-style: preserve-3d;
  transform: translate(-50%,-50%) rotateZ(var(--turn, 0deg)) rotateY(var(--yaw, 0deg)) translateZ(var(--depth, 0));
  transition: opacity .45s ease, filter .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}

.genome-rung span,
.genome-rung em {
  position: relative;
  z-index: 2;
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #fff, #a7c9bb 33%, #568b79 70%, #2e5e50);
  box-shadow: inset -3px -4px 7px rgba(26,78,60,.30), 0 4px 7px rgba(25,74,58,.24);
}

.genome-rung em { transform: translateZ(7px); }

.genome-rung b {
  position: absolute;
  z-index: 1;
  left: 12px;
  right: 12px;
  height: 6px;
  border: 1px solid rgba(255,255,255,.56);
  border-radius: 999px;
  background: linear-gradient(180deg, #b5d0c5, #527f70);
  box-shadow: inset 0 1px rgba(255,255,255,.70), 0 3px 5px rgba(30,82,64,.22);
  transform: translateZ(3px);
}

.genome-rung.is-active {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(96,190,156,.70));
  transform: translate(-50%,-50%) rotateZ(var(--turn, 0deg)) rotateY(var(--yaw, 0deg)) translateZ(13px) scale(1.08);
  animation: genome-unlock .72s cubic-bezier(.16,.8,.24,1) both;
  animation-delay: var(--unlock-delay, 0ms);
}

.genome-rung.is-active span {
  background: radial-gradient(circle at 30% 24%, #fff, #efff8d 29%, #9cbd39 68%, #52711c);
  box-shadow: inset -3px -4px 7px rgba(72,95,17,.28), 0 0 14px rgba(210,242,88,.78), 0 5px 8px rgba(42,82,57,.25);
}

.genome-rung.is-active em {
  background: radial-gradient(circle at 30% 24%, #fff, #ffb7a2 29%, #e17154 68%, #8e3624);
  box-shadow: inset -3px -4px 7px rgba(108,45,30,.26), 0 0 14px rgba(239,142,112,.66), 0 5px 8px rgba(42,82,57,.25);
}

.genome-rung.is-active b {
  background: linear-gradient(180deg, #f7ffcf, #c9dd63 45%, #e98b70 55%, #b85842);
  box-shadow: inset 0 1px rgba(255,255,255,.85), 0 0 12px rgba(191,222,87,.58);
}

@keyframes genome-unlock {
  0% { opacity: .25; filter: blur(4px) drop-shadow(0 0 0 transparent); }
  58% { transform: translate(-50%,-50%) rotateZ(var(--turn, 0deg)) rotateY(var(--yaw, 0deg)) translateZ(24px) scale(1.22); }
  100% { opacity: 1; filter: blur(0) drop-shadow(0 0 8px rgba(96,190,156,.70)); }
}

.genome-display--complete {
  background: radial-gradient(circle at 78% 50%, rgba(216,242,106,.27), transparent 42%), linear-gradient(118deg, rgba(255,255,255,.88), rgba(218,239,228,.68));
}

.genome-display--complete .genome-model::before,
.genome-display--complete .genome-model::after {
  border-color: rgba(66,152,123,.58);
  border-left-color: transparent;
  border-right-color: transparent;
  filter: drop-shadow(0 0 8px rgba(75,173,143,.42));
}

@media (min-width: 1051px) {
  .screen[data-screen="quiz"] .visual-column,
  .result-visual-column {
    height: min(64dvh, 690px);
  }

  .screen[data-screen="quiz"] .visual-column .lab-art,
  .result-visual-column .lab-art {
    width: 100%;
    height: 100%;
    min-height: 0;
  }
}

@media (min-width: 651px) and (max-width: 1050px) {
  .screen[data-screen="quiz"] .visual-column,
  .result-visual-column {
    grid-template-rows: 105px minmax(0,1fr);
    gap: 8px;
    height: min(67dvh, 550px);
  }

  .genome-display {
    min-height: 105px;
    grid-template-columns: 110px 1fr;
    padding: 10px 12px;
  }

  .genome-display__copy span { font-size: 8px; }
  .genome-display__copy strong { font-size: 23px; }
  .genome-pod { height: 78px; }
}

@media (max-width: 650px) {
  .screen[data-screen="quiz"] .visual-column,
  .result-visual-column {
    position: fixed;
    right: 12px;
    bottom: 12px;
    width: calc(100% - 24px);
    height: min(29dvh,230px);
    display: block;
    padding: 0;
    opacity: .96;
    pointer-events: none;
  }

  .screen[data-screen="quiz"] .visual-column .lab-art,
  .result-visual-column .lab-art,
  .result-layout .result-visual-column .lab-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .genome-display {
    position: absolute;
    z-index: 8;
    top: 8px;
    right: 8px;
    width: min(68%,250px);
    min-height: 70px;
    grid-template-columns: 78px 1fr;
    gap: 5px;
    padding: 7px 9px;
    border-radius: 12px 18px 13px 20px;
    background: linear-gradient(120deg, rgba(252,255,252,.93), rgba(223,241,231,.82));
  }

  .genome-display__copy { gap: 3px; }
  .genome-display__copy span { font-size: 6.5px; letter-spacing: .05em; }
  .genome-display__copy strong { font-size: 17px; }
  .genome-pod { height: 54px; }
  .genome-model { inset: 4px 13px; }
  .genome-rung { width: 24px; height: 11px; }
  .genome-rung span, .genome-rung em { flex-basis: 11px; width: 11px; height: 11px; }
  .genome-rung b { left: 8px; right: 8px; height: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .genome-rung.is-active { animation: none; }
}

/* Central genome composition requested by the client. */
.screen[data-screen="quiz"] .visual-column,
.result-visual-column {
  display: block;
  height: auto;
  padding: 0;
}

.screen[data-screen="quiz"] .visual-column .lab-art {
  width: 100%;
  height: 100%;
}

.genome-display--tower {
  min-width: 0;
  min-height: 0;
  height: min(64dvh, 660px);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0,1fr);
  gap: 7px;
  padding: 11px;
}

.genome-display--tower .genome-display__copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 5px;
}

.genome-display--tower .genome-display__copy span {
  max-width: 14ch;
  font-size: 8px;
}

.genome-display--tower .genome-display__copy strong {
  font-size: 20px;
}

.genome-display--tower .genome-pod,
.genome-display--hero .genome-pod {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 48% / 9%;
  background:
    linear-gradient(90deg, rgba(68,116,104,.16), rgba(255,255,255,.68) 12% 48%, rgba(215,238,228,.44) 70%, rgba(65,123,104,.18)),
    radial-gradient(ellipse at 50% 10%, rgba(255,255,255,.92), transparent 34%);
  box-shadow: inset 12px 0 20px rgba(63,126,105,.10), inset -12px 0 22px rgba(34,93,75,.12), inset 0 12px 18px rgba(255,255,255,.72), 0 16px 36px rgba(35,86,69,.16);
}

.genome-display--tower .genome-pod::before,
.genome-display--tower .genome-pod::after,
.genome-display--hero .genome-pod::before,
.genome-display--hero .genome-pod::after {
  top: 7px;
  bottom: auto;
  left: 9px;
  right: 9px;
  width: auto;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fdfefe, #78988d 45%, #d9e6df 55%, #58786d);
  box-shadow: 0 2px 6px rgba(35,76,63,.24), inset 0 1px #fff;
}

.genome-display--tower .genome-pod::after,
.genome-display--hero .genome-pod::after {
  top: auto;
  bottom: 7px;
}

.genome-display--tower .genome-model,
.genome-display--hero .genome-model {
  inset: auto;
  top: 50%;
  left: 50%;
  width: min(52dvh, 430px);
  height: 150px;
  transform: translate(-50%,-50%) rotate(90deg) rotateY(-9deg) rotateZ(-2deg);
}

.genome-display--tower .genome-rung,
.genome-display--hero .genome-rung {
  width: 108px;
}

.genome-display--tower .genome-rung:not(.is-active) span,
.genome-display--tower .genome-rung:not(.is-active) em {
  border-color: rgba(255,255,255,.92);
  background: radial-gradient(circle at 30% 24%, #fff, #dfe4e2 32%, #9ca9a5 68%, #5c6965);
  box-shadow: inset -3px -4px 7px rgba(45,58,54,.28), 0 4px 7px rgba(43,61,55,.20);
}

.genome-display--tower .genome-rung:not(.is-active) b {
  background: linear-gradient(180deg, #f2f4f3, #8b9894);
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.secondary {
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid rgba(78,139,118,.42);
  border-radius: 10px 17px 11px 18px;
  color: #2d6858;
  background: rgba(255,255,255,.70);
  font: 800 11px/1 var(--brand-font);
  cursor: pointer;
}

.screen[data-screen="genome-finale"] {
  align-content: center;
}

.genome-finale__heading {
  display: grid;
  place-items: center;
  text-align: center;
}

.genome-finale__heading img {
  width: 150px;
  height: 52px;
  object-fit: contain;
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 12px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 8px 22px rgba(36,83,68,.12);
}

.genome-finale__heading .eyebrow { margin: 7px 0 3px; }
.genome-finale__heading h2 {
  margin: 0;
  font-size: clamp(29px,3vw,48px);
  line-height: 1;
  letter-spacing: -.035em;
}

.genome-finale__layout {
  display: grid;
  grid-template-columns: minmax(260px,1fr) minmax(260px,.9fr) minmax(260px,1fr);
  gap: clamp(12px,1.6vw,24px);
  align-items: stretch;
  height: min(57dvh,610px);
  margin-top: 12px;
}

.genome-finale__panel {
  align-self: center;
  padding: clamp(15px,1.6vw,24px);
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 18px 28px 20px 30px;
  color: #244e43;
  background: radial-gradient(ellipse at 15% -25%, rgba(255,255,255,.94), transparent 55%), linear-gradient(125deg, rgba(255,255,255,.78), rgba(224,240,231,.68));
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 16px 42px rgba(32,81,64,.14);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}

.genome-finale__panel h3 {
  margin: 0 0 10px;
  color: #1b4a3e;
  font-size: clamp(15px,1.4vw,22px);
}

.genome-finale__formula {
  margin: 0 0 22px;
  color: #3f6259;
  font-size: clamp(12px,1.05vw,17px);
  line-height: 1.5;
}

.genome-finale__formula b { color: #2d765f; }
.genome-finale__formula strong { color: #fff; padding: 3px 6px; border-radius: 5px; background: #31806a; }

.result-scale {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.result-scale li,
.genome-finale__panel--facts p {
  position: relative;
  margin: 0;
  padding: 10px 12px 10px 18px;
  border: 1px solid rgba(88,147,127,.28);
  border-radius: 9px 14px 10px 15px;
  background: rgba(255,255,255,.56);
  font-size: clamp(10px,.88vw,14px);
  line-height: 1.35;
}

.result-scale li::before,
.genome-finale__panel--facts p::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6ea58d;
  box-shadow: 0 0 0 3px rgba(110,165,141,.14);
}

.genome-finale__panel--facts {
  display: grid;
  gap: 12px;
}

.genome-display--hero {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0,1fr) auto;
  gap: 7px;
  padding: 12px;
}

.genome-display--hero .genome-display__copy {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

.genome-display--hero .genome-model {
  width: min(47dvh,500px);
  animation: genome-hero-turn 8s linear infinite;
}

@keyframes genome-hero-turn {
  0% { transform: translate(-50%,-50%) rotate(90deg) rotateY(-12deg) rotateZ(-2deg); }
  50% { transform: translate(-50%,-50%) rotate(90deg) rotateY(168deg) rotateZ(-2deg); }
  100% { transform: translate(-50%,-50%) rotate(90deg) rotateY(348deg) rotateZ(-2deg); }
}

.genome-finale__restart {
  display: block;
  width: fit-content;
  margin: 10px auto 0;
}

@media (min-width: 1200px) {
  .screen[data-screen="quiz"] .quiz-layout {
    grid-template-columns: minmax(430px,1.08fr) minmax(205px,.48fr) minmax(390px,.94fr);
    gap: clamp(14px,1.5vw,24px);
    align-items: center;
  }

  .screen[data-screen="quiz"] .visual-column {
    height: min(64dvh,660px);
  }

  .screen[data-screen="result"] .result-layout {
    grid-template-columns: minmax(430px,1.08fr) minmax(205px,.48fr) minmax(390px,.94fr);
    gap: clamp(14px,1.5vw,24px);
    align-items: center;
  }

  .screen[data-screen="result"] .result-visual-column,
  .screen[data-screen="result"] .result-visual-column .lab-art {
    width: 100%;
    height: min(64dvh,660px);
  }
}

@media (min-width: 651px) and (max-width: 1199px) {
  .screen[data-screen="quiz"] .quiz-layout {
    grid-template-columns: minmax(0,1.05fr) 150px minmax(270px,.95fr);
    gap: 9px;
  }

  .genome-display--tower,
  .screen[data-screen="quiz"] .visual-column {
    height: min(67dvh,550px);
  }

  .genome-display--tower { padding: 7px; }
  .genome-display--tower .genome-model { width: min(48dvh,380px); height: 112px; }

  .genome-finale__layout {
    grid-template-columns: minmax(210px,1fr) 210px minmax(210px,1fr);
    gap: 8px;
  }

  .genome-finale__panel { padding: 11px; }
  .result-scale { gap: 5px; }
  .result-scale li, .genome-finale__panel--facts p { padding: 7px 8px 7px 15px; font-size: 8.5px; }

  .screen[data-screen="result"] .result-layout {
    grid-template-columns: minmax(0,1.05fr) 150px minmax(270px,.95fr);
    gap: 9px;
  }

  .screen[data-screen="result"] .genome-display--result-tower,
  .screen[data-screen="result"] .result-visual-column,
  .screen[data-screen="result"] .result-visual-column .lab-art {
    height: min(67dvh,550px);
  }
}

@media (max-width: 650px) {
  .screen[data-screen="quiz"] .quiz-layout { display: block; }

  .screen[data-screen="result"] .result-layout { display: block; }

  .screen[data-screen="result"] .result-visual-column {
    position: fixed;
    right: 12px;
    bottom: 12px;
    width: calc(100% - 24px);
    height: min(29dvh,230px);
    display: block;
    pointer-events: none;
  }

  .screen[data-screen="result"] .result-visual-column .lab-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .screen[data-screen="quiz"] .visual-column {
    position: fixed;
    right: 12px;
    bottom: 12px;
    width: calc(100% - 24px);
    height: min(29dvh,230px);
  }

  .genome-display--tower {
    position: fixed;
    z-index: 9;
    top: auto;
    left: auto;
    right: 20px;
    bottom: 20px;
    width: 98px;
    height: min(27dvh,214px);
    padding: 5px;
    border-radius: 12px 18px 13px 20px;
    background: linear-gradient(120deg, rgba(252,255,252,.94), rgba(223,241,231,.84));
    pointer-events: none;
  }

  .genome-display--tower .genome-pod {
    pointer-events: auto;
  }

  .genome-display--tower .genome-display__copy { display: grid; gap: 1px; padding: 0 2px; }
  .genome-display--tower .genome-display__copy span { max-width: none; font-size: 5.5px; }
  .genome-display--tower .genome-display__copy strong { font-size: 13px; }
  .genome-display--tower .genome-model { width: min(20dvh,165px); height: 74px; }

  .screen[data-screen="genome-finale"] { padding: 7px 8px; }
  .genome-finale__heading img { width: 102px; height: 34px; padding: 3px 7px; }
  .genome-finale__heading .eyebrow { margin: 3px 0 1px; font-size: 6px; }
  .genome-finale__heading h2 { font-size: 20px; }

  .genome-finale__layout {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto minmax(0,1fr);
    gap: 5px;
    height: min(65dvh,540px);
    margin-top: 5px;
  }

  .genome-finale__panel { align-self: stretch; padding: 6px; border-radius: 10px 15px 11px 16px; }
  .genome-finale__panel h3 { margin-bottom: 3px; font-size: 8px; }
  .genome-finale__formula { margin-bottom: 5px; font-size: 6.5px; line-height: 1.25; }
  .result-scale, .genome-finale__panel--facts { gap: 3px; }
  .result-scale li, .genome-finale__panel--facts p { padding: 4px 4px 4px 10px; font-size: 5.8px; line-height: 1.2; }
  .result-scale li::before, .genome-finale__panel--facts p::before { top: 7px; left: 4px; width: 3px; height: 3px; }

  .genome-display--hero {
    position: relative;
    inset: auto;
    width: auto;
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 0;
    padding: 6px;
  }

  .genome-display--hero .genome-model { width: min(35dvh,280px); height: 105px; }
  .genome-display--hero .genome-display__copy span { font-size: 7px; }
  .genome-display--hero .genome-display__copy strong { font-size: 18px; }
  .genome-finale__restart { min-height: 36px; margin-top: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .genome-display--hero .genome-model { animation: none; }
}

/* Three.js pig-genome renderer. CSS helix remains as a no-WebGL fallback. */
.genome-canvas {
  position: absolute;
  z-index: 2;
  inset: 14px 8px;
  width: calc(100% - 16px);
  height: calc(100% - 28px);
  display: block;
  opacity: 0;
  transition: opacity .45s ease;
}

.genome-pod.is-webgl .genome-canvas { opacity: 1; }
.genome-pod.is-webgl .genome-model { display: none; }
.genome-pod.no-webgl .genome-model { visibility: visible; }

.genome-source {
  position: absolute;
  z-index: 4;
  right: 50%;
  bottom: 13px;
  padding: 3px 7px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 999px;
  color: #426c60;
  background: rgba(250,253,250,.78);
  box-shadow: 0 4px 12px rgba(31,79,63,.10);
  font: 800 6px/1 var(--brand-font);
  letter-spacing: .045em;
  white-space: nowrap;
  transform: translateX(50%);
  pointer-events: none;
}

@media (min-width: 1200px) {
  .screen[data-screen="quiz"] .quiz-layout,
  .screen[data-screen="result"] .result-layout {
    grid-template-columns: minmax(450px,1.13fr) minmax(168px,.34fr) minmax(410px,1fr);
  }

  .genome-finale__layout {
    grid-template-columns: minmax(320px,1fr) minmax(205px,245px) minmax(320px,1fr);
    justify-content: center;
  }
}

@media (min-width: 651px) and (max-width: 1199px) {
  .screen[data-screen="quiz"] .quiz-layout,
  .screen[data-screen="result"] .result-layout {
    grid-template-columns: minmax(0,1.08fr) 126px minmax(270px,.92fr);
  }

  .genome-finale__layout {
    grid-template-columns: minmax(220px,1fr) 176px minmax(220px,1fr);
  }
}

@media (max-width: 650px) {
  .genome-display--tower {
    width: 84px;
  }

  .genome-canvas {
    inset: 9px 4px;
    width: calc(100% - 8px);
    height: calc(100% - 18px);
  }

  .genome-source {
    bottom: 7px;
    max-width: 90%;
    overflow: hidden;
    padding: 2px 4px;
    font-size: 4.5px;
    text-overflow: ellipsis;
  }
}

/* Client identity: keep the original mark large, stable and aligned to the genome. */
.brand-logo {
  top: 10px;
  left: 18px;
  width: 280px;
  height: 121px;
  padding: 10px;
  border-radius: 13px;
  object-fit: contain;
  object-position: center;
}

@media (min-width: 1051px) {
  .sequence-intro { margin-left: 250px; }
}

.genome-display__brand {
  position: absolute;
  z-index: 80;
  top: -114px;
  left: 50%;
  width: 240px;
  height: 106px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.96);
  border-radius: 11px;
  object-fit: contain;
  object-position: center;
  background: rgba(255,255,255,.97);
  box-shadow: 0 10px 28px rgba(31,79,64,.16);
  transform: translateX(-50%);
  pointer-events: none;
}

.genome-display--tower { overflow: visible; }
.genome-display--tower::after { display: none; }

@media (min-width: 651px) {
  /* The intro has its own information hierarchy. Keep the fixed shell mark
     out of the content canvas so it can never cover the two speaker bubbles
     or the introductory fact cards. Branding remains visible on the start
     frame and in the dedicated genome panels. */
  body[data-active-screen="intro"] .brand-logo,
  body[data-active-screen="quiz"] .brand-logo,
  body[data-active-screen="result"] .brand-logo,
  body[data-active-screen="genome-finale"] > .lab-shell > .brand-logo {
    visibility: hidden;
    pointer-events: none;
  }
}

/* On narrow touch layouts the shell mark occupies the same header band as
   the sequencer. Hide it on intro as well instead of allowing it to float
   over the reading area when the viewport is compressed. */
body[data-active-screen="intro"] .brand-logo {
  visibility: hidden;
  pointer-events: none;
}

/* Give the supplied production photography a consistent, crisp exhibition finish. */
.lab-art > img,
.screen[data-screen="start"] .lab-art > img {
  filter: brightness(1.075) contrast(1.085) saturate(1.04);
}

.lab-art::before {
  background: linear-gradient(135deg, rgba(235,252,244,.10), transparent 42%, rgba(220,242,231,.08));
}

.genome-finale__heading img {
  width: 250px;
  height: 109px;
  padding: 10px;
}

@media (min-width: 651px) and (max-height: 680px) {
  .screen[data-screen="quiz"] .genome-display--tower {
    transform: translateY(45px);
  }

  .genome-display__brand {
    top: -93px;
    width: 194px;
    height: 88px;
    padding: 10px;
  }

  .genome-finale__heading img {
    width: 194px;
    height: 88px;
    padding: 10px;
  }

  .genome-finale__heading .eyebrow { margin: 2px 0 1px; }
  .genome-finale__heading h2 { font-size: 25px; }
  .genome-finale__layout { height: min(53dvh, 318px); margin-top: 5px; }
  .genome-finale__restart { min-height: 38px; margin-top: 4px; }
}

@media (max-width: 1050px) {
  .lab-shell { grid-template-rows: 60px minmax(0, 1fr); }
  .game { height: calc(100dvh - 60px); }
  .screen { height: calc(100dvh - 72px); }

  .brand-logo {
    top: 4px;
    left: 8px;
    width: 157px;
    height: 68px;
    padding: 6px;
  }
}

@media (max-width: 650px) {
  .genome-display__brand { display: none; }
  .genome-finale__heading img { width: 157px; height: 68px; padding: 6px; }
}

/* Keep the dedicated genome-panel lockup inside the viewport. The logo sits
   above the tower, so the whole tower gets a small, viewport-aware drop
   instead of letting the screen's overflow clip the top of the mark. */
@media (min-width: 1051px) {
  .screen[data-screen="quiz"] .genome-display--tower,
  .screen[data-screen="result"] .genome-display--result-tower {
    transform: translateY(35px);
  }
}

@media (min-width: 651px) and (max-width: 1050px) {
  .screen[data-screen="quiz"] .genome-display--tower,
  .screen[data-screen="result"] .genome-display--result-tower {
    transform: translateY(70px);
  }
}

/* The lockup overhangs the narrow tower by design. Raise that panel as a
   single layer so the neighbouring photography cannot paint over the mark. */
.genome-display--tower {
  z-index: 5;
}

/* Intro branding has a reserved slot in the wide status bar. It remains
   compact and fully readable, while the content canvas below stays clear. */
@media (min-width: 1200px) {
  body[data-active-screen="intro"] .brand-logo {
    top: 2px;
    left: 18px;
    width: 220px;
    height: 92px;
    padding: 8px;
    visibility: visible;
    pointer-events: none;
  }
}

/* Every screen keeps a visible client mark. On compact headers the lockup is
   reduced to a safe, self-contained slot before the reading canvas starts. */
@media (min-width: 651px) and (max-width: 1199px) {
  body[data-active-screen="intro"] .brand-logo {
    top: 2px;
    left: 10px;
    width: 190px;
    height: 58px;
    padding: 5px 7px;
    visibility: visible;
    pointer-events: none;
  }
}

@media (max-width: 650px) {
  body[data-active-screen="intro"] .brand-logo {
    top: 3px;
    left: 8px;
    width: 126px;
    height: 46px;
    padding: 4px 6px;
    visibility: visible;
    pointer-events: none;
  }
}

/* One permanent client-identity slot for the whole flow. The genome tower
   and finale keep their code visuals, but no longer introduce second logo
   positions that make the brand appear to jump between screens. */
.brand-logo {
  top: 2px;
  left: 18px;
  width: 220px;
  height: 92px;
  padding: 8px;
  visibility: visible;
  pointer-events: none;
}

.genome-display__brand,
.genome-finale__heading > img {
  display: none !important;
}

/* Override the earlier screen-specific visibility rules: the single shell
   lockup must stay present while the player moves through every state. */
body[data-active-screen="start"] .brand-logo,
body[data-active-screen="intro"] .brand-logo,
body[data-active-screen="quiz"] .brand-logo,
body[data-active-screen="result"] .brand-logo,
body[data-active-screen="genome-finale"] .brand-logo,
body[data-active-screen="genome-finale"] > .lab-shell > .brand-logo {
  display: block;
  visibility: visible;
}

@media (min-width: 651px) and (max-width: 1199px) {
  .brand-logo {
    top: 2px;
    left: 10px;
    width: 190px;
    height: 58px;
    padding: 5px 7px;
  }
}

@media (max-width: 650px) {
  .brand-logo {
    top: 3px;
    left: 8px;
    width: 126px;
    height: 46px;
    padding: 4px 6px;
  }
}

/* The touch kiosk can report a 2× raster viewport (for example, a 1340px
   screenshot is a 670px CSS viewport). Keep the introductory copy and its
   call-to-action in that single frame instead of letting the second dialogue
   row push the button below the screen. */
@media (min-width: 651px) and (max-width: 1050px) {
  .screen[data-screen="intro"] .intro-dialogue {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 7px;
  }

  .screen[data-screen="intro"] .intro-dialogue .speaker {
    min-width: 0;
    gap: 6px;
  }

  .screen[data-screen="intro"] .intro-dialogue .speaker img {
    width: 38px;
    height: 48px;
  }

  .screen[data-screen="intro"] .intro-dialogue .speaker p {
    min-width: 0;
    max-width: none;
    padding: 6px 8px;
    font-size: 9px;
    line-height: 1.18;
  }

  .screen[data-screen="intro"] .intro-layout {
    gap: 8px;
  }

  .screen[data-screen="intro"] .intro-copy {
    gap: 5px;
  }

  .screen[data-screen="intro"] .fact-card {
    padding: 8px 10px;
  }

  .screen[data-screen="intro"] .fact-card h2 {
    margin-bottom: 3px;
    font-size: 15px;
  }

  .screen[data-screen="intro"] .fact-card p {
    font-size: 9px;
    line-height: 1.18;
  }

  .screen[data-screen="intro"] .region-list,
  .screen[data-screen="intro"] .breed-labels {
    gap: 3px;
    margin-top: 5px;
  }

  .screen[data-screen="intro"] .region-list b,
  .screen[data-screen="intro"] .breed-labels b {
    padding: 4px 5px;
    font-size: 8px;
  }

  .screen[data-screen="intro"] .intro-copy > .primary {
    min-height: 42px;
    margin-top: 4px;
  }
}

/* Result screen: a kiosk may expose only a 670px-wide CSS viewport (the
   customer screenshots are commonly rendered at 2×). Keep the score,
   assembled code and photo in one frame at that size. */
@media (min-width: 651px) and (max-width: 1050px) {
  .screen[data-screen="result"] .result-layout {
    grid-template-columns: minmax(0, 1.08fr) 126px minmax(0, .92fr);
    gap: 9px;
    align-items: center;
  }

  .screen[data-screen="result"] .result-copy {
    min-width: 0;
    display: grid;
    gap: 5px;
  }

  .screen[data-screen="result"] .result-copy h2 {
    max-width: none;
    margin: 0 0 5px;
    font-size: clamp(20px, 3vw, 30px);
    line-height: .98;
  }

  .screen[data-screen="result"] .result-score-card {
    padding: 8px 10px;
    border-left-width: 3px;
  }

  .screen[data-screen="result"] .result-score-card span {
    font-size: 8px;
  }

  .screen[data-screen="result"] .result-score-card strong {
    margin: 3px 0;
    font-size: clamp(15px, 2.6vw, 22px);
    line-height: 1;
  }

  .screen[data-screen="result"] .result-score-card p {
    font-size: 9px;
    line-height: 1.15;
  }

  .screen[data-screen="result"] .takeaways {
    gap: 3px;
    margin-top: 5px;
  }

  .screen[data-screen="result"] .takeaways p {
    padding: 5px 7px;
    font-size: 8px;
    line-height: 1.15;
  }

  .screen[data-screen="result"] .formula {
    gap: 2px;
    margin-top: 5px;
  }

  .screen[data-screen="result"] .formula span,
  .screen[data-screen="result"] .formula strong {
    padding: 4px 5px;
    font-size: 7.5px;
  }

  .screen[data-screen="result"] .result-fragments {
    gap: 3px;
    margin-top: 5px;
  }

  .screen[data-screen="result"] .result-fragments span {
    padding: 5px 3px;
    font-size: 7px;
    line-height: 1.08;
  }

  .screen[data-screen="result"] .result-actions {
    gap: 4px;
  }

  .screen[data-screen="result"] .result-actions .primary {
    min-height: 36px;
    margin-top: 5px;
    padding: 0 8px;
    font-size: 9px;
    gap: 7px;
  }

  .screen[data-screen="result"] .result-actions .secondary {
    min-height: 32px;
    padding: 7px 10px;
    font-size: 8px;
  }

  .screen[data-screen="result"] .result-visual-column,
  .screen[data-screen="result"] .result-visual-column .lab-art {
    min-width: 0;
    width: 100%;
    height: min(67dvh, 550px);
  }

  .screen[data-screen="result"] .genome-display--result-tower {
    transform: none;
  }

  .screen[data-screen="result"] .final-dialogue {
    margin-top: 5px;
    gap: 6px;
  }

  .screen[data-screen="result"] .final-dialogue .speaker img {
    width: 30px;
    height: 38px;
  }

  .screen[data-screen="result"] .final-dialogue .speaker p {
    max-width: none;
    padding: 5px 7px;
    font-size: 8px;
    line-height: 1.15;
  }
}