.sf-root{--sf-ink:#f2f5f5;--sf-soft:#c9d0d0;--sf-muted:#8a9494;--sf-faint:#5d6666;--sf-line:#ffffff1a;--sf-line-strong:#fff3;--sf-bracket:#ffffff47;width:100%;container-type:inline-size}.sf-root :where(svg){flex:none;max-width:none;display:block}.sf-root :where(h3,p){margin:0}.sf-root :focus-visible{outline-offset:2px;outline:2px solid #00bfb3}.sf-reveal{opacity:0;transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transform:translateY(18px)}.sf-reveal[data-in=true]{opacity:1;transform:none}.sf-bento{grid-template-columns:minmax(0,1fr);gap:28px;display:grid}@container (min-width:720px){.sf-bento{grid-template-columns:repeat(2,minmax(0,1fr))}.sf-wide{grid-column:1/-1}}.sf-frame{flex-direction:column;display:flex;position:relative}.sf-frame>.sf-card{flex:1}.sf-c{border:0 solid var(--sf-bracket);pointer-events:none;width:12px;height:12px;transition:border-color .3s,transform .35s cubic-bezier(.2,.8,.2,1);position:absolute}.sf-c-tl{border-top-width:1.5px;border-left-width:1.5px;top:-6px;left:-6px}.sf-c-tr{border-top-width:1.5px;border-right-width:1.5px;top:-6px;right:-6px}.sf-c-bl{border-bottom-width:1.5px;border-left-width:1.5px;bottom:-6px;left:-6px}.sf-c-br{border-bottom-width:1.5px;border-right-width:1.5px;bottom:-6px;right:-6px}.sf-frame:hover>.sf-c{border-color:#00bfb3}.sf-frame:hover>.sf-c-tl{transform:translate(-3px,-3px)}.sf-frame:hover>.sf-c-tr{transform:translate(3px,-3px)}.sf-frame:hover>.sf-c-bl{transform:translate(-3px,3px)}.sf-frame:hover>.sf-c-br{transform:translate(3px,3px)}.sf-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0009;border:1px solid #00bfb340;border-radius:16px;flex-direction:column;gap:14px;padding:clamp(14px,2cqw,22px);transition:border-color .3s,box-shadow .35s;display:flex}.sf-card:hover{border-color:#00bfb380;box-shadow:0 10px 30px -14px #00bfb340}.sf-card h3{letter-spacing:-.005em;color:var(--sf-ink);font-size:15px;font-weight:600}.sf-card p{color:#fff9;max-width:44ch;margin-top:4px;font-size:13.5px;line-height:1.55}.sf-diagram{width:100%;height:auto;overflow:visible}.sf-wide-copy{grid-template-columns:1fr;gap:16px;display:grid}@container (min-width:560px){.sf-wide-copy{grid-template-columns:1fr 1fr}}.sf-flow{stroke:var(--sf-line-strong);fill:none;stroke-width:1.2px;transition:stroke .3s}.sf-flow-on{stroke:#00bfb3}.sf-dash{stroke-dasharray:3 4;animation:1.2s linear infinite sf-dash}.sf-pkt{fill:#01ffab}.sf-node{fill:#0b0f10;stroke:var(--sf-line-strong);transition:stroke .3s}.sf-tool{cursor:pointer;transform-box:fill-box;transform-origin:50%;transition:transform .3s cubic-bezier(.2,.8,.2,1)}.sf-tool:hover,.sf-tool-on{transform:translateY(-2px)}.sf-tool-on rect.sf-node{stroke:#00bfb3}.sf-chart{cursor:crosshair}.sf-line-draw{stroke-dasharray:1;stroke-dashoffset:1px;transition:stroke-dashoffset 1.8s cubic-bezier(.4,.1,.2,1)}[data-in=true] .sf-line-draw{stroke-dashoffset:0}.sf-glow{transform-box:fill-box;transform-origin:50%;animation:2s ease-in-out infinite sf-pulse}.sf-sheet-new{animation:.7s cubic-bezier(.2,.8,.2,1) both sf-sheet-in}@keyframes sf-dash{to{stroke-dashoffset:-14px}}@keyframes sf-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(1.35)}}@keyframes sf-sheet-in{0%{opacity:0;transform:translate(14px,-10px)rotate(4deg)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.sf-reveal{opacity:1;transition:none;transform:none}.sf-dash,.sf-glow,.sf-sheet-new{animation:none}.sf-line-draw{stroke-dashoffset:0;transition:none}}