body {
  margin: 0;
  background: var(--site-bg, #faf9f6);
  color: var(--site-fg, #1f2933);
}

.content {
  font-family: var(--site-font, Georgia, "Times New Roman", serif);
  font-size: var(--site-font-size, 18px);
  line-height: var(--site-line-height, 1.7);
  max-width: var(--site-max-width, 720px);
  margin: 0 auto;
  padding: var(--site-padding, 48px 24px);
  color: var(--site-fg, #1f2933);
  background: var(--site-bg, #faf9f6);
  min-height: 100vh;
}

.site-nav {
  max-width: var(--site-max-width, 720px);
  margin: 0 auto;
  padding: 0 var(--site-padding, 24px);
  background: transparent;
}
.site-name {
  max-width: var(--site-max-width, 720px);
  margin: 0 auto;
  padding: 24px var(--site-padding, 24px) 0;
}
.site-name a {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--site-fg, #1f2933);
  text-decoration: none;
}
.site-name a:hover { color: var(--site-link, #2563eb); }
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 16px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.site-nav a {
  color: var(--site-fg, #1f2933);
  text-decoration: none;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  transition: color 0.15s;
}
.site-nav a:hover { color: #2563eb; }
.site-nav li.has-dropdown { position: relative; }
.site-nav li.has-dropdown > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  flex-direction: column;
  background: inherit;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 8px 0;
  min-width: 160px;
  z-index: 10;
}
.site-nav li.has-dropdown:hover > ul { display: flex; }

.breadcrumbs {
  max-width: var(--site-max-width, 720px);
  margin: 0 auto;
  padding: 12px var(--site-padding, 24px);
  font-size: 14px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--site-fg, #1f2933);
}
.breadcrumbs a { color: var(--site-fg, #1f2933); text-decoration: underline; }
.breadcrumbs a:hover { color: #2563eb; }
.breadcrumbs .sep { margin: 0 6px; opacity: 0.5; }
.breadcrumbs .current { opacity: 0.7; }

.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.25;
  margin: 1.4em 0 0.5em;
  color: inherit;
}

.content h1 { font-size: 2.2em; }
.content h2 { font-size: 1.8em; }
.content h3 { font-size: 1.4em; }
.content h4 { font-size: 1.15em; }
.content h5 { font-size: 1em; }
.content h6 { font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.05em; }

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

.content blockquote {
  margin: 1.2em 0;
  padding: 0.4em 1em;
  border-left: 4px solid rgba(0, 0, 0, 0.25);
  font-style: italic;
  opacity: 0.95;
}

.content ul, .content ol { margin: 0 0 1em; padding-left: 1.6em; }
.content a { color: var(--site-link, #2563eb); }
.content a:visited { color: var(--site-visited, #7c3aed); }

.content code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: rgba(0, 0, 0, 0.07);
  padding: 0.1em 0.35em;
  border-radius: var(--site-radius, 4px);
  font-size: 0.88em;
}

.content pre {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: #f1f0ed;
  padding: 1em;
  border-radius: var(--site-radius, 8px);
  overflow-x: auto;
}

.content img { max-width: 100%; height: auto; border-radius: var(--site-radius, 6px); }
.content video { max-width: 100%; height: auto; border-radius: var(--site-radius, 6px); }
.content hr { border: none; border-top: 2px solid rgba(0, 0, 0, 0.15); margin: 2em 0; }

.content .buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 1.2em 0;
}
.content .buttons .button {
  display: inline-block;
  padding: 10px 18px;
  border-radius: var(--site-radius, 8px);
  background: #2563eb;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
}
.content .buttons .button:hover { opacity: 0.9; }

.content .video-block {
  margin: 1.2em 0;
}
.content .video-block video {
  width: 100%;
  border-radius: var(--site-radius, 8px);
}
.content .video-block .poster {
  width: 100%;
  border-radius: var(--site-radius, 8px);
  cursor: pointer;
}

.content .html-embed {
  margin: 1.2em 0;
}


/* AISlopCMS style overrides */
:root {
  --site-bg: #000001;
  --site-fg: #ffffff;
  --site-font: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --site-font-size: 18px;
  --site-max-width: 720px;
  --site-radius: 8px;
}