.article-body{min-width:0;max-width:100%}.article-body h2{font-family:var(--font-geist), ui-sans-serif, system-ui, sans-serif;color:var(--text-primary);letter-spacing:-.018em;text-wrap:balance;margin:44px 0 14px;padding-left:14px;scroll-margin-top:84px;font-size:1.18rem;font-weight:650;line-height:1.28;position:relative}.article-body h2:first-child{margin-top:6px}.article-body h2:before{content:"";background:linear-gradient(180deg, var(--section-color,var(--text-muted)), color-mix(in srgb, var(--section-color,var(--text-muted)) 40%, transparent));opacity:.85;border-radius:3px;width:3px;position:absolute;top:.25em;bottom:.25em;left:0}.article-body h3{font-family:var(--font-geist), ui-sans-serif, system-ui, sans-serif;color:var(--text-primary);letter-spacing:-.01em;margin:32px 0 8px;scroll-margin-top:84px;font-size:.98rem;font-weight:600;line-height:1.35}.article-body p{color:var(--text-secondary);letter-spacing:-.003em;text-wrap:pretty;margin-bottom:22px;font-size:.98rem;line-height:1.78}.article-body>p:first-child{color:var(--text-primary);letter-spacing:-.006em;border-bottom:1px solid var(--border-subtle,var(--border));max-width:560px;margin-bottom:28px;padding-bottom:22px;font-size:1.08rem;font-weight:450;line-height:1.72}.article-body>p:first-child:first-letter{letter-spacing:-.01em;font-weight:600}@media (min-width:768px){.article-body>p:first-child{margin-bottom:32px;padding-bottom:24px;font-size:1.14rem}}.article-body p strong{color:var(--text-primary);font-weight:600}.article-body a{color:var(--text-primary);text-decoration:underline;-webkit-text-decoration-color:var(--border-hover);text-decoration-color:var(--border-hover);text-underline-offset:4px;text-decoration-skip-ink:auto;text-decoration-thickness:1px;transition:text-decoration-color .22s,text-decoration-thickness .22s}.article-body a:hover{-webkit-text-decoration-color:var(--section-color,var(--text-primary));text-decoration-color:var(--section-color,var(--text-primary));text-decoration-thickness:1.5px}.article-body blockquote{color:var(--text-primary);letter-spacing:-.014em;text-wrap:pretty;margin:44px 0;padding:6px 0 6px 28px;font-size:1.22rem;font-style:italic;font-weight:500;line-height:1.55;position:relative}.article-body blockquote:before{content:"";background:linear-gradient(180deg, var(--section-color,var(--border-hover)), color-mix(in srgb, var(--section-color,var(--border-hover)) 30%, transparent));opacity:.7;border-radius:2px;width:2px;position:absolute;top:10px;bottom:10px;left:0}.article-body blockquote p{color:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;font-style:inherit;margin:0}.article-body code{font-size:.84em;font-family:var(--font-mono);background:var(--hover-bg);border:1px solid var(--border-subtle);color:var(--text-primary);white-space:nowrap;letter-spacing:-.005em;border-radius:5px;padding:1.5px 6px;font-weight:500}.article-body pre{background:var(--bg);border:1px solid var(--border);border-radius:12px;margin:22px 0 26px;padding:18px 20px;font-size:.82rem;line-height:1.75;overflow-x:auto}.article-body pre code,.code-block pre code{-webkit-backdrop-filter:none;box-shadow:none;white-space:pre;background:0 0;border:none;padding:0;font-weight:400}.code-block{min-width:0;max-width:100%;margin:28px 0 32px;position:relative}.code-block>div{min-width:0;max-width:100%}.code-block-header{background:var(--bg);border:1px solid var(--border);border-bottom:1px solid var(--border-subtle);border-radius:12px 12px 0 0;justify-content:space-between;align-items:center;padding:10px 16px;display:flex}.code-block-lang{font-family:var(--font-mono);color:var(--text-muted);letter-spacing:.1em;text-transform:uppercase;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;font-size:.66rem;font-weight:500;display:inline-flex}.code-block-lang:before{content:"";background:var(--text-muted);opacity:.45;border-radius:50%;width:5px;height:5px}.code-block-filename{font-family:var(--font-mono);color:var(--text-secondary);letter-spacing:-.003em;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;min-width:0;font-size:.72rem;font-weight:500;display:inline-flex}.code-block-filename svg{color:var(--text-muted);opacity:.7;flex-shrink:0}.code-block-filename-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;max-width:260px;font-weight:500;overflow:hidden}.code-block-filename-suffix{border-left:1px solid var(--border);color:var(--text-muted);letter-spacing:.1em;text-transform:uppercase;align-items:center;margin-left:2px;padding-left:8px;font-size:.62rem;font-weight:500;display:inline-flex}@media (max-width:640px){.code-block-filename{font-size:.66rem}.code-block-filename-name{max-width:160px}.code-block-filename-suffix{padding-left:6px;font-size:.58rem}}.copy-btn{width:28px;height:28px;color:var(--text-muted);cursor:pointer;opacity:.45;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;transition:opacity .22s,background .18s,color .18s,transform .14s;display:flex}.copy-btn:hover{color:var(--text-primary);background:#0000000d}.copy-btn:active{transform:scale(.88)}.code-block pre{font-size:.82rem;line-height:1.75;background:var(--bg)!important;border:1px solid var(--border)!important;border-top:none!important;border-radius:0 0 12px 12px!important;min-width:0!important;max-width:100%!important;margin:0!important;padding:18px 20px!important;overflow-x:auto!important}.code-block code{font-family:var(--font-mono);-webkit-backdrop-filter:none!important;font-weight:400!important;font-size:inherit!important;box-shadow:none!important;background:0 0!important;border:none!important;padding:0!important}.code-block code span{font-weight:inherit}.code-block .shiki,.code-block .shiki span{color:var(--shiki-light)!important;font-style:var(--shiki-light-font-style,inherit)!important;font-weight:var(--shiki-light-font-weight,inherit)!important}.article-body ul,.article-body ol{margin:10px 0 26px 22px;padding-left:4px}.article-body li{color:var(--text-secondary);letter-spacing:-.003em;margin-bottom:10px;font-size:.965rem;line-height:1.78}.article-body li strong{color:var(--text-primary);font-weight:600}.article-body li::marker{color:color-mix(in srgb, var(--section-color,var(--text-muted)) 60%, var(--text-muted))}.tech-hero-article{margin-top:0;margin-bottom:0}@media (pointer:coarse){.copy-btn{opacity:1}}@media (max-width:640px){.article-body h2{margin:34px 0 10px;padding-left:12px;font-size:1.08rem}.article-body h2:first-child{margin-top:6px}.article-body h3{margin:28px 0 8px;font-size:.92rem}.article-body p,.article-body li{font-size:.92rem;line-height:1.72}.article-body>p:first-child{font-size:1.02rem}.article-body pre{border-radius:10px;padding:14px 16px;font-size:.76rem}.code-block pre{font-size:.76rem;border-radius:0 0 10px 10px!important;padding:14px 16px!important}.code-block-header{border-radius:10px 10px 0 0;padding:9px 14px}.code-block-lang{font-size:.62rem}.article-body code{padding:1px 5px;font-size:.78em}}.article-progress{z-index:200;pointer-events:none;background:0 0;height:2px;position:fixed;top:0;left:0;right:0;opacity:1!important;animation:none!important;transform:none!important}.article-progress-fill{transform-origin:0 0;background:linear-gradient(90deg, color-mix(in srgb, var(--section-color,var(--text-primary)) 65%, transparent) 0%, color-mix(in srgb, var(--section-color,var(--text-primary)) 95%, transparent) 50%, color-mix(in srgb, var(--section-color,var(--text-primary)) 65%, transparent) 100%);width:100%;height:100%;box-shadow:0 0 6px color-mix(in srgb, var(--section-color,var(--text-primary)) 30%, transparent), 0 1px 4px #0000000a;will-change:transform}:root[data-theme=dark] .copy-btn:hover{background:#ffffff0f}:root[data-theme=dark] .article-body h2:before{background:linear-gradient(180deg, var(--text-secondary), color-mix(in srgb, var(--text-secondary) 30%, transparent));opacity:.7}:root[data-theme=dark] .article-body a{-webkit-text-decoration-color:var(--text-muted);text-decoration-color:var(--text-muted)}:root[data-theme=dark] .article-body a:hover{-webkit-text-decoration-color:var(--text-primary);text-decoration-color:var(--text-primary)}:root[data-theme=dark] .article-body blockquote:before{background:linear-gradient(180deg, var(--border-hover), #ffffff14);opacity:.9}:root[data-theme=dark] .article-body li::marker{color:var(--text-muted)}:root[data-theme=dark] .code-block .shiki,:root[data-theme=dark] .code-block .shiki span{color:var(--shiki-dark)!important;font-style:var(--shiki-dark-font-style,inherit)!important;font-weight:var(--shiki-dark-font-weight,inherit)!important}:root[data-theme=dark] .article-progress-fill{box-shadow:0 0 6px color-mix(in srgb, var(--section-color,var(--text-primary)) 45%, transparent)}.phone-preview{--pp-width:200px;--pp-height:412px;--pp-bezel:3px;--pp-outer-radius:26px;--pp-inner-radius:23px;opacity:0;transition:opacity .7s var(--ease-out-soft), transform .7s var(--ease-out-soft);flex-direction:column;align-items:center;gap:18px;margin:44px auto;display:flex;transform:translateY(10px)}.phone-preview[data-in-view=true]{opacity:1;transform:translateY(0)}.phone-preview-frame{width:var(--pp-width);height:var(--pp-height);border-radius:var(--pp-outer-radius);padding:var(--pp-bezel);background:linear-gradient(#f1f1f4 0%,#e2e2e8 100%);position:relative;box-shadow:0 40px 60px -28px #14162447,0 16px 28px -10px #14162429,0 4px 8px -2px #14162414,inset 0 1.5px #fffffff0,inset 0 -1px 1.5px #0000000f,inset 1px 0 #ffffff80,inset -1px 0 #0000000d}.phone-preview-frame:before,.phone-preview-frame:after{content:"";pointer-events:none;background:#00000017;border-radius:2px 0 0 2px;width:2px;position:absolute}.phone-preview-frame:before{height:22px;top:64px;left:-2px;box-shadow:0 32px #00000017}.phone-preview-frame:after{border-radius:0 2px 2px 0;height:38px;top:80px;right:-2px}.phone-preview-screen{border-radius:var(--pp-inner-radius);background:#fff;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 1px 2px #0000000d}.phone-preview-caption{font-size:var(--d-caption,.84rem);color:var(--text-muted);text-align:center;text-wrap:pretty;max-width:460px;line-height:1.55}:root[data-theme=dark] .phone-preview-frame{background:linear-gradient(#26262b 0%,#1a1a1e 100%);box-shadow:0 40px 60px -28px #000000b3,0 16px 28px -10px #00000073,0 4px 8px -2px #0000004d,inset 0 1.5px #ffffff12,inset 0 -1px 1.5px #00000073,inset 1px 0 #ffffff0a,inset -1px 0 #0000002e}:root[data-theme=dark] .phone-preview-frame:before,:root[data-theme=dark] .phone-preview-frame:after{background:#ffffff14}:root[data-theme=dark] .phone-preview-screen{background:#0f0f11;box-shadow:inset 0 1px 2px #00000059}.widget-demo{box-sizing:border-box;color:#111;justify-content:center;align-items:center;width:100%;height:100%;padding:18px 12px;display:flex}:root[data-theme=dark] .widget-demo{color:#f5f5f5}@media (prefers-reduced-motion:reduce){.phone-preview{opacity:1;transition:none;transform:none}}.widgets-dynamic-hero{animation:widgets-dynamic-hero-enter .42s var(--ease-out-soft) both}@media (prefers-reduced-motion:reduce){.widgets-dynamic-hero{animation:none}}.widgets-dynamic-hero.is-centered{flex-direction:column;align-items:flex-start;animation:none;display:flex}.widgets-dynamic-cover-mark{filter:drop-shadow(0 14px 26px #1416241a)drop-shadow(0 4px 8px #1416240d)drop-shadow(0 1px 2px #1416240f);animation:widgets-dynamic-cover-mark-enter .75s var(--ease-out-soft) both;justify-content:center;align-items:center;margin-top:32px;animation-delay:.11s;display:inline-flex;position:relative}@media (prefers-reduced-motion:reduce){.widgets-dynamic-cover-mark{animation:none}}@media (min-width:768px){.widgets-dynamic-cover-mark{margin-top:40px}}.widgets-dynamic-cover-mark svg{width:76px;height:76px;display:block}@media (min-width:768px){.widgets-dynamic-cover-mark svg{width:92px;height:92px}}:root[data-theme=dark] .widgets-dynamic-cover-mark{filter:drop-shadow(0 16px 32px #0000008c)drop-shadow(0 1px 2px #0006)}.widgets-dynamic-hero.is-centered+.widgets-dynamic-body{margin-top:0}.widgets-dynamic-stage{max-width:100%;animation:widgets-dynamic-stage-enter .42s var(--ease-out-soft) both;grid-template-columns:1fr 2fr;align-items:stretch;gap:20px;display:grid}@media (prefers-reduced-motion:reduce){.widgets-dynamic-stage{animation:none}}.widgets-dynamic-phone-col{min-width:0;display:flex}.widgets-dynamic-phone-col .phone-preview{--pp-bezel:4px;--pp-outer-radius:38px;--pp-inner-radius:34px;aspect-ratio:248/484;gap:0;width:100%;margin:0;display:block;position:relative;container-type:inline-size}.widgets-dynamic-phone-col .phone-preview-frame{transform-origin:0 0;width:248px;height:484px;transform:scale(calc(100cqi / 248px));position:absolute;top:0;left:0}.widgets-dynamic-code-col{flex-direction:column;min-width:0;display:flex}.widgets-dynamic-code-col .code-block{flex-direction:column;height:100%;min-height:0;margin:0;display:flex}.widgets-dynamic-code-col .code-block>div:not(.code-block-header){flex-direction:column;flex:1;min-height:0;display:flex}.widgets-dynamic-code-col .code-block pre{flex:1;min-height:0;overflow:auto!important}.widgets-code-stack{flex:1;grid-template-areas:"stack";min-width:0;min-height:0;display:grid}.widgets-code-frame{opacity:0;pointer-events:none;min-width:0;min-height:0;transition:opacity .55s var(--ease-out-soft,ease-out);flex-direction:column;grid-area:stack;display:flex}.widgets-code-frame.is-revealed{opacity:1}.widgets-code-frame.is-active{pointer-events:auto}.widgets-code-frame:first-child,.widgets-code-stack.is-resetting .widgets-code-frame{transition:none}.widgets-code-frame .code-block{flex-direction:column;height:100%;min-height:0;margin:0;display:flex}@media (prefers-reduced-motion:reduce){.widgets-code-frame{transition:none}}.code-typed{vertical-align:baseline;clip-path:inset(0 100% 0 0);animation-name:code-typed-reveal;animation-duration:var(--type-dur,.7s);animation-delay:var(--type-delay,0s);animation-timing-function:var(--type-steps,linear);animation-fill-mode:both;display:inline-block;position:relative}.code-typed:after{content:"";opacity:0;pointer-events:none;width:1.5px;animation-name:code-typed-cursor-on,code-typed-cursor-move,code-typed-cursor-off;animation-duration:.1s, var(--type-dur,.7s), .18s;animation-delay:var(--type-delay,0s), var(--type-delay,0s), calc(var(--type-delay,0s) + var(--type-dur,.7s) + 80ms);animation-timing-function:ease-out, var(--type-steps,linear), ease-out;background:currentColor;border-radius:1px;margin-left:-.75px;animation-fill-mode:forwards,forwards,forwards;position:absolute;top:8%;bottom:8%;left:0}.widgets-code-frame:not(.is-active) .code-typed,.widgets-code-frame:not(.is-active) .code-typed:after{animation-play-state:paused}@media (prefers-reduced-motion:reduce){.code-typed{clip-path:none!important;animation:none!important}.code-typed:after{display:none}}.showcase-blocks{flex-direction:column;gap:56px;display:flex}.showcase-block{flex-direction:column;gap:14px;display:flex}.showcase-block-heading{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.18em;color:var(--text-secondary);align-items:center;gap:12px;margin:0;font-size:.7rem;font-weight:600;display:flex}.showcase-block-heading:before{content:"";background:var(--section-color,var(--text-muted));opacity:.85;width:6px;height:6px;box-shadow:0 0 0 3px color-mix(in srgb, var(--section-color,var(--text-muted)) 14%, transparent);border-radius:50%;flex-shrink:0}@media (max-width:640px){.showcase-blocks{gap:44px}.showcase-block-heading{font-size:.64rem}}.widgets-dynamic-title{align-items:center;gap:14px;display:flex}.widgets-dynamic-title-glyph{width:40px;height:40px;color:var(--title-glyph-accent,var(--section-color,var(--text-primary)));background:color-mix(in srgb, var(--title-glyph-accent,var(--section-color,var(--text-primary))) 12%, transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--title-glyph-accent,var(--section-color,var(--text-primary))) 18%, transparent);border-radius:11px;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.widgets-dynamic-title-glyph svg{width:22px;height:22px}@media (max-width:540px){.widgets-dynamic-title{gap:10px}.widgets-dynamic-title-glyph{border-radius:9px;width:32px;height:32px}.widgets-dynamic-title-glyph svg{width:18px;height:18px}}@media (max-width:720px){.widgets-dynamic-stage{gap:14px}}@media (max-width:640px){.widgets-dynamic-stage:not(.is-centered):not(.is-code-only):not(.is-stacked):not(.is-terminal-variant){grid-template-rows:auto auto;grid-template-columns:minmax(0,1fr);row-gap:28px}.widgets-dynamic-stage:not(.is-centered):not(.is-code-only):not(.is-stacked):not(.is-terminal-variant) .widgets-dynamic-code-col{order:1}.widgets-dynamic-stage:not(.is-centered):not(.is-code-only):not(.is-stacked):not(.is-terminal-variant) .widgets-dynamic-phone-col{order:2;justify-self:center;width:min(70vw,220px)}.widgets-dynamic-stage:not(.is-centered):not(.is-code-only):not(.is-stacked):not(.is-terminal-variant) .widgets-dynamic-terminal-col{order:2;justify-self:center;width:100%}}@media (max-width:440px){.widgets-dynamic-stage{gap:10px}}.has-bottom-sub-nav .widgets-dynamic-title-glyph{border-radius:10px;width:38px;height:38px}.has-bottom-sub-nav .widgets-dynamic-title-glyph svg{width:20px;height:20px}.has-bottom-sub-nav .widgets-dynamic-title{gap:14px}.supabase-overview-demo,.supabase-database-demo,.supabase-auth-demo,.supabase-storage-demo,.supabase-realtime-demo,.supabase-rls-demo,.supabase-fn-demo,.rc-overview-demo,.rc-offerings-demo,.rc-paywall-demo,.rc-purchase-demo,.rc-entitlement-demo,.rc-restore-demo,.rc-webhook-demo{justify-content:stretch;align-items:stretch;padding:14px 12px}[class^=fl-nav-].widget-demo,[class^=fl-state-].widget-demo,[class^=fl-storage-].widget-demo,[class^=fl-dart-].widget-demo,[class^=fl-intro-].widget-demo,[class^=fl-test-].widget-demo,[class^=fl-publish-].widget-demo,[class^=fl-web-].widget-demo{justify-content:stretch;align-items:stretch;padding:12px 11px}.widgets-dynamic-stage.is-terminal-variant{grid-template-columns:1fr 1.4fr}.widgets-dynamic-stage.is-stacked{grid-template-rows:auto auto;grid-template-columns:minmax(0,1fr);gap:14px;width:100%;max-width:760px;margin:0 auto}.widgets-dynamic-stage.is-stacked .widgets-dynamic-code-col,.widgets-dynamic-stage.is-stacked .widgets-dynamic-terminal-col,.widgets-dynamic-stage.is-stacked .widgets-dynamic-phone-col{width:100%}.widgets-dynamic-stage.is-code-only{grid-template-columns:minmax(0,1fr);max-width:760px;margin:0 auto}.widgets-dynamic-terminal-col{min-width:0;display:flex}@media (max-width:720px){.widgets-dynamic-stage.is-terminal-variant:not(.is-stacked){grid-template-columns:1fr 1.2fr}}@media (max-width:540px){.widgets-dynamic-stage.is-terminal-variant:not(.is-stacked){grid-template:"code""terminal"/minmax(0,1fr);gap:12px}.widgets-dynamic-stage.is-terminal-variant:not(.is-stacked) .widgets-dynamic-code-col{grid-area:code}.widgets-dynamic-stage.is-terminal-variant:not(.is-stacked) .widgets-dynamic-terminal-col{grid-area:terminal}}.widgets-dynamic-stage.is-centered{max-width:920px;margin:0 auto;display:block}.widgets-dynamic-centered-col{justify-content:center;align-items:center;width:100%;padding:8px 0 0;display:flex}@media (max-width:640px){.widgets-dynamic-centered-col{padding:4px 0 0}}.widgets-dynamic-terminal-col .sb-tile{align-self:center}@keyframes widgets-dynamic-hero-enter{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes widgets-dynamic-cover-mark-enter{0%{opacity:0;transform:translateY(-4px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes widgets-dynamic-stage-enter{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes code-typed-reveal{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}@keyframes code-typed-cursor-move{0%{left:0}to{left:100%}}@keyframes code-typed-cursor-on{0%{opacity:0}to{opacity:.9}}@keyframes code-typed-cursor-off{0%{opacity:.9}to{opacity:0}}
