#typography.typography-reference{padding:var(--space-8);max-width:none;min-width:0}
#typography>.section-head .eyebrow{color:var(--muted)}
#typography .ty-scroll{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;padding:var(--space-1) var(--space-1) var(--space-4);scrollbar-width:auto;scrollbar-color:var(--muted) var(--surface);border-radius:var(--radius-md)}
#typography .ty-scroll:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
#typography .ty-cards{display:grid;grid-template-columns:repeat(3,minmax(460px,1fr));gap:var(--space-5);align-items:stretch}
#typography .ty-card{min-width:0;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg);overflow:hidden}
#typography .ty-card>header{padding:var(--space-5) var(--space-6) var(--space-4);background:var(--surface);border-bottom:1px solid var(--border)}
#typography .ty-card h3{font-size:var(--type-h4);font-weight:700;line-height:1.3;margin:0 0 var(--space-1)}
#typography .ty-card>header p{font-size:var(--type-small);line-height:1.5;color:var(--muted);margin:0}
#typography .ty-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--space-5) var(--space-6)}
#typography .ty-column{min-width:0;padding-right:var(--space-6)}
#typography .ty-column+div{padding:0 0 0 var(--space-8);border-left:1px solid var(--border)}
#typography .ty-column h4{font-size:var(--type-small);line-height:1.5;font-weight:500;color:var(--muted);margin:0 0 var(--space-4)}
#typography .ty-row{margin:0 0 var(--space-5)}#typography .ty-row:last-child{margin-bottom:0}
#typography .ty-sample{font-family:var(--type-family);color:var(--text);margin:0;white-space:nowrap;letter-spacing:normal}
#typography .ty-measure{font-size:var(--type-small);line-height:1.5;font-weight:400;color:var(--muted);margin:var(--space-1) 0 0;white-space:nowrap}
@media(max-width:767px){#typography.typography-reference{padding:var(--space-6) var(--space-4)}}