/* «Аметист» — a night app for photos and clips (site-templates/README.md). The pictures are the design: they run edge to
   edge, the type is a tight, heavy grotesque over them, and colour is spent in two places only — the «+» that makes something and
   the line that runs around the free try. Everything else is black, warm white and quiet. Phone first. */
@font-face { font-family: Onest; src: url(fonts/onest-cyrillic.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Onest; src: url(fonts/onest-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Oswald; src: url(fonts/oswald.woff2) format("woff2"); font-weight: 200 700; font-display: swap; }
@property --turn { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --night: #0c0a09; --velvet: #171311; --velvet-2: #221c18; --flame: #ff7a1a; --amber: #ffad5c; --cream: #f7f1ea; --ash: #b8aa9c;
  --line: rgb(247 241 234 / .12); --scrim: rgb(10 8 6 / .86);
  --sans: Onest, "Segoe UI", system-ui, -apple-system, sans-serif; --display: Onest, "Segoe UI", system-ui, -apple-system, sans-serif;
  --media: 26px; --card: 22px; --gap: 10px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body { margin: 0; min-height: 100vh; background: var(--night); color: var(--cream); font: 400 16px/1.5 var(--sans); overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
/* In a scrolling row the ring stays inside, or the row cuts it off. */
:is(.cat-kinds button, .cat-subs button, .pill):focus-visible { outline-offset: -2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; padding: 10px 16px; border-radius: 999px; background: var(--cream); color: var(--night); font-weight: 600; }
.skip:focus { top: 10px; }
.muted { color: var(--ash); }
.bolt { width: 1em; height: 1em; fill: currentColor; vertical-align: -.12em; }

/* Buttons: one white pill for the action of the moment, quiet text buttons for the rest. */
.white { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 999px;
  background: var(--cream); color: #160f08; font-weight: 650; font-size: 16px; text-align: center; text-decoration: none; }
.white:disabled { opacity: .5; cursor: default; }
.text-btn { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--cream); font-weight: 550; text-decoration: underline; text-decoration-color: rgb(247 241 234 / .4); text-underline-offset: 4px; }

/* Bar */
/* «Без регистрации»: a caution tape along the very top — orange, broad black slashes along both its edges, still, each as
   wide as the gap after it (2026-10-27: thin and running, they flickered), the words printed on it in black, one or
   another faintly lighting up in no clear order (on plates of their own over the stripes they looked like buttons) —
   the loudest thing on the page, on purpose. The words go along the whole line: three on a phone, five, seven or nine
   on a wider screen. */
.ticker { position: relative; display: flex; align-items: center; height: 30px; overflow: hidden; background: var(--flame); color: #0c0a09; box-shadow: 0 2px 10px rgb(0 0 0 / .55); }
.ticker::before, .ticker::after { content: ""; position: absolute; left: 0; right: 0; height: 6px; pointer-events: none;
  background: linear-gradient(-45deg, #0c0a09 25%, transparent 25% 50%, #0c0a09 50% 75%, transparent 75%) 0 0 / 36px 36px; }
.ticker::before { top: 0; }
.ticker::after { bottom: 0; }
.ticker-line { display: flex; justify-content: space-evenly; width: 100%; max-width: 900px; margin: 0 auto; }
.ticker-line span { font: 700 12.5px/1 Oswald, "Arial Narrow", sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; opacity: .8;
  animation: tape-word 7s ease-in-out infinite; }
/* Each word its own moment: one, then another, as if at random. */
.ticker-line span:nth-child(2) { animation-delay: 3.1s; }
.ticker-line span:nth-child(3) { animation-delay: 1.4s; }
.ticker-line span:nth-child(4) { animation-delay: 5.2s; }
.ticker-line span:nth-child(5) { animation-delay: 2.3s; }
.ticker-line span:nth-child(6) { animation-delay: 4.4s; }
.ticker-line span:nth-child(7) { animation-delay: .7s; }
.ticker-line span:nth-child(8) { animation-delay: 6.1s; }
.ticker-line span:nth-child(9) { animation-delay: 3.8s; }
@keyframes tape-word { 0%, 62%, 100% { opacity: .8; text-shadow: none; } 76% { opacity: 1; text-shadow: 0 0 6px rgb(255 247 235 / .9), 0 0 14px rgb(255 214 160 / .7); } }
@media (max-width: 380px) { .ticker-line span { font-size: 12px; font-weight: 600; letter-spacing: .04em; } }
@media (min-width: 760px) { .ticker-line span { font-size: 13px; letter-spacing: .12em; } }
.ticker-line span:nth-child(n + 4) { display: none; }
/* Three no longer fit a 320 px phone (they ran together and past the edges): two. */
@media (max-width: 340px) { .ticker-line span:nth-child(n + 3) { display: none; } }
.bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 16px; background: rgb(16 13 11 / .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.brand { position: relative; display: inline-flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
/* The way home as high as the bar's keys to tap (the letter's ring is 34 px). */
.brand::after { content: ""; position: absolute; inset: -4px 0; }
.brand-mark { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--flame); font: 750 17px/1 var(--display); letter-spacing: -.03em; padding-bottom: 2px; }
/* The site's logo (Настройки сайта → «Логотип») in the letter's place: as high as the letter's ring, a wide one up to 120 px. */
.brand-logo { flex: 0 0 auto; width: auto; height: 34px; max-width: 120px; object-fit: contain; }
.brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 16px; }
.bar-nav { display: none; }
.wallet { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; height: 40px; margin-left: auto; padding: 0 14px 0 12px; border: 0; border-radius: 999px; background: var(--velvet-2); font-weight: 650; font-size: 15px; font-variant-numeric: tabular-nums; }
.wallet .bolt { color: var(--flame); font-size: 17px; }
.wallet-n:empty::before { content: "·"; color: var(--ash); }
/* «Ж / М» (src/sites/audience.js): two round symbols in a pill beside the balance, each in its own colour — the one
   pressed fills with it and glows; the other waits, dimmed. */
.aud { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 2px; height: 40px; margin-left: auto; padding: 3px; border-radius: 999px; background: var(--velvet-2); }
.aud + .wallet { margin-left: 0; }
.aud button { --aud: #ff5c9a; position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--aud); opacity: .6; cursor: pointer;
  transition: opacity .2s, background-color .2s, box-shadow .2s, color .2s; }
.aud .aud-m { --aud: #4c9dff; }
.aud svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.aud button[aria-pressed="true"] { opacity: 1; background: var(--aud); color: #fff; box-shadow: 0 0 16px -3px var(--aud); }
.aud button:focus-visible { outline: 2px solid var(--aud); outline-offset: 2px; }
/* Each symbol as drawn, its touch area a finger wide: out past the pill's edge (into the free bar), never over the other. */
.aud button::after { content: ""; position: absolute; inset: -4px -1px; }
.aud .aud-f::after { left: -8px; }
.aud .aud-m::after { right: -7px; }
@media (hover: hover) { .aud button:not([aria-pressed="true"]):hover { opacity: 1; } }
@media (max-width: 340px) { .aud { gap: 0; padding: 2px; } .aud button { width: 30px; height: 30px; } .aud button::after { inset: -5px 0; } .aud .aud-f::after { left: -10px; } .aud .aud-m::after { right: -10px; } }

.main { width: 100%; max-width: 1180px; margin: 0 auto; padding: 6px 16px 32px; }

/* The free try: the one line of colour that moves. */
.offer { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; margin: 0 0 var(--gap); padding: 10px 14px 10px 16px; border: 0; border-radius: 20px;
  background: var(--velvet); color: var(--cream); text-align: left; text-decoration: none; isolation: isolate; }
.offer.is-free::before { content: ""; position: absolute; inset: 0; z-index: -1; padding: 1.5px; border-radius: inherit;
  background: conic-gradient(from var(--turn), var(--amber), var(--flame) 25%, transparent 45%, transparent 70%, var(--amber));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: run 5s linear infinite; }
@keyframes run { to { --turn: 360deg; } }
.offer-icon { flex: 0 0 auto; width: 26px; height: 26px; fill: var(--flame); }
.offer-text { display: grid; flex: 1 1 auto; min-width: 0; gap: 1px; }
.offer-text strong { font-weight: 650; font-size: 19px; line-height: 1.2; letter-spacing: -.01em; }
.offer.is-free { min-height: 58px; border-radius: 999px; }
.offer-text small { color: var(--ash); font-size: 14px; }
.offer-go { flex: 0 0 auto; width: 22px; height: 22px; fill: var(--ash); transition: transform .2s, fill .2s; }

/* Two tall cards side by side */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-bottom: var(--gap); }
.duo > :only-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.tile { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--card); background: var(--velvet); text-decoration: none; isolation: isolate; }
.tile-media, .tile-media > img, .tile-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.tile-media:empty { background: radial-gradient(90% 70% at 30% 20%, #4a2810, transparent 70%), radial-gradient(80% 70% at 80% 90%, #2a1a0e, transparent 70%), var(--velvet); }
.tile::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, var(--scrim)); pointer-events: none; }
.tile-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 12px 12px 12px 14px; }
.tile-title, .reel-title { min-width: 0; }
/* A long one-word name («Фоторедактор») takes the line; the price then goes under it, on the right. */
.tile-text { flex-wrap: wrap; row-gap: 2px; }
/* The price on its own line, on the right: every title of a row then stands on the same line. */
.tile-text .cost { flex-basis: 100%; justify-content: flex-end; margin-left: auto; }
/* The frame of a card. Orange — the free trial's line, still and thicker — only on «Свой сценарий», the card everything is
   for; the many cards of a grid («Оживить фото», «Готовые сценарии», the examples, «Вариации», «Создать»'s) a faint line,
   orange under the pointer and on keyboard focus (2026-10-27: a wall of orange frames was too loud). */
.tile::before, .reel::before, .studio::before, .scard::before, .ctile::before { content: ""; position: absolute; inset: 0; z-index: 4; padding: 1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from 210deg, var(--amber), var(--flame) 30%, #ff5500 55%, var(--flame) 80%, var(--amber)); opacity: .16; transition: opacity .2s;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.studio::before { padding: 1.5px; opacity: 1; }
@media (hover: hover) { :is(.tile, .reel, .scard, .ctile):hover::before { opacity: 1; } }
:is(.tile, .reel, .scard, .ctile):focus-visible { outline: none; }
:is(.tile, .reel, .scard, .ctile):focus-visible::before { padding: 2px; background: var(--cream); opacity: 1; }
.tile-text, .reel-text { padding: 0 14px 14px; }
/* The price wherever it shows: a small dark pill with ⚡ and the number, no word. */
.cost { display: inline-flex; flex: 0 0 auto; }
.cost-n, .price:not(:empty) { display: inline-flex; align-items: center; gap: 3px; height: 28px; padding: 0 10px 0 8px; border-radius: 999px; background: rgb(16 13 11 / .62);
  color: var(--cream); font-weight: 500; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cost-n .bolt, .price .bolt, .dock-main .bolt { width: 14px; height: 14px; fill: var(--flame); vertical-align: -2px; }
.tile-title { font: 400 18px/1.15 var(--display); letter-spacing: -.01em; text-shadow: 0 1px 10px rgb(0 0 0 / .55); }
.tile-sub { color: var(--ash); font-size: 13px; }
.tile-badge { position: absolute; top: 14px; right: 14px; z-index: 5; padding: 5px 10px; border-radius: 999px; background: linear-gradient(140deg, #ffc15c, #ff8a1f);
  color: #1a0e04; font-weight: 650; font-size: 12px; line-height: 1.3; box-shadow: 0 3px 10px rgb(255 138 31 / .4); }
.tile-play { position: absolute; top: 14px; right: 14px; z-index: 1; width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: rgb(16 13 11 / .55); fill: var(--cream); backdrop-filter: blur(6px); }
.tile-count { position: absolute; top: 14px; right: 14px; z-index: 1; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 999px; background: rgb(16 13 11 / .55); font-weight: 650; font-size: 14px; line-height: 30px; text-align: center; backdrop-filter: blur(6px); }
/* «Готовые сценарии»: four examples at once, as many as there are. */
.mosaic { display: grid; grid-template: 1fr 1fr / 1fr 1fr; gap: 2px; }
.mosaic > img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.mosaic > img:nth-child(n + 5) { display: none; }
.mosaic > img:only-child { grid-area: 1 / 1 / 3 / 3; }
.mosaic > img:first-child:nth-last-child(2), .mosaic > img:first-child:nth-last-child(2) ~ img { grid-row: 1 / 3; }
.mosaic > img:first-child:nth-last-child(3) { grid-row: 1 / 3; }
.duo-low .tile { aspect-ratio: 4 / 3; }
.tile:has(> .mosaic)::after { inset: 30% 0 0; background: linear-gradient(transparent, rgb(10 8 6 / .92) 78%); }

/* «Свой сценарий»: the card everything is for. */
.studio { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 4 / 5; min-height: 460px; max-height: 760px; overflow: hidden; border-radius: var(--media);
  background: radial-gradient(110% 80% at 20% 0%, #3a200d, transparent 65%), radial-gradient(90% 70% at 100% 100%, #22160b, transparent 70%), var(--velvet); isolation: isolate; }
/* On the home page the cards under it keep the same gap as the cards above (it touched them). */
.home > .studio { margin-bottom: var(--gap); border-radius: var(--card); }
.studio-bg, .studio-bg > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.studio-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(10 8 6 / .62), transparent 26%, transparent 46%, var(--scrim) 92%); }
html[data-site-mode="edit"] .only-animate, html[data-site-mode="animate"] .only-edit, html:not([data-site-mode]) .only-edit { display: none; }
/* One inset inside the card: the title, «Видео / Фото», the price and «+» all 18 px from its edges (16 px on a narrow phone). */
.studio-head { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 0; }
.studio-title { min-width: 0; margin: 0; font: 400 22px/1.1 var(--display); letter-spacing: -.015em; text-shadow: 0 2px 24px rgb(0 0 0 / .45); text-wrap: balance; }
/* «Видео / Фото»: a white thumb that slides to the chosen side. */
.toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; flex: 0 0 auto; padding: 4px; border-radius: 999px; background: rgb(16 13 11 / .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.toggle::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--cream); transition: transform .28s cubic-bezier(.3, .7, .2, 1); }
html[data-site-mode="edit"] .toggle::before { transform: translateX(100%); }
.toggle button { position: relative; min-width: 64px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--ash); font-weight: 650; font-size: 15px; transition: color .28s; }
.toggle button[aria-pressed="true"] { color: #160f08; }
/* Small in the frame (32–36 px), a finger's height to tap: up and down to the switch's edge. */
.toggle button::after { content: ""; position: absolute; inset: -4px 0; }
.studio-foot { position: relative; z-index: 5; display: grid; gap: 10px; padding: 12px 14px 14px; }
.compose { display: grid; gap: 8px; }
.compose-row { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 24px; background: rgb(16 13 11 / .58); box-shadow: inset 0 0 0 1px rgb(255 122 26 / .5); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.compose-row:focus-within { box-shadow: inset 0 0 0 1.5px rgb(255 122 26 / .85); }
.idea { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border: 0; border-radius: 50%; background: none; }
.idea svg { width: 20px; height: 20px; fill: var(--flame); transition: transform .3s; }
.idea:active svg { transform: rotate(72deg) scale(.9); }
.compose-row .idea svg { fill: var(--cream); }
.words { flex: 1 1 auto; min-width: 0; height: 40px; min-height: 40px; max-height: 132px; margin: 0; padding: 9px 4px 9px 2px; border: 0; background: none; resize: none; font-size: 16px; line-height: 22px; text-align: left; }
.words::placeholder { color: rgb(247 241 234 / .82); font-size: 14.5px; white-space: nowrap; }
.words:focus-visible { outline: none; }
.plus { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 50%; background: linear-gradient(140deg, var(--flame), var(--amber)); box-shadow: 0 4px 12px rgb(255 122 26 / .28); }
.plus svg { width: 22px; height: 22px; fill: #fff; }
.plus:disabled { opacity: .5; box-shadow: none; }
.plus:active { transform: scale(.94); }
.compose-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; padding: 0 4px; }
.quality { display: flex; gap: 4px; }
.quality button { height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--ash); font-size: 14px; font-weight: 600; }
.quality button[aria-pressed="true"] { background: rgb(247 241 234 / .14); color: var(--cream); }
.price { margin-left: auto; }
.oops { margin: 0; padding: 10px 14px; border-radius: 16px; background: rgb(255 122 26 / .16); color: var(--cream); font-size: 14px; }
.after { display: grid; justify-items: stretch; gap: 6px; }
.after .text-btn { justify-self: center; }
.after-note { margin: 0 0 4px; color: var(--cream); font-size: 14px; text-shadow: 0 1px 10px rgb(0 0 0 / .7); }

/* What the visitor made, over the card */
.out { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.out > img, .out > video { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: auto; }
.out-fill { object-fit: cover; filter: blur(28px) saturate(1.3) brightness(.6); transform: scale(1.15); }
/* The picture sits at the top: below it, over its own blur, is the room for «Скачать» — never a stripe in the middle. */
.out-pic { object-fit: contain; object-position: 50% 0; }
.out-video { background: var(--night); }
.out-busy { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 32px; text-align: center; background: rgb(10 8 6 / .5); }
.out-title { margin: 14px 0 0; font: 700 26px/1.1 var(--display); letter-spacing: -.03em; }
.out-title::after { content: "…"; }
.out-note { max-width: 260px; margin: 0; color: var(--cream); opacity: .8; font-size: 14px; }
.out-line { display: block; width: 140px; height: 2px; overflow: hidden; border-radius: 2px; background: rgb(247 241 234 / .16); }
.out-line::before { content: ""; display: block; width: 40%; height: 100%; background: linear-gradient(90deg, var(--flame), var(--amber)); animation: slide 1.3s ease-in-out infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
/* With a photo on the card, the example goes; while it runs and once it is done, the title and the switch step back. */
.out::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, var(--scrim)); pointer-events: none; }
.out:not(:has(> img:not([hidden]), > video:not([hidden])))::after { display: none; }
html[data-site-step="processing"] .studio-head, html[data-site-step="preview"] .studio-head, html[data-site-step="result"] .studio-head { visibility: hidden; }
html[data-site-step="choose"] .studio-bg, html[data-site-step="processing"] .studio-bg, html[data-site-step="preview"] .studio-bg, html[data-site-step="result"] .studio-bg { visibility: hidden; }
/* The free trial's card runs an effect: «Свой сценарий» behind it stays as it was — its example, its title, no photo. */
html[data-site-mode="effect"] .home .studio .out { display: none; }
html[data-site-mode="effect"] .home .studio-bg, html[data-site-mode="effect"] .home .studio-head { visibility: visible; }

/* Rows of scenarios */
.row-block { margin-top: 34px; }
.row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.row-title { margin: 0 0 12px; font: 700 25px/1.1 var(--display); letter-spacing: -.03em; }
.row-head .row-title { margin: 0; }
.row-more { margin: -10px -8px; padding: 10px 8px; color: var(--ash); font-weight: 550; font-size: 15px; text-decoration: none; }
.row-more:hover { color: var(--cream); }
.reels { display: grid; grid-auto-flow: column; grid-auto-columns: 42%; gap: var(--gap); margin: 0 -16px; padding: 0 16px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
.reels::-webkit-scrollbar, .pills::-webkit-scrollbar { display: none; }
.reels-grid { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; margin: 0; padding: 0; overflow: visible; }
.reel { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--card); background: var(--velvet); text-decoration: none; scroll-snap-align: start; }
.reel-media, .reel-media > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel-media:empty { background: radial-gradient(90% 70% at 70% 15%, #45260f, transparent 70%), radial-gradient(70% 60% at 20% 90%, #28190d, transparent 70%), var(--velvet); }
.reel::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, var(--scrim)); }
.reel-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; padding: 10px; }
.reel-title { font: 400 16px/1.2 var(--display); letter-spacing: -.01em; text-shadow: 0 1px 10px rgb(0 0 0 / .55); overflow-wrap: anywhere; hyphens: auto; }
.reel-text { flex-wrap: wrap; row-gap: 2px; }
.reel-text .cost { flex-basis: 100%; justify-content: flex-end; margin-left: auto; }
.reel-price { color: var(--ash); font-size: 13px; }
.reel[aria-current="page"]::before { padding: 2px; background: var(--cream); opacity: 1; }

/* «Готовые сценарии» */
.scards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.scard { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; padding: 0; border: 0; border-radius: var(--card); background: var(--velvet);
  color: var(--cream); text-align: left; text-decoration: none; isolation: isolate; }
.scard-media, .scard-media > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.scard-media > .ph, .reel-media > .ph { inset: 0; width: 30%; height: 30%; margin: auto; fill: rgb(255 122 26 / .4); }
.scard-media.is-empty, .reel-media.is-empty, .scard-media:empty, .scard-words { background: radial-gradient(90% 70% at 30% 20%, #4a2810, transparent 70%), radial-gradient(80% 70% at 80% 90%, #2a1a0e, transparent 70%), var(--velvet); }
.scard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(10 8 6 / .7), transparent 34%, transparent 58%, rgb(10 8 6 / .75)); pointer-events: none; }
.scard-title { position: absolute; top: 12px; left: 14px; right: 12px; z-index: 2; font: 400 16px/1.2 var(--display); text-shadow: 0 1px 10px rgb(0 0 0 / .55);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; hyphens: auto; }
/* «Свой сценарий» at the head of a kind's cards (catalog.html): its example dimmed under its words and «+». */
.scard-studio { box-shadow: inset 0 0 0 1.5px var(--flame); cursor: pointer; }
.scard-studio .scard-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgb(12 10 9 / .35), transparent 35%, transparent 50%, rgb(12 10 9 / .88)); }
.scard-studio-lead { position: absolute; left: 14px; right: 58px; bottom: 16px; z-index: 2; color: var(--cream); font-size: 13px; line-height: 1.3; text-align: left; }
.scard-studio-plus { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--flame); box-shadow: 0 6px 16px rgb(255 122 26 / .35); }
.scard-studio-plus svg { width: 20px; height: 20px; fill: #0c0a09; }
.scard-words .scard-title { font-size: 15px; -webkit-line-clamp: 6; }
.scard-before { position: absolute; left: 10px; bottom: 10px; z-index: 2; width: 34%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 11px; box-shadow: 0 0 0 1.5px rgb(247 241 234 / .7), 0 6px 14px rgb(0 0 0 / .45); }
.scard-before-word { position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 999px; background: rgb(16 13 11 / .72); font-size: 11px; font-weight: 500; line-height: 1.35; }
.scard-before img { width: 100%; height: 100%; object-fit: cover; }
.scard-meta { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: flex; align-items: center; gap: 6px; }
.scard-type { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgb(16 13 11 / .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.scard-type svg { width: 15px; height: 15px; fill: var(--cream); }
.scard[data-media="video"] .type-photo, .scard[data-media="image"] .type-video { display: none; }
.scard-meta .cost-n { height: 28px; }
.scard:active { transform: scale(.98); }
.scard, .variant { transition: transform .15s; }
/* «Примеры» (partials/catalog.html): a kind's big card, the bar (kinds, search, «Фильтры») that stays under the header,
   the kind's sections, the cards, «Ничего не нашлось»; and the sheet «Фильтры». */
.catalog { position: relative; margin-top: 26px; scroll-margin-top: 60px; }
/* On the home page a kind chosen takes the place of all that is above «Примеры» (the free try, the cards, «Свой
   сценарий»): they go, its big card stands there, and the page is turned so that the bar and the cards stay where they
   were on the screen (app.js). «Все» brings them back. */
.home.is-kind > .offer, .home.is-kind > .duo, .home.is-kind > .studio { display: none !important; }
/* Its big card right under the bar, where the free try stood (no empty band over it). */
.home.is-kind > .catalog { margin-top: 0; }
/* «Свой сценарий» on «Готовые сценарии» is hidden (as tall as the home page's on a run). A run started from its card,
   which closes, brings it back while it runs and with its result — there and on the home page with a kind chosen. An
   idea's card of «Примеры» (#scene) shows its own run: not behind it, only once it is closed on a run still going. */
.page-scenes > .studio { display: none; aspect-ratio: auto; height: clamp(460px, calc(100svh - 200px), 640px); }
html:is([data-site-mode="animate"], [data-site-mode="edit"]):is([data-site-step="processing"], [data-site-step="preview"], [data-site-step="result"]):not(:has(#scene[open])) :is(.home.is-kind, .page-scenes) > .studio { display: flex !important; }
/* Brought into view (app.js), it stands under the header, not behind it. */
.home .khero, .studio { scroll-margin-top: 72px; }
.khero:not([hidden]) { animation: khero-in .24s ease-out; }
@keyframes khero-in { from { opacity: 0; transform: translateY(16px); } }
/* The sections' row keeps its place while a kind without sections is chosen (the cards under it do not jump). */
.cat-subs.is-blank { visibility: hidden; }
.catalog-title { margin-top: 4px; }
/* «Готовые сценарии» has its own title over «Примеры». */
.page-scenes .catalog-title { display: none; }
.khero { --ph: 248px; position: relative; margin: 0 0 22px; padding-bottom: 18px; overflow: hidden; border-radius: 28px; background: var(--velvet); isolation: isolate; }
.khero::before { content: ""; position: absolute; inset: 0; z-index: 6; padding: 1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from 210deg, var(--amber), var(--flame) 30%, #ff5500 55%, var(--flame) 80%, var(--amber));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.khero-stage { position: relative; height: calc(var(--ph) + 46px); overflow: hidden; }
.khero-blur, .khero-blur > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.khero-blur > img { filter: blur(26px) saturate(1.25) brightness(.55); transform: scale(1.25); }
.khero-stage::after { content: ""; position: absolute; inset: auto 0 0; z-index: 1; height: 42%; background: linear-gradient(transparent, var(--velvet)); }
.khero-phone { position: absolute; left: 50%; top: 22px; z-index: 2; width: calc(var(--ph) * 9 / 16); height: var(--ph); overflow: hidden; border-radius: 26px; background: var(--night);
  transform: translateX(-50%); box-shadow: 0 0 0 1.5px rgb(247 241 234 / .22), 0 18px 40px rgb(0 0 0 / .5); }
.khero-phone > img, .khero-phone > video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.khero-phone.is-empty { display: grid; place-items: center; background: radial-gradient(90% 70% at 30% 20%, #4a2810, transparent 70%), radial-gradient(80% 70% at 80% 90%, #2a1a0e, transparent 70%), var(--velvet-2); }
.khero-phone .ph { width: 34%; height: auto; fill: rgb(255 122 26 / .45); }
.khero-before { position: absolute; z-index: 3; left: calc(50% - var(--ph) * 9 / 32 - var(--ph) * .25); top: calc(22px + var(--ph) * .46); width: calc(var(--ph) * .36); aspect-ratio: 3 / 4;
  overflow: hidden; border-radius: 14px; transform: rotate(-8deg); box-shadow: 0 0 0 2px rgb(247 241 234 / .75), 0 12px 26px rgb(0 0 0 / .5); }
.khero-before > img { width: 100%; height: 100%; object-fit: cover; }
.khero-plus { position: absolute; z-index: 5; left: calc(50% + var(--ph) * 9 / 32 - 26px); top: calc(22px + var(--ph) * .64); display: grid; place-items: center; width: 52px; height: 52px;
  padding: 0; border: 0; border-radius: 50%; background: linear-gradient(140deg, var(--flame), var(--amber)); box-shadow: 0 0 0 4px rgb(16 13 11 / .55), 0 6px 16px rgb(255 122 26 / .28); }
.khero-plus svg { width: 26px; height: 26px; fill: #fff; }
.khero-plus:active { transform: scale(.94); }
.khero-text { position: relative; z-index: 2; display: grid; gap: 8px; margin-top: -6px; padding: 0 18px; }
.khero-kind { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ash); font-size: 13px; }
.khero-kind svg { width: 16px; height: 16px; fill: var(--ash); }
.khero-title { margin: 0; font: 400 30px/1.08 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.khero-lead { margin: 0; color: var(--ash); font-size: 14.5px; line-height: 1.4; }
.khero-facts { margin: 4px 0 0; }
.khero-facts li { flex: 0 0 auto; padding: 6px 14px; }
.cat-bar { position: sticky; top: 60px; z-index: 12; display: flex; align-items: center; gap: 8px; margin: 0 -16px; padding: 8px 16px; background: rgb(16 13 11 / .92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }
.cat-kinds { display: flex; flex: 1 1 auto; gap: 2px; min-width: 0; padding: 4px; overflow-x: auto; border-radius: 999px; background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line);
  scrollbar-width: none; overscroll-behavior-x: contain; }
.cat-kinds::-webkit-scrollbar { display: none; }
/* Rows of chips — the sections' pills, «Примеры»'s kinds and sections, the filters' chips (app.js ROWS): one line that
   scrolls sideways, never wrapping (2026-10-29: three lines of sections); no scrollbar — touch, a trackpad, shift+wheel
   and Tab scroll it —, snapping lightly to a chip; an edge fades only where more is behind it (app.js fades). */
:is(.pills, .cat-subs, .cat-kinds, .flt-chips) { position: relative; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none; }
:is(.pills, .cat-subs, .cat-kinds, .flt-chips)::-webkit-scrollbar { display: none; }
:is(.pills, .cat-subs, .cat-kinds, .flt-chips) > * { flex: 0 0 auto; scroll-snap-align: start; }
:is(.pills, .cat-subs) { scroll-padding-inline: 16px; }
:is(.pills, .cat-subs, .cat-kinds, .flt-chips).fade-end { -webkit-mask: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
:is(.pills, .cat-subs, .cat-kinds, .flt-chips).fade-start { -webkit-mask: linear-gradient(90deg, transparent, #000 28px); mask: linear-gradient(90deg, transparent, #000 28px); }
:is(.pills, .cat-subs, .cat-kinds, .flt-chips).fade-start.fade-end { -webkit-mask: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.cat-kinds button { position: relative; flex: 0 0 auto; min-width: 40px; min-height: 38px; padding: 0 13px; border: 0; border-radius: 999px; background: none; color: var(--ash); font-weight: 600; font-size: 14px; }
.cat-kinds button[aria-pressed="true"] { background: var(--cream); color: #160f08; }
/* The kinds and the sections as drawn, their touch area 40 px: into their row's own edge, where its scrolling does not cut it. */
:is(.cat-kinds, .cat-subs) button::after { content: ""; position: absolute; inset: -2px 0; }
.cat-round { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; min-height: 46px; padding: 0; border: 0; border-radius: 50%; background: var(--velvet-2);
  box-shadow: inset 0 0 0 1px var(--line); }
.cat-round svg { width: 21px; height: 21px; fill: var(--cream); }
.cat-dot { position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--flame); box-shadow: 0 0 0 2px var(--velvet-2); }
.cat-search { display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 0; min-height: 46px; padding: 0 5px 0 14px; border-radius: 999px; background: var(--velvet-2);
  box-shadow: inset 0 0 0 1.5px var(--flame); }
.cat-search > svg { flex: 0 0 auto; width: 19px; height: 19px; fill: var(--ash); }
.cat-search input { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0; border: 0; background: none; color: var(--cream); font: 400 16px/1 var(--sans); }
.cat-search input:focus { outline: none; }
.cat-search input::placeholder { color: rgb(247 241 234 / .6); }
.cat-search input::-webkit-search-cancel-button { display: none; }
.cat-search-close { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgb(247 241 234 / .09); }
.cat-search-close svg { width: 18px; height: 18px; fill: var(--cream); }
.is-searching .cat-kinds, .is-searching [data-cat-search-open] { display: none; }
.cat-subs { display: flex; gap: 8px; margin: 4px -16px 0; padding: 4px 16px 2px; overflow-x: auto; scrollbar-width: none; }
.cat-subs::-webkit-scrollbar { display: none; }
.cat-subs button, .flt-chips button { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; min-height: 36px; padding: 0 15px; border: 0; border-radius: 999px;
  background: rgb(247 241 234 / .09); box-shadow: inset 0 0 0 1px var(--line); color: var(--cream); font-weight: 500; font-size: 14px; }
.cat-subs button[aria-pressed="true"], .flt-chips button[aria-pressed="true"] { background: var(--cream); box-shadow: none; color: #160f08; }
/* «Видео» in two — «Оживить фото» and «Готовые сюжеты» —: a small panel under the bar, as the kinds' own, as tall as the
   sections' row (the cards under it do not move). */
.cat-subs.is-split { gap: 2px; width: fit-content; max-width: 100%; margin: 4px 0 0; padding: 3px; border-radius: 999px; background: var(--velvet-2); box-shadow: inset 0 0 0 1px var(--line); }
.cat-subs.is-split button { min-height: 36px; padding: 0 14px; background: none; box-shadow: none; color: var(--ash); font-weight: 600; font-size: 13.5px; }
.cat-subs.is-split button[aria-pressed="true"] { background: var(--cream); color: #160f08; }
.flt-chips .bolt { width: 13px; height: 13px; fill: var(--flame); }
.flt-chips button[aria-pressed="true"] .bolt { fill: var(--flame); }
.catalog .scards { margin-top: 12px; }
/* The end of the shown cards: near the screen, twenty more come (app.js). */
.cat-more { height: 1px; }
.cat-empty { display: grid; justify-items: center; gap: 6px; padding: 34px 16px 10px; text-align: center; }
.cat-empty-title { margin: 0; font: 400 22px/1.2 var(--display); }
.cat-empty-lead { margin: 0 0 8px; color: var(--ash); font-size: 14px; }
.sheet-filters .flt { display: grid; gap: 10px; margin-top: 18px; }
.sheet-filters .flt[hidden] { display: none; }
.flt-title { margin: 0; font: 600 15px/1.2 var(--sans); }
.flt-chips { display: flex; gap: 8px; padding: 2px 0; }
.flt-chips button { min-height: 40px; }
.flt-bar { position: sticky; bottom: calc(-24px - env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 22px -20px calc(-24px - env(safe-area-inset-bottom)); padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); background: var(--velvet); box-shadow: inset 0 1px 0 var(--line); }
.flt-show { flex: 1 1 auto; max-width: 230px; }
/* «Популярное» (partials/popular.html): the cards with their places; the first three marked warm. */
.pop-lead { margin: -4px 0 14px; color: var(--ash); font-size: 14px; }
.pop-grid { margin: 0; padding: 0; list-style: none; }
.pop-item { position: relative; display: grid; }
.pop-item > .scard { width: 100%; }
.pop-item .scard-title { right: 10px; display: block; max-height: 3.6em; }
.pop-item .scard-title::before { content: ""; float: right; width: 34px; height: 1.2em; }
.pop-rank { position: absolute; top: 10px; right: 10px; z-index: 5; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: rgb(16 13 11 / .7);
  color: var(--cream); font-weight: 600; font-size: 13px; line-height: 28px; text-align: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; }
.pop-item:nth-child(-n+3) .pop-rank { background: linear-gradient(140deg, #ffc15c, #ff8a1f); color: #1a0e04; box-shadow: 0 3px 10px rgb(255 138 31 / .4); }
.pop-all { display: flex; margin-top: 18px; }
html:is([data-site-step="upload"], [data-site-step="choose"]) .home .studio { cursor: pointer; }
/* «На главный экран» (partials/install.html): a sheet from the bottom — the site's icon, why, and the way. */
.sheet-install { padding-top: 20px; }
.inst-head { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 14px; }
.inst-icon { width: 60px; height: 60px; border-radius: 16px; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 8px 22px rgb(255 122 26 / .3); }
.inst-text { display: grid; gap: 4px; min-width: 0; }
.inst-title { margin: 2px 0 0; font: 700 21px/1.15 var(--display); letter-spacing: -.02em; }
.inst-lead { margin: 0; color: var(--ash); font-size: 14px; line-height: 1.4; }
.inst-lead strong { color: var(--cream); font-weight: 600; }
.inst-way { margin-top: 18px; }
.inst-way .white { width: 100%; }
.inst-steps { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: step; }
.inst-steps li { position: relative; display: block; min-height: 34px; padding: 6px 0 0 46px; color: var(--cream); font-size: 15px; line-height: 1.4; counter-increment: step; }
.inst-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: rgb(247 241 234 / .09); color: var(--cream); font-weight: 600; font-size: 14px; }
.inst-key { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: 0 2px; border-radius: 8px; background: var(--velvet-2); vertical-align: -8px; box-shadow: inset 0 0 0 1px var(--line); }
.inst-key svg { width: 18px; height: 18px; fill: var(--cream); }
.inst-later { display: block; margin: 16px auto 0; }
.tile-media > .ph { position: absolute; inset: 0; width: 30%; height: 30%; margin: auto; fill: rgb(255 122 26 / .4); }

/* Pages */
.page { padding-top: 10px; }
.page-title { margin: 6px 0 12px; font: 700 33px/1.05 var(--display); letter-spacing: -.035em; overflow-wrap: anywhere; }
.page-lead { max-width: 34em; margin: 0 0 18px; color: var(--ash); }
.page-mode { padding-bottom: 4px; }
.pills { display: flex; gap: 8px; margin: 0 -16px 16px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.pills-wrap { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
.pill { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--velvet-2); color: var(--cream); font-size: 15px; font-weight: 550; text-decoration: none; text-align: left; }
.pill[aria-current="page"], .pill[aria-pressed="true"] { background: var(--cream); color: #160f08; }
.page-empty { display: grid; justify-items: start; padding: 48px 0 24px; }
.doc-body { max-width: 40em; color: var(--ash); line-height: 1.65; }
.doc-body h2 { margin: 28px 0 8px; color: var(--cream); font: 700 21px/1.2 var(--display); letter-spacing: -.03em; }

/* The effect page */
.item { display: grid; }
.shot { position: relative; margin: 0 -16px; aspect-ratio: 4 / 5; max-height: 78vh; overflow: hidden; background: var(--velvet); isolation: isolate; }
.shot-media, .shot-media > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shot-media:not(:has(> *)) { background: radial-gradient(90% 70% at 30% 10%, #4a2810, transparent 70%), radial-gradient(80% 60% at 90% 90%, #2a1a0e, transparent 70%); }
.shot-before { opacity: 0; transition: opacity .18s; }
.shot.is-before .shot-before { opacity: 1; }
.shot::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, rgb(16 13 11 / .7)); pointer-events: none; }
.hold { position: absolute; left: 16px; bottom: 16px; z-index: 3; width: 24%; max-width: 110px; aspect-ratio: 3 / 4; padding: 0; overflow: hidden; border: 0; border-radius: 16px;
  background: var(--velvet); box-shadow: 0 0 0 1.5px var(--flame), 0 10px 26px rgb(0 0 0 / .5); color: var(--cream); touch-action: none; user-select: none; -webkit-user-select: none; }
.hold img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.hold-word { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 999px; background: rgb(16 13 11 / .7); font-size: 12px; font-weight: 500; }
.shot.is-before .hold { box-shadow: 0 0 0 2.5px var(--cream), 0 10px 26px rgb(0 0 0 / .5); }
html[data-site-step="choose"] .hold, html[data-site-step="processing"] .hold, html[data-site-step="preview"] .hold, html[data-site-step="result"] .hold { display: none; }
.item-body { display: grid; gap: 12px; padding-top: 18px; }
.item-title { margin: 0; font: 700 32px/1.05 var(--display); letter-spacing: -.03em; overflow-wrap: anywhere; }
.item-price { margin: -2px 0 0; }
.item-price .cost-n { background: var(--velvet-2); }
.item-lead { margin: 0; color: var(--ash); max-width: 34em; }
.item-body .pills { margin-bottom: 0; }
/* «Оживить фото» as its own page: the example in the orange frame, three facts, the variants as framed fields to tap, the
   words and «+» below them. */
.mode-item .shot, .effect-item .shot { margin: 4px 0 0; border-radius: var(--media); }
.mode-item .shot::before, .effect-item .shot::before { content: ""; position: absolute; inset: 0; z-index: 4; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from 210deg, var(--amber), var(--flame) 30%, #ff5500 55%, var(--flame) 80%, var(--amber));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; padding: 0; list-style: none; }
.facts li { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 10px; border-radius: 14px; background: rgb(247 241 234 / .09);
  box-shadow: inset 0 0 0 1px rgb(255 122 26 / .45); color: var(--cream); font-weight: 600; font-size: 13px; line-height: 1.2; text-align: center; white-space: nowrap; }
.facts .bolt { width: 14px; height: 14px; margin-left: 2px; fill: var(--flame); vertical-align: -2px; }
.mode-item .row-title { margin: 10px 0 0; }
.variants { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.variant { position: relative; display: grid; align-content: end; gap: 8px; min-width: 0; min-height: 64px; padding: 14px; border: 0; border-radius: 18px; background: rgb(255 122 26 / .1);
  color: var(--cream); text-align: left; isolation: isolate; }
.variant::before { content: ""; position: absolute; inset: 0; z-index: 2; padding: 1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from 210deg, var(--amber), var(--flame) 30%, #ff5500 55%, var(--flame) 80%, var(--amber));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .25; }
.variant:has(> .variant-media) { align-content: start; }
.variant[aria-pressed="true"] { background: rgb(255 122 26 / .3); }
.variant[aria-pressed="true"]::before { opacity: 1; padding: 1.5px; }
.variant:active { transform: scale(.98); }
.variant-media { display: block; aspect-ratio: 4 / 3; margin: -8px -8px 0; overflow: hidden; border-radius: 12px; }
.variant-media img { width: 100%; height: 100%; object-fit: cover; }
.variant-media.is-empty { display: grid; place-items: center; background: radial-gradient(90% 80% at 30% 20%, #4a2810, transparent 70%), radial-gradient(80% 70% at 80% 90%, #2a1a0e, transparent 70%), var(--velvet); }
.variant-media .ph { width: 30%; height: auto; fill: rgb(255 122 26 / .45); }
/* A long word («Солнцезащитные») breaks inside its card, never into the next one (2026-10-29). */
.variant-title { font-weight: 400; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
.mode-compose { margin-top: 8px; }
.params { display: grid; gap: 14px; }
.kit-param { display: grid; gap: 8px; }
.kit-param-label { margin: 0; color: var(--ash); font-size: 14px; font-weight: 550; }
.kit-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kit-chip { position: relative; cursor: pointer; }
.kit-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.kit-chip span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 999px; background: var(--velvet-2); font-weight: 550; }
.kit-chip input:checked + span { background: var(--cream); color: #160f08; }
.kit-chip input:focus-visible + span { outline: 2px solid var(--flame); outline-offset: 3px; }
.kit-select { min-height: 46px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--velvet-2); color: var(--cream); font-size: 16px; }
/* A setting that is a line of the visitor's own words (a name, a caption): the account's field, lit orange when typed in. */
.kit-text { width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--night); color: var(--cream); font-size: 16px; box-shadow: inset 0 0 0 1px var(--line); }
.kit-text::placeholder { color: rgb(247 241 234 / .6); }
.kit-text:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--flame); }
/* A slider («Возраст»): its line as the browser draws it, its touch area a finger high. */
.kit-range { width: 100%; height: 40px; margin: 0; accent-color: var(--flame); }
.kit-range-value { color: var(--cream); font-weight: 650; }
/* The action stays at the bottom of a phone's screen. */
.dock { position: sticky; bottom: 0; z-index: 10; margin: 4px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--night) 30%); }
.dock-main { width: 100%; min-height: 56px; font-size: 17px; }
.item .after-note { text-shadow: none; color: var(--ash); }
/* On a phone the bar is fixed to the screen's bottom edge the whole way down (the page keeps room for it below). */
.item .run-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; margin: 0; }
.item .drop, .item .picked { margin-top: 0; }
.mode-item .item-body { gap: 14px; }
.mode-item .shot { aspect-ratio: 4 / 5; max-height: 62vh; }
.mode-item .back-btn { z-index: 5; }

/* Sheets: from the bottom on a phone, in the middle on a computer */
/* A card stands on the bottom edge of the screen, whatever the browser's bars do (dvh follows them as they hide and
   come back), and the page under an open card stays still: on a touch screen by locking it (a finger on the dimmed
   strip above a card would scroll the page); with a mouse the page's scrollbar stays — hidden, it left an empty strip
   of its stable gutter (2026-10-28) — and app.js keeps the wheel over the dimmed backdrop from scrolling the page. */
@media (pointer: coarse) { html:has(dialog[open]) { overflow: hidden; } }
.sheet { overscroll-behavior: contain; }
/* A computer's scrollbar inside a card: thin and quiet, not the system's grey bar. */
.sheet, .free-body, .cmp-body { scrollbar-width: thin; scrollbar-color: rgb(247 241 234 / .22) transparent; }
.sheet { width: 100%; max-width: 520px; max-height: 90vh; max-height: 90dvh; margin: auto auto 0; padding: 22px 20px calc(24px + env(safe-area-inset-bottom)); overflow: auto; border: 0; border-radius: 30px 30px 0 0; background: var(--velvet); color: var(--cream); }
.sheet::backdrop { background: rgb(6 5 4 / .7); backdrop-filter: blur(3px); }
.sheet[open] { animation: rise .32s cubic-bezier(.3, .7, .2, 1); }
@keyframes rise { from { transform: translateY(40px); opacity: .4; } }
.sheet-small { max-width: 420px; }
.sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sheet-title { margin: 0 0 8px; font: 700 26px/1.1 var(--display); letter-spacing: -.03em; }
.sheet-top .sheet-title { margin: 0; }
.sheet-text { margin: 0 0 14px; color: var(--ash); }
.sheet-text a { color: var(--cream); }
.sheet-hint { margin: 14px 0 0; color: var(--ash); font-size: 14px; }
.sheet-status { margin: 10px 0 0; color: var(--ash); font-size: 14px; }
.sheet-status:empty { display: none; }
.sheet .oops { margin-top: 10px; }
.sheet-actions { display: grid; gap: 6px; }
.sheet-actions .text-btn { justify-self: center; }
.close { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--velvet-2); }
.close svg { width: 20px; height: 20px; fill: var(--cream); }
/* The payment methods: equal tabs that never push the card wider (a fieldset keeps its content's width unless told). */
.tabs { display: flex; gap: 4px; min-inline-size: 0; margin: 0 0 14px; padding: 4px; border: 0; border-radius: 22px; background: var(--night); }
.tab { position: relative; flex: 1 1 0; min-width: 0; cursor: pointer; }
.tab input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tab span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 4px 8px; border-radius: 18px; color: var(--ash); font-size: 13.5px; font-weight: 600; line-height: 1.15; text-align: center; white-space: nowrap; }
@media (max-width: 380px) { .tab span { padding: 4px 6px; font-size: 12.5px; } }
@media (max-width: 340px) { .tab span { padding: 4px 3px; font-size: 12px; letter-spacing: -.01em; } }
.tab input:checked + span { background: var(--velvet-2); color: var(--cream); }
.tab input:focus-visible + span { outline: 2px solid var(--flame); outline-offset: 1px; }
/* «Пополнить баланс» (2026-10-28): the visitor's bonuses (the first top-up, a promo code), the packages in two columns —
   the total big with the bonus percent, what it is made of and their own gift, the price and about how many videos; the
   one picked is cream like a ticket —, the way to pay, a promo code, and the bar at the bottom: the total, the price,
   «Оплатить». */
.topup-lead { margin: 0 0 12px; color: var(--ash); font-size: 14px; line-height: 1.4; }
.topup-offers { display: grid; gap: 6px; margin: 0 0 14px; }
.offer-chip { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border-radius: 16px; color: var(--cream); font-size: 14px; line-height: 1.3;
  background: linear-gradient(100deg, rgb(255 122 26 / .24), rgb(255 173 92 / .07)); box-shadow: inset 0 0 0 1px rgb(255 122 26 / .5); }
.offer-chip b { color: var(--amber); font-weight: 750; }
.offer-chip.is-promo { background: linear-gradient(100deg, rgb(247 241 234 / .12), rgb(247 241 234 / .04)); box-shadow: inset 0 0 0 1px var(--line); }
.offer-ico { flex: 0 0 auto; font-size: 18px; }
.offer-note { margin: 0; color: var(--ash); font-size: 12.5px; }
.topup-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; margin: 4px 0 12px; }
.topup-label { margin: 0; font: 650 17px/1.2 var(--display); }
.topup-rate { color: var(--ash); font-size: 12.5px; }
.packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 8px; margin: 0 0 16px; }
.pack { position: relative; display: grid; align-content: start; gap: 4px; min-width: 0; padding: 14px 14px 12px; border: 0; border-radius: 20px; background: var(--velvet-2);
  color: var(--cream); text-align: left; box-shadow: inset 0 0 0 1px var(--line); transition: background .15s, box-shadow .15s, color .15s; }
.pack-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.pack-total { display: inline-flex; align-items: center; gap: 3px; min-width: 0; font: 750 24px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pack-total .bolt { flex: 0 0 auto; width: 18px; height: 18px; fill: var(--flame); }
.pack-pct { flex: 0 0 auto; margin-left: auto; padding: 3px 7px; border-radius: 999px; background: rgb(255 122 26 / .16); color: var(--amber); font-size: 12px; font-weight: 700; }
.pack-parts { color: var(--ash); font-size: 12.5px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.pack-sum { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pack-gift { display: block; color: var(--amber); font-weight: 700; white-space: nowrap; }
.pack-gift::after { content: ' 🎁'; }
.pack-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 6px; margin-top: 6px; }
.pack-price { font-size: 16px; font-weight: 750; }
.pack-worth { color: var(--ash); font-size: 12px; white-space: nowrap; }
.pack-tag { position: absolute; top: -9px; right: 12px; padding: 3px 9px; border-radius: 999px; background: var(--flame); color: var(--night); font-size: 11.5px; font-weight: 750; }
.pack.is-max .pack-tag { background: var(--amber); }
.pack[aria-pressed="true"] { background: var(--cream); color: var(--night); box-shadow: 0 12px 30px -14px rgb(255 122 26 / .8); }
.pack[aria-pressed="true"] :is(.pack-parts, .pack-worth) { color: rgb(12 10 9 / .62); }
.pack[aria-pressed="true"] :is(.pack-pct, .pack-gift) { color: #b2470a; }
.pack[aria-pressed="true"] .pack-pct { background: rgb(255 122 26 / .16); }
.pack:focus-visible { outline: 2px solid var(--flame); outline-offset: 2px; }
.pack:disabled { opacity: .55; }
.promo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 0 14px; padding: 14px; border-radius: 20px; background: rgb(247 241 234 / .05); box-shadow: inset 0 0 0 1px var(--line); }
.promo-row { display: flex; gap: 6px; padding: 4px; border-radius: 16px; background: var(--night); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s; }
.promo-row:focus-within { box-shadow: inset 0 0 0 1.5px var(--flame); }
.promo-input { flex: 1 1 auto; width: 100%; min-width: 0; min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--cream);
  font: 650 16px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }
.promo-input::placeholder { color: rgb(184 170 156 / .5); }
.promo-input:focus { outline: none; }
.promo-go { flex: 0 0 auto; min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--velvet-2); color: var(--cream); font-weight: 650; }
.promo-note { margin: 0; color: var(--amber); font-size: 14px; font-weight: 600; }
.promo-hint { margin: 0; color: var(--ash); font-size: 12.5px; line-height: 1.4; }
.topup-bar { position: sticky; bottom: calc(-24px - env(safe-area-inset-bottom)); z-index: 6; display: flex; align-items: center; gap: 12px;
  margin: 14px -16px calc(-24px - env(safe-area-inset-bottom)); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--velvet);
  box-shadow: inset 0 1px 0 var(--line), 0 -14px 24px -14px rgb(0 0 0 / .7); }
.bar-sum { display: grid; gap: 3px; min-width: 0; }
.bar-total { display: inline-flex; align-items: center; gap: 3px; font: 750 22px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bar-total .bolt { width: 17px; height: 17px; fill: var(--flame); }
.bar-sub { overflow: hidden; color: var(--ash); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.pay-go { flex: 0 0 auto; margin-left: auto; min-height: 50px; padding: 0 26px; border: 0; border-radius: 16px; background: linear-gradient(135deg, var(--amber), var(--flame));
  color: var(--night); font-size: 16px; font-weight: 750; box-shadow: 0 10px 24px -10px rgb(255 122 26 / .8); }
.pay-go:disabled { opacity: .55; }
@media (max-width: 420px) { .pack-total { font-size: 22px; } }
@media (max-width: 359px) { .pack { padding: 12px 11px 10px; } .pack-total { font-size: 20px; } .pay-go { padding: 0 18px; } }
@media (hover: hover) { .pack:not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 1px rgb(255 122 26 / .6); } }
/* «Пополнить» step by step: two lines over the steps (the first lit, the second once the way is chosen). */
.topup-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; color: var(--ash); font-size: 12.5px; font-weight: 600; }
.topup-steps li { display: grid; gap: 7px; }
.topup-steps li.is-on, .topup-steps li:has(i:not([hidden])) { color: var(--cream); }
.topup-step-line { display: block; height: 3px; overflow: hidden; border-radius: 3px; background: rgb(247 241 234 / .14); }
.topup-steps li.is-on .topup-step-line { background: var(--cream); }
.topup-step-line i { display: block; height: 100%; background: var(--cream); }
.topup-page { display: grid; }
/* The ways to pay: a row each — its sign, its name and how, its sum for the package; the one picked light. */
.topup-ways-title { margin: 2px 0 12px; }
.ways { display: grid; gap: 8px; margin: 0 0 14px; }
.way { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; border: 0; border-radius: 18px; background: var(--velvet-2); color: var(--cream); text-align: left;
  transition: background-color .15s, color .15s, box-shadow .15s; }
.way-ico { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: rgb(255 122 26 / .14); }
.way-ico svg { width: 21px; height: 21px; fill: var(--amber); }
.way-text { display: grid; gap: 1px; min-width: 0; }
.way-text b { overflow: hidden; font-size: 15.5px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.way-text small { color: var(--ash); font-size: 12.5px; }
.way-price { display: grid; justify-items: end; gap: 2px; margin-left: auto; font-size: 15.5px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.way-cut { padding: 1px 7px; border-radius: 999px; background: rgb(255 122 26 / .18); color: var(--amber); font-size: 11.5px; font-weight: 750; }
.way[aria-pressed="true"] { background: var(--cream); color: var(--night); box-shadow: 0 12px 30px -14px rgb(255 122 26 / .8); }
.way[aria-pressed="true"] .way-text small { color: rgb(12 10 9 / .6); }
.way[aria-pressed="true"] .way-ico { background: var(--night); }
@media (hover: hover) { .way:not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 1px rgb(255 122 26 / .6); } }
/* «Криптовалюта»'s coin under the ways: two chips — the coin and its network, its sum for the package under them; the
   one picked ringed in flame. */
.coins { display: grid; gap: 10px; margin: 0 0 14px; }
.coin-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.coin { display: grid; align-content: center; gap: 4px; min-width: 0; min-height: 62px; padding: 10px 12px; border: 0; border-radius: 16px; background: var(--velvet-2);
  color: var(--cream); text-align: left; transition: background-color .15s, box-shadow .15s; }
.coin-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; }
.coin-name b { font-size: 15px; font-weight: 750; }
.coin-name small { color: var(--ash); font-size: 12px; white-space: nowrap; }
.coin-sum { overflow: hidden; font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }
.coin-sum:empty { display: none; }
.coin[aria-pressed="true"] { background: rgb(255 122 26 / .12); box-shadow: inset 0 0 0 2px var(--flame); }
@media (hover: hover) { .coin:not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 1px rgb(255 122 26 / .6); } }
/* What the package gives, line by line; what comes to the balance the biggest. */
.topup-sum { display: grid; gap: 9px; margin: 0 0 12px; padding: 14px 16px; border-radius: 18px; background: rgb(247 241 234 / .05); box-shadow: inset 0 0 0 1px var(--line); }
.topup-sum div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.topup-sum dt { color: var(--ash); font-size: 14px; }
.topup-sum dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.topup-sum dd.is-plus { color: #6fdc8c; }
.topup-sum .is-total { padding-top: 9px; border-top: 1px solid var(--line); }
.topup-sum .is-total dt { color: var(--cream); font-weight: 700; }
.topup-sum .is-total dd { display: inline-flex; align-items: center; gap: 3px; font: 750 20px/1 var(--display); }
.topup-sum .bolt { width: 16px; height: 16px; fill: var(--flame); }
.bar-back { display: grid; place-items: center; flex: 0 0 auto; width: 50px; height: 50px; border: 0; border-radius: 16px; background: var(--velvet-2); color: var(--cream); }
.bar-back svg { width: 22px; height: 22px; fill: currentColor; }
.pay-go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.pay-go svg { width: 20px; height: 20px; fill: currentColor; }
.pay-go.wide { width: 100%; margin: 0; }
.bar-close { flex: 0 0 auto; margin-left: auto; min-height: 50px; }
/* «Ждём подтверждение оплаты»: the invoice on a card — its sign, what to do, its number and sum. */
.wait-card { display: grid; justify-items: start; gap: 10px; width: 100%; padding: 18px; border-radius: 22px; background: rgb(247 241 234 / .05); box-shadow: inset 0 0 0 1px var(--line); }
.wait-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgb(255 122 26 / .14); }
.wait-ico svg { width: 28px; height: 28px; fill: var(--amber); }
.wait-title { margin: 4px 0 0; font: 700 21px/1.2 var(--display); letter-spacing: -.01em; }
.wait-lead { margin: 0; color: var(--ash); font-size: 14px; line-height: 1.45; }
.wait-rows { display: grid; gap: 8px; width: 100%; margin: 6px 0 0; }
.wait-rows div { display: flex; justify-content: space-between; gap: 12px; }
.wait-rows dt { color: var(--ash); font-size: 14px; }
.wait-rows dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
.wait-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.wait-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 0; border-radius: 16px; background: var(--velvet-2); color: var(--cream); font-weight: 650; }
.wait-btn svg { width: 18px; height: 18px; fill: currentColor; }
.wait-btn:disabled { opacity: .55; }
/* «Криптовалюта»'s transfer: the QR code on cream (its quiet zone is in the code), the exact sum, the visitor's own
   address in monospace with «Скопировать», «Открыть в кошельке», the note. Side by side from 420px, stacked below. */
.transfer { display: grid; gap: 12px; width: 100%; padding: 18px; border-radius: 22px; background: rgb(255 122 26 / .06); box-shadow: inset 0 0 0 1px rgb(255 122 26 / .3); }
.transfer-title { margin: 0; font: 700 19px/1.2 var(--display); letter-spacing: -.01em; }
.transfer-lead { margin: -6px 0 0; color: var(--ash); font-size: 14px; line-height: 1.45; }
.transfer-main { display: grid; gap: 14px; }
.transfer-qr { justify-self: center; width: min(220px, 70vw); padding: 6px; border-radius: 16px; background: var(--cream); color: var(--night); line-height: 0; }
.transfer-qr svg { display: block; width: 100%; height: auto; }
.transfer-facts { display: grid; align-content: start; gap: 10px; min-width: 0; }
.transfer-rows { display: grid; gap: 10px; margin: 0; }
.transfer-rows div { display: grid; gap: 3px; }
.transfer-rows dt { color: var(--ash); font-size: 12.5px; font-weight: 600; }
.transfer-rows dd { margin: 0; }
.transfer-sum b { font: 750 22px/1.1 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.transfer-sum span { color: var(--amber); font-size: 14px; font-weight: 650; white-space: nowrap; }
.transfer-address { padding: 10px 12px; border-radius: 12px; background: var(--night); font: 600 14px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere; word-break: break-all; user-select: all; }
.transfer-copy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 14px;
  background: var(--velvet-2); color: var(--cream); font-weight: 650; }
.transfer-copy svg { width: 18px; height: 18px; fill: currentColor; }
.transfer-copy[data-copied] { background: rgb(111 220 140 / .16); color: #8fe6a6; }
.transfer-copy:disabled { opacity: .55; }
.transfer .pay-go.wide { min-height: 50px; }
.transfer-note { margin: 0; color: var(--ash); font-size: 13px; line-height: 1.45; }
@media (min-width: 420px) {
  .transfer-main { grid-template-columns: 168px minmax(0, 1fr); align-items: start; }
  .transfer-qr { width: 100%; }
  .transfer-copy { justify-self: start; }
}
@media (hover: hover) { .transfer-copy:not([data-copied]):hover { box-shadow: inset 0 0 0 1px rgb(255 122 26 / .6); } }
/* «Платежи» of the profile: a row each — the sum, when and how, the state; «Перейти к оплате» while it waits. */
.acc-pays-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.acc-pays-note { color: var(--ash); font-size: 12.5px; }
.kit-payments { display: grid; gap: 8px; margin-top: 10px; }
.kit-payment { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border-radius: 16px; background: var(--velvet-2); }
.kit-payment::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--ash); }
.kit-payment.is-pending::before { background: #6aa8ff; box-shadow: 0 0 10px #6aa8ff; }
.kit-payment.is-paid::before { background: #6fdc8c; }
.kit-payment.is-declined::before { background: #ff5d6c; }
.kit-payment-main { display: grid; gap: 2px; min-width: 0; }
.kit-payment-sum { font-weight: 750; font-variant-numeric: tabular-nums; }
.kit-payment-meta { color: var(--ash); font-size: 12.5px; }
.kit-payment-state { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: rgb(247 241 234 / .08); color: var(--ash); font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.kit-payment.is-pending .kit-payment-state { background: rgb(106 168 255 / .16); color: #a9cbff; }
.kit-payment.is-paid .kit-payment-state { background: rgb(111 220 140 / .16); color: #8fe6a6; }
.kit-payment.is-declined .kit-payment-state { background: rgb(255 93 108 / .16); color: #ff9aa4; }
.kit-payment-pay { flex: 1 0 100%; display: inline-flex; align-items: center; justify-content: center; min-height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, var(--amber), var(--flame)); color: var(--night); font-weight: 750; text-decoration: none; }
.kit-payments-empty { margin: 0; color: var(--ash); font-size: 14px; }
/* The waiting card fills the screen: its bar at the bottom, as the other steps' (they are long enough to reach it). */
.topup[open] { display: flex; flex-direction: column; }
.topup .topup-body, .topup .paying { flex: 1 0 auto; }
.paying { display: flex; flex-direction: column; gap: 14px; }
.paying .topup-bar { margin-top: auto; }
.paying .sheet-actions { width: 100%; }
/* «Отменить оплату»: the quiet way out, under «Я оплатил». */
.pay-cancel { color: var(--ash); text-decoration-color: rgb(184 170 156 / .4); }
.purse { display: grid; justify-items: start; gap: 2px; margin-bottom: 8px; }
.purse-n { margin: 0; font: 700 48px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.purse-n .bolt { margin-left: 6px; color: var(--flame); font-size: 34px; }
/* A past result opened from the list shows here; the one on the card already shows there. */
.purse-label { margin: 0 0 14px; color: var(--ash); }
.purse .white { width: 100%; }
.acc { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.acc-title { margin: 0 0 10px; font: 700 20px/1.2 var(--display); letter-spacing: -.03em; }
.acc summary { min-height: 32px; font-weight: 600; cursor: pointer; }
.acc summary + * { margin-top: 10px; }
.acc-line { display: flex; justify-content: space-between; gap: 12px; margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; }
.acc-number { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.acc-out { display: grid; gap: 10px; margin-bottom: 12px; }
.acc-out img, .acc-out video { width: 100%; max-height: 52vh; object-fit: contain; border-radius: 18px; background: var(--night); }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.kit-result { position: relative; padding: 0; overflow: hidden; aspect-ratio: 3 / 4; border: 0; border-radius: 12px; background: var(--night); }
.kit-result img { width: 100%; height: 100%; object-fit: cover; }
/* A result whose picture is gone (app.js): its tile in the warm glow of a card without an example, its name and date on it. */
.kit-result.is-empty { background: radial-gradient(90% 70% at 30% 20%, #4a2810, transparent 70%), radial-gradient(80% 70% at 80% 90%, #2a1a0e, transparent 70%), var(--velvet); }
/* When it was made, on the result's corner («26 окт.»; the kit's data-when). */
.kit-result[data-when]::before { content: attr(data-when); position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px;
  background: rgb(16 13 11 / .72); color: var(--cream); font-size: 11px; font-weight: 500; line-height: 1.4; }
.kit-result.is-video::after { content: ""; position: absolute; right: 6px; bottom: 6px; border-left: 9px solid var(--cream); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
/* A picture made 2K after its run: «2K» in its lower right corner (a clip has its mark there). */
.kit-result.is-2k::after { content: "2K"; position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 999px; background: var(--flame); color: #160f08; font-size: 10.5px; font-weight: 700; line-height: 1.5; }
/* What made it (the kit's kit-result-name: the effect, «Изменить», «Оживить»), on the top of the result. */
.kit-result-name { position: absolute; left: 0; right: 0; top: 0; padding: 7px 8px 14px; overflow: hidden; background: linear-gradient(rgb(16 13 11 / .78), transparent);
  color: var(--cream); font-size: 11.5px; font-weight: 600; line-height: 1.25; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.code { margin: 0 0 12px; padding: 14px; border-radius: 16px; background: var(--night); font: 600 20px/1.3 ui-monospace, Consolas, monospace; letter-spacing: .08em; text-align: center; user-select: all; overflow-wrap: anywhere; }
.field-row { display: flex; gap: 8px; }
.field { flex: 1 1 auto; width: 100%; min-width: 0; min-height: 48px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--night); font-size: 16px; }
.label { display: block; margin: 12px 0 6px; color: var(--ash); font-size: 14px; }
details.acc .sheet-actions { margin-top: 12px; }

/* The phone's tab bar: the app's own frame. A solid dark capsule with a light edge, the screen you are on as a white
   capsule, «Создать» a glowing disc set into a notch of the bar. Labels all sit on one line. The page keeps room for it. */
:root { --tabbar: 72px; --bar-bg: #13100d; }
/* The page ends well above the bar and its raised disc (the footer's links touched the disc's ring). */
body { padding-bottom: calc(var(--tabbar) + 48px + env(safe-area-inset-bottom)); }
/* «Популярное», the longest label, and «История» opposite it a little wider than the rest: the label stays in its cell
   (it ran into «Создать» from 390 px down) and «Создать» stays in the middle. */
.tabbar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  height: var(--tabbar); padding: 0 7px; border-radius: 28px; background: linear-gradient(180deg, #1d1814, var(--bar-bg) 60%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), inset 0 0 0 1px rgb(255 255 255 / .05), 0 18px 44px rgb(0 0 0 / .6), 0 2px 8px rgb(0 0 0 / .4); }
.tabbar::before { content: ""; position: fixed; left: 0; right: 0; bottom: 0; z-index: -1; height: calc(var(--tabbar) + 64px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgb(10 8 6 / .92) 60%); pointer-events: none; }
.navtab { position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; height: 58px; margin: 0 2px; padding: 0; border: 0; border-radius: 21px; background: none;
  color: rgb(247 241 234 / .62); font-size: 11px; font-weight: 650; letter-spacing: .01em; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .22s ease, color .22s ease, transform .15s ease; }
.navtab svg { width: 25px; height: 25px; fill: currentColor; }
.navtab > span:last-child { line-height: 13px; white-space: nowrap; }
.navtab:active { transform: scale(.94); }
.navtab:focus-visible { outline: 2px solid var(--flame); outline-offset: 2px; }
.navtab[aria-current="page"], body:has(#history[open]) [data-tab-for="history"], body:has(#account[open]) [data-tab-for="account"], body:has(#popular[open]) [data-tab-for="popular"] {
  background: var(--cream); color: #160f08; box-shadow: 0 4px 14px rgb(0 0 0 / .35); }
body:has(#history[open]) .navtab[aria-current="page"], body:has(#account[open]) .navtab[aria-current="page"], body:has(#create[open]) .navtab[aria-current="page"], body:has(#popular[open]) .navtab[aria-current="page"] {
  background: none; color: rgb(247 241 234 / .62); box-shadow: none; }
/* «Создать»: a disc set into the bar's top edge, its label on the same line as the others. */
.navtab-make { align-content: end; padding-bottom: 8px; color: var(--cream); font-weight: 750; }
.navtab-make:active { transform: none; }
/* «Создать» alive, but no glow around it (2026-10-27: the halo lit up the bar's foot): the disc's own oranges flow slowly,
   with no change of hue, and a soft sheen crosses it now and then; a thin ring of the bar's colour sets it in; the «+» is
   thin. Still for those who ask the system for less motion. */
.navtab-ring { position: absolute; top: -30px; left: 50%; z-index: 1; display: grid; place-items: center; width: 58px; height: 58px; margin-left: -29px; overflow: hidden; border-radius: 50%;
  background: linear-gradient(135deg, #ffa040, var(--flame) 32%, #ff5a00 50%, var(--flame) 68%, #ffc078) 0 0 / 260% 260%;
  box-shadow: 0 0 0 4px #17120e, 0 6px 14px rgb(0 0 0 / .4);
  animation: flow 7s ease-in-out infinite alternate; transition: transform .2s cubic-bezier(.3, .7, .2, 1); }
.navtab-ring svg { position: relative; z-index: 1; width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2.1; stroke-linecap: round; transition: transform .3s cubic-bezier(.3, .7, .2, 1); }
.navtab-ring::after { content: ""; position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 40%, rgb(255 255 255 / .32) 50%, transparent 60%);
  transform: translateX(-120%); animation: sheen 6s ease-in-out infinite; pointer-events: none; }
.navtab-make:active .navtab-ring { transform: scale(.92); }
@keyframes flow { to { background-position: 100% 100%; } }
@keyframes sheen { 0%, 64% { transform: translateX(-120%); } 84%, 100% { transform: translateX(120%); } }
body:has(#create[open]) .navtab-ring svg { transform: rotate(45deg); }
/* A scenario's page is an inner screen: no tab bar, one action at the bottom, «Назад» on the picture. */
.is-detail .tabbar { display: none; }
/* The page that is not there knows no visitor (the kit stays off): no balance, no tab bar — its own «Главная» leads home. */
.is-missing .tabbar, .is-missing .wallet, .is-missing .bar-create, .is-missing .aud { display: none; }
body.is-missing { padding-bottom: 32px; }
body.is-detail { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
.back-btn { position: absolute; top: 14px; left: 14px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgb(16 13 11 / .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.back-btn svg { width: 24px; height: 24px; fill: none; stroke: var(--cream); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
html[data-site-step="processing"] .back-btn, html[data-site-step="preview"] .back-btn, html[data-site-step="result"] .back-btn { display: none; }
.bar-create { display: none; }
/* A phone's first screen, whatever its height: the two cards and the studio share what is left, so the studio's price,
   words and «+» are always in sight above the tab bar and its raised «+». */
@media (max-width: 759px) {
  .home .duo .tile { aspect-ratio: auto; height: clamp(150px, 25vh, 240px); height: clamp(150px, 25svh, 240px); }
  /* «Свой сценарий» half as high as the first screen gave it before (2026-10-27): the cards under it come into sight. */
  .home .studio { aspect-ratio: auto; min-height: 0; height: clamp(170px, calc(37.5vh - 145px), 210px); height: clamp(170px, calc(37.5svh - 145px), 210px); }
  /* No free trial on top (used, or none on the site): its place goes to the studio — while it waits. A photo, a run and
     its result have the stage below (this rule, the more specific, kept them 206 px high). */
  html:not(:is([data-site-step="choose"], [data-site-step="processing"], [data-site-step="preview"], [data-site-step="result"])) .home:not(:has(> .offer:not([hidden]))) .studio { height: clamp(170px, calc(37.5vh - 111px), 244px); height: clamp(170px, calc(37.5svh - 111px), 244px); }
  html[data-site-step="choose"] .home .studio, html[data-site-step="processing"] .home .studio, html[data-site-step="preview"] .home .studio, html[data-site-step="result"] .home .studio { height: clamp(460px, calc(100svh - 200px), 640px); }
}

/* Full-screen cards (Профиль, История, Создать, Пополнить): the whole screen on a phone, the head stays on top. */
.sheet-full { height: 100vh; height: 100dvh; max-height: none; padding: 0 16px calc(24px + env(safe-area-inset-bottom)); border-radius: 0; }
.sheet-full .sheet-top { position: sticky; top: 0; z-index: 8; margin: 0 -16px 14px; padding: calc(14px + env(safe-area-inset-top)) 16px 12px;
  background: var(--velvet); box-shadow: 0 1px 0 var(--line); }
.sheet-full .sheet-title { font-size: 24px; }
.sheet-create[open] { display: flex; flex-direction: column; }
.sheet-create .create-panel { flex: 0 0 auto; }
.sheet-full .create-row { margin: 0 -16px; padding: 0 16px 4px; scroll-padding: 0 16px; }

/* «Бесплатная проба»: a tall card from the bottom — the example on its top half with «до» in the corner, what it does,
   «Загрузить фото», and a bar at the foot in the tab bar's place. */
.sheet-free { height: 100vh; height: 100dvh; max-height: none; margin: auto auto 0; padding: 0; overflow: hidden; border-radius: 0; }
.sheet-free[open] { display: flex; flex-direction: column; }
.free-shot { position: relative; flex: 0 0 auto; height: 41%; min-height: 180px; overflow: hidden; background: var(--night); isolation: isolate; }
@media (max-height: 700px) { .free-shot { height: 33%; } }
.free-media, .free-media > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.free-shot::after { content: ""; position: absolute; inset: auto 0 0; z-index: 1; height: 26%; background: linear-gradient(transparent, var(--velvet)); pointer-events: none; }
.free-before { position: absolute; bottom: 16px; left: 16px; z-index: 3; width: 24%; max-width: 110px; aspect-ratio: 3 / 4; margin: 0; overflow: hidden; border-radius: 16px;
  box-shadow: 0 10px 26px rgb(0 0 0 / .5); }
.free-before::before { content: ""; position: absolute; inset: 0; z-index: 2; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from 210deg, var(--amber), var(--flame) 30%, #ff5500 55%, var(--flame) 80%, var(--amber));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.free-before img { width: 100%; height: 100%; object-fit: cover; }
.free-before figcaption { position: absolute; left: 6px; bottom: 6px; z-index: 1; padding: 2px 8px; border-radius: 999px; background: rgb(16 13 11 / .7); font-size: 12px; font-weight: 500; }
/* The visitor's own photo never covers the example here (it shows small, under «Загрузить фото»); the run's progress and
   its result do. */
.sheet-free .out [data-kit-src="photo"] { display: none !important; }
html[data-site-step="processing"] .free-before, html[data-site-step="preview"] .free-before, html[data-site-step="result"] .free-before { display: none; }
.free-close { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 16px; z-index: 5; background: rgb(16 13 11 / .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.free-body { flex: 1 1 auto; display: grid; align-content: start; gap: 6px; overflow: auto; overscroll-behavior: contain; padding: 12px 16px; }
.free-title { margin: 0; font: 700 21px/1.15 var(--display); letter-spacing: -.02em; }
.free-lead { margin: 0; color: var(--cream); font-size: 15px; line-height: 1.35; text-wrap: pretty; }
.free-lead strong { font-weight: 600; }
/* A scene's card: under the name, small — what it makes of what («Ролик по шаблону и вашему фото»), an idea's words. */
.sheet-scene .free-lead[data-scene-text] { color: var(--ash); font-size: 13px; line-height: 1.4; }
.free-note { margin: 0; color: var(--ash); font-size: 13px; line-height: 1.35; }
.drop { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 6px; padding: 10px 14px; border: 1.5px dashed rgb(255 122 26 / .75); border-radius: 22px;
  background: rgb(247 241 234 / .05); color: var(--cream); text-align: left; transition: background .2s; }
.drop-text { display: grid; gap: 1px; }
.picked { display: flex; align-items: center; gap: 12px; margin-top: 6px; padding: 8px 10px 8px 8px; border: 1.5px solid rgb(255 122 26 / .6); border-radius: 22px;
  background: rgb(255 122 26 / .12); }
.picked[hidden] { display: none; }
.picked-thumb { position: relative; flex: 0 0 auto; width: 56px; height: 56px; padding: 0; overflow: hidden; border: 0; border-radius: 14px; background: var(--velvet-2); }
.picked-thumb img { width: 100%; height: 100%; object-fit: cover; }
.picked-text { display: grid; flex: 1 1 auto; min-width: 0; }
.picked-text strong { font-weight: 600; font-size: 15px; }
.picked-text small { color: var(--ash); font-size: 13px; }
.picked-again { flex: 0 0 auto; white-space: nowrap; }
.drop:active { background: rgb(255 122 26 / .2); }
.drop:disabled { opacity: .55; }
.drop-icon { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(140deg, var(--flame), var(--amber));
  box-shadow: 0 4px 12px rgb(255 122 26 / .28); }
.drop-icon svg { width: 24px; height: 24px; fill: #fff; }
.drop-title { font-weight: 600; font-size: 16px; }
.only-optional, .photo-optional .only-needed { display: none; }
.photo-optional .only-optional { display: inline; }
.drop-note { color: var(--ash); font-size: 13px; }
/* An effect of several photos (partials/slots.html): each photo with its name above, «по желанию» in amber on one it may
   do without; a later photo's drop is quieter than the first one's. The first photo, when it may be left out, says «Добавить». */
.slot { display: grid; margin-top: 4px; }
.slot-head { display: flex; align-items: baseline; gap: 8px; margin: 8px 2px 0; }
.slot-name { min-width: 0; overflow: hidden; color: var(--cream); font-weight: 600; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.slot-opt { flex: 0 0 auto; padding: 2px 9px; border-radius: 999px; background: rgb(255 173 92 / .14); color: var(--amber); font-size: 12px; font-weight: 550; }
:not([data-slot-optional]) > .slot-head .slot-opt { display: none; }
.drop-more { border-color: rgb(255 173 92 / .5); }
.drop-more .drop-icon { background: var(--velvet-2); box-shadow: inset 0 0 0 1px rgb(255 173 92 / .45); }
.drop-more .drop-icon svg { fill: var(--amber); }
/* A later photo waits for the one before it (the kit's data-slot-waiting): its name and drop dimmed, the drop off. */
[data-slot-waiting] > .slot-head { opacity: .55; }
[data-slot-optional] .only-needed { display: none; }
[data-slot-optional] .only-optional { display: inline; }
/* An effect's own words (partials/effectwords.html): «Свой сценарий»'s field, a little lower. */
.fx-words { margin-top: 6px; }
.fx-words .cmp-words { min-height: 96px; }
.fx-words .cmp-field-foot { justify-content: flex-end; }
.free-bar { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--night); box-shadow: inset 0 1px 0 rgb(255 122 26 / .35); }
.free-bar[hidden] { display: none; }
.free-bar-text { display: grid; min-width: 0; }
.free-bar-text strong { overflow: hidden; font-weight: 600; font-size: 15px; text-overflow: ellipsis; }
.free-bar-text small { color: var(--ash); font-size: 12.5px; }
.free-bar-go { flex: 0 0 auto; min-height: 46px; padding: 0 20px; background: linear-gradient(140deg, var(--flame), var(--amber)); color: #160f08; box-shadow: 0 4px 14px rgb(255 122 26 / .25); }
.sheet-free .after { margin-top: 4px; }
.scene-type { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 16px; z-index: 5; padding: 6px 12px; border-radius: 999px; background: rgb(16 13 11 / .6);
  font-size: 13px; font-weight: 500; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.scene-type:empty { display: none; }
.scene-video { display: grid; gap: 8px; }
/* A clip's card only (app.js fillScene: an idea of «Оживить» or a video scene — the same choice as «Свой сценарий»). */
.sheet-scene:not([data-clip="yes"]) .scene-video { display: none; }
.sheet-scene .cmp-seg button { min-height: 40px; }
.sheet-scene .params { margin-top: 2px; }
.sheet-scene .free-media > video, .sheet-scene .free-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.sheet-scene .free-media:empty { background: radial-gradient(90% 70% at 30% 20%, #4a2810, transparent 70%), radial-gradient(80% 70% at 80% 90%, #2a1a0e, transparent 70%), var(--velvet); }
/* The two lines to tick: soft orange strips, a orange box that fills when ticked; asked for, they light up and nod. */
.consents { display: grid; gap: 5px; margin-top: 2px; }
.consents[hidden] { display: none; }
.consent { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 5px 12px; border-radius: 14px; background: rgb(247 241 234 / .05); cursor: pointer;
  transition: background .2s, box-shadow .2s; }
.consent-box { display: grid; place-items: center; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgb(255 122 26 / .8); transition: background .15s; }
.consent-box svg { width: 16px; height: 16px; fill: #fff; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.consent input:checked + .consent-box { background: var(--flame); box-shadow: none; }
.consent input:checked + .consent-box svg { opacity: 1; transform: none; }
.consent input:focus-visible + .consent-box { outline: 2px solid var(--flame); outline-offset: 2px; }
.consent-text { font-size: 13px; line-height: 1.3; color: var(--ash); }
.consent-text a { color: var(--cream); text-decoration-color: rgb(255 122 26 / .7); text-underline-offset: 3px; }
.consent:has(input:checked) { background: rgb(255 122 26 / .1); }
.consents.is-asking .consent:not(:has(input:checked)) { box-shadow: inset 0 0 0 1.5px var(--flame); background: rgb(255 122 26 / .2); animation: nod .45s ease-in-out; }
@keyframes nod { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

/* «Свой сценарий» as a card (home): the whole screen, the body scrolls, the bar with the price and the button stays at the
   foot. Blocks are soft panels; the description field is tall; what fits and what does not, drawn. */
.sheet-compose { height: 100vh; height: 100dvh; max-height: none; margin: auto auto 0; padding: 0; overflow: hidden; border-radius: 0; }
.sheet-compose[open] { display: flex; flex-direction: column; }
.cmp-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: calc(16px + env(safe-area-inset-top)) 16px 6px; }
.cmp-title { margin: 0; font: 700 26px/1.1 var(--display); letter-spacing: -.02em; }
.cmp-lead { margin: 6px 0 0; color: var(--ash); font-size: 14px; line-height: 1.4; }
.cmp-body { flex: 1 1 auto; display: grid; align-content: start; gap: 12px; overflow: auto; padding: 8px 16px 16px; overscroll-behavior: contain; }
.sheet-compose .cmp-switch { margin: 0; }
.sheet-compose .switch button[aria-pressed="true"] { color: #160f08; }
html[data-site-mode="edit"] .sheet-compose .switch::before { transform: translateX(100%); }
.cmp-block { display: grid; min-width: 0; gap: 10px; padding: 14px; border-radius: 22px; background: rgb(247 241 234 / .05); box-shadow: inset 0 0 0 1px var(--line); }
.cmp-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.cmp-label { margin: 0; font: 600 16px/1.2 var(--display); }
.cmp-hint { color: var(--ash); font-size: 12.5px; }
.cmp-field { display: grid; border-radius: 18px; background: var(--night); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s; }
.cmp-field:focus-within { box-shadow: inset 0 0 0 1.5px var(--flame); }
/* Asked for words: the field lights up and nods, the line under it says what is missing; the message far below is not
   repeated. */
.cmp-field.is-asking { box-shadow: inset 0 0 0 1.5px var(--flame), 0 0 0 4px rgb(255 122 26 / .18); animation: nod .45s ease-in-out; }
.cmp-ask { margin: 8px 2px 0; color: #ffc58a; font-size: 13.5px; line-height: 1.35; }
.cmp-ask[hidden] { display: none; }
[data-words-asked] .oops { display: none !important; }
.cmp-words { width: 100%; min-height: 128px; margin: 0; padding: 14px 14px 6px; border: 0; background: none; resize: none; font-size: 16px; line-height: 1.45; }
.cmp-words::placeholder { color: rgb(247 241 234 / .6); }
.cmp-words:focus-visible { outline: none; }
.cmp-field-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 8px 8px; }
.cmp-idea { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: rgb(247 241 234 / .09); color: var(--cream); font-size: 13.5px; }
.cmp-idea svg { width: 16px; height: 16px; fill: var(--flame); }
/* «✦ Подставить идею» as drawn (36 px), a finger's height to tap. */
.cmp-idea::after { content: ""; position: absolute; inset: -2px 0; }
.cmp-count { color: var(--ash); font-size: 12px; font-variant-numeric: tabular-nums; }
.cmp-drop { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 1.5px dashed rgb(255 122 26 / .6); border-radius: 18px; background: rgb(247 241 234 / .05);
  color: var(--cream); text-align: left; }
.cmp-drop:active { background: rgb(255 122 26 / .16); }
.cmp-drop-icon { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; background: var(--velvet-2); }
.cmp-drop-icon svg { width: 24px; height: 24px; fill: var(--amber); }
.cmp-drop-text { display: grid; flex: 1 1 auto; min-width: 0; }
.cmp-drop-text strong { font-weight: 600; font-size: 15px; }
.cmp-drop-text small { color: var(--ash); font-size: 12.5px; }
.cmp-drop-pick { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; background: var(--cream); color: #160f08; font-weight: 600; font-size: 14px; }
.sheet-compose .picked { margin-top: 0; }
/* The photo tips: one row of three small pictures, a green ✓ or a red ✕ on each, a word under it — a hint at a glance,
   so small (2026-10-27: at 50–58 px, then at 42, they were too big under «Загрузить фото»; 28 now). */
/* The ones that do not fit go together, a little apart from the one that does (2026-10-28). */
.tips { display: flex; gap: 3px; min-width: 0; margin-top: 2px; }
.tip-yes + .tip-no { margin-left: 13px; }
.free-body .tips-wrap { margin: 8px 0 2px; }
.scene-video { margin-top: 6px; }
.tip { display: grid; justify-items: center; align-content: start; gap: 3px; margin: 0; }
.tip figcaption { max-width: 60px; color: var(--ash); font-size: 10.5px; line-height: 1.15; text-align: center; }
.tip-pic { position: relative; display: grid; place-items: end center; width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(160deg, #4a3322, #2a1d14); }
.tip-pic > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.tip-pic > svg { width: 24px; height: 24px; fill: #d8c4b0; }
.tip-yes .tip-pic { box-shadow: 0 0 0 1.5px #7be0a4; }
.tip-no .tip-pic { box-shadow: 0 0 0 1.5px rgb(255 107 94 / .75); }
.tip-blur > svg { filter: blur(1.5px) brightness(.6); }
.tip-mark { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 12px; height: 12px; border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--velvet); color: #160f08; font-size: 7.5px; font-weight: 800; line-height: 1; }
.tip-yes .tip-mark { background: #7be0a4; }
.tip-no .tip-mark { background: #ff6b5e; }
.cmp-sub { margin: 0; color: var(--ash); font-size: 13px; }
.cmp-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-seg button, .cmp-fixed { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--night);
  box-shadow: inset 0 0 0 1px var(--line); color: var(--cream); font-size: 15px; }
.cmp-seg button[aria-pressed="true"], .cmp-fixed { background: var(--cream); box-shadow: none; color: #160f08; }
.q-price { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; opacity: .8; }
.q-price .bolt { width: 13px; height: 13px; fill: var(--flame); }
/* «Быстрое / Лучшее / Ультра» and the length (5 с … 25 с): a compact switch each, even on a 320 px phone — a dark
   track, every option on one line with its price small beside the name, the chosen one lit orange (2026-10-27: white
   tiles with the price under the name were heavy, and «5 с» stood at the top of its tile). */
.cmp-quality, .cmp-lengths { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: 4px; border-radius: 16px;
  background: var(--night); box-shadow: inset 0 0 0 1px var(--line); }
.cmp-quality button, .cmp-lengths button, .cmp-lengths .cmp-fixed { justify-content: center; gap: 5px; min-width: 0; min-height: 40px; padding: 0 6px; border-radius: 12px;
  background: none; box-shadow: none; color: var(--ash); font-weight: 600; font-size: 14px; white-space: nowrap; transition: background-color .2s, color .2s, box-shadow .2s; }
.cmp-quality button[aria-pressed="true"], .cmp-lengths button[aria-pressed="true"], .cmp-lengths .cmp-fixed {
  background: rgb(255 122 26 / .2); box-shadow: inset 0 0 0 1.5px var(--flame); color: var(--cream); }
.cmp-quality .q-price, .cmp-lengths .q-price { font-size: 12px; font-weight: 500; opacity: .7; }
:is(.cmp-quality, .cmp-lengths) button[aria-pressed="true"] .q-price { opacity: .9; }
@media (max-width: 340px) {
  .cmp-quality, .cmp-lengths { gap: 0; padding: 3px; }
  .cmp-quality button, .cmp-lengths button { gap: 3px; padding: 0 3px; font-size: 12.5px; }
  .cmp-quality .q-price, .cmp-lengths .q-price { font-size: 11.5px; }
}
/* On a phone the price goes under the name: «25 с ⚡1200» fits a fifth of the track, «Ультра ⚡1200» a third. */
@media (max-width: 479px) {
  :is(.cmp-lengths, .cmp-quality) button { flex-direction: column; gap: 0; min-height: 46px; line-height: 1.15; }
}
/* The frame (2026-10-28): «Как фото» for «Оживить», then 9:16 … 16:9, each with a small outline of its shape — the same
   dark track, four to a row (in one row the column of «Свой сценарий» cut «16:9» short). */
.cmp-formats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 4px; border-radius: 16px;
  background: var(--night); box-shadow: inset 0 0 0 1px var(--line); }
.cmp-formats button { justify-content: center; gap: 6px; min-width: 0; min-height: 40px; padding: 0 6px; border-radius: 12px; background: none; box-shadow: none;
  color: var(--ash); font-weight: 600; font-size: 13.5px; white-space: nowrap; transition: background-color .2s, color .2s, box-shadow .2s; }
.cmp-formats button[aria-pressed="true"] { background: rgb(255 122 26 / .2); box-shadow: inset 0 0 0 1.5px var(--flame); color: var(--cream); }
.cmp-formats .q-name { overflow: hidden; text-overflow: ellipsis; }
/* «Как фото» keeps both words: on two lines in a quarter of a phone's track. */
.cmp-formats [data-kit-format=""] .q-name { overflow: visible; white-space: normal; line-height: 1.1; text-align: center; }
.q-frame { flex: none; width: 10px; height: 14px; border: 1.5px solid currentColor; border-radius: 3px; opacity: .75; }
.q-frame[data-frame="9:16"] { width: 8px; height: 14px; }
.q-frame[data-frame="2:3"] { width: 9.5px; height: 14px; }
.q-frame[data-frame="3:4"] { width: 10.5px; height: 14px; }
.q-frame[data-frame="1:1"] { width: 13px; height: 13px; }
.q-frame[data-frame="4:3"] { width: 15px; height: 11px; }
.q-frame[data-frame="3:2"] { width: 15px; height: 10px; }
.q-frame[data-frame="16:9"] { width: 16px; height: 9px; }
@media (max-width: 340px) { .cmp-formats { gap: 0; padding: 3px; } .cmp-formats button { gap: 4px; padding: 0 3px; font-size: 12.5px; } }
/* «Качество: 1K / 2K» under the photo and its tips (partials/photo.html): its name on the left, the clip quality's compact
   switch on the right — the same dark track and orange-lit option; 2K with its extra beside it. On the free try 2K is off
   (faded) and the reason is said under it. */
.res { margin-top: 12px; }
.free-body .res { margin-top: 8px; }
.res-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.res-name { color: var(--cream); font-weight: 600; font-size: 14px; }
.cmp-res { display: grid; flex: 0 1 200px; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: 4px; border-radius: 16px;
  background: var(--night); box-shadow: inset 0 0 0 1px var(--line); }
.cmp-res button { justify-content: center; gap: 5px; min-width: 0; min-height: 40px; padding: 0 10px; border-radius: 12px; background: none; box-shadow: none;
  color: var(--ash); font-weight: 600; font-size: 14px; white-space: nowrap; transition: background-color .2s, color .2s, box-shadow .2s; }
.cmp-res button[aria-pressed="true"] { background: rgb(255 122 26 / .2); box-shadow: inset 0 0 0 1.5px var(--flame); color: var(--cream); }
.cmp-res .q-price { font-size: 12px; font-weight: 500; opacity: .75; }
.cmp-res button:disabled { opacity: .45; cursor: not-allowed; }
.res-note { flex-basis: 100%; margin: 0; color: var(--ash); font-size: 12.5px; line-height: 1.3; }
.cmp-bar { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--night); box-shadow: inset 0 1px 0 rgb(255 122 26 / .35); }
.cmp-sum { display: grid; flex: 1 1 auto; min-width: 0; }
.cmp-sum small span { white-space: nowrap; }
.cmp-price { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-size: 20px; }
.cmp-price .bolt { width: 18px; height: 18px; fill: var(--flame); }
.cmp-sum small { overflow: hidden; color: var(--ash); font-size: 12.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cmp-go { flex: 0 0 auto; min-height: 50px; padding: 0 22px; background: linear-gradient(140deg, var(--flame), var(--amber)); color: #160f08; box-shadow: 0 4px 14px rgb(255 122 26 / .25); }
.cmp-go .bolt { fill: #160f08; }
/* The home page's line: a button that looks like the words field — the idea typing on it, «+» on its right. */
.ask-btn { width: 100%; border: 0; color: var(--cream); text-align: left; cursor: pointer; }
.ask-text { flex: 1 1 auto; min-width: 0; overflow: hidden; padding: 0 4px 0 2px; color: rgb(247 241 234 / .82); font-size: 14.5px; line-height: 38px; text-overflow: ellipsis; white-space: nowrap; }
.ask-text.is-own { color: var(--cream); font-size: 15px; }
.ask-btn:active .plus { transform: scale(.94); }
/* The home card shows the run of «Свой сценарий»: its example stays while a photo only waits (the photo is in the card). */
.home .studio .out [data-kit-src="photo"] { display: none !important; }
html[data-site-step="choose"] .home .studio-bg { visibility: visible; }
/* A preview or a result: the picture or clip above, its buttons below it — never over the clip's own controls. */
html[data-site-step="preview"] .studio .out, html[data-site-step="result"] .studio .out { position: relative; flex: 1 1 auto; min-height: 0; }
html[data-site-step="preview"] .studio-head, html[data-site-step="result"] .studio-head { display: none; }

/* «Создать» */
.sheet-create:not([open]) { display: none; }
.switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; margin-bottom: 16px; border-radius: 22px; background: var(--night); }
.switch::before { content: ""; position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 18px; background: var(--cream); transition: transform .3s cubic-bezier(.3, .7, .2, 1); }
.sheet-create[data-tab="edit"] .switch::before { transform: translateX(100%); }
.switch button { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border: 0; border-radius: 18px; background: none; color: var(--ash); font-weight: 700; font-size: 16px; transition: color .3s; }
.switch button svg { width: 20px; height: 20px; fill: currentColor; }
.switch button[aria-selected="true"] { color: #160f08; }
.sheet-create[data-tab="animate"] [data-create-panel="edit"], .sheet-create[data-tab="edit"] [data-create-panel="animate"] { display: none; }
.create-panel { display: grid; gap: 14px; align-content: start; animation: panel .32s cubic-bezier(.3, .7, .2, 1); }
@keyframes panel { from { opacity: 0; transform: translateY(8px); } }
.create-lead { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: -2px 0 0; color: var(--ash); font-size: 14px; line-height: 1.4; }
.create-all { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; color: var(--cream); font-weight: 650; text-decoration: none; white-space: nowrap; }
.create-all svg { width: 18px; height: 18px; margin-right: -4px; fill: currentColor; }
/* «Все примеры» a line of text, its touch area at least 40 px high around it. */
.create-all::after { content: ""; position: absolute; inset: -12px -6px; }
/* The ways to make one: tall tiles two in a row, an odd last one («Свой сценарий») across, as on the home page. On a
   frosted plate at the foot the name has a line of its own (beside the arrow «Готовые сюжеты» did not fit a phone's
   tile), the price and the arrow under it. */
.ctiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.ctile { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; padding: 0; border: 0; border-radius: var(--card); background: var(--velvet-2); color: var(--cream);
  font: inherit; text-align: left; text-decoration: none; isolation: isolate; cursor: pointer; transition: transform .15s; }
.ctile:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.ctile:active { transform: scale(.98); }
.ctile-media, .ctile-media > img, .ctile-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.ctile-media:empty { background: radial-gradient(90% 70% at 30% 20%, #4a2810, transparent 70%), radial-gradient(80% 70% at 80% 90%, #2a1a0e, transparent 70%), var(--velvet-2); }
.ctile::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgb(10 8 6 / .6)); pointer-events: none; }
.ctile-bar { position: absolute; left: 7px; right: 7px; bottom: 7px; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 8px;
  padding: 10px 7px 7px 12px; border-radius: 16px; background: rgb(16 13 11 / .5); box-shadow: inset 0 0 0 1px rgb(247 241 234 / .12);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
.ctile-text { display: contents; }
/* Its name whole, on two lines if it must («Готовые сюжеты» was cut to «Готовые сюж…» at 320 px). */
.ctile-title { grid-column: 1 / -1; display: -webkit-box; overflow: hidden; font-weight: 700; font-size: 14.5px; line-height: 1.2; overflow-wrap: anywhere; hyphens: auto; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ctile-price { display: inline-flex; grid-column: 1; align-items: center; gap: 2px; color: var(--ash); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.ctile-price .bolt { width: 12px; height: 12px; fill: var(--flame); }
.ctile-go { display: grid; grid-column: 2; grid-row: 2; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--cream); }
.ctile-go svg { width: 16px; height: 16px; fill: #160f08; }
.create-row { display: grid; grid-auto-flow: column; grid-auto-columns: 38%; gap: 10px; margin: 0 -20px; padding: 0 20px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; scrollbar-width: none; }
.create-row::-webkit-scrollbar { display: none; }
.create-row > * { scroll-snap-align: start; }
.create-row .reel-title { font: 600 15px/1.15 var(--display); letter-spacing: -.02em; }

/* «История» */
.gallery-big { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gallery-big .kit-result { border-radius: 16px; }
.history-empty { display: grid; gap: 14px; padding: 8px 0 4px; }
#history:not(.is-viewing) .acc-out { display: none !important; }

/* «Профиль» */
.purse { padding: 18px; border-radius: 24px; background: var(--velvet-2); }
.purse-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; width: 100%; }
.purse-id { margin: 6px 0 0; font-size: 13px; text-align: right; }
.menu { margin: 16px 0 0; padding: 0; list-style: none; }
.menu > li + li { border-top: 1px solid var(--line); }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 0 4px; border: 0; background: none; color: var(--cream); font-size: 16px; font-weight: 550; text-align: left; text-decoration: none; cursor: pointer; list-style: none; }
.menu-row::-webkit-details-marker { display: none; }
.menu-chev { flex: 0 0 auto; width: 20px; height: 20px; fill: var(--ash); transition: transform .2s; }
.menu-more[open] .menu-chev { transform: rotate(90deg); }
.menu-more > :not(summary) { margin-left: 4px; margin-right: 4px; }
.menu-more[open] { padding-bottom: 16px; }
.menu-go { margin-right: 6px; color: var(--ash); font-size: 15px; font-weight: 500; }
.menu-more .field-row .white { min-height: 48px; padding: 0 18px; }

/* «Профиль» (partials/account.html) */
#account .purse { display: grid; justify-items: stretch; gap: 12px; margin: 0; padding: 16px; border-radius: 24px; background: var(--velvet-2); }
#account .purse-n { display: flex; align-items: baseline; gap: 6px; margin: 0; font: 700 44px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
#account .purse-n .bolt { width: 28px; height: 28px; margin: 0; fill: var(--flame); align-self: center; }
#account .purse-label { margin: 0 0 0 4px; color: var(--ash); font: 400 15px/1.2 var(--sans); letter-spacing: 0; }
#account .purse .white { width: 100%; }
.purse-id { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 0; padding: 10px 10px 10px 14px; border-radius: 16px; background: var(--night); text-align: left; }
.purse-id-text { display: grid; min-width: 0; }
.purse-id-text small { color: var(--ash); font-size: 12px; }
.purse-id-text strong { font-weight: 600; font-size: 17px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.purse-note { margin: -2px 2px 0; color: var(--ash); font-size: 12.5px; line-height: 1.35; }
.chip-btn { flex: 0 0 auto; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: rgb(247 241 234 / .09); color: var(--cream); font-weight: 600; font-size: 14px; }
.chip-btn.wide { justify-self: start; min-height: 40px; }
.chip-btn:disabled { opacity: .5; }
.acc-block { display: grid; gap: 10px; margin-top: 14px; padding: 16px; border-radius: 22px; background: rgb(247 241 234 / .05); box-shadow: inset 0 0 0 1px var(--line); }
.acc-block .acc-title { margin: 0; font: 600 17px/1.2 var(--display); letter-spacing: 0; }
.acc-lead, .acc-hint { margin: 0; color: var(--ash); font-size: 13.5px; line-height: 1.4; }
.acc-warn { margin: 0; padding: 10px 12px; border-radius: 14px; background: rgb(255 154 60 / .14); color: #ffc58a; font-size: 13.5px; line-height: 1.4; }
[data-acc-can] { display: grid; gap: 12px; }
[data-acc-can][hidden] { display: none; }
.acc-item { display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: var(--night); }
.acc-item-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.acc-item-title { font-weight: 600; font-size: 15px; }
.acc-item-state { color: #7be0a4; font-size: 12.5px; }
.acc-item-state:empty { display: none; }
#account .code { margin: 0; padding: 12px; border-radius: 12px; background: var(--velvet-2); font-size: 18px; }
.acc-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.white.small { min-height: 44px; padding: 0 18px; font-size: 15px; }
.acc-form { display: grid; gap: 6px; }
.acc-form[hidden] { display: none; }
.acc-form .label { margin: 4px 0 0; font-size: 13px; }
.acc-form .field { min-height: 46px; background: var(--night); box-shadow: inset 0 0 0 1px var(--line); }
.acc-form .field:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--flame); }
.acc-form .white { margin-top: 6px; }
.acc-block .acc-form .field { background: var(--night); }
.code-field { font: 600 17px/1.2 ui-monospace, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.code-field::placeholder { color: rgb(247 241 234 / .3); }
.acc-status { margin: 2px 0 0; font-size: 13.5px; line-height: 1.35; }
.acc-status:empty { display: none; }
.acc-status[data-tone="ok"] { color: #7be0a4; }
.acc-status[data-tone="error"] { color: #ff8a7a; }
.seg-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 16px; background: var(--night); }
.seg-tabs button { min-height: 40px; border: 0; border-radius: 12px; background: none; color: var(--ash); font-weight: 600; font-size: 14px; }
.seg-tabs button[aria-pressed="true"] { background: var(--cream); color: #160f08; }
#account .menu { margin-top: 14px; }

/* The quiet end of the home page */
.notes { margin-top: 44px; }
.notes-title { margin: 0 0 12px; font: 700 25px/1.1 var(--display); letter-spacing: -.03em; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; font-weight: 550; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin: 6px 2px 0 0; border-right: 1.5px solid var(--ash); border-bottom: 1.5px solid var(--ash); transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq p { margin: 0 0 16px; color: var(--ash); }
.notes-text { max-width: 40em; margin: 18px 0 0; color: var(--ash); font-size: 14px; }

.foot { max-width: 1180px; margin: 0 auto; padding: 0 16px 8px; }
.foot-line { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; color: rgb(184 170 156 / .85); font-size: 12.5px; line-height: 1.7; }
.foot-line > * { white-space: nowrap; }
.foot-line a { display: inline-block; padding: 9px 0; color: inherit; text-decoration: underline; text-decoration-color: rgb(170 155 140 / .35); text-underline-offset: 3px; white-space: nowrap; }
.foot-line a:hover { color: var(--cream); }

@media (min-width: 760px) {
  /* The logo and the menu over the content's left edge, «Создать» and the balance over its right (.main: 1180 px). */
  .bar { height: 68px; padding: 0 max(28px, calc((100% - 1180px) / 2 + 28px)); }
  .ticker-line { max-width: none; justify-content: space-around; padding: 0 16px; }
  .ticker-line span:nth-child(-n + 5) { display: inline; }
  .bar-nav { display: flex; gap: 4px; margin-left: 18px; }
  .bar-nav a, .bar-nav button { padding: 8px 14px; border: 0; border-radius: 999px; background: none; color: var(--ash); text-decoration: none; font-weight: 550; font-size: 16px; }
  .bar-nav a:hover, .bar-nav a[aria-current="page"], .bar-nav button:hover { color: var(--cream); background: var(--velvet); }
  /* A computer has the top bar: no tab bar, «Создать» up there. */
  .tabbar { display: none; }
  body { padding-bottom: 0; }
  .bar-create { display: inline-flex; align-items: center; gap: 6px; height: 40px; margin-left: auto; padding: 0 18px 0 12px; border: 0; border-radius: 999px; background: linear-gradient(140deg, var(--flame), var(--amber)); color: #160f08; font-weight: 700; }
  .bar-create svg { width: 20px; height: 20px; fill: #160f08; }
  .wallet { height: 40px; }
  /* The footer and «Примеры» in line with the content; the answers of «Вопросы» a readable width. */
  .foot { padding: 0 28px 16px; }
  .faq { max-width: 760px; }
  .catalog { scroll-margin-top: 68px; }
  .home .khero, .studio { scroll-margin-top: 80px; }
  .bar-create + .wallet { margin-left: 10px; }
  .aud { height: 40px; margin-left: 10px; }
  .aud button { width: 34px; height: 34px; }
  .create-row { grid-auto-columns: 30%; margin: 0 -28px; padding: 0 28px 4px; scroll-padding: 0 28px; }
  .gallery-big { grid-template-columns: repeat(4, 1fr); }
  .main { padding: 8px 28px 48px; }
  /* Home on a computer (2026-10-27 b): one grid of cards — the free try across the page; under it the three tall cards
     «Оживить фото», «Готовые сценарии», «Фото по сцене»; then «Свой сценарий» and «Фоторедактор» (from 1100 px on the
     right, one over the other, each half as high as the tall cards). The two .duo boxes give their cards to the grid. */
  .home { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto clamp(280px, 40vw, 420px) 230px; gap: 14px; }
  .home > .duo { display: contents; }
  .home > .offer { grid-column: 1 / -1; margin: 0; }
  .home > .duo > .tile { grid-column: auto; grid-row: 2; aspect-ratio: auto; height: auto; min-height: 0; }
  .home > .studio { grid-column: 1 / span 2; grid-row: 3; aspect-ratio: auto; height: auto; min-height: 0; max-height: none; margin: 0; }
  .home > .duo > .tile[data-catalog-go="editor"] { grid-column: 3; grid-row: 3; }
  /* A run on the home page (a photo chosen, its result): the studio is the stage across the page, the cards wait. */
  html:is([data-site-step="choose"], [data-site-step="processing"], [data-site-step="preview"], [data-site-step="result"]) .home { grid-template-rows: auto; }
  html:is([data-site-step="choose"], [data-site-step="processing"], [data-site-step="preview"], [data-site-step="result"]) .home > .duo { display: none; }
  html:is([data-site-step="choose"], [data-site-step="processing"], [data-site-step="preview"], [data-site-step="result"]) .home > .studio { grid-column: 1 / -1; grid-row: 2; height: min(calc(100svh - 190px), 720px); }
  /* A run with a kind chosen: the stage over «Примеры» (in row 2 it stood under them). «Готовые сценарии» has it too. */
  html:is([data-site-step="processing"], [data-site-step="preview"], [data-site-step="result"]) .home.is-kind > .studio { grid-row: auto; }
  .page-scenes > .studio { height: min(calc(100svh - 190px), 720px); }
  /* «Примеры» and «Вопросы» always under the cards (with the free try used, row 1 is empty and would take them). */
  .home > .row-block, .home > .notes, .home > .catalog { grid-column: 1 / -1; }
  .home > .catalog { grid-row: 4; }
  .home > .notes { grid-row: 5; }
  /* A view of «Примеры» (Видео, Фото…): the cards are hidden, so are their rows. */
  .home.is-kind { grid-template-rows: none; }
  .home.is-kind > .catalog, .home.is-kind > .notes { grid-row: auto; }
  /* Its big card right under the bar, as the cards stood (no empty band over it). */
  .home.is-kind > .catalog { margin-top: 0; }
  .home > .catalog { margin-top: 12px; }
  .studio-title { font-size: clamp(26px, 3.6vw, 36px); }
  .home > .duo > .tile .tile-title { font-size: clamp(20px, 1.8vw, 22px); }
  .studio-head { padding: 24px 22px 0; }
  .studio-foot { padding: 18px; }
  .reels { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; overflow: visible; }
  .reels-grid { grid-template-columns: repeat(4, 1fr); }
  .page-title { font-size: 46px; }
  .pills { margin: 0 0 18px; padding: 0; scroll-padding-inline: 0; }
  .duo-low { max-width: 760px; }
  .page-mode + .studio { max-width: 880px; aspect-ratio: 16 / 10; }
  .shot { margin: 18px 0 0; border-radius: var(--media); }
  .item > .shot { width: min(100%, 560px); max-height: min(70vh, 700px); margin: 18px auto 0; }
  .item-body { padding-top: 26px; }
  .item-title { font-size: 42px; }
  .item > .row-block { grid-column: 1 / -1; }
  .dock { position: static; margin: 8px 0 0; padding: 0; background: none; }
  .sheet { margin: auto; padding: 26px 28px 28px; border-radius: 30px; }
  .scards { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .khero { --ph: 300px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding: 0; }
  .khero-stage { height: calc(var(--ph) + 60px); }
  .khero-stage::after { inset: 0 0 0 auto; width: 30%; height: auto; background: linear-gradient(90deg, transparent, var(--velvet)); }
  .khero-text { margin: 0; padding: 28px 32px 28px 8px; }
  .khero-title { font-size: 38px; }
  .cat-bar { top: 68px; margin: 0; padding: 10px 0; }
  /* The bar of a scenario's page: a card of its own that stays in sight at the foot of the screen. */
  .item .run-bar { position: sticky; bottom: 16px; margin: 6px 0 0; border-radius: 22px; background: var(--velvet); box-shadow: inset 0 0 0 1px rgb(255 122 26 / .3), 0 12px 30px rgb(0 0 0 / .45); }
  /* «Примеры»: the kinds as wide as they are, the search and «Фильтры» at the right; the sections one line that scrolls
     (2026-10-29: they wrapped into three; a mouse scrolls it with shift+wheel or a trackpad, Tab with the keys). With the
     free try used, the cards start right under the bar. */
  .cat-kinds { flex: 0 1 auto; }
  [data-cat-search-open] { margin-left: auto; }
  .cat-subs { margin: 4px 0 0; padding: 4px 0 2px; scroll-padding-inline: 0; }
  .home:not(:has(> .offer:not([hidden]))) { margin-top: -14px; }
  .history-empty > .white { justify-self: start; }
  body.is-detail { padding-bottom: 0; }
  .gallery { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1100px) {
  .ticker-line span:nth-child(-n + 7) { display: inline; }
  .home { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.7fr); grid-template-rows: auto repeat(2, clamp(190px, 22vh, 215px)); }
  .home > .duo > .tile { grid-row: 2 / span 2; }
  .home > .studio { grid-column: 4; grid-row: 2; }
  /* Half as high and a third as wide as the stage it was: its title on one line beside «Видео / Фото» (at 2vw it broke in
     two from 1300 px), the corners closer. */
  .home > .studio .studio-title { font-size: clamp(22px, 1.8vw, 26px); }
  .home > .studio .studio-bg > * { object-position: 50% 35%; }
  .reels { grid-template-columns: repeat(5, 1fr); }
  .home > .studio .studio-head { padding: 16px 18px 0; }
  /* «Видео / Фото» narrower here: at 1100 px the column is ~360 px and the full-size switch pushed «Фото» out. */
  .home > .studio .toggle button { min-width: 0; height: 32px; padding: 0 12px; font-size: 14px; }
  .home > .studio .studio-foot { padding: 12px 14px 14px; }
  .home > .duo > .tile[data-catalog-go="editor"] { grid-column: 4; grid-row: 3; }
  html:is([data-site-step="choose"], [data-site-step="processing"], [data-site-step="preview"], [data-site-step="result"]) .home > .studio, .page-scenes > .studio { height: min(calc(100svh - 190px), 760px); }
}
@media (min-width: 1500px) { .ticker-line span:nth-child(n) { display: inline; } }
/* A phone: «Видео / Фото» a little smaller, so «Свой сценарий» stays on one line beside it. */
@media (max-width: 420px) { .toggle button { min-width: 0; padding: 0 12px; font-size: 14px; } }
/* Up to 400 px «Свой сценарий»'s bar: the button gives way — its words on two lines — so the price and «Фото · по
   описанию» beside it stay whole (2026-10-29: cut to «по описани» at 320 px); each mark may break at its space then. */
@media (max-width: 399px) {
  .cmp-bar { gap: 10px; }
  .cmp-sum { min-width: 96px; }
  .cmp-bar .cmp-go { flex: 0 1 auto; min-width: 0; }
  .cmp-sum small span { white-space: normal; }
}
@media (max-width: 380px) {
  .cmp-go, .free-bar-go { padding: 0 16px; font-size: 15px; }
  .free-bar-text strong { font-size: 14px; white-space: nowrap; }
  .toggle button { min-width: 0; padding: 0 11px; font-size: 14px; }
  .studio-title { font-size: 20px; }
  .studio-head { padding: 14px 16px 0; }
  .studio-foot { padding: 12px; }
}
/* A 320 px phone: «1 фото бесплатно» beside a smaller «Создать бесплатно» (it ran under the button); «Свой сценарий» on
   one line beside a smaller «Видео / Фото»; the account number on one line. */
@media (max-width: 340px) {
  .free-bar-go { padding: 0 14px; font-size: 14px; }
  .free-bar-text strong { font-size: 13px; }
  .free-bar-text small { font-size: 12px; }
  .toggle button { height: 32px; padding: 0 9px; font-size: 13px; }
  .studio-title { font-size: 17px; }
  .purse-id-text strong { font-size: 15px; letter-spacing: .02em; white-space: nowrap; }
  .chip-btn { padding: 0 11px; }
}
@media (min-width: 760px) {
  .sheet-free, .sheet-compose { height: min(92vh, 880px); margin: auto; padding: 0; border-radius: 30px; }
  /* A phone's full-screen card fits its content here (a modal dialog fills its height otherwise); its own scrollbar is
     hidden — it ran through the head and out of the round corners —, a row of examples shows a thin one. */
  .sheet-full { height: fit-content; max-height: min(92vh, 880px); margin: auto; padding: 0 28px 28px; border-radius: 30px; scrollbar-width: none; }
  .sheet-full .sheet-top { margin: 0 -28px 16px; padding: 22px 28px 14px; }
  .sheet-full .create-row { margin: 0 -28px; padding: 0 28px 4px; scroll-padding: 0 28px; scrollbar-width: thin; }
  #checkout.sheet-full { max-height: 90vh; }
  .topup-bar { bottom: -28px; margin: 18px -28px -28px; padding: 14px 28px; }
  .flt-bar { bottom: -28px; margin: 22px -28px -28px; padding: 14px 28px; }
}
/* A computer (2026-10-27): the cards of the free try, of a scenario and of «Свой сценарий» are wide ones — the example
   whole on the left, as tall as the card, «до» in its corner; what it does, the parameters and the photo on the right,
   the bar under them; a short right column stands in the middle of its height. A tablet keeps the tall card. «Создать»
   and «Популярное» wide enough for their pictures. A scenario's page in two columns: its picture as tall as the screen
   allows, staying in sight, everything else beside it. */
.cmp-shot { display: none; }
@media (min-width: 1000px) {
  .sheet { --tall: min(88vh, 820px); --side: 440px; --wide: min(calc(var(--tall) * 3 / 4 + var(--side)), calc(100% - 48px)); }
  .sheet-free, .sheet-compose, #create { width: var(--wide); max-width: none; height: var(--tall); max-height: none; }
  .sheet-free[open], .sheet-compose[open] { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); grid-template-rows: minmax(0, 1fr) auto; }
  #popular, #history { width: var(--wide); max-width: none; }
  #account, #checkout { max-width: 600px; }
  .sheet-compose[open] { grid-template-rows: auto minmax(0, 1fr) auto; }
  .free-shot, .cmp-shot { grid-column: 1; grid-row: 1 / -1; height: auto; min-height: 0; }
  .cmp-shot { position: relative; display: block; overflow: hidden; background: var(--night); }
  .cmp-shot-mode, .cmp-shot-mode > img, .cmp-shot-mode > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
  .free-shot::after { height: 34%; background: linear-gradient(transparent, rgb(10 8 6 / .55)); }
  /* A run, its preview, its result: the picture on its own blur, no dark band under it (no buttons lie over it here). */
  .sheet-free .out::after { display: none; }
  html:is([data-site-step="processing"], [data-site-step="preview"], [data-site-step="result"]) .sheet-free .free-shot::after { display: none; }
  .free-shot .out-pic { object-position: 50% 50%; }
  .free-body, .free-bar, .cmp-top, .cmp-body, .sheet-free .cmp-bar, .sheet-compose .cmp-bar { grid-column: 2; }
  .free-body { gap: 8px; padding: 28px 28px 16px; align-content: safe center; }
  .free-close { top: 18px; right: 18px; background: var(--velvet-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .free-title { padding-right: 52px; font-size: 26px; }
  .free-lead { font-size: 16px; }
  .free-before { left: 20px; bottom: 20px; width: 23%; max-width: 132px; border-radius: 18px; }
  .free-bar, .sheet-free .cmp-bar, .sheet-compose .cmp-bar { padding: 14px 28px; }
  /* «Свой сценарий»: its close where the other cards have theirs; a line under the head where the blocks scroll away. */
  .cmp-top { padding: 18px 18px 10px 28px; }
  .cmp-top > div { padding-top: 10px; }
  .cmp-body { padding: 12px 24px 20px 28px; border-top: 1px solid var(--line); }
  /* «Создать»: as tall as the free trial's card, the tiles in one row filling it. */
  #create .create-panel { flex: 1 1 auto; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
  #create .ctiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); min-height: 0; }
  #create .ctile { grid-column: auto; aspect-ratio: auto; }
  .ctile-bar { left: 10px; right: 10px; bottom: 10px; gap: 2px 12px; padding: 12px 10px 12px 16px; border-radius: 18px; }
  .ctile-title { grid-column: 1; font-size: 17px; }
  .ctile-price { font-size: 13.5px; }
  .ctile-go { grid-row: 1 / 3; width: 40px; height: 40px; }
  .ctile-go svg { width: 19px; height: 19px; }
  .item { grid-template-columns: auto minmax(0, 1fr); gap: 0 44px; align-items: start; }
  .item > .shot { position: sticky; top: 92px; width: auto; height: min(calc(100vh - 130px), 700px); max-width: none; max-height: none; aspect-ratio: 4 / 5; margin: 18px 0 0; }
}
/* A computer of a low screen (a laptop): «Свой сценарий» with a shorter words field and no lead, so the quality and the
   length come into sight. */
@media (min-width: 1000px) and (max-height: 820px) {
  .sheet-compose .cmp-words { min-height: 88px; }
  .sheet-compose .cmp-lead { display: none; }
}
/* A very wide screen: the content wider (at 2560 px it took less than half). */
@media (min-width: 1800px) {
  .main, .foot { max-width: 1400px; }
  .bar { padding: 0 max(28px, calc((100% - 1400px) / 2 + 28px)); }
  .scards { grid-template-columns: repeat(5, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .offer.is-free::before, .out-line::before, .ticker-line span { animation: none; opacity: 1; }
  .consents.is-asking .consent, .cmp-field.is-asking, .khero:not([hidden]), .navtab-ring, .navtab-ring::after { animation: none; }
  .navtab-ring::after { display: none; }
  .toggle::before, .sheet[open], .switch::before, .create-panel { transition: none; animation: none; }
}
/* Hover on a computer: every control answers the pointer. */
@media (hover: hover) {
  .offer:hover { background: var(--velvet-2); }
  .offer:hover .offer-go { fill: var(--cream); transform: translateX(2px); }
  :is(.wallet, .cat-round, .close, .pill, .pack:not([aria-pressed="true"])):hover { background: #2e2620; }
  .menu-row:hover { color: #fff; }
  .menu-row:hover .menu-chev { transform: translateX(2px); fill: var(--cream); }
  :is(.cat-kinds button, .toggle button, .cat-subs button, .flt-chips button, .switch button):not([aria-pressed="true"]):not([aria-selected="true"]):hover { color: var(--cream); }
  :is(.cat-subs button, .flt-chips button):not([aria-pressed="true"]):hover { background: rgb(255 122 26 / .2); }
  .cmp-seg button:not([aria-pressed="true"]):hover, .kit-chip:hover input:not(:checked) + span { background: var(--velvet-2); box-shadow: inset 0 0 0 1px rgb(247 241 234 / .28); }
  :is(.drop, .cmp-drop):hover { background: rgb(255 122 26 / .1); }
  :is(.cmp-idea, .chip-btn):hover { background: rgb(247 241 234 / .16); }
  .variant:hover::before { opacity: .6; }
  .ask-btn:hover { box-shadow: inset 0 0 0 1px rgb(255 122 26 / .85); }
  .consent:hover { background: rgb(247 241 234 / .09); }
  .seg-tabs button:not([aria-pressed="true"]):hover { color: var(--cream); }
  .ctile:hover .ctile-go { filter: brightness(.92); }
  :is(.bar-create, .free-bar-go, .cmp-go, .plus, .khero-plus):hover { filter: brightness(1.07); }
  .white:not(.free-bar-go, .cmp-go):hover { filter: brightness(.95); }
  .faq summary:hover { color: #fff; }
}
/* The bar from 760 to 1200 px: the menu a little tighter, so the site's name keeps its room — with «Популярное» there too
   (2026-10-29: «Флипо …» at 768 px) —, and up to 1100 px without «Оживить» and «Изменить»: «Создать» beside them opens
   both (with them, a name of 18 letters was cut up to 1050 px, and from 1100 to 1150 px with the menu at its full size). */
@media (min-width: 760px) and (max-width: 1199px) {
  .bar-nav { gap: 0; margin-left: 8px; }
  .bar-nav a, .bar-nav button { padding: 8px 9px; font-size: 15px; }
}
@media (min-width: 760px) and (max-width: 1099px) { .bar-nav .bar-mode { display: none; } }
@media (min-width: 760px) and (max-width: 959px) { .bar-create { padding: 0 14px 0 10px; } }
@media (min-width: 760px) and (max-width: 899px) {
  .bar-create { justify-content: center; width: 40px; padding: 0; gap: 0; font-size: 0; }
  .bar-create svg { width: 22px; height: 22px; }
  /* The bar's edges, gaps and menu a little closer: a name of 18 letters whole at 768 px. */
  .bar { gap: 8px; padding: 0 20px; }
  .bar-nav a, .bar-nav button { padding: 8px 7px; }
}
/* A narrow phone: a long one-word title fits its tile, the card's «до» keeps its corner, the tab labels their room. */
@media (max-width: 759px) { .tile-title { font-size: clamp(16px, 4.8vw, 18px); hyphens: auto; } }
@media (max-width: 359px) {
  .scard-type { display: none; }
  .tabbar { left: 8px; right: 8px; padding: 0 4px; }
  .navtab { margin: 0; font-size: 10.5px; letter-spacing: -.01em; }
}
/* A phone, the rest of the audit (2026-10-27): */
@media (max-width: 759px) {
  /* A mode's example as wide as the column, centred (with the height cap it shrank and stuck to the left). */
  .mode-item .shot { aspect-ratio: auto; max-height: none; height: min(62vh, calc((100vw - 32px) * 1.25)); height: min(62svh, calc((100vw - 32px) * 1.25)); }
  /* The footer: the year and the name on their own line, the two documents together under it. */
  .foot-line > span:first-child { flex-basis: 100%; white-space: normal; }
}
/* A short phone (an SE): the free try's line and the cards a little lower and «Свой сценарий» without its price (the card
   it opens says it), so the words line and its «+» clear the raised «Создать»; the free trial's picture smaller, so the
   two lines to tick are in sight. */
@media (max-width: 759px) and (max-height: 620px) {
  .home > .offer.is-free { min-height: 50px; }
  .home .duo .tile { height: 140px; }
  .home .studio { height: 136px; }
  .home .studio .compose-meta { display: none; }
}
@media (max-width: 899px) and (max-height: 600px) {
  .free-shot { height: 26%; }
  /* The note repeats the bar under it («1 фото бесплатно, без регистрации»); the lead of «Свой сценарий» its blocks. */
  .free-note, .cmp-lead { display: none; }
}
@media (max-height: 700px) { .free-body .tips-wrap { margin: 6px 0 0; } }
/* Narrow phones: the kinds of «Примеры» closer together; «На главный экран» with its words under the icon, full width. */
@media (max-width: 400px) {
  .cat-kinds button { padding: 0 11px; font-size: 13.5px; }
  .inst-head { grid-template-areas: "icon . close" "text text text"; row-gap: 12px; }
  .inst-icon { grid-area: icon; }
  .inst-text { grid-area: text; }
  .inst-head > .close { grid-area: close; }
}

/* «Помощь» (partials/support.html): the visitor's requests to support, drawn by the kit (web/sites/support.js, kit-help-*).
   A mark on the profile buttons and in the menu while an answer of support waits unread. */
.help-dot { position: absolute; top: 6px; right: calc(50% - 20px); width: 9px; height: 9px; border-radius: 50%; background: var(--flame); box-shadow: 0 0 0 2px var(--night), 0 0 10px var(--flame); }
.help-dot[hidden] { display: none; }
.wallet { position: relative; }
.wallet .help-dot { top: -2px; right: -2px; }
.help-badge { padding: 3px 9px; border-radius: 999px; background: rgb(255 122 26 / .18); color: var(--amber); font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.help-badge[hidden] { display: none; }
.menu-row .menu-go { display: inline-flex; align-items: center; gap: 8px; margin-right: 0; }
.pay-help { display: block; width: 100%; min-height: 44px; margin-top: 10px; padding: 0 12px; border: 0; border-radius: 14px; background: rgb(247 241 234 / .05);
  box-shadow: inset 0 0 0 1px var(--line); color: var(--cream); font-weight: 600; font-size: 14px; }
.help-other { margin: 18px 4px 0; color: var(--ash); font-size: 13.5px; }
.help-other a { color: var(--cream); }
.kit-help { display: grid; gap: 12px; }
.kit-help-lead { margin: 0; color: var(--ash); font-size: 14px; line-height: 1.45; }
.kit-help-new, .kit-help-send { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--amber), var(--flame)); color: #160f08; font-weight: 750; font-size: 16px; }
.kit-help-new:disabled, .kit-help-send:disabled { opacity: .55; }
.kit-help-title { margin: 6px 0 0; font: 650 18px/1.25 var(--display); letter-spacing: -.01em; }
.kit-help-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kit-help-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 16px; background: var(--velvet-2); color: var(--cream); text-align: left; }
.kit-help-row.is-unread { box-shadow: inset 0 0 0 1.5px var(--flame); }
.kit-help-row-main { display: grid; gap: 3px; min-width: 0; flex: 1 1 auto; }
.kit-help-subject { overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.kit-help-meta { margin: 0; color: var(--ash); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.kit-help-row-side { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.kit-help-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--flame); box-shadow: 0 0 10px var(--flame); }
.kit-help-state { padding: 3px 10px; border-radius: 999px; background: rgb(247 241 234 / .08); color: var(--ash); font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.kit-help-state.is-answered { background: rgb(111 220 140 / .16); color: #8fe6a6; }
.kit-help-state.is-waiting { background: rgb(255 122 26 / .18); color: var(--amber); }
.kit-help-empty, .kit-help-hint { margin: 0; color: var(--ash); font-size: 13.5px; }
.kit-help-note { margin: 0; padding: 10px 12px; border-radius: 14px; background: rgb(111 220 140 / .12); color: #8fe6a6; font-size: 13.5px; }
.kit-help-back { justify-self: start; min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: rgb(247 241 234 / .09); color: var(--cream); font-weight: 600; font-size: 14px; }
.kit-help-form { display: grid; gap: 12px; margin: 0; padding: 16px; border-radius: 22px; background: rgb(247 241 234 / .05); box-shadow: inset 0 0 0 1px var(--line); }
.kit-help-field { display: grid; gap: 6px; }
.kit-help-label { color: var(--ash); font-size: 13.5px; }
.kit-help-input { width: 100%; min-width: 0; min-height: 48px; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--night); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--cream); font: inherit; font-size: 16px; resize: vertical; }
.kit-help-input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--flame); }
.kit-help-input::placeholder { color: rgb(184 170 156 / .7); }
/* The file field as wide as the form, never its own width (at 320–359 px it pushed «Помощь» sideways). */
.kit-help-files { width: 100%; min-width: 0; max-width: 100%; color: var(--ash); font-size: 13.5px; }
.kit-help-files::file-selector-button { margin-right: 10px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: rgb(247 241 234 / .09); color: var(--cream); font: inherit; font-weight: 600; }
.kit-help-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.kit-help-cats legend { width: 100%; margin-bottom: 6px; padding: 0; }
.kit-help-cat { position: relative; }
.kit-help-cat input { position: absolute; opacity: 0; pointer-events: none; }
.kit-help-cat span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px; background: var(--night); box-shadow: inset 0 0 0 1px var(--line); color: var(--ash); font-weight: 600; font-size: 14px; cursor: pointer; }
.kit-help-cat input:checked + span { background: var(--cream); box-shadow: none; color: #160f08; }
.kit-help-cat input:focus-visible + span { outline: 2px solid var(--cream); outline-offset: 2px; }
.kit-help-about { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 10px 8px 10px 14px; border-radius: 14px; background: rgb(106 168 255 / .14); color: #a9cbff; font-weight: 650; font-size: 14px; }
.kit-help-drop { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgb(247 241 234 / .09); color: var(--cream); font-size: 18px; line-height: 1; }
.kit-help-error { margin: 0; padding: 10px 12px; border-radius: 14px; background: rgb(255 122 26 / .16); color: var(--cream); font-size: 14px; }
.kit-help-error[hidden] { display: none; }
.kit-help-ticket-head { display: grid; gap: 4px; }
.kit-help-ticket-head .kit-help-title { margin: 0; overflow-wrap: anywhere; }
.kit-help-thread { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.kit-help-msg { max-width: 88%; padding: 10px 14px 12px; border-radius: 18px 18px 18px 6px; background: var(--velvet-2); }
.kit-help-msg.is-mine { justify-self: end; border-radius: 18px 18px 6px 18px; background: rgb(255 122 26 / .14); }
.kit-help-msg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; font-size: 13px; }
.kit-help-msg-head small { color: var(--ash); font-size: 12px; }
.kit-help-msg.is-support .kit-help-msg-head b { color: var(--amber); }
.kit-help-msg-text { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 15px; line-height: 1.45; }
.kit-help-pictures { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kit-help-pictures img { display: block; width: 84px; height: 84px; border-radius: 10px; object-fit: cover; }
.kit-help-event { justify-self: center; color: var(--ash); font-size: 12.5px; text-align: center; }
.kit-help-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.kit-help-close { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--ash); font-weight: 550; text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 760px) { #support.sheet-full { min-height: min(70vh, 640px); } }
.help-banner { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 14px; padding: 14px 16px; border: 0; border-radius: 18px; background: rgb(255 122 26 / .14);
  box-shadow: inset 0 0 0 1px rgb(255 122 26 / .35); color: var(--cream); font-weight: 600; font-size: 14.5px; text-align: left; }
.help-banner[hidden] { display: none; }
.help-banner b { margin-left: auto; color: var(--amber); white-space: nowrap; }
.help-banner-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--flame); box-shadow: 0 0 10px var(--flame); }