/* ============================================================
   AI Learning Library — /learn
   Extends the portfolio system (style.css): same palette, same
   mono labels, same zero-radius geometry. Everything here is
   namespaced `learn-` except the shared markdown body (`md-body`).
   ============================================================ */

:root {
  --learn-head-h: 68px;
  --learn-accent: #0a0a0a;
  --learn-line: #e2e2e2;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: .8rem 1.2rem;
  font-size: .8rem; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ── Header ─────────────────────────────────────────────────── */
.learn-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--learn-line);
}
.learn-header .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; height: var(--learn-head-h);
}

.learn-logo { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.learn-logo-mark {
  width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--ink); color: #fff; font-size: 1rem; font-weight: 700;
  font-family: var(--font-mono);
}
.learn-logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.learn-logo-text .name { font-size: .84rem; font-weight: 700; letter-spacing: -.01em; }
.learn-logo-text .sub {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--silver);
}

.learn-nav { display: flex; align-items: center; gap: 1.6rem; }
.learn-nav a {
  position: relative; font-size: .78rem; font-weight: 500; color: var(--graphite);
  padding: .3rem 0; transition: color .18s;
}
.learn-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform .22s;
}
.learn-nav a:hover { color: var(--ink); }
.learn-nav a:hover::after, .learn-nav a.active::after { transform: scaleX(1); }
.learn-nav a.active { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .learn-nav { display: none; } }

.learn-header-actions { display: flex; align-items: center; gap: .9rem; }

.learn-quicksearch { position: relative; display: flex; align-items: center; }
.learn-quicksearch svg {
  position: absolute; left: .65rem; color: var(--silver); pointer-events: none;
}
.learn-quicksearch input {
  width: 210px; padding: .48rem .7rem .48rem 2.05rem;
  border: 1px solid var(--learn-line); background: var(--white);
  font-family: var(--font-sans); font-size: .76rem; color: var(--ink);
  transition: width .22s, border-color .18s;
}
.learn-quicksearch input:focus {
  outline: none; border-color: var(--ink); width: 260px;
}
.learn-quicksearch input::placeholder { color: var(--mist); }
@media (max-width: 1080px) { .learn-quicksearch { display: none; } }

.learn-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--ink);
  box-shadow: 0 18px 40px rgba(0,0,0,.14); display: none; z-index: 210;
  max-height: 60vh; overflow-y: auto;
}
.learn-suggest.open { display: block; }
.learn-suggest a {
  display: block; padding: .6rem .8rem; border-bottom: 1px solid var(--fog);
}
.learn-suggest a:last-child { border-bottom: 0; }
.learn-suggest a:hover, .learn-suggest a.sel { background: var(--fog); }
.learn-suggest .s-title { display: block; font-size: .78rem; font-weight: 600; }
.learn-suggest .s-sub {
  display: block; font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--silver); margin-top: .15rem;
}

.learn-home-link {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--graphite);
  border: 1px solid var(--learn-line); padding: .45rem .75rem;
  transition: background .18s, color .18s, border-color .18s;
}
.learn-home-link:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (max-width: 640px) { .learn-home-link { display: none; } }

.learn-nav-toggle {
  display: none; flex-direction: column; gap: 4px; background: none;
  border: 0; cursor: pointer; padding: .4rem;
}
.learn-nav-toggle span { width: 20px; height: 1.5px; background: var(--ink); transition: transform .22s, opacity .22s; }
.learn-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.learn-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.learn-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
@media (max-width: 900px) { .learn-nav-toggle { display: flex; } }

.learn-mobile-nav {
  display: none; flex-direction: column; border-top: 1px solid var(--learn-line);
  background: #fff;
}
.learn-mobile-nav.open { display: flex; }
.learn-mobile-nav a {
  padding: .95rem 1.25rem; font-size: .88rem; font-weight: 500;
  border-bottom: 1px solid var(--fog);
}
.learn-mobile-nav a.portfolio { color: var(--silver); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; }

/* ── Reading progress ───────────────────────────────────────── */
.learn-reading-bar {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--ink); z-index: 300; transition: width .08s linear;
}

/* ── Hero ───────────────────────────────────────────────────── */
.learn-hero {
  position: relative; background: var(--ink); color: #fff;
  padding: 7rem 0 5rem; overflow: hidden;
}
.learn-hero-grid {
  position: absolute; inset: 0; opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 78%);
}
.learn-hero .container { position: relative; z-index: 1; }
.learn-hero-kicker {
  display: inline-block; font-family: var(--font-mono); font-size: .64rem;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.2); padding: .4rem .8rem; margin-bottom: 2rem;
}
.learn-hero h1 {
  font-size: clamp(2.4rem, 6.5vw, 4.6rem); font-weight: 900; letter-spacing: -.035em;
  line-height: 1.02;
}
.learn-hero h1 span { color: rgba(255,255,255,.38); }
.learn-hero-lead {
  max-width: 62ch; margin-top: 1.6rem; font-size: clamp(.95rem, 1.6vw, 1.08rem);
  color: rgba(255,255,255,.65); line-height: 1.75;
}

.learn-hero-stats {
  display: flex; flex-wrap: wrap; gap: 0; margin: 3rem 0 2.4rem;
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.learn-stat {
  flex: 1 1 130px; padding: 1.4rem 1.2rem 1.4rem 0; display: block;
  border-right: 1px solid rgba(255,255,255,.1); transition: background .2s;
}
.learn-stat:last-child { border-right: 0; }
a.learn-stat:hover { background: rgba(255,255,255,.05); }
.learn-stat-num {
  display: block; font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 800;
  letter-spacing: -.03em; line-height: 1;
}
.learn-stat-label {
  display: block; margin-top: .45rem; font-family: var(--font-mono);
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.42);
}
@media (max-width: 640px) { .learn-stat { padding-left: 0; flex-basis: 45%; } }

.learn-hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ── Page heads (inner pages) ───────────────────────────────── */
.learn-page-head {
  background: var(--white); border-bottom: 1px solid var(--learn-line);
  padding: 3rem 0 2.4rem;
}
.learn-page-head h1 {
  font-size: clamp(1.9rem, 4.4vw, 2.9rem); letter-spacing: -.03em; margin-top: .5rem;
}
.learn-page-lead {
  max-width: 68ch; margin-top: .9rem; color: var(--graphite);
  font-size: .95rem; line-height: 1.75;
}
.learn-page-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.learn-section-lead { max-width: 66ch; margin-top: .8rem; color: var(--graphite); font-size: .93rem; }
.section--dark .learn-section-lead { color: rgba(255,255,255,.6); }

.learn-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--silver);
}
.learn-crumbs a { color: var(--graphite); transition: color .16s; }
.learn-crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.learn-crumbs span[aria-current] { color: var(--ink); }

/* ── Filters & tabs ─────────────────────────────────────────── */
.learn-filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1.8rem; }
.learn-filter-search { position: relative; display: flex; align-items: center; flex: 1 1 320px; max-width: 460px; }
.learn-filter-search svg { position: absolute; left: .75rem; color: var(--silver); pointer-events: none; }
.learn-filter-search input {
  width: 100%; padding: .62rem .8rem .62rem 2.2rem;
  border: 1px solid var(--cloud); background: var(--white);
  font-family: var(--font-sans); font-size: .84rem; color: var(--ink);
}
.learn-filter-search input:focus { outline: none; border-color: var(--ink); }
.learn-filters--big .learn-filter-search input { padding: .85rem .9rem .85rem 2.5rem; font-size: .95rem; }
.learn-filter-clear {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--silver); text-decoration: underline;
  text-underline-offset: 3px;
}
.learn-filter-clear:hover { color: var(--ink); }

.learn-domain-tabs {
  display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.6rem;
}
.learn-domain-tab {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .74rem; font-weight: 500; color: var(--graphite);
  border: 1px solid var(--cloud); padding: .45rem .8rem; background: var(--white);
  transition: background .18s, color .18s, border-color .18s;
}
.learn-domain-tab .num {
  font-family: var(--font-mono); font-size: .6rem; color: var(--mist); letter-spacing: .08em;
}
.learn-domain-tab:hover { border-color: var(--graphite); color: var(--ink); }
.learn-domain-tab.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.learn-domain-tab.active .num { color: rgba(255,255,255,.5); }

.learn-track-filter { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 2rem; }
.learn-pill {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; padding: .4rem .8rem; border: 1px solid var(--cloud);
  color: var(--graphite); transition: background .18s, color .18s;
}
.learn-pill:hover { border-color: var(--graphite); }
.learn-pill.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ── Chips, difficulty, meta ────────────────────────────────── */
.learn-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .07em;
  padding: .24rem .55rem; border: 1px solid var(--cloud); background: var(--fog);
  color: var(--graphite);
}
.learn-chip span { color: var(--mist); }
a.learn-chip--link { transition: background .16s, color .16s, border-color .16s; }
a.learn-chip--link:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
a.learn-chip--link:hover span { color: rgba(255,255,255,.55); }

.learn-diff {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; padding: .2rem .45rem; border: 1px solid;
}
.learn-diff--beginner     { color: #2f6b3f; border-color: #cfe3d5; background: #f2f8f4; }
.learn-diff--intermediate { color: #7a5a1e; border-color: #ecdcb8; background: #fbf6ea; }
.learn-diff--advanced     { color: #7a2b2b; border-color: #efd2d2; background: #fbf1f1; }

.learn-mins {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em;
  color: var(--silver); white-space: nowrap;
}
.learn-flag {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--silver);
  border: 1px solid var(--cloud); padding: .18rem .42rem;
}
.section--dark .learn-flag { color: rgba(255,255,255,.5); border-color: rgba(255,255,255,.18); }

/* ── Mode cards (hub) ───────────────────────────────────────── */
.learn-mode-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 0;
  border-top: 1px solid var(--learn-line); border-left: 1px solid var(--learn-line);
}
.learn-mode-card {
  padding: 2.2rem 2rem 2rem; border-right: 1px solid var(--learn-line);
  border-bottom: 1px solid var(--learn-line); display: flex; flex-direction: column;
  transition: background .22s;
}
.learn-mode-card:hover { background: var(--snow); }
.learn-mode-num {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .2em; color: var(--mist);
}
.learn-mode-card h3 { font-size: 1.35rem; margin: .7rem 0 .8rem; letter-spacing: -.02em; }
.learn-mode-card p { color: var(--graphite); font-size: .88rem; line-height: 1.72; flex: 1; }
.learn-mode-meta {
  display: block; margin-top: 1.2rem; font-family: var(--font-mono);
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--silver);
}
.learn-mode-go {
  display: block; margin-top: .9rem; font-size: .8rem; font-weight: 600;
  transition: transform .2s;
}
.learn-mode-card:hover .learn-mode-go { transform: translateX(5px); }

/* ── Domain cards (hub) ─────────────────────────────────────── */
.learn-domain-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1px;
  background: var(--learn-line); border: 1px solid var(--learn-line);
}
.learn-domain-card {
  background: var(--white); padding: 1.9rem 1.7rem; display: flex; flex-direction: column;
  transition: background .22s;
}
.learn-domain-card:hover { background: var(--snow); }
.learn-domain-head { display: flex; align-items: baseline; gap: .8rem; }
.learn-domain-num {
  font-family: var(--font-mono); font-size: .8rem; font-weight: 600; color: var(--mist);
}
.learn-domain-card h3 { font-size: 1.12rem; letter-spacing: -.02em; }
.learn-domain-card > p {
  margin-top: .7rem; color: var(--graphite); font-size: .85rem; line-height: 1.68;
}
.learn-domain-tracks { display: flex; flex-wrap: wrap; gap: .3rem; margin: 1.1rem 0; flex: 1; align-content: flex-start; }
.learn-domain-meta {
  display: flex; flex-wrap: wrap; gap: 1.1rem; padding-top: .9rem;
  border-top: 1px solid var(--fog);
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em; color: var(--silver);
}
.learn-domain-meta strong { color: var(--ink); font-weight: 600; }

/* ── Domain sections (concepts / flashcards index) ──────────── */
.learn-domain-header {
  display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between;
  align-items: flex-end; margin-bottom: 2.4rem;
  padding-bottom: 1.4rem; border-bottom: 1px solid var(--cloud);
}
.learn-domain-num-lg {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .22em; color: var(--mist);
}
.learn-domain-header h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin-top: .4rem; letter-spacing: -.025em; }
.learn-domain-header > div > p { margin-top: .6rem; color: var(--graphite); font-size: .88rem; max-width: 58ch; }
.learn-domain-stats { display: flex; gap: 1.8rem; }
.learn-domain-stats div { display: flex; flex-direction: column; }
.learn-domain-stats strong { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.learn-domain-stats span {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--silver); margin-top: .2rem;
}

/* ── Track accordion ────────────────────────────────────────── */
.learn-track-list { display: flex; flex-direction: column; border-top: 1px solid var(--cloud); }
.learn-track { border-bottom: 1px solid var(--cloud); }
.learn-track > summary {
  display: flex; align-items: center; gap: 1rem; padding: 1.1rem .2rem;
  cursor: pointer; list-style: none; transition: background .18s;
}
.learn-track > summary::-webkit-details-marker { display: none; }
.learn-track > summary:hover { background: rgba(0,0,0,.02); }
.learn-track-marker {
  width: 9px; height: 9px; border: 1.5px solid var(--graphite); flex-shrink: 0;
  transition: transform .22s, background .22s;
}
.learn-track[open] .learn-track-marker { background: var(--ink); border-color: var(--ink); transform: rotate(45deg); }
.learn-track-title { flex: 1; display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.learn-track-title strong { font-size: .98rem; font-weight: 700; letter-spacing: -.015em; }
.learn-track-title span { font-size: .8rem; color: var(--graphite); line-height: 1.55; }
.learn-track-count {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em;
  color: var(--silver); white-space: nowrap; flex-shrink: 0;
}
.learn-track-body { padding: 0 0 1.4rem; }
.learn-track-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; padding-left: 2.6rem; }
@media (max-width: 640px) {
  .learn-track-count { display: none; }
  .learn-track-actions { padding-left: 0; }
}

/* ── Concept list ───────────────────────────────────────────── */
.learn-concept-list { list-style: none; counter-reset: none; }
.learn-concept-list li { border-top: 1px solid var(--fog); }
.learn-concept-list li:first-child { border-top: 0; }
.learn-concept-list a {
  display: flex; align-items: flex-start; gap: 1.1rem; padding: .85rem 0 .85rem 0;
  transition: background .16s, padding-left .18s;
}
.learn-concept-list a:hover { background: rgba(0,0,0,.02); padding-left: .5rem; }
.learn-concept-idx {
  font-family: var(--font-mono); font-size: .64rem; color: var(--mist);
  padding-top: .18rem; width: 1.6rem; flex-shrink: 0;
}
.learn-concept-main { flex: 1; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.learn-concept-main strong { font-size: .9rem; font-weight: 600; letter-spacing: -.01em; }
.learn-concept-main span { font-size: .8rem; color: var(--graphite); line-height: 1.6; }
.learn-concept-meta { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; padding-top: .1rem; }
.learn-concept-list--wide a { padding: 1.1rem 0; }
@media (max-width: 720px) {
  .learn-concept-meta { flex-direction: column; align-items: flex-end; gap: .25rem; }
}

/* ── Starter cards ──────────────────────────────────────────── */
.learn-starter-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1px;
  background: var(--learn-line); border: 1px solid var(--learn-line);
}
.learn-starter { background: var(--white); padding: 1.5rem 1.4rem; transition: background .2s; }
.learn-starter:hover { background: var(--snow); }
.learn-starter-track {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mist);
}
.learn-starter h4 { font-size: 1rem; margin: .55rem 0 .5rem; letter-spacing: -.015em; }
.learn-starter p { font-size: .82rem; color: var(--graphite); line-height: 1.65; }
.learn-starter-meta {
  display: block; margin-top: .9rem; font-family: var(--font-mono);
  font-size: .6rem; letter-spacing: .1em; color: var(--silver);
}

/* ── Featured (dark) ────────────────────────────────────────── */
.learn-featured-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 1px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12);
}
.learn-featured-card {
  background: var(--ink); padding: 1.8rem 1.6rem; display: flex; flex-direction: column;
  transition: background .22s;
}
.learn-featured-card:hover { background: var(--ink-mid); }
.learn-featured-coll {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--silver);
}
.learn-featured-card h3 {
  font-size: 1.05rem; margin: .7rem 0 .7rem; color: #fff;
  letter-spacing: -.02em; line-height: 1.35;
}
.learn-featured-card p { font-size: .82rem; color: rgba(255,255,255,.55); line-height: 1.68; flex: 1; }
.learn-featured-meta {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1.2rem;
  font-family: var(--font-mono); font-size: .62rem; color: rgba(255,255,255,.4);
}
.learn-featured-more { margin-top: 2.4rem; }

/* ── Feed teaser ────────────────────────────────────────────── */
.learn-feed-teaser {
  display: grid; grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr); gap: 3rem; align-items: start;
}
@media (max-width: 860px) { .learn-feed-teaser { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }
.learn-feed-teaser h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); letter-spacing: -.025em; margin-top: .3rem; }
.learn-feed-teaser h2 span { color: var(--silver); }
.learn-feed-teaser .btn { margin-top: 1.4rem; }
.learn-feed-preview { border: 1px solid var(--cloud); background: var(--white); }
.learn-feed-row {
  display: flex; gap: 1rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--fog);
  transition: background .16s;
}
.learn-feed-row:last-child { border-bottom: 0; }
.learn-feed-row:hover { background: var(--fog); }
.learn-feed-date {
  font-family: var(--font-mono); font-size: .62rem; color: var(--mist);
  white-space: nowrap; padding-top: .12rem; flex-shrink: 0;
}
.learn-feed-title { font-size: .84rem; line-height: 1.5; }
.learn-feed-empty { padding: 2rem 1.2rem; text-align: center; color: var(--silver); font-size: .85rem; }
.learn-feed-empty--page { padding: 4rem 1rem; }
.learn-feed-empty--page h2 { font-size: 1.4rem; color: var(--ink); margin-bottom: .8rem; }
.learn-feed-empty--page .btn { margin-top: 1.4rem; }

/* ── Deck grid ──────────────────────────────────────────────── */
.learn-deck-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1.1rem;
}
.learn-deck-card {
  position: relative; border: 1px solid var(--cloud); background: var(--white);
  padding: 1.5rem 1.4rem 1.3rem; display: flex; flex-direction: column;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.learn-deck-card:hover {
  border-color: var(--ink); transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0,0,0,.07);
}
.learn-deck-stack { display: flex; gap: 3px; margin-bottom: 1.1rem; }
.learn-deck-stack span { width: 16px; height: 20px; border: 1px solid var(--cloud); background: var(--fog); }
.learn-deck-stack span:nth-child(2) { opacity: .7; }
.learn-deck-stack span:nth-child(3) { opacity: .4; }
.learn-deck-card:hover .learn-deck-stack span { border-color: var(--graphite); }
.learn-deck-card h3 { font-size: 1rem; letter-spacing: -.015em; }
.learn-deck-card p { margin-top: .5rem; font-size: .8rem; color: var(--graphite); line-height: 1.6; flex: 1; }
.learn-deck-meta {
  display: flex; gap: 1rem; margin-top: 1.1rem; padding-top: .8rem;
  border-top: 1px solid var(--fog);
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; color: var(--silver);
}
.learn-deck-meta strong { color: var(--ink); }
.learn-deck-progress {
  margin-top: .7rem; height: 3px; background: var(--fog); display: none;
}
.learn-deck-progress.has-progress { display: block; }
.learn-deck-progress i { display: block; height: 100%; background: var(--ink); }

/* ── Study mode ─────────────────────────────────────────────── */
.learn-study { padding: 2.4rem 0 5rem; background: var(--snow); min-height: 78vh; }
.learn-study-head {
  display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: space-between;
  align-items: flex-end; margin: 1rem 0 2rem;
}
.learn-study-head h1 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); letter-spacing: -.025em; }
.learn-study-head p { margin-top: .5rem; color: var(--graphite); font-size: .86rem; max-width: 56ch; }
.learn-study-controls { display: flex; flex-wrap: wrap; gap: .5rem; }
.learn-ctl {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; padding: .48rem .8rem; border: 1px solid var(--cloud);
  background: var(--white); color: var(--graphite); cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.learn-ctl:hover { border-color: var(--ink); color: var(--ink); }
.learn-ctl[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

.learn-study-progress { margin-bottom: 1.4rem; }
.learn-study-bar { height: 3px; background: var(--cloud); }
.learn-study-bar span { display: block; height: 100%; width: 0; background: var(--ink); transition: width .25s; }
.learn-study-counts {
  display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: .7rem;
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; color: var(--silver);
}
.learn-study-counts b { color: var(--ink); }
.learn-study-known b { color: #2f6b3f; }
.learn-study-review b { color: #7a2b2b; }

.learn-flashcard {
  perspective: 1800px; cursor: pointer; outline: none;
  min-height: clamp(320px, 46vh, 460px); margin-bottom: 1.6rem;
}
.learn-flashcard:focus-visible .learn-flashcard-face { border-color: var(--ink); }
.learn-flashcard-inner {
  position: relative; width: 100%; height: 100%; min-height: inherit;
  transition: transform .55s cubic-bezier(.4,.02,.2,1); transform-style: preserve-3d;
}
.learn-flashcard.flipped .learn-flashcard-inner { transform: rotateX(180deg); }
.learn-flashcard-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 1px solid var(--cloud); background: var(--white);
  padding: 2.4rem 2.2rem; display: flex; flex-direction: column;
  overflow-y: auto; transition: border-color .2s;
}
.learn-flashcard:hover .learn-flashcard-face { border-color: var(--graphite); }
.learn-flashcard-back { transform: rotateX(180deg); background: var(--ink); color: rgba(255,255,255,.88); border-color: var(--ink); }
.learn-flashcard-concept {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mist);
}
.learn-flashcard-q {
  margin-top: 1.2rem; font-size: clamp(1.05rem, 2.6vw, 1.5rem); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.4; flex: 1;
}
.learn-flashcard-hint {
  font-size: .84rem; color: var(--silver); font-style: italic; margin-bottom: 1rem;
}
.learn-flashcard-cue {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mist);
}
.learn-flashcard-a { flex: 1; font-size: .92rem; line-height: 1.75; }

/* The answer is rendered markdown, so it carries `.md-body` — typography tuned
   for a white article page, including a near-black text colour. On the dark card
   face that reads as black-on-black (MathJax escaped it only because it inherits
   currentColor). Re-point the palette to light-on-dark for this context. */
.learn-flashcard-back .md-body,
.learn-flashcard-back .md-body p,
.learn-flashcard-back .md-body li,
.learn-flashcard-back .md-body td,
.learn-flashcard-back .md-body th,
.learn-flashcard-back .md-body dd,
.learn-flashcard-back .md-body dt,
.learn-flashcard-back .md-body blockquote { color: rgba(255,255,255,.9); }
.learn-flashcard-back .md-body strong,
.learn-flashcard-back .md-body b,
.learn-flashcard-back .md-body h1,
.learn-flashcard-back .md-body h2,
.learn-flashcard-back .md-body h3,
.learn-flashcard-back .md-body h4 { color: #fff; }
.learn-flashcard-back .md-body em { color: rgba(255,255,255,.82); }
.learn-flashcard-back .md-body a { color: #fff; text-decoration-color: rgba(255,255,255,.5); }
.learn-flashcard-back .md-body li::marker { color: rgba(255,255,255,.45); }
.learn-flashcard-back .md-body blockquote {
  border-left-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.04);
}
/* Inline code sits on a light chip by default; give it a dark-surface variant. */
.learn-flashcard-back .md-body :not(pre) > code {
  background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.18);
}
.learn-flashcard-back .md-body table,
.learn-flashcard-back .md-body th,
.learn-flashcard-back .md-body td { border-color: rgba(255,255,255,.2); }
.learn-flashcard-back .md-body thead th { background: rgba(255,255,255,.08); }
.learn-flashcard-back .md-body hr { border-color: rgba(255,255,255,.2); }
/* Code blocks are already dark-on-dark by design — leave them alone. */
.learn-flashcard-source {
  margin-top: 1.4rem; font-family: var(--font-mono); font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55);
}
.learn-flashcard-source:hover { color: #fff; }
@media (max-width: 640px) { .learn-flashcard-face { padding: 1.6rem 1.3rem; } }

.learn-study-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: stretch; }
.learn-act {
  font-size: .8rem; font-weight: 600; padding: .8rem 1.3rem; cursor: pointer;
  border: 1px solid var(--ink); background: var(--white); color: var(--ink);
  display: inline-flex; align-items: center; gap: .5rem;
  transition: background .18s, color .18s;
}
.learn-act:hover { background: var(--ink); color: #fff; }
.learn-act kbd { font-family: var(--font-mono); font-size: .6rem; opacity: .6; }
.learn-act--prev, .learn-act--next { flex: 0 0 auto; font-size: 1rem; padding: .8rem 1.1rem; }
.learn-act--review, .learn-act--known { flex: 1 1 160px; justify-content: center; }
.learn-act--known:hover { background: #2f6b3f; border-color: #2f6b3f; }
.learn-act--review:hover { background: #7a2b2b; border-color: #7a2b2b; }

.learn-study-help {
  margin-top: 1.2rem; font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .08em; color: var(--silver);
}
.learn-study-help kbd, .learn-page-lead kbd {
  font-family: var(--font-mono); font-size: .62rem; border: 1px solid var(--cloud);
  padding: .1rem .32rem; background: var(--white); color: var(--graphite);
}
.learn-study-done {
  margin-top: 2rem; border: 1px solid var(--ink); background: var(--white);
  padding: 2rem; text-align: center;
}
.learn-study-done h2 { font-size: 1.5rem; letter-spacing: -.02em; }
.learn-study-done p { margin-top: .6rem; color: var(--graphite); font-size: .88rem; }
.learn-study-done-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.4rem; }
.learn-study-footer { margin-top: 2.4rem; }

/* ── Document layout (concept + article) ────────────────────── */
.learn-doc { padding: 2.4rem 0 5rem; background: var(--white); }
.learn-doc-head { margin: 1.2rem 0 2.6rem; max-width: 74ch; }
.learn-doc-tags { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1.2rem; }
.learn-doc-head h1 {
  font-size: clamp(1.9rem, 4.6vw, 3.1rem); letter-spacing: -.035em; line-height: 1.08;
}
.learn-doc-summary {
  margin-top: 1.1rem; font-size: clamp(.98rem, 1.7vw, 1.14rem);
  color: var(--graphite); line-height: 1.72;
}
.learn-doc-head--article .learn-featured-coll { color: var(--silver); }
.learn-doc-head--article h1 { margin-top: .7rem; }
.learn-doc-byline {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1.4rem;
  padding-top: 1.1rem; border-top: 1px solid var(--fog);
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; color: var(--silver);
}
.learn-doc-author { color: var(--ink); font-weight: 600; }

.learn-doc-layout {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 3.5rem; align-items: start;
}
@media (max-width: 1000px) {
  /* `1fr` means `minmax(auto, 1fr)`, and that `auto` floor is min-content — so
     the column refuses to shrink below the widest unbreakable thing inside it
     (a `white-space: pre` code block, a 480px-min table, a display equation).
     The article then pushes the whole page wider than the screen. The desktop
     rule above already guards against this with minmax(0, …); this one must
     too, or the layout only breaks on the narrow screens that can least
     afford it. */
  .learn-doc-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .learn-doc-aside { order: 2; }
}
/* Grid and flex items default to min-width:auto. Pinning these to 0 keeps the
   containment above true regardless of how the layout is later changed. */
.learn-doc-body, .learn-doc-aside { min-width: 0; }
.learn-doc-aside { position: sticky; top: calc(var(--learn-head-h) + 1.5rem); }
@media (max-width: 1000px) { .learn-doc-aside { position: static; } }

.learn-toc { margin-bottom: 2rem; }
.learn-toc ul { list-style: none; margin: 0; padding: 0; }
.learn-toc li { margin: 0; }
.learn-toc a {
  display: block; padding: .32rem 0 .32rem .7rem; font-size: .78rem;
  color: var(--graphite); border-left: 1.5px solid var(--fog);
  line-height: 1.45; transition: color .16s, border-color .16s;
}
.learn-toc a:hover { color: var(--ink); border-left-color: var(--graphite); }
.learn-toc a.active, .learn-toc a.current {
  color: var(--ink); font-weight: 600; border-left-color: var(--ink);
}
.learn-toc ul ul a { padding-left: 1.4rem; font-size: .74rem; color: var(--silver); }
.learn-toc--track ul { max-height: 340px; overflow-y: auto; }

.learn-share { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.learn-share-link {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--graphite); background: none; border: 0;
  padding: .25rem 0; cursor: pointer; text-align: left;
}
.learn-share-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ── Markdown body ──────────────────────────────────────────── */
/* `max-width` caps the comfortable measure but does nothing to stop a single
   long token (a URL, a dotted identifier) from setting a min-content width
   wider than a phone screen. */
.md-body {
  font-size: 1.005rem; line-height: 1.82; color: #1e1e1e; max-width: 74ch;
  overflow-wrap: break-word; min-width: 0;
}
.learn-doc--article .md-body { max-width: 78ch; }
.md-body > *:first-child { margin-top: 0; }
.md-body p { margin: 0 0 1.35rem; }
.md-body h2 {
  font-size: clamp(1.35rem, 2.8vw, 1.75rem); letter-spacing: -.025em;
  margin: 3rem 0 1rem; padding-top: 1.4rem; border-top: 1px solid var(--fog);
  scroll-margin-top: calc(var(--learn-head-h) + 1.5rem);
}
.md-body h3 {
  font-size: clamp(1.08rem, 2.1vw, 1.28rem); letter-spacing: -.02em; margin: 2.2rem 0 .8rem;
  scroll-margin-top: calc(var(--learn-head-h) + 1.5rem);
}
.md-body h4 { font-size: 1rem; margin: 1.7rem 0 .6rem; letter-spacing: -.01em; }
.md-body a {
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--mist);
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: text-decoration-color .16s;
}
.md-body a:hover { text-decoration-color: var(--ink); }
.md-body ul, .md-body ol { margin: 0 0 1.35rem; padding-left: 1.3rem; }
.md-body li { margin-bottom: .55rem; }
.md-body li::marker { color: var(--mist); }
.md-body strong { font-weight: 700; }
.md-body hr { border: 0; border-top: 1px solid var(--cloud); margin: 2.6rem 0; }

.md-body blockquote {
  margin: 1.8rem 0; padding: 1.1rem 1.4rem; background: var(--fog);
  border-left: 2px solid var(--ink); color: #2a2a2a; font-size: .96rem;
}
.md-body blockquote p:last-child { margin-bottom: 0; }

.md-body code {
  font-family: var(--font-mono); font-size: .84em; background: var(--fog);
  border: 1px solid var(--cloud); padding: .1em .35em; color: #1a1a1a;
}
.md-body pre {
  margin: 1.7rem 0; background: var(--ink); border: 1px solid var(--ink);
  overflow-x: auto; position: relative;
}
.md-body pre code {
  display: block; padding: 1.2rem 1.3rem; background: none; border: 0;
  color: #e2e2e2; font-size: .82rem; line-height: 1.7; white-space: pre;
}
.md-copy {
  position: absolute; top: .5rem; right: .5rem; font-family: var(--font-mono);
  font-size: .58rem; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.16); padding: .28rem .55rem;
  cursor: pointer; opacity: 0; transition: opacity .18s, background .18s, color .18s;
}
.md-body pre:hover .md-copy { opacity: 1; }
.md-copy:hover { background: rgba(255,255,255,.16); color: #fff; }

/* Pygments — tuned for the dark code block */
.md-body .codehl .k, .md-body .codehl .kn, .md-body .codehl .kd, .md-body .codehl .kc { color: #c4b5fd; }
.md-body .codehl .s, .md-body .codehl .s1, .md-body .codehl .s2, .md-body .codehl .sb, .md-body .codehl .se { color: #a7e8bd; }
.md-body .codehl .c, .md-body .codehl .c1, .md-body .codehl .cm { color: #7a7a7a; font-style: italic; }
.md-body .codehl .nf, .md-body .codehl .fm { color: #9ecbff; }
.md-body .codehl .nc, .md-body .codehl .nn { color: #ffd9a0; }
.md-body .codehl .mi, .md-body .codehl .mf, .md-body .codehl .m { color: #f0a5a5; }
.md-body .codehl .o, .md-body .codehl .ow { color: #d4d4d4; }
.md-body .codehl .nb { color: #93d7d7; }
.md-body .codehl .nd { color: #ffd9a0; }

.md-table-wrap { overflow-x: auto; margin: 1.8rem 0; border: 1px solid var(--cloud); }
.md-body table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: .85rem; }
.md-body thead { background: var(--fog); }
.md-body th, .md-body td {
  padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--fog);
  vertical-align: top;
}
.md-body th {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--graphite); font-weight: 500;
  border-bottom: 1px solid var(--cloud);
}
.md-body tbody tr:last-child td { border-bottom: 0; }
.md-body tbody tr:hover { background: var(--snow); }

.mermaid-wrap {
  margin: 2rem 0; padding: 1.6rem 1.2rem; background: var(--ink);
  border: 1px solid var(--ink); overflow-x: auto; text-align: center;
}
.mermaid-wrap pre.mermaid { background: none; border: 0; margin: 0; padding: 0; }
.mermaid-wrap svg { max-width: 100%; height: auto; }

.md-body img { max-width: 100%; height: auto; display: block; margin: 1.8rem auto .6rem; border: 1px solid var(--cloud); }
.md-body .footnote { font-size: .84rem; color: var(--graphite); border-top: 1px solid var(--cloud); margin-top: 3rem; padding-top: 1rem; }
.md-body .admonition {
  margin: 1.8rem 0; padding: 1.1rem 1.3rem; border: 1px solid var(--cloud); background: var(--snow);
}
.md-body .admonition-title {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--graphite); margin-bottom: .5rem;
}
.md-body .arithmatex { overflow-x: auto; max-width: 100%; }
mjx-container[display="true"] { overflow-x: auto; overflow-y: hidden; padding: .3rem 0; }

/* ── Inline flashcards on a concept page ────────────────────── */
.learn-inline-cards { margin-top: 4rem; padding-top: 2.4rem; border-top: 1px solid var(--cloud); }
.learn-inline-cards-head {
  display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: space-between;
  align-items: flex-end; margin-bottom: 1.6rem;
}
.learn-inline-cards-head h2 { font-size: 1.35rem; letter-spacing: -.02em; margin-top: .3rem; }
.learn-inline-cards-head p { margin-top: .4rem; color: var(--silver); font-size: .82rem; }
.learn-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.learn-mini-card {
  text-align: left; background: var(--white); border: 1px solid var(--cloud);
  padding: 1.3rem 1.3rem; cursor: pointer; font-family: inherit;
  transition: border-color .18s, box-shadow .18s;
}
.learn-mini-card:hover { border-color: var(--graphite); }
.learn-mini-card[aria-expanded="true"] { border-color: var(--ink); box-shadow: 0 10px 26px rgba(0,0,0,.06); }
.learn-mini-card-front { display: flex; flex-direction: column; gap: .5rem; }
.learn-mini-card-q { font-size: .92rem; font-weight: 600; line-height: 1.5; color: var(--ink); }
.learn-mini-card-hint { font-size: .78rem; color: var(--silver); font-style: italic; }
.learn-mini-card-cue {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mist);
}
.learn-mini-card[aria-expanded="true"] .learn-mini-card-cue { display: none; }
.learn-mini-card-back {
  display: none; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--fog);
  font-size: .87rem; line-height: 1.72;
}
.learn-mini-card[aria-expanded="true"] .learn-mini-card-back { display: block; }
.learn-mini-card-back p:last-child { margin-bottom: 0; }

/* ── Doc nav + related ──────────────────────────────────────── */
.learn-doc-nav {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; margin-top: 3.5rem;
  background: var(--cloud); border: 1px solid var(--cloud);
}
@media (max-width: 640px) { .learn-doc-nav { grid-template-columns: minmax(0, 1fr); } }
.learn-doc-nav > span { background: var(--white); }
.learn-doc-nav-link {
  background: var(--white); padding: 1.3rem 1.4rem; display: flex; flex-direction: column;
  gap: .4rem; transition: background .18s;
}
.learn-doc-nav-link:hover { background: var(--snow); }
.learn-doc-nav-link--next { text-align: right; }
.learn-doc-nav-link span {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--silver);
}
.learn-doc-nav-link strong { font-size: .92rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.4; }

.learn-related { margin-top: 3.5rem; padding-top: 2.4rem; border-top: 1px solid var(--cloud); }
.learn-related h2 { font-size: 1.35rem; letter-spacing: -.02em; margin-top: .3rem; margin-bottom: 1.4rem; }
.learn-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1px; background: var(--cloud); border: 1px solid var(--cloud); }
.learn-related-card { background: var(--white); padding: 1.3rem 1.2rem; transition: background .2s; }
.learn-related-card:hover { background: var(--snow); }
.learn-related-card h4 { font-size: .95rem; margin: .5rem 0 .5rem; letter-spacing: -.015em; line-height: 1.4; }
.learn-related-card p { font-size: .8rem; color: var(--graphite); line-height: 1.6; margin-bottom: .8rem; }

/* ── Post grid ──────────────────────────────────────────────── */
.learn-post-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); gap: 1px;
  background: var(--cloud); border: 1px solid var(--cloud);
}
.learn-post-card { background: var(--white); display: flex; flex-direction: column; transition: background .2s; }
.learn-post-card:hover { background: var(--snow); }
.learn-post-link { padding: 1.7rem 1.6rem .9rem; display: block; flex: 1; }
.learn-post-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.learn-post-card h2 { font-size: 1.08rem; letter-spacing: -.022em; line-height: 1.35; margin: .8rem 0 .7rem; }
.learn-post-card p { font-size: .84rem; color: var(--graphite); line-height: 1.68; }
.learn-post-foot {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  padding: 0 1.6rem 1.5rem;
}
.learn-post-flags { margin-left: auto; display: flex; gap: .3rem; }

.learn-tag-cloud { display: flex; flex-wrap: wrap; gap: .45rem; }

/* ── Feed list ──────────────────────────────────────────────── */
.learn-feed-list { list-style: none; border-top: 1px solid var(--cloud); }
.learn-feed-item { border-bottom: 1px solid var(--cloud); }
.learn-feed-item > a { display: block; padding: 1.5rem 0; transition: background .16s, padding-left .18s; }
.learn-feed-item > a:hover { background: rgba(0,0,0,.015); padding-left: .6rem; }
.learn-feed-item-top {
  display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; margin-bottom: .5rem;
}
.learn-feed-author { font-family: var(--font-mono); font-size: .62rem; color: var(--silver); }
.learn-feed-item h2 { font-size: 1.02rem; letter-spacing: -.018em; line-height: 1.45; }
.learn-feed-item p { margin-top: .5rem; font-size: .85rem; color: var(--graphite); line-height: 1.65; max-width: 80ch; }
.learn-feed-host {
  display: inline-block; margin-top: .7rem; font-family: var(--font-mono);
  font-size: .62rem; letter-spacing: .08em; color: var(--mist);
}

.learn-source-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; }
.learn-source-card { border: 1px solid var(--cloud); background: var(--white); padding: 1.3rem 1.3rem; }
.learn-source-card h4 { font-size: .95rem; letter-spacing: -.015em; }
.learn-source-url {
  margin-top: .4rem; font-family: var(--font-mono); font-size: .66rem;
  color: var(--silver); word-break: break-all;
}
.learn-source-meta {
  display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; margin-top: .9rem;
  padding-top: .8rem; border-top: 1px solid var(--fog);
  font-family: var(--font-mono); font-size: .62rem; color: var(--silver);
}
.learn-source-meta strong { color: var(--ink); }
.learn-source-status { padding: .15rem .45rem; border: 1px solid var(--cloud); }
.learn-source-status--ok   { color: #2f6b3f; border-color: #cfe3d5; }
.learn-source-status--bad  { color: #7a2b2b; border-color: #efd2d2; }
.learn-source-note { margin-top: 1.6rem; font-size: .82rem; color: var(--silver); max-width: 82ch; line-height: 1.7; }
.learn-source-note code {
  font-family: var(--font-mono); font-size: .78em; background: var(--white);
  border: 1px solid var(--cloud); padding: .08em .35em;
}

/* ── Results, pagination, empty ─────────────────────────────── */
.learn-result-group { margin-bottom: 2.6rem; }
.learn-result-list { border-top: 1px solid var(--cloud); margin-top: .8rem; }
.learn-result {
  display: flex; align-items: flex-start; gap: 1.2rem; padding: 1.1rem .2rem;
  border-bottom: 1px solid var(--fog); transition: background .16s, padding-left .18s;
}
.learn-result:hover { background: rgba(0,0,0,.02); padding-left: .6rem; }
.learn-result > div { flex: 1; min-width: 0; }
.learn-result-kind {
  font-family: var(--font-mono); font-size: .56rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mist); border: 1px solid var(--cloud);
  padding: .18rem .4rem; flex-shrink: 0; margin-top: .15rem;
}
.learn-result h4 { font-size: .94rem; letter-spacing: -.015em; }
.learn-result p { margin-top: .3rem; font-size: .82rem; color: var(--graphite); line-height: 1.6; }
.learn-result-sub {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em;
  color: var(--silver); flex-shrink: 0; text-align: right; white-space: nowrap;
}
@media (max-width: 720px) { .learn-result-sub { display: none; } }
.learn-result-count {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--silver); margin-bottom: 1.6rem;
}

.learn-pagination {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--cloud);
}
.learn-pagination a {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; border: 1px solid var(--cloud); padding: .55rem .95rem;
  transition: background .18s, color .18s, border-color .18s;
}
.learn-pagination a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.learn-pagination-pos { font-family: var(--font-mono); font-size: .64rem; color: var(--silver); }

.learn-empty { color: var(--silver); font-size: .92rem; padding: 2.4rem 0; }
.learn-empty a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.learn-track-summary { display: flex; flex-wrap: wrap; gap: 2.2rem; margin-top: 1.8rem; }
.learn-track-summary div { display: flex; flex-direction: column; }
.learn-track-summary strong { font-size: 1.6rem; font-weight: 800; letter-spacing: -.025em; }
.learn-track-summary span {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--silver); margin-top: .2rem;
}

/* ── 404 ────────────────────────────────────────────────────── */
.learn-404 { padding: 7rem 0; text-align: center; }
.learn-404-code {
  font-family: var(--font-mono); font-size: 4rem; font-weight: 500; color: var(--cloud);
  letter-spacing: -.02em;
}
.learn-404 h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-top: .6rem; letter-spacing: -.03em; }
.learn-404 p { max-width: 52ch; margin: 1rem auto 0; color: var(--graphite); font-size: .92rem; }
.learn-404 .learn-page-actions { justify-content: center; }

/* ── Footer ─────────────────────────────────────────────────── */
.learn-footer { background: var(--ink); color: rgba(255,255,255,.6); padding: 4.5rem 0 2.5rem; }
.learn-footer .label { color: rgba(255,255,255,.3); }
.learn-footer-grid {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: 3rem;
  padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.1);
}
@media (max-width: 760px) { .learn-footer-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }
.learn-footer-lead { font-size: .88rem; line-height: 1.75; max-width: 52ch; }
.learn-footer-link {
  display: block; font-size: .82rem; padding: .28rem 0; color: rgba(255,255,255,.6);
  transition: color .16s;
}
.learn-footer-link:hover { color: #fff; }
.learn-footer-bottom {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  padding-top: 2rem; font-family: var(--font-mono); font-size: .64rem;
  letter-spacing: .08em; color: rgba(255,255,255,.35);
}

/* ── Motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .learn-flashcard-inner { transition: none; }
}

/* ── Support ────────────────────────────────────────────────── */
/* Deliberately quiet: the coffee link is a footer item like any other, and the
   in-article line only appears once the reader has reached the end. */
.learn-support-link::before {
  content: '';
  display: inline-block; width: 5px; height: 5px; margin-right: .45rem;
  vertical-align: middle; border-radius: 50%;
  background: currentColor; opacity: .45;
}
.learn-support-inline {
  margin-top: 3rem; padding-top: 1.4rem;
  border-top: 1px solid var(--cloud);
  font-size: .84rem !important; color: var(--silver) !important; line-height: 1.7;
}
.learn-support-inline a {
  color: var(--ink); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--mist); transition: text-decoration-color .2s;
}
.learn-support-inline a:hover { text-decoration-color: var(--ink); }

/* ── Knowledge graph ────────────────────────────────────────── */
/* The `hidden` attribute is only `display:none` in the UA stylesheet, so ANY
   author `display:` rule silently beats it. Several panels below are toggled by
   `el.hidden = true/false` from script while also declaring `display: grid` or
   `display: flex` — without this reset they are permanently visible, which is
   what pinned the "Not enough data yet" overlay on top of a working graph. */
[hidden] { display: none !important; }

.learn-graph-stats {
  display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 1.6rem;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--silver);
}
.learn-graph-stats strong { color: var(--ink); font-size: .9rem; letter-spacing: -.01em; }

.learn-graph-section { padding-top: 2.2rem; }
/* The graph is the point of this page, so it escapes the 1100px reading column
   the rest of the site uses. Deliberately NOT sized with 100vw: that unit
   includes the vertical scrollbar, so `100vw - padding` still overflows the
   real content width and produces a page-wide horizontal scrollbar. A plain
   max-width plus the container's own padding cannot overflow (box-sizing is
   border-box globally). */
.learn-graph-section > .container { max-width: 1600px; }
/* Zero floors on both tracks. The canvas carries an inline pixel width set by
   the resize handler, so with an `auto` minimum the column locks to whatever
   width was last measured and can only ever grow — each resize measuring the
   too-wide column and writing it back. */
.learn-graph-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 960px) { .learn-graph-layout { grid-template-columns: 244px minmax(0, 1fr); } }
.learn-graph-controls, .learn-graph-stage { min-width: 0; }
.learn-graph-canvas-wrap, .learn-graph-canvas-wrap canvas { max-width: 100%; }

/* Controls */
.learn-graph-controls {
  border: 1px solid var(--learn-line); padding: 1.3rem 1.2rem;
  display: flex; flex-direction: column; gap: 1.35rem;
  align-self: start;
}
@media (min-width: 960px) { .learn-graph-controls { position: sticky; top: calc(var(--learn-head-h) + 1.2rem); } }
.learn-graph-control { display: flex; flex-direction: column; gap: .45rem; }
.learn-graph-control label {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--graphite);
  display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
}
.learn-graph-control .val { color: var(--ink); font-size: .78rem; font-weight: 700; }
.learn-graph-control .hint { font-size: .7rem; color: var(--silver); line-height: 1.5; }
.learn-graph-control input[type="search"] {
  border: 1px solid var(--learn-line); padding: .5rem .65rem;
  font-family: var(--font-sans); font-size: .8rem; color: var(--ink); background: var(--white);
}
.learn-graph-control input[type="search"]:focus { outline: none; border-color: var(--ink); }
.learn-graph-control input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 2px;
  background: var(--cloud); cursor: pointer;
}
.learn-graph-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px;
  border-radius: 50%; background: var(--ink); cursor: pointer;
}
.learn-graph-control input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--ink); cursor: pointer;
}
.learn-graph-toggles { gap: .6rem; }
.learn-graph-check {
  display: flex; align-items: center; gap: .5rem; cursor: pointer;
  font-family: var(--font-sans); font-size: .78rem; color: var(--graphite);
  text-transform: none; letter-spacing: 0;
}
.learn-graph-check input { accent-color: var(--ink); }
.learn-graph-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.learn-graph-legend .label { display: block; margin-bottom: .5rem; }
.learn-graph-legend p { font-size: .72rem; color: var(--silver); line-height: 1.6; }

/* Stage */
.learn-graph-stage { position: relative; display: flex; flex-direction: column; gap: 1rem; }
.learn-graph-canvas-wrap {
  position: relative; border: 1px solid var(--learn-line); background: var(--snow);
  height: clamp(460px, 82vh, 1040px); overflow: hidden;
  touch-action: none;
}
/* Fullscreen: the wrapper becomes the whole viewport, so the canvas resize
   handler picks up the new box and the layout re-centres into it. */
.learn-graph-canvas-wrap:fullscreen { height: 100vh; border: 0; background: var(--white); }
.learn-graph-canvas-wrap:-webkit-full-screen { height: 100vh; border: 0; background: var(--white); }
.learn-graph-fs {
  position: absolute; top: .7rem; right: .7rem; z-index: 5;
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.94); border: 1px solid var(--learn-line);
  padding: .4rem .7rem; cursor: pointer;
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--graphite);
}
.learn-graph-fs:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.learn-graph-canvas-wrap canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.learn-graph-canvas-wrap canvas:active { cursor: grabbing; }

.learn-graph-loading, .learn-graph-empty {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  gap: .5rem; padding: 2rem; background: rgba(250,250,250,.86);
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--silver);
}
.learn-graph-empty h3 {
  font-family: var(--font-sans); font-size: 1.05rem; letter-spacing: -.02em;
  text-transform: none; color: var(--ink);
}
.learn-graph-empty p {
  font-family: var(--font-sans); font-size: .84rem; letter-spacing: 0;
  text-transform: none; color: var(--graphite); line-height: 1.65; max-width: 40ch;
}

.learn-graph-tip {
  position: absolute; top: 0; left: 0; pointer-events: none;
  background: var(--ink); color: #fff; padding: .5rem .7rem;
  display: flex; flex-direction: column; gap: .15rem; max-width: 200px;
  box-shadow: 0 10px 26px rgba(0,0,0,.2);
}
.learn-graph-tip strong { font-size: .78rem; font-weight: 600; line-height: 1.3; }
.learn-graph-tip span {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.6);
}

/* Detail panel */
.learn-graph-detail {
  position: relative; border: 1px solid var(--ink); padding: 1.4rem 1.4rem 1.3rem;
  display: flex; flex-direction: column; gap: .85rem; background: var(--white);
}
.learn-graph-detail h3 { font-size: 1.15rem; letter-spacing: -.022em; }
.learn-graph-detail-meta {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--silver);
}
.learn-graph-detail-block { display: flex; flex-direction: column; gap: .5rem; }
.learn-graph-detail-close {
  position: absolute; top: .5rem; right: .6rem; background: none; border: 0;
  font-size: 1.4rem; line-height: 1; color: var(--silver); cursor: pointer; padding: .2rem .4rem;
}
.learn-graph-detail-close:hover { color: var(--ink); }
.learn-graph-detail .btn { align-self: flex-start; }
.learn-graph-note {
  margin-top: 1.6rem; font-size: .78rem; color: var(--silver);
  line-height: 1.7; max-width: 74ch;
}
button.learn-chip { border: 1px solid var(--learn-line); background: var(--white); cursor: pointer; font: inherit; }
button.learn-chip:hover { border-color: var(--ink); background: var(--fog); }

/* ── Feed search / keyword panels ───────────────────────────── */
.learn-feed-search {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin-top: 1.8rem;
}
.learn-feed-search > svg { position: absolute; left: .7rem; color: var(--silver); pointer-events: none; }
.learn-feed-search input[type="search"] {
  flex: 1 1 260px; min-width: 0;
  padding: .62rem .8rem .62rem 2.2rem;
  border: 1px solid var(--learn-line); background: var(--white);
  font-family: var(--font-sans); font-size: .84rem; color: var(--ink);
}
.learn-feed-search input[type="search"]:focus { outline: none; border-color: var(--ink); }
.learn-feed-resultline {
  margin-top: 1.2rem; font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--silver);
}

.learn-keyword-panel {
  margin-top: 1.8rem; border: 1px solid var(--learn-line); padding: 1.5rem 1.4rem;
  display: flex; flex-direction: column; gap: 1.2rem;
}
.learn-keyword-head h2 { font-size: 1.3rem; letter-spacing: -.025em; margin-top: .4rem; }
.learn-keyword-head p { margin-top: .3rem; font-size: .84rem; color: var(--graphite); }
.learn-keyword-block { display: flex; flex-direction: column; gap: .6rem; }
.learn-keyword-block--trending { margin-top: 1.8rem; }
.learn-keyword-panel .btn { align-self: flex-start; }
.learn-keyword-graphlink {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--graphite); align-self: flex-start;
}
.learn-keyword-graphlink:hover { color: var(--ink); }

/* ── Narrow-screen containment for article content ──────────────
   Everything a concept or blog body can contain that is intrinsically wider
   than a phone screen. Each wide element scrolls inside its own box instead of
   widening the page; the grid columns that hold them are pinned to a zero
   minimum above so they can actually shrink. */

/* Long inline tokens: file paths, dotted identifiers, URLs in prose. */
.md-body :not(pre) > code { overflow-wrap: break-word; word-break: break-word; }
.md-body a { overflow-wrap: break-word; }

/* Display math already scrolls via .arithmatex / mjx-container[display]. Inline
   math is an inline box, where overflow does not apply — inline-block makes it
   a scroll container so one long expression cannot stretch the paragraph. */
.md-body span.arithmatex {
  display: inline-block; max-width: 100%;
  overflow-x: auto; overflow-y: hidden; vertical-align: middle;
}

/* Mermaid renders to an SVG with an intrinsic width; without a floor of zero
   the wrapper inherits that width instead of scrolling. */
.mermaid-wrap { min-width: 0; }
.mermaid-wrap pre.mermaid { white-space: pre-wrap; word-break: break-word; }

/* Prev/next cards: long titles must wrap rather than set the column width. */
.learn-doc-nav-link { min-width: 0; }
.learn-doc-nav-link strong, .learn-doc-nav-link span { overflow-wrap: break-word; }

@media (max-width: 640px) {
  /* A table narrower than this is unreadable, so it keeps its own horizontal
     scroll inside .md-table-wrap rather than being squeezed. */
  .md-body table { min-width: 420px; }
  .md-body pre code { font-size: .76rem; }
  .learn-doc-body, .md-body { max-width: 100%; }
}