/* ============================================================
   demos.css — styling for interactive teaching widgets
   ============================================================ */

/* shared controls */
.tk-btn{ align-self:flex-start; font-family:var(--font-mono); font-size:18px;
  color:var(--on-accent); background:var(--accent); border:none; border-radius:100px;
  padding:13px 26px; cursor:pointer; transition:transform .15s, filter .15s; font-weight:600; }
.tk-btn:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.tk-btn:active{ transform:translateY(0); }

.seg{ display:inline-flex; background:var(--bg-3); border:1px solid var(--line);
  border-radius:100px; padding:5px; gap:4px; align-self:flex-start; }
.seg-b{ font-family:var(--font-mono); font-size:17px; color:var(--ink-2); background:none;
  border:none; border-radius:100px; padding:10px 22px; cursor:pointer; transition:.18s; }
.seg-b.on{ background:var(--accent); color:var(--on-accent); font-weight:600; }

/* ---------- tokenizer ---------- */
.tk{ display:flex; flex-direction:column; gap:22px; }
.tk-input{ font-family:var(--font-body); font-size:30px; color:var(--ink);
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:16px;
  padding:20px 26px; outline:none; transition:border-color .15s; }
.tk-input:focus{ border-color:var(--accent); }
.tk-chips{ display:flex; flex-wrap:wrap; gap:10px; min-height:64px; }
.tk-chip{ display:flex; flex-direction:column; gap:4px; align-items:center;
  background:color-mix(in srgb, var(--c) 16%, var(--bg-2));
  border:1px solid color-mix(in srgb, var(--c) 45%, transparent);
  border-radius:12px; padding:12px 16px; }
body.anim-on .tk-chip{ animation:tkpop .3s both; }
@keyframes tkpop{ from{ opacity:0; transform:translateY(8px) scale(.95); } to{ opacity:1; transform:none; } }
.tk-tx{ font-family:var(--font-mono); font-size:26px; color:var(--ink); }
.tk-vec{ font-family:var(--font-mono); font-size:13px; color:var(--ink-2); letter-spacing:.04em; }
.tk-meta{ font-family:var(--font-mono); font-size:19px; color:var(--ink-2); }
.tk-meta b{ color:var(--accent); }

/* ---------- embed similarity ---------- */
.es-rows{ display:flex; flex-direction:column; gap:14px; margin-top:6px; }
.es-row{ display:flex; align-items:center; gap:24px; }
.es-name{ width:120px; font-family:var(--font-head); font-weight:600; font-size:30px; }
.es-nums{ display:flex; gap:10px; }
.es-num{ font-family:var(--font-mono); font-size:24px; color:var(--ink); background:var(--bg-3);
  border:1px solid var(--line); border-radius:10px; padding:8px 16px; min-width:64px; text-align:center; }
.es-lab{ font-family:var(--font-mono); font-size:19px; color:var(--ink-2); }
.es-lab b{ color:var(--accent); font-size:24px; }
.es-bar{ height:16px; background:var(--bg-3); border:1px solid var(--line); border-radius:100px;
  overflow:hidden; }
.es-fill{ height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border-radius:100px; transition:width .8s cubic-bezier(.2,.7,.2,1); }
.es-note{ font-size:22px; color:var(--ink-2); line-height:1.4; }

/* ---------- vector plane ---------- */
.vplane{ width:100%; max-width:560px; height:auto; }
.vgrid{ stroke:var(--line); stroke-width:1; }
.vaxis{ stroke:var(--line-2); stroke-width:2; }
.varr{ stroke:var(--ink-2); stroke-width:4; stroke-linecap:round;
  stroke-dasharray:600; stroke-dashoffset:600; opacity:.001; }
.varr.king{ stroke:var(--accent); stroke-width:5; }
.varr.draw{ animation:vdraw .55s ease forwards; opacity:1; }
body:not(.anim-on) .varr{ opacity:1 !important; stroke-dashoffset:0 !important; animation:none !important; }
@keyframes vdraw{ from{ stroke-dashoffset:600; opacity:1; } to{ stroke-dashoffset:0; opacity:1; } }
.vlabel{ font-family:var(--font-mono); font-size:21px; fill:var(--ink-2); opacity:0;
  transition:opacity .4s; }
.vlabel.king{ fill:var(--accent); font-weight:700; }
.vlabel.shown{ opacity:1; }
body:not(.anim-on) .vlabel{ opacity:1 !important; }
.vmath{ font-size:30px; color:var(--ink); }
.vmath sub{ font-size:.6em; color:var(--ink-2); }

/* ---------- next-token / temperature bars ---------- */
.nt-prompt{ font-family:var(--font-head); font-size:46px; font-weight:600; letter-spacing:-.01em; }
.nt-blank{ color:var(--accent); border-bottom:3px solid var(--accent); padding:0 6px; }
.nt-blank.filled{ animation:ntflash .4s ease; }
@keyframes ntflash{ 0%{ transform:scale(1.3); } 100%{ transform:scale(1); } }
.nt-bars{ display:flex; flex-direction:column; gap:12px; }
.nt-row{ display:flex; align-items:center; gap:20px; transition:.2s; }
.nt-row.sel .nt-fill{ background:var(--accent); }
.nt-row.sel{ transform:scale(1.01); }
.nt-tok{ width:160px; font-family:var(--font-mono); font-size:24px; color:var(--ink); text-align:right; }
.nt-track{ flex:1; height:30px; background:var(--bg-3); border:1px solid var(--line);
  border-radius:8px; overflow:hidden; }
.nt-fill{ height:100%; background:linear-gradient(90deg,var(--accent-2),var(--accent));
  border-radius:8px; transition:width .5s cubic-bezier(.2,.7,.2,1); }
.nt-p{ width:80px; font-family:var(--font-mono); font-size:22px; color:var(--ink-2); }

.tmp-head{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.tmp-lab{ font-family:var(--font-mono); font-size:20px; color:var(--ink-2); letter-spacing:.04em; }
.tmp-slider{ -webkit-appearance:none; appearance:none; width:340px; height:8px;
  background:var(--bg-3); border-radius:100px; outline:none; }
.tmp-slider::-webkit-slider-thumb{ -webkit-appearance:none; width:28px; height:28px;
  border-radius:50%; background:var(--accent); cursor:pointer; border:3px solid var(--bg); box-shadow:var(--glow); }
.tmp-slider::-moz-range-thumb{ width:28px; height:28px; border-radius:50%; background:var(--accent);
  cursor:pointer; border:3px solid var(--bg); }
.tmp-val{ font-family:var(--font-head); font-weight:600; font-size:34px; color:var(--accent); min-width:90px; }
.ctx-val{ font-family:var(--font-mono); font-size:24px; font-weight:500; white-space:nowrap; min-width:auto; }
.tmp-mood{ font-family:var(--font-mono); font-size:18px; color:var(--ink-2); padding:7px 16px;
  border:1px solid var(--line); border-radius:100px; }
.tmp-samples{ display:flex; flex-wrap:wrap; gap:10px; min-height:48px; }
.tmp-chip{ font-family:var(--font-mono); font-size:21px; color:var(--ink); background:var(--bg-3);
  border:1px solid var(--line); border-radius:10px; padding:8px 16px; }
body.anim-on .tmp-chip{ animation:tkpop .3s both; }

/* ---------- context window ---------- */
.ctx-stream{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.ctx-tok{ font-family:var(--font-mono); font-size:26px; color:var(--ink); background:var(--bg-3);
  border:1px solid var(--line-2); border-radius:10px; padding:10px 16px; transition:.3s; }
.ctx-tok.lost{ opacity:.28; filter:grayscale(1); border-style:dashed; }
.ctx-tok.target{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:600; }
.ctx-arrow{ font-size:30px; color:var(--ink-2); margin:0 6px; }
.ctx-pred{ font-size:24px; color:var(--ink-2); line-height:1.4; }
.ctx-pred b{ color:var(--ink); }
.ctx-status{ align-self:flex-start; font-family:var(--font-mono); font-size:20px; font-weight:600;
  padding:11px 22px; border-radius:100px; }
.ctx-status.ok{ color:var(--accent-2); background:color-mix(in srgb, var(--accent-2) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--accent-2) 40%, transparent); }
.ctx-status.bad{ color:#ff6b6b; background:rgba(255,107,107,.12); border:1px solid rgba(255,107,107,.4); }

/* ---------- context chart ---------- */
.cc-chart{ display:flex; flex-direction:column; gap:14px; }
.cc-row{ display:flex; align-items:center; gap:24px; }
.cc-name{ width:230px; font-family:var(--font-head); font-weight:600; font-size:26px; }
.cc-name span{ display:inline-block; margin-left:10px; font-family:var(--font-mono); font-weight:400;
  font-size:16px; color:var(--ink-3); }
.cc-track{ flex:1; height:40px; }
.cc-fill{ height:100%; width:0; background:linear-gradient(90deg,var(--accent-2),var(--accent));
  border-radius:10px; transition:width .9s cubic-bezier(.2,.7,.2,1); display:flex; align-items:center;
  justify-content:flex-end; min-width:64px; }
.cc-k{ font-family:var(--font-mono); font-size:19px; color:var(--on-accent); font-weight:600; padding-right:14px; }

/* ---------- RAG pipeline ---------- */
.rag-stage{ display:grid; grid-template-columns:1.1fr .6fr 1.2fr 1fr; gap:22px; align-items:stretch; flex:1; }
.rag-col{ display:flex; flex-direction:column; gap:14px; }
.rag-col.mid{ justify-content:flex-start; align-items:center; margin-top:84px; }
.rag-cap{ font-family:var(--font-mono); font-size:16px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); }
.rag-qchips{ display:flex; flex-direction:column; gap:10px; }
.rag-q{ text-align:left; font-family:var(--font-body); font-size:20px; color:var(--ink);
  background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:14px 18px;
  cursor:pointer; transition:.18s; }
.rag-q:hover{ border-color:var(--line-2); }
.rag-q.on{ border-color:var(--accent); background:var(--accent-soft); }
.rag-emb{ font-family:var(--font-mono); font-size:22px; color:var(--accent); border:1px dashed var(--line-2);
  border-radius:14px; padding:20px; text-align:center; }
.rag-emb.pulse{ animation:ragpulse .6s ease; }
@keyframes ragpulse{ 0%{ box-shadow:0 0 0 0 var(--accent-soft); } 100%{ box-shadow:0 0 0 22px transparent; } }
.rag-store{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rag-doc{ font-size:17px; color:var(--ink-2); background:var(--bg-2); border:1px solid var(--line);
  border-radius:12px; padding:12px 14px; transition:.25s; }
.rag-doc b{ color:var(--ink-3); margin-right:6px; }
.rag-doc.hit{ color:var(--ink); border-color:var(--accent); background:var(--accent-soft); }
.rag-doc.hit b{ color:var(--accent); }
.rag-doc.pop{ animation:ragpop .4s ease; }
@keyframes ragpop{ 0%{ transform:scale(1); } 50%{ transform:scale(1.05); } 100%{ transform:scale(1); } }
.rag-ans{ background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:22px;
  opacity:.4; transform:translateY(8px); transition:.4s; }
.rag-ans.show{ opacity:1; transform:none; border-color:var(--accent); }
.rag-ans-h{ font-family:var(--font-mono); font-size:15px; color:var(--ink-3); display:block; margin-bottom:14px; }
.rag-ans-b{ font-family:var(--font-head); font-weight:600; font-size:26px; color:var(--accent); }

/* ---------- function-calling flow ---------- */
.ff-flow{ display:flex; flex-direction:column; gap:6px; flex:1; justify-content:center; max-width:760px; }
.ff-node{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:16px 24px;
  opacity:.6; transition:.35s; }
.ff-node.lit{ opacity:1; border-color:var(--accent); background:var(--accent-soft); transform:translateX(6px); }
.ff-n{ font-family:var(--font-mono); font-size:22px; color:var(--ink-3); }
.ff-node.lit .ff-n{ color:var(--accent); }
.ff-t{ font-family:var(--font-head); font-weight:600; font-size:24px; }
.ff-s{ font-family:var(--font-mono); font-size:17px; color:var(--ink-2); text-align:right; }
.ff-link{ text-align:center; color:var(--ink-3); font-size:18px; opacity:.3; transition:.3s; }
.ff-link.lit{ opacity:1; color:var(--accent); }

/* ---------- agent hub ---------- */
.ag-svg{ width:100%; max-width:820px; height:auto; }
.ag-link{ stroke:var(--line-2); stroke-width:2; stroke-dasharray:6 7; opacity:0; transition:opacity .4s; }
.ag-link.in{ opacity:1; animation:agdash 9s linear infinite; }
@keyframes agdash{ to{ stroke-dashoffset:-260; } }
.ag-node{ opacity:0; transform:scale(.8); transform-origin:var(--cx) var(--cy);
  transition:opacity .4s var(--d), transform .4s var(--d); }
.ag-node.in{ opacity:1; transform:scale(1); }
.ag-rect{ fill:var(--bg-2); stroke:var(--line-2); stroke-width:1.5; }
.ag-rect.big{ fill:var(--accent); stroke:var(--accent); }
.ag-node.tool .ag-rect{ stroke:var(--accent-2); }
.ag-node.know .ag-rect{ stroke:var(--ink-3); }
.ag-tx{ font-family:var(--font-mono); font-size:18px; fill:var(--ink); text-anchor:middle; }
.ag-tx.big{ font-family:var(--font-head); font-weight:700; font-size:30px; fill:var(--on-accent); }

/* ---------- finance orbit ---------- */
.orb-stage{ flex:1; display:grid; place-items:center; }
.orb-ring{ position:relative; width:520px; height:520px; }
.orb-hub{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:200px; height:200px; border-radius:50%; background:var(--bg-2); border:1px solid var(--accent);
  box-shadow:var(--glow); display:grid; place-content:center; text-align:center; gap:2px; }
.orb-hub-k{ font-family:var(--font-mono); font-size:16px; color:var(--ink-2); letter-spacing:.06em; }
.orb-hub b{ font-family:var(--font-head); font-weight:700; font-size:42px; color:var(--accent); }
.orb-node{ position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) translate(var(--x), var(--y)); width:170px;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:16px; padding:14px 16px;
  cursor:pointer; transition:border-color .18s, background .18s; display:flex; flex-direction:column; gap:5px; }
body.anim-on .orb-node, body.anim-on .orb-node.in{ animation:orbin .5s both var(--d); }
@keyframes orbin{ from{ opacity:0; transform:translate(-50%,-50%) translate(calc(var(--x)*.4), calc(var(--y)*.4)) scale(.8); } }
.orb-node:hover{ border-color:var(--accent); }
.orb-node.on{ border-color:var(--accent); background:var(--accent-soft); }
.orb-i{ font-family:var(--font-mono); font-size:14px; color:var(--accent); }
.orb-t{ font-family:var(--font-head); font-weight:600; font-size:19px; line-height:1.15; }
.orb-detail{ align-self:center; text-align:center; max-width:40ch; }
.orb-detail b{ font-family:var(--font-head); font-weight:600; font-size:30px; display:block; margin-bottom:8px; }
.orb-detail span{ font-size:23px; color:var(--ink-2); }
.orb-detail.show{ animation:fade .4s ease; }