.community-surface{--app-bg:#f7f7f7;--app-bg-card:#fff;--app-bg-soft:#f7f7f7;--app-text:#1a1a1a;--app-text-md:#4b4b4b;--app-text-soft:#727272;--app-border:#f0f0f0;--app-border-strong:#e4e4e4;--app-card-bg:#fff;--app-card-bg-soft:#f7f7f7;--app-card-bg-muted:#f3f3f3;--app-card-border:#f0f0f0;--app-card-border-soft:#f7f7f7;--app-card-hover:#f7f7f7;--app-card-active:#f0f0f0;--app-card-shadow:0 1px 4px #0c0c0d0d;--cm-pill-bg:#fff;--cm-outline:transparent;--cm-field-bg:#f7f7f7;--cm-header-bg:#f8fcee;--cm-header-border:#b8d94e33;--cm-quote-bg:#f8fcee;--cm-hairline:#0c0c0d0d;--cm-rule:#f7f7f7;--cm-active-from:#1a1a1acc;--cm-active-to:#1a1a1a;--cm-on-active:#fff;--cm-accent:#b8d94e;--cm-on-accent:#1a1a1a;--cm-alert:#e98b73;--cm-rail-active:#5ecf81;--cm-wave-idle:#f3f3f3;--cm-fade:#fff;--cm-shadow-100:0 1px 2px #0c0c0d0d;--cm-shadow-200:0 1px 2px #0c0c0d1a,0 1px 2px #0c0c0d0d;--cm-shadow-card:0 1px 4px #0c0c0d0d;--cm-swatch-1:#b8a7d9;--cm-swatch-2:#e76f00;--cm-swatch-3:#77bc1f;--cm-swatch-4:#5b8def;--cm-swatch-5:#e98b73;--cm-swatch-6:#2bb3a6;--cm-brand-tile:#000;--cm-unresolved:#ff8282;--cm-card-rule:#f2f2f2;--cm-shadow-doubt:1px 1px 6px #0c0c0d0f;--cm-code-bg:#f4f7fe;--cm-code-border:#8aadf41a;--cm-code-fade:#eaf0fd;--cm-code-text:#1a1a1a;--cm-code-keyword:#ff1f75;--cm-code-type:#5c11e8;--cm-code-string:#13c87c;--cm-code-comment:#9a9a9a;--cm-code-link:#4a90e2}.dark .community-surface{--app-bg:#0b0b0c;--app-bg-card:#17171a;--app-bg-soft:#1f1f23;--app-text:#e5e7eb;--app-text-md:#c4c4c8;--app-text-soft:#a1a1aa;--app-border:#2a2a2e;--app-border-strong:#3a3a40;--app-card-bg:#17171a;--app-card-bg-soft:#1f1f23;--app-card-bg-muted:#1f1f23;--app-card-border:#2a2a2e;--app-card-border-soft:#222226;--app-card-hover:#1f1f23;--app-card-active:#26262b;--app-card-shadow:0 1px 4px #00000080;--cm-pill-bg:#17171a;--cm-outline:#2a2a2e;--cm-field-bg:#1f1f23;--cm-header-bg:#1f1f23;--cm-header-border:#2a2a2e;--cm-quote-bg:#1f1f23;--cm-hairline:#2a2a2e;--cm-rule:#2a2a2e;--cm-active-from:#303633d9;--cm-active-to:#303633;--cm-wave-idle:#2a2a2e;--cm-fade:#17171a;--cm-card-rule:#2a2a2e;--cm-shadow-doubt:0 1px 6px #0006;--cm-code-bg:#141821;--cm-code-border:#8aadf424;--cm-code-fade:#141821;--cm-code-text:#e5e7eb;--cm-code-keyword:#ff6aa2;--cm-code-type:#a98bff;--cm-code-string:#3ddc97;--cm-code-comment:#7a7a85;--cm-code-link:#7fb2f0}
.community-surface.code-lab-surface{--app-bg:#f3f4ec;--app-bg-card:#fff;--app-bg-soft:#f9faf5;--app-text:#142019;--app-text-md:#435047;--app-text-soft:#727d74;--app-border:#e4e8dc;--app-border-strong:#d2d8c8;--app-card-bg:#fff;--app-card-bg-soft:#f9faf5;--app-card-bg-muted:#f0f3ea;--app-card-border:#e4e8dc;--app-card-hover:#f6f8f1;--app-card-active:#e9ede1;--app-primary:#166534;--app-on-primary:#fff;--app-card-shadow:0 1px 2px #1420190a,0 14px 34px -20px #14201938;--clx-ink:#142019;--clx-on-ink:#fff;--clx-forest:#134e2e;--clx-on-forest:#fff;--clx-forest-soft:#e2efe5;--clx-sun:#ffd23a;--clx-on-sun:#142019;--clx-sun-soft:#fff6d1;--clx-lime:#c5e85b;--clx-on-lime:#142019;--clx-lime-soft:#f1f9d9;--clx-tangerine:#ff9f2e;--clx-on-tangerine:#142019;--clx-tangerine-soft:#ffeedb;--clx-ember:#f2621f;--clx-on-ember:#fff;--clx-ember-soft:#ffe6da;--clx-mint:#2fbf62;--clx-mint-soft:#dcf7e4;--clx-pill:#134e2e;--clx-on-pill:#fff;--clx-tray:#eaeee2;--clx-tray-active:#fff;--clx-track:#ecefe5}.dark .community-surface.code-lab-surface{--app-bg:#0b0f0c;--app-bg-card:#141a16;--app-bg-soft:#19201b;--app-text:#eef3ec;--app-text-md:#c6cfc6;--app-text-soft:#8f9a91;--app-border:#253028;--app-border-strong:#344138;--app-card-bg:#141a16;--app-card-bg-soft:#19201b;--app-card-bg-muted:#1d251f;--app-card-border:#253028;--app-card-hover:#1b221d;--app-card-active:#253028;--app-primary:#6ee7a0;--app-on-primary:#0b1a10;--app-card-shadow:0 1px 2px #00000080,0 18px 40px -22px #000c;--clx-ink:#eef3ec;--clx-on-ink:#0b1a10;--clx-forest:#17603a;--clx-forest-soft:#12261a;--clx-sun-soft:#2a2610;--clx-lime-soft:#1f2a10;--clx-tangerine-soft:#2e1f0c;--clx-ember-soft:#34190c;--clx-mint-soft:#0f2a1a;--clx-pill:#6ee7a0;--clx-on-pill:#0b1a10;--clx-tray:#1d251f;--clx-tray-active:#2c382f;--clx-track:#222b24}.code-lab-surface .tone-forest{--tone:var(--clx-forest);--on-tone:var(--clx-on-forest);--tone-soft:var(--clx-forest-soft);--blob-a:#1a6a3f;--blob-b:#0d3a21;--blob-c:#2a7d4b}.code-lab-surface .tone-sun{--tone:var(--clx-sun);--on-tone:var(--clx-on-sun);--tone-soft:var(--clx-sun-soft);--blob-a:#ffe27d;--blob-b:#f6c11c;--blob-c:#ffeaa3}.code-lab-surface .tone-lime{--tone:var(--clx-lime);--on-tone:var(--clx-on-lime);--tone-soft:var(--clx-lime-soft);--blob-a:#d8f08a;--blob-b:#acd63f;--blob-c:#e4f5a9}.code-lab-surface .tone-tangerine{--tone:var(--clx-tangerine);--on-tone:var(--clx-on-tangerine);--tone-soft:var(--clx-tangerine-soft);--blob-a:#ffb965;--blob-b:#f5850f;--blob-c:#ffcb8a}.code-lab-surface .tone-ember{--tone:var(--clx-ember);--on-tone:var(--clx-on-ember);--tone-soft:var(--clx-ember-soft);--blob-a:#f6814b;--blob-b:#d44c10;--blob-c:#f89a6c}.dark .code-lab-surface .tone-forest{--blob-a:#1c7146;--blob-b:#0f4628;--blob-c:#258050}.code-lab-surface .clx-showcase{isolation:isolate;color:var(--on-tone);background-color:var(--tone);position:relative;overflow:hidden}.code-lab-surface .clx-stripes{background-image:repeating-linear-gradient(-45deg,var(--app-border-strong)0 2px,transparent 2px 7px)}.code-lab-surface .clx-liquid{isolation:isolate;position:relative;overflow:hidden}.code-lab-surface .clx-liquid:before,.code-lab-surface .clx-liquid:after{content:"";z-index:-1;aspect-ratio:1;pointer-events:none;background:currentColor;width:max(220%,16rem);transition:top .7s cubic-bezier(.2,.7,.2,1);animation:7s linear infinite paused clx-wave;position:absolute;top:110%;left:50%;translate:-50%}.code-lab-surface .clx-liquid:before{opacity:.14;border-radius:43%}.code-lab-surface .clx-liquid:after{opacity:.1;border-radius:38%;animation-duration:11s;animation-direction:reverse}.code-lab-surface .clx-liquid:is(:hover,:focus-visible):not(:disabled):before{animation-play-state:running;top:38%}.code-lab-surface .clx-liquid:is(:hover,:focus-visible):not(:disabled):after{animation-play-state:running;top:30%}@media (hover:none){.code-lab-surface .clx-liquid:hover:not(:focus-visible):before,.code-lab-surface .clx-liquid:hover:not(:focus-visible):after{animation-play-state:paused;top:110%}}@keyframes clx-wave{to{rotate:360deg}}@media (prefers-reduced-motion:reduce){.code-lab-surface .clx-liquid:before,.code-lab-surface .clx-liquid:after{transition:none;animation:none}}