.react-ui-root{--bg-body: var(--wg-bg-0);--bg-card: var(--wg-bg-1);--bg-elevated: var(--wg-bg-1);--bg-hover: var(--wg-surface-hover);--border-primary: var(--wg-border-primary);--border-secondary: var(--wg-border-secondary);--color-primary: var(--wg-accent);--color-accent: var(--wg-accent);--text-primary: var(--wg-text-primary);--text-secondary: var(--wg-text-secondary);--text-muted: var(--wg-text-muted);--text-link: var(--wg-text-muted);--radius-sm: 10px;--radius-md: 12px;--radius-lg: 16px;--shadow-dropdown: 0 8px 32px rgba(0,0,0,.4);--shadow-primary: 0 2px 8px rgba(0, 0, 0, .4);background:var(--bg-body);color:var(--text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.rui-index-preview{contain:layout paint;isolation:isolate;overflow:hidden;background:#120f17}.rui-index-preview canvas{max-width:100%}.rui-shell{display:flex;height:100vh;background:var(--bg-body);color:var(--text-primary);overflow:hidden}.rui-sidebar{width:220px;min-width:220px;height:100%;display:flex;flex-direction:column;border-right:1px solid var(--border-primary);background:var(--bg-body);overflow:hidden}.rui-sidebar-header{height:56px;display:flex;align-items:center;padding:0 20px;border-bottom:1px solid var(--border-primary);flex-shrink:0}.rui-sidebar-logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text-primary);font-size:14px;font-weight:600}.rui-sidebar-logo-icon{width:24px;height:24px;border-radius:6px;background:color-mix(in srgb,var(--wg-text-primary) 10%,transparent);display:flex;align-items:center;justify-content:center}.rui-sidebar-search{padding:12px 16px 8px;flex-shrink:0}.rui-sidebar-search-box{display:flex;align-items:center;gap:8px;background:#ffffff0d;border:1px solid var(--border-primary);border-radius:8px;padding:7px 12px}.rui-sidebar-search-box input{flex:1;background:transparent;border:none;outline:none;font-size:12px;color:var(--text-secondary)}.rui-sidebar-search-box input::-moz-placeholder{color:var(--text-muted)}.rui-sidebar-search-box input::placeholder{color:var(--text-muted)}.rui-sidebar-search-box svg{color:var(--text-muted);flex-shrink:0}.rui-sidebar-nav{flex:1;overflow-y:auto;padding:4px 8px 32px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent}.rui-sidebar-nav::-webkit-scrollbar{width:4px}.rui-sidebar-nav::-webkit-scrollbar-track{background:transparent}.rui-sidebar-nav::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:2px}.rui-sidebar-getstarted{display:flex;align-items:center;padding:6px 12px;font-size:13px;border-radius:8px;transition:background .15s,color .15s;text-decoration:none;margin:2px 8px 4px}.rui-sidebar-getstarted:hover{background:#ffffff0d;color:var(--text-secondary)}.rui-sidebar-getstarted.active{background:color-mix(in srgb,var(--wg-text-primary) 10%,transparent);color:var(--wg-text-primary);font-weight:500}.rui-cat-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);padding:8px 12px 4px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;border-radius:6px;transition:background .1s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.rui-cat-label:hover{background:#ffffff08}.rui-nav-item{display:flex;align-items:center;padding:5px 12px;font-size:13px;color:var(--text-muted);border-radius:7px;text-decoration:none;transition:background .12s,color .12s;line-height:1.4}.rui-nav-item:hover{background:#ffffff0d;color:var(--text-secondary)}.rui-nav-item.active{background:color-mix(in srgb,var(--wg-text-primary) 10%,transparent);color:var(--wg-text-primary);font-weight:500}.rui-sidebar-footer{flex-shrink:0;border-top:1px solid var(--border-primary);padding:14px 16px}.rui-topbar{display:none;height:56px;align-items:center;gap:12px;border-bottom:1px solid var(--border-primary);padding:0 16px;flex-shrink:0;background:var(--bg-body)}.rui-overlay{position:fixed;inset:0;z-index:40;background:#0009;backdrop-filter:blur(4px)}.rui-drawer{position:fixed;inset-block:0;left:0;z-index:50;width:280px;display:flex;flex-direction:column;border-right:1px solid var(--border-primary);background:var(--bg-body);box-shadow:4px 0 40px #00000080;transition:transform .28s cubic-bezier(.4,0,.2,1)}.rui-drawer.closed{transform:translate(-100%)}.rui-drawer.open{transform:translate(0)}.rui-main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}.rui-content{flex:1;overflow-y:auto}.rui-page{max-width:1040px;margin:0 auto;padding:36px 24px 80px}.rui-breadcrumb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);margin-bottom:24px}.rui-breadcrumb a{color:var(--text-muted);text-decoration:none;transition:color .15s}.rui-breadcrumb a:hover{color:var(--text-secondary)}.rui-title{font-size:var(--wg-heading-1);font-weight:700;letter-spacing:-.02em;color:var(--text-primary);line-height:1.2;margin:0 0 8px}.rui-description{font-size:16px;color:var(--text-muted);line-height:1.6;margin:0}.rui-component-hero{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:end;margin-bottom:28px}.rui-meta-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.rui-meta-row span{border:1px solid var(--border-primary);border-radius:999px;background:var(--bg-card);padding:5px 9px;font-size:11px;color:var(--text-muted)}.rui-install-card{display:grid;gap:10px;border:1px solid var(--border-primary);border-radius:var(--radius-lg);background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),var(--bg-card);background-size:28px 28px;padding:14px}.rui-install-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}.rui-install-card code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Fira Code,monospace;font-size:12px;color:var(--text-primary)}.rui-demo-card{border:1px solid var(--border-primary);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-body)}.rui-tabs-bar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-primary);padding:0 16px 0 4px;background:#ffffff03}.rui-tabs-actions{display:inline-flex;align-items:center;gap:8px;min-height:30px;font-size:11px;color:var(--text-muted)}.rui-tab{position:relative;padding:12px 16px 10px;font-size:13px;background:none;border:none;cursor:pointer;transition:color .15s;color:var(--text-muted)}.rui-tab:hover{color:var(--text-secondary)}.rui-tab.active{color:var(--text-primary)}.rui-tab.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;border-radius:2px 2px 0 0;background:var(--color-primary)}.rui-preview-area{display:flex;height:560px;flex-direction:column;position:relative;background:var(--bg-body);overflow:hidden}.rui-preview-toolbar{display:flex;height:42px;flex-shrink:0;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-primary);background:color-mix(in srgb,var(--wg-text-primary) 2%,transparent);padding:0 14px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}.rui-viewport-controls{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--border-primary);border-radius:7px;padding:2px;background:var(--bg-body)}.rui-viewport-button{display:grid;width:28px;height:26px;place-items:center;border:0;border-radius:5px;background:transparent;color:var(--text-muted);cursor:pointer;transition:background-color .15s,color .15s}.rui-viewport-button:hover{color:var(--text-primary)}.rui-viewport-button[aria-pressed=true]{background:var(--bg-hover);color:var(--text-primary)}.rui-preview-canvas{min-height:0;flex:1;background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.08),transparent 32%),#120f17}.rui-preview-stage{display:flex;height:100%;min-width:0;justify-content:center;overflow:auto}.rui-preview-device{width:100%;height:100%;flex:0 0 auto;overflow:hidden;border-inline:0 solid rgba(255,255,255,.12);background:#120f17;transition:width .25s ease,border-width .25s ease}.rui-preview-device[data-preview-viewport=tablet]{width:min(100%,768px);border-inline-width:1px}.rui-preview-device[data-preview-viewport=mobile]{width:min(100%,390px);border-inline-width:1px}.rui-preview-empty,.rui-preview-loading{display:flex;height:100%;width:100%;align-items:center;justify-content:center;padding:24px;text-align:center}.rui-preview-empty{flex-direction:column;background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.08),transparent 34%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:auto,36px 36px,36px 36px}.rui-preview-empty-title{margin:0;font-size:14px;font-weight:650;color:var(--text-primary)}.rui-preview-empty-copy{margin:8px 0 0;max-width:360px;font-size:13px;line-height:1.6;color:var(--text-muted)}.rui-preview-loading-card{display:grid;width:min(280px,70%);gap:12px;justify-items:center;border:1px solid var(--border-primary);border-radius:var(--radius-lg);background:color-mix(in srgb,var(--wg-text-primary) 4%,transparent);padding:28px}.rui-preview-loading-dot,.rui-preview-loading-line{border-radius:999px;background:linear-gradient(90deg,#ffffff0f,#ffffff2e,#ffffff0f);background-size:200% 100%;animation:rui-shimmer 1.2s ease-in-out infinite}.rui-preview-loading-dot{height:34px;width:34px}.rui-preview-loading-line{height:8px;width:58%}.rui-preview-loading-line.wide{width:82%}.rui-code-area{height:480px;overflow:auto;background:#0d0d14}.rui-code-area pre{padding:24px;font-family:Geist Mono,Fira Code,JetBrains Mono,monospace;font-size:12.5px;line-height:1.65;margin:0}.rui-install-code-card{position:relative}.rui-install-copy{position:absolute;right:12px;top:12px;z-index:10}.rui-code-area.rui-code-snippet{height:auto;max-height:200px}.rui-code-area.rui-code-snippet-sm{max-height:120px}.rui-code-snippet pre{min-width:-moz-max-content;min-width:max-content;padding-right:112px}.rui-code .tok-kw{color:#c792ea}.rui-code .tok-builtin{color:#82aaff}.rui-code .tok-str{color:#c3e88d}.rui-code .tok-num{color:#f78c6c}.rui-code .tok-comment{color:#90a4ae;font-style:italic}.react-ui-code .tok-kw{color:#c792ea}.react-ui-code .tok-builtin{color:#82aaff}.react-ui-code .tok-str{color:#c3e88d}.react-ui-code .tok-num{color:#f78c6c}.react-ui-code .tok-comment{color:#90a4ae;font-style:italic}.rui-copy-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;font-size:11px;border-radius:6px;border:1px solid var(--border-primary);background:#ffffff0a;color:var(--text-muted);cursor:pointer;transition:background .15s,color .15s}.rui-copy-btn:hover{background:#ffffff14;color:var(--text-secondary)}.rui-section-title{font-size:14px;font-weight:600;color:var(--text-primary);margin:0 0 12px}.rui-props-table{width:100%;border-collapse:collapse;font-size:13px}.rui-props-table th{text-align:left;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding:10px 14px;border-bottom:1px solid var(--border-primary);background:#ffffff05}.rui-props-table td{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--text-secondary);vertical-align:top}.rui-props-table tr:last-child td{border-bottom:none}.rui-props-table .prop-name{color:var(--wg-text-primary);font-family:Fira Code,monospace;font-size:12px}.rui-props-table .prop-type{color:#67e8f9;font-family:Fira Code,monospace;font-size:12px}.rui-props-table .prop-default{color:var(--text-muted);font-family:Fira Code,monospace;font-size:12px}.rui-get-started{max-width:720px;margin:0 auto;padding:56px 24px 80px}.rui-get-started h1{font-size:var(--wg-heading-1);font-weight:800;letter-spacing:-.03em;background:linear-gradient(135deg,var(--wg-text-primary) 0%,var(--wg-text-muted) 50%,var(--wg-text-primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 16px}.rui-get-started-lead{font-size:16px;color:var(--text-muted);line-height:1.7;margin:0 0 48px}.rui-get-started-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:40px}.rui-get-started-card{background:var(--bg-card);border:1px solid var(--border-primary);border-radius:var(--radius-md);padding:20px;text-decoration:none;transition:border-color .2s,background .2s}.rui-get-started-card:hover{border-color:var(--wg-border-secondary);background:color-mix(in srgb,var(--wg-text-primary) 5%,transparent)}.rui-get-started-card-title{font-size:14px;font-weight:600;color:var(--text-primary);margin:0 0 4px}.rui-get-started-card-count{font-size:12px;color:var(--text-muted)}.rui-spinner{width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.1);border-top-color:var(--color-primary);animation:rui-spin .7s linear infinite}@keyframes rui-spin{to{transform:rotate(360deg)}}@keyframes rui-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (max-width: 1023px){.rui-sidebar{display:none}.rui-topbar{display:flex}.rui-get-started-grid{grid-template-columns:1fr}.rui-page{padding:28px 16px 72px}.rui-component-hero{grid-template-columns:1fr}.rui-install-card{display:none}.rui-preview-area,.rui-code-area{height:420px}.rui-tabs-bar{padding-right:8px}.rui-tab{padding-inline:10px}}@media (max-width: 640px){.rui-install-code-card{display:grid}.rui-install-copy{position:static;justify-self:end;padding:10px 10px 0}.rui-code-area.rui-code-snippet,.rui-code-area.rui-code-snippet-sm{height:auto;max-height:none}.rui-code-snippet pre{min-width:0;padding:12px 16px 18px}.rui-code-snippet .react-ui-code{white-space:pre-wrap;overflow-wrap:anywhere}}@media (prefers-reduced-motion: reduce){.rui-preview-device{transition:none}.rui-preview-loading-dot,.rui-preview-loading-line{animation:none}}