/* Cohesive reader shell for standard articles. Presentation pages opt out by
   not loading blog-common.css. */

:root {
  --reader-ink: #05090d;
  --reader-panel: rgba(5, 10, 15, 0.88);
  --reader-panel-solid: #081016;
  --reader-text: #f2eee7;
  --reader-muted: #aaa8a5;
  --reader-line: rgba(223, 232, 239, 0.2);
  --reader-line-strong: rgba(223, 232, 239, 0.38);
  --reader-amber: #f0a928;
  --reader-cyan: #54c8e8;
  --reader-lavender: #a48be6;
  --reader-space-1: 4px;
  --reader-space-2: 8px;
  --reader-space-3: 12px;
  --reader-space-4: 16px;
  --reader-space-5: 24px;
  --reader-space-6: 32px;
  --reader-space-7: 48px;
  --reader-space-8: 64px;
  --reader-mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
  --reader-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --reader-motion-press: 70ms;
  --reader-motion-fast: 160ms;
  --reader-motion-spatial: 220ms;
  --reader-motion-character: 520ms;
  --reader-ease-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
  --reader-ease-enter: cubic-bezier(0, 0, 0.3, 1);
  --reader-ease-character: cubic-bezier(0.2, 1.3, 0.4, 1);
  --reader-chrome-height: 112px;
  --reader-reading-offset: calc(var(--reader-chrome-height) + var(--reader-space-4));
  --reader-georgie-nook: 92px;
}

html:has(body.reader-page) {
  background: var(--reader-ink);
  scroll-padding-top: var(--reader-reading-offset);
  scrollbar-gutter: stable;
}

body.reader-page {
  display: block;
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
  background: transparent;
  color: var(--reader-text);
  font-family: var(--reader-mono);
  font-size: 16px;
  line-height: 1.65;
}

.reader-page *,
.reader-page *::before,
.reader-page *::after {
  box-sizing: border-box;
}

.reader-page button,
.reader-page a {
  -webkit-tap-highlight-color: transparent;
}

.reader-page .reader-skip {
  position: fixed;
  z-index: 1000;
  top: var(--reader-space-3);
  left: var(--reader-space-3);
  padding: var(--reader-space-2) var(--reader-space-3);
  color: var(--reader-ink);
  background: var(--reader-text);
  transform: translateY(-180%);
}

.reader-page .reader-skip:focus {
  transform: translateY(0);
}

.reader-page #bg {
  inset: -18px;
  width: auto;
  height: auto;
  z-index: 0;
  background-color: var(--reader-ink);
  background-image: url('/jpg/bg-night.webp');
  filter: brightness(0.54) saturate(0.82) contrast(1.06);
  transform: scale(1.035);
}

.reader-page #bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 8, 0.28);
}

.reader-page > .home-link,
.reader-page > #change,
.reader-page > #change + .bg-switcher-tooltip,
.reader-page > .scroll-progress,
.reader-page > .vim-hud {
  display: none !important;
}

.reader-chrome {
  position: sticky;
  z-index: 80;
  top: 0;
  width: 100%;
  background: rgba(3, 7, 11, 0.89);
  border-bottom: 1px solid var(--reader-line);
  backdrop-filter: blur(18px) saturate(1.15);
}

.reader-site-header,
.reader-context {
  width: min(1184px, calc(100vw - 48px));
  margin: 0 auto;
}

.reader-site-header {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto;
  align-items: center;
  gap: var(--reader-space-5);
  padding: var(--reader-space-5) 0;
}

.reader-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--reader-space-4);
  width: fit-content;
  color: var(--reader-text);
  font-family: var(--reader-sans);
  font-size: clamp(1.55rem, 2.25vw, 2.1rem);
  font-weight: 760;
  letter-spacing: -0.04em;
  line-height: 1.5;
  text-decoration: none;
}

.reader-brand::before {
  content: "";
  width: 3px;
  height: 38px;
  background: var(--reader-amber);
}

.reader-primary-nav,
.reader-header-actions {
  display: flex;
  align-items: center;
}

.reader-primary-nav {
  gap: clamp(var(--reader-space-4), 2.5vw, var(--reader-space-6));
}

.reader-primary-nav a {
  position: relative;
  padding: var(--reader-space-4) 0;
  color: var(--reader-text);
  font-size: 0.9rem;
  line-height: 1.5;
  text-decoration: none;
}

.reader-primary-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 1px;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
  transform: translateX(-50%);
  transition: width var(--reader-motion-spatial) var(--reader-ease-enter);
}

.reader-primary-nav a:hover::after,
.reader-primary-nav a:focus-visible::after,
.reader-primary-nav a[aria-current="page"]::after {
  width: 52px;
}

.reader-primary-nav a[aria-current="page"] {
  color: var(--reader-amber);
}

.reader-primary-nav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%);
}

.reader-header-actions {
  gap: var(--reader-space-2);
}

.reader-command-trigger,
.reader-vim-link,
.reader-mobile-trigger,
.reader-sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--reader-space-2) var(--reader-space-3);
  border: 1px solid var(--reader-line);
  color: var(--reader-muted);
  background: rgba(8, 12, 16, 0.76);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--reader-motion-fast) ease, border-color var(--reader-motion-fast) ease,
    background var(--reader-motion-fast) ease, transform var(--reader-motion-fast) var(--reader-ease-standard),
    box-shadow var(--reader-motion-fast) ease;
}

.reader-command-trigger,
.reader-vim-link {
  font: inherit;
  line-height: 1.5;
}

.reader-mobile-trigger,
.reader-sheet-close {
  font: 0.9rem/1 var(--reader-mono);
}

.reader-vim-link {
  padding: var(--reader-space-2) var(--reader-space-4);
  border-color: currentColor;
  color: var(--reader-lavender);
}

.reader-command-trigger:hover,
.reader-vim-link:hover,
.reader-mobile-trigger:hover,
.reader-sheet-close:hover {
  color: var(--reader-text);
  border-color: var(--reader-line-strong);
  background: rgba(181, 154, 239, 0.09);
  box-shadow: 0 0 24px rgba(181, 154, 239, 0.1);
}

[data-jelly]:active {
  transform: translateY(1px);
  transition-duration: var(--reader-motion-press);
}

[data-jelly].is-jelly {
  animation: reader-jelly var(--reader-motion-spatial) var(--reader-ease-standard);
}

@keyframes reader-jelly {
  0% { box-shadow: inset 0 0 0 1px transparent; }
  44% { box-shadow: inset 0 0 0 1px rgba(84, 200, 232, 0.34), 0 0 18px rgba(84, 200, 232, 0.08); }
  100% { box-shadow: inset 0 0 0 1px transparent; }
}

.reader-context {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--reader-space-4);
  min-height: 40px;
  padding: 0;
  border-top: 1px solid var(--reader-line);
  font-size: 0.78rem;
}

.reader-back {
  justify-self: start;
  color: var(--reader-muted);
  text-decoration: none;
}

.reader-back:hover,
.reader-back:focus-visible {
  color: var(--reader-cyan);
}

.reader-context-title {
  min-width: 0;
  overflow: hidden;
  color: var(--reader-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-context-progress {
  color: var(--reader-amber);
  font-weight: 500;
}

.reader-main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 780px) minmax(210px, 220px);
  justify-content: center;
  gap: clamp(var(--reader-space-6), 4vw, 56px);
  width: min(1120px, calc(100% - 64px));
  margin: 0 auto;
  padding: var(--reader-space-7) 0 var(--reader-space-8);
}

.reader-page .container {
  min-width: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.reader-page .markdown-body {
  min-width: 0;
  max-width: 780px;
  padding: 0;
  color: var(--reader-text);
  background: transparent;
  font-family: var(--reader-sans);
  font-size: clamp(17px, 1rem + 0.15vw, 19px);
  line-height: 1.62;
  overflow-wrap: anywhere;
}

.reader-page .markdown-body > h1:first-child {
  max-width: 780px;
  margin: 0 0 var(--reader-space-3);
  padding: 0;
  border: 0;
  color: var(--reader-text);
  font-family: var(--reader-sans);
  font-size: clamp(2.6rem, 3.7vw, 3.35rem);
  font-weight: 760;
  line-height: 1.04;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.reader-page .markdown-body > h1:first-child + p {
  margin: 0 0 var(--reader-space-5);
  color: var(--reader-muted);
  font-family: var(--reader-mono);
  font-size: 0.92rem;
  font-style: normal;
}

.reader-page .markdown-body h2,
.reader-page .markdown-body h3,
.reader-page .markdown-body h4 {
  color: var(--reader-text);
  font-family: var(--reader-sans);
  font-weight: 680;
  letter-spacing: -0.035em;
}

.reader-page .markdown-body h2 {
  margin-top: var(--reader-space-8);
  padding-bottom: var(--reader-space-3);
  border-bottom: 1px solid var(--reader-line);
  font-size: clamp(1.8rem, 3vw, 2.45rem);
}

.reader-page .markdown-body h3 {
  margin-top: var(--reader-space-7);
  font-size: clamp(1.35rem, 2.3vw, 1.8rem);
}

.reader-page .markdown-body p,
.reader-page .markdown-body li {
  color: rgba(242, 238, 231, 0.9);
}

.reader-page .markdown-body p {
  margin: 0 0 var(--reader-space-5);
  font-size: inherit;
  line-height: inherit;
}

.reader-page .markdown-body a {
  color: var(--reader-cyan);
  text-decoration-color: rgba(84, 200, 232, 0.48);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--reader-motion-fast) ease, text-decoration-color var(--reader-motion-fast) ease;
}

.reader-page .markdown-body a:hover,
.reader-page .markdown-body a:focus-visible {
  color: #8bdcf1;
  text-decoration-color: currentColor;
}

.reader-page .markdown-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--reader-space-5) auto var(--reader-space-6);
  border: 1px solid var(--reader-line);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.reader-page .markdown-body pre,
.reader-page .markdown-body table {
  max-width: 100%;
}

.reader-page .markdown-body pre {
  overflow-x: auto;
  background: rgba(4, 8, 12, 0.82) !important;
  border: 1px solid var(--reader-line);
}

.reader-page .markdown-body blockquote {
  border-left-color: var(--reader-amber);
  background: rgba(5, 10, 15, 0.56);
}

.reader-page .post-navigation,
.reader-page .footer {
  border-color: var(--reader-line);
}

.reader-page .post-nav-link {
  min-width: 0;
  background: rgba(5, 10, 15, 0.66);
  border-color: var(--reader-line);
  transition: border-color var(--reader-motion-fast) ease, background var(--reader-motion-fast) ease;
}

.reader-page .post-nav-link:hover {
  border-color: var(--reader-line-strong);
  background: rgba(181, 154, 239, 0.07);
}

.reader-rail-slot {
  position: sticky;
  top: var(--reader-reading-offset);
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  min-width: 0;
  padding-bottom: var(--reader-georgie-nook);
}

.reader-rail-slot:not(:has(.reader-toc)) {
  min-height: 124px;
}

.reader-georgie {
  appearance: none;
  position: absolute;
  z-index: 4;
  bottom: 10px;
  left: 0;
  width: 116px;
  aspect-ratio: 512 / 361;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.42));
  opacity: 1;
  transform: translateY(0) scale(1);
  transform-origin: 50% 82%;
}

.reader-georgie.is-loading {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px) scale(0.98);
}

.reader-georgie.is-ready {
  transition:
    opacity var(--reader-motion-spatial) var(--reader-ease-enter),
    transform var(--reader-motion-character) var(--reader-ease-character);
}

.reader-georgie:focus-visible {
  outline: none;
}

.reader-georgie:focus-visible .reader-georgie__bed {
  filter: hue-rotate(48deg) saturate(0.78) brightness(0.96)
    drop-shadow(0 0 3px var(--reader-lavender)) drop-shadow(0 0 12px rgba(181, 154, 239, 0.62));
}

.reader-georgie__bed {
  position: absolute;
  z-index: 0;
  right: -20%;
  bottom: -8%;
  left: -20%;
  height: 92%;
  background: url('/jpg/georgie-reader-bed.webp') center / 100% 100% no-repeat;
  filter: hue-rotate(48deg) saturate(0.78) brightness(0.96) drop-shadow(0 5px 5px rgba(0, 0, 0, 0.34));
  image-rendering: pixelated;
  transform-origin: 50% 100%;
  transition: transform var(--reader-motion-character) var(--reader-ease-character);
}

.reader-georgie__sprite {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  background: url('/jpg/georgie-reader-pair.webp') 0 0 / 200% 100% no-repeat;
  image-rendering: pixelated;
}

.reader-georgie.is-awake {
  animation: reader-georgie-react var(--reader-motion-character) var(--reader-ease-character);
}

.reader-georgie.is-awake .reader-georgie__sprite {
  background-position: 100% 0;
}

.reader-georgie.is-awake .reader-georgie__bed {
  transform: translateY(1px) scaleY(0.94);
}

.reader-main.is-georgie-awake .reader-toc {
  border-left-color: var(--reader-cyan);
  box-shadow: -8px 0 24px rgba(84, 200, 232, 0.08);
}

@keyframes reader-georgie-react {
  0% { transform: scale(1) rotate(0); }
  32% { transform: scaleX(1.05) scaleY(0.94) rotate(1deg); }
  64% { transform: scaleX(0.985) scaleY(1.025) rotate(-0.4deg); }
  100% { transform: scale(1) rotate(0); }
}

.reader-toc {
  position: relative;
  max-height: calc(100vh - var(--reader-reading-offset) - var(--reader-space-5) - var(--reader-georgie-nook));
  max-height: calc(100dvh - var(--reader-reading-offset) - var(--reader-space-5) - var(--reader-georgie-nook));
  padding: var(--reader-space-4) 0 var(--reader-space-4) var(--reader-space-5);
  overflow: hidden auto;
  border-left: 1px solid var(--reader-line-strong);
  scrollbar-width: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--reader-space-2));
  pointer-events: none;
  transition: border-color var(--reader-motion-spatial) ease, box-shadow var(--reader-motion-spatial) ease,
    opacity var(--reader-motion-fast) var(--reader-ease-enter),
    transform var(--reader-motion-fast) var(--reader-ease-enter),
    visibility 0s linear var(--reader-motion-fast);
}

.reader-toc.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

.reader-toc::-webkit-scrollbar {
  display: none;
}

.reader-toc-title,
.reader-toc-progress {
  margin: 0;
  font-family: var(--reader-mono);
}

.reader-toc-title {
  color: var(--reader-text);
  font-size: 0.95rem;
}

.reader-toc-progress {
  margin-top: var(--reader-space-1);
  color: var(--reader-amber);
  font-size: 0.82rem;
}

.reader-toc-list,
.reader-sheet-list {
  margin: var(--reader-space-5) 0 0;
  padding: 0;
  list-style: none;
}

.reader-toc-item {
  position: relative;
  margin: 0;
  padding: 0 0 var(--reader-space-5) var(--reader-space-5);
  border-left: 1px solid rgba(223, 232, 239, 0.22);
}

.reader-toc-item:last-child {
  padding-bottom: 0;
}

.reader-toc-item::before {
  content: "";
  position: absolute;
  top: 0.58em;
  left: -4px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--reader-line-strong);
  border-radius: 50%;
  background: var(--reader-panel-solid);
}

.reader-toc-item:has(.active)::before {
  border-color: var(--reader-amber);
  background: var(--reader-amber);
  box-shadow: 0 0 14px rgba(240, 169, 40, 0.48);
}

.reader-toc-link {
  display: block;
  color: var(--reader-muted);
  font: 0.82rem/1.45 var(--reader-mono);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--reader-motion-fast) ease;
}

.reader-toc-link:hover,
.reader-toc-link.active {
  color: var(--reader-amber);
}

.reader-toc-h3 {
  padding-left: var(--reader-space-6);
}

.reader-mobile-trigger,
.reader-sheet {
  display: none;
}

.reader-mobile-trigger {
  visibility: hidden;
}

.reader-palette,
.reader-sheet {
  padding: 0;
  border: 0;
  color: var(--reader-text);
  background: transparent;
}

.reader-palette[open] {
  position: fixed;
  inset: 0;
  display: grid;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  place-items: center;
}

.reader-palette[open]::backdrop {
  animation: reader-palette-backdrop-in var(--reader-motion-fast) var(--reader-ease-enter);
}

.reader-palette::backdrop,
.reader-sheet::backdrop {
  background: rgba(1, 3, 5, 0.76);
  backdrop-filter: blur(8px);
}

.reader-palette-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(680px, calc(100vw - 32px));
  max-height: min(78dvh, 720px);
  overflow: hidden;
  border: 1px solid var(--reader-line-strong);
  background: var(--reader-panel-solid);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.48);
  animation: reader-palette-panel-in var(--reader-motion-spatial) var(--reader-ease-enter);
}

.reader-palette-head,
.reader-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--reader-space-4);
  padding: var(--reader-space-4);
  border-bottom: 1px solid var(--reader-line);
}

.reader-palette-head h2,
.reader-sheet-head h2 {
  margin: 0;
  font: 600 1rem/1.2 var(--reader-mono);
}

.reader-palette .site-command-palette {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

.reader-palette .site-command-search {
  position: relative;
  padding: var(--reader-space-4);
  border-bottom: 1px solid var(--reader-line);
}

.reader-palette .site-command-search label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.reader-palette .site-command-search input {
  width: 100%;
  min-height: 44px;
  padding: var(--reader-space-3) var(--reader-space-4);
  border: 1px solid var(--reader-line-strong);
  outline: 0;
  color: var(--reader-text);
  background: rgba(3, 7, 10, 0.92);
  font: inherit;
  caret-color: var(--reader-cyan);
}

.reader-palette .site-command-search input::placeholder {
  color: var(--reader-muted);
}

.reader-palette .site-command-search input:focus {
  border-color: var(--reader-cyan);
  box-shadow: 0 0 0 1px rgba(84, 200, 232, 0.16), 0 0 22px rgba(84, 200, 232, 0.08);
}

.reader-palette .site-command-groups {
  display: grid;
  gap: var(--reader-space-2);
  min-height: 0;
  padding: var(--reader-space-4);
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-color: rgba(84, 200, 232, 0.38) transparent;
  scrollbar-width: thin;
}

.reader-palette .site-command-groups::-webkit-scrollbar {
  width: 8px;
}

.reader-palette .site-command-groups::-webkit-scrollbar-track {
  background: transparent;
}

.reader-palette .site-command-groups::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  background: rgba(84, 200, 232, 0.38);
  background-clip: content-box;
}

.reader-palette .site-command-group h3 {
  margin: 0 0 var(--reader-space-1);
  color: var(--reader-muted);
  font: 500 0.7rem/1.2 var(--reader-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.reader-palette .site-command-list {
  display: grid;
  gap: 1px;
  border: 1px solid var(--reader-line);
  background: var(--reader-line);
}

.reader-palette .site-command-list a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) 1.1fr;
  align-items: center;
  gap: var(--reader-space-4);
  min-height: 42px;
  padding: var(--reader-space-2) var(--reader-space-3);
  color: var(--reader-text);
  background: var(--reader-panel-solid);
  text-decoration: none;
  border: 1px solid transparent;
  transition: border-color var(--reader-motion-fast) ease, background var(--reader-motion-fast) ease;
}

.reader-palette .site-command-list a::before {
  content: "";
  position: absolute;
  top: var(--reader-space-2);
  bottom: var(--reader-space-2);
  left: 0;
  width: 2px;
  background: var(--reader-cyan);
  box-shadow: 0 0 12px rgba(84, 200, 232, 0.56);
  opacity: 0;
  transform: scaleY(0.35);
  transition: opacity var(--reader-motion-fast) ease, transform var(--reader-motion-fast) var(--reader-ease-enter);
}

.reader-palette .site-command-list a:hover,
.reader-palette .site-command-list a:focus-visible {
  border-color: var(--reader-line);
  background: rgba(84, 200, 232, 0.07);
}

.reader-palette .site-command-list a:hover::before,
.reader-palette .site-command-list a:focus-visible::before {
  opacity: 1;
  transform: scaleY(1);
}

@keyframes reader-palette-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes reader-palette-panel-in {
  from { opacity: 0; transform: translateY(6px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.reader-palette .site-command-list strong {
  color: var(--reader-cyan);
  font-weight: 500;
}

.reader-palette .site-command-list small {
  color: var(--reader-muted);
}

.reader-palette .site-command-empty {
  margin: 0;
  padding: var(--reader-space-6) var(--reader-space-4);
  border: 1px solid var(--reader-line);
  color: var(--reader-muted);
  text-align: center;
}

.reader-palette .site-command-list a[hidden],
.reader-palette .site-command-group[hidden],
.reader-palette .site-command-empty[hidden] {
  display: none;
}

@media (max-width: 1120px) {
  .reader-site-header {
    grid-template-columns: 1fr auto;
  }

  .reader-primary-nav {
    display: none;
  }
}

@media (max-width: 1040px) {

  .reader-main {
    grid-template-columns: minmax(0, 780px);
    width: min(780px, calc(100% - 48px));
    padding-bottom: calc(var(--reader-space-8) + 72px + env(safe-area-inset-bottom));
  }

  .reader-rail-slot {
    position: relative;
    display: block;
    grid-column: 1;
    grid-row: 2;
    justify-self: stretch;
    min-height: 84px;
    margin-top: var(--reader-space-8);
    padding-bottom: 0;
    border-top: 1px solid var(--reader-line-strong);
  }

  .reader-georgie {
    position: absolute;
    display: block;
    top: -42px;
    bottom: auto;
    left: var(--reader-space-4);
    width: 108px;
    margin: 0;
  }

  .reader-toc {
    display: none;
  }

  .reader-mobile-trigger {
    position: fixed;
    z-index: 70;
    right: var(--reader-space-5);
    bottom: var(--reader-space-5);
    display: inline-flex;
    border-color: var(--reader-line-strong);
    color: var(--reader-text);
    background: rgba(6, 12, 17, 0.94);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.42);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: color var(--reader-motion-fast) ease, border-color var(--reader-motion-fast) ease,
      background var(--reader-motion-fast) ease, box-shadow var(--reader-motion-fast) ease,
      opacity var(--reader-motion-fast) var(--reader-ease-enter),
      transform var(--reader-motion-fast) var(--reader-ease-enter), visibility 0s linear var(--reader-motion-fast);
  }

  .reader-mobile-trigger.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
    transition-delay: 0s;
  }

  .reader-mobile-trigger span {
    margin-left: var(--reader-space-2);
    color: var(--reader-amber);
  }

  .reader-sheet {
    width: 100%;
    max-width: none;
    height: auto;
    max-height: min(78dvh, 720px);
    margin: auto 0 0;
  }

  .reader-sheet[open] {
    display: block;
  }

  .reader-sheet-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: min(78dvh, 720px);
    padding-bottom: env(safe-area-inset-bottom);
    overflow: hidden;
    border-top: 1px solid var(--reader-line-strong);
    border-radius: 22px 22px 0 0;
    background: var(--reader-panel-solid);
    box-shadow: 0 -24px 80px rgba(0, 0, 0, 0.48);
    animation: reader-sheet-in var(--reader-motion-spatial) var(--reader-ease-enter);
  }

  .reader-sheet-list {
    min-height: 0;
    margin-top: 0;
    padding: 0 var(--reader-space-5);
    overflow-y: auto;
    scrollbar-width: none;
  }

  .reader-sheet-list::-webkit-scrollbar {
    display: none;
  }

  .reader-sheet-list li {
    border-bottom: 1px solid var(--reader-line);
  }

  .reader-sheet-list a {
    display: block;
    padding: var(--reader-space-4) 0;
    color: var(--reader-muted);
    text-decoration: none;
  }

  .reader-sheet-list a.active {
    color: var(--reader-amber);
  }

}

@media (prefers-reduced-motion: reduce) {
  .reader-georgie.is-awake {
    animation: none !important;
  }

  .reader-georgie__bed,
  .reader-georgie.is-awake .reader-georgie__bed {
    transition: none !important;
    transform: none !important;
  }

  .reader-main.is-georgie-awake .reader-toc {
    transform: none !important;
  }
}

@keyframes reader-sheet-in {
  0% { transform: translateY(100%); }
  100% { transform: translateY(0); }
}

@media (max-width: 680px) {
  .reader-palette-panel {
    max-height: calc(100dvh - 32px);
  }

  .reader-palette .site-command-search,
  .reader-palette .site-command-groups {
    padding: var(--reader-space-3);
  }

  .reader-palette .site-command-list a {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--reader-space-1);
  }

  .reader-site-header {
    width: calc(100% - (var(--reader-space-4) * 2));
    padding: var(--reader-space-4) 0;
  }

  .reader-brand {
    gap: var(--reader-space-3);
    font-size: 1.14rem;
  }

  .reader-brand::before {
    height: 30px;
  }

  .reader-command-trigger {
    min-width: 44px;
    padding: var(--reader-space-2);
    font-size: 0;
  }

  .reader-command-trigger::after {
    content: "⌘K";
    font: 0.74rem/1 var(--reader-mono);
  }

  .reader-vim-link {
    min-height: 40px;
    padding: var(--reader-space-2) var(--reader-space-3);
    font-size: 0.78rem;
  }

  .reader-context {
    width: calc(100% - (var(--reader-space-4) * 2));
    grid-template-columns: 1fr auto;
    min-height: 44px;
    padding: 0;
  }

  .reader-context-title {
    display: none;
  }

  .reader-main {
    width: min(100% - 32px, 800px);
    padding: var(--reader-space-6) 0 var(--reader-space-8);
  }

  .reader-page .markdown-body {
    width: 100%;
    padding: 0;
    font-size: 17px;
    line-height: 1.6;
  }

  .reader-page .markdown-body > h1:first-child {
    font-size: clamp(2.05rem, 11vw, 2.8rem);
    line-height: 1.02;
  }

  .reader-page .markdown-body h2 {
    margin-top: var(--reader-space-7);
  }

  .reader-page .markdown-body pre {
    padding: var(--reader-space-3);
  }

  .reader-page .markdown-body table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }

  .reader-mobile-trigger {
    right: var(--reader-space-4);
    bottom: max(var(--reader-space-4), env(safe-area-inset-bottom));
    min-height: 48px;
  }
}

@media (max-width: 360px) {
  .reader-header-actions {
    gap: var(--reader-space-2);
  }

  .reader-brand {
    max-width: 112px;
    line-height: 1.05;
  }

  .reader-vim-link {
    padding-inline: var(--reader-space-2);
  }

  .reader-georgie {
    left: var(--reader-space-4);
    width: 96px;
  }

  .reader-georgie__bed {
    right: -16%;
    left: -16%;
  }

  .reader-main {
    width: calc(100% - 28px);
  }

  .reader-page .markdown-body > h1:first-child {
    font-size: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reader-page *,
  .reader-page *::before,
  .reader-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .reader-palette .site-command-list a:hover,
  .reader-palette .site-command-list a:focus-visible {
    transform: none !important;
  }
}

@media print {
  .reader-chrome,
  .reader-rail-slot,
  .reader-mobile-trigger,
  .reader-palette,
  .reader-sheet {
    display: none !important;
  }

  .reader-main {
    display: block;
    width: 100%;
    padding: 0;
  }
}