:root {
  --ink: #102534;
  --muted: #587080;
  --paper: #f5f8fa;
  --card: #ffffff;
  --line: #d7e2e8;
  --brand: #147d80;
  --brand-dark: #0e5e62;
  --mass: #7a4ac7;
  --ir: #d97822;
  --nmr: #2172b8;
  --identify: #21885c;
  --danger: #bb3b3b;
  --good: #1d7a4d;
  --warning: #a35e0a;
  --shadow: 0 12px 32px rgba(24, 56, 74, 0.10);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}
button, input, select { font: inherit; }
a { color: inherit; }

.skip-link {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 1000;
  padding: 10px 14px;
  background: var(--ink);
  color: white;
  border-radius: 8px;
}
.skip-link:focus { top: 12px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, #147d80, #32a9a3);
  display: grid;
  place-items: center;
  color: white;
  box-shadow: 0 6px 16px rgba(20,125,128,.24);
}
.brand small { display: block; color: var(--muted); font-weight: 600; line-height: 1; }
.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.site-nav a {
  text-decoration: none;
  padding: 8px 11px;
  border-radius: 10px;
  color: #264553;
  font-weight: 700;
  font-size: .92rem;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { background: #e7f2f2; color: var(--brand-dark); }
.nav-toggle { display: none; margin-left: auto; border: 1px solid var(--line); background: white; border-radius: 10px; padding: 8px 12px; }

main { max-width: 1180px; margin: 0 auto; padding: 28px 20px 72px; }
.hero {
  background: linear-gradient(135deg, #0e5e62 0%, #147d80 55%, #2b9b93 100%);
  color: white;
  border-radius: 26px;
  padding: clamp(28px, 5vw, 56px);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}
.hero::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -80px;
  top: -100px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
}
.hero h1 { font-size: clamp(2.2rem, 5vw, 4.7rem); line-height: 1.02; margin: 0 0 18px; max-width: 850px; letter-spacing: -.04em; }
.hero p { font-size: clamp(1.05rem, 2vw, 1.32rem); max-width: 780px; margin: 0 0 24px; color: #eaffff; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.page-hero {
  border-left: 8px solid var(--page-accent, var(--brand));
  background: white;
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}
.page-hero h1 { margin: 0 0 8px; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.08; }
.page-hero p { margin: 0; max-width: 850px; color: var(--muted); font-size: 1.1rem; }
.page-kicker { color: var(--page-accent, var(--brand)); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 11px;
  padding: 11px 16px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible, .term:focus-visible, .option:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; }
.btn-primary { background: var(--brand); color: white; box-shadow: 0 8px 18px rgba(20,125,128,.22); }
.btn-secondary { background: white; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost { background: rgba(255,255,255,.12); color: white; border: 1px solid rgba(255,255,255,.35); }
.btn-small { padding: 8px 11px; font-size: .9rem; }

.section { margin-top: 28px; }
.section-title { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.section h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.section-intro { color: var(--muted); max-width: 850px; }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(24,56,74,.06);
  padding: 20px;
}
.card h3 { margin: 0 0 8px; }
.card p:last-child { margin-bottom: 0; }
.module-card { position: relative; overflow: hidden; min-height: 260px; display: flex; flex-direction: column; }
.module-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--accent); }
.module-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, white); color: var(--accent); font-size: 1.5rem; font-weight: 900; }
.module-card p { color: var(--muted); }
.module-card .btn { margin-top: auto; align-self: flex-start; background: var(--accent); color: white; }

.flow { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; counter-reset: step; }
.flow-step { background: white; border: 1px solid var(--line); border-radius: 14px; padding: 14px; position: relative; }
.flow-step::before { counter-increment: step; content: counter(step); display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: white; font-weight: 900; margin-bottom: 8px; }
.flow-step strong { display: block; }
.flow-step span { color: var(--muted); font-size: .9rem; }

.term {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0 2px;
  margin: 0;
  color: var(--brand-dark);
  font-weight: 800;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;
}
.note, .warning, .success {
  border-left: 5px solid;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 14px 0;
}
.note { background: #eef7fb; border-color: #3d88b2; }
.warning { background: #fff6e8; border-color: #d88b22; }
.success { background: #edf9f2; border-color: #2d9463; }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tab-btn { border: 1px solid var(--line); background: white; border-radius: 10px; padding: 9px 13px; font-weight: 800; cursor: pointer; }
.tab-btn[aria-selected="true"] { background: var(--page-accent, var(--brand)); color: white; border-color: transparent; }
.tab-panel[hidden] { display: none; }

.lab-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(310px, .8fr); gap: 18px; align-items: start; }
.diagram-panel, .spectrum-panel { background: white; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: 0 8px 24px rgba(24,56,74,.06); }
.diagram-panel h3, .spectrum-panel h3 { margin: 0 0 10px; }
.diagram-wrap { min-height: 300px; display: grid; place-items: center; background: linear-gradient(180deg,#fbfdfe,#eef5f7); border: 1px solid #dce8ed; border-radius: 14px; overflow: hidden; }
.diagram-wrap svg { width: 100%; height: auto; max-height: 390px; }
.controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.controls label { font-weight: 800; }
.controls select { border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: white; }
.status-box { background: #f2f6f8; border-radius: 12px; padding: 12px; min-height: 72px; }
.status-box strong { display: block; }

.molecule-svg .atom { fill: #fff; stroke: #173846; stroke-width: 2.2; }
.molecule-svg .atom-o { fill: #fff2f0; stroke: #c74538; }
.molecule-svg .atom-br { fill: #fff0e6; stroke: #9b4d18; }
.molecule-svg .bond { stroke: #173846; stroke-width: 4; stroke-linecap: round; }
.molecule-svg text { fill: #173846; font-weight: 800; font-size: 18px; text-anchor: middle; dominant-baseline: middle; }
.molecule-svg .part { transition: opacity .2s ease, filter .2s ease; }
.molecule-svg .part.dim { opacity: .18; }
.molecule-svg .part.active { filter: drop-shadow(0 0 7px #ffc857); }
.molecule-svg .part.active .atom, .molecule-svg .part.active .bond { stroke: #f0a800; stroke-width: 6; }
.molecule-svg .part.active .atom { fill: #fff8d9; }

.mass-instrument .electron { opacity: 0; }
.mass-instrument.running .electron { animation: electron-path 1.25s ease forwards; }
.mass-instrument .ion-dot { opacity: 0; }
.mass-instrument.running .ion-dot { animation: ion-path 2.2s .75s ease-in-out forwards; }
.mass-instrument .detector-flash { opacity: 0; }
.mass-instrument.running .detector-flash { animation: flash .5s 2.6s ease; }
@keyframes electron-path { 0%{opacity:0;transform:translateX(0)} 15%{opacity:1} 100%{opacity:1;transform:translateX(195px)} }
@keyframes ion-path { 0%{opacity:0;transform:translate(0,0)} 10%{opacity:1} 55%{transform:translate(170px,0)} 100%{opacity:1;transform:translate(280px,-92px)} }
@keyframes flash { 0%,100%{opacity:0} 50%{opacity:1} }

.spectrum-svg { width: 100%; min-height: 260px; }
.axis { stroke: #284854; stroke-width: 2; }
.gridline { stroke: #dce5e9; stroke-width: 1; }
.peak-line { stroke: var(--page-accent, var(--brand)); stroke-width: 5; cursor: pointer; transition: stroke-width .15s ease, filter .15s ease; }
.peak-line:hover, .peak-line.active { stroke-width: 8; filter: drop-shadow(0 0 4px rgba(255,193,7,.9)); }
.peak-hit { fill: transparent; cursor: pointer; }
.axis-label { font-size: 12px; fill: #45616d; }
.peak-label { font-size: 11px; font-weight: 800; fill: #203e4b; }

.fragment-list, .band-list, .signal-list { display: grid; gap: 8px; margin-top: 12px; }
.fragment-button, .band-button, .signal-button {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  background: white;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
}
.fragment-button:hover, .fragment-button.active, .band-button:hover, .band-button.active, .signal-button:hover, .signal-button.active { border-color: var(--page-accent, var(--brand)); background: color-mix(in srgb, var(--page-accent, var(--brand)) 8%, white); }
.fragment-button strong, .band-button strong, .signal-button strong { display: block; }
.fragment-button small, .band-button small, .signal-button small { color: var(--muted); }

.ir-scan { padding: 12px; border-radius: 12px; background: #f2f6f8; }
.ir-scan input { width: 100%; }
.scan-labels { display: flex; justify-content: space-between; color: var(--muted); font-size: .82rem; }
.ir-beam { stroke: #e15c29; stroke-width: 5; stroke-dasharray: 8 6; animation: beam 1s linear infinite; }
@keyframes beam { to { stroke-dashoffset: -28; } }
.vibration-target { transform-box: fill-box; transform-origin: center; }
.vibration-target.stretching { animation: stretch .45s ease-in-out infinite alternate; }
.vibration-target.bending { animation: bend .55s ease-in-out infinite alternate; }
@keyframes stretch { from{transform:scaleX(.92)} to{transform:scaleX(1.08)} }
@keyframes bend { from{transform:rotate(-4deg)} to{transform:rotate(4deg)} }
.absorbing { filter: drop-shadow(0 0 9px #ffb24a); }

.nmr-nucleus { transform-box: fill-box; transform-origin: center; }
.nmr-machine.align .nmr-nucleus:nth-of-type(odd) { transform: rotate(0deg); }
.nmr-machine.align .nmr-nucleus:nth-of-type(even) { transform: rotate(180deg); }
.nmr-machine.pulse .nmr-nucleus { animation: spin-pulse .45s linear infinite; }
.nmr-machine.relax .nmr-nucleus { animation: relax-spin 1.1s ease-out forwards; }
@keyframes spin-pulse { to { transform: rotate(360deg); } }
@keyframes relax-spin { from{transform:rotate(160deg)} to{transform:rotate(0deg)} }
.fid-path { stroke-dasharray: 650; stroke-dashoffset: 650; }
.nmr-machine.relax .fid-path { animation: draw-fid 1.5s .2s ease forwards; }
@keyframes draw-fid { to { stroke-dashoffset: 0; } }
.environment-chip { display: inline-flex; align-items: center; gap: 7px; margin: 4px 6px 4px 0; padding: 6px 9px; border-radius: 999px; background: #edf3f7; font-weight: 800; font-size: .88rem; }
.environment-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--chip); }
.integration-bar { height: 8px; border-radius: 999px; background: var(--page-accent, var(--brand)); opacity: .75; }

.quiz-set { display: grid; gap: 16px; }
.quiz-question { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: white; }
.quiz-question h3 { font-size: 1.05rem; margin: 0 0 10px; }
.options { display: grid; gap: 8px; }
.option { text-align: left; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: white; cursor: pointer; }
.option:hover { background: #f4f8fa; }
.option.correct { background: #e9f8ef; border-color: #2a8959; }
.option.incorrect { background: #fff0f0; border-color: #c14a4a; }
.option:disabled { cursor: default; color: inherit; }
.feedback { margin-top: 10px; display: none; border-radius: 10px; padding: 10px 12px; }
.feedback.show { display: block; }
.feedback.good { background: #e9f8ef; color: #155f3a; }
.feedback.bad { background: #fff0f0; color: #8c2828; }
.score-strip { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: white; border: 1px solid var(--line); border-radius: 12px; }
.score-strip progress { flex: 1; accent-color: var(--brand); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; background: white; }
th, td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: #eef4f6; font-size: .9rem; }
tr:last-child td { border-bottom: 0; }

.case-selector { display: flex; gap: 8px; flex-wrap: wrap; }
.case-btn { border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: white; font-weight: 800; cursor: pointer; }
.case-btn.active { color: white; background: var(--identify); border-color: var(--identify); }
.case-evidence { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.evidence-tile { background: #f6faf8; border: 1px solid #d9e9e0; border-radius: 12px; padding: 14px; }
.evidence-tile strong { display: block; color: #175c3f; }
.stepper { counter-reset: identify-step; display: grid; gap: 14px; }
.identify-step { border-left: 5px solid var(--identify); background: white; border-radius: 12px; padding: 16px; box-shadow: 0 5px 18px rgba(24,56,74,.05); }
.identify-step::before { counter-increment: identify-step; content: "Step " counter(identify-step); color: var(--identify); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; }
.reveal { border: 1px solid var(--line); background: #f8fbfc; border-radius: 10px; padding: 10px 12px; }
.reveal summary { cursor: pointer; font-weight: 800; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(8,27,37,.62); z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-backdrop.open { display: flex; }
.modal { background: white; width: min(620px, 100%); border-radius: 18px; box-shadow: 0 24px 80px rgba(0,0,0,.25); padding: 22px; position: relative; max-height: 85vh; overflow: auto; }
.modal-close { position: absolute; right: 14px; top: 14px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: white; cursor: pointer; font-weight: 900; }
.modal h2 { margin: 0 44px 8px 0; }
.modal .example { background: #f1f6f8; border-radius: 10px; padding: 12px; }

footer { border-top: 1px solid var(--line); background: white; }
.footer-inner { max-width: 1180px; margin: 0 auto; padding: 24px 20px; display: flex; gap: 20px; justify-content: space-between; color: var(--muted); font-size: .9rem; flex-wrap: wrap; }

@media (max-width: 900px) {
  .grid-4, .flow { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .grid-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .lab-grid { grid-template-columns: 1fr; }
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; position: absolute; top: 60px; left: 12px; right: 12px; padding: 10px; background: white; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
  .site-nav.open { display: flex; }
}
@media (max-width: 640px) {
  main { padding: 18px 12px 56px; }
  .header-inner { padding: 9px 12px; }
  .grid-2, .grid-3, .grid-4, .flow, .case-evidence { grid-template-columns: 1fr; }
  .hero { border-radius: 18px; padding: 28px 22px; }
  .page-hero { padding: 22px; }
  .diagram-wrap { min-height: 240px; }
  .brand small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.ir-outgoing { transition: opacity .2s ease; }
.ir-molecule-svg.absorbing-state .ir-outgoing { opacity: .22; }
.molecule-svg .beam-label { font-size: 11px; font-weight: 800; fill: #31515d; }
.molecule-svg .beam-caption { font-size: 10px; }


.step-chip-row { display:flex; flex-wrap:wrap; gap:8px; margin: 0 0 12px; }
.step-chip { border:1px solid var(--line); background:white; border-radius:999px; padding:8px 12px; font-weight:800; cursor:pointer; }
.step-chip.active { background: var(--page-accent, var(--brand)); color:white; border-color: transparent; }
.mass-instrument text { fill:#1d3d4a; }
.mass-instrument .neutral-molecule, .mass-instrument .electron, .mass-instrument .frag, .mass-instrument .accel-ion, .mass-instrument .track-ion, .mass-instrument .ti-label, .mass-instrument .detector-bar, .mass-instrument .detector-flash { opacity:0; }
.mass-instrument .track { opacity:.55; }
.mass-instrument[data-step="vaporise"] .neutral-molecule { opacity:1; animation: neutralDrift 1.9s ease-in-out infinite alternate; }
.mass-instrument[data-step="ionise"] .neutral-molecule { opacity:.25; }
.mass-instrument[data-step="ionise"] .electron { opacity:1; animation: massElectron 1s linear infinite; }
.mass-instrument[data-step="ionise"] .frag { opacity:1; animation: fragPulse 1.15s ease-in-out infinite alternate; }
.mass-instrument[data-step="accelerate"] .accel-ion { opacity:1; animation: accelSweep 1.3s linear infinite; }
.mass-instrument[data-step="separate"] .track-ion, .mass-instrument[data-step="separate"] .ti-label { opacity:1; }
.mass-instrument[data-step="separate"] .ti-light { animation: ionCurveLight 1.9s linear infinite; }
.mass-instrument[data-step="separate"] .ti-medium { animation: ionCurveMedium 1.9s linear infinite; }
.mass-instrument[data-step="separate"] .ti-heavy { animation: ionCurveHeavy 1.9s linear infinite; }
.mass-instrument[data-step="detect"] .track-ion, .mass-instrument[data-step="detect"] .ti-label { opacity:1; }
.mass-instrument[data-step="detect"] .detector-flash { opacity:0; animation: flash .7s ease-in-out infinite; }
.mass-instrument[data-step="detect"] .detector-bar { opacity:1; transform-origin: bottom; animation: massBar 1.4s ease-in-out infinite; }
.mass-instrument[data-step="detect"] .db2 { animation-delay: .2s; }
.mass-instrument[data-step="detect"] .db3 { animation-delay: .35s; }
@keyframes neutralDrift { from{transform:translateX(-6px) translateY(0)} to{transform:translateX(12px) translateY(-4px)} }
@keyframes massElectron { 0%{transform:translateX(0)} 100%{transform:translateX(100px)} }
@keyframes fragPulse { from{transform:scale(.95)} to{transform:scale(1.08)} }
@keyframes accelSweep { 0%{transform:translateX(0)} 100%{transform:translateX(92px)} }
@keyframes ionCurveLight { 0%{transform:translate(0,0)} 100%{transform:translate(150px,-122px)} }
@keyframes ionCurveMedium { 0%{transform:translate(0,0)} 100%{transform:translate(175px,-78px)} }
@keyframes ionCurveHeavy { 0%{transform:translate(0,0)} 100%{transform:translate(200px,-30px)} }
@keyframes massBar { 0%,100%{transform:scaleY(.65)} 50%{transform:scaleY(1.08)} }
.ir-band-zone { fill: rgba(217,120,34,.08); opacity:0; }
.ir-band-zone.active { opacity:1; }
.ir-cursor-line { stroke:#173846; stroke-width:2; stroke-dasharray:8 6; }
.nmr-machine .spin-pair { transform-origin: center; transform-box: fill-box; }
.nmr-machine.align .pair-a { animation: settleUp .7s ease-in-out infinite alternate; }
.nmr-machine.align .pair-b { animation: settleDown .7s ease-in-out infinite alternate; }
.nmr-machine.pulse .mag-arrow, .nmr-machine.pulse .mag-arrow-head { animation: tipVector .9s ease-in-out infinite alternate; }
.nmr-machine.pulse .rf-wave { animation: rfGlow .8s linear infinite; }
.nmr-machine.relax .precess-arrow, .nmr-machine.relax .precess-head { animation: precessSpin .9s linear infinite; transform-origin: 515px 182px; }
.nmr-machine.relax .fid-path { animation: draw-fid 1.7s ease forwards; }
.nmr-machine.transform .nmr-out-peak { animation: nmrPeakGrow 1.2s ease-in-out infinite alternate; transform-origin: bottom; }
.nmr-machine.transform .np2 { animation-delay: .15s; }
.nmr-machine.transform .np3 { animation-delay: .3s; }
@keyframes settleUp { from{transform:translateY(0)} to{transform:translateY(-3px)} }
@keyframes settleDown { from{transform:translateY(0)} to{transform:translateY(3px)} }
@keyframes tipVector { from{transform:rotate(0deg)} to{transform:rotate(82deg)} }
@keyframes rfGlow { 0%{filter:none; opacity:.6} 50%{filter:drop-shadow(0 0 6px rgba(217,120,34,.8)); opacity:1} 100%{filter:none; opacity:.6} }
@keyframes precessSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes nmrPeakGrow { from{transform:scaleY(.78)} to{transform:scaleY(1.05)} }
.worked-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; }
.worked-box { background:#f8fbfd; border:1px solid var(--line); border-radius:14px; padding:16px; }
.swatch { display:inline-block; width:14px; height:14px; border-radius:50%; background:var(--swatch); margin-right:8px; vertical-align:middle; }
@media (max-width: 700px) { .worked-grid { grid-template-columns:1fr; } }

/* v2026.08.10.1 — three-part learning flow and expanded interactive analysis */
.learning-panel-section[hidden] { display: none !important; }
.module-nav-wrap { padding-top: 12px; padding-bottom: 4px; }
.module-tabs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; position: sticky; top: 72px; z-index: 8; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.96); box-shadow: 0 8px 24px rgba(24,56,74,.08); backdrop-filter: blur(10px); }
.module-tab { appearance: none; border: 1px solid var(--line); background: #fff; color: var(--ink); padding: 12px 14px; border-radius: 12px; font: inherit; font-weight: 850; cursor: pointer; min-height: 48px; }
.module-tab:hover { border-color: var(--page-accent, var(--brand)); }
.module-tab.active { background: var(--page-accent, var(--brand)); border-color: var(--page-accent, var(--brand)); color: #fff; box-shadow: 0 5px 16px rgba(24,56,74,.14); }

.question-runner { max-width: 900px; margin: 0 auto; }
.quiz-runner-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:10px; }
.quiz-runner-head > div { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.quiz-category { display:inline-flex; align-items:center; min-height:28px; padding:4px 9px; border-radius:999px; background:color-mix(in srgb, var(--page-accent, var(--brand)) 12%, white); color:var(--page-accent, var(--brand)); font-weight:850; font-size:.84rem; }
.quiz-progress { height:9px; border-radius:999px; overflow:hidden; background:#e7eef1; margin-bottom:14px; }
.quiz-progress span { display:block; height:100%; background:var(--page-accent, var(--brand)); transition:width .25s ease; }
.runner-question { padding:22px; }
.runner-next { margin-top:14px; display:flex; justify-content:flex-end; }
.quiz-complete { display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; padding:24px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.score-ring { width:112px; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; align-content:center; border:8px solid color-mix(in srgb, var(--page-accent, var(--brand)) 25%, #e7eef1); font-size:2rem; font-weight:900; color:var(--page-accent, var(--brand)); }
.score-ring small { font-size:.8rem; color:var(--muted); }

.reaction-workflow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; gap:10px; margin:16px 0; }
.reaction-stage { border:2px solid var(--line); border-radius:14px; padding:16px; background:#fff; min-height:105px; display:flex; flex-direction:column; justify-content:center; gap:8px; transition:.2s ease; }
.reaction-stage span { font-size:1.12rem; font-weight:800; overflow-wrap:anywhere; }
.reaction-stage.active { border-color:var(--page-accent, var(--brand)); box-shadow:0 0 0 4px color-mix(in srgb, var(--page-accent, var(--brand)) 12%, transparent); transform:translateY(-2px); }
.reaction-arrow { display:grid; place-items:center; font-size:1.3rem; font-weight:900; color:var(--muted); }

.isotope-controls { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.isotope-explorer { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); gap:18px; align-items:start; }
.mini-spectrum { min-height:260px; border:1px solid var(--line); border-radius:14px; background:#fff; padding:14px; }
.iso-axis { position:relative; height:205px; border-left:2px solid var(--ink); border-bottom:2px solid var(--ink); margin:8px 14px 24px 42px; }
.iso-bars { position:absolute; inset:14px 16px 0 10px; display:flex; align-items:flex-end; justify-content:center; gap:58px; }
.iso-peak { position:relative; width:8px; min-height:8px; background:var(--page-accent, var(--brand)); border-radius:3px 3px 0 0; }
.iso-peak span { position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); white-space:nowrap; font-size:.82rem; font-weight:800; }
.iso-peak b { position:absolute; left:50%; top:calc(100% + 8px); transform:translateX(-50%); font-size:.84rem; }
.iso-x-label { position:absolute; right:4px; bottom:-26px; font-weight:800; font-size:.82rem; }

.instrument-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:stretch; gap:8px; }
.flow-node { border:1px solid var(--line); border-radius:14px; background:#fff; padding:14px; min-height:130px; display:flex; flex-direction:column; gap:7px; justify-content:center; }
.flow-node strong { color:var(--page-accent, var(--brand)); }
.flow-node span { font-size:.92rem; color:var(--muted); }
.flow-arrow { display:grid; place-items:center; font-size:1.4rem; font-weight:900; color:var(--muted); }
.meter { height:12px; border-radius:999px; background:#e4eaed; overflow:hidden; margin-top:7px; }
.meter span { display:block; width:92%; height:100%; background:var(--page-accent, var(--brand)); border-radius:inherit; transition:width .2s ease; }
.tiny-trace { width:100%; max-width:150px; height:48px; }
.tiny-trace path { fill:none; stroke:var(--muted); stroke-width:4; stroke-linecap:round; }
.tiny-trace path.absorbing { stroke:var(--page-accent, var(--brand)); }

.integration-trace { fill:none; stroke:#263f4c; stroke-width:3; opacity:.72; stroke-linejoin:round; }
.integration-label { fill:#526a76; font-size:11px; font-weight:800; }
.env-peak-label { font-weight:900; }
.environment-chip strong { display:inline-grid; place-items:center; min-width:22px; height:22px; border-radius:6px; background:#eef3f5; color:var(--ink); margin-right:2px; }

.symmetry-molecule { position:relative; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; max-width:600px; margin:20px auto 24px; padding:34px 80px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.symmetry-molecule button { border:2px solid var(--line); border-radius:14px; background:#fff; padding:16px; font:inherit; font-weight:900; cursor:pointer; }
.symmetry-molecule button span { display:inline-grid; place-items:center; min-width:25px; height:25px; border-radius:7px; margin-left:5px; background:#eef3f5; }
.symmetry-molecule button:hover,.symmetry-molecule button.active { border-color:var(--page-accent, var(--brand)); }
.symmetry-molecule button.equivalent { border-color:var(--page-accent, var(--brand)); background:color-mix(in srgb, var(--page-accent, var(--brand)) 10%, white); box-shadow:0 0 0 3px color-mix(in srgb, var(--page-accent, var(--brand)) 10%, transparent); }
.symmetry-molecule .carbonyl-carbon { position:absolute; left:50%; top:calc(50% + 38px); transform:translateX(-50%); min-width:112px; }
.release-version { opacity:.75; font-size:.82rem; }

@media (max-width: 820px) {
  .module-tabs { position:static; grid-template-columns:1fr; }
  .reaction-workflow,.instrument-flow,.isotope-explorer { grid-template-columns:1fr; }
  .reaction-arrow,.flow-arrow { transform:rotate(90deg); min-height:18px; }
  .quiz-complete { grid-template-columns:1fr; }
  .score-ring { width:96px; }
  .symmetry-molecule { grid-template-columns:1fr; padding:20px; }
  .symmetry-molecule strong { text-align:center; }
  .symmetry-molecule .carbonyl-carbon { position:static; transform:none; }
}
.analysis-sequence { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.analysis-sequence .card { position:relative; padding-top:46px; }
.analysis-sequence h3 { font-size:1rem; }
.analysis-sequence p { font-size:.92rem; }
.analysis-step { position:absolute; top:14px; left:14px; display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:var(--page-accent, var(--brand)); color:#fff; font-weight:900; }
@media (max-width: 1000px) { .analysis-sequence { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { .analysis-sequence { grid-template-columns:1fr; } }


/* v2026.08.10.2 workflow refinements */
.ir-workflow-layout { display:grid; grid-template-columns:minmax(260px,.9fr) minmax(320px,1.1fr); gap:18px; align-items:start; }
.ir-workflow-molecule { display:grid; place-items:center; min-height:280px; }
.ir-workflow-molecule .molecule-svg { max-width:360px; }
.ir-draw-card { padding:18px; }
.ir-draw-card h3 { margin-bottom:8px; }
.ir-draw-card .mini-intro { margin:0 0 12px; font-size:.94rem; color:var(--muted); }
.ir-workflow-spectrum { min-height:250px; }
.workflow-spectrum-svg .ir-drawn-trace { filter: drop-shadow(0 2px 4px rgba(217,120,34,.12)); }
.workflow-spectrum-svg .workflow-cursor { stroke-width:2.5; }

.reaction-workflow-four { grid-template-columns:1fr auto 1.15fr auto .9fr auto 1.15fr; }
.reaction-stage small { color:var(--muted); font-size:.86rem; line-height:1.35; }
.reaction-stage span { line-height:1.3; }

.nmr-sequence { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:18px 0; }
.nmr-step-card { text-align:left; border:2px solid var(--line); border-radius:18px; background:#fff; padding:14px; display:flex; flex-direction:column; gap:10px; min-height:280px; box-shadow:0 8px 20px rgba(18,37,47,.04); transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.nmr-step-card svg { width:100%; height:130px; display:block; }
.nmr-step-card strong { font-size:1.02rem; }
.nmr-step-card small { color:var(--muted); line-height:1.45; }
.nmr-step-card:hover, .nmr-step-card:focus-visible, .nmr-step-card.active { border-color:#2172b8; box-shadow:0 0 0 4px rgba(33,114,184,.12); transform:translateY(-2px); }
.nmr-step-card .nmr-card-text { font-size:17px; font-weight:900; text-anchor:middle; dominant-baseline:middle; fill:#143044; }
.nmr-step-card .nmr-card-text-light { fill:#fff; }
.nmr-step-card .spin-circle, .nmr-step-card .tip-circle { fill:#fff; stroke:#2172b8; stroke-width:3; }
.nmr-step-card .spin-line, .nmr-step-card .spin-head, .nmr-step-card .tip-arrow, .nmr-step-card .tip-head,
.nmr-step-card .precess-arrow, .nmr-step-card .precess-head, .nmr-step-card .fft-axis, .nmr-step-card .fft-peak { stroke:#2172b8; stroke-width:4; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.nmr-step-card .nmr-rf-wave, .nmr-step-card .fid-wave, .nmr-step-card .fft-fid { fill:none; stroke:#d97822; stroke-width:4; stroke-linecap:round; }
.nmr-step-card .precess-orbit { fill:none; stroke:#b8d1ea; stroke-dasharray:7 6; stroke-width:2.4; }
.nmr-step-card .fft-peak.peak-1 { stroke:#7a4ac7; }
.nmr-step-card .fft-peak.peak-2 { stroke:#2172b8; }
.nmr-step-card .fft-peak.peak-3 { stroke:#d97822; }
.nmr-step-card.active[data-step="align"] .spin-up { animation: settleUp .7s ease-in-out infinite alternate; }
.nmr-step-card.active[data-step="align"] .spin-down { animation: settleDown .7s ease-in-out infinite alternate; }
.nmr-step-card.active[data-step="pulse"] .nmr-rf-wave { animation: rfGlow .8s linear infinite; }
.nmr-step-card.active[data-step="pulse"] .tip-arrow-tilt { animation: tipVector .9s ease-in-out infinite alternate; transform-origin:92px 56px; }
.nmr-step-card.active[data-step="relax"] .precess-arrow, .nmr-step-card.active[data-step="relax"] .precess-head { animation: precessSpin .9s linear infinite; transform-origin:80px 48px; }
.nmr-step-card .fid-wave { stroke-dasharray:260; stroke-dashoffset:260; }
.nmr-step-card.active[data-step="relax"] .fid-wave { animation: draw-fid 1.6s ease forwards; }
.nmr-step-card.active[data-step="transform"] .fft-peak { animation: nmrPeakGrow 1.1s ease-in-out infinite alternate; transform-origin:bottom; }
.nmr-step-card.active[data-step="transform"] .peak-2 { animation-delay:.15s; }
.nmr-step-card.active[data-step="transform"] .peak-3 { animation-delay:.3s; }

@media (max-width: 1080px) { .nmr-sequence { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 900px) { .ir-workflow-layout { grid-template-columns:1fr; } .reaction-workflow-four { grid-template-columns:1fr; } }
@media (max-width: 620px) { .nmr-sequence { grid-template-columns:1fr; } .nmr-step-card { min-height:auto; } }


/* v2026.08.11.1 — 20-case evidence-first spectra investigation */
.case-selector-20 { display:grid; grid-template-columns:repeat(10,minmax(44px,1fr)); gap:8px; }
.case-selector-20 .case-btn { min-height:46px; font-size:1rem; }
.investigation-browser { align-items:start; }
.evidence-menu-panel { position:sticky; top:88px; }
.evidence-tabs { display:grid; grid-template-columns:1fr; gap:10px; }
.evidence-tab { width:100%; border:1px solid var(--line); border-radius:14px; padding:14px 15px; background:#fff; text-align:left; font:inherit; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; transition:.18s ease; }
.evidence-tab span { font-weight:900; color:var(--ink); }
.evidence-tab small { color:var(--muted); }
.evidence-tab:hover,.evidence-tab:focus-visible { border-color:var(--identify); box-shadow:0 0 0 3px rgba(33,136,92,.10); }
.evidence-tab.active { background:var(--identify); border-color:var(--identify); }
.evidence-tab.active span,.evidence-tab.active small { color:#fff; }
.evidence-display-panel { min-height:560px; }
.raw-evidence { min-height:500px; display:flex; flex-direction:column; }
.raw-evidence h3 { margin:0 0 12px; }
.raw-evidence .investigation-spectrum { width:100%; min-height:440px; flex:1; }
.raw-data-grid { display:grid; grid-template-columns:minmax(120px,1fr) minmax(120px,1fr); gap:10px 16px; max-width:520px; margin:26px auto 0; width:100%; padding:24px; border:1px solid var(--line); border-radius:16px; background:#f8fbfa; }
.raw-data-grid span,.raw-data-grid strong { padding:9px 0; border-bottom:1px solid #e2ebe6; }
.percentage-bars { display:grid; gap:15px; max-width:600px; width:100%; margin:26px auto 0; }
.percentage-bars > div { display:grid; grid-template-columns:52px 1fr 72px; gap:12px; align-items:center; }
.percentage-bars span,.percentage-bars strong { font-weight:900; }
.percentage-bars meter { width:100%; height:18px; }
.inv-ms-peak,.inv-nmr-peak { stroke:var(--identify); stroke-width:5; }
.inv-ir-trace { fill:none; stroke:#d97822; stroke-width:4; }
.inv-broad-peak { fill:none; stroke:var(--identify); stroke-width:4; opacity:.65; }
.inv-integration { fill:none; stroke:#314c57; stroke-width:3; opacity:.72; stroke-linejoin:round; }
.analysis-record { border:1px solid var(--line); border-radius:18px; padding:22px; background:#fff; box-shadow:0 7px 24px rgba(24,56,74,.06); }
.analysis-record-head { display:flex; justify-content:space-between; gap:18px; align-items:start; margin-bottom:18px; }
.analysis-record-head h3 { margin:0 0 5px; }
.analysis-record-head p { margin:0; color:var(--muted); }
.unknown-pill { display:inline-flex; white-space:nowrap; padding:7px 11px; border-radius:999px; background:#e8f5ee; color:#17623f; font-weight:900; }
.analysis-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.analysis-fields label { font-weight:850; display:flex; flex-direction:column; gap:7px; }
.analysis-fields input,.analysis-fields select { width:100%; min-height:46px; border:1px solid var(--line); border-radius:11px; background:#fff; padding:10px 12px; font:inherit; color:var(--ink); }
.analysis-fields input:focus,.analysis-fields select:focus { outline:3px solid rgba(33,136,92,.13); border-color:var(--identify); }
.analysis-fields .analysis-correct { border-color:#21885c; background:#effaf4; box-shadow:0 0 0 2px rgba(33,136,92,.10); }
.analysis-fields .analysis-review { border-color:#d99922; background:#fff8e8; box-shadow:0 0 0 2px rgba(217,153,34,.10); }
.analysis-feedback { margin-top:14px; padding:13px 14px; border-radius:12px; background:#f3f7f8; color:#294957; }
.answer-reveal { margin-top:14px; }
.answer-formula { margin-top:8px; font-size:1.35rem; font-weight:900; }
.investigation-flow { grid-template-columns:repeat(5,minmax(0,1fr)); }
@media(max-width:1000px){.case-selector-20{grid-template-columns:repeat(5,minmax(44px,1fr));}.investigation-flow{grid-template-columns:repeat(2,minmax(0,1fr));}.analysis-fields{grid-template-columns:repeat(2,minmax(0,1fr));}.evidence-menu-panel{position:static;}}
@media(max-width:640px){.case-selector-20{grid-template-columns:repeat(4,minmax(44px,1fr));}.investigation-flow,.analysis-fields{grid-template-columns:1fr;}.evidence-display-panel{min-height:420px}.raw-evidence{min-height:390px}.raw-evidence .investigation-spectrum{min-height:340px}.analysis-record-head{display:block}.unknown-pill{margin-top:10px}.percentage-bars>div{grid-template-columns:42px 1fr 62px}}


/* Integrated Chemisode Simulations release v2026.08.11.1 */
.site-nav .simulations-home-link{border:1px solid var(--line);background:#f7fbfc;color:var(--brand-dark)}
.site-nav .simulations-home-link:hover,.site-nav .simulations-home-link:focus-visible{background:#e7f2f2}
.spectra-site-footer{color:#587080;background:transparent;border-top-color:#d7e2e8;margin-top:0}
.spectra-site-footer a{color:#264553}
.spectra-site-footer a:hover,.spectra-site-footer a:focus-visible{color:#0e5e62}

/* v2026.08.11.2 — spectra lab interaction refinement */
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.technique-start { padding-top:24px; }
.investigation-launch { margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-left:5px solid var(--identify); }
.investigation-launch h2 { margin:2px 0 6px; }
.investigation-launch p { margin:0; max-width:780px; color:var(--muted); }
.investigation-launch .page-kicker { color:var(--identify); }

/* Mass ionisation: one parent molecule is hit, then visibly splits into two differently coloured fragments. */
.mass-instrument .ionisation-parent,
.mass-instrument .impact-ring,
.mass-instrument .ionisation-fragments,
.mass-instrument .split-label { opacity:0; }
.mass-instrument[data-step="ionise"] .ionisation-parent { opacity:1; animation:ionParentCycle 2.2s ease-in-out infinite; }
.mass-instrument[data-step="ionise"] .electron { opacity:1; animation:massElectronImpact 2.2s linear infinite; }
.mass-instrument[data-step="ionise"] .impact-ring { animation:ionImpactFlash 2.2s ease-out infinite; }
.mass-instrument[data-step="ionise"] .split-a,
.mass-instrument[data-step="ionise"] .split-a-label { animation:splitFragmentA 2.2s ease-in-out infinite; }
.mass-instrument[data-step="ionise"] .split-b,
.mass-instrument[data-step="ionise"] .split-b-label { animation:splitFragmentB 2.2s ease-in-out infinite; }
@keyframes ionParentCycle { 0%,42%{opacity:1;transform:scale(1)} 48%{opacity:.9;transform:scale(1.12)} 55%,100%{opacity:0;transform:scale(.35)} }
@keyframes massElectronImpact { 0%{opacity:0;transform:translateX(-10px)} 8%{opacity:1} 43%{opacity:1;transform:translateX(62px)} 48%,100%{opacity:0;transform:translateX(68px)} }
@keyframes ionImpactFlash { 0%,42%{opacity:0;transform:scale(.7)} 47%{opacity:1;transform:scale(1)} 58%,100%{opacity:0;transform:scale(1.35)} }
@keyframes splitFragmentA { 0%,48%{opacity:0;transform:translate(0,0) scale(.4)} 58%{opacity:1;transform:translate(0,0) scale(1)} 100%{opacity:1;transform:translate(38px,-24px) scale(1)} }
@keyframes splitFragmentB { 0%,48%{opacity:0;transform:translate(0,0) scale(.4)} 58%{opacity:1;transform:translate(0,0) scale(1)} 100%{opacity:1;transform:translate(-32px,30px) scale(1)} }

/* IR fingerprint region */
.fingerprint-shade { fill:rgba(196,54,54,.12); stroke:none; pointer-events:none; }
.fingerprint-label { fill:#a43434; font-size:11px; font-weight:900; pointer-events:none; }
.ir-molecule-svg.fingerprint-state .part .atom,
.ir-molecule-svg.fingerprint-state .part .bond { stroke:#c34646!important; }
.ir-molecule-svg.fingerprint-state .part .atom { fill:#fff1f1; }
.ir-molecule-svg.fingerprint-state .part { animation:fingerprintVibrate .24s ease-in-out infinite alternate; transform-box:fill-box; transform-origin:center; }
@keyframes fingerprintVibrate { from{transform:translate(-1px,-1px) rotate(-.5deg)} to{transform:translate(1px,1px) rotate(.5deg)} }

/* Four question sets of five */
.question-runner { max-width:980px; }
.quiz-bank-summary { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:14px; }
.quiz-bank-summary h3 { margin:0 0 4px; }
.quiz-bank-summary p { margin:0; color:var(--muted); }
.quiz-set-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-bottom:16px; }
.quiz-set-tab { border:1px solid var(--line); background:#fff; border-radius:12px; padding:10px 12px; text-align:left; font:inherit; cursor:pointer; font-weight:900; }
.quiz-set-tab small { display:block; margin-top:3px; color:var(--muted); font-weight:650; font-size:.78rem; }
.quiz-set-tab.active { background:var(--page-accent,var(--brand)); color:#fff; border-color:var(--page-accent,var(--brand)); }
.quiz-set-tab.active small { color:rgba(255,255,255,.88); }
.quiz-set-tab.complete:not(.active) { border-color:#21885c; background:#effaf4; }
.quiz-set-five { display:grid; gap:14px; }
.set-question-card { padding:18px; }
.set-question-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px; }
.quiz-set-footer { margin-top:16px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:space-between; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:#f7fafb; }
.compact-complete { margin-top:18px; }

@media(max-width:760px){
  .investigation-launch { align-items:flex-start; flex-direction:column; }
  .quiz-set-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .quiz-bank-summary { display:block; }
  .quiz-bank-summary > strong { display:block; margin-top:8px; }
}
.mass-instrument[data-step="ionise"] .ionisation-fragments { opacity:1; }
.mass-instrument .ionisation-demo .particle-label, .mass-instrument .ionisation-demo .split-label { fill:#fff!important; }

/* v2026.08.11.4 — assessment integrity and spectral-accuracy refinement */
.analysis-field-note { display:block; margin-top:6px; color:var(--muted); font-size:.78rem; line-height:1.35; }
.analysis-fields input:disabled { opacity:.82; cursor:not-allowed; background:#f1f5f6; }