/* =====================================================================
   SHIKA.NET — public kit (skd.css) v1.0 — 16.09.2026
   Публичные страницы (лендинг, фасады, pulse) на каноне дизайн-системы
   SHIKA.NET DESIGN SYSTEM v3.2. Четыре закона соблюдены:
   радиус 0 · жёсткая тень только на hover · тёплый hex · анимированный вход.
   Значения: DESIGN.md §2/§3/§4/§5/§6.1/§10.3/§12/§13.
   Зависимостей нет: KINO подключается рядом с страницей (/KINO-Regular.ttf
   или /static/KINO-Regular.ttf), остальное — системные стеки.
   ===================================================================== */
@font-face{
  font-family:'KINO';
  src:url('KINO-Regular.ttf') format('truetype');
  font-display:swap;
  font-weight:400;
}
:root{
  /* ---- токены: канон design-systems/tokens.css (v3.2), публичный поднабор.
       Имена и значения = канон; короткие алиасы в конце блока — совместимость
       со страницами v1. Правки значений — только в каноне, здесь синк. ---- */

  /* ---- цвет: бренд и семантика (§2.5) ---- */
  --sk-bg:#0B0A09;
  --sk-accent:#F27E30; --sk-accent-hover:#FF9147;
  --sk-gold:#FFCB3C; --sk-flame:#EA5642;
  --sk-tier-rare:#6FD0E8;                  /* канон: единственный голубой */
  --sk-ok:#7FC34E; --sk-ok-text:#8FD35F;   /* канон: точка и текст — разные токены */
  --sk-bad:#E4453B; --sk-bad-text:#F0665C;

  /* ---- цвет: текст (§2.6, только тёплый hex) ---- */
  --sk-text-0:#FFFFFF; --sk-text:#EDE5DC; --sk-text-2:#C6B5A5; --sk-text-3:#A5988E;
  --sk-text-4:#9C9088; --sk-text-5:#8A7F76; --sk-text-6:#6F655C; --sk-text-7:#5C534B;
  --sk-text-warm-1:#FFE7CE; --sk-text-warm-2:#FFD9B4; --sk-text-warm-3:#FFCFA8;
  --sk-on-accent:#0B0A09;                  /* канон §6.1: текст основной кнопки тёмный */

  /* ---- поверхности (§2.1) ---- */
  --sk-card:rgba(20,18,17,.5); --sk-card-accent:rgba(28,20,15,.5);
  --sk-tile:rgba(30,27,25,.4); --sk-cell:rgba(20,18,17,.72);
  --sk-raised:rgba(255,255,255,.04); --sk-row:rgba(255,255,255,.02);
  --sk-chrome:rgba(17,15,14,.55);
  --sk-bd-07:rgba(255,255,255,.07); --sk-bd-12:rgba(255,255,255,.12);
  --sk-bd-2:rgba(255,255,255,.2); --sk-bd-35:rgba(255,255,255,.35);
  --sk-bd-acc-26:rgba(242,126,48,.26); --sk-bd-acc-45:rgba(242,126,48,.45);
  --sk-bd-bad:rgba(228,69,59,.3); --sk-bd-ok:rgba(127,195,78,.3);
  --sk-blur-card:blur(22px) saturate(120%); --sk-blur-chrome:blur(12px);

  /* ---- тени (§5) ---- */
  --sk-shadow-hover:6px 6px 0 0 rgba(9,8,7,.9), 6px 6px 0 1px rgba(255,255,255,.4);
  --sk-shadow-soft:6px 6px 0 0 rgba(9,8,7,.9), 6px 6px 0 1px rgba(255,255,255,.28);
  --sk-shadow-sm:4px 4px 0 0 rgba(9,8,7,.9), 4px 4px 0 1px rgba(255,255,255,.35);
  --sk-shadow-xs:3px 3px 0 0 rgba(9,8,7,.9), 3px 3px 0 1px rgba(255,255,255,.3);
  --sk-shadow-press:2px 2px 0 0 rgba(9,8,7,.9), 2px 2px 0 1px rgba(255,255,255,.35);
  --sk-shadow-press-sm:1px 1px 0 0 rgba(9,8,7,.9), 1px 1px 0 1px rgba(255,255,255,.25);

  /* ---- типографика (§3) ---- */
  --sk-font-display:'KINO',system-ui,sans-serif;  /* канон-фолбэк (был Arial Black) */
  /* юзер-правило 17.09: всего ДВА шрифта — KINO (заголовки/акценты/числа) + ui-monospace (все остальные тексты) */
  --sk-font-body:ui-monospace,'Cascadia Mono','JetBrains Mono',Consolas,monospace;
  --sk-font-mono:ui-monospace,'Cascadia Mono','JetBrains Mono',Consolas,monospace;  /* осознанное: без файла JBM */
  --sk-font-kicker:var(--sk-font-mono);  /* осознанное: Tektur-замена, mono uppercase */

  /* ---- движение (§5/§7): канонные easing и длительности ---- */
  --sk-ease:cubic-bezier(.16,1,.3,1);
  --sk-ease-soft:cubic-bezier(.25,.8,.25,1);
  --sk-ease-press:cubic-bezier(.4,0,.2,1);
  --sk-ease-pill:cubic-bezier(.34,1.36,.6,1);
  --sk-t-42:.42s; --sk-t-3:.3s; --sk-t-2:.2s;
  --sk-d-press:.12s; --sk-d-glow:.4s; --sk-d-in:.62s;

  /* ---- FAQ (§7) ---- */
  --sk-faq-glyph:22px; --sk-faq-bar-w:16px; --sk-faq-bar-h:2px;
  --sk-faq-rot-off:90deg; --sk-faq-rot-on:180deg;

  /* ---- амбиент/карточка: курсорные переменные (§13) ---- */
  --gx:50%; --gy:50%; --go:0; --press:0;

  /* ---- алиасы совместимости со страницами v1 — в новом коде не использовать ---- */
  --sk-acc:var(--sk-accent); --sk-acc-h:var(--sk-accent-hover);
  --sk-rare:var(--sk-tier-rare);
  --sk-on-acc:var(--sk-on-accent);
  --sk-card-acc:var(--sk-card-accent);
  --sk-t0:var(--sk-text-0); --sk-t1:var(--sk-text); --sk-t2:var(--sk-text-2); --sk-t3:var(--sk-text-3);
  --sk-t4:var(--sk-text-4); --sk-t5:var(--sk-text-5); --sk-t6:var(--sk-text-6); --sk-t7:var(--sk-text-7);
  --sk-warm1:var(--sk-text-warm-1); --sk-warm2:var(--sk-text-warm-2); --sk-warm3:var(--sk-text-warm-3);
  --sk-f-display:var(--sk-font-display); --sk-f-body:var(--sk-font-body);
  --sk-f-mono:var(--sk-font-mono); --sk-f-kick:var(--sk-font-kicker);
  --sk-shadow-hover-soft:var(--sk-shadow-soft);
}
*{margin:0;padding:0;box-sizing:border-box;}
input, button { font-family: inherit; }

body{
  background:var(--sk-bg); color:var(--sk-text);
  font:500 14.5px/1.6 var(--sk-font-body);
  -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden;
}
a{color:var(--sk-text); text-decoration:none;}  /* юзер-правило: текст ссылок белый, как весь текст */
a:hover{color:var(--sk-accent-hover);}
:focus-visible{outline:2px solid var(--sk-accent); outline-offset:2px;}
::selection{background:rgba(242,126,48,.35); color:#fff;}
.shell{max-width:1120px; width:100%; margin:0 auto; padding:0 20px; position:relative; z-index:2;}
/* юзер-правило 17.09: на мобильной ширине контент не прижат к краю — шире гуттеры */
@media(max-width:719px){ .shell{padding:0 32px;} }

/* ================= амбиент: шары и луч (§10.3) ================= */
.skd-amb{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.skd-amb i{position:absolute; display:block;}
.skd-amb .ember{width:300px;height:300px;left:8%;top:26%;border-radius:50%;
  background:radial-gradient(circle, rgba(242,126,48,.14), transparent 65%);
  filter:blur(60px); animation:skdOrb 34s ease-in-out infinite;}
.skd-amb .flame{width:220px;height:220px;right:4%;bottom:8%;border-radius:50%;
  background:radial-gradient(circle, rgba(234,86,66,.12), transparent 65%);
  filter:blur(70px); animation:skdOrb 46s ease-in-out infinite reverse;}
.skd-amb .lamp{width:78vw;height:72vh;right:-14%;top:-22%;border-radius:50%;
  background:radial-gradient(circle, rgba(255,203,60,.07), transparent 60%);
  filter:blur(30px); animation:skdOrb 68s ease-in-out infinite;}
@keyframes skdOrb{
  0%{transform:translate(0,0) scale(1);}
  25%{transform:translate(38vw,14vh) scale(1.16);}
  50%{transform:translate(58vw,-6vh) scale(.92);}
  75%{transform:translate(22vw,-18vh) scale(1.1);}
  100%{transform:translate(0,0) scale(1);}
}

/* ================= карточка: шесть слоёв (§4) ================= */
.skd-card{
  position:relative; background:var(--sk-card);
  backdrop-filter:var(--sk-blur-card); -webkit-backdrop-filter:var(--sk-blur-card);
  border:1px solid var(--sk-bd-07); border-radius:0; padding:24px;
  overflow:hidden; isolation:isolate;
  /* юзер-модель 17.09: тень = отпечаток на полу, включается сразу ЦЕЛИКОМ (.12s, без роста),
     карточка ОТРЫВАЕТСЯ от неё вверх (.2s). Не «тень вырастает» — «блок поднимается над тенью» */
  transition:border-color .2s ease, box-shadow .12s var(--sk-ease), transform .3s var(--sk-ease);
  --gx:50%; --gy:50%; --go:0;
}
.skd-card:hover{border-color:var(--sk-bd-12); box-shadow:var(--sk-shadow-hover); transform:translateY(-3px);}
.skd-card.is-press{transform:translate(6px,6px); box-shadow:none !important; transition:transform var(--sk-d-press) cubic-bezier(.4,0,.2,1);}
.skd-card>*{position:relative; z-index:5;}
.skd-card__layer,.skd-card__dots,.skd-card__frame,.skd-card__corners,.skd-card__breath{
  position:absolute; pointer-events:none; z-index:1;
}
/* слой 2: радиальный свет под курсором — плавность ТОЛЬКО от лерпа --go (§13), CSS-transition не нужен */
.skd-card__layer{inset:0; opacity:var(--go);
  background:radial-gradient(260px circle at var(--gx) var(--gy), rgba(242,126,48,.16), transparent 70%);}
/* слой 3: точечная сетка (шаг 15px, маска 190px вокруг курсора) — три стопа §22.4 */
.skd-card__dots{inset:0; z-index:0; opacity:calc(var(--go)*.42);
  background-image:radial-gradient(rgba(255,198,126,.32) 1px, transparent 1px);
  background-size:15px 15px;
  mask:radial-gradient(190px circle at var(--gx) var(--gy), #000 0%, rgba(0,0,0,.35) 45%, transparent 72%);
  -webkit-mask:radial-gradient(190px circle at var(--gx) var(--gy), #000 0%, rgba(0,0,0,.35) 45%, transparent 72%);}
/* слой 4: световая рамка (маска-кольцо 1px по контуру, радиус 170px) */
.skd-card__frame{inset:-1px; padding:1px; opacity:var(--go);
  background:radial-gradient(170px circle at var(--gx) var(--gy), rgba(255,208,140,.95), rgba(242,126,48,.4) 60%, transparent);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude; -webkit-mask-composite:xor;}
/* слой 5: уголки-скобки (8 отрезков 11×1) — прозрачности .6/.45/.35 по §4.1, в покое НЕВИДИМЫ */
.skd-card__corners{inset:6px;
  background-image:
    linear-gradient(var(--sk-bd-acc-45),var(--sk-bd-acc-45)), linear-gradient(var(--sk-bd-acc-45),var(--sk-bd-acc-45)),
    linear-gradient(var(--sk-bd-acc-65, rgba(242,126,48,.65)),var(--sk-bd-acc-65, rgba(242,126,48,.65))),
    linear-gradient(var(--sk-bd-acc-65, rgba(242,126,48,.65)),var(--sk-bd-acc-65, rgba(242,126,48,.65))),
    linear-gradient(var(--sk-bd-acc-45),var(--sk-bd-acc-45)), linear-gradient(var(--sk-bd-acc-45),var(--sk-bd-acc-45)),
    linear-gradient(var(--sk-bd-acc-35, rgba(242,126,48,.35)),var(--sk-bd-acc-35, rgba(242,126,48,.35))),
    linear-gradient(var(--sk-bd-acc-35, rgba(242,126,48,.35)),var(--sk-bd-acc-35, rgba(242,126,48,.35)));
  background-position:left top,left top, right top,right top, left bottom,left bottom, right bottom,right bottom;
  background-size:11px 1px, 1px 11px, 11px 1px, 1px 11px, 11px 1px, 1px 11px, 11px 1px, 1px 11px;
  background-repeat:no-repeat; opacity:var(--go);}
/* слой 6: дыхание кромки — 8 периодов (§4.2) */
.skd-card__breath{inset:0; border:1px solid transparent; animation:skdBreath 29s ease-in-out infinite;}
.b24 .skd-card__breath{animation-duration:24s;} .b27 .skd-card__breath{animation-duration:27s;}
.b29 .skd-card__breath{animation-duration:29s;} .b33 .skd-card__breath{animation-duration:33s;}
.b34 .skd-card__breath{animation-duration:34s;} .b39 .skd-card__breath{animation-duration:39s;}
.b44 .skd-card__breath{animation-duration:44s;} .b49 .skd-card__breath{animation-duration:49s;}
@keyframes skdBreath{0%,100%{border-color:rgba(255,255,255,.34);} 50%{border-color:rgba(255,255,255,.62);}}
/* штриховка (§4.3) */
.skd-hatch{position:absolute; width:210px; height:130px; right:0; top:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(45deg, rgba(242,126,48,.14) 0 1px, transparent 1px 12px);
  mask:linear-gradient(215deg,#000 0%,transparent 72%); -webkit-mask:linear-gradient(215deg,#000 0%,transparent 72%);}

/* ================= типо-роли (§3) ================= */
.skd-kicker{font:700 11.5px/1.4 var(--sk-font-kicker); letter-spacing:.28em; text-transform:uppercase; color:var(--sk-text-warm-3);}
.skd-h1{font:400 clamp(38px,8vw,56px)/1.02 var(--sk-font-display); color:var(--sk-text-0); letter-spacing:.015em; text-transform:uppercase;}
.skd-h2{font:400 clamp(27px,4.6vw,38px)/1.06 var(--sk-font-display); color:var(--sk-text-0); letter-spacing:.015em; text-transform:uppercase;}
.skd-h3{font:400 20px/1.15 var(--sk-font-display); color:var(--sk-text-0); letter-spacing:.03em;}
.skd-num{font:400 56px/.92 var(--sk-font-display); color:var(--sk-text-0);}
.skd-num-2{font:400 30px/1 var(--sk-font-display); color:var(--sk-text-0);}
.skd-lead{font-size:16.5px; color:var(--sk-text);}
.skd-mono{font:400 12.5px/1.5 var(--sk-font-mono); letter-spacing:.07em; color:var(--sk-text-5);}

/* ================= кнопки (§6.1) ================= */
.skd-btn{
  display:inline-flex; align-items:center; gap:10px; border-radius:0; cursor:pointer;
  padding:13px 22px; font:400 14.5px/1 var(--sk-font-display); letter-spacing:.07em; text-transform:uppercase;
  border:1px solid transparent; text-decoration:none;
  transition:background-color var(--sk-t-2) ease, color var(--sk-t-2) ease, border-color var(--sk-t-2) ease, transform var(--sk-t-2) var(--sk-ease-soft), box-shadow var(--sk-t-2) var(--sk-ease);
}
.skd-btn:hover{text-decoration:none; transform:translateY(-2px);}
.skd-btn.is-press{transform:translate(1px,1px); box-shadow:var(--sk-shadow-press) !important; transition:transform var(--sk-d-press) var(--sk-ease-press), box-shadow var(--sk-d-press) var(--sk-ease-press);}

.skd-btn--primary{background:var(--sk-accent); color:var(--sk-on-accent);}
.skd-btn--primary:hover{background:var(--sk-accent-hover); color:var(--sk-on-accent); box-shadow:var(--sk-shadow-hover); transform:translateY(-2px);}
.skd-btn--ghost{background:rgba(242,126,48,.08); border:1px solid var(--sk-bd-acc-45); color:var(--sk-text-warm-3);}
.skd-btn--ghost:hover{border-color:var(--sk-bd-acc-65, rgba(242,126,48,.65)); box-shadow:var(--sk-shadow-hover); transform:translateY(-2px);}
.skd-btn--dashed{background:transparent; border:1px dashed var(--sk-bd-2); color:var(--sk-text-2);}
.skd-btn--dashed:hover{box-shadow:var(--sk-shadow-hover); transform:translateY(-2px); color:var(--sk-text-0);}
.skd-btn.is-press{transform:translate(6px,6px); box-shadow:none;}
.skd-btn .arr{font:400 14.5px/1 var(--sk-font-mono);}

/* ================= живая пилюля навигации (§8.2) ================= */
.skd-nav{position:relative; display:flex; gap:4px;}
.skd-nav a{
  position:relative; z-index:2; padding:10px 16px; font:700 13.5px/1 var(--sk-font-body);
  color:var(--sk-text-3); letter-spacing:.02em; text-decoration:none; transition:color .18s ease;
}
.skd-nav a:hover{color:var(--sk-text-0);}
/* юзер-правило 17.09: активная секция — тёплый текст на тускло-оранжевой плашке (§17.11) */
.skd-nav a.on{color:var(--sk-text-warm-3);}
.skd-nav .pill{position:absolute; z-index:1; top:0; bottom:0; left:0; width:0;
  /* юзер-правило 17.09: активный пункт — тускло-оранжевая плашка (§17.11 актив-таб) */
  background:rgba(242,126,48,.16); border:1px solid rgba(242,126,48,.26);
  transition:left .55s cubic-bezier(.3,1.28,.38,1), width .55s cubic-bezier(.3,1.28,.38,1), opacity .3s;
  opacity:0; pointer-events:none;}
.skd-nav .pill.show{opacity:1;}
/* желе-растяжение пилюли на перелёте (юзер 17.09): тянет по X, приседает по Y, сборка к концу */
.skd-nav .pill.glide{animation:skdPillStretch .55s cubic-bezier(.22,.7,.16,1);}
@keyframes skdPillStretch{0%{transform:scaleX(1.25) scaleY(.82);} 55%{transform:scaleX(.95) scaleY(1.05);} 100%{transform:none;}}

/* ================= статусные точки (§6.6) ================= */
.dot{width:8px;height:8px;border-radius:0;flex:none;display:inline-block;}  /* юзер: индикаторы квадратные */
.dot-ok{background:var(--sk-ok); animation:skdBreathDot 3.2s ease-in-out infinite;}
.dot-soon{background:var(--sk-gold); animation:skdBreathDot 4.5s ease-in-out infinite;}
.dot-off{background:var(--sk-bad);}
.dot-wait{background:var(--sk-text-6);}
@keyframes skdBreathDot{0%,100%{opacity:1;}50%{opacity:.45;}}

/* ================= чипы (§6.6) ================= */
.skd-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;
  font:700 11.5px/1 var(--sk-font-mono);letter-spacing:.1em;text-transform:uppercase;
  border:1px dashed var(--sk-bd-2); color:var(--sk-text-warm-3); border-radius:0;}
.skd-chip .dot{width:7px;height:7px;}

/* ================= вход карточек и символов (§1.4) ================= */
.skd-rv{opacity:0; transform:translateY(18px) scale(.985);}
.skd-rv.skd-in{opacity:1; transform:none;
  transition:opacity var(--sk-d-in) ease, transform var(--sk-d-in) ease;
  transition-delay:var(--d,0ms);}
.skd-ch{display:inline-block; opacity:0; transform:translateY(9px) scale(.9);
  animation:skdCharIn .5s cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes skdCharIn{to{opacity:1; transform:none; filter:blur(0);}}
.skd-ch{filter:blur(3px);}

/* ================= желе-въезд слева (юзер-эксперимент 17.09): «пара блоков, нежданно, как желейки» ================= */
.skd-rv.jl{transition:none;}
.skd-rv.jl.skd-in{animation:skdJellyL .78s var(--sk-ease) both; animation-delay:var(--d,0ms);}
@keyframes skdJellyL{
  0%{opacity:0; transform:translateX(-56px) scale(.92,.96);}
  50%{opacity:1; transform:translateX(6px) scale(1.04,.94);}
  70%{transform:translateX(-3px) scale(.98,1.02);}
  85%{transform:translateX(1px) scale(1.01,.99);}
  100%{opacity:1; transform:none;}
}

/* ================= тарифная подсветка (§2.5) ================= */
.skd-tier-acc::before{content:''; position:absolute; left:0; right:0; top:-1px; height:2px; z-index:6;
  background:linear-gradient(90deg, transparent, var(--sk-accent) 22%, var(--sk-gold) 50%, var(--sk-accent) 78%, transparent);}

/* ================= reduced motion (§16.2) ================= */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
  html{scroll-behavior:auto;}
  .skd-amb .ember,.skd-amb .flame,.skd-amb .lamp{display:none;}
  .skd-rv{opacity:1; transform:none;}
  .skd-ch{opacity:1; filter:none;}
  .skd-card:hover{transform:none;}
  .skd-btn:hover{transform:none;}
}

/* ================= амбиент: луч (§10.3, 4-й объект; значения — прод) =================
   юзер-правило 17.09: луч плавно ВЫЕЗЖАЕТ при загрузке (skdRayIn, from-only → к значению sway) */
.skd-amb .ray{position:absolute; right:-24%; top:-34%; width:104vw; height:104vh;
  transform-origin:74% 26%; filter:blur(52px);
  animation:skdRaySway 96s ease-in-out infinite, skdRayIn 3.6s ease;
  background:conic-gradient(from 178deg at 74% 26%, transparent 0deg, rgba(255,182,92,.09) 9deg, transparent 20deg, transparent 33deg, rgba(255,168,80,.07) 42deg, transparent 55deg, transparent 68deg, rgba(255,190,110,.06) 76deg, transparent 90deg, transparent 360deg);}
@keyframes skdRayIn{from{opacity:0;}}
@keyframes skdRaySway{
  0%{transform:rotate(-3deg) scale(1.02); opacity:.5;}
  45%{transform:rotate(2.5deg) scale(1.08); opacity:.72;}
  100%{transform:rotate(-3deg) scale(1.02); opacity:.5;}
}

/* ================= канва-фон (§10.2): клетка 44px + частицы + волны ================= */
#sk-fx-canvas{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:1;}

/* ================= курсор (§11): точка 5px + кольцо 26px, квадраты ================= */
html.sk-fx-cursor, html.sk-fx-cursor *{cursor:none !important;}
/* юзер-правило 17.09: на мобильной ширине курсор системный (гейт в skd.js вешает класс) */
html.sk-fx-cursor.sk-cursor-off, html.sk-fx-cursor.sk-cursor-off *{cursor:auto !important;}
#sk-cursor-dot, #sk-cursor-ring{position:fixed; left:0; top:0; pointer-events:none; opacity:0;}
#sk-cursor-dot{width:5px; height:5px; background:var(--sk-accent); box-shadow:0 0 10px rgba(242,126,48,.9); z-index:99999;}
#sk-cursor-ring{width:26px; height:26px; border:1px solid rgba(242,126,48,.55); background:transparent; z-index:99998;}

/* ================= жидкие точки (§10.1): канва глушит статичный слой ================= */
.skd-card canvas.skd-fluid-cv, .ledger-row canvas.skd-fluid-cv, .now-row canvas.skd-fluid-cv{
  position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
  transition:opacity .35s ease;} /* юзер-правило 17.09: жидкие точки появляются плавно, не резко */

/* ================= скролл (§9.3): натив скрыт, внутренние области квадратные,
     кастомный рельс страницы рисует skd.js (#sk-scrollrail) ================= */
html, body{scrollbar-width:none; -ms-overflow-style:none;}
html::-webkit-scrollbar, body::-webkit-scrollbar{width:0; height:0;}
*::-webkit-scrollbar{width:10px; height:10px;}
*::-webkit-scrollbar-track{background:rgba(255,255,255,.03);}
*::-webkit-scrollbar-thumb{background:rgba(242,126,48,.5); border:2px solid #0B0A09;}
*::-webkit-scrollbar-thumb:hover{background:var(--sk-accent);}
#sk-scrollrail{position:fixed; top:0; right:0; width:12px; height:100%; z-index:92; pointer-events:none;
  /* юзер-правило 17.09: рельс живёт только при скролле — выехал/заехал */
  opacity:0; transform:translateX(8px); transition:opacity .4s ease, transform .4s ease;}
#sk-scrollrail.active{opacity:1; transform:none;}
#sk-scrollrail i{position:absolute; right:4px; width:4px; border-radius:0;
  background:rgba(242,126,48,.55); min-height:44px;}

/* ================= кнопка «вверх» (§9.5): 46×46, порог 320px ================= */
#sk-totop{position:fixed; bottom:74px; right:18px; width:46px; height:46px; z-index:80;
  display:flex; align-items:center; justify-content:center; border-radius:0; cursor:pointer;
  border:1px solid var(--sk-bd-12); background:rgba(255,255,255,.04); color:var(--sk-text-2);
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .3s ease, transform .3s var(--sk-ease), box-shadow .2s var(--sk-ease), border-color .2s ease, color .2s ease;}
#sk-totop.on{opacity:1; transform:none; pointer-events:auto;}
/* юзер-правило 17.09: кнопка «вверх» тоже прячется при простое скролла */
#sk-totop.on.idle{opacity:0; transform:translateX(66px); pointer-events:none;}
#sk-totop:hover{color:var(--sk-text-0); border-color:rgba(255,255,255,.35); box-shadow:var(--sk-shadow-sm);}
#sk-totop.is-press{transform:translate(1px,1px); box-shadow:var(--sk-shadow-press-sm) !important;}

/* ================= FAQ (§7): морфинг + → − , два бара, тело на grid-rows ================= */
.skd-faq{border-bottom:1px solid var(--sk-bd-07);}
.skd-faq:first-of-type{border-top:1px solid var(--sk-bd-07);}
.skd-faq__q{display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%;
  padding:20px 22px; border:0; background:transparent; cursor:pointer; text-align:left;
  font:400 19px/1.25 var(--sk-font-display); letter-spacing:.02em; color:var(--sk-text);
  transition:color .18s ease, transform var(--sk-t-42) var(--sk-ease);}
.skd-faq__q:hover{color:var(--sk-text-0);}
/* юзер-правило 17.09: FAQ — плоские строки, без преподнятия и жёсткой тени */
.skd-faq__q:hover{transform:none; box-shadow:none;}
.skd-faq[data-open="true"] .skd-faq__q{transform:translateX(-6px);}
.skd-faq__glyph{position:relative; width:var(--sk-faq-glyph); height:var(--sk-faq-glyph); flex:none; color:var(--sk-accent);}
.skd-faq__glyph::before, .skd-faq__glyph::after{
  content:''; position:absolute; top:50%; left:50%;
  width:var(--sk-faq-bar-w); height:var(--sk-faq-bar-h);
  margin:calc(var(--sk-faq-bar-h) / -2) 0 0 calc(var(--sk-faq-bar-w) / -2);
  background:currentColor;
  transition:transform var(--sk-t-42) var(--sk-ease-pill), opacity var(--sk-t-3) var(--sk-ease-soft);}
.skd-faq__glyph::before{transform:rotate(0deg);}
.skd-faq__glyph::after{transform:rotate(var(--sk-faq-rot-off)); opacity:1;}
.skd-faq[data-open="true"] .skd-faq__glyph::after{transform:rotate(0deg); opacity:0;}
.skd-faq[data-open="true"] .skd-faq__glyph::before{transform:rotate(var(--sk-faq-rot-on));}
.skd-faq__body{display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--sk-t-42) var(--sk-ease);}
.skd-faq[data-open="true"] .skd-faq__body{grid-template-rows:1fr;}
.skd-faq__body > div{overflow:hidden;}
.skd-faq__a{padding:2px 22px 20px; color:var(--sk-text); font-size:15px; max-width:640px;}

/* ================= контролы (§6): тумблер-желе, икон-кнопки, инпут, степпер, бар, чип ================= */
.skd-switch{display:inline-flex; align-items:center; gap:12px; cursor:pointer;}
.skd-switch input{position:absolute; opacity:0; pointer-events:none;}
.skd-switch__track{position:relative; width:58px; height:32px; flex:none; border-radius:0;
  border:1px solid var(--sk-bd-14); background:rgba(8,7,6,.6); transition:background .3s var(--sk-ease-soft), border-color .3s ease, box-shadow .3s ease;}
.skd-switch__knob{position:absolute; top:3px; left:3px; width:24px; height:24px;
  background:var(--sk-text-2); transition:transform .25s var(--sk-ease-soft), background .3s ease;}
.skd-switch input:checked + .skd-switch__track{border-color:rgba(242,126,48,.45);
  background:rgba(242,126,48,.12); box-shadow:0 0 14px rgba(242,126,48,.65);}
.skd-switch input:checked + .skd-switch__track .skd-switch__knob{background:var(--sk-accent);}
.skd-ibtn{display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:38px; height:38px; border-radius:0; cursor:pointer; color:var(--sk-text-2);
  border:1px solid var(--sk-bd-09); background:rgba(255,255,255,.03);
  transition:box-shadow .2s var(--sk-ease), border-color .2s ease, color .2s ease, transform var(--sk-t-2) var(--sk-ease-soft);}
.skd-ibtn:hover{color:var(--sk-text-0); border-color:rgba(255,255,255,.28); box-shadow:var(--sk-shadow-sm); transform:translateY(-2px);}
.skd-ibtn.is-press{transform:translate(1px,1px); box-shadow:var(--sk-shadow-press-sm) !important;}
.skd-ibtn--34{width:34px; height:34px;} .skd-ibtn--42{width:42px; height:42px;}
.skd-ibtn--44{width:44px; height:44px;} .skd-ibtn--48{width:48px; height:48px;}
.skd-input{width:100%; border-radius:0; border:1px solid var(--sk-bd-08);
  background:rgba(8,7,6,.6); color:var(--sk-text); padding:13px 15px;
  transition:border-color .2s ease, box-shadow .2s var(--sk-ease);}
.skd-input:focus{outline:none; border-color:rgba(242,126,48,.65); box-shadow:0 0 0 1px rgba(242,126,48,.65);}
.skd-step{display:inline-flex; align-items:center; gap:0;}
.skd-step button{width:38px; height:38px; border-radius:0; border:1px solid var(--sk-bd-12);
  background:transparent; color:var(--sk-text); cursor:pointer; font:400 19px/1 var(--sk-font-display);
  transition:background .2s var(--sk-ease-soft), box-shadow .2s var(--sk-ease);}
.skd-step button:hover{background:rgba(255,255,255,.09); box-shadow:var(--sk-shadow-xs);}
.skd-step b{min-width:86px; text-align:center; font:400 20px/1.1 var(--sk-font-display); color:var(--sk-text-0);}
.skd-bar{height:6px; border-radius:0; background:rgba(255,255,255,.06); overflow:hidden;}
.skd-bar i{display:block; height:100%; background:var(--sk-accent); box-shadow:0 0 8px rgba(242,126,48,.5);
  transition:width .7s var(--sk-ease);}
.skd-chip{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:0;
  font:400 13px/1 var(--sk-font-display); letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--sk-bd-12); background:rgba(255,255,255,.03); color:var(--sk-text-2);}
.skd-chip u{width:8px; height:8px; border-radius:0; background:currentColor; box-shadow:0 0 9px currentColor; text-decoration:none;}

/* ================= фуллскрин-меню (§8.4): бургер + overlay из ссылок .skd-nav =================
   бургер 44×44, бары 17×1.8px (§9.1); меню: inset 0, z 96, фон rgba(8,7,6,.86), blur 20px,
   падди 26px 22px, gap 18px, origin 50% 0%; вход menuIn .3s, выход menuOut .34s (мягкое закрытие
   400ms в skd.js), пункты labelIn .3s ease .16s backwards, стаггер 34ms через --i (§1.4) */
.skd-burger{display:none; align-items:center; justify-content:center; width:44px; height:44px;
  flex:none; border:1px solid var(--sk-bd-12); background:rgba(255,255,255,.04); cursor:pointer;
  flex-direction:column; gap:4px; border-radius:0;
  transition:border-color .2s ease, box-shadow .2s var(--sk-ease);}
.skd-burger span{display:block; width:17px; height:1.8px; background:var(--sk-text-2);
  transition:background .2s ease;}
.skd-burger:hover{border-color:var(--sk-bd-acc-45); box-shadow:var(--sk-shadow-sm);}
.skd-burger:hover span{background:var(--sk-accent);}
.skd-burger.is-press{transform:translate(1px,1px); box-shadow:var(--sk-shadow-press-sm) !important;}
.skd-menu{position:fixed; inset:0; z-index:96; display:flex; flex-direction:column; gap:18px;
  padding:26px 22px; background:rgba(8,7,6,.86);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  transform-origin:50% 0%; visibility:hidden; pointer-events:none;}
.skd-menu[data-open="1"]{visibility:visible; pointer-events:auto; animation:skdMenuIn .3s var(--sk-ease) forwards;}
.skd-menu[data-closing="1"]{visibility:visible; pointer-events:none; animation:skdMenuOut .34s var(--sk-ease) forwards;}
.skd-menu__top{display:flex; align-items:center; justify-content:space-between; min-height:44px;}
.skd-menu__label{font:400 13px/1 var(--sk-font-display); letter-spacing:.1em; text-transform:uppercase; color:var(--sk-text-5);}
.skd-menu__close{border:1px solid var(--sk-bd-12); background:rgba(255,255,255,.04); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; color:var(--sk-text-0);
  width:44px; height:44px; border-radius:0; transition:border-color .2s ease, color .2s ease;}
.skd-menu__close:hover{border-color:var(--sk-bd-acc-45); color:var(--sk-accent);}
.skd-menu a{font:400 27px/1.15 var(--sk-font-display); color:var(--sk-text-0); letter-spacing:.015em;
  text-transform:uppercase; text-decoration:none; padding:16px 0;
  border-bottom:1px solid var(--sk-bd-07); transition:color .18s ease;}
.skd-menu a:hover{color:var(--sk-accent-hover);}
.skd-menu[data-open="1"] a{animation:skdLabelIn .3s ease .16s backwards; animation-delay:calc(.16s + var(--i,0)*34ms);}
body.sk-menu-open{overflow:hidden;}
@keyframes skdMenuIn{from{opacity:0; transform:translateY(-16%);} to{opacity:1; transform:none;}}
@keyframes skdMenuOut{from{opacity:1; transform:none;} to{opacity:0; transform:translateY(-14%);}}
@keyframes skdLabelIn{from{opacity:0; transform:translateY(9px); filter:blur(3px);} to{opacity:1; transform:none; filter:blur(0);}}

/* ================= тач-фундамент (§14.2): на coarse-указателе ховер не залипает ================= */
@media (hover:none){
  .skd-card:hover{transform:none; box-shadow:none;}
  .skd-btn:hover,.skd-btn--primary:hover,.skd-btn--ghost:hover,.skd-btn--dashed:hover{transform:none; box-shadow:none;}
  .skd-ibtn:hover,.skd-burger:hover,#sk-totop:hover{transform:none; box-shadow:none;}
}
@media (pointer:coarse){ body{-webkit-tap-highlight-color:transparent;} }
@media (prefers-reduced-motion: reduce){
  .skd-menu a{opacity:1; animation:none;}
  .skd-menu[data-open="1"],.skd-menu[data-closing="1"]{animation:none;}
}