:root {
      --bg1: #0f172a;
      --bg2: #111827;
      --card: rgba(30, 41, 59, 0.75);
      --border: rgba(148, 163, 184, 0.15);
      --text: #e2e8f0;
      --muted: #94a3b8;
      --accent: #38bdf8;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 40px 20px;
      min-height: 100vh;

      font-family: Inter, system-ui, sans-serif;
      color: var(--text);

      background:
        radial-gradient(circle at top left, #1e293b 0%, transparent 30%),
        linear-gradient(135deg, var(--bg1), var(--bg2));

      display: flex;
      justify-content: center;
    }

    .page {
      width: 100%;
      max-width: 900px;
    }

    .topbar {
      margin-bottom: 24px;
    }

    .back {
      display: inline-block;
      text-decoration: none;
      color: var(--muted);

      padding: 10px 14px;
      border-radius: 12px;

      background: rgba(15, 23, 42, 0.5);
      border: 1px solid var(--border);

      transition: 0.2s ease;
    }

    .back:hover {
      color: white;
      border-color: var(--accent);
      transform: translateY(-1px);
    }

    .card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 24px;

      padding: 40px;

      backdrop-filter: blur(12px);

      box-shadow:
        0 10px 30px rgba(0,0,0,0.25);
    }

    h1 {
      margin-top: 0;
      margin-bottom: 10px;
      font-size: 2rem;
    }

    .subtitle {
      color: var(--muted);
      margin-bottom: 32px;
    }    

    footer {
      margin-top: 24px;
      text-align: center;
      color: var(--muted);
      font-size: 0.9rem;
    }
	
	.gist .gist-meta {
	  display: none;
	}
	
	.gist .gist-data {
	  filter: invert(1) hue-rotate(180deg);
	  background-color: #C7D2E4 !important;
	}

    @media (max-width: 700px) {
      .card {
        padding: 24px;
        border-radius: 18px;
      }

      h1 {
        font-size: 1.6rem;
      }
    }