/* A sampled mathematical object on the same black page as the opening sea. */
.zeta-surface { position: relative; min-width: 0; margin: 0; background: #000; }
.zeta-surface-stage { position: relative; width: 100%; aspect-ratio: 1.32; min-height: 330px; background: #000; }
.zeta-surface-stage canvas, .zeta-surface-fallback { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
#zeta-surface-canvas { opacity: 0; cursor: grab; touch-action: pan-y; }
#zeta-surface-canvas:active { cursor: grabbing; }
.zeta-surface[data-renderer='webgl'] #zeta-surface-canvas { opacity: 1; }
.zeta-surface[data-renderer='webgl'] .zeta-surface-fallback { visibility: hidden; }
.zeta-surface-stage::before, .zeta-surface-stage::after { position: absolute; z-index: 1; pointer-events: none; font: 9px/1.6 var(--mono); }
.zeta-surface-stage::before { content: 'σ ≈ ½'; top: 14px; left: 13px; color: var(--accent); }
.zeta-surface-stage::after { content: 'σ ∈ [−2.52, 2.47]   t ∈ [−3, 45]'; bottom: 12px; left: 13px; color: var(--quiet); }
/* Reserve the loaded control row while assets load or the drawing is shown. */
.zeta-surface-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 59px; padding: 7px 0; border-bottom: 1px solid var(--line); }
#zeta-surface-status { color: var(--muted); font: 10px/1.6 var(--mono); }
.zeta-surface-actions { display: flex; flex: none; gap: 16px; }
#zeta-surface-motion, #zeta-surface-reset { flex: none; min-height: 44px; padding: 10px 0 10px 12px; border: 0; background: none; color: var(--accent); font: 11px var(--sans); }
#zeta-surface-motion:hover, #zeta-surface-reset:hover { color: var(--text); }
#zeta-surface-motion[hidden], #zeta-surface-reset[hidden] { display: none; }
.zeta-surface > figcaption { margin-top: 12px; color: var(--muted); font-size: 11px; line-height: 1.8; }
@media (max-width: 760px) {
  .zeta-surface-stage { aspect-ratio: 1.04; min-height: 285px; }
  .zeta-surface-stage::after { font-size: 8px; }
  .zeta-surface-controls { flex-wrap: wrap; gap: 0 12px; min-height: 74px; }
  .zeta-surface-actions { margin-left: auto; }
  #zeta-surface-status { font-size: 9px; }
}

/* Keep the reading order intact when the screen is too small for two columns. */
.zeta-project { overflow: visible; }
.zeta-project .zeta-feature { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 32px; }
.zeta-research-content { min-width: 0; }
.zeta-research-content .plain-explainer { margin-inline: 0; }

/* Wide stacked views should not create a canvas taller than the screen. */
@media (min-width: 761px) {
  .zeta-feature .zeta-surface-stage { max-height: min(720px, calc(100svh - 180px)); min-height: 0; }
}
@media (orientation: landscape) and (max-width: 760px) {
  .zeta-feature .zeta-surface-stage { max-height: max(180px, calc(100svh - 150px)); min-height: 0; }
}

/* The scene belongs to this article, so the next project pushes it away. */
@media (min-width: 1100px) and (min-height: 650px) {
  .zeta-project .zeta-feature {
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.35fr);
    grid-template-areas: 'intro scene' 'research scene';
    column-gap: clamp(40px, 5vw, 72px);
    row-gap: 64px;
    padding-block: 48px 32px;
  }
  .zeta-feature > .project-copy { grid-area: intro; }
  .zeta-feature > .zeta-research-content { grid-area: research; }
  .zeta-feature > .zeta-surface {
    grid-area: scene;
    position: sticky;
    top: 104px;
    align-self: start;
  }
  .zeta-feature .zeta-surface-stage {
    height: min(720px, calc(100svh - 250px));
    min-height: 0;
    aspect-ratio: auto;
  }
  .zeta-research-content .theorem-result {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    margin-top: 0;
    padding-block: 30px 24px;
  }
  .zeta-research-content .theorem-number { font-size: clamp(54px, 5.5vw, 80px); }
  .zeta-research-content .theorem-result > figcaption { font-size: 13px; }
  .zeta-research-content .research-method { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .zeta-research-content .research-method li + li { border-left: 0; padding-left: 0; }
  .zeta-research-content .research-method h4 { margin-top: 9px; }
  .zeta-research-content .math-study > summary { flex-wrap: wrap; gap: 3px 20px; }
  .zeta-research-content .math-study .summary-meta { flex: 1; justify-content: space-between; }
  .zeta-research-content .project-invitation { display: block; padding-block: 25px 0; }
  .zeta-research-content .project-invitation p { margin-bottom: 20px; }
}