/* Virtual Microscope — layout and look.
   Principles (Apple HIG / WWDC fluid-interface talks, translated for the web):
   one floating glass command bar; one lab "stage" where the microscope and the eyepiece share a backdrop;
   neutral segmented controls with a sliding thumb (accent colour is kept for actions and state);
   feedback on press; size-specific type tracking; everything fits its column (no bleeding rims);
   reduced-motion, reduced-transparency and more-contrast variants. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0b0e14;
  --surface: #121722; --surface2: #191f2d; --surface3: #222a3c;
  --border: rgba(255,255,255,.08); --border2: rgba(255,255,255,.14);
  --accent: #a78bfa; --accent-hi: #c4b5fd; --accent-lo: rgba(167,139,250,.18); --on-accent: #160d2e;
  --teal: #2dd4bf;
  --green: #3ddc84; --red: #ff5f57; --gold: #f5c842;
  --text: #e8ecf4; --text-2: #a9b2c6; --text-dim: #707b93;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --r-card: 20px; --r-ctl: 11px;
  --ease: cubic-bezier(.32, .72, 0, 1);          /* iOS sheet curve: fast start, long soft settle */
  --lift: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.3);
}
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
#app { max-width: 1320px; margin: 0 auto; padding: 64px 24px 40px; overflow-x: clip; }
button, select, input, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

/* ── Header ─────────────────────────────────────────── */
.vm-header { margin: 10px 0 18px; }
.vm-header h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.75rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.032em; text-wrap: balance;
  background: linear-gradient(92deg, #f1edff 0%, var(--accent-hi) 48%, var(--teal) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vm-header .subtitle { color: var(--text-2); margin-top: 8px; font-size: 1.02rem; line-height: 1.45; letter-spacing: -0.005em; max-width: 72ch; text-wrap: balance; }   /* no lone last word */

/* ── Buttons ────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--border2); background: var(--surface3); color: var(--text);
  font: 600 .86rem/1.2 var(--font); letter-spacing: -0.005em; padding: 8px 14px; border-radius: var(--r-ctl);
  cursor: pointer; min-height: 38px; box-shadow: var(--lift);
  transition: background .2s, border-color .2s, transform .12s var(--ease), box-shadow .2s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn:hover { background: #2a3348; border-color: rgba(255,255,255,.2); }
.btn:active { transform: scale(.96); transition-duration: .06s; }
.btn-primary { background: var(--accent); color: var(--on-accent); border-color: transparent; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 18px rgba(167,139,250,.28); }
.btn-primary:hover { background: var(--accent-hi); border-color: transparent; }
.btn-ghost { background: transparent; box-shadow: none; border-color: var(--border2); }
.btn-ghost:hover { background: rgba(255,255,255,.06); }
.btn-accent { background: linear-gradient(135deg, rgba(167,139,250,.28), rgba(45,212,191,.2)); border-color: rgba(167,139,250,.5); }
.btn-danger { border-color: rgba(255,95,87,.6); color: #ffb4ae; }
.btn-oil { border-color: rgba(231,184,74,.6); color: #ffe2a0; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ── Segmented controls (pill-tabs) ─────────────────── */
.pill-tabs {
  position: relative; display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px;
  background: rgba(118,118,128,.20); border-radius: 12px; isolation: isolate;
}
.pill {
  position: relative; z-index: 1; border: 0; background: transparent; color: var(--text-2);
  font: 600 .85rem/1 var(--font); letter-spacing: -0.005em; padding: 0 14px; min-height: 32px; border-radius: 9px;
  cursor: pointer; white-space: nowrap; transition: color .25s var(--ease), transform .12s var(--ease);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.pill:hover { color: var(--text); }
.pill:active { transform: scale(.95); }
.pill.active { color: #fff; background: #3c4458; box-shadow: 0 1px 3px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); }
.pill:disabled { opacity: .35; cursor: not-allowed; }
/* with the shared sliding thumb (ui.js) the active segment is drawn by the thumb */
.pill-tabs.has-thumb .pill.active { background: transparent; box-shadow: none; }
.seg-thumb {
  position: absolute; left: 0; top: 0; z-index: 0; border-radius: 9px; pointer-events: none;
  background: #3c4458; box-shadow: 0 1px 3px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.09);
  transition: transform .42s var(--ease), width .42s var(--ease), height .42s var(--ease), background .3s, opacity .2s;
}
/* the mode switch is the page's primary choice: its thumb carries the accent */
#mode-tabs .seg-thumb { background: var(--accent); box-shadow: 0 2px 10px rgba(167,139,250,.35), inset 0 1px 0 rgba(255,255,255,.3); }
#mode-tabs .pill.active { color: var(--on-accent); }
#mode-tabs .pill { padding: 0 16px; min-height: 34px; font-size: .88rem; }

/* ── Command bar: floating glass ─────────────────────── */
.vm-command-probe { height: 1px; margin-top: -1px; }
.vm-command {
  position: sticky; top: 10px; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 8px; margin: 0 0 16px; border-radius: 18px;
  background: rgba(22,27,39,.74); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: box-shadow .3s var(--ease), background .3s;
}
.vm-command.stuck { background: rgba(18,23,34,.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 40px rgba(0,0,0,.45); }
/* while the bar floats, it is the page's chrome: the site logo steps aside instead of sitting on top of it */
body:has(.vm-command.stuck) .logo-fixed { opacity: 0; pointer-events: none; transition: opacity .25s; }
.vm-command-lab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
body:not(.vm-lab-on) .vm-slide-field, body:not(.vm-lab-on) .vm-view-strip, body:not(.vm-lab-on) .btn-look { display: none; }
.vm-field { position: relative; display: flex; align-items: center; min-width: 0; }
.vm-field-label { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font: 700 .66rem var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); pointer-events: none; }
.vm-slide-field select {
  -webkit-appearance: none; appearance: none; background: rgba(118,118,128,.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a9b2c6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--text); border: 0; border-radius: 12px; padding: 0 34px 0 56px; min-height: 38px; min-width: 250px;
  font: 600 .88rem var(--font); letter-spacing: -0.005em; cursor: pointer;
}
.vm-slide-field select:hover { background-color: rgba(118,118,128,.28); }
.btn-look { border-radius: 12px; }

/* legacy hooks still referenced by markup elsewhere */
.ctrl-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ctrl-label { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }

/* ── The lab stage: microscope | eyepiece on one backdrop ─────────── */
.vm-lab {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: stretch;
  border-radius: 26px; overflow: hidden; border: 1px solid var(--border);
  background: radial-gradient(90% 120% at 30% 0%, #1a2032 0%, #0e121b 60%, #0a0d14 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 30px 80px -30px rgba(0,0,0,.7);
}
.vm-scope { position: relative; min-height: 600px; border-right: 1px solid var(--border); }
#scope2d { display: block; width: 100%; height: 100%; min-height: 600px; touch-action: none; }
.vm3d-stage { position: absolute; inset: 0; }
.vm3d-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
.vm3d-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; flex-direction: column; color: var(--text-2); text-align: center; padding: 20px; }
.vm3d-note { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; gap: 10px; align-items: flex-start; background: rgba(18,23,34,.82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--border2); border-radius: 14px; padding: 10px 12px; font-size: .84rem; line-height: 1.45; z-index: 5; }
.vm3d-note-acts { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
.vm3d-note-x { background: none; border: 0; color: var(--text); font-size: 1.2rem; cursor: pointer; }
.vm3d-note-2d { min-height: 32px; padding: 0 12px; font-size: .8rem; }
/* glass chips floating on the stage */
.vm-scope-opts { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 4px 14px; flex-wrap: wrap; z-index: 4; padding: 7px 12px; border-radius: 14px;
  background: rgba(18,23,34,.6); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(255,255,255,.08); }
.vm-3d-label { position: absolute; left: 0; top: 0; will-change: transform; transform: translate(-50%, -100%); pointer-events: none; background: rgba(18,23,34,.92); border: 1px solid rgba(167,139,250,.45); color: var(--text); font: 600 11px var(--font); padding: 3px 8px; border-radius: 7px; white-space: nowrap; }
.vm-3d-tip { position: absolute; pointer-events: none; max-width: 260px; background: rgba(18,23,34,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--border2); border-radius: 12px; padding: 9px 11px; font-size: .8rem; line-height: 1.45; z-index: 6; box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.vm-3d-tip strong { display: block; color: var(--accent-hi); margin-bottom: 2px; }
.vm-3d-cam { position: absolute; right: 12px; top: 12px; display: flex; gap: 2px; z-index: 4; padding: 3px; border-radius: 12px; background: rgba(18,23,34,.6); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.08); }
.vm-3d-cam button { background: transparent; border: 0; color: var(--text-2); border-radius: 9px; padding: 6px 10px; font: 600 .76rem var(--font); cursor: pointer; transition: background .2s, color .2s; }
.vm-3d-cam button:hover { background: rgba(255,255,255,.08); color: var(--text); }

/* slide preparation (Stage panel): a reagent is part of the slide, so it lives next to the stage controls */
.vm-prep { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.vm-prep-row { align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--border); transition: background .2s, border-color .2s; }
.vm-prep-row input { margin-top: 1px; flex-shrink: 0; }
.vm-prep-row span { display: flex; flex-direction: column; gap: 2px; color: var(--text); font-weight: 600; }
.vm-prep-row small, .vm-prep-note { font-weight: 400; font-size: .74rem; line-height: 1.4; color: var(--text-dim); }
.vm-prep-row.on { background: rgba(52,211,153,.08); border-color: rgba(52,211,153,.35); }
.vm-prep-note { display: block; margin-top: 6px; }
#medium-pills { width: 100%; }
#medium-pills .pill { flex: 1; }
/* switches (every .vm-check is an on/off setting) */
.vm-check { display: inline-flex; align-items: center; gap: 9px; font-size: .84rem; color: var(--text-2); cursor: pointer; user-select: none; min-height: 30px; }
.vm-check input {
  -webkit-appearance: none; appearance: none; flex-shrink: 0; position: relative; width: 34px; height: 20px; border-radius: 999px; cursor: pointer;
  background: rgba(118,118,128,.32); transition: background .25s var(--ease); margin: 0;
}
.vm-check input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .3s var(--ease); }
.vm-check input:checked { background: var(--green); }
.vm-check input:checked::after { transform: translateX(14px); }
.vm-check:hover { color: var(--text); }

/* eyepiece column */
.vm-eye { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; padding: 26px 22px 20px; }
.vm-eye > * { width: 100%; }
.vm-eye-wrap {
  position: relative; width: min(100%, 540px) !important; aspect-ratio: 1 / 1; margin: 6px auto 0; border-radius: 50%; background: #000;
  /* the rim sits INSIDE the column padding, never past it */
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 0 9px #06080c, 0 0 0 10px rgba(255,255,255,.09), 0 28px 70px rgba(0,0,0,.65);
}
#eye-canvas { display: block; width: 100%; height: 100%; border-radius: 50%; touch-action: none; cursor: grab; }
#eye-canvas:active { cursor: grabbing; }
.vm-eye-hud { position: absolute; left: 50%; top: 5%; transform: translateX(-50%); display: flex; gap: 6px; pointer-events: none; }
.vm-eye-hud span { background: rgba(10,12,18,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #f1edff; font: 700 .74rem var(--mono); letter-spacing: .01em; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); }
.vm-eye-hud span:empty { display: none; }
.vm-eye-tip { position: absolute; z-index: 6; background: rgba(18,23,34,.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--border2); border-radius: 13px; padding: 9px 12px; font-size: .8rem; line-height: 1.45; box-shadow: 0 14px 34px rgba(0,0,0,.5); pointer-events: none; }
.vm-eye-tip strong { display: block; color: var(--accent-hi); margin-bottom: 3px; font-size: .86rem; }
.vm-eye-tip em { display: block; color: var(--gold); margin-top: 4px; font-style: normal; font-size: .76rem; }

/* coach: a glass banner that rises from the bottom of the field */
.vm-coach {
  position: absolute; left: 50%; bottom: 4%; width: min(80%, 420px); z-index: 7; display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 10px 9px 13px; border-radius: 15px; font-size: .8rem; line-height: 1.42; color: var(--text);
  background: rgba(18,23,34,.84); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 16px 40px rgba(0,0,0,.55);
  opacity: 0; transform: translate(-50%, 14px) scale(.97); pointer-events: none;
  transition: opacity .3s var(--ease), transform .45s var(--ease);
}
.vm-coach.show { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
.vm-coach::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.vm-coach.warn::before { background: var(--gold); } .vm-coach.bad::before { background: var(--red); } .vm-coach.ok::before { background: var(--green); }
.vm-coach-ico { font-size: 1rem; line-height: 1.35; }
.vm-coach-msg { flex: 1; }
.vm-coach-act { background: var(--accent); color: var(--on-accent); border: 0; border-radius: 9px; padding: 6px 11px; font: 700 .78rem var(--font); cursor: pointer; white-space: nowrap; align-self: center; transition: transform .12s var(--ease); }
.vm-coach-act:active { transform: scale(.95); }
.vm-coach-x { background: rgba(255,255,255,.08); border: 0; color: var(--text-2); width: 22px; height: 22px; border-radius: 50%; font-size: .95rem; line-height: 1; cursor: pointer; flex-shrink: 0; }

/* eyepiece tools: one floating toolbar */
.vm-tools {
  display: flex; flex-wrap: nowrap; gap: 2px; padding: 4px; width: auto !important; max-width: 100%;
  border-radius: 16px; background: rgba(118,118,128,.16); border: 1px solid rgba(255,255,255,.06);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;   /* one row, swipe if it does not fit */
}
.vm-tools::-webkit-scrollbar { display: none; }
.vm-tool { flex-shrink: 0; }
.vm-tool {
  display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 0; color: var(--text-2);
  border-radius: 12px; padding: 0 11px; min-height: 36px; font: 600 .8rem var(--font); letter-spacing: -0.005em; cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s, transform .12s var(--ease); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.vm-tool:hover { background: rgba(255,255,255,.07); color: var(--text); }
.vm-tool:active { transform: scale(.94); }
.vm-tool.active { background: var(--accent); color: var(--on-accent); box-shadow: 0 2px 10px rgba(167,139,250,.3); }
.vm-tool-auto { color: #8ee8dc; }
.vm-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.vm-chip { background: rgba(118,118,128,.2); border: 1px solid transparent; color: var(--text); border-radius: 999px; padding: 6px 12px; font: 600 .8rem var(--font); cursor: pointer; transition: background .2s, border-color .2s; }
.vm-chip b { color: var(--gold); margin-left: 4px; font-family: var(--mono); }
.vm-chip.active { border-color: var(--accent); background: var(--accent-lo); }
.vm-chip-clear { color: #ffa29b; }

/* immersive "look through the eyepiece" */
.vm-lab.immersive { position: fixed; inset: 0; z-index: 900; border-radius: 0; border: 0; background: radial-gradient(circle at 50% 50%, #0b0d12 0%, #000 70%); grid-template-columns: 1fr; padding: 14px; overflow: auto; animation: vm-iris-in .5s var(--ease); }
.vm-lab.immersive .vm-scope { display: none; }
.vm-lab.immersive .vm-eye-wrap { width: min(90vmin, 900px) !important; }
.vm-lab.immersive .vm-eye { justify-content: center; min-height: 100%; }
body:has(.vm-lab.immersive) .btn-look { position: fixed; top: 14px; right: 14px; z-index: 901; }
body:has(.vm-lab.immersive) .vm-command { z-index: 950; }
@keyframes vm-iris-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

/* ── Under the stage: reagents, readings, controls ──── */
.vm-reagents { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; justify-content: center; }
.vm-oil-done { font: 600 .82rem var(--font); color: #ffe2a0; padding: 7px 12px; border: 1px dashed rgba(231,184,74,.7); border-radius: 11px; }

/* live readings: tucked behind the Status button in the eyepiece's top-right corner (outside the circular view) */
.vm-status-btn {
  position: absolute; top: 0; right: 0; z-index: 7; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(18,23,34,.62); color: var(--text);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  font: 600 .78rem var(--font); cursor: pointer; transition: background .2s, border-color .2s, transform .12s var(--ease);
}
.vm-status-btn svg { width: 15px; height: 15px; }
.vm-status-btn:hover { background: rgba(30,36,52,.78); }
.vm-status-btn:active { transform: scale(.96); }
.vm-status-btn[aria-expanded="true"] { background: rgba(167,139,250,.22); border-color: rgba(167,139,250,.5); }
.vm-status-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vm-status-alert { display: none; position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #0b0e15; }
.vm-status-btn.alert .vm-status-alert { display: block; animation: vm-pulse 1.4s ease-in-out infinite; }
.vm-status-btn.alert { border-color: rgba(255,95,87,.6); }
@keyframes vm-pulse { 50% { transform: scale(1.35); opacity: .7; } }
.vm-status {
  position: absolute; top: 42px; right: 0; z-index: 7; width: min(360px, 100%); padding: 12px; border-radius: 20px;
  background: rgba(14,18,27,.78); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 20px 50px rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  transform-origin: top right; transition: opacity .18s ease, transform .28s cubic-bezier(.2,.9,.3,1);
}
.vm-status[hidden] { display: block; visibility: hidden; opacity: 0; transform: scale(.92) translateY(-6px); pointer-events: none; transition: opacity .15s ease, transform .2s ease, visibility 0s .2s; }
.vm-status-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 10px 4px; }
.vm-status-x { width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: var(--text-2); font-size: 1.05rem; line-height: 1; cursor: pointer; }
.vm-status-x:hover { background: rgba(255,255,255,.14); color: var(--text); }
.readout-badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vm-status .readout-badge { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); padding: 10px 12px; }
.readout-badge {
  display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03); transition: border-color .3s, background .3s; min-width: 0;
}
.rb-label { display: flex; align-items: center; gap: 7px; font: 600 .72rem var(--font); color: var(--text-dim); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.readout-badge strong { font: 700 1.05rem/1.1 var(--mono); color: var(--text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.readout-badge.danger { border-color: rgba(255,95,87,.6); background: rgba(255,95,87,.07); }
.readout-badge.danger strong { color: var(--red); }
.rb-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.vm-dock { display: grid; grid-template-columns: 1.15fr 1.25fr 1.4fr 1.3fr; gap: 10px; }
.vm-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.vm-panel-title { font: 700 .68rem var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim); }
.vm-panel .pill-tabs { align-self: flex-start; }
.vm-obj .pill { padding: 0 11px; }
.vm-obj .pill::after { content: ''; position: absolute; left: 30%; right: 30%; bottom: 3px; height: 2px; border-radius: 2px; opacity: .9; }
.vm-obj .obj-4::after { background: #ff5f57; } .vm-obj .obj-10::after { background: #ffd23f; } .vm-obj .obj-40::after { background: #4a9dff; } .vm-obj .obj-100::after { background: #f2f2f2; }

.vm-focus-row { display: flex; gap: 10px; align-items: stretch; }
.vm-focus-btns { display: flex; flex-direction: column; gap: 5px; align-items: center; }
.vm-mini { font: 700 .64rem var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.vm-fbtn { width: 46px; height: 38px; border-radius: 11px; border: 1px solid var(--border2); background: var(--surface3); color: var(--text); font-size: .9rem; cursor: pointer; box-shadow: var(--lift);
  transition: background .15s, transform .1s var(--ease); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.vm-fbtn:hover { background: #2a3348; }
.vm-fbtn:active { background: var(--accent); color: var(--on-accent); transform: scale(.94); }
.vm-fbtn.fine { width: 40px; font-size: .72rem; }
.vm-gauge-wrap { flex: 1; min-width: 60px; }
#focus-gauge { width: 100%; height: 100px; display: block; border-radius: 12px; border: 1px solid var(--border); }
.vm-focus-z { font: 600 .74rem var(--mono); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.vm-focus-z.sharp { color: var(--green); }

.slider-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; width: 100%; }
.sim-slider-label { font-size: .82rem; color: var(--text-2); }
.slider-row > .sim-slider, .slider-row > .vm-iris-track { grid-column: 1 / -1; grid-row: 2; }
.sim-slider-val { grid-column: 2; grid-row: 1; font: 700 .8rem var(--mono); color: var(--accent-hi); text-align: right; font-variant-numeric: tabular-nums; }
.sim-slider { width: 100%; -webkit-appearance: none; appearance: none; height: 28px; background: transparent; outline: none; cursor: pointer; }
.sim-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--accent) 0%, rgba(167,139,250,.45) 50%, rgba(118,118,128,.35) 100%); }
.sim-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4), 0 0 0 .5px rgba(0,0,0,.1); transition: transform .15s var(--ease); }
.sim-slider:active::-webkit-slider-thumb { transform: scale(1.12); }
.sim-slider::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(118,118,128,.35); }
.sim-slider::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--accent); }
.sim-slider::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.vm-iris-track { position: relative; display: flex; }
.vm-iris-marker { position: absolute; top: 4px; width: 2px; height: 20px; margin-left: -1px; background: var(--gold); border-radius: 2px; box-shadow: 0 0 6px rgba(245,200,66,.6); pointer-events: none; }

.vm-stage-row { display: flex; gap: 16px; align-items: center; }
.vm-pad { display: grid; grid-template-columns: repeat(3, 36px); grid-template-rows: repeat(3, 34px); gap: 4px; flex-shrink: 0; }
.vm-pad button { border: 1px solid var(--border2); background: var(--surface3); color: var(--text); border-radius: 10px; cursor: pointer; font-size: .74rem; box-shadow: var(--lift);
  transition: background .15s, transform .1s var(--ease); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.vm-pad button:hover { background: #2a3348; }
.vm-pad button:active { background: var(--accent); color: var(--on-accent); transform: scale(.92); }
.vm-pad [data-dir="u"] { grid-column: 2; grid-row: 1; } .vm-pad [data-dir="l"] { grid-column: 1; grid-row: 2; } .vm-pad [data-dir="r"] { grid-column: 3; grid-row: 2; } .vm-pad [data-dir="d"] { grid-column: 2; grid-row: 3; }
.vm-switches { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* auto-focus */
.vm-af-btn { margin-top: 2px; width: 100%; background: linear-gradient(135deg, rgba(167,139,250,.26), rgba(45,212,191,.18)); border-color: rgba(167,139,250,.45); }
.vm-af-btn.running { background: rgba(245,200,66,.14); border-color: var(--gold); color: #ffe7a6; animation: vm-af-pulse 1.4s ease-in-out infinite; }
@keyframes vm-af-pulse { 50% { box-shadow: 0 0 0 5px rgba(245,200,66,.14); } }

/* ── Cards: live optics, notebook, library ──────────── */
.vm-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 12px; margin-top: 12px; }
.vm-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 18px 20px; min-width: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.vm-card-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.vm-card-title { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.015em; }
.vm-card > .vm-card-title { margin-bottom: 10px; }
.vm-card-head .vm-card-title { margin: 0; }
.vm-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.vm-card-actions .btn { padding: 6px 11px; min-height: 32px; font-size: .78rem; }
.lp-eq-body .lp-eq { padding: 8px 0; border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden; font-size: .95rem; scrollbar-width: none; }
.lp-eq-body .lp-eq:last-child { border-bottom: 0; }
.vm-nb-empty { color: var(--text-dim); font-size: .86rem; line-height: 1.5; }
.vm-nb-scroll { overflow-x: auto; }
.vm-nb { width: 100%; border-collapse: collapse; font-size: .8rem; margin-top: 6px; }
.vm-nb th, .vm-nb td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); }
.vm-nb th { color: var(--text-dim); font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; }
.vm-nb .mono { font-family: var(--mono); color: var(--gold); }

.vm-library { margin-top: 12px; }
/* share bar (shared/share-bar.js) placed inside the lab flow: same rhythm and shape as the cards around it */
.share-bar.vm-share { margin: 12px 0 0; border-radius: var(--r-card); }
/* the chooser's copy only while choosing; once an experiment runs, the lab's own copy takes over */
#exp-chooser[hidden] ~ .vm-share-chooser { display: none; }
/* the library is a shelf you swipe through, not a wall */
.vm-shelf { position: relative; }
.vm-shelf-track.explore-cards {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, calc((100% - 36px) / 4)); grid-template-columns: none;
  gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 2px; padding: 2px 2px 8px; scrollbar-width: none; overscroll-behavior-x: contain;
}
.vm-shelf-track::-webkit-scrollbar { display: none; }
.vm-shelf-track .ex-card { scroll-snap-align: start; background: var(--surface2); }
.vm-shelf-btn {
  position: absolute; top: 50%; z-index: 2; width: 38px; height: 38px; margin-top: -24px; border-radius: 50%; border: 1px solid var(--border2);
  background: rgba(34,42,60,.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--text); font-size: 1.4rem; line-height: 1; cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.45); transition: opacity .25s, transform .15s var(--ease);
}
.vm-shelf-btn:active { transform: scale(.92); }
.vm-shelf-btn.prev { left: -12px; } .vm-shelf-btn.next { right: -12px; }
.vm-shelf-btn:disabled { opacity: 0; pointer-events: none; }
.vm-shelf-static .vm-shelf-btn { display: none; }

/* ── Modals: dimmed backdrop, sheet materialises ─────── */
.vm-modal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4,6,10,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: vm-fade .25s ease; }
.vm-modal-box { width: min(520px, 100%); background: rgba(26,32,46,.94); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); border: 1px solid rgba(255,255,255,.12); border-radius: 24px; padding: 24px 24px 20px; box-shadow: 0 40px 100px rgba(0,0,0,.65); animation: vm-sheet .45s var(--ease); }
@keyframes vm-fade { from { opacity: 0; } }
@keyframes vm-sheet { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.vm-modal-icon { font-size: 1.7rem; margin-bottom: 8px; }
.vm-modal-box h2 { font-size: 1.3rem; letter-spacing: -0.02em; margin-bottom: 10px; color: #f1edff; }
.vm-modal-box p { font-size: .9rem; line-height: 1.55; color: #c3cadb; margin-bottom: 10px; }
.vm-modal-note { border-left: 3px solid var(--gold); padding: 9px 12px; background: rgba(245,200,66,.07); border-radius: 0 10px 10px 0; color: #ead9a8 !important; }
.vm-modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }

/* ── Experiment mode ────────────────────────────────── */
.exp-banner { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; margin-bottom: 16px; border-radius: var(--r-card);
  background: linear-gradient(135deg, rgba(245,200,66,.10), rgba(167,139,250,.10) 60%, rgba(45,212,191,.06)); border: 1px solid rgba(245,200,66,.32); }
.exp-banner-icon { font-size: 2rem; line-height: 1; }
.exp-banner h2 { font-size: 1.2rem; letter-spacing: -0.015em; color: #fff1c9; margin-bottom: 6px; }
.exp-banner p { font-size: .9rem; line-height: 1.55; color: #c9cfdc; max-width: 80ch; }
.exp-banner p + p { margin-top: 6px; }
.exp-banner-note { color: var(--text-2) !important; font-size: .84rem !important; }
.exp-link { background: none; border: 0; padding: 0; color: var(--accent-hi); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.exp-run { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 12px 10px 16px; margin-bottom: 14px; border-radius: 16px; background: var(--surface); border: 1px solid rgba(245,200,66,.38); }
.exp-run-title { display: flex; align-items: center; gap: 8px; font-size: 1rem; letter-spacing: -0.01em; }
.exp-run-badge { font: 800 .62rem var(--font); letter-spacing: .09em; text-transform: uppercase; background: var(--gold); color: #2a2000; padding: 3px 8px; border-radius: 6px; }
.exp-run-meta { display: flex; gap: 14px; font-size: .84rem; color: var(--text-2); }
.exp-run-meta .mono { font-family: var(--mono); font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.exp-run-actions { margin-left: auto; display: flex; gap: 6px; }
.exp-run-actions .btn { min-height: 32px; padding: 5px 12px; font-size: .8rem; }
.ex-safety { font-size: .8rem !important; color: #ead9a8 !important; background: rgba(245,200,66,.07); border-radius: 10px; padding: 7px 10px; }
.mh-safety { font-size: .8rem; color: #ead9a8; margin: -2px 0 8px; }
.mh-done { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(61,220,132,.08); border: 1px solid rgba(61,220,132,.36); font-size: .86rem; line-height: 1.5; }
.mh-done-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.mh-opt:disabled, #mh-check:disabled, #mh-in:disabled { opacity: .7; cursor: default; }
/* aids locked in experiment mode: greyed, still pressable (they explain why) */
.vm-locked { opacity: .4; filter: grayscale(1); }
.vm-locked:hover { opacity: .58; }
.vm-locked.running { animation: none; }

/* mission HUD: a full-width stepper above the lab, so the method and the eyepiece are seen together */
.mission-hud { background: linear-gradient(140deg, rgba(167,139,250,.14), rgba(45,212,191,.06)); border: 1px solid rgba(167,139,250,.38); border-radius: 20px; padding: 16px 18px; margin-bottom: 14px; }
.mission-hud .mh-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.mission-hud .mh-steps li { background: rgba(0,0,0,.18); border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px 10px 42px; }
.mission-hud .mh-steps li::before { left: 12px; top: 10px; }
.mission-hud .mh-steps li.now { border-color: rgba(167,139,250,.6); background: rgba(167,139,250,.1); }
.mission-hud .mh-steps li.done { border-color: rgba(61,220,132,.3); }
.mission-hud .mh-q, .mission-hud .mh-done { max-width: 860px; }
/* once an experiment is running, the slim run bar replaces the explainer banner */
#sec-experiment:has(#exp-run:not([hidden])) .exp-banner { display: none; }
.mission-hud .mh-head strong { display: none; }   /* the run bar already names the experiment */
.mh-head { display: flex; align-items: center; gap: 8px; }
.mh-badge { font: 800 .62rem var(--font); letter-spacing: .09em; text-transform: uppercase; background: var(--accent); color: var(--on-accent); padding: 3px 8px; border-radius: 6px; }
.mh-goal { font-size: .85rem; color: var(--text-2); margin: 8px 0 10px; line-height: 1.5; }
.mh-steps { padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; counter-reset: s; }
.mh-steps li { counter-increment: s; font-size: .85rem; color: var(--text-dim); padding-left: 30px; position: relative; line-height: 1.45; transition: color .3s; }
.mh-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 21px; height: 21px; border-radius: 50%; border: 1.5px solid #3a4260; font: 700 .7rem var(--font); display: flex; align-items: center; justify-content: center; transition: all .35s var(--ease); }
.mh-steps li.now { color: var(--text); font-weight: 600; }
.mh-steps li.now::before { border-color: var(--accent); color: var(--accent-hi); box-shadow: 0 0 0 4px var(--accent-lo); }
.mh-steps li.done { color: #82d4a4; }
.mh-steps li.done::before { content: '✓'; background: var(--green); border-color: var(--green); color: #082414; }
.mh-q { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(167,139,250,.25); font-size: .87rem; line-height: 1.5; }
.mh-opts { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.mh-opt { justify-content: flex-start; text-align: left; }
.mh-opt.right, .opt.right { border-color: var(--green); background: rgba(61,220,132,.13); }
.mh-opt.wrong, .opt.wrong { border-color: var(--red); background: rgba(255,95,87,.1); }
.mh-num { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.mh-num input, .pq-input-row input { background: var(--bg); border: 1px solid var(--border2); color: var(--text); border-radius: 11px; padding: 8px 11px; font: 700 .95rem var(--mono); min-height: 40px; }
.mh-num input { width: 130px; }
.mh-num input:focus, .pq-input-row input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 4px var(--accent-lo); }
.mh-fb { margin-top: 10px; font-size: .85rem; line-height: 1.5; padding: 10px 12px; border-radius: 12px; }
.mh-fb.ok { background: rgba(61,220,132,.1); border: 1px solid rgba(61,220,132,.36); }
.mh-fb.no { background: rgba(255,95,87,.08); border: 1px solid rgba(255,95,87,.32); }

/* ── Quiz ───────────────────────────────────────────── */
#sec-quiz { max-width: 980px; margin: 0 auto; }
.quiz-kind { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 6px 0 18px; text-align: center; }
.quiz-kind .pill { font-size: .92rem; padding: 0 18px; min-height: 36px; }
.quiz-kind-note { font-size: .88rem; color: var(--text-2); line-height: 1.5; max-width: 62ch; }
.practice-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.practice-bar .vm-field { gap: 10px; }
.practice-bar .ctrl-label { margin-right: 2px; }
.practice-bar select { -webkit-appearance: none; appearance: none; background: rgba(118,118,128,.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a9b2c6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center; color: var(--text); border: 0; border-radius: 11px; padding: 0 32px 0 12px; font: 600 .86rem var(--font); min-height: 38px; cursor: pointer; }
.pbar-score { margin-left: auto; font: 700 .9rem var(--mono); color: var(--gold); background: rgba(245,200,66,.08); padding: 7px 12px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.practice-question { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.vm-q { display: flex; gap: 22px; align-items: flex-start; }
.vm-q-visual { flex: 0 0 min(320px, 40%); }
.vm-q-visual canvas { width: 100%; aspect-ratio: 1; display: block; border-radius: 50%; background: #000; box-shadow: 0 0 0 6px #06080c, 0 0 0 7px rgba(255,255,255,.08); }
.vm-q-visual #pq-scope, .vm-q-visual #qq-scope { border-radius: 16px; aspect-ratio: 520 / 640; box-shadow: none; background: radial-gradient(120% 90% at 50% 10%, #1b2133 0%, #0f131c 70%); }
.vm-q-body { flex: 1; min-width: 0; }
.pq-text { font-size: 1.06rem; line-height: 1.55; margin-bottom: 14px; letter-spacing: -0.005em; }
.pq-input-row { display: flex; gap: 10px; align-items: center; }
.pq-input-row input { width: 170px; }
.pq-unit { color: var(--text-2); font-weight: 600; }
.pq-mcq, .qq-options { display: flex; flex-direction: column; gap: 8px; }
.opt { justify-content: flex-start; text-align: left; min-height: 44px; padding: 10px 14px; line-height: 1.4; }
.opt.sel { border-color: var(--accent); background: var(--accent-lo); }
.feedback { margin-top: 14px; font-weight: 600; font-size: .92rem; line-height: 1.5; }
.feedback.ok { color: var(--green); } .feedback.no { color: #ff9f98; }
.solution { margin-top: 12px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 12px; font-size: .9rem; line-height: 1.55; }
.quiz-result { margin-top: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 22px; text-align: center; animation: vm-sheet .5s var(--ease); }
.qr-stars { font-size: 2.4rem; color: var(--gold); letter-spacing: 8px; }
.qr-stars span { color: #343b52; }

/* ── Concept & experiment cards ─────────────────────── */
.explore-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ex-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 9px; min-width: 0; transition: border-color .25s, transform .3s var(--ease); }
.ex-card:hover { border-color: var(--border2); }
.ex-card h3, .ex-card .ex-title { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.015em; color: #f1edff; }
.ex-card p { font-size: .87rem; line-height: 1.55; color: #c3cadb; }
.ex-card .btn { align-self: flex-start; margin-top: auto; }
.ex-formula { font-family: var(--mono); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; color: var(--gold); font-size: .84rem; line-height: 1.45; overflow-x: auto; }
.ex-note { font-size: .8rem !important; color: #a3b2c9 !important; border-left: 2px solid var(--accent); padding-left: 10px; }
.ex-mission { background: linear-gradient(165deg, rgba(167,139,250,.12), var(--surface) 50%); }
.ex-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.ex-meta span { font: 700 .64rem var(--font); text-transform: uppercase; letter-spacing: .07em; background: rgba(118,118,128,.2); color: var(--text-2); padding: 3px 8px; border-radius: 6px; }
.ex-slide { font-size: .79rem !important; color: var(--text-dim) !important; }
#exp-chooser { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

/* ── Auto-count panel ───────────────────────────────── */
.vm-ac { background: var(--surface); border: 1px solid rgba(45,212,191,.35); border-radius: 18px; padding: 12px 14px; font-size: .84rem; }
.ac-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.ac-head span { font: 600 .74rem var(--mono); color: var(--text-dim); }
.ac-table { width: 100%; border-collapse: collapse; }
.ac-table td { padding: 5px 6px; border-bottom: 1px solid var(--border); }
.ac-table td:nth-child(2), .ac-table td:nth-child(3) { text-align: right; width: 70px; }
.ac-table .mono { font-family: var(--mono); font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.ac-table .dim { color: var(--text-dim); }
.ac-total td { font-weight: 700; border-bottom: 0; }
.ac-sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; box-shadow: 0 0 0 2px rgba(255,255,255,.1); }
.ac-derived { margin-top: 8px; padding: 8px 10px; background: rgba(45,212,191,.08); border-radius: 10px; font-family: var(--mono); font-size: .8rem; }
.ac-derived span { font-family: var(--font); font-weight: 700; color: #9de9df; }
.ac-derived strong { color: var(--gold); }
.ac-compare { margin-top: 8px; line-height: 1.45; }
.ac-compare.dim, .vm-ac .dim { color: var(--text-dim); }
.ac-moved { color: var(--gold); margin-bottom: 6px; line-height: 1.4; }
.ac-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.ac-actions .btn { min-height: 32px; padding: 5px 11px; font-size: .78rem; }

/* ── Report builder ─────────────────────────────────── */
.vm-report-box { width: min(660px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.vm-rp-lede { font-size: .87rem !important; }
.vm-rp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 14px; }
.vm-rp-grid label { display: flex; flex-direction: column; gap: 5px; font-size: .76rem; font-weight: 700; color: var(--text-2); }
.vm-rp-grid label.wide { grid-column: 1 / -1; }
.vm-rp-grid input, .vm-rp-grid textarea { background: rgba(0,0,0,.25); border: 1px solid var(--border2); color: var(--text); border-radius: 11px; padding: 9px 11px; font: 400 .9rem var(--font); resize: vertical; transition: border-color .2s, box-shadow .2s; }
.vm-rp-grid input:focus, .vm-rp-grid textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 4px var(--accent-lo); }
.vm-rp-opt { font-weight: 400; color: var(--text-dim); }
.vm-rp-figs { border: 1px solid var(--border2); border-radius: 14px; padding: 10px 12px; margin-bottom: 12px; }
.vm-rp-figs legend { font-size: .76rem; font-weight: 700; color: var(--text-2); padding: 0 4px; }
#rp-figs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 190px; overflow-y: auto; }
#rp-figs .dim { color: var(--text-dim); font-size: .82rem; grid-column: 1 / -1; }
.vm-rp-fig { display: flex; align-items: center; gap: 8px; font-size: .76rem; color: #c4cbe0; cursor: pointer; }
.vm-rp-fig img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.vm-rp-fig input { accent-color: var(--accent); }
.vm-rp-checks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.vm-rp-status { min-height: 1.2em; font-size: .84rem; color: var(--gold); margin-top: 8px; }

/* context menu */
.ctx-menu { position: fixed; z-index: 1000; min-width: 200px; background: rgba(30,36,52,.9); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 5px; box-shadow: 0 18px 50px rgba(0,0,0,.55); animation: vm-sheet .25s var(--ease); transform-origin: top left; }
.ctx-item { display: block; width: 100%; padding: 8px 12px; border: none; border-radius: 9px; background: transparent; color: var(--text); font-size: .85rem; text-align: left; cursor: pointer; }
.ctx-item:hover { background: var(--accent); color: var(--on-accent); }

.vm-sources { font-size: .8rem !important; color: var(--text-dim) !important; }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 1180px) {
  .vm-dock { grid-template-columns: 1fr 1fr; }
  .vm-shelf-track.explore-cards { grid-auto-columns: minmax(260px, calc((100% - 24px) / 3)); }
}
@media (max-width: 1000px) {
  .vm-command-lab { justify-content: flex-start; }
  .vm-slide-field { flex: 1 1 240px; }
  .vm-slide-field select { width: 100%; min-width: 0; }
}
@media (max-width: 900px) {
  /* Small screens: eyepiece first, then what changes it, then the microscope itself. */
  #sec-simulate { display: flex; flex-direction: column; }
  .vm-lab:not(.immersive) { display: contents; }
  .mission-hud { order: 0; }
  .vm-eye { order: 1; padding: 6px 0 0; }
  .vm-reagents { order: 2; } .vm-dock { order: 4; }
  .vm-scope { order: 5; margin-top: 12px; border: 1px solid var(--border); border-radius: 22px; overflow: hidden; background: radial-gradient(90% 120% at 30% 0%, #1a2032 0%, #0e121b 70%); }
  .vm-two { order: 6; grid-template-columns: 1fr; } .vm-share { order: 7; } .vm-library { order: 8; }
  .vm-scope, #scope2d { min-height: 440px; }
  /* the command bar scrolls away on small screens: room for the specimen matters more */
  .vm-command { position: relative; top: auto; }
  .vm-shelf-track.explore-cards { grid-auto-columns: minmax(250px, 78%); }
  .vm-shelf-btn { display: none; }
}
@media (max-width: 768px) {
  #app { padding: 60px 16px 28px; }
  .vm-header { margin-bottom: 14px; }
  .vm-command { padding: 6px; border-radius: 16px; }
  #mode-tabs { display: flex; width: 100%; }
  #mode-tabs .pill { flex: 1; }
  .vm-command-lab { width: 100%; }
  .btn-look { flex: 1 1 auto; }
  .vm-eye-wrap { width: min(calc(100% - 22px), 540px) !important; }
  /* tools: one row you can swipe, never a ragged second line */
  .vm-tools { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; width: 100% !important; scrollbar-width: none; scroll-snap-type: x proximity; }
  .vm-tools::-webkit-scrollbar { display: none; }
  .vm-tool { flex-shrink: 0; scroll-snap-align: start; }
  /* coach: an iOS-style banner at the bottom of the screen, not a lid over the specimen */
  .vm-coach { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; z-index: 800; transform: translateY(24px) scale(.98); }
  .vm-coach.show { transform: none; }
  .vm-q { flex-direction: column; }
  .vm-q-visual { flex-basis: auto; width: min(100%, 320px); margin: 0 auto; }
  .exp-run-actions { margin-left: 0; }
}
@media (max-width: 560px) {
  .vm-dock { grid-template-columns: 1fr; }
  .vm-modal-actions .btn { flex: 1 1 100%; }
  .vm-rp-grid { grid-template-columns: 1fr; }
  .vm-scope, #scope2d { min-height: 400px; }
  .pill { padding: 0 11px; font-size: .82rem; }
  .vm-card { padding: 16px; }
  .exp-banner { flex-direction: column; gap: 8px; padding: 16px; }
  .pbar-score { margin-left: 0; }
}

/* "Hold ⌘ and scroll to focus": shown when a plain scroll passes over a canvas (which then lets the page scroll) */
.vm-wheel-hint {
  position: absolute; left: 50%; bottom: 14%; z-index: 9; max-width: 92%; padding: 7px 13px; border-radius: 999px;
  background: rgba(10,12,18,.8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.14);
  color: #f1edff; font: 600 .76rem var(--font); white-space: nowrap; text-align: center; pointer-events: none;
  opacity: 0; transform: translate(-50%, 6px); transition: opacity .2s ease, transform .3s var(--ease);
}
.vm-wheel-hint.show { opacity: 1; transform: translate(-50%, 0); }
.m-fold { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ══════════════════════════════════════════════════════════════════════════════
   PHONE EXPERIENCE (≤ 767 px). A layout of its own, not the desktop squeezed:
   • one lab screen: the view and its controls are on screen together, so a knob and its result are never a scroll apart
   • the view card swaps Eyepiece ⇄ Microscope; the other view rides along as a tap-to-swap picture-in-picture
   • the control dock becomes a deck pinned to the bottom of the screen, one thumb-sized panel at a time
   • coach messages drop in from the top like a notification
   Everything here is inside this query (plus hooks hidden on wider screens), so desktop and tablet never change.
   ══════════════════════════════════════════════════════════════════════════════ */
.lbl-m { display: none; }
.mh-prog { display: none; }
/* desktop: icon + label render as one text run, exactly as before the phone split */
.vm-tool .t-ico, .vm-tool .t-lbl, .vm-tool .lbl-d { display: contents; }
.vm-lab > .m-viewbar, .vm-dock > .m-deck-tabs, .vm-dock > .m-deck-grab { display: none; }

@media (max-width: 767px) {
  .lbl-d, .vm-tool .lbl-d { display: none; } .lbl-m { display: inline; }
  #app { padding: 54px 14px 28px; }
  .vm-header { margin: 4px 0 12px; }
  .vm-header h1 { font-size: clamp(1.6rem, 7.4vw, 2rem); letter-spacing: -0.025em; }
  .vm-header .subtitle { font-size: .9rem; margin-top: 4px; }

  /* command bar: mode | slide | units + 2D/3D, three clean rows */
  .vm-command { padding: 6px; gap: 6px; border-radius: 18px; margin-bottom: 12px; }
  .vm-command-lab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; width: 100%; }
  .vm-slide-field { grid-column: 1 / -1; }
  .vm-slide-field select { min-height: 42px; font-size: .92rem; }
  .vm-command-lab .unit-toggle, .vm-command-lab .vm-view-strip { display: flex; width: 100%; }
  .vm-command-lab .unit-toggle .pill, .vm-command-lab .vm-view-strip .pill { flex: 1; min-height: 34px; }
  body:not(.vm-lab-on) .vm-command-lab .unit-toggle { grid-column: 1 / -1; }
  .btn-look { display: none !important; }        /* the view switch below replaces it */
  #mode-tabs .pill { min-height: 38px; font-size: .9rem; }

  /* ── the view card ── */
  #sec-simulate { display: flex; flex-direction: column; }
  .vm-lab:not(.immersive) {
    display: block; position: relative; padding: 8px 8px 10px; border-radius: 26px; order: 1;
  }
  .vm-lab > .m-viewbar { display: flex; padding: 0 0 8px; }
  #m-view-pills { width: 100%; }
  #m-view-pills .pill { flex: 1; min-height: 36px; font-size: .86rem; }
  .vm-eye { padding: 2px 0 0; gap: 10px; }
  .vm-eye-wrap { width: calc(100% - 22px) !important; margin-top: 4px; }
  .vm-eye-hud { top: auto; bottom: 7%; }
  .vm-scope { border: 0; border-radius: 18px; min-height: 0; overflow: hidden; background: radial-gradient(90% 120% at 30% 0%, #1a2032 0%, #0e121b 70%); }
  #scope2d { min-height: 0; }
  .vm-lab.m-scope-main .vm-scope { height: min(122vw, 60vh); }
  .vm-scope-opts { left: 10px; right: 10px; bottom: 10px; justify-content: center; }

  /* picture-in-picture: the view that is not on the main screen */
  .vm-lab .m-pip {
    position: absolute !important; top: 54px; left: 10px; z-index: 8; width: 27% !important; max-width: 140px;
    padding: 0 !important; border-radius: 16px; overflow: hidden; cursor: pointer; background: #07090e;
    border: 1px solid rgba(255,255,255,.2); box-shadow: 0 14px 34px rgba(0,0,0,.6);
    transition: filter .15s ease;
  }
  /* press feedback without a transform: a transformed ancestor would capture the fixed coach banner inside it */
  .vm-lab .m-pip:active:not(:has(.vm-coach:active)) { filter: brightness(.8); }
  .vm-lab .m-pip *:not(.vm-coach):not(.vm-coach *) { pointer-events: none !important; }
  .vm-lab .m-pip .vm-coach.show, .vm-lab .m-pip .vm-coach.show * { pointer-events: auto !important; }
  .vm-lab .m-pip::after {
    content: '⇄'; position: absolute; right: 5px; bottom: 5px; width: 22px; height: 22px; border-radius: 50%; z-index: 9;
    display: flex; align-items: center; justify-content: center; font-size: .72rem; color: #fff;
    background: rgba(18,23,34,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.18);
  }
  .vm-scope.m-pip { aspect-ratio: 4 / 5; height: auto; }
  .vm-scope.m-pip .vm-scope-opts, .vm-scope.m-pip .vm-3d-cam, .vm-scope.m-pip .vm3d-note, .vm-scope.m-pip .vm-3d-label, .vm-scope.m-pip .vm-3d-tip { display: none !important; }
  .vm-eye.m-pip { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
  .vm-eye.m-pip > :not(.vm-eye-wrap) { display: none !important; }
  .vm-eye.m-pip .vm-eye-wrap { width: 88% !important; margin: 0; box-shadow: 0 0 0 3px #06080c, 0 0 0 4px rgba(255,255,255,.1); }
  .vm-eye.m-pip .vm-eye-hud, .vm-eye.m-pip .vm-status-btn, .vm-eye.m-pip .vm-status, .vm-eye.m-pip .vm-eye-tip { display: none !important; }

  /* eyepiece tools: an icon toolbar that fits the width, no sideways scrolling */
  .vm-tools { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); width: 100% !important; overflow: visible; padding: 4px; gap: 2px; border-radius: 18px; }
  .vm-tool { flex-direction: column; justify-content: center; gap: 3px; min-height: 50px; padding: 6px 0 5px; border-radius: 13px; font-size: .62rem; letter-spacing: 0; min-width: 0; }
  .vm-tool .t-ico { display: block; font-size: 1.12rem; line-height: 1; }
  .vm-tool .t-lbl { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

  /* coach: a notification that drops in from the top, clear of the deck */
  .vm-coach {
    position: fixed; left: 10px; right: 10px; top: max(10px, env(safe-area-inset-top)); bottom: auto; width: auto; z-index: 960;
    transform: translateY(-18px) scale(.98); border-radius: 18px; font-size: .84rem; padding: 11px 11px 11px 14px;
  }
  .vm-coach.show { transform: none; }

  /* experiment method: the current step only, with progress, so the specimen stays the hero */
  .mission-hud { order: 0; padding: 12px 14px; border-radius: 20px; margin-bottom: 10px; }
  .mission-hud .mh-head { display: flex; align-items: center; justify-content: space-between; }
  .mh-prog { display: inline; font: 700 .72rem var(--font); color: var(--accent-hi); letter-spacing: .02em; }
  .mission-hud .mh-goal { font-size: .82rem; margin: 6px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .mission-hud .mh-safety { display: none; }
  .mission-hud .mh-steps { display: block; margin: 0; }
  .mission-hud .mh-steps li:not(.now) { position: absolute; width: 1px; height: 1px; overflow: hidden; visibility: hidden; padding: 0; border: 0; }   /* hidden but still counted, so the badge shows the real step number */
  .mission-hud .mh-steps li.now { font-size: .88rem; }

  /* ── the control deck ── */
  .vm-reagents { order: 2; margin-top: 10px; }
  .vm-dock {
    order: 3; position: sticky; bottom: 0; z-index: 40; display: flex; flex-direction: column;
    margin: 12px -14px 0; padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0; border-top: 1px solid rgba(255,255,255,.1);
    background: rgba(14,18,27,.84); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
    box-shadow: 0 -18px 40px rgba(0,0,0,.45);
  }
  .vm-dock > .m-deck-grab { display: block; align-self: center; width: 64px; height: 18px; margin: -6px 0 4px; border: 0; background: transparent; cursor: pointer; position: relative; }
  .vm-dock > .m-deck-grab::before { content: ''; position: absolute; left: 50%; top: 6px; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: rgba(255,255,255,.28); }
  .vm-dock > .m-deck-tabs { display: flex; width: 100%; margin-bottom: 12px; }
  .vm-dock.m-collapsed > .m-deck-tabs { margin-bottom: 0; }
  .vm-dock.m-collapsed > .vm-panel { display: none !important; }
  .m-deck-tabs .pill { flex: 1; min-height: 34px; font-size: .84rem; }
  #eye-card { view-transition-name: vm-eye; } #scope-card { view-transition-name: vm-scope; }
  .vm3d-note { flex-direction: column; align-items: stretch; font-size: .8rem; }
  .vm3d-note-acts { justify-content: flex-end; }
  .vm-dock > .vm-panel { display: none; background: transparent; border: 0; box-shadow: none; padding: 0 2px; gap: 10px; }
  .vm-dock > .vm-panel.m-on { display: flex; animation: m-panel-in .22s var(--ease); }
  .vm-dock > .vm-panel > .vm-panel-title:first-child { display: none; }
  @keyframes m-panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

  /* Lens: four big lens buttons, then the eyepiece */
  .vm-dock .vm-obj, .vm-dock #eye-pills { display: flex; width: 100%; }
  .vm-dock .vm-obj .pill, .vm-dock #eye-pills .pill { flex: 1; min-height: 44px; font-size: .9rem; }
  /* Focus: thumb-sized knobs beside the depth gauge */
  .vm-dock > .vm-panel.vm-focus.m-on { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; }
  .vm-focus-row { grid-column: 1 / -1; gap: 10px; }
  .vm-focus-btns { gap: 4px; }
  .vm-fbtn, .vm-fbtn.fine { width: 52px; height: 40px; font-size: 1rem; border-radius: 13px; }
  .vm-gauge-wrap { min-height: 96px; }
  .vm-focus-z { font-size: .72rem; }
  .vm-af-btn { width: auto; min-height: 38px; margin: 0; padding: 0 14px; }
  /* Light */
  .vm-dock [data-deck="light"] .slider-row { padding: 4px 0; }
  /* Stage: bigger pad, switches in two columns, "On the slide" below */
  .vm-stage-row { justify-content: space-between; gap: 14px; }
  .vm-pad { grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(3, 42px); }
  .vm-pad button { font-size: .9rem; }
  .vm-switches { display: grid; grid-template-columns: 1fr; gap: 0; }
  .vm-dock > .vm-panel.m-on[data-deck="stage"] { max-height: 42vh; overflow-y: auto; overscroll-behavior: contain; }

  .vm-two { order: 5; grid-template-columns: 1fr; } .vm-share { order: 6; } .vm-library { order: 7; }
  /* Live optics folds on phones: a title row with a chevron; tap to open */
  .vm-live { position: relative; }
  .vm-live .m-fold { display: block; position: absolute; inset: 0 0 auto 0; height: 56px; border: 0; background: transparent; cursor: pointer; border-radius: inherit; }
  .vm-live .m-fold::after { content: ''; position: absolute; right: 20px; top: 22px; width: 9px; height: 9px; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(45deg); transition: transform .25s var(--ease); }
  .vm-live:not(.m-closed) .m-fold::after { transform: translateY(4px) rotate(-135deg); }
  .vm-live.m-closed { padding-bottom: 16px; }
  .vm-live.m-closed > .vm-card-title { margin-bottom: 0; }
  .vm-live.m-closed #lp-eq-body { display: none; }
  /* gestures: one finger scrolls the page over the canvases; the eyepiece Move tool uses two fingers (app.js) */
  #eye-canvas.coop { touch-action: pan-x pan-y; }
  #scope2d { touch-action: pan-y; }
  .vm-wheel-hint { white-space: normal; width: max-content; max-width: 86%; bottom: 18%; }
  /* concept library tabs: one swipeable row, never a ragged second line */
  #explore-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  #explore-tabs::-webkit-scrollbar { display: none; }
  #explore-tabs .pill { flex-shrink: 0; }

  /* quiz: full-width rows a thumb can hit, score as a badge beside the topic */
  #quiz-kind { display: flex; width: 100%; } #quiz-kind .pill { flex: 1; min-height: 38px; }
  .practice-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: center; }
  .practice-bar .vm-field { grid-column: 1 / 3; }
  .practice-bar .vm-field select { flex: 1; min-width: 0; width: 100%; }
  .practice-bar .pbar-score { grid-column: 3; grid-row: 1; justify-self: end; white-space: nowrap; font-size: .76rem; }
  .vm-q .vm-q-visual { width: min(100%, 250px); }
  .practice-bar .btn { min-height: 42px; padding: 0 8px; font-size: .84rem; }
  .pq-input-row input { flex: 1; min-width: 0; min-height: 44px; font-size: 1rem; }
}
@media (max-width: 767px) and (prefers-reduced-transparency: reduce) {
  .vm-dock { background: #121722; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .vm-dock > .vm-panel.m-on { animation: none; }
}

/* ── Accessibility preferences ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .vm-coach { transition: opacity .2s ease !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .vm-command, .vm-coach, .vm-modal-box, .ctx-menu, .vm-scope-opts, .vm-3d-cam, .vm-eye-tip, .vm-3d-tip, .vm3d-note, .vm-shelf-btn { background: #1a2030; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --border: rgba(255,255,255,.3); --border2: rgba(255,255,255,.45); --text-2: #d0d6e2; --text-dim: #aab3c5; }
  .pill-tabs { outline: 1px solid var(--border2); }
}

/* ── SEO article: facts, tables, figures, FAQ ─────────────── */
.seo-article .vm-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin: 16px 0 20px; }
.seo-article .vm-facts > div { background: var(--surface2); border: 1px solid var(--border); border-radius: 14px; padding: 11px 14px; }
.seo-article .vm-facts dt { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.seo-article .vm-facts dd { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--text); }
.seo-article .vm-table { width: 100%; border-collapse: collapse; margin: 10px 0 18px; font-size: .86rem; display: block; overflow-x: auto; border-radius: 12px; }
.seo-article .vm-table th, .seo-article .vm-table td { text-align: left; padding: 9px 11px; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.45; }
.seo-article .vm-table thead th { background: var(--surface2); color: var(--accent-hi); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.seo-article .vm-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.02); }
.seo-article .vm-table td:first-child { font-weight: 600; color: #f1edff; }
.seo-article .vm-fig { margin: 16px 0; }
.seo-article .vm-fig img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--border); background: #000; }
.seo-article .vm-fig figcaption { font-size: .8rem; color: var(--text-2); line-height: 1.45; margin-top: 8px; }
.seo-article .vm-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: 18px; align-items: start; }
.seo-article .vm-split .vm-fig-side { grid-column: 2; grid-row: 1; margin: 10px 0 0; }
.seo-article .vm-split .vm-table { grid-column: 1; grid-row: 1; }
.seo-article .vm-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 10px 0 20px; }
.seo-article .vm-gallery .vm-fig { margin: 0; }
.seo-article .vm-gallery-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.seo-article .vm-gallery-2 .vm-fig:first-child img { max-height: 520px; width: auto; max-width: 100%; margin: 0 auto; }
.seo-article .vm-faq h4 { font-size: .98rem; color: #f1edff; margin: 16px 0 4px; }
.seo-article .vm-faq p { margin: 0; }
.seo-article ol li, .seo-article ul li { margin-bottom: 5px; line-height: 1.55; }
.user-guide .ug-thumb { float: right; width: 130px; height: auto; margin: 2px 0 8px 14px; border-radius: 10px; border: 1px solid var(--border); background: #000; }
.user-guide .guide-content::after { content: ''; display: block; clear: both; }
@media (max-width: 900px) {
  .seo-article .vm-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-article .vm-split { grid-template-columns: 1fr; }
  .seo-article .vm-split .vm-fig-side { grid-column: 1; grid-row: auto; max-width: 300px; margin: 0 auto 6px; }
  .seo-article .vm-split .vm-table { grid-row: auto; }
}
@media (max-width: 500px) {
  .seo-article .vm-gallery, .seo-article .vm-gallery-2 { grid-template-columns: 1fr; }
  .user-guide .ug-thumb { width: 96px; }
}
#user-guide { margin-top: 28px; }
/* Long content below the lab is laid out and painted only when it nears the viewport (still in the DOM for
   crawlers, find-in-page and anchors). The intrinsic sizes keep the scrollbar steady. */
.seo-article { content-visibility: auto; contain-intrinsic-size: auto 7000px; }
#user-guide { content-visibility: auto; contain-intrinsic-size: auto 700px; }
.readout-badge, .vm-panel, .ex-card { contain: layout style; }
.vm-noscript { margin: 10px 0; padding: 12px 14px; border: 1px solid var(--gold); border-radius: 12px; color: #ead9a8; }

@media (prefers-reduced-motion: reduce) { .vm-status, .vm-status[hidden] { transition: opacity .15s ease, visibility 0s; transform: none; } .vm-status-btn.alert .vm-status-alert { animation: none; } }
@media (prefers-reduced-transparency: reduce) { .vm-status, .vm-status-btn { -webkit-backdrop-filter: none; backdrop-filter: none; background: #121722; } }