:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body,#app{display:flex;min-width:320px;height:100vh}@keyframes appear{0%{opacity:0;scale:.8}to{opacity:1;scale:1}}@media (prefers-reduced-motion: no-preference){img{animation:appear linear both;animation-timeline:view();animation-range:entry 25% cover 50%}}.color-preview{position:relative;isolation:isolate;transition:transform .15s ease-out}.color-preview:before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;background-image:linear-gradient(45deg,#808080 25%,transparent 25%),linear-gradient(-45deg,#808080 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#808080 75%),linear-gradient(-45deg,transparent 75%,#808080 75%);background-size:17px 17px;background-position:0 0,0 8.5px,8.5px -8.5px,-8.5px 0px}.color-preview:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;background-color:currentColor}