body.page-time .wrap { max-width:760px; }

.page-head { padding:2.5rem 0 1.2rem; }
.hl { background:var(--c-blue); }
.page-head p { max-width:62ch; }

.win { margin-bottom:1.6rem; }
.win-body { padding:1.3rem 1.4rem 1.4rem; }
.win-label { text-align:center; font-family:var(--mono); font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-dim); margin-bottom:1rem; }
.win-foot { text-align:center; font-family:var(--mono); font-size:0.72rem; color:var(--text-dim); margin-top:1.1rem; }

.bday-row { display:flex; align-items:center; gap:0.9rem; flex-wrap:wrap; }
.bday-row label { font-family:var(--mono); font-size:0.78rem; color:var(--text-mid); }
.bday-input { border:2.5px solid var(--ink); border-radius:8px; background:var(--win-2); color:var(--text-hi); font-family:var(--mono); font-size:0.9rem; padding:0.45rem 0.7rem; outline:none; }
.bday-input:focus { border-color:var(--c-blue); }

.blocks-wrap { --cell:26px; display:flex; gap:0.7rem; justify-content:center; }
.blocks-labels { display:grid; grid-template-rows:repeat(12, var(--cell)); gap:4px; align-items:center; justify-items:end; font-family:var(--mono); font-size:0.64rem; color:var(--text-dim); }
.blocks-grid { display:grid; grid-template-columns:repeat(12, var(--cell)); grid-auto-rows:var(--cell); gap:4px; }
.block { width:100%; height:100%; border-radius:5px; background:var(--cell-off); border:2px solid transparent; transition:background .15s ease; }
.block.filled { background:color-mix(in srgb, var(--c-blue) 55%, var(--cell-off)); }
.block.now { background:transparent; border-color:var(--c-blue); box-shadow:0 0 8px color-mix(in srgb, var(--c-blue) 60%, transparent); }

.prog { display:flex; flex-direction:column; gap:0.85rem; }
.prog-row { display:grid; grid-template-columns:90px 1fr 46px; gap:0.9rem; align-items:center; }
.prog-row .k { font-family:var(--mono); font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-mid); }
.prog-dots { display:flex; gap:4px; flex-wrap:wrap; }
.prog-dots .d { width:9px; height:9px; border-radius:50%; background:var(--cell-off); }
.prog-dots .d.on { background:var(--c-blue); }
.prog-row .v { font-family:var(--mono); font-size:0.82rem; text-align:right; color:var(--text-hi); }

.life-grid { --dot:7px; display:grid; grid-template-columns:repeat(52, var(--dot)); gap:2px; justify-content:center; }
.life-grid .w { width:var(--dot); height:var(--dot); border-radius:2px; background:var(--cell-off); }
.life-grid .w.lived { background:color-mix(in srgb, var(--c-blue) 50%, var(--cell-off)); }
.life-grid .w.now { background:transparent; box-shadow:0 0 0 2px var(--c-blue); border-radius:50%; }
.life-empty { text-align:center; font-family:var(--mono); font-size:0.78rem; color:var(--text-dim); padding:1.5rem 0; }

body.page-time .footbar { margin-top:1.4rem; }

@media (max-width:560px){
  .blocks-wrap{ --cell:18px; }
  .life-grid{ --dot:5px; gap:1.5px; }
  .prog-row{ grid-template-columns:72px 1fr 42px; }
}