/* =====================================================================
   "КАК РОЖДАЕТСЯ САЙТ" — анимация в блоке "Сайт, который продаёт".
   Сцена 16:9 масштабируется через container units (cqw), поэтому
   выглядит одинаково при любой ширине колонки.
   ===================================================================== */

/* Колонка с анимацией шире, чем с обычной картинкой. */
.luvit-process--anim .luvit-process-inner { grid-template-columns: 1.5fr 1fr; }
/* В одну колонку заголовок идёт перед анимацией, описание и кнопка — после.
   display: contents делает детей .luvit-process-content элементами сетки. */
@media (max-width: 1024px) {
    .luvit-process--anim .luvit-process-inner { grid-template-columns: 1fr; gap: 0; }
    .luvit-process--anim .luvit-process-content { display: contents; }
    .luvit-process--anim .luvit-eyebrow { order: 1; justify-self: start; }
    .luvit-process--anim .luvit-process-content h2 { order: 2; margin-bottom: 24px; }
    .luvit-process--anim .luvit-process-media { order: 3; margin-bottom: 24px; }
    .luvit-process--anim .luvit-process-content p { order: 4; }
    .luvit-process--anim .luvit-process-content .luvit-btn { order: 5; justify-self: start; }
}

.luvit-sb {
    --ground: #0A1830;
    --blue: #164584;
    --blue-deep: #0F3366;
    --line: rgba(206, 226, 255, .62);
    --line-soft: rgba(206, 226, 255, .12);
    --ink: #F1F5FD;
    --muted: #A8BCDB;
    --spark: #FFB547;
    --copper: #C8753A;
    --graphite: #24262B;
    --code-bg: #0D1422;
    --f-display: var(--luvit-font);
    --f-body: var(--luvit-font);
    --f-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
    container: luvit-sb / inline-size;
    display: grid;
    gap: 14px;
    min-width: 0;
}
.luvit-sb [hidden] { display: none !important; }

/* ---------- сцена ---------- */
.sb-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    container-type: inline-size;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    outline: none;
    color: var(--ink);
    font-family: var(--f-body);
    line-height: 1.5;
    box-shadow: 0 24px 60px -28px rgba(10, 24, 48, .55);
}
.sb-stage:focus-visible { box-shadow: 0 0 0 3px var(--spark); }
.sb-scene {
    position: absolute;
    inset: 0;
    font-size: 1.2cqw;
    overflow: hidden;
    background:
        radial-gradient(circle at 75% 20%, rgba(255, 255, 255, .08), transparent 45%),
        linear-gradient(var(--line-soft) 1px, transparent 1px) 0 0 / 2.5cqw 2.5cqw,
        linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0 / 2.5cqw 2.5cqw,
        linear-gradient(rgba(206, 226, 255, .2) 1px, transparent 1px) 0 0 / 12.5cqw 12.5cqw,
        linear-gradient(90deg, rgba(206, 226, 255, .2) 1px, transparent 1px) 0 0 / 12.5cqw 12.5cqw,
        var(--blue);
}
.sb-tag { position: absolute; left: 4.5cqw; top: 3.6cqw; font-size: .95cqw; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); display: flex; gap: 1cqw; align-items: center; white-space: nowrap; }
.sb-tag .sb-heart { width: 1.5cqw; height: auto; margin-right: -.4cqw; }
.sb-tag b { font-family: var(--f-display); font-weight: 800; color: var(--ink); letter-spacing: .08em; }
.sb-stamp { position: absolute; right: 3cqw; bottom: 2.4cqw; font-family: var(--f-mono); font-size: .9cqw; color: var(--muted); letter-spacing: .06em; text-align: right; line-height: 1.5; }

/* подписи этапов */
.sb-cap { position: absolute; left: 4.5cqw; top: 9cqw; width: 27cqw; height: 40cqw; }
.sb-c { position: absolute; inset: 0 auto auto 0; width: 100%; opacity: 0; transform: translateY(2cqw); transition: opacity .5s, transform .6s cubic-bezier(.2, .7, .2, 1); }
.is-cur-1 .sb-c1, .is-cur-2 .sb-c2, .is-cur-3 .sb-c3, .is-cur-4 .sb-c4, .is-cur-5 .sb-c5 { opacity: 1; transform: none; transition-delay: .15s; }
.sb-num { font-family: var(--f-display); font-weight: 800; font-size: 7cqw; line-height: 1; color: transparent; -webkit-text-stroke: .1cqw var(--line); }
.sb-h { font-family: var(--f-display); font-weight: 700; font-size: 3.5cqw; line-height: 1.1; margin-top: .6cqw; letter-spacing: -.01em; }
.sb-p { font-size: 1.45cqw; line-height: 1.45; color: var(--muted); margin-top: 1.4cqw; }
.sb-chips { display: flex; flex-wrap: wrap; gap: .6cqw; margin-top: 1.8cqw; }
.sb-chips span { font-size: 1cqw; padding: .35cqw .9cqw; border: .1cqw solid var(--line); border-radius: 5cqw; color: var(--ink); }
.is-cur-1 .sb-c1 .sb-chips span, .is-cur-2 .sb-c2 .sb-chips span,
.is-cur-4 .sb-c4 .sb-chips span, .is-cur-5 .sb-c5 .sb-chips span { animation: sb-rise .5s both; }
.sb-chips span:nth-child(2) { animation-delay: .12s !important; }
.sb-chips span:nth-child(3) { animation-delay: .24s !important; }
.sb-pal { display: flex; gap: .8cqw; align-items: center; margin-top: 1.8cqw; }
.sb-pal i { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; border: .1cqw solid rgba(255, 255, 255, .5); }
.sb-pal em { font-style: normal; font-family: var(--f-display); font-weight: 700; font-size: 2cqw; margin-left: .8cqw; }
.is-cur-3 .sb-pal > * { animation: sb-pop .5s both; }
.sb-pal > *:nth-child(2) { animation-delay: .1s !important; }
.sb-pal > *:nth-child(3) { animation-delay: .2s !important; }
.sb-pal > *:nth-child(4) { animation-delay: .3s !important; }
.sb-pal > *:nth-child(5) { animation-delay: .45s !important; }

/* карточка брифа */
.sb-brief { position: absolute; left: 43cqw; top: 9cqw; width: 47cqw; margin: 0; padding: 2.4cqw 2.6cqw; border: .13cqw dashed var(--line); border-radius: 1cqw; background: rgba(10, 30, 62, .35); transition: opacity .7s, transform .9s cubic-bezier(.6, 0, .3, 1); }
.sb-bt { display: flex; justify-content: space-between; align-items: baseline; border-bottom: .1cqw solid var(--line); padding-bottom: 1.2cqw; margin-bottom: 1.4cqw; }
.sb-bt strong { font-family: var(--f-display); font-weight: 700; font-size: 2.2cqw; }
.sb-bt span { font-family: var(--f-mono); font-size: .95cqw; color: var(--muted); }
.sb-r { display: grid; grid-template-columns: 12cqw 1fr; gap: 1.2cqw; font-size: 1.25cqw; padding: .75cqw 0; border-bottom: .08cqw dashed var(--line-soft); }
.sb-r dt { color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: .85cqw; padding-top: .25cqw; }
.sb-r dd { margin: 0; }
.sb-need { display: flex; flex-wrap: wrap; gap: .7cqw; margin-top: 1.6cqw; }
.sb-need span { font-size: 1.05cqw; padding: .4cqw 1cqw; background: rgba(255, 181, 71, .14); color: #FFD58A; border-radius: .4cqw; }
.is-cur-1 .sb-r, .is-cur-1 .sb-need span { animation: sb-rise .55s var(--d) both; }
.is-s2 .sb-brief { opacity: 0; transform: translate(30cqw, -5cqw) scale(.3) rotate(6deg); pointer-events: none; }

/* окно браузера */
.sb-win { position: absolute; left: 37cqw; top: 7cqw; width: 59cqw; height: 43cqw; border: .14cqw solid var(--line); border-radius: 1cqw; background: rgba(255, 255, 255, .03); opacity: 0; overflow: hidden; transition: background-color .8s, border-color .8s, box-shadow .8s; }
.is-s2 .sb-win { opacity: 1; animation: sb-winIn .9s cubic-bezier(.6, 0, .3, 1) backwards; }
.is-s3 .sb-win { background: #fff; border-color: transparent; box-shadow: 0 3cqw 6cqw -1.5cqw rgba(3, 12, 30, .6); }
.sb-bar { height: 3.2cqw; display: flex; align-items: center; gap: .7cqw; padding: 0 1.2cqw; border-bottom: .12cqw solid var(--line); transition: background-color .6s, border-color .6s; }
.sb-bar i { width: .85cqw; height: .85cqw; border-radius: 50%; border: .1cqw solid var(--line); transition: background-color .6s, border-color .6s; }
.sb-url { flex: 1; margin-left: 1.4cqw; height: 1.9cqw; border: .1cqw solid var(--line); border-radius: 1cqw; display: flex; align-items: center; gap: .5cqw; padding: 0 1cqw; font-family: var(--f-mono); font-size: .95cqw; color: #46505F; transition: background-color .6s, border-color .6s; }
.sb-lock { width: 1cqw; height: 1cqw; opacity: 0; transform: scale(.4); transition: opacity .4s, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.is-secure .sb-lock { opacity: 1; transform: none; }
.sb-caret { display: inline-block; width: .08cqw; height: 1.1cqw; background: #46505F; margin-left: .1cqw; animation: sb-blink 1s steps(1) infinite; }
.is-s3 .sb-bar { background: #EEF1F5; border-color: #DFE3EA; }
.is-s3 .sb-bar i { border-color: transparent; }
.is-s3 .sb-bar i:nth-child(1) { background: #FF6159; }
.is-s3 .sb-bar i:nth-child(2) { background: #FFBD2E; }
.is-s3 .sb-bar i:nth-child(3) { background: #28C941; }
.is-s3 .sb-url { background: #fff; border-color: #DFE3EA; }

.sb-page { position: absolute; top: 3.2cqw; left: 0; right: 0; bottom: 0; display: grid; grid-template-rows: 3.4cqw 19cqw 1fr; gap: .8cqw; padding: .8cqw; --tc: #1E2026; transition: padding .7s .2s, gap .7s .2s, background-color .6s; }
.is-s3 .sb-page { padding: 0; gap: 0; }
.sb-wf { position: relative; opacity: 0; outline: .13cqw dashed transparent; outline-offset: -.13cqw; border-radius: .4cqw; transition: background-color .7s var(--d, 0s), outline-color .4s var(--d, 0s), color .6s var(--d, 0s), border-radius .6s; }
.is-s2 .sb-wf { opacity: 1; outline-color: var(--line); animation: sb-wfIn .55s var(--d, 0s) cubic-bezier(.3, 1.3, .5, 1) both; }
.is-s3 .sb-wf { outline-color: transparent; }
.sb-tx { color: transparent; border-radius: .3cqw; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: color .6s var(--d, 0s), background-color .6s var(--d, 0s); }
.is-s2 .sb-tx { background-color: rgba(220, 234, 255, .3); }
.is-s3 .sb-tx { background-color: transparent; color: var(--tc); }

.sb-nav { display: flex; align-items: center; gap: 1.8cqw; padding: 0 2cqw; font-size: .95cqw; }
.sb-logo { font-family: var(--f-display); font-weight: 800; font-size: 1.25cqw; letter-spacing: .06em; margin-right: auto; }
.sb-ph { font-weight: 600; }
.is-s3 .sb-nav { background: #fff; border-radius: 0; }

.sb-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2cqw; padding: 2.2cqw 2.4cqw; align-items: center; --tc: #fff; }
.is-s3 .sb-hero { background: var(--graphite); border-radius: 0; }
.sb-eb { font-size: .85cqw; letter-spacing: .14em; text-transform: uppercase; --tc: #E7A46D; }
.sb-title { font-family: var(--f-display); font-weight: 700; font-size: 2.35cqw; line-height: 1.28; margin: .9cqw 0 1cqw; letter-spacing: -.01em; }
.sb-lead { font-size: 1.02cqw; line-height: 1.5; --tc: #C9CCD3; }
.sb-btn { display: inline-block; margin-top: 1.5cqw; font-size: 1cqw; font-weight: 600; padding: .9cqw 1.5cqw; --tc: #fff; transition: background-color .7s var(--d), outline-color .4s, transform .15s, box-shadow .3s; }
.is-s3 .sb-btn { background: var(--copper); border-radius: .5cqw; }
.is-cur-4 .sb-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); background-size: 250% 100%; animation: sb-shine 1.6s 1s infinite; }
.sb-btn.is-press { transform: scale(.94); box-shadow: 0 0 0 .5cqw rgba(255, 181, 71, .35); }
.sb-img { height: 100%; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.is-s3 .sb-img { background: radial-gradient(circle at 70% 25%, rgba(255, 170, 90, .35), transparent 55%), linear-gradient(160deg, #3B3632, #18181B); border-radius: .6cqw; }
.sb-gate { width: 84%; height: auto; overflow: visible; }
.sb-gate path, .sb-gate circle { fill: none; stroke: var(--line); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 0; transition: stroke .7s .5s; }
.is-s2 .sb-gate path, .is-s2 .sb-gate circle { animation: sb-draw 1.8s .8s ease-out both; }
.is-s3 .sb-gate path, .is-s3 .sb-gate circle { stroke: #E39A5A; }

.sb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9cqw; padding: 0; min-height: 0; }
.is-s3 .sb-cards { padding: 1.4cqw 2.4cqw; background: #F4F5F7; gap: 1.2cqw; }
.sb-card { display: flex; flex-direction: column; gap: .5cqw; padding: .7cqw; font-size: 1cqw; min-height: 0; }
.is-s3 .sb-card { background: #fff; box-shadow: 0 .3cqw 1cqw rgba(20, 25, 35, .08); }
.sb-ci { height: 5.2cqw; border-radius: .3cqw; }
.is-s3 .sb-ci { border-radius: .4cqw; }
.is-s3 .sb-card:nth-child(1) .sb-ci { background: linear-gradient(135deg, #4A403A, #22201F); }
.is-s3 .sb-card:nth-child(2) .sb-ci { background: linear-gradient(135deg, #6B4C35, #2D2420); }
.is-s3 .sb-card:nth-child(3) .sb-ci { background: linear-gradient(135deg, #3E4550, #1E2228); }
.sb-card b { font-weight: 600; }
.sb-card small { font-size: .85cqw; --tc: var(--copper); }

/* панель кода */
.sb-code { position: absolute; left: 32cqw; top: 29.5cqw; width: 30cqw; padding: 1.3cqw 1.5cqw 1.5cqw; background: var(--code-bg); border-radius: .9cqw; box-shadow: 0 2cqw 5cqw -1cqw rgba(0, 0, 0, .6); opacity: 0; transform: translateY(3cqw); transition: opacity .6s, transform .7s cubic-bezier(.2, .7, .2, 1); z-index: 3; }
.is-s4 .sb-code { opacity: 1; transform: none; }
.is-s5 .sb-code { opacity: 0; transform: translateY(3cqw); }
.sb-ch { display: flex; align-items: center; gap: .6cqw; font-family: var(--f-mono); font-size: .85cqw; color: #7C8AA5; margin-bottom: 1cqw; }
.sb-ch i { width: .7cqw; height: .7cqw; border-radius: 50%; background: #2A3448; }
.sb-ch span { margin-left: .8cqw; }
.sb-code pre { margin: 0; padding: 0; border: 0; background: none; overflow: hidden; font-family: var(--f-mono); font-size: 1.02cqw; line-height: 1.62; color: #D6E2F5; white-space: pre; min-height: 13.2cqw; }
.sb-code .sb-k { color: #FF8FA3; }
.sb-code .sb-t { color: #7FC8FF; }
.sb-code .sb-s { color: #FFD27A; }
.sb-code .sb-f { color: #B9F18B; }
.sb-cur { display: inline-block; width: .55cqw; height: 1.2cqw; background: var(--spark); vertical-align: -.15cqw; animation: sb-blink 1s steps(1) infinite; }

.sb-pointer { position: absolute; width: 2.1cqw; left: 0; top: 0; opacity: 0; z-index: 5; pointer-events: none; transform: translate(-12%, -6%); filter: drop-shadow(0 .3cqw .4cqw rgba(0, 0, 0, .35)); }

/* запуск */
.sb-metrics { position: absolute; left: 68cqw; top: 20cqw; width: 28.5cqw; padding: 1.8cqw 2cqw; background: rgba(9, 22, 46, .94); border: .1cqw solid var(--line-soft); border-radius: 1cqw; box-shadow: 0 2cqw 5cqw -1cqw rgba(0, 0, 0, .55); opacity: 0; transform: translateX(4cqw); transition: opacity .6s .3s, transform .8s .3s cubic-bezier(.2, .7, .2, 1); z-index: 4; }
.is-s5 .sb-metrics { opacity: 1; transform: none; }
.sb-ring { display: flex; align-items: center; gap: 1.6cqw; padding-bottom: 1.4cqw; border-bottom: .1cqw solid var(--line-soft); margin-bottom: 1cqw; }
.sb-ring svg { width: 8cqw; height: 8cqw; flex: none; }
.sb-val { font-family: var(--f-display); font-weight: 800; font-size: 3.4cqw; line-height: 1; font-variant-numeric: tabular-nums; }
.sb-lbl { font-size: 1cqw; color: var(--muted); margin-top: .5cqw; line-height: 1.35; }
.sb-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .75cqw; }
.sb-checks li { display: flex; align-items: center; gap: .8cqw; font-size: 1.12cqw; }
.sb-checks svg { width: 1.5cqw; height: 1.5cqw; flex: none; }
.is-cur-5 .sb-checks li { animation: sb-rise .45s var(--d) both; }
.sb-toast { position: absolute; left: 39cqw; top: 41.5cqw; display: flex; align-items: center; gap: 1cqw; padding: 1cqw 1.5cqw 1cqw 1cqw; background: #fff; color: #1E2026; border-radius: .8cqw; box-shadow: 0 1.5cqw 3cqw -.5cqw rgba(0, 0, 0, .45); opacity: 0; z-index: 4; font-size: 1.05cqw; line-height: 1.35; }
.sb-ic { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: var(--copper); display: grid; place-items: center; flex: none; }
.sb-ic svg { width: 1.4cqw; height: 1.4cqw; }
.sb-toast b { display: block; font-weight: 600; }
.sb-toast span { color: #5F6672; }
.is-cur-5 .sb-toast { animation: sb-pop .6s 2.9s cubic-bezier(.3, 1.5, .5, 1) both; }

/* финальная карточка */
.sb-final {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: grid;
    place-content: center;
    text-align: center;
    gap: 1.4cqw;
    opacity: 0;
    pointer-events: none;
    transition: opacity .8s;
    background:
        radial-gradient(circle at 50% 42%, rgba(236, 85, 87, .22), transparent 42%),
        linear-gradient(var(--line-soft) 1px, transparent 1px) 0 0 / 2.5cqw 2.5cqw,
        linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0 / 2.5cqw 2.5cqw,
        var(--blue-deep);
}
.is-s6 .sb-final { opacity: 1; }
.sb-w { font-family: var(--f-display); font-weight: 800; font-size: 9cqw; line-height: .95; letter-spacing: -.03em; }
.sb-logo-big { justify-self: center; }
.sb-logo-big .sb-heart { width: 9cqw; height: auto; filter: drop-shadow(0 1cqw 2cqw rgba(236, 85, 87, .35)); }
.sb-l { font-family: var(--f-display); font-weight: 400; font-size: 2.4cqw; }
.sb-go { justify-self: center; margin-top: 1.4cqw; font-family: var(--f-display); font-size: 1.6cqw; font-weight: 600; padding: 1.1cqw 3cqw; background: #EC5557; color: #fff; border: 0; border-radius: 5cqw; cursor: pointer; }
.is-s6 .sb-go { pointer-events: auto; }
.sb-go:hover { background: #D9474A; }
.sb-go:focus-visible { outline: 3px solid var(--spark); outline-offset: 3px; }
.is-cur-6 .sb-final > * { animation: sb-rise .7s var(--d) both; }

.sb-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9; }

@keyframes sb-rise { from { opacity: 0; transform: translateY(1.2cqw); } to { opacity: 1; transform: none; } }
@keyframes sb-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes sb-wfIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes sb-winIn { from { clip-path: inset(0 100% 100% 0 round 1cqw); } to { clip-path: inset(0 0 0 0 round 1cqw); } }
@keyframes sb-draw { from { stroke-dashoffset: 420; } to { stroke-dashoffset: 0; } }
@keyframes sb-blink { 50% { opacity: 0; } }
@keyframes sb-shine { from { background-position: 150% 0; } to { background-position: -100% 0; } }

/* пауза пользователем и когда блок за пределами экрана */
.is-paused .sb-scene *, .is-paused .sb-scene *::after,
.is-offscreen .sb-scene *, .is-offscreen .sb-scene *::after { animation-play-state: paused !important; }

/* ---------- управление (на светлом фоне блока) ---------- */
.sb-subcap { display: none; margin: 0; color: var(--luvit-color-text-muted); font-size: 15px; line-height: 1.5; min-height: 3em; }
.sb-ctrl { display: flex; align-items: flex-end; gap: 14px; }
.sb-play {
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--luvit-color-border);
    background: var(--luvit-color-bg-alt);
    color: var(--luvit-color-text);
    display: grid;
    place-items: center;
    transition: border-color .15s, color .15s;
}
.sb-play:hover { border-color: var(--luvit-color-accent); color: var(--luvit-color-accent); }
.sb-play:focus-visible, .sb-chap:focus-visible { outline: 2px solid var(--luvit-color-accent); outline-offset: 2px; }
.sb-play svg { width: 14px; height: 14px; }
.sb-chaps { flex: 1; min-width: 0; display: flex; gap: 6px; }
.sb-chap { min-width: 0; background: none; border: 0; padding: 0; color: var(--luvit-color-text-muted); text-align: left; display: grid; gap: 7px; font: inherit; font-size: 13px; }
.sb-chap span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-chap.is-on { color: var(--luvit-color-text); font-weight: 600; }
.sb-chap i { display: block; height: 4px; border-radius: 2px; background: var(--luvit-color-border); overflow: hidden; }
.sb-chap i b { display: block; height: 100%; width: 0; background: var(--luvit-color-accent); }
.sb-tc { flex: none; font-family: var(--f-mono); font-size: 12px; color: var(--luvit-color-text-muted); font-variant-numeric: tabular-nums; }
.sb-note { margin: 0; color: var(--luvit-color-text-muted); font-size: 12px; }

/* Узкая колонка (десктоп в 2 колонки, планшет, телефон): длинные подписи
   внутри сцены становятся нечитаемыми — выносим их под сцену. */
@container luvit-sb (max-width: 760px) {
    .sb-subcap { display: block; }
    .sb-p { display: none; }
    .sb-h { font-size: 4.2cqw; }
    .sb-chips span { font-size: 1.4cqw; }
}
@container luvit-sb (max-width: 520px) {
    .sb-stage { border-radius: 14px; }
    .sb-stamp { display: none; }
    .sb-tag { font-size: 1.5cqw; }
    .sb-tag .sb-heart { width: 2.2cqw; }
    .sb-ctrl { gap: 10px; }
    .sb-chaps { gap: 4px; }
    .sb-chap { font-size: 11px; gap: 5px; }
    .sb-tc { display: none; }
    .sb-subcap { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .sb-scene *, .sb-scene *::after { animation-duration: .01s !important; animation-delay: 0s !important; transition-duration: .01s !important; transition-delay: 0s !important; }
}