/* Песочница веб-версии: приветственная страница (латунь и глубина перископа) + закрытая читалка (палитры нынешней читалки).
   Слой: полоса песочницы сверху → экран. Читалка на широком экране: статья колонкой слева, лента комментариев справа. */
:root{
  /* страница — светлая тема читалки */
  --bg:#ffffff; --fg:#1b1f23; --muted:#69737d; --card:#f0f3f2; --line:rgba(27,31,35,.12);
  --acc:#0f5a3d; --acc-fg:#ffffff; --hl:rgba(15,90,61,.10); --qc:#b8509a;
  /* мир «Перископа»: глубина, латунь, люминофор */
  --abyss:#0a1a16; --hull:#12312a; --brass:#c9a457; --cu:#c27a3e; --cu-hi:#eba86a; --cu-lo:#8a4f24; --brass-hi:#ecd395; --brass-lo:#8a6a2c; --phos:#59e08c;
  /* окно комментариев — всегда изумрудное, как в читалке */
  --k-fg:241,237,227; --k-txt:#fffdf8; --k-acc:217,185,111; --k-ink:255,255,255;
  --k-bg:radial-gradient(130% 60% at 50% 0%,#246650 0%,#144536 40%,#0b2d24 78%,#08231c 100%);
  --f-ui:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-read:"PT Serif",Georgia,"Times New Roman",serif;
  --f-disp:"Prata","PT Serif",Georgia,serif;
  --f-mono:"PT Mono",ui-monospace,Consolas,monospace;
  --sb-h:0px; --top-h:58px;   /* --sb-h — полоса песочницы; на сайте её нет */
  --logo:url(/w/logo.png); --logo-src:"/w/logo.png";
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-skin]){
  --bg:#0e0e10; --fg:#d4d4d4; --muted:#868990; --card:#1b1c1f; --line:rgba(255,255,255,.10);
  --acc:#6bc278; --acc-fg:#06290d; --hl:rgba(107,194,120,.14); --qc:#c9a457; color-scheme:dark}}
:root[data-theme="dark"]:not([data-skin]),:root[data-skin="night"]{
  --bg:#0e0e10; --fg:#bdb9b0; --muted:#7f8187; --card:#1b1c1f; --line:rgba(255,255,255,.10);
  --acc:#6bc278; --acc-fg:#06290d; --hl:rgba(107,194,120,.14); --qc:#c9a457; color-scheme:dark}
:root[data-skin="light"]{--bg:#ffffff; --fg:#1b1f23; --muted:#69737d; --card:#f0f3f2; --line:rgba(27,31,35,.12);
  --acc:#0f5a3d; --acc-fg:#ffffff; --hl:rgba(15,90,61,.10); --qc:#b8509a; color-scheme:light}
:root[data-skin="green"]{--bg:#10291f; --fg:#cdc6b6; --muted:#8fa298; --card:#173a2f; --line:rgba(236,211,149,.16);
  --acc:#d9b96f; --acc-fg:#14261e; --hl:rgba(217,185,111,.14); --qc:#8fd1a8; color-scheme:dark}
:root[data-skin="green"] body{background:radial-gradient(80% 70% at 50% 0%,#1b4a3d,var(--hull) 45%,var(--abyss)) fixed}
:root[data-skin="green"] .top{background:rgba(14,38,30,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
:root[data-skin="green"] .player{background:rgba(12,34,27,.78);border-color:rgba(236,211,149,.22)}
:root[data-skin="green"] .pl-ctl .play{background:linear-gradient(180deg,var(--brass-hi),var(--brass) 55%,#a7802f);color:#1c1408}
:root[data-skin="green"] .chip,:root[data-skin="green"] .top .tab[aria-current="page"]{background:rgba(255,255,255,.06)}
:root[data-skin="green"] .flt button[aria-pressed="true"]{background:var(--brass);border-color:var(--brass);color:#1c1408}
:root[data-skin="green"] .lens{background:radial-gradient(120% 70% at 50% 0%,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 60%),linear-gradient(180deg,rgba(217,185,111,.10),rgba(217,185,111,.18));border-color:rgba(217,185,111,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 26px -16px rgba(0,0,0,.6)}
:root[data-skin="green"] .pop{background:#132f25}
:root[data-skin="grey"]{--bg:#3a3b3e; --fg:#d2cdc3; --muted:#999a9d; --card:#45464a; --line:rgba(255,255,255,.09);
  --acc:#a9b8ad; --acc-fg:#2a2c2e; --hl:rgba(169,184,173,.12); --qc:#b7a9c4; color-scheme:dark}
/* серая: спокойный тёплый серый, текст не белый — мягкий контраст для долгого чтения */
:root[data-skin="grey"] .txt{color:#d6d1c7;letter-spacing:.003em}
/* ночь: текст статьи — тёплый приглушённый серый, а не белый (меньше слепит на чёрном) */
:root[data-skin="night"] .txt{color:#b8b3a9;letter-spacing:.003em}
/* изумрудная: тёплый приглушённый кремовый вместо почти белого */
:root[data-skin="green"] .txt{color:#c4bdac;letter-spacing:.003em}
:root[data-skin="grey"] .lens{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.085));border-color:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 22px -16px rgba(0,0,0,.5)}
:root[data-skin="sepia"]{--bg:#f3e6cc; --fg:#463624; --muted:#8a7457; --card:#e8d8b8; --line:rgba(110,80,45,.18);
  --acc:#8b5a2b; --acc-fg:#fff8ec; --hl:rgba(139,90,43,.12); --qc:#4f6a8a; color-scheme:light}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{height:100%}
body{min-height:100%}   /* не height: иначе закреплённые полоса и шапка уезжают, как только прокрутка длиннее одного окна */
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 var(--f-ui);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
a{color:var(--acc)}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.screen{min-height:calc(100% - var(--sb-h))}

/* ===== полоса песочницы ===== */
.sb{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;height:var(--sb-h);display:flex;align-items:center;gap:10px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:repeating-linear-gradient(135deg,#1d1f22 0 14px,#232529 14px 28px);color:#e9e5d8;font:12.5px/1 var(--f-mono);overflow-x:auto;white-space:nowrap}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:#1d1f22}
.sb b{color:var(--brass-hi);font-weight:400;letter-spacing:.06em;text-transform:uppercase}
.sb nav,.sb .skins{display:flex;gap:4px}
.sb button{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);border-radius:999px;padding:6px 11px;cursor:pointer;color:#e9e5d8}
.sb button[aria-pressed="true"]{background:var(--brass);color:#1b1407;border-color:var(--brass)}
.sb .sp{flex:1}

/* ===== общий фон входа и приветствия: размытый отсек подлодки ===== */
.bay{position:relative;isolation:isolate;min-height:calc(100vh - var(--sb-h) - env(safe-area-inset-top,0px));color:#f2ece0;background:#0d0a07;overflow:hidden}
.bay::before{content:"";position:absolute;inset:0;z-index:-2;background:url(/w/bay.jpg) center/cover}   /* без выхода за края: увеличенная картинка вылезала светлой полосой внизу длинной «Главной» */
.bay::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 75% at 50% 40%,rgba(8,6,4,.2),rgba(8,6,4,.78) 100%),linear-gradient(180deg,rgba(8,6,4,.15),rgba(8,6,4,.55))}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:14px;padding:13px 20px;font-weight:600;font-size:15px;cursor:pointer;text-decoration:none}
.btn svg{width:20px;height:20px;flex:none}
.btn-brass{color:#1c1408;background:linear-gradient(180deg,var(--brass-hi),var(--brass) 55%,#a7802f);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 24px -12px rgba(0,0,0,.7)}
.btn-glass{color:#e8f5e4;background:rgba(0,0,0,.28);border:1px solid rgba(236,211,149,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.btn:active{transform:translateY(1px)}
/* название канала — гротеск, разрядка, без засечек */
.mark{margin:0;font:600 clamp(26px,5vw,52px)/1.05 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:#f4ead6;text-wrap:balance}
.mark i{font-style:normal;font-weight:300;color:var(--brass);padding:0 .25em}
.kick{font:500 12px/1 var(--f-ui);letter-spacing:.28em;text-transform:uppercase;color:rgba(242,236,224,.62)}

/* ===== приветствие ===== */
.hello{grid-template-columns:minmax(0,1fr);min-height:calc(100vh - var(--sb-h) - var(--top-h) - env(safe-area-inset-top,0px));display:grid;align-content:center;justify-items:center;gap:30px;text-align:center;
  padding:56px max(16px,env(safe-area-inset-right,0px)) 64px max(16px,env(safe-area-inset-left,0px))}
.hello .head{display:grid;gap:14px;justify-items:center}
.hello .hi{margin:0;font-size:17px;color:rgba(242,236,224,.8)}
.hello .go{font-size:16px;padding:15px 26px}
.hello .go span{font-size:18px;line-height:1}
.panel{width:100%;max-width:940px;min-width:0;display:grid;gap:12px;text-align:left}
.glass{border-radius:18px;background:rgba(18,14,10,.42);border:1px solid rgba(255,255,255,.11);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.cont{display:grid;grid-template-columns:132px minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px;color:inherit;text-decoration:none;cursor:pointer;border:1px solid rgba(255,255,255,.11);font:inherit;text-align:left;width:100%}
.cont img{width:132px;aspect-ratio:16/9;object-fit:cover;border-radius:12px;display:block}
.cont small,.fresh-h{font:500 11.5px/1 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:rgba(242,236,224,.55)}
.cont b{display:block;font-size:16.5px;line-height:1.3;margin:6px 0 8px;color:#f8f2e6}
.cont .bar{height:3px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.cont .bar i{display:block;height:100%;background:var(--brass)}
.cont .arr{font-size:22px;color:var(--brass-hi);padding-right:8px}
.fresh{padding:14px}
.fresh-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.fresh-h a{letter-spacing:.04em;text-transform:none;font-size:13.5px;color:var(--brass-hi);text-decoration:none}
.fresh-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fresh-row button{border:0;background:none;padding:0;color:inherit;font:inherit;text-align:left;cursor:pointer;display:grid;gap:7px}
.fresh-row img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:block;transition:transform .2s}
.fresh-row button:hover img{transform:translateY(-2px)}
.fresh-row span{font-size:15px;line-height:1.3;color:#eee6d6}
.note{display:flex;gap:12px;align-items:baseline;padding:12px 16px;font-size:14px;color:rgba(242,236,224,.8)}
.note time{font:500 11.5px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--brass);white-space:nowrap}

/* ===== вход ===== */
.login{display:grid;place-items:center;padding:48px 16px;min-height:calc(100vh - var(--sb-h));background:radial-gradient(80% 70% at 50% 0%,#1b4a3d,var(--hull) 45%,var(--abyss))}
.lcard{width:min(440px,100%);background:rgba(10,26,22,.72);border:1px solid rgba(236,211,149,.28);border-radius:24px;padding:30px 26px;color:#efe9da;text-align:center;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lcard img.l{width:64px;height:64px;border-radius:50%}
.lcard h1{font:400 28px/1.15 var(--f-disp);margin:14px 0 6px;color:var(--brass-hi)}
.lcard p{color:#c3cdc6;margin:0 0 20px}
.lcard .btn{width:100%;justify-content:center;margin-bottom:10px}
.qr{margin:18px auto 6px;display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:center;text-align:left;font-size:13.5px;color:#c3cdc6}
.qr .box{width:120px;height:120px;border-radius:12px;background:#fff;display:grid;place-items:center;padding:4px;border:3px solid var(--brass)}
.qr .box svg{width:100%;height:100%;display:block}
.code{font:22px/1 var(--f-mono);color:var(--phos);letter-spacing:.2em;text-shadow:0 0 8px rgba(89,224,140,.5);margin:8px 0 4px}
.lcard small{display:block;color:#93a39b;margin-top:14px}
.lcard small a{color:var(--brass-hi)}
.lcard .lhow{margin:6px 0 4px;font-size:14px;color:#c3cdc6}
.lcard small.two{color:#c9d3cc}
.lcard small.demo2{font:11px/1.3 var(--f-mono);opacity:.7}
.lcard b{color:var(--brass-hi);font-weight:600}
.spin{width:46px;height:46px;margin:14px auto 0;border-radius:50%;border:3px solid rgba(236,211,149,.2);border-top-color:var(--brass);animation:spin 1s linear infinite;position:relative}
.spin.done{animation:none;border-color:var(--phos);background:rgba(89,224,140,.12)}
.spin.done::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:var(--phos);font-size:22px;font-weight:700}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:3s}}
/* вопрос про ярлык — карточка над нижней панелью */
.a2{position:fixed;left:12px;right:12px;bottom:calc(var(--tb-h,0px) + env(safe-area-inset-bottom,0px) + 12px);z-index:46;max-width:520px;margin:0 auto;padding:16px;border-radius:20px;display:grid;gap:14px;
  background:#141416;color:#ece9e2;border:1px solid rgba(236,211,149,.3);box-shadow:0 24px 50px -18px rgba(0,0,0,.8);animation:a2in .35s ease-out}
@keyframes a2in{from{transform:translateY(16px);opacity:0}}
.a2h{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start}
.a2h img{width:44px;height:44px;border-radius:12px}
.a2h b{display:block;font-size:16px;margin-bottom:4px;color:#f4efe4}
.a2h span{font-size:13.5px;line-height:1.45;color:#b9bcc2}
.a2h ol{margin:6px 0 0;padding-left:20px;font-size:14px;line-height:1.7;color:#d9d6ce}
.a2h .ish{width:17px;height:17px;vertical-align:-3px;color:#4c9dff}
.a2b{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px}
.a2b .btn{padding:11px 14px}
/* колокольчик и список уведомлений */
.bell{position:relative;padding:6px 10px;display:inline-flex;align-items:center}
.bell svg{width:18px;height:18px;display:block}
.bell .bd{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#e5484d;color:#fff;font:700 11px/18px var(--f-ui);font-style:normal;text-align:center;box-shadow:0 0 0 2px var(--bg)}
.top.dark .bell .bd{box-shadow:0 0 0 2px #0b0b0d}
.bell .bd:empty{display:none}
.bell.ring svg{animation:ring 1s ease;transform-origin:50% 15%}
@keyframes ring{15%{transform:rotate(16deg)}30%{transform:rotate(-14deg)}45%{transform:rotate(10deg)}60%{transform:rotate(-7deg)}75%{transform:rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.bell.ring svg{animation:none}}
.pop.bpop{width:min(380px,calc(100vw - 24px));padding:0;gap:0;max-height:min(70vh,560px);overflow-y:auto}
.bpop .bh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:13px 14px 11px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:1}
.bpop .bh b{font-size:15px}
.bpop .bh small{font-size:12.5px;color:var(--muted)}
.pop.bpop .bi{display:grid;grid-template-columns:8px minmax(0,1fr);gap:11px;align-items:start;width:100%;padding:12px 14px;border:0;border-radius:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer;color:var(--fg)}
.pop.bpop .bi:last-child{border-bottom:0}
.pop.bpop .bi:hover{background:var(--card)}
.bi .dot{width:8px;height:8px;border-radius:50%;margin-top:5px}
.bi.un .dot{background:#e5484d}
.bi small{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}
.bi .bt{margin:0;font-size:14px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bi.un .bt{font-weight:500}
.bempty{padding:26px 14px;color:var(--muted);text-align:center;font-size:14px}
/* объявления на «Главной» */
.notes{display:grid;gap:8px;min-width:0}
.notes>.note{min-width:0}
.nmore{flex:none;align-self:center;margin-left:auto;white-space:nowrap;border:0;background:none;padding:2px 0 2px 6px;color:var(--brass-hi);font:500 13px/1.2 var(--f-ui);cursor:pointer;opacity:.85}
.nmore:hover{opacity:1}
.note .nw+.nmore{margin-left:0}
/* невысокий экран компьютера: объявление — одной строкой, нажатие раскрывает целиком */
@media (min-width:701px) and (max-height:800px){
  .note>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
  .note.full>span{white-space:normal}
}
.note .nw{margin-left:auto;align-self:center;flex:none;font:700 10.5px/1 var(--f-ui);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#1c1408;background:var(--brass);border-radius:6px;padding:4px 6px}
.note.fresh-n{border-color:rgba(236,211,149,.45)}
.note.hl{animation:nhl 2.2s ease-out}
@keyframes nhl{0%,35%{box-shadow:0 0 0 2px var(--brass),0 0 30px -6px var(--brass)}}
@media (max-width:700px){
  .notes>.note{flex-wrap:wrap;row-gap:6px}
  .notes>.note>span{order:3;flex-basis:100%}
  .note .nw{order:2}
  .note .nmore{order:4;margin-left:auto}
  .note .nw+.nmore{margin-left:auto}
  .pop.bpop{position:fixed;left:12px;right:12px;top:calc(env(safe-area-inset-top,0px) + var(--sb-h) + var(--top-h) + 6px);width:auto;max-height:calc(100vh - var(--sb-h) - var(--top-h) - var(--tb-h) - 30px)}
}
/* кнопка «наверх»: компьютер — слева внизу (справа чат и комментарии), телефон — справа над нижней панелью */
.totop{position:fixed;left:max(20px,env(safe-area-inset-left,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:35;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:var(--fg);border:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 12px 26px -12px rgba(0,0,0,.55);
  animation:a2in .25s ease-out}
.totop svg{width:21px;height:21px}
.totop:hover{border-color:var(--acc);color:var(--acc)}
.totop[hidden]{display:none}
/* «Главная» и вход: фон всей страницы — как у экрана, чтобы ниже него (и при оттягивании) не было полосы цвета темы */
:root[data-page="welcome"],:root[data-page="welcome"] body{background:#0d0a07}
:root[data-page="login"],:root[data-page="login"] body{background:var(--abyss)}
@media (max-width:700px){
  .totop{left:auto;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(var(--tb-h) + env(safe-area-inset-bottom,0px) + 14px)}
  html[data-page="article"] .totop{bottom:calc(var(--tb-h) + env(safe-area-inset-bottom,0px) + 128px)}   /* над кнопкой комментариев и плеером */
}
.a2link{display:none;align-items:center;justify-content:center;gap:8px;margin:2px auto 0;border:0;background:none;color:rgba(242,236,224,.7);font:500 13.5px/1 var(--f-ui);cursor:pointer;padding:8px}
.a2link svg{width:16px;height:16px}
@media (max-width:700px){.a2link{display:inline-flex}}

/* ===== закрытая часть: шапка ===== */
.top{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--sb-h));z-index:30;height:var(--top-h);display:flex;align-items:center;gap:14px;background:var(--bg);border-bottom:1px solid var(--line);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.top .brand{display:flex;align-items:center;gap:10px;font-weight:600;text-decoration:none;color:var(--fg);white-space:nowrap}
.top .brand img{width:32px;height:32px;border-radius:50%}
.top .brand span{font:600 14px/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase}
.top .brand span i{font-style:normal;font-weight:300;color:var(--brass);padding:0 .2em}
.top .tab{border:0;background:none;padding:8px 10px;border-radius:10px;cursor:pointer;color:var(--muted);font-weight:500}
.top nav{display:flex;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
.top nav::-webkit-scrollbar{display:none}
.top .tab[aria-current="page"]{color:var(--fg);background:var(--card)}
.top .tab .short{display:none}
.top .tab.ep{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .tab:hover{color:var(--fg)}
.top .sp{flex:1}
.chip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 12px;cursor:pointer;font-size:13.5px;white-space:nowrap}
.who{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);white-space:nowrap}
.who .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:600;background:linear-gradient(160deg,#3fae84,#11603f)}

/* библиотека */
.lib{max-width:1160px;margin:0 auto;padding-block:26px 60px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.lib h1{font:600 28px/1.1 var(--f-ui);letter-spacing:-.01em;margin:0 0 4px}
.lib .sub{color:var(--muted);margin:0 0 18px}
.flt{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.flt button[aria-pressed="true"]{background:var(--acc);color:var(--acc-fg);border-color:var(--acc)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
/* библиотека в три колонки: авторы | выпуски | чат «Погружения» */
.libx{--lt:42px;display:grid;grid-template-columns:calc(210px * var(--z,1)) minmax(0,1fr) clamp(360px,32vw,640px);gap:28px;align-items:start;
  padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
.libx .mid{padding-block:var(--lt) 60px;padding-inline:clamp(12px,2.2vw,44px);min-width:0}  /* воздух между выпусками и колонками по бокам */
.libx .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}  /* не больше трёх в ряд — место отдаём чату */
.side,.gchat{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--sb-h) + var(--top-h))}
.side{padding-block:var(--lt) 20px;display:grid;gap:8px;max-height:calc(100vh - var(--sb-h) - var(--top-h));overflow-y:auto;scrollbar-width:thin}
.side button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:44px;padding:0 14px;border-radius:12px;
  border:1px solid var(--line);background:var(--card);cursor:pointer;font-size:14px;text-align:left;color:var(--fg)}
.side button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side button small{flex:none;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.side button:hover{border-color:color-mix(in srgb,var(--acc) 45%,var(--line))}
.side button[aria-pressed="true"]{background:var(--acc);color:var(--acc-fg);border-color:var(--acc)}
.side button[aria-pressed="true"] small{color:inherit;opacity:.75}
:root[data-skin="green"] .side button[aria-pressed="true"]{background:var(--brass);border-color:var(--brass);color:#1c1408}
/* чат «Погружения»: прозрачный, медная рамка, на всю высоту окна */
.gchat{height:calc(100vh - var(--sb-h) - var(--top-h) - env(safe-area-inset-top,0px));padding-block:var(--lt) 14px;display:grid}
.gbox{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;border:1.5px solid var(--cu);border-radius:20px;background:transparent;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cu) 25%,transparent),0 0 24px -12px color-mix(in srgb,var(--cu) 60%,transparent)}
.g-head{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid color-mix(in srgb,var(--cu) 45%,transparent)}
.g-head b{font-size:16px}
.g-head .sub{font-size:12.5px;color:var(--muted)}
.g-head .sp{flex:1}
.g-head .x{display:none;border:0;background:none;color:var(--muted);font-size:24px;cursor:pointer;line-height:1}
.g-list{overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin}
.gm{display:grid;grid-template-columns:32px minmax(0,1fr);gap:9px;align-items:start}
.gm .av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13.5px;color:#fff;background:linear-gradient(160deg,#3fae84,#11603f)}
.gm .bb{padding:8px 12px 9px;border-radius:4px 14px 14px 14px;background:color-mix(in srgb,var(--fg) 6%,transparent);border:1px solid color-mix(in srgb,var(--fg) 8%,transparent);min-width:0}
.gm .h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:12.5px;margin-bottom:2px}
.gm .h b{font-weight:600}
.gm .h time,.gm .h .src{color:var(--muted);font-size:11.5px}
.gm .h .src svg{width:11px;height:11px;vertical-align:-1px}
.gm .t{font-size:14.5px;line-height:1.45;overflow-wrap:anywhere}
.gm .q{margin:4px 0 6px;padding:4px 9px;border-left:3px solid var(--cu);border-radius:0 8px 8px 0;background:color-mix(in srgb,var(--cu) 10%,transparent);font:italic 13px/1.4 var(--f-read);color:var(--muted)}
/* комментарий под статьёй — отмечен шапкой статьи (обложка + название), по нажатию открывается статья */
.gm.onart .bb{border-color:color-mix(in srgb,var(--cu) 55%,transparent);background:color-mix(in srgb,var(--cu) 8%,transparent)}
.gm .ref{display:flex;align-items:center;gap:8px;width:calc(100% + 24px);margin:-8px -12px 8px;padding:6px 10px 6px 6px;border:0;border-bottom:1px solid color-mix(in srgb,var(--cu) 35%,transparent);
  border-radius:4px 14px 0 0;background:color-mix(in srgb,var(--cu) 14%,transparent);cursor:pointer;color:inherit;font:inherit;text-align:left}
.gm .ref img{width:46px;height:26px;object-fit:cover;border-radius:5px;flex:none}
.gm .ref span{min-width:0;font-size:12px;line-height:1.25;color:var(--muted)}
.gm .ref b{display:block;color:var(--fg);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm .ref:hover b{text-decoration:underline}
.gm.fresh{animation:arrive .6s ease-out}
.g-form{display:flex;gap:8px;align-items:flex-end;padding:10px 12px 12px;border-top:1px solid color-mix(in srgb,var(--cu) 45%,transparent)}
.g-form textarea{flex:1;min-width:0;resize:none;height:42px;max-height:140px;padding:10px 13px;border-radius:14px;border:1px solid var(--line);background:color-mix(in srgb,var(--fg) 5%,transparent);color:var(--fg);font:14.5px/1.4 var(--f-ui)}
.g-form textarea:focus{outline:none;border-color:var(--cu)}
.g-form button{width:42px;height:42px;flex:none;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:#2a1406;background:linear-gradient(180deg,var(--cu-hi),var(--cu) 55%,var(--cu-lo))}
.g-form button svg{width:19px;height:19px}
.gfab{display:none}
/* поле ввода «Погружения» — та же форма, что у комментариев (.f-form), цвета — от темы страницы, акцент медный */
.gbox{--k-fg:189,185,176; --k-txt:#d6d1c7; --k-acc:194,122,62; --k-ink:255,255,255; --k-form:transparent; --k-field:rgba(255,255,255,.05); --k-fsh:rgba(0,0,0,.3)}
:root[data-skin="grey"] .gbox{--k-fg:210,205,195; --k-txt:#e2ddd3; --k-field:rgba(255,255,255,.06); --k-fsh:rgba(0,0,0,.22)}
:root[data-skin="green"] .gbox{--k-fg:205,198,182; --k-txt:#e4dccb; --k-field:rgba(0,0,0,.18)}
:root[data-skin="light"] .gbox{--k-fg:27,31,35; --k-txt:#14171a; --k-acc:178,104,46; --k-ink:0,0,0; --k-field:#fff; --k-fsh:rgba(0,0,0,.06)}
:root[data-skin="sepia"] .gbox{--k-fg:70,54,36; --k-txt:#33261a; --k-acc:160,95,45; --k-ink:70,54,36; --k-field:#fbf3e2; --k-fsh:rgba(110,80,45,.12)}
.gbox .f-form{border-top:1px solid color-mix(in srgb,var(--cu) 45%,transparent);border-radius:0 0 18px 18px}
.gbox .send{border-color:rgba(255,255,255,.3);color:#2a1406;background:linear-gradient(180deg,var(--cu-hi),var(--cu) 55%,var(--cu-lo));box-shadow:inset 0 1px 1px rgba(255,255,255,.5),inset 0 -6px 10px rgba(0,0,0,.2)}
.gm .q .qby{font-style:normal;font-weight:600;color:var(--cu)}
.cnt.over{color:#e5484d!important;font-weight:700}
@media (max-width:1280px){.libx{grid-template-columns:190px minmax(0,1fr) clamp(330px,32vw,380px);gap:20px}.libx .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){
  .libx{grid-template-columns:minmax(0,1fr);gap:0}
  .side{position:static;max-height:none;padding-block:18px 0;display:flex;flex-wrap:wrap;gap:8px}
  .side button{width:auto;height:38px;border-radius:999px}
  .libx .mid{padding-top:16px}
  .gchat{position:fixed;inset:auto 0 0;top:auto;height:min(80vh,680px);z-index:45;padding:0;transform:translateY(105%);transition:transform .3s ease}
  .gchat.open{transform:none}
  .gbox{border-radius:22px 22px 0 0;border-bottom:0;background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
  .g-head .x{display:block}
  .gfab{display:inline-flex;position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:20;align-items:center;gap:8px;
    border:1.5px solid var(--cu);border-radius:999px;padding:11px 16px;font-weight:600;cursor:pointer;color:#2a1406;background:linear-gradient(180deg,var(--cu-hi),var(--cu));box-shadow:0 12px 24px -10px rgba(0,0,0,.6)}
  .gfab svg{width:18px;height:18px}
}
.card{display:grid;text-align:left;border:0;padding:0;background:none;cursor:pointer;color:inherit}
.card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;box-shadow:0 10px 24px -16px rgba(0,0,0,.6)}
.card h3{margin:10px 0 3px;font-size:16px;line-height:1.3}
.card .meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:13px;align-items:center}
.card .meta svg{width:14px;height:14px;vertical-align:-2px}
.card .prog{height:4px;border-radius:2px;background:var(--line);margin-top:8px;overflow:hidden}
.card .prog i{display:block;height:100%;background:var(--acc)}

/* ===== статья + лента комментариев ===== */
/* статья прокручивается всей страницей (полоса прокрутки — у правого края окна, как в библиотеке), окно комментариев закреплено справа */
.read{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,410px);align-items:start}
.col{position:relative;min-width:0}
.art{max-width:700px;margin:0 auto;padding:26px 24px 140px}
.back{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:6px 0;margin:0 0 12px;color:var(--muted);font-weight:500;cursor:pointer}
.back:hover{color:var(--fg)}
.art .cover{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px}
/* видео вместо обложки: плеер хостинга + наши слои поверх его ссылок на сайт хостинга */
.vbox{display:grid;gap:8px}
.vfr{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000}
.vfr iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vfr{container-type:inline-size}
.vsh{position:absolute;z-index:2;background:transparent;display:none}
/* VK: кнопка «VK Видео» внизу справа; с 700 px у VK появляется регулятор громкости и кнопка сдвигается левее */
.vbox[data-host=vk] .vsh-logo{display:block;right:92px;bottom:4px;width:108px;height:40px}
@container (min-width:689px){.vbox[data-host=vk] .vsh-logo{right:92px;width:174px}}
@container (min-width:700px){.vbox[data-host=vk] .vsh-logo{right:158px;width:108px}}
/* Rutube: название и «Поделиться» сверху, логотип и значок канала справа внизу, «Смотреть на RUTUBE» по центру до запуска */
.vbox[data-host=rutube] .vsh-top{display:block;left:0;right:0;top:0;height:60px}
.vbox[data-host=rutube] .vsh-logo{display:block;right:78px;bottom:20px;width:34px;height:24px}
.vbox[data-host=rutube] .vsh-ch{display:block;right:8px;bottom:64px;width:50px;height:50px}
.vbox[data-host=rutube] .vsh-mid{display:block;left:50%;bottom:10px;width:190px;height:48px;transform:translateX(-50%)}
@container (min-width:700px){
  .vbox[data-host=rutube] .vsh-top{height:72px}
  .vbox[data-host=rutube] .vsh-logo{right:118px;bottom:24px;width:114px;height:34px}
  .vbox[data-host=rutube] .vsh-ch{right:24px;bottom:128px;width:62px;height:62px}
  .vbox[data-host=rutube] .vsh-mid{bottom:12px;width:290px;height:60px}
}
.vbar{display:flex;gap:8px;flex-wrap:wrap}
.vx{display:none}
.vbox.vfull{position:fixed;inset:0;z-index:200;background:#000;gap:0;padding:0}
.vbox.vfull .vfr{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
.vbox.vfull .vbar{display:none}
.vbox.vfull .vfr{inset:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)}
.vbox.vfull .vx{display:grid;place-items:center;position:absolute;z-index:3;top:calc(12px + var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));width:40px;height:40px;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:18px;cursor:pointer}
html.vfull-on,html.vfull-on body{overflow:hidden}
/* своя панель плеера VK (vplayer.js): слой на всё видео — VK ничего не нажать; большая кнопка; панель снизу */
.vbox.vpanel .vfr iframe{right:auto;bottom:auto;transform-origin:0 0;pointer-events:none}
/* до первого запуска касание идёт в сам плеер VK (иначе браузер не даст звук); ▶ видна, но пропускает касание.
   Только где нужно (vpass: телефон или браузер не дал звук после нашей ▶) — с мышью правой кнопкой до меню VK не добраться */
.vbox.vpanel.vpass.vready:not(.vstarted) .vfr iframe{pointer-events:auto}
.vbox.vpanel.vpass.vready:not(.vstarted) .vui,.vbox.vpanel.vpass.vready:not(.vstarted) .vcov,.vbox.vpanel.vpass.vready:not(.vstarted) .vbig{pointer-events:none}
.vbox.vpanel.vpass.vready:not(.vstarted) .vcov{background:rgba(0,0,0,.25)}
.vbox.vpanel:not(.vstarted) .vctl{display:none}
.vbox.vpanel .vsh{display:none!important}
.vui{position:absolute;inset:0;z-index:2;color:#fff;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.vcov{position:absolute;inset:0;cursor:pointer;background:transparent;transition:background .2s}
.vbox.vpanel:not(.vplaying) .vcov{background:rgba(0,0,0,.45)}
.vbox.vpanel:not(.vready) .vcov{background:rgba(0,0,0,.7)}
.vbig{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.55);display:grid;place-items:center;cursor:pointer;transition:opacity .2s}
.vbig svg{width:40px;height:40px;fill:#fff}
.vbox.vplaying .vbig{opacity:0;pointer-events:none}
/* нажали ▶, пока VK грузится — кнопка «дышит», видео запустится само */
.vbox.vwant .vbig{animation:vwant 1s ease-in-out infinite}
@keyframes vwant{50%{transform:scale(.88);opacity:.6}}
.vctl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;padding:22px 10px calc(6px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,rgba(0,0,0,.7));transition:opacity .25s}
.vbox.vidle .vctl{opacity:0;pointer-events:none}
.vbox.vidle .vcov{cursor:none}
.vb{flex:none;width:36px;height:36px;padding:0;border:0;background:transparent;display:grid;place-items:center;cursor:pointer}
.vb svg{width:24px;height:24px;fill:#fff}
/* ПОЛИГОН: выбор скорости — наше меню поверх меню VK (vplayer.js, класс vsel на плеере, меню — .vsl) */
.vsp{width:auto;min-width:36px;padding:0 4px;color:#fff;font:700 13px/1 system-ui,sans-serif;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.vsl{display:none}
.vbox.vsel{position:fixed;inset:0;z-index:200;background:#000;gap:0;padding:0}
.vbox.vsel .vfr{position:absolute;inset:0;aspect-ratio:auto;max-height:none;border-radius:0}
.vbox.vsel .vbar{display:none}
.vbox.vsel .vfr iframe{pointer-events:auto}
.vbox.vsel .vui{pointer-events:none}
.vbox.vsel .vcov,.vbox.vsel .vctl,.vbox.vsel .vbig{display:none}
.vbox.vsel .vsl{display:block;position:absolute;inset:0}
.vsel-bg{position:absolute;inset:0;background:#141414;pointer-events:auto}
.vsel-row{position:absolute;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 18px;background:#262626;border-bottom:1px solid #333;color:#fff;font:500 16px/1.2 system-ui,sans-serif;pointer-events:none}
.vsel-row:first-child{border-radius:12px 12px 0 0}
.vsel-row:last-child{border-radius:0 0 12px 12px;border-bottom:0}
.vsel-row:only-child{border-radius:12px}
.vsel-row b{font-weight:600;color:rgba(255,255,255,.55)}
.vsel-row.on b{color:#5ac8fa}
.vsel-t{position:absolute;left:0;right:0;text-align:center;color:rgba(255,255,255,.6);font:600 13px/1 system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;pointer-events:none}
.vsel-x{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:12px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:18px;cursor:pointer;pointer-events:auto}
.vsel-sink{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0}
.vtm{flex:none;min-width:76px;font:600 12.5px/1 system-ui,sans-serif;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.vseek,.vvol{-webkit-appearance:none;appearance:none;height:24px;margin:0;background:transparent;cursor:pointer}
.vseek{flex:1;min-width:50px}
.vvol{flex:none;width:72px}
.vseek::-webkit-slider-runnable-track,.vvol::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,#fff var(--p,0%),rgba(255,255,255,.35) var(--p,0%))}
.vseek::-webkit-slider-thumb,.vvol::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border:0;border-radius:50%;background:#fff}
.vseek::-moz-range-track,.vvol::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.35)}
.vseek::-moz-range-progress,.vvol::-moz-range-progress{height:4px;border-radius:2px;background:#fff}
.vseek::-moz-range-thumb,.vvol::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff}
@container (max-width:360px){.vtm{min-width:0;font-size:11.5px}.vb{width:32px}}
.art h1{font:400 34px/1.15 var(--f-disp);margin:22px 0 8px;text-wrap:balance}
.art .by{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--muted);font-size:14px;margin-bottom:22px}
.txt{position:relative;font:var(--rs,18px)/1.65 var(--f-read);display:grid;grid-template-columns:minmax(0,1fr);gap:14px;overflow-wrap:break-word}   /* колонка не шире экрана при любых неразрывных цепочках */
.txt.sans{font-family:var(--f-ui)}
.txt>p,.txt>blockquote{margin:0 -10px;padding:4px 10px;border-radius:10px;cursor:pointer;position:relative;z-index:1}
.txt>blockquote{font-style:italic;border-left:3px solid var(--qc);border-radius:0 12px 12px 0;padding:10px 14px;margin-left:0;background:color-mix(in srgb,var(--qc) 10%,transparent)}
.lens{position:absolute;left:-14px;right:-14px;top:0;height:0;z-index:0;border-radius:16px;opacity:0;pointer-events:none;
  transition:transform .55s cubic-bezier(.22,.9,.3,1),height .55s cubic-bezier(.22,.9,.3,1),opacity .3s;
  background:radial-gradient(120% 70% at 50% 0%,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 60%),linear-gradient(180deg,color-mix(in srgb,var(--acc) 12%,transparent),color-mix(in srgb,var(--acc) 22%,transparent));
  border:1px solid color-mix(in srgb,var(--acc) 30%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 26px -16px rgba(0,0,0,.5)}
.lens.on{opacity:1}
@media (prefers-reduced-motion:reduce){.lens{transition:opacity .2s}}
/* плеер — стеклянная панель внизу колонки статьи */
/* плеер — одна низкая строка по ширине текста: ▶ −15 +15 | перемотка | время | скорость | Следить */
.player{position:sticky;bottom:12px;margin:0 auto;max-width:652px;width:calc(100% - 32px);z-index:5;border-radius:16px;padding:7px 10px;
  display:grid;grid-template-columns:auto auto minmax(60px,1fr) auto auto auto;align-items:center;column-gap:6px;
  background:color-mix(in srgb,var(--bg) 82%,transparent);border:1px solid var(--line);box-shadow:0 18px 40px -20px rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.pl-top,.pl-ctl,.pl-ctl .mid{display:contents}
.pl-top b{display:none}                                    /* название уже над статьёй */
.pl-top span{grid-column:4;grid-row:1;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;padding:0 4px}
.seek{grid-column:3;grid-row:1;width:100%;accent-color:var(--acc);margin:0 4px}
.pl-ctl button{border:0;background:none;cursor:pointer;font-weight:600;font-size:13.5px;padding:5px 6px;border-radius:8px;grid-row:1}
#pp{grid-column:1} #pv{grid-column:2} #pr{grid-column:5} #pf{grid-column:6}
.pl-ctl .play{width:34px;height:34px;padding:0;border-radius:50%;background:var(--acc);color:var(--acc-fg);display:grid;place-items:center;box-shadow:0 6px 14px -8px rgba(0,0,0,.6)}
.pl-ctl .play svg{width:16px;height:16px}
.pl-ctl .fol[aria-pressed="true"]{color:var(--acc)}
#pf svg{display:none} #pt em{font-style:normal}
.pl-ctl .fol[aria-pressed="false"]{color:var(--muted);text-decoration:line-through}
/* выпуклое стекло: блик сверху + цветной градиент + тень снизу; цвета — из темы */
:root{--glass-hi:rgba(255,255,255,.62)}
:root[data-skin="green"]{--glass-hi:rgba(255,255,255,.4); --pb1:rgba(240,214,152,.96); --pb2:rgba(160,120,42,.96); --pbfg:#1c1408; --sb1:rgba(44,112,88,.72); --sb2:rgba(12,44,34,.85); --sbfg:#f1e6cc; --ptx:#b9cbbf; --seek:var(--brass)}
:root[data-skin="light"]{--pb1:rgba(150,156,163,.88); --pb2:rgba(98,104,112,.94); --pbfg:#fff; --sb1:rgba(250,251,252,.9); --sb2:rgba(214,218,223,.9); --sbfg:#5d646c; --ptx:#7a8189; --seek:#7d848c}
:root[data-skin="sepia"]{--pb1:rgba(176,126,74,.9); --pb2:rgba(122,80,38,.95); --pbfg:#fff8ec; --sb1:rgba(255,248,234,.9); --sb2:rgba(226,206,170,.92); --sbfg:#6e4f2c; --ptx:#8a7457; --seek:#9a6a36}
:root[data-skin="grey"]{--glass-hi:rgba(255,255,255,.22); --pb1:rgba(132,135,140,.95); --pb2:rgba(76,78,83,.97); --pbfg:#f1eee8; --sb1:rgba(98,100,105,.8); --sb2:rgba(62,64,68,.9); --sbfg:#d8d4cb; --ptx:#a4a5a8; --seek:#b0b3b8}
:root[data-skin="night"]{--glass-hi:rgba(255,255,255,.34); --pb1:rgba(52,140,106,.95); --pb2:rgba(16,70,52,.97); --pbfg:#eafff4; --sb1:rgba(40,108,84,.75); --sb2:rgba(14,52,40,.85); --sbfg:#d8efe4; --ptx:#9fc2b2; --seek:#3fae84}
:root .player .seek{accent-color:var(--seek)}
:root .player .pl-top span{color:var(--ptx)}
:root .pl-ctl button:not(.play){color:var(--sbfg);border:1px solid rgba(255,255,255,.45);padding:5px 10px;border-radius:999px;
  background:radial-gradient(120% 80% at 50% 0%,var(--glass-hi) 0%,rgba(255,255,255,0) 60%),linear-gradient(180deg,var(--sb1),var(--sb2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 4px rgba(0,0,0,.12),0 4px 10px -6px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
:root .pl-ctl .play{color:var(--pbfg);border:1px solid rgba(255,255,255,.5);
  background:radial-gradient(120% 70% at 50% 0%,var(--glass-hi) 0%,rgba(255,255,255,.16) 45%,rgba(255,255,255,0) 62%),linear-gradient(180deg,var(--pb1),var(--pb2));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 -5px 9px rgba(0,0,0,.25),0 8px 16px -8px rgba(0,0,0,.6);text-shadow:0 1px 1px rgba(0,0,0,.3)}
:root[data-skin="night"] .pl-ctl button:not(.play){border-color:rgba(160,230,200,.28)}
:root .pl-ctl .fol[aria-pressed="true"]{color:var(--sbfg)}
:root .pl-ctl .fol[aria-pressed="false"]{color:var(--ptx);opacity:.8}
:root .pl-ctl button:not(.play):active,:root .pl-ctl .play:active{transform:translateY(1px)}
/* медная обводка плеера и всех его кнопок — во всех темах */
:root{--rim:color-mix(in srgb,var(--cu) 60%,transparent)}
:root[data-skin="light"]{--rim:rgba(196,202,209,.7)}
:root[data-skin="grey"]{--rim:rgba(170,172,176,.4)}
:root{--rim-side:color-mix(in srgb,var(--cu) 30%,transparent)}
:root[data-skin="light"]{--rim-side:rgba(196,202,209,.35)}
:root[data-skin="grey"]{--rim-side:rgba(170,172,176,.2)}
.player{border:.75px solid var(--rim)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 16px -10px var(--rim),0 18px 40px -20px rgba(0,0,0,.55)}
.pl-ctl button{border:.5px solid var(--rim)!important}
.pl-ctl button:not(.play){padding:5px 10px;border-radius:999px}
/* кнопки авторов в библиотеке — то же выпуклое стекло и кайма, что у плеера; выбранный автор — как кнопка ▶ */
.side button{height:34px;padding:0 12px;border-radius:999px;font-size:13.5px;color:var(--sbfg);border:.5px solid var(--rim-side);
  background:radial-gradient(120% 80% at 50% 0%,var(--glass-hi) 0%,rgba(255,255,255,0) 60%),linear-gradient(180deg,var(--sb1),var(--sb2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 4px rgba(0,0,0,.12),0 4px 10px -6px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.side button small{color:var(--ptx)}
.side button:hover{border-color:var(--rim-side);filter:brightness(1.06)}
.side button:active{transform:translateY(1px)}
.side button[aria-pressed="true"],:root[data-skin="green"] .side button[aria-pressed="true"]{color:var(--pbfg);border-color:var(--rim-side);text-shadow:0 1px 1px rgba(0,0,0,.25);
  background:radial-gradient(120% 70% at 50% 0%,var(--glass-hi) 0%,rgba(255,255,255,.16) 45%,rgba(255,255,255,0) 62%),linear-gradient(180deg,var(--pb1),var(--pb2));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 -4px 8px rgba(0,0,0,.25),0 6px 14px -8px rgba(0,0,0,.6)}
.side button[aria-pressed="true"] small{color:inherit;opacity:.8}
:root[data-skin="green"] .side button[aria-pressed="true"]{text-shadow:none}
/* ночь: выбранный автор — чёрное стекло (изумрудное на изумрудном не отличалось) */
:root[data-skin="night"] .side button[aria-pressed="true"]{color:#fff;border-color:rgba(255,255,255,.14);
  background:radial-gradient(120% 70% at 50% 0%,rgba(255,255,255,.28) 0%,rgba(255,255,255,.06) 45%,rgba(255,255,255,0) 62%),linear-gradient(180deg,rgba(58,60,64,.96),rgba(6,6,8,.98));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35),inset 0 -4px 8px rgba(0,0,0,.5),0 6px 14px -6px rgba(0,0,0,.8)}
.side button[data-a=""] span{text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-size:12.5px}
/* шапка с логотипом на приветствии — всегда чёрная; в библиотеке и статье она следует теме */
.top.dark,:root[data-skin] .top.dark{background:#0b0b0d;color:#ece9e2;border-bottom:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:none;backdrop-filter:none;
  --fg:#ece9e2;--muted:#9a9ca3;--card:rgba(255,255,255,.09);--line:rgba(255,255,255,.14);--bg:#141417;--acc:#d9b96f;color-scheme:dark}
.top.dark .brand{color:#f4efe4}
.top.dark .chip{background:rgba(255,255,255,.07);color:#ece9e2;border-color:rgba(255,255,255,.16)}
.top.dark .tab{color:#9a9ca3}
.top.dark .tab[aria-current="page"],:root[data-skin] .top.dark .tab[aria-current="page"]{color:#fff;background:rgba(255,255,255,.1)}
.demo{grid-column:1/-1;grid-row:2;font:9.5px/1.2 var(--f-mono);color:var(--muted);text-align:center;margin-top:2px;opacity:.7}
@media (max-width:560px){.player{grid-template-columns:auto auto minmax(40px,1fr) auto auto;column-gap:2px} #pf{grid-column:1/-1;grid-row:2;justify-self:center;padding:2px 6px} .demo{grid-row:3} .pl-top span{font-size:11.5px}}

/* лента комментариев — «эфир» справа; темы окна: изумрудная (по умолчанию), светлая, тёмная, сепия — как в читалке */
.feed[data-cmt="light"]{--k-fg:27,31,35; --k-txt:#14171a; --k-acc:107,113,120; --k-ink:0,0,0; --k-head:#14171a; --k-on:#fff; --k-live:#3d8a5c; --k-vig:transparent;
  --k-bg:linear-gradient(180deg,#f7f8f9,#eceff1); --k-card:#fff; --k-cardl:rgba(0,0,0,.08); --k-form:#f1f3f4; --k-field:#fff; --k-fsh:rgba(0,0,0,.06)}
.feed[data-cmt="dark"]{--k-fg:212,212,212; --k-txt:#f1f1f1; --k-acc:107,194,120; --k-ink:255,255,255; --k-head:#f1f1f1; --k-on:#06290d; --k-live:#8fd9a0; --k-vig:rgba(0,0,0,.2);
  --k-bg:linear-gradient(180deg,#17181b,#0e0e10); --k-card:rgba(255,255,255,.05); --k-cardl:rgba(255,255,255,.06); --k-form:rgba(0,0,0,.25); --k-field:rgba(255,255,255,.06)}
.feed[data-cmt="sepia"]{--k-fg:70,54,36; --k-txt:#33261a; --k-acc:139,90,43; --k-ink:70,54,36; --k-head:#33261a; --k-on:#fff8ec; --k-live:#6e7d3a; --k-vig:rgba(110,80,45,.12);
  --k-bg:linear-gradient(180deg,#f5e9d0,#ecdcbc); --k-card:rgba(255,250,238,.7); --k-cardl:rgba(110,80,45,.14); --k-form:rgba(110,80,45,.06); --k-field:#fbf3e2; --k-fsh:rgba(110,80,45,.12)}
/* кнопка «Тема» и список тем — в шапке сайта и в шапке окна комментариев */
.vw{position:relative}
.vw>button{display:inline-flex;align-items:center;gap:6px}
.vw>button svg{width:16px;height:16px}
.pop{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:190px;padding:6px;border-radius:14px;background:var(--bg);color:var(--fg);border:1px solid var(--line);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.55);display:grid;gap:2px}
.pop .ph{font:11px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:8px 10px 6px}
.pop button{display:flex;align-items:center;gap:10px;border:0;background:none;padding:9px 10px;border-radius:9px;cursor:pointer;text-align:left;font-size:14px;color:inherit}
.pop button:hover{background:var(--card)}
.pop button[aria-pressed="true"]{font-weight:600}
.pop button[aria-pressed="true"]::after{content:"✓";margin-left:auto;color:var(--acc)}
.pop .sw{width:18px;height:18px;border-radius:50%;flex:none;border:1px solid rgba(128,128,128,.35)}
.f-head .vw>button{border:1px solid rgba(var(--k-ink),.16);background:rgba(var(--k-ink),.06);color:rgba(var(--k-fg),.85);border-radius:999px;padding:4px 10px;font-size:12.5px;cursor:pointer}

.feed{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;color:rgb(var(--k-fg));background:var(--k-bg);
  position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--sb-h) + var(--top-h) + 14px);height:calc(100vh - env(safe-area-inset-top,0px) - var(--sb-h) - var(--top-h) - 28px);
  margin:14px 14px 14px 0;border:1.5px solid var(--cu);border-radius:20px;overflow:hidden;box-shadow:0 0 24px -12px color-mix(in srgb,var(--cu) 70%,transparent)}  /* медная кайма, как у «Погружения» */
.feed::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 80px var(--k-vig,rgba(0,0,0,.28))}
.f-head{display:flex;align-items:center;gap:10px;padding:14px 16px 12px;border-bottom:1px solid rgba(var(--k-ink),.08);position:relative;z-index:3}
.f-head b{font-size:16px;color:var(--k-head,#fbf7ec)}
.f-head .n{font-size:12.5px;font-weight:700;color:var(--k-on,#14261e);background:rgb(var(--k-acc));border-radius:999px;padding:0 7px;line-height:20px}
/* «в эфире» — лента обновляется сама; плашка с подложкой, чтобы читалась в любой теме */
.live{display:inline-flex;align-items:center;gap:6px;padding:4px 9px 4px 8px;border-radius:999px;white-space:nowrap;
  font:700 11px/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--live-fg,var(--k-live,#c4f5d4));
  background:var(--live-bg,rgba(0,0,0,.28));border:1px solid var(--live-bd,rgba(160,240,190,.28))}
.feed[data-cmt="light"]{--live-fg:#17653a;--live-bg:#e3f3e8;--live-bd:rgba(23,101,58,.25)}
.feed[data-cmt="dark"]{--live-fg:#a6ecbb;--live-bg:rgba(107,194,120,.14);--live-bd:rgba(107,194,120,.35)}
.feed[data-cmt="sepia"]{--live-fg:#45601a;--live-bg:rgba(255,250,236,.85);--live-bd:rgba(69,96,26,.3)}
/* в «Погружении» фон прозрачный — цвета берём от темы страницы */
:root[data-skin="light"] .gbox{--live-fg:#17653a;--live-bg:#e3f3e8;--live-bd:rgba(23,101,58,.25)}
:root[data-skin="sepia"] .gbox{--live-fg:#45601a;--live-bg:rgba(255,250,236,.85);--live-bd:rgba(69,96,26,.3)}
:root[data-skin="night"] .gbox{--live-fg:#a6ecbb;--live-bg:rgba(107,194,120,.14);--live-bd:rgba(107,194,120,.35)}
.live i{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
@media (prefers-reduced-motion:reduce){.live i{animation:none}}
.f-head .sp{flex:1}
.f-head .x{display:none;border:0;background:none;color:rgba(var(--k-fg),.7);font-size:24px;cursor:pointer;line-height:1}
.f-list{overflow-y:auto;padding:12px 12px 6px;display:flex;flex-direction:column;gap:8px;position:relative;z-index:1;scrollbar-width:thin;scrollbar-color:rgba(var(--k-ink),.2) transparent}
.cm{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;padding:10px 12px;border-radius:14px;background:var(--k-card,linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025)));border:1px solid var(--k-cardl,rgba(255,255,255,.07))}
.cm.fresh{animation:arrive .6s ease-out}
@keyframes arrive{from{transform:translateY(10px);opacity:0;background:rgba(var(--k-acc),.25)}}
@media (prefers-reduced-motion:reduce){.cm.fresh{animation:none}}
.cm.ch{background:linear-gradient(180deg,rgba(var(--k-acc),.17),rgba(var(--k-acc),.05));border-color:rgba(var(--k-acc),.3)}
.cm .av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;background:linear-gradient(160deg,#3fae84,#11603f);font-size:14px}
.cm.ch .av{background:#08231c var(--logo) center/cover;border:1.5px solid rgb(var(--k-acc))}
.cm .h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:13px}
.cm .h b{color:rgba(var(--k-fg),.72);font-weight:600}
.cm .h time{color:rgba(var(--k-fg),.38);font-size:12px}
.badge{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--k-on,#14261e);background:rgb(var(--k-acc));border-radius:5px;padding:1px 5px}
.src{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:rgba(var(--k-fg),.45)}
.src svg{width:12px;height:12px}
.cm .t{color:var(--k-txt);font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.cm .q{margin:4px 0 6px;padding:5px 10px;border-left:3px solid rgba(var(--k-acc),.85);border-radius:0 10px 10px 0;background:rgba(var(--k-acc),.1);font:italic 13.5px/1.45 var(--f-read);color:rgba(var(--k-fg),.82)}
.cm .q .qby{font-style:normal;font-weight:600;color:rgb(var(--k-acc))}
.cm .rt{font-size:12px;color:rgba(var(--k-acc),.85)}
.cm .act{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:4px}
.cm .act button{border:0;background:none;padding:0;font-size:12px;color:rgba(var(--k-fg),.42);cursor:pointer}
.newbar{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:2;border:0;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--k-on,#14261e);background:rgb(var(--k-acc))}
.f-form{position:relative;z-index:1;padding:8px 12px 12px;border-top:1px solid rgba(var(--k-ink),.08);background:var(--k-form,linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.18)))}
.qbar{display:flex;gap:8px;margin-bottom:8px;padding:6px 6px 6px 10px;border-left:3px solid rgba(var(--k-acc),.85);border-radius:0 10px 10px 0;background:rgba(var(--k-acc),.12);font:italic 13px/1.4 var(--f-read);color:rgba(var(--k-fg),.85)}
.qbar span{flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qbar button{border:0;background:none;color:rgba(var(--k-fg),.6);font-size:18px;cursor:pointer;line-height:1}
.in{display:flex;gap:8px;align-items:flex-end}
/* ручка над полем ввода (как .cm-grip в читалке) */
.f-grip{height:18px;margin:-8px -12px 2px;cursor:ns-resize;touch-action:none;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;user-select:none}
.f-grip::before{content:"";width:44px;height:5px;border-radius:3px;background:rgba(var(--k-fg),.3);transition:background .15s,width .15s}
.f-grip:hover::before,.f-grip.drag::before{background:rgba(var(--k-acc),.85);width:60px}
.rich{flex:1;min-width:0;min-height:44px;max-height:160px;overflow-y:auto;padding:10px 13px;border-radius:16px;background:var(--k-field,rgba(0,0,0,.24));color:var(--k-txt);
  border:1px solid rgba(var(--k-ink),.14);box-shadow:inset 0 2px 6px var(--k-fsh,rgba(0,0,0,.35));outline:none;white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.4}
.rich:focus{border-color:rgba(var(--k-acc),.6)}
.rich:empty::before{content:attr(data-ph);color:rgba(var(--k-fg),.45)}
.send{width:44px;height:44px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.25);cursor:pointer;color:#fff;display:grid;place-items:center;
  background:linear-gradient(165deg,rgba(46,204,143,.92),rgba(4,140,92,.92) 50%,rgba(2,82,56,.95));box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 -6px 10px rgba(0,0,0,.25)}
.send svg{width:20px;height:20px}
.tools{display:flex;align-items:center;gap:4px;margin-top:8px;flex-wrap:wrap}
.tools button{height:28px;min-width:30px;border-radius:8px;border:1px solid rgba(var(--k-ink),.16);background:rgba(var(--k-ink),.06);color:rgba(var(--k-fg),.85);cursor:pointer;font:15px/1 var(--f-read)}
.tools button[aria-pressed="true"]{background:rgba(var(--k-acc),.3);border-color:rgba(var(--k-acc),.7)}
.tools .qp{font:12.5px/1 var(--f-ui);padding:0 10px;margin-left:6px}
.tools .cnt{margin-left:auto;font-size:12px;color:rgba(var(--k-fg),.45);font-variant-numeric:tabular-nums}
.qbtn{position:fixed;z-index:48;left:0;top:0;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-weight:600;cursor:pointer;color:var(--acc);
  background:var(--bg);box-shadow:0 12px 26px -10px rgba(0,0,0,.5);user-select:none;-webkit-user-select:none}
.fab{display:none}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:70;background:#1d1f22;color:#efe9da;border-radius:12px;padding:10px 16px;font-size:14px;box-shadow:0 14px 30px -12px rgba(0,0,0,.6);max-width:calc(100% - 32px)}

@media (max-width:640px){
  .cont{grid-template-columns:96px minmax(0,1fr);gap:12px}
  .cont img{width:96px}
  .cont .arr{display:none}
  .fresh-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
  .fresh-row button{scroll-snap-align:start}
  .hello{gap:24px;padding-top:40px}
  .mark{font-size:clamp(20px,7vw,30px);letter-spacing:.1em}
  .hello .hi{font-size:15px}
}
/* большие мониторы: всё чуть крупнее (шаг зависит и от ширины, и от высоты, чтобы приветствие не вылезало за экран) */
@media (min-width:1700px) and (min-height:900px){:root{--z:1.15}}
@media (min-width:2200px) and (min-height:1100px){:root{--z:1.35}}
@media (min-width:3000px) and (min-height:1500px){:root{--z:1.7}}
.top>*,.hello>*,.lcard,.lib,.side>*,.libx .mid>*,.gbox>*,.art,.player,.feed>*{zoom:var(--z,1)}
@media (min-width:2200px) and (min-height:1100px){.read{grid-template-columns:minmax(0,1fr) minmax(420px,520px)}}
/* невысокие экраны ноутбуков (1366×768, 1920×1080 при 125%): приветствие и вход — без прокрутки */
@media (min-width:641px) and (max-height:900px){
  .hello{gap:clamp(12px,2.6vh,30px);padding-top:clamp(18px,4vh,56px);padding-bottom:clamp(18px,4vh,64px)}
  .hello .head{gap:clamp(6px,1.4vh,14px)}
  .mark{font-size:clamp(26px,6.4vh,52px)}
  .hello .go{padding:clamp(10px,1.7vh,15px) 26px}
  .panel{gap:clamp(8px,1.4vh,12px)}
  .cont{padding:clamp(8px,1.2vh,12px)}
  .cont img{width:auto;height:clamp(48px,9vh,74px)}
  .cont{grid-template-columns:auto minmax(0,1fr) auto}
  .fresh{padding:clamp(10px,1.6vh,14px)}
  .fresh-h{margin-bottom:clamp(8px,1.2vh,12px)}
  .panel{max-width:min(940px,118vh)}       /* обложки с прежними пропорциями — ширину подгоняем под высоту экрана */
  .login{padding-block:clamp(14px,3vh,48px)}
  .lcard{padding:clamp(18px,3vh,30px) 26px}
  .lcard img.l{width:clamp(44px,7vh,64px);height:clamp(44px,7vh,64px)}
  .lcard h1{font-size:clamp(22px,3.6vh,28px);margin-top:clamp(6px,1.4vh,14px)}
  .lcard p{margin-bottom:clamp(12px,2.2vh,20px)}
  .qr{margin-top:clamp(8px,1.6vh,18px);grid-template-columns:clamp(86px,14vh,120px) minmax(0,1fr)}
  .qr .box{width:clamp(86px,14vh,120px);height:clamp(86px,14vh,120px)}
  .lcard small{margin-top:clamp(6px,1.4vh,14px)}
}
@media (min-width:641px) and (max-height:700px){ .note{display:none} }
/* ===== узкие экраны ===== */
@media (max-width:980px){
  .read{grid-template-columns:1fr;height:auto}
  .col{overflow:visible}
  .feed{position:fixed;inset:auto 0 0;height:min(78vh,640px);z-index:45;margin:0;border-radius:22px 22px 0 0;border-bottom:0;transform:translateY(105%);transition:transform .3s ease;
    padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -20px 50px -20px rgba(0,0,0,.6)}
  .feed.open{transform:none}
  .f-head .x{display:block}
  .fab{display:inline-flex;position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(150px + env(safe-area-inset-bottom,0px));z-index:20;align-items:center;gap:8px;border:0;border-radius:999px;padding:11px 16px;font-weight:600;cursor:pointer;color:#14261e;background:linear-gradient(180deg,#e2c582,#c9a457);box-shadow:0 12px 24px -10px rgba(0,0,0,.6)}
  .fab svg{width:18px;height:18px}
  .who,.top .brand span,.top .sp,.top .vw span{display:none}
  .top{gap:6px}
  .top nav{flex:1}
  .top .tab{padding:8px 8px}
  .top .tab .full{display:none}
  .top .tab .short{display:inline}
  .art{padding:16px 16px 40px}
  .art h1{font-size:27px}
  .player{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom,0px))}
}
/* ===== телефон: нижняя панель вкладок, «Погружение» — отдельный экран ===== */
.tabbar{display:none}
.afl{display:none}
@media (max-width:700px){
  :root{--tb-h:58px}
  body.has-tb{padding-bottom:calc(var(--tb-h) + env(safe-area-inset-bottom,0px))}
  .tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;
    height:calc(var(--tb-h) + env(safe-area-inset-bottom,0px));padding:0 max(4px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(4px,env(safe-area-inset-left,0px));
    background:color-mix(in srgb,var(--bg) 90%,transparent);border-top:1px solid var(--line);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
  .tabbar button{border:0;background:none;display:grid;justify-items:center;align-content:center;gap:4px;padding:0;min-width:0;cursor:pointer;color:var(--muted);font:500 11px/1 var(--f-ui);-webkit-tap-highlight-color:transparent}
  .tabbar svg{width:23px;height:23px}
  .tabbar span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabbar [aria-current="page"]{color:var(--acc)}
  :root[data-skin="green"] .tabbar [aria-current="page"]{color:var(--brass-hi)}
  .tabbar.dark{background:#0b0b0d;border-top-color:rgba(255,255,255,.08);color-scheme:dark}
  .tabbar.dark button{color:#9a9ca3}
  .tabbar.dark [aria-current="page"]{color:var(--brass-hi)}
  /* шапка: разделы ушли вниз — остаются логотип с названием, «Тема», «Выйти» */
  .top nav{display:none}
  .top .sp{display:block}
  .top .brand span{display:inline;font-size:12.5px;letter-spacing:.14em}
  .top{gap:8px}
  .hello{min-height:calc(100vh - var(--sb-h) - var(--top-h) - var(--tb-h) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
  /* библиотека: авторы — одна строка с прокруткой вбок, выпуски — одной колонкой, чат — во вкладке */
  .side{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:14px 16px 4px;scroll-padding-inline:16px}
  .side::-webkit-scrollbar{display:none}
  .side button{flex:none}
  .libx .mid{padding-inline:0;padding-bottom:24px}
  .libx .grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .card h3{font-size:17px;margin-top:11px}
  .card .meta{flex-wrap:nowrap;white-space:nowrap;overflow:hidden;gap:12px}
  .libx .gchat,.gfab{display:none}
  /* «Погружение» на весь экран между шапкой и панелью */
  .gpage .gchat{display:grid;position:static;transform:none;transition:none;padding:0;
    height:calc(100vh - var(--sb-h) - var(--top-h) - var(--tb-h) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    height:calc(100dvh - var(--sb-h) - var(--top-h) - var(--tb-h) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
  .gpage .gbox{border:0;border-radius:0;box-shadow:none;background:transparent}
  .gpage .g-head .x{display:none}
  .gpage .f-form{border-radius:0}
  /* статья: плеер и кнопка комментариев — над панелью */
  .player{bottom:calc(var(--tb-h) + env(safe-area-inset-bottom,0px) + 8px)}
  .fab{bottom:calc(var(--tb-h) + env(safe-area-inset-bottom,0px) + 66px);width:52px;height:52px;padding:0;justify-content:center;border-radius:50%}
  .fab span{display:none}
  .fab svg{width:21px;height:21px}
  .fab b{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--cu);color:#fff;font:700 11.5px/20px var(--f-ui);text-align:center}
  .art{padding-bottom:24px}
  /* авторы на телефоне — отдельная вкладка; над выпусками — имя выбранного автора */
  .side{display:none}
  .afl:not(:empty){display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0 0 14px}
  .afl b{font-size:20px;font-weight:600;line-height:1.2}
  .afl span{font-size:13.5px;color:var(--muted)}
  .apage{display:grid;gap:12px;padding:18px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px))}
  .ap{display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;padding:9px 14px 9px 9px;border-radius:16px;cursor:pointer;text-align:left;
    color:var(--sbfg);background:linear-gradient(180deg,var(--sb1),var(--sb2));border:.5px solid var(--rim-side);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 24px -16px rgba(0,0,0,.6);-webkit-tap-highlight-color:transparent}
  .ap:active{transform:translateY(1px)}
  .ap[aria-pressed="true"]{color:var(--pbfg);background:linear-gradient(180deg,var(--pb1),var(--pb2))}
  :root[data-skin="night"] .ap[aria-pressed="true"]{background:linear-gradient(180deg,#26272b,#0b0b0d)}
  .ap img{display:block;width:76px;aspect-ratio:16/9;object-fit:cover;border-radius:9px}
  .ap .an{min-width:0;display:grid;gap:3px}
  .ap b{font-size:16px;font-weight:600;line-height:1.25}
  .ap small{font-size:12.5px;color:var(--ptx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ap .ar{font-size:24px;line-height:1;color:var(--ptx)}
  .libx .mid{padding-top:18px}
  /* плеер — одна низкая строка: ▶ | громкость | перемотка | время | 1× | глаз «Следить» */
  .player{grid-template-columns:auto auto minmax(50px,1fr) auto auto auto;column-gap:4px;padding:5px 7px;border-radius:14px;width:calc(100% - 24px)}
  .pl-ctl .play{width:30px;height:30px}
  .pl-ctl .play svg{width:14px;height:14px}
  :root .pl-ctl button:not(.play){height:26px;padding:0 8px;font-size:12.5px}
  #pf{grid-column:6;grid-row:1;justify-self:auto;padding:0 6px!important;width:30px;display:grid;place-items:center}
  #pf svg{display:block;width:17px;height:17px}
  #pf span,.pl-top .td{display:none}
  .pl-top span{font-size:12px;padding:0 2px}
  .seek{margin:0 2px}
  .toast{bottom:calc(var(--tb-h) + env(safe-area-inset-bottom,0px) + 14px)}
}

/* ===== сайт (этап 1): то, чего не было в песочнице ===== */
body{background:var(--bg)}
.boot{min-height:100vh;display:grid;place-content:center;gap:14px;justify-items:center;background:#0d0a07;color:#c3cdc6;font:16px var(--f-ui);margin:0}
.lcard a.btn[aria-disabled="true"]{opacity:.55;pointer-events:none}
.lcard .lnk{background:none;border:0;padding:0;font:inherit;color:var(--brass-hi);text-decoration:underline;cursor:pointer}
.nocov{display:block;aspect-ratio:16/9;background:radial-gradient(80% 90% at 50% 0%,#1b4a3d,#0a1a16);border-radius:inherit}
.txt>h2{margin:18px 0 0;font:600 calc(var(--rs,18px) * 1.15)/1.3 var(--f-ui);color:var(--fg)}
.txt>pre{margin:0 -10px;padding:10px;border-radius:10px;white-space:pre-wrap;font:calc(var(--rs,18px) * .85)/1.5 var(--f-mono);background:var(--card);position:relative;z-index:1}
.txt>p.wait{color:var(--muted);cursor:default}
.txt:not(.tap)>p,.txt:not(.tap)>blockquote{cursor:auto}
.txt a{color:var(--acc)}
.spoiler{background:currentColor;border-radius:4px;transition:background .2s}
.spoiler:hover,.spoiler:focus{background:transparent}
.empty{color:var(--muted);padding:20px 0}
.soon{margin:auto;max-width:300px;padding:22px 18px;text-align:center;display:grid;gap:8px;color:rgba(var(--k-fg),.85);font-size:14.5px;line-height:1.5}
.soon b{color:var(--k-head,rgb(var(--k-acc)));font-size:16px}
.g-list .soon{color:inherit;opacity:.85}
/* этап 4: пока сайт закрыт — где искать читалку */
.login{gap:16px;align-content:center}
.lread{width:min(440px,100%);box-sizing:border-box;padding:16px 18px;border-radius:18px;background:rgba(201,164,87,.12);border:1px solid rgba(236,211,149,.55);
  color:#efe9da;text-align:center;display:grid;gap:6px;zoom:var(--z,1)}
.lread b{font:400 19px/1.2 var(--f-disp);color:var(--brass-hi)}
.lread span{color:#c3cdc6;font-size:14px}
.lrb{display:flex;gap:10px;margin-top:6px}
.lrb .btn{flex:1;padding:11px 12px;font-size:14px}
@media (max-width:420px){.lrb{flex-direction:column}}
/* этап 5: «Погружение» — живая лента из группы */
.gwait{margin:auto;max-width:300px;text-align:center;color:var(--muted);font-size:14px;line-height:1.5}
.gm .rt{font-size:12px;color:var(--muted);margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gm .rt span{opacity:.85}
.gm .md{font-size:13px;color:var(--muted);margin:2px 0}
/* «Ответить» / «Удалить» — всегда видны, отдельной строкой под текстом (не поверх него) */
.gm .act{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 10px;margin-top:4px}
.gm .act button{border:0;background:none;padding:2px 4px;font:inherit;font-size:12px;color:var(--cu);cursor:pointer}
.gm.mine .bb{border-color:color-mix(in srgb,var(--cu) 40%,transparent)}
.gm.gpost{grid-template-columns:minmax(0,1fr)}
.gm.gpost .ref{margin-bottom:4px}
.gm.gpost .h{justify-content:flex-end;margin:0}
.gm .ref .nocov{width:46px;height:26px;border-radius:5px;flex:none;aspect-ratio:auto}
.gm .bb{position:relative}
.gm .t{padding-right:4px}
.gm .act .del{color:#d06a5a}
/* этап 5: комментарии к статье */
.cm .act .del{color:#d06a5a}
.cm .t.gone{font-style:italic;opacity:.6}
.fab b:empty{display:none}
.card .meta .cmi svg{width:12px;height:12px;vertical-align:-1px;fill:currentColor}
.f-list .gwait{color:rgba(var(--k-fg),.6)}
/* «Участники» — только для администраторов канала */
.chip.memb{display:inline-flex;align-items:center;gap:6px}
.chip.memb svg{width:17px;height:17px}
.chip.memb.on{border-color:var(--cu);color:var(--cu)}
@media (max-width:700px){.chip.memb span{display:none}.chip.memb{padding:6px 9px}}
.mpage{max-width:1100px;margin:0 auto;padding:22px 20px 40px;zoom:var(--z,1)}
.mhead h1{margin:0;font:400 30px/1.15 var(--f-disp);color:var(--fg)}
.mnote{margin:6px 0 0;padding:8px 12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--cu) 45%,transparent);background:color-mix(in srgb,var(--cu) 8%,transparent);color:var(--fg);font-size:14px;display:inline-block}
.mtools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0 12px}
.mchips{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto}
.mchips button{border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:999px;padding:6px 12px;font:inherit;font-size:13.5px;cursor:pointer}
.mchips button b{font-weight:700;opacity:.7;margin-left:2px}
.mchips button[aria-pressed="true"]{background:var(--cu);border-color:var(--cu);color:#fff}
.mchips button[aria-pressed="true"] b{opacity:1}
.msearch{flex:0 1 280px;min-width:200px;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--fg);font:inherit;font-size:14px}
.mlist{display:grid;gap:2px}
.mrow{display:grid;grid-template-columns:40px minmax(0,2.2fr) minmax(0,1.4fr) minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,1.3fr);gap:12px;align-items:center;
  width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--fg);padding:10px 8px;font:inherit;font-size:14px;cursor:pointer;border-radius:8px}
.mrow:hover{background:var(--card)}
.mrow.mh{cursor:default;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding-block:6px}
.mrow.mh:hover{background:transparent}
.mav{position:relative;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;background:linear-gradient(135deg,#2c7a5f,#145240)}
.mav.on::after{content:"";position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:#3ccf7b;box-shadow:0 0 0 2px var(--bg)}
.mav.big{width:52px;height:52px;font-size:20px}
.mname{min-width:0;display:grid}
.mname b,.mname small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mname small{color:var(--muted);font-size:12.5px}
.mc{color:var(--muted);font-size:13px}
.mst{display:inline-block;font-style:normal;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--card);border:1px solid var(--line);white-space:nowrap}
.st-owner,.st-admin{color:#b07a2c;border-color:rgba(176,122,44,.45);background:rgba(176,122,44,.1)}
.st-sub{color:#2f8a5e;border-color:rgba(47,138,94,.4);background:rgba(47,138,94,.08)}
.st-ended,.st-closed,.st-kicked{color:var(--muted)}
.st-blocked{color:#d0534a;border-color:rgba(208,83,74,.45);background:rgba(208,83,74,.08)}
.mcard{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:16px}
.mbox{position:relative;width:min(440px,100%);max-height:90vh;overflow:auto;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:18px;padding:22px 22px 16px;box-shadow:0 24px 60px -20px rgba(0,0,0,.6)}
.mbox .x{position:absolute;top:10px;right:12px;border:0;background:none;color:var(--muted);font-size:24px;cursor:pointer}
.mtop{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.mtop b{display:block;font-size:18px;margin-bottom:4px}
.mbox dl{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:8px 14px;font-size:14px}
.mbox dt{color:var(--muted)}
.mbox dd{margin:0}
@media (max-width:700px){
  .mpage{padding:16px 14px 30px}
  .mrow.mh{display:none}
  .mrow{grid-template-columns:40px minmax(0,1fr) auto;row-gap:2px}
  .mrow .mc{grid-column:2/4;font-size:12.5px}
  .mrow .mc::before{content:attr(data-l) ": "}
  .msearch{flex:1 1 100%}
}
/* гости по приглашению */
body.guest .f-form{display:none}
body.guest .gm .act,body.guest .cm .act{display:none}
.gnote{margin:0;padding:12px 14px;text-align:center;font-size:13.5px;color:rgba(var(--k-fg),.75);border-top:1px solid rgba(var(--k-ink),.08)}
.gbadge{font-style:normal;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:999px;border:1px solid var(--cu);color:var(--cu)}
.top.dark .gbadge{color:#e0a46a;border-color:#e0a46a}
.gname{display:grid;gap:10px;text-align:left;margin-top:8px}
.gname label{color:#c3cdc6;font-size:14px}
.gname input{padding:12px 14px;border-radius:12px;border:1px solid rgba(236,211,149,.45);background:rgba(0,0,0,.3);color:#f4efe4;font:inherit;font-size:16px}
/* вход: код из бота */
.otp{display:flex;gap:10px;justify-content:center;margin:10px 0 4px}
.otp input{width:8.5ch;padding:12px 14px;border-radius:12px;border:1px solid rgba(236,211,149,.45);background:rgba(0,0,0,.3);color:#f4efe4;font:22px/1 var(--f-mono);letter-spacing:.3em;text-align:center}
.otp .btn{width:auto;margin:0}
#lgErr{color:#f0a58a;min-height:1.2em}
.gend{margin:0 0 12px;padding:10px 12px;border-radius:12px;background:rgba(229,72,77,.12);border:1px solid rgba(229,72,77,.4);color:#f2c4c4!important;font-size:14px}
.minvb{margin-top:12px;padding:5px 16px;font-size:14px;border-radius:11px}   /* на треть ниже обычной кнопки (по просьбе владельца) */
.minvf{margin-top:12px;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--card);max-width:640px}
.minvf b{display:block;margin-bottom:8px}
.minvf .hint{color:var(--muted);font-size:13px;margin:10px 0 0}
.mterms{display:flex;flex-wrap:wrap;gap:6px}
.mterms button{border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:999px;padding:7px 12px;font:inherit;font-size:13.5px;cursor:pointer}
.mterms button:hover{border-color:var(--cu)}
.mlink{display:flex;gap:8px;margin-top:12px}
.mlink input{flex:1;min-width:0;padding:9px 11px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:13px var(--f-mono)}
.macts{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.st-guest{color:#4f86c6;border-color:rgba(79,134,198,.45);background:rgba(79,134,198,.08)}
.st-guest_end,.st-inv_expired,.st-inv_revoked{color:var(--muted)}
.st-inv_wait{color:#b07a2c;border-style:dashed}
/* «Участники»: права, журнал, действия */
.mown{margin-top:12px}
.mowntabs{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mowntabs button{border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:999px;padding:6px 12px;font:inherit;font-size:13.5px;cursor:pointer}
.mowntabs button[aria-pressed="true"]{border-color:var(--cu);color:var(--cu)}
.mowntabs .hint,.mrights .hint,.mbox .hint{color:var(--muted);font-size:12.5px}
.mrights,.mlog{margin-top:10px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--card);max-width:760px}
.mrt{display:grid;grid-template-columns:minmax(0,1fr) 130px 170px;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.mrt:last-child{border-bottom:0}
.mrt b{font-size:12px;font-weight:600;color:var(--muted);text-align:center}
.mrt label{text-align:center}
.mrt input{width:18px;height:18px;accent-color:var(--cu);cursor:pointer}
.mrt small{color:var(--muted);font-size:12px}
.mlog{display:grid;gap:6px;font-size:13.5px;max-height:320px;overflow:auto}
.mlog time{color:var(--muted);font-size:12.5px}
.macts .btn{padding:8px 14px;font-size:14px;color:var(--fg);background:var(--card);border-color:var(--line)}
.macts .btn.mbad{color:#d0534a;border-color:rgba(208,83,74,.45)}
.mterm2{margin-top:10px;align-items:center}
.mterm2 .hint{width:100%}
.mnoadm{margin-top:14px}
@media (max-width:700px){.mrt{grid-template-columns:minmax(0,1fr) 70px 90px}.mrt b{font-size:10.5px}}

/* громкость: значок в плеере + всплывающий ползунок над ним */
.player{position:sticky}
:root .pl-ctl .vol{width:34px;height:30px;padding:0!important;display:grid;place-items:center}
.pl-ctl .vol svg{width:18px;height:18px;display:block}
.pl-ctl .vol.off{opacity:.75}
.volpop{position:absolute;left:44px;bottom:calc(100% + 8px);z-index:6;display:grid;gap:8px;padding:12px 14px;border-radius:14px;min-width:200px;
  background:color-mix(in srgb,var(--bg) 94%,transparent);border:1px solid var(--line);box-shadow:0 14px 34px -14px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.volpop[hidden]{display:none}
.volpop input{width:100%;accent-color:var(--seek,var(--acc))}
.volpop button{border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer}
@media (max-width:700px){:root .pl-ctl .vol{width:30px;height:26px}.pl-ctl .vol svg{width:16px;height:16px}.volpop{left:8px;right:8px;min-width:0}}

/* ================= ИНФОРМАЦИЯ И ДОКУМЕНТЫ: глубокий изумруд, выпуклые кнопки ================= */
:root{--em-1:#0c3d30;--em-2:#08291f;--em-3:#041611;--em-hi:#1f6b55;--em-glow:#5fd6a6;--em-ink:#e6f4ec;--em-mute:#9cc4b2;--em-line:rgba(127,224,181,.18)}
body.is-info{background:radial-gradient(110% 70% at 15% 0%,#145a47 0%,var(--em-1) 32%,var(--em-2) 62%,var(--em-3) 100%) fixed;color:var(--em-ink)}
body.is-info .top{background:rgba(6,32,25,.78);border-bottom-color:var(--em-line);color:var(--em-ink);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
body.is-info .top .brand,body.is-info .top .tab,body.is-info .top .who{color:var(--em-ink)}
.top.lite{padding:0 18px}
.top.lite .chip{color:var(--em-ink);background:rgba(255,255,255,.06);border:1px solid var(--em-line)}
.info{display:grid;grid-template-columns:270px minmax(0,780px);gap:34px;justify-content:center;align-items:start;padding:34px 24px 60px;max-width:1180px;margin:0 auto}
/* кнопки разделов: выпуклые, при наведении — увеличение, при нажатии — продавливаются */
.inav{position:sticky;top:calc(var(--top-h) + var(--sb-h) + 24px);display:grid;gap:12px}
.inav button{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border:1px solid rgba(127,224,181,.22);border-radius:16px;cursor:pointer;text-align:left;
  font:600 15px/1.25 var(--f-ui);color:var(--em-ink);background:linear-gradient(180deg,#1d6650 0%,#13493a 52%,#0d382c 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.28),0 6px 0 #062219,0 12px 22px -10px rgba(0,0,0,.65);
  transform:translateY(0) scale(1);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
.inav button i{flex:none;display:grid;place-items:center;min-width:34px;height:34px;padding:0 6px;border-radius:11px;font:700 14px/1 var(--f-ui);font-style:normal;
  color:#062219;background:radial-gradient(circle at 35% 30%,#bdf5da,var(--em-glow) 55%,#2f9e74);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 6px rgba(0,0,0,.35)}
.inav button:hover{transform:translateY(-1px) scale(1.045);filter:brightness(1.08)}
.inav button:active{transform:translateY(5px) scale(.985);box-shadow:inset 0 3px 8px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.08),0 1px 0 #062219,0 4px 10px -6px rgba(0,0,0,.6)}
.inav button[aria-current="page"]{background:linear-gradient(180deg,#2a8a6b 0%,#1b6a52 55%,#145641 100%);border-color:rgba(127,224,181,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(0,0,0,.25),0 6px 0 #073326,0 0 0 3px rgba(95,214,166,.16),0 14px 26px -10px rgba(0,0,0,.7)}
.inav button:focus-visible{outline:2px solid var(--em-glow);outline-offset:3px}
/* содержимое */
.idoc{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1px solid var(--em-line);border-radius:22px;padding:34px 38px 40px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 60px -30px rgba(0,0,0,.7);font:16px/1.65 var(--f-ui);color:var(--em-ink)}
.idoc h1{margin:0 0 10px;font:400 clamp(26px,3.4vw,34px)/1.2 var(--f-disp);color:#f3fbf6;letter-spacing:.01em}
.idoc h2{margin:30px 0 8px;font:700 17px/1.3 var(--f-ui);color:#bff0d8;letter-spacing:.01em}
.idoc .lead{font-size:18px;color:#d6ebe0;margin:6px 0 4px}
.idoc .meta{margin:0 0 14px;font-size:13px;color:var(--em-mute);letter-spacing:.04em}
.idoc p{margin:8px 0}
.idoc ul{margin:8px 0;padding-left:22px}
.idoc li{margin:6px 0}
.idoc li::marker{color:var(--em-glow)}
.idoc a{color:#8ff0c3;text-decoration:underline;text-decoration-color:rgba(143,240,195,.35);text-underline-offset:3px}
.idoc a:hover{text-decoration-color:currentColor}
.idoc b{color:#f0faf4}
.idoc .req{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:0;margin:20px 0 6px;border:1px solid var(--em-line);border-radius:14px;overflow:hidden}
.idoc .req dt,.idoc .req dd{margin:0;padding:12px 16px;border-top:1px solid var(--em-line)}
.idoc .req dt{color:var(--em-mute);font-size:14px;background:rgba(0,0,0,.14)}
.idoc .req dt:first-of-type,.idoc .req dt:first-of-type+dd{border-top:0}
.idoc .todo{display:inline-block;margin:2px 0;padding:2px 9px;border-radius:8px;background:#f3d36b;color:#2a2205;font:600 13px/1.5 var(--f-ui)}
.idoc .age16{width:112px;height:112px;margin:18px 0 10px;display:grid;place-items:center;border-radius:50%;font:800 38px/1 var(--f-ui);color:#062219;
  background:radial-gradient(circle at 35% 30%,#c9f8e1,var(--em-glow) 55%,#2f9e74);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 10px 0 #0a3a2c,0 20px 34px -12px rgba(0,0,0,.7)}
/* выпуклые ▲ ▼ */
.iupdn{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:36;display:grid;gap:12px}
.iupdn button{width:50px;height:50px;border-radius:50%;border:1px solid rgba(127,224,181,.35);cursor:pointer;font-size:16px;color:#062219;
  background:radial-gradient(circle at 35% 28%,#d3fae6,#6fdcae 45%,#2a8f69 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.65),inset 0 -3px 0 rgba(0,0,0,.25),0 5px 0 #0a3a2c,0 12px 20px -8px rgba(0,0,0,.7);transition:transform .14s ease,box-shadow .14s ease}
.iupdn button:hover{transform:scale(1.08)}
.iupdn button:active{transform:translateY(4px) scale(.96);box-shadow:inset 0 3px 7px rgba(0,0,0,.35),0 1px 0 #0a3a2c,0 4px 8px -4px rgba(0,0,0,.6)}
/* ================= ПОДВАЛ ================= */
.foot{font:14px/1.5 var(--f-ui)}
.foot[hidden]{display:none}
.foot a{color:inherit;text-decoration:none}
.foot a:hover{text-decoration:underline;text-underline-offset:3px}
.fshort{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;justify-content:center;padding:18px 20px 22px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.f16{display:inline-grid;place-items:center;min-width:34px;height:24px;padding:0 6px;border-radius:7px;border:1px solid currentColor;font-weight:700;font-size:12px;letter-spacing:.02em}
.foot.finfo .fshort{border-top-color:var(--em-line);color:var(--em-mute)}
.foot.flogin{background:var(--abyss)}
.foot.flogin .fshort{border-top-color:rgba(236,211,149,.14);color:rgba(232,245,228,.6)}
.ffull{color:#bdb9b0;background:#0e0e10;border-top:1px solid rgba(255,255,255,.10)}   /* чёрная, как полоска подвала на остальных страницах */
.fcols{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:28px;max-width:1180px;margin:0 auto;padding:38px 28px 26px}
.fcols h3{margin:0 0 10px;font:700 12px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:#868990}
.fcols>div{display:grid;align-content:start;gap:8px}
.fbrand b{font:400 22px/1.2 var(--f-disp);color:#f3fbf6;letter-spacing:.06em}
.fbrand b i{font-style:normal;color:var(--brass);margin:0 .15em}
.fbrand span{color:#a3a29c}
.fbrand small{color:#7f8187;font-size:12.5px}
.flegal{display:flex;gap:14px;align-items:center;justify-content:space-between;max-width:1180px;margin:0 auto;padding:16px 28px 22px;border-top:1px solid rgba(255,255,255,.08);color:#7f8187;font-size:12.5px}
.flegal .f16{color:#bdb9b0}
.lagree{display:block;margin-top:6px;color:rgba(232,245,228,.62);font-size:12px;line-height:1.45}
.lagree a{color:#ecd395;text-decoration:underline;text-underline-offset:2px}
@media (max-width:900px){
  .fcols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fbrand{grid-column:1/-1}
}
@media (max-width:700px){
  .info{grid-template-columns:minmax(0,1fr);gap:16px;padding:16px 16px 40px}
  .inav{position:static;display:flex;gap:10px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none}
  .inav::-webkit-scrollbar{display:none}
  .inav button{width:auto;flex:none;padding:10px 13px;font-size:14px;white-space:nowrap}
  .inav button i{min-width:28px;height:28px;font-size:12px}
  .inav button:hover{transform:none}
  .idoc{padding:22px 18px 26px;border-radius:18px;font-size:15.5px}
  .idoc .req{grid-template-columns:minmax(0,1fr)}
  .idoc .req dd{border-top:0;padding-top:0}
  .iupdn{right:max(14px,env(safe-area-inset-right,0px));bottom:calc(var(--tb-h,0px) + env(safe-area-inset-bottom,0px) + 16px)}
  .iupdn button{width:44px;height:44px}
  .fcols{grid-template-columns:minmax(0,1fr);gap:22px;padding:28px 20px 18px}
  .flegal{flex-direction:column;align-items:flex-start;padding:14px 20px calc(var(--tb-h,0px) + 22px)}
  .fshort{padding-bottom:calc(var(--tb-h,0px) + 22px)}
  body:not(.has-tb) .fshort{padding-bottom:22px}
}

/* «Открыть библиотеку» на «Главной» — прежняя латунь (как была), но на четверть ниже и надписью заглавными */
.hello .go{color:#1c1408;text-transform:uppercase;letter-spacing:.14em;font-weight:700;font-size:14px;padding:9px 28px;border:0;
  background:linear-gradient(180deg,var(--brass-hi),var(--brass) 55%,#a7802f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 24px -12px rgba(0,0,0,.7);transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}
.hello .go:hover{filter:brightness(1.06)}
.hello .go:active{transform:translateY(2px);box-shadow:inset 0 2px 6px rgba(80,55,10,.45),0 4px 10px -8px rgba(0,0,0,.7)}
.hello .go span{letter-spacing:0}
/* кнопки авторов (Библиотека и страница «Авторы» на телефоне): при наведении — подсвечиваются, при нажатии — утопают */
.side button,.ap{position:relative;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
@media (hover:hover){
  .side button:hover{filter:brightness(1.22);box-shadow:0 0 0 1px rgba(217,185,111,.45),0 0 14px -2px rgba(95,214,166,.35)}
  .ap:hover{filter:brightness(1.15);box-shadow:0 0 0 1px rgba(217,185,111,.4),0 0 16px -4px rgba(95,214,166,.3)}
}
.side button:active,.ap:active{transform:translateY(3px) scale(.97);filter:brightness(.95);
  box-shadow:inset 0 3px 8px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.06)}
/* Библиотека: карточка выпуска при наведении слегка увеличивается (вместе с обложкой и подписью), тень глубже */
.grid .card{position:relative;transition:transform .22s ease}
.grid .card img{transition:box-shadow .22s ease}
@media (hover:hover){
  .grid .card:hover{transform:scale(1.035);z-index:2}
  .grid .card:hover img{box-shadow:0 18px 34px -14px rgba(0,0,0,.75)}
}
.grid .card:active{transform:scale(.99)}
/* вышел новый выпуск, пока страница открыта (loadCat в site.js): карточка мягко проявляется */
.newin{animation:newin 1.4s ease-out}
@keyframes newin{from{opacity:0;transform:translateY(10px) scale(.97)}}
@media (prefers-reduced-motion:reduce){.newin{animation:none}}