/* === НАЧАЛО: сброс и база === */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:var(--step-0);line-height:var(--lead);
  -webkit-font-smoothing:antialiased;overflow-x:clip;
  transition:background var(--t-slow) var(--ease),color var(--t-slow) var(--ease)}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;color:var(--fg);margin:0;line-height:1.1}
h1{font-size:var(--step-4);line-height:1.02}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-2);line-height:1.2}
p{margin:0 0 20px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:var(--ice);text-decoration:none}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.page{position:relative;z-index:var(--z-content)}
/* === КОНЕЦ: сброс и база === */

/* === НАЧАЛО: слои глубины. Снизу вверх: пространство, дно из точек, циферблат ставки, зерно, виньетка === */
.bg{position:fixed;inset:0;z-index:var(--z-bg);pointer-events:none;overflow:hidden}
/* пространство: три мягких пятна света, дрейфуют при прокрутке */
.bg__space{position:absolute;inset:-25% -10%;will-change:transform;
  background:
    radial-gradient(1000px 760px at 18% 20%,color-mix(in oklab,var(--ice) 18%,transparent),transparent 70%),
    radial-gradient(900px 900px at 84% 74%,color-mix(in oklab,var(--red) 13%,transparent),transparent 70%),
    radial-gradient(1400px 500px at 50% 100%,color-mix(in oklab,var(--ice) 10%,transparent),transparent 70%)}
/* солнечный зайчик: размытое пятно тёплого света с ярким ядром, плывёт при прокрутке и едва дышит */
.bg__sun{position:absolute;left:-14vw;top:-22vh;width:min(1100px,90vw);aspect-ratio:1;border-radius:50%;opacity:var(--sun-opacity);
  filter:blur(48px);will-change:transform;animation:sun-dyshit 9s ease-in-out infinite alternate;
  background:radial-gradient(circle at 50% 50%,var(--sun) 0%,var(--sun) 5%,var(--sun-halo) 22%,transparent 62%)}
/* второй блик: маленький отсвет по диагонали от солнца */
.bg__sun::after{content:"";position:absolute;left:78%;top:70%;width:22%;aspect-ratio:1.4;border-radius:50%;opacity:.55;
  background:radial-gradient(circle,var(--sun-halo) 0%,transparent 70%)}
@keyframes sun-dyshit{from{opacity:calc(var(--sun-opacity) * .85)}to{opacity:var(--sun-opacity)}}
@media (prefers-reduced-motion: reduce){.bg__sun{animation:none}}
/* дно: точечный растр в перспективе, уходит к горизонту */
.bg__far-wrap{position:absolute;left:-30vw;right:-30vw;bottom:-8vh;height:78vh;perspective:820px;perspective-origin:50% 0%;
  -webkit-mask-image:linear-gradient(to top,#000 22%,transparent 90%);mask-image:linear-gradient(to top,#000 22%,transparent 90%)}
.bg__far{position:absolute;inset:-48px 0 0 0;opacity:.75;filter:blur(.8px);transform-origin:50% 100%;will-change:transform;
  transform:rotateX(60deg);
  background:radial-gradient(circle,var(--floor-line) 1.6px,transparent 2.4px) 0 0/48px 48px}
/* горизонт: светящаяся линия там, где дно уходит вдаль */
.bg__horizon{position:absolute;left:0;right:0;bottom:calc(70vh - 8vh);height:3px;filter:blur(2px);opacity:.9;
  background:linear-gradient(90deg,transparent 5%,var(--horizon) 50%,transparent 95%)}
/* циферблат ставки: дуги с делениями в правом верхнем углу, поворачивается при прокрутке */
.bg__dial-wrap{position:absolute;inset:0;transition:transform var(--t-slow) var(--ease)}
.bg__dial-wrap.is-flip{transform:translate(6px,6px)}
.bg__dial{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.bg__dial g{transform-box:view-box;transform-origin:1500px -150px;will-change:transform}
.bg__dial .d-arc{fill:none;stroke:var(--line);stroke-width:1}
.bg__dial .d-tick{fill:none;stroke:var(--line);stroke-width:16;stroke-dasharray:1.5 26}
.bg__dial .d-tick--major{stroke:var(--ice);stroke-width:34;stroke-dasharray:3 152;opacity:.7}
.bg__dial .d-tick--fine{stroke-width:10;stroke-dasharray:1 12;opacity:.7}
/* стекло: зерно на всю страницу */
.bg__noise{position:absolute;inset:0;opacity:.035;background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
:root[data-theme="light"] .bg__noise{opacity:.018}
:root[data-theme="light"] .bg__dial{opacity:.38}
/* виньетка: края уходят вглубь, центр ближе к читателю */
.bg__vignette{position:absolute;inset:0;background:radial-gradient(110% 85% at 50% 38%,transparent 52%,var(--dno) 100%)}
/* === КОНЕЦ: слои глубины === */

/* === НАЧАЛО: дыхание аукциона, два мягких пятна не выше .10 === */
.breath{position:absolute;pointer-events:none;border-radius:50%;z-index:0}
.breath--ice{width:1100px;height:1100px;background:radial-gradient(circle,color-mix(in oklab,var(--ice) 10%,transparent),transparent 62%)}
.breath--red{width:900px;height:900px;background:radial-gradient(circle,color-mix(in oklab,var(--red) 8%,transparent),transparent 62%)}
/* === КОНЕЦ === */

/* === НАЧАЛО: стекло, слой 2 === */
.glass{position:relative;background:color-mix(in oklab, var(--surface) 88%, transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line);box-shadow:var(--sh-2)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,var(--glare),transparent 38%)}
.glass>*{position:relative}
/* === КОНЕЦ === */

/* === НАЧАЛО: сетка статьи === */
.article-grid{
  display:grid; gap:var(--gap);
  grid-template-columns:var(--rail) minmax(0,var(--measure)) var(--aside);
  justify-content:center; padding-inline:var(--gutter); align-items:start;
}
/* подложка под текстом (.article::before) шире колонки на 89: на 1024 без правой колонки она вылезала за экран на 58 px (24.09.2026) */
.article-grid{ overflow-x:clip; }
@media (max-width:1439px){ .article-grid{ grid-template-columns:var(--rail) minmax(0,var(--measure)); } }
@media (max-width:1023px){ .article-grid{ grid-template-columns:minmax(0,1fr); } }
/* широкий блок (лаборатория бюджета) встаёт во всю ширину экрана с полями страницы:
   ширину и сдвиг считает toc.js от реального положения колонки текста (--kalk-w, --kalk-shift).
   Оглавление слева и виджеты справа в этот момент уезжают. Без JS блок остаётся в колонке */
.bleed{ width:var(--kalk-w,100%); margin-left:calc(-1 * var(--kalk-shift,0px)) }
/* === КОНЕЦ: сетка статьи === */

/* === НАЧАЛО: кнопки, раздел 6.13 === */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:52px;padding:0 22px;
  border-radius:var(--r-m);font-family:var(--disp);font-weight:600;font-size:16px;letter-spacing:-.01em;white-space:nowrap;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.btn--primary{background:var(--red);color:var(--on-red);box-shadow:var(--glow-red)}
.btn--primary:hover{background:var(--red-deep);transform:translateY(-1px);box-shadow:var(--glow-red-strong)}
.btn--primary:active{transform:translateY(1px);box-shadow:none}
/* вторичная кнопка залита цветом заголовков: белая в тёмной теме, тёмная в светлой, чтобы не теряться рядом с красной */
.btn--ghost{background:var(--fg);color:var(--bg);box-shadow:var(--sh-1)}
.btn--ghost:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn--ghost:active{transform:translateY(1px);box-shadow:none}
.btn--sm{height:40px;padding:0 16px;font-size:14px}
/* мини-шкала из трёх делений, заполняется слева направо за 260 мс */
.btn__scale{position:relative;width:22px;height:10px;flex:none;opacity:.45;
  background:repeating-linear-gradient(90deg,currentColor 0 3px,transparent 3px 8px)}
.btn__scale::after{content:"";position:absolute;inset:0;width:0;
  background:repeating-linear-gradient(90deg,var(--on-red) 0 3px,transparent 3px 8px);transition:width 260ms var(--ease-out)}
.btn--ghost .btn__scale::after{background:repeating-linear-gradient(90deg,var(--red) 0 3px,transparent 3px 8px)}
.btn:hover .btn__scale{opacity:1}
.btn:hover .btn__scale::after{width:100%}
/* === КОНЕЦ: кнопки === */

/* === НАЧАЛО: появления при скролле, один раз, только у помеченных элементов === */
.js [data-reveal]{opacity:0;transform:translateY(16px);
  transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out);transition-delay:var(--d,0ms)}
.js [data-reveal].is-in{opacity:1;transform:none}
/* === КОНЕЦ === */