@layer reset, base, layout, components, content, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
  ul, ol { margin: 0; }
  button, input { font: inherit; }
  button { color: inherit; }
  a { color: inherit; }
  img, svg { display: block; max-width: 100%; }
}

@layer base {
  :root {
    color-scheme: light;
    --sidebar-width: 17.5rem;
    --canvas: #f6f7fb;
    --surface: #ffffff;
    --surface-soft: #f9f9fc;
    --surface-raised: #ffffff;
    --ink: #20202a;
    --ink-strong: #111119;
    --muted: #686879;
    --faint: #9696a5;
    --line: #e4e4eb;
    --line-strong: #d5d4df;
    --brand: #6657e8;
    --brand-strong: #4e3fd2;
    --brand-soft: #eeecff;
    --accent: #12a39a;
    --code: #171821;
    --code-ink: #e8e7f2;
    --shadow-sm: 0 1px 2px rgb(22 22 34 / 5%), 0 5px 18px rgb(35 31 66 / 4%);
    --shadow-lg: 0 24px 70px rgb(31 26 72 / 12%);
    --radius-sm: .55rem;
    --radius: .85rem;
    --radius-lg: 1.25rem;
    --ease: cubic-bezier(.2, .75, .25, 1);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --canvas: #111119;
    --surface: #191922;
    --surface-soft: #15151e;
    --surface-raised: #20202b;
    --ink: #e7e7ed;
    --ink-strong: #fbfbfd;
    --muted: #aaa9b8;
    --faint: #777684;
    --line: #2c2c38;
    --line-strong: #3a3947;
    --brand: #9d92ff;
    --brand-strong: #b2a9ff;
    --brand-soft: #292642;
    --accent: #4dd0c6;
    --code: #0b0b11;
    --code-ink: #eeeef5;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 18%), 0 8px 24px rgb(0 0 0 / 14%);
    --shadow-lg: 0 26px 80px rgb(0 0 0 / 32%);
  }

  body {
    min-width: 20rem;
    min-height: 100vh;
    background:
      radial-gradient(circle at 76% -10%, rgb(102 87 232 / 7%), transparent 34rem),
      var(--canvas);
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.65;
  }

  ::selection { background: rgb(102 87 232 / 22%); color: var(--ink-strong); }

  :focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand) 36%, transparent);
    outline-offset: 3px;
  }

  [hidden] { display: none !important; }
}

@layer layout {
  .site-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    display: flex;
    width: var(--sidebar-width);
    flex-direction: column;
    border-right: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 95%, transparent);
    box-shadow: 8px 0 34px rgb(33 28 74 / 3%);
    backdrop-filter: blur(18px);
  }

  .site-main { min-height: 100vh; margin-left: var(--sidebar-width); }

  .desktop-toolbar {
    display: flex;
    height: 4.25rem;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(2rem, 4vw, 4.5rem);
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--canvas) 86%, transparent);
    backdrop-filter: blur(16px);
  }

  .page-shell {
    display: grid;
    width: min(100%, 88rem);
    margin: 0 auto;
    grid-template-columns: minmax(0, 52rem) 14rem;
    justify-content: center;
    gap: clamp(2.5rem, 5vw, 5rem);
    padding: clamp(2rem, 4vw, 4rem) clamp(2rem, 4vw, 4.5rem) 5rem;
  }

  .content-column { min-width: 0; }

  .page-toc { min-width: 0; }
  .page-toc__inner { position: sticky; top: 2.5rem; }

  .mobile-header { display: none; }
  .mobile-overlay { display: none; }

  @media (max-width: 74rem) {
    .page-shell { grid-template-columns: minmax(0, 50rem); }
    .page-toc { display: none; }
  }

  @media (max-width: 60rem) {
    .site-sidebar {
      width: min(20rem, calc(100vw - 3rem));
      transform: translateX(-105%);
      transition: transform .28s var(--ease);
    }
    body.nav-open .site-sidebar { transform: translateX(0); }
    .site-main { margin-left: 0; }
    .desktop-toolbar { display: none; }
    .mobile-header {
      position: sticky;
      top: 0;
      z-index: 40;
      display: flex;
      height: 4rem;
      align-items: center;
      justify-content: space-between;
      padding: 0 1rem;
      border-bottom: 1px solid var(--line);
      background: color-mix(in srgb, var(--surface) 88%, transparent);
      backdrop-filter: blur(18px);
    }
    .mobile-overlay {
      position: fixed;
      inset: 0;
      z-index: 45;
      display: block;
      background: rgb(12 12 20 / 48%);
      backdrop-filter: blur(3px);
    }
    .page-shell { padding: 1.5rem clamp(1rem, 4vw, 2rem) 4rem; }
  }

  @media (max-width: 38rem) {
    .page-shell { padding-inline: .8rem; }
  }
}

@layer components {
  .skip-link {
    position: fixed;
    top: .75rem;
    left: 50%;
    z-index: 1000;
    padding: .65rem 1rem;
    transform: translate(-50%, -180%);
    border-radius: .5rem;
    background: var(--ink-strong);
    color: var(--surface);
    font-weight: 750;
    text-decoration: none;
    transition: transform .2s;
  }
  .skip-link:focus { transform: translate(-50%, 0); }

  .reading-progress {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    height: 2px;
    pointer-events: none;
  }
  .reading-progress span {
    display: block;
    width: var(--reading-progress, 0%);
    height: 100%;
    background: linear-gradient(90deg, var(--brand), #a25ae8, var(--accent));
    transition: width .08s linear;
  }

  .icon { width: 1.15rem; height: 1.15rem; flex: none; }
  .icon-button {
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: .7rem;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: border-color .18s, color .18s, background .18s, transform .18s;
  }
  .icon-button:hover { border-color: var(--line-strong); background: var(--surface-raised); color: var(--brand); transform: translateY(-1px); }

  .sidebar-header {
    display: flex;
    min-height: 5.75rem;
    align-items: center;
    justify-content: space-between;
    padding: 1.15rem 1.3rem;
  }
  .sidebar-close { display: none; }
  .brand, .mobile-brand {
    display: inline-flex;
    align-items: center;
    gap: .72rem;
    color: var(--ink-strong);
    text-decoration: none;
  }
  .brand > span:last-child { display: grid; }
  .brand strong { font-size: 1rem; font-weight: 830; letter-spacing: -.02em; }
  .brand small { color: var(--muted); font-size: .68rem; font-weight: 680; letter-spacing: .075em; text-transform: uppercase; }
  .brand-mark {
    position: relative;
    display: inline-grid;
    width: 2.15rem;
    height: 2.15rem;
    flex: none;
    place-items: center;
    overflow: hidden;
    border-radius: .7rem;
    background: linear-gradient(145deg, #7a6cf0, #4e3fd2);
    box-shadow: 0 8px 18px rgb(78 63 210 / 25%);
  }
  .brand-mark i { position: absolute; display: block; background: white; transform: rotate(45deg); }
  .brand-mark i:nth-child(1) { width: .82rem; height: .13rem; border-radius: 1rem; }
  .brand-mark i:nth-child(2) { width: .13rem; height: .82rem; border-radius: 1rem; }
  .brand-mark i:nth-child(3) { right: .42rem; top: .38rem; width: .19rem; height: .19rem; border-radius: 50%; }

  .sidebar-search { padding: 0 1rem 1.05rem; border-bottom: 1px solid var(--line); }
  .search-trigger, .toolbar-search {
    display: flex;
    width: 100%;
    min-height: 2.65rem;
    align-items: center;
    gap: .65rem;
    padding: 0 .75rem;
    border: 1px solid var(--line);
    border-radius: .72rem;
    background: var(--surface-soft);
    color: var(--muted);
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 35%);
    font-size: .82rem;
    text-align: left;
    transition: border-color .18s, background .18s, box-shadow .18s;
  }
  .search-trigger:hover, .toolbar-search:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); background: var(--surface); box-shadow: var(--shadow-sm); }
  .search-trigger span, .toolbar-search span { min-width: 0; flex: 1; }
  kbd {
    display: inline-flex;
    min-height: 1.35rem;
    align-items: center;
    padding: 0 .38rem;
    border: 1px solid var(--line-strong);
    border-radius: .3rem;
    background: var(--surface);
    color: var(--faint);
    box-shadow: 0 1px 0 var(--line);
    font-family: inherit;
    font-size: .67rem;
    line-height: 1;
  }

  .sidebar-scroll { min-height: 0; flex: 1; overflow-y: auto; padding: 1.25rem .8rem 2rem; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
  .nav-group + .nav-group { margin-top: 1.6rem; }
  .nav-group h2 { padding: 0 .65rem .5rem; color: var(--faint); font-size: .66rem; font-weight: 780; letter-spacing: .095em; text-transform: uppercase; }
  .nav-group nav { display: grid; gap: .16rem; }
  .nav-link {
    position: relative;
    display: flex;
    min-height: 2.55rem;
    align-items: center;
    gap: .72rem;
    padding: .4rem .65rem;
    border-radius: .58rem;
    color: var(--muted);
    font-size: .84rem;
    font-weight: 610;
    text-decoration: none;
    transition: background .16s, color .16s, transform .16s;
  }
  .nav-link:hover { background: var(--surface-soft); color: var(--ink-strong); transform: translateX(2px); }
  .nav-link.is-active { background: var(--brand-soft); color: var(--brand-strong); font-weight: 740; }
  .nav-link.is-active::before { position: absolute; inset: .62rem auto .62rem -.8rem; width: 3px; border-radius: 0 1rem 1rem 0; background: var(--brand); content: ""; }
  .nav-link__number { width: 1.5rem; color: var(--faint); font-family: "SFMono-Regular", Consolas, monospace; font-size: .65rem; font-weight: 650; }
  .nav-link.is-active .nav-link__number { color: var(--brand); }

  .sidebar-footer {
    display: flex;
    min-height: 4.7rem;
    align-items: center;
    gap: .65rem;
    padding: .85rem 1.35rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
  }
  .sidebar-footer > span:last-child { display: grid; }
  .sidebar-footer strong { color: var(--ink); font-size: .72rem; }
  .sidebar-footer small { font-size: .66rem; }
  .status-dot { display: inline-block; width: .48rem; height: .48rem; flex: none; border-radius: 50%; background: #22b879; box-shadow: 0 0 0 4px rgb(34 184 121 / 12%); }

  .breadcrumbs { display: flex; align-items: center; gap: .55rem; color: var(--faint); font-size: .75rem; font-weight: 650; }
  .breadcrumbs a { color: var(--muted); text-decoration: none; }
  .breadcrumbs a:hover { color: var(--brand); }
  .toolbar-actions { display: flex; align-items: center; gap: .6rem; }
  .toolbar-search { width: 10rem; min-height: 2.5rem; background: var(--surface); }
  .theme-icon--moon { display: none; }
  :root[data-theme="dark"] .theme-icon--sun { display: none; }
  :root[data-theme="dark"] .theme-icon--moon { display: block; }

  .mobile-brand { font-size: .86rem; }
  .mobile-brand .brand-mark { width: 1.85rem; height: 1.85rem; border-radius: .58rem; }

  .page-hero {
    --hero-color: #6657e8;
    --hero-soft: #eeecff;
    position: relative;
    isolation: isolate;
    min-height: 20rem;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 3.7rem);
    border: 1px solid color-mix(in srgb, var(--hero-color) 18%, var(--line));
    border-radius: 1.65rem;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--hero-soft) 88%, var(--surface)), var(--surface) 68%),
      var(--surface);
    box-shadow: var(--shadow-sm);
  }
  :root[data-theme="dark"] .page-hero { --hero-soft: #24213a; }
  .page-hero--blue { --hero-color: #3182dd; --hero-soft: #e7f3ff; }
  .page-hero--cyan { --hero-color: #169eaa; --hero-soft: #e5f8f8; }
  .page-hero--amber { --hero-color: #c27a12; --hero-soft: #fff3d9; }
  .page-hero--rose { --hero-color: #c95c78; --hero-soft: #fff0f3; }
  .page-hero--green { --hero-color: #278a61; --hero-soft: #e7f7ef; }
  :root[data-theme="dark"] .page-hero--blue { --hero-soft: #192838; }
  :root[data-theme="dark"] .page-hero--cyan { --hero-soft: #172d30; }
  :root[data-theme="dark"] .page-hero--amber { --hero-soft: #302819; }
  :root[data-theme="dark"] .page-hero--rose { --hero-soft: #342027; }
  :root[data-theme="dark"] .page-hero--green { --hero-soft: #192b24; }
  .page-hero__meta { position: relative; z-index: 2; display: flex; align-items: center; gap: .65rem; color: color-mix(in srgb, var(--hero-color) 86%, var(--ink)); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
  .page-hero__meta span + span { display: inline-flex; align-items: center; gap: .65rem; }
  .page-hero__meta span + span::before { width: 3px; height: 3px; border-radius: 50%; background: currentColor; content: ""; opacity: .45; }
  .page-hero h1 { position: relative; z-index: 2; max-width: 12ch; margin-top: 2rem; color: var(--ink-strong); font-size: clamp(2.5rem, 5vw, 4.4rem); font-weight: 840; line-height: .98; letter-spacing: -.055em; text-wrap: balance; }
  .page-hero > p { position: relative; z-index: 2; max-width: 39rem; margin-top: 1.35rem; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.16rem); line-height: 1.65; text-wrap: pretty; }
  .page-hero__footer { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.3rem; padding-top: 1.2rem; border-top: 1px solid color-mix(in srgb, var(--hero-color) 16%, var(--line)); color: var(--muted); font-size: .72rem; font-weight: 650; }
  .page-hero__footer span, .page-hero__footer a { display: inline-flex; align-items: center; gap: .55rem; }
  .page-hero__footer a { color: var(--hero-color); text-decoration: none; }
  .page-hero__footer .icon { width: .9rem; height: .9rem; }
  .hero-orbit { position: absolute; z-index: 1; right: -5rem; top: -5rem; width: 20rem; height: 20rem; border: 1px solid color-mix(in srgb, var(--hero-color) 15%, transparent); border-radius: 50%; }
  .hero-orbit::before, .hero-orbit::after { position: absolute; inset: 3.2rem; border: 1px solid color-mix(in srgb, var(--hero-color) 13%, transparent); border-radius: inherit; content: ""; }
  .hero-orbit::after { inset: 6.5rem; background: color-mix(in srgb, var(--hero-color) 7%, transparent); }
  .hero-orbit i { position: absolute; width: .55rem; height: .55rem; border: 2px solid var(--surface); border-radius: 50%; background: var(--hero-color); box-shadow: 0 0 0 5px color-mix(in srgb, var(--hero-color) 12%, transparent); }
  .hero-orbit i:nth-child(1) { left: 2.7rem; bottom: 2.4rem; }
  .hero-orbit i:nth-child(2) { left: 5rem; bottom: 8.5rem; width: .35rem; height: .35rem; opacity: .6; }
  .hero-orbit i:nth-child(3) { left: 8.8rem; bottom: 4rem; width: .4rem; height: .4rem; opacity: .45; }

  .page-toc h2 { margin-bottom: .8rem; color: var(--ink-strong); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .page-toc nav { display: grid; gap: .08rem; border-left: 1px solid var(--line); }
  .toc-link { margin-left: -1px; padding: .37rem .1rem .37rem .85rem; border-left: 1px solid transparent; color: var(--muted); font-size: .73rem; line-height: 1.35; text-decoration: none; transition: border-color .16s, color .16s, transform .16s; }
  .toc-link:hover { color: var(--ink-strong); transform: translateX(2px); }
  .toc-link.is-active { border-left: 2px solid var(--brand); color: var(--brand); font-weight: 740; }
  .toc-link--3 { padding-left: 1.35rem; color: var(--faint); font-size: .69rem; }
  .toc-source { display: inline-flex; align-items: center; gap: .42rem; margin-top: 1.2rem; color: var(--faint); font-size: .7rem; font-weight: 650; text-decoration: none; }
  .toc-source:hover { color: var(--brand); }
  .toc-source .icon { width: .85rem; height: .85rem; }

  .page-pagination { display: grid; margin-top: 4.5rem; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .page-pagination__link { display: grid; min-height: 6.4rem; align-content: center; padding: 1.2rem 1.35rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); text-decoration: none; transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; }
  .page-pagination__link:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand) 38%, var(--line)); box-shadow: 0 14px 35px rgb(38 31 92 / 10%); }
  .page-pagination__link span { color: var(--faint); font-size: .66rem; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
  .page-pagination__link strong { margin-top: .25rem; color: var(--ink-strong); font-size: .9rem; }
  .page-pagination__link--next { text-align: right; }
  .content-footer { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--faint); font-size: .68rem; }
  .content-footer a { color: var(--muted); }

  .search-dialog { position: fixed; inset: 0; z-index: 200; padding: min(13vh, 7rem) 1rem 1rem; }
  .search-backdrop { position: absolute; inset: 0; background: rgb(10 10 17 / 55%); backdrop-filter: blur(8px); }
  .search-panel { position: relative; width: min(100%, 42rem); max-height: min(42rem, 75vh); margin: 0 auto; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 1rem; background: var(--surface); box-shadow: var(--shadow-lg); }
  .search-input-wrap { display: flex; min-height: 4rem; align-items: center; gap: .8rem; padding: 0 1rem; border-bottom: 1px solid var(--line); }
  .search-input-wrap > .icon { width: 1.3rem; height: 1.3rem; color: var(--brand); }
  .search-input-wrap input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink-strong); font-size: 1rem; }
  .search-input-wrap input::placeholder { color: var(--faint); }
  .search-close { padding: 0; border: 0; background: none; cursor: pointer; }
  .search-results { max-height: calc(min(42rem, 75vh) - 4rem); overflow-y: auto; padding: .6rem; }
  .search-result { display: grid; gap: .18rem; padding: .85rem 1rem; border-radius: .68rem; text-decoration: none; }
  .search-result:hover, .search-result.is-selected { background: var(--brand-soft); }
  .search-result__meta { display: flex; align-items: center; gap: .45rem; color: var(--brand); font-size: .63rem; font-weight: 780; letter-spacing: .06em; text-transform: uppercase; }
  .search-result strong { color: var(--ink-strong); font-size: .9rem; }
  .search-result p { overflow: hidden; color: var(--muted); font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
  .search-empty { display: grid; min-height: 15rem; place-content: center; padding: 2rem; color: var(--muted); text-align: center; }
  .search-empty__mark { color: var(--line-strong); font-size: 3rem; font-weight: 300; }
  .search-empty p { margin-top: .6rem; color: var(--ink); font-size: .88rem; font-weight: 680; }
  .search-empty small { margin-top: .2rem; color: var(--faint); font-size: .7rem; }
  .search-count { padding: .45rem 1rem .25rem; color: var(--faint); font-size: .65rem; font-weight: 720; text-transform: uppercase; }

  .noscript { position: fixed; inset: auto 1rem 1rem; z-index: 500; padding: .8rem 1rem; border: 1px solid #e5bc6a; border-radius: .7rem; background: #fff7e4; color: #6b4b0a; font-size: .75rem; text-align: center; }

  @media (max-width: 60rem) {
    .sidebar-close { display: inline-grid; }
    .page-hero { min-height: 18rem; border-radius: 1.3rem; }
  }
  @media (max-width: 38rem) {
    .page-hero { padding: 1.5rem 1.25rem; border-radius: 1rem; }
    .page-hero h1 { margin-top: 1.5rem; font-size: clamp(2.2rem, 12vw, 3.2rem); }
    .page-hero__footer { align-items: flex-start; flex-direction: column; }
    .hero-orbit { opacity: .58; }
    .page-pagination { grid-template-columns: 1fr; }
    .page-pagination__spacer { display: none; }
    .content-footer { align-items: flex-start; flex-direction: column; }
    .search-dialog { padding-top: 1rem; }
    .search-panel { max-height: calc(100vh - 2rem); }
  }
}

@layer content {
  .prose { margin-top: clamp(3rem, 6vw, 5.5rem); color: var(--ink); }
  .prose > :first-child { margin-top: 0; }
  .prose h2, .prose h3 { position: relative; scroll-margin-top: 2rem; color: var(--ink-strong); text-wrap: balance; }
  .prose h2 { margin: 4.8rem 0 1.25rem; padding-top: .2rem; font-size: clamp(1.7rem, 3vw, 2.25rem); font-weight: 820; line-height: 1.15; letter-spacing: -.035em; }
  .prose h2::before { display: block; width: 2.4rem; height: 3px; margin-bottom: .9rem; border-radius: 1rem; background: linear-gradient(90deg, var(--brand), var(--accent)); content: ""; }
  .prose h3 { margin: 2.9rem 0 .8rem; font-size: 1.2rem; font-weight: 790; line-height: 1.3; letter-spacing: -.018em; }
  .heading-anchor { display: inline-block; margin-left: .42rem; color: var(--line-strong); font-size: .7em; font-weight: 500; opacity: 0; text-decoration: none; transform: translateY(-.05em); transition: opacity .15s, color .15s; }
  .prose h2:hover .heading-anchor, .prose h3:hover .heading-anchor, .heading-anchor:focus { color: var(--brand); opacity: 1; }

  .prose p { margin: 1rem 0; color: var(--muted); font-size: .98rem; line-height: 1.78; text-wrap: pretty; }
  .prose > p:first-child { padding: 1.25rem 1.35rem; border-left: 3px solid var(--brand); border-radius: 0 var(--radius) var(--radius) 0; background: linear-gradient(90deg, var(--brand-soft), transparent); color: var(--ink); font-size: 1.04rem; }
  .prose strong { color: var(--ink-strong); font-weight: 760; }
  .prose a { color: var(--brand-strong); font-weight: 620; text-decoration-color: color-mix(in srgb, var(--brand) 35%, transparent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
  .prose a:hover { color: var(--brand); text-decoration-color: currentColor; }

  .prose ul, .prose ol { display: grid; gap: .52rem; margin: 1.15rem 0 1.45rem; padding-left: 1.35rem; color: var(--muted); }
  .prose li { padding-left: .32rem; line-height: 1.68; }
  .prose li::marker { color: var(--brand); font-weight: 800; }
  .prose li > ul, .prose li > ol { margin-block: .5rem; }

  .prose blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); color: var(--muted); }
  .prose hr { height: 1px; margin: 3rem 0; border: 0; background: var(--line); }

  .prose :not(pre) > code {
    padding: .15rem .34rem;
    border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--line));
    border-radius: .3rem;
    background: color-mix(in srgb, var(--brand-soft) 65%, var(--surface));
    color: color-mix(in srgb, var(--brand-strong) 75%, var(--ink));
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: .83em;
    font-weight: 620;
  }

  .code-block { position: relative; margin: 1.5rem 0; overflow: hidden; border: 1px solid color-mix(in srgb, white 7%, transparent); border-radius: var(--radius); background: var(--code); box-shadow: 0 15px 38px rgb(12 12 22 / 14%); }
  .code-block__bar { display: flex; height: 2.4rem; align-items: center; justify-content: space-between; padding: 0 .7rem 0 1rem; border-bottom: 1px solid rgb(255 255 255 / 7%); color: #8e8d9b; font-family: "SFMono-Regular", Consolas, monospace; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; }
  .copy-code { display: inline-flex; min-height: 1.7rem; align-items: center; gap: .35rem; padding: 0 .42rem; border: 0; border-radius: .35rem; background: transparent; color: #aaa9b8; cursor: pointer; font-family: inherit; font-size: .62rem; text-transform: none; }
  .copy-code:hover { background: rgb(255 255 255 / 8%); color: white; }
  .copy-code .icon { width: .78rem; height: .78rem; }
  .code-block pre { margin: 0; overflow-x: auto; padding: 1.25rem; }
  .code-block code { color: var(--code-ink); font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: .78rem; line-height: 1.75; }

  .prose > table { display: block; width: 100%; margin: 1.6rem 0 2rem; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); border-spacing: 0; background: var(--surface); box-shadow: var(--shadow-sm); }
  .prose table thead { background: var(--surface-soft); }
  .prose table th, .prose table td { min-width: 8rem; padding: .78rem .9rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .75rem; line-height: 1.55; text-align: left; vertical-align: top; }
  .prose table th { color: var(--ink-strong); font-size: .66rem; font-weight: 780; letter-spacing: .035em; text-transform: uppercase; }
  .prose table td { color: var(--muted); }
  .prose table tr:last-child td { border-bottom: 0; }
  .prose table th:last-child, .prose table td:last-child { border-right: 0; }
  .prose table code { white-space: nowrap; }

  .diagram { margin: 1.8rem 0 2.2rem; overflow: hidden; border: 1px solid var(--line); border-radius: 1.1rem; background: var(--surface); box-shadow: var(--shadow-sm); }
  .diagram figcaption { display: grid; gap: .2rem; padding: 1.25rem 1.4rem; border-bottom: 1px solid var(--line); background: linear-gradient(115deg, var(--surface-soft), var(--surface)); }
  .diagram figcaption strong { font-size: .92rem; }
  .diagram__eyebrow { color: var(--brand); font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
  .diagram-source { border-top: 1px solid var(--line); }
  .diagram-source summary { padding: .75rem 1rem; color: var(--faint); cursor: pointer; font-size: .68rem; font-weight: 680; }
  .diagram-source summary:hover { color: var(--brand); }
  .diagram-source pre { max-height: 20rem; margin: 0; overflow: auto; padding: 1rem; border-top: 1px solid var(--line); background: var(--code); }
  .diagram-source code { color: var(--code-ink); font-family: "SFMono-Regular", Consolas, monospace; font-size: .68rem; line-height: 1.6; }

  .architecture-flow { display: grid; justify-items: center; padding: 1.6rem; }
  .diagram-node { display: grid; min-width: 8rem; min-height: 3.5rem; place-content: center; padding: .65rem .8rem; border: 1px solid var(--line-strong); border-radius: .65rem; background: var(--surface-raised); color: var(--ink); box-shadow: 0 5px 14px rgb(24 22 48 / 5%); text-align: center; }
  .diagram-node small { color: var(--faint); font-size: .55rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
  .diagram-node span { font-size: .74rem; font-weight: 720; }
  .diagram-node--person { min-height: 2.5rem; border-radius: 2rem; }
  .diagram-node--primary { border-color: color-mix(in srgb, var(--brand) 50%, var(--line)); background: var(--brand-soft); color: var(--brand-strong); }
  .diagram-arrow { display: grid; min-width: 1.4rem; place-content: center; color: var(--brand); font-size: 1.05rem; }
  .diagram-branches { position: relative; display: grid; width: min(100%, 34rem); margin-top: 1rem; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
  .diagram-branches::before { position: absolute; top: -.6rem; left: 16.67%; right: 16.67%; height: 1px; background: var(--line-strong); content: ""; }
  .diagram-branch { display: grid; justify-items: center; }
  .diagram-line { width: 1px; height: .6rem; background: var(--line-strong); }
  .diagram-pipeline { display: flex; width: 100%; align-items: stretch; justify-content: center; margin-top: 1.35rem; padding-top: 1.35rem; border-top: 1px dashed var(--line-strong); }
  .diagram-pipeline .diagram-node { min-width: 0; flex: 1; }
  .diagram-note { width: 100%; margin: 1rem 0 0 !important; color: var(--faint) !important; font-size: .68rem !important; text-align: center; }

  .timeline-steps { position: relative; display: grid; gap: 0; padding: 1.3rem 1.5rem 1.5rem; list-style: none; }
  .timeline-steps::before { position: absolute; top: 2.2rem; bottom: 2.2rem; left: 2.45rem; width: 1px; background: linear-gradient(var(--brand), var(--line)); content: ""; }
  .timeline-steps li { position: relative; z-index: 1; display: grid; grid-template-columns: 2.4rem 1fr; gap: .9rem; padding: .65rem 0; }
  .timeline-number { display: grid; width: 1.9rem; height: 1.9rem; place-items: center; border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line)); border-radius: 50%; background: var(--surface); color: var(--brand); font-family: "SFMono-Regular", Consolas, monospace; font-size: .56rem; font-weight: 780; }
  .timeline-steps strong { display: block; color: var(--ink-strong); font-size: .78rem; }
  .timeline-steps p { margin: .1rem 0 0; color: var(--muted); font-size: .72rem; line-height: 1.5; }

  .state-flow { display: grid; align-items: center; padding: 1.6rem; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .6rem; }
  .state-node { display: grid; min-height: 7rem; place-content: center; padding: 1rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--surface-soft); text-align: center; }
  .state-node small { color: var(--faint); font-size: .58rem; font-weight: 780; letter-spacing: .08em; text-transform: uppercase; }
  .state-node strong { margin-top: .2rem; color: var(--ink-strong); font-size: .9rem; }
  .state-node span { margin-top: .25rem; color: var(--muted); font-size: .65rem; }
  .state-node--active { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); background: var(--brand-soft); }
  .state-node--active strong { color: var(--brand-strong); }
  .state-actions { display: grid; min-width: 3.8rem; gap: .2rem; color: var(--brand); font-size: .57rem; font-weight: 720; text-align: center; }
  .state-exit { margin: 0 1.6rem 1.4rem !important; padding: .7rem .8rem; border-radius: .55rem; background: color-mix(in srgb, #d96060 7%, var(--surface)); color: var(--muted) !important; font-size: .66rem !important; text-align: center; }
  .state-exit span { margin-right: .3rem; color: #cc5555; font-weight: 900; }

  @media (max-width: 38rem) {
    .prose { margin-top: 3.5rem; padding-inline: .35rem; }
    .prose h2 { margin-top: 3.8rem; }
    .prose > table { width: calc(100% + .7rem); margin-left: -.35rem; border-radius: .7rem; }
    .diagram { width: calc(100% + .7rem); margin-left: -.35rem; }
    .diagram-branches { grid-template-columns: 1fr; }
    .diagram-branches::before, .diagram-line { display: none; }
    .diagram-pipeline { align-items: center; flex-direction: column; }
    .diagram-pipeline .diagram-node { width: 100%; }
    .diagram-pipeline .diagram-arrow { transform: rotate(90deg); }
    .state-flow { grid-template-columns: 1fr; }
    .state-actions { padding: .2rem 0; }
    .state-actions span:first-child { transform: rotate(90deg); }
    .state-actions span:last-child { display: none; }
  }
}

@layer utilities {
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}

@media print {
  :root { color-scheme: light; --canvas: white; --surface: white; --ink: #222; --ink-strong: #000; --muted: #444; --line: #ddd; }
  body { background: white; font-size: 10pt; }
  .site-sidebar, .desktop-toolbar, .mobile-header, .page-toc, .reading-progress, .page-pagination, .content-footer, .search-dialog, .copy-code, .page-hero__footer a, .heading-anchor { display: none !important; }
  .site-main { margin: 0; }
  .page-shell { display: block; width: 100%; padding: 0; }
  .page-hero { min-height: 0; padding: 1.5rem 0; border: 0; border-bottom: 2px solid #555; border-radius: 0; box-shadow: none; }
  .hero-orbit { display: none; }
  .prose { margin-top: 2rem; }
  .prose h2, .prose h3 { break-after: avoid; }
  .prose table, .diagram, .code-block { break-inside: avoid; box-shadow: none; }
  .diagram-source { display: none; }
  a { text-decoration: none !important; }
}