.components-layout{display:grid;grid-template-columns:250px 1fr;gap:3rem;max-width:1400px;margin:0 auto;padding:0 2rem}.components-toc{position:relative}.toc-sticky{position:sticky;top:2rem}.components-content{min-width:0}@media(max-width:1024px){.components-layout{grid-template-columns:1fr}.components-toc{margin-bottom:2rem}.toc-sticky{position:static}}.page-title{font-size:clamp(2rem,6vw,3.5rem);margin-bottom:1rem}.page-subtitle{font-size:1.25rem;color:hsl(var(--muted-foreground));line-height:1.6}h2{font-size:1.75rem;margin-bottom:.75rem}.section-description{color:hsl(var(--muted-foreground));margin-bottom:2rem}.props-docs{margin:2rem 0;padding:1.5rem;background:hsl(var(--muted));border-radius:var(--radius);border:1px solid hsl(var(--border))}.props-docs h3{font-size:1.125rem;font-weight:600;margin-bottom:1rem;color:hsl(var(--foreground))}.props-table{width:100%;border-collapse:collapse;margin-bottom:1.5rem;font-size:.9rem}.props-table thead{background:hsl(var(--accent))}.props-table th{padding:.75rem;text-align:left;font-weight:600;color:hsl(var(--foreground));border-bottom:2px solid hsl(var(--border))}.props-table td{padding:.75rem;border-bottom:1px solid hsl(var(--border))}@media(max-width:768px){.props-docs{padding:1rem;overflow-x:auto}.props-table{display:block;overflow-x:auto;white-space:nowrap;font-size:.85rem}.props-table th,.props-table td{padding:.5rem;min-width:80px}.props-docs:after{content:"← Scroll for more →";display:block;text-align:center;font-size:.75rem;color:hsl(var(--muted-foreground));opacity:.6;margin-top:.5rem}}.code-example{background:hsl(var(--background));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:1rem;overflow-x:auto;font-family:Fira Code,Cascadia Code,monospace;font-size:.85em;line-height:1.6;margin-top:1rem}.code-example code{background:none;padding:0;color:hsl(var(--foreground))}.component-demo{display:flex;flex-direction:column;gap:1.5rem;padding:2rem;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--accent)) / .3}.demo-section{display:flex;flex-direction:column;gap:1rem}.demo-label{font-size:.875rem;font-weight:600;text-transform:uppercase;color:hsl(var(--muted-foreground));letter-spacing:.05em}.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem}.demo-grid.gap-2{gap:.5rem}.demo-grid.gap-4{gap:1.5rem}.card-content{padding:1.5rem}.card-content h3{font-size:1.125rem;margin-bottom:.5rem}.card-content p{color:hsl(var(--muted-foreground));font-size:.95rem;line-height:1.6;margin-bottom:1rem}.layout-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-bottom:2rem}.two-column-layout{display:grid;grid-template-columns:1fr 1fr;gap:3rem}.form-demo{display:flex;flex-direction:column;gap:1.5rem;padding:2rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.bg-muted{background:hsl(var(--muted))}.stat-number{font-size:2.5rem;font-weight:700;color:hsl(var(--primary))}.stat-label{font-size:.875rem;color:hsl(var(--muted-foreground));font-weight:600;text-transform:uppercase}a{color:hsl(var(--primary));text-decoration:underline}a:hover{opacity:.8}.dropdown-item{display:block;width:100%;padding:.75rem 1rem;text-align:left;background:none;border:none;cursor:pointer;color:hsl(var(--foreground));font-size:inherit;transition:background .2s}.dropdown-item:hover{background:hsl(var(--accent))}.dropdown-item:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:-2px}.comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2rem}:global(.card-body ul){list-style-type:none!important}:global(.card-body li){position:relative!important;padding-left:1.5rem!important}:global(.card-body li:before){content:"•"!important;color:hsl(var(--primary))!important;position:absolute!important;left:.5rem!important;display:block!important}.logo-demo{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin:2rem 0}.logo-demo-item{display:flex;flex-direction:column;gap:1.5rem;padding:2rem;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--accent)) / .3}.logo-demo-preview{display:flex;align-items:center;justify-content:center;padding:2rem;border-radius:var(--radius);min-height:120px}.logo-demo-light{background:#fff}.logo-demo-dark{background:#1a1a1a}#logo-demo-light[data-color=blue],#ts-logo-demo-light[data-color=blue]{--logo-bg: 217 71% 40%;--logo-text: 0 0% 100%}#logo-demo-light[data-color=green],#ts-logo-demo-light[data-color=green]{--logo-bg: 155 100% 14%;--logo-text: 0 0% 100%}#logo-demo-light[data-color=gold],#ts-logo-demo-light[data-color=gold]{--logo-bg: 45 81% 51%;--logo-text: 0 0% 15%}#logo-demo-dark[data-color=blue],#ts-logo-demo-dark[data-color=blue]{--logo-bg: 0 0% 100%;--logo-text: 217 71% 40%}#logo-demo-dark[data-color=green],#ts-logo-demo-dark[data-color=green]{--logo-bg: 0 0% 100%;--logo-text: 155 100% 14%}#logo-demo-dark[data-color=gold],#ts-logo-demo-dark[data-color=gold]{--logo-bg: 0 0% 100%;--logo-text: 45 81% 51%}.logo-demo-size,.logo-demo-size.brand-logo,.logo-demo-preview .logo-demo-size,.logo-demo-preview svg.logo-demo-size,.logo-demo-preview svg.brand-logo.logo-demo-size{width:96px!important;height:96px!important;max-width:96px!important;max-height:96px!important;flex-shrink:0!important}.logo-demo-info h3{font-size:1.25rem;font-weight:600;margin-bottom:.5rem;color:hsl(var(--foreground))}.logo-demo-info p{color:hsl(var(--muted-foreground));line-height:1.6;margin-bottom:1rem}.logo-demo-info .code-block{display:block;background:hsl(var(--background));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:.75rem;font-family:Fira Code,Cascadia Code,monospace;font-size:.85em;color:hsl(var(--foreground));overflow-x:auto}kbd{display:inline-block;padding:.25rem .5rem;font-family:Fira Code,Cascadia Code,monospace;font-size:.85em;line-height:1;color:hsl(var(--foreground));background:hsl(var(--muted));border:1px solid hsl(var(--border));border-radius:calc(var(--radius) * .5);box-shadow:0 1px 2px #0000001a}@media(max-width:50rem){.two-column-layout{grid-template-columns:1fr;gap:2rem}.demo-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}.layout-info,.logo-demo{grid-template-columns:1fr}}