/* ===== Root theme tokens ===== */
:root {
  --bg: #f8fafc;
  /* light background */
  --bg-elev: #ffffff;
  /* cards, panels */
  --text: #0f172a;
  /* primary text */
  --muted: #6b7280;
  /* secondary text */
  --border: #e5e7eb;
  /* borders */
  --accent: #6b9fc9;
  /* your preferred brand */
  --shadow: 0 10px 25px -10px rgba(0, 0, 0, .15);
  --radius: 16px;
  /* when the sidebar goes away */
  --bp-sidebar: 900px;

  /* Additional color variables for HTML/CSS viewer */
  --color-bg: var(--bg);
  --color-bg-secondary: var(--bg-elev);
  --color-bg-hover: rgba(0, 0, 0, 0.05);
  --color-text: var(--text);
  --color-text-secondary: var(--muted);
  --color-border: var(--border);
  --color-accent: var(--accent);
  --color-accent-light: rgba(107, 159, 201, 0.1);
  --color-code-bg: #1e1e1e;
  --color-code-text: #d4d4d4;
  --font-mono: 'Courier New', Courier, monospace;
}

.theme-dark {
  --bg: #0b1220;
  --bg-elev: #0f172a;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --border: #1f2937;
  --accent: #6b9fc9;
  /* keep brand same */
  --shadow: 0 10px 25px -12px rgba(0, 0, 0, .6);

  /* Additional color variables for HTML/CSS viewer - dark theme */
  --color-bg: var(--bg);
  --color-bg-secondary: var(--bg-elev);
  --color-bg-hover: rgba(255, 255, 255, 0.05);
  --color-text: var(--text);
  --color-text-secondary: var(--muted);
  --color-border: var(--border);
  --color-accent: var(--accent);
  --color-accent-light: rgba(107, 159, 201, 0.2);
  --color-code-bg: #1e1e1e;
  --color-code-text: #d4d4d4;
}

/* ===== Base ===== */
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  /* Prevent layout shift during font loading */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}

.hidden {
  display: none !important;
}

/* Screen reader only - accessible but visually hidden */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Skip link for keyboard navigation */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent);
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

.muted {
  color: var(--muted);
}

.accent {
  color: var(--accent);
}

.p-16 {
  padding: 16px;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
}

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(6px);
  background: color-mix(in oklab, var(--bg-elev), transparent 10%);
  border-bottom: 1px solid var(--border);
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 12px;
}

.header-bar .left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
  font-weight: 650;
}

.logo {
  display: inline-flex;
  width: 64px;
  height: 32px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--accent), transparent 80%);
  color: var(--accent);
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.brand-text {
  display: none;
}

@media (min-width: 640px) {
  .brand-text {
    display: inline;
  }
}

.search-wrap {
  flex: 1;
  max-width: 640px;
}

.search {
  position: relative;
  /* make it the positioning context */
  width: 300px;
  /* or 100%, etc. */
  max-width: 65%;

  display: block
}

.search input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 36px 10px 12px;
  /* 36px leaves space for the icon */
  background: var(--bg-elev);
  color: var(--text);
  outline: none;
}

/* Keep the icon inside the input on the right */
.search .search-icon {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  /* vertically center it */
  opacity: 0.6;
  pointer-events: none;
  /* ensures clicks go to the input */
  font-size: 1rem;
  /* optional tweak */
}


.search input:focus {
  border-color: color-mix(in oklab, var(--accent), black 10%);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent), transparent 80%);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid var(--border);
  /* Performance optimization */
  cursor: pointer;
  transition: filter 0.2s ease;
}

.btn.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.btn.ghost {
  background: var(--bg-elev);
  color: var(--text);
}

.btn.subtle {
  background: var(--bg-elev);
  color: var(--text);
}

.btn:hover {
  filter: brightness(.98);
}

.hide-sm {
  display: none;
}

.hide-md {
  display: none;
}

.hide-desktop {
  display: none;
}

@media (min-width: 640px) {
  .hide-sm {
    display: inline-flex;
  }
}

@media (min-width: 768px) {
  .hide-md {
    display: flex;
  }
}

@media (min-width: 1024px) {
  .hide-desktop {
    display: block;
  }
}

/* ===== Layout ===== */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 24px;
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: 220px 1fr;
  }
}

.sidebar {
  position: sticky;
  top: 88px;
  align-self: start;
  display: grid;
  gap: 16px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  /* margin-top: 92px; */
}

.sidebar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.content {
  min-width: 0;
}

/* ===== Cards & surfaces ===== */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
}

.item {
  overflow: hidden;
}

.item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 0 16px;
  gap: 8px;
  /* adds breathing room even with flex-between */
}

.difficulty {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.9rem;
  margin-left: auto;
  /* pushes it to the right edge if needed */
}

.item-body {
  padding: 8px 16px;
}

.item-title {
  font-size: 1.05rem;
  font-weight: 650;
  margin: 5px 0 4px;
}

.item-desc {
  color: var(--muted);
  font-size: .95rem;
  margin: 10px 0;
}

.item-tags {
  padding: 0 16px 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.item-date {
  padding: 4px 16px 0 16px;
  font-size: 0.85rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}


.item-foot {
  padding: 8px 16px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: .9rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in oklab, var(--bg), var(--text) 5%);
  color: inherit;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: .8rem;
}

/* Base topic badge style */
.topic-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  border: 1px solid var(--border);
}

/* === Color variants === */
.topic-python {
  background: color-mix(in oklab, #4ade80, transparent 80%);
}

.topic-pgzero {
  background: color-mix(in oklab, #60a5fa, transparent 80%);
}

.topic-turtle {
  background: color-mix(in oklab, #facc15, transparent 80%);
}

.topic-web {
  background: color-mix(in oklab, #a855f7, transparent 80%);
}


.item-top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 12px 16px 0 16px;
}

.item-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px 16px;
  color: var(--muted);
  font-size: .9rem;
}

.item-foot .bottom-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* keep the recipe dot color behavior you already use */
.typeDot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
  background: #10b981;
}

.typeDot.recipe {
  background: #6366f1;
}


.typeDot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
  background: #10b981;
}

.typeDot.recipe {
  background: #6366f1;
}

/* .tag { border: 1px solid var(--border); border-radius: 999px; background: var(--bg-elev); padding: 4px 10px; font-size: .75rem; } */

/* ===== Toolbar and tag scroller ===== */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 8px;
  gap: 12px;
}

.toolbar > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.page-title {
  margin: 0;
  font-size: 1.45rem;
}

#pageSub {
  margin: 0;
}

.layout-toggle {
  display: inline-flex;
  gap: 6px;
}

.tag-scroller {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0;
  margin-bottom: 8px;
  scrollbar-width: none;
}

.tag-scroller::-webkit-scrollbar {
  display: none;
}

/* ===== Vertical nav ===== */
.nav-vertical {
  display: grid;
  gap: 8px;
}

.nav-link {
  padding: 10px 12px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}

.nav-link:hover {
  background: color-mix(in oklab, var(--bg), var(--text) 7%);
}

.nav-link.active {
  background: color-mix(in oklab, var(--bg), var(--text) 9%);
  font-weight: 600;
}

/* ===== Filters ===== */
.section-title {
  margin: 0 0 8px;
  font-size: 1rem;
}

.filter-group {
  margin: 20px 0;
}

.label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: .9rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  border: 1px solid var(--border);
  background: var(--bg-elev);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .8rem;
  cursor: pointer;
}

.chip.is-active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elev);
  padding: 8px 10px;
  color: var(--text);
}

/* ===== Empty state & footer ===== */
.empty {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 36px;
  text-align: center;
  color: var(--muted);
}

.footer {
  margin-top: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  text-align: center;
}

/* ===== Drawer ===== */
.drawer {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 60;
}

.drawer.open {
  display: block;
}

.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  /* Performance optimization for backdrop */
  will-change: opacity;
  backdrop-filter: blur(2px);
}

.drawer-panel {
  position: absolute;
  inset: 0 auto 0 0;
  width: 250px;
  max-width: 85%;
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  padding: 16px;
  /* Performance optimization for slide animation */
  will-change: transform;
}

#tagListMobile {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.drawer-title {
  font-weight: 700;
  /* text-decoration: underline;
  text-underline-offset: 10px; */
}

/* ===== Utilities ===== */
code {
  background: color-mix(in oklab, var(--bg), var(--text) 8%);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.95em;
}

/* === Unified chips & tags (readable in light/dark) === */
.chip,
.tag,
.icon-btn {
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .8rem;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}

/* Hover feedback */
.chip:hover,
.tag:hover,
.icon-btn:hover {
  background: color-mix(in oklab, var(--bg-elev), var(--text) 5%);
}

@media (min-width: 1024px) {
  #mobileMenuBtn {
    display: none;
  }
}

/* Selected state */
.chip.is-active,
.tag.is-active,
[aria-pressed="true"].chip,
[aria-pressed="true"].tag {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Dark-mode hover polish */
.theme-dark .chip:hover,
.theme-dark .tag:hover {
  background: color-mix(in oklab, var(--bg-elev), var(--accent) 10%);
}

/* Focus-visible ring for a11y */
.chip:focus-visible,
.tag:focus-visible,
.btn:focus-visible,
.icon-btn:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--accent), white 40%);
  outline-offset: 2px;
  box-shadow: none;
}

/* Small screens: focus on cards only */
@media (max-width: 1023px) {

  /* hide the left sidebar entirely */
  .sidebar {
    display: none !important;
  }

  /* optional: hide the tag scroller to reduce clutter */
  .tag-scroller {
    display: none !important;
  }

  /* optional: hide grid/list toggle on very small screens */
  .toolbar .layout-toggle {
    display: none !important;
  }
  
}

/* Full-screen reader mode */
.detail-open .grid {
  grid-template-columns: 1fr !important;
}

.detail-open .sidebar {
  display: none !important;
}

.detail-open .tag-scroller {
  display: none !important;
}

.detail-open .toolbar .layout-toggle {
  display: none !important;
}

.detail-open .content {
  max-width: 100%;
  padding: 0 24px;
}

.detail-article {
  border-radius: var(--radius);
}

/* Fullwidth mode for tutorials */
.fullwidth-mode .container {
  max-width: 100% !important;
  padding: 0 !important;
}

.fullwidth-mode .grid {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.fullwidth-mode .content {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.fullwidth-mode .detail-article {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.fullwidth-mode #itemsContainer {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.fullwidth-mode .reader {
  max-width: 100% !important;
  padding: 20px !important;
}

.fullwidth-mode .html-css-viewer {
  height: 80vh !important;
}

.fullwidth-mode .html-css-viewer-container {
  margin: 0 !important;
  padding: 10px !important;
}

/* Fullwidth toggle button */
.fullwidth-toggle {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 1000;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  box-shadow: var(--shadow);
}

.fullwidth-toggle:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.fullwidth-toggle svg {
  width: 16px;
  height: 16px;
}


/* Minimal prose styles (no Tailwind) */
.prose,
.prose-wrap {
  line-height: 1.6;
}

.prose h1,
.prose h2,
.prose h3 {
  margin: 0.6em 0 0.3em;
  font-weight: 700;
}

.prose h1 {
  font-size: 1.8rem;
}

.prose h2 {
  font-size: 1.35rem;
}

.prose h3 {
  font-size: 1.1rem;
}

.prose p {
  margin: 0.6em 0;
}

.prose code {
  background: color-mix(in oklab, var(--bg), var(--text) 8%);
  padding: 2px 5px;
  border-radius: 6px;
  font-size: 0.95em;
}

.prose a {
  color: var(--accent);
  text-decoration: underline;
}

.prose a:hover {
  color: color-mix(in oklab, var(--accent), var(--text) 30%);
}

.prose ul,
.prose ol {
  padding-left: 1.2em;
  margin: 0.5em 0;
}

.prose img,
.prose video,
.prose canvas {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.prose .note {
  background: color-mix(in oklab, var(--bg), var(--accent) 10%);
  padding: 10px 12px;
  border-radius: 10px;
}

/* Clean, unified background for code blocks */
.prose pre {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  overflow-x: auto;
  font-size: 1.0rem;
  line-height: 1.3;
}

/* Remove background from inline code inside <pre> */
.prose pre code {
  background: transparent;
  /* color: inherit; */
  padding: 0;
  border-radius: 0;
  line-height: 1.3;
}

/* Hide top part of card when viewing a tutorial */
.detail-article .item-top {
  display: none !important;
}

/* Hide the header title/description (and layout buttons) in reader mode */
.detail-open .toolbar {
  display: none !important;
}

/* Back button styling for reader view */
.back-wrap {
  display: flex;
  justify-content: flex-end;
  /* right-aligns it */
  margin-top: 24px;
  /* space above the button */
}

.back-btn {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transition: background 0.2s ease;
}

.back-btn:hover {
  background: color-mix(in oklab, var(--accent), black 10%);
}

/* === Canonical responsive cards grid (smooth 3 → 2 → 1) === */
.cards {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Performance: optimize rendering of off-screen cards */
.cards .card {
  content-visibility: auto;
  contain-intrinsic-size: 0 300px;
}

/* When sidebar is hidden (<=1023px), keep two-up if there is room */
@media (max-width: 1023px) {
  .cards {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    justify-items: stretch;
  }
}

/* Small phones: one-up */
@media (max-width: 480px) {
  .cards {
    grid-template-columns: 1fr !important;
  }
}

/* Prevent overflow constraints */
.content, .cards { min-width: 0; }

/* ===== Annotated Code Component ===== */
.annotated-code {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 0;
  margin: 24px 0;
  background: transparent;
  overflow: visible;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
  .annotated-code {
    grid-template-columns: 1fr;
  }
}

.code-panel {
  position: relative;
  overflow-x: auto;
  padding-right: 16px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.annotation-panel {
  padding: 16px;
  padding-bottom: 100px;
  /* border-left: 2px solid var(--border); */
  overflow-y: visible;
  position: relative;
  min-height: 80px;
}

@media (max-width: 768px) {
  .annotation-panel {
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 10px;
  }

  .code-panel {
    padding-right: 0;
    border: 2px solid var(--border);
  }
}

/* Line numbers in annotated code */
.annotated-code pre {
  margin: 0;
  padding: 16px 16px 16px 60px;
  counter-reset: line;
  position: relative;
  background: transparent;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0;
  line-height: 0;
  border: none;
}

.annotated-code pre code {
  display: block;
  color: var(--text);
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  line-height: 1.45;
  background: transparent !important;
}

/* Override PrismJS backgrounds in annotated code */
.annotated-code pre[class*="language-"],
.annotated-code code[class*="language-"] {
  background: transparent !important;
}

/* Remove backgrounds from syntax highlighting spans */
.annotated-code span[class^="token"],
.annotated-code span[class*=" token"],
.annotated-code span.kn,
.annotated-code span.nn,
.annotated-code span.n,
.annotated-code span.o,
.annotated-code span.mi,
.annotated-code span.k,
.annotated-code span.nf,
.annotated-code span.p,
.annotated-code span.nb,
.annotated-code span.s2,
.annotated-code span.sa,
.annotated-code span.si,
.annotated-code span.w {
  background: transparent !important;
}

.annotated-code pre .code-line {
  display: block;
  position: relative;
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
  padding: 0;
}

.annotated-code pre .code-line::before {
  content: counter(line);
  counter-increment: line;
  position: absolute;
  left: -52px;
  width: 40px;
  text-align: right;
  color: var(--muted);
  opacity: 0.5;
  user-select: none;
  font-size: 14px;
  transition: color 0.15s ease, opacity 0.15s ease;
}

/* Clickable lines have different colored line numbers */
.annotated-code pre .code-line.highlight {
  cursor: pointer;
  transition: background 0.15s ease;
}

.annotated-code pre .code-line.highlight::before {
  color: var(--accent);
  opacity: 0.8;
}

/* On hover, highlight the entire section */
.annotated-code pre .code-line.highlight.hover-section {
  background: color-mix(in oklab, var(--accent), transparent 92%);
}

/* When active/clicked, highlight all lines in the section */
.annotated-code pre .code-line.highlight.active {
  background: color-mix(in oklab, var(--accent), transparent 85%);
}

.annotated-code pre .code-line.highlight.active::before {
  color: var(--accent);
  opacity: 1;
}

/* Optional: Hide line numbers for small code blocks */
.annotated-code.no-line-numbers pre .code-line::before {
  display: none;
}

/* Pygments-style syntax highlighting for annotated code blocks */
.annotated-code .k,
.annotated-code .kn,
.annotated-code .kc,
.annotated-code .kd {
  color: #c678dd; /* Keywords: def, if, else, import, True, False */
}

.annotated-code .n {
  color: #abb2bf; /* Names/variables */
}

.annotated-code .nf {
  color: #61afef; /* Function names */
}

.annotated-code .nn {
  color: #e5c07b; /* Module names */
}

.annotated-code .o,
.annotated-code .ow {
  color: #56b6c2; /* Operators: +, -, =, ==, and, or, in */
}

.annotated-code .p {
  color: #abb2bf; /* Punctuation */
}

.annotated-code .mi,
.annotated-code .mf {
  color: #d19a66; /* Numbers */
}

.annotated-code .s,
.annotated-code .s1,
.annotated-code .s2,
.annotated-code .sa {
  color: #98c379; /* Strings */
}

.annotated-code .si {
  color: #e5c07b; /* String interpolation */
}

.annotated-code .c1,
.annotated-code .c {
  color: #5c6370; /* Comments */
  font-style: italic;
}

.annotated-code .nb {
  color: #e5c07b; /* Built-in names: print, range, etc. */
}

.annotated-code .bp {
  color: #e5c07b; /* Built-in pseudo: self */
}

/* Annotation boxes */
.annotation {
  display: none;
  padding: 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  animation: fadeIn 0.2s ease;
  position: absolute;
  left: 16px;
  right: 16px;
}

.annotation.active {
  display: block;
}

.annotation-title {
  font-weight: 650;
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 1.1rem;
}

.annotation-content {
  color: var(--text);
  line-height: 1.5;
  font-size: 0.9rem;
}

.annotation-content p {
  margin: 8px 0;
}

.annotation-content ul {
  margin: 8px 0;
  padding-left: 20px;
}

.annotation-content code {
  background: color-mix(in oklab, var(--bg), var(--text) 8%);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 0.9em;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Placeholder for when no annotation is selected */
.annotation-placeholder {
  color: var(--muted);
  text-align: center;
  padding: 20px 16px;
  font-style: italic;
  position: sticky;
  top: 40px;
}

.annotation-placeholder.hide {
  display: none;
}

/* ===== Pygments Syntax Highlighting ===== */
/* Base syntax colors that adapt to light/dark theme */

/* Keywords (if, def, class, import, etc.) */
.annotated-code .k, .annotated-code .kc, .annotated-code .kd,
.annotated-code .kn, .annotated-code .kp, .annotated-code .kr,
.annotated-code .kt {
  color: #c678dd; /* Purple for keywords */
  font-weight: 600;
}

/* Strings */
.annotated-code .s, .annotated-code .s1, .annotated-code .s2,
.annotated-code .sb, .annotated-code .sc, .annotated-code .sd,
.annotated-code .se, .annotated-code .sh, .annotated-code .si,
.annotated-code .sx {
  color: #98c379; /* Green for strings */
}

/* Numbers */
.annotated-code .m, .annotated-code .mf, .annotated-code .mh,
.annotated-code .mi, .annotated-code .mo {
  color: #d19a66; /* Orange for numbers */
}

/* Comments */
.annotated-code .c, .annotated-code .c1, .annotated-code .cm,
.annotated-code .cs {
  color: #5c6370; /* Gray for comments */
  font-style: italic;
}

/* Function/class names */
.annotated-code .n, .annotated-code .na, .annotated-code .nb,
.annotated-code .nc, .annotated-code .nd, .annotated-code .ne,
.annotated-code .nf, .annotated-code .nl, .annotated-code .nn {
  color: #61afef; /* Blue for names */
}

/* Operators */
.annotated-code .o, .annotated-code .ow {
  color: #56b6c2; /* Cyan for operators */
}

/* Built-in functions/constants */
.annotated-code .nb {
  color: #e5c07b; /* Yellow for built-ins */
}

/* Special/magic methods */
.annotated-code .fm, .annotated-code .vm {
  color: #d19a66;
  font-style: italic;
}

/* HTML Tag names (nt = name tag) */
.annotated-code .nt {
  color: #e06c75; /* Red for HTML tags */
}

/* DOCTYPE and processing instructions */
.annotated-code .cp {
  color: #5c6370; /* Gray for doctype */
  font-style: italic;
}

/* Punctuation (angle brackets, etc.) */
.annotated-code .p {
  color: #abb2bf; /* Light gray for punctuation */
}

/* Light theme adjustments for HTML */
html:not(.theme-dark) .annotated-code .nt {
  color: #e45649; /* Darker red for light mode */
}

html:not(.theme-dark) .annotated-code .p {
  color: #383a42; /* Dark gray for light mode punctuation */
}

/* Dark theme adjustments */
html.theme-dark .annotated-code .c,
html.theme-dark .annotated-code .c1,
html.theme-dark .annotated-code .cm,
html.theme-dark .annotated-code .cs {
  color: #7f848e; /* Lighter gray for comments in dark mode */
}

/* Light theme adjustments */
html:not(.theme-dark) .annotated-code .k,
html:not(.theme-dark) .annotated-code .kc,
html:not(.theme-dark) .annotated-code .kd,
html:not(.theme-dark) .annotated-code .kn,
html:not(.theme-dark) .annotated-code .kp,
html:not(.theme-dark) .annotated-code .kr,
html:not(.theme-dark) .annotated-code .kt {
  color: #a626a4; /* Darker purple for light mode */
}

html:not(.theme-dark) .annotated-code .s,
html:not(.theme-dark) .annotated-code .s1,
html:not(.theme-dark) .annotated-code .s2,
html:not(.theme-dark) .annotated-code .sb,
html:not(.theme-dark) .annotated-code .sc,
html:not(.theme-dark) .annotated-code .sd,
html:not(.theme-dark) .annotated-code .se,
html:not(.theme-dark) .annotated-code .sh,
html:not(.theme-dark) .annotated-code .si,
html:not(.theme-dark) .annotated-code .sx {
  color: #50a14f; /* Darker green for light mode */
}

html:not(.theme-dark) .annotated-code .n,
html:not(.theme-dark) .annotated-code .na,
html:not(.theme-dark) .annotated-code .nb,
html:not(.theme-dark) .annotated-code .nc,
html:not(.theme-dark) .annotated-code .nd,
html:not(.theme-dark) .annotated-code .ne,
html:not(.theme-dark) .annotated-code .nf,
html:not(.theme-dark) .annotated-code .nl,
html:not(.theme-dark) .annotated-code .nn {
  color: #4078f2; /* Darker blue for light mode */
}

/* ===== Python Editor Styles (Skulpt + CodeMirror) ===== */

/* Main editor container - side by side layout */
.python-editor {
  display: flex;
  flex-direction: row;
  margin: 1.5rem 0;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #3c3c3c;
  background: #1e1e1e;
  min-height: 150px;
}

/* Code panel (left side) */
.python-editor-code-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 2px solid #3c3c3c;
}

/* Code header */
.python-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #4a90d9;
  color: white;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-height: 36px;
  box-sizing: border-box;
}

/* Run button */
.python-run-btn {
  background: #22c55e;
  color: white;
  border: none;
  padding: 5px 14px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background 0.2s;
}

.python-run-btn:hover {
  background: #16a34a;
}

.python-run-btn:active {
  background: #15803d;
}

/* Code area */
.python-editor-code {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #2d2d2d;
}

.python-editor-code .CodeMirror {
  flex: 1;
  height: auto;
  min-height: 100px;
  font-size: 14px;
  line-height: 1.5;
}

.python-editor-code .CodeMirror-scroll {
  min-height: 100px;
}

/* Minimal scrollbar for code editor */
.python-editor-code .CodeMirror-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.python-editor-code .CodeMirror-scroll::-webkit-scrollbar-track {
  background: #2d2d2d;
}

.python-editor-code .CodeMirror-scroll::-webkit-scrollbar-thumb {
  background: #4a4a4a;
  border-radius: 4px;
}

.python-editor-code .CodeMirror-scroll::-webkit-scrollbar-thumb:hover {
  background: #5a5a5a;
}

.python-editor-code .CodeMirror-scroll::-webkit-scrollbar-corner {
  background: #2d2d2d;
}

/* Output panel (right side) */
.python-editor-output {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.python-output-header {
  background: #22c55e;
  color: white;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-height: 36px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.python-output-content {
  flex: 1;
  background: #1a1a2e;
  color: #e2e8f0;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
  padding: 12px 16px;
  min-height: 60px;
  overflow: auto;
  white-space: pre;
}

/* Minimal scrollbar for output panel */
.python-output-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.python-output-content::-webkit-scrollbar-track {
  background: #1a1a2e;
}

.python-output-content::-webkit-scrollbar-thumb {
  background: #3c3c3c;
  border-radius: 4px;
}

.python-output-content::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}

.python-output-content::-webkit-scrollbar-corner {
  background: #1a1a2e;
}

.python-output-content:empty::before {
  content: 'Click Run to see output...';
  color: #6b7280;
  font-style: italic;
}

/* Light theme output */
.theme-light .python-output-content {
  background: #f8f9fa;
  color: #1a1a2e;
}

.theme-light .python-output-content::-webkit-scrollbar-track {
  background: #f8f9fa;
}

.theme-light .python-output-content::-webkit-scrollbar-thumb {
  background: #c5c5c5;
}

.theme-light .python-output-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.theme-light .python-output-content::-webkit-scrollbar-corner {
  background: #f8f9fa;
}

/* Error styling */
.python-output-content.has-error {
  border-left: 4px solid #ef4444;
}

.python-error {
  color: #f87171;
}

.python-success {
  color: #6b7280;
  font-style: italic;
}

/* Inline input styles */
.python-input-prompt {
  color: #e2e8f0;
}

.python-input-wrapper {
  display: inline;
}

.python-input-field {
  background: transparent;
  border: none;
  border-bottom: 1px solid #4a90d9;
  color: #4ade80;
  font-family: inherit;
  font-size: inherit;
  padding: 0 2px;
  margin: 0;
  outline: none;
  min-width: 100px;
  width: auto;
}

.python-input-field:focus {
  border-bottom-color: #22c55e;
}

.python-input-value {
  color: #4ade80;
}

/* Responsive: stack vertically on small screens */
@media (max-width: 768px) {
  .python-editor {
    flex-direction: column;
  }

  .python-editor-code-panel {
    border-right: none;
    border-bottom: 2px solid #3c3c3c;
  }

  .python-editor-code .CodeMirror {
    min-height: 80px;
    font-size: 13px;
  }

  .python-output-content {
    min-height: 60px;
    font-size: 13px;
  }
}

/* Code/output tables for Python tutorials */
.code-output-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

.code-output-table th {
  background: var(--bg-elev);
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  border: 1px solid var(--border);
}

.code-output-table td {
  padding: 12px 16px;
  border: 1px solid var(--border);
  vertical-align: top;
}

.code-output-table td:first-child {
  background: #1e1e1e;
  color: #d4d4d4;
  font-family: 'Courier New', Courier, monospace;
  white-space: pre;
}

.code-output-table td:last-child {
  background: var(--bg-elev);
  font-family: 'Courier New', Courier, monospace;
}

/* Good/bad comparison table */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}

.comparison-table th {
  padding: 12px 16px;
  text-align: center;
  font-weight: 600;
  border: 1px solid var(--border);
}

.comparison-table th.good {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.comparison-table th.bad {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

.theme-dark .comparison-table th.good {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

.theme-dark .comparison-table th.bad {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.comparison-table td {
  padding: 10px 16px;
  border: 1px solid var(--border);
  font-family: 'Courier New', Courier, monospace;
  text-align: center;
}

/* Code inside tables - no background, inherit cell styling */
.prose .code-output-table td code,
.prose .comparison-table td code {
  background: transparent !important;
  color: inherit;
  padding: 0;
  border: none;
  border-radius: 0;
}

/* Inline code in prose */
.prose code:not([class*="language-"]) {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: 'Courier New', Courier, monospace;
}

.theme-dark .prose code:not([class*="language-"]) {
  background: rgba(255, 255, 255, 0.1);
}

/* Python syntax display blocks (non-editable) */
.syntax-block {
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 16px;
  border-radius: 8px;
  font-family: 'Courier New', Courier, monospace;
  margin: 1rem 0;
  overflow-x: auto;
}

.syntax-block .keyword {
  color: #c586c0;
}

.syntax-block .placeholder {
  color: #9cdcfe;
  font-style: italic;
}

/* Try it yourself section */
.try-it {
  background: rgba(107, 159, 201, 0.1);
  border-left: 4px solid var(--accent);
  padding: 16px 20px;
  margin: 1.5rem 0;
  border-radius: 0 8px 8px 0;
}

.try-it h3 {
  margin: 0 0 8px 0;
  color: var(--accent);
  font-size: 1rem;
}

.try-it p {
  margin: 0;
}

/* Tip/Note boxes */
.tip-box {
  background: rgba(34, 197, 94, 0.1);
  border-left: 4px solid #22c55e;
  padding: 16px 20px;
  margin: 1.5rem 0;
  border-radius: 0 8px 8px 0;
}

.tip-box strong {
  color: #16a34a;
}

.theme-dark .tip-box strong {
  color: #4ade80;
}

.warning-box {
  background: rgba(245, 158, 11, 0.1);
  border-left: 4px solid #f59e0b;
  padding: 16px 20px;
  margin: 1.5rem 0;
  border-radius: 0 8px 8px 0;
}

.warning-box strong {
  color: #d97706;
}

.theme-dark .warning-box strong {
  color: #fbbf24;
}