.demos-page{padding:40px 0 80px}.demos-header{margin-bottom:28px}.demos-header h1{font-size:1.8rem;font-weight:800;margin:0 0 8px;letter-spacing:-.02em;background:linear-gradient(135deg,var(--text) 0%,var(--text) 55%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.demos-sub{font-size:1rem;color:var(--text-secondary);margin:0}.demos-filters{display:flex;align-items:center;gap:12px;margin-bottom:28px;flex-wrap:wrap}.demos-search-wrap{position:relative;flex:1;min-width:200px;max-width:400px}.demos-search-wrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-tertiary);pointer-events:none}#demos-search{width:100%;padding:9px 12px 9px 36px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:.88rem;font-family:var(--font-sans);outline:none;transition:border-color var(--transition);box-sizing:border-box}#demos-search:focus{border-color:var(--accent)}.demos-sort{display:flex;gap:4px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:3px;flex-shrink:0}.sort-btn{background:none;border:none;border-radius:calc(var(--radius) - 2px);padding:6px 14px;font-size:.82rem;font-family:var(--font-sans);color:var(--text-secondary);cursor:pointer;transition:var(--transition);white-space:nowrap}.sort-btn.active{background:var(--bg-elevated);color:var(--text);font-weight:500}.sort-btn:hover:not(.active){color:var(--text)}.sort-mine{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:6px 14px}.sort-mine.active{background:var(--accent-muted);border-color:var(--accent-fg);color:var(--accent-fg);font-weight:500}.demos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}.demo-card{display:flex;align-items:flex-start;gap:0;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition)}.demo-card:hover{border-color:var(--accent);box-shadow:var(--shadow-card-active);transform:translateY(-2px)}.dc-link{display:flex;align-items:flex-start;gap:14px;flex:1;min-width:0;padding:16px;text-decoration:none;color:inherit}.dc-icon{width:34px;height:34px;border-radius:var(--radius-sm);background:var(--accent-muted);border:1px solid var(--border-accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent);margin-top:1px}.dc-body{flex:1;min-width:0}.dc-title{font-size:.9rem;font-weight:600;color:var(--text);margin-bottom:4px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.dc-skill{font-size:.79rem;color:var(--accent);font-family:var(--font-mono);margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dc-stats{display:flex;align-items:center;gap:6px;font-size:.76rem;color:var(--text-tertiary);flex-wrap:wrap}.dc-dot{color:var(--border)}.dc-star-btn{display:flex;align-items:center;gap:5px;align-self:flex-start;flex-shrink:0;background:none;border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px 9px;font-size:.76rem;font-family:var(--font-sans);color:var(--text-tertiary);cursor:pointer;transition:var(--transition);margin:16px 16px 16px 0;white-space:nowrap}.dc-star-btn:hover{border-color:var(--amber);color:var(--amber)}.dc-star-btn.starred{border-color:var(--amber);color:var(--amber);background:#f59e0b14}.dc-star-btn.starred svg{fill:currentColor}.dc-star-btn:not(.starred) svg{fill:none}.dc-star-btn:disabled{opacity:.6;cursor:default}.demo-card-skel{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;gap:14px}.skel-icon{width:34px;height:34px;border-radius:var(--radius-sm);flex-shrink:0}.skel-body{flex:1}.skel-line{background:linear-gradient(90deg,var(--bg-elevated) 25%,var(--border) 50%,var(--bg-elevated) 75%);background-size:200% 100%;animation:demos-shimmer 1.5s infinite;border-radius:var(--radius-sm);height:13px;margin-bottom:8px}.skel-title{width:75%;height:15px}.skel-skill{width:50%}.skel-stats{width:65%;height:11px;margin-bottom:0}@keyframes demos-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.demos-empty{display:flex;flex-direction:column;align-items:center;gap:14px;padding:64px 20px;text-align:center;color:var(--text-tertiary)}.demos-empty svg{opacity:.35}.demos-empty p{margin:0;font-size:.9rem}.pagination-wrap{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:32px}.pagination-btn{min-width:36px;padding:6px 10px;font-size:1rem;line-height:1}.pagination-btn:disabled{opacity:.35;cursor:default}.page-numbers{display:flex;align-items:center;gap:4px}.pagination-page{min-width:36px;height:36px;padding:0 8px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.85rem;font-family:var(--font-sans);cursor:pointer;transition:var(--transition)}.pagination-page:hover{border-color:var(--accent);color:var(--text)}.pagination-page-active{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);font-weight:600;cursor:default}.pagination-ellipsis{color:var(--text-tertiary);font-size:.85rem;padding:0 4px}.demos-page [hidden]{display:none!important}@media(max-width:768px){.demos-page{padding:28px 0 60px}.demos-header h1{font-size:1.4rem}.demos-filters{flex-direction:column;align-items:stretch}.demos-search-wrap{max-width:none}.demos-sort{justify-content:center}.demos-grid{grid-template-columns:1fr}.demos-sort{flex-wrap:wrap;justify-content:flex-start;gap:6px}.page-numbers{flex-wrap:wrap;gap:4px}}@media(max-width:375px){.demos-header h1{font-size:1.25rem}.demos-page{padding:20px 0 48px}.pagination-btn{padding:6px 10px;font-size:.8rem}.pagination-page{min-width:30px;height:30px;font-size:.8rem}}