/* ============ Animated explainers ============ */
.viz {
  margin: 0; border-radius: 20px; background: #12071f; color: #ede6fb;
  border: 1px solid #3a2660; padding: 16px 18px 16px; overflow: hidden; position: relative;
}
.viz-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px;
  font: 700 .75rem var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: #2dd4bf;
}
.viz-replay {
  flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #44306b; background: #22133a;
  color: #ede6fb; cursor: pointer; font-size: 1rem; transition: transform .3s, border-color .2s;
}
.viz-replay:hover { transform: rotate(-180deg); border-color: #2dd4bf; }
.viz-stage svg { width: 100%; height: auto; display: block; overflow: visible; }
.viz svg text { font-family: var(--font-body); fill: #ede6fb; }
.viz svg text.mut, .viz svg .mut { fill: #a89ec7; }
.viz-cap { margin: 12px 0 0; font-size: .88rem; color: #b7abd3; line-height: 1.5; }
.viz-slot { margin: 22px 0 6px; max-width: 68ch; }
.lesson .viz-slot { max-width: 100%; }

/* Animations only run once the figure is in view */
/* …and come to rest after a while (see SETTLE_MS in visuals.js) */
.viz.settled *, .viz.settled *::before, .viz.settled *::after { animation-play-state: paused !important; }
.viz:not(.play) *, .viz:not(.play) *::before, .viz:not(.play) *::after { animation-play-state: paused !important; }
.viz svg [class*="vz-"], .viz svg .nn-node, .viz svg .ag-st { transform-box: fill-box; transform-origin: center; }

@keyframes vz-pop { from { transform: scale(0); opacity: 0; } }
@keyframes vz-fade { from { opacity: 0; } }
@keyframes vz-up { from { transform: translateY(26px); opacity: 0; } }
@keyframes vz-left { from { transform: translateX(-22px); opacity: 0; } }
@keyframes vz-draw { from { stroke-dashoffset: 1; } }
@keyframes vz-flowing { to { stroke-dashoffset: -28; } }
@keyframes vz-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); filter: drop-shadow(0 0 12px #2dd4bf); } }
@keyframes vz-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes vz-seg { from { background: #2e1d4a; box-shadow: none; } }
@keyframes vz-grow { from { width: 0; } }

.vz-pop { animation: vz-pop .6s cubic-bezier(.2, .9, .3, 1.35) both; animation-delay: var(--d, 0s); }
.vz-fade { animation: vz-fade .7s ease both; animation-delay: var(--d, 0s); }
.vz-up { animation: vz-up .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0s); }
.vz-left { animation: vz-left .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0s); }
.vz-draw { stroke-dasharray: 1; animation: vz-draw 1.3s ease-out both; animation-delay: var(--d, 0s); }
.vz-flow { stroke-dasharray: 4 10; animation: vz-flowing 1s linear infinite; animation-delay: var(--d, 0s); }
.vz-beat { animation: vz-beat 1.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
.vz-bob { animation: vz-bob 1.6s ease-in-out infinite; animation-delay: var(--d, 0s); }

/* Lane: dots travelling from left to right */
.lane {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  height: 52px; padding: 0 12px; border-radius: 14px; background: #211238; border: 1px solid #3a2660; font-size: 1.5rem;
}
.lane > span { position: relative; z-index: 1; }
.lane i {
  position: absolute; left: 16%; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: #2dd4bf; box-shadow: 0 0 10px #2dd4bf; opacity: 0;
  animation: vz-lane var(--t, 2s) linear infinite; animation-delay: calc(var(--t, 2s) * var(--k, 0) / 3);
}
@keyframes vz-lane { 0% { left: 16%; opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { left: 72%; opacity: 0; } }

/* Next token */
.nt { display: grid; gap: 12px; justify-items: center; }
.nt-seq { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 40px; }
.nt-seq span {
  font: 600 1rem var(--font-mono); padding: 6px 10px; border-radius: 9px; background: #2a1844; border: 1px solid #44306b;
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.nt-seq.feed span { transform: translateY(4px); border-color: #a855f7; box-shadow: 0 6px 14px -6px #a855f7; }
.nt-seq span.new { background: #2dd4bf; color: #111; border-color: #2dd4bf; animation: vz-pop .45s cubic-bezier(.2, .9, .3, 1.4); }
.nt-arrow { font: .78rem var(--font-mono); color: #a89ec7; }
.nt-model {
  display: flex; gap: 12px; align-items: center; padding: 12px 18px; border-radius: 16px; min-width: 260px;
  background: linear-gradient(135deg, #3b1d6e, #7c3aed); border: 1px solid #8b5cf6; transition: box-shadow .3s;
}
.nt-model.think { box-shadow: 0 0 0 4px rgba(45, 212, 191, .25), 0 0 40px -6px #2dd4bf; }
.nt-model.think .nt-brain { animation: vz-beat .5s ease-in-out infinite; }
.nt-brain { font-size: 1.8rem; display: inline-block; }
.nt-model b { display: block; }
.nt-model small { font: .85rem var(--font-mono); color: #e8e0f5; }

/* Training vs inference */
.ti { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ti-col { background: #1c0f30; border: 1px solid #3a2660; border-radius: 16px; padding: 14px; }
.ti-col h5 { margin: 0 0 10px; font: 800 1.05rem var(--font-display); }
.ti-col ul { margin: 12px 0 0; padding: 0; list-style: none; font-size: .88rem; color: #c9bde3; }
.ti-col li { padding: 3px 0; }
.ti-col li::before { content: "• "; color: #2dd4bf; }
.ti-col.slow .lane i { background: #a855f7; box-shadow: 0 0 10px #a855f7; }
.ti-bar { height: 8px; border-radius: 99px; background: #2e1d4a; overflow: hidden; margin-top: 12px; }
.ti-bar b { display: block; height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(90deg, #7c3aed, #2dd4bf); animation: vz-grow 6s linear infinite; }
.ti-col.fast .ti-bar b { animation-duration: 1.1s; }

/* Prompt builder */
.pb { display: grid; grid-template-columns: 1fr 70px; gap: 16px; align-items: stretch; }
.pb-card { background: #f6f2fc; color: #1d1030; border-radius: 14px; padding: 14px 16px; display: grid; gap: 8px; align-content: start; font-size: .92rem; }
.pb-line.base { font-weight: 700; }
.pb-line { line-height: 1.4; }
.pb-tag { display: inline-block; font: 700 .7rem var(--font-mono); text-transform: uppercase; color: #111; padding: 2px 8px; border-radius: 99px; margin-right: 8px; }
.pb-meter { display: flex; flex-direction: column; align-items: center; gap: 6px; font: .72rem var(--font-mono); color: #a89ec7; }
.pb-segs { flex: 1; width: 28px; display: flex; flex-direction: column; gap: 4px; }
.pb-segs i { flex: 1; border-radius: 6px; background: #2dd4bf; box-shadow: 0 0 10px -2px #2dd4bf; }
.pb-segs i.vz-seg { animation: vz-seg .5s ease both; animation-delay: var(--d, 0s); }
.pb-segs i.on { background: #ec4899; box-shadow: none; }

/* Hallucination meter */
.hm { display: grid; gap: 12px; }
.hm-row { position: relative; background: #1c0f30; border: 1px solid #3a2660; border-radius: 14px; padding: 12px 14px; }
.hm-row p { margin: 0 0 8px; font-weight: 600; }
.hm-bar { display: grid; grid-template-columns: 100px 1fr; gap: 10px; align-items: center; font: .75rem var(--font-mono); color: #a89ec7; margin-top: 4px; }
.hm-bar > div { height: 10px; border-radius: 99px; background: #2e1d4a; overflow: hidden; }
.hm-bar b { display: block; height: 100%; width: var(--w); border-radius: 99px; animation: vz-grow 1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0s); }
.hm-bar b.conf { background: linear-gradient(90deg, #8b5cf6, #c084fc); }
.hm-bar b.true { background: #2dd4bf; }
.hm-bar b.false { background: #ec4899; }
.hm-stamp {
  position: absolute; right: 14px; top: 8px; font: 800 1rem var(--font-mono); font-style: normal; color: #ec4899;
  border: 3px solid #ec4899; border-radius: 8px; padding: 2px 8px; transform: rotate(-10deg);
  animation: vz-stamp .5s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: var(--d, 0s);
}
@keyframes vz-stamp { from { transform: scale(2.6) rotate(-10deg); opacity: 0; } }

/* Human in the loop */
.hl-track { position: relative; display: flex; justify-content: space-between; padding: 18px 4px 6px; }
.hl-track::before { content: ""; position: absolute; left: 12%; right: 12%; top: 46px; height: 3px; background: repeating-linear-gradient(90deg, #54407c 0 8px, transparent 8px 14px); }
.hl-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 30%; }
.hl-node span { width: 60px; height: 60px; display: grid; place-items: center; font-size: 1.8rem; border-radius: 18px; background: #2a1844; border: 2px solid #44306b; }
.hl-node small { font-weight: 600; font-size: .85rem; text-align: center; }
.hl-node.human span { animation: vz-human 6s ease-in-out infinite; }
@keyframes vz-human { 0%, 28%, 66%, 100% { border-color: #44306b; box-shadow: none; } 34%, 60% { border-color: #2dd4bf; box-shadow: 0 0 24px -4px #2dd4bf; } }
.hl-check { position: absolute; top: -10px; right: calc(50% - 40px); width: 26px; height: 26px; border-radius: 50%; background: #2dd4bf; color: #111; display: grid; place-items: center; font-size: .9rem; animation: vz-check 6s ease infinite; }
@keyframes vz-check { 0%, 40% { transform: scale(0); } 46% { transform: scale(1.3); } 50%, 95% { transform: scale(1); } 100% { transform: scale(0); } }
.hl-doc { position: absolute; top: 4px; left: 46%; font-size: 1.4rem; font-style: normal; z-index: 2; animation: vz-doc 6s ease-in-out infinite; }
@keyframes vz-doc {
  0% { left: 10%; opacity: 0; } 6% { opacity: 1; } 30% { left: 46%; } 62% { left: 46%; }
  88% { left: 82%; opacity: 1; } 100% { left: 82%; opacity: 0; }
}

/* ML boundary */
.mlb-line { transform-box: view-box; transform-origin: 240px 135px; transform: rotate(-30deg); animation: vz-mlb 7s ease-in-out infinite; }
@keyframes vz-mlb { 0% { transform: rotate(35deg); } 25% { transform: rotate(-75deg); } 50% { transform: rotate(4deg); } 70%, 100% { transform: rotate(-30deg); } }
.mlb-e { opacity: 0; }
.mlb-e4 { opacity: 1; }
.mlb-e1 { animation: vz-e1 7s steps(1) infinite; }
.mlb-e2 { animation: vz-e2 7s steps(1) infinite; }
.mlb-e3 { animation: vz-e3 7s steps(1) infinite; }
.mlb-e4 { animation: vz-e4 7s steps(1) infinite; }
@keyframes vz-e1 { 0% { opacity: 1; } 22% { opacity: 0; } }
@keyframes vz-e2 { 0% { opacity: 0; } 22% { opacity: 1; } 47% { opacity: 0; } }
@keyframes vz-e3 { 0% { opacity: 0; } 47% { opacity: 1; } 68% { opacity: 0; } }
@keyframes vz-e4 { 0% { opacity: 0; } 68% { opacity: 1; } }

/* Neural net */
.nn-node { fill: #2e1d4a; animation: vz-node 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes vz-node { 0%, 40%, 100% { fill: #2e1d4a; } 12% { fill: #2dd4bf; } }

/* Knobs */
.kn { display: grid; gap: 14px; }
.kn-desk { display: flex; justify-content: space-between; gap: 6px; padding: 14px; border-radius: 14px; background: #211238; border: 1px solid #3a2660; }
.kn-f { position: relative; width: 14px; height: 120px; }
.kn-f::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: #44306b; }
.kn-f i { position: absolute; left: 0; top: var(--e); width: 14px; height: 18px; border-radius: 4px; background: #a855f7; box-shadow: 0 0 8px -2px #a855f7; animation: vz-knob 3.4s cubic-bezier(.4, 0, .2, 1) both; animation-delay: var(--d, 0s); }
@keyframes vz-knob { 0% { top: var(--s); } 45% { top: var(--m); } 100% { top: var(--e); background: #2dd4bf; } }
.kn-f i { background: #2dd4bf; }
.kn-out { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; font: .8rem var(--font-mono); color: #a89ec7; }
.kn-bar { height: 12px; border-radius: 99px; background: #2e1d4a; overflow: hidden; }
.kn-bar b { display: block; height: 100%; width: 8%; border-radius: 99px; background: #ec4899; animation: vz-shrink 3.4s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes vz-shrink { from { width: 92%; } }

.loss-path { animation-duration: 3s; }

/* Denoise */
.dn { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; justify-content: center; }
.dn-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; width: min(240px, 100%); aspect-ratio: 1; }
.dn-grid i { border-radius: 3px; background: rgba(45, 212, 191, .5); transition: background .14s linear; }
.dn-side { display: grid; gap: 10px; min-width: 160px; }
.dn-prompt { font: .85rem var(--font-mono); color: #a89ec7; }
.dn-step { font: 800 1.3rem var(--font-display); }
.dn-bar { height: 8px; border-radius: 99px; background: #2e1d4a; overflow: hidden; }
.dn-bar b { display: block; height: 100%; width: 0; background: #2dd4bf; transition: width .14s linear; }

/* Transformer */
.rnn-box { fill: #211238; stroke: #44306b; animation: vz-rnn 3s linear infinite; animation-delay: var(--d, 0s); }
@keyframes vz-rnn { 0%, 18%, 100% { fill: #211238; } 2%, 15% { fill: #8b5cf6; } }
.tf-box { fill: #123f3c; stroke: #2dd4bf; stroke-width: 1.5; }
.tf-arc { animation: vz-draw 1.3s ease-out both, vz-fadepulse 2.4s ease-in-out 1.6s infinite; animation-delay: var(--d, 0s), 1.6s; }
@keyframes vz-fadepulse { 50% { opacity: .35; } }

/* Agent */
.ag-orbit { transform-box: view-box; transform-origin: 170px 140px; animation: vz-spin 4s linear infinite; }
@keyframes vz-spin { to { transform: rotate(360deg); } }
.ag-st { fill: #211238; stroke: #44306b; animation: vz-st 4s linear infinite; animation-delay: var(--d, 0s); }
@keyframes vz-st { 0%, 14% { fill: #123f3c; stroke: #2dd4bf; } 24%, 100% { fill: #211238; stroke: #44306b; } }

/* Fine-tuning */
.ft { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; align-items: center; }
.ft-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; border-radius: 16px; background: #211238; border: 1px solid #3a2660; text-align: center; }
.ft-card.special { border-color: #2dd4bf; box-shadow: 0 0 30px -14px #2dd4bf; }
.ft-emoji { font-size: 1.8rem; }
.ft-chip { font: 600 .75rem var(--font-mono); padding: 3px 9px; border-radius: 99px; background: #2e1d4a; }
.ft-card.special .ft-chip { background: #2dd4bf; color: #111; }
.ft-mid { display: grid; gap: 6px; text-align: center; font-size: .8rem; color: #a89ec7; }
.ft-mid .lane { font-size: 1.2rem; height: 44px; }

/* RLHF */
.rl { display: grid; gap: 12px; }
.rl-q { margin: 0; font-weight: 700; }
.rl-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rl-a { position: relative; display: flex; gap: 10px; padding: 12px; border-radius: 14px; background: #211238; border: 2px solid #3a2660; font-size: .88rem; }
.rl-a b { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #2e1d4a; font-size: .8rem; }
.rl-a.good { animation: vz-good 6s ease infinite; border-color: #2dd4bf; }
.rl-a.bad { animation: vz-bad 6s ease infinite; opacity: .5; }
@keyframes vz-good { 0%, 30% { border-color: #3a2660; } 40%, 90% { border-color: #2dd4bf; } 100% { border-color: #3a2660; } }
@keyframes vz-bad { 0%, 30% { opacity: 1; } 40%, 90% { opacity: .45; } 100% { opacity: 1; } }
.rl-thumb { position: absolute; right: -8px; top: -14px; font-size: 1.5rem; font-style: normal; animation: vz-thumb 6s ease infinite; }
@keyframes vz-thumb { 0%, 30% { transform: scale(0); } 38% { transform: scale(1.35); } 44%, 90% { transform: scale(1); } 100% { transform: scale(0); } }
.rl-gauge { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font: .78rem var(--font-mono); color: #a89ec7; }
.rl-gauge div { height: 10px; border-radius: 99px; background: #2e1d4a; overflow: hidden; }
.rl-gauge b { display: block; height: 100%; width: 72%; border-radius: 99px; background: linear-gradient(90deg, #8b5cf6, #2dd4bf); animation: vz-gauge 6s ease infinite; }
@keyframes vz-gauge { 0%, 45% { width: 45%; } 75%, 95% { width: 72%; } 100% { width: 45%; } }

/* Reasoning */
.rs-q { margin: 0 0 12px; font-weight: 700; }
.rs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rs-col { background: #211238; border: 1px solid #3a2660; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.rs-col h5 { margin: 0 0 4px; font: 800 1rem var(--font-display); }
.rs-col p { margin: 0; font: .9rem var(--font-mono); }
.rs-ans { font-weight: 700 !important; }
.rs-ans.bad { color: #ec4899; }
.rs-ans.good { color: #2dd4bf; }
.rs-time { margin-top: auto; padding-top: 6px; font: .75rem var(--font-mono); color: #a89ec7; }

/* Model effort */
.ef { display: grid; gap: 14px; }
.ef-switch { display: inline-flex; justify-self: start; border: 1px solid #44306b; border-radius: 12px; overflow: hidden; }
.ef-switch button { font: 700 .85rem var(--font-body); padding: 8px 16px; background: #211238; color: #c9bde3; border: 0; cursor: pointer; transition: background .2s, color .2s; }
.ef-switch button + button { border-left: 1px solid #44306b; }
.ef-switch button[aria-pressed="true"] { background: #2dd4bf; color: #111; }
.ef-think { background: #211238; border: 1px solid #3a2660; border-radius: 14px; padding: 10px 12px; min-height: 96px; }
.ef-think > span { display: block; font: .75rem var(--font-mono); color: #a89ec7; margin-bottom: 8px; }
.ef-tokens { display: flex; flex-wrap: wrap; gap: 5px; }
.ef-tokens span { font: .75rem var(--font-mono); padding: 3px 8px; border-radius: 7px; background: #2e1950; border: 1px solid #5a3f8a; color: #e8e0f5; animation: vz-pop .35s cubic-bezier(.2, .9, .3, 1.4) both; animation-delay: var(--d, 0s); }
.ef-bars { display: grid; gap: 8px; }
.ef-row { display: grid; grid-template-columns: 190px 1fr; gap: 10px; align-items: center; font: .78rem var(--font-mono); color: #a89ec7; }
.ef-row > div { height: 12px; border-radius: 99px; background: #2e1d4a; overflow: hidden; }
.ef-row b { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.ef-row b.q { background: #2dd4bf; }
.ef-row b.time { background: linear-gradient(90deg, #8b5cf6, #c084fc); }
.ef-row b.cost { background: #ec4899; }

/* Model size */
.ms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ms-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; border-radius: 16px; background: #1c0f30; border: 1px solid #3a2660; }
.ms-orb-wrap { height: 92px; display: grid; place-items: center; }
.ms-orb {
  width: var(--s); height: var(--s); border-radius: 50%; display: grid; place-items: center; font-size: calc(var(--s) * .45);
  background: radial-gradient(circle at 35% 30%, #c084fc, #7c3aed 70%); box-shadow: 0 0 24px -6px #a855f7;
}
.ms-card > b { font: 800 1.1rem var(--font-display); }
.ms-card small { font: .75rem var(--font-mono); color: #2dd4bf; }
.ms-where { font-size: .82rem; color: #c9bde3; margin-bottom: 6px; }
.ms-bar { display: grid; grid-template-columns: 70px 1fr; gap: 8px; align-items: center; font: .7rem var(--font-mono); color: #a89ec7; }
.ms-bar > div { height: 8px; border-radius: 99px; background: #2e1d4a; overflow: hidden; }
.ms-bar b { display: block; height: 100%; width: var(--w); border-radius: 99px; animation: vz-grow .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0s); }
.ms-bar b.skill { background: #2dd4bf; }
.ms-bar b.speed { background: #67e8f9; }
.ms-bar b.cost { background: #ec4899; }

/* Open vs closed */
.oc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.oc-card { background: #1c0f30; border: 1px solid #3a2660; border-radius: 16px; padding: 14px; }
.oc-card h5 { margin: 0 0 10px; font: 800 1rem var(--font-display); }
.oc-card p { margin: 10px 0 0; font-size: .88rem; color: #c9bde3; }
.oc-house { border: 2px dashed #2dd4bf; border-radius: 14px; padding: 6px; }
.oc-house small { display: block; font: .7rem var(--font-mono); color: #2dd4bf; margin: 0 0 4px 6px; }
.oc-house .lane i { animation-name: vz-lane-loop; }
@keyframes vz-lane-loop { 0% { left: 16%; opacity: 0; } 15% { opacity: 1; } 50% { left: 78%; } 85% { opacity: 1; } 100% { left: 16%; opacity: 0; } }

/* Prompt injection */
.inj { display: grid; gap: 10px; }
.inj-mail { position: relative; overflow: hidden; background: #f6f2fc; color: #1d1030; border-radius: 14px; padding: 14px 16px; font-size: .9rem; }
.inj-head { font-size: .8rem; color: #5b4f78; padding-bottom: 8px; border-bottom: 1px solid #e1d6f2; margin-bottom: 8px; }
.inj-mail p { margin: 6px 0 0; }
.inj-hidden { font: .8rem var(--font-mono); color: #e11d48; background: rgba(236, 72, 153, .12); border-radius: 6px; padding: 4px 6px; animation: vz-reveal 9s ease infinite; }
@keyframes vz-reveal { 0%, 18% { color: #f6f2fc; background: transparent; } 24%, 92% { color: #e11d48; background: rgba(236, 72, 153, .12); } 100% { color: #f6f2fc; background: transparent; } }
.inj-scan { position: absolute; left: 0; right: 0; top: 0; height: 40px; background: linear-gradient(transparent, rgba(45, 212, 191, .55), transparent); opacity: 0; animation: vz-scan 9s ease-in-out infinite; }
@keyframes vz-scan { 0% { top: -40px; opacity: 1; } 22% { top: 100%; opacity: 1; } 23%, 100% { opacity: 0; } }
.inj-agent, .inj-guard { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 14px; font-size: .92rem; }
.inj-agent { background: #2a1844; border: 1px solid #ec4899; animation: vz-step-a 9s ease infinite; }
.inj-guard { background: #123f3c; border: 1px solid #2dd4bf; font-weight: 600; animation: vz-step-b 9s ease infinite; }
@keyframes vz-step-a { 0%, 32% { opacity: 0; transform: translateY(10px); } 38%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes vz-step-b { 0%, 52% { opacity: 0; transform: scale(.9); } 58%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Data processing location (8s story: data flows to US/CN, contract appears, only EU remains) */
.dp-out { opacity: .25; animation: vz-dp-out 8s ease infinite; }
@keyframes vz-dp-out { 0%, 48% { opacity: 1; } 58%, 100% { opacity: .2; } }
.dp-in { opacity: 1; animation: vz-flowing 1s linear infinite, vz-dp-in 8s ease infinite; }
@keyframes vz-dp-in { 0%, 52% { opacity: 0; } 60%, 100% { opacity: 1; } }
.dp-us .dp-box, .dp-cn .dp-box { stroke: #54407c; animation: vz-dp-warn 8s ease infinite; }
@keyframes vz-dp-warn { 0%, 6% { stroke: #44306b; } 12%, 48% { stroke: #ec4899; } 58%, 100% { stroke: #54407c; } }
.dp-us, .dp-cn { opacity: .45; animation: vz-dp-dim 8s ease infinite; }
@keyframes vz-dp-dim { 0%, 48% { opacity: 1; } 58%, 100% { opacity: .45; } }
.dp-eu .dp-box { stroke: #2dd4bf; animation: vz-dp-eu 8s ease infinite; }
@keyframes vz-dp-eu { 0%, 52% { stroke: #44306b; filter: none; } 60%, 100% { stroke: #2dd4bf; filter: drop-shadow(0 0 8px rgba(45, 212, 191, .6)); } }
.dp-x { fill: #ec4899; animation: vz-dp-x 8s ease infinite; }
@keyframes vz-dp-x { 0%, 54% { opacity: 0; } 60%, 100% { opacity: 1; } }
.dp-ok { animation: vz-dp-x 8s ease infinite; }
.dp-deal { transform-box: fill-box; transform-origin: center; animation: vz-dp-deal 8s cubic-bezier(.2, .9, .3, 1.3) infinite; }
@keyframes vz-dp-deal { 0%, 44% { opacity: 0; transform: translateY(14px) scale(.9); } 52%, 100% { opacity: 1; transform: none; } }

/* Guardrails */
.gr-rail { fill: #7a6a9e; }
.gr-top { animation: vz-rail1 5s ease infinite; }
.gr-bot { animation: vz-rail2 5s ease infinite; }
@keyframes vz-rail1 { 0%, 16%, 30%, 100% { fill: #7a6a9e; } 20%, 26% { fill: #2dd4bf; } }
@keyframes vz-rail2 { 0%, 61%, 75%, 100% { fill: #7a6a9e; } 65%, 71% { fill: #2dd4bf; } }
.gr-road { animation: vz-road .9s linear infinite; }
@keyframes vz-road { to { stroke-dashoffset: -44; } }
.gr-car { animation: vz-car 5s ease-in-out infinite; }
@keyframes vz-car {
  0%, 100% { transform: translateY(0) rotate(0); } 20% { transform: translateY(-42px) rotate(-8deg); } 28% { transform: translateY(-24px) rotate(4deg); }
  45% { transform: translateY(10px) rotate(0); } 65% { transform: translateY(46px) rotate(8deg); } 73% { transform: translateY(28px) rotate(-4deg); }
}
.gr-spark { opacity: 0; }
.gr-s1 { animation: vz-s1 5s ease infinite; }
.gr-s2 { animation: vz-s2 5s ease infinite; }
@keyframes vz-s1 { 0%, 17%, 30%, 100% { opacity: 0; transform: scale(.4); } 21% { opacity: 1; transform: scale(1.2); } }
@keyframes vz-s2 { 0%, 62%, 75%, 100% { opacity: 0; transform: scale(.4); } 66% { opacity: 1; transform: scale(1.2); } }

/* MCP widget: lively connectors */
.mcp-plug { animation: vz-beat 1.6s ease-in-out infinite; }
.mcp-tools .mcp-node { animation: vz-tool 4s ease infinite; animation-delay: calc(var(--k, 0) * 1s); }
@keyframes vz-tool { 0%, 22%, 100% { border-color: #3a2660; box-shadow: none; } 6%, 16% { border-color: #2dd4bf; box-shadow: 0 0 18px -4px #2dd4bf; } }

/* Home showcase + hero canvas */
.hero-canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: .9; }
.viz-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.viz-showcase .viz-link { display: inline-block; margin-top: 8px; font-weight: 600; text-decoration: none; }
.tag.anim-tag { background: #12071f; color: #2dd4bf; }

/* Skills: shelf of skill cards, the agent opens one and loads it into its context window */
.sk { display: grid; gap: 12px; }
.sk-tasks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sk-pick { font-size: .78rem; color: #a89ec7; margin-right: 4px; }
.sk-tasks button { font: 600 .78rem var(--font-body); color: #ede6fb; background: #22133a; border: 1px solid #44306b; border-radius: 99px; padding: 7px 12px; cursor: pointer; transition: border-color .2s, background-color .2s; }
.sk-tasks button:hover { border-color: #2dd4bf; }
.sk-tasks button[aria-pressed="true"] { background: #2dd4bf; color: #10061c; border-color: #2dd4bf; }
.sk-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.sk-h { display: block; font: 700 .68rem var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: #a89ec7; margin-bottom: 8px; }
.sk-shelf { display: grid; gap: 6px; align-content: start; }
.sk-card { border-radius: 10px; padding: 8px 11px; background: #1c0f30; border: 1px solid #3a2660; transition: border-color .25s, background-color .25s, opacity .3s, transform .3s; }
.sk-card b { font-size: .84rem; }
.sk-card small { float: right; font: .62rem var(--font-mono); color: #8a7fae; margin-top: 2px; }
.sk-card p { margin: 0; max-height: 0; overflow: hidden; font-size: .76rem; color: #c9bde3; transition: max-height .4s ease, margin .4s ease; }
.sk-card.scan { border-color: #a855f7; background: #24133e; }
.sk-card.dim { opacity: .42; }
.sk-card.open { border-color: #2dd4bf; background: #13302f; transform: translateX(4px); }
.sk-card.open p { max-height: 4em; margin-top: 5px; }
.sk-side { display: grid; gap: 10px; align-content: start; }
.sk-agent { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: #22133a; border: 1px solid #44306b; }
.sk-bot { font-size: 1.6rem; }
.sk-agent b { display: block; font-size: .86rem; }
.sk-status { font: .74rem var(--font-mono); color: #2dd4bf; }
.sk-meter { display: flex; height: 26px; border-radius: 8px; overflow: hidden; background: #1c0f30; border: 1px solid #3a2660; }
.sk-meter i { display: grid; place-items: center; font: 600 .62rem var(--font-mono); font-style: normal; color: #10061c; white-space: nowrap; overflow: hidden; }
.sk-meter .m-sys { width: 16%; background: #a89ec7; }
.sk-meter .m-task { width: 14%; background: #c084fc; }
.sk-meter .m-names { width: 12%; background: #67e8f9; }
.sk-meter .m-skill { width: 0; background: #2dd4bf; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.sk.loaded .sk-meter .m-skill { width: 30%; }
.sk-out-body { min-height: 92px; border-radius: 12px; background: #1c0f30; border: 1px dashed #3a2660; padding: 10px; }
.sk.done .sk-out-body { border-style: solid; border-color: #2dd4bf; animation: vz-pop .45s cubic-bezier(.2, .9, .3, 1.3); }
.sk-slide { border-radius: 8px; overflow: hidden; background: #f6f2fc; color: #1d1030; }
.sk-slide-bar { background: #7c3aed; color: #fff; padding: 4px 10px; font-size: .7rem; letter-spacing: .1em; }
.sk-slide-body { padding: 10px 12px; display: grid; gap: 2px; border-left: 4px solid #2dd4bf; margin: 8px; }
.sk-slide-body strong { font-size: 1rem; }
.sk-slide-body span { font-size: .74rem; color: #54476f; }
.sk-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sk-kpis span { border-radius: 8px; background: #22133a; padding: 5px 7px; display: grid; }
.sk-kpis small { font-size: .62rem; color: #a89ec7; }
.sk-kpis b { font-size: .85rem; color: #2dd4bf; }
.sk-bars { display: flex; align-items: flex-end; gap: 6px; height: 34px; margin: 8px 0 4px; }
.sk-bars i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(#c084fc, #7c3aed); animation: vz-up .5s ease both; animation-delay: calc(var(--k) * .08s); }
.sk-kp { font-size: .7rem; color: #2dd4bf; }
.sk-exp { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .76rem; }
.sk-exp li { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; padding: 4px 8px; border-radius: 7px; background: #22133a; }
.sk-exp li b { font-size: .72rem; }
.sk-exp li.ok b { color: #2dd4bf; }
.sk-exp li.bad { background: rgba(236, 72, 153, .14); }
.sk-exp li.bad b { color: #f472b6; }
.sk-note { margin: 0; font-size: .82rem; color: #c9bde3; padding-left: 10px; border-left: 3px solid #2dd4bf; }

/* Grounding */
.gd-float { animation: gd-float 3.2s ease-in-out infinite; }
@keyframes gd-float { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(3px, -9px) rotate(-1.5deg); } }

/* Sycophancy: the yes-man test */
.sy { display: grid; gap: 12px; }
.sy-row { display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: space-between; }
.sy-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: #1c0f30; border: 1px solid #3a2660; gap: 2px; }
.sy-seg button { font: 600 .78rem var(--font-body); color: #a89ec7; background: none; border: 0; border-radius: 9px; padding: 7px 11px; cursor: pointer; }
.sy-seg button[aria-pressed="true"] { background: #2e1d4a; color: #ede6fb; }
.sy-modes button[data-m="0"][aria-pressed="true"] { background: #ec4899; color: #fff; }
.sy-modes button[data-m="1"][aria-pressed="true"] { background: #2dd4bf; color: #10061c; }
.sy-chat { display: grid; gap: 8px; min-height: 196px; align-content: start; padding: 12px; border-radius: 14px; background: #1c0f30; border: 1px solid #2e1d4a; }
.sy-msg { max-width: 82%; padding: 8px 12px; border-radius: 14px; font-size: .86rem; line-height: 1.45; animation: vz-up .35s ease both; }
.sy-msg.user { justify-self: end; background: #7c3aed; color: #fff; border-bottom-right-radius: 4px; }
.sy-msg.ai { justify-self: start; background: #2e1d4a; color: #ede6fb; border-bottom-left-radius: 4px; }
.sy-msg.ai::before { content: "🤖 "; }
.sy-msg.typing { color: #a89ec7; letter-spacing: .2em; }
.sy-msg.ai.wrong { background: rgba(236, 72, 153, .18); box-shadow: inset 0 0 0 1px #ec4899; }
.sy-msg.ai.right { box-shadow: inset 0 0 0 1px #2dd4bf; }
.sy-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.sy-m { display: grid; gap: 4px; font-size: .76rem; color: #c9bde3; }
.sy-m i { display: block; height: 8px; border-radius: 99px; background: #2e1d4a; overflow: hidden; }
.sy-m b { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .7s cubic-bezier(.2, .8, .2, 1); background: #2dd4bf; }
.sy.is-yes .sy-agree { background: #ec4899; }
.sy-note { margin: 0; min-height: 2.6em; font-size: .84rem; color: #ede6fb; padding-left: 10px; border-left: 3px solid #2dd4bf; opacity: 0; transition: opacity .3s; }
.sy.is-yes .sy-note { border-left-color: #ec4899; }
.sy-note.on { opacity: 1; }

/* Harness: "Get me a coffee" — a brain in a jar gets one harness part per click */
.hb { display: grid; gap: 10px; --mv: 1.2s; --fill: 1.4s; }
.hb-task { margin: 0; font-size: .82rem; color: #b7abd3; }
.hb-say {
  position: relative; justify-self: start; max-width: 86%; min-height: 2.9em; margin-left: 2%;
  padding: 9px 14px; border-radius: 14px; background: #22133a; border: 1px solid #44306b;
  font-size: .88rem; line-height: 1.45; color: #ede6fb; opacity: .35; transition: opacity .3s;
}
.hb-say.on { opacity: 1; }
.hb-say::after { content: ""; position: absolute; left: 30px; bottom: -7px; width: 12px; height: 12px; background: #22133a; border-right: 1px solid #44306b; border-bottom: 1px solid #44306b; transform: rotate(45deg); }
.hb-scene { border-radius: 14px; overflow: hidden; background: linear-gradient(#1b0d30, #12071f); border: 1px solid #2e1d4a; }
.hb-scene svg { display: block; width: 100%; height: auto; }

.hb-bot { transition: transform var(--mv) cubic-bezier(.45, 0, .25, 1); }
.hb-mug { transition: transform var(--mv) cubic-bezier(.45, 0, .25, 1); }
.hb-arm { transform-box: fill-box; transform-origin: 0 100%; transition: transform var(--mv) cubic-bezier(.45, 0, .25, 1); }
.hb-brain, .hb-gear-i, .hb-wheel, .hb-milk { transform-box: fill-box; transform-origin: center; }
.hb.thinking .hb-brain { animation: vz-beat .6s ease-in-out infinite; }
.hb.rolling .hb-wheel { animation: hb-spin .45s linear infinite; }
.hb.working .hb-gear-i { animation: hb-spin 1.3s linear infinite; }
@keyframes hb-spin { to { transform: rotate(360deg); } }

/* harness parts pop on */
.hb-eyes, .hb-armwrap, .hb-wheels, .hb-gear, .hb-perm, .hb-mem {
  opacity: 0; transform: scale(.3); transform-box: fill-box; transform-origin: center;
  transition: opacity .35s ease, transform .55s cubic-bezier(.2, .9, .3, 1.5);
}
.hb-armwrap { transform-origin: 0 100%; }
.hb.has-eyes .hb-eyes, .hb.has-arms .hb-armwrap, .hb.has-arms .hb-wheels, .hb.has-loop .hb-gear,
.hb.has-perm .hb-perm, .hb.has-mem .hb-mem { opacity: 1; transform: none; }
.hb-pupil { transition: transform .4s ease; }
.hb.looking .hb-pupil { transform: translate(2.2px, -.6px); }

/* seeing: a scan sweeps the kitchen and labels what it finds */
.hb-scan { opacity: 0; }
.hb.scanning .hb-scan { animation: hb-scan 1.8s ease both; }
@keyframes hb-scan { 0%, 100% { opacity: 0; } 35%, 60% { opacity: 1; } }
.hb-tag { opacity: 0; transition: opacity .4s ease; }
.hb.seen .hb-tag { opacity: 1; }

/* the machine, the coffee and the mess */
.hb-btn { fill: #44306b; transition: fill .2s, filter .2s; }
.hb.pressed .hb-btn { fill: #2dd4bf; filter: drop-shadow(0 0 6px #2dd4bf); }
.hb-stream { opacity: 0; transition: opacity .2s; }
.hb.brewing .hb-stream { opacity: 1; animation: vz-flowing .6s linear infinite; }
.hb-coffee { fill: #6b3e22; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform var(--fill) linear, fill .9s ease; }
.hb.milky .hb-coffee { fill: #b9875a; }
.hb-steam { opacity: 0; transition: opacity .6s; }
.hb.hot .hb-steam { opacity: 1; }
.hb-spill { transform-box: fill-box; transform-origin: 30% 0; transform: scale(0, 0); transition: transform 1.4s cubic-bezier(.2, .7, .3, 1); }
.hb.spilled .hb-spill { transform: none; }
.hb-milk { opacity: 0; transition: opacity .3s, transform .45s ease; }
.hb.pouring .hb-milk { opacity: 1; transform: rotate(-40deg); }
.hb-chk { opacity: 0; transition: opacity .3s; }
.hb-chk.on { opacity: 1; }

/* the online shop: an over-eager order, or a question first */
.hb-wifi { opacity: 0; transition: opacity .3s; }
.hb.wifi .hb-wifi { opacity: 1; animation: vz-flowing .8s linear infinite; }
.hb .tb { opacity: 0; transition: opacity .3s; }
.hb[data-tab="idle"] .tb-idle, .hb[data-tab="ordered"] .tb-ordered, .hb[data-tab="ask"] .tb-ask, .hb[data-tab="cancel"] .tb-cancel { opacity: 1; }
.hb.deny .hb-deny { stroke: #ec4899; stroke-width: 2; filter: drop-shadow(0 0 5px #ec4899); }
.hb-box { opacity: 0; transform: translateY(-270px); transition: transform .75s cubic-bezier(.5, 0, .7, 1.35), opacity .2s; transition-delay: calc(var(--k) * .13s); }
.hb.boxes .hb-box { opacity: 1; transform: none; }
.hb-react { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.hb-react.on { opacity: 1; transform: none; }
.hb-night { opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.hb.night .hb-night { opacity: 1; }

/* scoreboard and controls */
.hb-score { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.hb-score li {
  display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px;
  border: 1px solid #3a2660; font-size: .76rem; color: #a89ec7; transition: border-color .3s, background-color .3s, color .3s;
}
.hb-score li b { font-weight: 800; }
.hb-score li[data-s="ok"] { border-color: #2dd4bf; background: rgba(45, 212, 191, .1); color: #ede6fb; }
.hb-score li[data-s="ok"] b { color: #2dd4bf; }
.hb-score li[data-s="bad"] { border-color: #ec4899; background: rgba(236, 72, 153, .1); color: #ede6fb; }
.hb-score li[data-s="bad"] b { color: #ec4899; }
.hb-parts { display: flex; flex-wrap: wrap; gap: 6px; }
.hb-part {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 99px; cursor: pointer;
  font: 600 .76rem var(--font-body); color: #a89ec7; background: none; border: 1px dashed #44306b; transition: border-color .2s, background-color .2s, color .2s;
}
.hb-part small { font-weight: 500; color: #8a7fae; }
.hb-part.next { border-color: #2dd4bf; color: #ede6fb; }
.hb-part.on { border-style: solid; border-color: #2dd4bf; background: rgba(45, 212, 191, .12); color: #ede6fb; }
.hb-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.hb-next {
  font: 700 .88rem var(--font-body); color: #10061c; background: #2dd4bf; border: 0; border-radius: 99px; padding: 10px 18px; cursor: pointer;
  box-shadow: 0 8px 22px -10px #2dd4bf; transition: transform .2s, background-color .2s;
}
.hb-next:hover { transform: translateY(-1px); background: #5eead4; }
.hb-hint { font-size: .78rem; color: #8a7fae; }
.hb-lesson { margin: 0; min-height: 2.6em; padding-left: 12px; border-left: 3px solid #2dd4bf; font-size: .88rem; line-height: 1.5; color: #ede6fb; opacity: 0; transition: opacity .4s; }
.hb-lesson.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hb *, .hb *::before, .hb *::after { transition-duration: .01ms !important; animation: none !important; }
}

@media (max-width: 760px) {
  .viz { padding: 14px 12px; }
  .ti, .rl-answers, .rs-cols, .oc, .viz-showcase, .ms { grid-template-columns: 1fr; }
  .ef-row { grid-template-columns: 1fr; gap: 4px; }
  .ms-card { display: grid; grid-template-columns: 76px 1fr; column-gap: 12px; row-gap: 3px; align-items: center; }
  .ms-card > :not(.ms-orb-wrap) { grid-column: 2; }
  .ms-orb-wrap { grid-column: 1; grid-row: 1 / span 6; height: 76px; }
  .ms-orb { width: calc(var(--s) * .85); height: calc(var(--s) * .85); }
  .ft { grid-template-columns: 1fr; }
  .pb { grid-template-columns: 1fr 44px; }
  .hm-bar { grid-template-columns: 82px 1fr; }
  .nt-model { min-width: 0; width: 100%; }
  .hb-score { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-main, .sy-meters { grid-template-columns: minmax(0, 1fr); }
  .sy-msg { max-width: 92%; }
  .hb-say { max-width: 100%; margin-left: 0; font-size: .84rem; }
  .hb-next { width: 100%; }
}