/* outsky.cc — сайт сервиса OutSky VPN в системе «Туманность».
   Подключение: fonts.css → nebula.css → cc.css; поведение — core.js, sky.js, cc.js (+ roadmap.js на роадмапе).
   Свой тон сервиса — «электрик»: на <body class="cc"> тёплый пурпурный край акцента меняется на холодный электрик-синий,
   у туманностей вместо пурпура (.mag) — пятно .el; лаванда, фиолетовый, стекло, зерно и пилюли — общие с outsky.app.
   Классы страниц: cc- (общее), vp- (сервис), gd- (инструкция), pp- (политика), rm- (роадмап). */
.cc{--el:#5B8CFF;
  --grad-text:linear-gradient(100deg,#e9e8ff 0%,#b5abfc 32%,#7b6dff 64%,#5b8cff 100%);
  --edge:linear-gradient(160deg,rgb(181 171 252/.7),rgb(255 255 255/.07) 38%,rgb(91 140 255/.5))}
.cc .neb i.el{background:radial-gradient(closest-side,rgb(80 116 255/.38),rgb(38 54 172/.22) 48%,transparent 74%)}
.cc-sprite{position:absolute; width:0; height:0; overflow:hidden}
/* ссылки в тексте */
.cc main :is(p,li,dd) a:not([class]){color:var(--lav); text-decoration-color:rgb(181 171 252/.45); text-underline-offset:3px; transition:color var(--d-s)}
.cc main :is(p,li,dd) a:not([class]):hover{color:#fff; text-decoration-color:currentColor}
/* «дыра» под h2: по ширине строк, выше и мягче — на яркой электрик-туманности широкая низкая «дыра» давала полосу с ровной кромкой */
.cc .h2.hole{width:fit-content; max-width:100%}
.cc .h2.hole::before{inset:-45% -8%; background:radial-gradient(closest-side,rgb(7 8 28/.66) 30%,transparent)}
/* ритуал — только у «Как начать» и «Вопросов»; метка секции без ритуала появляется без его задержки */
@media (prefers-reduced-motion:no-preference){ html.js:not(.shot) .cc .sec:not(:has(> .ritual)) .kick.rv{transition-delay:0s} }

/* ===== шапка: «OutSky VPN» — слово с электрик-меткой; ссылка на сайт приложения ===== */
.cc-vpn{display:inline-block; margin-left:8px; padding:2px 8px; border-radius:var(--r-pill); font-style:normal; font-size:11px; font-weight:600; letter-spacing:.08em; line-height:1.4;
  color:#DCE3FF; background:rgb(91 140 255/.16); box-shadow:inset 0 0 0 1px rgb(140 170 255/.42); vertical-align:2px}
.cc-app{display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:var(--r-pill); flex-shrink:0; font-size:11px; font-weight:500; letter-spacing:.08em; line-height:1.2;
  text-transform:uppercase; color:var(--text-2); text-decoration:none; box-shadow:inset 0 0 0 1px var(--hair); transition:color var(--d-s),box-shadow var(--d-s)}
.cc-app svg{width:12px; height:12px; color:var(--lav)}
.cc-app:hover{color:var(--text); box-shadow:inset 0 0 0 1px rgb(181 171 252/.45)}
@media (max-width:1199px){ .cc-app{display:none} }
/* меню: длинные пункты («Конфиденциальность») помещаются в 320px */
.cc .menu-list a{font-size:clamp(18px,6vw,36px)}
.cc-ext{width:.6em; height:.6em; align-self:center; color:var(--lav); flex-shrink:0}
.ft-nav a svg{width:11px; height:11px; margin-left:4px; vertical-align:0; color:var(--lav)}

/* ===== сервис: первый экран ===== */
.vp-top{display:grid; align-content:center; min-height:min(100svh,980px)}   /* первый экран — по высоте окна, содержимое по центру */
.vp-top>.wrap{width:100%}
.vp-hero{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:44px clamp(32px,5vw,72px); align-items:center}
.vp-top .h1{font-size:clamp(52px,6.6vw,104px)}
.vp-txt-b{margin-top:26px}
.vp-top .neb .tr{left:84%; top:34%} .vp-top .neb .bl{left:6%; top:96%} .vp-top .neb .tl{left:30%; top:-6%}
/* карточка пробного периода */
.vp-trial{padding:clamp(24px,3vw,36px); --gx:90%; --gy:4%; --ga:.4}
.vp-tr-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.vp-trial h2{margin:14px 0 0; font-size:clamp(24px,2.3vw,32px); line-height:1.15; font-weight:700; letter-spacing:-.02em; width:fit-content;
  background:var(--grad-glass); -webkit-background-clip:text; background-clip:text; color:transparent}
.vp-nums{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:24px 0 22px; border-block:1px solid var(--hair)}
.vp-nums>div{padding:18px 0 16px 18px; border-left:1px solid var(--hair)}
.vp-nums>div:first-child{padding-left:0; border-left:0}
.vp-nums b{display:block; width:fit-content; font-size:clamp(44px,4.4vw,60px); line-height:1; font-weight:700; letter-spacing:-.04em;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent}
.vp-nums small{font-size:.36em; font-weight:600; letter-spacing:0}
.vp-nums span{display:block; margin-top:10px; font-size:12px; font-weight:500; line-height:1.3; letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.vp-trial ul.mini li{font-size:14.5px; color:var(--text-2)}
/* стрелка — справа по центру, место под неё — в отступе: подпись не помещается рядом с флагами — переносится под них целиком, стрелка не отрывается в отдельную строку */
.vp-flags{position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:22px; padding:12px 48px 12px 14px; border-radius:var(--r-md); color:var(--text); text-decoration:none;
  font-size:14px; font-weight:500; background:rgb(255 255 255/.04); box-shadow:inset 0 0 0 1px var(--hair); transition:box-shadow var(--d-s),background var(--d-s)}
.vp-flags:hover{background:rgb(255 255 255/.07); box-shadow:inset 0 0 0 1px rgb(181 171 252/.4)}
.vp-fs{display:flex; padding-left:7px}
.vp-fs i{display:block; width:24px; height:24px; margin-left:-7px; border-radius:50%; overflow:hidden; box-shadow:0 0 0 2px #100D29}
.vp-fs svg{display:block; width:100%; height:100%}
.vp-fl-a{position:absolute; right:16px; top:calc(50% - 9px); width:18px; height:18px; color:var(--lav); transition:transform var(--d-s) var(--e-out)}
.vp-flags:hover .vp-fl-a{transform:translateY(3px)}
@media (max-width:980px){ .vp-hero{grid-template-columns:1fr} .vp-trial{max-width:560px} }
/* ≤359: подписи цифр не упираются в рамку карточки */
@media (max-width:359px){ .vp-trial{padding:22px 20px} .vp-nums>div{padding-left:12px} .vp-nums span{font-size:11px; letter-spacing:.04em} }

/* ===== сервис: локации ===== */
.vp-loc .neb .tl{left:8%; top:30%} .vp-loc .neb .br{left:92%; top:78%}
.vp-loc-in{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:20px; margin-top:clamp(40px,5vw,72px)}
/* страны — плитки 3×3 высотой с карточку протоколов: флаг сверху, название снизу */
.vp-cn{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:1fr; gap:12px; margin:0; padding:0; list-style:none}
.vp-cn li{display:flex; flex-direction:column; justify-content:space-between; gap:14px; min-height:96px; padding:18px 18px 16px; border-radius:var(--r-md); font-size:16px; font-weight:500; line-height:1.25;
  background:var(--glass); box-shadow:inset 0 0 0 1px rgb(181 171 252/.14),0 18px 40px -30px rgb(123 97 255/.6); transition:box-shadow var(--d-s)}
.vp-cn li:hover{box-shadow:inset 0 0 0 1px rgb(181 171 252/.4),0 18px 40px -26px rgb(123 97 255/.8)}
.vp-cn svg{width:36px; height:24px; flex-shrink:0; border-radius:5px; box-shadow:0 0 0 1px rgb(255 255 255/.14),0 6px 16px -6px rgb(0 0 0/.6)}
.vp-proto{padding:clamp(24px,3vw,34px)}
.vp-proto h3{margin:0; font-size:24px; line-height:1.2; font-weight:600; letter-spacing:-.01em}
.vp-proto>p:not(.fnote){margin:8px 0 0; font-size:15px; color:var(--text-2)}
.vp-prows{display:grid; gap:8px; margin:20px 0 0; padding:0; list-style:none}
.vp-prows li{display:grid; grid-template-columns:130px minmax(0,1fr); align-items:center; gap:14px; padding:12px 14px; border-radius:var(--r-sm); font-size:14px; line-height:1.4;
  color:var(--text-2); background:rgb(7 8 28/.45); box-shadow:inset 0 0 0 1px var(--hair)}
.vp-prows code{font-family:var(--mono); font-size:13px; font-weight:600; color:var(--lav)}
.vp-prows .p-hy{color:#F472D0} .vp-prows .p-xh{color:#67E8F9}
.vp-proto .fnote{margin-top:16px}
@media (max-width:980px){ .vp-loc-in{grid-template-columns:1fr} }
@media (max-width:620px){ .vp-cn{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:420px){ .vp-cn{gap:8px} .vp-cn li{gap:10px; min-height:56px; padding:10px 12px; font-size:15px} .vp-cn svg{width:24px; height:16px}
  .vp-prows li{grid-template-columns:1fr; gap:4px} }

/* ===== сервис: где работает ===== */
.vp-dev .neb .tr{left:90%; top:22%} .vp-dev .neb .bl{left:6%; top:80%}
.vp-pl{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:clamp(40px,5vw,72px) 0 0; padding:0; list-style:none}
.vp-pl>li{display:flex; flex-direction:column; gap:6px; min-height:240px; padding:26px 26px 24px; --gx:86%; --gy:12%}
.vp-pi{display:grid; place-items:center; width:52px; height:52px; margin-bottom:18px; border-radius:50%; color:var(--lav); background:rgb(123 97 255/.14);
  box-shadow:inset 0 0 0 1px rgb(181 171 252/.45),0 0 26px -6px rgb(123 97 255/.75)}
.vp-pi svg{width:24px; height:24px}
.vp-pi-osk{background:none; box-shadow:none}
.vp-pi-osk img{display:block; width:44px; height:44px; border-radius:12px; box-shadow:0 0 18px rgb(123 97 255/.45)}
.vp-pl h3{margin:0; font-size:26px; line-height:1.1; font-weight:300; letter-spacing:-.02em}
.vp-pl p{margin:0; font-size:14px; line-height:1.45; color:var(--text-2)}
.vp-acts{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-top:auto; padding-top:20px}
.vp-acts a{display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:0 14px; border-radius:var(--r-pill); font-size:12px; font-weight:500; letter-spacing:.08em; line-height:1.2;
  text-transform:uppercase; color:var(--text); text-decoration:none; background:rgb(13 11 36/.45); box-shadow:inset 0 0 0 1px rgb(181 171 252/.3); transition:box-shadow var(--d-s)}
.vp-acts a svg{width:14px; height:14px; color:var(--lav); transition:transform var(--d-s) var(--e-out)}
.vp-acts a:hover{box-shadow:inset 0 0 0 1px rgb(181 171 252/.7),0 0 18px -6px rgb(123 97 255/.8)}
.vp-acts a:hover svg{transform:translateX(3px)}
.vp-acts .st{margin-left:auto}
/* система посетителя (cc.js): метка и грань ярче */
.cc-me{position:absolute; top:22px; right:22px; padding:4px 10px; border-radius:var(--r-pill); font-size:11px; font-weight:600; letter-spacing:.06em; line-height:1.3; text-transform:uppercase;
  color:#DCE3FF; background:rgb(91 140 255/.18); box-shadow:inset 0 0 0 1px rgb(140 170 255/.5),0 0 16px -4px rgb(91 140 255/.7)}
.vp-pl>li.is-me::after{background:linear-gradient(160deg,rgb(150 176 255/.95),rgb(255 255 255/.1) 40%,rgb(123 97 255/.65))}
@media (max-width:980px){ .vp-pl{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .vp-pl{grid-template-columns:1fr} .vp-pl>li{min-height:0} }

/* ===== сервис: как начать — карточки под «горизонтом», над каждой звезда ===== */
.vp-start .neb .tl{left:6%; top:24%} .vp-start .neb .br{left:94%; top:80%}
.vp-steps{position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:clamp(72px,7vw,100px) 0 0; padding:0; list-style:none}
.vp-steps::before{content:""; position:absolute; left:-4%; right:-4%; top:-34px; height:1px; background:radial-gradient(closest-side,rgb(181 171 252/.7),rgb(255 255 255/.12) 72%,transparent)}
.vp-steps>li{position:relative}
.vp-steps .pane{height:100%; padding:28px 28px 30px}
.vp-star{position:absolute; left:34px; top:-42px; width:16px; height:16px; fill:#E7E5FE; filter:drop-shadow(0 0 6px rgb(181 171 252/.8))}
.vp-sn{display:block; width:fit-content; font-size:clamp(48px,4.6vw,64px); line-height:1; font-weight:700; letter-spacing:-.04em;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent}
.vp-steps h3{margin:22px 0 0; font-size:22px; line-height:1.25; font-weight:600; letter-spacing:-.01em}
.vp-steps p{margin:10px 0 0; font-size:15px; line-height:1.55; color:var(--text-2)}
.vp-st-cta{justify-content:center; margin-top:48px}
@media (max-width:980px){
  .vp-steps{grid-template-columns:1fr; gap:16px; margin-top:48px; padding-left:34px}
  .vp-steps::before{left:8px; right:auto; top:0; bottom:0; width:1px; height:auto; background:linear-gradient(transparent,rgb(181 171 252/.6) 12%,rgb(181 171 252/.6) 88%,transparent)}
  .vp-star{left:-34px; top:34px; margin-left:1px}
}

/* ===== сервис: финал — поддержка и новости ===== */
.vp-fin .fin-mark{width:clamp(88px,8vw,112px)}
.vp-fin-k{margin-top:32px}
.vp-fin .h2{margin-top:14px}
.vp-fin .h2 .ln{margin-inline:auto}
.vp-fin-p{max-width:540px; margin:20px auto 0; font-size:18px; line-height:1.55; color:var(--text-2)}
.vp-fin .ctas{justify-content:center; margin-top:32px}
.vp-fin-n{max-width:520px; margin:26px auto 0}
@media (max-width:420px){ .vp-fin .pill{font-size:14px; gap:8px; --pl:18px; padding-right:18px} }

/* ===== созвездия сервиса: только пустые поля, не больше двух на экран 1440×900 ===== */
.vp-c-per{left:3%; top:58%; width:58px; rotate:-8deg; opacity:.15}
.vp-c-ursa{right:6%; top:24%; width:clamp(150px,13vw,190px); rotate:6deg; opacity:.15}
.vp-c-lyra{left:5%; top:16%; width:44px; rotate:-6deg; opacity:.16}
.vp-c-cass{right:7%; top:13%; width:clamp(100px,9vw,130px); rotate:-5deg; opacity:.15}
@media (min-width:1240px){ .vp-c-per,.vp-c-lyra{display:block} }
@media (min-width:1100px){ .vp-c-ursa,.vp-c-cass{display:block} }

/* ===== инструкция ===== */
.gd-top .neb .tr{left:88%; top:20%} .gd-top .neb .bl{left:8%; top:92%} .gd-top .neb .tl{left:34%; top:-4%}
.gd-crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.gd-crumbs a{color:var(--lav); text-decoration:none} .gd-crumbs a:hover{color:var(--text)}
.gd-crumbs [aria-current]{color:var(--text)}
.gd-hd{width:fit-content; max-width:100%}
.gd-top .h1{margin-top:18px}
.gd-lead{margin-top:22px; width:fit-content}
.gd-two{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:stretch; margin-top:clamp(36px,4.4vw,56px)}   /* панели шагов одной высоты */
.gd-card{padding:clamp(22px,3vw,34px)}
/* метка шага: пилюля микро-капсом слева (как .kick, но не по центру) */
.gd-k{display:inline-block; padding:6px 13px; border-radius:var(--r-pill); font-size:12px; font-weight:500; line-height:1.3; letter-spacing:.08em; text-transform:uppercase;
  color:#E7E5FE; background:rgb(123 97 255/.2); box-shadow:inset 0 0 0 1px rgb(181 171 252/.32)}
.gd-k-row{display:flex; align-items:center; justify-content:space-between; gap:12px}
.gd-all{display:none; align-items:center; gap:6px; font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--lav); text-decoration:none}
.gd-all:hover{color:var(--text)}
.gd-card h2,.gd-pane h2{margin:16px 0 0; font-size:clamp(24px,2.4vw,32px); line-height:1.15; font-weight:700; letter-spacing:-.02em; width:fit-content;
  background:var(--grad-glass); -webkit-background-clip:text; background-clip:text; color:transparent}
.gd-ol{margin:20px 0 0; padding-left:22px; display:grid; gap:12px}
.gd-ol li,.gd-pane li{padding-left:4px; font-size:16px; line-height:1.6; color:var(--text-2)}
.gd-ol li::marker,.gd-pane li::marker{color:var(--lav); font-weight:600}
/* названия кнопок бота и приложений */
.nb{display:inline-block; padding:0 8px; border-radius:8px; color:var(--text); background:rgb(255 255 255/.06); box-shadow:inset 0 0 0 1px var(--hair); white-space:nowrap}
/* переключатель устройств: плитки-ссылки */
.gd-sw{display:grid; gap:8px; margin:20px 0 0; padding:0; list-style:none}
.gd-sw li{padding:0}
.gd-sw a{position:relative; display:flex; align-items:center; gap:14px; min-height:64px; padding:10px 16px 10px 10px; border-radius:var(--r-md); color:var(--text); text-decoration:none;
  background:rgb(7 8 28/.4); box-shadow:inset 0 0 0 1px var(--hair); transition:box-shadow var(--d-s),background var(--d-s)}
.gd-sw a:hover{background:rgb(123 97 255/.1); box-shadow:inset 0 0 0 1px rgb(181 171 252/.45)}
.gd-gi{display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; border-radius:50%; color:var(--lav); background:rgb(123 97 255/.14);
  box-shadow:inset 0 0 0 1px rgb(181 171 252/.4),0 0 22px -6px rgb(123 97 255/.7)}
.gd-gi svg{width:21px; height:21px}
.gd-tx{display:flex; flex-direction:column; min-width:0}
.gd-tx .nm{font-size:16px; font-weight:600; line-height:1.3}
.gd-tx .ds{font-size:13px; line-height:1.35; color:var(--text-2)}
.gd-ar{width:18px; height:18px; margin-left:auto; flex-shrink:0; color:var(--lav); transition:transform var(--d-s) var(--e-out)}
.gd-sw a:hover .gd-ar{transform:translateX(3px)}
.gd-sw .cc-me{position:static; margin-left:auto; flex-shrink:0}
.gd-sw a:has(.cc-me) .gd-ar{margin-left:0}
/* выбранное устройство (по :target): плитка подсвечена, остальные инструкции скрыты; «Все устройства» — вернуть все */
.gd-sw a[aria-current]{background:rgb(123 97 255/.16); box-shadow:inset 0 0 0 1px rgb(181 171 252/.7),0 0 24px -8px rgb(123 97 255/.9)}
@supports selector(:has(a)){
  .gd:has(.gd-dev:not(.gd-help):target) .gd-dev:not(:target):not(.gd-help){display:none}
  .gd:has(.gd-dev:not(.gd-help):target) .gd-all{display:inline-flex}
  .gd:has(#iphone:target) .gd-sw a[href="#iphone"],.gd:has(#android:target) .gd-sw a[href="#android"],.gd:has(#windows:target) .gd-sw a[href="#windows"],
  .gd:has(#mac:target) .gd-sw a[href="#mac"],.gd:has(#chrome:target) .gd-sw a[href="#chrome"]{
    background:rgb(123 97 255/.16); box-shadow:inset 0 0 0 1px rgb(181 171 252/.7),0 0 24px -8px rgb(123 97 255/.9)}
}
/* инструкция устройства: колонка 860px, стекло, шаги на «рельсе» с номерами */
.gd-col{max-width:calc(860px + 2 * var(--gutter))}
.sec.gd-dev{padding:clamp(20px,2.6vw,32px) 0}
.gd-dev:last-child{padding-bottom:clamp(72px,9vw,128px)}
.gd-pane{padding:clamp(18px,4vw,48px)}
.gd-dh{display:flex; align-items:center; gap:16px}
.gd-dh .gd-gi{width:52px; height:52px} .gd-dh .gd-gi svg{width:24px; height:24px}
.gd-dh h2{margin:0}
.gd-app{margin:14px 0 0; font-size:15px; font-weight:500; line-height:1.5; color:var(--lav)}
.gd-s{position:relative; margin-top:34px; padding-left:52px}
.gd-s::before{content:""; position:absolute; left:15.5px; top:40px; bottom:-18px; width:1px; background:linear-gradient(rgb(181 171 252/.5),rgb(181 171 252/.06))}
.gd-s h3,.gd-tip h3{margin:0; font-size:19px; line-height:1.35; font-weight:600; letter-spacing:-.01em}
.gd-s h3 .n{position:absolute; left:0; top:-2px; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; font-size:14px; font-weight:700; color:#fff;
  background:linear-gradient(120deg,#5b3bef,#6d4cff 58%,#5b7cff); box-shadow:0 0 16px -2px rgb(123 97 255/.8)}
.gd-pane p{margin:12px 0 0; font-size:16px; line-height:1.65; color:var(--text-2)}
.gd-pane b{color:var(--text); font-weight:600}
.gd-pane :is(ol,ul){margin:12px 0 0; padding-left:22px; display:grid; gap:8px}
.gd-note{display:flex; align-items:flex-start; gap:12px; margin-top:16px; padding:14px 16px; border-radius:var(--r-md); background:rgb(250 204 21/.06); box-shadow:inset 0 0 0 1px rgb(250 204 21/.26)}
.gd-note>svg{width:20px; height:20px; flex-shrink:0; margin-top:2px; color:var(--warn)}
.gd-pane .gd-note p{margin:0; font-size:15px; color:#E4E0F2}
.gd-pane>.gd-note{margin-top:22px}
.gd-tip{margin-top:34px; padding:20px 22px; border-radius:var(--r-md); background:rgb(7 8 28/.4); box-shadow:inset 0 0 0 1px var(--hair)}
.gd-done{padding-top:4px}
.gd-pane>.gd-done{margin-top:30px; padding:16px 0 0; border-top:1px solid var(--hair)}
.gd-up{display:flex; justify-content:flex-end}
.gd-pane .gd-up{margin-top:22px}
.gd-up a{font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--lav); text-decoration:none}
.gd-up a:hover{color:var(--text)}
.gd-hl{margin-top:22px !important}
.gd-help .gd-pane>.gd-done{border-top:0; padding-top:0; margin-top:16px}
/* последняя секция перед подвалом: main{overflow:clip} режет всё, что ниже, — пятна поменьше и выше, чтобы свет гас до кромки */
.gd-help .neb i{width:clamp(420px,58vw,860px); top:34%}
/* созвездия инструкции: справа от заголовка и в полях колонки 860px */
.gd-c-orion{right:9%; top:22%; width:clamp(70px,6vw,92px); rotate:8deg; opacity:.15}
.gd-c-lyra{left:calc((100% - 860px) / 4 - 22px); top:30%; width:44px; rotate:-8deg; opacity:.16}
.gd-c-umi{right:calc((100% - 860px) / 4 - 20px); top:24%; width:40px; rotate:10deg; opacity:.15}
.gd-c-cass{left:calc((100% - 860px) / 4 - 60px); top:40%; width:120px; rotate:-6deg; opacity:.14}
@media (min-width:1100px){ .gd-c-orion{display:block} }
@media (min-width:1240px){ .gd-c-lyra,.gd-c-umi,.gd-c-cass{display:block} }
@media (max-width:980px){ .gd-two{grid-template-columns:1fr} }
@media (max-width:480px){
  .gd-s{padding-left:40px} .gd-s::before{left:13.5px} .gd-s h3 .n{width:28px; height:28px; font-size:13px; top:0}
  .gd-sw .cc-me{position:absolute; top:-9px; right:14px; margin:0; font-size:10.5px; padding:2px 8px}
  .gd-sw a:has(.cc-me) .gd-ar{margin-left:auto}
  .gd-pane li,.gd-ol li,.gd-pane p{font-size:15px}
  .nb{white-space:normal}
}
/* ≤420: номер шага — в строке заголовка, без рельса: текст шага и предупреждение — на всю ширину панели */
@media (max-width:420px){
  .gd-s{padding-left:0} .gd-s::before{display:none}
  .gd-s h3{display:flex; align-items:center; gap:10px}
  .gd-s h3 .n{position:static; flex-shrink:0}
  .gd-note{gap:10px; padding:12px 14px}
}

/* ===== политика: одна страница на двух языках, колонка ≈68ch, закреплённое оглавление ===== */
.vh{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
/* язык меню, оглавления и подвала: без JS — по адресу (:target), с JS — по разделу, который читают (html[data-ui], cc.js) */
@supports selector(body:has(a)){
  html:not([data-ui]) body:not(:has(#ru:target,#ru :target)) .ui-ru{display:none !important}
  html:not([data-ui]) body:has(#ru:target,#ru :target) .ui-en{display:none !important}
}
@supports not selector(body:has(a)){ html:not([data-ui]) .ui-ru{display:none !important} }
html[data-ui=en] .ui-ru,html[data-ui=ru] .ui-en{display:none !important}
/* нижний отступ — внутри сетки (у статьи): у закреплённого оглавления есть место до подвала, и в конце статьи оно не уезжает под шапку */
.pp-top{padding-bottom:0}
.pp-top .neb .tr{left:90%; top:560px} .pp-top .neb .bl{left:4%; top:2600px}
.pp-top .neb .pp-mid{left:86%; top:52%}
.pp-grid{display:grid; grid-template-columns:232px minmax(0,62ch); gap:clamp(40px,5vw,72px); justify-content:center; align-items:start}
.pp-toc{position:sticky; top:calc(var(--header-h) + 40px); max-height:calc(100vh - var(--header-h) - 72px); margin-top:clamp(20px,3vw,44px); overflow:auto; overscroll-behavior:contain; scrollbar-width:none}
.pp-toc::-webkit-scrollbar{display:none}
.pp-toc ol{margin:0; padding:0; list-style:none; border-left:1px solid var(--hair)}
.pp-toc a{display:flex; gap:10px; margin-left:-1px; padding:7px 10px 7px 16px; border-left:1px solid transparent; font-size:13.5px; line-height:1.4; color:var(--text-2); text-decoration:none;
  transition:color var(--d-s),border-color var(--d-s),background var(--d-s)}
.pp-toc .pp-n{flex-shrink:0; min-width:18px; font-weight:600; color:var(--lav); font-variant-numeric:tabular-nums}
.pp-toc a:hover{color:var(--text)}
.pp-toc a[aria-current]{color:var(--text); border-left-color:var(--lav); background:linear-gradient(90deg,rgb(123 97 255/.16),transparent 85%)}
/* статья */
.pp-doc{min-width:0; padding-bottom:clamp(72px,9vw,128px); font-size:17px; line-height:1.75; color:var(--text-2)}
.pp-doc .pp-h1{margin:0; font-size:clamp(26px,7.6vw,64px)}
.pp-lang:not([lang=ru]) .pp-h1{font-size:clamp(44px,7.6vw,72px)}   /* «Privacy Policy» короче русского — крупнее */
.pp-date{display:flex; align-items:baseline; gap:10px; margin:20px 0 0 !important; font-size:14px; line-height:1.5; color:var(--lav)}
.pp-date::before{content:""; flex-shrink:0; width:6px; height:6px; border-radius:50%; background:var(--lav); box-shadow:0 0 8px var(--lav); translate:0 -2px}
.pp-doc p{margin:18px 0 0}
.pp-doc ul{display:grid; gap:10px; margin:14px 0 0; padding:0; list-style:none}
.pp-doc li{position:relative; padding-left:24px}
.pp-doc li::before{content:""; position:absolute; left:4px; top:.72em; width:6px; height:6px; border-radius:50%; background:var(--lav); box-shadow:0 0 8px rgb(181 171 252/.55)}
.pp-doc strong{font-weight:600; color:var(--text)}
.pp-doc code{padding:1px 6px; border-radius:6px; font-family:var(--mono); font-size:.84em; color:#E2E0F2; background:rgb(255 255 255/.06); box-shadow:inset 0 0 0 1px var(--hair); overflow-wrap:anywhere}
.pp-short{margin-top:30px; padding:clamp(20px,3vw,32px); --gx:94%; --gy:0%; --ga:.3}
.pp-short>p:first-child{margin:0}
.pp-short>p:first-child strong{font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--lav)}
.pp-short li{color:#D9D6EE}
.pp-lang>section{margin-top:clamp(52px,6vw,72px)}
.pp-doc h2{margin:0; font-size:clamp(22px,2.2vw,28px); line-height:1.25; font-weight:700; letter-spacing:-.02em; color:var(--text)}
.pp-doc h2 .pp-t{background:var(--grad-glass); -webkit-background-clip:text; background-clip:text; color:transparent}   /* градиент — на названии, не на всём h2: иначе «#» проступает сквозь opacity */
.pp-doc h2 .pp-n{margin-right:.1em; color:var(--lav); font-variant-numeric:tabular-nums}
.pp-a{margin-left:.35em; color:var(--lav); text-decoration:none; opacity:0; transition:opacity var(--d-s)}
.pp-doc h2:hover .pp-a,.pp-lang>section:target .pp-a{opacity:.7}
.pp-lang>section:target h2 .pp-n{text-shadow:0 0 14px rgb(181 171 252/.9)}
/* граница языков — горизонт со звездой */
.pp-hr{position:relative; height:1px; margin:clamp(80px,9vw,128px) 0; border:0; overflow:visible; background:radial-gradient(closest-side,rgb(181 171 252/.75),rgb(255 255 255/.14) 60%,transparent)}
.pp-hr::after{content:""; position:absolute; left:50%; top:0; width:16px; height:16px; margin:-8px 0 0 -8px; background:#E7E5FE; filter:drop-shadow(0 0 6px rgb(181 171 252/.8));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0l1.9 6.1L16 8l-6.1 1.9L8 16l-1.9-6.1L0 8l6.1-1.9z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0l1.9 6.1L16 8l-6.1 1.9L8 16l-1.9-6.1L0 8l6.1-1.9z'/%3E%3C/svg%3E") center/contain no-repeat}
/* созвездия политики — правое поле (≥1240px), далеко друг от друга */
.pp-c-umi{right:4%; top:5%; width:38px; rotate:8deg; opacity:.15}
.pp-c-lyra{right:5%; top:27%; width:42px; rotate:-6deg; opacity:.15}
.pp-c-per{right:4.5%; top:55%; width:52px; rotate:6deg; opacity:.14}
.pp-c-cass{right:3%; top:80%; width:96px; rotate:-8deg; opacity:.14}
@media (min-width:1240px){ .pp-c-umi,.pp-c-lyra,.pp-c-per,.pp-c-cass{display:block} }
@media (max-width:1099px){ .pp-grid{grid-template-columns:minmax(0,62ch)} .pp-toc{display:none} }
@media (max-width:480px){ .pp-doc{font-size:16px; line-height:1.7} .pp-doc li{padding-left:20px} .pp-doc li::before{left:2px} }

/* ===== роадмап: доска как на outsky.app (roadmap-b.css), тон — сервиса (выбранная вкладка и метка OutSky VPN — электрик) ===== */
.rm-top{padding-bottom:clamp(36px,4.4vw,56px)}
.rm-top .neb .tr{left:82%; top:34%} .rm-top .neb .bl{left:8%; top:104%}
.rm-head{width:fit-content; max-width:100%}
.rm-upd{margin:0; cursor:default}
.rm-upd[hidden]{display:none}
.rm-upd time{padding-right:2px; font-variant-numeric:tabular-nums}
.rm-lead{margin-top:22px}
.rm-c-leo{right:9%; top:32%; width:clamp(140px,12vw,180px); rotate:-5deg; opacity:.15}
@media (min-width:1000px){ .rm-c-leo{display:block} }
.rm-sec{padding-top:0}
html:not(.js) .rm-sec{padding-bottom:0}   /* без JS доски нет — только карточка-сообщение */
.rm-sec .neb .tl{left:4%; top:26%} .rm-sec .neb .br{left:92%; top:64%}
.rm-c-umi{left:calc((100% - 1180px) / 4 - 21px); top:34%; width:42px; rotate:-8deg; opacity:.15}
@media (min-width:1320px){ .rm-c-umi{display:block} }
/* вкладки продуктов (если продуктов больше одного): выбранная — залитая, как кнопки приложения, с электрик-краем */
.rm-tabs{position:relative; display:flex; gap:4px; width:max-content; max-width:100%; margin:0 0 20px; padding:4px; border-radius:var(--r-pill);
  background:var(--glass); box-shadow:inset 0 0 0 1px rgb(181 171 252/.22); overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none}
.rm-tabs::-webkit-scrollbar{display:none}
.rm-tabs[hidden]{display:none}
.rm-tab{flex:0 0 auto; min-height:40px; padding:0 18px; border:0; border-radius:var(--r-pill); background:transparent; color:var(--text-2); font-size:14px; font-weight:500; line-height:1.2;
  cursor:pointer; white-space:nowrap; transition:color var(--d-s),background var(--d-s),box-shadow var(--d-s)}
.rm-tab:hover{color:var(--text); background:rgb(255 255 255/.05)}
.rm-tab[aria-selected="true"]{color:#fff; background:linear-gradient(120deg,#5b3bef,#6d4cff 58%,#4f7bff); box-shadow:0 0 18px -4px rgb(91 120 255/.8)}
.rm-tab:focus-visible{outline:2px solid var(--lav); outline-offset:-2px}
.rm-loading{display:none; margin:0; color:var(--text-2); font-size:14px}
html.js .rm-loading:not([hidden]){display:block}
.rm-msg{max-width:640px; padding:20px 24px; border-radius:var(--r-md); --gx:92%; --gy:120%; --ga:.22}
.rm-msg[hidden]{display:none}
.rm-msg p{margin:0; color:var(--text-2); font-size:15px; line-height:1.6}
.rm-msg b{color:var(--text); font-weight:600}
.rm-msg a{color:var(--lav)}
.rm-board{display:flex; align-items:flex-start; gap:16px; margin:0 -2px; padding:2px 2px 30px; border-radius:var(--r-xl);
  overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:rgb(181 171 252/.28) transparent}
.rm-board[hidden]{display:none}
.rm-board:focus-visible{outline:none; box-shadow:inset 0 0 0 2px var(--lav)}
.rm-board::-webkit-scrollbar{height:8px}
.rm-board::-webkit-scrollbar-thumb{background:rgb(181 171 252/.28); border-radius:8px}
.rm-board::-webkit-scrollbar-track{background:transparent}
.rm-board.rm-more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.rm-board.rm-less{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px); mask-image:linear-gradient(90deg,transparent,#000 56px)}
.rm-board.rm-more.rm-less{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent); mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
.rm-tabs.rm-more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
.rm-tabs.rm-less{-webkit-mask-image:linear-gradient(90deg,transparent,#000 32px); mask-image:linear-gradient(90deg,transparent,#000 32px)}
.rm-tabs.rm-more.rm-less{-webkit-mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent); mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent)}
/* колонка — стекло (.pane): сверху отсвет цвета статуса; цвета — переменными */
.rm-col{--c:#E2E0F2; --c-dot:#A9A5CC; --c-bg:rgb(255 255 255/.06); --c-ring:rgb(255 255 255/.16); --c-tint:rgb(181 171 252/.08); --c-glow:none;
  --gx:50%; --gy:-6%; --ga:.18; flex:1 1 0; min-width:200px; padding:14px 12px 12px; border-radius:22px;
  background:radial-gradient(120% 220px at 50% 0,var(--c-tint),transparent 80%),var(--glass)}
.rm-col[data-status="in_progress"]{--c:#E7E5FE; --c-dot:#B5ABFC; --c-bg:rgb(123 97 255/.22); --c-ring:rgb(181 171 252/.42); --c-tint:rgb(123 97 255/.2); --c-glow:0 0 9px #B5ABFC; --ga:.3}
.rm-col[data-status="testing"]{--c:#FDE68A; --c-dot:#FACC15; --c-bg:rgb(250 204 21/.12); --c-ring:rgb(250 204 21/.36); --c-tint:rgb(250 204 21/.08); --c-glow:0 0 8px rgb(250 204 21/.8)}
.rm-col[data-status="done"]{--c:#BBF7D0; --c-dot:#4ADE80; --c-bg:rgb(74 222 128/.13); --c-ring:rgb(74 222 128/.38); --c-tint:rgb(74 222 128/.1); --c-glow:0 0 8px rgb(74 222 128/.8)}
.rm-col[data-status="on_hold"]{--c:#FED7AA; --c-dot:#FB923C; --c-bg:rgb(251 146 60/.13); --c-ring:rgb(251 146 60/.36); --c-tint:rgb(251 146 60/.08); --c-glow:0 0 8px rgb(251 146 60/.7)}
.rm-col[data-status="cancelled"]{--c:#FECACA; --c-dot:#F87171; --c-bg:rgb(248 113 113/.13); --c-ring:rgb(248 113 113/.36); --c-tint:rgb(248 113 113/.08); --c-glow:0 0 8px rgb(248 113 113/.7)}
.rm-col-h{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 2px 14px; font-size:12px; font-weight:500; line-height:1.3}
.rm-badge{display:inline-flex; align-items:center; gap:8px; padding:5px 12px 5px 10px; border-radius:var(--r-pill); background:var(--c-bg); box-shadow:inset 0 0 0 1px var(--c-ring);
  color:var(--c); font-size:12px; font-weight:500; letter-spacing:.04em; white-space:nowrap}
.rm-badge::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--c-dot); box-shadow:var(--c-glow); flex-shrink:0}
.rm-count{display:inline-grid; place-items:center; min-width:26px; height:26px; padding:0 8px; border-radius:var(--r-pill); color:var(--text-2); font-size:12px;
  font-variant-numeric:tabular-nums; box-shadow:inset 0 0 0 1px var(--hair)}
.rm-list{display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none}
.rm-card{position:relative; padding:15px 16px 14px; border-radius:var(--r-md); background:linear-gradient(rgb(255 255 255/.055),rgb(255 255 255/.02));
  box-shadow:inset 0 0 0 1px rgb(255 255 255/.09),inset 0 1px 0 rgb(255 255 255/.06); transition:box-shadow var(--d-s) var(--e-out),background var(--d-s) var(--e-out)}
@media (hover:hover) and (pointer:fine){
  .rm-card:hover{background:linear-gradient(rgb(181 171 252/.09),rgb(255 255 255/.025)); box-shadow:inset 0 0 0 1px rgb(181 171 252/.34),0 0 26px -10px rgb(123 97 255/.7)}
}
.rm-card h3{margin:0; font-size:15px; font-weight:600; line-height:1.4; letter-spacing:-.005em; color:var(--text); overflow-wrap:anywhere}
.rm-card p{margin:6px 0 0; font-size:13.5px; line-height:1.55; color:var(--text-2); overflow-wrap:anywhere}
.rm-meta{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.rm-chip{display:inline-block; padding:3px 10px; border-radius:var(--r-pill); font-size:11.5px; font-weight:500; line-height:1.4; letter-spacing:.02em; white-space:nowrap;
  color:#DAD7EF; background:rgb(255 255 255/.05); box-shadow:inset 0 0 0 1px rgb(255 255 255/.13)}
.rm-prod{color:#E7E5FE; background:rgb(123 97 255/.2); box-shadow:inset 0 0 0 1px rgb(181 171 252/.36)}
.rm-prod[data-product="extension"]{color:#CFFAFE; background:rgb(103 232 249/.12); box-shadow:inset 0 0 0 1px rgb(103 232 249/.32)}
.rm-prod[data-product="vpn"]{color:#DCE3FF; background:rgb(91 140 255/.16); box-shadow:inset 0 0 0 1px rgb(140 170 255/.42)}
.rm-col[data-status="cancelled"] .rm-card{opacity:.82}
.rm-empty{margin:0; padding:20px 12px; border-radius:var(--r-md); border:1px dashed rgb(181 171 252/.24); text-align:center; color:var(--text-2); font-size:13px}
/* на сайте сервиса пустые колонки («Пока пусто») не показываем: карточек мало, остальные колонки шире */
.cc .rm-col:has(> .rm-empty){display:none}
.rm-note{margin:4px 0 0; font-size:13px; line-height:1.5; color:var(--text-2)}
@media (prefers-reduced-motion:no-preference){
  html:not(.shot) .rm-card{animation:rm-in var(--d-m) var(--e-out) both; animation-delay:calc(var(--i,0) * 40ms)}
  html:not(.shot) .rm-col[data-status="in_progress"] .rm-badge::before{animation:rm-breathe 2.4s ease-in-out infinite}
}
.rm-static .rm-card,.rm-static .rm-badge::before{animation:none !important}
@keyframes rm-in{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@keyframes rm-breathe{0%,100%{opacity:.5} 50%{opacity:1}}
/* финал: стеклянная карточка новостей (без своей плитки Telegram — она есть у карточки канала в подвале) */
.rm-fcard{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:20px 28px; max-width:820px; margin:0 auto; padding:28px 32px;
  text-align:left; --gx:90%; --gy:115%; --ga:.36}
.rm-fh{width:fit-content; margin:8px 0 6px; padding-bottom:.04em; font-size:clamp(22px,2.2vw,28px); font-weight:700; line-height:1.15; letter-spacing:-.02em;
  background:var(--grad-glass); -webkit-background-clip:text; background-clip:text; color:transparent}
.rm-ftx>p:last-child{margin:0; font-size:15px; line-height:1.55; color:var(--text-2)}
/* финал короткий: маска .fin>.neb режет и по верхней кромке — пятна меньше, видимая часть (74% радиуса) не доходит до верха */
.rm-fin .neb i{width:clamp(420px,60vw,880px)}
.rm-fin .c-peg{display:none}
@media (min-width:1240px){ .rm-fin .c-peg{display:block} }
/* широкие и высокие экраны: короткие колонки едут рядом с длинной (только если колонок ≤4 — иначе доска прокручивается вбок) */
@media (min-width:981px) and (min-height:760px){
  .rm-board:not(:has(> .rm-col:nth-child(6))){overflow:visible}
  .rm-board:not(:has(> .rm-col:nth-child(6))) > .rm-col:not(:has(.rm-card:nth-child(4))){position:sticky; top:calc(var(--header-h) + 20px)}
}
@media (min-width:981px) and (max-width:1099px){
  .rm-board{gap:10px}
  .rm-col{min-width:160px; padding:12px 9px 9px}
  .rm-card{padding:13px 12px 12px}
}
@media (max-width:980px){
  .rm-board{flex-direction:column; align-items:stretch; gap:16px; margin:0; padding:0 0 28px; overflow:visible}
  .rm-col{flex:none; min-width:0; width:100%; padding:16px 14px 14px}
  .rm-col-h{margin-bottom:16px}
}
@media (min-width:640px) and (max-width:980px){ .rm-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){
  .rm-fcard{grid-template-columns:minmax(0,1fr); padding:26px 24px}
  .rm-fcard .pill{justify-self:start}
}
@media (max-width:480px){
  .rm-fcard{gap:18px; padding:24px 20px}
  .rm-fh{margin-top:6px}
  .rm-fcard .pill{justify-self:stretch; justify-content:center; padding-inline:18px}
}
@media (max-width:420px){
  .rm-col{padding:14px 10px 10px; border-radius:20px}
  .rm-card{padding:13px 14px 12px}
  .rm-tab{padding:0 14px; font-size:13.5px}
}

/* ===== 404: одна страница на двух языках (по центру, как финал .fin): знак, «Страница не найдена» / «Page not found», ссылки на главную и инструкцию.
   GitHub Pages отдаёт её по любому несуществующему адресу — поэтому все ссылки и файлы на ней абсолютные (/…) ===== */
.nf{display:grid; align-content:center; min-height:min(100svh,940px); padding:calc(var(--header-h) + clamp(32px,6vh,64px)) 0 clamp(56px,8vw,96px)}
.nf>.wrap{width:100%}
.nf .fin-mark{width:clamp(76px,7vw,96px)}
.nf-b{margin-top:clamp(32px,4.4vw,44px)}
.nf .h1{margin:0; font-size:clamp(30px,4.6vw,60px)}
.nf .h1 .ln{margin-inline:auto}
.nf .ctas{justify-content:center; margin-top:24px}
.nf .pp-hr{max-width:560px; margin:clamp(40px,5vw,60px) auto 0}
/* секция начинается от верха страницы: Кассиопея — ниже шапки, а не под ней */
.nf .c-cass2{top:calc(var(--header-h) + clamp(16px,4vw,56px))}
@media (max-width:420px){ .nf .pill{font-size:14px; gap:8px; --pl:18px; padding-right:18px} }

/* ===== режимы (в конце: после базовых правил) ===== */
@media (prefers-reduced-motion:reduce){
  .vp-flags,.vp-fl-a,.vp-cn li,.vp-acts a,.vp-acts a svg,.cc-app,.gd-sw a,.gd-ar,.pp-toc a,.pp-a,.rm-card,.rm-tab{transition:none}
  .vp-flags:hover .vp-fl-a,.vp-acts a:hover svg,.gd-sw a:hover .gd-ar{transform:none}
  .rm-card,.rm-badge::before{animation:none}
}
@media (prefers-reduced-transparency:reduce){
  .vp-cn li,.gd-sw a,.gd-tip,.rm-col,.rm-tabs{background:#120F2C}
  .rm-card{background:#1A1638}
}
@media (prefers-contrast:more){
  .vp-nums b,.vp-sn,.vp-trial h2,.gd-card h2,.gd-pane h2,.pp-doc h2 .pp-t,.rm-fh{background:none; color:var(--text)}
  .vp-cn li,.vp-prows li,.vp-acts a,.vp-flags,.cc-app,.gd-sw a,.nb,.gd-tip,.rm-card,.rm-chip,.rm-count{box-shadow:inset 0 0 0 1px rgb(181 171 252/.7)}
  .pp-toc ol{border-left-color:rgb(255 255 255/.4)}
}
@media (forced-colors:active){
  .vp-cn li,.vp-prows li,.vp-acts a,.vp-flags,.cc-app,.cc-vpn,.cc-me,.st,.gd-k,.gd-sw a,.gd-note,.gd-tip,.nb,.pp-doc code,
  .rm-col,.rm-card,.rm-badge,.rm-chip,.rm-count,.rm-tabs,.rm-tab,.rm-empty{border:1px solid CanvasText}
  .gd-sw a[aria-current],.rm-tab[aria-selected="true"]{border-width:3px}
  .vp-nums b,.vp-sn,.vp-trial h2,.gd-card h2,.gd-pane h2,.pp-doc h2 .pp-t,.rm-fh{background:none; color:CanvasText}
  .vp-steps::before,.vp-star,.vp-pi,.gd-gi,.gd-s h3 .n{box-shadow:none; filter:none}
  .gd-s::before,.pp-hr::after,.pp-doc li::before,.pp-date::before,.rm-badge::before{display:none}
  .pp-doc li{list-style:disc} .pp-toc a[aria-current]{border-left:3px solid CanvasText}
  .gd-note>svg,.vp-pi,.gd-gi,.cc-ext,.vp-fl-a,.gd-ar{color:CanvasText}
}