:where([data-hairline]){display:block;position:relative;aspect-ratio:5/4;touch-action:pan-y;user-select:none;-webkit-user-select:none;--hl-sw:var(--hairline-stroke,0.9);--hl-plate:var(--hairline-plate,#ffffff);--hl-hi:var(--hairline-hi,#232327);--hl-edge:var(--hairline-edge,#a4a4ac);--hl-mid:var(--hairline-mid,#c3c3c9);--hl-lo:var(--hairline-lo,#e0e0e4)}:where([data-hairline]){--hl-plate:var(--hairline-plate,light-dark(#ffffff,#08090a));--hl-hi:var(--hairline-hi,light-dark(#232327,#d0d6e0));--hl-edge:var(--hairline-edge,light-dark(#a4a4ac,#5b5d64));--hl-mid:var(--hairline-mid,light-dark(#c3c3c9,#3e3e44));--hl-lo:var(--hairline-lo,light-dark(#e0e0e4,#29292d))}:where(.dark,[data-theme=dark]) :where([data-hairline]){--hl-plate:var(--hairline-plate,#08090a);--hl-hi:var(--hairline-hi,#d0d6e0);--hl-edge:var(--hairline-edge,#5b5d64);--hl-mid:var(--hairline-mid,#3e3e44);--hl-lo:var(--hairline-lo,#29292d)}:where([data-hairline][data-hairline-theme=light]){--hl-plate:var(--hairline-plate,#ffffff);--hl-hi:var(--hairline-hi,#232327);--hl-edge:var(--hairline-edge,#a4a4ac);--hl-mid:var(--hairline-mid,#c3c3c9);--hl-lo:var(--hairline-lo,#e0e0e4)}:where([data-hairline][data-hairline-theme=dark]){--hl-plate:var(--hairline-plate,#08090a);--hl-hi:var(--hairline-hi,#d0d6e0);--hl-edge:var(--hairline-edge,#5b5d64);--hl-mid:var(--hairline-mid,#3e3e44);--hl-lo:var(--hairline-lo,#29292d)}:where([data-hairline]:focus-visible){outline:1.5px solid var(--hl-hi);outline-offset:2px}:where([data-hairline]>svg){position:absolute;inset:0;width:100%;height:100%;display:block}:where([data-hairline]>[data-hairline-live]){position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}: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)}.hairline-card{--hairline-plate:var(--bg-canvas);--hairline-hi:var(--fg-primary);--hairline-edge:var(--fg-tertiary);--hairline-mid:var(--fg-placeholder);--hairline-lo:var(--border-subtle);--hairline-stroke:1}.hairline-card [data-hairline]{touch-action:pan-x pan-y}.hairline-card [data-hairline] svg .hl-logo{color:var(--fg-secondary)}.hairline-card [data-hairline] svg .hl-logo path{fill:currentColor;stroke:none}