:root{--void:#07080C;--ice:#EAF4FA;--muted:#8A93A3;--screen:#BFD7FF;--cyan:#19E3FF;--magenta:#FF2BD6;--low:#FF453A;--line:rgba(234,244,250,.10);
 --dawn-bg:#C9D3DF;--dawn-ink:#141A24;--dawn-gold:#F2C98A;--display:'Oswald',system-ui,sans-serif;--sans:'Inter',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;
 --ease:cubic-bezier(.16,1,.3,1);--bar-h:calc(84px + env(safe-area-inset-bottom,0px));--kick:0;--hi:0;--energy:0;--beat:0;--bg:var(--void);--ink:var(--ice)}
*{margin:0;padding:0;box-sizing:border-box}html{background:var(--void);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow:hidden;height:100svh}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}.brand{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
/* комната (десктоп) и телефон */
.room{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--void)}.room-bg{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;filter:blur(42px) brightness(.32) saturate(1.2);opacity:0;transition:opacity 1.2s}.room-bg.on{opacity:1}
.phone{position:fixed;inset:0;z-index:1;background:var(--bg);overflow:hidden;color:var(--ink)}
@media (min-width:821px){.phone{inset:auto;left:50%;top:50%;width:420px;height:min(880px,92vh);transform:translate(-50%,-50%);border-radius:40px;box-shadow:0 40px 120px rgba(0,0,0,.6),inset 0 0 0 1px var(--line)}}
.screen{position:absolute;inset:0;display:none;flex-direction:column}.screen.on{display:flex;animation:wake .45s var(--ease)}@keyframes wake{from{opacity:0}}
.wall{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#07080C center/cover no-repeat}
/* строка состояния, как на телефоне: связь, оператор, сеть, заряд (блокировка и рабочий стол) */
.sb{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;height:22px;font:500 12px/1 var(--sans);color:var(--ice);letter-spacing:.01em;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.sb-l,.sb-r{display:flex;align-items:center;gap:6px}
.sig{display:inline-flex;align-items:flex-end;gap:1.5px;height:10px}.sig i{width:3px;border-radius:1px;background:var(--ice)}.sig i:nth-child(1){height:3.5px}.sig i:nth-child(2){height:5.5px}.sig i:nth-child(3){height:7.5px}.sig i:nth-child(4){height:10px;opacity:.32}
.bat{display:inline-flex;align-items:center;gap:6px}.bat i{width:22px;height:11px;border:1.5px solid rgba(234,244,250,.7);border-radius:3px;position:relative}.bat i::after{content:'';position:absolute;right:-4px;top:2.5px;width:2px;height:4px;background:rgba(234,244,250,.7);border-radius:1px}
.bat i::before{content:'';position:absolute;left:1.5px;top:1.5px;bottom:1.5px;width:2px;background:var(--low);border-radius:1px}.bat b{color:var(--low);font-weight:500}
.clock{font-family:var(--mono);font-weight:500;line-height:1}
/* блокировка: замок, дата, время — у верхнего края (лицо на обоях свободно); уведомление — в нижней трети; внизу фонарик, камера и полоска «вверх» */
#lock{justify-content:flex-start;padding:max(18px,env(safe-area-inset-top)) 18px max(26px,env(safe-area-inset-bottom));touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.lock-time{position:relative;display:flex;flex-direction:column;align-items:center;margin:12px 0 auto;text-shadow:0 2px 24px rgba(0,0,0,.5)}
.lock-time .lk{width:12px;height:15px;fill:none;stroke:var(--ice);stroke-width:1.6;opacity:.9;margin-bottom:6px}
.date{font:500 16px/1.2 var(--sans);color:var(--ice);opacity:.92}
#lockClock{font:500 clamp(4.6rem,23vw,6.2rem)/1 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:2px}
.lock-widget{display:flex;gap:10px;align-items:baseline;margin-top:8px}.lock-widget .brand{font-size:13px;color:var(--screen)}.lock-widget .mono{font-size:11px;color:var(--ice);opacity:.7}
.notif{position:relative;display:flex;gap:12px;align-items:center;width:100%;margin-bottom:14px;padding:12px;border-radius:18px;background:rgba(7,8,12,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);text-align:left;transform:translateY(20px);opacity:0;transition:transform .6s var(--ease),opacity .6s}
.notif.in{transform:none;opacity:1}.notif .av{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover}.notif .nb{flex:1;min-width:0;display:grid;grid-template-columns:1fr auto;gap:0 8px}.notif .nb b{font-weight:500}.notif .nb small{color:var(--muted);font-size:11px}.notif .nt{grid-column:1/3;color:var(--ice)}
.lock-bottom{position:relative;display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.lk-btn{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--ice);background:rgba(7,8,12,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line)}
.lk-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lock-hint{text-align:center;font:400 12px/1 var(--sans);letter-spacing:.02em;color:var(--ice);opacity:0;transition:opacity .8s}.lock-hint.in{opacity:.75}
.homebar{position:absolute;left:50%;bottom:8px;width:134px;height:5px;margin-left:-67px;border-radius:3px;background:rgba(234,244,250,.85)}
button.homebar::before{content:'';position:absolute;inset:-18px -26px}
/* рабочий стол: размытые обои, виджет «Батарея», сетка приложений, док */
#home{padding:max(18px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom));touch-action:none;-webkit-user-select:none;user-select:none}
.hwall{filter:blur(9px) brightness(.62) saturate(1.1);transform:scale(1.08)}
#home .sb{padding:0 6px}.sbt{font:500 14px/1 var(--sans);letter-spacing:0}
.home-body{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:20px;margin-top:16px;transition:transform .3s var(--ease),opacity .3s}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 8px;align-content:start}
.app{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;line-height:1.1;color:var(--ice);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.ico{position:relative;width:min(60px,15.5vw);aspect-ratio:1;border-radius:22%;display:grid;place-items:center;color:rgba(234,244,250,.88);background:color-mix(in srgb,var(--screen) 9%,rgba(7,8,12,.62));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);transition:transform .15s}
.ico svg{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.app:active .ico{transform:scale(.94)}
button.app{cursor:pointer}div.app{cursor:default}
.app.live .ico{padding:0;border-color:rgba(234,244,250,.3)}.app.live img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--low);color:#fff;font:500 12px/20px var(--sans);text-align:center;text-shadow:none}
.dots{display:flex;justify-content:center;gap:7px;margin:8px 0 14px}.dots i{width:6px;height:6px;border-radius:50%;background:rgba(234,244,250,.35)}.dots i.on{background:var(--ice)}
.dock{position:relative;display:flex;justify-content:space-around;margin:0 -4px 14px;padding:12px 10px;border-radius:30px;background:rgba(7,8,12,.42);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--line)}
.dock .app>span:last-child{display:none}
#home.launching .home-body,#home.launching .dock,#home.launching .dots{transform:scale(1.1);opacity:0}
/* чат (шапка, лента; пузыри, кружки и чипы — ниже, их рисует chat.js) и профиль — каркас, содержимое профиля — отдельная задача */
/* чат (шапка, лента; пузыри, кружки и чипы — ниже, их рисует chat.js) и профиль (содержимое — в конце файла) */
#chat{background:var(--bg);color:var(--ink)}
.top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:calc(56px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 16px 0;border-bottom:1px solid var(--line)}
.who{display:flex;align-items:center;gap:10px;text-align:left}.who .av{flex:none;width:36px;height:36px;border-radius:50%;object-fit:cover}
.who b{display:block;font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:16px;line-height:1.1}.who small{display:block;color:var(--muted);font-size:11px;letter-spacing:.04em}
.clock.small{font-size:14px;letter-spacing:.04em;color:var(--muted);text-shadow:none}
.feed{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;padding:12px 14px calc(var(--bar-h) + 12px);scrollbar-width:none}.feed::-webkit-scrollbar{display:none}
#profile{background:var(--bg)}
.back{position:absolute;z-index:3;left:14px;top:max(14px,env(safe-area-inset-top));width:40px;height:40px;border-radius:50%;background:rgba(7,8,12,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line)}
.back::before{content:'';position:absolute;left:16px;top:14px;width:9px;height:9px;border-left:2px solid var(--ice);border-bottom:2px solid var(--ice);transform:rotate(45deg)}
/* лента чата (chat.js): пузыри слева (KRITA) и справа (ты), «печатает…», кружок-трек, клип, чипы-ответы */
.feed>*{flex:none}
.msg{max-width:78%;padding:10px 12px;border-radius:18px;margin:6px 0;position:relative}
.msg.krita{align-self:flex-start;background:rgba(234,244,250,.07)}.msg.you{align-self:flex-end;background:rgba(191,215,255,.16)}
.msg .text{white-space:pre-line;overflow-wrap:break-word}
.msg.in{animation:pop .35s var(--ease)}@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}}
.tm{font-size:10px;color:var(--muted);display:block;text-align:right;margin-top:4px}
.typing{align-self:flex-start;display:inline-flex;gap:4px;padding:10px 12px;border-radius:18px;background:rgba(234,244,250,.07);margin:6px 0}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:dot 1.2s infinite}.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,80%,100%{opacity:.25}40%{opacity:1}}
/* кружок-трек без пузыря: петля-видео в круге внутри кольца (дорожка + дуга прогресса: --p, 0…1, на .circle задаёт плеер), подпись «название длина» */
.msg.circlemsg{padding:0;background:none;margin-bottom:12px}.circlemsg .cap{padding-left:4px}
.circle{width:200px;height:200px;border-radius:50%;overflow:hidden;position:relative;display:block}.circle video{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);border-radius:50%;object-fit:cover}
.ring{position:absolute;inset:0;width:100%;height:100%}.ring circle{fill:none;stroke-width:3}.ring .track{stroke:color-mix(in srgb,var(--screen) 28%,transparent);stroke-width:1.2}
.ring .arc{stroke:var(--screen);stroke-dasharray:301.6;stroke-dashoffset:calc(301.6*(1 - var(--p,0)));transform:rotate(-90deg);transform-origin:50% 50%}.circle.playing .ring .arc{stroke:var(--cyan)}
.pl{position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:50%;background:rgba(7,8,12,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.pl::after{content:'';position:absolute;left:18px;top:14px;border-left:14px solid var(--ice);border-top:9px solid transparent;border-bottom:9px solid transparent}.circle.playing .pl{opacity:0}
.cap{display:flex;gap:10px;align-items:baseline;margin-top:6px;font-size:13px}.cap .name{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em}.cap .len{color:var(--muted);font-size:12px}
.clipmsg{width:min(78%,300px)}.clipmsg .poster{position:relative;cursor:pointer}.clipmsg img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;background:var(--void)}
.clipmsg .cap{justify-content:space-between;align-items:center}.clipmsg .cap button{padding:6px 14px;border-radius:999px;border:1px solid var(--screen);color:var(--screen)}
.msg.act{padding:6px}.act-btn{padding:10px 18px;border-radius:12px;border:1px solid var(--screen);color:var(--screen);font-family:var(--display);text-transform:uppercase;letter-spacing:.08em}
.chips{flex:none;display:flex;gap:8px;padding:8px 14px max(12px,env(safe-area-inset-bottom,0px));overflow-x:auto}.chips:empty{display:none}
.chip{flex:none;padding:8px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--screen) 30%,transparent);background:color-mix(in srgb,var(--screen) 10%,transparent);white-space:nowrap}.chip:hover{background:color-mix(in srgb,var(--screen) 18%,transparent)}
/* панель плеера (player.js): стекло внизу телефона, выезжает при первом треке. Лента держит под неё отступ --bar-h и уходит под стекло; чипы (редкий случай — панель уже открыта) поднимаются над ней */
.bar{position:absolute;left:0;right:0;bottom:0;z-index:10;height:var(--bar-h);display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-template-rows:40px 20px;grid-template-areas:"cv meta ctl" "prog prog prog";align-items:center;column-gap:12px;row-gap:2px;
 padding:10px max(14px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));
 background:rgba(7,8,12,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);transition:transform .5s var(--ease)}
.bar[aria-hidden=true]{visibility:hidden;transform:translateY(100%)}
.phone:has(>.bar[aria-hidden=false]) .chips{margin-bottom:var(--bar-h)}
.bar .cv{grid-area:cv;position:relative;width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--void);box-shadow:0 0 0 1px var(--line)}
.bar .cv img{position:absolute;left:-14px;top:-8px;width:69px;height:69px}      /* середина обложки (лицо): без KRITA и номера сверху, без названия снизу */
.bar .meta{grid-area:meta;min-width:0}
.bar .title{font-family:var(--display);font-weight:500;font-size:15px;line-height:1.2;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .time{font-size:11px;line-height:1.4;letter-spacing:.04em;color:var(--muted)}.bar .cur{color:var(--ice)}
@media (max-width:350px){.bar{column-gap:8px}.bar .title{font-size:14px;letter-spacing:.04em}}      /* 320 px: «Родной человек» целиком */
/* кнопки нарисованы CSS: ‹ и › — треугольник с чертой, ▶ — треугольник, пауза — две черты (.on) */
.bar .ctl{grid-area:ctl;display:flex;align-items:center}
.bar .ctl button{position:relative;width:40px;height:40px;border-radius:50%;color:var(--ice);-webkit-tap-highlight-color:transparent;transition:background .2s,transform .15s}
@media (hover:hover){.bar .ctl button:hover{background:color-mix(in srgb,var(--ice) 10%,transparent)}.bar .ctl .tg:hover{background:var(--ice)}}.bar .ctl button:active{transform:scale(.92)}
.bar .ctl button::before,.bar .ctl button::after{content:'';position:absolute;top:13px;height:14px;background:currentColor}
.bar .prev::before{left:13px;width:2px}.bar .prev::after{left:17px;width:10px;clip-path:polygon(100% 0,0 50%,100% 100%)}
.bar .next::before{left:13px;width:10px;clip-path:polygon(0 0,100% 50%,0 100%)}.bar .next::after{left:25px;width:2px}
.bar .ctl .tg{color:var(--void);background:var(--ice)}
.bar .tg::before{left:15px;width:13px;clip-path:polygon(0 0,100% 50%,0 100%)}.bar .tg::after{display:none}
.bar .tg.on::before{left:14px;width:4px;clip-path:none;border-radius:1px}.bar .tg.on::after{display:block;left:22px;width:4px;border-radius:1px}
/* ползунок: дорожка — --ice на 22 % (чистый --line на стекле почти не виден), заливка --cyan (--v: 0…1 ставит плеер), поверх — прозрачный input range; заливка кончается под центром бегунка (его ход — от 5 до 100% − 5 px) */
.bar .prog{grid-area:prog;position:relative;height:20px}
.bar .prog::before,.bar .fill{content:'';position:absolute;left:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px}
.bar .prog::before{right:0;background:color-mix(in srgb,var(--ice) 22%,transparent)}.bar .fill{width:calc(5px + (100% - 10px)*var(--v,0));background:var(--cyan);pointer-events:none}
.bar .seek{position:absolute;inset:0;width:100%;height:100%;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.bar .seek::-webkit-slider-runnable-track{height:20px;background:transparent}.bar .seek::-moz-range-track{height:20px;background:transparent}
.bar .seek::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;margin-top:5px;border:0;border-radius:50%;background:var(--ice)}.bar .seek::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:var(--ice)}
/* строки песни (lyrics.js): в чат они не идут (панель и лист «Сейчас играет» — nowplaying.css). В комнате (десктоп) та же строка крупно слева или справа от телефона — «голос в голове»;
   при reduced motion анимации нет (общее правило ниже), строка просто стоит 4 с */
.room-lyrics{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.room-lyrics .rl{position:absolute;max-width:calc(50vw - 260px);font:600 clamp(2.4rem,4vw,4rem)/1.08 var(--display);text-transform:uppercase;letter-spacing:.02em;white-space:pre-line;overflow-wrap:anywhere;color:var(--ice);opacity:.9;animation:rl 4s ease-in-out both}
.room-lyrics .rl.l{right:calc(50% + 240px);text-align:right}.room-lyrics .rl.r{left:calc(50% + 240px);text-align:left}
@keyframes rl{0%{opacity:0;transform:translateY(14px)}20%,75%{opacity:.9;transform:none}100%{opacity:0;transform:translateY(-10px)}}
@media (max-width:820px){.room-lyrics{display:none}}
/* профиль: обои (video.wall) — живой портрет на весь экран, текст — в нижней половине. Лицо (глаза ≈ 31 %, подбородок ≈ 52 % высоты) свободно: верхние 52 % держит ::before, затемнение — только
   снизу, и оно часть прокручиваемого .prof-in: едет вместе с текстом, под ним всегда тёмный фон. --pad — нижний отступ под панель плеера и плашку согласия: проценты считаются от высоты без него,
   поэтому к «этажу» (52 %) добавлена его доля, а .prof-in (48 % высоты экрана) заходит на отступ отрицательным полем — фон доходит до края, а на экране без прокрутки всё сходится ровно в высоту */
.prof{--pad:max(20px,env(safe-area-inset-bottom,0px));position:relative;z-index:1;flex:1;min-height:0;overflow:auto;padding-bottom:var(--pad);scroll-padding-bottom:var(--pad);scrollbar-width:none}.prof::-webkit-scrollbar{display:none}
.phone:has(>.bar[aria-hidden=false]) .prof{--pad:calc(var(--bar-h) + 16px)}
.prof::before{content:'';display:block;height:calc(52% + var(--pad)*.52)}
.prof-in{min-height:calc(48% + var(--pad)*.48);margin-bottom:calc(var(--pad)*-1);display:flex;flex-direction:column;justify-content:flex-end;padding:28px 20px var(--pad);
 background:linear-gradient(to bottom,transparent,rgba(7,8,12,.62) 40px,rgba(7,8,12,.86) 120px,rgba(7,8,12,.92));text-shadow:0 1px 14px rgba(0,0,0,.55)}
.prof-in>*{flex:none}
.prof-name{font:600 clamp(2.4rem,12vw,3rem)/1 var(--display);letter-spacing:.08em;text-transform:uppercase}
.prof-line{margin-top:8px;font-size:14px;color:var(--screen)}
.prof-legend{margin-top:12px;font-size:17px;font-weight:500;line-height:1.3}
.prof-text{margin-top:6px;font-size:15px;line-height:1.45;text-wrap:pretty;color:color-mix(in srgb,var(--ice) 78%,transparent)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:14px;border-block:1px solid var(--line)}
.facts>div{padding:10px 0 9px;text-align:center}.facts>div+div{border-left:1px solid var(--line)}
.facts dt{font:500 1.75rem/1 var(--display);letter-spacing:.02em}.facts dt.mono{font-family:var(--mono);color:var(--low)}
.facts dd{margin-top:5px;font-size:12px;color:var(--muted)}
.prof-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
/* тихая кнопка-«таблетка»: контур, без заливки и без значков */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border:1px solid color-mix(in srgb,var(--screen) 42%,transparent);border-radius:999px;background:rgba(7,8,12,.35);
 color:var(--ice);font:500 14px/1 var(--sans);letter-spacing:.02em;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background .2s,border-color .2s}
@media (hover:hover){.btn:hover{background:color-mix(in srgb,var(--screen) 14%,transparent);border-color:var(--screen)}}
.btn:active{background:color-mix(in srgb,var(--screen) 22%,transparent)}.btn:disabled{opacity:.5;cursor:default}
.sub{margin-top:14px}.sub-row{display:flex;gap:10px}
.sub-row input{flex:1;min-width:0;height:48px;padding:0 18px;border:1px solid color-mix(in srgb,var(--screen) 42%,transparent);border-radius:999px;background:rgba(7,8,12,.5);color:var(--ice);font:400 16px/1 var(--sans)}
.sub-row input::placeholder{color:var(--muted)}.sub-row input:-webkit-autofill{-webkit-text-fill-color:var(--ice);box-shadow:0 0 0 40px #10141c inset}
.sub-row input[aria-invalid=true]{border-color:var(--low)}.sub-row .btn{flex:none;height:48px}
.sub-note{margin-top:10px;font-size:12px;line-height:1.45;color:var(--muted)}.sub-note a{color:var(--screen);text-underline-offset:2px}
.sub-msg{margin-top:10px;font-size:14px;color:var(--screen)}.sub-msg.err{color:var(--low)}
.sub.sent .sub-row,.sub.sent .sub-note{display:none}.sub.sent .sub-msg{margin-top:0;font-size:16px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.links{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.links:empty{display:none}
/* просмотр клипа (viewer.js): тёмный слой на весь экран; на десктопе видео 16:9 по центру, не больше 86 % окна, на телефоне — во всю ширину. Крестик нарисован CSS */
.viewer{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;background:rgba(3,4,7,.96)}.viewer:focus{outline:none}
.viewer[aria-hidden=false]{display:flex;animation:wake .3s var(--ease)}
.viewer video{display:block;width:min(86vw,calc(86vh*16/9));aspect-ratio:16/9;background:#000;border-radius:14px;box-shadow:0 30px 100px rgba(0,0,0,.7)}
@media (max-width:820px){.viewer video{width:100%;border-radius:0;box-shadow:none}}
.v-close{position:absolute;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));width:44px;height:44px;border-radius:50%;background:rgba(7,8,12,.55);border:1px solid var(--line)}
.v-close::before,.v-close::after{content:'';position:absolute;left:50%;top:50%;width:18px;height:2px;margin:-1px 0 0 -9px;border-radius:1px;background:var(--ice);transform:rotate(45deg)}.v-close::after{transform:rotate(-45deg)}
/* плашка согласия на статистику (consent.js): полоса стекла внизу телефона, над панелью плеера, если она есть. consent.js отдаёт телефону её высоту (--ck-h): чипы, лента и профиль встают над плашкой */
.phone{--ck-b:max(12px,env(safe-area-inset-bottom,0px))}.phone:has(>.bar[aria-hidden=false]){--ck-b:calc(var(--bar-h) + 8px)}
.cookie{position:absolute;left:12px;right:12px;bottom:var(--ck-b);z-index:11;display:flex;flex-direction:column;gap:8px;padding:10px 14px;border-radius:16px;background:rgba(7,8,12,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
 border:1px solid var(--line);font-size:13px;line-height:1.35;animation:ck-in .5s var(--ease);transition:bottom .5s var(--ease)}
@keyframes ck-in{from{opacity:0;transform:translateY(14px)}}
.ck-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ck-row button{min-height:38px;border:1px solid color-mix(in srgb,var(--screen) 42%,transparent);border-radius:999px;font-size:13px;font-weight:500}
@media (hover:hover){.ck-row button:hover{background:color-mix(in srgb,var(--screen) 14%,transparent);border-color:var(--screen)}}
.phone:has(>.cookie:not([hidden])) .chips{margin-bottom:calc(var(--ck-b) + var(--ck-h,0px))}
.phone:has(>.cookie:not([hidden])) .feed{padding-bottom:max(calc(var(--bar-h) + 12px),calc(var(--ck-b) + var(--ck-h,0px) + 12px))}
.phone:has(>.cookie:not([hidden])) .prof{--pad:calc(var(--ck-b) + var(--ck-h,0px) + 16px)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}