/* Интерактивные модели курса биологии ЕГЭ (/sim/<имя>.html; исходники — tools/sims, сборка — tools/sims/build_sims.py).
   Оформление сайта: цвета claude.com (текст #1d1d1f, подложка #f5f4ed, обводка #ecebe4), чёрные кнопки-пилюли, белые поля.
   Фон страницы прозрачный — его (и рамку) задаёт родительская страница у <iframe class="…"> внутри <figure class="tb-fig tb-sim">. */
:root {
  --foreground: #1d1d1f;
  --background: #f5f4ed;
  --muted-foreground: #6e6e73;
  --border: #ecebe4;
  --font-size-base: 14.5px;      /* подписи внутри SVG */
  --font-size-small: 14px;
  --line-height-small: 1.45;
  --radius-lg: 12px;
  --radius-full: 9999px;
  --viz-series-1: #2e6fe6;       /* синий — ДНК, новая цепь */
  --viz-series-2: #e8842c;       /* оранжевый — праймер, короткая пара хромосом */
  --viz-series-3: #1f9d55;       /* зелёный — фермент */
  --viz-series-4: #d93025;
  --viz-series-5: #7c5cbf;       /* фиолетовый — длинная пара хромосом */
  --blue: #2e6fe6; --orange: #e8842c; --green: #1f9d55; --red: #d93025; --yellow: #e3b505; --purple: #7c5cbf;
}
html, body { margin: 0; padding: 0; background: transparent; }
html { overflow: hidden; }   /* высоту iframe подбирает родительская страница по сообщению sim.js — прокрутки внутри нет */
html.standalone { overflow: auto; }
html.standalone body { background: var(--background); min-height: 100vh; }
body {
  font: 400 15.5px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--foreground); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.sim { padding: 18px 20px 20px; }
html.standalone .sim { max-width: 760px; margin: 0 auto; padding: 28px 20px 40px; }
@media (max-width: 480px) { .sim { padding: 14px 14px 16px; } }
.sim h2, .sim h3 { font-size: 1.1rem; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; margin: 0 0 4px; }
.sim p { margin: 0; }
.sim sub { font-size: .75em; }
.text-small, small { font-size: var(--font-size-small); line-height: var(--line-height-small); }
.text-muted { color: var(--muted-foreground); }
.tabular-nums { font-variant-numeric: tabular-nums; }
.viz-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sim [class$="-scrubber"] { margin-top: 10px; }

/* кнопки: главная — чёрная пилюля, прочие — белые с обводкой (как .btn-primary / .btn-secondary на сайте) */
.btn {
  appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 18px; margin: 0; border: 1px solid var(--border); border-radius: var(--radius-full);
  background: #fff; color: var(--foreground); font: inherit; font-weight: 600; font-size: 15px; line-height: 1.2;
  cursor: pointer; white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: background .2s, box-shadow .2s, transform .2s, opacity .2s;
}
.btn:hover:not(:disabled) { background: #faf9f5; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; }
.btn:focus-visible { outline: 2px solid var(--foreground); outline-offset: 2px; }
.btn-primary { background: var(--foreground); color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(0, 0, 0, .14); }
.btn-primary:hover:not(:disabled) { background: #000; }

/* поля */
.form-label { display: block; margin-bottom: 6px; color: var(--muted-foreground); font-size: 14px; font-weight: 500; line-height: 1.4; }
.form-select {
  appearance: none; -webkit-appearance: none; display: block; width: 100%; min-height: 40px; margin: 0; padding: 0 36px 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--foreground); font: inherit; font-size: 15px; cursor: pointer;
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231d1d1f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center / 12px 8px;
}
.form-label .form-select { margin-top: 6px; color: var(--foreground); }
.form-select:focus-visible { outline: none; border-color: var(--foreground); box-shadow: 0 0 0 1px var(--foreground); }
.form-select:disabled { opacity: .45; cursor: default; }
.form-range { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 36px; margin: 0; padding: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.form-range::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: #d9d8d0; }
.form-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9.5px; border-radius: 50%; background: #fff; border: 1px solid #cfcec6; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.form-range::-moz-range-track { height: 3px; border-radius: 2px; background: #d9d8d0; }
.form-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid #cfcec6; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.form-range:focus-visible { outline: none; }
.form-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(29, 29, 31, .25); }
.form-range:disabled { opacity: .45; cursor: default; }

/* полоса хода */
.progress { height: 6px; border-radius: var(--radius-full); background: #e4e3db; overflow: hidden; margin: 6px 0; }
.progress-bar { height: 100%; background: var(--foreground); border-radius: var(--radius-full); }
output { display: inline; }