/* Authoritative geometry: 1280×720. No viewport-dependent inner layout.
   Only .scene-viewport changes how this single composed scene is viewed. */
html, body {
  width: 100% !important; height: 100% !important;
  min-width: 0 !important; min-height: 0 !important; overflow: hidden !important;
  margin: 0 !important; background: #dbe7e2 !important;
}
.scene-viewport { position: fixed; inset: 0; overflow: hidden; touch-action: pan-x pan-y pinch-zoom; }
.lab-shell { width: 1280px !important; height: 720px !important; }
/* Rasterize the original logo and text at the final panel resolution instead
   of enlarging an already rasterized 1280px compositor layer. */
@supports (zoom: 1) {
  .lab-shell { zoom: var(--scene-fit, 1); transform: translate(-50%, -50%) !important; }
}
.screen, .screen[data-screen="start"] {
  position: absolute !important; left: 38px !important; top: 16px !important;
  width: 1204px !important; height: 688px !important; min-height: 0 !important;
  margin: 0 !important; padding: 16px 36px !important;
  transform: none !important; border-radius: 28px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.97), rgba(240,246,238,.94)) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.screen > .screen-canvas { position: relative !important; display: block !important; height: 100% !important; }
.brand-logo {
  top: 24px !important; left: 530px !important; z-index: 30 !important;
  transform: none !important; padding: 6px 10px !important;
  image-rendering: auto; filter: none !important; will-change: auto;
}
.language-switch { top: 38px !important; right: 74px !important; z-index: 31 !important; }
body[data-active-screen="start"] .language-switch { top: 112px !important; display: flex !important; }
.festival-lockup { top: 8px !important; right: 56px !important; }
.screen .eyebrow { font-size: 13px !important; line-height: 18px !important; }
.screen-canvas > .eyebrow { position: absolute; top: 86px; left: 0; margin: 0 !important; }
.screen .genome-display { display: none !important; }
.lab-shell > .persistent-genome {
  display: flex !important; flex-direction: column !important;
  position: absolute !important; top: 166px !important; left: 530px !important;
  bottom: auto !important; right: auto !important; align-self: start !important;
  width: 220px !important; height: 478px !important; min-height: 0 !important;
  max-height: 478px !important; margin: 0 !important; padding: 14px !important;
  transform: none !important; z-index: 25;
}
.persistent-genome .genome-display__copy {
  display: flex !important; flex-direction: row !important; align-items: center !important;
  justify-content: space-between !important; gap: 8px !important;
  padding: 0 !important; margin: 0 0 10px !important; flex: 0 0 36px !important;
}
.persistent-genome .genome-display__copy span { width: 112px !important; font-size: 10px !important; }
.persistent-genome .genome-display__copy strong { width: auto !important; white-space: nowrap !important; }
.persistent-genome .genome-pod { width: 100% !important; height: auto !important; min-height: 0 !important; flex: 1 !important; }
.persistent-genome .genome-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.genome-pod:focus-visible, button:focus-visible { outline: 3px solid #226f9c !important; outline-offset: 3px !important; }
.question-head { position: absolute !important; top: 86px !important; left: 0; right: 0; height: 32px; margin: 0 !important; }
.question-head .score { position: static !important; min-width: 100px !important; font-size: 14px !important; }
.quiz-layout, .screen[data-screen="quiz"] .quiz-layout,
.result-layout, .screen[data-screen="result"] .screen-canvas > .result-layout {
  position: absolute !important; inset: 134px 0 auto !important; display: block !important;
  height: 518px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
}
.screen[data-screen="quiz"] .question-column {
  position: absolute !important; top: 0; left: 0; width: 418px !important; height: 518px !important;
  display: block !important; transform: none !important; margin: 0 !important;
}
.question-body { transform: scale(var(--quiz-fit, 1)); transform-origin: left top; display: flow-root; }
.question-next {
  position: absolute !important; bottom: 0 !important; left: 0 !important;
  margin: 0 !important; width: 234px !important; height: 52px !important;
  padding: 0 20px !important; gap: 12px !important;
  font-size: 14px !important; line-height: 20px !important; white-space: nowrap !important;
}
.question-column h2 { font-size: 32px !important; line-height: 1.05 !important; margin: 10px 0 !important; }
.quiz-guide { margin: 0 !important; min-height: 30px !important; }
.quiz-guide img { width: 30px !important; height: 30px !important; }
.quiz-guide p { font-size: 12px !important; }
.answers { gap: 8px !important; margin-top: 12px !important; }
.answer { min-height: 50px !important; padding: 12px 44px 12px 14px !important; }
.visual-column, .result-visual-column {
  position: absolute !important; right: 0 !important; top: 0 !important;
  width: 418px !important; height: 478px !important; margin: 0 !important;
}
.visual-column .lab-art, .result-visual-column .lab-art { display: block !important; height: 100% !important; }
.screen[data-screen="start"] .start-stage { display: block !important; }
.screen[data-screen="start"] .start-copy {
  position: absolute !important; left: 0 !important; top: 134px !important; width: 418px !important;
  height: 478px !important; padding: 24px !important; margin: 0 !important; display: block !important;
}
.screen[data-screen="start"] h1 { font-size: 51px !important; max-width: none !important; }
.screen[data-screen="start"] .lead { font-size: 18px !important; }
.screen[data-screen="start"] .primary { position: absolute !important; left: 24px; bottom: 24px; width: auto !important; }
.screen[data-screen="start"] .start-stage > .lab-art {
  position: absolute !important; top: 134px !important; right: 0 !important; width: 418px !important; height: 478px !important;
}
.screen[data-screen="intro"] .screen-canvas { display: block !important; }
.screen[data-screen="intro"] .intro-dialogue, .screen[data-screen="intro"] .intro-layout { display: contents !important; }
.intro-dialogue .speaker { position: absolute !important; left: 0; top: 112px; width: 418px; gap: 10px !important; }
.intro-dialogue .speaker--right { left: auto; right: 0; }
.intro-dialogue .speaker img { width: 32px !important; height: 48px !important; }
.intro-dialogue .speaker p { padding: 12px !important; font-size: 14px !important; line-height: 1.26 !important; }
.screen[data-screen="intro"] .intro-copy {
  position: absolute !important; top: 364px !important; left: 0; width: 418px; height: 288px;
  gap: 8px !important;
}
.screen[data-screen="intro"] .intro-copy > .primary { position: absolute !important; left: 0; bottom: 0; margin: 0 !important; }
.screen[data-screen="intro"] .intro-copy .fact-card { flex: 0 0 auto !important; }
.screen[data-screen="intro"] .intro-copy .fact-card:last-of-type { margin-bottom: 60px !important; }
.screen { -webkit-text-size-adjust: none; text-size-adjust: none; }
.screen[data-screen="intro"] .fact-card { padding: 12px 14px !important; }
.screen[data-screen="intro"] .fact-card h2 { font-size: 21px !important; }
.screen[data-screen="intro"] .fact-card p { font-size: 14px !important; }
.screen[data-screen="intro"] .region-list, .screen[data-screen="intro"] .breed-labels { margin-top: 6px !important; gap: 5px !important; }
.screen[data-screen="intro"] .breed-labels { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.screen[data-screen="intro"] .region-list b, .screen[data-screen="intro"] .breed-labels b { font-size: 10px !important; padding: 4px 5px !important; }
.screen[data-screen="intro"] .intro-layout > .lab-art { display: block !important; position: absolute; right: 0; top: 294px; width: 418px !important; height: 318px !important; }
.screen[data-screen="result"] .result-copy { width: 418px !important; transform-origin: left top !important; }
.result-copy h2 { font-size: 34px !important; margin: 0 0 12px !important; }
.result-score-card { padding: 14px !important; margin-bottom: 10px !important; }
.result-score-card strong { font-size: 25px !important; }
.result-score-card > span { font-size: 18px !important; color: #2f741b !important; }
.finale-personal-result { margin: 0 0 14px !important; background: #fff !important; }
.finale-personal-result strong { font-size: 25px !important; line-height: 1.15; }
.genome-finale__panel--formula .result-scale { gap: 6px !important; }
.genome-finale__panel--formula .result-scale li { padding: 8px 10px 8px 22px !important; }
.result-score-card p { font-size: 16px !important; }
.result-actions { display: flex !important; flex-wrap: wrap; gap: 8px !important; }
.final-dialogue { display: none !important; }
.genome-finale__heading { position: absolute; top: 86px; left: 0; right: 0; margin: 0 !important; }
.genome-finale__heading .eyebrow { display: none; }
.genome-finale__heading h2 { font-size: 32px !important; }
.screen[data-screen="genome-finale"] .genome-finale__layout { position: absolute; top: 134px; left: 0; width: 100%; height: 478px !important; display: block !important; }
.genome-finale__panel { position: absolute; top: 0; left: 0; width: 418px; height: auto !important; }
.genome-finale__panel--facts { left: auto; right: 0; }
.genome-finale__restart { position: absolute; left: 0; bottom: 0; margin: 0 !important; }
.genome-viewer__panel { min-height: 0 !important; height: min(880px, 94dvh) !important; grid-template-rows: auto minmax(80px, 1fr) auto auto; }
.genome-viewer__controls { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.genome-viewer__controls button { min-width: 44px; min-height: 44px; border-radius: 10px; border: 1px solid #c9ddd2; background: #fff; color: #2f741b; font: 700 16px var(--brand-font); }
.genome-viewer__hint { font-size: 12px !important; }
.genome-finale__formula strong { white-space: nowrap; }

/* Photos beside the genome are documentary imagery. Do not place UI labels,
   grids or scan marks over them; any branding printed into the source photo
   (for example on a cap) remains part of the image itself. */
.screen[data-screen="quiz"] .visual-column .lab-art::before,
.screen[data-screen="quiz"] .visual-column .lab-art::after,
.screen[data-screen="result"] .result-visual-column .lab-art::before,
.screen[data-screen="result"] .result-visual-column .lab-art::after,
.screen[data-screen="quiz"] .visual-column .lab-art .scan-grid,
.screen[data-screen="result"] .result-visual-column .lab-art .scan-grid,
.screen[data-screen="quiz"] .visual-column .lab-art .art-status,
.screen[data-screen="result"] .result-visual-column .lab-art .art-status {
  display: none !important;
}

/* The circular scan marker is also an interface overlay, not part of the
   documentary photo. Keep all photo surfaces free of it. */
.lab-art::after,
.lab-art .scan-grid,
.lab-art .art-status { display: none !important; }

/* Keep CTA surfaces clean in the fixed kiosk composition. The legacy glossy
   one-pixel pseudo-highlight renders as a detached pale rectangle at the
   scaled 1280×720 viewport, so the button uses only its bounded gradient. */
.primary::before { content: none !important; display: none !important; }
.persistent-genome .genome-model { visibility: hidden; }
.persistent-genome .no-webgl .genome-model { visibility: visible; }
@media (prefers-reduced-motion: reduce) { .genome-viewer { transition: none; } }
@media (max-width: 650px), (pointer: coarse) and (max-width: 1279px) {
  .scene-viewport { overflow: auto; overscroll-behavior: contain; }
  .lab-shell { position: relative !important; left: 0 !important; top: 0 !important; margin: 0 !important; transform: none !important; }
}
@media (max-height: 480px) {
  .genome-viewer__panel { padding: 10px !important; gap: 6px; }
  .genome-viewer__panel h2 { font-size: 22px; }
  .genome-viewer__panel header span, .genome-viewer__hint { display: none; }
}