/* SelfSlide: общий вид слайда зала. Используют screen.html (весь экран) и студия (превью 16:9).
   Размеры в cqw/cqh, поэтому один и тот же слайд одинаково смотрится и на TV, и в карточке. */
.ss{--bg:#08080b;--fg:#f5f5f7;--mu:#8e8e9c;--ac:#4B4EF6;--fh:'Manrope',sans-serif;--fb:'Manrope',sans-serif;
  container-type:size;position:relative;background:var(--bg);color:var(--fg);font-family:var(--fb);overflow:hidden;
  -webkit-font-smoothing:antialiased}
.ss.light{--bg:#ffffff;--fg:#15151b;--mu:#70707e}
.ss-in{position:absolute;inset:0;display:flex;flex-direction:column;padding:7cqh 7cqw 5cqh}
.ss-cols{flex:1;display:grid;grid-template-columns:1fr;gap:6cqw;min-height:0}
.ss-cols.n2{grid-template-columns:1fr 1fr}
.ss-col{min-width:0;overflow:hidden;display:flex;flex-direction:column}
.ss-lang{font-size:1.3cqw;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mu);margin-bottom:3cqh}
.ss-body{flex:1;overflow:hidden;font-size:3.5cqw;line-height:1.34;font-weight:400}
.n2 .ss-body{font-size:2.7cqw}
.ss-body .sh{font-family:var(--fh);font-weight:700;letter-spacing:-.01em;font-size:1.3em;line-height:1.12}
.ss-body .sr{color:var(--ac);font-weight:700;margin-top:.5em;font-size:.62em;letter-spacing:.03em}
.ss-body .sb{margin-top:.6em}
.ss-body .sb-quote{margin-top:.7em;font-style:italic}
/* Standard: крупные кавычки-иконка акцентом над цитатой, без полоски */
.ss:not([class*=" s-"]) .ss-body .sb-quote::before{content:"\201C";display:block;font:700 2.6em/0.6 Georgia,serif;color:var(--ac);margin:.25em 0 .1em;font-style:normal}
.ss-body .si{margin:.6em 0 0;padding-left:1.1em}
.ss-body .si li{margin:.3em 0}
.ss-body .si li::marker{color:var(--ac)}
.ss.t-title .ss-body{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ss.t-title .ss-body .sh-big{font-size:1.9em;line-height:1.08}
.ss.t-title .ss-body .sh-big::after{content:'';display:block;width:1.6em;height:.08em;background:var(--ac);margin:.45em auto 0;border-radius:1em}
.ss.t-title .ss-body .sb-sub{font-size:.6em;color:var(--mu);margin-top:.9em}
.ss.t-quote .ss-body{display:flex;flex-direction:column;justify-content:center}
.ss-foot{display:flex;justify-content:space-between;gap:2cqw;color:var(--mu);font-size:1.25cqw;font-weight:600;margin-top:2cqh}
.ss-foot span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-logo{position:absolute;top:4cqh;right:4cqw;height:11cqh;max-width:24cqw;object-fit:contain}
/* слайд-картинка из документа */
/* картинка растянута на весь слайд, cover (Виктор, 29.09) */
.ss-imgbg{position:absolute;inset:0;background:center/cover no-repeat}
.ss-fig{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;justify-content:flex-end}
.ss-img{display:none}
.ss-fig figcaption{flex:none;font-family:var(--fh);font-weight:700;font-size:2.6cqw;line-height:1.2;text-align:center;color:#fff;padding:14cqh 8cqw 5cqh;background:linear-gradient(transparent,rgba(0,0,0,.62));text-shadow:0 .3cqh 1.5cqh rgba(0,0,0,.5)}
.ss.t-image .ss-logo{top:3cqh;right:3cqw;height:8cqh}
@container (orientation:portrait){.ss-fig figcaption{font-size:5cqw}}
/* два языка в подписи картинки: две колонки, как у текстовых слайдов */
.ss-fig figcaption.c2{display:grid;grid-template-columns:1fr 1fr;gap:6cqw;text-align:center;align-items:start}
@container (orientation:portrait){.ss-fig figcaption.c2{grid-template-columns:1fr;gap:2cqh}}
/* маркеры списка: студия на Tailwind сбрасывает list-style у ul, поэтому задаём явно */
.ss .ss-body .si{list-style:disc outside}
.ss .ss-body .si li{display:list-item}
/* вертикальный экран (телефон портретом): одна колонка, крупнее, контент по центру */
@container (orientation:portrait){
  .ss-in{padding:9cqh 7cqw 5cqh}
  .ss-cols,.ss-cols.n2{grid-template-columns:1fr;grid-auto-rows:minmax(0,1fr);gap:4cqh}
  .ss-col{justify-content:center}
  .ss-body{flex:0 1 auto;font-size:6.6cqw;line-height:1.3}
  .n2 .ss-body{font-size:5.4cqw}
  .ss.t-title .ss-body{flex:1}
  .ss-foot{font-size:2.8cqw}
  .ss-logo{top:3cqh;right:5cqw;height:8cqh;max-width:40cqw}
}
/* ============ Стили дизайна (Виктор, 30.09): Editorial, Brutal, Cinematic, у каждого светлый и тёмный ============ */
.ss .ss-body .sr{font-family:var(--fm,inherit)}
/* --- Editorial: журнальная вёрстка, Fraunces, тонкие линейки --- */
.ss.s-editorial{--bg:#0c0b0a;--fg:#f1ece4;--mu:#8a8175;--ln:#2c2824;--ac:#d9a25c;--fh:'Fraunces',serif;--fb:'Fraunces',serif;--fm:'JetBrains Mono',monospace}
.ss.s-editorial.light{--bg:#f6f1e9;--fg:#1d1a16;--mu:#7a6f62;--ln:#dcd2c3;--ac:#a0561c}
.s-editorial .ss-body{font-weight:300;line-height:1.24;letter-spacing:-.01em}
.s-editorial .ss-body .sh{font-style:italic;font-weight:300;color:var(--ac);font-size:.72em;line-height:1.2;letter-spacing:0}
.s-editorial .ss-body .sr{color:var(--mu);font-weight:400;font-size:.36em;letter-spacing:.14em;text-transform:uppercase;margin-top:.9em;padding-bottom:.9em;border-bottom:1px solid var(--ln)}
.s-editorial .ss-body .sb-quote{font-style:italic;font-size:1.12em;line-height:1.3}
.s-editorial .ss-body .si{list-style:none!important;padding-left:0;counter-reset:n}
.s-editorial .ss-body .si li{display:flex!important;gap:.6em;border-top:1px solid var(--ln);padding:.35em 0;margin:0;counter-increment:n}
.s-editorial .ss-body .si li::before{content:counter(n,decimal-leading-zero);font:400 .4em var(--fm);color:var(--ac);padding-top:.55em;flex:none}
.s-editorial.t-title .ss-body .sh-big{font-style:normal;color:var(--fg);font-size:2.1em;line-height:1.02;letter-spacing:-.03em}
.s-editorial.t-title .ss-body .sh-big::after{height:1px;width:3em;background:var(--ac)}
.s-editorial.t-title .ss-body .sb-sub{font-style:italic;color:var(--ac)}
.s-editorial .ss-foot{font:400 1.1cqw var(--fm);letter-spacing:.14em;text-transform:uppercase;border-top:1px solid var(--ln);padding-top:1.6cqh}
/* --- Brutal: Unbounded, капс в заголовках, кислотный акцент плашками --- */
.ss.s-brutal{--bg:#000;--fg:#fff;--mu:#8a8a8a;--ac:#d4ff3a;--on:#000;--fh:'Unbounded',sans-serif;--fb:'Manrope',sans-serif}
.ss.s-brutal.light{--bg:#f1f1ec;--fg:#0a0a0a;--mu:#6b6b66;--ac:#ff4a1c;--on:#fff}
.s-brutal .ss-in{padding:5cqh 5cqw 4cqh}
.s-brutal .ss-body{font-weight:800;line-height:1.14;letter-spacing:-.02em}
.s-brutal .ss-body .sh{font-weight:800;text-transform:uppercase;color:var(--ac);font-size:.9em;line-height:1.02;letter-spacing:-.02em}
.s-brutal.light .ss-body .sh{color:var(--fg)}
.s-brutal .ss-body .sr{display:inline-block;background:var(--ac);color:var(--on);font:500 .42em var(--fh);letter-spacing:.02em;padding:.3em .7em;margin-top:.7em}
.s-brutal .ss-body .sb-quote{font-style:normal;border-left:.3em solid var(--ac)}
.s-brutal .ss-body .si{list-style:none!important;padding-left:0}
.s-brutal .ss-body .si li{display:block!important;text-transform:uppercase;border-bottom:.12em solid var(--ac);padding:.3em 0;margin:0}
.s-brutal.t-title .ss-body{align-items:flex-start;text-align:left;justify-content:flex-end}
.s-brutal.t-title .ss-body .sh-big{font-size:2.3em;line-height:.95;letter-spacing:-.045em;color:var(--ac)}
.s-brutal.light.t-title .ss-body .sh-big{color:var(--fg)}
.s-brutal.t-title .ss-body .sh-big::after{margin:.35em 0 0;width:100%;height:.14em;border-radius:0;background:var(--ac)}
.s-brutal.t-title .ss-body .sb-sub{font:500 .5em var(--fh);color:var(--fg)}
.s-brutal .ss-foot{font:500 1.1cqw var(--fh);color:var(--fg);text-transform:uppercase}
/* --- Cinematic: кашетирование, мягкий радиальный свет, зерно, моно-подписи, текст внизу слева --- */
.ss.s-cinematic{--bg:#0b0d10;--fg:#eef1f4;--mu:#8f99a4;--ac:#e7b87a;--glow:#3a4a5e;--glow2:#3b2a1c;--bg2:#141a22;--fh:'Manrope',sans-serif;--fb:'Manrope',sans-serif;--fm:'JetBrains Mono',monospace;
  background:radial-gradient(90% 80% at 78% 12%,var(--glow) 0%,transparent 62%),radial-gradient(70% 70% at 8% 100%,var(--glow2) 0%,transparent 60%),linear-gradient(160deg,var(--bg2) 0%,var(--bg) 100%)}
.ss.s-cinematic.light{--bg:#efeae2;--fg:#15171a;--mu:#6c655c;--ac:#9c5a1a;--glow:#fffaf2;--glow2:#ecd3b4;--bg2:#e3dcd2}
.s-cinematic::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
.s-cinematic.light::after{opacity:.1;mix-blend-mode:multiply}
.s-cinematic .ss-in{padding:8cqh 6cqw 13cqh}
.s-cinematic .ss-col{justify-content:flex-end}
.s-cinematic .ss-body{flex:0 1 auto;max-height:100%;font-weight:300;line-height:1.25}
.s-cinematic .ss-body .sh{font:400 .42em var(--fm);letter-spacing:.2em;text-transform:uppercase;color:var(--ac)}
.s-cinematic .ss-body .sr{color:var(--mu);font-weight:400;font-size:.36em;letter-spacing:.2em;text-transform:uppercase}
.s-cinematic .ss-body .sb-quote{font-style:normal;font-weight:300}
.s-cinematic .ss-body .sb-quote::before{content:"";display:block;width:2.2em;height:1px;background:var(--ac);margin-bottom:.8em}
.s-cinematic .ss-body .si li::marker{content:'— ';font-family:var(--fm)}
.s-cinematic.t-title .ss-body{align-items:flex-start;text-align:left;justify-content:flex-end}
.s-cinematic.t-title .ss-body .sh-big{font:300 2em/1.02 var(--fh);letter-spacing:-.035em;text-transform:none;color:var(--fg)}
.s-cinematic.t-title .ss-body .sh-big::after{display:none}
.s-cinematic.t-title .ss-body .sb-sub{font:400 .4em var(--fm);letter-spacing:.2em;text-transform:uppercase;color:var(--ac)}
.s-cinematic .ss-foot{position:absolute;left:0;right:0;bottom:0;height:9%;margin:0;padding:0 6cqw;align-items:center;font:400 1.05cqw var(--fm);letter-spacing:.2em;text-transform:uppercase;color:var(--mu)}
.s-cinematic .ss-logo{top:1.5cqh;height:6cqh}
@container (orientation:portrait){
  .s-editorial .ss-col+.ss-col,.s-brutal .ss-col+.ss-col{border-left:0;padding-left:0;margin-left:0}
  .s-cinematic .ss-in{padding:10cqh 7cqw 11cqh}
  .s-cinematic .ss-foot,.s-editorial .ss-foot,.s-brutal .ss-foot{font-size:2.4cqw}
}

/* два языка: оба столбца одного цвета, без разделителя, заголовки на одном уровне сверху (Виктор, 30.09) */
.ss .ss-cols.n2 .ss-col{justify-content:flex-start!important}
.ss .ss-cols.n2 .ss-body{justify-content:flex-start!important}
.ss-foot.n2f{display:grid;grid-template-columns:1fr 1fr;gap:6cqw}
.ss-foot.n2f .fc{display:flex;justify-content:space-between;gap:2cqw;min-width:0}
.ss-foot.n2f .fc span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@container (orientation:portrait){.ss-foot.n2f{display:flex}.ss-foot.n2f>span:first-child{display:none}}
/* 30.09 v2: Modern/Cinematic ниже логотипа, цитаты по стилям */
.s-brutal .ss-in{padding-top:18cqh}
.s-cinematic .ss-in{padding-top:18cqh}
.s-cinematic .ss-logo{top:4cqh;height:11cqh}
.s-brutal .ss-body .sb-quote{border-left:0;padding-left:0;text-transform:uppercase;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.s-brutal .ss-body .sb-quote::before{content:"\201C";display:block;font:800 2.2em/.7 var(--fh);color:var(--ac);margin:.2em 0 .15em}
.s-editorial .ss-body .sb-quote{border-left:.12em solid var(--ac);padding-left:.9em}
@container (orientation:portrait){.s-brutal .ss-in,.s-cinematic .ss-in{padding-top:14cqh}.s-cinematic .ss-logo{top:3cqh;height:8cqh}}

/* --- Light (стиль uh): как слайды зала Ühisosa. Синяя полоса, QR сверху по центру, текст по центру, снизу только точки слайдов --- */
.ss.s-uh{--bg:#05060d;--fg:#f2f4f7;--mu:#8b93ad;--ac:#5ba6e0;--ln:rgba(121,118,255,.22);--fh:'Jost',sans-serif;--fb:'Jost',sans-serif}
.ss.s-uh.light{--bg:#ffffff;--fg:#0b0d18;--mu:#6b7288;--ac:#2521DB;--ln:rgba(37,33,219,.18)}
.ss.s-uh::before{content:"";position:absolute;top:0;left:0;right:0;height:2.1cqh;background:var(--st,#2521DB);z-index:2}
.ss.s-uh .ss-in{padding:17cqh 5cqw 7cqh}
.ss.s-uh .ss-cols{gap:0}
.ss.s-uh .ss-col{padding:0 2.2cqw;align-items:stretch}
.ss.s-uh .ss-col+.ss-col{border-left:1px solid var(--ln)}
.ss.s-uh .ss-body{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;line-height:1.36;font-weight:500}
.ss.s-uh .ss-body .sh{font-family:var(--fh);font-weight:700;font-size:1.5em;line-height:1.14;letter-spacing:0;color:var(--fg)}
.ss.s-uh .ss-body .sr{color:var(--ac);font-weight:600;font-size:.62em;letter-spacing:0;margin-top:.7em}
.ss.s-uh .ss-body .sb{margin-top:.8em}
.ss.s-uh .ss-body .sb-quote{font-style:normal;font-weight:500}
.ss.s-uh .ss-body .si{list-style:none!important;padding:0;margin:.8em 0 0}
.ss.s-uh .ss-body .si li{display:block;margin:.55em 0;font-weight:500}
.ss.s-uh .ss-body .si li::marker{content:''}
.ss.s-uh.t-quote .ss-body::before,.ss.s-uh .ss-body .sb-quote::before{content:none!important;display:none!important}
.ss.s-uh.t-title .ss-body .sh-big{font-size:2.05em}
.ss.s-uh.t-title .ss-body .sh-big::after{display:none}
.ss.s-uh.t-title .ss-body .sb-sub{color:var(--ac);font-size:.6em}
.ss.s-uh .ss-foot,.ss.s-uh .ss-logo{display:none}
.ss-qr{display:none}
.ss.s-uh .ss-qr{display:block;position:absolute;top:4.6cqh;left:50%;transform:translateX(-50%);width:min(11cqh,22cqw);height:min(11cqh,22cqw);background:#fff;border-radius:1.2cqh;padding:.6cqh;z-index:2}
.ss.s-uh .ss-qr img{display:block;width:100%;height:100%}
.ss-dots{display:none}
.ss.s-uh .ss-dots{display:flex;position:absolute;left:0;right:0;bottom:2.6cqh;justify-content:center;gap:.9cqh;padding:0 4cqw;flex-wrap:wrap}
.ss.s-uh .ss-dots i{display:block;width:1cqh;height:1cqh;border-radius:50%;background:var(--mu);opacity:.35}
.ss.s-uh .ss-dots i.on{opacity:1;background:var(--ac);transform:scale(1.5)}
@container (orientation:portrait){
  .ss.s-uh .ss-in{padding:15cqh 6cqw 7cqh}
  .ss.s-uh .ss-col+.ss-col{border-left:0}
  .ss.s-uh .ss-qr{width:min(9cqh,30cqw);height:min(9cqh,30cqw)}
  .ss.s-uh .ss-dots i{width:1.4cqw;height:1.4cqw}
}

.ss.s-uh .ss-cols{grid-template-rows:minmax(0,1fr)}
.ss.s-uh.t-text .ss-body,.ss.s-uh.t-list .ss-body{justify-content:flex-start;padding-top:1.6cqh}
.ss.s-uh.t-title .ss-body,.ss.s-uh.t-quote .ss-body{justify-content:center}
.ss.s-uh.t-title .ss-cols.n2 .ss-body,.ss.s-uh.t-quote .ss-cols.n2 .ss-body{justify-content:center!important}
.ss.s-uh .ss-cols.n2 .ss-body{align-items:center!important;text-align:center!important}

.ss.s-uh .ss-dots{display:none}
.ss.s-uh .ss-num{display:block;position:absolute;left:0;right:0;bottom:2.4cqh;text-align:center;font-family:var(--fb);font-weight:500;font-size:2.6cqh;letter-spacing:.18em;color:var(--mu);z-index:2}
@container (max-aspect-ratio:1/1){.ss.s-uh .ss-num{font-size:2cqh}}

/* Light: двухколоночный режим, равный отступ текста от центральной полосы слева и справа */
@container (orientation:landscape){
  .ss.s-uh .ss-cols.n2 .ss-col{padding:0 3cqw}
  .ss.s-uh .ss-cols.n2 .ss-col:first-child .ss-body{align-items:flex-end!important;text-align:right!important}
  .ss.s-uh .ss-cols.n2 .ss-col:last-child .ss-body{align-items:flex-start!important;text-align:left!important}
}

/* Light: списки (призыв, вопросы) с маркерами, выравнивание влево */
.ss.s-uh.t-list .ss-body{align-items:stretch!important;text-align:left!important}
.ss.s-uh.t-list .ss-body .si{list-style:disc!important;padding-left:1.2em!important;margin-left:0;text-align:left}
.ss.s-uh.t-list .ss-body .si li{display:list-item!important;text-align:left}
.ss.s-uh.t-list .ss-body .si li::marker{content:normal;color:var(--ac)}
.ss.s-uh.t-list .ss-cols.n2 .ss-col .ss-body{align-items:stretch!important;text-align:left!important}
.ss.s-uh.t-list .ss-body .sh,.ss.s-uh.t-list .ss-body .sr{text-align:left}
/* QR по переключателю в оформлении (Виктор, 27.10): нижний правый угол, светлая подложка,
   справа резервируется полоса под код, текст под него не заходит. Логотип сверху справа, не пересекаются.
   На вертикальном экране (телефон зрителя) кода нет. */
@container (orientation:landscape){
  .ss.qr .ss-in{padding-right:calc(6.5cqw + 15cqh)!important}
  .ss.qr .ss-fig figcaption{padding-right:calc(6.5cqw + 15cqh);padding-left:calc(6.5cqw + 15cqh)}
  .ss.qr .ss-qr{display:block;position:absolute;right:4cqw;bottom:5cqh;width:15cqh;height:15cqh;box-sizing:border-box;background:#fff;border-radius:1.2cqh;padding:1.1cqh;z-index:2;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
  .ss.qr .ss-qr img{display:block;width:100%;height:100%;image-rendering:pixelated}
}