.topbar { position:sticky; top:0; }
.top-actions .date.timeline-clock { --clock-height:32px; display:flex; align-items:center; gap:6px; position:relative; padding:3px 6px 5px; border:1px solid #72816a; border-radius:4px; background:#1c3027; color:#fff4d5; font-variant-numeric:tabular-nums; }
.clock-calendar { display:flex; gap:3px; }.clock-unit { display:flex; flex-direction:column; align-items:center; gap:3px; }.clock-label { font-size:10px; line-height:12px; color:#d7ca9b; letter-spacing:.3px; }.clock-face { display:block; position:relative; height:var(--clock-height); min-width:29px; padding:0 5px; border:1px solid #53614e; border-radius:3px; background:linear-gradient(#344538 49%,#172c22 50%); box-shadow:0 2px 1px #0f211a; perspective:180px; }.clock-face:after { content:''; position:absolute; inset:50% 0 auto; border-top:1px solid #071a147d; pointer-events:none; }.clock-number,.clock-leaf { display:block; font-family:var(--mono,monospace); font-size:22px; font-weight:600; line-height:var(--clock-height); text-align:center; letter-spacing:.5px; }.clock-week { margin-left:3px; padding-left:7px; border-left:1px solid #72816a; }.clock-week .clock-number { color:#f4d88c; }.clock-leaf { position:absolute; inset:0; background:linear-gradient(#344538 49%,#172c22 50%); transform-origin:50% 50%; backface-visibility:hidden; pointer-events:none; }.clock-leaf-old { clip-path:inset(0 0 50%); animation:clock-fold-old .48s ease-in both; }.clock-leaf-new { clip-path:inset(50% 0 0); animation:clock-fold-new .48s ease-out both; }.clock-delta { position:absolute; top:-8px; right:3px; padding:1px 4px; font-size:10px; line-height:14px; background:#e5c476; color:#2d3825; border-radius:2px; opacity:0; }.clock-advanced .clock-delta { animation:clock-delta-in 1.7s ease-out both; }
@keyframes clock-fold-old { 0% { transform:rotateX(0); opacity:1; } 48%,100% { transform:rotateX(-90deg); opacity:0; } }@keyframes clock-fold-new { 0%,48% { transform:rotateX(90deg); } 100% { transform:rotateX(0); } }@keyframes clock-delta-in { 0% { opacity:0; transform:translateY(4px); } 15%,78% { opacity:1; transform:translateY(0); } 100% { opacity:0; transform:translateY(-3px); } }
html[data-motion=reduced] .clock-leaf,html[data-motion=reduced] .clock-delta { display:none; animation:none; }@media(prefers-reduced-motion:reduce) { .clock-leaf,.clock-delta { display:none; animation:none; } }
@media(max-width:1100px) { .top-actions { flex-wrap:wrap; justify-content:flex-end; }.top-actions .date.timeline-clock { --clock-height:27px; }.clock-number,.clock-leaf { font-size:19px; } }
@media(max-width:580px) { .topbar { position:sticky; top:0; padding-top:7px; padding-bottom:7px; }.top-actions { width:100%; justify-content:flex-end; gap:6px; }.top-actions .date.timeline-clock { display:flex; flex:1; justify-content:center; --clock-height:27px; }.clock-face { min-width:27px; }.clock-number,.clock-leaf { font-size:19px; }.clock-label { font-size:10px; }.clock-calendar { gap:3px; } }