.honeycomb,.honeycomb-neutrals{width:min(100%,286px);margin-inline:auto}
.honeycomb{position:relative;aspect-ratio:234/200}
.honeycomb-row{position:absolute;display:flex;justify-content:center;width:100%;pointer-events:none}
.honeycomb button,.honeycomb-neutrals button{display:grid;place-items:center;position:relative;border:0;padding:0;cursor:pointer;pointer-events:auto}
.honeycomb button{width:calc(100% / 13);aspect-ratio:18/20;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.honeycomb-neutrals>div{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;margin:8px 0}
.honeycomb-neutrals button{width:100%;aspect-ratio:1;border:1px solid #0003;border-radius:3px}
.honeycomb button[aria-pressed=true]::after,.honeycomb button:focus-visible::after,.honeycomb-neutrals button[aria-pressed=true]::after,.honeycomb-neutrals button:focus-visible::after{content:"";width:42%;aspect-ratio:1;border:2px solid white;border-radius:50%;box-shadow:0 0 0 1px #171717}
.honeycomb button:focus-visible::after,.honeycomb-neutrals button:focus-visible::after{background:#171717}