@import "https://fonts.googleapis.com/css2?family=Nova+Square&display=swap";:root{color:#111;font-synthesis:none;background:#fff;font-family:Nova Square,Consolas,Lucida Console,monospace}*{box-sizing:border-box}html,body,#app{min-width:100%;min-height:100%;margin:0}body{overflow:hidden}.timer{color:#fff;flex-direction:column;justify-content:center;align-items:center;gap:clamp(3rem,12vh,8rem);min-height:100vh;padding:2rem;transition:background-color .18s linear,color .18s linear;display:flex;position:relative}.display{letter-spacing:0;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:center;grid-template-columns:2.16em .3em 1.44em .3em 1.44em .3em 1.44em;justify-content:center;place-items:center;width:7.38em;margin:0;font-family:Nova Square,Consolas,Lucida Console,monospace;font-size:min(20rem,12vw,32vh);font-weight:400;line-height:.8;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.top-circles{justify-content:center;gap:clamp(.35rem,1.5vw,1rem);display:flex;position:absolute;top:2rem;left:50%;transform:translate(-50%)}.top-label{letter-spacing:.12em;font-size:clamp(.7rem,1.5vw,1rem);position:absolute;top:calc(100% + .5rem);left:50%;transform:translate(-50%)}.top-circle{aspect-ratio:1;background:#fff;border:2px solid #000;border-radius:50%;width:clamp(1.25rem,4vw,3rem);display:block}.separator{opacity:.7;width:.3em}.digits{justify-content:center;display:flex}.digit{text-align:center;width:.72em;display:block}.media-lock{opacity:.7;width:4.2rem;height:3.5rem;display:block;position:absolute;top:75%;left:50%;transform:translate(-50%,-50%)scale(3)}.media-screen{border:3px solid;border-radius:.25rem;width:3.3rem;height:2.3rem;margin:auto;display:block;position:absolute;bottom:0;left:0;right:0}.media-play{border-top:.46rem solid #0000;border-bottom:.46rem solid #0000;border-left:.68rem solid;width:0;height:0;position:absolute;top:50%;left:50%;transform:translate(-35%,-50%)}.media-padlock{width:1.7rem;height:1.6rem;display:block;position:absolute;top:0;right:0}.media-shackle{border:3px solid;border-bottom:0;border-radius:.5rem .5rem 0 0;width:.85rem;height:.85rem;position:absolute;top:0;left:.42rem}.media-lock-body{background:currentColor;border:3px solid;border-radius:.15rem;height:.95rem;position:absolute;bottom:0;left:0;right:0}.media-lock-body:after{background:var(--media-lock-cutout,#fff);content:"";border-radius:.1rem;width:.2rem;height:.38rem;position:absolute;top:.22rem;left:50%;transform:translate(-50%)}@media (width<=38rem){.timer{gap:4rem;padding:1rem}.display{letter-spacing:0;flex-direction:column;gap:.12em;width:auto;font-size:min(8rem,24vw,22vh);display:flex;transform:translate(-50%,-50%)}.display .separator{display:none}.media-lock{top:85%;transform:translate(-50%,-50%)scale(2)}}