:where([data-hairline]){aspect-ratio:5/4;touch-action:pan-y;-webkit-user-select:none;user-select:none;--hl-sw:.9;--hl-plate:var(--card);--hl-hi:var(--brand);--hl-edge:color-mix(in srgb, var(--brand-darkest) 42%, #fff);--hl-mid:var(--spruce-200);--hl-lo:var(--spruce-100);display:block;position:relative}:where([data-hairline][data-tone=dark]){--hl-plate:var(--brand-darkest);--hl-hi:var(--cyan);--hl-edge:color-mix(in srgb, #fff 55%, var(--brand-darkest));--hl-mid:color-mix(in srgb, #fff 28%, var(--brand-darkest));--hl-lo:color-mix(in srgb, #fff 14%, var(--brand-darkest))}:where([data-hairline]>svg){width:100%;height:100%;display:block;position:absolute;inset:0}:where([data-hairline]>svg) :where(path,polygon,ellipse,line){fill:var(--hl-plate);stroke:var(--hl-mid);stroke-width:var(--hl-sw);vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;transition:stroke .26s cubic-bezier(.5,0,.1,1)}:where([data-hairline]>svg) :where(.nf){fill:none}:where([data-hairline]>svg) :where(.fo){stroke:none}:where([data-hairline]>svg) :where(.sil){stroke:var(--hl-edge)}:where([data-hairline]>svg) :where(.hi){stroke:var(--hl-hi)}:where([data-hairline]>svg) :where(.lo){stroke:var(--hl-lo)}:where([data-hairline]>svg) :where(.dash){stroke-dasharray:1 3}:where([data-hairline]>svg) :where(.dot){stroke:none;fill:var(--hl-hi);transition:fill .26s cubic-bezier(.5,0,.1,1)}:where([data-hairline]>svg) :where(.dot.m){fill:var(--hl-edge)}:where([data-hairline]>svg) :where(.dot.off){fill:var(--hl-lo)}:where([data-hairline]>svg) :where(.ghost path){fill:none;stroke:var(--hl-mid)}:where([data-hairline]>svg) :where(path.sil.hi){fill:color-mix(in srgb, var(--hl-hi) 12%, var(--hl-plate))}:where([data-hairline]>svg) :where(ellipse.hi){fill:var(--hl-hi)}