/* Palette mirrors the reference site: Tailwind neutral scale, no accent hue.
   Emphasis comes from brightness and weight, never from colour. */
:root{
  --bg:#0a0a0a; --panel:#171717; --panel2:#262626; --fg:#fafafa; --muted:#a1a1a1; --faint:#737373;
  --line:#ffffff1a; --line-strong:#ffffff26; --accent:#fafafa;
  --mark:#171717; --markfg:#a1a1a1; --code:#262626;
  --btn-bg:#fafafa; --btn-ink:#171717;
  --sans:"Geist","Geist Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",
    Helvetica,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
}
:root[data-theme="light"]{
  --bg:#ffffff; --panel:#f5f5f5; --panel2:#e9e9e6; --fg:#0a0a0a; --muted:#737373; --faint:#a3a3a3;
  --line:#e5e5e5; --line-strong:#d4d4d4; --accent:#0a0a0a;
  --mark:#f5f5f5; --markfg:#737373; --code:#f5f5f5;
  --btn-bg:#171717; --btn-ink:#fafafa;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);
  font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:inherit}
.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;background:var(--panel);padding:8px;z-index:99}

.theme{position:fixed;top:1rem;right:1.2rem;z-index:20;width:62px;height:32px;
  border-radius:16px;background:var(--panel2);color:var(--muted);
  border:1px solid var(--line);cursor:pointer;font-size:13px}
.theme:hover{color:var(--fg);border-color:var(--line-strong);background:var(--panel)}
.sg-dl{position:fixed;top:1rem;right:calc(1.8rem + 62px);z-index:20}
.sg-cta-mobile{display:none}
.menu{display:none}

.layout{display:grid;grid-template-columns:272px minmax(0,1fr)}
.sidebar{border-right:1px solid var(--line);padding:1.25rem 0 0;
  position:sticky;top:0;height:100vh;overflow:hidden;background:var(--bg);
  display:flex;flex-direction:column}
/* only the chapter list scrolls; brand stays on top, CTA stays on the bottom */
#nav{flex:1 1 auto;overflow-y:auto;min-height:0;padding-bottom:5rem}
.sg-brand,.sg-nav-label{flex:none}
/* Fixed to the viewport, not laid out inside the sidebar's flex column — it
   must stay put no matter how tall the open chapter is or how far you scroll. */
.sg-cta{position:fixed;left:0;bottom:0;width:272px;z-index:25;
  padding:1rem 1.25rem 1.2rem;border-top:1px solid var(--line);background:var(--bg)}
.sg-cta a{display:block;text-align:center;background:var(--btn-bg);color:var(--btn-ink);
  border:1px solid transparent;border-radius:8px;padding:.5rem .9rem;
  font-size:.875rem;font-weight:500;text-decoration:none;transition:opacity .15s}
.sg-cta a:hover{opacity:.9}

.sg-brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;
  border-bottom:1px solid var(--line);margin-bottom:.75rem;padding:0 1.25rem 1.1rem}
.sg-pfp{width:30px;height:30px;border-radius:50%;display:block;
  border:1px solid var(--line)}
.sg-t{font-size:.9rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.sg-brand:hover .sg-t{color:var(--muted)}
.sg-nav-label{color:var(--muted);padding:.4rem 1.25rem .5rem;font-size:.8rem}

.sg-chap-group{margin:0 .75rem .1rem}
a.sg-chap{display:flex;align-items:baseline;gap:.5rem;padding:.35rem .5rem;
  border-radius:6px;color:var(--fg);font-size:.875rem;font-weight:400;
  text-decoration:none;transition:background-color .15s,color .15s}
a.sg-chap:hover{background:var(--panel)}
a.sg-chap .sg-num{color:var(--faint);font-size:.72rem;font-weight:400;
  font-variant-numeric:tabular-nums;font-family:var(--mono)}
.sg-chap-group.active a.sg-chap{background:var(--panel2);font-weight:500}
.sg-chap-group.active a.sg-chap .sg-num{color:var(--muted)}

/* the 0fr -> 1fr grid row is what animates the accordion open */
.sg-subs{display:grid;grid-template-rows:0fr}
/* No transition on grid-template-rows: animating it stops the 1fr resolving
   to content height (it collapses to the padding). The reference site
   doesn't animate this either. */
.sg-chap-group.active .sg-subs{grid-template-rows:1fr}
.sg-subs-inner{min-height:0;overflow:hidden;padding:0 0 .05rem}
.sg-chap-group.active .sg-subs-inner{padding-bottom:.5rem}

a.sg-sub{display:block;color:var(--muted);border-radius:6px;
  padding:.22rem .5rem .22rem 1.9rem;font-size:.8rem;text-decoration:none;
  transition:color .15s,background-color .15s}
a.sg-sub:hover{color:var(--fg);background:var(--panel)}
a.sg-sub.active{color:var(--fg);font-weight:500}

.sg-dl{display:inline-flex;align-items:center;height:32px;padding:0 .8rem;
  border-radius:8px;background:var(--panel2);color:var(--fg);
  border:1px solid var(--line);font-size:.8rem;font-weight:500;
  text-decoration:none;white-space:nowrap}
.sg-dl:hover{background:var(--panel);border-color:var(--line-strong)}

main{max-width:48rem;margin:0 auto;padding:3.5rem 3rem 6rem;min-width:0}
.crumb{font-size:.81rem;color:var(--muted);margin-bottom:20px}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--fg)}

.hero{margin-bottom:3rem}
.hero h1{font-size:2.4rem;line-height:1.15;margin:0 0 .8rem;letter-spacing:-.03em;
  font-weight:700}
.tagline{font-size:1.1rem;color:var(--muted);line-height:1.65;margin:0 0 .3rem}
.meta{color:var(--muted);font-size:1.1rem;line-height:1.65;margin:0;max-width:36rem}

/* Content typography mirrors the reference: no bullet markers, each item is
   a padded row separated by a hairline, and the bold lead-in is its own
   block line with the explanation in muted grey underneath. That block/grey
   split is what stops each item reading as one dense paragraph. */
/* 02: ghosted chapter numeral so position is obvious while scrolling */
.chapter{border-top:1px solid var(--line);margin-top:2.5rem;padding-top:2.5rem;
  scroll-margin-top:72px;position:relative}
.chead{position:relative}
.chead .ghost{position:absolute;right:0;top:-1.6rem;font-family:var(--mono);
  font-size:5.5rem;line-height:1;font-weight:600;color:var(--fg);opacity:.05;
  pointer-events:none;user-select:none;letter-spacing:-.04em}

/* 01: pulled-out numbers, so the receipts don't read like every other line */
.stat{margin:1.4rem 0;padding:1.1rem 1.25rem;border:1px solid var(--line);
  border-left:2px solid var(--fg);border-radius:8px;background:var(--panel)}
.stat b{display:block;font-size:1.9rem;line-height:1.1;letter-spacing:-.03em;
  color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
.stat figcaption{margin-top:.35rem;color:var(--muted);font-size:.9rem;line-height:1.5}

/* 05 */
.herostats{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:1.1rem 0 0;
  font-family:var(--mono);font-size:.78rem;color:var(--faint);
  font-variant-numeric:tabular-nums}
.herostats span{position:relative}
.herostats span+span:before{content:"";position:absolute;left:-.75rem;top:.35em;
  width:3px;height:3px;border-radius:50%;background:var(--line-strong)}
.chapter:first-of-type{border-top:0;margin-top:1.5rem;padding-top:0}
.chead{border:0;padding:0;margin:0 0 .5rem}
.chead .num{color:var(--muted);font-size:.8rem}
.chead h2{font-size:1.75rem;font-weight:600;letter-spacing:-.025em;margin:.25rem 0 1.25rem}
.chead p{color:var(--muted);margin:0 0 .5rem;max-width:36rem}

.lesson{scroll-margin-top:72px}
.lesson h3{font-size:1.15rem;font-weight:600;letter-spacing:-.015em;
  margin:2.25rem 0 .6rem;line-height:1.4}
.lead{color:var(--muted);font-size:1rem;line-height:1.7;border:0;padding:0;
  margin:0 0 .6rem;max-width:none}

.lesson ul{margin:0 -.9rem;padding:0;list-style:none}
.lesson ul>li{position:relative;color:var(--muted);margin:0;
  padding:1.35rem .9rem 1.4rem;border-radius:8px;line-height:1.7;
  transition:background-color .15s}
.lesson ul>li+li:before{content:"";position:absolute;top:0;left:.9rem;right:.9rem;
  height:1px;background:var(--line)}
.lesson ul>li:hover{background:var(--panel)}
.lesson ul>li:hover:before,.lesson ul>li:hover+li:before{opacity:0}
/* the claim, on its own line */
.lesson ul>li>strong:first-child,
.lesson ul>li>p:first-child>strong:first-child{display:block;color:var(--fg);
  font-size:1.02rem;line-height:1.4;letter-spacing:-.01em;margin-bottom:.3rem}
.lesson ul>li>p{color:var(--muted);margin:.7rem 0 0}
.lesson ul>li>p:first-child{margin-top:0}
.lesson strong{color:var(--fg);font-weight:600}
.lesson p{margin:.35rem 0}

/* nested items get a short dash rather than a second bullet level */
.lesson ul ul{margin:.5rem 0 0;padding:0}
.lesson ul ul>li{color:var(--muted);padding:.2rem 0 .2rem 1.1rem;border-radius:0;
  font-size:inherit}
.lesson ul ul>li:before{content:"";position:absolute;left:.1rem;right:auto;
  top:calc(.2rem + .8em);width:4px;height:1px;background:var(--faint);opacity:1}
.lesson ul ul>li:hover{background:none}
.lesson ul ul>li>strong:first-child{display:inline;font-size:inherit;
  line-height:inherit;margin:0}
.lesson ol{margin:.5rem 0 .2rem;padding-left:1.3rem;color:var(--muted)}
.lesson ol li{margin-bottom:.35rem;padding-left:.2rem}
.lesson ol li::marker{color:var(--muted);font-weight:400}
.lesson code{background:var(--panel2);color:var(--fg);border:0;border-radius:4px;
  padding:.12em .35em;font-size:.85em;font-family:var(--mono)}
.lesson a{color:var(--fg);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--line-strong)}
.lesson a:hover{text-decoration-color:var(--fg)}

@media(max-width:940px){
  .layout{grid-template-columns:1fr}
  .menu{display:flex;align-items:center;justify-content:center;position:fixed;
    top:1rem;left:1.2rem;z-index:40;width:38px;height:38px;border-radius:8px;
    background:var(--panel2);border:1px solid var(--line);color:var(--fg);
    cursor:pointer;font-size:15px}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:min(320px,86vw);z-index:35;
    transform:translateX(-100%);transition:transform .22s;padding-top:4.2rem}
  .sidebar.open{transform:none;box-shadow:0 0 40px #00000059}
  main{padding:5rem 1.3rem 4rem}
  .sg-dl{right:1.2rem;top:auto;bottom:1rem}
  .theme{top:1rem;right:1.2rem;width:36px;border-radius:8px}
  /* the sidebar (and its CTA) is off-canvas on mobile, so surface it here */
  .sg-cta-mobile{display:inline-flex;align-items:center;position:fixed;z-index:40;
    top:1rem;right:calc(1.2rem + 46px);height:36px;padding:0 .8rem;border-radius:8px;
    background:var(--btn-bg);color:var(--btn-ink);font-size:.85rem;font-weight:500;
    text-decoration:none;white-space:nowrap}
  .sidebar{padding-top:4.6rem}
  .sg-cta{position:static;width:auto}
  #nav{padding-bottom:1rem}
  .hero h1{font-size:1.95rem}
  .lesson h3{font-size:1.08rem}
  .chead .ghost{font-size:3.4rem;top:-1rem;opacity:.045}
  .stat b{font-size:1.55rem}
}