:root{
  --black:#000;--char:#0b0809;--crimson:#b3122b;--blood:#5c0a17;--purple:#1d0a26;
  --gray:#7d7479;--white:#e9e4e6;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"Roboto Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--black);color:var(--white);-webkit-text-size-adjust:100%}
body{font-family:var(--serif);overflow-x:hidden;min-height:100vh;min-height:100dvh;
  background:
    radial-gradient(ellipse 80% 45% at 50% 28%,rgba(120,10,30,.38),transparent 70%),
    radial-gradient(ellipse 90% 60% at 20% 100%,var(--purple),transparent 70%),
    var(--black);
  animation:breathe 14s ease-in-out infinite alternate}
@keyframes breathe{from{background-position:0 0}to{background-position:0 -20px}}
#dust{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.85) 100%)}
.stage{position:relative;z-index:2;min-height:100vh;min-height:100dvh;width:100%;max-width:760px;margin:0 auto;
  padding:max(18px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;gap:clamp(18px,4vh,36px)}
.name{font-weight:400;font-size:clamp(1rem,4vw,1.2rem);letter-spacing:.9em;margin-right:-.9em;color:var(--gray)}

.eye-wrap{width:min(62vw,300px);filter:drop-shadow(0 0 22px rgba(179,18,43,.45));animation:glow 9s ease-in-out infinite}
.eye{width:100%;height:auto;display:block}
.iris-move{transform-origin:120px 60px;animation:drift 23s ease-in-out infinite}
.pupil{transform-origin:120px 60px;animation:pupil 9s ease-in-out infinite}
.shade{animation:blink 9s ease-in-out infinite}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 12px rgba(179,18,43,.25))}50%{filter:drop-shadow(0 0 34px rgba(179,18,43,.7))}}
@keyframes drift{0%,100%{transform:translate(0,0)}30%{transform:translate(-9px,2px)}65%{transform:translate(8px,-2px)}}
@keyframes pupil{0%,100%{transform:scale(1)}50%{transform:scale(.8)}}
@keyframes blink{0%,92%,100%{transform:translateY(0)}96%{transform:translateY(46px)}}

.clock{width:100%;text-align:center}
.main{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:300;white-space:nowrap;
  line-height:1;color:var(--white);text-shadow:0 0 28px rgba(179,18,43,.55);font-size:44px}
.main i{font-style:normal;color:var(--crimson);margin:0 .22em;opacity:.8}
.units{display:flex;justify-content:space-between;color:var(--gray);font-size:.72rem;letter-spacing:.3em;margin-top:.9rem;padding:0 2%}
.units span{flex:1}
.line{min-height:3.2em;margin-top:1.6rem;font-style:italic;font-size:clamp(1rem,4.2vw,1.2rem);line-height:1.5;color:#c9c1c5;transition:opacity 1.8s ease}
.line.off{opacity:0}

.breakdown,.waiting{width:100%;text-align:center}
h2{font-weight:400;font-size:.8rem;letter-spacing:.28em;color:var(--gray);margin-bottom:.9rem}
dl{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(179,18,43,.18);border:1px solid rgba(179,18,43,.18)}
dl div{background:var(--char);padding:.9rem .4rem}
dd{font-family:var(--mono);font-size:clamp(1.1rem,5vw,1.5rem);overflow-wrap:anywhere}
dt{font-size:.72rem;letter-spacing:.22em;color:var(--gray);margin-top:.3rem}
.waiting p{color:#8d8388;font-size:1rem;line-height:1.9}

.video{width:100%}
.frame{position:relative;width:100%;aspect-ratio:16/9;background:var(--char);border:1px solid rgba(179,18,43,.2)}
video{width:100%;height:100%;object-fit:contain;background:#000;display:none}
.frame.has video{display:block}
.pick{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem;
  color:var(--gray);font-size:.9rem;cursor:pointer;min-height:48px}
.frame.has .pick{display:none}
.pick:hover,.pick:focus-visible{color:var(--white);outline:1px solid var(--crimson)}

.foot{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:.6rem;padding-top:1rem}
.copy{width:48px;height:48px;display:grid;place-items:center;background:transparent;color:#5c5358;border:1px solid transparent;border-radius:50%;cursor:pointer;transition:color .3s,border-color .3s}
.copy:hover,.copy:focus-visible{color:var(--white);border-color:rgba(179,18,43,.5);outline:none}
.toast{min-height:1.2em;font-size:.82rem;color:var(--gray);opacity:0;transition:opacity .5s}
.toast.on{opacity:1}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  #dust{display:none}
}