/* V3 additions — dot texture and subtle 3D bevel. Additive; V1/V2 tokens unchanged. */
:root{
/* dot register texture — quieter sibling of the crosshair */
--pattern-dots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='13' cy='13' r='1.4' fill='rgba(19,20,22,0.14)'/%3E%3C/svg%3E");/* @kind other */
--pattern-dots-size:26px 26px;/* @kind other */
/* hover state of the texture: lighter + orange-saturated, revealed around the cursor */
--pattern-dots-hot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='13' cy='13' r='1.6' fill='rgba(255,102,31,0.55)'/%3E%3C/svg%3E");/* @kind other */
/* subtle 3D bevel — light from above: hairline top highlight, soft lower shade. Keep faint. */
--bevel-raise:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(19,20,22,.05),inset 1px 0 0 rgba(255,255,255,.35),inset -1px 0 0 rgba(19,20,22,.03);/* @kind shadow */
--bevel-raise-strong:inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 -2px 3px rgba(19,20,22,.07),inset 1px 0 0 rgba(255,255,255,.4),inset -1px 0 0 rgba(19,20,22,.04);/* @kind shadow */
}
.sn-dots{background-image:var(--pattern-dots);background-size:var(--pattern-dots-size);background-repeat:repeat}