.tech{--schema-panel:#121217;--schema-zone:#17181f;--schema-node:#262732;--schema-quiet:#141419;--schema-mark:#62647a;--schema-sandbox:#121735;--schema-on-accent:#dfe5ff;--schema-line:#3a3c4c;--schema-focus:#2244e061}.tech-top{padding:0 max(var(--gutter), calc((100% - var(--wide)) / 2)) clamp(72px, 12vh, 136px)}.tech-top .journey-top{padding-bottom:clamp(64px,10vh,120px)}.tech-top .promise{max-width:none;font-size:clamp(44px,6.4vw,92px)}.tech-top .lede{max-width:46ch}.head-event{gap:10px;min-width:0;margin:0 0 clamp(48px,8vh,96px);display:grid}.head-event-caption{color:var(--muted);font-size:13px}.head-event-code{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--schema-panel);font:12.5px/1.6 var(--font-mono);color:var(--muted);border-radius:18px;margin:0;padding:20px 22px}.head-event .json-key{color:var(--accent-text)}.head-event .json-string{color:var(--text)}.head-event .json-number{color:var(--text);font-weight:700}.head-event-caret{color:var(--accent-text)}@media (prefers-reduced-motion:no-preference){.head-event.is-typed .head-event-caret{animation:1.1s step-end 4 caret-blink}}@keyframes caret-blink{50%{opacity:0}}@media (width>=1180px){.tech-head{grid-template-columns:minmax(0,1fr) minmax(0,440px);align-items:center;gap:48px;display:grid}.head-event{margin:0}}.tech-overview{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end;gap:32px clamp(32px,5vw,72px);display:grid}.tech-overview .schema{grid-column:1/-1;max-width:560px;margin:0;padding:36px 32px}@media (width>=1000px){.tech-overview .schema{grid-template-columns:minmax(0,7fr) minmax(0,4fr);align-items:start;gap:28px;max-width:none}.tech-overview .schema figcaption{grid-column:1/-1}}.tech-overview h2,.tech-part h2{letter-spacing:-.03em;transition:color .24s var(--ease-out);font-size:clamp(28px,2.8vw,40px);font-weight:750;line-height:1.1}.tech-text p{max-width:46ch;margin-top:14px;font-size:18px;line-height:1.6}.tech-overview .tech-text p:first-child{margin-top:0}.tech-parts{padding:96px max(var(--gutter), calc((100% - var(--wide)) / 2)) 120px;background:var(--band)}.tech-part-list{flex-direction:column;gap:72px;display:flex}.tech-screen{display:none}.schema{background:var(--schema-panel);border-radius:20px;gap:18px;max-width:496px;margin:24px 0 0;padding:28px;display:grid}.schema figcaption{color:var(--muted);font-size:13px}.schema-drawing{min-width:0}.schema-svg{touch-action:manipulation;-webkit-tap-highlight-color:transparent;width:100%;max-width:440px;height:auto;display:block;overflow:visible}.schema-svg.schema-wide{max-width:none;display:none}@media (width>=1180px){.schema-svg.schema-wide{display:block}.schema-svg.schema-narrow{display:none}}.schema-panel{background:var(--schema-zone);min-width:0;transition:background-color .2s var(--ease-out);border-radius:16px;gap:8px;padding:18px;display:grid}.schema.is-detail .schema-panel{background:var(--schema-sandbox)}.schema-controls{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px;display:flex}html:not(.js) .schema-controls{display:none}.schema-play{background:var(--schema-node);height:32px;color:var(--text);font:650 13px/1 var(--font-sans);cursor:pointer;border:0;border-radius:999px;align-items:center;gap:6px;padding:0 12px 0 10px;display:inline-flex}.schema-play[hidden]{display:none}.schema-play-icon path{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.schema-play-icon .icon-play,.schema-play[data-state=paused] .icon-pause{display:none}.schema-play[data-state=paused] .icon-play{fill:currentColor;display:inline}.schema-steps{flex-wrap:wrap;gap:4px;margin:0;padding:0;list-style:none;display:flex}.schema-steps button{background:var(--schema-node);width:32px;height:32px;color:var(--muted);font:700 13px/1 var(--font-sans);font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color .15s var(--ease-out), color .15s var(--ease-out);border:0;border-radius:50%}.schema-steps button[aria-current=step]{background:var(--cobalt);color:#fff}@media (width<=760px),(pointer:coarse){.schema-play{height:44px;padding:0 16px 0 14px}.schema-steps button{width:44px;height:44px}}@media (hover:hover){.schema-play:hover,.schema-steps button:not([aria-current=step]):hover{color:var(--text);background:#33354a}}.schema-count{font-family:var(--font-heading);color:var(--accent-text);font-size:14px;font-weight:700}.schema-caption{min-height:3em;font-size:15px;line-height:1.5}.schema-code{min-height:9.6em;font:12.5px/1.6 var(--font-mono);color:#e4e4e7;margin:4px 0 0;position:relative}.schema-code .code-line{text-indent:-2ch;white-space:pre-wrap;overflow-wrap:anywhere;border-radius:4px;padding:0 6px 0 calc(6px + 2ch);display:block}.schema-code .code-line.is-typing:after{content:"▍";color:var(--accent-text)}.schema-code .code-line.is-focus{background:var(--schema-focus)}.schema-svg text{font-family:var(--font-sans);fill:var(--text)}.schema-svg .node-box{fill:var(--schema-node);stroke:#0000;transition:fill .2s var(--ease-out)}.schema-svg .node-flash{fill:var(--cobalt);opacity:0;pointer-events:none}.schema-svg .node-accent>.node-box{fill:var(--cobalt)}.schema-svg .node-quiet>.node-box{fill:var(--schema-quiet)}.schema-svg .node .node>.node-box{fill:#33354a}.schema-svg .node .node-quiet>.node-box{fill:var(--schema-quiet)}.schema-svg .node-frame>.node-box{fill:var(--schema-sandbox);stroke:var(--cobalt);stroke-width:2px}.schema-svg .node-title{font-family:var(--font-heading);font-size:16px;font-weight:700}.schema-svg .node-title-large{letter-spacing:-.02em;font-size:22px}.schema-svg .node-sub{fill:var(--muted);font-size:13px}.schema-svg .node-accent>.node-title{fill:#fff}.schema-svg .node-accent>.node-sub{fill:var(--schema-on-accent)}.schema-svg .node-quiet>.node-title{fill:var(--muted)}.schema-svg [data-node]{cursor:pointer;transition:opacity .2s var(--ease-out)}.schema-svg.is-focusing [data-node]:not(.is-focus,.is-focus [data-node]){opacity:.35}.schema-svg [data-node].is-focus>.node-box{fill:#33354a}.schema-svg .node-accent.is-focus>.node-box{fill:#3355f0}.schema-svg .edge{fill:none;stroke:var(--schema-line);stroke-width:2px;stroke-linecap:round}.schema-svg .edge-dashed{stroke-dasharray:4 5}.schema-svg .edge-live{fill:none;stroke:var(--accent-text);stroke-width:3px;stroke-linecap:round;pointer-events:none}.schema-svg .edge-label{opacity:0;pointer-events:none}.schema-svg .edge-label rect{fill:var(--bg)}.schema-svg .edge-label text{fill:var(--accent-text);font-size:13px;font-weight:700}.schema-svg .packet{fill:#fff;stroke:var(--cobalt);stroke-width:3px;opacity:0;pointer-events:none}.schema-svg .schema-note{fill:var(--muted);font-size:13px}.schema-svg [data-rest=hidden]{opacity:0}.schema-svg .slab{fill:var(--accent-text)}.schema-svg .slab-old{fill:var(--schema-mark)}.schema-svg .chip rect{fill:#33354a}.schema-svg .chip text{font-size:13px;font-weight:650}.schema-svg .chip-on rect{fill:var(--cobalt)}.schema-svg .chip-on text{fill:#fff}.schema-svg .chip-denied rect{fill:var(--schema-quiet)}.schema-svg .chip-denied text{fill:var(--muted)}.schema-svg .value{font-family:var(--font-heading);font-size:15px;font-weight:700}.schema-svg .value-after,.schema-svg .badge,.schema-svg .counter,.schema-svg .status-on,.schema-svg .replay,.schema-svg .paradigm{fill:var(--accent-text)}.schema-svg .badge,.schema-svg .counter,.schema-svg .status,.schema-svg .replay{font-size:13px;font-weight:700}.schema-svg .status{fill:var(--muted)}.schema-svg .paradigm{font-family:var(--font-heading);font-size:15px;font-weight:750}.schema-svg .lane{fill:var(--muted);font-size:13px;font-weight:700}.schema-svg .card-frame{fill:var(--schema-sandbox);stroke:var(--cobalt);stroke-width:2px}.schema-svg .reply-frame,.schema-svg .window{fill:var(--schema-zone)}.schema-svg .card-title{font-family:var(--font-heading);fill:var(--accent-text);font-size:14px;font-weight:700}.schema-svg .card-button{fill:var(--cobalt)}.schema-svg .card-button-label{font-size:13px;font-weight:700}.schema-svg .row,.schema-svg .rule{font-variant-numeric:tabular-nums;font-size:13px}.schema-svg .rule-on{fill:var(--schema-focus)}.schema-svg .column,.schema-svg .event{font-family:var(--font-mono);font-size:12px}.schema-svg .column-type{fill:var(--muted)}.schema-svg .event-new{fill:var(--accent-text)}.schema-svg .zone{fill:var(--schema-zone)}.schema-svg .zone-title,.schema-svg .zone-foot{fill:var(--muted);font-size:13px;font-weight:650}.schema-svg .zone-foot{fill:var(--accent-text)}.schema-svg .stack rect{fill:#1d1e27}.schema-svg .stack rect:first-child{fill:#191a22}.schema-svg .fail-cross{fill:none;stroke:var(--muted);stroke-width:2px;stroke-linecap:round}.schema-svg .library-title{font-family:var(--font-heading);font-size:17px;font-weight:750}.schema-svg .skeleton{fill:#3a3c4c}@media (width>=1000px){.js .tech-parts{grid-template-columns:minmax(0,480px) minmax(0,1fr);align-items:start;gap:64px;display:grid}.js .tech-part-list{gap:0;padding:0}.js .tech-part{padding:var(--scene-gap) 0 0}.js .tech-part:after{content:"";height:var(--scene-pin);display:block}.js .tech-part:last-child:after{height:calc(var(--scene-pin) + 120px)}.js .tech-part .tech-text{position:sticky;top:calc(50dvh - 24px);translate:0 -50%}.js .tech-part .schema{clip-path:inset(50%);width:1px;height:1px;margin:0;padding:0;position:absolute;overflow:hidden}.js .tech-part.is-current h2{color:var(--accent-text)}.js .tech-screen{top:calc(var(--nav-h) + 24px);height:calc(100dvh - var(--nav-h) - 80px);background:var(--schema-panel);border-radius:24px;grid-template:minmax(0,1fr)/minmax(0,1fr);min-height:560px;padding:24px;display:grid;position:sticky}.tech-screen-slide{opacity:0;visibility:hidden;min-height:0;transition:opacity .2s var(--ease-out), visibility 0s .2s;grid-area:1/1}.tech-screen-slide.is-current{opacity:1;visibility:visible;transition:opacity .24s var(--ease-out) .12s, visibility 0s}.tech-screen .schema{background:0 0;grid-template-rows:minmax(0,1fr) auto auto;max-width:none;height:100%;margin:0;padding:0}.tech-screen .schema-drawing{min-height:0;position:relative}.tech-screen .schema-svg{width:100%;max-width:none;height:100%;position:absolute;inset:0}.tech-screen .schema{gap:12px}.tech-screen .schema-panel{gap:4px;padding:14px 16px}.tech-screen .schema-controls{margin-bottom:4px}.tech-screen .schema-caption{min-height:0}.tech-screen .schema-code{min-height:8em;max-height:8em;overflow:hidden}}@media (width<=1000px){.tech-overview{grid-template-columns:minmax(0,1fr)}}@media (width<=760px){.tech-overview .schema{padding:20px 16px}.schema-panel{padding:14px}.head-event-code{padding:16px;font-size:11.5px}.tech-parts{padding-top:64px;padding-bottom:96px}.schema{padding:16px}}@media (prefers-reduced-motion:no-preference){.tech-part.is-played .tech-text>*,.tech-part.is-played .schema{animation:enter .3s var(--ease-out) both}.tech-part.is-played .tech-text>:nth-child(2){animation-delay:80ms}.tech-part.is-played .tech-text>:nth-child(3){animation-delay:.16s}.tech-part.is-played .schema{animation-delay:.22s}}@media (prefers-reduced-motion:reduce){.tech-part.is-played .tech-text>*,.tech-part.is-played .schema{animation:.2s both fade-in}}@media (prefers-reduced-motion:no-preference) and (width>=1000px){.js .tech-screen-slide:not(:first-child,.is-played) .schema{opacity:0}.js .tech-screen-slide.is-played:not(:first-child) :is(.schema-svg>:not(title,desc),figcaption){animation:rise-short .3s var(--ease-out) both;animation-delay:var(--part-at)}.js .tech-screen-slide .schema-svg>:nth-child(3){--part-at:.1s}.js .tech-screen-slide .schema-svg>:nth-child(4){--part-at:.145s}.js .tech-screen-slide .schema-svg>:nth-child(5){--part-at:.19s}.js .tech-screen-slide .schema-svg>:nth-child(6){--part-at:.235s}.js .tech-screen-slide .schema-svg>:nth-child(7){--part-at:.28s}.js .tech-screen-slide .schema-svg>:nth-child(8){--part-at:.325s}.js .tech-screen-slide .schema-svg>:nth-child(9){--part-at:.37s}.js .tech-screen-slide .schema-svg>:nth-child(10){--part-at:.415s}.js .tech-screen-slide .schema-svg>:nth-child(11){--part-at:.46s}.js .tech-screen-slide .schema-svg>:nth-child(12){--part-at:.505s}.js .tech-screen-slide .schema-svg>:nth-child(13){--part-at:.55s}.js .tech-screen-slide .schema-svg>:nth-child(14){--part-at:.595s}.js .tech-screen-slide .schema-svg>:nth-child(15){--part-at:.64s}.js .tech-screen-slide .schema-svg>:nth-child(16){--part-at:.685s}.js .tech-screen-slide .schema-svg>:nth-child(17){--part-at:.73s}.js .tech-screen-slide .schema-svg>:nth-child(18){--part-at:.775s}.js .tech-screen-slide .schema-svg>:nth-child(n+19){--part-at:.82s}.js .tech-screen-slide figcaption{--part-at:.9s}}@supports (animation-timeline:view()) and (animation-range:entry 0% entry 100%){@media (prefers-reduced-motion:no-preference){:root.js .tech-part .tech-text>*,:root.js .tech-part .schema,:root.js .tech-overview>*{animation:rise var(--ease-out) both;animation-timeline:view();animation-range:entry cover 30%}@media (width>=1000px){:root.js .tech-parts{timeline-scope:var(--timelines)}:root.js .tech-part .tech-text>*{animation-timeline:var(--tl);animation-range:cover calc(var(--scene-gap) - 10vh) cover calc(var(--handover) - 40px)}:root.js .tech-part .tech-text>:not(:first-child){animation-range:cover var(--scene-gap) cover var(--handover)}:root.js .tech-part{view-timeline-name:var(--tl)}:root.js .tech-part:not(:last-child){animation:linear both recede;animation-timeline:var(--tl-next);animation-range:cover calc(var(--handover) - 160px) cover var(--handover)}:root.js .tech-overview .schema{view-timeline-name:--overview}:root.js .tech-overview :is(.schema-svg>:not(title,desc),figcaption){animation:rise-short var(--ease-out) both;animation-timeline:--overview;animation-range:cover calc(25vh + var(--part-at)) cover calc(25vh + var(--part-at) + 60px)}:root.js .tech-overview .schema-svg>:nth-child(3){--part-at:0px}:root.js .tech-overview .schema-svg>:nth-child(4){--part-at:24px}:root.js .tech-overview .schema-svg>:nth-child(5){--part-at:48px}:root.js .tech-overview .schema-svg>:nth-child(6){--part-at:72px}:root.js .tech-overview .schema-svg>:nth-child(7){--part-at:96px}:root.js .tech-overview .schema-svg>:nth-child(8){--part-at:120px}:root.js .tech-overview .schema-svg>:nth-child(9){--part-at:144px}:root.js .tech-overview .schema-svg>:nth-child(10){--part-at:168px}:root.js .tech-overview .schema-svg>:nth-child(11){--part-at:192px}:root.js .tech-overview .schema-svg>:nth-child(12){--part-at:216px}:root.js .tech-overview .schema-svg>:nth-child(13){--part-at:240px}:root.js .tech-overview .schema-svg>:nth-child(14){--part-at:264px}:root.js .tech-overview .schema-svg>:nth-child(15){--part-at:288px}:root.js .tech-overview .schema-svg>:nth-child(16){--part-at:312px}:root.js .tech-overview .schema-svg>:nth-child(17){--part-at:336px}:root.js .tech-overview .schema-svg>:nth-child(n+18),:root.js .tech-overview figcaption{--part-at:360px}}}}
