.cur-app {
  /* Local tokens: the site's current tokens.css names first, the older
     site.css names second, then a literal, so this sim keeps working
     through the site redesign. */
  --c-ink: var(--tlg-text, var(--tlg-ink, #15191f));
  --c-muted: var(--tlg-text-muted, var(--tlg-muted, #3f4754));
  --c-surface: var(--tlg-surface, #ffffff);
  --c-surface-2: var(--tlg-surface-2, var(--tlg-chip-bg, #f1f3ec));
  --c-border: var(--tlg-border, #dfe2d8);
  --c-border-strong: var(--tlg-border-strong, #aeb6a8);
  --c-focus: var(--tlg-focus, #1d4ed8);
  --c-tap: var(--tlg-tap, 44px);
  --c-radius: var(--tlg-radius-lg, var(--tlg-radius-card, 16px));
  --c-pill: var(--tlg-radius-full, var(--tlg-radius-pill, 999px));
  --c-font: var(--tlg-font, var(--tlg-font-body, system-ui, sans-serif));
  --c-font-h: var(--tlg-font-heading, var(--c-font));
  --cur-accent: var(--tlg-earth-solid, var(--tlg-earth, #b45309));
  --cur-accent-dark: var(--tlg-earth-fg, var(--tlg-earth-dark, #92400e));
  --cur-accent-tint: var(--tlg-earth-tint, #fdf5e6);
  --cur-on-accent: var(--tlg-on-solid, #ffffff);
  --cur-right: #15803d;
  --cur-right-tint: #e8f5ec;
  --cur-wrong: #b91c1c;
  --cur-wrong-tint: #fdecec;
  --cur-info-tint: #eef3fb;
  max-width: var(--tlg-page-w, 1280px);
  margin: 0 auto;
  padding: 20px 16px 60px;
  color: var(--c-ink);
}
html[data-theme="dark"] .cur-app {
  --cur-right: #4ade80;
  --cur-right-tint: #10281a;
  --cur-wrong: #fca5a5;
  --cur-wrong-tint: #34161a;
  --cur-info-tint: #172433;
}

.cur-app [hidden] { display: none !important; }
.cur-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── Start screen: General / AP level picker ── */
.cur-start {
  max-width: 720px;
  margin: 40px auto;
  text-align: center;
}
.cur-start h1 { font-family: var(--c-font-h); margin-bottom: 8px; }
.cur-start p { color: var(--c-muted); margin-bottom: 28px; }
.cur-level-choices { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cur-level-btn {
  flex: 1 1 260px; max-width: 320px;
  border: 2px solid var(--c-border);
  border-radius: var(--c-radius);
  background: var(--c-surface);
  color: var(--c-ink);
  padding: 24px 20px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  min-height: var(--c-tap);
}
.cur-level-btn:hover, .cur-level-btn:focus-visible { border-color: var(--cur-accent); outline: none; }
.cur-level-btn h2 { font-family: var(--c-font-h); font-size: 1.2rem; margin-bottom: 6px; color: var(--cur-accent-dark); }
.cur-level-btn p { color: var(--c-muted); font-size: 0.92rem; margin: 0; }

/* ── Buttons (shared; replaces per-element inline styling) ── */
.cur-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--c-tap); min-width: 44px;
  padding: 8px 16px;
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--c-pill);
  background: var(--c-surface);
  color: var(--c-ink);
  font: inherit; font-weight: 600; line-height: 1.2;
  cursor: pointer;
  text-align: center;
}
.cur-btn:hover:not(:disabled) { border-color: var(--cur-accent); }
.cur-btn:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.cur-btn:disabled { opacity: .55; cursor: not-allowed; }
.cur-btn-primary { background: var(--cur-accent); border-color: var(--cur-accent); color: var(--cur-on-accent); }
.cur-btn-primary:hover:not(:disabled) { background: var(--cur-accent-dark); border-color: var(--cur-accent-dark); }
.cur-btn-small { min-height: var(--c-tap); padding: 4px 14px; font-size: 0.9rem; }
.cur-btn-choice { flex: 1 1 160px; }
.cur-btn-choice.is-chosen { border-color: var(--cur-accent); background: var(--cur-accent-tint); box-shadow: inset 0 0 0 1px var(--cur-accent); opacity: 1; }
.cur-btn[aria-pressed="true"] { border-color: var(--cur-accent); background: var(--cur-accent-tint); color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--cur-accent); }
.cur-btn .cur-ico { width: 18px; height: 18px; flex: none; }

/* segmented control */
.cur-seg { display: inline-flex; border: 1.5px solid var(--c-border-strong); border-radius: var(--c-pill); overflow: hidden; background: var(--c-surface); }
.cur-seg button {
  min-height: var(--c-tap); min-width: 44px; padding: 6px 14px;
  border: 0; border-left: 1px solid var(--c-border); background: transparent; color: var(--c-ink);
  font: inherit; font-weight: 600; cursor: pointer;
}
.cur-seg button:first-child { border-left: 0; }
.cur-seg button[aria-pressed="true"] { background: var(--cur-accent); color: var(--cur-on-accent); }
.cur-seg button:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -3px; }

/* form controls inside the sim */
.cur-app input[type="range"] { min-height: var(--c-tap); accent-color: var(--cur-accent); cursor: pointer; }
.cur-app select { min-height: var(--c-tap); padding: 4px 10px; border: 1.5px solid var(--c-border-strong); border-radius: 10px; background: var(--c-surface); color: var(--c-ink); font: inherit; }
.cur-app input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--cur-accent); }
.cur-check-label { display: inline-flex; align-items: center; gap: 8px; min-height: var(--c-tap); cursor: pointer; }

/* ── Mode tabs ── */
.cur-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 16px;
}
.cur-tab {
  border: none; background: none; font: inherit;
  padding: 10px 14px; min-height: var(--c-tap);
  border-bottom: 3px solid transparent;
  cursor: pointer; color: var(--c-muted);
}
.cur-tab.is-active, .cur-tab[aria-selected="true"] { color: var(--cur-accent-dark); border-bottom-color: var(--cur-accent); font-weight: 700; }
.cur-tab:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -3px; }
.cur-level-tag {
  margin-left: auto; align-self: center;
  font-size: 0.85rem; color: var(--c-muted);
  padding: 2px 4px 2px 12px; border: 1px solid var(--c-border); border-radius: var(--c-pill);
  background: var(--c-surface-2);
  display: inline-flex; align-items: center;
}
.cur-ab-slot { display: inline-flex; align-items: center; align-self: center; }
.cur-level-tag button { border: none; background: none; color: var(--cur-accent-dark); font: inherit; cursor: pointer; text-decoration: underline; margin-left: 4px; min-height: var(--c-tap); padding: 0 10px; }

/* ── Mode layout ── */
.cur-mode { display: none; }
.cur-mode.is-active { display: block; }
.cur-mode-header { margin-bottom: 10px; }
.cur-mode-header h2 { font-family: var(--c-font-h); font-size: 1.35rem; margin: 0 0 2px; display: inline; }
.cur-objective { margin: 4px 0 0; color: var(--c-muted); font-size: 0.95rem; }
.cur-standards { margin: 2px 0 0; color: var(--c-muted); font-size: 0.8rem; }

.cur-stage {
  position: relative;
  display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 10px;
}
.cur-stage--side { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.cur-viewport {
  position: relative;
  width: 100%; aspect-ratio: 16 / 10;
  background: #071b2b;
  border-radius: var(--c-radius);
  overflow: hidden;
}
.cur-viewport canvas { display: block; touch-action: none; }
.cur-viewport canvas:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -3px; }
.cur-viewport > canvas.cur-2d { width: 100%; height: 100%; }
.cur-viewport.cur-space {
  background:
    radial-gradient(ellipse at 50% 42%, #173c5f 0%, #0c243b 38%, #06121f 70%, #02070d 100%);
}
.cur-panel {
  position: relative; width: 100%;
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  background: var(--c-surface);
  overflow: hidden;
}
.cur-panel canvas { display: block; width: 100%; height: 100%; }
.cur-panel-title { position: absolute; left: 12px; top: 8px; font-size: 0.8rem; font-weight: 700; color: var(--c-muted); pointer-events: none; }
.cur-view-title {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  font-size: 0.8rem; font-weight: 700; color: #fff;
  background: rgba(4, 14, 24, .72); padding: 3px 9px; border-radius: 999px; pointer-events: none;
}

.cur-primary-controls {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  background: var(--cur-accent-tint);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  padding: 10px 16px;
  color: var(--c-ink);
}
.cur-primary-controls label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.cur-primary-controls .cur-readout, .cur-readout { font-weight: 700; color: var(--cur-accent-dark); min-width: 2ch; }
.cur-spacer { flex: 1 1 auto; }

/* ── Progressive disclosure: drawer, info card ── */
.cur-drawer, .cur-info-card, .cur-sources {
  border: 1px solid var(--c-border);
  border-radius: 14px;
  margin-top: 10px;
  background: var(--c-surface);
  color: var(--c-ink);
}
.cur-drawer summary, .cur-info-card summary, .cur-sources summary {
  cursor: pointer; padding: 10px 14px; font-weight: 700;
  min-height: var(--c-tap); display: flex; align-items: center;
}
.cur-drawer summary:focus-visible, .cur-info-card summary:focus-visible, .cur-sources summary:focus-visible, .cur-mission summary:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -3px; }
.cur-drawer[open] summary, .cur-info-card[open] summary, .cur-sources[open] summary { border-bottom: 1px solid var(--c-border); }
.cur-drawer-content, .cur-info-body, .cur-sources ul { padding: 12px 14px; }
.cur-info-body { line-height: 1.5; }
.cur-sources ul { list-style: disc; padding-left: 30px; font-size: 0.88rem; color: var(--c-muted); }
.cur-note { font-size: 0.85rem; color: var(--c-muted); margin: 6px 0; }

.cur-toggle-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; align-items: center; }
.cur-toggle-row label { display: flex; align-items: center; gap: 6px; font-size: 0.95rem; min-height: var(--c-tap); }

/* ── Legend (sits on the dark globe in both themes) ── */
.cur-legend { position: absolute; left: 10px; bottom: 10px; background: rgba(4, 16, 28, .84); color: #fff; border-radius: 10px; padding: 8px 10px; font-size: 0.78rem; max-width: 250px; z-index: 3; pointer-events: none; }
.cur-legend-title { font-weight: 700; margin-bottom: 4px; }
.cur-legend-bar { height: 10px; border-radius: 5px; min-width: 180px; }
.cur-legend-ticks { display: flex; justify-content: space-between; margin-top: 3px; gap: 6px; font-variant-numeric: tabular-nums; }
.cur-legend-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.cur-legend-swatch { width: 22px; height: 0; border-top: 3px solid var(--sw); display: inline-block; }
.cur-legend-swatch.is-dashed { border-top-style: dashed; }
.cur-legend-note { margin-top: 5px; opacity: .85; font-size: 0.72rem; }

.cur-simplified-badge {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  background: #fee2e2; color: #991b1b; border-radius: var(--c-pill);
  padding: 2px 9px; margin-left: 8px; vertical-align: middle;
}
html[data-theme="dark"] .cur-simplified-badge { background: #4a1d1d; color: #fecaca; }

.cur-readout-line { font-size: 0.95rem; margin-top: 8px; min-height: 1.3em; color: var(--c-ink); }
.cur-data-pending { font-size: 0.85rem; color: var(--c-muted); font-style: italic; }

.cur-quality-row { display: flex; gap: 8px; align-items: center; font-size: 0.9rem; margin-top: 10px; flex-wrap: wrap; }
.cur-quality-status { color: var(--c-muted); font-size: 0.85rem; }

/* ── Loading state ── */
.cur-loading {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  color: #dbeafe; font-weight: 600; font-size: 0.95rem;
}
.cur-loading.is-error { color: #fecaca; padding: 20px; text-align: center; }
.cur-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(219, 234, 254, .25); border-top-color: #93c5fd; animation: cur-spin 0.9s linear infinite; }
@keyframes cur-spin { to { transform: rotate(360deg); } }

/* ── Globe labels ── */
.cur-label-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.cur-leader-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cur-leader-svg line { stroke: rgba(255, 255, 255, .7); stroke-width: 1.2; }
.cur-leader-svg circle { fill: #fff; }
.cur-globe-label {
  position: absolute; left: 0; top: 0; visibility: hidden;
  font: 600 12px/1.2 var(--c-font);
  background: rgba(4, 16, 28, .82); color: #fff;
  border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px;
  padding: 5px 11px; white-space: nowrap; pointer-events: auto; cursor: pointer;
  min-height: 28px; will-change: transform;
}
@media (any-pointer: coarse) { .cur-globe-label { min-height: 44px; padding: 12px 14px; } }
.cur-globe-label:hover, .cur-globe-label:focus-visible { border-color: #fbbf24; outline: 2px solid #fbbf24; outline-offset: 1px; }
.cur-globe-label.is-static { cursor: default; pointer-events: none; font-size: 11px; padding: 2px 7px; min-height: 0; }
.cur-globe-label.is-pin { background: #fbbf24; color: #1a1204; border-color: #fff; font-weight: 800; }
.cur-globe-label.is-pin-b { background: #7dd3fc; color: #04111d; border-color: #fff; font-weight: 800; }

.cur-hover-tip {
  position: absolute; z-index: 4; pointer-events: none;
  background: rgba(4, 16, 28, .9); color: #fff; font-size: 0.8rem; font-variant-numeric: tabular-nums;
  padding: 4px 8px; border-radius: 8px; transform: translate(12px, 12px); white-space: nowrap;
}
.cur-overlay-chip {
  position: absolute; z-index: 3; right: 10px; top: 10px;
  background: rgba(4, 16, 28, .82); color: #fff; font-size: 0.82rem; font-weight: 700;
  padding: 5px 10px; border-radius: 999px; pointer-events: none; font-variant-numeric: tabular-nums;
}

/* ── Mission panel ── */
.cur-mission {
  border: 1.5px solid var(--cur-accent);
  border-radius: 14px;
  background: var(--c-surface);
  color: var(--c-ink);
  margin: 8px 0 10px;
}
.cur-mission summary {
  cursor: pointer; padding: 8px 14px; font-weight: 800; min-height: var(--c-tap);
  display: flex; align-items: center; gap: 10px;
}
.cur-mission-count { font-size: 0.82rem; font-weight: 700; color: var(--c-muted); border: 1px solid var(--c-border); border-radius: 999px; padding: 1px 9px; }
.cur-mission-intro { margin: -4px 14px 2px; font-size: 0.82rem; color: var(--c-muted); }
.cur-mission-steps { margin: 0; padding: 2px 14px 10px 14px; list-style: none; counter-reset: step; display: grid; gap: 2px; }
.cur-mission-steps li { counter-increment: step; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 0 10px; font-size: 0.93rem; padding: 2px 0; min-height: 36px; }
.cur-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--c-border-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800; color: var(--c-muted); }
.cur-check::before { content: counter(step); }
.cur-mission-steps li.is-next .cur-check { border-color: var(--cur-accent); color: var(--cur-accent-dark); }
.cur-mission-steps li.is-next .cur-step-text { font-weight: 700; }
.cur-mission-steps li.is-done .cur-check { background: var(--cur-right); border-color: var(--cur-right); color: var(--c-surface); }
.cur-mission-steps li.is-done .cur-check::before { content: "✓"; }
.cur-mission-steps li.is-done .cur-step-text { color: var(--c-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.cur-step-hint { grid-column: 2 / 4; grid-row: 2; font-size: 0.82rem; color: var(--c-muted); }
.cur-mission-steps li.is-done .cur-step-hint { display: none; }
.cur-step-action { grid-column: 3; grid-row: 1; margin: 2px 0; }
@media (max-width: 560px) {
  .cur-mission-steps li { grid-template-columns: 26px minmax(0, 1fr); }
  .cur-step-action { grid-column: 2; grid-row: auto; justify-self: start; }
}

/* ── Prediction + feedback cards ── */
.cur-predict-host:empty, .cur-feedback-host:empty { display: none; }
.cur-predict-host, .cur-feedback-host { margin-top: 10px; }
.cur-predict {
  border: 2px dashed var(--cur-accent); border-radius: 14px; padding: 10px 14px;
  background: var(--cur-accent-tint); color: var(--c-ink);
}
.cur-predict-label { margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cur-accent-dark); }
.cur-predict-q { margin: 2px 0 8px; font-weight: 700; }
.cur-predict-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.cur-predict-hint { margin: 8px 0 0; font-size: 0.85rem; color: var(--c-muted); }
.cur-feedback { border-radius: 12px; padding: 10px 14px; border: 1.5px solid; line-height: 1.45; color: var(--c-ink); }
.cur-feedback.is-right { border-color: var(--cur-right); background: var(--cur-right-tint); }
.cur-feedback.is-wrong { border-color: var(--cur-wrong); background: var(--cur-wrong-tint); }
.cur-feedback.is-info { border-color: var(--c-border-strong); background: var(--cur-info-tint); }
.cur-feedback.is-right strong::before { content: "✓ "; }
.cur-feedback.is-wrong strong::before { content: "✗ "; }

/* ── CER box ── */
.cur-cer { border: 1px solid var(--c-border); border-radius: 14px; padding: 12px 14px; margin-top: 12px; background: var(--c-surface); color: var(--c-ink); }
.cur-cer > h3 { margin: 0 0 4px; font-size: 1rem; font-family: var(--c-font-h); }
.cur-cer-prompt { margin: 0 0 4px; font-weight: 600; }
.cur-cer-scaffold { margin: 0 0 6px; font-size: 0.85rem; color: var(--c-muted); }
.cur-cer textarea { width: 100%; box-sizing: border-box; border: 1.5px solid var(--c-border-strong); border-radius: 10px; padding: 8px 10px; font: inherit; background: var(--c-surface); color: var(--c-ink); resize: vertical; }
.cur-cer textarea:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 1px; }
.cur-cer-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.cur-cer-status { font-size: 0.88rem; color: var(--c-muted); }

/* ── Mode-specific bits ── */
.cur-grid-3 { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cur-grid-2 { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cur-span-2 { grid-column: span 2; }
.cur-eco-strip { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 8px; padding: 8px 12px; border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-surface); color: var(--c-ink); font-size: 0.9rem; }
.cur-eco-meter { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.cur-eco-bar { width: 140px; height: 12px; border-radius: 6px; background: var(--c-surface-2); border: 1px solid var(--c-border); overflow: hidden; }
.cur-eco-bar > span { display: block; height: 100%; width: 0; }
.cur-eco-bar.is-phyto > span { background: #22a35a; }
.cur-eco-bar.is-fish > span { background: repeating-linear-gradient(45deg, #2563eb 0 6px, #3b82f6 6px 12px); }
html[data-theme="dark"] .cur-eco-bar.is-fish > span { background: repeating-linear-gradient(45deg, #60a5fa 0 6px, #93c5fd 6px 12px); }
.cur-eco-value { font-variant-numeric: tabular-nums; color: var(--c-muted); font-weight: 600; min-width: 5ch; }
.cur-depth-gauge { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 64px; height: 62%; z-index: 3; color: #fff; font-size: 0.72rem; text-align: center; pointer-events: none; }
.cur-depth-track { position: relative; margin: 4px auto; width: 12px; height: calc(100% - 44px); border-radius: 6px; background: linear-gradient(#f59e0b, #2563eb); border: 1px solid rgba(255, 255, 255, .6); }
.cur-depth-marker { position: absolute; left: 50%; width: 22px; height: 22px; margin-left: -11px; margin-top: -11px; border-radius: 50%; background: #facc15; border: 2px solid #fff; box-shadow: 0 0 8px #facc15; }
.cur-depth-now { display: block; margin-top: 8px; padding: 2px 0; border-radius: 6px; background: rgba(4, 16, 28, .7); line-height: 1.3; }
.cur-age-badge { position: absolute; left: 12px; top: 12px; z-index: 3; background: rgba(4, 16, 28, .85); color: #fff; border-radius: 12px; padding: 6px 12px; font-size: 0.85rem; pointer-events: none; font-variant-numeric: tabular-nums; }
.cur-age-badge strong { font-size: 1.1rem; }
.cur-point-data { font-size: 0.88rem; line-height: 1.45; }
.cur-point-data dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 6px 0; }
.cur-point-data dt { color: var(--c-muted); }
.cur-point-data dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.cur-profile-card { border: 1px solid var(--c-border); border-radius: 14px; padding: 10px 12px; background: var(--c-surface); color: var(--c-ink); }
.cur-profile-card + .cur-profile-card { margin-top: 8px; }
.cur-profile-card h3 { margin: 0; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; }
.cur-pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--c-ink); display: inline-block; }
.cur-link-btn { margin-top: 6px; }
.cur-graph-actions { position: absolute; right: 8px; top: 6px; z-index: 2; }

@media (max-width: 860px) {
  .cur-stage--side { grid-template-columns: minmax(0, 1fr); }
  .cur-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .cur-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .cur-span-2 { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .cur-spinner { animation-duration: 3s; }
}

/* ── Test mode ── */
.cur-mc-choice { display: flex; align-items: center; gap: 10px; min-height: var(--c-tap); padding: 8px 12px; border: 1.5px solid var(--c-border); border-radius: 12px; margin-bottom: 6px; cursor: pointer; background: var(--c-surface); color: var(--c-ink); }
.cur-mc-choice:has(input:checked) { border-color: var(--cur-accent); background: var(--cur-accent-tint); }
.cur-mc-choice input { width: 20px; height: 20px; accent-color: var(--cur-accent); }
.cur-cr-text { width: 100%; box-sizing: border-box; border: 1.5px solid var(--c-border-strong); border-radius: 10px; padding: 8px 10px; font: inherit; background: var(--c-surface); color: var(--c-ink); }

/* narrow screens: controls wrap instead of overflowing */
.cur-primary-controls label { min-width: 0; flex-wrap: wrap; }
.cur-primary-controls select { max-width: 100%; }
@media (max-width: 520px) {
  .cur-primary-controls { padding: 10px 12px; gap: 8px; }
  .cur-primary-controls label { flex: 1 1 100%; }
  .cur-primary-controls select { flex: 1 1 auto; min-width: 0; }
  .cur-primary-controls input[type="range"] { flex: 1 1 120px; min-width: 0; }
  .cur-seg { flex-wrap: wrap; }
}
.cur-sst-key { display: inline-block; width: 70px; height: 10px; border-radius: 5px; vertical-align: middle; background: linear-gradient(to right, rgb(49,120,200), rgb(226,226,214), rgb(236,122,48)); border: 1px solid var(--c-border); }
@media (max-width: 560px) { .cur-stage--side .cur-viewport[style*="16/10"] { aspect-ratio: 4 / 3 !important; } }
.cur-profile-chart { position: relative; width: 100%; aspect-ratio: 4 / 3; margin-top: 6px; border: 1px solid var(--c-border); border-radius: 10px; overflow: hidden; }
.cur-profile-chart canvas { display: block; width: 100%; height: 100%; }
.cur-profile-loading { position: absolute; inset: 8px; margin: 0; }

/* keep the main stage inside a Chromebook screen (1366x768 minus the sticky header) */
.cur-stage > .cur-viewport, .cur-stage > .cur-panel { max-height: max(340px, calc(100vh - 170px)); }
.cur-predict, .cur-feedback { scroll-margin-top: 90px; scroll-margin-bottom: 16px; }

/* Density tank: keep the whole water column on a 768-px screen */
#curTankViewport { max-height: max(300px, 62vh); }

/* Explorer: the globe stays in view beside long pin cards instead of leaving a gap below it */
@media (min-width: 861px) {
  .cur-viewport.cur-stick { position: sticky; top: 12px; align-self: start; }
}