:root {
  color-scheme: light;
  --ink: #14202b;
  --muted: #66717c;
  --soft: #8c96a0;
  --line: #dfe4e8;
  --paper: #f3f5f6;
  --card: #ffffff;
  --navy: #091725;
  --navy-2: #102b43;
  --blue: #3e7fb6;
  --blue-soft: #eaf3f9;
  --green: #2d7d58;
  --green-soft: #eaf5ef;
  --amber: #b87514;
  --amber-soft: #fbf2e3;
  --red: #b34141;
  --red-soft: #faecec;
  --shadow: 0 14px 38px rgba(13, 35, 54, .07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; max-width: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
  max-width: 100%;
  overflow-x: clip;
}
.wrap { width: min(100% - 64px, 1240px); margin: 0 auto; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: #225f92; }
code, .mono, .v { font-family: 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; }

/* Hero */
.site-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 26px 0 68px;
  background:
    radial-gradient(circle at 82% 24%, rgba(73, 151, 205, .28), transparent 31%),
    radial-gradient(circle at 20% 110%, rgba(46, 125, 88, .2), transparent 34%),
    linear-gradient(135deg, var(--navy), var(--navy-2));
}
.site-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}
.hero-inner { position: relative; z-index: 1; }
.topline { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 68px; }
.brand { font-size: 13px; letter-spacing: .14em; color: rgba(255,255,255,.64); text-transform: uppercase; }
.topnav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topnav a { color: rgba(255,255,255,.72); font-size: 13px; }
.topnav a:hover { color: #fff; }
.topnav .nav-primary { color: #fff; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 7px 13px; white-space: nowrap; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 64px; align-items: end; }
.eyebrow { color: #79b8e4; font-size: 13px; font-weight: 650; letter-spacing: .12em; margin-bottom: 14px; text-transform: uppercase; }
h1 { margin: 0; max-width: 780px; font-size: clamp(38px, 5vw, 64px); line-height: 1.12; font-weight: 620; letter-spacing: -.035em; }
.lede { max-width: 780px; margin-top: 22px; color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.8; }
.hero-meta { min-width: 210px; color: rgba(255,255,255,.68); font-size: 13px; text-align: right; line-height: 1.9; }
.hero-meta .live { display: inline-flex; align-items: center; gap: 7px; color: #a6e4c2; }
.hero-meta .live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #57c98a; box-shadow: 0 0 0 5px rgba(87,201,138,.12); }
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.hero-tag { border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 6px 11px; color: rgba(255,255,255,.78); font-size: 12px; }

/* Summary */
.summary { position: relative; z-index: 2; margin-top: -28px; }
.decision-card { background: var(--card); border: 1px solid rgba(22,50,72,.08); border-radius: 16px; padding: 28px 32px; box-shadow: var(--shadow); display: grid; grid-template-columns: 145px 1fr; gap: 28px; align-items: start; }
.decision-label { color: var(--blue); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.decision-copy { font-size: clamp(20px, 2.3vw, 30px); line-height: 1.45; font-weight: 580; letter-spacing: -.015em; }
.decision-copy b { color: var(--green); }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.metric-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 22px 22px 20px; }
.metric-card .k { color: var(--muted); font-size: 12px; letter-spacing: .04em; }
.metric-card .val { margin-top: 7px; font-size: 30px; line-height: 1.15; font-weight: 650; letter-spacing: -.035em; }
.metric-card .sub { color: var(--muted); font-size: 12.5px; margin-top: 8px; line-height: 1.55; }
.metric-card.emphasis { background: var(--green-soft); border-color: #cde4d7; }

/* Sections */
section.machine { padding: 78px 0; border-bottom: 1px solid var(--line); }
section.machine:nth-of-type(even) { background: rgba(255,255,255,.38); }
.part-head { display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: baseline; margin-bottom: 12px; }
.m-num, .section-kicker { color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
h2 { margin: 0; font-size: clamp(28px, 3vw, 38px); line-height: 1.25; font-weight: 620; letter-spacing: -.025em; }
.m-role { max-width: 840px; margin: 0 0 34px 144px; color: var(--muted); font-size: 15px; }
h3 { margin: 44px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 650; }
h3:first-of-type { margin-top: 0; }
.section-intro { display: grid; grid-template-columns: 120px 1fr; gap: 24px; margin-bottom: 34px; }
.section-intro p { margin: 0; max-width: 860px; color: var(--muted); }

/* Evidence cards */
.evidence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.evidence-card { min-height: 190px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 8px 28px rgba(13,35,54,.04); }
.evidence-card .index { color: var(--blue); font: 700 12px/1 'SF Mono', Menlo, monospace; }
.evidence-card h3 { margin: 18px 0 10px; padding: 0; border: 0; font-size: 20px; }
.evidence-card p { margin: 0; color: var(--muted); font-size: 14px; }
.evidence-card .big { margin-top: 18px; font: 650 28px/1.2 'SF Mono', Menlo, monospace; color: var(--green); }

/* Technical content */
.tablewrap { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 26px rgba(13,35,54,.035); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { padding: 13px 16px; border-bottom: 1px solid var(--line); background: #f7f9fa; color: var(--muted); font-weight: 600; font-size: 12px; letter-spacing: .03em; text-align: left; white-space: nowrap; }
td { padding: 13px 16px; border-bottom: 1px solid #edf0f2; vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td:first-child { width: 160px; color: #53616d; white-space: nowrap; }
tbody tr:hover td, table > tr:hover td { background: #fbfcfc; }
.note { color: var(--muted); font-size: 13px; }
.ok { color: var(--green); }
.warn { color: var(--amber); }
.bad { color: var(--red); }
.explain, .callout { margin-top: 16px; padding: 17px 20px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.68); color: #4f5c67; font-size: 13.5px; line-height: 1.75; }
.explain b, .callout b { color: var(--ink); font-weight: 650; }
.callout { border-left: 4px solid var(--amber); background: var(--amber-soft); }
.callout.okc { border-left-color: var(--green); background: var(--green-soft); }
.kv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kv > div { padding: 20px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.kv .k { color: var(--muted); font-size: 12px; }
.kv .val { margin-top: 6px; font: 650 23px/1.25 'SF Mono', Menlo, monospace; }
.kv .sub { margin-top: 7px; color: var(--muted); font-size: 12.5px; }

/* Architecture */
.architecture { display: grid; gap: 16px; }
.arch-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.arch-node { position: relative; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.arch-node.primary { color: #fff; border-color: transparent; background: linear-gradient(135deg, #123550, #1f587d); box-shadow: var(--shadow); }
.arch-node.recovery { border-color: #cce2d5; background: var(--green-soft); }
.arch-node .node-label { color: var(--blue); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.arch-node.primary .node-label { color: #8cc9ef; }
.arch-node h3 { margin: 8px 0 6px; padding: 0; border: 0; font-size: 20px; }
.arch-node p { margin: 0; color: var(--muted); font-size: 13px; }
.arch-node.primary p { color: rgba(255,255,255,.68); }
.arch-arrow { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--muted); font: 12px/1.5 'SF Mono', Menlo, monospace; }
.arch-arrow::before, .arch-arrow::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.chip { border: 1px solid #d9e0e5; border-radius: 999px; padding: 5px 9px; background: #f6f8f9; color: #42515d; font: 11.5px/1.2 'SF Mono', Menlo, monospace; white-space: nowrap; }
.arch-node.primary .chip { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08); }
.chip.ilo { color: var(--soft); }
.tlayer { padding: 19px 21px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.tlayer.hub { border-color: #ccdfec; background: var(--blue-soft); }
.tname { font-size: 15px; font-weight: 650; }
.tsub { margin-top: 5px; color: var(--muted); font-size: 13px; }
.tlink { padding: 5px 0; color: var(--soft); text-align: center; font: 12px/1.5 'SF Mono', Menlo, monospace; }
.seg3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.seg2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

/* Timeline and branches */
.timeline { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin-top: 28px; }
.timeline-step { position: relative; padding: 36px 16px 18px; border-top: 2px solid #b9ccd9; }
.timeline-step::before { content: ''; position: absolute; top: -7px; left: 16px; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px var(--paper); }
.timeline-step .n { color: var(--blue); font: 700 11px/1 'SF Mono', Menlo, monospace; }
.timeline-step h3 { margin: 9px 0 7px; padding: 0; border: 0; font-size: 15px; }
.timeline-step p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.branch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.branch-card { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.branch-card .trigger { color: var(--amber); font-size: 12px; font-weight: 650; }
.branch-card h3 { margin: 8px 0 7px; padding: 0; border: 0; font-size: 16px; }
.branch-card p { margin: 0; color: var(--muted); font-size: 12.5px; }
.tech-details { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; }
.tech-details > summary { cursor: pointer; list-style: none; padding: 15px 18px; color: #465561; font-size: 13px; font-weight: 650; background: #f8fafb; }
.tech-details > summary::-webkit-details-marker { display: none; }
.tech-details > summary::after { content: '+'; float: right; color: var(--blue); font: 18px/1 monospace; }
.tech-details[open] > summary::after { content: '−'; }
.tech-details .tablewrap { border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.qa-stack { display: grid; gap: 12px; margin-top: 20px; }
.qa-stack .tech-details { margin-top: 0; }
.qa-table td:first-child { width: 260px; color: var(--ink); font-weight: 650; white-space: normal; }
.qa-table td:nth-child(2) { min-width: 440px; }
.qa-table td:last-child { width: 210px; }
.scope-note { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.scope-note::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }

.qa { margin-top: 12px; padding-left: 20px; border-left: 2px solid var(--line); }
.qa .a { padding: 14px 18px; border-radius: 8px; background: var(--blue-soft); }
.disks { font-size: 13px; }

footer { padding: 42px 0 64px; background: #e9edef; color: var(--muted); font-size: 12.5px; }

@media (max-width: 980px) {
  .metric-grid, .kv { grid-template-columns: repeat(2, 1fr); }
  .evidence-grid, .branch-grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: repeat(3, 1fr); row-gap: 20px; }
  .part-head, .section-intro { grid-template-columns: 1fr; gap: 8px; }
  .m-role { margin-left: 0; }
}

@media (max-width: 700px) {
  .wrap { width: min(100% - 36px, 1240px); }
  .site-hero { padding: 20px 0 52px; }
  .topline { margin-bottom: 46px; align-items: flex-start; }
  .topnav { justify-content: flex-end; gap: 12px; }
  .topnav a:not(.nav-primary) { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-meta { min-width: 0; text-align: left; }
  .decision-card { grid-template-columns: 1fr; gap: 10px; padding: 22px; }
  .metric-grid, .kv { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .metric-card, .kv > div { padding: 16px; }
  .metric-card .val { font-size: 24px; }
  section.machine { padding: 54px 0; }
  .evidence-grid, .arch-row, .seg3, .seg2, .branch-grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; margin-left: 8px; }
  .timeline-step { border-top: 0; border-left: 2px solid #b9ccd9; padding: 3px 0 28px 28px; }
  .timeline-step::before { top: 3px; left: -7px; }
  .tablewrap { border-radius: 10px; }
  table { min-width: 700px; }
  td:first-child { width: auto; }
  .mobile-compact table { min-width: 560px; }
  .qa-table { min-width: 820px; }
  .arch-arrow { text-align: center; }
}

@media print {
  body { background: #fff; }
  .site-hero { background: #102b43 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .topnav { display: none; }
  .summary { margin-top: 20px; }
  section.machine { padding: 36px 0; break-inside: avoid; }
  .tablewrap, .metric-card, .arch-node, .branch-card { box-shadow: none; }
  a { color: inherit; }
}