/* Сайт продукта (spec сайта §4): свой язык, не копия системы.
   Шрифт — Manrope, основа слова tukelo; палитра — холодный серый и красный
   хохолка дятла. Здесь — шрифты, токены, основа, шапка, подвал и кнопки;
   разделы — sections.css, вещи продукта — artifacts.css. */

/* ── шрифт ─────────────────────────────────────────────────────── */
@font-face{
  font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/site/fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/site/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/site/fonts/manrope-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── токены: светлая тема ──────────────────────────────────────────
   Белая страница, красное поле хохолка на первом экране и в записи,
   серый лоток под белыми плашками. Пастель плашек (берёза, вода, хохолок,
   камень) снята 30.09: вместе читалась грязью; хвоя осталась у меток гостя. */
:root{
  --bg:#FFFFFF;
  --bg-2:#F4F4F1;
  --card:#FFFFFF;
  --fill:#F4F4F1;
  --ink:#17181A;
  --ink-2:#45474A;
  --ink-3:#64676A;
  --ink-hover:#2C2E31;
  --line:rgb(23 24 26 / .11);
  --line-2:rgb(23 24 26 / .06);
  --accent:#BE5434;
  --crest:#BE5434;
  --crest-2:#A9472C;
  --on-crest:#FFFFFF;
  /* Поле хохолка с глубиной: свет сверху по центру, к низу гуще, тонкое
     зерно — чтобы большая заливка не лежала плоской плёнкой. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  --crest-field:var(--grain),radial-gradient(60% 45% at 50% 0%,rgb(255 255 255 / .08),transparent 70%),linear-gradient(180deg,var(--crest) 0%,var(--crest) 40%,color-mix(in srgb,var(--crest),#000 12%) 100%);
  --ok:#2F6B4F;
  --wait:#8A5A12;
  --on-ink:#FFFFFF;
  --shadow:rgb(23 24 26 / .14);
  --t-pine:#E5EEE7;
  /* Цветные поля разделов: ясные, не серые. Роза от хохолка, хвоя, небо,
     песок и ночь для одного тёмного блока. */
  --rose:#F8E1D7;
  --pine:#D8EEDF;
  --sky:#D9E7F7;
  --sand:#F4E7CF;
  --night:#212428;
  --on-night:#F1F2F3;
  /* Глубина цветных полей: свет из левого верхнего угла и блик по кромке. */
  --field-light:linear-gradient(135deg,rgb(255 255 255 / .55),rgb(255 255 255 / 0) 45%,rgb(23 24 26 / .04) 100%);
  --field-edge:inset 0 1px 0 rgb(255 255 255 / .7),inset 0 0 0 1px rgb(255 255 255 / .25);

  --r-ctl:14px;
  --r-thing:20px;
  --r-panel:32px;
  --r-photo:28px;

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --t-press:120ms;
  --t-ui:200ms;

  --f-display:clamp(42px,5.2vw,80px);
  --f-section:clamp(36px,4.3vw,62px);
  --f-panel:clamp(28px,2.9vw,40px);
  --f-lead:clamp(18px,1.5vw,22px);
  --f-body:17px;
  --f-small:14px;

  --head-h:64px;
  --gutter:clamp(20px,4vw,56px);
  --section-y:clamp(88px,10vw,150px);
  color-scheme:light;
}

/* ── токены: тёмная тема ─────────────────────────────────────────────
   Не темнее экрана входа заведения: слишком тёмную заявку владелец уже
   забраковал. Поле хохолка остаётся красным. */
[data-theme="dark"]{
  /* Тёмная тема по apple-design (материалы и глубина): чем выше слой, тем
     он светлее — страница, вторая поверхность, карточка, заливка внутри
     карточки идут ступенями, как системные фоны iOS. Цвета в тёмной теме
     ярче, а не глуше. Страница не темнее #1D1E20: слишком тёмную заявку
     владелец уже забраковал. */
  --bg:#1D1E20;
  --bg-2:#2A2C31;
  --card:#34373C;
  --fill:#41444B;
  --ink:#F1F2F3;
  --ink-2:#C6CACE;
  --ink-3:#AEB3B8;
  --ink-hover:#FFFFFF;
  --line:rgb(241 242 243 / .14);
  --line-2:rgb(241 242 243 / .08);
  --accent:#E8805F;
  --crest:#B9512F;
  --crest-2:#A4462A;
  --ok:#8FD3AE;
  --wait:#EDBE6A;
  --on-ink:#17181A;
  --shadow:rgb(0 0 0 / .45);
  --t-pine:rgb(143 211 174 / .16);
  /* Поля возможностей: насыщеннее и светлее прежних, чтобы цвет читался. */
  --rose:#4B3029;
  --pine:#24412F;
  --sky:#243A55;
  --sand:#47391F;
  --night:#2C2F35;
  --on-night:#F1F2F3;
  --field-light:linear-gradient(135deg,rgb(255 255 255 / .1),rgb(255 255 255 / 0) 45%,rgb(0 0 0 / .12) 100%);
  --field-edge:inset 0 1px 0 rgb(255 255 255 / .12),inset 0 0 0 1px rgb(255 255 255 / .06);
  color-scheme:dark;
}

/* ── основа ────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{
  background:var(--bg);
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--head-h) + 16px);
  text-wrap:pretty;
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;
  font:450 var(--f-body)/1.6 'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  transition:background-color var(--t-ui) ease,color var(--t-ui) ease;
}
h1,h2,h3,h4{margin:0;font-weight:650;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
img,video,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
::selection{background:color-mix(in srgb,var(--accent) 26%,transparent)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
/* Скрытое остаётся скрытым, чьё бы display ни стояло (меню ниш прячется своим способом). */
[hidden]:not(.st-menu):not(.st-sheet){display:none!important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{width:min(100%,1320px);margin-inline:auto;padding-inline:var(--gutter)}

.ic{width:18px;height:18px;flex:none}

/* ── шкала набора (spec сайта §4.1) ───────────────────────────────
   Разрядка зависит от кегля: крупное сжимается, мелкое дышит (apple §15). */
.h-display{font-size:var(--f-display);line-height:1.02;font-weight:700;letter-spacing:-.04em}
.h-section{font-size:var(--f-section);line-height:1.06;font-weight:700;letter-spacing:-.032em}
.h-panel{font-size:var(--f-panel);line-height:1.1;font-weight:700;letter-spacing:-.03em}
.lead{font-size:var(--f-lead);line-height:1.5;font-weight:450;letter-spacing:-.005em;color:var(--ink-2)}
.small{font-size:var(--f-small);line-height:1.45;font-weight:500;letter-spacing:.005em;color:var(--ink-3)}
.dot{color:var(--accent)}

/* ── кнопки ────────────────────────────────────────────────────────
   Отклик — на нажатии, сразу (apple §1, emil): сжатие 0.97 за 120 мс.
   Наведение — только там, где есть мышь. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:48px;padding:0 22px;border-radius:var(--r-ctl);border:1px solid transparent;
  font-size:15.5px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;
  cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:transform var(--t-press) var(--ease-out),background-color var(--t-ui) ease,color var(--t-ui) ease,border-color var(--t-ui) ease;
}
.btn:active{transform:scale(.97)}
.btn-lg{height:54px;padding:0 26px;font-size:16.5px}
.btn-ink{background:var(--ink);color:var(--on-ink)}
.btn-quiet{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-paper{background:#FFFFFF;color:#17181A}
.btn-glass{background:rgb(255 255 255 / .14);color:#FFFFFF;border-color:rgb(255 255 255 / .4)}
.btn-line{background:transparent;color:#FFFFFF;border:1.5px solid rgb(255 255 255 / .62)}
@media (hover:hover) and (pointer:fine){
  .btn-ink:hover{background:var(--ink-hover)}
  .btn-quiet:hover{border-color:color-mix(in srgb,var(--ink) 30%,transparent)}
  .btn-paper:hover{background:#F4F4F1}
  .btn-glass:hover{background:rgb(255 255 255 / .22)}
  .btn-line:hover{background:rgb(255 255 255 / .12);border-color:#FFFFFF}
}

/* ── кнопка записи ────────────────────────────────────────────────
   Владелец 18.10: кнопки «выглядят обычно»; плитку со стрелкой внутри —
   «нет», «Войти» со знаком — «нормально получилось». Запись — в паре со
   «Войти»: знак билета слева и подпись (запись на тестирование — пропуск).
   Объём — светлая кромка и тень цвета фона (apple §12). Наведение мышью:
   кнопка приподнимается на пиксель, билет наклоняется и привстаёт, будто
   его берут; нажатие — 0.97 (emil). Форма отправляется — билет
   покачивается, подпись «Записываем…». */
.btn:has(.btn-ic){gap:10px;padding-left:20px}
.btn-lg:has(.btn-ic){gap:11px;padding-left:24px}
.btn-ic{flex:none;width:19px;height:19px;transition:transform 300ms var(--ease-out)}
.btn-lg .btn-ic{width:20px;height:20px}
.btn-paper .btn-ic{color:var(--crest)}
.btn-ink:has(.btn-ic){box-shadow:inset 0 1px 0 rgb(255 255 255 / .14),0 1px 2px rgb(23 24 26 / .2),0 12px 24px -14px rgb(23 24 26 / .55)}
.btn-paper:has(.btn-ic){box-shadow:inset 0 -1px 0 rgb(23 24 26 / .07),0 1px 2px rgb(70 18 6 / .2),0 16px 30px -16px rgb(70 18 6 / .55)}
[data-theme="dark"] .btn-ink:has(.btn-ic){box-shadow:inset 0 1px 0 rgb(255 255 255 / .5),0 1px 2px rgb(0 0 0 / .35),0 12px 24px -14px rgb(0 0 0 / .7)}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .btn:has(.btn-ic):hover{transform:translateY(-1px)}
  .btn:has(.btn-ic):active{transform:scale(.97)}
  .btn:hover .btn-ic{transform:translateY(-1px) rotate(-12deg)}
}
@keyframes btn-wait{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
@media (prefers-reduced-motion:no-preference){.btn[aria-busy="true"] .btn-ic{animation:btn-wait 900ms var(--ease-in-out) infinite}}

/* Ссылка со стрелкой: стрелка уходит вперёд на наведении, текст стоит. */
.more{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink)}
.more .ic-arrow{width:16px;height:16px;transition:transform var(--t-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.more:hover .ic-arrow{transform:translateX(3px)}}

/* ── к содержанию ─────────────────────────────────────────────── */
.st-skip{position:fixed;left:16px;top:-60px;z-index:60;padding:10px 14px;border-radius:10px;background:var(--ink);color:var(--on-ink);font-weight:600}
.st-skip:focus{top:12px}

/* ── шапка ──────────────────────────────────────────────────────────
   Плавающая шапка (spec сайта §5) на сплошной плашке с самого начала
   (без плашки над полем владелец счёл хуже, 1.10). Переделана 2.10
   («не вяжется со всем дизайном, слишком простенько»):
   - плашка из того же материала, что плитки «Что умеет» и панели
     вопросов: тёплая бумага, свет слева сверху (тот же источник света,
     что на плитках), светлая кромка сверху, волосяная обводка;
   - по ширине — ровно колонка содержимого: края шапки на одной линии с
     краями плиток и с заголовком первого экрана (было шире страницы на
     68 px с каждой стороны); уже 1080 px — прежние 12 px от края окна;
   - капсула: скругление — половина высоты, и кнопка справа вписана в
     него концентрично (32 = 22 + 10), как в iOS;
   - разделы — в утопленном жёлобе, текущий — выпуклая белая таблетка,
     под указателем по жёлобу скользит подсветка (nav.mjs).
   Слово слева, по центру «Для кого» и разделы главной, справа «Войти» и
   запись. Компактную капсулу по центру владелец счёл хуже (1.10): шапка
   остаётся во всю колонку. Непрозрачная: стекло над красным розовело. */
.st-head{
  --nav-ink:var(--ink);--nav-ink-2:var(--ink-2);--nav-hover:var(--line-2);
  --plate:var(--bg-2);--plate-light:rgb(255 255 255 / .95);--plate-edge:rgb(255 255 255 / .95);--plate-line:rgb(23 24 26 / .045);
  --nav-track:rgb(23 24 26 / .045);--nav-groove:inset 0 1px 2px rgb(23 24 26 / .07),inset 0 0 0 .5px rgb(23 24 26 / .04),0 1px 0 rgb(255 255 255 / .9);
  --nav-thumb:#FFFFFF;--nav-thumb-shadow:inset 0 1px 0 #FFFFFF,0 0 0 .5px rgb(23 24 26 / .06),0 2px 4px rgb(23 24 26 / .08),0 6px 14px -6px rgb(23 24 26 / .22);
  --nav-ghost:rgb(23 24 26 / .05);
  position:sticky;top:12px;z-index:50;
  margin:12px auto 0;width:min(calc(100% - 24px),max(calc(min(100%,1320px) - 2 * var(--gutter)),1000px));border-radius:calc(var(--head-h) / 2);
}
.st-head::before{
  content:'';position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(90% 160% at 0% 0%,var(--plate-light),transparent 62%),var(--plate);
  box-shadow:inset 0 1px 0 var(--plate-edge),inset 0 0 0 1px var(--plate-line),0 14px 34px -18px var(--shadow),0 2px 6px -3px var(--shadow);
}
/* Тёмная тема: плашка — вторая поверхность, как плитки; жёлоб темнее,
   таблетка светлее (ступени apple-design). */
[data-theme="dark"] .st-head{
  --plate-light:rgb(255 255 255 / .06);--plate-edge:rgb(255 255 255 / .08);--plate-line:rgb(255 255 255 / .06);
  --nav-track:rgb(0 0 0 / .2);--nav-groove:inset 0 1px 2px rgb(0 0 0 / .3),0 1px 0 rgb(255 255 255 / .05);
  --nav-thumb:#5E6168;--nav-thumb-shadow:inset 0 1px 0 rgb(255 255 255 / .14),0 2px 4px rgb(0 0 0 / .25),0 6px 14px -6px rgb(0 0 0 / .5);
  --nav-ghost:rgb(255 255 255 / .06);
}
/* Под шапку уехало содержимое — тень становится глубже: шапка
   приподнялась над страницей (apple-design §12, край прокрутки). Тень —
   отдельный слой, проявляется прозрачностью. */
.st-head::after{content:'';position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 22px 44px -22px var(--shadow),0 6px 14px -8px var(--shadow);opacity:0;transition:opacity 260ms ease}
.st-head.is-over::after{opacity:1}
/* Край прокрутки над шапкой (аудит телефона 3.10): в 12 px над плашкой
   виднелись обрезки строк. Полоса во всю ширину окна от верха до середины
   шапки закрывает их цветом того, что под ней, и гаснет книзу: над красным
   полем первого экрана — красным, ниже — цветом страницы. Без размытия:
   размытие фона под липкой шапкой пересчитывалось на каждом кадре
   прокрутки («сайт сильно лагает», 3.10) — только заливка и прозрачность. */
.st-edge{position:absolute;z-index:-1;left:50%;top:-12px;width:100vw;height:calc(12px + var(--head-h) / 2);translate:-50% 0;pointer-events:none;
  background:linear-gradient(var(--crest) 30%,color-mix(in srgb,var(--crest) 0%,transparent));opacity:0;transition:opacity 220ms ease}
.st-head.is-over .st-edge{opacity:1}
.st-head.is-past-field .st-edge{background:linear-gradient(var(--bg) 30%,color-mix(in srgb,var(--bg) 0%,transparent))}
/* Новый год (site/season.mjs; владелец 10.10): у пунктов меню —
   новогодние двойники предметов (в снегу, с веткой, бантом и гирляндой), а
   под плашкой провисает белт-лайт: витой провод из-под края плашки, в
   каждом провисе лампа Эдисона; при загрузке лампы загораются по очереди,
   отсвет за стеклом тихо дышит. Двойники и лампы грузятся только в сезон. */
.st-obj.is-ny,.st-sheet-link-obj.is-ny,.st-garland{display:none}
[data-season="newyear"] :is(.st-obj,.st-sheet-link-obj):not(.is-ny){display:none}
[data-season="newyear"] :is(.st-obj,.st-sheet-link-obj).is-ny{display:inline-block}
/* Гирлянда — за плашкой (z-index ниже её подложки): провод выходит из-под
   нижнего края, точки подвеса (стыки кусков) спрятаны под плашкой на 5 px.
   Куски одной ширины в ряд; высота — по картинке провода (480 × 137). */
[data-season="newyear"] .st-garland{display:flex;position:absolute;left:calc(var(--head-h) / 2 + 6px);right:calc(var(--head-h) / 2 + 6px);top:calc(100% - 5px);z-index:-1;pointer-events:none}
.st-loft{position:relative;flex:1 1 0;min-width:0}
/* Провод отбрасывает лёгкую тень на поле, как плашка над ним (свет слева
   сверху, как в рисунке). */
.st-loft-cord{display:block;width:100%;height:auto;filter:drop-shadow(1px 3px 2px rgb(70 18 6 / .22))}
/* Лампа с патроном — на своём месте в куске (вырезана из 2048 × 585: слева
   864, сверху 137, 320 × 420); ось качания — зажим на проводе. */
.st-lamp{position:absolute;left:42.1875%;top:23.42%;width:15.625%;transform-origin:50% 10.95%}
.st-swing{position:relative;display:block;transform-origin:50% 10.95%;isolation:isolate}
.st-lamp-img{position:relative;z-index:1;display:block;width:100%;height:auto}
/* Свет нити: яркое ядро размером со стекло (стекло прозрачное — светится
   изнутри) и тёплый ореол вокруг. Без размытия, только градиенты. */
.st-glow{position:absolute;z-index:0;left:50%;top:70.2%;width:280%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;opacity:.95;
  background:radial-gradient(closest-side,rgb(255 246 214 / .9),rgb(255 230 168 / .5) 24%,rgb(255 226 160 / 0) 40%),
    radial-gradient(closest-side,rgb(255 204 112 / .62),rgb(255 180 80 / .26) 50%,rgb(255 172 72 / 0))}
[data-theme="dark"] .st-glow{opacity:.85}
/* Выключенная лампа: тень по форме лампы, уходит, когда она загорается. */
[data-season="newyear"] .st-swing::after{content:'';position:absolute;inset:0;z-index:2;background:rgb(34 22 16 / .6);
  -webkit-mask:url(/site/objects/ny-loft-lamp-96.webp) center/100% 100% no-repeat;mask:url(/site/objects/ny-loft-lamp-96.webp) center/100% 100% no-repeat;opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  /* Гирлянду опускают из-под плашки (при загрузке и когда вернулись
     наверх): провод чуть проседает и выбирает слабину. Повисла — лампы
     качнулись и успокоились, потом щёлкнули выключателем: загораются по
     очереди слева направо, нить разгорается за четверть секунды. Дальше
     лампы еле заметно покачиваются, отсвет дышит — у каждой свой ход;
     нить не мерцает. Всё бесконечное — только пока гирлянда видна. */
  @keyframes st-lower{from{transform:translateY(-100%);opacity:0}30%{opacity:1}to{transform:none;opacity:1}}
  @keyframes st-settle{0%,100%{transform:none}22%{transform:rotate(calc(var(--dir) * 5deg))}46%{transform:rotate(calc(var(--dir) * -3deg))}68%{transform:rotate(calc(var(--dir) * 1.4deg))}86%{transform:rotate(calc(var(--dir) * -.5deg))}}
  @keyframes st-sway{from{rotate:-1.4deg}to{rotate:1.4deg}}
  @keyframes st-off{from{opacity:1}to{opacity:0}}
  @keyframes st-dark{from{opacity:0}to{opacity:0}}
  @keyframes st-breathe{0%,100%{opacity:.95}50%{opacity:.6}}
  [data-season="newyear"] .st-head:not(.is-past-hero) .st-garland{animation:st-lower 720ms cubic-bezier(.34,1.32,.64,1) 200ms backwards}
  [data-season="newyear"] .st-loft{--dir:1;--sway:3.6s}
  [data-season="newyear"] .st-loft:nth-child(even){--dir:-1}
  [data-season="newyear"] .st-loft:nth-child(3n+2){--sway:4.3s}
  [data-season="newyear"] .st-loft:nth-child(3n){--sway:3.1s}
  [data-season="newyear"] .st-head:not(.is-past-hero) .st-lamp{animation:st-sway var(--sway) ease-in-out calc(var(--k) * -1.1s) infinite alternate,st-settle 1.6s ease-in-out calc(640ms + var(--k) * 40ms) backwards}
  [data-season="newyear"] .st-head:not(.is-past-hero) .st-swing::after{animation:st-off 260ms ease-out calc(1100ms + var(--k) * 140ms) backwards}
  [data-season="newyear"] .st-head:not(.is-past-hero) .st-glow{animation:st-breathe 5.2s ease-in-out calc(var(--k) * -1.3s) infinite,st-dark 1ms linear calc(1160ms + var(--k) * 140ms) backwards}
  [data-season="newyear"] .st-head:not(.is-past-hero) .st-loft:nth-child(3n+2) .st-glow{animation-duration:6.1s,1ms}
  [data-season="newyear"] .st-head:not(.is-past-hero) .st-loft:nth-child(3n) .st-glow{animation-duration:4.6s,1ms}
}
/* Задели лампу мышью — качнулась на проводе сильнее и успокоилась. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  @keyframes st-nudge{0%,100%{transform:none}20%{transform:rotate(9deg)}44%{transform:rotate(-6deg)}66%{transform:rotate(3deg)}85%{transform:rotate(-1.2deg)}}
  [data-season="newyear"] .st-head:not(.is-past-hero) .st-lamp{pointer-events:auto}
  [data-season="newyear"] .st-head:not(.is-past-hero) .st-lamp:hover .st-swing{animation:st-nudge 1.4s ease-in-out}
}
/* Первый экран ушёл из-под ламп («Кому подойдёт» у шапки) — гирлянду
   подтягивают под плашку: подъём с разгоном и торможением, лампы гаснут
   к концу подъёма; вернулись наверх — её опускают заново (st-lower выше).
   При «уменьшить движение» — только гаснет и проступает. */
[data-season="newyear"] .st-garland{transition:opacity 200ms ease}
[data-season="newyear"] .st-head.is-past-hero .st-garland{transform:translateY(-100%);opacity:0;
  transition:transform 460ms cubic-bezier(.77,0,.175,1),opacity 240ms ease 200ms}
@media (prefers-reduced-motion:reduce){
  [data-season="newyear"] .st-head.is-past-hero .st-garland{transform:none;transition:opacity 200ms ease}
}
/* Ламп меньше на узких экранах: куски шире, лампы не мельчают. */
@media (max-width:1179px){[data-season="newyear"] .st-loft:nth-child(n+6){display:none}}
@media (max-width:899px){[data-season="newyear"] .st-loft:nth-child(n+5){display:none}}
@media (max-width:767px){[data-season="newyear"] .st-loft:nth-child(n+4){display:none}}
/* Телефон: провод натянут во всю ширину окна, мимо краёв плашки (она
   уже окна на 12 px с каждой стороны), иначе три лампы мельчают. */
@media (max-width:767px){[data-season="newyear"] .st-garland{left:-12px;right:-12px}}
.st-head-in{position:relative;z-index:1;height:var(--head-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding-inline:24px 10px;width:auto}
/* Знак бренда: голова дятла и слово — те же два кропа фирменного рисунка,
   что в меню продукта, построенные по контурам краски, а не по краям
   картинок (замер: птица 17–205 × 54–270 из 220 × 290, слово 13–394 ×
   40–147 из 425 × 190). Птица в полтора раза выше букв — знак, а не
   буква; середина птицы на середине слова; между клювом и «t» четверть
   высоты букв. Цельный рисунок (птица вдвое выше букв) и птица в рост букв
   владельцу показались непропорциональными (2.10). Рисунок и цвета знака
   не меняются никогда. */
/* Размер — один множитель --k от построения при слове 112 px (при 1
   знак владельцу показался слишком большим, 2.10): пропорции не плывут. */
.st-brand{--k:.82;justify-self:start;display:flex;align-items:center;margin-left:calc(-7px * var(--k));border-radius:10px;line-height:0}
.st-brand img{display:block;max-width:none}
.st-brand-word{width:calc(112px * var(--k));height:auto}
.st-brand-mark{width:auto;height:calc(57px * var(--k));position:relative;top:calc(-3.7px * var(--k));margin:calc(-6px * var(--k)) calc(1px * var(--k)) calc(-6px * var(--k)) 0}
[data-theme="dark"] .st-brand-mark{filter:drop-shadow(1px 0 0 rgb(235 234 230 / .95)) drop-shadow(-1px 0 0 rgb(235 234 230 / .95)) drop-shadow(0 1px 0 rgb(235 234 230 / .95)) drop-shadow(0 -1px 0 rgb(235 234 230 / .95))}
[data-theme="dark"] .st-brand-word{filter:brightness(0) invert(1);opacity:.94}
/* Наведение на знак — дятел дважды стучит клювом (рисунок и цвета не
   меняются, только наклон головы от шеи). Редкое действие — можно
   порадовать (emil). */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  @keyframes st-peck{0%,100%{transform:none}16%{transform:rotate(13deg)}30%{transform:rotate(-1deg)}46%{transform:rotate(11deg)}62%{transform:none}}
  .st-brand-mark{transform-origin:42% 82%}
  .st-brand:hover .st-brand-mark{animation:st-peck 620ms var(--ease-out)}
}
/* Слово подвала нарисовано чернилами: на тёмной бумаге выворачивается. */
[data-theme="dark"] .st-foot-brand img{filter:brightness(0) invert(1);opacity:.94}

/* Разделы — сегментный переключатель в утопленном жёлобе: по нему
   ездит выпуклая белая таблетка — текущий раздел, как переключатели
   демо и дней на сайте. */
.st-nav{position:relative;display:flex;align-items:center;gap:0;padding:4px;border-radius:999px;background:var(--nav-track);box-shadow:var(--nav-groove)}
.st-link{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 15px;border-radius:999px;border:0;background:none;
  font-size:15px;font-weight:550;letter-spacing:-.005em;color:var(--nav-ink-2);cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;
}
/* Плавность только у наведения: смена текущего раздела при прокрутке
   красит пункт сразу (метка и так переезжает плавно), иначе шапка
   перерисовывается по кадру посреди прокрутки (замер: −20 потерянных). */
@media (hover:hover) and (pointer:fine){.st-link:hover{color:var(--nav-ink);background:var(--nav-hover);transition:color 160ms ease,background-color 160ms ease}}
.st-link.is-here,.st-link[aria-expanded="true"]{color:var(--nav-ink)}
.st-link[aria-expanded="true"]{background:var(--nav-thumb);box-shadow:var(--nav-thumb-shadow)}
/* В дорожке наведение только темнит слово: подложка под пунктом спорила
   бы с таблеткой. */
@media (hover:hover) and (pointer:fine){.st-nav .st-link:hover{background:none}}
/* Подсветка под указателем: одна на жёлоб, скользит от пункта к пункту
   (nav.mjs ставит сдвиг и ширину), под таблеткой текущего раздела. */
.st-hover{position:absolute;left:0;top:50%;height:36px;width:0;margin-top:-18px;border-radius:999px;background:var(--nav-ghost);opacity:0;pointer-events:none;
  transition:transform 260ms var(--ease-out),width 260ms var(--ease-out),opacity 160ms ease}
.st-hover.is-on{opacity:1}
.st-nav .st-link{transition:scale var(--t-press) var(--ease-out)}
.st-nav .st-link:active{scale:.96}
/* Предмет пункта — той же серии, что на плитках «Что умеет». Выше строки
   на пару пикселей с каждой стороны: стоит на линии текста, как значок,
   но читается вещью. Текущий раздел — предмет чуть приподнят. Под мышью
   предмет коротко повторяет своё движение из плитки: указатель качается,
   будильник и телефон звякают, ключ качается на кольце. */
.st-nav .st-link{gap:6px}
.st-menu-btn{padding-left:9px}
.st-nav a.st-link{padding-left:9px}
.st-obj{width:26px;height:26px;flex:none;margin:-6px 0;object-fit:contain;filter:drop-shadow(0 2px 2px rgb(23 24 26 / .18));
  transition:translate 260ms var(--ease-out),scale 260ms var(--ease-out)}
[data-theme="dark"] .st-obj{filter:drop-shadow(0 2px 2px rgb(0 0 0 / .45))}
.st-link.is-here .st-obj,.st-link[aria-expanded="true"] .st-obj{translate:0 -1px;scale:1.08}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  @keyframes st-obj-ring{0%,100%{rotate:0deg}15%{rotate:-11deg}30%{rotate:9deg}45%{rotate:-7deg}60%{rotate:4deg}75%{rotate:-2deg}}
  @keyframes st-obj-sway{0%,100%{rotate:0deg}30%{rotate:-9deg}65%{rotate:5deg}}
  .st-link:hover .st-obj{animation:st-obj-ring 520ms var(--ease-in-out)}
  .st-menu-btn .st-obj{transform-origin:50% 95%}
  .st-menu-btn:hover .st-obj{animation-name:st-obj-sway;animation-duration:620ms}
  .st-link[href$="steps"] .st-obj{transform-origin:30% 15%}
  .st-link[href$="steps"]:hover .st-obj{animation-name:st-obj-sway;animation-duration:720ms}
}
.st-link:focus-visible,.st-brand:focus-visible,.st-burger:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.st-brand:focus-visible{color:var(--nav-ink)}
.st-link .ic-chevron{width:15px;height:15px;margin-right:-3px;transition:transform 260ms var(--ease-out)}
.st-link[aria-expanded="true"] .ic-chevron{transform:rotate(180deg)}
/* Таблетка текущего раздела: одна на всё меню, переезжает от пункта к
   пункту (сдвиг и ширину ставит nav.mjs), появляется и гаснет
   прозрачностью. */
.st-mark{position:absolute;left:0;top:50%;height:36px;width:0;margin-top:-18px;border-radius:999px;background:var(--nav-thumb);box-shadow:var(--nav-thumb-shadow);opacity:0;pointer-events:none;
  transition:transform 380ms var(--ease-in-out),width 380ms var(--ease-in-out),opacity 200ms ease}
.st-mark.is-on{opacity:1}
/* Панель открыта — метка гаснет: два подсвеченных пункта рядом спорят. */
.st-nav:has(.st-menu-btn[aria-expanded="true"]) .st-mark{opacity:0}
.st-niches{position:relative;display:flex}

.st-side{position:relative;justify-self:end;display:flex;align-items:center;gap:6px}
/* Справа «Войти» и запись. Акцент — одна чёрная плашка (.st-accent),
   общая на обе кнопки: на первом экране она под «Войти» (.cta-off), у
   первого экрана своя кнопка записи, и владелец хочет акцент на входе.
   Ушла кнопка первого экрана — въезжает запись, а плашка перетекает из-под
   «Войти» под неё, растягиваясь по ширине, как таблетка разделов; «Войти»
   отходит влево и тихнет (nav.mjs). Форма — капсула высотой с дорожку
   разделов (44 px): центр и правая часть шапки на одной линии и одной
   формы (прямоугольник со скруглением 12 владелец счёл угловатым, 2.10).
   Объём — светлый край сверху и мягкая тень, без бликов. Пока сценарий не
   встал (.js-accent нет), заливка у самих кнопок. */
.st-head{--side-h:44px}
.st-cta,.st-head .st-login{position:relative;z-index:1;height:var(--side-h);padding:0 20px;font-size:15px;font-weight:600;letter-spacing:-.01em;border-radius:999px;background:none;
  transition:color 320ms ease,scale 120ms var(--ease-out)}
.st-cta{padding:0 22px;color:var(--on-ink)}
/* Запись в шапке — капсула: знак билета и подпись, как «Войти» рядом;
   кнопка стоит на месте (под ней ездит общая плашка). «Войти» — со знаком
   входа; на наведении стрелка знака заходит внутрь. */
.st-cta:has(.btn-ic){gap:8px;padding:0 20px 0 16px}
.st-cta .btn-ic{width:17px;height:17px}
.st-head .st-login{display:inline-flex;align-items:center;gap:8px;padding-left:16px}
.st-login-ic{flex:none;width:17px;height:17px;transition:transform 260ms var(--ease-out)}
.st-sheet-login{gap:8px}
.st-head .st-login{color:var(--ink-2)}
.st-head.cta-off .st-login{color:var(--on-ink)}
.st-head.cta-off .st-cta{display:none}
.st-head:not(.js-accent) .st-cta,.st-head:not(.js-accent).cta-off .st-login{background:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .st-head:not(.cta-off) .st-login:hover{color:var(--ink);background:var(--nav-hover)}
  .st-login:hover .st-login-ic{transform:translateX(2px)}
  .st-cta:has(.btn-ic):hover{transform:none}
  .st-head.cta-off .st-login:hover,.st-cta:hover{background:none}
  .st-head:not(.js-accent) .st-cta:hover,.st-head:not(.js-accent).cta-off .st-login:hover{background:var(--ink-hover)}
}
.st-accent{position:absolute;left:0;top:50%;z-index:0;width:0;height:var(--side-h);margin-top:calc(var(--side-h) / -2);border-radius:999px;pointer-events:none;
  background:var(--ink);box-shadow:inset 0 1px 0 rgb(255 255 255 / .16),0 1px 2px rgb(23 24 26 / .22),0 8px 18px -8px rgb(23 24 26 / .5);
  opacity:0;transition:transform 560ms var(--ease-in-out),width 560ms var(--ease-in-out),background-color 160ms ease,opacity 200ms ease,scale 120ms var(--ease-out)}
[data-theme="dark"] .st-accent{box-shadow:inset 0 -1px 0 rgb(23 24 26 / .12),0 1px 2px rgb(0 0 0 / .35),0 8px 18px -8px rgb(0 0 0 / .6)}
.st-accent.is-on{opacity:1}
@media (hover:hover) and (pointer:fine){.st-side:has(.is-accent:hover) .st-accent{background:var(--ink-hover)}}
.st-side:has(.is-accent:active) .st-accent,.st-side .is-accent:active{scale:.97}

/* Панель «Для кого» растёт из своей кнопки (emil: origin-aware), уходит
   быстрее, чем приходит. Четыре ниши плитками с предметом, ниже — другие
   виды заведений чипами. */
.st-menu{
  position:absolute;top:calc(100% + 14px);left:-12px;width:660px;
  display:grid;gap:6px;padding:8px;border-radius:24px;
  background:var(--card);color:var(--ink);
  box-shadow:0 0 0 1px var(--line-2),0 30px 70px -28px var(--shadow),0 10px 24px -14px var(--shadow);
  transform-origin:60px -14px;opacity:1;transform:none;
  transition:opacity 180ms var(--ease-out),transform 220ms var(--ease-out);
}
.st-menu[hidden]{display:grid;visibility:hidden;opacity:0;transform:translateY(-6px) scale(.96);pointer-events:none;
  transition:opacity 120ms ease,transform 140ms ease,visibility 0s 140ms}
.st-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.st-menu-item{display:grid;grid-template-columns:56px 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center;padding:12px 14px 12px 10px;border-radius:16px;
  transition:background-color 160ms ease}
.st-menu-obj{grid-row:1/3;width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 6px 8px rgb(23 24 26 / .16));transition:transform 260ms var(--ease-out)}
.st-menu-item b{align-self:end;font-size:15.5px;font-weight:650;letter-spacing:-.01em;color:var(--ink)}
.st-menu-item span{align-self:start;font-size:13.5px;line-height:1.4;color:var(--ink-3);text-wrap:pretty}
@media (hover:hover) and (pointer:fine){
  .st-menu-item:hover{background:var(--bg-2)}
  .st-menu-item:hover .st-menu-obj{transform:translateY(-2px) scale(1.04)}
}
.st-menu-item:focus-visible{outline:2px solid var(--crest);outline-offset:-2px}
.st-menu-item[aria-current="page"]{background:var(--bg-2)}
.st-menu-also{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:2px 4px 4px;padding:12px 10px 8px;border-top:1px solid var(--line-2)}
.st-menu-also>span{margin-right:4px;font-size:13.5px;color:var(--ink-3)}
.st-menu-chip{display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:999px;background:var(--bg-2);font-size:13.5px;font-weight:550;color:var(--ink-2);
  transition:background-color 160ms ease,color 160ms ease}
@media (hover:hover) and (pointer:fine){.st-menu-chip:hover{background:var(--fill);color:var(--ink)}}
.st-menu-chip:focus-visible{outline:2px solid var(--crest);outline-offset:1px}

/* Бургер: две черты сходятся в крестик (apple-design: состояние видно
   движением, а не подменой значка). */
.st-burger{display:none}
.st-burger i{position:absolute;left:12px;right:12px;top:50%;height:1.75px;margin-top:-.875px;border-radius:2px;background:currentColor;
  transition:transform 320ms var(--ease-in-out)}
.st-burger i:first-child{transform:translateY(-4px)}
.st-burger i:last-child{transform:translateY(4px)}
.st-burger[aria-expanded="true"] i:first-child{transform:rotate(45deg)}
.st-burger[aria-expanded="true"] i:last-child{transform:rotate(-45deg)}

/* Лист меню телефона: на весь экран под шапкой, плашка шапки над ним.
   Блоки встают снизу один за другим; листа нет — страница прокручивается
   как обычно, лист открыт — страница стоит (html.st-locked). */
.st-sheet{position:fixed;inset:0;z-index:-1;overflow:auto;overscroll-behavior:contain;padding-top:calc(12px + var(--head-h) + 8px);
  background:var(--bg);opacity:1;visibility:visible;transition:opacity 220ms var(--ease-out)}
.st-sheet[hidden]{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 160ms ease,visibility 0s 160ms}
.st-sheet-in{display:grid;gap:30px;padding:12px 20px calc(28px + env(safe-area-inset-bottom));width:auto;max-width:560px}
.st-sheet-h{margin:0 0 8px;font-size:14px;color:var(--ink-3)}
.st-sheet-niches{display:grid;gap:2px}
.st-sheet-niche{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:14px;padding:8px 4px 8px 6px;border-radius:16px}
.st-sheet-niche .ic-go{width:20px;height:20px;color:var(--ink-3)}
.st-sheet-obj{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 6px 8px rgb(23 24 26 / .16))}
.st-sheet-niche b{font-size:19px;font-weight:650;letter-spacing:-.015em;color:var(--ink)}
.st-sheet-niche:active{background:var(--bg-2)}
.st-sheet-links{display:grid}
.st-sheet-link{display:flex;align-items:center;gap:12px;height:58px;font-size:30px;font-weight:750;letter-spacing:-.035em;color:var(--ink)}
.st-sheet-link-obj{width:40px;height:40px;flex:none;object-fit:contain;filter:drop-shadow(0 4px 5px rgb(23 24 26 / .18))}
.st-sheet-foot{display:grid;gap:10px}
.st-sheet-foot .btn{height:54px;font-size:16.5px;border-radius:16px}
html.st-locked{overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  @keyframes st-rise{from{opacity:0;transform:translateY(14px)}}
  .st-sheet:not([hidden]) .st-sheet-block{animation:st-rise 420ms var(--ease-out) calc(60ms + var(--k,0) * 60ms) backwards}
}

/* Шапка целиком (слово, разделы, «Войти» и запись) встаёт с 1024 px; уже —
   меню листом, иначе запись вылезает за плашку. */
@media (max-width:1023px){
  :root{--head-h:60px}
  .st-head{width:calc(100% - 24px)}
  .st-head-in{grid-template-columns:1fr auto;padding-inline:18px 8px}
  .st-nav,.st-side{display:none}
  .st-burger{position:relative;display:block;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--nav-ink);cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:background-color var(--t-ui) ease,scale var(--t-press) var(--ease-out)}
  .st-burger:active{scale:.94;background:var(--nav-track)}
}

/* ── подвал ─────────────────────────────────────────────────────── */
.st-foot{margin-top:var(--section-y);border-top:1px solid var(--line);background:var(--bg)}
.st-foot-in{
  display:grid;grid-template-columns:minmax(0,4fr) repeat(2,minmax(0,2.4fr)) minmax(0,3fr);gap:40px var(--gutter);
  padding-block:56px 40px;
}
.st-foot-brand{display:grid;gap:14px;align-content:start}
.st-foot-brand img{width:104px;height:auto;margin-left:-4px}
.st-foot-brand p{max-width:30ch;color:var(--ink-2);font-size:15px;line-height:1.55}
.st-foot-col{display:grid;gap:10px;align-content:start;font-size:15px}
.st-foot-col a{color:var(--ink-2);width:fit-content;transition:color var(--t-ui) ease}
@media (hover:hover) and (pointer:fine){.st-foot-col a:hover{color:var(--ink)}}
.st-foot-h{font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:4px}
.st-foot-theme{display:grid;gap:12px;align-content:start}
.st-theme{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--line-2);width:fit-content}
.st-theme-opt{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:0;border-radius:999px;background:none;
  font-size:13px;font-weight:500;color:var(--ink-3);cursor:pointer;
  transition:background-color var(--t-ui) ease,color var(--t-ui) ease,transform var(--t-press) var(--ease-out);
}
.st-theme-opt .ic{width:15px;height:15px}
.st-theme-opt:active{transform:scale(.96)}
.st-theme-opt[aria-checked="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 2px var(--shadow)}
.st-copy{grid-column:1/-1;padding-top:28px;border-top:1px solid var(--line-2);font-size:13.5px;color:var(--ink-3)}
/* Ссылки подвала и выбор темы — цель для пальца не ниже 40 px, строки
   при этом не расходятся: поле нажатия шире самого текста. */
@media (pointer:coarse){.st-foot-col a{padding-block:8px;margin-block:-8px}.st-theme-opt{min-width:44px;height:40px}}

@media (max-width:899px){
  .st-foot-in{grid-template-columns:1fr 1fr;gap:36px 24px;padding-block:44px 32px}
  .st-foot-brand,.st-foot-theme{grid-column:1/-1}
}
@media (max-width:420px){.st-theme-opt span{display:none}.st-theme-opt{padding:0 10px}}

/* ── связь ────────────────────────────────────────────────────────── */
/* Кнопка связи в правом нижнем углу (владелец 3.10: «в приятном стиле
   верхнего меню», «кнопка круглой должна быть и красивой»): тот же
   материал, что шапка, — кольцо плашки со светлой кромкой, в нём
   выпуклый белый круг с предметом серии (конверт с печатью хохолка,
   Higgsfield). Слово «Написать нам» читает экранный диктор; мышью оно
   выезжает подсказкой слева. Видна между первым экраном и подвалом
   (talk.mjs), при первом появлении конверт коротко покачивается. Окно
   «Напишите нам» раскрывается из кнопки, из её угла; поля — как в бланке
   записи. */
.st-talk{
  --plate:var(--bg-2);--plate-light:rgb(255 255 255 / .95);--plate-edge:rgb(255 255 255 / .95);--plate-line:rgb(23 24 26 / .045);
  --nav-thumb:#FFFFFF;--nav-thumb-shadow:inset 0 1px 0 #FFFFFF,0 0 0 .5px rgb(23 24 26 / .06),0 2px 4px rgb(23 24 26 / .08),0 6px 14px -6px rgb(23 24 26 / .22);
  --nav-track:rgb(23 24 26 / .045);
  position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:45;
  display:grid;justify-items:end;gap:12px;pointer-events:none;
}
[data-theme="dark"] .st-talk{
  --plate-light:rgb(255 255 255 / .06);--plate-edge:rgb(255 255 255 / .08);--plate-line:rgb(255 255 255 / .06);
  --nav-thumb:#5E6168;--nav-thumb-shadow:inset 0 1px 0 rgb(255 255 255 / .14),0 2px 4px rgb(0 0 0 / .25),0 6px 14px -6px rgb(0 0 0 / .5);
  --nav-track:rgb(0 0 0 / .2);
}
.st-talk-btn,.st-talk-sheet{
  background:radial-gradient(90% 160% at 0% 0%,var(--plate-light),transparent 62%),var(--plate);
  box-shadow:inset 0 1px 0 var(--plate-edge),inset 0 0 0 1px var(--plate-line),0 18px 40px -20px var(--shadow),0 2px 6px -3px var(--shadow);
}
.st-talk-btn{
  pointer-events:auto;position:relative;display:block;padding:6px;border:0;border-radius:999px;color:var(--ink);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
  opacity:0;translate:0 14px;scale:.96;visibility:hidden;
  transition:opacity 260ms var(--ease-out),translate 360ms var(--ease-out),scale 360ms var(--ease-out),visibility 0s linear 360ms;
}
.st-talk.is-shown .st-talk-btn{opacity:1;translate:0 0;scale:1;visibility:visible;transition:opacity 260ms var(--ease-out),translate 360ms var(--ease-out),scale 360ms var(--ease-out),visibility 0s}
.st-talk-btn{border-radius:50%}
.st-talk-pill{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:radial-gradient(70% 70% at 35% 25%,rgb(255 255 255 / .9),transparent 70%),var(--nav-thumb);box-shadow:var(--nav-thumb-shadow);
  transition:transform var(--t-press) var(--ease-out)}
.st-talk-btn:active .st-talk-pill{transform:scale(.94)}
.st-talk-pill img{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 3px 3px rgb(23 24 26 / .2));transition:translate 260ms var(--ease-out),scale 260ms var(--ease-out)}
[data-theme="dark"] .st-talk-pill{background:var(--nav-thumb)}
[data-theme="dark"] .st-talk-pill img{filter:drop-shadow(0 3px 3px rgb(0 0 0 / .45))}
.st-talk-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.st-talk.is-open .st-talk-pill img{translate:0 -2px;scale:1.1}
/* Подсказка слева от круга — тем же материалом; на касании её нет. */
.st-talk-word{position:absolute;right:calc(100% + 10px);top:50%;display:flex;align-items:center;height:38px;margin-top:-19px;padding:0 15px;border-radius:999px;
  background:radial-gradient(90% 160% at 0% 0%,var(--plate-light),transparent 62%),var(--plate);
  box-shadow:inset 0 1px 0 var(--plate-edge),inset 0 0 0 1px var(--plate-line),0 10px 24px -14px var(--shadow);
  font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;pointer-events:none;
  opacity:0;translate:6px 0;transition:opacity 140ms ease,translate 200ms var(--ease-out)}
.st-talk:not(.is-open) .st-talk-btn:is(:hover,:focus-visible) .st-talk-word{opacity:1;translate:0 0}
@media (hover:none){.st-talk-word{width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);box-shadow:none}}
@media (prefers-reduced-motion:no-preference){
  @keyframes st-talk-hello{0%,100%{rotate:0deg}15%{rotate:-12deg}32%{rotate:10deg}50%{rotate:-6deg}68%{rotate:3deg}}
  .st-talk.is-hello .st-talk-pill img{animation:st-talk-hello 760ms var(--ease-in-out) 360ms}
  @media (hover:hover) and (pointer:fine){.st-talk-btn:hover .st-talk-pill img{animation:st-talk-hello 620ms var(--ease-in-out)}}
}

/* Окно: растёт из угла кнопки, закрывается быстрее, чем открывается. */
.st-talk-sheet{
  pointer-events:auto;width:min(380px,calc(100vw - 32px));padding:18px;border-radius:30px;transform-origin:100% 100%;
  opacity:0;translate:0 10px;scale:.96;transition:opacity 160ms ease,translate 180ms var(--ease-out),scale 180ms var(--ease-out);
}
.st-talk.is-open .st-talk-sheet{opacity:1;translate:0 0;scale:1;transition:opacity 220ms var(--ease-out),translate 320ms var(--ease-drawer),scale 320ms var(--ease-drawer)}
.st-talk-sheet:focus{outline:none}
.st-talk-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-bottom:14px}
.st-talk-head img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 3px 4px rgb(23 24 26 / .18))}
.st-talk-head h2{font-size:19px;line-height:1.2;font-weight:750;letter-spacing:-.02em}
.st-talk-head p{margin-top:2px;font-size:13.5px;color:var(--ink-3)}
.st-talk-x{align-self:start;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:var(--nav-track);color:var(--ink-2);cursor:pointer;-webkit-tap-highlight-color:transparent}
.st-talk-x svg{width:16px;height:16px}
.st-talk-x:active{scale:.94}
.st-talk-form{display:grid;gap:14px}
.st-talk .tw-group{background:var(--card)}
.st-talk .tw-cell input{font-size:16px}
.st-talk .tw-cell textarea{
  width:100%;margin:0;padding:3px 18px 13px;border:0;background:none;color:var(--ink);outline:none;resize:none;
  font:inherit;font-size:16px;line-height:23px;font-weight:550;letter-spacing:-.005em;
}
.st-talk .tw-cell textarea::placeholder{color:var(--ink-3);opacity:.55;font-weight:450}
.st-talk .tw-cell:has(textarea[aria-invalid="true"]):not(:focus-within){background:color-mix(in srgb,var(--crest) 7%,transparent)}
.st-talk .tw-cell:has(textarea[aria-invalid="true"]) label{color:var(--crest)}
.st-talk .tw-errs{margin-top:-6px}
.st-talk-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.st-talk-notice{font-size:13.5px;color:var(--crest)}
.st-talk-send{width:100%;height:50px;border-radius:16px}
.st-talk-done{display:grid;gap:4px;padding:14px 16px;border-radius:18px;background:var(--card);outline:none}
.st-talk-done b{font-size:17px;font-weight:700}
.st-talk-done p{font-size:14.5px;line-height:1.45;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){
  .st-talk-btn,.st-talk.is-shown .st-talk-btn,.st-talk-sheet,.st-talk.is-open .st-talk-sheet{translate:none;scale:none;transition:opacity 160ms ease,visibility 0s}
}
/* Телефон: круг чуть меньше и ближе к краю, окно во всю ширину над ним. */
@media (max-width:600px){
  .st-talk{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}
  .st-talk-btn{padding:5px}
  .st-talk-pill{width:50px;height:50px}
  .st-talk-pill img{width:33px;height:33px}
  .st-talk-sheet{width:calc(100vw - 24px);padding:16px;border-radius:26px}
}

/* ── в разработке ─────────────────────────────────────────────────── */
/* Плашка внизу по центру, как плашка про куки (владелец 3.10): тот же
   материал, что шапка и кнопка связи, слева дятел в своих цветах — он
   стучит, пока Tukelo строится, справа «Понятно». Выезжает снизу, уходит
   быстрее, чем пришла (emil: выход короче входа). На узком экране кнопка
   связи стоит над плашкой. */
.st-dev{
  --plate:var(--bg-2);--plate-light:rgb(255 255 255 / .95);--plate-edge:rgb(255 255 255 / .95);--plate-line:rgb(23 24 26 / .045);
  position:fixed;z-index:44;left:50%;bottom:max(16px,env(safe-area-inset-bottom));width:min(780px,calc(100vw - 32px));
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"mark text acts";align-items:center;gap:6px 14px;padding:12px 12px 12px 16px;border-radius:24px;color:var(--ink);
  background:radial-gradient(90% 160% at 0% 0%,var(--plate-light),transparent 62%),var(--plate);
  box-shadow:inset 0 1px 0 var(--plate-edge),inset 0 0 0 1px var(--plate-line),0 18px 40px -20px var(--shadow),0 2px 6px -3px var(--shadow);
  opacity:0;transform:translate(-50%,18px);transition:opacity 180ms ease,transform 200ms var(--ease-out);
}
.st-dev[hidden]{display:none}
.st-dev.is-in{opacity:1;transform:translate(-50%,0);transition:opacity 260ms var(--ease-out),transform 360ms var(--ease-drawer)}
[data-theme="dark"] .st-dev{--plate-light:rgb(255 255 255 / .06);--plate-edge:rgb(255 255 255 / .08);--plate-line:rgb(255 255 255 / .06)}
.st-dev-mark{grid-area:mark;width:auto;height:34px;transform-origin:42% 82%}
[data-theme="dark"] .st-dev-mark{filter:drop-shadow(1px 0 0 rgb(235 234 230 / .95)) drop-shadow(-1px 0 0 rgb(235 234 230 / .95)) drop-shadow(0 1px 0 rgb(235 234 230 / .95)) drop-shadow(0 -1px 0 rgb(235 234 230 / .95))}
.st-dev-text{grid-area:text;font-size:14.5px;line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.st-dev-text b{font-weight:700;color:var(--ink)}
.st-dev-acts{grid-area:acts;display:flex;align-items:center;gap:16px}
.st-dev-link{white-space:nowrap;padding:0;border:0;background:none;font:inherit;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--ink) 30%,transparent);text-underline-offset:3px;cursor:pointer}
@media (hover:hover) and (pointer:fine){.st-dev-link:hover{text-decoration-color:currentColor}}
.st-dev-ok{flex:none;height:40px;padding:0 18px;border:0;border-radius:999px;background:var(--ink);color:var(--on-ink);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
  transition:transform var(--t-press) var(--ease-out),background-color var(--t-ui) ease}
.st-dev-ok:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.st-dev-ok:hover{background:var(--ink-hover)}}
.st-dev-ok:focus-visible,.st-dev-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Появилась — дятел дважды стучит: стройка идёт. */
@media (prefers-reduced-motion:no-preference){
  @keyframes st-dev-peck{0%,100%{transform:none}16%{transform:rotate(13deg)}30%{transform:rotate(-1deg)}46%{transform:rotate(11deg)}62%{transform:none}}
  .st-dev.is-in .st-dev-mark{animation:st-dev-peck 640ms var(--ease-out) 420ms}
}
@media (prefers-reduced-motion:reduce){.st-dev,.st-dev.is-in{transform:translate(-50%,0)}}
/* Кнопка связи над плашкой, пока они стоят друг на друге. */
.st-talk{transition:translate 300ms var(--ease-drawer)}
@media (max-width:840px){
  .has-dev .st-talk{translate:0 calc(-1 * (var(--dev-h,0px) + 10px))}
}
@media (max-width:600px){
  /* Телефон: слова во всю ширину, под ними строка действий. */
  .st-dev{bottom:max(12px,env(safe-area-inset-bottom));width:calc(100vw - 24px);grid-template-columns:auto minmax(0,1fr);grid-template-areas:"mark text" "mark acts";
    gap:10px 12px;padding:14px 12px 12px 14px;border-radius:22px}
  .st-dev-mark{height:30px;align-self:start;margin-top:1px}
  .st-dev-text{font-size:14px;line-height:1.42}
  .st-dev-acts{justify-content:space-between;gap:10px}
  .st-dev-link{font-size:14px}
  .st-dev-ok{height:38px;padding:0 16px;font-size:14px}
}
/* Самые узкие: строка действий во всю ширину плашки, под дятлом тоже. */
@media (max-width:380px){
  .st-dev{grid-template-areas:"mark text" "acts acts"}
  .st-dev-link{font-size:13.5px}
}