:root{
  --paper: #f4ede0;
  --paper-2: #ece2d0;
  --paper-3: #e3d6bd;
  --ink: #1a2238;
  --ink-soft: #2b3656;
  --ink-mute: #4d5876;
  --line: #c9bca0;
  --line-soft: #d9cfb8;
  --accent: #c0392b;
  --accent-deep: #8f2a20;
  --ok: #2d6a4f;
  --ok-bg: #d7e9dd;
  --err: #9d2727;
  --err-bg: #f1d7d0;

  --f-display: 'Fraunces', 'Times New Roman', serif;
  --f-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}

body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.35;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.13 0 0 0 0 0.22 0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

.hidden{display:none !important}

.katex{font-size:1.02em !important}
.theory .formula .katex{font-size:1.12em !important}

/* ============ Глобальный фон с парящими формулами ============ */
#floatingBg{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  overflow:hidden;
}
#floatingBg .floating-symbols{position:absolute;inset:0}
#floatingBg .float-sym{
  position:absolute;
  font-family:var(--f-display);font-style:italic;
  color:var(--ink-mute);
  opacity:.28;
  animation-name:bg-float;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  animation-duration:var(--dur, 22s);
  animation-delay:var(--delay, 0s);
  font-variation-settings:"opsz" 72;
  letter-spacing:-0.02em;
  text-shadow:0 2px 8px rgba(0,0,0,.04);
  will-change:transform, opacity;
}
/* Постоянное движение: вертикальный drift + горизонтальный + ротация.
   Символ всегда видим; fade происходит только на концах цикла. */
@keyframes bg-float{
  0%   {opacity:.08;transform:translate(0, 30px) rotate(calc(var(--rot, 0deg) * -1)) scale(.88)}
  10%  {opacity:.28}
  25%  {transform:translate(calc(var(--drift, 0) * 0.5), 10px) rotate(calc(var(--rot, 0deg) * -0.3)) scale(.96)}
  50%  {opacity:.42;transform:translate(var(--drift, 0), -8px) rotate(var(--rot, 0deg)) scale(1.02)}
  75%  {opacity:.32;transform:translate(calc(var(--drift, 0) * 1.4), -28px) rotate(calc(var(--rot, 0deg) * 0.5)) scale(.98)}
  90%  {opacity:.18}
  100% {opacity:.06;transform:translate(calc(var(--drift, 0) * 2), -60px) rotate(calc(var(--rot, 0deg) * -0.5)) scale(.85)}
}

/* Весь контент — поверх фона */
.shell{position:relative;z-index:1}

/* Уважение prefers-reduced-motion — замедляем до пяти минут на цикл,
   не останавливаем полностью, чтобы не выглядело сломанным. */
@media (prefers-reduced-motion: reduce){
  #floatingBg .float-sym{
    animation-duration:calc(var(--dur, 22s) * 10);
    opacity:.2;
  }
}