@keyframes ob-droid-float{0%,to{transform:translate(0,0)}50%{transform:translateY(-14px)}}.ob-droid-float{animation:2.8s ease-in-out infinite ob-droid-float}@keyframes ob-pulse{0%,to{opacity:.4}50%{opacity:1}}.ob-pulse{animation:2s ease-in-out infinite ob-pulse}@media (prefers-reduced-motion:reduce){.ob-droid-float,.ob-pulse{animation:none}}
.ob-mod{--ob-a:#3b82f6;--ob-g0:#1e3a8a;--ob-g1:#3b82f6;--ob-card:#0d111b;z-index:10;scroll-margin-top:4.5rem;position:relative;overflow-x:clip}.ob-mod:focus{outline:none}.ob-mod-glow{pointer-events:none;background:radial-gradient(52rem 24rem at 12% 44%, color-mix(in srgb, var(--ob-a) 15%, transparent), transparent 72%), radial-gradient(34rem 20rem at 92% 58%, color-mix(in srgb, var(--ob-g0) 22%, transparent), transparent 72%);height:60rem;position:absolute;inset:-10rem 0 auto}.ob-mod-line{top:calc(var(--spacing-section) * -.5);left:var(--spacing-gutter);right:var(--spacing-gutter);background:linear-gradient(90deg, var(--ob-a), transparent);transform-origin:0;opacity:.5;border-radius:1px;height:2px;transition:transform 1.2s cubic-bezier(.16,1,.3,1),opacity 1.2s;position:absolute;transform:scaleX(.12)}.ob-mod.is-in .ob-mod-line{opacity:.9;transform:scaleX(1)}.ob-mod-first .ob-mod-line{display:none}.ob-mod.ob-mod-first{padding-top:1rem}.ob-tile{background:linear-gradient(135deg, var(--ob-g0), var(--ob-g1));width:3.5rem;height:3.5rem;box-shadow:inset 0 1px 0 #ffffff47, 0 10px 30px color-mix(in srgb, var(--ob-a) 38%, transparent);color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums;border-radius:1rem;flex:none;place-items:center;font-size:1.375rem;font-weight:700;display:grid}.ob-accent-text{color:color-mix(in srgb, var(--ob-a) 68%, #fff)}.ob-ghost{top:-2.25rem;right:var(--spacing-gutter);letter-spacing:-.05em;font-variant-numeric:tabular-nums;pointer-events:none;-webkit-user-select:none;user-select:none;color:#0000;background:linear-gradient(180deg, color-mix(in srgb, var(--ob-a) 34%, transparent), transparent 82%);-webkit-background-clip:text;background-clip:text;font-size:11rem;font-weight:700;line-height:1;display:none;position:absolute}@media (min-width:768px){.ob-ghost{display:block}}.ob-card{--mx:18%;--my:0%;background:var(--ob-card);border:1px solid #ffffff12;border-radius:1.125rem;padding:1.375rem 1.25rem;transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s;position:relative;overflow:hidden;box-shadow:0 24px 50px -28px #000c}.ob-card:before{content:"";pointer-events:none;background:radial-gradient(17rem circle at var(--mx) var(--my), color-mix(in srgb, var(--ob-a) 24%, transparent), transparent 70%);opacity:.55;transition:opacity .35s;position:absolute;inset:0}.ob-card:after{content:"";pointer-events:none;border-radius:inherit;background:radial-gradient(13rem circle at var(--mx) var(--my), color-mix(in srgb, var(--ob-a) 85%, transparent), transparent 70%);-webkit-mask-composite:xor;opacity:.5;padding:1px;transition:opacity .35s;position:absolute;inset:0;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor,source-over;mask:linear-gradient(#fff 0 0) content-box exclude,linear-gradient(#fff 0 0)}@media (hover:hover){.ob-glow-group:hover .ob-card:before,.ob-glow-group:hover .ob-card:after{opacity:1}.ob-card:hover{border-color:#ffffff24;transform:translateY(-3px)}.ob-card:hover .ob-card-line{width:100%}}.ob-icon{background:linear-gradient(135deg, var(--ob-g0), var(--ob-g1));width:2.5rem;height:2.5rem;box-shadow:0 8px 24px color-mix(in srgb, var(--ob-a) 30%, transparent);border-radius:.625rem;flex:none;place-items:center;display:grid}.ob-card-line{background:linear-gradient(90deg, var(--ob-a), transparent);border-radius:1px;width:30%;height:2px;transition:width .4s cubic-bezier(.16,1,.3,1);display:block}.ob-stat-value{letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#0000;background:linear-gradient(180deg, #fff 20%, color-mix(in srgb, var(--ob-a) 55%, #fff) 100%);-webkit-background-clip:text;background-clip:text;font-size:clamp(2.75rem,2rem + 3vw,4.25rem);font-weight:700;line-height:1}.ob-chip{border:1px solid color-mix(in srgb, var(--ob-a) 30%, #ffffff14);background:color-mix(in srgb, var(--ob-a) 9%, transparent);color:var(--color-text);white-space:nowrap;border-radius:9999px;align-items:center;padding:.25rem .75rem;display:inline-flex}.ob-droid{pointer-events:none;flex:none;position:relative}.ob-droid-peek{overflow:hidden}.ob-droid-move{opacity:0;transition:opacity .7s,transform .9s cubic-bezier(.16,1,.3,1);position:absolute;top:0;left:0;transform:translateY(28px)}.ob-droid-peek .ob-droid-move{opacity:1;transform:translateY(46%)}.ob-droid.is-in .ob-droid-move{opacity:1;transform:translate(0,0)}.ob-droid-peek.is-in .ob-droid-move{transition:transform 1.1s cubic-bezier(.34,1.4,.64,1) .2s}@keyframes ob-bob{0%,to{transform:translate(0,0)}50%{transform:translateY(-8px)}}.ob-droid-float .ob-droid-bob{animation:3.2s ease-in-out infinite ob-bob}.ob-bubble{--ob-bubble-bg:color-mix(in srgb, var(--ob-a) 11%, #10141f);--ob-bubble-line:color-mix(in srgb, var(--ob-a) 42%, #ffffff1a);border:1px solid var(--ob-bubble-line);background:var(--ob-bubble-bg);color:var(--color-text);box-shadow:0 18px 40px -20px color-mix(in srgb, var(--ob-a) 55%, transparent);border-radius:1.25rem;padding:.875rem 1.125rem;position:relative}.ob-bubble:after{content:"";background:var(--ob-bubble-bg);border:1px solid var(--ob-bubble-line);border-top-color:#0000;border-right-color:#0000;border-bottom-left-radius:.25rem;width:.875rem;height:.875rem;position:absolute}.ob-bubble-left:after{top:50%;left:-.5rem;transform:translateY(-50%)rotate(45deg)}.ob-bubble-right:after{top:50%;right:-.5rem;transform:translateY(-50%)rotate(225deg)}.ob-bubble-top:after{top:-.5rem;left:2.5rem;transform:rotate(135deg)}.ob-bubble-bottom:after{bottom:-.5rem;left:2.5rem;transform:rotate(-45deg)}.ob-bubble-big{border-radius:1.5rem;padding:1.125rem 1.375rem}@media (max-width:639px){.ob-hello-bubble:after{inset:auto 5.5rem -.5rem auto;transform:rotate(-45deg)}.ob-bye-bubble:after{top:-.5rem;left:50%;transform:translate(-50%)rotate(135deg)}}.ob-window{box-shadow:inset 0 1px 0 #ffffff14, 0 1px 2px #0000008c, 0 30px 60px -24px #000000bf, 0 44px 90px -56px color-mix(in srgb, var(--ob-a) 55%, transparent);background:#0b0f18;border:1px solid #ffffff17;border-radius:1.25rem;position:relative;overflow:hidden}.ob-window-bar{background:linear-gradient(180deg, color-mix(in srgb, var(--ob-a) 9%, #111623), #0d111b);border-bottom:1px solid #ffffff12;justify-content:space-between;align-items:center;gap:1rem;padding:.625rem .875rem;display:flex;position:relative}.ob-window-bar:before{content:"";background:linear-gradient(90deg, var(--ob-a), transparent 60%);height:2px;position:absolute;inset:0 0 auto}.ob-pill{min-width:0;color:var(--color-text);background:#ffffff0f;border-radius:9999px;align-items:center;gap:.5rem;padding:.3125rem .875rem .3125rem .75rem;display:inline-flex}.ob-pill-dot{background:var(--ob-a);width:.375rem;height:.375rem;box-shadow:0 0 8px var(--ob-a);border-radius:9999px;flex:none}.ob-live-dot{background:#10b981;border-radius:9999px;width:.375rem;height:.375rem;box-shadow:0 0 8px #10b981}.ob-button{border:1px solid color-mix(in srgb, var(--ob-a) 45%, transparent);background:color-mix(in srgb, var(--ob-a) 14%, transparent);color:var(--color-text);border-radius:9999px;outline:none;padding:.25rem .875rem;transition:background-color .2s}.ob-button:hover{background:color-mix(in srgb, var(--ob-a) 26%, transparent)}.ob-button:focus-visible{box-shadow:0 0 0 2px #fff9}.ob-peek-host{position:relative}.ob-peek-spot{position:absolute;bottom:100%;right:7%}.ob-source{background:#080c14;position:relative;overflow:hidden}.ob-source-glow{pointer-events:none;will-change:transform;border-radius:9999px;position:absolute;top:35%;left:72%;transform:translate(-50%,-50%)}.ob-source-glow-outer{background:radial-gradient(closest-side, color-mix(in srgb, var(--ob-a) 17%, transparent), transparent);width:34rem;height:34rem}.ob-source-glow-inner{background:radial-gradient(closest-side, color-mix(in srgb, var(--ob-a) 26%, transparent), transparent);width:11rem;height:11rem}.ob-source-line{padding-right:1.25rem;display:block}.ob-source-no{text-align:right;width:3.25rem;color:var(--color-text-muted);-webkit-user-select:none;user-select:none;padding-right:1rem;display:inline-block}.ob-source-num{background:color-mix(in srgb, var(--ob-a) 20%, transparent);color:color-mix(in srgb, var(--ob-a) 45%, #fff);border-radius:.25rem;padding:.0625rem .25rem}@media (max-width:767px),(pointer:coarse) and (max-height:500px){.code-fold .ob-source-line{text-indent:-3.25rem;padding-left:3.25rem}.code-fold .ob-source-no{text-indent:0}}.ob-pile{flex-direction:column;gap:.75rem;display:flex}@media (min-width:640px){.ob-pile{gap:0}.ob-pile>.ob-card{width:calc(100% - 5rem)}.ob-pile>.ob-card:first-child{transform:rotate(-1.2deg)}.ob-pile>.ob-card:nth-child(2){margin-top:-.5rem;margin-left:2.5rem;transform:rotate(.6deg)}.ob-pile>.ob-card:nth-child(3){margin-top:-.5rem;margin-left:5rem;transform:rotate(-.5deg)}.ob-pile>.ob-card:hover{z-index:2;transform:rotate(0)translateY(-3px)}}.ob-rail-track{top:5rem;bottom:0;left:max(1.25rem, calc((100vw - var(--container-page)) / 2 - 4.25rem));z-index:20;pointer-events:none;display:none;position:absolute}@media (min-width:1340px){.ob-rail-track{display:block}}.ob-rail{pointer-events:auto;padding-block:2rem;position:sticky;top:calc(50vh - 9.5rem)}.ob-rail ol{flex-direction:column;gap:.375rem;display:flex;position:relative}.ob-rail ol:before{content:"";background:#ffffff1f;width:1px;position:absolute;top:1rem;bottom:1rem;left:.9375rem}.ob-rail-step{height:2rem;color:var(--color-text-muted);border-radius:9999px;outline:none;align-items:center;gap:.625rem;padding-right:.5rem;font-size:.75rem;transition:color .3s;display:flex;position:relative}.ob-rail-step:hover{color:var(--color-text)}.ob-rail-step:focus-visible{box-shadow:0 0 0 2px #fff9}.ob-rail-dot{flex:none;width:2rem;height:2rem;position:relative}.ob-rail-dot:before{content:"";background:#2a2f3d;border-radius:9999px;transition:inset .35s cubic-bezier(.16,1,.3,1),background-color .35s,box-shadow .35s;position:absolute;inset:.75rem;box-shadow:0 0 0 4px #07070d}.ob-rail-step.is-done .ob-rail-dot:before{background:color-mix(in srgb, var(--ob-a) 60%, #2a2f3d)}.ob-rail-step[aria-current]{color:color-mix(in srgb, var(--ob-a) 68%, #fff)}.ob-rail-step[aria-current] .ob-rail-dot:before{background:var(--ob-a);box-shadow:0 0 0 4px #07070d, 0 0 16px 2px var(--ob-a);inset:.5625rem}.ob-done-dot{background:var(--ob-a);width:.625rem;height:.625rem;box-shadow:0 0 10px color-mix(in srgb, var(--ob-a) 70%, transparent);border-radius:9999px}@media (prefers-reduced-motion:reduce){.ob-mod-line,.ob-card,.ob-card-line,.ob-droid-move,.ob-droid-peek.is-in .ob-droid-move,.ob-rail-dot:before{transition:none}.ob-droid-float .ob-droid-bob{animation:none}.ob-droid-move,.ob-droid-peek .ob-droid-move{opacity:1;transform:none}.ob-mod-line{opacity:.9;transform:scaleX(1)}}
