@font-face{font-family:poppins;src:url(../media/poppins_400_normal-s.p.17-1enzs_j91b.woff2?dpl=dpl_4WrZb8qqUnZP5YpuAhFHSPKgGCJD)format("woff2");font-display:swap;font-weight:400;font-style:normal}@font-face{font-family:poppins;src:url(../media/poppins_400_normal_ext-s.p.0g6rbszwfgn9y.woff2?dpl=dpl_4WrZb8qqUnZP5YpuAhFHSPKgGCJD)format("woff2");font-display:swap;font-weight:400;font-style:normal}@font-face{font-family:poppins;src:url(../media/poppins_400_italic-s.p.0rmnzjlzsvg7u.woff2?dpl=dpl_4WrZb8qqUnZP5YpuAhFHSPKgGCJD)format("woff2");font-display:swap;font-weight:400;font-style:italic}@font-face{font-family:poppins;src:url(../media/poppins_400_italic_ext-s.p.0irzkz8y7jv29.woff2?dpl=dpl_4WrZb8qqUnZP5YpuAhFHSPKgGCJD)format("woff2");font-display:swap;font-weight:400;font-style:italic}@font-face{font-family:poppins;src:url(../media/poppins_500_normal-s.p.0uvzar8hswo3p.woff2?dpl=dpl_4WrZb8qqUnZP5YpuAhFHSPKgGCJD)format("woff2");font-display:swap;font-weight:500;font-style:normal}@font-face{font-family:poppins;src:url(../media/poppins_500_normal_ext-s.p.0ek5sshv8wk3m.woff2?dpl=dpl_4WrZb8qqUnZP5YpuAhFHSPKgGCJD)format("woff2");font-display:swap;font-weight:500;font-style:normal}@font-face{font-family:poppins;src:url(../media/poppins_500_italic-s.p.0uab9sg.el18x.woff2?dpl=dpl_4WrZb8qqUnZP5YpuAhFHSPKgGCJD)format("woff2");font-display:swap;font-weight:500;font-style:italic}@font-face{font-family:poppins;src:url(../media/poppins_500_italic_ext-s.p.01mcg29mp4i~..woff2?dpl=dpl_4WrZb8qqUnZP5YpuAhFHSPKgGCJD)format("woff2");font-display:swap;font-weight:500;font-style:italic}@font-face{font-family:poppins;src:url(../media/poppins_600_normal-s.p.12skym0rqknxy.woff2?dpl=dpl_4WrZb8qqUnZP5YpuAhFHSPKgGCJD)format("woff2");font-display:swap;font-weight:600;font-style:normal}@font-face{font-family:poppins;src:url(../media/poppins_600_normal_ext-s.p.0esuu2f5si~v8.woff2?dpl=dpl_4WrZb8qqUnZP5YpuAhFHSPKgGCJD)format("woff2");font-display:swap;font-weight:600;font-style:normal}@font-face{font-family:poppins;src:url(../media/poppins_600_italic-s.p.15p9cfi8srt_k.woff2?dpl=dpl_4WrZb8qqUnZP5YpuAhFHSPKgGCJD)format("woff2");font-display:swap;font-weight:600;font-style:italic}@font-face{font-family:poppins;src:url(../media/poppins_600_italic_ext-s.p.0awaxvi06jwbf.woff2?dpl=dpl_4WrZb8qqUnZP5YpuAhFHSPKgGCJD)format("woff2");font-display:swap;font-weight:600;font-style:italic}@font-face{font-family:poppins;src:url(../media/poppins_700_normal-s.p.0~mcdl10zdfb3.woff2?dpl=dpl_4WrZb8qqUnZP5YpuAhFHSPKgGCJD)format("woff2");font-display:swap;font-weight:700;font-style:normal}@font-face{font-family:poppins;src:url(../media/poppins_700_normal_ext-s.p.106do9xzbuago.woff2?dpl=dpl_4WrZb8qqUnZP5YpuAhFHSPKgGCJD)format("woff2");font-display:swap;font-weight:700;font-style:normal}@font-face{font-family:poppins;src:url(../media/poppins_700_italic-s.p.15glw.3ya746x.woff2?dpl=dpl_4WrZb8qqUnZP5YpuAhFHSPKgGCJD)format("woff2");font-display:swap;font-weight:700;font-style:italic}@font-face{font-family:poppins;src:url(../media/poppins_700_italic_ext-s.p.0vafl1lz46pi~.woff2?dpl=dpl_4WrZb8qqUnZP5YpuAhFHSPKgGCJD)format("woff2");font-display:swap;font-weight:700;font-style:italic}@font-face{font-family:poppins Fallback;src:local(Arial);ascent-override:105%;descent-override:35.0%;line-gap-override:10.0%;size-adjust:100.0%}.poppins_2fbf6580-module__YfHJ_G__className{font-family:poppins,poppins Fallback,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.poppins_2fbf6580-module__YfHJ_G__variable{--font-poppins:"poppins", "poppins Fallback", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif}
:root{--color-brand-primary:#232470;--color-brand-primary-dark:#1a1b55;--color-brand-primary-light:#3d3f9a;--color-brand-accent:#0ba1e2;--color-brand-accent-light:#e0f4fc;--color-white:#fff;--color-black:#000;--color-slate-50:#f8fafc;--color-slate-100:#f1f5f9;--color-slate-200:#e2e8f0;--color-slate-300:#cbd5e1;--color-slate-400:#94a3b8;--color-slate-500:#64748b;--color-slate-600:#475569;--color-slate-700:#334155;--color-slate-800:#1e293b;--color-slate-900:#0f172a;--color-slate-950:#020617;--color-green-500:#22c55e;--color-green-600:#16a34a;--color-yellow-100:#fef3c7;--color-yellow-500:#eab308;--color-yellow-600:#d97706;--color-red-500:#ef4444;--color-blue-500:#3b82f6;--color-category-1:#bc744b;--color-category-2:#ba3b46;--color-category-3:#865f62;--color-category-4:#6b7a8f;--color-category-5:#ca8437;--color-category-6:#606c38;--color-category-7:#006992;--color-category-8:#bca24b;--color-category-9:#907954;--color-category-10:#718c65;--color-category-11:#3b1450;--color-category-12:#004346;--color-category-13:#987284;--color-category-14:#397e69;--color-bg-body:var(--color-slate-50);--color-bg-surface:var(--color-white);--color-bg-surface-subtle:var(--color-slate-50);--color-bg-surface-secondary:var(--color-slate-100);--color-bg-surface-dark:var(--color-slate-900);--color-bg-hero:var(--color-brand-primary);--color-bg-card:var(--color-white);--color-bg-cme:var(--color-brand-accent-light);--color-bg-accent-red:#fee2e2;--color-bg-accent-blue:#dbeafe;--color-bg-accent-yellow:#fef9c3;--color-bg-accent-green:#dcfce7;--color-bg-accent-violet:#ede9fe;--color-text-main:var(--color-slate-900);--color-text-secondary:var(--color-slate-600);--color-text-muted:var(--color-slate-400);--color-text-inverse:var(--color-white);--color-text-primary:var(--color-brand-primary);--color-text-accent:var(--color-brand-accent);--color-border:var(--color-slate-200);--color-border-hover:var(--color-slate-300);--color-primary:var(--color-brand-primary);--color-primary-dark:var(--color-brand-primary-dark);--color-primary-light:var(--color-brand-primary-light);--color-accent:var(--color-brand-accent);--color-accent-light:var(--color-brand-accent-light);--color-success:var(--color-green-600);--color-warning:var(--color-yellow-500);--color-warning-light:var(--color-yellow-100);--color-warning-dark:var(--color-yellow-600);--color-info:var(--color-blue-500);--color-error:var(--color-red-500);--font-family-base:var(--font-poppins), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--spacing-1:4px;--spacing-2:8px;--spacing-3:12px;--spacing-4:16px;--spacing-5:20px;--spacing-6:24px;--spacing-8:32px;--spacing-10:40px;--spacing-12:48px;--spacing-16:64px;--spacing-20:80px;--spacing-24:96px;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-full:9999px;--max-width-container:1200px;--header-height:70px;--z-dropdown:50;--z-sticky:100;--z-modal:1000;--duration-instant:0s;--duration-micro:90ms;--duration-short:.14s;--duration-base:.2s;--duration-long:.26s;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in:cubic-bezier(.7, 0, .84, 0);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--ease-emphasized:cubic-bezier(.2, 0, 0, 1);--distance-1:4px;--distance-2:8px;--distance-3:12px;--distance-4:16px}html[data-theme=dark]{--color-bg-body:var(--color-slate-950);--color-bg-surface:var(--color-slate-900);--color-bg-surface-subtle:var(--color-slate-800);--color-bg-surface-secondary:var(--color-slate-800);--color-bg-surface-dark:var(--color-black);--color-bg-hero:var(--color-slate-950);--color-bg-card:var(--color-slate-800);--color-bg-cme:var(--color-slate-900);--color-text-main:var(--color-slate-100);--color-text-secondary:var(--color-slate-300);--color-text-muted:var(--color-slate-400);--color-text-inverse:var(--color-slate-900);--color-border:var(--color-slate-700);--color-border-hover:var(--color-slate-600);--color-brand-primary:#8586de;--color-brand-primary-light:#5b5cbd;--color-brand-primary-dark:#6d6ec9;--color-text-primary:var(--color-brand-primary);--color-success:var(--color-green-500);--color-error:var(--color-red-500);--shadow-sm:0 1px 2px 0 #0000004d;--shadow-md:0 4px 6px -1px #0006, 0 2px 4px -2px #0003;--shadow-lg:0 10px 15px -3px #0006, 0 4px 6px -4px #0003;--color-bg-accent-red:#7f1d1d;--color-bg-accent-blue:#1e3a8a;--color-bg-accent-yellow:#78350f;--color-bg-accent-green:#14532d;--color-bg-accent-violet:#4c1d95;--color-category-1:#d68a63;--color-category-2:#d96670;--color-category-3:#a98185;--color-category-4:#8e9bb0;--color-category-5:#e0a25a;--color-category-6:#8a9858;--color-category-7:#2a93bb;--color-category-8:#d4be6f;--color-category-9:#b39a76;--color-category-10:#94ad84;--color-category-11:#6b3a82;--color-category-12:#2c7378;--color-category-13:#b89aa8;--color-category-14:#5fa68c}
*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family-base);background-color:var(--color-bg-body);color:var(--color-text-main);-webkit-font-smoothing:antialiased;line-height:1.5}a{color:inherit;transition:color var(--duration-base);text-decoration:none}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}ul,ol{list-style:none}.container{max-width:var(--max-width-container);padding:0 var(--spacing-4);margin:0 auto}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}
.design-layout{min-height:100vh;display:flex}.design-sidebar{background-color:var(--color-bg-surface);border-right:1px solid var(--color-border);width:260px;padding:var(--spacing-5) var(--spacing-4);flex-direction:column;flex-shrink:0;height:100vh;display:flex;position:sticky;top:0;overflow-y:auto}.design-sidebar-header{margin-bottom:var(--spacing-6);padding:0 var(--spacing-2)}.design-sidebar-logo{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-brand-primary);align-items:center;gap:var(--spacing-2);text-decoration:none;display:flex}.design-sidebar-icon{border-radius:var(--radius-sm);flex-shrink:0}.design-sidebar-logo:hover{color:var(--color-brand-primary-dark)}.design-nav{gap:var(--spacing-1);flex-direction:column;flex:1;display:flex}.design-nav-group{margin-bottom:var(--spacing-1)}.design-nav-group-title{width:100%;padding:var(--spacing-2);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:color var(--duration-base);background:0 0;border:none;justify-content:space-between;align-items:center;display:flex}.design-nav-group-title:hover{color:var(--color-text-secondary)}.design-nav-group-title--active{color:var(--color-brand-primary)}.design-nav-group-label{align-items:center;gap:var(--spacing-2);display:flex}.design-nav-group-icon{opacity:.7;flex-shrink:0;align-items:center;display:flex}.design-nav-group-title--active .design-nav-group-icon{opacity:1}.design-nav-chevron{transition:transform var(--duration-base);flex-shrink:0}.design-nav-chevron--collapsed{transform:rotate(-90deg)}.design-nav-group-items{padding-left:calc(var(--spacing-2) + 16px + var(--spacing-2));flex-direction:column;gap:1px;display:flex}.design-nav-link{padding:var(--spacing-2) var(--spacing-3);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);transition:all var(--duration-base);white-space:nowrap;text-overflow:ellipsis;text-decoration:none;display:block;overflow:hidden}.design-nav-link:hover{background-color:var(--color-bg-surface-secondary);color:var(--color-text-main)}.design-nav-link--active{background-color:color-mix(in srgb, var(--color-brand-primary), transparent 92%);color:var(--color-brand-primary);font-weight:var(--font-weight-semibold)}.design-sidebar-footer{margin-top:var(--spacing-4);padding-top:var(--spacing-4);border-top:1px solid var(--color-border)}.design-theme-toggle{align-items:center;gap:var(--spacing-2);width:100%;padding:var(--spacing-2) var(--spacing-3);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);cursor:pointer;transition:all var(--duration-base);background:0 0;border:none;display:flex}.design-theme-toggle:hover{background-color:var(--color-bg-surface-secondary);color:var(--color-text-main)}.home-grid{gap:var(--spacing-4);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));display:grid}.home-card{padding:var(--spacing-5);background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);color:inherit;transition:all var(--duration-base);text-decoration:none;display:block}.home-card:hover{border-color:var(--color-brand-primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.home-card:focus-visible{outline:2px solid var(--color-brand-accent);outline-offset:2px}.home-card-title{font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-2);font-size:var(--font-size-base);color:var(--color-text-main)}.home-card-desc{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}.design-main{padding:var(--spacing-8);flex:1;min-width:0;max-width:1200px}.showcase-section{margin-bottom:var(--spacing-12)}.showcase-section h2{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-text-main);margin-bottom:var(--spacing-2)}.showcase-section p{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--spacing-6)}.showcase-row{gap:var(--spacing-4);margin-bottom:var(--spacing-4);flex-wrap:wrap;align-items:center;display:flex}.showcase-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin-bottom:var(--spacing-2)}.showcase-grid{gap:var(--spacing-6);margin-bottom:var(--spacing-6);grid-template-columns:repeat(auto-fill,minmax(300px,1fr));display:grid}.showcase-full{margin-left:calc(-1 * var(--spacing-8));margin-right:calc(-1 * var(--spacing-8))}.showcase-page-title{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-8)}.showcase-page-subtitle{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--spacing-8)}.showcase-label-spaced{composes:showcase-label;margin-top:var(--spacing-4)}.showcase-label-spaced-lg{composes:showcase-label;margin-top:var(--spacing-8)}.showcase-stack{gap:var(--spacing-4);flex-direction:column;display:flex}.showcase-stack-sm{gap:var(--spacing-3);flex-direction:column;display:flex}.showcase-constrained-sm{max-width:300px}.showcase-constrained-md{max-width:400px}.showcase-constrained-lg{max-width:480px}.showcase-inline{gap:var(--spacing-3);justify-content:flex-end;display:flex}.showcase-form-grid{gap:var(--spacing-4);grid-template-columns:1fr 1fr;display:grid}.showcase-bottom-spacer{margin-bottom:var(--spacing-4)}.showcase-section-rounded{border-radius:var(--radius-lg);overflow:hidden}.showcase-form-card{max-width:480px;padding:var(--spacing-6);background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.inspector-header{justify-content:space-between;align-items:flex-start;gap:var(--spacing-4);margin-bottom:var(--spacing-4);display:flex}.inspector-toggle{border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-bg-surface);width:36px;height:36px;color:var(--color-text-muted);cursor:pointer;transition:all var(--duration-base);flex-shrink:0;justify-content:center;align-items:center;display:flex}.inspector-toggle:hover{border-color:var(--color-brand-primary);color:var(--color-brand-primary);background-color:color-mix(in srgb, var(--color-brand-primary), transparent 95%)}.inspector-toggle--active{border-color:var(--color-brand-primary);color:var(--color-brand-primary);background-color:color-mix(in srgb, var(--color-brand-primary), transparent 92%)}.inspector-demo{margin-bottom:var(--spacing-6)}.inspector-panel{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-surface);overflow:hidden}.inspector-tabs{border-bottom:1px solid var(--color-border);display:flex}.inspector-tab{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.03em;color:var(--color-text-muted);cursor:pointer;transition:all var(--duration-base);background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px}.inspector-tab:hover{color:var(--color-text-main)}.inspector-tab--active{color:var(--color-brand-primary);border-bottom-color:var(--color-brand-primary)}.inspector-section-title{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin:0}.inspector-props{padding:var(--spacing-4)}.inspector-props .inspector-section-title{margin-bottom:var(--spacing-3)}.inspector-table-wrap{overflow-x:auto}.inspector-table{border-collapse:collapse;width:100%;font-size:var(--font-size-sm)}.inspector-table th{text-align:left;padding:var(--spacing-2) var(--spacing-3);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);border-bottom:1px solid var(--color-border);white-space:nowrap}.inspector-table td{padding:var(--spacing-2) var(--spacing-3);border-bottom:1px solid var(--color-bg-surface-secondary);color:var(--color-text-main);vertical-align:top}.inspector-table tr:last-child td{border-bottom:none}.inspector-table code{font-family:JetBrains Mono,Fira Code,monospace;font-size:var(--font-size-xs);background:var(--color-bg-surface-secondary);border-radius:var(--radius-sm);color:var(--color-brand-primary);padding:2px 6px}.inspector-code{padding:var(--spacing-4)}.inspector-code-header{margin-bottom:var(--spacing-3);justify-content:space-between;align-items:center;display:flex}.inspector-copy{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-brand-accent);cursor:pointer;padding:var(--spacing-1) var(--spacing-2);border-radius:var(--radius-sm);transition:all var(--duration-base);background:0 0;border:none}.inspector-copy:hover{background:color-mix(in srgb, var(--color-brand-accent), transparent 90%)}.inspector-pre{padding:var(--spacing-4);background:var(--color-bg-surface-secondary);border-radius:var(--radius-md);font-family:JetBrains Mono,Fira Code,monospace;font-size:var(--font-size-xs);color:var(--color-text-main);margin:0;line-height:1.6;overflow-x:auto}.pg-header{justify-content:space-between;align-items:flex-start;gap:var(--spacing-4);margin-bottom:var(--spacing-4);display:flex}.pg-header h2{margin-bottom:var(--spacing-2)}.pg-header p{margin-bottom:0}.pg-playground{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-surface);overflow:hidden}.pg-top{min-height:200px;display:flex}.pg-preview{border-right:1px solid var(--color-border);flex-direction:column;flex:1;min-width:0;display:flex}.pg-preview-label,.pg-controls-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);padding:var(--spacing-3) var(--spacing-4);border-bottom:1px solid var(--color-border)}.pg-preview-area{padding:var(--spacing-6);background:var(--color-bg-body);background-image:radial-gradient(circle, var(--color-border) 1px, transparent 1px);background-size:16px 16px;flex:1;justify-content:center;align-items:center;display:flex}.pg-controls{flex-direction:column;flex-shrink:0;width:280px;display:flex}.pg-controls-list{padding:var(--spacing-4);gap:var(--spacing-4);flex-direction:column;display:flex;overflow-y:auto}.pg-control{gap:var(--spacing-2);flex-direction:column;display:flex}.pg-control-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary)}.pg-segmented{border:1px solid var(--color-border);border-radius:var(--radius-md);display:flex;overflow:hidden}.pg-seg-btn{padding:var(--spacing-1) var(--spacing-2);border:none;border-right:1px solid var(--color-border);background:var(--color-bg-surface);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);cursor:pointer;transition:all var(--duration-base);text-transform:capitalize;white-space:nowrap;flex:1;font-family:inherit}.pg-seg-btn:last-child{border-right:none}.pg-seg-btn:hover{background:var(--color-bg-surface-secondary)}.pg-seg-btn--active{background:var(--color-brand-primary);color:var(--color-white)}.pg-seg-btn--active:hover{background:var(--color-brand-primary-dark)}.pg-select{width:100%;padding:var(--spacing-2) var(--spacing-3);padding-right:var(--spacing-8);font-size:var(--font-size-sm);color:var(--color-text-main);background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;appearance:none;transition:border-color var(--duration-base);background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;outline:none;font-family:inherit}.pg-select:hover{border-color:var(--color-border-hover)}.pg-select:focus{border-color:var(--color-brand-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-brand-accent), transparent 80%)}.pg-toggle{align-items:center;gap:var(--spacing-2);cursor:pointer;background:0 0;border:none;padding:0;font-family:inherit;display:inline-flex}.pg-toggle .pg-toggle-thumb{background:var(--color-slate-300);border-radius:var(--radius-full);width:36px;height:20px;transition:background var(--duration-base);position:relative}.pg-toggle .pg-toggle-thumb:after{content:"";background:var(--color-white);border-radius:var(--radius-full);width:16px;height:16px;box-shadow:var(--shadow-sm);transition:transform var(--duration-base);position:absolute;top:2px;left:2px}.pg-toggle--on .pg-toggle-thumb{background:var(--color-brand-accent)}.pg-toggle--on .pg-toggle-thumb:after{transform:translate(16px)}.pg-toggle-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-muted)}.pg-toggle--on .pg-toggle-label{color:var(--color-brand-accent)}.pg-input{width:100%;padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-text-main);background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:border-color var(--duration-base);outline:none;font-family:inherit}.pg-input:focus{border-color:var(--color-brand-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-brand-accent), transparent 80%)}.pg-input--number{width:80px}.pg-code{border-top:1px solid var(--color-border)}.pg-code-bar{padding:0 var(--spacing-4);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;display:flex}.pg-code-tabs{display:flex}.pg-code-tab{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.03em;color:var(--color-text-muted);cursor:pointer;transition:all var(--duration-base);background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px}.pg-code-tab:hover{color:var(--color-text-main)}.pg-code-tab--active{color:var(--color-brand-primary);border-bottom-color:var(--color-brand-primary)}.pg-copy{align-items:center;gap:var(--spacing-1);padding:var(--spacing-1) var(--spacing-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-surface);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);cursor:pointer;transition:all var(--duration-base);font-family:inherit;display:inline-flex}.pg-copy:hover{border-color:var(--color-brand-primary);color:var(--color-brand-primary)}.pg-pre{padding:var(--spacing-4);background:var(--color-bg-surface-secondary);font-family:JetBrains Mono,Fira Code,monospace;font-size:var(--font-size-xs);color:var(--color-text-main);margin:0;line-height:1.6;overflow-x:auto}.pg-extras{margin-top:var(--spacing-8)}.pg-extras-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin-bottom:var(--spacing-4)}:root[data-theme=dark] .pg-seg-btn{background:var(--color-bg-surface)}:root[data-theme=dark] .pg-seg-btn--active{background:var(--color-brand-primary)}:root[data-theme=dark] .pg-toggle .pg-toggle-thumb{background:var(--color-slate-600)}:root[data-theme=dark] .pg-toggle--on .pg-toggle-thumb{background:var(--color-brand-accent)}.foundation-token{font-family:JetBrains Mono,Fira Code,monospace;font-size:var(--font-size-xs);color:var(--color-brand-primary);background:var(--color-bg-surface-secondary);border-radius:var(--radius-sm);padding:2px 6px}.foundation-token--wide{min-width:120px;display:inline-block}.foundation-value{font-size:var(--font-size-xs);color:var(--color-text-muted);font-family:JetBrains Mono,Fira Code,monospace}.foundation-copy{width:24px;height:24px;color:var(--color-text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--duration-base);font-size:var(--font-size-xs);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.foundation-copy:hover{background:var(--color-bg-surface-secondary);color:var(--color-brand-primary)}.foundation-grid{gap:var(--spacing-3);margin-bottom:var(--spacing-6);grid-template-columns:repeat(auto-fill,minmax(160px,1fr));display:grid}.foundation-grid--wide{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.foundation-color-card{border:1px solid var(--color-border);border-radius:var(--radius-md);transition:border-color var(--duration-base);overflow:hidden}.foundation-color-card:hover{border-color:var(--color-border-hover)}.foundation-color-swatch{height:72px}.foundation-color-info{padding:var(--spacing-2) var(--spacing-3)}.foundation-color-info strong{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-main);margin-bottom:var(--spacing-1);display:block}.foundation-color-actions{flex-direction:column;gap:2px;display:flex}.foundation-color-btn{text-align:left;width:100%;font-size:var(--font-size-xs);color:var(--color-text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--duration-base);background:0 0;border:none;padding:3px 6px;font-family:JetBrains Mono,Fira Code,monospace;display:block}.foundation-color-btn code{color:var(--color-brand-primary);font-family:inherit}.foundation-color-btn:hover{background:var(--color-bg-surface-secondary);color:var(--color-text-main)}.foundation-callout{background:var(--color-bg-surface-subtle);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-4);margin-bottom:var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-text-secondary);gap:var(--spacing-2);display:grid}.foundation-callout strong{color:var(--color-text-main)}.foundation-type-list{flex-direction:column;gap:0;display:flex}.foundation-type-row{padding:var(--spacing-4) 0;border-bottom:1px solid var(--color-bg-surface-secondary)}.foundation-type-row:last-child{border-bottom:none}.foundation-type-sample{color:var(--color-text-main);margin-bottom:var(--spacing-2)}.foundation-type-meta{align-items:center;gap:var(--spacing-3);display:flex}.foundation-spacing-list{gap:var(--spacing-2);flex-direction:column;display:flex}.foundation-spacing-row{align-items:center;gap:var(--spacing-3);display:flex}.foundation-spacing-bar{background:color-mix(in srgb, var(--color-brand-primary), transparent 80%);border-radius:var(--radius-sm);min-width:4px;height:28px}.foundation-shadow-card{padding:var(--spacing-6) var(--spacing-4);background:var(--color-bg-surface);border-radius:var(--radius-lg);align-items:center;gap:var(--spacing-2);text-align:center;flex-direction:column;display:flex}.foundation-shadow-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-main)}.foundation-radius-list{gap:var(--spacing-6);flex-wrap:wrap;display:flex}.foundation-radius-row{align-items:center;gap:var(--spacing-2);flex-direction:column;display:flex}.foundation-radius-box{background:color-mix(in srgb, var(--color-brand-primary), transparent 85%);border:2px solid color-mix(in srgb, var(--color-brand-primary), transparent 60%);width:80px;height:80px}.foundation-radius-meta{flex-direction:column;align-items:center;gap:2px;display:flex}.foundation-css-block{border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-top:var(--spacing-4);overflow:hidden}.foundation-css-bar{padding:var(--spacing-2) var(--spacing-4);border-bottom:1px solid var(--color-border);background:var(--color-bg-surface);justify-content:space-between;align-items:center;display:flex}.foundation-css-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted)}.guide-node{margin-bottom:var(--spacing-2)}.guide-question{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-main);padding:var(--spacing-3) var(--spacing-4);background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:var(--spacing-3)}.guide-branches{gap:var(--spacing-4);padding-left:var(--spacing-4);grid-template-columns:1fr 1fr;display:grid}.guide-branch-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);text-transform:uppercase;letter-spacing:.05em;padding:var(--spacing-1) var(--spacing-3);border-radius:var(--radius-full);margin-bottom:var(--spacing-2);display:inline-block}.guide-branch-yes{background:color-mix(in srgb, var(--color-success), transparent 88%);color:var(--color-success)}.guide-branch-no{background:color-mix(in srgb, var(--color-brand-accent), transparent 88%);color:var(--color-brand-accent)}.guide-options{padding-left:var(--spacing-4);flex-direction:column;gap:2px;display:flex}.guide-option{align-items:center;gap:var(--spacing-3);padding:var(--spacing-2) var(--spacing-3);border-radius:var(--radius-md);color:inherit;transition:background var(--duration-base);text-decoration:none;display:flex}.guide-option:hover{background:var(--color-bg-surface-secondary)}.guide-option-label{font-size:var(--font-size-sm);color:var(--color-text-secondary);flex:1}.guide-option-arrow{color:var(--color-text-muted);font-size:var(--font-size-sm)}.guide-option-answer{font-family:JetBrains Mono,Fira Code,monospace;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);background:color-mix(in srgb, var(--color-brand-primary), transparent 90%);color:var(--color-brand-primary);border-radius:var(--radius-sm);padding:2px 8px}.guide-comparison{border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:var(--spacing-4);overflow:hidden}.guide-comparison-title{font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);padding:var(--spacing-3) var(--spacing-4);background:var(--color-bg-surface-secondary);border-bottom:1px solid var(--color-border)}.guide-comparison-grid{grid-template-columns:1fr auto 1fr;align-items:stretch;display:grid}.guide-comparison-side{padding:var(--spacing-4)}.guide-comparison-vs{padding:0 var(--spacing-3);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);color:var(--color-text-muted);border-left:1px solid var(--color-border);border-right:1px solid var(--color-border);align-items:center;display:flex}.guide-comparison-name{font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);color:var(--color-brand-primary);margin-bottom:var(--spacing-2)}.guide-comparison-use{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--spacing-2);line-height:1.5}.guide-comparison-example{font-size:var(--font-size-xs);color:var(--color-text-muted);font-style:italic}.guide-ref-group{margin-bottom:var(--spacing-6)}.guide-ref-title{font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin-bottom:var(--spacing-2)}.guide-ref-items{gap:var(--spacing-2);grid-template-columns:repeat(auto-fill,minmax(180px,1fr));display:grid}.guide-ref-item{padding:var(--spacing-3);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:all var(--duration-base);flex-direction:column;text-decoration:none;display:flex}.guide-ref-item:hover{border-color:var(--color-brand-primary);background:color-mix(in srgb, var(--color-brand-primary), transparent 96%)}.guide-ref-name{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-main)}.guide-ref-desc{font-size:var(--font-size-xs);color:var(--color-text-muted)}