:root{--primary: #362dba;--bg: #24292e;--bg2: #2b3137;--text: #fafbfc;--text2: #fff;font-family:Bitcount Grid Single Variable,system-ui;--sqf-size: 100px;--base-size: 10px}:root *{box-sizing:border-box}body{box-sizing:border-box;background-color:var(--bg);color:var(--text);margin:0;padding:0;--navHeight: calc(var(--base-size) * 6);-webkit-user-select:none;user-select:none}body>h1{text-align:center}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}nav{height:var(--navHeight);background:#0005;line-height:3;font-size:calc(var(--base-size) * 2);display:flex;justify-content:center;gap:10px}nav a{color:var(--text)}.App{padding:calc(var(--base-size) * 4);min-height:calc(100vh - var(--navHeight));display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--base-size)}.App .clock{font-weight:300;font-size:4.5rem;line-height:1;width:400px;height:100px;display:flex;justify-content:center;align-items:center;border:5px dotted var(--text)}.App .bar{width:var(--width);height:var(--height);background:var(--text);position:relative;margin-bottom:var(--height)}.App .bar div{position:absolute;inset:0;background:var(--primary);width:calc(var(--fillWidth) * 1px);transition:width .3s ease-in-out}.App .buttons button{cursor:pointer}.App .sqf{width:var(--sqf-size);height:var(--sqf-size);position:relative}.App .sqf div{transition:all .3s ease-in-out;bottom:0;right:0;position:absolute;box-sizing:border-box}.App .sqf .base{width:100%;height:100%;border:1px dashed var(--text)}.App .sqf .bar2d{width:calc(var(--sqf-size) * var(--ratio));height:calc(var(--sqf-size) * var(--ratio));background:var(--primary)}.App .sqf .text{width:100%;height:100%;text-align:center;display:flex;align-items:center;justify-content:center;font-size:small;font-weight:300}.App .grid{height:200px;display:grid;gap:1px}.App button{background:var(--primary);border:var(--bg2);width:100px;height:100px;border-radius:50%;font-size:large;color:var(--text)}.App .stoptime{font-size:larger}.App ul{--itemWidth: 320px;width:100%;display:grid;grid-template-columns:repeat(auto-fill,var(--itemWidth));gap:calc(var(--base-size) * 2);overflow:auto;max-width:100%;padding:0}.App ul li{width:var(--itemWidth);padding:0 var(--base-size);display:flex;justify-content:space-between;border-bottom:1px solid var(--text);cursor:pointer}.App ul li:hover{border-bottom-color:var(--primary);background-color:var(--text);color:var(--primary)}.App ul li span{font-size:20px}.App .heatMap{width:50%;flex-wrap:wrap;display:flex;--size: 20px;gap:2px}.App .heatMap .heat{height:var(--size);width:var(--size);border-radius:2px;background-color:color-mix(in srgb,var(--primary) calc(var(--heat) * 100%),transparent);border:2px solid var(--primary);color:transparent}.bg{--size: 500px;overflow:hidden;background:#000;z-index:-1;position:fixed;inset:0}.bg .bl{border-radius:50%;position:absolute;filter:blur(200px);background:var(--color);width:var(--size);height:var(--size)}