/* Тренажёр речи — стиль «красно-чёрная афиша» */
@font-face{font-family:"Oswald";font-weight:700;font-display:block;src:url(fonts/oswald-cyrillic-700-normal.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Oswald";font-weight:700;font-display:block;src:url(fonts/oswald-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"Plex Mono";font-weight:500;font-display:block;src:url(fonts/ibm-plex-mono-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Plex Mono";font-weight:500;font-display:block;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2190-2193,U+2212}
@font-face{font-family:"Manrope";font-weight:500;font-display:swap;src:url(fonts/Manrope-500-normal-cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope";font-weight:500;font-display:swap;src:url(fonts/Manrope-500-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2212}
@font-face{font-family:"Manrope";font-weight:700;font-display:swap;src:url(fonts/Manrope-600-normal-cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope";font-weight:700;font-display:swap;src:url(fonts/Manrope-600-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2212}
/* запасные шрифты подогнаны по размеру, чтобы строки не прыгали */
@font-face{font-family:"Manrope Fallback";src:local("Arial"),local("Helvetica");size-adjust:103%;ascent-override:103%;descent-override:29%;line-gap-override:0%}
@font-face{font-family:"Oswald Fallback";src:local("Arial Narrow Bold"),local("Helvetica Neue Condensed Bold"),local("Arial");size-adjust:92%;ascent-override:128%;descent-override:31%}

:root{
  --bg:#EFE9E1; --paper:#F7F3ED; --ink:#111; --ink2:#5C544D; --line:#111; --soft:#D3CABE;
  --red:#D7262B; --red-ink:#fff; --good:#2F6B3A; --warn:#B7701A;
  --grain-op:.30; --grain-mode:multiply;
  --safe-b:env(safe-area-inset-bottom,0px);
  --head:"Oswald","Oswald Fallback",Impact,sans-serif;
  --mono:"Plex Mono",ui-monospace,Menlo,monospace;
}
:root[data-theme=dark]{
  --bg:#141110; --paper:#1D1917; --ink:#EFE9E1; --ink2:#A99F95; --line:#EFE9E1; --soft:#3A332E;
  --red:#F0383D; --red-ink:#fff; --good:#7CC48A; --warn:#E5A34B;
  --grain-op:.16; --grain-mode:screen;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font:500 16px/1.5 "Manrope","Manrope Fallback",system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
/* зерно старой печати поверх всего */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:var(--grain-op);mix-blend-mode:var(--grain-mode);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
body.loading .app{opacity:0}
.app{max-width:560px;margin:0 auto;padding:12px 16px calc(28px + var(--safe-b));transition:opacity .25s ease}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
.hidden{display:none!important}
.mono{font-family:var(--mono);font-weight:500;letter-spacing:.08em;text-transform:uppercase}

/* вкладки: листаются вбок, «Прогресс» — значок справа */
.tabs{display:flex;gap:6px;align-items:center;position:sticky;top:0;z-index:20;background:var(--bg);padding:8px 0 6px}
.tab-row{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;margin-left:-16px;padding-left:16px;
  -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.tab-row::-webkit-scrollbar{display:none}
.tab-row .tab:last-child{margin-right:28px}
.tab{flex:none;padding:9px 14px;border-radius:99px;border:2px solid var(--line);font-size:14px;font-weight:700;transition:background .2s,color .2s}
.tab.prog,.tab-ico{width:42px;height:42px;padding:0;display:flex;align-items:center;justify-content:center}
.tab-ico{flex:none;border-radius:99px;border:2px solid var(--line);color:var(--ink);background:none}
.tab-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.tab-ico:active{transform:rotate(-30deg);transition:transform .15s}
.tab.prog svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:square}
.tab.on{background:var(--ink);color:var(--bg)}

.screen{display:none;padding-top:18px}
.screen.on{display:block;animation:in .35s cubic-bezier(.2,.8,.2,1)}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.kicker{font-size:12px;margin:0 0 10px;color:var(--ink)}
.kicker.center{text-align:center}
.label{font-size:12px;margin:0 0 10px}
.joke{font-size:11px;color:var(--ink2);margin:8px 0 0;min-height:16px;letter-spacing:.04em;text-transform:none}
.note{color:var(--ink2);font-size:13px;margin:14px 0 0;text-align:center;text-wrap:balance}
.note:empty{display:none}
.group{margin-bottom:22px}

/* огромный заголовок-афиша */
.poster-title{font:700 92px/.88 var(--head);text-transform:uppercase;color:var(--red);margin:0 0 18px;letter-spacing:-.005em;overflow-wrap:normal;word-break:keep-all}
.poster-title.mid{font-size:52px}
.poster-title .w{display:inline-block;animation:wordUp .55s cubic-bezier(.2,1.3,.4,1) both}
@keyframes wordUp{from{transform:translateY(60%) skewY(6deg);opacity:0}to{transform:none;opacity:1}}

/* чипы */
.cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 16px;padding:0 16px}
.cats::-webkit-scrollbar{display:none}
.chip{flex:none;padding:8px 13px;border:2px solid var(--line);font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;transition:background .15s,color .15s,transform .1s}
.chip:active{transform:scale(.95)}
.chip.on{background:var(--ink);color:var(--bg)}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* барабан */
.drum{position:relative;height:392px;overflow:hidden;border-top:3px solid var(--line);border-bottom:3px solid var(--line);margin-bottom:20px;
  -webkit-mask-image:linear-gradient(transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(transparent,#000 25%,#000 75%,transparent)}
.drum-track{position:absolute;left:0;right:0;top:0;will-change:transform}
.drum-item{height:56px;display:flex;align-items:center;padding:0 26px;font:700 23px/1 var(--head);text-transform:uppercase;color:var(--ink);opacity:.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .15s,color .15s}
.drum-item.mid{opacity:1;color:var(--red)}
.drum-window{position:absolute;left:4px;right:4px;top:168px;height:56px;pointer-events:none;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--red)}

/* полутон */
.halftone{height:120px;background-image:radial-gradient(circle,var(--ink) 1.9px,transparent 2.3px);background-size:7px 7px;
  -webkit-mask-image:linear-gradient(90deg,#000 50%,rgba(0,0,0,.2));mask-image:linear-gradient(90deg,#000 50%,rgba(0,0,0,.2))}
.halftone.fade{height:90px;margin:24px -16px;-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
.halftone-row{position:relative;margin:0 -16px}
#poster .poster-title{margin-bottom:44px}
.stamp{position:absolute;right:20px;top:-34px;width:112px;height:112px;border-radius:50%;background:var(--ink);color:var(--bg);
  display:flex;align-items:center;justify-content:center;text-align:center;font:700 15px/1.05 var(--head);text-transform:uppercase;
  transform:rotate(-12deg);animation:slam .6s .35s cubic-bezier(.3,1.6,.5,1) both;box-shadow:0 0 0 4px var(--bg)}
.stamp.again{animation:wobble .5s}
@keyframes slam{from{transform:scale(2.6) rotate(-40deg);opacity:0}to{transform:scale(1) rotate(-12deg);opacity:1}}
@keyframes wobble{0%{transform:rotate(-12deg)}30%{transform:rotate(14deg) scale(1.15)}60%{transform:rotate(-20deg)}100%{transform:rotate(-12deg)}}
.next{font-size:11px;color:var(--ink2);margin:14px 0 18px;text-transform:none;letter-spacing:.04em}

/* кнопки */
.btn{display:block;width:100%;padding:15px 18px;font:700 16px/1.2 var(--head);text-transform:uppercase;letter-spacing:.04em;transition:transform .1s,opacity .2s}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--ink);color:var(--bg)}
.btn.primary.red{background:var(--red);color:var(--red-ink)}
.btn.ghost{border:2px solid var(--line)}
.btn.link{font:500 12px var(--mono);letter-spacing:.08em;color:var(--ink2);padding:14px;text-decoration:underline;text-underline-offset:4px}
.btn.big{padding:20px;font-size:20px}
.btn[disabled]{opacity:.4}

/* подготовка */
.count{font:700 240px/.9 var(--head);color:var(--red);text-align:center;margin:20px 0 4px;font-variant-numeric:tabular-nums}
.count.tick{animation:tick .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes tick{from{transform:scale(1.35);opacity:.3}to{transform:none;opacity:1}}
.plan{text-align:center;font-size:12px}
.plan b{color:var(--red);font-weight:500}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* запись */
.onair{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px auto 16px;width:max-content;padding:9px 18px;background:var(--ink);color:var(--red);
  font:700 26px/1 var(--head);text-transform:uppercase;letter-spacing:.06em;animation:glow 1.6s infinite}
.onair i{width:12px;height:12px;border-radius:50%;background:var(--red);box-shadow:0 0 12px var(--red)}
@keyframes glow{50%{opacity:.55}}
.rec-time{font:700 128px/.95 var(--head);text-align:center;font-variant-numeric:tabular-nums;margin:12px 0 10px}
.rec-time.last{color:var(--red)}
.progress{height:12px;border:2px solid var(--line);margin:0 0 18px}
.progress i{display:block;height:100%;width:0;background:var(--red);transition:width .25s linear}
.meter{display:flex;gap:4px;justify-content:center;align-items:flex-end;height:54px}
.meter i{width:8px;background:var(--ink);height:4px;transition:height .08s}
.nudge{text-align:center;font-size:13px;min-height:22px;margin:12px 0 18px;color:var(--red)}
.nudge.pop{animation:tick .45s}
.prompter{border:2px solid var(--line);padding:12px 14px;max-height:30vh;overflow:auto;font-size:15px;line-height:1.45;margin-bottom:16px;white-space:pre-wrap}

/* ожидание */
.spin-stamp{width:200px;height:200px;margin:24px auto 22px;position:relative}
.spin-stamp svg{position:absolute;inset:0;width:100%;height:100%;animation:rot 10s linear infinite}
.spin-stamp text{font:700 17px var(--head);letter-spacing:.2em;fill:var(--ink);text-transform:uppercase}
.spin-stamp b{position:absolute;inset:34px;border-radius:50%;background:var(--red);color:var(--red-ink);display:flex;align-items:center;justify-content:center;font:700 80px/1 var(--head)}
.spin-stamp b span{display:block;animation:bob 1.4s infinite ease-in-out}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes bob{50%{transform:translateY(-6px) rotate(10deg)}}
.wait-title{text-align:center;font:700 30px/1.02 var(--head);text-transform:uppercase;margin:0 0 12px;min-height:62px;text-wrap:balance}
.wait-title.pop{animation:wordUp .45s cubic-bezier(.2,1.3,.4,1)}
.fact{text-align:center;font-size:11px;color:var(--ink2);text-transform:none;letter-spacing:.03em;min-height:34px;text-wrap:balance;margin:0}

/* результат */
.res-head{display:flex;align-items:flex-end;gap:14px;margin:4px 0 6px;position:relative;min-height:130px}
.big-score{font:700 150px/.82 var(--head);color:var(--red);font-variant-numeric:tabular-nums}
.big-score small{font-size:38px;color:var(--ink)}
.verdict{position:absolute;right:4px;top:0;width:120px;height:120px;border-radius:50%;border:3px solid var(--red);color:var(--red);display:flex;align-items:center;justify-content:center;text-align:center;
  font:700 19px/1 var(--head);text-transform:uppercase;padding:10px;transform:rotate(10deg);animation:slam2 .6s .9s cubic-bezier(.3,1.6,.5,1) both}
.verdict.rec{background:var(--red);color:var(--red-ink)}
@keyframes slam2{from{transform:scale(2.6) rotate(50deg);opacity:0}to{transform:scale(1) rotate(10deg);opacity:1}}
.summary{font-size:17px;margin:14px 0 20px;font-weight:700}
.tiles{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--line);margin-bottom:22px}
.tile{padding:12px 12px 14px;border-right:2px solid var(--line);border-bottom:2px solid var(--line)}
.tile:nth-child(2n){border-right:0}.tile:nth-last-child(-n+2){border-bottom:0}
.tile b{display:block;font:700 46px/1 var(--head);font-variant-numeric:tabular-nums}
.tile span{display:block;font-size:12px;color:var(--ink2);line-height:1.3}
.tile em{display:block;font:500 10px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.05em;font-style:normal;margin-top:6px}
.tile.good b,.tile.good em{color:var(--good)}.tile.warn b,.tile.warn em{color:var(--warn)}.tile.bad b,.tile.bad em{color:var(--red)}
.card{border-top:3px solid var(--line);padding:14px 0 18px}
.card h3{margin:0 0 10px;font:700 24px/1 var(--head);text-transform:uppercase}
.card p{margin:0 0 8px}.card p:last-child{margin:0}
.part{padding:10px 0;border-top:1px dashed var(--soft)}
.part:first-of-type{border-top:0;padding-top:0}
.part-head{display:flex;justify-content:space-between;font:700 18px var(--head);text-transform:uppercase;margin-bottom:6px}
.seg{display:flex;gap:3px;margin:0 0 8px}
.seg i{flex:1;height:12px;background:var(--soft)}
.seg i.on{background:var(--red);animation:segIn .3s both}
@keyframes segIn{from{transform:scaleY(0)}}
.muted{color:var(--ink2);font-size:14px}
.list{margin:0;padding:0;list-style:none}
.list li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px dashed var(--soft)}
.list li:first-child{border-top:0}
.list li b{font:700 20px/1 var(--head)}
.tip{padding:12px 0;border-top:1px dashed var(--soft)}.tip:first-of-type{border-top:0;padding-top:0}
.tip b{display:block;font-weight:700}
.quote{font-size:17px;line-height:1.4;margin:8px 0 0;padding-left:14px;border-left:4px solid var(--red)}
.big-pct{font:700 80px/.9 var(--head);color:var(--red)}
details summary{cursor:pointer;font:700 24px/1 var(--head);text-transform:uppercase;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::after{content:" +";color:var(--red)}
details[open] summary::after{content:" −"}
.transcript{font-size:15px;line-height:1.7;margin-top:12px}
.mk{font:500 11px var(--mono);padding:1px 5px;white-space:nowrap}
.mk.s{background:var(--warn);color:#fff}
.mk.p{background:var(--ink);color:var(--bg)}
.actions{display:grid;gap:4px;margin-top:20px}

/* самопрезентация */
.paper-box{border:2px solid var(--line);margin:18px 0 14px;background:var(--paper)}
.paper-box textarea{display:block;width:100%;border:0;background:transparent;color:var(--ink);font:500 16px/1.5 "Manrope","Manrope Fallback",sans-serif;padding:14px;resize:none;outline:none;min-height:200px;overflow:hidden}
.paper-box textarea::placeholder{color:var(--ink2)}
.paper-foot{display:flex;justify-content:space-between;align-items:center;border-top:2px solid var(--line);padding:8px 10px 8px 14px;font-size:11px}
.mini{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--bg);padding:7px 10px}
.toggle{display:flex;align-items:center;gap:12px;font-size:14px;margin:0 0 18px;cursor:pointer}
.toggle input{display:none}
.toggle span{flex:none;width:46px;height:26px;border:2px solid var(--line);position:relative;transition:background .2s}
.toggle span::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;background:var(--ink);transition:transform .2s}
.toggle input:checked+span{background:var(--red)}
.toggle input:checked+span::after{transform:translateX(20px);background:#fff}

/* история */
.stats{display:grid;grid-template-columns:repeat(3,1fr);border:2px solid var(--line);margin-bottom:18px}
.stats div{padding:10px 10px 12px;border-right:2px solid var(--line)}
.stats div:last-child{border:0}
.stats b{display:block;font:700 42px/1 var(--head);color:var(--red)}
.stats span{font:500 10px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.05em}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.badge{width:76px;height:76px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;text-align:center;font:700 11px/1.05 var(--head);text-transform:uppercase;padding:6px}
.badge.on{background:var(--red);border-color:var(--red);color:#fff}
.badge.off{opacity:.3;border-style:dashed}
.badge:nth-child(odd){transform:rotate(-8deg)}.badge:nth-child(even){transform:rotate(6deg)}
.hist-item{display:flex;gap:14px;align-items:center;width:100%;text-align:left;border-top:2px solid var(--line);padding:12px 0}
.hist-item .sc{font:700 44px/1 var(--head);color:var(--red);min-width:44px}
.hist-item .t{flex:1;min-width:0}
.hist-item .t b{display:block;font:700 18px/1.1 var(--head);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-item .t span{font:500 10px var(--mono);letter-spacing:.04em;color:var(--ink2);text-transform:uppercase}
.empty{text-align:center;color:var(--ink2);margin-top:40px}

/* конфетти и тосты */
#fx{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
#fx i{position:absolute;top:-20px;width:9px;height:14px;animation:fall linear forwards}
@keyframes fall{to{transform:translate3d(var(--dx),110vh,0) rotate(var(--r))}}
.toast{position:fixed;left:16px;right:16px;bottom:calc(20px + var(--safe-b));max-width:528px;margin:0 auto;background:var(--red);color:#fff;padding:13px 16px;font:500 13px/1.4 var(--mono);z-index:70;
  opacity:0;transform:translateY(10px) rotate(-1deg);transition:all .25s;pointer-events:none}
.toast.on{opacity:1;transform:rotate(-1deg)}

/* «О себе»: дубль и лучший результат */
.take{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 10px}
.take .mono{font-size:11px}
.take b{font:700 18px var(--head);text-transform:uppercase;color:var(--red);white-space:nowrap}
.joke.center{text-align:center}
#s-self .paper-box{margin-top:0}
#s-self .paper-box textarea{min-height:150px}

/* табличка ведущего за 10 секунд до конца */
.host{display:flex;align-items:center;gap:10px;justify-content:center;margin:16px 0 0}
.host .mono{font-size:11px;color:var(--red);letter-spacing:.04em}
.sign{background:#fff;color:#111;border:3px solid var(--line);font:700 22px var(--head);text-transform:uppercase;padding:4px 10px;transform:rotate(-6deg)}
.host.pop .sign{animation:slam .5s cubic-bezier(.3,1.6,.5,1) both}

/* чек-лист */
.checks{list-style:none;margin:0;padding:0}
.checks li{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-top:1px dashed var(--soft);font-size:15px}
.checks li:first-child{border-top:0}
.checks li i{font:700 18px/1 var(--head);font-style:normal;width:18px;flex:none}
.checks li.y i{color:var(--good)}.checks li.n i{color:var(--red)}
.checks li small{display:block;color:var(--ink2);font-size:12px;line-height:1.3}

/* вопросы из зала */
.qdots{display:flex;gap:6px;margin:0 0 10px}
.qdots i{flex:1;height:8px;background:var(--soft)}.qdots i.on{background:var(--red)}
.asker{display:flex;gap:12px;align-items:center;margin:10px 0 12px}
.ava{width:54px;height:54px;border-radius:50%;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;font:700 24px var(--head);flex:none}
.asker span{font-size:13px;color:var(--ink2);line-height:1.3;display:block}
.asker b{display:block;font:700 18px var(--head);text-transform:uppercase}
.bubble{border:3px solid var(--line);background:var(--paper);padding:16px 16px 18px;font:700 30px/1.02 var(--head);text-transform:uppercase;position:relative;margin-bottom:26px;text-wrap:balance}
.bubble::after{content:"";position:absolute;left:28px;bottom:-17px;width:26px;height:26px;background:var(--paper);border-right:3px solid var(--line);border-bottom:3px solid var(--line);transform:rotate(45deg)}
#ask-sub{margin:0 0 18px}

/* было → стало */
.vs{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--line);margin:4px 0 18px}
.vs>div{padding:10px 12px}
.vs>div:first-child{border-right:2px solid var(--line);color:var(--ink2)}
.vs h4{margin:0 0 4px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.vs .row{padding:8px 0;border-top:1px dashed var(--soft)}
.vs .row:first-of-type{border-top:0}
.vs .row b{display:block;font:700 40px/1 var(--head);font-variant-numeric:tabular-nums}
.vs .row span{font-size:11px;line-height:1.2;display:block}
.vs>div:last-child b{color:var(--red)}
.vs .old b{text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:var(--red)}
.vs-mini{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;border:2px solid var(--line);padding:10px 12px;margin:0 0 8px}
.vs-mini b{font:700 18px/1.1 var(--head);text-transform:uppercase}
.vs-mini span{font:500 11px var(--mono);letter-spacing:.04em;color:var(--red);white-space:nowrap}

/* собес и свидание */
.paper-input{display:block;width:100%;border:0;border-bottom:2px solid var(--line);background:transparent;color:var(--ink);font:500 16px/1.4 "Manrope","Manrope Fallback",sans-serif;padding:12px 14px;outline:none}
.paper-input::placeholder,#job-vac::placeholder{color:var(--ink2)}
#job-vac{display:block;width:100%;border:0;background:transparent;color:var(--ink);font:500 15px/1.45 "Manrope","Manrope Fallback",sans-serif;padding:12px 14px;resize:none;outline:none;min-height:96px}
#job-roles{margin-bottom:12px}
.sess{display:flex;gap:14px;align-items:center;width:100%;text-align:left;border-top:2px solid var(--line);padding:12px 0}
.sess .sc{font:700 40px/1 var(--head);color:var(--red);min-width:40px}
.sess .t{flex:1;min-width:0}
.sess .t b{display:block;font:700 17px/1.15 var(--head);text-transform:uppercase}
.sess .t span{font:500 10px var(--mono);letter-spacing:.04em;color:var(--ink2);text-transform:uppercase}
.list-head{margin-top:28px}

/* карточка для сторис */
.story-box{display:flex;justify-content:center;margin:4px 0 16px}
.story-box img{width:min(300px,78vw);aspect-ratio:9/16;display:block;background:var(--red)}
#s-story .btn.ghost{margin-top:8px}

@media (max-width:370px){.bubble{font-size:26px}.poster-title{font-size:76px}.count{font-size:200px}.rec-time{font-size:108px}.big-score{font-size:128px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* согласие на обработку данных */
.consent{position:fixed;inset:0;z-index:50;background:var(--bg);overflow:auto;padding:24px 16px calc(24px + var(--safe-b))}
.consent-box{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.consent-box p{margin:0;line-height:1.5}
.consent-box .btn.link{text-align:center}

/* картинки «ягнёнок и волки» */
.pic{margin:14px auto;max-width:340px;width:100%}
.pic img{display:block;width:100%;height:auto;border-radius:14px;aspect-ratio:1}
.pic figcaption{text-align:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);margin-top:8px}
#s-wait .pic img{animation:picbreath 3.2s ease-in-out infinite}
@keyframes picbreath{50%{transform:scale(1.02)}}
@media (prefers-reduced-motion:reduce){#s-wait .pic img{animation:none}}
.pic.small{max-width:230px;margin:6px auto 10px}