@layer components{.br-chip{border:1px solid var(--color-line-2);font-family:var(--font-mono);font-size:max(10px, var(--mono-min));letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;color:var(--color-mute);align-items:center;gap:6px;padding:3px 8px;line-height:1.5;display:inline-flex}.br-chip-cyan{color:var(--color-cyan)}.br-chip-lime{color:var(--color-accent)}.br-chip-off{color:var(--color-off)}.br-chip-photo{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--color-off-soft);background:#09090bb8}.br-hex{width:44px;height:48px;font-family:var(--font-mono);letter-spacing:.1em;color:var(--color-off);flex-shrink:0;justify-content:center;align-items:center;font-size:12px;display:inline-flex;position:relative}.br-hex>svg{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.br-hex polygon{fill:#0000;stroke:var(--color-line-2);stroke-width:1px;vector-effect:non-scaling-stroke;transition:fill var(--dur-medium) var(--ease-out), stroke var(--dur-medium) var(--ease-out)}.br-hex>span{position:relative}.br-hex[data-on] polygon,.br-hex-cyan polygon{fill:var(--color-cyan-veil);stroke:var(--color-cyan)}.br-hex-warn polygon{stroke:var(--color-warning)}.br-hex-warn{color:var(--color-warning)}.br-sticky-col{top:calc(var(--header-h) + 24px);align-self:start;position:sticky}@media (max-width:63.99rem){.br-sticky-col{position:static}}}