:root {
  color-scheme: light;
  --ink: #15204a;
  --blue: #3958ff;
  --cyan: #00c7f2;
  --pink: #ff4fc8;
  --acid: #d8ff38;
  --paper: #f7f5ff;
  --line: #6574ba;
  --shadow: #4053b5;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 79, 200, .24), transparent 24rem),
    radial-gradient(circle at 84% 14%, rgba(0, 199, 242, .25), transparent 27rem),
    linear-gradient(rgba(73, 93, 180, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(73, 93, 180, .12) 1px, transparent 1px),
    #e6e8ff;
  background-size: auto, auto, 24px 24px, 24px 24px, auto;
  font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, .18) 3px 4px);
}

a { color: inherit; }

.skip-link {
  position: fixed;
  z-index: 20;
  left: 1rem;
  top: -5rem;
  padding: .6rem 1rem;
  background: #fff;
  border: 2px solid var(--ink);
}

.skip-link:focus { top: 1rem; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 52px;
  padding: .55rem clamp(1rem, 4vw, 3rem);
  color: #fff;
  border-bottom: 3px ridge #fff;
  background: linear-gradient(90deg, #151a51, #4b42af 48%, #05769c);
  box-shadow: 0 3px 0 rgba(23, 31, 85, .28);
  font: 700 .73rem/1 "Courier New", monospace;
  letter-spacing: .08em;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #162055;
  border: 2px outset #fff;
  background: linear-gradient(135deg, var(--acid), #5bf4ff 52%, #ff81da);
  box-shadow: 2px 2px 0 #11183f;
  font: 900 .9rem/1 Arial, sans-serif;
  transform: rotate(-3deg);
}

.online { display: flex; align-items: center; gap: .5rem; margin: 0; }
.online span { width: 8px; height: 8px; background: var(--acid); border-radius: 50%; box-shadow: 0 0 9px var(--acid); }

.ticker {
  overflow: hidden;
  color: #101843;
  border-block: 1px solid #111943;
  background: var(--acid);
  font: 800 .7rem/1 "Courier New", monospace;
  letter-spacing: .09em;
  white-space: nowrap;
}

.ticker-track {
  display: flex;
  width: max-content;
  gap: 1.5rem;
  padding: .42rem 0;
  animation: ticker 24s linear infinite;
}

.ticker b { color: var(--pink); }

main {
  width: min(920px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(3.5rem, 10vw, 7rem) 0 2.5rem;
}

.hero { position: relative; text-align: center; }

.hero::before,
.hero::after {
  content: "✦";
  position: absolute;
  color: var(--pink);
  font-size: clamp(1.5rem, 4vw, 3rem);
  filter: drop-shadow(2px 2px 0 #fff);
  animation: twinkle 1.8s steps(2, end) infinite;
}

.hero::before { left: 4%; top: 22%; }
.hero::after { right: 5%; top: 2%; animation-delay: -.9s; }

.kicker {
  margin: 0 0 .3rem;
  color: #354175;
  font: 700 clamp(.62rem, 1.6vw, .78rem)/1.3 "Courier New", monospace;
  letter-spacing: .18em;
}

.kicker span { color: var(--pink); }

.chrome-title {
  width: fit-content;
  margin: 0 auto;
  color: transparent;
  background: linear-gradient(180deg, #162162 0 13%, #fff 27%, #77eaff 42%, #3649be 51%, #f9faff 66%, #ff72d6 80%, #541e87 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-stroke: 2px #202662;
  filter: drop-shadow(3px 4px 0 #fff) drop-shadow(6px 7px 0 rgba(62, 68, 158, .35));
  font: 900 clamp(3.8rem, 13vw, 8.6rem)/.82 Arial Black, Impact, sans-serif;
  letter-spacing: -.09em;
  transform: skew(-5deg);
}

.chrome-title span { color: var(--acid); -webkit-text-stroke: 2px #22306d; }

.pixel-subtitle {
  width: fit-content;
  margin: .8rem auto 1.8rem;
  padding: .35rem .75rem;
  color: #fff;
  border: 2px outset #cdd7ff;
  background: #293781;
  box-shadow: 3px 3px 0 var(--pink);
  font: 700 clamp(.72rem, 2vw, .95rem)/1 "Courier New", monospace;
  letter-spacing: .25em;
}

.intro { margin: 0 auto 1.6rem; font-size: clamp(1rem, 2.5vw, 1.25rem); line-height: 1.55; }

.y2k-button {
  display: inline-block;
  padding: 3px;
  color: #fff;
  border: 2px outset #fff;
  background: linear-gradient(90deg, #3949ca, #f04ec3);
  box-shadow: 4px 4px 0 #202961;
  font: 800 .72rem/1 "Courier New", monospace;
  letter-spacing: .08em;
  text-decoration: none;
}

.y2k-button span { display: block; padding: .7rem 1.1rem; border: 1px dotted rgba(255, 255, 255, .7); }
.y2k-button:hover, .y2k-button:focus-visible { color: var(--acid); transform: translate(1px, 1px); box-shadow: 2px 2px 0 #202961; }

.window {
  width: min(660px, 100%);
  margin: clamp(3rem, 8vw, 5rem) auto 0;
  border: 3px outset #eef3ff;
  background: #d8ddf2;
  box-shadow: 8px 9px 0 rgba(32, 41, 97, .35);
}

.window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
  padding: 3px 4px 3px 8px;
  color: #fff;
  background: linear-gradient(90deg, #18246c, #4768d5 64%, #10a5c3);
}

.window-bar h2 { margin: 0; font: 700 .76rem/1 "Courier New", monospace; }
.window-bar h2 span { color: var(--acid); }
.window-controls { display: flex; gap: 3px; }
.window-controls i { display: grid; place-items: center; width: 22px; height: 21px; color: #15204a; border: 2px outset #fff; background: #dbe0ee; font: 700 .72rem/1 Arial; font-style: normal; }

.window-body {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem;
  border: 1px solid #6876ae;
  background: var(--paper);
}

.construction {
  padding: .55rem .4rem;
  color: #111;
  border: 3px double #111;
  background: repeating-linear-gradient(135deg, #ffd927 0 12px, #111 12px 24px);
  box-shadow: inset 0 0 0 5px #ffd927;
  font: 900 .82rem/1.15 Arial Black, sans-serif;
  text-align: center;
  text-shadow: 1px 1px #ffd927, -1px -1px #ffd927, 1px -1px #ffd927, -1px 1px #ffd927;
  transform: rotate(-2deg);
}

.status-copy p { margin: 0 0 .7rem; font-size: .88rem; line-height: 1.45; }
.status-copy .status-label { color: #384cad; font: 800 .68rem/1 "Courier New", monospace; letter-spacing: .08em; }

.progress { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; height: 15px; margin: .9rem 0; padding: 2px; border: 2px inset #fff; background: #c1c7dc; }
.progress span { background: linear-gradient(#68ecff, #4868dc); }
.progress span:nth-last-child(-n+3) { background: transparent; }

.status-copy .blink-text { margin: 0; color: #a12089; font: 700 .68rem/1 "Courier New", monospace; }
.blink-text span { animation: blink 1s steps(1) infinite; }

.web-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-top: 2rem; }
.web-badges span { padding: .28rem .5rem; color: #fff; border: 2px outset #fff; background: #283777; font: 700 .58rem/1 "Courier New", monospace; box-shadow: 2px 2px 0 #5865ac; }
.web-badges span:nth-child(2) { color: #15204a; background: var(--acid); }
.web-badges span:nth-child(3) { background: #b3319e; }
.web-badges span:nth-child(4) { color: #15204a; background: #72eafa; }
.web-badges b { color: var(--acid); }

footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  width: min(920px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1.4rem 0 2rem;
  border-top: 1px dashed #6876ae;
  color: #48558a;
  font: 700 .62rem/1.4 "Courier New", monospace;
  letter-spacing: .05em;
}

footer p { margin: 0; text-align: right; }
footer p span { color: var(--pink); }
.visitor { display: flex; align-items: center; gap: .55rem; }
.visitor-counter { padding: .2rem .4rem; color: #83ff9b; border: 2px inset #d5dcf4; background: #111; font: 700 .78rem/1 "Courier New", monospace; letter-spacing: .15em; }

@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes twinkle { 50% { transform: scale(.65) rotate(20deg); } }

@media (max-width: 640px) {
  .online { display: none; }
  main { padding-top: 4rem; }
  .hero::before { left: 0; top: 38%; }
  .hero::after { right: 0; top: 1%; }
  .chrome-title { font-size: clamp(3.3rem, 20vw, 6rem); -webkit-text-stroke-width: 1px; }
  .window-body { grid-template-columns: 1fr; }
  .construction { width: min(13rem, 90%); margin: 0 auto; }
  footer { align-items: flex-start; flex-direction: column; }
  footer p { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track, .hero::before, .hero::after, .blink-text span { animation: none; }
}