.components-page{z-index:1;--color-step-number:#00bceb14;padding-top:40px;padding-bottom:80px;position:relative}[data-theme=dark] .components-page{--color-step-number:#3fc6ee0f}.components-page .comp-header{margin-bottom:48px}.components-page .comp-label{text-transform:uppercase;letter-spacing:2.5px;color:var(--color-accent);margin:0 0 12px;font-size:.75em;font-weight:700}.components-page .comp-header h1{margin:0 0 16px;font-size:3em;font-weight:200}.components-page .comp-desc{color:var(--color-text-muted);max-width:640px;margin:0;font-size:1.05em;line-height:1.6}.components-page .comp-jump-nav{flex-wrap:wrap;gap:8px;margin-top:32px;display:flex}.components-page .comp-jump-nav a{border:1px solid var(--color-border);border-radius:6px;padding:6px 14px;font-size:.82em;font-weight:500;transition:background .15s,border-color .15s;color:var(--color-text)!important}.components-page .comp-jump-nav a:hover{background:var(--color-hover);border-color:var(--color-border-medium)}.components-page .comp-showcase{border:1px solid var(--color-border);border-radius:16px;margin-bottom:48px;overflow:hidden}.components-page .comp-showcase-label{border-bottom:1px solid var(--color-border);background:var(--color-hover);justify-content:space-between;align-items:center;padding:16px 28px;display:flex}.components-page .comp-showcase-name{color:var(--color-text);font-size:1.05em;font-weight:600}.components-page .comp-showcase-usage{color:var(--color-text-muted);font-size:.78em}.components-page .comp-preview{padding:32px 28px}.components-page .comp-schema{border-top:1px solid var(--color-border);background:var(--color-hover);padding:20px 28px}.components-page .comp-schema-table{border-collapse:collapse;width:100%;font-size:.85em}.components-page .comp-schema-table th{text-align:left;text-transform:uppercase;letter-spacing:.5px;color:var(--color-text-subtle);border-bottom:1px solid var(--color-border-medium);padding:6px 10px;font-size:.8em;font-weight:600}.components-page .comp-schema-table td{border-bottom:1px solid var(--color-border);vertical-align:top;color:var(--color-text-muted);padding:5px 10px}.components-page .comp-schema-table tr:last-child td{border-bottom:none}.components-page .comp-schema-table code{color:var(--color-text);font-family:SF Mono,Fira Code,monospace;font-size:.95em;font-weight:500}.components-page .comp-field-req{color:#eb7251;text-transform:uppercase;letter-spacing:.5px;font-size:.75em;font-weight:600}.components-page .page-hero{flex-direction:column;padding:24px 0 64px;display:flex}.components-page .page-hero-title h1{margin:0;font-size:2.2em;font-weight:600}.components-page .page-hero-inner{align-items:flex-start;gap:0;display:flex}.components-page .page-hero-text{flex:5;padding-right:40px}.components-page .page-hero-image{border-radius:16px;flex:7;overflow:hidden}.components-page .sdk-cta{color:var(--color-text);z-index:0;cursor:pointer;background:0 0;border:none;border-radius:999px;align-items:center;gap:8px;padding:14px 28px;font-family:inherit;font-size:1em;font-weight:500;transition:transform .2s;display:inline-flex;position:relative}.components-page .sdk-cta:before{content:"";-webkit-mask-composite:xor;pointer-events:none;background:conic-gradient(from 180deg,#ff6b6b,#a855f7,#6366f1,#3b82f6,#00bceb,#10b981,#eab308,#ff6b6b);border-radius:999px;padding:1.5px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.components-page .secure-card{border:1px solid var(--color-border);background:var(--color-blog-card-bg);border-radius:12px;padding:32px}.components-page .secure-card h3{margin:0 0 10px;font-size:1.4em;font-weight:500}.components-page .secure-card p{color:var(--color-text-muted);margin:0;font-size:.95em;line-height:1.7}.components-page .step-number{color:var(--color-step-number);margin-bottom:8px;font-size:3em;font-weight:700}.components-page .step-title{margin:0 0 6px;font-size:1.4em;font-weight:600}.components-page .step-subtitle{color:var(--color-text-muted);margin:0 0 12px;font-size:.95em;font-style:italic}.components-page .step-desc{color:var(--color-text-muted);margin:0 0 16px;font-size:.95em;line-height:1.7}.components-page .step-quote{border-left:3px solid var(--color-accent);color:var(--color-text-muted);margin:0 0 16px;padding:12px 16px;font-size:.95em;font-style:italic}.components-page .step-list{color:var(--color-text-muted);margin:0 0 16px;padding-left:20px;font-size:.95em;line-height:1.8}.components-page .step-deliverable{background:var(--color-hover);border-radius:12px;padding:16px 20px}.components-page .step-deliverable-title{align-items:center;gap:8px;margin:0 0 8px;font-size:.9em;font-weight:600;display:flex}.components-page .step-deliverable-title svg{width:16px;height:16px}.components-page .step-deliverable .step-list{margin-bottom:0}.components-page .case-study-card{border:1px solid var(--color-border);border-radius:16px;margin-bottom:24px;padding:32px}.components-page .case-study-label{text-transform:uppercase;letter-spacing:1.5px;color:var(--color-accent);margin:0 0 10px;font-size:.7em;font-weight:700}.components-page .case-study-card h3{margin:0 0 12px;font-size:1.3em;font-weight:600}.components-page .case-study-tags{flex-wrap:wrap;gap:6px;margin:0 0 16px;display:flex}.components-page .case-study-tags span{background:var(--color-tag-bg);border:1px solid var(--color-tag-border);color:var(--color-tag-text);border-radius:20px;padding:4px 12px;font-size:.8em}.components-page .case-study-desc{color:var(--color-text-muted);margin:0 0 16px;font-size:.95em;line-height:1.7}.components-page .case-study-problem{background:var(--color-hover);border-radius:12px;margin:0 0 16px;padding:16px 20px}.components-page .case-study-problem-title{align-items:center;gap:8px;margin:0 0 8px;font-size:.9em;font-weight:600;display:flex}.components-page .case-study-problem-title svg{width:16px;height:16px}.components-page .case-study-problem p{color:var(--color-text-muted);margin:0;font-size:.9em;line-height:1.6}.components-page .case-study-principles-label{text-transform:uppercase;letter-spacing:1px;color:var(--color-text-subtle);margin:0 0 8px;font-size:.75em;font-weight:700}.components-page .case-study-themes{flex-wrap:wrap;gap:6px;display:flex}.components-page .case-study-themes span{background:var(--color-hover);border:1px solid var(--color-border-medium);color:var(--color-text-muted);border-radius:20px;padding:4px 12px;font-size:.8em}.components-page .research-item{border-bottom:1px solid var(--color-border);align-items:flex-start;gap:32px;padding:32px 0;display:flex}.components-page .research-item-text{flex:1}.components-page .research-item-text h3{margin:0 0 10px}.components-page .research-item-text p{color:var(--color-text-muted);margin:0 0 12px;font-size:.95em;line-height:1.7}.components-page .research-item-text ul{color:var(--color-text-muted);margin:0;padding-left:20px;font-size:.9em;line-height:1.8}.components-page .research-item-image{flex:0 0 240px}.components-page .research-item-image img{object-fit:cover;border-radius:12px;width:100%;height:180px;display:block}.components-page .blog-card{background:var(--color-blog-card-bg);border:1px solid var(--color-border);border-radius:16px;flex-direction:column;justify-content:space-between;padding:32px;transition:transform .3s,box-shadow .3s;display:flex;overflow:hidden}.components-page .blog-card:hover{box-shadow:0 12px 40px var(--color-shadow);transform:translateY(-4px)}.components-page .blog-card h4{color:var(--color-text);margin:0 0 12px;font-size:20px;font-weight:500;line-height:1.3}.components-page .blog-desc{color:var(--color-text-subtle);margin:0;font-size:.88em;line-height:1.6}.components-page .use-case-tag{background:var(--color-tag-bg);border:1px solid var(--color-tag-border);color:var(--color-tag-text);border-radius:20px;padding:4px 12px;font-size:.8em}.components-page .pattern-filter{border:1px solid var(--color-border-medium);color:var(--color-text-muted);cursor:pointer;background:0 0;border-radius:20px;padding:8px 18px;font-family:inherit;font-size:.85em;transition:background .2s,color .2s}.components-page .pattern-filter:before{content:none}.components-page .pattern-filter.is-active{background:var(--color-text);color:var(--color-bg);border-color:var(--color-text)}.components-page .pattern-title{margin:0 0 12px;font-size:1.5em;font-weight:200}.components-page .pattern-desc{color:var(--color-text-muted);font-size:.95em;line-height:1.6}.components-page .pattern-examples-label{font-size:1.2em;font-weight:200}.components-page .responsible-step{border-bottom:1px solid var(--color-border);align-items:flex-start;gap:32px;padding:32px 0;display:flex}.components-page .responsible-step-image{flex:0 0 140px}.components-page .responsible-step-content{flex:1}.components-page .responsible-step-label{text-transform:uppercase;letter-spacing:1.5px;color:var(--color-accent);margin:0 0 6px;font-size:.7em;font-weight:700}.components-page .responsible-step-content h3{margin:0 0 12px}.components-page .responsible-step-content ul{color:var(--color-text-muted);margin:0 0 12px;padding-left:20px;font-size:.9em;line-height:1.8}.components-page .responsible-step-template{color:var(--color-text-muted);font-size:.85em}.components-page .innovation-tags a{background:var(--color-tag-bg);border:1px solid var(--color-tag-border);border-radius:20px;padding:6px 16px;font-size:.85em;display:inline-block;color:var(--color-tag-text)!important}.components-page .blog-hub-tag{background:var(--color-tag-bg);border:1px solid var(--color-tag-border);color:var(--color-tag-text);border-radius:20px;padding:6px 16px;font-size:.85em}.components-page .arrow-link{border:1px solid var(--color-border-medium);border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;transition:background .2s;display:inline-flex}.components-page .arrow-link:hover{background:var(--color-hover)}.components-page .arrow-link svg{width:16px;height:16px}.components-page .read-more{color:#1bcdff;font-size:.9em;font-weight:600}.components-page .footer-social-icons{gap:16px;display:flex}.components-page .footer-social-icons a{color:var(--color-text)}.components-page .footer-social-icons svg{width:20px;height:20px}@media (max-width:768px){.components-page .comp-header h1{font-size:2em}.components-page .comp-showcase-label{flex-direction:column;align-items:flex-start;gap:4px}.components-page .comp-preview{padding:20px 16px}.components-page .comp-schema{padding:16px}.components-page .comp-jump-nav a{padding:5px 10px;font-size:.78em}.components-page .page-hero-inner{flex-direction:column}.components-page .page-hero-text{padding-right:0!important}.components-page .research-item{flex-direction:column}.components-page .research-item-image{flex:none}.components-page .responsible-step{flex-direction:column}}@media (max-width:480px){.components-page .comp-header h1{font-size:1.6em}}