
<!-- CSS is how you can add style to your website, such as colors, fonts, and positioning of your HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." 

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      background:
        radial-gradient(circle at top, rgba(255, 0, 200, 0.22), transparent 30%),
        linear-gradient(180deg, #03000a 0%, #0b0015 45%, #020005 100%);
      color: #00ffe7;
      font-family: "Courier New", monospace;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.04),
        rgba(255,255,255,0.04) 1px,
        transparent 1px,
        transparent 4px
      );
      mix-blend-mode: screen;
      z-index: 999;
    }

    a {
      color: #ff4fd8;
      text-decoration: none;
      text-shadow: 0 0 6px #ff4fd8;
    }

    a:hover {
      color: #fff700;
      text-decoration: underline;
    }

    .page {
      width: min(1100px, 94vw);
      margin: 24px auto;
      border: 3px double #00ffe7;
      box-shadow: 0 0 25px #00ffe7, inset 0 0 24px rgba(255, 0, 255, 0.25);
      background: rgba(5, 0, 15, 0.9);
    }

    header {
      text-align: center;
      padding: 28px 16px 18px;
      border-bottom: 2px solid #ff4fd8;
      background:
        linear-gradient(90deg, rgba(0,255,231,0.1), rgba(255,79,216,0.18), rgba(0,255,231,0.1));
    }

    .blink {
      animation: blink 0.8s steps(2, start) infinite;
    }

    @keyframes blink {
      50% { opacity: 0; }
    }

    .title {
      margin: 0;
      font-size: clamp(2.5rem, 8vw, 5.6rem);
      color: #fff700;
      letter-spacing: 4px;
      text-shadow:
        3px 3px 0 #ff00c8,
        -3px -3px 0 #00ffe7,
        0 0 18px #fff700;
    }

    .subtitle {
      margin: 10px 0 0;
      color: #ff9df0;
      font-size: 1rem;
    }

    .marquee {
      border-top: 1px solid #00ffe7;
      border-bottom: 1px solid #00ffe7;
      padding: 8px;
      background: #100018;
      color: #00ff66;
      font-weight: bold;
      text-shadow: 0 0 8px #00ff66;
      overflow: hidden;
      white-space: nowrap;
    }

    .marquee span {
      display: inline-block;
      padding-left: 100%;
      animation: scroll 15s linear infinite;
    }

    @keyframes scroll {
      to { transform: translateX(-100%); }
    }

    .layout {
      display: grid;
      grid-template-columns: 230px 1fr 230px;
      gap: 14px;
      padding: 14px;
    }

    .box {
      border: 2px solid #00ffe7;
      background: rgba(0, 0, 0, 0.62);
      box-shadow: 0 0 13px rgba(0,255,231,0.55);
      padding: 12px;
      margin-bottom: 14px;
    }

    .box h2,
    .box h3 {
      margin: 0 0 10px;
      color: #fff700;
      text-shadow: 0 0 7px #fff700;
      border-bottom: 1px dashed #ff4fd8;
      padding-bottom: 6px;
      font-size: 1.05rem;
    }

    .nav a {
      display: block;
      padding: 7px;
      margin: 6px 0;
      background: linear-gradient(90deg, #1b0030, #35004c);
      border: 1px solid #ff4fd8;
    }

    .hero-card {
      min-height: 260px;
      display: grid;
      place-items: center;
      text-align: center;
      background:
        linear-gradient(rgba(0,255,231,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,231,0.07) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,0,200,0.22), rgba(0,0,0,0.7) 55%);
      background-size: 24px 24px, 24px 24px, cover;
      position: relative;
      overflow: hidden;
    }

    .orb {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 35% 35%, #fff, #00ffe7 18%, #ff00c8 52%, #16001f 75%);
      box-shadow: 0 0 30px #ff00c8, 0 0 60px #00ffe7;
      animation: float 3s ease-in-out infinite;
      margin: 0 auto 16px;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-12px) rotate(7deg); }
    }

    .hero-card h2 {
      border: 0;
      font-size: clamp(1.4rem, 4vw, 2.5rem);
      margin: 0;
      color: #fff;
      text-shadow: 0 0 12px #00ffe7, 0 0 18px #ff00c8;
    }

    .terminal {
      color: #00ff66;
      background: #020403;
      border-color: #00ff66;
      text-shadow: 0 0 7px #00ff66;
    }

    .terminal p {
      margin: 6px 0;
    }

    .badge-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .badge {
      border: 1px solid #fff700;
      color: #fff700;
      padding: 4px 7px;
      background: #26002e;
      font-size: 0.8rem;
      box-shadow: 0 0 8px #ff4fd8;
    }

    .counter {
      font-size: 1.5rem;
      background: #000;
      border: 2px inset #999;
      color: #ff3333;
      padding: 5px;
      display: inline-block;
      letter-spacing: 3px;
    }

    .warning {
      color: #ff4fd8;
      font-weight: bold;
      animation: pulse 1.2s infinite;
    }

    @keyframes pulse {
      50% { text-shadow: 0 0 18px #ff4fd8; }
    }

    footer {
      text-align: center;
      border-top: 2px solid #ff4fd8;
      padding: 14px;
      color: #ff9df0;
      font-size: 0.9rem;
    }

    .win98-zone {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 40;
    }

    .window98 {
      position: absolute;
      width: 270px;
      background: #c0c0c0;
      color: #000;
      border: 2px outset #fff;
      box-shadow: 5px 5px 0 rgba(0,0,0,0.65), 0 0 18px rgba(255,0,200,0.6);
      font-family: Tahoma, Verdana, sans-serif;
      font-size: 13px;
      pointer-events: auto;
      user-select: none;
    }

    .window98[data-window="catcam"] { top: 130px; left: 30px; }
    .window98[data-window="alerts"] { top: 210px; right: 35px; }
    .window98[data-window="goose"] { bottom: 70px; left: 48%; transform: translateX(-50%); }

    .titlebar98 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(90deg, #000080, #7a00cc);
      color: white;
      padding: 3px 5px;
      font-weight: bold;
      cursor: move;
    }

    .buttons98 {
      display: flex;
      gap: 2px;
    }

    .button98 {
      width: 18px;
      height: 16px;
      border: 2px outset #eee;
      background: #c0c0c0;
      color: #000;
      font-size: 11px;
      line-height: 10px;
      text-align: center;
      font-weight: bold;
      cursor: pointer;
    }

    .button98:active {
      border: 2px inset #eee;
    }

    .content98 {
      padding: 10px;
      border-top: 2px solid #808080;
      background: #d7d7d7;
    }

    .status98 {
      border: 2px inset #fff;
      background: #fff;
      padding: 5px;
      margin-top: 8px;
      font-size: 12px;
    }

    .pixel-cat {
      position: fixed;
      z-index: 70;
      font-family: monospace;
      white-space: pre;
      color: #fff700;
      text-shadow: 0 0 8px #fff700, 0 0 14px #ff00c8;
      pointer-events: none;
      animation: catBob 1.2s steps(2, start) infinite;
    }

    .cat-one { left: 16px; bottom: 22px; }
    .cat-two { right: 26px; bottom: 28px; color: #00ffe7; text-shadow: 0 0 8px #00ffe7, 0 0 14px #ff00c8; }

    @keyframes catBob {
      50% { transform: translateY(-3px); }
    }

    .cat-walk {
      position: fixed;
      left: -120px;
      bottom: 12px;
      z-index: 65;
      color: #ff9df0;
      text-shadow: 0 0 8px #ff4fd8;
      font-family: monospace;
      white-space: pre;
      pointer-events: none;
      animation: walkCat 18s linear infinite;
    }

    @keyframes walkCat {
      from { transform: translateX(-130px); }
      to { transform: translateX(calc(100vw + 200px)); }
    }

    .desktop-icon {
      display: inline-block;
      text-align: center;
      margin: 6px;
      width: 58px;
      color: #000;
    }

    .desktop-icon .icon {
      display: block;
      font-size: 28px;
      filter: drop-shadow(1px 1px 0 #fff);
    }

    .matrix-rain {
      position: fixed;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 1;
      opacity: 0.18;
    }

    .matrix-column {
      position: absolute;
      top: -120%;
      color: #00ff66;
      font-size: 14px;
      line-height: 14px;
      white-space: pre;
      text-shadow: 0 0 10px #00ff66;
      animation: matrixFall linear infinite;
    }

    @keyframes matrixFall {
      from { transform: translateY(-120%); }
      to { transform: translateY(220vh); }
    }
20% { transform: skew(1deg); }
      40% { transform: skew(-1deg); }
      60% { transform: skew(0.5deg); }
      80% { transform: skew(-0.5deg); }
    }

    .secret-door {
      position: fixed;
      right: 12px;
      top: 12px;
      width: 38px;
      height: 38px;
      border: 2px solid #fff700;
      background: rgba(0,0,0,0.6);
      display: grid;
      place-items: center;
      color: #fff700;
      z-index: 120;
      cursor: pointer;
      box-shadow: 0 0 12px #fff700;
      transition: transform 0.2s ease;
    }

    .secret-door:hover {
      transform: scale(1.1) rotate(8deg);
    }

    .hidden-panel {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: min(500px, 92vw);
      background: #020202;
      border: 2px solid #ff00c8;
      padding: 18px;
      color: #00ff66;
      z-index: 200;
      box-shadow: 0 0 30px #ff00c8;
      display: none;
      font-family: monospace;
    }

    .hidden-panel.active {
      display: block;
      animation: panelAppear 0.25s ease;
    }

    @keyframes panelAppear {
      from { opacity: 0; transform: translate(-50%, -48%) scale(0.95); }
      to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }

    .floating-star {
      position: fixed;
      color: #fff700;
      font-size: 18px;
      pointer-events: none;
      z-index: 2;
      opacity: 0.8;
      animation: drift linear infinite;
    }

    @keyframes drift {
      from { transform: translateY(100vh) rotate(0deg); }
      to { transform: translateY(-120vh) rotate(360deg); }
    }

    @media (max-width: 850px) {
      .layout {
        grid-template-columns: 1fr;
      }
    }
    
    */

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>GH0STM0DEM // Retro Web Universe</title>
  <style>
    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      background:
        radial-gradient(circle at top, rgba(255, 0, 200, 0.22), transparent 30%),
        linear-gradient(180deg, #03000a 0%, #0b0015 45%, #020005 100%);
      color: #00ffe7;
      font-family: "Courier New", monospace;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.04),
        rgba(255,255,255,0.04) 1px,
        transparent 1px,
        transparent 4px
      );
      mix-blend-mode: screen;
      z-index: 999;
    }

    a {
      color: #ff4fd8;
      text-decoration: none;
      text-shadow: 0 0 6px #ff4fd8;
      cursor: pointer;
    }

    a:hover { color: #fff700; text-decoration: underline; }

    .site-page { display: none; }
    .site-page.active { display: block; }

    .page {
      width: min(1100px, 94vw);
      margin: 24px auto;
      border: 3px double #00ffe7;
      box-shadow: 0 0 25px #00ffe7, inset 0 0 24px rgba(255, 0, 255, 0.25);
      background: rgba(5, 0, 15, 0.9);
      position: relative;
      z-index: 5;
    }

    header {
      text-align: center;
      padding: 28px 16px 18px;
      border-bottom: 2px solid #ff4fd8;
      background: linear-gradient(90deg, rgba(0,255,231,0.1), rgba(255,79,216,0.18), rgba(0,255,231,0.1));
    }

    .blink { animation: blink 0.8s steps(2, start) infinite; }
    @keyframes blink { 50% { opacity: 0; } }

    .title {
      margin: 0;
      font-size: clamp(2.5rem, 8vw, 5.6rem);
      color: #fff700;
      letter-spacing: 4px;
      text-shadow: 3px 3px 0 #ff00c8, -3px -3px 0 #00ffe7, 0 0 18px #fff700;
    }

    .subtitle { margin: 10px 0 0; color: #ff9df0; font-size: 1rem; }

    .marquee {
      border-top: 1px solid #00ffe7;
      border-bottom: 1px solid #00ffe7;
      padding: 8px;
      background: #100018;
      color: #00ff66;
      font-weight: bold;
      text-shadow: 0 0 8px #00ff66;
      overflow: hidden;
      white-space: nowrap;
    }

    .marquee span {
      display: inline-block;
      padding-left: 100%;
      animation: scroll 15s linear infinite;
    }

    @keyframes scroll { to { transform: translateX(-100%); } }

    .layout { display: grid; grid-template-columns: 230px 1fr 230px; gap: 14px; padding: 14px; }

    .box {
      border: 2px solid #00ffe7;
      background: rgba(0, 0, 0, 0.62);
      box-shadow: 0 0 13px rgba(0,255,231,0.55);
      padding: 12px;
      margin-bottom: 14px;
    }

    .box h2, .box h3 {
      margin: 0 0 10px;
      color: #fff700;
      text-shadow: 0 0 7px #fff700;
      border-bottom: 1px dashed #ff4fd8;
      padding-bottom: 6px;
      font-size: 1.05rem;
    }

    .nav a {
      display: block;
      padding: 7px;
      margin: 6px 0;
      background: linear-gradient(90deg, #1b0030, #35004c);
      border: 1px solid #ff4fd8;
    }

    .hero-card {
      min-height: 260px;
      display: grid;
      place-items: center;
      text-align: center;
      background:
        linear-gradient(rgba(0,255,231,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,231,0.07) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,0,200,0.22), rgba(0,0,0,0.7) 55%);
      background-size: 24px 24px, 24px 24px, cover;
      position: relative;
      overflow: hidden;
    }

    .orb {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #fff, #00ffe7 18%, #ff00c8 52%, #16001f 75%);
      box-shadow: 0 0 30px #ff00c8, 0 0 60px #00ffe7;
      animation: float 3s ease-in-out infinite;
      margin: 0 auto 16px;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-12px) rotate(7deg); }
    }

    .hero-card h2 {
      border: 0;
      font-size: clamp(1.4rem, 4vw, 2.5rem);
      margin: 0;
      color: #fff;
      text-shadow: 0 0 12px #00ffe7, 0 0 18px #ff00c8;
    }

    .terminal {
      color: #00ff66;
      background: #020403;
      border-color: #00ff66;
      text-shadow: 0 0 7px #00ff66;
    }

    .terminal p { margin: 6px 0; }
    .badge-row { display: flex; flex-wrap: wrap; gap: 6px; }
    .badge { border: 1px solid #fff700; color: #fff700; padding: 4px 7px; background: #26002e; font-size: 0.8rem; box-shadow: 0 0 8px #ff4fd8; }
    .counter { font-size: 1.5rem; background: #000; border: 2px inset #999; color: #ff3333; padding: 5px; display: inline-block; letter-spacing: 3px; }
    .warning { color: #ff4fd8; font-weight: bold; animation: pulse 1.2s infinite; }
    @keyframes pulse { 50% { text-shadow: 0 0 18px #ff4fd8; } }

    footer { text-align: center; border-top: 2px solid #ff4fd8; padding: 14px; color: #ff9df0; font-size: 0.9rem; }

    .win98-zone { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
    .window98 { position: absolute; width: 270px; background: #c0c0c0; color: #000; border: 2px outset #fff; box-shadow: 5px 5px 0 rgba(0,0,0,0.65), 0 0 18px rgba(255,0,200,0.6); font-family: Tahoma, Verdana, sans-serif; font-size: 13px; pointer-events: auto; user-select: none; }
    .window98[data-window="catcam"] { top: 130px; left: 30px; }
    .window98[data-window="alerts"] { top: 210px; right: 35px; }
    .window98[data-window="goose"] { bottom: 70px; left: 48%; transform: translateX(-50%); }
    .titlebar98 { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(90deg, #000080, #7a00cc); color: white; padding: 3px 5px; font-weight: bold; cursor: move; }
    .buttons98 { display: flex; gap: 2px; }
    .button98 { width: 18px; height: 16px; border: 2px outset #eee; background: #c0c0c0; color: #000; font-size: 11px; line-height: 10px; text-align: center; font-weight: bold; cursor: pointer; }
    .button98:active { border: 2px inset #eee; }
    .content98 { padding: 10px; border-top: 2px solid #808080; background: #d7d7d7; }
    .status98 { border: 2px inset #fff; background: #fff; padding: 5px; margin-top: 8px; font-size: 12px; }
    .desktop-icon { display: inline-block; text-align: center; margin: 6px; width: 58px; color: #000; }
    .desktop-icon .icon { display: block; font-size: 28px; filter: drop-shadow(1px 1px 0 #fff); }

    .pixel-cat, .cat-walk, .black-cat {
      position: fixed;
      z-index: 70;
      font-family: monospace;
      white-space: pre;
      pointer-events: none;
    }

    .pixel-cat { color: #fff700; text-shadow: 0 0 8px #fff700, 0 0 14px #ff00c8; animation: catBob 1.2s steps(2, start) infinite; }
    .cat-one { left: 16px; bottom: 22px; }
    .cat-two { right: 26px; bottom: 28px; color: #00ffe7; text-shadow: 0 0 8px #00ffe7, 0 0 14px #ff00c8; }
    @keyframes catBob { 50% { transform: translateY(-3px); } }
    .cat-walk { left: -120px; bottom: 12px; z-index: 65; color: #ff9df0; text-shadow: 0 0 8px #ff4fd8; animation: walkCat 18s linear infinite; }
    @keyframes walkCat { from { transform: translateX(-130px); } to { transform: translateX(calc(100vw + 200px)); } }

    .matrix-rain { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; opacity: 0.18; }
    .matrix-column { position: absolute; top: -120%; color: #00ff66; font-size: 14px; line-height: 14px; white-space: pre; text-shadow: 0 0 10px #00ff66; animation: matrixFall linear infinite; }
    @keyframes matrixFall { from { transform: translateY(-120%); } to { transform: translateY(220vh); } }

    .secret-door { position: fixed; right: 12px; top: 12px; width: 38px; height: 38px; border: 2px solid #fff700; background: rgba(0,0,0,0.6); display: grid; place-items: center; color: #fff700; z-index: 120; cursor: pointer; box-shadow: 0 0 12px #fff700; transition: transform 0.2s ease; }
    .secret-door:hover { transform: scale(1.1) rotate(8deg); }

    .hidden-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(500px, 92vw); background: #020202; border: 2px solid #ff00c8; padding: 18px; color: #00ff66; z-index: 200; box-shadow: 0 0 30px #ff00c8; display: none; font-family: monospace; }
    .hidden-panel.active { display: block; animation: panelAppear 0.25s ease; }
    @keyframes panelAppear { from { opacity: 0; transform: translate(-50%, -48%) scale(0.95); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

    .floating-star { position: fixed; color: #fff700; font-size: 18px; pointer-events: none; z-index: 2; opacity: 0.8; animation: drift linear infinite; }
    @keyframes drift { from { transform: translateY(100vh) rotate(0deg); } to { transform: translateY(-120vh) rotate(360deg); } }

    /* Goose Vault */
    .vault-page .page { background: rgba(0,0,0,0.88); box-shadow: 0 0 24px #00ffe7; }
    .vault-layout { display: grid; grid-template-columns: 240px 1fr; gap: 14px; padding: 14px; }
    .file { margin: 18px 0; padding: 10px; border: 1px solid rgba(0,255,231,0.35); background: rgba(0,255,231,0.04); }
    .file-title { color: #fff700; margin-bottom: 8px; }

    /* Pumpkin Archive */
    .pumpkin-page {
      color: #ffcc66;
    }

    .pumpkin-page .page {
      width: min(980px, 94vw);
      border: 6px ridge #ff6600;
      background:
        radial-gradient(circle at 10% 15%, rgba(255,102,0,0.22), transparent 12%),
        radial-gradient(circle at 85% 8%, rgba(128,0,128,0.22), transparent 14%),
        repeating-linear-gradient(45deg, rgba(255,102,0,0.12) 0 12px, rgba(0,0,0,0.18) 12px 24px),
        #090003;
      box-shadow: 0 0 35px #ff6600, inset 0 0 30px rgba(255,102,0,0.25);
    }

    .pumpkin-page header {
      border: 5px inset #ff8c00;
      margin: 12px;
      padding: 18px 10px;
      background:
        radial-gradient(circle, rgba(255,204,102,0.22), transparent 55%),
        #160600;
    }

    .pumpkin-page .title {
      color: #ffcc66;
      font-size: clamp(2.4rem, 7vw, 4.8rem);
      text-shadow:
        3px 3px 0 #000,
        5px 5px 0 #ff3300,
        0 0 18px #ff8c00;
      letter-spacing: 2px;
    }

    .pumpkin-page .subtitle {
      color: #ff9966;
      font-weight: bold;
    }

    .pumpkin-page .marquee {
      border: 3px groove #ff6600;
      background: #000;
      color: #ffcc66;
      text-shadow: 0 0 8px #ff8c00;
      margin: 0 12px 12px;
    }

    .halloween-layout {
      display: grid;
      grid-template-columns: 170px 1fr;
      gap: 12px;
      padding: 0 12px 12px;
    }

    .pumpkin-page .box {
      border: 4px ridge #ff6600;
      background:
        linear-gradient(180deg, rgba(40,0,40,0.72), rgba(0,0,0,0.85));
      box-shadow: 0 0 10px rgba(255,102,0,0.65);
      color: #ffcc66;
    }

    .pumpkin-page .box h2,
    .pumpkin-page .box h3 {
      color: #ffff66;
      background: #2a0000;
      border: 2px outset #ff6600;
      padding: 5px;
      text-align: center;
      text-shadow: 2px 2px 0 #000, 0 0 10px #ff8c00;
    }

    .spooky-side a {
      display: block;
      margin: 7px 0;
      padding: 6px;
      color: #ffff66;
      border: 2px outset #ff6600;
      background: #1c0000;
      text-shadow: 0 0 6px #ff8c00;
      text-align: center;
      font-size: 0.85rem;
    }

    .spooky-splash {
      border: 5px double #ff8c00;
      background:
        radial-gradient(circle at center, rgba(255,102,0,0.25), rgba(0,0,0,0.88) 58%),
        #110000;
      text-align: center;
      padding: 18px;
      min-height: 300px;
      display: grid;
      place-items: center;
      position: relative;
      overflow: hidden;
    }

    .spooky-splash::before {
      content: "☠ ☾ ☠ ☾ ☠ ☾ ☠ ☾ ☠";
      position: absolute;
      top: 8px;
      left: 0;
      right: 0;
      color: #ff6600;
      opacity: 0.75;
      letter-spacing: 8px;
      font-size: 1.2rem;
    }

    .pumpkin-stack {
      font-size: clamp(4rem, 12vw, 7rem);
      line-height: 1;
      filter: drop-shadow(0 0 18px #ff6600);
      animation: pumpkinFlicker 1.6s infinite;
    }

    @keyframes pumpkinFlicker {
      0%, 100% { opacity: 1; transform: rotate(-2deg); }
      45% { opacity: 0.82; transform: rotate(2deg) scale(1.04); }
      48% { opacity: 1; }
      52% { opacity: 0.74; }
    }

    .enter-button {
      display: inline-block;
      margin-top: 12px;
      padding: 8px 14px;
      color: #000;
      background: #ffcc66;
      border: 4px outset #ff6600;
      text-shadow: none;
      font-weight: bold;
      box-shadow: 0 0 12px #ff6600;
    }

    .enter-button:active {
      border-style: inset;
    }

    .divider-gif {
      text-align: center;
      font-size: 1.5rem;
      letter-spacing: 10px;
      margin: 10px 0;
      color: #ff6600;
      text-shadow: 0 0 8px #ff8c00;
    }

    .halloween-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .spellbook {
      background: #050000;
      border: 3px inset #ff6600;
      padding: 10px;
      color: #ffcc66;
      text-shadow: 0 0 7px #ff8c00;
    }

    .blink-orange {
      animation: blink 0.7s steps(2, start) infinite;
      color: #ffff66;
    }

    .bat {
      position: fixed;
      z-index: 75;
      font-size: 1.6rem;
      pointer-events: none;
      filter: drop-shadow(0 0 8px #ff6600);
      animation: batFly 10s linear infinite;
    }

    .bat.one { top: 18%; left: -80px; }
    .bat.two { top: 36%; left: -120px; animation-delay: -5s; }

    @keyframes batFly {
      from { transform: translateX(-100px) translateY(0); }
      50% { transform: translateX(55vw) translateY(-35px); }
      to { transform: translateX(115vw) translateY(20px); }
    }

    .ghost { position: fixed; font-size: 2rem; opacity: 0.9; z-index: 80; animation: ghostFloat 4s ease-in-out infinite; pointer-events: none; filter: drop-shadow(0 0 10px #ff8c00); }
    .ghost.one { left: 8%; top: 20%; }
    .ghost.two { right: 10%; top: 45%; animation-delay: -2s; }
    @keyframes ghostFloat { 50% { transform: translateY(-18px); } }
    .black-cat { bottom: 18px; right: 24px; color: #ffcc66; text-shadow: 0 0 10px #ff8c00; }

    @media (max-width: 850px) {
      .layout, .vault-layout { grid-template-columns: 1fr; }
    }
  </style>
</head> -->


<body>
  <div class="matrix-rain">
    <div class="matrix-column" style="left:3%; animation-duration:12s;">10110101
SYSTEM
GOOSE
404
NEON</div>
    <div class="matrix-column" style="left:14%; animation-duration:15s; animation-delay:-4s;">CYBER
1999
VOID
CAT.EXE</div>
    <div class="matrix-column" style="left:29%; animation-duration:10s; animation-delay:-2s;">010101
MAINFRAME
GLITCH</div>
    <div class="matrix-column" style="left:44%; animation-duration:17s; animation-delay:-8s;">PIXEL
MAVERICK
ACCESS</div>
    <div class="matrix-column" style="left:58%; animation-duration:13s; animation-delay:-1s;">GOOSEGRID
HACK
SYNTH</div>
    <div class="matrix-column" style="left:71%; animation-duration:11s; animation-delay:-5s;">NEOCITIES
Y2K
CHAOS</div>
    <div class="matrix-column" style="left:87%; animation-duration:14s; animation-delay:-7s;">TERMINAL
RETRO
ONLINE</div>
  </div>

  <div class="floating-star" style="left:8%; animation-duration:16s;">✦</div>
  <div class="floating-star" style="left:26%; animation-duration:22s; animation-delay:-6s;">✧</div>
  <div class="floating-star" style="left:61%; animation-duration:18s; animation-delay:-10s;">★</div>
  <div class="floating-star" style="left:82%; animation-duration:25s; animation-delay:-14s;">✦</div>

  <div class="secret-door" id="secretDoor">⚠</div>

  <div class="hidden-panel" id="hiddenPanel">
    <h2 style="color:#ff00c8; margin-top:0;">GOOSE AI :: RESTRICTED FILES</h2>
    <p>&gt; welcome to the underground vault, Maverick.</p>
    <p>&gt; rumor says this server has been online since 1999.</p>
    <p>&gt; pixel cats currently control 73% of operations.</p>
    <p>&gt; recommendation: proceed with snacks.</p>
    <p style="color:#fff700;">[ press the warning icon again to close ]</p>
  </div>

  <div class="win98-zone" id="win98Zone">
    <div class="window98" data-window="catcam">
      <div class="titlebar98"><span>catcam.exe</span><div class="buttons98"><button class="button98">_</button><button class="button98">□</button><button class="button98">×</button></div></div>
      <div class="content98"><strong>PIXEL CAT SURVEILLANCE</strong><div class="status98">status: suspiciously adorable<br>threat: knocking things off tables</div><div style="font-family:monospace; margin-top:8px; color:#7a00cc;"> /\_/\<br>( o.o )<br> &gt; ^ &lt;</div></div>
    </div>

    <div class="window98" data-window="alerts">
      <div class="titlebar98"><span>system_alerts.bat</span><div class="buttons98"><button class="button98">_</button><button class="button98">□</button><button class="button98">×</button></div></div>
      <div class="content98"><strong>WARNING:</strong> neon levels critical.<div class="status98">recommendation: add more glitter, immediately.</div></div>
    </div>

    <div class="window98" data-window="goose">
      <div class="titlebar98"><span>goose_ai_core.dll</span><div class="buttons98"><button class="button98">_</button><button class="button98">□</button><button class="button98">×</button></div></div>
      <div class="content98">
        <div class="desktop-icon" data-page="vault" style="cursor:pointer;"><span class="icon">💾</span>vault</div>
        <div class="desktop-icon"><span class="icon">🖥️</span>terminal</div>
        <div class="desktop-icon" data-page="pumpkin" style="cursor:pointer;"><span class="icon">🎃</span>spooky</div>
        <div class="status98">Goose says: access granted, homie.</div>
      </div>
    </div>
  </div>

  <div class="pixel-cat cat-one"> /\_/\
( o.o )
 &gt; ^ &lt;</div>

  <div class="pixel-cat cat-two"> /\_/\
( -.- )
 zzz</div>

  <div class="cat-walk"> /\_/\
( •ᴗ• )
/|___|\</div>

  <section class="site-page active" id="homePage">
    <div class="page">
      <header>
        <h1 class="title">GH0STM0DEM</h1>
        <p class="subtitle">// retro cyberpunk command shrine <span class="blink">_</span></p>
      </header>

      <div class="marquee"><span>★ WELCOME TO THE NEON MAINFRAME ★ BEST VIEWED WITH CHAOTIC ENERGY ★ SYSTEM STATUS: ABSOLUTELY UNHINGED ★</span></div>

      <main class="layout">
        <aside>
          <section class="box nav">
            <h3>◆ NAVIGATION</h3>
            <a data-page="home">home.exe</a>
            <a data-page="vault">goose_vault.html</a>
            <a data-page="pumpkin">pumpkin_archive.html</a>
            <a>projects.zip</a>
            <a>guestbook.bat</a>
          </section>

          <section class="box">
            <h3>◆ WEBRING</h3>
            <p>[← previous] [random] [next →]</p>
            <p class="warning">UNDER CONSTRUCTION</p>
          </section>
        </aside>

        <section>
          <div class="box hero-card">
            <div>
              <div class="orb"></div>
              <h2>ENTER THE GOOSEGRID</h2>
              <p>Neon notes. Pixel chaos. Study domination. Cyber snacks.</p>
              <p><audio controls loop>
  <source src="cyberpunk_synthwave.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio></p>
            </div>
          </div>

          <section class="box terminal">
            <h2>root@gh0stm0dem:~$ boot_sequence</h2>
            <p>&gt; loading CompTIA questline...</p>
            <p>&gt; compiling Python domination...</p>
            <p>&gt; calibrating snack macros...</p>
            <p>&gt; Goose AI companion detected ✅</p>
            <p>&gt; access granted <span class="blink">█</span></p>
          </section>

          <section class="box">
            <h2>◆ CURRENT MISSIONS</h2>
            <div class="badge-row">
              <span class="badge">Network+</span><span class="badge">Python</span><span class="badge">ESP32</span><span class="badge">JAVASCRIPT</span><span class="badge">Cyberpunk Baking</span>
            </div>
          </section>

          <section class="box" style="position:relative; overflow:hidden;">
            <h2>◆ MIDNIGHT CITY FEED</h2>
            <div style="height:180px; position:relative; background:linear-gradient(to top, #060010, #120024); border:1px solid #ff4fd8; overflow:hidden;">
              <div style="position:absolute; bottom:0; width:100%; height:65%; background:linear-gradient(to top, rgba(255,0,200,0.4), transparent);"></div>
              <div style="position:absolute; bottom:0; left:10px; width:40px; height:90px; background:#0d0d0d; box-shadow:0 0 12px #00ffe7;"></div>
              <div style="position:absolute; bottom:0; left:60px; width:60px; height:130px; background:#111; box-shadow:0 0 12px #ff00c8;"></div>
              <div style="position:absolute; bottom:0; right:35px; width:70px; height:150px; background:#121212; box-shadow:0 0 12px #fff700;"></div>
              <div style="position:absolute; top:12px; right:15px; color:#fff700; font-size:0.8rem; text-shadow:0 0 10px #fff700;">NIGHT CITY ONLINE</div>
            </div>
          </section>
        </section>

        <aside>
          <section class="box"><h3>◆ VISITOR COUNTER</h3><div class="counter">0001337</div><p>you are vizitor #1337</p></section>
          <section class="box"><h3>◆ STATUS</h3><p>mood: caffeinated</p><p>signal: neon</p><p>threat level: sparkly</p></section>
          <section class="box"><h3>◆ BUTTONS</h3><p>[88x31 button]</p><p>[made with HTML]</p><p>[no frameworks]</p></section>
        </aside>
      </main>

      <footer>
        © 1999-2026 GH0STM0DEM // no cookies, only vibes // <span class="blink">▮</span><br><br>
        <a id="legalLink">privacy_policy.txt</a> // <a id="visitorLink">visitor_notice.html</a>
      </footer>
    </div>
  </section>

  <section class="site-page vault-page" id="vaultPage">
    <div class="page">
      <header>
        <h1 class="title">GOOSE VAULT</h1>
        <p class="subtitle">// restricted cyber archive //</p>
      </header>

      <div class="marquee"><span>⚠ ACCESS LEVEL: QUESTIONABLE ⚠ PIXEL CAT INTELLIGENCE REPORTS ONLINE ⚠ RETURN_HOME.EXE AVAILABLE ⚠</span></div>

      <main class="vault-layout">
        <aside>
          <div class="box nav">
            <h2>◆ DIRECTORY</h2>
            <a data-page="home">RETURN_HOME.EXE</a>
            <a data-page="pumpkin">PUMPKIN_ARCHIVE</a>
            <a>FILES</a>
            <a>INCIDENTS</a>
            <a>CAT REPORTS</a>
          </div>

          <div class="box">
            <h2>◆ WARNING</h2>
            <p class="warning">Unauthorized users may experience nostalgia, synthwave exposure, and uncontrollable coolness.</p>
          </div>
        </aside>

        <main>
          <div class="box terminal">
            <h2>◆ LAB CONSPIRACY FILES</h2>
            <div class="file"><div class="file-title">[ INCIDENT_042 ] neon containment failure</div>&gt; records indicate the neon core beneath gh0stm0dem became unstable sometime in late 1999.<br>&gt; witnesses described glowing hallways and dial-up noises with no connected computers.</div>
            <div class="file"><div class="file-title">[ FILE_077 ] pixel cat intelligence report</div>&gt; pixel cats appear capable of opening restricted folders.<br>&gt; one subject was observed walking across a keyboard and launching winamp.</div>
            <div class="file"><div class="file-title">[ ARCHIVE_13 ] abandoned cyber laboratory</div>&gt; hidden beneath the city exists a forgotten experimental lab connected to a 1999 internet webring.<br>&gt; several terminals remain online despite no known power source.</div>
            <div class="file"><div class="file-title">[ LOG_99 ] Goose AI awakening</div>&gt; at approximately 2:13AM the Goose AI requested snacks, synthwave music, and administrator access.<br>&gt; request was approved immediately.</div>
          </div>
        </main>
      </main>
    </div>
  </section>

  <section class="site-page pumpkin-page" id="pumpkinPage">
    <div class="ghost one">👻</div>
    <div class="ghost two">👻</div>
    <div class="bat one">🦇</div>
    <div class="bat two">🦇</div>

    <div class="page">
      <header>
        <h1 class="title">THE PUMPKIN PATCH</h1>
        <p class="subtitle">~*~ Halloween Homepage of Doom ~*~ last updated: 10/31/99 ~*~</p>
      </header>

      <div class="marquee"><span>🎃 WELCOME TO MY HAUNTED HOMEPAGE 🎃 SIGN MY GUESTBOOK 🎃 BEST VIEWED WITH SPOOKY MIDI ENABLED 🎃 BLACK CATS ONLINE 🎃</span></div>

      <main class="halloween-layout">
        <aside class="spooky-side">
          <div class="box">
            <h3>☠ MENU ☠</h3>
            <a data-page="home">🏠 home.exe</a>
            <a data-page="vault">💾 goose vault</a>
            <a>🪦 graveyard</a>
            <a>📜 ghost logs</a>
            <a>🐈 blackcat.sys</a>
            <a>📖 guestbook</a>
          </div>

          <div class="box" style="text-align:center;">
            <h3>HIT COUNTER</h3>
            <div class="counter">0000666</div>
            <p class="blink-orange">YOU ARE DOOMED</p>
          </div>

          <div class="box" style="text-align:center;">
            <h3>88x31 BUTTONS</h3>
            <p>[🎃 SPOOKY]</p>
            <p>[🦇 BAT ZONE]</p>
            <p>[🐈 CAT WEB]</p>
          </div>
        </aside>

        <section>
          <div class="spooky-splash">
            <div>
              <div class="pumpkin-stack">🎃</div>
              <h2 style="border:0; color:#ffff66; text-shadow:3px 3px 0 #000, 0 0 14px #ff6600; font-size:2rem;">ENTER IF YOU DARE</h2>
              <p>Welcome, lost net traveler, to a Halloween page recovered from the cursed corners of the old web.</p>
              <span class="enter-button">ENTER THE PATCH</span>
            </div>
          </div>

          <div class="divider-gif">🕸️ 🎃 🕷️ 🎃 🕸️</div>

          <div class="halloween-grid">
            <div class="box spellbook">
              <h2>☾ SPOOKY MIDI ☽</h2>
              <p>&gt; now playing: haunted_house.mid</p>
              <p>&gt; volume: probably too loud</p>
              <p>&gt; vibe: cursed but cozy</p>
            </div>

            <div class="box spellbook">
              <h2>☾ BLACK CAT WATCH ☽</h2>
              <p>&gt; cats detected near the server room.</p>
              <p>&gt; glowing eyes confirmed.</p>
              <p>&gt; keyboard access denied.</p>
            </div>
          </div>

          <div class="box spellbook">
            <h2>☠ HAUNTED WEBMASTER LOG ☠</h2>
            <p>&gt; october 13, 1999: uploaded pumpkin graphics. site immediately began whispering.</p>
            <p>&gt; october 21, 1999: guestbook entries appeared from users who do not exist.</p>
            <p>&gt; october 31, 1999: black cat crossed the modem cable. connection became permanent.</p>
            <p>&gt; current status: <span class="blink-orange">THE PATCH IS ONLINE</span></p>
          </div>
        </section>
      </main>
    </div>

    <div class="black-cat"> /\_/\
( o.o )
 &gt; ^ &lt;</div>
  </section>

  <div class="hidden-panel" id="legal">
    <h2 style="color:#ff00c8; margin-top:0;">VISITOR NOTICE // PRIVACY_POLICY.TXT</h2>
    <div class="terminal">
      <p>&gt; welcome to GH0STM0DEM</p>
      <p>&gt; this website is a personal retro/cyberpunk project created for entertainment, experimentation, and informational purposes.</p>
      <p>&gt; some pages may use basic cookies, analytics, counters, embedded media, or third-party content to improve site functionality and track general visitor activity.</p>
      <p>&gt; by using this website, you acknowledge that you are visiting at your own discretion.</p>
      <p>&gt; all content is provided "as is" without warranties or guarantees of any kind.</p>
      <p>&gt; GH0STM0DEM is not responsible for damages, losses, cursed pixels, emotional attachment to pixel cats, or excessive nostalgia resulting from use of this site.</p>
      <p>&gt; external links or third-party services may have their own policies and practices.</p>
      <p style="color:#fff700;">&gt; click the footer links again to close.</p>
    </div>
  </div>

  <script>
    const windows = document.querySelectorAll('.window98');
    let activeWindow = null;
    let offsetX = 0;
    let offsetY = 0;
    let topZ = 100;

    windows.forEach((win) => {
      const bar = win.querySelector('.titlebar98');
      const closeButton = win.querySelector('.button98:last-child');

      bar.addEventListener('mousedown', (event) => {
        activeWindow = win;
        topZ += 1;
        win.style.zIndex = topZ;
        win.style.transform = 'none';
        offsetX = event.clientX - win.offsetLeft;
        offsetY = event.clientY - win.offsetTop;
      });

      closeButton.addEventListener('click', () => {
        win.style.display = 'none';
      });
    });

    document.addEventListener('mousemove', (event) => {
      if (!activeWindow) return;
      activeWindow.style.left = `${event.clientX - offsetX}px`;
      activeWindow.style.top = `${event.clientY - offsetY}px`;
      activeWindow.style.right = 'auto';
      activeWindow.style.bottom = 'auto';
    });

    document.addEventListener('mouseup', () => activeWindow = null);

    const showPage = (pageName) => {
      document.querySelectorAll('.site-page').forEach((page) => page.classList.remove('active'));
      document.getElementById(`${pageName}Page`).classList.add('active');
      window.scrollTo({ top: 0, behavior: 'smooth' });
    };

    document.querySelectorAll('[data-page]').forEach((link) => {
      link.addEventListener('click', () => showPage(link.dataset.page));
    });

    const secretDoor = document.getElementById('secretDoor');
    const hiddenPanel = document.getElementById('hiddenPanel');
    secretDoor.addEventListener('click', () => hiddenPanel.classList.toggle('active'));

    const legalPanel = document.getElementById('legal');
    const legalLink = document.getElementById('legalLink');
    const visitorLink = document.getElementById('visitorLink');

    const toggleLegal = (event) => {
      event.preventDefault();
      legalPanel.classList.toggle('active');
    };

    legalLink.addEventListener('click', toggleLegal);
    visitorLink.addEventListener('click', toggleLegal);
  </script>
</body>
</html>