:root{
  --void:#0c0a16; --slab:#13101f; --slab2:#181428; --edge:#272138;
  --read:#e9e6f2; --dim:#a39bbd; --violet:#8b5cf6; --violet2:#8b5cf6; --violet-wash:#1a1330;
  --rise:#34d399; --fall:#fb7185;
  --display:'Syne',system-ui,-apple-system,sans-serif;
  --read-face:'Atkinson Hyperlegible',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--read);font-family:var(--read-face);
  line-height:1.68;font-size:17px;-webkit-font-smoothing:antialiased}
.tmd-shell{max-width:1000px;margin:0 auto;padding:0 24px}
a{color:var(--violet2);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--display);line-height:1.14;font-weight:700;color:#fff;letter-spacing:-.018em}
h2{font-size:clamp(1.42rem,2.7vw,2rem);margin:0 0 .5em}
h3{font-size:1.14rem;margin:1.5em 0 .35em;color:#fff}
p{margin:.78em 0}
.tmd-dim{color:var(--dim)}
section{padding:48px 0}
section + section{border-top:1px solid var(--edge)}
.tmd-tab{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--violet2);margin-bottom:14px}
/* top bar */
.tmd-bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:14px 24px;background:rgba(12,10,22,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--edge)}
.tmd-brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;
  color:#fff;font-size:1.02rem;letter-spacing:-.01em}
.tmd-brand .node{width:11px;height:11px;border-radius:50%;background:var(--violet);
  box-shadow:0 0 12px var(--violet2)}
.tmd-rail{display:flex;gap:22px;list-style:none;margin:0;padding:0;font-size:.93rem}
.tmd-rail a{color:var(--dim)}
.tmd-rail a:hover{color:var(--read);text-decoration:none}
.tmd-jump{border:1px solid var(--violet);color:var(--violet2)!important;padding:8px 15px;border-radius:8px;
  font-weight:700;font-size:.86rem}
.tmd-jump:hover{background:var(--violet-wash);text-decoration:none}
.tmd-toggle{display:none;background:none;border:0;cursor:pointer;width:30px;height:24px}
.tmd-toggle span{display:block;height:2px;background:var(--read);margin:5px 0;border-radius:2px}
.tmd-sheet{display:none;flex-direction:column;padding:6px 24px 18px;border-bottom:1px solid var(--edge);
  background:var(--slab)}
.tmd-sheet a{color:var(--read);padding:11px 0;border-bottom:1px solid var(--edge);font-size:1rem}
.tmd-sheet.open{display:flex}
/* lead / hero */
.tmd-lead{padding:66px 0 46px;background:radial-gradient(120% 130% at 12% 0%,var(--violet-wash),var(--void) 60%)}
.tmd-flag{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--violet2)}
.tmd-lead h1{font-size:clamp(2.1rem,4.7vw,3.15rem);margin:.3em 0 .35em;max-width:19ch;color:#fff}
.tmd-thesis{font-size:1.18rem;color:#d6d0ea;max-width:63ch}
.tmd-chips{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px;font-size:.88rem}
.tmd-chip{background:var(--slab);border:1px solid var(--edge);border-radius:999px;padding:8px 15px;color:var(--dim)}
.tmd-chip b{color:var(--violet2);font-weight:700}
.tmd-go{display:inline-block;margin-top:28px;background:var(--violet);color:#fff;font-weight:700;
  padding:13px 25px;border-radius:9px;font-size:.98rem}
.tmd-go:hover{background:var(--violet2);text-decoration:none}
.tmd-body{font-size:1.08rem;color:#ddd8ec;max-width:66ch}
/* panels & cards */
.tmd-box{background:var(--slab);border:1px solid var(--edge);border-radius:15px;padding:26px 28px;margin:22px 0}
.tmd-box.spot{border-color:#3b2a63;background:linear-gradient(180deg,var(--violet-wash),var(--slab));
  box-shadow:0 0 0 1px rgba(109,40,217,.18) inset}
.tmd-grid{display:grid;gap:18px}
@media(min-width:720px){.tmd-trio{grid-template-columns:repeat(3,1fr)}.tmd-duo{grid-template-columns:1fr 1fr}}
.tmd-cell{background:var(--slab);border:1px solid var(--edge);border-radius:13px;padding:22px}
.tmd-cell h3{margin-top:0}
.tmd-num{font-family:var(--display);font-size:1.55rem;color:var(--violet2);font-weight:800;line-height:1}
.tmd-pill{font-family:var(--display);font-size:.7rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--violet2)}
/* point lists */
.tmd-list{list-style:none;padding:0;margin:18px 0}
.tmd-list li{position:relative;padding:11px 0 11px 30px;border-bottom:1px solid var(--edge);color:#d6d0ea}
.tmd-list li:before{content:"";position:absolute;left:5px;top:19px;width:8px;height:8px;
  background:var(--violet);border-radius:50%}
/* record table */
.tmd-pan{overflow-x:auto;margin:22px 0}
table{border-collapse:collapse;width:100%;font-size:.93rem;min-width:540px}
caption{caption-side:bottom;text-align:left;color:var(--dim);font-size:.83rem;padding-top:11px}
th,td{padding:12px 14px;border-bottom:1px solid var(--edge);text-align:left}
thead th{font-family:var(--display);font-size:.71rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);font-weight:700}
td .up{color:var(--rise);font-weight:700}
/* breadcrumb + prose */
.tmd-crumbs{font-size:.83rem;color:var(--dim);padding:18px 0 0}
.tmd-crumbs a{color:var(--dim)}
.tmd-crumbs .gt{opacity:.5;margin:0 7px}
.tmd-intro{font-size:1.18rem;color:#d6d0ea;max-width:64ch;margin:.5em 0 0}
.tmd-prose h3{color:var(--violet2)}
.tmd-prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;
  background:var(--slab2);padding:2px 6px;border-radius:4px;color:var(--violet2)}
.tmd-mark{border-left:3px solid var(--violet);background:var(--violet-wash);padding:8px 0 8px 16px;
  margin:20px 0;color:#cfc8e6;font-size:.96rem}
/* worked-example block: a framed step ledger, distinct from .tmd-mark */
.tmd-work{background:var(--slab2);border:1px solid var(--edge);border-left:3px solid var(--violet2);
  border-radius:0 14px 14px 0;padding:20px 22px;margin:24px 0}
.tmd-work .tmd-pill{margin-bottom:11px}
.tmd-work code,.tmd-prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;
  background:#0a0814;border:1px solid var(--edge);border-radius:4px;padding:1px 6px;color:var(--violet2);
  word-break:break-word}
.tmd-work ol{margin:0;padding-left:21px}
.tmd-work ol li{padding:7px 0;color:#d6d0ea}
.tmd-work ol li b{color:#fff}
.tmd-ledger{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88rem;color:#cfc8e6;
  background:#0a0814;border:1px solid var(--edge);border-radius:9px;padding:14px 16px;margin:14px 0;
  line-height:1.9;overflow-x:auto}
.tmd-ledger .k{color:var(--dim)}
.tmd-ledger .v{color:var(--violet2);font-weight:700}
/* on-brand inline diagram frame (violet on ink) */
figure.tmd-fig{margin:26px 0;background:var(--slab);border:1px solid var(--edge);border-radius:16px;
  padding:20px 20px 12px}
figure.tmd-fig svg{display:block;width:100%;height:auto;max-width:780px;margin:0 auto}
figure.tmd-fig figcaption{font-size:.86rem;color:var(--dim);text-align:center;margin-top:12px;
  max-width:62ch;margin-left:auto;margin-right:auto}
.tmd-diag .dg-box{fill:var(--slab2);stroke:#3b2a63;stroke-width:1.2}
.tmd-diag .dg-edge{stroke:var(--violet2);stroke-width:1.7;fill:none}
.tmd-diag .dg-band{fill:var(--violet-wash);stroke:#3b2a63;stroke-width:1}
.tmd-diag .dg-mid{stroke:var(--dim);stroke-width:1;stroke-dasharray:5 4}
.tmd-diag .dg-px{stroke:var(--violet2);stroke-width:2;fill:none;stroke-linejoin:round;stroke-linecap:round}
.tmd-diag .dg-h{font-family:'Syne',sans-serif;font-size:12px;fill:#fff;font-weight:700}
.tmd-diag .dg-t{font-family:'Atkinson Hyperlegible',sans-serif;font-size:10px;fill:#a39bbd}
.tmd-diag .dg-ax{font-family:'Atkinson Hyperlegible',sans-serif;font-size:10.5px;fill:#a39bbd}
.tmd-diag .dg-good{fill:#34d399;font-family:'Atkinson Hyperlegible',sans-serif;font-size:10.5px;font-weight:700}
.tmd-diag .dg-bad{fill:#fb7185;font-family:'Atkinson Hyperlegible',sans-serif;font-size:10.5px;font-weight:700}
.tmd-diag .dg-acc{fill:var(--violet2);font-family:'Syne',sans-serif;font-size:11px;font-weight:700}
.tmd-diag .dg-dot{fill:var(--violet)}
/* related block at the foot of a leaf / hub page */
.tmd-rel{margin:34px 0 0;border-top:1px solid var(--edge);padding-top:22px}
.tmd-rel .hd{font-family:var(--display);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--violet2);margin-bottom:13px}
.tmd-rel .row{display:grid;gap:11px}
@media(min-width:620px){.tmd-rel .row{grid-template-columns:1fr 1fr}}
.tmd-rel a.r{display:block;border:1px solid var(--edge);border-radius:11px;padding:13px 15px;
  background:var(--slab);color:var(--read)}
.tmd-rel a.r:hover{border-color:#3b2a63;text-decoration:none}
.tmd-rel a.r b{color:var(--violet2);display:block;font-size:.96rem}
.tmd-rel a.r span{color:var(--dim);font-size:.85rem}
/* footer */
.tmd-foot{border-top:1px solid var(--edge);background:var(--slab2);margin-top:34px;padding:46px 0 32px}
.tmd-foot .span{display:grid;gap:24px}
@media(min-width:720px){.tmd-foot .span{grid-template-columns:2fr 1fr 1fr 1fr}}
.tmd-foot a{color:var(--dim);display:block;padding:3px 0}
.tmd-foot a:hover{color:var(--violet2)}
.tmd-foot .cap{color:#fff;font-family:var(--display);font-size:.95rem;font-weight:700;margin-bottom:10px}
.tmd-fine{color:#7d7596;font-size:.82rem;margin-top:26px;border-top:1px solid var(--edge);padding-top:18px}
@media(max-width:719px){.tmd-rail{display:none}.tmd-toggle{display:block}}

/* a11y + responsive polish */
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:3px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms !important;transition-duration:.01ms !important}}
@media(max-width:719px){table{min-width:0}th,td{padding:8px 10px}}

/* <=768px: reflow .tmd-pan tables into stacked cards so no column scrolls off a phone. Each row becomes a card; the column header rides each cell via data-label. CSS only - the table data and the order of cells are untouched. */
@media(max-width:768px){.tmd-pan{overflow-x:visible}.tmd-pan table{min-width:0;font-size:.92rem}.tmd-pan thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.tmd-pan tr{display:block;margin:0 0 14px;padding:4px 14px 8px;border:1px solid var(--edge);border-radius:11px;background:var(--slab2)}.tmd-pan td{display:block;border-bottom:1px solid var(--edge);padding:9px 0;text-align:left}.tmd-pan tr td:last-child{border-bottom:0}.tmd-pan td[data-label]::before{content:attr(data-label);display:block;font-family:var(--display);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:700;margin-bottom:3px}}