:root {
      --text: #fff;
      --muted: #e0bfbf;
      --red: #ff2d2d;
      --red-2: #ff5f5f;
      --red-dark: #6b0000;
      --red-deep: #3a0000;
      --glass: rgba(255,255,255,.06);
      --glass-border: rgba(255,255,255,.14);
      --glass-hover: rgba(255,255,255,.10);
      --glow-red: 0 0 40px rgba(255,45,45,.35);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; }

    body {
      min-height: 100vh;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      padding: 0;
      overflow-x: hidden;
      background:
        radial-gradient(circle at 8% 8%, rgba(255,45,45,.28), transparent 40%),
        radial-gradient(circle at 95% 95%, rgba(255,95,95,.20), transparent 40%),
        url('https://imagestaticcontent.com/default/temanwd/BACKGROUND%20DEKSTOP%20TW.webp') center center / cover no-repeat fixed;
      background-color: #1a0303;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.45) 100%);
    }

    .particles {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .particle {
      position: absolute;
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: rgba(255,140,140,.85);
      box-shadow: 0 0 12px rgba(255,95,95,1);
      animation: floatUp linear infinite;
      will-change: transform, opacity;
    }

    @keyframes floatUp {
      0% { transform: translateY(100vh) scale(.6); opacity: 0; }
      10% { opacity: .9; }
      90% { opacity: .9; }
      100% { transform: translateY(-10vh) scale(1); opacity: 0; }
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(28px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeInScale {
      from { opacity: 0; transform: scale(.94); }
      to { opacity: 1; transform: scale(1); }
    }

    @keyframes slideInLeft {
      from { opacity: 0; transform: translateX(-30px); }
      to { opacity: 1; transform: translateX(0); }
    }

    @keyframes slideInRight {
      from { opacity: 0; transform: translateX(30px); }
      to { opacity: 1; transform: translateX(0); }
    }

    .page {
      width: min(100%, 780px);
      margin: 0 auto;
      padding: 24px 16px 48px;
      position: relative;
      z-index: 2;
    }