/* «Prod» — a film set at night (site-templates/README.md). The page is the set: deep petrol, the pictures lit on it. The
   one loud thing is the camera's viewfinder — corner marks, «REC» and a timecode that runs with the clip — on the frames
   that matter: «Свой сценарий», a scenario's picture, the free try. Red is the record button and nothing else: every
   «make it» press, the dot of «REC». Green is the green light: the free try, what went through. Type: Unbounded for
   names and numbers, Manrope for reading, JetBrains Mono only on the viewfinder's display. Phone first. */
@font-face { font-family: Unbounded; src: url(fonts/unbounded-cyrillic.woff2) format("woff2"); font-weight: 200 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Unbounded; src: url(fonts/unbounded-latin.woff2) format("woff2"); font-weight: 200 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: Manrope; src: url(fonts/manrope-cyrillic.woff2) format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Manrope; src: url(fonts/manrope-latin.woff2) format("woff2"); font-weight: 400 800; 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: "JetBrains Mono"; src: url(fonts/jetbrains-mono-bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --set: #0c2228; --deck: #11313a; --deck-2: #1a404a; --paper: #eaf4f1; --fog: #9dbbb8; --tally: #ff4438; --go: #3fe08e;
  --ink: #06171b; --coin: #ffc94d; --coin-deep: #8f6200; --line: rgb(234 244 241 / .12); --scrim: rgb(5 18 22 / .84); --shade: rgb(6 23 27 / .62);
  --display: Unbounded, "Arial Black", system-ui, sans-serif; --sans: Manrope, "Segoe UI", system-ui, -apple-system, sans-serif;
  --hud: "JetBrains Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
  --frame: 20px; --tile: 16px; --key: 14px; --top: 58px;
  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(--set); color: var(--paper); font: 500 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, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
:is(.cat-kinds button, .cat-subs button, .pill):focus-visible { outline-offset: -2px; }
/* Every scrolling strip holds its own hidden words: one that does not lets them out past the screen's edge. */
:is(.reels, .takes-row, .variants, .pills, .cat-subs, .cat-kinds, .reel) { position: relative; }
.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: 60; padding: 10px 16px; border-radius: 10px; background: var(--paper); color: var(--ink); font-weight: 700; }
.skip:focus { top: 10px; }
/* A credit: a gold coin with the spark cut out (partials/cr.html) — the only gold on the page. */
.cr { width: 1em; height: 1em; fill: var(--coin); vertical-align: -.14em; flex: 0 0 auto; }
svg { flex: 0 0 auto; }

/* Keys: red records (the action of the moment), the dark key does the rest, a text key is the way out. Rectangles with
   soft corners, as a camera's buttons — no pills. */
.go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border: 0; border-radius: var(--key);
  background: var(--tally); color: var(--ink); font: 800 16px/1.15 var(--sans); text-align: center; text-decoration: none; transition: transform .12s, filter .15s; }
.go:active { transform: scale(.97); }
.go:disabled { opacity: .5; cursor: default; }
.go .cr { fill: var(--ink); }
/* On a light key (a chosen package, quality, chip) the coin a deeper gold. */
:is(.pack, .opts button, .chips button, .cat-subs button, .kit-chip span)[aria-pressed="true"] .cr, .acc-block .go .cr { fill: var(--coin-deep); }
.ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 0; border-radius: var(--key);
  background: var(--deck-2); color: var(--paper); font: 700 15px/1.15 var(--sans); text-decoration: none; }
.ghost:disabled { opacity: .5; }
.small { min-height: 42px; padding: 0 16px; font-size: 14.5px; }
.wide { width: 100%; }
.text-btn { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--paper); font-weight: 650; text-decoration: underline; text-decoration-color: rgb(234 244 241 / .4); text-underline-offset: 4px; }
/* The record light: a white dot on red, a red dot on dark. */
.rec-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 3px rgb(234 244 241 / .28); }
.rec-btn { display: grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--paper); transition: transform .12s; }
.rec-btn > span { width: 28px; height: 28px; border-radius: 50%; background: var(--tally); box-shadow: 0 0 14px rgb(255 68 56 / .55); }

/* The viewfinder: four corner marks inside a frame (.vf::after), and the display (partials/hud.html): «REC» with its
   blinking light, the timecode of the clip (app.js). Its corners close in once, as a camera finds focus. */
.vf { position: relative; isolation: isolate; }
.vf::after, .drop::before { content: ""; position: absolute; pointer-events: none; background-repeat: no-repeat;
  background-image: linear-gradient(var(--cc) 0 0), linear-gradient(var(--cc) 0 0), linear-gradient(var(--cc) 0 0), linear-gradient(var(--cc) 0 0),
    linear-gradient(var(--cc) 0 0), linear-gradient(var(--cc) 0 0), linear-gradient(var(--cc) 0 0), linear-gradient(var(--cc) 0 0);
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  background-size: var(--cl) var(--cw), var(--cw) var(--cl), var(--cl) var(--cw), var(--cw) var(--cl), var(--cl) var(--cw), var(--cw) var(--cl), var(--cl) var(--cw), var(--cw) var(--cl); }
.vf::after { inset: 12px; z-index: 4; --cc: rgb(234 244 241 / .9); --cl: 20px; --cw: 2px; }
.studio.vf::after { animation: focus 1s cubic-bezier(.2, .7, .2, 1) .15s both; }
@keyframes focus { from { inset: 34px; opacity: 0; } 60% { opacity: 1; } }
.hud { position: absolute; top: 22px; left: 24px; right: 24px; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: var(--paper); font: 700 11px/1 var(--hud); letter-spacing: .06em; text-shadow: 0 1px 6px rgb(0 0 0 / .6); pointer-events: none; }
.hud-rec { display: inline-flex; align-items: center; gap: 6px; }
.hud-rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tally); box-shadow: 0 0 8px var(--tally); animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { opacity: .15; } }
.hud-tc { font-variant-numeric: tabular-nums; opacity: .92; }

/* Top */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; height: var(--top); padding: 0 16px;
  background: rgb(12 34 40 / .86); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 var(--line); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; margin-right: auto; text-decoration: none; }
/* No logo: the first letter on a slate, its tally light lit. */
.brand-mark { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: var(--paper); color: var(--ink);
  font: 800 16px/1 var(--display); }
.brand-mark::after { content: ""; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--tally); box-shadow: 0 0 0 2.5px var(--set); }
.brand-logo { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }
.brand-name { overflow: hidden; font: 700 15px/1.1 var(--display); letter-spacing: -.01em; white-space: nowrap; text-overflow: ellipsis; }
.top-nav, .top-make { display: none; }
.aud { display: flex; flex: 0 0 auto; padding: 3px; border-radius: 12px; background: var(--deck-2); }
.aud button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--fog); }
.aud svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.aud button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.wallet { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; min-width: 44px; height: 40px; padding: 0 12px 0 10px; border: 0; border-radius: 12px; background: var(--deck-2);
  color: var(--paper); font: 650 14px/1 var(--display); font-variant-numeric: tabular-nums; }
.wallet .cr { width: 17px; height: 17px; }
.wallet-n:empty { display: none; }

.main { width: 100%; max-width: 1240px; margin: 0 auto; padding: 12px 16px calc(112px + env(safe-area-inset-bottom)); }
.row-title { margin: 0 0 12px; font: 700 19px/1.15 var(--display); letter-spacing: -.015em; }
.row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.row-more { color: var(--fog); font-size: 14px; font-weight: 650; text-underline-offset: 4px; }
.facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.facts li { display: inline-flex; align-items: center; gap: 3px; min-height: 30px; padding: 0 10px; border-radius: 8px; background: var(--deck-2); font-size: 13px; font-weight: 750; }
.cost-n { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.ph { width: 34%; height: 34%; fill: none; stroke: rgb(234 244 241 / .28); stroke-width: 1.6; stroke-linecap: round; }

/* The dock: floating over the page, the main screens, «Создать» as the record button raised in the middle. */
.dock { position: fixed; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 25; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end;
  height: 64px; padding: 0 4px 6px; border-radius: 22px; background: rgb(17 49 58 / .9); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 0 0 1px var(--line), 0 14px 34px rgb(0 0 0 / .45); }
.dock-tab, .dock-rec { position: relative; display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 0; border: 0; background: none; color: var(--fog); font: 700 11px/1.1 var(--sans); text-decoration: none; }
.dock-tab span, .dock-rec > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dock-tab[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"] { color: var(--paper); }
.dock-tab[aria-current="page"]::before, body:has(#history[open]) [data-tab-for="history"]::before, body:has(#account[open]) [data-tab-for="account"]::before, body:has(#popular[open]) [data-tab-for="popular"]::before {
  content: ""; position: absolute; top: -8px; width: 18px; height: 3px; border-radius: 0 0 3px 3px; background: var(--tally); }
.dock-rec { color: var(--paper); }
.dock-rec-ring { display: grid; place-items: center; width: 54px; height: 54px; margin-top: -22px; border-radius: 50%; background: var(--set); box-shadow: inset 0 0 0 3px var(--paper), 0 6px 18px rgb(0 0 0 / .45); transition: transform .12s; }
.dock-rec-dot { width: 34px; height: 34px; border-radius: 50%; background: var(--tally); box-shadow: 0 0 16px rgb(255 68 56 / .6); }
.dock-rec:active .dock-rec-ring { transform: scale(.94); }
.is-detail .dock { display: none; }
.is-missing .dock, .is-missing .wallet, .is-missing .top-make, .is-missing .aud { display: none; }
body.is-missing .main { padding-bottom: 40px; }
body.is-detail .main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* The home page: the green light, the viewfinder, the strip of ways in, «Примеры». */
.offer { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 62px; padding: 10px 10px 10px 16px; border: 0; border-radius: var(--tile); background: var(--deck);
  color: var(--paper); text-align: left; text-decoration: none; box-shadow: inset 0 0 0 1px rgb(63 224 142 / .3); }
.offer-light { position: relative; flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: var(--go); box-shadow: 0 0 12px rgb(63 224 142 / .7); }
.offer-light::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgb(63 224 142 / .6); animation: ring 2.4s ease-out infinite; }
@keyframes ring { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.offer-text { display: grid; flex: 1 1 auto; min-width: 0; }
.offer-text strong { font: 700 15px/1.25 var(--display); letter-spacing: -.01em; }
.offer-text small { color: var(--fog); font-size: 13px; font-weight: 600; }
.offer-go { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; background: var(--deck-2); }
.offer-go svg, .shotrow-go svg, .menu-chev { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* «Свой сценарий» as the viewfinder: its example plays edge to edge, «REC» and the timecode on top, the title, then the line
   that types out ideas with the record button. A run takes the example's place. */
/* Its height set outright: a min-height with an aspect ratio would widen it past the screen. */
.studio { display: flex; flex-direction: column; justify-content: flex-end; height: clamp(470px, calc((100vw - 32px) * 1.25), 640px); margin-top: 12px; overflow: hidden;
  border-radius: var(--frame); background: var(--deck); }
.offer[hidden] + .studio { margin-top: 0; }
.studio-bg, .studio-bg > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.studio-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(6 23 27 / .45), transparent 18%, transparent 58%, var(--scrim) 97%); }
html[data-site-mode="edit"] .only-animate, html[data-site-mode="animate"] .only-edit, html:not([data-site-mode]) .only-edit { display: none; }
/* Its name and «Видео / Фото» on one line at the foot: the picture above them stays clear. */
.studio-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.studio-title { min-width: 0; margin: 0; font: 750 16.5px/1.15 var(--display); letter-spacing: -.015em; text-shadow: 0 1px 14px rgb(0 0 0 / .55); text-wrap: balance; }
.toggle { display: inline-flex; flex: 0 0 auto; padding: 3px; border-radius: 12px; background: var(--shade); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.toggle button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; background: none; color: var(--fog); font-size: 14px; font-weight: 750; }
.toggle button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.toggle button[aria-pressed="true"], .toggle button[aria-selected="true"] { background: var(--paper); color: var(--ink); }
.studio .toggle button { min-height: 32px; padding: 0 11px; font-size: 13px; }
.toggle-wide { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 0 0 14px; background: var(--set); }
.toggle-wide button { min-height: 46px; font-size: 15px; }
/* The foot stays inside the frame's corner marks. */
.studio-foot { position: relative; z-index: 5; display: grid; gap: 10px; padding: 12px 22px 24px; }
.ask { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 62px; padding: 8px 8px 8px 14px; border: 0; border-radius: 16px; background: rgb(6 23 27 / .7);
  color: var(--paper); text-align: left; box-shadow: inset 0 0 0 1px rgb(234 244 241 / .16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ask-idea svg { width: 18px; height: 18px; fill: var(--go); }
.ask-text { flex: 1 1 auto; min-width: 0; overflow: hidden; color: rgb(234 244 241 / .86); font-size: 14.5px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.ask-price { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; font: 650 13px/1 var(--display); font-variant-numeric: tabular-nums; }
.ask-price:empty { display: none; }
.ask:active .rec-btn { transform: scale(.93); }
html:is([data-site-step="upload"], [data-site-step="choose"]) .home .studio { cursor: pointer; }
.after { display: grid; gap: 8px; }
.after-note { margin: 0; color: var(--fog); font-size: 13.5px; line-height: 1.4; }
.studio .after-note { color: var(--paper); }
.oops { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgb(255 68 56 / .14); color: #ffd0cb; font-size: 14px; line-height: 1.4; box-shadow: inset 0 0 0 1px rgb(255 68 56 / .4); }
.oops .text-btn { min-height: 32px; color: inherit; }

/* What the visitor made, over the frame: the result on its own blur; while it runs a timeline and its playhead. */
.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(.55); transform: scale(1.15); }
.out-pic { object-fit: contain; object-position: 50% 0; }
.out-video { background: var(--set); }
.out-busy { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 32px; text-align: center; background: rgb(6 23 27 / .55); }
.out-title { margin: 6px 0 0; font: 800 26px/1.1 var(--display); letter-spacing: -.03em; }
.out-title::after { content: "…"; }
.out-note { max-width: 260px; margin: 0; color: var(--paper); opacity: .82; font-size: 14px; }
.out-line { position: relative; display: block; width: 168px; height: 18px; overflow: hidden;
  background: repeating-linear-gradient(90deg, rgb(234 244 241 / .35) 0 1px, transparent 1px 12px) 0 100% / 100% 7px no-repeat, linear-gradient(rgb(234 244 241 / .18) 0 0) 0 100% / 100% 1px no-repeat; }
.out-line::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--tally); box-shadow: 0 0 8px var(--tally); animation: playhead 1.8s linear infinite; }
@keyframes playhead { from { transform: translateX(0); } to { transform: translateX(166px); } }
.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:is([data-site-step="processing"], [data-site-step="preview"], [data-site-step="result"]):not([data-site-mode="effect"]) .studio-head { display: none; }
html:is([data-site-step="choose"], [data-site-step="processing"], [data-site-step="preview"], [data-site-step="result"]) .studio-bg { visibility: hidden; }
/* 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; }
html[data-site-step="preview"] .studio .out, html[data-site-step="result"] .studio .out { position: relative; flex: 1 1 auto; min-height: 0; }
/* The free trial's card and a scene's run an effect: «Свой сценарий» behind them stays as it was. */
html[data-site-mode="effect"] .home .studio .out { display: none; }
html[data-site-mode="effect"] .home .studio-bg { visibility: visible; }

/* «Что снимаем»: the four ways in as tall frames of one strip. */
.takes { margin-top: 30px; }
.takes-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 44%); gap: 10px; margin: 0 -16px; padding: 0 16px 4px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding: 0 16px; scrollbar-width: none; }
.takes-row::-webkit-scrollbar { display: none; }
.take { position: relative; display: block; aspect-ratio: 3 / 4.3; overflow: hidden; border-radius: var(--tile); background: var(--deck); color: var(--paper); text-decoration: none; scroll-snap-align: start; }
.take-media, .take-media > img, .take-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.take-media > .ph { position: absolute; inset: 0; width: 34%; height: 34%; margin: auto; }
.take-media.mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 2px; background: var(--set); }
.take-media.mosaic > img { position: static; }
.take-media.mosaic > img:only-child { grid-column: 1 / -1; grid-row: span 2; }
.take::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgb(5 18 22 / .9)); pointer-events: none; }
.take-text { position: absolute; left: 12px; right: 10px; bottom: 12px; z-index: 2; display: grid; gap: 3px; }
.take-kind { display: inline-flex; align-items: center; gap: 5px; color: var(--fog); font-size: 11.5px; font-weight: 750; }
.take-kind svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.take-title { font: 700 15px/1.15 var(--display); letter-spacing: -.015em; overflow-wrap: anywhere; }
.take .cost { font-size: 12.5px; font-weight: 750; color: rgb(234 244 241 / .86); }
.take-tag { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 8px; border-radius: 7px; background: var(--tally); color: var(--ink); font-size: 11.5px; font-weight: 800; }
.take-count { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 7px; background: var(--shade);
  font: 650 12px/1.2 var(--display); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.take-count svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* «Примеры» */
.catalog { margin-top: 32px; scroll-margin-top: calc(var(--top) + 8px); }
.catalog-title { margin-bottom: 4px; }
.cat-bar { position: sticky; top: var(--top); z-index: 12; display: flex; align-items: center; gap: 8px; margin: 0 -16px; padding: 8px 16px; background: rgb(12 34 40 / .94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.cat-kinds { display: flex; flex: 1 1 auto; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cat-kinds::-webkit-scrollbar { display: none; }
.cat-kinds.fade-end { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.cat-kinds.fade-start { -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%); mask-image: linear-gradient(90deg, transparent, #000 15%); }
.cat-kinds.fade-start.fade-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 15% 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15% 85%, transparent); }
/* The kinds as an editor's tabs: the chosen one has the red playhead under it. */
.cat-kinds button { position: relative; flex: 0 0 auto; min-height: 42px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--fog); font-size: 15px; font-weight: 750; white-space: nowrap; }
.cat-kinds button[aria-pressed="true"] { color: var(--paper); }
.cat-kinds button[aria-pressed="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 3px; border-radius: 2px; background: var(--tally); }
.cat-round { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 12px; background: var(--deck-2); color: var(--paper); }
.cat-round svg, .cat-search svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cat-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--tally); }
.cat-search { display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 0; height: 42px; padding: 0 4px 0 12px; border-radius: 12px; background: var(--deck-2); }
.cat-search input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: none; color: var(--paper); font-size: 16px; outline: none; }
.cat-search input::placeholder { color: var(--fog); }
.cat-search input::-webkit-search-cancel-button { display: none; }
.cat-search-close { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--paper); }
.catalog.is-searching .cat-kinds, .catalog.is-searching [data-cat-search-open] { display: none; }
.cat-subs { display: flex; gap: 6px; min-height: 36px; margin: 4px -16px 0; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; }
.cat-subs::-webkit-scrollbar { display: none; }
.cat-subs.is-blank { visibility: hidden; }
.cat-subs button, .chips button { flex: 0 0 auto; min-height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--deck-2); color: var(--paper); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.cat-subs button[aria-pressed="true"], .chips button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.chips button .cr { margin-right: 1px; }
.cat-more { height: 1px; }
.cat-empty { display: grid; justify-items: start; gap: 6px; padding: 26px 0 8px; }
.cat-empty-title { margin: 0; font: 700 18px/1.2 var(--display); }
.cat-empty-lead { margin: 0 0 6px; color: var(--fog); font-size: 14.5px; }

/* A kind chosen: its own frame on top, then the cards. On the home page what is above goes. */
.kind { display: grid; gap: 14px; margin-bottom: 26px; }
.kind:not([hidden]) { animation: rise-in .28s cubic-bezier(.3, .7, .2, 1); }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } }
.kind-shot { aspect-ratio: 4 / 3.4; overflow: hidden; border-radius: var(--frame); background: var(--deck); }
.kind-media, .kind-media > img, .kind-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.kind-shot::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgb(6 23 27 / .45), transparent 30%); pointer-events: none; }
.kind-before, .before-chip { position: absolute; left: 22px; bottom: 22px; z-index: 5; width: 23%; max-width: 110px; aspect-ratio: 3 / 4; margin: 0; overflow: hidden; border-radius: 12px;
  box-shadow: 0 0 0 2px var(--paper), 0 10px 26px rgb(0 0 0 / .5); }
.kind-before img, .before-chip img { width: 100%; height: 100%; object-fit: cover; }
.kind-before > span, .before-chip figcaption, .card-before > span, .hold-word { position: absolute; left: 5px; bottom: 5px; padding: 1px 7px; border-radius: 6px; background: var(--shade); color: var(--paper);
  font-size: 11.5px; font-weight: 750; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.kind-text { display: grid; justify-items: start; gap: 10px; }
.kind-title { margin: 0; font: 800 24px/1.05 var(--display); letter-spacing: -.025em; }
.kind-lead { max-width: 36em; margin: 0; color: var(--fog); font-size: 15px; line-height: 1.5; }
.home.is-kind > .offer, .home.is-kind > .studio, .home.is-kind > .takes { display: none !important; }
.home.is-kind > .catalog { margin-top: 0; }
/* A run of «Свой сценарий» started from its card (which closes) always has its viewfinder in sight: on the home page with a
   kind of «Примеры» chosen it comes back, on «Готовые сценарии» it shows under the sections while it runs and with the result.
   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; margin: 0 0 24px; }
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; }

/* A card: its picture in a frame (its kind top left, «до» in the corner), its name and price under it. */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.card { position: relative; display: grid; align-content: start; gap: 7px; min-width: 0; padding: 0; border: 0; background: none; color: var(--paper); text-align: left; text-decoration: none; }
.card-media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--tile); background: var(--deck); }
.card-media > img, .card-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.card-media.is-empty, .reel-media.is-empty, .variant-media.is-empty, .kind-media.is-empty { display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, var(--deck) 0 14px, #143740 14px 28px); }
.card-media > .ph, .reel-media > .ph { position: static; }
.card-before { position: absolute; right: 8px; bottom: 8px; z-index: 2; width: 32%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 9px; box-shadow: 0 0 0 2px var(--set); }
.card-before img { width: 100%; height: 100%; object-fit: cover; }
.card-before > span { left: 3px; bottom: 3px; padding: 0 5px; font-size: 10px; }
.card-kind { position: absolute; top: 8px; left: 8px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--shade);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.card-kind svg { width: 17px; height: 17px; fill: none; stroke: var(--paper); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card[data-media="video"] .type-photo, .card[data-media="image"] .type-video { display: none; }
.card-title, .reel-title { display: -webkit-box; overflow: hidden; padding: 0 2px; font-size: 14px; font-weight: 750; line-height: 1.25; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.card-price { padding: 0 2px; color: var(--fog); font: 600 12px/1 var(--display); font-variant-numeric: tabular-nums; }
.card-price .cr { width: 13px; height: 13px; }
.card:focus-visible { outline: none; }
.card:focus-visible .card-media, .reel:focus-visible .reel-media { box-shadow: 0 0 0 2px var(--set), 0 0 0 4px var(--paper); }
/* «Свой сценарий» at the head of a kind's cards: a dashed red frame and the record button over its example. */
.card-studio .card-media { box-shadow: inset 0 0 0 1.5px var(--tally); }
.card-studio .card-media::after { content: ""; position: absolute; inset: 0; background: rgb(6 23 27 / .35); }
.card-rec { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; }
.card-rec .rec-btn { width: 56px; height: 56px; background: var(--shade); }
.card-rec .rec-btn > span { width: 34px; height: 34px; }
.card-lead { padding: 0 2px; color: var(--fog); font-size: 12.5px; line-height: 1.3; }

/* Pages */
.page { padding-top: 6px; }
.page-title { margin: 6px 0 14px; font: 800 30px/1.04 var(--display); letter-spacing: -.03em; overflow-wrap: anywhere; }
.page-lead { max-width: 34em; margin: 0 0 18px; color: var(--fog); }
.pills { display: flex; gap: 6px; margin: 0 -16px 14px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pill { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 40px; padding: 0 14px; border-radius: 10px; background: var(--deck-2); color: var(--paper); font-size: 14.5px; font-weight: 700; text-decoration: none; }
.pill[aria-current="page"] { background: var(--paper); color: var(--ink); }
.page-empty { display: grid; justify-items: start; gap: 4px; padding: 22px 0 24px; }
.lost { display: grid; place-items: center; width: 100%; max-width: 440px; aspect-ratio: 16 / 9; margin-bottom: 14px; overflow: hidden; border-radius: var(--frame); background: var(--deck); }
.lost-mark { font: 800 72px/1 var(--display); color: rgb(234 244 241 / .12); letter-spacing: -.04em; }
.doc-body { max-width: 42em; color: var(--fog); line-height: 1.7; }
.doc-body h2 { margin: 28px 0 8px; color: var(--paper); font: 700 19px/1.2 var(--display); letter-spacing: -.015em; }
.doc-body a { color: var(--paper); }
.page-scenes .catalog { margin-top: 20px; }

/* A scenario's page and a mode's page: the picture in the viewfinder, the rest under it, the bar at the foot. */
/* One column as wide as the screen: the strips inside it scroll, they never widen it. */
.item { display: grid; grid-template-columns: minmax(0, 1fr); }
.shot { position: relative; margin: -12px -16px 0; aspect-ratio: 4 / 5; max-height: 72vh; max-height: 72svh; overflow: hidden; background: var(--deck); }
.shot-media, .shot-media > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.shot-media:not(:has(> *)) { background: radial-gradient(90% 70% at 30% 10%, #1d4c57, transparent 70%), radial-gradient(80% 60% at 90% 90%, #12343c, transparent 70%); }
.shot-before { opacity: 0; transition: opacity .18s; }
.shot.is-before .shot-before { opacity: 1; }
.shot::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgb(6 23 27 / .5), transparent 22%, transparent 70%, rgb(6 23 27 / .55)); pointer-events: none; }
.shot .hud { left: auto; top: 38px; right: 28px; gap: 14px; }
.back-btn { position: absolute; top: 24px; left: 24px; z-index: 7; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--shade); color: var(--paper);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.back-btn svg, .bar-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hold { position: absolute; left: 22px; bottom: 22px; z-index: 7; width: 24%; max-width: 112px; aspect-ratio: 3 / 4; padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: var(--deck);
  box-shadow: 0 0 0 2px var(--paper), 0 10px 26px rgb(0 0 0 / .5); color: var(--paper); touch-action: none; user-select: none; -webkit-user-select: none; }
.hold img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.shot.is-before .hold { box-shadow: 0 0 0 3px var(--tally), 0 10px 26px rgb(0 0 0 / .5); }
html:is([data-site-step="choose"], [data-site-step="processing"], [data-site-step="preview"], [data-site-step="result"]) .hold { display: none; }
html:is([data-site-step="processing"], [data-site-step="preview"], [data-site-step="result"]) .back-btn { display: none; }
.item-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 18px; }
.item-title { margin: 0; font: 800 27px/1.05 var(--display); letter-spacing: -.03em; overflow-wrap: anywhere; }
.item-lead { margin: -4px 0 0; color: var(--fog); font-size: 15px; }
.item-body > .pills { margin-bottom: 0; }
.item-body .row-title { margin: 6px 0 -4px; font-size: 16px; }
.strip { margin-top: 34px; }
.reels { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(130px, 40%); gap: 10px; 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 { display: none; }
.reel { display: grid; align-content: start; gap: 7px; min-width: 0; color: var(--paper); text-decoration: none; scroll-snap-align: start; }
.reel-media { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--tile); background: var(--deck); }
.reel-media > img, .reel-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.reel[aria-current="page"] .reel-media { box-shadow: inset 0 0 0 2px var(--tally); }
/* «Варианты» of a mode: a strip of small frames; the one whose words are in the field is lit red. */
.variants { display: grid; grid-auto-flow: column; grid-auto-columns: 108px; gap: 8px; margin: 0 -16px; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; }
.variants::-webkit-scrollbar { display: none; }
.variant { display: grid; align-content: start; gap: 6px; padding: 0; border: 0; background: none; color: var(--paper); text-align: left; }
.variant-media { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 12px; background: var(--deck); }
.variant-media img { width: 100%; height: 100%; object-fit: cover; }
.variant-title { display: -webkit-box; overflow: hidden; font-size: 12.5px; font-weight: 700; line-height: 1.25; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.variant[aria-pressed="true"] .variant-media { box-shadow: inset 0 0 0 2.5px var(--tally); }
.variant-words { grid-auto-columns: auto; align-content: center; width: 200px; min-height: 76px; padding: 10px 12px; border-radius: 12px; background: var(--deck-2); }
.variant-words .variant-title { -webkit-line-clamp: 3; }
.variant-words[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--tally); }
.variants:has(.variant-words) { grid-auto-columns: 200px; }

/* The bar at the foot: the price big, what will be made as the camera's marks, and the record button. */
.run-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(--deck); box-shadow: 0 -1px 0 var(--line); }
.item .run-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; margin: 0; }
.run-sum { display: grid; flex: 1 1 auto; gap: 3px; min-width: 0; }
.run-price { display: inline-flex; align-items: center; gap: 3px; font: 800 21px/1 var(--display); font-variant-numeric: tabular-nums; }
.run-price .cr { width: 19px; height: 19px; }
.run-price:empty { display: none; }
.run-sum small { display: -webkit-box; overflow: hidden; color: var(--fog); font-size: 12.5px; font-weight: 600; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.run-sum small.run-marks { display: flex; flex-wrap: wrap; gap: 4px; }
.run-marks span { padding: 2px 6px; border-radius: 6px; background: var(--deck-2); color: var(--paper); font-size: 11.5px; font-weight: 750; white-space: nowrap; }
.run-go { flex: 0 0 auto; min-height: 54px; padding: 0 20px; }
.run-go .cr { width: 16px; height: 16px; }

/* «Свой сценарий»'s blocks, as a shot list. */
.block { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: var(--deck); box-shadow: inset 0 0 0 1px var(--line); }
.cmp-body .block, .sheet .block { background: rgb(234 244 241 / .035); }
.block-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.block-label { margin: 0; font: 700 14.5px/1.2 var(--display); letter-spacing: -.01em; }
.block-hint { color: var(--fog); font-size: 12.5px; font-weight: 600; }
.block-sub { margin: 4px 0 -2px; color: var(--fog); font-size: 12.5px; font-weight: 700; }
.field-box { border-radius: 14px; background: var(--set); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s; }
.field-box:focus-within { box-shadow: inset 0 0 0 1.5px rgb(234 244 241 / .55); }
.field-box textarea, .kit-textarea { display: block; width: 100%; min-height: 112px; padding: 12px 14px 6px; border: 0; background: none; color: var(--paper); font: 500 16px/1.45 var(--sans); resize: none; outline: none; }
.field-box textarea::placeholder, .kit-textarea::placeholder, .field::placeholder { color: rgb(157 187 184 / .85); }
.field-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 8px 8px; }
.idea-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--deck-2); color: var(--paper); font-size: 13px; font-weight: 750; }
.idea-btn svg { width: 16px; height: 16px; fill: var(--go); }
.field-count { margin-left: auto; color: var(--fog); font: 700 11px/1 var(--hud); font-variant-numeric: tabular-nums; }
.field-box.is-asking { box-shadow: inset 0 0 0 1.5px var(--tally), 0 0 0 4px rgb(255 68 56 / .18); animation: nod .45s ease-in-out; }
@keyframes nod { 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.field-ask { margin: 0; color: #ffc0b9; font-size: 13.5px; font-weight: 650; }
.opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.opts-lengths { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.opts-formats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.opts button { display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 0; min-height: 54px; padding: 6px 2px; border: 0; border-radius: 12px; background: var(--deck-2); color: var(--paper);
  font-size: 13px; font-weight: 750; line-height: 1.15; }
.opts .q-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opts .q-price { display: inline-flex; align-items: center; gap: 2px; color: var(--fog); font: 550 11px/1 var(--display); font-variant-numeric: tabular-nums; }
.opts .q-price .cr { width: 11px; height: 11px; }
.opts button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.opts button[aria-pressed="true"] .q-price { color: rgb(6 23 27 / .7); }
.opts-formats button { min-height: 58px; }
.opts-fixed { color: var(--fog); font-size: 14px; font-weight: 700; }
/* Each frame drawn as its outline. */
.q-frame { display: block; border: 1.5px solid currentColor; border-radius: 2px; }
.q-frame[data-frame="9:16"] { width: 11px; height: 19px; }
.q-frame[data-frame="2:3"] { width: 13px; height: 19px; }
.q-frame[data-frame="3:4"] { width: 14px; height: 18px; }
.q-frame[data-frame="1:1"] { width: 17px; height: 17px; }
.q-frame[data-frame="4:3"] { width: 19px; height: 14px; }
.q-frame[data-frame="3:2"] { width: 20px; height: 13px; }
.q-frame[data-frame="16:9"] { width: 22px; height: 12px; }

/* The photo: «Загрузить фото» as a frame with the viewfinder's corners to drop it in, the picked one small. */
.drop { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 14px 16px; border: 0; border-radius: 14px; background: rgb(234 244 241 / .045);
  color: var(--paper); text-align: left; transition: background .2s; }
.drop::before { inset: 0; --cc: rgb(234 244 241 / .7); --cl: 14px; --cw: 2px; border-radius: inherit; }
.drop:active, .drop.is-over { background: rgb(255 68 56 / .12); }
.drop:disabled { opacity: .55; }
.drop-icon { display: grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: var(--tally); }
.drop-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.drop-text { display: grid; gap: 1px; }
.drop-title { font-size: 16px; font-weight: 800; }
.drop-note { color: var(--fog); font-size: 12.5px; font-weight: 600; }
.only-optional, .photo-optional .only-needed { display: none; }
.photo-optional .only-optional { display: inline; }
[data-slot-optional] .only-needed { display: none; }
[data-slot-optional] .only-optional { display: inline; }
.picked { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 8px; border-radius: 16px; background: rgb(63 224 142 / .1); box-shadow: inset 0 0 0 1.5px rgb(63 224 142 / .5); }
.picked-thumb { position: relative; flex: 0 0 auto; width: 56px; height: 56px; padding: 0; overflow: hidden; border: 0; border-radius: 11px; background: var(--deck-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-size: 15px; font-weight: 800; }
.picked-text small { color: var(--fog); font-size: 12.5px; }
.picked-again { flex: 0 0 auto; white-space: nowrap; }
.tips-wrap { margin-top: 8px; }
/* What fits stands apart; what does not, together after a hairline. */
.tips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.tip { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--fog); font-size: 12px; font-weight: 650; }
.tip-yes { color: var(--paper); }
.tip-yes + .tip-no { margin-left: 8px; padding-left: 16px; box-shadow: inset 1px 0 0 var(--line); }
.tip-pic { position: relative; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; background: var(--deck-2); }
.tip-pic img, .tip-pic svg { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.tip-drawn svg { padding: 3px; fill: var(--fog); }
.tip-blur svg { filter: blur(1.4px); }
.tip-mark { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; color: var(--ink); font-size: 8.5px; font-weight: 900; line-height: 1; }
.tip-yes .tip-mark { background: var(--go); }
.tip-no .tip-mark { background: var(--tally); }
.photo-slot, .slot, .scene-photo { display: grid; gap: 8px; }
.more-photos, .scene-more { display: grid; gap: 14px; }
.more-photos:not(:has(.slot:not([hidden]))), .scene-more:not(:has(.slot:not([hidden]))) { display: none; }
.slot-head { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.slot-name { font-size: 14px; font-weight: 800; }
.slot-opt { color: var(--go); font-size: 12px; font-weight: 700; }
:not([data-slot-optional]) > .slot-head .slot-opt { display: none; }
[data-slot-waiting] > .slot-head { opacity: .55; }
.fx-words { padding: 0; background: none; box-shadow: none; }

/* The settings the kit draws (data-kit-params). */
.params { display: grid; gap: 14px; }
.params:empty { display: none; }
.kit-param { display: grid; gap: 8px; }
.kit-param-label { margin: 0; color: var(--fog); font-size: 13px; font-weight: 750; }
.kit-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.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 16px; border-radius: 11px; background: var(--deck-2); font-size: 14.5px; font-weight: 700; }
.kit-chip input:checked + span { background: var(--paper); color: var(--ink); }
.kit-chip input:focus-visible + span { outline: 2px solid var(--paper); outline-offset: 3px; }
.kit-select, .kit-text, .field { width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--set); color: var(--paper); font-size: 16px; box-shadow: inset 0 0 0 1px var(--line); }
.kit-text:focus, .field:focus, .kit-select:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--tally); }
.kit-range { width: 100%; accent-color: var(--tally); }
.kit-range-value { font-weight: 800; }
.kit-words { padding: 0; }
.kit-textarea { min-height: 96px; border-radius: 12px; background: var(--set); box-shadow: inset 0 0 0 1px var(--line); }

/* Cards (dialogs): from the bottom on a phone; the tall ones take the screen. */
.sheet { width: 100%; max-width: 540px; max-height: 92vh; max-height: 92dvh; margin: auto auto 0; padding: 18px 18px calc(22px + env(safe-area-inset-bottom)); overflow: auto; overscroll-behavior: contain;
  border: 0; border-radius: 26px 26px 0 0; background: var(--deck); color: var(--paper); scrollbar-width: thin; scrollbar-color: rgb(234 244 241 / .22) transparent; }
.sheet::backdrop { background: rgb(3 12 14 / .74); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.sheet[open] { animation: rise .32s cubic-bezier(.3, .7, .2, 1); }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } }
.sheet:is(.sheet-small, .sheet-filters, .sheet-install)::before { content: ""; display: block; width: 40px; height: 4px; margin: -4px auto 14px; border-radius: 2px; background: rgb(234 244 241 / .2); }
.sheet-small { max-width: 440px; }
.sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sheet-title { margin: 0 0 8px; font: 800 22px/1.1 var(--display); letter-spacing: -.025em; }
.sheet-top .sheet-title { margin: 0; }
.sheet-text { margin: 0 0 14px; color: var(--fog); font-size: 15px; }
.sheet-text a { color: var(--paper); }
.sheet-hint { margin: 12px 0 0; color: var(--fog); font-size: 12.5px; line-height: 1.45; }
.sheet-status { margin: 0; color: var(--fog); font-size: 13.5px; }
.sheet-status:empty { display: none; }
.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; padding: 0; border: 0; border-radius: 12px; background: var(--deck-2); color: var(--paper); }
.close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.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(12px + env(safe-area-inset-top)) 16px 10px; background: rgb(17 49 58 / .94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }
.age-mark { margin: 0 0 4px; color: var(--tally); font: 800 44px/1 var(--display); letter-spacing: -.04em; }
.sheet .oops { margin-top: 10px; }

/* «Бесплатная проба» and a scene's card: the example in the viewfinder on top, «до» in its corner, the rest under it, the
   bar at the foot. */
.sheet-free { height: 100vh; height: 100dvh; max-height: none; margin: auto auto 0; padding: 0; overflow: hidden; border-radius: 0; }
.sheet-free[open], .sheet-compose[open], .sheet-create[open] { display: flex; flex-direction: column; }
.free-shot { flex: 0 0 auto; height: 42%; min-height: 200px; overflow: hidden; background: var(--set); }
@media (max-height: 700px) { .free-shot { height: 34%; } }
.free-media, .free-media > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
/* A scenario with no example yet: the empty frame striped, as its card is. */
.free-media:empty { background: repeating-linear-gradient(135deg, var(--deck) 0 14px, #143740 14px 28px); }
.free-shot::before { content: ""; position: absolute; inset: auto 0 0; z-index: 1; height: 30%; background: linear-gradient(transparent, rgb(6 23 27 / .6)); pointer-events: none; }
.free-shot .hud { top: auto; bottom: 24px; left: auto; right: 26px; gap: 12px; }
.sheet-free .out [data-kit-src="photo"] { display: none !important; }
html:is([data-site-step="processing"], [data-site-step="preview"], [data-site-step="result"]) .before-chip { display: none; }
.free-close { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; z-index: 9; background: var(--shade); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.free-body { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; overflow: auto; overscroll-behavior: contain; padding: 14px 16px 16px; }
.free-light { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--go); font-size: 12.5px; font-weight: 800; }
.free-light .offer-light { width: 9px; height: 9px; }
.free-title { margin: 0; font: 800 22px/1.1 var(--display); letter-spacing: -.025em; }
.free-lead { margin: 0; font-size: 15.5px; line-height: 1.35; }
.free-lead strong { font-weight: 800; }
.scene-lead { color: var(--fog); font-size: 13.5px; line-height: 1.4; }
.free-note { margin: 0 0 4px; color: var(--fog); font-size: 13px; line-height: 1.4; }
.scene-type { justify-self: start; margin: 0; padding: 3px 8px; border-radius: 7px; background: var(--deck-2); color: var(--fog); font-size: 12px; font-weight: 800; }
.scene-type:empty { display: none; }
.sheet-scene:not([data-clip="yes"]) .scene-video { display: none; }
.scene-video { display: grid; gap: 8px; }
.free-bar-title { font: 700 15.5px/1.15 var(--display); }
.free-go { padding: 0 18px; }
.consents { display: grid; gap: 6px; margin-top: 4px; }
.consent { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 6px 12px; border-radius: 12px; background: var(--deck-2); font-size: 13.5px; line-height: 1.35; cursor: pointer; }
.consent-box { display: grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--fog); }
.consent-box svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.consent input:checked + .consent-box { background: var(--go); box-shadow: none; }
.consent input:checked + .consent-box svg { opacity: 1; }
.consent input:focus-visible + .consent-box { outline: 2px solid var(--paper); outline-offset: 2px; }
.consent-text a { color: var(--paper); text-underline-offset: 3px; }
.consents.is-asking .consent:not(:has(input:checked)) { box-shadow: inset 0 0 0 1.5px var(--tally); background: rgb(255 68 56 / .16); animation: nod .45s ease-in-out; }

/* «Свой сценарий» as a card. */
.sheet-compose { height: 100vh; height: 100dvh; max-height: none; padding: 0; overflow: hidden; border-radius: 0; }
.cmp-shot { display: none; }
.cmp-top { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: 12px; padding: calc(14px + env(safe-area-inset-top)) 16px 10px; }
.cmp-top .sheet-title { margin: 0; }
.cmp-lead { margin: 4px 0 0; color: var(--fog); font-size: 13.5px; line-height: 1.4; }
.cmp-body { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; overflow: auto; overscroll-behavior: contain; padding: 4px 16px 16px; }

/* «Создать»: «Видео / Фото», then the ways as a shot list. */
.sheet-create .sheet-top { margin-bottom: 12px; }
.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: 12px; align-content: start; animation: rise-in .28s cubic-bezier(.3, .7, .2, 1); }
.create-lead { margin: 0; color: var(--fog); font-size: 14px; line-height: 1.45; }
.create-all { color: var(--paper); font-weight: 750; text-underline-offset: 4px; white-space: nowrap; }
.shots { display: grid; gap: 10px; }
.shotrow { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; padding: 8px 12px 8px 8px; border: 0; border-radius: 18px;
  background: var(--deck-2); color: var(--paper); text-align: left; text-decoration: none; }
.shotrow-media { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 12px; background: var(--set); }
.shotrow-media > img, .shotrow-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.shotrow-text { display: grid; gap: 3px; min-width: 0; }
.shotrow-title { font: 700 15.5px/1.15 var(--display); letter-spacing: -.015em; }
.shotrow-lead { color: var(--fog); font-size: 13px; line-height: 1.35; }
.shotrow-price { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; font: 600 12.5px/1 var(--display); }
.shotrow-go { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--deck); }
.shotrow-go.is-rec { background: var(--tally); }
.shotrow-go .rec-dot { width: 12px; height: 12px; }

/* «История» as a contact sheet; «Популярное» as a chart. */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.kit-result { position: relative; padding: 0; overflow: hidden; aspect-ratio: 3 / 4; border: 0; border-radius: 10px; background: var(--set); }
.kit-result img { width: 100%; height: 100%; object-fit: cover; }
.kit-result[data-when]::before { content: attr(data-when); position: absolute; left: 5px; bottom: 5px; z-index: 1; padding: 1px 6px; border-radius: 6px; background: var(--shade); color: var(--paper); font: 700 10px/1.5 var(--hud); }
.kit-result.is-video::after { content: ""; position: absolute; right: 7px; bottom: 7px; border-left: 9px solid var(--paper); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.kit-result-name { position: absolute; left: 0; right: 0; top: 0; z-index: 1; display: -webkit-box; overflow: hidden; padding: 6px 7px 14px; background: linear-gradient(rgb(6 23 27 / .8), transparent);
  color: var(--paper); font-size: 11px; font-weight: 750; line-height: 1.25; text-align: left; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.acc-out { display: grid; gap: 10px; margin-bottom: 14px; }
.acc-out img, .acc-out video { width: 100%; max-height: 62vh; border-radius: 16px; background: var(--set); object-fit: contain; }
#history:not(.is-viewing) .acc-out { display: none !important; }
.history-empty { display: grid; justify-items: start; gap: 4px; }
/* An empty contact sheet: a dark empty frame waiting for its first take. */
.history-empty .lost { max-width: none; aspect-ratio: 16 / 8; margin-bottom: 10px; background: var(--set); }
.chart { counter-reset: none; }
.chart-item { position: relative; display: grid; }
.chart-rank { position: absolute; top: 4px; right: 8px; z-index: 3; color: transparent; font: 800 34px/1 var(--display); letter-spacing: -.04em; -webkit-text-stroke: 1.4px var(--paper); pointer-events: none;
  text-shadow: 0 2px 12px rgb(0 0 0 / .35); }
.chart-item:nth-child(-n+3) .chart-rank { color: var(--paper); -webkit-text-stroke: 0; }
.chart-item:first-child .chart-rank { color: var(--tally); }
.chart-all { display: flex; margin-top: 20px; }

/* «Фильтры» */
.flt { display: grid; gap: 10px; margin-top: 16px; }
.flt-title { margin: 0; color: var(--fog); font-size: 13px; font-weight: 750; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--set); }
.seg button { min-height: 42px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--fog); font-size: 14.5px; font-weight: 750; }
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { display: inline-flex; align-items: center; min-height: 40px; }
.flt-bar { position: sticky; bottom: calc(-22px - env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 20px -18px calc(-22px - env(safe-area-inset-bottom));
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); background: var(--deck); box-shadow: 0 -1px 0 var(--line); }
.flt-show { flex: 1 1 auto; max-width: 260px; }

/* «Пополнить баланс»: the steps as a timeline with a playhead, the packages, the ways, the waiting card. */
.topup-steps { display: flex; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.topup-steps li { display: grid; flex: 1 1 0; gap: 7px; color: var(--fog); font-size: 12.5px; font-weight: 800; }
.topup-steps li::before { content: ""; height: 3px; border-radius: 2px; background: var(--line); }
.topup-steps li.is-on, .topup-steps li:has(i:not([hidden])) { color: var(--paper); }
.topup-steps li.is-on::before, .topup-steps li:has(i:not([hidden]))::before { background: var(--tally); }
.topup-steps i { display: none !important; }
.topup-lead { margin: 0 0 12px; color: var(--fog); font-size: 13.5px; line-height: 1.45; }
.topup-offers { display: grid; gap: 6px; margin-bottom: 14px; }
.offer-chip { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 12px; background: rgb(63 224 142 / .1); box-shadow: inset 0 0 0 1px rgb(63 224 142 / .3); font-size: 13.5px; line-height: 1.35; }
.offer-chip b { color: var(--go); }
.offer-chip.is-promo { background: rgb(234 244 241 / .06); box-shadow: inset 0 0 0 1px var(--line); }
.offer-ico { font-size: 18px; }
.offer-note { margin: 0; color: var(--fog); font-size: 12px; }
.topup-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.topup-label { margin: 0 0 8px; font: 700 15px/1.2 var(--display); letter-spacing: -.01em; }
.topup-head .topup-label { margin: 0; }
.topup-rate { color: var(--fog); font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; }
.pack { position: relative; display: grid; align-content: start; gap: 6px; min-width: 0; min-height: 122px; padding: 16px 12px 12px; border: 0; border-radius: 16px; background: var(--deck-2); color: var(--paper);
  text-align: left; box-shadow: inset 0 0 0 1px var(--line); }
.pack-tag { position: absolute; top: -9px; left: 10px; padding: 3px 8px; border-radius: 6px; background: var(--tally); color: var(--ink); font-size: 10.5px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.pack.is-max .pack-tag { background: var(--go); }
.pack-total { display: inline-flex; align-items: center; gap: 3px; font: 800 21px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pack-total .cr { width: 17px; height: 17px; }
.pack-parts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.pack-sum { color: var(--fog); font-size: 12px; font-weight: 650; }
.pack-pct, .pack-gift { color: var(--go); font-size: 11.5px; font-weight: 800; }
.pack-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--line); }
.pack-price { font-size: 15.5px; font-weight: 800; }
.pack-worth { color: var(--fog); font-size: 11.5px; font-weight: 650; }
.pack[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 2px var(--tally); }
.pack[aria-pressed="true"] :is(.pack-sum, .pack-worth) { color: rgb(6 23 27 / .66); }
.pack[aria-pressed="true"] :is(.pack-pct, .pack-gift) { color: #08703d; }
.pack[aria-pressed="true"] .pack-foot { border-top-color: rgb(6 23 27 / .14); }
.promo { display: grid; gap: 8px; margin-top: 20px; }
.promo .topup-label { margin: 0; }
.promo-row { display: flex; gap: 8px; }
.promo-input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--set); color: var(--paper); font: 700 16px/1 var(--sans); letter-spacing: .06em;
  box-shadow: inset 0 0 0 1px var(--line); }
.promo-input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--tally); }
.promo-input::placeholder { color: rgb(157 187 184 / .7); }
.promo-go { flex: 0 0 auto; min-height: 48px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--deck-2); color: var(--paper); font-size: 14.5px; font-weight: 800; }
.promo-note { margin: 0; color: var(--go); font-size: 13px; font-weight: 700; }
.promo-hint { margin: 0; color: var(--fog); font-size: 12.5px; }
.topup-bar { position: sticky; bottom: calc(-24px - env(safe-area-inset-bottom)); z-index: 6; display: flex; align-items: center; gap: 12px; margin: 20px -16px calc(-24px - env(safe-area-inset-bottom));
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--deck); box-shadow: 0 -1px 0 var(--line); }
.bar-sum { display: grid; flex: 1 1 auto; gap: 3px; min-width: 0; }
.bar-total { display: inline-flex; align-items: center; gap: 3px; font: 800 21px/1 var(--display); font-variant-numeric: tabular-nums; }
.bar-total .cr { width: 18px; height: 18px; }
.bar-sub { overflow: hidden; color: var(--fog); font-size: 12.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.pay-go { flex: 0 0 auto; min-width: 128px; }
.bar-back { display: grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; padding: 0; border: 0; border-radius: var(--key); background: var(--deck-2); color: var(--paper); }
.ways { display: grid; gap: 8px; }
.way { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 0; border-radius: 16px; background: var(--deck-2); color: var(--paper);
  text-align: left; box-shadow: inset 0 0 0 1px var(--line); }
.way[aria-pressed="true"] { background: rgb(255 68 56 / .1); box-shadow: inset 0 0 0 2px var(--tally); }
.way-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--set); }
.way-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--paper); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.way-text { display: grid; min-width: 0; }
.way-text b { font-size: 15px; font-weight: 800; }
.way-text small { color: var(--fog); font-size: 12.5px; line-height: 1.3; }
.way-price { display: grid; justify-items: end; gap: 3px; font: 650 14px/1.1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.way-cut { padding: 2px 6px; border-radius: 6px; background: var(--go); color: var(--ink); font: 800 11px/1.2 var(--sans); }
.topup-sum { display: grid; margin: 16px 0 0; }
.topup-sum > div, .wait-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.topup-sum dt, .wait-rows dt { color: var(--fog); font-size: 13.5px; }
.topup-sum dd, .wait-rows dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.topup-sum .is-plus { color: var(--go); }
.topup-sum .is-total dd { display: inline-flex; align-items: center; gap: 3px; font: 800 18px/1 var(--display); }
#checkout[open] { display: flex; flex-direction: column; }
#checkout > .topup-body:not([hidden]), #checkout > .paying:not([hidden]), #checkout .topup-page:not([hidden]) { display: flex; flex: 1 0 auto; flex-direction: column; }
.paying { gap: 12px; }
.topup-page > .topup-bar, .paying > .topup-bar { margin-top: auto; }
.topup-page > .promo, .topup-page > .sheet-hint { margin-bottom: 20px; }
.wait-card { display: grid; justify-items: center; gap: 8px; padding: 26px 16px 22px; border-radius: 20px; background: var(--deck-2); text-align: center; }
.wait-clock { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--set); }
.wait-clock svg { width: 28px; height: 28px; fill: none; stroke: var(--tally); stroke-width: 2; stroke-linecap: round; }
.wait-title { margin: 6px 0 0; font: 800 19px/1.15 var(--display); letter-spacing: -.02em; }
.wait-lead { max-width: 30em; margin: 0; color: var(--fog); font-size: 13.5px; line-height: 1.45; }
.wait-rows { display: grid; width: 100%; margin: 8px 0 4px; text-align: left; }
.wait-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }

/* «Профиль» */
.purse { display: grid; gap: 14px; padding: 18px; border-radius: 20px; background: var(--deck-2); }
.purse-n { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font: 800 46px/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.purse-n .cr { width: 34px; height: 34px; }
.purse-label { color: var(--fog); font: 650 14px/1.2 var(--sans); letter-spacing: 0; }
.purse-id { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 14px; background: var(--set); }
.purse-id-text { display: grid; min-width: 0; }
.purse-id-text small { color: var(--fog); font-size: 12px; font-weight: 650; }
.acc-number { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.purse-note { margin: -4px 0 0; color: var(--fog); font-size: 12.5px; line-height: 1.4; }
.acc-block { display: grid; gap: 10px; margin-top: 24px; }
.acc-title { margin: 0; font: 700 16px/1.2 var(--display); letter-spacing: -.01em; }
.acc-lead, .acc-hint { margin: 0; color: var(--fog); font-size: 13.5px; line-height: 1.45; }
.acc-warn { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgb(255 196 87 / .1); color: #ffd98f; font-size: 13.5px; }
[data-acc-can]:not([hidden]) { display: grid; gap: 10px; }
.acc-item { display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: var(--deck-2); }
.acc-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.acc-item-title { font-size: 15px; font-weight: 800; }
.acc-item-state { color: var(--go); font-size: 12.5px; font-weight: 750; text-align: right; }
.acc-code { display: grid; gap: 8px; }
.code { margin: 0; padding: 14px; border-radius: 12px; background: var(--set); font: 700 18px/1.2 var(--hud); letter-spacing: .08em; text-align: center; user-select: all; overflow-wrap: anywhere; }
.acc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.acc-status { margin: 0; font-size: 13px; font-weight: 650; }
.acc-status:empty { display: none; }
.acc-status[data-tone="ok"] { color: var(--go); }
.acc-status[data-tone="error"] { color: #ffb4ad; }
.acc-form { display: grid; gap: 8px; }
.acc-block .go { background: var(--paper); color: var(--ink); }
.label { color: var(--fog); font-size: 12.5px; font-weight: 750; }
.code-field { font-family: var(--hud); letter-spacing: .08em; text-transform: uppercase; }
.acc-pays-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.acc-pays-note { color: var(--fog); font-size: 12.5px; }
.kit-payments { display: grid; gap: 8px; }
.kit-payment { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border-radius: 14px; background: var(--deck-2); }
.kit-payment::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--fog); }
.kit-payment.is-pending::before { background: #ffc457; box-shadow: 0 0 10px #ffc457; animation: blink 1.6s steps(1) infinite; }
.kit-payment.is-paid::before { background: var(--go); }
.kit-payment.is-declined::before { background: var(--tally); }
.kit-payment-main { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.kit-payment-sum { font-weight: 800; font-variant-numeric: tabular-nums; }
.kit-payment-meta { color: var(--fog); font-size: 12.5px; }
.kit-payment-state { padding: 3px 9px; border-radius: 7px; background: rgb(234 244 241 / .08); color: var(--fog); font-size: 12.5px; font-weight: 750; white-space: nowrap; }
.kit-payment.is-pending .kit-payment-state { background: rgb(255 196 87 / .14); color: #ffd98f; }
.kit-payment.is-paid .kit-payment-state { background: rgb(63 224 142 / .14); color: #8ff0bc; }
.kit-payment.is-declined .kit-payment-state { background: rgb(255 68 56 / .16); color: #ffb4ad; }
.kit-payment-pay { display: inline-flex; flex: 1 0 100%; align-items: center; justify-content: center; min-height: 44px; border-radius: 12px; background: var(--tally); color: var(--ink); font-weight: 800; text-decoration: none; }
.kit-payments-empty { margin: 0; color: var(--fog); font-size: 14px; }
.menu { display: grid; margin: 22px 0 0; padding: 0; list-style: none; }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 54px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--line); background: none;
  color: var(--paper); font-size: 15px; font-weight: 700; text-align: left; text-decoration: none; }
.menu-chev { color: var(--fog); }
.menu-go { color: var(--fog); font-size: 14px; }

/* «На главный экран» */
.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 var(--line), 0 8px 22px rgb(0 0 0 / .4); }
.inst-text { display: grid; gap: 4px; min-width: 0; }
.inst-title { margin: 2px 0 0; font: 800 20px/1.15 var(--display); letter-spacing: -.02em; }
.inst-lead { margin: 0; color: var(--fog); font-size: 14px; line-height: 1.4; }
.inst-lead strong { color: var(--paper); }
.inst-way { margin-top: 18px; }
.inst-way .go { 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; min-height: 34px; padding: 6px 0 0 46px; 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: 10px; background: var(--deck-2); font: 700 14px/1 var(--display); }
.inst-key { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: 0 2px; border-radius: 8px; background: var(--deck-2); vertical-align: -8px; }
.inst-key svg { width: 18px; height: 18px; fill: none; stroke: var(--paper); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.inst-later { display: block; margin: 14px auto 0; }

/* Notes and the foot */
.notes { margin-top: 40px; }
.faq { display: grid; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 54px; padding: 10px 0; font-size: 15.5px; font-weight: 750; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: 0 0 auto; width: 12px; height: 12px; background: linear-gradient(var(--fog) 0 0) 50% / 12px 2px no-repeat, linear-gradient(var(--fog) 0 0) 50% / 2px 12px no-repeat; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 14px; color: var(--fog); font-size: 14.5px; line-height: 1.6; }
.notes-text { max-width: 44em; margin: 18px 0 0; color: var(--fog); font-size: 14px; line-height: 1.6; }
.foot { max-width: 1240px; margin: 0 auto; padding: 0 16px calc(104px + env(safe-area-inset-bottom)); }
.foot-line { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--fog); font-size: 12.5px; }
.foot-line a { color: var(--fog); text-underline-offset: 3px; }
body:has(.foot) .main { padding-bottom: 28px; }

/* The narrowest phones (320 px): the dock's words whole, the free try's title on one line. */
@media (max-width: 359px) {
  .dock-tab, .dock-rec { font-size: 9.5px; letter-spacing: -.01em; }
  .offer-text strong { font-size: 14px; }
  .brand-name { font-size: 14px; }
}
/* A tablet: wider strips, three cards in a row. */
@media (min-width: 640px) {
  .main { padding-left: 24px; padding-right: 24px; }
  .top { padding: 0 24px; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px; }
  .takes-row { grid-auto-columns: minmax(170px, 30%); margin: 0 -24px; padding: 0 24px 4px; scroll-padding: 0 24px; }
  .cat-bar, .cat-subs, .pills, .reels, .variants { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
  .shot { margin: -12px -24px 0; }
  .studio { height: clamp(480px, 66vw, 600px); }
  .kind { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 24px; }
  .kind-title { font-size: 28px; }
  .reels { grid-auto-columns: minmax(150px, 26%); }
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .foot { padding-left: 24px; padding-right: 24px; }
  .sheet { border-radius: 26px; margin-bottom: auto; }
  .sheet-full, .sheet-free, .sheet-compose { border-radius: 0; }
}
@media (min-width: 900px) {
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .takes-row { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; }
  .take { aspect-ratio: 3 / 4; }
}

/* A computer: the menu in the top, no dock; the home page in two columns — the viewfinder on the left, the green light and
   the four ways on the right; a scenario's page with its picture staying in sight; the tall cards wide, their picture
   whole on the left. */
@media (min-width: 1100px) {
  :root { --top: 66px; }
  .top { padding: 0 max(24px, calc((100% - 1240px) / 2 + 24px)); gap: 10px; }
  .brand { margin-right: 6px; }
  .top-nav { display: flex; align-items: center; gap: 2px; margin-right: auto; }
  .top-nav a, .top-nav button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--fog); font-size: 14.5px; font-weight: 700; text-decoration: none; }
  .top-nav [aria-current="page"] { color: var(--paper); background: var(--deck-2); }
  .top-make { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--tally); color: var(--ink); font-size: 14.5px; font-weight: 800; }
  .top-make .rec-dot { width: 9px; height: 9px; box-shadow: 0 0 0 3px rgb(234 244 241 / .35); }
  .dock { display: none; }
  .main { padding-bottom: 48px; }
  body.is-detail .main { padding-bottom: 48px; }
  .foot { padding-bottom: 32px; }
  .home { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; gap: 18px 22px; }
  .home > .studio { grid-column: 1; grid-row: 1 / span 2; height: min(calc(100vh - 110px), 720px); min-height: 560px; max-height: none; aspect-ratio: auto; margin: 0; }
  .home > .offer, .home > .takes { grid-column: 2; }
  .home > .takes { margin: 0; }
  .home .takes-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .home .take { aspect-ratio: 4 / 4.6; }
  .home > .catalog, .home > .notes { grid-column: 1 / -1; }
  .home > .catalog { margin-top: 26px; }
  .home.is-kind { grid-template-rows: none; }
  .studio-title { font-size: 20px; }
  .studio-foot { padding: 14px 26px 28px; }
  .studio .hud { top: 26px; left: 30px; right: 30px; }
  .cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cat-bar { top: var(--top); }
  .item { grid-template-columns: auto minmax(0, 1fr); gap: 0 44px; align-items: start; }
  .item > .shot { position: sticky; top: calc(var(--top) + 20px); width: auto; height: min(calc(100vh - var(--top) - 44px), 720px); max-height: none; aspect-ratio: 4 / 5; margin: 20px 0 0;
    border-radius: 24px; }
  .item-body { padding-top: 24px; }
  .item-title { font-size: 34px; }
  .item .run-bar { position: sticky; bottom: 16px; margin: 6px 0 0; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line), 0 14px 34px rgb(0 0 0 / .4); padding: 12px 12px 12px 18px; }
  .strip { grid-column: 1 / -1; }
  .reels { grid-auto-columns: minmax(160px, 16%); }
  .variants { grid-auto-columns: 120px; margin: 0; padding: 0 0 2px; }
  .gallery { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .sheet { --tall: min(88vh, 820px); --side: 440px; --wide: min(calc(var(--tall) * 3 / 4 + var(--side)), calc(100% - 48px)); margin: auto; border-radius: 26px; }
  .sheet-full { height: fit-content; max-height: min(92vh, 900px); padding-bottom: 24px; border-radius: 26px; }
  .sheet-full .sheet-top { padding-top: 16px; }
  .topup-bar { bottom: -24px; margin-bottom: -24px; padding-bottom: 14px; }
  .sheet-free, .sheet-compose, #create { width: var(--wide); max-width: none; height: var(--tall); max-height: none; border-radius: 26px; }
  .sheet-free[open], .sheet-compose[open] { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); grid-template-rows: minmax(0, 1fr) auto; }
  .sheet-compose[open] { grid-template-rows: auto minmax(0, 1fr) auto; }
  #popular, #history { width: var(--wide); max-width: none; }
  #account, #checkout { max-width: 620px; }
  .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(--set); }
  .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% 24%; }
  .cmp-shot-mode > .before-chip { position: absolute; inset: auto auto 20px 20px; width: 23%; height: auto; }
  .free-shot .out-pic { object-position: 50% 50%; }
  .sheet-free .out::after { display: none; }
  .free-body, .sheet-free .run-bar, .cmp-top, .cmp-body, .sheet-compose .run-bar { grid-column: 2; }
  .free-body { gap: 9px; padding: 28px 28px 16px; align-content: safe center; }
  .free-close { top: 18px; right: 18px; background: var(--deck-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .free-title { padding-right: 52px; font-size: 26px; }
  .sheet-free .run-bar, .sheet-compose .run-bar { padding: 14px 28px; }
  .before-chip { left: 22px; bottom: 22px; max-width: 132px; }
  .cmp-top { padding: 22px 18px 10px 28px; }
  .cmp-body { padding: 10px 24px 20px 28px; border-top: 1px solid var(--line); }
  .sheet-compose .cmp-lead { max-width: 30em; }
  #create .create-panel { flex: 1 1 auto; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
  #create .shots { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); min-height: 0; }
  #create .shotrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; align-items: end; gap: 12px; height: 100%; padding: 10px 14px 14px 10px; }
  #create .shotrow-media { grid-column: 1 / -1; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 14px; }
  #create .shotrow-text { padding-left: 4px; }
  #create .shotrow-title { font-size: 17px; }
}
@media (min-width: 1000px) and (max-height: 820px) {
  .sheet-compose .field-box textarea { min-height: 88px; }
  .sheet-compose .cmp-lead { display: none; }
}
@media (min-width: 1800px) {
  .main, .foot { max-width: 1440px; }
  .top { padding: 0 max(24px, calc((100% - 1440px) / 2 + 24px)); }
  .cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* A mouse: what answers the pointer. */
@media (hover: hover) {
  .go:hover { filter: brightness(1.08); }
  .ghost:hover, .close:hover, .cat-round:hover, .offer-go:hover, .idea-btn:hover, .promo-go:hover, .bar-back:hover { background: #24505b; }
  .offer:hover { background: #143a44; }
  .card:hover .card-media > img, .card:hover .card-media > video, .take:hover .take-media > img, .take:hover .take-media > video, .reel:hover .reel-media > img { transform: scale(1.04); }
  .take-media > img, .take-media > video, .reel-media > img { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
  .cat-kinds button:hover, .top-nav a:hover, .top-nav button:hover { color: var(--paper); }
  .shotrow:hover, .way:hover, .pack:hover:not([aria-pressed="true"]), .opts button:hover:not([aria-pressed="true"]), .kit-chip:hover span { background: #24505b; }
  .drop:hover { background: rgb(234 244 241 / .08); }
  .menu-row:hover { color: #fff; }
}
/* A phone: the page under an open card holds still (a mouse keeps its scrollbar: app.js keeps the wheel in the card). */
@media (pointer: coarse) { html:has(dialog[open]) { overflow: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .studio.vf::after, .hud-rec::before, .offer-light::after, .out-line::before, .kit-payment.is-pending::before { animation: none; }
  .sheet[open], .kind:not([hidden]), .create-panel, .field-box.is-asking, .consents.is-asking .consent { animation: none; }
  .card-media > img, .card-media > video, .take-media > img, .take-media > video, .go, .rec-btn { transition: none; }
}

/* «Помощь» (partials/support.html): the visitor's requests to support, drawn by the kit (web/sites/support.js, kit-help-*).
   The mark of an answer not read yet is the coin's yellow: red stays the record button's. */
.help-dot { position: absolute; top: -2px; right: calc(50% - 18px); width: 9px; height: 9px; border-radius: 50%; background: var(--coin); box-shadow: 0 0 0 2px var(--set); }
.help-dot[hidden] { display: none; }
.wallet { position: relative; }
.wallet .help-dot { top: -3px; right: -3px; }
.help-badge { padding: 3px 8px; border-radius: 7px; background: rgb(255 201 77 / .16); color: var(--coin); font-size: 12.5px; font-weight: 750; white-space: nowrap; }
.help-badge[hidden] { display: none; }
.menu-row .menu-go { display: inline-flex; align-items: center; gap: 8px; }
.help-banner { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 16px; padding: 14px 16px; border: 0; border-radius: var(--tile); background: rgb(255 201 77 / .1);
  box-shadow: inset 0 0 0 1px rgb(255 201 77 / .35); color: var(--paper); font: 700 14.5px/1.35 var(--sans); text-align: left; }
.help-banner[hidden] { display: none; }
.help-banner b { margin-left: auto; color: var(--coin); white-space: nowrap; }
.help-banner-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--coin); }
.pay-help { display: block; width: 100%; min-height: 44px; margin-top: 10px; padding: 0 12px; border: 0; border-radius: var(--key); background: var(--deck-2); color: var(--paper); font: 700 14px/1.3 var(--sans); }
.help-other { margin: 18px 4px 0; color: var(--fog); font-size: 13.5px; }
.help-other a { color: var(--paper); }
.kit-help { display: grid; gap: 12px; }
.kit-help-lead { margin: 0; color: var(--fog); 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: var(--key);
  background: var(--paper); color: var(--ink); font: 800 16px/1.15 var(--sans); }
.kit-help-new:disabled, .kit-help-send:disabled { opacity: .5; }
.kit-help-title { margin: 6px 0 0; font: 800 17px/1.25 var(--display); letter-spacing: -.02em; }
.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: 14px; background: var(--deck-2); color: var(--paper); text-align: left; }
.kit-help-row.is-unread { box-shadow: inset 0 0 0 1.5px var(--coin); }
.kit-help-row-main { display: grid; gap: 3px; min-width: 0; flex: 1 1 auto; }
.kit-help-subject { overflow: hidden; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.kit-help-meta { margin: 0; color: var(--fog); 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(--coin); }
.kit-help-state { padding: 3px 9px; border-radius: 7px; background: rgb(234 244 241 / .08); color: var(--fog); font-size: 12.5px; font-weight: 750; white-space: nowrap; }
.kit-help-state.is-answered { background: rgb(63 224 142 / .14); color: var(--go); }
.kit-help-state.is-waiting { background: rgb(255 201 77 / .16); color: var(--coin); }
.kit-help-empty, .kit-help-hint { margin: 0; color: var(--fog); font-size: 13.5px; }
.kit-help-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgb(63 224 142 / .12); color: var(--go); font-size: 13.5px; }
.kit-help-back { justify-self: start; min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--deck-2); color: var(--paper); font: 700 14px/1 var(--sans); }
.kit-help-form { display: grid; gap: 12px; margin: 0; padding: 16px; border-radius: var(--tile); background: var(--deck); box-shadow: inset 0 0 0 1px var(--line); }
.kit-help-field { display: grid; gap: 6px; }
.kit-help-label { color: var(--fog); font-size: 13.5px; font-weight: 600; }
.kit-help-input { width: 100%; min-width: 0; min-height: 48px; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--set); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--paper); font: 500 16px/1.4 var(--sans); resize: vertical; }
.kit-help-input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--paper); }
.kit-help-input::placeholder { color: rgb(157 187 184 / .7); }
.kit-help-files { max-width: 100%; color: var(--fog); font-size: 13.5px; }
.kit-help-files::file-selector-button { margin-right: 10px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--deck-2); color: var(--paper); font: 700 13.5px/1 var(--sans); }
.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: 10px; background: var(--set); box-shadow: inset 0 0 0 1px var(--line); color: var(--fog); font-weight: 700; font-size: 14px; cursor: pointer; }
.kit-help-cat input:checked + span { background: var(--paper); box-shadow: none; color: var(--ink); }
.kit-help-cat input:focus-visible + span { outline: 2px solid var(--paper); 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: 12px; background: rgb(255 201 77 / .12); color: var(--coin); font-weight: 750; font-size: 14px; }
.kit-help-drop { width: 32px; height: 32px; border: 0; border-radius: 8px; background: var(--deck-2); color: var(--paper); font-size: 18px; line-height: 1; }
.kit-help-error { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgb(255 68 56 / .14); color: var(--paper); 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: 14px 14px 14px 4px; background: var(--deck-2); }
.kit-help-msg.is-mine { justify-self: end; border-radius: 14px 14px 4px 14px; background: rgb(234 244 241 / .12); }
.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(--fog); font-size: 12px; }
.kit-help-msg.is-support .kit-help-msg-head b { color: var(--go); }
.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: 8px; object-fit: cover; }
.kit-help-event { justify-self: center; color: var(--fog); 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(--fog); font: 700 14px/1 var(--sans); text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 760px) { #support.sheet-full { min-height: min(70vh, 640px); } }