:root { color-scheme: dark; --white: #f5f5f2; --black: #050505; --line: #2b2b2b; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--black); color: var(--white); font-family: Arial, Helvetica, sans-serif; }
body { min-height: 100vh; overflow: hidden; }
.frame { min-height: 100vh; padding: 22px 28px; display: flex; flex-direction: column; position: relative; }
.topline { display: flex; justify-content: space-between; font: 700 12px/1 Arial, sans-serif; letter-spacing: .08em; }
.countdown { margin: auto 0; position: relative; z-index: 2; }
.countdown div { font-size: clamp(54px, 14vw, 210px); font-weight: 900; letter-spacing: -.06em; line-height: .82; white-space: nowrap; }
.countdown p { margin: 20px 0 0; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.signal { border-top: 1px solid var(--line); padding-top: 18px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; position: relative; z-index: 2; }
.label { color: #858585; font-size: 10px; letter-spacing: .14em; }
blockquote { max-width: 720px; margin: 16px 0 8px; font-size: clamp(20px, 3vw, 42px); line-height: .98; font-weight: 700; }
cite { color: #858585; font-size: 12px; font-style: normal; }
.weather { display: flex; align-items: baseline; gap: 12px; margin-top: 16px; }
.weather strong { font-size: clamp(34px, 5vw, 72px); line-height: .9; }
.weather span { color: #aaa; font-size: 14px; text-transform: uppercase; }
.mark { position: absolute; width: min(54vw, 700px); aspect-ratio: 1; right: -11vw; top: 20%; background: url('assets/trk_avatar.png') center/cover no-repeat; opacity: .12; mix-blend-mode: screen; transition: opacity .8s ease, background-image .8s ease; }
@media (max-width: 700px) { .frame { padding: 18px; } .countdown { margin: 38vh 0 auto; } .countdown div { font-size: clamp(48px, 16vw, 110px); } .signal { grid-template-columns: 1fr; gap: 24px; } .mark { width: 90vw; right: -35vw; top: 28%; opacity: .1; } }