.sg-header{border-bottom:1px solid var(--border-color);margin-bottom:4rem;padding-bottom:2rem}.sg-title{font-size:var(--text-xl);color:var(--brand-color);margin-bottom:1rem;font-weight:700;line-height:1.1}.sg-section{margin-bottom:6rem}.sg-section-title{font-size:var(--text-lg);border-left:4px solid var(--brand-color);color:var(--text-color);margin-bottom:2rem;padding-left:1rem;font-weight:700}.type-row{border-bottom:1px dashed var(--border-color);align-items:baseline;gap:2rem;margin-bottom:1.5rem;padding-bottom:1.5rem;display:flex}.type-label{width:120px;color:var(--text-muted);font-family:monospace;font-size:var(--text-sm);flex-shrink:0}.type-preview{color:var(--text-color)}.color-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2rem;display:grid}.color-card{border:var(--border-width)solid var(--border-color);border-radius:var(--border-radius);background:#111;overflow:hidden}.color-swatch{width:100%;height:120px}.color-info{padding:1rem}.color-name{color:#fff;margin-bottom:.5rem;font-weight:700;display:block}.color-var{color:var(--text-muted);font-family:monospace;font-size:.8rem;display:block}.component-demos{flex-direction:column;gap:2rem;display:flex}.demo-row{border:var(--border-width)solid var(--border-color);border-radius:var(--border-radius);align-items:center;gap:2rem;padding:2rem;display:flex}.demo-label{width:150px;color:var(--text-muted);flex-shrink:0;font-weight:500}@media (max-width:768px){.type-row{flex-direction:column;align-items:flex-start;gap:.5rem}.type-label{width:auto;color:var(--brand-color)}.demo-row{flex-direction:column;align-items:flex-start}.demo-label{width:auto;margin-bottom:1rem}.color-grid{grid-template-columns:1fr}}