:root{--font-family: "Manrope", system-ui, sans-serif;--font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--color-primary-900: #0C5C4A;--color-primary-800: #107B62;--color-primary-700: #16A17D;--color-primary-600: #1CC59A;--color-primary-500: #32D2A0;--color-primary-400: #62DEB8;--color-primary-300: #8CEAD0;--color-primary-200: #B5F5E4;--color-primary-100: #E0FBF4;--color-primary-50: #F3FEFA;--color-secondary-900: #00063D;--color-secondary-800: #010A57;--color-secondary-700: #020D73;--color-secondary-600: #060C77;--color-secondary-500: #031090;--color-secondary-400: #2A4CCB;--color-secondary-300: #4D66B3;--color-secondary-200: #8C91D2;--color-secondary-100: #D5D8F0;--color-secondary-50: #F0F1FA;--color-accent-900: #FFF6D6;--color-accent-800: #FEEB9C;--color-accent-700: #F6D87A;--color-accent-600: #E0BF4E;--color-grey-900: #1A1A1A;--color-grey-800: #2E2E2E;--color-grey-700: #4A4A4A;--color-grey-600: #6E6E6E;--color-grey-500: #A2A2A2;--color-grey-400: #C8C8C8;--color-grey-300: #E0E0E0;--color-grey-200: #EFEFEF;--color-grey-100: #F7F7F7;--color-grey-50: #FCFCFC;--color-stroke-divider: #E6E6E6;--color-soft-outline: #EDEDED;--color-background: #FFFFFF;--color-background-secondary: #F7F7F7;--color-code-block-bg: #1A1A1A;--color-header-bg: rgba(255, 255, 255, .85);--color-btn-primary-hover: #2E2E2E;--color-text-primary: #1A1A1A;--color-text-secondary: #4A4A4A;--color-text-tertiary: #676767;--color-text-disabled: #9E9E9E;--color-semantic-primary-600: #16A17D;--color-semantic-primary-500: #32D2A0;--color-semantic-primary-100: #E0FBF4;--color-semantic-secondary-600: #020D73;--color-semantic-secondary-500: #060C77;--color-semantic-info-600: #3A62DB;--color-semantic-info-500: #97C4FF;--color-semantic-info-100: #E4F1FF;--color-semantic-success-600: #0A8A3D;--color-semantic-success-500: #27C769;--color-semantic-success-100: #F0FFF8;--color-semantic-warning-600: #C67A00;--color-semantic-warning-500: #FFB73C;--color-semantic-warning-100: #FFF7EC;--color-semantic-error-600: #B3261E;--color-semantic-error-500: #DC3A32;--color-semantic-error-100: #FDF2F1;--color-gis-blue: #3A7DFF;--color-gis-green: #6BD36E;--color-gis-yellow: #F2C94C;--color-gis-orange: #FF8A3C;--color-gis-red: #EB5757;--color-gis-purple: #9B51E0;--color-gis-pink: #EB5B87;--color-gis-teal: #2AD1C8;--color-chip-blue-green-600: #0A7464;--color-chip-blue-green-500: #16A08B;--color-chip-blue-green-100: #D6F4EE;--color-chip-aqua-600: #0E6F8C;--color-chip-aqua-500: #26A8D1;--color-chip-aqua-100: #DFF4FB;--color-chip-sky-blue-600: #1B4FA1;--color-chip-sky-blue-500: #3C87F2;--color-chip-sky-blue-100: #E3EEFF;--color-chip-lavender-600: #5640A6;--color-chip-lavender-500: #8C72ED;--color-chip-lavender-100: #F0E8FF;--color-chip-purple-magenta-600: #8A1F6B;--color-chip-purple-magenta-500: #C54CA0;--color-chip-purple-magenta-100: #FBE6F5;--color-chip-coral-600: #A9422C;--color-chip-coral-500: #E06742;--color-chip-coral-100: #FFE8DE;--color-chip-orange-600: #A86405;--color-chip-orange-500: #E28F18;--color-chip-orange-100: #FFEED6;--color-chip-yellow-green-600: #677A12;--color-chip-yellow-green-500: #9FBF1F;--color-chip-yellow-green-100: #F3F9D9;--color-chip-forest-green-600: #0C6A2B;--color-chip-forest-green-500: #2DAA51;--color-chip-forest-green-100: #E1F7E9;--color-chip-warm-grey-600: #4E4E4E;--color-chip-warm-grey-500: #7A7A7A;--color-chip-warm-grey-100: #EFEFEF;--color-chip-cool-grey-600: #4A5560;--color-chip-cool-grey-500: #768593;--color-chip-cool-grey-100: #EEF2F5;--heading-display-xl-weight: 800;--heading-display-xl-size: 72px;--heading-display-xl-line-height: 98px;--heading-display-xl-letter-spacing: -.04em;--heading-display-l-weight: 800;--heading-display-l-size: 60px;--heading-display-l-line-height: 80px;--heading-display-l-letter-spacing: -.04em;--heading-h1-weight: 800;--heading-h1-size: 48px;--heading-h1-line-height: 64px;--heading-h1-letter-spacing: -.04em;--heading-h2-weight: 700;--heading-h2-size: 40px;--heading-h2-line-height: 52px;--heading-h2-letter-spacing: -.03em;--heading-h3-weight: 700;--heading-h3-size: 32px;--heading-h3-line-height: 44px;--heading-h3-letter-spacing: -.02em;--heading-h4-weight: 700;--heading-h4-size: 28px;--heading-h4-line-height: 38px;--heading-h4-letter-spacing: -.02em;--heading-h5-weight: 600;--heading-h5-size: 24px;--heading-h5-line-height: 34px;--heading-h5-letter-spacing: -.005em;--heading-h6-weight: 600;--heading-h6-size: 20px;--heading-h6-line-height: 28px;--heading-h6-letter-spacing: -.005em;--heading-h7-weight: 600;--heading-h7-size: 18px;--heading-h7-line-height: 28px;--heading-h7-letter-spacing: -.005em;--heading-mobile-display-xl-weight: 800;--heading-mobile-display-xl-size: 48px;--heading-mobile-display-xl-line-height: 58px;--heading-mobile-display-xl-letter-spacing: -.03em;--heading-mobile-display-l-weight: 800;--heading-mobile-display-l-size: 40px;--heading-mobile-display-l-line-height: 50px;--heading-mobile-display-l-letter-spacing: -.03em;--heading-mobile-h1-weight: 800;--heading-mobile-h1-size: 32px;--heading-mobile-h1-line-height: 40px;--heading-mobile-h1-letter-spacing: -.03em;--heading-mobile-h2-weight: 700;--heading-mobile-h2-size: 28px;--heading-mobile-h2-line-height: 36px;--heading-mobile-h2-letter-spacing: -.03em;--heading-mobile-h3-weight: 700;--heading-mobile-h3-size: 24px;--heading-mobile-h3-line-height: 32px;--heading-mobile-h3-letter-spacing: -.02em;--heading-mobile-h4-weight: 700;--heading-mobile-h4-size: 22px;--heading-mobile-h4-line-height: 30px;--heading-mobile-h4-letter-spacing: -.02em;--heading-mobile-h5-weight: 600;--heading-mobile-h5-size: 20px;--heading-mobile-h5-line-height: 28px;--heading-mobile-h5-letter-spacing: -.005em;--heading-mobile-h6-weight: 600;--heading-mobile-h6-size: 18px;--heading-mobile-h6-line-height: 26px;--heading-mobile-h6-letter-spacing: -.005em;--heading-mobile-h7-weight: 600;--heading-mobile-h7-size: 16px;--heading-mobile-h7-line-height: 26px;--heading-mobile-h7-letter-spacing: -.005em;--body-xl-weight: 500;--body-xl-size: 22px;--body-xl-line-height: 32px;--body-xl-letter-spacing: -.02em;--body-l-weight: 500;--body-l-size: 20px;--body-l-line-height: 30px;--body-l-letter-spacing: -.02em;--body-m-weight: 500;--body-m-size: 18px;--body-m-line-height: 28px;--body-m-letter-spacing: 0;--body-s-weight: 600;--body-s-size: 16px;--body-s-line-height: 24px;--body-s-letter-spacing: 0;--body-xs-regular-weight: 400;--body-xs-regular-size: 14px;--body-xs-regular-line-height: 20px;--body-xs-regular-letter-spacing: 0;--body-xs-semibold-weight: 600;--body-xs-semibold-size: 14px;--body-xs-semibold-line-height: 20px;--body-xs-semibold-letter-spacing: 0;--body-xxs-regular-weight: 400;--body-xxs-regular-size: 13px;--body-xxs-regular-line-height: 18px;--body-xxs-regular-letter-spacing: 0;--body-xxs-semibold-weight: 600;--body-xxs-semibold-size: 13px;--body-xxs-semibold-line-height: 18px;--body-xxs-semibold-letter-spacing: 0;--body-xxxs-regular-weight: 400;--body-xxxs-regular-size: 12px;--body-xxxs-regular-line-height: 18px;--body-xxxs-regular-letter-spacing: 0;--body-xxxs-medium-weight: 500;--body-xxxs-medium-size: 12px;--body-xxxs-medium-line-height: 18px;--body-xxxs-medium-letter-spacing: 0;--body-micro-medium-weight: 500;--body-micro-medium-size: 11px;--body-micro-medium-line-height: 16px;--body-micro-medium-letter-spacing: 0;--body-mobile-xl-weight: 500;--body-mobile-xl-size: 20px;--body-mobile-xl-line-height: 28px;--body-mobile-xl-letter-spacing: -.02em;--body-mobile-l-weight: 500;--body-mobile-l-size: 18px;--body-mobile-l-line-height: 26px;--body-mobile-l-letter-spacing: -.02em;--body-mobile-m-weight: 500;--body-mobile-m-size: 16px;--body-mobile-m-line-height: 24px;--body-mobile-m-letter-spacing: -.01em;--body-mobile-s-weight: 500;--body-mobile-s-size: 15px;--body-mobile-s-line-height: 22px;--body-mobile-s-letter-spacing: -.01em;--body-mobile-xs-regular-weight: 400;--body-mobile-xs-regular-size: 14px;--body-mobile-xs-regular-line-height: 20px;--body-mobile-xs-regular-letter-spacing: -.01em;--body-mobile-xs-medium-weight: 500;--body-mobile-xs-medium-size: 14px;--body-mobile-xs-medium-line-height: 20px;--body-mobile-xs-medium-letter-spacing: -.01em;--body-mobile-xxs-regular-weight: 400;--body-mobile-xxs-regular-size: 13px;--body-mobile-xxs-regular-line-height: 18px;--body-mobile-xxs-regular-letter-spacing: -.01em;--body-mobile-xxs-medium-weight: 500;--body-mobile-xxs-medium-size: 13px;--body-mobile-xxs-medium-line-height: 18px;--body-mobile-xxs-medium-letter-spacing: -.01em;--body-mobile-xxxs-regular-weight: 400;--body-mobile-xxxs-regular-size: 12px;--body-mobile-xxxs-regular-line-height: 18px;--body-mobile-xxxs-regular-letter-spacing: -.01em;--body-mobile-xxxs-medium-weight: 500;--body-mobile-xxxs-medium-size: 12px;--body-mobile-xxxs-medium-line-height: 18px;--body-mobile-xxxs-medium-letter-spacing: -.01em;--body-mobile-micro-medium-weight: 500;--body-mobile-micro-medium-size: 11px;--body-mobile-micro-medium-line-height: 16px;--body-mobile-micro-medium-letter-spacing: -.01em;--gis-micro-s-weight: 500;--gis-micro-s-size: 11px;--gis-micro-s-line-height: 14px;--gis-micro-s-letter-spacing: -.01em;--gis-micro-xs-weight: 500;--gis-micro-xs-size: 10px;--gis-micro-xs-line-height: 13px;--gis-micro-xs-letter-spacing: -.01em;--gis-micro-xss-weight: 500;--gis-micro-xss-size: 9px;--gis-micro-xss-line-height: 12px;--gis-micro-xss-letter-spacing: -.01em;--gis-micro-ui-weight: 600;--gis-micro-ui-size: 8px;--gis-micro-ui-line-height: 11px;--gis-micro-ui-letter-spacing: -.01em;--gis-mobile-micro-s-weight: 500;--gis-mobile-micro-s-size: 10px;--gis-mobile-micro-s-line-height: 14px;--gis-mobile-micro-s-letter-spacing: -.01em;--gis-mobile-micro-xs-weight: 500;--gis-mobile-micro-xs-size: 9px;--gis-mobile-micro-xs-line-height: 12px;--gis-mobile-micro-xs-letter-spacing: -.01em;--gis-mobile-micro-xss-weight: 500;--gis-mobile-micro-xss-size: 8px;--gis-mobile-micro-xss-line-height: 11px;--gis-mobile-micro-xss-letter-spacing: -.01em;--gis-mobile-micro-ui-weight: 600;--gis-mobile-micro-ui-size: 7px;--gis-mobile-micro-ui-line-height: 10px;--gis-mobile-micro-ui-letter-spacing: -.01em;--grid-desktop-xl-width: 1536px;--grid-desktop-xl-columns: 12;--grid-desktop-xl-gutter: 32px;--grid-desktop-xl-content-width: 1424px;--grid-desktop-l-width: 1440px;--grid-desktop-l-columns: 12;--grid-desktop-l-gutter: 32px;--grid-desktop-l-content-width: 1216px;--grid-desktop-width: 1280px;--grid-desktop-columns: 12;--grid-desktop-gutter: 32px;--grid-desktop-content-width: 1216px;--grid-tablet-width: 768px;--grid-tablet-columns: 6;--grid-tablet-gutter: 32px;--grid-tablet-content-width: 704px;--grid-mobile-width: 375px;--grid-mobile-columns: 4;--grid-mobile-gutter: 16px;--grid-mobile-content-width: 343px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 28px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--space-20: 80px;--space-24: 96px;--space-32: 128px;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 24px;--radius-full: 100px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1)}[data-theme=dark]{--color-background: var(--color-grey-900);--color-background-secondary: var(--color-grey-800);--color-text-primary: #F0F0F0;--color-text-secondary: #B0B0B0;--color-text-tertiary: #888888;--color-text-disabled: #5E5E5E;--color-stroke-divider: var(--color-grey-700);--color-soft-outline: var(--color-grey-700);--color-code-block-bg: #111111;--color-header-bg: rgba(26, 26, 26, .75);--color-btn-primary-hover: #C8C8C8}*,*:before,*:after{box-sizing:border-box}html,body{overflow-x:hidden;max-width:100vw}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{margin:0;font-family:var(--font-family);color:var(--color-text-primary);background:var(--color-background);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}img{max-width:100%;display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}.container{width:100%;max-width:var(--grid-desktop-content-width);margin:0 auto;padding-left:var(--space-6);padding-right:var(--space-6)}@media (max-width: 768px){.container{padding-left:var(--space-4);padding-right:var(--space-4)}}.site-header{position:sticky;top:0;z-index:50;background:var(--color-header-bg);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--color-stroke-divider)}.site-header__inner{display:flex;align-items:center;justify-content:space-between;height:64px}.brand{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:var(--heading-h6-weight);font-size:var(--heading-h6-size);letter-spacing:var(--heading-h6-letter-spacing)}.brand__name{color:var(--color-text-primary);font-family:Manrope,sans-serif;font-weight:800}.brand__name em{font-style:normal;color:var(--color-primary-700)}.site-nav{display:flex;gap:var(--space-8);font-weight:var(--body-xs-semibold-weight);font-size:var(--body-xs-semibold-size);color:var(--color-text-secondary)}.site-nav a:hover{color:var(--color-text-primary)}@media (max-width: 768px){.site-nav{display:none}}.site-header__right{display:flex;align-items:center;gap:var(--space-6)}.theme-toggle{display:inline-grid;place-items:center;width:36px;height:36px;background:transparent;color:var(--color-text-secondary);border:1px solid var(--color-stroke-divider);border-radius:var(--radius-full);transition:color .15s ease,background .15s ease,border-color .15s ease}.theme-toggle:hover{color:var(--color-text-primary);background:var(--color-background-secondary)}.theme-toggle__icon{width:16px;height:16px}[data-theme=light] .theme-toggle__icon--sun,[data-theme=dark] .theme-toggle__icon--moon{display:none}.hero{position:relative;padding-top:var(--space-24);padding-bottom:var(--space-24);overflow:hidden}.hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,var(--color-stroke-divider) 1px,transparent 0);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,black 30%,transparent 80%);mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,black 30%,transparent 80%);pointer-events:none}.hero__inner{position:relative}.hero__eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);background:var(--color-primary-100);color:var(--color-primary-800);font-weight:var(--body-xs-semibold-weight);font-size:var(--body-xs-semibold-size);letter-spacing:.01em}.hero__eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--color-primary-700);box-shadow:0 0 0 4px #16a17d2e}.hero__title{margin:var(--space-6) 0 var(--space-5);font-weight:var(--heading-display-xl-weight);font-size:var(--heading-display-xl-size);line-height:var(--heading-display-xl-line-height);letter-spacing:var(--heading-display-xl-letter-spacing);max-width:14ch}.hero__title em{font-style:normal;color:var(--color-primary-700)}.hero__sub{margin:0 0 var(--space-10);max-width:42ch;font-weight:var(--body-l-weight);font-size:var(--body-l-size);line-height:var(--body-l-line-height);letter-spacing:var(--body-l-letter-spacing);color:var(--color-text-secondary)}.hero__layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.2fr);gap:var(--space-12);align-items:center}.hero__layout>*{min-width:0}@media (max-width: 960px){.hero__layout{grid-template-columns:1fr;gap:var(--space-10)}}.hero__cta{display:inline-flex;align-items:center;gap:var(--space-2)}.hero__media{position:relative;margin:0;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-xl);border:1px solid var(--color-stroke-divider);background:var(--color-background-secondary);aspect-ratio:16 / 10}.hero__media img{width:100%;height:100%;object-fit:cover;display:block}.hero__media .pin{position:absolute;top:var(--space-4);left:var(--space-4);display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-background);backdrop-filter:blur(8px);border-radius:var(--radius-full);font-weight:var(--body-xxs-semibold-weight);font-size:var(--body-xxs-semibold-size);color:var(--color-text-primary)}.hero__media .pin svg{width:14px;height:14px;color:var(--color-primary-700)}.hero__url{margin-top:var(--space-5)}.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-radius:var(--radius-full);border:1px solid transparent;font-weight:var(--body-s-weight);font-size:var(--body-s-size);line-height:1;transition:transform .15s ease,background .15s ease,color .15s ease,border-color .15s ease}.btn:active{transform:translateY(1px)}.btn--primary{background:var(--color-text-primary);color:var(--color-background)}.btn--primary:hover{background:var(--color-btn-primary-hover)}.btn--ghost{background:transparent;color:var(--color-text-primary);border-color:var(--color-stroke-divider)}.btn--ghost:hover{background:var(--color-background-secondary)}.btn svg{width:16px;height:16px}.code{display:block;margin:0;font-family:var(--font-family-mono);font-size:var(--body-xs-regular-size);line-height:var(--body-xl-line-height);background:var(--color-code-block-bg);color:var(--color-grey-100);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);overflow-x:auto;white-space:pre}.code--inline{display:inline-block;padding:2px 6px;font-size:var(--body-xxs-regular-size);background:var(--color-background-secondary);color:var(--color-text-primary);border-radius:var(--radius-xs)}.code .tk-path{color:var(--color-primary-300)}.code .tk-key{color:var(--color-secondary-300)}.code .tk-num{color:var(--color-accent-700)}.code .tk-str{color:var(--color-primary-300)}.code .tk-com{color:var(--color-grey-500)}.code-with-copy{position:relative}.code-with-copy .copy-btn{position:absolute;top:var(--space-3);right:var(--space-3);padding:var(--space-2) var(--space-3);background:#ffffff0f;color:var(--color-grey-200);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);font-size:var(--body-xxxs-medium-size);font-weight:var(--body-xxs-semibold-weight);display:inline-flex;align-items:center;gap:6px;transition:background .15s ease,color .15s ease}.code-with-copy .copy-btn:hover{background:#ffffff1f;color:#fff}.code-with-copy .copy-btn svg{width:12px;height:12px}.code-with-copy .copy-btn.is-copied{color:var(--color-primary-400)}.section{padding-top:var(--space-24);padding-bottom:var(--space-24)}.section+.section{border-top:1px solid var(--color-stroke-divider)}.section__head{max-width:56ch;margin-bottom:var(--space-12)}.section__kicker{display:inline-block;font-family:var(--font-family-mono);font-size:var(--body-xxxs-medium-size);letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary-700);margin-bottom:var(--space-3)}.section__title{margin:0 0 var(--space-4);font-weight:var(--heading-h2-weight);font-size:var(--heading-h2-size);line-height:var(--heading-h2-line-height);letter-spacing:var(--heading-h2-letter-spacing)}.section__lede{margin:0;font-weight:var(--body-l-weight);font-size:var(--body-l-size);line-height:var(--body-l-line-height);letter-spacing:var(--body-l-letter-spacing);color:var(--color-text-secondary)}.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}.steps>*{min-width:0}@media (max-width: 880px){.steps{grid-template-columns:minmax(0,1fr)}}.step{border:1px solid var(--color-stroke-divider);background:var(--color-background);border-radius:var(--radius-xl);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-4);min-width:0;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.step>*{min-width:0;max-width:100%}.step:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--color-grey-300)}.step__icon{width:44px;height:44px;border-radius:var(--radius-md);background:var(--color-primary-100);color:var(--color-primary-800);display:grid;place-items:center}.step__icon svg{width:22px;height:22px}.step__num{font-family:var(--font-family-mono);font-size:var(--body-xxxs-medium-size);color:var(--color-text-tertiary);letter-spacing:.08em}.step__title{margin:0;font-weight:var(--heading-h5-weight);font-size:var(--heading-h5-size);line-height:var(--heading-h5-line-height);letter-spacing:var(--heading-h5-letter-spacing)}.step__detail{margin:0;color:var(--color-text-secondary);font-weight:var(--body-xs-regular-weight);font-size:var(--body-xs-regular-size);line-height:var(--body-xs-regular-line-height)}.step__demo{margin-top:auto;padding:var(--space-3) var(--space-4);background:var(--color-background-secondary);border:1px dashed var(--color-stroke-divider);border-radius:var(--radius-md);font-family:var(--font-family-mono);font-size:var(--body-xxxs-medium-size);color:var(--color-text-secondary);overflow-x:auto;white-space:nowrap}.step__demo b{color:var(--color-primary-800);font-weight:var(--heading-h4-weight)}.step__demo img{width:100%;border-radius:var(--radius-sm);margin-top:var(--space-2)}.playground{display:grid;grid-template-columns:380px minmax(0,1fr);gap:var(--space-10);align-items:start}.playground>*{min-width:0}@media (max-width: 1024px){.playground{grid-template-columns:minmax(0,1fr)}}.controls{display:flex;flex-direction:column;gap:var(--space-6);border:1px solid var(--color-stroke-divider);border-radius:var(--radius-xl);padding:var(--space-6);background:var(--color-background)}.field{display:flex;flex-direction:column;gap:var(--space-2)}.field__label{font-family:var(--font-family-mono);font-size:var(--body-micro-medium-size);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-tertiary)}.field__row{display:flex;gap:var(--space-3)}.input,.select{width:100%;appearance:none;-webkit-appearance:none;font:inherit;font-size:var(--body-xs-semibold-size);font-weight:var(--body-xs-regular-weight);padding:var(--space-3) var(--space-4);border:1px solid var(--color-stroke-divider);border-radius:var(--radius-sm);background:var(--color-background);color:var(--color-text-primary);transition:border-color .15s ease,box-shadow .15s ease}.input:focus,.select:focus{outline:none;border-color:var(--color-primary-700);box-shadow:0 0 0 3px var(--color-primary-100)}.select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234A4A4A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}.pills{display:flex;gap:var(--space-2);flex-wrap:wrap}.pill{appearance:none;border:1px solid var(--color-stroke-divider);background:var(--color-background);color:var(--color-text-secondary);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);font-size:var(--body-xs-semibold-size);font-weight:var(--body-xs-semibold-weight);transition:background .15s ease,color .15s ease,border-color .15s ease}.pill:hover{color:var(--color-text-primary)}.pill[aria-pressed=true]{background:var(--color-text-primary);color:var(--color-background);border-color:var(--color-text-primary)}.style-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}.style-card{appearance:none;border:1px solid var(--color-stroke-divider);border-radius:var(--radius-md);padding:var(--space-2);background:var(--color-background);display:flex;flex-direction:column;gap:var(--space-2);align-items:stretch;transition:border-color .15s ease,transform .15s ease}.style-card:hover{border-color:var(--color-grey-400)}.style-card[aria-pressed=true]{border-color:var(--color-text-primary);box-shadow:0 0 0 2px var(--color-text-primary)}.style-card__thumb{display:block;aspect-ratio:1 / 1;border-radius:var(--radius-sm);overflow:hidden}.style-card__thumb svg{width:100%;height:100%;display:block}.style-card__name{font-size:var(--body-xxs-semibold-size);font-weight:var(--body-xxs-semibold-weight);text-align:left;color:var(--color-text-primary)}.preview{display:flex;flex-direction:column;gap:var(--space-4)}.preview__frame{position:relative;background:var(--color-background-secondary);border:1px solid var(--color-stroke-divider);border-radius:var(--radius-xl);overflow:hidden;min-height:320px;display:grid;place-items:center}.preview__frame img{display:block;max-width:100%;max-height:70vh}.preview__meta{position:absolute;bottom:var(--space-3);left:var(--space-3);display:inline-flex;gap:var(--space-2)}.preview__meta span{background:#1a1a1ad9;color:#fff;font-family:var(--font-family-mono);font-size:var(--body-micro-medium-size);padding:4px 8px;border-radius:var(--radius-xs);letter-spacing:.04em}.preview__actions{display:flex;gap:var(--space-2);flex-wrap:wrap}.tabs{border:1px solid var(--color-stroke-divider);border-radius:var(--radius-xl);overflow:hidden;background:var(--color-background)}.tabs__list{display:flex;background:var(--color-background-secondary);border-bottom:1px solid var(--color-stroke-divider);overflow-x:auto}.tabs__btn{background:transparent;border:0;padding:var(--space-4) var(--space-5);font-family:var(--font-family-mono);font-size:var(--body-xxxs-medium-size);letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-tertiary);border-bottom:2px solid transparent;transition:color .15s ease,border-color .15s ease}.tabs__btn:hover{color:var(--color-text-primary)}.tabs__btn[aria-selected=true]{color:var(--color-text-primary);border-bottom-color:var(--color-primary-700)}.tabs__panel{padding:0;position:relative}.tabs__panel .code{border-radius:0}.tabs__panel pre[hidden]{display:none}.api-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-10)}.api-grid>*{min-width:0}@media (max-width: 960px){.api-grid{grid-template-columns:minmax(0,1fr)}}.params-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.params{width:100%;border-collapse:collapse;font-size:var(--body-xs-regular-size)}.params th,.params td{text-align:left;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-stroke-divider);vertical-align:top}.params th{font-family:var(--font-family-mono);font-size:var(--body-micro-medium-size);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-tertiary);font-weight:var(--body-xxs-semibold-weight)}.params td code{font-family:var(--font-family-mono);font-size:var(--body-xxs-regular-size);color:var(--color-secondary-700);background:var(--color-secondary-50);padding:1px 6px;border-radius:var(--radius-xs)}.params td:first-child code{color:var(--color-primary-800);background:var(--color-primary-100)}.examples{display:flex;flex-direction:column;gap:var(--space-5)}.example{display:grid;grid-template-columns:160px 1fr;gap:var(--space-4);align-items:center;border:1px solid var(--color-stroke-divider);border-radius:var(--radius-lg);padding:var(--space-3);background:var(--color-background)}.example img{width:100%;aspect-ratio:16 / 10;object-fit:cover;border-radius:var(--radius-sm);background:var(--color-background-secondary)}.example__url{font-family:var(--font-family-mono);font-size:var(--body-xxxs-medium-size);color:var(--color-text-secondary);word-break:break-all}.example__url b{color:var(--color-text-primary);font-weight:var(--body-xxs-semibold-weight)}.site-footer{border-top:1px solid var(--color-stroke-divider);background:var(--color-background-secondary);padding:var(--space-16) 0 var(--space-10)}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-10)}@media (max-width: 768px){.footer-grid{grid-template-columns:1fr;gap:var(--space-8)}}.footer-grid h4{margin:0 0 var(--space-3);font-family:var(--font-family-mono);font-size:var(--body-micro-medium-size);letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-tertiary);font-weight:var(--body-xxs-semibold-weight)}.footer-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-2)}.footer-grid a{color:var(--color-text-secondary);font-size:var(--body-xs-regular-size)}.footer-grid a:hover{color:var(--color-text-primary)}.footer__brand .brand{margin-bottom:var(--space-3)}.footer__brand p{margin:0;max-width:36ch;color:var(--color-text-secondary);font-size:var(--body-xs-regular-size);line-height:var(--body-xs-regular-line-height)}.footer__legal{margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid var(--color-stroke-divider);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);font-size:var(--body-xxs-regular-size);color:var(--color-text-tertiary)}.legal{max-width:72ch}.legal h1.section__title{margin-bottom:var(--space-8)}.legal h2{margin:var(--space-10) 0 var(--space-3);font-weight:var(--heading-h5-weight);font-size:var(--heading-h5-size);line-height:var(--heading-h5-line-height);letter-spacing:var(--heading-h5-letter-spacing)}.legal p{margin:0 0 var(--space-4);font-weight:var(--body-m-weight);font-size:var(--body-m-size);line-height:var(--body-m-line-height);color:var(--color-text-secondary)}.legal a{color:var(--color-primary-700);text-decoration:underline}.legal a:hover{color:var(--color-primary-800)}.cookie-consent{position:fixed;left:var(--space-4);right:var(--space-4);bottom:var(--space-4);z-index:100;max-width:560px;margin-left:auto;margin-right:auto;display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);background:var(--color-background);color:var(--color-text-primary);border:1px solid var(--color-stroke-divider);border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}.cookie-consent[hidden]{display:none}.cookie-consent__text{margin:0;flex:1;font-size:var(--body-xs-regular-size);line-height:var(--body-xs-regular-line-height);color:var(--color-text-secondary)}.cookie-consent__text a{color:var(--color-primary-700);text-decoration:underline}.cookie-consent__actions{display:flex;gap:var(--space-2);flex-shrink:0}.cookie-consent .btn{padding:var(--space-2) var(--space-4);font-size:var(--body-xs-semibold-size)}@media (max-width: 560px){.cookie-consent{flex-direction:column;align-items:stretch}.cookie-consent__actions{justify-content:flex-end}}.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}.reveal.is-visible{opacity:1;transform:none}@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}@media (max-width: 768px){.hero{padding-top:var(--space-16);padding-bottom:var(--space-16)}.hero__title{font-weight:var(--heading-mobile-display-xl-weight);font-size:var(--heading-mobile-display-xl-size);line-height:var(--heading-mobile-display-xl-line-height);letter-spacing:var(--heading-mobile-display-xl-letter-spacing)}.hero__sub{font-weight:var(--body-mobile-l-weight);font-size:var(--body-mobile-l-size);line-height:var(--body-mobile-l-line-height);letter-spacing:var(--body-mobile-l-letter-spacing)}.section{padding-top:var(--space-16);padding-bottom:var(--space-16)}.section__title{font-weight:var(--heading-mobile-h2-weight);font-size:var(--heading-mobile-h2-size);line-height:var(--heading-mobile-h2-line-height);letter-spacing:var(--heading-mobile-h2-letter-spacing)}.section__lede{font-weight:var(--body-mobile-l-weight);font-size:var(--body-mobile-l-size);line-height:var(--body-mobile-l-line-height);letter-spacing:var(--body-mobile-l-letter-spacing)}.step__title{font-weight:var(--heading-mobile-h5-weight);font-size:var(--heading-mobile-h5-size);line-height:var(--heading-mobile-h5-line-height)}.step{padding:var(--space-6)}}