:root{--ink:#0A1723;--ink2:#132536;--blue:#4AB0EC;--paper:#F4F1EA;--muted:rgba(244,241,234,.6);--line:rgba(244,241,234,.14)}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ink);color:var(--paper);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
.serif,h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:500;letter-spacing:-.02em}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wrap{width:min(1040px,100% - 32px);margin:auto;position:relative}

/* colour field behind the header */
.glow{position:absolute;inset:0 0 auto 0;height:620px;overflow:hidden;pointer-events:none;z-index:0}
.glow i{position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(90px);opacity:.28}

nav{display:flex;justify-content:space-between;align-items:center;padding:16px 0;font-size:13px;position:relative;z-index:2}
nav .brand{display:flex;gap:9px;align-items:center;font-weight:600;letter-spacing:.14em;text-decoration:none}
.me{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border:1px solid var(--line);border-radius:30px;color:var(--muted);background:rgba(10,23,35,.4)}
.me .av{width:22px;height:22px;border-radius:50%;background:var(--blue);display:grid;place-items:center;color:var(--ink);font-size:11px;font-weight:700}
.me b{color:var(--paper);font-weight:500}

.today{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center;padding:20px 0 24px;position:relative;z-index:2}
.ring{width:236px;height:236px;position:relative}
.ring svg{width:100%;height:100%;overflow:visible}
.ring .c{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.ring .n{font-family:Fraunces,serif;font-size:46px;font-weight:300;line-height:1}
.ring .l{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);font-weight:600}
.today h1{font-size:clamp(38px,6vw,66px);line-height:1;margin:10px 0 12px}
.today p{color:var(--muted);line-height:1.55;max-width:470px}
.streak{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.chip{font-size:13px;color:var(--muted);border:1px solid var(--line);padding:7px 12px;border-radius:30px;background:rgba(10,23,35,.4)}
.chip b{color:var(--paper)}
@media(max-width:720px){.today{grid-template-columns:1fr;justify-items:center;text-align:center;gap:18px}.ring{width:196px;height:196px}.streak{justify-content:center}}

/* week strip under the ring */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;position:relative;z-index:2;margin-bottom:34px}
.day{border:1px solid var(--line);border-radius:18px;padding:12px 10px;text-align:center;font-size:12px;color:var(--muted);background:rgba(10,23,35,.35)}
.day.now{border-color:var(--paper);color:var(--paper)}
.day .dots{display:flex;flex-direction:column;gap:5px;margin-top:10px;align-items:stretch}
.day .dots span{height:22px;border-radius:8px;font-size:10px;font-weight:700;display:grid;place-items:center;overflow:hidden;white-space:nowrap}
@media(max-width:620px){.week{gap:4px}.day{padding:8px 3px;border-radius:12px}.day .dots span{font-size:0;height:14px}}