@import "https://fonts.googleapis.com/css2?family=DM+Mono&family=Space+Grotesk:wght@400;500;700&display=swap";
:root{--ink:#17171d}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{font-family:Space Grotesk,Arial,sans-serif}main{--background-lightness:93%;--foreground-lightness:10%;--card-lightness:99%;--accent-opacity:1;width:100%;height:100dvh;max-height:100dvh;padding:max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));isolation:isolate;background:hsl(40 28% var(--background-lightness));color:hsl(250 12% var(--foreground-lightness));place-items:center;transition:background-color 1s linear,color 1s linear;display:grid;overflow:hidden}main:before,main:after{z-index:-1;aspect-ratio:1;width:clamp(8rem,28vw,20rem);opacity:var(--accent-opacity);content:"";border-radius:50%;transition:opacity 1s linear;position:absolute}main:before{background:#dbff3f;top:-7vw;left:-7vw}main:after{background:#ffbd9a;bottom:-8vw;right:-8vw}.countdown{text-align:center;width:min(100%,72rem);margin-inline:auto}.date{letter-spacing:clamp(.12em,.8vw,.25em);margin:0 0 clamp(1rem,3vw,2.5rem);font:500 clamp(.72rem,1.7vw,1.05rem)/1.2 DM Mono,monospace}.clock{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.65rem,2vw,1.5rem);display:grid}.unit{gap:clamp(.55rem,1.5vw,.8rem);min-width:0;display:grid}output{background:hsl(40 28% var(--card-lightness));font-variant-numeric:tabular-nums;letter-spacing:-.08em;border:2px solid;place-items:center;min-width:0;min-height:clamp(5.5rem,15vw,11rem);padding:clamp(.75rem,2vw,1.75rem) .15rem;font:700 clamp(2.25rem,8vw,7.5rem)/.8 Space Grotesk,sans-serif;transition:background-color 1s linear;display:grid;box-shadow:clamp(3px,.7vw,8px) clamp(3px,.7vw,8px)}.unit span{overflow-wrap:anywhere;letter-spacing:.1em;text-transform:uppercase;font:500 clamp(.58rem,1.3vw,.85rem)/1.15 DM Mono,monospace}@media (max-width:44rem){.clock{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.8rem,4vw,1.25rem)}output{min-height:clamp(5.5rem,24vw,8.5rem);font-size:clamp(2.25rem,12vw,5rem)}}@media (max-height:31rem) and (min-width:44.0625rem){main{padding-block:.75rem}.date{margin-bottom:.75rem}output{min-height:4.5rem;padding-block:.75rem;font-size:clamp(2.25rem,7vw,5rem)}}@media (max-width:22rem){main{padding-inline:.75rem}.clock{gap:.65rem}output{min-height:5rem;font-size:2rem}.unit span{letter-spacing:.07em;font-size:.52rem}}