*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary: #0f0f1a;--bg-secondary: #1a1a2e;--bg-card: #16213e;--text-primary: #e0e0ff;--text-secondary: #8888aa;--accent: #6c63ff;--accent-glow: rgba(108, 99, 255, .3);--border: rgba(108, 99, 255, .15);--radius: 12px;--radius-sm: 8px}body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;line-height:1.6}.app{max-width:900px;margin:0 auto;padding:3rem 1.5rem}.header{text-align:center;margin-bottom:3rem}.header h1{font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,#6c63ff,#e040fb,#00bcd4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}.header p{color:var(--text-secondary);font-size:1.1rem}.controls{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;position:sticky;top:0;z-index:10;background:var(--bg-primary);padding:1rem 0;margin-bottom:1.5rem}.controls button{padding:.5rem 1em;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-secondary);color:var(--text-primary);font-family:inherit;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease}.controls button:hover{border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow);transform:translateY(-1px)}.controls button.active{background:var(--accent);border-color:var(--accent);color:#fff}.demo-section{margin-bottom:3rem}.demo-section h2{font-size:1.2rem;font-weight:600;color:var(--accent);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}.profile-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;display:flex;gap:1.5rem;align-items:flex-start}.profile-avatar{width:80px;height:80px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--bg-secondary)}.profile-info{flex:1}.profile-info h3{font-size:1.2rem;font-weight:600;margin-bottom:.25rem}.profile-info .subtitle{color:var(--text-secondary);font-size:.85rem;margin-bottom:.75rem}.profile-info p{font-size:.9rem;color:var(--text-secondary);line-height:1.5}.form-demo{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.form-row{display:flex;gap:1rem}.form-group{flex:1;display:flex;flex-direction:column;gap:.3rem}.form-group label{font-size:.8rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.form-group input,.form-group select,.form-group textarea{padding:.65rem .8rem;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:inherit;font-size:.9rem}.form-group textarea{min-height:80px;resize:vertical}.form-actions{display:flex;gap:.75rem;justify-content:flex-end;margin-top:.5rem}.btn{padding:.6rem 1.4rem;border:none;border-radius:var(--radius-sm);font-family:inherit;font-size:.9rem;font-weight:500;cursor:pointer}.btn-primary{background:var(--accent);color:#fff}.btn-secondary{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border)}.list-demo{display:flex;flex-direction:column;gap:.75rem}.list-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem 1.25rem;display:flex;align-items:center;gap:1rem}.list-item-icon{width:40px;height:40px;border-radius:var(--radius-sm);background:var(--bg-primary);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}.list-item-content{flex:1}.list-item-content h4{font-size:.95rem;font-weight:500;margin-bottom:.15rem}.list-item-content p{font-size:.8rem;color:var(--text-secondary)}.list-item-badge{padding:.25rem .7rem;border-radius:100px;font-size:.75rem;font-weight:500;background:#6c63ff26;color:var(--accent)}.demo-description{font-size:.875rem;color:var(--text-secondary);margin-bottom:1rem;line-height:1.5}.demo-description code{font-family:Fira Code,monospace;font-size:.8rem;color:var(--accent);background:#6c63ff1a;padding:.1rem .3rem;border-radius:4px}.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;display:flex;flex-direction:column;gap:.4rem}.stat-value{font-size:1.8rem;font-weight:700;color:var(--accent)}.stat-label{font-size:.8rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em}.suspense-controls{margin-bottom:1rem}.reload-btn{padding:.5rem 1.1rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-secondary);color:var(--text-primary);font-family:inherit;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s ease}.reload-btn:hover{border-color:var(--accent);box-shadow:0 0 10px var(--accent-glow)}.suspense-grid{display:flex;flex-direction:column;gap:1.5rem}.suspense-label{font-size:.8rem;color:var(--text-secondary);margin-bottom:.6rem}.suspense-label code{font-family:Fira Code,monospace;font-size:.78rem;color:var(--accent);background:#6c63ff1a;padding:.1rem .3rem;border-radius:4px}