*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.grid{display:grid}.inline-block{display:inline-block}.flex{display:flex}.cursor-pointer{cursor:pointer}.border{border-width:1px}.rounded-md{border-radius:.375rem}.border-none{border-style:none}.bg-blue{--un-bg-opacity:1;background-color:rgb(96 165 250 / var(--un-bg-opacity))}.hover\:bg-green-500:hover{--un-bg-opacity:1;background-color:rgb(34 197 94 / var(--un-bg-opacity))}.p-4{padding:1rem}.px{padding-left:1rem;padding-right:1rem}.text-white{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity))}.hover\:text-red:hover{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.grayscale{--un-grayscale:grayscale(1);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-600{transition-duration:.6s}@media (min-width: 960px){.sm\:bg-primary{--un-bg-opacity:1;background-color:rgb(38 39 40 / var(--un-bg-opacity))}}*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #ffffff;--bg-secondary: #f8fafc;--bg-tertiary: #f1f5f9;--text-primary: #1e293b;--text-secondary: #64748b;--text-tertiary: #94a3b8;--border-color: #e2e8f0;--accent-color: #3b82f6;--accent-hover: #2563eb;--success-color: #10b981;--warning-color: #f59e0b;--error-color: #ef4444;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1)}.dark-mode{--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-tertiary: #334155;--text-primary: #f8fafc;--text-secondary: #cbd5e1;--text-tertiary: #94a3b8;--border-color: #475569;--accent-color: #60a5fa;--accent-hover: #3b82f6}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:1.6;color:var(--text-primary);background-color:var(--bg-secondary);transition:all .3s ease}.preview-container{display:flex;height:100vh;overflow:hidden;background:var(--bg-secondary)}.sidebar{width:280px;background:linear-gradient(180deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);border-right:1px solid var(--border-color);display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-lg)}.sidebar-header{padding:24px;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;background:var(--bg-primary)}.header-content h1{font-size:24px;font-weight:700;margin-bottom:4px;background:linear-gradient(135deg,var(--accent-color),var(--accent-hover));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-content p{font-size:13px;color:var(--text-secondary);font-weight:500}.header-actions{display:flex;gap:8px}.theme-toggle{width:36px;height:36px;border:none;border-radius:8px;background:var(--bg-tertiary);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .2s ease}.theme-toggle:hover{background:var(--accent-color);transform:scale(1.05)}.search-container{padding:16px 24px;background:var(--bg-primary);border-bottom:1px solid var(--border-color)}.search-box{position:relative;display:flex;align-items:center}.search-icon{position:absolute;left:12px;color:var(--text-tertiary);z-index:1}.search-input{width:100%;padding:10px 12px 10px 36px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);font-size:14px;transition:all .2s ease}.search-input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px #3b82f61a}.search-input::placeholder{color:var(--text-tertiary)}.sidebar-nav{flex:1;padding:16px 0}.nav-category{margin-bottom:32px}.nav-category-title{padding:8px 24px;font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:8px}.category-icon{font-size:14px}.nav-item{padding:12px 24px;cursor:pointer;transition:all .2s ease;color:var(--text-secondary);font-size:14px;border-left:3px solid transparent;display:flex;justify-content:space-between;align-items:center;position:relative}.nav-item:hover{background:linear-gradient(90deg,var(--accent-color)10,transparent);color:var(--text-primary);transform:translate(4px)}.nav-item.active{background:linear-gradient(90deg,var(--accent-color)20,transparent);color:var(--accent-color);border-left-color:var(--accent-color);font-weight:600}.nav-item-text{flex:1}.favorite-btn{width:24px;height:24px;border:none;background:none;cursor:pointer;font-size:14px;color:var(--text-tertiary);transition:all .2s ease;border-radius:4px;display:flex;align-items:center;justify-content:center}.favorite-btn:hover{color:var(--warning-color);background:var(--warning-color)10;transform:scale(1.1)}.main-content{flex:1;overflow-y:auto;background:var(--bg-secondary);padding:32px 48px 48px}.component-header{margin-bottom:32px;background:var(--bg-primary);padding:32px;border-radius:12px;border:1px solid var(--border-color);box-shadow:var(--shadow-md)}.header-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}.title-section h1{font-size:32px;font-weight:700;margin-bottom:12px;color:var(--text-primary)}.component-meta{display:flex;gap:12px;align-items:center}.component-badge{display:inline-block;padding:4px 12px;font-size:12px;border-radius:6px;background:linear-gradient(135deg,var(--accent-color),var(--accent-hover));color:#fff;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.component-stats{font-size:13px;color:var(--text-secondary);font-weight:500}.view-controls{display:flex;flex-direction:column;gap:12px}.device-selector{display:flex;gap:4px;background:var(--bg-tertiary);padding:4px;border-radius:8px}.device-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 12px;border:none;background:none;color:var(--text-secondary);cursor:pointer;border-radius:6px;transition:all .2s ease;min-width:60px}.device-btn:hover{background:var(--bg-secondary);color:var(--text-primary)}.device-btn.active{background:var(--accent-color);color:#fff}.device-icon{font-size:16px}.device-label{font-size:11px;font-weight:500}.view-mode-selector{display:flex;gap:4px;background:var(--bg-tertiary);padding:4px;border-radius:8px}.view-btn{width:32px;height:32px;border:none;background:none;color:var(--text-secondary);cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.view-btn:hover{background:var(--bg-secondary);color:var(--text-primary)}.view-btn.active{background:var(--accent-color);color:#fff}.component-description{font-size:16px;color:var(--text-secondary);line-height:1.6}.demos-section{margin-bottom:40px}.demos-section.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:24px;align-items:start}.demos-section.list{display:flex;flex-direction:column;gap:24px}.demo-card{background:var(--bg-primary);border-radius:12px;border:1px solid var(--border-color);overflow:hidden;box-shadow:var(--shadow-md);transition:all .3s ease;height:100%}.demo-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.demo-header{padding:20px 24px;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.demo-info{flex:1}.demo-title{font-size:18px;font-weight:600;margin-bottom:6px;color:var(--text-primary)}.demo-description{font-size:14px;color:var(--text-secondary);line-height:1.5}.demo-actions{display:flex;gap:8px;flex-shrink:0}.action-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:500;border:1px solid var(--border-color);border-radius:6px;cursor:pointer;transition:all .2s ease;height:36px}.action-btn.primary{background:var(--accent-color);color:#fff;border-color:var(--accent-color)}.action-btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-1px)}.action-btn.secondary{background:var(--bg-primary);color:var(--text-primary)}.action-btn.secondary:hover{background:var(--bg-tertiary);border-color:var(--accent-color);color:var(--accent-color)}.demo-preview{padding:32px 24px;background:var(--bg-primary);min-height:120px;display:flex;align-items:center;justify-content:center}.device-frame{border:2px solid var(--border-color);border-radius:12px;background:var(--bg-primary);box-shadow:var(--shadow-md);overflow:hidden;position:relative;margin:0 auto;transform-origin:top center;container-type:inline-size;container-name:device-frame}.device-frame.mobile{border-radius:20px;width:375px;height:600px;transform:scale(.9)}.device-frame.tablet{border-radius:16px;width:768px;height:600px;transform:scale(.7)}.device-frame.laptop{border-radius:8px;width:1024px;height:600px;transform:scale(.8)}.device-frame.desktop{border-radius:4px;border:none;box-shadow:none;width:100%;height:600px;transform:none}.device-content{padding:16px;height:100%;overflow:auto;background:var(--bg-primary);width:100%;box-sizing:border-box;position:relative}.device-iframe{width:100%;height:100%;border:none;background:#fff;display:block}.device-frame.mobile .device-content{width:375px;max-width:375px;--device-width: 375px;--device-type: mobile}.device-frame.tablet .device-content{width:768px;max-width:768px;--device-width: 768px;--device-type: tablet}.device-frame.laptop .device-content{width:1024px;max-width:1024px;--device-width: 1024px;--device-type: laptop}.device-frame.desktop .device-content{width:100%;max-width:none;--device-width: 100%;--device-type: desktop}.demo-code-container{border-top:1px solid var(--border-color);background:var(--bg-tertiary)}.demo-code{margin:0;padding:20px 24px;font-family:JetBrains Mono,Fira Code,SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;font-size:13px;line-height:1.6;overflow-x:auto;color:var(--text-primary);background:transparent}.demo-code code{color:inherit;background:transparent}.api-section{background:var(--bg-primary);padding:32px;border-radius:12px;border:1px solid var(--border-color);box-shadow:var(--shadow-md)}.api-title{font-size:24px;font-weight:700;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid var(--border-color);color:var(--text-primary);display:flex;align-items:center}.api-table-container{overflow-x:auto;border-radius:8px;border:1px solid var(--border-color)}.api-table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.6;background:var(--bg-primary)}.api-table th{background:var(--bg-tertiary);font-weight:600;text-align:left;padding:16px;border-bottom:1px solid var(--border-color);color:var(--text-primary);font-size:13px;text-transform:uppercase;letter-spacing:.5px}.api-table td{padding:16px;border-bottom:1px solid var(--border-color);color:var(--text-primary)}.api-table tbody tr:last-child td{border-bottom:none}.api-table tbody tr:hover{background:var(--bg-secondary)}.api-table code{padding:4px 8px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;font-family:JetBrains Mono,Fira Code,SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;font-size:12px}.prop-name{color:var(--accent-color);font-weight:600}.prop-type{color:var(--success-color)}.prop-default{color:var(--warning-color)}@media (max-width: 1200px){.demos-section.grid{grid-template-columns:repeat(auto-fit,minmax(350px,1fr))}}@media (max-width: 1024px){.sidebar{width:240px}.main-content{padding:24px 32px 32px}.demos-section.grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}@media (max-width: 768px){.sidebar{width:200px}.main-content{padding:16px 24px 24px}.component-header{padding:24px}.component-header h1{font-size:24px}.demo-preview,.api-section{padding:24px 16px}.demos-section.grid{grid-template-columns:1fr}}@media (max-width: 480px){.sidebar{position:fixed;left:0;top:0;height:100vh;z-index:1000;transform:translate(-100%);transition:transform .3s ease;width:280px}.sidebar.show{transform:translate(0)}.main-content{padding:12px 16px 16px;width:100%}.header-top{flex-direction:column;gap:16px}.view-controls{align-self:flex-start}}.sidebar::-webkit-scrollbar,.main-content::-webkit-scrollbar{width:6px;height:6px}.sidebar::-webkit-scrollbar-track,.main-content::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.sidebar::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}.main-content::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.main-content::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.demo-card{animation:fadeIn .3s ease-out}.loading{display:flex;align-items:center;justify-content:center;padding:40px;color:var(--text-secondary)}.loading:after{content:"";width:20px;height:20px;border:2px solid var(--border-color);border-top:2px solid var(--accent-color);border-radius:50%;animation:spin 1s linear infinite;margin-left:8px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}