*{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}.sources{position:absolute;top:17%;left:4%;display:flex;flex-direction:column;gap:13px;opacity:0;transform:translateX(-20px);transition:opacity 0.4s,transform 0.6s}.sources span{font:10px 'JetBrains Mono',monospace;background:#212430;border:1px solid #43475c;border-radius:6px;padding:10px 15px;box-shadow:0 6px 30px #0002}.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-mode=camera][data-step="1"] #camera{transform:translate(-110px,40px) scale(1.2)}[data-mode=camera][data-step="2"] #camera{transform:translate(25px,25px) scale(1.08) rotate(-14deg)}[data-mode=camera][data-step="3"] #camera{transform:translate(-115px,5px) scale(.9)}[data-mode=camera][data-step="2"] .artifact{top:58%;right:4%;width:240px}[data-mode=camera][data-step="2"] .callout{left:8%;top:19%}
[data-mode=layers] .orbit,[data-mode=layers] #pins{opacity:.15}[data-mode=layers] #brand{opacity:0}[data-mode=layers] .layer{transform:translateY(-10px) scale(.95,.5)}[data-mode=layers][data-step="1"] .layer-0{transform:translate(-30px,-100px) scale(.83,.46)}[data-mode=layers][data-step="1"] .layer-1{transform:translate(-30px,10px) scale(.83,.46)}[data-mode=layers][data-step="1"] .layer-2{transform:translate(-30px,120px) scale(.83,.46)}[data-mode=layers][data-step="2"] .layer-0{transform:translate(-60px,-130px) scale(.85,.48)}[data-mode=layers][data-step="2"] .layer-1{transform:translate(0px,-5px) scale(1.05,.6)}[data-mode=layers][data-step="2"] .layer-2{transform:translate(-60px,140px) scale(.85,.48)}[data-mode=layers][data-step="3"] #camera{transform:translate(-130px,0) scale(.87)}[data-mode=layers][data-step="3"] .layer{transform:none}[data-mode=layers][data-step="3"] #brand{opacity:1}[data-mode=layers] .layer-labels{display:flex}[data-mode=layers][data-step="3"] .layer-labels{display:none}[data-mode=layers]:not([data-step="3"]) .artifact{top:53%;right:2%;width:230px;padding:12px}[data-mode=layers]:not([data-step="3"]) .artifact pre{display:none}[data-mode=layers] .callout{left:7%;top:3%}
[data-mode=flow][data-step="0"] .sources{opacity:1;transform:none}[data-mode=flow][data-step="0"] #camera{transform:translate(125px,0) scale(.73)}[data-mode=flow][data-step="1"] #camera{transform:translate(-110px,0) scale(.72)}[data-mode=flow][data-step="2"] #camera{transform:translate(80px,0) scale(.85)}[data-mode=flow][data-step="2"] .artifact{left:3%;right:auto;top:47%;width:225px}[data-mode=flow][data-step="3"] #camera{transform:translate(-105px,0) scale(.8)}[data-mode=flow] .callout{left:4%;top:12%}[data-mode=flow][data-step="1"] .artifact,[data-mode=flow][data-step="3"] .artifact{top:24%}
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}.sources span{font-size:8px;padding:5px}.scene-caption{font-size:8px}[data-mode=camera][data-step="2"] .artifact,[data-mode=layers]:not([data-step="3"]) .artifact,[data-mode=flow][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}[data-mode=layers] .plate{opacity:.5}[data-mode=layers] .layer-pin{opacity:.75}
/* Six distinct result treatments, with one floating card. */
.versions{grid-template-columns:repeat(3,1fr)}
#alternate{display:none;position:absolute;inset:0;width:100%;height:100%}
[data-mode=loom] #alternate{display:block}
[data-mode=loom] #network{opacity:0}
.experience:not([data-mode=camera]):not([data-mode=layers]) .artifact,.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-mode=camera] #inline-output{display:none}
[data-mode=layers] #inline-output{bottom:8%;font-size:12px;letter-spacing:.09em;text-transform:uppercase}
[data-mode=flow] #inline-output{left:49%;right:2%;top:49%;bottom:auto;text-align:left;padding:20px 0;border-top:1px solid #65c7b070;border-bottom:1px solid #65c7b030;color:#78ceb8;font-size:12px}
[data-mode=flow][data-step="2"] #inline-output{left:2%;right:55%;top:50%}
[data-mode=flow][data-step="0"] #inline-output{left:0;right:0;top:auto;bottom:10%;border:0;text-align:center;color:#a4a9be}
[data-mode=loom] #inline-output{bottom:12%;left:auto;right:10%;font-size:22px;font-family:Newsreader,Georgia,serif}
.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:0 8px;transition:color 0.175s,background 0.175s;border-radius:5px}
.step h2{font-size:18px;margin:8px 0;transition:color 0.2s,transform 0.2s}
.step button:hover h2{color:var(--ink);transform:translateX(3px)}
.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}
[data-mode=routing] #alternate{display:block}
[data-mode=routing] #network{opacity:0}
[data-mode=routing] #inline-output{bottom:12%;letter-spacing:.18em;text-transform:uppercase}
@media(max-width:480px){.versions{grid-template-columns:repeat(2,1fr)}#inline-output,[data-mode=flow] #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}
[data-mode=flow].code-reveal #camera{transform:translate(-195px,10px) scale(.82)}
#alternate{transition:transform 0.7s cubic-bezier(.22,.68,.15,1);transform-origin:35% 50%}
[data-mode=routing].code-reveal #alternate{transform:translateX(-24%) scale(.82)}
[data-mode=routing] #code-output{border-color:#e7b56e;top:26%}
@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}}

[data-mode=layers].code-reveal #camera{transform:translate(-195px,10px) scale(.82)}
[data-mode=layers] #code-output{border-color:#e7b56e}

#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}
:is([data-mode=camera],[data-mode=layers],[data-mode=flow]).tune-reveal #camera{transform:translate(-185px,0) scale(.78)}
[data-mode=camera].code-reveal #camera,[data-mode=layers].code-reveal #camera{transform:translate(-195px,10px) scale(.82)}
[data-mode=layers].code-reveal .layer-labels{opacity:0}
.code-reveal .artifact,.tune-reveal .artifact{display:none!important}
[data-mode=loom][data-step="2"] #inline-output,[data-mode=loom][data-step="3"] #inline-output{display:none}

.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-mode=camera].coordinate-reveal #camera{transform:scale(.76);opacity:.18}
[data-mode=camera].coordinate-reveal #brand{opacity:0}
[data-mode=layers].coordinate-reveal #network{opacity:1}
#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}
[data-mode=layers][data-step="2"] .disk-content{transition:transform 3s ease-in-out}
[data-mode=layers][data-step="2"] .layer-0 .disk-content{transform:rotate(32deg)}
[data-mode=layers][data-step="2"] .layer-1 .disk-content{transform:rotate(-26deg)}
[data-mode=layers][data-step="2"] .layer-2 .disk-content{transform:rotate(22deg)}
[data-mode=layers].coordinate-reveal .layer-0 .base{stroke:#a69cf6;opacity:.45}
[data-mode=layers].coordinate-reveal .layer-1 .base{stroke:#65c7b0;opacity:.45}
[data-mode=layers].coordinate-reveal .layer-2 .base{stroke:#e7b56e;opacity:.45}

[data-mode=layers][data-step="2"] #camera{transform:translate(-110px,0) scale(.8)}
[data-mode=layers][data-step="2"] .layer-labels{display:none}
[data-mode=layers][data-step="2"] .artifact{top:39%;right:1%;width:230px;padding:18px;border-color:#65c7b060}
@media(max-width:480px){[data-mode=layers][data-step="2"] .artifact{width:160px;padding:10px}}
[data-mode=layers][data-step="2"] #inline-output{display:none}
.reduced [data-mode=camera].coordinate-reveal #camera{opacity:.68}
.reduced [data-mode=camera].coordinate-reveal .colored{stroke-width:2.5;opacity:1}

/* Product moments: one relevant surface per step, with context always in view. */
.sources{z-index:2;pointer-events:none;top:20%;left:2%;gap:9px}
.sources span{font:11px/1.4 Inter,Arial;padding:9px 11px;background:#1d202c;border-color:#393d52;border-left:2px solid #a69cf6;box-shadow:none}
.sources span:nth-child(2){border-left-color:#b6a3d6}.sources span:nth-child(3){border-left-color:#e7b56e}.sources span:nth-child(4){border-left-color:#65c7b0}.sources span:nth-child(5){border-left-color:#819ad6}
.experience[data-step="0"] .sources{opacity:1;transform:none}
.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-mode="layers"][data-step="2"] #camera{transform:translate(-140px,0) scale(.77)}
.experience[data-mode="camera"][data-step="1"] #product-moment{top:62%;right:3%;width:45%}
.experience[data-mode="camera"][data-step="1"] .product-body{padding:10px 13px}
.experience[data-mode="camera"][data-step="1"] .product-body p,.experience[data-mode="camera"][data-step="1"] .product-body footer{display:none}
.experience[data-mode="camera"][data-step="1"] .product-body h3{font-size:13px;margin:7px 0}
.experience[data-mode="layers"][data-step="1"] #product-moment{top:30%;right:1%;width:39%}
.experience[data-mode="layers"][data-step="1"] #camera,.experience[data-mode="layers"][data-step="1"] #coordinate-output{transform:translateX(-75px) scale(.82);transform-origin:35% 50%;transition:transform 0.65s}
.experience[data-mode="layers"][data-step="1"] #coordinate-output{width:100%}
.experience[data-step="3"] #tune-output{display:none}
@media(max-width:480px){.sources span{font-size:8px;padding:6px}.sources{gap:5px;top:24%}#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-mode="camera"][data-step="1"] #product-moment{top:57%;width:48%}.experience[data-mode="layers"][data-step="1"] #product-moment{width:44%}.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))}
:is([data-mode=loom],[data-mode=routing]) #alternate{transform-origin:35% 50%;transition:transform 0.65s cubic-bezier(.22,.68,.15,1)}
:is([data-mode=loom],[data-mode=routing])[data-step="0"] #alternate{transform:translate(130px,0) scale(.7)}
:is([data-mode=loom],[data-mode=routing]):not([data-step="0"]) #alternate{transform:translate(-130px,0) scale(.67)}
:is([data-mode=loom],[data-mode=routing]) #inline-output{display:none}
:is([data-mode=loom],[data-mode=routing]) #product-moment{right:1%;width:45%}
[data-mode=loom] .garden-label{font:13px Inter,Arial}
@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-mode="camera"][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-mode="camera"][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}
:is([data-mode=loom],[data-mode=routing]):is([data-step="2"],[data-step="3"]) #alternate{opacity:0;pointer-events:none}
[data-mode=camera][data-step="3"] #camera{transform:translate(30px,-10px) scale(.68);opacity:.22}
[data-mode=camera][data-step="3"] #brand{opacity:0}
[data-mode=layers][data-step="2"] #camera{transform:translate(-105px,0) scale(.77)}
[data-mode=layers][data-step="2"] .layer-labels{display:none}
#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}
[data-mode=layers][data-step="3"] #product-moment{top:28%;width:47%}
@media(max-width:480px){#product-moment .learned-code{padding:6px}#product-moment .learned-code code{font-size:8px}}
.experience[data-mode=camera][data-step="3"].tune-reveal #camera{transform:translate(30px,-10px) scale(.68);opacity:.22}
.experience[data-mode=layers][data-step="2"] #camera{transform:translate(-105px,0) scale(.77)}
.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 graphic in every scene. Sources stay in place as they feed it. */
.experience .sources{top:17%;bottom:16%;left:2%;width:24%;gap:0;justify-content:space-between;transform:none;z-index:3}
.experience .sources span{padding:9px 11px;min-height:34px;font-size:10px}
.experience[data-step="1"] .sources{opacity:1;transform:none}
.experience:is([data-mode=camera],[data-mode=layers])[data-step="1"] #network{opacity:1!important}
.experience:is([data-mode=loom],[data-mode=routing]) #alternate{opacity:1!important;pointer-events:none}
.experience:is([data-mode=loom],[data-mode=routing]) #network{opacity:0!important}
.experience[data-step="1"].coordinate-reveal #camera{transform:translate(-15px,0) scale(.50);opacity:1}
.experience[data-mode=layers][data-step="1"] .layer-0{transform:translateY(-100px) scale(.8,.45)}
.experience[data-mode=layers][data-step="1"] .layer-1{transform:scale(.8,.45)}
.experience[data-mode=layers][data-step="1"] .layer-2{transform:translateY(100px) scale(.8,.45)}
.experience:is([data-mode=loom],[data-mode=routing])[data-step="1"] #alternate{transform:translate(85px,0) scale(.43)}
.experience:is([data-mode=loom],[data-mode=routing]):is([data-step="2"],[data-step="3"]) #alternate{transform:translate(-80px,0) scale(.62)}
.experience[data-mode=camera][data-step="3"].tune-reveal #camera{transform:translate(-85px,0) scale(.64);opacity:1}
.experience[data-mode=camera][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}
@media(max-width:480px){.experience .sources span{font-size:7px;padding:6px;min-height:27px}}
.experience:is([data-mode=loom],[data-mode=routing])[data-step="1"] #alternate{transform:translate(35px,0) scale(.32)}

/* Prioritize the persistent graphic; mapping precedes the delivery signals. */
.experience{grid-template-columns:minmax(0,1.65fr) minmax(330px,1fr);gap:32px}
.experience .sources{width:19%;left:1%;top:20%;bottom:20%}
.experience .sources span{padding:7px 8px;min-height:30px;font-size:9px}
.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-mode=layers][data-step="1"].coordinate-reveal #camera{transform:translate(-30px,0) scale(.78)}
.experience:is([data-mode=loom],[data-mode=routing])[data-step="1"] #alternate{transform:translate(16px,0) scale(.47)}
.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}.experience .sources span{font-size:9px}}
@media(max-width:480px){.experience .sources span{font-size:7px;padding:5px;min-height:25px}.experience[data-step="1"] #product-moment[data-kind="review"]{font-size:7px;padding-left:8px}.experience[data-step="1"] .code-verdict{font-size:9px}}

/* Generous knowledge tabs for mapping, compact grouping for application. */
.experience[data-step="0"] .sources{width:24%;top:17%;bottom:16%}
.experience[data-step="0"] .sources span{font-size:11px;padding:10px 12px;min-height:36px}
.experience[data-step="1"] .sources{width:19%;top:29%;bottom:29%}
@media(max-width:480px){.experience[data-step="0"] .sources span{font-size:8px;padding:7px;min-height:29px}}

/* More room for diagrams, with a different compact knowledge legend per study. */
.experience{grid-template-columns:minmax(0,1.95fr) minmax(310px,1fr);gap:30px}
.step p{font-size:15px}
.experience[data-step="0"] .sources span{font-size:12px}
.experience[data-step="1"] .sources span{font-size:10px;display:flex;align-items:center;gap:7px}
.experience[data-mode=camera][data-step="1"] .sources{width:16%}
.experience[data-mode=layers][data-step="1"] .sources{width:14%}
.experience[data-mode=loom][data-step="1"] .sources{width:6%}
.experience[data-mode=loom][data-step="1"] .sources span{justify-content:center;font:12px 'JetBrains Mono',monospace;min-height:31px}
.experience[data-mode=routing][data-step="1"] .sources{width:15%}
.sources b{font-size:11px;font-weight:500;color:#aaa2e1}
@media(max-width:850px){.experience{grid-template-columns:1fr}}
@media(max-width:480px){.step p{font-size:15px}.experience[data-step="0"] .sources span{font-size:9px}.experience[data-step="1"] .sources span{font-size:8px;gap:3px}.experience[data-mode=loom][data-step="1"] .sources{width:8%}}

.experience[data-mode=loom][data-step="2"] .loom-brand{opacity:0}

/* 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"]) .sources{opacity:0!important;pointer-events:none;transform:translateX(-35px);transition:opacity 0.225s,transform 0.325s}
.experience:not([data-step="0"]) #coordinate-output{opacity:0!important}
.experience:not([data-step="0"]) #camera{transform:translate(-190px,0) scale(.63)!important;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-mode=routing]:not([data-step="0"]) #alternate{transform:translate(-1.9737%,28.4483%) scale(.42)!important}
.experience[data-step="3"] #camera{transform:translate(-195px,-75px) scale(.52)!important}
.experience[data-step="3"] #alternate{transform:translate(0,17.2414%) scale(.4)!important}
.experience[data-mode=routing][data-step="3"] #alternate{transform:translate(-1.9737%,15.5172%) scale(.42)!important}
.experience[data-mode=layers]:not([data-step="0"]) .layer-0{transform:translateY(-100px) scale(.8,.45)}
.experience[data-mode=layers]:not([data-step="0"]) .layer-1{transform:scale(.8,.45)}
.experience[data-mode=layers]:not([data-step="0"]) .layer-2{transform:translateY(100px) scale(.8,.45)}
.experience #product-moment[hidden]{display:none!important}
.experience .scene-caption{display:none}
.experience[data-mode=loom][data-step="2"] .loom-brand{opacity:1}
@media(max-width:480px){.scene-meta #scene-title{font-size:21px}.scene-meta #count{font-size:9px}}

.experience[data-mode=camera] #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)!important}
.experience[data-step="2"] #alternate{transform:translate(0,17.2414%) scale(.4)!important}
.experience[data-mode=routing][data-step="2"] #alternate{transform:translate(-1.9737%,15.5172%) scale(.42)!important}

/* Coordinate layout studies use the empty upper and lower portions of the stage. */
.experience[data-mode=camera][data-step="1"] #camera{transform:translate(-220px,-85px) scale(.48)!important}
.experience[data-mode=layers][data-step="1"] #camera{transform:translate(30px,-190px) scale(.40)!important}
.experience[data-mode=loom][data-step="1"] #alternate{transform:translate(3.2895%,12.069%) scale(.49)!important}
.experience[data-mode=routing][data-step="1"] #alternate{transform:translate(6.5789%,48.2759%) scale(.48)!important}