@layer reset, base, layout, components;

@layer base {

/* ==========================================================================
   1) DESIGN TOKENS
   ========================================================================== */

  /* Colour tokens are written once as light-dark(light, dark).  The page
     follows the system setting; the theme toggle sets :root.light or
     :root.dark, which fixes color-scheme and hence every token. */
  :root {
  color-scheme: light dark;

  /* --- 1. CORE PALETTE --- */
  --hue-brand:   28;   /* orange */
  --hue-link:    212;  /* blue */
  --hue-neutral: 215;  /* slate (light mode) */
  --hue-ink:     228;  /* graphite (dark mode surfaces) */
  --hue-paper:   40;   /* warm off-white (dark mode text) */

  /* --- 2. ACCENTS --- */
  --c-brand:       light-dark(hsl(var(--hue-brand), 90%, 55%), hsl(var(--hue-brand), 85%, 66%));
  --c-brand-light: light-dark(hsl(var(--hue-brand), 90%, 75%), hsl(36, 70%, 56%));
  --c-on-brand:    light-dark(#fff, hsl(var(--hue-ink), 12%, 10%));

  --c-link:        light-dark(hsl(var(--hue-link), 90%, 48%), hsl(214, 90%, 74%));
  --c-link-dark:   light-dark(hsl(var(--hue-link), 90%, 35%), hsl(214, 80%, 64%));
  --c-defin:       light-dark(hsl(var(--hue-link), 80%, 45%), hsl(214, 95%, 81%));

  --math-accent:   light-dark(hsl(var(--hue-link), 80%, 50%), hsl(214, 90%, 76%));
  --c-exchange:    light-dark(hsl(44, 95%, 86%), hsl(42, 45%, 24%));

  /* Diagram data colours */
  --c-data-red:    light-dark(hsl(0, 85%, 60%), hsl(4, 80%, 72%));
  --c-data-black:  light-dark(hsl(215, 20%, 20%), hsl(var(--hue-paper), 10%, 84%));
  --c-data-blue:   light-dark(hsl(220, 90%, 55%), hsl(214, 90%, 74%));

  /* --- 3. SURFACES --- */
  --c-bg-body:     light-dark(hsl(var(--hue-neutral), 15%, 94%), hsl(var(--hue-ink), 10%, 8%));
  --c-bg-surface:  light-dark(hsl(0, 0%, 100%),                  hsl(var(--hue-ink), 8%, 12%));
  --c-bg-nav:      light-dark(hsl(0, 0%, 100%),                  hsl(var(--hue-ink), 8%, 13.5%));
  --c-bg-header:   light-dark(hsl(var(--hue-neutral), 15%, 97%), hsl(var(--hue-ink), 9%, 10%));
  --c-bg-gray:     light-dark(hsl(var(--hue-neutral), 10%, 90%), hsl(var(--hue-ink), 7%, 18%));

  /* Borders & rules */
  --c-border:      light-dark(hsl(var(--hue-neutral), 15%, 82%), hsl(var(--hue-ink), 7%, 22%));
  --c-rule:        light-dark(hsl(var(--hue-neutral), 15%, 20%), hsl(var(--hue-paper), 6%, 62%));
  --c-tableau-border: light-dark(hsl(215, 20%, 20%), hsl(var(--hue-paper), 8%, 76%));
  --header-border: 1px solid var(--c-border);

  /* Topic cards: blue frame in light mode, quiet frame with a blue edge in dark */
  --c-card-border: light-dark(var(--c-link), hsl(var(--hue-ink), 8%, 24%));
  --c-card-edge:   light-dark(var(--c-link), hsl(214, 50%, 52%));

  /* --- 4. TEXT --- */
  --c-text-main:   light-dark(hsl(var(--hue-neutral), 20%, 20%), hsl(var(--hue-paper), 12%, 85%));
  --c-text-sub:    light-dark(hsl(var(--hue-neutral), 15%, 40%), hsl(var(--hue-paper), 8%, 70%));
  --c-text-muted:  light-dark(hsl(var(--hue-neutral), 10%, 60%), hsl(var(--hue-paper), 5%, 52%));
  --c-nav-subsec:  light-dark(hsl(var(--hue-neutral), 10%, 50%), hsl(var(--hue-paper), 6%, 64%));

  /* Ratings */
  --c-rating-from: light-dark(hsl(45, 100%, 50%), hsl(42, 90%, 62%));
  --c-rating-to:   light-dark(hsl(var(--hue-neutral), 10%, 85%), hsl(var(--hue-ink), 7%, 27%));

  /* Non-colour theme values (light-dark() takes colours only) */
  --topnav-icon-filter: none;
  --img-dark-filter: none;

  /* --- DIMENSIONS --- */
  --w-col: 14rem;
  --w-sidebar: 20rem;
  --col-main-start: 3;
  --col-main-end:   7;
  --toc-display: block;
  }

  :root.light { color-scheme: light; }
  :root.dark  { color-scheme: dark; }

  /* Line art is drawn dark-on-transparent; invert it softly in dark mode so
     strokes become off-white rather than glaring white. */
  :root.dark {
    --topnav-icon-filter: brightness(0) invert(0.9);
    --img-dark-filter: invert(0.88) hue-rotate(180deg);
  }
  @media (prefers-color-scheme: dark) {
    :root:not(.light) {
      --topnav-icon-filter: brightness(0) invert(0.9);
      --img-dark-filter: invert(0.88) hue-rotate(180deg);
    }
  }

  /* ==========================================================================
     RESET & BASE
     ========================================================================== */
  *, *::before, *::after { box-sizing: border-box; }

  html {
    height: 100%;
    overscroll-behavior-y: none;
    background-color: var(--c-bg-header);
    margin:0; padding: 0;
  }

  body {
    margin: 0;
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    background: var(--c-bg-body);
    color: var(--c-text-main);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }



  a { color: var(--c-link); text-decoration: none; }
  a:hover { text-decoration: underline; color: var(--c-brand); }

  h1, h2, h3, h4 {
    font-family: system-ui, -apple-system, sans-serif;
    color: var(--c-text-main);
    margin-top: 1.8em;
    margin-bottom: 0.5em;
    scroll-margin-top: 5em; /* So that we scroll down slightly*/
  }
  h2 {
    color: var(--c-brand);
    padding-bottom: 0.3em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  #doc-section h2:first-of-type {
    scroll-margin-top: 15em;
  }

  h3 {
    font-size: 1.1rem;
    color: var(--c-text-sub);
    margin-top: 1.4em;
    position: relative;
  }

  h3::before {
    content: "";
    position: absolute;
    left: -0.9rem;
    top: 0.4em;
    width: 4px;
    height: 0.9em;
    border-radius: 999px;
    background: var(--c-brand-light);
  }

  h4 {
    font-size: 1.0rem;
    color: var(--c-text-sub);
    margin-top: 1.2em;
    margin-bottom: 0.3em;
  }

  h2, h3, h4 { position: relative; }
  .header-anchor {
    opacity: 0;
    position: absolute;
    left: -1.2em;
    color: var(--c-text-muted);
    text-decoration: none;
    font-weight: 400;
    cursor: pointer;
  }
  h3 .header-anchor { left: -1.8em; }
  h4 .header-anchor { left: -1.4em; font-size: 0.9em; }
  h2:hover .header-anchor, h3:hover .header-anchor, h4:hover .header-anchor,
  .header-anchor:focus { opacity: 0.4; }
  .header-anchor:hover { opacity: 0.7; text-decoration: none; }

  .figure > img {
    flex-shrink: 0; min-width: 60px; max-width: 90%; height: auto; object-fit: contain;
  }

  /* No bullets if we have icons */
  ul li:has(img.icon) {
    list-style-type: none;
    margin-left: -1em;
  }

  img.icon, img.topnav-icon {
    display: inline-block;
    width: 1.4em;
    height: 1.4em;
    vertical-align: -0.3em; /* Adjust to align baseline nicely */
    margin: 0 0.0em;
    line-height: 1;
    opacity: 0.6;
  }

  img:not(.topnav-icon):not(.no-invert) { filter: var(--img-dark-filter); }

  /* ==========================================================================
     LAYOUT ARCHITECTURE (8-Column Model)
     L | N | C | C | C | C | P | R
     ========================================================================== */

  #doc-title, #doc-footer, #doc-all {
    width: 100%;

    display: grid;
    /* 1. L (Left Flex)
       2. N (Nav / Wide Start)
       3. C1 (Std Start)
       4. C2
       5. C3
       6. C4 (Std End)
       7. P (Padding / Wide End)
       8. R (Right Flex)
    */
    grid-template-columns:
      minmax(0, 1fr)                  /* L */
      minmax(0, var(--w-sidebar))     /* N */
      minmax(0, var(--w-col))         /* C */
      minmax(0, var(--w-col))         /* C */
      minmax(0, var(--w-col))         /* C */
      minmax(0, var(--w-col))         /* C */
      minmax(0, var(--w-sidebar))     /* P */
      minmax(0, 1fr);                 /* R */

    column-gap: 1rem;
  }

  /* --- HEADER & FOOTER PLACEMENT --- */

  #doc-title {
    border-bottom: 2px solid var(--c-border);
    padding: 2rem 0;
    align-items: center;
    background-color: var(--c-bg-header);

    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    z-index: 100;
  }

  #doc-footer {
    border-top: 1px solid var(--c-border);
    padding: 2.5rem 0;
    margin-top: auto;
    background-color: var(--c-bg-header);
  }

  /* Header/Footer content respects the variable span */
  #doc-title > *,
  #doc-footer > * {
    grid-column: 3 / 7;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* --- MAIN CONTENT PLACEMENT --- */

  #doc-all {
    flex: 1 0 auto;
    padding-top: 2.5rem;
    align-items: start;
  }

  /* Sidebar: Always occupies Column 2 (N) */
  #tocContainer {
    grid-column: 2;
    padding-left: 1rem;
    width: 100%;

    position: sticky;
    top: 2rem;
    max-height: 90vh;
    overflow-y: auto;
    font-family: system-ui, sans-serif;
    padding-right: 1rem;
    display: var(--toc-display);

    background: var(--c-bg-nav);
    border-radius: 12px;
    border: 1px solid var(--c-border);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    padding: 1.0rem 1.25rem 1.25rem;

  }


  /* Main Content: Controlled by variables */
  #doc-main {
    grid-column-start: var(--col-main-start);
    grid-column-end: var(--col-main-end);

    padding-right: 1rem;
    min-width: 0;

    background: var(--c-bg-surface);
    border-radius: 0px;
    padding: 2rem 2.4rem 2.8rem;
    margin-bottom: 1rem;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(15, 23, 42, 0.04);

  }

  /* ==========================================================================
     HEADER CONTENT STYLING
     ========================================================================== */
  #symcatTitle {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 2.2rem;
    letter-spacing: -0.02em;
    color: var(--c-text-main);
    margin: 0;
    line-height: 1.1;
    background: linear-gradient(135deg, var(--c-brand), var(--c-brand-light));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
  }

  #symcatSubtitle {
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.2rem;
    color: var(--c-text-sub);
    margin: 0.5rem 0 1.2rem 0;
  }

  #topnav { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }


  .toplink {
    appearance: none;
    border: 1px solid var(--c-border);
    font-family: system-ui, sans-serif;
    font-size: 0.9rem;
    color: var(--c-text-sub);
    transition: all 0.15s ease;
    background-color: var(--c-bg-surface);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    font-weight: 600;
    border-radius: 50px;
    padding: 0.48em 0.98em 0.48em 0.78em;
    display: inline-flex;
    align-items: center;
    gap: 0.38em;
    line-height: 1.1;
    cursor: pointer;
  }

  .toplink:hover {
    text-decoration: none;
    border-color: var(--c-brand);
    color: var(--c-brand);
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  }

  /* Solid pills for the sister sites and Ko-fi; deeper tones in dark mode */
  .toplink.toplink-solid {
    background: var(--pill-bg);
    border-color: transparent;
    color: #fff;
  }
  .toplink.toplink-solid:hover { color: #fff; border-color: transparent; filter: brightness(1.08); }
  .toplink.toplink-solid .topnav-icon { filter: brightness(0) invert(1); }
  .toplink-arxiv   { --pill-bg: light-dark(#b31b1b, hsl(0, 52%, 38%)); }
  .toplink-poly    { --pill-bg: light-dark(#2a6496, hsl(208, 45%, 38%)); }
  .toplink-support { --pill-bg: light-dark(#f48525, hsl(28, 62%, 42%)); }

  .toplink:focus-visible {
    outline: 2px solid var(--c-link);
    outline-offset: 2px;
  }

  .toplink .topnav-icon {
    flex: 0 0 auto;
    margin: 0;
    vertical-align: middle;
    filter: var(--topnav-icon-filter);
  }

  .theme-toggle {
    color: var(--c-text-sub);
    min-width: 2.45rem;
    justify-content: center;
    padding-left: 0.68em;
    padding-right: 0.68em;
  }

  .theme-icon {
    width: 1.1rem;
    height: 1.1rem;
    display: block;
    flex: 0 0 auto;
  }

  .theme-icon[hidden] { display: none !important; }

  .theme-icon-moon { display: none; }
  .theme-icon-sun { display: block; }

  :root.dark .theme-icon-sun { display: none; }
  :root.dark .theme-icon-moon { display: block; }

  @media (prefers-color-scheme: dark) {
    :root:not(.light) .theme-icon-sun { display: none; }
    :root:not(.light) .theme-icon-moon { display: block; }
  }

  /* ==========================================================================
      SIDEBAR (TOC) STYLING
     ========================================================================== */
  .toc-collapse-button { display: none; }

  #tocContainer nav ul { list-style: none; padding: 0; margin: 0; }
  #tocContainer li { margin: 0; }

  #tocContainer a {
    display: block;
    text-decoration: none;
    line-height: 1.3;
    color: var(--c-text-sub);
    transition: color 0.1s;
    padding: 0.4rem 0 0.4rem 0.8rem;
  }
  #tocContainer a:hover { color: var(--c-brand); }

  #tocContainer a:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: -2px;
    background-color: var(--c-bg-surface);
  }

  #tocContainer .section {
    font-weight: 700;
    font-size: 0.75rem;
    margin-top: 0.85em;
    margin-bottom: 0.15em;
    color: var(--c-text-main);

    text-transform: uppercase;
    letter-spacing: 0.07em;
  }
  #tocContainer .section .katex {
    text-transform: none;
    letter-spacing: normal;
  }


  #tocContainer .subsection {
    font-weight: 400;
    font-size: 0.85rem;
    padding-left: 0.8em;
    color: var(--c-nav-subsec);
    border-left: 2px solid transparent;
    margin-left: 1em;
  }
  #tocContainer .subsection:hover {
    /* border-left-color: var(--c-brand-light); */
    color: var(--c-brand);
  }

  /* ==========================================================================
      CONTENT & CARDS
     ========================================================================== */
  #page-meta {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 0.85rem; color: var(--c-text-muted); margin-bottom: 1.5rem;
  }
  .dateMod::before { content: "Last updated: "; margin-right: 0.3em; }

  @media (min-width: 901px) {
    .toc-collapse-button {
      appearance: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      width: 100%;
      margin: 0 0 0.6rem;
      padding: 0.35rem 0.45rem;
      border: 0;
      border-radius: 0.3rem;
      background: transparent;
      color: var(--c-text-sub);
      font: 600 0.78rem/1.2 system-ui, sans-serif;
      cursor: pointer;
    }

    .toc-collapse-button:hover {
      color: var(--c-brand);
      background: var(--c-bg-surface);
    }

    .toc-collapse-button:focus-visible {
      outline: 2px solid var(--c-brand);
      outline-offset: 2px;
    }

    .toc-collapse-icon {
      width: 1rem;
      height: 1rem;
      flex: 0 0 auto;
    }

    #doc-all.has-text-width {
      --reading-width: calc(84ch + 4.8rem + 2px);
      grid-template-columns: minmax(1rem, 1fr) minmax(14rem, 20rem)
        minmax(0, var(--reading-width)) minmax(1rem, 1fr);
      column-gap: 1rem;
    }
    .has-text-width #doc-main { grid-column: 3; }
    .has-text-width #tocContainer {
      grid-column: 2;
    }

    :root.toc-collapsed #doc-all.has-text-width {
      grid-template-columns: minmax(1rem, 1fr) 3rem
        minmax(0, var(--reading-width)) minmax(1rem, 1fr);
    }

    :root.toc-collapsed .has-text-width #tocContainer {
      padding: 0.45rem;
      overflow: hidden;
    }

    :root.toc-collapsed #tocContainer nav {
      display: none;
    }

    :root.toc-collapsed .toc-collapse-button {
      justify-content: center;
      margin: 0;
      min-height: 2rem;
      padding: 0.3rem;
    }

    :root.toc-collapsed .toc-collapse-label {
      display: none;
    }

    :root.toc-collapsed .toc-collapse-icon {
      transform: rotate(180deg);
    }
  }

  .has-text-width .katex-display {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.5rem;
  }
  .has-text-width .katex-display > .katex {
    white-space: nowrap;
    max-width: none;
  }

  .topicsection { margin: 2rem 0; }

  .topic-card-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  }

  .topic-card-grid p { margin: 0; height: 100%; }

  .topic-card {
    display: flex; flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 4.5rem; height: 100%; padding: 0.75rem 0.75rem 0.75rem 1rem;
    background: var(--c-bg-surface);
    border-radius: 8px; color: var(--c-text-main);
    transition: all 0.2s ease; overflow: hidden;

    border: 2px solid var(--c-card-border);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1);

    border-left: 4px solid var(--c-card-edge);

  }
  .topic-card:hover {
    text-decoration: none;
    border-color: var(--c-brand);
    transform: translateY(-4px);

    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    border: 2px solid var(--c-link);
    border-left: 4px solid var(--c-link);
  }

  .card-text { display: flex; flex-direction: column; flex: 1; padding-right: 0.5rem; }
  .card-title {
    display: block; font-family: system-ui, -apple-system, sans-serif;
    font-weight: 600; font-size: 0.9rem; color: var(--c-brand); line-height: 1.25; margin: 0;
  }
  .topic-card img {
    width: 20%;
    min-width: 3rem;
    height: 100%;
    max-height: 4rem;
    object-fit: contain;
    object-position: center right;
    margin-left: 0.8rem;
    opacity: 0.8;
  }
  .topic-card img:not(.no-invert) { filter: var(--img-dark-filter); }

  /* ==========================================================================
     CODE, MACROS, TABLES
     ========================================================================== */
  pre {
      position: relative; margin-left: 2rem; background: var(--c-bg-header);
      padding: 1rem; border-radius: 4px; border-left: 4px solid var(--c-brand);
      overflow-x: auto; max-width: 100%;
  }
  pre > code {
      background: transparent; padding: 0; border-radius: 0;
      color: inherit; font-size: 1.0em;
  }
  .copy-btn {
    position: absolute; top: 0.5rem; right: 0.5rem; background: transparent;
    border: 1px solid var(--c-border); border-radius: 4px; color: var(--c-text-muted);
    font-size: 0.8rem; padding: 0.2rem 0.5rem; cursor: pointer; transition: all 0.2s; opacity: 0;
  }
  pre:hover .copy-btn { opacity: 1; background: var(--c-bg-surface); }
  .copy-btn:hover { color: var(--c-brand); border-color: var(--c-brand); }

  .defin { font-weight: 600; color: var(--c-defin); }
  .author-name {
      white-space: nowrap;
      letter-spacing: -0.01em;
      font-weight: 500;
      color: var(--c-text-main); text-decoration: none;
      border-bottom: 1px dotted var(--c-text-muted); transition: color 0.1s;
  }
  .author-name:hover {
    color: var(--c-brand);
    border-bottom-style: solid;
    text-decoration: none;
  }

  /* Tableaux */
  .ytableau, .array, .tabular {
    display: grid;
    gap: 0;
    margin: 1.5rem auto;
    width: fit-content;
    font-size: 0.9rem;
    line-height: 1;
    border-collapse: collapse;
  }
  .ytableau.inline {
    display: inline-grid;
    margin: 0.3em 0.5em;
    vertical-align: middle;
  }

  .ytableau > span {
      display: flex;
      align-items: center;
      justify-content: center;

      width: 1.6em;
      height: 1.6em;
      aspect-ratio: 1/1;
      min-width: 0;
      min-height: 0;
      font-weight: 600;
      margin: 0;

      --bw: 0.1em; /* Border width */
      --bc: var(--c-tableau-border, black); /* Border color */

      border-width: var(--bw);

      /* Default all sides to transparent */
      --bs-n: transparent;
      --bs-s: transparent;
      --bs-e: transparent;
      --bs-w: transparent;

      padding: 0.1em;

      border-right: var(--bw) solid var(--bs-e);
      border-left: var(--bw) solid var(--bs-w);
      border-top: var(--bw) solid var(--bs-n);
      border-bottom: var(--bw) solid var(--bs-s);
  }

  .border-n { --bs-n: var(--bc) !important;}
  .border-s { --bs-s: var(--bc) !important;}
  .border-e { --bs-e: var(--bc) !important;}
  .border-w { --bs-w: var(--bc) !important;}

  .array > span, .tabular > span {
    display: flex; align-items: center; min-width: 2em;
    padding: 0.5em 0.75em; border: none; font-weight: normal;
  }
  .array > span.exchange-cell, .tabular > span.exchange-cell {
    background: var(--c-exchange);
    box-shadow: inset 0 -2px 0 var(--c-brand);
    font-weight: 650;
  }
  .exchange-table > span {
    min-width: 1.5em;
    padding: 0.45em 0.25em;
  }
  .align-l { justify-content: flex-start; text-align: left; padding-left: 0.2em;}
  .align-c { justify-content: center; text-align: center; }
  .align-r { justify-content: flex-end; text-align: right; padding-right: 0.2em;}
  .rule { border: none; display: block; background: var(--c-rule, #000000); margin: 0; padding: 0 !important; }
  .rule-top, .rule-bottom { height: 2px; }
  .rule-mid { height: 1px; }

  .figure, .ytabs {
    margin: 2rem auto; padding: 1rem 0; display: flex;
    flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem;
  }
  .figure p, .ytabs p { display: contents; margin: 0; }

  /* Theorem-like environments */
  div.env, details.env {
    border: 0;
    padding: 0;
    background: transparent;
    margin: 0;
    border-radius: 0;
  }
  details.env > summary {
    color: var(--math-accent); font-weight: bold; cursor: pointer;
    list-style: none; position: relative; padding-right: 2em;
  }
  details.env > summary::-webkit-details-marker { display: none; }
  details.env > summary::after {
    content: ""; position: absolute; right: 0.75em; top: 0.4em;
    width: 0.5em; height: 0.5em; border-right: 2px solid var(--math-accent);
    border-bottom: 2px solid var(--math-accent); transform: rotate(-45deg); transition: transform 0.2s ease;
  }
  details.env[open] > summary::after { transform: rotate(45deg); top: 0.3em; }
  div.env.theorem,
  div.env.proposition,
  div.env.lemma,
  div.env.corollary,
  details.env.theorem,
  details.env.proposition,
  details.env.lemma,
  details.env.corollary { font-style: italic; }
  div.env.theorem > p:first-child,
  div.env.proposition > p:first-child,
  div.env.lemma > p:first-child,
  div.env.corollary > p:first-child,
  details.env.theorem > summary,
  details.env.proposition > summary,
  details.env.lemma > summary,
  details.env.corollary > summary { font-style: normal; }
  details.env.proof { font-style: normal; }

  /* Biblio & Lists */
  #bibliography ol { list-style: none; margin: 0; padding: 0; }
  #bibliography li {
    display: grid;
    grid-template-columns: 10.8em minmax(0, 1fr);
    column-gap: 0.75em;
    align-items: start;
    position: relative;
    margin: 0.25em 0 0.75em;
    line-height: 1.45;
  }
  #bibliography li > .citeMeta {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    white-space: nowrap;
  }
  #bibliography li .citeKey {
    font-weight: bold;
    color: var(--c-text-main);
  }
  #bibliography li > .citeText {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  #bibliography li > .citeText > .citeJournal,
  #bibliography li > .citeText > .citeBooktitle { font-style: italic; }
  #bibliography li > .citeText > .citeVolume { font-weight: 700; }
  .bibtex-details {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 0;
    margin: 0;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.8rem;
  }
  .bibtex-details[open] {
    height: auto;
    margin-top: 0.45rem;
  }
  .bibtex-details > summary {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    position: absolute;
    left: 7.4em;
    top: 0;
    cursor: pointer;
    user-select: none;
    list-style: none;
    color: var(--c-text-sub);
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    line-height: 1.45;
  }
  .bibtex-details > summary::-webkit-details-marker { display: none; }
  .bibtex-details > summary:hover,
  .bibtex-details > summary:focus-visible {
    color: var(--c-brand);
    text-decoration: underline;
  }
  .bibtex-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.55rem 0 0.35rem;
  }
  .bibtex-actions button {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid var(--c-border);
    border-radius: 4px;
    color: var(--c-text-sub);
    background: var(--c-bg-surface);
    font: inherit;
    padding: 0.25rem 0.55rem;
    cursor: pointer;
  }
  .bibtex-actions button:hover,
  .bibtex-actions button:focus-visible {
    color: var(--c-brand);
    border-color: var(--c-brand);
  }
  .bibtex-actions button.is-success {
    color: var(--c-link);
    border-color: var(--c-link);
  }
  #bibliography .bibtex-code {
    margin: 0.35rem 0 0;
    padding: 0.75rem;
    font-size: 0.8rem;
    line-height: 1.35;
    border-left-color: var(--c-link);
  }
  #bibliography .bibtex-code > code {
    white-space: pre;
  }
  @keyframes citeFade {
    0% { background-color: rgba(255, 230, 0, 0.5); } 100% { background-color: transparent; }
  }
  #bibliography li:target { animation: citeFade 3s ease-out; }

  @media(max-width: 600px) {
    #bibliography li {
      grid-template-columns: 1fr;
      row-gap: 0.1em;
    }
    #bibliography li > .citeText {
      grid-column: 1;
      grid-row: 2;
    }
    .bibtex-details {
      grid-column: 1;
      grid-row: 3;
    }
  }

  ul, ol { margin-top: 0.5rem; margin-bottom: 0.8rem; padding-left: 2rem; }
  li { margin-bottom: 0.25rem; }
  li > p { margin-top: 0; margin-bottom: 0; }
  li > ul, li > ol { margin-top: 0.25rem; margin-bottom: 0; }

  /* Rating & Table */
  .fam-rating {
    background: linear-gradient(to right, var(--c-rating-from) var(--percent), var(--c-rating-to) var(--percent));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  .family-index {
      width: 90%; margin: 20px auto; border-collapse: collapse; font-family: sans-serif;
  }
  .family-index th, .family-index td { text-align: left; padding: 10px 15px; }
  .family-index thead { border-bottom: 3px solid var(--c-rule); }
  .family-index th:first-child, .family-index td:first-child { width: auto; }
  .family-index th:not(:first-child),
  .family-index td:not(:first-child) {
    width: 1%; white-space: nowrap;
  }
  .family-index th.fi-relations,
  .family-index td.fam-relations {
    width: auto;
    min-width: 16rem;
    white-space: normal;
  }
  .family-index th { cursor: pointer; user-select: none; }
  .family-index th:hover { background-color: var(--c-bg-surface); }

  .family-index tbody tr:hover {
      background-color: color-mix(in srgb, var(--c-bg-gray) 20%, var(--c-bg-body));
      transition: background-color 0.1s ease-in;
      cursor: pointer;
  }
  .family-index tbody tr a { text-decoration: none; color: inherit; display: block; }
  .fam-relations-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }
  .fam-relation {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.15rem 0.4rem;
    border: 1px solid var(--c-border);
    border-radius: 4px;
    background: var(--c-bg-surface);
    font-size: 0.9rem;
  }
  .family-index .fam-relation a {
    display: inline;
    color: var(--c-brand);
    font-weight: 600;
  }
  .fam-relation-label,
  .fam-relation-ref {
    color: var(--c-text-muted);
  }
  .fam-relation-ref {
    font-size: 0.85em;
  }

  .family-index th::after {
    content: "    \21C5"; /* ⇅ */
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    margin-left: 0.5em;
    vertical-align: -0.15em; /* Fine-tune vertical position */

    /*  Set the color (uses your variables) */
    color: var(--c-text-muted);

    /* Animation */
    transition: background-color 0.2s ease;
  }

  /* Optional: Make the arrows light up when hovering the header */
  .family-index th:hover::after {
     color: var(--c-brand);
  }

  /* Relation graph */
  .relation-graph-document {
    --col-main-start: 2;
    --col-main-end: 8;
    --toc-display: none;
  }

  .relation-graph-document #doc-title > *,
  .relation-graph-document #doc-footer > * {
    grid-column: 2 / 8;
  }

  .relation-graph-document #doc-all {
    padding-top: 1.4rem;
  }

  .relation-graph-document #doc-main {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 1rem 2.5rem;
  }

  .relation-graph-document #page-meta {
    margin-bottom: 0.9rem;
  }

  .relation-graph-document #doc-section > h2:first-child {
    margin-top: 0;
  }

  .relation-graph-page {
    margin: 1.5rem 0 2.5rem;
  }

  .relation-graph-toolbar {
    display: grid;
    grid-template-columns: minmax(12rem, 0.9fr) minmax(24rem, 2.4fr) auto;
    align-items: end;
    gap: 0.8rem;
    margin: 1rem 0;
    font-family: system-ui, -apple-system, sans-serif;
  }

  .relation-graph-document .relation-graph-toolbar {
    position: sticky;
    top: 0.6rem;
    z-index: 20;
    padding: 0.65rem;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--c-bg-body) 78%, var(--c-bg-surface));
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(8px);
  }

  .relation-graph-search,
  .relation-graph-fieldset label {
    font-size: 0.88rem;
    color: var(--c-text-sub);
  }

  .relation-graph-search {
    display: grid;
    gap: 0.25rem;
  }

  .relation-graph-search input {
    width: 100%;
    min-height: 2.2rem;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    padding: 0.35rem 0.55rem;
    background: var(--c-bg-surface);
    color: var(--c-text-main);
    font: inherit;
  }

  .relation-graph-fieldset {
    min-width: 0;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    padding: 0.45rem 0.6rem 0.55rem;
    margin: 0;
  }

  .relation-graph-fieldset legend {
    padding: 0 0.3rem;
    color: var(--c-text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .relation-graph-preset-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .relation-graph-fieldset label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
  }

  .relation-graph-toolbar button {
    min-height: 2.2rem;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    background: var(--c-bg-surface);
    color: var(--c-text-main);
    font: inherit;
    cursor: pointer;
  }

  .relation-graph-toolbar button:hover,
  .relation-graph-toolbar button:focus-visible {
    border-color: var(--c-brand);
    color: var(--c-brand);
  }

  .relation-graph-toolbar .relation-graph-preset {
    min-height: 1.85rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.84rem;
  }

  .relation-graph-toolbar .relation-graph-preset.is-active {
    border-color: var(--c-brand);
    background: var(--c-brand);
    color: var(--c-on-brand);
  }

  .relation-graph-toolbar .relation-graph-preset.is-active:hover,
  .relation-graph-toolbar .relation-graph-preset.is-active:focus-visible {
    color: var(--c-on-brand);
  }

  .relation-graph-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
  }

  .relation-graph-document .relation-graph-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .relation-graph-stage {
    min-height: 34rem;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background:
      repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 39px,
        color-mix(in srgb, var(--c-border) 38%, transparent) 40px
      ),
      var(--c-bg-surface);
    overflow: auto;
  }

  .relation-graph-document .relation-graph-stage {
    min-height: calc(100vh - 18rem);
  }

  .relation-graph-svg {
    display: block;
    width: 100%;
    height: auto;
    font-family: system-ui, -apple-system, sans-serif;
  }

  .relation-node rect {
    fill: var(--relation-node-fill, var(--c-bg-surface));
    stroke: var(--relation-node-border, var(--c-border));
    stroke-width: 1.4;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12));
  }

  .relation-node-space-all {
    --relation-node-fill: color-mix(in srgb, var(--c-bg-surface) 82%, hsl(45, 90%, 72%));
    --relation-node-border: color-mix(in srgb, var(--c-border) 65%, hsl(45, 80%, 45%));
  }

  .relation-node-space-sym {
    --relation-node-fill: color-mix(in srgb, var(--c-bg-surface) 80%, hsl(205, 85%, 76%));
    --relation-node-border: color-mix(in srgb, var(--c-border) 62%, hsl(205, 80%, 42%));
  }

  .relation-node-space-qsym {
    --relation-node-fill: color-mix(in srgb, var(--c-bg-surface) 80%, hsl(150, 65%, 72%));
    --relation-node-border: color-mix(in srgb, var(--c-border) 62%, hsl(150, 65%, 35%));
  }

  .relation-node-space-shiftedsym,
  .relation-node-space-symstar {
    --relation-node-fill: color-mix(in srgb, var(--c-bg-surface) 80%, hsl(276, 75%, 78%));
    --relation-node-border: color-mix(in srgb, var(--c-border) 62%, hsl(276, 60%, 46%));
  }

  .relation-node-space-supersym {
    --relation-node-fill: color-mix(in srgb, var(--c-bg-surface) 80%, hsl(338, 80%, 80%));
    --relation-node-border: color-mix(in srgb, var(--c-border) 62%, hsl(338, 70%, 48%));
  }

  .relation-node-space-pqsym,
  .relation-node-space-lsym {
    --relation-node-fill: color-mix(in srgb, var(--c-bg-surface) 80%, hsl(184, 68%, 75%));
    --relation-node-border: color-mix(in srgb, var(--c-border) 62%, hsl(184, 65%, 37%));
  }

  .relation-node-space-other {
    --relation-node-fill: color-mix(in srgb, var(--c-bg-surface) 88%, var(--c-text-muted));
  }

  .relation-node-label-object {
    overflow: hidden;
  }

  .relation-node-link:hover .relation-node rect,
  .relation-node-link:focus-visible .relation-node rect {
    stroke: var(--c-brand);
    stroke-width: 2;
  }

  .relation-node-label {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0.55rem 0.8rem 0.45rem;
    color: var(--c-text-main);
    font-family: system-ui, -apple-system, sans-serif;
    pointer-events: none;
  }

  .relation-node-title {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 700;
  }

  .relation-node-meta {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--c-text-muted);
    font-size: 11px;
    line-height: 1.25;
    margin-top: 0.2rem;
  }

  .relation-node-label .katex {
    font-size: 1em;
  }

  .relation-edge-path {
    fill: none;
    stroke: color-mix(in srgb, var(--c-text-muted) 70%, transparent);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .relation-edge-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 24;
    cursor: pointer;
  }

  .relation-edge-selected .relation-edge-path,
  .relation-edge:hover .relation-edge-path,
  .relation-edge:focus-within .relation-edge-path {
    stroke: var(--c-brand);
    stroke-width: 3.6;
  }

  .relation-edge-status-conjecture .relation-edge-path {
    stroke-dasharray: 6 5;
  }

  #relationGraphArrow path {
    fill: var(--c-text-muted);
  }

  .relation-graph-empty {
    fill: var(--c-text-muted);
    font: 700 1rem system-ui, -apple-system, sans-serif;
  }

  .relation-graph-details {
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: var(--c-bg-surface);
    padding: 0.6rem 0.8rem;
    min-height: 3.25rem;
    font-family: system-ui, -apple-system, sans-serif;
    overflow-x: auto;
  }

  .relation-graph-document .relation-graph-details {
    position: sticky;
    top: 6.25rem;
    z-index: 10;
    max-height: 8rem;
    overflow: auto;
  }

  .relation-graph-details h3 {
    display: inline;
    margin: 0 0.8rem 0 0;
    color: var(--c-text-main);
    font-size: 0.9rem;
  }

  .relation-graph-details h3::before {
    content: none;
  }

  .relation-graph-details h4 {
    margin-top: 1rem;
    margin-bottom: 0.35rem;
  }

  .relation-graph-details-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
  }

  .relation-graph-detail-label {
    color: var(--c-text-main);
  }

  .relation-graph-conjecture {
    color: var(--c-data-red);
    font-weight: 700;
  }

  .relation-graph-edge-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: baseline;
  }

  .relation-graph-ref-list,
  .relation-graph-attr-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
    align-items: baseline;
  }

  .relation-graph-muted {
    color: var(--c-text-muted);
  }

  /* ==========================================================================
      RESPONSIVENESS
     ========================================================================== */
  #tocButton { display: none; }

  @media (min-width: 1400px) {
    :root { --w-col: 18rem; }  /* widen content columns: 4×18rem = 72rem */
  }

  @media (min-width: 1800px) {
    :root { --w-col: 22rem; }  /* even wider on large monitors: 4×22rem = 88rem */
  }

  @media (max-width: 1100px) {
    .topic-card-grid { grid-template-columns: repeat(2, 1fr); }
    .relation-graph-toolbar {
      grid-template-columns: 1fr;
      align-items: stretch;
    }
    .relation-graph-shell {
      grid-template-columns: 1fr;
    }
    .relation-graph-stage {
      min-height: 28rem;
    }
    .relation-graph-document .relation-graph-toolbar,
    .relation-graph-document .relation-graph-details {
      position: static;
      max-height: none;
    }
    .relation-graph-document .relation-graph-stage {
      min-height: 70vh;
    }
  }

  @media(max-width: 600px) {
    .topic-card-grid { grid-template-columns: 1fr; }
  }
  /* ==========================================================================
   MOBILE & TABLET OPTIMIZATION
   ========================================================================== */
  @media(max-width: 900px) {


    /* --- Flatten the Grid Layout --- */
    #doc-title, #doc-footer, #doc-all {
      display: block;
      width: 100%;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      grid-template-columns: none;
    }

    /* Reset grid items */
    #doc-title > *, #doc-footer > *, #doc-main {
      grid-column: auto;
      width: 100%;
      margin: 0;
      border: none;
      box-shadow: none;
      padding: 0.5rem 0.5rem;
    }

    /*  Off-Canvas Sidebar */
    #tocContainer {
      display: block;
      position: fixed;
      top: 0; left: 0; bottom: 0;
      width: 85%; max-width: 320px;
      z-index: 2000;

      background: var(--c-bg-surface);
      border-right: 1px solid var(--c-border);
      box-shadow: 5px 0 25px rgba(0,0,0,0.2);

      /* Hidden state */
      transform: translateX(-105%);
      transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);

      padding: 2rem 1.5rem;
      overflow-y: auto;
      border-radius: 0;
    }
    /*Toggled by Javascript */
    #tocContainer.sideBarShowHide {
      transform: translateX(0);
    }

   /* --- Top Navigation: Horizontal Scroll (Chips) --- */
  #topnav {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.6rem;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;
    scrollbar-color: var(--c-border) transparent;
    -ms-overflow-style: auto;

    /* 1. Layout: Bleed to edges */
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding-left: 1.25rem;

    /* Avoid masks here: iOS Safari can lose taps on controls inside masked
       horizontal scrollers. */

    /* 2. Important: Extra padding at the end */
    /* This ensures the last button isn't hidden under the fade when you reach the end */
    padding-right: 4rem;
    padding-bottom: 0.5rem;
    position: relative;
  }

  #topnav::-webkit-scrollbar {
    display: block;
    height: 0.35rem;
  }

  #topnav::-webkit-scrollbar-track { background: transparent; }

  #topnav::-webkit-scrollbar-thumb {
    background: var(--c-border);
    border-radius: 999px;
  }

  /* Adjust the buttons themselves */
  #topnav .toplink {
    flex-shrink: 0;          /* Prevent them from squishing */
    white-space: nowrap;     /* Force text to stay on one line */
    font-size: 0.85rem;      /* Slightly smaller */
    padding: 0.38em 0.72em 0.38em 0.58em;    /* Tighter padding */
  }

  #topnav .theme-toggle {
    order: -1;
    min-width: 2.25rem;
    padding-left: 0.55em;
    padding-right: 0.55em;
  }


    /* --- The Backdrop Overlay --- */
    #menuOverlay {
      position: fixed;
      top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0,0,0,0.5);
      z-index: 1999;
      opacity: 0; visibility: hidden;
      transition: opacity 0.3s;
      backdrop-filter: blur(2px);
    }
    /* Show overlay when body has this class */
    body.menu-open #menuOverlay {
      opacity: 1; visibility: visible;
    }
    /* Lock scrolling when menu is open */
    body.menu-open { overflow: hidden; }

    /*  The Full-Width Bottom Bar */
    #tocButton {
      display: flex;
      align-items: center;
      justify-content: center;

      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100vw;

      /* Auto height to accommodate safe areas */
      height: auto;
      min-height: 3.5rem;

      /* VITAL: Add padding for the "Safe Area" (iPhone Home Bar) */
      padding: 1rem;
      padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));

      background: var(--c-brand);
      color: #fff;
      border: none;
      border-top: 1px solid rgba(255,255,255,0.2);
      border-radius: 0;

      box-shadow: 0 -4px 10px rgba(0,0,0,0.1);
      z-index: 2001;
      cursor: pointer;

      font-family: system-ui, sans-serif;
      font-weight: 600;
      font-size: 1rem;
      letter-spacing: 0.03em;

      /* Start visible */
      transform: translateY(0);
      transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1); /* Smoother pop-up */
    }

    /* Hide the mobile TOC button if the list has no items */
    body:not(:has(#tocLinkList li)) #tocButton {
      display: none !important;
    }

    #tocButton:active {
      background: var(--c-brand-light);
    }

    .dateMod {
      visibility: hidden;
    }

    /* --- 5. Content Safety --- */
    /* Prevent math/tables from overflowing horizontally */
    .ytableau, .array, .tabular, table, .math-scroll {
      display: grid;
      max-width: 100%;
      overflow-x: auto;
      overflow-y: hidden;

      /*  IMPORTANT: Add padding so the scrollbar doesn't cover the bottom row */
      padding-bottom: 1rem;
      padding-top: 2px;
      padding-left: 2px;
      padding-right: 2px;

      /*  Align start so the left side isn't cut off if it was centered */
      justify-content: start;
      margin-left: 0;
      margin-right: 0;
    }

    /* --- 6. KaTeX Equation Scrolling --- */
    .katex-display {
      /* Force the container to respect screen width */
      max-width: 100%;

      /* Enable horizontal scroll */
      overflow-x: auto;
      overflow-y: hidden;

      /* Add padding for the scrollbar so it doesn't clip the bottom of symbols */
      padding-bottom: 0.5rem;

      /* Optional: formatting adjustments for mobile */
      margin: 1em 0;
      text-align: center;

      /* Mobile fix: In rare cases, KaTeX needs this to calculate width correctly */
      width: 100%;
      box-sizing: border-box;
    }

    /* Ensure the inner math block doesn't force width */
    .katex-display > .katex {
      white-space: nowrap;
      max-width: none; /* Let it grow as wide as needed */
    }

  }


  /* Landing page overrides */
  body.landing-page h2 { border-bottom: none; padding-bottom: 0; }


  @media print {
    #topnav, #tocContainer, #tocButton, #cookie-dialog, footer { display: none !important; }
    body, #doc-main { background: white !important; color: black !important; margin: 0; padding: 0; }
    a { text-decoration: none; color: black; }
  }
} /* End base */