/* VibeAgent · методология урока — v1 */
.lo{position:relative;overflow:hidden;background:linear-gradient(134deg,#FCFAFF 0%,#F6F2FE 52%,#FBF8FF 100%);border:1px solid #EDE7FA;border-radius:var(--r-l);padding:22px 24px;margin-bottom:24px}
.lo__glow{position:absolute;right:-50px;top:-70px;width:230px;height:230px;pointer-events:none;background:radial-gradient(circle,rgba(201,167,255,.30) 0%,rgba(98,0,255,.05) 46%,transparent 70%)}
.lo__top{position:relative;z-index:1;display:flex;gap:14px;align-items:flex-start}
.lo__ic{width:40px;height:40px;flex:none;border-radius:13px;background:linear-gradient(140deg,var(--indigo-2),var(--indigo));display:grid;place-items:center;box-shadow:0 6px 18px rgba(98,0,255,.24)}
.lo__goal{font-family:'Unbounded',sans-serif;font-size:17px;font-weight:600;letter-spacing:-.028em;line-height:1.42;margin-top:2px}
.lo__cols{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:18px;padding-top:18px;border-top:1px solid #EAE3F8}
.lo__h{display:flex;align-items:center;gap:7px;margin-bottom:10px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo-dark)}
.lo__li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;line-height:1.5;margin-bottom:9px;color:#33333A}
.lo__li svg{flex:none;margin-top:3px}
.lo__pills{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
@media(max-width:760px){.lo__cols{grid-template-columns:1fr;gap:14px}.lo{padding:18px}}

.ltabs{display:flex;gap:3px;background:var(--faint);border:1px solid var(--line);border-radius:13px;padding:3px;width:fit-content;max-width:100%;margin-bottom:20px}
.ltabs button{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px;border:0;background:transparent;border-radius:10px;font:inherit;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;transition:.15s;white-space:nowrap}
.ltabs button:hover{color:var(--ink)}
.ltabs button.on{background:var(--surface);color:var(--indigo-dark);box-shadow:0 1px 2px rgba(17,17,20,.08)}
.ltabs button .c{font-family:'JetBrains Mono',monospace;font-size:11px;opacity:.7}
.lpane{display:none;animation:lfade .3s cubic-bezier(.22,1,.36,1)}
.lpane.on{display:block}
@keyframes lfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.th{border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);margin-bottom:10px;overflow:hidden;transition:border-color .18s,box-shadow .18s}
.th:hover{border-color:#DDD6F3}
.th.open{border-color:#DDD6F3;box-shadow:0 1px 2px rgba(17,17,20,.03),0 8px 22px rgba(98,0,255,.05)}
.th__h{display:flex;align-items:center;gap:13px;padding:15px 18px;cursor:pointer;user-select:none}
.th__ic{width:32px;height:32px;flex:none;border-radius:10px;background:var(--tint);display:grid;place-items:center}
.th__t{flex:1;font-size:15.5px;font-weight:600;letter-spacing:-.008em}
.th__cv{flex:none;transition:transform .2s cubic-bezier(.22,1,.36,1);color:#A1A1AA}
.th.open .th__cv{transform:rotate(90deg);color:var(--indigo)}
.th__b{display:none;padding:2px 18px 18px 63px;font-size:15px;line-height:1.62;color:#3F3F46}
.th.open .th__b{display:block}
@media(max-width:640px){.th__b{padding-left:18px}}

.ps{list-style:none;counter-reset:ps;padding:0;margin:0}
.ps>li{position:relative;counter-increment:ps;padding:0 0 26px 44px;margin-left:15px;border-left:2px solid var(--line)}
.ps>li:last-child{border-left-color:transparent;padding-bottom:4px}
.ps>li::before{content:counter(ps,decimal-leading-zero);position:absolute;left:-16px;top:-2px;width:30px;height:30px;border-radius:50%;background:var(--surface);border:1.5px solid #DDD6F3;color:var(--indigo-dark);font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;display:grid;place-items:center;box-shadow:0 2px 6px rgba(98,0,255,.08)}
.ps__t{font-size:16px;font-weight:600;letter-spacing:-.01em;margin-bottom:7px;padding-top:3px}
.ps__b{font-size:15px;line-height:1.6;color:#3F3F46}

.pc{background:#0B0B0D;border-radius:14px;overflow:hidden;margin:13px 0;border:1px solid rgba(255,255,255,.08)}
.pc__h{display:flex;align-items:center;gap:9px;padding:10px 12px 10px 14px;border-bottom:1px solid rgba(255,255,255,.09)}
.pc__t{flex:1;min-width:0;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.48);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc__cp{flex:none;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#fff;border-radius:9px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s}
.pc__cp:hover{background:rgba(255,255,255,.15)}
.pc__cp.done{background:rgba(15,153,96,.22);border-color:rgba(15,153,96,.45);color:#5EE0A4}
.pc pre{margin:0;padding:15px;overflow-x:auto;color:#E6E6EB;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.68;white-space:pre-wrap;word-break:break-word;max-height:420px}

.co{display:flex;gap:12px;padding:14px 16px;border-radius:14px;margin:13px 0;font-size:14.5px;line-height:1.56;border:1px solid}
.co svg{flex:none;margin-top:1px}
.co b{display:block;font-weight:700;margin-bottom:3px}
.co--tip{background:#F8F4FF;border-color:#E7DCFC;color:#3D2073}
.co--warn{background:#FFFBEB;border-color:#FCE7A2;color:#7A4C05}
.co--danger{background:#FEF2F2;border-color:#FBD5D5;color:#991B1B}
.co--ok{background:#EDF9F3;border-color:#CDE9DB;color:#0A6B44}

.sh{margin:14px 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);cursor:zoom-in;transition:border-color .18s,transform .18s}
.sh:hover{border-color:var(--lavender);transform:translateY(-1px)}
.sh img{width:100%;display:block}
.sh figcaption{padding:9px 14px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line)}

.lbx{position:fixed;inset:0;z-index:150;background:rgba(11,11,13,.92);display:none;place-items:center;padding:40px;cursor:zoom-out;backdrop-filter:blur(3px)}
.lbx.on{display:grid;animation:lfade .22s ease}
.lbx img{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 30px 90px rgba(0,0,0,.6)}

.ck{border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);padding:4px 18px;margin:13px 0}
.ck label{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line);cursor:pointer;font-size:14.5px;line-height:1.5}
.ck label:last-child{border-bottom:0}
.ck input{margin-top:2px;width:17px;height:17px;accent-color:var(--indigo);flex:none;cursor:pointer}
.ck input:checked+span{color:var(--muted);text-decoration:line-through}

.lact{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 18px;border:1px solid #DDD6F3;background:var(--tint);color:var(--indigo-dark);border-radius:12px;font-size:14.5px;font-weight:600;margin:12px 0;transition:.15s}
.lact:hover{background:#EBE1FF;transform:translateY(-1px)}

.lp{font-size:15px;line-height:1.62;color:#3F3F46;margin:11px 0}
.lempty{padding:34px;text-align:center;color:var(--muted);font-size:14.5px;border:1.5px dashed var(--line-2);border-radius:var(--r-m);background:#FCFCFD}

/* Практика: одна карточка запуска режима фокуса */
.px{display:flex;gap:22px;align-items:flex-start;padding:28px;border-radius:24px;border:1px solid rgba(98,0,255,.14);
  background:radial-gradient(520px 260px at 100% 0%,rgba(139,61,255,.12),transparent 70%),linear-gradient(180deg,#FBFAFF,#fff);margin:6px 0 10px}
.px__i{flex:none;width:64px;height:64px;border-radius:20px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(142deg,#8B3DFF,#6200FF 62%,#4C00CC);box-shadow:0 12px 28px rgba(98,0,255,.3)}
.px__i svg{margin-left:3px}
.px__b{flex:1;min-width:0}
.px__k{font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6200FF}
.px__h{margin:10px 0 8px;font-size:24px;line-height:1.2;font-weight:600;letter-spacing:-.01em;color:#111114}
.px__p{margin:0;color:#52525B;font-size:15.5px;line-height:1.6;max-width:620px}
.px__m{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 20px}
.px__m span{font-size:13px;color:#52525B;background:#fff;border:1px solid #ECECF1;border-radius:999px;padding:6px 12px}
.px__a{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.px__go{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border:0;border-radius:16px;cursor:pointer;
  background:#6200FF;color:#fff;font:600 16px/1 inherit;font-family:inherit;box-shadow:0 10px 24px rgba(98,0,255,.28);transition:transform .15s,background .15s}
.px__go:hover{background:#5200d6;transform:translateY(-1px)}
.px__re{border:0;background:none;color:#71717A;font:500 14px/1 inherit;font-family:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){
  .px{flex-direction:column;gap:16px;padding:22px}
  .px__i{width:52px;height:52px;border-radius:16px}
  .px__h{font-size:20px}
  .px__go{width:100%;justify-content:center}
}