/* Baseline reset */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

/* Overall page typography */
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.65;
  font-size: 16px;
  color: rgba(235, 240, 255, 0.92);

  /* Dynamic dark background */
  background: radial-gradient(1200px 800px at 15% 20%, rgba(120, 90, 255, 0.25), transparent 55%),
              radial-gradient(1000px 700px at 80% 30%, rgba(20, 180, 255, 0.18), transparent 60%),
              radial-gradient(900px 650px at 45% 85%, rgba(255, 60, 180, 0.12), transparent 60%),
              linear-gradient(120deg, #070a12, #080b16, #060913);
  background-size: 140% 140%;
  animation: bg-drift 18s ease-in-out infinite alternate;

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
    background-size: 100% 100%;
  }
}

@keyframes bg-drift {
  0%   { background-position: 0% 20%; }
  50%  { background-position: 60% 40%; }
  100% { background-position: 100% 70%; }
}

/* Reading column */
.reading {
  box-sizing: border-box;
  max-width: 100ch;
  padding: 0 16px;
  margin: 48px auto;
}

/* Document feel */
.reading h1 {
  line-height: 1.2;
  margin: 0 0 0.75em;
}

.reading p {
  margin: 0 0 1em;
}

/* Give the snippet breathing room */
#cpp-main-template {
  margin-top: 16px;
  position: relative;
}

/* Style the Shiki <pre> that gets injected */
#cpp-main-template pre.shiki {
  /* Layout */
  margin: 0;
  padding: 18px 18px;
  border-radius: 14px;
  overflow: auto;

  /* Border that matches the dark neon vibe */
  border: 1px solid rgba(160, 170, 255, 0.22);

  /* Subtle “glass” overlay to separate from animated bg */
  background-clip: padding-box;

  /* Glow + depth */
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(90, 200, 255, 0.10),
    0 0 28px rgba(120, 90, 255, 0.12);
}

/* Optional: refine scrollbar appearance on Chromium browsers */
#cpp-main-template pre.shiki::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}
#cpp-main-template pre.shiki::-webkit-scrollbar-thumb {
  background: rgba(170, 180, 255, 0.22);
  border-radius: 999px;
}
#cpp-main-template pre.shiki::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
}

/* Optional: ensure code font looks “code-like” */
#cpp-main-template pre.shiki code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 14px;
  line-height: 1.55;
}
/* Place the button at the top-right corner of the code frame */
#cpp-main-template > #copy-cpp {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
}