/* Scroll chrome. At the top the header is a full bar; once the page moves it lifts into a
   floating pill (html.chrome-slim). When the page guide reaches the top it does not stack
   under the header: it docks (html.guide-docked) into a rail on the right edge on wide
   screens, or a pill at the bottom on phones. Layout never changes height: the header keeps
   its box and draws the pill with ::before, and .page-guide-space holds the guide's place. */
:root { --pill-top:8px; --pill-bottom:20px; --pill-x:max(8px, calc(var(--gutter) - 22px)); --chrome-ease:cubic-bezier(.2,.8,.2,1); }

/* ---- The header pill ---- */
.site-header { isolation:isolate; transition:background-color .35s, border-color .35s, padding .45s var(--chrome-ease); }
.site-header::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; border:1px solid transparent; border-radius:0; background:transparent; transition:inset .5s var(--chrome-ease), border-radius .5s var(--chrome-ease), background-color .35s, border-color .35s, box-shadow .5s; }
html.chrome-slim .site-header { background-color:transparent; border-bottom-color:transparent; padding-bottom:calc(var(--pill-bottom) - var(--pill-top)); pointer-events:none; }
html.chrome-slim .site-header > * { pointer-events:auto; }
html.chrome-slim .site-header::before { inset:var(--pill-top) var(--pill-x) var(--pill-bottom); border-radius:18px; border-color:rgba(255,196,157,.2); background-color:rgba(33,23,41,.86); box-shadow:0 16px 36px rgba(10,4,16,.5), inset 0 1px 0 rgba(255,228,200,.08); }
@supports (backdrop-filter:blur(1px)) {
  html.chrome-slim .site-header::before { background-color:rgba(33,23,41,.72); backdrop-filter:blur(18px) saturate(1.35); }
}
.site-header .brand img { transition:width .45s var(--chrome-ease), height .45s var(--chrome-ease), rotate .6s var(--chrome-ease); }
.site-header .brand > span { display:inline-block; max-width:5.5em; overflow:hidden; white-space:nowrap; transition:max-width .45s var(--chrome-ease), opacity .3s, margin .45s var(--chrome-ease); }
html.chrome-slim .site-header .brand img { width:38px; height:38px; rotate:-8deg; }
html.chrome-slim .site-header .brand > span { max-width:0; opacity:0; margin-left:-10px; }
html.chrome-slim .header-download-text small { display:none; }
@media (min-width:901px) { html.chrome-slim .header-actions > .button { min-height:42px; padding-block:6px; } }
html.chrome-slim .site-header .page-trail { inset:auto calc(var(--pill-x) + 16px) var(--pill-bottom); height:2px; border-radius:2px; }

/* ---- The guide keeps its place in the page when it leaves the flow ---- */
.page-guide-space { display:block; height:0; }
html.guide-docked .page-guide-space { height:var(--page-guide-height); }
html.guide-docked .page-guide { position:fixed; z-index:38; border:1px solid rgba(255,196,157,.22); box-shadow:0 18px 40px rgba(10,4,16,.55), inset 0 1px 0 rgba(255,228,200,.07); background:rgba(41,28,48,.9); }
@supports (backdrop-filter:blur(1px)) {
  html.guide-docked .page-guide { background:rgba(41,28,48,.76); backdrop-filter:blur(18px) saturate(1.3); }
}
html.guide-docked .page-guide-inner { width:auto; margin:0; }
html.guide-docked .guide-motion { display:none; }
.chapter-spine, .rail-flyout { display:none; }
.guide-mark { display:flex; }

/* The ghost that carries the bar to its docked shape (home-chrome.js). */
.guide-ghost { position:fixed; z-index:37; pointer-events:none; border:1px solid rgba(255,196,157,.28); background:rgba(48,35,49,.92); box-shadow:0 18px 40px rgba(10,4,16,.45); }

@keyframes rail-content-in { from { opacity:0; translate:0 10px; } }
@keyframes notch-in { from { opacity:0; scale:0 .4; } }
@keyframes ember-flicker { 0%, 100% { filter:brightness(1); } 35% { filter:brightness(1.22); } 60% { filter:brightness(.9); } 80% { filter:brightness(1.12); } }
@keyframes pill-content-in { from { opacity:0; translate:0 8px; } }

/* ---- Wide screens: a rail down the right edge ---- */
@media (min-width:1000px) {
  html.guide-docked .page-guide { top:50%; right:10px; translate:0 -50%; width:56px; border-radius:28px; transition:translate .3s var(--chrome-ease); }
  html.guide-docked .page-guide-inner { flex-direction:column; gap:8px; min-height:0; padding:12px 0; }
  html.guide-docked .chapter-picker { flex:none; }
  html.guide-docked .chapter-picker > summary { flex-direction:column; gap:3px; min-height:0; width:56px; padding:4px 0; border-radius:24px; }
  html.guide-docked .chapter-picker > summary:hover .guide-book { scale:1.1; }
  html.guide-docked .guide-book { display:flex; padding:6px; border-radius:50%; background:radial-gradient(circle,rgba(255,173,121,.22),transparent 70%); transition:scale .3s var(--chrome-ease); }
  html.guide-docked .guide-book img { width:34px; height:34px; }
  html.guide-docked .guide-heading { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  html.guide-docked .chapter-count { display:block; border:0; margin:0; padding:0; font-size:10px; letter-spacing:.02em; color:var(--peach); }
  html.guide-docked .guide-chevron { display:none; }
  html.guide-docked .guide-controls { flex-direction:column; gap:6px; }
  html.guide-docked .chapter-step { width:44px; height:44px; min-width:0; padding:0; border-radius:50%; border-color:rgba(255,196,157,.25); }
  html.guide-docked .chapter-next { background:rgba(255,173,121,.14); }
  html.guide-docked .chapter-next .next-word { display:none; }
  html.guide-docked #chapter-prev { display:inline-flex; }

  /* The spine is a minimap of the page: one segment per chapter, as long as that chapter
     really is, tinted by its group. The lens marks what is on screen right now. */
  html.guide-docked .chapter-spine { display:block; position:relative; width:56px; height:min(44vh, 380px); margin-block:4px; }
  html.guide-docked .spine-group { display:contents; }
  .spine-group:nth-child(1) { --tint:#ffc49d; }
  .spine-group:nth-child(2) { --tint:#f59a74; }
  .spine-group:nth-child(3) { --tint:#e7a6c8; }
  .spine-group:nth-child(4) { --tint:#a9d5b5; }
  .spine-group:nth-child(5) { --tint:#a3b9ea; }
  .spine-group:nth-child(6) { --tint:#f2d18c; }
  .spine-notch { position:absolute; left:0; right:0; top:calc(var(--top, 0) * 1%); height:calc(var(--h, 4) * 1%); display:flex; justify-content:center; }
  .spine-notch > i { display:block; width:14px; height:calc(100% - 3px); min-height:3px; border-radius:4px; background:color-mix(in srgb, var(--tint) 26%, transparent); transition:width .35s var(--chrome-ease), background-color .35s, box-shadow .35s; }
  .spine-notch.is-past > i { background:color-mix(in srgb, var(--tint) 55%, transparent); }
  .spine-notch.is-current > i { width:22px; background:linear-gradient(180deg,#ffd9b8,var(--ember) 55%,#e9744a); box-shadow:0 0 10px rgba(255,173,121,.9), 0 0 24px rgba(255,120,60,.45); animation:ember-flicker 2.6s ease-in-out infinite; }
  .spine-notch:hover > i { width:22px; background:var(--tint); }
  .spine-lens { position:absolute; left:50%; width:36px; translate:-50% 0; top:calc(var(--lens-top, 0) * 1%); height:calc(var(--lens-h, 10) * 1%); min-height:10px; border-radius:8px; border:1.5px solid rgba(255,226,199,.85); background:rgba(255,173,121,.07); box-shadow:0 0 0 3px rgba(255,173,121,.12), 0 0 18px rgba(255,173,121,.35); pointer-events:none; }
  .spine-notch > span, .rail-flyout { position:absolute; right:calc(100% + 12px); top:50%; padding:7px 13px; border-radius:10px; border:1px solid rgba(255,196,157,.24); background:#2c1f33; color:var(--ink); font:500 14px Hearth,ui-rounded,system-ui,sans-serif; white-space:nowrap; box-shadow:0 10px 24px rgba(10,4,16,.5); pointer-events:none; opacity:0; translate:10px -50%; transition:opacity .2s, translate .3s var(--chrome-ease); }
  .spine-notch > span small { display:block; color:var(--tint); font:600 9.5px system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1px; }
  .spine-notch:hover > span { opacity:1; translate:0 -50%; }
  html.guide-docked .rail-flyout { display:block; top:34px; }
  .rail-flyout.is-showing { opacity:1; translate:0 -50%; }
  .rail-flyout small { display:block; color:var(--faint); font:600 9.5px system-ui,sans-serif; letter-spacing:.14em; margin-bottom:1px; }

  /* The full chapter list opens beside the rail. */
  html.guide-docked .chapter-menu { position:absolute; top:50%; right:calc(100% + 14px); left:auto; translate:0 -50%; width:min(820px, calc(100vw - 130px)); border-top:1px solid #b59981; border-radius:16px; max-height:calc(100dvh - 60px); }
  html.guide-docked .page-guide.is-arriving .page-guide-inner > *:not(.chapter-spine):not(.rail-flyout) { animation:rail-content-in .4s var(--chrome-ease) .26s both; }
  html.guide-docked .page-guide.is-arriving .spine-notch > i { animation:notch-in .35s var(--chrome-ease) calc(.3s + var(--n, 0) * 16ms) both; }
  html.guide-docked .page-guide.is-arriving .spine-lens { animation:rail-content-in .4s var(--chrome-ease) .5s both; }
}
/* Short screens keep the rail, without the spine. */
@media (min-width:1000px) and (max-height:700px) {
  html.guide-docked .chapter-spine { display:none; }
}

/* ---- Phones and tablets: a pill at the bottom, within thumb reach ---- */
@media (max-width:999px) {
  :root { --pill-top:7px; --pill-bottom:15px; }
  html.guide-docked .page-guide { top:auto; bottom:calc(12px + env(safe-area-inset-bottom)); left:50%; right:auto; translate:-50% 0; width:min(460px, calc(100% - 24px)); border-radius:18px; overflow:visible; transition:translate .4s var(--chrome-ease), opacity .3s; }
  html.guide-docked .page-guide-inner { min-height:56px; padding:3px 6px 3px 14px; gap:6px; }
  html.guide-docked .page-guide::after { content:''; position:absolute; left:16px; right:16px; bottom:-1px; height:2px; border-radius:2px; background:var(--ember); transform-origin:left; transform:scaleX(var(--chapter-progress, 0)); transition:transform .5s var(--chrome-ease); }
  html.guide-docked .chapter-menu { position:absolute; top:auto; bottom:calc(100% + 10px); left:0; right:0; border-top:1px solid #b59981; border-radius:16px; max-height:calc(100dvh - 150px); }
  html.guide-docked.chrome-tuck .page-guide:not(:has(.chapter-picker[open])) { translate:-50% calc(100% + 30px); opacity:0; }
  html.guide-docked .page-guide.is-arriving .page-guide-inner > * { animation:pill-content-in .35s var(--chrome-ease) .22s both; }
}
@media (max-width:650px) {
  :root { --pill-top:6px; --pill-bottom:12px; --pill-x:8px; }
  html.chrome-slim .site-header .brand img { width:32px; height:32px; }
}

@media (prefers-reduced-motion:reduce) {
  .site-header, .site-header::before, .site-header .brand img, .site-header .brand > span, html.guide-docked .page-guide, .spine-notch > i, .spine-notch > span, .rail-flyout, html.guide-docked .page-guide::after { transition:none !important; }
  .spine-notch.is-current > i { animation:none !important; }
  .page-guide.is-arriving *, .page-guide.is-arriving .spine-notch { animation:none !important; }
}
.motion-paused .site-header, .motion-paused .site-header::before, .motion-paused .site-header .brand img, .motion-paused .site-header .brand > span, .motion-paused.guide-docked .page-guide, .motion-paused .spine-notch > i, .motion-paused .rail-flyout { transition:none !important; }
.motion-paused .spine-notch.is-current > i { animation:none !important; }
.motion-paused .page-guide.is-arriving *, .motion-paused .page-guide.is-arriving .spine-notch { animation:none !important; }