@font-face{font-family:NotoSerifKir;font-weight:700;font-display:swap;src:url(/fonts/noto-serif-bold-kir.woff2) format("woff2")}
/* К2-7 (решение владельца 25.09): тема только тёмная, единственный :root — токены К2 из
   docs/design/koloda-k2-raskladi.html (строки 14–22), без переключателя и media-запроса. */
:root{--nebo:#0d082b;--plashka:#140c2c;--tekst:#efe6d2;--tih:#b9aed6;--ramka-tih:#3a2d66;
 --z:#6ee7a8;--j:#ffd166;--k:#ff7a85;--knopka:#e8b640;--knopka-t:#140c2c;
 --zoloto:#e8b640;--glyph:#140c2c;--zvezda:rgba(255,246,220,.55);--fokus:#5fb8d6;
 --serif:NotoSerifKir,"Noto Serif",Georgia,"Times New Roman",serif;
 --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono","DejaVu Sans Mono",monospace;
 --ramka:var(--ramka-tih);       /* алиас для site/static/retro.css (8а-сборка, вне К2-7) */
 color-scheme:dark}
/* К2-4: вёрстка «умеренно» (docs/design/2026-09-25-k2-sokrashchenie.md, макет koloda-k2-raskladi.html ред. 3,
   только тёмная палитра). Текст — системным шрифтом, заголовки — Noto Serif Bold. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--tekst);font:16px/1.5 var(--sans);background-color:var(--nebo);
 background-image:radial-gradient(1px 1px at 23px 41px,var(--zvezda) 50%,transparent 60%),radial-gradient(1px 1px at 151px 127px,var(--zvezda) 50%,transparent 60%);
 background-size:260px 260px}
a{color:inherit}
:focus-visible{outline:2px solid var(--fokus);outline-offset:3px;border-radius:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.shapka,main{max-width:640px;margin:0 auto;padding:0 16px}
/* задача 16: низ страницы не заезжает под системные жесты/панель Telegram — на сайте
   env(safe-area-inset-bottom) не задан браузером и равен 0, поведение сайта не меняется */
main{padding-bottom:max(16px,env(safe-area-inset-bottom))}
.shapka{display:flex;align-items:center;gap:8px;height:52px}
.logo{font:700 14px/1 var(--serif);letter-spacing:.08em;text-transform:uppercase;color:var(--zoloto);text-decoration:none;white-space:nowrap}
.menu{margin-left:auto;display:flex;gap:4px}
.menu a{font:500 13px/1 var(--sans);color:var(--tih);text-decoration:none;padding:9px;border-radius:3px;white-space:nowrap}
/* фигуры светофора и цвета меток */
.fig .f{stroke:transparent;stroke-width:1.2;stroke-linejoin:round}
.fig .g{fill:none;stroke:var(--glyph);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fig-z .f{fill:var(--z)}.fig-j .f{fill:var(--j)}.fig-k .f{fill:var(--k)}
.z{color:var(--z)}.j{color:var(--j)}.k{color:var(--k)}
/* вердикт */
.verdikt{text-align:center;padding:6px 0 0}
.lampa{width:72px;height:72px;margin:0 auto;display:grid;place-items:center;border-radius:50%;border:1px solid var(--zoloto)}
.lampa .fig{width:48px;height:48px}
.status{margin:10px 0 0;font:700 14px/1.4 var(--mono)}
.obshchij{margin:2px 0 0;color:var(--tih);font:12px/1.4 var(--mono)}
h1{font:700 clamp(22px,6vw,30px)/1.2 var(--serif);margin:6px 0 4px;text-wrap:balance}
.verdikt h1{text-align:center}
.data{margin:0;color:var(--tih);font:13px/1.4 var(--mono);text-align:center}
/* строка параметров «Расклад на [релиз ▾] [роль: любая ▾]» (К2-6): нативные списки 44 px, на 390 px в одну строку */
.param{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:16px 0 10px;font:700 12px/1.2 var(--serif);color:var(--zoloto);letter-spacing:.04em;text-transform:uppercase}
/* max-width 200px (решение владельца 26.09, ревью ветки rol-traffic): на 390 px строка «Расклад на
   релиз» + список роли снова в одну линию (К2-6) с самой длинной подписью «трафик-менеджер / performance»
   (В2а); закрытый список её обрезает многоточием, в раскрытом списке подпись видна целиком — так её
   ширину не стилизуют браузеры. */
.param select{font:600 13px/1.2 var(--mono);letter-spacing:0;text-transform:none;color:var(--tekst);background:var(--plashka);border:1px solid var(--zoloto);border-radius:3px;padding:9px 26px 9px 9px;min-height:44px;appearance:none;-webkit-appearance:none;
 background-image:linear-gradient(45deg,transparent 50%,var(--zoloto) 50%),linear-gradient(135deg,var(--zoloto) 50%,transparent 50%);background-position:calc(100% - 14px) 19px,calc(100% - 9px) 19px;background-size:5px 5px;background-repeat:no-repeat;
 max-width:min(100%,200px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.param select#rol{border-color:var(--ramka-tih)}
/* без скрипта список роли не работает: вместо него ссылки из <noscript> (CSP без инлайн-стилей — медиазапрос) */
@media (scripting:none){.param select#rol{display:none}}
/* три карты: положение по статусу — прямо, с наклоном, перевёрнута */
.rasklad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;list-style:none;margin:0 auto;padding:0;max-width:480px}
.rasklad li{position:relative;text-align:center}
button.karta{all:unset;display:block;border-radius:3px;position:relative;transition:transform .5s cubic-bezier(.3,.7,.3,1)}
button.karta:focus-visible{outline:2px solid var(--fokus);outline-offset:3px}
.karta picture{display:block}
.karta img{display:block;width:100%;height:auto;aspect-ratio:200/315;border-radius:3px}
[data-s=warn] .karta{transform:rotate(-7deg)}
[data-s=fail] .karta{transform:rotate(180deg)}
.rasklad li>.fig{position:absolute;right:-6px;top:-6px;width:24px;height:24px}
.faktor{display:block;margin:8px 0 0;font:700 12px/1.3 var(--mono)}
.faktor>*{display:block}
.faktor b{color:var(--tekst)}
.faktor i{font-style:normal;font-weight:400;color:var(--tih)}
.rasklad li.moya .karta img{outline:2px solid var(--zoloto);outline-offset:2px}
.moya-m{display:block;font:11px/1.2 var(--mono);color:var(--zoloto);margin-top:2px}
/* крупный просмотр карты (К2-5, макет koloda-k2-raskladi.html ред. 3, тёмная палитра): dialog на весь экран,
   картинка по ширине min(94vw, 720px) и по высоте экрана без скачка до загрузки; touch-action:pinch-zoom:
   щипком карту можно увеличить, а свайп одним пальцем доходит до pointerup, а не уходит в прокрутку.
   Страница под диалогом не прокручивается, место полосы прокрутки сохраняется (класс lupa-otkryta ставит orakul.js). */
button.karta{cursor:zoom-in}
.lupa-otkryta{overflow:hidden;scrollbar-gutter:stable}
.lupa{position:fixed;inset:0;padding:0;border:0;margin:0;background:transparent;color:var(--tekst);
 width:100%;height:100%;max-width:none;max-height:none;overflow:hidden;touch-action:pinch-zoom;overscroll-behavior:contain}
.lupa::backdrop{background:#05030f}
.lupa figure{margin:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
 padding:max(56px,calc(env(safe-area-inset-top) + 56px)) 12px max(16px,env(safe-area-inset-bottom));cursor:zoom-out}
.lupa picture{display:block}
.lupa img{display:block;height:auto;aspect-ratio:720/1134;border-radius:4px;box-shadow:0 0 0 1px var(--ramka-tih);
 width:min(94vw,720px,(100vh - 130px)*.635);width:min(94vw,720px,(100dvh - 130px)*.635);
 /* задача 16: в мини-приложении --tg-viewport-stable-height ставит telegram-web-app.js, на сайте
    переменная не задана и остаётся значение по умолчанию 100dvh */
 width:min(94vw,720px,(var(--tg-viewport-stable-height,100dvh) - 130px)*.635)}
.lupa figcaption{max-width:min(94vw,720px);color:var(--tih);font:13px/1.4 var(--mono);text-align:center}
.lupa-x{position:absolute;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));width:44px;height:44px;
 padding:0;border-radius:50%;border:1px solid var(--ramka-tih);background:var(--plashka);color:var(--tekst);font:24px/1 var(--sans);cursor:pointer}
@media (prefers-reduced-motion:no-preference){.lupa[open] figure{animation:lupa .22s ease-out}}
@keyframes lupa{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
/* трактовка */
h2{font:700 13px/1.2 var(--serif);color:var(--zoloto);letter-spacing:.1em;text-transform:uppercase;margin:32px 0 10px}
.trakt{max-width:520px;margin:22px auto 0;padding:16px 16px 4px;border:1px solid var(--ramka-tih);border-radius:3px;background:var(--plashka)}
.trakt h2{margin:0 0 10px;text-align:center}
.trakt p{margin:0 0 12px;font-size:15px;line-height:1.55}
.trakt .poz b{color:var(--zoloto);font-family:var(--serif)}
.trakt .rol{border-left:2px solid var(--zoloto);padding-left:10px}
.trakt .itog b{font-family:var(--serif)}
.perenos{margin:16px 0 0;text-align:center;color:var(--tih);font:13px/1.5 var(--mono)}
/* кнопки: главная залита, остальные контуром */
.knopki{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.knopki a,.knopki button{font:600 15px/1 var(--sans);border-radius:3px;padding:12px 16px;text-decoration:none;cursor:pointer;border:1px solid var(--zoloto);background:transparent;color:var(--tekst);min-height:44px;display:inline-flex;align-items:center}
.knopki .glav,.knopki button[type=submit]{background:var(--knopka);color:var(--knopka-t);border-color:var(--knopka);font-weight:800}
/* ниже первого экрана */
.plashka{border:1px solid var(--ramka-tih);border-radius:3px;padding:10px 14px;background:var(--plashka)}
.glavnaya{font-size:19px;text-align:center}
.roli{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 12px}   /* без скрипта, под строкой параметров */
.roli a,.roli .skoro{border:1px solid var(--ramka-tih);border-radius:18px;padding:6px 12px;color:inherit;text-decoration:none}
.roli .skoro{color:var(--tih)}
.roli a[aria-current]{border-color:var(--tekst);font-weight:700}
.nedelya{display:flex;gap:6px;justify-content:center;margin:16px 0}.nedelya a{width:22px;height:22px;border-radius:50%;display:block}
.nedelya a.zelenyj{background:var(--z)}.nedelya a.zheltyj{background:var(--j)}.nedelya a.krasnyj{background:var(--k)}
.nedelya a[aria-current]{outline:2px solid var(--tekst);outline-offset:2px}
.krug{width:120px;height:120px;border-radius:50%;margin:8px auto 12px}
.krug.zelenyj{background:var(--z)}.krug.zheltyj{background:var(--j)}.krug.krasnyj{background:var(--k)}
input,select{font:inherit;padding:8px;border:1px solid var(--ramka-tih);border-radius:3px;background:transparent;color:inherit;max-width:100%}
.nazvanie{margin:24px 0 0}
.tih{color:var(--tih);font-size:14px}footer{margin-top:32px}code{font:12px/1.5 var(--mono);word-break:break-all}
/* эффекты «умеренно»: раздача карт (rotateY с задержкой) и курсор в логотипе.
   Раздача: начальное состояние задаёт CSS уже при первой отрисовке — анимация flip стоит на паузе в первом кадре
   (карты ребром), orakul.js ставит класс razdacha и тем запускает её. Без скрипта (scripting:none), при reduce
   и в браузерах без медиафункции scripting блок не действует, карты видны сразу. Страховка на случай, если
   скрипт не загрузился: вторая анимация flip-sama через 2 с сама раздаёт карты и оставляет их на месте (forwards);
   класс razdacha её снимает, а позже 1,9 с orakul.js класс не ставит, чтобы карты не раздались дважды.
   iOS Safari: поворот на <picture> без общего 3D-контекста и без overflow у предков, изнанка скрыта. */
@media (prefers-reduced-motion:no-preference){.kursor{animation:kursor 1.1s steps(1) infinite}}
@media (prefers-reduced-motion:no-preference) and (scripting:enabled){
 .rasklad .karta picture{-webkit-backface-visibility:hidden;backface-visibility:hidden;
  animation:flip .55s cubic-bezier(.3,.7,.3,1) backwards paused,flip-sama .55s cubic-bezier(.3,.7,.3,1) 2s forwards}
 .rasklad li:nth-child(2) .karta picture{animation-delay:.12s,2.12s}.rasklad li:nth-child(3) .karta picture{animation-delay:.24s,2.24s}
 .rasklad.razdacha .karta picture{animation-name:flip,none;animation-play-state:running}}
@keyframes kursor{50%{opacity:0}}
@keyframes flip{from{-webkit-transform:perspective(700px) rotateY(90deg);transform:perspective(700px) rotateY(90deg)}to{-webkit-transform:perspective(700px) rotateY(0);transform:perspective(700px) rotateY(0)}}
@keyframes flip-sama{from{-webkit-transform:perspective(700px) rotateY(90deg);transform:perspective(700px) rotateY(90deg)}to{-webkit-transform:perspective(700px) rotateY(0);transform:perspective(700px) rotateY(0)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (max-width:360px){.logo{font-size:12px;letter-spacing:.03em}.faktor{font-size:11px}}