.style-page,.styles-page{display:flex;flex-direction:column;gap:2.5rem}.styles-empty{color:var(--color-text-secondary)}.style-index-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));grid-gap:1rem;gap:1rem}.style-index-card{display:flex;flex-direction:column;gap:6px;padding:1.4rem 1.4rem 1.5rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.style-index-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--color-accent)}.style-index-name{font-family:var(--font-display);font-size:1.5rem;line-height:1.15;color:var(--color-text-primary)}.style-index-meta{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent-text)}.style-index-examples{font-size:13px;color:var(--color-text-secondary)}.style-section h2{font-family:var(--font-display);font-weight:400;font-size:1.6rem;margin-bottom:1rem}.style-glance{padding:.9rem 0;border-top:1px solid var(--color-border)}.style-glance h3{font-size:15px;font-weight:500;margin-bottom:4px}.style-glance h3 a{color:var(--color-text-primary);text-decoration:none}.style-glance p{font-size:13px;line-height:1.7;color:var(--color-text-tertiary)}.style-glance a{color:var(--color-text-secondary);text-decoration:none}.style-glance a:hover{color:var(--color-accent);text-decoration:underline}.style-breadcrumb{font-size:13px;color:var(--color-text-tertiary)}.style-breadcrumb a{color:var(--color-text-secondary);text-decoration:none}.style-hero{max-width:760px}.style-hero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.05;margin-bottom:1rem}.style-hero p{font-size:16px;line-height:1.6;color:var(--color-text-secondary);margin-bottom:1.25rem}.style-hero-actions{display:flex;flex-wrap:wrap;gap:.6rem}.style-hero-actions a{text-decoration:none}.style-chips{display:flex;flex-wrap:wrap;gap:.5rem}.style-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--color-border-strong);border-radius:var(--radius-full);background:var(--color-surface);font-size:13px;color:var(--color-text-primary);text-decoration:none}.style-chip span{font-size:11px;color:var(--color-text-tertiary)}.style-chip:hover{border-color:var(--color-accent);background:var(--color-accent-soft);color:var(--color-accent)}