.at { padding: clamp(16px, 3vw, 40px); }
.at-head { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 24px; padding: 10px 0; background: color-mix(in srgb, var(--rd-paper) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 12px; line-height: 16px; color: var(--rd-ink3); }
.at-head p { margin: 0; } .at-head b { color: var(--rd-ink); font-weight: var(--rd-w-label); } .at-head code { font: 12px/16px var(--font-mono); color: var(--rd-ink2); }
.at-tools { display: flex; align-items: center; gap: 8px; }
.at-sw { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 9999px; background: var(--sw); box-shadow: inset 0 0 0 .5px var(--rd-line-strong); cursor: default; }
.at-sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--rd-paper), 0 0 0 3.5px var(--rd-ink); }
.at-tools input { width: 30px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; }
.at-hex { font-variant-numeric: tabular-nums; min-width: 6ch; }
.at-fig { width: 100%; margin: 0 0 clamp(32px, 5vw, 64px); }