.method-flow{--node:2.75rem;--node-text:1.25rem;--gap:1rem;--node-x:0rem;--cycle:9s;--dash:color-mix(in oklab, var(--classic-accent) 50%, transparent);gap:var(--gap);flex-direction:column;display:flex}.method-stage{grid-template-columns:var(--node) minmax(0, 1fr);align-items:start;column-gap:1rem;display:grid;position:relative}.method-node{z-index:1;width:var(--node);height:var(--node);margin-left:var(--node-x);border:1px solid color-mix(in oklab, var(--classic-accent) 45%, transparent);background:var(--classic-panel);color:var(--classic-ink);font-size:var(--node-text);letter-spacing:-.03em;border-radius:50%;place-items:center;font-weight:600;line-height:1;transition:background-color .3s,border-color .3s,color .3s;display:grid;position:relative}.method-node:before{content:"";z-index:-1;background:radial-gradient(closest-side, color-mix(in oklab, var(--classic-accent) 38%, transparent), transparent);opacity:0;border-radius:50%;position:absolute;inset:-55%}.method-link{top:var(--node);bottom:calc(-1 * var(--gap));left:calc(var(--node-x) + var(--node) / 2 - 5px);pointer-events:none;background:repeating-linear-gradient(to bottom, var(--dash) 0 4px, transparent 4px 9px) center / 2px 100% no-repeat;width:10px;position:absolute;overflow:hidden}.method-pulse{opacity:0;background:radial-gradient(closest-side, #fbe7b8, var(--classic-accent) 45%, transparent) center / 100% 40% no-repeat;position:absolute;inset:0}.method-card{border:1px solid var(--classic-line);background:color-mix(in oklab, var(--classic-panel) 80%, transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:1.5rem;height:100%;padding:1.25rem;transition:border-color .3s,background-color .3s,box-shadow .4s,transform .45s cubic-bezier(.22,1,.36,1);position:relative}.method-detail{grid-template-rows:1fr;display:grid}.method-detail>div{min-height:0;overflow:hidden}.method-hint{transition:rotate .4s cubic-bezier(.22,1,.36,1),color .3s;display:none}.v-classic .method-stage:focus-visible{outline:none}.method-stage:focus-visible .method-card{outline:2px solid var(--classic-ink);outline-offset:3px}.method-stage:is(:hover,:focus-visible) .method-node{border-color:var(--classic-accent);background:var(--classic-accent);color:var(--classic-on-accent)}.method-stage:is(:hover,:focus-visible) .method-card{border-color:color-mix(in oklab, var(--classic-accent) 50%, transparent);background:var(--classic-raised);box-shadow:0 24px 48px -24px color-mix(in oklab, var(--classic-accent) 40%, transparent)}.method-stage:is(:hover,:focus-visible) .method-hint{color:var(--classic-ink);rotate:45deg}@media (min-width:48rem){.method-flow{--node:3.25rem;--node-text:1.5rem;--gap:1.25rem;max-width:48rem;margin-inline:auto}.method-stage{column-gap:1.5rem}.method-card{grid-template-columns:10rem minmax(0,1fr);column-gap:1.5rem;padding:1.5rem;display:grid}}@media (min-width:80rem){.method-flow{--node:4.5rem;--node-text:2rem;--node-x:1.25rem;grid-template-columns:repeat(5,minmax(0,1fr));max-width:none;display:grid}.method-stage{flex-direction:column;align-items:stretch;row-gap:1.25rem;display:flex}.method-slot{flex:1}.method-link{top:calc(var(--node) / 2 - 5px);right:calc(-1 * (var(--gap) + var(--node-x)));bottom:auto;left:calc(var(--node-x) + var(--node));background:repeating-linear-gradient(to right, var(--dash) 0 4px, transparent 4px 9px) center / 100% 2px no-repeat;width:auto;height:10px}.method-pulse{background-size:40% 100%}.method-card{padding:1.25rem;display:block}}@media (min-width:80rem) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.method-flow{padding-bottom:3rem}.method-slot{flex:none;height:7.5rem;position:relative}.method-card{height:auto;min-height:100%;position:absolute;inset:0 0 auto}.method-detail{opacity:0;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1),opacity .3s}.method-stage:is(:hover,:focus-visible){z-index:2}.method-stage:is(:hover,:focus-visible) .method-detail{opacity:1;grid-template-rows:1fr}.method-hint{display:block}}@keyframes method-pulse-y{0%{opacity:0;transform:translateY(-50%)}3%,12%{opacity:1}15%,to{opacity:0;transform:translateY(50%)}}@keyframes method-pulse-x{0%{opacity:0;transform:translate(-50%)}3%,12%{opacity:1}15%,to{opacity:0;transform:translate(50%)}}@keyframes method-glow{0%,18%,to{opacity:0}4%{opacity:1}}@media (prefers-reduced-motion:no-preference){.method-pulse{animation:method-pulse-y var(--cycle) linear infinite;animation-delay:calc(var(--i) * .15 * var(--cycle))}.method-node:before{animation:method-glow var(--cycle) ease-in-out infinite;animation-delay:calc((var(--i) * .15 - .04) * var(--cycle))}.method-stage:is(:hover,:focus-visible) .method-card{transform:translateY(-4px)}.method-download:before{content:"";z-index:-1;background:linear-gradient(110deg,#0000 35%,#ffffff17 50%,#0000 65%);position:absolute;inset:0;transform:translate(-100%)}.method-download:hover:before{transition:transform .9s cubic-bezier(.22,1,.36,1);transform:translate(100%)}}@media (min-width:80rem) and (prefers-reduced-motion:no-preference){.method-pulse{animation-name:method-pulse-x}}.method-doc{clip-path:polygon(0 0,calc(100% - .625rem) 0,100% .625rem,100% 100%,0 100%)}.method-doc:after{content:"";background:linear-gradient(to bottom left,#0000 50%,#dcd3c2 50%);width:.625rem;height:.625rem;position:absolute;top:0;right:0}
@property --oc-t{syntax:"<number>";inherits:true;initial-value:.86}@keyframes oc-clock{0%{--oc-t:0}to{--oc-t:1}}@keyframes oc-twinkle{50%{opacity:.55;scale:.6}}@keyframes oc-bounce{0%,60%,to{translate:0}30%{translate:0 -2.5px}}@media (prefers-reduced-motion:no-preference){.oc-scene{animation:oc-clock var(--oc-loop,8s) linear var(--oc-delay,0s) infinite backwards paused}.oc-scene .oc-twinkle{animation:2.6s ease-in-out infinite paused oc-twinkle}.oc-scene .oc-bounce{animation:oc-bounce 1s ease-in-out var(--d,0s) infinite paused}[data-oc-live] :is(.oc-scene,.oc-scene .oc-twinkle,.oc-scene .oc-bounce){animation-play-state:running}}.oc-scene{--oc-end:clamp(0, (1 - var(--oc-t)) * 10, 1)}.oc-scene :is(.oc-in,.oc-in-x,.oc-pop,.oc-grow,.oc-rise,.oc-draw,.oc-out,.oc-wipe,.oc-caret,.oc-fly,.oc-roll,.oc-ring){--p:clamp(0, (var(--oc-t) - var(--at,0)) / var(--len,.06), 1);--e:calc(var(--p) * var(--p) * (3 - 2 * var(--p)))}.oc-scene :is(.oc-pop,.oc-grow,.oc-rise,.oc-wipe,.oc-ring,.oc-twinkle){transform-box:fill-box;transform-origin:50%}.oc-scene .oc-in{opacity:min(var(--p), var(--oc-end));translate:0 calc((1 - var(--e)) * 4px)}.oc-scene .oc-in-x{opacity:min(var(--p), var(--oc-end));translate:calc((1 - var(--e)) * -14px) 0}.oc-scene .oc-pop{opacity:min(var(--p), var(--oc-end));scale:calc(.5 + var(--e) * .5)}.oc-scene .oc-grow{opacity:var(--oc-end);scale:var(--p) 1;transform-origin:0}.oc-scene .oc-rise{opacity:var(--oc-end);scale:1 var(--e);transform-origin:bottom}.oc-scene .oc-draw{opacity:var(--oc-end);stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--e))}.oc-scene .oc-out{opacity:max(1 - var(--p), 1 - var(--oc-end))}.oc-scene .oc-wipe{scale:calc(1 - var(--p)) 1;transform-origin:100%}.oc-scene .oc-caret{opacity:clamp(0, min(var(--p), 1 - var(--p)) * 40, 1);translate:calc(var(--p) * var(--w,0) * 1px) 0}.oc-scene .oc-fly{opacity:clamp(0, min(var(--p), 1 - var(--p)) * 8, 1);translate:calc(var(--e) * var(--dx,0) * 1px) calc(var(--e) * var(--dy,0) * 1px)}.oc-scene .oc-roll{opacity:min(clamp(0, (var(--oc-t) - var(--at,0) + .04) * 25, 1), var(--oc-end));translate:0 calc(var(--e) * var(--dy,0) * 1px)}.oc-scene .oc-ring{opacity:clamp(0, min(var(--p) * 10, (1 - var(--p)) * 1.5), 1);scale:calc(.3 + var(--p) * 1.1)}.oc-scene .oc-window{opacity:min(clamp(0, (var(--oc-t) - var(--at,0)) * 30, 1), clamp(0, (var(--at,0) + var(--len,.1) - var(--oc-t)) * 30, 1))}.oc-scene .oc-path2{--p1:clamp(0, (var(--oc-t) - var(--a1)) / .08, 1);--p2:clamp(0, (var(--oc-t) - var(--a2)) / .08, 1);opacity:min(clamp(0, (var(--oc-t) - var(--at,0)) * 20, 1), var(--oc-end));translate:calc((var(--p1) * var(--dx1) + var(--p2) * var(--dx2)) * 1px) calc((var(--p1) * var(--dy1) + var(--p2) * var(--dy2)) * 1px)}.oc-scene .oc-card{fill:var(--classic-panel);stroke:var(--classic-edge);stroke-width:.8px}.oc-scene .oc-card-acc{fill:var(--classic-panel);stroke:var(--classic-accent);stroke-width:1px}.oc-scene .oc-cover{fill:var(--classic-panel)}.oc-scene .oc-faint{fill:color-mix(in oklab, var(--classic-text) 6%, transparent)}.oc-scene .oc-sk{fill:color-mix(in oklab, var(--classic-text) 13%, transparent)}.oc-scene .oc-sk2{fill:color-mix(in oklab, var(--classic-text) 24%, transparent)}.oc-scene .oc-txt{fill:var(--classic-mute);font-weight:500}.oc-scene .oc-txt-body{fill:var(--classic-soft);font-weight:500}.oc-scene .oc-txt-strong{fill:var(--classic-text);font-weight:600}.oc-scene .oc-acc{fill:var(--classic-accent)}.oc-scene .oc-acc-mid{fill:color-mix(in oklab, var(--classic-accent) 60%, transparent)}.oc-scene .oc-acc-soft{fill:color-mix(in oklab, var(--classic-accent) 18%, transparent)}.oc-scene .oc-acc-ink{fill:var(--classic-ink);font-weight:600}.oc-scene .oc-on-acc{fill:var(--classic-on-accent);font-weight:600}.oc-scene .oc-alert-soft{fill:color-mix(in oklab, var(--classic-alert) 15%, transparent)}.oc-scene .oc-alert-ink{fill:var(--classic-alert);font-weight:600}.oc-scene .oc-acc-line{fill:none;stroke:var(--classic-accent);stroke-width:1.3px;stroke-linecap:round;stroke-linejoin:round}.oc-scene .oc-icon{fill:none;stroke:var(--classic-mute);stroke-width:1.1px;stroke-linecap:round;stroke-linejoin:round}.oc-scene .oc-scribble{fill:none;stroke:color-mix(in oklab, var(--classic-text) 30%, transparent);stroke-width:1px;stroke-linecap:round}.oc-scene .oc-flap{fill:none;stroke:var(--classic-panel);stroke-width:.8px}