.page-component .page-hero{padding:64px 0 48px;background:radial-gradient(800px 400px at 80% -100px,var(--brand-50),transparent 60%),var(--white);border-bottom:1px solid var(--gray-200)}.page-component .page-hero h1{font-size:clamp(40px,6vw,72px);line-height:1;letter-spacing:-.03em;font-weight:600;color:var(--gray-950);margin:8px 0 0}.page-component .page-hero .lead{margin-top:16px;max-width:760px}.cp-title-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.cp-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--gray-500);margin-bottom:16px}.cp-breadcrumb a{color:var(--gray-600);text-decoration:none;transition:color .15s}.cp-breadcrumb a:hover{color:var(--brand-700)}.cp-breadcrumb-sep{color:var(--gray-300)}.cp-pro-badge{display:inline-flex;align-items:center;background:var(--brand-50);color:var(--brand-700);border:1px solid var(--brand-100);border-radius:var(--radius-full);font-family:var(--font-mono);font-weight:600;letter-spacing:.08em}.cp-pro-badge-sm{font-size:9px;padding:2px 7px}.cp-pro-badge-lg{font-size:12px;padding:4px 12px;margin-top:4px}.cp-section{padding:72px 0}.cp-section .container>*+*{margin-top:32px}.cp-description{font-size:17px;line-height:1.65;color:var(--gray-700);max-width:800px}.cp-h2{font-size:clamp(24px,2.4vw,30px);line-height:1.15;letter-spacing:-.018em;font-weight:600;color:var(--gray-950);margin:48px 0 16px}.cp-h2-spaced{margin-top:64px}.cp-help{color:var(--gray-600);font-size:14px;max-width:720px}.cp-card-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}@media (max-width: 920px){.cp-card-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.cp-card-grid{grid-template-columns:1fr}}.cp-card{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:var(--radius-2xl);border:1px solid var(--gray-200);background:var(--white);text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}.cp-card:hover{border-color:var(--gray-300);box-shadow:var(--shadow-md);transform:translateY(-2px)}.cp-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.cp-card h3{font-size:16px;font-weight:600;color:var(--gray-950);margin:0;letter-spacing:-.01em}.cp-card p{font-size:13px;color:var(--gray-600);line-height:1.5;flex:1;margin:0}.cp-card-cta{font-size:13px;color:var(--brand-700);font-weight:600;display:inline-flex;align-items:center;gap:4px;margin-top:8px}.cp-card:hover .cp-card-cta .arrow{transform:translate(3px)}.cp-card-cta .arrow{transition:transform .15s ease-out}.cp-storybook-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:32px 36px;border-radius:var(--radius-3xl);background:linear-gradient(180deg,var(--gray-50),var(--white));border:1px solid var(--gray-200);margin-top:48px}.cp-storybook-cta h3{font-size:20px;font-weight:600;color:var(--gray-950);margin:0}.cp-storybook-cta p{font-size:14px;color:var(--gray-600);margin:4px 0 0}.cp-image-slot{margin:0 0 48px}.cp-image-placeholder{aspect-ratio:16/7;border:2px dashed var(--gray-300);border-radius:var(--radius-3xl);display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,var(--gray-50),var(--gray-50) 12px,var(--white) 12px,var(--white) 24px)}.cp-image-label{font-family:var(--font-mono);font-size:13px;color:var(--gray-500);letter-spacing:.02em}.cp-image-slot figcaption{font-size:13px;color:var(--gray-500);margin-top:12px}.cp-grid{display:grid;grid-template-columns:1fr 320px;gap:48px;margin-top:32px}@media (max-width: 920px){.cp-grid{grid-template-columns:1fr}}.cp-main>.cp-h2:first-child{margin-top:0}.cp-main .cp-h2+.cp-para,.cp-main .cp-h2+.cp-bullets,.cp-main .cp-h2+.cp-props-table{margin-top:0}.cp-main .cp-para{font-size:15px;line-height:1.7;color:var(--gray-700);margin-top:16px;max-width:720px}.cp-bullets{margin-top:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:12px}.cp-bullets li{font-size:14px;line-height:1.6;color:var(--gray-700);padding-left:28px;position:relative}.cp-bullets li:before{content:"→";position:absolute;left:0;top:0;color:var(--brand-600);font-weight:600}.cp-props-table{border:1px solid var(--gray-200);border-radius:var(--radius-xl);overflow:hidden;background:var(--white)}.cp-props-row{display:grid;grid-template-columns:140px 200px 1fr;gap:16px;padding:12px 16px;font-size:13px;border-top:1px solid var(--gray-100)}@media (max-width: 600px){.cp-props-row{grid-template-columns:1fr;gap:6px}}.cp-props-row.cp-props-head{background:var(--gray-50);font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;color:var(--gray-600);border-top:none}.cp-prop-name{font-family:var(--font-mono);font-weight:600;color:var(--gray-950)}.cp-prop-type{font-family:var(--font-mono);color:var(--brand-700);font-size:12px}.cp-prop-desc{color:var(--gray-600)}.cp-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:96px;align-self:start}@media (max-width: 920px){.cp-side{position:static}}.cp-side-card{padding:24px;border:1px solid var(--gray-200);border-radius:var(--radius-2xl);background:var(--white)}.cp-side-card h3{font-size:13px;font-weight:600;color:var(--gray-950);text-transform:uppercase;letter-spacing:.06em;margin:0 0 4px}.cp-side-help{font-size:12px;color:var(--gray-500);margin:0 0 16px}.cp-related-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}.cp-related-list a{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:var(--radius-md);font-size:13px;font-weight:500;color:var(--gray-800);text-decoration:none;transition:background .12s,color .12s}.cp-related-list a:hover{background:var(--gray-50);color:var(--brand-700)}.cp-side-count{font-family:var(--font-mono);font-size:11px;color:var(--gray-500);background:var(--gray-100);padding:2px 6px;border-radius:var(--radius-xs);font-weight:500}.cp-storybook-frame{border:1px solid var(--gray-200);border-radius:var(--radius-2xl);overflow:hidden;background:var(--white);box-shadow:var(--shadow-md)}.cp-storybook-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--gray-100);border-bottom:1px solid var(--gray-200)}.cp-storybook-dots{display:flex;gap:6px}.cp-storybook-dots span{width:10px;height:10px;border-radius:50%;background:var(--gray-300)}.cp-storybook-url{flex:1;font-family:var(--font-mono);font-size:12px;color:var(--gray-600);background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:4px 10px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-storybook-popout{display:inline-flex;align-items:center;font-size:12px;font-weight:600;color:var(--brand-700);text-decoration:none;padding:4px 8px;border-radius:var(--radius-md);transition:background .12s,color .12s}.cp-storybook-popout:hover{background:var(--white);color:var(--brand-800)}.cp-storybook-frame-top{margin-bottom:48px}.cp-storybook-loading{min-height:500px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:32px;background:var(--white);border-top:1px solid var(--gray-100)}.cp-storybook-loading-bar{width:60%;max-width:280px;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--gray-100),var(--gray-200),var(--gray-100));background-size:200% 100%;animation:cp-storybook-shimmer 1.4s ease-in-out infinite}.cp-storybook-loading-label{margin:0;font-family:var(--font-mono);font-size:12px;color:var(--gray-500);letter-spacing:.02em;text-align:center;max-width:480px;line-height:1.5}@keyframes cp-storybook-shimmer{0%,to{background-position:200% 0}50%{background-position:0% 0}}@media (prefers-reduced-motion: reduce){.cp-storybook-loading-bar{animation:none}}.cp-storybook-loading-failed{background:repeating-linear-gradient(45deg,var(--gray-50) 0 12px,var(--white) 12px 24px)}.cp-storybook-frame-empty .cp-storybook-empty{padding:64px 32px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;background:repeating-linear-gradient(45deg,var(--gray-50) 0 12px,var(--white) 12px 24px);min-height:280px;border-top:1px solid var(--gray-100)}.cp-storybook-empty-eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--gray-500);margin-bottom:12px}.cp-storybook-empty-title{margin:0 0 8px;font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--gray-900);max-width:540px}.cp-storybook-empty-help{margin:0;font-size:14px;line-height:1.6;color:var(--gray-600);max-width:540px}.cp-other-cats{padding:72px 0;background:var(--gray-50);border-top:1px solid var(--gray-200)}.cp-other-cats-grid{list-style:none;padding:0;margin:32px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}@media (max-width: 920px){.cp-other-cats-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 480px){.cp-other-cats-grid{grid-template-columns:1fr}}.cp-other-cats-grid a{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border:1px solid var(--gray-200);background:var(--white);border-radius:var(--radius-md);font-size:14px;font-weight:500;color:var(--gray-900);text-decoration:none;transition:border-color .12s,color .12s}.cp-other-cats-grid a:hover{border-color:var(--brand-300);color:var(--brand-700)}.cp-other-cats-count{font-family:var(--font-mono);font-size:11px;color:var(--gray-500);background:var(--gray-100);padding:2px 6px;border-radius:var(--radius-xs);font-weight:500}