:root {
      --paper: #ffffff;
      --paper-2: #f7f7f8;
      --ink: #0d0d0d;
      --ink-2: #5d5d5d;
      --ink-3: #8f8f8f;
      --line: #dedede;
      --line-dark: #6e6e6e;
      --rail: #192d3d;
      --rail-2: #20394d;
      --cream: #ffffff;
      --accent: #376889;
      --accent-soft: #e9f1f7;
      --green: #39705d;
      --green-soft: #dce9e4;
      --blue: #315f7c;
      --blue-soft: #cedde6;
      --yellow: #b88422;
      --yellow-soft: #ead8ac;
      --mono: "SFMono-Regular", "Cascadia Mono", "Liberation Mono", monospace;
      --serif: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
      --sans: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
      --max: var(--lm-canvas-content-width);
    }

    * { box-sizing: border-box; }
    ::selection { background: rgba(13, 13, 13, .12); }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background-color: var(--paper);
      background-image:
        linear-gradient(rgba(13, 13, 13, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 13, 13, .025) 1px, transparent 1px);
      background-size: 24px 24px;
      font-family: var(--sans);
      line-height: 1.65;
    }
    button, input { font: inherit; }
    a { color: inherit; }
    code, .mono { font-family: var(--mono); }
    .progress {
      position: fixed;
      z-index: 100;
      top: 0;
      left: 0;
      height: 3px;
      width: 0;
      background: var(--accent);
    }
    .layout { min-height: 100vh; width: min(var(--max), calc(100% - 2 * var(--lm-page-gutter))); margin-inline: auto; }
    .rail {
      position: fixed;
      z-index: 20;
      inset: 0 auto 0 0;
      width: 268px;
      overflow-y: auto;
      background: var(--rail);
      color: #edf0e8;
      border-right: 1px solid #33413e;
      padding: 30px 22px 26px;
    }
    .rail-brand {
      padding-bottom: 23px;
      border-bottom: 1px solid #3b4845;
    }
    .eyebrow {
      color: var(--accent);
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    .rail h1 {
      margin: 9px 0 7px;
      font-family: var(--serif);
      font-size: 24px;
      font-weight: 700;
      line-height: 1.18;
    }
    .rail-brand p {
      margin: 0;
      color: #abb5b0;
      font-size: 12px;
    }
    .rail-nav { margin-top: 22px; display: grid; gap: 3px; }
    .rail-nav a {
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 6px;
      align-items: center;
      padding: 8px 9px;
      color: #aeb8b3;
      text-decoration: none;
      border-left: 2px solid transparent;
      font-size: 13px;
      transition: .16s ease;
    }
    .rail-nav a:hover, .rail-nav a.active {
      color: #fff;
      background: var(--rail-2);
      border-left-color: var(--accent);
    }
    .rail-nav .nav-no { font-family: var(--mono); color: #6f7c77; font-size: 11px; }
    .rail-note {
      margin-top: 24px;
      padding: 13px;
      border: 1px solid #3c4946;
      color: #b6bfbb;
      font-size: 11px;
    }
    .content { margin-left: 268px; }
    .hero {
      min-height: 92vh;
      display: grid;
      align-items: center;
      padding: 72px 5vw 60px;
      background: var(--cream);
      border-bottom: 1px solid var(--line);
    }
    .hero-inner { width: min(var(--max), 100%); margin: 0 auto; }
    .hero-kicker {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--accent);
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .12em;
    }
    .hero-kicker::before { content: ""; width: 54px; height: 3px; background: var(--accent); }
    .hero h1 {
      max-width: 950px;
      margin: 25px 0 24px;
      font-family: var(--serif);
      font-size: clamp(46px, 7vw, 92px);
      font-weight: 700;
      letter-spacing: -.045em;
      line-height: .98;
    }
    .hero h1 span { color: var(--accent); }
    .hero-lead {
      max-width: 760px;
      margin: 0;
      color: var(--ink-2);
      font-family: var(--serif);
      font-size: clamp(18px, 2vw, 24px);
      line-height: 1.55;
    }
    .formula {
      margin-top: 42px;
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      border: 1px solid var(--ink);
      background: var(--paper);
    }
    .formula-item {
      position: relative;
      min-height: 112px;
      padding: 17px 15px;
      border-right: 1px solid var(--ink);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .formula-item:last-child { border-right: 0; }
    .formula-item::after {
      content: "→";
      position: absolute;
      right: -13px;
      top: 40px;
      z-index: 2;
      width: 25px;
      height: 25px;
      display: grid;
      place-items: center;
      background: var(--paper);
      font-family: var(--mono);
      color: var(--accent);
    }
    .formula-item:last-child::after { display: none; }
    .formula-item strong { font-size: 14px; }
    .formula-item small { color: var(--ink-3); font-size: 11px; }
    .hero-meta {
      margin-top: 16px;
      display: flex;
      gap: 22px;
      flex-wrap: wrap;
      color: var(--ink-3);
      font-family: var(--mono);
      font-size: 11px;
    }
    .section {
      scroll-margin-top: 18px;
      padding: 88px 5vw;
      border-bottom: 1px solid var(--line);
    }
    .section:nth-child(even) { background-color: rgba(250, 247, 239, .62); }
    .section-inner { width: min(var(--max), 100%); margin: 0 auto; }
    .section-head {
      display: grid;
      grid-template-columns: 86px 1fr;
      gap: 22px;
      margin-bottom: 46px;
      align-items: start;
    }
    .section-no {
      padding-top: 6px;
      color: var(--accent);
      font-family: var(--mono);
      font-size: 18px;
      font-weight: 700;
    }
    .section h2 {
      margin: 0 0 10px;
      font-family: var(--serif);
      font-size: clamp(32px, 4.4vw, 56px);
      line-height: 1.12;
      letter-spacing: -.025em;
    }
    .section-intro { max-width: 800px; margin: 0; color: var(--ink-2); font-size: 16px; }
    .callout {
      padding: 18px 20px;
      border-left: 5px solid var(--accent);
      background: var(--cream);
      font-family: var(--serif);
      font-size: 17px;
    }
    .callout strong { color: var(--accent); }
    .legend { display: flex; flex-wrap: wrap; gap: 15px; margin: 0 0 20px; color: var(--ink-2); font-size: 12px; }
    .legend span { display: inline-flex; gap: 7px; align-items: center; }
    .dot { width: 10px; height: 10px; display: inline-block; background: var(--ink); }
    .dot.accent { background: var(--accent); }
    .dot.green { background: var(--green); }
    .dot.blue { background: var(--blue); }
    .architecture {
      position: relative;
      padding: 30px;
      border: 1px solid var(--ink);
      background: var(--cream);
    }
    .arch-row {
      display: grid;
      grid-template-columns: 150px repeat(4, minmax(0, 1fr));
      min-height: 94px;
      border-bottom: 1px solid var(--line);
    }
    .arch-row:last-child { border-bottom: 0; }
    .arch-label {
      padding: 14px 14px 14px 0;
      border-right: 1px solid var(--line-dark);
      color: var(--ink-3);
      font-family: var(--mono);
      font-size: 11px;
      display: flex;
      align-items: center;
    }
    .arch-cell {
      appearance: none;
      border: 0;
      border-right: 1px solid var(--line);
      padding: 14px;
      background: transparent;
      color: var(--ink);
      text-align: left;
      cursor: pointer;
      transition: .15s ease;
    }
    .arch-cell:last-child { border-right: 0; }
    .arch-cell:hover, .arch-cell.active { background: var(--accent-soft); }
    .arch-cell.core { background: var(--green-soft); }
    .arch-cell.core:hover, .arch-cell.core.active { background: #afd0c0; }
    .arch-cell strong { display: block; margin-bottom: 5px; font-size: 13px; }
    .arch-cell small { color: var(--ink-2); font-size: 11px; line-height: 1.4; }
    .arch-detail {
      margin-top: 14px;
      min-height: 126px;
      padding: 20px;
      display: grid;
      grid-template-columns: 160px 1fr 1fr;
      gap: 22px;
      background: var(--rail);
      color: #e8ece5;
    }
    .arch-detail h3 { margin: 0; color: #fff; font-family: var(--serif); font-size: 24px; }
    .arch-detail p { margin: 0; color: #b8c2bd; font-size: 13px; }
    .detail-label { display: block; margin-bottom: 5px; color: #788a84; font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
    .principles {
      margin-top: 24px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border: 1px solid var(--line-dark);
    }
    .principle { padding: 18px; border-right: 1px solid var(--line); }
    .principle:last-child { border-right: 0; }
    .principle b { display: block; color: var(--accent); font-family: var(--mono); font-size: 11px; }
    .principle strong { display: block; margin: 8px 0 5px; font-family: var(--serif); font-size: 18px; }
    .principle p { margin: 0; color: var(--ink-2); font-size: 12px; }
    .timeline-wrap { display: grid; grid-template-columns: 290px 1fr; gap: 24px; }
    .stage-list { display: grid; gap: 1px; align-content: start; border: 1px solid var(--ink); background: var(--ink); }
    .stage-button {
      border: 0;
      padding: 13px 14px;
      display: grid;
      grid-template-columns: 31px 1fr;
      gap: 9px;
      color: var(--ink);
      background: var(--cream);
      text-align: left;
      cursor: pointer;
    }
    .stage-button:hover, .stage-button.active { background: var(--accent-soft); }
    .stage-button span:first-child { color: var(--accent); font-family: var(--mono); font-size: 11px; }
    .stage-detail {
      min-height: 455px;
      padding: 32px;
      border: 1px solid var(--ink);
      background: var(--cream);
      display: grid;
      align-content: start;
      gap: 20px;
    }
    .stage-detail .tag { width: fit-content; padding: 4px 8px; background: var(--accent); color: white; font-family: var(--mono); font-size: 10px; }
    .stage-detail h3 { margin: 0; font-family: var(--serif); font-size: 32px; line-height: 1.2; }
    .stage-detail > p { margin: 0; color: var(--ink-2); font-size: 15px; }
    .stage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .stage-box { padding-top: 14px; border-top: 2px solid var(--ink); }
    .stage-box b { display: block; margin-bottom: 5px; font-size: 12px; }
    .stage-box p { margin: 0; color: var(--ink-2); font-size: 12px; }
    .event-track { margin-top: 5px; padding: 14px; background: var(--paper-2); overflow-x: auto; white-space: nowrap; font: 12px/1.5 var(--mono); }
    .event-track em { color: var(--accent); font-style: normal; }
    .memory-stack { display: grid; gap: 12px; }
    .memory-layer {
      display: grid;
      grid-template-columns: 72px 210px 1fr 190px;
      gap: 18px;
      align-items: center;
      padding: 18px;
      border: 1px solid var(--line-dark);
      background: var(--cream);
      cursor: pointer;
      transition: .16s ease;
    }
    .memory-layer:hover, .memory-layer.active { transform: translateX(5px); border-color: var(--accent); }
    .memory-no { color: var(--accent); font: 700 16px var(--mono); }
    .memory-layer h3 { margin: 0; font-family: var(--serif); font-size: 20px; }
    .memory-layer p { margin: 0; color: var(--ink-2); font-size: 13px; }
    .memory-layer .store { color: var(--ink-3); font: 11px/1.5 var(--mono); }
    .memory-detail {
      margin-top: 20px;
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 1px;
      background: var(--ink);
      border: 1px solid var(--ink);
    }
    .memory-detail > div { padding: 26px; background: var(--paper-2); }
    .memory-detail h3 { margin: 0 0 10px; font-family: var(--serif); font-size: 24px; }
    .memory-detail p, .memory-detail li { color: var(--ink-2); font-size: 13px; }
    .memory-detail ul { margin: 10px 0 0; padding-left: 18px; }
    .memory-flow {
      margin-top: 28px;
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      border: 1px solid var(--ink);
      background: var(--ink);
      gap: 1px;
    }
    .memory-flow div { position: relative; padding: 15px 12px; min-height: 100px; background: var(--cream); }
    .memory-flow b { display: block; color: var(--accent); font: 11px var(--mono); }
    .memory-flow strong { display: block; margin: 7px 0 4px; font-size: 13px; }
    .memory-flow small { color: var(--ink-3); font-size: 10px; line-height: 1.35; }
    .truth-grid { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .truth-card { padding: 22px; border: 1px solid var(--line-dark); }
    .truth-card h3 { margin: 0 0 11px; font-family: var(--serif); }
    .truth-card ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 13px; }
    .truth-card.bad { background: #f1f1f1; }
    .truth-card.good { background: var(--green-soft); }
    .tool-pipe {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      border: 1px solid var(--ink);
      background: var(--ink);
      gap: 1px;
    }
    .tool-step { position: relative; min-height: 168px; padding: 18px 14px; background: var(--cream); }
    .tool-step.gate { background: var(--yellow-soft); }
    .tool-step .n { color: var(--accent); font: 700 12px var(--mono); }
    .tool-step h3 { margin: 12px 0 7px; font-family: var(--serif); font-size: 18px; }
    .tool-step p { margin: 0; color: var(--ink-2); font-size: 11px; }
    .tool-step::after {
      content: "›";
      position: absolute;
      z-index: 2;
      right: -11px;
      top: 68px;
      width: 21px;
      height: 30px;
      display: grid;
      place-items: center;
      background: var(--ink);
      color: white;
      font-size: 20px;
    }
    .tool-step:last-child::after { display: none; }
    .policy-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .policy-card { padding: 20px; border-top: 4px solid var(--ink); background: var(--cream); }
    .policy-card h3 { margin: 0 0 8px; font-family: var(--serif); }
    .policy-card p { margin: 0; color: var(--ink-2); font-size: 12px; }
    .plugin-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
    .plugin-tree { padding: 24px; border: 1px solid var(--ink); background: var(--cream); font: 12px/1.8 var(--mono); overflow-x: auto; }
    .plugin-tree .branch { color: var(--accent); }
    .plugin-tree .service { color: var(--green); font-weight: 700; }
    .concept-list { display: grid; gap: 10px; }
    .concept { display: grid; grid-template-columns: 116px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
    .concept strong { font-family: var(--mono); font-size: 12px; }
    .concept p { margin: 0; color: var(--ink-2); font-size: 13px; }
    .host-map { display: grid; grid-template-columns: 1fr 70px 1.2fr 70px 1fr; align-items: stretch; }
    .host-col { padding: 22px; border: 1px solid var(--ink); background: var(--cream); }
    .host-core { background: var(--rail); color: white; }
    .host-col h3 { margin: 0 0 14px; font-family: var(--serif); font-size: 24px; }
    .host-col ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 13px; }
    .host-core ul { color: #b8c2bd; }
    .host-arrow { display: grid; place-items: center; color: var(--accent); font: 28px var(--mono); }
    .module-tools { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
    .search {
      min-width: min(100%, 300px);
      border: 1px solid var(--ink);
      background: var(--cream);
      padding: 9px 12px;
      color: var(--ink);
      outline: none;
    }
    .search:focus { border-color: var(--accent); }
    .filter {
      border: 1px solid var(--line-dark);
      padding: 8px 11px;
      background: transparent;
      color: var(--ink-2);
      cursor: pointer;
      font-size: 12px;
    }
    .filter.active, .filter:hover { background: var(--ink); color: white; }
    .module-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .module {
      min-height: 150px;
      padding: 17px;
      border: 1px solid var(--line-dark);
      background: var(--cream);
    }
    .module.hidden { display: none; }
    .module .group { color: var(--accent); font: 10px var(--mono); text-transform: uppercase; }
    .module h3 { margin: 8px 0 6px; font-family: var(--serif); font-size: 20px; }
    .module p { margin: 0; color: var(--ink-2); font-size: 12px; }
    .module .works { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 11px; }
    .case {
      display: grid;
      grid-template-columns: 115px 1fr 220px;
      border-top: 1px solid var(--ink);
      min-height: 92px;
    }
    .case:last-child { border-bottom: 1px solid var(--ink); }
    .case-n { padding: 18px 14px 18px 0; color: var(--accent); font: 700 14px var(--mono); }
    .case-main { padding: 16px 18px; border-left: 1px solid var(--line); }
    .case-main strong { display: block; font-family: var(--serif); font-size: 18px; }
    .case-main p { margin: 5px 0 0; color: var(--ink-2); font-size: 12px; }
    .case-owner { padding: 16px; border-left: 1px solid var(--line); color: var(--ink-3); font-size: 11px; }
    .case-owner b { display: block; color: var(--ink); font-family: var(--mono); }
    .summary-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; }
    .summary-big { padding: 28px; background: var(--rail); color: white; }
    .summary-big h3 { margin: 0 0 17px; font-family: var(--serif); font-size: 31px; }
    .summary-big p { color: #bbc4c0; }
    .summary-big ol { margin: 16px 0 0; padding-left: 22px; color: #edf0eb; }
    .summary-side { display: grid; gap: 12px; }
    .summary-side div { padding: 18px; border: 1px solid var(--line-dark); background: var(--cream); }
    .summary-side b { display: block; color: var(--accent); font: 11px var(--mono); }
    .summary-side p { margin: 6px 0 0; color: var(--ink-2); font-size: 12px; }
    .source-tag { color: #7f8e88; font: 10px var(--mono); }
    .fade { animation: reveal .35s ease both; }
    @keyframes reveal { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

    @media (max-width: 1080px) {
      .formula { grid-template-columns: repeat(3, 1fr); }
      .formula-item:nth-child(3) { border-right: 0; }
      .formula-item:nth-child(-n+3) { border-bottom: 1px solid var(--ink); }
      .arch-row { grid-template-columns: 120px repeat(4, 1fr); }
      .memory-flow { grid-template-columns: repeat(4, 1fr); }
      .tool-pipe { grid-template-columns: repeat(3, 1fr); }
      .module-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 820px) {
      .rail { position: sticky; top: 0; width: 100%; height: auto; padding: 10px 14px; overflow-x: auto; border-right: 0; border-bottom: 1px solid #33413e; }
      .rail-brand, .rail-note { display: none; }
      .rail-nav { margin: 0; display: flex; min-width: max-content; }
      .rail-nav a { grid-template-columns: auto 1fr; }
      .content { margin-left: 0; }
      .hero { min-height: auto; padding-top: 70px; }
      .section { padding: 65px 24px; }
      .section-head { grid-template-columns: 52px 1fr; }
      .timeline-wrap, .plugin-layout, .memory-detail, .summary-grid { grid-template-columns: 1fr; }
      .stage-list { grid-template-columns: repeat(2, 1fr); }
      .arch-row { grid-template-columns: 96px repeat(2, 1fr); }
      .arch-cell:nth-child(4), .arch-cell:nth-child(5) { border-top: 1px solid var(--line); }
      .arch-detail { grid-template-columns: 1fr; }
      .memory-layer { grid-template-columns: 48px 180px 1fr; }
      .memory-layer .store { grid-column: 2 / -1; }
      .principles, .policy-grid { grid-template-columns: repeat(2, 1fr); }
      .host-map { grid-template-columns: 1fr; gap: 8px; }
      .host-arrow { transform: rotate(90deg); min-height: 40px; }
      .case { grid-template-columns: 70px 1fr; }
      .case-owner { grid-column: 2; border-left: 1px solid var(--line); border-top: 1px dashed var(--line); }
    }
    @media (max-width: 560px) {
      .hero { padding-inline: 20px; }
      .hero h1 { font-size: 45px; }
      .formula { grid-template-columns: 1fr 1fr; }
      .formula-item { border-bottom: 1px solid var(--ink); }
      .formula-item:nth-child(2n) { border-right: 0; }
      .section { padding-inline: 18px; }
      .section-head { grid-template-columns: 1fr; gap: 5px; }
      .arch-row { grid-template-columns: 78px 1fr; }
      .arch-cell { border-top: 1px solid var(--line); }
      .arch-cell:nth-child(2) { border-top: 0; }
      .principles, .policy-grid, .module-grid, .truth-grid, .stage-grid, .memory-flow, .tool-pipe { grid-template-columns: 1fr; }
      .principle { border-right: 0; border-bottom: 1px solid var(--line); }
      .memory-layer { grid-template-columns: 42px 1fr; }
      .memory-layer p, .memory-layer .store { grid-column: 2; }
      .stage-list { grid-template-columns: 1fr; }
      .tool-step::after { display: none; }
    }
  
/* Architecture drafting board: inline chapter index, six-layer drawing, blue ink. */
html.dark {
  --paper: #121a20; --paper-2: #1a242d; --cream: #18222b; --ink: #e2eaf1;
  --ink-2: #b1bec8; --ink-3: #95a7b5; --line: #33424e; --line-dark: #506675;
  --rail: #0e1922; --rail-2: #253b4d; --accent: #a0c1dd; --accent-soft: #253b4d;
  --green: #a5c7b8; --green-soft: #243e35; --blue: #a0c1dd; --blue-soft: #243c4f;
  --yellow: #d5bd8f; --yellow-soft: #3c3527;
}
body { background-image: none; font-size: 16px; line-height: 1.8; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.rail { position: sticky; inset: auto; top: var(--header-height); width: 100%; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); background: var(--lm-glass-top); color: var(--ink); backdrop-filter: var(--lm-glass-filter); -webkit-backdrop-filter: var(--lm-glass-filter); overflow-x: auto; }
.rail-brand { padding-bottom: 18px; border-color: var(--line); }
.rail-title { margin: 10px 0 8px; font: 600 17px/1.6 var(--sans); }
.rail-brand p,.rail-note { color: var(--ink-3); }.rail-note { border: 0; border-top: 1px solid var(--line); padding: 18px 0 0; font-size: 11px; }
.eyebrow { font-size: 10px; letter-spacing: .1em; }.rail-nav { margin-top: 18px; gap: 5px; }
.rail-nav a { color: var(--ink-2); padding: 10px 8px; font-size: 12px; border-left: 1px solid transparent; }
.rail-nav a:is(:hover,.active) { color: var(--accent); background: var(--accent-soft); border-left-color: var(--accent); }
.rail-nav .nav-no { color: var(--ink-3); }
.rail-brand,.rail-note { display: none; }
.rail-nav { display: flex; width: max-content; margin: 0; gap: 8px; }
.rail-nav a { grid-template-columns: auto 1fr; padding: 6px 10px; border: 0; border-bottom: 1px solid transparent; }
.rail-nav a.active { background: transparent; border-bottom-color: var(--accent); }
.content { margin: 0; }
.hero { min-height: auto; padding: 64px 0 50px; background: var(--paper); position: relative; }
.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size: 32px 32px; opacity: .22; mask-image: linear-gradient(90deg,transparent 15%,#000); }
.hero-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px 36px; position: relative; }
.hero-kicker { grid-column: 1 / -1; font-size: 10px; letter-spacing: .1em; flex-wrap: wrap; }.hero-kicker::before { width: 28px; height: 1px; }
.hero h1 { grid-column: 1; font: 600 clamp(36px,4vw,58px)/1.14 var(--sans); margin: 10px 0 0; letter-spacing: -.04em; }
.hero h1 span { display: block; font-size: .66em; margin-top: 12px; letter-spacing: -.02em; }
.hero-thesis { grid-column: 1; margin: 0; font-size: 19px; line-height: 1.6; font-weight: 500; }
.hero-lead { grid-column: 1; font: 15px/1.9 var(--sans); color: var(--ink-2); }
.formula { grid-column: 2; grid-row: 2 / 5; align-self: center; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); counter-reset: component; margin: 0; border: 1px solid var(--line-dark); gap: 0; }
.formula-item { min-height: 118px; text-decoration: none; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px; background: var(--paper); transition: background 160ms ease; }
.formula-item:nth-child(2n) { border-right: 0; }.formula-item:nth-child(3) { border-right: 1px solid var(--line); }.formula-item:nth-child(n+5) { border-bottom: 0; }.formula-item:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
.formula-item::before { counter-increment: component; content: counter(component,decimal-leading-zero); color: var(--accent); font: 10px var(--mono); margin-bottom: 12px; }
.formula-item::after { content: none; }.formula-item:hover { background: var(--accent-soft); }.formula-item strong { font: 600 13px/1.6 var(--mono); }.formula-item small { font-size: 11px; }
.hero-meta { grid-column: 1/-1; padding-top: 20px; border-top: 1px solid var(--line); margin-top: 8px; font-size: 10px; }
.section { padding: 64px 0; }.section:nth-child(even) { background: var(--paper); }
.section-head { grid-template-columns: 56px 1fr; gap: 24px; margin-bottom: 30px; }.section-no { font-size: 13px; padding-top: 10px; }
.section h2 { font-size: clamp(26px,2.7vw,36px); font-weight: 600; line-height: 1.4; }.section-intro { font-size: 15px; }
.architecture { padding: 0; border-color: var(--line-dark); }.arch-row { grid-template-columns: 112px repeat(4,minmax(0,1fr)); min-height: 104px; }.arch-label { padding: 14px 12px; font-size: 11px; background: var(--paper-2); }.arch-cell { padding: 16px 12px; }.arch-cell strong { font: 600 12px/1.5 var(--mono); overflow-wrap: anywhere; }.arch-cell small { font-size: 12px; }.arch-cell.core:is(:hover,.active) { background: var(--green-soft); box-shadow: inset 0 -2px var(--green); }
.arch-detail { grid-template-columns: 160px 1fr 1fr; padding: 24px; gap: 24px; background: var(--rail); }.arch-detail h3 { font-size: 21px; overflow-wrap: anywhere; }.arch-detail p { font-size: 13px; color: #c3d0da; }.detail-label { color: #9baeba; }
.principle strong { font-size: 17px; }.principle p { font-size: 13px; }.callout { font: 15px/1.85 var(--sans); border-left-width: 2px; background: var(--paper-2); }
.timeline-wrap { grid-template-columns: 248px 1fr; }.stage-list { background: var(--line); border-color: var(--line-dark); }.stage-button { font-size: 13px; padding-block: 14px; }.stage-detail { min-height: 430px; padding: 28px; border-color: var(--line-dark); }.stage-detail h3 { font-size: 25px; line-height: 1.45; }.stage-detail .tag { color: var(--paper); }.stage-box { border-top-width: 1px; }.event-track { max-width: 100%; font-size: 11px; }
.memory-layer { grid-template-columns: 42px 170px 1fr 148px; gap: 18px; padding: 18px; }.memory-layer:hover,.memory-layer.active { transform: none; background: var(--accent-soft); }.memory-layer h3 { font-size: 17px; }.memory-layer p { font-size: 13px; }.memory-layer .store { font-size: 10px; overflow-wrap: anywhere; }.memory-detail { background: var(--line); border-color: var(--line-dark); }.memory-detail h3 { font-size: 21px; }.memory-detail p,.memory-detail li { font-size: 14px; }
.memory-flow { grid-template-columns: repeat(4,minmax(0,1fr)); background: var(--line); border-color: var(--line-dark); }.memory-flow small { font-size: 12px; }.truth-card.bad { background: var(--paper-2); }.truth-card ul { font-size: 14px; }.truth-card h3 { font-size: 19px; }
.tool-pipe { grid-template-columns: repeat(3,minmax(0,1fr)); background: var(--line); border-color: var(--line-dark); }.tool-step { padding: 22px; min-height: 170px; }.tool-step p { font-size: 13px; }.tool-step::after { content: none; }.policy-card { border-top-width: 2px; background: var(--paper-2); }.policy-card h3 { font-size: 18px; }.policy-card p { font-size: 14px; }
.plugin-tree { font-size: 13px; background: var(--paper-2); border-color: var(--line-dark); }.concept { grid-template-columns: 110px 1fr; }.concept p { font-size: 14px; }.host-map { grid-template-columns: 1fr 40px 1.15fr 40px 1fr; }.host-col { padding: 20px; }.host-col h3 { font-size: 20px; }
.module-grid { gap: 0 28px; }.module { padding: 22px 0; border: 0; border-top: 1px solid var(--line); min-height: 0; }.module h3 { font: 600 16px/1.7 var(--sans); }.module p { font-size: 13px; }.module .works { font-size: 12px; }.filter.active,.filter:hover { color: var(--paper); }.search { border-color: var(--line-dark); }
.case { grid-template-columns: 62px 1fr 198px; }.case-main strong { font-size: 17px; }.case-main p { font-size: 14px; }.case-owner { font-size: 12px; }.summary-big h3 { font-size: 24px; }.summary-big p { font-size: 15px; }.summary-big ol { font-size: 14px; }.summary-side p { font-size: 14px; }.source-tag { font-size: 11px; }
@media (max-width: 1279px) {
  .hero-inner { gap: 18px 36px; }.module-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .hero { padding: 36px 0; }.hero-inner { grid-template-columns: 1fr; }.hero h1 { font-size: 43px; }.formula { grid-column: 1; grid-row: auto; grid-template-columns: repeat(3,minmax(0,1fr)); }.formula-item { min-height: 114px; padding: 16px; }.formula-item:nth-child(2n) { border-right: 1px solid var(--line); }.formula-item:nth-child(3n) { border-right: 0; }.formula-item:nth-child(n+4) { border-bottom: 0; }.hero-meta { grid-column: 1; }
  .section { padding: 46px 0; }.section-head { grid-template-columns: 40px 1fr; gap: 12px; }.timeline-wrap,.plugin-layout,.memory-detail,.summary-grid { grid-template-columns: 1fr; }.arch-row { grid-template-columns: repeat(2,minmax(0,1fr)); }.arch-label { grid-column: 1/-1; border-right: 0; padding-block: 10px; }.arch-cell { min-height: 90px; border-top: 1px solid var(--line); }.arch-cell:nth-child(3),.arch-cell:nth-child(5) { border-right: 0; }.arch-detail { grid-template-columns: 1fr; gap: 16px; }.memory-layer { grid-template-columns: 36px 1fr; }.memory-layer p,.memory-layer .store { grid-column: 2; }.memory-layer .store { font-size: 11px; }.stage-list { grid-template-columns: 1fr 1fr; }.stage-detail { min-height: 0; }.policy-grid,.module-grid { grid-template-columns: 1fr 1fr; }.memory-flow,.tool-pipe { grid-template-columns: 1fr 1fr; }.host-map { grid-template-columns: 1fr; }.case { grid-template-columns: 44px 1fr; }.case-owner { grid-column: 2; }
}
@media (max-width: 540px) {
  .hero h1 { font-size: 36px; }.hero-kicker { font-size: 9px; }.hero-thesis { font-size: 18px; }.hero-meta { gap: 8px 20px; }
  .formula { grid-template-columns: repeat(2,minmax(0,1fr)); }.formula-item:nth-child(3n) { border-right: 1px solid var(--line); }.formula-item:nth-child(2n) { border-right: 0; }.formula-item:nth-child(4) { border-bottom: 1px solid var(--line); }.formula-item:nth-child(5) { border-bottom: 0; }.formula-item strong { font-size: 12px; }
  .section-head { grid-template-columns: 1fr; gap: 6px; }.section h2 { font-size: 26px; }.principles,.policy-grid,.module-grid,.truth-grid,.stage-grid { grid-template-columns: 1fr; }.principle { border-right: 0; border-bottom: 1px solid var(--line); }.principle:last-child { border-bottom: 0; }.stage-button { grid-template-columns: 22px 1fr; padding: 12px 10px; font-size: 12px; gap: 4px; }.stage-detail { padding: 20px; }.memory-detail > div { padding: 22px; }.tool-step { padding: 18px; }.tool-step h3 { font-size: 17px; }.concept { grid-template-columns: 100px 1fr; }
}
@media print { .rail,.reading-shell-header,.progress { display: none !important; }.content { margin: 0; } }