.sc-header{margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--border-color, #2a2a2a)}.sc-header-top{display:flex;align-items:flex-start;gap:16px;margin-bottom:12px}.sc-header-icon{font-size:2.4rem;line-height:1}.sc-header-title{margin:0;font-size:1.8rem;font-weight:800;letter-spacing:-.02em}.sc-header-subtitle{margin:4px 0 0;color:var(--text-secondary, #475569);font-size:1rem;line-height:1.5}.sc-header-meta{display:flex;align-items:center;gap:16px}.sc-header-npm{display:inline-block;padding:6px 14px;background:var(--bg-primary, #ffffff);border:1px solid var(--border-color, #2a2a2a);border-radius:8px;font-family:Fira Code,Cascadia Code,monospace;font-size:.82rem;color:var(--color-accent, #6c5ce7);cursor:pointer;transition:border-color .15s;user-select:all}.sc-header-npm:hover{border-color:var(--color-accent, #6c5ce7)}.sc-header-count{font-size:.82rem;color:var(--text-muted, #6b6b6b);padding:4px 12px;background:#6c5ce71a;border-radius:20px}.sc-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:28px;padding:12px;background:var(--bg-secondary, #141414);border:1px solid var(--border-color, #2a2a2a);border-radius:var(--nice-radius-md, 14px)}.sc-tab{display:flex;align-items:center;gap:6px;padding:8px 14px;background:var(--bg-elevated, #141414);border:1px solid var(--border-color, #2a2a2a);border-radius:8px;color:var(--text-secondary, #475569);font-size:.82rem;font-family:inherit;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap}.sc-tab:hover{color:var(--text-primary, #ffffff);background:var(--hover-bg, #f1f5f9);border-color:var(--text-muted, #6b6b6b)}.sc-tab.active{color:var(--color-accent-hover, #a29bfe);background:#6c5ce726;border-color:var(--color-accent, #6c5ce7);box-shadow:0 0 0 1px #6c5ce74d}.sc-tab-icon{font-size:1rem}.pg{margin-bottom:28px;background:var(--bg-elevated, #141414);border:1px solid var(--border-color, #2a2a2a);border-radius:14px;overflow:visible;transition:border-color .2s}.pg:hover{border-color:color-mix(in srgb,var(--color-accent, #6c5ce7) 40%,transparent)}.pg-header{padding:20px 24px 16px;border-bottom:1px solid var(--border-color, #2a2a2a)}.pg-title{margin:0 0 4px;font-size:1.05rem;font-weight:700;color:var(--text-primary, #ffffff)}.pg-title-link{display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;transition:color .15s,opacity .15s}.pg-title-link:hover{color:var(--color-primary, #6c5ce7)}.pg-title-icon{font-size:.85em;opacity:0;transition:opacity .15s}.pg-title-link:hover .pg-title-icon{opacity:1}.pg-desc{margin:0 0 8px;font-size:.85rem;color:var(--text-secondary, #475569);line-height:1.5}.pg-import{display:inline-block;padding:4px 10px;background:var(--bg-primary, #ffffff);border-radius:6px;font-family:Fira Code,monospace;font-size:.75rem;color:var(--text-muted, #6b6b6b)}.pg-variants{display:flex;gap:2px;padding:0 24px;border-bottom:1px solid var(--border-color, #2a2a2a);background:var(--bg-secondary, #141414);overflow-x:auto}.pg-variant-tab{padding:8px 16px;border:none;background:none;color:var(--text-secondary, #888);font-size:.78rem;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap}.pg-variant-tab:hover{color:var(--text-primary, #fff)}.pg-variant-tab.active{color:var(--color-primary, #6c5ce7);border-bottom-color:var(--color-primary, #6c5ce7)}.pg-options-bar{display:flex;gap:20px;padding:8px 16px;border-bottom:1px solid var(--border-color, #2a2a2a);align-items:center;flex-wrap:wrap}.pg-options-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;opacity:.5;margin-right:4px}.pg-size-selector,.pg-state-toggles{display:flex;gap:4px;align-items:center}.pg-size-btn{padding:2px 10px;font-size:.75rem;border:1px solid var(--border-color, #333);border-radius:4px;background:transparent;color:var(--text-color, #ccc);cursor:pointer;transition:all .15s}.pg-size-btn:hover{border-color:var(--color-primary, #6c5ce7)}.pg-size-btn.active{background:var(--color-primary, #6c5ce7);color:#fff;border-color:var(--color-primary, #6c5ce7)}.pg-state-chip{padding:2px 10px;font-size:.75rem;border:1px solid var(--border-color, #333);border-radius:12px;background:transparent;color:var(--text-color, #ccc);cursor:pointer;transition:all .15s}.pg-state-chip:hover{border-color:var(--color-accent, #e17055)}.pg-state-chip.active{background:#e1705533;color:#e17055;border-color:#e17055}.pg-body{display:flex;min-height:120px}.pg-preview{flex:1;padding:24px;display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;min-height:80px;min-width:0;max-width:100%;overflow-x:auto}.pg-preview-dark{background:var(--bg-primary, #ffffff)}.pg-controls{width:260px;flex-shrink:0;border-left:1px solid var(--border-color, #2a2a2a);background:#00000026}.pg-controls-header{display:flex;align-items:center;gap:6px;padding:10px 16px;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted, #6b6b6b);border-bottom:1px solid var(--border-color, #2a2a2a)}.pg-controls-icon{font-size:.9rem}.pg-controls-list{padding:8px 0}.pg-ctrl-row{display:flex;align-items:center;justify-content:space-between;padding:6px 16px;font-size:.82rem;cursor:default}.pg-ctrl-row:hover{background:#ffffff05}.pg-ctrl-label{color:var(--text-secondary, #475569);font-weight:500;min-width:70px}.pg-ctrl-select{width:110px;padding:4px 8px;background:var(--bg-elevated, #141414);border:1px solid var(--border-color, #2a2a2a);border-radius:6px;color:var(--text-primary, #ffffff);font-family:inherit;font-size:.78rem;cursor:pointer;outline:none}.pg-ctrl-select:focus{border-color:var(--color-accent, #6c5ce7)}.pg-ctrl-check{width:16px;height:16px;accent-color:var(--color-accent, #6c5ce7);cursor:pointer}.pg-ctrl-number-wrap{display:flex;align-items:center;gap:8px}.pg-ctrl-range{width:80px;accent-color:var(--color-accent, #6c5ce7);cursor:pointer}.pg-ctrl-number-val{font-family:Fira Code,monospace;font-size:.75rem;color:var(--color-accent, #6c5ce7);min-width:24px;text-align:right}.pg-ctrl-text{width:110px;padding:4px 8px;background:var(--bg-elevated, #141414);border:1px solid var(--border-color, #2a2a2a);border-radius:6px;color:var(--text-primary, #ffffff);font-family:inherit;font-size:.78rem;outline:none}.pg-ctrl-text:focus{border-color:var(--color-accent, #6c5ce7)}.pg-ctrl-color-wrap{display:flex;align-items:center;gap:6px}.pg-ctrl-color{width:28px;height:28px;padding:0;border:1px solid var(--border-color, #2a2a2a);border-radius:6px;cursor:pointer;background:transparent}.pg-ctrl-color-val{font-family:Fira Code,monospace;font-size:.72rem;color:var(--text-muted, #6b6b6b)}.pg-code-section{border-top:1px solid var(--border-color, #2a2a2a)}.pg-code-toggle{width:100%;padding:10px 24px;background:none;border:none;color:var(--text-muted, #6b6b6b);font-family:inherit;font-size:.78rem;text-align:left;cursor:pointer;transition:color .15s}.pg-code-toggle:hover{color:var(--color-accent, #6c5ce7)}.pg-code{margin:0;padding:16px 24px;background:var(--bg-primary, #ffffff);font-family:Fira Code,Cascadia Code,monospace;font-size:.78rem;line-height:1.6;color:var(--text-secondary, #475569);overflow-x:auto;white-space:pre;border-top:1px solid var(--border-color, #2a2a2a)}.pg-mock-data{padding:8px 24px 16px}.pg-mock-entry{margin-bottom:12px}.pg-mock-entry:last-child{margin-bottom:0}.pg-mock-label{padding:4px 0;font-size:.75rem;font-weight:600;color:var(--color-accent, #6c5ce7);letter-spacing:.02em}.pg-mock-entry .pg-code{border-radius:6px;border:1px solid var(--border-color, #2a2a2a);max-height:300px}.pg-mock-badge{margin-left:6px;font-size:.85em;opacity:.7}.sc-component-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.sc-component-chip{display:inline-flex;align-items:center;padding:4px 12px;background:var(--bg-primary, #ffffff);border:1px solid var(--border-color, #2a2a2a);border-radius:20px;font-family:Fira Code,monospace;font-size:.72rem;color:var(--text-secondary, #475569);transition:all .15s}.sc-component-chip:hover{border-color:var(--color-accent, #6c5ce7);color:var(--color-accent, #6c5ce7)}.sc-toc{margin-top:12px}.sc-toc-search{display:flex;align-items:center;gap:8px;margin-bottom:12px}.sc-toc-input{flex:1;padding:8px 14px;background:var(--bg-primary, #ffffff);border:1px solid var(--border-color, #2a2a2a);border-radius:8px;font-family:inherit;font-size:.85rem;color:var(--text-primary, #1e293b);outline:none;transition:border-color .15s}.sc-toc-input:focus{border-color:var(--color-accent, #6c5ce7)}.sc-toc-count{font-size:.75rem;color:var(--text-muted, #6b6b6b);white-space:nowrap}.sc-toc-list{display:flex;flex-wrap:wrap;gap:4px}.sc-toc-item{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;background:var(--bg-primary, #ffffff);border:1px solid var(--border-color, #2a2a2a);border-radius:6px;font-family:Fira Code,monospace;font-size:.72rem;color:var(--text-secondary, #475569);cursor:pointer;transition:all .15s}.sc-toc-item:hover{border-color:var(--color-accent, #6c5ce7);color:var(--color-accent, #6c5ce7);background:color-mix(in srgb,var(--color-accent, #6c5ce7) 6%,transparent)}.sc-toc-icon{font-size:.85em}.sc-toc-name{font-weight:500}.sc-toc-empty{padding:16px;font-size:.82rem;color:var(--text-muted, #6b6b6b);font-style:italic}.sc-prop-table-wrap{overflow-x:auto;margin-top:12px}.sc-prop-table{width:100%;border-collapse:collapse;font-size:.82rem}.sc-prop-table th{text-align:left;padding:8px 12px;background:var(--bg-primary, #ffffff);border-bottom:1px solid var(--border-color, #2a2a2a);color:var(--text-muted, #6b6b6b);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}.sc-prop-table td{padding:8px 12px;border-bottom:1px solid rgba(46,46,62,.5);vertical-align:top}.sc-prop-name{font-family:Fira Code,monospace;font-size:.78rem;color:var(--color-accent, #6c5ce7)}.sc-prop-req{color:#e84393;font-weight:700;margin-left:2px}.sc-prop-type{font-family:Fira Code,monospace;font-size:.72rem;color:#fdcb6e}.sc-prop-default{font-family:Fira Code,monospace;font-size:.72rem;color:var(--text-muted, #6b6b6b)}.sc-prop-desc{color:var(--text-secondary, #475569);line-height:1.4}.feature-list,.export-list{list-style:none;padding:0;margin:0}.feature-list li,.export-list li{padding:8px 0;border-bottom:1px solid rgba(46,46,62,.3);font-size:.88rem;color:var(--text-secondary, #475569)}.feature-list li:last-child,.export-list li:last-child{border-bottom:none}.feature-list li strong{color:var(--text-primary, #ffffff)}.export-list li code{font-family:Fira Code,monospace;color:var(--color-accent, #6c5ce7);font-size:.82rem}.code-block{padding:16px 20px;background:var(--bg-primary, #ffffff);border:1px solid var(--border-color, #2a2a2a);border-radius:10px;font-family:Fira Code,Cascadia Code,monospace;font-size:.78rem;line-height:1.6;color:var(--text-secondary, #475569);overflow-x:auto;white-space:pre;margin:16px 0}.privacy-table{width:100%;border-collapse:collapse;margin-top:12px;font-size:.85rem}.privacy-table th{text-align:left;padding:10px 16px;background:var(--bg-primary, #ffffff);border-bottom:1px solid var(--border-color, #2a2a2a);color:var(--text-muted, #6b6b6b);font-weight:600}.privacy-table td{padding:10px 16px;border-bottom:1px solid rgba(46,46,62,.5)}.ai-demo-form{display:flex;flex-direction:column;gap:20px;max-width:500px}.form-field{display:flex;flex-direction:column;gap:6px}.form-field label{font-size:.85rem;font-weight:600;color:var(--text-primary, #ffffff)}.form-field input[type=text],.form-field input[type=email],.form-field input[type=password]{padding:10px 14px;background:var(--bg-primary, #ffffff);border:1px solid var(--border-color, #2a2a2a);border-radius:8px;color:var(--text-primary, #ffffff);font-family:inherit;font-size:.9rem;outline:none}.form-field input:focus{border-color:var(--color-accent, #6c5ce7)}.field-with-hint{display:flex;gap:8px;align-items:center}.field-with-hint input{flex:1}.hook-demo{max-width:500px}.hook-demo button{margin-top:10px;padding:8px 20px;background:var(--color-accent, #6c5ce7);color:#fff;border:none;border-radius:8px;font-family:inherit;font-weight:600;cursor:pointer}.hook-demo button:disabled{opacity:.5}.ai-response{margin-top:16px;padding:16px;background:var(--bg-primary, #ffffff);border:1px solid var(--border-color, #2a2a2a);border-radius:8px}.error-text{color:#e84393;font-size:.85rem}.showcase-header{margin-bottom:32px}.showcase-header h1{font-size:1.8rem;font-weight:800;margin:0 0 6px}.showcase-header .showcase-subtitle{margin:0 0 10px;color:var(--text-secondary, #475569);font-size:.95rem}.showcase-header .showcase-npm{display:inline-block;padding:6px 14px;background:var(--bg-primary, #ffffff);border:1px solid var(--border-color, #2a2a2a);border-radius:8px;font-family:Fira Code,monospace;font-size:.82rem;color:var(--color-accent, #6c5ce7)}.showcase-tabs{display:flex;gap:2px;margin-bottom:24px;border-bottom:1px solid var(--border-color, #2a2a2a);overflow-x:auto;scrollbar-width:none}.showcase-tabs::-webkit-scrollbar{display:none}.showcase-tab{padding:10px 18px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-secondary, #475569);font-size:.88rem;font-family:inherit;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap}.showcase-tab:hover{color:var(--text-primary, #ffffff)}.showcase-tab.active{color:var(--color-accent, #6c5ce7);border-bottom-color:var(--color-accent, #6c5ce7)}.showcase-content{display:block}.demo-controls{display:flex;gap:8px;flex-wrap:wrap}.demo-controls button{padding:8px 16px;background:var(--bg-primary, #ffffff);border:1px solid var(--border-color, #2a2a2a);border-radius:8px;color:var(--text-secondary, #475569);font-family:inherit;font-size:.82rem;cursor:pointer;transition:all .15s}.demo-controls button:hover{border-color:var(--color-accent, #6c5ce7);color:var(--text-primary, #ffffff)}.demo-controls button.active{background:var(--color-accent, #6c5ce7);color:#fff;border-color:var(--color-accent, #6c5ce7)}@media(max-width:768px){.pg-body{flex-direction:column}.pg-controls{width:100%;border-left:none;border-top:1px solid var(--border-color, #2a2a2a)}.sc-header-top{flex-direction:column}.sc-header-meta{flex-direction:column;gap:8px}}