.live-wrap{width:min(var(--kl-container),calc(100% - 2*var(--kl-margin)));margin:auto}

/* ---- шапка. Исключение из §39 (записано в карте блоков): сжатие плашки меняет ширину и отступ ---- */
.live-top{position:fixed;inset:0 0 auto 0;z-index:var(--kl-z-sticky);padding:0 var(--kl-space-2)}
.live-bar{margin:0 auto;max-width:var(--kl-container);height:var(--kl-space-16);display:flex;align-items:center;justify-content:space-between;gap:var(--kl-space-4);padding:0 var(--kl-space-6);
  border:var(--kl-border) solid transparent;border-radius:var(--kl-radius-msg);background:transparent;
  transition:max-width var(--kl-d3) var(--kl-e-std),margin-top var(--kl-d3) var(--kl-e-std),background var(--kl-d3) var(--kl-e-std),border-color var(--kl-d3) var(--kl-e-std),box-shadow var(--kl-d3) var(--kl-e-std)}
.live-top.live-shrunk .live-bar{max-width:calc(var(--kl-container) * .68);margin-top:var(--kl-space-2);background:color-mix(in srgb,var(--kl-surface) 60%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--kl-line);box-shadow:var(--kl-shadow-1)}
.live-brand{display:flex;align-items:center;gap:var(--kl-space-3);font-weight:var(--kl-weight-semibold);font-size:var(--kl-h3-size);letter-spacing:var(--kl-h3-tracking)}
.live-logo{width:var(--kl-space-8);height:var(--kl-space-8);display:block}
.live-rings{position:relative;width:calc(var(--kl-space-8) + 2px);height:var(--kl-h-tag)}.live-rings i{position:absolute;top:0;width:var(--kl-h-tag);height:var(--kl-h-tag);border-radius:50%;border:3px solid var(--kl-brand-orange)}.live-rings i+i{left:var(--kl-space-3);border-color:var(--kl-brand-blue)}
.live-nav{display:flex;gap:var(--kl-space-6);font-size:var(--kl-ui-size);font-weight:var(--kl-ui-weight)}
.live-nav a{opacity:.8}.live-nav a:hover{opacity:1}
.live-right{display:flex;gap:var(--kl-space-2);align-items:center}
.live-btn{height:var(--kl-h-compact);padding:0 var(--kl-space-4);border-radius:var(--kl-radius-ctl);border:var(--kl-border) solid var(--kl-line);background:var(--kl-surface);font-size:var(--kl-ui-size);font-weight:var(--kl-ui-weight);display:inline-flex;align-items:center;gap:var(--kl-space-2);white-space:nowrap}
.live-btn.live-p{background:var(--kl-btn-bg);color:var(--kl-btn-text);border-color:transparent}
.live-btn.live-q{background:transparent;border-color:transparent;opacity:.8}

/* ---- герой ---- */
.live-hero{position:relative;min-height:100vh;overflow:hidden;display:grid;align-items:center;padding:calc(var(--kl-space-16) + var(--kl-space-8)) 0 var(--kl-space-12)}
#bg{position:absolute;inset:0;width:100%;height:100%;display:block}
.live-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 80% at 35% 50%,transparent 0,color-mix(in srgb,var(--kl-bg) 60%,transparent) 100%)}
[data-theme="light"] .live-hero::after{background:none}
.live-hero .live-wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:var(--kl-space-12);align-items:center}
.live-glass{background:color-mix(in srgb,var(--kl-surface) 80%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:var(--kl-border) solid var(--kl-line);border-radius:var(--kl-radius-modal);padding:var(--kl-space-8);box-shadow:var(--kl-shadow-2)}
.live-hero h1{margin:0 0 var(--kl-space-4);font-size:clamp(40px,4.6vw,64px);font-weight:var(--kl-.live-hero h1-weight);line-height:var(--kl-.live-hero h1-leading);letter-spacing:var(--kl-.live-hero h1-tracking)}
.live-hero h1 span{display:block;transition:color var(--kl-d3) var(--kl-e-std)}
.live-hero h1 span.live-on{color:var(--kl-brand-orange)}
[data-theme="light"] .live-hero h1 span.live-on{color:var(--kl-on-warm)}
.live-def{font-size:var(--kl-body-size);color:var(--kl-text-muted);max-width:56ch;margin:0 0 var(--kl-space-6)}
.live-def b{color:var(--kl-text);font-weight:500}
.live-four{display:grid;grid-template-columns:1fr 1fr;gap:var(--kl-space-3) var(--kl-space-6);margin:0 0 var(--kl-space-6);padding:0;list-style:none}
.live-four li{font-size:var(--kl-ui-size);line-height:1.45;color:var(--kl-text-muted);padding-left:var(--kl-space-4);border-left:2px solid var(--kl-line)}
.live-four b{display:block;color:var(--kl-text);font-weight:500;font-size:var(--kl-body-size)}
.live-four li.live-cold{border-color:var(--kl-brand-blue)}.live-four li.live-warm{border-color:var(--kl-brand-orange)}
.live-cta .live-btn{height:var(--kl-h-touch);padding:0 var(--kl-space-6)}

/* ---- превращение: один объект, три состояния ---- */
.live-stage{position:relative;height:calc(var(--kl-space-16) * 8);display:grid;place-items:center}
.live-obj{position:relative;width:min(100%,calc(var(--kl-space-16) * 5.75));height:100%}
.live-st{position:absolute;inset:0;display:grid;align-content:center;opacity:0;transform:translateY(var(--kl-space-4)) scale(.98);transition:opacity var(--kl-d4) var(--kl-e-out),transform var(--kl-d4) var(--kl-e-out);pointer-events:none}
.live-st.live-on{opacity:1;transform:none;pointer-events:auto}
.live-panel{background:var(--kl-surface);border:var(--kl-border) solid var(--kl-line);border-radius:var(--kl-radius-card);box-shadow:var(--kl-shadow-2);overflow:hidden}
/* 1 · придумай */
.live-think{padding:var(--kl-space-6)}
.live-think small{display:block;font-size:var(--kl-caption-size);color:var(--kl-text-muted);margin-bottom:var(--kl-space-2)}
.live-field{min-height:var(--kl-h-touch);border:var(--kl-border) solid var(--kl-line-strong);border-radius:var(--kl-radius-ctl);padding:var(--kl-space-3) var(--kl-space-4);font-size:var(--kl-body-size);display:flex;align-items:center;gap:2px}
.live-caret{display:inline-block;width:2px;height:1.1em;background:var(--kl-on-cold);animation:blink 1s steps(2) infinite}
@keyframes blink{to{opacity:0}}
.live-chips{display:flex;gap:var(--kl-space-2);flex-wrap:wrap;margin-top:var(--kl-space-3)}
.live-chip{height:var(--kl-h-chip);padding:0 var(--kl-space-3);border-radius:var(--kl-radius-ctl);border:var(--kl-border) solid var(--kl-line);font-size:var(--kl-caption-size);display:inline-flex;align-items:center;color:var(--kl-text-muted)}
.live-chip.live-on{background:var(--kl-tint-cold);color:var(--kl-on-cold);border-color:transparent}
/* 2 · ИИ сделает */
.live-make .live-pic{position:relative;aspect-ratio:1;background:var(--kl-surface-2)}
.live-pic i{position:absolute;inset:0;background:none no-repeat;/* картинку ставит landing-hero.js после загрузки страницы (KOL-1274, скорость) */background-size:200% auto;transition:opacity var(--kl-d4) var(--kl-e-std)}
.live-pic i.live-before{filter:none;opacity:1}
.live-pic i.live-after{opacity:0}
.live-make.live-done .live-pic i.live-before{opacity:0}.live-make.live-done .live-pic i.live-after{opacity:1}
.live-pic .live-mark{position:absolute;left:var(--kl-space-3);top:var(--kl-space-3);display:inline-flex;gap:var(--kl-space-1);align-items:center;height:var(--kl-h-tag);padding:0 var(--kl-space-2);border-radius:var(--kl-radius-status);background:color-mix(in srgb,var(--kl-bg) 70%,transparent);color:var(--kl-text);font-size:var(--kl-caption-size);backdrop-filter:blur(8px)}
.live-pic .live-mark::before{content:"";width:var(--kl-space-2);height:var(--kl-space-2);border-radius:50%;background:var(--kl-state-busy);animation:pulse 1s ease-in-out infinite}
.live-make.live-done .live-pic .live-mark::before{background:var(--kl-state-done);animation:none}
@keyframes pulse{50%{opacity:.3}}
.live-make .live-cap{padding:var(--kl-space-3) var(--kl-space-4);display:flex;justify-content:space-between;align-items:center;gap:var(--kl-space-3);font-size:var(--kl-ui-size)}
.live-make .live-cap b{display:block;font-weight:500}.live-make .live-cap span{color:var(--kl-text-muted);font-size:var(--kl-caption-size)}
.live-ai{display:inline-grid;place-items:center;height:var(--kl-h-tag);padding:0 var(--kl-space-2);border-radius:var(--kl-radius-xs);background:var(--kl-tint-cold);color:var(--kl-on-cold);font-size:var(--kl-caption-size);font-weight:600}
/* 3 · друзья увидят */
.live-post .live-head{display:flex;align-items:center;gap:var(--kl-space-3);padding:var(--kl-space-3) var(--kl-space-4)}
.live-av{width:var(--kl-avatar-sm);height:var(--kl-avatar-sm);border-radius:var(--kl-radius-avatar);background:var(--kl-tint-warm);color:var(--kl-on-warm);display:grid;place-items:center;font-weight:600;font-size:var(--kl-caption-size);flex:none}
.live-post .live-head b{display:block;font-weight:500;font-size:var(--kl-ui-size)}.live-post .live-head small{font-size:var(--kl-caption-size);color:var(--kl-text-muted)}
.live-post .live-pic{aspect-ratio:4/3;background:none no-repeat;background-size:200% auto}
.live-post .live-row{display:flex;gap:var(--kl-space-2);padding:var(--kl-space-3) var(--kl-space-4) 0;font-size:var(--kl-ui-size)}
.live-react{display:inline-flex;align-items:center;gap:var(--kl-space-1);height:var(--kl-h-chip);padding:0 var(--kl-space-3);border-radius:var(--kl-radius-status);border:var(--kl-border) solid var(--kl-line);opacity:0;transform:scale(.8);transition:opacity var(--kl-d2) var(--kl-e-out),transform var(--kl-d2) var(--kl-e-out)}
.live-react.live-on{opacity:1;transform:none}
.live-cmt{padding:var(--kl-space-3) var(--kl-space-4);font-size:var(--kl-ui-size);display:grid;gap:var(--kl-space-2)}
.live-cmt div{opacity:0;transform:translateY(var(--kl-space-1));transition:opacity var(--kl-d3) var(--kl-e-out),transform var(--kl-d3) var(--kl-e-out)}
.live-cmt div.live-on{opacity:1;transform:none}
.live-cmt b{font-weight:500}
.live-rep{margin:0 var(--kl-space-4) var(--kl-space-4);height:var(--kl-h-touch);border-radius:var(--kl-radius-ctl);background:var(--kl-btn-bg);color:var(--kl-btn-text);display:flex;align-items:center;justify-content:center;font-size:var(--kl-ui-size);font-weight:500}
.live-dots{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;gap:var(--kl-space-2)}
.live-dots i{width:var(--kl-space-2);height:var(--kl-space-2);border-radius:50%;background:var(--kl-line-strong);opacity:.6}
.live-dots i.live-on{background:var(--kl-brand-orange);opacity:1}

.live-next{padding:var(--kl-space-16) 0;min-height:70vh;color:var(--kl-text-muted)}
.live-next h2{color:var(--kl-text);font-size:var(--kl-h2-size);letter-spacing:var(--kl-h2-tracking);margin:0 0 var(--kl-space-3)}

@media (max-width:1024px){.live-hero .live-wrap{grid-template-columns:minmax(0,1fr)}.live-glass,.live-stage{min-width:0}.live-nav{display:none}.live-stage{height:calc(var(--kl-space-16) * 7.5)}}
@media (max-width:640px){
  .live-right .live-q:first-child{display:none}
  .live-hero{padding-top:calc(var(--kl-space-16) + var(--kl-space-2));padding-bottom:var(--kl-space-8);align-items:start}
  .live-hero .live-wrap{gap:var(--kl-space-8)}
  .live-glass{padding:var(--kl-space-5,20px) var(--kl-space-4) var(--kl-space-4);border-radius:var(--kl-radius-card)}
  .live-hero h1{font-size:38px;margin-bottom:var(--kl-space-3)}
  .live-def{font-size:var(--kl-ui-size);margin-bottom:var(--kl-space-4)}.live-def .long{display:none}
  .live-four{display:flex;gap:var(--kl-space-2);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--kl-space-4);margin:0 calc(-1 * var(--kl-space-4)) var(--kl-space-4);padding:0 var(--kl-space-4) var(--kl-space-2);scrollbar-width:none}
  .live-four::-webkit-scrollbar{display:none}
  .live-four li{flex:0 0 72%;scroll-snap-align:start;border-left:0;padding:var(--kl-space-3) var(--kl-space-4);border-radius:var(--kl-radius-msg);background:var(--kl-surface);border:var(--kl-border) solid var(--kl-line);font-size:var(--kl-caption-size);line-height:1.4}
  .live-four li.live-cold{border-top:2px solid var(--kl-brand-blue)}.live-four li.live-warm{border-top:2px solid var(--kl-brand-orange)}
  .live-four b{font-size:var(--kl-ui-size);margin-bottom:var(--kl-space-1)}
  .live-cta .live-btn{width:100%;justify-content:center}
  .live-stage{height:calc(var(--kl-space-16) * 6);place-items:start center}.live-hero .live-wrap{gap:var(--kl-space-4)}
}
@media (prefers-reduced-motion:reduce){.live-st,.live-react,.live-cmt div,.live-pic i,.live-hero h1 span,.live-bar{transition:none}.live-caret,.live-pic .live-mark::before{animation:none}.live-top.live-shrunk .live-bar{backdrop-filter:none}}

.live-hero{padding-bottom:var(--kl-space-8)}
/* Codex: фиксированная квадратная область спрайта внутри кадра; соседние изображения не попадают в пост. */
.live-stage{height:auto;min-width:0}.live-obj{height:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--kl-space-3)}
.live-st{position:relative;inset:auto;grid-area:1/1;min-width:0;visibility:hidden;align-content:center}.live-st.live-on{visibility:visible}
.live-post .live-pic{position:relative;overflow:hidden;background:var(--kl-surface-2)}
.live-sprite-square{position:absolute;width:100%;aspect-ratio:1;top:50%;transform:translateY(-50%);background-size:200% 200%;background-repeat:no-repeat}
.live-pic i{background-size:200% 200%}.live-pic i.live-before{filter:none;display:grid;place-items:center;font-style:normal;text-align:center;padding:var(--kl-space-6);color:var(--kl-text-muted)}
.live-pic i.live-before.live-placeholder{background-image:none!important;background-color:var(--kl-surface-2)}
.live-playback-controls{grid-area:2/1;display:grid;gap:var(--kl-space-2)}.live-playback-toolbar,.live-stage-controls{display:flex;gap:var(--kl-space-2)}
.live-playback-toolbar #play-toggle{flex:1}.live-playback-controls button,.live-chip{min-height:var(--kl-h-touch);height:auto;justify-content:center}.live-stage-controls button{flex:1;min-width:0;padding:var(--kl-space-2);border:var(--kl-border) solid var(--kl-line);border-radius:var(--kl-radius-ctl);background:var(--kl-surface);font-size:var(--kl-caption-size)}
.live-chip[aria-pressed=true],.live-stage-controls button[aria-pressed=true]{background:var(--kl-tint-cold);color:var(--kl-on-cold);border-color:var(--kl-on-cold)}
.live-demo-note{font-size:var(--kl-caption-size);color:var(--kl-text-muted);margin:0;text-align:center}.live-rep{padding:var(--kl-space-2);min-height:var(--kl-h-touch);height:auto;text-align:center}
body[data-paused=true] .live-st,body[data-paused=true] .live-react,body[data-paused=true] .live-cmt div,body[data-paused=true] .live-pic i{transition:none}
body[data-paused=true] .live-caret,body[data-paused=true] .live-pic .live-mark::before{animation-play-state:paused}
#play-toggle:disabled{opacity:.7;cursor:default}
@media(max-width:640px){.live-stage{height:auto;place-items:start center}.live-st{align-content:start}.live-obj{width:100%}.live-bar{padding-left:var(--kl-space-3);padding-right:var(--kl-space-3)}.live-right .live-btn{min-height:var(--kl-h-touch)}}

.live-playback-controls{display:none}html.debug .live-playback-controls{display:block}
.live-dots{position:static;transform:none;justify-content:center;margin-top:var(--kl-space-3)}
.live-dots button{width:var(--kl-h-touch);height:var(--kl-h-touch);display:grid;place-items:center;background:none;border:0;padding:0}
.live-dots button i{display:block;width:var(--kl-space-2);height:var(--kl-space-2);border-radius:50%;background:var(--kl-line-strong);opacity:.6;transition:transform var(--kl-d2) var(--kl-e-out)}
.live-dots button[aria-pressed="true"] i{background:var(--kl-brand-orange);opacity:1;transform:scale(1.5)}

/* Integration: preserve the lower landing, its locale controls and mobile navigation. */
.live-top a{text-decoration:none}.live-top .live-bar{position:relative}
.live-top .live-nav{gap:var(--kl-space-4)}.live-top .live-right{gap:var(--kl-space-2)}
.live-hero{background:var(--kl-surface)}.live-hero a{text-decoration:none}.live-hero h1 span{color:var(--kl-text)}.live-hero h1 span.live-on{color:var(--kl-brand-orange)}
[data-theme="light"] .live-hero h1 span.live-on{color:var(--kl-on-warm)}
.live-hero .live-chip{padding:0 var(--kl-space-3);font-weight:var(--kl-weight-regular)}
.live-hero .live-dots button{background:none;border:0;color:inherit;min-width:var(--kl-h-touch)}
.live-hero .live-dots button[aria-pressed=true]{background:none;border:0}
.live-top .live-logo{object-fit:contain;flex:none}.live-top .live-brand{white-space:nowrap}
@media(max-width:1024px){.live-top .live-bar{max-width:100%}.live-top.live-shrunk .live-bar{max-width:96%}.live-top .live-right>a{display:none}}
@media(max-width:640px){.live-wrap{width:calc(100% - 2*var(--kl-margin-mobile))}.live-top .live-brand{font-size:var(--kl-body-size)}.live-top .live-right{gap:var(--kl-space-1)}.live-top .live-bar{padding:0 var(--kl-space-2)}.live-top #theme{padding:var(--kl-space-2);font-size:var(--kl-caption-size)}.live-hero{min-height:100svh}}
/* телефон: громкий фон без WebGL (KOL-1274, скорость) — те же цвета шейдера статичными пятнами */
@media (max-width:760px){
  canvas[data-loud]{background:radial-gradient(70% 45% at 85% 12%,var(--kl-brand-orange-light),transparent 70%),radial-gradient(60% 40% at 10% 90%,var(--kl-brand-orange),transparent 72%),radial-gradient(70% 50% at 60% 60%,var(--kl-tint-warm),transparent 75%),var(--kl-surface)}
  [data-theme="dark"] canvas[data-loud]{background:radial-gradient(70% 45% at 85% 12%,var(--kl-brand-orange),transparent 70%),radial-gradient(70% 45% at 15% 85%,var(--kl-brand-blue),transparent 72%),radial-gradient(60% 40% at 60% 50%,var(--kl-brand-blue-deep),transparent 75%),var(--kl-bg)}
  canvas[data-landing-glow]{background:radial-gradient(60% 40% at 80% 20%,var(--kl-tint-cold),transparent 70%),var(--kl-surface)}
  [data-theme="dark"] canvas[data-landing-glow]{background:radial-gradient(60% 40% at 80% 20%,color-mix(in srgb,var(--kl-brand-blue-deep) 45%,transparent),transparent 70%),var(--kl-bg)}
}