@import "https://fonts.googleapis.com/css2?family=Signika+Negative:wght@300;400;500;600;700&display=swap";html,body{width:100%;height:100%;position:relative}body{color:#aaa;word-break:break-all;background:#111;margin:0;padding:0;font:16px/18px Courier New,Courier,monospace}.TilesDemo{color:#000;grid-template-rows:auto 1fr auto;height:100%;font-family:Signika Negative,sans-serif;font-size:16px;font-weight:300;display:grid}.TilesDemo header{white-space:nowrap;border-bottom:1px solid #11141826;justify-content:space-between;padding:10px;display:flex}.TilesDemo .Tiles{overflow:auto}.TilesDemo footer{border-top:1px solid #11141826;padding:10px}.TilesDemo main{flex-wrap:wrap;gap:2px;margin:0 5px;display:flex}.TilesDemo button{all:unset;cursor:pointer;white-space:nowrap;border:1px solid #11141826;border-radius:10px;padding:0 8px;font-size:smaller}.TilesDemo button:hover{background-color:#ffffe0}.TilesDemo button.active{color:#111;background-color:#ff0;box-shadow:inset 0 0 0 2px #111}.TilesDemo button:focus-visible{outline-offset:2px;outline:2px dashed #111}.Tiles{grid-template-columns:repeat(auto-fill, minmax(var(--tile-min-width,250px), 1fr));cursor:pointer;grid-auto-rows:80px;gap:15px;padding:10px;display:grid}.Tiles header,.Tiles main,.Tiles section,.Tiles h1,.Tiles h2,.Tiles p,.Tiles .left,.Tiles .right{all:unset}.Tiles .Tile{background:linear-gradient(to right, var(--tile-yellow-color,#fff843) 0%, var(--tile-yellow-color,#fff843) var(--tile-progress,0%), var(--tile-color,white) var(--tile-progress,0%), var(--tile-color,white) 100%);color:var(--tile-font-color,black);border-radius:3px;transition:transform .2s cubic-bezier(.4,1,.75,.9),box-shadow .2s cubic-bezier(.4,1,.75,.9);box-shadow:0 0 0 1px #1114181a,0 1px 1px #11141833,0 2px 6px #11141833}.Tiles .Tile:hover{box-shadow:0 0 0 1px #1114181a,0 2px 4px #11141833,0 8px 24px #11141833}.Tiles .Tile{-webkit-user-select:none;user-select:none;flex-direction:column;justify-content:space-between;height:60px;padding:10px;display:flex}.Tiles .Tile section{justify-content:space-between;display:flex}.Tiles .Tile header{flex-direction:column;display:flex}.Tiles .Tile header h1{font-size:larger;font-weight:600}.Tiles .Tile main{align-items:center;font-size:xx-large;font-weight:600;display:flex}.Tiles .Tile main svg{height:30px}.Tiles .Tile main svg path{fill:var(--tile-font-color,black)}.Tiles .Tile p{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.Highlight{color:var(--tile-highlight-color,black);background-color:var(--tile-highlight-bg-color,orange)}