@keyframes animationOpacityIn{0%,35%{opacity:1}55%,80%{opacity:0}to{opacity:1}}@keyframes animationOpacityOut{0%,35%{opacity:0}55%,80%{opacity:1}to{opacity:0}}@keyframes animationColor{0%,35%{fill:oklch(from var(--color-bg-brand-primary) l c h/.5)}55%,80%{fill:var(--color-bg-success-primary)}to{fill:oklch(from var(--color-bg-brand-primary) l c h/.5)}}#icon-grid{z-index:-1;height:100%;position:absolute;-webkit-mask-image:linear-gradient(90deg,#000,#0003 50%,#0000 100%);mask-image:linear-gradient(90deg,#000,#0003 50%,#0000 100%)}#icon-grid #subdivisions>line{stroke:var(--color-border-base);stroke-width:1px;vector-effect:non-scaling-stroke;mix-blend-mode:exclusion}#icon-grid #circles>circle{fill:none;stroke:var(--color-border-base);stroke-width:1px;vector-effect:non-scaling-stroke;mix-blend-mode:exclusion}#icon-grid #safe-area{fill:oklch(from var(--color-bg-warning-tertiary) l c h/.6);opacity:0}#icon-grid #icons{transition:opacity .2s 1s,visibility .2s 1s}#icon-grid #icons>circle,#icon-grid #icons>rect{fill:oklch(from var(--color-bg-brand-primary) l c h/.6);animation-duration:4s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}#icon-grid #icons>circle{animation-name:animationOpacityIn}#icon-grid #icons>rect{animation-name:animationOpacityOut}:is(.grid:has(#keylines-description:hover) #icons,.grid:has(#keylines-description:hover) #safe-area){opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}:is(.grid:has(#keylines-description:hover) #subdivisions>line,.grid:has(#keylines-description:hover) #circles>circle){stroke:var(--color-border-warning-primary);mix-blend-mode:unset;transition:opacity .2s,visibility .2s}.grid:has(#safe-area-description:hover) #icons{opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.grid:has(#safe-area-description:hover) #safe-area{opacity:1;transition:opacity .2s,visibility .2s}#pixel-perfect #pixels-grid>line{stroke:var(--color-border-base);stroke-width:1px;vector-effect:non-scaling-stroke}#pixel-perfect #correct-vector-line>*,#pixel-perfect #incorrect-vector-line>*{stroke:var(--color-border-warning-primary);stroke-width:1px;vector-effect:non-scaling-stroke;fill:none}#pixel-perfect #correct-vector-line>rect,#pixel-perfect #incorrect-vector-line>rect{fill:var(--color-bg-base)}#pixel-perfect #correct,#pixel-perfect #incorrect-vector{fill:oklch(from var(--color-bg-brand-primary) l c h/.5)}#pixel-perfect #incorrect-raster{opacity:0}#pixel-perfect #incorrect-raster>polygon{fill:var(--color-bg-danger-primary)}#pixel-perfect #incorrect-raster>rect{fill:oklch(from var(--color-bg-danger-primary) l c h/.5)}#pixel-perfect #incorrect-raster>rect:nth-last-child(2){fill:oklch(from var(--color-bg-danger-primary) l c h/.7)}#pixel-perfect #incorrect-raster>rect:last-child{fill:oklch(from var(--color-bg-danger-primary) l c h/.3)}#pixel-perfect #correct,#pixel-perfect #incorrect-raster,#pixel-perfect #incorrect-vector,#pixel-perfect #correct-vector-line,#pixel-perfect #incorrect-vector-line{animation-duration:6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}#pixel-perfect #correct-vector-line,#pixel-perfect #incorrect-vector-line,#pixel-perfect #incorrect-vector{animation-name:animationOpacityIn}#pixel-perfect #incorrect-raster{animation-name:animationOpacityOut}#pixel-perfect #correct{animation-name:animationColor}