.doc-specimen{background:var(--doc-surface);border-radius:var(--radius-lg);padding:var(--space-2xl)}.doc-specimen-canvas{background:var(--doc-bg);border-radius:var(--radius-md);padding:var(--space-xl);place-items:center;display:grid;overflow:hidden}@media (max-width:640px){.doc-specimen{padding:var(--space-xl)}}.doc-info-grid{gap:var(--space-lg);grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));display:grid}.doc-info-card{background:var(--doc-surface);border-radius:var(--radius-lg);padding:var(--space-xl);gap:var(--space-lg);flex-direction:column;align-items:stretch;display:flex}.doc-info-card>.doc-specimen-canvas{width:100%}.doc-info-card-copy{color:var(--doc-text);gap:var(--space-xs);flex-direction:column;display:flex}.doc-info-card-copy p{margin:0;font-size:15px;line-height:22px}.doc-do-dont-grid{gap:var(--space-lg);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.doc-do-dont-grid>:last-child:nth-child(odd){grid-column:2}.doc-do-dont-example{width:100%;min-height:112px;padding:var(--space-lg);border-radius:var(--radius-md);background:var(--doc-bg);border-bottom:2px solid;place-items:center;display:grid}.doc-do-dont-example>*{margin:auto}.doc-do-dont-label{align-items:center;gap:var(--space-xs);display:flex}.doc-role-pin,.doc-role-number{border-radius:var(--radius-full);background:var(--doc-accent);width:24px;height:24px;color:var(--doc-bg);font-family:var(--font-mono), monospace;font-size:var(--doc-nav-label-size);place-items:center;line-height:1;display:grid}.doc-role-pin{z-index:2;position:absolute}.doc-role-legend{gap:var(--space-xs) var(--space-sm);grid-template-columns:24px max-content max-content;width:max-content;min-width:100%;max-width:100%;display:grid;overflow-x:auto}.doc-role-legend-row{display:contents}.doc-role-legend-row>*{white-space:nowrap}.doc-role-legend-name{color:var(--doc-text);font-family:var(--font-mono), monospace;font-size:var(--doc-nav-label-size)}.doc-role-legend-detail{color:var(--doc-muted);font-size:var(--doc-nav-label-size)}.doc-role-legend-detail code{color:inherit;font-family:var(--font-mono), monospace;font-size:inherit}@media (max-width:640px){.doc-do-dont-grid{grid-template-columns:minmax(0,1fr)}.doc-do-dont-grid>:last-child:nth-child(odd){grid-column:auto}}