*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);font-size:var(--text-base);color:var(--color-ink);background:var(--color-bg);height:100vh;overflow:hidden}[hidden]{display:none!important}#app{display:grid;grid-template-rows:48px 1fr;height:100vh}.app-body{display:grid;grid-template-columns:220px 1fr;overflow:hidden}.app-header{display:flex;align-items:center;gap:var(--space-4);padding:0 var(--space-6);border-bottom:1px solid var(--color-border);background:var(--color-surface)}.app-logo{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:500;letter-spacing:.08em}.app-nav{display:flex;gap:2px}.nav-filter{font-family:var(--font-mono);font-size:var(--text-xs);padding:3px var(--space-3);border:1px solid transparent;background:none;cursor:pointer;border-radius:var(--radius-sm);color:var(--color-ink-muted);transition:all var(--transition);text-transform:uppercase;letter-spacing:.05em}.nav-filter:hover{color:var(--color-ink);background:var(--color-bg)}.nav-filter.active{color:var(--color-ink);border-color:var(--color-border-strong);background:var(--color-bg)}.nav-divider{width:1px;background:var(--color-border);margin:6px 4px}.app-version{margin-left:auto;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-border-strong)}.app-sidebar{border-right:1px solid var(--color-border);background:var(--color-surface);overflow-y:auto;padding:var(--space-4) 0}.category-group{margin-bottom:var(--space-3)}.category-heading{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-ink-muted);text-transform:uppercase;letter-spacing:.1em;padding:var(--space-2) var(--space-5);opacity:.6}.category-heading--interactions{opacity:1;color:var(--color-accent)}.category-empty{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-border-strong);padding:var(--space-1) var(--space-5)}.subcategory-group{margin-bottom:var(--space-1)}.subcategory-heading{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-ink-muted);text-transform:uppercase;letter-spacing:.08em;padding:var(--space-1) var(--space-5) var(--space-1) calc(var(--space-5) + 8px);opacity:.4}.component-item{display:flex;flex-direction:column;padding:var(--space-2) var(--space-5);cursor:pointer;border-left:2px solid transparent;transition:all var(--transition);gap:var(--space-1)}.component-item:hover{background:var(--color-bg)}.component-item.active{border-left-color:var(--color-accent);background:var(--color-accent-subtle)}.component-item-name{font-size:var(--text-sm);font-weight:500;font-family:var(--font-mono)}.component-item-tags{display:flex;gap:3px;flex-wrap:wrap}.tag{font-family:var(--font-mono);font-size:10px;color:var(--color-ink-muted);background:var(--color-bg);border:1px solid var(--color-border);border-radius:2px;padding:1px 4px;line-height:1.4}.app-main{overflow:hidden;display:flex;flex-direction:column;position:relative}.welcome-state{height:100%;overflow-y:auto;padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5)}.welcome-header{display:flex;align-items:baseline;gap:var(--space-3)}.welcome-title{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:500;text-transform:uppercase;letter-spacing:.08em}.welcome-count{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-ink-muted)}.component-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-3);align-content:start}.grid-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);cursor:pointer;transition:border-color var(--transition),box-shadow var(--transition);display:flex;flex-direction:column;gap:var(--space-2)}.grid-card:hover{border-color:var(--color-border-strong);box-shadow:0 2px 8px #0000000f}.grid-card-header{display:flex;align-items:center;justify-content:space-between}.grid-card-category{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--color-ink-muted);background:var(--color-bg);border:1px solid var(--color-border);border-radius:2px;padding:1px 5px}.grid-card-version{font-family:var(--font-mono);font-size:10px;color:var(--color-border-strong)}.grid-card-name{font-size:var(--text-base);font-weight:500;font-family:var(--font-mono)}.viewer{height:100%;display:flex;flex-direction:column}.viewer-header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) var(--space-6) var(--space-4);border-bottom:1px solid var(--color-border);background:var(--color-surface)}.viewer-title{font-family:var(--font-mono);font-size:var(--text-md);font-weight:500}.viewer-meta{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;color:var(--color-ink-muted);font-size:var(--text-sm)}.viewer-content{min-height:0;flex:1;display:grid;grid-template-columns:minmax(360px,1.05fr) minmax(420px,1fr)}.preview-panel,.code-panel{min-width:0;min-height:0;display:flex;flex-direction:column}.preview-panel{border-right:1px solid var(--color-border)}.panel-label{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);background:var(--color-surface);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase}.panel-label-right{display:flex;align-items:center;gap:var(--space-3);min-width:0}.preview-tabs,.code-tabs,.preview-viewport{display:flex;align-items:center;gap:var(--space-1);min-width:0}.preview-tab,.code-tab,.preview-viewport-btn,.panel-expand{border:1px solid var(--color-border);background:var(--color-bg);color:var(--color-ink-muted);border-radius:var(--radius-sm);transition:all var(--transition)}.preview-tab,.code-tab{padding:5px 8px;font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;cursor:pointer;white-space:nowrap}.preview-tab:hover,.code-tab:hover,.preview-viewport-btn:hover,.panel-expand:hover{color:var(--color-ink);border-color:var(--color-border-strong)}.preview-tab.active,.code-tab.active,.preview-viewport-btn.active{color:var(--color-ink);border-color:var(--color-border-strong);background:var(--color-surface)}.preview-viewport-btn,.panel-expand{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.preview-stage,.code-scroll{min-height:0;flex:1;background:var(--color-bg)}.preview-stage{padding:var(--space-4)}.preview-iframe{width:100%;height:100%;border:1px solid var(--color-border);background:#fff}.code-scroll{overflow:auto}.code-block{min-height:100%;padding:var(--space-5);font-size:13px;line-height:1.6}.panel-maximized{grid-column:1 / -1}.preview-panel[data-viewport=tablet] .preview-stage{display:flex;justify-content:center}.preview-panel[data-viewport=tablet] .preview-iframe{max-width:820px}.preview-panel[data-viewport=mobile] .preview-stage{display:flex;justify-content:center}.preview-panel[data-viewport=mobile] .preview-iframe{max-width:430px}@media(max-width:1100px){.viewer-content{grid-template-columns:1fr;grid-template-rows:minmax(360px,1fr) minmax(320px,1fr)}.preview-panel{border-right:0;border-bottom:1px solid var(--color-border)}}.grid-card-description{font-size:var(--text-sm);color:var(--color-ink-muted);line-height:1.5}.grid-card-tags{display:flex;flex-wrap:wrap;gap:3px;margin-top:var(--space-1)}.viewer{display:grid;grid-template-rows:auto 1fr;height:100%;overflow:hidden}.viewer-header{padding:var(--space-3) var(--space-6);border-bottom:1px solid var(--color-border);display:flex;align-items:baseline;gap:var(--space-4);background:var(--color-surface);flex-wrap:wrap}.viewer-title{font-family:var(--font-mono);font-size:var(--text-base);font-weight:500}.viewer-meta{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-ink-muted)}.viewer-meta .badge{padding:1px 6px;border:1px solid var(--color-border);border-radius:2px;text-transform:uppercase;letter-spacing:.06em;font-size:10px}.viewer-meta .sep{color:var(--color-border-strong)}.viewer-meta .description{color:var(--color-ink-muted)}.viewer-content{display:grid;grid-template-columns:55fr 45fr;overflow:hidden}.panel-maximized{position:absolute!important;inset:0;z-index:10;border-right:none!important}.preview-panel{border-right:1px solid var(--color-border);display:flex;flex-direction:column;overflow:hidden;background:var(--color-bg)}.panel-label{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--color-border);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-ink-muted);text-transform:uppercase;letter-spacing:.08em;background:var(--color-surface);flex-shrink:0}.preview-stage{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:var(--space-4)}.preview-iframe{border:none;display:block;width:100%;height:100%;min-height:100%;background:#fff;transition:width var(--transition),border-radius var(--transition),box-shadow var(--transition)}.preview-panel[data-viewport=tablet] .preview-iframe{width:min(820px,100%);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:0 8px 24px #00000014}.preview-panel[data-viewport=desktop] .preview-stage{padding:0;align-items:stretch}.preview-panel[data-viewport=mobile] .preview-iframe{width:min(390px,100%);border:1px solid var(--color-border);border-radius:18px;box-shadow:0 10px 28px #0000001a}.panel-label-right{display:flex;align-items:center;gap:var(--space-2)}.preview-viewport{display:inline-flex;align-items:center;gap:2px}.preview-viewport-btn{width:26px;height:22px;padding:0;border:1px solid transparent;border-radius:var(--radius-sm);background:none;color:var(--color-ink-muted);font-family:var(--font-mono);font-size:10px;line-height:1;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:all var(--transition)}.preview-viewport-icon{width:14px;height:14px}.preview-viewport-btn:hover{color:var(--color-ink);background:var(--color-bg);border-color:var(--color-border)}.preview-viewport-btn.active{color:var(--color-ink);background:var(--color-bg);border-color:var(--color-border-strong)}.panel-expand{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:1px solid transparent;border-radius:var(--radius-sm);background:none;cursor:pointer;color:var(--color-ink-muted);transition:all var(--transition);flex-shrink:0}.panel-expand:hover{color:var(--color-ink);background:var(--color-bg);border-color:var(--color-border)}.code-panel{display:flex;flex-direction:column;overflow:hidden}.code-tabs{display:flex;gap:2px}.code-tab{font-family:var(--font-mono);font-size:var(--text-xs);padding:2px var(--space-2);border:1px solid transparent;background:none;cursor:pointer;border-radius:var(--radius-sm);color:var(--color-ink-muted);transition:all var(--transition);text-transform:uppercase;letter-spacing:.05em}.code-tab:hover{color:var(--color-ink)}.code-tab.active{color:var(--color-ink);border-color:var(--color-border-strong);background:var(--color-bg)}.code-scroll{flex:1;overflow:auto}.code-block{margin:0;padding:var(--space-5);font-family:var(--font-mono);font-size:12px;line-height:1.65;background:var(--color-surface);min-height:100%}.code-block code{font-family:inherit;background:none;padding:0;white-space:pre}.grid-card--interaction{border-color:color-mix(in srgb,var(--color-accent) 30%,var(--color-border))}.grid-card--interaction .grid-card-category{color:var(--color-accent);border-color:color-mix(in srgb,var(--color-accent) 30%,var(--color-border));background:color-mix(in srgb,var(--color-accent) 8%,transparent)}.grid-card-deps{display:flex;flex-wrap:wrap;gap:3px;margin-top:var(--space-1)}.dep{font-family:var(--font-mono);font-size:10px;color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 8%,transparent);border:1px solid color-mix(in srgb,var(--color-accent) 25%,transparent);border-radius:2px;padding:1px 4px}.deps-inline{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-accent)}.hljs{background:transparent;color:var(--color-ink)}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-variable,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id{color:#005cc5}.hljs-regexp,.hljs-string,.hljs-meta .hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-comment,.hljs-code,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}