@font-face { font-family: 'Cormorant Garamond'; src: url('cormorant-garamond.ttf') format('truetype'); font-weight: 300 700; font-style: normal; font-display: swap; }
:root { color-scheme: dark; font-family: 'Helvetica Neue', Arial, sans-serif; color: var(--text, #e3dfd8); background: #010203; --top: #010204; --middle: #020306; --edge: #040509; --ground: #010203; --star-opacity: 1; --sun-opacity: 0; --sun-rise: -90px; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; overflow-x: hidden; background: var(--ground); }
.sky { position: absolute; inset: 0 0 auto; height: calc(51svh + 28px); overflow: hidden; background: linear-gradient(var(--top), var(--middle) 65%, var(--edge)); mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 55px), transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 55px), transparent 100%); }
.stars { position: absolute; inset: -12%; opacity: var(--star-opacity); transform-origin: 50% 160%; animation: sidereal-drift 86164s linear infinite; }
/* One sidereal revolution: about 15 degrees per hour, around a shared pole. */
@keyframes sidereal-drift { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.stars i { position: absolute; width: 1.5px; height: 1.5px; border-radius: 50%; background: #f1f4ff; opacity: var(--brightness); box-shadow: 0 0 4px #dbe7ff60; animation: twinkle var(--duration) ease-in-out var(--delay) infinite; }
@keyframes twinkle { 0%, 100% { opacity: var(--brightness); } 45% { opacity: calc(var(--brightness) * .60); } 75% { opacity: calc(var(--brightness) * .94); } }
@media (prefers-reduced-motion: reduce) { .stars, .stars i { animation: none; } }

.sun { position: absolute; width: 88px; height: 88px; left: calc(50% - 44px); bottom: var(--sun-rise); border-radius: 50%; background: #fff1bd; opacity: var(--sun-opacity); box-shadow: 0 0 60px 22px #ffdca055, 0 0 150px 70px #ffc68225; }
main { position: relative; text-align: center; padding: 0 20px 35px; min-height: 100svh; }
h1 { position: absolute; top: 17svh; left: 0; right: 0; margin: 0; font: 300 30px 'Cormorant Garamond', Georgia, serif; letter-spacing: .24em; padding-left: .24em; color: var(--text, #e5d6bb); }
.countdown { padding-top: calc(51svh + 40px); display: flex; flex-direction: column; gap: 19px; align-items: center; }
#seconds { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(42px, 10vw, 124px); line-height: 1.1; font-weight: 300; letter-spacing: -.025em; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
#label { font-size: 10px; letter-spacing: .42em; padding-left: .42em; text-transform: uppercase; color: var(--muted, #b0a79b); }
time { display: block; margin-top: 45px; font-size: 10px; letter-spacing: .08em; color: var(--muted, #9b948a); }
time span { padding: 0 8px; opacity: .5; }
#arrival { margin: 20px 0 0; font: italic 22px Georgia, serif; color: var(--text, #e5d6bb); }
@media (max-height: 550px) and (orientation: landscape) { .countdown { padding-top: calc(51svh + 18px); gap: 10px; } #seconds { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 48px; } time { margin-top: 20px; } }

.progress { position: fixed; bottom: 0; left: 0; width: 100%; height: 3px; z-index: 10; background: color-mix(in srgb, var(--text, #e3dfd8) 27%, transparent); pointer-events: none; }
.progress-fill { width: 100%; height: 100%; background: var(--text, #e3dfd8); opacity: .85; transform: scaleX(var(--progress, 0)); transform-origin: left center; }

.progress::after { content: ''; position: absolute; left: clamp(3px, calc(var(--progress, 0) * 100%), calc(100% - 3px)); top: 50%; width: 5px; height: 5px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--text, #e3dfd8); box-shadow: 0 0 7px 1px #e3dfd844; }

.progress-ticks { position: absolute; inset: 0; }
.progress-ticks span { position: absolute; bottom: 8px; width: 1px; height: 3px; background: var(--text, #e3dfd8); opacity: .22; transform: translateX(-50%); }
.progress-ticks span:first-child { transform: none; }
.progress-ticks span:last-child { transform: translateX(-100%); }

.progress-ticks .major, .progress-ticks .end { height: 8px; opacity: .55; }
.progress-ticks b { position: absolute; bottom: 13px; left: 50%; transform: translateX(-50%); font: 300 11px 'Cormorant Garamond', Georgia, serif; color: var(--text, #e3dfd8); }
.progress-ticks span:first-child b { left: 3px; transform: none; }