:root {
  color-scheme: dark;
  --ink: #f5f5f7;
  --dim: rgba(255, 255, 255, .56);
  --hair: rgba(255, 255, 255, .16);
  --glass: rgba(255, 255, 255, .055);
  --font: ui-sans-serif, "Segoe UI Variable Display", "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  background: #000;
  color: var(--ink);
  font: 400 16px/1.4 var(--font);
  overflow: hidden;
  user-select: none;
}

/* Background: near-black falloff with two light bands crossing it. */
.bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(110% 80% at 50% -8%, #202024 0%, #0b0b0e 46%, #000 100%);
}

.shine {
  position: absolute;
  top: -50%;
  left: -70vw;
  height: 200%;
  mix-blend-mode: screen;
  will-change: transform, opacity;
  animation: sweep 9s cubic-bezier(.45, .05, .35, 1) infinite;
}

.shine.wide {
  width: 60vw;
  filter: blur(28px);
  background: linear-gradient(90deg,
    transparent 0,
    rgba(255, 255, 255, .02) 22%,
    rgba(255, 255, 255, .15) 47%,
    rgba(255, 255, 255, .24) 50%,
    rgba(255, 255, 255, .15) 53%,
    rgba(255, 255, 255, .02) 78%,
    transparent 100%);
}

.shine.thin {
  width: 16vw;
  filter: blur(7px);
  opacity: .6;
  animation-delay: .5s;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, .28) 50%,
    transparent);
}

@keyframes sweep {
  0%        { transform: translate3d(0, 0, 0) rotate(18deg); opacity: 0; }
  9%        { opacity: 1; }
  60%       { opacity: 1; }
  72%, 100% { transform: translate3d(215vw, 0, 0) rotate(18deg); opacity: 0; }
}

/* Grain removes the banding a dark gradient would otherwise show. */
.grain {
  position: absolute;
  inset: 0;
  opacity: .07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.flash {
  position: absolute;
  top: -50%;
  left: -90vw;
  width: 80vw;
  height: 200%;
  opacity: 0;
  filter: blur(30px);
  background: linear-gradient(90deg, transparent, #fff 50%, transparent);
  transform: rotate(18deg);
}

.flash.go { animation: flash .62s cubic-bezier(.6, 0, .3, 1) forwards; }

@keyframes flash {
  0%   { transform: translate3d(0, 0, 0) rotate(18deg); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate3d(280vw, 0, 0) rotate(18deg); opacity: 1; }
}

/* Gate */
.gate {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vh, 34px);
  padding: 24px 16px;
  animation: rise .8s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.gate.ok { animation: leave .5s ease forwards; }

@keyframes leave {
  to { opacity: 0; transform: scale(.97); }
}

.eyebrow {
  margin: 0;
  color: var(--dim);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.dots { display: flex; gap: 20px; }
.dots.bad { animation: shake .42s cubic-bezier(.36, .07, .19, .97); }

.dots i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .42);
  transition: background .14s, box-shadow .14s, border-color .14s, transform .14s;
}

.dots i.on {
  background: #fff;
  border-color: #fff;
  transform: scale(1.08);
  box-shadow: 0 0 16px rgba(255, 255, 255, .55);
}

.dots.bad i.on {
  background: #ff5c5c;
  border-color: #ff5c5c;
  box-shadow: 0 0 16px rgba(255, 92, 92, .6);
}

@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(5px); }
  30%, 50%, 70% { transform: translateX(-9px); }
  40%, 60% { transform: translateX(9px); }
}

.pad {
  --key: clamp(62px, min(19vw, 11.5vh), 80px);
  display: grid;
  grid-template-columns: repeat(3, var(--key));
  gap: clamp(10px, 2vh, 18px) clamp(16px, 5vw, 24px);
}

.pad button {
  width: var(--key);
  height: var(--key);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hair);
  background: var(--glass);
  color: var(--ink);
  font: 300 calc(var(--key) * .38) / 1 var(--font);
  cursor: pointer;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: background .22s, border-color .22s, transform .12s;
}

.pad button:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); }
.pad button:active, .pad button.hit { background: rgba(255, 255, 255, .34); transform: scale(.95); transition-duration: 0s; }
.pad button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.pad .ghost { background: none; border-color: transparent; color: var(--dim); -webkit-backdrop-filter: none; backdrop-filter: none; }
.pad .ghost:hover { background: none; border-color: transparent; color: var(--ink); }

/* Shown only when the browser blocks the automatic about:blank pop-up. */
.resume {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  text-align: center;
}

.resume button {
  padding: 14px 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08);
  color: var(--ink);
  font: 500 16px var(--font);
  cursor: pointer;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: background .2s;
}

.resume button:hover { background: rgba(255, 255, 255, .18); }
.resume button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.resume p { margin: 0; color: var(--dim); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .shine { animation: none; left: 20vw; opacity: .5; transform: rotate(18deg); }
  .gate { animation: none; }
  .flash.go { animation: none; }
  .dots.bad { animation: none; }
}