:root{--color-primary-50:#ebf0fb;--color-primary-100:#d6e1f7;--color-primary-200:#adc3ef;--color-primary-300:#84a5e7;--color-primary-400:#6b93df;--color-primary-500:#5386e4;--color-primary-600:#3f6fca;--color-primary-700:#36c;--color-primary-800:#1e4a9e;--color-primary-900:#0f2e6b;--color-accent-50:#fbf5e8;--color-accent-100:#f3e4c0;--color-accent-200:#e6cc90;--color-accent-300:#d9b56a;--color-accent-400:#c9a96e;--color-accent-500:#a8873f;--color-accent-600:#84692e;--color-accent-700:#5e4a1e;--color-neutral-0:#fff;--color-neutral-25:#f7f9ff;--color-neutral-50:#eef2fb;--color-neutral-100:#e2e8f4;--color-neutral-200:#c8d2e8;--color-neutral-300:#a4b3d0;--color-neutral-400:#7f93b5;--color-neutral-500:#5d728f;--color-neutral-600:#45566d;--color-neutral-700:#313d52;--color-neutral-800:#1f2a3e;--color-neutral-900:#1a1f2e;--color-primary-500-rgb:83, 134, 228;--color-error-rgb:229, 57, 53;--color-success-rgb:39, 174, 96;--color-success-light:#e8f7ef;--color-success:#27ae60;--color-success-dark:#1a7a43;--color-warning-light:#fff8e8;--color-warning:#f5a623;--color-warning-dark:#b87318;--color-error-light:#fdeeed;--color-error:#e53935;--color-error-dark:#a01c1a;--color-info-light:#ebf0fb;--color-info:#5386e4;--color-info-dark:#36c;--bg-page:var(--color-neutral-25);--bg-surface:var(--color-neutral-0);--bg-elevated:var(--color-neutral-0);--bg-subtle:var(--color-neutral-50);--bg-primary:var(--color-primary-500);--bg-primary-hover:var(--color-primary-700);--bg-primary-tint:var(--color-primary-50);--bg-input:var(--bg-surface);--border-default:var(--color-neutral-100);--border-strong:var(--color-neutral-200);--border-focus:var(--color-primary-500);--fg-primary:var(--color-neutral-900);--fg-secondary:var(--color-neutral-600);--fg-tertiary:var(--color-neutral-400);--fg-disabled:var(--color-neutral-300);--fg-on-primary:#fff;--fg-link:var(--color-primary-500);--fg-link-hover:var(--color-primary-700);--shadow-xs:0 1px 2px #13336e0a;--shadow-sm:0 1px 3px #5386e414, 0 1px 2px #0000000a;--shadow-md:0 4px 12px #5386e41f, 0 2px 4px #0000000f;--shadow-lg:0 12px 32px #5386e429, 0 4px 8px #00000014;--shadow-xl:0 24px 48px #5386e433, 0 8px 16px #0000001a;--radius-xs:4px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--font-display:"Outfit", sans-serif;--font-body:"Outfit", sans-serif;--font-mono:ui-monospace, "Cascadia Code", "Fira Code", "Consolas", monospace;--fw-light:300;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-extrabold:800;--fs-xs:11px;--fs-sm:13px;--fs-base:15px;--fs-md:17px;--fs-lg:20px;--fs-xl:24px;--fs-2xl:30px;--fs-3xl:36px;--fs-4xl:48px;--fs-5xl:60px;--lh-tight:1.2;--lh-snug:1.35;--lh-normal:1.5;--lh-relaxed:1.7;--ls-tight:-.02em;--ls-normal:0;--ls-wide:.04em;--ls-wider:.08em;--ease-out:cubic-bezier(.25, .46, .45, .94);--duration-micro:.15s;--duration-base:.25s;--duration-entrance:.35s}[data-theme=dark]{--color-neutral-0:#151b2c;--color-neutral-25:#11162b;--color-neutral-50:#1f2740;--color-neutral-100:#ffffff14;--color-neutral-200:#ffffff24;--color-neutral-300:#5d728f;--color-neutral-400:#7f93b5;--color-neutral-500:#a4b3d0;--color-neutral-600:#a4b3d0;--color-neutral-700:#c8d2e8;--color-neutral-800:#eef2fb;--color-neutral-900:#eef2fb;--color-success-light:#3dd68c24;--color-success:#3dd68c;--color-success-dark:#3dd68c;--color-warning-light:#f7b95524;--color-warning:#f7b955;--color-warning-dark:#f7b955;--color-error-light:#ff6b6824;--color-error:#ff6b68;--color-error-dark:#ff6b68;--color-info-light:#84a5e724;--color-info:#84a5e7;--color-info-dark:#84a5e7;--color-error-rgb:255, 107, 104;--color-success-rgb:61, 214, 140;--bg-page:#0b0f1a;--bg-surface:#151b2c;--bg-elevated:#1f2740;--bg-subtle:#ffffff0a;--bg-primary:#5386e4;--bg-primary-hover:#6b93df;--bg-primary-tint:#5386e424;--bg-input:#0b0f1a;--border-default:#ffffff14;--border-strong:#ffffff24;--border-focus:#84a5e7;--fg-primary:#eef2fb;--fg-secondary:#a4b3d0;--fg-tertiary:#7f93b5;--fg-disabled:#45566d;--fg-on-primary:#fff;--fg-link:#84a5e7;--fg-link-hover:#6b93df;--shadow-xs:0 1px 2px #0000004d;--shadow-sm:0 1px 3px #0006, 0 1px 2px #0000004d;--shadow-md:0 4px 12px #00000073, 0 2px 4px #0000004d;--shadow-lg:0 12px 32px #00000080, 0 4px 8px #00000059;--shadow-xl:0 24px 48px #00000080, 0 8px 16px #00000059;--color-primary-50:#5386e424;--color-primary-100:#5386e438;--color-primary-200:#5386e459;--color-primary-300:#84a5e7;--color-primary-400:#6b93df;--color-primary-500:#5386e4;--color-primary-600:#6b93df;--color-primary-700:#84a5e7;--color-primary-800:#a8c0f0;--color-primary-900:#c5d5f5}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scrollbar-gutter:stable;scroll-padding-top:88px}body{font-family:var(--font-body);font-size:var(--fs-base);font-weight:var(--fw-regular);line-height:var(--lh-normal);color:var(--fg-primary);background:radial-gradient(900px 500px at 85% -10%, #5386e41a, transparent 60%), radial-gradient(700px 400px at 5% 5%, #c9a96e14, transparent 55%), var(--bg-page);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh}h1,h2,h3,h4{font-family:var(--font-display);color:var(--fg-primary)}h1{font-size:var(--fs-3xl);font-weight:var(--fw-bold);line-height:var(--lh-tight);letter-spacing:var(--ls-tight)}h2{font-size:var(--fs-2xl);font-weight:var(--fw-semibold);line-height:var(--lh-snug)}h3{font-size:var(--fs-xl);font-weight:var(--fw-semibold);line-height:var(--lh-snug)}h4{font-size:var(--fs-lg);font-weight:var(--fw-semibold);line-height:var(--lh-normal)}p{font-size:var(--fs-base);line-height:var(--lh-normal);color:var(--fg-primary)}a{color:var(--fg-link);transition:color .15s}a:hover{color:var(--fg-link-hover)}code,pre{font-family:var(--font-mono);font-size:var(--fs-sm);background:var(--bg-subtle);border-radius:var(--radius-xs)}code{padding:2px 6px}pre{padding:var(--space-4);overflow-x:auto}img,svg{max-width:100%;display:block}button{font-family:inherit}a{text-decoration:none}.wrap{max-width:1200px;margin:0 auto;padding:0 24px}.nav{z-index:50;-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-default);background:#f7f9ffd1;position:sticky;top:0}[data-theme=dark] .nav{background:#151b2cd1}.nav-inner{align-items:center;gap:24px;height:72px;display:flex}@media (width<=1024px){.nav-inner{gap:16px}}.brand{letter-spacing:-.02em;color:var(--fg-primary);flex-shrink:0;align-items:center;gap:10px;font-size:18px;font-weight:700;display:flex}.brand-logo{border-radius:8px;flex-shrink:0;width:auto;min-width:38px;height:38px;display:block;box-shadow:0 4px 12px #5386e44d}.brand-version{color:var(--color-primary-700);background:var(--color-primary-50);border-radius:var(--radius-full);margin-left:4px;padding:3px 8px;font-size:11px;font-weight:500}@media (width<=1024px){.brand-version{display:none}}.nav-links{align-items:center;gap:4px;margin-left:8px;display:flex}.nav-links a{color:var(--fg-secondary);border-radius:var(--radius-sm);padding:8px 12px;font-size:14px;font-weight:500;transition:color .15s,background .15s}.nav-links a:hover{color:var(--fg-primary);background:var(--bg-subtle)}@media (width<=1024px){.nav-links{display:none}}.nav-spacer{flex:1}.nav-cta{align-items:center;gap:8px;display:flex}@media (width<=1024px){.nav-cta{display:none}}.nav-hamburger{border:1px solid var(--border-default);border-radius:var(--radius-sm);cursor:pointer;background:0 0;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;gap:5px;width:36px;height:36px;padding:0;display:none}.nav-hamburger span{background:var(--fg-secondary);border-radius:2px;width:16px;height:1.5px;transition:transform .2s,opacity .2s;display:block}.nav-hamburger[aria-expanded=true] span:first-child{transform:translateY(6.5px)rotate(45deg)}.nav-hamburger[aria-expanded=true] span:nth-child(2){opacity:0}.nav-hamburger[aria-expanded=true] span:nth-child(3){transform:translateY(-6.5px)rotate(-45deg)}@media (width<=1024px){.nav-hamburger{display:flex}}.nav-mobile-drawer{border-top:1px solid var(--border-default);flex-direction:column;padding:12px 16px 16px;display:none}.nav-mobile-drawer.is-open{display:flex}.nav-mobile-links{flex-direction:column;gap:2px;margin-bottom:12px;display:flex}.nav-mobile-links a{color:var(--fg-secondary);border-radius:var(--radius-sm);padding:10px 12px;font-size:15px;font-weight:500;transition:color .15s,background .15s}.nav-mobile-links a:hover,.nav-mobile-links a.active{color:var(--fg-primary);background:var(--bg-subtle)}.nav-mobile-links a.active{color:var(--color-primary-700);background:var(--color-primary-50)}.nav-mobile-cta{border-top:1px solid var(--border-default);gap:8px;padding-top:12px;display:flex}.theme-toggle{border-radius:var(--radius-sm);border:1px solid var(--border-default);width:36px;height:36px;color:var(--fg-secondary);cursor:pointer;background:0 0;flex-shrink:0;justify-content:center;align-items:center;transition:color .15s,background .15s,border-color .15s;display:flex}.theme-toggle:hover{color:var(--fg-primary);background:var(--bg-subtle);border-color:var(--border-strong)}.theme-toggle .theme-icon--dark{display:none}.theme-toggle .theme-icon--light,[data-theme=dark] .theme-toggle .theme-icon--dark{display:block}[data-theme=dark] .theme-toggle .theme-icon--light{display:none}.btn{cursor:pointer;white-space:nowrap;border:none;align-items:center;gap:8px;font-weight:600;transition:background .15s,color .15s,transform .15s,box-shadow .15s;display:inline-flex}.btn-md{border-radius:var(--radius-md);padding:10px 18px;font-size:14px}.btn-lg{border-radius:var(--radius-md);padding:13px 24px;font-size:15px}.btn-primary{background:var(--color-primary-500);color:#fff;box-shadow:inset 0 1px #fff6,0 6px 14px #5386e44d}.btn-primary:hover{background:var(--color-primary-700);color:#fff;transform:translateY(-1px)}.btn-ghost{color:var(--fg-primary);border:1px solid var(--border-default);background:0 0}.btn-ghost:hover{background:var(--bg-subtle);color:var(--fg-primary);border-color:var(--border-strong)}.hero{padding:80px 0 64px}@media (width<=720px){.hero{padding:48px 0 40px}}.hero-eyebrow{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-full);color:var(--fg-secondary);box-shadow:var(--shadow-xs);align-items:center;gap:8px;margin-bottom:24px;padding:6px 12px 6px 6px;font-size:12px;font-weight:500;display:inline-flex}.hero-eyebrow .pill{background:var(--color-primary-500);color:#fff;border-radius:var(--radius-full);letter-spacing:.04em;padding:2px 8px;font-size:10px;font-weight:700}.hero h1{letter-spacing:-.03em;max-width:18ch;margin-bottom:20px;font-size:clamp(32px,6vw,64px);font-weight:700;line-height:1.04}.hero h1 em{background:linear-gradient(120deg, var(--color-primary-500) 0%, var(--color-primary-700) 60%, var(--color-accent-400) 120%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-style:normal}.hero p.lead{color:var(--fg-secondary);max-width:56ch;margin-bottom:32px;font-size:clamp(16px,2.5vw,19px);line-height:1.55}.hero-actions{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:36px;display:flex}@media (width<=480px){.hero-actions{flex-direction:column;align-items:stretch}.hero-actions .btn,.hero-actions .install-box{justify-content:center;width:100%}}.install-box{color:#fff;border-radius:var(--radius-md);font-family:var(--font-mono);background:#1a1f2e;align-items:center;gap:12px;max-width:100%;padding:10px 12px 10px 18px;font-size:14px;display:inline-flex;box-shadow:0 10px 30px #0f2e6b38}.install-box .prompt{color:var(--color-accent-300);-webkit-user-select:none;user-select:none}.install-box code{color:#fff;text-overflow:ellipsis;white-space:nowrap;background:0 0;flex:1;min-width:0;padding:0;overflow:hidden}.install-box .copy-btn{color:#fff;border-radius:var(--radius-sm);cursor:pointer;background:#ffffff14;border:1px solid #ffffff1f;flex-shrink:0;align-items:center;gap:6px;margin-left:4px;padding:6px 10px;font-size:12px;font-weight:500;transition:background .15s;display:inline-flex}.install-box .copy-btn:hover{background:#ffffff29}.install-box .copy-btn.ok{background:var(--color-success);border-color:var(--color-success)}.hero-grid{grid-template-columns:1.15fr 1fr;align-items:center;gap:56px;display:grid}@media (width<=900px){.hero-grid{grid-template-columns:1fr;gap:40px}}.showcase{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:24px;position:relative}.showcase:before{content:"";pointer-events:none;border-radius:inherit;z-index:-1;filter:blur(20px);background:linear-gradient(140deg,#5386e42e,#0000 40%);position:absolute;inset:-1px}.showcase>.pajak-card:first-of-type{margin-top:0}.showcase .pajak-card--accent .pajak-card__title{letter-spacing:-.02em;margin-bottom:6px;font-size:28px;font-weight:700}.showcase .pajak-card--accent{color:#ffffffd1}.showcase .row-tiles .pajak-card__title{letter-spacing:-.01em;font-size:18px;font-weight:700}.showcase-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.showcase-title{color:var(--fg-secondary);align-items:center;gap:8px;font-size:13px;font-weight:600;display:flex}.showcase-title:before{content:"";background:var(--color-success);border-radius:50%;width:6px;height:6px;box-shadow:0 0 0 4px #27ae602e}.showcase-dots{gap:6px;display:flex}.showcase-dots span{background:var(--color-neutral-100);border-radius:50%;width:10px;height:10px}.row-tiles{grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;display:grid}.features{padding:24px 0 80px}.feature-grid{grid-template-columns:repeat(3,1fr);gap:20px;display:grid}@media (width<=800px){.feature-grid{grid-template-columns:1fr}}.feature{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:24px;transition:transform .15s,box-shadow .15s}.feature:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.feature .icon{border-radius:var(--radius-sm);background:var(--color-primary-50);width:40px;height:40px;color:var(--color-primary-500);place-items:center;margin-bottom:14px;display:grid}.feature h3{margin-bottom:6px;font-size:17px}.feature p{color:var(--fg-secondary);font-size:14px;line-height:1.55}section.block{border-top:1px solid var(--border-default);padding:80px 0}@media (width<=720px){section.block{padding:48px 0}}.section-head{max-width:700px;margin-bottom:40px}.section-eyebrow{color:var(--color-primary-500);letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;font-size:12px;font-weight:600}.section-head h2{letter-spacing:-.02em;margin-bottom:12px;font-size:clamp(28px,3.6vw,40px);line-height:1.1}.section-head p{color:var(--fg-secondary);font-size:17px;line-height:1.6}.steps{flex-direction:column;gap:16px;display:flex}.step{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);grid-template-columns:56px 1fr;align-items:start;gap:24px;padding:24px;display:grid}@media (width<=560px){.step{grid-template-columns:1fr;gap:14px;padding:18px}}.step h3{margin-bottom:6px;font-size:18px}.step p{color:var(--fg-secondary);margin-bottom:14px;font-size:14px;line-height:1.55}.step .code{margin-top:4px}.step-num{border-radius:var(--radius-full);background:var(--color-primary-50);width:40px;height:40px;color:var(--color-primary-700);place-items:center;font-size:16px;font-weight:700;display:grid}.code{border-radius:var(--radius-md);font-family:var(--font-mono);background:#1a1f2e;border:1px solid #ffffff0f;min-width:0;max-width:100%;font-size:13px;line-height:1.6;position:relative;overflow:hidden}[data-theme=dark] .code{background:#0b0f1a;border-color:#ffffff1a}.code-head{background:#ffffff0a;border-bottom:1px solid #ffffff0f;justify-content:space-between;align-items:center;padding:8px 12px 8px 16px;display:flex}.code-file{color:#ffffffa6;text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:8px;min-width:0;font-size:12px;display:flex;overflow:hidden}.code-file:before{content:"";background:var(--color-accent-400);border-radius:50%;width:8px;height:8px}.code pre{color:#e8ecf3;background:0 0;width:0;min-width:100%;margin:0;padding:16px 18px;overflow-x:auto}.code .copy-btn{color:#fff;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;font-size:11px;font-weight:500;font-family:var(--font-body);background:#ffffff0f;border:1px solid #ffffff1a;flex-shrink:0;justify-content:center;align-items:center;gap:4px;width:72px;padding:4px 10px;transition:background .15s;display:inline-flex}.code .copy-btn:hover{background:#ffffff24}.code .copy-btn.ok{background:var(--color-success);border-color:var(--color-success)}.code-tabs{background:#ffffff0a;border-bottom:1px solid #ffffff0f;align-items:center;gap:2px;padding:6px 12px 6px 16px;display:flex}.code-tabs .copy-btn{margin-left:auto}.code-tab{font-family:var(--font-body);color:#ffffff73;cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;padding:4px 10px;font-size:12px;font-weight:500;transition:color .15s,background .15s}.code-tab:hover{color:#ffffffbf}.code-tab.is-active{color:#fff;background:#ffffff14}.tok-kw{color:#f0b6f5}.tok-str{color:#ffd79a}.tok-cmt,.tok-com{color:#6e7a95;font-style:italic}.tok-tag{color:#84a5e7}.tok-att{color:#c9a96e}.tok-fn{color:#84f0c0}.tok-num{color:#ffb39a}.tok-cls{color:#84f0c0}.cat-grid{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}@media (width<=900px){.cat-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=560px){.cat-grid{grid-template-columns:1fr}}.cat-tile{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);align-items:center;gap:16px;padding:20px;text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s;display:flex}.cat-tile:hover{box-shadow:var(--shadow-md);border-color:var(--color-primary-200);transform:translateY(-2px)}.cat-tile .cat-icon{border-radius:var(--radius-sm);background:var(--color-primary-50);width:40px;height:40px;color:var(--color-primary-500);flex-shrink:0;place-items:center;display:grid}.cat-tile>div:nth-child(2){flex:1;min-width:0}.cat-tile h3{margin:0 0 2px;font-size:16px;font-weight:600}.cat-tile p{color:var(--fg-tertiary);margin:0;font-size:13px;line-height:1.4}.cat-tile .cat-count{font-family:var(--font-mono);color:var(--color-primary-700);background:var(--color-primary-50);border-radius:var(--radius-full);flex-shrink:0;padding:4px 10px;font-size:12px;font-weight:600}.components-landing{background:radial-gradient(900px 500px at 85% -10%, #5386e412, transparent 60%), radial-gradient(700px 400px at 5% 5%, #c9a96e0d, transparent 55%), var(--bg-page);min-height:calc(100vh - 72px)}.components-landing-header{padding:72px 0 48px}@media (width<=720px){.components-landing-header{padding:40px 0 32px}}.components-landing-header h1{letter-spacing:-.03em;max-width:22ch;margin-bottom:12px;font-size:clamp(28px,5vw,48px);line-height:1.05}.components-landing-header p{color:var(--fg-secondary);max-width:60ch;font-size:clamp(15px,2vw,17px);line-height:1.55}.components-summary{grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px;display:grid}@media (width<=600px){.components-summary{grid-template-columns:repeat(2,1fr)}}.components-stat{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:18px 20px}.components-stat-num{font-family:var(--font-mono);color:var(--fg-primary);letter-spacing:-.02em;margin-bottom:2px;font-size:26px;font-weight:700}.components-stat-lbl{color:var(--fg-tertiary);font-size:12px}.components-landing-main{padding-bottom:96px}.cat-card-grid{grid-template-columns:repeat(3,1fr);gap:20px;display:grid}@media (width<=1000px){.cat-card-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=600px){.cat-card-grid{grid-template-columns:1fr}}.cat-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);flex-direction:column;min-height:260px;padding:24px;text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s;display:flex}.cat-card:hover{box-shadow:var(--shadow-md);border-color:var(--color-primary-200);transform:translateY(-3px)}.cat-card:hover .cat-arrow{color:var(--color-primary-500);transform:translate(3px)}.cat-card-head{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.cat-card-head .cat-icon{border-radius:var(--radius-sm);background:var(--color-primary-50);width:48px;height:48px;color:var(--color-primary-500);place-items:center;display:grid}.cat-card-head .cat-icon svg{width:24px;height:24px}.cat-card-head .cat-count{font-family:var(--font-mono);color:var(--color-primary-700);background:var(--color-primary-50);border-radius:var(--radius-full);padding:4px 10px;font-size:12px;font-weight:600}.cat-card h3{letter-spacing:-.02em;color:var(--fg-primary);margin-bottom:6px;font-size:20px}.cat-blurb{color:var(--fg-secondary);flex:1;margin-bottom:18px;font-size:13.5px;line-height:1.55}.cat-pills{flex-wrap:wrap;gap:6px;margin-bottom:18px;display:flex}.cat-pill{color:var(--fg-secondary);background:var(--bg-subtle);border:1px solid var(--border-default);border-radius:var(--radius-full);padding:4px 10px;font-size:11.5px;font-weight:500}.cat-cta{color:var(--color-primary-700);align-items:center;gap:6px;font-size:13px;font-weight:600;display:inline-flex}.cat-arrow{flex-shrink:0;width:14px;height:14px;transition:transform .2s,color .2s}.token-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;display:grid}.swatch{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:12px}.swatch .chip{aspect-ratio:3/2;border-radius:var(--radius-sm);border:1px solid #0000000a;width:100%;margin-bottom:10px}.swatch .name{color:var(--fg-primary);font-size:13px;font-weight:600}.swatch .hex{color:var(--fg-tertiary);font-size:11px;font-family:var(--font-mono);margin-top:2px}.cta-block{background:linear-gradient(140deg, var(--color-primary-700) 0%, var(--color-primary-500) 60%, var(--color-primary-400) 100%);border-radius:var(--radius-lg);color:#fff;margin-top:64px;padding:56px 48px;position:relative;overflow:hidden}@media (width<=720px){.cta-block{border-radius:var(--radius-md);padding:36px 24px}}.cta-block:before{content:"";background:radial-gradient(circle,#ffffff2e 0%,#0000 70%);border-radius:50%;width:320px;height:320px;position:absolute;top:-80px;right:-80px}.cta-block:after{content:"";background:radial-gradient(circle,#c9a96e59 0%,#0000 70%);border-radius:50%;width:280px;height:280px;position:absolute;bottom:-120px;left:-40px}.cta-block h2{color:#fff;letter-spacing:-.02em;max-width:18ch;margin-bottom:12px;font-size:clamp(28px,3.5vw,40px);line-height:1.1;position:relative}.cta-block p{color:#ffffffd9;max-width:56ch;margin-bottom:28px;font-size:17px;position:relative}.cta-block .actions{flex-wrap:wrap;gap:12px;display:flex;position:relative}.cta-block .btn-primary{color:var(--color-primary-700);background:#fff;box-shadow:0 8px 20px #0f2e6b40}.cta-block .btn-primary:hover{background:var(--color-neutral-25)}.cta-block .btn-ghost{color:#fff;background:#ffffff1a;border-color:#fff3}.cta-block .btn-ghost:hover{background:#ffffff2e}footer{border-top:1px solid var(--border-default);margin-top:80px;padding:40px 0}.footer-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.footer-links{flex-wrap:wrap;gap:20px;display:flex}.footer-links a{color:var(--fg-secondary);font-size:13px}.footer-links a:hover{color:var(--fg-primary)}.footer-meta{color:var(--fg-tertiary);font-size:13px}.component-page{grid-template-columns:220px 1fr 220px;min-height:calc(100vh - 72px);display:grid}@media (width<=1280px){.component-page{grid-template-columns:220px 1fr}}@media (width<=860px){.component-page{grid-template-columns:1fr}}.component-sidebar{border-right:1px solid var(--border-default);align-self:start;max-height:calc(100vh - 72px);position:sticky;top:72px;overflow-y:auto}@media (width<=860px){.component-sidebar{border-right:none;border-bottom:1px solid var(--border-default);height:auto;position:static}}.component-sidebar-inner{padding:28px 16px}@media (width<=860px){.component-sidebar-inner{flex-wrap:wrap;align-items:center;gap:4px;padding:16px;display:flex}}.component-sidebar-section{margin-bottom:4px}.component-sidebar-label{color:var(--fg-secondary);border-radius:var(--radius-sm);margin-bottom:2px;padding:7px 8px;font-size:14px;font-weight:500;transition:color .15s,background .15s;display:block}.component-sidebar-label:hover{color:var(--fg-primary);background:var(--bg-subtle)}.component-sidebar-label.active{color:var(--color-primary-700);background:var(--color-primary-50);font-weight:600}@media (width<=860px){.component-sidebar-label{white-space:nowrap;margin-bottom:0;padding:6px 10px;font-size:13px}}.component-sidebar-nav{flex-direction:column;gap:2px;display:flex}.component-sidebar-nav a{color:var(--fg-secondary);border-radius:var(--radius-sm);padding:7px 8px;font-size:14px;font-weight:500;transition:color .15s,background .15s;display:block}.component-sidebar-nav a:hover{color:var(--fg-primary);background:var(--bg-subtle)}.component-sidebar-nav a.active{color:var(--color-primary-700);background:var(--color-primary-50)}.component-sidebar-back{color:var(--fg-tertiary);border-radius:var(--radius-sm);align-items:center;gap:6px;margin-bottom:12px;padding:6px 8px;font-size:12px;font-weight:500;transition:color .15s,background .15s;display:flex}.component-sidebar-back:hover{color:var(--fg-primary);background:var(--bg-subtle)}@media (width<=860px){.component-sidebar-back{border-right:1px solid var(--border-default);margin-bottom:0;margin-right:4px;padding-right:12px}}.component-sidebar-group-label{letter-spacing:.1em;text-transform:uppercase;color:var(--fg-tertiary);margin-bottom:4px;padding:4px 8px;font-size:10px;font-weight:700;display:block}@media (width<=860px){.component-sidebar-group-label{display:none}}.component-anchor-sidebar{border-left:1px solid var(--border-default);align-self:start;min-width:0;max-height:calc(100vh - 72px);padding:28px 16px;position:sticky;top:72px;overflow:hidden auto}@media (width<=1280px){.component-anchor-sidebar{display:none}}.component-anchor-sidebar-label{letter-spacing:.1em;text-transform:uppercase;color:var(--fg-tertiary);margin-bottom:8px;padding:0 8px;font-size:11px;font-weight:700;display:block}.component-anchor-nav{flex-direction:column;gap:2px;display:flex}.component-anchor-nav a{color:var(--fg-secondary);border-radius:var(--radius-sm);text-overflow:ellipsis;white-space:nowrap;padding:6px 8px;font-size:13px;font-weight:500;transition:color .15s,background .15s;display:block;overflow:hidden}.component-anchor-nav a:hover{color:var(--fg-primary);background:var(--bg-subtle)}.component-anchor-nav a.active{color:var(--color-primary-700);background:var(--color-primary-50)}.component-main{min-width:0;max-width:800px;margin:0 auto;padding:56px 48px 96px}@media (width<=1280px){.component-main{max-width:100%;padding:40px 32px 80px}}@media (width<=860px){.component-main{padding:32px 24px 64px}}@media (width<=480px){.component-main{padding:24px 16px 48px}}.component-page-head{margin-bottom:56px}.component-page-head h1{letter-spacing:-.025em;margin-bottom:12px;font-size:clamp(28px,4vw,48px)}.component-page-head p{color:var(--fg-secondary);overflow-wrap:break-word;word-break:break-word;max-width:60ch;margin-bottom:24px;font-size:16px;line-height:1.6}.component-include-hint{margin-top:20px}.component-section{border-top:1px solid var(--border-default);margin-top:64px;padding-top:64px}@media (width<=560px){.component-section{margin-top:40px;padding-top:40px}}.component-section:first-of-type{border-top:none;margin-top:0;padding-top:0}.component-section-head{margin-bottom:28px}.component-section-head h2{letter-spacing:-.015em;margin-bottom:8px;font-size:clamp(20px,3vw,26px)}.component-section-head p{color:var(--fg-secondary);overflow-wrap:break-word;word-break:break-word;max-width:60ch;font-size:14px;line-height:1.6}.component-section-head p code{background:var(--color-neutral-50);border:1px solid var(--border-default);border-radius:var(--radius-xs);word-break:break-all;padding:1px 5px;font-size:12px}.component-section-meta{flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px;display:flex}.component-namespace{font-family:var(--font-mono);color:var(--color-primary-700);background:var(--color-primary-50);border:1px solid var(--color-primary-100);border-radius:var(--radius-full);padding:4px 10px;font-size:12px;font-weight:500}.component-copy-btn{color:var(--fg-secondary);background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-full);cursor:pointer;align-items:center;gap:5px;padding:4px 10px;font-family:inherit;font-size:12px;font-weight:500;transition:color .15s,background .15s,border-color .15s;display:inline-flex}.component-copy-btn svg{flex-shrink:0}.component-copy-btn:hover{color:var(--fg-primary);background:var(--bg-subtle);border-color:var(--border-strong)}.component-copy-btn.ok{color:var(--color-success);border-color:var(--color-success);background:var(--color-success-light)}.props-table{border-collapse:collapse;width:100%;margin-top:16px;font-size:13px}.props-table th{text-align:left;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-tertiary);border-bottom:1px solid var(--border-default);padding:0 12px 8px 0;font-size:11px;font-weight:600}.props-table td{border-bottom:1px solid var(--border-default);color:var(--fg-secondary);vertical-align:top;padding:10px 12px 10px 0;line-height:1.5}.props-table td:nth-child(2){white-space:nowrap}.props-table td code{font-family:var(--font-mono);background:var(--color-neutral-50);border:1px solid var(--border-default);border-radius:var(--radius-xs);white-space:nowrap;padding:1px 5px;font-size:12px}.props-table tr:last-child td{border-bottom:none}.props-table-heading{text-transform:uppercase;letter-spacing:.08em;color:var(--fg-tertiary);margin-top:28px;margin-bottom:0;font-size:11px;font-weight:700}.component-block{overflow-anchor:none;flex-direction:column;width:100%;min-width:0;margin-bottom:40px;display:flex;overflow:hidden}.component-block:last-child{margin-bottom:0}.component-block-title{letter-spacing:.08em;text-transform:uppercase;color:var(--fg-tertiary);margin-bottom:12px;font-size:11px;font-weight:700}.component-preview{background:var(--bg-subtle);border:1px solid var(--border-default);border-radius:var(--radius-md);min-width:0}.component-block:has(>.code:not([hidden])) .component-preview{border-radius:var(--radius-md) var(--radius-md) 0 0;border-bottom-color:#0000}.component-preview:has(.component-preview-inner--dropdown){overflow:visible}.component-preview-footer{border-top:1px solid var(--border-default);justify-content:flex-end;align-items:center;gap:4px;padding:8px 12px;display:flex}.toggle-code-btn,.expand-btn{color:var(--fg-secondary);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;outline:none;align-items:center;gap:6px;padding:4px 8px;font-size:12px;font-weight:500;text-decoration:none;transition:color .15s,background .15s;display:inline-flex}.toggle-code-btn:focus-visible,.expand-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.toggle-code-btn:hover,.expand-btn:hover{color:var(--fg-primary);background:var(--bg-subtle)}.toggle-code-btn[aria-expanded=true],.expand-btn[aria-expanded=true]{color:var(--color-primary-500)}.component-preview-inner{padding:28px;overflow:auto hidden}@media (width<=1200px){.component-preview-inner{padding:20px}}@media (width<=560px){.component-preview-inner{padding:16px}}.component-preview-inner--col{flex-direction:column;display:flex}.component-preview-inner--gap-xs{gap:8px}.component-preview-inner--gap-sm{gap:12px}.component-preview-inner--gap-md{gap:16px}.component-preview-inner--gap-lg{gap:20px}.component-preview-inner--narrow{max-width:360px;margin:0 auto}.component-preview-inner--narrow-md{max-width:400px;margin:0 auto}.component-preview-inner--center{align-items:center}.component-preview-inner--dropdown{overflow:visible}.component-preview-inner--table{padding:16px}.component-block .code{border-radius:0 0 var(--radius-md) var(--radius-md)}.playground-wrap{padding-top:56px;padding-bottom:96px}.playground-head{margin-bottom:48px}.playground-head h1{margin:8px 0 12px}.playground-head p{color:var(--fg-secondary);max-width:560px}.playground-body{grid-template-columns:1fr 360px;align-items:start;gap:48px;display:grid}@media (width<=960px){.playground-body{grid-template-columns:1fr}}.playground-section{border-top:1px solid var(--border-default);flex-direction:column;gap:16px;padding:28px 0;display:flex}.playground-section:first-child{border-top:none;padding-top:0}.playground-section-title{text-transform:uppercase;letter-spacing:.08em;color:var(--fg-tertiary);font-size:13px;font-weight:700}.playground-dump-col{position:sticky;top:88px}.playground-dump{border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-surface);overflow:hidden}.playground-dump+.playground-dump{margin-top:12px}.playground-dump--error{border-color:var(--color-error)}.playground-dump--error .playground-dump-head{color:var(--color-error);border-bottom-color:var(--color-error-light);background:var(--color-error-light)}.playground-dump-head{text-transform:uppercase;letter-spacing:.08em;color:var(--fg-tertiary);border-bottom:1px solid var(--border-default);background:var(--bg-subtle);justify-content:space-between;align-items:center;padding:12px 16px;font-size:12px;font-weight:600;display:flex}.playground-dump-badge{color:var(--color-primary-700);background:var(--color-primary-50);border-radius:var(--radius-xs);padding:2px 6px;font-size:11px;font-weight:700}.playground-dump-badge--error{color:var(--color-error);background:var(--color-error-light)}.playground-dump-body{min-height:120px;padding:16px}.playground-dump-body pre{white-space:pre-wrap;word-break:break-all;background:0 0;padding:0;font-size:12px}.playground-dump-empty{color:var(--fg-quaternary,var(--fg-tertiary));font-size:13px;font-style:italic}.playground-submit-row{border-top:1px solid var(--border-default);grid-column:1/-1;justify-content:flex-end;padding-top:24px;display:flex}.footer-brand{align-items:center;gap:10px;display:flex}.footer-logo{border-radius:5px;width:auto;height:22px}.footer-tagline{color:var(--fg-secondary);font-size:13px}.val--status{letter-spacing:0;font-size:14px}.showcase-actions{gap:10px;margin-top:16px;display:flex}.showcase-actions .showcase-btn-full{flex:1;justify-content:center}.code--block{width:100%;display:inline-block}.btn--full{flex:1;justify-content:center}.token-section-label{color:var(--fg-secondary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;font-size:14px;font-weight:600}.token-grid--spaced{margin-bottom:36px}.token-section-cta{justify-content:center;margin-top:36px;display:flex}.code--spaced-top{margin-top:40px}.code--spaced-bottom{margin-bottom:28px}.is-hidden{display:none}.ex-row{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.ex-row--gap-md{gap:.75rem}.ex-row--gap-lg{gap:1.5rem}.ex-row--justify-center{justify-content:center}.ex-row--no-wrap{flex-wrap:nowrap}.ex-col{flex-direction:column;gap:1rem;display:flex}.ex-col--gap-sm{gap:.5rem}.ex-col--gap-lg{gap:1.5rem}.ex-label{color:var(--color-neutral-500);margin:0 0 .5rem;font-size:.8125rem}.ex-popover-wrap{display:inline-block;position:relative}.ex-brand{letter-spacing:-.02em;font-size:1rem;font-weight:700}.ex-brand--lg{font-size:1.125rem;font-weight:800}.ex-sidebar-footer{color:var(--fg-secondary);align-items:center;gap:.625rem;padding:.5rem .75rem;font-size:.8125rem;display:flex}.ex-drawer-list{flex-direction:column;gap:.75rem;padding:.25rem 0;display:flex}.ex-drawer-label{cursor:pointer;align-items:center;gap:.5rem;font-size:.875rem;display:flex}.ex-muted{color:var(--fg-tertiary)}.ex-slot-text{color:var(--fg-secondary);font-size:.875rem}.ex-list-icon{background:#ebf0fb;border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.ex-skeleton-profile{flex-wrap:wrap;align-items:center;gap:1rem;display:flex}.ex-skeleton-lines{flex-direction:column;flex:1;gap:.4rem;min-width:120px;display:flex}.ex-skeleton-pills{gap:.5rem;margin-top:.75rem;display:flex}.ex-p{margin:0}.ex-p--bottom{margin:0 0 .5rem}.ex-p--top{margin:.5rem 0 0}.ex-row--sm-text{font-size:.875rem}.ex-row--start{align-items:flex-start}.ex-row--padded-y{padding:1rem 0}.ex-brand--white{color:#fff}.ex-col--full{width:100%}.preview-shell{flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:48px 32px;display:flex}.preview-content{width:100%;max-width:960px}.preview-bar{background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-full);box-shadow:var(--shadow-md);color:var(--fg-tertiary);white-space:nowrap;align-items:center;gap:8px;padding:6px 14px;font-size:12px;display:flex;position:fixed;bottom:20px;left:50%;transform:translate(-50%)}.preview-bar-dot{background:var(--color-primary-500);opacity:.7;border-radius:50%;width:6px;height:6px}