/* =========================
   TOC Container + Sidebar
   ========================= */
.toc-container {
  grid-column: 2 / 3;
  /* Positions the TOC in your grid layout */
  position: sticky;
  /* Makes it stick as the user scrolls */
  top: 0.5rem;
  /* Distance from the top of the viewport when sticky */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 250px;
  /* Fixed width for the sidebar */
  gap: 0rem;
  margin-right: 0rem;
  max-height: 100vh;
  /* Ensures container doesn't exceed viewport height */
  visibility: visible;
  transition:
    transform 0.85s cubic-bezier(.22, 1, .36, 1),
    opacity 0.85s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear 0s;
  /* For initial load fade-in and mobile slide */
  z-index: 10;
  /* Ensures it's above main content if needed */
}

.toc-container::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(20, 14, 18, 0.42);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.toc-sidebar {
  width: 100%;
  scroll-behavior: smooth;
  /* Smooth scrolling within the TOC itself */
  -webkit-overflow-scrolling: touch;
  /* Improves scrolling on iOS */
  background-color: var(--color-bg-muted);
  /* Background color of the sidebar */
  color: var(--color-text-primary);
  /* Default text color for TOC links */
  padding: 1.5rem;
  /* Internal padding */
  margin-top: 3rem;
  /* Space from the top of its container */
  border-radius: 0.75rem;
  font-size: 0.9rem;
  /* Base font size for TOC text */
  height: fit-content;
  /* Allow content to dictate initial height */

  /* --- IMPORTANT: Control visible headings and enable scrolling --- */
  max-height: 24rem;
  /* Shows approx. 12-14 headings. Adjust this value as needed. */
  overflow-y: auto;
  /* Enables vertical scrolling when content exceeds max-height */

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  /* Subtle shadow */
  animation: tocSidebarIn 0.7s cubic-bezier(.33, 1, .68, 1) forwards;
  /* Entry animation for desktop */
}

/* TOC List Structure */
.toc-list {
  list-style: none;
  /* Remove default list bullets */
  padding: 0;
  margin: 0;
  width: 100%;
}

.toc-list li {
  margin-bottom: 0.5em;
  /* Spacing between list items */
}

.toc-list li:last-child {
  margin-bottom: 0;
  /* No margin after the last item */
}

.toc-list a {
  display: block;
  /* Make the entire link block clickable */
  text-decoration: none;
  /* Remove underline from links */
  color: var(--color-text-primary);
  /* Default link color */

  /* Add transitions for smooth hover and active state changes */
  transition: color 0.2s ease, transform 0.2s ease, background-color 0.2s ease, padding-left 0.2s ease, border-left-color 0.2s ease, box-shadow 0.2s ease;

  /* Base styling for the left border (will become visible when active) */
  border-left: 2px solid transparent;
  padding: 0.25em 0;
  /* Vertical padding */
  padding-left: 0;
  /* Initial horizontal padding on left, adjust for border */
}

/* Hover state for TOC links */
.toc-list a:hover {
  color: var(--color-text-primary);
  /* Change text color on hover */
  transform: translateX(3px);
  /* Subtle slide effect on hover */
  background-color: color-mix(in srgb, var(--color-light-purple) 20%, transparent);
  /* Solid 2px periwinkle accent on hover */
  border-left: 2px solid var(--color-light-purple);
  padding-left: 0.5em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08),
    -1px 0 8px color-mix(in srgb, var(--color-light-purple) 30%, transparent);
}

/* --- ACTIVE LINK STYLES: This is what makes it stand out --- */
.toc-list li.active>a {
  color: var(--color-light-purple);
  /* Strong periwinkle accent for active text */
  font-weight: bold;
  /* Make text bold */

  /* Subtle periwinkle background for the active item */
  background-color: color-mix(in srgb, var(--color-purple) 15%, transparent);

  /* Prominent periwinkle border on the left */
  border-left: 2px solid var(--color-light-purple);

  /* Adjust padding to make space for the border */
  padding-left: 0.5em;

  /* Periwinkle glow + depth for the active state */
  transform: translateX(0) scale(1.01);
  /* Slightly enlarge when active */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12),
    -1px 0 12px color-mix(in srgb, var(--color-light-purple) 48%, transparent);
}

/* Active state for parent items of active sub-items */
/* This helps users see which top-level section they are in */
.toc-list li.active-parent>a {
  color: var(--color-text-primary);
  /* Example: Use a distinct color for parents */
  font-weight: bold;
  /* Make the parent text bold too */
  /* Ensure parent doesn't get the same background/border as active child if not itself active */
  background-color: transparent;
  border-left-color: transparent;
  padding-left: 0;
  /* Reset padding-left for consistency */
  box-shadow: none;
  /* Remove shadow if it's just an active parent */
  transform: translateX(0) scale(1);
  /* Reset transform */
}

/* --- END ACTIVE LINK STYLES --- */



/* Nested list items (sub-headings) */
.toc-list ul {
  padding-left: 1rem;
  /* Indentation for nested lists */
  margin-top: 0.5em;
  list-style: none;
  /* Ensure nested lists also don't have bullets */
}

/* Scrollbar styling for Webkit browsers (Chrome, Safari, Edge) */
.toc-sidebar::-webkit-scrollbar {
  width: 8px;
  /* Width of the scrollbar */
}

.toc-sidebar::-webkit-scrollbar-thumb {
  background-color: var(--color-muted);
  /* Color of the scrollbar thumb */
  border-radius: 4px;
  /* Rounded corners for the thumb */
}

/* For Firefox, you'd use scrollbar-width and scrollbar-color on .toc-sidebar itself */


/* =========================
   Toggle button for TOC (mobile/tablet)
   ========================= */
.toc-toggle-button {
  display: none !important;
  /* Hidden completely, everywhere */
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10000;
  /* Ensure it's on top of everything */
  background-color: var(--color-accent);
  color: var(--color-bg-primary);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 1.5rem;
  /* Pill shape */
  font-size: 1rem;
  cursor: url("/assets/cursors/slapping cat_32-48-64.ani") 16 16, auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  user-select: none;
  transition: all 0.2s ease;
}

.toc-toggle-button:hover {
  background-color: var(--color-red);
  /* Darker accent on hover */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* =========================
   Responsive Adjustments (e.g., for smaller screens)
   ========================= */
/* TOC docks as a sidebar only on wide desktops (≥ 1760px); below that
   it becomes a slide-in panel via the toggle button — otherwise it
   overlaps the body text on standard laptop widths. */
@media (max-width: 1800px) {
  .toc-container {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(84vw, 340px);
    margin-right: 0;
    opacity: 0;
    transform: translateX(calc(100% + 24px));
    pointer-events: none;
    visibility: hidden;
    background-color: var(--color-bg-muted);
    box-shadow: -4px 0 10px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    transition:
      transform 0.85s cubic-bezier(.22, 1, .36, 1),
      opacity 0.85s cubic-bezier(.22, 1, .36, 1),
      visibility 0s linear 0.85s;
  }

  /* Hide separators in TOC sidebar when TOC is hidden */
  aside.toc-sidebar .section-separator {
    display: none;
  }

  .toc-container.active {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: translateX(0%);
    animation: tocSidebarMobileIn 0.5s cubic-bezier(.33, 1, .68, 1) forwards;
  }

  .toc-container.active::before {
    opacity: 1;
    pointer-events: auto;
  }

  .toc-container.closing {
    animation: tocSidebarMobileOut 0.5s cubic-bezier(.33, 1, .68, 1) forwards;
  }

  .toc-sidebar {
    padding: 2rem 1.5rem;
    margin-top: 0;
    max-height: 100%;
    overflow-y: auto;
    font-size: 0.85rem;
  }

  .toc-raccoon {
    max-width: 90px;
    padding-right: 0;
    margin-bottom: 1rem;
  }

  .toc-toggle-button {
    display: block;
    top: auto;
    bottom: 1rem;
    right: 1rem;
    border: 2px solid var(--color-bg-muted);
    transition: all 0.2s ease;
  }

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

  .toc-toggle-button i {
    margin-right: 0.35rem;
  }

  body.no-scroll-toc {
    overflow: hidden;
  }
}

/* Tablet landscape - compact TOC button */
@media (max-width: 2050px) and (orientation: landscape) {
  .toc-toggle-button {
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
    bottom: 0.75rem;
    right: 0.75rem;
  }
}

/* Small mobile: 480px and below */
@media (max-width: 480px) {
  .toc-container {
    width: 100vw;
  }

  .toc-sidebar {
    padding: 1.5rem 1rem;
    font-size: 0.8rem;
    max-height: calc(100vh - 3rem);
  }

  .toc-toggle-button {
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
    bottom: 0.75rem;
    right: 0.75rem;
  }
}

/* Ultra small screen: 360px and below */
@media (max-width: 360px) {
  .toc-sidebar {
    padding: 1.25rem 0.75rem;
    font-size: 0.75rem;
  }

  .toc-list a {
    padding: 0.2em 0;
  }

  .toc-toggle-button {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
  }
}

/* ====================
   Animations
   ==================== */
/* Desktop Sidebar Entry */
@keyframes tocSidebarIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Mobile Sidebar Entry */
@keyframes tocSidebarMobileIn {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0%);
  }
}

/* Mobile Sidebar Exit */
@keyframes tocSidebarMobileOut {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}
/* inline code styling */
code:not(pre > code) {
  background: var(--color-bg-secondary);
  color: var(--color-light-purple);
  padding: 0.15em 0.4em;
  border-radius: 0.4em;
  font-size: 1em;
  font-weight: 500;
  font-family: "Maple Mono", "JetBrainsMonoNerd", monospace;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: 'liga' 1, 'calt' 1;
  box-shadow: none;
  border: none;
  white-space: nowrap;
}
.hljs {
  background: var(--color-rosepine-base);
  font-family: "Maple Mono", "JetBrainsMonoNerd", monospace;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: 'liga' 1, 'calt' 1;
}

* {
  /* Rosé Pine tokens remapped to site palette */
  --color-rosepine-base: #2C2328;       /* bg-secondary (darker plum) */
  --color-rosepine-surface: #362b31;    /* bg-primary (dark plum) */
  --color-rosepine-overlay: #4a3e44;    /* bg-muted (shadow taupe) */
  --color-rosepine-muted: #beae94;      /* oat — closest warm grey */
  --color-rosepine-subtle: #beae94;     /* oat */
  --color-rosepine-text: #fdfbd4;       /* parchment */
  --color-rosepine-love: #ea9a97;       /* guava/pink */
  --color-rosepine-gold: #ecd28b;       /* buter/light-yellow */
  --color-rosepine-rose: #ebbcba;       /* arizona sunrise (exact match) */
  --color-rosepine-pine: #3e8fb0;       /* calypso/blue */
  --color-rosepine-foam: #9ccfd8;       /* tenzing/light-blue (exact match) */
  --color-rosepine-iris: #c4a7e7;       /* bright lavender (exact match) */
  --color-rosepine-highlight-low: #4a3e44;
  --color-rosepine-highlight-med: #4a3e44;
  --color-rosepine-highlight-high: #beae94;
}

pre.highlight {
  margin: 0;
}


pre code.hljs {
  display: block;
  overflow-x: auto;
  font-family: "Maple Mono", "JetBrainsMonoNerd", monospace;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: 'liga' 1, 'calt' 1;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 1.5rem;
  max-height: 60vh;
  background: var(--color-rosepine-base);
  border-radius: 0;
  border: none;
}

code.hljs {
  padding: 3px 5px;
  font-family: "Maple Mono", "JetBrainsMonoNerd", monospace;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: 'liga' 1, 'calt' 1;
}

.hljs {
  background: var(--color-rosepine-overlay);
  color-scheme: dark; /* dark controls inside code blocks */
}

.hljs,
.hljs-subst {
  color: var(--color-rosepine-text);
}

.hljs-selector-tag {
  color: var(--color-rosepine-foam);
}

.hljs-selector-id {
  color: var(--color-rosepine-iris);
  font-weight: 700;
}

.hljs-selector-attr,
.hljs-selector-class {
  color: var(--color-rosepine-iris);
}

.hljs-property,
.hljs-selector-pseudo {
  color: var(--color-rosepine-rose);
}

.hljs-addition {
  background-color: rgba(156, 207, 216, 0.5);
}

.hljs-deletion {
  background-color: rgba(235, 111, 146, 0.5);
}

.hljs-built_in,
.hljs-class,
.hljs-type {
  color: var(--color-rosepine-iris);
}

.hljs-function,
.hljs-function > .hljs-title,
.hljs-title.hljs-function {
  color: var(--color-rosepine-rose);
}

.hljs-keyword,
.hljs-literal,
.hljs-symbol {
  color: var(--color-rosepine-foam);
}

.hljs-number {
  color: var(--color-rosepine-gold);
}

.hljs-regexp {
  color: var(--color-rosepine-gold);
}

.hljs-string {
  color: var(--color-rosepine-foam);
}

.hljs-title {
  color: var(--color-rosepine-iris);
}

.hljs-params {
  color: var(--color-rosepine-text);
}

.hljs-bullet {
  color: var(--color-rosepine-foam);
}

.hljs-code {
  color: var(--color-rosepine-iris);
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-formula {
  color: var(--color-rosepine-iris);
}

.hljs-strong {
  font-weight: 700;
}

.hljs-link:hover {
  text-decoration: underline;
}

.hljs-comment,
.hljs-quote {
  color: var(--color-rosepine-muted);
}

/* Ensure single-line comments are also styled */
.language-cpp .hljs-comment,
.language-c .hljs-comment {
  color: var(--color-rosepine-muted) !important;
}

.hljs-doctag {
  color: var(--color-rosepine-iris);
}

.hljs-meta,
.hljs-meta .hljs-keyword {
  color: var(--color-rosepine-pine);
}

.hljs-meta .hljs-string {
  color: var(--color-rosepine-foam);
}

.hljs-attr {
  color: var(--color-rosepine-iris);
}

.hljs-attribute {
  color: var(--color-rosepine-text);
}

.hljs-name {
  color: var(--color-rosepine-foam);
}

.hljs-section {
  color: var(--color-rosepine-rose);
}

.hljs-tag {
  color: var(--color-rosepine-foam);
}

.hljs-template-variable,
.hljs-variable {
  color: var(--color-rosepine-text);
}

.hljs-template-tag {
  color: var(--color-rosepine-pine);
}

.language-abnf .hljs-attribute {
  color: var(--color-rosepine-rose);
}

.language-abnf .hljs-symbol {
  color: var(--color-rosepine-gold);
}

.language-apache .hljs-attribute {
  color: var(--color-rosepine-rose);
}

.language-apache .hljs-section {
  color: var(--color-rosepine-foam);
}

.language-arduino .hljs-built_in {
  color: var(--color-rosepine-rose);
}

.language-aspectj .hljs-meta {
  color: var(--color-rosepine-love);
}

.language-aspectj > .hljs-title {
  color: var(--color-rosepine-rose);
}

.language-bnf .hljs-attribute {
  color: var(--color-rosepine-iris);
}

.language-clojure .hljs-name {
  color: var(--color-rosepine-rose);
}

.language-clojure .hljs-symbol {
  color: var(--color-rosepine-gold);
}

.language-coq .hljs-built_in {
  color: var(--color-rosepine-rose);
}

.language-cpp .hljs-meta .hljs-string {
  color: var(--color-rosepine-iris);
}

.language-css .hljs-built_in {
  color: var(--color-rosepine-rose);
}

.language-css .hljs-keyword {
  color: var(--color-rosepine-love);
}

.language-diff .hljs-meta,
.language-ebnf .hljs-attribute {
  color: var(--color-rosepine-iris);
}

.language-glsl .hljs-built_in {
  color: var(--color-rosepine-rose);
}

.language-groovy .hljs-meta:not(:first-child),
.language-haxe .hljs-meta,
.language-java .hljs-meta {
  color: var(--color-rosepine-love);
}

.language-ldif .hljs-attribute {
  color: var(--color-rosepine-iris);
}

.language-lisp .hljs-name,
.language-lua .hljs-built_in,
.language-moonscript .hljs-built_in,
.language-nginx .hljs-attribute {
  color: var(--color-rosepine-rose);
}

.language-nginx .hljs-section {
  color: var(--color-rosepine-pine);
}

.language-pf .hljs-built_in,
.language-processing .hljs-built_in {
  color: var(--color-rosepine-rose);
}

.language-scss .hljs-keyword,
.language-stylus .hljs-keyword {
  color: var(--color-rosepine-foam);
}

.language-swift .hljs-meta {
  color: var(--color-rosepine-love);
}

.language-vim .hljs-built_in {
  color: var(--color-rosepine-rose);
  font-style: italic;
}

.language-yaml .hljs-meta {
  color: var(--color-rosepine-love);
}

/* =========================
   Copy Button & Lang Label
   ========================= */

/* macOS-style window chrome */
pre {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 2px solid var(--color-bg-muted);
  background: var(--color-rosepine-base);
  margin: 0;
}

pre::before {
  content: "";
  display: block;
  height: 2.6rem;
  background:
    radial-gradient(circle at 1.2rem 50%, var(--color-light-red)   0, var(--color-light-red)   5.5px, transparent 5.5px),
    radial-gradient(circle at 2.5rem 50%, var(--color-light-yellow) 0, var(--color-light-yellow) 5.5px, transparent 5.5px),
    radial-gradient(circle at 3.8rem 50%, var(--color-light-green)  0, var(--color-light-green)  5.5px, transparent 5.5px),
    var(--color-rosepine-base);
  pointer-events: none;
}

:root {
  --code-button-font-size: 0.9rem;
  --code-button-padding: 0.45em 0.75em;
  --code-button-radius: 8px;
  --code-button-line-height: 1.2;
  --code-button-min-height: 2rem;
}

.code-copy-btn,
.code-lang-label {
  font-size: var(--code-button-font-size);
  padding: var(--code-button-padding);
  line-height: var(--code-button-line-height);
  border-radius: var(--code-button-radius);
  min-height: var(--code-button-min-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  box-sizing: border-box;
}

/* Specific styles */
.code-copy-btn {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
  border: none;
  cursor: url("/assets/cursors/slapping cat_32-48-64.ani") 16 16, auto !important;
  z-index: 1000;
  opacity: 0.9;
  gap: 0.3em;
  transition: all 0.25s ease;
}

.code-copy-btn:hover,
.code-copy-btn:focus {
  background: var(--color-green); /* Radium */
  color: var(--color-bg-primary);
  opacity: 1;
  cursor: url("/assets/cursors/hand.png") 0 0, auto !important;
}

.code-copy-btn.copied {
  background: var(--color-light-blue); /* Tenzing */
  color: var(--color-bg-primary);
  animation: pulseSuccess 0.4s ease-out;
}

.code-copy-btn.error {
  background: var(--color-pink); /* Out of Fashion */
  color: var(--color-bg-primary);
  animation: shakeError 0.4s ease-in-out;
}

.code-lang-label {
  display: none !important;
}

/* ==========
   Animations
   ========== */
@keyframes pulseSuccess {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(80, 250, 123, 0.4);
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(80, 250, 123, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(80, 250, 123, 0);
  }
}

@keyframes shakeError {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-4px);
  }

  50% {
    transform: translateX(4px);
  }

  75% {
    transform: translateX(-2px);
  }
}

/* ============================================
   MOBILE RESPONSIVE ENHANCEMENTS
   ============================================ */

@media (max-width: 768px) {
  pre,
  code {
    font-size: 0.85rem;
  }

  pre {
    padding: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 600px) {
  pre,
  code {
    font-size: 0.8rem;
  }

  pre {
    padding: 0.75rem;
    margin: 1rem 0;
    border-radius: 8px;
  }

  code {
    word-break: break-word;
  }
}

@media (max-width: 480px) {
  pre {
    border-radius: 6px;
    padding: 0.5rem;
  }
}

/* Smooth scrolling for code blocks */
pre, code {
  transition: max-height 0.3s ease;
}


/* MathJax v3 (CHTML output) — display math */
mjx-container[display="true"] {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 1.2em auto;
    text-align: center;
}

/* MathJax v3 — inline math */
mjx-container:not([display="true"]) {
    display: inline;
    vertical-align: middle;
}

/* =============================================
   MATH BLOCKS  —  definition / theorem / proof / example
   ============================================= */

/* Single neutral accent — warm oat tone, all types */
.math-block { --mb-color: var(--color-text-muted); }

/* Container */
.math-block {
    position: relative;
    padding: 1.5rem 1.8rem 1.5rem 1.6rem;
    margin: 2.5rem 0;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mb-color, var(--color-light-blue)) 7%, var(--color-bg-secondary));
    border: 1px solid color-mix(in srgb, var(--mb-color, var(--color-light-blue)) 18%, transparent);
    border-left: 3px solid var(--mb-color, var(--color-light-blue));
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.28),
        0 1px 3px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 color-mix(in srgb, var(--mb-color, var(--color-light-blue)) 14%, transparent);
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.25s ease;
    max-width: 100%;
    box-sizing: border-box;
}

.math-block:hover {
    transform: translateY(-1px);
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.34),
        0 0 0 1px color-mix(in srgb, var(--mb-color, var(--color-light-blue)) 26%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--mb-color, var(--color-light-blue)) 20%, transparent),
        -8px 0 32px color-mix(in srgb, var(--mb-color, var(--color-light-blue)) 13%, transparent);
}

/* Top accent gradient strip */
.math-block::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--mb-color, var(--color-light-blue)) 0%,
        color-mix(in srgb, var(--mb-color, var(--color-light-blue)) 30%, transparent) 65%,
        transparent 100%
    );
    border-radius: 12px 12px 0 0;
}

/* Large watermark icon — bottom-right corner */
.math-block::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 1.2rem;
    bottom: 0.6rem;
    font-size: 7rem;
    color: var(--mb-color, var(--color-light-blue));
    opacity: 0.055;
    pointer-events: none;
    user-select: none;
    line-height: 1;
}

.math-block.definition::before { content: "\f518"; } /* fa-book-open    */
.math-block.theorem::before    { content: "\f534"; } /* fa-infinity     */
.math-block.proof::before      { content: "\f560"; } /* fa-check-double */
.math-block.example::before    { content: "\f0eb"; } /* fa-lightbulb   */

/* ——— Label ——— */
.math-label {
    position: static;
    top: auto;
    left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.42em;
    padding: 0;
    margin: 0 0 0.9rem 0;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-family: ui-monospace, 'Cascadia Code', 'Fira Code', Consolas, monospace;
    color: var(--mb-color, var(--color-light-blue));
    text-decoration: none;
    background: none;
    border: none;
    border-radius: 0;
    transition: opacity 0.2s ease;
}

.math-label:hover {
    opacity: 0.7;
}

/* Small leading icon */
.math-label::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.88em;
    color: var(--mb-color, var(--color-light-blue));
    display: inline-block;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

/* Short horizontal rule following the label text */
.math-label::after {
    content: "";
    display: inline-block;
    width: 2.4em;
    height: 1px;
    background: color-mix(in srgb, var(--mb-color, var(--color-light-blue)) 50%, transparent);
    margin-left: 0.35em;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Per-type label icons */
.math-block.definition .math-label::before { content: "\f518"; } /* fa-book-open    */
.math-block.theorem    .math-label::before { content: "\f534"; } /* fa-infinity     */
.math-block.proof      .math-label::before { content: "\f560"; } /* fa-check-double */
.math-block.example    .math-label::before { content: "\f0eb"; } /* fa-lightbulb   */

/* ——— Content ——— */
.math-content {
    padding-top: 0;
    padding-left: 0;
    font-size: 1rem;
    line-height: 1.78;
    max-width: 100%;
    box-sizing: border-box;
    font-style: italic;
    color: color-mix(in srgb, var(--color-text-primary) 90%, var(--mb-color, var(--color-light-blue)));
}

/* Don't italicize math, code inside blocks */
.math-content mjx-container,
.math-content code,
.math-content pre {
    font-style: normal;
}

/* QED marker at the end of every proof */
.math-block.proof .math-content::after {
    content: "\25a0"; /* ■ */
    display: block;
    text-align: right;
    color: var(--mb-color);
    font-size: 1em;
    margin-top: 0.65rem;
    opacity: 0.75;
    font-style: normal;
}

/* ——— Counters ——— */
.math-block.definition { counter-increment: definition; }
.math-block.example    { counter-increment: example; }
.math-block.theorem    { counter-increment: theorem; }
.math-block.proof      { counter-increment: proof; }

/* self host your fonts, otherwise it can take a while to load, especially if the font is big */
body {
  font-family: 'Maple Mono', 'JetBrainsMonoNerd', 'Kosugi Maru', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: 'liga' 1, 'calt' 1;
}

/* Self-hosted Maple Mono faces (weights and italics available in assets/fonts/) */
@font-face {
  font-family: 'Maple Mono';
  src: url('../fonts/MapleMono-NF-CN-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Maple Mono';
  src: url('../fonts/MapleMono-NF-CN-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Maple Mono';
  src: url('../fonts/MapleMono-NF-CN-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Maple Mono';
  src: url('../fonts/MapleMono-NF-CN-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Maple Mono';
  src: url('../fonts/MapleMono-NF-CN-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Maple Mono';
  src: url('../fonts/MapleMono-NF-CN-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Maple Mono';
  src: url('../fonts/MapleMono-NF-CN-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Maple Mono';
  src: url('../fonts/MapleMono-NF-CN-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Maple Mono';
  src: url('../fonts/MapleMono-NF-CN-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Maple Mono';
  src: url('../fonts/MapleMono-NF-CN-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Maple Mono';
  src: url('../fonts/MapleMono-NF-CN-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Maple Mono';
  src: url('../fonts/MapleMono-NF-CN-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Maple Mono';
  src: url('../fonts/MapleMono-NF-CN-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Maple Mono';
  src: url('../fonts/MapleMono-NF-CN-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Let interactive text inherit the site font instead of falling back to system-ui */
button,
input,
select,
textarea,
summary,
details,
.collapse-box,
.collapse-box summary,
.math-block,
.math-content,
.math-label {
  font-family: inherit;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: 'liga' 1, 'calt' 1;
}
/* ===== MOBILE BOTTOM NAV ===== */
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 600px) {
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: color-mix(in srgb, var(--color-bg-secondary) 92%, black);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--color-bg-muted);
    padding: 0.5rem 0 calc(0.5rem + env(safe-area-inset-bottom, 0px));
    justify-content: space-around;
    align-items: stretch;
  }

  .mobile-bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.4rem 0.25rem;
    text-decoration: none;
    color: var(--color-text-muted);
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    border-radius: 10px;
    transition: color 0.2s, background 0.2s, transform 0.2s cubic-bezier(0.33, 1, 0.68, 1);
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-bottom-nav__item:active {
    transform: scale(0.92);
  }

  .mobile-bottom-nav__item.is-active {
    color: var(--color-accent);
  }

  .mobile-bottom-nav__item.is-active .mobile-bottom-nav__icon {
    background: color-mix(in srgb, var(--color-accent) 18%, transparent);
    color: var(--color-accent);
  }

  .mobile-bottom-nav__icon {
    width: 2.2rem;
    height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.1rem;
    transition: background 0.2s, color 0.2s, transform 0.2s cubic-bezier(0.33, 1, 0.68, 1);
  }

  .mobile-bottom-nav__item:hover .mobile-bottom-nav__icon,
  .mobile-bottom-nav__item:focus .mobile-bottom-nav__icon {
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    color: var(--color-accent);
    transform: translateY(-2px) scale(1.08);
  }

  .mobile-bottom-nav__label {
    font-family: var(--font-primary);
    font-size: 0.62rem;
    text-transform: lowercase;
  }

  /* Pad the body bottom so content isn't hidden behind the nav */
  body {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }

  /* Hide the top nav pills on mobile — bottom nav replaces them */
  .site-nav ul {
    display: none;
  }

  .site-header {
    padding: 0.5rem 0;
  }

  .header-container {
    flex-direction: row;
    gap: 0;
    margin: 0;
  }
}

/* ===== END MOBILE BOTTOM NAV ===== */

.site-header {
  background-color: transparent;
  box-shadow: none;
  padding: 1rem 0;
  width: 100%;
  position: static;
  top: unset;
  z-index: auto;
}

.header-container {
  width: 100%;
  margin: 1rem auto;
  padding: 0 2rem;
  display: flex;
  margin-left: 2rem;
  justify-content: space-between;
  align-items: center;
}

/* Nav spacing per original styles */
/* .site-nav right margin removed */

.site-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.5rem;
  background-color: #5b4a52;
  border-radius: 9999px;
  color: #e6d4be;
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
  perspective: 400px;
  overflow: hidden;
  will-change: transform;
}

.site-logo__swap {
  display: grid;
  position: relative;
  min-width: 8.3ch;
  justify-items: center;
  align-items: center;
  text-align: center;
  line-height: 1;
  z-index: 3;
}

.site-logo__label,
.site-version {
  grid-area: 1 / 1;
  transition: opacity 260ms ease, transform 260ms ease, filter 260ms ease;
}

.site-logo__label {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.site-version {
  color: #fff7e6;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(0.15rem) scale(0.98);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.85),
    0 0 8px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 3;
}

.site-logo:hover .site-version,
.site-logo:focus .site-version {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.site-logo:hover .site-logo__label,
.site-logo:focus .site-logo__label {
  opacity: 0;
  transform: translateY(-0.15rem) scale(0.98);
}

.site-logo__swap::before {
  content: "";
  position: absolute;
  inset: -0.22rem -0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-bg-secondary) 72%, black);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 0;
}

.site-logo:hover .site-logo__swap::before,
.site-logo:focus .site-logo__swap::before {
  opacity: 1;
  transform: scale(1);
}

.site-logo:hover,
.site-logo:focus {
  color: #fff7e6;
  background: linear-gradient(90deg, #ff6f91 0%, #ffb86c 100%);
  box-shadow: 0 0 48px 8px #ffb86c88, 0 4px 16px rgba(0, 0, 0, 0.18);
  outline: none;
}

.site-logo::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  opacity: 0;
  background: linear-gradient(120deg,
      rgba(255, 255, 255, 0.0) 0%,
      rgba(255, 255, 255, 0.7) 40%,
      rgba(255, 255, 255, 0.0) 60%,
      rgba(255, 255, 255, 0.3) 100%),
    repeating-linear-gradient(100deg,
      #ff6f91 0%, #ffb86c 20%, #6fcfff 40%, #b86cff 60%, #ff6f91 80%, #ffb86c 100%);
  background-size: 300% 100%, 200% 100%;
  z-index: 2;
  transition: opacity 0.3s;
}

.site-logo:hover::after,
.site-logo:focus::after {
  opacity: 1;
  animation: prismaticShine 6s linear infinite;
}

.site-logo.bobbing {
  animation: logoWaveBob 2.2s cubic-bezier(.68, -0.55, .27, 1.55) infinite;
}

.site-logo.shake {
  animation: shake 0.25s cubic-bezier(.68, -0.55, .27, 1.55) infinite;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-left__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.7625em; /* match right-side nav pill content height */
  padding: 0.4rem 1rem;
  background-color: #5b4a52;
  color: #e6d4be;
  border-radius: 9999px;
  text-decoration: none;
  font-weight: 500;
  font-size: 1em;
  line-height: 1.6;
  overflow: visible;
  will-change: transform, background-color, color;
  transition:
    background-color 0.35s cubic-bezier(.33, 1, .68, 1),
    color 0.35s cubic-bezier(.33, 1, .68, 1),
    transform 0.45s cubic-bezier(.33, 1, .68, 1),
    box-shadow 0.35s ease;
}

.header-icon-btn:hover,
.header-icon-btn:focus {
  background-color: #ff6f91;
  color: #fff7e6;
  transform: scale(1.06) translateY(-2px);
  transition-delay: 0s;
  box-shadow: 0 0 24px 4px rgba(255, 183, 108, 0.35), 0 4px 16px rgba(0, 0, 0, 0.18);
}

/* Matching prismatic shine */
.header-icon-btn::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: -8px;
  border-radius: 9999px;
  opacity: 0;
  background-image: linear-gradient(90deg,
    color-mix(in srgb, var(--color-blue) 60%, transparent) 0%,
    color-mix(in srgb, var(--color-purple) 65%, transparent) 33%,
    color-mix(in srgb, var(--color-pink) 65%, transparent) 66%,
    color-mix(in srgb, var(--color-yellow) 60%, transparent) 100%);
  background-size: 300% 300%;
  z-index: -1;
  filter: blur(10px);
  transition: opacity 0.25s, transform 0.35s;
}

.header-icon-btn:hover::after,
.header-icon-btn:focus::after {
  opacity: 0.9;
  transform: scale(1.02);
  animation: paletteGlow 1.6s linear infinite;
}

/* Match icon size to right-side nav icons */
.header-icon-btn i {
  font-size: 1.1em;
  min-width: 1.2em;
  text-align: center;
  display: inline-block;
}

.site-nav ul {
  margin-right: 7rem;
  padding: 0 0rem;
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  background-color: #5b4a52;
  border-radius: 9999px;
  text-decoration: none;
  color: #e6d4be;
  font-weight: 500;
  overflow: visible; /* allow glow to extend outside pill without tinting text */
  will-change: transform, background-color, color;
  transition:
    background-color 0.35s cubic-bezier(.33, 1, .68, 1),
    color 0.35s cubic-bezier(.33, 1, .68, 1),
    transform 0.45s cubic-bezier(.33, 1, .68, 1),
    box-shadow 0.35s ease;
}

.site-nav a:hover,
.site-nav a:focus {
  background-color: #ff6f91;
  color: #fff7e6;
  transform: scale(1.06) translateY(-2px);
  transition-delay: 0s;
  box-shadow: 0 0 24px 4px rgba(255, 183, 108, 0.35), 0 4px 16px rgba(0, 0, 0, 0.18);
}

/* Prismatic shine for nav pills to match site-logo */
.site-nav a::after {
  content: "";
  pointer-events: none;
  position: absolute;
  /* place glow slightly outside the pill so it doesn't tint the text */
  inset: -8px;
  border-radius: 9999px;
  opacity: 0;
  /* subtle palette gradient: blue -> purple -> pink -> yellow */
  background-image: linear-gradient(90deg,
    color-mix(in srgb, var(--color-blue) 60%, transparent) 0%,
    color-mix(in srgb, var(--color-purple) 65%, transparent) 33%,
    color-mix(in srgb, var(--color-pink) 65%, transparent) 66%,
    color-mix(in srgb, var(--color-yellow) 60%, transparent) 100%);
  background-size: 300% 300%;
  z-index: -1; /* sit behind the pill content/background so text is unaffected */
  filter: blur(10px);
  transition: opacity 0.25s, transform 0.35s;
}

.site-nav a:hover::after,
.site-nav a:focus::after {
  opacity: 0.9;
  transform: scale(1.02);
  /* faster color cycling on hover */
  animation: paletteGlow 1.6s linear infinite;
}

.site-nav a.site-views .nav-icon i {
  animation: eyeBlink 5.5s ease-in-out infinite;
  transform-origin: center;
}

.site-nav a.site-views:hover .nav-icon i,
.site-nav a.site-views:focus .nav-icon i {
  animation:
    eyeBlink 5.5s ease-in-out infinite,
    iconWaveRide 2.4s cubic-bezier(.68, -0.55, .27, 1.55) infinite;
}

/* Removed theme toggle pill styles */


/* Removed theme toggle icon overlay */

.site-nav .nav-text {
  opacity: 0;
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  transition:
    opacity 0.25s ease,
    max-width 0.3s ease,
    margin-left 0.3s ease;
}

/* Applied only after JS hover-delay passes */
.site-nav a.show-nav-text .nav-text {
  opacity: 1;
  max-width: 12rem;
  margin-left: 0.5em;
}

.site-nav .nav-count {
  display: inline-flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
}

.site-nav .nav-count .view-count-value {
  font-weight: 700;
}

/* Removed theme toggle button reset */

.site-nav .nav-icon {
  display: inline-block;
  min-width: 1.2em;
  text-align: center;
  font-size: 1.1em;
}

/* Default hover for all pills */
.site-nav a {
  transition:
    background-color 0.35s cubic-bezier(.33, 1, .68, 1),
    color 0.35s cubic-bezier(.33, 1, .68, 1),
    transform 0.45s cubic-bezier(.33, 1, .68, 1); /* smooth, no delay */
  will-change: transform, background-color, color;
}

.site-nav a:hover,
.site-nav a:focus {
  transform: scale(1.06) translateY(-2px);
  transition-delay: 0s; /* activate instantly on hover */
}

/* Move left on hover for left-arrow nav */
.nav-left a:hover,
.nav-left a:focus {
  transform: translateX(-10px);
}

/* Move right on hover for right-arrow nav */
.nav-right a:hover,
.nav-right a:focus {
  transform: translateX(10px);
}

/* Move up on hover for up-arrow nav (if you have one) */
.nav-up a:hover,
.nav-up a:focus {
  transform: translateY(-10px);
}

/* Move down on hover for down-arrow nav (if you have one) */
.nav-down a:hover,
.nav-down a:focus {
  transform: translateY(10px);
}

.site-nav a:hover .nav-icon i,
.site-nav a:focus .nav-icon i {
  animation: iconWaveRide 2.4s cubic-bezier(.68, -0.55, .27, 1.55) infinite;
  transition: color 0.2s;
}

@media (max-width: 1000px) {
  .header-container {
    margin: 0.5rem auto;
    margin-left: 0;
    padding: 0 1rem;
    flex-direction: column;
    gap: 0.9rem;
    align-items: stretch;
  }

  .site-logo {
    align-self: center;
  }

  .site-nav ul {
    margin-right: 0;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .site-nav a {
    padding: 0.45rem 0.8rem;
  }

  .site-nav .nav-text {
    opacity: 1;
    max-width: 12rem;
    margin-left: 0.45em;
  }
}

/* Landscape mode - compact header */
@media (max-width: 1000px) and (orientation: landscape) {
  .header-container {
    gap: 0.6rem;
    margin: 0.35rem auto;
  }

  .site-logo {
    font-size: 1.1rem;
    padding: 0.5rem 1.2rem;
  }

  .site-nav ul {
    gap: 0.5rem;
  }
}

/* Mobile landscape - even more compact */
@media (max-width: 620px) and (orientation: landscape) {
  .header-container {
    flex-direction: row;
    gap: 0.5rem;
    margin: 0.25rem auto;
  }

  .site-logo {
    font-size: 1rem;
    padding: 0.4rem 0.9rem;
    align-self: center;
  }

  .site-nav ul {
    gap: 0.4rem;
    justify-content: flex-start;
  }

  .site-nav a {
    padding: 0.35rem 0.65rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 620px) {
  .site-logo {
    font-size: 1.08rem;
    padding: 0.52rem 1rem;
  }

  .site-nav ul {
    gap: 0.5rem;
  }

  .site-nav a {
    font-size: 0.95rem;
    border-radius: 16px;
  }

  .site-nav .nav-text {
    margin-left: 0.35em;
  }
}

/* Small mobile: 480px and below */
@media (max-width: 480px) {
  .site-logo {
    font-size: 1rem;
    padding: 0.45rem 0.85rem;
  }

  .site-nav ul {
    gap: 0.4rem;
  }

  .site-nav a {
    font-size: 0.9rem;
    padding: 0.35rem 0.7rem;
  }

  .site-nav .nav-text {
    max-width: 10rem;
    margin-left: 0.3em;
    font-size: 0.95rem;
  }
}

/* Ultra small: 360px and below */
@media (max-width: 360px) {
  .site-logo {
    font-size: 0.9rem;
    padding: 0.4rem 0.7rem;
  }

  .site-nav a {
    font-size: 0.85rem;
    padding: 0.3rem 0.6rem;
  }

  .site-nav .nav-text {
    display: none;
  }

  .site-nav .nav-icon {
    font-size: 1em;
  }
}

@keyframes iconWaveRide {
  0% {
    transform: translateY(0) rotate(-8deg);
  }

  20% {
    transform: translateY(-3px) rotate(0deg);
  }

  50% {
    transform: translateY(0) rotate(8deg);
  }

  80% {
    transform: translateY(3px) rotate(0deg);
  }

  100% {
    transform: translateY(0) rotate(-8deg);
  }
}

@keyframes navPopWiggle {
  0% {
    transform: scale(1) rotate(0deg);
  }

  20% {
    transform: scale(1.08) rotate(-4deg);
  }

  40% {
    transform: scale(1.12) rotate(4deg);
  }

  60% {
    transform: scale(1.08) rotate(-2deg);
  }

  80% {
    transform: scale(1.10) rotate(2deg);
  }

  100% {
    transform: scale(1.06) rotate(0deg);
  }
}

@keyframes eyeBlink {
  0%,
  90%,
  100% {
    transform: scaleY(1);
  }

  92% {
    transform: scaleY(0.08);
  }

  94% {
    transform: scaleY(1);
  }

  96% {
    transform: scaleY(0.08);
  }

  98% {
    transform: scaleY(1);
  }
}

@keyframes crazyLogo {
  0% {
    transform: scale(1) rotate(0deg) skewY(0deg);
    filter: hue-rotate(0deg) brightness(1);
    text-shadow: none;
  }

  10% {
    transform: scale(1.3) rotate(-18deg) skewY(12deg);
    filter: hue-rotate(60deg) brightness(1.2);
    text-shadow: 0 0 8px #ffb86c;
  }

  20% {
    transform: scale(0.9) rotate(24deg) skewY(-16deg);
    filter: hue-rotate(120deg) brightness(1.1);
  }

  30% {
    transform: scale(1.25) rotate(-24deg) skewY(18deg);
    filter: hue-rotate(180deg) brightness(1.3);
  }

  40% {
    transform: scale(1.1) rotate(20deg) skewY(-12deg);
    filter: hue-rotate(240deg) brightness(1.2);
  }

  50% {
    transform: scale(1.4) rotate(0deg) skewY(0deg);
    filter: hue-rotate(300deg) brightness(1.4);
    text-shadow: 0 0 24px #ff6f91;
  }

  60% {
    transform: scale(0.85) rotate(16deg) skewY(8deg);
    filter: hue-rotate(360deg) brightness(1.1);
  }

  70% {
    transform: scale(1.3) rotate(-20deg) skewY(-16deg);
    filter: hue-rotate(420deg) brightness(1.3);
  }

  80% {
    transform: scale(1.1) rotate(18deg) skewY(14deg);
    filter: hue-rotate(480deg) brightness(1.2);
  }

  90% {
    transform: scale(1.35) rotate(-12deg) skewY(-10deg);
    filter: hue-rotate(540deg) brightness(1.4);
    text-shadow: 0 0 32px #fff7e6;
  }

  100% {
    transform: scale(1) rotate(0deg) skewY(0deg);
    filter: hue-rotate(720deg) brightness(1);
    text-shadow: none;
  }
}

@keyframes logoBob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes logoWaveBob {
  0% {
    transform: translateY(0) rotate(-2deg);
  }

  10% {
    transform: translateY(-3px) rotate(2deg);
  }

  20% {
    transform: translateY(-6px) rotate(-2deg);
  }

  30% {
    transform: translateY(-9px) rotate(2deg);
  }

  40% {
    transform: translateY(-6px) rotate(-2deg);
  }

  50% {
    transform: translateY(0) rotate(2deg);
  }

  60% {
    transform: translateY(6px) rotate(-2deg);
  }

  70% {
    transform: translateY(9px) rotate(2deg);
  }

  80% {
    transform: translateY(6px) rotate(-2deg);
  }

  90% {
    transform: translateY(3px) rotate(2deg);
  }

  100% {
    transform: translateY(0) rotate(-2deg);
  }
}

@keyframes prismaticShine {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

/* Palette-based subtle glow (uses site palette variables) */
@keyframes paletteGlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes shake {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  20% {
    transform: translate(-2px, 2px) rotate(-2deg);
  }

  40% {
    transform: translate(-4px, -2px) rotate(2deg);
  }

  60% {
    transform: translate(4px, 2px) rotate(-2deg);
  }

  80% {
    transform: translate(2px, -2px) rotate(2deg);
  }

  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* =====================================================
   RESPONSIVE OVERRIDES (late cascade — must win)
   ===================================================== */

/* ----- Tablet & small-desktop (≤ 1100px): centered single-row icon header -----
   All icons treated as one centered, uniformly-spaced row.
   No left/right split — header-left and site-nav share the same gap. */
@media (max-width: 1100px) {
  .header-container {
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.65rem;
    padding: 0 1.25rem;
    margin: 0.6rem auto;
    margin-left: auto !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .header-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
  }

  .header-left__actions {
    display: flex !important;
    align-items: center;
    gap: 0.65rem;
    margin-left: 0;
  }

  /* Force icon-only labels site-wide on tablet — kill the auto-show */
  .site-nav .nav-text {
    display: none !important;
  }

  .site-nav {
    display: flex;
  }

  .site-nav ul {
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 0.65rem;
    margin: 0 !important;
    padding: 0;
  }

  /* Uniform icon-pill geometry — left actions and right nav match exactly */
  .header-icon-btn,
  .site-nav a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 1.7625em;
    min-width: 2.5em;
    padding: 0.4rem 0.75rem;
    font-size: 1em;
    line-height: 1.6;
    border-radius: 9999px;
  }

  /* Icon span centered within the pill — no left bias */
  .site-nav .nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    min-width: auto;
    width: 1.2em;
    text-align: center;
  }

  .header-icon-btn i,
  .site-nav .nav-icon i {
    display: inline-block;
    line-height: 1;
  }
}

/* ----- Medium tablet (≤ 820px): same uniform gap, slightly tighter pad ----- */
@media (max-width: 820px) {
  .header-container {
    padding: 0 1rem;
    gap: 0.55rem;
  }

  .header-left,
  .header-left__actions,
  .site-nav ul {
    gap: 0.55rem !important;
  }

  .header-icon-btn,
  .site-nav a {
    padding: 0.4rem 0.65rem;
  }

  .site-logo {
    font-size: 1.05rem;
    padding: 0.45rem 0.9rem;
  }
}

/* ----- Small tablet (≤ 680px): drop view-count pill, tighter spacing ----- */
@media (max-width: 680px) {
  .header-container {
    padding: 0 1rem;
    gap: 0.5rem;
  }

  .header-left,
  .header-left__actions,
  .site-nav ul {
    gap: 0.5rem !important;
  }

  .header-icon-btn,
  .site-nav a {
    padding: 0.4rem 0.55rem;
  }

  /* Drop the view-count pill — duplicates info shown elsewhere */
  .site-nav a.site-views {
    display: none;
  }

  .site-logo {
    font-size: 0.95rem;
    padding: 0.4rem 0.7rem;
  }

  .site-logo i {
    font-size: 0.95em;
  }
}

/* ----- Tight tablet (≤ 620px): also drop contact pill ----- */
@media (max-width: 620px) {
  .header-container {
    padding: 0 1rem;
    gap: 0.45rem;
  }

  .header-left,
  .header-left__actions,
  .site-nav ul {
    gap: 0.45rem !important;
  }

  .header-icon-btn,
  .site-nav a {
    padding: 0.4rem 0.5rem;
  }

  .site-logo {
    font-size: 0.92rem;
    padding: 0.4rem 0.65rem;
  }

  /* Drop contact pill — emails go via the visible footer */
  .site-nav li:has(a[href*="/contact"]) {
    display: none;
  }
}

/* ----- Phone (≤ 600px): mobile-bottom-nav takes over ----- */
@media (max-width: 600px) {
  .site-nav ul {
    display: none !important;
  }

  .header-left__actions {
    display: none !important;
  }

  .header-container {
    justify-content: center !important;
    padding: 0 0.75rem;
    margin: 0.4rem auto;
  }

  .site-logo {
    font-size: 1rem;
    padding: 0.45rem 1rem;
  }
}

@media (max-width: 360px) {
  .site-logo {
    font-size: 0.92rem;
    padding: 0.4rem 0.85rem;
  }
}
.imgp {
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  max-width: 100%;
  height: auto;
  border: 2px solid var(--color-bg-muted);
}

figure {
  margin: 1.75rem 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

figcaption {
  padding-top: 0.9rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.84rem;
  line-height: 1.45;
  max-width: 70ch;
  margin: 0 auto;
}

iframe {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  /* maintain typical video aspect ratio */
  border-radius: 12px;
  /* keep rounded corners consistent */
  display: block;
  margin: 1rem auto;
  border: 2px solid var(--color-bg-muted);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
}

iframe[src*="spotify.com"] {
  height: 352px !important;
  /* keep original height */
}
/* ============================================
   MOBILE RESPONSIVE EMBED ENHANCEMENTS
   ============================================ */

@media (max-width: 768px) {
  iframe,
  video,
  audio,
  object,
  embed {
    max-width: 100%;
  }

  .embed-container {
    margin: 1rem 0;
  }
}

@media (max-width: 600px) {
  .embed-container {
    margin: 0.75rem 0;
    border-radius: 8px;
    overflow: hidden;
  }

  iframe,
  video {
    border-radius: 6px;
  }
}

@media (max-width: 480px) {
  .embed-container {
    margin: 0.5rem 0;
  }

  iframe,
  video {
    border-radius: 4px;
  }
}

/* Smooth aspect ratio support */
@supports (aspect-ratio: 16/9) {
  .embed-container {
    aspect-ratio: 16/9;
  }
}

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  scrollbar-gutter: stable;
}

header {
  min-height: 50px;
}

footer {
  min-height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  text-align: center;
  padding: 0.25rem 0;
  line-height: 1.5;
}

main {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

.footer-separator {
  border: none;
  border-top: 2px solid #5b4a52;
  width: calc(100% - 100px);
  margin: 2rem auto;
  opacity: 0.8;
}

footer .section-separator {
  border-top: 2px solid #5b4a52;
  opacity: 0.8;
  margin: 0 auto 0.3rem;
}

.page__footer-copyright {
  font-size: 0.8em;
  margin-bottom: 1rem;
  padding: 7px 0 4px;
  color: var(--color-text-muted);
}

/* ============================================
   MOBILE RESPONSIVE FOOTER ENHANCEMENTS
   ============================================ */

@media (max-width: 768px) {
  footer {
    min-height: 50px;
    padding: 0.25rem 0;
    gap: 0.2rem;
    line-height: 1.4;
  }

  .footer-separator {
    width: calc(100% - 60px);
    margin: 1.5rem auto;
  }

  footer .section-separator {
    margin: 0 auto 0.5rem;
  }

  .page__footer-copyright {
    font-size: 0.75em;
    padding: 6px 0 4px;
  }
}

@media (max-width: 600px) {
  footer {
    min-height: 50px;
    padding: 0.2rem 0;
  }

  .footer-separator {
    width: calc(100% - 40px);
    margin: 1rem auto;
  }

  .page__footer-copyright {
    font-size: 0.7em;
    text-align: center;
    padding: 6px 0 4px;
  }
}

@media (max-width: 480px) {
  footer {
    min-height: 50px;
    padding: 0.15rem 0;
  }

  .footer-separator {
    width: calc(100% - 20px);
    margin: 0.75rem auto;
  }
}


.box {
  position: relative;
  padding: 1rem;
  padding-left: 4.5rem; /* Extra left padding to make space for the stripe + icon */
  border-radius: 12px;
  margin: 1.5rem 0;
  background: color-mix(in srgb, var(--stripe-color, var(--color-bg-muted)) 10%, var(--color-bg-primary));
  color: var(--color-text-primary);
  border: 1px solid color-mix(in srgb, var(--stripe-color, var(--color-info)) 36%, var(--color-bg-secondary));
  overflow: hidden;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.2);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Left stripe — negative insets extend past the border so the box's
   own overflow:hidden + border-radius clips it cleanly with no end gaps */
.box::before {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: -2px;
  width: 3.5rem;
  background: var(--stripe-color, var(--color-info));
}

/* Centered icon inside the stripe */
.box::after {
  content: "\f05a"; /* Default: info icon */
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.3rem;
  color: var(--stripe-color, var(--color-info));
  pointer-events: none;
}

/* Hover lift — all box types */
.box:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.28),
    -3px 0 18px color-mix(in srgb, var(--stripe-color, var(--color-bg-muted)) 24%, transparent);
}

/* Type-specific customizations */
.box.note::after {
  content: "\f249";
}
.box.alert::after {
  content: "\f071";
}
.box.success::after {
  content: "\f058";
}

.box.info,
.box.info::before {
  --stripe-color: #beae94;
}
.box.alert,
.box.alert::before {
  --stripe-color: #c85a50;
}
.box.success,
.box.success::before {
  --stripe-color: #8ca589;
}
.box.note,
.box.note::before {
  --stripe-color: #4a3e44;
}

.box.info::after {
  color: #fdfbd4;
}
.box.alert::after {
  color: #fdfbd4;
}
.box.success::after {
  color: #fdfbd4;
}
.box.note::after {
  color: #fdfbd4;
}

.box.info {
  background-color: color-mix(in srgb, #beae94 12%, var(--color-bg-primary));
  border: 2px solid #fdfbd4;
}

.box.alert {
  background-color: color-mix(in srgb, #c85a50 12%, var(--color-bg-primary));
  border: 2px solid #fdfbd4;
}

.box.success {
  background-color: color-mix(in srgb, #8ca589 12%, var(--color-bg-primary));
  border: 2px solid #fdfbd4;
}

.box.note {
  background-color: color-mix(in srgb, #4a3e44 22%, var(--color-bg-primary));
  border: 2px solid #fdfbd4;
}

/* ========================
   Extended box types (math callouts)
   ======================== */

.box.definition,
.box.definition::before {
  --stripe-color: #3e8fb0;  /* calypso/blue */
}
.box.definition::after {
  content: "\f02d";  /* fa-book */
  color: #fdfbd4;
  font-size: 1.4rem;
}
.box.definition {
  border: 1.5px solid color-mix(in srgb, #3e8fb0 55%, transparent);
  border-top: 1.5px solid color-mix(in srgb, #3e8fb0 38%, transparent);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 color-mix(in srgb, #3e8fb0 22%, transparent),
    -2px 0 14px color-mix(in srgb, #3e8fb0 14%, transparent);
}
.box.definition:hover {
  border-color: color-mix(in srgb, #3e8fb0 75%, transparent);
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.28),
    -4px 0 22px color-mix(in srgb, #3e8fb0 34%, transparent),
    inset 0 1px 0 color-mix(in srgb, #3e8fb0 30%, transparent);
}

.box.example,
.box.example::before {
  --stripe-color: #37d99e;  /* radium/green */
}
.box.example::after {
  content: "\f0eb";  /* fa-lightbulb */
  color: #fdfbd4;
  font-size: 1.4rem;
}
.box.example {
  border: 1.5px solid color-mix(in srgb, #37d99e 50%, transparent);
  border-top: 1.5px solid color-mix(in srgb, #37d99e 32%, transparent);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 color-mix(in srgb, #37d99e 20%, transparent),
    -2px 0 14px color-mix(in srgb, #37d99e 12%, transparent);
}
.box.example:hover {
  border-color: color-mix(in srgb, #37d99e 70%, transparent);
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.28),
    -4px 0 22px color-mix(in srgb, #37d99e 30%, transparent),
    inset 0 1px 0 color-mix(in srgb, #37d99e 28%, transparent);
}

.box.theorem,
.box.theorem::before {
  --stripe-color: #c4a7e7;  /* bright lavender/purple */
}
.box.theorem::after {
  content: "\f534";  /* fa-infinity */
  color: #fdfbd4;
  font-size: 1.4rem;
}
.box.theorem {
  border: 1.5px solid color-mix(in srgb, #c4a7e7 55%, transparent);
  border-top: 1.5px solid color-mix(in srgb, #c4a7e7 35%, transparent);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 color-mix(in srgb, #c4a7e7 22%, transparent),
    -2px 0 14px color-mix(in srgb, #c4a7e7 16%, transparent);
}
.box.theorem:hover {
  border-color: color-mix(in srgb, #c4a7e7 78%, transparent);
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.28),
    -4px 0 22px color-mix(in srgb, #c4a7e7 38%, transparent),
    inset 0 1px 0 color-mix(in srgb, #c4a7e7 30%, transparent);
}

.box.proof,
.box.proof::before {
  --stripe-color: #ecd28b;  /* buttercream/light-yellow */
}
.box.proof::after {
  content: "\f560";  /* fa-check-double */
  color: #fdfbd4;
  font-size: 1.4rem;
}
.box.proof {
  border: 1.5px solid color-mix(in srgb, #ecd28b 50%, transparent);
  border-top: 1.5px solid color-mix(in srgb, #ecd28b 32%, transparent);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 color-mix(in srgb, #ecd28b 22%, transparent),
    -2px 0 14px color-mix(in srgb, #ecd28b 14%, transparent);
}
.box.proof:hover {
  border-color: color-mix(in srgb, #ecd28b 72%, transparent);
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.28),
    -4px 0 22px color-mix(in srgb, #ecd28b 34%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ecd28b 30%, transparent);
}

/* Links inside all boxes: use note style, except info, alert, success have a special color */
.box a,
.box a:focus {
  text-decoration: underline;
  font-weight: 600;
}

/* --- ADD THESE RULES FOR LISTS INSIDE BOXES --- */
.box ul,
.box ol {
  padding-left: 1.5em;
  /* Standard indentation for lists */
  margin-top: 0.5em;
  /* Space above the list */
  margin-bottom: 0.5em;
  /* Space below the list */
}

.box ul {
  list-style-type: disc;
  /* Default bullet for unordered lists */
}

.box ol {
  list-style-type: decimal;
  /* Default numbering for ordered lists */
}

/* Adjust for nested lists to prevent excessive spacing */
.box ul ul,
.box ol ol,
.box ul ol,
.box ol ul {
  margin-top: 0;
  margin-bottom: 0;
}

/* ========================
   Intuition & Pitfall
   ======================== */

.box.intuition,
.box.intuition::before {
  --stripe-color: #9ccfd8;  /* tenzing/light-blue */
}
.box.intuition::after {
  content: "\f0eb";  /* fa-lightbulb */
  color: #fdfbd4;
  font-size: 1.4rem;
}
.box.intuition {
  border: 1.5px solid color-mix(in srgb, #9ccfd8 50%, transparent);
  border-top: 1.5px solid color-mix(in srgb, #9ccfd8 32%, transparent);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 color-mix(in srgb, #9ccfd8 20%, transparent),
    -2px 0 14px color-mix(in srgb, #9ccfd8 14%, transparent);
}
.box.intuition:hover {
  border-color: color-mix(in srgb, #9ccfd8 72%, transparent);
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.28),
    -4px 0 22px color-mix(in srgb, #9ccfd8 32%, transparent),
    inset 0 1px 0 color-mix(in srgb, #9ccfd8 28%, transparent);
}

.box.pitfall,
.box.pitfall::before {
  --stripe-color: #f6c177;  /* wheat-field/yellow-orange */
}
.box.pitfall::after {
  content: "\f06a";  /* fa-circle-exclamation */
  color: #fdfbd4;
  font-size: 1.4rem;
}
.box.pitfall {
  border: 1.5px solid color-mix(in srgb, #f6c177 50%, transparent);
  border-top: 1.5px solid color-mix(in srgb, #f6c177 32%, transparent);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 color-mix(in srgb, #f6c177 20%, transparent),
    -2px 0 14px color-mix(in srgb, #f6c177 14%, transparent);
}
.box.pitfall:hover {
  border-color: color-mix(in srgb, #f6c177 72%, transparent);
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.28),
    -4px 0 22px color-mix(in srgb, #f6c177 34%, transparent),
    inset 0 1px 0 color-mix(in srgb, #f6c177 28%, transparent);
}

/* ========================
   RESPONSIVE — callout boxes on tablet & phone
   ======================== */
@media (max-width: 900px) {
  .box {
    width: auto !important;
    max-width: 100% !important;
    margin: 1rem 0;
    padding: 0.85rem 0.85rem 0.85rem 3rem;
    box-sizing: border-box;
  }

  .box::before {
    width: 2.4rem;
  }

  .box::after {
    left: 0.75rem;
    font-size: 1.1rem;
  }
}

@media (max-width: 600px) {
  .box {
    padding: 0.75rem 0.75rem 0.75rem 2.6rem;
    font-size: 0.92rem;
    line-height: 1.55;
    border-radius: 8px;
  }

  .box::before {
    width: 2rem;
  }

  .box::after {
    left: 0.55rem;
    font-size: 1rem;
  }

  .box p {
    margin: 0.4rem 0;
  }

  .box p:first-child { margin-top: 0; }
  .box p:last-child  { margin-bottom: 0; }
}

/* ================
   Table Styles
   ================ */
table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	margin: 1.5rem 0;
	border-radius: 12px;
	overflow: hidden;
	border: 2px solid var(--color-bg-muted);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
}

th,
td {
	border: none;
	border-bottom: 2px solid var(--color-bg-muted);
	border-right: 2px solid var(--color-bg-muted);
	padding: 0.65em 1.1em;
	text-align: left;
	transition: background 0.15s ease;
}

th:last-child,
td:last-child {
	border-right: none;
}

tr:last-child td {
	border-bottom: none;
}

th {
	background: color-mix(in srgb, var(--color-bg-muted) 55%, var(--color-bg-primary));
	color: var(--color-text-primary);
	font-weight: 700;
	font-size: 0.85em;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

td {
	background: var(--color-bg-secondary);
	color: var(--color-text-primary);
}

tr:hover td {
	background: color-mix(in srgb, var(--color-bg-muted) 28%, var(--color-bg-secondary));
}

/* ================
   Tabs Container
   ================ */
.tabs-container {
	margin: 1.75rem 0;
	background: var(--color-bg-secondary);
	border-radius: 14px;
	overflow: hidden;
	border: 2px solid var(--color-bg-muted);
	box-shadow: 0 10px 32px rgba(0, 0, 0, 0.24);
}

/* Tab header bar — slightly darker than content */
.tab-headers {
	display: flex;
	background: color-mix(in srgb, var(--color-bg-primary) 85%, black);
	padding: 0.5rem 0.6rem 0;
	gap: 0.25rem;
	border-bottom: 2px solid var(--color-bg-muted);
	overflow-x: auto;
	scrollbar-width: none;
}

.tab-headers::-webkit-scrollbar {
	display: none;
}

.tab-button {
	background: transparent;
	border: 2px solid transparent;
	border-bottom: none;
	padding: 0.5rem 1.1rem 0.6rem;
	border-radius: 8px 8px 0 0;
	cursor: url("/assets/cursors/slapping cat_32-48-64.ani") 16 16, auto;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-text-muted);
	font-family: inherit;
	position: relative;
	transition: color 0.18s ease, background 0.18s ease, transform 0.15s ease;
	white-space: nowrap;
	letter-spacing: 0.03em;
}

.tab-button:hover {
	color: var(--color-text-primary);
	background: color-mix(in srgb, var(--color-bg-muted) 35%, transparent);
	transform: translateY(-2px);
	cursor: url("/assets/cursors/hand.png") 0 0, auto !important;
}

.tab-button:focus {
	cursor: url("/assets/cursors/hand.png") 0 0, auto !important;
}

/* Active tab: raised above the header bar, connected to content */
.tab-button.active {
	color: var(--color-light-yellow);
	background: var(--color-bg-secondary);
	border-color: var(--color-bg-muted);
	font-weight: 700;
	transform: translateY(0);
}

/* Pink→yellow underline on active tab */
.tab-button.active::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--color-pink), var(--color-light-yellow));
}

/* ================
   Tab Content
   ================ */
.tab-content-container {
	padding: 1.5rem;
	background: var(--color-bg-secondary);
}

.tab-content {
	display: none;
	opacity: 0;
	transform: translateY(8px);
}

.tab-content.active {
	display: block;
	animation: tabFadeIn 0.28s ease forwards;
}

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

.tab-content ul {
	list-style: disc;
	padding-left: 1.25rem;
	margin: 0;
	color: var(--color-text-primary);
}

.tab-content li {
	margin-bottom: 0.75rem;
	padding-left: 0.25rem;
}

.tab-content a {
	transition: color 0.2s ease, transform 0.2s ease;
}

.tab-content a:hover {
	transform: translateX(3px);
}

/* ================
   Responsive
   ================ */
.table-responsive {
	transition: box-shadow 0.2s ease;
}

@media (max-width: 768px) {
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
  }
  table { font-size: 0.9rem; }
  th, td { padding: 0.55rem 0.75rem; }
}

@media (max-width: 600px) {
  .table-responsive { margin: 1rem 0; }
  table { font-size: 0.8rem; }
  th, td { padding: 0.4rem 0.6rem; }
  .tab-headers { padding: 0.4rem 0.4rem 0; }
}

@media (max-width: 480px) {
  table { font-size: 0.75rem; }
  th, td { padding: 0.35rem 0.5rem; }
}

@media (hover: none) and (pointer: coarse) {
  th, td { transition: background-color 0.15s ease; }
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.8) rotate(-5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes ripplePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(253, 94, 58, 0.4);
    }
    100% {
        box-shadow: 0 0 8px 4px rgba(253, 94, 58, 0.6);
    }
}

.kanji-section {
  position: relative; /* Make sure this is set */
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 0;
  box-sizing: border-box;
}

.kanji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 1rem;
    max-width: 100%;
    padding: 0;
    margin: 0 auto;
    background-color: var(--color-bg-primary);
}

.kanji-card {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: 3rem;
    font-family: 'Kosugi Maru', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--color-bg-muted);
    border-radius: 0.5rem;
    cursor: url("/assets/cursors/slapping cat_32-48-64.ani") 16 16, auto;
    user-select: none;
    /* tabindex: 0 (HTML attribute) */

    transform: scale(1);
    opacity: 0;
    animation: popIn 0.2s ease forwards;
    animation-delay: calc(var(--i, 0) * 10ms);

    transition:
        transform 0.25s cubic-bezier(0.25, 1.5, 0.5, 1),
        box-shadow 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.kanji-card:hover,
.kanji-card:focus {
    outline: none;
    transform: scale(1.15);
    box-shadow: 0 0 15px var(--color-accent);
    background-color: var(--color-bg-primary);
    border-color: var(--color-accent);
}

.kanji-card.selected {
    background-color: var(--color-bg-primary);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
    transform: scale(1.1);
    border-color: var(--color-accent);
}

.kanji-details-panel {
  display: none; /* hidden by default */
  grid-column: 1 / -1;
  background-color: var(--color-bg-secondary);
  border: 2px solid var(--color-bg-muted);
  border-radius: 0.5rem;
  padding: 2rem 2.5rem;
  color: var(--color-text-primary);
  font-family: 'Kosugi Maru', sans-serif;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
  user-select: text;
  margin: 1rem 0;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.kanji-details-panel.visible {
  display: flex; /* only show panel when .visible */
}

.kanji-details-panel .text-content {
    flex-grow: 1; /* Allow text content to take available space */
    text-align: left; /* Align text to the left */
}

.kanji-details-panel p {
    margin-bottom: 0.5rem;
}

.kanji-details-panel sec {
    color: var(--color-accent);
    text-decoration: underline;
}

.audio-controls {
    display: flex;
    align-items: center; /* Vertically center the button within its container */
    margin-left: 20px; /* Space between text and button */
    flex-shrink: 0; /* Prevent button from shrinking */
}

.play-button {
    background-color: var(--color-success);
    border: none;
    color: white;
    padding: 15px; /* Increased padding for bigger button */
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: url("/assets/cursors/slapping cat_32-48-64.ani") 16 16, auto;
    border-radius: 50%; /* Make it circular */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    width: 60px; /* Fixed width for consistent circle */
    height: 60px; /* Fixed height for consistent circle */
}

.play-button:hover {
    background-color: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

.play-button:active {
    background-color: #3e8e41;
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.play-button svg {
    fill: white;
    width: 32px; /* Increased SVG size */
    height: 32px; /* Increased SVG size */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .kanji-grid {
        grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
        padding: 15px;
        gap: 0.8rem;
    }
    .kanji-card {
        font-size: 2.5rem;
        padding: 12px;
    }
    .kanji-details-panel {
        padding: 0.8rem;
        width: calc(100% - 30px);
        flex-direction: column; /* Stack items vertically on small screens */
        align-items: center; /* Center items when stacked */
    }
    .kanji-details-panel .text-content {
        width: 100%; /* Take full width when stacked */
        margin-bottom: 15px; /* Space below text when stacked */
    }
    .audio-controls {
        margin-left: 0; /* Remove left margin when stacked */
        margin-top: 0; /* No extra top margin needed */
    }
    .play-button {
        width: 50px;
        height: 50px;
        padding: 12px;
    }
    .play-button svg {
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 480px) {
    .kanji-grid {
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
        padding: 10px;
        gap: 0.6rem;
    }
    .kanji-card {
        font-size: 2rem;
        padding: 10px;
    }
    .kanji-details-panel {
        padding: 0.6rem;
        width: calc(100% - 20px);
    }
    .play-button {
        width: 45px;
        height: 45px;
        padding: 10px;
    }
    .play-button svg {
        width: 24px;
        height: 24px;
    }
}

.kanji-placeholder {
  height: 0;
  margin: 0;
  padding: 0;
}


/* ══════════════════════════════════
   File Card
   ══════════════════════════════════ */
.file-card {
    display: flex;
    align-items: center;
    background: var(--color-bg-secondary);
    border-radius: 16px;
    padding: 1.2em 1.4em 1.2em 0;
    margin: 1.5em 0 0.5em 0;
    width: 100%;
    max-width: 100%;
    border: 2px solid var(--color-bg-muted);
    transition:
        box-shadow 0.32s cubic-bezier(.33, 1, .68, 1),
        transform  0.32s cubic-bezier(.33, 1, .68, 1),
        border-color 0.22s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    will-change: box-shadow, transform;
    color: inherit;
    box-sizing: border-box;
    gap: 0;
}

.file-card:hover,
.file-card:focus-within {
    box-shadow:
        0 10px 48px color-mix(in srgb, var(--color-light-yellow) 22%, transparent),
        0 2px 16px rgba(0, 0, 0, 0.28);
    border-color: color-mix(in srgb, var(--color-light-yellow) 55%, var(--color-bg-muted));
    transform: translateY(-5px) scale(1.018);
}

/* shimmer sweep */
.file-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 0%,
        color-mix(in srgb, var(--color-light-yellow) 10%, transparent) 45%,
        color-mix(in srgb, var(--color-light-yellow) 4%, transparent) 55%,
        transparent 100%
    );
    opacity: 0;
    pointer-events: none;
    translate: -100%;
    transition: opacity 0.2s ease, translate 0s 0.2s;
    z-index: 0;
}

.file-card:hover::before,
.file-card:focus-within::before {
    opacity: 1;
    translate: 0%;
    transition: opacity 0.1s ease, translate 0.55s cubic-bezier(.4, 0, .2, 1);
}

/* scan line that travels down on hover */
.file-card::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--color-light-yellow) 40%, transparent),
        transparent
    );
    top: -2px;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.15s ease;
}

.file-card:hover::after,
.file-card:focus-within::after {
    opacity: 1;
    animation: fc-scanline 0.55s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes fc-scanline {
    from { top: -2px; }
    to   { top: calc(100% + 2px); }
}

/* ── Icon ── */
.file-card__icon {
    font-size: 2.4em;
    color: var(--color-light-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.2rem 0 1.8rem;
    flex-shrink: 0;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
    position: relative;
    z-index: 1;
}

.file-card:hover .file-card__icon,
.file-card:focus-within .file-card__icon {
    transform: scale(1.22) rotate(-10deg);
    filter: drop-shadow(0 0 16px color-mix(in srgb, var(--color-light-yellow) 70%, transparent));
}

/* ── Info ── */
.file-card__info {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.file-card__name {
    font-size: 1.08em;
    font-weight: 700;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.7em;
    letter-spacing: 0.01em;
    margin-bottom: 0.15em;
}

.file-card__size {
    font-size: 0.76em;
    color: var(--color-light-purple);
    background: var(--color-bg-primary);
    border-radius: 999px;
    padding: 0.1em 0.65em;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.file-card__desc {
    font-size: 0.9em;
    color: var(--color-text-muted);
    margin-top: 0.2em;
    opacity: 0.88;
    letter-spacing: 0.01em;
    transition: color 0.2s ease, opacity 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.file-card:hover .file-card__desc,
.file-card:focus-within .file-card__desc {
    opacity: 1;
    color: var(--color-text-primary);
}

/* ── Action buttons (always visible, icon-only) ── */
.file-card__actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0 1.2rem 0 0.6rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.file-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1.5px solid transparent;
    cursor: pointer;
    font-size: 0.82em;
    transition:
        background  0.18s ease,
        color       0.18s ease,
        border-color 0.18s ease,
        transform   0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-decoration: none;
    flex-shrink: 0;
}

.file-card__btn--view {
    color: var(--color-light-blue, #89c4e1);
    border-color: color-mix(in srgb, var(--color-blue) 40%, transparent);
    background: color-mix(in srgb, var(--color-blue) 14%, transparent);
}

.file-card__btn--view:hover {
    background: color-mix(in srgb, var(--color-blue) 28%, transparent);
    border-color: var(--color-light-blue, #89c4e1);
    color: #fff;
    transform: scale(1.12);
}

.file-card__btn--dl {
    color: var(--color-green);
    border-color: color-mix(in srgb, var(--color-green) 38%, transparent);
    background: color-mix(in srgb, var(--color-green) 12%, transparent);
}

.file-card__btn--dl:hover {
    background: color-mix(in srgb, var(--color-green) 26%, transparent);
    border-color: var(--color-green);
    color: #fff;
    transform: scale(1.12);
}

/* caption below the card */
.file-card__caption {
    text-align: center;
    color: var(--color-light-blue);
    font-size: 0.9em;
    margin: 0.5em auto 2em;
    width: 50%;
    min-width: 240px;
    max-width: 100%;
    letter-spacing: 0.01em;
    opacity: 0.8;
}


/* ══════════════════════════════════
   File View Overlay
   ══════════════════════════════════ */
.fv-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.fv-overlay.open {
    opacity: 1;
    pointer-events: all;
}

/* ── Panel (the "window") ── */
.fv-panel {
    background: #1a1520;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    width: 100%;
    max-width: 860px;
    max-height: 84vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow:
        0 32px 100px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255,255,255,0.04);
    transform: scale(0.92) translateY(16px);
    transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.fv-overlay.open .fv-panel {
    transform: scale(1) translateY(0);
}

/* ── Title bar (macOS-style) ── */
.fv-titlebar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    background: #110e14;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
    user-select: none;
}

/* traffic light dots */
.fv-dots {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    flex-shrink: 0;
}

.fv-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    transition: filter 0.15s ease, transform 0.15s ease;
    flex-shrink: 0;
}

.fv-dots:hover .fv-dot { font-size: 7px; font-weight: 900; color: rgba(0,0,0,0.55); }

.fv-dot--close  { background: #ff5f57; }
.fv-dot--min    { background: #febc2e; }
.fv-dot--max    { background: #28c840; }

.fv-dot--close:hover  { filter: brightness(1.2); transform: scale(1.1); }
.fv-dot--min:hover    { filter: brightness(1.2); transform: scale(1.1); }
.fv-dot--max:hover    { filter: brightness(1.2); transform: scale(1.1); }

.fv-dot--close::before  { content: '✕'; }
.fv-dot--min::before    { content: '—'; }
.fv-dot--max::before    { content: '+'; }

/* filename + lang badge (centered) */
.fv-titlebar__file {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-width: 0;
}

.fv-file-icon {
    color: var(--color-light-yellow);
    font-size: 0.88rem;
    flex-shrink: 0;
}

.fv-file-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: #d4cfe0;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fv-file-lang {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-light-purple, #c1b6f0);
    background: rgba(196, 167, 231, 0.12);
    border: 1px solid rgba(196, 167, 231, 0.25);
    border-radius: 999px;
    padding: 0.12em 0.6em;
    flex-shrink: 0;
}

/* action buttons (copy + download) */
.fv-titlebar__actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

.fv-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 0.78rem;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    flex-shrink: 0;
}

.fv-action:active { transform: scale(0.88); }

.fv-action--copy {
    color: rgba(137, 196, 225, 0.8);
    background: rgba(62, 143, 176, 0.1);
    border-color: rgba(62, 143, 176, 0.25);
}

.fv-action--copy:hover,
.fv-action--copied {
    background: rgba(62, 143, 176, 0.22);
    border-color: rgba(137, 196, 225, 0.6);
    color: #fff;
}

.fv-action--dl {
    color: rgba(55, 217, 158, 0.8);
    background: rgba(55, 217, 158, 0.08);
    border-color: rgba(55, 217, 158, 0.22);
}

.fv-action--dl:hover {
    background: rgba(55, 217, 158, 0.2);
    border-color: rgba(55, 217, 158, 0.6);
    color: #fff;
}

/* ── Body / code area ── */
.fv-body {
    flex: 1;
    overflow: auto;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.fv-body::-webkit-scrollbar { width: 6px; height: 6px; }
.fv-body::-webkit-scrollbar-track { background: transparent; }
.fv-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
.fv-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* ── Loading dots ── */
.fv-loading {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 4rem 2rem;
}

.fv-panel.is-loading .fv-loading { display: flex; }
.fv-panel.is-loading .fv-pre     { display: none; }
.fv-panel.is-loaded  .fv-pre     { display: block; }
.fv-panel.is-error   .fv-loading { display: flex; }
.fv-panel.is-error   .fv-pre     { display: none; }

.fv-dot-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text-muted);
    animation: fv-pulse 1.2s ease-in-out infinite;
}
.fv-dot-pulse:nth-child(2) { animation-delay: 0.2s; }
.fv-dot-pulse:nth-child(3) { animation-delay: 0.4s; }

@keyframes fv-pulse {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
    40%            { transform: scale(1.1); opacity: 1; }
}

/* suppress the code.css traffic-light bar — title bar has its own */
.fv-pre::before { display: none !important; }

/* ── Code ── */
.fv-pre {
    margin: 0;
    padding: 1.2rem 1.6rem;
    background: transparent;
    font-size: 0.82rem;
    line-height: 1.65;
    tab-size: 4;
    overflow: visible;
}

.fv-code {
    font-family: 'Maple Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    white-space: pre;
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .file-card { padding: 0.9rem 1rem 0.9rem 0; border-radius: 12px; }
    .file-card__icon { font-size: 2.1rem; padding: 0 1rem 0 1.4rem; }
    .file-card__btn { width: 1.8rem; height: 1.8rem; }
}

@media (max-width: 600px) {
    .file-card { padding: 0.75rem 0.75rem 0.75rem 0; border-radius: 10px; }
    .file-card__icon { font-size: 1.9rem; padding: 0 0.85rem 0 1.1rem; }
    .fv-overlay { padding: 0.5rem; align-items: flex-end; }
    .fv-panel { border-radius: 14px 14px 0 0; max-height: 94vh; max-width: 100%; }
}

@media (max-width: 480px) {
    .file-card { padding: 0.6rem 0.6rem 0.6rem 0; border-radius: 8px; }
    .file-card__icon { font-size: 1.7rem; padding: 0 0.7rem 0 0.9rem; }
    .file-card__actions { gap: 0.3rem; padding-right: 0.75rem; }
}

@media (hover: none) and (pointer: coarse) {
    .file-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
    .file-card:active { transform: scale(0.98); }
    /* always show buttons on touch */
    .file-card__btn { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .file-card, .file-card::before, .file-card::after,
    .file-card__btn, .fv-panel { transition: none; animation: none; }
}

/* =========================================
   MEDIA FRAME
   Floating badge + shadow, no border frame
   ========================================= */

.media-frame {
  display: block;
  margin: 2rem auto;
  text-align: center;
}

.media-wrap {
  position: relative;
  display: inline-block;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.5),
    0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: zoom-in;
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.media-wrap:hover {
  box-shadow:
    0 8px 36px rgba(0, 0, 0, 0.6),
    0 2px 8px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.media-wrap img,
.media-wrap video {
  display: block;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* floating format badge */
.media-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  background: rgba(30, 22, 28, 0.72);
  color: var(--color-text-secondary, #beae94);
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-family: 'Maple Mono', 'JetBrainsMonoNerd', monospace;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  padding: 3px 8px 2px;
  border-radius: 4px;
  backdrop-filter: blur(8px);
  text-transform: uppercase;
  opacity: 0.65;
  transition: opacity 0.2s;
}

.media-wrap:hover .media-badge {
  opacity: 1;
}

/* caption */
figcaption.media-caption {
  display: block;
  margin-top: 0.5rem;
  font-family: 'Maple Mono', 'JetBrainsMonoNerd', monospace;
  font-size: 0.72rem;
  color: var(--color-text-secondary, #beae94);
  opacity: 0.65;
  line-height: 1.4;
  text-align: center;
}

figcaption.media-caption::before {
  content: '// ';
  color: var(--color-bg-muted, #4a3e44);
}

/* ─────────────────────────────────────────────
   Viewer overlay (driven by media-frame.js)
───────────────────────────────────────────── */

.media-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(20, 14, 18, 0.92);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.media-viewer-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.viewer-close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  background: rgba(74, 62, 68, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9001;
  line-height: 1;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.viewer-close:hover {
  background: rgba(200, 90, 80, 0.55);
  border-color: rgba(200, 90, 80, 0.45);
  color: #fff;
}

.viewer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 90vw;
}

.viewer-media img,
.viewer-media video {
  display: block;
  max-width: 90vw;
  max-height: 82vh;
  border-radius: 10px;
  object-fit: contain;
  box-shadow:
    0 10px 60px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}

.viewer-caption {
  font-family: 'Maple Mono', 'JetBrainsMonoNerd', monospace;
  font-size: 0.8rem;
  color: rgba(253, 251, 212, 0.45);
  text-align: center;
  line-height: 1.5;
}

/* mobile */
@media (max-width: 768px) {
  .media-frame {
    margin: 1.25rem auto;
  }
}

/* === Annotated Text Trigger === */
.annotated-text {
  position: relative;
  cursor: url("/assets/cursors/slapping cat_32-48-64.ani") 16 16, auto !important;
  border-bottom: 2px dotted var(--color-light-yellow);
  border-radius: 2px;
  padding-bottom: 1px;
  transition:
    background-color 0.15s ease,
    border-color     0.15s ease;
}

.annotated-text:hover {
  border-bottom-style: solid;
  background: color-mix(in srgb, var(--color-light-yellow) 12%, transparent);
  cursor: url("/assets/cursors/hand.png") 0 0, auto !important;
}

/* Trigger when its tooltip is open */
.annotated-text.has-active-tooltip {
  border-bottom-style: solid;
  border-color: var(--color-light-yellow);
  background: color-mix(in srgb, var(--color-light-yellow) 16%, transparent);
}

/* === Tooltip Box === */
.annotation-tooltip {
  position: absolute;
  bottom: calc(100% + 11px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);

  display: inline-block;
  width: max-content;
  max-width: 360px;

  background: color-mix(in srgb, var(--color-light-yellow) 8%, var(--color-bg-secondary));
  color: var(--color-text-primary);
  text-align: left;

  border: 1px solid color-mix(in srgb, var(--color-light-yellow) 38%, transparent);
  border-radius: 10px;

  padding: 0.8rem 1rem;
  font-size: 0.875rem;
  line-height: 1.65;

  white-space: normal;
  word-break: break-word;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1000;

  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.32),
    0 0 0 1px color-mix(in srgb, var(--color-light-yellow) 10%, transparent);

  transition:
    opacity    0.15s ease-out,
    transform  0.15s ease-out,
    visibility 0s   linear 0.15s;
}

/* Outer arrow triangle (border colour) */
.annotation-tooltip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 1px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid color-mix(in srgb, var(--color-light-yellow) 38%, transparent);
}

/* Inner arrow triangle (background fill) */
.annotation-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 2px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid color-mix(in srgb, var(--color-light-yellow) 8%, var(--color-bg-secondary));
}

/* Arrow flipped when tooltip appears below the trigger */
.annotation-tooltip[data-pos="below"] {
  bottom: auto;
}

.annotation-tooltip[data-pos="below"]::before {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 1px;
  border-top: none;
  border-bottom: 8px solid color-mix(in srgb, var(--color-light-yellow) 38%, transparent);
}

.annotation-tooltip[data-pos="below"]::after {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 2px;
  border-top: none;
  border-bottom: 6px solid color-mix(in srgb, var(--color-light-yellow) 8%, var(--color-bg-secondary));
}

/* === Tooltip Active State === */
@keyframes tooltip-pop {
  0%   { transform: translateX(-50%) translateY(6px)  scale(0.88); opacity: 0; }
  65%  { transform: translateX(-50%) translateY(-2px) scale(1.02); opacity: 1; }
  100% { transform: translateX(-50%) translateY(0)    scale(1);    opacity: 1; }
}

.annotation-tooltip.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  animation: tooltip-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  transition:
    opacity    0.15s ease-in,
    visibility 0s   linear 0s;
}

/* === Responsive === */
@media (max-width: 600px) {
  .annotation-tooltip {
    max-width: min(90vw, 300px);
    font-size: 0.82rem;
    padding: 0.65rem 0.85rem;
  }
}

/* ================
   Blockquote Styles
   ================ */
blockquote {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-light-yellow) 7%, var(--color-bg-secondary)),
    var(--color-bg-secondary) 70%
  );
  color: var(--color-text-primary);
  border-left: 4px solid var(--color-light-yellow);
  border-top: 1px solid color-mix(in srgb, var(--color-light-yellow) 22%, transparent);
  border-radius: 4px 16px 16px 4px;
  padding: 1.4rem 1.75rem 1.4rem 2.25rem;
  margin: 1.75rem 0;
  font-style: italic;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
  transition: border-left-color 0.3s ease, border-top-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  box-sizing: border-box;
}

/* Large decorative open-quote mark */
blockquote::before {
  content: "\201C";
  position: absolute;
  top: -0.5rem;
  left: 0.5rem;
  font-size: 6.5rem;
  line-height: 1;
  color: var(--color-light-yellow);
  opacity: 0.13;
  font-style: normal;
  font-weight: 700;
  pointer-events: none;
  font-family: Georgia, 'Times New Roman', serif;
  user-select: none;
}

/* kbd inside a blockquote or callout box: use the page bg so it stands
   out against the tinted container background instead of blending in */
blockquote kbd,
.box kbd {
  background-color: var(--color-bg-primary);
}

blockquote a {
  color: var(--color-light-yellow);
  text-decoration: none;
  transition: color 0.2s ease;
}

blockquote a:hover {
  color: var(--color-text-primary);
}

/* Always show external link arrows in blockquotes */
blockquote a[href^="http"]:not([href*="https://www.crow.rip"]):not(.button):not(.no-external-icon)::after {
  content: " [↗]";
  opacity: 1;
}

blockquote:hover {
  border-left-color: var(--color-pink);
  border-top-color: color-mix(in srgb, var(--color-pink) 28%, transparent);
  box-shadow:
    0 10px 36px rgba(0, 0, 0, 0.3),
    -3px 0 0 0 color-mix(in srgb, var(--color-pink) 35%, transparent);
  transform: translateY(-2px) translateX(3px);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  blockquote {
    margin-left: 0;
    margin-right: 0;
    padding: 1rem 1.25rem 1rem 1.75rem;
    font-size: 0.95rem;
  }
}

@media (max-width: 600px) {
  blockquote {
    padding: 0.85rem 1rem 0.85rem 1.5rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  blockquote {
    padding: 0.75rem 0.85rem 0.75rem 1.25rem;
    font-size: 0.85rem;
  }
}

/* ================
   Base Container
   ================ */
.collapse-box {
  width: 100%;
  margin: 1.5rem 0;
  font-family: 'Maple Mono', 'JetBrainsMonoNerd', ui-monospace, monospace;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 2px solid var(--color-bg-muted);
  border-radius: 14px;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}


.collapse-box:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}

.collapse-box[open] {
  border-color: color-mix(in srgb, var(--color-light-yellow) 28%, var(--color-bg-muted));
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.28),
    0 0 0 1px color-mix(in srgb, var(--color-light-yellow) 14%, transparent);
}

/* ================
   Summary Header
   ================ */
.collapse-box summary::-webkit-details-marker {
  display: none;
}

.collapse-box summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem 1.1rem 1.6rem;
  font-weight: 600;
  font-size: 1rem;
  font-family: inherit;
  cursor: url("/assets/cursors/hand.png") 0 0, auto !important;
  position: relative;
  user-select: none;
  background: color-mix(in srgb, var(--color-bg-muted) 22%, var(--color-bg-secondary));
  transition: background 0.2s ease, color 0.2s ease;
}

.collapse-box summary:hover {
  background: color-mix(in srgb, var(--color-bg-muted) 38%, var(--color-bg-secondary));
}

.collapse-box[open] summary {
  background: color-mix(in srgb, var(--color-light-yellow) 7%, var(--color-bg-secondary));
  color: var(--color-light-yellow);
  border-bottom: 2px solid var(--color-bg-muted);
}

/* Animated chevron */
.collapse-box summary::after {
  font-family: "Font Awesome 6 Free";
  content: "\f054";
  font-weight: 900;
  font-size: 0.78em;
  color: var(--color-text-muted);
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
  flex-shrink: 0;
  margin-left: 1rem;
}

.collapse-box[open] summary::after {
  transform: rotate(90deg);
  color: var(--color-light-yellow);
}

/* ================
   Content
   ================ */
.collapse-box .content {
  padding: 0 1.4rem 0 1.6rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.4s ease,
    opacity 0.3s ease,
    padding 0.3s ease;
}

.collapse-box[open] .content {
  max-height: 3000px;
  opacity: 1;
  padding: 1.75rem 1.4rem 1.75rem 1.6rem;
  transition:
    max-height 0.5s ease,
    opacity 0.38s ease 0.06s,
    padding 0.3s ease;
}

.collapse-box[open] .content > *:first-child {
  margin-top: 0;
}

.collapse-box[open] .content > *:last-child {
  margin-bottom: 0;
}

.collapse-box,
.collapse-box summary {
  cursor: url("/assets/cursors/slapping cat_32-48-64.ani") 16 16, auto;
}

.collapse-box summary:hover,
.collapse-box summary:focus,
.collapse-box:focus-within {
  cursor: url("/assets/cursors/hand.png") 0 0, auto !important;
}

/* ── Nav / pagination buttons ── */
.button-base,
.go-back-button,
.nav-back-button,
.nav-forward-button,
.pagination-arrow,
.home-button {
  /* Reset <button> browser defaults */
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;

  background-color: var(--color-bg-secondary);
  color: var(--color-text-muted);
  padding: 0.6rem 1.25rem;
  font-size: 1.15rem;
  border-radius: 999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.8rem;
  cursor: url("/assets/cursors/slapping cat_32-48-64.ani") 16 16, auto;
  border: 1px solid var(--color-bg-muted);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 color-mix(in srgb, white 6%, transparent);
  transition:
    background-color 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
    color           0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color    0.18s ease,
    transform       0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow      0.2s  ease;
}

.go-back-button,
.nav-back-button,
.nav-forward-button,
.pagination-arrow,
.home-button {
  position: relative;
  outline: none;
}

/* Enlarged hit area */
.go-back-button::before,
.nav-back-button::before,
.nav-forward-button::before,
.pagination-arrow::before,
.home-button::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 999px;
}

.go-back-button,
.nav-back-button,
.nav-forward-button,
.pagination-arrow,
.home-button {
  pointer-events: auto;
}

/* Direction-specific hover transforms */
.go-back-button:hover,
.nav-back-button:hover,
.pagination-arrow.left:hover {
  transform: translate(-6px, -6px) rotate(-18deg) scale(1.18);
}

.pagination-arrow.right:hover,
.nav-forward-button:hover {
  transform: translate(6px, -6px) rotate(18deg) scale(1.18);
}

.home-button:hover {
  transform: translateY(-12px) scale(1.12);
}

/* Shared hover colours — Arizona Sunrise (soft pink) */
.go-back-button:hover,
.nav-back-button:hover,
.pagination-arrow.left:hover,
.pagination-arrow.right:hover,
.nav-forward-button:hover,
.home-button:hover {
  background-color: var(--color-light-pink);
  color: var(--color-bg-primary);
  border-color: var(--color-light-pink);
  cursor: url("/assets/cursors/hand.png") 0 0, pointer;
  box-shadow:
    0 10px 30px color-mix(in srgb, var(--color-light-pink) 38%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 14%, transparent);
}

/* Focus ring */
@keyframes outlineDash {
  0%   { outline-offset: 4px;  outline-color: var(--color-text-muted); }
  50%  { outline-offset: 9px;  outline-color: var(--color-light-pink); }
  100% { outline-offset: 4px;  outline-color: var(--color-text-muted); }
}

.go-back-button:focus,
.nav-back-button:focus,
.nav-forward-button:focus,
.pagination-arrow:focus,
.home-button:focus {
  outline: 2px dashed var(--color-text-muted);
  outline-offset: 4px;
  animation: outlineDash 0.8s cubic-bezier(0.33, 1, 0.68, 1) infinite;
}

/* Row layout */
.nav-button-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.nav-back-button    { order: 1; }
.home-button        { order: 2; }
.nav-forward-button { order: 3; }

/* ================================================
   Page fade-in on load
   ================================================ */
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body {
  animation: pageFadeIn 0.3s ease both;
}

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
}

/* ================================================
   Scroll-triggered reveals
   ================================================ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ================================================
   Typewriter cursor
   ================================================ */
.typewriter-cursor {
  display: inline-block;
  color: var(--color-light-yellow);
  animation: cursorBlink 0.75s step-end infinite;
  font-weight: 300;
  margin-left: 1px;
}

.typewriter-cursor--done {
  animation: cursorFadeOut 0.9s ease forwards;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes cursorFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ================================================
   Share button active state
   ================================================ */
.blog-share-btn {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  cursor: url("/assets/cursors/slapping cat_32-48-64.ani") 16 16, pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

.blog-share-btn--active {
  color: var(--color-light-green) !important;
  transform: scale(1.05);
}

.blog-share-btn:hover {
  cursor: url("/assets/cursors/hand.png") 0 0, pointer !important;
}

/* ================================================
   Animated Film Grain Overlay
   ================================================ */
body::after {
  content: "";
  position: fixed;
  inset: -150%;
  width: 400%;
  height: 400%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.035;
  pointer-events: none;
  z-index: 99999;
  animation: grain 8s steps(10) infinite;
}

@keyframes grain {
  0%, 100% { transform: translate(0,    0   ); }
  10%       { transform: translate(-5%,  -10%); }
  20%       { transform: translate(-15%,  5% ); }
  30%       { transform: translate( 7%,  -25%); }
  40%       { transform: translate(-5%,   25%); }
  50%       { transform: translate(-15%,  10%); }
  60%       { transform: translate( 15%,  0% ); }
  70%       { transform: translate( 0%,   15%); }
  80%       { transform: translate( 3%,   35%); }
  90%       { transform: translate(-10%,  10%); }
}

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}

/* ================================================
   Copy Toast Notification
   ================================================ */
#copy-toast-container {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: 99998;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.copy-toast {
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-bg-muted);
  color: var(--color-text-primary);
  padding: 0.65rem 1.1rem;
  border-radius: 10px;
  font-family: 'Maple Mono', 'JetBrainsMonoNerd', monospace;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.copy-toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.copy-toast--success {
  border-color: color-mix(in srgb, var(--color-green) 70%, var(--color-bg-muted));
  color: var(--color-green);
}

.copy-toast--error {
  border-color: color-mix(in srgb, var(--color-pink) 70%, var(--color-bg-muted));
  color: var(--color-pink);
}

/* ================================================
   Back to Top Button
   ================================================ */
#back-to-top {
  position: fixed;
  bottom: 2rem;
  right: calc(1.6rem + 125px);
  z-index: 9998;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-bg-muted);
  color: var(--color-text-muted);
  border-radius: 999px;
  width: 2.8rem;
  height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: url("/assets/cursors/hand.png") 0 0, auto;
  user-select: none;
  opacity: 0;
  transform: translateY(12px) scale(0.85);
  transition:
    opacity         0.25s ease,
    transform       0.3s  cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.18s ease,
    border-color    0.18s ease,
    color           0.18s ease,
    box-shadow      0.2s  ease;
  pointer-events: none;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 color-mix(in srgb, white 6%, transparent);
  font-family: inherit;
}

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

@keyframes bttClick {
  /* Idle */
  0% {
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    transform: translateY(0) scaleX(1) scaleY(1);
    filter: brightness(1) hue-rotate(0deg);
    opacity: 1;
  }
  /* Charge — squish and glow */
  14% {
    animation-timing-function: cubic-bezier(0.15, 0, 0.2, 1.6);
    transform: translateY(5px) scaleX(1.2) scaleY(0.7);
    filter: brightness(2) hue-rotate(30deg);
    opacity: 1;
  }
  /* Pop — springs tall */
  26% {
    animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1);
    transform: translateY(-8px) scaleX(0.8) scaleY(1.35);
    filter: brightness(2.8) hue-rotate(100deg);
    opacity: 1;
  }
  /* Warp initiation — starts to smear */
  40% {
    animation-timing-function: cubic-bezier(0.55, 0, 0.9, 1);
    transform: translateY(-25px) scaleX(0.55) scaleY(2);
    filter: brightness(3.5) hue-rotate(190deg);
    opacity: 0.95;
  }
  /* Warp stretch — classic hyperspace needle */
  60% {
    animation-timing-function: cubic-bezier(0.75, 0, 1, 1);
    transform: translateY(-90px) scaleX(0.25) scaleY(5);
    filter: brightness(5) hue-rotate(280deg);
    opacity: 0.6;
  }
  /* Jump — white-hot thread vanishes into the void */
  100% {
    transform: translateY(-280px) scaleX(0.06) scaleY(12);
    filter: brightness(8) hue-rotate(400deg);
    opacity: 0;
  }
}

#back-to-top.back-to-top--clicked {
  transform-origin: center bottom;
  animation: bttClick 0.9s linear forwards;
  will-change: transform, opacity, filter;
  pointer-events: none;
}

#back-to-top:hover {
  background-color: var(--color-light-pink);
  border-color: var(--color-light-pink);
  color: var(--color-bg-primary);
  transform: translateY(-6px) scale(1.12);
  box-shadow:
    0 10px 30px color-mix(in srgb, var(--color-light-pink) 38%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 14%, transparent);
}

/* On phones the bottom nav + Rupert occupy the lower-right —
   lift the button well clear of both */
@media (max-width: 600px) {
  #back-to-top {
    bottom: 12rem;
    right: 1rem;
  }
}


/* ============================================================
   RETRO FX
   CRT overlay · cursor sparkles · doodle dividers ·
   Rupert mascot peek · konami party mode
   All DOM is injected by retro-fx.js — this file only styles it.
   ============================================================ */

/* ---------------------------------------------------------
   1. CRT SCREEN OVERLAY  (toggleable, off by default)
   --------------------------------------------------------- */
.crt-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
}

body.crt-on .crt-overlay {
  opacity: 1;
}

/* fine scanlines */
.crt-overlay__scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.22) 3px,
    rgba(0, 0, 0, 0.22) 4px
  );
  mix-blend-mode: multiply;
}

/* a slow-rolling bright band, like a CRT refresh sweep */
.crt-overlay__roll {
  position: absolute;
  left: 0;
  right: 0;
  height: 28%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.035) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: crtRoll 7s linear infinite;
}

/* CRT vignette: pronounced darkening in the corners (no rounded tube) */
.crt-overlay__vignette {
  position: absolute;
  inset: 0;
  background:
    /* circular falloff — corners (farther from center) darken more
       than the mid-edges, which gives the screen "weight" without
       needing a rounded bezel. Stops pushed out + alphas dropped so
       text near the edges stays readable. */
    radial-gradient(circle at center,
      transparent 0%,
      transparent 60%,
      rgba(0, 0, 0, 0.22) 88%,
      rgba(0, 0, 0, 0.48) 100%),
    /* purple corner haze */
    radial-gradient(ellipse 120% 120% at 50% 50%,
      transparent 72%,
      color-mix(in srgb, var(--color-purple) 16%, transparent) 115%);
  /* light inset edge so it feels like a screen, not a wash */
  box-shadow: inset 0 0 50px 8px rgba(0, 0, 0, 0.18);
}

/* gentle full-screen flicker */
body.crt-on .crt-overlay__scanlines {
  animation: crtFlicker 0.12s steps(3) infinite;
}

@keyframes crtRoll {
  0%   { transform: translateY(-30%); }
  100% { transform: translateY(360%); }
}

@keyframes crtFlicker {
  0%   { opacity: 0.95; }
  50%  { opacity: 1; }
  100% { opacity: 0.97; }
}

/* power-on flash when toggled on */
.crt-overlay__flash {
  position: absolute;
  inset: 0;
  background: #fdfbd4;
  opacity: 0;
}

body.crt-just-on .crt-overlay__flash {
  animation: crtPowerOn 0.5s ease-out;
}

@keyframes crtPowerOn {
  0%   { opacity: 0; transform: scaleY(0.004); }
  8%   { opacity: 0.9; transform: scaleY(0.02); }
  30%  { opacity: 0.55; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}

/* ---------------------------------------------------------
   2. CRT TOGGLE BUTTON
   --------------------------------------------------------- */
.crt-toggle {
  position: fixed;
  bottom: 1.1rem;
  left: 1.1rem;
  z-index: 9600;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  border-radius: 9999px;
  border: 2px solid var(--color-bg-muted);
  background: color-mix(in srgb, var(--color-bg-secondary) 92%, black);
  color: var(--color-text-muted);
  font-family: var(--font-primary, "Maple Mono", monospace);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.crt-toggle:hover {
  transform: translateY(-2px) scale(1.04);
  color: var(--color-text-primary);
  border-color: color-mix(in srgb, var(--color-light-yellow) 50%, var(--color-bg-muted));
}

.crt-toggle__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-bg-muted);
  box-shadow: none;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

body.crt-on .crt-toggle__dot {
  background: var(--color-light-green);
  box-shadow: 0 0 8px var(--color-light-green), 0 0 2px #fff;
}

body.crt-on .crt-toggle {
  color: var(--color-text-primary);
  border-color: color-mix(in srgb, var(--color-light-green) 45%, var(--color-bg-muted));
}

@media (max-width: 600px) {
  /* sits clear above the mobile bottom nav */
  .crt-toggle {
    bottom: calc(6.4rem + env(safe-area-inset-bottom, 0px));
    left: 0.8rem;
    padding: 0.42rem 0.7rem;
    font-size: 0.62rem;
  }
}

/* ---------------------------------------------------------
   3. CURSOR SPARKLE TRAIL  (desktop / fine-pointer only)
   --------------------------------------------------------- */
.cursor-spark {
  position: fixed;
  width: var(--spark-size, 10px);
  height: var(--spark-size, 10px);
  pointer-events: none;
  z-index: 9700;
  transform: translate(-50%, -50%) rotate(var(--spark-rot, 0deg));
  will-change: transform, opacity;
  animation: sparkPop var(--spark-life, 650ms) cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

/* 4-point star drawn with a CSS clip-path */
.cursor-spark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: hsl(var(--spark-hue, 45) 95% 75%);
  clip-path: polygon(
    50% 0%, 60% 40%, 100% 50%, 60% 60%,
    50% 100%, 40% 60%, 0% 50%, 40% 40%
  );
  filter: drop-shadow(0 0 4px hsl(var(--spark-hue, 45) 95% 70%));
}

@keyframes sparkPop {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(var(--spark-rot, 0deg)) scale(0.2); }
  35%  { opacity: 1; transform: translate(-50%, -50%) rotate(calc(var(--spark-rot, 0deg) + 40deg)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% + var(--spark-drift, 14px))) rotate(calc(var(--spark-rot, 0deg) + 90deg)) scale(0.35); }
}

/* ---------------------------------------------------------
   4. HAND-DRAWN DOODLE DIVIDER — footer only
   (content <hr> / .section-separator keep their original look)
   --------------------------------------------------------- */
footer .section-separator,
footer hr {
  border: none !important;
  height: 28px;
  flex: 0 0 28px;
  width: min(100% - 2rem, 22rem) !important;
  margin: 1.2rem auto !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.85;
  /* a wobbly hand-drawn line + a chunkier sparkle on top, in the cream ink color */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='28' viewBox='0 0 360 28'><path d='M6 16 C 40 7, 70 23, 104 15 S 168 6, 200 16 S 268 24, 300 14 S 344 9, 354 15' fill='none' stroke='%23f1e2cc' stroke-width='2.4' stroke-linecap='round'/><path d='M180 2 L182.65 9.36 L190.46 9.6 L184.28 14.39 L186.47 21.9 L180 17.5 L173.53 21.9 L175.72 14.39 L169.54 9.6 L177.35 9.36 Z' fill='%23ecd28b' stroke='%23ecd28b' stroke-width='0.4' stroke-linejoin='round'/></svg>");
}

/* ---------------------------------------------------------
   5. RUPERT — corner-peeking mascot
   --------------------------------------------------------- */
.rupert-peek {
  position: fixed;
  right: -150px;
  bottom: 0; /* his cozy bottom-right corner */
  width: 132px;
  height: auto;
  z-index: 9999;
  pointer-events: auto;
  cursor: grab;
  filter: drop-shadow(-6px 4px 10px rgba(0, 0, 0, 0.45));
  transform-origin: center center;
  transition: right 0.7s cubic-bezier(0.34, 1.3, 0.64, 1);
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none; /* don't scroll the page while dragging him */
}

.rupert-peek.is-peeking {
  right: -22px;
}

/* little wave wobble while peeking */
.rupert-peek.is-peeking {
  animation: rupertWobble 1.6s ease-in-out infinite 0.7s;
}

/* grabbed — held in the cursor's claw */
.rupert-peek.is-grabbed {
  cursor: grabbing;
  transition: none !important;
  animation: none !important;
  filter: drop-shadow(-10px 12px 18px rgba(0, 0, 0, 0.6));
  z-index: 10000;
}

/* mid-flight after a throw */
.rupert-peek.is-thrown {
  cursor: grabbing;
  transition: none !important;
  animation: none !important;
  z-index: 10000;
}

/* When CRT is on, drop Rupert behind the scanlines/vignette
   so he reads as being INSIDE the tube */
body.crt-on .rupert-peek,
body.crt-on .rupert-peek.is-grabbed,
body.crt-on .rupert-peek.is-thrown {
  z-index: 8500;
}

/* poof out of existence when he settles */
.rupert-peek.is-poof {
  transition: none !important;
  animation: rupertPoof 0.55s cubic-bezier(0.4, 0, 1, 1) forwards !important;
}

@keyframes rupertPoof {
  0%   { opacity: 1; transform: scale(1) rotate(var(--poof-rot, 0deg)); }
  55%  { opacity: 1; transform: scale(1.25) rotate(calc(var(--poof-rot, 0deg) + 90deg)); }
  100% { opacity: 0; transform: scale(0.1) rotate(calc(var(--poof-rot, 0deg) + 300deg)); }
}

/* dust puff particles left behind when he poofs */
.rupert-dust {
  position: fixed;
  width: var(--dust-size, 14px);
  height: var(--dust-size, 14px);
  border-radius: 50%;
  background: radial-gradient(circle, #f1e2cc 0%, color-mix(in srgb, #f1e2cc 30%, transparent) 60%, transparent 75%);
  pointer-events: none;
  z-index: 9740;
  transform: translate(-50%, -50%);
  animation: rupertDust var(--dust-life, 600ms) ease-out forwards;
}

@keyframes rupertDust {
  0%   { opacity: 0.9; transform: translate(-50%, -50%) scale(0.3); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dust-dx, 0px)), calc(-50% + var(--dust-dy, 0px))) scale(1.6); }
}

/* hearts that float up when you pet him */
.rupert-heart {
  position: fixed;
  width: var(--p-size, 18px);
  height: var(--p-size, 18px);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 0 4px rgba(255, 111, 145, 0.55));
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21C12 21 3.5 14.5 3.5 8.5C3.5 5.5 5.7 3.5 8.3 3.5C10 3.5 11.4 4.6 12 5.8C12.6 4.6 14 3.5 15.7 3.5C18.3 3.5 20.5 5.5 20.5 8.5C20.5 14.5 12 21 12 21Z' fill='%23ff6f91' stroke='%23fff7e6' stroke-width='1.3'/></svg>");
  animation: rupertHeart var(--p-life, 1100ms) cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes rupertHeart {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(var(--p-rot, 0deg)); }
  25%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(var(--p-rot, 0deg)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--p-dx, 0px)), calc(-50% + var(--p-dy, 0px))) scale(0.6) rotate(var(--p-rot, 0deg)); }
}

/* anger marks that burst out when he crash-lands */
.rupert-angry {
  position: fixed;
  width: var(--p-size, 22px);
  height: var(--p-size, 22px);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 0 4px rgba(232, 80, 63, 0.6));
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g stroke='%23e8503f' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round' fill='none'><path d='M10 4 L16 10.5 L22 4'/><path d='M10 28 L16 21.5 L22 28'/><path d='M4 10 L10.5 16 L4 22'/><path d='M28 10 L21.5 16 L28 22'/></g></svg>");
  animation: rupertAngry var(--p-life, 850ms) cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes rupertAngry {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.1) rotate(0deg); }
  35%  { opacity: 1; transform: translate(calc(-50% + var(--p-dx, 0px)), calc(-50% + var(--p-dy, 0px))) scale(1.3) rotate(var(--p-rot, 0deg)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--p-dx, 0px)), calc(-50% + var(--p-dy, 0px) - 14px)) scale(0.9) rotate(var(--p-rot, 0deg)); }
}

/* smack image that flashes at the collision point */
.rupert-smack-img {
  position: fixed;
  width: 90px;
  height: auto;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  animation: rupertSmack 0.85s ease-out forwards;
}

@keyframes rupertSmack {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.1) rotate(-20deg); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.4) rotate(8deg); }
  55%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(-4deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9) rotate(2deg); }
}

/* "OOF!" / "BONK!" floating text on wall collision */
.rupert-oof {
  position: fixed;
  font-family: var(--font-primary, "Maple Mono", monospace);
  font-size: 2rem;
  font-weight: 900;
  color: #fff7e6;
  text-shadow:
    2px  2px 0 #c85a50,
   -1px -1px 0 #c85a50,
    0 0 16px rgba(232, 80, 63, 0.7);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  animation: rupertOof 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes rupertOof {
  /* snap in at the hit point */
  0%   { opacity: 0;   transform: translate(-50%, -50%)  scale(0.1)  rotate(-15deg); }
  10%  { opacity: 1;   transform: translate(-50%, -65%)  scale(1.65) rotate(7deg); }
  /* hold a beat so the player can read it */
  26%  { opacity: 1;   transform: translate(-50%, -80%)  scale(1.15) rotate(-3deg); }
  /* float away sideways and upward, fading out smoothly */
  100% { opacity: 0;   transform: translate(calc(-50% + var(--oof-dx, 0px)), -340%) scale(0.72) rotate(var(--oof-spin, 5deg)); }
}

@keyframes rupertWobble {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-5deg); }
  75%      { transform: rotate(5deg); }
}

/* squish when you poke him */
.rupert-peek.is-poked {
  animation: rupertSquish 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes rupertSquish {
  0%   { transform: scale(1, 1); }
  40%  { transform: scale(1.15, 0.82); }
  70%  { transform: scale(0.93, 1.1); }
  100% { transform: scale(1, 1); }
}

.rupert-speech {
  position: fixed;
  z-index: 8850;
  right: 96px;
  bottom: 96px;
  max-width: 180px;
  padding: 0.5rem 0.75rem;
  border-radius: 12px 12px 2px 12px;
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-bg-muted);
  color: var(--color-text-primary);
  font-family: var(--font-primary, "Maple Mono", monospace);
  font-size: 0.72rem;
  line-height: 1.4;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(6px) scale(0.95);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rupert-speech.is-shown {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* scream bubble while he's being yeeted */
.rupert-speech.is-screaming {
  right: auto;
  bottom: auto;
  background: var(--color-red, #c85a50);
  border-color: #fff7e6;
  color: #fff7e6;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  border-radius: 12px;
  max-width: 220px;
  white-space: nowrap;
  animation: screamShake 0.085s linear infinite;
}

@keyframes screamShake {
  0%   { transform: translate(0, 0) rotate(-3deg) scale(1); }
  25%  { transform: translate(-3px, 2px) rotate(3deg) scale(1.05); }
  50%  { transform: translate(3px, -2px) rotate(-2deg) scale(0.98); }
  75%  { transform: translate(-2px, -3px) rotate(2deg) scale(1.04); }
  100% { transform: translate(2px, 3px) rotate(-3deg) scale(1); }
}

@media (max-width: 600px) {
  .rupert-peek {
    width: 92px;
    bottom: 5.4rem; /* clears the mobile bottom nav */
  }
  .rupert-peek.is-peeking {
    right: -30px;
  }
  .rupert-speech {
    right: 70px;
    bottom: 13rem;
    max-width: 140px;
    font-size: 0.66rem;
  }
}

/* ---------------------------------------------------------
   6. KONAMI PARTY MODE
   --------------------------------------------------------- */
body.party-mode {
  animation: partyHue 6s linear infinite;
}

@keyframes partyHue {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

.party-confetti {
  position: fixed;
  top: -20px;
  width: 11px;
  height: 11px;
  z-index: 9800;
  pointer-events: none;
  border-radius: 2px;
  will-change: transform;
  animation: confettiFall var(--confetti-life, 2.6s) linear forwards;
}

@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(var(--confetti-spin, 720deg)); opacity: 0.9; }
}

/* ---------------------------------------------------------
   Respect reduced-motion: kill the loud stuff
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .crt-overlay__roll,
  body.crt-on .crt-overlay__scanlines,
  .rupert-peek.is-peeking,
  body.party-mode {
    animation: none !important;
  }
  .cursor-spark,
  .party-confetti {
    display: none !important;
  }
}