/* zidos.app r10 — Раскрой, Rust, Minecraft, поддержка, 404. У каждой страницы своя сцена вокруг механизма продукта:
   Раскрой — тема → клип 9:16 с субтитрами; Rust — игра ↔ бот одним окном; Minecraft — примерка косметики на персонаже.
   После r9-home, r9-finance, r9-pricing. */
.chips li,.chips button{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:52px;width:100%;text-align:left}
.chips li>span:first-child,.chips button>span:first-child{font-size:15px;line-height:1.3}
.chip-p{flex:none;max-width:58%;text-align:right;font-size:14px;color:var(--muted)}
.chip-p b{font-weight:500;font-size:17px;color:var(--ink)}
.rules{display:grid;gap:16px;align-content:start}
.rules p{margin-top:3px;color:var(--muted);max-width:30em}
.shots{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 8px;scrollbar-width:none}
.shots::-webkit-scrollbar{display:none}
.shots .shot{flex:0 0 92%;scroll-snap-align:center;--ar:78/90}
.shots-cap{margin-top:8px;text-align:center}

/* ── Раскрой: сверху слова, ниже сцена во всю ширину ── */
.rk-hero{padding-top:14px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.rk-copy .lead{margin-top:10px;font-size:16px;line-height:1.4}
.rk-copy .acts{margin-top:14px}
.rk-copy .btn{flex:1}
.rk-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.themes{padding:14px 14px 8px}
.rec-top{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.rec-tape{position:relative;height:24px;margin-top:8px;border-radius:8px;background:repeating-linear-gradient(90deg,var(--panel) 0 3px,transparent 3px 7px);overflow:hidden}
.rec-tape i{position:absolute;top:0;bottom:0;left:var(--a,0%);width:7%;border-radius:4px;background:var(--rask)}
.rec-tape b{position:absolute;inset:0;border-right:2px solid var(--ink);opacity:0}
.theme-list{display:grid;margin-top:6px}
.theme-list button{display:grid;grid-template-columns:32px 1fr;column-gap:10px;align-items:center;min-height:52px;padding:6px 8px;margin-inline:-8px;border-radius:var(--r-small);text-align:left;transition:background-color var(--fast)}
.theme-list button:hover{background:var(--panel)}
.theme-list b{grid-row:1/3;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:500;background:var(--panel);transition:background-color var(--fast)}
.theme-list span{font-size:15px;font-weight:500;line-height:1.25}
.theme-list small{font-size:12px;color:var(--muted)}
.theme-list button[aria-selected=true]{background:var(--panel)}
.theme-list button[aria-selected=true] b{background:var(--rask);color:var(--on-color)}
.js .themes:not(.is-play) .rec-tape i,.js .themes:not(.is-play) .theme-list button{opacity:0}
.themes.is-play .rec-tape b{animation:rk-scan 1800ms linear both}
.themes.is-play .rec-tape i,.themes.is-play .theme-list button{animation:rk-found 360ms var(--ease) both}
/* designkit-allow stagger-entry: темы находятся по ходу сканирования ленты — это механизм продукта, а не вход секции */
.themes.is-play .rec-tape i:nth-of-type(1),.themes.is-play .theme-list button:nth-child(1){animation-delay:200ms}
/* designkit-allow stagger-entry: темы находятся по ходу сканирования ленты */
.themes.is-play .rec-tape i:nth-of-type(2),.themes.is-play .theme-list button:nth-child(2){animation-delay:540ms}
/* designkit-allow stagger-entry: темы находятся по ходу сканирования ленты */
.themes.is-play .rec-tape i:nth-of-type(3),.themes.is-play .theme-list button:nth-child(3){animation-delay:880ms}
/* designkit-allow stagger-entry: темы находятся по ходу сканирования ленты */
.themes.is-play .rec-tape i:nth-of-type(4),.themes.is-play .theme-list button:nth-child(4){animation-delay:1220ms}
/* designkit-allow stagger-entry: темы находятся по ходу сканирования ленты */
.themes.is-play .rec-tape i:nth-of-type(5),.themes.is-play .theme-list button:nth-child(5){animation-delay:1560ms}
@keyframes rk-scan{0%{transform:translateX(-100%);opacity:1}95%{opacity:1}100%{transform:none;opacity:0}}
@keyframes rk-found{from{opacity:0}}
.clipwin{padding:14px;display:grid;gap:12px;scroll-margin-top:calc(var(--hdr) + 12px)}
.flow{display:grid;gap:14px;margin-top:16px}
.crop{padding:10px 10px 12px}
.crop-wide{position:relative;aspect-ratio:2/1;border-radius:var(--r-small);background:var(--on-color);overflow:hidden}
.crop-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;opacity:.38}
.crop-win{position:absolute;top:0;bottom:0;left:50%;aspect-ratio:9/16;margin-left:-14%;border-radius:10px;overflow:hidden;box-shadow:0 0 0 3px var(--rask)}
.crop-win img{width:100%;height:100%;object-fit:cover}
.kara{margin-top:12px;text-align:center;font-size:20px;font-weight:500;letter-spacing:-.02em;color:var(--muted)}
.kara span{border-radius:6px;padding:0 3px}
.crop.is-play .kara span{animation:rk-kara 2400ms linear both}
/* designkit-allow stagger-entry: «караоке» — слова подсвечиваются по очереди, это механизм продукта, а не вход секции */
.crop.is-play .kara span:nth-child(1){animation-delay:600ms}
/* designkit-allow stagger-entry: «караоке» — слова подсвечиваются по очереди */
.crop.is-play .kara span:nth-child(2){animation-delay:1000ms}
/* designkit-allow stagger-entry: «караоке» — слова подсвечиваются по очереди */
.crop.is-play .kara span:nth-child(3){animation-delay:1500ms}
/* designkit-allow stagger-entry: «караоке» — слова подсвечиваются по очереди */
.crop.is-play .kara span:nth-child(4){animation-delay:1750ms}
@keyframes rk-kara{0%,100%{background:transparent;color:var(--ink)}1%,16%{background:var(--rask);color:var(--on-color)}17%{background:transparent;color:var(--ink)}}
.crop.is-play .kara{color:var(--ink)}
.flow-steps{display:grid;gap:10px;align-content:center}
.flow-steps li{display:grid;grid-template-columns:36px 1fr;gap:12px}
.flow-steps b{width:36px;height:36px;border-radius:50%;background:var(--panel);display:grid;place-items:center;font-weight:500}
.flow-steps p{margin-top:2px;color:var(--muted)}
.spec-rows{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-top:16px}
.spec-rows dt{font-size:13px;color:var(--muted)}.spec-rows dd{font-weight:500;margin-top:2px}

/* ── Rust: игра ↔ бот одним окном ── */
.ghero{padding-top:14px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.ghero .tag{margin-bottom:10px}
.ghero .lead{margin-top:10px;font-size:16px;line-height:1.4}
.ghero .acts{margin-top:14px}
.link-win{overflow:hidden;scroll-margin-top:calc(var(--hdr) + 12px)}
.lw-head{display:grid;grid-template-columns:1fr 1fr;font-size:13px;font-weight:500}
.lw-head span{padding:12px 16px}
.lw-head .lw-game{background:var(--console);color:var(--paper)}
.thread{display:grid;gap:6px;padding:10px}
.msg{max-width:88%;padding:8px 14px 10px;border-radius:18px 18px 18px 6px;background:var(--panel);justify-self:start}
.msg.game{justify-self:end;border-radius:18px 18px 6px 18px;background:var(--console);color:var(--paper)}
.msg h3{font-size:16px}.msg p{margin-top:1px;color:var(--muted);font-size:13px;line-height:1.35}
.msg.game p{color:var(--console-muted)}
.msg.alert{background:var(--rust);color:var(--on-color)}.msg.alert p{color:var(--on-color-muted)}
.sched-grid,.once-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:20px}
.cal{padding:18px 16px 14px}
.cal-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.cal-month{font-size:18px;font-weight:500;letter-spacing:-.02em}
.cal-days{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin:12px 0 10px}
.cal-days li{display:grid;justify-items:center;gap:2px;padding:10px 2px;border-radius:var(--r-small);background:var(--panel);font-size:12px;color:var(--muted)}
.cal-days b{font-size:22px;font-weight:500;color:var(--ink);letter-spacing:-.03em}
.cal-days li.past b{color:var(--muted)}
.cal-days li[aria-current]{background:var(--rust);color:var(--on-color-muted)}
.cal-days li[aria-current] b{color:var(--on-color)}
.once-list{padding:8px 16px 16px}
.once-list .note{margin-top:10px}
.botcard{padding:18px;display:grid;grid-template-columns:52px 1fr;gap:12px 14px;align-items:center}
.botcard-ava{width:52px;height:52px;border-radius:50%;background:var(--rust);color:var(--on-color);display:grid;place-items:center}
.botcard-ava svg{width:26px;height:26px}
.botcard h2{font-size:22px;line-height:1.15}
.botcard p{font-size:15px;color:var(--muted);margin-top:2px}
.botcard .acts{grid-column:1/-1}
.botcard .btn{flex:1}
.end-sec{padding-block:12px 28px}

/* ── Minecraft: примерка косметики на персонаже ── */
.wardrobe{padding:10px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;scroll-margin-top:calc(var(--hdr) + 12px)}
.mc-stage{position:relative;border-radius:var(--r-inner);overflow:hidden;background:var(--mc)}
.mc-stage svg{width:100%;height:auto}
.nick{position:absolute;left:50%;top:6%;transform:translateX(-50%);padding:3px 10px;border-radius:6px;background:var(--shade-3);color:var(--paper);font-size:13px;font-weight:500;white-space:nowrap}
.nick [data-rank-out]{color:var(--agent)}
.has-grad .nick b{color:var(--rask)}
.nick b{font-weight:500;transition:color var(--fade)}
.mc-stage .l{transition:opacity var(--fade) var(--ease)}
.wardrobe:not(.has-hat) .l-hat,.wardrobe:not(.has-pet) .l-pet,.wardrobe:not(.has-fx) .l-fx{opacity:0}
.mc-side{padding:4px 8px 6px}
.mc-side .seg{margin:0 0 4px;width:100%}
.mc-side .seg button{padding:0 8px;font-size:14px}
.picks button{padding-inline:10px;margin-inline:-10px;width:calc(100% + 20px);border-radius:var(--r-small);transition:background-color var(--fast)}
.picks button:hover{background:var(--panel)}
.picks button[aria-pressed=true]{background:var(--ochre);color:var(--on-color)}
.picks button[aria-pressed=true] .chip-p{color:var(--on-color-muted)}
.picks button[aria-pressed=true] .chip-p b{color:var(--on-color)}
.picks li:not(:has(button)){padding-inline:0}
.mc-fair{margin-top:8px;font-weight:500}
.mc-end{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:20px}

/* ── поддержка: письмо собирается выбором продукта ── */
.shero{padding-top:14px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.shero .lead{margin-top:10px;font-size:16px;line-height:1.4}
.composer{padding:18px 16px 16px;scroll-margin-top:calc(var(--hdr) + 12px)}
.composer-head h2{font-size:22px}
.composer-pick{margin-top:12px;max-width:none}
.composer-pick button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border-radius:var(--pill);font-size:14px;color:var(--muted);white-space:nowrap;transition:background-color var(--fast),color var(--fast)}
.composer-pick button i{width:8px;height:8px;border-radius:3px;background:var(--tone);flex:none}
.composer-pick button:hover{color:var(--ink)}
.composer-pick button[aria-pressed=true]{background:var(--frame);color:var(--ink);font-weight:500}
.composer-to{margin-top:12px;display:grid;grid-template-columns:52px 1fr;gap:2px 10px;align-items:baseline;font-size:14px;color:var(--muted)}
.composer-to b{font-weight:500;font-size:15px;color:var(--ink);overflow-wrap:anywhere}
.template-code{margin:10px 0 12px;padding:14px 16px;border-radius:var(--r-inner);background:var(--panel);font:400 15px/1.6 Onest,system-ui,sans-serif;white-space:pre-wrap;min-height:174px}
.composer .acts{align-items:center}
.composer-hint{min-height:40px;margin-top:8px}
.mail-rows{display:grid;gap:6px;margin-top:16px}
.mail-rows li{display:grid;grid-template-columns:12px 1fr;gap:12px;align-items:baseline;padding:12px 16px;border-radius:var(--r-inner);background:var(--frame);line-height:1.5}
.mail-rows i{width:12px;height:12px;border-radius:4px;background:var(--tone);transform:translateY(1px)}
.mail-rows b{font-weight:500}
.mail-rows a,.status-table a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.mail-rows a:hover{text-decoration-color:currentColor}
.sup-end{display:grid;grid-template-columns:minmax(0,1fr);gap:36px}
.status-table{margin-top:14px;width:100%;border-collapse:separate;border-spacing:0 6px;text-align:left}
.status-table th,.status-table td{padding:12px 16px;background:var(--frame);font-weight:400;vertical-align:top}
.status-table th{font-weight:500;border-radius:var(--r-inner) 0 0 var(--r-inner);white-space:nowrap}
.status-table td{border-radius:0 var(--r-inner) var(--r-inner) 0;color:var(--muted)}
.sv-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--good);margin-right:8px}

/* ── 404 ── */
.nf{padding-top:20px;padding-bottom:32px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.nf-clay{width:112px;margin:0 0 4px -8px}
.nf .tag{margin-bottom:8px}
.nf .lead{margin-top:12px}
.nf .acts{margin-top:16px}
.nf-rows{margin:0}
.nf-rows b{font-size:18px;color:var(--muted)}
.nf-rows a{padding-inline:8px}

@media(min-width:901px){
  .shots{overflow:visible;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .rk-hero{padding-top:36px;gap:28px}
  .rk-copy{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:end}
  .rk-copy .crumbs{grid-column:1/-1;margin-bottom:0}
  .rk-copy h1{font-size:56px}
  .rk-copy .lead{font-size:17px;margin:0}
  .rk-copy .btn{flex:none}
  .rk-stage{grid-template-columns:5fr 7fr;gap:16px;align-items:stretch}
  .themes{padding:24px 24px 14px}
  .theme-list{margin-top:12px}
  .theme-list button{min-height:64px}
  .theme-list span{font-size:17px}
  .clipwin{padding:24px;align-content:space-between}
  .rk-stage .clip{grid-template-columns:236px 1fr;gap:28px;align-items:center}
  .rk-stage .poster{width:236px}
  .rk-stage .clip-meta h3{font-size:30px}
  .rk-stage .quote{font-size:17px;max-width:30em}
  .flow{grid-template-columns:1fr 1fr;gap:56px;margin-top:32px;align-items:center}
  .crop{padding:20px}.kara{font-size:26px}.crop-wide{aspect-ratio:16/9}.crop-win{margin-left:-15.8%}
  .spec-rows{grid-template-columns:repeat(4,1fr);margin-top:40px}
  .ghero{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;padding-top:44px}
  .ghero .lead{font-size:18px}
  .ghero h1{font-size:56px}
  .lw-head span{padding:14px 24px;font-size:14px}
  .link-win{background:linear-gradient(90deg,var(--console) 50%,var(--frame) 50%)}
  .thread{grid-template-columns:1fr 1fr;gap:10px 0;padding:8px 0 20px}
  .msg,.msg.game{max-width:none;justify-self:stretch;margin-inline:16px;border-radius:16px}
  .msg.game{background:none;padding-inline:8px}
  .msg.solo{grid-column:2}
  .sched-grid{grid-template-columns:5fr 7fr;gap:56px;margin-top:32px;align-items:center}
  .rules{grid-template-columns:1fr 1fr;gap:28px 40px}
  .cal{padding:28px}
  .once-grid{gap:24px;margin-top:32px}
  .once-list{padding:16px 28px 24px}
  .once-list .chips{columns:2;column-gap:56px}.chips li{break-inside:avoid}
  .botcard{grid-template-columns:64px 1fr auto;padding:24px 32px}
  .botcard-ava{width:64px;height:64px}
  .botcard .acts{grid-column:auto}.botcard .btn{flex:none}
  /* Minecraft на широком окне: сцена с персонажем стоит в центре сама, слова слева, каталог справа на холсте */
  .mc-page .ghero{grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,4fr);gap:40px}
  .mc-page .ghero h1{font-size:48px}
  .wardrobe{display:contents}
  .mc-stage{aspect-ratio:1/1;border-radius:var(--r-frame);box-shadow:var(--shadow)}
  .mc-stage svg{height:100%}
  .nick{font-size:15px;top:9%}
  .mc-side{padding:0}
  .mc-end{grid-template-columns:5fr 7fr;gap:56px;margin-top:32px;align-items:start}
  .mc-end .shots{grid-template-columns:1fr 1fr}
  .shero{grid-template-columns:5fr 6fr;gap:64px;align-items:center;padding-top:44px}
  .shero .lead{font-size:18px}
  .composer{padding:28px}
  .sup-end{grid-template-columns:7fr 5fr;gap:64px;align-items:start}
  .nf{grid-template-columns:5fr 6fr;gap:64px;align-items:center;padding-top:56px;padding-bottom:56px}
  .nf h1{font-size:52px}
}
@media(prefers-reduced-motion:reduce){
  .js .themes:not(.is-play) .rec-tape i,.js .themes:not(.is-play) .theme-list button{opacity:1}
}