/* Transcribsi v2: общий слой для статей и посадочных. Токены те же, что у первого экрана (версия 5 «Ночь»).
   Отступы: 2 4 8 12 16 24 32 40 48 64 80 96. Шрифт: Manrope, для арабского, деванагари и японского Noto. */
:root{
 --ease:cubic-bezier(0.22,1,0.36,1);
 --accent:#FF7A59; --accent-ink:#1A0F0B;
 --bg:#181818; --s1:#1F1F1F; --s2:#272727; --line:#313131;
 --tx:#F4F4F4; --mut:#9B9B9B; --h1a:#FFFFFF; --h1b:#9B9B9B;
 --glass:rgba(31,31,31,.72); --who-a:#FF9C82; --who-b:#8FB8FF; --who-c:#9EE0B5;
 --font:Manrope,system-ui,sans-serif;
 color-scheme:dark;
}
html[lang="ar"]{--font:Manrope,"Noto Sans Arabic",system-ui,sans-serif}
html[lang="ja"]{--font:Manrope,"Noto Sans JP",system-ui,sans-serif}
html[lang="hi"]{--font:Manrope,"Noto Sans Devanagari",system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--tx);font-family:var(--font);font-size:16px;line-height:24px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,textarea{font:inherit;color:inherit}
p{margin:0;text-wrap:pretty}
h1,h2,h3{margin:0;font-weight:700;text-wrap:balance}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip{position:fixed;left:16px;top:-64px;z-index:60;background:var(--s1);padding:8px 12px;border-radius:8px;transition:transform .3s var(--ease)}
.skip:focus{transform:translateY(80px)}
main{position:relative;z-index:1;overflow-x:clip}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.ic{width:20px;height:20px;flex:none}

/* навигация: плавающая плашка с размытием */
nav.top,.rbar,.menu{direction:ltr}
nav.top{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:24px;
 padding:8px 8px 8px 16px;border-radius:9999px;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line)}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{max-width:none;flex:none;height:22px;width:auto;display:block}
nav.top a.l{font-size:14px;line-height:20px;color:var(--mut);text-decoration:none;transition:color .3s var(--ease);white-space:nowrap}
nav.top a.l:hover,nav.top a.l[aria-current]{color:var(--tx)}
.burger{display:none;width:40px;height:40px;border:0;border-radius:9999px;background:var(--s2);cursor:pointer;place-items:center}
.btn{display:inline-flex;white-space:nowrap;align-items:center;gap:8px;border:0;cursor:pointer;border-radius:9999px;padding:12px 16px;font-weight:600;font-size:16px;line-height:24px;
 background:var(--accent);color:var(--accent-ink);text-decoration:none;transition:transform .3s var(--ease),opacity .3s var(--ease),background-color .3s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.btn.sm{padding:8px 12px;font-size:14px;line-height:20px}
.btn.ghost{background:var(--s2);color:var(--tx)}
.btn .ic{width:16px;height:16px}
.menu{position:fixed;inset:0;z-index:39;background:var(--bg);padding:96px 24px 24px;display:flex;flex-direction:column;gap:8px;
 opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.menu a{font-size:30px;line-height:36px;font-weight:600;text-decoration:none;opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
html[data-menu] .menu{opacity:1;pointer-events:auto}
html[data-menu] .menu a{opacity:1;transform:none}
.menu a:nth-child(2){transition-delay:60ms}.menu a:nth-child(3){transition-delay:120ms}.menu a:nth-child(4){transition-delay:180ms}.menu a:nth-child(5){transition-delay:240ms}

/* общий ритм секций */
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.narrow{max-width:720px;margin:0 auto;padding:0 24px}
.sec{padding:96px 0}
.kicker{font-size:14px;line-height:20px;font-weight:600;color:var(--accent)}
.h1{font-size:48px;line-height:1;letter-spacing:-.02em;max-width:680px;background:linear-gradient(90deg,var(--h1a),var(--h1b));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:4px}
.h2{font-size:36px;line-height:40px;letter-spacing:-.02em}
.h3{font-size:20px;line-height:28px;font-weight:600}
.lead{font-size:18px;line-height:28px;color:var(--mut)}
.mut{color:var(--mut)}
.small{font-size:14px;line-height:20px}
.xs{font-size:12px;line-height:16px}
.card{background:var(--s1);border:1px solid var(--line);border-radius:24px;padding:24px}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:12px;line-height:16px;padding:4px 8px;border-radius:9999px;background:var(--s2);color:var(--mut);white-space:nowrap}
.proof{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;line-height:20px;color:var(--mut)}
.proof span{display:inline-flex;align-items:center;gap:8px}
.proof span::before{content:"";width:4px;height:4px;border-radius:9999px;background:var(--accent)}

/* проявление при скролле */
.rv{opacity:0;transform:translateY(32px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.on{opacity:1;transform:none}

/* мини загрузчик внутри статьи */
.drop{display:flex;align-items:center;gap:16px;padding:16px;border:1px dashed var(--line);border-radius:16px;background:var(--s1);
 transition:border-color .3s var(--ease),transform .5s var(--ease)}
.drop:hover,html[data-drag] .drop{border-color:var(--accent)}
.drop .di{width:48px;height:48px;border-radius:12px;background:var(--s2);display:grid;place-items:center;flex:none;color:var(--accent)}
.drop .di .ic{width:24px;height:24px}
.drop .dt{flex:1;min-width:0}
.drop b{display:block;font-weight:600}

/* FAQ: раскрытие высоты через grid */
.faq{display:flex;flex-direction:column;gap:8px}
.faq details{background:var(--s1);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:16px;align-items:center;justify-content:space-between;padding:16px 24px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{transition:transform .5s var(--ease);color:var(--mut)}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq .a{padding:0 24px 16px;color:var(--mut)}

/* подвал */
.foot{position:relative;z-index:1;border-top:1px solid var(--line);margin-top:48px}
.foot .wrap{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px;padding-top:48px;padding-bottom:48px}
.foot h4{margin:0 0 12px;font-size:14px;line-height:20px;font-weight:600}
.foot a{display:block;color:var(--mut);text-decoration:none;font-size:14px;line-height:20px;padding:4px 0;transition:color .3s var(--ease)}
.foot a:hover{color:var(--tx)}
.foot .copy{grid-column:1/-1;color:var(--mut);font-size:12px;line-height:16px;border-top:1px solid var(--line);padding-top:24px}

/* панель ревью: переключение макетов, в продукт не идёт */
.rbar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:45;display:flex;align-items:center;gap:4px;padding:4px;border-radius:9999px;
 background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);max-width:calc(100vw - 32px);overflow-x:auto;scrollbar-width:none}
.rbar a,.rbar button{border:0;background:transparent;border-radius:9999px;padding:8px 12px;font-size:14px;line-height:20px;font-weight:600;cursor:pointer;white-space:nowrap;color:var(--mut);text-decoration:none;
 transition:background-color .3s var(--ease),color .3s var(--ease)}
.rbar a:hover,.rbar button:hover{color:var(--tx)}
.rbar [aria-current="true"]{background:var(--accent);color:var(--accent-ink)}
.rbar .sep{width:1px;height:20px;background:var(--line);flex:none;margin:0 4px}

@media (max-width:767px){
 nav.top{gap:12px;top:12px;width:calc(100% - 24px);justify-content:space-between}
 nav.top a.l,nav.top .btn{display:none}
 .burger{display:grid}
 .h1{font-size:36px;line-height:40px}
 .h2{font-size:30px;line-height:36px}
 .lead{font-size:16px;line-height:24px}
 .sec{padding:64px 0}
 .wrap,.narrow{padding:0 16px}
 .foot .wrap{grid-template-columns:1fr 1fr}
 .foot .wrap>div:first-child{grid-column:1/-1}
 .faq summary{padding:16px}
 .faq .a{padding:0 16px 16px}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
 .rv{opacity:1;transform:none}
}

/* рабочее место: слева файл и расшифровка, справа чат (bench.js) */
.bench{display:grid;grid-template-columns:1fr 1.15fr;gap:16px;height:min(560px,calc(100vh - 160px));min-height:440px;text-align:start}
.bp{display:flex;flex-direction:column;min-height:0;background:var(--s1);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.35);transition:border-color .3s var(--ease)}
html[data-drag] .bl{border-color:var(--accent)}
.bh{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--line)}
.bh b{font-weight:600;font-size:14px;line-height:20px}
.bh .grow{flex:1;display:flex;flex-direction:column}
.bh small{font-size:12px;line-height:16px;color:var(--mut)}
.bh img{width:32px;height:32px;border-radius:9999px;object-fit:cover}
.bl .bh b{flex:1}
.pill{font-size:12px;line-height:16px;padding:4px 8px;border-radius:9999px;background:var(--s2);color:var(--mut);white-space:nowrap}
.pill.busy{background:var(--accent);color:var(--accent-ink)}
.bb{flex:1;min-height:0;padding:16px;display:flex;flex-direction:column}
.bz{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;border:1px dashed var(--line);border-radius:16px;padding:24px;transition:border-color .3s var(--ease),background-color .3s var(--ease)}
html[data-drag] .bz{border-color:var(--accent);background:rgba(255,122,89,.06)}
.bi{width:56px;height:56px;border-radius:16px;background:var(--s2);display:grid;place-items:center;color:var(--accent)}
.bi .ic{width:28px;height:28px}
html[data-drag] .bi{animation:bob 1s var(--ease) infinite alternate}
@keyframes bob{to{transform:translateY(-6px)}}
.bt{font-size:20px;line-height:28px;font-weight:600}
.bs{color:var(--mut);font-size:14px;line-height:20px;max-width:320px}
.ba{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:4px}
.ba .btn .ic{width:16px;height:16px}
.lnk{background:none;border:0;padding:0;cursor:pointer;color:var(--tx);font-size:14px;line-height:20px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--mut)}
.lnk:hover{text-decoration-color:var(--accent)}
.bf{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px}
.bf[hidden],.bz[hidden]{display:none}
.bfile{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:var(--s2)}
.bfile .ic{color:var(--accent)}
.bfile span{display:flex;flex-direction:column;min-width:0}
.bfile b{font-size:14px;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bfile small{font-size:12px;line-height:16px;color:var(--mut)}
.bbar{height:4px;border-radius:9999px;background:var(--s2);overflow:hidden}
.bbar i{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);transition:transform .4s var(--ease)}
.blines{list-style:none;margin:0;padding:0;flex:1;overflow:auto;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin}
.blines li{display:grid;grid-template-columns:48px 1fr;gap:2px 12px;font-size:14px;line-height:20px;animation:lnin .4s var(--ease)}
@keyframes lnin{from{opacity:0;transform:translateY(8px)}}
.blines time{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums}
.blines b{font-size:12px;font-weight:600;color:var(--who-a)}.blines b.w1{color:var(--who-b)}.blines b.w2{color:var(--who-c)}
.blines p{grid-column:2}
.bc{flex:1;min-height:0;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin}
.bc .m{max-width:88%;padding:8px 12px;border-radius:16px;background:var(--s2);font-size:14px;line-height:20px;display:flex;gap:8px;align-items:flex-start;animation:lnin .4s var(--ease)}
.bc .m img{width:20px;height:20px;border-radius:9999px;flex:none}
.bc .m.u{align-self:flex-end;background:var(--accent);color:var(--accent-ink)}
.dots{display:inline-flex;gap:4px;padding:6px 0}
.dots i{width:6px;height:6px;border-radius:9999px;background:var(--mut);animation:dot 1s infinite alternate}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{to{opacity:.2;transform:translateY(-3px)}}
.bq{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 12px}
.bq button{border:1px solid var(--line);background:none;border-radius:9999px;padding:4px 12px;font-size:13px;line-height:20px;cursor:pointer;color:var(--tx);transition:border-color .3s var(--ease)}
.bq button:hover:not(:disabled){border-color:var(--accent)}
.bq button:disabled{color:var(--mut);cursor:default;opacity:.6}
.bin{display:flex;gap:8px;margin:0 16px 16px;padding:8px 8px 8px 16px;border-radius:16px;background:var(--s2);border:1px solid var(--line)}
.bin input{flex:1;min-width:0;background:none;border:0;outline:0;font-size:14px}
.bsend{width:36px;height:36px;border:0;border-radius:12px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;cursor:pointer}
.bsend:disabled{opacity:.4;cursor:default}
.bsend .ic{width:18px;height:18px}
@media (max-width:767px){.bench{grid-template-columns:1fr;height:auto;min-height:0}.bp{height:420px}}
.bz{cursor:pointer}
@media (hover:hover){.bz:hover{border-color:var(--accent);background:rgba(255,122,89,.05)}}

/* смена языка и переходы между страницами — плавной сменой кадра, без белой вспышки (круг 9) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}