.architecture:where(.astro-4u5ukf6p){--ink:#e4d6bd;margin:48px 0}h2:where(.astro-4u5ukf6p){color:#eee;font:500 17px/1.4 var(--mono);letter-spacing:-.03em;margin:0 0 24px}.visually-hidden:where(.astro-4u5ukf6p){clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.stage:where(.astro-4u5ukf6p){--offset:48px;width:min(100%,448px);height:576px;margin-inline:auto;position:relative}:where(.astro-4u5ukf6p)[data-step="0"] .stage:where(.astro-4u5ukf6p){height:314px}.code-window:where(.astro-4u5ukf6p){z-index:2;background:#171717;border:1px solid #45433e;width:100%;height:234px;transition:top .8s cubic-bezier(.22,1,.36,1);position:absolute;top:64px;left:0}.code-bar:where(.astro-4u5ukf6p){color:#bcbcbc;height:36px;font:11px var(--mono);border-bottom:1px solid #303030;justify-content:space-between;align-items:center;padding:0 12px;display:flex}.app-label:where(.astro-4u5ukf6p){color:gray}.demo-code:where(.astro-4u5ukf6p){font:11px/19px var(--mono);margin:0;padding:12px;overflow-x:auto;background:0 0!important}.code-line:where(.astro-4u5ukf6p){color:#b4b4b4;min-height:19px;display:block}.code-line:where(.astro-4u5ukf6p).import{color:#a5b4c4}.code-result:where(.astro-4u5ukf6p){color:var(--ink);font:10px var(--mono);opacity:0;position:absolute;top:calc(100% + 8px);left:0}.code-result:where(.astro-4u5ukf6p)>span:where(.astro-4u5ukf6p){color:#777;margin-right:8px}.service-area:where(.astro-4u5ukf6p){top:calc(280px + var(--offset));background:#ffffff03;border-left:1px solid #655d4e;width:100%;height:150px;position:absolute;left:0}.service-area:where(.astro-4u5ukf6p):before,.service-area:where(.astro-4u5ukf6p):after{content:"";background:#655d4e;width:12px;height:1px;position:absolute;left:-1px}.service-area:where(.astro-4u5ukf6p):before{top:0}.service-area:where(.astro-4u5ukf6p):after{bottom:0}.service-label:where(.astro-4u5ukf6p){top:calc(292px + var(--offset));flex-direction:column;gap:5px;display:flex;position:absolute;left:12px}.service-label:where(.astro-4u5ukf6p) strong:where(.astro-4u5ukf6p){color:#c7bba6;font:500 12px var(--mono)}.service-label:where(.astro-4u5ukf6p)>span:where(.astro-4u5ukf6p){color:#92908b;font-size:10px}.endpoint:where(.astro-4u5ukf6p){top:calc(322px + var(--offset));flex-direction:column;align-items:center;gap:7px;width:60%;display:flex;position:absolute;left:20%}.endpoint:where(.astro-4u5ukf6p)>svg:where(.astro-4u5ukf6p){fill:none;stroke:#aca393;stroke-width:1px;width:28px;height:24px;margin-bottom:3px}.endpoint:where(.astro-4u5ukf6p) strong:where(.astro-4u5ukf6p){color:#ded9cf;font:500 11px/1.4 var(--mono)}.endpoint:where(.astro-4u5ukf6p)>span:where(.astro-4u5ukf6p){color:#92908b;font-size:11px}.client-connection:where(.astro-4u5ukf6p){top:calc(234px + var(--offset));width:20px;height:88px;position:absolute;left:calc(50% - 10px)}.client-connection:where(.astro-4u5ukf6p)>span:where(.astro-4u5ukf6p){color:#92908b;font:10px var(--mono);position:absolute;top:24px;left:24px}.client-connection:where(.astro-4u5ukf6p) svg:where(.astro-4u5ukf6p),.worker-connections:where(.astro-4u5ukf6p) svg:where(.astro-4u5ukf6p){width:100%;height:100%;display:block;overflow:visible}.wire:where(.astro-4u5ukf6p){fill:none;stroke:#46443f;stroke-width:1px;vector-effect:non-scaling-stroke}.packet:where(.astro-4u5ukf6p){fill:none;stroke:var(--ink);stroke-width:3px;stroke-linecap:round;stroke-dasharray:.01 1;stroke-dashoffset:1px;opacity:0}.worker-connections:where(.astro-4u5ukf6p){top:calc(398px + var(--offset));width:100%;height:60px;position:absolute;left:0}.selected-wire:where(.astro-4u5ukf6p){stroke:#b7a990}.workers:where(.astro-4u5ukf6p){top:calc(458px + var(--offset));grid-template-columns:repeat(3,minmax(0,1fr));width:100%;display:grid;position:absolute;left:0}.worker:where(.astro-4u5ukf6p){justify-self:center;width:82%;height:76px}.browser-window:where(.astro-4u5ukf6p){border:1px solid #414141;height:56px}.browser-bar:where(.astro-4u5ukf6p){color:#aaa;height:16px;font:9px var(--mono);border-bottom:1px solid #414141;justify-content:space-between;align-items:center;padding:0 6px;display:flex}.browser-bar:where(.astro-4u5ukf6p) i:where(.astro-4u5ukf6p){background:#777;border-radius:50%;width:3px;height:3px}.selected:where(.astro-4u5ukf6p) .browser-window:where(.astro-4u5ukf6p),.selected:where(.astro-4u5ukf6p) .browser-bar:where(.astro-4u5ukf6p){border-color:#a89c87}.selected:where(.astro-4u5ukf6p) .browser-bar:where(.astro-4u5ukf6p){color:var(--ink)}.page-content:where(.astro-4u5ukf6p){opacity:0;flex-direction:column;gap:4px;padding:6px 8px;display:flex}.page-content:where(.astro-4u5ukf6p) strong:where(.astro-4u5ukf6p){color:var(--ink);font:8px/1.3 var(--mono)}.page-content:where(.astro-4u5ukf6p)>span:where(.astro-4u5ukf6p){background:#8f8778;width:80%;height:2px}.page-content:where(.astro-4u5ukf6p)>span:where(.astro-4u5ukf6p):last-child{width:60%}.capacity:where(.astro-4u5ukf6p){color:#92908b;font:9px var(--mono);text-align:center;margin-top:5px;display:block}.selected:where(.astro-4u5ukf6p) .capacity:where(.astro-4u5ukf6p){color:#c7bba6}.pool-note:where(.astro-4u5ukf6p){color:#92908b;font:9px var(--mono);position:absolute;top:calc(100% + 9px);right:12px}.service-area:where(.astro-4u5ukf6p),.service-label:where(.astro-4u5ukf6p),.endpoint:where(.astro-4u5ukf6p),.client-connection:where(.astro-4u5ukf6p),.worker-connections:where(.astro-4u5ukf6p),.workers:where(.astro-4u5ukf6p){opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s,top .8s cubic-bezier(.22,1,.36,1),height .8s cubic-bezier(.22,1,.36,1)}.architecture:where(.astro-4u5ukf6p):not([data-step="0"]) .code-window:where(.astro-4u5ukf6p){top:var(--offset)}.architecture:where(.astro-4u5ukf6p):not([data-step="0"]) :where(.astro-4u5ukf6p):is(.service-area,.service-label,.endpoint,.client-connection){opacity:1;visibility:visible}.architecture:where(.astro-4u5ukf6p):is([data-step="2"],[data-step="3"]) .stage:where(.astro-4u5ukf6p){--offset:0px}.architecture:where(.astro-4u5ukf6p):is([data-step="2"],[data-step="3"]) .service-area:where(.astro-4u5ukf6p){height:280px}.architecture:where(.astro-4u5ukf6p):is([data-step="2"],[data-step="3"]) :where(.astro-4u5ukf6p):is(.worker-connections,.workers){opacity:1;visibility:visible;transition-delay:.3s}.architecture:where(.astro-4u5ukf6p):is([data-step="1"],[data-step="2"]) .code-line:where(.astro-4u5ukf6p).connect,:where(.astro-4u5ukf6p)[data-step="3"] .code-line:where(.astro-4u5ukf6p).run{color:var(--ink)}:where(.astro-4u5ukf6p)[data-step="3"] :where(.astro-4u5ukf6p):is(.page-content,.code-result){opacity:1}@keyframes travel{0%{stroke-dashoffset:1px;opacity:0}10%,90%{opacity:1}to{stroke-dashoffset:0;opacity:0}}@keyframes appear{0%{opacity:0}to{opacity:1}}@media (width<=600px){.demo-code:where(.astro-4u5ukf6p){font-size:10px}}@media (prefers-reduced-motion:no-preference){:where(.astro-4u5ukf6p)[data-step="1"] .connect-packet:where(.astro-4u5ukf6p),:where(.astro-4u5ukf6p)[data-step="2"] .worker-packet:where(.astro-4u5ukf6p){animation:.8s ease-in-out .8s both travel}:where(.astro-4u5ukf6p)[data-step="3"] .connect-packet:where(.astro-4u5ukf6p){animation:.5s ease-in-out both travel}:where(.astro-4u5ukf6p)[data-step="3"] .worker-packet:where(.astro-4u5ukf6p){animation:.5s ease-in-out .5s both travel}:where(.astro-4u5ukf6p)[data-step="3"] .page-content:where(.astro-4u5ukf6p){animation:.4s ease-out 1s both appear}:where(.astro-4u5ukf6p)[data-step="3"] .worker-result:where(.astro-4u5ukf6p){animation:.5s ease-in-out 1.5s both travel}:where(.astro-4u5ukf6p)[data-step="3"] .result-packet:where(.astro-4u5ukf6p){animation:.5s ease-in-out 2s both travel}:where(.astro-4u5ukf6p)[data-step="3"] .code-result:where(.astro-4u5ukf6p){animation:.3s ease-out 2.5s both appear}}@media (prefers-reduced-motion:reduce){.architecture:where(.astro-4u5ukf6p) :where(.astro-4u5ukf6p),.architecture:where(.astro-4u5ukf6p) :where(.astro-4u5ukf6p):before,.architecture:where(.astro-4u5ukf6p) :where(.astro-4u5ukf6p):after{transition:none!important}}
