/* ═══════════ Vizual dars — 3 bosqich (landing · generatsiya · pleyer) ═══════════
   Bosh sahifa (home.css) vizual identifikatsiyasi: deep-space fon, cyan/turquoise glow,
   glassmorphism panellar, nozik neon border, yumshoq shadow. Animatsiyalar faqat
   transform/opacity (GPU): orbital halqalar, waveform, chizmalar. Desktop birinchi
   (1920×1080), 1366×768 va boshqa o'lchamlar clamp() bilan moslashadi. */

#lesson{
  --vl-bg:#020817; --vl-bg2:#03101f; --vl-bg3:#06182c;
  --vl-glass:rgba(9,22,42,.62); --vl-glass2:rgba(13,28,52,.78);
  --vl-line:rgba(130,190,255,.14); --vl-line2:rgba(130,190,255,.28);
  --vl-t1:#F7FAFF; --vl-t2:#9EAEC2; --vl-t3:#6C7B92;
  --vl-acc:#32E6D3; --vl-acc2:#42C9FF; --vl-acct:#5FF0DE; --vl-accs:rgba(33,230,190,.12); --vl-accss:rgba(45,255,210,.38);
  --vl-gold:#F4BD63; --vl-ok:#32E89A; --vl-purple:#9D78FF;
  --vl-disp:'Plus Jakarta Sans',var(--font-sans);
  --vl-r:22px;
  display:none;position:relative;flex:1;min-height:0;overflow:hidden;
  color:var(--vl-t1);color-scheme:dark;font-family:var(--font-sans);
  background:
    radial-gradient(ellipse 70% 55% at 18% -10%, rgba(24,80,140,.28), transparent 60%),
    radial-gradient(ellipse 80% 40% at 50% 112%, rgba(46,230,207,.16), rgba(30,140,210,.08) 45%, transparent 72%),
    linear-gradient(180deg,var(--vl-bg) 0%,var(--vl-bg2) 45%,var(--vl-bg3) 100%);
}
body.lesson #lesson{display:block}
body.lesson .chat, body.lesson .composer, body.lesson .top, body.lesson .side, body.lesson .overlay{display:none}
body.lesson .main{background:var(--vl-bg)}
#lesson a{color:inherit;text-decoration:none}
#lesson button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
#lesson [hidden]{display:none!important}
#lesson > section{display:none;position:absolute;inset:0}
#lesson[data-stage="start"] .vl-start,
#lesson[data-stage="gen"] .vl-gen{display:flex}
#lesson[data-stage="play"] .vl-player{display:grid}
canvas.vl-space{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.95}

/* ── glass ── */
.vl-glass,.vl-plan,.vl-side,.vl-ask,.vl-card,.vl-ctrl,.vl-bar{
  background:var(--vl-glass);border:1px solid var(--vl-line);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 12px 40px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05);
}

/* ── robot doklari: mavjud #stage (.holo-stage) shu yerga ko'chadi ── */
.vl-dock{display:flex;justify-content:center;align-items:center}
.vl-dock .holo-stage{transition:none;cursor:default}
.vl-dock .holo-stage::before{opacity:.55}
#vlDock1 .holo-stage{width:clamp(210px,31vh,400px)}
#vlDock2 .holo-stage{width:clamp(180px,27vh,340px)}
#lDock{width:100%;display:flex;justify-content:center}
#lDock .holo-stage{width:min(100%,clamp(170px,27vh,320px))}

/* ── orbital halqalar: robot atrofida golografik doiralar (transform rotate — GPU) ── */
.vl-orbit{position:relative;display:grid;place-items:center;flex:none}
.vl-orbit > .vl-dock{position:relative;z-index:1}
.vl-orbit::before,.vl-orbit::after{
  content:"";position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%);will-change:transform;
}
.vl-orbit::before{
  width:126%;aspect-ratio:1;border:1px solid rgba(50,230,220,.16);border-top-color:rgba(50,230,220,.62);
  box-shadow:0 0 30px rgba(50,230,220,.08),inset 0 0 60px rgba(37,255,205,.05);
  background:radial-gradient(circle closest-side,rgba(37,255,205,.14),rgba(0,160,255,.06) 50%,transparent 74%);
  animation:vl-spin 46s linear infinite;
}
.vl-orbit::after{
  width:150%;aspect-ratio:1;border:1px dashed rgba(66,201,255,.16);
  background:radial-gradient(circle 5px at 50% 0, rgba(95,240,222,.95), rgba(95,240,222,0) 70%);   /* yo'ldosh nuqta */
  animation:vl-spin 70s linear infinite reverse;
}
.vl-orbit.big::before{width:122%}
.vl-orbit.big::after{width:146%}
@keyframes vl-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.vl-orbit::before,.vl-orbit::after{animation:none}}

/* ══════════ 1-BOSQICH: LANDING ══════════ */
.vl-start{flex-direction:column;align-items:center}
.vl-bar{
  position:absolute;left:16px;right:16px;top:12px;z-index:5;height:60px;display:flex;align-items:center;gap:14px;
  padding:0 18px;border-radius:20px;background:rgba(5,15,30,.42);
}
.vl-logo{display:flex;align-items:center;gap:10px;font-family:var(--vl-disp);font-weight:800;font-size:16px;letter-spacing:-.02em;color:#fff}
.vl-logo i{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--vl-acc),var(--vl-acc2));display:grid;place-items:center;color:#021414;font-style:normal;font-weight:800;box-shadow:0 0 20px rgba(50,230,211,.4)}
.vl-logo span{color:var(--vl-acc)}
.vl-crumb{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--vl-t1);
  background:rgba(33,230,190,.12);border:1px solid rgba(45,255,210,.32)}
.vl-exit{margin-left:auto;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:12px;font-size:13px;font-weight:500;color:var(--vl-t2);
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);transition:color .2s,border-color .2s,background .2s}
.vl-exit:hover{color:var(--vl-t1);border-color:var(--vl-accss);background:var(--vl-accs)}

.vl-hero{
  position:relative;z-index:2;flex:1;min-height:0;width:100%;max-width:1040px;margin:0 auto;padding:calc(72px + 2vh) 24px 24px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,1.8vh,20px);
}
.vl-hero h1{margin:clamp(6px,1.6vh,18px) 0 0;font-family:var(--vl-disp);font-weight:800;font-size:clamp(20px,3.2vh,34px);letter-spacing:-.03em;line-height:1.1;text-align:center;
  background:linear-gradient(90deg,#fff 0%,#fff 40%,#2ef5d0 75%,#4bd8ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.vl-ask{
  width:min(100%,760px);display:flex;align-items:center;gap:6px;padding:8px 8px 8px 22px;border-radius:999px;
  background:rgba(5,15,30,.55);border:1px solid rgba(130,190,255,.2);
  transition:border-color .2s,box-shadow .25s;
}
.vl-ask:focus-within{border-color:var(--vl-accss);box-shadow:0 0 0 4px rgba(50,230,211,.1),0 0 40px rgba(50,230,211,.14)}
.vl-ask input{flex:1;min-width:0;height:48px;background:none;border:0;color:var(--vl-t1);font-family:var(--font-sans);font-size:clamp(16px,1.9vh,20px);letter-spacing:-.01em}
.vl-ask input::placeholder{color:var(--vl-t3)}
.vl-ask input:focus{outline:none}
.vl-ask button{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--vl-t2);transition:color .2s,background .2s,transform .2s}
.vl-ask button:hover{color:var(--vl-t1);background:rgba(255,255,255,.07)}
.vl-ask button.rec{color:var(--vl-gold);background:rgba(244,189,99,.14);animation:vl-pulse 1.2s infinite}
#vlGo{background:linear-gradient(135deg,#2ee6cf,#58e3df);color:#021414;box-shadow:0 8px 26px rgba(52,230,210,.28)}
#vlGo:hover{color:#021414;background:linear-gradient(135deg,#3af0d8,#6ff0ec);transform:translateY(-1px)}
@keyframes vl-pulse{50%{opacity:.55}}
.vl-or{display:flex;align-items:center;gap:14px;width:min(100%,520px);color:var(--vl-t3);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}
.vl-or::before,.vl-or::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(130,190,255,.25),transparent)}
.vl-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:min(100%,820px)}
.vl-card{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px 18px 14px;border-radius:20px;text-align:left;
  background:linear-gradient(135deg,rgba(13,28,52,.86),rgba(7,18,35,.76));
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.vl-card .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;margin-bottom:6px;color:#041018;
  background:linear-gradient(145deg,var(--vl-acc),var(--vl-acc2));box-shadow:0 8px 22px rgba(50,230,211,.28),inset 0 1px 0 rgba(255,255,255,.3)}
#vlCardLink .ic{background:linear-gradient(145deg,#8B9CFF,#5A63E0);color:#fff;box-shadow:0 8px 22px rgba(120,130,255,.3)}
#vlCardSample .ic{background:linear-gradient(145deg,#F4BD63,#F08A24);box-shadow:0 8px 22px rgba(244,189,99,.3)}
.vl-card b{font-size:15px;font-weight:600;color:#fff;letter-spacing:-.01em}
.vl-card > span:last-child{font-size:12.5px;color:var(--vl-t2)}
.vl-card:hover,.vl-card:focus-visible,.vl-card.on{outline:none;transform:translateY(-3px);border-color:var(--vl-accss);box-shadow:0 16px 44px rgba(0,0,0,.35),0 0 30px rgba(50,230,211,.12)}
.vl-sub{width:min(100%,820px);display:flex;justify-content:center}
.vl-note{font-size:13.5px;color:var(--vl-t2);padding:10px 16px;border-radius:12px;background:rgba(5,15,30,.5);border:1px solid var(--vl-line)}
.vl-note.err{color:#FFB4AE;border-color:rgba(255,123,114,.35)}
.vl-link{display:flex;align-items:center;gap:8px;width:100%;padding:6px 6px 6px 14px;border-radius:16px;background:rgba(5,15,30,.55);border:1px solid var(--vl-line2)}
.vl-link .ic{color:var(--vl-acct);display:grid;place-items:center}
.vl-link input{flex:1;min-width:0;height:40px;background:none;border:0;color:var(--vl-t1);font-size:15px}
.vl-link input:focus{outline:none}
.vl-link button{height:40px;padding:0 16px;border-radius:12px;font-size:13.5px;font-weight:600;color:#021414;background:linear-gradient(135deg,#2ee6cf,#58e3df)}
.vl-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.vl-chips button{height:36px;padding:0 14px;border-radius:999px;font-size:13.5px;color:var(--vl-t1);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);transition:border-color .2s,background .2s}
.vl-chips button:hover{border-color:var(--vl-accss);background:var(--vl-accs)}
.vl-drop{
  position:absolute;inset:18px;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  border-radius:28px;border:2px dashed var(--vl-accss);background:rgba(3,16,31,.82);color:var(--vl-acct);font-size:18px;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.vl-drop.on{opacity:1}

/* ══════════ 2-BOSQICH: GENERATSIYA ══════════ */
.vl-gen{align-items:stretch;gap:clamp(16px,2.4vw,40px);padding:clamp(16px,3vh,36px) clamp(16px,3vw,48px)}
.vl-plan{
  flex:none;width:clamp(300px,24vw,400px);align-self:center;padding:22px 22px 18px;border-radius:var(--vl-r);
}
.vl-plan small{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--vl-acct);margin-bottom:6px}
.vl-plan h2{margin:0 0 18px;font-family:var(--vl-disp);font-size:clamp(17px,1.9vw,22px);font-weight:800;letter-spacing:-.02em;line-height:1.25}
.vl-stages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.vl-stages li{display:flex;align-items:flex-start;gap:12px;font-size:14px;color:var(--vl-t3);line-height:1.35}
.vl-stages li i{flex:none;width:20px;height:20px;margin-top:0;border-radius:50%;border:1.5px solid var(--vl-t3);display:grid;place-items:center;position:relative}
.vl-stages li em{display:block;font-style:normal;font-size:12px;color:var(--vl-t3);margin-top:2px}
.vl-stages li.active{color:var(--vl-t1)}
.vl-stages li.active i{border-color:var(--vl-acc);box-shadow:0 0 12px rgba(50,230,211,.45)}
.vl-stages li.active i::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--vl-acc);animation:vl-pulse 1.1s infinite}
.vl-stages li.done{color:var(--vl-t2)}
.vl-stages li.done i{border-color:var(--vl-ok);background:rgba(50,232,154,.14)}
.vl-stages li.done i::after{content:"";width:9px;height:5px;border-left:2px solid var(--vl-ok);border-bottom:2px solid var(--vl-ok);transform:translateY(-1px) rotate(-45deg)}
.vl-stages li.done em,.vl-stages li.active em{color:var(--vl-acct)}
.vl-gen-center{position:relative;z-index:2;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,2vh,22px)}
.vl-thought{
  position:absolute;left:calc(50% + clamp(90px,13vh,170px));top:6%;max-width:240px;padding:10px 14px;border-radius:18px 18px 18px 4px;
  font-size:13.5px;color:var(--vl-t1);background:var(--vl-glass2);border:1px solid var(--vl-line2);box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.vl-thought::before,.vl-thought::after{content:"";position:absolute;border-radius:50%;background:var(--vl-glass2);border:1px solid var(--vl-line2)}
.vl-thought::before{width:12px;height:12px;left:-14px;bottom:-4px}
.vl-thought::after{width:7px;height:7px;left:-24px;bottom:-12px}
.vl-progress{display:flex;align-items:center;gap:14px;width:min(100%,620px)}
.vl-pbar{flex:1;height:12px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid var(--vl-line);overflow:hidden}
.vl-pbar i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);border-radius:999px;
  background:linear-gradient(90deg,var(--vl-acc),var(--vl-acc2));box-shadow:0 0 18px rgba(50,230,211,.5);transition:transform .45s cubic-bezier(.22,.9,.28,1)}
.vl-progress b{font-family:var(--font-mono);font-size:15px;min-width:48px;text-align:right;color:var(--vl-acct)}
.vl-thumbs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:min(100%,900px);max-height:26vh;overflow:auto;padding:2px}
.vl-thumb{
  width:148px;aspect-ratio:16/9;padding:9px 10px;border-radius:12px;position:relative;display:flex;flex-direction:column;gap:3px;
  background:rgba(7,18,35,.5);border:1px dashed rgba(130,190,255,.18);color:var(--vl-t3);opacity:.7;
  transition:opacity .35s,border-color .35s,background .35s,transform .35s;
}
.vl-thumb b{font-family:var(--font-mono);font-size:11px;color:var(--vl-t3)}
.vl-thumb span{font-size:11.5px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vl-thumb em{position:absolute;right:8px;bottom:7px;font-style:normal;font-size:10px;color:var(--vl-acct);opacity:.8}
.vl-thumb.ready{opacity:1;border-style:solid;border-color:rgba(50,230,211,.35);background:linear-gradient(135deg,rgba(13,28,52,.9),rgba(7,18,35,.8));color:var(--vl-t1);box-shadow:0 8px 24px rgba(0,0,0,.28),0 0 18px rgba(50,230,211,.08)}
.vl-thumb.ready b{color:var(--vl-acct)}
.vl-gen-actions{display:flex;gap:10px}
.vl-gen-actions button{height:40px;padding:0 16px;border-radius:13px;font-size:13.5px;font-weight:600;color:var(--vl-t2);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);display:inline-flex;align-items:center;gap:7px;transition:border-color .2s,background .2s,color .2s}
.vl-gen-actions button:hover{color:var(--vl-t1);border-color:var(--vl-accss)}
.vl-gen-actions button.pri{color:#021414;background:linear-gradient(135deg,#2ee6cf,#58e3df);border-color:transparent;box-shadow:0 8px 28px rgba(52,230,210,.28)}
.vl-err{max-width:520px;text-align:center;font-size:14px;color:#FFB4AE;display:flex;flex-direction:column;align-items:center;gap:10px}
.vl-err p{margin:0}
.vl-err button{height:36px;padding:0 14px;border-radius:11px;color:var(--vl-t1);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);display:inline-flex;align-items:center;gap:6px;margin:0 4px}
#lLoading{display:none}

/* ══════════ 3-BOSQICH: PLEYER ══════════
   Ustunlar: slayd ~77% | robot paneli ~23% (clamp: 300–440px). Pastda pleyer — to'liq kenglik. */
.vl-player{
  grid-template-columns:minmax(0,1fr) clamp(300px,23vw,440px);
  grid-template-rows:minmax(0,1fr) auto;
  gap:12px 14px;padding:12px 16px 12px;
}
.vl-main{display:flex;flex-direction:column;min-height:0;min-width:0;gap:10px}
.vl-top{display:flex;align-items:center;gap:8px;height:42px}
.vl-top .l-title{flex:1;min-width:0;font-family:var(--vl-disp);font-weight:800;letter-spacing:-.02em;font-size:clamp(15px,1.5vw,20px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--vl-t1)}
.vl-nav{display:flex;align-items:center;gap:4px;height:38px;padding:0 4px;border-radius:999px;background:rgba(5,15,30,.5);border:1px solid var(--vl-line)}
.vl-nav button,#lFull,#lExport,#lClose{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--vl-t2);transition:color .2s,background .2s}
.vl-nav button:hover,#lFull:hover,#lExport:hover,#lClose:hover{color:var(--vl-t1);background:rgba(255,255,255,.08)}
#lFull,#lExport,#lClose{border-radius:11px;border:1px solid var(--vl-line);background:rgba(5,15,30,.5)}
#lExport:disabled{opacity:.35;cursor:not-allowed}
#lExport.busy{animation:vl-pulse 1.2s infinite}
.l-prog{font-family:var(--font-mono);font-size:12.5px;color:var(--vl-t1);letter-spacing:.06em;min-width:56px;text-align:center}
.l-board-wrap{position:relative;flex:1;min-height:0;display:grid;place-items:center}
.vl-slide{position:relative;width:100%;aspect-ratio:16/9;max-height:100%}
#lesson #board{
  position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;margin:0;
  border-radius:16px;background:#0b1220;border:1px solid var(--vl-line2);
  box-shadow:0 20px 60px rgba(0,0,0,.45),0 0 0 1px rgba(50,230,211,.06),0 0 60px rgba(50,230,211,.06);
  transition:opacity .18s;
}
#lesson #board.fade{opacity:.12}
.vl-annot{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
.vl-annot .an{filter:drop-shadow(0 0 6px rgba(245,201,107,.35))}
.vl-annot .an-circle{filter:drop-shadow(0 0 6px rgba(75,225,195,.45))}
.vl-annot .an-hl{filter:none}
.vl-pointer{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:3;opacity:0;transition:opacity .3s;will-change:transform}
.vl-pointer.on{opacity:1}
.vl-pointer::before{content:"";position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--vl-acct);
  box-shadow:0 0 0 4px rgba(95,240,222,.25),0 0 18px rgba(95,240,222,.8)}
.vl-pointer::after{content:"";position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(95,240,222,.5);animation:vl-ping 1.6s ease-out infinite}
@keyframes vl-ping{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.vl-pointer::after{animation:none}}
.vl-waitsim{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;border-radius:999px;
  background:var(--vl-glass2);border:1px solid var(--vl-line2);font-size:13px;color:var(--vl-t1);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.vl-waitsim button{height:32px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:#021414;background:linear-gradient(135deg,#2ee6cf,#58e3df);display:inline-flex;align-items:center;gap:5px}

/* ── o'ng panel: robot boshi, waveform, gap pufagi, izoh, savol ── */
.vl-side{display:flex;flex-direction:column;min-height:0;gap:10px;padding:14px;border-radius:var(--vl-r)}
.vl-robot{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.vl-wave{display:flex;align-items:center;justify-content:center;gap:4px;height:26px}
.vl-wave i{width:5px;height:22px;border-radius:3px;background:linear-gradient(180deg,var(--vl-acc),var(--vl-acc2));transform:scaleY(.12);transform-origin:50% 50%;will-change:transform;opacity:.9;box-shadow:0 0 8px rgba(50,230,211,.4)}
.vl-state{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--vl-t3);display:inline-flex;align-items:center;gap:6px}
.vl-state::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--vl-t3)}
#lesson[data-robot="explaining"] .vl-state::before,#lesson[data-robot="speaking"] .vl-state::before{background:var(--vl-ok);box-shadow:0 0 8px var(--vl-ok)}
#lesson[data-robot="thinking"] .vl-state::before{background:var(--vl-purple);box-shadow:0 0 8px var(--vl-purple)}
#lesson[data-robot="listening"] .vl-state::before{background:var(--vl-gold);box-shadow:0 0 8px var(--vl-gold)}
#lesson[data-robot="paused"] .vl-state::before{background:var(--vl-t2)}
.vl-bubble{
  flex:none;position:relative;padding:11px 14px;border-radius:16px 16px 16px 4px;font-size:13.5px;line-height:1.45;color:var(--vl-t1);
  background:rgba(33,230,190,.09);border:1px solid rgba(45,255,210,.25);min-height:44px;max-height:110px;overflow:auto;
}
.vl-bubble:empty{display:none}
.vl-bubble.answer{background:rgba(157,120,255,.1);border-color:rgba(157,120,255,.35)}
.l-narr{flex:none;max-height:clamp(70px,14vh,150px);overflow-y:auto;font-size:12.5px;line-height:1.5;color:var(--vl-t2);padding:8px 4px 6px;border-top:1px solid var(--vl-line)}
.l-narr::before{content:'Slayd izohi';display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--vl-t3);margin-bottom:4px}
.l-narr:empty{display:none}
.l-chat{flex:1;min-height:60px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:6px 2px;border-top:1px solid var(--vl-line)}
.l-chat:empty::before{content:'Dars davomida savol bersangiz — dars pauza bo‘ladi, robot javob beradi, keyin davom etadi';font-size:11.5px;color:var(--vl-t3);line-height:1.55;text-align:center;padding:12px 8px}
.l-chat .m-user{max-width:92%;font-size:12.5px;padding:7px 11px;border-radius:14px 14px 4px 14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);color:var(--vl-t1)}
.l-chat .m-ai{gap:8px}
.l-chat .m-ai .av{width:24px;height:24px;font-size:.75rem;border-radius:7px;background:var(--vl-accs);border-color:rgba(45,255,210,.25);color:var(--vl-acct)}
.l-chat .m-ai .txt{font-size:12.5px;padding-top:2px;color:var(--vl-t1)}
.l-chat .m-ai .txt a{color:var(--vl-acct)}
.vl-resume{flex:none;display:flex;justify-content:center}
.vl-resume button{height:38px;padding:0 16px;border-radius:12px;font-size:13px;font-weight:600;color:#021414;background:linear-gradient(135deg,#2ee6cf,#58e3df);display:inline-flex;align-items:center;gap:7px;box-shadow:0 8px 24px rgba(52,230,210,.28)}
.l-ask{flex:none;display:flex;align-items:center;gap:4px;background:rgba(5,15,30,.6);border:1px solid var(--vl-line2);border-radius:22px;padding:4px 4px 4px 14px;transition:border-color .2s,box-shadow .2s}
.l-ask:focus-within{border-color:var(--vl-accss);box-shadow:0 0 0 3px rgba(50,230,211,.1)}
.l-ask input{flex:1;min-width:0;background:none;border:0;color:var(--vl-t1);font-family:var(--font-sans);font-size:14px;padding:8px 0}
.l-ask input:focus{outline:none}
.l-ask input::placeholder{color:var(--vl-t3)}
.l-ask button{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--vl-t2);transition:color .2s,background .2s}
.l-ask button:hover{color:var(--vl-t1);background:rgba(255,255,255,.08)}
#lSend{background:linear-gradient(135deg,#2ee6cf,#58e3df);color:#021414}
#lSend:hover{color:#021414}
#lMic.rec{color:var(--vl-gold);background:rgba(244,189,99,.14);animation:vl-pulse 1.2s infinite}

/* ── pastki pleyer ── */
.vl-ctrl{grid-column:1/-1;display:flex;align-items:center;gap:12px;height:56px;padding:0 12px 0 8px;border-radius:18px}
.vl-ctrl > button{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--vl-t1);transition:background .2s,color .2s}
.vl-ctrl > button:hover{background:rgba(255,255,255,.08)}
#lPlay{background:linear-gradient(135deg,#2ee6cf,#58e3df);color:#021414;box-shadow:0 6px 20px rgba(52,230,210,.28)}
#lPlay:hover{color:#021414;background:linear-gradient(135deg,#3af0d8,#6ff0ec)}
.vl-time{font-family:var(--font-mono);font-size:12.5px;color:var(--vl-t2);min-width:44px;text-align:center;letter-spacing:.04em}
.vl-seek{flex:1;min-width:120px;height:28px;display:flex;align-items:center;cursor:pointer;touch-action:none;outline:none}
.vl-seek:focus-visible .vl-seek-track{box-shadow:0 0 0 2px var(--vl-accss)}
.vl-seek-track{position:relative;width:100%;height:6px;border-radius:999px;background:rgba(255,255,255,.1);transition:height .15s}
.vl-seek:hover .vl-seek-track{height:8px}
.vl-seek-fill{position:absolute;inset:0;border-radius:999px;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--vl-acc),var(--vl-acc2));box-shadow:0 0 14px rgba(50,230,211,.5)}
.vl-seek-segs{position:absolute;inset:0;pointer-events:none}
.vl-seek-segs i{position:absolute;top:-2px;bottom:-2px;width:2px;margin-left:-1px;background:rgba(2,8,23,.9);border-radius:1px}
.vl-pending{font-size:11.5px;color:var(--vl-acct);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.vl-pending::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--vl-acc);animation:vl-pulse 1.1s infinite}
.vl-vol{display:flex;align-items:center;gap:6px}
.vl-vol button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--vl-t2)}
.vl-vol button:hover{color:var(--vl-t1);background:rgba(255,255,255,.08)}
.vl-vol input{width:86px;accent-color:var(--vl-acc);cursor:pointer}
.vl-rate{width:auto!important;min-width:44px;height:32px!important;padding:0 10px;border-radius:999px!important;font-family:var(--font-mono);font-size:12.5px;color:var(--vl-t1)!important;border:1px solid var(--vl-line2);background:rgba(5,15,30,.5)}
.vl-rate:hover{border-color:var(--vl-accss)}

/* ── butun ekran (html:fullscreen) — joylashuv o'zgarmaydi, chetlar ixcham ── */
:fullscreen .vl-player{padding:10px 12px}

/* ── kichik desktop (1366×768 va past balandlik): panel torroq, robot kichikroq ── */
@media (max-height:800px){
  .vl-player{grid-template-columns:minmax(0,1fr) clamp(280px,22vw,380px);gap:10px 12px;padding:10px 12px}
  #lDock .holo-stage{width:min(100%,clamp(150px,24vh,240px))}
  .vl-bubble{max-height:84px;font-size:13px}
  .vl-ctrl{height:50px}
  .vl-cards{gap:10px}
  .vl-card{padding:12px 14px 10px}
  .vl-card .ic{width:38px;height:38px}
}
@media (max-width:1180px){
  .vl-player{grid-template-columns:minmax(0,1fr) 280px}
  .vl-cards{width:min(100%,720px)}
  .vl-plan{width:280px}
}
/* planshet / mobil: panel pastda, slayd tepada (desktop birinchi, lekin buzilmaydi) */
@media (max-width:860px){
  .vl-player{grid-template-columns:1fr;grid-template-rows:minmax(0,1.3fr) minmax(0,1fr) auto;padding:8px}
  .vl-side{flex-direction:row;flex-wrap:wrap;padding:10px}
  .vl-robot{width:96px}
  #lDock .holo-stage{width:90px}
  .vl-bubble{flex:1;min-width:0}
  .l-narr{display:none}
  .l-chat{width:100%;min-height:40px}
  .l-ask{width:100%}
  .vl-cards{grid-template-columns:1fr}
  .vl-gen{flex-direction:column;align-items:center}
  .vl-plan{width:100%;align-self:stretch}
  .vl-thought{left:auto;right:4%;top:0}
  .vl-vol input{display:none}
  .vl-pending{display:none}
}

/* ══════════ GUDOK: ovozli so'rovnoma (lesson-call.js) ══════════ */
#vlCall.on{color:#fff;background:linear-gradient(135deg,#ff6b6b,#e0394f);box-shadow:0 0 0 4px rgba(255,107,107,.14),0 6px 18px rgba(224,57,79,.35)}
#vlCall.on:hover{color:#fff}
.vl-call{
  width:100%;display:flex;flex-direction:column;gap:10px;padding:14px 16px 12px;border-radius:20px;
  background:linear-gradient(135deg,rgba(13,28,52,.86),rgba(7,18,35,.8));border:1px solid var(--vl-line2);
  box-shadow:0 14px 44px rgba(0,0,0,.32),0 0 30px rgba(50,230,211,.08);
}
.vl-call-top{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--vl-t2)}
.vl-call-st{display:inline-flex;align-items:center;gap:8px;color:var(--vl-t1);font-weight:600}
.vl-call-st .lvl{width:8px;height:8px;border-radius:50%;background:var(--vl-t3)}
.vl-call[data-mode="listen"] .lvl{background:var(--vl-gold);box-shadow:0 0 10px var(--vl-gold);animation:vl-pulse 1s infinite}
.vl-call[data-mode="speak"] .lvl{background:var(--vl-ok);box-shadow:0 0 10px var(--vl-ok)}
.vl-call[data-mode="think"] .lvl{background:var(--vl-purple);box-shadow:0 0 10px var(--vl-purple);animation:vl-pulse .8s infinite}
.vl-call-step{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--vl-acct);padding:3px 9px;border-radius:999px;background:var(--vl-accs);border:1px solid rgba(45,255,210,.25)}
.vl-call-end{margin-left:auto;display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;border-radius:9px;font-size:12px;color:#FFB4AE;border:1px solid rgba(255,123,114,.3);background:rgba(255,123,114,.08)}
.vl-call-end:hover{background:rgba(255,123,114,.16)}
.vl-call-q{font-family:var(--vl-disp);font-size:clamp(16px,2vh,20px);font-weight:700;letter-spacing:-.02em;color:#fff;min-height:1.3em;line-height:1.3}
.vl-call-q:not(:empty)::after{content:"";display:inline-block;width:2px;height:.9em;margin-left:3px;vertical-align:-.1em;background:var(--vl-acct);animation:vl-pulse 1s steps(2) infinite}
.vl-call[data-mode="listen"] .vl-call-q::after,.vl-call[data-mode="manual"] .vl-call-q::after{display:none}
.vl-call-topic{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:rgba(33,230,190,.09);border:1px solid rgba(45,255,210,.35);box-shadow:0 0 24px rgba(50,230,211,.14)}
.vl-call-topic i{font-style:normal;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--vl-acct)}
.vl-call-topic b{flex:1;font-family:var(--vl-disp);font-size:clamp(17px,2.2vh,22px);font-weight:800;letter-spacing:-.02em;color:#fff}
.vl-call-topic .ok{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#021414;background:var(--vl-ok)}
.vl-call-heard{font-size:13px;color:var(--vl-t2);min-height:1.2em}
.vl-call-heard:not(:empty)::before{content:"Siz: ";color:var(--vl-t3)}
.vl-call-heard.flash{animation:vl-flash .6s ease}
@keyframes vl-flash{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:none}}
.vl-call-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.vl-call-sum span{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:12px;background:rgba(5,15,30,.5);border:1px solid var(--vl-line);font-size:13.5px;color:var(--vl-t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:border-color .3s,color .3s}
.vl-call-sum span i{font-style:normal;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--vl-t3)}
.vl-call-sum span.set{color:#fff;border-color:rgba(45,255,210,.35)}
.vl-call-sum span.set i{color:var(--vl-acct)}
.vl-call-chips{display:flex;flex-wrap:wrap;gap:8px}
.vl-call-chips button{height:34px;padding:0 13px;border-radius:999px;font-size:13px;color:var(--vl-t1);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);transition:border-color .2s,background .2s}
.vl-call-chips button:hover{border-color:var(--vl-accss);background:var(--vl-accs)}
.vl-call-in{display:flex;align-items:center;gap:6px;padding:4px 4px 4px 12px;border-radius:14px;background:rgba(5,15,30,.55);border:1px solid var(--vl-line)}
.vl-call-in:focus-within{border-color:var(--vl-accss)}
.vl-call-in input{flex:1;min-width:0;height:34px;background:none;border:0;color:var(--vl-t1);font-size:14px}
.vl-call-in input:focus{outline:none}
.vl-call-in button{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--vl-t2)}
.vl-call-in button:hover{color:var(--vl-t1);background:rgba(255,255,255,.08)}
.vl-call-in button[type="submit"]{background:linear-gradient(135deg,#2ee6cf,#58e3df);color:#021414}
.vl-call-in .mic.rec{color:var(--vl-gold);background:rgba(244,189,99,.14);animation:vl-pulse 1.2s infinite}
@media (max-height:800px){ .vl-call{gap:8px;padding:10px 14px} .vl-call-sum span{padding:6px 10px;font-size:12.5px} }

/* gudok faol: so'rovnoma paneli inputning tagida — kartalar va «yoki» yashirinadi, robot ixcham */
#lesson[data-call="on"] .vl-or,#lesson[data-call="on"] .vl-cards{display:none}
#lesson[data-call="on"] #vlDock1 .holo-stage{width:clamp(150px,22vh,300px)}
#lesson[data-call="on"] .vl-hero{gap:clamp(8px,1.4vh,16px)}

/* ══════════ DARS SOZLAMALARI: davomiylik · fan · daraja ══════════ */
.vl-opts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;width:min(100%,820px)}
.vl-dur{display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 4px 0 14px;border-radius:999px;
  background:rgba(5,15,30,.55);border:1px solid rgba(130,190,255,.2)}
.vl-opt-l{display:inline-flex;align-items:center;gap:6px;margin-right:6px;font-size:12.5px;color:var(--vl-t2);white-space:nowrap}
.vl-dur button{height:32px;min-width:62px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600;color:var(--vl-t2);
  transition:color .2s,background .25s,box-shadow .25s,transform .2s}
.vl-dur button:hover{color:var(--vl-t1);background:rgba(255,255,255,.06)}
.vl-dur button.on{color:#021414;background:linear-gradient(135deg,#2ee6cf,#58e3df);box-shadow:0 6px 20px rgba(52,230,210,.3),0 0 0 1px rgba(255,255,255,.18) inset}
.vl-dur button:focus-visible,.vl-sel select:focus-visible{outline:2px solid var(--vl-acct);outline-offset:2px}
.vl-sel{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 14px;border-radius:999px;font-size:12.5px;color:var(--vl-t2);
  background:rgba(5,15,30,.55);border:1px solid rgba(130,190,255,.2);transition:border-color .2s}
.vl-sel:focus-within,.vl-sel:hover{border-color:var(--vl-accss)}
.vl-sel select{height:32px;max-width:132px;padding:0 6px;border:0;border-radius:999px;background:transparent;color:var(--vl-t1);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.vl-sel select option{background:#0b1830;color:#F7FAFF}
.vl-budget{flex:none;height:26px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:11.5px;
  color:var(--vl-gold);background:rgba(244,189,99,.1);border:1px solid rgba(244,189,99,.3)}
.vl-waitsim button em{font-style:normal;font-family:var(--font-mono);font-weight:500;opacity:.75}
@media (max-height:800px){ .vl-dur,.vl-sel{height:36px} .vl-dur button,.vl-sel select{height:28px} .vl-or{display:none} }
@media (max-width:560px){ .vl-opt-l{display:none} .vl-dur{padding-left:4px} .vl-sel{flex:1;min-width:0} .vl-sel select{flex:1;max-width:none;min-width:0} }

/* ══════════ SEHRLI ATMOSFERA ══════════
   Faqat transform/opacity animatsiyalari (GPU). Qatlam canvas ustida, kontent ostida. */
.vl-magic{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;contain:strict}
#lesson > section{z-index:1}
.vl-aur{position:absolute;display:block;width:78vmax;height:78vmax;border-radius:50%;opacity:.85;will-change:transform}
.vl-aur.a1{left:-28vmax;top:-34vmax;background:radial-gradient(closest-side,rgba(157,120,255,.17),rgba(90,99,224,.07) 55%,transparent 72%);animation:vl-aur1 38s ease-in-out infinite alternate}
.vl-aur.a2{right:-30vmax;bottom:-40vmax;background:radial-gradient(closest-side,rgba(46,230,207,.15),rgba(66,201,255,.06) 55%,transparent 72%);animation:vl-aur2 46s ease-in-out infinite alternate}
@keyframes vl-aur1{to{transform:translate3d(16vmax,9vmax,0) scale(1.18)}}
@keyframes vl-aur2{to{transform:translate3d(-14vmax,-10vmax,0) scale(1.12)}}
.vl-mote{--s:3px;--d:14s;--w:0s;--x:0px;position:absolute;width:var(--s);height:var(--s);border-radius:50%;opacity:0;will-change:transform,opacity;
  background:radial-gradient(circle,#fff 0,rgba(95,240,222,.95) 35%,rgba(95,240,222,0) 72%);
  box-shadow:0 0 calc(var(--s)*2.2) rgba(95,240,222,.6);
  animation:vl-mote var(--d) linear var(--w) infinite}
.vl-mote.vio{background:radial-gradient(circle,#fff 0,rgba(176,148,255,.95) 35%,rgba(176,148,255,0) 72%);box-shadow:0 0 calc(var(--s)*2.2) rgba(157,120,255,.6)}
.vl-mote.gold{background:radial-gradient(circle,#fff 0,rgba(250,208,128,.95) 35%,rgba(250,208,128,0) 72%);box-shadow:0 0 calc(var(--s)*2.2) rgba(244,189,99,.6)}
@keyframes vl-mote{
  0%{transform:translate3d(0,0,0) scale(.5);opacity:0}
  12%{opacity:.95}
  50%{transform:translate3d(var(--x),-16vh,0) scale(1)}
  82%{opacity:.7}
  100%{transform:translate3d(calc(var(--x)*-.6),-34vh,0) scale(.4);opacity:0}
}
.vl-comet{position:absolute;display:block;width:150px;height:2px;border-radius:2px;opacity:0;will-change:transform,opacity;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(190,240,255,.9) 70%,#fff)}
.vl-comet.c1{left:8%;top:14%;animation:vl-comet 17s ease-in 4s infinite}
.vl-comet.c2{left:52%;top:6%;animation:vl-comet 23s ease-in 13s infinite}
@keyframes vl-comet{
  0%{transform:rotate(24deg) translate3d(0,0,0) scaleX(.3);opacity:0}
  2%{opacity:1}
  7%{transform:rotate(24deg) translate3d(46vw,0,0) scaleX(1);opacity:0}
  100%{transform:rotate(24deg) translate3d(46vw,0,0);opacity:0}
}
/* pleyerda slayd asosiy — uchqunlar kamayadi, uchar yulduz yo'q */
#lesson[data-stage="play"] .vl-mote.extra,#lesson[data-stage="play"] .vl-comet{display:none}
#lesson[data-stage="play"] .vl-aur{opacity:.55}
#lesson.vl-lite .vl-aur{animation:none}

/* sarlavha: sekin oqadigan yorug'lik */
.vl-hero h1{background-size:220% 100%;animation:vl-shine 9s ease-in-out infinite alternate}
@keyframes vl-shine{to{background-position:100% 0}}
/* robot holatiga qarab halqa: o'ylaganda binafsha va tezroq, tushuntirganda nafas oladi */
#lesson[data-robot="thinking"] .vl-orbit::before{border-top-color:rgba(176,148,255,.85);animation-duration:7s;
  background:radial-gradient(circle closest-side,rgba(157,120,255,.2),rgba(90,99,224,.07) 50%,transparent 74%)}
#lesson[data-robot="thinking"] .vl-orbit::after{animation-duration:11s;background:radial-gradient(circle 6px at 50% 0, rgba(200,180,255,1), rgba(176,148,255,0) 70%)}
#lesson[data-robot="listening"] .vl-orbit::before{border-top-color:rgba(244,189,99,.85)}
.vl-robot::before{content:"";position:absolute;left:50%;top:44%;width:128%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%) scale(.8);opacity:0;transition:opacity .5s;
  background:radial-gradient(closest-side,rgba(46,230,207,.2),rgba(66,201,255,.07) 55%,transparent 72%)}
#lesson[data-robot="explaining"] .vl-robot::before,#lesson[data-robot="speaking"] .vl-robot::before{opacity:1;animation:vl-breathe 3.2s ease-in-out infinite}
#lesson[data-robot="thinking"] .vl-robot::before{opacity:1;background:radial-gradient(closest-side,rgba(157,120,255,.24),rgba(90,99,224,.08) 55%,transparent 72%);animation:vl-breathe 1.6s ease-in-out infinite}
@keyframes vl-breathe{50%{transform:translate(-50%,-50%) scale(1.02)}}
.vl-robot > *{position:relative}
/* slayd ramkasi: sehrli nur (opacity bilan nafas oladi) + slayd almashganda yorug'lik to'lqini */
.vl-slide::before{content:"";position:absolute;inset:-10px;border-radius:26px;pointer-events:none;z-index:0;opacity:.5;
  background:radial-gradient(ellipse at 50% 100%,rgba(46,230,207,.22),transparent 60%),radial-gradient(ellipse at 0 0,rgba(157,120,255,.2),transparent 55%);
  animation:vl-glow 6s ease-in-out infinite alternate}
@keyframes vl-glow{to{opacity:1}}
.vl-slide::after{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;z-index:4;opacity:0;overflow:hidden;
  background:linear-gradient(105deg,transparent 38%,rgba(190,245,255,.16) 47%,rgba(255,255,255,.3) 50%,rgba(200,180,255,.16) 53%,transparent 62%);
  background-size:260% 100%;background-position:120% 0}
.vl-slide.vl-cast::after{animation:vl-cast 1s ease-out}
@keyframes vl-cast{0%{opacity:0;background-position:120% 0}18%{opacity:1}100%{opacity:0;background-position:-40% 0}}
/* generatsiya: tayyor bo'lgan slayd kartasi «sehr bilan» paydo bo'ladi, progress chizig'ida yorug'lik oqadi */
.vl-thumb.ready{animation:vl-pop .6s cubic-bezier(.2,1.3,.4,1) backwards}
@keyframes vl-pop{0%{transform:scale(.86);opacity:.2}60%{box-shadow:0 0 0 3px rgba(95,240,222,.35),0 0 34px rgba(95,240,222,.45)}100%{transform:none}}
.vl-pbar{position:relative}
.vl-pbar::after{content:"";position:absolute;inset:0;border-radius:999px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-100%);animation:vl-sweep 2.4s ease-in-out infinite}
@keyframes vl-sweep{to{transform:translateX(100%)}}
.vl-thought{animation:vl-float 4.5s ease-in-out infinite alternate}
@keyframes vl-float{to{transform:translateY(-6px)}}
.vl-bubble{transition:background .4s,border-color .4s}
@media (prefers-reduced-motion:reduce){
  .vl-aur,.vl-mote,.vl-comet,.vl-hero h1,.vl-slide::before,.vl-pbar::after,.vl-thought,.vl-thumb.ready,.vl-robot::before{animation:none!important}
  .vl-mote,.vl-comet{display:none}
}

/* `#lesson button{background:none;color:inherit}` (ID o'ziga xosligi) asosiy tugmalar gradientini bosib qo'yardi —
   bosh amallar yana yorqin: yuborish, davomiylik tanlovi, «hoziroq boshlash», «davom ettirish» */
#lesson #vlGo,#lesson .vl-dur button.on,#lesson .vl-link button,#lesson .vl-gen-actions button.pri,
#lesson .vl-resume button,#lesson .vl-waitsim button{color:#021414;background:linear-gradient(135deg,#2ee6cf,#58e3df)}
#lesson #vlGo:hover{background:linear-gradient(135deg,#3af0d8,#6ff0ec)}
#lesson #vlGo{position:relative}
#lesson #vlGo::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(95,240,222,.5);opacity:0;pointer-events:none;animation:vl-ping 2.6s ease-out infinite}
@media (prefers-reduced-motion:reduce){#lesson #vlGo::after{animation:none}}
@media (max-width:560px){
  .vl-dur{width:100%;justify-content:center}
  .vl-sel{flex:1 1 40%}
}

/* ══════════ LANDING: qulayroq va sehrli ══════════ */
.vl-lead{margin:-4px 0 2px;max-width:640px;text-align:center;font-size:clamp(13px,1.6vh,15.5px);line-height:1.45;color:var(--vl-t2)}
.vl-quick{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px;width:min(100%,860px)}
.vl-quick > span{display:grid;place-items:center;color:var(--vl-gold)}
#lesson .vl-quick button{height:32px;padding:0 13px;border-radius:999px;font-size:12.5px;color:var(--vl-t1);
  background:rgba(157,120,255,.09);border:1px solid rgba(157,120,255,.28);transition:transform .2s,border-color .2s,background .2s,box-shadow .25s}
#lesson .vl-quick button:hover,#lesson .vl-quick button:focus-visible{outline:none;transform:translateY(-2px);border-color:rgba(176,148,255,.7);background:rgba(157,120,255,.18);box-shadow:0 8px 22px rgba(120,90,230,.28)}
/* manba kartalari ixcham: belgi chapda, matn o'ngda — forma bir qarashda ko'rinadi */
.vl-card{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:1px;align-items:center;padding:12px 14px}
.vl-card .ic{grid-row:1 / span 2;margin-bottom:0;width:40px;height:40px}
.vl-card b{align-self:end}
.vl-card > span:last-child{align-self:start}
.vl-ask{box-shadow:0 0 0 1px rgba(95,240,222,.08),0 18px 50px rgba(0,0,0,.35),0 0 46px rgba(95,240,222,.1)}
/* sehrli doira */
.vl-rune{position:absolute;left:50%;top:50%;width:138%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;overflow:visible;
  fill:none;stroke:rgba(95,240,222,.2);stroke-width:.5;animation:vl-spin 90s linear infinite reverse;will-change:transform}
.vl-rune polygon{stroke:rgba(176,148,255,.2)}
.vl-rune .dot{fill:rgba(250,208,128,.75);stroke:none}
#lesson[data-robot="thinking"] .vl-rune{stroke:rgba(176,148,255,.42);animation-duration:16s}
#lesson[data-robot="thinking"] .vl-rune polygon{stroke:rgba(95,240,222,.4)}
@media (max-height:800px){ .vl-lead{display:none} .vl-quick button{height:28px} }
@media (max-width:860px){ .vl-cards{grid-template-columns:1fr} }

/* ══════════ GENERATSIYA SAHNASI: varaqlar, pat-qalam, yulduzchalar ══════════ */
.vl-pages,.vl-stars{position:absolute;inset:0;pointer-events:none}
.vl-pages{--r:clamp(120px,19vh,235px)}
.vl-page{--d:8s;--w:0s;--k:1;--t:0deg;position:absolute;left:50%;top:50%;width:30px;height:40px;margin:-20px 0 0 -15px;border-radius:3px;
  background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(205,232,255,.8));box-shadow:0 0 14px rgba(150,220,255,.55),0 4px 10px rgba(0,0,0,.3);
  display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 6px;opacity:.9;will-change:transform;backface-visibility:visible;
  animation:vl-fly var(--d) linear var(--w) infinite}
.vl-page.front{z-index:2}
.vl-page b{display:block;height:2px;border-radius:2px;background:rgba(40,80,130,.45)}
.vl-page b:last-child{width:60%}
@keyframes vl-fly{
  0%{transform:rotate(var(--t)) translateX(calc(var(--r)*var(--k))) rotate(calc(var(--t)*-1)) rotateY(0) rotateZ(-12deg) scale(.8)}
  50%{transform:rotate(calc(var(--t) + 180deg)) translateX(calc(var(--r)*var(--k)*.82)) rotate(calc(var(--t)*-1 - 180deg)) rotateY(200deg) rotateZ(14deg) scale(1.05)}
  100%{transform:rotate(calc(var(--t) + 360deg)) translateX(calc(var(--r)*var(--k))) rotate(calc(var(--t)*-1 - 360deg)) rotateY(360deg) rotateZ(-12deg) scale(.8)}
}
.vl-stars s{--w:0s;position:absolute;width:12px;height:12px;margin:-6px;text-decoration:none;opacity:0;will-change:transform,opacity;
  background:radial-gradient(circle,#fff 0,rgba(250,208,128,.9) 30%,transparent 62%);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  animation:vl-star 4.9s ease-in-out var(--w) infinite}
@keyframes vl-star{0%,70%,100%{opacity:0;transform:scale(.2) rotate(0)}80%{opacity:1;transform:scale(1.5) rotate(60deg)}90%{opacity:.5;transform:scale(.8) rotate(100deg)}}
/* yozilayotgan varaq + pat-qalam (6 s sikl: 4 qator yoziladi → varaq yorishadi → slaydlar tomon uchadi) */
.vl-scribe{position:absolute;right:calc(50% + clamp(130px,20vh,250px));top:50%;width:132px;height:172px;margin-top:-96px;pointer-events:none}
.vl-sheet{position:absolute;inset:0;border-radius:8px;transform-origin:50% 100%;
  background:linear-gradient(165deg,rgba(255,255,255,.97),rgba(214,236,255,.88));
  box-shadow:0 0 0 1px rgba(255,255,255,.5),0 0 34px rgba(120,210,255,.4),0 18px 40px rgba(0,0,0,.4);
  animation:vl-sheet 6s ease-in-out infinite}
.vl-sheet em{position:absolute;left:16px;top:16px;width:46%;height:9px;border-radius:5px;background:linear-gradient(90deg,#2ee6cf,#42c9ff)}
.vl-sheet b{position:absolute;left:16px;height:5px;border-radius:3px;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#5b6f8f,#8ea3c4)}
.vl-sheet .l1{top:42px;width:98px;animation:vl-l1 6s linear infinite}
.vl-sheet .l2{top:68px;width:98px;animation:vl-l2 6s linear infinite}
.vl-sheet .l3{top:94px;width:98px;animation:vl-l3 6s linear infinite}
.vl-sheet .l4{top:120px;width:74px;animation:vl-l4 6s linear infinite}
@keyframes vl-l1{0%{transform:scaleX(0)}15%,96%{transform:scaleX(1)}97%,100%{transform:scaleX(0)}}
@keyframes vl-l2{0%,17%{transform:scaleX(0)}32%,96%{transform:scaleX(1)}97%,100%{transform:scaleX(0)}}
@keyframes vl-l3{0%,34%{transform:scaleX(0)}49%,96%{transform:scaleX(1)}97%,100%{transform:scaleX(0)}}
@keyframes vl-l4{0%,51%{transform:scaleX(0)}64%,96%{transform:scaleX(1)}97%,100%{transform:scaleX(0)}}
@keyframes vl-sheet{
  0%{transform:perspective(600px) rotateY(14deg) rotateZ(-4deg) scale(.9);opacity:0}
  5%,68%{transform:perspective(600px) rotateY(14deg) rotateZ(-4deg) scale(1);opacity:1;filter:none}
  78%{transform:perspective(600px) rotateY(0) rotateZ(0) scale(1.06);opacity:1;filter:brightness(1.25)}
  95%,100%{transform:perspective(600px) translate3d(190px,150px,0) rotateZ(24deg) scale(.22);opacity:0}
}
.vl-quill{position:absolute;left:0;top:0;width:74px;height:74px;margin:-70px 0 0 -4px;transform-origin:6% 95%;
  filter:drop-shadow(0 0 8px rgba(250,208,128,.8));animation:vl-quill 6s linear infinite;will-change:transform}
@keyframes vl-quill{
  0%{transform:translate(16px,45px) rotate(-6deg)}
  15%{transform:translate(114px,45px) rotate(4deg)}
  17%{transform:translate(16px,71px) rotate(-6deg)}
  32%{transform:translate(114px,71px) rotate(4deg)}
  34%{transform:translate(16px,97px) rotate(-6deg)}
  49%{transform:translate(114px,97px) rotate(4deg)}
  51%{transform:translate(16px,123px) rotate(-6deg)}
  64%{transform:translate(90px,123px) rotate(4deg)}
  74%,92%{transform:translate(128px,70px) rotate(-22deg)}
  100%{transform:translate(16px,45px) rotate(-6deg)}
}
@media (max-width:1180px){ .vl-scribe{display:none} }
#lesson.vl-lite .vl-page:nth-child(n+4),#lesson.vl-lite .vl-stars{display:none}
@media (prefers-reduced-motion:reduce){
  .vl-page,.vl-stars s,.vl-sheet,.vl-sheet b,.vl-quill,.vl-rune{animation:none!important}
  .vl-pages,.vl-stars,.vl-quill{display:none}
  .vl-sheet b{transform:none}
}
.vl-gen .vl-orbit{margin:clamp(18px,4.5vh,52px) 0}