:root {
  --screen-blue: #1200ff;
  --screen-blue-deep: #080071;
  --white: #ffffff;
  --muted: #8e89b9;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: #000;
  color: var(--white);
  font-family: "Silkscreen", monospace;
  overflow: hidden;
}

button, a { font: inherit; }

.void {
  align-items: center;
  background:
    radial-gradient(ellipse at center, rgba(18, 0, 255, .18) 0, rgba(18, 0, 255, .055) 35%, transparent 67%),
    #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: clamp(1rem, 5vw, 4rem);
}

.screen-shell {
  --crt-shape: shape(
    from 2% 2%,
    curve to 98% 2% with 32% 0 / 68% 0,
    curve to 98% 98% with 100% 32% / 100% 68%,
    curve to 2% 98% with 68% 100% / 32% 100%,
    curve to 2% 2% with 0 68% / 0 32%,
    close
  );
  filter: drop-shadow(0 0 22px rgba(18, 0, 255, .52));
  position: relative;
  transition: filter 1.1s ease;
  width: min(880px, 100%);
}

.screen-shell:has(.screen.final-screen) {
  filter: drop-shadow(0 0 27px rgba(18, 0, 255, .48));
}

.screen-shell:has(.screen:focus-visible) {
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, .9))
    drop-shadow(0 0 8px rgba(78, 91, 255, .64))
    drop-shadow(0 0 27px rgba(18, 0, 255, .48));
}

.screen {
  align-items: center;
  background:
    radial-gradient(ellipse 112% 108% at 50% 48%, rgba(86, 101, 255, .16), transparent 54%),
    var(--screen-blue);
  clip-path: var(--crt-shape);
  box-shadow:
    inset 0 0 58px rgba(0, 0, 48, .26),
    inset 0 0 9px rgba(207, 225, 255, .1);
  cursor: pointer;
  display: flex;
  justify-content: center;
  min-height: clamp(340px, 55vw, 520px);
  outline: none;
  overflow: hidden;
  padding: clamp(2.25rem, 7vw, 6rem) clamp(1.5rem, 7vw, 7rem);
  position: relative;
  text-align: center;
  transition: background-color 1.1s ease, box-shadow 1.1s ease, transform .35s ease;
  width: 100%;
}

.screen::before,
.screen::after {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.screen::before {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    rgba(0, 0, 28, .075) 3px,
    rgba(0, 0, 28, .075) 4px
  );
  opacity: .68;
  z-index: 2;
}

.screen::after {
  background:
    linear-gradient(105deg, rgba(255, 255, 255, .05), transparent 23%, transparent 77%, rgba(0, 0, 30, .06)),
    radial-gradient(
      ellipse 108% 104% at 50% 50%,
      rgba(214, 224, 255, .055) 0,
      transparent 48%,
      rgba(0, 0, 38, .09) 68%,
      rgba(0, 0, 48, .14) 84%,
      rgba(0, 0, 30, .24) 100%
    );
  z-index: 3;
}

.screen > * {
  position: relative;
  z-index: 1;
}

.screen > .screen-edge-light {
  height: 100%;
  inset: 0;
  mix-blend-mode: screen;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 4;
}

.screen-edge-light path {
  fill: none;
  stroke-linejoin: miter;
}

.screen-edge-light__soft {
  filter: blur(6px);
  opacity: .5;
  stroke: #7993ff;
  stroke-width: 18px;
}

.screen-edge-light__core {
  filter: blur(1.5px);
  opacity: .3;
  stroke: #d5deff;
  stroke-width: 4px;
}

.screen:hover { transform: scale(1.003); }

.screen:focus-visible {
  outline: none;
}

.message {
  animation: message-in .85s ease both;
  max-width: 700px;
  width: 100%;
}

.message.is-leaving { animation: message-out .36s ease both; }

.message p {
  animation: breathe 4.2s ease-in-out infinite;
  font-size: clamp(1.25rem, 3.15vw, 2.55rem);
  font-weight: 400;
  letter-spacing: .035em;
  line-height: 1.38;
  margin: 0;
  text-shadow:
    0 0 3px rgba(255,255,255,.98),
    0 0 10px rgba(255,255,255,.78),
    0 0 22px rgba(255,255,255,.38);
}

.message .hello { margin-bottom: .62em; }
.message .gap { display: block; height: .62em; }
.message .wide { font-weight: 700; letter-spacing: .34em; padding-left: .34em; }
.message .small { font-size: clamp(.88rem, 2vw, 1.3rem); line-height: 1.65; }

.chromatic {
  animation: spectral-bloom 7.5s ease-in-out infinite;
  display: inline-block;
  font-size: clamp(2.75rem, 7vw, 4.15rem);
  isolation: isolate;
  line-height: 1.1;
  max-width: 100%;
  position: relative;
  text-shadow:
    -2.5px 0 9px rgba(255, 62, 190, .58),
    2.5px 0 9px rgba(44, 237, 255, .58),
    0 0 12px rgba(255, 255, 255, .85);
  z-index: 0;
}

.chromatic::before,
.chromatic::after {
  content: attr(data-text);
  filter: blur(3.5px);
  inset: 0;
  mix-blend-mode: screen;
  opacity: .24;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.chromatic::before {
  animation: fringe-left 7.5s ease-in-out infinite;
  color: #ff45c8;
  text-shadow: -2px 0 8px rgba(255, 69, 91, .8), 1px 0 10px rgba(255, 225, 50, .65);
}

.chromatic::after {
  animation: fringe-right 7.5s ease-in-out infinite;
  color: #34eaff;
  text-shadow: 2px 0 8px rgba(75, 255, 116, .75), -1px 0 10px rgba(127, 83, 255, .7);
}

.continue {
  animation: arrow-bob 1.45s ease-in-out infinite;
  bottom: clamp(1.5rem, 4vw, 2.5rem);
  filter: drop-shadow(0 0 7px #fff);
  font-size: clamp(.7rem, 1.5vw, 1rem);
  left: 50%;
  opacity: .95;
  position: absolute;
  transform: translateX(-50%);
}

.counter {
  bottom: 1rem;
  color: rgba(255,255,255,.32);
  font-size: .55rem;
  letter-spacing: .08em;
  position: absolute;
  right: 1.25rem;
}

.hint {
  color: var(--muted);
  font-size: clamp(.48rem, 1.3vw, .62rem);
  letter-spacing: .05em;
  margin: 1rem 0 0;
  opacity: .55;
  transition: opacity .6s ease;
}

.hint.is-hidden { opacity: 0; }

.secret-heart {
  background: none;
  border: 0;
  bottom: 1rem;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: .72rem;
  left: 1rem;
  opacity: .035;
  padding: .65rem;
  position: fixed;
  text-shadow: 0 0 8px rgba(255,255,255,.75);
  transition: opacity .6s ease, text-shadow .6s ease;
}

.secret-heart:hover,
.secret-heart:focus-visible {
  opacity: .7;
  outline: none;
  text-shadow: 0 0 4px #fff, 0 0 13px rgba(255,255,255,.9);
}

.screen.final-screen {
  background:
    radial-gradient(ellipse 112% 108% at 50% 48%, rgba(86, 101, 255, .13), transparent 54%),
    #0d00ce;
  box-shadow:
    inset 0 0 58px rgba(0, 0, 48, .26),
    inset 0 0 9px rgba(207, 225, 255, .1);
}

.final-screen .message p { animation-duration: 5.5s; }

.links {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1.25rem;
  justify-content: center;
  margin-top: 2.1rem;
}

.links a {
  color: rgba(255,255,255,.78);
  font-size: clamp(.58rem, 1.4vw, .72rem);
  padding: .35rem .1rem;
  text-decoration: none;
  text-shadow: 0 0 8px rgba(255,255,255,.42);
}

.links a:hover,
.links a:focus-visible {
  color: #fff;
  outline: none;
  text-shadow: 0 0 4px #fff, 0 0 13px #fff;
}

@keyframes message-in {
  from { filter: blur(6px); opacity: 0; transform: translateY(7px); }
  to { filter: blur(0); opacity: 1; transform: translateY(0); }
}

@keyframes message-out {
  to { filter: blur(5px); opacity: 0; transform: translateY(-5px); }
}

@keyframes breathe {
  0%, 100% { opacity: .92; text-shadow: 0 0 3px #fff, 0 0 9px rgba(255,255,255,.66), 0 0 19px rgba(255,255,255,.3); }
  50% { opacity: 1; text-shadow: 0 0 4px #fff, 0 0 13px rgba(255,255,255,.9), 0 0 27px rgba(255,255,255,.52); }
}

@keyframes arrow-bob {
  0%, 100% { opacity: .55; transform: translate(-50%, 0); }
  50% { opacity: 1; transform: translate(-50%, 5px); }
}

@keyframes spectral-bloom {
  0%, 42%, 100% {
    text-shadow: -2.5px 0 9px rgba(255, 62, 190, .54), 2.5px 0 9px rgba(44, 237, 255, .54), 0 0 12px rgba(255,255,255,.82);
  }
  62% {
    text-shadow: -5px 0 14px rgba(255, 62, 190, .84), 5px 0 14px rgba(44, 237, 255, .84), 0 -2px 14px rgba(255, 230, 75, .56), 0 0 18px #fff;
  }
}

@keyframes fringe-left {
  0%, 38%, 100% { filter: blur(3.5px); opacity: .25; transform: translate(-1.8px, 0); }
  61% { filter: blur(5px); opacity: .66; transform: translate(-5px, .5px); }
  72% { filter: blur(4px); opacity: .36; transform: translate(-2.5px, -.2px); }
}

@keyframes fringe-right {
  0%, 38%, 100% { filter: blur(3.5px); opacity: .25; transform: translate(1.8px, 0); }
  61% { filter: blur(5px); opacity: .66; transform: translate(5px, -.5px); }
  72% { filter: blur(4px); opacity: .36; transform: translate(2.5px, .2px); }
}

@media (max-width: 600px) {
  .void { padding: 1rem; }
  .screen { min-height: min(70svh, 470px); padding: 2.75rem 1rem 3.5rem; }
  .message p { line-height: 1.48; }
  .final-screen .message p { font-size: clamp(.82rem, 4vw, 1.1rem); line-height: 1.35; }
  .chromatic { font-size: clamp(2.15rem, 11vw, 2.75rem); line-height: 1.08; }
  .final-screen .message .small { font-size: clamp(.62rem, 3.2vw, .82rem); line-height: 1.55; }
  .links { flex-wrap: nowrap; gap: .45rem .65rem; margin-top: 1.35rem; }
  .links a { font-size: clamp(.46rem, 2.45vw, .6rem); }
  .counter { right: .8rem; }
  .secret-heart { bottom: .35rem; left: .35rem; }
}

@media (max-width: 380px) {
  .void { padding: .65rem; }
  .screen { padding: 2.25rem .85rem 2.8rem; }
  .final-screen .message p { font-size: clamp(.76rem, 3.9vw, .92rem); line-height: 1.3; }
  .chromatic { font-size: clamp(2rem, 10.7vw, 2.4rem); line-height: 1.04; }
  .links { gap: .35rem .5rem; margin-top: 1rem; }
  .links a { font-size: clamp(.43rem, 2.3vw, .52rem); }
}

@media (max-width: 600px) and (max-height: 560px) {
  .screen { min-height: calc(100svh - 2rem); padding-block: 1.8rem 2.25rem; }
  .final-screen .message p { line-height: 1.22; }
  .chromatic { line-height: 1; }
  .message .gap { height: .45em; }
  .links { margin-top: .8rem; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .void { padding: 1.5rem clamp(1rem, 4vw, 2rem); }
  .screen { min-height: calc(100svh - 3rem); padding: 1.25rem clamp(2rem, 7vw, 4rem) 1.5rem; }
  .message p { line-height: 1.25; }
  .final-screen .message p { font-size: clamp(.76rem, 2.25vw, 1rem); line-height: 1.18; }
  .chromatic { font-size: clamp(2.35rem, 7vw, 3rem); line-height: 1; }
  .final-screen .message .small { font-size: clamp(.58rem, 1.8vw, .8rem); line-height: 1.35; }
  .message .gap { height: .35em; }
  .links { gap: .35rem .75rem; margin-top: .65rem; }
  .links a { font-size: clamp(.44rem, 1.5vw, .58rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}