/* BunnyBuddy Learning — long-form reading.
   These are 400-line articles with heavy code. The job is a comfortable
   measure, code that stays legible on a phone, and an index that keeps you
   oriented inside a long page without stealing width from the prose. */

.learn {
  background:
    radial-gradient(1000px 560px at 12% -8%, rgba(143,185,255,.075), transparent 62%),
    radial-gradient(760px 420px at 92% -2%, rgba(196,181,253,.06), transparent 62%),
    var(--bg);
}

/* ----------------------------------------------------------- breadcrumbs */
.crumb { border-bottom: 1px solid var(--line-soft); background: rgba(255,255,255,.012); }
.crumb-in {
  max-width: 1120px; margin: 0 auto; padding: 11px 24px;
  font-size: 13px; color: var(--ink-faint);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.crumb-in a { color: var(--ink-dim); text-decoration: none; }
.crumb-in a:hover { color: var(--accent); }
.crumb-in i { opacity: .45; font-style: normal; }
.crumb-in span:last-child { color: var(--ink); }

/* ------------------------------------------------------------ doc layout */
.doc-wrap { max-width: 1180px; margin: 0 auto; padding: 30px 24px 84px; }
.doc-layout {
  display: grid; grid-template-columns: 248px minmax(0, 1fr);
  gap: 52px; align-items: start;
}

/* --------------------------------------------------- on this page (rail) */
/* Pinned, so it is still there when you want it. A strip across the top
   scrolls away, and a contents list you have to scroll back up to reach is
   not doing its job. */
.toc {
  position: sticky; top: 74px;
  max-height: calc(100vh - 104px); overflow-y: auto;
  padding-right: 8px; scrollbar-width: thin;
}
.toc::-webkit-scrollbar { width: 5px; }
.toc::-webkit-scrollbar-thumb { background: rgba(255,255,255,.13); border-radius: 3px; }
.toc-h {
  display: flex; align-items: center; width: 100%;
  font: inherit; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-faint);
  background: none; border: 0; padding: 0 0 12px; margin: 0;
  text-align: left; cursor: default;
}
.toc-h i { display: none; }
.toc ul {
  list-style: none; margin: 0; padding: 0;
  border-left: 1px solid var(--line);
}
.toc li { margin: 0; }
.toc a {
  display: block; padding: 7px 0 7px 15px; margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 13.4px; line-height: 1.42; color: var(--ink-dim);
  text-decoration: none; transition: color .15s, border-color .15s;
}
.toc a:hover { color: var(--ink); }
.toc a.on { color: var(--accent); border-left-color: var(--accent); font-weight: 580; }

/* ---------------------------------------------------------------- article */
.doc { min-width: 0; max-width: 820px; font-size: 17px; line-height: 1.74; color: #dde3ee; }
.doc-meta {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  margin-bottom: 6px; font-size: 13px; color: var(--ink-faint);
}
.dot-sep { opacity: .4; }
.diff {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3.5px 9px; border-radius: 999px; border: 1px solid;
}
.diff.easy   { color: #6ee7b7; border-color: rgba(110,231,183,.3); background: rgba(110,231,183,.09); }
.diff.medium { color: var(--warn); border-color: rgba(255,176,87,.3); background: rgba(255,176,87,.09); }
.diff.hard   { color: var(--bad); border-color: rgba(255,122,122,.32); background: rgba(255,122,122,.09); }
.lc { font-size: 12.5px; color: var(--ink-dim); border: 1px solid var(--line);
      padding: 3px 9px; border-radius: 999px; }

.doc h1 {
  font-size: clamp(30px, 5vw, 40px); line-height: 1.14; letter-spacing: -1px;
  font-weight: 710; margin: 14px 0 26px; color: #fff;
}
.doc h2 {
  font-size: clamp(21px, 3.4vw, 26px); letter-spacing: -0.5px; font-weight: 680; color: #fff;
  margin: 58px 0 16px; padding-top: 22px; border-top: 1px solid var(--line-soft);
  scroll-margin-top: 20px;
}
/* h3 and h4 were 17px and 16px — a one-pixel step reads as no step at all, so
   a nested page looked like bold body text. Size, weight and colour all move. */
.doc h3 {
  font-size: clamp(18.5px, 2.7vw, 20.5px); font-weight: 665; color: #fff;
  margin: 38px 0 11px; letter-spacing: -0.2px; scroll-margin-top: 20px;
}
.doc h4 {
  font-size: 15.4px; font-weight: 700; color: #9db0cb;
  margin: 26px 0 8px; letter-spacing: .012em; scroll-margin-top: 20px;
}
.doc h4 code { font-size: .92em; }
.doc p { margin: 0 0 18px; }
.doc strong { color: #fff; font-weight: 645; }
.doc em { color: #e6eaf3; }
.doc a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(143,185,255,.32); }
.doc a:hover { border-bottom-color: var(--accent); }
.doc ul, .doc ol { margin: 0 0 18px; padding-left: 22px; }
.doc li { margin: 7px 0; }
.doc li::marker { color: var(--ink-faint); }
.doc hr { border: 0; border-top: 1px solid var(--line-soft); margin: 42px 0; }

.doc blockquote {
  margin: 24px 0; padding: 16px 22px;
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, rgba(143,185,255,.08), rgba(143,185,255,.014));
  border-radius: 0 14px 14px 0; color: #e8ecf4;
}
.doc blockquote p:last-child { margin-bottom: 0; }

.doc :not(pre) > code {
  font: .88em/1.5 ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  background: rgba(143,185,255,.1); color: #cfe0ff;
  padding: 1.5px 6px; border-radius: 6px; border: 1px solid rgba(143,185,255,.14);
  overflow-wrap: break-word;
}

/* ------------------------------------------------------------ code blocks */
.code {
  position: relative; margin: 22px 0;
  border: 1px solid var(--line); border-radius: 14px;
  background: #0a0c11; overflow: hidden;
}
.code-lang {
  position: absolute; top: 0; right: 0; z-index: 1;
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; font-weight: 650;
  color: var(--ink-faint); padding: 7px 13px;
  border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
  border-radius: 0 14px 0 8px; background: rgba(255,255,255,.028);
}
.code pre { margin: 0; padding: 17px 19px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.code code {
  font: 13.6px/1.68 ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color: #d8dee9; white-space: pre; display: block;
}
.code .k  { color: #c4b5fd; font-weight: 600; }
.code .t  { color: #8fd7ff; }
.code .f  { color: #9fe6c8; }
.code .s  { color: #ffc98f; }
.code .n  { color: #f0b3d8; }
.code .c  { color: #5d6674; font-style: italic; }
.code .at { color: #ffb057; }

/* ------------------------------------------------------------------ tables */
.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 24px 0; border: 1px solid var(--line); border-radius: 14px;
}
.doc table { border-collapse: collapse; width: 100%; font-size: 14.6px; }
.doc thead th {
  text-align: left; font-weight: 640; color: var(--ink);
  background: rgba(255,255,255,.035); padding: 11px 15px;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.doc tbody td { padding: 11px 15px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.doc tbody tr:last-child td { border-bottom: 0; }
.doc tbody tr:hover { background: rgba(255,255,255,.018); }

/* ------------------------------------------------------------------ pager */
.pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin: 54px 0 0; padding-top: 30px; border-top: 1px solid var(--line-soft);
}
.pg {
  display: flex; flex-direction: column; gap: 4px; padding: 15px 18px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); text-decoration: none;
  transition: border-color .18s, transform .18s, background .18s;
}
.pg:hover { border-color: rgba(143,185,255,.35); transform: translateY(-1.5px); background: var(--panel-2); }
.pg span { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.pg b { font-size: 15px; font-weight: 620; color: var(--ink); line-height: 1.35; }
.pg.next { text-align: right; }

/* ------------------------------------------------------------------- plug */
.plug {
  margin: 46px 0 0; padding: 26px 28px;
  border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(135deg, rgba(143,185,255,.08), rgba(196,181,253,.05));
}
.plug h3 { margin: 0 0 8px; font-size: 19px; font-weight: 660; color: #fff; }
.plug p  { margin: 0 0 18px; color: var(--ink-dim); font-size: 15.5px; line-height: 1.62; }
.plug.wide { margin-top: 62px; }

/* ------------------------------------------------------------ index pages */
.idx-wrap { max-width: 1060px; margin: 0 auto; padding: 38px 24px 90px; }
.idx-head h1 { font-size: clamp(28px, 5vw, 38px); letter-spacing: -1px; margin: 0 0 10px; color: #fff; }
.idx-wrap .lead { color: var(--ink-dim); font-size: 16.6px; line-height: 1.66; margin: 0; max-width: 64ch; }

.learn-hero { text-align: center; padding: 34px 0 10px; }
.learn-hero .pill, .cs-hero .pill {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; background: var(--panel);
}
.learn-hero .pill .dot, .cs-hero .pill .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--good);
}
.learn-hero .big {
  font-size: clamp(30px, 5.6vw, 50px); line-height: 1.12; letter-spacing: -1.5px;
  font-weight: 730; margin: 20px 0 16px; color: #fff;
}
.learn-hero .grad {
  background: linear-gradient(110deg, #cfe2ff, #8fb9ff 45%, #c4b5fd);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.learn-hero .lead { margin: 0 auto; text-align: center; }

.progress-card {
  max-width: 470px; margin: 32px auto 0; padding: 17px 20px;
  border: 1px solid var(--line); border-radius: 15px; background: var(--panel);
}
.pc-top { display: flex; align-items: baseline; gap: 8px; justify-content: center; }
.pc-top b { font-size: 19px; color: #fff; font-weight: 700; }
.pc-top span { font-size: 13.5px; color: var(--ink-dim); }
.bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.075); margin: 12px 0 10px; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #8fb9ff, #c4b5fd); }
.pc-note { margin: 0; font-size: 12.5px; color: var(--ink-faint); text-align: center; }

.idx-h {
  font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 680; margin: 56px 0 18px;
}

/* --------------------------------------------- section cards (by pattern) */
.sec-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); gap: 14px;
}
.sec-card {
  display: flex; flex-direction: column; min-width: 0;
  padding: 20px 22px 18px; text-decoration: none;
  border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(168deg, rgba(255,255,255,.048), rgba(255,255,255,.015));
  transition: border-color .2s, transform .2s, box-shadow .25s;
}
.sec-card:hover {
  border-color: rgba(143,185,255,.42); transform: translateY(-3px);
  box-shadow: 0 24px 46px -30px rgba(143,185,255,.7);
}
.sc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sc-num {
  font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .05em;
  color: var(--accent); background: rgba(143,185,255,.12);
  border: 1px solid rgba(143,185,255,.24); border-radius: 7px; padding: 6px 8px;
}
.sc-n {
  margin-left: auto; font-size: 11.5px; font-weight: 640; letter-spacing: .07em;
  color: var(--ink-faint); text-transform: uppercase;
}
.sc-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.sc-diff { display: flex; gap: 6px; flex-wrap: wrap; row-gap: 7px; }
.sc-diff .d {
  font-size: 11.3px; font-weight: 660; padding: 4px 8px;
  border-radius: 999px; border: 1px solid; white-space: nowrap;
}
.sc-arrow {
  margin-left: auto; font-style: normal; font-size: 16px; color: var(--accent);
  transition: transform .2s;
}
.sec-card:hover .sc-arrow { transform: translateX(3px); }
.sc-diff .easy   { color: #6ee7b7; border-color: rgba(110,231,183,.26); background: rgba(110,231,183,.08); }
.sc-diff .medium { color: var(--warn); border-color: rgba(255,176,87,.26); background: rgba(255,176,87,.08); }
.sc-diff .hard   { color: var(--bad); border-color: rgba(255,122,122,.28); background: rgba(255,122,122,.08); }
.sec-card h3 {
  margin: 0 0 20px; font-size: 20px; line-height: 1.26;
  letter-spacing: -0.45px; font-weight: 690; color: #fff;
}
/* ------------------------------------------------- the cheatsheet promo */
.cheat-card {
  display: grid; grid-template-columns: minmax(0,1fr) 150px; gap: 28px;
  align-items: center; margin-top: 34px; padding: 28px 30px; text-decoration: none;
  border: 1px solid rgba(196,181,253,.26); border-radius: 20px;
  background:
    radial-gradient(620px 300px at 8% 0%, rgba(196,181,253,.13), transparent 62%),
    linear-gradient(135deg, rgba(143,185,255,.055), rgba(255,255,255,.02));
  transition: border-color .2s, transform .2s, box-shadow .25s;
}
.cheat-card:hover {
  border-color: rgba(196,181,253,.5); transform: translateY(-3px);
  box-shadow: 0 26px 52px -32px rgba(196,181,253,.7);
}
.cc-tag {
  display: inline-block; font-size: 11.5px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-2); background: rgba(196,181,253,.12);
  border: 1px solid rgba(196,181,253,.24); border-radius: 999px; padding: 4.5px 11px;
}
.cheat-card h3 {
  margin: 13px 0 9px; font-size: clamp(21px, 3.4vw, 25px);
  letter-spacing: -0.6px; font-weight: 690; color: #fff;
}
.cheat-card p { margin: 0 0 15px; font-size: 15.2px; line-height: 1.64; color: #aab5c8; }
.cc-cta { font-size: 14.5px; font-weight: 620; color: var(--accent-2); }
.cc-side { text-align: center; border-left: 1px solid var(--line); padding-left: 26px; }
.cc-side b { display: block; font-size: 42px; font-weight: 720; letter-spacing: -1.5px; color: #fff; line-height: 1; }
.cc-side span { font-size: 12px; color: var(--ink-faint); letter-spacing: .05em; text-transform: uppercase; }

/* ------------------------------------------------------ cheatsheet index */
.cs-hero { text-align: center; padding: 30px 0 4px; }
.cs-hero h1 {
  font-size: clamp(30px, 5.4vw, 46px); line-height: 1.12; letter-spacing: -1.4px;
  font-weight: 730; margin: 18px 0 14px; color: #fff;
}
.cs-hero .lead { margin: 0 auto; text-align: center; }

.cs-group { margin-top: 54px; }
.cs-gh { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.cs-gh h2 {
  margin: 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--accent);
}
.cs-gh p { margin: 0; font-size: 13.8px; color: var(--ink-faint); }

.cs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 12px; }
.cs-card {
  display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 15px; align-items: start;
  min-width: 0;
  padding: 16px 18px; text-decoration: none;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
  transition: border-color .18s, transform .18s, background .18s;
}
.cs-card:hover { border-color: rgba(143,185,255,.4); transform: translateY(-2px); background: var(--panel-2); }
.cs-num {
  display: grid; place-items: center; width: 38px; height: 38px;
  font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--accent); background: rgba(143,185,255,.11);
  border: 1px solid rgba(143,185,255,.2); border-radius: 10px;
}
.cs-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cs-t { font-size: 15.6px; font-weight: 630; color: var(--ink); line-height: 1.32; }
.cs-card:hover .cs-t { color: #fff; }
.cs-w { font-size: 13.2px; line-height: 1.52; color: var(--ink-faint); }
.cs-w code {
  font: .9em/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(143,185,255,.1); color: #cfe0ff; padding: 1px 4px; border-radius: 4px;
}
.cs-rt { font-size: 12px; color: var(--ink-faint); white-space: nowrap; padding-top: 2px; }
.cs-prose { margin-top: 70px; }

/* --------------------------------------------------- section index (list) */
.qlist { margin: 30px 0 8px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.qrow {
  display: grid; grid-template-columns: 82px minmax(0,1fr) auto auto; gap: 15px; align-items: center;
  padding: 14px 18px; text-decoration: none;
  border-bottom: 1px solid var(--line-soft); transition: background .15s;
}
.qrow:last-child { border-bottom: 0; }
.qrow:hover { background: rgba(143,185,255,.055); }
.qrow .qt { font-size: 15.6px; color: var(--ink); font-weight: 560; }
.qrow:hover .qt { color: #fff; }
.qrow .qlc, .qrow .qrt { font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; }
.qrow .qrt { min-width: 52px; text-align: right; }
.qrow.cs { grid-template-columns: minmax(0,1fr) auto; }

.section-intro { font-size: 16.4px; }
.section-intro > :first-child { margin-top: 0; }
.section-intro h2:first-of-type { margin-top: 34px; }

/* ------------------------------------------- prerequisites, as cards */
.prereqs { margin: 54px 0 0; }
.prereqs h2 {
  font-size: clamp(21px, 3.4vw, 25px); letter-spacing: -0.5px; font-weight: 680; color: #fff;
  margin: 0 0 6px; padding-top: 22px; border-top: 1px solid var(--line-soft);
  scroll-margin-top: 20px;
}
.pq-intro { margin: 0 0 16px; color: var(--ink-dim); font-size: 15.4px; }
.pq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); gap: 13px; }
.pq {
  display: grid; grid-template-columns: 34px minmax(0,1fr); grid-template-rows: auto auto;
  min-width: 0;
  column-gap: 13px; row-gap: 5px; align-items: start;
  padding: 16px 18px; text-decoration: none; border: 1px solid var(--line);
  border-radius: 14px; background: var(--panel);
  transition: border-color .18s, transform .18s, background .18s;
}
.pq:hover { border-color: rgba(143,185,255,.38); transform: translateY(-2px); background: var(--panel-2); }
.pq-n {
  grid-row: 1 / span 2; display: grid; place-items: center; width: 34px; height: 34px;
  font: 700 12.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent);
  background: rgba(143,185,255,.11); border: 1px solid rgba(143,185,255,.2); border-radius: 9px;
}
.pq-t { font-size: 15.2px; font-weight: 620; color: var(--ink); line-height: 1.34; }
.pq:hover .pq-t { color: #fff; }
.pq-w { font-size: 13.5px; line-height: 1.58; color: var(--ink-dim); }
.pq-w code {
  font-size: .9em; background: rgba(143,185,255,.1); color: #cfe0ff;
  padding: 1px 5px; border-radius: 5px; border: 1px solid rgba(143,185,255,.14);
}
.pq.dead { opacity: .55; }

/* ----------------------------------------------------------------- mobile */
@media (max-width: 1040px) {
  /* Not enough width for a rail beside the text. It becomes a panel above the
     article, closed by default so it costs one line instead of a screenful. */
  .doc-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc {
    position: static; max-height: none; overflow: visible;
    margin: 0 0 26px; padding: 4px 16px 4px;
    border: 1px solid var(--line); border-radius: 13px; background: var(--panel);
  }
  .toc-h { cursor: pointer; padding: 13px 0; font-size: 11px; }
  .toc-h i {
    display: block; margin-left: auto; width: 8px; height: 8px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s;
  }
  .toc.open .toc-h i { transform: rotate(-135deg) translate(-3px, -3px); }
  .toc ul { display: none; border-left: 0; padding: 0 0 12px; }
  .toc.open ul { display: block; }
  .toc a { padding: 8px 0 8px 12px; border-left: 2px solid var(--line-soft); margin-left: 0; }
  .doc { max-width: none; }
}
@media (max-width: 860px) {
  .doc-wrap { padding: 24px 18px 70px; }
  .idx-wrap { padding: 30px 18px 74px; }
  .crumb-in { padding: 10px 18px; font-size: 12.5px; gap: 7px; }
  .cheat-card { grid-template-columns: 1fr; gap: 20px; padding: 24px 22px; }
  .cc-side {
    border-left: 0; border-top: 1px solid var(--line); padding: 16px 0 0;
    display: flex; align-items: baseline; justify-content: center; gap: 9px;
  }
  .cc-side b { font-size: 30px; }
}
@media (max-width: 620px) {
  .doc { font-size: 16.2px; line-height: 1.7; }
  .doc h2 { margin-top: 42px; padding-top: 18px; }
  .doc h3 { margin-top: 32px; }
  .doc ul, .doc ol { padding-left: 19px; }
  .doc blockquote { padding: 13px 16px; margin: 20px 0; }
  .code pre { padding: 14px 15px; }
  .code code { font-size: 12.7px; line-height: 1.62; }
  .code-lang { display: none; }          /* the fence is obvious; the label is not worth the width */
  .pager { grid-template-columns: 1fr; }
  .pg.next { text-align: left; }
  .plug { padding: 22px 20px; }
  .sec-grid, .cs-grid, .pq-grid { grid-template-columns: minmax(0, 1fr); }
  .qrow { grid-template-columns: 74px minmax(0,1fr) auto; gap: 11px; padding: 13px 15px; }
  .qrow .qlc { display: none; }
  .qrow .qt { font-size: 15px; }
  .learn-hero { padding-top: 18px; }
  .progress-card { padding: 15px 17px; }
  .cs-gh { gap: 6px; }
  .cs-gh p { flex-basis: 100%; }
  .idx-h { margin: 44px 0 14px; }
}
@media (max-width: 400px) {
  .doc-wrap, .idx-wrap { padding-left: 14px; padding-right: 14px; }
  .sec-card, .cheat-card { padding: 19px 18px; }
  .qrow { grid-template-columns: 1fr auto; }
  .qrow .diff { display: none; }
}

/* The first heading sits directly under the title; a rule there separates the
   title from nothing and leaves a dead band. */
.doc > h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 36px; }

/* ------------------------------------- cheatsheet index: the closing blocks */
.cs-block { margin-top: 56px; }
.cs-block > h2 {
  font-size: clamp(22px, 3.4vw, 27px); letter-spacing: -0.6px; font-weight: 690;
  color: #fff; margin: 0 0 8px; scroll-margin-top: 20px;
}
.cs-lead { margin: 0 0 20px; font-size: 15.4px; line-height: 1.62; color: var(--ink-dim); max-width: 68ch; }

/* --- glossary: a term is a label, so it reads as one */
.vocab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 10px; }
.vocab {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel);
}
.vocab-t { font-size: 14.4px; font-weight: 660; color: #fff; }
.vocab-t code, .vocab-m code {
  font: .89em/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(143,185,255,.12); color: #d2e2ff;
  padding: 1.5px 5px; border-radius: 5px; border: 1px solid rgba(143,185,255,.16);
}
.vocab-m { font-size: 13.6px; line-height: 1.55; color: var(--ink-dim); }
.vocab-m a { color: var(--accent); text-decoration: none; }

/* --- the ranked mechanics: the rank is the point, so it is the loudest thing */
.ranked { list-style: none; margin: 0; padding: 0; counter-reset: rk; }
.ranked li {
  display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 16px; align-items: baseline;
  padding: 13px 4px; border-bottom: 1px solid var(--line-soft);
}
.ranked li:last-child { border-bottom: 0; }
.rk {
  font: 700 21px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -1px;
  background: linear-gradient(135deg, #cfe2ff, #8fb9ff 55%, #c4b5fd);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rk-t { font-size: 15.4px; line-height: 1.6; color: #cdd6e5; }
.rk-t strong { color: #fff; font-weight: 640; }
.rk-t code {
  font: .89em/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(143,185,255,.11); color: #d2e2ff; padding: 1.5px 5px; border-radius: 5px;
}
.rk-t a { color: var(--ink-faint); text-decoration: none; font-size: .92em; }
.rk-t a:hover { color: var(--accent); }

/* --- the five arguments: each is a thing you say out loud, so give it a card */
.arg-grid { display: grid; gap: 12px; }
.arg {
  display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 16px;
  padding: 18px 20px; border: 1px solid var(--line); border-radius: 15px;
  background: linear-gradient(150deg, rgba(255,255,255,.04), rgba(255,255,255,.014));
}
.arg-n {
  display: grid; place-items: center; width: 40px; height: 40px;
  font: 700 16px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent);
  background: rgba(143,185,255,.11); border: 1px solid rgba(143,185,255,.22); border-radius: 11px;
}
.arg h4 {
  margin: 0 0 6px; font-size: 16.2px; font-weight: 660; color: #fff; line-height: 1.34;
}
.arg h4 code {
  font: .9em/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(143,185,255,.13); color: #d8e6ff; padding: 1.5px 6px; border-radius: 5px;
}
.arg p { margin: 0; font-size: 14.6px; line-height: 1.64; color: var(--ink-dim); }
.arg p code {
  font: .89em/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(143,185,255,.1); color: #cfe0ff; padding: 1px 5px; border-radius: 5px;
}

/* --- the decision tree: a procedure you run, framed as one */
.b-tree { padding: 0; }
.tree-body {
  max-width: none; margin-top: 18px; padding: 24px 26px 8px;
  border: 1px solid rgba(143,185,255,.22); border-radius: 18px;
  background:
    radial-gradient(640px 280px at 6% 0%, rgba(143,185,255,.08), transparent 62%),
    rgba(255,255,255,.016);
  font-size: 15.8px;
}
.tree-body > p:first-child { margin-top: 0; }
.tree-body h3 {
  margin: 30px 0 12px; font-size: 16.5px; font-weight: 700; color: var(--accent);
  letter-spacing: .01em; border-top: 1px solid var(--line-soft); padding-top: 22px;
}
.tree-body > h3:first-of-type { border-top: 0; padding-top: 0; margin-top: 4px; }
.tree-body table { font-size: 14.2px; }
.tree-body .table-wrap { margin: 14px 0 20px; }

@media (max-width: 620px) {
  .cs-block { margin-top: 44px; }
  .vocab-grid { grid-template-columns: minmax(0, 1fr); }
  .ranked li { grid-template-columns: 32px minmax(0,1fr); gap: 12px; }
  .rk { font-size: 18px; }
  .arg { grid-template-columns: 34px minmax(0,1fr); gap: 13px; padding: 16px 16px; }
  .arg-n { width: 34px; height: 34px; font-size: 14px; }
  .tree-body { padding: 18px 16px 4px; font-size: 15.2px; }
}

/* ------------------------------------------------------------------ figures */
.fig { margin: 26px 0; padding: 0; }
.fig img {
  display: block; width: 100%; height: auto; max-width: 100%;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255,255,255,.022);
}
.fig figcaption {
  margin-top: 10px; font-size: 13.4px; line-height: 1.55;
  color: var(--ink-faint); text-align: center;
}

/* ------------------------------------------------------------------ courses */
.course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; }
.course-card {
  display: flex; flex-direction: column; padding: 24px 26px 20px; text-decoration: none;
  border: 1px solid rgba(94,234,212,.2); border-radius: 18px;
  background:
    radial-gradient(520px 260px at 12% 0%, rgba(94,234,212,.09), transparent 62%),
    linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  transition: border-color .2s, transform .2s, box-shadow .25s;
}
.course-card:hover {
  border-color: rgba(94,234,212,.42); transform: translateY(-3px);
  box-shadow: 0 24px 46px -30px rgba(94,234,212,.6);
}
.cc-kind {
  align-self: flex-start; font-size: 11px; font-weight: 680; letter-spacing: .09em;
  text-transform: uppercase; color: var(--good); background: rgba(94,234,212,.1);
  border: 1px solid rgba(94,234,212,.24); border-radius: 999px; padding: 4px 11px;
}
.course-card h3 {
  margin: 14px 0 8px; font-size: 22px; letter-spacing: -0.5px; font-weight: 690; color: #fff;
}
.course-card p { margin: 0 0 18px; font-size: 14.8px; line-height: 1.6; color: #aab5c8; flex: 1; }
.cc-foot {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.6px; color: var(--ink-faint); font-weight: 560;
}
.cc-foot i { margin-left: auto; font-style: normal; font-size: 16px; color: var(--good); transition: transform .2s; }
.course-card:hover .cc-foot i { transform: translateX(3px); }
.cc-dot { opacity: .5; }

/* --- course index */
.course-hero { text-align: center; padding: 30px 0 6px; }
.course-hero h1 {
  font-size: clamp(28px, 5vw, 42px); line-height: 1.14; letter-spacing: -1.2px;
  font-weight: 730; margin: 18px auto 22px; color: #fff; max-width: 20ch;
}
.course-intro { max-width: 760px; margin: 26px auto 0; font-size: 16.2px; }
.course-intro h2 { font-size: 21px; }

.cpart { margin-top: 46px; }
.cpart > h2 {
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: var(--accent); margin: 0 0 14px; scroll-margin-top: 20px;
}
.clist { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.crow {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  text-decoration: none; border-bottom: 1px solid var(--line-soft); transition: background .15s;
}
.crow:last-child { border-bottom: 0; }
.crow:hover { background: rgba(143,185,255,.055); }
.cr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cr-t { font-size: 15.4px; color: var(--ink); font-weight: 560; }
.cr-w { font-size: 13.3px; line-height: 1.5; color: var(--ink-faint); }
.cr-w code {
  font: .89em/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(143,185,255,.1); color: #cfe0ff; padding: 1px 4px; border-radius: 4px;
}
.crow:hover .cr-t { color: #fff; }
.crow { align-items: flex-start; }
.cr-meta { padding-top: 1px; }
.cr-n {
  font-style: normal; font-size: 12px; color: var(--ink-faint); font-weight: 500;
  margin-left: 9px; white-space: nowrap;
}
.cr-meta { display: flex; align-items: center; gap: 9px; flex: none; }
.cr-rt { font-size: 12.2px; color: var(--ink-faint); white-space: nowrap; min-width: 46px; text-align: right; }
.crow.is-outline .cr-t { color: var(--ink-dim); font-weight: 500; }

/* difficulty, the author's own four tiers */
.lv {
  font-size: 11.2px; font-weight: 660; padding: 3.5px 9px; border-radius: 999px;
  border: 1px solid; white-space: nowrap;
}
.lv.beginner     { color: #6ee7b7; border-color: rgba(110,231,183,.28); background: rgba(110,231,183,.08); }
.lv.intermediate { color: var(--warn); border-color: rgba(255,176,87,.28); background: rgba(255,176,87,.08); }
.lv.advanced     { color: var(--bad); border-color: rgba(255,122,122,.3); background: rgba(255,122,122,.08); }
.lv.expert       { color: var(--accent-2); border-color: rgba(196,181,253,.32); background: rgba(196,181,253,.1); }

.tag-outline {
  font-size: 10.8px; font-weight: 660; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-faint); border: 1px dashed var(--line);
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}

/* --- chapter page furniture */
.notice {
  margin: 4px 0 26px; padding: 15px 18px;
  border: 1px dashed rgba(255,176,87,.34); border-radius: 13px;
  background: rgba(255,176,87,.055); color: var(--ink-dim);
  font-size: 14.6px; line-height: 1.62;
}
.notice b { color: var(--warn); font-weight: 660; }
.chapter-kids {
  margin: 0 0 30px; padding: 16px 20px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
}
.ck-h {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 680; margin-bottom: 10px;
}
.chapter-kids ol { margin: 0; padding-left: 20px; }
.chapter-kids li { margin: 6px 0; font-size: 14.6px; }
.chapter-kids a { color: var(--ink-dim); text-decoration: none; }
.chapter-kids a:hover { color: var(--accent); }
.chapter-kids .tag-outline { margin-left: 8px; }

@media (max-width: 620px) {
  .course-grid { grid-template-columns: minmax(0, 1fr); }
  .crow { flex-wrap: wrap; gap: 8px; padding: 13px 15px; }
  .cr-t { flex-basis: 100%; }
  .cr-rt { min-width: 0; }
  .course-intro { font-size: 15.6px; }
}