/* home.css — главная «Живая аура» (редизайн 09.10.2026, эталон — marketing/redesign-hero/prototype-mobile/).
   Телефон: одна колонка «лента → круг → карточка → Начать» ровно в высоту окна; редкое — нижней шторкой.
   Планшет-портрет (≥700×860): настройки развёрнуты под кругом в две колонки. Альбом от 900 px (и ПК):
   три колонки, шторка — справа. Практика — режим фокуса (body.focus). Главная всегда тёмная.
   Шапка — общая (chrome.css), здесь только её вид на главной. */

body[data-page="timer"]{
  /* общие токены (--ink, --fg, --card, --glass, --line, --f-display…) — aura.css */
  --noise:var(--au-noise);
  --mood:var(--au-go); --phase:var(--au-in);
  --accent:var(--au-accent); --accent-soft:rgba(127,209,255,.16); --accent-border:rgba(127,209,255,.32);
  --bg-elev:var(--au-glass); --bg-elev-2:var(--au-glass-2); --border:var(--au-line);
  --gut:16px;
  --ease:var(--au-ease); --sheet-ease:var(--au-spring);
  --vh:calc(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  color-scheme:dark;
  margin:0;min-height:100svh;
  background:radial-gradient(1000px 800px at 50% 40%,var(--ink-2),var(--ink) 70%) no-repeat;background-color:var(--ink);
  color:var(--fg);font:400 15px/1.45 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
html:has(body[data-page="timer"]){background:var(--au-ink)}
html.lock{overflow:hidden}
:where(body[data-page="timer"]) *{box-sizing:border-box}
:where(body[data-page="timer"]) a{color:inherit}
:where(body[data-page="timer"]) button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
:where(body[data-page="timer"]) :focus-visible{outline:2px solid var(--mood);outline-offset:3px;border-radius:10px}
body[data-page="timer"] [hidden]{display:none!important}
svg.i,.fb svg,.go svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.wrap{position:relative;height:var(--vh);min-height:540px;display:flex;flex-direction:column;padding-inline:var(--gut);overflow-x:clip}

/* ---------- шапка (общая, chrome.css) — вид на главной ---------- */
body[data-page="timer"] .site-header{flex:none;width:100%;max-width:none;height:calc(56px + env(safe-area-inset-top,0px));margin:0;padding:env(safe-area-inset-top,0px) 0 0;gap:8px;position:relative;z-index:5;transition:opacity .4s}
body[data-page="timer"] .sh-h1{flex:0 1 auto;min-width:0;margin-right:auto;display:flex}
body[data-page="timer"] .sh-brand{margin:0}
body[data-page="timer"] .sh-brand img{height:24px;opacity:1}
body[data-page="timer"] .sh-my,body[data-page="timer"] .sh-menu{display:inline-flex;height:44px;min-width:44px;padding:0;justify-content:center;border-radius:999px;background:var(--glass);border:1px solid var(--line);color:var(--fg);font-size:0;gap:0}
body[data-page="timer"] .sh-my svg,body[data-page="timer"] .sh-menu svg{width:20px;height:20px;stroke:currentColor}
body.focus .site-header .sh-h1,body.focus .site-header .sh-my,body.focus .site-header .sh-menu,body.focus .site-header .sh-nav{opacity:.35}
/* © — только в установленном приложении (там нет «Меню» и подвала с копирайтом) */
body[data-page="timer"] .sh-copy{display:none}
html.is-app body[data-page="timer"] .sh-copy{display:grid;place-items:center;width:44px;height:44px;border:0;background:none;color:rgba(138,163,196,.45);font-size:17px}
html.is-app body[data-page="timer"] .sh-menu,html.is-app body[data-page="timer"] .sh-my,html.is-app body[data-page="timer"] .sh-nav{display:none}
body[data-page="timer"] .site-header .sh-h1{flex:none}   /* логотип не уходит под плашку звука — сжимается её название */
/* Компактная полоса меню (липкая шапка, 27.10.2026): копию шапки кладёт в body site-chrome.js и показывает, когда первый
   экран (.wrap) ушёл вверх; на телефоне — только при прокрутке вверх. Во время практики её нет. Подложка — как у шапки сайта. */
.sh-float{position:fixed;top:0;left:0;right:0;z-index:80;padding-inline:var(--gut);background:var(--au-bar);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 1px 0 var(--au-line);
  transform:translateY(calc(-100% - 4px));visibility:hidden;transition:transform .3s var(--au-ease),visibility 0s .3s}
.sh-float.is-on{transform:none;visibility:visible;transition:transform .3s var(--au-ease)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.sh-float{background:var(--au-bar-solid)}}
body[data-page="timer"] .sh-float .site-header{height:calc(56px + env(safe-area-inset-top,0px));max-width:1240px;margin:0 auto}
body[data-page="timer"] .sh-float .sh-brand img{height:24px}
html.is-app .sh-float{display:none}
@media (prefers-reduced-motion:reduce){.sh-float,.sh-float.is-on{transition:none}}
@media print{.sh-float{display:none}}
.np{display:inline-flex;align-items:center;height:40px;max-width:178px;min-width:0;border-radius:999px;background:linear-gradient(100deg,rgba(255,143,198,.22),rgba(91,108,255,.22));border:1px solid rgba(255,143,198,.35);font-weight:600;font-size:13.5px;flex:0 1 auto}
.np button{background:none;border:0;height:100%;display:inline-flex;align-items:center}
/* ▶/⏸ (14.10.2026): играет — эквалайзер (ПК: ⏸ при наведении на всю плашку; телефон: ⏸ и «дышащее» кольцо), пауза — ▶ */
.np .np-pp{position:relative;flex:none;width:30px;height:30px;margin-left:5px;border-radius:50%;justify-content:center;background:rgba(255,255,255,.12);color:var(--fg)}
.np .np-pp svg{display:none;width:13px;height:13px;fill:currentColor}
.np .np-pp .np-play{width:14px;height:14px;margin-left:2px}
.np .np-open{padding:0 2px 0 8px;gap:8px;min-width:0}
.np .np-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.np .np-stop{flex:none;width:36px;justify-content:center;color:var(--muted);font-size:13px}
.np.paused{background:var(--glass);border-color:var(--line)}
.np.paused .np-pp{background:var(--noise);color:#10142a}
.np.paused .np-pp .eq{display:none}
.np.paused .np-pp .np-play{display:block}
.np.paused .np-txt{color:var(--muted)}
@media (hover:hover){
  .np:not(.paused):hover .np-pp .eq,.np:not(.paused):focus-within .np-pp .eq{display:none}
  .np:not(.paused):hover .np-pp .np-pause,.np:not(.paused):focus-within .np-pp .np-pause{display:block}
  .np:not(.paused):hover .np-pp{background:rgba(255,255,255,.22)}
}
@media (hover:none){
  .np:not(.paused) .np-pp .eq{display:none}
  .np:not(.paused) .np-pp .np-pause{display:block}
  .np:not(.paused) .np-pp::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid var(--noise);animation:npRing 2.4s ease-in-out infinite}
}
@keyframes npRing{0%,100%{opacity:.25;transform:scale(.92)}50%{opacity:.9;transform:scale(1.06)}}
.eq{flex:none;display:inline-flex;gap:2px;align-items:flex-end;height:14px}
.eq i{width:3px;background:var(--noise);border-radius:2px;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.6s}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}

/* ---------- раскладка ---------- */
.main{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.side,.slot{display:none}
.col{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}

/* складные блоки: фокус убирает лишнее плавно, круг растёт в освободившееся место */
.fold{flex:none;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr;transition:grid-template-rows .6s var(--ease),opacity .45s .1s;position:relative;z-index:2}
.fold>div{min-height:0}
.fold.fon{grid-template-rows:0fr;opacity:0;pointer-events:none;transition:grid-template-rows .6s var(--ease),opacity .3s}
.fold.fon>div{overflow:hidden}
body.focus .fold.foff{grid-template-rows:0fr;opacity:0;pointer-events:none;transition:grid-template-rows .6s var(--ease),opacity .3s}
body.focus .fold.foff>div{overflow:hidden}
body.focus .fold.fon{grid-template-rows:1fr;opacity:1;pointer-events:auto;transition:grid-template-rows .6s var(--ease),opacity .45s .15s}

/* выбор практики: переключатель + лента */
.switch{display:flex;gap:8px;align-items:center;padding-top:2px}
.seg{flex:1;min-width:0;display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:999px;background:var(--glass);border:1px solid var(--line);position:relative}
.seg .knob{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--glass-2);transition:transform .45s var(--ease)}
.seg[data-v="tools"] .knob{transform:translateX(100%)}
.seg button{position:relative;z-index:1;height:38px;border:0;background:none;border-radius:999px;font-weight:600;font-size:14px;color:var(--muted);white-space:nowrap;padding:0 6px;transition:color .3s}
.seg button[aria-pressed="true"]{color:var(--fg)}
.nzb{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:conic-gradient(from 200deg,#ff9fd2,#ffd27a,#9ee9c5,#7fb8ff,#c8a8ff,#ff9fd2);display:grid;place-items:center;color:#0a1024;box-shadow:0 6px 18px -8px #ff9fd2}
.nzb svg{width:22px;height:22px;stroke-width:2.2}
.lent{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);margin-inline:calc(-1 * var(--gut));padding:10px var(--gut) 6px;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;cursor:grab}
.lent.drag{scroll-snap-type:none;cursor:grabbing;user-select:none}
.lent.more-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
.lent.more-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px);mask-image:linear-gradient(90deg,transparent,#000 44px)}
.lent.more-l.more-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent)}
.lent::-webkit-scrollbar{display:none}
/* «дышащие» шевроны (14.10.2026, вариант Г): в погасшем крае ленты, пока есть куда листать; ритм — вдох-выдох 4 с */
.lentw{position:relative}
.lentw .lent.more-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.lentw .lent.more-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px);mask-image:linear-gradient(90deg,transparent,#000 56px)}
.lentw .lent.more-l.more-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
.chev{position:absolute;bottom:32px;width:44px;height:44px;padding:0;border:0;background:none;display:grid;place-items:center;color:#cfe9ff;opacity:0;pointer-events:none;transition:opacity .35s;z-index:1}
.chev.r{right:calc(2px - var(--gut))}
.chev.l{left:calc(2px - var(--gut))}
.chev svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lent.more-r~.chev.r,.lent.more-l~.chev.l{opacity:1;pointer-events:auto}
.chev.r svg{animation:chevR 4s ease-in-out infinite}
.chev.l svg{animation:chevL 4s ease-in-out infinite}
@keyframes chevR{0%,100%{transform:translateX(-3px);opacity:.35}50%{transform:translateX(4px);opacity:.95}}
@keyframes chevL{0%,100%{transform:translateX(3px);opacity:.35}50%{transform:translateX(-4px);opacity:.95}}
.lent.drag~.chev{opacity:0}
.lent::after{content:"";flex:none;width:calc(var(--gut) - 8px)}
.lent.swap{animation:swap .45s var(--ease)}
@keyframes swap{from{opacity:0;transform:translateX(18px)}}
.cm{flex:none;scroll-snap-align:start;position:relative;width:106px;height:96px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:10px 10px 9px;border-radius:20px;border:1px solid var(--card-line);background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);text-align:left;transition:border-color .35s,background .35s}
.cm[aria-current="true"]{border-color:color-mix(in srgb,var(--c1) 65%,transparent);background:rgba(20,28,58,.78)}
.cm .blob{width:38px;height:38px}
/* курс (courses.js): кольцо прогресса вместо капли, цвет — цвет курса (--c1) */
.crs-ring{flex:none;width:38px;height:38px;overflow:visible}
.crs-ring circle{fill:none;stroke-width:4}
.crs-ring .r0{stroke:color-mix(in srgb,var(--c1) 26%,transparent)}
.crs-ring .r1{stroke:var(--c1);stroke-linecap:round}
.crs-ring text{fill:var(--fg);font:700 12px/1 var(--f-body)}
.cm.crs{border-color:color-mix(in srgb,var(--c1) 55%,transparent);background:linear-gradient(150deg,color-mix(in srgb,var(--c1) 22%,transparent),rgba(12,18,40,.72))}
.cm.crs .cm-sub{color:var(--c1)}
.cm.crs .cm-name{color:var(--fg)}
.item.crs .i-sub{color:var(--c1)}
.item.crs .i-name{color:var(--fg)}
.cm[aria-current="true"] .blob{transform:scale(1.08)}
.cm-t{display:flex;flex-direction:column;min-width:0;max-width:100%}
.cm-sub{font-size:11px;font-weight:600;color:var(--dim);letter-spacing:.02em;font-variant-numeric:tabular-nums;transition:color .3s}
.cm-name{font-size:13.5px;font-weight:600;color:var(--muted);line-height:1.15;transition:color .3s}
.cm[aria-current="true"] .cm-name{color:var(--fg)}
.cm[aria-current="true"] .cm-sub{color:var(--c1)}
.ic-o{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--dim);display:grid;place-items:center;color:var(--muted)}
.ic-o svg{width:19px;height:19px}
.cm[aria-current="true"] .ic-o{border-color:var(--c1);color:var(--fg)}
.cm.noise{width:150px;background:linear-gradient(140deg,rgba(255,143,198,.16),rgba(91,108,255,.16)),var(--card);border-color:rgba(255,143,198,.3)}
.cm.noise .ic-o,.tool.noise .ic-o{border:0;background:conic-gradient(from 200deg,#ff9fd2,#ffd27a,#9ee9c5,#7fb8ff,#c8a8ff,#ff9fd2);color:#0a1024}
.cm.noise .ic-o svg{stroke-width:2.2}
.cm.noise .cm-name{color:var(--fg)}

.blob{flex:none;border-radius:58% 42% 55% 45%/48% 60% 40% 52%;background:radial-gradient(circle at 34% 30%,var(--c0) 0,var(--c1) 42%,var(--c2) 100%);box-shadow:inset -5px -7px 14px rgba(0,0,0,.25),0 8px 22px -8px var(--c1);animation:morph 9s ease-in-out infinite;animation-delay:var(--dl,0s);transition:transform .35s var(--ease)}
/* витраж-мандала вместо капли (home.js vz()): крутится svg целиком — слой композитора, блик ::after стоит на месте */
.blob.vz{position:relative;border-radius:50%;background:none;box-shadow:0 6px 20px -8px var(--c1),0 0 14px -6px var(--c1);animation:none}
.blob.vz svg{display:block;width:100%;height:100%;animation:vz-spin 110s linear infinite;animation-delay:var(--dl,0s)}
.blob.vz::after{content:"";position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.5),rgba(255,255,255,.08) 45%,rgba(255,255,255,0) 70%);pointer-events:none}
@keyframes vz-spin{to{transform:rotate(360deg)}}
@keyframes morph{
  0%,100%{border-radius:58% 42% 55% 45%/48% 60% 40% 52%;rotate:0deg}
  33%{border-radius:42% 58% 38% 62%/60% 40% 58% 42%;rotate:8deg}
  66%{border-radius:52% 48% 62% 38%/42% 54% 46% 58%;rotate:-6deg}
}

/* баннер программы (?program=) */
.program-banner{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:8px;padding:8px 8px 8px 14px;border-radius:16px;background:linear-gradient(100deg,rgba(94,200,255,.14),rgba(140,123,255,.12));border:1px solid rgba(127,209,255,.3)}
.pb-body{flex:1;min-width:0}
.pb-title{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-close{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--glass);font-size:13px;line-height:1}
.pb-warn{flex-basis:100%;font-size:12px;color:#ffd08a}

/* круг */
.stage{flex:1;min-height:150px;container-type:size;display:grid;place-items:center;position:relative;z-index:1}
.dial{position:relative;width:min(86cqw,100cqh);aspect-ratio:1;container-type:size;isolation:isolate;transition:width .6s var(--ease)}
body.focus .dial{width:min(94cqw,100cqh)}
/* до первой раскладки home.js колонка — полупустой каркас (лента, фазы, карточка, «Начать» приходят из скрипта):
   она невидима, круг встаёт на место без анимации — иначе заполнение страницы шло в CLS (0,14–0,18 при медленной
   сети; аудит, этап 4). Без скрипта колонка всё равно появляется через 4 с. */
html:not(.hm-ready) .dial{transition:none!important}
html:not(.hm-ready) :is(.main>.col,#slotF,.main>.safe){visibility:hidden;animation:hm-show 0s 4s forwards}
@keyframes hm-show{to{visibility:visible}}
.aura{position:absolute;left:50%;top:50%;width:200%;height:200%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 60%,transparent 100%);mask-image:radial-gradient(closest-side,#000 60%,transparent 100%)}
.ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.ring circle{fill:none;stroke-width:1.6;stroke-linecap:round;transition:stroke-opacity .4s}
.ring .sg{stroke-opacity:.28}
.ring .sg.on{stroke-opacity:.45}
.ring .fill{stroke-width:2.4;filter:drop-shadow(0 0 3px currentColor)}
.ring .base{stroke:rgba(255,255,255,.06);stroke-width:1}
.head{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px var(--phase),0 0 18px 4px var(--phase);opacity:0;transition:opacity .3s}
/* линза — жидкое стекло, как у виджетов посадочных (breath.css, этап 13.10.2026): в Chromium home.js добавляет
   feDisplacementMap в backdrop-filter (края преломляют ауру), в Safari — матовое стекло с бликом и ободком */
.lens{position:absolute;left:50%;top:50%;width:50%;height:50%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(5,9,22,.58) 52%,rgba(5,9,22,.16) 100%);
  backdrop-filter:blur(10px) saturate(1.8) brightness(1.08);-webkit-backdrop-filter:blur(10px) saturate(1.8) brightness(1.08);
  box-shadow:inset 1.5px 1.5px 0 -.5px rgba(255,255,255,.55),inset -1px -1px 0 -.5px rgba(255,255,255,.22),inset 0 0 22px rgba(255,255,255,.06),0 20px 50px -20px rgba(0,0,0,.6);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1cqw}
.lens::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.26),rgba(255,255,255,0) 36%,rgba(255,255,255,0) 72%,rgba(255,255,255,.08))}
.lens>*{position:relative;z-index:1;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.l-label{font:700 4.8cqw/1.1 var(--f-display);letter-spacing:.01em;color:var(--phase);transition:color .5s;max-width:88%}
.l-num{font:800 18cqw/1 var(--f-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.l-num.sm{font-size:11cqw}
.l-next{font-size:3.4cqw;line-height:1.3;color:var(--muted);font-weight:500;min-height:1.3em;max-width:84%}

/* цепочка фаз и статус */
.seq{flex:none;display:flex;gap:6px;flex-wrap:nowrap;justify-content:safe center;min-height:32px;padding-top:6px;position:relative;z-index:2;overflow:hidden}
.seq span{flex:none;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:999px;background:var(--card);border:1px solid var(--card-line);font-weight:600;font-size:13px;color:var(--muted);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-variant-numeric:tabular-nums;white-space:nowrap;transition:background .3s,color .3s}
.seq span i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.seq span.on{background:var(--c);color:var(--on-accent);border-color:transparent}
.seq span.on i{background:var(--on-accent)}
.seq b{flex:none;color:var(--dim);font-weight:500;align-self:center;font-size:13px}
.seq b.ar{display:none}
.seq.tight{gap:4px}
.seq.tight span{padding:0 8px;font-size:12px;gap:5px}

.strow{display:flex;align-items:center;gap:8px;justify-content:center;padding-top:10px}
.status{flex:0 1 340px;min-width:0;display:flex;align-items:center;justify-content:center;gap:14px;height:40px;padding:0 14px;border-radius:999px;background:var(--card);border:1px solid var(--card-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-weight:600;font-size:14px;font-variant-numeric:tabular-nums;position:relative;overflow:hidden;white-space:nowrap}
.status #stTxt{overflow:hidden;text-overflow:ellipsis}
.status #stTxt span{color:var(--muted);font-weight:500}
.status #stTxt .lt{font-style:normal}
@media (max-width:420px){.status{padding:0 12px;font-size:13px}.plus{padding:0 12px}.status #stTxt .lt{display:none}}
.status .bar{position:absolute;left:0;bottom:0;height:2px;background:var(--mood);width:0;transition:width .3s linear}
.plus{flex:none;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);font:700 13px/1 var(--f-display);white-space:nowrap;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.plus:active{transform:scale(.96)}
/* «Пропустить отрезок» Помодоро: на ПК с подписью «К перерыву / К фокусу / Закончить», на телефоне — значок, «+5 мин» → «+5» */
.plus.skip{display:inline-flex;align-items:center;gap:7px}
.plus.skip[hidden]{display:none}
.plus.skip svg{width:15px;height:15px;fill:currentColor;flex:none}
@media (max-width:560px){.plus .sk-t{display:none}.plus.skip{width:40px;padding:0;justify-content:center}}

/* карточка настроек на первом экране (телефон) */
.card{margin-top:10px;background:var(--card);border:1px solid var(--card-line);border-radius:24px;padding:10px;backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);display:flex;flex-direction:column;gap:8px}
.c-main{min-height:96px;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 2px}
.c-row{display:flex;align-items:center;gap:8px;min-width:0}
.c-val{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;line-height:1}
.c-val b{font:800 26px/1 var(--f-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap;max-width:100%}
.c-val b.fit{font-size:20px}
.c-val b small{font:600 13px/1 var(--f-body);color:var(--muted);letter-spacing:0;margin-left:4px}
.c-unit{display:inline-flex;align-items:center;gap:5px;margin-top:2px;min-height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:none;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.c-unit svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.c-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.sum{position:relative;height:48px;min-width:0;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);padding:6px 9px;text-align:left;display:flex;flex-direction:column;justify-content:center;gap:2px}
.sum small{font-size:11px;color:var(--dim);font-weight:600;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:12px}
.sum b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sum b.fit{font-size:11px;letter-spacing:-.01em}
.sum::after{content:"";position:absolute;right:10px;top:11px;width:5px;height:5px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(45deg)}
.sum:active{background:rgba(255,255,255,.09)}
.c-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.c-txt small{font-size:11.5px;color:var(--dim);font-weight:600}
.c-txt b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-hint{font-size:12px;color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* интервалы на карточке: каждая колонка — своя плашка, значение на всю ширину, кнопки под ним */
.ms3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ms{display:flex;flex-direction:column;align-items:stretch;gap:4px;min-width:0;padding:6px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.ms small{font-size:11.5px;font-weight:600;color:var(--c);text-align:center}
.ms b{font:800 17px/1 var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:center}
.ms div{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.ms button{height:40px;border-radius:10px;border:1px solid var(--line);background:var(--glass);font-size:18px;line-height:1}

/* кнопки */
.goline{display:flex;justify-content:center;gap:10px;padding-top:10px}
.go{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:58px;padding:0 30px 0 24px;border:0;border-radius:999px;background:var(--mood);color:var(--on-accent);font:700 16.5px/1 var(--f-display);box-shadow:0 14px 40px -14px var(--mood);transition:background .8s,box-shadow .8s,transform .15s;font-variant-numeric:tabular-nums;white-space:nowrap}
.go:active{transform:scale(.97)}
.go svg{width:20px;height:20px;fill:currentColor;stroke:none}
.go.ghost{background:var(--card);color:var(--fg);border:1px solid var(--line);box-shadow:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.goline .go{flex:1;max-width:420px}
/* метроном — рядом с «Начать»; перечёркнут, когда выключен */
.gtick{flex:none;position:relative;width:58px;height:58px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--muted);display:grid;place-items:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:color .25s,border-color .25s,box-shadow .25s,transform .15s}
.gtick svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gtick[aria-pressed="false"]::after{content:"";position:absolute;width:30px;height:2px;background:currentColor;transform:rotate(-45deg);border-radius:2px}
.gtick[aria-pressed="true"]{color:var(--fg);border-color:color-mix(in srgb,var(--mood) 70%,transparent);box-shadow:0 0 18px -4px var(--mood)}
.gtick:active{transform:scale(.94)}

.fbar{display:flex;justify-content:space-between;align-items:flex-end;max-width:440px;margin:0 auto;padding-top:14px}
.fb{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;color:var(--muted);font-size:11.5px;font-weight:600;white-space:nowrap}
.fb .o{position:relative;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--muted);transition:color .25s,border-color .25s,background .8s,transform .15s}
.fb svg{width:22px;height:22px}
.fb[aria-pressed="true"] .o{color:var(--fg);border-color:rgba(255,255,255,.3)}
.fb.tg[aria-pressed="false"] .o::after{content:"";position:absolute;width:28px;height:2px;background:currentColor;transform:rotate(-45deg);border-radius:2px}
.fb.big{color:var(--fg)}
.fb.big .o{width:78px;height:78px;border:0;background:var(--mood);color:var(--on-accent);box-shadow:0 14px 40px -12px var(--mood)}
.fb.big svg{width:30px;height:30px;fill:currentColor;stroke:none}
.fb:active .o{transform:scale(.94)}
.keys{display:none;margin:10px 0 0;text-align:center;font-size:12px;color:var(--dim)}

/* дисклеймер и стрелка */
.safe{flex:none;display:flex;gap:8px;align-items:center;margin:0;padding-block:8px 6px;font-size:11px;line-height:1.4;color:var(--dim);position:relative;z-index:2;transition:color .5s}
.safe span{flex:1;min-width:0}
.safe a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(255,255,255,.25)}
body.prep .safe,body.prep .safe a{color:var(--fg)}
/* PWA: строка безопасности один раз выезжает из © при первой практике (home.js showSafeTip) */
.safe-tip{position:absolute;top:calc(env(safe-area-inset-top,0px) + 46px);right:0;z-index:6;width:min(250px,calc(100vw - 2*var(--gut)));margin:0;padding:6px 10px;border-radius:10px;background:rgba(11,17,38,.55);border:1px solid rgba(255,255,255,.06);font:400 10.5px/1.35 var(--f-body);color:var(--dim);transform-origin:calc(100% - 22px) 0;transform:translateY(-6px) scale(.3);opacity:0;transition:transform .3s cubic-bezier(.55,0,.75,.25),opacity .22s ease}
.safe-tip.on{transform:none;opacity:1;transition:transform .45s var(--sheet-ease),opacity .4s ease}
.safe-tip a{color:var(--dim);text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(255,255,255,.15)}
@media (prefers-reduced-motion:reduce){.safe-tip,.safe-tip.on{transform:none}}
.down{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:var(--dim);text-decoration:none!important;transition:opacity .4s}
.down svg{width:20px;height:20px;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(3px)}}
body.focus .down{opacity:0;pointer-events:none}

/* ---------- панель настроек (шторка, планшет, альбом) ---------- */
.panel{display:flex;flex-direction:column;gap:18px}
.p-head{display:flex;gap:12px;align-items:flex-start}
.p-head > div{flex:1;min-width:0}
.p-head h2{margin:0;font:700 20px/1.2 var(--f-display);letter-spacing:-.02em;text-wrap:balance}
.p-head p{margin:6px 0 0;color:var(--muted);font-size:14px;line-height:1.45}
.p-close{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--glass);font-size:16px;line-height:1}
.sec{display:flex;flex-direction:column;gap:10px}
.s-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.s-name{font-weight:600;font-size:14.5px}
.s-hint{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.s-hint b{color:var(--fg);font-weight:600}
.tabs{display:inline-grid;grid-auto-flow:column;padding:3px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line);flex:none}
.tabs button{border:0;background:none;height:36px;padding:0 12px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.tabs button[aria-pressed="true"]{background:var(--glass-2);color:var(--fg)}
.stepper{display:flex;align-items:center;gap:8px}
/* −/+ держат зажатием: без меню «скопировать» и выделения на долгом касании */
[data-dv],[data-cs],[data-tv]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.st-btn{flex:none;width:48px;height:48px;border-radius:15px;border:1px solid var(--line);background:var(--glass);font-size:22px;font-weight:500;display:grid;place-items:center;line-height:1}
.st-btn:active{background:var(--glass-2)}
.st-btn:disabled{opacity:.35}
.st-val{flex:1;text-align:center;font:800 30px/1 var(--f-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.st-val small{font:500 14px/1 var(--f-body);color:var(--muted);letter-spacing:0;margin-left:4px}
.st-val em{display:block;margin-top:4px;font:500 12px/1 var(--f-body);font-style:normal;letter-spacing:0;color:var(--muted)}
.quick{display:flex;gap:6px}
.q{flex:1;min-width:0;height:40px;padding:0 4px;border-radius:12px;border:1px solid var(--line);background:none;font-weight:600;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.q[aria-pressed="true"]{background:var(--fg);color:#0a1024;border-color:transparent}
.result{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.result b{color:var(--fg);font-weight:600}
.custom{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.custom.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cc{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);min-width:0}
.cc .cn{font-size:11.5px;font-weight:600;color:var(--c);white-space:nowrap}
.cc .cv{font:800 20px/1 var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.cc .cu{font:500 11px/1 var(--f-body);color:var(--muted);margin-left:2px}
.cc .cb{display:flex;gap:4px}
.cc .cb button{width:36px;height:36px;border-radius:11px;border:1px solid var(--line);background:var(--glass);font-size:17px;line-height:1}
.tpl-row{display:flex;gap:6px;flex-wrap:wrap}
.tpl-row .q{flex:0 1 auto;padding:0 12px}
/* тембры сигнала: 3×2, иконка над подписью */
.timbres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.tb{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:64px;padding:9px 3px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);min-width:0;transition:background .25s,border-color .25s,color .25s}
.tb svg{flex:none;display:block;width:22px;height:22px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:color .25s,filter .25s,transform .25s}
.tb span{display:block;font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap}
.tb[aria-pressed="true"]{color:var(--fg);background:rgba(255,255,255,.09);border-color:color-mix(in srgb,var(--mood) 60%,transparent)}
.tb[aria-pressed="true"] svg{color:var(--mood)}
.tb.playing svg,.tb-one.playing svg{animation:tbRing 1.05s ease-out 2}
@keyframes tbRing{0%{filter:drop-shadow(0 0 0 transparent);transform:scale(1)}18%{filter:drop-shadow(0 0 8px var(--mood));transform:scale(1.12)}100%{filter:drop-shadow(0 0 0 transparent);transform:scale(1)}}
.tb-one{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.03);text-align:left}
.tb-one b{display:block;font-weight:600;font-size:14px}
.tb-one small{color:var(--muted);font-size:12.5px}
.tb-one .tb-inline{flex:none;display:grid;place-items:center;width:40px;height:40px;color:var(--mood)}
.tb-one svg{width:24px;height:24px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.vol{display:flex;align-items:center;gap:10px}
.vol svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vol .vol-v{flex:none;width:40px;text-align:right}
.tg-row{display:flex;gap:6px}
.chip-tg{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:44px;padding:0 6px;border-radius:12px;border:1px solid var(--line);background:none;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.chip-tg i{flex:none;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--dim);transition:background .2s,border-color .2s,box-shadow .2s}
.chip-tg[aria-pressed="true"]{color:var(--fg);border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06)}
.chip-tg[aria-pressed="true"] i{background:var(--mood);border-color:var(--mood);box-shadow:0 0 8px var(--mood)}
/* cookie: на телефоне — полоса над дисклеймером, «Начать» не перекрывает; закрывается плавно */
.ckf.shut{grid-template-rows:0fr;opacity:0;pointer-events:none}
.ckf.shut > div{overflow:hidden}
/* до показа (2 с) место уже занято (html.ck-need ставит inline-скрипт в <head>): карточка только проявляется, круг не сжимается */
html.ck-need .ckf.shut{grid-template-rows:1fr}
.ck{display:flex;align-items:center;gap:10px;margin-top:10px;padding:8px 8px 8px 14px;border-radius:16px;background:var(--card-solid);border:1px solid var(--card-line);font-size:12.5px;line-height:1.35;color:var(--muted)}
.ck span{flex:1;min-width:0}
.ck a{color:var(--fg);text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(255,255,255,.3)}
.ck button{flex:none;height:40px;padding:0 14px;border-radius:12px;border:0;background:var(--fg);color:#0a1024;font:700 13px/1 var(--f-display)}
body.focus .ckf{display:none}
.seg3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
/* таймер с гонгом: 4 варианта гонга 2×2 и диапазон «вразброс» (этап 7) */
.seg3.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
.custom.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.custom.rnd{margin-top:8px}
.custom.rnd+.s-hint{margin-top:8px}
#tChime{display:inline-flex;align-items:center;gap:6px;margin-top:6px}
#tChime svg{width:14px;height:14px;fill:currentColor}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:8px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.03);text-align:left}
.toggle b{display:block;font-weight:600;font-size:14px}
.toggle small{color:var(--muted);font-size:12.5px}
.toggle i{flex:none;width:44px;height:26px;border-radius:999px;background:rgba(255,255,255,.14);position:relative;transition:background .25s}
.toggle i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .25s}
.toggle[aria-pressed="true"] i{background:var(--mood)}
.toggle[aria-pressed="true"] i::after{transform:translateX(18px)}
.note{font-size:12.5px;color:var(--muted);margin:-6px 0 0;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04)}
.tip{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45;padding:12px 14px;border-radius:14px;background:linear-gradient(100deg,rgba(255,143,198,.14),rgba(91,108,255,.14));border:1px solid rgba(255,143,198,.28)}
.tip svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--noise);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.tip b{font-weight:600}
.linkb{background:none;border:0;padding:8px 0;color:var(--mood);font-weight:600;font-size:13px;white-space:nowrap}

/* ползунки под палец: дорожка 6 px, бегунок 26 px */
.panel input[type=range],.card input[type=range]{-webkit-appearance:none;appearance:none;width:100%;min-width:0;height:34px;margin:0;background:none;cursor:pointer;--p:50%;--rc:var(--mood);touch-action:pan-y}
.panel input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--rc) var(--p),rgba(255,255,255,.14) var(--p))}
.panel input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;background:#fff;border:0;box-shadow:0 2px 10px rgba(0,0,0,.45)}
.panel input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:rgba(255,255,255,.14)}
.panel input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--rc)}
.panel input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:0;box-shadow:0 2px 10px rgba(0,0,0,.45)}

/* аккордеоны */
.acc{gap:0;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.acc > summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;cursor:pointer;border-radius:16px}
.acc > summary::-webkit-details-marker{display:none}
.acc > summary .s-hint{margin-left:auto;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.acc > summary .s-name{flex:none}
.acc > summary::after{content:"";flex:none;width:8px;height:8px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(-45deg);transition:transform .25s;margin-left:2px}
.acc[open] > summary::after{transform:rotate(45deg)}
.acc.closing > summary::after{transform:rotate(-45deg)}
.acc-b{display:flex;flex-direction:column;gap:12px;padding:2px 14px 14px}

/* микшер шумов */
.bg-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.bg-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:62px;padding:8px 4px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:12.5px;font-weight:600;color:var(--muted);min-width:0;white-space:nowrap}
.bg-chip svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bg-chip[aria-pressed="true"]{color:var(--fg);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
.bg-chip[aria-pressed="true"] svg{color:var(--noise)}
.c-main .bg-row .bg-chip{min-height:46px;flex-direction:row;gap:6px;padding:0 4px;font-size:12.5px}
.c-main .bg-row .bg-chip svg{width:18px;height:18px}
.mix{display:flex;flex-direction:column;gap:6px}
.mix-row{display:grid;grid-template-columns:22px auto minmax(0,1fr) 40px;align-items:center;gap:10px;padding:2px 2px 2px 12px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid color-mix(in srgb,var(--c) 35%,transparent)}
.mix-row svg{width:22px;height:22px;fill:none;stroke:var(--c);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mix-n{font-weight:600;font-size:13.5px;white-space:nowrap}
.mix-row input{--rc:var(--c)}
.mix-x{width:40px;height:44px;border-radius:12px;border:0;background:none;color:var(--muted);font-size:14px}
.tabs.cat{display:flex;overflow-x:auto;padding-bottom:5px}
@supports not selector(::-webkit-scrollbar){.tabs.cat{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent}}
.tabs.cat::-webkit-scrollbar{height:4px}
.tabs.cat::-webkit-scrollbar-track{background:transparent;margin:0 10px}
.tabs.cat::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:4px}
.tabs.cat::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.45)}
.tabs.cat{overscroll-behavior-x:contain;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}
.tabs.cat.more-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.tabs.cat.more-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
.tabs.cat.more-l.more-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.tabs.cat button{flex:1 0 auto;padding:0 9px;font-size:13px}
.tabs.cat i{font-style:normal;display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--noise);color:#0a1024;font-size:11px;margin-left:3px}
.cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.cat-it{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:80px;padding:10px 4px 9px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);min-width:0;transition:background .25s,border-color .25s,color .25s}
.cat-it svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:filter .25s}
.cat-it span{font-size:12.5px;font-weight:600;line-height:1.15;text-align:center;max-width:100%;overflow-wrap:break-word;hyphens:auto}
.cat-it small{font-size:11px;color:var(--dim);margin-top:-4px}
.cat-it[aria-pressed="true"]{color:var(--fg);background:rgba(255,255,255,.09);border-color:color-mix(in srgb,var(--c) 55%,transparent)}
.cat-it[aria-pressed="true"] svg{color:var(--c);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) 60%,transparent))}
.cat-note{margin:0;font-size:12.5px;color:var(--muted)}
/* тёмный экран: подсказка видна первые 3 с, потом тихо «дышит» */
.dark-screen{position:fixed;inset:0;background:#000;z-index:1200;display:grid;place-items:end center;padding-bottom:calc(14vh + env(safe-area-inset-bottom,0px));cursor:pointer;animation:dsIn .6s ease both}
.dark-screen .ds-hint{display:flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;border:1px solid #1c2236;color:#8a93b5;font:500 15px/1 var(--f-body);animation:dsHint 6s ease-in-out 3s infinite;transition:color 1.2s,border-color 1.2s}
.dark-screen.dim .ds-hint{color:#4a5272;border-color:#151a2a}
.dark-screen .ds-hint svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes dsHint{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes dsIn{from{opacity:0}}

/* ---------- шторка ---------- */
/* В покое — нулевой высоты: невидимый fixed-слой во весь экран на iOS 26 в PWA укорачивал окно на строку
   состояния, и снизу 47pt не рисовалось (вкладки висели над низом, 28.10.2026). Высота сходит в 0 после затухания. */
.scrim{position:fixed;top:0;left:0;right:0;height:0;z-index:1050;background:rgba(3,6,16,.55);opacity:0;pointer-events:none;transition:opacity .4s,height 0s .4s}
.scrim.on{height:100%;opacity:1;pointer-events:auto;transition:opacity .4s}
.sheet{position:fixed;left:0;right:0;bottom:calc(0px - var(--vp-gap,0px));z-index:1051;margin-inline:auto;max-width:620px;max-height:calc(100svh - env(safe-area-inset-top,0px) - 28px);display:flex;flex-direction:column;background:var(--card-solid);border:1px solid var(--card-line);border-bottom:0;border-radius:26px 26px 0 0;box-shadow:0 -30px 80px -20px rgba(0,0,0,.75);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);padding-bottom:env(safe-area-inset-bottom,0px);transform:translateY(105%);visibility:hidden;transition:transform .5s var(--sheet-ease),visibility 0s .5s;overflow:hidden;color:var(--fg)}
.sheet.on{transform:none;visibility:visible;transition:transform .5s var(--sheet-ease),visibility 0s}
.grab{flex:none;height:24px;display:grid;place-items:center;touch-action:none;cursor:grab}
.grab i{width:40px;height:5px;border-radius:3px;background:rgba(255,255,255,.22)}
.sh-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:2px 18px 22px;scrollbar-width:thin}

/* ---------- окна: «Закончить практику?», «пришли по ссылке» ---------- */
.confirm-back{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:20px;background:rgba(3,6,16,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.confirm-card{width:min(400px,100%);display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:24px;background:var(--card-solid);border:1px solid var(--card-line);box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.rc-title{margin:0;font:700 19px/1.25 var(--f-display);letter-spacing:-.02em}
.rc-text{margin:0 0 6px;color:var(--muted);font-size:14.5px;line-height:1.5}
.ar-kicker{margin:0;font:600 11px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--mood)}
.ar-warn{margin:0 0 6px;padding:10px 12px;border-radius:12px;background:rgba(255,181,71,.1);border:1px solid rgba(255,181,71,.25);color:#ffd08a;font-size:13px}
.confirm-card .primary{height:52px;border:0;border-radius:999px;background:var(--mood);color:var(--on-accent);font:700 15px/1 var(--f-display)}
.rc-reset,.ar-setup{height:48px;border-radius:999px;border:1px solid var(--line);background:var(--glass);font-weight:600;font-size:14.5px}
.ar-back{display:flex;align-items:center;justify-content:center;height:44px;color:var(--muted);font-weight:600;font-size:14px;text-decoration:none}

/* ---------- ниже первого экрана (только веб) ---------- */
body[data-page="timer"] .home-down{display:none}
.home-more{max-width:760px;margin:0 auto;padding:40px var(--gut) 8px;border-top:1px solid var(--line)}
.hm-label{margin:0 0 14px;font:600 11px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.hm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.hm-grid a{min-width:0;overflow-wrap:normal;hyphens:manual;display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 14px;border-radius:16px;background:var(--card);border:1px solid var(--card-line);text-decoration:none;font-weight:600;font-size:clamp(13px,3.9vw,14px)}
.hm-grid a:hover{background:rgba(255,255,255,.07)}
.hm-grid svg{flex:none;width:22px;height:22px;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:400px){.hm-grid a{padding:10px 11px;gap:8px}}
.seo-home{max-width:760px;margin:0 auto;padding:36px var(--gut) 56px;color:var(--muted)}
.seo-home h1{margin:0 0 16px;font:700 clamp(24px,4vw,30px)/1.2 var(--f-display);letter-spacing:-.02em;color:var(--fg);text-wrap:balance}
.seo-home h2{margin:32px 0 10px;font:700 20px/1.25 var(--f-display);letter-spacing:-.015em;color:var(--fg);scroll-margin-top:16px}
.seo-home p,.seo-home li{max-width:68ch;line-height:1.6;font-size:15.5px}
/* типографика (botandvpn/rules/russian-text.md): абзацы — pretty, заголовки — balance; &nbsp; ставит сборка (lib/ru-typo.mjs) и nb() в home.js */
.seo-home p,.seo-home li,.p-head p,.hn-d,.hv-d,.hvh-sub,.sos-line,.sf-about p,.safe span{text-wrap:pretty}
/* короткие описания карточек: предложение — своей строкой (sentenceLines/snt) */
.snt{display:block}
.seo-home strong{color:var(--fg);font-weight:600}
.seo-home a{color:var(--fg);text-decoration-color:rgba(255,255,255,.3);text-underline-offset:2px}
.seo-home ul{padding-left:20px}
.seo-home .nw{white-space:nowrap}

/* ---------- невысокий телефон ---------- */
@media (max-width:699px) and (max-height:740px){
  body[data-page="timer"] .site-header{height:calc(50px + env(safe-area-inset-top,0px))}
  .seg button{height:34px}
  .nzb{width:40px;height:40px}
  .lent{padding-top:8px}
  .chev{bottom:23px}
  .cm{height:78px;width:100px;padding:8px 9px 7px}
  .cm.noise{width:140px}
  .cm .blob,.cm .ic-o,.cm .crs-ring{width:28px;height:28px}
  .cm .ic-o svg{width:16px;height:16px}
  .cm-name{font-size:13px}
  .c-main{min-height:48px}
  .c-main .c-opt{display:none}
  .go{height:54px}
  .gtick{width:54px;height:54px}
  .card{margin-top:8px}
  .fb .o{width:48px;height:48px}
  .fb.big .o{width:70px;height:70px}
  .fbar{padding-top:10px}
}

/* ---------- планшет, портрет: как телефон, настройки развёрнуты под кругом ---------- */
@media (min-width:700px) and (min-height:860px){
  body[data-page="timer"]{--gut:28px}
  .wrap{height:auto;min-height:var(--vh)}
  body[data-page="timer"] .site-header{height:calc(68px + env(safe-area-inset-top,0px))}
  body[data-page="timer"] .sh-brand img{height:30px}
  body[data-page="timer"] .sh-my,body[data-page="timer"] .sh-menu{font-size:14.5px;gap:8px;padding:0 16px}
  .np{max-width:240px}
  .switch{max-width:560px;margin:0 auto;width:100%}
  .lent{justify-content:safe center;padding-top:14px}
  .cm{width:112px;height:92px}
  .cm.noise{width:170px}
  .cm .blob,.cm .crs-ring{width:44px;height:44px}
  .cm-name{font-size:14.5px}
  .slot .s-hint.endc{display:none}
  .col{order:0}.ckf{order:1;width:min(560px,100%);margin:0 auto}.slot{order:2}.safe{order:3}
  .ck{margin-top:14px}
  .cardf{display:none}
  .stage{flex:none;height:clamp(260px,calc(var(--vh) - 690px),620px);transition:height .6s var(--ease)}
  body.focus .stage{height:calc(var(--vh) - 330px)}
  .seq span{height:34px;font-size:14px;padding:0 14px}
  .seq b.ar{display:inline}
  .goline .go{flex:none;min-width:300px}
  .slot{display:grid}
  .slot > div{padding-top:16px}
  /* Две колонки: главный блок (первый .sec, у шумов — каталог .mx-cat) занимает всю высоту своей колонки,
     остальные идут друг под другом в соседней. Лишняя высота уходит в последний ряд 1fr, промежутки — margin,
     чтобы пустые ряды не давали щелей. Каждый блок — свой ряд: два .sec в одном ряду ложатся друг на друга. */
  .slot .panel{background:var(--card);border:1px solid var(--card-line);border-radius:26px;padding:20px 20px 8px;backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(9,auto) 1fr;gap:0 22px;align-items:start}
  .slot .panel > *{margin-top:0;margin-bottom:12px}
  .slot .p-head{display:none}
  .slot .panel > *{grid-column:2}
  .slot .panel > .p-head + .sec{grid-column:1;grid-row:1 / -1}
  .slot .mixer > *{grid-column:1}
  .slot .mixer > .mx-cat{grid-column:2;grid-row:1 / -1}
  .slot .mixer > .p-head + .sec:not(.mx-cat){grid-column:1;grid-row:auto}
  .safe{margin-top:auto;padding-block:16px 12px;font-size:12px}
  .fbar{max-width:520px}
  .fb .o{width:60px;height:60px}
  .fb.big .o{width:88px;height:88px}
  .fb{font-size:12.5px}
  .sh-body{padding-inline:24px}
  .cat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .slot .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* планшет-портрет от 900 px (iPad Pro 12,9″, 1024×1366): разделы шапки видны (chrome.css) — «Мои практики» и «Меню»
   только значками, как на остальных страницах, иначе шапка шире экрана */
@media (min-width:900px) and (min-height:860px) and (orientation:portrait){
  body[data-page="timer"] .sh-my,body[data-page="timer"] .sh-menu{font-size:0;gap:0;padding:0;width:44px}
  body[data-page="timer"] .sh-nav a{white-space:nowrap}
}

/* ---------- альбом от 900 px и ПК: три колонки ---------- */
@media (min-width:900px) and (orientation:landscape) and (min-height:600px){
  body[data-page="timer"]{--gut:24px}
  .wrap{height:var(--vh);min-height:600px}
  body[data-page="timer"] .site-header{height:calc(64px + env(safe-area-inset-top,0px));gap:18px}
  body[data-page="timer"] .sh-brand img{height:28px}
  body[data-page="timer"] .sh-nav{display:none}
  body[data-page="timer"] .sh-my,body[data-page="timer"] .sh-menu{font-size:14px;gap:8px;padding:0 14px}
  .main{display:grid;grid-template-columns:220px minmax(0,1fr) 336px;grid-template-rows:minmax(0,1fr);gap:18px;padding-bottom:34px;transition:grid-template-columns .6s var(--ease),gap .6s}
  body.focus .main{grid-template-columns:0 minmax(0,1fr) 0;gap:0}
  .pickf,.cardf{display:none}
  .stage{flex:1;height:auto}
  .side{display:flex;flex-direction:column;gap:2px;align-self:center;position:relative;z-index:2;transition:opacity .45s,transform .6s var(--ease)}
  body.focus .side{opacity:0;transform:translateX(-40px);pointer-events:none;overflow:hidden}
  .slot{display:grid;align-self:start;min-height:0;max-height:100%;transition:opacity .45s,transform .6s var(--ease)}
  body.focus .slot{opacity:0;transform:translateX(40px);pointer-events:none;overflow:hidden}
  .slot > div{padding-top:0;min-height:0;overflow:visible}
  /* ПК 1366×900 подходит и под планшет-портрет — его правила здесь перекрываем явно */
  body.focus .stage{height:auto}
  .slot .panel{align-items:stretch;display:flex;flex-direction:column;gap:14px;max-height:calc(var(--vh) - 110px);overflow:auto;scrollbar-width:none;padding:18px;background:var(--card);border:1px solid var(--card-line);border-radius:24px;backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2)}
  .slot .panel::-webkit-scrollbar{display:none}
  .slot .p-head{display:flex}
  .slot .p-head p,.slot .p-close{display:none}
  .slot .p-head h2{font-size:18px}
  .slot .cat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .slot .cat-it{min-height:72px}
  .slot .tip{display:none}
  .seq b.ar{display:inline}
  .stf{grid-template-rows:1fr!important;opacity:1!important;pointer-events:auto!important}
  .goline .go{flex:none;min-width:260px}
  .keys{display:block}
  .safe{position:absolute;left:var(--gut);bottom:6px;max-width:min(330px,30vw);padding:0}
  .safe .down{display:none}
  .ckf{position:absolute;left:auto;right:0;bottom:34px;width:336px;z-index:7;transform:none}
  .ck{margin:0;flex-wrap:nowrap}
  .lbl{font:600 11px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0 0 6px 10px}
  .list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:0}
  /* списки колонки заполняет home.js — до этого место занято их высотой (6 настроений, 5 таймеров), иначе обе колонки
     прыгали при заполнении (CLS ПК ~0,1; аудит, этап 4). Поменялось число или высота пунктов — поправить здесь и ниже */
  #moodsL:empty{min-height:288px}#toolsL:empty{min-height:240px}
  .item button{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;background:none;border:0;padding:4px 10px;border-radius:16px;text-align:left}
  .item button:hover{background:rgba(255,255,255,.04)}
  .item .blob,.item .crs-ring{width:38px;height:38px}
  .item[aria-current="true"] .blob{transform:scale(1.18)}
  .i-txt{display:flex;flex-direction:column;min-width:0}
  .i-sub{font-size:11px;color:var(--dim);font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums}
  .i-name{font-weight:600;font-size:15px;color:var(--muted);transition:color .3s;white-space:nowrap}
  .item[aria-current="true"] .i-name{color:var(--fg)}
  .item[aria-current="true"] .i-sub{color:var(--mood)}
  .tool .ic-o{flex:none;width:34px;height:34px;margin:0 2px}
  .tool .ic-o svg{width:18px;height:18px}
  .tool[aria-current="true"] .ic-o{border-color:var(--mood);color:var(--fg)}
  .tool.noise .i-name{color:var(--fg)}
  .fb .o{width:56px;height:56px}
  .fb.big .o{width:80px;height:80px}
  /* шторка — справа, на всю высоту (как в десктоп-прототипе) */
  .sheet{left:auto;right:0;top:0;bottom:0;width:min(400px,100vw);max-width:none;max-height:none;margin:0;border-radius:26px 0 0 26px;border:1px solid var(--card-line);border-right:0;transform:translateX(105%);padding-top:env(safe-area-inset-top,0px)}
  .grab{display:none}
  .sh-body{padding:22px 22px 26px}
}
@media (min-width:1000px) and (orientation:landscape) and (min-height:600px){
  body[data-page="timer"] .sh-h1{margin-right:0}
  body[data-page="timer"] .sh-nav{display:flex;align-items:center;margin:0 auto 0 12px;gap:2px} /* разделы сразу за логотипом, как в прототипе */
  /* на 1000–1280 px «Как дышать?» и «Сон и звуки» встают в две строки — плотный интерлиньяж и по центру строки шапки */
  body[data-page="timer"] .sh-nav a{color:var(--muted);padding:8px 10px;font-size:14.5px;line-height:1.15;text-align:center}
  body[data-page="timer"] .sh-my,body[data-page="timer"] .sh-menu{font-size:0;gap:0;padding:0;width:44px}
}
@media (min-width:1280px) and (orientation:landscape) and (min-height:600px){
  body[data-page="timer"] .sh-my,body[data-page="timer"] .sh-menu{font-size:14px;gap:8px;padding:0 14px;width:auto}
  .main{grid-template-columns:260px minmax(0,1fr) 370px}
  .ckf{width:370px}
}

/* ---------- ПК от 1181 px: раскладка десктоп-прототипа (prototype/aura-dark.html) ----------
   круг фиксированного размера по высоте окна, настроения дугой, панель с описанием, cookie — слева внизу */
@media (min-width:1181px) and (orientation:landscape) and (min-height:600px){
  body[data-page="timer"]{--gut:clamp(16px,2.4vw,36px);--d:clamp(260px,calc(100svh - 330px),470px)}
  body.focus[data-page="timer"]{--d:clamp(260px,calc(100svh - 300px),680px)}
  /* шапка — размеры прототипа: логотип 34 px, разделы 15 px через 22 px, 30 px от логотипа */
  body[data-page="timer"] .site-header{height:calc(76px + env(safe-area-inset-top,0px));gap:18px}
  body[data-page="timer"] .sh-brand img{height:34px}
  body[data-page="timer"] .sh-nav{margin-left:1px;gap:0}
  body[data-page="timer"] .sh-nav a{font-size:15px;padding:8px 11px}
  body[data-page="timer"] .sh-nav a:hover{color:var(--fg);background:none}
  .main{grid-template-columns:270px minmax(0,1fr) 370px;gap:20px;align-items:center;padding-block:4px 30px}
  .col{justify-content:center;gap:16px}
  .stage,body.focus .stage{flex:none;height:var(--d);container-type:normal;transition:height .6s var(--ease)}
  .dial,body.focus .dial{width:var(--d);height:var(--d);transition:width .6s var(--ease),height .6s var(--ease)}
  .aura{width:210%;height:210%}
  .lens{width:46%;height:46%;gap:.8cqw}
  .l-label{font-size:4.4cqw}
  .l-num{font-size:17cqw}
  .l-num.sm{font-size:10cqw}
  .l-next{font-size:2.9cqw;max-width:86%}
  .seq{padding-top:0;min-height:34px}
  .seq span{height:34px;font-size:14px;padding:0 14px}
  .strow{padding-top:0}
  .goline{padding-top:0}
  .go{height:62px;font-size:17px;padding:0 32px 0 24px}
  .gtick{width:62px;height:62px}
  .side{gap:6px;align-self:center}
  .lbl{font-size:11.5px;margin:0 0 6px 12px}
  .list{gap:2px;margin-bottom:14px}
  #moodsL:empty{min-height:382px}#toolsL:empty{min-height:268px}
  .item{transform:translateX(var(--x,0px));transition:transform .5s}
  .item button{gap:14px;padding:6px 10px;border-radius:18px;min-height:0}
  .item .blob{width:50px;height:50px;transition:width .3s,height .3s,margin .3s,transform .35s}
  .item .crs-ring{width:50px;height:50px}
  .item[aria-current="true"] .blob{width:60px;height:60px;margin:-5px;transform:none}
  .i-sub{font-size:12px}
  .i-name{font-size:16px}
  .tool .ic-o{width:40px;height:40px;margin:0 5px}
  .tool .ic-o svg{width:20px;height:20px}
  .tool .i-name{font-size:15px}
  .slot{align-self:start;margin-top:clamp(0px,calc(8vh - 40px),40px)}
  .slot .panel{padding:20px;gap:15px;border-radius:26px}
  .slot .p-head p{display:block}
  .slot .p-head h2{font-size:20px}
  .safe{left:var(--gut);bottom:10px;max-width:min(560px,42vw);font-size:11.5px}
  /* в практике по центру низа — кнопки «Стоп … Настройки» (до 520 px): строка кончается левее них */
  body.focus .safe{max-width:min(560px,calc(50% - 260px - var(--gut) - 24px))}
  .ckf{left:var(--gut);right:auto;bottom:40px;width:auto;max-width:min(420px,calc(100% - 32px))}
  .ck{padding:12px 12px 12px 16px;border-radius:18px;font-size:13px;box-shadow:0 20px 50px -18px rgba(0,0,0,.7)}
  .ck button{height:38px;padding:0 16px}
}
/* ноутбуки пониже: левая колонка компактнее, чтобы влезала */
@media (min-width:1181px) and (orientation:landscape) and (min-height:600px) and (max-height:820px){
  .side{gap:2px}
  .list{margin-bottom:8px;gap:0}
  #moodsL:empty{min-height:264px}#toolsL:empty{min-height:207px}
  .item button{padding:3px 10px;gap:12px}
  .item .blob,.item .crs-ring{width:38px;height:38px}
  .item[aria-current="true"] .blob{width:46px;height:46px;margin:-4px}
  .i-name{font-size:15px}
  .i-sub{font-size:11px}
  .tool .ic-o{width:34px;height:34px;margin:0 2px}
  .tool .ic-o svg{width:18px;height:18px}
  .lbl{margin-bottom:4px}
}

/* ---------- установленное приложение: экран без текста, внизу 4 вкладки ---------- */
html.is-app body[data-page="timer"] .mk{display:none!important}
/* верх экрана — внутри шапки (её высота включает safe-area-inset-top), поэтому здесь вычитаем только низ */
html.is-app .wrap{height:calc(100svh + var(--vp-gap,0px) - env(safe-area-inset-bottom,0px) - var(--nav-h,54px) - 10px);min-height:480px;transition:height .5s var(--ease)}
/* практика идёт (body.focus: отсчёт, дыхание, пауза) — вкладки уезжают вниз, экран занимает их место; после — выезжают обратно */
html.is-app body[data-page="timer"] .app-nav{transition:transform .5s var(--ease),visibility 0s}
html.is-app body.focus[data-page="timer"] .app-nav{transform:translateY(100%);visibility:hidden;transition:transform .5s var(--ease),visibility 0s .5s}
html.is-app body.focus .wrap{height:calc(100svh + var(--vp-gap,0px) - env(safe-area-inset-bottom,0px) - 10px)}

@media (prefers-reduced-motion:reduce){
  .np .np-pp::after{animation:none;opacity:.6}
  .blob,.blob.vz svg,.eq i,.down svg,.chev svg,.tb.playing svg,.tb-one.playing svg,.dark-screen .ds-hint{animation:none}
  .chev svg{opacity:.8}
  body[data-page="timer"] *,body[data-page="timer"] *::before,body[data-page="timer"] *::after{transition-duration:.01ms!important}
}

/* ---------- темп на чипах фаз и «Время | Цикл» (11.10.2026) ---------- */
/* чип до старта — кнопка; раскрытый — «− Выдох 8 +» */
.seq small.w{font:inherit;color:inherit}
.seq .tp{flex:none;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 9px 0 11px;border-radius:999px;background:var(--card);border:1px solid var(--card-line);font:600 13px/1 var(--f-body);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.seq .tp i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.seq .tp .tcar{width:9px;height:9px;margin-left:1px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.5;transition:opacity .2s}
@media (hover:hover){.seq .tp:hover{color:var(--fg);border-color:color-mix(in srgb,var(--c) 45%,transparent)}.seq .tp:hover .tcar{opacity:1}}
.seq .tp:active{transform:scale(.96)}
.seq .tp-open{flex:none;display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 2px;border-radius:999px;background:color-mix(in srgb,var(--c) 14%,var(--card));border:1px solid color-mix(in srgb,var(--c) 60%,transparent);color:var(--fg);animation:tpIn .22s var(--ease)}
.seq .tp-open i{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}
.seq .tp-open .tw{font:600 13px/1 var(--f-body);color:var(--muted);margin-right:-1px}
.seq .tp-open em{font:700 13px/1 var(--f-display);font-style:normal;min-width:2.1ch;text-align:center;font-variant-numeric:tabular-nums}
@keyframes tpIn{from{transform:scale(.92);opacity:.4}to{transform:none;opacity:1}}
.tst{flex:none;width:26px;height:26px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.09);color:var(--fg);display:grid;place-items:center;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:background .15s,transform .1s}
.tst svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.tst:active{transform:scale(.88);background:rgba(255,255,255,.18)}
@media (hover:hover){.tst:hover{background:rgba(255,255,255,.16)}}
.seq .tlock{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--card-line);background:var(--card);color:var(--dim);padding:0;cursor:pointer}
.seq .tlock.on{color:#9ee9c5;border-color:rgba(158,233,197,.4)}
.seq .tlock svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* тесно: tight → «Задерж.» (home.js) → slim: рамка вместо точки → micro: только числа */
.seq.tight .tp{padding:0 7px 0 8px;font-size:12px;gap:5px}
.seq.tight .tp .tcar{display:none}
.seq.tight .tp-open .tw{display:none}
.seq.slim .tp i,.seq.slim>span:not(.tp-open) i{display:none}
.seq.slim .tp,.seq.slim>span:not(.tp-open){border-color:color-mix(in srgb,var(--c) 45%,transparent);padding:0 8px}
.seq.micro{gap:4px}
.seq.micro small.w{display:none}
.seq.micro .tp i,.seq.micro>span:not(.tp-open) i{display:inline-block}
/* «Время | Цикл» */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mini{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px 6px;border-radius:20px;background:var(--card);border:1px solid var(--card-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);min-width:0}
.mini>small{font-size:11px;font-weight:600;color:var(--dim);letter-spacing:.04em}
.mini .mrow{display:flex;align-items:center;justify-content:space-between;width:100%;gap:4px}
.mini b{font:700 18px/1 var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.mini b small{font:600 12px var(--f-body);color:var(--muted)}
.mini .tst{width:34px;height:34px}
/* карточка дыхания на телефоне — без рамки, звук пилюлями */
.card.bare{background:none;border:0;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;gap:12px;margin-top:10px}
.card.bare .c-main{min-height:0;padding:0}
.card.bare .c-sum{display:flex;justify-content:center;gap:8px}
.pill{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--muted);font:600 13px/1 var(--f-body);white-space:nowrap;min-width:0;max-width:50%;overflow:hidden;text-overflow:ellipsis}
.pill svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.pill:hover{color:var(--fg);border-color:rgba(255,255,255,.22)}}
/* ПК до старта: «Время | Цикл» вместо строки цикла */
.strow[hidden],.pcduo[hidden]{display:none!important}
.pcduo{width:min(380px,100%);margin:10px auto 0;position:relative;z-index:2}
.pcduo .mini{padding:9px 8px 8px}
.pcduo .mini b{font-size:19px}
/* пилюли карточки: ⚙ — круглая; шторка «Звук сигнала» без заголовка аккордеона */
.card.bare .c-sum{gap:6px}
.pill.pico{width:34px;padding:0;justify-content:center;flex:none}
.pill.pico svg{width:17px;height:17px}
#panel.only>details.acc>summary{display:none}
#panel.only>details.acc>.acc-b{padding-top:0}

/* ---------- свои ритмы и смеси (этап 6 плана функций, 11.10.2026) ---------- */
.cm.myr .star{position:absolute;top:9px;right:9px;width:13px;height:13px;fill:var(--c1);stroke:none;opacity:.85}
.cm.myr .cm-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.cm.myr-all{justify-content:flex-end;border-style:dashed;text-decoration:none;color:inherit}
.cm.myr-all .cm-name{color:var(--fg)}
.pill.pstar svg{fill:none}
.pill.pstar.on{color:#06231a;background:var(--mood);border-color:transparent}
.pill.pstar.on svg{fill:currentColor}
.my-sec{gap:8px}
.my-sec .s-name{display:inline-flex;align-items:center;gap:6px}
.my-sec .s-name .star{width:14px;height:14px;fill:var(--mood);stroke:none}
.my-row .q{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.my-ed{display:flex;gap:6px;align-items:center}
.my-ed label{flex:none;font-size:12.5px;color:var(--muted)}
.my-ed input{flex:1;min-width:0;height:40px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--fg);font:500 14px var(--f-body)}
.my-ed input:focus{outline:none;border-color:color-mix(in srgb,var(--mood) 70%,transparent)}
.my-ed .q{flex:none;padding:0 12px}
.my-ed .my-del{color:#ff9d9d}
.my-save{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;border-radius:14px;border:1px dashed color-mix(in srgb,var(--mood) 55%,transparent);background:color-mix(in srgb,var(--mood) 8%,transparent);color:var(--fg);text-align:left}
.my-save .star{width:20px;height:20px;flex:none;fill:none;stroke:var(--mood);stroke-width:1.7;stroke-linejoin:round}
.my-save span{display:flex;flex-direction:column;gap:2px}
.my-save b{font-weight:600;font-size:14px}
.my-save small{font-size:12px;color:var(--muted)}
.mx-play .s-row>.s-hint{display:inline-flex;align-items:center;gap:10px}
.mx-save{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--noise) 50%,transparent);background:none;color:var(--noise);font:600 12.5px/1 var(--f-body)}
.mx-save .star{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.mx-save.on{background:color-mix(in srgb,var(--noise) 16%,transparent)}
.mx-save.on .star{fill:currentColor}
.cat-lbl{grid-column:1/-1;margin:4px 0 0;display:flex;align-items:center;gap:6px;font:600 11px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.cat-lbl .star{width:13px;height:13px;fill:var(--noise);stroke:none}
.cat-it.mymix{border-color:color-mix(in srgb,var(--noise) 30%,transparent);background:color-mix(in srgb,var(--noise) 6%,transparent);padding-inline:2px}
.cat-it.mymix span{font-size:11.5px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.cat-it.mymix small{text-align:center;line-height:1.2}
.ar-save{display:inline-flex;align-items:center;justify-content:center;gap:7px;color:var(--mood);border-color:color-mix(in srgb,var(--mood) 45%,transparent)}
.ar-save .star{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.ar-save:disabled{border-style:dashed}
.htoast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 30svh);transform:translate(-50%,-12px);z-index:90;display:flex;align-items:center;gap:12px;width:max-content;max-width:min(92vw,440px);padding:11px 14px 11px 16px;border-radius:16px;background:rgba(14,20,44,.96);border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.45);color:var(--fg);font:500 14px/1.35 var(--f-body);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.htoast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.htoast span{min-width:0;overflow-wrap:anywhere}
.htoast button{flex:none;background:none;border:0;padding:4px 2px;color:var(--mood);font:700 14px var(--f-body)}
@media (prefers-reduced-motion:reduce){.htoast{transition:none}}
/* таймер с гонгом и шумы (15.10.2026): шаг гонга, подвкладки смесей, «Поделиться», 4-7-8 под звук */
.ge-row{display:flex;align-items:center;gap:8px;margin-top:8px}
.ge-row .quick{flex:1}
.ge-row .q{min-width:0}
.mx-grp{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}
.mx-grp button{height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);font:600 12.5px/1 var(--f-body)}
.mx-grp button[aria-pressed="true"]{color:var(--fg);border-color:color-mix(in srgb,var(--noise) 60%,transparent);background:color-mix(in srgb,var(--noise) 16%,transparent)}
.mx-grp+.cat-note{grid-column:1/-1;margin:0}
.mx-share{width:30px;padding:0;justify-content:center}
.mx-share .shr{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.b478{flex:none;display:inline-flex;align-items:center;gap:8px;height:58px;padding:0 18px 0 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--noise) 45%,var(--line));background:var(--card);color:var(--fg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .15s}
.b478 svg{width:22px;height:22px;fill:none;stroke:var(--noise);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.b478 span{display:flex;flex-direction:column;align-items:flex-start;font:700 15px/1.05 var(--f-display);font-variant-numeric:tabular-nums}
.b478 small{font:500 11.5px/1.2 var(--f-body);color:var(--muted)}
.b478:active{transform:scale(.96)}
@media (max-width:560px){ .b478{height:54px;padding:0 14px 0 12px} }
/* 360 px: «Включить звук» и «4-7-8» в одну строку — без иконки, поля уже */
@media (max-width:380px){ .b478 svg{display:none} .b478{padding:0 14px} .goline .go:has(+.b478){padding:0 18px 0 16px} }

/* ---------- Зарядка для глаз (16.10.2026, прототип marketing/home-eyes/) ----------
   Практика — оверлей eyes-view (eyes.css грузит сам скрипт); базу .hold-overlay на главной даём здесь (site.css тут нет). */
.hold-overlay{position:fixed;inset:0;z-index:1200;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#010207;color:var(--fg);outline:none;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.hold-overlay[hidden]{display:none}
html.hold-running,html.hold-running body{overflow:hidden}
/* демо-точка в круге до старта: ядро + ореол цвета «Глаз», плывёт за линзой */
.eyd{position:absolute;left:50%;top:50%;width:0;height:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .8s var(--ease);will-change:transform}
.eyd.on{opacity:1}
.eyd::before{content:"";position:absolute;left:-9cqw;top:-9cqw;width:18cqw;height:18cqw;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,#4fe3d0 55%,transparent),color-mix(in srgb,#4fe3d0 14%,transparent) 55%,transparent)}
.eyd b{position:absolute;left:-2.2cqw;top:-2.2cqw;width:4.4cqw;height:4.4cqw;border-radius:50%;background:#e9f0ff;box-shadow:0 0 2px 1px rgba(233,240,255,.6)}
/* вариант: три плитки «Быстрая 1 мин · Полная 4 мин · Физминутка 2 мин» */
.eyv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;max-width:420px;margin:0 auto}
.eyv button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:54px;padding:0 4px;border-radius:16px;border:1px solid var(--line);background:var(--card);color:var(--muted);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .25s,color .25s,border-color .25s,transform .15s}
.eyv b{font:700 14.5px/1 var(--f-body);white-space:nowrap}
.eyv small{font:500 12px/1 var(--f-body);color:var(--dim)}
.eyv button[aria-pressed="true"]{color:var(--fg);border-color:color-mix(in srgb,var(--mood) 70%,transparent);background:color-mix(in srgb,var(--mood) 14%,var(--card));box-shadow:0 0 22px -8px var(--mood)}
.eyv button[aria-pressed="true"] small{color:var(--mood)}
@media (hover:hover){.eyv button:hover{color:var(--fg)}}
.eyv button:active{transform:scale(.97)}
/* после зарядки: «Напомнить об отдыхе глаз?» на месте плиток */
.eyask{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;max-width:440px;margin:0 auto;text-align:center}
.eyask-q{margin:0;font:700 14px/1.2 var(--f-display)}
.eyask-ch{display:flex;gap:6px;width:100%}
.eyask-ch .q{height:38px;font-size:13px;background:var(--card);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.eyask-ch .q[aria-pressed="true"],.eyask-ch .q.active{background:var(--mood);color:var(--on-accent);border-color:transparent}
.eyask-n{margin:0;font-size:12px;line-height:1.4;color:var(--muted);max-width:44ch;text-wrap:balance}
.rm-note a,.rm-pomo{color:var(--fg);text-decoration:underline;text-underline-offset:2px}
.rm-pomo{background:none;border:0;padding:0;font:inherit;cursor:pointer}
/* пилюли: голос (значок, выкл. — перечёркнут), «Напоминать» (вкл. — цвет настроения, сработало — тёплая) */
.pill.pvoice{position:relative}
.pill.pvoice:not(.on)::after{content:"";position:absolute;width:20px;height:1.7px;background:currentColor;transform:rotate(-45deg);border-radius:2px}
.pill.pvoice.on{color:var(--fg);border-color:color-mix(in srgb,var(--mood) 55%,transparent)}
.pill.p-remind .pl{overflow:hidden;text-overflow:ellipsis}
.pill.p-remind.on{color:var(--fg);border-color:color-mix(in srgb,var(--mood) 55%,transparent)}
.pill.p-remind.on svg{color:var(--mood)}
.pill.p-remind.fired{color:#ffd27a;border-color:color-mix(in srgb,#ffd27a 60%,transparent);animation:eyPulse 2.4s var(--ease) infinite}
@keyframes eyPulse{50%{box-shadow:0 0 0 5px color-mix(in srgb,#ffd27a 14%,transparent)}}
/* «Проектор» у физминутки — тёплый, как светлячок */
.gtick.eproj{color:#ffe14a;border-color:color-mix(in srgb,#ffe14a 45%,transparent)}
/* шторка: варианты с описанием, список упражнений, срок напоминания */
.eyo{display:flex;flex-direction:column;gap:6px}
.eyo button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.03);text-align:left;color:var(--fg)}
.eyo button>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.eyo b{font:600 14px/1.2 var(--f-body)}
.eyo small{font-size:12.5px;line-height:1.4;color:var(--muted)}
.eyo i{flex:none;width:18px;height:18px;border-radius:50%;border:1.6px solid var(--line)}
.eyo button[aria-pressed="true"]{border-color:color-mix(in srgb,var(--mood) 60%,transparent);background:color-mix(in srgb,var(--mood) 10%,transparent)}
.eyo button[aria-pressed="true"] i{border-color:var(--mood);background:radial-gradient(circle,var(--mood) 0 4px,transparent 5px)}
.eyl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;counter-reset:ey}
.eyl li{display:flex;align-items:center;gap:10px;padding:6px 4px;font-size:13.5px;color:var(--muted);counter-increment:ey}
.eyl li i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--c)}
.eyl li span{flex:1;min-width:0;color:var(--fg)}
.eyl li span::before{content:counter(ey) ". ";color:var(--dim)}
.eyl li small{font-variant-numeric:tabular-nums;color:var(--dim)}
.rq{flex-wrap:wrap}
.rq .q{flex:1 0 calc(33% - 6px)}
.rq .q.active{background:var(--fg);color:#0a1024;border-color:transparent}
/* Помодоро: в перерыве — «Зарядка для глаз» рядом со статусом */
.plus.eyb{display:inline-flex;align-items:center;gap:7px;color:var(--fg);border-color:color-mix(in srgb,#4fe3d0 55%,transparent);box-shadow:0 0 18px -6px #4fe3d0}
.plus.eyb[hidden]{display:none}
.plus.eyb svg{width:16px;height:16px;fill:none;stroke:#4fe3d0;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
@media (max-width:560px){.plus.eyb{width:40px;padding:0;justify-content:center}}

/* ---------- «Что нового» (marketing/novosti/, этап 3, 26.10.2026): метки рубрик — общие для home.css и site.css, менять в обоих.
   Цвет рубрики --rc: наука --au-in, тренд --au-warn, «Новое на сайте» --au-out, «К дате» --au-noise; надёжность --au-ok / --au-warn. ---------- */
.nv-r-nauka{--rc:var(--au-in)}
.nv-r-trend{--rc:var(--au-warn)}
.nv-r-sajt{--rc:var(--au-out)}
.nv-r-data{--rc:var(--au-noise)}
.nv-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--rc,var(--au-in));box-shadow:0 0 10px var(--rc,var(--au-in))}
.nv-meta{display:flex;align-items:center;gap:8px;min-width:0;font:600 12px/1.2 var(--f-body);color:var(--muted)}
.nv-meta time{margin-left:auto;font-weight:500;white-space:nowrap}
.nv-ev{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);font:600 12.5px/1 var(--f-body);color:var(--muted);white-space:nowrap}
.nv-ev::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ec,var(--au-warn))}
.nv-ev.is-nadezhno{--ec:var(--au-ok)}
.nv-ev.is-ostorozhno{--ec:var(--au-warn)}

/* блок «Что нового» на главной (вариант Б, DECISIONS п. 8): над «Ещё на сайте», разметку пишет генератор (templates/news.mjs) */
.home-news{max-width:760px;margin:0 auto;padding:40px var(--gut) 8px;border-top:1px solid var(--line)}
.vh-home + .home-news{border-top:0}
.home-news + .home-more{padding-top:32px}
.hn-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 14px}
.hn-head .hm-label{margin:0}
.hn-all{font:600 14px/1 var(--f-body);color:var(--accent);text-decoration:none;padding:6px 0}
.hn-all:hover{text-decoration:underline}
.hn-all .s{display:none}
.hn-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.hn-main{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:20px;text-decoration:none;color:var(--fg);
  background:radial-gradient(300px 180px at 100% 0%,color-mix(in srgb,var(--rc) 16%,transparent),transparent 70%),var(--card);border:1px solid var(--card-line)}
.hn-main:hover{background:radial-gradient(300px 180px at 100% 0%,color-mix(in srgb,var(--rc) 22%,transparent),transparent 70%),rgba(255,255,255,.07)}
.hn-t{font:700 16px/1.3 var(--f-display);letter-spacing:-.015em;text-wrap:balance}
.hn-d{font-size:13.5px;line-height:1.45;color:var(--muted)}
.hn-foot{display:flex;align-items:center;gap:10px;margin-top:auto;font:600 13px/1 var(--f-body)}
.hn-go{margin-left:auto;color:var(--accent)}
.hn-list{display:flex;flex-direction:column;padding:2px 16px;border-radius:20px;background:var(--card);border:1px solid var(--card-line)}
.hn-row{display:flex;flex-direction:column;gap:6px;padding:14px 0;text-decoration:none;color:var(--fg)}
.hn-row + .hn-row{border-top:1px solid var(--line)}
.hn-row .hn-t{font-size:13.5px;line-height:1.35}
.hn-row:hover .hn-t{text-decoration:underline;text-underline-offset:3px}
@media (min-width:700px){
  .hn-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .hn-main{padding:20px;gap:12px}
  .hn-t{font-size:19px}
  .hn-d{font-size:14px;line-height:1.5}
  .hn-list{padding:4px 18px}
  .hn-row{padding:16px 0;gap:8px}
  .hn-row .hn-t{font-size:14px}
  .hn-all .s{display:inline}
}

/* ---------- «Лучшее на сайте» — витрина-плитки между роликом и «Что нового» (26.10.2026, вариант A «бенто со светом»,
   прототип marketing/home-vitrina/). Разметку пишет генератор (templates/vitrina.mjs), поведение — home.js:
   .hv-pre/.hv-in — волна появления при первом показе, .hv-live — заставки играют, только пока блок в окне;
   --mx/--my — свет за курсором, --rx/--ry — наклон (только мышь). Плитки всегда тёмные, как плеер ролика:
   цвета внутри .hv-* — литералы, светлая тема их не перекрашивает (KEEP_SEL в lib/theme-light.mjs). ---------- */
.home-vit{max-width:1040px;margin:0 auto;padding:48px var(--gut) 8px}
.hvh{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 24px;margin:0 0 20px}
.hvh-label{margin:0 0 10px;font:600 11px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--au-in)}
.hvh-t{margin:0;font:800 clamp(28px,5vw,50px)/1 var(--f-display);letter-spacing:-.045em;color:var(--fg);text-wrap:balance}
.hvh-t em{font-style:normal;background:linear-gradient(100deg,var(--au-in),var(--au-hold) 50%,var(--au-out));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hv-sheen 8s ease-in-out infinite alternate}
.hvh-sub{margin:0;max-width:34ch;font-size:14.5px;line-height:1.5;color:var(--muted)}
@keyframes hv-sheen{to{background-position:100% 0}}

.hv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:170px;grid-auto-flow:dense;gap:10px;perspective:1200px}
.hv-tl{position:relative;display:block;overflow:hidden;border-radius:22px;isolation:isolate;text-decoration:none;color:#f1f4ff;background:#0b1430;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .6s;box-shadow:0 20px 50px -30px rgba(0,0,0,.9)}
.hv-tl.hv-big{grid-column:span 2;grid-row:span 2}
.hv-tl.hv-wide{grid-column:span 2}
.hv-tl.hv-tall{grid-row:span 2}
/* рамка: тонкая линия + пятно света за курсором */
.hv-tl::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;padding:1px;opacity:.75;transition:opacity .4s;
  background:radial-gradient(260px 260px at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--c) 90%,#fff),transparent 60%),linear-gradient(rgba(255,255,255,.09),rgba(255,255,255,.09));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.hv-tl::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,10,24,0) 30%,rgba(6,10,24,.55) 62%,rgba(6,10,24,.94)),radial-gradient(400px 300px at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--c) 18%,transparent),transparent 70%)}
.hv-media{position:absolute;inset:0;overflow:hidden}
.hv-media picture{display:contents}
.hv-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transform-origin:var(--pos,50% 50%);transform:scale(var(--z,1.04));opacity:0;transition:transform 1.4s cubic-bezier(.16,1,.3,1),filter .8s,opacity .6s}
.hv-media img.hv-ok{opacity:1}
.hv-txt{position:absolute;z-index:3;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:6px;padding:13px}
.hv-k{display:inline-flex;align-items:center;gap:7px;font:600 10px/1.2 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--c) 80%,#fff)}
.hv-k::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.hv-t{font:700 14px/1.15 var(--f-display);letter-spacing:-.03em;text-wrap:balance;hyphens:manual}
.hv-d{display:none;font-size:13.5px;line-height:1.45;color:#c3cbe6;max-width:38ch}
.hv-big .hv-t{font-size:30px;letter-spacing:-.04em}
.hv-big .hv-d,.hv-wide .hv-d{display:block}
.hv-top{position:absolute;z-index:3;top:14px;left:14px;display:inline-flex;align-items:center;gap:6px;padding:7px 12px 7px 10px;border-radius:999px;
  font:800 11px/1 var(--f-display);letter-spacing:.08em;color:#071022;background:linear-gradient(110deg,#ffd27a,#fff2c9 40%,#ffb547 60%,#ffd27a);background-size:250% 100%;
  animation:hv-gold 3.2s linear infinite;box-shadow:0 6px 24px -6px rgba(255,181,71,.7)}
.hv-top svg{width:12px;height:12px;fill:currentColor}
@keyframes hv-gold{to{background-position:-250% 0}}
.hv-go{display:none;position:absolute;z-index:3;right:14px;bottom:14px;place-items:center;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.1);color:#f1f4ff;opacity:0;transform:translateX(-8px) scale(.8);
  transition:transform .5s cubic-bezier(.32,.72,0,1),opacity .3s,background .3s,color .3s}
.hv-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hv-tl:hover{box-shadow:0 30px 70px -30px color-mix(in srgb,var(--c) 55%,#000)}
.hv-tl:hover::before{opacity:1}
.hv-tl:hover .hv-media img{transform:scale(calc(var(--z,1.04) * 1.08));filter:saturate(1.15) brightness(1.08)}
.hv-tl:hover .hv-go{opacity:1;transform:none;background:#f1f4ff;color:#071022}
.hv-tl:focus-visible{outline:2px solid #7fd1ff;outline-offset:3px}

/* заставки плиток без фото: свечение плывёт, мотив живёт (играют только при .hv-live — блок в окне) */
.hv-art{background:radial-gradient(120% 90% at 50% 110%,color-mix(in srgb,var(--c) 30%,transparent),transparent 60%),linear-gradient(160deg,#0d1636,#060a18)}
.hv-art::before{content:"";position:absolute;width:120%;aspect-ratio:1;left:-10%;top:-30%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 32%,transparent),transparent);animation:hv-float 14s ease-in-out infinite alternate}
.hv-art svg{position:absolute;left:50%;top:44%;width:min(62%,170px);transform:translate(-50%,-50%);overflow:visible;fill:none;stroke:var(--c);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px var(--c))}
.hv-art .hv-fill{fill:var(--c);stroke:none}
@keyframes hv-float{to{transform:translate3d(18%,22%,0) scale(.85)}}
.hv-a-eye .hv-pupil{animation:hv-look 7s cubic-bezier(.4,0,.2,1) infinite}
@keyframes hv-look{0%,100%{transform:translate(0,0)}20%{transform:translate(-34px,0)}40%{transform:translate(34px,0)}60%{transform:translate(0,-18px)}80%{transform:translate(0,14px)}}
/* дневник: строки пишутся по очереди (по 12 % цикла), отметка — после последней, всё гаснет к 90 % */
.hv-a-diary .hv-ln{stroke-dasharray:140;stroke-dashoffset:140;animation:9s cubic-bezier(.4,0,.2,1) infinite}
.hv-a-diary .hv-ln:nth-child(1){animation-name:hv-w0}@keyframes hv-w0{0%,0%{stroke-dashoffset:140;opacity:1}12%,80%{stroke-dashoffset:0;opacity:1}90%,100%{stroke-dashoffset:0;opacity:0}}
.hv-a-diary .hv-ln:nth-child(2){animation-name:hv-w1}@keyframes hv-w1{0%,14%{stroke-dashoffset:140;opacity:1}26%,80%{stroke-dashoffset:0;opacity:1}90%,100%{stroke-dashoffset:0;opacity:0}}
.hv-a-diary .hv-ln:nth-child(3){animation-name:hv-w2}@keyframes hv-w2{0%,28%{stroke-dashoffset:140;opacity:1}40%,80%{stroke-dashoffset:0;opacity:1}90%,100%{stroke-dashoffset:0;opacity:0}}
.hv-a-diary .hv-ln:nth-child(4){animation-name:hv-w3}@keyframes hv-w3{0%,42%{stroke-dashoffset:140;opacity:1}54%,80%{stroke-dashoffset:0;opacity:1}90%,100%{stroke-dashoffset:0;opacity:0}}
.hv-a-diary .hv-mark{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:hv-mark 9s cubic-bezier(.4,0,.2,1) infinite}
@keyframes hv-mark{0%,56%{transform:scale(0)}60%{transform:scale(1.35)}63%,80%{transform:scale(1)}88%,100%{transform:scale(0)}}
.hv-a-core .hv-waist{transform-origin:100px 100px;animation:hv-suck 6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes hv-suck{0%,100%{transform:scaleX(1)}35%,65%{transform:scaleX(.72)}}
.hv-a-cyc .hv-hyp{stroke-dasharray:900;stroke-dashoffset:0;animation:hv-draw 7s cubic-bezier(.4,0,.2,1) infinite}
@keyframes hv-draw{0%{stroke-dashoffset:900}60%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-900}}
.home-vit:not(.hv-live) .hv-art *,.home-vit:not(.hv-live) .hv-art::before,.home-vit:not(.hv-live) .hvh-t em,.home-vit:not(.hv-live) .hv-top{animation-play-state:paused}

/* волна появления: .hv-pre ставит home.js, только если блок ещё не виден; без скрипта плитки видны сразу */
.home-vit.hv-pre .hv-tl{opacity:.001}
.home-vit.hv-in .hv-tl{animation:hv-rise .9s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--i) * 55ms)}
@keyframes hv-rise{from{opacity:.001;transform:translateY(28px) scale(.97);clip-path:inset(12% 0 0 0 round 22px)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 22px)}}

@media (min-width:760px){
  .hv-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:190px;gap:12px}
  .hv-txt{padding:16px 62px 15px 16px;gap:6px}
  .hv-k{font-size:11px;letter-spacing:.1em}
  .hv-t{font-size:clamp(16px,1.7vw,20px);letter-spacing:-.025em}
  .hv-big .hv-t{font-size:clamp(28px,3.6vw,44px);letter-spacing:-.04em}
  .hv-big .hv-txt{padding:22px 62px 20px 22px;gap:9px}
  .hv-tall .hv-d{display:block}
  .hv-go{display:grid}
}
@media (prefers-reduced-motion:reduce){
  .hv-tl,.hv-media img,.hv-go{transition:none}
  .home-vit .hv-tl,.hv-art *,.hv-art::before,.hvh-t em,.hv-top{animation:none!important}
  .hv-a-diary .hv-ln{stroke-dashoffset:0}.hv-a-diary .hv-mark{transform:none}
  .home-vit.hv-pre .hv-tl{opacity:1}
}

/* ПК: блоки под первым экраном без линий-разделителей, отделены воздухом (26.10.2026, по скриншоту владельца).
   .mk в селекторе — чтобы перебить border-top светлого слоя (light/home.css). На телефоне линии остаются. */
@media (min-width:760px){
  .home-vit{padding-top:80px}
  .home-news.mk,.home-more.mk{border-top:0;padding-top:80px}
  .home-news + .home-more.mk{padding-top:64px}
  .seo-home{padding-top:56px}
}