/* =====================================================================
   UNLV Confocal and Biological Imaging Core — design system (RC3)
   Direction: "optical bench". Editorial serif display over a precise sans,
   deep layered darks with fluorescence glows for imagery and teaching,
   warm paper and white cards for the practical sections. One accent: UNLV scarlet.
   ===================================================================== */
:root {
  --unlv-scarlet: #B10202; --unlv-scarlet-hover: #8E0202; --unlv-gray: #666666;   /* UNLV screen standards [S4] */

  /* dark set */
  --d-bg: #06080B; --d-bg-2: #0A0D12; --d-surface: rgba(255,255,255,0.035); --d-surface-2: rgba(255,255,255,0.06);
  --d-line: rgba(255,255,255,0.10); --d-line-strong: rgba(255,255,255,0.22);
  --d-text: #F4F5F7; --d-text-muted: #A4ABB5; --d-text-faint: #6E7682;
  /* light set */
  --l-bg: #F5F4F0; --l-card: #FFFFFF; --l-surface: #EEECE6; --l-line: #E2DFD7; --l-line-strong: #CFCBC0;
  --l-text: #141518; --l-text-muted: #595E67; --l-text-faint: #8A8F98;
  /* fluorescence pseudo-colors: imagery, renders and plots only */
  --ch-405: #5B8CFF; --ch-488: #3DE88A; --ch-561: #FF8A3D; --ch-640: #FF3DD8;
  /* manufacturer colors, used only for the three platform cards: ZEISS Indigo from brand.zeiss.com; Nikon yellow and Leica red from secondary sources [VERIFY] */
  --brand-nikon: #FFDE00; --brand-zeiss: #0F2DB3; --brand-leica: #E2001A;
  /* review markers */
  --verify-bg: #F5C84B; --verify-text: #1A1400; --vendor-bg: #9CC5FF; --vendor-text: #0B2A4A;

  --font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-text: "Geist", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step--1: 0.9rem; --step-0: 1.0625rem; --step-1: 1.25rem; --step-2: 1.6rem; --step-3: 2.1rem; --step-4: 2.9rem;
  --display-hero: clamp(3.2rem, 5.3vw, 5.6rem); --display-section: clamp(2.3rem, 3.8vw, 3.6rem); --display-sub: clamp(1.7rem, 2.4vw, 2.3rem);
  --measure: 62ch;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 136px;
  --page-max: 1320px; --gutter: 40px;
  --r-s: 8px; --r-m: 14px; --r-l: 22px; --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(20,21,24,0.04), 0 8px 24px -12px rgba(20,21,24,0.14);
  --shadow-card-hover: 0 1px 2px rgba(20,21,24,0.05), 0 18px 40px -18px rgba(20,21,24,0.22);
  --ease: cubic-bezier(.2,.7,.2,1);
}
.theme-dark  { --bg: var(--d-bg); --card: var(--d-surface); --surface: var(--d-surface); --surface-2: var(--d-surface-2); --line: var(--d-line); --line-strong: var(--d-line-strong); --text: var(--d-text); --muted: var(--d-text-muted); --faint: var(--d-text-faint); --link: var(--d-text); --focus: #8FB3FF; }
.theme-light { --bg: var(--l-bg); --card: var(--l-card); --surface: var(--l-surface); --surface-2: #E6E3DB; --line: var(--l-line); --line-strong: var(--l-line-strong); --text: var(--l-text); --muted: var(--l-text-muted); --faint: var(--l-text-faint); --link: var(--unlv-scarlet); --focus: #1F5BD6; }
.theme-dark, .theme-light { background: var(--bg); color: var(--text); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; font-family: var(--font-text); font-size: var(--step-0); line-height: 1.6; background: var(--d-bg); color: var(--d-text); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg, canvas { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; }
h1, h2 { font-family: var(--font-display); }
h2 { font-size: var(--display-section); text-wrap: balance; }
h3 { font-family: var(--font-display); font-size: var(--display-sub); }
h4 { font-family: var(--font-text); font-size: var(--step-0); font-weight: 600; letter-spacing: 0; }
.eyebrow { font-family: var(--font-text); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
p { margin: 0; max-width: var(--measure); }
p + p { margin-top: var(--s-4); }
a { color: var(--link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: color .2s var(--ease); }
a:hover { text-decoration-thickness: 1.5px; }
:focus-visible { outline: 2.5px solid var(--focus, #8FB3FF); outline-offset: 3px; border-radius: 4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--s-4); top: var(--s-4); z-index: 100; background: #fff; color: #000; padding: var(--s-2) var(--s-4); }
.muted { color: var(--muted); } .small { font-size: var(--step--1); } .measure { max-width: var(--measure); }
.lead { font-size: var(--step-1); line-height: 1.5; color: var(--muted); }
code, kbd { font-family: var(--font-mono); font-size: 0.88em; }
.section-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); align-items: end; }
.section-head p { color: var(--muted); font-size: var(--step-1); line-height: 1.5; max-width: 46ch; }
.section-head .eyebrow { display: block; margin-bottom: var(--s-4); }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; vertical-align: top; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
th { font-weight: 600; }
thead th { font-size: var(--step--1); color: var(--muted); font-weight: 600; letter-spacing: 0.02em; border-bottom: 1px solid var(--line-strong); }
caption { text-align: left; caption-side: top; font-weight: 600; padding: 0 0 var(--s-3); }
.table-wrap { overflow-x: auto; }

/* scroll reveal: opt-in, respects reduced motion */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* review markers (review build only) */
mark.verify, mark.vendor, .ph { font-family: var(--font-text); font-size: 0.74em; font-weight: 600; line-height: 1.3; padding: 0.1em 0.45em; border-radius: 4px; white-space: normal; vertical-align: 0.05em; }
mark.verify { background: var(--verify-bg); color: var(--verify-text); }
mark.vendor { background: var(--vendor-bg); color: var(--vendor-text); }
.ph { background: transparent; color: inherit; border: 1px dashed currentColor; opacity: 0.7; }
.review-banner { background: #15110A; color: #F5C84B; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; padding: var(--s-2) var(--gutter); text-align: center; border-bottom: 1px solid rgba(245,200,75,0.25); }

/* ---------- buttons and controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 48px; padding: 0 var(--s-5); font-family: var(--font-text); font-size: var(--step-0); font-weight: 600; border-radius: var(--r-pill); text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: transform .25s var(--ease), background .2s, border-color .2s, box-shadow .25s var(--ease); white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--unlv-scarlet); color: #fff; box-shadow: 0 8px 24px -10px rgba(177,2,2,0.6); }
.btn-primary:hover { background: var(--unlv-scarlet-hover); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--text); }
.theme-dark .btn-secondary { background: rgba(255,255,255,0.03); backdrop-filter: blur(8px); }
.btn-small { min-height: 40px; padding: 0 var(--s-4); font-size: var(--step--1); }
.field { display: grid; gap: var(--s-2); }
.field label, .field .label { font-weight: 600; font-size: var(--step--1); color: var(--text); }
.field .hint { font-size: 0.82rem; color: var(--faint); line-height: 1.45; }
.field select, .field input[type="number"] { font: inherit; font-size: var(--step--1); color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: var(--s-2) var(--s-3); min-height: 42px; }
.field select:focus-visible, .field input:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.range-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; }
.range-row output { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; font-size: var(--step--1); min-width: 5ch; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent; margin: 0; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: var(--line-strong); border-radius: 2px; }
input[type="range"]::-moz-range-track { height: 3px; background: var(--line-strong); border-radius: 2px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -8.5px; border-radius: 50%; background: var(--text); border: 3px solid var(--bg); box-shadow: 0 0 0 1.5px var(--text), 0 4px 10px rgba(0,0,0,0.3); transition: transform .15s var(--ease); }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--text); border: 3px solid var(--bg); box-shadow: 0 0 0 1.5px var(--text); }
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.1); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2.5px solid var(--focus); outline-offset: 3px; }
input[type="range"]:focus-visible::-moz-range-thumb { outline: 2.5px solid var(--focus); outline-offset: 3px; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); }
.seg label { padding: var(--s-2) var(--s-4); font-size: var(--step--1); font-weight: 600; cursor: pointer; color: var(--muted); position: relative; border-radius: var(--r-pill); transition: background .2s, color .2s; }
.seg label:has(input:checked), .seg label.is-checked { background: var(--text); color: var(--bg); }
.seg label:has(input:focus-visible), .seg label:focus-within { outline: 2.5px solid var(--focus); outline-offset: 1px; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(6,8,11,0.72); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--d-line); }
.site-header .wrap { display: flex; align-items: center; gap: var(--s-6); min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 44px; }
.sig-unlv { font-family: var(--font-text); font-weight: 800; letter-spacing: 0.1em; font-size: 0.86rem; color: var(--unlv-scarlet); text-decoration: none; padding-right: var(--s-3); border-right: 1px solid var(--d-line-strong); line-height: 1; }
.sig-unlv:hover { color: #E03030; }
.signature { color: var(--d-text); text-decoration: none; font-family: var(--font-display); font-size: 1.35rem; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
.signature:hover { color: #fff; }
.brand .ph { font-family: var(--font-text); font-size: 0.7rem; font-weight: 600; padding: 0.35em 0.6em; }
.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-2); }
.site-nav a { color: var(--d-text-muted); text-decoration: none; font-weight: 500; font-size: var(--step--1); padding: var(--s-2) var(--s-3); border-radius: var(--r-pill); transition: color .2s, background .2s; white-space: nowrap; }
.site-nav a:hover { color: var(--d-text); background: rgba(255,255,255,0.06); }
.site-nav a[aria-current] { color: var(--d-text); background: rgba(255,255,255,0.08); }
.site-header .btn { min-height: 42px; padding: 0 var(--s-5); font-size: var(--step--1); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: var(--s-9) 0 var(--s-9); isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1; pointer-events: none; background:
  radial-gradient(60% 50% at 78% 40%, rgba(61,232,138,0.10), transparent 60%),
  radial-gradient(50% 45% at 95% 80%, rgba(255,61,216,0.08), transparent 60%),
  radial-gradient(45% 40% at 10% 20%, rgba(91,140,255,0.10), transparent 60%); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: var(--s-8); align-items: center; }
.hero .eyebrow { display: block; margin-bottom: var(--s-5); color: var(--d-text-muted); }
.hero h1 { font-size: var(--display-hero); line-height: 0.98; letter-spacing: -0.02em; text-wrap: balance; max-width: 13ch; }
.hero h1 em { font-style: italic; }
.hero .lede { margin-top: var(--s-6); font-size: var(--step-1); line-height: 1.5; color: var(--d-text-muted); max-width: 40ch; }
.hero .actions { margin-top: var(--s-7); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero .trust { margin: var(--s-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.hero .trust > div { padding: var(--s-4) var(--s-4); border: 1px solid var(--d-line); border-radius: var(--r-m); background: rgba(255,255,255,0.03); }
.hero .trust dd { margin: 0; }
.hero .trust strong { display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; line-height: 1.05; margin-bottom: var(--s-1); }
.hero .trust span { color: var(--d-text-muted); font-size: 0.82rem; line-height: 1.4; display: block; }
.hero-figure { margin: 0; position: relative; }
.raster { position: relative; aspect-ratio: 4 / 3; background: #000; overflow: hidden; border-radius: var(--r-l); box-shadow: 0 40px 80px -30px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.08) inset; }
.raster::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.55) 100%); }
.hero-image { position: absolute; inset: 0; }
.hero-image canvas, .hero-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-badge { position: absolute; left: var(--s-4); top: var(--s-4); z-index: 2; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.04em; color: var(--d-text); background: rgba(6,8,11,0.6); backdrop-filter: blur(8px); padding: 0.4em 0.7em; border: 1px solid var(--d-line); border-radius: var(--r-pill); }
.scalebar { position: absolute; right: var(--s-5); bottom: var(--s-5); z-index: 2; color: #fff; font-family: var(--font-mono); font-size: 0.7rem; text-align: center; }
.scalebar::before { content: ""; display: block; height: 2px; width: 100%; background: #fff; margin-bottom: 5px; }
.scanline { display: none; }
.hero-status { position: absolute; left: var(--s-4); top: calc(var(--s-4) + 34px); z-index: 2; font-family: var(--font-mono); font-size: 0.68rem; color: var(--d-text-muted); background: rgba(6,8,11,0.55); padding: 0.35em 0.7em; border-radius: var(--r-pill); pointer-events: none; min-height: 1.2em; }
@keyframes raster-reveal { to { clip-path: inset(0 0 0 0); } }
@keyframes scanline { 0% { top: 0; opacity: 1; } 94% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.hero-figure figcaption { margin-top: var(--s-4); font-size: 0.82rem; line-height: 1.5; color: var(--d-text-faint); max-width: none; }

/* ---------- platforms (dark) ---------- */
.platforms { padding: var(--s-9) 0 var(--s-10); border-top: 1px solid var(--d-line); position: relative; }
.platforms .intro { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: end; gap: var(--s-7); }
.platforms .intro p { color: var(--d-text-muted); font-size: var(--step-1); max-width: 46ch; }
.platform-list { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.platform-list li { position: relative; padding: var(--s-6); border: 1px solid var(--d-line); border-radius: var(--r-l); background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); display: flex; flex-direction: column; gap: var(--s-4); min-height: 300px; overflow: hidden; transition: border-color .3s var(--ease), transform .3s var(--ease); }
.platform-list li:hover { border-color: var(--d-line-strong); transform: translateY(-3px); }
.platform-list li::before { content: ""; position: absolute; inset: auto -30% -40% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; filter: blur(50px); opacity: 0.35; pointer-events: none; }
.platform-list li:nth-child(1)::before { background: var(--brand-nikon); opacity: 0.28; } .platform-list li:nth-child(2)::before { background: var(--brand-zeiss); opacity: 0.6; } .platform-list li:nth-child(3)::before { background: var(--brand-leica); opacity: 0.4; }
.platform-list li::after { content: ""; position: absolute; left: var(--s-6); right: var(--s-6); top: 0; height: 3px; border-radius: 0 0 3px 3px; }
.platform-list li:nth-child(1)::after { background: var(--brand-nikon); } .platform-list li:nth-child(2)::after { background: var(--brand-zeiss); } .platform-list li:nth-child(3)::after { background: var(--brand-leica); }
.platform-list .eyebrow { color: var(--d-text-faint); }
.platform-list h3 { font-size: 1.9rem; }
.platform-list p { color: var(--d-text-muted); font-size: var(--step--1); }
.platform-list a { margin-top: auto; font-weight: 600; font-size: var(--step--1); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.platform-list a::after { content: "→"; transition: transform .25s var(--ease); } .platform-list a:hover::after { transform: translateX(4px); }
.platforms .guide-link { margin-top: var(--s-7); color: var(--d-text-muted); }

/* ---------- start a project (light) ---------- */
.start { padding: var(--s-10) 0 var(--s-9); }
.start .head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); align-items: end; }
.start .head p { color: var(--l-text-muted); font-size: var(--step-1); max-width: 44ch; }
.steps { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); counter-reset: step; position: relative; }
.steps li { counter-increment: step; position: relative; padding: var(--s-6) var(--s-5) var(--s-6); background: var(--l-card); border: 1px solid var(--l-line); border-radius: var(--r-l); box-shadow: var(--shadow-card); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.steps li:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.steps li::before { content: "0" counter(step); display: inline-block; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em; color: var(--l-text-muted); padding: 0.3em 0.7em; border: 1px solid var(--l-line-strong); border-radius: var(--r-pill); margin-bottom: var(--s-5); }
.steps h3 { font-family: var(--font-text); font-size: var(--step-1); font-weight: 600; margin-bottom: var(--s-3); letter-spacing: -0.01em; }
.steps p { color: var(--l-text-muted); font-size: var(--step--1); }
.steps li:first-child { background: var(--l-text); color: #fff; border-color: var(--l-text); }
.steps li:first-child p { color: #C9CDD3; } .steps li:first-child::before { color: #fff; border-color: rgba(255,255,255,0.35); }
.steps li:first-child a { color: #fff; font-weight: 600; } .steps li:first-child :focus-visible { outline-color: #9CC1FF; }
.steps a { overflow-wrap: anywhere; }
.rules { margin-top: var(--s-8); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-7); padding-top: var(--s-7); border-top: 1px solid var(--l-line); }
.rules h3 { font-size: 1.7rem; }
.rules ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); }
.rules li { max-width: var(--measure); padding-left: 1.4em; position: relative; }
.rules li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 7px; height: 7px; border-radius: 50%; background: var(--unlv-scarlet); }

/* ---------- instruments (light) ---------- */
.instruments { padding: var(--s-9) 0 var(--s-10); }
.instrument { margin-top: var(--s-8); background: var(--l-card); border: 1px solid var(--l-line); border-radius: var(--r-l); box-shadow: var(--shadow-card); overflow: hidden; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.instrument > div:first-child { padding: var(--s-7); }
.instrument .table-wrap { padding: var(--s-7); background: var(--l-bg); border-left: 1px solid var(--l-line); }
.instrument .eyebrow { display: block; margin-bottom: var(--s-3); }
.instrument h3 { font-size: 2.4rem; }
.instrument .tagline { margin-top: var(--s-4); font-size: var(--step-1); line-height: 1.5; color: var(--l-text-muted); }
.instrument .fit { margin-top: var(--s-6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.instrument .fit h4 { margin-bottom: var(--s-3); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--l-text-muted); }
.instrument .fit ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); font-size: var(--step--1); line-height: 1.5; }
.instrument .fit li { padding-left: 1.6em; position: relative; }
.instrument .fit li::before { position: absolute; left: 0; top: 0.1em; font-weight: 700; font-size: 0.9em; }
.instrument .fit .best li::before { content: "✓"; color: #15803D; }
.instrument .fit .not li::before { content: "–"; color: var(--l-text-faint); }
.instrument .spec th { width: 36%; color: var(--l-text-muted); font-weight: 600; }
.instrument .spec td, .instrument .spec th { font-size: var(--step--1); padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--l-line); }
.instrument .spec caption { font-family: var(--font-text); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--l-text-muted); padding-bottom: var(--s-4); }
.instrument .links { margin-top: var(--s-6); display: flex; gap: var(--s-5); flex-wrap: wrap; font-size: var(--step--1); font-weight: 600; }

/* dichotomic key */
.key { margin-top: var(--s-9); padding: var(--s-8); background: var(--l-text); color: #F4F5F7; border-radius: var(--r-l); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); position: relative; overflow: hidden; }
.key::before { content: ""; position: absolute; inset: auto auto -40% -10%; width: 50%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(91,140,255,0.25), transparent 65%); pointer-events: none; }
.key .eyebrow { color: #A4ABB5; display: block; margin-bottom: var(--s-3); }
.key h3 { font-size: 2.3rem; }
.key .intro { margin-top: var(--s-4); color: #A4ABB5; }
.key fieldset { border: 0; margin: var(--s-6) 0 0; padding: 0; }
.key legend { font-family: var(--font-text); font-weight: 600; font-size: var(--step-1); padding: 0; margin-bottom: var(--s-3); }
.key .q-num { color: #A4ABB5; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; display: block; margin-bottom: 4px; }
.key .options { display: grid; gap: var(--s-2); }
.key .option { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-3); align-items: start; padding: var(--s-3) var(--s-4); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--r-m); cursor: pointer; transition: background .2s, border-color .2s; }
.key .option:hover { background: rgba(255,255,255,0.08); }
.key .option:has(input:checked), .key .option.is-checked { border-color: #fff; background: rgba(255,255,255,0.1); }
.key .option:has(input:focus-visible), .key .option:focus-within { outline: 2.5px solid #8FB3FF; outline-offset: 2px; }
.key .option input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--unlv-scarlet); }
.key .option span small { display: block; color: #A4ABB5; font-size: 0.82rem; }
.key .actions { margin-top: var(--s-6); display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center; }
.key .actions .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.3); }
.key .progress { font-size: var(--step--1); color: #A4ABB5; font-family: var(--font-mono); }
.key-result { background: var(--l-card); color: var(--l-text); border-radius: var(--r-m); padding: var(--s-6); align-self: start; position: sticky; top: 100px; }
.key-result h4 { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--l-text-muted); }
.key-result .rec { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--l-line); }
.key-result .rec strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; line-height: 1.1; }
.key-result .rec span.why { display: block; color: var(--l-text-muted); margin-top: var(--s-3); font-size: var(--step--1); line-height: 1.5; }
.key-result .empty { color: var(--l-text-muted); margin-top: var(--s-4); }
.key-result .bar { height: 5px; background: var(--l-surface); margin-top: var(--s-3); overflow: hidden; border-radius: 3px; }
.key-result .bar i { display: block; height: 100%; background: var(--unlv-scarlet); border-radius: 3px; transition: width .5s var(--ease); }
.key-result .note { margin-top: var(--s-5); font-size: 0.82rem; color: var(--l-text-muted); line-height: 1.5; }
.key-result a { font-weight: 600; }

/* ---------- teaching (dark) ---------- */
.learn { padding: var(--s-9) 0 var(--s-10); position: relative; }
.learn::before { content: ""; position: absolute; inset: 0 0 auto; height: 900px; z-index: 0; pointer-events: none; background: radial-gradient(55% 40% at 85% 0%, rgba(61,232,138,0.08), transparent 60%), radial-gradient(40% 30% at 5% 10%, rgba(91,140,255,0.08), transparent 60%); }
.learn .wrap { position: relative; z-index: 1; }
.learn .section-head p { color: var(--d-text-muted); }
.learn-body { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: var(--s-8); margin-top: var(--s-8); align-items: start; }
.learn-toc { position: sticky; top: 100px; margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; border-left: 1px solid var(--d-line); }
.learn-toc a { color: var(--d-text-muted); text-decoration: none; font-size: 0.85rem; font-weight: 500; display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent; transition: color .2s, border-color .2s; line-height: 1.35; }
.learn-toc a:hover, .learn-toc a.is-active { color: var(--d-text); border-left-color: var(--d-text); }
.learn-main { min-width: 0; }
.topic { padding-top: var(--s-8); margin-top: var(--s-8); border-top: 1px solid var(--d-line); }
.topic:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.topic .eyebrow { display: block; margin-bottom: var(--s-3); color: var(--d-text-faint); font-family: var(--font-mono); letter-spacing: 0.08em; }
.topic h3 { font-size: clamp(2rem, 3vw, 2.8rem); letter-spacing: -0.015em; max-width: 30ch; }
.topic .cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-8); align-items: start; margin-top: var(--s-6); }
.topic .cols.cols-stack { grid-template-columns: 1fr; }
.topic .cols.cols-stack > div:first-child { max-width: 74ch; }
.topic .cols > div > p { color: var(--d-text-muted); }
.topic .cols > div > p strong, .topic .cols > div > p em { color: var(--d-text); }
.topic figure { margin: 0; }
.topic figcaption { margin-top: var(--s-3); font-size: 0.85rem; line-height: 1.5; color: var(--d-text-faint); }
.diagram { background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border: 1px solid var(--d-line); border-radius: var(--r-l); padding: var(--s-4); }
.diagram svg { width: 100%; height: auto; }
.formula { font-family: var(--font-text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--s-4) var(--s-5); margin-top: var(--s-4); font-size: var(--step--1); }
.formula var { font-style: italic; font-family: var(--font-display); font-size: 1.1em; }
.formula .where { display: block; margin-top: var(--s-3); font-size: 0.82rem; line-height: 1.5; color: var(--muted); }
.formula .name { display: block; font-weight: 600; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-2); }
.sources-note { margin-top: var(--s-4); font-size: 0.85rem; color: var(--d-text-faint); }
sup.ref a { color: inherit; text-decoration: none; font-weight: 600; font-size: 0.72em; opacity: 0.75; } sup.ref a:hover { opacity: 1; text-decoration: underline; }
.references { margin-top: var(--s-6); padding-left: 1.6em; display: grid; gap: var(--s-3); color: var(--d-text-muted); font-size: var(--step--1); } .references li { max-width: 80ch; }

/* interactive module panel */
.mod { margin-top: var(--s-7); background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025)); border: 1px solid var(--d-line); border-radius: var(--r-l); padding: var(--s-6); display: grid; grid-template-columns: minmax(270px, 4fr) minmax(0, 8fr); gap: var(--s-7); box-shadow: 0 30px 60px -40px rgba(0,0,0,0.8); }
.mod-controls { display: grid; gap: var(--s-5); align-content: start; }
.mod-controls .primary { padding: var(--s-4); border: 1px solid var(--d-line); border-radius: var(--r-m); background: rgba(0,0,0,0.25); }
.mod-controls .primary label { font-size: var(--step-0); }
.mod-controls .primary output { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 500; }
.mod-controls .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.mod-plots { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.plot { background: #000; border: 1px solid var(--d-line); border-radius: var(--r-m); position: relative; overflow: hidden; display: grid; }
.plot canvas { width: 100%; height: auto; }
.plot .plot-title { display: block; padding: 10px 96px 8px 14px; font-size: 0.78rem; font-weight: 500; color: var(--d-text-muted); line-height: 1.35; border-bottom: 1px solid var(--d-line); background: rgba(255,255,255,0.03); }
.plot .plot-tag { position: absolute; right: var(--s-3); top: 9px; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--d-text-faint); border: 1px solid var(--d-line); border-radius: var(--r-pill); padding: 0.2em 0.6em; pointer-events: none; background: rgba(0,0,0,0.5); }
.plots-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.readouts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin: 0; }
.readouts > div { display: grid; gap: var(--s-1); padding: var(--s-4); border: 1px solid var(--d-line); border-radius: var(--r-m); background: rgba(0,0,0,0.25); align-content: start; }
.readouts dt { font-size: 0.78rem; color: var(--d-text-muted); font-weight: 500; line-height: 1.35; }
.readouts dd { margin: 0; font-family: var(--font-mono); font-size: 1.45rem; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.15; letter-spacing: -0.01em; }
.readouts dd small { display: block; font-family: var(--font-text); font-size: 0.74rem; font-weight: 400; color: var(--d-text-faint); margin-top: var(--s-2); line-height: 1.4; letter-spacing: 0; }
.mod-formulas { grid-column: 1 / -1; padding-top: var(--s-5); border-top: 1px solid var(--d-line); }
.mod-formulas h4 { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--d-text-muted); }
.mod-formulas .fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-4); }
.mod-formulas .formula { margin-top: 0; }
.model-note { grid-column: 1 / -1; font-size: 0.85rem; line-height: 1.55; color: var(--d-text-faint); border-top: 1px dashed var(--d-line); padding-top: var(--s-4); }
.model-note strong { color: var(--d-text-muted); }
.pinhole-schematic { background: #000; border: 1px solid var(--d-line); border-radius: var(--r-m); overflow: hidden; }
.pinhole-schematic svg { width: 100%; height: auto; }
.status-pill { display: inline-block; font-weight: 600; padding: 0.15em 0.6em; border: 1.5px solid currentColor; border-radius: var(--r-pill); font-size: var(--step--1); }

/* ---------- services (light) ---------- */
.services { padding: var(--s-9) 0 var(--s-10); }
.service-grid { margin-top: var(--s-8); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.service-grid > div { padding: var(--s-6); background: var(--l-card); border: 1px solid var(--l-line); border-radius: var(--r-l); box-shadow: var(--shadow-card); }
.service-grid h3 { font-family: var(--font-text); font-size: var(--step-1); font-weight: 600; margin-bottom: var(--s-3); letter-spacing: -0.01em; }
.service-grid p { color: var(--l-text-muted); font-size: var(--step--1); }
.pricing { margin-top: var(--s-9); padding: var(--s-7); background: var(--l-card); border: 1px solid var(--l-line); border-radius: var(--r-l); box-shadow: var(--shadow-card); }
.pricing .pricing-head { display: flex; justify-content: space-between; align-items: end; gap: var(--s-6); flex-wrap: wrap; }
.pricing .pricing-head p { color: var(--l-text-muted); max-width: 56ch; margin-top: var(--s-3); }
.pricing h3 { font-size: 2rem; }
.pricing .meta { font-size: 0.82rem; color: var(--l-text-faint); font-family: var(--font-mono); }
.pricing table { margin-top: var(--s-6); }
.pricing td.rate { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pricing tbody tr:hover { background: var(--l-bg); }
.pricing .tbp { font-size: 0.74rem; font-weight: 600; border: 1px dashed currentColor; border-radius: 4px; padding: 0.1em 0.45em; opacity: 0.7; white-space: nowrap; }
.pricing-status { margin-top: var(--s-4); font-size: var(--step--1); color: var(--l-text-muted); }
.pricing-status.error { color: var(--unlv-scarlet); font-weight: 600; }
.pricing .notes { margin-top: var(--s-5); padding-left: 1.2em; color: var(--l-text-muted); font-size: var(--step--1); display: grid; gap: var(--s-2); }
.policies { margin-top: var(--s-9); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-7); padding-top: var(--s-7); border-top: 1px solid var(--l-line); }
.policies h3 { font-size: 1.7rem; }
.policies ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; counter-reset: pol; }
.policies li { counter-increment: pol; padding: var(--s-4) 0 var(--s-4) 3em; border-bottom: 1px solid var(--l-line); position: relative; max-width: var(--measure); }
.policies li::before { content: "0" counter(pol); position: absolute; left: 0; top: var(--s-4); font-family: var(--font-mono); font-size: 0.8rem; color: var(--l-text-faint); }

/* ---------- support, people, ack (light) ---------- */
.support { padding: var(--s-9) 0; background: var(--l-surface); }
.support-grid { margin-top: var(--s-7); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.support-grid > div { padding: var(--s-6); background: var(--l-card); border: 1px solid var(--l-line); border-radius: var(--r-l); box-shadow: var(--shadow-card); }
.support-grid h3 { font-family: var(--font-text); font-size: var(--step-1); font-weight: 600; margin-bottom: var(--s-3); }
.support-grid p { color: var(--l-text-muted); font-size: var(--step--1); }
.people { padding: var(--s-9) 0; }
.people-grid { margin-top: var(--s-7); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.person { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-7); align-items: start; padding: var(--s-7); background: var(--l-card); border: 1px solid var(--l-line); border-radius: var(--r-l); box-shadow: var(--shadow-card); }
.person-body { min-width: 0; }
.person-body h3 { font-size: 2.2rem; }
.person-body p { font-size: 1rem; line-height: 1.7; color: var(--l-text-muted); max-width: 72ch; margin-top: var(--s-4); }
.contact { margin: var(--s-6) 0 0; padding-top: var(--s-5); border-top: 1px solid var(--l-line); display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-2) var(--s-6); font-size: var(--step--1); }
.contact dt { color: var(--l-text-faint); font-weight: 600; }
.contact dd { margin: 0; color: var(--l-text); overflow-wrap: anywhere; }
.contact a { color: var(--l-text); }
.nowrap { white-space: nowrap; }
.contact-note { margin-top: var(--s-7); padding-top: var(--s-7); border-top: 1px solid var(--l-line); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-7); }
.contact-note h3 { font-size: 1.7rem; }
.contact-note p { color: var(--l-text-muted); max-width: var(--measure); }
.contact-note p + p { margin-top: var(--s-4); }
.portrait { width: 200px; aspect-ratio: 4 / 5; border-radius: var(--r-m); background: linear-gradient(160deg, #E6E3DB, #F5F4F0); border: 1px solid var(--l-line); display: grid; place-items: center; text-align: center; font-size: 0.72rem; color: var(--l-text-faint); padding: var(--s-2); }
img.portrait { object-fit: cover; padding: 0; display: block; }
.person .role { color: var(--unlv-scarlet); margin: var(--s-1) 0 var(--s-4); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.person p { font-size: var(--step--1); color: var(--l-text-muted); }
.ack { padding: var(--s-9) 0 var(--s-10); border-top: 1px solid var(--l-line); }
.ack .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
.ack .wrap > div > p { margin-top: var(--s-4); color: var(--l-text-muted); }
.ack-box { border-radius: var(--r-l); padding: var(--s-7); background: var(--l-text); color: #fff; }
.ack-box blockquote { margin: 0; font-family: var(--font-display); font-size: 1.9rem; line-height: 1.25; }
.ack-box .row { margin-top: var(--s-6); display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.ack-box .status { color: #A4ABB5; font-size: var(--step--1); min-height: 1.5em; }
.ack .notes { margin-top: var(--s-6); display: grid; gap: var(--s-4); color: var(--l-text-muted); font-size: var(--step--1); }

/* ---------- footer (dark) ---------- */
.site-footer { padding: var(--s-9) 0 var(--s-7); border-top: 1px solid var(--d-line); position: relative; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; inset: auto -10% -60% auto; width: 50%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(177,2,2,0.18), transparent 65%); pointer-events: none; }
.site-footer .cols { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 2.5fr) minmax(0, 2fr); gap: var(--s-6); position: relative; }
.site-footer a[href^="mailto:"] { white-space: nowrap; }
.site-footer h2 { font-size: 2rem; max-width: 14ch; }
.site-footer h3 { font-family: var(--font-text); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--d-text-faint); margin-bottom: var(--s-4); }
.site-footer p, .site-footer li { color: var(--d-text-muted); font-size: var(--step--1); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.site-footer a { color: var(--d-text-muted); text-decoration: none; } .site-footer a:hover { color: var(--d-text); }
.site-footer .legal { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--d-line); font-size: 0.8rem; color: var(--d-text-faint); display: flex; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; max-width: none; }
.site-footer .legal .credit { max-width: 60ch; }

/* ---------- responsive (desktop-first; a separate mobile page exists) ---------- */
@media (max-width: 1100px) {
  .steps, .support-grid, .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mod { grid-template-columns: 1fr; }
  .instrument, .key, .topic .cols, .section-head, .platforms .intro, .start .head { grid-template-columns: 1fr; }
  .instrument .table-wrap { border-left: 0; border-top: 1px solid var(--l-line); }
  .learn-body { grid-template-columns: 1fr; } .learn-toc { position: static; border-left: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .key-result { position: static; }
  .topic .cols.cols-stack > div:first-child { columns: 1; }
}
@media (max-width: 860px) {
  :root { --gutter: 20px; }
  .site-header { position: static; }
  .site-header .wrap { flex-wrap: wrap; gap: var(--s-3); padding-top: var(--s-3); padding-bottom: var(--s-3); }
  .site-nav { margin-left: 0; order: 3; width: 100%; } .site-nav ul { gap: var(--s-2); flex-wrap: wrap; }
  .hero { padding: var(--s-7) 0 var(--s-8); }
  .hero .wrap, .ack .wrap, .rules, .people-grid, .policies, .plots-2, .mod-formulas .fgrid, .instrument .fit { grid-template-columns: 1fr; }
  .hero .trust, .platform-list, .steps, .support-grid, .service-grid, .site-footer .cols, .learn-toc, .readouts { grid-template-columns: 1fr; }
  .person { grid-template-columns: 1fr; padding: var(--s-5); }
  .portrait { width: 160px; }
  .contact-note { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
@media print { .site-header, .scanline, .skip, .review-banner { display: none; } .theme-dark { background: #fff; color: #000; } }