:root {
  --paper: #fbfaf7;
  --paper-2: #f4f2ec;
  --white: #fff;
  --ink: #0b1220;
  --ink-2: #1e293b;
  --text: #334155;
  --muted: #64748b;
  --faint: #94a3b8;
  --blue: #1d4ed8;
  --blue-dark: #1e3a8a;
  --blue-soft: #dbeafe;
  --warm: #b45309;
  --warm-soft: #fef3c7;
  --green: #166534;
  --green-soft: #dcfce7;
  --red: #9f2f24;
  --red-soft: #fee2e2;
  --line: rgba(30, 41, 59, .12);
  --sans: Inter, "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --serif: "Source Serif 4", "Noto Serif SC", "Songti SC", SimSun, Georgia, serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { max-width: 100%; scroll-behavior: smooth; scroll-padding-top: 78px; overflow-x: hidden; }
body { max-width: 100%; margin: 0; color: var(--ink-2); background: var(--paper); font-family: var(--serif); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img, video { display: block; max-width: 100%; }
.skip-link { position: fixed; top: -60px; left: 16px; z-index: 100; padding: 9px 13px; color: white; background: var(--blue); font-family: var(--sans); }
.skip-link:focus { top: 10px; }

.topbar { position: sticky; top: 0; z-index: 30; min-height: 58px; display: flex; align-items: center; background: rgba(251,250,247,.86); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.topbar-inner { width: min(1180px, calc(100% - 40px)); margin: auto; display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); font-family: var(--sans); }
.brand > span { width: 29px; height: 29px; display: grid; place-items: center; color: var(--paper); background: var(--ink); border-radius: 6px; font-size: 9px; font-weight: 700; }
.brand strong { font-size: 14px; letter-spacing: -.025em; }
.topbar-inner > p { margin: 0; color: var(--faint); font: 12px var(--sans); }
.topbar nav { margin-left: auto; display: flex; gap: 21px; color: var(--muted); font: 12px var(--sans); }
.topbar nav a:hover { color: var(--blue); }
.github-button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; color: var(--text); background: rgba(255,255,255,.72); border: 1px solid var(--line); border-radius: 6px; font: 600 12px var(--sans); transition: background .2s, border-color .2s; }
.github-button:hover { background: white; border-color: rgba(30,41,59,.28); }
.github-button svg { width: 15px; height: 15px; fill: currentColor; }

.page { width: min(1180px, calc(100% - 40px)); margin: auto; display: grid; grid-template-columns: minmax(0, 800px) 220px; justify-content: space-between; gap: 60px; }
.article, .hero { min-width: 0; }
.article { padding: 52px 0 70px; }
.hero { margin-bottom: 58px; }
.overline { margin: 0 0 17px; color: var(--blue-dark); font: 10px var(--sans); letter-spacing: .17em; }
.hero h1 { margin: 0; color: var(--ink); font: 700 clamp(34px, 4vw, 48px)/1.14 var(--serif); letter-spacing: -.035em; }
.hero h2 { margin: 15px 0 0; color: #475569; font: 500 clamp(20px, 2.5vw, 27px)/1.38 var(--serif); }
.status-note { margin-top: 25px; padding: 12px 15px; display: flex; align-items: flex-start; gap: 10px; color: var(--text); background: rgba(254,243,199,.58); border: 1px solid rgba(180,83,9,.25); border-radius: 7px; font: 12px/1.75 var(--sans); }
.status-note strong { flex: 0 0 auto; color: var(--warm); }
.identity { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); font: 13px var(--sans); }
.identity strong { color: var(--ink); }
.identity span:first-of-type { color: #cbd5e1; }
.hero-actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; font: 12px var(--sans); }
.hero-actions a { padding: 8px 13px; color: var(--text); background: white; border: 1px solid var(--line); border-radius: 6px; transition: border-color .2s; }
.hero-actions a:hover { border-color: rgba(30,41,59,.32); }
.hero-actions .primary { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.highlight-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; font-family: var(--sans); }
.highlight-grid > div { min-width: 0; padding: 12px 14px; background: white; border: 1px solid var(--line); border-radius: 8px; }
.highlight-grid small { display: block; margin-bottom: 6px; color: var(--faint); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.highlight-grid strong { color: var(--ink); font-size: 12px; overflow-wrap: anywhere; }

.prose-section { margin-top: 60px; scroll-margin-top: 75px; }
.section-title { margin: 0 0 21px; padding-bottom: 10px; color: var(--ink); border-bottom: 1px solid var(--line); font: 700 25px/1.25 var(--serif); }
.section-title i { width: 24px; height: 24px; margin-right: 8px; display: inline-grid; place-items: center; color: white; background: var(--blue-dark); border-radius: 50%; font: normal 12px var(--sans); vertical-align: 3px; }
.section-title span { margin-left: 8px; color: var(--faint); font: 400 14px var(--sans); }
.prose-section > p { margin: 15px 0; color: var(--text); font-size: 16px; line-height: 1.95; }
.prose-section strong { color: var(--ink); }
.callout { margin: 25px 0; padding: 16px 18px; display: grid; grid-template-columns: 105px 1fr; gap: 14px; border-radius: 7px; font-family: var(--sans); }
.callout strong { font-size: 12px; }
.callout p { margin: 0; color: var(--text); font-size: 12px; line-height: 1.75; }
.callout.important { background: #eff6ff; border: 1px solid rgba(29,78,216,.18); }.callout.important strong { color: var(--blue-dark); }
.callout.warning { background: rgba(254,243,199,.58); border: 1px solid rgba(180,83,9,.25); }.callout.warning strong { color: var(--warm); }

.pipeline-figure { margin: 30px 0 38px; padding: 22px; background: white; border: 1px solid var(--line); border-radius: 14px; font-family: var(--sans); box-shadow: 0 8px 28px rgba(30,41,59,.035); }
.figure-head { margin-bottom: 18px; display: flex; justify-content: space-between; color: var(--faint); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.pipeline-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; align-items: stretch; }
.pipeline-row article { padding: 16px; background: linear-gradient(145deg,#f8fafc,#eff6ff); border: 1px solid rgba(30,64,175,.11); border-radius: 9px; }
.pipeline-row.second article { background: linear-gradient(145deg,#fffbeb,#fef3c7); border-color: rgba(180,83,9,.12); }
.pipeline-row small { display: block; color: var(--blue-dark); font-size: 8px; font-weight: 600; letter-spacing: .09em; }
.pipeline-row.second small { color: var(--warm); }
.pipeline-row strong { display: block; margin: 7px 0; color: var(--ink); font-size: 13px; }
.pipeline-row p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.pipeline-row > b { align-self: center; color: var(--faint); font-size: 16px; font-weight: 400; }
.pipeline-down { padding: 5px; color: var(--faint); font-family: var(--sans); text-align: right; transform: translateX(-15%); }

.subsection-title { margin: 42px 0 13px; scroll-margin-top: 75px; color: var(--ink); font: 600 20px/1.35 var(--serif); }
.subsection-title span { margin-left: 7px; color: var(--faint); font: 400 11px var(--sans); }
.fact-grid { margin: 22px 0 35px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; font-family: var(--sans); }
.fact-grid > div { padding: 14px; background: white; border: 1px solid var(--line); border-radius: 8px; }
.fact-grid small { display: block; margin-bottom: 7px; color: var(--blue); font-size: 8px; letter-spacing: .09em; }
.fact-grid strong { font-size: 11px; line-height: 1.5; }
.output-list { margin: 24px 0 35px; border-top: 1px solid var(--line); font-family: var(--sans); }
.output-list > div { padding: 13px 4px; display: grid; grid-template-columns: 155px 1fr; gap: 15px; border-bottom: 1px solid var(--line); }
.output-list span { color: var(--blue-dark); font-size: 10px; font-weight: 600; }
.output-list p { margin: 0; color: var(--muted); font-size: 11px; }

.media-figure { margin: 30px 0 42px; }
.media-figure button { width: 100%; padding: 0; position: relative; overflow: hidden; background: #0b1220; border: 1px solid var(--line); border-radius: 10px; cursor: zoom-in; }
.media-figure button img { width: 100%; transition: transform .5s ease, opacity .3s ease; }
.media-figure button:hover img { transform: scale(1.012); opacity: .9; }
.media-figure button span { position: absolute; right: 10px; bottom: 10px; padding: 6px 8px; color: var(--ink); background: rgba(255,255,255,.9); border-radius: 5px; font: 9px var(--sans); }
.media-figure figcaption, .video-grid figcaption { margin-top: 10px; color: var(--muted); font: 11px/1.65 var(--sans); text-align: center; }
.video-grid { margin: 25px 0 42px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.video-grid figure { margin: 0; }.video-grid video { width: 100%; background: #0b1220; border-radius: 9px; }

.status-table { margin: 27px 0; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 10px; font-family: var(--sans); }
.status-table > div { min-height: 62px; padding: 12px 15px; display: grid; grid-template-columns: 150px 1fr 66px; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); }
.status-table > div:last-child { border-bottom: 0; }
.status-table .table-head { min-height: auto; padding-top: 9px; padding-bottom: 9px; color: var(--faint); background: #f8fafc; font-size: 9px; letter-spacing: .08em; }
.status-table strong { font-size: 12px; }
.status-table p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.status-table b { padding: 5px 6px; color: var(--green); background: var(--green-soft); border-radius: 5px; font-size: 9px; text-align: center; }
.status-table .absent b { color: var(--red); background: var(--red-soft); }
.limitations-list { margin: 22px 0; padding: 0 0 0 25px; color: var(--text); }
.limitations-list li { padding: 6px 0 6px 4px; font-size: 15px; line-height: 1.8; }
.limitations-list li::marker { color: var(--blue); }
.repo-card { margin-top: 26px; padding: 22px; display: flex; align-items: center; justify-content: space-between; gap: 25px; background: var(--ink); border-radius: 10px; font-family: var(--sans); }
.repo-card small { color: #93c5fd; font: 9px var(--mono); }.repo-card strong { margin: 8px 0 5px; display: block; color: white; font-size: 18px; }.repo-card p { margin: 0; color: #94a3b8; font-size: 10px; }
.repo-card a { flex: 0 0 auto; padding: 9px 12px; color: var(--ink); background: white; border-radius: 6px; font-size: 11px; font-weight: 600; }
.article-footer { margin-top: 68px; padding-top: 24px; display: flex; justify-content: space-between; color: var(--faint); border-top: 1px solid var(--line); font: 10px var(--sans); }
.article-footer a:hover { color: var(--blue); }

.toc { position: relative; }
.toc nav { position: sticky; top: 88px; padding-top: 3px; font-family: var(--sans); }
.toc p { margin: 0 0 12px; color: var(--faint); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.toc a { display: block; padding: 5px 0; color: var(--muted); font-size: 11px; line-height: 1.45; transition: color .2s; }
.toc > nav > a { font-weight: 500; }
.toc a:hover, .toc a.active { color: var(--blue); }
.toc a.active { font-weight: 600; }
.toc div { margin: 2px 0 4px 4px; padding-left: 12px; border-left: 1px solid var(--line); }
.toc div a { color: var(--faint); font-size: 10px; }

.lightbox { width: min(96vw, 1500px); max-width: none; max-height: 94vh; padding: 46px 12px 12px; color: white; background: #070d17; border: 1px solid rgba(255,255,255,.18); }
.lightbox::backdrop { background: rgba(3,7,14,.92); backdrop-filter: blur(7px); }
.lightbox img { max-height: calc(94vh - 60px); margin: auto; }
.lightbox button { position: absolute; top: 12px; right: 14px; padding: 0; color: #cbd5e1; background: none; border: 0; cursor: pointer; font: 10px var(--sans); }

@media (max-width: 980px) {
  .topbar-inner > p, .topbar nav { display: none; }
  .github-button { margin-left: auto; }
  .page { grid-template-columns: minmax(0, 800px); justify-content: center; }
  .toc { display: none; }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 65px; }
  .topbar-inner, .page { width: min(100% - 28px, 800px); }
  .topbar { min-height: 54px; }.brand strong { font-size: 13px; }.github-button { padding: 6px 9px; font-size: 11px; }
  .article { padding-top: 38px; }.hero { margin-bottom: 48px; }.hero h1 { font-size: 32px; overflow-wrap: anywhere; text-wrap: balance; }.hero h2 { font-size: 20px; overflow-wrap: anywhere; }
  .status-note { display: block; }.status-note strong { display: block; margin-bottom: 4px; }
  .highlight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-title { font-size: 23px; }.section-title span { display: block; margin: 5px 0 0 33px; }.section-title:not(:has(i)) span { margin-left: 0; }
  .prose-section > p { font-size: 15px; line-height: 1.85; }
  .callout { grid-template-columns: 1fr; gap: 5px; }
  .pipeline-figure { padding: 15px; }.pipeline-row { grid-template-columns: 1fr; }.pipeline-row > b { justify-self: center; transform: rotate(90deg); }.pipeline-row.second { display: flex; flex-direction: column-reverse; }.pipeline-row.second > b { transform: rotate(90deg); }.pipeline-down { text-align: center; transform: none; }
  .fact-grid { grid-template-columns: 1fr; }.output-list > div { grid-template-columns: 1fr; gap: 5px; }
  .video-grid { grid-template-columns: 1fr; }
  .status-table > div { grid-template-columns: 1fr auto; gap: 7px 12px; }.status-table .table-head { display: none; }.status-table p { grid-column: 1; }.status-table b { grid-column: 2; grid-row: 1; }
  .repo-card { align-items: stretch; flex-direction: column; }.repo-card a { text-align: center; }
  .article-footer { flex-direction: column; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}