/* «Як працює» — історія з шести кроків (overhaul/HowScenes_2026-10-05.md).
   Три режими однієї розмітки:
     без класу      — без JS або з prefers-reduced-motion: нумерований список,
                      предмети в кінцевому стані (--hiw-t за замовч. 1);
     .is-pin        — десктоп: липка сцена, прокрутка = плейхед;
     .is-flow       — телефон: кожен крок своя сцена, програється від проходу
                      крізь екран; згори липка міні-рейка.
   Кольори: бурштин — бренд, дія людини, «готово/опубліковано»;
   фіолетовий — AI, «працює/живе/підключено»; пунктир без світла — «ще ні».
   Анімуємо лише transform, opacity, clip-path, filter.
   Усі змінні з префіксом --hiw- (grep по frontend/ чистий, 2026-10-05). */

.hiw, .hiw-hero{
  --hiw-amber:#f0a500; --hiw-amber-hi:#ffc861; --hiw-amber-ink:#17140c;
  --hiw-vio:#7c5cff; --hiw-vio-2:#b14bd8; --hiw-vio-ink:#a892ff;
  --hiw-glass:linear-gradient(160deg, rgba(40,34,28,.94), rgba(17,14,11,.96));
  --hiw-hair:rgba(255,255,255,.08);
  --hiw-hair-2:rgba(255,255,255,.13);
  --hiw-text:#f6f4f1; --hiw-dim:#b3aea7; --hiw-mute:#8a857f;
  --hiw-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 30px 70px -28px rgba(0,0,0,.85), 0 8px 20px -10px rgba(0,0,0,.6);
  --hiw-ease:cubic-bezier(.32,.72,0,1);
  --hiw-expo:cubic-bezier(.16,1,.3,1);
}

/* ═══ ГЕРОЙ ═══════════════════════════════════════════════════════════ */
.hiw-hero{ padding:96px 0 40px; overflow:clip }
.hiw-hero-in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,520px); gap:48px; align-items:center }
.hiw-hero h1, .hero.hiw-hero:not(.hero-sub) h1{ font-size:clamp(1.8rem,.8rem + 2.5vw,2.9rem); overflow-wrap:break-word; line-height:1.06; letter-spacing:-.03em; font-weight:300; max-width:21ch; margin:0 0 20px }
.hiw-hero .lede{ max-width:52ch }
.hiw-hint{ display:inline-flex; align-items:center; gap:10px; margin-top:30px; padding:10px 16px 10px 18px;
  border-radius:999px; color:var(--fg); text-decoration:none; font-size:14px; font-weight:600;
  background:color-mix(in srgb, var(--fg) 6%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--fg) 14%, transparent) }
.hiw-hint svg{ color:var(--hiw-amber) }
.hiw-hint:hover{ background:color-mix(in srgb, var(--fg) 10%, transparent) }
@media (prefers-reduced-motion:no-preference){
  .hiw-hint svg{ animation:hiw-nudge 2.4s var(--hiw-ease) infinite }
}
@keyframes hiw-nudge{ 0%,60%,100%{ transform:none } 30%{ transform:translateY(4px) } }

/* Орбіта героя переїхала в galaxy.css/galaxy.js (H7, 2026-10-05). */

/* ═══ ІСТОРІЯ: спільні предмети ═════════════════════════════════════ */
/* The story is a dark stage in either theme: its objects are drawn for Studio Noir. */
.hiw{ position:relative; padding:40px 0 112px; border-top:0 !important; color:var(--hiw-text); background-color:#110f0c;
  background-image:
    radial-gradient(60% 40% at 85% 20%, rgba(124,92,255,.10), transparent 70%),
    radial-gradient(50% 40% at 10% 85%, rgba(240,165,0,.07), transparent 70%) }
.hiw-stage{ position:relative; max-width:1320px; margin:0 auto; padding:0 24px }
.hiw-steps{ list-style:none; margin:0; padding:0 }
.hiw-amb, .hiw-rail, .hiw-deck{ display:none }

/* Раскрой за --hiw-t (0…1, на кожен крок ставить скрипт; без нього — 1). */
.hiw-step{ --hiw-t:1 }
.hk{ --hiw-p:clamp(0, (var(--hiw-t) - var(--hiw-a, 0)) / var(--hiw-d, .1), 1);
  --hiw-e:calc(var(--hiw-p) * (2 - var(--hiw-p)));
  opacity:var(--hiw-p); transform:translateY(calc((1 - var(--hiw-e)) * 14px)) }
.htw{ --hiw-q:clamp(0, (var(--hiw-t) - var(--hiw-a, 0)) / var(--hiw-d, .2), 1);
  display:inline-block; clip-path:inset(-2px calc((1 - var(--hiw-q)) * 100%) -2px 0) }

.hiw-txt{ max-width:420px }
.hiw-num{ display:inline-flex; align-items:baseline; gap:6px; font-family:var(--mono, ui-monospace, monospace);
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--hiw-mute) }
.hiw-num b{ font-weight:600; color:var(--hiw-text); font-size:13px }
.hiw-num i{ font-style:normal }
.hiw-txt h3{ font-size:clamp(28px,2.9vw,42px); line-height:1.06; letter-spacing:-.015em; margin:14px 0 14px; color:var(--hiw-text) }
.hiw-txt p{ margin:0; color:var(--hiw-dim); font-size:16.5px; line-height:1.6; max-width:40ch }
.hiw-who{ display:inline-flex; align-items:center; gap:8px; margin-top:22px; padding:7px 13px 7px 11px; border-radius:999px;
  font-size:12.5px; font-weight:600; color:var(--hiw-text); background:rgba(255,255,255,.04) }
.hiw-who::before{ content:""; width:8px; height:8px; border-radius:50% }
.hiw-who[data-k="you"]{ box-shadow:inset 0 0 0 1px rgba(240,165,0,.45) }
.hiw-who[data-k="you"]::before{ background:var(--hiw-amber); box-shadow:0 0 10px var(--hiw-amber) }
.hiw-who[data-k="sys"]{ box-shadow:inset 0 0 0 1px rgba(124,92,255,.5) }
.hiw-who[data-k="sys"]::before{ background:var(--hiw-vio); box-shadow:0 0 10px var(--hiw-vio) }
.hiw-who[data-k="both"]{ background:linear-gradient(var(--hiw-bg-chip, #15110d), var(--hiw-bg-chip, #15110d)) padding-box,
  linear-gradient(90deg, rgba(124,92,255,.7), rgba(240,165,0,.7)) border-box; border:1px solid transparent }
.hiw-who[data-k="both"]::before{ background:linear-gradient(135deg, var(--hiw-vio), var(--hiw-amber)) }

/* Майданчик кроку: скло, обідок, світло знизу. */
.hiw-set{ position:relative; border-radius:28px; padding:26px 26px 156px; min-height:560px;
  background:var(--hiw-glass); box-shadow:var(--hiw-shadow), inset 0 0 0 1px var(--hiw-hair);
  isolation:isolate; color:var(--hiw-text); font-size:13px }
.hiw-set::before{ content:""; position:absolute; inset:auto 0 0; height:46%; border-radius:0 0 28px 28px; z-index:-1;
  background:radial-gradient(80% 90% at 30% 120%, rgba(124,92,255,.20), transparent 70%),
             radial-gradient(60% 80% at 85% 130%, rgba(240,165,0,.14), transparent 70%) }
.o-cap{ display:block; font-family:var(--mono, ui-monospace, monospace); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--hiw-mute); margin-bottom:10px }
.o-ok{ --hiw-o:var(--hiw-p, 1); width:18px; height:18px; flex:none; border-radius:50%; display:inline-grid; place-items:center;
  background:var(--hiw-amber); box-shadow:0 0 12px rgba(240,165,0,.5);
  transform:scale(var(--hiw-o)); opacity:var(--hiw-o) }
.o-ok::after{ content:""; width:7px; height:4px; border:2px solid var(--hiw-amber-ink); border-top:0; border-right:0;
  transform:translateY(-1px) rotate(-45deg) }
.o-wait{ width:18px; height:18px; flex:none; border-radius:50%; box-shadow:inset 0 0 0 2px rgba(124,92,255,.65);
  background:radial-gradient(circle, var(--hiw-vio) 0 3px, transparent 4px) }
.o-soon{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:11.5px;
  color:var(--hiw-dim); border:1px dashed rgba(255,255,255,.28); background:transparent }
.o-net{ width:18px; height:18px; display:inline-grid; place-items:center; color:currentColor }
.o-net svg{ width:100%; height:100%; fill:currentColor }
.o-net svg[fill="none"]{ fill:none }
svg path{ vector-effect:non-scaling-stroke }

/* Герой-актор: зона внизу ліворуч, ім'я з роллю, репліка. */
.hiw-actor{ position:absolute; left:22px; bottom:16px; width:128px; z-index:5; pointer-events:none }
.hiw-mc{ display:block; width:116px; height:116px; margin:0 auto; transform-origin:50% 92% }
.hiw-mc img, .hiw-mc svg{ display:block; width:100%; height:100%; overflow:visible }
.hiw-tag{ display:flex; flex-direction:column; align-items:center; margin-top:2px; font-size:10.5px; color:var(--hiw-mute);
  font-family:var(--mono, ui-monospace, monospace); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap }
.hiw-tag b{ font-family:var(--serif); font-weight:400; text-transform:none; letter-spacing:0; font-size:15px; color:var(--hiw-text) }
.hiw-say{ position:absolute; left:122px; bottom:72px; width:max-content; max-width:min(250px, calc(100vw - 210px));
  padding:10px 13px; border-radius:14px 14px 14px 4px; font-size:13px; line-height:1.4; color:var(--hiw-text);
  background:rgba(30,25,20,.96); box-shadow:inset 0 0 0 1px var(--hiw-hair-2), 0 14px 30px -14px #000 }
.hiw-glow{ position:absolute; left:50%; top:46px; width:190px; height:190px; margin:-95px 0 0 -95px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,200,97,.55), rgba(240,165,0,.12) 45%, transparent 70%); opacity:.25; z-index:-1 }

.hiw-cursor{ position:absolute; left:0; top:0; width:26px; height:26px; z-index:8; opacity:0; color:#fff;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.6)) }
.hiw-cursor svg{ width:100%; height:100%; fill:#fff; stroke:#17140c; stroke-width:1.4 }

/* ── 1 · Бренд ── (кремова плитка товару, справжні свотчі й мініатюри з того ж набору фото) */
.o1-url{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px;
  background:rgba(0,0,0,.28); box-shadow:inset 0 0 0 1px var(--hiw-hair-2); font-family:var(--mono, ui-monospace, monospace); font-size:13px }
.o1-url svg{ width:16px; height:16px; fill:none; stroke:var(--hiw-vio-ink); stroke-width:1.8; stroke-linecap:round }
.o1-typed{ position:relative; color:var(--hiw-text) }
.hiw-set[data-obj="hw-brief"]{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); grid-auto-rows:min-content; gap:14px; align-content:start }
.o1-url{ grid-column:1 / -1 }
.o1-prod{ position:relative; display:flex; flex-direction:column; gap:10px; padding:12px; border-radius:16px; background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px var(--hiw-hair); transform-origin:50% 0 }
.o1-pimg{ aspect-ratio:1/1; border-radius:12px }
.o1-pimg img{ --pk-pz:calc(1.06 - .06 * clamp(0, (var(--hiw-t) - .22) / .2, 1)) }
.o1-ptxt{ display:flex; flex-direction:column; gap:2px }
.o1-ptxt small{ font-size:10.5px; color:var(--hiw-mute); text-transform:uppercase; letter-spacing:.1em; font-family:var(--mono, ui-monospace, monospace) }
.o1-ptxt b{ font-family:var(--serif); font-weight:400; font-size:18px }
.o1-ptxt i{ font-style:normal; color:var(--hiw-dim); font-size:12px }
.o1-pok{ position:absolute; top:18px; right:18px; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; z-index:2;
  background:var(--hiw-amber); box-shadow:0 0 0 3px #1d1812, 0 0 16px rgba(240,165,0,.6) }
.o1-pok svg{ width:14px; fill:none; stroke:var(--hiw-amber-ink); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round }
.o1-kit{ padding:14px 14px 6px; border-radius:16px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--hiw-hair); align-self:start }
.o1-row{ display:grid; grid-template-columns:1fr auto; grid-template-areas:"l ok" "v ok"; gap:3px 10px; align-items:center;
  padding:10px 0; border-top:1px solid var(--hiw-hair) }
.o1-row em{ grid-area:l; font-style:normal; font-size:11px; color:var(--hiw-mute); letter-spacing:.06em; text-transform:uppercase }
.o1-row .o1-v, .o1-row .o1-sw{ grid-area:v; font-size:13px }
.o1-row .o-ok{ grid-area:ok; --hiw-o:clamp(0, (var(--hiw-t) - var(--hiw-a, 0) - .06) / .05, 1) }
/* свотчі — кольори з пекшота й кадрів (чорна шкіра, графіт, камінь, крем) */
.o1-sw{ display:flex; gap:6px }
.o1-sw i{ width:24px; height:24px; border-radius:8px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transform:scale(clamp(0, (var(--hiw-t) - .5 - var(--s) * .035) / .05, 1)) }
.o1-sw i:nth-child(1){ background:#1f1f1f } .o1-sw i:nth-child(2){ background:#3e3e3e }
.o1-sw i:nth-child(3){ background:#afa190 } .o1-sw i:nth-child(4){ background:#ddd2c5 }
.o1-thumbs{ display:flex; gap:5px }
.o1-thumbs i{ position:relative; display:block; overflow:hidden; width:28px; height:40px; border-radius:7px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12) }
.o1-thumbs i img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30% }
.o1-thumbs i.pk-prod{ border-radius:7px } .o1-thumbs i.pk-prod::after{ display:none }
.o1-thumbs i.pk-prod img{ left:8%; right:auto; width:84%; height:auto; bottom:18%; inset:auto auto 18% 8%; object-fit:contain }
.o1-thumbs i:nth-child(2), .o1-thumbs i:nth-child(3){ display:none }
.o1-thumbs i{ transform:scale(clamp(0, (var(--hiw-t) - .62) / .08, 1)) }
.o1-thumbs i:nth-child(4){ transform:scale(clamp(0, (var(--hiw-t) - .66) / .08, 1)) }
.o1-thumbs i:nth-child(5){ transform:scale(clamp(0, (var(--hiw-t) - .7) / .08, 1)) }
.o1-ban{ color:var(--hiw-dim); text-decoration:line-through; text-decoration-color:rgba(240,165,0,.7) }

/* ── 2 · Розкадровка ── (план: плитки-креслення без фото; кадри ще не зняті, рендеру ще не було) */
.hiw-set[data-obj="hw-board"], .hiw-set[data-obj="hw-render"]{ --pk-tw:116px }
.o2-idea{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.o2-idea small{ font-family:var(--mono, ui-monospace, monospace); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--hiw-vio-ink) }
.o2-bulb{ width:10px; height:10px; border-radius:50%; background:var(--hiw-vio); box-shadow:0 0 14px var(--hiw-vio) }
.o2-t{ font-family:var(--serif); font-size:20px; flex-basis:100% }
.o2-frames{ margin:16px 0 0 }
.o2-frames .pk-shot{ --pk-p:clamp(0, (var(--hiw-t) - var(--pa)) / .16, 1); --pk-e:calc(var(--pk-p) * (2 - var(--pk-p)));
  opacity:var(--pk-p); transform:translateY(calc((1 - var(--pk-e)) * 26px)) scale(calc(.94 + .06 * var(--pk-e))) }
.o2-frames .pk-shot:nth-child(1){ --pa:.14 } .o2-frames .pk-shot:nth-child(2){ --pa:.19 }
.o2-frames .pk-shot:nth-child(3){ --pa:.24 } .o2-frames .pk-shot:nth-child(4){ --pa:.29 }
/* затвердили ви: бурштинова обвідка на кожному кадрі (дія людини) */
.o2-frames .pk-in::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 2px var(--hiw-amber); opacity:var(--hiw-ok, 1) }
.o2-caps{ position:relative; margin:4px 0 0 }
.o2-ruler{ position:absolute; left:0; right:0; top:0; height:1.5px; background:rgba(255,255,255,.18); transform-origin:0 50%;
  transform:scaleX(clamp(0, (var(--hiw-t) - .44) / .18, 1)) }
.o2-caps .pk-cap{ --pk-p:clamp(0, (var(--hiw-t) - var(--pa)) / .1, 1); opacity:var(--pk-p); transform:translateY(calc((1 - var(--pk-p)) * 8px)) }
.o2-caps .pk-cap:nth-of-type(1){ --pa:.5 } .o2-caps .pk-cap:nth-of-type(2){ --pa:.54 }
.o2-caps .pk-cap:nth-of-type(3){ --pa:.58 } .o2-caps .pk-cap:nth-of-type(4){ --pa:.62 }
.o2-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; color:var(--hiw-dim); margin-top:12px }
.o2-btns{ display:flex; gap:10px; margin-top:12px }
.o2-ok, .o2-no, .o6-send{ position:relative; overflow:hidden; display:inline-flex; align-items:center; padding:10px 16px; border-radius:10px; font-weight:600; font-size:13px }
.o2-ok, .o6-send{ background:var(--hiw-amber); color:var(--hiw-amber-ink); box-shadow:0 10px 24px -12px rgba(240,165,0,.8) }
.o2-no{ background:rgba(255,255,255,.06); color:var(--hiw-text) }
.o2-rip{ position:absolute; left:50%; top:50%; width:120px; height:120px; margin:-60px; border-radius:50%;
  background:rgba(255,255,255,.55); transform:scale(0); opacity:0 }
.o2-stamp{ position:absolute; right:26px; top:26px; display:inline-flex; align-items:center; gap:7px; padding:7px 12px 7px 9px; border-radius:999px;
  background:rgba(240,165,0,.14); color:var(--hiw-amber-hi); font-weight:600; font-size:12.5px;
  box-shadow:inset 0 0 0 1px rgba(240,165,0,.55); opacity:var(--hiw-stamp, 1); transform:scale(calc(.8 + .2 * var(--hiw-stamp, 1))) rotate(-3deg) }
.o2-stamp svg, .o4-ready svg{ width:15px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round }

/* ── 3 · Кадри, голос і субтитри ── (кадри проявляються сканером → стискаються в кліпи доріжки → телефон) */
.hiw-set[data-obj="hw-render"]{ display:flex; flex-direction:column; justify-content:center }
.o3-stage{ position:relative }
.o3-rnd{ --pk-pw:208px; display:grid; grid-template-columns:minmax(0,1fr) var(--pk-pw); grid-template-areas:"top phone" "trk phone";
  grid-template-rows:auto 1fr; gap:20px 24px; align-items:start }
.o3-top{ grid-area:top; display:flex; align-items:center; gap:14px }
.o3-chip{ width:46px; height:58px; flex:none; border-radius:11px }
.o3-chip img{ left:10%; right:10%; width:80%; bottom:16% }
.o3-chip::after{ display:none }
.o3-st{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:10px }
.o3-st .pk-pbar{ width:100%; max-width:300px }
.o3-tracks{ grid-area:trk; align-self:center; position:relative; display:grid; grid-template-columns:54px minmax(0,1fr); gap:12px 10px; align-items:center }
.o3-tl{ font:500 10.5px/1.2 var(--mono, ui-monospace, monospace); font-style:normal; letter-spacing:.1em; text-transform:uppercase; color:var(--hiw-mute) }
.o3-clips{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:4px; height:66px }
.o3-clips i{ position:relative; overflow:hidden; border-radius:8px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08) }
.o3-clips img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 26% }
.o3-wave{ height:34px; display:flex; align-items:center; gap:2px; padding:0 5px; border-radius:8px; overflow:hidden;
  background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05) }
.o3-wave i{ flex:1; min-width:0; height:calc(var(--pk-h, .5) * 100%); border-radius:2px; background:var(--hiw-vio-ink);
  transform:scaleY(var(--pk-g, 1)); opacity:var(--pk-o, 1) }
.o3-words{ height:22px; display:flex; gap:5px }
.o3-words i{ position:relative; height:100%; border-radius:6px; flex:1; background:rgba(255,255,255,.09); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  transform-origin:0 50%; transform:scaleX(var(--pk-w, 1)) }
.o3-words i:nth-child(1){ flex:21 } .o3-words i:nth-child(2){ flex:19 } .o3-words i:nth-child(3){ flex:24 } .o3-words i:nth-child(4){ flex:20 }
.o3-words i::after{ content:""; position:absolute; left:8px; right:30%; top:9px; height:4px; border-radius:2px; background:rgba(255,255,255,.35) }
.o3-lanes{ position:absolute; left:64px; right:0; top:0; bottom:0; pointer-events:none }
.o3-head{ position:absolute; left:0; top:-8px; bottom:-6px; width:0; opacity:var(--pk-ho, 1) }
.o3-head i{ position:absolute; left:-1px; top:0; width:2px; height:100%; background:var(--hiw-amber); box-shadow:0 0 12px rgba(240,165,0,.6) }
.o3-head::before{ content:""; position:absolute; left:-6px; top:-5px; width:12px; height:12px; border-radius:4px 4px 7px 7px; background:var(--hiw-amber) }
.o3-phone{ grid-area:phone; align-self:start }
.o3-pre{ position:absolute; left:0; right:0; top:0; display:flex; flex-direction:column; gap:6px; pointer-events:none }
.o3-bcaps{ position:relative; margin-top:2px }
.o3-bcaps::before{ content:""; position:absolute; left:0; right:0; top:0; height:1.5px; background:rgba(255,255,255,.16) }

/* ── 4 · Текст і факти ── */
.o4-cards{ position:relative; height:290px; margin-top:74px }
.o4-c{ position:absolute; left:4%; right:4%; top:0; padding:18px 18px 20px; border-radius:16px; display:flex; flex-direction:column; gap:9px;
  background:linear-gradient(160deg, #2b241d, #1b1612); box-shadow:inset 0 0 0 1px var(--hiw-hair-2), 0 24px 40px -20px #000;
  transform-origin:50% 100% }
.o4-c[data-net="li"]{ transform:translateY(-64px) scale(.88) }
.o4-c[data-net="li"], .o4-c[data-net="fb"]{ transform-origin:50% 0; padding-top:10px; background:linear-gradient(160deg, #332a22, #1f1914) }
.o4-c[data-net="fb"]{ transform:translateY(-32px) scale(.94) }
.o4-h{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:13px; color:var(--hiw-text) }
.o4-h .o-net{ color:var(--hiw-vio-ink) }
.o4-l{ display:block; height:9px; width:var(--hiw-w); border-radius:4px; background:rgba(255,255,255,.14) }
.o4-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.o4-tok{ position:relative; display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:7px; font-size:12.5px; font-weight:600 }
.o4-fact{ background:rgba(240,165,0,.12); color:var(--hiw-amber-hi); box-shadow:inset 0 0 0 1px rgba(240,165,0,calc(.15 + .5 * var(--hiw-fk, 1))) }
.o4-fact .o-ok{ --hiw-o:var(--hiw-fk, 1); width:15px; height:15px }
.o4-flag{ color:var(--hiw-text); background:rgba(255,255,255,.07); opacity:calc(1 - .55 * var(--hiw-cut, 1)) }
.o4-strike{ position:absolute; left:4px; right:4px; top:50%; height:2px; background:var(--hiw-amber); transform-origin:0 50%;
  transform:scaleX(var(--hiw-cut, 1)) }
.o4-notes{ display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:4px; font-size:11.5px }
.o4-nf{ display:inline-flex; align-items:center; gap:6px; color:var(--hiw-amber-hi); opacity:var(--hiw-fk, 1) }
.o4-nf .o-ok{ --hiw-o:1; width:13px; height:13px }
.o4-nc{ color:var(--hiw-dim); opacity:var(--hiw-cut, 1) }
.o4-nc::before{ content:"— " }
.o4-ready{ position:absolute; right:30px; bottom:176px; display:inline-flex; align-items:center; gap:7px; padding:7px 12px 7px 9px; border-radius:999px;
  background:var(--hiw-amber); color:var(--hiw-amber-ink); font-weight:600; font-size:12.5px; box-shadow:0 10px 24px -10px rgba(240,165,0,.8);
  opacity:var(--hiw-rd, 1); transform:scale(calc(.85 + .15 * var(--hiw-rd, 1))) }
.o4-lens{ position:absolute; left:0; top:0; width:74px; height:74px; border-radius:50%; opacity:0; z-index:6;
  box-shadow:inset 0 0 0 3px rgba(255,200,97,.85), 0 0 0 1px rgba(0,0,0,.4), 0 0 30px rgba(240,165,0,.35);
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.16), rgba(255,255,255,.03) 60%) }

/* ── 5 · Публікація ── */
.hiw-set[data-obj="hw-queue"]{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); grid-template-rows:auto 1fr; gap:14px 18px; align-items:start }
.o5-q{ grid-column:1; grid-row:1 }
.o5-sys{ grid-column:2; grid-row:1 / 3 }
.o5-q{ padding:14px 14px 6px; border-radius:16px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--hiw-hair) }
.o5-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--hiw-hair) }
.o5-th{ width:30px; height:40px; flex:none; border-radius:7px; overflow:hidden; background:#221c16 }
.o5-th img{ width:100%; height:100%; display:block; object-fit:cover; object-position:50% 30% }
.o5-rt{ flex:1; min-width:0; display:flex; flex-direction:column }
.o5-rt b{ font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.o5-rt i{ font-style:normal; font-size:11px; color:var(--hiw-mute) }
.o5-row .o-ok{ --hiw-o:var(--hiw-rk, 1) }
/* Publishing hub. Geometry lives in how_scenes.js (HUB): ring square, hub 24%, tiles 15%, R 36%. */
.o5-sys{ position:relative; margin-top:6px; padding-top:44px }
.o5-ring{ position:relative; width:100%; aspect-ratio:1 }
.o5-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none }
.o5-orb{ fill:none; stroke:rgba(124,92,255,.32); stroke-width:.5 }
.o5-ln{ stroke:rgba(150,124,255,.7); stroke-width:.7; stroke-linecap:round }
.o5-dot circle:first-child{ fill:rgba(255,200,97,.35) }
.o5-dot circle:last-child{ fill:#fff3cf }
.o5-dot{ opacity:0 }
.o5-hub{ position:absolute; left:50%; top:50%; width:24%; aspect-ratio:1; margin:-12% 0 0 -12%; display:grid; place-items:center;
  border-radius:50%; background:radial-gradient(circle at 35% 30%, #2c241b, #120f0c 70%);
  box-shadow:0 0 0 1px rgba(240,165,0,.35), 0 0 40px rgba(240,165,0,.3), 0 18px 30px -14px #000; z-index:2 }
.o5-hub svg{ width:66%; height:66%; display:block }
.o5-p{ position:absolute; width:15%; aspect-ratio:1; margin:-7.5% 0 0 -7.5%; z-index:3 }
.o5-pl{ position:absolute; inset:0; border-radius:50%; display:grid; place-items:center;
  color:#fff; background:radial-gradient(circle at 35% 30%, #8f7bff, var(--hiw-vio) 55%, #3a2a8f);
  box-shadow:0 0 0 4px rgba(124,92,255,.18), 0 0 26px rgba(124,92,255,.55) }
.o5-pl .o-net{ width:46%; height:46%; display:grid; place-items:center }
.o5-pl .o-net svg{ width:100%; height:100%; display:block }
.o5-p[data-p="3"] .o-net svg{ transform:scale(.72) }
.o5-pub{ position:absolute; right:-5px; bottom:-5px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  background:var(--hiw-amber); box-shadow:0 0 12px rgba(240,165,0,.7), 0 0 0 2px #15110d; opacity:var(--hiw-pb, 1); transform:scale(var(--hiw-ps, 1)) }
.o5-pub svg{ width:12px; fill:none; stroke:var(--hiw-amber-ink); stroke-width:3; stroke-linecap:round; stroke-linejoin:round }
.o5-p.is-pub .o5-pl{ background:radial-gradient(circle at 35% 30%, #ffd98a, var(--hiw-amber) 55%, #9c6500); color:var(--hiw-amber-ink);
  box-shadow:0 0 0 4px rgba(240,165,0,.16), 0 0 26px rgba(240,165,0,.5) }
/* labels: same type everywhere, 8 px from the tile; top node above, the two lower ones below */
.o5-lb{ position:absolute; left:0; width:100%; display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; pointer-events:none }
.o5-lb b, .o5-lb i{ white-space:nowrap }
.o5-lb b{ font-size:12px; line-height:16px; font-weight:600 }
.o5-lb i{ font-style:normal; font-size:10.5px; line-height:14px; color:var(--hiw-mute) }
.o5-p[data-pos="top"] .o5-lb{ bottom:calc(100% + 8px) }
.o5-p[data-pos="br"] .o5-lb, .o5-p[data-pos="bl"] .o5-lb{ top:calc(100% + 8px) }
/* TikTok: НЕ живий. Пунктир, без заливки, без світіння, без галочки; четвертий слот під кільцем. */
.o5-tt{ display:grid; grid-template-columns:15% auto; justify-content:center; align-items:center; column-gap:12px; margin-top:-7% }
.o5-tt .o5-p{ display:contents }
.o5-tt .o5-pl{ position:relative; inset:auto; width:100%; aspect-ratio:1; background:transparent; color:var(--hiw-mute); box-shadow:none; border:1.5px dashed rgba(255,255,255,.35) }
.o5-tt .o5-pub, .o5-tt .o5-beam{ display:none }
.o5-tt .o5-lb{ position:static; width:auto; align-items:flex-start; gap:4px; text-align:left }
.o5-tt .o5-lb b{ color:var(--hiw-dim); font-weight:600 }
.o5-tt .o5-lb i{ border:1px dashed rgba(255,255,255,.28); border-radius:999px; padding:2px 10px; line-height:14px }
.o5-legend{ grid-column:1; grid-row:2; display:flex; flex-wrap:wrap; gap:8px 14px; padding:4px 4px 0; font-size:10.5px; color:var(--hiw-mute) }
.o5-legend span{ display:inline-flex; align-items:center; gap:5px }
.o5-legend span::before{ content:""; width:8px; height:8px; border-radius:50% }
.o5-legend .lv::before{ background:var(--hiw-vio) }
.o5-legend .pb::before{ background:var(--hiw-amber) }
.o5-legend .sn::before{ border:1px dashed rgba(255,255,255,.5) }

/* ── 6 · Відповіді й тиждень ── */
.o6-chat{ position:relative; display:flex; flex-direction:column; gap:8px }
.o6-b{ max-width:78%; padding:10px 13px; border-radius:16px; font-size:13px; line-height:1.4 }
.o6-in{ align-self:flex-start; display:flex; gap:9px; align-items:flex-start; background:rgba(255,255,255,.06); border-radius:16px 16px 16px 4px }
.o6-av{ width:22px; height:22px; flex:none; border-radius:50%; background:linear-gradient(135deg, #d9cbb6, #8b6b4d) }
.o6-dots{ align-self:flex-end; display:flex; gap:4px; padding:10px 12px; border-radius:14px; background:rgba(124,92,255,.14); opacity:0 }
.o6-dots i{ width:6px; height:6px; border-radius:50%; background:var(--hiw-vio-ink) }
.o6-out{ align-self:flex-end; border-radius:16px 16px 4px 16px; background:rgba(124,92,255,.10);
  box-shadow:inset 0 0 0 1px rgba(124,92,255,.55); position:relative }
.o6-out.is-sent{ background:rgba(240,165,0,.12); box-shadow:inset 0 0 0 1px rgba(240,165,0,.6) }
.o6-tg{ display:grid; margin-bottom:4px; font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-family:var(--mono, ui-monospace, monospace) }
.o6-tg > span{ grid-area:1/1 }
.o6-tg .dr{ color:var(--hiw-vio-ink); opacity:calc(1 - var(--hiw-snt, 1)) }
.o6-tg .sn{ color:var(--hiw-amber-hi); opacity:var(--hiw-snt, 1) }
.o6-send{ align-self:flex-end; padding:7px 13px; font-size:12px }
.o6-meta{ align-self:flex-start; margin-top:2px }
.o6-week{ margin-top:16px; margin-left:auto; width:62%; padding:14px; border-radius:16px; background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px var(--hiw-hair); position:relative }
.o6-bars{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; height:92px; align-items:end }
.o6-bar{ display:flex; flex-direction:column; align-items:center; gap:4px; height:100% }
.o6-bar i{ flex:1; width:100%; border-radius:5px 5px 2px 2px; background:linear-gradient(rgba(168,146,255,.7), rgba(124,92,255,.25));
  transform-origin:50% 100%; transform:scaleY(calc(var(--hiw-hh) * var(--hiw-gr, 1))) }
.o6-bar u{ text-decoration:none; font-size:9.5px; color:var(--hiw-mute) }
.o6-bar:nth-child(1){ --hiw-hh:.34 } .o6-bar:nth-child(2){ --hiw-hh:.5 } .o6-bar:nth-child(3){ --hiw-hh:.42 }
.o6-bar:nth-child(4){ --hiw-hh:.96 } .o6-bar:nth-child(5){ --hiw-hh:.58 } .o6-bar:nth-child(6){ --hiw-hh:.3 } .o6-bar:nth-child(7){ --hiw-hh:.24 }
.o6-bar:nth-child(4) i{ background:linear-gradient(var(--hiw-amber-hi), #c98400); box-shadow:0 0 18px rgba(240,165,0,.35) }
.o6-top{ position:absolute; top:12px; right:14px; font-size:10.5px; font-weight:600; color:var(--hiw-amber-ink); background:var(--hiw-amber);
  padding:2px 7px; border-radius:999px; opacity:var(--hiw-tp, 1) }
.o6-n{ display:flex; align-items:center; gap:8px; margin-top:10px; font-size:12.5px }
.o6-n svg{ width:15px; flex:none; fill:none; stroke:var(--hiw-amber); stroke-width:2; stroke-linecap:round; stroke-linejoin:round }

/* ═══ СТАТИЧНИЙ РЕЖИМ (без JS / reduced motion) ════════════════════ */
.hiw-step{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:56px; align-items:center; padding:56px 0;
  scroll-margin-top:96px }
.hiw-step + .hiw-step{ border-top:1px solid var(--hiw-hair) }
.o3-reel i:last-of-type{ --hiw-fo:1 }
.o6-dots{ display:none }
.hiw:not(.is-pin):not(.is-flow) .hiw-cursor, .hiw:not(.is-pin):not(.is-flow) .o4-lens{ display:none }
.hiw:not(.is-pin):not(.is-flow) .o5-p:not([data-p="4"]){ }
.hiw:not(.is-pin):not(.is-flow) .o5-p:not([data-p="4"]) .o5-pl{ background:radial-gradient(circle at 35% 30%, #ffd98a, var(--hiw-amber) 55%, #9c6500); color:var(--hiw-amber-ink) }
.hiw:not(.is-pin):not(.is-flow) .o6-out{ background:rgba(240,165,0,.12); box-shadow:inset 0 0 0 1px rgba(240,165,0,.6) }

/* ═══ РЕЖИМ .is-pin: липка сцена на десктопі ═════════════════════════ */
.hiw.is-pin{ height:calc(6 * 118vh + 100vh); padding:0 }
.hiw.is-pin .hiw-stage{ position:sticky; top:72px; height:calc(100vh - 72px); max-width:none; padding:0; overflow:clip;
  display:grid; grid-template-columns:minmax(24px,1fr) 176px minmax(300px,380px) minmax(0,640px) minmax(24px,1fr);
  column-gap:clamp(24px,3.4vw,56px); align-items:center }
.hiw.is-pin .hiw-amb{ display:block; position:absolute; inset:0; pointer-events:none }
.hiw-amb i{ position:absolute; border-radius:50%; will-change:opacity }
.hiw-amb .a1{ width:60vw; height:60vw; left:-18vw; bottom:-38vw; background:radial-gradient(circle, rgba(240,165,0,.16), transparent 62%); opacity:var(--hiw-am, .6) }
.hiw-amb .a2{ width:64vw; height:64vw; right:-20vw; top:-30vw; background:radial-gradient(circle, rgba(124,92,255,.20), transparent 62%); opacity:var(--hiw-vi, .6) }

.hiw.is-pin .hiw-rail{ display:block; grid-column:2; grid-row:1; position:relative; z-index:2 }
.hiw-rail-ttl{ display:block; font-family:var(--mono, ui-monospace, monospace); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--hiw-mute); margin:0 0 18px 2px }
.hiw-rail ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:22px; position:relative; z-index:1 }
.hiw-rail button{ all:unset; cursor:pointer; display:flex; align-items:center; gap:12px; color:var(--hiw-mute); font-size:13.5px; font-weight:600 }
.hiw-rd{ position:relative; width:36px; height:36px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:#16120e; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12); transition:box-shadow .5s var(--hiw-ease), background .5s var(--hiw-ease) }
.hiw-rd svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; overflow:visible }
.hiw-rd .ck{ opacity:0; stroke:var(--hiw-amber-ink) }
.hiw-rl{ transition:color .4s var(--hiw-ease), transform .5s var(--hiw-ease) }
.hiw-ri.done .hiw-rd{ background:var(--hiw-amber); box-shadow:0 0 16px rgba(240,165,0,.35) }
.hiw-ri.done .hiw-rd .ic{ opacity:0 } .hiw-ri.done .hiw-rd .ck{ opacity:1 }
.hiw-ri.done .hiw-rl{ color:var(--hiw-dim) }
.hiw-ri.on .hiw-rd{ color:#fff; background:linear-gradient(135deg, var(--hiw-vio), var(--hiw-vio-2));
  box-shadow:0 0 0 4px rgba(124,92,255,.18), 0 0 26px rgba(124,92,255,.6) }
.hiw-ri.on .hiw-rl{ color:var(--hiw-text); transform:translateX(3px) }
.hiw-rail button:hover .hiw-rl{ color:var(--hiw-text) }
.hiw-rail-line{ position:absolute; left:17px; width:2px; top:46px; bottom:18px; background:rgba(255,255,255,.08); border-radius:2px }
.hiw-rail-line i{ position:absolute; inset:0; border-radius:2px; transform-origin:50% 0; transform:scaleY(var(--hiw-rf, 0));
  background:linear-gradient(180deg, var(--hiw-amber), var(--hiw-amber) 60%, var(--hiw-vio)) }

.hiw.is-pin .hiw-deck{ display:block; box-shadow:0 50px 90px -30px rgba(0,0,0,.9); grid-column:4; grid-row:1; position:relative; height:var(--hiw-sh); border-radius:30px; z-index:0 }
.hiw-deck{ --hiw-sh:min(620px, calc(100vh - 72px - 72px)) }
/* Border beam without a mask (a mask over a rotating layer re-rasters every frame):
   the rotating conic sits under an opaque plate inset by 1.5px, only the rim shows. */
.hiw-beam{ position:absolute; inset:0; border-radius:30px; overflow:hidden; z-index:0 }
.hiw-beam i{ position:absolute; will-change:transform; left:50%; top:50%; width:160%; aspect-ratio:1; margin:-80% 0 0 -80%;
  background:conic-gradient(from 0deg, rgba(240,165,0,.9), rgba(240,165,0,.05) 22%, rgba(255,255,255,.14) 45%, rgba(124,92,255,.08) 62%, rgba(124,92,255,.95) 80%, rgba(240,165,0,.9));
  transform:rotate(var(--hiw-br, 0deg)) }
.hiw-deck::before{ content:""; position:absolute; inset:1.5px; border-radius:29px; z-index:1;
  background:linear-gradient(160deg, #282119, #110e0b);
  box-shadow:0 50px 90px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08) }
.hiw-floor{ position:absolute; z-index:2; inset:auto 1.5px 1.5px; height:48%; border-radius:0 0 29px 29px;
  background:radial-gradient(80% 90% at 30% 120%, rgba(124,92,255,.22), transparent 70%),
             radial-gradient(60% 80% at 85% 130%, rgba(240,165,0,.16), transparent 70%);
  opacity:var(--hiw-fl, 1) }

.hiw.is-pin .hiw-steps{ grid-column:3 / 5; grid-row:1; display:grid; grid-template-columns:subgrid; position:relative; z-index:1 }
.hiw.is-pin .hiw-step{ grid-row:1; grid-column:1 / -1; display:grid; grid-template-columns:subgrid; padding:0; border:0;
  align-items:center; opacity:0; visibility:hidden }
.hiw.is-pin .hiw-step.vis{ visibility:visible }
.hiw.is-pin .hiw-txt{ grid-column:1; will-change:transform, opacity }
.hiw.is-pin .hiw-set{ grid-column:2; height:var(--hiw-sh, 620px); min-height:0; background:none; box-shadow:none; will-change:transform, opacity }
.hiw.is-pin .hiw-set::before{ display:none }
.hiw.is-pin .hiw-step{ --hiw-sh:min(620px, calc(100vh - 72px - 72px)) }
.hiw-txt h3 .w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em }
.hiw-txt h3 .w > span{ display:inline-block; transform:translateY(calc((1 - clamp(0, var(--hiw-in, 1) * 1.7 - var(--hiw-wi) * .09, 1)) * 108%)) }

/* ═══ РЕЖИМ .is-flow: телефон / вузький екран ════════════════════════ */
.hiw.is-flow{ padding:0 0 72px }
.hiw.is-flow .hiw-rail{ display:flex; position:sticky; top:72px; z-index:6; align-items:center; gap:10px; margin:0 -24px 8px; padding:10px 16px;
  background:rgba(17,14,11,.94); border-bottom:1px solid var(--hiw-hair) }
.hiw.is-flow .hiw-rail-ttl{ display:none }
.hiw.is-flow .hiw-rail ol{ flex-direction:row; gap:8px }
.hiw.is-flow .hiw-rl{ display:none }
.hiw.is-flow .hiw-ri.on .hiw-rl{ display:block; position:absolute; left:calc(6 * 38px + 22px); top:50%; transform:translateY(-50%); white-space:nowrap; font-size:13px }
.hiw.is-flow .hiw-rail ol{ position:static }
.hiw.is-flow .hiw-ri{ position:static }
.hiw.is-flow .hiw-rail button{ position:static }
.hiw.is-flow .hiw-rd{ width:30px; height:30px; border-radius:10px }
.hiw.is-flow .hiw-rd svg{ width:16px; height:16px }
.hiw.is-flow .hiw-rail-line{ left:30px; right:auto; top:auto; bottom:4px; width:calc(6 * 38px - 40px); height:2px }
.hiw.is-flow .hiw-rail-line i{ transform-origin:0 50%; transform:scaleX(var(--hiw-rf, 0)); background:linear-gradient(90deg, var(--hiw-amber), var(--hiw-amber) 60%, var(--hiw-vio)) }

/* ═══ ВУЗЬКІ ЕКРАНИ — розкладка, не зменшена копія ════════════════ */
@media (max-width:1060px){
  .hiw-hero-in{ grid-template-columns:1fr; gap:24px }
}
@media (max-width:899px){
  .hiw-hero{ padding:56px 0 8px }
  .hiw-stage{ padding:0 16px }
  .hiw.is-flow .hiw-rail{ margin:0 -16px 8px }
  .hiw-step{ grid-template-columns:1fr; gap:20px; padding:36px 0 44px }
  .hiw-step .hiw-set{ order:-1 }
  .hiw-txt h3{ font-size:clamp(26px,7.4vw,34px); margin:10px 0 10px }
  .hiw-txt p{ font-size:15.5px }
  .hiw-set{ padding:18px 16px 138px; min-height:0; border-radius:24px }
  .hiw-mc{ width:96px; height:96px }
  .hiw-actor{ left:12px; bottom:12px; width:104px }
  .hiw-say{ left:104px; bottom:58px; font-size:12.5px }
  .hiw-set[data-obj="hw-brief"]{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:10px }
  .o1-url{ font-size:12px }
  .o1-prod{ padding:8px; gap:6px } .o1-ptxt b{ font-size:15px } .o1-ptxt i{ font-size:11px }
  .o1-kit{ padding:10px 10px 2px } .o1-row{ padding:7px 0 } .o1-row .o1-v{ font-size:12px }
  .o1-pimg{ aspect-ratio:4/5 }
  .hiw-set[data-obj="hw-board"], .hiw-set[data-obj="hw-render"]{ --pk-tw:74px }
  .pk-board, .pk-caps{ gap:6px } .pk-in{ --pk-r:10px }
  .o2-t{ font-size:18px }
  .o2-stamp{ position:static; margin-top:12px; display:inline-flex }
  .pk-cap em{ font-size:11.5px }
  .hiw-set[data-obj="hw-render"]{ justify-content:flex-start }
  .o3-rnd{ --pk-pw:122px; grid-template-areas:"top phone" "trk trk"; grid-template-rows:auto auto; gap:14px 14px }
  .o3-top{ align-self:start }
  .o3-tracks{ grid-template-columns:62px minmax(0,1fr); gap:8px }
  .o3-lanes{ left:70px }
  .o3-tl{ font-size:9.5px; letter-spacing:.04em }
  .o3-clips{ height:54px }
  .o4-cards{ height:250px }
  .o4-c{ left:2%; right:2% }
  .o4-ready{ position:static; margin-top:8px; display:inline-flex }
  .hiw-set[data-obj="hw-queue"]{ grid-template-columns:minmax(0,1fr); gap:6px }
  .o5-q, .o5-sys, .o5-legend{ grid-column:1; grid-row:auto }
  .o5-legend{ order:3; justify-content:center }
  .o5-sys{ width:min(100%, 300px); margin:4px auto 0; padding-top:44px }
  .o6-week{ width:auto; margin-left:0 }
}
@media (max-width:380px){
  .hiw-set[data-obj="hw-brief"]{ grid-template-columns:1fr }
  .o1-prod{ flex-direction:row; align-items:center } .o1-pimg{ width:64px; flex:none; aspect-ratio:1 }
}

/* Reduced motion: усі кроки видно цілком, нічого не рухається. */
@media (prefers-reduced-motion:reduce){
  .hiw-hint svg{ animation:none }
}

/* Живий шар героїв: кліпання й дихання (CSS), пауза поза екраном. */
@media (prefers-reduced-motion:no-preference){
  .hiw.is-pin .hiw-mc svg .eyes, .hiw.is-flow .hiw-mc svg .eyes{ transform-box:fill-box; transform-origin:50% 50%; animation:hiw-blink 4.8s infinite }
  .hiw.is-pin .hiw-step:nth-child(2n) .hiw-mc svg .eyes{ animation-delay:-2.1s }
  .hiw.is-pin .hiw-mc svg .body, .hiw.is-flow .hiw-mc svg .body{ transform-box:fill-box; transform-origin:50% 100%; animation:hiw-breathe 3.2s ease-in-out infinite alternate }
  .hiw.is-off .hiw-mc svg *, .hiw .hiw-step:not(.vis) .hiw-mc svg *{ animation-play-state:paused }
  .hiw.is-flow .hiw-step .hiw-mc svg *{ animation-play-state:running }
  .hiw.is-off.is-flow .hiw-mc svg *{ animation-play-state:paused }
}
@keyframes hiw-blink{ 0%,93%,100%{ transform:none } 95%{ transform:scaleY(.08) } }
@keyframes hiw-breathe{ to{ transform:scale(1.025,.985) } }
.hiw-spotw{ position:absolute; z-index:3; inset:1.5px; border-radius:29px; overflow:hidden; pointer-events:none }
.hiw-spot{ position:absolute; left:0; top:0; width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,214,140,.07), rgba(124,92,255,.05) 40%, transparent 70%) }

/* Кадри-плитки кроку 3 живуть лише в режимах із рухом; у статичному кінцевому стані видно готовий рендер. */
.o3-pre{ display:none }
.hiw.is-pin .o3-pre, .hiw.is-flow .o3-pre{ display:flex }