.system-tile{--tile-edge:var(--tile-size,32px);--tile-tint:var(--tile-color,var(--color-text-2));width:var(--tile-edge);height:var(--tile-edge);corner-shape:superellipse(1.5);color:color-mix(in srgb, var(--tile-tint) 78%, #fff);background:linear-gradient(to bottom right, color-mix(in srgb, var(--tile-tint) 24%, #0000), color-mix(in srgb, var(--tile-tint) 12%, #0000));border-radius:40%;flex:none;place-items:center;display:grid;position:relative}.system-tile svg{width:46%;height:46%}.system-tile:before{content:"";border-radius:inherit;corner-shape:inherit;background:linear-gradient(to bottom right, color-mix(in srgb, var(--tile-tint) 45%, #0000), color-mix(in srgb, var(--tile-tint) 5%, #0000));pointer-events:none;padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);mask-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.system-tile[data-glow]{box-shadow:0 10px 40px -12px color-mix(in srgb, var(--tile-tint) 60%, transparent)}@supports (color:attr(data-color type(<color>), red)){.system-tile[data-color]{--tile-tint:attr(data-color type(<color>), var(--tile-color,var(--color-text-2)))}}@supports (width:attr(data-size px, 0px)){.system-tile[data-size]{--tile-edge:attr(data-size px, var(--tile-size,32px))}}