/* /programmes/cameroon-textile/market-and-demand/ : "the demand radius". Imported only by this route.
   One drawing (three rings round the factory hexagon, schematic radii 96 / 176 / 256) and one ochre radius thread carry
   the page. Three tonal acts: night (#1 to #3, the ledger on an indigo-tinted night), paper (#4 to #6, a sage breath
   under ring 01), night, forest and night (#7 to #9). Both changes of ground are opened by the motif (an iris from
   ring 01, an iris from the hexagon). Stability: transform, opacity, clip-path and filter only; pins are native
   sticky; pre-states live under :root[data-m-go]; scroll-driven rules are longhands under @supports; read-out boxes
   are fixed-size stacks whose content swaps. */

body[data-page="market-and-demand"] {
  --md-night: #072d2b;
  --md-inight: #0d2f3a;
  --md-forest: #0e4d4a;
  --md-paper: #f6f4ef;
  --md-sage: #6bb68f;
  --md-sage-l: #9fd6b8;
  --md-leaf: #3f8f6b;
  --md-ochre: #c98a2b;
  --md-ochre-l: #e9b462;
  --md-ochre-ink: #7d5417;
  --md-indigo-l: #aebbe8;
  --md-ink: #14231f;
  --md-mute: #33463e;
  --md-txt-d: #e8f0ec;
  --md-lab-d: #cfe3da;
  --md-ease: cubic-bezier(.22, .8, .24, 1);
  --md-g: max(20px, calc((100vw - min(1440px, 100vw - 96px)) / 2));
}
body[data-page="market-and-demand"] main { overflow-x: clip; }
.md-s { padding-block: clamp(56px, 7vw, 96px); }
.md-s > .gft-container { position: relative; }
.md-s.gft-section--dark { color: var(--md-txt-d); }
.md-s .gft-section__rail { opacity: .5; }
.md-s2 .gft-section__rail, .md-s3 .gft-section__rail, .md-s7 .gft-section__rail, .md-s9 .gft-section__rail { background: var(--md-ochre); }

/* ---------- citations (phrasing-only popovers) ---------- */
.prog-b-md-cite { position: relative; min-height: 26px; padding: 1px 7px; margin-block: -4px; font-size: 13px; }
.prog-b-md-cite::after { content: ''; position: absolute; inset: -10px -4px; }
.gft-section--dark .prog-b-md-cite, .md-sp .prog-b-md-cite { color: var(--md-sage-l); }
.prog-b-md-pop:popover-open { display: block; }
.prog-b-md-pop__t { display: block; margin-bottom: 12px; font-size: 18px; letter-spacing: -.02em; }
.prog-b-md-pop__p, .prog-b-md-pop__n { display: block; }
.prog-b-md-pop__n { margin-top: 12px; font: 13px / 1.7 var(--gft-font-mono); color: #3f5248; }

/* ---------- section heads: split words settle from a clean pre-state ---------- */
.md-head__k { font-size: 13px; letter-spacing: .1em; }
.md-head__t { font-size: clamp(2rem, 3.2vw, 3.25rem); line-height: 1.06; letter-spacing: -.035em; max-width: 22ch; font-weight: 800; text-wrap: balance; }
.md-head__l { font-size: clamp(17px, 1.2vw, 19px); line-height: 1.6; max-width: 54ch; margin-top: 18px; }
.gft-section--dark .md-head__l { color: #dbe7e0; }
.md-hw { display: inline-block; }
:root[data-m-go] .md-scene:not([data-md-in]) .md-head { opacity: 0; }
:root[data-m-go] .md-scene:not([data-md-in]) .md-hw { opacity: 0; transform: translateY(.24em); }
:root[data-m-go] .md-scene[data-md-in] .md-hw {
  animation-name: md-h-rise; animation-duration: 580ms; animation-delay: calc(var(--i) * 26ms); animation-timing-function: var(--md-ease);
  animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal;
}
:root[data-m-go] .md-scene:not([data-md-in]) [data-md-fx="blur"] .md-hw { transform: translateY(.18em); }
:root[data-m-go] .md-scene[data-md-in] [data-md-fx="blur"] .md-hw { animation-name: md-h-blur; }
:root[data-m-go] .md-scene:not([data-md-in]) [data-md-fx="wdth"] .md-hw { transform: scaleX(.74); transform-origin: 0 100%; }
:root[data-m-go] .md-scene[data-md-in] [data-md-fx="wdth"] .md-hw { animation-name: md-h-wdth; transform-origin: 0 100%; }
:root[data-m-go] .md-scene:not([data-md-in]) [data-md-fx="turn"] .md-hw { transform: perspective(600px) rotateX(-55deg); transform-origin: 50% 100%; }
:root[data-m-go] .md-scene[data-md-in] [data-md-fx="turn"] .md-hw { animation-name: md-h-turn; transform-origin: 50% 100%; }
:root[data-m-go] .md-scene:not([data-md-in]) [data-md-fx="track"] .md-hw { transform: translateX(calc(var(--i) * .14em)); }
:root[data-m-go] .md-scene[data-md-in] [data-md-fx="track"] .md-hw { animation-name: md-h-track; }
:root[data-m-go] .md-scene:not([data-md-in]) [data-md-fx="drop"] .md-hw { transform: translateY(-.42em); }
:root[data-m-go] .md-scene[data-md-in] [data-md-fx="drop"] .md-hw { animation-name: md-h-drop; }
:root[data-m-go] .md-scene:not([data-md-in]) [data-md-fx="zoom"] .md-hw { transform: scale(1.06); }
:root[data-m-go] .md-scene[data-md-in] [data-md-fx="zoom"] .md-hw { animation-name: md-h-zoom; animation-delay: calc(var(--i) * 24ms); }
:root[data-m-go] .md-scene:not([data-md-in]) [data-md-fx="swing"] .md-hw { transform: perspective(700px) rotateY(48deg); transform-origin: 0 50%; }
:root[data-m-go] .md-scene[data-md-in] [data-md-fx="swing"] .md-hw { animation-name: md-h-swing; transform-origin: 0 50%; }
@keyframes md-h-rise { from { opacity: 0; transform: translateY(.24em); } to { opacity: 1; transform: none; } }
@keyframes md-h-blur { from { opacity: 0; transform: translateY(.18em); } to { opacity: 1; transform: none; } }
@keyframes md-h-wdth { from { opacity: 0; transform: scaleX(.74); } to { opacity: 1; transform: none; } }
@keyframes md-h-turn { from { opacity: 0; transform: perspective(600px) rotateX(-55deg); } to { opacity: 1; transform: perspective(600px) rotateX(0); } }
@keyframes md-h-track { from { opacity: 0; transform: translateX(calc(var(--i) * .14em)); } to { opacity: 1; transform: none; } }
@keyframes md-h-drop { from { opacity: 0; transform: translateY(-.42em); } to { opacity: 1; transform: none; } }
@keyframes md-h-zoom { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes md-h-swing { from { opacity: 0; transform: perspective(700px) rotateY(48deg); } to { opacity: 1; transform: perspective(700px) rotateY(0); } }
:root[data-m-go] .md-scene:not([data-md-in]) .md-head__l { opacity: 0; transform: translateY(12px); }
:root[data-m-go] .md-scene[data-md-in] .md-head__l {
  animation-name: md-lede; animation-duration: 540ms; animation-delay: 100ms; animation-timing-function: var(--md-ease);
  animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal;
}
@keyframes md-lede { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- the ring drawing ---------- */
.md-rings { display: block; width: 100%; height: 100%; overflow: visible; color: var(--md-sage);
  --md-axis: #6bb68f30; --md-basec: #b2cdbd40; --md-c1: #e8f0ec; --md-c2: #e3a64c; --md-c3: #6bb68f; --md-annc: #6bb68f;
  --md-labbg: #072d2b; --md-labline: #6bb68f70; --md-labtxt: #e3efe8; --md-hexfill: #072d2b; --ang: -38deg; --len: .375; }
.md-rings--paper { color: var(--md-leaf); --md-axis: #0e4d4a22; --md-basec: #14231f30; --md-c1: #0e4d4a; --md-c2: #b07420; --md-c3: #3f8f6b;
  --md-annc: #6bb68f; --md-labbg: #f6f4ef; --md-labline: #14231f45; --md-labtxt: #14231f; --md-hexfill: #0e4d4a; }
.md-rings--forest { --md-labbg: #0e4d4a; --md-hexfill: #0e4d4a; }
.md-axes line { stroke: var(--md-axis); stroke-width: 1; stroke-dasharray: 2 7; }
.md-base { stroke: var(--md-basec); stroke-width: 1.5; }
.md-lit { stroke-width: 3; transition: opacity .6s var(--md-ease); }
.md-ring--1 .md-lit { stroke: var(--md-c1); }
.md-ring--2 .md-lit { stroke: var(--md-c2); }
.md-ring--3 .md-lit { stroke: var(--md-c3); }
.md-ring { transition: opacity .6s var(--md-ease); }
.md-ann { fill: var(--md-annc); opacity: 0; }
.md-ann-clip { clip-path: circle(0% at 50% 50%); transition: clip-path .75s var(--md-ease); }
.md-lab rect { fill: var(--md-labbg); stroke: var(--md-labline); stroke-width: 1; }
.md-lab text { font: 600 16px var(--gft-font-mono); letter-spacing: .06em; fill: var(--md-labtxt); }
.md-hex { fill: var(--md-hexfill); stroke: var(--md-sage); stroke-width: 2.5; }
.md-hex__dot { fill: var(--md-ochre); }
.md-core [data-m-live] { transform-box: fill-box; transform-origin: center; }
.md-rings [data-m-live~="orbit"] { transform-box: view-box; transform-origin: 320px 320px; }
.md-sat { fill: var(--md-sage); }
.md-sat--2 { fill: var(--md-ochre); }
.md-sat--1 { fill: var(--md-c1); }
.md-thread { transform: rotate(var(--ang)); transition: transform .8s var(--md-ease); }
.md-thread__len { transform: scaleX(var(--len)); transition: transform .8s var(--md-ease); }
.md-thread__line { stroke: var(--md-ochre); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.md-thread__tip { fill: var(--md-ochre); transform: translateX(calc((var(--len) - 1) * 256px)); transition: transform .8s var(--md-ease); }
.md-thread__pulse { fill: #ffd28a; opacity: 0; }
.md-rings--paper .md-thread__pulse { fill: var(--md-ochre-ink); }
@keyframes md-flow { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateX(calc(var(--len) * 256px)); opacity: 0; } }
:root[data-m-go] .md-scene[data-md-vis] .md-thread__flow .md-thread__pulse { opacity: 1; }
:root[data-m-go] .md-scene[data-md-vis] .md-thread__flow {
  animation-name: md-flow; animation-duration: 4s; animation-timing-function: var(--gft-ease-in-out); animation-iteration-count: infinite;
}

/* ================= #1 splash ================= */
.gft-splash[data-splash="prog-b-market-and-demand"] { min-height: max(94svh, 660px); }
.gft-splash.gft-splash--instrument[data-splash="prog-b-market-and-demand"] .gft-splash__structure { inset: 0; pointer-events: none; }
.gft-splash[data-splash="prog-b-market-and-demand"] .gft-splash__structure::after { background: linear-gradient(90deg, #072d2b 0%, #072d2bd0 24%, #072d2b00 44%); }
.gft-splash[data-splash="prog-b-market-and-demand"] .gft-splash__data { display: none; }
.gft-splash[data-splash="prog-b-market-and-demand"] :is(.gft-splash__cue, .gft-splash__caption) { font-size: 13px; }
@media (min-width: 1001px) { .gft-splash.gft-splash--instrument[data-splash="prog-b-market-and-demand"] h1 { font-size: clamp(3.4rem, min(5.4vw, 8.4svh), 6rem); max-width: 11ch; } }
.md-sp { position: absolute; inset: 0; }
.md-sp__move { position: absolute; top: 0; bottom: 34px; right: 12vw; margin-block: auto; height: min(calc(100% - 80px), 50vw); aspect-ratio: 1; }
.md-sp__rings { width: 100%; height: 100%; }
.md-sp .md-rings { --md-labtxt: #e3efe8; }
.md-sp .md-lit { opacity: .55; }
.md-sp .md-ring--1 .md-lit { opacity: 1; }
.md-sp .md-ann-clip { clip-path: circle(0% at 50% 50%); }
.md-sp:has(input[value="1"]:checked) .md-ring--1 .md-ann-clip,
.md-sp:has(input[value="2"]:checked) .md-ring--2 .md-ann-clip,
.md-sp:has(input[value="3"]:checked) .md-ring--3 .md-ann-clip { clip-path: circle(75% at 50% 50%); }
.md-sp .md-ann { opacity: .18; }
.md-sp:has(input[value="2"]:checked) .md-rings { --ang: -24deg; --len: .6875; }
.md-sp:has(input[value="3"]:checked) .md-rings { --ang: -12deg; --len: 1; }
.md-sp:has(input[value="2"]:checked) .md-ring--2 .md-lit, .md-sp:has(input[value="3"]:checked) .md-ring--3 .md-lit { opacity: 1; }
.md-sp[data-sweep] .md-thread, .md-sp[data-sweep] .md-thread__len, .md-sp[data-sweep] .md-thread__tip { transition: none; }
.md-sp__cardmove { position: absolute; top: 40px; right: max(28px, 3vw); width: min(330px, 26vw); transform-origin: 100% 0; }
.md-sp__card { padding: 18px 22px 20px; background: #072d2bf2; border: 1px solid #6bb68f66; border-top: 3px solid var(--md-ochre); box-shadow: 0 18px 44px #0006; }
.md-sp__k { display: flex; align-items: center; gap: 10px; font: 600 13px var(--gft-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--md-lab-d); }
.md-sp__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--md-ochre); flex: none; }
.md-sp__fig { margin-top: 8px; font: 800 32px / 1.05 var(--gft-font-display); letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.md-sp__sub { margin-top: 8px; font: 13px / 1.5 var(--gft-font-mono); letter-spacing: .03em; color: var(--md-lab-d); }
.md-sp__rail { position: absolute; right: max(28px, 4vw); bottom: calc(var(--splash-strip-h, 70px) + 14px); display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #072d2bf2; border: 1px solid #6bb68f66; pointer-events: auto; z-index: 2; }
.md-sp__hint { padding: 0 10px 0 6px; font: 600 13px var(--gft-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--md-ochre-l); border-right: 1px solid #6bb68f44; }
.md-sp__rail label { position: relative; display: block; }
.md-sp__rail input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.md-sp__rail span { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; font: 600 15px var(--gft-font-display); color: var(--md-txt-d); border: 1px solid transparent; }
.md-sp__rail b { font: 700 13px var(--gft-font-mono); color: var(--md-sage-l); }
.md-sp__rail input:checked + span { background: var(--md-ochre-l); color: var(--md-night); }
.md-sp__rail input:checked + span b { color: var(--md-night); }
.md-sp__rail input:focus-visible + span { outline: 2px solid var(--md-ochre-l); outline-offset: 2px; }
/* entrance: rings drawn inner to outer, hexagon lit last; accent skews in */
:root[data-m-go] .md-sp .md-wind { animation-name: gft-splash-draw; animation-duration: 560ms; animation-timing-function: var(--gft-ease-in-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go] .md-sp .md-ring--2 .md-wind { animation-delay: 120ms; }
:root[data-m-go] .md-sp .md-ring--3 .md-wind { animation-delay: 240ms; }
:root[data-m-go] .md-sp .md-core { animation-name: md-hex-in; animation-duration: 340ms; animation-delay: 500ms; animation-timing-function: var(--md-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; transform-box: fill-box; transform-origin: center; }
@keyframes md-hex-in { from { opacity: .2; transform: scale(.6); } to { opacity: 1; transform: none; } }
:root[data-m-go] .md-sp__card { animation-name: md-card-in; animation-duration: 600ms; animation-delay: 420ms; animation-timing-function: var(--md-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes md-card-in { from { opacity: .3; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.gft-splash[data-splash="prog-b-market-and-demand"] h1 .gft-serif { display: inline-block; }
:root[data-m-go] .gft-splash[data-splash="prog-b-market-and-demand"] h1 .gft-serif { animation-name: md-skew; animation-duration: 700ms; animation-delay: 180ms; animation-timing-function: var(--md-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; transform-origin: 0 100%; }
@keyframes md-skew { from { opacity: .35; transform: skewX(-14deg) translateX(-18px); } to { opacity: 1; transform: none; } }
.md-pin__travel { display: none; }

/* ================= #2 the radius instrument ================= */
.md-s2 { padding-block: 40px 0; }
.md-rad { position: relative; display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: 0 clamp(28px, 3.5vw, 56px); align-items: center; min-height: calc(100svh - 40px); padding-bottom: 104px; view-timeline-name: --md-rad; view-timeline-axis: block; }
.md-rad__stage { position: relative; height: min(80svh, 44vw); }
.md-rad__exit, .md-rad__in { height: 100%; }
.md-rad__exit { transform-origin: 0 100%; }
.md-rad__in { aspect-ratio: 1; margin-inline: auto; }
.md-rad__cap { position: absolute; left: 0; bottom: -6px; max-width: 46ch; font: 13px / 1.55 var(--gft-font-mono); letter-spacing: .03em; color: var(--md-lab-d); }
.md-rad .md-lit { opacity: .45; }
.md-rad .md-ann { opacity: .22; }
.md-tick { stroke: var(--md-ochre-l); stroke-width: 4; stroke-linecap: round; opacity: 0; transition: opacity .4s; }
.md-rad:has(input[name="prog-b-md-ring"][value="1"]:checked) { --sel: 1; }
.md-rad:has(input[name="prog-b-md-ring"][value="1"]:checked) .md-ring--1 .md-ann-clip,
.md-rad:has(input[name="prog-b-md-ring"][value="2"]:checked) .md-ring--2 .md-ann-clip,
.md-rad:has(input[name="prog-b-md-ring"][value="3"]:checked) .md-ring--3 .md-ann-clip { clip-path: circle(75% at 50% 50%); }
.md-rad:has(input[name="prog-b-md-ring"][value="1"]:checked) .md-ring--1 .md-lit,
.md-rad:has(input[name="prog-b-md-ring"][value="2"]:checked) .md-ring--2 .md-lit,
.md-rad:has(input[name="prog-b-md-ring"][value="3"]:checked) .md-ring--3 .md-lit { opacity: 1; }
.md-rad:has(input[name="prog-b-md-ring"][value="1"]:checked) .md-ring:not(.md-ring--1),
.md-rad:has(input[name="prog-b-md-ring"][value="2"]:checked) .md-ring:not(.md-ring--2),
.md-rad:has(input[name="prog-b-md-ring"][value="3"]:checked) .md-ring:not(.md-ring--3) { opacity: .35; }
.md-rad:has(input[name="prog-b-md-ring"][value="1"]:checked) .md-tick--1,
.md-rad:has(input[name="prog-b-md-ring"][value="2"]:checked) .md-tick--2,
.md-rad:has(input[name="prog-b-md-ring"][value="3"]:checked) .md-tick--3 { opacity: 1; }
.md-rad:has(input[name="prog-b-md-ring"][value="2"]:checked) .md-rings { --ang: -24deg; --len: .6875; }
.md-rad:has(input[name="prog-b-md-ring"][value="3"]:checked) .md-rings { --ang: -12deg; --len: 1; }
.md-rad .md-ann-clip { transform-origin: 320px 320px; }
:root[data-m-go] .md-scene[data-md-vis] .md-rad .md-ann { animation-name: md-ann-breathe; animation-duration: 5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes md-ann-breathe { from { opacity: .17; } to { opacity: .3; } }
.md-rad__panel { align-self: center; }
.md-rad .md-head__t { font-size: clamp(1.9rem, 2.7vw, 2.75rem); }
.md-rad .md-head__l { margin-top: 12px; }
.md-rad__tabs { display: flex; gap: 6px; margin-top: 22px; padding: 5px; border: 1px solid #6bb68f55; width: fit-content; max-width: 100%; }
.md-rad__tabs label { position: relative; }
.md-rad__tabs input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.md-rad__tabs span { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; font: 600 15px var(--gft-font-display); }
.md-rad__tabs b { font: 700 13px var(--gft-font-mono); color: var(--md-sage-l); }
.md-rad__tabs input:checked + span { background: var(--md-txt-d); color: var(--md-night); }
.md-rad__tabs input:checked + span b { color: var(--md-ochre-ink); }
.md-rad__tabs input:focus-visible + span { outline: 2px solid var(--md-ochre-l); outline-offset: 2px; }
.md-rad__reads { display: grid; margin-top: 22px; }
.md-rad__read { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s var(--md-ease), visibility 0s linear .35s; }
.md-rad:has(input[name="prog-b-md-ring"][value="1"]:checked) .md-rad__read[data-ring="1"],
.md-rad:has(input[name="prog-b-md-ring"][value="2"]:checked) .md-rad__read[data-ring="2"],
.md-rad:has(input[name="prog-b-md-ring"][value="3"]:checked) .md-rad__read[data-ring="3"] { opacity: 1; visibility: visible; transition: opacity .35s var(--md-ease), visibility 0s; }
.md-rad__role { font: 600 13px var(--gft-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--md-sage-l); }
.md-rad__fig { width: fit-content; margin-top: 6px; font: 800 clamp(44px, 4.4vw, 64px) / 1.2 var(--gft-font-display); letter-spacing: -.045em; color: #fff; }
.md-rad__lab { margin-top: 10px; font-size: 17px; line-height: 1.5; max-width: 46ch; color: var(--md-txt-d); }
.md-rad__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin-top: 18px; }
.md-rad__stats > div { border-top: 1px solid #6bb68f55; padding-top: 10px; }
.md-rad__stats dt { font: 600 13px var(--gft-font-mono); letter-spacing: .05em; color: var(--md-lab-d); text-transform: uppercase; }
.md-rad__stats dd { margin: 4px 0 0; font-size: 17px; line-height: 1.45; color: var(--md-txt-d); }
.md-rad__axis { position: absolute; left: 0; right: 0; bottom: 34px; display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 0 14px; }
.md-rad__loc { width: 52px; height: 52px; }
.md-rad__loc circle { stroke: var(--md-sage); stroke-width: 2; }
.md-rad__loc .md-rad__locdot { fill: var(--md-ochre); stroke: none; }
.md-rad__line { height: 4px; }
.md-rad__line i { display: block; height: 4px; background: var(--md-ochre); border-radius: 2px; transform-origin: 0 50%; }
.md-rad__stations { grid-column: 2; display: flex; justify-content: space-between; list-style: none; margin: 8px 0 0; padding: 0 2%; font: 600 13px var(--gft-font-mono); letter-spacing: .06em; color: var(--md-lab-d); }
/* entrance: annulus opens; rows turn from the ring centre; the figure turns within its reserved line box. */
:root[data-m-go] .md-scene:not([data-md-in]) .md-rad__in { opacity: .55; transform: scale(.93) rotate(-8deg); }
:root[data-m-go] .md-scene[data-md-in] .md-rad__in { animation-name: md-rad-in; animation-duration: 760ms; animation-timing-function: var(--md-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes md-rad-in { from { opacity: .55; transform: scale(.93) rotate(-8deg); } to { opacity: 1; transform: none; } }
:root[data-m-go] .md-scene:not([data-md-in]) .md-rad__stats > div, :root[data-m-go] .md-scene:not([data-md-in]) .md-rad__fig { opacity: .35; transform: rotate(6deg); }
.md-rad__stats > div { transform-origin: -40vw 50%; }
.md-rad__fig { transform-origin: 50% 50%; }
:root[data-m-go] .md-scene[data-md-in] .md-rad__stats > div, :root[data-m-go] .md-scene[data-md-in] .md-rad__fig {
  animation-name: md-spin-in; animation-duration: 560ms; animation-delay: calc(240ms + var(--k, 0) * 60ms); animation-timing-function: var(--md-ease);
  animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal;
}
:root[data-m-go] .md-scene[data-md-in] .md-rad__fig { animation-delay: 160ms; }
@keyframes md-spin-in { from { opacity: .35; transform: rotate(6deg); } to { opacity: 1; transform: none; } }

/* ================= #3 the baseline ledger (indigo-tinted night) ================= */
.md-s3 { background: linear-gradient(180deg, var(--md-night) 0, var(--md-inight) 260px); padding-bottom: 0; }
.md-led__top .md-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px 56px; align-items: end; }
.md-led__top .md-head__k { grid-column: 1 / -1; }
.md-led__top .md-head__l { margin-top: 0; }
.md-led__main { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 36px; margin-top: 36px; align-items: start; }
.md-led__chart { margin: 0; }
.md-led__scroll { overflow: visible; }
.md-led__svg { display: block; width: 100%; height: auto; overflow: visible; }
.md-led__col { fill: #aebbe8; opacity: 0; transition: opacity .4s; }
.md-led__grid { stroke: #cfe3da22; stroke-width: 1; }
.md-led__base { stroke: #cfe3da55; stroke-width: 1.5; }
.md-led__track { font: 600 18px var(--gft-font-mono); letter-spacing: .06em; fill: var(--md-lab-d); }
.md-led__legend text { font: 18px var(--gft-font-mono); fill: var(--md-lab-d); }
.md-led__lg--a { fill: var(--md-sage); }
.md-led__lg--b { fill: var(--md-ochre-l); }
.md-led__bar--a { fill: var(--md-sage); }
.md-led__bar--b { fill: var(--md-ochre-l); }
.md-led__bar--c { fill: var(--md-indigo-l); }
.md-led__bar { opacity: .76; transition: opacity .4s; }
.md-led__val { font: 800 22px var(--gft-font-display); fill: #fff; opacity: .92; transition: opacity .4s; }
.md-led__tag rect { fill: #0d2f3a; stroke: #cfe3da88; stroke-width: 1.5; }
.md-led__tag text { font: 600 18px var(--gft-font-mono); fill: #fff; }
.md-led__tag { opacity: .88; transition: opacity .4s; }
.md-led__axisline { stroke: var(--md-ochre); stroke-width: 4; stroke-linecap: round; }
.md-led__loc { stroke: var(--md-sage); stroke-width: 2; }
.md-led__locdot { fill: var(--md-ochre); }
.md-led__stn { fill: var(--md-inight); stroke: var(--md-ochre-l); stroke-width: 3; }
.md-led__year { font: 700 22px var(--gft-font-mono); fill: #fff; letter-spacing: .04em; }
.md-led__cursor line { stroke: #fff; stroke-width: 2; stroke-dasharray: 4 6; }
.md-led__cursor path { fill: var(--md-ochre-l); }
.md-led__cursor { transform: translateX(calc(var(--stx, 2) * 196px)); transition: transform .6s var(--md-ease); }
.md-led[data-st="0"] { --stx: 0; } .md-led[data-st="1"] { --stx: 1; } .md-led[data-st="2"] { --stx: 2; }
.md-led[data-st="3"] { --stx: 3; } .md-led[data-st="4"] { --stx: 4; } .md-led[data-st="5"] { --stx: 5; }
.md-led[data-st="0"] .md-st--0 :is(.md-led__bar, .md-led__val, .md-led__tag), .md-led[data-st="0"] .md-st--0:is(.md-led__bar, .md-led__val, .md-led__tag),
.md-led[data-st="1"] .md-st--1:is(.md-led__bar, .md-led__val, .md-led__tag),
.md-led[data-st="2"] .md-st--2:is(.md-led__bar, .md-led__val, .md-led__tag),
.md-led[data-st="3"] .md-st--3:is(.md-led__bar, .md-led__val, .md-led__tag),
.md-led[data-st="4"] .md-st--4:is(.md-led__bar, .md-led__val, .md-led__tag),
.md-led[data-st="5"] .md-st--5:is(.md-led__bar, .md-led__val, .md-led__tag) { opacity: 1; }
.md-led[data-st="0"] .md-st--0 .md-led__col, .md-led[data-st="1"] .md-st--1 .md-led__col, .md-led[data-st="2"] .md-st--2 .md-led__col,
.md-led[data-st="3"] .md-st--3 .md-led__col, .md-led[data-st="4"] .md-st--4 .md-led__col, .md-led[data-st="5"] .md-st--5 .md-led__col { opacity: .14; }
.md-led[data-st="0"] .md-st--0 .md-led__stn, .md-led[data-st="1"] .md-st--1 .md-led__stn, .md-led[data-st="2"] .md-st--2 .md-led__stn,
.md-led[data-st="3"] .md-st--3 .md-led__stn, .md-led[data-st="4"] .md-st--4 .md-led__stn, .md-led[data-st="5"] .md-st--5 .md-led__stn { fill: var(--md-ochre-l); }
.md-led__note { margin-top: 8px; font: 13px / 1.55 var(--gft-font-mono); letter-spacing: .03em; color: var(--md-lab-d); }
.md-led__side { display: grid; gap: 20px; }
.md-led__reads { display: grid; padding: 22px 22px 20px; border: 1px solid #aebbe855; border-top: 3px solid var(--md-ochre); background: #0d2f3ae6; }
.md-led__read { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s var(--md-ease), visibility 0s linear .35s; }
.md-led[data-st="0"] .md-led__read--0, .md-led[data-st="1"] .md-led__read--1, .md-led[data-st="2"] .md-led__read--2,
.md-led[data-st="3"] .md-led__read--3, .md-led[data-st="4"] .md-led__read--4, .md-led[data-st="5"] .md-led__read--5 { opacity: 1; visibility: visible; transition: opacity .35s var(--md-ease), visibility 0s; }
.md-led__year2 { font: 600 13px var(--gft-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--md-indigo-l); }
.md-led__fig { margin-top: 6px; font: 800 48px / 1 var(--gft-font-display); letter-spacing: -.04em; color: #fff; }
.md-led__txt { margin-top: 10px; font-size: 17px; line-height: 1.5; color: var(--md-txt-d); }
.md-led__cmp { display: grid; grid-template-rows: auto 1fr; padding: 16px 22px 18px; border: 1px solid #e3a64c66; background: #072d2bcc; }
.md-led__cmpk { display: flex; align-items: center; gap: 10px; font: 600 13px var(--gft-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--md-ochre-l); }
.md-led__cmpdot { width: 9px; height: 9px; border-radius: 50%; background: var(--md-ochre-l); display: inline-block; }
.md-led__cmpv { grid-area: 2 / 1; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s linear .35s; margin-top: 8px; }
.md-led[data-pin="r1"] .md-led__cmpv--r1, .md-led[data-pin="r2"] .md-led__cmpv--r2, .md-led[data-pin="r3"] .md-led__cmpv--r3,
.md-led[data-pin="r4"] .md-led__cmpv--r4, .md-led[data-pin="r5"] .md-led__cmpv--r5, .md-led[data-pin="r6"] .md-led__cmpv--r6 { opacity: 1; visibility: visible; transition: opacity .35s, visibility 0s; }
.md-led__cmpfig { font: 800 clamp(30px, 2.8vw, 40px) / 1.05 var(--gft-font-display); letter-spacing: -.035em; color: #fff; }
.md-led__cmpm { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--md-lab-d); }
.md-led__ctl { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; margin-top: 24px; padding: 14px 18px; background: #072d2bd9; border: 1px solid #6bb68f55; }
.md-led__scrub { display: flex; align-items: center; gap: 16px; flex: 1 1 520px; }
.md-led__play, .md-led__chips button { min-height: 44px; padding: 8px 18px; border: 1px solid #cfe3da99; background: #072d2b; color: #fff; font: 600 15px var(--gft-font-display); cursor: pointer; }
.md-led__play[aria-pressed="true"], .md-led__chips button[aria-pressed="true"] { background: var(--md-ochre-l); color: var(--md-night); border-color: var(--md-ochre-l); font-weight: 700; }
.md-led__scrub input { flex: 1; accent-color: var(--md-ochre-l); min-height: 44px; }
.md-led__out { min-width: 5.5ch; padding: 6px 14px; background: var(--md-ochre-l); color: var(--md-night); text-align: center; font: 800 24px / 1 var(--gft-font-display); letter-spacing: -.02em; }
.md-led__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.md-led__pins { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.md-pin { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 16px; border: 1px solid #6bb68f66; border-top: 3px solid var(--md-sage); background: #093533; transition: opacity .35s, border-color .35s, background-color .35s; }
.md-pin::before { display: none; }
.md-pin__g { display: flex; align-items: center; gap: 8px; font: 700 13.5px var(--gft-font-mono); letter-spacing: .04em; color: #e6f2ec; }
.md-pin__ring { width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--md-txt-d); flex: none; }
.md-pin__ring--3 { border-color: var(--md-sage); }
.md-pin__ring--0 { border-color: var(--md-ochre-l); border-style: dashed; }
.md-pin__m { font-size: 16px; line-height: 1.35; font-weight: 700; color: #fff; }
.md-pin__f { font: 800 19px / 1.25 var(--gft-font-display); color: var(--md-ochre-l); font-variant-numeric: tabular-nums; }
.md-pin__i { font-size: 14.5px; line-height: 1.48; color: #e2eee8; flex: 1; }
.md-pin__btn { align-self: flex-start; min-height: 44px; padding: 6px 14px; border: 1.5px solid var(--md-ochre-l); background: #072d2b; color: var(--md-ochre-l); font: 700 14px var(--gft-font-display); cursor: pointer; }
.md-pin__btn[aria-pressed="true"] { background: var(--md-ochre-l); color: var(--md-night); }
.md-pin:has(.md-pin__btn[aria-pressed="true"]) { border-color: var(--md-ochre-l); border-top-color: var(--md-ochre-l); background: #103f3c; }
.md-led[data-st="0"] .md-pin[data-st="0"], .md-led[data-st="1"] .md-pin[data-st="1"], .md-led[data-st="2"] .md-pin[data-st="2"],
.md-led[data-st="3"] .md-pin[data-st="3"], .md-led[data-st="4"] .md-pin[data-st="4"], .md-led[data-st="5"] .md-pin[data-st="5"] { border-top-color: var(--md-ochre-l); background: #12384a; }
.md-led[data-filter="market"] .md-pin:not([data-group="market"]), .md-led[data-filter="channel"] .md-pin:not([data-group="channel"]),
.md-led[data-filter="forecast"] .md-pin:not([data-group="forecast"]) { opacity: .45; }
.md-led__fnote { margin-top: 14px; font-size: 15px; line-height: 1.5; color: #e2eee8; max-width: 80ch; }
.md-led[data-filter="forecast"] .md-led__fnote { color: #fff; }
:root[data-m-go] .md-scene[data-md-vis] .md-led .md-led__cmpdot { animation-name: md-dot; animation-duration: 2.4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes md-dot { from { opacity: .45; transform: scale(.8); } to { opacity: 1; transform: scale(1.15); } }
/* entrance: the axis unspools from the locator, bars rise from it station by station, the pins drop onto their stations */
:root[data-m-go] .md-scene:not([data-md-in]) .md-led__axis { clip-path: inset(0 88% 0 0); }
:root[data-m-go] .md-scene[data-md-in] .md-led__axis { animation-name: md-unspool; animation-duration: 640ms; animation-timing-function: var(--md-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes md-unspool { from { clip-path: inset(0 88% 0 0); } to { clip-path: inset(0 0 0 0); } }
:root[data-m-go] .md-scene:not([data-md-in]) .md-led__barw { transform: scaleY(.06); }
:root[data-m-go] .md-scene[data-md-in] .md-led__barw { animation-name: md-bar-rise; animation-duration: 520ms; animation-delay: calc(180ms + var(--k) * 80ms); animation-timing-function: var(--md-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes md-bar-rise { from { transform: scaleY(.06); } to { transform: none; } }
:root[data-m-go] .md-scene:not([data-md-in]) .md-pin { opacity: .35; transform: translateY(-14px); }
:root[data-m-go] .md-scene[data-md-in] .md-pin { animation-name: md-pin-in; animation-duration: 480ms; animation-delay: calc(320ms + var(--k) * 40ms); animation-timing-function: var(--md-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes md-pin-in { from { opacity: .35; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
/* hand-over band: the axis coils directly into the full-size ring diagram as the paper opens */
.md-coil { position: relative; height: 34svh; min-height: 220px; margin: 28px calc(50% - 50vw) 0; overflow: clip; view-timeline-name: --md-coil; view-timeline-axis: block; }
.md-coil__paper { position: absolute; inset: 0; background: var(--md-paper); }
.md-coil__line { position: absolute; left: 0; right: 42%; top: 50%; height: 4px; margin-top: -2px; z-index: 1; }
.md-coil__line i { display: block; height: 100%; background: var(--md-ochre); transform-origin: 100% 50%; transform: scaleX(0); }
.md-coil__stage { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.md-coil__rings { position: absolute; left: 58%; top: 54%; width: min(64svh, 46vw); height: min(64svh, 46vw); margin: calc(min(64svh, 46vw) / -2) 0 0 calc(min(64svh, 46vw) / -2); }
.md-coil__rings .md-lit { opacity: .85; }
.md-coil__rings .md-ring--1 .md-ann { opacity: .16; }
.md-coil__rings .md-ring--1 .md-ann-clip { clip-path: circle(75% at 50% 50%); }
.md-coil__pin rect { fill: #072d2bf2; stroke: var(--md-ochre); stroke-width: 2; }
.md-coil__pink { font: 700 13px var(--gft-font-mono); fill: var(--md-ochre-l); letter-spacing: .06em; }
.md-coil__pinsub { font: 600 13px var(--gft-font-mono); fill: #e8f0ec; letter-spacing: .02em; }

/* ================= #4 sell outward, sticky ================= */
.md-s4 { padding-block: 0; background: var(--md-paper); }
.md-s4 > .gft-container { width: 100%; }
.md-sell { position: relative; view-timeline-name: --md-sell; view-timeline-axis: block; }
.md-sell__stage { position: sticky; top: 0; height: 100svh; overflow: clip; z-index: 0; }
.md-sell__zoom { position: absolute; inset: 0; transform-origin: 58% 50%; }
.md-sell__rings { position: absolute; left: 58%; top: 50%; width: min(74svh, 50vw); height: min(74svh, 50vw); margin: calc(min(74svh, 50vw) / -2) 0 0 calc(min(74svh, 50vw) / -2); }
.md-sell__track { position: relative; z-index: 1; margin-top: -100svh; pointer-events: none; }
.md-sell__intro { min-height: 44svh; padding: 5svh var(--md-g) 0; max-width: calc(46vw + var(--md-g)); pointer-events: auto; }
.md-sell__step { min-height: 82svh; display: flex; align-items: center; padding-inline: var(--md-g); }
.md-sell__step--last { min-height: 96svh; }
.md-sell__card { width: min(460px, 36vw); padding: 26px 28px 28px; background: #fffdf8f2; border: 1px solid #14231f22; border-left: 4px solid var(--md-ochre); box-shadow: 0 24px 60px #072d2b1f; pointer-events: auto; }
.md-sell__k { font: 600 13px var(--gft-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--md-ochre-ink); }
.md-sell__card h3 { margin-top: 8px; font-size: clamp(1.5rem, 2vw, 1.9rem); line-height: 1.12; letter-spacing: -.03em; }
.md-sell__card > p:not(.md-sell__k) { margin-top: 12px; font-size: 17px; line-height: 1.6; color: var(--md-mute); }
.md-sell__vendor { display: flex; gap: 6px; margin: 16px 0 0; padding: 5px; border: 1px solid #14231f33; }
.md-sell__vendor legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.md-sell__vendor label { position: relative; flex: 1; }
.md-sell__vendor input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.md-sell__vendor span { display: flex; justify-content: center; align-items: center; min-height: 44px; padding: 6px 10px; font: 600 15px var(--gft-font-display); }
.md-sell__vendor input:checked + span { background: var(--md-forest); color: #fff; }
.md-sell__vendor input:focus-visible + span { outline: 2px solid var(--md-ochre); outline-offset: 2px; }
.md-sell__vread { display: grid; margin-top: 14px; }
.md-sell__vfig { grid-area: 1 / 1; font: 800 40px / 1.05 var(--gft-font-display); letter-spacing: -.035em; color: var(--md-forest); opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s linear .35s; }
.md-sell__vfig small { display: block; margin-top: 4px; font: 500 15px / 1.4 var(--gft-font-display); letter-spacing: 0; color: var(--md-mute); }
.md-sell:not(:has(input[name="prog-b-md-vendor"][value="b"]:checked)) .md-sell__vfig--a,
.md-sell:has(input[name="prog-b-md-vendor"][value="b"]:checked) .md-sell__vfig--b { opacity: 1; visibility: visible; transition: opacity .35s, visibility 0s; }
.md-sell__chips { position: absolute; right: var(--md-g); bottom: 26px; display: flex; gap: 6px; z-index: 2; }
.md-sell__chips a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border: 1px solid #14231f33; background: #f6f4efe6; color: var(--md-ink); text-decoration: none; font: 600 14px var(--gft-font-display); }
.md-sell__chips b { font: 700 13px var(--gft-font-mono); color: var(--md-ochre-ink); }
.md-sell__chips a[aria-current] { background: var(--md-forest); color: #fff; }
.md-sell__chips a[aria-current] b { color: #ffd28a; }
.md-sell__now { display: none; }
/* stage states */
.md-sell .md-lit { opacity: 0; }
.md-sell .md-base { stroke-width: 2; }
.md-sell .md-ann { opacity: .16; }
.md-sell .md-lab { opacity: .45; transition: opacity .5s; }
.md-sell .md-sat { opacity: 0; transition: opacity .5s; }
.md-sell .md-lead, .md-sell .md-gate, .md-sell .md-forks, .md-sell__vendors, .md-sell .md-lead__fa, .md-sell .md-lead__fb, .md-sell .md-lead__a, .md-sell .md-lead__b { opacity: 0; transition: opacity .5s var(--md-ease); }
.md-sell[data-step="1"] .md-rings { --ang: -40deg; --len: .375; }
.md-sell[data-step="2"] .md-rings { --ang: -22deg; --len: .6875; }
.md-sell[data-step="3"] .md-rings { --ang: 34deg; --len: 1; }
.md-sell[data-step="4"] .md-rings { --ang: 315deg; --len: 1; }
.md-sell[data-step="4"] .md-thread { opacity: 0; }
.md-sell .md-thread { transition: transform .8s var(--md-ease), opacity .5s; }
.md-sell .md-ring--1 .md-lit, .md-sell .md-lab--1, .md-sell .md-sat--1 { opacity: 1; }
.md-sell:is([data-step="2"], [data-step="3"], [data-step="4"]) :is(.md-ring--2 .md-lit, .md-lab--2, .md-sat--2) { opacity: 1; }
.md-sell:is([data-step="3"], [data-step="4"]) :is(.md-ring--3 .md-lit, .md-lab--3, .md-sat--3, .md-gate) { opacity: 1; }
.md-sell[data-step="1"] .md-ring--1 .md-ann-clip, .md-sell[data-step="2"] .md-ring--2 .md-ann-clip, .md-sell[data-step="3"] .md-ring--3 .md-ann-clip { clip-path: circle(75% at 50% 50%); }
.md-sell[data-step="1"] .md-lead--1, .md-sell[data-step="2"] .md-lead--2, .md-sell[data-step="3"] .md-lead--3, .md-sell[data-step="4"] .md-lead--4 { opacity: 1; }
.md-sell[data-step="4"] :is(.md-sell__vendors, .md-forks) { opacity: 1; }
.md-sell[data-step="4"] .md-ring--3 .md-lit { opacity: .25; }
.md-sell:not(:has(input[name="prog-b-md-vendor"][value="b"]:checked)) :is(.md-lead__fa, .md-lead__a),
.md-sell:has(input[name="prog-b-md-vendor"][value="b"]:checked) :is(.md-lead__fb, .md-lead__b) { opacity: 1; }
.md-vendor { stroke-width: 12; stroke-linecap: round; opacity: .3; transition: opacity .5s; }
.md-vendor--a { stroke: var(--md-leaf); }
.md-vendor--b { stroke: #b07420; }
.md-fork { stroke-width: 4; stroke-linecap: round; stroke: var(--md-ochre); opacity: .2; transition: opacity .5s; }
.md-sell:not(:has(input[name="prog-b-md-vendor"][value="b"]:checked)) :is(.md-vendor--a, .md-fork--a),
.md-sell:has(input[name="prog-b-md-vendor"][value="b"]:checked) :is(.md-vendor--b, .md-fork--b) { opacity: 1; }
.md-gate { stroke: var(--md-ochre); stroke-width: 7; stroke-dasharray: 6 7; }
.md-lead path { stroke: var(--md-ink); stroke-width: 1.5; }
.md-lead__f { font: 800 40px var(--gft-font-display); letter-spacing: -.03em; fill: var(--md-forest); }
.md-lead__s { font: 600 16px var(--gft-font-mono); letter-spacing: .02em; fill: var(--md-mute); }
.md-lead__gate { fill: var(--md-ochre-ink); }
.md-hextag rect, .md-stamp rect { fill: var(--md-paper); stroke: var(--md-ochre); stroke-width: 1.5; }
.md-stamp rect { stroke-dasharray: 5 4; }
.md-hextag text, .md-stamp text { font: 600 15px var(--gft-font-mono); fill: var(--md-ochre-ink); }
/* entrance: rings wind on clockwise from twelve o'clock, outer last */
:root[data-m-go] .md-scene:not([data-md-in]) .md-sell .md-wind { clip-path: polygon(50% 50%, 50% -10%, 50% -10%, 50% -10%, 50% -10%, 50% -10%, 50% -10%); }
:root[data-m-go] .md-scene[data-md-in] .md-sell .md-wind { animation-name: md-wind; animation-duration: 620ms; animation-timing-function: var(--gft-ease-in-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go] .md-scene[data-md-in] .md-sell .md-ring--2 .md-wind { animation-delay: 90ms; }
:root[data-m-go] .md-scene[data-md-in] .md-sell .md-ring--3 .md-wind { animation-delay: 180ms; }
@keyframes md-wind {
  0% { clip-path: polygon(50% 50%, 50% -10%, 50% -10%, 50% -10%, 50% -10%, 50% -10%, 50% -10%); }
  12.5% { clip-path: polygon(50% 50%, 50% -10%, 110% -10%, 110% -10%, 110% -10%, 110% -10%, 110% -10%); }
  37.5% { clip-path: polygon(50% 50%, 50% -10%, 110% -10%, 110% 110%, 110% 110%, 110% 110%, 110% 110%); }
  62.5% { clip-path: polygon(50% 50%, 50% -10%, 110% -10%, 110% 110%, -10% 110%, -10% 110%, -10% 110%); }
  87.5% { clip-path: polygon(50% 50%, 50% -10%, 110% -10%, 110% 110%, -10% 110%, -10% -10%, -10% -10%); }
  100% { clip-path: polygon(50% 50%, 50% -10%, 110% -10%, 110% 110%, -10% 110%, -10% -10%, 50% -10%); }
}
:root[data-m-go] .md-scene:not([data-md-in]) .md-sell .md-leads { opacity: .3; }
:root[data-m-go] .md-scene[data-md-in] .md-sell .md-leads { animation-name: md-fade-in; animation-duration: 500ms; animation-delay: 420ms; animation-timing-function: var(--md-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes md-fade-in { from { opacity: .3; } to { opacity: 1; } }

/* ================= #5 ring 01 close ================= */
.md-s5 { background: var(--md-paper); overflow: clip; padding-block: 40px 24px; }
.md-dig { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 56px); min-height: max(82svh, 660px); align-items: center; view-timeline-name: --md-dig; view-timeline-axis: block; }
.md-dig__stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 540px; padding: 48px; }
.md-dig__ring { position: absolute; z-index: 0; width: min(560px, 44vw); height: min(560px, 44vw); top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.md-dig__exit { width: 100%; height: 100%; transform-origin: 50% 50%; }
.md-dig__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.md-dig__sage { fill: #e4efe8; }
.md-dig__track { stroke: #0e4d4a33; stroke-width: 22; }
.md-dig__arc { stroke-width: 22; stroke-linecap: butt; }
.md-dig__arc--a { stroke: var(--md-forest); }
.md-dig__arc--b { stroke: var(--md-ochre); transition: opacity .5s; }
.md-dig__glint { stroke: var(--md-ochre); stroke-width: 3; stroke-dasharray: 3 14; opacity: .7; }
.md-dig__mark circle { fill: var(--md-paper); stroke: var(--md-forest); stroke-width: 5; }
.md-dig__mark { transition: opacity .4s; }
.md-dig__tick line { stroke: var(--md-ink); stroke-width: 5; }
.md-dig__tick { opacity: 0; transition: opacity .4s; }
.md-dig__bars { position: relative; z-index: 1; width: 100%; max-width: 470px; margin: 0 auto; padding: 22px 32px 34px; background: #fffdf8f2; border: 1px solid #0e4d4a33; border-top: 4px solid var(--md-forest); box-shadow: 0 20px 48px #072d2b18; }
.md-dig__boxhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid #14231f22; }
.md-dig__kbadge { display: grid; gap: 4px; }
.md-dig__klab { font: 600 13px var(--gft-font-mono); letter-spacing: .06em; color: var(--md-mute); }
.md-dig__rate { font: 700 17px var(--gft-font-mono); color: var(--md-ochre-ink); transition: opacity .4s; }
.md-dig__pctwrap { display: grid; text-align: right; }
.md-dig__pct { grid-area: 1 / 1; display: grid; transition: opacity .4s; }
.md-dig__pct b { font: 800 30px / 1 var(--gft-font-display); letter-spacing: -.03em; color: var(--md-forest); }
.md-dig__pct span { font: 600 13px var(--gft-font-mono); letter-spacing: .04em; color: var(--md-mute); }
.md-dig__fold { position: relative; height: 280px; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 28px 0 36px; border-bottom: 4px solid var(--md-ochre); transform-origin: 50% 100%; }
.md-dig__origin { position: absolute; left: -14px; bottom: -16px; width: 28px; height: 28px; }
.md-dig__orighex { width: 100%; height: 100%; display: block; }
.md-dig__orighex path { fill: var(--md-forest); stroke: var(--md-sage); stroke-width: 2.5; }
.md-dig__orighex circle { fill: var(--md-ochre); }
.md-dig__bar { position: relative; width: 104px; height: 240px; display: flex; flex-direction: column; justify-content: flex-end; transform-origin: 50% 100%; }
.md-dig__bar i { position: absolute; inset: 0; display: block; transform-origin: 50% 100%; background: #0e4d4a40; clip-path: inset(calc((1 - var(--h)) * 100%) 0 0 0); overflow: hidden; transition: background-color .4s; }
.md-dig__bar em { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: linear-gradient(180deg, #ffffff00, #ffffff40, #ffffff00); opacity: 0; }
.md-dig__bv { position: absolute; left: 50%; bottom: calc(var(--h) * 100% + 10px); transform: translateX(-50%); white-space: nowrap; font: 800 22px var(--gft-font-display); letter-spacing: -.02em; color: var(--md-ink); }
.md-dig__by { position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); font: 700 14px var(--gft-font-mono); color: var(--md-ink); }
.md-dig__growth { position: absolute; left: 34%; width: 32%; bottom: 92px; height: auto; overflow: visible; transition: clip-path .7s var(--md-ease); }
.md-dig__gp { stroke: var(--md-ochre); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.md-dig__side { grid-column: 2; position: relative; z-index: 1; padding: 28px 0; }
.md-dig .md-head__t { font-size: clamp(1.8rem, 2.6vw, 2.6rem); }
.md-dig__copy { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--md-mute); }
.md-dig__sw { display: flex; gap: 6px; margin-top: 20px; padding: 5px; border: 1px solid #14231f33; width: fit-content; max-width: 100%; }
.md-dig__sw label { position: relative; }
.md-dig__sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.md-dig__sw span { display: flex; align-items: center; min-height: 44px; padding: 6px 16px; font: 600 15px var(--gft-font-display); }
.md-dig__sw input:checked + span { background: var(--md-forest); color: #fff; }
.md-dig__sw input:focus-visible + span { outline: 2px solid var(--md-ochre); outline-offset: 2px; }
.md-dig__reads, .md-dig__chs { display: grid; margin-top: 16px; }
.md-dig__read, .md-dig__ch { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s linear .35s; }
.md-dig__fig { font: 800 48px / 1 var(--gft-font-display); letter-spacing: -.04em; color: var(--md-forest); }
.md-dig__lab { margin-top: 8px; font-size: 17px; line-height: 1.5; color: var(--md-mute); }
.md-dig__ch { font-size: 17px; line-height: 1.55; color: var(--md-ink); padding-left: 14px; border-left: 3px solid var(--md-ochre); }
.md-dig:not(:has(input[value="2023"]:checked)) .md-dig__read[data-year="2027"], .md-dig:has(input[value="2023"]:checked) .md-dig__read[data-year="2023"],
.md-dig:not(:has(input[value="d2c"]:checked)) .md-dig__ch[data-for="b2b"], .md-dig:has(input[value="d2c"]:checked) .md-dig__ch[data-for="d2c"] { opacity: 1; visibility: visible; transition: opacity .35s, visibility 0s; }
.md-dig:has(input[value="2023"]:checked) :is(.md-dig__arc--b, .md-dig__mark--b, .md-dig__pct--b, .md-dig__rate) { opacity: .12; }
.md-dig:not(:has(input[value="2023"]:checked)) :is(.md-dig__mark--a, .md-dig__pct--a) { opacity: 0; }
.md-dig:has(input[value="2023"]:checked) .md-dig__growth { clip-path: inset(0 100% 0 0); }
.md-dig:not(:has(input[value="2023"]:checked)) .md-dig__growth { clip-path: inset(-20% -20% -20% -20%); }
.md-dig:has(input[value="2023"]:checked) .md-dig__bar--a i, .md-dig:not(:has(input[value="2023"]:checked)) .md-dig__bar--b i { background: var(--md-forest); }
.md-dig:not(:has(input[value="d2c"]:checked)) .md-dig__tick--b2b, .md-dig:has(input[value="d2c"]:checked) .md-dig__tick--d2c { opacity: 1; }
:root[data-m-go] .md-scene[data-md-vis] .md-dig:has(input[value="2023"]:checked) .md-dig__bar--a em,
:root[data-m-go] .md-scene[data-md-vis] .md-dig:not(:has(input[value="2023"]:checked)) .md-dig__bar--b em { animation-name: md-scanbar; animation-duration: 2.8s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes md-scanbar { from { opacity: .1; } to { opacity: 1; } }
/* entrance: diagonal offset reveal of the arc, then the bars rise */
:root[data-m-go] .md-scene:not([data-md-in]) .md-dig__svg { opacity: .45; transform: translate(-18px, 12px); clip-path: inset(0 30% 30% 0); }
:root[data-m-go] .md-scene[data-md-in] .md-dig__svg { animation-name: md-twill; animation-duration: 760ms; animation-timing-function: var(--md-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes md-twill { from { opacity: .45; transform: translate(-18px, 12px); clip-path: inset(0 30% 30% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
:root[data-m-go] .md-scene:not([data-md-in]) .md-dig__bar i { transform: scaleY(.1); }
:root[data-m-go] .md-scene[data-md-in] .md-dig__bar i { animation-name: md-bar-rise; animation-duration: 560ms; animation-delay: 260ms; animation-timing-function: var(--md-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go] .md-scene[data-md-in] .md-dig__bar--b i { animation-delay: 380ms; }
:root[data-m-go] .md-scene:not([data-md-in]) .md-dig__bv { opacity: .35; translate: 0 10px; }
:root[data-m-go] .md-scene[data-md-in] .md-dig__bv { animation-name: md-dig-bv; animation-duration: 480ms; animation-delay: 520ms; animation-timing-function: var(--md-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes md-dig-bv { from { opacity: .35; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }

/* ================= #6 segments ================= */
.md-s6 { background: var(--md-paper); padding-block: 48px 56px; }
.md-seg__head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px 56px; align-items: end; }
.md-seg__head .md-head__k { grid-column: 1 / -1; }
.md-seg__head .md-head__l { margin-top: 0; }
.md-seg__tri { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, min(56svh, 40vw)) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 40px); align-items: center; margin-top: 28px; }
.md-seg__flank { padding: 22px 24px 24px; background: #fffdf8; border: 1px solid #14231f1f; border-top: 4px solid var(--md-ochre); transition: opacity .45s var(--md-ease); }
.md-seg__flank--b { border-top-color: var(--md-forest); }
.md-seg__k { display: flex; align-items: center; gap: 10px; font: 600 13px var(--gft-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--md-ochre-ink); }
.md-seg__flank--b .md-seg__k { color: var(--md-forest); }
.md-seg__sw { width: 14px; height: 14px; border-radius: 50%; border: 4px solid #b07420; flex: none; }
.md-seg__sw--1 { border-color: var(--md-forest); }
.md-seg__flank h3 { margin-top: 10px; font-size: clamp(1.4rem, 1.8vw, 1.75rem); line-height: 1.15; letter-spacing: -.025em; }
.md-seg__flank > p:not(.md-seg__k):not(.md-seg__asks) { margin-top: 10px; font-size: 17px; line-height: 1.58; color: var(--md-mute); }
.md-seg__asks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.md-seg__asks span { padding: 4px 10px; border: 1px solid #14231f33; font: 600 13px var(--gft-font-mono); color: var(--md-ink); }
.md-seg:not(:has(input[name="prog-b-md-seg"][value="b"]:checked)) .md-seg__flank--b, .md-seg:has(input[name="prog-b-md-seg"][value="b"]:checked) .md-seg__flank--a { opacity: .8; background: transparent; border-top-color: #14231f33; }
.md-seg__centre { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.md-seg__switch { display: flex; gap: 6px; padding: 5px; border: 1px solid #14231f33; }
.md-seg__switch label { position: relative; }
.md-seg__switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.md-seg__switch span { display: flex; align-items: center; min-height: 44px; padding: 6px 14px; font: 600 15px var(--gft-font-display); white-space: nowrap; }
.md-seg__switch input:checked + span { background: var(--md-forest); color: #fff; }
.md-seg__switch input:focus-visible + span { outline: 2px solid var(--md-ochre); outline-offset: 2px; }
.md-seg__ring { width: 100%; aspect-ratio: 1; }
.md-seg .md-lit { opacity: .55; }
.md-segarc { stroke-width: 14; stroke-linecap: round; opacity: .3; transition: opacity .45s; }
.md-segarc--a { stroke: #b07420; }
.md-segarc--b { stroke: var(--md-forest); }
.md-seg:not(:has(input[name="prog-b-md-seg"][value="b"]:checked)) .md-segarc--a, .md-seg:has(input[name="prog-b-md-seg"][value="b"]:checked) .md-segarc--b { opacity: 1; }
.md-spoke { opacity: .16; transition: opacity .45s; }
.md-spoke line { stroke: var(--md-ink); stroke-width: 3; stroke-dasharray: 5 6; }
.md-spoke__end { fill: var(--md-ochre); }
.md-spoke__run circle { fill: var(--md-ochre); opacity: 0; }
.md-seg:has(input[name="prog-b-md-need"][value="1"]:checked) .md-spoke--1, .md-seg:has(input[name="prog-b-md-need"][value="2"]:checked) .md-spoke--2, .md-seg:has(input[name="prog-b-md-need"][value="3"]:checked) .md-spoke--3 { opacity: 1; }
.md-seg:has(input[name="prog-b-md-need"][value="1"]:checked) .md-spoke--1 line, .md-seg:has(input[name="prog-b-md-need"][value="2"]:checked) .md-spoke--2 line, .md-seg:has(input[name="prog-b-md-need"][value="3"]:checked) .md-spoke--3 line { stroke: var(--md-ochre-ink); stroke-dasharray: none; }
@keyframes md-run { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(var(--len)); opacity: 0; } }
:root[data-m-go] .md-scene[data-md-vis] .md-spoke__run { animation-name: md-run; animation-duration: 2.6s; animation-timing-function: var(--gft-ease-in-out); animation-iteration-count: infinite; }
:root[data-m-go] .md-scene[data-md-vis] .md-spoke__run circle { opacity: 1; }
.md-seg__reads { display: grid; width: 100%; }
.md-seg__read { grid-area: 1 / 1; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s linear .35s; }
.md-seg__read b { font: 800 48px / 1 var(--gft-font-display); letter-spacing: -.04em; color: var(--md-forest); }
.md-seg__read span { font-size: 15px; line-height: 1.45; color: var(--md-mute); }
.md-seg:not(:has(input[name="prog-b-md-seg"][value="b"]:checked)) .md-seg__read[data-for="a"], .md-seg:has(input[name="prog-b-md-seg"][value="b"]:checked) .md-seg__read[data-for="b"] { opacity: 1; visibility: visible; transition: opacity .35s, visibility 0s; }
.md-needs-deck { position: relative; margin-top: 26px; padding: 22px 24px 24px; background: #fffdf8eb; border: 1px solid #14231f26; border-top: 4px solid var(--md-forest); box-shadow: 0 20px 48px #072d2b12; z-index: 1; }
.md-needs-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-bottom: 16px; border-bottom: 1px solid #14231f22; }
.md-needs-bar__k { font: 700 13px var(--gft-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--md-ochre-ink); margin: 0; }
.md-needs-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.md-needs-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border: 1px solid #14231f33; background: var(--md-paper); color: var(--md-ink); font: 600 14px var(--gft-font-display); cursor: pointer; }
.md-needs-tab b { font: 700 13px var(--gft-font-mono); color: var(--md-ochre-ink); }
.md-seg:has(input[name="prog-b-md-need"][value="1"]:checked) .md-needs-tab[data-need-tab="1"],
.md-seg:has(input[name="prog-b-md-need"][value="2"]:checked) .md-needs-tab[data-need-tab="2"],
.md-seg:has(input[name="prog-b-md-need"][value="3"]:checked) .md-needs-tab[data-need-tab="3"] { background: var(--md-forest); color: #fff; border-color: var(--md-forest); }
.md-seg:has(input[name="prog-b-md-need"][value="1"]:checked) .md-needs-tab[data-need-tab="1"] b,
.md-seg:has(input[name="prog-b-md-need"][value="2"]:checked) .md-needs-tab[data-need-tab="2"] b,
.md-seg:has(input[name="prog-b-md-need"][value="3"]:checked) .md-needs-tab[data-need-tab="3"] b { color: var(--md-ochre-l); }
.md-needs { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; overflow: clip; }
.md-need { position: relative; padding: 18px 20px 20px; background: var(--md-paper); border: 1px solid #14231f26; border-top: 5px solid #14231f40; transition: border-color .35s, background-color .35s, box-shadow .35s; }
.md-need__pick { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 6px 14px; align-items: center; min-height: 44px; cursor: pointer; }
.md-need__pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.md-need__glyph { grid-row: span 2; width: 56px; height: 36px; }
.md-need__glyph :is(rect, path, circle) { stroke: var(--md-forest); stroke-width: 2.5; }
.md-need__k { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; font: 700 13px var(--gft-font-mono); letter-spacing: .04em; color: var(--md-ochre-ink); }
.md-need__state { font-style: normal; padding: 2px 8px; background: #14231f14; color: var(--md-ink); font: 700 12.5px var(--gft-font-mono); }
.md-need strong { font-size: 17px; line-height: 1.3; color: var(--md-ink); }
.md-need__t { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--md-ink); }
.md-need:has(input:checked) { border-color: var(--md-ochre); border-top-color: var(--md-ochre); background: #fff; box-shadow: 0 12px 32px #072d2b14; }
.md-need:has(input:checked) .md-need__state { background: var(--md-forest); color: var(--md-ochre-l); }
.md-need:has(input:checked) .md-need__glyph :is(rect, path, circle) { stroke: var(--md-ochre-ink); }
.md-need:has(input:focus-visible) { outline: 2px solid var(--md-ochre); outline-offset: 2px; }
.md-needs__sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 18%; background: linear-gradient(90deg, #c98a2b00, #c98a2b14, #c98a2b00); pointer-events: none; }
:root[data-m-go] .md-scene[data-md-vis] .md-needs__sweep { animation-name: md-sweep; animation-duration: 6s; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes md-sweep { from { transform: translateX(-100%); } to { transform: translateX(560%); } }
.md-needs__notes { display: grid; margin-top: 16px; padding: 14px 18px; background: var(--md-forest); color: #fff; border-left: 4px solid var(--md-ochre-l); }
.md-needs__note { grid-area: 1 / 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s linear .35s; }
.md-needs__nfig { font: 800 24px / 1.1 var(--gft-font-display); color: var(--md-ochre-l); white-space: nowrap; }
.md-needs__note p { margin: 0; font-size: 16px; line-height: 1.5; color: #fff; flex: 1 1 320px; }
.md-seg:has(input[name="prog-b-md-need"][value="1"]:checked) .md-needs__notes [data-for="1"], .md-seg:has(input[name="prog-b-md-need"][value="2"]:checked) .md-needs__notes [data-for="2"], .md-seg:has(input[name="prog-b-md-need"][value="3"]:checked) .md-needs__notes [data-for="3"] { opacity: 1; visibility: visible; transition: opacity .35s, visibility 0s; }
/* entrance: flanks picked up from the shed line, threads drawn on the rail */
:root[data-m-go] .md-scene:not([data-md-in]) .md-seg__flank--a { opacity: .35; transform: translateX(60px) skewX(-3deg); }
:root[data-m-go] .md-scene:not([data-md-in]) .md-seg__flank--b { opacity: .35; transform: translateX(-60px) skewX(3deg); }
:root[data-m-go] .md-scene[data-md-in] .md-seg__flank { animation-name: md-pick-a; animation-duration: 680ms; animation-delay: 160ms; animation-timing-function: var(--md-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go] .md-scene[data-md-in] .md-seg__flank--b { animation-name: md-pick-b; }
@keyframes md-pick-a { from { opacity: .35; transform: translateX(60px) skewX(-3deg); } }
@keyframes md-pick-b { from { opacity: .35; transform: translateX(-60px) skewX(3deg); } }
:root[data-m-go] .md-scene:not([data-md-in]) .md-seg__ring { opacity: .5; transform: scale(.9); }
:root[data-m-go] .md-scene[data-md-in] .md-seg__ring { animation-name: md-ring-in; animation-duration: 600ms; animation-timing-function: var(--md-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes md-ring-in { from { opacity: .5; transform: scale(.9); } to { opacity: 1; transform: none; } }
:root[data-m-go] .md-scene:not([data-md-in]) .md-need { opacity: .4; transform: scaleX(.92); transform-origin: 0 50%; }
:root[data-m-go] .md-scene[data-md-in] .md-need { animation-name: md-thread-in; animation-duration: 560ms; animation-delay: 300ms; animation-timing-function: var(--md-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; transform-origin: 0 50%; }
:root[data-m-go] .md-scene[data-md-in] .md-need--2 { animation-delay: 380ms; }
:root[data-m-go] .md-scene[data-md-in] .md-need--3 { animation-delay: 460ms; }
@keyframes md-thread-in { from { opacity: .4; transform: scaleX(.92); } to { opacity: 1; transform: none; } }
/* hand-over band: short pre-roll as the 48.1 percent arc scales into the dial track */
.md-iris { position: relative; height: 22svh; min-height: 150px; margin: 24px calc(50% - 50vw) 0; overflow: clip; background: var(--md-paper); view-timeline-name: --md-iris; view-timeline-axis: block; }
.md-iris__night { position: absolute; inset: 0; background: var(--md-night); }
.md-iris__dial { position: absolute; left: 56%; top: 50%; width: 34svh; height: 19svh; margin: -9.5svh 0 0 -17svh; overflow: visible; }
.md-iris__track { stroke: #6bb68f66; stroke-width: 10; stroke-linecap: round; }
.md-iris__arc { stroke: var(--md-ochre); stroke-width: 12; stroke-linecap: round; }
.md-iris__hex { fill: var(--md-forest); stroke: var(--md-sage); stroke-width: 3; }
.md-iris__dialtxt { font: 700 13px var(--gft-font-mono); fill: var(--md-ochre-l); letter-spacing: .06em; }

/* ================= #7 the dial interlude ================= */
:root[data-m-go] .md-s7[data-m="iris"]:not([data-m-in]) { clip-path: none; }
:root[data-m-go] .md-s7[data-m="iris"][data-m-in] { animation-name: none; }
.md-s7 { padding-block: 0; background: var(--md-night); }
.md-s7 > .gft-container { width: 100%; }
.md-dial { position: relative; min-height: max(100svh, 760px); overflow: clip; view-timeline-name: --md-dial; view-timeline-axis: block; }
.md-dial__dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.md-dial__head { position: absolute; left: var(--md-g); top: 7svh; width: min(30vw, 440px); z-index: 2; }
.md-dial .md-head__t { font-size: clamp(1.7rem, 2.3vw, 2.35rem); }
.md-dial .md-head__l { font-size: 17px; }
.md-dial__stage { position: absolute; left: 56%; top: 47%; width: 70svh; height: 70svh; margin: -35svh 0 0 -35svh; }
.md-dial__iris, .md-dial__svg { width: 100%; height: 100%; display: block; overflow: visible; }
.md-dial__close { stroke: var(--md-sage); stroke-width: 3; opacity: 0; }
.md-dial__track { stroke: #6bb68f40; stroke-width: 20; }
.md-dial__arc { stroke: var(--md-ochre-l); stroke-width: 20; opacity: 0; transition: opacity .45s; }
.md-dial__halo { stroke: var(--md-ochre-l); stroke-width: 3; opacity: 0; }
.md-dial__tick line { stroke: #cfe3da99; stroke-width: 2; }
.md-dial__tick text { font: 600 15px var(--gft-font-mono); fill: var(--md-lab-d); }
.md-dial__needle { transform: rotate(var(--rot, 17.14deg)); transition: transform .9s cubic-bezier(.3, 1.35, .5, 1); }
.md-dial__needle line { stroke: var(--md-ochre-l); stroke-width: 5; stroke-linecap: round; }
.md-dial__tip { fill: var(--md-ochre-l); stroke: var(--md-night); stroke-width: 2; }
.md-dial__hex { fill: var(--md-forest); stroke: var(--md-sage); stroke-width: 2.5; }
.md-dial__hub { fill: var(--md-ochre-l); }
.md-dial__facecap { font: 600 11.5px var(--gft-font-mono); fill: #e2eee8; letter-spacing: .03em; }
:root[data-m-go] .md-scene[data-md-vis] .md-dial__sway { animation-name: md-sway; animation-duration: 3.2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes md-sway { from { transform: rotate(-1deg); } to { transform: rotate(1deg); } }
.md-dial:not(:has(input[name="prog-b-md-metric"]:not([value="inv"]):checked)) :is(.md-dial__arc--inv), .md-dial:has(input[value="err"]:checked) .md-dial__arc--err,
.md-dial:has(input[value="lost"]:checked) .md-dial__arc--lost, .md-dial:has(input[value="acc"]:checked) .md-dial__arc--acc, .md-dial:has(input[value="rev"]:checked) .md-dial__arc--rev { opacity: 1; }
.md-dial:has(input[value="err"]:checked) { --rot: 51.43deg; }
.md-dial:has(input[value="lost"]:checked) { --rot: 102.86deg; }
.md-dial:has(input[value="acc"]:checked) { --rot: -17.14deg; }
.md-dial:has(input[value="rev"]:checked) { --rot: -34.29deg; }
.md-dial__reads { position: absolute; left: 18%; right: 18%; top: 60%; display: grid; text-align: center; }
.md-dial__read { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s linear .35s; }
.md-dial:not(:has(input[name="prog-b-md-metric"]:not([value="inv"]):checked)) .md-dial__read--inv, .md-dial:has(input[value="err"]:checked) .md-dial__read--err,
.md-dial:has(input[value="lost"]:checked) .md-dial__read--lost, .md-dial:has(input[value="acc"]:checked) .md-dial__read--acc, .md-dial:has(input[value="rev"]:checked) .md-dial__read--rev { opacity: 1; visibility: visible; transition: opacity .35s, visibility 0s; }
.md-dial__dir { font: 600 13px var(--gft-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--md-ochre-l); }
.md-dial__fig { margin-top: 4px; font: 800 clamp(44px, 4.4vw, 64px) / 1 var(--gft-font-display); letter-spacing: -.045em; color: #fff; }
.md-dial__txt { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--md-txt-d); }
.md-dial__chips { position: absolute; left: 56%; bottom: 4svh; width: min(700px, 50vw); transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; border: 0; z-index: 2; }
.md-dial__chips label { position: relative; }
.md-dial__chips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.md-dial__chips span { display: flex; align-items: center; min-height: 44px; padding: 6px 16px; border: 1px solid #cfe3da77; font: 600 15px var(--gft-font-display); color: var(--md-txt-d); background: #072d2bcc; }
.md-dial__chips input:checked + span { background: var(--md-ochre-l); color: var(--md-night); border-color: var(--md-ochre-l); }
.md-dial__chips input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.md-dial__qual { position: absolute; left: var(--md-g); bottom: 5svh; width: min(28vw, 420px); padding: 16px 18px; border-left: 3px solid var(--md-ochre-l); background: #072d2bd9; font-size: 15px; line-height: 1.55; color: var(--md-txt-d); z-index: 2; }
.md-dial__qual b { display: block; margin-bottom: 4px; color: #fff; font-size: 17px; }
.md-dial__dock { position: absolute; right: var(--md-g); top: 8svh; max-width: 280px; padding: 10px 14px; border: 1px solid #e3a64c88; background: #072d2bd9; font: 13px / 1.5 var(--gft-font-mono); letter-spacing: .03em; color: var(--md-txt-d); z-index: 2; }
.md-dial__dock b { display: block; color: var(--md-ochre-l); }
/* entrance: the dial opens by iris from the hexagon, the needle swings up to its value */
:root[data-m-go] .md-scene:not([data-md-in]) .md-dial__iris { clip-path: circle(12% at 50% 50%); }
:root[data-m-go] .md-scene[data-md-in] .md-dial__iris { animation-name: md-iris; animation-duration: 720ms; animation-timing-function: var(--md-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes md-iris { from { clip-path: circle(12% at 50% 50%); } to { clip-path: circle(75% at 50% 50%); } }
:root[data-m-go] .md-scene:not([data-md-in]) .md-dial__ret { transform: scaleY(.15); }
:root[data-m-go] .md-scene[data-md-in] .md-dial__ret { animation-name: md-needle-in; animation-duration: 600ms; animation-delay: 300ms; animation-timing-function: cubic-bezier(.3, 1.35, .5, 1); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes md-needle-in { from { transform: scaleY(.15); } to { transform: none; } }
:root[data-m-go] .md-scene:not([data-md-in]) :is(.md-dial__reads, .md-dial__chips label, .md-dial__qual) { opacity: .35; }
:root[data-m-go] .md-scene[data-md-in] :is(.md-dial__reads, .md-dial__chips label, .md-dial__qual) { animation-name: md-body-in; animation-duration: 520ms; animation-delay: 420ms; animation-timing-function: var(--md-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes md-body-in { from { opacity: .35; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ================= #8 capacity on forest ================= */
.md-s8 { background: linear-gradient(180deg, var(--md-night) 0, var(--md-forest) 180px, var(--md-forest) 76%, var(--md-night) 100%); }
.md-cap { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: clamp(28px, 3.5vw, 56px); align-items: center; min-height: calc(100svh - 120px); view-timeline-name: --md-cap; view-timeline-axis: block; }
.md-cap .md-head__t { font-size: clamp(1.8rem, 2.5vw, 2.6rem); max-width: 24ch; }
.md-cap__read { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin: 26px 0 0; }
.md-cap__read > div { border-top: 1px solid #9fd6b866; padding-top: 10px; }
.md-cap__hero { grid-column: 1 / -1; }
.md-cap__read dt { font: 600 13px var(--gft-font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--md-lab-d); }
.md-cap__read dd { margin: 4px 0 0; font: 800 40px / 1.05 var(--gft-font-display); letter-spacing: -.035em; color: #fff; }
.md-cap__hero dd { font-size: clamp(48px, 4.6vw, 64px); }
.md-cap__sliders { display: grid; gap: 16px; margin-top: 22px; }
.md-cap__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.md-cap__top label { font-size: 16px; font-weight: 600; color: #fff; }
.md-cap__pill { padding: 6px 14px; background: var(--md-ochre-l); color: var(--md-night); font: 800 22px / 1 var(--gft-font-display); letter-spacing: -.02em; }
.md-cap__slide input { width: 100%; min-height: 44px; accent-color: var(--md-ochre-l); }
.md-cap__ticks { display: flex; justify-content: space-between; font: 700 14px var(--gft-font-mono); color: #e6f2ec; }
.md-cap__note { margin-top: 16px; font-size: 15px; line-height: 1.55; color: #e2eee8; }
.md-cap__viz { margin: 0; position: relative; }
.md-cap__exit { width: min(70svh, 100%); aspect-ratio: 1; margin-inline: auto; }
.md-cap .md-lit { opacity: .35; }
.md-cap .md-ring--1 .md-lit { opacity: 1; }
.md-cap .md-ring--1 .md-ann-clip { clip-path: circle(75% at 50% 50%); }
.md-cap .md-ann { opacity: .14; }
.md-cap .md-hex { fill: none; }
.md-cap .md-hex__dot { opacity: 0; }
.md-cap__track { stroke: #cfe3da40; stroke-width: 8; stroke-linecap: round; }
.md-cap__fill { stroke: var(--md-ochre-l); stroke-width: 8; stroke-linecap: round; }
.md-cap__fillw { transform: scaleX(var(--md-share)); transition: transform .7s var(--md-ease); }
.md-cap__glint { stroke: #fff; stroke-width: 3; opacity: .7; }
.md-cap__scan { transform: translateX(calc(var(--md-share) * 212px)); }
.md-cap__tk line { stroke: #cfe3da99; stroke-width: 2; }
.md-cap__tk text { font: 600 17px var(--gft-font-mono); fill: var(--md-lab-d); }
.md-cap__stops circle { fill: var(--md-ochre-l); }
.md-cap__stops { opacity: 0; }
.md-cap__discw { transform: scale(var(--md-disc)); transition: transform .7s var(--md-ease); }
.md-cap__disc { fill: var(--md-ochre-l); stroke: #fff; stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.md-cap__lead { stroke: #fff; stroke-width: 1.5; }
.md-cap__dl { font: 700 16px var(--gft-font-mono); letter-spacing: .06em; fill: #fff; }
.md-cap .md-rings [data-m-live~="float"] { overflow-anchor: none; }
.md-cap__cap { margin-top: 8px; text-align: center; font: 13px / 1.5 var(--gft-font-mono); letter-spacing: .03em; color: var(--md-lab-d); }
/* entrance: read-outs and sliders tie on along a thread; the disc grows inside ring 01 */
:root[data-m-go] .md-scene:not([data-md-in]) :is(.md-cap__read > div, .md-cap__slide) { opacity: .35; transform: translate(-16px, 8px) rotate(-1.5deg); }
:root[data-m-go] .md-scene[data-md-in] :is(.md-cap__read > div, .md-cap__slide) { animation-name: md-knot; animation-duration: 560ms; animation-delay: calc(140ms + var(--k) * 70ms); animation-timing-function: var(--md-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes md-knot { from { opacity: .35; transform: translate(-16px, 8px) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
:root[data-m-go] .md-scene:not([data-md-in]) .md-cap__disc { transform: scale(0); }
:root[data-m-go] .md-scene[data-md-in] .md-cap__disc { animation-name: md-disc; animation-duration: 600ms; animation-delay: 320ms; animation-timing-function: cubic-bezier(.3, 1.4, .5, 1); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes md-disc { from { transform: scale(0); } to { transform: none; } }
:root[data-m-go] .md-scene:not([data-md-in]) .md-cap .md-rings { opacity: .5; transform: scale(.94); }
:root[data-m-go] .md-scene[data-md-in] .md-cap .md-rings { animation-name: md-ring-in; animation-duration: 640ms; animation-timing-function: var(--md-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }

/* ================= #9 the closing radius gauge ================= */
.md-s9 { padding-block: 0; background: var(--md-night); }
.md-s9 > .gft-container { width: 100%; }
.md-end { --fh: max(100svh, 780px); position: relative; height: var(--fh); overflow: clip; --fill: 1; --len: 1.25; }
.md-end[data-stop="1"] { --fill: .08; --len: .1875; }
.md-end[data-stop="2"] { --fill: .32; --len: .375; }
.md-end[data-stop="3"] { --fill: .56; --len: .6875; }
.md-end__rings { position: absolute; left: 24%; top: 64%; width: calc(var(--fh) * .84); height: calc(var(--fh) * .84); margin: calc(var(--fh) * -.42) 0 0 calc(var(--fh) * -.42); }
.md-end .md-rings { --ang: 0deg; --len: inherit; }
.md-end .md-lit { opacity: .18; }
.md-end .md-ring--1 .md-lit { opacity: 1; }
.md-end .md-ring--1 .md-ann-clip { clip-path: circle(75% at 50% 50%); }
.md-end:is([data-stop="3"], [data-stop="4"]) .md-ring--2 .md-lit, .md-end[data-stop="4"] .md-ring--3 .md-lit { opacity: 1; }
.md-end:is([data-stop="3"], [data-stop="4"]) .md-ring--2 .md-ann-clip, .md-end[data-stop="4"] .md-ring--3 .md-ann-clip { clip-path: circle(75% at 50% 50%); }
.md-end .md-ann { opacity: .12; }
:root[data-m-go] .md-scene[data-md-vis] .md-end .md-ann { animation-name: md-ann-breathe; animation-duration: 5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
.md-end .md-thread__line { stroke-width: 5; }
.md-gate--end { stroke: var(--md-ochre-l); stroke-width: 8; stroke-dasharray: 6 7; }
.md-gate__crawl { stroke: #e3a64c88; stroke-width: 2; stroke-dasharray: 2 6; }
.md-end__crawl { transform-origin: 320px 320px; }
:root[data-m-go] .md-scene[data-md-vis] .md-end__crawl { animation-name: md-crawl; animation-duration: 4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes md-crawl { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
.md-end__disc { fill: var(--md-ochre-l); stroke: #fff; stroke-width: 2; }
.md-end .md-hex__dot { opacity: 0; }
/* The factory callout and the way home are one stacked tag (one anchor point) so the link can never overprint the
   callout; the sources drawer sits under the right column, clear of the ring set. */
.md-end__tag { position: absolute; left: 50%; top: calc(50% + 11%); transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.md-end__factory { position: relative; width: max-content; max-width: 30ch; padding: 6px 12px; background: #072d2be6; border: 1px solid #6bb68f66; text-align: center; font: 13px / 1.45 var(--gft-font-mono); letter-spacing: .02em; color: var(--md-txt-d); }
.md-end__factory b { display: block; color: var(--md-ochre-l); }
.md-end__home { position: relative; white-space: nowrap; background: #072d2be6; border: 1px solid #6bb68f40; min-height: 44px; display: inline-flex; align-items: center; padding: 4px 12px; color: var(--md-sage-l); font-size: 15px; font-weight: 600; text-underline-offset: 4px; }
.md-end__right { position: absolute; left: 51%; right: var(--md-g); top: 5svh; }
.md-end .md-head__t { font-size: clamp(1.7rem, 2.1vw, 2.2rem); max-width: 30ch; }
.md-end .md-head__l { font-size: 17px; margin-top: 10px; }
.md-end__reads { display: grid; margin-top: 12px; }
.md-end__read { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s linear .35s; }
.md-end[data-stop="1"] .md-end__read--1, .md-end[data-stop="2"] .md-end__read--2, .md-end[data-stop="3"] .md-end__read--3, .md-end[data-stop="4"] .md-end__read--4 { opacity: 1; visibility: visible; transition: opacity .35s, visibility 0s; }
.md-end__k { font: 600 13px var(--gft-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--md-ochre-l); }
.md-end__fig { margin-top: 4px; font: 800 clamp(44px, 4vw, 60px) / 1 var(--gft-font-display); letter-spacing: -.045em; color: #fff; }
.md-end__h { margin-top: 8px; font-size: 17px; font-weight: 700; line-height: 1.4; color: #fff; }
.md-end__t { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--md-txt-d); }
.md-end__line { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--md-lab-d); padding-left: 12px; border-left: 3px solid var(--md-ochre-l); }
.md-end__lane { position: absolute; left: calc(24% + var(--fh) * .42); right: 0; top: 64%; }
.md-end__barhead { position: absolute; left: 8%; right: var(--md-g); bottom: 32px; display: flex; justify-content: space-between; align-items: center; gap: 12px; pointer-events: none; }
.md-end__barlab { font: 700 13px var(--gft-font-mono); letter-spacing: .06em; text-transform: uppercase; color: #e2eee8; }
.md-end__barout { padding: 5px 12px; background: var(--md-ochre-l); color: var(--md-night); font: 800 20px / 1.05 var(--gft-font-display); letter-spacing: -.02em; }
.md-end__track { position: absolute; left: 0; right: 0; top: -2px; height: 5px; background: #e3a64c33; }
.md-end__fill { position: absolute; inset: 0; background: var(--md-ochre-l); transform-origin: 0 50%; transform: scaleX(var(--fill)); transition: transform .8s var(--md-ease); }
.md-end__pulse { position: absolute; inset: 0; transform: translateX(0); }
.md-end__pulse::before { content: ''; position: absolute; left: -6px; top: -4px; width: 13px; height: 13px; border-radius: 50%; background: #fff3d8; }
:root[data-m-go] .md-scene[data-md-vis] .md-end__pulse { animation-name: md-lane; animation-duration: 5s; animation-timing-function: var(--gft-ease-in-out); animation-iteration-count: infinite; }
@keyframes md-lane { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(calc(var(--fill) * 100%)); opacity: 0; } }
.md-end__pulse { opacity: 0; }
.md-end__range { position: absolute; left: calc(8% - 16px); width: calc(72% + 32px); top: -22px; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.md-end__range::-webkit-slider-runnable-track { height: 44px; background: transparent; }
.md-end__range::-moz-range-track { height: 44px; background: transparent; }
.md-end__range::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: 6px; border-radius: 50%; background: var(--md-ochre-l); border: 4px solid var(--md-night); box-shadow: 0 0 0 2px var(--md-ochre-l); }
.md-end__range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--md-ochre-l); border: 4px solid var(--md-night); box-shadow: 0 0 0 2px var(--md-ochre-l); }
.md-end__range:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.md-end__stops { list-style: none; margin: 0; padding: 0; }
.md-end__stop { position: absolute; left: calc(8% + 24% * var(--k)); top: 30px; width: 22%; translate: -50% 0; display: grid; justify-items: center; text-align: center; }
.md-end__stop::before { content: ''; position: absolute; top: -30px; left: 50%; width: 2px; height: 26px; background: #e3a64c77; }
.md-end__stop > button { min-height: 44px; padding: 8px 16px; border: 1.5px solid var(--md-ochre-l); background: #072d2b; color: #fff; font: 700 15px var(--gft-font-display); cursor: pointer; }
.md-end__stop > button b { font-family: var(--gft-font-mono); color: var(--md-ochre-l); }
.md-end__stop > button[aria-pressed="true"] { background: var(--md-ochre-l); color: var(--md-night); }
.md-end__stop > button[aria-pressed="true"] b { color: var(--md-night); }
.md-end__doors { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }
.md-end__doors a { display: inline-flex; align-items: center; min-height: 40px; padding: 2px 4px; color: #dff0e8; font-size: 15px; font-weight: 500; line-height: 1.35; text-underline-offset: 3px; }
.md-end__drop { position: absolute; right: calc(var(--md-g) + 14px); top: 64%; bottom: 0; width: 5px; }
.md-end__drop i { display: block; height: 100%; background: var(--md-ochre-l); transform-origin: 50% 0; transform: scaleY(0); transition: transform .7s var(--md-ease) .3s; }
.md-end[data-stop="4"] .md-end__drop i { transform: none; }
.md-end__src { position: absolute; left: 51%; bottom: 24px; z-index: 3; }
.md-end__src summary { min-height: 44px; display: inline-flex; align-items: center; padding: 4px 12px; border: 1px solid #cfe3da66; color: var(--md-txt-d); font: 600 14px var(--gft-font-mono); cursor: pointer; }
.md-end__src > div { position: absolute; left: 0; bottom: calc(100% + 8px); width: min(560px, 84vw); padding: 16px 18px; background: var(--md-night); border: 1px solid #6bb68f77; font-size: 15px; line-height: 1.55; color: var(--md-txt-d); }
/* entrance: stops beat in along the radius */
:root[data-m-go] .md-scene:not([data-md-in]) .md-end__track { clip-path: inset(0 85% 0 0); }
:root[data-m-go] .md-scene[data-md-in] .md-end__track { animation-name: md-unspool; animation-duration: 640ms; animation-timing-function: var(--md-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go] .md-scene:not([data-md-in]) .md-end__stop { opacity: .35; transform: translateY(16px) scaleY(.9); }
:root[data-m-go] .md-scene[data-md-in] .md-end__stop { animation-name: md-reed; animation-duration: 520ms; animation-delay: calc(260ms + var(--k) * 90ms); animation-timing-function: var(--md-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes md-reed { from { opacity: .35; transform: translateY(16px) scaleY(.9); } to { opacity: 1; transform: none; } }
:root[data-m-go] .md-scene:not([data-md-in]) .md-end__rings { opacity: .5; transform: scale(.93); }
:root[data-m-go] .md-scene[data-md-in] .md-end__rings { animation-name: md-ring-in; animation-duration: 700ms; animation-timing-function: var(--md-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }

/* ================= scroll-driven hand-overs (longhands, guarded) ================= */
@supports (animation-timeline: view()) {
  @media (min-width: 1001px) {
    /* 2 -> 3: the radius lies down as the station axis; the rings shrink to the locator at its origin */
    :root[data-m-go] .md-rad__exit {
      animation-name: md-rad-exit; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --md-rad; animation-range-start: exit 0%; animation-range-end: exit 75%;
    }
    @keyframes md-rad-exit { from { transform: none; opacity: 1; } to { transform: translate(-4%, 18%) scale(.28); opacity: .4; } }
    :root[data-m-go] .md-rad__line i {
      animation-name: md-lie; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --md-rad; animation-range-start: entry 40%; animation-range-end: exit 40%;
    }
    @keyframes md-lie { from { transform: scaleX(.22); } to { transform: none; } }
    /* 4 -> 5: the stage zooms on ring 01 as the pin releases */
    :root[data-m-go] .md-sell__zoom {
      animation-name: md-sell-zoom; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --md-sell; animation-range-start: exit 0%; animation-range-end: exit 80%;
    }
    @keyframes md-sell-zoom { from { transform: none; } to { transform: scale(2.6); } }
    :root[data-m-go] .md-sell__chips {
      animation-name: md-fade-out; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --md-sell; animation-range-start: exit 0%; animation-range-end: exit 25%;
    }
    /* 5 -> 6: the arc contracts toward the centre where the ring set waits; the bars fold onto the radius */
    :root[data-m-go] .md-dig__exit {
      animation-name: md-dig-exit; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --md-dig; animation-range-start: exit 0%; animation-range-end: exit 90%;
    }
    @keyframes md-dig-exit { from { transform: none; } to { transform: translateX(34vw) scale(.42); } }
    :root[data-m-go] .md-dig__fold {
      animation-name: md-fold; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --md-dig; animation-range-start: exit 0%; animation-range-end: exit 50%;
    }
    @keyframes md-fold { from { transform: none; } to { transform: scaleY(.04); } }
    /* 7 -> 8: the gauge closes back into ring 03 late in exit */
    :root[data-m-go] .md-dial__gauge {
      animation-name: md-fade-out; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --md-dial; animation-range-start: exit 45%; animation-range-end: exit 85%;
    }
    :root[data-m-go] .md-dial__close {
      animation-name: md-fade-up; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --md-dial; animation-range-start: exit 45%; animation-range-end: exit 85%;
    }
    /* 8 -> 9: the share bar becomes the radius arm and gains its four stops */
    :root[data-m-go] .md-cap__arm {
      animation-name: md-arm; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --md-cap; animation-range-start: exit 0%; animation-range-end: exit 60%;
    }
    @keyframes md-arm { from { transform: scaleX(0); } to { transform: none; } }
    :root[data-m-go] .md-cap__stops {
      animation-name: md-fade-up; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --md-cap; animation-range-start: exit 20%; animation-range-end: exit 60%;
    }
  }
  /* 3 -> 4 and 6 -> 7: the two changes of ground open from the motif */
  :root[data-m-go] .md-coil__paper {
    animation-name: md-coil-iris; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: --md-coil; animation-range-start: cover 0%; animation-range-end: cover 45%;
  }
  @keyframes md-coil-iris { from { clip-path: circle(52% at 58% 50%); } to { clip-path: circle(140% at 58% 50%); } }
  :root[data-m-go] .md-coil__line i {
    animation-name: md-coil-line; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: --md-coil; animation-range-start: cover 5%; animation-range-end: cover 45%;
  }
  @keyframes md-coil-line { from { transform: none; } to { transform: scaleX(0); } }
  :root[data-m-go] .md-coil__rings {
    animation-name: md-coil-ring; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: --md-coil; animation-range-start: cover 0%; animation-range-end: cover 50%;
  }
  @keyframes md-coil-ring { from { transform: scale(.78); opacity: .75; } to { transform: none; opacity: 1; } }
  :root[data-m-go] .md-iris__night {
    animation-name: md-iris-night; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: --md-iris; animation-range-start: cover 0%; animation-range-end: cover 45%;
  }
  @keyframes md-iris-night { from { clip-path: circle(36% at 56% 52%); } to { clip-path: circle(140% at 56% 52%); } }
}
@keyframes md-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes md-fade-up { from { opacity: 0; } to { opacity: 1; } }
.md-coil__line i { transform: scaleX(0); }
@supports (animation-timeline: view()) { :root[data-m-go] .md-coil__line i { transform: none; } }
.md-cap__arm line { stroke: var(--md-ochre-l); stroke-width: 4; stroke-linecap: round; }
.md-cap__arm { transform: scaleX(0); }

/* ================= tablet ================= */
@media (max-width: 1100px) {
  .md-led__pins { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md-pin::before { display: none; }
  .md-dial__head { width: min(34vw, 400px); }
}
@media (max-width: 1000px) {
  .md-rad { grid-template-columns: 1fr; min-height: 0; padding-bottom: 110px; }
  .md-rad__stage { height: auto; }
  .md-rad__exit, .md-rad__in { height: auto; }
  .md-rad__in { width: min(80vw, 520px); }
  .md-rad__in .md-rings { height: auto; aspect-ratio: 1; }
  .md-rad__cap { position: static; margin-top: 8px; }
  .md-led__main { grid-template-columns: 1fr; }
  .md-led__top .md-head, .md-seg__head { grid-template-columns: 1fr; }
  .md-led__scroll { overflow-x: auto; scroll-snap-type: x mandatory; }
  .md-led__svg { min-width: 780px; }
  .md-sell__card { width: min(460px, 52vw); }
  .md-sell__rings { left: 66%; }
  .md-dig { grid-template-columns: 1fr; min-height: 0; }
  .md-dig__stage { min-height: 0; padding: 24px 12px; }
  .md-dig__ring { width: min(88vw, 480px); height: min(88vw, 480px); }
  .md-dig__bars { max-width: 480px; padding: 20px 20px 30px; }
  .md-dig__side { grid-column: 1; }
  .md-seg__tri { grid-template-columns: 1fr; }
  .md-seg__centre { order: -1; }
  .md-seg__ring { width: min(80vw, 520px); }
  .md-needs { grid-template-columns: 1fr; }
  .md-dial { min-height: 0; display: flex; flex-direction: column; padding: 56px var(--md-g) 40px; gap: 20px; }
  .md-dial__head, .md-dial__stage, .md-dial__chips, .md-dial__qual, .md-dial__dock { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; max-width: none; margin: 0; transform: none; }
  .md-dial__stage { width: min(92vw, 560px); height: min(92vw, 560px); align-self: center; }
  .md-dial__chips { justify-content: flex-start; }
  .md-cap { grid-template-columns: 1fr; }
  .md-cap__viz { order: -1; }
  .md-cap__exit { width: min(80vw, 560px); }
  .md-end { height: auto; padding: 56px var(--md-g) 48px; display: flex; flex-direction: column; gap: 24px; }
  .md-end__right { position: relative; left: auto; right: auto; top: auto; order: -1; }
  .md-end__rings { position: relative; left: auto; top: auto; width: min(80vw, 520px); height: auto; margin: 0 auto; }
  .md-end__rings .md-rings { height: auto; aspect-ratio: 1; }
  .md-end__lane { position: relative; left: auto; right: auto; top: auto; padding-left: 26px; }
  .md-end__barhead { position: static; margin-bottom: 8px; }
  .md-end__track { left: 8px; right: auto; top: 0; bottom: 0; width: 5px; height: auto; }
  .md-end__fill { transform-origin: 50% 0; transform: scaleY(var(--fill)); }
  .md-end__pulse { display: none; }
  .md-end__range { position: relative; left: auto; top: auto; width: 100%; margin-bottom: 12px; }
  .md-end__range::-webkit-slider-runnable-track { height: 44px; background: linear-gradient(#e3a64c55, #e3a64c55) center / 100% 4px no-repeat; }
  .md-end__stops { display: grid; gap: 14px; }
  .md-end__stop { position: relative; left: auto; top: auto; width: auto; translate: none; justify-items: start; text-align: left; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: start; }
  .md-end__stop::before { top: 20px; left: -22px; width: 14px; height: 2px; }
  .md-end__doors { margin: 0; }
  .md-end__drop { display: none; }
  .md-end__tag { position: static; transform: none; margin: 8px auto 0; }
  .md-end__factory, .md-end__home { position: static; transform: none; }
  .md-end__src { position: relative; left: auto; bottom: auto; }
  .md-end__src > div { position: static; width: auto; margin-top: 8px; }
}

/* ================= phone ================= */
@media (max-width: 640px) {
  .gft-splash[data-splash="prog-b-market-and-demand"] .gft-splash__content { padding-bottom: calc(92vw + 150px); }
  .gft-splash[data-splash="prog-b-market-and-demand"] h1 { font-size: 34px; }
  .gft-splash.gft-splash--instrument[data-splash="prog-b-market-and-demand"] .gft-splash__structure { inset: auto 0 calc(var(--splash-strip-h, 70px) + 8px) 0; height: calc(92vw + 136px); }
  .gft-splash[data-splash="prog-b-market-and-demand"] .gft-splash__structure::after { display: none; }
  .md-sp__move { position: absolute; left: 4vw; right: auto; top: 0; bottom: auto; width: 92vw; height: 92vw; margin: 0; }
  .md-sp__cardmove { top: calc(92vw + 4px); right: auto; left: 16px; width: calc(100% - 32px); }
  .md-sp__card { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 8px 12px; box-shadow: none; }
  .md-sp__fig { margin: 0; font-size: 22px; }
  .md-sp__sub { margin: 0; flex-basis: 100%; }
  .md-sp__rail { left: 16px; right: 16px; bottom: 0; }
  .md-sp__hint { display: none; }
  .md-sp__rail label { flex: 1; }
  .md-sp__rail span { justify-content: center; padding: 6px 4px; font-size: 13px; gap: 4px; text-align: center; }
  .md-head__t { font-size: 30px; }
  .md-rad__stats { grid-template-columns: 1fr; }
  .md-rad__fig { font-size: 44px; }
  .md-rad__tabs { width: 100%; }
  .md-rad__tabs label { flex: 1; }
  .md-rad__tabs span { justify-content: center; padding: 6px 4px; font-size: 15px; flex-direction: column; gap: 0; }
  .md-rad__stations { font-size: 13px; letter-spacing: 0; }
  .md-led__svg { min-width: 760px; }
  .md-led__pins { grid-template-columns: 1fr; }
  .md-led__fig { font-size: 40px; }
  .md-sell__stage { height: 42svh; background: var(--md-paper); border-bottom: 1px solid #14231f22; z-index: 2; }
  .md-sell__rings { left: 30%; top: 46%; width: 32svh; height: 32svh; margin: -16svh 0 0 -16svh; }
  .md-sell .md-leads, .md-sell .md-lab { display: none; }
  .md-sell__now { display: grid; position: absolute; left: 60%; right: 16px; top: 18%; }
  .md-sell__now span { grid-area: 1 / 1; opacity: 0; font: 600 13px / 1.4 var(--gft-font-mono); color: var(--md-mute); transition: opacity .35s; }
  .md-sell__now b { display: block; font: 800 26px / 1.1 var(--gft-font-display); color: var(--md-forest); letter-spacing: -.02em; }
  .md-sell[data-step="1"] [data-now="1"], .md-sell[data-step="2"] [data-now="2"], .md-sell[data-step="3"] [data-now="3"], .md-sell[data-step="4"] [data-now="4"] { opacity: 1; }
  .md-sell:not(:has(input[name="prog-b-md-vendor"][value="b"]:checked)) [data-now="4"] .md-lead__fb, .md-sell:has(input[name="prog-b-md-vendor"][value="b"]:checked) [data-now="4"] .md-lead__fa { display: none; }
  .md-sell__now .md-lead__fa, .md-sell__now .md-lead__fb { opacity: 1; }
  .md-sell__chips { left: 12px; right: 12px; bottom: 8px; justify-content: space-between; gap: 4px; }
  .md-sell__chips a { padding: 4px 8px; font-size: 13px; }
  .md-sell__chips a span { display: none; }
  .md-sell__track { margin-top: 0; pointer-events: auto; }
  .md-sell__intro { min-height: 0; max-width: none; padding: 36px 16px 12px; }
  .md-sell__step { min-height: 72svh; padding-inline: 16px; align-items: flex-start; padding-top: 24px; }
  .md-sell__step--last { min-height: 80svh; }
  .md-sell__card { width: 100%; }
  .md-dig__stage { padding: 12px 0; }
  .md-dig__bars { padding: 16px 14px 28px; }
  .md-dig__boxhead { flex-direction: column; gap: 8px; }
  .md-dig__pctwrap { text-align: left; }
  .md-dig__fold { height: 220px; padding: 0 12px 0 20px; }
  .md-dig__bar { width: 32%; height: 180px; }
  .md-dig__bv { font-size: 16px; }
  .md-dig__growth { bottom: 64px; left: 34%; width: 32%; }
  .md-dig__fig, .md-seg__read b { font-size: 36px; }
  .md-seg__switch span { padding: 6px 8px; font-size: 14px; }
  .md-seg__read { grid-template-columns: 1fr; gap: 4px; }
  .md-seg__tri { grid-template-areas: 'c' 'f'; }
  .md-seg__centre { grid-area: c; }
  .md-seg__flank { grid-area: f; }
  .md-seg:not(:has(input[name="prog-b-md-seg"][value="b"]:checked)) .md-seg__flank--b, .md-seg:has(input[name="prog-b-md-seg"][value="b"]:checked) .md-seg__flank--a { opacity: 0; visibility: hidden; }
  .md-needs-deck { padding: 16px 14px; }
  .md-dial__fig, .md-end__fig { font-size: 44px; }
  .md-dial__reads { left: 8%; right: 8%; top: 58%; }
  .md-dial__txt { font-size: 13px; }
  .md-cap__read dd { font-size: 30px; }
  .md-cap__hero dd { font-size: 44px; }
}