/* Long-form articles: rounded cards, wide palette, Unbounded display titles.
   Text colors follow the site theme; the cards switch with html[data-landing-theme=dark]. */
@font-face{font-family:Unbounded;font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/unbounded-800-latin-ext-c623718098.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Unbounded;font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/unbounded-800-latin-fe6d4ea7ed.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
.art {
  --a1: #c2f750; --a2: #6fe3c4; --a3: #8f7bff; --a4: #ff6b8b;
  --on-a: #12140f;
  --font-display: Unbounded, Inter, system-ui, sans-serif;
  --display-weight: 800; --display-track: -.03em; --poster-size: clamp(44px, 5.8vw, 88px); --h2-size: clamp(28px, 3.1vw, 44px);
  --grad: linear-gradient(115deg, var(--a1), var(--a2));
  --grad-text: linear-gradient(100deg, #5d8a00, #138a6e);
  --ink: var(--landing-ink); --mut: var(--landing-muted);
  --card: #ffffff; --card2: #f3f2ec; --stroke: #1619161a;
  --glow: .22;
  --r: 26px; --r-sm: 16px;
  --mono: Inter, system-ui, sans-serif;
  /* legacy names still read by the figure classes */
  --acid: var(--a1); --acid-ink: var(--on-a); --line: var(--stroke); --panel: var(--card); --soft: var(--card2);
  overflow-x: clip;
}
html[data-landing-theme=dark] .art {
  --card: #1a1d19; --card2: #22261f; --stroke: #ffffff14;
  --grad-text: linear-gradient(100deg, var(--a1), var(--a2));
  --glow: .26;
}
.art a { color: inherit; }
.art p a, .art li a, .art td a { text-decoration-color: color-mix(in srgb, var(--a3) 70%, transparent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.art p a:hover, .art li a:hover { text-decoration-color: var(--a2); }
.art h1, .art h2 { font-family: var(--font-display); }

/* Hero: ambient color blobs behind a big display title */
.art-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding: 22px 0 0; font-size: 12.5px; font-weight: 600; color: var(--mut); }
.art-meta .breadcrumb { padding: 7px 14px; border-radius: 999px; background: var(--card2); }
.art-meta a { text-decoration: none; }
.art-meta a:hover { color: var(--ink); }
.art-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; padding: 64px 0 72px; }
.art-hero::before { content: ''; position: absolute; z-index: -1; inset: -40px -20vw 0 -10vw; opacity: var(--glow); filter: blur(60px);
  background: radial-gradient(38% 52% at 12% 30%, var(--a1), transparent 70%), radial-gradient(34% 48% at 48% 72%, var(--a3), transparent 70%), radial-gradient(30% 46% at 88% 22%, var(--a2), transparent 70%), radial-gradient(26% 40% at 78% 88%, var(--a4), transparent 70%); }
.art-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 26px; font-size: 12.5px; font-weight: 700; color: var(--mut); }
.art-kicker b { padding: 6px 13px; border-radius: 999px; background: var(--grad); color: var(--on-a); font-weight: 800; }
.art-poster { font-size: var(--poster-size); font-weight: var(--display-weight); line-height: .95; letter-spacing: var(--display-track); margin: 0 0 30px; text-transform: none; }
.art-poster span { display: block; }
/* Wider first line ("Windows 10."): a smaller size keeps it on one line in the hero column. */
.art-poster.is-long { font-size: calc(var(--poster-size) * .86); }
.art-poster span:last-child { width: fit-content; padding-right: .06em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: italic; text-decoration: line-through; text-decoration-color: var(--a4); text-decoration-thickness: .08em; }
.art-lede { max-width: 560px; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.6; margin-bottom: 30px; }
.art-cta { display: inline-flex; align-items: center; gap: 18px; min-height: 58px; padding: 5px 5px 5px 26px; border-radius: 999px; background: var(--grad); color: var(--on-a) !important; font-size: 14px; font-weight: 800; text-decoration: none; box-shadow: 0 14px 40px -12px color-mix(in srgb, var(--a3) 70%, transparent); }
.art-cta span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--on-a); color: var(--a1); font-size: 20px; }
.art-fine { margin-top: 14px; font-size: 13px; color: var(--mut); max-width: 440px; }
.art-byline { display: flex; align-items: center; gap: 10px; margin-top: 26px; font-size: 13px; color: var(--mut); }
.art-byline::before { content: ''; width: 28px; height: 28px; border-radius: 50%; background: var(--grad); }
.art-byline strong { color: var(--ink); font-weight: 700; }

/* Spec sheet: glass card with a gradient rim */
.art-spec { position: relative; border-radius: var(--r); background: color-mix(in srgb, var(--card) 82%, transparent); backdrop-filter: blur(18px); box-shadow: 0 30px 80px -30px #0008; }
.art-spec::before { content: ''; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.art-spec-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px 14px; }
.art-spec-head strong { font-family: var(--font-display); font-size: 28px; font-weight: var(--display-weight); letter-spacing: var(--display-track); }
.art-spec-head span { padding: 5px 10px; border-radius: 999px; background: var(--card2); font: 600 11px/1.3 var(--mono); color: var(--mut); text-transform: uppercase; letter-spacing: .06em; }
.art-spec dl { margin: 0; padding: 4px 12px 14px; }
.art-spec dl > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 10px 12px; border-radius: 12px; font-size: 14px; }
.art-spec dl > div:nth-child(odd) { background: color-mix(in srgb, var(--card2) 70%, transparent); }
.art-spec dt { font: 700 11px/1.9 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--a3); }
html[data-landing-theme=dark] .art-spec dt { color: var(--a2); }
.art-spec dd { margin: 0; font-weight: 600; }
.art-spec .is-warn { background: color-mix(in srgb, var(--a4) 16%, transparent) !important; }
.art-spec .is-warn dt { color: var(--a4); }
.art-spec .is-warn dd::before { content: '!'; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: var(--a4); color: var(--on-a); font-size: 12px; font-weight: 900; vertical-align: 1px; }

/* Thirty-second summary: one color per card */
.art-tldr-label { margin: 8px 0 16px; font: 700 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.art-tldr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.art-tldr > div { --c: var(--a1); position: relative; overflow: hidden; padding: 24px 22px 26px; border-radius: var(--r-sm); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 22%, var(--card)) 0%, var(--card) 62%); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.art-tldr > div:nth-child(2) { --c: var(--a2); } .art-tldr > div:nth-child(3) { --c: var(--a4); } .art-tldr > div:nth-child(4) { --c: var(--a3); }
.art-tldr u { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: 18px; border-radius: 12px; background: var(--c); color: var(--on-a); font: 800 13px/1 var(--mono); text-decoration: none; }
.art-tldr strong { display: block; margin-bottom: 8px; font-family: var(--font-display); font-size: 21px; font-weight: var(--display-weight); line-height: 1.1; letter-spacing: var(--display-track); }
.art-tldr p { font-size: 14px; line-height: 1.55; color: var(--mut); }

/* Reading layout */
.art-body { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 56px; padding: 72px 0 24px; }
.art-toc { position: sticky; top: 104px; align-self: start; padding: 18px 12px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--stroke); }
.art-toc p { margin: 0 10px 12px; font: 700 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.art-toc ol { list-style: none; margin: 0; padding: 0; }
.art-toc a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 13px; font-weight: 600; line-height: 1.3; text-decoration: none; color: var(--mut); transition: background .15s, color .15s; }
.art-toc a span { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--card2); font: 700 10.5px/1 var(--mono); }
.art-toc a:hover { background: var(--card2); color: var(--ink); }
.art-toc a:hover span { background: var(--grad); color: var(--on-a); }
.art-main { min-width: 0; }
.art-sec { padding-bottom: 88px; scroll-margin-top: 100px; }
.art-num { display: inline-block; margin-bottom: 16px; padding: 5px 12px; border-radius: 999px; background: var(--grad); color: var(--on-a); font: 800 12px/1.2 var(--mono); }
.art-sec h2 { max-width: 860px; margin-bottom: 24px; font-size: var(--h2-size); font-weight: var(--display-weight); line-height: 1.02; letter-spacing: var(--display-track); }
.art-sec h3 { margin: 34px 0 12px; font-family: var(--font-display); font-size: 22px; font-weight: var(--display-weight); letter-spacing: var(--display-track); }
.art-sec > p, .art-sec > ul, .art-sec > ol { max-width: 70ch; }
.art-sec > p { font-size: 17px; line-height: 1.75; margin-bottom: 18px; }
.art-sec > p.art-answer { position: relative; padding: 20px 24px 20px 64px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--a2) 10%, var(--card)); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; font-weight: 600; letter-spacing: -.01em; margin-bottom: 26px; }
.art-sec > p.art-answer::before { content: '→'; position: absolute; left: 18px; top: 18px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--grad); color: var(--on-a); font-size: 16px; font-weight: 800; }
.art-sec > ul { padding: 0; list-style: none; margin: 0 0 22px; display: grid; gap: 10px; }
.art-sec > ul > li { position: relative; padding: 16px 18px 16px 50px; border-radius: 14px; background: var(--card); border: 1px solid var(--stroke); font-size: 16px; line-height: 1.6; }
.art-sec > ul > li::before { content: ''; position: absolute; left: 18px; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 14px color-mix(in srgb, var(--a2) 60%, transparent); }
.art-sec strong { font-weight: 700; }

/* Figures: SVG classes recolored, shapes rounded */
.art-fig { margin: 36px 0 40px; border-radius: var(--r); background: var(--card); border: 1px solid var(--stroke); overflow: hidden; }
.art-fig-head { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 18px 24px; }
.art-fig-head b { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 15px; font-weight: var(--display-weight); letter-spacing: -.01em; }
.art-fig-head b::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 12px var(--a2); }
.art-fig-head i { padding: 4px 10px; border-radius: 999px; background: var(--card2); font: 500 11px/1.4 var(--mono); font-style: normal; color: var(--mut); }
.art-fig-body { margin: 0 14px; padding: 24px 14px 18px; border-radius: var(--r-sm); background: var(--card2); overflow-x: auto; }
.art-fig svg { display: block; width: 100%; min-width: 620px; height: auto; font-family: Inter, system-ui, sans-serif; }
.art-fig figcaption { padding: 18px 24px 22px; max-width: 80ch; font-size: 14px; line-height: 1.6; color: var(--mut); }
.art-fig figcaption b { color: var(--ink); }
.art-fig picture, .art-fig-shot { display: block; }
.art-fig-shot { margin: 0 14px; padding: 18px; border-radius: var(--r-sm); background: var(--grad); }
.art-fig-shot img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 20px 50px -18px #000a; }
.fg-ink { fill: var(--ink); } .fg-mut { fill: var(--mut); } .fg-bg { fill: var(--card); } .fg-panel { fill: var(--card); }
.fg-soft { fill: var(--card); } .fg-acid { fill: var(--a1); } .fg-acidink { fill: var(--on-a); } .fg-line { fill: var(--stroke); }
.fs-ink { stroke: var(--ink); } .fs-mut { stroke: var(--mut); } .fs-line { stroke: var(--stroke); } .fs-acid { stroke: var(--a1); }
.fg-none { fill: none; }
.ft-num { font-variant-numeric: tabular-nums; }
/* Small figure captions, scales and step numbers: same voice as the other article labels. */
.ft-label { font-weight: 700; letter-spacing: .07em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.art-fig rect { rx: 7px; }
.art-fig rect.fs-ink { stroke: transparent; }
.art-fig rect.fg-soft { fill: color-mix(in srgb, var(--a4) 34%, var(--card)); }
.art-fig rect.fg-ink { fill: var(--a2); }
.art-fig rect.fg-line { fill: color-mix(in srgb, var(--a3) 45%, var(--card)); }
.art-fig rect.fg-bg.fs-ink { fill: color-mix(in srgb, var(--a3) 30%, var(--card)); }

/* Comparison matrix */
.art-tbl-wrap { margin: 30px 0 14px; overflow-x: auto; padding: 8px; border-radius: var(--r); background: var(--card); border: 1px solid var(--stroke); }
.art-tbl { width: 100%; min-width: 700px; border-collapse: separate; border-spacing: 0 4px; font-size: 14px; }
.art-tbl th, .art-tbl td { padding: 14px 14px; text-align: left; vertical-align: middle; }
.art-tbl thead th { font: 700 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); padding-bottom: 8px; }
.art-tbl tbody tr > * { background: var(--card2); }
.art-tbl tbody tr > :first-child { border-radius: 12px 0 0 12px; }
.art-tbl tbody tr > :last-child { border-radius: 0 12px 12px 0; }
.art-tbl tbody th { font-family: var(--font-display); font-size: 15.5px; font-weight: var(--display-weight); letter-spacing: -.02em; white-space: nowrap; }
.art-tbl tbody th small { display: block; font-family: Inter, system-ui, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--mut); }
.art-tbl tr.is-focus > * { background: color-mix(in srgb, var(--a1) 18%, var(--card2)); }
.art-tbl tr.is-focus th::after { content: 'focus'; display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: var(--grad); color: var(--on-a); font: 800 9.5px/1.4 var(--mono); text-transform: uppercase; vertical-align: 2px; }
.art-meter { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 8px; }
.art-meter i { width: 12px; height: 12px; border-radius: 50%; background: var(--stroke); }
.art-meter i.on { background: var(--a2); }
.art-meter i.on:nth-child(2) { background: color-mix(in srgb, var(--a2) 50%, var(--a3)); }
.art-meter i.on:nth-child(3) { background: var(--a3); }
.art-meter i.on:nth-child(4) { background: var(--a4); }
.art-note { font-size: 13px; color: var(--mut); max-width: 70ch; }

/* Statement band: the loudest block on the page */
.art-statement { position: relative; overflow: hidden; margin: 8px 0 36px; padding: 40px 36px; border-radius: var(--r); background: var(--grad); background-size: 180% 180%; color: var(--on-a); box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--a3) 80%, transparent); }
.art-statement::after { content: ''; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; border: 40px solid #ffffff2e; }
.art-statement u { display: inline-block; margin-bottom: 16px; padding: 5px 12px; border-radius: 999px; background: var(--on-a); color: var(--a1); font: 800 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.art-statement p { position: relative; z-index: 1; font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 44px); font-weight: var(--display-weight); line-height: 1.02; letter-spacing: var(--display-track); max-width: 900px; }
.art-statement p + p { margin-top: 16px; font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 600; line-height: 1.5; letter-spacing: 0; max-width: 68ch; }

/* Decision cards */
.art-decide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 30px 0 36px; }
.art-decide > div { --c: var(--a2); padding: 24px 24px 26px; border-radius: var(--r-sm); background: var(--card); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.art-decide > div:nth-child(3) { --c: var(--a3); } .art-decide > div:nth-child(4) { --c: var(--a4); }
.art-decide u { display: inline-block; margin-bottom: 14px; padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--ink); font: 700 10.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.art-decide strong { display: block; margin-bottom: 10px; font-family: var(--font-display); font-size: 22px; font-weight: var(--display-weight); line-height: 1.1; letter-spacing: var(--display-track); }
.art-decide p { font-size: 14.5px; line-height: 1.6; color: var(--mut); }
.art-decide .is-hi { background: var(--grad); border-color: transparent; color: var(--on-a); }
.art-decide .is-hi u { background: var(--on-a); color: var(--a1); }
.art-decide .is-hi p { color: inherit; opacity: .85; }

/* Steps and timeline */
.art-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 30px 0; }
.art-steps > div { padding: 22px 22px 24px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--stroke); }
.art-steps b { display: block; width: fit-content; margin-bottom: 12px; font-family: var(--font-display); font-size: 64px; font-weight: var(--display-weight); line-height: .9; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.art-steps strong { display: block; margin-bottom: 8px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.art-steps p { font-size: 14.5px; line-height: 1.6; color: var(--mut); }
.art-timeline { position: relative; list-style: none; margin: 28px 0 32px; padding: 0; max-width: 70ch; }
.art-timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 18px; width: 3px; border-radius: 3px; background: linear-gradient(var(--a1), var(--a2), var(--a3), var(--a4)); }
.art-timeline li { position: relative; padding: 0 0 22px 34px; }
.art-timeline li::before { content: ''; position: absolute; left: 0; top: 4px; width: 17px; height: 17px; border-radius: 50%; background: var(--card); border: 3px solid var(--a2); }
.art-timeline li.is-now::before { background: var(--a1); border-color: var(--a1); box-shadow: 0 0 0 6px color-mix(in srgb, var(--a1) 25%, transparent), 0 0 22px var(--a1); }
.art-timeline time { display: inline-block; margin-bottom: 4px; font: 700 11px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.art-timeline strong { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.art-timeline p { font-size: 15px; line-height: 1.6; color: var(--mut); margin-top: 4px; }

/* FAQ and closing band */
.art-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; padding: 72px 0; }
.art-faq h2 { font-size: clamp(44px, 5.6vw, 84px); font-weight: var(--display-weight); line-height: .95; letter-spacing: var(--display-track); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
.art-faq > div { display: grid; gap: 10px; }
.art-faq details { border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--stroke); transition: border-color .2s; }
.art-faq details[open] { border-color: color-mix(in srgb, var(--a2) 50%, transparent); }
.art-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 18px 20px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.art-faq summary::-webkit-details-marker { display: none; }
.art-faq summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--card2); font-size: 18px; line-height: 1; font-weight: 600; transition: transform .2s, background .2s; }
.art-faq details[open] summary::after { transform: rotate(45deg); background: var(--grad); color: var(--on-a); }
.art-faq details p { padding: 0 24px 20px 20px; font-size: 15px; line-height: 1.65; color: var(--mut); }
.art-final { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: end; margin-bottom: 72px; padding: 64px 52px; border-radius: calc(var(--r) + 6px); background: #0d0f0c; color: #f4f5ee; }
.art-final::before { content: ''; position: absolute; z-index: -1; inset: 0; opacity: .75; filter: blur(50px);
  background: radial-gradient(40% 60% at 10% 100%, var(--a1), transparent 70%), radial-gradient(35% 55% at 55% 0%, var(--a3), transparent 70%), radial-gradient(35% 60% at 100% 80%, var(--a4), transparent 70%), radial-gradient(25% 40% at 80% 10%, var(--a2), transparent 70%); }
.art-final h2 { font-size: clamp(46px, 6.4vw, 100px); font-weight: var(--display-weight); line-height: .95; letter-spacing: var(--display-track); }
.art-final p { margin-bottom: 24px; font-size: 16px; line-height: 1.6; opacity: .9; }
.art-sources { padding: 0 0 72px; font-size: 13px; color: var(--mut); }
.art-sources p { margin-bottom: 12px; font: 700 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.art-sources ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 48px; }
.art-sources li { margin-bottom: 6px; break-inside: avoid; }
.art-sources li::marker { color: var(--a3); font-weight: 700; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .art-cta, .art-tldr > div, .art-decide > div, .art-steps > div { transition: transform .22s, box-shadow .22s; }
  .art-cta:hover { transform: translateY(-2px) scale(1.02); }
  .art-tldr > div:hover, .art-decide > div:hover, .art-steps > div:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--a3) 60%, transparent); }
  .art-statement { animation: art-shift 9s ease-in-out infinite alternate; }
  @keyframes art-shift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
}
@media (max-width: 1100px) {
  .art-hero { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .art-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .art-toc { position: static; margin-bottom: 48px; }
  .art-tldr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .art-faq, .art-final { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 680px) {
  .art { --r: 20px; --r-sm: 14px; }
  .art-hero { padding: 40px 0 48px; }
  .art-poster { font-size: clamp(38px, 12vw, 80px); }
  .art-poster.is-long { font-size: clamp(32px, 10.3vw, 68px); }
  .art-spec dl > div { grid-template-columns: 1fr; gap: 2px; }
  .art-tldr { grid-template-columns: minmax(0, 1fr); }
  .art-sec > p { font-size: 16px; }
  .art-sec > p.art-answer { padding: 18px 18px 18px 56px; }
  .art-fig-body, .art-fig-shot { margin: 0 8px; padding: 14px 8px 10px; }
  .art-fig-head, .art-fig figcaption { padding-left: 16px; padding-right: 16px; }
  .art-decide, .art-steps { grid-template-columns: minmax(0, 1fr); }
  .art-statement { padding: 28px 22px; }
  .art-final { padding: 40px 24px; }
  .art-sources ol { columns: 1; }
}

/* ---- Restraint pass: lime leads, no decorative dots or arrows ---- */
.art p a, .art li a, .art td a { text-decoration-color: color-mix(in srgb, var(--a1) 70%, transparent); }
.art p a:hover, .art li a:hover { text-decoration-color: var(--a1); }
.art-hero::before { background: radial-gradient(40% 55% at 10% 30%, var(--a1), transparent 70%), radial-gradient(34% 50% at 85% 25%, var(--a2), transparent 70%); opacity: calc(var(--glow) * .8); }
.art-kicker b, .art-cta, .art-num { background: var(--a1); }
.art-poster span:last-child { text-decoration-color: var(--mut); }
.art-cta { gap: 0; padding: 0 28px; box-shadow: none; }
.art-cta span, .art-byline::before, .art-fig-head b::before, .art-tbl tr.is-focus th::after, .art-statement::after { display: none; }
.art-spec::before { background: color-mix(in srgb, var(--a1) 45%, var(--stroke)); padding: 1px; }
.art-spec dt, html[data-landing-theme=dark] .art-spec dt { color: var(--mut); }
.art-tldr > div, .art-tldr > div:nth-child(n) { --c: var(--a1); background: var(--card); border-color: var(--stroke); }
.art-tldr u { width: auto; height: auto; margin-bottom: 14px; background: none; color: var(--a1); font-size: 12px; }
html:not([data-landing-theme=dark]) .art-tldr u { color: #4f7300; }
.art-toc a span { width: auto; background: none; }
.art-toc a:hover span { background: none; color: var(--a1); }
.art-num { padding: 0; background: none; color: var(--mut); font-weight: 700; }
.art-sec > p.art-answer { padding: 20px 24px; background: var(--card); border: 1px solid var(--stroke); }
.art-sec > p.art-answer::before { display: none; }
.art-sec > ul > li { padding-left: 20px; }
.art-sec > ul > li::before { display: none; }
.art-fig-shot { background: var(--card2); }
.art-fig rect.fg-soft { fill: color-mix(in srgb, var(--a4) 26%, var(--card)); }
.art-fig rect.fg-ink { fill: color-mix(in srgb, var(--ink) 72%, var(--card)); }
.art-fig rect.fg-line { fill: color-mix(in srgb, var(--ink) 22%, var(--card)); }
.art-fig rect.fg-bg.fs-ink { fill: var(--card); stroke: var(--stroke); }
.art-tbl tr.is-focus > * { background: color-mix(in srgb, var(--a1) 12%, var(--card2)); }
.art-meter i { border-radius: 3px; width: 14px; height: 6px; }
.art-meter i.on, .art-meter i.on:nth-child(n) { background: var(--ink); }
.art-tbl tr.is-focus .art-meter i.on { background: var(--a1); }
.art-statement { box-shadow: none; animation: none !important; }
.art-statement u { color: var(--a1); }
.art-decide > div, .art-decide > div:nth-child(n) { border-color: var(--stroke); }
.art-decide u { background: var(--card2); }
.art-decide .is-hi { background: var(--a1); }
.art-steps b { background: none; color: var(--a1); }
html:not([data-landing-theme=dark]) .art-steps b { color: #4f7300; }
.art-timeline::before { background: var(--stroke); }
.art-timeline li::before { border-color: var(--mut); width: 15px; height: 15px; left: 1px; }
.art-timeline li.is-now::before { box-shadow: 0 0 0 5px color-mix(in srgb, var(--a1) 22%, transparent); }
.art-faq h2 { background: none; color: var(--ink); }
.art-faq details[open] { border-color: color-mix(in srgb, var(--a1) 40%, transparent); }
.art-faq details[open] summary::after { background: var(--a1); }
.art-final::before { opacity: .45; background: radial-gradient(45% 70% at 5% 100%, var(--a1), transparent 70%), radial-gradient(35% 60% at 100% 0%, var(--a2), transparent 70%); }
.art-final .art-cta { background: var(--a1); color: var(--on-a) !important; }
.art-sources li::marker { color: var(--mut); }
.art-tldr > div:hover, .art-decide > div:hover, .art-steps > div:hover { box-shadow: 0 16px 36px -20px #0009; }

/* Relief: the home page's contour lines behind the article header, full width.
   The frame itself comes from landing-relief.css (inlined by base.njk for relief routes). */
.art-top { --relief-bleed-y: 0px; }
.art-top .art-hero::before { display: none; }
/* Fade the lines out under the header instead of cutting them on a straight edge. */
.art-top > .relief-frame { -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }