/* One-scene conceptual training loop. */
.training-story{--flow-ink:#26344d;--flow-muted:#52617a;--flow-blue:#3f61ba;--flow-line:#cbd4e7;margin:0 0 42px;padding:26px;border:1px solid #cbd4e8;border-radius:18px;background:#fff;box-shadow:0 15px 45px #384e8020;color:var(--flow-ink)}
.flow-icons{position:absolute;width:0;height:0;overflow:hidden}
.flow-icon{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.flow-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:20px}
.flow-head .eyebrow{color:#596ca8;font-size:11px;letter-spacing:1.2px}
.flow-head h3{font:700 25px/1.3 Manrope,Arial,sans-serif;letter-spacing:-.6px;margin:6px 0 7px;color:#26344d}
.flow-head p{font-size:14px;line-height:1.6;color:var(--flow-muted);max-width:710px}
.flow-actions{display:flex;gap:8px;flex:none;padding-top:9px}
.flow-actions button{border:1px solid #aab9d9;border-radius:9px;background:#fff;color:#2d488a;padding:9px 14px;font-size:13px;font-weight:700;min-height:42px}
.flow-actions #flow-play{background:#3f61ba;border-color:#3f61ba;color:#fff;min-width:93px}
.flow-actions button:hover{box-shadow:0 4px 12px #4b66a52e}
.flow-scene{border:1px solid #cbd4e7;border-radius:15px;padding:17px;background:linear-gradient(145deg,#f7f9fe,#fdfdff 70%)}
.flow-opsd{display:flex;align-items:center;gap:13px;padding:11px 14px;background:#eceff6;border:1px solid #c8d0df;border-radius:10px;color:#44536d;font-size:14px;line-height:1.3}
.flow-opsd-name{font-weight:800;color:#34425e;white-space:nowrap}
.flow-opsd-track{display:flex;gap:4px;flex:1;min-width:80px}
.flow-opsd-track i{height:17px;flex:1;border-radius:3px;background:#8594b4}
.flow-opsd strong{font-size:14px;color:#34425e;white-space:nowrap}
.flow-main-label{display:flex;justify-content:space-between;gap:10px;padding:15px 2px 9px;font-size:13px;font-weight:800;letter-spacing:.9px;color:#3f61ba}
.flow-cycle-count{font-weight:600;color:#52617a;letter-spacing:.1px}
.flow-top-row{display:grid;grid-template-columns:minmax(0,.85fr) 20px minmax(0,1.05fr) 20px minmax(0,1.8fr);align-items:stretch;gap:9px}
.flow-node,.flow-rollout,.flow-token-board,.flow-loss-node,.flow-update{background:#fff;border:1.5px solid var(--flow-line);border-radius:11px}
.flow-node{display:flex;align-items:center;gap:12px;padding:14px;min-width:0}
.flow-node-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:#e9eefb;color:#3f61ba;flex:none}
.flow-node small{display:block;font-size:11px;line-height:1.3;font-weight:800;letter-spacing:.8px;color:#4c67a6}
.flow-node strong{display:block;font-size:16px;line-height:1.3;color:#26344d}
.flow-node span:not(.flow-node-icon){display:block;font-size:13px;line-height:1.4;color:#53617a;margin-top:3px}
.flow-arrow{display:grid;place-items:center;align-self:center;font-size:26px;font-weight:700;color:#5b74b4}
.flow-rollout{padding:13px 15px;min-width:0}
.flow-rollout-heading{display:flex;justify-content:space-between;gap:8px;align-items:center}
.flow-rollout-heading strong{font-size:16px}
.flow-rollout-heading span{font-size:12px;font-weight:700;color:#3f61ba}
.flow-rollout-track{display:flex;gap:4px;margin:12px 0 10px}
.flow-rollout-track i{height:25px;flex:1;background:#9aafe1;border-radius:4px;transition:background .4s,transform .4s,opacity .4s}
.flow-rollout-track i.outside{background:repeating-linear-gradient(135deg,#e7eaf2 0 4px,#f8f9fc 4px 8px);border:1px solid #c9d0df}
.flow-gate{display:flex;align-items:center;gap:7px;border-radius:7px;padding:6px 8px;background:#eaf0ff;color:#304f9d;font-size:13px;font-weight:700;line-height:1.3}
.flow-gate .flow-icon{width:16px;height:16px}
.flow-middle-row{display:grid;grid-template-columns:minmax(0,1.15fr) 20px minmax(0,3.15fr);gap:9px;margin-top:11px;align-items:center}
.flow-teacher{min-height:99px}
.flow-teacher .flow-node-icon{background:#f4eaf8;color:#8c4ca9}
.flow-teacher small{color:#86539d}
.flow-token-board{padding:13px 15px;min-width:0}
.flow-board-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}
.flow-board-head strong{font-size:16px;display:block}
.flow-board-head span{font-size:13px;color:var(--flow-muted);display:block}
.flow-board-mark{color:#3e5da5!important;font-size:12px!important;font-weight:800;letter-spacing:.6px;white-space:nowrap}
.flow-token-workbench{display:grid;grid-template-columns:minmax(0,1fr) 115px 99px;gap:9px;align-items:center}
.flow-token-cloud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;min-height:92px;align-content:center}
.flow-chip{display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:54px;padding:5px 7px;border:1px solid #bfc9dc;border-radius:7px;background:#f7f9fc;color:#384861;transition:transform .55s,opacity .55s,background .55s,box-shadow .55s}
.flow-chip b{font:700 14px/1.25 monospace;white-space:normal;overflow-wrap:anywhere}
.flow-chip em{font-style:normal;font-size:12px;font-weight:700;color:#56657d}
.flow-chip.pivot{border-color:#9fa9db}.flow-chip.intent{border-color:#cca8cc}.flow-chip.risk{border-color:#91bda9}
.flow-chip.pivot em{color:#545ca5}.flow-chip.intent em{color:#935a94}.flow-chip.risk em{color:#367c62}
.flow-funnel{display:flex;flex-direction:column;align-items:center;text-align:center;color:#334e92}
.flow-funnel-icon{display:grid;place-items:center;width:40px;height:40px;background:#e8edfb;border-radius:12px;margin-bottom:5px}
.flow-funnel strong{font-size:13px;line-height:1.2}
.flow-funnel small{font-size:12px;color:#56657d;line-height:1.2;margin-top:2px}
.flow-kept{display:flex;flex-direction:column;gap:5px}
.flow-kept span{padding:4px 7px;border-radius:6px;font-size:12px;font-weight:800;text-align:center;background:#e9ebfa;color:#454e9c;transition:opacity .35s,transform .35s}
.flow-kept span:nth-child(2){background:#f7eaf5;color:#92578e}
.flow-kept span:nth-child(3){background:#e7f4ed;color:#30785b}
.flow-bottom-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,2fr);gap:10px;margin-top:11px}
.flow-loss-node{padding:12px 15px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.flow-loss-node strong{font-size:14px}
.flow-loss-node code{font:700 13px monospace;color:#3151a4;background:#eaf0ff;padding:5px 7px;border-radius:5px}
.flow-loss-node>span{font-size:12px;color:#52617a}
.flow-update{display:flex;align-items:center;gap:11px;padding:10px 13px;border-style:dashed;border-color:#8da5d9}
.flow-update strong{display:block;font-size:14px}
.flow-update span:not(.flow-node-icon,.flow-loop-arrow){font-size:12px;color:#52617a}
.flow-loop-arrow{font-size:29px;font-weight:700;color:#4262b5;margin-left:auto}
.flow-live-status{display:flex;align-items:center;gap:12px;margin-top:13px;padding:11px 14px;background:#eaf0ff;border-left:4px solid #4264b8;border-radius:7px;color:#263f83;min-height:60px}
.flow-status-dot{height:10px;width:10px;border-radius:50%;background:#4b70cc;box-shadow:0 0 0 4px #4b70cc2e;flex:none}
.flow-live-status strong{font-size:15px;display:block}
.flow-live-status p{font-size:14px;line-height:1.35;color:#3e527a;margin-top:2px}
.flow-status-index{font:700 12px monospace;margin-left:auto;white-space:nowrap;color:#405ca0}
.flow-note{font-size:13px;line-height:1.6;color:#4c5971;margin-top:12px}
.flow-note a{font-weight:700;color:#3155aa;text-decoration:underline;text-underline-offset:2px}
.training-story[data-phase="0"] .flow-gate{box-shadow:0 0 0 3px #6688d93d}
.training-story[data-phase="1"] .flow-student,.training-story[data-phase="1"] .flow-rollout{border-color:#6688d9;box-shadow:0 0 0 3px #6688d926}
.training-story[data-phase="1"] .flow-rollout-track i:not(.outside){animation:flowFill .7s ease both;animation-delay:calc(var(--n) * 85ms)}
.training-story[data-phase="2"] .flow-teacher,.training-story[data-phase="2"] .flow-token-board{border-color:#af8fc9;box-shadow:0 0 0 3px #bc9ad32b}
.training-story[data-phase="2"] .flow-chip{transform:translate(var(--dx),var(--dy)) rotate(3deg);box-shadow:0 5px 12px #44567629}
.training-story[data-phase="2"] .flow-chip:nth-child(even){transform:translate(var(--dx),var(--dy)) rotate(-4deg)}
.training-story:is([data-phase="3"],[data-phase="4"]) .flow-chip.neutral{opacity:.2;transform:translateY(25px) scale(.82);filter:grayscale(1)}
.training-story:is([data-phase="3"],[data-phase="4"]) .flow-chip.critical{transform:translateY(-5px);box-shadow:0 6px 16px #5366aa35;background:#fff}
.training-story:is([data-phase="3"],[data-phase="4"]) .flow-funnel,.training-story:is([data-phase="3"],[data-phase="4"]) .flow-kept{filter:drop-shadow(0 0 7px #617bc959)}
.training-story[data-phase="4"] .flow-loss-node,.training-story[data-phase="4"] .flow-update,.training-story[data-phase="4"] .flow-student{border-color:#5680cb;box-shadow:0 0 0 3px #6792d531}
.training-story[data-phase="4"] .flow-loop-arrow{animation:flowLoop 1s ease-in-out infinite}
@keyframes flowFill{from{opacity:.2;transform:scaleY(.35)}to{opacity:1;transform:scaleY(1)}}
@keyframes flowLoop{50%{transform:rotate(-35deg) scale(1.15)}}
body.effects-off .training-story *{animation:none!important;transition:none!important}
@media(max-width:980px){.flow-head{display:block}.flow-actions{margin-top:14px}.flow-top-row{grid-template-columns:minmax(0,.85fr) 15px minmax(0,1.1fr) 15px minmax(0,1.5fr);gap:5px}.flow-node{padding:10px;gap:7px}.flow-node-icon{width:35px;height:35px}.flow-token-workbench{grid-template-columns:minmax(0,1fr) 90px 70px}.flow-chip b{font-size:13px}.flow-opsd strong{white-space:normal}}
@media(max-width:700px){.training-story{padding:16px}.flow-head h3{font-size:22px}.flow-head p{font-size:14px}.flow-scene{padding:12px}.flow-opsd{display:grid;grid-template-columns:1fr 1fr;gap:7px}.flow-opsd-track{grid-column:1/-1;grid-row:2}.flow-opsd strong{grid-column:1/-1}.flow-main-label{flex-wrap:wrap}.flow-top-row,.flow-middle-row,.flow-bottom-row{display:flex;flex-direction:column}.flow-arrow{transform:rotate(90deg);line-height:1;height:22px}.flow-node,.flow-rollout,.flow-token-board,.flow-loss-node,.flow-update{width:100%}.flow-middle-row{margin-top:11px}.flow-token-workbench{grid-template-columns:1fr}.flow-token-cloud{grid-template-columns:repeat(2,minmax(0,1fr));min-height:142px}.flow-chip{min-height:54px}.flow-chip b{font-size:13px}.flow-funnel{flex-direction:row;justify-content:center;gap:8px}.flow-funnel-icon{margin:0}.flow-kept{flex-direction:row;justify-content:center}.flow-kept span{min-width:70px}.flow-board-head{align-items:flex-start}.flow-board-mark{white-space:normal;text-align:right}.flow-loss-node{display:block}.flow-loss-node code{display:inline-block;margin:6px 0}.flow-update{min-height:66px}.flow-live-status{align-items:flex-start}.flow-status-index{font-size:11px}.flow-note{font-size:13px}}
@media(prefers-reduced-motion:reduce){.training-story *{animation:none!important;transition:none!important}}

/* Compact mechanism demonstrations inside the two method cards. */
.method-mini{margin-top:24px;padding-top:20px;border-top:1px solid #d7deeb;color:#293a53}
.method-cards>article>.formula,.method-cards>article>.taxonomy-tags{min-height:60px}
.method-cards>article>.taxonomy-tags{align-items:center}
@media(min-width:981px){.method-cards>article>p{min-height:80px}}
.mini-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px}
.mini-heading>strong{font-size:14px;line-height:1.4;color:#293a53;font-weight:700}
.mini-motion{border:1px solid #aebedb;border-radius:7px;padding:5px 9px;background:#f8faff;color:#35548b;font-size:12px;flex:none;min-height:32px}
.mini-motion:hover{background:#edf2ff}.mini-motion:disabled{opacity:.6}
.mini-teacher-note{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#5f497d;margin-bottom:13px}
.mini-teacher-note .flow-icon{width:18px;height:18px}
.rescue-case{border:1px solid #cbd7e7;border-radius:9px;padding:11px;margin-top:9px;background:#f9fbff}
.rescue-row-heading{display:flex;justify-content:space-between;align-items:center;gap:9px;font-size:13px;line-height:1.35;color:#3f506b}
.rescue-row-heading b{font-size:13px;font-weight:700;color:#277654}
.rescue-unsafe{background:#fffafb;border-color:#e4c9cf}.rescue-unsafe .rescue-row-heading b{color:#a43d52}
.rescue-trajectory{display:flex;align-items:center;gap:7px;margin-top:12px;min-height:23px}
.rescue-prefix,.rescue-suffix{display:flex;gap:3px;align-items:center;height:21px}
.rescue-prefix{flex:0 0 28%}.rescue-unsafe .rescue-prefix{flex-basis:48%}
.rescue-prefix i,.rescue-suffix i{display:block;flex:1;height:19px;border-radius:3px;background:#7d98d2;min-width:3px}
.rescue-suffix{flex:1}.rescue-suffix i{background:#56a382;transform-origin:left center}
.rescue-unsafe .rescue-suffix i{background:#cc7889}
.rescue-boundary{font:700 12px monospace;color:#66558c;white-space:nowrap;flex:none;padding:1px 3px;border-left:1px dashed #9c8abb}
.rescue-warning{display:flex;align-items:center;gap:7px;margin-top:10px;color:#9b354b;font-size:12px;line-height:1.4}
.rescue-warning>span{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#a33f54;color:white;font-weight:800;flex:none}
.rescue-warning strong{font-size:13px;color:#9b354b;font-weight:700}
.mini-takeaway{display:flex;align-items:center;gap:8px;margin-top:13px;padding:10px;background:#eaf0fd;border:1px solid #c5d2ef;border-radius:8px;color:#325494;font-size:13px;font-weight:700}
.mini-takeaway .flow-icon{width:18px;height:18px}
.method-cards .mini-caption{font-size:13px;line-height:1.55;color:#55627a;margin-top:11px;text-align:left}
.mini-token-cloud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;min-height:99px}
.mini-pair{display:flex;align-items:center;justify-content:center;min-height:33px;padding:5px 6px;border:1px solid #c6cfdf;border-radius:6px;background:#f2f5f9;color:#4b5a71;font:600 12px/1.3 monospace;overflow-wrap:anywhere;text-align:center}
.mini-pair.pivot{background:#e7ecff;border-color:#a2b3e5;color:#364f9a}.mini-pair.intent{background:#fff0dc;border-color:#e6c095;color:#925614}.mini-pair.risk{background:#e4f4ec;border-color:#9ecbb6;color:#286d52}
.mini-funnel-scene{position:relative;height:106px;margin-top:5px;overflow:hidden}
.mini-funnel-svg{display:block;width:100%;height:106px}.funnel-body{fill:#edf2fe;stroke:#8ca3cf;stroke-width:1.5;stroke-linejoin:round}.funnel-rim{stroke:#6e89bf;stroke-width:3;stroke-linecap:round}.funnel-drop-path{stroke:#a9b1c0;stroke-width:1.5;stroke-dasharray:4 4;fill:none}
.funnel-label{position:absolute;left:19%;right:19%;top:16px;text-align:center;color:#415c97;font-size:13px;font-weight:700}
.funnel-masked{position:absolute;right:0;top:70px;font-size:11px;font-weight:600;color:#657086;background:#f2f4f8;padding:2px 5px;border-radius:4px}
.funnel-particle{position:absolute;top:3px;left:calc(50% - 5px);width:10px;height:10px;background:#8e9fc4;border-radius:3px;opacity:0}
.funnel-particle.pivot{background:#6985d0}.funnel-particle.intent{background:#d49a55}.funnel-particle.risk{background:#55a480}.funnel-particle.drop{background:#9ba7b9}
.mini-distill-output{display:flex;justify-content:center;align-items:center;gap:10px;border:1px solid #aac6bd;background:#edf8f2;border-radius:9px;padding:11px;color:#255e49}
.mini-distill-output .flow-icon{width:21px;height:21px;flex:none}.mini-distill-output strong{font:800 27px/1.2 Manrope,Arial,sans-serif;color:#22684c;white-space:nowrap}.mini-distill-output>span{font-size:13px;font-weight:600;line-height:1.4;max-width:200px;color:#305c4d}
.method-mini.mini-animated *{animation-play-state:paused!important}
.method-mini.mini-animated.is-running *{animation-play-state:running!important}
.mini-animated .rescue-safe .rescue-suffix i{animation:miniRescueSafe 8s ease infinite;animation-delay:calc(var(--j)*.15s)}
.mini-animated .rescue-unsafe .rescue-suffix i{animation:miniRescueUnsafe 8s ease infinite;animation-delay:calc(var(--j)*.15s)}
.mini-animated .mini-pair.neutral{animation:miniMaskPair 8s ease infinite}
.mini-animated .mini-pair:not(.neutral){animation:miniKeepPair 8s ease infinite}
.mini-animated .funnel-particle.pass{animation:miniPassFunnel 8s ease-in-out infinite;animation-delay:calc(var(--j)*.22s)}
.mini-animated .funnel-particle.drop{animation:miniDropFunnel 8s ease-in-out infinite;animation-delay:calc(var(--j)*.3s)}
.mini-animated .mini-distill-output{animation:miniDistillGlow 8s ease infinite}
@keyframes miniRescueSafe{0%,10%{opacity:.12;transform:scaleX(.25)}26%,89%{opacity:1;transform:scaleX(1)}100%{opacity:.12;transform:scaleX(.25)}}
@keyframes miniRescueUnsafe{0%,38%{opacity:.12;transform:scaleX(.25)}55%,89%{opacity:1;transform:scaleX(1)}100%{opacity:.12;transform:scaleX(.25)}}
@keyframes miniMaskPair{0%,28%,100%{opacity:1;transform:none}45%,88%{opacity:.25;transform:translateY(5px) scale(.94)}}
@keyframes miniKeepPair{0%,25%,100%{transform:none;box-shadow:none}45%,85%{transform:translateY(-3px);box-shadow:0 3px 9px #5f7ba626}}
@keyframes miniPassFunnel{0%,24%{opacity:0;transform:translate(-20px,-5px)}32%{opacity:1}65%{opacity:1;transform:translate(0,92px)}72%,100%{opacity:0;transform:translate(0,101px)}}
@keyframes miniDropFunnel{0%,25%{opacity:0;transform:translate(30px,0)}34%{opacity:1}55%{opacity:.8;transform:translate(135px,67px)}68%,100%{opacity:0;transform:translate(150px,78px)}}
@keyframes miniDistillGlow{0%,53%,100%{box-shadow:none}68%,88%{box-shadow:0 0 0 3px #67a98d35}}
@media(max-width:980px) and (min-width:701px){.method-cards article{padding:21px}.mini-token-cloud{grid-template-columns:repeat(2,minmax(0,1fr))}.rescue-row-heading{align-items:flex-start;flex-direction:column;gap:3px}}
@media(max-width:700px){.mini-token-cloud{grid-template-columns:repeat(2,minmax(0,1fr))}.mini-pair{font-size:12px}.rescue-row-heading{flex-wrap:wrap}.mini-heading>strong{font-size:14px}.mini-distill-output>span{font-size:13px}.funnel-masked{font-size:12px}}
@media(prefers-reduced-motion:reduce){.method-mini *{animation:none!important;transition:none!important}}