/* «Армия спорта», второй этап. Общее оформление — as.css, здесь — только новые блоки. */

/* переключатели: полоска таймера длиной в шаг */
.s2 .as-sw-tabs button.run i::after{animation-duration:var(--d,3s)}

/* ---------- первый экран: звезда над названием ---------- */
.s2-hero{justify-content:space-between;padding-bottom:clamp(32px,5vw,72px)}
.s2-hero .s2-heromark{padding-top:clamp(24px,5vh,72px)}
.s2-herotx{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px}
.s2-herotx .as-lead{max-width:24ch;margin:0;font-size:clamp(26px,3vw,48px);line-height:1.15}
.s2-heromark .star{width:clamp(180px,30vw,520px);aspect-ratio:455/323;overflow:hidden}
.s2-heromark .star img{width:100%;height:auto;display:block}
.s2-heromark{opacity:0;transform:translateY(30px) rotate(-14deg) scale(.86);transform-origin:20% 60%;transition:opacity 1s var(--ease),transform 1.3s var(--ease)}
.s2-heromark.in{opacity:1;transform:none}
.s2-back{display:inline-flex;align-items:center;height:48px;padding:0 22px;border-radius:999px;background:var(--ink);color:#fff!important;font:500 16px/1 var(--font)}
.s2-back:hover{background:#000}

.s2-sub{padding-top:clamp(72px,8vw,136px)}

/* ---------- три шрифта на одном экране ---------- */
.s2-fonts{--h:clamp(20px,min(2.6vw,4vh),44px);display:grid;gap:clamp(32px,3.6vw,64px)}
.s2-fonts .grp{display:grid;grid-template-columns:minmax(120px,1fr) auto;column-gap:clamp(16px,3vw,56px);row-gap:clamp(18px,2vw,30px);align-items:center}
.s2-fonts .name{grid-column:1;grid-row:1;align-self:start;font:400 clamp(19px,1.35vw,22px)/1.3 var(--read);color:var(--mute)}
.s2-fonts .row{grid-column:2;display:grid;grid-template-columns:calc(var(--h) * 7.9) calc(var(--h) * 5.2) calc(var(--h) * 7.9);column-gap:calc(var(--h) * 2);align-items:center;transition:opacity .35s;outline:0;cursor:default}
.s2-fonts .row span{display:flex;align-items:center;min-width:0}
.s2-fonts .row img{height:var(--h);width:auto;max-width:100%;object-fit:contain;object-position:left center}
.s2-fonts .row .stacked img{height:calc(var(--h) * 1.32)}
.s2-fonts .note{grid-column:1;grid-row:2 / span 2;align-self:start;max-width:30ch;font:400 16px/1.45 var(--read);color:var(--mute);margin:0}
.s2-aside{margin-top:clamp(28px,3vw,48px);max-width:62ch;font:400 clamp(17px,1.15vw,19px)/1.45 var(--read);color:var(--mute);text-wrap:pretty}

/* шрифты во вкладках: один шрифт крупно */
.s2-fontsw .stage{position:relative}
.s2-fontsw .pane{display:none}
.s2-fontsw .pane.on{display:block;animation:s2-open .6s var(--ease)}
.s2-fonts.one{--h:clamp(26px,min(3.4vw,5.2vh),60px);row-gap:clamp(36px,5vw,84px);padding:clamp(28px,4vw,64px) 0}
.s2-fonts.one .row{grid-column:auto;column-gap:clamp(40px,6vw,120px);grid-template-columns:calc(var(--h) * 7.6) calc(var(--h) * 4.4) calc(var(--h) * 7.6);justify-content:start}
.s2-fontsw .note{max-width:60ch;font:400 16px/1.45 var(--read);color:var(--mute);margin:0}
.s2-fontsw .note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- кобрендинг: три полосы ---------- */
.s2-co{display:grid;gap:clamp(8px,1vw,16px)}
.s2-co .strip{display:grid;grid-template-columns:minmax(120px,1fr) 5fr;align-items:center;gap:clamp(16px,3vw,56px);padding:clamp(20px,2.6vw,44px) 0;border-top:1px solid var(--line)}
.s2-co .name{font:400 clamp(19px,1.35vw,22px)/1.3 var(--read);color:var(--mute)}
.s2-co .logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;gap:clamp(16px,3.4vw,64px)}
.s2-co .logos img{width:100%;height:clamp(52px,6.6vw,118px);object-fit:contain}
.s2-co .logos img.own{transition:opacity .3s}

/* ---------- монохром: один блок, три фона ---------- */
.s2-mono .stage{position:relative;padding:clamp(28px,4vw,72px) clamp(20px,4vw,72px);transition:background-color .6s var(--ease);overflow:hidden}
.s2-mono .stage::before{content:"";position:absolute;inset:0;background:var(--pat) center/cover;opacity:0;transition:opacity .6s var(--ease)}
.s2-mono .stage>*{position:relative}
.s2-mono .stage.k{background:#080000}
.s2-mono .stage.w{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.s2-mono .stage.p{background:#E71E26}
.s2-mono .stage.p::before{opacity:1}
.s2-mono .s2-fonts.k{display:none}
.s2-mono .stage.w .s2-fonts.w{display:none}
.s2-mono .stage.w .s2-fonts.k{display:grid}
.s2-mono .stage:not(.w) .name{color:rgba(255,255,255,.75)}
.s2-mono .stage:not(.w) .name:hover{color:#fff}
.s2-pal{margin-top:clamp(40px,5vw,80px)}
.s2-pal .as-p{max-width:40ch;margin-bottom:clamp(16px,2vw,28px)}
.s2 .as-pal{height:clamp(220px,26vw,400px)}

/* ---------- малые размеры ---------- */
.s2-app{background:none}
.s2-app .as-phonebox,.s2-app .as-tabbox{background:#fff}
.s2-app .as-browser .tab .fav{border-radius:0;transform:none;object-fit:contain}
.s2-site{margin-top:clamp(8px,1vw,16px)}
.s2-site .as-ph{background:#0a0a0a}
.s2-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1vw,16px);margin:clamp(40px,5vw,88px) 0}
.s2-rules figure{margin:0}
.s2-rules .box{position:relative;height:clamp(240px,24vw,380px);background:#fff;overflow:hidden}
.s2-rules figcaption{max-width:40ch;margin-top:16px}
/* линейка: знак уменьшается, меньше 0,5 см — одного цвета */
.s2-ruler .lg{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);height:var(--lh,2cm);width:calc(var(--lh,2cm) * 6.54)}
.s2-ruler .lg img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .25s}
.s2-ruler .lg .m{opacity:0}
.s2-ruler.small .lg .c{opacity:0}.s2-ruler.small .lg .m{opacity:1}
.s2-ruler .scale{position:absolute;left:clamp(16px,2vw,32px);right:clamp(16px,2vw,32px);bottom:clamp(16px,2vw,28px);height:28px;border-top:2px solid var(--ink);background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 0.5cm) top/100% 10px no-repeat}
.s2-ruler .scale::before{content:"";position:absolute;left:0;top:-2px;width:.5cm;height:12px;background:#E71E26}
.s2-ruler .scale span{position:absolute;left:0;top:12px;font:400 16px/1 var(--read);color:var(--mute)}
.s2-ruler .cm{position:absolute;right:clamp(16px,2vw,32px);top:clamp(14px,1.6vw,24px);font:500 clamp(28px,3vw,48px)/1 var(--font);letter-spacing:-.03em;color:var(--ink)}
.s2-ruler.small .cm{color:#E71E26}
/* нанесение: печать и гравировка */
.s2-engrave .box{display:grid;grid-template-columns:1fr 1fr}
.s2-engrave .plate{position:relative;display:grid;place-items:center;padding:12%}
.s2-engrave .plate img{width:100%;height:auto}
.s2-engrave .plate span{position:absolute;left:16px;bottom:14px;font:400 16px/1.2 var(--read);color:var(--mute)}
.s2-engrave .print{background:#fff}
.s2-engrave .metal{background:linear-gradient(115deg,#9EA2A8,#E4E6E9 28%,#B7BBC1 46%,#F1F2F4 60%,#A4A8AE 82%,#D3D6DA);background-size:220% 100%;animation:s2-metal 7s ease-in-out infinite alternate}
.s2-engrave .metal img{mix-blend-mode:multiply;opacity:.85;filter:drop-shadow(0 1.5px 0 rgba(255,255,255,.9)) drop-shadow(0 -1px 0 rgba(0,0,0,.25))}
.s2-engrave .metal span{color:#4A4D52}
@keyframes s2-metal{to{background-position:100% 0}}
.s2-fit{display:flex;gap:clamp(8px,1vw,16px)}
.s2-fit>div{min-width:0}
.s2-smalls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,72px);margin:clamp(40px,5vw,88px) 0}
.s2-smalls figure{margin:0}
.s2-smalls .m{display:flex;align-items:center;min-height:clamp(80px,9vw,150px)}
.s2-smalls .m img{width:min(100%,clamp(220px,26vw,440px));height:auto}
.s2-smalls figcaption{max-width:36ch;margin-top:16px;color:var(--mute)}

/* ---------- ролик со знаком в углу ---------- */
.s2-filmbox{width:min(100%,calc((100svh - 230px) * 16 / 9))}
.s2-film{position:relative;aspect-ratio:16/9;background:#0b0b0d;overflow:hidden}
.s2-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s2-film .corner{z-index:1}
.s2-film .corner{position:absolute;left:3.25%;top:4.16%;width:18%;height:auto;opacity:0;transition:opacity .5s var(--ease)}
.s2-film .corner.on{opacity:1}

/* ---------- мерч: четыре в ряд ---------- */
.s2-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.s2-g4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- плакаты ---------- */
.s2-posters .as-ph{aspect-ratio:3/4!important}

/* ---------- с фото и без ---------- */
.s2-lbl{font:400 clamp(17px,1.15vw,19px)/1.3 var(--read);color:var(--mute);margin:0 0 12px}
.as-grid+.s2-lbl{margin-top:clamp(28px,3vw,48px)}
.s2-more{display:flex;flex-wrap:wrap;gap:12px}
.s2-walls{margin-top:clamp(28px,3vw,48px)}
.s2-more .as-btn.on{background:#E71E26}
.s2-panel{margin-top:clamp(28px,3vw,48px);padding-top:clamp(28px,3vw,48px);border-top:1px solid var(--line);animation:s2-open .6s var(--ease)}
@keyframes s2-open{from{opacity:0;transform:translateY(16px)}}
.s2-panel .as-h2{margin-bottom:clamp(24px,3vw,48px)}
.s2-panel .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3vw,56px) clamp(32px,5vw,96px)}
.s2-panel h4{margin:0 0 10px;font:500 clamp(20px,1.5vw,24px)/1.2 var(--font);letter-spacing:-.01em}
.s2-panel ul{margin:12px 0 0;padding-left:1.1em;list-style:disc}
.s2-panel li+li{margin-top:8px}
.s2-panel .pr{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);align-items:start}
.s2-panel .code{font:400 clamp(17px,1.15vw,19px)/1.5 var(--read)}
.s2-panel .code p{margin:0 0 .8em}
.s2-panel .code p:first-child{color:#1B43B2}
.s2-panel .copy{margin-top:12px}

/* ---------- награда: золото блестит за курсором и от прокрутки ---------- */
.s2-awards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.6vw,32px)}
.s2-awards figure{margin:0}
.s2-awards figcaption{display:flex;gap:12px;align-items:baseline;margin-top:12px;font:400 clamp(17px,1.15vw,19px)/1.35 var(--read);max-width:26ch}
.s2-awards figcaption b{font:500 clamp(28px,2.4vw,40px)/1 var(--font);color:var(--ink);letter-spacing:-.03em}
.s2-man{margin-top:clamp(24px,3vw,56px)}
.s2-aw .flow{position:absolute;inset:0;pointer-events:none;-webkit-mask-size:100% 100%;mask-size:100% 100%;
  background:linear-gradient(120deg,#D1B65F 0%,#EBD48E 9%,#93782F 21%,#DCCA75 21%,#FAEBC7 27%,#AA8920 27%,#896506 35%,#D1B65F 35%,#EBD48E 50%,#93782F 62%,#DCCA75 62%,#FAEBC7 68%,#AA8920 68%,#896506 76%,#D1B65F 76%,#EBD48E 88%,#D1B65F 100%);
  background-size:300% 300%;background-position:calc(var(--gx) * 100%) calc(var(--gy) * 60% + 20%);transition:background-position .5s cubic-bezier(.2,.7,.2,1)}
.s2-aw .flow::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent calc(var(--gx) * 140% - 40%),rgba(255,252,236,.75) calc(var(--gx) * 140% - 22%),transparent calc(var(--gx) * 140% - 6%));mix-blend-mode:screen}
.s2-shine{--gx:.5;--gy:.5}
.s2-shine .glint,.s2-shine .gloss{position:absolute;inset:0;pointer-events:none;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.s2-shine .glint{background:linear-gradient(105deg,rgba(255,250,225,0) calc(var(--gx) * 140% - 46%),rgba(255,248,215,.95) calc(var(--gx) * 140% - 20%),rgba(255,250,225,0) calc(var(--gx) * 140% + 6%));mix-blend-mode:screen}
.s2-shine .gloss{background:linear-gradient(105deg,rgba(255,255,255,0) calc(var(--gx) * 140% - 40%),rgba(255,255,255,.16) calc(var(--gx) * 140% - 20%),rgba(255,255,255,0) calc(var(--gx) * 140%));mix-blend-mode:screen}

/* ---------- монета в 3D на фоне слов ---------- */
.s2-coin3d{position:relative;height:clamp(460px,52vw,860px);overflow:hidden;background:#fff;margin-left:calc(50% - 50vw);width:100vw}
.s2-coin3d .words{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;pointer-events:none;user-select:none}
.s2-coin3d .words{justify-content:center;align-items:stretch}
.s2-coin3d .words b{display:flex;width:max-content;font:500 clamp(84px,13vw,240px)/.9 var(--font);letter-spacing:-.05em;color:var(--ink);white-space:pre;animation:s2-run 40s linear infinite}
.s2-coin3d .words b span{padding-right:.3em}
.s2-coin3d .words b:nth-child(2){animation-direction:reverse;animation-duration:48s}
.s2-coin3d .words b:nth-child(3){animation-duration:44s}
@keyframes s2-run{to{transform:translateX(-50%)}}
.s2-coin3d .cv{position:absolute;inset:0;z-index:1;touch-action:pan-y;cursor:grab}
.s2-coin3d .cv:active{cursor:grabbing}
.s2-coin3d .cv canvas{width:100%;height:100%;display:block}
.s2-coin3d .hand{position:absolute;right:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,40px);width:44px;height:44px;color:var(--ink);opacity:0;transition:opacity .4s;pointer-events:none}
.s2-coin3d.ready .hand{opacity:.8;animation:as-hand 2.4s ease-in-out infinite}
.s2-coin3d .hand.off{opacity:0!important;animation:none}
.s2-coin3d.off .words b{animation-play-state:paused}
.s2-coins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,2vw,40px);margin-top:clamp(24px,3vw,56px)}

/* ---------- узоры и футболки ---------- */
.s2-pt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,16px)}
.s2-pt .as-ph{aspect-ratio:16/9;background:#fff}
.s2-pt .as-ph img{object-fit:cover;opacity:1}
.s2-tees{margin-top:clamp(40px,5vw,88px)}

/* ---------- планшет ---------- */
@media (max-width:1000px){
  .s2-fonts{--h:clamp(18px,3.4vw,34px)}
  .s2-fonts .grp{grid-template-columns:1fr}
  .s2-fonts .name,.s2-fonts .row,.s2-fonts .note{grid-column:1;grid-row:auto}
  .s2-fonts .note{margin-top:8px}
  .s2-co .strip{grid-template-columns:1fr;gap:16px}
  .s2-awards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s2-rules{grid-template-columns:1fr}
  .s2-fonts.one{--h:clamp(18px,3.4vw,34px)}
  .s2-fonts.one .row{column-gap:calc(var(--h) * 1.4);grid-template-columns:calc(var(--h) * 7.6) calc(var(--h) * 4.4) calc(var(--h) * 7.6)}
  .s2-panel .pr{grid-template-columns:1fr}
}
/* ---------- телефон ---------- */
@media (max-width:640px){
  .s2-fonts{--h:4.3vw}
  .s2-fonts.one{--h:4.5vw;row-gap:28px}
  .s2-fonts.one .row{column-gap:calc(var(--h) * .9);grid-template-columns:calc(var(--h) * 7.2) calc(var(--h) * 4.4) calc(var(--h) * 7.2)}
  .s2-pt{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s2-pt .as-ph{aspect-ratio:1}
  .s2-pt .as-ph:last-child{grid-column:span 2;aspect-ratio:2}
  .s2-engrave .box{grid-template-columns:1fr;height:auto}
  .s2-engrave .plate{min-height:170px}
  .s2-filmbox{width:100%}
  .s2-fonts .row{column-gap:calc(var(--h) * .8);grid-template-columns:calc(var(--h) * 7.4) calc(var(--h) * 4.8) calc(var(--h) * 7.4)}
  .s2-co .logos{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:24px}
  .s2-co .logos img{height:64px}
  .s2-mono .stage{padding:20px 12px}
  .s2-mono .s2-fonts{--h:3.75vw}
  .s2-mono .s2-fonts.one{--h:4.2vw}
  .s2-smalls,.s2-panel .cols{grid-template-columns:1fr}
  .s2-fit{flex-direction:column}
  .s2-smalls .m img{width:min(100%,260px)}
  .s2-film .corner{width:26%}
  .as-g3.s2-posters,.s2-form{grid-template-columns:1fr}
  .s2-awards{gap:24px 12px}
  .s2-coins{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s2-coin3d{height:min(120vw,520px)}
  .s2-tees{grid-template-columns:1fr}
  .s2 .as-pal{height:200px}
}
@media (prefers-reduced-motion:reduce){
  .s2-coin3d .words b{animation:none}
}

/* кнопки: общий сброс .as button в as.css сильнее .as-btn — возвращаем заливку и поля */
.s2 .as-btn{padding:0 22px;background:var(--ink);color:#fff;font:500 16px/1 var(--font)}
.s2 .as-btn:hover{background:#000}
.s2 .s2-more .as-btn.on{background:#E71E26}

/* ====== правки 23.10 ====== */
/* первый экран: звезда и подпись одной композицией — фраза и кнопка стоят у звезды, по ее нижнему краю */
.s2-hero{justify-content:center;padding-bottom:clamp(48px,8vh,120px)}
.s2-heroin{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:clamp(28px,5vw,96px)}
.s2-hero .s2-heromark{padding-top:0}
.s2-heromark .star{width:clamp(200px,34vw,560px)}
.s2-herotx{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(20px,2.4vw,36px);padding-bottom:clamp(8px,1.4vw,24px)}
.s2-herotx .as-lead{max-width:22ch;font-size:clamp(26px,3.2vw,52px);line-height:1.12}

/* шрифты: блок логотипов по центру */
.s2-fontsw .as-sw-tabs{justify-content:center}
.s2-fonts.one{justify-content:center;justify-items:center}
.s2-fonts.one .row{justify-content:center}
.s2-fonts.one .row span{justify-content:center}
.s2-fonts.one .row img{object-position:center}
.s2-fontsw .note{margin:0 auto;text-align:center;text-wrap:balance}

/* монохром — та же верстка, что у цветной звезды; фоны — вторым рядом внутри поля */
.s2-mono .bg .as-sw-tabs{justify-content:center;margin-bottom:clamp(12px,1.4vw,20px)}
.s2-mono .bg .as-sw-tabs button{font-size:16px}
.s2-mono .stage{padding:clamp(8px,1vw,16px) clamp(16px,3vw,48px)}
.s2-pal .as-p+.as-p{margin-top:.6em;color:var(--mute)}

/* малые размеры: светлый серо-голубой фон, чтобы макеты отделялись друг от друга */
.s2-tint{background:#EBF0F6;padding-bottom:clamp(72px,8vw,136px);margin-top:clamp(112px,12vw,200px);padding-top:clamp(72px,8vw,136px)}
.s2-tint + .as-sec{padding-top:clamp(112px,12vw,200px)}
.s2-tint .as-ph{background:#DDE4EC}
/* телефон уходит за край карточки: край отмечен полоской */
.s2-app .as-phonebox{box-shadow:inset 0 -3px 0 #C3CEDB}
.s2-app .as-phonebox::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18%;background:linear-gradient(transparent,rgba(255,255,255,.85));pointer-events:none}
/* сайт поменьше, ролик под слоем страницы */
.s2-site{width:min(100%,880px);margin:clamp(24px,3vw,48px) auto 0}
.s2-site .scr{position:relative;aspect-ratio:1440/900;background:#0a0a0a;overflow:hidden}
.s2-site .scr video{position:absolute;left:0;top:7.1%;width:100%;height:92.9%;object-fit:cover}
.s2-site .scr .over{position:absolute;inset:0;width:100%;height:100%}
/* правила: сначала текст, потом картинка; линейка крупнее и серая */
.s2-rules figcaption{margin:0 0 16px}
.s2-rules .box{background:#fff;height:clamp(280px,28vw,440px)}
.s2-ruler .scale{height:44px;border-top:3px solid #9AA3AE;background:repeating-linear-gradient(90deg,#9AA3AE 0 2px,transparent 2px 0.5cm) top/100% 16px no-repeat}
.s2-ruler .scale::before{top:-3px;height:18px}
.s2-ruler .scale span{top:24px;font-size:18px}
.s2-ruler .cm{color:#6E7178;font-size:clamp(34px,3.6vw,60px)}

/* ролик: заголовок и ролик по одной левой линии, целиком в экран */
.s2-filmbox .as-sw-tabs{margin-bottom:12px}

/* картинка крупно — целиком в экране */
.s2 .as-lb{padding:clamp(12px,3vw,40px)}
.s2 .as-lb img{max-width:calc(100vw - 2 * clamp(12px,3vw,40px));max-height:calc(100svh - 2 * clamp(12px,3vw,40px));width:auto;height:auto;object-fit:contain}

/* правила стен — иконками */

/* медаль после монет */
.s2-medal{margin-top:clamp(48px,6vw,104px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,72px);align-items:end}
.s2-medal .as-p{max-width:30ch}

/* узоры с белым фоном — светлый контур */
.s2-pt .as-ph.light::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px #DADDE2;pointer-events:none}

@media (max-width:1000px){
  .s2-medal{grid-template-columns:1fr}
}
@media (max-width:640px){
  .s2-heroin{grid-template-columns:1fr;gap:28px}
  .s2-heromark .star{width:62vw}
  .s2-filmbox{width:100%}
  .s2-site{width:100%}
}

/* ====== правки 23.10, вторые ====== */
/* первый экран: заголовок «второй этап», блок по центру */
.s2-heroin{grid-template-columns:auto auto;justify-content:center}
.s2-herotx .as-h1{margin:0}
.s2-herotx .as-lead{max-width:20ch}

/* монохром: фоны — круглыми кнопками слева от поля */
.s2-mono .row2{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(12px,1.6vw,24px);align-items:start}
.s2-mono .bgic{display:flex;flex-direction:column;gap:12px;padding-top:4px}
.s2 .s2-mono .bgic button{width:48px;height:48px;padding:6px;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s}
.s2 .s2-mono .bgic button.on{box-shadow:inset 0 0 0 2px var(--ink)}
.s2-mono .bgic i{display:block;width:100%;height:100%;border-radius:50%;background:#080000 center/cover}
.s2-mono .bgic .w i{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.s2-mono .bgic .p i{background:repeating-conic-gradient(from 8deg,#E71E26 0 14deg,#002FFF 14deg 22deg)!important}

/* палитра: две колонки, черным */
.s2-pal .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,4vw,72px);max-width:1100px;margin-bottom:clamp(16px,2vw,28px)}
.s2-pal .cols .as-p,.s2-pal .as-p+.as-p{color:var(--ink);margin:0;max-width:none}

/* малые размеры: элементы прямо на сером фоне, без белых подложек */
.s2-app .as-phonebox,.s2-app .as-tabbox{background:transparent}
.s2-app .as-phonebox{box-shadow:inset 0 -2px 0 #B9C5D3}
.s2-app .as-phonebox::after{background:linear-gradient(rgba(235,240,246,0),#EBF0F6)}
.s2-rules .box{background:transparent}
.s2-ruler .box{background:#fff}
.s2-engrave .box{gap:clamp(8px,1vw,16px)}

/* ролик — по центру, вкладки тоже */
.s2-filmbox{margin:0 auto}
.s2-filmbox .as-sw-tabs{justify-content:center}

/* правила стен: иконка у заголовка, пункты — текстом */
.s2-howto{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,56px)}
.s2-howto h4{display:flex;align-items:center;gap:12px;margin:0 0 16px;font:500 clamp(20px,1.5vw,24px)/1.15 var(--font);letter-spacing:-.01em}
.s2-howto h4 svg{flex:none;width:40px;height:40px;padding:9px;border-radius:12px;box-sizing:border-box}
.s2-howto .yes h4 svg{background:#E3EAFF;color:#002FFF}
.s2-howto .no h4 svg{background:#FDE3E4;color:#E71E26}
.s2-howto .lib h4 svg,.s2-howto .new h4 svg{background:#E9ECF0;color:var(--ink)}
.s2-howto .pts{margin:0;padding-left:1.1em;display:grid;gap:8px;font:400 17px/1.35 var(--read)}
.s2-howto .hint{margin:16px 0 0;font:400 16px/1.4 var(--read);color:var(--mute)}
.s2-howto .pal{display:flex;gap:6px;margin:10px 0 2px}
.s2-howto .pal i{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.s2-howto .flow{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.s2-howto .flow li{position:relative;display:flex;align-items:flex-start;gap:14px;font:400 17px/1.3 var(--read)}
.s2-howto .flow li span{padding-top:9px}
.s2-howto .flow b{flex:none;width:40px;height:40px;border-radius:12px;border:1.5px solid var(--ink);display:grid;place-items:center;background:#fff}
.s2-howto .flow b svg{width:22px;height:22px}
.s2-howto .flow li+li::before{content:"";position:absolute;left:19.25px;top:-18px;height:18px;border-left:1.5px solid var(--ink)}

/* награды: без увеличения при наведении, золото переливается плавно; верх — светлее, отдельной гранью */
.s2-aw .as-ph img,.as-vis.in .s2-aw .as-ph.zoom:hover img{transform:none!important}
.s2-aw .flow{transition:background-position 1.2s cubic-bezier(.2,.7,.2,1)}
.s2-aw .flow.top{background:linear-gradient(100deg,#B8962F 0%,#FFF6D8 30%,#E2C77A 50%,#FFF3CC 70%,#B8962F 100%);background-size:300% 100%;background-position:calc(var(--gx) * 100%) 0}
.s2-aw .flow.top::after{display:none}

/* монета: скелет, пока грузится */
.s2-coin3d .sk{position:absolute;left:50%;top:50%;width:min(48vh,42vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:1;
  background:linear-gradient(110deg,#E9D9A8 30%,#F7EED3 50%,#E9D9A8 70%);background-size:240% 100%;animation:s2-sk 1.4s linear infinite;transition:opacity .6s}
.s2-coin3d .sk::after{content:"";position:absolute;inset:22%;background:#fff;opacity:.55;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.s2-coin3d.ready .sk,.s2-coin3d.fail .sk{opacity:0;pointer-events:none}
@keyframes s2-sk{from{background-position:120% 0}to{background-position:-120% 0}}

@media (max-width:1000px){
  .s2-howto{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .s2-heroin{grid-template-columns:1fr;justify-content:start}
  .s2-howto{grid-template-columns:1fr}
  .s2-pal .cols{grid-template-columns:1fr}
  .s2-mono .bgic{flex-direction:row}
  .s2-mono .row2{grid-template-columns:1fr}
  .s2-coin3d .sk{width:62vw}
}

/* ====== вкладки: все панели в одной клетке — логотипы грузятся заранее, смена — плавная ====== */
.s2-fontsw .stage{display:grid}
.s2-fontsw .pane,.s2-fontsw .pane.on{grid-area:1/1;display:block;animation:none}
.s2-fontsw .pane{opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s}
.s2-fontsw .pane.on{opacity:1;visibility:visible;transition:opacity .5s var(--ease),visibility 0s}

/* ====== анимации ====== */
@property --gx{syntax:'<number>';inherits:true;initial-value:.5}
/* строки логотипов въезжают по очереди при смене вкладки */
.s2-fontsw .pane .row{opacity:0;transform:translateY(18px)}
.s2-fontsw .pane.on .row{animation:s2-rise .7s var(--ease) both}
.s2-fontsw .pane.on .row:nth-child(2){animation-delay:.09s}
.s2-fontsw .pane.on .row:nth-child(3){animation-delay:.18s}
@keyframes s2-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* кобрендинг: логотипы выскакивают слева направо */
.s2-co .logos img{opacity:0;transform:scale(.7)}
.as-vis.in .s2-co .logos img{animation:s2-pop .7s cubic-bezier(.3,1.5,.5,1) both}
.as-vis.in .s2-co .strip:nth-child(2) img{animation-delay:.15s}
.as-vis.in .s2-co .strip:nth-child(3) img{animation-delay:.3s}
.as-vis.in .s2-co .logos img:nth-child(2){animation-delay:calc(var(--sd,0s) + .06s)}
@keyframes s2-pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
/* палитра: полосы вырастают снизу */
.s2 .as-pal div{transform-origin:50% 100%;transform:scaleY(0)}
.as-vis.in .s2-pal .as-pal div{animation:s2-grow .9s var(--ease) both}
.as-vis.in .s2-pal .as-pal div:nth-child(2){animation-delay:.1s}
.as-vis.in .s2-pal .as-pal div:nth-child(3){animation-delay:.2s}
.as-vis.in .s2-pal .as-pal div:nth-child(4){animation-delay:.3s}
@keyframes s2-grow{from{transform:scaleY(0)}to{transform:none}}
/* малые размеры: телефон поднимается, иконка выскакивает, вкладка браузера выезжает */
.s2-app .as-phone{transform:translateY(40%);transition:transform 1.2s var(--ease)}
.as-vis.in .s2-app .as-phone{transform:none}
.s2-app .as-bigicon{transform:scale(.4) rotate(-12deg);opacity:0;transition:transform .9s cubic-bezier(.3,1.5,.5,1) .35s,opacity .4s .35s}
.as-vis.in .s2-app .as-bigicon{transform:none;opacity:1}
.s2-app .as-browser{transform:translateX(30px);opacity:0;transition:transform .9s var(--ease) .6s,opacity .6s .6s}
.as-vis.in .s2-app .as-browser{transform:none;opacity:1}
/* плакаты, мерч, форма, футболки: шторка снизу вверх, по очереди */
.as-vis .s2-posters>.as-ph,.as-vis .s2-g4>.as-ph,#form .as-grid>.as-ph,.as-vis .s2-tees>.as-ph{clip-path:inset(100% 0 0 0);transition:clip-path 1.1s var(--ease)!important;opacity:1!important;transform:none!important}
.as-vis.in .s2-posters>.as-ph,.as-vis.in .s2-g4>.as-ph,#form .as-vis.in .as-grid>.as-ph,.as-vis.in .s2-tees>.as-ph{clip-path:inset(0 0 0 0)}
.as-vis.in :is(.s2-posters,.s2-g4,.s2-tees)>.as-ph:nth-child(2),#form .as-vis.in .as-grid>.as-ph:nth-child(2){transition-delay:.12s!important}
.as-vis.in :is(.s2-posters,.s2-g4,.s2-tees)>.as-ph:nth-child(3),#form .as-vis.in .as-grid>.as-ph:nth-child(3){transition-delay:.24s!important}
.as-vis.in :is(.s2-g4,.s2-tees)>.as-ph:nth-child(4){transition-delay:.36s!important}
/* награды: стелы встают по очереди, золото один раз проходит волной */
.s2-aw{opacity:0;transform:translateY(40px)}
.as-vis.in .s2-aw{animation:s2-rise .9s var(--ease) both}
.as-vis.in .s2-aw:nth-child(2){animation-delay:.12s}.as-vis.in .s2-aw:nth-child(3){animation-delay:.24s}.as-vis.in .s2-aw:nth-child(4){animation-delay:.36s}
.as-vis.in .s2-aw .flow{animation:s2-sweep 2.4s ease-in-out .6s both}
@keyframes s2-sweep{from{--gx:0}to{--gx:1}}
/* монеты: переворачиваются ребром и встают на место */
.s2-coins{perspective:900px}
.s2-coins>figure{opacity:0;transform:rotateY(90deg)}
.as-vis.in .s2-coins>figure{animation:s2-flip 1s cubic-bezier(.3,1.3,.5,1) both}
.as-vis.in .s2-coins>figure:nth-child(2){animation-delay:.1s}.as-vis.in .s2-coins>figure:nth-child(3){animation-delay:.2s}
.as-vis.in .s2-coins>figure:nth-child(4){animation-delay:.3s}.as-vis.in .s2-coins>figure:nth-child(5){animation-delay:.4s}.as-vis.in .s2-coins>figure:nth-child(6){animation-delay:.5s}
@keyframes s2-flip{from{opacity:0;transform:rotateY(90deg)}to{opacity:1;transform:none}}
/* узоры на одежде: каждый проявляется шторкой со своей стороны, рисунок разворачивается из глубины */
.s2-pt .as-ph{clip-path:inset(0 100% 0 0)}
.s2-pt .as-ph:nth-child(3n+2){clip-path:inset(100% 0 0 0)}
.s2-pt .as-ph:nth-child(3n){clip-path:inset(0 0 0 100%)}
.as-vis.in .s2-pt .as-ph{animation:s2-wipe 1s var(--ease) both}
.as-vis.in .s2-pt .as-ph:nth-child(2){animation-delay:.08s}.as-vis.in .s2-pt .as-ph:nth-child(3){animation-delay:.16s}
.as-vis.in .s2-pt .as-ph:nth-child(4){animation-delay:.24s}.as-vis.in .s2-pt .as-ph:nth-child(5){animation-delay:.32s}.as-vis.in .s2-pt .as-ph:nth-child(6){animation-delay:.4s}
.as-vis.in .s2-pt .as-ph:nth-child(7){animation-delay:.48s}.as-vis.in .s2-pt .as-ph:nth-child(8){animation-delay:.56s}.as-vis.in .s2-pt .as-ph:nth-child(9){animation-delay:.64s}
@keyframes s2-wipe{to{clip-path:inset(0 0 0 0)}}
/* правила стен: колонки появляются по очереди, шаги схемы зажигаются сверху вниз */
.s2-panel:not([hidden]) .s2-howto>div{animation:s2-rise .7s var(--ease) both}
.s2-panel:not([hidden]) .s2-howto>div:nth-child(2){animation-delay:.08s}.s2-panel:not([hidden]) .s2-howto>div:nth-child(3){animation-delay:.16s}.s2-panel:not([hidden]) .s2-howto>div:nth-child(4){animation-delay:.24s}
.s2-panel:not([hidden]) .s2-howto .flow li{animation:s2-rise .6s var(--ease) both}
.s2-panel:not([hidden]) .s2-howto .flow li:nth-child(2){animation-delay:.4s}.s2-panel:not([hidden]) .s2-howto .flow li:nth-child(3){animation-delay:.55s}
.s2-panel:not([hidden]) .s2-howto .flow li:nth-child(4){animation-delay:.7s}.s2-panel:not([hidden]) .s2-howto .flow li:nth-child(5){animation-delay:.85s}
/* медаль: проявляется с легким наездом */
.s2-medal .as-ph{clip-path:inset(0 0 0 100%);transition:clip-path 1.2s var(--ease)}
.as-vis.in .s2-medal .as-ph{clip-path:inset(0 0 0 0)}

@media (prefers-reduced-motion:reduce){
  .s2-fontsw .pane .row,.s2-co .logos img,.s2 .as-pal div,.s2-aw,.s2-coins>figure,.s2-pt .as-ph,.s2-pt .as-ph img,.s2-medal .as-ph,.s2-app .as-phone,.s2-app .as-bigicon,.s2-app .as-browser,
  .as-vis :is(.s2-posters,.s2-g4,.s2-tees)>.as-ph,#form .as-grid>.as-ph{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important}
}

/* ====== правки: монеты, стены, первый экран, узоры ====== */
.s2-heroin{align-items:center}
.s2-herotx{padding-bottom:0}
/* монеты: подписаны номерами, при наведении растут целиком — без обрезки маской */
.s2-coins figure{margin:0;text-align:center}
.s2-coins figcaption b{font:500 clamp(28px,2.4vw,40px)/1 var(--font);letter-spacing:-.03em;color:var(--ink)}
.s2-coins .as-ph{overflow:visible;transition:transform .6s var(--ease)}
.s2-coins .as-ph img,.as-vis.in .s2-coins .as-ph.zoom:hover img{transform:none!important}
.s2-coins .as-ph:hover{transform:scale(1.06)}
/* стены: залы крупно, иллюстрации рядами одной высоты */
.s2-walls{display:grid;gap:clamp(8px,1vw,16px)}
/* узоры на одежде: появляются шторкой; движение — внутри самих SVG (лучи качаются вокруг точки схода, плитки едут на шаг узора), картинка в рамке не двигается */
.s2-pt .as-ph img{transform:none!important;animation:none!important}
@media (max-width:640px){.s2-coins figcaption b{font-size:24px}}
.s2-heromark .star{transform:translateY(-2.5%)}
/* блок «меньше 0,5 см» целиком на белом — и текст, и линейка */
.s2-rules .s2-ruler{background:#fff;padding:clamp(20px,2.4vw,40px)}
.s2-rules .s2-ruler .box{height:clamp(240px,24vw,380px)}

/* малые размеры: тонированный фон только под макетами, правила и фото — на белом */
.s2-tint{padding-bottom:clamp(56px,6vw,104px)}
.s2-after .s2-rules{margin-top:clamp(48px,5vw,88px)}
.s2-after .s2-ruler .box,.s2-after .s2-rules .s2-ruler{background:#fff;padding:0}
.s2-after .s2-engrave .print{box-shadow:inset 0 0 0 1px var(--line)}
.s2-after .as-ph{background:var(--soft)}
/* угол ролика: все версии знака одной высоты, сменяются плавно на месте */
.s2-film .corner{width:auto;height:4.9%;transition:opacity .8s var(--ease)}
@media (max-width:640px){.s2-film .corner{width:auto;height:7%}}
.s2-model{margin:0 0 clamp(16px,2vw,28px);font:500 clamp(19px,1.4vw,22px)/1.3 var(--font)}
/* угол ролика: три версии в одном размере 2060×315 — одинаковая ширина, сменяются на месте, прозрачность 30 % */
.s2-film .corner{width:18%;height:auto}
.s2-film .corner.on{opacity:.3}
@media (max-width:640px){.s2-film .corner{width:26%;height:auto}}
.s2-awards figcaption{justify-content:center;max-width:none}
.s2-awards figcaption{flex-direction:column;align-items:center;gap:8px;text-align:center;text-wrap:balance}
.s2-awards figcaption span{max-width:20ch;color:var(--mute)}
/* награды: живое золото под картинкой, буквы лежат сверху без ореола */
.s2-aw .as-ph img{position:relative;z-index:1}
.s2-aw .flow{z-index:0}
.s2-aw .as-ph:not(.ok) .flow{opacity:0}
/* телефон: логотипы во вкладках шрифтов и монохрома — столбиком и крупнее, чтобы читались */
@media (max-width:640px){
  .s2-fonts.one,.s2-mono .s2-fonts.one{--h:6.6vw;row-gap:36px;padding:24px 0}
  .s2-fonts.one .row{grid-template-columns:1fr;row-gap:16px;justify-items:center;column-gap:0}
  .s2-fonts.one .row span{justify-content:center}
  .s2-mono .stage{padding:8px 16px}
}
/* телефон: больше воздуха между знаками и явный отступ между строчными, с заглавной и капсом */
@media (max-width:640px){
  .s2-fonts.one,.s2-mono .s2-fonts.one{row-gap:0;padding:8px 0}
  .s2-fonts.one .row{row-gap:28px;padding:36px 0}
  .s2-fonts.one .row+.row{border-top:1px solid var(--line)}
  .s2-mono .stage:not(.w) .s2-fonts.one .row+.row{border-top-color:rgba(255,255,255,.22)}
  /* малые размеры: таблички печати и гравировки целиком, одна под другой */
  .s2-rules .s2-engrave .box{height:auto;grid-template-columns:1fr;gap:12px}
  .s2-engrave .plate{min-height:0;aspect-ratio:16/10;padding:10%}
}
/* рубрика «две версии знака»: две карточки рядом, на телефоне одна под другой */
.s2-vers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1vw,16px)}
.s2-vers a{display:flex;flex-direction:column;min-width:0;text-decoration:none;color:inherit}
.s2-vers .pic{display:grid;place-items:center;aspect-ratio:16/9;transition:transform .6s var(--ease)}
.s2-vers .v1 .pic{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.s2-vers .v2 .pic{background:#080000}
.s2-vers .pic img{width:auto;height:46%;max-width:70%}
.s2-vers a:hover .pic{transform:scale(.985)}
.s2-vers .cap{display:flex;flex-direction:column;gap:6px;padding-top:16px;font:400 clamp(18px,1.3vw,21px)/1.35 var(--read)}
.s2-vers .cap b{font:500 clamp(22px,1.8vw,30px)/1.1 var(--font);letter-spacing:-.02em;color:var(--ink)}
/* пометка над заголовком блока: к какой версии он относится */
.s2-kick{display:block;margin-bottom:.45em;font:500 clamp(16px,1.2vw,19px)/1.2 var(--font);letter-spacing:0;color:#E71E26}
.s2-versions + .as-sec{padding-top:clamp(72px,8vw,136px)}
@media (max-width:640px){
  .s2-vers{grid-template-columns:1fr;gap:28px}
  .s2-vers .pic{aspect-ratio:16/10}
}
.s2-vers .pic{position:relative}.s2-vers .pic img{position:absolute;inset:0;margin:auto;height:46%;width:auto;max-width:70%}
/* телефон: две версии знака — в две колонки */
@media (max-width:640px){
  .s2-vers{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .s2-vers .pic{aspect-ratio:1}
  .s2-vers .pic img{height:52%;max-width:78%}
  .s2-vers .cap{padding-top:12px;font-size:16px}
  .s2-vers .cap b{font-size:20px}
}
/* перебивка «основная версия на носителях» и палитра сразу после нее */
.s2-divide{margin-top:clamp(72px,8vw,136px);min-height:60svh}
.s2-divide .as-h1{color:#fff;max-width:14ch}
#pal{padding-top:clamp(72px,8vw,136px)}
#pal .s2-pal{margin-top:0}
/* кобрендинг: переключатели регистров по центру, как в остальных блоках с вкладками */
#co .as-sw-tabs,#co2 .as-sw-tabs{justify-content:center}
@media (max-width:640px){
  /* первый экран: звезда, заголовок, текст и кнопка — по центру */
  .s2-heroin{justify-items:center;text-align:center}
  .s2-herotx{align-items:center}
  .s2-herotx .as-lead{margin-left:auto;margin-right:auto}
  .s2-heromark{display:flex;justify-content:center}
  /* перебивка ниже */
  .s2-divide{min-height:0;padding:96px 0 40px}
}
/* заглушки, пока грузятся логотипы */
.ldg{position:relative}
.ldg::after{content:"";position:absolute;inset:0;border-radius:6px;background:linear-gradient(100deg,rgba(128,128,128,.08) 30%,rgba(128,128,128,.2) 50%,rgba(128,128,128,.08) 70%);background-size:220% 100%;animation:as-shine 1.3s linear infinite;pointer-events:none}
.s2-fonts .row span.ldg{min-width:calc(var(--h) * 5);min-height:var(--h)}
img.ldg{background:linear-gradient(100deg,#F2F2F3 30%,#FAFAFA 50%,#F2F2F3 70%);background-size:220% 100%;animation:as-shine 1.3s linear infinite;border-radius:6px}
.as-ph.contain:not(.ok),.as-ph.soft:not(.ok){background:var(--soft)}
/* наведенная строка ярче, остальные полупрозрачные: гасим сами знаки — строки держит анимация появления */
.s2-fonts .row>span{transition:opacity .35s}
.s2-fonts.hov .row:not(.on)>span{opacity:.2}
/* схема-подсказка под блоком: три строки, яркая перебирается по кругу; гаснет, когда посетитель попробовал сам */
.s2-rowhint{display:flex;align-items:center;justify-content:center;gap:14px;margin:clamp(24px,2.6vw,40px) 0;transition:opacity .6s,visibility 0s .6s}
.s2-fontsw.tried .s2-rowhint{opacity:0;visibility:hidden}
.s2-rowhint .sch{display:grid;gap:7px;width:72px;padding:10px 12px 10px 16px;border-radius:10px;background:var(--soft)}
.s2-rowhint .sch i{position:relative;display:block;height:6px;border-radius:3px;background:var(--ink);opacity:.18;animation:s2-rowhint 3.6s infinite}
.s2-rowhint .sch i::before{content:"";position:absolute;left:-1px;top:-2px;width:10px;height:10px;border-radius:50%;background:inherit}
.s2-rowhint .sch i:nth-child(2){animation-delay:1.2s}
.s2-rowhint .sch i:nth-child(3){animation-delay:2.4s}
@keyframes s2-rowhint{0%,4%{opacity:.18}9%,30%{opacity:1}36%,100%{opacity:.18}}
.s2-rowhint .cap{font:400 16px/1.3 var(--read);color:var(--mute)}
.s2-rowhint .cap b{font-weight:400}
.s2-rowhint .t{display:none}
@media (hover:none){.s2-rowhint .m{display:none}.s2-rowhint .t{display:inline}}
@media (prefers-reduced-motion:reduce){.s2-rowhint .sch i{animation:none}.s2-rowhint .sch i:first-child{opacity:1}}
.s2-mono .s2-rowhint{margin-bottom:0}