/* Earth 1.16.2 — PJAX/Turbo and rounded visual refinements */
:root {
  --earth-radius-sm: .75rem;
  --earth-radius: 1rem;
  --earth-radius-lg: 1.25rem;
}

html.earth-pjax-ready { scroll-padding-top: 92px; }
body { transition: opacity .16s ease; }
/* PJAX loading indicator: a slim pale-blue line directly below the browser address bar. */
.turbo-progress-bar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99999;
  height: 3px;
  background: #7dd3fc;
  box-shadow: 0 0 8px rgb(125 211 252 / 65%);
}

/* Keep the header/footer restrained; round content surfaces and media consistently. */
body > section img:not(.rounded-full),
#content img,
article img,
video,
iframe {
  border-radius: var(--earth-radius);
}

body > section [class*="bg-white"]:not(.rounded-full),
body > section [class*="dark:bg-slate-800"]:not(.rounded-full),
.toc-container,
pre,
blockquote,
input,
textarea,
select,
button:not(.rounded-full) {
  border-radius: var(--earth-radius) !important;
}

/* Article code blocks: soft charcoal surface with an unobtrusive copy action. */
#content .earth-code-shell {
  position: relative;
  margin: 1.35rem 0;
  border: 1px solid rgb(148 163 184 / 16%);
  border-radius: 13px !important;
  overflow: hidden;
  background: linear-gradient(145deg, #161b24 0%, #10141b 58%, #0d1117 100%);
  box-shadow: 0 8px 24px rgb(15 23 42 / 12%);
}
#content .earth-code-shell > pre,
#content .earth-code-shell > .ce-block,
#content .earth-code-shell .ce-pre {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#content .earth-code-shell pre {
  min-height: 3rem;
  padding: 3rem 1.2rem 1.2rem !important;
  overflow-x: auto;
  color: #d8dee9;
  scrollbar-color: #465166 transparent;
}
/* Themes commonly add a pale border to inline code. It creates white rules when
   applied inside pre, so reset every part of the nested code element explicitly. */
#content .earth-code-shell pre code,
#content .earth-code-shell pre code[class*="language-"] {
  display: block;
  color: #d8dee9;
  background: transparent !important;
  border: 0 !important;
  border-width: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0;
  text-shadow: none;
}
#content .earth-code-copy {
  position: absolute;
  top: .7rem;
  right: .75rem;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 29px;
  padding: .3rem .65rem;
  border: 1px solid rgb(148 163 184 / 18%) !important;
  border-radius: 7px !important;
  color: #aeb8c8;
  background: rgb(255 255 255 / 6%);
  box-shadow: 0 1px 2px rgb(0 0 0 / 18%);
  font: 500 .75rem/1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .15s ease;
}
#content .earth-code-copy:hover {
  color: #f1f5f9;
  border-color: rgb(148 163 184 / 32%) !important;
  background: rgb(255 255 255 / 11%);
  transform: translateY(-1px);
}
#content .earth-code-copy:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}
#content .earth-code-copy[data-state="copied"] {
  color: #bbf7d0;
  border-color: rgb(74 222 128 / 30%) !important;
  background: rgb(22 101 52 / 35%);
}
#content .earth-code-copy[data-state="error"] {
  color: #fecaca;
  border-color: rgb(248 113 113 / 30%) !important;
  background: rgb(127 29 29 / 35%);
}
#content table { border-radius: var(--earth-radius-sm); overflow: hidden; }
#content figure { border-radius: var(--earth-radius); overflow: hidden; }

.earth-toc-list { margin: 0; padding: 0; list-style: none; }
.earth-toc-item { margin: .15rem 0; }
.earth-toc-level-3 { padding-left: .85rem; }
.earth-toc-level-4 { padding-left: 1.7rem; }
.earth-toc-link {
  display: block;
  padding: .38rem .55rem;
  border-radius: .65rem;
  color: inherit;
  font-size: .875rem;
  line-height: 1.35;
  opacity: .78;
  transition: background-color .15s ease, opacity .15s ease, transform .15s ease;
}
.earth-toc-link:hover,
.earth-toc-link:focus-visible {
  background: rgb(243 244 246);
  opacity: 1;
  transform: translateX(2px);
  outline: none;
}
.dark .earth-toc-link:hover,
.dark .earth-toc-link:focus-visible { background: rgb(51 65 85); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  body, .earth-toc-link, .earth-code-copy { transition: none !important; }
}