Orbit dashboard

<section class="widget"><header><div><small>WORKSPACE OVERVIEW</small><h1>Your momentum.</h1></div><span class="period">This week ⌄</span></header><div class="metric"><strong>24,680</strong><span>↗ 18.6%</span></div><p>Interactions across your projects</p><svg viewBox="0 0 410 105" aria-label="Activity increasing through the week"><defs><linearGradient id="fill" x2="0" y2="1"><stop stop-color="#7185ff" stop-opacity=".4"/><stop offset="1" stop-color="#7185ff" stop-opacity="0"/></linearGradient></defs><path d="M0 85 C30 85 30 38 60 55 S95 86 125 53 S165 63 190 39 S220 70 250 37 S280 45 310 24 S355 44 410 7 L410 105 L0 105Z" fill="url(#fill)"/><path d="M0 85 C30 85 30 38 60 55 S95 86 125 53 S165 63 190 39 S220 70 250 37 S280 45 310 24 S355 44 410 7" fill="none" stroke="#91a0ff" stroke-width="2.5"/></svg><div class="days"><span>MON</span><span>TUE</span><span>WED</span><span>THU</span><span>FRI</span><span>SAT</span><span>SUN</span></div><footer><span><b class="dot"></b> All systems operational</span><span>Updated just now</span></footer></section>

*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;font-family:system-ui,sans-serif;background:#0b1020;color:#eaf0ff;padding:35px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #63dbea;outline-offset:4px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}body{background:radial-gradient(ellipse at 50% 40%,#20234b,#0a1020 70%)}.widget{width:460px;max-width:100%;background:#111a2b;border:1px solid #2c3554;border-radius:17px;padding:26px;box-shadow:0 18px 60px #0004}header{display:flex;justify-content:space-between;align-items:center}small{font-size:7px;letter-spacing:2px;color:#8393b4}h1{font-size:23px;margin:6px 0 23px;letter-spacing:-.8px}.period{font-size:8px;border:1px solid #2b354a;border-radius:6px;padding:7px 10px;color:#bac5df;align-self:start}.metric{display:flex;align-items:center;gap:16px}.metric strong{font-size:38px;font-weight:550;letter-spacing:-1.5px}.metric>span{font-size:9px;color:#72dcb7;background:#72dcb712;border-radius:4px;padding:4px 6px}p{font-size:10px;color:#788ba9;margin:7px 0 18px}svg{width:100%;display:block}.days{display:flex;justify-content:space-between;color:#7585a4;font-size:6px;letter-spacing:1px;margin:12px 0 25px}footer{border-top:1px solid #28314a;padding-top:17px;display:flex;justify-content:space-between;font-size:7px;color:#8a9db9}.dot{display:inline-block;width:4px;height:4px;background:#74d9b4;border-radius:50%;margin-right:4px}