.fig-panel{--figure-radius-card:8px;--figure-radius-control:4px;--figure-surface:var(--color-background);--figure-ink:var(--color-diagram-text);--figure-line:color-mix(in oklab, var(--color-text-primary) 15%, var(--color-background));--figure-line-soft:color-mix(in oklab, var(--color-text-primary) 9%, var(--color-background));--figure-line-muted:color-mix(in oklab, var(--color-text-primary) 26%, var(--color-background));--figure-line-accent:color-mix(in oklab, var(--color-diagram-text) 45%, var(--color-background));--figure-glass:color-mix(in srgb, var(--color-background) 62%, transparent);--figure-shadow:0 12px 24px -18px #00000052;--figure-ring:0 0 0 1px color-mix(in srgb, var(--color-text-primary) 12%, transparent);--figure-halo:transparent;--figure-ease:cubic-bezier(.16, 1, .3, 1);--figure-pop:cubic-bezier(.34, 1.56, .64, 1);isolation:isolate;border-radius:var(--figure-radius-card);background:var(--color-diagram-bg);min-width:0;color:var(--color-diagram-text);border:1px solid #0000;flex-direction:column;justify-content:center;margin:0;display:flex;position:relative;overflow:hidden;container:fig/inline-size}.dark .fig-panel{--figure-halo:color-mix(in srgb, var(--color-diagram-bg) 80%, transparent)}
.board{--board-move:.82s;--board-wipe:var(--global-ease);--board-cell:color-mix(in oklab, var(--color-text-primary) 24%, var(--color-background));--board-success:var(--color-product-success);--board-error:var(--color-product-error);--board-edge:color-mix(in oklab, var(--color-diagram-text) 26%, var(--color-background));--board-wire-from:color-mix(in srgb, var(--color-text-primary) 8%, transparent);--board-wire-to:var(--figure-line-muted);padding:24px}.board>.hills[data-variant=ground]{opacity:.325;-webkit-mask-image:linear-gradient(#0000 68%,#000);mask-image:linear-gradient(#0000 68%,#000)}.board .board__fit{flex:1;place-items:center;width:100%;display:grid}.board .board__surface{aspect-ratio:640/360;width:100%;max-width:760px;position:relative}.board .board__wires{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.board svg *{vector-effect:non-scaling-stroke}.board .board-node{box-sizing:border-box;border-radius:var(--figure-radius-control);background:var(--figure-surface);box-shadow:var(--figure-ring), var(--figure-shadow);transition:left var(--board-move) var(--figure-ease) calc(var(--i,0) * 50ms), top var(--board-move) var(--figure-ease) calc(var(--i,0) * 50ms), width var(--board-move) var(--figure-ease) calc(var(--i,0) * 50ms), height var(--board-move) var(--figure-ease) calc(var(--i,0) * 50ms), opacity .42s var(--board-wipe), border-color .24s var(--board-wipe), background-color .24s var(--board-wipe);border:1px solid #0000;position:absolute}.board .board-node:not([data-on]){opacity:0;transition-delay:0s}.board .board-sandbox{z-index:2;border-color:var(--board-edge);box-shadow:var(--figure-shadow)}.board .board-sandbox[data-idle]{border-style:dashed;border-color:var(--figure-line-muted);background:var(--figure-glass);box-shadow:none}.board .board-copy{z-index:1}.board .board-repo,.board .board-api{place-items:center;display:grid}.board .board-repo svg{fill:none;width:30%;stroke:var(--color-text-faint);stroke-width:1.5px;stroke-linecap:round}.board .board-file svg{width:100%;height:100%;position:absolute;inset:0}.board .board-fold{fill:none;stroke:var(--figure-line-soft)}.board .board-input{width:100%;height:100%;transition:opacity .32s var(--board-wipe);position:absolute;inset:0}.board .board-input:not([data-on]){opacity:0}.board .board-rule{fill:none;stroke:var(--figure-line-soft)}.board .board-dot{fill:var(--board-success);transition:fill .2s var(--board-wipe)}.board .board-dot[data-off]{fill:var(--color-text-faint);opacity:.6}.board .board-row{transition:opacity .3s var(--board-wipe), translate .5s var(--figure-ease)}.board .board-row:not([data-on]){opacity:0;translate:-3px}.board .board-sandbox[data-idle] .board-row[data-on]{opacity:.45}.board .board-row__icon,.board .board-row__bar{fill:var(--board-cell)}.board .board-row--new :is(.board-row__icon,.board-row__bar){fill:var(--figure-ink)}.board .board-glyph,.board .board-prompt,.board .board-package{fill:none;stroke:var(--color-text-faint);stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round}.board .board-package{stroke:var(--board-cell);stroke-width:1.25px}.board .board-code{fill:var(--board-cell);transform-box:fill-box;transform-origin:0;transition:scale .42s var(--figure-ease) calc(var(--i,0) * 90ms), opacity .24s var(--board-wipe) calc(var(--i,0) * 90ms)}.board .board-code:not([data-on]){opacity:0;scale:0 1}.board .board-code--lit{fill:var(--figure-ink)}.board .board-wire__fade stop:first-child{stop-color:var(--board-wire-from)}.board .board-wire__fade stop:last-child{stop-color:var(--board-wire-to)}.board .board-wire__fade[data-tone=ok]{--board-wire-to:color-mix(in srgb, var(--board-success) 75%, transparent)}.board .board-wire__fade[data-tone=err]{--board-wire-to:color-mix(in srgb, var(--board-error) 45%, transparent)}.board .board-wire{fill:none;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;clip-path:inset(-4px);transition:clip-path .64s var(--board-wipe) calc(var(--i,0) * .11s)}.board .board-wire:not([data-on]){clip-path:inset(-4px 100% -4px -4px);transition-duration:0s;transition-delay:0s}.board .board-packet{z-index:3;background:var(--figure-ink);width:10px;height:10px;transition:left .7s var(--figure-ease) 60ms, opacity .2s var(--board-wipe);border-radius:2px;margin:-5px 0 0 -5px;position:absolute}.board .board-packet:not([data-on]){opacity:0;transition:left 0s, opacity .2s var(--board-wipe)}.board .board-shield{z-index:4;background:var(--figure-surface);width:28px;height:28px;box-shadow:var(--figure-ring), var(--figure-shadow);transition:opacity .26s var(--board-wipe) .26s, scale .42s var(--figure-pop) .26s;border-radius:50%;place-items:center;margin:-14px 0 0 -14px;display:grid;position:absolute}.board .board-shield:not([data-on]){opacity:0;transition-delay:0s;scale:.6}.board .board-shield svg{width:16px;height:16px;fill:color-mix(in srgb, var(--figure-ink) 18%, transparent);stroke:var(--figure-ink);stroke-width:1.5px;stroke-linejoin:round}.board .board-mark{z-index:4;border:1px solid color-mix(in srgb, var(--board-tone) 70%, transparent);background:color-mix(in srgb, var(--board-tone) 10%, var(--color-background));width:22px;height:22px;transition:opacity .26s var(--board-wipe), scale .42s var(--figure-pop);border-radius:50%;place-items:center;margin:-11px 0 0 -11px;display:grid;position:absolute}.board .board-mark[data-tone=ok]{--board-tone:var(--board-success)}.board .board-mark[data-tone=err]{--board-tone:var(--board-error)}.board .board-mark:not([data-on]){opacity:0;scale:.6}.board .board-mark svg{fill:none;width:16px;height:16px;stroke:var(--board-tone);stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round}.board .board-label{z-index:4;color:var(--color-text-faint);font:500 11px / 14px var(--font-neue-montreal-mono), monospace;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;text-shadow:0 0 2px var(--figure-halo), 0 0 6px var(--figure-halo), 0 0 12px var(--figure-halo);pointer-events:none;transition:opacity .36s var(--board-wipe) .42s;position:absolute}.board .board-label:not([data-on]){opacity:0;transition-delay:0s}.board .board-label[data-align=above]{translate:-50% -100%}.board .board-label[data-align=left]{translate:0 -50%}.board .board-label[data-tone=ok]{color:var(--board-success)}.board .board-label[data-tone=err]{color:var(--board-error)}.controls-board .board-node{border-radius:calc(var(--figure-radius-control) / 2)}.controls-board .controls-board-wall{z-index:1;border:1px solid color-mix(in srgb, var(--color-text-primary) 13%, transparent);background:var(--color-diagram-bg);box-shadow:none;border-radius:0}.controls-board .controls-board-wall>.hills[data-variant=ground]{opacity:1;-webkit-mask-image:none;mask-image:none}.controls-board .controls-board-corners{position:absolute;inset:-1px}.controls-board .controls-board-corners b{border:1px solid color-mix(in srgb, var(--color-text-primary) 26%, transparent);background:var(--color-background);width:5px;height:5px;margin:-2px;position:absolute}.controls-board .controls-board-corners b:first-child{top:0;left:0}.controls-board .controls-board-corners b:nth-child(2){top:0;left:calc(100% - 1px)}.controls-board .controls-board-corners b:nth-child(3){top:calc(100% - 1px);left:0}.controls-board .controls-board-corners b:nth-child(4){top:calc(100% - 1px);left:calc(100% - 1px)}.controls-board:not(.controls-board--narrow) .board__surface{margin-block:calc(min(100%,760px)/-21.3333)}.controls-board{--controls-code:color-mix(in oklab, var(--color-diagram-text) 16%, var(--color-background));--controls-code-key:color-mix(in oklab, var(--color-diagram-text) 34%, var(--color-background))}.dark .controls-board{--controls-code:color-mix(in oklab, var(--color-diagram-text) 22%, var(--color-background));--controls-code-key:color-mix(in oklab, var(--color-diagram-text) 42%, var(--color-background))}.controls-board .controls-board-code{fill:var(--controls-code)}.controls-board .controls-board-code--key{fill:var(--controls-code-key)}.controls-board .controls-board-prompt{stroke:var(--controls-code-key);stroke-width:1.25px}.controls-board .controls-board-light{fill:var(--controls-code)}.controls-board .controls-board-host{color:var(--color-text-secondary);font:500 11px / 1 var(--font-neue-montreal-mono), monospace;letter-spacing:.02em;white-space:nowrap}.controls-board .controls-board-host[data-active]{border-color:color-mix(in srgb, var(--board-success) 40%, transparent);color:var(--color-text-primary)}@container fig (max-width:479.98px){.board{padding:12px}.board .board-label{letter-spacing:.02em;font-size:9px}.board .board-mark{width:15px;height:15px;margin:-7.5px 0 0 -7.5px}.board .board-mark svg{width:11px;height:11px}.board .board-shield{width:20px;height:20px;margin:-10px 0 0 -10px}.board .board-shield svg{width:12px;height:12px}.controls-board .controls-board-host{letter-spacing:0;font-size:9px}.controls-board--narrow :is(.board-label,.controls-board-host){font-size:10px}}@container fig (max-width:299.98px){.controls-board--narrow .controls-board-host{font-size:9px}}@media (prefers-reduced-motion:reduce){.board *{transition-duration:0s!important;transition-delay:0s!important}}.board[data-ground=texture]{--g-minor:color-mix(in srgb, var(--color-diagram-text) 2%, transparent);--g-major:color-mix(in srgb, var(--color-diagram-text) 3.5%, transparent);--leak:#b3b1fa33}.dark .board[data-ground=texture]{--g-minor:color-mix(in srgb, var(--color-diagram-text) 1.5%, transparent);--g-major:color-mix(in srgb, var(--color-diagram-text) 2.5%, transparent);--leak:#968dfa14;--color-diagram-bg:var(--color-background-secondary);--color-diagram-border:color-mix(in oklab, var(--color-text-primary) 9%, var(--color-background));border-color:var(--color-diagram-border)}.board[data-ground=texture]:before,.board[data-ground=texture]:after{content:"";z-index:-1;pointer-events:none;position:absolute;inset:0}.board[data-ground=texture]:before{background:radial-gradient(48% 70% at var(--leak-at,100% 0%), var(--leak), transparent 72%), linear-gradient(to right, var(--g-major) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(var(--g-major) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(to right, var(--g-minor) 1px, transparent 1px) 0 0 / 8px 8px, linear-gradient(var(--g-minor) 1px, transparent 1px) 0 0 / 8px 8px}.board[data-ground=texture]:after{mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 0 0.35'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.8' intercept='-0.4'/%3E%3CfeFuncG type='linear' slope='1.8' intercept='-0.4'/%3E%3CfeFuncB type='linear' slope='1.8' intercept='-0.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/160px 160px}.board[data-ground=texture] .board__surface{width:110%;max-width:none;margin-inline:-5%}@container fig (340px<=width<480px){.board[data-ground=texture] .board-label{font-size:10px}}
@keyframes sb-faq-in{0%{opacity:0;transform:translateY(6px)}}