@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/playfair-display-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:700;font-display:swap;src:url(fonts/playfair-display-latin-700-italic.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/playfair-display-latin-400-normal.woff2) format("woff2")}
/* MIStatlE — quiet surfaces, one accent, typography first. */

:root {
  --bg: #fafaf9;
  --dot: #ecebe8;
  --surface: #ffffff;
  --surface-2: #f5f5f4;
  --ink: #1c1917;
  --ink-2: #57534e;
  --ink-3: #736e68;
  --ink-faint: #d6d3d1;
  --line: #e7e5e4;
  --line-strong: #d6d3d1;
  --brand: #1e3a8a;
  --brand-2: #2f55c8;
  --band: #1c1917;
  --band-ink: #fafaf9;
  --band-ink-2: #a8a29e;
  --selection: #dbe6ff;
  --shadow: 0 1px 2px rgb(28 25 23 / 0.04), 0 12px 32px -16px rgb(28 25 23 / 0.18);
  --shadow-lift: 0 2px 4px rgb(28 25 23 / 0.05), 0 22px 44px -18px rgb(30 58 138 / 0.28);

  --foundations: #3d4a8f; --foundations-bg: #eef0f7;
  --algorithms: #8f5a26;  --algorithms-bg: #f6f0e8;
  --systems: #2c6e62;     --systems-bg: #eaf3f0;
  --note: #a1620a;        --note-bg: #fdf5dc;

  --r-requires: #57534e; --r-derives: #57534e; --r-applies: #57534e; --r-extends: #57534e; --r-contrasts: #57534e;

  --hl-comment: #8a847e; --hl-keyword: #7a3b63; --hl-string: #2c6e62; --hl-number: #8f5a26; --hl-title: #1e3a8a;

  --display: "Playfair Display", Charter, "Bitstream Charter", "Iowan Old Style", Georgia, "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "Microsoft YaHei", serif;
  --sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --page: 70rem;
  --measure: 43rem;
  --r: 10px;
  --c: var(--brand);
  --c-bg: var(--surface-2);
  --area-0: #3d4a8f; --area-1: #2c6e7e; --area-2: #6a4c9c; --area-3: #8f5a26; --area-4: #b0533a; --area-5: #6b7a2c; --area-6: #2c6e62; --area-7: #a14a6e;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0f1115; --dot: #1e2128; --surface: #171a20; --surface-2: #1d2129;
  --ink: #f3f1ec; --ink-2: #b9b5ad; --ink-3: #8f8b93; --ink-faint: #3d414b;
  --line: #262a33; --line-strong: #343945;
  --brand: #9db8ff; --brand-2: #6d98ff;
  --band: #181b22; --band-ink: #f3f1ec; --band-ink-2: #9a968f;
  --selection: #2a3a66;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 32px -16px rgb(0 0 0 / 0.6);
  --shadow-lift: 0 2px 4px rgb(0 0 0 / 0.3), 0 22px 44px -18px rgb(80 120 255 / 0.3);
  --foundations: #aab4e6; --foundations-bg: #1a1d2e;
  --algorithms: #d9b48a;  --algorithms-bg: #262019;
  --systems: #8fcabb;     --systems-bg: #15231f;
  --note: #e6c274;        --note-bg: #2a2413;
  --r-requires: #b9b5ad; --r-derives: #b9b5ad; --r-applies: #b9b5ad; --r-extends: #b9b5ad; --r-contrasts: #b9b5ad;
  --hl-comment: #7d7982; --hl-keyword: #d6a3c4; --hl-string: #8fcabb; --hl-number: #d9b48a; --hl-title: #9db8ff;
  --area-0: #9aa6e6; --area-1: #7cc3d1; --area-2: #b9a0e8; --area-3: #d9a46c; --area-4: #ec9a80; --area-5: #b8c77a; --area-6: #7cc7b5; --area-7: #e79ab9;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1115; --dot: #1e2128; --surface: #171a20; --surface-2: #1d2129;
    --ink: #f3f1ec; --ink-2: #b9b5ad; --ink-3: #8f8b93; --ink-faint: #3d414b;
    --line: #262a33; --line-strong: #343945;
    --brand: #9db8ff; --brand-2: #6d98ff;
    --band: #181b22; --band-ink: #f3f1ec; --band-ink-2: #9a968f;
    --selection: #2a3a66;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 32px -16px rgb(0 0 0 / 0.6);
    --shadow-lift: 0 2px 4px rgb(0 0 0 / 0.3), 0 22px 44px -18px rgb(80 120 255 / 0.3);
    --foundations: #aab4e6; --foundations-bg: #1a1d2e;
    --algorithms: #d9b48a;  --algorithms-bg: #262019;
    --systems: #8fcabb;     --systems-bg: #15231f;
    --note: #e6c274;        --note-bg: #2a2413;
    --r-requires: #b9b5ad; --r-derives: #b9b5ad; --r-applies: #b9b5ad; --r-extends: #b9b5ad; --r-contrasts: #b9b5ad;
  --hl-comment: #7d7982; --hl-keyword: #d6a3c4; --hl-string: #8fcabb; --hl-number: #d9b48a; --hl-title: #9db8ff;
  --area-0: #9aa6e6; --area-1: #7cc3d1; --area-2: #b9a0e8; --area-3: #d9a46c; --area-4: #ec9a80; --area-5: #b8c77a; --area-6: #7cc7b5; --area-7: #e79ab9;
    color-scheme: dark;
  }
}

.t-foundations { --c: var(--foundations); --c-bg: var(--foundations-bg); }
.t-algorithms { --c: var(--algorithms); --c-bg: var(--algorithms-bg); }
.t-systems { --c: var(--systems); --c-bg: var(--systems-bg); }
/* one colour per subject, for the knowledge map, where subjects overlap */
.a-0 { --c: var(--area-0); } .a-1 { --c: var(--area-1); } .a-2 { --c: var(--area-2); } .a-3 { --c: var(--area-3); }
.a-4 { --c: var(--area-4); } .a-5 { --c: var(--area-5); } .a-6 { --c: var(--area-6); } .a-7 { --c: var(--area-7); }
[class*=" a-"], [class^="a-"] { --c-bg: color-mix(in srgb, var(--c) 9%, var(--surface)); }
.t-floor { --c: var(--ink-3); --c-bg: var(--surface-2); }
.r-requires { --r: var(--r-requires); }
.r-derives { --r: var(--r-derives); }
.r-applies { --r: var(--r-applies); }
.r-extends { --r: var(--r-extends); }
.r-contrasts { --r: var(--r-contrasts); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-autospace: normal;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}
main { flex: 1; width: 100%; }
::selection { background: var(--selection); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.3; margin: 0; text-wrap: pretty; }
.article-head h1, .page-head h1 { text-wrap: balance; }
p, ul, ol { margin: 0; }
img { max-width: 100%; height: auto; }
b { font-weight: inherit; }
[hidden] { display: none !important; }

.wrap { max-width: var(--page); margin-inline: auto; padding-inline: 1.5rem; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--bg); padding: 0.4rem 0.8rem; z-index: 10; font-size: 0.85rem; border-radius: 6px; }
.skip:focus { left: 1rem; top: 1rem; }

.eyebrow, .label { font: 500 0.7rem/1.4 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand); }

/* Cross-page fades where the browser supports them. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.18s; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- chips, cards, icons ---------- */

.chip { display: inline-flex; align-items: center; gap: 0.45em; font-size: 0.78rem; font-weight: 600; line-height: 1; color: var(--c); white-space: nowrap; }
.chip i, .filter i { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--c); flex: none; }
.kind { font: 500 0.7rem var(--mono); letter-spacing: 0.08em; color: var(--ink-3); white-space: nowrap; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); transition: transform 0.2s ease, box-shadow 0.2s, border-color 0.2s; }
a.card { display: flex; flex-direction: column; text-decoration: none; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--c) 40%, var(--line)); }
.go b, .more b, .btn b, .entries b, .to-map b { display: inline-block; transition: transform 0.2s; }
a:hover > .go b, a:hover .card-foot .go b, .more:hover b, .btn:hover b, .entries a:hover b, .to-map a:hover b { transform: translateX(4px); }

.glyph-badge { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--c); font: italic 700 1.3rem/1 var(--display); }


.socials { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.9rem; }
.social { position: relative; display: block; text-decoration: none; transition: transform 0.25s ease; }
.social .badge { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); transition: color 0.2s, border-color 0.2s, box-shadow 0.2s, background-color 0.2s; }
.social .tip { position: absolute; left: 50%; top: calc(100% + 0.45rem); transform: translateX(-50%); font: 500 0.62rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
a.social:hover, a.social:focus-visible { transform: translateY(-2px); }
a.social:hover .badge, a.social:focus-visible .badge { color: var(--c); border-color: var(--c); }
.social:hover .tip, .social:focus-visible .tip { opacity: 1; }
.social.is-off { opacity: 0.55; }
:root[data-theme="dark"] .social { --c: var(--brand) !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .social { --c: var(--brand) !important; } }

/* ---------- header / footer ---------- */

.site-header { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4.25rem; }
.brand { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; font: 700 1.12rem/1 var(--sans); letter-spacing: -0.02em; color: var(--ink); }

.mark { flex: none; border-radius: 9px; }

.nav { display: flex; align-items: center; gap: 0.15rem; font-size: 0.92rem; font-weight: 500; margin-left: auto; }
.tools { display: flex; align-items: center; gap: 0.5rem; }
.lang-switch { display: inline-flex; align-items: center; gap: 0.35rem; height: 2.3rem; padding: 0 0.8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 0.8rem; font-weight: 600; text-decoration: none; transition: color 0.2s, border-color 0.2s, transform 0.3s ease; }
.lang-switch:hover { color: var(--ink); border-color: var(--ink-3); }
.nav a { text-decoration: none; padding: 0.4rem 0.8rem; color: var(--ink-3); white-space: nowrap; transition: color 0.2s; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); }
.search-open { display: inline-flex; align-items: center; gap: 0.5rem; height: 2.3rem; padding: 0 0.7rem 0 0.75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-3); font: 500 0.8rem var(--sans); cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.search-open:hover { color: var(--ink); border-color: var(--ink-3); }
.search-open kbd { font: 500 0.68rem var(--mono); color: var(--ink-3); border: 1px solid var(--line); border-radius: 5px; padding: 0.05rem 0.35rem; }
.theme-toggle { position: relative; width: 2.3rem; height: 2.3rem; background: var(--surface); border: 1px solid var(--line); border-radius: 50%; color: var(--ink-2); cursor: pointer; overflow: hidden; transition: color 0.2s, border-color 0.2s, transform 0.3s ease; }
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-3); }
.theme-toggle span { position: absolute; inset: 0; display: grid; place-items: center; transition: transform 0.35s ease, opacity 0.25s; }
.i-moon { transform: translateY(110%); opacity: 0; }
:root[data-theme="dark"] .i-sun { transform: translateY(-110%); opacity: 0; }
:root[data-theme="dark"] .i-moon { transform: none; opacity: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .i-sun { transform: translateY(-110%); opacity: 0; }
  :root:not([data-theme="light"]) .i-moon { transform: none; opacity: 1; }
}
.progress { position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--foundations), var(--brand-2), var(--systems), var(--algorithms)); }

.site-footer { margin-top: 6rem; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 70%, transparent); font-size: 0.82rem; color: var(--ink-3); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; padding-block: 2rem 2.75rem; }
.footer-name { font: 700 1.05rem var(--display); color: var(--ink); margin-bottom: 0.15rem; }
.site-footer .social .badge { width: 2.3rem; height: 2.3rem; }
.site-footer .socials { gap: 0.6rem; }

/* ---------- home: cover ---------- */

.hero { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 78vh; padding: 6rem 0 5rem; animation: rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-glyph { position: absolute; font: 400 11rem/1 var(--display); pointer-events: none; user-select: none; opacity: 0.05; }
.hero-glyph.g1 { right: 1rem; top: 4rem; color: var(--brand); }
.hero-glyph.g2 { left: 64%; bottom: 11rem; font-size: 10rem; color: var(--ink); }
.pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.4rem 1rem; margin-bottom: 2rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); font: 0.72rem var(--mono); letter-spacing: 0.18em; color: var(--ink-3); }
.pill i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--brand-2); }
.hero h1 { font: 700 clamp(3rem, 9.2vw, 6rem) / 1.05 var(--display); letter-spacing: -0.025em; max-width: 64rem; margin-bottom: 2rem; }
.hero h1 .dim { color: var(--ink-faint); transition: color 0.4s; }

.hero h1 em, .page-head h1 em { font-style: italic; color: var(--brand); }
.hero-statement { max-width: 48rem; font-size: clamp(1.1rem, 2.2vw, 1.5rem); line-height: 1.65; color: var(--ink-2); margin-bottom: 1.5rem; }
.triad { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; font: 0.7rem var(--mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3.5rem; }
.triad i { font-style: normal; color: var(--ink-faint); }

.cta { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-bottom: 4rem; }
.btn { display: inline-flex; align-items: center; gap: 0.75rem; padding: 1rem 2rem; border: 1px solid var(--line-strong); border-radius: 3px; background: color-mix(in srgb, var(--surface) 60%, transparent); color: var(--ink-2); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; text-decoration: none; transition: background-color 0.25s, color 0.25s, border-color 0.25s; }
.btn:hover { border-color: var(--ink); color: var(--ink); }
.btn-solid { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn-solid:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.elsewhere { display: flex; align-items: center; gap: 1.5rem; border-top: 1px solid var(--line); padding-top: 2rem; padding-bottom: 1.2rem; }
.elsewhere .label { color: var(--ink-3); letter-spacing: 0.1em; font-size: 0.72rem; }
.hero-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; margin-top: 1.25rem; font: 0.72rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }

.principles { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--band); color: var(--band-ink); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); padding: 3.75rem 0; margin-bottom: 5.5rem; }
.principles > div { padding-inline: 2rem; border-left: 1px solid rgb(255 255 255 / 0.1); }
.principles > div:first-child { padding-left: 0; border-left: 0; }
.principles .label { margin-bottom: 1rem; color: #9db8ff; }

.principles h2 { font: 700 1.5rem/1.3 var(--display); margin-bottom: 0.75rem; }
.principles p:last-child { font-size: 0.9rem; line-height: 1.75; color: var(--band-ink-2); }

/* ---------- sections, note + topic cards ---------- */

.sec { margin-bottom: 5.5rem; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; }
.sec-head h2 { display: flex; align-items: center; gap: 0.8rem; font: 700 clamp(1.7rem, 4vw, 2.2rem) / 1.2 var(--display); margin-top: 0.45rem; }
.more { font-size: 0.85rem; font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap; padding-bottom: 0.35rem; }
.more:hover { color: var(--brand-2); }

.note-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.note-card { position: relative; padding: 1.5rem 1.6rem 1.3rem; gap: 0.7rem; overflow: hidden; }

.card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.note-card strong { font: 700 1.3rem/1.45 var(--display); transition: color 0.2s; }
.note-card:hover strong { color: var(--brand); }
.desc { font-size: 0.92rem; line-height: 1.7; color: var(--ink-2); }
.note-card .desc { flex: 1; }
.card-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed var(--line); padding-top: 0.85rem; margin-top: 0.3rem; font: 0.72rem var(--mono); letter-spacing: 0.06em; color: var(--ink-3); }

.go { font: 600 0.82rem var(--sans); letter-spacing: 0; color: var(--ink-2); }
.note-card:hover .go { color: var(--brand); }

.topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.topic-card { display: flex; flex-direction: column; padding: 1.6rem; }
.topic-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--c) 40%, var(--line)); }
.topic-name small { font: 500 0.7rem var(--mono); color: var(--ink-3); margin-left: 0.6em; }
.topic-name { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; color: var(--c); }
.topic-card .glyph-badge { margin-bottom: 1.25rem; }
.topic-card h3 { font: 700 1.25rem/1.5 var(--display); margin: 0.4rem 0 0.6rem; }
.topic-card .desc { flex: 1; }
.entries { list-style: none; padding: 0; margin-top: 1.1rem; border-top: 1px dashed var(--line); }
.entries a { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; padding: 0.65rem 0; border-bottom: 1px dashed var(--line); font-size: 0.92rem; font-weight: 600; line-height: 1.5; text-decoration: none; }
.entries li:last-child a { border-bottom: 0; padding-bottom: 0; }
.entries a:hover { color: var(--c); }
.entries b { color: var(--c); }

/* ---------- list pages ---------- */

.page-head { padding: 5rem 0 3rem; max-width: 46rem; animation: rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.page-head h1 { font: 700 clamp(2.4rem, 6.5vw, 3.6rem) / 1.15 var(--display); letter-spacing: -0.015em; margin-top: 0.8rem; }
.lede { font-size: 1.12rem; line-height: 1.8; color: var(--ink-2); margin-top: 1rem; }
.lede a { color: var(--brand-2); font-weight: 600; }

/* notes list: search, three views, one row of subjects */
.subjects { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.facet { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.42rem 0.85rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font: 600 0.86rem/1.3 var(--sans); color: var(--ink-2); cursor: pointer; transition: border-color 0.15s, color 0.15s, background-color 0.15s; }
.facet i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--c); }
.facet small { font: 500 0.68rem var(--mono); color: var(--ink-3); }
.facet:hover { border-color: var(--ink-3); color: var(--ink); }
.facet.is-empty { color: var(--ink-3); font-weight: 500; }
.facet.is-empty i { background: var(--ink-faint); }
.facet[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.facet[aria-pressed="true"] small { color: inherit; opacity: 0.75; }
.facet[aria-pressed="true"] i { background: currentColor; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.search { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 16rem; padding: 0 0.9rem; height: 2.75rem; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; color: var(--ink-3); box-shadow: var(--shadow); transition: border-color 0.2s; }
.search:focus-within { border-color: var(--ink); color: var(--ink); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 0.92rem; color: var(--ink); }
.search input::placeholder { color: var(--ink-3); }
.search kbd { font: 500 0.7rem var(--mono); color: var(--ink-3); border: 1px solid var(--line); border-radius: 6px; padding: 0.1rem 0.45rem; }
.search:focus-within kbd { display: none; }
.views { margin-left: auto; display: inline-flex; padding: 3px; background: var(--surface-2); border-radius: 8px; }
.view { font: 600 0.82rem var(--sans); color: var(--ink-2); background: none; border: 0; border-radius: 6px; padding: 0.4rem 0.9rem; cursor: pointer; transition: all 0.2s; }
.view[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); }
.result-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; min-height: 2rem; margin-bottom: 1.25rem; font: 500 0.74rem var(--mono); letter-spacing: 0.06em; color: var(--ink-3); }


#clear-filters { font: 600 0.74rem var(--sans); color: var(--ink-3); background: none; border: 0; cursor: pointer; padding: 0.25rem 0.3rem; }
#clear-filters:hover { color: var(--brand-2); }
.groups { display: grid; gap: 3rem; }
.group { scroll-margin-top: 6rem; padding-top: 1.5rem; border-top: 1px solid var(--ink); }
.group .note-grid, #view-time .note-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.group .glyph-badge { background: var(--surface); }
.group-head { display: flex; gap: 0.9rem; align-items: center; margin-bottom: 1.25rem; }
.group-head h2 { font: 700 clamp(1.3rem, 2.8vw, 1.6rem) / 1.3 var(--display); }
.group-head small { font: 500 0.74rem var(--mono); color: var(--ink-3); }
.groups .note-card .chip, .groups .paper .chip { display: none; }
.group .paper-list { margin-top: 1rem; }
.group .note-grid + .paper-list { margin-top: 1.25rem; }
.empty { text-align: center; color: var(--ink-3); padding: 3rem 0; }

/* knowledge map: tilted planes, raised cards, typed relations */
.is-wide .wrap { max-width: 80rem; }
.sec-wide { margin-inline: calc((100% - min(77rem, 100vw - 3rem)) / 2); }
.kmap { position: relative; margin: 0; padding: 1rem 1rem 0; overflow: hidden; }
.kmap-scroll { overflow-x: auto; padding-bottom: 0.25rem; }
.kmap-svg { display: block; width: 100%; height: auto; margin-inline: auto; font-family: var(--sans); }
.map-lane .ground { fill: #000; opacity: 0.1; }
.map-lane .g0 { stop-color: color-mix(in srgb, var(--c-bg) 88%, var(--c) 12%); }
.map-lane .g1 { stop-color: color-mix(in srgb, var(--c-bg) 35%, var(--surface)); }
.map-lane .plane { stroke: color-mix(in srgb, var(--c) 22%, transparent); stroke-width: 1; }
.map-lane .slab { fill: color-mix(in srgb, var(--c) 34%, var(--surface)); }
.map-lane .slab.side { fill: color-mix(in srgb, var(--c) 48%, var(--surface)); }
.map-lane .rim { fill: none; stroke: color-mix(in srgb, var(--surface) 80%, transparent); stroke-width: 1.2; }
.map-lane .dot { fill: var(--c); opacity: 0.22; }

.lane-floor { font: 700 25px var(--display); letter-spacing: 0.04em; fill: color-mix(in srgb, var(--c) 46%, transparent); pointer-events: none; }
.lane-floor .glyph { font-family: var(--mono); font-weight: 500; fill: color-mix(in srgb, var(--c) 70%, transparent); }

.map-edge { transition: opacity 0.2s; }
/* A link takes the colour of its plane; one that crosses planes fades from one colour into the other. */
.map-edge path { fill: none; stroke-linecap: round; }
.map-edge .line { stroke: var(--edge, color-mix(in srgb, var(--c) 72%, var(--ink-2))); stroke-width: 1.4; opacity: 0.9; transition: stroke-width 0.2s, opacity 0.2s; }
.map-edge .case { stroke: var(--surface); stroke-width: 4.5; opacity: 0.55; }
.map-edge .head { fill: color-mix(in srgb, var(--c) 78%, var(--ink-2)); transition: fill 0.2s; }
.edge-grad stop { stop-color: color-mix(in srgb, var(--c) 78%, var(--ink-2)); }
.map-edge.r-derives .line { stroke-width: 2.3; }
.map-edge.r-applies .line { stroke-dasharray: 6 4; }
.map-edge.r-extends .line { stroke-dasharray: 0.5 4.5; stroke-width: 2; }
.map-edge.r-contrasts .line { stroke-dasharray: 9 3 1.5 3; }
.edge-label rect { fill: var(--surface); stroke: color-mix(in srgb, var(--c) 26%, var(--line)); stroke-width: 1; filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.08)); }
.edge-label text { font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; fill: var(--ink-2); }
.map-edge .hit { stroke: transparent; stroke-width: 16; cursor: help; }

/* big map: one floor, every subject a region painted on it; regions overlap where subjects share concepts */
.region-fill { opacity: 0.075; transition: opacity 0.25s; }
.region-fill *, .region-ring * { fill: var(--c); stroke: var(--c); stroke-linecap: round; }
.region-ring { opacity: 0.6; transition: opacity 0.25s; }
.kmap-big .map-edge:not(.is-on) { opacity: 0; pointer-events: none; }
.type-key .k-flow { width: 1.7rem; height: 0; border: 0; border-top: 1.6px dashed var(--ink-3); border-radius: 0; }
/* subject names: small upright tags */
.region-name { cursor: pointer; text-decoration: none; }
.region-name rect { fill: var(--surface); stroke: color-mix(in srgb, var(--c) 50%, var(--line)); stroke-width: 1; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.08)); transition: fill 0.2s, stroke 0.2s; }
.region-name circle { fill: var(--c); }
.region-name .region-title { font: 650 14px var(--sans); fill: var(--ink); }
.region-name .region-count { font: 500 11px var(--mono); fill: var(--c); }
a.region-name:hover rect, a.region-name:focus-visible rect { stroke: var(--c); stroke-width: 1.6; }
.region-name.is-empty { cursor: default; }
.region-name.is-empty rect { fill: color-mix(in srgb, var(--surface) 70%, transparent); stroke-dasharray: 3 3; }
.region-name.is-empty circle { fill: none; stroke: var(--ink-3); stroke-width: 1.2; }
.region-name.is-empty .region-title, .region-name.is-empty .region-count { fill: var(--ink-3); font-weight: 500; }
.kmap-svg.is-area .region-name:not(.is-on) { opacity: 0.35; }
.floor-track { font: 500 13px var(--mono); letter-spacing: 0.08em; fill: var(--ink-3); opacity: 0.6; }
.kmap-svg.is-area .region-fill:not(.is-on) { opacity: 0.05; }
.kmap-svg.is-area .region-ring:not(.is-on) { opacity: 0.15; }
.kmap-svg.is-area .region-fill.is-on { opacity: 0.26; }
.kmap-svg.is-filter .region-fill:not(.is-match), .kmap-svg.is-filter .region-ring:not(.is-match) { opacity: 0.06; }
.labels-hover .map-edge:not(.is-on) .edge-label { opacity: 0; }
.labels-hover .map-edge .edge-label { transition: opacity 0.2s; }
.map-node .bead { fill: var(--c); stroke: var(--surface); stroke-width: 1.6; }
.type-key .bead { fill: var(--c); }
.type-key .k-regions { width: 1.9rem; height: 0.9rem; border: 0; border-radius: 50%; background: radial-gradient(circle at 35% 50%, color-mix(in srgb, var(--area-0) 30%, transparent) 55%, transparent 56%), radial-gradient(circle at 65% 50%, color-mix(in srgb, var(--area-7) 30%, transparent) 55%, transparent 56%); }
.panel-areas { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.panel-areas a { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 600; color: var(--ink-2); text-decoration: none; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.12rem 0.6rem; background: var(--surface); }
.panel-areas a i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--c); }
.panel-areas a:hover { border-color: var(--c); color: var(--ink); }

/* course map: the floor carries order (a rail) and chapters (regions); doors lead to other subjects */
.map-rail .rail-line { fill: none; stroke: color-mix(in srgb, var(--c) 55%, transparent); stroke-width: 3; stroke-linecap: round; }
.map-rail .rail-head { fill: color-mix(in srgb, var(--c) 55%, transparent); }
.map-rail .rail-tie { fill: none; stroke: color-mix(in srgb, var(--c) 42%, transparent); stroke-width: 1.6; stroke-dasharray: 2 5; stroke-linecap: round; }
.map-rail .rail-stop { fill: var(--surface); stroke: color-mix(in srgb, var(--c) 70%, var(--surface)); stroke-width: 2.4; }
.map-rail .rail-step { font: 700 14px var(--mono); fill: color-mix(in srgb, var(--c) 85%, var(--ink)); }
.map-rail .rail-name { font: 500 14px var(--sans); letter-spacing: 0.12em; fill: color-mix(in srgb, var(--c) 62%, transparent); }
.map-region rect { fill: color-mix(in srgb, var(--c) 9%, transparent); stroke: color-mix(in srgb, var(--c) 48%, transparent); stroke-width: 1.6; stroke-dasharray: 7 6; }
.map-region text { font: 700 17px var(--display); letter-spacing: 0.03em; fill: color-mix(in srgb, var(--c) 72%, var(--ink-3)); paint-order: stroke; stroke: color-mix(in srgb, var(--c-bg) 80%, var(--surface)); stroke-width: 6px; stroke-linejoin: round; }
.map-port { cursor: pointer; text-decoration: none; transition: opacity 0.2s; }
.map-port rect { fill: color-mix(in srgb, var(--c) 12%, var(--surface)); stroke: color-mix(in srgb, var(--c) 55%, var(--line)); stroke-width: 1; transition: fill 0.2s, stroke 0.2s; }
.map-port text { font-size: 10.5px; font-weight: 600; fill: color-mix(in srgb, var(--c) 78%, var(--ink)); }
a.map-port:hover rect, a.map-port:focus-visible rect { fill: var(--c); stroke: var(--c); }
a.map-port:hover text, a.map-port:focus-visible text { fill: var(--surface); }
.map-port.is-more { cursor: default; }
.port-stem { fill: none; stroke: color-mix(in srgb, var(--c) 50%, var(--line-strong)); stroke-width: 1.2; transition: opacity 0.2s; }
.kmap-svg.is-focus .map-port:not(.is-on), .kmap-svg.is-focus .port-stem:not(.is-on) { opacity: 0.2; }
.type-key .k-rail { width: 1.7rem; height: 0; border: 0; border-top: 3px solid var(--ink-3); border-radius: 2px; position: relative; }
.type-key .k-rail::after { content: ""; position: absolute; left: 0.55rem; top: -6px; width: 6px; height: 6px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink-3); }
.type-key .k-region { border: 1.5px dashed var(--ink-3); border-radius: 6px; background: var(--surface-2); }
.type-key .k-port { width: 1.5rem; height: 0.7rem; border: 1px solid var(--ink-3); border-radius: 3px; background: var(--surface-2); }
.kmap-course .legend-row .rel-toggle:first-of-type { margin-left: 0.4rem; }

/* a subject's own page */
.course-head { padding-bottom: 2rem; }
.course-head .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; font-size: 0.85rem; margin-bottom: 1.1rem; }
.course-head .crumbs a { color: var(--ink-2); font-weight: 600; text-decoration: none; }
.course-head .crumbs a:hover { color: var(--brand-2); }
.course-nav { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px dashed var(--line); }
.course-nav p + p { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.chip-link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.8rem; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 0.88rem; font-weight: 600; text-decoration: none; transition: border-color 0.2s, transform 0.2s; }
.chip-link i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c); }
.chip-link small { font: 500 0.7rem var(--mono); color: var(--ink-3); }
.chip-link:hover { border-color: var(--c); transform: translateY(-1px); }
.map-edge.is-off { display: none; }
.zone-line { fill: none; stroke: color-mix(in srgb, var(--c) 30%, transparent); stroke-width: 1; stroke-dasharray: 3 4; }
.zone-tick { stroke: var(--c); stroke-width: 1.2; }
.zone-label { cursor: pointer; text-decoration: none; }
.zone-name { paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.zone-name { font: 700 14px var(--display); fill: var(--ink); transition: fill 0.2s; }
.zone-count { font: 500 9px var(--mono); letter-spacing: 0.08em; fill: var(--c); }
.zone-label:hover .zone-name, .zone-label:focus-visible .zone-name, .zone-label.is-current .zone-name { fill: var(--c); text-decoration: underline; }
.zone-label.is-empty .zone-name { fill: var(--ink-3); font-weight: 500; }
.zone-label.is-empty .zone-count, .zone-label.is-empty .zone-tick { fill: var(--ink-3); stroke: var(--ink-faint); }
.kmap-tip { position: absolute; z-index: 6; max-width: 20rem; padding: 0.65rem 0.85rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lift); font-size: 0.82rem; line-height: 1.55; color: var(--ink-2); pointer-events: none; }
.kmap-tip b { display: block; color: var(--ink); font-weight: 650; }
.kmap-tip i { font-style: normal; font-size: 0.68rem; font-weight: 600; color: var(--brand-2); border: 1px solid currentColor; border-radius: 4px; padding: 0.05em 0.45em; margin-left: 0.5em; vertical-align: 0.1em; }

.map-node { cursor: pointer; outline: none; transition: opacity 0.2s; }
.map-node .foot { fill: var(--c); opacity: 0.16; transition: opacity 0.25s; }
.map-node .stem { stroke: var(--c); stroke-width: 1; opacity: 0.45; }
.card3d { filter: drop-shadow(0 5px 6px rgb(0 0 0 / 0.1)); transition: transform 0.25s ease, filter 0.25s; }
.map-node .face { fill: var(--surface); stroke: color-mix(in srgb, var(--c) 30%, var(--line)); stroke-width: 1; transition: fill 0.2s, stroke 0.2s; }
.map-node .badge { fill: none; stroke: var(--ink-faint); stroke-width: 1; transition: fill 0.2s, stroke 0.2s; }
.map-node .ty { fill: none; stroke: var(--ink-3); stroke-width: 1.7; stroke-linejoin: round; transition: fill 0.2s, stroke 0.2s; }
.map-node text { font-size: 12px; font-weight: 500; fill: var(--ink-3); transition: fill 0.2s; }
.map-node.is-planned .card3d { filter: none; }
.map-node.is-planned .face { fill: color-mix(in srgb, var(--surface) 80%, transparent); stroke: color-mix(in srgb, var(--c) 34%, var(--line-strong)); stroke-dasharray: 4 3; }
.map-node.is-written .face { stroke: color-mix(in srgb, var(--c) 70%, var(--line)); stroke-width: 1.2; }
.map-node.is-written .badge { fill: var(--c); stroke: var(--c); }
.map-node.is-written .ty { fill: var(--surface); stroke: var(--surface); }
.map-node.is-written text { fill: var(--ink); font-weight: 650; }
.map-node.is-written .foot { opacity: 0.3; }
.map-node:hover .card3d, .map-node:focus-visible .card3d, .map-node.is-selected .card3d { transform: translateY(-4px); filter: drop-shadow(0 10px 10px rgb(0 0 0 / 0.14)); }
.map-node:hover .face { stroke: var(--c); }
.map-node:focus-visible .face { stroke: var(--brand-2); stroke-width: 2; }
.map-node.is-selected .face { fill: var(--c); stroke: var(--c); }
.map-node.is-selected text { fill: var(--surface); font-weight: 650; }
.map-node.is-selected .badge { fill: var(--surface); stroke: var(--surface); }
.map-node.is-selected .ty { fill: var(--c); stroke: var(--c); }
.kmap-svg.is-focus .map-node:not(.is-on), .kmap-svg.is-focus .map-edge:not(.is-on) { opacity: 0.2; }
.kmap-svg.is-focus .map-node.is-path:not(.is-on), .kmap-svg.is-focus .map-edge.is-path:not(.is-on) { opacity: 0.72; }
.map-edge.is-on .line { opacity: 1; stroke-width: 2.6; }
.map-edge.is-on.r-extends .line { stroke-width: 2.8; }
.map-edge.is-on .case { opacity: 0.9; stroke-width: 6; }
.map-edge.is-on .edge-label rect { stroke: color-mix(in srgb, var(--c) 80%, var(--ink-2)); stroke-width: 1.4; }
.map-edge.is-on .edge-label text { fill: var(--ink); }
.map-node.is-path .foot { opacity: 0.42; }

/* The map assembles itself once: planes rise, then links and cards settle. */
@media (prefers-reduced-motion: no-preference) {
  .map-lane { animation: kmap-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
  .map-lane:nth-of-type(2) { animation-delay: 0.08s; }
  .map-lane:nth-of-type(3) { animation-delay: 0.16s; }
  .map-lane:nth-of-type(4) { animation-delay: 0.24s; }
  .map-lane:nth-of-type(n + 5) { animation-delay: 0.32s; }
  .kmap-svg .edges { animation: kmap-fade 0.5s ease 0.5s backwards; }
  .kmap-svg .ports { animation: kmap-fade 0.5s ease 0.6s backwards; }
  .kmap-svg .zone-label { animation: kmap-fade 0.5s ease 0.35s backwards; }
  .map-node { animation: kmap-drop 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s backwards; }
}
@keyframes kmap-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes kmap-fade { from { opacity: 0; } }
@keyframes kmap-drop { from { opacity: 0; transform: translateY(-10px); } }

.kmap-legend { display: grid; gap: 0.6rem; padding: 0.9rem 0.6rem 1rem; border-top: 1px dashed var(--line); font-size: 0.8rem; color: var(--ink-3); }
.legend-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.9rem; }
.legend-name { font: 500 0.66rem var(--mono); letter-spacing: 0.2em; text-transform: uppercase; min-width: 3.2rem; }
.rel-toggle { display: inline-flex; align-items: center; gap: 0.45rem; font: 600 0.76rem var(--sans); color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0.28rem 0.7rem; cursor: pointer; transition: opacity 0.2s; }
.rel-toggle i { width: 1.6rem; height: 0; border-top: 1.5px solid var(--ink-2); }
.rel-toggle.r-derives i { border-top-width: 3px; }
.rel-toggle.r-applies i, .rel-toggle.r-contrasts i { border-top-style: dashed; }
.rel-toggle.r-extends i { border-top-style: dotted; border-top-width: 2.5px; }
.rel-toggle:hover { border-color: var(--ink-3); }
.rel-toggle[aria-pressed="false"] { opacity: 0.4; text-decoration: line-through; }
.type-key { display: inline-flex; align-items: center; gap: 0.4rem; }
.type-key svg .ty { fill: var(--ink-3); stroke: var(--ink-3); stroke-width: 1.6; }
.type-key i { width: 1.4rem; height: 0.75rem; border-radius: 4px; border: 1.5px solid var(--ink-2); }
.type-key .k-planned { border: 1.5px dashed var(--line-strong); }
.swipe { display: none; }
.flow-key { margin-left: auto; font-size: 0.76rem; color: var(--ink-3); white-space: nowrap; }
.kmap .count { margin-left: auto; font: 500 0.72rem var(--mono); letter-spacing: 0.08em; color: var(--ink-2); }

.kmap-outline { display: none; padding: 0.5rem 0.4rem 1rem; }
.outline-hint { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.8rem; color: var(--ink-3); margin-bottom: 1rem; }
.outline-hint span { font: 500 0.72rem var(--mono); white-space: nowrap; }
.kmap-outline section + section { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
.kmap-outline h3 { display: flex; align-items: center; gap: 0.5rem; font: 700 1.05rem var(--display); margin-bottom: 0.6rem; }
.kmap-outline h3 i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c); }
.kmap-outline h3 small { font: 500 0.7rem var(--mono); color: var(--c); }
.kmap-outline h3 a { color: inherit; text-decoration: none; }
.kmap-outline h3 a::after { content: " →"; color: var(--c); }
.kmap-outline p { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ochip { font: 500 0.88rem/1.3 var(--sans); padding: 0.55rem 0.85rem; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-3); cursor: pointer; text-align: left; }
.ochip.is-written { border-color: var(--c); color: var(--ink); font-weight: 650; box-shadow: var(--shadow); }
.ochip.is-selected { background: var(--c); border-color: var(--c); color: var(--bg); }
a.ochip { display: inline-flex; align-items: baseline; gap: 0.5rem; text-decoration: none; }
.ochip small { font: 500 0.7rem var(--mono); color: var(--c); }
.ochip.is-empty { border-style: dashed; cursor: default; }
.katex-display.is-scroll { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.prose .overview { margin-top: 2.75rem; }
.stats { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.9rem; }
.stats li { margin: 0 !important; }
.stats a { display: block; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink-2) !important; font-size: 0.82rem; line-height: 1.4; text-decoration: none !important; transition: border-color 0.2s, transform 0.2s; }
.stats a:hover { border-color: var(--ink-3); transform: translateY(-2px); }
.stats b { display: block; font: 700 1.9rem/1.15 var(--display); color: var(--ink); }
.stats small { font: 500 0.9rem var(--mono); color: var(--ink-3); }
.kmap-panel { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 1.25rem 2.5rem; margin: 0 -1rem; padding: 1.4rem 1.6rem 1.5rem; border-top: 1px solid var(--line); background: var(--surface-2); }
.kmap-panel .hint { grid-column: 1 / -1; align-self: center; text-align: center; font-size: 0.88rem; color: var(--ink-3); }
.kmap-panel:has(> .hint:only-child) { padding-block: 0.95rem; }
.read-path { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; padding-bottom: 1rem; border-bottom: 1px dashed var(--line); }
.read-path > span { font: 500 0.66rem var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
.read-path ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.3rem; }
.read-path li { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.84rem; }
.read-path li + li::before { content: "→"; color: var(--ink-faint); }
.read-path button { font: inherit; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0.18rem 0.55rem; cursor: pointer; }
.read-path button.is-planned { font-weight: 500; color: var(--ink-3); border-style: dashed; }
.read-path a { font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0.18rem 0.55rem; text-decoration: none; }
.read-path a small, .rel-list a.jump small { font: 500 0.68rem var(--mono); color: var(--ink-3); margin-right: 0.4em; }
.read-path a:hover { border-color: var(--brand-2); color: var(--brand-2); }
.read-path button:hover { border-color: var(--c); }
.read-path .here { font-weight: 650; color: var(--c); padding: 0.18rem 0.2rem; }
.panel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.panel-main .chip { color: var(--c); }
.planned-tag { font: 500 0.66rem var(--mono); padding: 0.15em 0.6em; border: 1px dashed var(--ink-3); border-radius: 999px; color: var(--ink-3); }
.panel-main h3 { font-size: 1.3rem; margin: 0.6rem 0 0.35rem; }
.panel-main .summary { font-size: 0.92rem; line-height: 1.7; color: var(--ink-2); }
.panel-main .pdf { margin: 0.9rem 0 0; }
.rel-list { list-style: none; padding: 0; display: grid; gap: 0.6rem; align-content: start; }
.rel-list li { padding: 0.7rem 0.9rem; background: var(--surface); border-radius: 8px; border: 1px solid var(--line); border-left: 2px solid var(--brand-2); }
.rel-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; font-size: 0.92rem; font-weight: 700; line-height: 1.4; }
.rel-tag { font-size: 0.68rem; font-weight: 600; line-height: 1; color: var(--ink-2); border: 1px solid var(--line-strong); padding: 0.3em 0.65em; border-radius: 4px; white-space: nowrap; }
.rel-line .self { color: var(--ink-3); font-weight: 500; }
.rel-line a { text-decoration: none; }
.rel-line a:hover, .jump:hover { color: var(--brand); text-decoration: underline; }
.jump { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.why { margin-top: 0.3rem; font-size: 0.84rem; line-height: 1.6; color: var(--ink-2); }
.relations .rel-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
.relations .rel-list li { box-shadow: var(--shadow); }
.relations, .roadmap { margin-top: 4.5rem; }
.sec-lede { margin: -0.9rem 0 1.5rem; color: var(--ink-2); font-size: 0.95rem; }
.todo { list-style: none; padding: 0; margin-top: 0.9rem; }
.todo li { position: relative; padding: 0.6rem 0 0.6rem 1.6rem; border-top: 1px dashed var(--line); font-weight: 600; font-size: 0.95rem; line-height: 1.5; }
.todo li::before { content: ""; position: absolute; left: 0.1rem; top: 0.95rem; width: 0.7rem; height: 0.7rem; border: 1.5px dashed var(--c); border-radius: 50%; }
.todo small { display: block; font-weight: 400; font-size: 0.78rem; color: var(--ink-3); }

/* notes hub: the map sits above the lists, with two folded sections */
.hub-map { margin-bottom: 3.5rem; scroll-margin-top: 5.5rem; }
#list { scroll-margin-top: 5.5rem; }
.kmap-svg.is-filter .map-node:not(.is-match) { opacity: 0.22; }
.kmap-svg.is-filter .map-edge { opacity: 0.3; }
.fold { margin-top: 0.75rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); }
.fold summary { display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1.25rem; font: 700 1rem var(--display); cursor: pointer; list-style: none; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::before { content: "+"; width: 1rem; font: 400 1.1rem var(--mono); color: var(--ink-3); }
.fold[open] summary::before { content: "\2212"; }
.fold summary small { font: 500 0.7rem var(--mono); color: var(--ink-3); }
.fold[open] summary { border-bottom: 1px dashed var(--line); }
.fold > :not(summary) { margin: 1.25rem; }
.fold .sec-lede { margin-bottom: 1rem; }
.fold .rel-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
.fold .topic-card { box-shadow: none; }
.view small { font: 500 0.68rem var(--mono); opacity: 0.6; margin-left: 0.2em; }

/* resources */
.jump-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem; }
.jump-row a { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.86rem; font-weight: 600; color: var(--ink-2); text-decoration: none; padding: 0.4rem 0.9rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); transition: border-color 0.2s, color 0.2s; }
.jump-row a:hover { color: var(--ink); border-color: var(--ink-3); }
.jump-row small { font: 500 0.7rem var(--mono); color: var(--ink-3); }
.res-sec { scroll-margin-top: 6rem; }
.sec-note { max-width: 24rem; font-size: 0.88rem; line-height: 1.6; color: var(--ink-3); text-align: right; padding-bottom: 0.3rem; }
.res-list { list-style: none; padding: 0; display: grid; gap: 1rem; }
.res-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.1rem; align-items: center; padding: 1.2rem 1.4rem; }
.res-row:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.res-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-2); }
.res-row h3 { font: 700 1.14rem/1.45 var(--display); }
.res-row h3 a { text-decoration: none; }
.res-row h3 a:hover { color: var(--brand); }
.res-row .pdf { margin: 0; }

/* papers */
.paper-list { list-style: none; padding: 0; display: grid; gap: 1rem; }
.paper { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 0.75rem 1.5rem; align-items: center; padding: 1.25rem 1.5rem; }
.paper:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.status { justify-self: start; font-size: 0.74rem; font-weight: 700; line-height: 1; padding: 0.5em 0.8em; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.s-noted .status { background: var(--ink); color: var(--bg); }
.s-read .status { background: var(--surface-2); color: var(--ink); }
.s-reading .status { border: 1px solid var(--ink); background: none; color: var(--ink); }
.s-queued .status { border: 1px dashed var(--line-strong); background: none; color: var(--ink-3); }
.paper h3 { font: 700 1.14rem/1.45 var(--display); }
.paper h3 a { text-decoration: none; }
.paper h3 a:hover { color: var(--brand-2); }
.by { font-size: 0.84rem; color: var(--ink-3); margin: 0.2rem 0 0.6rem; }
.paper .tags { align-items: center; }
.paper-links { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; font-size: 0.82rem; font-weight: 600; }
.paper-links .pdf { margin: 0; }
.ext { color: var(--ink-3); text-decoration: none; }
.ext:hover { color: var(--brand-2); }

/* site-wide search */
.palette { width: min(38rem, calc(100vw - 2rem)); max-height: min(32rem, calc(100vh - 6rem)); margin: 5rem auto auto; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.45); overflow: hidden; }
.palette[open] { display: flex; flex-direction: column; animation: rise 0.18s both; }
.palette::backdrop { background: rgb(15 17 21 / 0.4); backdrop-filter: blur(1.5px); }
.palette input::-webkit-search-cancel-button { display: none; }
.palette-head { display: flex; align-items: center; gap: 0.7rem; padding: 0 1.1rem; border-bottom: 1px solid var(--line); color: var(--ink-3); }
.palette-head input { flex: 1; min-width: 0; height: 3.4rem; border: 0; outline: 0; background: none; font: inherit; font-size: 1.02rem; color: var(--ink); }
.palette-head kbd, .palette-foot kbd { font: 500 0.68rem var(--mono); color: var(--ink-3); border: 1px solid var(--line); border-radius: 5px; padding: 0.05rem 0.4rem; }
.palette ul { list-style: none; margin: 0; padding: 0.4rem; overflow-y: auto; }
.palette li a { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 0.2rem 0.9rem; align-items: baseline; padding: 0.6rem 0.75rem; border-radius: 9px; text-decoration: none; }
.palette li[aria-selected="true"] a { background: var(--surface-2); }
.palette .k { grid-row: 1 / span 2; font: 500 0.66rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding-top: 0.3rem; }
.palette .t { font-weight: 650; line-height: 1.45; }
.palette .d { grid-column: 2; font-size: 0.84rem; line-height: 1.5; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette .none { padding: 1.6rem 1rem; text-align: center; color: var(--ink-3); font-size: 0.9rem; }
.palette-foot { display: flex; gap: 1.1rem; padding: 0.6rem 1.1rem; border-top: 1px solid var(--line); font-size: 0.74rem; color: var(--ink-3); }

/* "this page exists in your language" */
.lang-hint { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.5rem 1rem; background: var(--surface-2); border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 0.86rem; }
.lang-hint a { color: var(--brand); font-weight: 650; text-decoration: none; }
.lang-hint a:hover { text-decoration: underline; }
.lang-hint button { border: 0; background: none; color: inherit; opacity: 0.7; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.lang-hint button:hover { opacity: 1; }

/* notices, footnotes, zoom, comments */
.notice { margin-top: 1.4rem; padding: 0.7rem 1rem; border-radius: 8px; background: var(--note-bg); color: var(--note); font-size: 0.88rem; font-weight: 500; }
.fn-ref a { font: 700 0.72em var(--sans); text-decoration: none !important; padding: 0 0.25em; color: var(--brand) !important; }
.footnotes { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px dashed var(--line); font-size: 0.9rem; color: var(--ink-2); }
.prose .footnotes h2 { font-size: 1rem; margin-top: 0; }
.fn-back { text-decoration: none !important; }
.footnotes li:target { background: var(--note-bg); border-radius: 8px; }
.fn-tip { position: absolute; z-index: 20; padding: 0.8rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lift); font-size: 0.86rem; line-height: 1.65; color: var(--ink-2); }
.zoomable { margin-inline: 0; }
.zoomable img, .prose figure img { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 2rem; background: rgb(10 12 16 / 0.86); cursor: zoom-out; outline: none; animation: rise 0.25s both; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 4rem); border-radius: 8px; background: #fff; box-shadow: 0 30px 80px -20px #000; }
.no-scroll { overflow: hidden; }
.comments { padding-top: 0.5rem; }
.comments h2 { font: 700 1.4rem var(--display); margin-bottom: 1rem; }

.to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 4; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 1.1rem; cursor: pointer; box-shadow: var(--shadow); transition: transform 0.25s ease, color 0.2s, border-color 0.2s; }
.to-top:hover { color: var(--ink); border-color: var(--ink-3); }

.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tags span { font-size: 0.75rem; font-weight: 500; line-height: 1; color: var(--ink-2); background: var(--surface-2); border-radius: 999px; padding: 0.45em 0.8em; }

.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.5rem; }
.template-card { padding: 1rem 1rem 1.4rem; gap: 0.4rem; }
.template-card strong { font: 700 1.2rem/1.4 var(--display); margin: 0.9rem 0.4rem 0; }
.template-card .desc, .template-card .tags { margin-inline: 0.4rem; }
.template-card .tags { margin-top: 0.5rem; }
.sheet { display: block; background: var(--surface-2); border-radius: 12px; padding: 1.25rem 1.25rem 0; overflow: hidden; }
.sheet img { display: block; width: 100%; aspect-ratio: 4 / 3.6; object-fit: cover; object-position: top; background: #fff; border-radius: 3px 3px 0 0; box-shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 10px 24px -12px rgb(0 0 0 / 0.25); transition: transform 0.3s ease; transform-origin: bottom center; }
.template-card:hover .sheet img { transform: translateY(-4px); }
.template-card:hover strong { color: var(--brand); }

.gallery { display: flex; gap: 1rem; overflow-x: auto; padding: 0.25rem 0 1rem; margin: 2rem 0 2.5rem; scroll-snap-type: x proximity; }
.gallery .sheet { flex: 0 0 min(17rem, 70%); scroll-snap-align: start; padding: 0.8rem; }
.gallery .sheet img { aspect-ratio: 3 / 4; border-radius: 4px; }
.gallery .sheet:hover img { transform: scale(1.02); }

.about { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(0, 19rem); justify-content: space-between; gap: 3rem; align-items: start; }
.about .first { font: 500 1.4rem/1.7 var(--sans); color: var(--ink); }
.about aside { padding: 1.6rem; display: grid; gap: 0.7rem; }
.about aside .eyebrow:not(:first-child) { margin-top: 1rem; }
.interests { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.mail { font-weight: 700; text-decoration: none; }
.mail:hover { color: var(--brand-2); }
.about .socials { gap: 0.6rem; padding-bottom: 1.2rem; }
.about .social .badge { width: 2.4rem; height: 2.4rem; }

/* ---------- article ---------- */

.article { min-width: 0; max-width: var(--measure); animation: rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
.article.has-toc { max-width: none; display: grid; grid-template-columns: minmax(0, var(--measure)) 16rem; justify-content: space-between; column-gap: 3rem; }
.article.has-toc > * { grid-column: 1; min-width: 0; }
.article.has-toc > .article-head { grid-column: 1 / -1; }
.article.has-toc > .toc { grid-column: 2; grid-row: 2 / span 2; align-self: start; }
.article-head { padding: 4rem 0 2.25rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; font-size: 0.82rem; }
.crumbs a { font-weight: 600; color: var(--ink-3); text-decoration: none; margin-right: 0.3rem; }
.crumbs a:hover { color: var(--brand-2); }
.article-head h1 { font: 700 clamp(2rem, 5.2vw, 3rem) / 1.22 var(--display); letter-spacing: -0.01em; margin: 1.2rem 0 0; max-width: 52rem; }
.article-head .lede { max-width: 46rem; }
.article-head .tags { margin-top: 1.4rem; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0; margin-top: 1.6rem; font: 0.76rem var(--mono); letter-spacing: 0.04em; color: var(--ink-3); }
.meta > * + *::before { content: "/"; margin: 0 0.9em; color: var(--ink-faint); }
.pdf { display: inline-flex; align-items: center; gap: 0.4em; font: 600 0.8rem var(--sans); letter-spacing: 0; color: var(--ink); text-decoration: none; }
.pdf::before { content: none !important; }
.pdf { margin-left: 1.2em; border: 1px solid var(--line-strong); padding: 0.4em 0.9em; border-radius: 6px; transition: border-color 0.2s; }
.pdf:hover { border-color: var(--ink); }

.toc { position: sticky; top: 6rem; max-height: calc(100vh - 7.5rem); overflow-y: auto; font-size: 0.84rem; line-height: 1.55; }
.toc summary { font: 500 0.7rem var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); list-style: none; cursor: default; margin-bottom: 0.8rem; }
.toc summary::-webkit-details-marker { display: none; }
.toc ol { list-style: none; padding: 0; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 0.3rem 0 0.3rem 0.9rem; margin-left: -1px; border-left: 1px solid transparent; color: var(--ink-3); text-decoration: none; transition: color 0.2s; }
.toc .d1 a { padding-left: 1.7rem; font-size: 0.8rem; }
.toc a:hover { color: var(--ink); }
.toc a[aria-current] { color: var(--ink); font-weight: 600; border-left-color: var(--ink); }
.toc .katex { font-size: 1em; }

.prose { overflow-wrap: break-word; }
.prose > * + * { margin-top: 1.15em; }
.prose h1, .prose h2, .prose h3, .prose h4 { position: relative; }
.prose h1, .prose h2 { font: 700 1.65rem/1.35 var(--display); margin-top: 2.6em; }
.prose h3 { font-size: 1.22rem; margin-top: 2.1em; }
.prose h4 { font-size: 1.05rem; margin-top: 1.8em; }
.prose > :first-child { margin-top: 0; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 0.8em; }
.anchor { position: absolute; right: 100%; padding-right: 0.4em; color: var(--ink-3); text-decoration: none; font-weight: 400; opacity: 0; transition: opacity 0.2s; }
.prose :is(h1, h2, h3, h4):hover .anchor { opacity: 1; }
.prose a:not(.anchor) { color: var(--brand); text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent); text-decoration-thickness: 1px; transition: text-decoration-color 0.2s; }
.prose a:not(.anchor):hover { text-decoration-color: var(--brand); }
.prose strong { font-weight: 700; }
.prose ul, .prose ol { padding-left: 1.5em; }
.prose li + li { margin-top: 0.35em; }
.prose li > ul, .prose li > ol { margin-top: 0.35em; }
.prose li::marker { color: var(--ink-3); }
.prose hr { border: 0; height: 1.5rem; margin: 2.5em auto; max-width: 5rem; background: radial-gradient(circle, var(--ink-faint) 2px, transparent 2.5px) center / 1.4rem 100% repeat-x; }
.prose img { display: block; margin-inline: auto; border-radius: 10px; }

.prose blockquote { margin-inline: 0; padding: 1rem 1.25rem; border-radius: 0 10px 10px 0; background: var(--surface-2); color: var(--ink-2); border-left: 3px solid var(--ink-faint); }
.prose blockquote > * + * { margin-top: 0.8em; }
.callout-label { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; margin-right: 0.8em; color: var(--ink); }
.prose .callout { color: var(--ink); }
.prose .callout-theorem { background: color-mix(in srgb, var(--brand-2) 7%, var(--surface)); border-left-color: var(--brand-2); }
.callout-theorem .callout-label { color: var(--brand-2); }
.prose .callout-proof { background: var(--surface-2); border-left-color: var(--ink-faint); color: var(--ink-2); }
.prose .callout-note { background: var(--note-bg); border-left-color: var(--note); }
.callout-note .callout-label { color: var(--note); }

.prose :not(pre) > code { font: 0.86em var(--mono); background: var(--surface-2); padding: 0.14em 0.42em; border-radius: 4px; }
pre.code { position: relative; margin-inline: 0; padding: 1.1rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); overflow-x: auto; font: 0.84rem/1.7 var(--mono); tab-size: 2; }
pre.code[data-lang]::before { content: attr(data-lang); position: absolute; top: 0.6rem; right: 0.9rem; font: 500 0.66rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); transition: opacity 0.15s; }
pre.code:hover::before { opacity: 0; }
pre.code code { font: inherit; }
.copy { position: absolute; top: 0.5rem; right: 0.5rem; font: 600 0.72rem var(--sans); color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 0.25rem 0.65rem; cursor: pointer; opacity: 0; transition: opacity 0.15s; }
.copy:active { transform: scale(0.94); }
pre.code:hover .copy, .copy:focus-visible { opacity: 1; }
.hljs-comment, .hljs-quote { color: var(--hl-comment); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-tag, .hljs-name { color: var(--hl-keyword); }
.hljs-string, .hljs-attr, .hljs-regexp, .hljs-symbol { color: var(--hl-string); }
.hljs-number, .hljs-literal, .hljs-variable, .hljs-params { color: var(--hl-number); }
.hljs-title, .hljs-section, .hljs-function .hljs-title, .hljs-type { color: var(--hl-title); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.prose table { border-collapse: collapse; width: 100%; font-size: 0.92rem; line-height: 1.6; }
.prose th { text-align: left; font-size: 0.8rem; font-weight: 700; background: var(--surface-2); }
.prose th, .prose td { padding: 0.65rem 1rem; vertical-align: top; }
.prose tr + tr td { border-top: 1px solid var(--line); }

.eq { overflow-x: auto; overflow-y: hidden; padding: 0.35rem 0; }
.eq .katex-display { margin: 0; }
.katex { font-size: 1.04em; }
.katex-display { overflow-x: auto; overflow-y: hidden; }
.katex-display > .katex { white-space: nowrap; }

.article-foot { margin-top: 4rem; display: grid; gap: 1.5rem; }
.article-foot .tags span { color: var(--ink-2); background: var(--surface-2); font-weight: 500; }
.in-topic { display: flex; gap: 1.1rem; align-items: flex-start; background: var(--c-bg); padding: 1.4rem 1.5rem; border-radius: var(--r); }
.in-topic .glyph-badge { background: var(--surface); }
.in-topic > div { flex: 1; min-width: 0; }
.in-topic .q { font-size: 1.12rem; font-weight: 700; line-height: 1.5; margin-top: 0.25rem; }
.in-topic .entries, .in-topic .entries a { border-color: color-mix(in srgb, var(--c) 30%, transparent); }
.in-topic .q a { text-decoration: none; }
.in-topic .q a:hover { color: var(--c); }
.around { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem 1.5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed color-mix(in srgb, var(--c) 30%, transparent); }
.steps-label { font: 500 0.68rem var(--mono); letter-spacing: 0.12em; color: var(--ink-3); margin-bottom: 0.4rem; }
.steps ul { list-style: none; padding: 0; display: grid; gap: 0.45rem; font-size: 0.92rem; font-weight: 600; line-height: 1.5; }
.steps li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.55rem; }
.steps a { text-decoration: none; }
.steps a:hover { color: var(--c); text-decoration: underline; }
.steps .is-planned { color: var(--ink-3); font-weight: 500; }
.steps small { font: 500 0.66rem var(--mono); margin-left: 0.6em; padding: 0.1em 0.5em; border: 1px dashed currentColor; border-radius: 999px; }
.to-map { margin-top: 0.9rem; font-size: 0.82rem; font-weight: 600; }
.to-map a { color: var(--ink-2); text-decoration: none; }
.feedback { font-size: 0.9rem; color: var(--ink-3); }
.feedback a { color: var(--ink-2); font-weight: 600; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.pager a { padding: 1.1rem 1.3rem; font-weight: 700; line-height: 1.5; }
.pager a:hover { color: var(--brand); }
.pager span { display: block; font: 500 0.68rem var(--mono); letter-spacing: 0.14em; color: var(--ink-3); margin-bottom: 0.35rem; }
.pager .next { text-align: right; }

/* ---------- responsive ---------- */

@media (max-width: 68rem) {
  .article.has-toc { display: block; max-width: var(--measure); margin-inline: auto; }
  .article-solo { margin-inline: auto; }
  .has-toc .article-head { margin-bottom: 1.5rem; }
  .toc { position: static; margin: 0 0 2.25rem; max-height: none; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem 0.6rem; }
  .toc summary { cursor: pointer; margin: 0; }
  .toc summary::after { content: " +"; }
  .toc details[open] summary::after { content: " \2212"; }
  .toc details[open] summary { margin-bottom: 0.7rem; }
  .anchor { display: none; }
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 52rem) {
  .principles { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; padding: 3rem 0; }
  .principles > div { padding: 0; border: 0; }
  .note-grid, .topic-grid { grid-template-columns: minmax(0, 1fr); }
  .kmap .count { margin-left: 0; }
  .swipe { display: inline-flex; }
  .group { padding: 1.15rem; }
  .kmap-panel { grid-template-columns: minmax(0, 1fr); padding: 1.2rem 1.25rem; }
  .paper { grid-template-columns: minmax(0, 1fr); }
  .res-row { grid-template-columns: auto minmax(0, 1fr); }
  .res-row .pdf { grid-column: 2; justify-self: start; }
  .sec-note { display: none; }
  .paper-links { flex-direction: row; align-items: center; gap: 1rem; }
  .about { grid-template-columns: minmax(0, 1fr); }
  .hero { min-height: 0; padding: 4rem 0 3.5rem; }
  .hero-glyph { display: none; }
}
@media (max-width: 40rem) {
  /* Phones: the header scrolls away, the drawing gives way to the outline. */
  .site-header { position: static; }
  .header-inner { flex-wrap: wrap; height: auto; padding-block: 0.6rem 0; row-gap: 0.15rem; }
  .tools { margin-left: auto; }
  .nav { order: 3; flex: 1 1 100%; margin: 0 -0.55rem; }
  .nav a { padding: 0.6rem 0.75rem; }
  .progress { position: fixed; top: 0; bottom: auto; z-index: 6; }
  html { scroll-padding-top: 1rem; }
  .kmap-scroll, .kmap-legend { display: none; }
  .kmap-outline { display: block; }
  .kmap-panel .hint { display: none; }
  .kmap-panel:has(.hint) { min-height: 0; padding: 0; border: 0; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-map, .group, #list { scroll-margin-top: 1rem; }
}
@media (max-width: 36rem) {
  .search-open span, .search-open kbd { display: none; }
  .search-open { width: 2.3rem; padding: 0; justify-content: center; }
  .tools { gap: 0.35rem; }
  .lang-switch { padding: 0 0.6rem; }
  .palette { margin-top: 1rem; }
  body { font-size: 1rem; }
  .wrap { padding-inline: 1.15rem; }
  .mark { width: 34px; height: 34px; }
  .cta { margin-bottom: 3rem; }
  .btn { padding: 0.9rem 1.5rem; }
  .elsewhere { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .page-head { padding-top: 3.25rem; }
  .article-head { padding-top: 2.75rem; }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager .next { text-align: left; }
  .pdf { margin-left: 0.9em; }
  .meta { row-gap: 0.8rem; }
  .in-topic { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}

@media print {
  .site-header, .site-footer, .toc, .copy, .pager, .skip, .to-top, .comments, .lightbox, .palette, .lang-hint { display: none !important; }
  body { font-size: 11pt; background: #fff; color: #000; }
  .article.has-toc { display: block; }
  .prose a { color: inherit; }
}