@font-face {
  font-family:"Home Video";
  src:url("/fonts/HomeVideo.woff2") format("woff2");
  font-display:swap;
}
@font-face {
  font-family:"Input Mono Condensed";
  src:url("/fonts/InputMonoCondensed-Light.woff2") format("woff2");
  font-weight:300;
  font-display:swap;
}
:root {
  color-scheme:dark;
  --bg:#0d0806;
  --ink:#f3e7d6;
  --muted:#c9b8a2;
  --red:#ff2a2a;
  font-family:"Home Video","Courier New",monospace;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
}
.backdrop {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:-1;
  overflow:hidden;
}
.backdrop img {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 2.5s ease-in-out;
}
.backdrop img.visible {
  opacity:1;
}
.backdrop:after {
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:radial-gradient(ellipse at center,#0d080640 30%,#0d0806b3 100%);
}
.monitor {
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:clamp(16px,3.5vw,64px) clamp(16px,2vw,40px) clamp(14px,2.5vw,40px);
  /* Keep content clear of the notch / Dynamic Island and home indicator. */
  padding-left:max(clamp(16px,2vw,40px),env(safe-area-inset-left));
  padding-right:max(clamp(16px,2vw,40px),env(safe-area-inset-right));
  padding-bottom:max(clamp(14px,2.5vw,40px),env(safe-area-inset-bottom));
  text-shadow:0 0 12px #0d0806;
}
header {
  width:100%;
  display:grid;
  grid-template-columns:1fr minmax(0,auto) 1fr;
  align-items:start;
  gap:clamp(16px,2vw,40px);
}
.company {
  display:flex;
  align-items:center;
}
.company-name {
  margin-left:clamp(12px,1.6vw,30px);
  white-space:nowrap;
  font-family:"Input Mono Condensed","Courier New",monospace;
  font-weight:300;
  font-size:clamp(10px,.9vw,17px);
  line-height:2.1;
  letter-spacing:.32em;
  color:var(--muted);
}
.urei {
  display:block;
  flex-shrink:0;
  width:clamp(52px,5vw,96px);
  aspect-ratio:1;
  overflow:hidden;
}
/* All 29 frames of the in-game UREI rotation side by side; sliding the strip
   is compositor-only, so frames never blank out the way a moving mask can. */
.urei img {
  --frame:0;
  display:block;
  width:2900%;
  height:100%;
  transform:translateX(calc(var(--frame) * -100% / 29));
}
.wordmark {
  display:block;
  width:48vw;
  max-width:960px;
  height:auto;
  margin-top:clamp(0px,1vw,20px);
}
.designation {
  justify-self:end;
  text-align:right;
  font-size:clamp(13px,1.15vw,22px);
  letter-spacing:.06em;
  line-height:1;
  white-space:nowrap;
}
.connection {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin-top:.9em;
}
.connection span {
  margin-left:.5em;
}
.connection i {
  width:1.15em;
  height:1.15em;
  background:url("/art/signal-live-dot.png") center / contain no-repeat;
  filter:grayscale(1) brightness(.6);
}
.connection.live i {
  filter:none;
  animation:record 2s steps(1,end) infinite;
}
@keyframes record {
  50% { opacity:0; }
}
.display {
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:clamp(24px,4vw,72px) 0 clamp(16px,2vw,40px);
}
h1 {
  font-size:clamp(22px,2.6vw,50px);
  font-weight:normal;
  letter-spacing:.06em;
  margin:0;
}
.count {
  font-size:clamp(64px,7vw,140px);
  line-height:1.15;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.play {
  display:flex;
  align-items:center;
  color:var(--ink);
  text-decoration:none;
  font-size:clamp(28px,3vw,58px);
  letter-spacing:.06em;
  padding:6px 14px;
  margin-bottom:clamp(36px,6vw,110px);
}
.play img {
  margin-right:clamp(14px,1.3vw,26px);
  width:clamp(64px,7vw,134px);
  height:auto;
  filter:drop-shadow(0 0 12px #0d0806);
  transition:transform .2s;
}
.play:hover img {
  transform:scale(1.05);
}
.play:hover > span {
  color:#fff;
}
.play:focus-visible {
  outline:2px solid var(--red);
  outline-offset:6px;
}
footer {
  font-family:"Input Mono Condensed","Courier New",monospace;
  font-weight:300;
  font-size:clamp(11px,1.05vw,20px);
  letter-spacing:.06em;
  color:var(--muted);
  text-align:center;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
}
/* Browsers without clamp()/min()/max() (Chrome < 79, e.g. old Android tablets)
   drop every declaration above that uses them. Approximate the same clamped
   sizes with plain vw values, switching to the clamp limits in a few tiers. */
@supports not (width:clamp(1px,1px,1px)) {
  .monitor {
    padding-top:3.5vw;
    padding-right:2vw;
    padding-bottom:2.5vw;
    padding-left:2vw;
  }
  header {
    grid-gap:2vw;
  }
  .company-name {
    margin-left:1.6vw;
    font-size:0.9vw;
  }
  .urei {
    width:5vw;
    height:5vw;
  }
  .wordmark {
    margin-top:1vw;
  }
  .designation {
    font-size:1.15vw;
  }
  .display {
    padding-top:4vw;
    padding-bottom:2vw;
  }
  h1 {
    font-size:2.6vw;
  }
  .count {
    font-size:7vw;
  }
  .play {
    font-size:3vw;
    margin-bottom:6vw;
  }
  .play img {
    margin-right:1.3vw;
    width:7vw;
  }
  footer {
    font-size:1.05vw;
  }
  @media(max-width:1100px) {
    .company-name {
      font-size:10px;
    }
    .urei {
      width:52px;
      height:52px;
    }
    .designation {
      font-size:13px;
    }
    .play img {
      margin-right:14px;
    }
    footer {
      font-size:11px;
    }
  }
  @media(max-width:900px) {
    h1 {
      font-size:22px;
    }
    .count {
      font-size:64px;
    }
    .play {
      font-size:28px;
    }
    .play img {
      width:64px;
    }
  }
  @media(max-width:800px) {
    .monitor {
      padding-right:16px;
      padding-left:16px;
    }
    header {
      grid-gap:16px;
    }
    .company-name {
      margin-left:12px;
    }
    .display {
      padding-bottom:16px;
    }
  }
  @media(max-width:560px) {
    .monitor {
      padding-top:16px;
      padding-bottom:14px;
    }
    .display {
      padding-top:24px;
    }
    .play {
      margin-bottom:36px;
    }
  }
  @media(min-width:1900px) {
    .monitor {
      padding-top:64px;
      padding-right:40px;
      padding-bottom:40px;
      padding-left:40px;
    }
    header {
      grid-gap:40px;
    }
    .company-name {
      margin-left:30px;
      font-size:17px;
    }
    .urei {
      width:96px;
      height:96px;
    }
    .wordmark {
      margin-top:20px;
    }
    .designation {
      font-size:22px;
    }
    .display {
      padding-top:72px;
      padding-bottom:40px;
    }
    h1 {
      font-size:50px;
    }
    .count {
      font-size:140px;
    }
    .play {
      font-size:58px;
      margin-bottom:110px;
    }
    .play img {
      margin-right:26px;
      width:134px;
    }
    footer {
      font-size:20px;
    }
  }
  @media(max-height:500px) and (orientation:landscape) {
    .monitor {
      padding-top:12px;
      padding-bottom:10px;
    }
    .count {
      font-size:14vh;
    }
  }
}
@media(prefers-reduced-motion:reduce) {
  .backdrop img {
    transition:none;
  }
  .connection.live i {
    animation:none;
  }
}
@media(min-width:821px) and (max-width:1100px) {
  .company-name {
    display:none;
  }
}
@media(max-width:820px) {
  header {
    grid-template-columns:1fr auto;
    row-gap:28px;
  }
  .wordmark {
    grid-row:2;
    grid-column:1 / -1;
    justify-self:center;
    width:88vw;
    max-width:560px;
  }
  .company-name {
    letter-spacing:.2em;
  }
}
@media(max-width:480px) {
  .company-name {
    display:none;
  }
}
/* Phones in landscape: fit everything on one screen. */
@media(max-height:500px) and (orientation:landscape) {
  .monitor {
    padding-top:max(12px,env(safe-area-inset-top));
    padding-bottom:max(10px,env(safe-area-inset-bottom));
  }
  header {
    grid-template-columns:1fr auto 1fr;
  }
  .company-name {
    display:none;
  }
  .urei {
    width:44px;
    height:44px;
  }
  .wordmark {
    width:40vw;
    max-width:92vh;
    margin-top:0;
    grid-row:auto;
    grid-column:auto;
  }
  .display {
    padding:8px 0 4px;
  }
  h1 {
    font-size:20px;
  }
  .count {
    font-size:min(56px,14vh);
  }
  .play {
    font-size:24px;
    margin-bottom:12px;
  }
  .play img {
    width:48px;
  }
  footer {
    font-size:10px;
  }
}