:root {
  /* Original Blue Color Palette */
  --color-navy: #1a2a6c;
  --color-dusty-blue: #6382b6;
  --color-steel-blue: #4682b4;
  --color-light-blue: #d6e4f0;
  --color-white: #ffffff;
  --color-bg: #f8fbff;
  --color-text-main: #1e293b;
  --color-text-muted: #475569;
  
  /* Layout constraints */
  --border-color: rgba(99, 130, 182, 0.2);
  --radius: 12px;
  --transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text-main);
  line-height: 1.6;
  position: relative;
  overflow-x: hidden;
}

#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition);
}

ul {
  list-style: none;
}

/* 3 Column Layout */
.app-container {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 280px;
  gap: 3rem;
  max-width: 1400px;
  margin: 0 auto;
  min-height: 100vh;
}

/* Sidebar Left */
.sidebar-left {
  padding: 3rem 1.5rem 2rem 1.5rem;
  position: sticky;
  top: 0;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* old Edge/IE */
}

/* Chrome / Safari / new Edge */
.sidebar-left::-webkit-scrollbar {
  display: none;
}

.profile-section {
  text-align: left;
  margin-bottom: 3rem;
}

.profile-pic {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1rem;
  border: 3px solid var(--color-white);
  box-shadow: 0 4px 10px rgba(26, 42, 108, 0.1);
  position: relative;
  cursor: pointer;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.profile-pic:hover {
  box-shadow: 0 6px 18px rgba(26, 42, 108, 0.2);
  transform: scale(1.05);
}

.profile-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Profile pic upload overlay */
.profile-pic-upload-overlay {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: rgba(26, 42, 108, 0.75);
  justify-content: center;
  align-items: center;
}

.admin-mode .profile-pic:hover .profile-pic-upload-overlay {
  display: flex;
}

.profile-pic-upload-btn {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  color: white;
  line-height: 1;
  padding: 0;
}

.profile-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-navy);
}

.profile-title {
  font-size: 0.9rem;
  color: var(--color-dusty-blue);
  font-style: italic;
}

.main-nav {
  margin-bottom: auto;
}

.main-nav li {
  margin-bottom: 0.5rem;
}

.main-nav a {
  display: block;
  padding: 0.8rem 1rem;
  border-radius: 8px;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.main-nav a:hover, .main-nav a.active {
  background-color: var(--color-white);
  color: var(--color-navy);
  box-shadow: 0 2px 10px rgba(99, 130, 182, 0.1);
}

.social-links {
  display: flex;
  gap: 1.25rem;
  padding: 1rem;
  margin-top: 2rem;
}

.social-links a {
  color: var(--color-dusty-blue);
}

.social-links a:hover {
  color: var(--color-navy);
  transform: translateY(-2px);
}

.social-links svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Main Content */
.main-content {
  padding: 3rem 0;
}

.content-section {
  margin-bottom: 5rem;
}

.section-title {
  font-size: 2rem;
  color: var(--color-navy);
  margin-bottom: 2rem;
  position: relative;
}

.section-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 4px;
  background-color: var(--color-steel-blue);
  margin-top: 0.5rem;
  border-radius: 2px;
}

/* Hero */
.hero-section {
  min-height: 40vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 3rem;
}

.greeting {
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--color-navy);
  margin-bottom: 0.5rem;
}

.greeting .highlight {
  color: var(--color-steel-blue);
}

.professional-title {
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  color: var(--color-dusty-blue);
  font-weight: 500;
  margin-bottom: 1rem;
}

/* Notes Section */
.note-card {
  position: relative;
  display: flex;
  background-color: var(--color-white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(99, 130, 182, 0.08);
  margin-bottom: 1.5rem;
  transition: transform var(--transition), box-shadow var(--transition);
  min-height: 150px;
}

.note-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(26, 42, 108, 0.15);
}

.note-card-content {
  flex: 1;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.note-title {
  font-size: 1.2rem;
  color: var(--color-navy);
  margin-bottom: 0.5rem;
}

.note-subtitle {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}

.note-meta {
  font-size: 0.8rem;
  color: var(--color-dusty-blue);
  display: flex;
  align-items: center;
  margin-top: auto;
}

.note-meta svg {
  margin-right: 0.5rem;
}

.note-card-cover {
  width: 30%;
  min-width: 200px;
  position: relative;
  overflow: hidden;
}

.note-card-cover .cover-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.4s ease;
}

.note-card:hover .cover-bg {
  transform: scale(1.05);
}

/* Cover Upload Button (admin only) */
.cover-upload-overlay {
  display: none;
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
}

.admin-mode .cover-upload-overlay {
  display: block;
}

.cover-upload-btn {
  background: rgba(26, 42, 108, 0.85);
  color: var(--color-white);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.cover-upload-btn:hover {
  background: rgba(70, 130, 180, 0.9);
  border-color: rgba(255,255,255,0.5);
}

/* Clickable preview card + excerpt */
.note-card {
  cursor: pointer;
}

.note-excerpt {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 1.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.note-readmore {
  margin-left: auto;
  color: var(--color-steel-blue);
  font-weight: 600;
}

/* On a note detail page, hide the right sidebar (tags / recent) and let the
   article take the freed space. Only the 3-column desktop layout needs this;
   narrower breakpoints already hide the right sidebar. */
@media (min-width: 1025px) {
  body.viewing-note .app-container {
    grid-template-columns: 280px minmax(0, 1fr);
  }
  body.viewing-note .sidebar-right {
    display: none;
  }
}

/* Note Detail View */
.note-detail-view {
  position: relative;
}

.note-back-btn {
  background: none;
  border: none;
  color: var(--color-steel-blue);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-bottom: 1.5rem;
}

.note-back-btn:hover {
  text-decoration: underline;
}

.note-detail-admin {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  gap: 8px;
  z-index: 5;
}

.admin-mode .note-detail-admin {
  display: flex;
}

.note-detail-cover {
  width: 100%;
  height: 280px;
  border-radius: var(--radius);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 1.5rem;
  box-shadow: 0 8px 24px rgba(26, 42, 108, 0.15);
}

.note-detail-title {
  font-size: 2rem;
  color: var(--color-navy);
  margin-bottom: 0.5rem;
  line-height: 1.25;
}

.note-detail-subtitle {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

.note-detail-meta {
  margin-top: 0;
  margin-bottom: 2rem;
}

.note-detail-body {
  min-height: 80px;
}

/* Right Sidebar */
.sidebar-right {
  padding: 3rem 1rem;
  position: sticky;
  top: 0;
  height: 100vh;
  box-sizing: border-box;
  overflow-y: auto;
}

.widget {
  margin-bottom: 2.5rem;
}

.widget-title {
  font-size: 1rem;
  color: var(--color-navy);
  margin-bottom: 1.2rem;
  font-weight: 600;
}

.widget-list li {
  margin-bottom: 0.8rem;
}

.widget-list a {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  display: block;
}

.widget-list a:hover {
  color: var(--color-steel-blue);
  padding-left: 2px;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#block-tags.markdown-body p, #block-tags.markdown-body ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.tag, #block-tags.markdown-body > p a, #block-tags.markdown-body > ul li, #block-tags.markdown-body > p code {
  font-size: 0.8rem;
  color: var(--color-dusty-blue) !important;
  border: 1px solid var(--color-light-blue);
  background-color: var(--color-white);
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  text-decoration: none;
  display: inline-block;
}

.tag:hover, #block-tags.markdown-body > p a:hover, #block-tags.markdown-body > ul li:hover, #block-tags.markdown-body > p code:hover {
  background-color: var(--color-navy);
  color: var(--color-white) !important;
  border-color: var(--color-navy);
  cursor: pointer;
}

/* ── Note tags: chips on cards, clickable cloud in the sidebar, filter banner ── */
.note-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.note-tag-chip {
  font-size: 0.72rem;
  color: var(--color-dusty-blue);
  background: var(--color-light-blue);
  border-radius: 20px;
  padding: 0.15rem 0.6rem;
  white-space: nowrap;
}
.note-tag .note-tag-count {
  font-size: 0.68rem;
  opacity: 0.7;
  margin-left: 0.15rem;
}
.tag.note-tag.active {
  background-color: var(--color-navy);
  color: var(--color-white) !important;
  border-color: var(--color-navy);
}
.note-detail-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}
.note-detail-tags .tag { font-size: 0.72rem; padding: 0.2rem 0.6rem; }
.tags-empty { font-size: 0.85rem; margin: 0; }

.note-tag-filter-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.note-tag-clear {
  border: 1px solid var(--border-color);
  background: var(--color-white);
  color: var(--color-text-main);
  border-radius: 20px;
  padding: 0.2rem 0.7rem;
  font-size: 0.75rem;
  cursor: pointer;
}
.note-tag-clear:hover {
  background: var(--color-navy);
  color: var(--color-white);
  border-color: var(--color-navy);
}

/* Manual Note Tags use the same hover ✏️ Edit + IDE editor as personal tags.
   #note-tags-cloud doesn't match [id^="block-"], so reveal its edit button here. */
.admin-mode #note-tags-cloud { position: relative; padding-right: 55px; }
.admin-mode #note-tags-cloud:hover .admin-edit-btn { display: block; }
.admin-mode #note-tags-cloud:hover {
  outline: 2px dashed var(--color-dusty-blue);
  outline-offset: 4px;
}

/* Easter Egg Star */
.easter-egg-star {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: var(--color-steel-blue);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: spin-pulse 1s forwards ease-in-out;
  pointer-events: none;
  z-index: 1000;
}
@keyframes spin-pulse {
  0% { transform: scale(1) rotate(0deg); opacity: 0.8; }
  50% { transform: scale(1.5) rotate(180deg); opacity: 1; background-color: var(--color-navy); }
  100% { transform: scale(1) rotate(360deg); opacity: 0; }
}

/* Admin Edit Buttons & UI */
.admin-only-btn {
  display: none;
  background: #28a745;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.admin-only-btn:hover {
  background: #218838;
}

.admin-mode .admin-only-btn {
  display: inline-block;
}

.admin-mode .admin-note-actions {
  display: flex !important;
}

.admin-note-actions {
  display: none;
  position: absolute;
  top: 15px;
  right: 15px;
  gap: 10px;
  z-index: 5;
}

.admin-mode .sidebar-left [id^="block-"],
.admin-mode .sidebar-right [id^="block-"] {
  padding-right: 55px;
}

.admin-mode [id^="block-"]:hover, .admin-mode .note-body:hover {
  outline: 2px dashed var(--color-dusty-blue);
  outline-offset: 4px;
}

.admin-edit-btn {
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
  background: var(--color-navy);
  color: var(--color-white);
  border: none;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  z-index: 10;
  font-size: 0.75rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.admin-edit-btn:hover {
  background: var(--color-steel-blue);
}

/* Hide Edit btn by default in admin mode, show only on parent hover */
.admin-mode [id^="block-"]:hover .admin-edit-btn,
.admin-mode .note-body:hover .admin-edit-btn {
  display: block;
}

/* Empty content blocks: give a clear, always-editable drop zone in admin mode
   so the hover-revealed Edit button is easy to find (otherwise the block is a
   sliver and the button is nearly unreachable) */
.admin-mode [id^="block-"].is-empty-block {
  min-height: 80px;
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-mode [id^="block-"].is-empty-block .admin-edit-btn {
  display: block;   /* always visible for empty blocks, no hover needed */
}
.empty-block-hint {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 0.9rem;
  text-align: center;
  margin: 0;
  padding: 0 1rem;
}
/* When not logged in, an empty block should take no space / show nothing */
body:not(.admin-mode) [id^="block-"].is-empty-block .empty-block-hint {
  display: none;
}

.admin-mode [id^="block-"]:hover, .admin-mode .note-body:hover {
  outline: 2px dashed var(--color-dusty-blue);
  outline-offset: 4px;
}

/* Ensure Editor fills the dashed box entirely */
.admin-edit-wrapper {
  width: 100% !important;
  display: block !important;
}
.admin-edit-wrapper .editor-toolbar,
.admin-edit-wrapper .CodeMirror {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}
.admin-edit-wrapper .CodeMirror {
  min-height: 150px;
}

/* EasyMDE Actions */
.editor-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.save-btn, .cancel-btn {
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}
.save-btn { background: #28a745; color: white; }
.save-btn:hover { background: #218838; }
.cancel-btn { background: #dc3545; color: white; }
.cancel-btn:hover { background: #c82333; }

/* Modal Styles */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(5px);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}
.modal-content {
  background: var(--color-white);
  padding: 2rem;
  border-radius: var(--radius);
  width: 90%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.modal-content h3 {
  color: var(--color-navy);
  margin-bottom: 0.5rem;
}
.modal-content input {
  padding: 12px;
  border: 1px solid var(--color-light-blue);
  border-radius: 4px;
  font-size: 1rem;
}
.modal-content input:focus {
  outline: none;
  border-color: var(--color-steel-blue);
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 1rem;
}
.modal-actions button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}
#do-login-btn { background: var(--color-navy); color: var(--color-white); }
#close-modal-btn { background: var(--color-light-blue); color: var(--color-text-main); }

/* Cat Secret Modal */
.cat-secret-content {
  max-width: 500px !important;
  position: relative;
  text-align: center;
  padding-top: 2.5rem !important;
}

.cat-secret-image-wrapper {
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-light-blue), var(--color-dusty-blue));
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cat-secret-image-wrapper img {
  width: 100%;
  max-height: 350px;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.cat-secret-image-wrapper img:hover {
  transform: scale(1.02);
}

.cat-chat-toggle {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  background: var(--color-white);
  border: none;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 10;
}

.cat-chat-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.cat-chat-toggle:active {
  transform: scale(0.95);
}

.cat-chat-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ff4757;
  color: white;
  font-size: 0.65rem;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  font-weight: 700;
  border: 2px solid var(--color-white);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cat-chat-count:not(:empty) {
  opacity: 1;
}

.cat-secret-image-wrapper img[src=""] {
  display: none;
}

.cat-secret-text {
  text-align: left;
  padding: 0.5rem 0;
  min-height: 2rem;
}

/* Cat Comments Modal */
.cat-comments-modal-content {
  max-width: 450px !important;
  min-height: 500px;
  display: flex !important;
  flex-direction: column;
  padding-top: 2.5rem !important;
}

.cat-comments-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.cat-comments-title {
  font-size: 1.1rem;
  color: var(--color-navy);
  margin-bottom: 1rem;
  font-weight: 700;
  text-align: center;
}

.cat-comments-list {
  flex: 1;
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding-right: 8px;
}

.cat-comments-list::-webkit-scrollbar {
  width: 4px;
}
.cat-comments-list::-webkit-scrollbar-thumb {
  background: var(--color-light-blue);
  border-radius: 4px;
}

.cat-comment-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.cat-comment-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-dusty-blue), var(--color-navy));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
  text-transform: uppercase;
}

.cat-comment-bubble {
  background: var(--color-bg);
  border: 1px solid var(--color-light-blue);
  border-radius: 10px 10px 10px 2px;
  padding: 8px 12px;
  flex: 1;
  min-width: 0;
}

.cat-comment-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-navy);
}

.cat-comment-time {
  font-size: 0.6rem;
  color: var(--color-text-muted);
  margin-left: 6px;
  font-weight: 400;
}

.cat-comment-msg {
  font-size: 0.82rem;
  color: var(--color-text-main);
  margin-top: 2px;
  word-break: break-word;
}

.cat-comment-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cat-comment-form input,
.cat-comment-form textarea {
  padding: 10px 12px;
  border: 1px solid var(--color-light-blue);
  border-radius: 8px;
  font-size: 0.85rem;
  font-family: inherit;
  resize: none;
  transition: border-color 0.2s ease;
}

.cat-comment-form input:focus,
.cat-comment-form textarea:focus {
  outline: none;
  border-color: var(--color-steel-blue);
}

#cat-comment-submit {
  align-self: flex-end;
  padding: 8px 20px;
  background: var(--color-navy);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

#cat-comment-submit:hover {
  background: var(--color-steel-blue);
  transform: translateY(-1px);
}

#cat-comment-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.cat-comment-empty {
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  padding: 1rem 0;
  font-style: italic;
}

/* Markdown styling cleanup */
/* Heading hierarchy — clear size/weight steps like HackMD's rendered view */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    color: var(--color-navy);
    line-height: 1.3;
    font-weight: 700;
}
.markdown-body h1 {           /* # Title */
    font-size: 2rem;
    margin: 1.6rem 0 0.9rem;
    padding-bottom: 0.35em;
    border-bottom: 2px solid var(--border-color);
}
.markdown-body h2 {           /* ## Subtitle 1 */
    font-size: 1.55rem;
    margin: 1.5rem 0 0.7rem;
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--border-color);
}
.markdown-body h3 {           /* ### Subtitle 2 */
    font-size: 1.25rem;
    margin: 1.3rem 0 0.5rem;
}
.markdown-body h4 {
    font-size: 1.05rem;
    margin: 1.1rem 0 0.45rem;
}
.markdown-body h5,
.markdown-body h6 {
    font-size: 0.92rem;
    font-weight: 600;
    margin: 1rem 0 0.4rem;
    color: var(--color-text-muted, var(--color-navy));
}
.markdown-body h1:first-child,
.markdown-body h2:first-child,
.markdown-body h3:first-child {
    margin-top: 0;
}
.markdown-body p {
    margin-bottom: 1rem;
}
.markdown-body ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.markdown-body ol {
    list-style: decimal;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.markdown-body li {
    margin-bottom: 0.4rem;
}

/* Fenced code blocks (highlight.js github-dark) */
.markdown-body pre {
  margin: 1rem 0;
  padding: 0;
  border-radius: 8px;
  overflow: auto;
  border: 1px solid var(--border-color);
}
.markdown-body pre code.hljs {
  display: block;
  padding: 1rem 1.2rem;
  border-radius: 8px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.55;
}
/* Inline code (outside of pre) */
.markdown-body :not(pre) > code {
  background: var(--color-light-blue);
  color: var(--color-navy);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
}

/* ── HackMD-style callouts (`> [!NOTE]`, `:::info`) & spoilers (`:::spoiler`) ── */
.md-callout {
  --callout-accent: var(--color-steel-blue);
  --callout-tint: rgba(70, 130, 180, 0.1);
  margin: 1.1rem 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--callout-accent);
  border-radius: 6px;
  background: var(--callout-tint);
}
.md-callout-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  color: var(--callout-accent);
  margin-bottom: 0.35rem;
  line-height: 1.3;
}
.md-callout-body > :first-child { margin-top: 0; }
.md-callout-body > :last-child { margin-bottom: 0; }

.md-callout-note      { --callout-accent: #4682b4; --callout-tint: rgba(70, 130, 180, 0.10); }
.md-callout-tip,
.md-callout-success   { --callout-accent: #2e9e5b; --callout-tint: rgba(46, 158, 91, 0.12); }
.md-callout-info      { --callout-accent: #3a86c8; --callout-tint: rgba(58, 134, 200, 0.12); }
.md-callout-important { --callout-accent: #8250df; --callout-tint: rgba(130, 80, 223, 0.12); }
.md-callout-warning   { --callout-accent: #c9971c; --callout-tint: rgba(201, 151, 28, 0.14); }
.md-callout-caution,
.md-callout-danger    { --callout-accent: #d1414b; --callout-tint: rgba(209, 65, 75, 0.12); }

/* Spoiler = collapsible details block */
.md-spoiler {
  margin: 1.1rem 0;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--color-light-blue);
  overflow: hidden;
}
.md-spoiler > summary {
  cursor: pointer;
  padding: 0.6rem 0.9rem;
  font-weight: 600;
  color: var(--color-navy);
  list-style: none;
  user-select: none;
}
.md-spoiler > summary::-webkit-details-marker { display: none; }
.md-spoiler > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 0.5rem;
  transition: transform 0.15s ease;
}
.md-spoiler[open] > summary::before { transform: rotate(90deg); }
.md-spoiler-body {
  padding: 0.2rem 0.9rem 0.75rem;
  background: var(--color-white);
}
.md-spoiler-body > :first-child { margin-top: 0; }
.md-spoiler-body > :last-child { margin-bottom: 0; }

/* Inline spoiler: ||hidden text|| — covered until hover / focus / click */
.md-inline-spoiler {
  background: #3a3f4b;
  color: transparent;
  border-radius: 3px;
  padding: 0 0.25em;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
}
.md-inline-spoiler:hover,
.md-inline-spoiler:focus,
.md-inline-spoiler.revealed {
  background: var(--color-light-blue);
  color: var(--color-text-main);
  user-select: text;
}
[data-theme="dark"] .md-inline-spoiler { background: #5a6172; }

/* Dark theme: lift tint alpha so callouts read on the dark canvas */
[data-theme="dark"] .md-callout      { --callout-tint: rgba(70, 130, 180, 0.16); }
[data-theme="dark"] .md-callout-note      { --callout-accent: #7fb2e0; --callout-tint: rgba(70, 130, 180, 0.16); }
[data-theme="dark"] .md-callout-tip,
[data-theme="dark"] .md-callout-success   { --callout-accent: #5fce8a; --callout-tint: rgba(46, 158, 91, 0.18); }
[data-theme="dark"] .md-callout-info      { --callout-accent: #6fb2e8; --callout-tint: rgba(58, 134, 200, 0.18); }
[data-theme="dark"] .md-callout-important { --callout-accent: #b18cf0; --callout-tint: rgba(130, 80, 223, 0.20); }
[data-theme="dark"] .md-callout-warning   { --callout-accent: #e6bf5a; --callout-tint: rgba(201, 151, 28, 0.20); }
[data-theme="dark"] .md-callout-caution,
[data-theme="dark"] .md-callout-danger    { --callout-accent: #ef7a82; --callout-tint: rgba(209, 65, 75, 0.20); }

/* ══════════════════════════════════════════════════════════════════════════
   MDX COMPONENT LAYER — <Callout>, <Tabs>, <Quiz>, … plus KaTeX math.
   Markup comes from MDX_COMPONENTS in script.js. Everything here is driven by
   the existing colour custom properties so both themes come along for free.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Math (KaTeX) ─────────────────────────────────────────────────────────── */
.md-math-display {
  margin: 1.25rem 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.25rem 0;
  text-align: center;
}
.markdown-body .katex { font-size: 1.05em; }
.md-math-display .katex-display { margin: 0; }
/* Long equations scroll inside their own box instead of widening the page */
.md-math-display > .katex-display > .katex { white-space: nowrap; }
.md-math-raw {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(209, 65, 75, 0.12);
  color: #d1414b;
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.9em;
}
[data-theme="dark"] .md-math-raw { background: rgba(209, 65, 75, 0.2); color: #ef7a82; }

/* ── <Tabs> / <Tab> ───────────────────────────────────────────────────────── */
.mdx-tabs {
  margin: 1.4rem 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-white);
}
.mdx-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  background: var(--color-light-blue);
  padding: 4px 4px 0;
}
.mdx-tab-btn {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.5rem 0.95rem;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.mdx-tab-btn:hover { color: var(--color-navy); background: rgba(255, 255, 255, 0.55); }
.mdx-tab-btn.active { background: var(--color-white); color: var(--color-navy); }
.mdx-tab-pane { display: none; padding: 1rem 1.1rem; }
.mdx-tab-pane.active { display: block; }
.mdx-tab-pane > :first-child { margin-top: 0; }
.mdx-tab-pane > :last-child { margin-bottom: 0; }

/* ── <Accordion> / <Solution> ─────────────────────────────────────────────── */
.mdx-accordion,
.mdx-solution {
  margin: 1.1rem 0;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--color-white);
  overflow: hidden;
}
.mdx-accordion > summary,
.mdx-solution > summary {
  cursor: pointer;
  padding: 0.65rem 0.95rem;
  font-weight: 600;
  color: var(--color-navy);
  background: var(--color-light-blue);
  list-style: none;
  user-select: none;
}
.mdx-accordion > summary::-webkit-details-marker,
.mdx-solution > summary::-webkit-details-marker { display: none; }
.mdx-accordion > summary::before,
.mdx-solution > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 0.5rem;
  transition: transform 0.15s ease;
}
.mdx-accordion[open] > summary::before,
.mdx-solution[open] > summary::before { transform: rotate(90deg); }
.mdx-accordion-body,
.mdx-solution-body { padding: 0.85rem 0.95rem; }
.mdx-accordion-body > :first-child,
.mdx-solution-body > :first-child { margin-top: 0; }
.mdx-accordion-body > :last-child,
.mdx-solution-body > :last-child { margin-bottom: 0; }

/* ── <Grid> / <Card> / <Columns> ──────────────────────────────────────────── */
.mdx-grid {
  display: grid;
  gap: 0.9rem;
  margin: 1.3rem 0;
}
.mdx-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin: 1.3rem 0;
}
.mdx-column { flex: 1; min-width: 220px; }
.mdx-column > :first-child { margin-top: 0; }

.mdx-card {
  display: block;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--color-white);
  padding: 1rem 1.05rem;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.mdx-card.is-link:hover {
  transform: translateY(-3px);
  border-color: var(--color-steel-blue);
  box-shadow: 0 8px 22px rgba(26, 42, 108, 0.12);
}
.mdx-card-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.mdx-card-icon { font-size: 1.25rem; line-height: 1; }
.mdx-card-title { font-weight: 700; color: var(--color-navy); }
.mdx-card-body { font-size: 0.94rem; color: var(--color-text-muted); }
.mdx-card-body > :first-child { margin-top: 0; }
.mdx-card-body > :last-child { margin-bottom: 0; }

/* ── <Terminal> ───────────────────────────────────────────────────────────── */
.mdx-terminal {
  margin: 1.3rem 0;
  border-radius: 10px;
  overflow: hidden;
  background: #1e1e1e;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}
.mdx-term-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0.5rem 0.8rem;
  background: #323233;
}
.mdx-term-title {
  margin-left: 0.5rem;
  color: #cfcfcf;
  font-size: 0.78rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.mdx-term-body {
  margin: 0;
  padding: 0.85rem 1rem;
  background: #1e1e1e;
  color: #d4d4d4;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.65;
  overflow-x: auto;
}
.mdx-term-line { display: block; white-space: pre; }
.mdx-term-prompt { color: #4ec9b0; font-weight: 600; user-select: none; }
.mdx-term-cmd { color: #f5f5f5; }
.mdx-term-out { color: #9aa0a6; }

/* ── <Diff> ───────────────────────────────────────────────────────────────── */
.mdx-diff {
  margin: 1.3rem 0;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}
.mdx-diff pre {
  margin: 0;
  padding: 0.7rem 0;
  background: var(--color-white);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.84rem;
  line-height: 1.6;
  overflow-x: auto;
}
.mdx-diff-line { display: block; white-space: pre; padding: 0 0.9rem; }
.mdx-diff-add { background: rgba(46, 158, 91, 0.14); color: #1f7a45; }
.mdx-diff-del { background: rgba(209, 65, 75, 0.13); color: #b3323b; }
.mdx-diff-ctx { color: var(--color-text-muted); }

/* ── Markdown tables ──────────────────────────────────────────────────────────
   width:auto + table-layout:auto lets columns size to their own text instead of
   being forced into equal shares. max-width caps it at the column, and the
   wrapper (added by enhanceMarkdownTables) scrolls anything wider than that
   rather than stretching the page. */
.md-table-wrap {
  margin: 1.3rem 0;
  overflow-x: auto;
  max-width: 100%;
}
.markdown-body table {
  width: auto;
  max-width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  border: 1px solid var(--border-color);
  font-size: 0.92rem;
  background: var(--color-white);
}
.markdown-body th,
.markdown-body td {
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--border-color);
  text-align: left;
  vertical-align: top;
  /* Wrap long prose, but never split a word mid-way */
  overflow-wrap: break-word;
  word-break: normal;
}
.markdown-body th {
  background: var(--color-light-blue);
  color: var(--color-navy);
  font-weight: 700;
  white-space: nowrap;   /* headers stay on one line so columns read cleanly */
}
.markdown-body tbody tr:nth-child(even) > td {
  background: rgba(99, 130, 182, 0.05);
}
.markdown-body table code { white-space: nowrap; }

[data-theme="dark"] .markdown-body tbody tr:nth-child(even) > td {
  background: rgba(255, 255, 255, 0.04);
}

/* ── <DataTable> ──────────────────────────────────────────────────────────── */
.mdx-datatable { margin: 1.3rem 0; overflow-x: auto; }
.mdx-datatable table { margin: 0; }
.mdx-th-sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 1.4rem !important;
}
.mdx-th-sortable::after {
  content: '⇅';
  position: absolute;
  right: 0.5rem;
  opacity: 0.35;
  font-size: 0.8em;
}
.mdx-th-sortable.sorted-asc::after  { content: '↑'; opacity: 1; }
.mdx-th-sortable.sorted-desc::after { content: '↓'; opacity: 1; }
.mdx-th-sortable:hover { color: var(--color-steel-blue); }

/* ── <ProgressBar> ────────────────────────────────────────────────────────── */
.mdx-progress { margin: 1.1rem 0; }
.mdx-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
}
.mdx-progress-track {
  height: 10px;
  border-radius: 999px;
  background: var(--color-light-blue);
  overflow: hidden;
}
.mdx-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-steel-blue), var(--color-navy));
  transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ── <YouTube> click-to-load facade ───────────────────────────────────────── */
.mdx-youtube {
  position: relative;
  margin: 1.4rem 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: #000;
}
.mdx-yt-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition), opacity var(--transition);
}
.mdx-youtube:hover .mdx-yt-thumb { transform: scale(1.03); opacity: 0.85; }
.mdx-yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 1.6rem;
  padding-left: 5px;
  transition: background var(--transition), transform var(--transition);
}
.mdx-youtube:hover .mdx-yt-play { background: #e62117; transform: translate(-50%, -50%) scale(1.08); }
.mdx-yt-title {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.6rem 1rem 0.7rem;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
}
.mdx-youtube.is-playing { cursor: default; }
.mdx-yt-frame { width: 100%; height: 100%; border: 0; display: block; }

/* ── <Mermaid> ────────────────────────────────────────────────────────────── */
.mdx-mermaid {
  margin: 1.4rem 0;
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--color-white);
  overflow-x: auto;
  text-align: center;
}
.mdx-mermaid .mermaid svg { max-width: 100%; height: auto; }
.mdx-mermaid .mermaid-src {
  margin: 0;
  text-align: left;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  white-space: pre-wrap;
}

/* ── <Figure> ─────────────────────────────────────────────────────────────── */
.mdx-figure { margin: 1.5rem 0; text-align: center; }
.mdx-figure img { max-width: 100%; border-radius: var(--radius); cursor: zoom-in; }
.mdx-figure figcaption {
  margin-top: 0.55rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-style: italic;
}
.mdx-figure figcaption > p { margin: 0; }

/* ── <Exercise> ───────────────────────────────────────────────────────────── */
.mdx-exercise {
  margin: 1.4rem 0;
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--color-steel-blue);
  border-radius: 8px;
  background: rgba(70, 130, 180, 0.06);
  overflow: hidden;
}
.mdx-exercise-head {
  padding: 0.6rem 0.95rem;
  font-weight: 700;
  color: var(--color-navy);
  background: rgba(70, 130, 180, 0.1);
}
.mdx-exercise-body { padding: 0.85rem 0.95rem; }
.mdx-exercise-body > :first-child { margin-top: 0; }
.mdx-exercise-body > :last-child { margin-bottom: 0; }

/* ── <Quiz> ───────────────────────────────────────────────────────────────── */
.mdx-quiz {
  margin: 1.4rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--color-white);
}
.mdx-quiz-q { font-weight: 700; color: var(--color-navy); margin-bottom: 0.8rem; }
.mdx-quiz-opts { display: flex; flex-direction: column; gap: 0.5rem; }
.mdx-quiz-opt {
  text-align: left;
  font: inherit;
  font-size: 0.94rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text-main);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.mdx-quiz-opt:hover { border-color: var(--color-steel-blue); transform: translateX(3px); }
.mdx-quiz.answered .mdx-quiz-opt { cursor: default; transform: none; }
.mdx-quiz.answered .mdx-quiz-opt.is-correct {
  border-color: #2e9e5b;
  background: rgba(46, 158, 91, 0.12);
}
.mdx-quiz.answered .mdx-quiz-opt.picked-wrong {
  border-color: #d1414b;
  background: rgba(209, 65, 75, 0.12);
}
.mdx-quiz.answered .mdx-quiz-opt.is-correct::after { content: ' ✓'; font-weight: 700; color: #2e9e5b; }
.mdx-quiz.answered .mdx-quiz-opt.picked-wrong::after { content: ' ✕'; font-weight: 700; color: #d1414b; }
.mdx-quiz-explain {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border-color);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* ── Inline: <Badge> / <Highlight> / <Kbd> ────────────────────────────────── */
.mdx-badge {
  display: inline-block;
  padding: 0.12em 0.55em;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 700;
  line-height: 1.6;
  vertical-align: middle;
  border: 1px solid transparent;
}
.mdx-highlight { border-radius: 3px; padding: 0.05em 0.25em; background: none; }
.mdx-kbd {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.82em;
  padding: 0.15em 0.45em;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  border-bottom-width: 2px;
  background: var(--color-light-blue);
  color: var(--color-navy);
  white-space: nowrap;
}

.mdx-badge.mdx-tone-blue   { background: rgba(58, 134, 200, 0.15); color: #2c6ca3; border-color: rgba(58, 134, 200, 0.35); }
.mdx-badge.mdx-tone-green  { background: rgba(46, 158, 91, 0.15);  color: #1f7a45; border-color: rgba(46, 158, 91, 0.35); }
.mdx-badge.mdx-tone-red    { background: rgba(209, 65, 75, 0.15);  color: #b3323b; border-color: rgba(209, 65, 75, 0.35); }
.mdx-badge.mdx-tone-yellow { background: rgba(201, 151, 28, 0.18); color: #8a6712; border-color: rgba(201, 151, 28, 0.38); }
.mdx-badge.mdx-tone-purple { background: rgba(130, 80, 223, 0.15); color: #6a3fbf; border-color: rgba(130, 80, 223, 0.35); }
.mdx-badge.mdx-tone-gray   { background: rgba(71, 85, 105, 0.13);  color: #475569; border-color: rgba(71, 85, 105, 0.3); }

.mdx-highlight.mdx-tone-blue   { background: rgba(58, 134, 200, 0.28); }
.mdx-highlight.mdx-tone-green  { background: rgba(46, 158, 91, 0.3); }
.mdx-highlight.mdx-tone-red    { background: rgba(209, 65, 75, 0.26); }
.mdx-highlight.mdx-tone-yellow { background: rgba(255, 214, 79, 0.55); }
.mdx-highlight.mdx-tone-purple { background: rgba(130, 80, 223, 0.24); }
.mdx-highlight.mdx-tone-gray   { background: rgba(71, 85, 105, 0.2); }

/* ── Dark theme ───────────────────────────────────────────────────────────── */
[data-theme="dark"] .mdx-tabs,
[data-theme="dark"] .mdx-accordion,
[data-theme="dark"] .mdx-solution,
[data-theme="dark"] .mdx-card,
[data-theme="dark"] .mdx-quiz,
[data-theme="dark"] .mdx-mermaid { background: rgba(255, 255, 255, 0.04); }

/* Only backgrounds are overridden here. The dark palette INVERTS
   --color-light-blue to #1b2d44 (a dark surface), so setting text to it paints
   dark-on-dark. The base rules already use --color-navy, which the dark palette
   maps to #7eb5f5 — bright and legible — so they are left to apply. */
[data-theme="dark"] .mdx-tab-bar { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .mdx-tab-btn:hover { background: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .mdx-tab-btn.active { background: rgba(255, 255, 255, 0.12); }

[data-theme="dark"] .mdx-accordion > summary,
[data-theme="dark"] .mdx-solution > summary { background: rgba(255, 255, 255, 0.07); }

/* Card titles carry the scanning weight in a grid, so lift them above the
   shared heading blue */
[data-theme="dark"] .mdx-card-title { color: #a9d1ff; }
[data-theme="dark"] .mdx-card.is-link:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4); }

[data-theme="dark"] .mdx-diff pre { background: rgba(255, 255, 255, 0.03); }
[data-theme="dark"] .mdx-diff-add { background: rgba(46, 158, 91, 0.2);  color: #5fce8a; }
[data-theme="dark"] .mdx-diff-del { background: rgba(209, 65, 75, 0.2);  color: #ef7a82; }

[data-theme="dark"] .mdx-progress-track { background: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .mdx-exercise { background: rgba(70, 130, 180, 0.12); }
[data-theme="dark"] .mdx-exercise-head { background: rgba(70, 130, 180, 0.18); }
[data-theme="dark"] .mdx-quiz-opt { background: rgba(255, 255, 255, 0.05); }
[data-theme="dark"] .mdx-kbd { background: rgba(255, 255, 255, 0.1); }

[data-theme="dark"] .mdx-badge.mdx-tone-blue   { color: #8dc2ee; }
[data-theme="dark"] .mdx-badge.mdx-tone-green  { color: #5fce8a; }
[data-theme="dark"] .mdx-badge.mdx-tone-red    { color: #ef7a82; }
[data-theme="dark"] .mdx-badge.mdx-tone-yellow { color: #e6bf5a; }
[data-theme="dark"] .mdx-badge.mdx-tone-purple { color: #b18cf0; }
[data-theme="dark"] .mdx-badge.mdx-tone-gray   { color: #b3bccb; }
[data-theme="dark"] .mdx-highlight { color: #f2f5fa; }

/* Narrow screens: collapse multi-column layouts */
@media (max-width: 768px) {
  .mdx-grid { grid-template-columns: 1fr !important; }
  .mdx-columns { flex-direction: column; }
}

/* Save confirmation — saving commits to git, so the change is real but not
   public until the deploy finishes */
.deploy-toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translate(-50%, 1.5rem);
  z-index: 9999;
  max-width: min(90vw, 460px);
  padding: 0.8rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--color-steel-blue);
  background: var(--color-white);
  color: var(--color-text-main);
  font-size: 0.9rem;
  line-height: 1.45;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.deploy-toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.deploy-toast strong { color: var(--color-navy); }

@media (prefers-reduced-motion: reduce) {
  .deploy-toast { transition: opacity 0.25s ease; }
}

/* Notes search box */
.search-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-white);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 0.5rem 1rem;
  margin: 0 0 1.5rem;
  color: var(--color-text-muted);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.search-box:focus-within {
  border-color: var(--color-steel-blue);
  box-shadow: 0 0 0 3px rgba(70, 130, 180, 0.12);
}
.search-box svg { flex-shrink: 0; opacity: 0.7; }
.search-box input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.95rem;
  color: var(--color-text-main);
  font-family: inherit;
}
.search-box input::placeholder { color: var(--color-text-muted); }

/* PDF Preview Card */
.pdf-preview-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f0f4fa 0%, #e8edf5 100%);
  border: 1px solid var(--color-light-blue);
  border-radius: 8px;
  margin: 1rem 0;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none !important;
  color: var(--color-text-main) !important;
}

.pdf-preview-card:hover {
  border-color: var(--color-steel-blue);
  box-shadow: 0 4px 12px rgba(70, 130, 180, 0.15);
  transform: translateY(-1px);
}

.pdf-preview-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #dc3545, #c82333);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.5px;
}

.pdf-preview-info {
  flex: 1;
  min-width: 0;
}

.pdf-preview-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdf-preview-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Clickable inline images in markdown */
.markdown-body img {
  cursor: pointer;
  border-radius: 8px;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  max-width: 100%;
}

.markdown-body img:hover {
  box-shadow: 0 4px 16px rgba(26, 42, 108, 0.2);
  transform: scale(1.01);
}

/* Lightbox Overlay */
.lightbox-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 2000;
  justify-content: center;
  align-items: center;
  animation: lightbox-fade-in 0.3s ease;
}

.lightbox-overlay.active {
  display: flex;
}

@keyframes lightbox-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lightbox-close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2.5rem;
  color: white;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 2001;
  line-height: 1;
  transition: transform 0.2s ease;
}

.lightbox-close-btn:hover {
  transform: scale(1.2) rotate(90deg);
}

.lightbox-content {
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lightbox-content img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  object-fit: contain;
}

.lightbox-content iframe {
  width: 80vw;
  height: 85vh;
  border: none;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  background: white;
}

/* =============================================
   INTERACTIVE CAT WIDGET
   ============================================= */
.cat-widget {
  position: fixed;
  bottom: 74px; /* leaves room for the language toggle underneath */
  right: 25px;
  z-index: 999;
  cursor: pointer;
  transition: transform 0.3s ease;
  user-select: none;
}

.cat-widget:hover {
  transform: scale(1.1);
}

.cat-widget.pet {
  animation: cat-pet-bounce 0.4s ease;
}

.cat-widget.surprised {
  animation: cat-surprised 0.5s ease;
}

@keyframes cat-pet-bounce {
  0% { transform: scale(1.1); }
  30% { transform: scale(1.25) rotate(-5deg); }
  60% { transform: scale(1.15) rotate(3deg); }
  100% { transform: scale(1.1); }
}

@keyframes cat-surprised {
  0% { transform: scale(1.1); }
  20% { transform: scale(1.3) translateY(-8px); }
  50% { transform: scale(1.2) translateY(-4px); }
  100% { transform: scale(1.1) translateY(0); }
}

/* Cat Body */
.cat-body {
  width: 60px;
  height: 55px;
  position: relative;
}

/* Ears */
.cat-ears {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  display: flex;
  justify-content: space-between;
}

.cat-ear {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 14px solid var(--color-navy);
  transition: transform 0.3s ease;
}

.cat-ear.left { transform: rotate(-8deg); }
.cat-ear.right { transform: rotate(8deg); }
.cat-widget:hover .cat-ear.left { transform: rotate(-15deg); }
.cat-widget:hover .cat-ear.right { transform: rotate(15deg); }

/* Face */
.cat-face {
  width: 48px;
  height: 40px;
  background: var(--color-navy);
  border-radius: 50% 50% 45% 45%;
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  overflow: visible;
}

/* Eyes */
.cat-eyes {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding-top: 12px;
}

.cat-eye {
  width: 7px;
  height: 7px;
  background: var(--color-light-blue);
  border-radius: 50%;
  position: relative;
  animation: cat-blink 4s infinite;
  transition: all 0.2s ease;
}

.cat-eye::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  background: white;
  border-radius: 50%;
  top: 1px;
  left: 1px;
}

.cat-widget.surprised .cat-eye {
  width: 10px;
  height: 10px;
  background: #ffd700;
}

.cat-widget.sleeping .cat-eye {
  width: 8px;
  height: 2px;
  border-radius: 0 0 8px 8px;
  background: var(--color-light-blue);
}

@keyframes cat-blink {
  0%, 90%, 100% { height: 7px; border-radius: 50%; }
  95% { height: 1px; border-radius: 4px; }
}

/* Nose */
.cat-nose {
  width: 5px;
  height: 4px;
  background: #f0a0b0;
  border-radius: 50% 50% 40% 40%;
  margin: 3px auto 0;
}

/* Mouth */
.cat-mouth {
  width: 10px;
  height: 5px;
  border-bottom: 2px solid var(--color-dusty-blue);
  border-radius: 0 0 50% 50%;
  margin: 0 auto;
}

.cat-widget.pet .cat-mouth {
  border-bottom-color: #f0a0b0;
  width: 14px;
}

/* Whiskers */
.cat-whiskers {
  position: absolute;
  top: 22px;
  width: 18px;
  height: 0;
  border-top: 1.5px solid var(--color-dusty-blue);
}

.cat-whiskers.left {
  left: -12px;
  transform: rotate(-5deg);
}

.cat-whiskers.right {
  right: -12px;
  transform: rotate(5deg);
}

.cat-whiskers::before,
.cat-whiskers::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 0;
  border-top: 1.5px solid var(--color-dusty-blue);
  left: 0;
}

.cat-whiskers.left::before { top: -5px; transform: rotate(-10deg); }
.cat-whiskers.left::after { top: 5px; transform: rotate(10deg); }
.cat-whiskers.right::before { top: -5px; transform: rotate(10deg); }
.cat-whiskers.right::after { top: 5px; transform: rotate(-10deg); }

/* Tail */
.cat-tail {
  position: absolute;
  bottom: 5px;
  right: -10px;
  width: 28px;
  height: 18px;
  border: 3px solid var(--color-navy);
  border-color: var(--color-navy) var(--color-navy) transparent transparent;
  border-radius: 0 18px 0 0;
  animation: tail-wag 2s ease-in-out infinite;
}

@keyframes tail-wag {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(15deg); }
}

.cat-widget:hover .cat-tail {
  animation-duration: 0.6s;
}

/* Speech Bubble */
.cat-speech {
  position: absolute;
  bottom: 75px;
  right: 10px;
  background: var(--color-white);
  color: var(--color-navy);
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(26, 42, 108, 0.15);
  opacity: 0;
  transform: translateY(5px) scale(0.9);
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 10;
}

.cat-speech.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.cat-speech::after {
  content: '';
  position: absolute;
  bottom: -6px;
  right: 20px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--color-white);
}

/* Floating Hearts */
.cat-hearts {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.cat-heart {
  position: absolute;
  font-size: 1rem;
  animation: heart-float 1.2s ease forwards;
  opacity: 0;
}

@keyframes heart-float {
  0% { opacity: 1; transform: translateY(0) scale(0.5); }
  50% { opacity: 1; transform: translateY(-25px) scale(1); }
  100% { opacity: 0; transform: translateY(-50px) scale(0.8); }
}

/* Sleeping Zzz */
.cat-zzz {
  position: absolute;
  top: -10px;
  right: -5px;
  font-size: 0.7rem;
  color: var(--color-dusty-blue);
  pointer-events: none;
  opacity: 0;
}

.cat-widget.sleeping .cat-zzz {
  animation: zzz-float 2s ease-in-out infinite;
}

@keyframes zzz-float {
  0% { opacity: 0; transform: translateY(0) scale(0.8); content: 'z'; }
  25% { opacity: 1; }
  50% { opacity: 1; transform: translateY(-12px) scale(1.1); }
  75% { opacity: 0.5; transform: translateY(-20px) scale(0.9); }
  100% { opacity: 0; transform: translateY(-28px) scale(0.7); }
}

/* Cat Hint Text */
.cat-hint {
  text-align: center;
  font-size: 0.6rem;
  color: var(--color-dusty-blue);
  opacity: 0;
  transition: opacity 0.4s ease;
  margin-top: 4px;
  letter-spacing: 0.3px;
  pointer-events: none;
}

.cat-widget:hover .cat-hint {
  opacity: 0.7;
}

/* Mobile Menu Toggle Button */
#mobile-menu-toggle {
  display: none;
  position: fixed;
  top: 1.25rem;
  left: 1.25rem;
  z-index: 1001; /* Above everything including drawer */
  background: var(--color-white);
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(26, 42, 108, 0.15);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  gap: 5px;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#mobile-menu-toggle .bar {
  width: 22px;
  height: 2.5px;
  background: var(--color-navy);
  border-radius: 2px;
  transition: all 0.3s ease;
}

#mobile-menu-toggle.active .bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
#mobile-menu-toggle.active .bar:nth-child(2) { opacity: 0; }
#mobile-menu-toggle.active .bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Sidebar Overlay */
/* Sidebar Close Button (inside drawers) */
.sidebar-close {
  display: none;
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--color-light-blue);
  color: var(--color-navy);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1002;
  transition: all 0.2s ease;
}

.sidebar-close:hover {
  background: var(--color-navy);
  color: var(--color-white);
}

/* Sidebar Overlays */
#sidebar-overlay, #sidebar-right-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(26, 42, 108, 0.4);
  backdrop-filter: blur(3px);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

#sidebar-overlay.active, #sidebar-right-overlay.active {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 1024px) {
  .app-container {
    grid-template-columns: 200px minmax(0, 1fr);
  }
  .sidebar-right {
    display: none;
  }
}

@media (max-width: 768px) {
  #mobile-menu-toggle { display: flex; }
  #mobile-menu-toggle.active { display: none; } /* Hide on open */

  .sidebar-close { display: block; }

  .app-container {
    display: block;
    padding-top: 4.5rem;
  }

  /* Shared Drawer Styles */
  .sidebar-left, .sidebar-right {
    position: fixed;
    top: 0;
    height: 100%;
    z-index: 1000;
    background: var(--color-white);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    padding: 3.5rem 1.5rem;
    display: block !important;
  }

  /* Left Drawer Specialization */
  .sidebar-left {
    left: 0;
    width: 280px;
    transform: translateX(-100%);
  }
  .sidebar-left.active { transform: translateX(0); }

  /* Right Drawer Specialization */
  .sidebar-right {
    right: 0;
    width: 280px;
    transform: translateX(100%);
  }
  .sidebar-right.active { transform: translateX(0); }

  .main-content {
    padding: 1.5rem;
    width: 100%;
  }

  .main-nav ul {
    flex-direction: column;
    overflow-x: visible;
  }

  .main-nav li {
    margin: 0.5rem 0;
    width: 100%;
  }

  /* Modal Responsiveness */
  .modal-content {
    width: 92%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem;
  }
  
  .cat-comments-modal-content {
    max-width: 92% !important;
  }
  
  /* Cat Widget Mobile Optimization */
  .cat-widget {
    bottom: 64px; /* language toggle sits below */
    right: 15px;
    transform: scale(0.85);
    transform-origin: bottom right;
  }
  
  /* Disable scaling on mobile as requested */
  .cat-widget:hover, .cat-widget:active, .cat-widget.clicked {
    transform: scale(0.85) !important;
  }
}

#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}

#easter-eggs-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 9999;
}

.easter-egg-star {
  position: fixed;
  pointer-events: none;
  font-size: 1.5rem;
  z-index: 9999;
  animation: star-glow-float 1s ease-out forwards;
}

@keyframes star-glow-float {
  0% { transform: scale(0.5) translateY(0); opacity: 1; }
  100% { transform: scale(1.5) translateY(-50px); opacity: 0; }
}

/* =============================================
   IDE-LIKE EDITOR (Admin Mode)
   ============================================= */

.ide-editor-wrapper {
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 6px 20px rgba(0,0,0,0.3);
  border: 1px solid #111;
  margin: 0.5rem 0 1rem;
  width: 100%;
}

/* macOS-style title bar */
.ide-titlebar {
  background: #3c3c3c;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  user-select: none;
}

.ide-dots {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-shrink: 0;
}

.ide-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
}
.ide-dot-red    { background: #ff5f57; }
.ide-dot-yellow { background: #ffbd2e; }
.ide-dot-green  { background: #28c840; }

/* File tabs */
.ide-tabs { display: flex; gap: 1px; min-width: 0; }

.ide-tab {
  background: #1e1e1e;
  color: #cccccc;
  padding: 4px 20px;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  border-top: 2px solid #007acc;
  border-right: 1px solid #333;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

/* Toolbar dark IDE style */
.ide-editor-wrapper .editor-toolbar {
  background: #252526 !important;
  border: none !important;
  border-bottom: 1px solid #3a3a3a !important;
  padding: 4px 8px !important;
}

.ide-editor-wrapper .editor-toolbar a,
.ide-editor-wrapper .editor-toolbar button {
  color: #bbb !important;
  border: none !important;
  border-radius: 4px !important;
}

.ide-editor-wrapper .editor-toolbar a:hover,
.ide-editor-wrapper .editor-toolbar button:hover,
.ide-editor-wrapper .editor-toolbar a.active,
.ide-editor-wrapper .editor-toolbar button.active {
  background: #3c3c3c !important;
  color: #fff !important;
}

.ide-editor-wrapper .editor-toolbar i.separator {
  border-left: 1px solid #555 !important;
  margin: 0 4px !important;
}

/* CodeMirror area */
.ide-editor-wrapper .CodeMirror {
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  border: none !important;
  padding: 0 !important;
}

.ide-editor-wrapper .admin-edit-wrapper .CodeMirror {
  min-height: 300px !important;
}

/* Line number gutter */
.ide-editor-wrapper .CodeMirror-gutters {
  background: #1e1e1e !important;
  border-right: 1px solid #333 !important;
}

.ide-editor-wrapper .CodeMirror-linenumber {
  color: #555 !important;
  font-size: 11px !important;
  min-width: 32px !important;
}

/* Cursor line highlight (Dracula provides this, ensure it shows) */
.ide-editor-wrapper .CodeMirror-activeline-background {
  background: rgba(255,255,255,0.04) !important;
}

/* Scrollbar inside editor */
.ide-editor-wrapper .CodeMirror-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.ide-editor-wrapper .CodeMirror-scroll::-webkit-scrollbar-track { background: #1e1e1e; }
.ide-editor-wrapper .CodeMirror-scroll::-webkit-scrollbar-thumb { background: #424242; border-radius: 5px; }
.ide-editor-wrapper .CodeMirror-scroll::-webkit-scrollbar-thumb:hover { background: #555; }

/* Status bar — VSCode blue */
.ide-statusbar {
  background: #007acc;
  color: rgba(255,255,255,0.9);
  padding: 2px 0;
  display: flex;
  align-items: center;
  font-size: 0.72rem;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.2px;
}

.ide-status-item {
  padding: 1px 12px;
  cursor: default;
  white-space: nowrap;
}

.ide-status-item:hover { background: rgba(255,255,255,0.15); }
.ide-status-item + .ide-status-item { border-left: 1px solid rgba(255,255,255,0.2); }

/* Action buttons strip */
.ide-editor-wrapper .editor-actions {
  background: #1e1e1e;
  padding: 10px 14px;
  display: flex;
  gap: 10px;
  border-top: 1px solid #333;
  margin: 0 !important;
}

.ide-editor-wrapper .save-btn {
  background: #007acc !important;
  color: #fff !important;
  border: none !important;
  padding: 6px 20px !important;
  border-radius: 4px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background 0.2s;
}
.ide-editor-wrapper .save-btn:hover { background: #1a8fe0 !important; }

.ide-editor-wrapper .cancel-btn {
  background: #3c3c3c !important;
  color: #ccc !important;
  border: 1px solid #555 !important;
  padding: 6px 20px !important;
  border-radius: 4px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all 0.2s;
}
.ide-editor-wrapper .cancel-btn:hover { background: #4c4c4c !important; color: #fff !important; }

/* Remove EasyMDE container default border/margin */
.ide-editor-wrapper .EasyMDEContainer {
  border: none !important;
  margin: 0 !important;
}

/* Split live-preview pane (HackMD-style) — themed "rendered page" surface */
.ide-editor-wrapper .editor-preview,
.ide-editor-wrapper .editor-preview-side {
  background: var(--color-bg) !important;
  color: var(--color-text-main) !important;
  padding: 1rem 1.4rem !important;
  border-left: 1px solid #333 !important;
  box-sizing: border-box;
}
.ide-editor-wrapper .editor-preview-side {
  border-top: none !important;
}
/* The renderer output is wrapped in .markdown-body so headings/callouts
   match the published page exactly */
.ide-editor-wrapper .editor-preview .markdown-body,
.ide-editor-wrapper .editor-preview-side .markdown-body {
  color: var(--color-text-main);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* =============================================
   DARK MODE
   ============================================= */

/* Smooth transition when toggling theme.

   Deliberately NOT `html.theme-transition *`. That put a five-property
   transition on every element, so the cost scaled with DOM size: a long note
   carries ~19k nodes (mostly KaTeX spans), which meant ~95k property
   transitions and several hundred ms of blocked main thread per toggle.
   Only page-level surfaces animate here; text colour comes along by
   inheritance from body. Browsers with the View Transitions API never reach
   this rule — initTheme() cross-fades one compositor snapshot instead, at a
   cost independent of element count. */
html.theme-transition,
html.theme-transition body,
html.theme-transition .sidebar-left,
html.theme-transition .sidebar-right,
html.theme-transition .main-content,
html.theme-transition .widget,
html.theme-transition .note-toc,
html.theme-transition .modal-content {
  transition:
    background-color 0.4s ease,
    color            0.3s ease,
    border-color     0.3s ease !important;
  transition-delay: 0s !important;
}

/* View Transitions path: one cross-fade of the whole page */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 0.35s; }
}

/* --- Dark palette (overrides :root variables) --- */
[data-theme="dark"] {
  --color-navy:       #7eb5f5;   /* was dark blue headings → light blue */
  --color-dusty-blue: #6a9fd8;
  --color-steel-blue: #58a6d0;
  --color-light-blue: #1b2d44;   /* was light blue borders → dark blue */
  --color-white:      #131e2d;   /* was white cards → dark surface */
  --color-bg:         #0c1420;   /* page background */
  --color-text-main:  #c8d8ea;
  --color-text-muted: #7a96b4;
  --border-color:     rgba(100,160,220,0.16);
}

/* Body colour-scheme hint for native controls */
[data-theme="dark"] body { color-scheme: dark; }

/* ── Element-level overrides for hardcoded colours ── */

/* PDF preview card gradient */
[data-theme="dark"] .pdf-preview-card {
  background: linear-gradient(135deg, #19293e 0%, #131f30 100%) !important;
  border-color: var(--color-light-blue) !important;
}

/* Native inputs / textareas */
[data-theme="dark"] input,
[data-theme="dark"] textarea {
  background-color: #18283c !important;
  color: var(--color-text-main) !important;
  border-color: var(--color-light-blue) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--color-text-muted) !important;
}

/* Cards */
[data-theme="dark"] .note-card {
  box-shadow: 0 4px 18px rgba(0,0,0,0.4);
}
[data-theme="dark"] .note-card:hover {
  box-shadow: 0 10px 32px rgba(0,0,0,0.6);
}

/* Modal shadow */
[data-theme="dark"] .modal-content {
  box-shadow: 0 12px 48px rgba(0,0,0,0.6);
}

/* Mobile drawers need an explicit bg in dark mode */
@media (max-width: 768px) {
  [data-theme="dark"] .sidebar-left,
  [data-theme="dark"] .sidebar-right {
    background: #101a28;
    box-shadow: 0 0 40px rgba(0,0,0,0.6);
  }
}

/* Nav active/hover pill in dark mode */
[data-theme="dark"] .main-nav a:hover,
[data-theme="dark"] .main-nav a.active {
  background-color: #1b2d44;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* Markdown inline code (scoped so it doesn't override highlight.js tokens) */
[data-theme="dark"] .markdown-body :not(pre) > code {
  background: #1b2d44;
  color: #a8d4f5;
}

/* Notes search box (dark) */
[data-theme="dark"] .search-box {
  background: #16243a;
}

/* Cat speech bubble */
[data-theme="dark"] .cat-speech {
  background: #1b2d44;
  color: var(--color-navy);
}
[data-theme="dark"] .cat-speech::after {
  border-top-color: #1b2d44;
}

/* Tag hover */
[data-theme="dark"] .tag:hover,
[data-theme="dark"] #block-tags.markdown-body > p a:hover {
  background-color: var(--color-steel-blue);
  border-color: var(--color-steel-blue);
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-light-blue); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-dusty-blue); }

/* Widget list links */
[data-theme="dark"] .widget-list a:hover { color: var(--color-navy); }

/* Section title underline */
[data-theme="dark"] .section-title::after { background-color: var(--color-steel-blue); }

/* =============================================
   THEME TOGGLE BUTTON
   ============================================= */

/* Dock that holds the theme + language toggles side by side */
.toggle-dock {
  position: fixed;
  bottom: 20px;
  left: 25px;
  z-index: 998;
  display: flex;
  align-items: center;
  gap: 10px;
}

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 13px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  user-select: none;
  font-family: inherit;

  /* Light mode look: deep navy */
  background: var(--color-navy);
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(26,42,108,0.3);

  transition:
    background  0.4s ease,
    color       0.3s ease,
    box-shadow  0.3s ease,
    transform   0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.theme-toggle:hover {
  transform: scale(1.06) translateY(-2px);
  box-shadow: 0 8px 28px rgba(26,42,108,0.4);
}

.theme-toggle:active { transform: scale(0.95); }

/* Dark mode look: warm amber/gold */
[data-theme="dark"] .theme-toggle {
  background: linear-gradient(135deg, #e8a020, #f5c842);
  color: #1a1000;
  box-shadow: 0 4px 18px rgba(230,160,30,0.4);
}
[data-theme="dark"] .theme-toggle:hover {
  box-shadow: 0 8px 28px rgba(230,160,30,0.55);
}

/* Icon container — stacks both SVGs */
.theme-toggle-icons {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.theme-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Light mode: moon visible, sun hidden */
.icon-moon { opacity: 1; transform: scale(1)   rotate(0deg);    }
.icon-sun  { opacity: 0; transform: scale(0.3) rotate(90deg);   }

/* Dark mode: sun visible, moon hidden */
[data-theme="dark"] .icon-moon { opacity: 0; transform: scale(0.3) rotate(-90deg); }
[data-theme="dark"] .icon-sun  { opacity: 1; transform: scale(1)   rotate(0deg);   }

.theme-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1;
}

/* Mobile: shrink to icon-only */
@media (max-width: 768px) {
  .theme-toggle { padding: 11px; gap: 0; }
  .theme-label  { display: none; }
}

/*
======================================================
  READING PROGRESS BAR
======================================================
*/
#reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  z-index: 1500;
  pointer-events: none;
}
#reading-progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--color-dusty-blue), var(--color-navy));
  border-radius: 0 2px 2px 0;
  transition: width 0.1s linear;
}

/*
======================================================
  COPY-CODE BUTTON
======================================================
*/
.code-block-wrap {
  position: relative;
}
.code-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  /* Hardcoded, not palette vars: this button sits on its own fixed dark
     background in BOTH themes, so it needs fixed light text. Using
     --color-light-blue / --color-white here inverted them to dark in dark mode
     and the label vanished (1.25:1 normal, 1.00:1 on hover). */
  color: #d6e4f0;
  background: rgba(20, 30, 45, 0.65);
  border: 1px solid rgba(150, 180, 220, 0.25);
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.code-block-wrap:hover .code-copy-btn,
.code-copy-btn:focus-visible {
  opacity: 1;
}
.code-copy-btn:hover {
  background: rgba(20, 30, 45, 0.9);
  color: #ffffff;
}
.code-copy-btn.copied {
  opacity: 1;
  color: #7ee2b8;
  border-color: rgba(126, 226, 184, 0.5);
}
/* Always visible on touch devices (no hover) */
@media (hover: none) {
  .code-copy-btn { opacity: 0.85; }
}

/*
======================================================
  NOTE TABLE OF CONTENTS
======================================================
*/
.note-toc {
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--color-steel-blue);
  border-radius: var(--radius);
  background: var(--color-white);
}
/* Title doubles as the whole-panel expander, so it is a <button> */
.note-toc-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 0.6rem;
  cursor: pointer;
  text-align: left;
}
.note-toc-title:hover { color: var(--color-steel-blue); }

.note-toc-caret {
  display: inline-block;
  transition: transform 0.2s ease;
  transform: rotate(90deg);
  font-size: 0.7em;
}
.note-toc.collapsed .note-toc-caret { transform: rotate(0deg); }
.note-toc.collapsed .note-toc-title { margin-bottom: 0; }

/* 0fr → 1fr animates cleanly without needing a known height */
.note-toc-wrap,
.note-toc-subwrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.22s ease;
}
.note-toc.collapsed > .note-toc-wrap,
.note-toc-h2.collapsed > .note-toc-subwrap { grid-template-rows: 0fr; }
.note-toc-wrap > ul,
.note-toc-subwrap > ul { overflow: hidden; min-height: 0; }

.note-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.note-toc li {
  margin: 0.25rem 0;
}

/* Row keeps the expander and the link on one line */
.note-toc-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.note-toc-toggle {
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 0;
  width: 1rem;
  font: inherit;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
  transform: rotate(90deg);
}
.note-toc-h2.collapsed > .note-toc-row > .note-toc-toggle { transform: rotate(0deg); }
.note-toc-toggle:hover { color: var(--color-steel-blue); }

/* Sub-list indents; an h3 with no parent h2 falls back to a flat indent */
.note-toc-sub { padding-left: 1.35rem; }
.note-toc-list > .note-toc-h3 { padding-left: 1rem; }
/* Caret-less h2 rows line up with the ones that have a caret — but only in a
   TOC that has carets at all, so an all-h2 note isn't indented for nothing */
.note-toc.has-groups .note-toc-h2:not(.has-children) > .note-toc-row { padding-left: 1.35rem; }

.note-toc a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.note-toc a:hover {
  color: var(--color-steel-blue);
  padding-left: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .note-toc-wrap,
  .note-toc-subwrap,
  .note-toc-caret,
  .note-toc-toggle { transition: none; }
}

/*
======================================================
  ACTIVE TAG (when filtering notes)
======================================================
*/
.tag.tag-active,
#block-tags.markdown-body > p a.tag-active,
#block-tags.markdown-body > ul li.tag-active,
#block-tags.markdown-body > p code.tag-active {
  background-color: var(--color-navy) !important;
  color: var(--color-white) !important;
  border-color: var(--color-navy) !important;
}

/*
======================================================
  DRAFT BADGE (unpublished notes — admin only)
======================================================
*/
.note-draft-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.6rem;
  padding: 0.12em 0.6em;
  font-size: 0.62em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  background: #d98324;
  border-radius: 20px;
}

/*
======================================================
  NOTE LIKES / REACTIONS
======================================================
*/
.note-card-likes {
  margin-left: 0.75rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.note-like-bar {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.note-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-navy);
  background: var(--color-white);
  border: 1px solid var(--border-color);
  border-radius: 30px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.note-like-btn:hover:not(:disabled) {
  background: var(--color-light-blue);
  box-shadow: 0 4px 14px rgba(26, 42, 108, 0.12);
  transform: translateY(-1px);
}
.note-like-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
}
.note-like-btn.liked {
  cursor: default;
  border-color: rgba(220, 80, 110, 0.4);
}
.note-like-icon {
  font-size: 1.1rem;
  line-height: 1;
}
.note-like-count {
  min-width: 1.2em;
  padding: 0.05em 0.5em;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--color-light-blue);
  color: var(--color-navy);
  border-radius: 12px;
}

/* =============================================
   LANGUAGE TOGGLE BUTTON (sits above theme toggle)
   ============================================= */

.lang-toggle {
  position: fixed;
  bottom: 20px;
  right: 25px;
  z-index: 998;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px 9px 12px;
  border: 1px solid var(--border-color);
  border-radius: 30px;
  cursor: pointer;
  user-select: none;
  font-family: inherit;

  /* Card surface colours — variables remap automatically in dark mode */
  background: var(--color-white);
  color: var(--color-navy);
  box-shadow: 0 4px 14px rgba(26, 42, 108, 0.15);

  transition:
    background  0.3s ease,
    color       0.3s ease,
    box-shadow  0.3s ease,
    transform   0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.lang-toggle:hover {
  transform: scale(1.06) translateY(-2px);
  box-shadow: 0 8px 24px rgba(26, 42, 108, 0.25);
}

.lang-toggle:active { transform: scale(0.95); }

.lang-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.lang-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1;
}

/* Mobile: shrink to icon-only, matching the theme toggle */
@media (max-width: 768px) {
  .lang-toggle { padding: 10px; gap: 0; bottom: 15px; right: 18px; }
  .lang-label  { display: none; }
}

/* =============================================
   BACK TO TOP BUTTON
   ============================================= */

.back-to-top {
  position: fixed;
  bottom: 215px;
  right: 32px;
  z-index: 998;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  cursor: pointer;

  background: var(--color-white);
  color: var(--color-navy);
  box-shadow: 0 4px 14px rgba(26, 42, 108, 0.15);

  /* Hidden until the page is scrolled */
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(26, 42, 108, 0.25);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 768px) {
  .back-to-top { bottom: 175px; right: 18px; width: 38px; height: 38px; }
}

/* =============================================
   READING TIME BADGE (note cards + detail meta)
   ============================================= */

.note-read-time {
  margin-left: 0.75rem;
  white-space: nowrap;
}

/* =============================================
   GAME-STYLE LANDING SCREEN (title screen overlay)
   ============================================= */

.landing-screen {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
  color: #22334a;
  /* Light mode: soft daybreak sky in the site's steel-blue palette */
  background:
    radial-gradient(ellipse at 50% 28%, rgba(255, 255, 255, 0.6), transparent 62%),
    linear-gradient(180deg, #d9e8f8 0%, #e9f2fb 55%, #f7fbff 100%);
}
/* Dark mode: site navy palette, deepened for a night-sky title screen.
   Gradients can't transition, so the night sky lives on a pseudo-element
   that fades in over the day sky (above the element's own background,
   below all children — the fixed landing screen is a stacking context) */
.landing-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(99, 130, 182, 0.30), transparent 62%),
    linear-gradient(180deg, #16234d 0%, #101a38 55%, #0a1226 100%);
  opacity: 0;
  transition: opacity 0.45s ease;
}
[data-theme="dark"] .landing-screen { color: #eaf3fb; }
[data-theme="dark"] .landing-screen::before { opacity: 1; }

/* Lock page scroll while the title screen is up */
body.landing-active { overflow: hidden; }

/* The title screen is opaque and covers the viewport, but everything under it
   keeps animating. document.getAnimations() on the title screen returned eight
   running animations, and most were not the title screen's at all: the cat
   widget blinking and wagging its tail, the "???" tag glinting, the homepage
   kicker blinking. None of it is visible, and each one keeps Chrome producing
   frames at the display's refresh rate — 144 times a second here. With GPU
   acceleration off those frames are composited by the CPU, through the title
   screen's whole stack of full-viewport layers. Park them until it is gone. */
body.landing-active .app-container *,
body.landing-active #cat-widget,
body.landing-active #cat-widget *,
body.landing-active #reading-progress,
body.landing-active #reading-progress * {
  animation-play-state: paused !important;
}

/* Twinkling starfield (two drifting layers) — faint steel-blue specks by
   day, white stars at night */
.landing-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 25px 35px,  rgba(70,130,180,0.5), transparent),
    radial-gradient(1px 1px     at 120px 90px, rgba(70,130,180,0.35), transparent),
    radial-gradient(1px 1px     at 200px 160px,rgba(99,130,182,0.45), transparent),
    radial-gradient(1.5px 1.5px at 300px 60px, rgba(70,130,180,0.3), transparent),
    radial-gradient(1px 1px     at 60px 210px, rgba(70,130,180,0.4), transparent);
  background-size: 340px 260px;
  animation: star-twinkle 5s ease-in-out infinite alternate;
  /* Promote to a compositor layer so the opacity animation runs on the
     compositor. Without it Chrome repaints these two full-viewport tiled
     radial-gradient layers on the main thread every frame: measured at ~1.2s
     of CPU per 10 idle seconds on the title screen, against ~0.05s for a
     content page. Chrome's own heuristic sometimes promotes them and
     sometimes doesn't, which is why the stutter came and went by machine.
     Do NOT add `contain: paint` here — measured, it defeats the promotion
     and puts the cost straight back (1.5s/10s, worse than no hint at all). */
  will-change: opacity;
}
.landing-stars-2 {
  background-image:
    radial-gradient(1px 1px     at 90px 40px,  rgba(70,130,180,0.3), transparent),
    radial-gradient(1.5px 1.5px at 220px 190px,rgba(99,130,182,0.5), transparent),
    radial-gradient(1px 1px     at 160px 120px,rgba(70,130,180,0.28), transparent);
  background-size: 280px 300px;
  animation-duration: 7s;
  animation-delay: 1.2s;
}
/* Night stars fade in on their own layer — swapping the parent's
   background-image would snap instead of crossfading */
.landing-stars::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 25px 35px,  rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px     at 120px 90px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px     at 200px 160px,rgba(180,220,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 300px 60px, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px     at 60px 210px, rgba(255,255,255,0.65), transparent);
  background-size: inherit;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.landing-stars-2::after {
  background-image:
    radial-gradient(1px 1px     at 90px 40px,  rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 220px 190px,rgba(200,230,255,0.8), transparent),
    radial-gradient(1px 1px     at 160px 120px,rgba(255,255,255,0.45), transparent);
}
[data-theme="dark"] .landing-stars::after { opacity: 1; }
@keyframes star-twinkle { from { opacity: 0.45; } to { opacity: 1; } }

/* Top bar: logo + mini nav */
.landing-top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.6rem 2.2rem;
}
.landing-logo {
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.5px;
}
.landing-nav { display: flex; gap: 1.8rem; }
.landing-nav a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 2px;
  color: rgba(34, 51, 74, 0.6);
  transition: color 0.25s ease;
}
.landing-nav a:hover { color: #16234d; }
[data-theme="dark"] .landing-nav a { color: rgba(234, 243, 251, 0.65); }
[data-theme="dark"] .landing-nav a:hover { color: #fff; }

/* Theme switch on the title screen — same .theme-toggle pill, pinned to
   the same bottom-left spot as the main pages' toggle dock */
.landing-theme-toggle {
  position: absolute;
  bottom: 20px;
  left: 25px;
  z-index: 2;
}

/* Centre block: pixel cat, name, tags, socials */
.landing-center {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 0 1.5rem;
  text-align: center;
  margin-top: -2rem;
}

/* 8-bit pixel cat (box-shadow sprite built in script.js) */
.landing-sprite-wrap {
  position: relative;
  width: 128px;  /* 16 cols × 8px */
  height: 104px; /* 13 rows × 8px */
  margin-bottom: 1.2rem;
  animation: sprite-float 3.2s ease-in-out infinite;
  /* Same reason as .landing-stars. This sprite floating *over* the starfield
     is what tips the heuristic against promoting either of them, so both
     carry an explicit hint rather than relying on Chrome guessing right. */
  will-change: transform;
}
.landing-sprite-wrap::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 230px;
  height: 190px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(99, 130, 182, 0.42), transparent 65%);
}
.landing-sprite { position: relative; }
@keyframes sprite-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Name styled like the site's section titles: bold sans + steel-blue bar */
.landing-name {
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.15;
  color: #1d2c45;
  text-shadow: 0 4px 30px rgba(70, 130, 180, 0.3);
}
[data-theme="dark"] .landing-name {
  color: #fff;
  text-shadow: 0 4px 30px rgba(99, 130, 182, 0.45);
}
.landing-name::after {
  content: '';
  display: block;
  width: 56px;
  height: 4px;
  background-color: #4682b4;
  margin: 0.6rem auto 0;
  border-radius: 2px;
}
.landing-dot { color: #f0a0b0; } /* the cat's nose pink */

.landing-tags {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(34, 51, 74, 0.65);
}
[data-theme="dark"] .landing-tags { color: rgba(234, 243, 251, 0.7); }

.landing-social {
  display: flex;
  gap: 1.6rem;
  margin-top: 0.8rem;
}
.landing-social a {
  color: rgba(34, 51, 74, 0.6);
  transition: color 0.25s ease, transform 0.25s ease;
}
.landing-social a:hover { color: #16234d; transform: translateY(-3px); }
[data-theme="dark"] .landing-social a { color: rgba(234, 243, 251, 0.7); }
[data-theme="dark"] .landing-social a:hover { color: #fff; }
.landing-social svg { width: 21px; height: 21px; fill: currentColor; }

.landing-press {
  margin-top: 2.4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 3px;
  color: rgba(34, 51, 74, 0.75);
  animation: press-blink 1.3s steps(2, start) infinite;
}
[data-theme="dark"] .landing-press { color: rgba(234, 243, 251, 0.85); }
@keyframes press-blink { to { visibility: hidden; } }

@media (max-width: 600px) {
  .landing-top {
    padding: 1.2rem 1.3rem;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
  }
  .landing-nav {
    gap: 1rem 1.1rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .landing-nav a { font-size: 0.6rem; letter-spacing: 1px; }
}

/* =============================================
   SCENE TRANSITION (game-style wipe between views)
   ============================================= */

.scene-transition {
  position: fixed;
  inset: 0;
  z-index: 5000;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}
.scene-transition.cover {
  visibility: visible;
  pointer-events: auto; /* swallow clicks mid-wipe */
}

.scene-panel {
  position: absolute;
  top: -10%;
  left: -15%;
  width: 130%;
  height: 120%;
  transform: skewX(-14deg) translateX(-135%);
}
.scene-panel-1 {
  background: linear-gradient(135deg, #1a2a6c, #24408e);
  transition: transform 0.42s cubic-bezier(0.72, 0, 0.28, 1);
}
.scene-panel-2 {
  background: linear-gradient(135deg, #4682b4, #6382b6);
  transition: transform 0.42s cubic-bezier(0.72, 0, 0.28, 1) 0.07s;
}
.scene-transition.cover .scene-panel        { transform: skewX(-14deg) translateX(0); }
.scene-transition.cover.reveal .scene-panel { transform: skewX(-14deg) translateX(135%); }

.scene-transition-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 3px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease 0.3s;
}
.scene-transition.cover:not(.reveal) .scene-transition-label { opacity: 1; }

/* =============================================
   LANDING TRANSITION (frosted-glass iris to/from the title screen)
   ============================================= */

.landing-transition {
  position: fixed;
  inset: 0;
  z-index: 6500; /* above the title screen (6000) — it wipes that away */
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
}
.landing-transition.cover {
  visibility: visible;
  pointer-events: auto; /* swallow clicks mid-transition */
}

/* Translucent veil that blooms out from the centre and frosts the page
   behind it; the reveal is an asymmetric soft dissolve */
.landing-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.55), transparent 62%),
    linear-gradient(160deg, rgba(226, 238, 250, 0.92), rgba(188, 212, 238, 0.86));
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  clip-path: circle(0% at 50% 50%);
  transition:
    clip-path 0.48s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.42s ease;
}
.landing-transition.cover .landing-veil        { clip-path: circle(78% at 50% 50%); }
.landing-transition.cover.reveal .landing-veil { opacity: 0; }

[data-theme="dark"] .landing-veil {
  background:
    radial-gradient(circle at 50% 42%, rgba(126, 166, 217, 0.28), transparent 62%),
    linear-gradient(160deg, rgba(22, 35, 77, 0.82), rgba(10, 18, 38, 0.86));
}

.landing-transition-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 9px;
  white-space: nowrap;
  color: #16234d;
  opacity: 0;
  transition:
    opacity 0.3s ease 0.18s,
    letter-spacing 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
  /* letter-spacing is a layout property, so this animation re-lays-out the
     label every frame. Contain it so that work can't escape into the rest of
     the document while the wipe is running. */
  contain: layout style;
}
/* Tracking-in: letters settle together as the label fades up */
.landing-transition.cover:not(.reveal) .landing-transition-label {
  opacity: 1;
  letter-spacing: 4px;
}
[data-theme="dark"] .landing-transition-label { color: #eaf3fb; }

/* While the veil is up it is a full-viewport backdrop-filter, and the title
   screen sits directly behind it. Every one of these is an infinite animation
   that would keep the veil's backdrop dirty, forcing the 18px blur to be
   recomputed across the whole screen every frame instead of snapshotted once.
   They are behind a frosted pane for the duration — nobody can see them.
   .landing-press is deliberately left running: it is a steps(2) visibility
   blink, so it dirties the backdrop about 1.5 times a second rather than
   every frame, and freezing it risks holding the prompt in its hidden half. */
body.landing-wiping .landing-stars,
body.landing-wiping .landing-sprite-wrap { animation-play-state: paused; }

/* =============================================
   GAME LAYER — HUD & achievements
   ============================================= */

/* HUD chip (decorative, top-right) */
#game-hud {
  position: fixed;
  top: 10px;
  right: 14px;
  z-index: 1600;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px;
  pointer-events: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 1.5px;
  color: #dce9f7;
  background: rgba(16, 26, 56, 0.72);
  border: 1px solid rgba(126, 166, 217, 0.35);
  border-radius: 6px;
  backdrop-filter: blur(4px);
}
#game-hud .hud-lv { color: #f5c842; font-weight: 600; }
#game-hud .hud-hearts { color: #e46a7c; letter-spacing: 2px; }
@media (max-width: 1024px) {
  #game-hud { display: none; } /* keep small screens uncluttered */
}

/* Achievement toasts (top centre, stacked) */
#achievement-stack {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7500;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.achievement-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: rgba(16, 26, 56, 0.92);
  border: 1px solid rgba(245, 200, 66, 0.55);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(8, 15, 30, 0.45);
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.achievement-toast.show {
  opacity: 1;
  transform: translateY(0);
}
.achievement-toast .ach-icon { font-size: 1.4rem; line-height: 1; }
.achievement-toast .ach-text { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.achievement-toast .ach-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 2px;
  color: #f5c842;
}
.achievement-toast .ach-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: #eaf3fb;
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .landing-stars,
  .landing-sprite-wrap,
  .landing-press { animation: none; }
  /* Nothing is animating here any more, so drop the compositor hints rather
     than hold two full-viewport layers for no reason. */
  .landing-stars,
  .landing-sprite-wrap { will-change: auto; }
  .scene-panel,
  .landing-veil,
  .landing-transition-label { transition: none; }
}

/* =============================================
   HOMEPAGE — game-style main menu page
   ============================================= */

.home-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 6rem);
}

.home-hero {
  margin-bottom: 3rem;
}

.home-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 3px;
  color: var(--color-steel-blue);
  margin-bottom: 0.8rem;
  animation: press-blink 2.6s steps(2, start) infinite;
}

.home-title {
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-navy);
}
.home-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 4px;
  background-color: var(--color-steel-blue);
  margin-top: 0.8rem;
  border-radius: 2px;
}
.home-dot { color: #f0a0b0; }

.home-subtitle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 1rem;
}

.home-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.4rem;
}
.home-stat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 1.5px;
  padding: 5px 12px;
  color: var(--color-text-muted);
  background: var(--color-white);
  border: 1px solid var(--border-color);
  border-radius: 6px;
}
.home-stat b { color: var(--color-navy); }

.home-menu-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 2.5px;
  color: var(--color-dusty-blue);
  margin-bottom: 1rem;
}

.home-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}

.home-menu-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.3rem 1.5rem;
  background: var(--color-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 0 4px 15px rgba(99, 130, 182, 0.08);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.home-menu-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-steel-blue);
  box-shadow: 0 10px 25px rgba(26, 42, 108, 0.15);
}

.home-menu-icon {
  font-size: 1.7rem;
  line-height: 1;
  flex-shrink: 0;
}

.home-menu-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.home-menu-name {
  font-weight: 700;
  color: var(--color-navy);
}
.home-menu-desc {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.home-menu-enter {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  color: var(--color-steel-blue);
  opacity: 0.55;
  transition: opacity var(--transition), transform var(--transition);
}
.home-menu-card:hover .home-menu-enter {
  opacity: 1;
  transform: translateX(4px);
}

@media (max-width: 700px) {
  .home-menu { grid-template-columns: 1fr; }
  .home-section { min-height: calc(100vh - 8rem); }
}

/* =============================================
   CAT WIDGET — dark mode dimming
   (--color-navy flips to a bright blue in dark mode,
    which made the cat glow; use a muted deep blue instead)
   ============================================= */

[data-theme="dark"] .cat-face { background: #33507e; }
[data-theme="dark"] .cat-ear { border-bottom-color: #33507e; }
[data-theme="dark"] .cat-tail {
  border-color: #33507e #33507e transparent transparent;
}
[data-theme="dark"] .cat-eye { background: #d6e8fa; }
[data-theme="dark"] .cat-widget.sleeping .cat-eye { background: #d6e8fa; }
[data-theme="dark"] .cat-mouth { border-bottom-color: #5a7ba8; }
[data-theme="dark"] .cat-whiskers,
[data-theme="dark"] .cat-whiskers::before,
[data-theme="dark"] .cat-whiskers::after { border-top-color: #5a7ba8; }

/* =============================================
   TITLE SCREEN ENTRY (main nav)
   ============================================= */

.nav-title-item {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border-color);
}
#nav-title-screen {
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 1px;
}

/* =============================================
   MYSTERY TAG — "???" easter egg in the tag cloud
   (subtle on purpose; curiosity does the rest)
   ============================================= */

.tag-mystery {
  border-style: dashed !important;
  font-style: italic;
  letter-spacing: 0.15em;
  animation: mystery-glint 7s ease-in-out infinite;
}

/* Rare-item gold instead of the usual navy hover */
.tag-mystery:hover {
  background-color: #c99a1d;
  border-color: #c99a1d;
}

/* A brief glint every few seconds — noticeable if you look, never loud */
@keyframes mystery-glint {
  0%, 91%, 100% { box-shadow: none; }
  95% { box-shadow: 0 0 10px rgba(230, 185, 35, 0.75); }
}

@media (prefers-reduced-motion: reduce) {
  .tag-mystery { animation: none; }
}

/* ── Hero coin — early-Mario pixel coin, drawn in buildHeroCoin() ── */
.home-hero { position: relative; }

.hero-coin {
  position: absolute;
  top: 0.2rem;
  right: 2rem;
  width: 24px;   /* 8 cols × 3px */
  height: 36px;  /* 12 rows × 3px */
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.hero-coin:hover { transform: scale(1.2); }
.hero-coin.coin-collected { animation: coin-pop 0.5s ease; }

/* px-sized anchor; the coin itself is box-shadow pixels cast from here */
.hero-coin-px {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}

@keyframes coin-pop {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-14px) scale(1.25); }
  100% { transform: translateY(0) scale(1); }
}

/* ── BURRITO.EXE in the HUD — double-click to run ── */
#game-hud .hud-name {
  pointer-events: auto; /* the HUD itself is pointer-events: none */
  cursor: pointer;
  user-select: none;
}

/* ── Achievements panel — hints for what is still locked ── */
.home-stat-btn { cursor: pointer; transition: border-color 0.2s ease, transform 0.2s ease; }
.home-stat-btn:hover {
  border-color: var(--color-steel-blue);
  transform: translateY(-1px);
}

.achievements-content {
  position: relative;
  max-width: 440px;
  max-height: 80vh;
  overflow-y: auto;
}
.achievements-content h3 {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 2px;
}

.achievements-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ach-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.ach-row-icon { font-size: 1.25rem; line-height: 1; }
.ach-row-text { display: flex; flex-direction: column; gap: 0.1rem; }
.ach-row-text b {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 1px;
  color: var(--color-navy);
}
.ach-row-text small { font-size: 0.75rem; color: var(--color-text-muted); }

.ach-row.locked { opacity: 0.75; }
.ach-row.locked .ach-row-icon { filter: grayscale(1); }
.ach-row.locked small { font-style: italic; }