:root{
  --primary:#31adf5;
  --ink:#16222c;
  --muted:#5c6b76;
  --line:#dfe6ea;
  --paper:#ffffff;
  --wash:#f4f8fa;
  --rail:264px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--wash);
  color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- index: the app's own left menu ---------- */
#index{
  position:fixed;inset:0 auto 0 0;width:var(--rail);z-index:40;
  transition:width .18s ease;
  background:var(--paper);border-right:1px solid var(--line);
  overflow-y:auto;overscroll-behavior:contain;
}
#index .brand{display:flex;align-items:center;gap:10px;height:60px;padding:0 16px;font-size:22px;font-weight:700;letter-spacing:.5px}
#index .brand span{color:var(--ink)}
#index .brand .dot{width:26px;height:26px;border-radius:7px;background:var(--primary);flex:0 0 auto}
#index .brand .dot{background:url('data:image/png;base64,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') center/contain no-repeat;border-radius:0}
#index nav{padding:6px 8px 24px}
#index a{
  display:flex;align-items:center;gap:12px;padding:9px 12px;margin:2px 0;border-radius:8px;
  color:var(--ink);text-decoration:none;font-size:14px;line-height:1.25;
}
#index a .num{margin-left:auto;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
#index a:hover{background:var(--wash)}
#index a.on{background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);font-weight:600}
#index a.on .num{color:var(--primary)}
#index svg{width:20px;height:20px;flex:0 0 auto;fill:currentColor;opacity:.85}
#scrim{position:fixed;inset:0;background:rgba(10,20,28,.45);z-index:35;display:none}

/* Collapsed rail, the same idea as the app's own navigation drawer: icons only, labels gone, and
   the ~200px it gives back goes straight to the screenshot. */
body.rail #index{width:64px}
body.rail #index nav a{justify-content:center;padding:10px 0;gap:0}
body.rail #index a span,body.rail #index .brand span{display:none}
body.rail #index .brand{justify-content:center;padding:0}
body.rail #deck{margin-left:64px}
#rail-btn{
  position:absolute;top:14px;right:10px;width:28px;height:28px;border-radius:7px;
  border:1px solid var(--line);background:var(--paper);color:var(--muted);
  cursor:pointer;font-size:15px;line-height:1;z-index:41;
}
#rail-btn:hover{color:var(--primary);border-color:var(--primary)}
body.rail #rail-btn{right:18px;top:64px}

#menu-btn{
  position:fixed;top:12px;left:12px;z-index:50;display:none;
  width:44px;height:44px;border-radius:10px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);font-size:20px;cursor:pointer;
}

/* ---------- slides ---------- */
#deck{margin-left:var(--rail);transition:margin-left .18s ease}
/* position:relative so the divider's tab marker anchors to the sheet it belongs to. Without it the
   marker resolves against the initial containing block, lands past the print margin and is clipped
   off the page entirely, which costs the binder the one cue that says which tab you are behind. */
.slide{
  display:none;position:relative;padding:40px 52px;
  background:var(--paper);
}
/* One slide, one screenful, no scrollbar. A min-height of 0 on the children is what actually lets the
   screenshot shrink inside a flex column; without it flex items refuse to go below their content
   size and the image pushes the slide taller than the window. */
.slide.on{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--primary);font-size:13px;font-weight:700;letter-spacing:.10em;text-transform:uppercase}
.eyebrow .ref{color:var(--muted);font-weight:600;letter-spacing:.04em}
h1{font-size:36px;line-height:1.12;margin:12px 0 0;letter-spacing:-.02em}
.lede{font-size:18px;color:var(--muted);margin:11px 0 0}
ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px}
li{position:relative;padding-left:24px;font-size:16px}
li::before{content:"";position:absolute;left:4px;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--primary)}
/* The screenshot area takes whatever height the text left over, and the image is bounded by THAT
   rather than by the column width. Sizing it by width instead is what pushed every slide past the
   fold and turned a deck into a scrolling document. */
/* One point per slide, and a picture of just that point.
   Two earlier attempts failed the same way from opposite directions: a full screenshot in a narrow
   column was too small to read, and a full screenshot at full width was legible but swallowed the
   slide and still showed five things at once. What ships is a CROP of the one region the slide is
   about, at a size where the app's own type is readable, sharing the slide with the words rather
   than dominating it. The cropping happens in build.js from the focus selector each slide names. */
.body{flex:1 1 auto;min-height:0;display:flex;gap:40px;align-items:center}
.copy{flex:1 1 42%;min-width:0;display:flex;flex-direction:column}
.shot{flex:1 1 58%;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center}
/* The image is bounded on BOTH axes and keeps its own shape, so it fills whichever of the two the
   slide actually runs out of first. An aspect-ratio box was tried here and is wrong: when max-width
   clamps such a box its height is not recalculated, so the border and shadow ended up drawn around a
   tall empty rectangle with the picture sitting in the top of it.
   The frame is inline-block precisely so it shrink-wraps to the image's used size, which is what
   keeps the hotspot percentages on the picture rather than on the space beside it. */
.shot-frame{position:relative;display:inline-block;max-width:100%;max-height:100%;line-height:0}
/* Interactive slides. The states are stacked in the same box so the frame never moves between them,
   and the buttons sit on top at percentages measured from the real page at capture time. */
.shot-live{position:relative;display:inline-block;line-height:0;max-width:100%}
/* The bullet pointer. A bullet with a region is a button; pressing it outlines its subject on the
   screenshot, which is a shorter path than "third row, on the left" in prose. */
.point{display:inline;border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;
  border-bottom:1px dashed var(--line)}
.point:hover,.point:focus-visible{color:var(--primary);border-bottom-color:var(--primary);outline:none}
.point[aria-pressed="true"]{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}
/* An outline rather than a border, and offset outwards. box-sizing is border-box everywhere here, so
   a border is drawn INSIDE the measured box: it landed on the avatar's own ring and struck through
   the author icon it was pointing at. outline-offset holds the ring clear of the element, which is
   the whole job — this marks something, it does not frame it. */
.shot-outline{position:absolute;border-radius:4px;pointer-events:none;
  outline:2px solid var(--primary);outline-offset:5px;
  box-shadow:0 0 0 10px rgba(49,173,245,.14);transition:all .18s ease}
.shot-outline[hidden]{display:none}
.shot-live .shot-state{display:none;max-width:100%;height:auto}
.shot-live .shot-state.on{display:block}
.shot-region{position:absolute;border:2px solid transparent;border-radius:999px;background:transparent;cursor:pointer;padding:0;
  box-shadow:0 0 0 3px rgba(49,173,245,.35);transition:box-shadow .15s,border-color .15s}
.shot-region:hover,.shot-region:focus-visible{border-color:var(--primary);box-shadow:0 0 0 5px rgba(49,173,245,.5);outline:none}
.shot-region[aria-pressed="true"]{border-color:var(--primary);box-shadow:0 0 0 5px rgba(49,173,245,.75)}
.shot-reset{position:absolute;right:8px;bottom:8px;border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:999px;padding:4px 12px;font:inherit;font-size:12px;cursor:pointer;opacity:0;transition:opacity .15s}
.shot-live.touched .shot-reset{opacity:1}
/* Pressing a picture opens it full screen. zoom-in on the image only: the region buttons sit on top of
   it and keep their own pointer, so the two affordances never claim the same pixel. */
.shot-frame img{cursor:zoom-in}
.hv-lightbox{position:fixed;inset:0;z-index:200;align-items:center;justify-content:center;
  background:rgba(10,16,26,.93);padding:clamp(12px,3vw,40px);cursor:zoom-out}
.hv-lightbox[hidden]{display:none}
.hv-lightbox:not([hidden]){display:flex}
/* Shrink-wraps the image so the outline can be positioned as a percentage of the PICTURE rather than
   of the viewport. Letterboxing is what makes those two different, and the outline follows the
   picture. */
.hv-lightbox-inner{position:relative;display:inline-block;line-height:0;max-width:100%;max-height:100%}
.hv-lightbox img{max-width:100%;max-height:calc(100vh - 2 * clamp(12px,3vw,40px));width:auto;height:auto;
  border-radius:6px;box-shadow:0 30px 90px rgba(0,0,0,.6);cursor:default}
.hv-lightbox-outline{position:absolute;border-radius:4px;pointer-events:none;
  outline:2px solid var(--primary);outline-offset:5px;box-shadow:0 0 0 10px rgba(49,173,245,.18)}
.hv-lightbox-outline[hidden]{display:none}
.hv-lightbox-close{position:absolute;top:14px;right:18px;width:40px;height:40px;border-radius:999px;border:0;
  background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.hv-lightbox-close:hover,.hv-lightbox-close:focus-visible{background:rgba(255,255,255,.3);outline:none}
.hv-lightbox-cap{position:absolute;left:0;right:0;bottom:14px;text-align:center;
  color:rgba(255,255,255,.72);font-size:13px;padding:0 16px}
.shot .shot-crop{display:none}
.shot .shot-card{display:block}
/* When a slide has an animation, the animation is what shows on screen and the still stands down. */
.shot .shot-anim{display:block}
.shot .shot-card--has-anim{display:none}
.shot img{
  display:block;max-width:100%;max-height:100%;width:auto;height:auto;
  border-radius:10px;border:1px solid var(--line);
  box-shadow:0 10px 34px rgba(16,34,44,.13);
}
/* Opt-out for a slide whose point is in the lower half of the capture (fit: 'contain'). */
.slide.fit-contain .shot{display:flex;align-items:flex-start;justify-content:center}
.slide.fit-contain .shot-frame{width:auto;max-width:100%;max-height:100%}
.slide.fit-contain .shot img{width:auto;height:auto;max-width:100%;max-height:100%;border:1px solid var(--line);border-radius:10px}

/* Numbered markers over the opener screenshot, each linking to the slide that explains it. */
.hot{
  position:absolute;transform:translate(-50%,-50%);
  width:30px;height:30px;border-radius:50%;
  background:var(--primary);color:#fff;font-size:14px;font-weight:700;
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  box-shadow:0 0 0 4px rgba(49,173,245,.28);
}
.hot:hover{filter:brightness(1.08)}
.jump{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.jump a{
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--wash);color:var(--ink);
  text-decoration:none;font-size:14px;
}
.jump a b{color:var(--primary);font-variant-numeric:tabular-nums}
.jump a:hover{border-color:var(--primary)}

/* Contents of the section, on its own divider. */
.contents{margin-top:22px;display:grid;gap:6px;max-width:640px}
.contents a{
  display:flex;align-items:baseline;gap:10px;padding:9px 14px;border-radius:8px;
  background:rgba(255,255,255,.14);color:#fff;text-decoration:none;font-size:15.5px;
}
.contents a b{font-variant-numeric:tabular-nums;opacity:.8;font-weight:600;min-width:2.4em}
.contents a:hover{background:rgba(255,255,255,.26)}

/* ---------- pager ---------- */
#pager{
  position:fixed;right:18px;bottom:16px;z-index:45;display:flex;align-items:center;gap:6px;
  background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:5px 8px;
  box-shadow:0 6px 20px rgba(16,34,44,.14);
}
#pager button{
  width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
  background:var(--wash);color:var(--ink);font-size:22px;line-height:1;
}
#pager button:hover{background:color-mix(in srgb,var(--primary) 16%,transparent);color:var(--primary)}
#pager button:disabled{opacity:.35;cursor:default}
#count{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:52px;text-align:center}

/* ---------- section divider (a binder tab) ---------- */
.divider{background:linear-gradient(135deg,var(--primary),#1f7fc0);color:#fff;justify-content:center}
.divider .eyebrow{color:rgba(255,255,255,.85)}
.divider .eyebrow .ref{color:rgba(255,255,255,.7)}
.divider h1{font-size:60px;max-width:18ch}
.divider .lede{color:rgba(255,255,255,.92);font-size:22px}
/* Staggered down the right edge by section number, the way a real set of binder tabs is cut so no
   two sit on top of each other. The vertical position comes from the section index as an inline
   style; fixing it at one height put every tab in the same place. The band starts at 34% rather than
   at the top because the first few tabs otherwise land on the sub-heading. */
.divider .tabmark{
  position:absolute;right:0;background:#fff;color:var(--primary);
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:15px;
  padding:12px 20px;border-radius:8px 0 0 8px;
}

/* ---------- cover and close ---------- */
.cover,.close{justify-content:center;text-align:left}
.cover h1{font-size:58px;max-width:26ch}
/* One sentence per line. The headline is two sentences, and left to itself it broke wherever the words
   happened to land and split the second one across lines. The break belongs between the sentences, and
   putting it here makes it identical on a screen of any width and on paper.
   The measure went 20ch -> 26ch with it: blocking the sentences is no use if the longest of them still
   does not fit on one line, which it did not at 20ch. Verified at 1600, 1100, 820 and 390px. */
.cover h1 .sentence{display:block}
.cover .wordmark{display:flex;align-items:center;gap:14px;font-size:34px;font-weight:800;letter-spacing:-.01em}
.cover .wordmark .dot{width:40px;height:40px;border-radius:11px;background:var(--primary)}
.cover .wordmark .dot{background:url('data:image/png;base64,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') center/contain no-repeat;border-radius:0}
.credibility{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:15px;max-width:60ch}
/* The cover's claims, one per line. The credibility note below them is deliberately NOT a
   sibling bullet: it is a statement about this book rather than about the product. */
.cover-points{margin:26px 0 0;padding:18px 0 0 20px;border-top:1px solid var(--line);color:var(--muted);font-size:15px;max-width:60ch}
.cover-points li{margin:0 0 6px}
.cover-points + .credibility{margin-top:10px;padding-top:0;border-top:0}
.qr{display:flex;align-items:center;gap:16px;margin-top:30px}
.qr svg,.qr .ph{width:132px;height:132px;flex:0 0 auto;border-radius:10px;background:#fff}
.qr .ph{border:2px dashed var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;text-align:center;padding:10px}
.qr .cap{font-size:15px;color:var(--muted)}
.qr .cap b{display:block;color:var(--ink);font-size:17px}

/* ---------- footer ---------- */
.foot{
  margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:14px;
  color:var(--muted);font-size:12.5px;border-top:1px solid var(--line);
}
.foot .sp{margin-left:auto}
.divider .foot{border-top-color:rgba(255,255,255,.3);color:rgba(255,255,255,.85)}

/* ---------- phone ---------- */
@media screen and (max-width:860px){
  #index{transform:translateX(-100%);transition:transform .22s ease;width:min(86vw,320px)}
  body.nav #index{transform:none}
  body.nav #scrim{display:block}
  #menu-btn{display:block}
  #rail-btn{display:none}
  body.rail #index{width:min(86vw,320px)}
  body.rail #deck{margin-left:0}
  body.rail #index a span,body.rail #index .brand span{display:inline}
  #deck{margin-left:0}
  /* Phones scroll. A viewport-locked slide works on a laptop, where the text is short beside a wide
     screenshot; stacked in one narrow column it would clip the bullets the slide exists to make. */
  .slide.on{height:auto;min-height:100vh;overflow:visible}
  .shot{min-height:0}
  /* The phone rendition is a crop, so it is not 16:9 and must not be forced into it. */
  /* On a phone the picture leads. Reading four bullets before seeing anything is how the screenshot
     ended up as an illegible strip below the fold; putting it first means the point lands on opening
     the slide and the words back it up underneath. */
  .body{flex-direction:column;gap:0;align-items:stretch}
  .copy{flex:0 0 auto;overflow:visible;order:2;margin-top:18px}
  .shot{flex:0 0 auto;order:1;overflow:visible;display:block}
  .jump{margin-top:16px}
  .shot-frame{max-height:none;width:100%;display:block}
  .shot .shot-card,.shot .shot-anim,.shot .shot-live{display:none}
  .shot .shot-crop{display:block}
  .shot img{max-height:none;width:100%;border-radius:10px;border-bottom:1px solid var(--line)}
  .slide{padding:68px 20px 28px}
  h1{font-size:27px;max-width:none}
  .lede{font-size:16.5px}
  li{font-size:15px}
  .cover h1{font-size:34px}
  .divider h1{font-size:38px}
  /* The tab mark is a printed-binder affordance: a staggered tab at the page edge so a section can
     be found with a thumb. Its vertical position is a percentage of the page, and on a phone that
     lands it squarely on top of the contents list — the first section's tab sat across the row for
     slide 1.1 and covered the end of its title. Nothing is lost by dropping it here: the reader has
     the section name in the heading above, and print keeps its own rules. */
  .divider .tabmark{display:none}
  .qr svg,.qr .ph{width:108px;height:108px}
  /* A hotspot marker on a phone-sized crop lands in the wrong place, because the crop is a different
     picture from the one the percentages were measured against. The jump chips below the image say
     the same thing and stay correct. */
  .hot{display:none}
  /* The viewer, on a phone, at a size worth opening.
     Fitted to the viewport it magnified NOTHING: the picture is already the full width of the screen
     in the slide, so tapping it produced the same picture again on a black background, and the one
     affordance for "this is too small to read" did nothing at all. At natural size a crop is about
     three times the width of the screen, which is the whole point, and the viewer scrolls in both
     directions. The script parks that scroll on the outlined region so the reader lands on the thing
     they pressed rather than on the top-left corner of something three screens wide. */
  .hv-lightbox{padding:0;overflow:auto;-webkit-overflow-scrolling:touch;
    align-items:flex-start;justify-content:flex-start}
  .hv-lightbox-inner{max-width:none;max-height:none}
  .hv-lightbox img{max-width:none;max-height:none;width:auto;height:auto;border-radius:0}
  /* Fixed rather than absolute, or they scroll away with the picture and the viewer has no exit. */
  .hv-lightbox-close{position:fixed}
  .hv-lightbox-cap{position:fixed;left:0;right:0;bottom:10px;background:rgba(10,16,26,.72);padding:6px 16px}
}

/* ---------- print: US Letter landscape, one slide per sheet ---------- */
@page{size:letter landscape;margin:0.45in}
@media print{
  body{background:#fff}
  #index,#menu-btn,#scrim,#pager{display:none !important}
  #deck{margin-left:0}
  /* .slide.on carries the on-screen viewport lock, so the print height has to beat it on
     specificity or every sheet comes out one screen tall instead of one page tall. */
  .slide,.slide.on{
    display:flex !important;flex-direction:column;
    min-height:auto;height:7.5in;padding:0;overflow:hidden;
    break-after:page;page-break-after:always;
    background:#fff;
  }
  .slide:last-child{break-after:auto;page-break-after:auto}
  .body{gap:.3in;align-items:center}
  /* On paper the copy gets a fixed, narrower measure than on screen. A landscape sheet is 10.1in of
     usable width and the screenshot is the argument, so every inch the text does not need goes to the
     picture. Without the fixed basis the column sizes to its own text, and a slide with a long
     sub-heading squeezes its screenshot to a third of the width it should have. */
  .copy{flex:0 0 3.4in}
  /* min-width:0 because a flex item refuses to shrink below its content by default, and the content
     here is an image at its intrinsic pixel width: without this the wider screenshots run off the
     right edge of the sheet and print clipped. */
  /* Absolute caps, not percentages. Chrome resolves the printed page box differently from the
     emulated print viewport, so a percentage max-width measured fine on screen and still ran off
     the right edge of the paper. 3.4 (copy) + .3 (gap) + 6.1 = 9.8in inside a 10.1in usable width. */
  .shot{min-width:0}
  .shot-frame{max-height:5.4in;max-width:6.1in}
  /* The binder gets the desktop STILL, whatever width the window was when the page loaded and
     whichever frame an animation happened to be on. */
  .shot .shot-card{display:block !important}
  .shot .shot-crop,.shot .shot-anim{display:none !important}
  /* Paper cannot be pressed: the first state stands in, and the affordances come off. */
  .shot-live .shot-state{display:none !important}
  .shot-live .shot-state.on,.shot .shot-live{display:block !important}
  .shot-region,.shot-reset,.shot-outline{display:none !important}
  /* A viewer left open when someone hits print would otherwise paint one screenshot over the sheet. */
  .hv-lightbox{display:none !important}
  /* On paper a bullet is a bullet: the underline advertises an interaction there is none of. */
  .point{border-bottom:0 !important;color:inherit !important;font-weight:inherit !important}
  .shot img{max-height:5.4in;max-width:6.1in;width:auto;height:auto}
  .shot img{box-shadow:none}
  /* Re-asserted at .slide.divider strength on purpose. The rule above sets background:#fff at
     .slide.on, which outspecifies a bare .divider, so the tab pages printed as white text on a
     white sheet: fifteen blank pages that looked like a rendering failure rather than a CSS one.
     print-color-adjust is what stops the browser dropping the fill as a courtesy to your ink. */
  .slide.divider,.slide.divider.on{
    background:linear-gradient(135deg,#31adf5,#1f7fc0);
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
    justify-content:center;height:7.5in;padding:0 .3in;
  }
  .slide.divider .tabmark{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .hot{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* The brand mark is a background image, which browsers drop from print to save ink unless
     told otherwise. Without this the binder's cover has a wordmark and no logo. */
  #index .brand .dot,.cover .wordmark .dot{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  h1{font-size:30px}
  .divider h1{font-size:46px}
  .lede{font-size:15px}
  li{font-size:13px}
  a{text-decoration:none;color:inherit}
  .jump a{border-color:#ccc}
}