/* stockscreener.finance — глобальні токени і базові поверхні.
   Канон: language/claude-design-prompt.md. Фіолетовий заборонений у будь-якій ролі.
   Шрифти self-hosted — підключаються окремим <link> на /static/fonts/fonts.css
   у темплейті (жодних зовнішніх CDN, GDPR/privacy + перший рендер без round-trip). */

:root{
  /* --- драбина акценту (петроль) --- */
  --petrol-100:#7BE8F5; --petrol-200:#3FD3E8; --petrol-300:#12A0BE; --petrol-400:#0E8FA8;
  --petrol-500:#0E7E9E; --petrol-600:#0B6C92; --petrol-700:#0A4374; --petrol-800:#062B3A;
  /* --- сцена --- */
  /* ВІДСТУП ВІД ЕТАЛОНА (власник 2026-08-20): scene-1/2 світліші і блоби
     насиченіші проти design-system/styles.css — «долить краски, соковитіше». */
  --scene-1:#11607E; --scene-2:#0A3E54; --scene-3:#041A24; --scene-4:#020A0F;
  --glow-main:#17B5D6; --glow-shadow:#1C4FC7; --glow-warm:#C2701F; --glow-spec:#5FE6F5;
  /* --- семантика: ТІЛЬКИ рух ціни і дельти --- */
  --up:#67E08C; --down:#FF6B85;
  /* --- токен категорії-попередження (stale/leveraged/rate-limit тощо) —
     НЕ семантика руху ціни, нейтрально-акцентний амбер. Раніше жив лише
     хардкодом #E0A85C по сторінках + локальним :root news_v3.css:22
     (лишається — сумісний override, той самий колір). --- */
  --tag-amber:#E0A85C;
  /* --- текст --- */
  /* Тихий кінець рампи піднято ВДРУГЕ (2026-08-21, детермінований контраст-sweep):
     на СКЛЯНИХ панелях (backdrop-filter поверх сцени) фон ~1.5× світліший за темний
     surface, тож --text-head #6E93A0 давав 4.31:1, --text-faint #688C99 — 3.94:1
     (обидва < 4.5 AA) — «сіре на сірому», нечитабельні функціональні мітки/нотатки/дати.
     Рамп був налаштований під surface, не під скло. Нові значення клирять 4.5:1 і на склі.
     Читабельність > тонка градація тихого кінця. */
  --text:#EAF6F9; --text-2:#A9C8D2; --text-3:#8FB6C2; --text-head:#8AB0BC; --text-faint:#7FA6B3;
  /* --- непрозорі поверхні (щільні дані) --- */
  --surface:#061A22; --surface-border:#103240; --surface-rule:#0D2833; --surface-text:#C3D9E1;
  /* --- скло --- */
  /* ЗАТЕМНЕНО (2026-08-22, real-pixel адверсаріальний аудит): білий фрост робив
     картки СВІТЛИМИ (rgb ~90-160), приглушений текст-рамп на них провалював WCAG
     до 1.2-3.9:1 («сіре на сірому»). Темна основа замість білого фросту → картки
     темні, увесь рамп читається; тонкий білий inset-rim (у --glass-shadow) лишає
     скляний край. saturate знижено 200→140% — менше яскравого просвічування сцени. */
  --glass-fill:linear-gradient(135deg,rgba(10,32,43,.62) 0%,rgba(6,23,32,.72) 50%,rgba(4,17,24,.80) 100%);
  --glass-blur:blur(30px) saturate(140%); /* @kind other */
  --glass-shadow:0 36px 80px -28px rgba(0,0,0,.9),0 0 78px -22px rgba(34,200,226,.42),0 0 30px -14px rgba(12,90,140,.5),inset 1.5px 1.5px 0 rgba(214,248,255,.4),inset -1px -1px 0 rgba(255,255,255,.06),inset 0 -28px 46px -32px rgba(0,10,16,.95);
  --glass-shadow-quiet:0 2px 4px -2px rgba(0,0,0,.6),0 14px 28px -14px rgba(0,0,0,.75),0 40px 84px -30px rgba(0,0,0,.92),0 0 34px -18px rgba(12,90,140,.5),inset 1.5px 1.5px 0 rgba(214,248,255,.42),inset -1px -1px 0 rgba(255,255,255,.07),inset 0 -30px 50px -34px rgba(0,10,16,.95);
  --glass-shadow-hover:0 3px 6px -2px rgba(0,0,0,.6),0 22px 42px -16px rgba(0,0,0,.8),0 54px 100px -32px rgba(0,0,0,.95),0 0 52px -20px rgba(34,200,226,.4),inset 1.5px 1.5px 0 rgba(214,248,255,.55),inset -1px -1px 0 rgba(255,255,255,.09),inset 0 -30px 50px -34px rgba(0,10,16,.95);
  /* --- типографіка --- */
  --font:"Manrope",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace; /* @kind font */
  /* --- радіуси, крок --- */
  --r-lg:26px; --r-md:22px; --r-sm:16px; --r-pill:999px;
  --s-1:6px; --s-2:10px; --s-3:14px; --s-4:20px; --s-5:28px; --s-6:40px; --s-7:56px;
  /* --- зерно --- */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); /* @kind other */
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--scene-4);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:var(--petrol-200);text-decoration:none}
a:hover{color:var(--petrol-100)}
h1,h2,h3{margin:0;letter-spacing:-.01em;text-wrap:pretty}
.ss-num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
/* ss-label eyebrow: 9.5px→11px (2026-08-21, browser-audit undersized-ui-text): функціональні
   eyebrow/nav-заголовки (footer Navigate/Resources/Legal) під 11px = legibility fail на
   high-DPI/mobile. 11px-floor > стилістика eyebrow. */
/* колір: --text-head→--text-2 (2026-08-21): eyebrow-мітки на СКЛІ (картки snapshot/
   glass-панелі) з --text-head #6E93A0 давали «сіре на сірому», нечитабельно (власник).
   Browser-audit це флагував, але раніше відфільтровано як «свідома тиха мова» — хибно:
   функціональна мітка мусить читатись. --text-2 читабельний на склі й на surface. */
.ss-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
/* text-shadow: ss-meta (section-номери) сидить на СЦЕНІ, яка на верхніх ділянках
   світла — темна тінь дає читабельність незалежно від того, світлий фон чи темний
   (контраст-sweep: єдиний залишок після затемнення скла). */
.ss-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--text-2);text-shadow:0 1px 4px rgba(2,10,15,.7)}
/* публічний API для споживачів: семантика РУХУ ЦІНИ, більше ніде */
.ss-up{color:var(--up)}
.ss-down{color:var(--down)}
/* розраховані нами величини, а не з даних: маркер ∑ */
.ss-derived{border-block-end:1px dotted rgba(169,200,210,.5)}
.ss-derived::after{content:'∑';font-family:var(--mono);font-size:.62em;vertical-align:.5em;color:var(--petrol-100);margin-inline-start:2px}

/* ---------- СЦЕНА: 5 шарів ---------- */
.ss-scene{position:relative;isolation:isolate;
  background:radial-gradient(90% 70% at 12% 4%,rgba(255,255,255,.10),rgba(255,255,255,0) 46%),
    radial-gradient(135% 105% at 72% -14%,var(--scene-1) 0%,var(--scene-2) 34%,var(--scene-3) 62%,var(--scene-4) 100%);
  box-shadow:inset 0 -120px 160px -90px rgba(0,0,0,.95)}
.ss-scene::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.24;mix-blend-mode:overlay;background-image:var(--grain)}
.ss-scene>*{position:relative;z-index:1}
.ss-blob{position:absolute;pointer-events:none;z-index:0;border-radius:50%;filter:blur(90px);will-change:filter;animation:ss-drift 26s ease-in-out infinite alternate}
.ss-blob-main{background:radial-gradient(circle,rgba(23,181,214,.80) 0%,rgba(23,181,214,.42) 32%,rgba(23,181,214,.16) 52%,transparent 74%)}
.ss-blob-shadow{background:radial-gradient(circle,rgba(28,79,199,.64) 0%,rgba(28,79,199,.34) 32%,rgba(28,79,199,.13) 54%,transparent 76%)}
.ss-blob-warm{background:radial-gradient(circle,rgba(194,112,31,.36) 0%,rgba(194,112,31,.20) 34%,rgba(194,112,31,.08) 56%,transparent 78%)}
.ss-blob-spec{background:radial-gradient(circle,rgba(95,230,245,.46) 0%,rgba(95,230,245,.22) 30%,rgba(95,230,245,.08) 52%,transparent 74%)}

/* ---------- СКЛО ---------- */
.ss-glass{position:relative;isolation:isolate;border-radius:var(--r-lg);color:var(--text);
  background:var(--glass-fill);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow)}
.ss-glass-quiet{box-shadow:var(--glass-shadow-quiet)}
.ss-glass::before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:2;pointer-events:none;
  background:linear-gradient(118deg,rgba(224,252,255,.22) 0%,rgba(255,255,255,.055) 24%,transparent 46%)}
.ss-glass::after{content:'';position:absolute;inset:0;border-radius:inherit;z-index:3;pointer-events:none;opacity:.2;mix-blend-mode:overlay;background-image:var(--grain)}
.ss-glass>*{position:relative;z-index:1}
.ss-inset{border-radius:var(--r-sm);background:rgba(255,255,255,.055);box-shadow:inset 1px 1px 0 rgba(214,248,255,.22)}

/* ---------- ПОСИЛАННЯ-СУТНОСТІ ----------
   У щільній таблиці шість-сорок посилань в один стовпець: петролевий колір на кожному
   зробив би сітку крикливою. Тому в спокої посилання тримає колір свого рядка, а що воно
   клікабельне, кажуть дві тихі речі: пунктирне підчеркування на відступі і курсор.
   Під курсором воно вже не соромиться: колір петролю, підчеркування суцільне. */
.ss-link{color:inherit;text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:1px;text-decoration-color:rgba(169,200,210,.42);text-underline-offset:3px;transition:color var(--react),text-decoration-color var(--react)}
.ss-link:hover{color:var(--petrol-100);text-decoration-style:solid;text-decoration-color:rgba(123,232,245,.85)}
.ss-surface table tbody tr:hover .ss-link{text-decoration-color:rgba(169,200,210,.7)}
.ss-surface table td:first-child .ss-link{font-weight:600}

/* ---------- НЕПРОЗОРА ПОВЕРХНЯ (щільні дані) ---------- */
.ss-surface{border-radius:18px;background:var(--surface);border:1px solid var(--surface-border);
  box-shadow:0 24px 52px -30px rgba(0,0,0,.95);color:var(--surface-text)}

/* ---------- РОЗКЛАДКА: mobile-first ----------
   базовий стан — 360px в одну колонку; далі три пороги:
   768 планшет · 1024 ноутбук (з рейкою TOC) · 1600 ультраширокий */
.ss-page{width:100%;max-width:1240px;margin-inline:auto;padding-inline:16px}
@media(min-width:768px){.ss-page{padding-inline:24px}}
@media(min-width:1600px){.ss-page{max-width:1520px}}
.ss-shell{display:grid;gap:22px;align-items:start}
@media(min-width:1024px){.ss-shell{grid-template-columns:206px minmax(0,1fr);gap:32px}}
@media(min-width:1600px){.ss-shell{grid-template-columns:240px minmax(0,1fr);gap:44px}}
.ss-hero-grid{display:grid;gap:12px}
@media(min-width:900px){.ss-hero-grid{grid-template-columns:minmax(0,1fr) 260px;gap:14px}}
.ss-hero-panel{display:flex;align-items:center}
.ss-kpi-row{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
@media(min-width:900px){.ss-kpi-row{grid-template-columns:1fr}}
.ss-stack{display:grid;gap:12px}
/* видимістю за порогом володіє КЛАС, а не інлайн: інлайновий display перемагає
   правило таблиці, і елемент лишається в потоці на мобільному, розтягуючи рядок */
.ss-only-desktop{display:none!important}
@media(min-width:1024px){
  .ss-only-desktop{display:block!important}
  .ss-only-desktop.ss-row{display:flex!important}
}
.ss-only-mobile{display:block}
@media(min-width:1024px){.ss-only-mobile{display:none}}

/* ---------- ЗМІСТ, ЩО ЙДЕ ЗА ЮЗЕРОМ ---------- */
.ss-toc{position:sticky;inset-block-start:14px;max-height:calc(100vh - 28px);overflow-y:auto;overscroll-behavior:contain}
/* desktop-рейл: власна тиха скляна підкладка (2026-08-21, dual-agent critique P0).
   Голий текст поверх сцени давав 1.9:1 на світлому верху #11607E (browser-audit
   #688c99 on #11607e ×27) — контраст залежав від того, яка ділянка радіального
   градієнта опинялась позаду при скролі. Темний fill (α=.9) робить контраст
   інваріантним до сцени: усі токени рампи ≥4.5:1 навіть над найсвітлішим scene-1
   (перевірено математично). Скоуп .ss-only-desktop — мобільну копію .ss-toc у
   .ss-toc-sheet .panel (там уже темний градієнт) НЕ чіпаємо. Edge через inset-ring,
   без патерну «1px border + широка тінь» (детектор його флагує). */
.ss-toc.ss-only-desktop{padding:12px 8px;border-radius:var(--r-md);background:rgba(6,26,34,.9);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 12px 30px -18px rgba(0,0,0,.75),inset 1.5px 1.5px 0 rgba(214,248,255,.16),inset -1px -1px 0 rgba(255,255,255,.05)}
.ss-toc a{display:flex;gap:10px;align-items:baseline;padding-block:7px;padding-inline-start:11px;font-size:12.5px;color:var(--text-2);border-inline-start:2px solid transparent}
.ss-toc a:hover{color:var(--text)}
/* Активний індикатор — ЛИШЕ ковзний .ss-toc-mark (design-motion.css) + bold.
   Статичний border-inline-start прибрано: разом з mark давав ДВІ смуги зліва
   («подвійний підсвіт»). border лишається transparent (рядок вище) — резервує
   2px, текст не стрибає. */
.ss-toc a[aria-current="true"]{color:var(--text);font-weight:600}
/* номер секції 9.5→11px (2026-08-21 critique): був нижче нашого 11px functional-floor
   (browser-audit undersized 9.5px ×360). На темному рейлі text-faint читається. */
.ss-toc a i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--text-faint)}
.ss-toc a[aria-current="true"] i{color:var(--petrol-100)}
.ss-toc-fab{position:fixed;inset-block-end:16px;inset-inline-start:16px;inset-inline-end:16px;z-index:40;display:flex;align-items:center;gap:10px;justify-content:center;padding:14px 18px;border:0;border-radius:var(--r-pill);font-family:var(--font);font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--text);background:rgba(10,45,58,.82);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);box-shadow:0 18px 40px -16px rgba(0,0,0,.9),inset 1.5px 1.5px 0 rgba(214,248,255,.3)}
.ss-toc-sheet{position:fixed;inset:0;z-index:50;display:none}
.ss-toc-sheet[data-open="true"]{display:block}
.ss-toc-sheet .veil{position:absolute;inset:0;background:rgba(2,10,15,.72)}
.ss-toc-sheet .panel{position:absolute;inset-inline:0;inset-block-end:0;max-height:78vh;overflow-y:auto;padding:22px 20px 26px;border-start-start-radius:24px;border-start-end-radius:24px;background:linear-gradient(180deg,rgba(13,70,88,.96),rgba(6,26,34,.98));box-shadow:0 -30px 70px -20px rgba(0,0,0,.95),inset 0 1.5px 0 rgba(214,248,255,.34)}

/* ---------- СЕГМЕНТОВАНІ КЕРУВАННЯ (періоди, гранулярність, тип) ---------- */
.ss-seg{display:flex;gap:4px;flex-wrap:wrap}
.ss-seg button{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:7px 11px;border:0;border-radius:var(--r-pill);background:rgba(255,255,255,.06);color:var(--text-3);cursor:pointer;box-shadow:inset 1px 1px 0 rgba(214,248,255,.14)}
.ss-seg button:hover:not(:disabled){color:var(--text)}
.ss-seg button[aria-pressed="true"]{background:var(--petrol-600);color:var(--text)}
.ss-seg button:disabled{opacity:.3;cursor:not-allowed}
.ss-seg-label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);align-self:center;margin-inline-end:2px}

/* ---------- пагінація (prev/next + "Page X of Y") ----------
   Реєстровий блок UI-KIT.md _pagination_v3.html — раніше жив лише в
   news_v3.css (page-CSS), тому fund/institution/person_v3 (не підключають
   news_v3.css) рендерили голий, нестильований пейджер. Перенесено сюди як
   глобальний шар (design-system.css), news_v3.css більше НЕ дублює. */
.nv3-pagenav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px}
.nv3-pagelink{display:inline-flex;align-items:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 14px;border-radius:var(--r-pill);background:rgba(255,255,255,.06);color:var(--text-2);
  box-shadow:inset 1px 1px 0 rgba(214,248,255,.14);transition:background var(--react),color var(--react)}
.nv3-pagelink:hover{color:var(--text);background:rgba(255,255,255,.11)}
.nv3-pagelink.is-disabled{opacity:.32;pointer-events:none}

/* ---------- перехрестя таблиці ---------- */
.ss-table tbody tr:hover td{background:rgba(255,255,255,.035)}
.ss-table td[data-hot="true"]{background:rgba(255,255,255,.035)}
.ss-table tbody tr:hover td[data-hot="true"]{background:rgba(123,232,245,.10);color:var(--text)}
.ss-table th[data-hot="true"]{color:var(--petrol-100)}
.ss-table tbody tr:hover td:first-child{color:var(--text)}

/* ---------- активна секція, за якою стежить зміст ---------- */
[data-ss-active]{position:relative}
[data-ss-active]::before{content:'';position:absolute;inset-block:2px;inset-inline-start:-18px;width:2px;border-radius:2px;opacity:0;transform:scaleY(.35);transform-origin:top;background:linear-gradient(180deg,rgba(123,232,245,.85),rgba(63,211,232,.25) 55%,rgba(10,67,116,0));transition:opacity .45s ease,transform .55s cubic-bezier(.22,.61,.36,1)}
[data-ss-active="true"]::before{opacity:1;transform:scaleY(1);box-shadow:0 0 20px 1px rgba(63,211,232,.35)}
@media(max-width:1023px){[data-ss-active]::before{inset-inline-start:-8px}}

/* ---------- цінова лінійка: одна вісь тримає весь блок ---------- */
.ss-ruler{display:flex;flex-direction:column;gap:18px;flex:1 1 auto;justify-content:center}
.ss-ruler-head{display:flex;align-items:center;gap:11px}
.ss-ruler-logo{flex:0 0 36px;height:36px;border-radius:11px;display:grid;place-items:center;font-family:var(--mono);font-size:7px;letter-spacing:.06em;color:#5E8492;background:repeating-linear-gradient(115deg,rgba(255,255,255,.055) 0 3px,transparent 3px 9px);box-shadow:inset 1px 1px 0 rgba(214,248,255,.16)}
.ss-ruler-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.ss-ruler-id b{font-size:10.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--petrol-200)}
.ss-ruler-id span{font-size:13px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-ruler-asof{margin-inline-start:auto;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);white-space:nowrap}
.ss-ruler-body{position:relative;padding-block-start:62px}
.ss-ruler-readout{position:absolute;inset-block-start:0;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:3px;white-space:nowrap}
.ss-ruler-readout b{font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--text);text-shadow:0 3px 16px rgba(0,0,0,.75),0 0 26px rgba(123,232,245,.35)}
.ss-ruler-readout .ss-label{font-size:9px}
.ss-ruler-readout em{font-style:normal}
.ss-ruler-track{position:relative;height:12px;border-radius:7px;background:linear-gradient(180deg,rgba(2,14,20,.62),rgba(255,255,255,.045));box-shadow:inset 0 2px 4px rgba(0,0,0,.66),inset 0 -1px 0 rgba(214,248,255,.14)}
.ss-ruler-fill{position:absolute;inset-block:0;inset-inline-start:0;transform-origin:left center;border-radius:7px;background:linear-gradient(90deg,rgba(10,67,116,.5),rgba(18,160,190,.55) 55%,rgba(123,232,245,.85));box-shadow:0 0 22px -4px rgba(63,211,232,.5),inset 0 1px 0 rgba(255,255,255,.28)}
.ss-ruler-needle{position:absolute;inset-block:-7px;inset-inline-start:0;width:2px;translate:-50% 0;border-radius:2px;background:linear-gradient(180deg,#EAFDFF,#7BE8F5 45%,#0E7E9E);box-shadow:0 0 16px 2px rgba(123,232,245,.8),0 0 40px 8px rgba(47,200,225,.28)}
.ss-ruler-needle::after{content:'';position:absolute;inset-inline-start:50%;inset-block-start:-5px;translate:-50% 0;width:9px;height:9px;border-radius:50%;background:radial-gradient(120% 120% at 32% 26%,#F2FEFF,#7BE8F5 46%,#0E7E9E);box-shadow:0 0 18px 3px rgba(123,232,245,.75);animation:ss-dot-pulse 6s ease-in-out infinite}
@keyframes ss-dot-pulse{50%{box-shadow:0 0 28px 5px rgba(123,232,245,.95)}}
.ss-ruler-spans{display:flex;margin-block-start:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}
.ss-ruler-spans span{min-width:0;padding-inline-end:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-ruler-spans span+span{text-align:end;padding-inline:8px 0}
.ss-ruler-spans em{font-style:normal;font-weight:600;color:var(--text-2)}
/* Mobile: ціна-readout плаває на голці (inset-inline-start:price% від JS) + translate
   -50% — на вузькому екрані широкий "$303.29" (34px) вилазив за правий край картки,
   коли голка близько до 52W-high. На mobile робимо readout СТАТИЧНИМ по центру. */
@media(max-width:600px){
  .ss-ruler-body{padding-block-start:0}
  .ss-ruler-readout{position:static;translate:none;align-items:center;margin-block-end:14px}
  .ss-ruler-readout b{font-size:28px}
}
.ss-ruler-ends{display:flex;justify-content:space-between;margin-block-start:8px}
.ss-ruler-ends span{display:flex;flex-direction:column;gap:1px}
.ss-ruler-ends span+span{align-items:flex-end}
.ss-ruler-ends b{font-size:12px;font-weight:600;color:var(--text-3)}
.ss-ruler-ends .ss-label{font-size:8.5px}
@media(max-width:520px){.ss-ruler-readout b{font-size:27px}.ss-ruler-body{padding-block-start:54px}}
.ss-shell>*{min-width:0}
/* сцена більше не обрізає overflow: clip/hidden-контейнер між рейкою і скролером
   ламає position:sticky. Пятна тримаємо в межах екрана інакше. */
body{overflow-x:hidden}
/* світіння живе в окремому шарі, що обрізає себе сам: overflow тут не заважає
   sticky, бо цей шар не є предком рейки змісту */
.ss-glow{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;border-radius:inherit;
  -webkit-mask-image:radial-gradient(140% 100% at 50% 30%,#000 62%,rgba(0,0,0,.45) 84%,transparent 100%);
  mask-image:radial-gradient(140% 100% at 50% 30%,#000 62%,rgba(0,0,0,.45) 84%,transparent 100%)}
/* зміст їде за юзером: обгортка монтування має нульову висоту, тому їй потрібна
   явна висота, інакше sticky не має за що зачепитися */
.ss-shell>*:first-child{display:block!important}
@media(min-width:1024px){
  .ss-shell>*:first-child{align-self:stretch;height:100%}
  .ss-shell>*:first-child>.ss-toc{position:sticky;inset-block-start:14px;max-height:calc(100vh - 28px);overflow-y:auto}
}

/* ---------- МОТОРИКА ----------
   один часовий профіль на всю систему:
   вхід .55s cubic-bezier(.22,.61,.36,1), реакція на курсор .28s */
:root{--ease:cubic-bezier(.22,.61,.36,1); /* @kind other */
  --in:.55s var(--ease); /* @kind other */
  --react:.28s var(--ease) /* @kind other */}
/* ПОЯВА БЛОКІВ ВИКЛЮЧЕНА СВІДОМО.
   У цьому рендерері годинник анімацій не йде: document.timeline.currentTime лишається 0,
   rAF не викликається. Будь-яка анімація або перехід, що несе видимість, назавжди
   застигає на нульовому кадрі — це вже тричі робило сторінку порожньою. Тому видимість
   не залежить ні від чого: блоки просто видимі. Рух лишається там, де його вмикає юзер
   (ховер, фокус, натиск) — якщо годинник стоїть, такий рух просто спрацьовує миттєво. */
.sec{scroll-margin-block-start:20px}
@media(prefers-reduced-motion:reduce){
  .ss-ruler-needle::after,.ss-blob{animation:none}
  .ss-blob{filter:blur(90px)}
  .ss-seg button,.lnk,.stub,.ss-inset,.ss-surface,.ss-glass{transition:none}
}

.ss-seg::-webkit-scrollbar{display:none}
.ss-seg button{flex:0 0 auto}
/* ніщо в потоці не ширше за екран */
.ss-inset,.ss-glass,.ss-surface{max-width:100%}
@media(max-width:519px){
  .ss-page{padding-inline:12px}
  .ss-ruler-spans{font-size:8.5px}
  .ss-ruler-ends b{font-size:11px}
}

/* шапка на вузьких екранах: поле пошуку має право стискатися, підказка ⌘K зайва.
   Правила з !important, бо ширини всередині компонента задані інлайном. */
@media(max-width:1023px){
  header>div>div:has(input){flex:1 1 60px!important;max-width:none!important;min-width:0!important}
  header .ss-inset{min-width:0}
}
@media(max-width:519px){
  header kbd{display:none}
  header>div{gap:8px!important}
}
@keyframes ss-drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(2%,-2.5%,0) scale(1.05)}}