/* Same drawing-sheet look as the v8 diagram (IBM Plex Sans, Plex Mono labels, thin rules, one orange accent), on plain white with no panels; text wraps round the 3D model and the v8 diagram. */
:root {
  --bg: #ffffff; --ink: #1b1f23; --muted: #69727b; --rule: #d9dde1; --line: #22272c;
  --accent: #c2410c;
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--font-sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }
.wrap { max-width: 952px; margin: 0 auto; padding: 22px 16px 30px; display: grid; gap: 14px; }
header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 0 0 10px; border-bottom: 1px solid var(--rule); }
h1 { font: 600 clamp(24px, 3vw, 32px)/1.1 var(--font-sans); margin: 0; letter-spacing: -.01em; }

article { padding: 14px 0 0; }
article::after { content: ""; display: block; clear: both; }
article p { margin: 0 0 1em; text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto; }
.fn { font: 500 .68em/0 var(--font-sans); vertical-align: .55em; margin-left: 1px; }
.fn a { text-decoration: none; padding: 0 1px; }
.fn a:hover { color: var(--accent); }
.math { white-space: nowrap; }

/* 3D model, floated so the text wraps round it; call-outs in a column each side */
article p { max-width: 65ch; }
@media (min-width: 932px) { article p { max-width: min(65ch, calc(100% - 296px)); } }
.v73 { float: right; width: 400px; margin: -4px -8px 14px 32px; }
.stage { position: relative; overflow: hidden; }
#v73 { display: block; width: 100%; height: 640px; background: transparent; --poster-color: transparent; }
.hs { width: 5px; height: 5px; border-radius: 50%; background: var(--line); box-shadow: 0 0 0 1.5px #fff; pointer-events: none; }
.leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.stage:not(.ready) .leaders, .stage:not(.ready) .labels { visibility: hidden; }
.leaders polyline { fill: none; stroke: var(--line); stroke-width: .6; }
.leaders .halo polyline { stroke: #fff; stroke-width: 2.5; }
.labels { position: absolute; inset: 0; pointer-events: none; }
.labels span { position: absolute; transform: translateY(-50%); white-space: nowrap; font: 500 11px/1 var(--font-sans); color: var(--ink); text-shadow: 0 0 3px #fff, 0 0 3px #fff; }

figure { scroll-margin-top: 16px; }
figcaption { font: 400 11.5px/1.4 var(--font-mono); color: var(--muted); text-align: center; margin-top: 4px; }

/* v8 diagram, floated below the model so the later paragraphs wrap round it */
.v8 { float: right; clear: right; width: min(460px, 50%); margin: 6px 0 14px 32px; }
#model { display: block; width: 100%; height: 1000px; border: 0; background: var(--bg); }

footer { border-top: 1px solid var(--rule); padding: 12px 0 0; display: grid; gap: 8px; }
footer ol { margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
footer li { display: grid; grid-template-columns: 22px minmax(0, 1fr); margin-bottom: .3em; text-wrap: pretty; scroll-margin-top: 16px; }
.fn-n { font: 500 12px/1.65 var(--font-mono); color: var(--ink); text-decoration: none; }
.fn-n:hover { color: var(--accent); }
.nw { white-space: nowrap; }
.home { margin-bottom: -6px; font: 400 12px/1.4 var(--font-mono); }
.home a { color: var(--muted); text-decoration: none; }
.home a:hover { color: var(--accent); }
.patent { font: 400 12px/1.4 var(--font-mono); color: var(--muted); }
.patent:hover { color: var(--accent); }

@media (max-width: 860px) {
  .v8 { float: none; width: 100%; max-width: 560px; margin: 4px auto 18px; }
}
@media (max-width: 800px) {
  .v73 { float: none; width: 100%; max-width: 400px; margin: 0 auto 12px; }
  #v73 { height: 560px; }
}
@media (max-width: 420px) {
  .v73 { margin-inline: -16px; width: calc(100% + 32px); max-width: none; }
  .labels span { font-size: 10px; }
}