/*
 * Darśana Atlas — visual system
 * A contemporary scholarly interface: editorial, quiet, and spatial.
 */

@layer reset, tokens, base, shell, components, routes, utilities, responsive;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    min-width: 320px;
    scroll-behavior: smooth;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  ul,
  ol {
    margin: 0;
    padding: 0;
  }

  img,
  picture,
  svg,
  canvas {
    display: block;
    max-width: 100%;
  }

  button,
  input,
  select,
  textarea {
    color: inherit;
    font: inherit;
  }

  button,
  [role="button"] {
    cursor: pointer;
  }

  button {
    border: 0;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  [hidden] {
    display: none !important;
  }
}

@layer tokens {
  :root {
    color-scheme: light;
    --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    --font-body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-deva: "Noto Serif Devanagari", "Kohinoor Devanagari", "Nirmala UI", Mangal, serif;
    --paper: #f3ecdc;
    --paper-muted: #eae0cc;
    --paper-strong: #fffaf0;
    --surface: rgba(255, 250, 240, 0.74);
    --surface-solid: #faf4e8;
    --surface-raised: rgba(255, 252, 245, 0.94);
    --surface-deep: #e7dcc6;
    --ink: #242622;
    --ink-soft: #50534d;
    --ink-muted: #72746c;
    --line: rgba(48, 50, 45, 0.16);
    --line-strong: rgba(48, 50, 45, 0.3);
    --line-faint: rgba(48, 50, 45, 0.085);
    --indigo: #263e6e;
    --indigo-bright: #365c9d;
    --indigo-wash: rgba(38, 62, 110, 0.1);
    --copper: #9a5936;
    --copper-bright: #b3673e;
    --copper-wash: rgba(154, 89, 54, 0.11);
    --vermilion: #a84339;
    --saffron: #aa7c25;
    --sage: #47776c;
    --violet: #715d89;
    --shadow-sm: 0 1px 2px rgba(49, 40, 24, 0.06), 0 8px 24px rgba(49, 40, 24, 0.04);
    --shadow-md: 0 18px 55px rgba(51, 42, 26, 0.1), 0 2px 8px rgba(51, 42, 26, 0.05);
    --shadow-lg: 0 35px 90px rgba(46, 38, 24, 0.15), 0 6px 20px rgba(46, 38, 24, 0.07);
    --ring: 0 0 0 3px var(--paper), 0 0 0 5px var(--indigo-bright);
    --radius-xs: 0.45rem;
    --radius-sm: 0.75rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    --radius-pill: 999px;
    --header-height: 5.25rem;
    --content: 76rem;
    --content-wide: 92rem;
    --content-narrow: 47rem;
    --gutter: clamp(1.15rem, 4vw, 3.5rem);
    --section-gap: clamp(5rem, 10vw, 10rem);
    --ease-out: cubic-bezier(0.2, 0.72, 0.18, 1);
    --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --duration: 360ms;
  }

  html[data-theme="night"],
  body[data-theme="night"] {
    color-scheme: dark;
    --paper: #101622;
    --paper-muted: #151d2b;
    --paper-strong: #1b2433;
    --surface: rgba(24, 32, 46, 0.72);
    --surface-solid: #192231;
    --surface-raised: rgba(28, 37, 52, 0.96);
    --surface-deep: #0d131e;
    --ink: #f0eadc;
    --ink-soft: #c7c4ba;
    --ink-muted: #94988f;
    --line: rgba(230, 225, 210, 0.16);
    --line-strong: rgba(230, 225, 210, 0.3);
    --line-faint: rgba(230, 225, 210, 0.08);
    --indigo: #9bb7ef;
    --indigo-bright: #b1c8f4;
    --indigo-wash: rgba(133, 168, 231, 0.11);
    --copper: #d18b63;
    --copper-bright: #e09a70;
    --copper-wash: rgba(209, 139, 99, 0.11);
    --vermilion: #df8176;
    --saffron: #d8b15a;
    --sage: #7fb5a4;
    --violet: #ad97c7;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22), 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 18px 55px rgba(0, 0, 0, 0.26), 0 2px 8px rgba(0, 0, 0, 0.18);
    --shadow-lg: 0 35px 90px rgba(0, 0, 0, 0.36), 0 6px 20px rgba(0, 0, 0, 0.25);
    --ring: 0 0 0 3px var(--paper), 0 0 0 5px var(--indigo-bright);
  }
}

@layer base {
  body {
    min-height: 100vh;
    overflow-x: clip;
    background:
      linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), var(--line-faint) calc(100% - 1px)) center / min(100% - 2rem, 92rem) 100% no-repeat,
      var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    transition: background-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
  }

  body::before {
    position: fixed;
    z-index: -2;
    inset: 0;
    background:
      linear-gradient(90deg, var(--line-faint) 1px, transparent 1px) 50% 0 / min(12vw, 9rem) 100%,
      radial-gradient(circle at 50% -20%, var(--copper-wash), transparent 42%);
    content: "";
    opacity: 0.32;
    pointer-events: none;
  }

  ::selection {
    background: color-mix(in srgb, var(--indigo) 22%, transparent);
    color: var(--ink);
  }

  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    border-radius: max(0.2rem, inherit);
    outline: 0;
    box-shadow: var(--ring);
  }

  main {
    min-height: calc(100vh - var(--header-height));
  }

  h1,
  h2,
  h3,
  h4,
  .display-type {
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.04;
    text-wrap: balance;
  }

  h1 {
    font-size: clamp(3.35rem, 9vw, 8.5rem);
    letter-spacing: -0.055em;
  }

  h2 {
    font-size: clamp(2.25rem, 5.5vw, 5rem);
    letter-spacing: -0.042em;
  }

  h3 {
    font-size: clamp(1.5rem, 2.8vw, 2.45rem);
    letter-spacing: -0.028em;
  }

  h4 {
    font-size: 1.25rem;
    letter-spacing: -0.012em;
  }

  p {
    text-wrap: pretty;
  }

  strong {
    font-weight: 650;
  }

  small {
    font-size: 0.82rem;
  }

  code,
  kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }

  kbd {
    display: inline-grid;
    min-width: 1.9rem;
    min-height: 1.6rem;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 0.35rem;
    background: var(--surface-deep);
    color: var(--ink-muted);
    font-size: 0.68rem;
    line-height: 1;
  }

  .devanagari,
  [lang="sa"],
  [lang="hi"] {
    font-family: var(--font-deva);
    letter-spacing: 0;
  }
}

@layer shell {
  .skip-link {
    position: fixed;
    z-index: 1000;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    background: var(--paper-strong);
    box-shadow: var(--shadow-md);
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 700;
    transform: translateY(-200%);
    transition: transform 180ms var(--ease-out);
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  .page-atmosphere {
    position: fixed;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .page-atmosphere__orb {
    position: absolute;
    width: min(45rem, 65vw);
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0.09;
    filter: blur(4rem);
  }

  .page-atmosphere__orb--one {
    top: 9rem;
    right: -25rem;
    background: var(--indigo);
  }

  .page-atmosphere__orb--two {
    bottom: 15rem;
    left: -25rem;
    background: var(--copper);
  }

  .page-atmosphere__grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
    opacity: 0.025;
    mix-blend-mode: multiply;
  }

  html[data-theme="night"] .page-atmosphere__grain,
  body[data-theme="night"] .page-atmosphere__grain {
    opacity: 0.035;
    mix-blend-mode: screen;
  }

  .site-header {
    position: sticky;
    z-index: 100;
    top: 0;
    width: 100%;
    border-bottom: 1px solid transparent;
    transition: background-color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
  }

  .site-header.is-scrolled,
  .site-header[data-scrolled="true"] {
    border-bottom-color: var(--line);
    background: color-mix(in srgb, var(--paper) 86%, transparent);
    box-shadow: 0 10px 30px rgba(30, 29, 24, 0.035);
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
  }

  .site-header__inner {
    display: grid;
    width: min(100% - (2 * var(--gutter)), var(--content-wide));
    min-height: var(--header-height);
    margin-inline: auto;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2rem;
  }

  .brand {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.75rem;
  }

  .brand__mark {
    position: relative;
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.16rem;
    padding: 0.26rem;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    transform: rotate(45deg);
    transition: transform 600ms var(--ease-spring), border-color var(--duration) ease;
  }

  .brand:hover .brand__mark {
    border-color: var(--copper);
    transform: rotate(135deg);
  }

  .brand__mark span {
    border: 1px solid var(--copper);
    border-radius: 50%;
  }

  .brand__mark span:nth-child(1),
  .brand__mark span:nth-child(4) {
    background: var(--copper);
  }

  .brand__wordmark {
    display: flex;
    align-items: baseline;
    gap: 0.42rem;
    white-space: nowrap;
  }

  .brand__name {
    font-family: var(--font-display);
    font-size: 1.18rem;
    letter-spacing: -0.02em;
  }

  .brand__descriptor {
    color: var(--ink-muted);
    font-size: 0.58rem;
    font-weight: 750;
    letter-spacing: 0.19em;
    text-transform: uppercase;
  }

  .primary-nav {
    display: flex;
    align-items: center;
    gap: clamp(1.3rem, 2.5vw, 2.5rem);
  }

  .primary-nav a {
    position: relative;
    padding-block: 0.9rem;
    color: var(--ink-soft);
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.025em;
  }

  .primary-nav a::after {
    position: absolute;
    right: 0;
    bottom: 0.45rem;
    left: 0;
    height: 1px;
    background: var(--copper);
    content: "";
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 280ms var(--ease-out);
  }

  .primary-nav a:hover,
  .primary-nav a[aria-current="page"] {
    color: var(--ink);
  }

  .primary-nav a:hover::after,
  .primary-nav a[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .site-header__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.3rem;
  }

  .icon-button {
    display: inline-grid;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-soft);
    transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, transform 180ms var(--ease-out);
  }

  .icon-button:hover {
    border-color: var(--line);
    background: var(--surface);
    color: var(--ink);
    transform: translateY(-1px);
  }

  .icon-button svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
  }

  .theme-toggle__moon {
    display: none;
  }

  html[data-theme="night"] .theme-toggle__sun,
  body[data-theme="night"] .theme-toggle__sun {
    display: none;
  }

  html[data-theme="night"] .theme-toggle__moon,
  body[data-theme="night"] .theme-toggle__moon {
    display: block;
  }

  .menu-toggle {
    display: none;
    align-content: center;
    gap: 0.35rem;
  }

  .menu-toggle span {
    display: block;
    width: 1.15rem;
    height: 1px;
    background: currentColor;
    transition: transform 240ms var(--ease-out);
  }

  .menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(0.2rem) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-0.2rem) rotate(-45deg);
  }

  .mobile-nav {
    width: min(100% - (2 * var(--gutter)), var(--content-wide));
    margin: 0 auto;
    padding: 1rem 0 1.5rem;
    border-top: 1px solid var(--line);
  }

  .mobile-nav a {
    display: flex;
    min-height: 3.7rem;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid var(--line-faint);
    font-family: var(--font-display);
    font-size: 1.6rem;
  }

  .mobile-nav a span {
    color: var(--ink-muted);
    font-family: var(--font-body);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
  }

  .site-footer {
    position: relative;
    margin-top: var(--section-gap);
    border-top: 1px solid var(--line);
  }

  .site-footer::before {
    position: absolute;
    top: -1px;
    left: var(--gutter);
    width: clamp(4rem, 15vw, 12rem);
    height: 1px;
    background: var(--copper);
    content: "";
  }

  .site-footer__inner {
    display: grid;
    width: min(100% - (2 * var(--gutter)), var(--content-wide));
    margin-inline: auto;
    padding-block: clamp(3rem, 7vw, 5rem) 2rem;
    grid-template-columns: 1fr 1.25fr auto;
    align-items: start;
    gap: 2rem 4rem;
  }

  .brand--footer .brand__mark {
    width: 1.75rem;
    height: 1.75rem;
  }

  .site-footer__statement {
    max-width: 24ch;
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2.5vw, 2.25rem);
    line-height: 1.15;
  }

  .site-footer__links {
    display: grid;
    justify-items: start;
    gap: 0.6rem;
    color: var(--ink-soft);
    font-size: 0.78rem;
  }

  .site-footer__links a,
  .site-footer__links button {
    padding: 0;
    border-bottom: 1px solid transparent;
    background: none;
  }

  .site-footer__links a:hover,
  .site-footer__links button:hover {
    border-color: currentColor;
    color: var(--ink);
  }

  .site-footer__note {
    grid-column: 1 / -1;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    color: var(--ink-muted);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
  }

  .search-dialog {
    width: min(46rem, calc(100% - 2rem));
    max-height: min(46rem, calc(100dvh - 2rem));
    margin: clamp(1rem, 8vh, 6rem) auto auto;
    padding: clamp(1.3rem, 4vw, 2.5rem);
    overflow: auto;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xl);
    background: var(--surface-raised);
    box-shadow: var(--shadow-lg);
    color: var(--ink);
  }

  .search-dialog::backdrop {
    background: color-mix(in srgb, #0d1118 64%, transparent);
    backdrop-filter: blur(8px);
  }

  .search-dialog[open] {
    animation: dialog-enter 300ms var(--ease-spring) both;
  }

  .search-dialog__topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .search-dialog__topline h2 {
    margin-top: 0.25rem;
    font-size: clamp(1.8rem, 5vw, 3rem);
  }

  .search-field {
    display: grid;
    min-height: 4.3rem;
    margin-top: 2rem;
    padding-inline: 1.15rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--paper-strong);
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    transition: border-color 180ms ease, box-shadow 180ms ease;
  }

  .search-field:focus-within {
    border-color: var(--indigo);
    box-shadow: 0 0 0 3px var(--indigo-wash);
  }

  .search-field svg {
    fill: none;
    stroke: var(--ink-muted);
    stroke-linecap: round;
    stroke-width: 1.5;
  }

  .search-field input {
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font-size: 1rem;
  }

  .search-field input::placeholder {
    color: var(--ink-muted);
    opacity: 1;
  }

  .search-dialog__results {
    display: grid;
    gap: 0.55rem;
    margin-top: 1.25rem;
  }

  .search-dialog__hint {
    padding: 1rem 0;
    color: var(--ink-muted);
    font-size: 0.84rem;
  }

  .search-result,
  .search-result-item {
    display: grid;
    min-height: 4.25rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
    transition: border-color 180ms ease, background-color 180ms ease, transform 180ms var(--ease-out);
  }

  .search-result:hover,
  .search-result-item:hover {
    border-color: var(--copper);
    background: var(--paper-strong);
    transform: translateX(0.2rem);
  }

  .search-result small,
  .search-result-item small {
    color: var(--ink-muted);
  }

  .toast-region {
    position: fixed;
    z-index: 300;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    display: grid;
    width: min(24rem, calc(100% - 2rem));
    gap: 0.6rem;
    pointer-events: none;
  }

  .toast {
    padding: 0.9rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    box-shadow: var(--shadow-md);
    font-size: 0.84rem;
    animation: toast-enter 320ms var(--ease-spring) both;
  }

  .noscript-message {
    position: fixed;
    z-index: 9999;
    inset: 1rem;
    display: grid;
    place-content: center;
    padding: 2rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--paper-strong);
    text-align: center;
  }

  .noscript-message h1 {
    font-size: clamp(2rem, 6vw, 4rem);
  }

  .noscript-message p {
    max-width: 44ch;
    margin: 1rem auto 0;
  }

  @keyframes dialog-enter {
    from { opacity: 0; transform: translateY(1rem) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  @keyframes toast-enter {
    from { opacity: 0; transform: translateY(0.75rem); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@layer components {
  .app {
    width: 100%;
  }

  .container,
  .content-shell,
  .page-shell,
  .route-shell {
    width: min(100% - (2 * var(--gutter)), var(--content));
    margin-inline: auto;
  }

  .container--wide,
  .content-shell--wide,
  .page-shell--wide {
    width: min(100% - (2 * var(--gutter)), var(--content-wide));
  }

  .container--narrow,
  .prose-shell {
    width: min(100% - (2 * var(--gutter)), var(--content-narrow));
    margin-inline: auto;
  }

  .section,
  .page-section {
    padding-block: clamp(4.5rem, 9vw, 8rem);
  }

  .section + .section,
  .page-section + .page-section {
    border-top: 1px solid var(--line);
  }

  .section--tight {
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
  }

  .eyebrow,
  .kicker,
  .overline,
  .section-label {
    color: var(--copper);
    font-size: 0.66rem;
    font-weight: 780;
    letter-spacing: 0.19em;
    line-height: 1.3;
    text-transform: uppercase;
  }

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

  .section-heading,
  .section-header {
    display: grid;
    max-width: 58rem;
    gap: 1rem;
    margin-bottom: clamp(2rem, 5vw, 4rem);
  }

  .section-heading--split,
  .section-header--split {
    max-width: none;
    grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.65fr);
    align-items: end;
    gap: 2rem 5rem;
  }

  .section-heading p:not(.eyebrow),
  .section-header p:not(.eyebrow),
  .lede,
  .page-lede {
    max-width: 60ch;
    color: var(--ink-soft);
    font-size: clamp(1rem, 1.6vw, 1.22rem);
    line-height: 1.65;
  }

  .folio {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--ink-muted);
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .folio::before {
    width: 1.75rem;
    height: 1px;
    background: var(--line-strong);
    content: "";
  }

  .button,
  .btn,
  .cta-button,
  .button-primary,
  .button-secondary {
    display: inline-flex;
    min-height: 3.15rem;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--ink);
    border-radius: var(--radius-pill);
    background: var(--ink);
    color: var(--paper-strong);
    font-size: 0.78rem;
    font-weight: 720;
    letter-spacing: 0.02em;
    line-height: 1;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms var(--ease-out), box-shadow 180ms ease;
  }

  .button:hover,
  .btn:hover,
  .cta-button:hover,
  .button-primary:hover {
    border-color: var(--indigo);
    background: var(--indigo);
    color: var(--paper-strong);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
  }

  .button--ghost,
  .button--secondary,
  .btn--ghost,
  .button-secondary {
    border-color: var(--line-strong);
    background: var(--surface);
    color: var(--ink);
  }

  .button--ghost:hover,
  .button--secondary:hover,
  .btn--ghost:hover,
  .button-secondary:hover {
    border-color: var(--ink);
    background: var(--paper-strong);
    color: var(--ink);
  }

  .button--text,
  .text-link,
  .arrow-link {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.55rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--line-strong);
    background: transparent;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 680;
    transition: border-color 180ms ease, color 180ms ease, gap 180ms var(--ease-out);
  }

  .button--text:hover,
  .text-link:hover,
  .arrow-link:hover {
    gap: 0.8rem;
    border-color: var(--copper);
    color: var(--copper);
  }

  .button-row,
  .hero__actions,
  .page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }

  .chip,
  .tag,
  .badge,
  .status-pill,
  .filter-chip {
    display: inline-flex;
    min-height: 2rem;
    width: fit-content;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: 0.67rem;
    font-weight: 680;
    letter-spacing: 0.035em;
    line-height: 1;
  }

  button.chip:hover,
  button.filter-chip:hover,
  .chip.is-active,
  .filter-chip[aria-pressed="true"],
  .filter-chip.is-active {
    border-color: var(--indigo);
    background: var(--indigo-wash);
    color: var(--indigo);
  }

  .badge--source,
  .source-type {
    border-color: color-mix(in srgb, var(--sage) 40%, var(--line));
    background: color-mix(in srgb, var(--sage) 10%, transparent);
    color: var(--sage);
  }

  .filters,
  .chip-row,
  .tab-list,
  .segmented-control,
  .depth-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
  }

  .segmented-control,
  .depth-control {
    width: fit-content;
    padding: 0.26rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
  }

  .segmented-control button,
  .depth-control button,
  .tab-button {
    min-height: 2.25rem;
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink-muted);
    font-size: 0.7rem;
    font-weight: 700;
  }

  .segmented-control button:hover,
  .depth-control button:hover,
  .segmented-control button[aria-pressed="true"],
  .depth-control button[aria-pressed="true"],
  .tab-button[aria-selected="true"] {
    background: var(--ink);
    color: var(--paper-strong);
  }

  .card,
  .panel,
  .surface-card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }

  .card--interactive,
  a.card,
  button.card {
    transition: border-color 240ms ease, background-color 240ms ease, box-shadow 240ms ease, transform 360ms var(--ease-spring);
  }

  .card--interactive:hover,
  a.card:hover,
  button.card:hover {
    border-color: var(--line-strong);
    background: var(--surface-raised);
    box-shadow: var(--shadow-md);
    transform: translateY(-0.35rem);
  }

  .card-grid,
  .feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .split-layout,
  .two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 4rem);
  }

  .prose,
  .rich-text {
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: clamp(1.04rem, 1.45vw, 1.18rem);
    line-height: 1.85;
  }

  .prose > * + *,
  .rich-text > * + * {
    margin-top: 1.25em;
  }

  .prose h2,
  .rich-text h2 {
    margin-top: 2em;
    font-size: clamp(2rem, 4vw, 3.2rem);
  }

  .prose h3,
  .rich-text h3 {
    margin-top: 1.7em;
  }

  .prose a,
  .rich-text a {
    border-bottom: 1px solid var(--copper);
    color: var(--ink);
  }

  .prose blockquote,
  .rich-text blockquote,
  .primary-specimen {
    position: relative;
    margin-block: 2rem;
    padding: clamp(1.4rem, 4vw, 2.5rem);
    border: 1px solid var(--line);
    border-left: 3px solid var(--copper);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--surface);
    color: var(--ink);
  }

  .sanskrit-term,
  .term-link {
    padding-bottom: 0.08em;
    border-bottom: 1px dotted var(--copper);
    color: inherit;
    text-decoration: none;
  }

  button.sanskrit-term,
  button.term-link {
    background: transparent;
  }

  .misconception,
  .misconception-card,
  .callout {
    display: grid;
    gap: 0.8rem;
    padding: clamp(1.2rem, 3vw, 2rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--copper-wash), transparent 62%), var(--surface);
  }

  .misconception::before,
  .misconception-card::before {
    color: var(--vermilion);
    content: "COMMON MISCONCEPTION";
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.18em;
  }

  .teaching-aid,
  .editorial-note,
  .uncertainty-note {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--indigo-wash);
    color: var(--ink-soft);
    font-size: 0.76rem;
    line-height: 1.55;
  }

  .teaching-aid::before,
  .editorial-note::before,
  .uncertainty-note::before {
    color: var(--indigo);
    content: "ⓘ";
    font-size: 0.9rem;
  }

  .empty-state {
    display: grid;
    min-height: 18rem;
    place-items: center;
    padding: 2rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
    color: var(--ink-muted);
    text-align: center;
  }
}

@layer routes {
  .route-loading {
    display: grid;
    min-height: calc(100vh - var(--header-height));
    place-content: center;
    justify-items: center;
    gap: 1rem;
    padding: 3rem;
    color: var(--ink-muted);
    text-align: center;
  }

  .route-loading__glyph {
    position: relative;
    width: 5rem;
    height: 5rem;
    margin-block: 0.5rem;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    animation: orbit 7s linear infinite;
  }

  .route-loading__glyph::before,
  .route-loading__glyph::after,
  .route-loading__glyph span {
    position: absolute;
    border-radius: 50%;
    background: var(--copper);
    content: "";
  }

  .route-loading__glyph::before { top: -0.2rem; left: 50%; width: 0.42rem; height: 0.42rem; }
  .route-loading__glyph::after { right: 0.3rem; bottom: 0.45rem; width: 0.3rem; height: 0.3rem; }
  .route-loading__glyph span { top: 50%; left: 50%; width: 1rem; height: 1rem; transform: translate(-50%, -50%); }

  @keyframes orbit { to { transform: rotate(360deg); } }

  .page-hero,
  .hero {
    position: relative;
    display: grid;
    min-height: min(54rem, calc(100svh - var(--header-height)));
    width: min(100% - (2 * var(--gutter)), var(--content-wide));
    margin-inline: auto;
    padding-block: clamp(4rem, 9vw, 8rem);
    align-items: center;
  }

  .page-hero--compact {
    min-height: auto;
    padding-block: clamp(4rem, 8vw, 7rem);
    border-bottom: 1px solid var(--line);
  }

  .hero__content,
  .page-hero__content {
    position: relative;
    z-index: 2;
    display: grid;
    max-width: 58rem;
    gap: clamp(1rem, 2.5vw, 1.8rem);
  }

  .hero__title .accent,
  .page-hero__title .accent,
  .accent-text {
    color: var(--copper);
    font-style: italic;
  }

  .hero__lede {
    max-width: 48rem;
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.2vw, 1.65rem);
    line-height: 1.55;
  }

  .hero__note {
    max-width: 60ch;
    color: var(--ink-muted);
    font-size: 0.78rem;
  }

  .hero__aside,
  .hero-visual {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 0;
    width: min(48vw, 44rem);
    aspect-ratio: 1.15;
    transform: translateY(-48%);
  }

  .hero__index {
    position: absolute;
    right: 0;
    bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--ink-muted);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .hero__index::before {
    width: clamp(3rem, 8vw, 8rem);
    height: 1px;
    background: var(--line-strong);
    content: "";
  }

  .hero-orbit,
  .atlas-orbit {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid var(--line);
    border-radius: 50%;
  }

  .hero-orbit::before,
  .hero-orbit::after,
  .atlas-orbit::before,
  .atlas-orbit::after {
    position: absolute;
    border: 1px solid var(--line-faint);
    border-radius: inherit;
    content: "";
  }

  .hero-orbit::before,
  .atlas-orbit::before { inset: 13%; }
  .hero-orbit::after,
  .atlas-orbit::after { inset: 31%; }

  .hero-orbit__core,
  .atlas-orbit__core {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: grid;
    width: 7.5rem;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid var(--copper);
    border-radius: 50%;
    background: color-mix(in srgb, var(--paper-strong) 90%, transparent);
    box-shadow: 0 0 0 1rem var(--copper-wash), var(--shadow-md);
    color: var(--ink);
    font-family: var(--font-display);
    text-align: center;
    transform: translate(-50%, -50%);
  }

  .hero-orbit__node,
  .atlas-orbit__node {
    position: absolute;
    z-index: 3;
    display: grid;
    width: 5.2rem;
    min-height: 5.2rem;
    place-items: center;
    padding: 0.5rem;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
    color: var(--ink-soft);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    transition: border-color 240ms ease, color 240ms ease, transform 350ms var(--ease-spring);
  }

  .hero-orbit__node:hover,
  .atlas-orbit__node:hover {
    border-color: var(--copper);
    color: var(--ink);
    transform: scale(1.06);
  }

  .hero-orbit__node:nth-child(2) { top: -2%; left: 44%; }
  .hero-orbit__node:nth-child(3) { top: 22%; right: -2%; }
  .hero-orbit__node:nth-child(4) { right: 5%; bottom: 8%; }
  .hero-orbit__node:nth-child(5) { bottom: -2%; left: 37%; }
  .hero-orbit__node:nth-child(6) { bottom: 15%; left: -1%; }
  .hero-orbit__node:nth-child(7) { top: 15%; left: 4%; }

  .stats-strip,
  .fact-strip {
    display: grid;
    border-block: 1px solid var(--line);
    grid-template-columns: repeat(3, 1fr);
  }

  .stat,
  .fact {
    min-height: 9rem;
    padding: 1.5rem;
    border-right: 1px solid var(--line);
  }

  .stat:last-child,
  .fact:last-child {
    border-right: 0;
  }

  .stat__value,
  .fact__value {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4vw, 4rem);
    line-height: 1;
  }

  .stat__label,
  .fact__label {
    margin-top: 0.75rem;
    color: var(--ink-muted);
    font-size: 0.72rem;
  }

  .question-grid,
  .big-question-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .question-card,
  .big-question-card {
    position: relative;
    display: grid;
    min-height: 19rem;
    padding: clamp(1.35rem, 3vw, 2rem);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    align-content: space-between;
    gap: 2rem;
    transition: border-color 240ms ease, background-color 240ms ease, box-shadow 280ms ease, transform 400ms var(--ease-spring);
  }

  .question-card::after,
  .big-question-card::after {
    position: absolute;
    right: -3rem;
    bottom: -3rem;
    width: 9rem;
    aspect-ratio: 1;
    border: 1px solid var(--line-faint);
    border-radius: 50%;
    box-shadow: 0 0 0 1.5rem var(--line-faint), 0 0 0 3rem var(--line-faint);
    content: "";
    transition: transform 650ms var(--ease-spring);
  }

  .question-card:hover,
  .big-question-card:hover {
    border-color: var(--copper);
    background: var(--surface-raised);
    box-shadow: var(--shadow-md);
    transform: translateY(-0.4rem);
  }

  .question-card:hover::after,
  .big-question-card:hover::after {
    transform: translate(-0.8rem, -0.8rem) scale(1.08);
  }

  .question-card h3,
  .big-question-card h3 {
    max-width: 13ch;
  }

  .question-card__note,
  .big-question-card__note {
    position: relative;
    z-index: 1;
    max-width: 34ch;
    color: var(--ink-muted);
    font-size: 0.78rem;
    line-height: 1.6;
  }

  .school-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .school-card {
    --school-color: var(--copper);
    position: relative;
    display: grid;
    min-height: 25rem;
    padding: clamp(1.35rem, 3vw, 2.15rem);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    grid-template-rows: auto auto 1fr auto;
    align-content: start;
    gap: 1rem;
    transition: border-color 280ms ease, background-color 280ms ease, box-shadow 320ms ease, transform 420ms var(--ease-spring);
  }

  .school-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    background: var(--school-color, var(--copper));
    content: "";
    transform: scaleX(0.2);
    transform-origin: left;
    transition: transform 480ms var(--ease-spring);
  }

  .school-card::after {
    position: absolute;
    z-index: 0;
    top: -5rem;
    right: -5rem;
    width: 13rem;
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--school-color, var(--copper)) 28%, transparent);
    border-radius: 50%;
    box-shadow: 0 0 0 2.2rem color-mix(in srgb, var(--school-color, var(--copper)) 5%, transparent);
    content: "";
    transition: transform 650ms var(--ease-spring);
  }

  .school-card:hover {
    border-color: color-mix(in srgb, var(--school-color, var(--copper)) 55%, var(--line));
    background: var(--surface-raised);
    box-shadow: var(--shadow-md);
    transform: translateY(-0.45rem);
  }

  .school-card:hover::before { transform: scaleX(1); }
  .school-card:hover::after { transform: translate(-1rem, 1rem) scale(1.08); }

  .school-card > * {
    position: relative;
    z-index: 1;
  }

  .school-card__number,
  .school-card__family {
    color: var(--school-color, var(--copper));
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .school-card__devanagari {
    color: color-mix(in srgb, var(--school-color, var(--copper)) 70%, var(--ink));
    font-family: var(--font-deva);
    font-size: 1.05rem;
  }

  .school-card h2,
  .school-card h3,
  .school-card__title {
    font-size: clamp(1.8rem, 3vw, 2.65rem);
  }

  .school-card__epithet {
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-style: italic;
  }

  .school-card__hook,
  .school-card__summary {
    max-width: 38ch;
    color: var(--ink-muted);
    font-size: 0.82rem;
    line-height: 1.65;
  }

  .school-card__footer {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
  }

  .school-detail,
  .philosophy-detail {
    width: min(100% - (2 * var(--gutter)), var(--content-wide));
    margin-inline: auto;
  }

  .detail-hero {
    --school-color: var(--copper);
    position: relative;
    display: grid;
    min-height: clamp(35rem, 72vh, 52rem);
    padding-block: clamp(4rem, 9vw, 8rem);
    overflow: hidden;
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
    align-items: center;
    gap: clamp(2rem, 7vw, 7rem);
  }

  .detail-hero::after {
    position: absolute;
    z-index: -1;
    top: 50%;
    right: 4%;
    width: min(35rem, 42vw);
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--school-color) 35%, transparent);
    border-radius: 50%;
    box-shadow:
      0 0 0 3rem color-mix(in srgb, var(--school-color) 4%, transparent),
      0 0 0 7rem color-mix(in srgb, var(--school-color) 3%, transparent),
      0 0 0 12rem color-mix(in srgb, var(--school-color) 2%, transparent);
    content: "";
    transform: translateY(-50%);
  }

  .detail-hero__content {
    display: grid;
    gap: 1.2rem;
  }

  .detail-hero__devanagari {
    color: var(--school-color);
    font-family: var(--font-deva);
    font-size: clamp(1.4rem, 3vw, 2.4rem);
  }

  .detail-hero__title {
    font-size: clamp(4rem, 10vw, 9rem);
  }

  .detail-hero__question {
    max-width: 34ch;
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.3vw, 1.75rem);
    font-style: italic;
    line-height: 1.45;
  }

  .detail-hero__meta,
  .fact-panel {
    position: relative;
    display: grid;
    gap: 1.2rem;
    padding: clamp(1.4rem, 3vw, 2.1rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(12px);
  }

  .detail-hero__meta dl,
  .fact-panel dl {
    display: grid;
    gap: 1rem;
  }

  .detail-hero__meta div,
  .fact-panel dl > div {
    padding-top: 0.85rem;
    border-top: 1px solid var(--line);
  }

  .detail-hero__meta dt,
  .fact-panel dt {
    color: var(--ink-muted);
    font-size: 0.62rem;
    font-weight: 760;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .detail-hero__meta dd,
  .fact-panel dd {
    margin-top: 0.35rem;
    color: var(--ink-soft);
    font-size: 0.82rem;
    line-height: 1.55;
  }

  .position-grid,
  .doctrine-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--line);
  }

  .position-card,
  .doctrine-card {
    min-height: 16rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    background: var(--surface-solid);
  }

  .position-card__label,
  .doctrine-card__label {
    color: var(--copper);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .position-card h3,
  .doctrine-card h3 {
    margin-top: 0.75rem;
    font-size: 1.55rem;
  }

  .position-card p,
  .doctrine-card p {
    margin-top: 1rem;
    color: var(--ink-soft);
    font-size: 0.82rem;
    line-height: 1.7;
  }

  .entity-list,
  .related-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Darśana Universe */
  .graph-stage {
    position: relative;
    min-height: min(46rem, 78vh);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background:
      radial-gradient(circle at 50% 50%, var(--indigo-wash), transparent 37%),
      linear-gradient(var(--line-faint) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-faint) 1px, transparent 1px),
      var(--surface);
    background-size: auto, 3.5rem 3.5rem, 3.5rem 3.5rem, auto;
    box-shadow: inset 0 0 5rem color-mix(in srgb, var(--paper) 70%, transparent), var(--shadow-sm);
  }

  .graph-stage::before {
    position: absolute;
    z-index: 2;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 3rem color-mix(in srgb, var(--paper) 75%, transparent);
    content: "";
    pointer-events: none;
  }

  .graph-stage__toolbar,
  .graph-toolbar {
    position: absolute;
    z-index: 5;
    top: 1rem;
    left: 1rem;
    display: flex;
    max-width: calc(100% - 2rem);
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(12px);
  }

  .graph-toolbar button,
  .graph-stage__toolbar button {
    display: inline-grid;
    min-width: 2.3rem;
    min-height: 2.3rem;
    place-items: center;
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink-soft);
    font-size: 0.7rem;
    font-weight: 700;
  }

  .graph-toolbar button:hover,
  .graph-toolbar button[aria-pressed="true"] {
    background: var(--ink);
    color: var(--paper-strong);
  }

  .graph-stage svg,
  .graph-stage__canvas {
    width: 100%;
    height: 100%;
    min-height: inherit;
    overflow: visible;
  }

  .graph-edge {
    fill: none;
    stroke: var(--line-strong);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
    transition: opacity 180ms ease, stroke 180ms ease, stroke-width 180ms ease;
  }

  .graph-edge[data-kind="disagreement"],
  .graph-edge[data-kind="debate"] {
    stroke: color-mix(in srgb, var(--vermilion) 58%, var(--line));
    stroke-dasharray: 4 5;
  }

  .graph-edge[data-kind="similarity"],
  .graph-edge[data-kind="convergence"],
  .graph-edge[data-kind="shared-text"] {
    stroke: color-mix(in srgb, var(--sage) 63%, var(--line));
  }

  .graph-edge[data-kind="influence"],
  .graph-edge[data-kind="interpretation"] {
    stroke: color-mix(in srgb, var(--copper) 62%, var(--line));
  }

  .graph-node {
    --node-color: var(--indigo);
    cursor: pointer;
    outline: none;
  }

  .graph-node circle,
  .graph-node .node-shape {
    fill: color-mix(in srgb, var(--surface-raised) 92%, transparent);
    stroke: color-mix(in srgb, var(--node-color) 50%, var(--line));
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
    transition: fill 220ms ease, stroke 220ms ease, stroke-width 220ms ease, filter 220ms ease;
  }

  .graph-node text {
    fill: var(--ink);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 650;
    pointer-events: none;
    text-anchor: middle;
  }

  .graph-node:hover circle,
  .graph-node:focus circle,
  .graph-node.is-active circle {
    fill: color-mix(in srgb, var(--node-color) 13%, var(--surface-raised));
    stroke: var(--node-color);
    stroke-width: 2;
    filter: drop-shadow(0 8px 12px color-mix(in srgb, var(--node-color) 20%, transparent));
  }

  .graph-node[data-family="root"] { --node-color: var(--copper); }
  .graph-node[data-family="classical"] { --node-color: var(--indigo); }
  .graph-node[data-family="vedanta"] { --node-color: var(--saffron); }
  .graph-node[data-family="shaiva"] { --node-color: var(--violet); }
  .graph-node[data-family="shakta"] { --node-color: var(--vermilion); }
  .graph-node[data-family="conversation"] { --node-color: var(--sage); }
  .graph-node[data-family="field"] { --node-color: var(--copper); }

  .graph-stage__legend,
  .graph-legend {
    position: absolute;
    z-index: 5;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    max-width: calc(100% - 2rem);
    flex-wrap: wrap;
    gap: 0.8rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
    color: var(--ink-muted);
    font-size: 0.62rem;
    backdrop-filter: blur(12px);
  }

  .graph-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }

  .graph-legend__swatch {
    width: 1.2rem;
    height: 1px;
    background: currentColor;
  }

  .graph-inspector,
  .graph-stage__inspector {
    position: absolute;
    z-index: 6;
    top: 1rem;
    right: 1rem;
    width: min(22rem, calc(100% - 2rem));
    padding: 1.3rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: var(--shadow-md);
  }

  .graph-list-fallback,
  .accessible-graph-list {
    display: none;
  }

  /* Compare laboratory */
  .compare-lab,
  .position-matrix {
    display: grid;
    gap: 1.25rem;
  }

  .compare-picker,
  .position-matrix__picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
  }

  .compare-picker button,
  .school-picker-button {
    --school-color: var(--indigo);
    min-height: 2.6rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--paper-strong);
    color: var(--ink-soft);
    font-size: 0.7rem;
    font-weight: 700;
  }

  .compare-picker button:hover,
  .compare-picker button[aria-pressed="true"],
  .school-picker-button.is-selected {
    border-color: var(--school-color);
    background: color-mix(in srgb, var(--school-color) 10%, var(--paper-strong));
    color: var(--ink);
  }

  .position-matrix__scroll,
  .matrix-scroll {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-solid);
    box-shadow: var(--shadow-sm);
    overscroll-behavior-inline: contain;
    scrollbar-color: var(--line-strong) transparent;
  }

  .position-matrix table,
  .comparison-table {
    width: 100%;
    min-width: 52rem;
  }

  .position-matrix th,
  .position-matrix td,
  .comparison-table th,
  .comparison-table td {
    min-width: 13rem;
    padding: 1.15rem;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    text-align: left;
  }

  .position-matrix tr:last-child td,
  .comparison-table tr:last-child td {
    border-bottom: 0;
  }

  .position-matrix th:last-child,
  .position-matrix td:last-child,
  .comparison-table th:last-child,
  .comparison-table td:last-child {
    border-right: 0;
  }

  .position-matrix thead th,
  .comparison-table thead th {
    position: sticky;
    z-index: 2;
    top: 0;
    background: var(--surface-raised);
    box-shadow: 0 1px 0 var(--line);
  }

  .position-matrix th:first-child,
  .position-matrix td:first-child,
  .comparison-table th:first-child,
  .comparison-table td:first-child {
    position: sticky;
    z-index: 1;
    left: 0;
    min-width: 11rem;
    background: var(--surface-raised);
  }

  .position-matrix thead th:first-child,
  .comparison-table thead th:first-child {
    z-index: 3;
  }

  .matrix-school-name,
  .position-matrix__school {
    display: grid;
    gap: 0.25rem;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 400;
  }

  .matrix-row-label,
  .position-matrix__row-label {
    display: grid;
    gap: 0.35rem;
    color: var(--ink);
    font-size: 0.76rem;
    font-weight: 720;
  }

  .matrix-row-label small,
  .position-matrix__row-label small {
    color: var(--ink-muted);
    font-weight: 450;
    line-height: 1.45;
  }

  .matrix-cell,
  .position-matrix__cell {
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: 0.93rem;
    line-height: 1.65;
  }

  .matrix-cell button,
  .position-matrix__cell button {
    margin-top: 0.65rem;
  }

  /* Brahman / self / world relation visualizer */
  .relation-model {
    display: grid;
    grid-template-columns: minmax(17rem, 0.35fr) minmax(0, 0.65fr);
    gap: 1rem;
  }

  .relation-model__controls {
    display: grid;
    align-content: start;
    gap: 0.6rem;
    padding: clamp(1.2rem, 3vw, 2rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
  }

  .relation-model__controls button,
  .model-choice {
    display: grid;
    min-height: 4rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: transparent;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
    color: var(--ink-soft);
    text-align: left;
    transition: border-color 180ms ease, background-color 180ms ease, transform 180ms var(--ease-out);
  }

  .relation-model__controls button:hover,
  .relation-model__controls button[aria-pressed="true"],
  .model-choice.is-active {
    border-color: var(--copper);
    background: var(--copper-wash);
    color: var(--ink);
    transform: translateX(0.2rem);
  }

  .relation-model__stage,
  .model-stage {
    position: relative;
    display: grid;
    min-height: 36rem;
    overflow: hidden;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background:
      radial-gradient(circle at 50% 45%, var(--indigo-wash), transparent 42%),
      var(--surface);
    box-shadow: inset 0 0 4rem color-mix(in srgb, var(--paper) 55%, transparent);
  }

  .relation-model__stage svg,
  .model-stage svg {
    width: 100%;
    height: 100%;
    min-height: 31rem;
  }

  .model-node circle,
  .relation-node circle {
    fill: color-mix(in srgb, var(--surface-raised) 88%, transparent);
    stroke: var(--copper);
    stroke-width: 0.35;
    filter: drop-shadow(0 1.2rem 1.4rem rgba(35, 34, 28, 0.12));
    transition: r 600ms var(--ease-spring), cx 600ms var(--ease-spring), cy 600ms var(--ease-spring), fill 300ms ease;
  }

  .model-node text,
  .relation-node text {
    fill: var(--ink);
    font-family: var(--font-body);
    font-size: 2.3px;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-anchor: middle;
  }

  .model-node .sub,
  .relation-node .sub {
    fill: var(--ink-muted);
    font-size: 1.55px;
    font-weight: 450;
    letter-spacing: 0;
  }

  .model-edge,
  .relation-edge {
    fill: none;
    stroke: var(--indigo);
    stroke-width: 0.35;
    vector-effect: non-scaling-stroke;
  }

  .model-edge[data-kind="difference"],
  .relation-edge[data-kind="difference"] {
    stroke: var(--vermilion);
    stroke-dasharray: 2 2;
  }

  .model-edge-label,
  .relation-edge-label {
    fill: var(--ink-soft);
    font-family: var(--font-body);
    font-size: 1.65px;
    text-anchor: middle;
  }

  .relation-model__caption,
  .model-caption {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--surface-raised) 91%, transparent);
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: 0.88rem;
    line-height: 1.55;
    backdrop-filter: blur(12px);
  }

  /* Tattva tree */
  .tree-explorer {
    display: grid;
    gap: 1.25rem;
  }

  .tree-explorer__toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
  }

  .tattva-overview,
  .tattva-map {
    position: relative;
    display: grid;
    gap: 1rem;
    padding: clamp(1rem, 3vw, 2rem);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background:
      linear-gradient(90deg, transparent 49.94%, var(--line-faint) 50%, transparent 50.06%),
      var(--surface);
  }

  .tattva-group {
    position: relative;
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-raised) 55%, transparent);
  }

  .tattva-group__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--ink-muted);
    font-size: 0.64rem;
    font-weight: 780;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .tattva-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.65rem;
  }

  .tattva-node,
  .tattva-card {
    --tattva-color: var(--indigo);
    position: relative;
    display: grid;
    min-height: 8.7rem;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-solid);
    align-content: start;
    gap: 0.45rem;
    text-align: left;
    transition: border-color 180ms ease, background-color 180ms ease, box-shadow 240ms ease, transform 300ms var(--ease-spring);
  }

  .tattva-node:hover,
  .tattva-card:hover,
  .tattva-node[aria-pressed="true"],
  .tattva-card.is-active {
    border-color: var(--tattva-color);
    background: color-mix(in srgb, var(--tattva-color) 8%, var(--surface-solid));
    box-shadow: var(--shadow-sm);
    transform: translateY(-0.2rem);
  }

  .tattva-node__number,
  .tattva-card__number {
    color: var(--tattva-color);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.12em;
  }

  .tattva-node__name,
  .tattva-card__name {
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.15;
  }

  .tattva-node__deva,
  .tattva-card__deva {
    color: var(--ink-muted);
    font-family: var(--font-deva);
    font-size: 0.82rem;
  }

  .tattva-inspector,
  .tree-explorer__inspector {
    position: sticky;
    z-index: 3;
    bottom: 1rem;
    display: grid;
    padding: 1.2rem 1.35rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: var(--shadow-lg);
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
  }

  /* Timeline */
  .timeline-rail {
    position: relative;
    overflow: hidden;
    padding-block: 2rem 3rem;
  }

  .timeline-rail::before {
    position: absolute;
    top: 7.35rem;
    right: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-strong) 4%, var(--line-strong) 96%, transparent);
    content: "";
  }

  .timeline-rail__track,
  .timeline-track {
    display: flex;
    gap: 1rem;
    padding: 0.75rem var(--gutter) 2rem;
    overflow-x: auto;
    scroll-padding-inline: var(--gutter);
    scroll-snap-type: x proximity;
    scrollbar-color: var(--line-strong) transparent;
  }

  .timeline-card {
    --event-color: var(--indigo);
    position: relative;
    display: grid;
    min-width: min(22rem, calc(100vw - 4rem));
    min-height: 24rem;
    margin-top: 4.3rem;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    scroll-snap-align: start;
    align-content: start;
    gap: 0.85rem;
    transition: border-color 240ms ease, transform 320ms var(--ease-spring), background-color 240ms ease;
  }

  .timeline-card::before {
    position: absolute;
    top: -4.65rem;
    left: 1.5rem;
    width: 0.72rem;
    height: 0.72rem;
    border: 2px solid var(--paper);
    border-radius: 50%;
    background: var(--event-color);
    box-shadow: 0 0 0 1px var(--event-color), 0 0 0 0.7rem color-mix(in srgb, var(--event-color) 9%, transparent);
    content: "";
  }

  .timeline-card::after {
    position: absolute;
    top: -3.95rem;
    left: 1.83rem;
    width: 1px;
    height: 3.95rem;
    background: color-mix(in srgb, var(--event-color) 55%, var(--line));
    content: "";
  }

  .timeline-card:hover,
  .timeline-card:focus-within {
    border-color: var(--event-color);
    background: var(--surface-raised);
    transform: translateY(-0.3rem);
  }

  .timeline-card[data-type="thinker"] { --event-color: var(--copper); }
  .timeline-card[data-type="text"] { --event-color: var(--indigo); }
  .timeline-card[data-type="school"] { --event-color: var(--sage); }
  .timeline-card[data-type="context"] { --event-color: var(--violet); }

  .timeline-card__date {
    color: var(--event-color);
    font-size: 0.64rem;
    font-weight: 780;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }

  .timeline-card h3,
  .timeline-card__title {
    font-size: 1.65rem;
  }

  .timeline-card__text {
    color: var(--ink-soft);
    font-size: 0.82rem;
    line-height: 1.7;
  }

  .timeline-card__type {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    color: var(--ink-muted);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  /* Concepts */
  .concept-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
  }

  .concept-card {
    position: relative;
    display: grid;
    min-height: 17rem;
    padding: 1.35rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    grid-template-rows: auto auto 1fr auto;
    align-content: start;
    gap: 0.55rem;
    text-align: left;
    transition: border-color 220ms ease, background-color 220ms ease, box-shadow 260ms ease, transform 360ms var(--ease-spring);
  }

  .concept-card::after {
    position: absolute;
    right: -2.5rem;
    bottom: -2.5rem;
    width: 7rem;
    height: 7rem;
    border: 1px solid var(--line);
    border-radius: 50%;
    content: "";
  }

  .concept-card:hover,
  .concept-card[aria-pressed="true"],
  .concept-card.is-active {
    border-color: var(--indigo);
    background: var(--surface-raised);
    box-shadow: var(--shadow-md);
    transform: translateY(-0.35rem);
  }

  .concept-card__devanagari {
    color: var(--copper);
    font-family: var(--font-deva);
    font-size: 1.15rem;
  }

  .concept-card h3,
  .concept-card__name {
    font-size: 1.55rem;
  }

  .concept-card__iast {
    color: var(--ink-muted);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-style: italic;
  }

  .concept-card__gloss {
    margin-top: 0.6rem;
    color: var(--ink-soft);
    font-size: 0.76rem;
    line-height: 1.65;
  }

  .concept-lens {
    display: grid;
    grid-template-columns: minmax(16rem, 0.34fr) minmax(0, 0.66fr);
    gap: 1rem;
  }

  .concept-lens__intro {
    position: sticky;
    top: calc(var(--header-height) + 1rem);
    display: grid;
    height: fit-content;
    gap: 1rem;
    padding: clamp(1.3rem, 3vw, 2rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
  }

  .concept-lens__deva {
    color: var(--copper);
    font-family: var(--font-deva);
    font-size: clamp(2.5rem, 7vw, 5rem);
    line-height: 1.1;
  }

  .concept-lens__entries {
    display: grid;
    gap: 0.75rem;
  }

  .concept-lens__entry,
  .meaning-card {
    display: grid;
    min-height: 10rem;
    padding: 1.35rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    grid-template-columns: minmax(8rem, 0.28fr) minmax(0, 0.72fr);
    gap: 1.5rem;
  }

  .concept-lens__entry h3,
  .meaning-card h3 {
    font-size: 1.2rem;
  }

  .concept-lens__entry p,
  .meaning-card p {
    color: var(--ink-soft);
    font-family: var(--font-display);
    line-height: 1.7;
  }

  /* Knowledge mandala */
  .knowledge-mandala {
    display: grid;
    grid-template-columns: minmax(18rem, 0.58fr) minmax(15rem, 0.42fr);
    align-items: center;
    gap: clamp(2rem, 7vw, 7rem);
  }

  .knowledge-mandala__visual {
    position: relative;
    width: min(100%, 36rem);
    aspect-ratio: 1;
    margin-inline: auto;
    border: 1px solid var(--line);
    border-radius: 50%;
    background:
      repeating-conic-gradient(from 0deg, var(--line-faint) 0 1deg, transparent 1deg 45deg),
      radial-gradient(circle, var(--copper-wash), transparent 55%);
    box-shadow: inset 0 0 0 4rem color-mix(in srgb, var(--paper) 30%, transparent);
  }

  .knowledge-mandala__visual::before,
  .knowledge-mandala__visual::after {
    position: absolute;
    border: 1px solid var(--line);
    border-radius: 50%;
    content: "";
  }

  .knowledge-mandala__visual::before { inset: 18%; }
  .knowledge-mandala__visual::after { inset: 38%; background: var(--surface-raised); }

  .mandala-region {
    position: absolute;
    z-index: 2;
    display: grid;
    width: 4.6rem;
    height: 4.6rem;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface-raised);
    color: var(--ink-muted);
    font-size: 0.61rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    transform: translate(-50%, -50%);
  }

  .mandala-region.is-lit,
  .mandala-region[data-mastered="true"] {
    border-color: var(--saffron);
    background: color-mix(in srgb, var(--saffron) 13%, var(--surface-raised));
    box-shadow: 0 0 1.5rem color-mix(in srgb, var(--saffron) 24%, transparent);
    color: var(--ink);
  }

  .knowledge-mandala__copy {
    display: grid;
    gap: 1rem;
  }

  /* Lesson and challenge system */
  .lesson {
    display: grid;
    grid-template-columns: minmax(12rem, 0.25fr) minmax(0, 0.75fr);
    align-items: start;
    gap: clamp(1.5rem, 5vw, 5rem);
  }

  .lesson__rail,
  .lesson-progress {
    position: sticky;
    top: calc(var(--header-height) + 1rem);
    display: grid;
    gap: 0.45rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
  }

  .lesson-progress__bar {
    height: 0.26rem;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--line);
  }

  .lesson-progress__bar span {
    display: block;
    width: var(--progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--copper), var(--saffron));
    transition: width 500ms var(--ease-out);
  }

  .lesson-step-link {
    display: grid;
    min-height: 2.8rem;
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius-sm);
    background: transparent;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.65rem;
    color: var(--ink-muted);
    font-size: 0.7rem;
    text-align: left;
  }

  .lesson-step-link::before {
    display: grid;
    width: 1.4rem;
    height: 1.4rem;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    content: attr(data-step);
    font-size: 0.55rem;
  }

  .lesson-step-link.is-current,
  .lesson-step-link[aria-current="step"] {
    background: var(--indigo-wash);
    color: var(--ink);
  }

  .lesson-step-link.is-complete::before {
    border-color: var(--sage);
    background: var(--sage);
    color: var(--paper-strong);
    content: "✓";
  }

  .lesson__content {
    display: grid;
    gap: 1.2rem;
  }

  .lesson-step {
    display: grid;
    min-height: 30rem;
    padding: clamp(1.4rem, 4vw, 3rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    align-content: start;
    gap: 1.2rem;
  }

  .lesson-step__body {
    max-width: 62ch;
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.6vw, 1.16rem);
    line-height: 1.8;
  }

  .challenge-engine,
  .challenge-card {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: clamp(1.2rem, 3vw, 2rem);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--paper-strong);
  }

  .challenge-engine__prompt,
  .challenge-prompt {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.3vw, 1.55rem);
    line-height: 1.45;
  }

  .challenge-options {
    display: grid;
    gap: 0.55rem;
  }

  .challenge-option {
    display: grid;
    min-height: 3.6rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.75rem;
    color: var(--ink-soft);
    font-size: 0.82rem;
    text-align: left;
    transition: border-color 180ms ease, background-color 180ms ease, transform 180ms var(--ease-out);
  }

  .challenge-option::before {
    display: grid;
    width: 1.6rem;
    height: 1.6rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    content: attr(data-letter);
    font-size: 0.58rem;
    font-weight: 750;
  }

  .challenge-option:hover,
  .challenge-option[aria-pressed="true"],
  .challenge-option.is-selected {
    border-color: var(--indigo);
    background: var(--indigo-wash);
    color: var(--ink);
    transform: translateX(0.2rem);
  }

  .challenge-option.is-correct {
    border-color: var(--sage);
    background: color-mix(in srgb, var(--sage) 11%, var(--surface));
  }

  .challenge-option.is-incorrect {
    border-color: var(--vermilion);
    background: color-mix(in srgb, var(--vermilion) 10%, var(--surface));
  }

  .challenge-feedback,
  .feedback-panel {
    padding: 1rem 1.1rem;
    border-left: 2px solid var(--sage);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: color-mix(in srgb, var(--sage) 9%, transparent);
    color: var(--ink-soft);
    font-size: 0.8rem;
  }

  .challenge-feedback[data-status="incorrect"],
  .feedback-panel.is-incorrect {
    border-left-color: var(--vermilion);
    background: color-mix(in srgb, var(--vermilion) 8%, transparent);
  }

  .match-list {
    display: grid;
    gap: 0.65rem;
  }

  .match-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 0.7fr);
    align-items: center;
    gap: 0.75rem;
  }

  .match-row select {
    min-height: 2.8rem;
    padding-inline: 0.8rem 2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
  }

  /* Sources */
  .citation-pill {
    display: inline-grid;
    min-width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    margin-inline: 0.12rem;
    padding: 0 0.32rem;
    border: 1px solid color-mix(in srgb, var(--indigo) 45%, var(--line));
    border-radius: var(--radius-pill);
    background: var(--indigo-wash);
    color: var(--indigo);
    font-family: var(--font-body);
    font-size: 0.58rem;
    font-weight: 780;
    vertical-align: super;
  }

  .citation-pill:hover {
    border-color: var(--indigo);
    background: var(--indigo);
    color: var(--paper-strong);
  }

  .source-ledger {
    display: grid;
    gap: 0.75rem;
  }

  .source-card,
  .source-ledger__item {
    display: grid;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    grid-template-columns: minmax(8rem, 0.18fr) minmax(0, 0.62fr) auto;
    align-items: start;
    gap: 1rem 2rem;
    transition: border-color 180ms ease, background-color 180ms ease;
  }

  .source-card:hover,
  .source-ledger__item:hover {
    border-color: var(--line-strong);
    background: var(--surface-raised);
  }

  .source-card__type {
    color: var(--sage);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .source-card__content,
  .source-ledger__content {
    display: grid;
    gap: 0.35rem;
  }

  .source-card__title,
  .source-ledger__title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1.35;
  }

  .source-card__meta,
  .source-card__note,
  .source-ledger__meta {
    color: var(--ink-muted);
    font-size: 0.72rem;
    line-height: 1.55;
  }

  .drawer,
  .inspector-drawer {
    position: fixed;
    z-index: 200;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(33rem, 100%);
    padding: clamp(1.25rem, 4vw, 2.5rem);
    overflow-y: auto;
    border-left: 1px solid var(--line-strong);
    background: var(--surface-raised);
    box-shadow: var(--shadow-lg);
    transform: translateX(102%);
    transition: transform 420ms var(--ease-spring);
  }

  .drawer.is-open,
  .inspector-drawer.is-open,
  .drawer[data-open="true"] {
    transform: translateX(0);
  }

  .drawer-backdrop {
    position: fixed;
    z-index: 190;
    inset: 0;
    background: rgba(5, 9, 15, 0.53);
    backdrop-filter: blur(5px);
  }
}

@layer utilities {
  .sr-only,
  .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .flow > * + * { margin-top: var(--flow-space, 1rem); }
  .stack { display: grid; gap: var(--stack-gap, 1rem); }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, 0.75rem); }
  .muted { color: var(--ink-muted); }
  .soft { color: var(--ink-soft); }
  .text-copper { color: var(--copper); }
  .text-indigo { color: var(--indigo); }
  .measure { max-width: 62ch; }
  .measure--narrow { max-width: 44ch; }
  .align-center { text-align: center; }
  .center { margin-inline: auto; }
  .no-scroll { overflow: hidden; }
  .scroll-shadow { mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent); }

  [data-depth-only] { display: none; }
  html[data-depth="deep"] [data-depth-only="deep"],
  html[data-depth="deep"] [data-depth-only="essential"],
  html[data-depth="scholar"] [data-depth-only="deep"],
  html[data-depth="scholar"] [data-depth-only="scholar"],
  html[data-depth="scholar"] [data-depth-only="essential"] { display: revert; }
}

@layer components {
  .button--quiet {
    border-color: var(--line-strong);
    background: transparent;
    color: var(--ink-soft);
  }

  .button--quiet:hover {
    border-color: var(--ink);
    background: var(--surface-raised);
    color: var(--ink);
  }

  .question-card__number,
  .position-card__number {
    color: var(--copper);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.14em;
  }

  .question-card__number {
    position: absolute;
    top: 1.25rem;
    right: 1.35rem;
  }

  .question-card__paths {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .question-card__paths a {
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    color: var(--ink-soft);
    font-size: 0.62rem;
    font-weight: 700;
  }

  .question-card__paths a:hover {
    border-color: var(--copper);
    color: var(--copper);
  }

  .source-record__license,
  .concept-lens__pending {
    color: var(--ink-muted);
    font-size: 0.72rem;
  }
}

@layer responsive {
  @media (max-width: 72rem) {
    .site-header__inner {
      grid-template-columns: 1fr auto;
    }

    .primary-nav {
      display: none;
    }

    .menu-toggle {
      display: inline-grid;
    }

    .hero__content,
    .page-hero__content {
      max-width: 48rem;
    }

    .hero__aside,
    .hero-visual {
      right: -12rem;
      opacity: 0.46;
    }

    .school-grid,
    .question-grid,
    .big-question-grid,
    .position-grid,
    .doctrine-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .concept-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tattva-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (max-width: 54rem) {
    :root { --header-height: 4.5rem; }

    body {
      background: var(--paper);
    }

    .site-header__inner {
      min-height: var(--header-height);
    }

    .theme-toggle {
      display: none;
    }

    .site-footer__inner {
      grid-template-columns: 1fr 1fr;
    }

    .site-footer__statement {
      grid-column: 1 / -1;
      grid-row: 1;
    }

    .brand--footer { grid-row: 2; }
    .site-footer__links { grid-row: 2; justify-self: end; }

    .section-heading--split,
    .section-header--split,
    .split-layout,
    .two-column,
    .detail-hero,
    .relation-model,
    .concept-lens,
    .knowledge-mandala,
    .lesson {
      grid-template-columns: 1fr;
    }

    .page-hero,
    .hero {
      min-height: max(39rem, calc(100svh - var(--header-height)));
      align-items: end;
    }

    .hero__aside,
    .hero-visual {
      top: 5%;
      right: -8rem;
      width: min(34rem, 80vw);
      opacity: 0.28;
      transform: none;
    }

    .hero__content {
      padding-top: 10rem;
    }

    .detail-hero {
      min-height: auto;
    }

    .detail-hero::after {
      top: 15%;
      right: -20%;
      width: 75vw;
      opacity: 0.45;
    }

    .detail-hero__meta,
    .fact-panel {
      max-width: 38rem;
    }

    .relation-model__stage,
    .model-stage {
      min-height: 31rem;
    }

    .concept-lens__intro,
    .lesson__rail,
    .lesson-progress {
      position: relative;
      top: auto;
    }

    .lesson__rail,
    .lesson-progress {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x proximity;
    }

    .lesson-step-link {
      min-width: 10rem;
      scroll-snap-align: start;
    }

    .tattva-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .graph-stage {
      min-height: 38rem;
    }

    .graph-stage__legend,
    .graph-legend {
      display: none;
    }
  }

  @media (max-width: 40rem) {
    :root {
      --gutter: 1rem;
      --radius-xl: 1.25rem;
      --radius-lg: 1rem;
    }

    h1 { font-size: clamp(3.25rem, 18vw, 5.2rem); }
    h2 { font-size: clamp(2.2rem, 12vw, 3.7rem); }

    .brand__descriptor {
      display: none;
    }

    .site-header__actions {
      gap: 0;
    }

    .site-footer__inner {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }

    .site-footer__statement,
    .brand--footer,
    .site-footer__links {
      grid-column: 1;
      grid-row: auto;
      justify-self: start;
    }

    .page-hero,
    .hero {
      padding-block: 3rem;
    }

    .hero__content {
      padding-top: 8rem;
    }

    .hero__index {
      display: none;
    }

    .button-row,
    .hero__actions,
    .page-actions {
      align-items: stretch;
    }

    .hero__actions .button,
    .hero__actions .btn,
    .page-actions .button {
      width: 100%;
    }

    .school-grid,
    .question-grid,
    .big-question-grid,
    .position-grid,
    .doctrine-grid,
    .card-grid,
    .feature-grid,
    .concept-grid {
      grid-template-columns: 1fr;
    }

    .school-card {
      min-height: 20rem;
    }

    .question-card,
    .big-question-card {
      min-height: 16rem;
    }

    .stats-strip,
    .fact-strip {
      grid-template-columns: 1fr;
    }

    .stat,
    .fact {
      min-height: auto;
      border-right: 0;
      border-bottom: 1px solid var(--line);
    }

    .stat:last-child,
    .fact:last-child {
      border-bottom: 0;
    }

    .graph-stage {
      min-height: 32rem;
      overflow: visible;
      background: var(--surface);
    }

    .graph-stage svg,
    .graph-stage__canvas {
      display: none;
    }

    .graph-list-fallback,
    .accessible-graph-list {
      display: grid;
      gap: 0.6rem;
      padding: 4.5rem 1rem 1rem;
    }

    .graph-list-fallback details,
    .accessible-graph-list details,
    .graph-list-fallback a,
    .accessible-graph-list a {
      padding: 0.9rem 1rem;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--surface-solid);
    }

    .graph-stage__toolbar,
    .graph-toolbar {
      right: 0.75rem;
      left: 0.75rem;
    }

    .relation-model__stage,
    .model-stage {
      min-height: 27rem;
    }

    .relation-model__stage svg,
    .model-stage svg {
      min-height: 24rem;
    }

    .relation-model__caption,
    .model-caption {
      font-size: 0.76rem;
    }

    .tattva-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tattva-node,
    .tattva-card {
      min-height: 8rem;
    }

    .tattva-inspector,
    .tree-explorer__inspector {
      grid-template-columns: 1fr auto;
    }

    .tattva-inspector > p,
    .tree-explorer__inspector > p {
      grid-column: 1 / -1;
    }

    .concept-lens__entry,
    .meaning-card,
    .source-card,
    .source-ledger__item {
      grid-template-columns: 1fr;
    }

    .match-row {
      grid-template-columns: 1fr;
    }

    .match-row > span[aria-hidden="true"] {
      display: none;
    }

    .search-dialog {
      margin-top: 0.5rem;
      border-radius: var(--radius-lg);
    }

    .search-field kbd {
      display: none;
    }
  }

  @media (pointer: coarse) {
    :where(a, button, summary, select) {
      min-height: 44px;
    }

    .citation-pill {
      min-width: 2rem;
      min-height: 2rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }

    .route-loading__glyph {
      animation: none;
    }

    .card--interactive:hover,
    .school-card:hover,
    .question-card:hover,
    .concept-card:hover,
    .timeline-card:hover {
      transform: none;
    }
  }

  @media print {
    :root {
      --paper: #fff;
      --paper-strong: #fff;
      --surface: #fff;
      --surface-solid: #fff;
      --ink: #111;
      --ink-soft: #333;
      --ink-muted: #555;
      --line: #bbb;
    }

    .site-header,
    .site-footer,
    .page-atmosphere,
    .graph-stage__toolbar,
    .graph-toolbar,
    .button-row,
    .drawer,
    .toast-region {
      display: none !important;
    }

    body {
      background: #fff;
      font-size: 10pt;
    }

    .page-hero,
    .hero,
    .detail-hero,
    .section,
    .page-section {
      min-height: auto;
      padding-block: 1.5rem;
    }

    .card,
    .school-card,
    .concept-card,
    .timeline-card,
    .source-card {
      break-inside: avoid;
      box-shadow: none;
    }
  }
}

@layer components {
  [data-depth-copy="deep"],
  [data-depth-copy="scholar"] {
    display: none;
  }

  html[data-depth="deep"] [data-depth-copy="deep"],
  html[data-depth="scholar"] [data-depth-copy="deep"],
  html[data-depth="scholar"] [data-depth-copy="scholar"] {
    display: revert;
  }

  .field {
    display: grid;
    gap: 0.35rem;
    color: var(--ink-muted);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .field :where(input:not([type="range"]), select) {
    min-height: 2.8rem;
    padding: 0.55rem 2rem 0.55rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    outline: 0;
    background: var(--surface-raised);
    color: var(--ink);
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0;
  }

  .field :where(input:not([type="range"]), select):focus-visible {
    border-color: var(--indigo);
    box-shadow: 0 0 0 3px var(--indigo-wash);
  }

  .field input[type="range"] {
    width: 100%;
    accent-color: var(--copper);
  }

  /* Exact graph component composition */
  .graph-stage[data-component="graph-stage"] {
    display: grid;
    min-height: auto;
    padding: clamp(1rem, 3vw, 2rem);
    gap: 1rem;
  }

  .graph-stage__heading {
    max-width: 56rem;
    margin-bottom: 0.5rem;
  }

  .graph-stage__controls {
    position: relative;
    z-index: 7;
    display: grid;
    padding: 0;
    border: 0;
    background: transparent;
    grid-template-columns: minmax(12rem, 1.4fr) repeat(2, minmax(9rem, 0.8fr)) auto auto;
    align-items: end;
    gap: 0.55rem;
  }

  .graph-stage__controls > button,
  .tree-explorer__controls > button {
    min-height: 2.8rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: var(--ink-soft);
    font-size: 0.67rem;
    font-weight: 700;
  }

  .graph-stage__controls > button:hover,
  .tree-explorer__controls > button:hover {
    border-color: var(--indigo);
    color: var(--ink);
  }

  .graph-stage__zoom {
    display: flex;
    min-height: 2.8rem;
    padding: 0.2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
  }

  .graph-stage__zoom button {
    min-width: 2.35rem;
    padding: 0.35rem 0.55rem;
    border-radius: 0.45rem;
    background: transparent;
    color: var(--ink-soft);
    font-size: 0.68rem;
    font-weight: 700;
  }

  .graph-stage__zoom button:hover {
    background: var(--indigo-wash);
    color: var(--indigo);
  }

  .graph-stage__status,
  .graph-stage__gesture-note,
  .timeline-rail__note,
  .timeline-rail > [data-timeline-status],
  .tree-explorer > [data-tree-status] {
    color: var(--ink-muted);
    font-size: 0.65rem;
  }

  .graph-stage__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.27fr);
    align-items: stretch;
    gap: 0.8rem;
  }

  .graph-stage__canvas {
    position: relative;
    width: 100%;
    min-height: 40rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
      radial-gradient(circle at 50% 50%, var(--indigo-wash), transparent 40%),
      linear-gradient(var(--line-faint) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-faint) 1px, transparent 1px);
    background-size: auto, 3.5rem 3.5rem, 3.5rem 3.5rem;
    touch-action: none;
  }

  .graph-stage__canvas svg,
  .graph-stage[data-component="graph-stage"] svg {
    width: 100%;
    height: 40rem;
    min-height: 0;
  }

  .graph-stage__gesture-note {
    position: absolute;
    right: 0.8rem;
    bottom: 0.65rem;
    padding: 0.35rem 0.55rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface-raised) 86%, transparent);
    backdrop-filter: blur(8px);
  }

  .graph-inspector,
  .graph-stage__layout .graph-inspector {
    position: sticky;
    top: calc(var(--header-height) + 1rem);
    right: auto;
    width: auto;
    height: fit-content;
    min-height: 18rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: none;
  }

  .graph-inspector__content {
    display: grid;
    gap: 0.8rem;
  }

  .graph-inspector__content h3 {
    font-size: 1.65rem;
  }

  .graph-inspector__content ul {
    display: grid;
    gap: 0;
    list-style: none;
  }

  .graph-inspector__content li {
    padding-block: 0.55rem;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.67rem;
    line-height: 1.45;
  }

  .graph-inspector__content li span {
    color: var(--copper);
  }

  .graph-inspector__content > a {
    width: fit-content;
    margin-top: 0.5rem;
    border-bottom: 1px solid var(--copper);
    color: var(--ink);
    font-size: 0.7rem;
    font-weight: 700;
  }

  details.graph-fallback,
  details.accessible-graph-list {
    padding: 0.8rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
  }

  details.graph-fallback summary,
  details.accessible-graph-list summary {
    min-height: 2.5rem;
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 700;
  }

  details.graph-fallback ul,
  details.accessible-graph-list ul {
    display: grid;
    margin-top: 0.7rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
    list-style: none;
  }

  details.graph-fallback li,
  details.accessible-graph-list li {
    display: grid;
    min-height: 4rem;
    padding: 0.65rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    align-content: center;
    gap: 0.15rem;
  }

  details.graph-fallback li :where(a, button),
  details.accessible-graph-list li :where(a, button) {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-display);
    text-align: left;
  }

  details.graph-fallback li > span,
  details.accessible-graph-list li > span {
    color: var(--ink-muted);
    font-size: 0.55rem;
  }

  .graph-stage > .graph-legend {
    position: static;
    display: flex;
    max-width: none;
    padding: 0.65rem 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
  }

  .graph-stage > .graph-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }

  .graph-legend__line {
    display: inline-block;
    width: 1.4rem;
    height: 1px;
    background: var(--line-strong);
  }

  /* Exact compare component */
  .position-matrix__choice {
    position: relative;
    display: inline-flex;
    min-height: 2.8rem;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    color: var(--ink-soft);
    font-size: 0.68rem;
    cursor: pointer;
  }

  .position-matrix__choice:has(input:checked) {
    border-color: var(--indigo);
    background: var(--indigo-wash);
    color: var(--ink);
  }

  .position-matrix__choice input {
    accent-color: var(--indigo);
  }

  .position-matrix__choice span[lang] {
    color: var(--copper);
    font-family: var(--font-deva);
  }

  .position-matrix__selection,
  .position-matrix__error {
    color: var(--ink-muted);
    font-size: 0.67rem;
  }

  .position-matrix__error {
    color: var(--vermilion);
  }

  .position-matrix__table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-solid);
    scrollbar-color: var(--line-strong) transparent;
  }

  .position-matrix__table {
    width: 100%;
    min-width: 52rem;
  }

  .position-matrix__table th,
  .position-matrix__table td {
    min-width: 13rem;
    padding: 1.05rem;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    text-align: left;
  }

  .position-matrix__table th:first-child {
    position: sticky;
    z-index: 2;
    left: 0;
    min-width: 10rem;
    background: var(--surface-raised);
  }

  .position-matrix__table thead th {
    background: var(--surface-raised);
  }

  .position-matrix__table thead th > span {
    display: block;
    color: var(--copper);
    font-family: var(--font-deva);
    font-size: 0.92rem;
  }

  .position-matrix__table thead th strong,
  .position-matrix__table tbody th strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
  }

  .position-matrix__table tbody th > span {
    display: block;
    margin-top: 0.3rem;
    color: var(--ink-muted);
    font-size: 0.61rem;
    font-weight: 450;
  }

  .position-cell summary {
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .position-cell__depth {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.8rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
    color: var(--ink-muted);
    font-size: 0.68rem;
    line-height: 1.55;
  }

  .position-cell__depth a {
    border-bottom: 1px solid var(--copper);
    color: var(--ink);
  }

  /* Exact relation component */
  .relation-model[data-component="relation-model"] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .relation-model__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .relation-model__tabs button {
    min-height: 2.5rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink-muted);
    font-size: 0.66rem;
    font-weight: 700;
  }

  .relation-model__tabs button:hover,
  .relation-model__tabs button[aria-selected="true"] {
    border-color: var(--indigo);
    background: var(--indigo);
    color: var(--paper-strong);
  }

  .relation-model__diagram {
    position: relative;
    display: grid;
    min-height: 35rem;
    padding: 5.5rem 1rem 1rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background:
      radial-gradient(circle at 45% 48%, var(--indigo-wash), transparent 40%),
      var(--surface);
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.3fr);
    align-items: center;
    gap: 1rem;
  }

  .relation-model__copy {
    position: absolute;
    z-index: 3;
    top: 1.2rem;
    right: 1.2rem;
    left: 1.2rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--line);
  }

  .relation-model__copy h3 {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
  }

  .relation-model__copy p {
    max-width: 50ch;
    color: var(--ink-muted);
    font-size: 0.67rem;
    text-align: right;
  }

  .relation-model__diagram > svg {
    width: 100%;
    min-height: 27rem;
    overflow: visible;
  }

  .relation-model__equivalent {
    display: grid;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    gap: 0.65rem;
  }

  .relation-model__equivalent h4 {
    font-size: 1rem;
  }

  .relation-model__equivalent ul {
    display: grid;
    gap: 0.5rem;
    list-style: none;
  }

  .relation-model__equivalent li {
    padding-top: 0.5rem;
    border-top: 1px solid var(--line);
    color: var(--ink-muted);
    font-size: 0.65rem;
    line-height: 1.5;
  }

  .relation-edge line {
    fill: none;
    stroke: var(--indigo);
    stroke-width: 0.55;
  }

  .relation-edge text {
    fill: var(--ink-soft);
    stroke: none;
    font-family: var(--font-body);
    font-size: 1.9px;
    paint-order: stroke;
    text-anchor: middle;
  }

  .relation-edge--difference line,
  .relation-edge[data-kind="difference"] line {
    stroke: var(--vermilion);
    stroke-dasharray: 2 2;
  }

  .relation-edge--dependence line,
  .relation-edge[data-kind="dependence"] line {
    stroke: var(--copper);
  }

  .relation-node circle {
    fill: color-mix(in srgb, var(--surface-raised) 90%, transparent);
    stroke: var(--copper);
    stroke-width: 0.45;
  }

  .relation-node text {
    fill: var(--ink);
    stroke: none;
    font-family: var(--font-body);
    font-size: 2.3px;
    font-weight: 750;
    letter-spacing: 0.05em;
  }

  .relation-node__sub {
    fill: var(--ink-muted);
    font-size: 1.5px;
    font-weight: 450;
    letter-spacing: 0;
  }

  .teaching-aid-note {
    padding: 0.8rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--indigo-wash);
    color: var(--ink-muted);
    font-size: 0.68rem;
  }

  .home-compare__visual .relation-model > .section-heading,
  .home-compare__visual .relation-model__tabs,
  .home-compare__visual .teaching-aid-note,
  .feature-split .relation-model > .section-heading,
  .feature-split .relation-model__tabs,
  .feature-split .teaching-aid-note,
  .visualizer-stage .relation-model > .section-heading,
  .visualizer-stage .relation-model__tabs,
  .visualizer-stage .teaching-aid-note {
    display: none;
  }

  .home-compare__visual .relation-model[data-component="relation-model"],
  .feature-split .relation-model[data-component="relation-model"],
  .visualizer-stage .relation-model[data-component="relation-model"] {
    display: grid;
  }

  .home-compare__visual .relation-model__diagram,
  .feature-split .relation-model__diagram {
    grid-template-columns: 1fr;
  }

  .home-compare__visual .relation-model__equivalent,
  .feature-split .relation-model__equivalent {
    display: none;
  }

  /* Exact tree component */
  .tattva-overview {
    display: grid;
    padding: 1rem;
    grid-template-columns: minmax(12rem, 0.3fr) minmax(0, 0.7fr);
    align-items: stretch;
    gap: 0.75rem;
  }

  .tattva-overview__independent,
  .tattva-overview__flow {
    display: flex;
    min-height: 5.5rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: var(--ink-muted);
    font-size: 0.65rem;
    text-align: center;
  }

  .tattva-overview__independent strong,
  .tattva-overview__flow strong {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
  }

  .tattva-overview__independent {
    border-color: color-mix(in srgb, var(--indigo) 40%, var(--line));
    background: var(--indigo-wash);
  }

  .tree-explorer__controls {
    display: grid;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    grid-template-columns: repeat(2, minmax(9rem, 0.75fr)) minmax(12rem, 1.2fr) auto auto;
    align-items: end;
    gap: 0.55rem;
  }

  .tree-explorer__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.27fr);
    align-items: start;
    gap: 0.8rem;
  }

  .tattva-groups {
    display: grid;
    gap: 0.7rem;
  }

  .tattva-group > h3 {
    color: var(--ink-muted);
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .tattva-grid {
    list-style: none;
  }

  .tattva-grid > li {
    min-width: 0;
  }

  .tattva-card {
    width: 100%;
  }

  .tree-explorer__layout .tattva-inspector {
    position: sticky;
    top: calc(var(--header-height) + 1rem);
    bottom: auto;
    display: grid;
    padding: 1.25rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-md);
    grid-template-columns: 1fr;
    align-items: start;
    gap: 0.65rem;
  }

  .tattva-inspector__devanagari {
    color: var(--copper);
    font-family: var(--font-deva);
    font-size: 1.4rem;
  }

  .tree-explorer__layout .tattva-inspector > p:not(.eyebrow, .tattva-inspector__devanagari, .tattva-inspector__relation) {
    color: var(--ink-soft);
    font-size: 0.74rem;
    line-height: 1.65;
  }

  .tattva-inspector__relation {
    padding-top: 0.65rem;
    border-top: 1px solid var(--line);
    color: var(--ink-muted);
    font-size: 0.65rem;
  }

  .tree-explorer__caution {
    padding: 0.8rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--copper-wash);
  }

  .tree-explorer__caution summary {
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 700;
  }

  .tree-explorer__caution p {
    margin-top: 0.6rem;
    color: var(--ink-muted);
    font-size: 0.68rem;
  }

  /* Exact timeline component */
  .timeline-rail[data-component="timeline-rail"] {
    overflow: visible;
    padding-block: 1rem;
  }

  .timeline-rail[data-component="timeline-rail"]::before {
    display: none;
  }

  .timeline-rail__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0;
    border: 0;
  }

  .timeline-rail__filters legend {
    width: 100%;
    margin-bottom: 0.35rem;
    color: var(--ink-muted);
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .timeline-rail__filters label {
    position: relative;
  }

  .timeline-rail__filters input {
    position: absolute;
    opacity: 0;
  }

  .timeline-rail__filters span {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink-muted);
    font-size: 0.67rem;
    font-weight: 700;
    cursor: pointer;
  }

  .timeline-rail__filters input:checked + span {
    border-color: var(--indigo);
    background: var(--indigo);
    color: var(--paper-strong);
  }

  .timeline-rail__filters input:focus-visible + span {
    box-shadow: var(--ring);
  }

  .timeline-rail__track {
    position: relative;
    margin-top: 1rem;
    list-style: none;
  }

  .timeline-rail__track::before {
    position: absolute;
    top: 5.05rem;
    right: var(--gutter);
    left: var(--gutter);
    height: 1px;
    background: var(--line-strong);
    content: "";
  }

  .timeline-card > article {
    display: grid;
    height: 100%;
    align-content: start;
    gap: 0.75rem;
  }

  .timeline-card > article > p:last-of-type {
    color: var(--ink-soft);
    font-size: 0.76rem;
    line-height: 1.65;
  }

  .timeline-card__type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  /* Exact concept lens component */
  .concept-lens[data-component="concept-lens"] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .concept-lens__selector {
    width: min(18rem, 100%);
  }

  .concept-lens__article {
    display: grid;
    gap: 1rem;
  }

  .concept-lens__article > header {
    display: grid;
    padding: clamp(1.4rem, 4vw, 2.6rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    gap: 0.55rem;
  }

  .concept-lens__article > header h3 {
    font-size: clamp(2.4rem, 6vw, 5rem);
  }

  .concept-lens__article > header > p:last-child {
    max-width: 62ch;
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.7;
  }

  .misconception-note {
    padding: 1rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--vermilion) 35%, var(--line));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--vermilion) 7%, transparent);
  }

  .misconception-note > p:last-child {
    margin-top: 0.35rem;
    color: var(--ink-soft);
    font-size: 0.74rem;
  }

  .concept-lens__meanings {
    display: grid;
    gap: 0.8rem;
  }

  .concept-lens__meanings > h4,
  .concept-lens__connections > h4 {
    font-size: clamp(1.5rem, 3vw, 2.3rem);
  }

  .concept-lens__traditions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }

  .concept-lens__traditions article {
    min-height: 10rem;
    padding: 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
  }

  .concept-lens__traditions h5 {
    color: var(--copper);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .concept-lens__traditions p {
    margin-top: 0.6rem;
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: 0.85rem;
    line-height: 1.65;
  }

  .concept-lens__connections {
    display: grid;
    gap: 0.75rem;
  }

  .concept-lens__connections ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
  }

  .concept-lens__connections a {
    display: inline-flex;
    min-height: 2.35rem;
    align-items: center;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    font-size: 0.68rem;
    font-weight: 700;
  }

  /* Exact mandala SVG */
  .knowledge-mandala[data-component="knowledge-mandala"] {
    display: grid;
    grid-template-columns: minmax(18rem, 0.62fr) minmax(15rem, 0.38fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4rem);
  }

  .knowledge-mandala > svg {
    grid-row: 1 / 3;
    width: 100%;
    max-width: 38rem;
    justify-self: center;
    order: -1;
  }

  .knowledge-mandala__connections line {
    stroke: var(--line);
    stroke-width: 1;
  }

  .knowledge-mandala__core circle {
    fill: var(--surface-raised);
    stroke: var(--copper);
    stroke-width: 1;
  }

  .knowledge-mandala__core text {
    fill: var(--ink);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 750;
    letter-spacing: 0.12em;
  }

  .knowledge-mandala__track,
  .knowledge-mandala__progress {
    fill: var(--surface-raised);
    stroke: var(--line);
    stroke-width: 5;
  }

  .knowledge-mandala__progress {
    fill: none;
    stroke: var(--saffron);
    stroke-linecap: round;
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--saffron) 32%, transparent));
  }

  .knowledge-mandala__region text {
    fill: var(--ink);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
  }

  .knowledge-mandala__region .knowledge-mandala__value {
    fill: var(--ink-muted);
    font-size: 10px;
    font-weight: 500;
  }

  .knowledge-mandala__fallback {
    display: grid;
    gap: 0.45rem;
    list-style: none;
  }

  .knowledge-mandala__fallback li {
    display: grid;
    min-height: 2rem;
    grid-template-columns: minmax(6rem, 1fr) minmax(5rem, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    color: var(--ink-muted);
    font-size: 0.62rem;
  }

  .knowledge-mandala__fallback progress {
    width: 100%;
    height: 0.25rem;
    border: 0;
    border-radius: var(--radius-pill);
    accent-color: var(--saffron);
  }

  .progress-section .knowledge-mandala > .section-heading {
    display: none;
  }

  /* Exact lesson component */
  .lesson.challenge-engine {
    display: grid;
    grid-template-columns: minmax(12rem, 0.23fr) minmax(0, 0.77fr);
    align-items: start;
    gap: 1rem clamp(1rem, 4vw, 3rem);
  }

  .lesson__header {
    display: grid;
    grid-column: 1 / -1;
    padding: clamp(1.2rem, 3vw, 2rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    gap: 0.7rem;
  }

  .lesson__header h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
  }

  .lesson__header > p:last-of-type {
    color: var(--ink-muted);
    font-size: 0.68rem;
  }

  .lesson__progress {
    height: 0.3rem;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--line);
  }

  .lesson__progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--copper), var(--saffron));
    transition: width 500ms var(--ease-out);
  }

  .lesson__steps {
    position: sticky;
    top: calc(var(--header-height) + 1rem);
  }

  .lesson__steps ol {
    display: grid;
    padding: 0.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    gap: 0.25rem;
    list-style: none;
  }

  .lesson__steps button {
    display: grid;
    width: 100%;
    min-height: 3.2rem;
    padding: 0.6rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.6rem;
    color: var(--ink-muted);
    font-size: 0.64rem;
    text-align: left;
  }

  .lesson__steps button > span:first-child {
    display: grid;
    width: 1.55rem;
    height: 1.55rem;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    font-size: 0.55rem;
  }

  .lesson__steps button:hover,
  .lesson__steps button[aria-current="step"] {
    border-color: var(--line);
    background: var(--indigo-wash);
    color: var(--ink);
  }

  .lesson__steps button.is-complete > span:first-child {
    border-color: var(--sage);
    background: var(--sage);
    color: var(--paper-strong);
  }

  .lesson__panels {
    min-width: 0;
  }

  .lesson__panels .lesson-step {
    min-height: 29rem;
  }

  .lesson__panels .lesson-step > p:not(.eyebrow) {
    max-width: 63ch;
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.8;
  }

  .lesson-reveal,
  .lesson-choice,
  .lesson-match {
    display: grid;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--paper-strong);
    gap: 0.8rem;
  }

  .lesson-reveal--misconception {
    border-color: color-mix(in srgb, var(--vermilion) 38%, var(--line));
    background: color-mix(in srgb, var(--vermilion) 6%, var(--paper-strong));
  }

  .lesson-reveal > p,
  .lesson-choice legend,
  .lesson-match legend {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 550;
  }

  .lesson-reveal > button,
  .lesson-choice > button,
  .lesson-match > button {
    min-height: 2.7rem;
    width: fit-content;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--ink);
    border-radius: var(--radius-pill);
    background: var(--ink);
    color: var(--paper-strong);
    font-size: 0.68rem;
    font-weight: 700;
  }

  .lesson-reveal__answer,
  [data-challenge-feedback] {
    padding: 0.85rem 1rem;
    border-left: 2px solid var(--sage);
    background: color-mix(in srgb, var(--sage) 9%, transparent);
    color: var(--ink-soft);
    font-size: 0.73rem;
  }

  .lesson-choice fieldset,
  .lesson-match fieldset {
    display: grid;
    gap: 0.5rem;
    padding: 0;
    border: 0;
  }

  .lesson-choice label,
  .lesson-match label {
    display: grid;
    min-height: 3.2rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.65rem;
    color: var(--ink-soft);
    font-size: 0.74rem;
  }

  .lesson-choice input {
    accent-color: var(--indigo);
  }

  .lesson-match label {
    grid-template-columns: minmax(0, 1fr) minmax(9rem, 0.45fr);
  }

  .lesson-match select {
    min-height: 2.5rem;
    padding-inline: 0.6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
  }

  .lesson__controls {
    display: grid;
    grid-column: 2;
    min-height: 4rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
  }

  .lesson__controls button {
    min-height: 2.7rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    color: var(--ink);
    font-size: 0.68rem;
    font-weight: 700;
  }

  .lesson__controls button:last-child {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper-strong);
  }

  .lesson__controls button:disabled {
    cursor: not-allowed;
    opacity: 0.4;
  }

  .lesson__controls p {
    color: var(--ink-muted);
    font-size: 0.65rem;
    text-align: center;
  }

  /* Citation previews and source records */
  .citation {
    position: relative;
    display: inline-flex;
  }

  .citation-pills .citation-pill {
    display: inline-flex;
    min-height: 2.4rem;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.68rem;
    border: 1px solid color-mix(in srgb, var(--indigo) 38%, var(--line));
    border-radius: var(--radius-pill);
    background: var(--indigo-wash);
    color: var(--indigo);
    font-size: 0.61rem;
    font-weight: 700;
  }

  .citation-pill__mark {
    font-size: 0.72rem;
  }

  .citation-preview {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.55rem);
    left: 0;
    display: grid;
    width: min(21rem, calc(100vw - 2rem));
    padding: 0.85rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    box-shadow: var(--shadow-lg);
    gap: 0.35rem;
    color: var(--ink-soft);
    font-size: 0.66rem;
    line-height: 1.5;
  }

  .citation-preview strong {
    color: var(--sage);
    font-size: 0.57rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }

  .citation-preview a {
    width: fit-content;
    margin-top: 0.25rem;
    border-bottom: 1px solid var(--copper);
    color: var(--ink);
    font-weight: 700;
  }

  .source-ledger__group {
    display: grid;
    gap: 0.7rem;
  }

  .source-ledger__group > h3 {
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--line-strong);
    color: var(--sage);
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .source-list {
    display: grid;
    gap: 0.55rem;
    list-style: none;
  }

  .source-record {
    padding: 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
  }

  .source-record article {
    display: grid;
    gap: 0.35rem;
  }

  .source-record__title {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.35;
  }

  .source-record :where(p:not(.source-record__title), .source-record__publication) {
    color: var(--ink-muted);
    font-size: 0.68rem;
    line-height: 1.55;
  }

  .source-record a {
    width: fit-content;
    margin-top: 0.3rem;
    border-bottom: 1px solid var(--copper);
    color: var(--ink);
    font-size: 0.68rem;
    font-weight: 700;
  }
}

@layer responsive {
  @media (max-width: 72rem) {
    .graph-stage__controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .graph-stage__controls .graph-stage__zoom { grid-column: span 2; }
    .tree-explorer__controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    details.graph-fallback ul, details.accessible-graph-list ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  @media (max-width: 54rem) {
    .graph-stage__layout, .tree-explorer__layout { grid-template-columns: 1fr; }
    .graph-stage__canvas { min-height: 34rem; }
    .graph-stage__canvas svg, .graph-stage[data-component="graph-stage"] svg { height: 34rem; }
    .graph-inspector, .graph-stage__layout .graph-inspector, .tree-explorer__layout .tattva-inspector { position: relative; top: auto; }
    .graph-inspector { min-height: auto; }
    .relation-model__diagram { grid-template-columns: 1fr; padding-top: 7rem; }
    .relation-model__diagram > svg { min-height: 25rem; }
    .relation-model__copy { display: grid; }
    .relation-model__copy p { text-align: left; }
    .relation-model__equivalent { grid-template-columns: auto 1fr; }
    .tattva-overview { grid-template-columns: 1fr; }
    .knowledge-mandala[data-component="knowledge-mandala"] { grid-template-columns: 1fr; }
    .knowledge-mandala > svg { grid-row: auto; order: 0; }
    .knowledge-mandala__fallback { display: none; }
    .lesson.challenge-engine { grid-template-columns: 1fr; }
    .lesson__steps { position: relative; top: auto; overflow-x: auto; }
    .lesson__steps ol { display: flex; min-width: max-content; }
    .lesson__steps li { width: 10rem; }
    .lesson__controls { grid-column: 1; }
    .concept-lens__traditions { grid-template-columns: 1fr; }
  }

  @media (max-width: 40rem) {
    .graph-stage[data-component="graph-stage"] { padding: 0.8rem; }
    .graph-stage__controls { grid-template-columns: 1fr; }
    .graph-stage__controls .graph-stage__zoom { grid-column: 1; }
    .graph-stage__canvas { display: none; }
    details.graph-fallback, details.accessible-graph-list { display: block; }
    details.graph-fallback ul, details.accessible-graph-list ul { grid-template-columns: 1fr; }
    .graph-stage > .graph-legend { display: none; }
    .tree-explorer__controls { grid-template-columns: 1fr; }
    .relation-model__diagram { min-height: 29rem; padding-top: 9rem; }
    .relation-model__diagram > svg { min-height: 19rem; }
    .relation-model__equivalent { grid-template-columns: 1fr; }
    .lesson-match label { grid-template-columns: 1fr; }
    .lesson__controls { grid-template-columns: auto 1fr auto; gap: 0.4rem; }
    .lesson__controls button { padding-inline: 0.65rem; }
    .citation-preview { position: fixed; top: auto; right: 1rem; bottom: 1rem; left: 1rem; width: auto; }
  }
}

/* Route renderers use these semantic compositions directly. Kept in a
 * separate layer block so component modules can remain intentionally small. */
@layer routes {
  .route-view {
    animation: route-enter 520ms var(--ease-out) both;
  }

  @keyframes route-enter {
    from { opacity: 0; transform: translateY(0.45rem); }
    to { opacity: 1; transform: translateY(0); }
  }

  .editorial-section {
    padding-block: clamp(4.75rem, 9vw, 8.75rem);
  }

  .editorial-section.page-shell {
    border-top: 1px solid var(--line);
  }

  .editorial-section--tinted,
  .editorial-section--ink {
    width: 100%;
  }

  .editorial-section--tinted {
    border-block: 1px solid var(--line);
    background:
      radial-gradient(circle at 78% 10%, var(--indigo-wash), transparent 30%),
      color-mix(in srgb, var(--paper-muted) 66%, transparent);
  }

  .editorial-section--ink {
    --section-ink: #f0eadc;
    --section-soft: #c1c0b8;
    --section-muted: #8f968f;
    --section-line: rgba(236, 230, 216, 0.16);
    position: relative;
    overflow: hidden;
    border-block: 1px solid rgba(255, 255, 255, 0.08);
    background:
      radial-gradient(circle at 12% 12%, rgba(73, 100, 154, 0.2), transparent 32%),
      radial-gradient(circle at 90% 90%, rgba(165, 97, 60, 0.13), transparent 35%),
      #151c28;
    color: var(--section-soft);
  }

  .editorial-section--ink::before {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
      linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: min(10vw, 8rem) min(10vw, 8rem);
    content: "";
    pointer-events: none;
  }

  .editorial-section--ink > * {
    position: relative;
  }

  .editorial-section--ink :where(h1, h2, h3, h4, strong) {
    color: var(--section-ink);
  }

  .editorial-section--ink :where(p, li) {
    color: var(--section-soft);
  }

  .editorial-section--ink .eyebrow {
    color: #df9b70;
  }

  .editorial-section--ink .section-heading > p:last-child,
  .editorial-section--ink .section-header > p:last-child,
  .editorial-section--ink .fine-print {
    color: var(--section-muted);
  }

  .editorial-section--ink .button--light {
    border-color: rgba(246, 240, 226, 0.85);
    background: #efe8d8;
    color: #171d28;
  }

  .editorial-section--ink .button--light:hover {
    border-color: #fff;
    background: #fffaf0;
    color: #111722;
  }

  .editorial-section--ink .text-link {
    border-color: rgba(240, 234, 220, 0.3);
    color: var(--section-ink);
  }

  .page-toolbar {
    display: flex;
    min-height: 5.25rem;
    justify-content: space-between;
    align-items: center;
    gap: 1rem 2rem;
    padding-block: 1rem;
    border-block: 1px solid var(--line);
  }

  .depth-control {
    gap: 0.85rem;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .depth-control__label {
    color: var(--ink-muted);
    font-size: 0.68rem;
  }

  .quiet-progress {
    display: grid;
    min-width: 14rem;
    grid-template-columns: auto minmax(4rem, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    color: var(--ink-muted);
    font-size: 0.65rem;
    font-weight: 680;
  }

  .quiet-progress strong {
    color: var(--ink);
    font-size: 0.68rem;
  }

  .quiet-progress__bar {
    height: 2px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--line);
  }

  .quiet-progress__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--copper);
    transition: width 500ms var(--ease-out);
  }

  [data-min-depth] {
    display: none;
  }

  html[data-depth="deep"] [data-min-depth="deep"],
  html[data-depth="scholar"] [data-min-depth="deep"],
  html[data-depth="scholar"] [data-min-depth="scholar"] {
    display: revert;
  }

  .depth-copy {
    display: grid;
    gap: 1.25rem;
    max-width: 63rem;
  }

  .depth-copy > p {
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.65vw, 1.3rem);
    line-height: 1.8;
  }

  .depth-copy__deep,
  .depth-copy__scholar {
    padding: 1rem 1.15rem;
    border-left: 2px solid var(--indigo);
    background: var(--indigo-wash);
  }

  .depth-copy__scholar {
    border-left-color: var(--copper);
    background: var(--copper-wash);
  }

  .depth-copy__marker {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--indigo);
    font-family: var(--font-body);
    font-size: 0.61rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .depth-copy__scholar .depth-copy__marker {
    color: var(--copper);
  }

  .home-hero {
    position: relative;
    display: grid;
    min-height: max(44rem, calc(100svh - var(--header-height)));
    overflow: hidden;
    grid-template-columns: minmax(0, 1.1fr) minmax(25rem, 0.9fr);
    align-items: center;
  }

  .home-hero::before {
    position: absolute;
    top: 50%;
    right: clamp(-18rem, -10vw, -5rem);
    width: min(57rem, 64vw);
    aspect-ratio: 1;
    border: 1px solid var(--line-faint);
    border-radius: 50%;
    box-shadow: 0 0 0 7rem var(--line-faint), 0 0 0 14rem color-mix(in srgb, var(--line-faint) 65%, transparent);
    content: "";
    transform: translateY(-50%);
  }

  .home-hero__copy {
    position: relative;
    z-index: 3;
    display: grid;
    width: 100%;
    padding-block: clamp(5rem, 11vw, 9rem);
    gap: 1.35rem;
  }

  .home-hero h1 {
    max-width: 8ch;
    font-size: clamp(5rem, 13vw, 12.5rem);
    line-height: 0.8;
  }

  .home-hero h1 span {
    display: block;
    font-size: 0.56em;
    line-height: 1;
  }

  .home-hero h1 em {
    color: var(--copper);
    font-weight: inherit;
  }

  .home-hero__lead {
    max-width: 47ch;
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    line-height: 1.55;
  }

  .hero-network {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: max(var(--gutter), calc((100vw - var(--content-wide)) / 2));
    width: min(44rem, 50vw);
    aspect-ratio: 1;
    border: 1px solid var(--line);
    border-radius: 50%;
    transform: translateY(-50%);
  }

  .hero-network::before,
  .hero-network::after {
    position: absolute;
    border: 1px solid var(--line-faint);
    border-radius: inherit;
    content: "";
  }

  .hero-network::before { inset: 16%; }
  .hero-network::after { inset: 34%; background: radial-gradient(circle, var(--copper-wash), transparent 66%); }

  .hero-network__core {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: grid;
    width: 8.5rem;
    aspect-ratio: 1;
    place-items: center;
    align-content: center;
    gap: 0.15rem;
    border: 1px solid var(--copper);
    border-radius: 50%;
    background: var(--surface-raised);
    box-shadow: 0 0 0 1rem var(--copper-wash), var(--shadow-md);
    transform: translate(-50%, -50%);
  }

  .hero-network__core span {
    color: var(--copper);
    font-family: var(--font-deva);
    font-size: 1.45rem;
  }

  .hero-network__core strong {
    font-family: var(--font-display);
    font-size: 0.76rem;
    font-weight: 500;
  }

  .hero-network__node {
    --school-color: var(--indigo);
    position: absolute;
    z-index: 3;
    display: grid;
    width: 6.2rem;
    aspect-ratio: 1;
    place-items: center;
    align-content: center;
    gap: 0.12rem;
    padding: 0.55rem;
    border: 1px solid color-mix(in srgb, var(--school-color) 55%, var(--line));
    border-radius: 50%;
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease, transform 400ms var(--ease-spring);
  }

  .hero-network__node span {
    color: var(--school-color);
    font-family: var(--font-deva);
    font-size: 0.72rem;
  }

  .hero-network__node strong {
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 550;
  }

  .hero-network__node:hover {
    border-color: var(--school-color);
    background: color-mix(in srgb, var(--school-color) 8%, var(--surface-raised));
    box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--school-color) 7%, transparent), var(--shadow-md);
  }

  .hero-network__node--1 { top: -2%; left: 42%; }
  .hero-network__node--2 { top: 19%; right: 0; }
  .hero-network__node--3 { right: 5%; bottom: 10%; }
  .hero-network__node--4 { bottom: -1%; left: 40%; }
  .hero-network__node--5 { bottom: 12%; left: 2%; }
  .hero-network__node--6 { top: 17%; left: -1%; }
  .hero-network__node--1:hover { transform: translateY(-0.35rem) scale(1.05); }
  .hero-network__node--2:hover,
  .hero-network__node--3:hover { transform: translateX(0.35rem) scale(1.05); }
  .hero-network__node--4:hover { transform: translateY(0.35rem) scale(1.05); }
  .hero-network__node--5:hover,
  .hero-network__node--6:hover { transform: translateX(-0.35rem) scale(1.05); }

  .home-hero__scroll {
    position: absolute;
    z-index: 4;
    bottom: 1.5rem;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--ink-muted);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transform: translateX(-50%);
  }

  .home-hero__scroll span:last-child {
    animation: scroll-cue 1.8s ease-in-out infinite;
  }

  @keyframes scroll-cue {
    50% { transform: translateY(0.3rem); }
  }

  .home-compare,
  .feature-split,
  .philosophy-evidence,
  .people-texts-grid,
  .classification-note,
  .comparison-caution,
  .review-standard,
  .progress-section,
  .home-debate,
  .mind-lab,
  .object-lab {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: clamp(2rem, 7vw, 7rem);
  }

  .home-compare__copy,
  .home-debate__copy {
    display: grid;
    align-content: start;
    gap: 1.3rem;
  }

  .home-compare__copy .section-heading,
  .home-debate__copy .section-heading {
    margin-bottom: 0;
  }

  .home-compare__visual .relation-model {
    display: block;
  }

  .position-list {
    display: grid;
    gap: 0;
    list-style: none;
  }

  .position-list li {
    display: grid;
    min-height: 3.7rem;
    padding-block: 0.8rem;
    border-bottom: 1px solid var(--line);
    grid-template-columns: auto auto 1fr;
    align-items: baseline;
    gap: 0.55rem;
    color: var(--ink-soft);
    font-size: 0.78rem;
  }

  .position-list li > span {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--school-color);
  }

  .one-text {
    display: grid;
    grid-template-columns: minmax(15rem, 0.42fr) minmax(0, 0.58fr);
    align-items: center;
    gap: clamp(3rem, 8vw, 8rem);
  }

  .one-text__devanagari {
    margin-top: 1.5rem;
    color: #f3d7b8 !important;
    font-family: var(--font-deva);
    font-size: clamp(3.8rem, 9vw, 8rem);
    line-height: 1;
  }

  .one-text__iast {
    color: var(--section-ink) !important;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.8vw, 2.2rem);
  }

  .one-text__locator {
    max-width: 38ch;
    margin-top: 1.5rem;
    color: var(--section-muted) !important;
    font-size: 0.67rem;
    line-height: 1.6;
  }

  .one-text > div:last-child {
    display: grid;
    gap: 1.3rem;
  }

  .home-timeline {
    display: grid;
    gap: 2rem;
  }

  .timeline-preview {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .timeline-preview::before {
    position: absolute;
    top: 2.48rem;
    right: 0;
    left: 0;
    height: 1px;
    background: var(--line-strong);
    content: "";
  }

  .timeline-preview__event {
    position: relative;
    display: grid;
    min-height: 18rem;
    padding: 4.6rem 1.2rem 1.2rem;
    border-right: 1px solid var(--line);
    align-content: start;
    gap: 0.65rem;
    transition: background-color 220ms ease;
  }

  .timeline-preview__event:first-child { border-left: 1px solid var(--line); }

  .timeline-preview__event::before {
    position: absolute;
    z-index: 2;
    top: 2.15rem;
    left: 1.2rem;
    width: 0.7rem;
    height: 0.7rem;
    border: 2px solid var(--paper);
    border-radius: 50%;
    background: var(--copper);
    box-shadow: 0 0 0 1px var(--copper);
    content: "";
  }

  .timeline-preview__event:hover { background: var(--surface); }
  .timeline-preview__event > span { color: var(--copper); font-size: 0.62rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
  .timeline-preview__event strong { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; line-height: 1.25; }
  .timeline-preview__event p { color: var(--ink-muted); font-size: 0.72rem; line-height: 1.65; }

  .home-debate__stage {
    display: grid;
    min-height: 28rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background:
      radial-gradient(circle at 20% 15%, var(--indigo-wash), transparent 38%),
      radial-gradient(circle at 80% 85%, var(--copper-wash), transparent 35%),
      var(--surface);
    align-content: center;
    gap: 0.8rem;
  }

  .home-debate__speaker {
    color: var(--copper);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.16em;
  }

  .home-debate__speaker:nth-of-type(2) {
    margin-top: 2rem;
    color: var(--sage);
    text-align: right;
  }

  .home-debate__claim {
    max-width: 80%;
    padding: 1rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2vw, 1.35rem);
  }

  .home-debate__claim:nth-of-type(2) {
    justify-self: end;
    border-radius: var(--radius-md) 0 var(--radius-md) var(--radius-md);
  }

  .status-badge {
    display: inline-flex;
    min-height: 2rem;
    width: fit-content;
    align-items: center;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink-muted);
    font-size: 0.65rem;
    font-weight: 700;
  }

  .journey-callout {
    position: relative;
    display: grid;
    margin-block: clamp(4rem, 10vw, 9rem);
    padding: clamp(2rem, 7vw, 5.5rem);
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xl);
    background:
      radial-gradient(circle at 85% 50%, var(--copper-wash), transparent 32%),
      var(--surface);
    gap: 1rem;
  }

  .journey-callout::after {
    position: absolute;
    right: -7rem;
    bottom: -7rem;
    width: 21rem;
    aspect-ratio: 1;
    border: 1px solid var(--line);
    border-radius: 50%;
    box-shadow: 0 0 0 3rem var(--line-faint), 0 0 0 7rem var(--line-faint);
    content: "";
  }

  .journey-callout > * {
    position: relative;
    z-index: 1;
  }

  .journey-callout h2 { max-width: 18ch; }
  .journey-callout > p:not(.eyebrow) { max-width: 60ch; color: var(--ink-soft); }

  .route-hero {
    position: relative;
    display: grid;
    min-height: clamp(34rem, 72vh, 49rem);
    padding-block: clamp(5rem, 10vw, 9rem);
    overflow: hidden;
    align-items: center;
  }

  .route-hero::before {
    position: absolute;
    z-index: -1;
    top: 50%;
    right: -7%;
    width: min(38rem, 45vw);
    aspect-ratio: 1;
    border: 1px solid var(--line);
    border-radius: 50%;
    box-shadow: 0 0 0 4rem var(--line-faint), 0 0 0 9rem color-mix(in srgb, var(--line-faint) 60%, transparent);
    content: "";
    transform: translateY(-50%);
  }

  .route-hero__copy {
    display: grid;
    max-width: 67rem;
    gap: 1.25rem;
  }

  .route-hero h1 {
    max-width: 14ch;
    font-size: clamp(4rem, 9.5vw, 8.8rem);
  }

  .route-hero__lead {
    max-width: 52ch;
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.1vw, 1.6rem);
    line-height: 1.58;
  }

  .route-hero__note {
    display: flex;
    max-width: 63ch;
    gap: 0.65rem;
    color: var(--ink-muted);
    font-size: 0.74rem;
  }

  .route-hero__note span { color: var(--copper); }

  .route-hero__index {
    position: absolute;
    right: 7%;
    bottom: 20%;
    display: grid;
    grid-template-columns: repeat(3, 1rem);
    gap: 0.4rem;
    transform: rotate(45deg);
  }

  .route-hero__index span {
    height: 1rem;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
  }

  .route-hero__index span:nth-child(2) { background: var(--copper); border-color: var(--copper); }

  .breadcrumb {
    padding-top: 1.25rem;
  }

  .breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    list-style: none;
    color: var(--ink-muted);
    font-size: 0.66rem;
  }

  .breadcrumb li + li::before {
    margin-right: 0.45rem;
    color: var(--line-strong);
    content: "/";
  }

  .breadcrumb a:hover { color: var(--copper); }
  .breadcrumb [aria-current="page"] { color: var(--ink-soft); }

  .philosophy-page {
    --school-color: var(--copper);
  }

  .philosophy-hero {
    position: relative;
    display: grid;
    min-height: clamp(35rem, 75vh, 52rem);
    padding-block: clamp(4rem, 9vw, 8rem);
    overflow: hidden;
    grid-template-columns: minmax(0, 1.18fr) minmax(18rem, 0.82fr);
    align-items: center;
    gap: clamp(2rem, 8vw, 8rem);
  }

  .philosophy-hero::before {
    position: absolute;
    z-index: -1;
    top: 50%;
    right: 0;
    width: min(39rem, 46vw);
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--school-color) 42%, var(--line));
    border-radius: 50%;
    box-shadow: 0 0 0 4rem color-mix(in srgb, var(--school-color) 5%, transparent), 0 0 0 9rem color-mix(in srgb, var(--school-color) 3%, transparent);
    content: "";
    transform: translateY(-50%);
  }

  .philosophy-hero__title {
    display: grid;
    gap: 0.8rem;
  }

  .philosophy-hero__title h1 {
    font-size: clamp(4rem, 11vw, 9rem);
  }

  .philosophy-hero__devanagari {
    color: var(--school-color);
    font-family: var(--font-deva);
    font-size: clamp(1.35rem, 3vw, 2.4rem);
  }

  .philosophy-hero__epithet {
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.3vw, 1.65rem);
    font-style: italic;
  }

  .philosophy-hero__question {
    position: relative;
    z-index: 1;
    display: grid;
    padding: clamp(1.5rem, 3.5vw, 2.6rem);
    border: 1px solid color-mix(in srgb, var(--school-color) 40%, var(--line));
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
    box-shadow: var(--shadow-md);
    gap: 0.8rem;
    backdrop-filter: blur(14px);
  }

  .philosophy-hero__question > span {
    color: var(--school-color);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .philosophy-hero__question blockquote {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    line-height: 1.25;
  }

  .philosophy-hero__question > p {
    padding-top: 0.8rem;
    border-top: 1px solid var(--line);
    color: var(--ink-muted);
    font-size: 0.7rem;
  }

  .philosophy-intro {
    display: grid;
    grid-template-columns: minmax(5rem, 0.18fr) minmax(0, 0.82fr);
    align-items: start;
    gap: clamp(2rem, 7vw, 7rem);
  }

  .philosophy-intro__folio {
    display: grid;
    place-items: center;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 50%;
    aspect-ratio: 1;
    color: var(--ink-muted);
    text-align: center;
  }

  .philosophy-intro__folio span {
    font-size: 0.57rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .philosophy-intro__folio strong {
    display: block;
    color: var(--school-color);
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 400;
  }

  .philosophy-evidence,
  .people-texts-grid {
    align-items: start;
  }

  .philosophy-evidence > div,
  .people-texts-grid > div {
    min-width: 0;
  }

  .term-list,
  .pramana-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
  }

  .term-chip,
  .pramana-chip {
    display: grid;
    min-width: 8.5rem;
    min-height: 4.4rem;
    padding: 0.72rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.15rem 0.65rem;
    transition: border-color 180ms ease, background-color 180ms ease, transform 220ms var(--ease-out);
  }

  .term-chip:hover,
  .pramana-chip:hover {
    border-color: var(--copper);
    background: var(--surface-raised);
    transform: translateY(-0.15rem);
  }

  .term-chip > span,
  .pramana-chip > span {
    grid-row: 1 / 3;
    color: var(--copper);
    font-family: var(--font-deva);
    font-size: 1.15rem;
  }

  .term-chip strong,
  .pramana-chip strong {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 550;
  }

  .pramana-chip small {
    color: var(--ink-muted);
    font-size: 0.58rem;
  }

  .fine-print {
    max-width: 62ch;
    margin-top: 1rem;
    color: var(--ink-muted);
    font-size: 0.68rem;
    line-height: 1.6;
  }

  .editorial-list {
    border-top: 1px solid var(--line);
    list-style: none;
  }

  .editorial-list li {
    min-height: 3.4rem;
    padding: 0.8rem 0.25rem;
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: 1.05rem;
  }

  .misconception-panel {
    display: grid;
    padding: clamp(1.5rem, 5vw, 4rem);
    border: 1px solid color-mix(in srgb, var(--vermilion) 38%, var(--line));
    border-radius: var(--radius-xl);
    background: linear-gradient(130deg, color-mix(in srgb, var(--vermilion) 8%, transparent), transparent 52%), var(--surface);
    grid-template-columns: minmax(16rem, 0.42fr) minmax(0, 0.58fr);
    gap: clamp(2rem, 6vw, 6rem);
  }

  .misconception-panel__heading {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }

  .misconception-panel__heading > span {
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--vermilion);
    border-radius: 50%;
    color: var(--vermilion);
    font-size: 1.3rem;
  }

  .misconception-panel__heading h2 {
    margin-top: 0.6rem;
    font-size: clamp(2rem, 4.2vw, 3.7rem);
  }

  .misconception-panel__items {
    display: grid;
    gap: 0.65rem;
  }

  .misconception-panel__items > div {
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
  }

  .misconception-panel__items strong {
    color: var(--vermilion);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .misconception-panel__items p {
    margin-top: 0.35rem;
    color: var(--ink-soft);
    font-size: 0.78rem;
  }

  .misconception-panel--compact {
    grid-template-columns: 1fr 1fr;
  }

  .citation-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
  }

  .citation-pills > a,
  .citation-pills > button {
    display: grid;
    max-width: 24rem;
    min-height: 4.5rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    align-content: center;
    gap: 0.2rem;
    text-align: left;
    transition: border-color 180ms ease, background-color 180ms ease;
  }

  .citation-pills > a:hover,
  .citation-pills > button:hover {
    border-color: var(--sage);
    background: var(--surface-raised);
  }

  .citation-pills span {
    color: var(--sage);
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .citation-pills strong {
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 550;
    line-height: 1.3;
  }

  .related-grid,
  .path-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
  }

  .related-card,
  .path-card,
  .system-pair {
    --school-color: var(--copper);
    position: relative;
    display: grid;
    min-height: 17rem;
    padding: 1.3rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    align-content: start;
    gap: 0.65rem;
    transition: border-color 220ms ease, background-color 220ms ease, transform 320ms var(--ease-spring), box-shadow 220ms ease;
  }

  .related-card:hover,
  .path-card:hover,
  .system-pair:hover {
    border-color: var(--school-color);
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
    transform: translateY(-0.3rem);
  }

  .related-card > span:first-child {
    color: var(--school-color);
    font-family: var(--font-deva);
    font-size: 1rem;
  }

  .related-card strong,
  .path-card h3,
  .system-pair h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.2;
  }

  .related-card p,
  .path-card p,
  .system-pair p {
    color: var(--ink-muted);
    font-size: 0.72rem;
    line-height: 1.6;
  }

  .related-card > i,
  .path-card > i {
    margin-top: auto;
    color: var(--school-color);
    font-style: normal;
  }

  .related-card--action {
    border-color: var(--copper);
    background: var(--copper-wash);
  }

  .paired-systems__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
  }

  .system-pair {
    min-height: 19rem;
  }

  .system-pair > span {
    color: var(--copper);
    font-size: 1.4rem;
  }

  .system-pair .text-link { margin-top: auto; }

  .pramana-matrix {
    overflow-x: auto;
    margin-bottom: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-solid);
  }

  .pramana-matrix__row {
    display: grid;
    min-width: 54rem;
    grid-template-columns: minmax(10rem, 1.2fr) repeat(6, minmax(6rem, 1fr));
  }

  .pramana-matrix__row > * {
    display: grid;
    min-height: 4rem;
    place-items: center;
    padding: 0.65rem;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.72rem;
    text-align: center;
  }

  .pramana-matrix__row > *:first-child {
    position: sticky;
    z-index: 2;
    left: 0;
    justify-items: start;
    background: var(--surface-raised);
    color: var(--ink);
    font-weight: 700;
    text-align: left;
  }

  .pramana-matrix__row > *:last-child { border-right: 0; }
  .pramana-matrix__row:last-child > * { border-bottom: 0; }
  .pramana-matrix__head > * { background: var(--surface-raised); color: var(--ink-muted); font-size: 0.62rem; font-weight: 700; }
  .pramana-matrix__head i { display: block; color: var(--copper); font-family: var(--font-deva); font-style: normal; }
  .pramana-matrix b { color: var(--sage); font-size: 0.65rem; }
  .pramana-matrix i { color: var(--line-strong); font-style: normal; }

  .text-specimen {
    display: grid;
    gap: 1rem;
  }

  .text-specimen__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.7rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--section-line, var(--line));
    color: var(--section-muted, var(--ink-muted));
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .text-specimen__meta strong {
    font-weight: 650;
  }

  .text-specimen__devanagari {
    color: #f0d4b7 !important;
    font-family: var(--font-deva);
    font-size: clamp(2rem, 5vw, 4.5rem);
    line-height: 1.45;
  }

  .text-specimen__iast {
    color: var(--section-ink, var(--ink)) !important;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2vw, 1.55rem);
  }

  .text-specimen__note,
  .text-specimen > p:not([class]) {
    max-width: 66ch;
    color: var(--section-muted, var(--ink-muted));
    font-size: 0.76rem;
  }

  .text-specimen--standalone {
    padding: clamp(1.4rem, 4vw, 2.8rem);
    border: 1px solid var(--section-line, var(--line));
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.035);
  }

  .specimen-gallery {
    display: grid;
    gap: 1rem;
  }

  .feature-split,
  .mind-lab {
    color: var(--section-soft);
  }

  .feature-split .relation-model {
    display: block;
  }

  .editorial-section--ink .relation-model__stage,
  .editorial-section--ink .model-stage,
  .editorial-section--ink .relation-model {
    border-color: var(--section-line);
    background-color: rgba(255, 255, 255, 0.035);
  }

  .mind-lab {
    grid-template-columns: minmax(0, 0.43fr) minmax(22rem, 0.57fr);
  }

  .mind-lab > div:first-child {
    display: grid;
    align-content: center;
    gap: 1.2rem;
  }

  .segmented-control--light {
    border-color: var(--section-line);
    background: rgba(255, 255, 255, 0.04);
  }

  .segmented-control--light button { color: var(--section-muted); }
  .segmented-control--light button[aria-pressed="true"] { background: #eee7d7; color: #151c28; }

  .mind-lab__reading {
    display: grid;
    gap: 0.4rem;
    padding: 1rem;
    border-left: 2px solid #93acd9;
    background: rgba(121, 154, 211, 0.09);
  }

  .mind-lab__reading p { font-size: 0.76rem; }

  .mind-lab__visual {
    position: relative;
    min-height: 34rem;
    overflow: hidden;
    border: 1px solid var(--section-line);
    border-radius: 50% 50% 46% 54% / 42% 46% 54% 58%;
    background: radial-gradient(circle at 50% 50%, rgba(123, 156, 216, 0.18), transparent 58%), rgba(255, 255, 255, 0.025);
  }

  .mind-lab__visual::before,
  .mind-lab__visual::after {
    position: absolute;
    border: 1px solid var(--section-line);
    border-radius: 50%;
    content: "";
  }

  .mind-lab__visual::before { inset: 14%; }
  .mind-lab__visual::after { inset: 31%; }

  .mind-lab__visual > i {
    position: absolute;
    z-index: 2;
    top: calc(13% + (var(--i) % 3) * 27%);
    left: calc(14% + (var(--i) % 4) * 23%);
    width: calc(0.55rem + (var(--i) % 3) * 0.25rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #d08c65;
    box-shadow: 0 0 1.2rem rgba(208, 140, 101, 0.5);
    animation: vritti-drift calc(3s + var(--i) * 0.23s) ease-in-out infinite alternate;
    transition: opacity 500ms ease, transform 700ms var(--ease-out);
  }

  @keyframes vritti-drift {
    to { transform: translate(calc((var(--i) - 4) * 0.35rem), calc((4 - var(--i)) * 0.28rem)); }
  }

  .mind-lab__visual[data-mind-visual="focused"] > i { opacity: 0.22; transform: translate(10rem, 10rem) scale(0.6); animation-play-state: paused; }
  .mind-lab__visual[data-mind-visual="focused"] > i:nth-of-type(5) { opacity: 1; transform: translate(0) scale(1.5); }
  .mind-lab__visual[data-mind-visual="stilled"] > i { opacity: 0.07; transform: scale(0); animation-play-state: paused; }

  .mind-lab__witness {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    display: grid;
    width: 7rem;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid #9eb8e5;
    border-radius: 50%;
    background: rgba(20, 28, 40, 0.82);
    box-shadow: 0 0 0 1.1rem rgba(105, 141, 204, 0.08), 0 0 3rem rgba(105, 141, 204, 0.18);
    color: #e8edf6;
    font-family: var(--font-display);
    transform: translate(-50%, -50%);
  }

  .mind-lab__visual > b {
    position: absolute;
    right: 1.7rem;
    bottom: 1.5rem;
    color: var(--section-muted);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .inference-lab,
  .interpretation-lab,
  .vedanta-foundations {
    display: grid;
    gap: 2rem;
  }

  .inference-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    list-style: none;
  }

  .inference-steps li {
    position: relative;
    display: grid;
    min-height: 14rem;
    padding: 1.25rem;
    border: 1px solid var(--section-line);
    border-right: 0;
    background: rgba(255, 255, 255, 0.035);
    align-content: start;
    gap: 1rem;
  }

  .inference-steps li:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
  .inference-steps li:last-child { border-right: 1px solid var(--section-line); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
  .inference-steps li > span { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border: 1px solid #d28c65; border-radius: 50%; color: #e2a078; font-size: 0.62rem; }
  .inference-steps strong { font-family: var(--font-display); font-size: 1.1rem; }
  .inference-steps p { margin-top: 0.5rem; color: var(--section-muted); font-size: 0.72rem; line-height: 1.55; }

  .object-lab {
    grid-template-columns: minmax(0, 0.38fr) minmax(13rem, 0.24fr) minmax(0, 0.38fr);
  }

  .object-lab__pot {
    position: relative;
    width: min(100%, 16rem);
    aspect-ratio: 0.8;
    justify-self: center;
  }

  .object-lab__pot::before {
    position: absolute;
    inset: 25% 10% 8%;
    border: 1px solid #d49168;
    border-radius: 38% 38% 48% 48% / 18% 18% 75% 75%;
    background: linear-gradient(100deg, rgba(207, 130, 83, 0.1), rgba(207, 130, 83, 0.33) 55%, rgba(207, 130, 83, 0.08));
    box-shadow: inset -1.5rem -0.5rem 2.5rem rgba(0, 0, 0, 0.15), 0 2rem 3rem rgba(0, 0, 0, 0.22);
    content: "";
  }

  .object-lab__pot::after {
    position: absolute;
    top: 18%;
    left: 50%;
    width: 45%;
    height: 13%;
    border: 1px solid #dc9b73;
    border-radius: 50%;
    background: #1d222b;
    box-shadow: 0 0.5rem 0 rgba(192, 111, 69, 0.22);
    content: "";
    transform: translateX(-50%);
  }

  .object-lab__result {
    display: grid;
    gap: 0.5rem;
  }

  .object-lab__result > div,
  .interpretation-lab__result {
    padding: 0.85rem 1rem;
    border: 1px solid var(--section-line);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.035);
  }

  .object-lab__result p,
  .interpretation-lab__result p { margin-top: 0.25rem; color: var(--section-muted); font-size: 0.71rem; }

  .interpretation-lab blockquote {
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid var(--section-line);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.035);
    color: var(--section-ink);
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.35rem);
    text-align: center;
  }

  .interpretation-lab__choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
  }

  .interpretation-lab__choices button {
    min-height: 5rem;
    padding: 0.9rem;
    border: 1px solid var(--section-line);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.035);
    color: var(--section-soft);
    font-size: 0.75rem;
    transition: border-color 180ms ease, background-color 180ms ease;
  }

  .interpretation-lab__choices button:hover,
  .interpretation-lab__choices button[aria-pressed="true"] {
    border-color: #d18c65;
    background: rgba(209, 140, 101, 0.1);
    color: var(--section-ink);
  }

  .foundation-triad,
  .vedanta-branches {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
  }

  .foundation-triad > div {
    display: grid;
    min-height: 15rem;
    padding: 1.25rem;
    border: 1px solid var(--section-line);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.035);
    align-content: start;
    gap: 0.7rem;
  }

  .foundation-triad span { color: #e1a078; font-family: var(--font-deva); font-size: 1.25rem; }
  .foundation-triad strong { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; }
  .foundation-triad p { color: var(--section-muted); font-size: 0.72rem; }
  .vedanta-branches .related-card { min-height: 13rem; border-color: var(--section-line); background: rgba(255, 255, 255, 0.035); }
  .vedanta-branches .related-card p { color: var(--section-muted); }

  .compare-selector {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.55rem;
    padding: 0;
    border: 0;
  }

  .compare-selector__item {
    --school-color: var(--indigo);
    position: relative;
    display: grid;
    min-height: 6rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    grid-template-columns: auto 1fr;
    align-content: center;
    align-items: center;
    gap: 0.1rem 0.7rem;
    cursor: pointer;
    transition: border-color 180ms ease, background-color 180ms ease, transform 220ms var(--ease-out);
  }

  .compare-selector__item:hover {
    border-color: var(--school-color);
    transform: translateY(-0.15rem);
  }

  .compare-selector__item:has(input:checked) {
    border-color: var(--school-color);
    background: color-mix(in srgb, var(--school-color) 9%, var(--surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--school-color) 34%, transparent);
  }

  .compare-selector__item input {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    width: 1rem;
    height: 1rem;
    accent-color: var(--school-color);
  }

  .compare-selector__item > span {
    grid-row: 1 / 3;
    color: var(--school-color);
    font-family: var(--font-deva);
    font-size: 1.05rem;
  }

  .compare-selector__item strong { font-family: var(--font-display); font-size: 0.86rem; font-weight: 600; }
  .compare-selector__item small { color: var(--ink-muted); font-size: 0.55rem; }
  .form-message { min-height: 1.5rem; margin-top: 0.75rem; color: var(--vermilion); font-size: 0.72rem; }

  .comparison-caution,
  .classification-note,
  .uncertainty-panel,
  .review-standard {
    align-items: start;
    padding-inline: clamp(1.5rem, 5vw, 4rem);
    border: 1px solid var(--line-strong) !important;
    border-radius: var(--radius-xl);
    background: var(--surface);
  }

  .comparison-caution > div:first-child {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }

  .comparison-caution > div:first-child > span {
    color: var(--copper);
    font-size: 2rem;
  }

  .comparison-caution > p,
  .classification-note > div:last-child,
  .uncertainty-panel > p,
  .review-standard > ul { color: var(--ink-soft); }

  .visualizer-lab {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.3fr);
    gap: 1rem 3rem;
  }

  .visualizer-tabs {
    display: flex;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  .visualizer-tabs button {
    min-height: 2.7rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink-muted);
    font-size: 0.7rem;
    font-weight: 700;
  }

  .visualizer-tabs button:hover,
  .visualizer-tabs button[aria-selected="true"],
  .visualizer-tabs button.is-active {
    border-color: var(--indigo);
    background: var(--indigo);
    color: var(--paper-strong);
  }

  .visualizer-stage > .relation-model { display: block; }

  .visualizer-reading {
    display: grid;
    height: fit-content;
    padding: 1.35rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    gap: 0.9rem;
  }

  .visualizer-reading h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); }
  .visualizer-reading > p:not(.eyebrow) { color: var(--ink-soft); font-size: 0.8rem; }

  .relation-key__grid,
  .tattva-keys__grid,
  .progress-stats,
  .method-grid,
  .text-foundations {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .relation-key__grid > div,
  .tattva-keys__grid > div,
  .progress-stats > div,
  .method-grid > article,
  .text-foundations > article {
    display: grid;
    min-height: 11rem;
    padding: 1.2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    align-content: start;
    gap: 0.65rem;
  }

  .relation-key__grid p,
  .tattva-keys__grid p,
  .method-grid p,
  .text-foundations p { color: var(--ink-muted); font-size: 0.72rem; line-height: 1.6; }

  .relation-swatch {
    width: 3.5rem;
    height: 2px;
    background: var(--indigo);
  }

  .relation-swatch--difference { background: repeating-linear-gradient(90deg, var(--vermilion) 0 5px, transparent 5px 9px); }
  .relation-swatch--dependence { background: var(--copper); }
  .relation-swatch--identity { background: var(--indigo); box-shadow: 0 4px 0 var(--indigo-wash); }

  .tattva-key {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--indigo);
    box-shadow: 0 0 0 0.45rem var(--indigo-wash);
  }

  .tattva-key--nature { background: var(--copper); box-shadow: 0 0 0 0.45rem var(--copper-wash); }
  .tattva-key--freedom { background: var(--sage); box-shadow: 0 0 0 0.45rem color-mix(in srgb, var(--sage) 10%, transparent); }

  .concept-workbench {
    display: grid;
    grid-template-columns: minmax(12rem, 0.24fr) minmax(0, 0.76fr);
    align-items: start;
    gap: clamp(1rem, 4vw, 4rem);
  }

  .concept-index {
    position: sticky;
    top: calc(var(--header-height) + 1rem);
    display: grid;
    max-height: calc(100vh - var(--header-height) - 2rem);
    padding: 0.5rem;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    gap: 0.25rem;
    scrollbar-width: thin;
  }

  .concept-index button {
    display: grid;
    min-height: 3.7rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.05rem 0.65rem;
    color: var(--ink-soft);
    text-align: left;
  }

  .concept-index button:hover,
  .concept-index button.is-active,
  .concept-index button[aria-current="true"] {
    border-color: var(--line);
    background: var(--paper-strong);
    color: var(--ink);
  }

  .concept-index button > span { grid-row: 1 / 3; color: var(--copper); font-family: var(--font-deva); }
  .concept-index button strong { font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; }
  .concept-index button small { color: var(--ink-muted); font-size: 0.55rem; }

  .pramana-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .pramana-card {
    display: grid;
    min-height: 16rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    align-content: start;
    gap: 0.35rem;
  }

  .pramana-card > span { color: var(--copper); font-family: var(--font-deva); font-size: 1.25rem; }
  .pramana-card .iast { color: var(--ink-muted); font-family: var(--font-display); font-style: italic; }
  .pramana-card h3 { margin-top: 0.5rem; font-size: 1.35rem; }
  .pramana-card > p:last-child { margin-top: 0.5rem; color: var(--ink-soft); font-size: 0.74rem; }

  .mini-challenge {
    display: grid;
    margin-top: 2.5rem;
    padding: clamp(1.3rem, 4vw, 2.5rem);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--paper-strong);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
  }

  .mini-challenge h3 { max-width: 35ch; margin-top: 0.6rem; font-size: clamp(1.3rem, 2.4vw, 1.85rem); }
  .mini-challenge__answer { grid-column: 1 / -1; padding: 1rem; border-left: 2px solid var(--sage); background: color-mix(in srgb, var(--sage) 9%, transparent); }
  .mini-challenge__answer p { margin-top: 0.35rem; color: var(--ink-soft); font-size: 0.77rem; }

  .timeline-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    border: 0;
  }

  .timeline-filters legend {
    width: 100%;
    margin-bottom: 0.5rem;
    color: var(--ink-muted);
    font-size: 0.64rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .timeline-filters label {
    position: relative;
  }

  .timeline-filters input {
    position: absolute;
    opacity: 0;
  }

  .timeline-filters span {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink-muted);
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
  }

  .timeline-filters input:checked + span {
    border-color: var(--indigo);
    background: var(--indigo);
    color: var(--paper-strong);
  }

  .timeline-filters input:focus-visible + span { box-shadow: var(--ring); }

  .progress-stats {
    margin-top: 1.2rem;
  }

  .progress-stats > div {
    min-height: 7rem;
  }

  .progress-stats dt { color: var(--ink-muted); font-size: 0.62rem; }
  .progress-stats dd { font-family: var(--font-display); font-size: 2.5rem; line-height: 1; }

  .path-card > span {
    color: var(--copper);
    font-size: 0.58rem;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .text-foundations > article {
    min-height: 18rem;
  }

  .text-foundations span { color: var(--copper); font-family: var(--font-deva); font-size: 1.2rem; }
  .text-foundations h3 { margin-top: 0.5rem; font-size: 1.45rem; }
  .text-foundations small { margin-top: auto; padding-top: 0.7rem; border-top: 1px solid var(--line); color: var(--ink-muted); }

  .text-method ol {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    counter-reset: method;
    list-style: none;
  }

  .text-method li {
    min-height: 14rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-right: 0;
    counter-increment: method;
  }

  .text-method li:last-child { border-right: 1px solid var(--line); }
  .text-method li::before { display: block; margin-bottom: 1.5rem; color: var(--copper); content: "0" counter(method); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; }
  .text-method strong { font-family: var(--font-display); font-size: 1.2rem; font-weight: 550; }
  .text-method p { margin-top: 0.6rem; color: var(--ink-muted); font-size: 0.72rem; }

  .method-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .method-grid > article { min-height: 16rem; }
  .method-grid span { color: var(--copper); font-size: 0.62rem; font-weight: 800; }

  .source-ledger > article {
    display: grid;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    grid-template-columns: minmax(8rem, 0.18fr) minmax(0, 0.82fr) auto;
    align-items: start;
    gap: 0.4rem 2rem;
  }

  .source-ledger > article > span { grid-row: 1 / 4; color: var(--sage); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
  .source-ledger > article h3 { font-size: 1.2rem; }
  .source-ledger > article p { color: var(--ink-muted); font-size: 0.72rem; }
  .source-ledger > article a { grid-column: 3; grid-row: 1 / 4; align-self: center; border-bottom: 1px solid var(--line-strong); font-size: 0.7rem; }

  .review-standard ul {
    display: grid;
    gap: 0.7rem;
    list-style: none;
  }

  .review-standard li {
    position: relative;
    padding: 0.7rem 0 0.7rem 1.5rem;
    border-bottom: 1px solid var(--line);
  }

  .review-standard li::before { position: absolute; top: 0.72rem; left: 0; color: var(--sage); content: "✓"; }

  .search-result-list,
  .search-suggestions {
    display: grid;
    gap: 0.5rem;
  }

  .search-result__kind,
  .search-dialog__count {
    color: var(--copper);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .route-404 {
    display: grid;
    min-height: calc(100svh - var(--header-height));
    place-content: center;
    justify-items: center;
    padding-block: 5rem;
    gap: 1rem;
    text-align: center;
  }

  .route-404 h1 { max-width: 13ch; font-size: clamp(3rem, 8vw, 7rem); }
  .route-404 > p:not(.eyebrow, .route-404__mark) { max-width: 48ch; color: var(--ink-soft); }
  .route-404__mark { display: grid; width: 6rem; height: 6rem; place-items: center; border: 1px solid var(--copper); border-radius: 50%; color: var(--copper); font-family: var(--font-display); font-size: 3rem; }

  .graph-fallback ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
    list-style: none;
  }

  .graph-fallback li {
    min-height: 3.5rem;
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
  }

  .matrix-fallback { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
  .matrix-fallback table { width: 100%; min-width: 52rem; }
  .matrix-fallback th, .matrix-fallback td { padding: 1rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
  .matrix-fallback th { background: var(--surface-raised); font-size: 0.72rem; }
  .matrix-fallback td { color: var(--ink-soft); font-family: var(--font-display); font-size: 0.9rem; }
  .matrix-fallback th small { display: block; margin-top: 0.3rem; color: var(--ink-muted); font-weight: 400; }

  .relation-fallback {
    display: grid;
    min-height: 24rem;
    padding: 2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
    grid-template-columns: repeat(3, 1fr);
    place-items: center;
    gap: 1rem;
  }

  .relation-fallback > div { display: grid; width: 9rem; aspect-ratio: 1; place-content: center; padding: 1rem; border: 1px solid var(--copper); border-radius: 50%; text-align: center; }
  .relation-fallback > div span { color: var(--ink-muted); font-size: 0.63rem; }
  .relation-fallback ul { grid-column: 1 / -1; color: var(--ink-muted); font-size: 0.7rem; list-style: none; text-align: center; }

  .tree-fallback {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .tree-fallback section { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
  .tree-fallback section h3 { margin-bottom: 0.75rem; font-size: 1rem; }
  .tree-fallback details { border-top: 1px solid var(--line); }
  .tree-fallback summary { display: grid; min-height: 3rem; padding: 0.6rem 0; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5rem; font-size: 0.7rem; }
  .tree-fallback summary span { color: var(--copper); }
  .tree-fallback summary i { color: var(--ink-muted); font-family: var(--font-deva); font-style: normal; }
  .tree-fallback details p { padding: 0 0 0.8rem 1.4rem; color: var(--ink-muted); font-size: 0.68rem; }

  .timeline-fallback {
    display: grid;
    gap: 0;
    margin-top: 2rem;
    padding-left: 1.5rem;
    border-left: 1px solid var(--line-strong);
    list-style: none;
  }

  .timeline-fallback li { position: relative; display: grid; padding: 0 0 2.5rem 1.5rem; gap: 0.4rem; }
  .timeline-fallback li::before { position: absolute; top: 0.35rem; left: -1.88rem; width: 0.72rem; height: 0.72rem; border: 2px solid var(--paper); border-radius: 50%; background: var(--copper); box-shadow: 0 0 0 1px var(--copper); content: ""; }
  .timeline-fallback li > span { color: var(--copper); font-size: 0.62rem; font-weight: 800; text-transform: uppercase; }
  .timeline-fallback li h3 { font-size: 1.4rem; }
  .timeline-fallback li p { max-width: 64ch; color: var(--ink-soft); font-size: 0.78rem; }

  .lesson-fallback {
    display: grid;
    gap: 1rem;
  }

  .lesson-fallback > article {
    display: grid;
    min-height: 22rem;
    padding: clamp(1.3rem, 4vw, 2.5rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    align-content: start;
    gap: 1rem;
  }

  .lesson-fallback > article > p:not(.eyebrow) { max-width: 62ch; color: var(--ink-soft); }
  .lesson-fallback [data-reveal-root] { display: grid; margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); gap: 0.75rem; }
  .lesson-fallback [data-reveal-root] button { width: fit-content; min-height: 2.5rem; padding: 0.55rem 0.85rem; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; }
  .lesson-fallback [data-reveal-answer] { padding: 0.8rem; border-left: 2px solid var(--sage); background: color-mix(in srgb, var(--sage) 9%, transparent); }

  .mandala-fallback {
    display: grid;
    width: min(100%, 32rem);
    aspect-ratio: 1;
    place-items: center;
    margin-inline: auto;
    padding: 16%;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: repeating-conic-gradient(var(--line-faint) 0 1deg, transparent 1deg 40deg), radial-gradient(circle, var(--copper-wash), transparent 60%);
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }

  .mandala-fallback span { display: grid; width: 5rem; aspect-ratio: 1; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-raised); color: var(--ink-muted); font-size: 0.58rem; text-align: center; }
  .mandala-fallback span.is-lit { border-color: var(--saffron); box-shadow: 0 0 1.5rem color-mix(in srgb, var(--saffron) 23%, transparent); color: var(--ink); }
}

@layer responsive {
  @media (max-width: 72rem) {
    .home-hero { grid-template-columns: 1fr; }
    .home-hero__copy { width: min(100% - (2 * var(--gutter)), var(--content-wide)); }
    .hero-network { right: -12rem; width: min(42rem, 65vw); opacity: 0.42; }
    .home-hero h1 { font-size: clamp(5rem, 16vw, 10rem); }
    .compare-selector { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .related-grid, .path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .object-lab { grid-template-columns: minmax(0, 0.55fr) minmax(12rem, 0.45fr); }
    .object-lab__result { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .text-method ol, .method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .text-method li:nth-child(2) { border-right: 1px solid var(--line); }
    .text-method li:nth-child(n + 3) { border-top: 0; }
  }

  @media (max-width: 54rem) {
    .page-toolbar { align-items: flex-start; }
    .depth-control { align-items: flex-start; flex-direction: column; }
    .quiet-progress { min-width: 10rem; }
    .home-hero { min-height: max(42rem, calc(100svh - var(--header-height))); }
    .hero-network { top: 11%; right: -9rem; width: 32rem; opacity: 0.28; transform: none; }
    .home-hero__copy { padding-top: 15rem; align-self: end; }
    .home-hero__scroll { display: none; }
    .home-compare, .feature-split, .philosophy-evidence, .people-texts-grid, .classification-note, .comparison-caution, .review-standard, .progress-section, .home-debate, .mind-lab, .object-lab, .philosophy-hero, .one-text, .philosophy-intro, .misconception-panel, .misconception-panel--compact { grid-template-columns: 1fr; }
    .timeline-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .timeline-preview::before { display: none; }
    .timeline-preview__event { min-height: 15rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
    .timeline-preview__event::before { display: none; }
    .philosophy-hero { min-height: auto; }
    .philosophy-hero::before { top: 20%; right: -30%; width: 75vw; opacity: 0.45; }
    .philosophy-intro__folio { width: 6rem; }
    .inference-steps { grid-template-columns: 1fr; }
    .inference-steps li, .inference-steps li:first-child, .inference-steps li:last-child { min-height: auto; border: 1px solid var(--section-line); border-bottom: 0; border-radius: 0; }
    .inference-steps li:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
    .inference-steps li:last-child { border-bottom: 1px solid var(--section-line); border-radius: 0 0 var(--radius-md) var(--radius-md); }
    .mind-lab__visual { min-height: 29rem; }
    .compare-selector { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .visualizer-lab { grid-template-columns: 1fr; }
    .visualizer-tabs { grid-column: 1; }
    .relation-key__grid, .tattva-keys__grid, .progress-stats, .text-foundations { grid-template-columns: 1fr; }
    .concept-workbench { grid-template-columns: 1fr; }
    .concept-index { position: relative; top: auto; display: flex; max-height: none; overflow-x: auto; scroll-snap-type: x proximity; }
    .concept-index button { min-width: 10rem; scroll-snap-align: start; }
    .source-ledger > article { grid-template-columns: 1fr auto; }
    .source-ledger > article > span { grid-row: auto; }
    .source-ledger > article h3, .source-ledger > article p { grid-column: 1 / -1; }
    .source-ledger > article a { grid-column: 2; grid-row: 1; }
  }

  @media (max-width: 40rem) {
    .page-toolbar { display: grid; }
    .depth-control .segmented-control { width: 100%; }
    .depth-control .segmented-control button { flex: 1; }
    .quiet-progress { width: 100%; }
    .home-hero h1 { font-size: clamp(4.3rem, 23vw, 7rem); }
    .hero-network { right: -14rem; width: 30rem; }
    .hero-network__node { width: 4.8rem; }
    .hero-network__core { width: 6.5rem; }
    .route-hero { min-height: 34rem; }
    .route-hero h1 { font-size: clamp(3.6rem, 17vw, 5.8rem); }
    .route-hero::before { right: -42%; width: 90vw; opacity: 0.45; }
    .route-hero__index { display: none; }
    .philosophy-hero__title h1 { font-size: clamp(3.8rem, 18vw, 6.2rem); }
    .timeline-preview { grid-template-columns: 1fr; }
    .timeline-preview__event, .timeline-preview__event:first-child { border: 1px solid var(--line); border-bottom: 0; }
    .timeline-preview__event:last-child { border-bottom: 1px solid var(--line); }
    .home-debate__stage { min-height: 23rem; }
    .home-debate__claim { max-width: 92%; }
    .compare-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .compare-selector__item { min-height: 5.5rem; }
    .interpretation-lab__choices, .foundation-triad, .vedanta-branches, .pramana-gallery, .method-grid, .text-method ol, .object-lab__result, .tree-fallback, .graph-fallback ul { grid-template-columns: 1fr; }
    .text-method li, .text-method li:nth-child(2), .text-method li:nth-child(n + 3) { border: 1px solid var(--line); border-bottom: 0; }
    .text-method li:last-child { border-bottom: 1px solid var(--line); }
    .mini-challenge { grid-template-columns: 1fr; }
    .mini-challenge__answer { grid-column: 1; }
    .related-grid, .path-grid { grid-template-columns: 1fr; }
    .related-card, .path-card { min-height: 14rem; }
    .relation-fallback { grid-template-columns: 1fr; }
    .relation-fallback ul { grid-column: 1; }
    .mandala-fallback { padding: 12%; }
    .mandala-fallback span { width: 4rem; font-size: 0.5rem; }
  }
}