:root {
  --ink: #15113a;
  --paper: #fffbd1;
  --purple: #7627d1;
  --teal: #00c9b7;
  --pink: #ff48a2;
  --yellow: #ffe84a;
}

* {
  box-sizing: border-box;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: "Courier New", Courier, monospace;
  background-color: var(--teal);
  background-image:
    linear-gradient(45deg, rgba(21, 17, 58, 0.2) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(21, 17, 58, 0.2) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(21, 17, 58, 0.2) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(21, 17, 58, 0.2) 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.site {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
}

.window {
  width: min(760px, 100%);
  border: 5px solid var(--ink);
  box-shadow: 12px 12px 0 var(--purple);
  background: var(--paper);
}

.title-bar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 12px;
  overflow: hidden;
  color: #fff;
  font-size: clamp(0.7rem, 2.6vw, 0.95rem);
  font-weight: bold;
  letter-spacing: 0.07em;
  white-space: nowrap;
  background: var(--purple);
}

.screen {
  padding: clamp(32px, 8vw, 68px) clamp(24px, 8vw, 70px);
  text-align: center;
}

.kicker,
.status {
  display: inline-block;
  margin: 0;
  padding: 5px 8px;
  border: 2px solid var(--ink);
  font-size: clamp(0.65rem, 2.2vw, 0.85rem);
  font-weight: bold;
  letter-spacing: 0.08em;
  background: var(--yellow);
}

h1 {
  margin: 22px 0 18px;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(3rem, 13vw, 7.7rem);
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  text-shadow: 4px 4px 0 var(--pink);
}

.cursor {
  display: inline-block;
  margin-left: 4px;
  color: var(--purple);
  animation: blink 0.9s steps(1, end) infinite;
}

.tagline {
  max-width: 36rem;
  margin: 0 auto 30px;
  font-size: clamp(1rem, 3vw, 1.3rem);
  font-weight: bold;
  line-height: 1.5;
}

.status {
  color: #fff;
  background: var(--ink);
}

.status strong {
  color: var(--teal);
}

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

@media (max-width: 480px) {
  .site { padding: 14px; }
  .window { border-width: 4px; box-shadow: 7px 7px 0 var(--purple); }
  .screen { padding: 36px 20px; }
}