:root {
        color-scheme: light;
        --bg: #f8fafc;
        --paper: #ffffff;
        --ink: #1e293b;
        --muted: #64748b;
        --line: #d9e2ec;
        --soft: #f1f5f9;
        --soft-blue: #eff6ff;
        --accent: #2563eb;
        --accent-dark: #1d4ed8;
        --decision: #b45309;
        --danger: #be123c;
        --success: #0f766e;
        --code: #111827;
      }
      * {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--ink);
        font-family:
          "IBM Plex Sans",
          ui-sans-serif,
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          sans-serif;
        line-height: 1.72;
        text-rendering: optimizeLegibility;
      }
      .layout {
        display: grid;
        grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
        gap: 28px;
        max-width: 1380px;
        margin: 0 auto;
        padding: 24px;
      }
      .toc {
        position: sticky;
        top: 20px;
        z-index: 20;
        align-self: start;
        display: flex;
        flex-direction: column;
        gap: 4px;
        max-height: calc(100vh - 40px);
        overflow: auto;
        padding: 18px;
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid var(--line);
        border-radius: 8px;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
      }
      .toc strong {
        margin-bottom: 10px;
        color: #0f172a;
        font-size: 13px;
        letter-spacing: 0;
      }
      .toc a {
        display: block;
        padding: 6px 8px;
        color: var(--muted);
        text-decoration: none;
        font-size: 13px;
        line-height: 1.35;
        border-radius: 6px;
        transition:
          color 180ms ease,
          background-color 180ms ease;
      }
      .toc a:hover {
        color: var(--accent-dark);
        background: var(--soft-blue);
      }
      .toc a:focus-visible,
      a:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
      .toc-main {
        font-weight: 700;
        color: #334155 !important;
      }
      .toc-sub {
        padding-left: 16px !important;
      }
      main {
        min-width: 0;
        padding: 56px clamp(24px, 5vw, 76px);
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 8px;
        box-shadow: 0 18px 44px rgba(15, 23, 42, 0.055);
      }
      h1,
      h2,
      h3 {
        line-height: 1.22;
        letter-spacing: 0;
        color: #0f172a;
      }
      h1 {
        max-width: 920px;
        margin: 0 0 22px;
        font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
        font-size: clamp(34px, 5vw, 58px);
        font-weight: 700;
      }
      h2 {
        margin: 48px 0 16px;
        padding-top: 22px;
        font-size: 30px;
        font-weight: 700;
        border-top: 1px solid var(--line);
      }
      h3 {
        margin: 34px 0 10px;
        font-size: 20px;
        font-weight: 700;
      }
      p {
        max-width: 960px;
        margin: 12px 0;
      }
      blockquote {
        margin: 20px 0 30px;
        padding: 14px 18px;
        border-left: 4px solid var(--accent);
        background: var(--soft-blue);
        color: #1e3a8a;
        border-radius: 0 8px 8px 0;
      }
      ul {
        margin: 10px 0 20px;
        padding-left: 24px;
      }
      li {
        margin: 5px 0;
      }
      a {
        color: var(--accent-dark);
        text-underline-offset: 3px;
      }
      code {
        padding: 2px 5px;
        border-radius: 5px;
        background: #eef2f7;
        color: #334155;
        font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
        font-size: 0.9em;
      }
      pre {
        overflow: auto;
        margin: 18px 0 26px;
        padding: 18px;
        background: var(--code);
        color: #e5e7eb;
        border-radius: 8px;
      }
      pre code {
        padding: 0;
        background: transparent;
        color: inherit;
      }
      .table-wrap {
        overflow: auto;
        margin: 18px 0 28px;
        border: 1px solid var(--line);
        border-radius: 8px;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        min-width: 560px;
      }
      th,
      td {
        padding: 12px 14px;
        border-bottom: 1px solid var(--line);
        text-align: left;
        vertical-align: top;
      }
      th {
        background: var(--soft);
        color: #475569;
        font-size: 13px;
        font-weight: 700;
      }
      tr:last-child td {
        border-bottom: 0;
      }
      .flow {
        margin: 26px 0 36px;
        padding: 22px;
        background: #fbfdff;
        border: 1px solid var(--line);
        border-radius: 8px;
        overflow-x: auto;
      }
      .flow-row {
        display: grid;
        grid-template-columns: repeat(9, max-content);
        align-items: center;
        gap: 10px;
        min-width: max-content;
      }
      .flow-row.lower {
        margin-top: 18px;
        grid-template-columns: repeat(9, max-content);
      }
      .node {
        min-width: 132px;
        min-height: 62px;
        display: grid;
        place-items: center;
        padding: 12px 14px;
        text-align: center;
        background: #ffffff;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        font-weight: 700;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
      }
      .node span {
        display: block;
        margin-top: 3px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 500;
      }
      .node.start {
        border-color: var(--danger);
        color: var(--danger);
      }
      .node.decision {
        min-width: 124px;
        aspect-ratio: 1 / 1;
        border-color: #d97706;
        background: #fffbeb;
        border-radius: 8px;
        transform: rotate(45deg) scale(0.82);
      }
      .node.decision > * {
        transform: rotate(-45deg);
      }
      .node.decision {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .node.decision .decision-label {
        display: block;
        margin: 0;
        color: #78350f;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.35;
      }
      .arrow {
        width: 42px;
        height: 2px;
        background: #64748b;
        position: relative;
      }
      .arrow::after {
        content: "";
        position: absolute;
        right: -1px;
        top: -5px;
        border-left: 8px solid #64748b;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
      }
      .arrow.yes::before {
        content: "YES";
        position: absolute;
        left: 10px;
        top: -23px;
        color: var(--success);
        font-size: 11px;
        font-weight: 800;
      }
      .branch-row {
        display: grid;
        grid-template-columns: 220px minmax(220px, 1fr) minmax(220px, 1fr);
        gap: 14px;
        margin: 16px 0 8px;
        min-width: 760px;
      }
      .branch-row.compact {
        grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
        min-width: 620px;
      }
      .branch-card {
        display: grid;
        gap: 4px;
        padding: 14px;
        background: #ffffff;
        border: 1px dashed #cbd5e1;
        border-radius: 8px;
      }
      .branch-card span:last-child {
        color: var(--muted);
        font-size: 13px;
      }
      .badge {
        width: fit-content;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 800;
        background: #e2e8f0;
        color: #334155;
      }
      .badge.yes {
        background: #ccfbf1;
        color: #0f766e;
      }
      .badge.no {
        background: #ffe4e6;
        color: #be123c;
      }
      .badge.loop {
        background: #dbeafe;
        color: #ffffff;
      }
      .pipeline {
        display: grid;
        grid-template-columns: repeat(6, minmax(150px, 1fr));
        gap: 12px;
      }
      .pipeline--3 {
        grid-template-columns: repeat(3, minmax(200px, 1fr));
      }
      .pipeline-step {
        position: relative;
        display: grid;
        gap: 8px;
        min-height: 142px;
        padding: 16px;
        background: #ffffff;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
      }
      .pipeline-step::after {
        content: "";
        position: absolute;
        right: -10px;
        top: 50%;
        transform: translateY(-50%);
        border-left: 10px solid #94a3b8;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        z-index: 1;
      }
      .pipeline-step:last-child::after {
        display: none;
      }
      .step-index {
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border-radius: 999px;
        background: var(--accent);
        color: #fff;
        font-weight: 800;
        font-size: 13px;
      }
      .pipeline-step strong {
        font-size: 15px;
        color: #0f172a;
      }
      .pipeline-step span:last-child {
        color: var(--muted);
        font-size: 13px;
      }
      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }
        *,
        *::before,
        *::after {
          transition: none !important;
        }
      }
      @media (max-width: 980px) {
        .layout {
          display: block;
          padding: 14px;
        }
        .toc {
          position: relative;
          top: 0;
          max-height: 260px;
          margin-bottom: 16px;
        }
        main {
          padding: 30px 18px;
        }
        h1 {
          font-size: clamp(32px, 10vw, 44px);
        }
        .pipeline {
          grid-template-columns: 1fr;
        }
        .pipeline-step::after {
          display: none;
        }
      }

      /* Unified block sizing */
      .layout {
        grid-template-columns: 300px minmax(0, 1fr);
        max-width: 1360px;
      }
      .toc {
        width: 300px;
        min-height: 360px;
      }
      main {
        width: 100%;
        min-height: calc(100vh - 48px);
      }
      h1 {
        min-height: 72px;
        display: flex;
        align-items: flex-end;
      }
      h2 {
        min-height: 64px;
        display: flex;
        align-items: flex-end;
      }
      .table-wrap,
      pre,
      .flow {
        width: 100%;
      }
      .flow {
        min-height: 220px;
      }
      .flow-overview {
        min-height: 420px;
      }
      .node {
        width: 148px;
        min-width: 148px;
        min-height: 72px;
      }
      .node.decision {
        width: 132px;
        min-width: 132px;
        height: 132px;
        min-height: 132px;
      }
      .branch-card {
        min-height: 96px;
      }
      .pipeline {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
      }
      .pipeline-step {
        min-height: 156px;
        grid-template-rows: 28px auto 1fr;
      }
      .pipeline-step::after {
        display: none;
      }
      @media (min-width: 1280px) {
        .pipeline {
          grid-template-columns: repeat(6, minmax(0, 1fr));
        }
        .pipeline-step {
          min-height: 168px;
        }
        .pipeline-step::after {
          display: block;
        }
      }
      @media (max-width: 980px) {
        .toc {
          width: 100%;
          min-height: 0;
        }
        main {
          min-height: auto;
        }
        h1,
        h2 {
          min-height: 0;
          display: block;
        }
        .flow {
          min-height: 0;
        }
        .pipeline-step {
          min-height: 132px;
        }
      }

      /* Compact discussion layout */
      .summary-grid,
      .decision-grid,
      .link-grid,
      .compact-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: 12px;
        margin: 18px 0 36px;
      }
      .compact-card,
      .compact-list li,
      .link-card {
        position: relative;
        min-height: 124px;
        padding: 18px 18px 16px;
        background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        border: 1px solid #dbe4ee;
        border-radius: 8px;
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.045);
      }
      .compact-card::before,
      .compact-list li::before,
      .link-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 14px;
        right: 14px;
        height: 3px;
        background: #2563eb;
        border-radius: 0 0 3px 3px;
      }
      .compact-card strong,
      .link-card strong {
        display: block;
        margin-bottom: 9px;
        color: #0f172a;
        font-size: 15px;
        line-height: 1.35;
      }
      .compact-card p,
      .compact-card li,
      .compact-list li,
      .link-card span {
        color: #475569;
        font-size: 14px;
        line-height: 1.55;
      }
      .compact-card p {
        margin: 0;
      }
      .compact-card ul {
        margin: 0;
        padding-left: 18px;
      }
      .compact-card li::marker {
        color: #2563eb;
      }
      .source-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }
      .source-grid .compact-card {
        min-height: 176px;
      }
      .source-grid .compact-card strong {
        margin-bottom: 12px;
        font-size: 16px;
      }
      .source-grid .compact-card p,
      .source-grid .compact-card li {
        font-size: 14px;
        line-height: 1.7;
      }
      .link-grid {
        align-items: stretch;
      }
      .link-card {
        display: block;
        color: #1e293b;
        text-decoration: none;
        transition:
          border-color 180ms ease,
          background-color 180ms ease,
          box-shadow 180ms ease;
      }
      .link-card:hover {
        border-color: #2563eb;
        background: #eff6ff;
        box-shadow: 0 10px 24px rgba(37, 99, 235, 0.1);
      }
      .link-card strong {
        color: #1d4ed8;
      }
      .compact-list {
        align-items: stretch;
        grid-auto-rows: 1fr;
        padding-left: 0;
        list-style: none;
      }
      .compact-list li {
        display: flex;
        align-items: center;
        margin: 0;
        min-height: 86px;
        padding-left: 42px;
      }
      .compact-list li::before {
        top: 50%;
        left: 18px;
        right: auto;
        width: 10px;
        height: 10px;
        transform: translateY(-50%);
        background: #2563eb;
        border-radius: 999px;
      }
      @media (max-width: 980px) {
        .summary-grid,
        .decision-grid,
        .link-grid,
        .compact-list {
          grid-template-columns: 1fr;
        }
        .source-grid {
          grid-template-columns: 1fr;
        }
      }

      .link-card {
        position: relative;
        cursor: pointer;
      }
      .link-card em {
        display: inline-flex;
        margin-top: 16px;
        color: #1d4ed8;
        font-style: normal;
        font-size: 13px;
        font-weight: 700;
      }
      .link-card:hover em {
        text-decoration: underline;
      }

      .page-switch {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 8px 0 22px;
      }
      .page-switch a {
        display: inline-flex;
        align-items: center;
        min-height: 38px;
        padding: 8px 12px;
        color: #1d4ed8;
        text-decoration: none;
        background: #ffffff;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 700;
        transition:
          border-color 180ms ease,
          background-color 180ms ease;
      }
      .page-switch a:hover {
        border-color: #2563eb;
        background: #eff6ff;
      }
      .page-switch a[aria-current="page"] {
        color: #ffffff;
        background: #2563eb;
        border-color: #2563eb;
      }

      /* Sequential page reader */
      .doc-reader {
        min-height: 100vh;
        background:
          linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px),
          linear-gradient(180deg, rgba(148, 163, 184, 0.1) 1px, transparent 1px),
          #05070b;
        background-size: 36px 36px;
      }
      .doc-reader .layout {
        display: grid;
        grid-template-columns: 72px minmax(0, 860px) 72px;
        align-items: start;
        justify-content: center;
        gap: 20px;
        max-width: 1120px;
        min-height: 100vh;
        padding: 32px 22px;
        perspective: 1600px;
        perspective-origin: 50% 44vh;
      }
      .doc-reader .toc {
        display: none;
      }
      .page-count {
        position: fixed;
        top: 18px;
        right: 22px;
        z-index: 40;
        min-width: 62px;
        padding: 7px 10px;
        color: #e5e7eb;
        text-align: center;
        background: rgba(15, 23, 42, 0.78);
        border: 1px solid rgba(148, 163, 184, 0.34);
        border-radius: 999px;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
        font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.2;
      }
      .doc-reader.first-page .page-sheet {
        grid-column: 2;
      }
      .doc-reader.first-page .page-arrow-next {
        grid-column: 3;
      }
      .doc-reader.last-page .page-arrow-prev {
        grid-column: 1;
      }
      .doc-reader.last-page .page-sheet {
        grid-column: 2;
      }
      .doc-reader .page-sheet {
        position: relative;
        counter-reset: sheet-section;
        width: 100%;
        min-height: 1216px;
        padding: 58px 64px 72px;
        background: #ffffff;
        border: 1px solid #d7dee8;
        border-radius: 6px;
        box-shadow:
          0 24px 60px rgba(15, 23, 42, 0.16),
          0 2px 10px rgba(15, 23, 42, 0.08);
        backface-visibility: hidden;
        transform: translate3d(0, 0, 0) rotateY(0deg) scale(1);
        transform-style: preserve-3d;
        opacity: 1;
        transition:
          transform 820ms cubic-bezier(0.34, 0.02, 0.18, 1),
          box-shadow 820ms cubic-bezier(0.34, 0.02, 0.18, 1);
        will-change: transform;
      }
      .doc-reader .page-sheet h2 {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 44px;
        padding-top: 18px;
        font-size: 26px;
      }
      .doc-reader .page-sheet h2::before {
        counter-increment: sheet-section;
        content: counter(sheet-section, decimal-leading-zero);
        display: inline-grid;
        place-items: center;
        min-width: 34px;
        height: 26px;
        padding: 0 7px;
        color: #1d4ed8;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: 999px;
        font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
        font-size: 12px;
        font-weight: 800;
      }
      .doc-reader .page-sheet h2 + p {
        color: #475569;
        font-size: 15px;
        line-height: 1.68;
      }
      .doc-reader .page-sheet::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: inherit;
        background:
          linear-gradient(90deg, rgba(15, 23, 42, 0.14), transparent 7%, transparent 93%, rgba(15, 23, 42, 0.12)),
          linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent 18%);
        opacity: 0;
        transition: opacity 820ms cubic-bezier(0.34, 0.02, 0.18, 1);
      }
      .doc-reader.page-entering:not(.page-ready) .page-sheet {
        box-shadow:
          0 30px 68px rgba(15, 23, 42, 0.2),
          0 2px 10px rgba(15, 23, 42, 0.08);
      }
      .doc-reader.page-entering[data-enter-direction="next"]:not(.page-ready) .page-sheet {
        transform: translate3d(112vw, 0, -520px) rotateY(72deg) scale(0.82);
      }
      .doc-reader.page-entering[data-enter-direction="prev"]:not(.page-ready) .page-sheet {
        transform: translate3d(-112vw, 0, -520px) rotateY(-72deg) scale(0.82);
      }
      .doc-reader.page-entering:not(.page-ready) .page-sheet::after,
      .doc-reader.page-exit-next .page-sheet::after,
      .doc-reader.page-exit-prev .page-sheet::after {
        opacity: 1;
      }
      .doc-reader.page-exit-next .page-sheet {
        transform: translate3d(-112vw, 0, -520px) rotateY(-72deg) scale(0.82);
        box-shadow:
          0 30px 68px rgba(15, 23, 42, 0.2),
          0 2px 10px rgba(15, 23, 42, 0.08);
      }
      .doc-reader.page-exit-prev .page-sheet {
        transform: translate3d(112vw, 0, -520px) rotateY(72deg) scale(0.82);
        box-shadow:
          0 30px 68px rgba(15, 23, 42, 0.2),
          0 2px 10px rgba(15, 23, 42, 0.08);
      }
      .doc-reader.page-turning > .layout {
        visibility: hidden;
      }
      .page-turn-stage {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: grid;
        grid-template-columns: 72px minmax(0, 860px) 72px;
        justify-content: center;
        gap: 20px;
        padding: 32px 22px;
        pointer-events: none;
        perspective: 1600px;
        perspective-origin: 50% 44vh;
        overflow: hidden;
      }
      .page-turn-stage .page-sheet {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        width: 100%;
        margin: 0;
      }
      .page-turn-stage .turn-sheet {
        animation-duration: 820ms;
        animation-fill-mode: both;
        animation-timing-function: cubic-bezier(0.34, 0.02, 0.18, 1);
      }
      .page-turn-stage[data-direction="next"].page-turn-run .turn-sheet-outgoing {
        animation-name: ring-out-next;
      }
      .page-turn-stage[data-direction="next"].page-turn-run .turn-sheet-incoming {
        animation-name: ring-in-next;
      }
      .page-turn-stage[data-direction="prev"].page-turn-run .turn-sheet-outgoing {
        animation-name: ring-out-prev;
      }
      .page-turn-stage[data-direction="prev"].page-turn-run .turn-sheet-incoming {
        animation-name: ring-in-prev;
      }
      @keyframes ring-out-next {
        from {
          transform: translate3d(0, 0, 0) rotateY(0deg) scale(1);
        }
        to {
          transform: translate3d(-112vw, 0, -520px) rotateY(-72deg) scale(0.82);
        }
      }
      @keyframes ring-in-next {
        from {
          transform: translate3d(112vw, 0, -520px) rotateY(72deg) scale(0.82);
        }
        to {
          transform: translate3d(0, 0, 0) rotateY(0deg) scale(1);
        }
      }
      @keyframes ring-out-prev {
        from {
          transform: translate3d(0, 0, 0) rotateY(0deg) scale(1);
        }
        to {
          transform: translate3d(112vw, 0, -520px) rotateY(72deg) scale(0.82);
        }
      }
      @keyframes ring-in-prev {
        from {
          transform: translate3d(-112vw, 0, -520px) rotateY(-72deg) scale(0.82);
        }
        to {
          transform: translate3d(0, 0, 0) rotateY(0deg) scale(1);
        }
      }
      .page-arrow {
        position: sticky;
        z-index: 30;
        top: 46vh;
        display: grid;
        place-items: center;
        width: 48px;
        height: 64px;
        color: #ffffff;
        text-decoration: none;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        cursor: pointer;
        transition:
          transform 180ms ease,
          color 180ms ease;
      }
      .page-arrow span {
        display: block;
        margin-top: -3px;
        color: inherit;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 48px;
        line-height: 1;
      }
      .page-arrow:hover {
        color: #bfdbfe;
      }
      .page-arrow-prev:hover,
      .page-arrow-prev:active {
        transform: translateX(-4px) scale(1.12);
      }
      .page-arrow-next:hover,
      .page-arrow-next:active {
        transform: translateX(4px) scale(1.12);
      }
      .page-arrow-prev {
        justify-self: end;
      }
      .page-arrow-next {
        justify-self: start;
      }
      @media (max-width: 980px) {
        .doc-reader .layout {
          grid-template-columns: 1fr;
          gap: 0;
          padding: 14px 10px 24px;
          perspective: 1100px;
          perspective-origin: 50% 50vh;
        }
        .page-turn-stage {
          grid-template-columns: 1fr;
          gap: 0;
          padding: 14px 10px 24px;
          perspective: 1100px;
          perspective-origin: 50% 50vh;
        }
        .page-turn-stage .page-sheet {
          grid-column: 1;
        }
        .page-count {
          top: 12px;
          right: 12px;
        }
        .doc-reader .page-sheet {
          min-height: calc(100vh - 28px);
          padding: 32px 18px 42px;
        }
        .page-arrow {
          position: fixed;
          z-index: 30;
          top: 50%;
          bottom: auto;
          width: 42px;
          height: 56px;
          margin-top: 0;
          transform: translateY(-50%);
        }
        .page-arrow:hover {
          transform: translateY(-50%);
        }
        .page-arrow-prev:hover,
        .page-arrow-prev:active {
          transform: translate(-4px, -50%) scale(1.12);
        }
        .page-arrow-next:hover,
        .page-arrow-next:active {
          transform: translate(4px, -50%) scale(1.12);
        }
        .page-arrow span {
          font-size: 36px;
        }
        .page-arrow-prev {
          left: 10px;
        }
        .page-arrow-next {
          right: 10px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .doc-reader .page-sheet {
          transition: none;
        }
        .doc-reader .page-sheet::after {
          transition: none;
        }
        .page-turn-stage .turn-sheet {
          animation: none;
        }
      }

      /* Implementation checklist */
      .implementation-checklist {
        position: fixed;
        right: 24px;
        bottom: 24px;
        z-index: 200;
        display: grid;
        justify-items: end;
        gap: 12px;
        pointer-events: none;
      }
      .checklist-toggle {
        width: 54px;
        height: 54px;
        display: grid;
        place-items: center;
        color: #ffffff;
        background: #2563eb;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 999px;
        box-shadow:
          0 18px 34px rgba(0, 0, 0, 0.28),
          0 8px 18px rgba(37, 99, 235, 0.28);
        cursor: pointer;
        pointer-events: auto;
        transition:
          background-color 180ms ease,
          transform 180ms ease,
          box-shadow 180ms ease;
      }
      .checklist-toggle:hover {
        background: #1d4ed8;
        transform: translateY(-2px);
        box-shadow:
          0 20px 38px rgba(0, 0, 0, 0.3),
          0 10px 20px rgba(37, 99, 235, 0.32);
      }
      .checklist-toggle:focus-visible {
        outline: 2px solid #bfdbfe;
        outline-offset: 3px;
      }
      .checklist-toggle-icon {
        position: relative;
        width: 24px;
        height: 18px;
        display: block;
      }
      .checklist-toggle-icon::before,
      .checklist-toggle-icon::after {
        content: "";
        position: absolute;
        left: 0;
        width: 24px;
        height: 3px;
        background: currentColor;
        border-radius: 999px;
        box-shadow: 0 7.5px 0 currentColor;
      }
      .checklist-toggle-icon::before {
        top: 0;
      }
      .checklist-toggle-icon::after {
        bottom: 0;
        box-shadow: none;
      }
      .checklist-panel {
        width: min(360px, calc(100vw - 32px));
        max-height: min(560px, calc(100vh - 112px));
        overflow: hidden;
        color: #1e293b;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid #d9e2ec;
        border-radius: 8px;
        box-shadow: 0 22px 48px rgba(0, 0, 0, 0.24);
        pointer-events: auto;
      }
      .checklist-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        border-bottom: 1px solid #e2e8f0;
        background: #f8fafc;
      }
      .checklist-header strong {
        color: #0f172a;
        font-size: 15px;
        line-height: 1.35;
      }
      .checklist-header span {
        flex: 0 0 auto;
        color: #1d4ed8;
        font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
        font-size: 12px;
        font-weight: 800;
      }
      .checklist-items {
        max-height: min(492px, calc(100vh - 174px));
        overflow: auto;
        padding: 8px;
      }
      .checklist-item {
        display: grid;
        grid-template-columns: 20px minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        padding: 10px 8px;
        border-radius: 8px;
        color: #334155;
        font-size: 14px;
        line-height: 1.45;
        cursor: pointer;
      }
      .checklist-item:hover {
        background: #eff6ff;
      }
      .checklist-item input {
        width: 18px;
        height: 18px;
        margin: 1px 0 0;
        accent-color: #2563eb;
      }
      .checklist-item span {
        min-width: 0;
      }
      .checklist-item input:checked + span {
        color: #64748b;
        text-decoration: line-through;
      }
      @media (max-width: 720px) {
        .implementation-checklist {
          right: 16px;
          bottom: 16px;
        }
        .checklist-toggle {
          width: 50px;
          height: 50px;
        }
      }

      /* Cleaner timeline flow */
      .flow.pipeline {
        position: relative;
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 12px;
        align-items: stretch;
        min-height: 0;
        padding: 18px;
        background: #f8fafc;
      }
      .flow.pipeline::before {
        content: "";
        position: absolute;
        left: 34px;
        right: 34px;
        top: 46px;
        height: 2px;
        background: #d9e2ec;
      }
      .pipeline-step {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-rows: auto auto 1fr;
        gap: 8px;
        min-height: 118px;
        padding: 14px;
        background: #ffffff;
        border: 1px solid #d9e2ec;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.035);
      }
      .pipeline-step::after {
        display: none !important;
      }
      .step-index {
        width: fit-content;
        min-width: 26px;
        height: 24px;
        padding: 0 8px;
        display: inline-grid;
        place-items: center;
        border-radius: 999px;
        background: #e0ecff;
        color: #1d4ed8;
        border: 1px solid #bfdbfe;
        font-weight: 800;
        font-size: 12px;
      }
      .pipeline-step strong {
        color: #0f172a;
        font-size: 15px;
        line-height: 1.35;
      }
      .pipeline-step span:last-child {
        color: #64748b;
        font-size: 13px;
        line-height: 1.55;
      }
      @media (max-width: 1279px) {
        .flow.pipeline {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        .flow.pipeline::before {
          display: none;
        }
      }
      @media (max-width: 720px) {
        .flow.pipeline {
          grid-template-columns: 1fr;
        }
        .pipeline-step {
          min-height: 104px;
        }
      }

      /* Stepper style flow */
      .flow.pipeline {
        position: relative;
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 18px;
        align-items: start;
        min-height: 0;
        padding: 12px 4px 4px;
        background: transparent;
        border: 0;
        border-radius: 0;
        overflow: visible;
      }
      .flow.pipeline::before {
        content: "";
        position: absolute;
        left: 18px;
        right: 18px;
        top: 25px;
        height: 2px;
        background: #cbd5e1;
      }
      .pipeline-step {
        position: relative;
        z-index: 1;
        display: block;
        min-height: 0;
        padding: 48px 4px 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
      }
      .pipeline-step::after {
        display: none !important;
      }
      .step-index {
        position: absolute;
        top: 10px;
        left: 0;
        width: 30px;
        min-width: 30px;
        height: 30px;
        padding: 0;
        display: grid;
        place-items: center;
        border-radius: 999px;
        background: #2563eb;
        color: #ffffff;
        border: 3px solid #ffffff;
        box-shadow: 0 0 0 1px #bfdbfe;
        font-weight: 800;
        font-size: 12px;
      }
      .pipeline-step strong {
        display: block;
        margin-bottom: 6px;
        color: #0f172a;
        font-size: 15px;
        line-height: 1.3;
      }
      .pipeline-step span:last-child {
        display: block;
        max-width: 18ch;
        color: #64748b;
        font-size: 13px;
        line-height: 1.45;
      }
      @media (max-width: 1279px) {
        .flow.pipeline {
          grid-template-columns: repeat(3, minmax(0, 1fr));
          row-gap: 26px;
        }
        .flow.pipeline::before {
          display: none;
        }
        .pipeline-step {
          min-height: 112px;
          padding: 14px 14px 14px 54px;
          background: #ffffff;
          border: 1px solid #d9e2ec;
          border-radius: 8px;
        }
        .step-index {
          top: 14px;
          left: 14px;
        }
        .pipeline-step span:last-child {
          max-width: none;
        }
      }
      @media (max-width: 720px) {
        .flow.pipeline {
          grid-template-columns: 1fr;
        }
        .pipeline-step {
          min-height: 96px;
        }
      }

      /* Closed loop flowchart */
      .loop-flow {
        position: relative;
        display: grid;
        grid-template-columns: repeat(4, minmax(150px, 1fr));
        gap: 34px;
        align-items: center;
        margin: 22px 0 18px;
        padding: 36px 38px 78px;
        background: #eaf3ff;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        overflow: hidden;
      }
      .loop-flow::before {
        content: "";
        position: absolute;
        left: 88px;
        right: 88px;
        bottom: 38px;
        height: 2px;
        background: #52647a;
      }
      .loop-flow::after {
        content: "";
        position: absolute;
        left: 82px;
        bottom: 33px;
        width: 0;
        height: 0;
        border-right: 10px solid #52647a;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
      }
      .loop-node {
        position: relative;
        z-index: 1;
        min-height: 128px;
        padding: 18px 18px 16px;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid #b9c8d8;
        border-radius: 8px;
      }
      .loop-node:not(.loop-last)::after {
        content: "";
        position: absolute;
        right: -25px;
        top: 50%;
        width: 18px;
        height: 2px;
        background: #52647a;
        transform: translateY(-50%);
      }
      .loop-node:not(.loop-last)::before {
        content: "";
        position: absolute;
        right: -31px;
        top: 50%;
        width: 0;
        height: 0;
        border-left: 9px solid #52647a;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        transform: translateY(-50%);
      }
      .loop-node.loop-last .return-stem {
        position: absolute;
        left: 50%;
        bottom: -78px;
        width: 2px;
        height: 78px;
        background: #52647a;
      }
      .loop-node:first-child .return-stem {
        position: absolute;
        left: 50%;
        bottom: -78px;
        width: 2px;
        height: 78px;
        background: #52647a;
      }
      .loop-kicker {
        display: inline-flex;
        margin-bottom: 16px;
        padding: 4px 9px;
        border-radius: 999px;
        background: #eff6ff;
        color: #1d4ed8;
        font-size: 12px;
        font-weight: 800;
      }
      .loop-node strong {
        display: block;
        margin-bottom: 10px;
        color: #0f172a;
        font-size: 20px;
        line-height: 1.25;
      }
      .loop-node span:last-child {
        display: block;
        color: #52647a;
        font-size: 14px;
        line-height: 1.55;
      }
      .loop-return-label {
        position: absolute;
        right: 116px;
        bottom: 15px;
        color: #2563eb;
        font-weight: 800;
        font-size: 15px;
      }
      .loop-note {
        margin-top: 12px;
        color: #475569;
        font-size: 14px;
      }
      .loop-svg-wrap {
        margin: 22px 0 18px;
        padding: 12px;
        background: #eaf3ff;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        overflow: hidden;
      }
      .loop-svg {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
      }
      .loop-svg .box {
        fill: #ffffff;
        stroke: #b7c8d9;
        stroke-width: 1.4;
      }
      .loop-svg .arrow-line {
        fill: none;
        stroke: #52647a;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .loop-svg .return-line {
        fill: none;
        stroke: #52647a;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .loop-svg .badge {
        fill: #eff6ff;
      }
      .loop-svg .badge-text {
        fill: #1d4ed8;
        font-size: 14px;
        font-weight: 800;
        font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
      }
      .loop-svg .title {
        fill: #0f172a;
        font-size: 22px;
        font-weight: 800;
        font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
      }
      .loop-svg .desc {
        fill: #52647a;
        font-size: 14px;
        font-weight: 500;
        font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
      }
      .loop-svg .return-label {
        fill: #2563eb;
        font-size: 16px;
        font-weight: 800;
        font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
      }
      @media (max-width: 980px) {
        .loop-flow {
          display: grid;
          grid-template-columns: 1fr;
          gap: 28px;
          padding: 24px;
        }
        .loop-flow::before,
        .loop-flow::after,
        .loop-node:first-child .return-stem,
        .loop-node.loop-last .return-stem,
        .loop-return-label {
          display: none;
        }
        .loop-node:not(.loop-last)::after {
          right: auto;
          left: 28px;
          top: calc(100% + 8px);
          width: 2px;
          height: 16px;
          transform: none;
        }
        .loop-node:not(.loop-last)::before {
          right: auto;
          left: 23px;
          top: calc(100% + 22px);
          border-left: 6px solid transparent;
          border-right: 6px solid transparent;
          border-top: 9px solid #52647a;
          border-bottom: 0;
          transform: none;
        }
        .loop-svg {
          min-width: 0;
        }
      }

/* Linear SVG flow */
.linear-svg-wrap {
  margin: 22px 0 18px;
  padding: 12px;
  background: #eaf3ff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
}
.linear-svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.linear-svg .box {
  fill: #ffffff;
  stroke: #b7c8d9;
  stroke-width: 1.4;
}
.linear-svg .arrow-line {
  fill: none;
  stroke: #52647a;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.linear-svg .badge {
  fill: #eff6ff;
}
.linear-svg .badge-text {
  fill: #1d4ed8;
  font-size: 14px;
  font-weight: 800;
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
}
.linear-svg .title {
  fill: #0f172a;
  font-size: 22px;
  font-weight: 800;
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
}
.linear-svg .desc {
  fill: #52647a;
  font-size: 14px;
  font-weight: 500;
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
}