.diagram-preview{display:grid;justify-items:center;gap:var(--space-3);overflow:hidden}.diagram-preview__title{font-family:var(--font-display);font-weight:400;font-size:var(--text-h2);margin:0}.sound-canvas{width:100%;height:auto;aspect-ratio:900 / 260;border-radius:var(--radius-md);background:var(--color-surface-sunken)}.sk-bars{display:grid;gap:var(--space-2);grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}.sk-bar{display:grid;gap:4px;padding:var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}.sk-bar[data-playing]{box-shadow:0 0 0 2px var(--color-playing)}.tab-grid{border-collapse:collapse;font-family:var(--font-data);font-size:var(--text-small)}.tab-grid th{padding:2px 6px;font-weight:600;white-space:nowrap;text-align:left}.tab-grid thead th[data-playing]{color:var(--color-playing)}.tab-grid td{padding:0;border-bottom:1px solid var(--fb-string)}.tab-grid__bar{border-left:2px solid var(--color-border-strong)}.tab-cell{width:30px;height:30px;border:0;background:transparent;color:var(--color-text);text-align:center;font:inherit;font-weight:700}.tab-cell:focus{outline:2px solid var(--color-focus);background:var(--color-selected-bg)}