:root {
    /* Syntax-highlighting palette — same tokens the playground uses
       so the docs code-blocks match the in-browser editor. */
    --syn-panel:   #1d1812;
    --syn-text:    #e8dcc8;
    --syn-comment: #6d6354;
    --syn-keyword: #f4c24a;
    --syn-string:  #9cb88b;
    --syn-number:  #d4a76a;
    --syn-type:    #e8dcc8;
    --syn-fn:      #e8c878;

    --cream: #FBF3DC;
    --cream-2: #F5E8C3;
    --cream-3: #EFDDA8;
    --ink: #3A2A18;
    --ink-2: #5A4225;
    --butter: #F4C24A;
    --butter-deep: #E8A92A;
    --toast: #D97A2B;
    --toast-deep: #B45F1A;
    --sage: #8FAE6A;
    --sage-deep: #6B8C48;
    --sky: #B8D4E3;
    --shell: #F8ECCB;
    --shadow: rgba(58, 42, 24, 0.18);
    --line: #3A2A18;

    --display: "Nunito", "Quicksand", system-ui, sans-serif;
    --body: "Nunito", system-ui, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, monospace;
  }
  *, *::before, *::after { box-sizing: border-box; }

  /* squircle continuous corners — applied globally; falls back to standard
     rounded corners in browsers that don't yet support corner-shape */
  *,
  *::before,
  *::after {
    corner-shape: squircle;
  }
  /* keep pure circles circular (no superellipse on 50% radii) */
  .eyebrow .dot,
  .term-bar .tdot,
  .hero-divider .glyph,
  .community::before {
    corner-shape: round;
  }
  /* Top-of-page navigation progress bar. Markup is a single
     <div id="nav-progress"> in `layout.html`; the inline JS
     there toggles `loading`/`done` classes for state. Pure-CSS
     animation so we don't depend on any framework, and no JS
     timer running on the main thread. Uses the toast/butter
     gradient so the bar reads as part of the brand rather
     than a generic loader. */
  .nav-progress {
    position: fixed; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--toast), var(--butter), var(--sage));
    transform-origin: left center;
    transform: scaleX(0);
    z-index: 200;
    pointer-events: none;
    opacity: 0;
  }
  .nav-progress.loading {
    opacity: 1;
    animation: nav-progress-creep 6s cubic-bezier(0.1, 0.5, 0.1, 1) forwards;
  }
  .nav-progress.done {
    opacity: 0;
    transform: scaleX(1);
    transition: transform 180ms ease, opacity 320ms ease 120ms;
    animation: none;
  }
  @keyframes nav-progress-creep {
    0%   { transform: scaleX(0);    }
    35%  { transform: scaleX(0.45); }
    65%  { transform: scaleX(0.7);  }
    100% { transform: scaleX(0.85); }
  }

  html, body { margin: 0; padding: 0; }
  /* Last-resort horizontal-overflow guard. Any single misplaced
     element (a 280px terminal floating card, an h1 with a long
     unbreakable word, a sidebar mid-swap) would otherwise force
     the whole document wider than the viewport — the browser
     scrolls horizontally and the user sees mid-letter clipped
     text on the left edge. `overflow-x: clip` hides the
     overflow without enabling a scroll axis (unlike
     `overflow-x: hidden`, which still creates a scroll context
     and breaks `position: sticky` ancestors). Section-specific
     fixes below address the underlying overflow; this is the
     net beneath them.
  */
  html { overflow-x: clip; }
  body {
    font-family: var(--body);
    color: var(--ink);
    background: var(--cream);
    background-image:
      radial-gradient(circle at 12% 8%, rgba(244, 194, 74, 0.18) 0, transparent 28%),
      radial-gradient(circle at 88% 22%, rgba(184, 212, 227, 0.25) 0, transparent 24%),
      radial-gradient(circle at 70% 90%, rgba(143, 174, 106, 0.16) 0, transparent 30%);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }
  /* Long display headings should break across word boundaries
     rather than poke past the viewport on phones. Headings in
     content (markdown-rendered docs, etc.) inherit. */
  h1, h2, h3, .hero h1, .pkg-title, .section-head h2 {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  a { color: var(--toast-deep); text-decoration: none; }
  a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
  ::selection { background: var(--butter); color: var(--ink); }

  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

  /* ---------- NAV ---------- */
  .nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 32px;
    max-width: 1180px; margin: 0 auto;
  }
  .brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; }
  .brand .wordmark { display: block; height: 44px; width: auto; }
  .foot-brand .wordmark { height: 56px; }
  .nav-links { display: flex; gap: 28px; align-items: center; font-family: var(--mono); font-size: 13px; font-weight: 500; }
  .nav-links a { color: var(--ink); }
  .nav-links a:hover { color: var(--toast-deep); text-decoration: none; }
  .nav-cta {
    font-family: var(--mono); font-size: 13px; font-weight: 600;
    background: var(--ink); color: var(--cream);
    padding: 9px 14px 9px 12px; border-radius: 999px;
    border: 2px solid var(--ink);
    display: inline-flex; align-items: center; gap: 8px;
  }
  .nav-cta svg { display: block; }
  .nav-cta:hover { background: var(--sage-deep); border-color: var(--sage-deep); color: var(--cream); text-decoration: none; }

  /* ---------- HERO ---------- */
  .hero {
    position: relative;
    padding: 40px 32px 80px;
    max-width: 1180px; margin: 0 auto;
    display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center;
  }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 12px; font-weight: 600;
    color: var(--ink-2);
    background: var(--shell); border: 1.5px solid var(--ink);
    padding: 6px 12px; border-radius: 999px;
    box-shadow: 0 2px 0 var(--ink);
  }
  .eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 3px rgba(143,174,106,0.25); }
  .hero h1 {
    font-family: var(--display);
    font-weight: 800;
    /* Floor at 38px so a ~400px-wide phone (393px viewport
       minus 64px hero padding ≈ 329px content) doesn't overflow
       on the longest line ("a script. Hatch"). 6.6vw scales up
       through tablet sizes; 80px caps the desktop look.
    */
    font-size: clamp(38px, 6.6vw, 80px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 22px 0 18px;
    color: var(--ink);
  }
  .hero h1 .accent {
    color: var(--sage-deep);
    font-style: italic;
    font-weight: 700;
  }
  .hero p.lede {
    font-size: 19px; max-width: 540px; color: var(--ink-2);
    margin: 0 0 28px;
  }
  .hero p.lede code {
    font-family: var(--mono); font-size: 0.88em;
    background: var(--shell); padding: 2px 6px; border-radius: 4px;
    border: 1px solid rgba(58,42,24,0.15);
  }
  .cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-weight: 600; font-size: 14px;
    padding: 14px 22px;
    border-radius: 18px;
    border: 2.5px solid var(--ink);
    background: var(--butter);
    color: var(--ink);
    box-shadow: 0 4px 0 var(--sage-deep);
    transition: transform 0.08s ease, box-shadow 0.08s ease;
    cursor: pointer;
  }
  .btn:hover { text-decoration: none; transform: translateY(1px); box-shadow: 0 3px 0 var(--sage-deep); }
  .btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--sage-deep); }
  .btn.ghost { background: transparent; }
  .btn.dark { background: var(--ink); color: var(--cream); }
  .btn .arrow { font-family: var(--display); font-weight: 900; font-size: 18px; line-height: 1; }

  .hero-meta {
    margin-top: 28px;
    display: flex; gap: 22px; flex-wrap: wrap;
    font-family: var(--mono); font-size: 12px; color: var(--ink-2);
  }
  .hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
  .hero-meta b { color: var(--ink); font-weight: 600; }

  /* mascot side */
  .mascot-stage {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 500px;
    margin-left: auto;
  }
  .mascot-stage img,
  .mascot-stage svg {
    position: relative; z-index: 2;
    display: block;
    width: 100%; height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 0 rgba(58,42,24,0.08));
  }
  .nest {
    position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
    width: 78%; height: 14%;
    background: radial-gradient(ellipse at center, rgba(58,42,24,0.16) 0%, transparent 70%);
    z-index: 1;
  }
  .sparkle {
    position: absolute; pointer-events: none;
    font-family: var(--display); font-weight: 900;
    color: var(--butter-deep);
    animation: twinkle 3.2s ease-in-out infinite;
  }
  .sparkle.s1 { top: 8%; right: 4%; font-size: 24px; color: var(--sky); animation-delay: 0s; }
  .sparkle.s2 { top: 22%; left: 2%; font-size: 18px; color: var(--butter-deep); animation-delay: 0.6s; }
  .sparkle.s3 { top: 58%; right: -2%; font-size: 22px; color: var(--sage); animation-delay: 1.2s; }
  .sparkle.s4 { top: 38%; left: 8%; font-size: 14px; color: var(--toast); animation-delay: 1.8s; }
  @keyframes twinkle {
    0%, 100% { opacity: 0.35; transform: scale(0.85) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.1) rotate(15deg); }
  }

  /* terminal floating card */
  .term-float {
    position: absolute; left: -20px; bottom: 6%;
    width: 280px;
    background: #2a1f12;
    color: #FBF3DC;
    border: 2.5px solid var(--ink);
    border-radius: 12px;
    box-shadow: 6px 6px 0 var(--ink);
    font-family: var(--mono); font-size: 12.5px;
    z-index: 5;
    transform: rotate(-3deg);
  }
  .term-bar {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    border-bottom: 1.5px solid rgba(251,243,220,0.15);
  }
  .term-bar .tdot { width: 9px; height: 9px; border-radius: 50%; background: #5A4225; }
  .term-bar .tdot:nth-child(1) { background: #D97A2B; }
  .term-bar .tdot:nth-child(2) { background: #F4C24A; }
  .term-bar .tdot:nth-child(3) { background: #8FAE6A; }
  .term-bar .ttitle { margin-left: 8px; font-size: 11px; color: rgba(251,243,220,0.6); }
  .term-body { padding: 12px 14px; line-height: 1.7; }
  .term-body .pr { color: var(--sage); }
  .term-body .cmd { color: var(--cream); }
  .term-body .ok { color: var(--butter); }
  .term-body .mut { color: rgba(251,243,220,0.45); }

  /* ---------- divider strip ---------- */
  .strip {
    background: var(--sage-deep);
    color: var(--cream);
    padding: 14px 0;
    overflow: hidden;
    border-top: 2.5px solid var(--ink);
    border-bottom: 2.5px solid var(--ink);
    font-family: var(--mono); font-size: 14px; font-weight: 500;
    letter-spacing: 0.04em;
  }
  .strip-track { display: flex; gap: 48px; white-space: nowrap; animation: scroll 40s linear infinite; }
  .strip-track span { display: inline-flex; align-items: center; gap: 14px; }
  .strip-track .sep { color: var(--butter); }
  @keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* hero divider */
  .hero-divider {
    max-width: 1180px;
    margin: 32px auto 24px;
    padding: 0 32px;
    display: flex; align-items: center; gap: 18px;
  }
  .hero-divider::before, .hero-divider::after {
    content: ""; flex: 1; height: 0;
    border-top: 1.5px dashed rgba(58,42,24,0.25);
  }
  .hero-divider .glyph {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--sage); border: 2px solid var(--ink);
    box-shadow: 14px 0 0 -2px var(--butter), -14px 0 0 -2px var(--toast);
  }

  /* ---------- SECTION HEADERS ---------- */
  section { padding: 96px 32px; }
  .section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 64px; flex-wrap: wrap; }
  .section-tag {
    font-family: var(--mono); font-size: 12px; font-weight: 600;
    color: var(--sage-deep); text-transform: uppercase; letter-spacing: 0.12em;
    margin-bottom: 6px;
  }
  .section-title {
    font-family: var(--display); font-weight: 800; font-size: clamp(34px, 4.2vw, 52px);
    line-height: 1.05; letter-spacing: -0.015em; color: var(--ink);
    margin: 0;
  }
  .section-title em { font-style: italic; color: var(--toast-deep); font-weight: 700; }
  .section-sub {
    font-family: var(--body); font-size: 17px; color: var(--ink-2);
    max-width: 460px; margin: 0;
  }

  /* ---------- INSTALL (minimal) ---------- */
  .install-grid {
    display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start;
  }
  .install-steps { display: flex; flex-direction: column; gap: 22px; }
  .step {
    display: grid; grid-template-columns: 28px 1fr; gap: 14px;
    padding: 4px 0;
  }
  .step-num {
    font-family: var(--mono); font-size: 12px; font-weight: 600;
    color: var(--sage-deep);
    padding-top: 2px;
  }
  .step h3 {
    font-family: var(--display); font-weight: 800; font-size: 19px;
    margin: 0 0 4px; letter-spacing: -0.005em;
  }
  .step p { font-size: 14px; color: var(--ink-2); margin: 0; }
  .step code {
    font-family: var(--mono); font-size: 13px;
    background: rgba(58,42,24,0.06);
    padding: 1px 6px; border-radius: 4px;
    color: var(--ink);
  }

  pre.codeblock { margin: 0; }
  .codeblock {
    background: #2a1f12;
    color: var(--cream);
    border-radius: 10px;
    padding: 18px 20px;
    font-family: var(--mono); font-size: 13px;
    line-height: 1.85;
    overflow-x: auto;
    white-space: pre;
  }
  .codeblock .pr { color: var(--sage); user-select: none; margin-right: 4px; }
  .codeblock .cmt { color: rgba(251,243,220,0.4); }
  .codeblock .ok { color: var(--butter); }
  .codeblock .mut { color: rgba(251,243,220,0.55); }

  .platform-row {
    margin-top: 28px;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  }
  .platform-row .label {
    font-family: var(--mono); font-size: 12px; color: var(--ink-2);
  }
  .platforms { display: flex; gap: 6px; flex-wrap: wrap; }
  .pchip {
    font-family: var(--mono); font-size: 12px;
    background: transparent; border: 1px solid rgba(58,42,24,0.25);
    padding: 4px 10px; border-radius: 999px;
    color: var(--ink-2);
  }
  .pchip:hover { color: var(--ink); border-color: var(--ink); }

  /* ---------- PACKAGES ---------- */
  .pkg-bg {
    background: linear-gradient(180deg, var(--cream) 0%, var(--shell) 100%);
    border-top: 2.5px solid var(--ink);
    border-bottom: 2.5px solid var(--ink);
    margin-top: 64px;
  }
  .search-bar {
    display: flex; align-items: center; gap: 12px;
    background: var(--cream);
    border: 2.5px solid var(--ink);
    border-radius: 22px;
    padding: 14px 18px;
    box-shadow: 5px 5px 0 var(--ink);
    margin-bottom: 36px;
  }
  .search-bar svg { flex: none; }
  .search-bar input {
    flex: 1; border: 0; background: transparent; outline: none;
    font-family: var(--mono); font-size: 15px; color: var(--ink);
  }
  .search-bar input::placeholder { color: rgba(58,42,24,0.45); }
  .search-bar .kbd {
    font-family: var(--mono); font-size: 11px; font-weight: 600;
    background: var(--cream-2); border: 1.5px solid var(--ink);
    padding: 3px 7px; border-radius: 5px;
    color: var(--ink-2);
  }
  .filter-row {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px;
  }
  .fchip {
    font-family: var(--mono); font-size: 12px; font-weight: 600;
    background: transparent; border: 1.5px solid var(--ink);
    padding: 7px 13px; border-radius: 999px;
    color: var(--ink); cursor: pointer;
    transition: all 0.12s ease;
  }
  .fchip:hover { background: var(--cream-2); }
  .fchip.active {
    background: var(--ink); color: var(--cream);
    box-shadow: 0 2px 0 var(--toast-deep);
  }
  .fchip .ct { opacity: 0.55; margin-left: 6px; font-weight: 400; }

  .pkg-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px;
  }
  .pkg-card {
    background: var(--cream);
    border: 2.5px solid var(--ink);
    border-radius: 22px;
    padding: 20px 20px 18px;
    box-shadow: 4px 4px 0 var(--ink);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    cursor: pointer;
    display: flex; flex-direction: column; gap: 10px;
    position: relative;
  }
  .pkg-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink);
  }
  .pkg-card.hidden { display: none; }
  .pkg-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
  .pkg-icon {
    width: 44px; height: 44px; border-radius: 14px;
    border: 2px solid var(--ink);
    display: grid; place-items: center;
    flex: none;
    background: var(--cream-2);
  }
  .pkg-icon svg { display: block; }
  .pkg-name {
    font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--ink);
    margin: 0; line-height: 1.3;
  }
  .pkg-version { font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
  .pkg-desc {     font-size: 14px;
    color: var(--ink-2);
    margin: 0;
    height: 40px;
    text-overflow: ellipsis;
    overflow: clip; }
  .pkg-meta {
    display: flex; gap: 14px; align-items: center;
    font-family: var(--mono); font-size: 11px; color: var(--ink-2);
    padding-top: 10px; border-top: 1px dashed rgba(58,42,24,0.25);
  }
  .pkg-meta span { display: inline-flex; align-items: center; gap: 5px; }
  .pkg-tag {
    font-family: var(--mono); font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    padding: 3px 8px; border-radius: 4px;
  }

  .empty {
    grid-column: 1 / -1;
    text-align: center; padding: 60px 20px;
    font-family: var(--display); font-style: italic; font-size: 22px; color: var(--ink-2);
  }
  .empty .em { font-size: 48px; display: block; margin-bottom: 12px; }

  .all-link {
    margin-top: 32px; text-align: center;
    font-family: var(--mono); font-size: 14px;
  }

  /* ---------- WHY ---------- */
  .why-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 18px;
  }
  .why-card {
    background: var(--cream-2);
    border: 2px solid var(--ink); border-radius: 20px;
    padding: 22px 20px;
  }
  .why-icon {
    width: 44px; height: 44px; border-radius: 14px;
    background: var(--butter); border: 2px solid var(--ink);
    display: grid; place-items: center;
    margin-bottom: 14px;
    box-shadow: 0 3px 0 var(--ink);
  }
  .why-card h4 { font-family: var(--display); font-weight: 800; font-size: 19px; margin: 0 0 6px; letter-spacing: -0.005em; }
  .why-card p { font-size: 14px; color: var(--ink-2); margin: 0; }

  /* ---------- FRAMEWORKS ---------- */
  #frameworks { padding-top: 56px; padding-bottom: 12px; }
  .fw-card {
    background: var(--ink);
    color: var(--cream);
    border-radius: 32px;
    padding: 48px 48px 44px;
    border: 3px solid var(--ink);
    box-shadow: 8px 8px 0 var(--toast-deep);
    position: relative; overflow: hidden;
    margin: 24px 0 32px;
  }
  .fw-card::before {
    content: ""; position: absolute;
    top: -60px; left: -60px;
    width: 220px; height: 220px; border-radius: 50%;
    background: var(--sage); opacity: 0.12;
    corner-shape: round;
  }
  .fw-card .section-tag { color: var(--sage); }
  .fw-card .section-title { color: var(--cream); }
  .fw-card > p.lead {
    color: rgba(251,243,220,0.75); margin: 14px 0 32px; max-width: 640px;
    font-size: 17px; line-height: 1.5;
  }
  .fw-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
    position: relative;
  }
  .fw-tile {
    background: rgba(251,243,220,0.05);
    border: 1.5px solid rgba(251,243,220,0.18);
    border-radius: 22px;
    padding: 26px 26px 22px;
    display: flex; flex-direction: column; gap: 14px;
  }
  .fw-tile-head { display: flex; align-items: center; gap: 14px; }
  .fw-tile-icon {
    width: 48px; height: 48px; border-radius: 14px;
    display: grid; place-items: center;
    border: 2px solid var(--ink);
    flex: none;
  }
  .fw-tile-icon.web  { background: var(--sky); }
  .fw-tile-icon.game { background: var(--butter); }
  .fw-tile h3 {
    font-family: var(--display); font-weight: 800; font-size: 22px;
    margin: 0; color: var(--cream); letter-spacing: -0.01em;
  }
  .fw-tile .pkg {
    font-family: var(--mono); font-size: 12px; color: rgba(251,243,220,0.55);
    margin-top: 2px; display: block;
  }
  .fw-tile p { color: rgba(251,243,220,0.72); font-size: 14.5px; line-height: 1.5; margin: 0; }
  .fw-snippet {
    background: rgba(0,0,0,0.32);
    border: 1px solid rgba(251,243,220,0.1);
    border-radius: 12px;
    padding: 12px 14px;
    font-family: var(--mono); font-size: 12.5px; line-height: 1.7;
    color: rgba(251,243,220,0.92); white-space: pre;
    overflow-x: auto;
  }
  .fw-snippet .pr { color: var(--sage); margin-right: 8px; }
  .fw-snippet .cmt { color: rgba(251,243,220,0.4); }
  .fw-tile a.fw-link {
    margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: 12.5px; font-weight: 600;
    color: var(--butter); text-decoration: none;
    padding-top: 4px;
  }
  .fw-tile a.fw-link:hover { color: var(--cream); }
  .fw-tile a.fw-link .arr { transition: transform 0.15s ease; }
  .fw-tile a.fw-link:hover .arr { transform: translateX(3px); }

  /* ---------- COMMUNITY ---------- */
  #community { padding-top: 40px; padding-bottom: 60px; }
  .community {
    background: var(--ink);
    color: var(--cream);
    border-radius: 32px;
    padding: 56px 56px;
    border: 3px solid var(--ink);
    box-shadow: 8px 8px 0 var(--sage-deep);
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center;
    position: relative; overflow: hidden;
    margin: 24px 0 32px;
  }
  .community::before {
    content: ""; position: absolute;
    top: -40px; right: -40px;
    width: 200px; height: 200px; border-radius: 50%;
    background: var(--butter); opacity: 0.1;
  }
  .community .section-tag { color: var(--butter); }
  .community .section-title { color: var(--cream); }
  .community p { color: rgba(251,243,220,0.75); margin: 14px 0 22px; }
  .links { display: flex; flex-direction: column; gap: 10px; }
  .clink {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    background: rgba(251,243,220,0.06);
    border: 1.5px solid rgba(251,243,220,0.15);
    border-radius: 10px;
    font-family: var(--mono); font-size: 14px;
    color: var(--cream);
  }
  .clink:hover { background: rgba(251,243,220,0.12); text-decoration: none; border-color: var(--butter); }
  .clink .l { display: flex; align-items: center; gap: 12px; }
  .clink .l b { font-weight: 600; }
  .clink .l span { color: rgba(251,243,220,0.5); font-weight: 400; }
  .clink .arr { color: var(--butter); }

  /* ---------- FOOTER ---------- */
  footer {
    padding: 48px 32px 36px;
    border-top: 2px dashed var(--ink);
    margin-top: 40px;
  }
  .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; max-width: 1180px; margin: 0 auto; }
  .foot-grid h5 { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2); margin: 0 0 14px; }
  .foot-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-family: var(--mono); font-size: 13px; }
  .foot-grid ul a { color: var(--ink); }
  .foot-bottom {
    max-width: 1180px; margin: 32px auto 0;
    padding-top: 22px;
    border-top: 1px dashed rgba(58,42,24,0.3);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
    font-family: var(--mono); font-size: 12px; color: var(--ink-2);
  }

  @media (max-width: 960px) {
    .hero { grid-template-columns: 1fr; gap: 24px; padding-top: 12px; }
    .mascot-stage { max-width: 360px; margin: 0 auto; }
    .install-grid, .pkg-grid, .why-grid { grid-template-columns: 1fr; }
    .fw-grid { grid-template-columns: 1fr; }
    .fw-card { padding: 36px 24px 32px; }
    .community { grid-template-columns: 1fr; padding: 40px 28px; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
    .term-float { left: 0; }
  }

  /* Phone breakpoint. The home-page nav has six section
     anchors + GitHub CTA which together push past a 393px
     viewport; collapse the section links and keep brand +
     CTA visible (the same shape `.docs-topbar` already takes
     at <760px). The terminal floating card is decorative so
     hide it under the mascot. Section padding tightens too
     since 32px sides eat too much real estate.
  */
  @media (max-width: 640px) {
    .nav { padding: 18px 20px; }
    .nav-links { display: none; }
    .brand .wordmark { height: 36px; }
    .nav-cta span { display: none; }
    .nav-cta { padding: 9px 11px; }
    .hero { padding: 28px 20px 56px; }
    .term-float { display: none; }
    .hero-meta { gap: 14px; font-size: 11px; }
    .install-grid, .pkg-grid, .why-grid, .fw-grid { padding: 0; }
    .foot-grid { grid-template-columns: 1fr; gap: 24px; }
    .wrap { padding: 0 20px; }
    section { padding: 64px 20px; }
    .community { padding: 32px 22px; }
    .docs-topbar-inner { padding: 0 16px; gap: 10px; }
    .docs-search { padding: 7px 12px; }
    .docs-search .kbd { display: none; }
    .docs-version { font-size: 11px; padding: 4px 10px; }
    .docs-tag { font-size: 10px; padding: 3px 8px; }
  }

  /* ---------- DOCS / PACKAGE DETAIL ---------- */
  .docs-browse, .pkg-detail { padding: 96px 32px 64px; }
  .docs-browse-head, .pkg-detail-head { max-width: 880px; margin: 0 auto 32px; }

  .crumbs {
    font-family: var(--mono); font-size: 13px; color: var(--ink-2);
    margin: 0 0 22px; display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
  }
  .crumbs a { color: var(--ink-2); }
  .crumbs a:hover { color: var(--toast); text-decoration: underline; }
  .crumbs .crumb-sep { opacity: 0.45; }
  .crumbs .crumb-current { color: var(--toast); font-weight: 600; }

  .pkg-title {
    margin: 0 0 14px;
    font-family: var(--display); font-weight: 800;
    font-size: clamp(40px, 5vw, 52px);
    line-height: 1.05; letter-spacing: -0.02em;
    color: var(--ink);
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  }
  /* Inherits the display (Nunito) family from `.pkg-title`. The
     mono override here was wrong — the design uses display for
     the whole title; only the version pill stays mono. */
  .pkg-title-name { font-weight: 800; }
  .pkg-title-pill {
    font-family: var(--mono); font-size: 18px; font-weight: 700;
    color: var(--ink);
    background: var(--butter);
    padding: 6px 14px; border-radius: 14px;
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    align-self: center;
  }
  .pkg-lede {
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.55; color: var(--ink-2);
    margin: 0 0 22px; max-width: 820px;
  }
  .pkg-lede code {
    font-family: var(--mono); font-size: 0.92em;
    background: rgba(58,42,24,0.08);
    padding: 2px 8px; border-radius: 8px;
    border: 1px solid rgba(58,42,24,0.18);
  }

  /* Pills row: pills floated left, the README ↔ API toggle CTA
     floated right. The wrap keeps the layout sane on narrow
     viewports — CTA drops onto its own line under the pills. */
  .pkg-pills-row {
    display: flex; align-items: center;
    gap: 16px; flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 0 36px;
  }

  /* Status / meta pills under the lede. `border-radius: 999px`
     plus the global `corner-shape: squircle` gives the design's
     playful pill — squircle ends, never the bare oblong-with-
     fillet look that 12px gets you. Bold emphasis (`<b>`) inside
     a pill reads as the data; surrounding text is ink-2. */
  .pkg-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
  .pkg-pills .pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px;
    font-family: var(--mono); font-size: 12px;
    color: var(--ink-2);
    background: var(--cream-2);
    border: 1.5px solid var(--ink);
    border-radius: 999px;
  }
  .pkg-pills .pill b { color: var(--ink); font-weight: 700; }
  .pkg-pills .pill .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ink); display: inline-block;
    /* keep the dot a true circle even though the global rule
       says everything is squircle — see `.eyebrow .dot`. */
    corner-shape: round;
  }
  /* Status pill — sage fill, bold mono text. The design wraps the
     entire content (`● stable`) in a `<b>` so both the dot bullet
     AND the label render bold; we promote the whole pill to
     weight 700 here so the template stays plain text. */
  .pkg-pills .pill-status {
    background: var(--sage); color: var(--ink);
    font-weight: 700;
  }
  .pkg-pills .pill-status b { color: var(--ink); }
  .pkg-pills .pill-status .dot { background: var(--ink); }
  .pkg-pills .pill-link { text-decoration: none; }
  .pkg-pills .pill-link:hover {
    background: var(--butter); color: var(--ink);
    text-decoration: none;
  }

  /* README ↔ API toggle. Big squircle pill in butter — same
     primary-CTA language as the landing hero's "Get Hatch"
     button, scaled down. `border-radius: 999px` + global
     `corner-shape: squircle` give the squircle pill ends; the
     offset shadow reads as obviously clickable, and the small
     translate on hover lifts it the way the rest of the site's
     cards do. */
  .pkg-doc-cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 18px;
    font-family: var(--mono); font-size: 13px; font-weight: 700;
    color: var(--ink);
    background: var(--butter);
    border: 2px solid var(--ink);
    border-radius: 999px;
    box-shadow: 3px 3px 0 var(--ink);
    text-decoration: none;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
    cursor: pointer;
    flex: none;
  }
  .pkg-doc-cta:hover {
    text-decoration: none;
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--ink);
    background: var(--butter-deep);
  }
  .pkg-doc-cta:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--ink);
  }
  .pkg-doc-cta .arrow {
    font-family: var(--display); font-weight: 900; font-size: 16px;
    line-height: 1;
  }

  /* ---------- README BODY ----------------------------------------
     Markdown rendered by marked.js drops into a flat node tree:
       <h1>, <h2>, <h3>, <p>, <ul>, <ol>, <pre><code>, <table>,
       <blockquote>, <code> (inline).
     This block restyles those into the docs design's typography
     hierarchy. No outer card / shadow on the README — the page's
     760px max-width and the install card above already give the
     READING column its frame.
     ---------------------------------------------------------- */
  .pkg-readme {
    max-width: 760px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0; border-radius: 0;
    box-shadow: none;
    color: var(--ink);
    line-height: 1.6;
    /* CSS counter resets each time the README mounts so section
       numbers (01, 02, …) restart for every package. */
    counter-reset: section;
  }

  /* ── headings ────────────────────────────────────────────── */
  .pkg-readme h1 {
    font-family: var(--display); font-weight: 800;
    font-size: 36px; line-height: 1.1; letter-spacing: -0.015em;
    margin: 0 0 12px; color: var(--ink);
  }
  /* Auto-numbered section headings — `decimal-leading-zero` formats
     1 → "01", 2 → "02". Matches the design's ord chip. */
  .pkg-readme h2 {
    font-family: var(--display); font-weight: 800;
    font-size: 32px; letter-spacing: -0.015em; line-height: 1.15;
    margin: 56px 0 8px; color: var(--ink);
    scroll-margin-top: 100px;
    display: flex; align-items: center; gap: 14px;
    counter-increment: section;
  }
  .pkg-readme h2::before {
    content: counter(section, decimal-leading-zero);
    font-family: var(--mono); font-size: 13px; font-weight: 700;
    color: var(--toast-deep);
    background: var(--shell);
    border: 1.5px solid var(--ink);
    padding: 3px 9px; border-radius: 8px;
    letter-spacing: 0.04em;
    flex: none;
  }
  /* Subhead — the first <p> after an <h2> reads as the design's
     `section-sub`. Slightly bigger, ink-2, no margin-top. */
  .pkg-readme h2 + p {
    color: var(--ink-2); font-size: 16px;
    margin: 0 0 28px; max-width: 640px;
  }
  .pkg-readme h3 {
    font-family: var(--display); font-weight: 800;
    font-size: 22px; line-height: 1.2;
    margin: 36px 0 10px; color: var(--ink);
    scroll-margin-top: 100px;
  }
  .pkg-readme h3 code {
    font-family: var(--mono); font-size: 18px; font-weight: 600;
    color: var(--toast-deep);
    background: transparent; border: 0; padding: 0;
  }
  .pkg-readme h4 {
    font-family: var(--display); font-weight: 700;
    font-size: 17px; margin: 24px 0 8px; color: var(--ink);
  }

  /* ── body copy ───────────────────────────────────────────── */
  .pkg-readme p { margin: 0 0 16px; font-size: 15.5px; color: var(--ink-2); }
  /* Inline code chips — the same subtle treatment the lede uses
     (`rgba(58,42,24,0.08)` fill + 1px low-opacity ink border).
     Reads as a soft chip that doesn't compete with body text;
     the heavier shell+ink-stroke look read as a button instead.
     Description-cell chips inherit this; the param + type cells
     override back to transparent below so they read as plain
     bold mono text rather than chips. */
  .pkg-readme p code, .pkg-readme li code, .pkg-readme td code {
    font-family: var(--mono); font-size: 0.92em;
    background: rgba(58,42,24,0.08);
    color: var(--ink);
    padding: 1.5px 6px; border-radius: 5px;
    border: 1px solid rgba(58,42,24,0.18);
  }
  .pkg-readme strong { color: var(--ink); font-weight: 700; }
  .pkg-readme em { font-style: italic; }

  /* ── lists ───────────────────────────────────────────────── */
  .pkg-readme ul, .pkg-readme ol { margin: 0 0 18px; padding-left: 22px; }
  .pkg-readme li { font-size: 15px; color: var(--ink-2); margin: 6px 0; }
  .pkg-readme li::marker { color: var(--toast); }

  /* ── code blocks (fallback when CodeMirror hasn't mounted) ─ */
  .pkg-readme pre {
    font-family: var(--mono); font-size: 13px; line-height: 1.7;
    background: #2a1f12; color: var(--cream);
    padding: 18px 22px; border-radius: 14px;
    border: 2.5px solid var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
    overflow-x: auto;
    margin: 14px 0 22px;
    position: relative;
  }
  .pkg-readme pre code {
    background: transparent; border: 0; padding: 0;
    color: inherit; font-size: inherit;
  }

  /* ── links ───────────────────────────────────────────────── */
  .pkg-readme a { color: var(--toast-deep); }
  .pkg-readme a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }

  /* ── blockquote → callout box ─────────────────────────────
     Markdown blockquotes render as the design's "tip card":
     butter-tinted fill, full 2.5px ink stroke, offset shadow,
     and a small butter `i` badge in a left column. The leading
     `<strong>` (used by README authors as the title — e.g.
     `> **Tip — Fibers, not async**`) is promoted to a block so
     the body text wraps onto a new line under it.
     ──────────────────────────────────────────────────────── */
  /* Values lifted verbatim from the docs design's `.callout` rule
     (`/tmp/hatch-design/.../Hatch Docs.html` `<style>` block):
     shell fill, 2px ink stroke, 4px offset shadow, 28×28 icon
     chip with butter fill + Nunito 800 `i`. The asymmetric
     `padding-left: 16px` keeps the icon flush with the bordered
     edge while still feeling balanced against the right padding.
     `.warn` / `.note` variants need a JS hook to inject the class
     (markdown can't tag blockquotes); for v1 every callout reads
     as `tip` and we can promote on title-prefix later. */
  .pkg-readme blockquote {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 14px;
    align-items: start;
    margin: 18px 0 22px;
    padding: 14px 18px 14px 16px;
    background: var(--shell);
    color: var(--ink);
    border: 2px solid var(--ink);
    border-radius: 14px;
    box-shadow: 4px 4px 0 var(--ink);
    font-style: normal;
  }
  .pkg-readme blockquote::before {
    content: "i";
    grid-column: 1; grid-row: 1;
    width: 28px; height: 28px;
    display: grid; place-items: center;
    font-family: var(--display); font-weight: 800; font-size: 16px;
    color: var(--ink);
    background: var(--butter);
    border: 2px solid var(--ink);
    border-radius: 8px;
  }
  /* All direct children render in the right column. The first
     paragraph sits next to the icon; subsequent paragraphs flow
     below, aligned to the same column. */
  .pkg-readme blockquote > * {
    grid-column: 2;
  }
  .pkg-readme blockquote p {
    margin: 0 0 8px;
    color: var(--ink-2);
    font-size: 15px;
  }
  .pkg-readme blockquote p:last-child { margin: 0; }
  /* Promote the leading `<strong>` (the "Tip — Fibers, not
     async" title) onto its own line. Without this the title runs
     inline with the body text — the design splits them. */
  .pkg-readme blockquote p:first-child strong:first-child {
    display: block;
    color: var(--ink);
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 6px;
  }
  /* Inline code chips inside callouts use the same subtle fill
     as the rest of the body — the heavier shell+ink-stroke chip
     would compete with the callout's own card framing. */
  .pkg-readme blockquote code {
    background: rgba(58,42,24,0.08);
    border: 1px solid rgba(58,42,24,0.18);
  }

  /* ── images ──────────────────────────────────────────────── */
  .pkg-readme img { max-width: 100%; border-radius: 10px; }

  /* ── params table ─────────────────────────────────────────
     Marked renders `| col | col |` markdown into a plain
     `<table><thead><tr><th>…</th>…</tr></thead><tbody>…`. We
     wrap that in the design's params-card via
     `display: block` on the table + a card-shell border /
     shadow / fill. Header row sits flush with the top edge,
     dashed dividers between body rows.
     ──────────────────────────────────────────────────────── */
  .pkg-readme table {
    /* Drop the default block-level table sizing for a card-
       shaped wrapper. `border-collapse: separate` lets the
       outer card own the border + radius without the inner
       cells re-drawing it. */
    display: block;
    width: 100%;
    margin: 16px 0 28px;
    background: var(--cream-2);
    border: 2.5px solid var(--ink);
    border-radius: 16px;
    box-shadow: 5px 5px 0 var(--ink);
    overflow: hidden;          /* clip dashed dividers + radius */
    font-size: 14px;
  }
  .pkg-readme table thead, .pkg-readme table tbody { display: table; width: 100%; }
  .pkg-readme thead {
    border-bottom: 2px dashed var(--ink);
  }
  .pkg-readme thead th {
    font-family: var(--mono); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--ink-2);
    text-align: left;
    padding: 14px 18px;
    background: transparent;
  }
  .pkg-readme tbody td {
    padding: 14px 18px;
    border-bottom: 1px dashed rgba(58,42,24,0.20);
    vertical-align: top;
    color: var(--ink-2);
  }
  .pkg-readme tbody tr:last-child td { border-bottom: 0; }
  /* Param column: bold mono ink, no chip. Author can leave
     backticks on (` `url` `) for source-readability — the
     `code` selector below strips the chip styling so the
     visual is plain bold text. */
  .pkg-readme tbody td:first-child {
    font-family: var(--mono); font-size: 13.5px; font-weight: 700;
    color: var(--ink); white-space: nowrap;
  }
  /* Type column: mono in toast (the ochre brown the design
     uses). Same chip-strip treatment. */
  .pkg-readme tbody td:nth-child(2) {
    font-family: var(--mono); font-size: 13px;
    color: var(--toast-deep); white-space: nowrap;
  }
  .pkg-readme tbody td:first-child code,
  .pkg-readme tbody td:nth-child(2) code {
    background: transparent; border: 0; padding: 0;
    color: inherit; font-size: inherit; font-weight: inherit;
  }

  /* ── horizontal rule ─────────────────────────────────────── */
  .pkg-readme hr {
    border: 0; height: 1.5px;
    background: rgba(58,42,24,0.15);
    margin: 32px 0;
  }

  .readme-loading, .readme-empty {
    color: var(--ink-2);
    font-family: var(--mono); font-size: 14px;
    display: flex; align-items: center; gap: 12px;
    padding: 24px;
  }
  .readme-loading .spinner {
    width: 14px; height: 14px;
    border: 2px solid rgba(58,42,24,0.2);
    border-top-color: var(--toast);
    border-radius: 50%;
    animation: rl-spin 0.8s linear infinite;
  }
  @keyframes rl-spin { to { transform: rotate(360deg); } }

  /* CodeMirror-mounted Wren code block (replaces the plain `<pre>`
     when `codemirror-wren.js` upgrades it). The CodeMirror theme
     handles padding / colors / borders; we just give the host
     element its outer shadow + sit it in the doc flow. */
  .pkg-readme .doc-code {
    margin: 0 0 18px;
    border-radius: 12px;
    box-shadow: 3px 3px 0 var(--ink);
    overflow: hidden;
  }
  .pkg-readme .doc-code .cm-editor {
    background: var(--syn-panel);
  }

  /* ==========================================================
     DOCS SHELL — topbar + sidebar + main + TOC rail
     ========================================================== */
  .docs-topbar {
    position: sticky; top: 0; z-index: 50;
    background: var(--cream);
    border-bottom: 2px solid var(--ink);
    padding: 14px 0;
  }
  .docs-topbar-inner {
    max-width: 1500px; margin: 0 auto;
    padding: 0 28px;
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    align-items: center; gap: 18px;
  }
  .docs-brand { display: inline-flex; align-items: center; gap: 10px; }
  .docs-brand .wordmark { height: 38px; }
  .docs-tag {
    font-family: var(--mono); font-size: 11px; font-weight: 700;
    letter-spacing: 0.1em;
    background: var(--ink); color: var(--cream);
    padding: 4px 10px; border-radius: 8px;
  }
  .docs-version {
    font-family: var(--mono); font-size: 12px; font-weight: 600;
    color: var(--ink-2);
    background: var(--shell);
    padding: 5px 12px; border-radius: 999px;
    border: 1.5px solid var(--ink);
    box-shadow: 0 2px 0 var(--ink);
  }
  /* Topbar search: fills the gap between the version pill and
     the right-hand nav links. Cream-2 fill, 2px ink border,
     3px offset shadow — same playful card language the rest of
     the site uses. Hover / focus nudge the card up-left. */
  .docs-search {
    display: flex; align-items: center; gap: 10px;
    background: var(--cream-2);
    border: 2px solid var(--ink);
    border-radius: 14px;
    padding: 9px 14px;
    box-shadow: 3px 3px 0 var(--ink);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    justify-self: stretch;
    min-width: 0;
  }
  .docs-search:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--ink);
  }
  .docs-search:focus-within {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--toast-deep);
  }
  .docs-search-icon {
    color: var(--ink); display: inline-flex; line-height: 0; flex: none;
  }
  .docs-search input {
    flex: 1; min-width: 0;
    background: transparent; border: 0; outline: 0;
    font-family: var(--mono); font-size: 13px;
    color: var(--ink);
  }
  .docs-search input::placeholder { color: var(--ink-2); opacity: 0.65; }
  .docs-search .kbd {
    font-family: var(--mono); font-size: 11px; font-weight: 600;
    color: var(--ink-2);
    background: var(--cream); border: 1.5px solid var(--ink);
    padding: 2px 7px; border-radius: 5px;
    flex: none;
  }
  .docs-topbar-links {
    display: flex; align-items: center; gap: 22px;
    font-family: var(--mono); font-size: 13px; font-weight: 500;
  }
  .docs-topbar-links a { color: var(--ink-2); }
  .docs-topbar-links a:hover { color: var(--toast-deep); text-decoration: none; }
  /* Active page — bold + toast underline so the user can see
     "I am here" without squinting at the URL. The route hands
     `activeNav` ("guides" / "packages" / "blog") via the
     docs context; the topbar partial flips `.active` on the
     matching link. */
  .docs-topbar-links a.active {
    color: var(--toast-deep);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }
  /* Pill shape via `border-radius: 999px`. Combined with the
     global `corner-shape: squircle` rule, the ends become
     squircle — same playful card language the version pill,
     meta chips, and pkg-pills already use. A flat 10px rectangle
     stuck out as the only square-ish element in the topbar. */
  .docs-topbar-cta {
    font-family: var(--mono); font-size: 12.5px; font-weight: 600;
    background: var(--ink); color: var(--cream);
    padding: 8px 14px; border-radius: 999px;
    border: 2px solid var(--ink);
    display: inline-flex; align-items: center; gap: 8px;
  }
  .docs-topbar-cta:hover { background: var(--sage-deep); border-color: var(--sage-deep); text-decoration: none; }

  /* ---------- shell ---------- */
  .docs-shell {
    max-width: 1500px; margin: 0 auto;
    padding: 28px 28px 64px;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 220px;
    gap: 36px;
    align-items: start;
  }
  /* Sidebar + TOC stay sticky as the user scrolls long READMEs. */
  .docs-sidebar, .docs-toc {
    position: sticky; top: 76px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
  }
  .docs-sidebar {
    border-right: 1.5px dashed rgba(58,42,24,0.18);
    padding-right: 18px;
  }
  .docs-sidebar .nav-section { margin-bottom: 28px; }
  .docs-sidebar .nav-section h4 {
    font-family: var(--mono); font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--ink-2);
    margin: 0 0 12px;
  }
  .docs-sidebar ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 2px;
  }
  .docs-sidebar li a {
    display: block;
    /* Sidebar links use the body sans (Nunito), not mono — only the
       section headings + filter inputs stay mono. Matches the docs
       design's typography hierarchy: mono signals "code / system
       affordance" (heading caps, filter input), sans signals
       "navigable content". */
    font-family: var(--body); font-size: 14px;
    color: var(--ink-2);
    padding: 6px 12px;
    border-radius: 8px;
    line-height: 1.4;
  }
  .docs-sidebar li a:hover {
    background: var(--cream-2); color: var(--ink);
    text-decoration: none;
  }
  .docs-sidebar li a.active {
    background: var(--ink); color: var(--cream);
    font-weight: 600;
    box-shadow: 3px 3px 0 var(--butter);
  }
  .docs-sidebar li.muted a { color: var(--ink-2); font-style: italic; }
  .docs-sidebar li.muted-row {
    font-family: var(--body); font-size: 13px; color: var(--ink-2);
    padding: 6px 12px; line-height: 1.45;
  }
  /* Inline links inside `.muted-row` copy ("register yours via
     an issue") inherit the navigation-row chip treatment from
     `.docs-sidebar li a` by default — block layout, padding,
     hover fill — which made "an issue" render as a stand-alone
     pill on its own line. Force the inline flow back. */
  .docs-sidebar li.muted-row a {
    display: inline;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--toast-deep);
    font-weight: inherit;
  }
  .docs-sidebar li.muted-row a:hover {
    background: transparent;
    color: var(--toast-deep);
    text-decoration: underline; text-underline-offset: 2px;
  }
  /* Filter input — Tabler search icon flush-left, mono input. */
  .docs-sidebar .nav-search {
    margin: 0 0 8px;
    display: flex; align-items: center; gap: 8px;
    background: var(--cream-2);
    border: 1.5px solid var(--ink);
    border-radius: 10px;
    padding: 6px 10px;
  }
  .docs-sidebar .nav-search svg {
    flex: none; opacity: 0.55; color: var(--ink);
  }
  .docs-sidebar .nav-search input {
    flex: 1; min-width: 0;
    background: transparent; border: 0; outline: none;
    font-family: var(--mono); font-size: 12px;
    color: var(--ink);
  }
  .docs-sidebar .nav-search input::placeholder { color: var(--ink-3, var(--ink-2)); }

  .docs-sidebar .nav-more {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 4px 0 0; padding: 0 12px;
    font-family: var(--mono); font-size: 12px; font-weight: 600;
    color: var(--toast-deep);
  }
  .docs-sidebar .nav-more:hover { text-decoration: underline; text-underline-offset: 3px; }

  /* Show-all toggle: `.extra` rows are hidden by default; flipping
     `.expanded` (manual click) or `.filtering` (active filter
     input) on the parent list reveals them so a typed query can
     reach packages past the preview cap. The `:not([…hidden])`
     guard keeps a non-matching `.extra` row hidden even when the
     section is unfurled — without it the show-rule's higher
     specificity beats the per-row filter-hidden rule and you'd
     see every extra package while typing. */
  .docs-sidebar ul .extra { display: none; }
  .docs-sidebar ul.expanded .extra:not([data-filter-hidden="1"]),
  .docs-sidebar ul.filtering .extra:not([data-filter-hidden="1"]) {
    display: list-item;
  }
  .docs-sidebar ul li[data-filter-hidden="1"] { display: none; }

  /* ---------- main ---------- */
  .docs-main {
    min-width: 0; /* allow inner code blocks to shrink */
  }
  .docs-main .pkg-detail-head, .docs-main .docs-browse-head {
    max-width: 760px; margin: 0 0 24px; padding: 0;
  }
  .docs-main .pkg-readme {
    max-width: 760px;
    padding: 28px 0; margin: 32px 0 0;
    background: transparent;
    border: 0; border-radius: 0;
    box-shadow: none;
  }

  /* Install card — matches the docs design's terminal-pill widget.
     Brown-tinted dark fill (warmer than `--ink`), 2.5px ink
     stroke, 5px offset shadow for the playful card language.
     The COPY button is a transparent ghost-fill on dark — small,
     uppercase mono, subtle cream border. */
  .install-card {
    max-width: 760px;
    background: #2a1f12;
    color: var(--cream);
    border: 2.5px solid var(--ink);
    border-radius: 18px;
    box-shadow: 5px 5px 0 var(--ink);
    padding: 18px 20px;
    margin: 0 0 48px;
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--mono); font-size: 13.5px;
    gap: 16px;
  }
  .install-cmd {
    display: inline-flex; align-items: baseline; gap: 10px;
    min-width: 0; flex: 1;
  }
  .install-pr { color: var(--sage); }
  .install-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .install-copy {
    font-family: var(--mono); font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    background: rgba(251,243,220,0.1);
    border: 1.5px solid rgba(251,243,220,0.3);
    color: var(--cream);
    padding: 5px 10px; border-radius: 8px;
    cursor: pointer;
  }
  .install-copy:hover { background: rgba(251,243,220,0.2); }

  /* TOC rail — values copied from the docs design's `aside.toc`
     block. Mono 12.5px, dashed-rule left border so the column
     reads as a quiet sibling to the main content. h3 entries
     indent under their owning h2 via `.indent` (assigned by the
     readme TOC builder in `Catalog.wrapReadme_`). */
  .docs-toc {
    font-family: var(--mono); font-size: 12.5px;
    border-left: 2px solid rgba(58,42,24,0.18);
    padding: 4px 0 4px 16px;
  }
  .docs-toc h5 {
    font-family: var(--mono); font-size: 11px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-2);
    margin: 0 0 12px;
  }
  .docs-toc ul {
    list-style: none; padding: 0; margin: 0;
  }
  .docs-toc li { margin-bottom: 8px; line-height: 1.4; }
  .docs-toc li.indent { padding-left: 14px; }
  .docs-toc a {
    color: var(--ink-2); text-decoration: none;
  }
  .docs-toc a:hover, .docs-toc a.active { color: var(--toast-deep); }
  .docs-toc a.active { font-weight: 600; }

  /* Section ordinals (inside README h2's). The README markdown
     authors plain `## 01 Overview` headings; this wraps the
     leading `01` in a styled chip via CSS counter / generated
     content fallback. Kept simple — the rendered HTML is just
     `<h2>01 Overview</h2>`, so we use a CSS pseudo-element only
     when the heading starts with two digits. */

  /* Hamburger button + drawer-backdrop default styling. Desktop
     never shows them — the `@media (max-width: 760px)` block
     below flips both to visible. Defined before the @media so
     a later same-specificity desktop rule can't win against the
     phone override (CSS source-order tiebreaker). */
  .docs-sidebar-toggle {
    display: none;
    align-items: center; justify-content: center;
    width: 38px; height: 38px;
    padding: 0;
    background: var(--cream);
    color: var(--ink);
    border: 2px solid var(--ink);
    border-radius: 12px;
    box-shadow: 2px 2px 0 var(--ink);
    cursor: pointer;
  }
  .docs-sidebar-toggle:hover {
    background: var(--shell);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--ink);
  }
  .docs-sidebar-toggle svg { display: block; }
  .docs-sidebar-backdrop { display: none; }

  @media (max-width: 1100px) {
    .docs-shell { grid-template-columns: 240px minmax(0, 1fr); }
    .docs-toc { display: none; }
  }
  @media (max-width: 760px) {
    .docs-shell {
      grid-template-columns: 1fr;
    }
    .docs-topbar-links { display: none; }
    /* Search field is wide and ⌘K isn't usable on touch — drop it
       on phones; the sidebar drawer (toggled by the hamburger
       button on the left) gives access to the package list and
       guide links instead. */
    .docs-search { display: none; }
    .docs-topbar-inner {
      grid-template-columns: auto auto auto 1fr;
      gap: 8px; padding: 0 14px;
    }
    /* Push the GitHub CTA to the right edge of the 1fr trailing
       column. Without `justify-self: end` the icon-only button
       expands to fill the cell width. */
    .docs-topbar-cta { justify-self: end; }
    /* Hamburger button — hidden by default (above), shown on
       phones. Visually matches `.docs-topbar-cta`'s ink-pill
       styling but without the fill so it reads as a tool. */
    .docs-sidebar-toggle { display: inline-flex; }
    /* GitHub CTA shrinks to icon-only on phones — the "github"
       label takes more horizontal room than the brand+pill row
       to its left, and tapping the icon already conveys the
       intent. */
    .docs-topbar-cta span { display: none; }
    .docs-topbar-cta { padding: 9px 11px; gap: 0; }

    /* Sidebar becomes a slide-in drawer rather than a stacked
       static block. Closed by default; flipped open by adding
       `.is-open` from the hamburger toggle script in
       `docs_topbar.html`. The 320px width matches the desktop
       layout's sidebar column so list items keep their natural
       wrapping. */
    .docs-sidebar {
      position: fixed; top: 0; left: 0;
      width: min(86vw, 320px);
      height: 100dvh; max-height: none;
      margin: 0; padding: 24px 18px 32px;
      background: var(--cream);
      border-right: 2px solid var(--ink);
      border-bottom: 0;
      box-shadow: 6px 0 0 rgba(58,42,24,0.06);
      transform: translateX(-100%);
      transition: transform 220ms ease;
      z-index: 60;
      overflow-y: auto;
    }
    .docs-sidebar.is-open { transform: translateX(0); }

    /* Backdrop overlay — appears with the drawer, dim + tappable
       to close. Stays out of the layout (display: none) when
       the drawer is closed so it doesn't intercept taps. */
    .docs-sidebar-backdrop {
      display: none;
      position: fixed; inset: 0;
      background: rgba(58,42,24,0.42);
      z-index: 55;
    }
    .docs-sidebar-backdrop.is-open { display: block; }

    /* Body scroll lock when drawer is open so users can't
       accidentally scroll the page underneath. */
    body.docs-sidebar-locked { overflow: hidden; }
  }

  /* API reference placeholder — only rendered until the
     `Docs`-section JSON renderer lands. Mirrors the readme
     column width so the header + install card stay anchored. */
  .pkg-api { max-width: 760px; }
  .pkg-api .api-placeholder {
    padding: 36px 32px;
    background: var(--shell);
    border: 2px solid var(--ink);
    border-radius: 16px;
    box-shadow: 4px 4px 0 var(--ink);
    color: var(--ink-2);
    line-height: 1.6;
  }
  .pkg-api .api-placeholder h2 {
    font-family: var(--display); font-weight: 800;
    font-size: 26px; margin: 0 0 14px; color: var(--ink);
  }
  .pkg-api .api-placeholder p { margin: 0 0 12px; font-size: 15px; }
  .pkg-api .api-placeholder p:last-child { margin: 0; }
  .pkg-api .api-placeholder code {
    font-family: var(--mono); font-size: 0.92em;
    background: rgba(58,42,24,0.08);
    padding: 1.5px 6px; border-radius: 5px;
    border: 1px solid rgba(58,42,24,0.18);
  }
  .pkg-api .api-placeholder a { color: var(--toast-deep); }

  /* ── API REFERENCE BODY ──────────────────────────────────────
     The API body wraps the same `.pkg-readme` typography the
     README uses — h3 entries with toast-deep mono signatures,
     ink-2 body prose, the same code-chip rules. We only add
     three deltas:

       1. `api-entry` (the h3) tightens the top margin from 36px
          (good for README sections) to 22px (good for a list of
          dozens of entries on one page).
       2. The verb pill sits inline before the signature.
       3. Class banner / category labels are dropped entirely —
          each entry's `Class.member` signature already carries
          the full identity.
     ─────────────────────────────────────────────────────── */
  .api-doc { max-width: 760px; }

  /* The README's h2 auto-numbers via a CSS counter ("01", "02",
     …). On the API page that's noise — module / class banners
     aren't sections in a tutorial, they're structural labels.
     Suppress the ord chip + the counter increment inside
     `.api-doc`. */
  .api-doc h2::before { content: none; }
  .api-doc h2 { counter-increment: none; }
  /* `.docs-main .pkg-readme` adds 28px vertical padding for the
     README view — fine when the body is one prose flow, but it
     pushes the API page down by 28px before the first banner.
     Drop it for the api-doc wrapper. */
  .docs-main .pkg-readme.api-doc { padding: 0; margin: 0; }
  .api-tag-mod { background: var(--shell); color: var(--ink); }

  /* Verb tags — values copied from the design's `.verb` rule
     (mono 11px, 1.5px ink stroke, 5px radius). FN = method,
     CL = class, NEW = constructor, GET / SET = accessor,
     FLD = field. Color vocabulary: butter for action (FN /
     NEW), sky / cream for data (GET / SET / FLD), sage for
     class. */
  .api-tag {
    display: inline-block;
    font-family: var(--mono); font-size: 11px; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase;
    padding: 2px 7px;
    border: 1.5px solid var(--ink);
    border-radius: 5px;
    flex: none;
    vertical-align: middle;
  }
  .api-tag-fn  { background: var(--butter);  color: var(--ink); }
  .api-tag-cl  { background: var(--sage);    color: var(--ink); }
  .api-tag-new { background: var(--toast);   color: var(--cream); }
  .api-tag-get { background: var(--sky);     color: var(--ink); }
  .api-tag-set { background: var(--cream-2); color: var(--ink); }
  .api-tag-fld { background: var(--shell);   color: var(--ink); }

  /* ---------- 404 PAGE ----------------------------------------
     Reuses the landing page's hero rhythm — eyebrow, big
     italic-accent headline, lede, CTA row, illustration to the
     side — sized down so the page reads as quiet rather than
     a missing-data error. The illustration slot falls back to
     hidden via `onerror` so a placeholder filename doesn't blow
     up the layout while the asset is being authored.
     ------------------------------------------------------- */
  .four-oh-four {
    padding: 24px 32px 96px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
  }
  .four-oh-four-art {
    width: 100%; max-width: 460px;
    margin: 0 auto;
  }
  .four-oh-four-art img,
  .four-oh-four-art svg {
    display: block;
    width: 100%; height: auto;
  }
  .four-oh-four-copy {
    max-width: 560px; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center;
  }
  .four-oh-four-copy .eyebrow { margin-bottom: 12px; }
  .four-oh-four-title {
    font-family: var(--display); font-weight: 800;
    font-size: clamp(34px, 4.5vw, 52px);
    line-height: 1.05; letter-spacing: -0.02em;
    margin: 4px 0 14px; color: var(--ink);
  }
  .four-oh-four-title .accent {
    color: var(--toast-deep);
    font-style: italic; font-weight: 700;
  }
  .four-oh-four-copy .lede {
    font-size: 16px; color: var(--ink-2);
    margin: 0 0 24px; max-width: 520px;
  }
  .four-oh-four .cta-row {
    gap: 12px; justify-content: center; flex-wrap: wrap;
  }
  .four-oh-four-path {
    margin: 24px 0 0;
    font-family: var(--mono); font-size: 13px;
    color: var(--ink-2);
  }
  .four-oh-four-path code {
    background: var(--shell);
    border: 1.5px solid var(--ink);
    padding: 3px 9px; border-radius: 6px;
    font-family: var(--mono); font-size: 12.5px;
    color: var(--ink);
  }
  @media (max-width: 800px) {
    .four-oh-four-art { max-width: 320px; }
  }

  /* -- /blog index ----------------------------------------------
     Two-up card grid on desktop, stacks on narrow viewports. Each
     card is a full-tile link; hover lifts it the same way pkg-card
     does so the affordance reads consistently across the site.
     ------------------------------------------------------- */
  .blog-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 8px 0 32px;
  }
  .blog-card {
    background: var(--cream);
    border: 2.5px solid var(--ink);
    border-radius: 22px;
    padding: 22px 22px 20px;
    box-shadow: 4px 4px 0 var(--ink);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    text-decoration: none; color: var(--ink);
    display: flex; flex-direction: column; gap: 10px;
  }
  .blog-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink);
  }
  .blog-card-tag {
    align-self: flex-start;
    font-family: var(--mono); font-size: 11.5px;
    letter-spacing: 0.06em; text-transform: uppercase;
    background: var(--butter);
    border: 2px solid var(--ink); border-radius: 999px;
    padding: 3px 10px; color: var(--ink);
    font-weight: 700;
  }
  .blog-card-title {
    font-family: var(--display); font-weight: 800;
    font-size: 22px; line-height: 1.2; letter-spacing: -0.01em;
    margin: 4px 0 0; color: var(--ink);
  }
  .blog-card-blurb {
    font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
    margin: 0;
  }
  .blog-card-cta {
    margin-top: 4px;
    font-family: var(--mono); font-size: 13px;
    color: var(--toast-deep); font-weight: 600;
  }
  .blog-card-cta .arr { transition: transform 0.15s ease; }
  .blog-card:hover .blog-card-cta .arr { transform: translateX(3px); }
  @media (max-width: 800px) {
    .blog-grid { grid-template-columns: 1fr; }
  }