/* One episode through Chamelia */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.episode{margin:54px 46px 92px;position:relative;z-index:2}
.episode-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end}
.episode-head h2{font-family:var(--f-head);font-size:clamp(42px,5vw,68px);font-weight:500;line-height:1.02;letter-spacing:-.025em;margin:10px 0 0}
.episode-intro{font-family:var(--f-hand);font-size:24px;line-height:1.35;color:var(--ink2);max-width:610px;margin:18px 0 0}
.episode-controls{display:flex;gap:9px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.episode-control{min-height:44px;border:1.25px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:500 12px var(--f-mono);padding:9px 15px;cursor:pointer}.episode-control[data-flow-toggle]{min-width:108px}
.episode-control:hover{background:rgba(236,226,200,.17)}
.episode-control:focus-visible,.episode-step:focus-visible{outline:2px dashed var(--purple-ink);outline-offset:4px}
.episode-control[disabled]{opacity:.42;cursor:default}
.episode-progress{font:11px var(--f-mono);letter-spacing:.08em;color:var(--ink3);width:190px;white-space:nowrap;text-align:right}

.episode-figure{margin:30px 0 0}
.episode-stage{position:relative;min-height:760px;border-top:1.35px solid rgba(32,36,26,.5);border-bottom:1.35px solid rgba(32,36,26,.5);overflow:hidden;isolation:isolate}
.episode-stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.34;background-image:radial-gradient(circle,var(--ink3) .7px,transparent .8px);background-size:31px 31px;mask-image:linear-gradient(to bottom,transparent,#000 17%,#000 83%,transparent)}
.phase-label{position:absolute;top:20px;font:500 9px var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.phase-understand{left:4%}.phase-deliberate{left:51%}.phase-learn{right:5%}
.phase-label::after{content:"";display:block;width:62px;border-top:1px solid currentColor;margin-top:7px;opacity:.55}

.flow-node{position:absolute;width:126px;text-align:center;z-index:5;transition:opacity 1.05s ease,filter 1.05s ease,transform 1.15s cubic-bezier(.2,.75,.25,1)}
.flow-node-art{height:112px;display:grid;place-items:center;position:relative}
.flow-node img{display:block;width:112px;height:112px;object-fit:contain;mix-blend-mode:multiply;filter:saturate(.94)}
.flow-node-name{display:block;margin-top:4px;font:500 10px var(--f-mono);letter-spacing:.11em;text-transform:uppercase}
.flow-node-note{display:block;margin-top:4px;font:17px/1.15 var(--f-hand);color:var(--ink2)}
.node-perception{left:15%;top:170px}.node-memory{left:30%;top:72px}.node-configurator{left:32%;top:390px}
.node-sleep{left:58%;top:574px}.node-reality{right:1.2%;top:350px}
.episode:not(.is-static) .flow-node{opacity:.42;filter:saturate(.55)}
.episode[data-state="raw-input"] .node-perception{opacity:.72;filter:none}
.episode[data-state="perceive"] .node-perception,
.episode[data-state="retrieve"] .node-memory,
.episode[data-state="configure"] .node-configurator,
.episode[data-state="propose"] .node-actor,
.episode[data-state="simulate"] .node-world,
.episode[data-state="score"] .node-cost,
.episode[data-state="choose"] .node-actor,
.episode[data-state="observe"] .node-reality,
.episode[data-state="learn"] .node-reality,
.episode[data-state="consolidate"] .node-sleep{opacity:1;filter:none;transform:scale(1.03)}

.flow-node::after{content:"";position:absolute;left:50%;top:48%;width:118px;height:118px;border:1.5px dashed transparent;border-radius:50%;transform:translate(-50%,-50%) scale(.75);transition:border-color .35s ease,transform .55s ease,opacity .45s ease;opacity:0;z-index:-1}
.episode[data-state="perceive"] .node-perception::after,
.episode[data-state="retrieve"] .node-memory::after,
.episode[data-state="configure"] .node-configurator::after,
.episode[data-state="consolidate"] .node-sleep::after{border-color:var(--purple-ink);transform:translate(-50%,-50%) scale(1.12);opacity:.7}

/* T1D field-note scraps */
.raw-stream{position:absolute;left:0;top:74px;width:100%;height:480px;z-index:6;--target-x:calc(15% + 58px);--target-y:152px}
.data-scrap{position:absolute;left:var(--x);top:var(--y);min-width:94px;padding:7px 9px;background:rgba(236,226,200,.82);border:1px solid rgba(32,36,26,.65);box-shadow:3px 5px 0 rgba(29,39,64,.08);font:10.5px/1.35 var(--f-mono);transform:rotate(var(--r));opacity:.22;transition:left 1.55s cubic-bezier(.2,.7,.2,1),top 1.55s cubic-bezier(.2,.7,.2,1),transform 1.55s ease,opacity .65s ease}
.data-scrap strong{font-weight:500;display:block}.data-scrap small{font:14px var(--f-hand);color:var(--ink2)}
.scrap-bg{--x:8px;--y:12px;--r:-3deg}.scrap-insulin{--x:40px;--y:103px;--r:2deg}.scrap-sleep{--x:4px;--y:196px;--r:-2deg}.scrap-heart{--x:47px;--y:291px;--r:3deg}.scrap-context{--x:13px;--y:386px;--r:-1deg}
.episode.has-visited-perceive .data-scrap{left:var(--target-x);top:var(--target-y);transform:rotate(12deg) scale(0);opacity:0}
.episode[data-state="perceive"] .data-scrap{animation:scrap-absorb 2.15s cubic-bezier(.2,.68,.18,1) both;animation-delay:var(--absorb-delay)}
.episode[data-state="raw-input"] .data-scrap{animation:scrap-arrive 1.2s both;animation-delay:var(--delay,0s)}
.scrap-bg{--delay:.05s;--absorb-delay:0s}.scrap-insulin{--delay:.18s;--absorb-delay:.12s}.scrap-sleep{--delay:.31s;--absorb-delay:.24s}.scrap-heart{--delay:.44s;--absorb-delay:.36s}.scrap-context{--delay:.57s;--absorb-delay:.48s}
@keyframes scrap-arrive{from{opacity:0;transform:translateX(-26px) rotate(var(--r))}to{opacity:1;transform:translateX(0) rotate(var(--r))}}
@keyframes scrap-absorb{0%{left:var(--x);top:var(--y);opacity:1;transform:rotate(var(--r)) scale(1)}52%{left:var(--target-x);top:calc(var(--target-y) - 20px);opacity:1;transform:rotate(5deg) scale(.72)}78%{left:var(--target-x);top:var(--target-y);opacity:.9;transform:rotate(8deg) scale(.3)}100%{left:var(--target-x);top:var(--target-y);opacity:0;transform:rotate(12deg) scale(0)}}

/* Perception chews raw observations into a compact state. */
.pupil-overlay{position:absolute;left:50%;top:51%;width:13px;height:13px;border-radius:50%;background:var(--navy);transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.episode[data-state="perceive"] .pupil-overlay{opacity:1;animation:pupil-open 2s ease-in-out both}
@keyframes pupil-open{0%,100%{transform:translate(-50%,-50%) scale(.75)}34%{transform:translate(-50%,-50%) scale(1.75)}67%{transform:translate(-50%,-50%) scale(1.15)}}
/* One unlabeled compact-state token moves through perception, memory, and configuration. */
.state-token{position:absolute;left:18.7%;top:220px;width:29px;height:29px;border:1.5px solid var(--ink);border-radius:38% 62% 53% 47%/45% 39% 61% 55%;background:var(--purple);box-shadow:inset -6px -4px 0 rgba(236,226,200,.28);z-index:9;opacity:0;transform:rotate(-18deg) scale(.18);transition:left 1.55s cubic-bezier(.2,.75,.25,1),top 1.55s cubic-bezier(.2,.75,.25,1),opacity .7s ease,transform 1.55s ease}
.state-token::after{content:"";position:absolute;left:9px;top:8px;width:7px;height:7px;border:1px solid var(--ink);border-radius:50%;background:var(--cream)}
.episode.has-visited-perceive .state-token{opacity:1}
.episode[data-state="perceive"] .state-token{animation:state-emerge .72s 2.05s both}
.episode.has-visited-retrieve .state-token{left:34%;top:160px;transform:rotate(11deg) scale(1)}
.episode.has-visited-configure .state-token{left:29.8%;top:465px;transform:rotate(-7deg) scale(.88)}
.episode.has-visited-propose .state-token{opacity:0;transform:rotate(14deg) scale(.2)}
@keyframes state-emerge{0%{opacity:0;transform:rotate(-20deg) scale(.12)}65%{opacity:1;transform:rotate(5deg) scale(1.16)}100%{opacity:1;transform:rotate(-18deg) scale(1)}}

/* Retrieved memory scraps. */
.memory-scrap{position:absolute;z-index:7;padding:5px 7px;background:rgba(236,226,200,.88);border:1px solid rgba(32,36,26,.55);font:9px var(--f-mono);opacity:0;transform:scale(.45) rotate(var(--r));transition:left 1.45s cubic-bezier(.2,.75,.25,1),top 1.45s cubic-bezier(.2,.75,.25,1),opacity .55s ease,transform 1.45s ease}
.memory-scrap.one{left:28.5%;top:78px;--r:-7deg}.memory-scrap.two{left:37%;top:115px;--r:5deg}.memory-scrap.three{left:34%;top:216px;--r:-2deg}
.episode.has-visited-retrieve .memory-scrap{opacity:.92;transform:scale(1) rotate(var(--r))}
.episode[data-state="retrieve"] .memory-scrap{transition-delay:.9s}
.episode.has-visited-configure .memory-scrap{opacity:.92;transform:scale(.86) rotate(var(--r))}
.episode.has-visited-configure .memory-scrap.one{left:43.7%;top:424px}.episode.has-visited-configure .memory-scrap.two{left:44.8%;top:466px}.episode.has-visited-configure .memory-scrap.three{left:43.2%;top:507px}
.episode.has-visited-propose .memory-scrap{opacity:0;transform:scale(.25) rotate(10deg)}
.episode[data-state="retrieve"] .node-memory{animation:memory-recognize 1.8s ease-in-out both}
@keyframes memory-recognize{0%,100%{transform:rotate(0)}35%{transform:rotate(-4deg) scale(1.05)}65%{transform:rotate(3deg)}}

/* Configurator assembles one working brief. */
.working-brief{position:absolute;left:37%;top:442px;width:100px;min-height:74px;padding:9px;background:rgba(236,226,200,.92);border:1.3px solid var(--ink);box-shadow:5px 7px 0 rgba(29,39,64,.1);transform:rotate(-3deg) scale(.25);opacity:0;z-index:8;transition:left 1.05s ease,top 1.05s ease,opacity .4s ease,transform 1.05s ease}
.working-brief::before{content:"working brief";font:500 8px var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.brief-line{display:block;border-bottom:2px solid var(--ink3);margin-top:7px;transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
.brief-line:nth-child(2){width:78%}.brief-line:nth-child(3){width:58%;border-color:var(--purple-ink)}.brief-line:nth-child(4){width:88%;border-color:var(--green)}
.episode.has-visited-configure .working-brief{opacity:1;transform:rotate(-3deg) scale(1)}
.episode[data-state="configure"] .working-brief{transition-delay:.8s}
.episode.has-visited-configure .brief-line{transform:scaleX(1)}
.episode.has-visited-propose .working-brief{left:51%;top:290px;transform:rotate(4deg) scale(.78);opacity:.45}
.episode.has-visited-simulate .working-brief{opacity:0}
.episode[data-state="configure"] .node-configurator{animation:config-snap 1.8s ease-in-out both}
@keyframes config-snap{0%,100%{transform:rotate(0)}28%{transform:rotate(4deg) translateY(-4px)}52%{transform:rotate(-3deg)}74%{transform:rotate(1deg)}}

/* Deliberation arena. Metacognition sits outside the sequence and budgets it. */
.search-arena{position:absolute;left:48%;top:70px;width:35%;height:480px;border:1.4px dashed rgba(32,36,26,.48);border-radius:46% 54% 48% 52%/52% 43% 57% 48%;z-index:3;background:rgba(236,226,200,.035)}
.search-label{position:absolute;left:18px;top:14px;font:500 9px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--purple-ink)}
.search-note{position:absolute;right:20px;top:15px;font:16px var(--f-hand);color:var(--ink3);transform:rotate(2deg)}
.search-arena .flow-node{width:94px}.search-arena .flow-node-art{height:82px}.search-arena .flow-node img{width:82px;height:82px}.search-arena .flow-node-name{font-size:8px}
.node-actor{left:2%;top:174px}.node-world{left:35%;top:37px}.node-cost{left:35%;top:328px}

.resource-controller{position:absolute;right:.8%;top:76px;width:154px;display:grid;grid-template-columns:48px 1fr;gap:7px;align-items:center;z-index:7;padding:7px 8px;border:1px dashed rgba(32,36,26,.54);border-radius:45% 55% 50% 48%/53% 44% 56% 47%;background:rgba(181,192,168,.88);opacity:.56;transform:rotate(1.5deg);transition:opacity .55s ease,transform .75s ease,background .6s ease,box-shadow .6s ease}
.resource-controller img{width:47px;height:47px;object-fit:contain;mix-blend-mode:multiply}
.resource-controller strong,.resource-controller span{display:block}.resource-controller strong{font:500 8px var(--f-mono);letter-spacing:.08em;text-transform:uppercase}.resource-controller span{font:12px/1.05 var(--f-hand);color:var(--ink2)}
.resource-controller .resource-budget{font:7px var(--f-mono);margin-top:5px;color:var(--ink3)}.resource-budget::after{content:" · depth 1"}.resource-budget b{font-weight:500;color:var(--purple-ink)}
.resource-meter{display:flex!important;gap:3px;margin-top:4px}.resource-meter i{display:block;width:13px;height:4px;border:1px solid var(--ink);background:transparent;transition:background .55s ease,transform .55s ease}.resource-meter i:nth-child(-n+2){background:var(--purple)}
.episode[data-state="retrieve"] .resource-meter i:nth-child(3),.episode[data-state="configure"] .resource-meter i:nth-child(3),.episode[data-state="propose"] .resource-meter i:nth-child(3),.episode[data-state="choose"] .resource-meter i:nth-child(3),.episode[data-state="act"] .resource-meter i:nth-child(3),.episode[data-state="simulate"] .resource-meter i,.episode[data-state="score"] .resource-meter i{background:var(--purple)}
.episode[data-state="simulate"] .resource-budget::after,.episode[data-state="score"] .resource-budget::after{content:" · depth 3"}.episode[data-state="choose"] .resource-budget::after,.episode[data-state="act"] .resource-budget::after{content:" · depth 2"}
.episode[data-state="simulate"] .resource-controller,.episode[data-state="score"] .resource-controller{background:rgba(236,226,200,.86);box-shadow:inset 0 0 0 3px rgba(138,121,184,.18);transform:rotate(-1deg) scale(1.03)}
.episode[data-state="retrieve"] .resource-controller,.episode[data-state="configure"] .resource-controller,.episode[data-state="propose"] .resource-controller,.episode[data-state="simulate"] .resource-controller,.episode[data-state="score"] .resource-controller,.episode[data-state="choose"] .resource-controller,.episode[data-state="act"] .resource-controller{opacity:1}
.episode[data-state="simulate"] .resource-meter i{animation:budget-pulse 1.15s ease-in-out infinite alternate}
@keyframes budget-pulse{to{transform:translateY(-2px);background:var(--purple-ink)}}
.action-space{position:absolute;left:3%;top:304px;width:108px;padding:7px 6px 6px;border:1px dashed rgba(32,36,26,.62);border-radius:7px;display:flex;gap:3px;flex-wrap:wrap;opacity:.45;transform:rotate(-2deg);transition:opacity .55s ease,transform .75s ease,box-shadow .55s ease}
.action-space span{width:100%;font:500 7px var(--f-mono);letter-spacing:.08em;text-transform:uppercase}.action-space i{font:9px var(--f-hand);font-style:normal;padding:1px 4px;background:rgba(236,226,200,.68);border:1px solid rgba(32,36,26,.45);border-radius:999px}
.episode[data-state="propose"] .action-space{opacity:1;transform:rotate(1deg) scale(1.04);box-shadow:0 0 0 7px rgba(236,226,200,.12)}
.episode.has-visited-simulate .action-space{opacity:.22}

.action-candidate{position:absolute;left:10%;top:340px;max-width:78px;padding:3px 5px;border:1px solid rgba(32,36,26,.7);background:rgba(236,226,200,.92);font:8px/1.2 var(--f-mono);z-index:8;opacity:0;transform:rotate(var(--candidate-rotate)) scale(.45);transition:left 1.45s cubic-bezier(.2,.72,.23,1),top 1.45s cubic-bezier(.2,.72,.23,1),opacity .45s ease,transform 1.45s ease}
.candidate-a{--candidate-rotate:-3deg}.candidate-b{--candidate-rotate:2deg}.candidate-c{--candidate-rotate:-1deg}
.episode.has-visited-propose .action-candidate{opacity:1;left:23%;transform:rotate(var(--candidate-rotate)) scale(1)}
.episode.has-visited-propose .candidate-a{top:194px}.episode.has-visited-propose .candidate-b{top:234px}.episode.has-visited-propose .candidate-c{top:274px}
.episode.has-visited-simulate .action-candidate{left:42.5%;transform:translateX(-100%) rotate(var(--candidate-rotate)) scale(.8)}
.episode.has-visited-simulate .candidate-a{top:151px}.episode.has-visited-simulate .candidate-b{top:225px}.episode.has-visited-simulate .candidate-c{top:299px}
.episode[data-state="propose"] .node-actor{animation:actor-cast 1.55s ease-out both}
@keyframes actor-cast{0%,100%{transform:rotate(0)}40%{transform:rotate(-7deg) translateX(-4px)}65%{transform:rotate(5deg) translateX(5px)}}

.mcts-tree{position:absolute;left:42%;top:122px;width:43%;height:245px;z-index:6;opacity:0;transition:opacity .65s ease}
.episode.has-visited-simulate .mcts-tree{opacity:1}
.tree-line{position:absolute;height:2px;background:var(--ink);transform-origin:left center;transform:rotate(var(--angle)) scaleX(0);width:var(--length);left:var(--left);top:var(--top);transition:transform .85s cubic-bezier(.2,.7,.25,1);transition-delay:var(--tree-delay)}
.tree-line::after{content:"";position:absolute;right:-4px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--cream);border:1px solid var(--ink)}
.tree-line.t1::before,.tree-line.t2::before,.tree-line.t3::before{content:"";position:absolute;left:-4px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--cream);border:1px solid var(--ink)}
.episode.has-visited-simulate .tree-line{transform:rotate(var(--angle)) scaleX(1)}
.t1{--left:0;--top:40px;--length:54px;--angle:0deg;--tree-delay:.08s}.t2{--left:0;--top:114px;--length:58px;--angle:0deg;--tree-delay:.16s}.t3{--left:0;--top:188px;--length:54px;--angle:0deg;--tree-delay:.24s}
.t1a{--left:53px;--top:40px;--length:54px;--angle:-27deg;--tree-delay:.55s}.t1b{--left:53px;--top:40px;--length:50px;--angle:25deg;--tree-delay:.64s}
.t2a{--left:57px;--top:114px;--length:58px;--angle:-22deg;--tree-delay:.72s}.t2b{--left:57px;--top:114px;--length:56px;--angle:23deg;--tree-delay:.81s}
.t3a{--left:53px;--top:188px;--length:55px;--angle:-24deg;--tree-delay:.9s}.t3b{--left:53px;--top:188px;--length:52px;--angle:27deg;--tree-delay:.99s}
.episode[data-state="simulate"] .mcts-tree{animation:tree-breathe 1.85s ease both}
@keyframes tree-breathe{0%{transform:scale(.82);opacity:0}100%{transform:scale(1);opacity:1}}
.cost-mark{position:absolute;padding:3px 5px;background:rgba(236,226,200,.92);border:1px solid var(--ink);font:8px var(--f-mono);opacity:0;transform:scale(.6) rotate(var(--r));transition:opacity .35s ease,transform .5s ease}
.score-a{left:68%;top:2%;--r:-4deg}.score-b{left:76%;top:42%;--r:2deg}.score-c{left:66%;top:82%;--r:4deg}
.episode.has-visited-score .cost-mark{opacity:1;transform:scale(1) rotate(var(--r))}
.episode.has-visited-choose .t2,.episode.has-visited-choose .t2a,.episode.has-visited-choose .t2b{height:4px;background:var(--purple-ink)}
.episode.has-visited-choose .t1,.episode.has-visited-choose .t1a,.episode.has-visited-choose .t1b,.episode.has-visited-choose .t3,.episode.has-visited-choose .t3a,.episode.has-visited-choose .t3b{opacity:.22}
.episode.has-visited-choose .score-a,.episode.has-visited-choose .score-c{text-decoration:line-through;color:var(--coral);opacity:.58}
.episode.has-visited-choose .score-a::after,.episode.has-visited-choose .score-c::after{content:" ×";font:700 13px var(--f-mono);text-decoration:none}
.episode.has-visited-choose .score-b{color:var(--purple-ink);font-weight:700;box-shadow:0 0 0 7px rgba(138,121,184,.18);transform:scale(1.12) rotate(var(--r))}
.episode.has-visited-choose .score-b::after{content:" lowest";font:11px var(--f-hand);white-space:nowrap}

/* Chosen action exits search. */
.chosen-action{position:absolute;left:76%;top:265px;z-index:9;padding:8px 10px;background:rgba(236,226,200,.94);border:1.4px solid var(--ink);box-shadow:4px 6px 0 rgba(29,39,64,.1);font:9px/1.3 var(--f-mono);transform:rotate(-3deg) scale(.45);opacity:0;transition:left 2.05s cubic-bezier(.18,.68,.18,1),top 2.05s cubic-bezier(.18,.68,.18,1),opacity .75s ease,transform 2.05s ease}
.chosen-action strong{font-weight:500;display:block}.chosen-action small{font:14px var(--f-hand);color:var(--ink2)}
.episode.has-visited-choose .chosen-action{opacity:1;transform:rotate(-3deg) scale(1)}
.episode.has-visited-act .chosen-action{left:91.5%;top:403px;transform:rotate(11deg) scale(.22);opacity:.72}
.episode.has-visited-observe .chosen-action{opacity:0;transform:rotate(18deg) scale(.08)}
.episode[data-state="choose"] .chosen-action{animation:chosen-pulse 1.25s ease both}
@keyframes chosen-pulse{50%{box-shadow:0 0 0 10px rgba(138,121,184,.18),4px 6px 0 rgba(29,39,64,.1)}}

/* Reality answers with predicted vs observed traces. */
.reality-card{position:absolute;right:.5%;top:488px;width:162px;padding:10px;background:rgba(236,226,200,.72);border:1px solid rgba(32,36,26,.65);transform:rotate(1deg);opacity:.22;z-index:7;transition:opacity 1s ease,transform 1.1s ease}
.reality-card h4{font:500 8px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;margin:0 0 7px}
.trace{height:46px;position:relative;border-left:1px solid var(--ink);border-bottom:1px solid var(--ink);overflow:hidden}
.trace-line{position:absolute;left:8px;top:var(--top);width:var(--w);height:2px;background:var(--ink);transform-origin:left;transform:rotate(var(--a)) scaleX(0);transition:transform 1s cubic-bezier(.2,.72,.23,1);transition-delay:var(--d)}
.trace-line.predicted{background:repeating-linear-gradient(90deg,var(--purple-ink) 0 5px,transparent 5px 9px)}
.trace-line.observed{background:var(--green)}
.episode.has-visited-observe .reality-card{opacity:1;transform:rotate(1deg) translateY(-3px)}
.episode.has-visited-observe .trace-line{transform:rotate(var(--a)) scaleX(1)}
.episode[data-state="act"] .reality-world{animation:reality-receive 2.1s .25s ease both}
@keyframes reality-receive{0%,100%{box-shadow:none;transform:rotate(2deg)}55%{box-shadow:0 0 0 13px rgba(138,121,184,.17);transform:rotate(-1deg) scale(1.06)}}
.trace-key{display:flex;gap:10px;margin-top:6px;font:8px var(--f-mono)}
.trace-key span::before{content:"";display:inline-block;width:12px;border-top:2px solid var(--green);margin-right:4px;vertical-align:middle}.trace-key .pred::before{border-top:2px dashed var(--purple-ink)}

/* The observed outcome upgrades the system as one unmistakable traveling pulse. */
.episode[data-state="learn"] .flow-node::after{border-width:2.5px;border-color:var(--purple-ink);background:rgba(203,186,221,.12);animation:system-upgrade-pulse 1.45s ease both}
.episode[data-state="learn"] .flow-node-art{animation:system-upgrade-art 1.45s ease both}
.episode[data-state="learn"] .node-reality::after,.episode[data-state="learn"] .node-reality .flow-node-art{animation-delay:0s}.episode[data-state="learn"] .node-actor::after,.episode[data-state="learn"] .node-actor .flow-node-art{animation-delay:.24s}.episode[data-state="learn"] .node-cost::after,.episode[data-state="learn"] .node-cost .flow-node-art{animation-delay:.48s}.episode[data-state="learn"] .node-world::after,.episode[data-state="learn"] .node-world .flow-node-art{animation-delay:.72s}.episode[data-state="learn"] .node-configurator::after,.episode[data-state="learn"] .node-configurator .flow-node-art{animation-delay:.96s}.episode[data-state="learn"] .node-memory::after,.episode[data-state="learn"] .node-memory .flow-node-art{animation-delay:1.2s}.episode[data-state="learn"] .node-perception::after,.episode[data-state="learn"] .node-perception .flow-node-art{animation-delay:1.44s}.episode[data-state="learn"] .node-sleep::after,.episode[data-state="learn"] .node-sleep .flow-node-art{animation-delay:1.68s}
.episode[data-state="learn"] .search-arena{animation:search-upgrade 2.1s .45s ease both}
@keyframes system-upgrade-pulse{0%{opacity:0;transform:translate(-50%,-50%) scale(.52)}42%{opacity:1;transform:translate(-50%,-50%) scale(1.23);box-shadow:0 0 0 8px rgba(203,186,221,.14),0 0 28px rgba(138,121,184,.4)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.48);box-shadow:none}}
@keyframes system-upgrade-art{0%,100%{filter:none;transform:scale(1)}42%{filter:saturate(1.45) brightness(1.13) drop-shadow(0 0 10px rgba(138,121,184,.62));transform:scale(1.08)}}
@keyframes search-upgrade{0%,100%{border-color:rgba(32,36,26,.48);box-shadow:none}48%{border-color:var(--purple-ink);box-shadow:inset 0 0 28px rgba(203,186,221,.13),0 0 18px rgba(138,121,184,.2)}}
.skill-stamp{position:absolute;left:62%;top:650px;padding:6px 8px;border:1px solid var(--ink);background:rgba(236,226,200,.92);font:500 8px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;opacity:0;transform:rotate(-5deg) scale(.6);z-index:10}
.episode.has-visited-consolidate .skill-stamp{left:31%;top:122px;opacity:0;transform:rotate(8deg) scale(.12)}
.episode[data-state="consolidate"] .skill-stamp{animation:skill-to-memory 2.8s .18s cubic-bezier(.2,.72,.23,1) both}
.episode[data-state="consolidate"] .node-memory::after{border-color:var(--purple-ink);animation:memory-accepts-skill .9s 2.35s ease both}
.episode[data-state="consolidate"] .node-memory .flow-node-art{animation:memory-accepts-art .9s 2.35s ease both}
@keyframes skill-to-memory{0%{left:62%;top:650px;opacity:0;transform:rotate(-8deg) scale(.45)}14%{opacity:1}58%{left:46%;top:380px;opacity:1;transform:rotate(3deg) scale(.85)}86%{left:31%;top:122px;opacity:1;transform:rotate(8deg) scale(.72)}100%{left:31%;top:122px;opacity:0;transform:rotate(18deg) scale(.08)}}
@keyframes memory-accepts-skill{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}55%{opacity:.95;transform:translate(-50%,-50%) scale(1.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(.92)}}
@keyframes memory-accepts-art{0%,100%{filter:none;transform:scale(1)}55%{filter:saturate(1.4) drop-shadow(0 0 10px rgba(138,121,184,.55));transform:scale(1.08)}}
.episode[data-state="consolidate"] .node-sleep{animation:sleep-bloom 1.65s ease-in-out both}
@keyframes sleep-bloom{0%,100%{transform:scale(1)}45%{transform:scale(1.09) rotate(-3deg);filter:drop-shadow(0 0 12px rgba(203,186,221,.55))}}

/* Straight notebook connectors. */
.flow-link{position:absolute;height:2px;z-index:1;transform-origin:left center;background:repeating-linear-gradient(90deg,rgba(106,90,160,.6) 0 7px,transparent 7px 13px);opacity:.28;transition:opacity .45s ease}
.link-perception-memory{left:22%;top:225px;width:155px;transform:rotate(-25deg)}
.link-perception-config{left:22%;top:290px;width:170px;transform:rotate(40deg)}
.link-memory-config{left:36%;top:205px;width:224px;transform:rotate(72deg)}
.link-config-search{left:41%;top:462px;width:155px;transform:rotate(-35deg)}
.episode.has-visited-retrieve .link-perception-memory,.episode.has-visited-configure .link-perception-config,.episode.has-visited-configure .link-memory-config,.episode.has-visited-propose .link-config-search{opacity:.85}

.episode-caption{min-height:88px;margin:18px auto 0;max-width:850px;text-align:center;font:22px/1.35 var(--f-hand);color:var(--ink2)}
.episode-caption strong{font-weight:600;color:var(--ink)}
.episode-steps{list-style:none;margin:18px auto 0;padding:0;display:flex;align-items:flex-start;justify-content:center;gap:7px;flex-wrap:wrap;max-width:980px}
.episode-step{border:0;background:transparent;color:var(--ink3);font:9px var(--f-mono);letter-spacing:.04em;padding:8px 7px;min-height:44px;cursor:pointer;position:relative}
.episode-step::before{content:"";display:block;width:8px;height:8px;margin:0 auto 6px;border:1px solid currentColor;border-radius:50%;background:var(--bg);transition:background .25s ease,transform .25s ease}
.episode-step.is-visited::before{background:var(--purple)}
.episode-step.is-active{color:var(--ink)}.episode-step.is-active::before{background:var(--pink);transform:scale(1.45)}
.episode-transcript{max-width:880px;margin:24px auto 0;border-top:1px dashed rgba(32,36,26,.35);padding-top:14px}
.episode-transcript summary{cursor:pointer;font:500 10px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.episode-transcript ol{font:13px/1.65 var(--f-mono);color:var(--ink2);padding-left:24px}
.episode-transcript li+li{margin-top:7px}

.episode.is-complete .episode-progress{color:var(--purple-ink)}

/* A tiny real-world vignette, deliberately not another architecture icon. */
.reality-world{position:relative;display:block;width:104px;height:88px;border:1.4px solid var(--ink);border-radius:48% 52% 46% 54%/56% 44% 55% 45%;background:rgba(236,226,200,.23);transform:rotate(2deg)}
.rw-horizon{position:absolute;left:12px;right:11px;bottom:20px;border-top:1.3px dashed var(--ink3)}
.rw-sun{position:absolute;right:17px;top:14px;width:14px;height:14px;border:1.3px solid var(--coral);border-radius:50%}
.rw-person{position:absolute;left:35px;bottom:22px;width:10px;height:23px;border:1.4px solid var(--navy);border-radius:7px 7px 3px 3px}
.rw-person::before{content:"";position:absolute;left:1px;top:-10px;width:6px;height:6px;border:1.4px solid var(--navy);border-radius:50%}
.rw-clock{position:absolute;right:22px;bottom:25px;width:22px;height:22px;border:1.2px solid var(--purple-ink);border-radius:50%}
.rw-clock::before{content:"";position:absolute;left:10px;top:4px;height:7px;border-left:1px solid var(--purple-ink);transform:rotate(25deg);transform-origin:bottom}

/* Tablet and mobile become a vertical story rather than a scaled desktop map. */
@media(max-width:960px){
  .episode{margin-left:30px;margin-right:30px}.episode-head{grid-template-columns:1fr}.episode-controls{justify-content:flex-start}.episode-progress{text-align:left}
  .episode-stage{min-height:1110px}
  .phase-label{display:none}
  .raw-stream{left:2%;top:55px;height:340px;--target-x:calc(42% + 58px);--target-y:97px}.data-scrap{transform:scale(.9) rotate(var(--r))}.scrap-bg{--y:0px}.scrap-insulin{--y:72px}.scrap-sleep{--y:144px}.scrap-heart{--y:216px}.scrap-context{--y:288px}
  .node-perception{left:42%;top:96px}.node-memory{left:68%;top:240px}.node-configurator{left:38%;top:365px}
  .search-arena{left:7%;top:535px;width:70%;height:410px}.node-reality{right:1%;top:790px}.node-sleep{left:34%;top:946px}
  .search-arena .node-actor{left:2%;top:145px}.search-arena .node-world{left:35%;top:28px}.search-arena .node-cost{left:35%;top:278px}
  .resource-controller{right:1%;top:555px}
  .working-brief{left:45%;top:440px}.episode.has-visited-propose .working-brief{left:18%;top:620px}
  .state-token{left:49%;top:190px}.episode.has-visited-retrieve .state-token{left:73%;top:315px}.episode.has-visited-configure .state-token{left:37%;top:462px}
  .memory-scrap.one{left:67%;top:225px}.memory-scrap.two{left:82%;top:270px}.memory-scrap.three{left:73%;top:360px}.episode.has-visited-configure .memory-scrap.one{left:57%;top:420px}.episode.has-visited-configure .memory-scrap.two{left:59%;top:463px}.episode.has-visited-configure .memory-scrap.three{left:56%;top:505px}
  .chosen-action{left:67%;top:700px}.episode.has-visited-act .chosen-action{left:87%;top:825px}
  .reality-card{top:895px}.episode.has-visited-consolidate .skill-stamp{left:70%;top:285px;opacity:0;transform:rotate(8deg) scale(.08)}.episode[data-state="consolidate"] .skill-stamp{animation-name:skill-to-memory-tablet}
  @keyframes skill-to-memory-tablet{0%{left:43%;top:1025px;opacity:0;transform:rotate(-8deg) scale(.45)}14%{opacity:1}58%{left:55%;top:660px;opacity:1;transform:rotate(3deg) scale(.85)}86%{left:70%;top:285px;opacity:1;transform:rotate(8deg) scale(.72)}100%{left:70%;top:285px;opacity:0;transform:rotate(18deg) scale(.08)}}
  .flow-link{display:none}
}

@media(max-width:720px){
  .episode{margin:44px 20px 76px}.episode-head h2{font-size:42px}.episode-intro{font-size:21px}.episode-controls{gap:7px}.episode-progress{width:100%;order:-1}
  .episode-control{flex:1 1 auto;padding-inline:12px}
  .episode-stage{min-height:780px;margin-top:20px;border-bottom:0;overflow:hidden}
  .episode-stage::before{background-size:27px 27px}
  .raw-stream{left:0;top:28px;width:100%;height:130px;--target-x:calc(50% - 4px);--target-y:239px}.data-scrap{min-width:84px;padding:5px 7px;font-size:9px}.data-scrap small{font-size:13px}.scrap-bg{--x:1%;--y:8px}.scrap-insulin{--x:35%;--y:40px}.scrap-sleep{--x:68%;--y:7px}.scrap-heart{--x:12%;--y:84px}.scrap-context{--x:58%;--y:90px}
  .flow-node{width:132px;opacity:.18;filter:grayscale(.3);transform:scale(.84)}
  .flow-node-art{height:124px}.flow-node img{width:124px;height:124px}.flow-node-name{font-size:10px}.flow-node-note{font-size:17px}
  .node-perception,.node-memory,.node-configurator,.node-sleep,.node-reality{left:50%;right:auto;top:205px;transform:translateX(-50%) scale(.84)}
  .episode[data-state="perceive"] .node-perception,
  .episode[data-state="retrieve"] .node-memory,
  .episode[data-state="configure"] .node-configurator,
  .episode[data-state="observe"] .node-reality,
  .episode[data-state="learn"] .node-reality,
  .episode[data-state="consolidate"] .node-sleep{opacity:1;filter:none;transform:translateX(-50%) scale(1)}
  .episode.has-visited-perceive:not([data-state="raw-input"]) .node-perception{opacity:.22}
  .episode[data-state="perceive"] .node-perception{opacity:1}
  .state-token,.memory-scrap,.working-brief,.skill-stamp{display:none}
  .chosen-action{left:50%;top:395px;transform:translateX(-50%) rotate(-3deg) scale(.45)}
  .episode[data-state="choose"] .chosen-action,.episode[data-state="act"] .chosen-action{left:50%;top:395px;opacity:1;transform:translateX(-50%) rotate(-3deg) scale(1)}
  .reality-card{display:block;left:50%;right:auto;top:390px;transform:translateX(-50%) rotate(1deg);opacity:.12}
  .episode[data-state="observe"] .reality-card,.episode[data-state="learn"] .reality-card{opacity:1;transform:translateX(-50%) rotate(1deg)}
  .search-arena{left:4%;top:178px;width:92%;height:480px;opacity:.12;transform:scale(.92);transition:opacity .6s ease,transform .75s ease}
  .episode[data-state="propose"] .search-arena,.episode[data-state="simulate"] .search-arena,.episode[data-state="score"] .search-arena,.episode[data-state="choose"] .search-arena{opacity:1;transform:scale(1)}
  .search-arena .flow-node{opacity:.28;transform:scale(.86);width:88px}.search-arena .flow-node-art{height:78px}.search-arena .flow-node img{width:78px;height:78px}
  .search-arena .node-actor{left:1%;top:185px}.search-arena .node-world{left:37%;top:52px}.search-arena .node-cost{left:37%;top:330px}
  .episode[data-state="propose"] .node-actor,.episode[data-state="simulate"] .node-world,.episode[data-state="score"] .node-cost,.episode[data-state="choose"] .node-actor{opacity:1;filter:none;transform:scale(1)}
  .resource-controller{right:4%;top:652px;width:142px;transform:scale(.88) rotate(1.5deg);transform-origin:right top;opacity:.34}.episode[data-state="simulate"] .resource-controller,.episode[data-state="score"] .resource-controller{opacity:1;transform:scale(.92) rotate(-1deg)}
  .action-space{left:1%;top:315px;transform:scale(.82) rotate(-2deg);transform-origin:left}.mcts-tree{left:42%;top:125px;width:46%;height:235px}.action-candidate{font-size:7px;max-width:66px}.episode.has-visited-propose .action-candidate{left:24%}.episode.has-visited-simulate .action-candidate{left:42.5%}
  .episode-caption{font-size:20px;min-height:104px;margin-top:12px;text-align:left}
  .episode-steps{justify-content:flex-start;gap:2px}.episode-step{font-size:8px;padding-inline:5px;flex:1 1 64px}
  .episode-transcript ol{font-size:12px}
}

@media(max-width:390px){
  .episode{margin-left:16px;margin-right:16px}.episode-head h2{font-size:38px}.episode-control{font-size:11px}.episode-stage{min-height:750px}
  .raw-stream .scrap-heart,.raw-stream .scrap-context{opacity:0}.episode[data-state="raw-input"] .raw-stream .scrap-heart,.episode[data-state="raw-input"] .raw-stream .scrap-context{opacity:0}
  .episode-step{flex-basis:58px}
}

@media(prefers-reduced-motion:reduce){
  html:not(.force-motion) .episode *,html:not(.force-motion) .episode *::before,html:not(.force-motion) .episode *::after{animation:none!important;transition:none!important}
  html:not(.force-motion) .episode-stage{min-height:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;padding:28px 0;overflow:visible}
  html:not(.force-motion) .episode-stage::before,html:not(.force-motion) .phase-label,html:not(.force-motion) .raw-stream,html:not(.force-motion) .state-token,html:not(.force-motion) .memory-scrap,html:not(.force-motion) .working-brief,html:not(.force-motion) .chosen-action,html:not(.force-motion) .reality-card,html:not(.force-motion) .skill-stamp,html:not(.force-motion) .flow-link{display:none!important}
  html:not(.force-motion) .episode-stage>.flow-node,html:not(.force-motion) .search-arena .flow-node{position:relative!important;left:auto!important;right:auto!important;top:auto!important;opacity:1!important;filter:none!important;transform:none!important;width:100%}
  html:not(.force-motion) .episode-stage>.flow-node .flow-node-art,html:not(.force-motion) .search-arena .flow-node-art{height:120px}
  html:not(.force-motion) .episode-stage>.flow-node img,html:not(.force-motion) .search-arena .flow-node img{width:120px;height:120px}
  html:not(.force-motion) .search-arena{display:contents!important}
  html:not(.force-motion) .search-arena>.search-label,html:not(.force-motion) .search-arena>.search-note,html:not(.force-motion) .search-arena>.action-space,html:not(.force-motion) .search-arena>.action-candidate,html:not(.force-motion) .search-arena>.mcts-tree,html:not(.force-motion) .resource-controller{display:none!important}
  html:not(.force-motion) .episode-steps{display:none}html:not(.force-motion) .episode-caption{text-align:left}html:not(.force-motion) .episode-control[data-flow-toggle],html:not(.force-motion) .episode-control[data-flow-replay],html:not(.force-motion) .episode-control[data-flow-prev],html:not(.force-motion) .episode-control[data-flow-next]{display:none}
}
@media(prefers-reduced-motion:reduce) and (max-width:720px){html:not(.force-motion) .episode-stage{grid-template-columns:repeat(2,minmax(0,1fr))}}