@font-face {
  font-family: "VT323";
  src: url("/fonts/vt323-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Orbitron";
  src: url("/fonts/orbitron-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --bg: #0d0221;
  --bg-alt: #150734;
  --panel: #1c0b45;
  --line: #3b1d7a;
  --text: #f6edff;
  --muted: #c3b3e6;
  --pink: #ff2e97;
  --cyan: #2de2e6;
  --purple: #b967ff;
  --yellow: #ffd319;
  --orange: #ff901f;
  --font-display: "Orbitron", "Trebuchet MS", sans-serif;
  --font-mono: "VT323", "Courier New", monospace;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --nav-h: 60px;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: var(--cyan);
}

:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

::selection {
  background: var(--cyan);
  color: #06141f;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--yellow);
  color: #000;
  font-weight: 700;
}

.skip-link:focus {
  top: 12px;
}

/* Nav */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  padding: 0 clamp(16px, 4vw, 40px);
  background: var(--bg);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--text);
  text-decoration: none;
  text-shadow: 2px 2px 0 var(--pink), -1px -1px 0 var(--cyan);
}

.wordmark span {
  color: var(--cyan);
  text-shadow: none;
  font-weight: 500;
}

/* Buttons */

.btn {
  --cut: 12px;
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: 14px 28px;
  border: 0;
  background: none;
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  filter: drop-shadow(0 0 10px rgba(255, 46, 151, 0.55));
  transition: filter 0.15s, transform 0.15s;
}

/* The cut corners are on the pseudo-element, so that clip-path does not hide the focus outline of the button. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

.btn[hidden] {
  display: none;
}

/* After a signup, a button that asked the visitor to join shows the state and is quiet. */
.btn.is-done {
  color: var(--cyan);
  filter: none;
}

.btn.is-done::before {
  background: none;
  box-shadow: inset 0 0 0 2px var(--cyan);
}

.btn:hover {
  filter: drop-shadow(0 0 18px rgba(255, 46, 151, 0.9));
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: progress;
}

.btn-small {
  --cut: 8px;
  padding: 13px 16px;
  font-size: 0.72rem;
}

@media (max-width: 359px) {
  .wordmark {
    font-size: 1.1rem;
  }

  .btn-small {
    padding: 13px 12px;
    letter-spacing: 0.05em;
  }
}

.btn-hero {
  font-size: 1.05rem;
  padding: 16px 34px;
}

.btn-block {
  width: 100%;
  text-align: center;
  white-space: normal;
}

/* Hero */

.hero {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: linear-gradient(#0d0221 0%, #1b0640 30%, #4a0f6b 50%, #b3246f 62%, #0d0221 62%);
}

.hero-sky {
  position: absolute;
  inset: 0;
}

.stars {
  position: absolute;
  inset: 0 0 45% 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 61%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 12%, var(--cyan) 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 40%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 69% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 83% 52%, var(--pink) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 92% 28%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 70%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 76% 74%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 34%, #fff 50%, transparent 51%);
  opacity: 0.8;
}

.sun {
  position: absolute;
  left: 50%;
  bottom: 38%;
  width: min(62vw, 40vh, 420px);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  border-radius: 999px 999px 0 0;
  background: linear-gradient(var(--yellow) 0%, var(--orange) 35%, var(--pink) 80%);
  -webkit-mask-image: linear-gradient(#000 0 40%, transparent 40% 43%, #000 43% 58%, transparent 58% 63%, #000 63% 74%, transparent 74% 81%, #000 81% 89%, transparent 89% 97%, #000 97%);
  mask-image: linear-gradient(#000 0 40%, transparent 40% 43%, #000 43% 58%, transparent 58% 63%, #000 63% 74%, transparent 74% 81%, #000 81% 89%, transparent 89% 97%, #000 97%);
  filter: drop-shadow(0 0 40px rgba(255, 46, 151, 0.7));
  opacity: 0.95;
}

.grid {
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: 0;
  height: 38%;
  background-color: #0d0221;
  background-image:
    linear-gradient(rgba(45, 226, 230, 0.75) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 46, 151, 0.75) 2px, transparent 2px);
  background-size: 60px 60px;
  transform: perspective(300px) rotateX(58deg);
  transform-origin: 50% 0;
  animation: grid-move 1.6s linear infinite;
  box-shadow: 0 -2px 30px 4px rgba(255, 46, 151, 0.8);
  -webkit-mask-image: linear-gradient(transparent 0, #000 22%);
  mask-image: linear-gradient(transparent 0, #000 22%);
}

@keyframes grid-move {
  to {
    background-position: 0 60px, 0 0;
  }
}

.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.22) 2px 4px);
  mix-blend-mode: multiply;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--nav-h) + 6vh) 16px 7vh;
  text-align: center;
}

.hero-title {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(3.4rem, 15vw, 9.5rem);
  line-height: 0.86;
  text-transform: lowercase;
}

/* On a short, wide screen, the title must not go over the sun. */
@media (max-height: 960px) and (orientation: landscape) {
  .hero-title {
    font-size: clamp(3.4rem, 15.5vh, 9.5rem);
  }
}

@media (max-height: 800px) and (orientation: landscape) {
  .hero-title {
    font-size: clamp(3.4rem, 15vh, 9.5rem);
  }
}

.hero-prefix {
  display: block;
  color: var(--text);
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.5),
    0 0 22px var(--cyan),
    3px 3px 0 rgba(45, 226, 230, 0.55);
}

.hero-typed {
  display: block;
  min-height: 0.86em;
  white-space: nowrap;
}

.typed {
  color: var(--pink);
  text-shadow:
    0 0 8px rgba(255, 46, 151, 0.9),
    0 0 30px rgba(255, 46, 151, 0.7),
    3px 3px 0 #5a0f8c;
}

.typed.is-final {
  color: #ff6ec7;
  background: linear-gradient(90deg, #ff5e7e, #ffb347, #fff275, #5ef2a0, #4fd8ff, #c58bff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 12px rgba(255, 110, 199, 0.75)) drop-shadow(3px 3px 0 #2a0a55);
}

.js-typing .typed {
  visibility: hidden;
}

.cursor {
  color: var(--cyan);
  text-shadow: 0 0 14px var(--cyan);
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* The last word switches on like a neon sign: one flare, one dip, then the steady glow. */
.typed.is-landed {
  animation: neon-on 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes neon-on {
  0% {
    filter: brightness(1.7) drop-shadow(0 0 34px rgba(255, 110, 199, 1)) drop-shadow(3px 3px 0 #2a0a55);
  }

  35% {
    filter: brightness(0.85) drop-shadow(0 0 6px rgba(255, 110, 199, 0.5)) drop-shadow(3px 3px 0 #2a0a55);
  }
}

.hero.is-offscreen .grid,
.hero.is-offscreen .cursor {
  animation-play-state: paused;
}

.hero-sub {
  max-width: 34ch;
  margin-top: auto;
  padding: 6px 14px;
  background: rgba(13, 2, 33, 0.82);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.9rem, 2.6vw, 1.1rem);
  letter-spacing: 0.04em;
  text-wrap: balance;
}

.hero .btn-hero {
  margin-top: 2.4vh;
}

/* A phone held sideways is too short for the stack. The title goes on one line above the sun,
   and the subtitle and the button go side by side on the grid. */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-content {
    display: grid;
    grid-template-columns: 1fr minmax(0, auto) auto 1fr;
    grid-template-rows: auto 1fr auto;
    align-items: center;
    column-gap: 20px;
    padding: calc(var(--nav-h) + 2vh) 24px 5vh;
  }

  .hero-title {
    grid-column: 1 / -1;
    font-size: clamp(2.4rem, 16vh, 5rem);
    white-space: nowrap;
  }

  .hero-prefix {
    display: inline;
  }

  /* The slot has the width of the longest word and the cursor, so that the line does not move while the words change. */
  .hero-typed {
    display: inline-block;
    min-width: 10ch;
    text-align: left;
  }

  .hero-sub {
    grid-row: 3;
    grid-column: 2;
    max-width: 40ch;
    margin: 0;
    text-align: left;
  }

  .hero .btn-hero {
    grid-row: 3;
    grid-column: 3;
    margin: 0;
    padding: 14px 24px;
    font-size: 0.95rem;
  }
}

/* On the smallest phones held sideways, the button is smaller, so that the subtitle has more width. */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 700px) {
  .hero-content {
    column-gap: 14px;
    padding-inline: 16px;
  }

  .hero-sub {
    padding: 4px 10px;
  }

  .hero .btn-hero {
    padding: 13px 16px;
    font-size: 0.85rem;
  }
}

/* Sections */

.section {
  padding: clamp(64px, 10vw, 120px) 0;
  border-top: 1px solid var(--line);
}

.section-alt {
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(185, 103, 255, 0.16), transparent),
    radial-gradient(50% 40% at 0% 100%, rgba(45, 226, 230, 0.1), transparent),
    var(--bg-alt);
}

.wrap {
  width: min(1100px, 100% - 2 * clamp(16px, 4vw, 40px));
  margin-inline: auto;
}

.narrow {
  max-width: 760px;
}

.center {
  text-align: center;
}

.section .kicker {
  margin-bottom: 10px;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
}

h2 {
  margin-bottom: 24px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.7rem, 4.6vw, 2.9rem);
  line-height: 1.15;
  text-wrap: balance;
  text-shadow: 3px 3px 0 rgba(255, 46, 151, 0.55);
}

h3 {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: 0.02em;
}

.section p + p {
  margin-top: 16px;
}

.section p {
  color: var(--muted);
}

.split {
  display: grid;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}

.split > * {
  min-width: 0;
}

@media (min-width: 860px) {
  .split {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .split-top {
    align-items: start;
  }
}

/* Waitlist panel */

.waitlist {
  border-top: 0;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(255, 46, 151, 0.18), transparent),
    var(--bg);
}

.panel {
  border: 2px solid var(--cyan);
  background: var(--panel);
  box-shadow: 8px 8px 0 var(--pink), 0 0 40px rgba(45, 226, 230, 0.25);
}

.panel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px;
  background: var(--cyan);
  color: #06141f;
  font-family: var(--font-mono);
  font-size: 1.25rem;
}

.panel-dots {
  display: flex;
  gap: 6px;
}

.panel-dots i {
  width: 11px;
  height: 11px;
  border: 2px solid #06141f;
}

.form,
.done {
  padding: clamp(20px, 4vw, 32px);
}

.done {
  overflow-wrap: anywhere;
}

.done strong {
  color: var(--text);
}

.form h3 {
  margin-bottom: 8px;
  font-size: 1.3rem;
}

.form-intro {
  margin-bottom: 18px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 0.95rem;
}

.form input[type="email"] {
  width: 100%;
  padding: 13px 14px;
  border: 2px solid var(--purple);
  background: #0d0221;
  color: var(--text);
  font: inherit;
  caret-color: var(--cyan);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form input[type="email"][aria-invalid="true"] {
  border-color: var(--yellow);
}

.form input[type="email"]::placeholder {
  color: #9584bd;
}

.form input[type="email"]:focus {
  border-color: var(--cyan);
  outline: none;
  box-shadow: 0 0 0 3px rgba(45, 226, 230, 0.35);
}

.form input[type="email"][aria-invalid="true"]:focus {
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(255, 211, 25, 0.35);
}

.form .check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 6px 0 10px;
  font-weight: 400;
  cursor: pointer;
}

.check input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--pink);
}

.check input[aria-invalid="true"] {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

.form .field-error {
  margin-top: 6px;
  color: var(--yellow);
  font-size: 0.9rem;
  line-height: 1.4;
}

.form .field-hint {
  margin-top: 8px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.form .field-hint p:first-child {
  color: var(--text);
}

.text-button {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cyan);
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.form .check + .field-error {
  margin: -4px 0 14px;
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  min-height: 1.5em;
  margin-top: 12px;
  font-size: 0.95rem;
}

.form-status:empty {
  min-height: 0;
  margin-top: 0;
}

.form .form-status.is-error {
  color: var(--yellow);
}

.fineprint {
  margin-top: 8px !important;
  font-size: 0.85rem;
  line-height: 1.5;
}

.done-title {
  margin-bottom: 8px;
  color: var(--cyan) !important;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1;
  text-shadow: 0 0 16px rgba(45, 226, 230, 0.7);
}

.done-title.is-error {
  color: var(--yellow) !important;
  text-shadow: 0 0 16px rgba(255, 211, 25, 0.5);
}

/* The pages that the Worker sends as a reply: a signup without the script, and "not found". */
.reply {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--nav-h) + clamp(32px, 8vw, 80px));
}

.reply .wrap {
  max-width: 520px;
}

.reply .done p + p {
  margin-top: 12px;
}

.done:focus {
  outline: none;
}

/* The title prints on the panel like terminal output, and then the other text comes in. */
.done:not([hidden]) .done-title {
  animation: print-in 0.6s steps(20, end) backwards;
}

.done:not([hidden]) p:not(.done-title),
.done:not([hidden]) > .btn {
  animation: fade-in 0.3s 0.5s backwards;
}

.done > .btn {
  margin-top: 12px;
}

.copy-status {
  min-height: 1.5em;
  margin-top: 10px;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.section .copy-status {
  color: var(--text);
}

@keyframes print-in {
  from {
    clip-path: inset(-20px 100% -20px -20px);
  }

  to {
    clip-path: inset(-20px);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

/* Steps */

.steps {
  display: grid;
  gap: 28px;
}

.steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
}

.step-num {
  color: var(--pink);
  font-family: var(--font-mono);
  font-size: 2.6rem;
  line-height: 0.9;
  text-shadow: 0 0 14px rgba(255, 46, 151, 0.7);
}

/* Example LFG card */

.lfg {
  justify-self: center;
  width: min(100%, 380px);
}

.lfg-card {
  padding: 22px;
  border: 2px solid var(--pink);
  background: linear-gradient(160deg, #2a0f5e, #140635);
  box-shadow: -8px 8px 0 var(--cyan), 0 0 40px rgba(255, 46, 151, 0.25);
}

.lfg-head {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 1.35rem;
  color: var(--text);
}

.lfg-open {
  padding: 0 10px;
  background: var(--yellow);
  color: #1a0b00;
  text-transform: uppercase;
}

.lfg-game {
  margin-top: 14px;
  color: var(--text) !important;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
}

.lfg-activity {
  margin-top: 2px !important;
  font-size: 0.95rem;
}

.lfg-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.lfg-tags li,
.proof-tag {
  padding: 3px 12px;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 1.2rem;
  line-height: 1.3;
}

.lfg-slots {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.slot {
  width: 44px;
  height: 44px;
  border: 2px solid var(--text);
}

.slot-a {
  background: linear-gradient(135deg, var(--pink), var(--orange));
}

.slot-b {
  background: linear-gradient(135deg, var(--cyan), var(--purple));
}

.slot-empty {
  border: 2px dashed #8a74c4;
}

.slot-you {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--yellow), var(--orange));
  color: #1a0b00;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  line-height: 1;
  animation: slot-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.slot-you::after {
  content: "you";
}

@keyframes slot-in {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
}

.lfg figcaption {
  margin-top: 22px;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

/* Safety promises */

.section .lead {
  max-width: 60ch;
  color: var(--text);
  font-size: 1.15rem;
}

.cards {
  display: grid;
  column-gap: clamp(32px, 6vw, 72px);
  margin-top: 40px;
}

@media (min-width: 700px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}

/* Each promise shows its example first, then the heading, then the text. */
.card {
  display: grid;
  grid-template-rows: auto auto 1fr;
}

.card .proof {
  grid-row: 1;
}

/* The space between the parts is padding, not margin, because margins change the row sizes in a subgrid. */
.card h3 {
  grid-row: 2;
  margin: 0;
  padding: 20px 0 8px;
}

.card p {
  grid-row: 3;
  max-width: 48ch;
  padding-bottom: 48px;
}

/* With subgrid, the examples in one row of the grid have the same height. */
@supports (grid-template-rows: subgrid) {
  .card {
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
}

.proof {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  min-height: 170px;
  padding: 48px 18px 20px;
  border: 2px solid var(--line);
  background: var(--bg);
}

.proof-tab {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 12px;
  background: var(--line);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 1.2rem;
  line-height: 1.5;
}

.proof-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 12px;
}

.proof-when {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.85rem;
}

.proof-user {
  color: var(--text);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.proof-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.proof-tag.is-off {
  border: 1px dashed #8a74c4;
  color: var(--muted);
}

.proof-tag.is-struck {
  text-decoration: line-through;
}

.notif {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.notif img {
  flex: none;
}

.notif > div {
  flex: 1;
  min-width: 0;
}

.notif-app {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.8rem;
}

.notif-text {
  display: block;
  color: var(--text);
  font-weight: 600;
}

.clock {
  width: 100%;
  border-collapse: collapse;
}

.clock caption {
  caption-side: bottom;
  padding-top: 12px;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: left;
}

.clock td {
  padding: 4px 16px 4px 0;
  color: var(--pink);
  font-family: var(--font-mono);
  font-size: 1.7rem;
  line-height: 1.1;
  white-space: nowrap;
  text-shadow: 0 0 14px rgba(255, 46, 151, 0.7);
  vertical-align: top;
}

.clock th {
  padding: 8px 0;
  color: var(--text);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.4;
  text-align: left;
}

.clock tr + tr {
  border-top: 1px solid var(--line);
}

.section .proof-caption {
  font-size: 0.85rem;
}

/* FAQ */

details {
  border-bottom: 1px solid var(--line);
}

summary {
  position: relative;
  padding: 18px 40px 18px 0;
  font-family: var(--font-display);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pink);
  font-family: var(--font-mono);
  font-size: 2rem;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

details::details-content {
  opacity: 0;
  transition: opacity 0.25s, content-visibility 0.25s allow-discrete;
}

details[open]::details-content {
  opacity: 1;
}

details p {
  padding-bottom: 20px;
}

/* Outro and footer */

.outro {
  background:
    radial-gradient(60% 80% at 50% 100%, rgba(255, 46, 151, 0.28), transparent),
    var(--bg);
}

.outro-title {
  margin-bottom: 32px;
}

.footer {
  padding: 32px 0 40px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

@media (forced-colors: active) {
  .btn {
    border: 2px solid ButtonText;
  }

  .btn::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .grid,
  .cursor {
    animation: none;
  }

  .btn,
  summary::after {
    transition: none;
  }

  .done:not([hidden]) .done-title {
    animation: fade-in 0.2s backwards;
  }

  .done:not([hidden]) p:not(.done-title),
  .done:not([hidden]) > .btn {
    animation-delay: 0s;
  }

  .slot-you {
    animation: none;
  }
}