:root{color-scheme:dark;--black:#0b0b0b;--white:#f5f5f2;--red:#f04439;--muted:#a0a09c;--line:#292929}
*{box-sizing:border-box}
body{margin:0;background:var(--black);color:var(--white);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:var(--red);color:var(--black)}
.page{max-width:1800px;margin:auto;min-height:100vh;min-height:100dvh;padding:0 5%;display:flex;flex-direction:column;overflow:hidden}
.header{display:flex;align-items:center;gap:28px;min-height:110px;border-bottom:1px solid var(--line)}
.wordmark{font-size:34px;font-weight:900;letter-spacing:-3px;color:var(--white);text-decoration:none}
.red{color:var(--red)}
.occupation,.status,.identity,.film-label,.footer-row,.replay{font-family:"Courier New",monospace}
.occupation,.status{font-size:11px;letter-spacing:.025em}
.occupation{color:var(--muted)}
.status{margin-left:auto;display:flex;align-items:center;gap:9px}
.status-light{width:6px;height:6px;background:var(--red);border-radius:50%}
main{position:relative;isolation:isolate;flex:1;padding:clamp(64px,10vh,125px) 0 90px}
.identity{font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:27px}
h1{position:relative;z-index:1;font-size:clamp(70px,9.5vw,154px);font-weight:800;letter-spacing:-.075em;line-height:.96;margin:0;max-width:1000px}
.cut{color:var(--red)}
.period{color:var(--white)}
.below-title{position:relative;z-index:1;margin-top:35px;display:flex;flex-direction:column;align-items:flex-start;gap:28px}
p{font-size:15px;line-height:1.8;color:var(--muted);margin:0}
.replay{border:0;border-bottom:1px solid #666;background:none;padding:10px 0;color:var(--white);font-size:11px;cursor:pointer;display:inline-flex;gap:25px;align-items:center;transition:color .2s,border-color .2s}
.replay[hidden]{display:none}
.replay:hover{color:var(--red);border-color:var(--red)}
a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:7px}
.film{position:absolute;width:clamp(290px,35vw,550px);aspect-ratio:1;right:-2%;top:50%;transform:translateY(-50%);color:#303030;z-index:0;overflow:hidden}
.film-ring{position:absolute;inset:8%;border:1px solid currentColor;border-radius:50%}
.film-ring.inner{inset:11%}
.film-cross{position:absolute;background:currentColor}
.horizontal{height:1px;left:0;right:0;top:50%}
.vertical{width:1px;top:0;bottom:0;left:50%}
.count{position:absolute;inset:0;display:grid;place-items:center;font-weight:700;font-size:clamp(170px,24vw,360px);letter-spacing:-.07em;padding-right:.07em;color:#242424}
.film-label{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:10px;letter-spacing:.2em;color:#777}
.sweep{position:absolute;inset:8%;border-radius:50%;background:conic-gradient(from 0deg,transparent 75%,#ffffff09 99%,#ffffff18 100%);opacity:0}
.film.playing .sweep{opacity:1;animation:rotate 1s linear 3}
.film.finished .count{color:#f044392b;font-size:clamp(110px,17vw,240px)}
footer{padding-bottom:30px}
.timeline{height:22px;position:relative;display:grid;grid-template-columns:1.2fr 2fr 1fr 1.8fr;gap:5px;margin-bottom:20px;border-top:1px solid var(--line);padding-top:8px}
.timeline span{height:6px;background:#222}
.timeline span:nth-child(2){background:#343434}
.timeline i{position:absolute;left:0;top:-5px;width:2px;height:25px;background:var(--red);transition:transform 3s cubic-bezier(.22,1,.36,1)}
.timeline i:before{content:"";position:absolute;top:0;left:-3px;border:4px solid transparent;border-top-color:var(--red)}
.footer-row{display:flex;justify-content:space-between;gap:20px;font-size:10px;color:var(--muted)}
@keyframes rotate{to{transform:rotate(360deg)}}
@media(min-width:1500px){main{padding-top:12vh}}
@media(max-width:900px){.film{right:-15%;opacity:.65}h1{font-size:clamp(70px,11.5vw,110px)}.occupation{display:none}}
@media(max-width:600px){.page{padding:0 7%}.header{min-height:85px}.wordmark{font-size:29px}.status{font-size:9px;gap:7px}main{padding:65px 0 55px}.identity{font-size:10px;margin-bottom:25px}h1{font-size:clamp(54px,13.6vw,81px)}p{font-size:13px}.below-title{margin-top:27px;gap:24px}.film{position:relative;top:auto;right:auto;transform:none;width:200px;margin:25px auto 0;opacity:1}.count{font-size:140px}.film.finished .count{font-size:95px}.film-label{font-size:8px}.footer-row{font-size:9px}footer{padding-bottom:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.sweep{display:none}}