:root{
  color-scheme:dark;
  --bg:#010706;
  --teal:#00e7d3;
}
*{box-sizing:border-box}
html,body{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
  background:var(--bg);
}
body{
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}
.scene{
  position:relative;
  width:100vw;
  height:100dvh;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 50% 50%,rgba(0,88,78,.12),transparent 33%),
    #010706;
}
.orb-wrap{
  position:relative;
  width:min(74vw,74vh,760px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  pointer-events:none;
}
#orb{
  width:100%;
  height:100%;
  display:block;
  filter:drop-shadow(0 0 18px rgba(0,231,211,.12));
}
#clock{
  position:absolute;
  left:50%;
  top:calc(50% + min(37vw,37vh,380px));
  transform:translateX(-50%);
  color:rgba(0,229,211,.96);
  font-size:clamp(22px,2.2vw,34px);
  letter-spacing:.20em;
  line-height:1;
  font-weight:400;
  font-variant-numeric:tabular-nums;
  text-shadow:
    0 0 8px rgba(0,229,211,.55),
    0 0 26px rgba(0,229,211,.20);
}
@media(max-width:720px){
  .scene{
    padding:
      max(16px,env(safe-area-inset-top))
      14px
      max(18px,env(safe-area-inset-bottom));
  }

  .orb-wrap{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:min(92vw,62dvh);
  }

  #clock{
    top:auto;
    bottom:max(26px,calc(env(safe-area-inset-bottom) + 16px));
    font-size:21px;
    letter-spacing:.16em;
    white-space:nowrap;
  }
}