html { scroll-behavior: smooth; }
body { overflow-x: clip; }

.gd { padding: var(--sec-pad) 0; }
.gd + .gd { border-top: var(--hairline) solid var(--border); }
section.gd:nth-of-type(even) { background: var(--surface); }
.gd .wrap, .gd-hero .wrap { max-width: var(--secw); margin-inline: auto; padding-inline: var(--margin); }
.gd-head { max-width: 70ch; margin-bottom: clamp(20px, 2.6vw, 34px); }
.gd-head .t-h1 { font-size: clamp(25px, 2.9vw, 38px); }
.gd-head .t-lede { margin-top: var(--space-md); }
.gd-prose { max-width: 74ch; }
.gd-prose p, .gd-prose li { font-size: clamp(15.5px, 1.3vw, 17.5px); line-height: 1.62; color: var(--text-2); }
.gd-prose p + p, .gd-prose * + p, .gd-prose p + ul, .gd-prose p + ol { margin-top: var(--space-lg); }
.gd-prose ul, .gd-prose ol { padding-left: 1.2em; }
.gd-prose li + li { margin-top: var(--space-sm); }
.gd-prose h3 { font-family: var(--grotesk); font-weight: 500; font-size: clamp(18px, 1.9vw, 22px); letter-spacing: -0.014em; color: var(--text); margin-top: clamp(28px, 3vw, 40px); }
.gd-prose h3 + p { margin-top: var(--space-sm); }
.gd-prose strong { color: var(--text); font-weight: 600; }
.gd-prose a, .gd-verdict a, .vx-note a { color: var(--signal-text); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.gd-prose code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.88em; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; color: var(--text); }
.gd-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.gd-split > .gd-prose { max-width: none; }
@media (max-width: 900px) { .gd-split { grid-template-columns: 1fr; } }

.gd-hero { position: relative; isolation: isolate; padding: var(--hero-pad) 0 var(--sec-pad); overflow: hidden; }
.gd-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--gd-hero-img, url('/assets/img/heroes/machine-vision.webp')) center/cover no-repeat; }
.gd-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15,17,19,0.66) 0%, rgba(15,17,19,0.78) 48%, rgba(15,17,19,0.96) 100%); }
.gd-hero .kicker { color: rgba(255,255,255,0.82); }
.gd-hero .t-display { color: #fff; margin-top: var(--space-lg); max-width: 18ch; }
.gd-hero .t-display.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gd-hero .t-lede { color: rgba(255,255,255,0.84); max-width: 64ch; margin-top: var(--space-xl); }
.gd-herologos { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(12px, 1.6vw, 20px); margin-top: var(--space-xl); }
.gd-herologos .hl { display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.95); border-radius: 10px; padding: clamp(12px, 1.6vw, 18px) clamp(16px, 2.2vw, 26px); min-height: 3.5rem; }
.gd-herologos .hl img { height: clamp(24px, 2.6vw, 34px); width: auto; max-width: clamp(120px, 16vw, 200px); object-fit: contain; display: block; }
.gd-herologos .hl .hl-word { font-family: var(--grotesk); font-weight: 600; font-size: clamp(16px, 1.8vw, 21px); letter-spacing: -0.01em; color: #17191c; white-space: nowrap; }
.gd-herologos .hl-vs { font-family: var(--sub); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.35); border-radius: 999px; padding: 4px 10px; }
.gd-hero .gd-meta { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: clamp(22px, 3vw, 36px); }
.gd-hero .gd-meta span { font-family: var(--sub); font-size: 12.5px; letter-spacing: 0.04em; color: rgba(255,255,255,0.72); border: var(--hairline) solid rgba(255,255,255,0.24); border-radius: 999px; padding: 7px 14px; }
.gd-crumbs { font-family: var(--sub); font-size: 12.5px; letter-spacing: 0.02em; color: rgba(255,255,255,0.6); margin-bottom: var(--space-lg); }
.gd-crumbs a { color: rgba(255,255,255,0.78); text-decoration: none; }
.gd-crumbs a:hover { text-decoration: underline; }
.gd-crumbs span[aria-hidden] { margin: 0 8px; }

.gd-verdict { background: var(--surface); border: var(--hairline) solid var(--border); border-left: 3px solid var(--signal-text); border-radius: var(--radius-card); padding: clamp(20px, 2.4vw, 32px); }
section.gd:nth-of-type(even) .gd-verdict { background: var(--surface-raised); }
.gd-verdict .t-label { display: block; color: var(--signal-text); margin-bottom: var(--space-sm); }
.gd-verdict p { font-size: clamp(15.5px, 1.35vw, 17.5px); line-height: 1.6; color: var(--text); max-width: 82ch; }
.gd-verdict p + p { margin-top: var(--space-md); }
.gd-verdict p:first-of-type { font-size: clamp(17px, 1.75vw, 21px); line-height: 1.5; letter-spacing: -0.012em; }

.gd-methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.6vw, 20px); }
.gd-methods.three { grid-template-columns: repeat(3, 1fr); }
.gd-methods .m { background: var(--surface-raised); border: var(--hairline) solid var(--border); border-radius: var(--radius-card); padding: clamp(20px, 2.2vw, 28px); border-top: 2px solid var(--signal-text); }
.gd-methods .m h3 { font-family: var(--grotesk); font-weight: 500; font-size: clamp(17px, 1.8vw, 21px); letter-spacing: -0.014em; color: var(--text); }
.gd-methods .m .tag { font-family: var(--sub); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-mute); margin-top: 3px; display: block; }
.gd-methods .m .m-logo-h { margin: 0; }
.gd-methods .m .m-logo-h img { height: 24px; width: auto; max-width: 150px; object-fit: contain; display: block; }
.gd-methods .m p { font-size: 14.5px; line-height: 1.58; color: var(--text-2); margin-top: var(--space-sm); }
.gd-methods .m ul { margin-top: var(--space-sm); padding-left: 1.1em; }
.gd-methods .m li { font-size: 14px; line-height: 1.5; color: var(--text-2); }
.gd-methods .m li + li { margin-top: 4px; }
.gd-methods .m .pc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-md); }
.gd-methods .m .pc div { font-size: 13.5px; line-height: 1.45; }
.gd-methods .m .pc .h { font-family: var(--sub); font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); display: block; margin-bottom: 3px; }
.gd-methods .m .pro { color: var(--text); } .gd-methods .m .con { color: var(--text-2); }
@media (max-width: 1000px) { .gd-methods.three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .gd-methods, .gd-methods.three { grid-template-columns: 1fr; } }

.gd-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: var(--hairline) solid var(--border); border-radius: var(--radius-card); }
table.gd-table { width: 100%; border-collapse: collapse; min-width: 780px; background: var(--surface-raised); font-family: var(--sub); }
.gd-table caption { text-align: left; font-family: var(--sub); font-weight: 600; font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-mute); padding: 14px 16px; background: var(--surface); border-bottom: var(--hairline) solid var(--border); }
.gd-table th, .gd-table td { text-align: left; padding: 13px 16px; border-bottom: var(--hairline) solid var(--border); vertical-align: top; }
.gd-table thead th { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); font-weight: 650; background: var(--surface-raised); }
.gd-table tbody th { font-family: var(--grotesk); font-weight: 500; font-size: 15px; letter-spacing: -0.01em; color: var(--text); }
.gd-table td { font-size: 14px; line-height: 1.5; color: var(--text-2); }
.gd-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.gd-table tbody tr:last-child th, .gd-table tbody tr:last-child td { border-bottom: none; }
.gd-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface) 45%, var(--surface-raised)); }
.gd-table--pick td:nth-child(2) { font-family: var(--grotesk); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: var(--signal-text); white-space: nowrap; }
.gd-scrollhint { font-family: var(--sub); font-size: 12px; color: var(--text-mute); margin-top: var(--space-sm); }

.gd-faq { border-top: var(--hairline) solid var(--border); }
.gd-faq details { border-bottom: var(--hairline) solid var(--border); }
.gd-faq summary { list-style: none; cursor: pointer; padding: var(--space-lg) 40px var(--space-lg) 0; position: relative; font-family: var(--grotesk); font-weight: 500; font-size: clamp(16px, 1.7vw, 19px); letter-spacing: -0.012em; color: var(--text); }
.gd-faq summary::-webkit-details-marker { display: none; }
.gd-faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--text-mute); font-family: var(--sub); }
.gd-faq details[open] summary::after { content: "–"; }
.gd-faq details p { font-size: 15px; line-height: 1.62; color: var(--text-2); margin: 0 0 var(--space-lg); max-width: 76ch; }
.gd-faq details p a { color: var(--signal-text); }

.gd-fit { background: var(--surface-raised); border: var(--hairline) solid var(--border); border-left: 3px solid var(--alert); border-radius: var(--radius-card); padding: clamp(24px, 2.8vw, 40px); }
.gd-fit .t-label { display: block; color: var(--signal-text); margin-bottom: var(--space-sm); }
.gd-fit h2 { font-family: var(--grotesk); font-weight: 500; font-size: clamp(20px, 2.2vw, 27px); letter-spacing: -0.018em; color: var(--text); }
.gd-fit p { font-size: 15.5px; line-height: 1.62; color: var(--text-2); margin-top: var(--space-md); max-width: 74ch; }
.gd-fit p a { color: var(--signal-text); }
.gd-fit .gd-fitlink { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-lg); font-family: var(--sub); font-weight: 600; font-size: 15px; color: var(--signal-text); text-decoration: none; }
.gd-fit .gd-fitlink:hover { text-decoration: underline; }
.gd-note { font-family: var(--sub); font-size: 12.5px; line-height: 1.5; letter-spacing: 0.02em; color: var(--text-mute); margin-top: clamp(24px, 3vw, 40px); max-width: 80ch; }

@media (max-width: 680px) {
  table.gd-table { min-width: 0; }
  .gd-table, .gd-table tbody { display: block; }
  .gd-table caption { display: block; }
  .gd-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .gd-table tbody tr { display: block; padding: 12px 14px; border-bottom: var(--hairline) solid var(--border); }
  .gd-table tbody tr:last-child { border-bottom: none; }
  .gd-table th, .gd-table td { display: block; padding: 0; border-bottom: none; }
  .gd-table td { margin-top: 8px; }
  .gd-table td::before { content: attr(data-l); display: block; font-family: var(--sub); font-weight: 600; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 1px; }
  .gd-table td:not([data-l])::before { content: none; }
  .gd-table--pick td:nth-child(2) { white-space: normal; }
  .gd-scrollhint { display: none; }
}

.vx-stats { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 56px); margin-top: clamp(26px, 3.4vw, 44px); padding-top: clamp(18px, 2vw, 26px); border-top: var(--hairline) solid rgba(255,255,255,0.18); }
.vx-stats div { min-width: 120px; }
.vx-stats b { display: block; font-family: var(--grotesk); font-weight: 500; font-size: clamp(26px, 3.2vw, 40px); letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.vx-stats span { display: block; font-family: var(--sub); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.62); margin-top: 8px; max-width: 22ch; line-height: 1.35; }

.vx-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-lg); }
.vx-toc a { font-family: var(--sub); font-size: 13px; color: var(--text-2); text-decoration: none; border: var(--hairline) solid var(--border); background: var(--surface-raised); border-radius: 999px; padding: 6px 12px; }
.vx-toc a:hover { border-color: var(--border-strong); color: var(--text); }
.vx-toc a b { font-weight: 600; color: var(--text-mute); margin-right: 6px; font-variant-numeric: tabular-nums; }

.vx-fig { margin: clamp(26px, 3vw, 40px) 0 0; background: var(--surface-raised); border: var(--hairline) solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.vx-fig .vx-fig-label { display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; border-bottom: var(--hairline) solid var(--border); background: var(--surface); font-family: var(--sub); font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-mute); }
.vx-fig .vx-fig-label b { color: var(--signal-text); font-weight: 650; font-variant-numeric: tabular-nums; }
.vx-fig .vx-fig-body { padding: clamp(14px, 2vw, 28px); }
.vx-fig svg { display: block; width: 100%; height: auto; }
.vx-fig figcaption { padding: 12px 16px 16px; font-family: var(--sub); font-size: 13.5px; line-height: 1.55; color: var(--text-2); border-top: var(--hairline) solid var(--border); }
.vx-fig figcaption strong { color: var(--text); font-weight: 600; }
.vx-fig.wide { margin-inline: 0; }
.vx-figpair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 20px); }
.vx-figpair .vx-fig { margin-top: 0; }
@media (max-width: 760px) { .vx-figpair { grid-template-columns: 1fr; } }

.vx-svg { --vx-ink: var(--text); --vx-ink-2: var(--text-2); --vx-mute: var(--text-mute); --vx-grid: var(--border); --vx-part: var(--surface-2); --vx-part-2: var(--border-strong); --vx-sunk: var(--surface); --vx-paper: var(--surface-raised); --vx-red: #c8390d; --vx-teal: #2f6f5e; --vx-gold: #c0902c; --vx-blue: #3b6ea5; font-family: var(--sub); }
[data-theme="dark"] .vx-svg, .vx-svg.on-dark { --vx-red: #ef6a43; --vx-teal: #4fb196; --vx-gold: #e2b04a; --vx-blue: #6f9fd6; }
.vx-svg .ln { stroke: var(--vx-ink); stroke-width: 1.2; fill: none; }
.vx-svg .ln-2 { stroke: var(--vx-ink-2); stroke-width: 1; fill: none; }
.vx-svg .ln-mute { stroke: var(--vx-mute); stroke-width: 0.8; fill: none; stroke-dasharray: 3 3; }
.vx-svg .grid { stroke: var(--vx-grid); stroke-width: 0.8; fill: none; }
.vx-svg .part { fill: var(--vx-part); stroke: var(--vx-ink); stroke-width: 1.1; }
.vx-svg .part-2 { fill: var(--vx-part-2); stroke: var(--vx-ink); stroke-width: 1.1; }
.vx-svg .sunk { fill: var(--vx-sunk); stroke: var(--vx-grid); stroke-width: 0.8; }
.vx-svg .paper { fill: var(--vx-paper); }
.vx-svg .red { stroke: var(--vx-red); fill: none; stroke-width: 1.4; }
.vx-svg .red-f { fill: var(--vx-red); }
.vx-svg .teal { stroke: var(--vx-teal); fill: none; stroke-width: 1.4; }
.vx-svg .teal-f { fill: var(--vx-teal); }
.vx-svg .gold { stroke: var(--vx-gold); fill: none; stroke-width: 1.2; }
.vx-svg .gold-f { fill: var(--vx-gold); }
.vx-svg .gold-wash { fill: var(--vx-gold); opacity: 0.16; }
.vx-svg .blue { stroke: var(--vx-blue); fill: none; stroke-width: 1.2; }
.vx-svg .blue-f { fill: var(--vx-blue); }
.vx-svg .blue-wash { fill: var(--vx-blue); opacity: 0.12; }
.vx-svg .red-wash { fill: var(--vx-red); opacity: 0.14; }
.vx-svg .teal-wash { fill: var(--vx-teal); opacity: 0.14; }
.vx-svg .ink-f { fill: var(--vx-ink); }
.vx-svg .dash { stroke-dasharray: 4 3; }
.vx-svg .tx { fill: var(--vx-mute); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.vx-svg .tx-b { fill: var(--vx-ink); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
.vx-svg .tx-ink { fill: var(--vx-ink); font-size: 11px; }
.vx-svg .tx-num { fill: var(--vx-ink); font-family: var(--grotesk); font-size: 22px; letter-spacing: -0.02em; }
.vx-svg .tx-mute { fill: var(--vx-mute); font-size: 10px; }
.vx-svg .tx-red { fill: var(--vx-red); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.vx-svg .tx-teal { fill: var(--vx-teal); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.vx-svg .tx-gold { fill: var(--vx-gold); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.vx-svg .tx-blue { fill: var(--vx-blue); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.vx-svg .mid { text-anchor: middle; } .vx-svg .end { text-anchor: end; }
@media (prefers-reduced-motion: no-preference) {
  .vx-svg .scan { animation: vx-scan 4.8s ease-in-out infinite; }
  .vx-svg .blink { animation: vx-blink 2.4s ease-in-out infinite; }
  @keyframes vx-scan { 0%, 8% { transform: translateX(0); } 50%, 58% { transform: translateX(var(--scan-x, 200px)); } 100% { transform: translateX(0); } }
  @keyframes vx-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
}

.vx-defects { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 20px); }
.vx-defect { background: var(--surface-raised); border: var(--hairline) solid var(--border); border-radius: var(--radius-card); overflow: hidden; display: flex; flex-direction: column; }
.vx-defect .vx-defect-img { aspect-ratio: 16 / 10; background: var(--surface); border-bottom: var(--hairline) solid var(--border); position: relative; }
.vx-defect .vx-defect-img svg { width: 100%; height: 100%; display: block; }
.vx-defect .vx-defect-img .flag { position: absolute; top: 10px; left: 10px; font-family: var(--sub); font-size: 10px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); background: var(--surface-raised); border: var(--hairline) solid var(--border); border-radius: 999px; padding: 3px 8px; }
.vx-defect .vx-defect-txt { padding: clamp(16px, 1.8vw, 22px); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.vx-defect h3 { font-family: var(--grotesk); font-weight: 500; font-size: 17px; letter-spacing: -0.012em; color: var(--text); }
.vx-defect p { font-size: 14px; line-height: 1.55; color: var(--text-2); }
.vx-defect p b { color: var(--text); font-weight: 600; }
.vx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.vx-chips span { font-family: var(--sub); font-size: 11.5px; color: var(--text-2); background: var(--surface); border: var(--hairline) solid var(--border); border-radius: 999px; padding: 3px 9px; }
@media (max-width: 1000px) { .vx-defects { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .vx-defects { grid-template-columns: 1fr; } }

.vx-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: var(--hairline) solid var(--border); border-radius: var(--radius-card); overflow: hidden; background: var(--surface-raised); }
.vx-spec > div { padding: 14px 18px; border-bottom: var(--hairline) solid var(--border); }
.vx-spec > div:nth-child(odd) { border-right: var(--hairline) solid var(--border); }
.vx-spec > div:nth-last-child(-n+2) { border-bottom: none; }
.vx-spec dt { font-family: var(--sub); font-size: 10.5px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); }
.vx-spec dd { margin: 4px 0 0; font-family: var(--grotesk); font-size: 15.5px; letter-spacing: -0.008em; color: var(--text); line-height: 1.4; }
.vx-spec dd small { display: block; font-family: var(--sub); font-size: 12.5px; color: var(--text-2); letter-spacing: 0; margin-top: 2px; }
.vx-spec-cap { font-family: var(--sub); font-size: 12.5px; color: var(--text-mute); margin-top: var(--space-sm); }
@media (max-width: 640px) { .vx-spec { grid-template-columns: 1fr; } .vx-spec > div:nth-child(odd) { border-right: none; } .vx-spec > div:nth-last-child(2) { border-bottom: var(--hairline) solid var(--border); } }

.vx-chain { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); counter-reset: vxstep; border: var(--hairline) solid var(--border); border-radius: var(--radius-card); background: var(--surface-raised); overflow: hidden; }
.vx-chain > li { list-style: none; counter-increment: vxstep; padding: 18px 18px 20px; position: relative; border-right: var(--hairline) solid var(--border); }
.vx-chain > li:last-child { border-right: none; }
.vx-chain > li::before { content: counter(vxstep, decimal-leading-zero); display: block; font-family: var(--sub); font-size: 11px; font-weight: 650; letter-spacing: 0.08em; color: var(--signal-text); }
.vx-chain > li h3 { font-family: var(--grotesk); font-weight: 500; font-size: 16px; letter-spacing: -0.01em; color: var(--text); margin-top: 8px; }
.vx-chain > li p { font-size: 13.5px; line-height: 1.5; color: var(--text-2); margin-top: 6px; }
.vx-chain > li .t { display: block; margin-top: 10px; font-family: var(--sub); font-size: 11.5px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .vx-chain { grid-template-columns: 1fr; } .vx-chain > li { border-right: none; border-bottom: var(--hairline) solid var(--border); } .vx-chain > li:last-child { border-bottom: none; } }

.vx-note { background: var(--surface-raised); border: var(--hairline) solid var(--border); border-radius: var(--radius-card); padding: clamp(18px, 2vw, 26px); margin-top: clamp(22px, 2.6vw, 32px); position: relative; }
section.gd:nth-of-type(odd) .vx-note { background: var(--surface); }
.vx-note .t-label { display: block; color: var(--text-mute); margin-bottom: 8px; }
.vx-note p { font-size: 15px; line-height: 1.62; color: var(--text); max-width: 76ch; }
.vx-note p + p { margin-top: var(--space-md); }

.vx-math { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13.5px; line-height: 1.7; color: var(--text); background: var(--surface-raised); border: var(--hairline) solid var(--border); border-radius: var(--radius-card); padding: 16px 18px; margin-top: var(--space-lg); white-space: pre-wrap; overflow-x: auto; }
section.gd:nth-of-type(odd) .vx-math { background: var(--surface); }
.vx-math .c { color: var(--text-mute); }
.vx-math .r { color: var(--signal-text); font-weight: 600; }

.vx-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border: var(--hairline) solid var(--border); border-radius: var(--radius-card); background: var(--surface-raised); overflow: hidden; }
.vx-calc .in, .vx-calc .out { padding: clamp(18px, 2vw, 26px); }
.vx-calc .in { border-right: var(--hairline) solid var(--border); display: grid; gap: 14px; align-content: start; }
.vx-calc label { display: grid; gap: 6px; font-family: var(--sub); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-mute); }
.vx-calc input, .vx-calc select { font: 500 16px/1.2 var(--grotesk); color: var(--text); background: var(--surface); border: var(--hairline) solid var(--border-strong); border-radius: 8px; padding: 10px 12px; width: 100%; font-variant-numeric: tabular-nums; }
.vx-calc input:focus, .vx-calc select:focus { outline: 2px solid var(--signal); outline-offset: 1px; }
.vx-calc .out { background: var(--surface); display: grid; gap: 14px; align-content: start; }
.vx-calc .out div { border-bottom: var(--hairline) solid var(--border); padding-bottom: 12px; }
.vx-calc .out div:last-child { border-bottom: none; padding-bottom: 0; }
.vx-calc .out span { display: block; font-family: var(--sub); font-size: 11px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-mute); }
.vx-calc .out b { display: block; font-family: var(--grotesk); font-weight: 500; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; margin-top: 4px; }
.vx-calc .out small { display: block; font-family: var(--sub); font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.vx-calc .out .warn b { color: var(--alert); }
@media (max-width: 760px) { .vx-calc { grid-template-columns: 1fr; } .vx-calc .in { border-right: none; border-bottom: var(--hairline) solid var(--border); } }

.vx-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 20px); }
.vx-app { display: flex; flex-direction: column; background: var(--surface-raised); border: var(--hairline) solid var(--border); border-radius: var(--radius-card); overflow: hidden; text-decoration: none; color: inherit; transition: border-color .2s ease, transform .2s ease; }
.vx-app:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.vx-app .vx-app-img { aspect-ratio: 16 / 9; background: var(--surface); border-bottom: var(--hairline) solid var(--border); }
.vx-app .vx-app-img svg { width: 100%; height: 100%; display: block; }
.vx-app .vx-app-txt { padding: clamp(16px, 1.8vw, 22px); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.vx-app .k { font-family: var(--sub); font-size: 11px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal-text); }
.vx-app h3 { font-family: var(--grotesk); font-weight: 500; font-size: 19px; letter-spacing: -0.014em; color: var(--text); }
.vx-app p { font-size: 14px; line-height: 1.55; color: var(--text-2); }
.vx-app .go { font-family: var(--sub); font-size: 13.5px; font-weight: 600; color: var(--signal-text); margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .vx-app, .vx-app:hover { transition: none; transform: none; } }
@media (max-width: 1000px) { .vx-apps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .vx-apps { grid-template-columns: 1fr; } }

.vx-next { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 18px); }
.vx-next a { display: block; background: var(--surface-raised); border: var(--hairline) solid var(--border); border-radius: var(--radius-card); padding: 18px 20px; text-decoration: none; color: inherit; }
.vx-next a:hover { border-color: var(--border-strong); }
.vx-next .k { font-family: var(--sub); font-size: 11px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); }
.vx-next b { display: block; font-family: var(--grotesk); font-weight: 500; font-size: 16.5px; letter-spacing: -0.01em; color: var(--text); margin-top: 6px; line-height: 1.3; }
@media (max-width: 760px) { .vx-next { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } }

.vx-fig-body { background-color: var(--surface-raised); background-image: radial-gradient(color-mix(in srgb, var(--border) 70%, transparent) 0.9px, transparent 1px); background-size: 18px 18px; background-position: 9px 9px; }
.vx-fig .vx-fig-label::before { content: ""; width: 7px; height: 7px; border: 1.4px solid var(--signal-text); transform: rotate(45deg); align-self: center; margin-right: -2px; flex: none; }
.vx-defs .s-part-a { stop-color: var(--surface-raised); } .vx-defs .s-part-b { stop-color: var(--surface-2); }
.vx-defs .s-metal-a { stop-color: color-mix(in srgb, var(--surface-2) 70%, #8a929c); } .vx-defs .s-metal-b { stop-color: var(--surface-raised); }
.vx-defs .s-metal-c { stop-color: var(--surface-2); } .vx-defs .s-metal-d { stop-color: color-mix(in srgb, var(--surface-2) 55%, #7d858f); }
.vx-defs .s-dark-a { stop-color: #3a3f47; } .vx-defs .s-dark-b { stop-color: #23262b; } .vx-defs .s-dark-c { stop-color: #15171a; }
.vx-defs .s-glass-a { stop-color: #6f9fd6; } .vx-defs .s-glass-b { stop-color: #1d2c3f; }
.vx-defs .s-gold { stop-color: #c0902c; } .vx-defs .s-red { stop-color: #c8390d; } .vx-defs .s-blue { stop-color: #3b6ea5; }
.vx-defs .s-paper { stop-color: var(--surface-raised); }
.vx-defs .p-hatch { stroke: var(--text-mute); stroke-width: 0.7; opacity: 0.55; }
.vx-defs .p-hatch-red { stroke: #c8390d; stroke-width: 0.8; opacity: 0.6; }
.vx-defs .p-dot { fill: var(--text-mute); opacity: 0.35; }
.vx-defs .p-pix { stroke: var(--border-strong); stroke-width: 0.6; fill: none; }

.vx-defs .k-dark { fill: url(#vx-g-dark); stroke: #111317; stroke-width: 0.8; }
.vx-defs .k-dark-line { fill: none; stroke: #23262b; stroke-width: 5; stroke-linecap: round; }
.vx-defs .k-metal { fill: url(#vx-g-metal); stroke: #5d646d; stroke-width: 0.7; }
.vx-defs .k-glass { fill: url(#vx-g-glass); stroke: #111317; stroke-width: 0.6; }
.vx-defs .k-hi { fill: #ffffff; opacity: 0.14; }
.vx-defs .k-knurl { stroke: #5d646d; stroke-width: 0.6; fill: none; }
.vx-defs .k-knurl-l { stroke: #5d646d; stroke-width: 0.9; fill: none; }
.vx-defs .k-led { fill: #e2b04a; } .vx-defs .k-led-g { fill: #4fb196; } .vx-defs .k-gold { fill: #f1cf7a; }
.vx-defs .k-red { fill: #ef6a43; }
.vx-defs .k-diffuser { fill: #f6e3b4; stroke: #c0902c; stroke-width: 0.6; }
.vx-defs .k-dome-in { fill: url(#vx-g-dome); stroke: none; }
.vx-defs .k-sunk { fill: var(--surface-raised); stroke: #23262b; stroke-width: 1; }
.vx-defs .k-sunk-dark { fill: #2c3036; stroke: #111317; stroke-width: 0.5; }
.vx-defs .k-robot { fill: #e9a23b; stroke: #8a5a12; stroke-width: 0.9; }
.vx-defs .k-link { stroke: #e9a23b; stroke-width: 15; stroke-linecap: round; fill: none; }
.vx-defs .k-link-2 { stroke: #e9a23b; stroke-width: 11; stroke-linecap: round; fill: none; }
.vx-defs .k-link-3 { stroke: #5d646d; stroke-width: 6; stroke-linecap: round; fill: none; }
.vx-defs .k-joint { fill: #2a2d33; stroke: #f1cf7a; stroke-width: 1.4; }

.vx-svg .solid { fill: url(#vx-g-part); stroke: var(--vx-ink); stroke-width: 1.2; }
.vx-svg .metal { fill: url(#vx-g-metal); stroke: var(--vx-ink); stroke-width: 1.2; }
.vx-svg .section { fill: url(#vx-hatch); stroke: var(--vx-ink); stroke-width: 1.2; }
.vx-svg .section-x { fill: url(#vx-hatch-x); stroke: var(--vx-ink); stroke-width: 1.2; }
.vx-svg .section-red { fill: url(#vx-hatch-red); stroke: var(--vx-red); stroke-width: 1.2; }
.vx-svg .stipple { fill: url(#vx-stipple); stroke: none; }
.vx-svg .pixels { fill: url(#vx-pixels); stroke: none; }
.vx-svg .beam { fill: url(#vx-g-beam); stroke: none; }
.vx-svg .beam-up { fill: url(#vx-g-beam-up); stroke: none; }
.vx-svg .beam-h { fill: url(#vx-g-beam-h); stroke: none; }
.vx-svg .cone { fill: url(#vx-g-cone); stroke: var(--vx-blue); stroke-width: 0.8; stroke-dasharray: 4 3; }
.vx-svg .laser-sheet { fill: url(#vx-g-laser); stroke: none; }
.vx-svg .glow { fill: url(#vx-g-glow); stroke: none; }
.vx-svg .glow-red { fill: url(#vx-g-glow-red); stroke: none; }
.vx-svg .heat { fill: url(#vx-g-heat); stroke: none; }
.vx-svg .shadow { filter: url(#vx-shadow); }
.vx-svg .soft { filter: url(#vx-soft); }
.vx-svg .card { fill: var(--vx-paper); stroke: var(--vx-grid); stroke-width: 1; filter: url(#vx-shadow); }
.vx-svg .card-gold { fill: color-mix(in srgb, var(--vx-gold) 10%, var(--vx-paper)); stroke: var(--vx-gold); stroke-width: 1.2; filter: url(#vx-shadow); }
.vx-svg .card-red { fill: color-mix(in srgb, var(--vx-red) 8%, var(--vx-paper)); stroke: var(--vx-red); stroke-width: 1.2; filter: url(#vx-shadow); }
.vx-svg .card-teal { fill: color-mix(in srgb, var(--vx-teal) 9%, var(--vx-paper)); stroke: var(--vx-teal); stroke-width: 1.2; filter: url(#vx-shadow); }
.vx-svg .card-blue { fill: color-mix(in srgb, var(--vx-blue) 8%, var(--vx-paper)); stroke: var(--vx-blue); stroke-width: 1.2; filter: url(#vx-shadow); }
.vx-svg .card-dark { fill: url(#vx-g-dark); stroke: #111317; stroke-width: 1; filter: url(#vx-shadow); }
.vx-svg .tx-on-dark { fill: #f3f4f6; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
.vx-svg .tx-on-dark-mute { fill: rgba(243,244,246,0.66); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; }

.vx-svg .dim { stroke: var(--vx-blue); stroke-width: 0.9; fill: none; marker-start: url(#vx-arr); marker-end: url(#vx-arr); }
.vx-svg .dim-tick { stroke: var(--vx-blue); stroke-width: 0.9; fill: none; marker-start: url(#vx-dimtick); marker-end: url(#vx-dimtick); }
.vx-svg .ext { stroke: var(--vx-blue); stroke-width: 0.6; fill: none; opacity: 0.7; }
.vx-svg .arrow { marker-end: url(#vx-arr); }
.vx-svg .arrow2 { marker-start: url(#vx-arr); marker-end: url(#vx-arr); }
.vx-svg .lead { stroke: var(--vx-ink-2); stroke-width: 0.8; fill: none; marker-start: url(#vx-dot); }
.vx-svg .ray { stroke: var(--vx-gold); stroke-width: 1.3; fill: none; marker-end: url(#vx-arr); }
.vx-svg .ray-red { stroke: var(--vx-red); stroke-width: 1.3; fill: none; marker-end: url(#vx-arr); }
.vx-svg .ray-blue { stroke: var(--vx-blue); stroke-width: 1.2; fill: none; marker-end: url(#vx-arr); }
.vx-svg .flow { stroke: var(--vx-ink-2); stroke-width: 1.2; fill: none; marker-end: url(#vx-arr); }
.vx-svg .ground { stroke: var(--vx-ink); stroke-width: 1.2; }
.vx-svg .ground-hatch { fill: url(#vx-hatch); stroke: none; opacity: 0.8; }
.vx-svg .axis { stroke: var(--vx-mute); stroke-width: 0.7; stroke-dasharray: 10 3 2 3; fill: none; }
.vx-svg .badge circle { fill: var(--vx-ink); }
.vx-svg .badge text { fill: var(--vx-paper); font-size: 10px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.vx-svg .badge.gold circle { fill: var(--vx-gold); } .vx-svg .badge.red circle { fill: var(--vx-red); } .vx-svg .badge.blue circle { fill: var(--vx-blue); } .vx-svg .badge.teal circle { fill: var(--vx-teal); }
.vx-svg .pill { fill: var(--vx-paper); stroke: var(--vx-grid); stroke-width: 1; }
.vx-svg .tx-cap { fill: var(--vx-ink); font-family: var(--grotesk); font-size: 15px; letter-spacing: -0.01em; }
.vx-svg .tx-sm { fill: var(--vx-ink-2); font-size: 9.5px; }
.vx-svg .tx-greek { text-transform: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .vx-svg .pulse { animation: vx-pulse 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .vx-svg .flowing { stroke-dasharray: 6 6; animation: vx-flow 1.6s linear infinite; }
  @keyframes vx-pulse { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.06); } }
  @keyframes vx-flow { to { stroke-dashoffset: -24; } }
}
.vx-svg .tx-dim { fill: var(--vx-blue); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.vx-svg .tx-dim-red { fill: var(--vx-red); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vx-svg .tx-dim-ink { fill: var(--vx-ink); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vx-svg .badge text { stroke: none; }
.vx-app .vx-app-img { position: relative; }
.vx-app .vx-app-img .flag { position: absolute; top: 10px; left: 10px; font-family: var(--sub); font-size: 10px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); background: var(--surface-raised); border: var(--hairline) solid var(--border); border-radius: 999px; padding: 3px 8px; }
.vx-svg .tx-red.on-dark { fill: #ff8a66; paint-order: stroke; stroke: #15171a; stroke-width: 3px; stroke-linejoin: round; }