/* Live Session 2 styles (classes prefixed .ls2-) */

/* vertical flow boxes in question illustrations */
.ls2-flow{display:flex;flex-direction:column;align-items:center;gap:4px}
.ls2-box{border:1.5px solid;border-radius:12px;padding:9px 16px;text-align:center;font-size:14.5px;min-width:200px;max-width:100%;line-height:1.4}
.ls2-box b{display:block;font-family:var(--head);font-size:15px}
.ls2-box code,.ls2-st code,.ls2-doc,.ls2-idlist{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.ls2-box code{font-size:13.5px;word-break:break-word}
.ls2-box span{display:block;font-size:13px;color:var(--muted)}
.ls2-box.plain{background:#FAF9FC;border-color:#C9C3D6}
.ls2-box.blue{background:var(--blue);border-color:var(--blue-l)}
.ls2-box.peach{background:var(--peach);border-color:var(--peach-l)}
.ls2-box.dark{background:var(--brand);border-color:var(--brand);color:#fff}
.ls2-box.dark span{color:#D9CFE8}
.ls2-box.qm{background:#fff;border:2px dashed var(--brand);color:var(--brand);font-weight:800;font-size:20px;min-width:120px}
.ls2-box.qm b{font-size:15px}
.ls2-down{color:#8A84A0;font-size:20px;line-height:1}

/* Q1 pipeline */
.ls2-pipe{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:6px}
.ls2-st{flex:1 1 130px;max-width:190px;border:1.5px solid;border-radius:12px;padding:9px 10px;font-size:13px;opacity:.22;transition:opacity .45s,transform .45s,box-shadow .45s;display:flex;flex-direction:column;gap:6px}
.ls2-st>b{font-family:var(--head);font-size:14px}
.ls2-st code{font-size:12px;word-break:break-word}
.ls2-st .toks{gap:3px}.ls2-st .tk{font-size:12px;padding:2px 6px}
.ls2-st.on{opacity:1}
.ls2-st.cur{transform:translateY(-3px);box-shadow:0 0 0 3px var(--accent)}
.ls2-st.plain{background:#FAF9FC;border-color:#C9C3D6}.ls2-st.sage{background:var(--sage);border-color:var(--sage-l)}
.ls2-st.blue{background:var(--blue);border-color:var(--blue-l)}.ls2-st.lav{background:var(--lav);border-color:var(--lav-l)}
.ls2-st.peach{background:var(--peach);border-color:var(--peach-l)}.ls2-st.dark{background:var(--brand);border-color:var(--brand);color:#fff}
.ls2-bb{font-size:12.5px;color:#D9CFE8}
.ls2-vecs{display:flex;gap:4px;flex-wrap:wrap}
.ls2-ar{align-self:center;color:#8A84A0;font-weight:800}
.ls2-ar::before{content:"→"}
@media (max-width:700px){
  .ls2-pipe{flex-direction:column;align-items:stretch}
  .ls2-st{max-width:none;flex:none}
  .ls2-ar::before{content:"↓"}
}

/* Q2 scraped document */
.ls2-doc{background:#FCFCFD;border:1px solid var(--line);border-radius:12px;padding:8px;display:grid;gap:4px;font-size:13.5px}
.ls2-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 8px;border-radius:8px;border:1.5px solid transparent;transition:all .45s;line-height:1.4}
.ls2-line .txt{flex:1 1 200px;min-width:0;word-break:break-word}
.ls2-tag{font-family:var(--font);font-size:11.5px;font-weight:700;border-radius:99px;padding:2px 8px;background:#F1EFF5;color:var(--muted);white-space:nowrap}
.ls2-badge{font-family:var(--font);font-size:11.5px;font-weight:800;border-radius:99px;padding:2px 8px;background:var(--sage);color:var(--green);white-space:nowrap}
.ls2-line.cur{border-color:var(--accent)}
.ls2-line.gone{background:var(--red-soft);opacity:.55}
.ls2-line.gone .txt{text-decoration:line-through;color:var(--red)}
.ls2-line.gone .ls2-tag{background:var(--pink);color:#7A1F12}
.ls2-line.fixed{background:#FFF8E5}
.ls2-line.fixed .ls2-tag{background:var(--yellow);color:#7A5A00}
.ls2-line.kept{background:#F3FAEF}

/* Q3 tokeniser */
.ls2-inp{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--muted)}
.ls2-inp input{font:600 17px var(--font);padding:11px 14px;border-radius:12px;border:2px solid var(--line);color:var(--ink);background:#fff;width:100%}
.ls2-inp input:focus{outline:none;border-color:var(--brand)}
.ls2-samples{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.ls2-samples .btn{font-weight:600}
.ls2-steps{display:grid;gap:12px;margin-top:12px}
.ls2-k{display:block;font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ls2-tokrow{display:flex;flex-wrap:wrap;gap:8px}
.ls2-tok{display:inline-flex;flex-direction:column;align-items:center;gap:4px;animation:pop .4s both}
.ls2-id{font-size:12.5px;font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums;background:var(--lav);border-radius:6px;padding:1px 7px}
.ls2-tok.unk .tk{background:var(--pink);border-color:var(--pink-l)}
.ls2-tok.unk .ls2-id{background:var(--pink);color:#7A1F12}
.ls2-idlist{display:block;background:var(--brand);color:#fff;border-radius:10px;padding:10px 14px;font-size:15px;word-break:break-word}

/* Q4 vocabulary */
.ls2-vgrid{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:18px;align-items:center}
@media (max-width:620px){.ls2-vgrid{grid-template-columns:minmax(0,1fr)}}
.ls2-vt{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;font-size:14.5px}
.ls2-vt .h,.ls2-vt .r{display:grid;grid-template-columns:80px 1fr;gap:10px;padding:6px 12px;transition:background .3s}
.ls2-vt .h{background:#F4F2F8;font-weight:800;font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.ls2-vt .r span:first-child{font-variant-numeric:tabular-nums;color:var(--brand);font-weight:700}
.ls2-vt .r span:last-child{font-weight:600}
.ls2-vt .r+.r{border-top:1px solid #F1EFF5}
.ls2-vt .r.on{background:var(--yellow)}
.ls2-vt .ls2-vfoot{font-size:12.5px;color:var(--muted);padding:6px 12px;background:#FAF9FC;border-top:1px solid var(--line)}
.ls2-lanes{display:grid;gap:14px}
.ls2-lane{border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;transition:border-color .3s}
.ls2-lane.on{border-color:var(--green-l)}
.ls2-lane>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ls2-arr{font-size:13px;color:var(--muted);font-weight:700}
.ls2-lane .slot-out{min-width:58px;justify-content:center;border-style:dashed}
.ls2-lane .slot-out.new{border-style:solid}
.ls2-pairs{display:grid;grid-template-columns:auto auto auto;gap:8px 12px;justify-content:center;align-items:center}
.ls2-eqv{color:var(--muted);font-weight:800;font-size:18px}

/* Q5 splits */
.ls2-exs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.ls2-exs button{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:5px 12px;font-size:13.5px;font-weight:700;color:var(--muted)}
.ls2-exs button.on{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.ls2-split{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;min-height:64px}
.ls2-words{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.ls2-word{display:inline-flex;flex-wrap:wrap;gap:3px}
.ls2-word .tk{animation:pop .35s both;padding:4px 8px}
.ls2-stats{display:flex;gap:18px}
.ls2-stats div{font-size:12.5px;color:var(--muted);font-weight:600;text-align:center}
.ls2-stats b{display:block;font-size:24px;color:var(--brand);font-variant-numeric:tabular-nums;line-height:1.1}
.ls2-cmp3{margin-top:12px;max-width:560px;--lw:120px}
.ls2-two{display:grid;gap:14px}
.ls2-cmp thead th:nth-child(4){background:var(--sage);border-radius:0 10px 0 0}
.ls2-cmp thead th:nth-child(3){border-radius:0}

/* Q6 BPE */
.ls2-bpe{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:700px){.ls2-bpe{grid-template-columns:minmax(0,1fr)}}
.ls2-bwords{display:grid;gap:8px}
.ls2-static{justify-content:center}
.ls2-brow{display:flex;align-items:center;gap:10px}
.ls2-brow .toks{gap:4px}
.ls2-brow .tk{padding:4px 9px;font-size:15px}
.ls2-eow{font-size:11.5px!important;color:var(--muted);background:#F4F2F8!important;border-style:dashed!important}
.ls2-eow-in{font-size:10px;color:var(--muted);margin-left:2px}
.ls2-times{font-weight:800;color:var(--muted);font-size:14px;white-space:nowrap}
.ls2-bpairs .brow{margin:5px 0}
.ls2-bpairs .brow .t{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:13px}
.ls2-merges{margin-top:14px;background:#FAF9FC;border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.ls2-merges ol{margin:0;padding-left:22px;display:grid;gap:3px;font-size:14.5px}
.ls2-merges li b{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:13.5px}

/* Q8 IDs vs embeddings */
.ls2-ids .ls2-pt{transition:transform 1.1s cubic-bezier(.3,.7,.3,1)}
.ls2-ids .axA,.ls2-ids .axB,.ls2-ids .la,.ls2-ids .lb{transition:opacity .6s}
.ls2-ids.a .axB,.ls2-ids.a .lb{opacity:0}
.ls2-ids.b .axA,.ls2-ids.b .la{opacity:0}
.ls2-wrapfoot{flex-wrap:wrap}
.ls2-wrapfoot .cap{flex:1 1 240px}
.ls2-btns{display:flex;gap:8px;flex-wrap:wrap}
.wg-foot .btn.on{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}

/* Q8 embedding space */
.ls2-w{cursor:pointer}
.ls2-w:focus{outline:none}
.ls2-w.on circle{r:8;stroke:#1B1530;stroke-width:2.5}
.ls2-w.on text{font-weight:800}
.ls2-nn{max-width:520px;margin:0 auto;--lw:84px}

/* Q9 orange */
.ls2-octx{transition:transform 1s cubic-bezier(.3,.7,.3,1),opacity .5s}
.ls2-oar{transition:all .6s}
.ls2-sents{display:grid;gap:8px;justify-items:center;font-size:17px;font-weight:600}

/* Q10 cosine */
.ls2-cos{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:18px;align-items:center}
@media (max-width:620px){.ls2-cos{grid-template-columns:minmax(0,1fr)}}
.ls2-cossvg{touch-action:none;max-width:300px}
.ls2-handle{cursor:grab}
.ls2-handle:active{cursor:grabbing}

/* Q11 training */
.ls2-train{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:center}
@media (max-width:700px){.ls2-train{grid-template-columns:minmax(0,1fr)}}
.ls2-tp{transition:transform 1.4s cubic-bezier(.3,.7,.3,1)}
.ls2-cl{transition:opacity .8s}
.wg .ls2-loss{max-width:260px;margin:8px 0 0}
.ls2-loss .lp{transition:d .6s}

/* results explorer */
.ls2-xp{display:flex;flex-direction:column;align-items:stretch;gap:2px;max-width:380px;margin:0 auto}
.ls2-xs{border:1.5px solid;border-radius:12px;padding:9px 14px;text-align:left;display:flex;flex-direction:column;gap:2px;transition:box-shadow .2s,transform .2s;color:var(--ink)}
.ls2-xs b{font-family:var(--head);font-size:15px}
.ls2-xs span{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12.5px;color:var(--muted);word-break:break-word}
.ls2-xs:hover{transform:translateX(2px)}
.ls2-xs.on{box-shadow:0 0 0 4px var(--accent)}
.ls2-xs.plain{background:#FAF9FC;border-color:#C9C3D6}.ls2-xs.sage{background:var(--sage);border-color:var(--sage-l)}
.ls2-xs.blue{background:var(--blue);border-color:var(--blue-l)}.ls2-xs.lav{background:var(--lav);border-color:var(--lav-l)}
.ls2-xs.peach{background:var(--peach);border-color:var(--peach-l)}.ls2-xs.pink{background:var(--pink);border-color:var(--pink-l)}
.ls2-xs.dark{background:var(--brand);border-color:var(--brand);color:#fff}
.ls2-xs.dark span{color:#D9CFE8}
.ls2-xar{text-align:center;color:#8A84A0;font-size:16px;line-height:1.1}

.ls2-w text,.ls2-ids text,.ls2-tp text{paint-order:stroke;stroke:#FCFBFE;stroke-width:3.5px;stroke-linejoin:round}
.ls2-mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.92em;background:#F4F2F8;border-radius:5px;padding:1px 5px;color:var(--ink);font-weight:700}
@media (max-width:620px){.ls2-cmp th,.ls2-cmp td{padding:8px 6px;font-size:13px;overflow-wrap:anywhere}.ls2-cmp thead th{font-size:13.5px}}