:root{color-scheme:dark;--paper:#eef4f0;--mint:#c0e7d5;--muted:#aebcb7;--ink:#070c0d}
*{box-sizing:border-box}html,body{margin:0;min-width:280px;background:var(--ink);color:var(--paper)}
body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.scene{position:relative;isolation:isolate;min-height:600px;height:100svh;overflow:hidden}
.artwork,.shade{position:absolute;inset:0;z-index:-2;pointer-events:none}.artwork img{width:100%;height:100%;object-fit:cover;object-position:var(--focus,68%) 50%;opacity:0;transition:opacity 1s ease-out}.artwork img.loaded{opacity:1}
.shade{z-index:-1;background:linear-gradient(90deg,rgba(4,9,10,.88) 0%,rgba(4,9,10,.75) 28%,rgba(4,9,10,.16) 56%,transparent 73%),linear-gradient(0deg,rgba(4,9,10,.66),transparent 43%)}
.identity{position:absolute;top:clamp(32px,5.3vh,72px);left:clamp(32px,5.3vw,104px);display:flex;align-items:center;gap:18px}
.identity svg{width:35px;height:53px;overflow:visible;flex:none}.identity h1{font-size:clamp(29px,2.2vw,42px);font-weight:450;letter-spacing:-.055em;line-height:1;margin:0}
.countdown{position:absolute;left:clamp(32px,5.3vw,104px);bottom:clamp(48px,8.8vh,108px);width:clamp(450px,39vw,620px)}
.date-line{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid rgba(192,231,213,.23);padding-bottom:19px;font-size:10px;letter-spacing:.18em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--mint)}
#zone{font-size:10px;letter-spacing:.12em;color:var(--muted)}
.digits{display:flex;align-items:flex-start;justify-content:space-between;margin-top:20px;gap:10px}.unit{display:flex;flex-direction:column;align-items:center}.value{font-size:clamp(61px,5.45vw,92px);line-height:1.02;font-weight:250;letter-spacing:-.07em;font-variant-numeric:tabular-nums;min-width:1.02em}.unit:first-child .value{min-width:1.57em}
.seconds{color:var(--mint)}.label{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;margin-top:17px;color:var(--muted)}.divider{font-size:32px;line-height:1.7;font-weight:200;color:#687b73}
.status,.no-script{font-size:14px;letter-spacing:.03em;line-height:1.5;color:var(--mint);margin:20px 0 0}.status[hidden]{display:none}
@media(max-width:820px),(max-aspect-ratio:1/1){
 .scene{min-height:560px}.identity{top:max(25px,env(safe-area-inset-top));left:26px;gap:12px}.identity svg{width:26px;height:42px}.identity h1{font-size:29px}
 .artwork{top:74px;bottom:144px;mask-image:linear-gradient(180deg,transparent 0%,#000 8%,#000 82%,transparent 100%)}.artwork img{object-fit:cover;object-position:50% 50%}
 .shade{background:linear-gradient(180deg,var(--ink) 0%,rgba(7,12,13,.3) 12%,transparent 27%,transparent 60%,rgba(7,12,13,.45) 74%,var(--ink) 86%)}
 .countdown{left:26px;right:26px;width:auto;bottom:max(31px,env(safe-area-inset-bottom));max-width:600px;margin:auto}
 .date-line{font-size:9px;padding-bottom:16px;letter-spacing:.15em}#zone{font-size:9px;letter-spacing:.06em}
 .digits{gap:7px;margin-top:16px}.value{font-size:clamp(43px,12vw,74px);letter-spacing:-.06em}.divider{font-size:21px;line-height:1.9}.label{font-size:9px;margin-top:10px;letter-spacing:.07em}.status{font-size:12px}
}
@media(max-width:350px){.identity{left:21px}.countdown{left:21px;right:21px}.value{font-size:40px}.digits{gap:3px}#zone{font-size:9px}}
@media(max-height:540px) and (min-aspect-ratio:1/1){.scene{min-height:360px}.artwork img{object-fit:contain;object-position:right center}.identity{top:22px}.identity svg{height:40px;width:27px}.identity h1{font-size:27px}.countdown{bottom:27px;width:410px}.value{font-size:58px}.date-line{padding-bottom:11px}.digits{margin-top:12px}.label{margin-top:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
:root[data-motion="reduced"] *{animation:none!important;transition:none!important}