*{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 1.65s 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 1.6s cubic-bezier(.22,.68,.15,1),opacity 1s}#brand{transition:opacity .6s}.sources{position:absolute;top:17%;left:4%;display:flex;flex-direction:column;gap:13px;opacity:0;transform:translateX(-20px);transition:opacity .8s,transform 1.2s}.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 .85s .55s,transform 1.25s .4s}.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 .8s .4s,transform 1s;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:17px;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,[data-mode=garden] #alternate{display:block}
[data-mode=loom] #network,[data-mode=garden] #network{opacity:0}
.experience:not([data-mode=camera]) .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,.garden-label{font:10px 'JetBrains Mono',monospace;letter-spacing:.04em}
[data-mode=garden] #inline-output{bottom:8%;font-family:Newsreader,Georgia,serif;font-size:25px}
.focus-lens{display:none;position:absolute;width:150px;height:150px;border:1px solid #a69cf6;border-radius:50%;box-shadow:0 0 0 700px #10121bb0,inset 0 0 35px #a69cf614;left:48%;top:25%;transition:left 1.4s,top 1.4s,width 1.4s,height 1.4s,border-color 1s;pointer-events:none}
[data-mode=lens] .focus-lens{display:block}
[data-mode=lens] #camera{transform:scale(1.08)}
[data-mode=lens][data-step="0"] .focus-lens{width:400px;height:400px;left:15%;top:12%;border-color:#757b9255}
[data-mode=lens][data-step="1"] .focus-lens{left:49%;top:20%;border-color:#a69cf6}
[data-mode=lens][data-step="2"] .focus-lens{left:22%;top:44%;border-color:#65c7b0}
[data-mode=lens][data-step="3"] .focus-lens{left:48%;top:47%;border-color:#e7b56e}
[data-mode=lens] #inline-output{top:17%;left:53%;right:auto;bottom:auto;text-align:left;color:#a69cf6;border-left:2px solid currentColor;padding-left:9px;transition:left 1s,top 1s}
[data-mode=lens][data-step="0"] #inline-output{left:37%;top:8%;color:#aab0c7}
[data-mode=lens][data-step="2"] #inline-output{left:18%;top:78%;color:#65c7b0}
[data-mode=lens][data-step="3"] #inline-output{left:57%;top:81%;color:#e7b56e}
[data-mode=lens] .scene-caption{z-index:1}
/* Keep the full story visible while selection changes only the illustration. */
#steps{position:relative}
.step{padding:12px 0;transition:border-color .45s,background .45s}
.step button{padding:0 8px;transition:color .35s,background .35s;border-radius:5px}
.step h2{font-size:17px;margin:8px 0;transition:color .4s,transform .4s}
.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,[data-mode=orbit] #alternate,[data-mode=blueprint] #alternate{display:block}
[data-mode=routing] #network,[data-mode=orbit] #network,[data-mode=blueprint] #network{opacity:0}
[data-mode=routing] #inline-output{bottom:12%;letter-spacing:.18em;text-transform:uppercase}
[data-mode=orbit] #inline-output,[data-mode=blueprint] #inline-output{bottom:10%;font:22px Newsreader,Georgia,serif}
@media(max-width:480px){.versions{grid-template-columns:repeat(2,1fr)}.focus-lens{width:90px;height:90px}[data-mode=lens][data-step="0"] .focus-lens{width:220px;height:220px;left:12%}#inline-output,[data-mode=flow] #inline-output{font-size:9px}[data-mode=garden] #inline-output{font-size:19px}.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 1.4s 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}}

#orbit-rotation{transform-origin:380px 270px;transition:transform 1s ease-out}

[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}