/* ==========================================================
   РЕТАЧ — «Создание сайтов»: темы оформления + блок «Один сайт — шесть характеров».
   Тема задаётся атрибутом data-theme на .st-page (вся страница) или на .st-sp (только пример).
   Все цвета/шрифты/скругления — переменные из sites.css.
   ========================================================== */

/* общий стиль сайта жёстко красит и шрифтит h1–h3 — возвращаем управление темам */
.st-page :where(h1,h2,h3,h4){
  font-family:var(--st-font-head) !important;
  color:var(--st-text) !important;
}

/* номера шагов/пунктов — контрастным акцентным цветом темы */
.st-page[data-theme] .st-step-btn:not(.is-active) b,
.st-page[data-theme] .st-hot:not(.is-active) .st-hot__n{
  color:var(--st-accent-ink);
}

/* кнопки не наследуют цвет текста — без этого в тёмных темах их подписи чёрные */
.st-page .st-hot,
.st-page .st-step-btn{
  color:var(--st-text);
}

.st-page[data-theme] img,
.st-sp img{
  filter:var(--st-img-filter) !important;
}

/* плавная смена (запасной вариант, если нет View Transitions) */
.st-page.st-theming,
.st-page.st-theming *{
  transition:
    background-color .55s ease,
    color .55s ease,
    border-color .55s ease,
    box-shadow .55s ease,
    border-radius .55s ease,
    filter .55s ease !important;
}

/* круговое «перетекание» темы через View Transitions API */
::view-transition-old(root),
::view-transition-new(root){
  animation:none;
  mix-blend-mode:normal;
}

::view-transition-new(root){
  animation:st-reveal-theme .8s cubic-bezier(.65,0,.35,1) both;
}

@keyframes st-reveal-theme{
  from{ clip-path:circle(0 at var(--st-vt-x,50%) var(--st-vt-y,50%)); }
  to{ clip-path:circle(150vmax at var(--st-vt-x,50%) var(--st-vt-y,50%)); }
}


/* ==========================================================
   ТЕМЫ
   ========================================================== */

/* ---------- ПРЕМИУМ: чёрный, золото, классика ---------- */
[data-theme="lux"]{
  --st-text:#f3ede2;
  --st-muted:#b5a993;
  --st-ink2:#d8cdb9;
  --st-purple:#d4af6a;
  --st-accent-ink:#e2c17d;
  --st-accent-solid:#6e5222;
  --st-line:rgba(212,175,106,.24);
  --st-soft:#221e15;
  --st-card:rgba(26,23,17,.88);
  --st-surface:#15130e;
  --st-bg:#0d0c09;
  --st-grid:rgba(212,175,106,.08);
  --st-form-bg:#000;
  --st-on-accent:#1a1406;
  --st-radius:6px;
  --st-font-head:"Playfair Display","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --st-grad:linear-gradient(100deg,#a87a2f 0%,#f0d590 48%,#b88a3b 100%);
  --st-img-filter:sepia(.8) saturate(1.25) hue-rotate(-14deg) brightness(.92) contrast(1.05);
  --st-bg-hero:
    radial-gradient(800px 480px at 78% 30%, rgba(212,175,106,.20), transparent 62%),
    radial-gradient(500px 360px at 10% 90%, rgba(212,175,106,.10), transparent 60%),
    linear-gradient(180deg,#0d0c09 0%,#15120c 100%);
  --st-bg-alt:
    radial-gradient(700px 380px at 15% 20%, rgba(212,175,106,.12), transparent 62%),
    #100e0a;
  --st-stage:
    radial-gradient(420px 260px at 50% 40%, rgba(212,175,106,.18), transparent 70%),
    #120f0a;
  --st-accent-panel:
    radial-gradient(260px 200px at 90% 10%, rgba(240,213,144,.30), transparent 60%),
    linear-gradient(135deg,#2a2112 0%,#5b4419 60%,#8a6a2c 100%);
  --st-dark-panel:
    radial-gradient(320px 220px at 100% 0%, rgba(212,175,106,.26), transparent 60%),
    linear-gradient(150deg,#1b1711 0%,#2b2315 100%);
}

/* ---------- TECH / НЕОН ---------- */
[data-theme="neon"]{
  --st-text:#e8f1ff;
  --st-muted:#93a3c4;
  --st-ink2:#c2cee8;
  --st-purple:#00e5ff;
  --st-accent-ink:#5ff0ff;
  --st-accent-solid:#1a1f4d;
  --st-line:rgba(0,229,255,.22);
  --st-soft:#0f1733;
  --st-card:rgba(12,18,42,.86);
  --st-surface:#0b1128;
  --st-bg:#060a18;
  --st-grid:rgba(0,229,255,.10);
  --st-form-bg:#020512;
  --st-on-accent:#fff;
  --st-radius:14px;
  --st-font-head:"JetBrains Mono","Fira Code",ui-monospace,Consolas,"Courier New",monospace;
  --st-grad:linear-gradient(100deg,#00e5ff 0%,#7c4dff 50%,#ff2bd6 100%);
  --st-img-filter:hue-rotate(-48deg) saturate(1.7) brightness(1.05) contrast(1.08);
  --st-bg-hero:
    radial-gradient(800px 480px at 78% 30%, rgba(124,77,255,.35), transparent 62%),
    radial-gradient(600px 420px at 8% 92%, rgba(0,229,255,.18), transparent 60%),
    linear-gradient(180deg,#060a18 0%,#0a1030 100%);
  --st-bg-alt:
    radial-gradient(700px 380px at 15% 20%, rgba(0,229,255,.12), transparent 62%),
    radial-gradient(600px 360px at 90% 90%, rgba(255,43,214,.10), transparent 60%),
    #070c1f;
  --st-stage:
    radial-gradient(420px 260px at 50% 40%, rgba(124,77,255,.30), transparent 70%),
    #08102a;
  --st-accent-panel:
    radial-gradient(260px 200px at 90% 10%, rgba(255,43,214,.40), transparent 60%),
    linear-gradient(135deg,#0d3a63 0%,#3b2aa8 60%,#7a1f9e 100%);
  --st-dark-panel:
    radial-gradient(320px 220px at 100% 0%, rgba(255,43,214,.28), transparent 60%),
    radial-gradient(280px 240px at 0% 100%, rgba(0,229,255,.22), transparent 60%),
    linear-gradient(150deg,#081232 0%,#141a4a 100%);
}

/* ---------- ЭКО ---------- */
[data-theme="eco"]{
  --st-text:#243020;
  --st-muted:#6c7562;
  --st-ink2:#3f4a37;
  --st-purple:#4f7d3a;
  --st-accent-ink:#3f6a2c;
  --st-accent-solid:#3a5f2a;
  --st-line:rgba(79,125,58,.20);
  --st-soft:#eef0df;
  --st-card:rgba(255,253,246,.9);
  --st-surface:#fffdf6;
  --st-bg:#f7f4ea;
  --st-grid:rgba(79,125,58,.07);
  --st-form-bg:#2b3a23;
  --st-radius:30px;
  --st-font-head:Georgia,"Times New Roman",serif;
  --st-grad:linear-gradient(100deg,#3f6a2c 0%,#86a948 55%,#d9a441 100%);
  --st-img-filter:hue-rotate(-150deg) saturate(.75) sepia(.18) brightness(1.02);
  --st-bg-hero:
    radial-gradient(800px 480px at 78% 30%, rgba(134,169,72,.28), transparent 62%),
    radial-gradient(600px 420px at 8% 92%, rgba(217,164,65,.20), transparent 60%),
    linear-gradient(180deg,#fbf8ef 0%,#f1eedd 100%);
  --st-bg-alt:
    radial-gradient(700px 380px at 15% 20%, rgba(134,169,72,.18), transparent 62%),
    #f3f0e2;
  --st-stage:
    radial-gradient(420px 260px at 50% 40%, rgba(134,169,72,.24), transparent 70%),
    #eef0df;
  --st-accent-panel:
    radial-gradient(260px 200px at 90% 10%, rgba(217,164,65,.45), transparent 60%),
    linear-gradient(135deg,#3f6a2c 0%,#5f8a37 60%,#a08a3a 100%);
  --st-dark-panel:
    radial-gradient(320px 220px at 100% 0%, rgba(217,164,65,.30), transparent 60%),
    linear-gradient(150deg,#24331d 0%,#3b5229 100%);
}

/* ---------- БРУТАЛИЗМ ---------- */
[data-theme="brutal"]{
  --st-text:#0a0a0a;
  --st-muted:#3a3a3a;
  --st-ink2:#111;
  --st-purple:#0a0a0a;
  --st-accent-ink:#0a0a0a;
  --st-accent-solid:#0a0a0a;
  --st-line:#0a0a0a;
  --st-soft:#ffe600;
  --st-card:#fff;
  --st-surface:#fff;
  --st-bg:#f2f0e9;
  --st-grid:rgba(0,0,0,.08);
  --st-form-bg:#0a0a0a;
  --st-on-accent:#0a0a0a;
  --st-radius:0px;
  --st-font-head:"Arial Black","Helvetica Neue",Impact,Arial,sans-serif;
  --st-grad:linear-gradient(#ffe600,#ffe600);
  --st-img-filter:grayscale(1) contrast(1.35) brightness(1.02);
  --st-bg-hero:#f2f0e9;
  --st-bg-alt:#e9e6dc;
  --st-stage:#ffe600;
  --st-accent-panel:#ffe600;
  --st-dark-panel:#0a0a0a;
}

/* ---------- ЯРКИЙ ---------- */
[data-theme="play"]{
  --st-text:#2b2140;
  --st-muted:#7a6f8c;
  --st-ink2:#4a3f60;
  --st-purple:#ff4f9a;
  --st-accent-ink:#b82a68;
  --st-accent-solid:#e8456f;
  --st-line:rgba(255,79,154,.22);
  --st-soft:#fff0e6;
  --st-card:rgba(255,255,255,.92);
  --st-surface:#fff;
  --st-bg:#fff8f1;
  --st-grid:rgba(255,122,89,.10);
  --st-form-bg:#3a1f5c;
  --st-radius:34px;
  --st-grad:linear-gradient(100deg,#ff7a59 0%,#ff4f9a 50%,#ffb627 100%);
  --st-img-filter:hue-rotate(78deg) saturate(1.35) brightness(1.04);
  --st-bg-hero:
    radial-gradient(700px 460px at 80% 25%, rgba(255,182,39,.35), transparent 62%),
    radial-gradient(600px 420px at 8% 92%, rgba(255,79,154,.22), transparent 60%),
    radial-gradient(420px 320px at 45% 5%, rgba(111,207,255,.25), transparent 60%),
    linear-gradient(180deg,#fffaf4 0%,#fff1e6 100%);
  --st-bg-alt:
    radial-gradient(700px 380px at 15% 20%, rgba(255,182,39,.22), transparent 62%),
    radial-gradient(600px 360px at 90% 90%, rgba(255,79,154,.16), transparent 60%),
    #fff4ea;
  --st-stage:
    radial-gradient(420px 260px at 50% 40%, rgba(255,79,154,.24), transparent 70%),
    #fff0e6;
  --st-accent-panel:
    radial-gradient(260px 200px at 90% 10%, rgba(255,182,39,.55), transparent 60%),
    linear-gradient(135deg,#ff7a59 0%,#ff4f9a 60%,#b44dff 100%);
  --st-dark-panel:
    radial-gradient(320px 220px at 100% 0%, rgba(255,182,39,.45), transparent 60%),
    linear-gradient(150deg,#3a1f5c 0%,#7a2b8f 100%);
}


/* ==========================================================
   ДЕТАЛИ ТЕМ ДЛЯ ВСЕЙ СТРАНИЦЫ
   ========================================================== */

/* кнопки с градиентом: цвет текста от темы */
.st-page[data-theme] .st-btn--primary,
.st-page[data-theme] .st-switch button.is-active,
.st-page[data-theme] .st-device-bar button.is-active,
.st-page[data-theme] .st-hot.is-active .st-hot__n,
.st-page[data-theme] .st-step-btn.is-active b{
  color:var(--st-on-accent);
}

/* тёмные темы: «стекло» карточек темнее, тени светятся */
.st-page[data-theme="lux"] .st-tile,
.st-page[data-theme="lux"] .st-type,
.st-page[data-theme="lux"] .st-offer,
.st-page[data-theme="lux"] .st-calc__panel{
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}

.st-page[data-theme="lux"] .st-eyebrow,
.st-page[data-theme="lux"] .st-calc__label{
  letter-spacing:.22em;
  text-transform:uppercase;
}

.st-page[data-theme="lux"] .st-hero h1{ font-weight:600; letter-spacing:-.01em; }

.st-page[data-theme="neon"] .st-tile,
.st-page[data-theme="neon"] .st-type,
.st-page[data-theme="neon"] .st-offer,
.st-page[data-theme="neon"] .st-calc__panel,
.st-page[data-theme="neon"] .st-faq details{
  box-shadow:0 0 0 1px rgba(0,229,255,.14), 0 0 34px rgba(0,229,255,.08);
}

.st-page[data-theme="neon"] .st-btn--primary{
  box-shadow:0 0 24px rgba(0,229,255,.45), 0 0 48px rgba(255,43,214,.25);
}

.st-page[data-theme="neon"] .st-eyebrow{
  font-family:var(--st-font-head);
  text-transform:lowercase;
}

.st-page[data-theme="neon"] .st-eyebrow::before{
  content:">";
  width:auto; height:auto;
  border-radius:0;
  background:none;
  box-shadow:none;
  color:#00e5ff;
}

.st-page[data-theme="neon"] .st-hero::before{
  -webkit-mask-image:radial-gradient(90% 90% at 60% 40%, #000 30%, transparent 85%);
  mask-image:radial-gradient(90% 90% at 60% 40%, #000 30%, transparent 85%);
}

.st-page[data-theme="eco"] .st-tile,
.st-page[data-theme="eco"] .st-type{
  border-radius:34px 34px 34px 10px;
}

.st-page[data-theme="eco"] .st-hero h1{ font-weight:700; letter-spacing:-.02em; }

/* брутализм: жёсткие рамки и тени со смещением */
.st-page[data-theme="brutal"] .st-tile,
.st-page[data-theme="brutal"] .st-type,
.st-page[data-theme="brutal"] .st-offer,
.st-page[data-theme="brutal"] .st-calc__panel,
.st-page[data-theme="brutal"] .st-calc__result,
.st-page[data-theme="brutal"] .st-step-btn,
.st-page[data-theme="brutal"] .st-step-view,
.st-page[data-theme="brutal"] .st-faq details,
.st-page[data-theme="brutal"] .st-compare,
.st-page[data-theme="brutal"] .st-switch,
.st-page[data-theme="brutal"] .st-stage,
.st-page[data-theme="brutal"] .st-chip,
.st-page[data-theme="brutal"] .st-style-btn,
.st-page[data-theme="brutal"] .st-sp{
  border:2px solid #0a0a0a !important;
  box-shadow:6px 6px 0 #0a0a0a !important;
  backdrop-filter:none;
}

.st-page[data-theme="brutal"] .st-btn{
  border:2px solid #0a0a0a;
  border-radius:0;
  box-shadow:4px 4px 0 #0a0a0a;
}

.st-page[data-theme="brutal"] .st-btn:hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 #0a0a0a;
}

.st-page[data-theme="brutal"] .st-grad{
  background:linear-gradient(transparent 58%, #ffe600 58%);
  -webkit-background-clip:border-box;
  background-clip:border-box;
  color:inherit;
}

.st-page[data-theme="brutal"] .st-hero h1,
.st-page[data-theme="brutal"] .st-h2{
  text-transform:uppercase;
  letter-spacing:-.02em;
}

.st-page[data-theme="brutal"] .st-tile--accent,
.st-page[data-theme="brutal"] .st-tile--accent p,
.st-page[data-theme="brutal"] .st-tile--accent h3{
  color:#0a0a0a !important;
}

.st-page[data-theme="brutal"] .st-tile--accent .st-tile__icon{ background:#0a0a0a; color:#ffe600; }
.st-page[data-theme="brutal"] .st-meter__ring{ background:conic-gradient(#0a0a0a calc(var(--v)*1%), rgba(0,0,0,.15) 0); }
.st-page[data-theme="brutal"] .st-meter__ring::before{ background:#ffe600; }
.st-page[data-theme="brutal"] .st-meter small{ color:#0a0a0a; }
.st-page[data-theme="brutal"] .st-calc__result .st-btn{ color:#0a0a0a; background:#ffe600; }
.st-page[data-theme="brutal"] .st-eyebrow{ border:2px solid #0a0a0a; background:#ffe600; color:#0a0a0a; }

/* яркий: «наклейки» и пружинящие карточки */
.st-page[data-theme="play"] .st-tile:hover,
.st-page[data-theme="play"] .st-type:hover{
  transform:translateY(-4px) rotate(-1deg);
}

.st-page[data-theme="play"] .st-chip{ transform:rotate(-3deg); }
.st-page[data-theme="play"] .st-chip--b{ transform:rotate(3deg); }
.st-page[data-theme="play"] .st-eyebrow{ border-style:dashed; }


/* ==========================================================
   БЛОК «Один сайт — шесть характеров»
   ========================================================== */

.st-styles-section{
  background:var(--st-bg-alt);
}

.st-styles{
  display:grid;
  grid-template-columns:minmax(260px,.42fr) minmax(0,1fr);
  gap:16px;
  align-items:start;
}

.st-styles__list{
  display:grid;
  gap:8px;
}

.st-style-btn{
  display:grid;
  grid-template-columns:46px 1fr;
  gap:12px;
  align-items:center;
  width:100%;
  padding:10px 12px;
  border:1px solid var(--st-line);
  border-radius:16px;
  background:var(--st-card);
  color:var(--st-text);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.st-style-btn:hover{ transform:translateX(4px); }

.st-style-btn.is-active{
  border-color:transparent;
  background:linear-gradient(var(--st-surface),var(--st-surface)) padding-box, var(--st-grad) border-box;
  border:2px solid transparent;
  box-shadow:0 14px 30px rgba(0,0,0,.10);
}

.st-style-btn__sw{
  position:relative;
  width:46px; height:46px;
  border-radius:13px;
  background:var(--a);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
  overflow:hidden;
}

.st-style-btn__sw::before,
.st-style-btn__sw::after{
  content:"";
  position:absolute;
  border-radius:50%;
}

.st-style-btn__sw::before{ width:26px; height:26px; right:-6px; bottom:-6px; background:var(--b); }
.st-style-btn__sw::after{ width:14px; height:14px; left:8px; top:8px; background:var(--c); }

.st-style-btn strong{ display:block; font-size:14.5px; }

.st-style-btn small{
  display:block;
  margin-top:2px;
  color:var(--st-muted);
  font-size:12px;
}

.st-styles__apply{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:6px;
  padding:8px 4px;
  color:var(--st-ink2);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}

.st-styles__apply input{
  width:18px; height:18px;
  accent-color:var(--st-purple);
}

/* превью */
.st-styles__preview{ min-width:0; }

.st-sp{
  overflow:hidden;
  border:1px solid var(--st-line);
  border-radius:calc(var(--st-radius) * .8 + 6px);
  background:var(--st-bg);
  color:var(--st-text);
  font-family:var(--st-font);
  box-shadow:0 30px 70px rgba(0,0,0,.14);
  transition:background-color .5s ease, color .5s ease, border-radius .5s ease;
}

.st-sp__bar{
  display:flex;
  align-items:center;
  gap:6px;
  height:30px;
  padding:0 12px;
  background:var(--st-soft);
  border-bottom:1px solid var(--st-line);
}

.st-sp__bar i{ width:9px; height:9px; border-radius:50%; background:var(--st-line); }

.st-sp__bar span{
  flex:1;
  max-width:300px;
  height:16px;
  margin:0 auto;
  border-radius:6px;
  background:var(--st-surface);
  color:var(--st-muted);
  font-size:10px;
  line-height:16px;
  text-align:center;
}

.st-sp__body{
  position:relative;
  padding:16px 20px 20px;
  background:var(--st-bg-hero);
}

.st-sp__nav{
  display:flex;
  align-items:center;
  gap:16px;
  font-size:12px;
  color:var(--st-ink2);
}

.st-sp__nav b{
  font-family:var(--st-font-head);
  font-size:15px;
  letter-spacing:.02em;
  color:var(--st-text);
}

.st-sp__nav span{ display:flex; gap:14px; margin-left:auto; }
.st-sp__nav i{ font-style:normal; }

.st-sp__nav em{
  padding:6px 12px;
  border-radius:calc(var(--st-radius) * .5);
  background:var(--st-grad);
  color:var(--st-on-accent);
  font-style:normal;
  font-weight:700;
}

.st-sp__hero{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:14px;
  align-items:center;
  margin-top:16px;
}

.st-sp__kicker{
  display:inline-block;
  padding:4px 10px;
  border:1px solid var(--st-line);
  border-radius:999px;
  color:var(--st-accent-ink);
  font-size:11px;
  font-weight:700;
}

.st-sp__title{
  margin:10px 0 0;
  font-size:clamp(24px,2.6vw,38px) !important;
  line-height:1.04;
  font-weight:800;
  letter-spacing:-.03em;
}

.st-sp__copy p{
  margin:10px 0 0;
  color:var(--st-muted);
  font-size:13.5px;
  line-height:1.5;
}

.st-sp__ctas{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }

.st-sp__btn{
  padding:10px 14px;
  border-radius:calc(var(--st-radius) * .5);
  background:var(--st-grad);
  color:var(--st-on-accent);
  font-size:12.5px;
  font-weight:700;
}

.st-sp__btn--ghost{
  background:var(--st-surface);
  color:var(--st-text);
  border:1px solid var(--st-line);
}

.st-sp__art{
  position:relative;
  aspect-ratio:4/3;
  border-radius:var(--st-radius);
  background:var(--st-stage);
  overflow:hidden;
}

.st-sp__art img{
  position:absolute;
  inset:-6% -10%;
  width:120%;
  height:112%;
  object-fit:contain;
  transition:filter .6s ease;
}

.st-sp__sticker{
  position:absolute;
  left:10px; bottom:10px;
  padding:6px 10px;
  border-radius:calc(var(--st-radius) * .5);
  background:var(--st-surface);
  color:var(--st-text);
  font-size:11px;
  font-weight:800;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}

.st-sp__cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:14px;
}

.st-sp__cards div{
  padding:12px;
  border:1px solid var(--st-line);
  border-radius:calc(var(--st-radius) * .6);
  background:var(--st-card);
}

.st-sp__cards b{
  display:block;
  font-family:var(--st-font-head);
  font-size:20px;
}

.st-sp__cards small{ color:var(--st-muted); font-size:11.5px; }

.st-styles__info{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}

.st-styles__info div{
  padding:12px 14px;
  border:1px solid var(--st-line);
  border-radius:16px;
  background:var(--st-card);
}

.st-styles__info small{
  display:block;
  color:var(--st-muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.st-styles__info b{
  display:block;
  margin-top:3px;
  font-size:14px;
}

/* «характер» примера: раскладка тоже меняется */
.st-sp[data-theme="lux"] .st-sp__hero{ grid-template-columns:1fr; text-align:center; }
.st-sp[data-theme="lux"] .st-sp__art{ aspect-ratio:16/6; }
.st-sp[data-theme="lux"] .st-sp__ctas{ justify-content:center; }
.st-sp[data-theme="lux"] .st-sp__kicker{ border:0; letter-spacing:.3em; text-transform:uppercase; }
.st-sp[data-theme="lux"] .st-sp__title{ font-weight:500; letter-spacing:0; }
.st-sp[data-theme="lux"] .st-sp__nav b{ letter-spacing:.3em; }

.st-sp[data-theme="neon"] .st-sp__kicker{ font-family:var(--st-font-head); border-color:#00e5ff; color:#00e5ff; }
.st-sp[data-theme="neon"] .st-sp__kicker::before{ content:"$ "; }
.st-sp[data-theme="neon"] .st-sp__btn{ box-shadow:0 0 18px rgba(0,229,255,.45); }
.st-sp[data-theme="neon"] .st-sp__body{
  background:
    linear-gradient(rgba(0,229,255,.08) 1px, transparent 1px) 0 0/26px 26px,
    linear-gradient(90deg, rgba(0,229,255,.08) 1px, transparent 1px) 0 0/26px 26px,
    var(--st-bg-hero);
}
.st-sp[data-theme="neon"] .st-sp__cards b{ color:#00e5ff; }

.st-sp[data-theme="eco"] .st-sp__art{ border-radius:48% 52% 40% 60% / 55% 45% 55% 45%; }
.st-sp[data-theme="eco"] .st-sp__sticker{ left:50%; bottom:9%; transform:translateX(-50%); white-space:nowrap; }
.st-sp[data-theme="lux"] .st-sp__art{ aspect-ratio:16/5; }
.st-sp[data-theme="eco"] .st-sp__hero{ grid-template-columns:.95fr 1.05fr; }
.st-sp[data-theme="eco"] .st-sp__copy{ order:2; }

.st-sp[data-theme="brutal"] .st-sp__hero{ grid-template-columns:1.4fr .6fr; }
.st-sp[data-theme="brutal"] .st-sp__title{ text-transform:uppercase; font-size:clamp(26px,3.2vw,46px) !important; }
.st-sp[data-theme="brutal"] .st-sp__art,
.st-sp[data-theme="brutal"] .st-sp__cards div,
.st-sp[data-theme="brutal"] .st-sp__btn,
.st-sp[data-theme="brutal"] .st-sp__sticker{
  border:2px solid #0a0a0a;
  box-shadow:4px 4px 0 #0a0a0a;
}
.st-sp[data-theme="brutal"] .st-sp__cards div:nth-child(2){ background:#ffe600; }
.st-sp[data-theme="brutal"] .st-sp__kicker{ border:2px solid #0a0a0a; background:#ffe600; color:#0a0a0a; }

.st-sp[data-theme="play"] .st-sp__sticker{ transform:rotate(-6deg); background:#ffb627; color:#2b2140; }
.st-sp[data-theme="play"] .st-sp__cards div:nth-child(1){ transform:rotate(-2deg); }
.st-sp[data-theme="play"] .st-sp__cards div:nth-child(3){ transform:rotate(2deg); }
.st-sp[data-theme="play"] .st-sp__kicker{ background:#fff0e6; border-style:dashed; }

/* смена контента в примере */
.st-sp.is-swapping .st-sp__copy,
.st-sp.is-swapping .st-sp__cards{ opacity:0; transform:translateY(6px); }
.st-sp__copy,
.st-sp__cards{ transition:opacity .25s ease, transform .25s ease; }

/* плашка «Стиль: … · Вернуть РЕТАЧ» */
.st-style-pill{
  position:fixed;
  left:50%;
  bottom:18px;
  z-index:900;
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 8px 8px 16px;
  border:1px solid var(--st-line);
  border-radius:999px;
  background:var(--st-surface);
  color:var(--st-text);
  font-size:13px;
  white-space:nowrap;
  box-shadow:0 16px 40px rgba(0,0,0,.18);
  transform:translateX(-50%);
  animation:st-pill-in .35s ease both;
}

.st-style-pill[hidden]{ display:none; }

.st-style-pill button{
  min-height:34px;
  padding:0 14px;
  border:0;
  border-radius:999px;
  background:var(--st-grad);
  color:var(--st-on-accent);
  font:inherit;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
}

@keyframes st-pill-in{
  from{ opacity:0; transform:translate(-50%,10px); }
  to{ opacity:1; transform:translate(-50%,0); }
}

@media (max-width:980px){
  .st-styles{ grid-template-columns:minmax(0,1fr); }
  .st-styles__list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .st-styles__apply{ grid-column:1 / -1; }
}

@media (max-width:700px){
  .st-styles__list{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .st-style-btn{ grid-template-columns:34px 1fr; gap:8px; padding:8px; }
  .st-style-btn__sw{ width:34px; height:34px; border-radius:10px; }
  .st-style-btn small{ display:none; }
  .st-style-btn strong{ font-size:13px; }
  .st-sp__body{ padding:12px; }
  .st-sp__nav span{ display:none; }
  .st-sp__nav em{ margin-left:auto; }
  .st-sp__hero,
  .st-sp[data-theme] .st-sp__hero{ grid-template-columns:1fr; }
  .st-sp[data-theme="eco"] .st-sp__copy{ order:0; }
  .st-styles__info{ grid-template-columns:1fr; }
  /* на телефоне над нижним меню, в одну строку */
  .st-style-pill{
    bottom:84px;
    gap:8px;
    padding:5px 5px 5px 12px;
    font-size:12px;
    white-space:nowrap;
  }

  .st-style-pill button{ min-height:30px; padding:0 11px; font-size:12px; }
}

@media (prefers-reduced-motion:reduce){
  ::view-transition-new(root){ animation:none; }
  .st-page.st-theming,
  .st-page.st-theming *{ transition:none !important; }
}


/* ==========================================================
   ХАРАКТЕР СТИЛЕЙ: атмосфера, курсор, «моменты», кнопки
   (логика — assets/sites/sites-moods.js)
   ========================================================== */

/* слой частиц поверх страницы (не мешает кликам) */
.st-ambient{
  position:fixed;
  inset:0;
  z-index:60;
  pointer-events:none;
  opacity:0;
  transition:opacity .6s ease;
}

.st-ambient.is-on{ opacity:1; }

[data-theme="neon"] .st-ambient{ mix-blend-mode:screen; }

/* курсор-спутник */
.st-cursor{
  position:fixed;
  left:0; top:0;
  z-index:70;
  width:0; height:0;
  pointer-events:none;
  display:none;
}

.st-page[data-theme="lux"] .st-cursor,
.st-page[data-theme="neon"] .st-cursor,
.st-page[data-theme="play"] .st-cursor{ display:block; }

.st-cursor::before{
  content:"";
  position:absolute;
  left:0; top:0;
  transform:translate(-50%,-50%);
  transition:width .25s ease, height .25s ease, background .25s ease, border-color .25s ease;
}

.st-page[data-theme="lux"] .st-cursor::before{
  width:30px; height:30px;
  border:1px solid rgba(240,213,144,.7);
  border-radius:50%;
}

.st-page[data-theme="lux"] .st-cursor.is-hover::before{
  width:54px; height:54px;
  background:rgba(240,213,144,.10);
}

.st-page[data-theme="neon"] .st-cursor::before{
  width:26px; height:26px;
  border:1.5px solid #00e5ff;
  border-radius:4px;
  box-shadow:0 0 14px rgba(0,229,255,.8), inset 0 0 8px rgba(0,229,255,.4);
  transform:translate(-50%,-50%) rotate(45deg);
}

.st-page[data-theme="neon"] .st-cursor.is-hover::before{
  width:40px; height:40px;
  border-color:#ff2bd6;
  box-shadow:0 0 18px rgba(255,43,214,.85);
}

.st-page[data-theme="play"] .st-cursor::before{
  width:22px; height:22px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #ffd36b, #ff4f9a);
  opacity:.75;
}

.st-page[data-theme="play"] .st-cursor.is-hover::before{
  width:46px; height:46px;
  opacity:.45;
}

/* смена текста «голосом бренда» */
.st-voice-out{
  opacity:0 !important;
  transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease !important;
}

.st-voice-in{ animation:st-voice-in .55s cubic-bezier(.22,.78,.24,1) both; }

@keyframes st-voice-in{
  from{ opacity:0; transform:translateY(10px); filter:blur(4px); }
  to{ opacity:1; transform:none; filter:none; }
}

/* ПРЕМИУМ: золотая вспышка-луч */
.st-fx{
  position:fixed;
  inset:0;
  z-index:80;
  pointer-events:none;
}

.st-fx--gold{
  background:linear-gradient(105deg, transparent 30%, rgba(240,213,144,.0) 38%, rgba(240,213,144,.55) 50%, rgba(240,213,144,0) 62%, transparent 70%);
  background-size:300% 100%;
  animation:st-gold-sweep 1.2s ease-out both;
}

@keyframes st-gold-sweep{
  from{ background-position:120% 0; opacity:1; }
  to{ background-position:-40% 0; opacity:.2; }
}

/* НЕОН: глитч всей страницы */
.st-page.st-glitch > section{ animation:st-glitch .5s steps(2,end) both; }

@keyframes st-glitch{
  0%  { transform:translate(0,0); filter:none; }
  15% { transform:translate(-6px,2px); filter:hue-rotate(90deg) saturate(2); }
  30% { transform:translate(5px,-3px); filter:hue-rotate(-60deg) contrast(1.4); clip-path:inset(12% 0 30% 0); }
  45% { transform:translate(-3px,0); filter:none; clip-path:none; }
  60% { transform:translate(4px,3px); filter:hue-rotate(160deg); }
  100%{ transform:none; filter:none; }
}

.st-page[data-theme="neon"] .st-hero h1 .st-grad{
  text-shadow:none;
  filter:drop-shadow(0 0 18px rgba(0,229,255,.45));
}

/* БРУТАЛИЗМ: штамп и тряска */
.st-fx--stamp{
  display:grid;
  place-items:center;
  font-family:"Arial Black",Impact,sans-serif;
  font-size:clamp(46px,9vw,140px);
  font-weight:900;
  letter-spacing:-.02em;
  color:#0a0a0a;
  -webkit-text-stroke:0;
  animation:st-stamp 1.15s cubic-bezier(.2,1.6,.4,1) both;
}

.st-fx--stamp::before{
  content:"";
  position:absolute;
  inset:auto;
  width:min(90vw,980px);
  height:clamp(80px,13vw,190px);
  background:#ffe600;
  border:4px solid #0a0a0a;
  box-shadow:10px 10px 0 #0a0a0a;
  transform:rotate(-6deg);
  z-index:-1;
}

@keyframes st-stamp{
  0%  { opacity:0; transform:scale(2.4) rotate(-6deg); }
  25% { opacity:1; transform:scale(1) rotate(-6deg); }
  75% { opacity:1; transform:scale(1) rotate(-6deg); }
  100%{ opacity:0; transform:scale(.96) rotate(-6deg); }
}

.st-page.st-shake > section{ animation:st-shake .38s linear both; }

@keyframes st-shake{
  0%,100%{ transform:none; }
  20%{ transform:translate(-7px,4px); }
  40%{ transform:translate(6px,-5px); }
  60%{ transform:translate(-4px,-3px); }
  80%{ transform:translate(3px,4px); }
}

/* лента «НЕ ШАБЛОН» — только у брутализма */
.st-tape{
  display:none;
  position:relative;
  margin:18px -40px 0;
  padding:10px 0;
  overflow:hidden;
  background:#ffe600;
  border-top:3px solid #0a0a0a;
  border-bottom:3px solid #0a0a0a;
  transform:rotate(-1.6deg);
}

.st-page[data-theme="brutal"] .st-tape{ display:block; }
.st-page[data-theme="brutal"] .st-marquee{ display:none; }

.st-tape__track{
  display:flex;
  width:max-content;
  animation:st-marquee 16s linear infinite;
}

.st-tape span{
  padding-right:24px;
  font-family:"Arial Black",Impact,sans-serif;
  font-size:22px;
  font-weight:900;
  color:#0a0a0a;
  white-space:nowrap;
}

/* кнопки с характером */
.st-page[data-theme="lux"] .st-btn{
  overflow:hidden;
  letter-spacing:.04em;
  transition:letter-spacing .4s ease, transform .4s ease, box-shadow .4s ease;
}

.st-page[data-theme="lux"] .st-btn:hover{ letter-spacing:.09em; transform:none; }

.st-page[data-theme="lux"] .st-btn--primary::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform:translateX(-120%);
  transition:transform .8s ease;
}

.st-page[data-theme="lux"] .st-btn--primary:hover::after{ transform:translateX(120%); }

.st-page[data-theme="neon"] .st-btn:hover{
  animation:st-btn-glitch .35s steps(2) 1;
  text-shadow:-2px 0 #ff2bd6, 2px 0 #00e5ff;
}

@keyframes st-btn-glitch{
  0%{ transform:translate(0); }
  33%{ transform:translate(-2px,1px); }
  66%{ transform:translate(2px,-1px); }
  100%{ transform:translate(0); }
}

.st-page[data-theme="eco"] .st-btn{ transition:transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; }
.st-page[data-theme="eco"] .st-btn:hover{ transform:scale(1.04); }

.st-page[data-theme="play"] .st-btn:hover{ animation:st-wobble .6s ease both; }

@keyframes st-wobble{
  0%{ transform:scale(1); }
  30%{ transform:scale(1.08,.92) rotate(-2deg); }
  50%{ transform:scale(.95,1.05) rotate(2deg); }
  70%{ transform:scale(1.03,.97); }
  100%{ transform:scale(1); }
}

/* паспорт стиля */
.st-styles__info{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.st-styles__info small em{ font-style:normal; font-weight:500; letter-spacing:0; text-transform:none; }

.st-palette{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:6px;
}

.st-palette button{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px 4px 4px;
  border:1px solid var(--st-line);
  border-radius:9px;
  background:var(--st-surface);
  color:var(--st-ink2);
  font:600 11px/1 "JetBrains Mono",Consolas,monospace;
  cursor:pointer;
  transition:transform .15s ease;
}

.st-palette button:hover{ transform:translateY(-1px); }

.st-palette i{
  width:18px; height:18px;
  border-radius:6px;
  background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}

.st-palette button.is-copied{ border-color:var(--st-purple); color:var(--st-accent-ink); }

.st-styles__hint{
  margin:10px 2px 0;
  color:var(--st-muted);
  font-size:13px;
}

.st-styles__hint::before{ content:"↓ "; color:var(--st-purple); font-weight:800; }

@media (max-width:700px){
  .st-styles__info{ grid-template-columns:1fr; }
  .st-tape span{ font-size:16px; }
}

@media (prefers-reduced-motion:reduce){
  .st-ambient,.st-cursor,.st-fx{ display:none !important; }
  .st-tape__track{ animation:none; }
}