.op-reference{gap:var(--op-space-6);padding:var(--op-space-6);font-family:var(--op-font-family);color:var(--op-color-text);background:var(--op-color-bg);display:grid}.op-reference__header{gap:var(--op-space-2);display:grid}.op-reference__brand{font-size:var(--op-font-size-xs);font-weight:var(--op-font-weight-semibold);letter-spacing:var(--op-tracking-wide);text-transform:uppercase;color:var(--op-color-accent-text);margin:0}.op-reference__title{font-size:var(--op-font-size-2xl);line-height:var(--op-line-height-tight);letter-spacing:var(--op-tracking-tight);color:var(--op-color-heading);margin:0}.op-reference__lead{max-width:80ch;color:var(--op-color-muted);margin:0}.op-reference__themes{gap:var(--op-space-5);grid-template-columns:repeat(auto-fit,minmax(440px,1fr));align-items:start;display:grid}.op-reference__panel{gap:var(--op-space-5);padding:var(--op-space-5);border:var(--op-border-width) solid var(--op-color-border);border-radius:var(--op-radius-lg);background:var(--op-color-bg);color:var(--op-color-text);display:grid}.op-reference__panel-label{font-size:var(--op-font-size-xs);letter-spacing:var(--op-tracking-wide);text-transform:uppercase;color:var(--op-color-muted);margin:0}.op-reference__section{gap:var(--op-space-3);display:grid}.op-reference__section-title{font-size:var(--op-font-size-md);font-weight:var(--op-font-weight-semibold);color:var(--op-color-heading);margin:0}.op-reference__section-description{font-size:var(--op-font-size-sm);color:var(--op-color-muted);margin:0}.op-reference__section-body{gap:var(--op-space-3);display:grid}.op-reference__row{align-items:center;gap:var(--op-space-2);flex-wrap:wrap;display:flex}.op-reference__grid{gap:var(--op-space-3);grid-template-columns:repeat(auto-fit,minmax(190px,1fr));display:grid}.op-reference__swatches{gap:var(--op-space-3);grid-template-columns:repeat(auto-fit,minmax(170px,1fr));display:grid}.op-reference__swatch{gap:var(--op-space-1);display:grid}.op-reference__swatch-chip{height:var(--op-space-8);border:var(--op-border-width) solid var(--op-color-border);border-radius:var(--op-radius-sm)}.op-reference__token{font-family:var(--op-font-family-mono);font-size:var(--op-font-size-xs);color:var(--op-color-subtle)}.op-reference__type-row{gap:var(--op-space-1);padding-bottom:var(--op-space-2);border-bottom:var(--op-border-width) solid var(--op-color-border);display:grid}.op-reference__space-row{align-items:center;gap:var(--op-space-3);display:flex}.op-reference__space-bar{height:var(--op-space-4);background:var(--op-color-accent);border-radius:var(--op-radius-xs)}.op-reference__radius-box{width:var(--op-space-9);height:var(--op-space-9);background:var(--op-color-accent-subtle);border:var(--op-border-width) solid var(--op-color-accent)}.op-reference__elevation-card{gap:var(--op-space-1);padding:var(--op-space-4);border-radius:var(--op-radius-md);background:var(--op-color-surface-raised);display:grid}.op-reference__motion-demo{width:var(--op-space-8);height:var(--op-space-8);border-radius:var(--op-radius-sm);background:var(--op-color-accent);transition:transform var(--op-transition-base)}.op-reference__motion-demo:hover{transform:translateX(var(--op-space-6))}.op-reference__sheet-demo{border:var(--op-border-width) dashed var(--op-color-border);border-radius:var(--op-radius-md);min-height:320px;position:relative;overflow:hidden}.op-reference__sheet-demo .op-sheet-backdrop{padding:var(--op-space-4);place-items:center;position:absolute}.op-reference__sheet-demo .op-sheet{border-radius:var(--op-radius-lg)}.op-reference__icons{gap:var(--op-space-2);grid-template-columns:repeat(auto-fill,minmax(104px,1fr));display:grid}.op-reference__icon-cell{justify-items:center;gap:var(--op-space-1);padding:var(--op-space-2);border:var(--op-border-width) solid var(--op-color-border);border-radius:var(--op-radius-sm);display:grid}.op-reference__stack{justify-items:start;gap:var(--op-space-1);border:0;min-width:0;margin:0;padding:0;display:grid}.op-reference__stack>legend{margin-bottom:var(--op-space-1);font-size:var(--op-font-size-sm);font-weight:var(--op-font-weight-semibold);color:var(--op-color-heading)}