/* Блок 3: интерактивное окно Rewind. Вид строго по docs/VID-PROGRAMMY.md (0.17.1): значения из Theme.
   Окно рисуется в «родном» размере 1500×940 и масштабируется под колонку (transform: scale), поэтому все числа токенов
   (заголовок 28/700, текст 13, кнопка 34, угол кадра 10, окно клипа 14…) стоят как в программе. */
.tour { padding: clamp(30px, 4vw, 60px) 0 clamp(60px, 7vw, 110px); overflow: clip; }
.tour-grid { display: grid; grid-template-columns: minmax(280px, 3fr) 9fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.tour-txt { display: grid; gap: 22px; align-content: start; }
.steps3 { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 12px; }
.steps3 li { display: grid; grid-template-columns: 38px 1fr; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 14px; border: 1px solid #a281ff33; color: var(--t2); transition: background .3s, border-color .3s, color .3s; }
.steps3 b { display: block; font-size: 18px; color: inherit; font-weight: 600; } .steps3 i { display: block; font-style: normal; font-size: 15px; margin-top: 2px; color: #b9b4c8; }
.zn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; background: #7c50f92e; color: #cdbcff; border: 1px solid #a281ff55; transition: background .3s, color .3s; }
.steps3 li.on { color: #fff; background: linear-gradient(180deg, #4a2bb8cc, #2c1678cc); border-color: #a281ffcc; box-shadow: 0 14px 40px -14px #7c50f9; }
.steps3 li.on .zn { background: #fff; color: #5d34d6; } .steps3 li.done .zn { background: #9b72ff; color: #0a0d14; }

.tour-win { min-width: 0; }
.appfit { position: relative; width: 100%; aspect-ratio: 1500 / 940; }
.app { --s0: #000; --s1: #0a0b0e; --s2: #181b22; --s3: #22262f; --line: #222731; --line2: #2e3441; --t1: #eaedf3; --t2: #a6adbb; --t3: #8a92a4; --ac: #9b72ff; --on: #0a0d14; --mo: #ffb547; --danger: #ff4d5e;
  position: absolute; left: 0; top: 0; width: 1500px; height: 940px; transform-origin: 0 0; transform: scale(var(--k, .7)); background: var(--s0); border: 1px solid var(--line2); border-radius: 8px; overflow: hidden;
  font: 400 13px/1.4 "Onest", sans-serif; color: var(--t1); box-shadow: 0 60px 140px -50px #7c50f9aa; }
.app * { box-sizing: border-box; } .app .ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.17; stroke-linecap: round; stroke-linejoin: round; }
:where(.app button) { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
.a-sp { flex: 1; }
.glow { position: absolute; left: 50%; top: 52%; width: 1100px; height: 1100px; translate: -50% -50%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, #9b72ff29 0%, #9b72ff0f 35%, transparent 65%); animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .55; transform: scale(1.08); } }

.a-top { position: absolute; left: 0; right: 0; top: 0; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 16px; font-size: 12px; color: var(--t2); z-index: 1; }
.a-logo { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(180deg, #a281ff, #7c50f9); color: #fff; } .a-logo .ic { width: 15px; height: 15px; }
.a-rec { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; } .a-rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.a-key { height: 26px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line2); border-radius: 8px; font: 500 12px "Martian Mono", monospace; color: var(--t1); } .a-key b { font-weight: 500; }
.a-ib { width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 8px; color: var(--t2); } .a-ib.sq { width: 36px; height: 36px; }
.a-ava { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #7c50f9, #2a1d66); }

.a-rail { position: absolute; left: 0; top: 40px; bottom: 0; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 0 14px; z-index: 1; }
.a-rail span { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--t2); } .a-rail span.on { background: #9b72ff29; color: #fff; box-shadow: inset 0 0 0 1px #9b72ff66; } .a-rail .ic { width: 18px; height: 18px; } .a-rail .a-sp { background: none; }

.a-sheet { position: absolute; left: 64px; top: 40px; right: 8px; bottom: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 20px 26px; overflow: hidden; z-index: 1; }
.a-head { display: flex; align-items: center; gap: 10px; height: 40px; } .a-head h3 { margin: 0; font-size: 28px; line-height: 40px; font-weight: 700; letter-spacing: -.01em; }
.a-search { width: 300px; height: 36px; display: inline-flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 8px; background: var(--s2); border: 1px solid var(--line); color: var(--t3); }
.a-filters { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.fcap { height: 32px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--line2); color: var(--t2); font-size: 13px; } .fcap em { font-style: normal; color: var(--t3); font-family: "Martian Mono", monospace; font-size: 11px; }
.fcap.on { background: #9b72ff29; border-color: #9b72ff8c; color: #fff; } .fcap.on em { color: #cdbcff; } .fcap-sep { width: 1px; height: 22px; background: var(--line2); margin: 0 6px; }
.a-day { display: flex; align-items: baseline; gap: 12px; margin-top: 26px; } .a-day b { font-size: 20px; font-weight: 700; } .a-day span { color: var(--t3); } .a-day em { font-style: normal; color: var(--t3); }
.a-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 22px; margin-top: 14px; }
.mc { display: grid; gap: 8px; text-align: left; padding: 0 0 10px; border-radius: 12px; transition: background .18s; }
.mc:hover, .mc:focus-visible { background: var(--s2); outline: none; }
.mc-frame { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); } .mc-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-dur { position: absolute; right: 8px; bottom: 8px; padding: 3px 8px; border-radius: 4px; background: #0b0d12d9; color: #fff; font: 500 12px "Martian Mono", monospace; }
.mc-flag { position: absolute; left: 8px; bottom: 8px; width: 24px; height: 24px; border-radius: 4px; display: grid; place-items: center; background: #0b0d12d9; color: var(--mo); }
.mc-act { position: absolute; right: 8px; top: 8px; display: flex; gap: 6px; opacity: 0; transition: opacity .18s; } .mc:hover .mc-act { opacity: 1; }
.mc-act i { width: 28px; height: 28px; border-radius: 4px; display: grid; place-items: center; background: #0b0d12d9; color: #fff; font-style: normal; }
.mc-title { padding: 0 10px; font-size: 15px; font-weight: 600; } .mc-sub { display: flex; justify-content: space-between; padding: 0 10px; color: var(--t2); font-size: 13px; } .mc-sub span:first-child { display: inline-flex; align-items: center; gap: 6px; } .mc-time { color: var(--t3); font-family: "Martian Mono", monospace; font-size: 12px; }
.a-hand { position: absolute; left: 148px; top: 342px; padding: 9px 16px; border-radius: 20px; background: #9b72ff; color: var(--on); font-weight: 600; pointer-events: none; animation: hand 1.8s ease-in-out infinite; z-index: 2; box-shadow: 0 10px 30px -8px #9b72ff; }
@keyframes hand { 50% { translate: 0 8px; } }

/* окно клипа поверх */
.a-scrim { position: absolute; inset: 0; background: #000000b8; opacity: 0; pointer-events: none; transition: opacity .26s ease; z-index: 3; }
.a-clip { position: absolute; left: 30px; top: 56px; right: 30px; bottom: 30px; border: 1px solid var(--line2); border-radius: 14px; background: var(--s0); z-index: 4; display: grid; grid-template-columns: 1fr 328px; overflow: hidden; box-shadow: 0 30px 80px #000c;
  opacity: 0; transform: scale(.97) translateY(8px); transition: opacity .26s ease, transform .26s var(--ease); }
.a-clip[hidden] { display: none; } .app[data-view="clip"] .a-scrim { opacity: 1; pointer-events: auto; } .app[data-view="clip"] .a-clip { opacity: 1; transform: none; }
.c-main { padding: 0 16px 14px; display: flex; flex-direction: column; min-width: 0; } .c-top { height: 76px; display: flex; align-items: center; gap: 8px; padding: 0 4px; } .c-top h4 { margin: 0; font-size: 18px; font-weight: 600; } .pen { color: var(--t3); }
.c-share { height: 34px; padding: 0 14px; border-radius: 8px; display: inline-flex; align-items: center; gap: 7px; background: var(--ac); color: var(--on); font-weight: 600; box-shadow: 0 8px 24px -10px var(--ac); transition: transform .11s, filter .11s; } .c-share:hover { background: #b393ff; } .c-share:active { transform: scale(.97); }
.c-ed { height: 34px; padding: 0 14px; border-radius: 8px; display: inline-flex; align-items: center; gap: 7px; background: var(--s2); color: var(--t1); } .c-sep { width: 1px; height: 22px; background: var(--line2); margin: 0 6px; }
.c-video { position: relative; flex: 1; min-height: 0; border-radius: 10px; overflow: hidden; background: #000; } .c-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-bigplay { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #000000a0; color: #fff; transition: opacity .2s; } .c-bigplay .ic { width: 26px; height: 26px; } .c-video.playing .c-bigplay { opacity: 0; }
.c-bar { height: 14px; display: flex; align-items: center; margin-top: 10px; } .c-bar { position: relative; } .c-bar::before { content: ""; position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--line2); } .c-bar i { position: relative; height: 4px; border-radius: 2px; background: var(--ac); width: 0; }
.c-ctl { display: flex; align-items: center; gap: 12px; margin-top: 8px; color: var(--t2); } .c-play { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--ac); color: var(--on); } .c-play .ic { width: 18px; height: 18px; }
.c-nav { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: var(--t1); } .c-nav:hover { background: var(--s3); } .c-t { font: 500 13px "Martian Mono", monospace; color: var(--t3); } .c-t b { color: var(--t1); font-weight: 500; }
.c-vol { width: 80px; height: 4px; border-radius: 2px; background: var(--line2); position: relative; } .c-vol i { position: absolute; left: 0; top: 0; bottom: 0; width: 18%; border-radius: 2px; background: var(--ac); }
.c-side { border-left: 1px solid var(--line); padding: 0 12px 16px; overflow: hidden; } .c-sh { height: 76px; display: flex; align-items: center; color: var(--t2); } .c-x { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: var(--t1); } .c-x:hover { background: var(--s3); }
.c-side h5 { margin: 0 0 12px; font-size: 14px; font-weight: 700; } .c-share-box { padding: 14px 0 16px; border-bottom: 1px solid var(--line); margin-bottom: 14px; } .c-share-box[hidden], .c-sending[hidden], .c-ready[hidden] { display: none; }
.c-sending { display: grid; gap: 10px; color: var(--t2); } .c-pb { height: 4px; border-radius: 2px; background: var(--line2); overflow: hidden; } .c-pb i { display: block; height: 100%; width: 0; background: var(--ac); } .c-cancel { justify-self: start; height: 30px; padding: 0 12px; border-radius: 8px; background: var(--s2); }
.c-link { display: flex; height: 36px; border-radius: 8px; background: var(--s2); border: 1px solid var(--line); overflow: hidden; } .c-link span { flex: 1; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--t2); white-space: nowrap; overflow: hidden; } .c-link button { display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; background: var(--s3); color: var(--t1); } .c-link em { font-style: normal; }
.c-row { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--t2); } .c-row.dim { color: var(--t3); } .c-row span:first-child { min-width: 118px; } .c-row b { font-weight: 500; color: var(--t1); } .chg { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; color: var(--t2); }
.c-del { display: flex; gap: 8px; align-items: center; margin: 16px 0 0; color: #ff7a88; }
.c-about p { display: flex; gap: 12px; margin: 0 0 10px; } .c-about span { width: 70px; color: var(--t2); flex: none; } .c-about b { font-weight: 500; color: var(--t1); } .c-about em { font-style: normal; }

@media (max-width: 900px) { .tour-grid { grid-template-columns: 1fr; } }
.calm .glow, .calm .a-hand { animation: none; } .calm .app, .calm .a-clip, .calm .a-scrim { transition: none; }

/* правки по сверке с кадрами 0.17.1 */
.c-like { height: 34px; padding: 0 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 7px; background: var(--s2); color: var(--t2); } .c-like em { font-style: normal; font-family: "Martian Mono", monospace; font-size: 12px; color: var(--t1); }
.a-pause { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--t2); } .a-pause .ic { width: 14px; height: 14px; }
.a-win { display: inline-flex; gap: 22px; margin-left: 14px; color: var(--t2); } .a-win .ic { width: 14px; height: 14px; }
.a-key .ic { width: 14px; height: 14px; }
.a-rail span.on { box-shadow: none; background: #9b72ff29; }
.mc:hover, .mc:focus-visible { background: var(--s2); box-shadow: 0 0 0 8px var(--s2); }
.mc:hover .mc-frame { transform: scale(.98); } .mc-frame { transition: transform .18s var(--ease); }
.mc-title { display: flex; align-items: center; gap: 8px; } .mc-title u { width: 7px; height: 7px; border-radius: 50%; background: var(--ac); flex: none; }
.mc-sub .gi { color: #8f87ff; }
.c-main { position: relative; } .a-clip { position: absolute; }
.c-arr { position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #000000b8; border: 1px solid var(--line2); color: #fff; z-index: 2; transition: background .18s; } .c-arr:hover { background: #22262f; }
.c-arr.l { left: -62px; } .c-arr.r { position: absolute; right: -62px; left: auto; top: 50%; }
.a-clip { left: 76px; right: 76px; overflow: visible; }
.c-main { border-radius: 14px 0 0 14px; overflow: visible; } .c-side { border-radius: 0 14px 14px 0; background: var(--s0); }

.c-top h4 { font-size: 17px; }
.c-side h5 { font-size: 15px; }
.c-bar { height: 22px; margin: 0; background: #0a0b0e; position: relative; } .c-bar i::after { content: ""; position: absolute; right: -6px; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.c-ctl { background: #0a0b0e; border-radius: 0 0 10px 10px; padding: 4px 8px 8px; margin-top: 0; }
.c-video { border-radius: 10px 10px 0 0; }
.c-vol i::after { content: ""; position: absolute; right: -6px; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.c-cancel { background: none !important; padding: 0 !important; height: auto !important; color: var(--t2); text-decoration: underline; text-underline-offset: 3px; }
.c-pb { height: 6px; }
.c-share.busy { background: var(--t1); color: var(--on); box-shadow: none; }
.c-del { color: var(--danger); }
.c-comm { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; } .c-comm h5 { display: flex; justify-content: space-between; } .c-comm em { font-style: normal; font-family: "Martian Mono", monospace; font-size: 12px; color: var(--t3); }
.c-lock { display: flex; gap: 8px; align-items: center; color: var(--t3); margin: 0 0 8px; } .c-none { color: var(--t3); margin: 0; }
.c-sh { border-bottom: 1px solid var(--line); }

.a-clip { grid-template-columns: 1fr 328px; } .a-clip > .c-arr.r { position: absolute; }

/* лайк и комментарии только когда ссылка готова; поле ссылки с многоточием */
.c-like, .c-comm { display: none; } .app.shared .c-like { display: inline-flex; } .app.shared .c-comm { display: block; }
.c-link span { text-overflow: ellipsis; } .c-about b { font-weight: 400; } .c-cancel { text-decoration: none !important; } .c-pb { margin-top: 6px; }
.c-nav2 { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: var(--t1); } .c-nav2:hover { background: var(--s3); }
.mc-frame::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--seen, 0%); background: var(--ac); }
.mc:nth-child(1) { --seen: 100%; } .mc:nth-child(4) { --seen: 40%; }
.mc-title .pen2 { color: var(--t3); margin-left: auto; opacity: 0; } .mc:hover .pen2 { opacity: 1; } .mc-title .pen2 .ic { width: 14px; height: 14px; }

/* Блок 3: заголовок и шаги в одну строку сверху, окно под ними на всю ширину (своя раскладка) */
.tour { padding: clamp(60px, 6vw, 110px) 0; }
.tour-top { grid-template-columns: 1fr; gap: clamp(22px, 2.4vw, 40px); align-items: start; }
.tour-top .tour-txt { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 20px clamp(24px, 4vw, 80px); align-items: end; }
.tour-top h2 { font-size: clamp(28px, 2.8vw, 52px); } .tour-top .lead { grid-column: 1; margin-top: -8px; font-size: clamp(16px, 1.2vw, 22px); }
.tour-top .steps3 { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: repeat(3, 1fr); margin: 0; }
@media (max-width: 900px) { .tour-top .tour-txt { grid-template-columns: 1fr; } .tour-top .steps3 { grid-column: 1; grid-row: auto; grid-template-columns: 1fr; } }