*{box-sizing:border-box}body{margin:0;background:#151720;color:#f1f0f8;font:15px/1.6 Inter,Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:#a9a3c3;text-underline-offset:4px}main{max-width:1400px;padding:25px 44px 50px;margin:auto}.toolbar{display:flex;align-items:center;justify-content:space-between;font:10px 'JetBrains Mono',monospace;letter-spacing:.06em}.toolbar button,.visual-footer button{border:1px solid #393c50;background:#1d202c;border-radius:6px;padding:8px 12px;font-size:11px}.versions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:32px 0}.versions button{text-align:left;border:1px solid #303344;border-radius:10px;padding:15px 20px;background:transparent;color:#9397b1;font-size:11px}.versions b{font-size:15px;margin-left:12px;color:#e5e4ef}.versions span{display:block;margin-left:27px;margin-top:3px}.versions [aria-pressed=true]{border-color:#a69cf6;background:#222233}.intro{max-width:1010px}.intro small,.story>small{font:10px 'JetBrains Mono',monospace;letter-spacing:.13em;color:#aaa1ff}h1{font:46px/1.1 Newsreader,Georgia,serif;letter-spacing:-.03em;margin:15px 0 20px}.intro p{font-size:16px;color:#afb2c5;line-height:1.7}.experience{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(360px,1fr);gap:38px;margin-top:35px;align-items:center}.visual{min-width:0}.scene-meta{display:flex;justify-content:space-between;border-bottom:1px solid #303344;padding:12px 0;font:9px 'JetBrains Mono',monospace;color:#969ab2;letter-spacing:.08em}.stage{position:relative;aspect-ratio:760/580;overflow:hidden;isolation:isolate}svg{width:100%;height:100%;overflow:visible}.orbit{stroke:#767391;stroke-width:1;stroke-dasharray:2 7;fill:none;opacity:.5}#camera{transform-origin:350px 285px;transition:transform 0.825s cubic-bezier(.22,.68,.15,1)}.base{stroke:#737889;stroke-width:.7;opacity:.3;fill:none}.colored{stroke-width:1.9;fill:none;opacity:.85;stroke-linecap:round}.pin{fill:#151720;stroke:#77768c;stroke-width:1.3}.baz{font:bold 36px Inter,Arial;letter-spacing:-3px;fill:#f0edff}.context{font:9px Inter,Arial;fill:#a5a7ba}.layer{transform-origin:350px 285px;transition:transform 0.8s cubic-bezier(.22,.68,.15,1),opacity 0.5s}#brand{transition:opacity 0.3s}.artifact{position:absolute;right:3%;top:30%;width:255px;padding:19px;background:#20232f;border:1px solid #45465d;border-radius:12px;box-shadow:0 20px 70px #07091255;opacity:0;transform:translateX(35px) translateY(15px);transition:opacity 0.425s 0.275s,transform 0.625s 0.2s}.artifact.visible{opacity:1;transform:none}.artifact small{font:9px 'JetBrains Mono',monospace;color:#9a9fb9;display:block;margin-bottom:15px}.artifact strong{display:block;font-size:14px}.artifact p{font-size:12px;color:#b4b8cc;line-height:1.65}.artifact pre{font:10px/1.9 'JetBrains Mono',monospace;white-space:pre-wrap;background:#171a24;padding:10px;border-radius:5px;color:#7bd2bb}.artifact code{display:block}.artifact .badge{display:inline-block;font-size:9px;color:#80c8b4;border:1px solid #3e615b;border-radius:20px;padding:3px 9px}.artifact .old{color:#ab8598}.callout{position:absolute;left:25%;top:15%;max-width:225px;background:#242335;border:1px solid #5c527a;border-radius:6px;padding:10px 14px;font:10px/1.6 'JetBrains Mono',monospace;opacity:0;transition:opacity 0.4s 0.2s,transform 0.5s;transform:translateY(10px)}.callout.visible{opacity:1;transform:none}.scene-caption{position:absolute;bottom:3%;left:0;right:0;text-align:center;font:10px 'JetBrains Mono',monospace;color:#aaa6c3}.visual-footer{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.legend{font-size:9px;color:#b3b5c6;display:flex;align-items:center;gap:7px}.legend i{width:5px;height:5px;border-radius:50%;background:#a69cf6}.legend i:nth-of-type(2){background:#65c7b0}.legend i:nth-of-type(3){background:#e7b56e}.compound{text-align:center;font-size:12px;color:#b5afda;margin:16px 0}.step{border-bottom:1px solid #343749;padding:15px 0}.step button{width:100%;background:transparent;border:0;text-align:left;padding:0}.step .meta{display:flex;justify-content:space-between;font:9px 'JetBrains Mono',monospace;color:var(--ink);text-transform:uppercase;letter-spacing:.08em}.step h2{font-size:18px;font-weight:500;line-height:1.3;letter-spacing:-.02em;margin:10px 0}.step p{font-size:14px;line-height:1.7;color:#aeb2c8;margin:12px 0}.step [aria-pressed=true] h2{color:var(--ink)}.step p[hidden]{display:none}.direction-note{font-size:11px;color:#8e92aa;border-left:2px solid #57516f;padding-left:13px;margin-top:24px}.footnote{color:#82869e;font-size:11px;margin:40px 0 0}.layer-labels{display:none;position:absolute;right:9%;top:12%;height:63%;flex-direction:column;justify-content:space-between;font:9px 'JetBrains Mono',monospace}.layer-labels span:nth-child(1){color:#a69cf6}.layer-labels span:nth-child(2){color:#65c7b0}.layer-labels span:nth-child(3){color:#e7b56e}
[data-variant][data-step="1"] #camera{transform:translate(-110px,40px) scale(1.2)}[data-variant][data-step="2"] #camera{transform:translate(25px,25px) scale(1.08) rotate(-14deg)}[data-variant][data-step="3"] #camera{transform:translate(-115px,5px) scale(.9)}[data-variant][data-step="2"] .artifact{top:58%;right:4%;width:240px}[data-variant][data-step="2"] .callout{left:8%;top:19%}
button:focus-visible,a:focus-visible{outline:2px solid #aaa1ff;outline-offset:5px}.reduced *{animation:none!important;transition:none!important}@media(max-width:850px){main{padding:20px}.experience{grid-template-columns:1fr}.visual{max-width:740px;width:100%}.versions button{padding:10px}.versions span{display:none}.versions b{font-size:12px;margin-left:4px}.artifact{width:210px}.intro h1{font-size:38px}.story{max-width:650px}.toolbar span{display:none}}@media(max-width:480px){.artifact{width:160px;padding:10px;top:26%}.artifact strong{font-size:11px}.artifact p{font-size:10px}.artifact pre{font-size:8px}.artifact small{font-size:7px;margin-bottom:6px}.callout{font-size:8px;padding:5px;max-width:140px}.scene-caption{font-size:8px}[data-variant][data-step="2"] .artifact{width:160px}.versions button{font-size:9px}.versions b{display:block;margin:0}.layer-labels{font-size:7px}.stage{min-height:310px}}

.plate,.layer-pin{opacity:0}
/* Four navigation variants share the same constellation renderer. */
.versions{grid-template-columns:repeat(3,1fr)}
#alternate{display:none;position:absolute;inset:0;width:100%;height:100%}
.callout{display:none!important}
#inline-output{position:absolute;pointer-events:none;color:#cfcae9;font:12px 'JetBrains Mono',monospace;bottom:15%;left:0;right:0;text-align:center}
[data-variant] #inline-output{display:none}
.loom-brand{fill:#e9e5f9;font:bold 42px Inter,Arial;letter-spacing:-3px}.thread-label,.scene-label{font:10px 'JetBrains Mono',monospace;letter-spacing:.04em}
/* Keep the full story visible while selection changes only the illustration. */
#steps{position:relative}
.step{padding:12px 0;transition:border-color 0.225s,background 0.225s}
.step button{padding:10px 8px 4px;transition:color 0.175s,background 0.175s;border-radius:5px}
.step h2{font-size:18px;margin:8px 0 4px;transition:color 0.2s,transform 0.2s}
.step button:is(:hover,:focus-visible,[aria-pressed=true]) :is(h2,.step-eyebrow){color:var(--ink)}
.step button:hover{background:#ffffff04}
.step.active{border-color:color-mix(in srgb,var(--ink) 55%,transparent)}
.step p{position:static;height:auto;margin:0;padding:2px 8px 8px;font-size:14px;line-height:1.65}
.direction-note{min-height:54px}
@media(max-width:480px){.versions{grid-template-columns:repeat(2,1fr)}#inline-output{font-size:9px}.step p{font-size:14px}.thread-label{font-size:11px}}

/* Outputs emerge from the diagram, then settle into readable code. */
#code-output{position:absolute;left:45%;right:2%;top:28%;z-index:3;background:#151720f5;padding:16px 0 12px 18px;border-left:2px solid #a69cf6;box-shadow:-18px 0 35px #151720;font:11px/1.9 'JetBrains Mono',monospace}
#code-output[hidden]{display:none}
.code-file{font-size:10px;color:#c8c5dc;padding-bottom:14px;border-bottom:1px solid #3b3c4e}
.code-file>span{display:block;font-size:8px;letter-spacing:.08em;color:#918ba8}
#code-output pre{font:inherit;white-space:pre-wrap;overflow-wrap:anywhere;margin:16px 0}
#code-output pre>span{display:block}
.code-muted{color:#83899d}.code-add{color:#7ed4b7;background:#65c7b010}
.code-verdict{font:12px/1.6 Inter,Arial;border-top:1px solid #383c4d;padding-top:12px}
.code-verdict b,.code-verdict span{display:block}.code-verdict span{font-size:11px;color:#9fa6be;margin-top:4px}
.code-reveal #inline-output{display:none}
#alternate{transition:transform 0.7s cubic-bezier(.22,.68,.15,1);transform-origin:35% 50%}
@media(max-width:480px){#code-output{font-size:8px;padding-left:10px;left:43%;top:24%}.code-file{font-size:9px}.code-file>span{font-size:7px}.code-verdict{font-size:10px}.code-verdict span{font-size:9px}}

#tune-output{display:none;position:absolute;left:48%;top:18%;width:49%;height:65%;overflow:visible;z-index:2}
.tune-reveal #tune-output{display:block}
.tune-reveal #inline-output{display:none}
[data-variant].code-reveal #camera{transform:translate(-195px,10px) scale(.82)}
.code-reveal .artifact,.tune-reveal .artifact{display:none!important}

.archive-link{margin:30px 0 0;font-size:12px}.archive-link+.footnote{margin-top:14px}
#coordinate-output{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:0;transition:opacity 0.225s}
.coordinate-reveal #coordinate-output{opacity:1}
.coordinate-reveal #inline-output,.coordinate-reveal .layer-labels{opacity:0}
[data-variant].coordinate-reveal #camera{transform:scale(.76);opacity:.18}
[data-variant].coordinate-reveal #brand{opacity:0}
#network{transition:opacity 0.25s}
#camera{transition:transform 0.825s cubic-bezier(.22,.68,.15,1),opacity 0.25s}

/* Rotate within the flattened disk so the constellation keeps its perspective. */
.disk-content{transform-origin:350px 285px;transform:rotate(0deg);transition:transform 0.6s ease-out}
.reduced [data-variant].coordinate-reveal #camera{opacity:.68}
.reduced [data-variant].coordinate-reveal .colored{stroke-width:2.5;opacity:1}

/* Product moments: one relevant surface per step, with context always in view. */
.experience[data-step="0"] #camera{transform:translate(125px,0) scale(.73)}
.experience[data-step="0"] .layer-labels{display:none}
#product-moment{position:absolute;z-index:4;right:2%;top:30%;width:46%;border:1px solid #42475c;border-radius:10px;background:#1b1e29;box-shadow:0 18px 45px #090b1455;overflow:hidden;font:12px/1.55 Inter,Arial}
#product-moment[hidden]{display:none}
#product-moment header{padding:12px 14px;border-bottom:1px solid #35394c;display:flex;gap:8px;justify-content:space-between;align-items:center;background:#202430}
#product-moment header b{font-size:12px;color:#eeeafa}
#product-moment header>span{font-size:9px;color:#8bd2be}
.product-body{padding:15px}
.product-body h3{font-size:15px;line-height:1.3;margin:12px 0;color:#eeebf8}
.product-body p{font-size:12px;color:#b9bdd0;margin:10px 0}
.product-body small{font:9px 'JetBrains Mono',monospace;color:#9cabc8}
.product-body code{display:block;font:10px/1.6 'JetBrains Mono',monospace;padding:8px;background:#16332e;color:#85d5bc;white-space:normal}
.product-body footer{border-top:1px solid #35394c;margin-top:14px;padding-top:10px;font-size:9px;color:#9da5bc}
.skill-tags{display:flex;gap:5px}.skill-tags span{border:1px solid #5a5078;color:#c3b7ef;border-radius:4px;padding:2px 6px;font-size:9px}
.memory-source{padding:9px;border:1px solid #356253;border-radius:5px;color:#8bd2be;font-size:10px}
.skill-change>span{display:block;font-size:10px;color:#d4b88c;margin-bottom:9px}
.skill-change code+code{padding-top:0}.product-body footer i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#65c7b0;margin-right:5px}
.experience .artifact{display:none!important}
.experience[data-step="2"] #inline-output{display:none}
.experience[data-step="2"] #camera{transform:translate(-130px,0) scale(.8)}
.experience[data-variant][data-step="1"] #product-moment{top:62%;right:3%;width:45%}
.experience[data-variant][data-step="1"] .product-body{padding:10px 13px}
.experience[data-variant][data-step="1"] .product-body p,.experience[data-variant][data-step="1"] .product-body footer{display:none}
.experience[data-variant][data-step="1"] .product-body h3{font-size:13px;margin:7px 0}
.experience[data-step="3"] #tune-output{display:none}
@media(max-width:480px){#product-moment{font-size:10px;width:48%;top:25%}#product-moment header{padding:7px;display:block}#product-moment header b{font-size:10px}#product-moment header>span{display:block;font-size:8px}.product-body{padding:8px}.product-body h3{font-size:12px}.product-body p{font-size:10px}.product-body code{font-size:8px;padding:5px}.product-body footer{font-size:8px;margin-top:8px;padding-top:6px}.skill-tags span{font-size:7px}.experience[data-variant][data-step="1"] #product-moment{top:57%;width:48%}.memory-source{font-size:8px;padding:6px}}

/* Restored directions retain their geometry beside sequential product surfaces. */
.versions{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:850px){.versions{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Review snippets share the open code-output treatment. */
#product-moment[data-kind="review"]{border:0;border-left:2px solid #a69cf6;border-radius:0;background:#151720f5;box-shadow:-18px 0 35px #151720;padding:16px 0 12px 18px;font:11px/1.9 'JetBrains Mono',monospace;overflow:visible}
#product-moment[data-kind="review"] pre{font:inherit;white-space:pre-wrap;overflow-wrap:anywhere;margin:16px 0}
#product-moment[data-kind="review"] pre>span{display:block}
#product-moment[data-kind="review"] .code-verdict b,#product-moment[data-kind="review"] .code-verdict>span{display:block}
.experience[data-variant][data-step="1"] #product-moment[data-kind="review"]{top:48%;width:45%}
@media(max-width:480px){#product-moment[data-kind="review"]{padding:10px 0 9px 10px;font-size:8px}#product-moment[data-kind="review"] .code-file{font-size:9px;padding-bottom:9px}#product-moment[data-kind="review"] pre{margin:10px 0}#product-moment[data-kind="review"] .code-verdict{font-size:10px}.experience[data-variant][data-step="1"] #product-moment[data-kind="review"]{top:43%}}

/* Learn and Adapt each have a distinct visual verb, rather than a shared card. */
#learning-scene{display:none;position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
[data-variant][data-step="3"] #camera{transform:translate(30px,-10px) scale(.68);opacity:.22}
[data-variant][data-step="3"] #brand{opacity:0}
#product-moment .learned-code{margin:12px 0;background:#151923;padding:10px;border-radius:5px;white-space:pre-wrap}
#product-moment .learned-code code{background:none;padding:0;font:10px/1.8 'JetBrains Mono',monospace;color:#bac0d5}
.learned-code span{display:block;overflow-wrap:anywhere}
@media(max-width:480px){#product-moment .learned-code{padding:6px}#product-moment .learned-code code{font-size:8px}}
.step-theme{display:block;margin:5px 0 0;font:9px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.12em;color:#949bb3;transition:color 0.2s}.step.active .step-theme{color:var(--ink)}
.experience[data-step="1"] #network,.experience[data-step="1"] #alternate{opacity:0!important;pointer-events:none}
.experience[data-step="1"] #coordinate-output{transform:none!important;opacity:1;width:100%;height:100%}
.experience[data-step="1"] #product-moment[data-kind="review"]{top:29%;right:0;width:41%}
@media(max-width:480px){.step-theme{font-size:8px}.experience[data-step="1"] #product-moment[data-kind="review"]{width:41%;top:30%}}

/* One persistent constellation across the four process steps. */
.experience[data-variant][data-step="1"] #network{opacity:1!important}
.experience[data-step="1"].coordinate-reveal #camera{transform:translate(-15px,0) scale(.50);opacity:1}
.experience[data-variant][data-step="3"] #brand{opacity:1}
.experience[data-step="1"] #product-moment[data-kind="review"]{top:29%;right:0;width:40%}
.scene-meta #scene-title{color:#beb6f2}

/* Prioritize the persistent graphic; mapping precedes the delivery signals. */
.experience{grid-template-columns:minmax(0,1.65fr) minmax(330px,1fr);gap:32px}
.experience[data-step="0"] #coordinate-output{opacity:1;transform:none;width:100%;height:100%}
.experience[data-step="1"].coordinate-reveal #camera{transform:translate(-30px,0) scale(.70);opacity:1}
.experience[data-step="1"] #product-moment[data-kind="review"]{width:34%;right:0;top:29%;padding-left:12px;font-size:10px}
@media(max-width:850px){.experience{grid-template-columns:1fr}}
@media(max-width:480px){.experience[data-step="1"] #product-moment[data-kind="review"]{font-size:7px;padding-left:8px}.experience[data-step="1"] .code-verdict{font-size:9px}}

/* More room for the shared diagrams. */
.experience{grid-template-columns:minmax(0,1.95fr) minmax(310px,1fr);gap:30px}
.step p{font-size:15px}
@media(max-width:850px){.experience{grid-template-columns:1fr}}
@media(max-width:480px){.step p{font-size:15px}}

/* Four-step educational sequence: map, coordinate, learn, adapt. */
.scene-meta{position:relative;justify-content:center;min-height:62px;align-items:center}
.scene-meta #scene-title{font:500 25px/1.2 Inter,Arial;letter-spacing:-.025em;color:#c9bfff;text-transform:none}
.scene-meta #count{position:absolute;right:0;font-size:10px}
.experience[data-step="2"] #scene-title{color:#78d5bc}
.experience[data-step="3"] #scene-title{color:#efc381}
.experience:not([data-step="0"]) #coordinate-output{opacity:0!important}
.experience:not([data-step="0"]) #camera{transform:translate(-190px,0) scale(.63);transform-origin:350px 285px!important;opacity:1!important}
.experience:not([data-step="0"]) #alternate{transform:translate(0,30.1724%) scale(.4)!important;transform-origin:0 0!important}
.experience[data-step="3"] #camera{transform:translate(-195px,-75px) scale(.52)}
.experience[data-step="3"] #alternate{transform:translate(0,17.2414%) scale(.4)!important}
.experience #product-moment[hidden]{display:none!important}
.experience .scene-caption{display:none}
@media(max-width:480px){.scene-meta #scene-title{font-size:21px}.scene-meta #count{font-size:9px}}

.experience[data-variant] #brand{opacity:1!important}

/* Quiet themes; context and Memory settle into the same home in Learn and Adapt. */
.scene-meta{border-bottom:0;min-height:52px}
.scene-meta #scene-title{font-size:21px}
.experience[data-step="2"] #camera{transform:translate(-195px,-75px) scale(.52)}
.experience[data-step="2"] #alternate{transform:translate(0,17.2414%) scale(.4)!important}

/* Coordinate layout studies use the empty upper and lower portions of the stage. */
.experience[data-variant][data-step="1"] #camera{transform:translate(-220px,-85px) scale(.48)}

/* All navigation variants share the constellation and Memory scenes. */
.experience[data-variant][data-step="0"] #camera{transform:translate(120px,0) scale(.9);transform-origin:350px 285px!important}
.experience[data-variant][data-step="1"] #camera{transform:translate(-205px,-60px) scale(.51)}
.experience[data-variant]:is([data-step="2"],[data-step="3"]) #camera{transform:translate(-195px,-100px) scale(.49)}
.experience #web .base{stroke:#555962!important;opacity:.34}
.experience #web .plate{stroke:#555962!important;opacity:.15}
.experience .orbit{stroke:#8a8d96!important;stroke-dasharray:3 6;stroke-width:1.2;opacity:.7}
.experience #pins .pin{fill:#757981;opacity:.45}
.experience #brand rect{fill:#151720}
.experience #brand .context{display:none}
.experience #learning-scene{overflow:visible}

/* Give the diagram more horizontal room. */
.experience{grid-template-columns:minmax(0,2.35fr) minmax(280px,1fr);gap:25px}
@media(max-width:850px){.experience{grid-template-columns:1fr}}

/* Coordinate moves up as one connected scene, preserving all port positions. */
.experience[data-step="1"] #learning-scene{transform:translateY(-4.3103%)}
.experience[data-variant][data-step="1"] #camera{transform:translate(-205px,-85px) scale(.51)}


/* Stored organizational context remains visible before new nodes are mapped. */
.experience #pins .pin{fill:#85888f;opacity:.6}
.experience #pins .pin:nth-child(4n+1){r:4.5px;fill:#96999f;opacity:.85}

/* Let active hub spokes read clearly against stored context. */
.experience:is([data-variant=frame],[data-variant=offset]) #web{opacity:.78}
.experience:is([data-variant=frame],[data-variant=offset]) #pins{opacity:.6}

/* Four current studies. */
.versions{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:600px){.versions{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Reconstruct inverse transitions without triggering intermediate CSS motion. */
.undo-preparing .experience *,.undoing #camera{transition:none!important}

.scene-meta #scene-title{text-align:center}
.scene-meta #scene-title .step-number{display:block;font:500 9px/1.2 Inter,Arial;letter-spacing:.14em;color:#969ab2;margin-bottom:6px}
.scene-meta #scene-title .step-number::before{content:"STEP "}

/* Source feeds recede once the hub context is established. */
#knowledge-growth path{transition:opacity .45s ease-out}
.experience:not([data-step="0"]) #knowledge-growth path{opacity:0!important}

/* Keep layout transforms below animation priority so reverse motion can interpolate. */
.experience[data-step="0"] #network #camera{transform:translate(120px,0) scale(.9)}
.experience[data-step="1"] #network #camera{transform:translate(-205px,-85px) scale(.51)}
.experience[data-step="2"] #network #camera{transform:translate(-195px,-70px) scale(.49)}
.experience[data-step="2"] #learning-scene{transform:translateY(5.1724%)}
.experience[data-step="3"] #network #camera{transform:translate(-195px,-100px) scale(.49)}

/* Step labels live with their section headlines. */
.scene-meta{display:none}
.step-eyebrow{display:block;font:500 10px/1.4 Inter,Arial;letter-spacing:.09em;text-transform:uppercase;color:#969ab2;margin-bottom:8px;transition:color .2s}
.step [aria-pressed=true] .step-eyebrow{color:var(--ink)}

[data-memory-product]{pointer-events:auto}
.memory-agent-card{height:106px;border:1px solid #343749;border-radius:5px;background:#191c25;color:#f2f3f7;padding:12px;display:flex;gap:12px;font:10px/1.5 Inter,Arial}
.memory-agent-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;border-radius:4px;background:#4643c9;color:white;font:26px/1 Inter,Arial}
.memory-agent-copy{padding-right:24px}.memory-agent-copy strong{font-size:10px}.memory-agent-copy p{margin:4px 0;color:#c0c4d4}
.memory-agent-menu{grid-area:1/1/2/-1;justify-self:end;align-self:start;margin:-3px -3px 0 0;border:1px solid #343749;border-radius:4px;padding:0 5px;font-size:15px}
.memory-brain{grid-area:2/1/3/-1;justify-self:end;align-self:end;margin:0 -3px -4px 0;display:flex;align-items:center;gap:4px;background:#292c3a;border:1px solid transparent;border-radius:5px;padding:4px 6px;font-size:10px;color:#c6c9d8}
.memory-brain:hover{background:#373348;border-color:#938bd2}.memory-brain svg,.memory-rule>svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
#reviewer-memory-panel{position:absolute;inset:2% 3%;z-index:10;background:#151720;color:#f0f1f7;border:1px solid #373a50;border-radius:10px;box-shadow:0 16px 50px #0008;display:flex;flex-direction:column;overflow:hidden;font:12px/1.6 Inter,Arial}
#reviewer-memory-panel header{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;font-size:12px}
.memory-panel-name{display:flex;align-items:center;gap:12px}
#reviewer-memory-panel button{background:transparent;border:1px solid #343749;border-radius:4px;padding:6px 12px;color:#f0f1f7;font-size:11px}
#reviewer-memory-panel [data-close]{font-size:20px;padding:0 10px}
.memory-product-scroll{overflow:auto;flex:1;min-height:0;padding:0 20px 20px;scrollbar-color:#42465b #151720}
.memory-label{margin:8px 0 12px}.memory-rule-file{border:1px solid #343749;padding:14px 12px;border-radius:5px;display:flex;align-items:center;gap:9px}
.memory-rule-file>span{background:#282b3b;border-radius:4px;padding:2px 9px;color:#b5bbce}
.memory-tabs{display:inline-flex;border:1px solid #343749;border-radius:5px;padding:3px;margin:18px 0 12px}
#reviewer-memory-panel .memory-tabs button{border:0}.memory-tabs [aria-selected=true]{background:#252837!important}
.memory-notice{padding:10px 12px;background:#1e212d;border:1px solid #343749;border-radius:4px;color:#c0c4d4}.memory-notice>span{color:#9688ed;margin-right:7px}
.memory-list-heading{display:flex;justify-content:space-between;gap:10px;margin:16px 0 9px;color:#c3c7d6;font-size:10px}.memory-list-heading>span{color:#8c93ab}
.memory-rule-list{border:1px solid #343749;border-radius:7px;overflow:hidden}.memory-rule{display:flex;align-items:flex-start;gap:10px;padding:14px 12px;border-bottom:1px solid #303345}.memory-rule:last-child{border-bottom:0}.memory-rule>svg{flex-shrink:0;color:#a19bcb;margin-top:3px}.memory-rule p{margin:0;flex:1;color:#cbd0de;font-size:11px}.memory-rule-age{color:#8f97b1;white-space:nowrap;font-size:9px;margin-top:3px}
#reviewer-memory-panel .memory-toggle{width:30px;height:17px;flex-shrink:0;border:0;padding:2px;background:#44485d;border-radius:20px;margin-top:3px}.memory-toggle>span{display:block;width:13px;height:13px;background:#fff;border-radius:50%;transition:transform .15s}.memory-toggle[aria-checked=true]{background:#807bc4!important}.memory-toggle[aria-checked=true]>span{transform:translateX(13px)}
.memory-scope-file{margin-top:16px;padding:13px;border:1px solid #343749;border-radius:5px;display:flex;justify-content:space-between}.memory-enabled{color:#65c7b0}
@media(max-width:480px){#reviewer-memory-panel{inset:0;font-size:10px}#reviewer-memory-panel header{padding:10px}.memory-product-scroll{padding:0 10px 10px}.memory-rule-age,.memory-list-heading>span{display:none}.memory-rule{padding:10px 8px;gap:6px}.memory-rule p{font-size:10px}}

.memory-agent-icon svg{width:16px;height:16px;flex-shrink:0}

.memory-agent-card{height:100%}
.memory-agent-retained{border-color:#819ad6}
.memory-retained-summary{grid-area:1/1/-1/-1;margin:-2px 0;pointer-events:none}
.memory-retained-summary strong{color:#819ad6;font-size:12px}
.memory-retained-summary p{margin:3px 0 0;color:#f0f1f7;font-size:11px}
.memory-retained-summary small{color:#aab3c5;font-size:9px}

/* The colored rail grows to the selected section, independent of scene timing. */
.experience>.story{align-self:start;min-height:var(--diagram-height,0px);display:flex;flex-direction:column;justify-content:center}
#steps{position:relative;margin-top:0}
#steps::after{content:"";position:absolute;left:0;top:0;height:var(--rail-height,140px);width:1.5px;background:var(--rail-color,#b8c9ff);pointer-events:none;transition:height .4s cubic-bezier(.22,.68,.15,1),background-color .25s}
#steps .step{padding:0;position:relative;border:0}
@media(max-width:850px){.experience>.story{min-height:0}}
/* Keep the small navigation transition independent of diagram motion settings. */
#steps .step>button{position:relative;display:block;padding:20px 24px 20px 18px;border-radius:0;background:transparent;overflow:visible}
#steps .step>button:is(:hover,:focus-visible,[aria-pressed=true]){background:transparent}

#steps .step h2{margin:7px 0 0;line-height:1.35;color:#a6a9b9}
#steps .step button:is(:hover,:focus-visible,[aria-pressed=true]) :is(h2,.step-eyebrow){color:var(--ink)}
#steps .step-eyebrow{display:flex;align-items:center;gap:9px;margin:0;font-size:9px}
.step-index{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.step-total{display:none}
.step-description{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .28s ease,opacity .2s ease}
.step-description>span{min-height:0;overflow:hidden;text-align:left;font-size:14px;line-height:1.65;color:var(--embed-muted,#aeb2c8)}
[aria-expanded=true] .step-description{grid-template-rows:1fr;opacity:1;margin-top:10px}
/* Compare the same inline label with and without a separator. */
:is([data-variant=offset],[data-variant=frame]) .step-index{padding-right:9px;border-right:1px solid #4b4e60}
:is([data-variant=camera],[data-variant=bracket]) .step-index{padding-right:0}

/* A compact reviewer card gives the payment feedback connector more room. */
/* WebKit drops positioned HTML inside an SVG foreignObject, so card parts overlap through grid placement instead of absolute positioning. */
.memory-agent-icon{grid-area:1/1}.memory-agent-card{display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:28px 1fr;gap:8px 10px;font-size:11px}
.memory-agent-copy{display:contents}
.memory-agent-copy strong{grid-area:1/2;font-size:11px;align-self:center;padding-right:26px}
.memory-agent-copy p{grid-area:2/1/3/-1;margin:0;padding-right:42px;line-height:1.5}
.memory-brain{font-size:11px}

/* Quiet replay actions beneath the navigation, without shifting its alignment. */
.step-navigation{position:relative}
.visual-footer{position:absolute;top:100%;right:0;justify-content:flex-end;gap:18px;margin-top:12px}
@media(max-width:850px){.visual-footer{position:static;margin-top:12px}}
.visual-footer button{border:0;border-radius:0;background:transparent;padding:3px 0;font-size:10px;color:#969bb1;text-decoration:underline;text-underline-offset:3px}
.visual-footer button:hover{color:#d5d1ed}
.compound{margin:10px 0 5px}

/* Study 4 keeps the complete narrative visible at every step. */
[data-variant=offset] .step-description{grid-template-rows:1fr;opacity:1;margin-top:10px;transition:none}

/* Study 3 reserves an equal slot for each step, including its description. */
[data-variant=frame] #steps{display:grid;grid-template-rows:repeat(4,1fr);min-height:calc(var(--diagram-height,0px) * .76)}
[data-variant=frame] #steps .step>button{height:100%;padding-top:10px;padding-bottom:10px}
[data-variant=frame] .step-description{grid-template-rows:1fr;margin-top:10px;visibility:hidden;transition:opacity .2s ease}
[data-variant=frame] [aria-expanded=true] .step-description{visibility:visible}
@media(max-width:850px){[data-variant=frame] #steps{min-height:0}}

/* Study 1 reveals the headline and description together beneath a larger phase label. */
.step-headline{display:block}
[data-variant=camera] #steps .step-eyebrow{font-size:12px;gap:10px}
[data-variant=camera] .step-headline{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .28s ease,opacity .2s ease,margin-top .28s ease}
[data-variant=camera] #steps .step-headline h2{min-height:0;overflow:hidden;margin:0}
[data-variant=camera] [aria-expanded=true] .step-headline{grid-template-rows:1fr;opacity:1;visibility:visible;margin-top:9px}

/* The expanded headline replaces Study 1's phase label. */
[data-variant=camera] [aria-expanded=true] .step-phase{visibility:hidden}

.memory-count{display:inline-grid;min-width:1ch;font-variant-numeric:tabular-nums}
.memory-count-old,.memory-count-new{grid-area:1/1}.memory-count-old{color:transparent}
.memory-count-new{display:block}

/* Keep reviewer details outside the clipped animation stage. */
dialog#reviewer-memory-panel{position:fixed;inset:0;margin:auto;width:min(720px,calc(100% - 32px));height:fit-content;max-height:calc(100% - 32px);padding:0;box-sizing:border-box}
dialog#reviewer-memory-panel::backdrop{background:#080b1266}
dialog#reviewer-memory-panel header{flex-shrink:0}

/* The retained review timeline owns both layout transforms while scrubbing. */
.experience[data-review-timeline] #camera,.experience[data-review-timeline] #learning-scene{transition:none!important}

/* Adapt folds the Memory card, so its faded button leaves focus and hit-testing once the fade ends. Keyed to the shown step because scrubbing back to Learn reuses this DOM. */
.experience[data-step="3"] .memory-brain{visibility:hidden;pointer-events:none;transition:visibility 0s .35s}