:root{
  --bg0:#020205;
  --fg:#e9e9f1;
  --muted:rgba(233,233,241,.7);
  --muted2:rgba(233,233,241,.45);
  --stroke:rgba(255,255,255,.08);
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--fg);
  font-family:var(--sans);
  background:var(--bg0);
  min-height:100%;
  overflow-x:hidden;
  position:relative;
}

/* ===== Background sky ===== */
.ps-sky{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background:
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(40,30,80,.20), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(20,30,60,.30), transparent 60%),
    var(--bg0);
}
.ps-sky__stars{
  position:absolute;
  inset:-20%;
  background-repeat:repeat;
  animation:psSkyDrift 260s linear infinite;
}
.ps-sky__stars--far{
  background-image:
    radial-gradient(1px 1px at 22px 30px, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 80px 110px, rgba(220,210,255,.45), transparent),
    radial-gradient(1px 1px at 150px 60px, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 220px 140px, rgba(200,210,255,.45), transparent),
    radial-gradient(1px 1px at 300px 30px, rgba(255,255,255,.3), transparent);
  background-size:400px 200px;
  opacity:.5;
}
.ps-sky__stars--mid{
  background-image:
    radial-gradient(1.5px 1.5px at 60px 90px, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 200px 50px, rgba(200,200,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 340px 180px, rgba(255,255,255,.6), transparent);
  background-size:500px 260px;
  animation-duration:200s;
  opacity:.7;
}
.ps-sky__stars--near{
  background-image:
    radial-gradient(2px 2px at 120px 80px, rgba(255,255,255,.95), transparent),
    radial-gradient(2px 2px at 380px 220px, rgba(220,210,255,.85), transparent);
  background-size:600px 320px;
  animation-duration:140s;
  opacity:.85;
}
@keyframes psSkyDrift{
  from{ transform:translate3d(0,0,0); }
  to{   transform:translate3d(-400px,-200px,0); }
}
.ps-sky__aurora{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 60% 40% at 30% 80%, rgba(80,60,140,.18), transparent 60%),
    radial-gradient(ellipse 50% 30% at 80% 30%, rgba(40,80,150,.14), transparent 60%);
  filter:blur(2px);
}
.ps-sky__vignette{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 100% 80% at 50% 50%, transparent 30%, rgba(0,0,0,.55) 95%);
}

.ps-header, .ps-main{ position:relative; z-index:2; }

html.page-loading body{ opacity:0; }
html.page-ready body{ opacity:1; transition:opacity .42s ease; }
html.page-leaving body{ opacity:0; transition:opacity .24s ease; }
@media (prefers-reduced-motion: reduce){
  html.page-loading body, html.page-leaving body{ opacity:1 !important; }
}

/* ===== Header ===== */
.ps-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px 28px 8px;
}
.ps-spacer{ width:120px; }
.ps-back{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:9px 16px;
  cursor:pointer;
  text-decoration:none;
  transition:color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
}
.ps-back:hover{
  color:#fff;
  border-color:rgba(255,255,255,.32);
  background:rgba(255,255,255,.06);
  transform:translateY(-1px);
}
.ps-title-wrap{ text-align:center; flex:1; min-width:0; }
.ps-eyebrow{
  margin:0;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.ps-title{
  margin:4px 0 0;
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(28px, 4.4vw, 56px);
  letter-spacing:.02em;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}

/* ===== Main ===== */
.ps-main{
  width:min(1100px, calc(100% - 32px));
  margin:0 auto;
  padding:24px 0 56px;
  display:flex;
  flex-direction:column;
  gap:28px;
}

.ps-block{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.42));
  padding:24px 28px;
}

.ps-block--clock{
  display:flex;
  align-items:center;
  gap:32px;
}

/* Day clock */
.ps-clock{
  position:relative;
  width:240px;
  height:240px;
  flex-shrink:0;
}
.ps-clock__canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.ps-clock__canvas svg{
  display:block;
  width:100%;
  height:100%;
  shape-rendering:geometricPrecision;
  text-rendering:optimizeLegibility;
  transition:opacity .35s ease;
}
.ps-clock.is-updating .ps-clock__canvas svg{
  opacity:.72;
}
.ps-clock__center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  font-family:var(--serif);
  font-style:italic;
  font-size:17px;
  font-weight:500;
  color:rgba(255,255,255,.82);
  letter-spacing:.06em;
  pointer-events:none;
  text-shadow:0 0 20px rgba(255,255,255,.12);
}
.ps-clock__ticks{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.ps-clock__tick{
  position:absolute;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  color:rgba(255,255,255,.52);
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.ps-clock__tick--00{ left:50%; top:2px; transform:translateX(-50%); }
.ps-clock__tick--06{ right:0; top:50%; transform:translateY(-50%); }
.ps-clock__tick--12{ left:50%; bottom:0; transform:translateX(-50%); }
.ps-clock__tick--18{ left:0; top:50%; transform:translateY(-50%); }
.ps-clock-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ps-clock-value{
  margin:0;
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:clamp(28px, 3.4vw, 40px);
  color:#fff;
}
.ps-clock-sub{
  margin:0;
  font-family:var(--sans);
  font-size:13px;
  color:rgba(255,255,255,.6);
}

/* Heatmap */
.ps-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.ps-tabs{
  display:inline-flex;
  gap:4px;
  padding:3px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.3);
}
.ps-tab{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.65);
  border:none;
  background:transparent;
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  transition:color .25s ease, background .25s ease;
}
.ps-tab:hover{ color:#fff; }
.ps-tab.is-active{
  color:#fff;
  background:rgba(255,255,255,.07);
}

.ps-heatmap{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ps-heatmap__hours{
  display:grid;
  grid-template-columns:48px repeat(24, 1fr);
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.2em;
  color:rgba(255,255,255,.32);
  margin-bottom:4px;
}
.ps-heatmap__hours span{ text-align:center; }
.ps-heatmap__hours span:first-child{ visibility:hidden; }

.ps-heatmap__rows{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.ps-heatmap__row{
  display:grid;
  grid-template-columns:48px repeat(24, 1fr);
  gap:3px;
  align-items:center;
}
.ps-heatmap__day{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.pulse__cell{
  aspect-ratio:1 / 1;
  border-radius:3px;
  background:rgba(255,255,255,.04);
  transition:background .35s ease, transform .35s ease;
}
.pulse__cell[data-level="1"]{ background:rgba(255,255,255,.09); }
.pulse__cell[data-level="2"]{ background:rgba(190,200,235,.22); }
.pulse__cell[data-level="3"]{ background:rgba(190,200,235,.45); }
.pulse__cell[data-level="4"]{ background:rgba(220,225,255,.85); box-shadow:0 0 5px rgba(220,225,255,.4); }

.ps-heatmap__row.is-faded .pulse__cell{ opacity:.18; }

/* Legend */
.ps-legend{
  margin-top:16px;
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
.ps-legend__cells{
  display:inline-flex;
  gap:3px;
}
.ps-legend__cells .pulse__cell{
  width:14px;
  height:14px;
  border-radius:3px;
}

/* Stats grid */
.ps-stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.ps-stat{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.4));
  padding:18px 20px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ps-stat__key{
  margin:0;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
.ps-stat__value{
  margin:0;
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:22px;
  color:#fff;
}
.ps-stat__hint{
  margin:0;
  font-family:var(--sans);
  font-size:12px;
  color:rgba(255,255,255,.55);
}

@media (max-width:780px){
  .ps-block--clock{ flex-direction:column; align-items:flex-start; }
  .ps-stats{ grid-template-columns:1fr; }
  .ps-heatmap__hours{ font-size:8px; }
  .ps-heatmap__hours span:nth-child(odd):not(:first-child){ visibility:hidden; }
  .ps-heatmap__row{ grid-template-columns:34px repeat(24, 1fr); }
  .ps-heatmap__hours{ grid-template-columns:34px repeat(24, 1fr); }
}