:root {
      color-scheme: light;
      --ink: #172033;
      --muted: #596476;
      --soft: #f6f8fb;
      --paper: #fffdf8;
      --panel: #ffffff;
      --line: #d9e0eb;
      --blue: #2359d1;
      --teal: #0f766e;
      --amber: #b7791f;
      --rose: #b8345a;
      --night: #141c2d;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.62;
    }

    a {
      color: var(--blue);
      text-decoration-color: rgba(35, 89, 209, 0.3);
      text-underline-offset: 3px;
    }

    a:hover { text-decoration-color: currentColor; }

    img { max-width: 100%; display: block; }

    .shell {
      max-width: 1180px;
      margin: 0 auto;
      padding: 28px 22px 52px;
    }

    .topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      padding: 0 0 28px;
      color: var(--muted);
      font-size: 0.94rem;
    }

    .brand {
      color: var(--ink);
      font-weight: 850;
      letter-spacing: 0;
    }

    .topbar nav {
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .hero {
      display: grid;
      grid-template-columns: 1fr;
      gap: 42px;
      align-items: stretch;
      border-top: 1px solid var(--line);
      padding-top: 34px;
    }

    /* Two-column hero only when a visual is present (e.g. the memory post). */
    .hero:has(.hero-visual) {
      grid-template-columns: minmax(0, 1.03fr) minmax(320px, 0.97fr);
      min-height: 58vh;
    }

    .hero-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 8px 0 20px;
    }

    .hero-compact {
      grid-template-columns: minmax(0, 1fr);
      min-height: auto;
    }

    .hero-compact .hero-copy {
      padding-bottom: 24px;
    }

    .eyebrow {
      margin: 0 0 18px;
      color: var(--teal);
      font-size: 0.78rem;
      font-weight: 850;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    h1 {
      margin: 0;
      max-width: 900px;
      font-size: clamp(2.5rem, 5.2vw, 4.4rem);
      line-height: 0.98;
      letter-spacing: 0;
    }

    .dek {
      margin: 20px 0 0;
      max-width: 700px;
      color: #38445a;
      font-size: clamp(1.12rem, 2vw, 1.34rem);
    }

    .meta-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 34px;
      max-width: 780px;
    }

    .meta-card {
      border-left: 4px solid var(--line);
      padding: 10px 12px;
      color: var(--muted);
      background: rgba(255, 255, 255, 0.55);
    }

    .meta-card strong {
      display: block;
      color: var(--ink);
      margin-bottom: 2px;
      font-size: 0.92rem;
    }

    .hero-visual {
      align-self: center;
      overflow: hidden;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #f5f8fc;
      box-shadow: 0 28px 70px rgba(20, 28, 45, 0.16);
    }

    .hero-visual img {
      width: 100%;
      height: min(62vh, 680px);
      object-fit: cover;
    }

    .caption {
      margin: 0;
      padding: 14px 16px;
      color: var(--muted);
      font-size: 0.88rem;
      background: rgba(255, 255, 255, 0.88);
      border-top: 1px solid var(--line);
    }

    main {
      display: grid;
      grid-template-columns: minmax(0, 750px) minmax(250px, 1fr);
      gap: 58px;
      padding-top: 40px;
      border-top: 1px solid var(--line);
    }

    article {
      font-size: 1.06rem;
    }

    .lead {
      margin-top: 0;
      color: #2f3b50;
      font-size: 1.25rem;
      line-height: 1.55;
    }

    h2 {
      margin: 38px 0 14px;
      font-size: 1.72rem;
      line-height: 1.18;
      letter-spacing: 0;
    }

    p { margin: 0 0 15px; }

    .pullquote {
      margin: 26px 0;
      padding: 26px 28px;
      border-left: 5px solid var(--blue);
      background: #edf4ff;
      border-radius: 0 8px 8px 0;
      color: #18376c;
      font-size: 1.22rem;
      font-weight: 780;
      line-height: 1.45;
    }

    .figure {
      margin: 30px 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 16px 46px rgba(20, 28, 45, 0.08);
    }

    .figure img { width: 100%; }

    .two-lane {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin: 30px 0;
    }

    .lane {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 20px;
    }

    .lane h3 {
      margin: 0 0 12px;
      font-size: 1.03rem;
    }

    .lane ul {
      padding-left: 20px;
      margin: 0;
      color: var(--muted);
    }

    .lane li { margin: 8px 0; }

    .install-block {
      margin: 34px 0;
      padding: 24px;
      border: 1px solid #cad7e9;
      border-radius: 8px;
      background: #f6f9fd;
    }

    .install-block h2 {
      margin-top: 0;
    }

    .install-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin: 20px 0;
    }

    .install-card {
      min-width: 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 18px;
    }

    .install-card h3 {
      margin: 0 0 10px;
      font-size: 1rem;
    }

    .install-label {
      margin: 14px 0 6px;
      color: var(--muted);
      font-size: 0.85rem;
    }

    .install-card h3 + .install-label {
      margin-top: 0;
    }

    pre {
      max-width: 100%;
      overflow-x: visible;
      margin: 0;
      padding: 14px;
      border-radius: 8px;
      background: #111827;
      color: #e5edf8;
      font-size: 0.84rem;
      line-height: 1.55;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    pre code {
      padding: 0;
      background: transparent;
      color: inherit;
      font-size: inherit;
      white-space: inherit;
      overflow-wrap: inherit;
      word-break: inherit;
    }

    .install-footnote {
      margin-bottom: 0;
      color: var(--muted);
      font-size: 0.95rem;
    }

    .note {
      margin: 34px 0;
      padding: 22px;
      background: #f8f4ea;
      border: 1px solid #ead9b7;
      border-radius: 8px;
    }

    .note p:last-child { margin-bottom: 0; }

    .memory-page main {
      padding-top: 42px;
    }

    .memory-page article h2 {
      margin-top: 44px;
    }

    .hook-flow {
      display: grid;
      gap: 10px;
      margin: 26px 0 20px;
    }

    .hook-path {
      display: grid;
      grid-template-columns: 0.85fr 1.25fr auto 1.25fr auto 1.15fr;
      gap: 10px;
      align-items: center;
      padding: 13px 15px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      font-size: 0.92rem;
    }

    .hook-path span:not(.hook-arrow) {
      color: var(--muted);
    }

    .hook-arrow {
      color: var(--teal);
      font-weight: 850;
    }

    .hook-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin: 20px 0 28px;
    }

    .hook-card {
      padding: 18px;
      border-top: 4px solid var(--teal);
      border-radius: 6px;
      background: var(--soft);
    }

    .hook-card h3 {
      margin: 0 0 10px;
      font-size: 1rem;
    }

    .hook-card p {
      margin-bottom: 0;
      color: var(--muted);
      font-size: 0.93rem;
    }

    .hook-card .hook-label {
      margin-bottom: 6px;
      color: var(--teal);
      font-size: 0.72rem;
      font-weight: 850;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .prereq-details {
      margin: 24px 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
    }

    .prereq-details summary {
      padding: 17px 20px;
      cursor: pointer;
      color: var(--ink);
      font-weight: 800;
    }

    .prereq-details[open] summary {
      border-bottom: 1px solid var(--line);
    }

    .details-body {
      padding: 20px;
    }

    .details-body p:last-child {
      margin-bottom: 0;
    }

    code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 0.92em;
      background: #eef1f5;
      border-radius: 5px;
      padding: 0.12em 0.35em;
    }

    aside {
      position: sticky;
      top: 22px;
      align-self: start;
      color: var(--muted);
      font-size: 0.94rem;
    }

    .side-panel {
      border-left: 1px solid var(--line);
      padding-left: 24px;
      margin-bottom: 30px;
    }

    aside h3 {
      margin: 0 0 12px;
      color: var(--ink);
      font-size: 1rem;
      letter-spacing: 0;
    }

    aside p { margin-bottom: 14px; }

    .link-list {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }

    .link-list a {
      display: block;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      text-decoration: none;
    }

    footer {
      margin-top: 70px;
      padding-top: 24px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 0.95rem;
    }

    @media (max-width: 900px) {
      .shell { padding: 24px 16px 52px; }
      .topbar { align-items: flex-start; flex-direction: column; }
      .topbar nav { justify-content: flex-start; }
      .hero, main { grid-template-columns: 1fr; }
      .hero { min-height: auto; }
      .hero-visual img { height: auto; }
      .meta-grid, .two-lane, .install-grid, .hook-grid { grid-template-columns: 1fr; }
      .hook-path { grid-template-columns: 1fr; gap: 3px; }
      .hook-arrow { transform: rotate(90deg); width: fit-content; }
      aside { position: static; }
      .side-panel { border-left: 0; border-top: 1px solid var(--line); padding: 24px 0 0; }
    }