/* СУПРЕМУМ · раздел «Формулы» (formulas.html), с 01.10.2026. Токены «Тушь и бумага»:
   «дают в справке» — --ok, «учить наизусть» — --err / красный карандаш --pen.
   Исключение намеренное: лист справки экзамена и лист шпаргалки А4 — всегда бумажные
   (светлые и в тёмной теме), потому что изображают распечатку. */

:root { --fx-top: 64px; --fx-modes: 56px; }  /* --fx-top выставляет formulas.js по высоте шапки сайта */
html { scroll-padding-top: calc(var(--fx-top) + var(--fx-modes) + var(--sp-4)); }
body { background: var(--bg); color: var(--text); margin: 0; }
.fx-view:focus { outline: none; }
[hidden] { display: none !important; }

.fx-icon-btn { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); cursor: pointer; }
.fx-icon-btn:hover { background: var(--accent-soft); }
.fx-icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- шапка раздела ---------- */
.fx-hero { padding: var(--sp-10) var(--page-pad) var(--sp-6); }
.fx-hero-in { max-width: var(--page-max); margin: 0 auto; }
.fx-kicker { font: 500 var(--fs-xs)/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); margin: 0 0 var(--sp-2); }
.fx-hero h1 { font: 700 var(--fs-3xl)/var(--lh-3xl) var(--font-display); color: var(--text-strong); margin: 0 0 var(--sp-3); }
.fx-lead { max-width: var(--measure); color: var(--text-soft); margin: 0 0 var(--sp-6); line-height: var(--lh-md); }
.fx-given-inline, .fx-memo-inline { white-space: nowrap; padding: 1px 8px; border-radius: var(--radius-pill); font-size: .92em; }
.fx-given-inline { background: var(--ok-soft); color: var(--ok-fg); }
.fx-memo-inline { background: var(--err-soft); color: var(--err-fg); }
.fx-search { position: relative; max-width: 720px; }
.fx-search svg { position: absolute; left: 18px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); fill: none; stroke: var(--text-soft); stroke-width: 2; stroke-linecap: round; }
.fx-search input {
  width: 100%; box-sizing: border-box; height: 60px; padding: 0 56px 0 54px;
  font: 400 var(--fs-lg)/1 var(--font-body); color: var(--text-strong);
  background: var(--solid); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised); transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.fx-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fx-search input::-webkit-search-cancel-button { display: none; }
.fx-search kbd { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font: 500 var(--fs-xs)/1 var(--font-mono); color: var(--text-faint); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; }
.fx-stats { margin: var(--sp-3) 0 0; font: 400 var(--fs-sm)/1.5 var(--font-mono); color: var(--text-faint); }
@media (max-width: 720px) {
  .fx-hero { padding: var(--sp-5) var(--page-pad) var(--sp-4); }
  .fx-hero h1 { margin-bottom: var(--sp-2); }
  .fx-lead { font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
  .fx-kicker, .fx-search kbd { display: none; }
  .fx-search input { height: 52px; font-size: var(--fs-md); padding-right: var(--sp-4); }
  .fx-stats { font-size: var(--fs-xs); }
  .fx-view { padding-top: var(--sp-4); }
}

/* ---------- режимы ---------- */
.fx-modes { position: sticky; top: var(--fx-top); z-index: var(--z-sticky); background: var(--bg); border-bottom: 1px solid var(--hair); }
.fx-modes-in { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-pad); display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none; height: var(--fx-modes); align-items: center; border: 0; background: transparent; box-sizing: border-box; }
.fx-modes-in::-webkit-scrollbar { display: none; }
.fx-modes-in > a { flex: 0 0 auto; white-space: nowrap; cursor: pointer; }
.fx-modes-in.seg { background: transparent; border: 0; padding: 0 var(--page-pad); }
.fx-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 10px; background: var(--accent); color: var(--accent-fg); font: 500 .7rem/1 var(--font-mono); }
.fx-count:empty { display: none; }

.fx-view { max-width: var(--page-max); margin: 0 auto; padding: var(--sp-6) var(--page-pad) var(--sp-16); min-height: 60vh; }

/* ---------- справочник: рейка + содержимое ---------- */
.fx-ref { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
.fx-rail { position: sticky; top: calc(var(--fx-top) + var(--fx-modes) + var(--sp-4)); max-height: calc(100vh - var(--fx-top) - var(--fx-modes) - var(--sp-8)); overflow: auto; padding-right: var(--sp-2); }
.fx-rail h3 { font: 500 var(--fs-xs)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin: var(--sp-5) 0 var(--sp-2); }
.fx-subj { display: grid; gap: 2px; }
.fx-subj button, .fx-grades button, .fx-toc a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text); font: 400 var(--fs-sm)/1.3 var(--font-body); cursor: pointer; text-decoration: none; box-sizing: border-box;
}
.fx-subj button:hover, .fx-grades button:hover, .fx-toc a:hover { background: var(--accent-soft); }
.fx-subj button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }
.fx-subj small, .fx-toc small { font: 400 var(--fs-xs)/1 var(--font-mono); opacity: .7; }
.fx-grades { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.fx-grades button { width: auto; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 6px 12px; }
.fx-grades button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--text-strong); font-weight: 500; }
.fx-toc { display: grid; gap: 1px; }
.fx-toc a.is-here { color: var(--text-strong); font-weight: 500; box-shadow: inset 2px 0 0 var(--pen); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.fx-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.fx-filters .chip { cursor: pointer; }
.fx-sec { margin-bottom: var(--sp-10); }
.fx-sec-h { display: flex; align-items: baseline; gap: var(--sp-3); margin: 0 0 var(--sp-4); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--rule); }
.fx-sec-h h2 { font: 600 var(--fs-xl)/var(--lh-xl) var(--font-display); color: var(--text-strong); margin: 0; }
.fx-sec-h > span { font: 400 var(--fs-xs)/1 var(--font-mono); color: var(--text-faint); }
.fx-sec-h .fx-sec-tools { margin-left: auto; }

@media (max-width: 900px) {
  .fx-ref { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .fx-rail { position: static; max-height: none; overflow: visible; padding: 0; }
  .fx-subj { display: flex; overflow-x: auto; gap: var(--sp-1); scrollbar-width: none; }
  .fx-subj button { width: auto; white-space: nowrap; border: 1px solid var(--border); border-radius: var(--radius-pill); }
  .fx-grades { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .fx-grades button { white-space: nowrap; }
  .fx-rail h3.fx-toc-h, .fx-toc { display: none; }
  .fx-rail h3 { margin-top: var(--sp-3); }
  .fx-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--page-pad)) var(--sp-5); padding: 2px var(--page-pad); }
  .fx-filters .chip { flex: 0 0 auto; white-space: nowrap; }
  .fx-sec-tools span { display: none; }
  .fx-sec-tools { padding: 0; width: var(--tap); justify-content: center; }
}

/* ---------- карточка формулы ---------- */
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); grid-auto-flow: row dense; gap: var(--sp-4); }
/* Длинная формула: карточка на две колонки, формула одной строкой (formulas.js → fitCard) */
.fx-card.fx-wide { grid-column: span 2; }
/* Прокрутки у формул нет: sup-base даёт .katex-display overflow-x:auto — здесь размер подгоняет скрипт */
#view .katex-display, .fx-drawer .katex-display { overflow: visible; }
.fx-line { display: block; white-space: nowrap; overflow: hidden; }
.fx-card {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5); background: var(--solid); border: 1px solid var(--border); border-radius: var(--radius-md);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.fx-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-raised); }
.fx-card-top { display: flex; align-items: flex-start; gap: var(--sp-2); }
.fx-card-name { flex: 1; font: 600 var(--fs-md)/1.35 var(--font-body); color: var(--text-strong); margin: 0; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.fx-card-name:hover { text-decoration: underline; text-decoration-color: var(--pen); text-underline-offset: 4px; }
.fx-star { width: 36px; height: 36px; margin: -6px -8px 0 0; }
.fx-star svg { width: 18px; height: 18px; }
.fx-star[aria-pressed="true"] { color: var(--pen); }
.fx-star[aria-pressed="true"] svg { fill: currentColor; }
.fx-tex { font-size: 1.12rem; color: var(--text-strong); overflow: hidden; padding: var(--sp-2) 0; min-height: 2.6em; display: flex; align-items: center; justify-content: safe center; cursor: pointer; }
.fx-tex > .katex-display { flex: 0 0 auto; }
.fx-tex .katex-display { margin: 0; }
.fx-note { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-soft); margin: 0; }
/* sup-base центрирует p:has(> .katex:only-child) — текстовые узлы :only-child не видит,
   и абзац «текст + одна формула» уезжает в центр. Здесь пояснения всегда влево. */
p.fx-note.fx-note, p.fx-d-note.fx-d-note, p.fx-live-lead.fx-live-lead, p.fx-sheet-note.fx-sheet-note { text-align: left; }
.fx-flash p.fx-note.fx-note { text-align: center; }
.fx-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.fx-b { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--radius-pill); font: 500 var(--fs-xs)/1.2 var(--font-mono); border: 1px solid var(--border); color: var(--text-soft); text-decoration: none; white-space: nowrap; }
a.fx-b:hover { border-color: var(--accent); color: var(--text-strong); }
.fx-b.given { background: var(--ok-soft); border-color: transparent; color: var(--ok-fg); }
.fx-b.memo { background: var(--err-soft); border-color: transparent; color: var(--err-fg); }
.fx-b.new { border-style: dashed; border-color: var(--pen); color: var(--pen); }
.fx-b.has-ex { border-color: transparent; background: var(--accent-soft); color: var(--text); }
.fx-card-more { align-self: flex-start; background: none; border: 0; padding: 0; font: 500 var(--fs-sm)/1.4 var(--font-body); color: var(--text); cursor: pointer; text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 4px; }
.fx-card-more:hover { text-decoration-color: var(--pen); }
.fx-mark-hit { background: var(--warn-soft); color: var(--text-strong); border-radius: 3px; }

/* ---------- панель формулы ---------- */
.fx-drawer { position: fixed; inset: 0; z-index: var(--z-modal); pointer-events: none; }
.fx-drawer-back { position: absolute; inset: 0; background: rgba(20,18,15,.34); opacity: 0; transition: opacity var(--dur-base); }
.fx-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(620px, 100%); overflow: auto; box-sizing: border-box;
  background: var(--bg); border-left: 1px solid var(--border); padding: var(--sp-8) var(--sp-8) var(--sp-16);
  transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out);
}
.fx-drawer.open { pointer-events: auto; }
.fx-drawer.open .fx-drawer-back { opacity: 1; }
.fx-drawer.open .fx-drawer-panel { transform: none; }
.fx-drawer-x { position: absolute; top: var(--sp-3); right: var(--sp-3); }
@media (max-width: 720px) {
  .fx-drawer-panel { top: auto; left: 0; width: 100%; max-height: 92vh; border-left: 0; border-top: 1px solid var(--border); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: var(--sp-6) var(--sp-4) var(--sp-12); transform: translateY(100%); }
}
.fx-d-crumb { font: 400 var(--fs-xs)/1.4 var(--font-mono); color: var(--text-faint); margin: 0 0 var(--sp-2); padding-right: 48px; }
.fx-d-title { font: 700 var(--fs-2xl)/var(--lh-2xl) var(--font-display); color: var(--text-strong); margin: 0 0 var(--sp-4); padding-right: 40px; }
.fx-d-tex { background: var(--solid); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-6) var(--sp-4); font-size: 1.35rem; overflow: hidden; text-align: center; }
.fx-d-tex .katex-display { margin: 0; }
.fx-d-note { margin: var(--sp-4) 0 0; line-height: var(--lh-md); }
.fx-d-h { font: 500 var(--fs-xs)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin: var(--sp-8) 0 var(--sp-3); }
.fx-d-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.fx-btn { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 var(--sp-4); border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--solid); color: var(--text-strong); font: 500 var(--fs-sm)/1 var(--font-body); cursor: pointer; text-decoration: none; }
.fx-btn:hover { border-color: var(--accent); }
.fx-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.fx-btn.primary:hover { background: var(--accent-hover); }
.fx-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fx-btn[aria-pressed="true"] svg { fill: currentColor; color: var(--pen); }

.fx-ex { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--solid); overflow: hidden; }
.fx-ex-q { padding: var(--sp-4) var(--sp-5); line-height: var(--lh-md); border-bottom: 1px solid var(--hair); }
.fx-ex-steps { list-style: none; margin: 0; padding: var(--sp-3) var(--sp-5); counter-reset: st; }
.fx-ex-steps li { counter-increment: st; position: relative; padding: var(--sp-2) 0 var(--sp-2) 36px; line-height: var(--lh-md); animation: fxIn var(--dur-base) var(--ease-out); }
.fx-ex-steps li::before { content: counter(st); position: absolute; left: 0; top: 10px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--accent-line); font: 500 .7rem/1 var(--font-mono); color: var(--text-soft); }
.fx-ex-foot { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5) var(--sp-4); flex-wrap: wrap; }
.fx-ex-ans { font-weight: 500; color: var(--ok-fg); background: var(--ok-soft); border-radius: var(--radius-sm); padding: 6px 12px; animation: fxIn var(--dur-base) var(--ease-out); }
.fx-trap { border-left: 3px solid var(--pen); background: var(--err-soft); padding: var(--sp-4) var(--sp-5); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; line-height: var(--lh-md); }
.fx-why { border-left: 3px solid var(--info); background: var(--info-soft); padding: var(--sp-4) var(--sp-5); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; line-height: var(--lh-md); }
.fx-examrow { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.fx-examrow a { text-decoration: none; }
.fx-rel { display: grid; gap: var(--sp-2); }
.fx-rel button { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--solid); cursor: pointer; text-align: left; color: var(--text); font: 400 var(--fs-sm)/1.3 var(--font-body); }
.fx-rel button:hover { border-color: var(--accent); }
.fx-rel .katex { font-size: 1em; }
.fx-rel .fx-line { flex: 0 1 auto; min-width: 0; text-align: right; }
@keyframes fxIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- к экзамену ---------- */
.fx-exam-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.fx-exam-head .seg a { cursor: pointer; }
.fx-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-8); }
.fx-sum { padding: var(--sp-4) var(--sp-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--solid); }
.fx-sum b { display: block; font: 700 var(--fs-2xl)/1.1 var(--font-display); color: var(--text-strong); }
.fx-sum span { font-size: var(--fs-sm); color: var(--text-soft); }
.fx-sum.given b { color: var(--ok-fg); }
.fx-sum.memo b { color: var(--err-fg); }
@media (max-width: 720px) { .fx-summary { grid-template-columns: 1fr 1fr; } .fx-summary .fx-sum:last-child { grid-column: 1 / -1; } }

.fx-sheet-official {
  position: relative; padding: var(--sp-8) var(--sp-6) var(--sp-6); margin-bottom: var(--sp-10);
  background: var(--n-0); color: #23211d; border: 1px solid var(--border); border-radius: 4px;
  box-shadow: 0 1px 0 var(--hair), 0 10px 30px -18px var(--sh);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
}
.fx-sheet-official .katex { color: #23211d; }
.fx-sheet-official::before { content: 'Справочные материалы'; position: absolute; top: -12px; left: var(--sp-5); background: var(--ok); color: #fff; font: 500 var(--fs-xs)/1 var(--font-mono); padding: 6px 12px; border-radius: 4px; letter-spacing: .04em; }
.fx-sheet-note { margin: 0 0 var(--sp-5); color: #4d4a44; font-size: var(--fs-sm); }
.fx-sheet-cols { columns: 2 320px; column-gap: var(--sp-8); }
.fx-sheet-block { break-inside: avoid; margin-bottom: var(--sp-5); }
.fx-sheet-block h4 { font: 600 var(--fs-sm)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 var(--sp-3); color: #3f6b4f; }
.fx-sheet-item { display: grid; gap: 2px; padding: 6px 0; border-bottom: 1px dotted rgba(35,33,29,.2); cursor: pointer; }
.fx-sheet-item:hover { background: rgba(63,107,79,.06); }
.fx-sheet-item small { font-size: var(--fs-xs); color: #67645e; }
.fx-sheet-item .katex { font-size: 1.02em; }
.fx-sheet-table { border-collapse: collapse; font: 400 var(--fs-xs)/1 var(--font-mono); margin-top: var(--sp-3); width: 100%; }
.fx-sheet-table th, .fx-sheet-table td { border: 1px solid rgba(35,33,29,.22); padding: 5px 4px; text-align: center; }
.fx-sheet-table th { background: rgba(63,107,79,.10); font-weight: 600; }
.fx-sheet-table .katex { font-size: 1em; }
.fx-caveat { font-size: var(--fs-xs); color: #858179; margin: var(--sp-3) 0 0; font-style: italic; }

.fx-nums { display: grid; gap: var(--sp-3); }
.fx-num { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--solid); }
.fx-num > summary { list-style: none; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center; padding: var(--sp-4) var(--sp-5); cursor: pointer; }
.fx-num > summary::-webkit-details-marker { display: none; }
.fx-num-n { font: 700 var(--fs-xl)/1 var(--font-display); color: var(--text-strong); text-align: center; border-right: 1px solid var(--rule); padding-right: var(--sp-3); }
.fx-num-name { font-weight: 500; color: var(--text-strong); line-height: 1.35; }
.fx-num-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.fx-num-meta .fx-b { font-size: .7rem; }
.fx-num[open] > summary { border-bottom: 1px solid var(--hair); }
.fx-num-body { padding: var(--sp-5); display: grid; gap: var(--sp-5); }
.fx-num-body .fx-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.fx-num-body .fx-card { padding: var(--sp-4); }
.fx-min { border-top: 1px dashed var(--rule); padding-top: var(--sp-4); }
.fx-min h5 { font: 500 var(--fs-xs)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 var(--sp-3); }
.fx-min ul { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); }
.fx-min li { line-height: var(--lh-md); }
.fx-min li b { font-weight: 500; color: var(--text-strong); }
@media (max-width: 720px) { .fx-num > summary { grid-template-columns: 44px minmax(0, 1fr); } .fx-num-meta { grid-column: 2; } }

/* ---------- шпаргалка ---------- */
.fx-sheet-app { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
.fx-sheet-side { display: grid; gap: var(--sp-5); position: sticky; top: calc(var(--fx-top) + var(--fx-modes) + var(--sp-4)); }
.fx-preset { display: grid; gap: 2px; width: 100%; text-align: left; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--solid); cursor: pointer; color: var(--text); font: inherit; }
.fx-preset:hover, .fx-preset[aria-pressed="true"] { border-color: var(--accent); }
.fx-preset[aria-pressed="true"] { box-shadow: inset 3px 0 0 var(--pen); }
.fx-preset b { font-weight: 500; color: var(--text-strong); font-size: var(--fs-sm); }
.fx-preset small { color: var(--text-soft); font-size: var(--fs-xs); line-height: 1.35; }
.fx-opt { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); }
.fx-opt select { font: inherit; padding: 6px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--solid); color: var(--text); }
.fx-a4-wrap { overflow-x: auto; padding-bottom: var(--sp-4); }
.fx-a4 { width: 794px; min-height: 1123px; margin: 0 auto; box-sizing: border-box; padding: 40px 44px; background: #fffefb; color: #23211d; box-shadow: 0 1px 0 var(--hair), 0 18px 40px -24px var(--sh); border: 1px solid var(--border); font-family: var(--font-body); }
.fx-a4 .katex { color: #23211d; }
.fx-a4-h { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 2px solid #23211d; padding-bottom: 8px; margin-bottom: 14px; }
.fx-a4-h h2 { font: 700 22px/1.2 var(--font-display); margin: 0; }
.fx-a4-h span { font: 400 11px/1 var(--font-mono); color: #67645e; }
.fx-a4-body { column-gap: 22px; column-rule: 1px solid rgba(35,33,29,.14); }
.fx-a4-body.c1 { columns: 1; } .fx-a4-body.c2 { columns: 2; } .fx-a4-body.c3 { columns: 3; }
.fx-a4-sec { break-inside: avoid-column; font: 600 10.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: #a04a3c; margin: 10px 0 6px; }
.fx-a4-it { break-inside: avoid; padding: 5px 0; border-bottom: 1px dotted rgba(35,33,29,.18); }
.fx-a4-it b { display: block; font: 600 11.5px/1.25 var(--font-body); }
.fx-a4-it .katex { font-size: 13px; }
.fx-a4-it small { display: block; font-size: 10px; line-height: 1.3; color: #67645e; margin-top: 2px; }
.fx-a4-it .fx-a4-x { float: right; border: 0; background: none; color: #858179; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.fx-a4-empty { color: #858179; text-align: center; padding: 120px 20px; font-size: 15px; line-height: 1.6; }
@media (max-width: 900px) { .fx-sheet-app { grid-template-columns: minmax(0, 1fr); } .fx-sheet-side { position: static; } .fx-a4 { transform-origin: top left; } }

/* ---------- проверь себя ---------- */
.fx-quiz { max-width: 760px; margin: 0 auto; }
.fx-quiz-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-6); }
.fx-flash { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--solid); padding: var(--sp-8) var(--sp-6); text-align: center; min-height: 340px; display: grid; align-content: center; gap: var(--sp-4); box-shadow: var(--shadow-raised); }
.fx-flash-meta { font: 400 var(--fs-xs)/1 var(--font-mono); color: var(--text-faint); }
.fx-flash-name { font: 600 var(--fs-2xl)/var(--lh-2xl) var(--font-display); color: var(--text-strong); margin: 0; }
.fx-flash-tex { font-size: 1.45rem; min-height: 3em; display: grid; place-items: center; overflow: hidden; }
.fx-flash-tex.hidden-tex { border: 2px dashed var(--border); border-radius: var(--radius-md); color: var(--text-faint); font-size: var(--fs-md); cursor: pointer; }
.fx-flash-tex .katex-display { margin: 0; }
.fx-flash-btns { display: flex; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; }
.fx-flash-btns .fx-btn.bad { border-color: var(--err); color: var(--err-fg); }
.fx-flash-btns .fx-btn.mid { border-color: var(--warn); color: var(--warn-fg); }
.fx-flash-btns .fx-btn.good { border-color: var(--ok); color: var(--ok-fg); }
.fx-progress { height: 6px; background: var(--hair); border-radius: 3px; overflow: hidden; margin: var(--sp-4) 0; }
.fx-progress i { display: block; height: 100%; background: var(--accent); transition: width var(--dur-base); }
.fx-boxes { display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-4); flex-wrap: wrap; }
.fx-boxes span { font: 400 var(--fs-xs)/1 var(--font-mono); padding: 6px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border); color: var(--text-soft); }

/* ---------- живые формулы ---------- */
.fx-live-list { display: grid; gap: var(--sp-8); }
.fx-live { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-6); padding: var(--sp-6); background: var(--solid); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.fx-live h2 { font: 600 var(--fs-xl)/var(--lh-xl) var(--font-display); color: var(--text-strong); margin: 0 0 var(--sp-2); }
.fx-live p { color: var(--text-soft); line-height: var(--lh-md); margin: 0 0 var(--sp-4); font-size: var(--fs-sm); }
.fx-live-tex { font-size: 1.15rem; padding: var(--sp-3) 0; overflow: hidden; min-height: 2.8em; }
.fx-live-tex .katex-display { margin: var(--sp-1) 0; text-align: left; }
.fx-slider { display: grid; grid-template-columns: 34px minmax(0, 1fr) 52px; align-items: center; gap: var(--sp-3); margin: var(--sp-2) 0; font: 400 var(--fs-sm)/1 var(--font-mono); }
.fx-slider input { width: 100%; accent-color: var(--accent); height: 28px; }
.fx-slider output { text-align: right; color: var(--text-strong); }
.fx-live-fig { display: grid; place-items: center; min-height: 340px; border-radius: var(--radius-md); background: var(--bg); background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 24px 24px; }
.fx-live-fig svg { width: 100%; height: auto; max-height: 420px; touch-action: none; }
.fx-live-verdict { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); background: var(--accent-soft); font-size: var(--fs-sm); line-height: var(--lh-md); }
.fx-live-links { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }
@media (max-width: 900px) { .fx-live { grid-template-columns: minmax(0, 1fr); padding: var(--sp-4); } .fx-live-fig { min-height: 280px; } .fx-live-tex { font-size: 1.02rem; } }

/* ---------- мелочи ---------- */
.fx-empty { text-align: center; padding: var(--sp-16) var(--sp-4); color: var(--text-soft); }
.fx-empty b { display: block; font: 600 var(--fs-xl)/1.3 var(--font-display); color: var(--text-strong); margin-bottom: var(--sp-2); }
.fx-toast { position: fixed; left: 50%; bottom: var(--sp-6); transform: translate(-50%, 20px); opacity: 0; z-index: var(--z-toast); background: var(--accent); color: var(--accent-fg); padding: 12px 18px; border-radius: var(--radius-sm); font-size: var(--fs-sm); transition: opacity var(--dur-base), transform var(--dur-base); pointer-events: none; }
.fx-toast.show { opacity: 1; transform: translate(-50%, 0); }
.fx-search-head { margin: 0 0 var(--sp-6); color: var(--text-soft); }
.fx-search-head b { color: var(--text-strong); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ---------- печать: только лист шпаргалки ---------- */
@media print {
  @page { size: A4; margin: 0; }
  body * { visibility: hidden; }
  .fx-a4, .fx-a4 * { visibility: visible; }
  .fx-a4 { position: absolute; left: 0; top: 0; box-shadow: none; border: 0; }
  .fx-a4-x { display: none; }
}