/* /tools/kpi-cascade/ below the splash. Classes prefixed kpi-, keyframes kpi-. Grounds: night #072d2b, deep #05302d,
   forest #0e4d4a, paper #f6f4ef, paper-2 #efe9dc. Animated properties: transform, opacity, clip-path, filter only.
   Pre-states only under :root[data-m-go]; a stage starts once ([data-kpi-on], set by film.ts at 62 percent of the
   viewport). Lives run only while on screen ([data-m-on]) and never under Calm or reduced motion. */
.kpi-lt{--kf-production:#2a6e50;--kf-quality:#2c3e7a;--kf-delivery:#80520e;--kf-cost:#6b3f8f;--kf-people:#a03f26;--kf-sustainability:#1d6560}
.kpi-lt [data-f=production]{--fc:var(--kf-production)}.kpi-lt [data-f=quality]{--fc:var(--kf-quality)}.kpi-lt [data-f=delivery]{--fc:var(--kf-delivery)}.kpi-lt [data-f=cost]{--fc:var(--kf-cost)}.kpi-lt [data-f=people]{--fc:var(--kf-people)}.kpi-lt [data-f=sustainability]{--fc:var(--kf-sustainability)}
.kpi-sec{--g:max(48px,calc((100% - 1440px) / 2));--cw:min(1440px,calc(100% - 96px));position:relative;padding-block:clamp(72px,9svh,112px);font-variant-numeric:tabular-nums}
.kpi-dk{color:#eef4f0;--tx2:#d3e2d9;--ink:#eef4f0}
.kpi-lt{color:#0b2b29;--tx2:#3e524a;--ink:#0b2b29}
.kpi-sec h2{font-size:clamp(2.3rem,4.2vw,4.4rem);max-width:17ch}
.kpi-sec p{font-size:17px;line-height:1.6}
.kpi-kick{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:500 13px/1.5 var(--gft-font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tx2)}
.kpi-kick::before{content:'';width:22px;height:1px;background:currentColor}
.kpi-note{font:13px/1.7 var(--gft-font-mono)!important;letter-spacing:.02em;color:var(--tx2);max-width:72ch}
.kpi-sec [hidden]{display:none!important}
.kpi-sr{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}
.kpi-buttons{display:flex;flex-wrap:wrap;gap:10px}
.kpi-sec button{min-height:44px;padding:10px 16px;font:600 15px/1.2 var(--gft-font-display);border:1px solid currentColor;background:transparent;color:inherit}
.kpi-dk button{border-color:#a9c9b8}
.kpi-sec button[aria-pressed=true]{background:#f1c480;color:#072d2b;border-color:#f1c480}
.kpi-lt button[aria-pressed=true]{background:#0e4d4a;color:#fff;border-color:#0e4d4a}
.kpi-sec button:disabled{opacity:.5}
.kpi-sec select,.kpi-sec input:not([type=radio]):not([type=range]){width:100%;min-height:48px;padding:10px 12px;font:16px var(--gft-font-display);border:1px solid #8aa597;background:#fff;color:#0b2b29;border-radius:0}
.kpi-dk select{background:#05302d;color:#eef4f0;border-color:#8fb3a2}
.kpi-sec label{display:grid;gap:6px;font:500 13px/1.4 var(--gft-font-mono);letter-spacing:.06em;color:var(--tx2)}
.kpi-status{font:13px/1.6 var(--gft-font-mono);color:var(--tx2);min-height:21px;margin-top:8px}
.kpi-error{margin-top:16px;padding:14px 18px;border-left:3px solid #e9ad52;background:#3a2a0e;color:#fff;font-size:15px}
.kpi-noscript{margin-top:16px;font-size:15px}
/* woven grounds: no frame more than a third flat */
.kpi-console{background:#05302d;background-image:linear-gradient(#b4d4c512 1px,transparent 1px),linear-gradient(90deg,#b4d4c512 1px,transparent 1px);background-size:96px 96px}
.kpi-editor{background:#f6f4ef;background-image:repeating-linear-gradient(90deg,#0e4d4a12 0 1px,transparent 1px 96px),repeating-linear-gradient(0deg,#0e4d4a09 0 1px,transparent 1px 96px)}
.kpi-owners{background:#072d2b;background-image:linear-gradient(#b4d4c514 1px,transparent 1px),linear-gradient(90deg,#b4d4c514 1px,transparent 1px);background-size:96px 96px}
.kpi-compare,.kpi-units{background:#f6f4ef;background-image:repeating-linear-gradient(90deg,#0e4d4a12 0 1px,transparent 1px 96px),repeating-linear-gradient(0deg,#0e4d4a09 0 1px,transparent 1px 96px)}
.kpi-reg{background:#05302d;background-image:linear-gradient(#b4d4c510 1px,transparent 1px),linear-gradient(90deg,#b4d4c510 1px,transparent 1px);background-size:96px 96px}
.kpi-spine{background:#0e4d4a;background-image:linear-gradient(#d6efe414 1px,transparent 1px),linear-gradient(90deg,#d6efe414 1px,transparent 1px);background-size:96px 96px}
.kpi-close{background:#072d2b;background-image:linear-gradient(#b4d4c512 1px,transparent 1px),linear-gradient(90deg,#b4d4c512 1px,transparent 1px);background-size:96px 96px}

/* ---------------- hand-overs: the motif crosses each change of ground */
.kpi-pull,.kpi-dropthread,.kpi-ghosta,.kpi-tagthreads,.kpi-knotsin,.kpi-pull5,.kpi-tofoot,.kpi-warplines{position:absolute;z-index:3;pointer-events:none;overflow-anchor:none}
.kpi-warplines{inset:0;z-index:0;background-image:linear-gradient(90deg,transparent calc(var(--g) + 22px),#c98a2b2e calc(var(--g) + 22px) calc(var(--g) + 24px),transparent calc(var(--g) + 24px) calc(var(--g) + 46px),#0e4d4a1f calc(var(--g) + 46px) calc(var(--g) + 47px),transparent calc(var(--g) + 47px) calc(50% - 1px),#0e4d4a22 calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px) calc(100% - var(--g) - 48px),#c98a2b29 calc(100% - var(--g) - 48px) calc(100% - var(--g) - 46px),transparent calc(100% - var(--g) - 46px))}
.kpi-sec>.gft-container{position:relative;z-index:1}
.kpi-pull{left:calc(var(--g) + var(--cw) * .34 + 104px);bottom:-150px;height:260px;width:4px}
.kpi-pull i{position:absolute;inset:0;background:linear-gradient(#7fd0a3,#7fd0a3 70%,#7fd0a300)}
.kpi-pull b{position:absolute;left:16px;top:28px;white-space:nowrap;font:500 13px var(--gft-font-mono);letter-spacing:.1em;text-transform:uppercase;color:#d3e2d9;background:#05302d;padding:3px 8px}
.kpi-dropthread{left:calc(var(--g) + 38px);bottom:-84px;height:190px;width:3px}
.kpi-dropthread i{position:absolute;inset:0;background:repeating-linear-gradient(#e9ad52 0 10px,transparent 10px 18px)}
.kpi-dropthread b{position:absolute;left:14px;top:12px;white-space:nowrap;font:500 13px var(--gft-font-mono);letter-spacing:.06em;color:#f1c480;background:#072d2b;padding:3px 8px}
.kpi-ghosta{right:var(--g);left:auto;bottom:14px;display:flex;align-items:center;gap:14px}
.kpi-ghosta i{width:34px;height:24px;border:3px solid #c98a2b;border-radius:50%}
.kpi-ghosta b{font:700 15px var(--gft-font-mono);color:#072d2b;background:#f1c480;padding:2px 8px}
.kpi-tagthreads{top:0;height:24px;left:24px;right:24px;--tw:calc((100% - 28px) / 3);--t0:calc(var(--tw) / 2)}
.kpi-tagthreads i{position:absolute;top:0;height:100%;width:2px;background:linear-gradient(#80520e00,#80520e 30%);left:var(--t0)}
.kpi-tagthreads i:nth-child(2){left:calc(var(--t0) + var(--tw) + 14px)}
.kpi-tagthreads i:nth-child(3){left:calc(var(--t0) + var(--tw) * 2 + 28px)}
.kpi-knotsin{top:-14px;left:var(--g);display:flex;gap:min(4.2vw,64px)}
.kpi-knotsin i{width:26px;height:26px;border-radius:50%;background:#e9ad52;box-shadow:0 0 0 4px #05302d}
/* End the bundles in the section's empty bottom padding, before the next reading surface. */
.kpi-pull5{bottom:0;height:64px;left:calc(var(--g) + var(--cw) * .2);display:flex;gap:12px}
.kpi-pull5 i{width:3px;height:100%;background:linear-gradient(#e9ad5200,#e9ad52 35%,#e9ad52 80%,#e9ad5200)}
.kpi-pull5--b{left:auto;right:calc(var(--g) + var(--cw) * .2)}
.kpi-tofoot{bottom:0;right:calc(var(--g) + 96px);width:52px;height:160px;background:repeating-linear-gradient(90deg,#e9ad52 0 2px,transparent 2px 12.5px);-webkit-mask:linear-gradient(#0000,#000 40%);mask:linear-gradient(#0000,#000 40%)}
.kpi-tofoot i{display:none}
body[data-page="kpi-cascade"] .gft-footer__next{position:relative}
body[data-page="kpi-cascade"] .gft-footer__next::before{content:'';position:absolute;top:-1px;right:96px;width:52px;height:calc(50% + 12px);background:repeating-linear-gradient(90deg,#e9ad52 0 2px,transparent 2px 12.5px);pointer-events:none}

/* ---------------- 1 console (deep) */
.kpi-console__head{margin-bottom:40px}
.kpi-console__head h2{max-width:24ch;font-size:clamp(2.2rem,3.6vw,3.8rem)}
.kpi-console__grid{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);gap:clamp(28px,3vw,48px);padding-left:var(--g)}
.kpi-gauge{padding:28px 28px 24px;border:1px solid #6bb68f55;background:#072d2bcc;align-self:start}
.kpi-gauge h3{font-size:clamp(1.5rem,2vw,2rem);margin-bottom:12px}
.kpi-gauge__meter svg{width:100%;max-width:380px}
.kpi-hm-shaft{stroke:#d3e2d9;stroke-width:3}
.kpi-hm-eye path{stroke:#d3e2d9;stroke-width:1.5}
.kpi-hm-ring{fill:#072d2b;stroke:#d3e2d9;stroke-width:2}
.kpi-hm-fill{fill:#f1c480;opacity:0}
.kpi-hm-eye[data-on=true] .kpi-hm-ring{stroke:#f1c480}
.kpi-hm-eye[data-on=true] .kpi-hm-fill{opacity:1}
.kpi-hm-knot circle{fill:#e9ad52}.kpi-hm-knot path{stroke:#072d2b;stroke-width:2.5}
.kpi-hm-more{font:700 20px var(--gft-font-mono);fill:#f1c480}
.kpi-hm-ghost path,.kpi-hm-ghost ellipse{fill:none;stroke:#c98a2b;stroke-width:2.5;stroke-dasharray:6 5}
.kpi-load{display:flex;align-items:flex-end;gap:16px;margin-top:8px}
.kpi-load output{font:850 clamp(5rem,7vw,6.6rem)/.85 var(--gft-font-display);letter-spacing:-.06em;color:#f1c480}
.kpi-load span{font:14px/1.5 var(--gft-font-mono);color:var(--tx2);padding-bottom:8px}
.kpi-gauge[data-over=true] .kpi-load output{color:#ffb08f}
.kpi-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0 22px;padding-block:14px;border-block:1px solid #ffffff2a}
.kpi-facts output{display:block;font:800 30px/1 var(--gft-font-display)}
.kpi-facts span{font:13px/1.4 var(--gft-font-mono);color:var(--tx2)}
.kpi-controls{display:grid;gap:14px}
.kpi-rhythm{border:0;padding:0;margin:0}
.kpi-rhythm legend{font:500 13px var(--gft-font-mono);letter-spacing:.06em;color:var(--tx2);margin-bottom:6px}
.kpi-rhythm>div{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #8fb3a2}
.kpi-rhythm label{position:relative;display:block}
.kpi-rhythm input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.kpi-rhythm span{display:grid;place-items:center;min-height:44px;font:600 14px var(--gft-font-display);color:#eef4f0}
.kpi-rhythm input:checked+span{background:#f1c480;color:#072d2b}
.kpi-rhythm input:focus-visible+span{outline:3px solid #f1c480;outline-offset:2px}
.kpi-rhythm .kpi-note{margin-top:8px}
.kpi-ctwrap{padding:26px clamp(20px,3vw,48px) 30px 34px;background:#0a3d3a;border-left:1px solid #6bb68f55;min-width:0}
.kpi-presets{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.kpi-presets .kpi-kick{margin:0}
.kpi-ct__root{display:flex;align-items:center;gap:12px;font:500 13px var(--gft-font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tx2);margin-bottom:12px}
.kpi-ct__root span{width:12px;height:12px;border-radius:50%;background:#6bb68f}
.kpi-ct{list-style:none;margin:0;padding:0 0 0 22px;display:grid;gap:8px;position:relative}
.kpi-ct::before{content:'';position:absolute;left:5px;top:-12px;bottom:26px;width:3px;background:#6bb68f}
.kpi-ct__row{position:relative;display:grid;grid-template-columns:230px 34px minmax(0,1fr);align-items:center;min-height:58px}
.kpi-ct__row::before{content:'';position:absolute;left:-17px;top:50%;width:17px;height:3px;background:#6bb68f}
.kpi-ct__fam{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:8px 12px!important;border-color:var(--fc)!important;background:#ffffff0d!important}
.kpi-ct__fam[aria-pressed=true]{background:#ffffff1f!important;color:#eef4f0!important;box-shadow:inset 4px 0 0 var(--fc)}
.kpi-ct__n{font:850 26px/1 var(--gft-font-display);color:var(--fc);min-width:22px}
.kpi-ct__t{display:grid}.kpi-ct__t small{font:13px/1.3 var(--gft-font-display);color:var(--tx2)}.kpi-ct__t strong{font-size:17px}
.kpi-ct__thread{position:relative;height:3px;background:var(--fc);opacity:.85;overflow:hidden}
.kpi-ct__thread::after{content:'';position:absolute;inset:0;width:50%;background:linear-gradient(90deg,transparent,#fff7,transparent);transform:translateX(-120%);opacity:0}
.kpi-ct__row[data-family] {--fc:var(--kf-production)}
.kpi-ct__row[data-family=quality]{--fc:var(--kf-quality)}.kpi-ct__row[data-family=delivery]{--fc:var(--kf-delivery)}.kpi-ct__row[data-family=cost]{--fc:var(--kf-cost)}.kpi-ct__row[data-family=people]{--fc:var(--kf-people)}.kpi-ct__row[data-family=sustainability]{--fc:var(--kf-sustainability)}
.kpi-ct__leaves{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.kpi-chip{position:relative;padding:8px 12px!important;font:500 15px/1.25 var(--gft-font-display)!important;border-color:color-mix(in srgb,var(--fc) 70%,transparent)!important;background:#072d2b!important;text-align:left}
.kpi-chip[data-mine=true]{border-color:#e9ad52!important;background:#4d401c!important}
.kpi-chip[data-lit=false]{opacity:.42}
.kpi-chip[data-sel=true]{outline:2px solid #f1c480;outline-offset:2px}
.kpi-ct__empty{font:13px var(--gft-font-mono);color:var(--tx2)}
.kpi-ctfoot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;margin-top:22px;padding-top:18px;border-top:1px solid #ffffff2a}
.kpi-hover{display:grid;gap:4px;padding:14px 18px;border-left:3px solid #f1c480;background:#072d2b;min-height:132px}
.kpi-hover b{font-size:17px}.kpi-hover span{font:13px/1.5 var(--gft-font-mono);color:var(--tx2)}
.kpi-hover .kpi-hover__t{font:800 26px/1.15 var(--gft-font-display);color:#f1c480;letter-spacing:-.02em}
.kpi-interpretation{font-size:17px!important;color:#eef4f0;align-self:center}
.kpi-console__note{margin-top:16px}

/* ---------------- 2 trace (forest, pinned, five steps) */
.kpi-trace{padding:0;background:#0e4d4a}
.kpi-trace__pin{position:sticky;top:0;height:100svh;overflow:clip;background:#0e4d4a;background-image:linear-gradient(#d6efe412 1px,transparent 1px),linear-gradient(90deg,#d6efe412 1px,transparent 1px);background-size:96px 96px}
.kpi-cin{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
@media(min-width:1001px){
 .kpi-trace:is([data-step="1"],[data-step="3"],[data-step="5"]) .kpi-cin{clip-path:inset(0 0 0 calc(var(--g) + var(--cw) * .34))}
 .kpi-trace:is([data-step="2"],[data-step="4"]) .kpi-cin{clip-path:inset(0 calc(var(--g) + var(--cw) * .34) 0 0)}
}
.kpi-cin-cam{transform-box:view-box;transform-origin:0 0}
:root[data-m-go] .kpi-cin-cam:not(.kpi-cin-cam--now){transition:transform 480ms cubic-bezier(.16,1,.3,1)}
.kpi-cin text{font-family:var(--gft-font-display);fill:#eef4f0}
.kpi-cin .kpi-cin-mono{font:500 19px var(--gft-font-mono);letter-spacing:.06em;fill:#d3e2d9}
.kpi-cin .kpi-cin-k{font-size:20px;letter-spacing:.14em}
.kpi-cin .kpi-cin-big{font-size:23px;fill:#eef4f0}
.kpi-cin .kpi-cin-ill{fill:#f1c480}
.kpi-cin .kpi-cin-fl{font-size:27px;font-weight:800;fill:var(--fc)}
.kpi-cin .kpi-cin-out{font:italic 23px var(--gft-font-serif);fill:#e3ede7}
.kpi-cin .kpi-cin-ml{font-size:22px;font-weight:600}
.kpi-cin .kpi-cin-tag text{font:500 18px var(--gft-font-mono);fill:#f1c480}
.kpi-cin .kpi-cin-fig{font-size:100px;font-weight:850;letter-spacing:-.05em;fill:#f1c480}
.kpi-cin-trunk path{stroke:#6bb68f;stroke-width:4;fill:none}
.kpi-cin-br{fill:none;stroke:var(--fc);stroke-width:2.5}
.kpi-cin-line{stroke:var(--fc);stroke-width:3}
.kpi-cin-rest{stroke:var(--fc);stroke-width:2;opacity:.4;transition:opacity .5s}
.kpi-cin-pulse{fill:#f1c480;opacity:0}
.kpi-cin-heddle rect{fill:#072d2b;stroke:#d3e2d9;stroke-width:2}
.kpi-cin-heddle>path{stroke:#d3e2d9;stroke-width:4}
.kpi-cin-ring{fill:#0e4d4a;stroke:#d3e2d9;stroke-width:2.5}
.kpi-cin-fill{fill:#f1c480;opacity:0;transition:opacity .35s;transition-delay:calc(var(--k,0) * 140ms)}
.kpi-cin-eye[data-over=true] .kpi-cin-fill{fill:#ff9d7a}
.kpi-cin-train rect{fill:var(--fc);opacity:0;transition:opacity .5s}
.kpi-cin-draft path{stroke:#e9ad52;stroke-width:3;stroke-dasharray:12 9;fill:none}
.kpi-cin-draft text{fill:#f1c480}
.kpi-cin-heddle,.kpi-cin-fam,.kpi-cin-th,.kpi-cin-tag{transition:opacity .45s}
.kpi-trace [data-show]{opacity:0;transition:opacity .12s}
.kpi-trace[data-step="2"] [data-show="2"],.kpi-trace[data-step="3"] [data-show="3"],.kpi-trace[data-step="4"] [data-show="4"],.kpi-trace[data-step="5"] [data-show="5"]{opacity:1;transition:opacity .36s .15s}
.kpi-trace:is([data-step="1"],[data-step="2"],[data-step="3"]) .kpi-cin-heddle{opacity:.45}
.kpi-trace[data-step="2"] :is(.kpi-cin-fam,.kpi-cin-th):not([data-f=production]){opacity:.22}
.kpi-trace[data-step="3"] .kpi-cin-th:not([data-lead=true]){opacity:.2}
.kpi-trace:is([data-step="3"],[data-step="4"],[data-step="5"]) :is(.kpi-cin-fam,.kpi-cin-trunk){opacity:0}
.kpi-trace[data-step="3"] [data-lead=true] .kpi-cin-tag{opacity:0}
.kpi-trace:is([data-step="4"],[data-step="5"]) .kpi-cin-th:not([data-mine=true]){opacity:.3}
.kpi-trace:is([data-step="4"],[data-step="5"]) .kpi-cin-th[data-mine=true] .kpi-cin-line{stroke:#e9ad52}
.kpi-trace:is([data-step="4"],[data-step="5"]) .kpi-cin-fill{opacity:1}
.kpi-trace[data-step="5"] .kpi-cin-train rect{opacity:1}
.kpi-trace[data-step="5"] .kpi-cin-rest{opacity:0}
.kpi-trace[data-step="5"] .kpi-cin-th:not([data-mine=true]){opacity:.7}
.kpi-trace[data-step="5"] .kpi-cin-ml{opacity:0}
.kpi-trace__head{position:absolute;top:clamp(26px,5svh,52px);left:0;right:0;margin-inline:auto;z-index:2;pointer-events:none}
.kpi-trace__head h2{font-size:clamp(2rem,3.3vw,3.4rem);max-width:22ch;text-shadow:0 2px 24px #0e4d4a}
.kpi-trace__cards{position:absolute;inset:0;margin-inline:auto;z-index:2;pointer-events:none}
.kpi-card{position:absolute;top:min(210px,24svh);bottom:96px;margin-block:auto;height:fit-content;width:34%;padding:30px 32px;background:#072d2b;box-shadow:0 0 0 18px #0e4d4a;border:1px solid #6bb68f66;border-left:4px solid #f1c480;opacity:0;visibility:hidden;pointer-events:none}
.kpi-card>*{opacity:0;transform:translateY(16px)}
.kpi-card[data-side=left]{left:0}.kpi-card[data-side=right]{right:0}
.kpi-card__n{font:500 14px var(--gft-font-mono)!important;letter-spacing:.12em;color:#f1c480;margin-bottom:12px}
.kpi-card h3{font-size:clamp(1.6rem,2.2vw,2.2rem);margin-bottom:14px}
.kpi-card p{font-size:18px!important;color:#e3ede7}
.kpi-card code{display:inline-block;margin-top:16px;padding:4px 10px;border:1px solid #8fb3a2;font:13px var(--gft-font-mono);letter-spacing:.06em;color:#d3e2d9}
.kpi-trace[data-step="1"] [data-card="1"],.kpi-trace[data-step="2"] [data-card="2"],.kpi-trace[data-step="3"] [data-card="3"],.kpi-trace[data-step="4"] [data-card="4"],.kpi-trace[data-step="5"] [data-card="5"]{opacity:1;visibility:visible;pointer-events:auto}
.kpi-trace[data-step="1"] [data-card="1"]>*,.kpi-trace[data-step="2"] [data-card="2"]>*,.kpi-trace[data-step="3"] [data-card="3"]>*,.kpi-trace[data-step="4"] [data-card="4"]>*,.kpi-trace[data-step="5"] [data-card="5"]>*{opacity:1;transform:none;transition:opacity .36s .06s,transform .48s cubic-bezier(.16,1,.3,1) .06s}
.kpi-trace__rail{position:absolute;left:0;right:0;bottom:22px;margin-inline:auto;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:8px}
.kpi-rail__dots{list-style:none;display:flex;gap:6px;margin:0;padding:0}
.kpi-trace__rail a{display:grid;place-items:center;min-width:44px;min-height:44px;border:1px solid #8fb3a2;color:#eef4f0;text-decoration:none;font:600 14px var(--gft-font-mono);background:#072d2bcc}
.kpi-trace__rail a[aria-current]{background:#f1c480;color:#072d2b;border-color:#f1c480}
.kpi-rail__n{font:600 15px var(--gft-font-mono)!important;margin-left:10px;color:#eef4f0}
.kpi-trace__track{position:relative;margin-top:-100svh;pointer-events:none}
.kpi-trace__step{height:80svh}.kpi-trace__step:last-child{height:96svh}
.kpi-dropthread{z-index:4}
main:not([data-kpi-js]) .kpi-trace__pin{position:relative;height:auto;min-height:100svh}
main:not([data-kpi-js]) .kpi-cin{position:relative;height:70svh}
main:not([data-kpi-js]) .kpi-trace__cards{position:relative;display:grid;gap:16px;padding-bottom:120px}
main:not([data-kpi-js]) .kpi-card{position:relative;opacity:1;visibility:visible;transform:none;width:auto;top:auto;bottom:auto;box-shadow:none}
main:not([data-kpi-js]) .kpi-card>*{opacity:1;transform:none}
main:not([data-kpi-js]) .kpi-trace__track,main:not([data-kpi-js]) .kpi-trace__rail{display:none}

/* ---------------- 3 editor (paper) */
.kpi-editor{padding-top:clamp(44px,5.5svh,64px);padding-bottom:44px}
.kpi-editor__grid{display:grid;grid-template-columns:minmax(0,.48fr) minmax(0,.52fr);gap:clamp(28px,3.2vw,48px);align-items:start}
.kpi-pv{position:sticky;top:84px;padding:22px 24px;background:#fff;border:1px solid #c6d1c9;border-top:4px solid #80520e;box-shadow:0 18px 50px #0e4d4a14}
.kpi-pv__title{font:850 clamp(1.6rem,2.2vw,2.1rem)/1.1 var(--gft-font-display)!important;letter-spacing:-.04em;margin-bottom:8px}
.kpi-pv__heddle{position:relative;max-width:440px;padding-top:14px}
.kpi-pv__draft{position:absolute;left:14px;top:-208px;bottom:auto;height:96px;width:3px;margin-left:-1px;background:repeating-linear-gradient(#c98a2b 0 10px,transparent 10px 18px)}
.kpi-pv .kpi-hm-ring{fill:#f6f4ef;stroke:#0e4d4a}.kpi-pv .kpi-hm-shaft,.kpi-pv .kpi-hm-eye path{stroke:#0e4d4a}
.kpi-pv .kpi-hm-eye[data-on=true] .kpi-hm-ring{stroke:#80520e}.kpi-pv .kpi-hm-fill{fill:#c98a2b}
.kpi-pv .kpi-hm-knot path{stroke:#fff}.kpi-pv .kpi-hm-more{fill:#80520e}
.kpi-pv__branch{margin-top:8px;padding:12px 14px;background:#072d2b;border:1px solid #0e4d4a;color:#eef4f0}
.kpi-pvb{display:block;width:100%;height:auto}
.kpi-pvb text{stroke:none!important}
.kpi-pvb-trunk path{fill:none;stroke:#e9ad52;stroke-width:2.5;stroke-dasharray:5 5}
.kpi-pvb-trunk circle{fill:#e9ad52;stroke:#072d2b;stroke-width:2}
.kpi-pvb-mono{font:600 12px var(--gft-font-mono);letter-spacing:.08em;fill:#f1c480}
.kpi-pvb-fam rect{fill:#0a3d3a;stroke:#6bb68f;stroke-width:2}
.kpi-pvb-fl{font:700 14.5px var(--gft-font-display);fill:#fff}
.kpi-pvb-sub{font:500 11px var(--gft-font-mono);fill:#9fdcb9}
.kpi-pvb-ex path{fill:none;stroke:#9fdcb9;stroke-width:1.8;opacity:.85}
.kpi-pvb-ex circle{fill:#9fdcb9;stroke:none}
.kpi-pvb-ex text{font:600 12px var(--gft-font-display);fill:#eef4f0}
.kpi-pvb-ext{font:500 11px var(--gft-font-mono);fill:#9fdcb9}
.kpi-pvb-new path{fill:none;stroke:#f1c480;stroke-width:2.5;stroke-dasharray:6 4}
.kpi-pvb-new[data-ready=true] path{stroke-dasharray:none;stroke-width:3}
.kpi-pvb-new circle{fill:#e9ad52;stroke:#fff;stroke-width:1.5}
.kpi-pvb-new rect{fill:#1d3b32;stroke:#f1c480;stroke-width:1.5}
.kpi-pvb-dn{font:700 12.5px var(--gft-font-display);fill:#fff}
.kpi-pvb-dt{font:500 11px var(--gft-font-mono);fill:#f1c480}
.kpi-pv__row{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:18px;align-items:center;margin-top:12px}
.kpi-dial{position:relative;display:grid;justify-items:center}
.kpi-dial svg{width:100%;max-width:220px}
.kpi-dial__track{fill:none;stroke:#c6d1c9;stroke-width:10}
.kpi-dial__ticks{fill:none;stroke:#0e4d4a;stroke-width:10;stroke-dasharray:1 9}
.kpi-dial__needle{transform-box:view-box;transform-origin:80px 88px;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.kpi-dial__needle path{stroke:#80520e;stroke-width:4}.kpi-dial__needle circle{fill:#80520e}
.kpi-dial output{font:850 34px/1 var(--gft-font-display);margin-top:-6px}
.kpi-dial span{font:13px var(--gft-font-mono);color:var(--tx2)}
.kpi-pv__owner{display:grid;gap:4px}
.kpi-pv__owner>span{font:500 13px var(--gft-font-mono);letter-spacing:.06em;color:var(--tx2)}
.kpi-pv__owner p{display:flex;align-items:baseline;gap:8px}
.kpi-pv__owner output{font:850 60px/1 var(--gft-font-display);letter-spacing:-.05em;color:#80520e}
.kpi-pv__owner p span{font:14px var(--gft-font-mono)}
.kpi-pv__rails{display:grid;gap:6px;margin-top:12px;padding-top:10px;border-top:1px solid #e2e6df}
.kpi-rail{display:grid;grid-template-columns:104px minmax(0,1fr) 28px;align-items:center;gap:8px;font:600 12px var(--gft-font-mono);color:#0b2b29}
.kpi-rail[data-family=production]{--fc:var(--kf-production)}.kpi-rail[data-family=quality]{--fc:var(--kf-quality)}.kpi-rail[data-family=delivery]{--fc:var(--kf-delivery)}.kpi-rail[data-family=cost]{--fc:var(--kf-cost)}.kpi-rail[data-family=people]{--fc:var(--kf-people)}.kpi-rail[data-family=sustainability]{--fc:var(--kf-sustainability)}
.kpi-rail__t{position:relative;display:block;height:8px;background:#e2e6df;overflow:hidden}
.kpi-rail__b{position:absolute;inset:0;background:var(--fc);transform-origin:0 50%}
.kpi-rail__g{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(90deg,#c98a2b 0 4px,#fff 4px 7px);outline:1px solid #80520e}
.kpi-rail b{text-align:right;font-weight:700}
.kpi-pv__note{font-size:15px!important;margin:10px 0 8px;min-height:42px}
.kpi-editor__lead h2{font-size:clamp(2rem,3.3vw,3.2rem)}
.kpi-editor__lead p:not(.kpi-kick){max-width:56ch;margin-top:12px;font-size:17px!important}
.kpi-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin-top:18px;padding:18px 20px;background:#fffffff5;border:1px solid #c6d1c9}
.kpi-f--wide{grid-column:1/-1}
.kpi-range-label input{min-height:40px;width:100%}
.kpi-editor-feedback{font:500 15px/1.45 var(--gft-font-display)!important;padding:10px 12px;border-left:3px solid #80520e;background:#f6efe2;min-height:42px}
.kpi-editor-feedback[data-invalid=true]{border-color:#a03f26;background:#f9e7e1}
.kpi-form button[type=submit]{background:#0e4d4a;color:#fff;border-color:#0e4d4a}
.kpi-branches{margin-top:36px;padding-top:24px;border-top:2px solid #0e4d4a}
.kpi-branches__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px;margin-bottom:16px}
.kpi-branches__head h3{font-size:clamp(1.5rem,2.2vw,2.1rem)}
.kpi-branches__bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.kpi-fsum{margin:0;font:600 13px/1.4 var(--gft-font-mono)!important;color:#0b2b29;padding:8px 12px;background:#e9ece6;border-left:3px solid #0e4d4a}
.kpi-fsum__sep{color:#6a7c73;margin-inline:4px}
.kpi-tree{display:grid;grid-template-columns:minmax(0,.52fr) minmax(0,.48fr);gap:22px;align-items:start}
.kpi-stripe-chart{display:grid;gap:8px;padding:16px 18px;background:#072d2b;color:#eef4f0;border:1px solid #0e4d4a}
.kpi-stripe{width:100%;display:grid!important;grid-template-columns:168px minmax(0,1fr) 34px;align-items:center;gap:12px;padding:10px 12px!important;background:#0a3d3a!important;border:1px solid #6bb68f44!important;border-left:5px solid var(--fc)!important;color:#eef4f0!important;text-align:left;cursor:pointer;min-height:56px}
.kpi-stripe[data-family=production]{--fc:var(--kf-production)}.kpi-stripe[data-family=quality]{--fc:var(--kf-quality)}.kpi-stripe[data-family=delivery]{--fc:var(--kf-delivery)}.kpi-stripe[data-family=cost]{--fc:var(--kf-cost)}.kpi-stripe[data-family=people]{--fc:var(--kf-people)}.kpi-stripe[data-family=sustainability]{--fc:var(--kf-sustainability)}
.kpi-stripe[aria-pressed=true],.kpi-stripe:hover{background:#0e4d4a!important;border-color:#f1c480!important}
.kpi-stripe__meta{display:grid;gap:2px}
.kpi-stripe__meta strong{font:700 16px/1.15 var(--gft-font-display);color:#fff}
.kpi-stripe__meta small{font:500 12.5px/1.25 var(--gft-font-mono);color:#d3e2d9}
.kpi-stripe__track{display:grid;gap:5px;min-width:0}
.kpi-stripe__bar{display:flex;gap:4px;height:12px;padding:2px;background:#052220;border:1px solid #ffffff28}
.kpi-stripe__seg{flex:1;height:100%;background:var(--fc);opacity:.45}
.kpi-stripe__seg[data-lit=true]{opacity:1}
.kpi-stripe__names{display:block;font:500 12px/1.3 var(--gft-font-mono);color:#d3e2d9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-stripe__count{font:850 22px/1 var(--gft-font-display);color:#f1c480;text-align:right}
.kpi-stripe-panels{display:grid;gap:8px}
.kpi-branch{border:1px solid #c6d1c9;border-top:4px solid var(--fc);background:#fff}
.kpi-branch[data-family=production]{--fc:var(--kf-production)}.kpi-branch[data-family=quality]{--fc:var(--kf-quality)}.kpi-branch[data-family=delivery]{--fc:var(--kf-delivery)}.kpi-branch[data-family=cost]{--fc:var(--kf-cost)}.kpi-branch[data-family=people]{--fc:var(--kf-people)}.kpi-branch[data-family=sustainability]{--fc:var(--kf-sustainability)}
.kpi-branch summary{display:grid;grid-template-columns:14px minmax(0,1fr) 60px 30px 20px;align-items:center;gap:10px;padding:10px 14px;min-height:52px;cursor:pointer;list-style:none}
.kpi-branch summary::-webkit-details-marker{display:none}
.kpi-branch__node{width:12px;height:12px;border-radius:50%;background:var(--fc)}
.kpi-branch__t{display:grid}.kpi-branch__t small{font-size:13px;color:var(--tx2)}.kpi-branch__t strong{font-size:17px}
.kpi-branch__bar{height:5px;background:#e2e6df;overflow:hidden}.kpi-branch__bar i{display:block;height:100%;background:var(--fc);transform-origin:0 50%}
.kpi-branch__count{font:850 22px var(--gft-font-display)}
.kpi-branch__plus{font-size:20px;transition:transform .3s}.kpi-branch[open] .kpi-branch__plus{transform:rotate(45deg)}
.kpi-branch__body{padding:0 14px 14px}
.kpi-core{font:13px/1.5 var(--gft-font-mono)!important;color:var(--tx2);margin-bottom:10px}
.kpi-leaves{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.kpi-leaves li{padding:10px 12px;border-left:3px solid var(--fc);background:#f6f4ef}
.kpi-leaves li[data-lit=false]{opacity:.55}
.kpi-leaf__heading{display:flex;justify-content:space-between;gap:8px}.kpi-leaf__heading strong{font-size:16px}
.kpi-cadence{font:13px var(--gft-font-mono);color:var(--tx2)}
.kpi-leaf__target{font-size:15px!important}.kpi-leaf__target b{font-size:20px}
.kpi-leaf__owner{font:13px var(--gft-font-mono)!important;color:var(--tx2)}
.kpi-leaf__actions{display:flex;gap:8px;margin-top:6px}.kpi-leaf__actions button{padding:6px 12px;font-size:14px}
.kpi-empty{font-size:15px!important;color:var(--tx2)}
.kpi-split{display:flex;align-items:center;gap:14px;margin-top:28px;font:500 13px var(--gft-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tx2)}
.kpi-split i{display:grid;place-items:center;width:40px;height:30px;border:2px solid #0e4d4a;border-radius:50%;font:700 14px var(--gft-font-mono);font-style:normal;color:#0e4d4a;background:#f6f4ef}

/* ---------------- 4 owners and limits (dark forest-ink break) */
.kpi-owners{padding-block:clamp(56px,6.5svh,76px)}
.kpi-owners__head{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:clamp(28px,4vw,64px);align-items:end;margin-bottom:24px}
.kpi-owners__lead p:not(.kpi-kick){margin-top:14px;max-width:48ch;color:#e3ede7}
.kpi-lrail{border:0;margin:0;padding:0;min-width:0}
.kpi-lrail legend{padding:0;margin-bottom:12px}
.kpi-lrail legend .kpi-kick{margin:0}
.kpi-lrail__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kpi-lcard{position:relative;display:grid!important;gap:6px!important;padding:14px 16px;border:1px solid #6bb68f66;background:#0a3d3a;color:#eef4f0!important;font:inherit!important;letter-spacing:0!important;cursor:pointer;min-height:92px}
.kpi-lcard input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.kpi-lcard__n{font:600 13px var(--gft-font-mono);color:#f1c480}
.kpi-lcard strong{font-size:17px;line-height:1.25}
.kpi-lcard:has(input:checked){background:#f1c480;color:#072d2b!important;border-color:#f1c480}
.kpi-lcard:has(input:checked) .kpi-lcard__n{color:#072d2b}
.kpi-lcard:has(input:focus-visible){outline:3px solid #f1c480;outline-offset:3px}
.kpi-ltexts{display:grid;margin-top:14px}
.kpi-ltext{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .12s,visibility 0s linear .12s;padding-left:16px;border-left:3px solid #f1c480;color:#e3ede7}
.kpi-owners[data-limit="0"] [data-lt="0"],.kpi-owners[data-limit="1"] [data-lt="1"],.kpi-owners[data-limit="2"] [data-lt="2"]{opacity:1;visibility:visible;transition:opacity .28s .14s}
.kpi-oh-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:start}
.kpi-oh{position:relative;display:grid;grid-template-rows:auto auto auto 1fr;background:#0a3d3a;border:1px solid #6bb68f55;color:#eef4f0;outline-offset:3px}
.kpi-oh[data-focus=true]{border-color:#9fdcb9;box-shadow:inset 0 4px 0 #9fdcb9}
.kpi-oh[data-over=true]{border-color:#ff9d7a;box-shadow:inset 0 4px 0 #ff9d7a}
.kpi-oh[data-read]{background:#0d4a46;border-color:#f1c480}
.kpi-oh__head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:14px 14px 8px}
.kpi-oh__head strong{font-size:16px;line-height:1.2;color:#fff}
.kpi-oh__n{font:13px var(--gft-font-mono);white-space:nowrap;color:#d3e2d9}.kpi-oh__n b{font:850 28px var(--gft-font-display);color:#f1c480}
.kpi-oh__cap{position:relative;margin:0 12px 8px;padding:6px 8px;background:#052523;border:1px solid #6bb68f44}
.kpi-oh__slots{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(14px,1fr));gap:5px;padding-right:6px}
.kpi-oh__slot{height:10px;border-radius:999px;border:1.5px solid #6bb68f88;background:transparent}
.kpi-oh__slot[data-on=true]{background:var(--fc,#9fdcb9);border-color:var(--fc,#9fdcb9)}
.kpi-oh__slot[data-over=true]{background:#e9ad52;border-color:#f1c480}
.kpi-oh__lim{position:absolute;top:-2px;bottom:-2px;right:0;width:2px;background:#f1c480}
.kpi-oh__captxt{display:block;margin-top:5px;font:500 12px var(--gft-font-mono);color:#d3e2d9;text-align:right}
.kpi-oh__frame{margin:0 12px;border-top:2px solid #6bb68f55;padding-block:4px}
.kpi-oh__eyes{list-style:none;margin:0;padding:0}
.kpi-oh__eyes li{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;align-content:center;min-height:54px;padding:6px 2px;border-bottom:1px solid #ffffff1a}
.kpi-oh__eyes li:last-child{border-bottom:0}
.kpi-oh__eye{grid-row:1/3;align-self:center;width:20px;height:14px;border:2px solid #9fdcb9;border-radius:50%;background:#072d2b}
.kpi-oh__eyes li[data-on=true] .kpi-oh__eye{background:var(--fc);border-color:var(--fc)}
.kpi-oh__m{font-size:14.5px;line-height:1.25;font-weight:600;color:#eef4f0}
.kpi-oh__tag{font:12.5px var(--gft-font-mono);color:#f1c480;transition:opacity .3s}
.kpi-oh__open{font:12.5px var(--gft-font-mono);color:#d3e2d9;align-self:center}
.kpi-oh__bracket{position:absolute;inset:2px -4px;border:2px dashed #f1c480;opacity:0;pointer-events:none;transition:opacity .3s}
.kpi-oh__bnote{position:absolute;left:24px;right:0;top:100%;z-index:2;padding:5px 8px;background:#f1c480;color:#072d2b;font:600 12px/1.3 var(--gft-font-mono);opacity:0;transition:opacity .3s}
.kpi-oh__foot{padding:8px 12px 12px}
.kpi-oh__knots{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.kpi-oh__knots li{display:flex;gap:8px;align-items:center;font-size:13.5px;color:#ffab8f;font-weight:600}
.kpi-oh__knots i{width:12px;height:12px;border-radius:50%;background:#e9ad52;flex:none}
.kpi-oh__pins{display:flex;flex-wrap:wrap;gap:6px;opacity:0;transition:opacity .3s}
.kpi-oh__pins span{padding:3px 7px;border:1.5px dashed #f1c480;font:12px var(--gft-font-mono);color:#f1c480}
.kpi-oh__pins em{flex-basis:100%;font:italic 14px var(--gft-font-serif);color:#d3e2d9}
.kpi-owners[data-limit="0"] .kpi-oh__pins{opacity:1}
.kpi-owners[data-limit="1"] :is(.kpi-oh__bracket,.kpi-oh__bnote){opacity:1}
.kpi-owners[data-limit="2"] .kpi-oh__tag{opacity:0}
.kpi-owners__foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:20px;padding-top:16px;border-top:1px solid #ffffff22}
.kpi-oh-read{font-size:16px!important;min-width:min(100%,460px);color:#eef4f0}
.kpi-oh-read b{font-weight:800;color:#f1c480}
.kpi-oh-read__ms{color:#d3e2d9;font:500 14px var(--gft-font-mono)}
.kpi-owner-alert{font:700 14px var(--gft-font-mono);padding:8px 12px;background:#f1c480;color:#072d2b}
.kpi-reconcile{font:13.5px/1.5 var(--gft-font-mono)!important;color:#d3e2d9}

/* ---------------- 5 compare (paper with a forest-ink band) */
.kpi-compare{padding-top:0}
.kpi-compare__band{background:#0e4d4a;background-image:repeating-linear-gradient(90deg,#d6efe410 0 1px,transparent 1px 96px);padding-block:clamp(64px,8svh,96px) 36px;min-height:28svh;color:#eef4f0}
.kpi-compare__bandin{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,.5fr);gap:48px;align-items:end}
.kpi-compare__bandin p:not(.kpi-kick){color:#e3ede7;margin-top:14px;max-width:48ch}
.kpi-cread{font:850 clamp(1.5rem,2.2vw,2.2rem)/1.2 var(--gft-font-display)!important;letter-spacing:-.03em;color:#f1c480;max-width:26ch!important;justify-self:end}
.kpi-compare__body{padding-top:30px}
.kpi-cx__bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px}
.kpi-cx__pre,.kpi-cx__apply{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.kpi-cx__pre .kpi-kick{margin:0 6px 0 0}
.kpi-cx__flag{font:600 14px var(--gft-font-mono);color:#80520e;padding:6px 10px;border:2px dashed #80520e}
.kpi-cx__rows{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid #c6d1c9}
.kpi-cx__row{display:grid;grid-template-columns:minmax(150px,.22fr) minmax(0,.56fr) 140px 120px;align-items:center;gap:20px;min-height:84px;border-bottom:1px solid #c6d1c9;padding-block:8px}
.kpi-cx__name{font-size:17px;font-weight:700}
.kpi-cx__pair{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);row-gap:8px;align-items:center}
.kpi-cx__lab{font:700 13px var(--gft-font-mono)}
.kpi-cx__strip{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;max-width:520px}
.kpi-cx__strip i{height:20px;border-radius:50%;border:2px solid #9fb2a6}
.kpi-cx__a i[data-on=true]{border-color:#0e4d4a;background:#f6f4ef;border-width:3px}
.kpi-cx__b i[data-on=true]{border-color:#0e4d4a;background:#0e4d4a}
.kpi-cx__strip i[data-on=true][data-over=true]{border-color:#a03f26}
.kpi-cx__b i[data-on=true][data-over=true]{background:#c98a2b;border-color:#80520e}
.kpi-cx__rows[data-preview=true] .kpi-cx__b i[data-on=true]{border-style:dashed;background:#0e4d4a99}
.kpi-cx__rows[data-preview=true] .kpi-cx__b i[data-on=true][data-over=true]{background:#c98a2bcc}
.kpi-cx__rule{position:absolute;top:-6px;bottom:-6px;left:calc(22px + (100% - 22px) * 0 + min(520px,100% - 22px) * 5 / 8 - 3px);width:3px;background:#80520e}
.kpi-cx__vals{display:grid;gap:2px;font:600 15px var(--gft-font-mono)}
.kpi-cx__vals b[data-over=true]{color:#a03f26}
.kpi-cx__d{justify-self:start;padding:6px 12px;font:800 20px var(--gft-font-display);background:#e2ebe6}
.kpi-cx__d[data-d=up]{background:#c98a2b;color:#1d1405}
.kpi-cx__d[data-d=down]{background:#0e4d4a;color:#fff}
.kpi-cx__key{display:flex;flex-wrap:wrap;gap:22px;margin-top:14px;font:13px var(--gft-font-mono)!important;color:var(--tx2)}
.kpi-cx__key>span{display:inline-flex;align-items:center;gap:8px}
.kpi-key-a,.kpi-key-b,.kpi-key-r{display:inline-block;width:18px;height:14px;border-radius:50%;border:3px solid #0e4d4a}
.kpi-key-b{background:#0e4d4a}.kpi-key-r{width:4px;border-radius:0;border:0;background:#80520e;height:18px}
.kpi-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:24px}
.kpi-actions button{background:#fff}
.kpi-share-label{margin-top:14px}
[data-kpi-cmptable] table{width:100%;border-collapse:collapse;margin-top:20px;font-size:15px}
[data-kpi-cmptable] :is(th,td){padding:10px 12px;border-bottom:1px solid #c6d1c9;text-align:left}
[data-kpi-cmptable] caption{text-align:left;font:13px var(--gft-font-mono);color:var(--tx2);padding-bottom:8px}
.kpi-compare .kpi-note{margin-top:14px}

/* ---------------- 6 unlike units (paper) */
.kpi-units{--ug:clamp(28px,4vw,64px);padding-block:clamp(44px,5.5svh,68px)}
.kpi-units__grid{display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);gap:var(--ug);align-items:center}
.kpi-units__lead p:not(.kpi-kick){margin-top:16px;max-width:46ch}
.kpi-units__sel{display:grid;grid-template-columns:1fr 1fr;border:1px solid #0e4d4a;padding:0;margin:22px 0 0}
.kpi-units__sel legend{font:500 13px var(--gft-font-mono);color:var(--tx2);margin-bottom:6px;padding:0}
.kpi-units__sel label{position:relative;display:block}
.kpi-units__sel input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.kpi-units__sel span{display:grid;place-items:center;min-height:48px;font:600 15px var(--gft-font-display);color:#0b2b29}
.kpi-units__sel input:checked+span{background:#0e4d4a;color:#fff}
.kpi-units__sel input:focus-visible+span{outline:3px solid #c98a2b;outline-offset:2px}
.kpi-tray{position:relative;padding:24px 24px 0;background:#fff;border:1px solid #c6d1c9;box-shadow:0 18px 50px #0e4d4a14;overflow:hidden}
#kpi-tray-k{position:relative;z-index:4;background:#fff}
/* Clip the tag entrance and drag at the stage edge below the opaque instruction band. */
.kpi-tagstage{position:relative;margin-inline:-24px;padding:24px 24px 0;overflow:hidden}
.kpi-tags{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.kpi-tags li{transform-origin:50% 0}
.kpi-tag{width:100%;display:grid!important;justify-items:start;gap:4px;padding:16px 16px 14px!important;background:#f6efe2!important;border:2px solid #80520e!important;color:#0b2b29!important;text-align:left;cursor:grab;touch-action:none;position:relative}
.kpi-tag::before{content:'';position:absolute;left:50%;top:-24px;width:2px;height:24px;background:#80520e}
.kpi-tag::after{content:'';position:absolute;left:50%;bottom:-18px;width:2px;height:18px;background:repeating-linear-gradient(#c98a2b 0 4px,transparent 4px 8px)}
.kpi-tag[data-drag]{cursor:grabbing;z-index:3;box-shadow:0 18px 40px #0e4d4a33}
.kpi-tag b{font:850 60px/1 var(--gft-font-display);letter-spacing:-.05em}
.kpi-tag__u{display:grid;font:17px/1.3 var(--gft-font-display)}
.kpi-tag__u>span{grid-area:1/1}
.kpi-tag small{font:13px var(--gft-font-mono);color:#80520e}
.kpi-units [data-u]{transition:opacity .12s,visibility 0s linear .12s}
.kpi-units[data-mode=unlike] [data-u=like],.kpi-units[data-mode=like] [data-u=unlike]{opacity:0;visibility:hidden}
.kpi-units[data-mode=unlike] [data-u=unlike],.kpi-units[data-mode=like] [data-u=like]{opacity:1;visibility:visible;transition:opacity .28s .14s}
.kpi-vessel{margin:0 -24px;padding:16px 24px 20px;background:#072d2b;color:#eef4f0;border-top:4px solid #c98a2b}
.kpi-vessel__chute{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:12px}
.kpi-vessel__chute span{display:flex;align-items:center;justify-content:center;height:26px;border:1px dashed #f1c48088;background:#0a3d3a;font:600 12px var(--gft-font-mono);letter-spacing:.08em;text-transform:uppercase;color:#f1c480}
.kpi-units[data-mode=like] .kpi-vessel__chute span{border-style:solid;border-color:#9fdcb9;color:#9fdcb9}
.kpi-slot{position:relative;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:80px;padding:14px 20px;border:2px dashed #9fdcb9;background:#0a3d3a;color:#eef4f0}
.kpi-slot::after{content:'';position:absolute;inset:-3px;border:3px solid #f1c480;opacity:0;pointer-events:none}
.kpi-units[data-mode=unlike] .kpi-slot::after{opacity:.85}
.kpi-slot__k{font:600 13px var(--gft-font-mono);letter-spacing:.12em;text-transform:uppercase;color:#d3e2d9}
.kpi-slot__eq{font:700 24px var(--gft-font-mono);color:#fff}
.kpi-units[data-summed] .kpi-slot{border-style:solid;background:#0e4d4a}
.kpi-tray__out{display:grid;margin-top:14px}
.kpi-tray__out p{grid-area:1/1;font-size:17px!important;color:#e3ede7}
.kpi-tray__out p[data-u=unlike] b{color:#f1c480}
.kpi-tray__out p[data-u=like] b{color:#9fdcb9}

/* ---------------- 7 interlude (night, pinned, four steps) */
.kpi-il{padding:0;background:#072d2b}
.kpi-il__pin{position:sticky;top:0;height:100svh;overflow:clip;background:#072d2b}
.kpi-il__iris{position:absolute;inset:0}
.kpi-il__ground{position:absolute;inset:0;background:#072d2b;overflow:clip}
.kpi-il__weave{position:absolute;inset:-24px;background-image:linear-gradient(#b4d4c516 1px,transparent 1px),linear-gradient(90deg,#b4d4c516 1px,transparent 1px),radial-gradient(ellipse at 70% 40%,#0e4d4a 0,#072d2b00 60%);background-size:96px 96px,96px 96px,100% 100%;overflow-anchor:none}
.kpi-il__in{position:relative;height:100%;display:grid;grid-template-rows:auto auto 1fr auto;gap:clamp(10px,2svh,24px);padding-block:clamp(26px,5svh,56px) clamp(18px,3svh,32px)}
.kpi-il__head h2{font-size:clamp(2.1rem,3.6vw,3.8rem);max-width:24ch}
.kpi-il__line{position:relative}
.kpi-cl{display:block;width:100%;overflow:visible}
.kpi-cl--v{display:none}
.kpi-il__cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.kpi-cl-seg{transform:var(--t1)}
:root[data-m-go] .kpi-cl-seg{transition:transform .8s cubic-bezier(.65,0,.35,1) var(--d,0ms),opacity .5s}
.kpi-il[data-step="2"] .kpi-cl-seg{transform:var(--t2)}.kpi-il[data-step="3"] .kpi-cl-seg{transform:var(--t3)}.kpi-il[data-step="4"] .kpi-cl-seg{transform:var(--t4)}
.kpi-cl-seg rect{fill:var(--fc)}
.kpi-il[data-step="1"] .kpi-cl-seg[data-mine=false]{opacity:.45}
.kpi-il[data-step="1"] .kpi-cl-seg[data-mine=true] rect{stroke:#f1c480;stroke-width:3}
.kpi-cl-lab{font:600 17px var(--gft-font-display);fill:#e3ede7}
.kpi-cl [data-show]{opacity:0;transition:opacity .12s}
.kpi-il[data-step="1"] .kpi-cl [data-show="1"],.kpi-il[data-step="2"] .kpi-cl [data-show="2"],.kpi-il[data-step="3"] .kpi-cl [data-show="3"],.kpi-il[data-step="4"] .kpi-cl [data-show="4"]{opacity:1;transition:opacity .32s .16s}
.kpi-cl-draft rect{fill:none;stroke:#e9ad52;stroke-width:2.5;stroke-dasharray:8 6}
.kpi-cl-draft text{font:500 17px var(--gft-font-mono);fill:#f1c480}
.kpi-cl-heddle path{stroke:#d3e2d9;stroke-width:3}
.kpi-cl-knots circle{fill:#e9ad52}
.kpi-il__low{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);gap:clamp(24px,4vw,64px);align-items:start;min-height:0}
.kpi-il__num{display:grid}
.kpi-il__fig{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .12s,visibility 0s linear .12s}
.kpi-il[data-step="1"] .kpi-il__fig[data-show="1"],.kpi-il[data-step="2"] .kpi-il__fig[data-show="2"],.kpi-il[data-step="3"] .kpi-il__fig[data-show="3"],.kpi-il[data-step="4"] .kpi-il__fig[data-show="4"]{opacity:1;visibility:visible;transition:opacity .32s .15s}
.kpi-il__n{display:block;font:850 clamp(84px,13svh,120px)/.9 var(--gft-font-display);letter-spacing:-.05em;color:#f1c480;white-space:nowrap}
.kpi-il__n--eq{font-size:clamp(52px,8svh,72px)}
.kpi-il__fig span{display:block;margin-top:10px;font:500 14px var(--gft-font-mono);letter-spacing:.1em;text-transform:uppercase;color:#d3e2d9}
.kpi-il__fig p{margin-top:12px;font-size:18px!important;color:#eef4f0;max-width:38ch}
.kpi-il__eq{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.kpi-il__eq li{font:500 21px/1.38 var(--gft-font-mono);color:#dfe9e3;transform:scale(.81);transform-origin:0 50%;padding-left:18px;position:relative;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s}
.kpi-il__eq li::before{content:'';position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:#f1c480;opacity:0;transition:opacity .4s}
.kpi-il[data-step="1"] [data-on="1"],.kpi-il[data-step="2"] [data-on="2"],.kpi-il[data-step="3"] [data-on="3"],.kpi-il[data-step="4"] [data-on="4"]{transform:none;color:#fff;font-weight:700}
.kpi-il[data-step="1"] [data-on="1"]::before,.kpi-il[data-step="2"] [data-on="2"]::before,.kpi-il[data-step="3"] [data-on="3"]::before,.kpi-il[data-step="4"] [data-on="4"]::before{opacity:1}
.kpi-il__rec{margin-top:8px;color:#f1c480!important;clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.65,0,.35,1),transform .5s!important}
.kpi-il[data-step="4"] .kpi-il__rec{clip-path:inset(0 0 0 0)}
.kpi-il__dots{list-style:none;margin:0;padding:0;display:flex;gap:8px}
.kpi-il__dots li{width:40px;height:4px;background:#ffffff33}
.kpi-il[data-step="1"] [data-d="1"],.kpi-il[data-step="2"] [data-d="2"],.kpi-il[data-step="3"] [data-d="3"],.kpi-il[data-step="4"] [data-d="4"]{background:#f1c480}
.kpi-il__track{position:relative;margin-top:-100svh;pointer-events:none}
.kpi-il__step{height:80svh}.kpi-il__step:last-child{height:96svh}
main:not([data-kpi-js]) .kpi-il__fig,main:not([data-kpi-js]) .kpi-il__rec{opacity:1;visibility:visible;clip-path:none;position:relative}
main:not([data-kpi-js]) .kpi-il__num{gap:16px}
main:not([data-kpi-js]) .kpi-il__fig{grid-area:auto}
main:not([data-kpi-js]) .kpi-il__pin{position:relative;height:auto;min-height:100svh}
main:not([data-kpi-js]) .kpi-il__track{display:none}

/* ---------------- 8 register and ratio (deep) */
.kpi-reg{padding-top:clamp(96px,12svh,136px)}
.kpi-reg__head{margin-bottom:34px}
.kpi-reg__head p:not(.kpi-kick){margin-top:16px;max-width:64ch;color:#e3ede7}
.kpi-reg__grid{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);gap:clamp(28px,4vw,56px);align-items:start}
.kpi-lat{position:sticky;top:24px;padding:26px;border:1px solid #6bb68f55;background:#072d2bd9}
.kpi-lat__big{display:grid;gap:4px;font-size:19px!important;line-height:1.3}
.kpi-lat__big output{font:850 36px/1 var(--gft-font-display);color:#9fdcb9;margin-right:8px}
.kpi-lat__p output{color:#f1c480}
.kpi-lat__grid{display:grid;grid-template-columns:repeat(5,44px);gap:8px 14px;margin-block:20px}
.kpi-lat__grid .kpi-knot:nth-child(n+6):nth-child(-n+10),.kpi-lat__grid .kpi-knot:nth-child(n+16){transform:translateX(29px)}
.kpi-knot{position:relative;display:grid!important;place-items:center;width:44px;padding:0!important;border:0!important;background:transparent!important}
.kpi-knot i{width:22px;height:22px;border-radius:50%;background:#6bb68f}
.kpi-knot[data-kind=proposed] i{background:#e9ad52}
.kpi-knot::after{content:'';position:absolute;inset:6px;border-radius:50%;border:2px solid #fff;opacity:0;transition:opacity .3s}
.kpi-knot[data-on=true]::after{opacity:1}
.kpi-knot[data-off=true]{opacity:.25}
.kpi-lat__out{min-height:220px;display:grid;align-content:start;gap:6px;padding-top:16px;border-top:1px solid #ffffff2a}
.kpi-lat__out .kpi-kick{margin:0}
.kpi-lat__out h3{font-size:22px;letter-spacing:-.02em}
.kpi-lat__v{font:700 22px/1.3 var(--gft-font-display)!important;color:#f1c480}
.kpi-lat__t{font-size:15px!important;color:#d3e2d9;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.kpi-regbar{display:grid;grid-template-columns:auto auto minmax(80px,1fr) auto;align-items:center;gap:18px;margin-bottom:14px}
.kpi-regbar__n{display:flex;align-items:baseline;gap:8px}
.kpi-regbar__n output{font:850 30px var(--gft-font-display);color:#9fdcb9}.kpi-regbar__n--p output{color:#f1c480}
.kpi-regbar__n span,.kpi-regbar__of{font:13px var(--gft-font-mono)!important;color:#d3e2d9}
.kpi-regbar__strip{display:flex;height:8px;background:#ffffff1a}
.kpi-regbar__strip i{flex:1;transform-origin:0 50%;transition:transform .5s}
.kpi-regbar__s{background:#6bb68f}.kpi-regbar__p{background:#e9ad52}
.kpi-reg-controls{display:flex;flex-wrap:wrap;gap:12px 24px;margin-bottom:14px}
.kpi-seg,.kpi-chipset{border:0;padding:0;margin:0}
.kpi-seg legend,.kpi-chipset legend{font:500 13px var(--gft-font-mono);color:#d3e2d9;margin-bottom:6px;padding:0}
.kpi-seg>div,.kpi-chipset>div{display:flex;flex-wrap:wrap;gap:6px}
.kpi-seg label,.kpi-chipset label{position:relative;display:block}
.kpi-seg input,.kpi-chipset input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.kpi-seg span,.kpi-chipset span{display:grid;place-items:center;min-height:44px;padding:0 14px;border:1px solid #8fb3a2;font:600 15px var(--gft-font-display);color:#eef4f0}
.kpi-seg input:checked+span,.kpi-chipset input:checked+span{background:#f1c480;color:#072d2b;border-color:#f1c480}
.kpi-seg input:focus-visible+span,.kpi-chipset input:focus-visible+span{outline:3px solid #f1c480;outline-offset:2px}
.kpi-table-wrap{overflow-x:auto}
.kpi-reg table{width:100%;border-collapse:collapse;font-size:15px}
.kpi-reg caption{text-align:left;font:13px var(--gft-font-mono);color:#d3e2d9;padding-bottom:10px}
.kpi-reg th,.kpi-reg td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid #ffffff22;line-height:1.45}
.kpi-reg thead th{font:600 13px var(--gft-font-mono);letter-spacing:.06em;color:#d3e2d9;padding:0 12px 6px}
.kpi-reg thead button{padding:6px 8px!important;font:600 15px var(--gft-font-display)!important;min-height:44px;border-color:#8fb3a2}
.kpi-reg tbody tr{height:48px;outline-offset:-2px}
.kpi-reg tbody tr[data-active=true]{background:#ffffff12;box-shadow:inset 4px 0 0 #f1c480}
.kpi-reg tbody th{font-weight:700}
.kpi-ri{display:block}
.kpi-spark{display:block;width:110px;height:10px;margin-top:6px}
.kpi-spark rect{fill:#ffffff38}.kpi-spark rect[data-on=true]{fill:var(--fc)}
.kpi-fdot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--fc,#d3e2d9);margin-right:8px}
.kpi-ld{color:#d3e2d9}
.kpi-pill{display:inline-block;padding:2px 8px;font:600 13px var(--gft-font-mono)}
.kpi-pill--src{background:#6bb68f;color:#072d2b}.kpi-pill--prop{background:#e9ad52;color:#072d2b}
.kpi-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#d3e2d9;margin-top:4px}
.kpi-reg tr[data-open=true] .kpi-clamp{-webkit-line-clamp:unset}
.kpi-reg .kpi-note{margin-top:14px}

/* ---------------- 9 data spine (forest) */
.kpi-spine{padding-top:clamp(96px,12svh,136px)}
.kpi-spine__head{margin-bottom:18px}
.kpi-sp{display:block;width:100%;height:auto}
.kpi-sp text{font-family:var(--gft-font-display);fill:#eef4f0}
.kpi-sp .kpi-sp-mono{font:500 15px var(--gft-font-mono);letter-spacing:.12em;fill:#d3e2d9}
.kpi-sp .kpi-sp-ml{font-size:18px;font-weight:600}
.kpi-sp .kpi-sp-sl{font-size:18px;font-weight:800}
.kpi-sp .kpi-sp-note{font:500 17px var(--gft-font-mono);fill:#f3d7a6}
.kpi-sp-lane path{stroke:var(--fc);stroke-width:3;opacity:.75}
.kpi-sp-lit path{stroke:#f1c480;stroke-width:4.5}
.kpi-sp-lit{clip-path:inset(0 85.5% 0 0);transition:clip-path .8s cubic-bezier(.65,0,.35,1)}
.kpi-spine[data-st="1"] .kpi-sp-lit{clip-path:inset(0 66.5% 0 0)}.kpi-spine[data-st="2"] .kpi-sp-lit{clip-path:inset(0 47.6% 0 0)}.kpi-spine[data-st="3"] .kpi-sp-lit{clip-path:inset(0 28.6% 0 0)}.kpi-spine[data-st="4"] .kpi-sp-lit{clip-path:inset(0 9.7% 0 0)}
.kpi-sp-st rect{fill:#072d2b;stroke:#d3e2d9;stroke-width:2;opacity:.9}
.kpi-spine[data-st="0"] [data-st="0"] rect,.kpi-spine[data-st="1"] [data-st="1"] rect,.kpi-spine[data-st="2"] [data-st="2"] rect,.kpi-spine[data-st="3"] [data-st="3"] rect,.kpi-spine[data-st="4"] [data-st="4"] rect{stroke:#f1c480;stroke-width:4}
.kpi-sp-ov{opacity:0;transition:opacity .45s}
.kpi-spine[data-st="0"] [data-ov="0"],.kpi-spine[data-st="1"] [data-ov="1"],.kpi-spine[data-st="2"] [data-ov="2"],.kpi-spine[data-st="3"] [data-ov="3"],.kpi-spine[data-st="4"] [data-ov="4"]{opacity:1}
.kpi-sp-ov path{fill:none;stroke:#f1c480;stroke-width:3}
.kpi-sp-ov circle{fill:#f1c480;stroke:#072d2b;stroke-width:2}
.kpi-sp-ov .kpi-sp-x{stroke:#ffab8f;stroke-width:4}
.kpi-sp-ov .kpi-sp-roll{stroke-dasharray:8 6;opacity:.8}
.kpi-sp-forum rect{fill:#072d2b;stroke:#9fdcb9;stroke-width:2}
.kpi-sp-forum text{font-size:13px;font-weight:600}
[data-ov="4"] path{stroke-dasharray:10 6}
.kpi-spine__ctl{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,.5fr);gap:clamp(24px,3vw,48px);align-items:start;margin-top:8px}
.kpi-spinesel{border:0;padding:0;margin:0}
.kpi-spinesel legend{padding:0}
.kpi-sn-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.kpi-sn{position:relative;display:grid!important;justify-items:start;gap:2px!important;padding:10px 12px;border:1px solid #8fb3a2;color:#eef4f0!important;min-height:64px;cursor:pointer}
.kpi-sn input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.kpi-sn__dot{font:600 13px var(--gft-font-mono);color:#f1c480}
.kpi-sn b{font:700 16px var(--gft-font-display);letter-spacing:0}
.kpi-sn:has(input:checked){background:#f1c480;border-color:#f1c480;color:#072d2b!important}
.kpi-sn:has(input:checked) .kpi-sn__dot{color:#072d2b}
.kpi-sn:has(input:focus-visible){outline:3px solid #f1c480;outline-offset:3px}
.kpi-sp-panel{display:grid;padding:18px 22px;background:#072d2bcc;border-left:4px solid #f1c480;min-height:128px}
.kpi-sp-pane{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .12s,visibility 0s linear .12s}
.kpi-spine[data-st="0"] [data-pane="0"],.kpi-spine[data-st="1"] [data-pane="1"],.kpi-spine[data-st="2"] [data-pane="2"],.kpi-spine[data-st="3"] [data-pane="3"],.kpi-spine[data-st="4"] [data-pane="4"]{opacity:1;visibility:visible;transition:opacity .28s .14s}
.kpi-sp-read{font:700 22px/1.3 var(--gft-font-display)!important;color:#f1c480;margin-bottom:8px}
.kpi-sp-pane p:not(.kpi-sp-read){color:#e3ede7}
.kpi-rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.kpi-rc{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:16px;padding:16px;border:1px solid #8fb3a2;text-decoration:none;color:#eef4f0;background:#072d2b80}
.kpi-rc:hover,.kpi-rc:focus-visible{background:#072d2b}
.kpi-rc__pv{grid-row:1/4;align-self:start;width:72px;height:56px;border:1px solid #8fb3a2;display:flex;align-items:flex-end;gap:5px;padding:6px}
.kpi-rc__pv--bars i{flex:1;height:calc(var(--w) * 100%);background:#9fdcb9}
.kpi-rc__pv--weave{background:repeating-linear-gradient(90deg,#9fdcb966 0 2px,transparent 2px 12px),repeating-linear-gradient(0deg,#f1c48066 0 2px,transparent 2px 12px)}
.kpi-rc__pv--weave b{display:none}
.kpi-rc__pv--pages i{flex:1;height:100%;border:1px solid #d3e2d9}
.kpi-rc small{font:500 13px var(--gft-font-mono);letter-spacing:.08em;color:#d3e2d9}
.kpi-rc strong{font-size:17px;margin:2px 0 4px}
.kpi-rc__d{font-size:15px;color:#d3e2d9;line-height:1.45}
.kpi-spine__note{margin-top:14px!important}

/* ---------------- 10 closing: the huddle board (night) */
.kpi-close{padding-block:clamp(44px,5.5svh,64px) 32px}
.kpi-close__grid{display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);gap:clamp(28px,4vw,56px);align-items:start}
.kpi-close__lead h2{font-size:clamp(2.1rem,3.6vw,3.6rem);max-width:14ch}
.kpi-close__lead>p:not(.kpi-kick){margin-top:10px;color:#e3ede7;font-size:17px!important}
.kpi-close__read{display:flex;align-items:baseline;gap:12px;margin-top:14px}
.kpi-close__read output{font:850 56px/1 var(--gft-font-display);letter-spacing:-.05em;color:#f1c480}
.kpi-close__read span{font-size:19px}
.kpi-cta__sum{font:13px/1.55 var(--gft-font-mono)!important;color:#d3e2d9;margin-top:8px;min-height:48px}
.kpi-close__owner{margin-block:12px;max-width:340px}
.kpi-cta__go{background:#f1c480!important;color:#072d2b!important;border-color:#f1c480!important}
.kpi-tabs{margin-top:16px;padding:14px 16px;background:#05302dcc;border:1px solid #6bb68f55}
.kpi-tabs__list{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #8fb3a2}
.kpi-tabs__list button{border:0!important;min-height:40px;font-size:14px}
.kpi-tabs__list button[aria-selected=true]{background:#eef4f0;color:#072d2b}
.kpi-tabs__panels{display:grid;padding-top:12px}
.kpi-tabp{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .12s,visibility 0s linear .12s}
.kpi-tabp[data-on=true]{opacity:1;visibility:visible;transition:opacity .28s .14s}
.kpi-tabp p{font-size:14.5px!important;line-height:1.5!important;color:#d3e2d9}.kpi-tabp p+p{margin-top:6px}
main:not([data-kpi-js]) .kpi-tabp{grid-area:auto;opacity:1;visibility:visible}
.kpi-board{position:relative;padding:22px 26px 26px;border:1px solid #6bb68f55;background:#05302dcc;overflow:hidden}
.kpi-cns{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.kpi-cn{--fc:var(--kf-production)}
.kpi-cn:nth-child(2){--fc:var(--kf-quality)}.kpi-cn:nth-child(3){--fc:var(--kf-delivery)}.kpi-cn:nth-child(4){--fc:var(--kf-cost)}.kpi-cn:nth-child(5){--fc:var(--kf-people)}.kpi-cn:nth-child(6){--fc:var(--kf-sustainability)}
.kpi-cn__btn{width:100%;display:grid!important;justify-items:center;gap:2px;padding:8px 4px!important;border-color:var(--fc)!important;text-align:center;background:#072d2b!important;color:#eef4f0!important}
.kpi-cn__btn[aria-pressed=false]{border-style:dashed!important}
.kpi-cn__dot{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:3px solid var(--fc);background:#072d2b}
.kpi-cn__dot b{font:850 19px var(--gft-font-display);color:#fff}
.kpi-cn__l{font:700 13.5px var(--gft-font-display)}
.kpi-cn small{font:12.5px/1.3 var(--gft-font-mono);color:#d3e2d9}
.kpi-cn[data-off=true]{opacity:.45}
.kpi-cn[data-has-mine=true] .kpi-cn__dot{box-shadow:0 0 0 4px #f1c48055}
.kpi-board__cv svg{display:block;width:100%;height:50px}
.kpi-cv__p{fill:none;stroke:var(--fc);stroke-width:3}
.kpi-cv__p[data-f=production]{--fc:var(--kf-production)}.kpi-cv__p[data-f=quality]{--fc:var(--kf-quality)}.kpi-cv__p[data-f=delivery]{--fc:var(--kf-delivery)}.kpi-cv__p[data-f=cost]{--fc:var(--kf-cost)}.kpi-cv__p[data-f=people]{--fc:var(--kf-people)}.kpi-cv__p[data-f=sustainability]{--fc:var(--kf-sustainability)}
.kpi-cv__p[data-off=true]{opacity:.15}
.kpi-board__heddle{display:grid;justify-items:center}
.kpi-board__heddle svg{width:min(100%,250px)}
.kpi-bd{margin-top:6px}
.kpi-bd__head,.kpi-bd__row{display:grid;grid-template-columns:28px minmax(0,1.5fr) minmax(0,1.1fr) minmax(0,.6fr) minmax(0,.9fr);gap:12px;align-items:center}
.kpi-bd__head{font:500 13px var(--gft-font-mono)!important;letter-spacing:.1em;text-transform:uppercase;color:#d3e2d9;padding:0 10px 6px}
.kpi-bd__rows{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.kpi-bd__row{min-height:48px;padding:6px 10px;background:#0e4d4a;border-left:4px solid var(--fc,#6bb68f)}
.kpi-bd__row[data-over=true]{border-left-color:#ff9d7a;background:#4d2a1c}
.kpi-bd__row--open{background:#072d2b;border-left:4px dashed #8fb3a2}
.kpi-bd__eye{width:20px;height:14px;border-radius:50%;border:2px solid #f1c480;background:#f1c480}
.kpi-bd__row--open .kpi-bd__eye{background:transparent;border-color:#8fb3a2}
.kpi-bd__m{font-size:15.5px;font-weight:700;line-height:1.25}
.kpi-bd__t{font:700 16.5px var(--gft-font-display)}.kpi-bd__t small{font:13px var(--gft-font-mono);color:#d3e2d9}
.kpi-bd__c{font:13px var(--gft-font-mono);color:#d3e2d9}
.kpi-bd__r{position:relative;font:13px var(--gft-font-mono);color:#f1c480;padding:6px 8px}
.kpi-bd__r::after{content:'';position:absolute;inset:0;border:2px dashed #e9ad52;opacity:.85}
.kpi-bd__cap{margin-top:10px;font-size:14.5px!important;color:#d3e2d9}
.kpi-bd__cap b{color:#eef4f0}
.kpi-close__band{margin:16px -26px -26px;padding:14px 26px 16px;background:#042220;border-top:2px solid #f1c480}
.kpi-close__threads{display:grid;gap:3px;margin-bottom:10px}
.kpi-close__threads i{display:block;height:2px;background:linear-gradient(90deg,#c98a2b 0,#f1c480 60%,#9fdcb9 100%);opacity:.85}
.kpi-close__band-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.kpi-close__band-k{font:600 12.5px var(--gft-font-mono);letter-spacing:.08em;text-transform:uppercase;color:#d3e2d9}
.kpi-close__band-links{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.kpi-close__link{display:inline-flex;align-items:center;min-height:40px;font:700 15px var(--gft-font-display);color:#f1c480;text-decoration:underline;text-underline-offset:4px}
.kpi-close__link--alt{color:#9fdcb9}

/* ---------------- entrances: once, at 62 percent of the viewport, partial pre-states, settled by about 900 ms */
:root[data-m-go] [data-kpi-stage]:not([data-kpi-on]) :is(.kpi-hm-eye,.kpi-ct__row,.kpi-presets,.kpi-load output,.kpi-cin-fam,.kpi-cin-trunk,.kpi-pv__draft,.kpi-form>*,.kpi-pv .kpi-hm-eye,.kpi-dial,.kpi-branch,.kpi-oh__slot,.kpi-oh__eye,.kpi-oh__knots,.kpi-oh__pins,.kpi-cx__a,.kpi-cx__b,.kpi-cx__d,.kpi-tag,.kpi-slot,.kpi-tray__out,.kpi-knot i,.kpi-reg tbody tr,.kpi-sp-lane,.kpi-sp-st,.kpi-cn,.kpi-cv__p,.kpi-board__heddle,.kpi-bd__row){opacity:.12}
:root[data-m-go] .kpi-owners [data-kpi-stage]:not([data-kpi-on]) .kpi-oh{opacity:.82;transform:translateY(14px)}
:root[data-m-go] [data-kpi-on] :is(.kpi-hm-eye,.kpi-ct__row,.kpi-presets,.kpi-load output,.kpi-cin-fam,.kpi-cin-trunk,.kpi-pv__draft,.kpi-form>*,.kpi-dial,.kpi-branch,.kpi-oh,.kpi-oh__slot,.kpi-oh__eye,.kpi-oh__knots,.kpi-oh__pins,.kpi-cx__a,.kpi-cx__b,.kpi-cx__d,.kpi-tag,.kpi-slot,.kpi-tray__out,.kpi-knot i,.kpi-reg tbody tr,.kpi-sp-lane,.kpi-sp-st,.kpi-cn,.kpi-cv__p,.kpi-board__heddle,.kpi-bd__row,.kpi-il__iris,.kpi-cl--h){animation-duration:560ms;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
/* console: heddle eyes open left to right, then the cascade threads lift into place */
:root[data-m-go] .kpi-console [data-kpi-on] .kpi-hm-eye{animation-name:kpi-eye;animation-duration:380ms;animation-delay:calc(var(--k,0) * 80ms)}
:root[data-m-go] .kpi-console [data-kpi-on] .kpi-ct__row{animation-name:kpi-lift;animation-delay:calc(260ms + var(--i,0) * 60ms)}
:root[data-m-go] .kpi-console [data-kpi-on] .kpi-presets{animation-name:kpi-fade;animation-delay:160ms}
:root[data-m-go] .kpi-console [data-kpi-on] .kpi-load output{animation-name:kpi-roll;animation-duration:300ms;animation-delay:420ms}
.kpi-hm-eye{transform-box:fill-box;transform-origin:50% 50%}
@keyframes kpi-eye{from{opacity:.12;transform:scaleY(0)}}
@keyframes kpi-lift{from{opacity:.12;transform:translateY(34px)}}
@keyframes kpi-fade{from{opacity:.12}}
@keyframes kpi-roll{from{opacity:0;transform:translateY(.4em);clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
/* trace: the warps part like a shed opening, then the trunk lights */
:root[data-m-go] .kpi-trace [data-kpi-on] .kpi-cin-fam{animation-name:kpi-shed-up;animation-duration:620ms}
:root[data-m-go] .kpi-trace [data-kpi-on] .kpi-cin-fam:nth-of-type(even){animation-name:kpi-shed-down}
:root[data-m-go] .kpi-trace [data-kpi-on] .kpi-cin-trunk{animation-name:kpi-drop;animation-duration:420ms;animation-delay:420ms}
@keyframes kpi-shed-up{from{opacity:.12;transform:translateY(-70px)}}
@keyframes kpi-shed-down{from{opacity:.12;transform:translateY(70px)}}
@keyframes kpi-drop{from{opacity:.3;clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
/* editor: the draft thread unspools onto the heddle, the form rows cascade */
:root[data-m-go] .kpi-editor [data-kpi-on] .kpi-pv__draft{animation-name:kpi-drop;animation-duration:620ms}
:root[data-m-go] .kpi-editor [data-kpi-on] .kpi-pv .kpi-hm-eye{animation-name:kpi-eye;animation-duration:320ms;animation-delay:calc(300ms + var(--k,0) * 60ms)}
:root[data-m-go] .kpi-editor [data-kpi-on] .kpi-dial{animation-name:kpi-spin;animation-duration:620ms;animation-delay:200ms}
:root[data-m-go] .kpi-editor [data-kpi-on] .kpi-form>*{animation-name:kpi-skew;animation-duration:460ms}
:root[data-m-go] .kpi-editor [data-kpi-on] .kpi-form>:nth-child(2){animation-delay:30ms}:root[data-m-go] .kpi-editor [data-kpi-on] .kpi-form>:nth-child(3){animation-delay:60ms}:root[data-m-go] .kpi-editor [data-kpi-on] .kpi-form>:nth-child(4){animation-delay:90ms}:root[data-m-go] .kpi-editor [data-kpi-on] .kpi-form>:nth-child(5){animation-delay:120ms}:root[data-m-go] .kpi-editor [data-kpi-on] .kpi-form>:nth-child(6){animation-delay:150ms}:root[data-m-go] .kpi-editor [data-kpi-on] .kpi-form>:nth-child(7){animation-delay:180ms}:root[data-m-go] .kpi-editor [data-kpi-on] .kpi-form>:nth-child(n+8){animation-delay:210ms}
:root[data-m-go] .kpi-editor [data-kpi-on] .kpi-branch{animation-name:kpi-weave}
:root[data-m-go] .kpi-editor [data-kpi-on] .kpi-branch:nth-child(2){animation-delay:60ms}:root[data-m-go] .kpi-editor [data-kpi-on] .kpi-branch:nth-child(3){animation-delay:120ms}:root[data-m-go] .kpi-editor [data-kpi-on] .kpi-branch:nth-child(4){animation-delay:180ms}:root[data-m-go] .kpi-editor [data-kpi-on] .kpi-branch:nth-child(5){animation-delay:220ms}:root[data-m-go] .kpi-editor [data-kpi-on] .kpi-branch:nth-child(6){animation-delay:250ms}
@keyframes kpi-spin{from{opacity:.12;transform:rotate(-40deg) scale(.8)}}
@keyframes kpi-skew{from{opacity:.12;transform:translateY(22px) skewY(3deg)}}
@keyframes kpi-weave{from{opacity:.12;transform:translateX(-40px)}}
/* owners: the threads rise cleanly into their five heddles without horizontal overlap */
:root[data-m-go] .kpi-owners [data-kpi-on] .kpi-oh{animation-name:kpi-comb-card;animation-duration:460ms;animation-delay:calc(var(--i,0) * 45ms)}
:root[data-m-go] .kpi-owners [data-kpi-on] .kpi-oh :is(.kpi-oh__slot,.kpi-oh__eye,.kpi-oh__knots,.kpi-oh__pins){animation-name:kpi-comb;animation-duration:520ms;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes kpi-comb-card{from{opacity:.82;transform:translateY(14px)}}
@keyframes kpi-comb{from{opacity:.12;transform:translateY(14px)}}
/* compare: A and B twist in from opposite sides and lock on the rule */
:root[data-m-go] .kpi-compare [data-kpi-on] .kpi-cx__a{animation-name:kpi-ply-a;animation-duration:700ms}
:root[data-m-go] .kpi-compare [data-kpi-on] .kpi-cx__b{animation-name:kpi-ply-b;animation-duration:700ms;animation-delay:120ms}
:root[data-m-go] .kpi-compare [data-kpi-on] .kpi-cx__d{animation-name:kpi-fade;animation-delay:520ms;animation-duration:300ms}
@keyframes kpi-ply-a{from{opacity:.12;transform:translateX(-90px) rotate(-4deg)}}
@keyframes kpi-ply-b{from{opacity:.12;transform:translateX(90px) rotate(4deg)}}
/* units: the three tags are picked into the tray one beat apart, the slot draws last */
:root[data-m-go] .kpi-units [data-kpi-on] .kpi-tag{animation-name:kpi-pick;animation-duration:520ms;animation-timing-function:cubic-bezier(.3,1.4,.5,1)}
:root[data-m-go] .kpi-units [data-kpi-on] li:nth-child(2) .kpi-tag{animation-delay:150ms}:root[data-m-go] .kpi-units [data-kpi-on] li:nth-child(3) .kpi-tag{animation-delay:300ms}
:root[data-m-go] .kpi-units [data-kpi-on] .kpi-slot{animation-name:kpi-slot;animation-duration:380ms;animation-delay:460ms}
:root[data-m-go] .kpi-units [data-kpi-on] .kpi-tray__out{animation-name:kpi-fade;animation-delay:640ms;animation-duration:260ms}
@keyframes kpi-pick{from{opacity:.12;transform:translateY(-110px) rotate(-7deg)}}
@keyframes kpi-slot{from{opacity:.12;clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0)}}
/* interlude: the weave settles in and the count line draws left to right */
:root[data-m-go] .kpi-il [data-kpi-on] .kpi-il__iris{animation-name:kpi-iris;animation-duration:620ms;animation-timing-function:cubic-bezier(.33,1,.68,1)}
:root[data-m-go] .kpi-il [data-kpi-on] .kpi-cl--h{animation-name:kpi-draw;animation-duration:620ms;animation-delay:240ms}
:root[data-m-go] [data-kpi-stage]:not([data-kpi-on]) .kpi-cl--h{clip-path:inset(0 70% 0 0)}
@keyframes kpi-iris{from{opacity:.12;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes kpi-draw{from{clip-path:inset(0 70% 0 0)}to{clip-path:inset(0)}}
/* register: the proposals tie in first, then the sourced knots, then the rows cascade */
.kpi-knot i{transform-origin:50% 50%}
:root[data-m-go] .kpi-reg [data-kpi-on] .kpi-knot i{animation-name:kpi-knot;animation-duration:420ms;animation-delay:calc(360ms + var(--i,0) * 26ms)}
:root[data-m-go] .kpi-reg [data-kpi-on] .kpi-knot[data-kind=proposed] i{animation-delay:calc((var(--i,0) - 8) * 26ms)}
:root[data-m-go] .kpi-reg [data-kpi-on] tbody tr{animation-name:kpi-fade-up;animation-duration:420ms;animation-delay:calc(300ms + var(--i,0) * 20ms)}
@keyframes kpi-knot{from{opacity:.12;transform:scale(0) rotate(-120deg)}}
@keyframes kpi-fade-up{from{opacity:.12;transform:translateY(14px)}}
/* spine: the five lanes draw across, then the stations set in */
:root[data-m-go] .kpi-spine [data-kpi-on] .kpi-sp-lane{animation-name:kpi-draw;animation-duration:600ms;animation-delay:calc(var(--k,0) * 50ms)}
:root[data-m-go] [data-kpi-stage]:not([data-kpi-on]) .kpi-sp-lane{clip-path:inset(0 70% 0 0)}
:root[data-m-go] .kpi-spine [data-kpi-on] .kpi-sp-st{animation-name:kpi-set;animation-duration:360ms;animation-delay:calc(120ms + var(--k,0) * 60ms)}
@keyframes kpi-set{from{opacity:.12;transform:translateY(-12px)}}
/* closing: the curves wind into the heddle, the five rows drop from its eyes */
:root[data-m-go] .kpi-close [data-kpi-on] .kpi-cn{animation-name:kpi-fade-up;animation-duration:380ms}
:root[data-m-go] .kpi-close [data-kpi-on] .kpi-cv__p{animation-name:kpi-fade;animation-duration:380ms;animation-delay:calc(140ms + var(--i,0) * 40ms)}
:root[data-m-go] .kpi-close [data-kpi-on] .kpi-board__heddle{animation-name:kpi-eye;animation-duration:300ms;animation-delay:340ms}
:root[data-m-go] .kpi-close [data-kpi-on] .kpi-bd__row{animation-name:kpi-dropin;animation-duration:420ms;animation-delay:calc(240ms + var(--k,0) * 55ms)}
@keyframes kpi-dropin{from{opacity:.12;transform:translateY(8px)}}

/* ---------------- lives: on screen only, never under Calm or reduced motion */
:root[data-m-go] .kpi-ctbox[data-m-on] .kpi-ct__row:has(.kpi-chip[data-lit=true]) .kpi-ct__thread::after{animation-name:kpi-run;animation-duration:2.8s;animation-timing-function:linear;animation-iteration-count:infinite;animation-delay:calc(var(--i,0) * 400ms)}
@keyframes kpi-run{0%{opacity:0;transform:translateX(-120%)}15%,85%{opacity:1}100%{opacity:0;transform:translateX(220%)}}
.kpi-chip[data-sel=true]::after{content:'';position:absolute;inset:-6px;border:2px solid #f1c48088;pointer-events:none;opacity:0}
:root[data-m-go] .kpi-ctbox[data-m-on] .kpi-chip[data-sel=true]::after{animation-name:kpi-glow;animation-duration:2.2s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
@keyframes kpi-glow{from{opacity:0}to{opacity:1}}
.kpi-cin-train{transform-box:view-box}
:root[data-m-go] .kpi-trace__pin[data-m-on] .kpi-cin-train{animation-name:kpi-train;animation-duration:1.6s;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes kpi-train{from{transform:translateX(calc(-1 * var(--sp)))}to{transform:none}}
:root[data-m-go] .kpi-trace[data-step="3"] .kpi-trace__pin[data-m-on] .kpi-cin-pulse{animation-name:kpi-ride;animation-duration:3s;animation-timing-function:cubic-bezier(.45,0,.55,1);animation-iteration-count:infinite}
@keyframes kpi-ride{0%{opacity:0;transform:none}12%,85%{opacity:1}100%{opacity:0;transform:translateX(740px)}}
:root[data-m-go] .kpi-pv[data-m-on][data-over=true] .kpi-hm-ghost{animation-name:kpi-glow;animation-duration:1.4s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
:root[data-m-go] .kpi-oh-row[data-m-on] .kpi-oh[data-over=true] .kpi-oh__knots i{animation-name:kpi-shake;animation-duration:6s;animation-iteration-count:infinite}
@keyframes kpi-shake{0%,88%,100%{transform:none}91%{transform:translateX(-3px)}94%{transform:translateX(3px)}97%{transform:translateX(-2px)}}
:root[data-m-go] .kpi-cx[data-m-on] .kpi-cx__rows[data-preview=true] .kpi-cx__b i[data-on=true]{animation-name:kpi-drift;animation-duration:2.4s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:calc(var(--k,0) * 120ms)}
@keyframes kpi-drift{from{transform:translateX(-2px)}to{transform:translateX(3px)}}
:root[data-m-go] .kpi-tray[data-m-on] .kpi-tags li{animation-name:kpi-sway;animation-duration:3.6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:calc(var(--i,0) * -1.1s)}
@keyframes kpi-sway{from{transform:rotate(-1.2deg)}to{transform:rotate(1.2deg)}}
:root[data-m-go] .kpi-units[data-mode=unlike] .kpi-tray[data-m-on] .kpi-slot::after{animation-name:kpi-breathe;animation-duration:2s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
@keyframes kpi-breathe{from{opacity:.35}to{opacity:.95}}
:root[data-m-go] .kpi-lat__grid[data-m-on] .kpi-knot[data-kind=sourced]::before{content:'';position:absolute;inset:8px;border-radius:50%;background:#9fdcb9;opacity:0;animation-name:kpi-wave;animation-duration:3.2s;animation-iteration-count:infinite;animation-delay:calc(var(--i,0) * 400ms)}
@keyframes kpi-wave{0%,100%{opacity:0;transform:scale(1)}12%{opacity:.7;transform:scale(1.6)}30%{opacity:0;transform:scale(2)}}
:root[data-m-go] .kpi-spine__stage[data-m-on] .kpi-sp-lit path{animation-name:kpi-breathe;animation-duration:1.8s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:calc(var(--k,0) * 200ms)}
:root[data-m-go] .kpi-board[data-m-on] .kpi-cv__p[data-off=false]{animation-name:kpi-pulse;animation-duration:3s;animation-iteration-count:infinite;animation-delay:calc(1s + var(--i,0) * 500ms)}
@keyframes kpi-pulse{0%,100%{opacity:1}15%{opacity:.35}30%{opacity:1}}
:root[data-m-go] .kpi-board[data-m-on] .kpi-bd__r::after{animation-name:kpi-breathe;animation-duration:2.4s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:calc(var(--k,0) * 300ms)}

/* ---------------- tablet and phone */
@media(max-width:1180px){
 .kpi-ct__row{grid-template-columns:200px 24px minmax(0,1fr)}
 .kpi-cx__row{grid-template-columns:minmax(120px,.24fr) minmax(0,.5fr) 110px 100px;gap:14px}
}
@media(max-width:1000px){
 .kpi-sec{--g:28px;--cw:calc(100% - 56px)}
 .kpi-console__grid{grid-template-columns:1fr;padding-inline:28px}
 .kpi-ctwrap{border-left:0;padding:22px 18px}
 .kpi-ctfoot{grid-template-columns:1fr}
 .kpi-pull{display:none}
 .kpi-trace__head h2{font-size:clamp(1.6rem,6vw,2.2rem)}
 .kpi-trace__head{top:20px}
 .kpi-trace__head .kpi-kick{display:none}
 .kpi-trace__head h2{font-size:24px;max-width:none}
 .kpi-cin{top:104px;height:42svh;bottom:auto;overflow:hidden}
 .kpi-card{top:calc(104px + 42svh + 8px);bottom:auto;width:auto;left:0!important;right:0!important;padding:16px 18px}
 .kpi-card__n{margin-bottom:6px}
 .kpi-card h3{font-size:1.3rem;margin-bottom:8px}
 .kpi-card p{font-size:17px!important;line-height:1.5}
 .kpi-card code{display:none}
 .kpi-trace__rail{bottom:10px;justify-content:space-between}
 .kpi-trace:not([data-step="4"]) .kpi-cin-tag{opacity:0}
 .kpi-rail__n{display:none}
 .kpi-trace:not([data-step="2"]):not([data-step="3"]) .kpi-cin-ml{opacity:0}
 .kpi-il__head .kpi-kick{display:none}
 .kpi-spine__stage{overflow:clip}
 .kpi-sp{width:150%;max-width:none;margin-left:-32%}
 .kpi-lat{background:#072d2b}
 .kpi-rail__dots{gap:4px}
 .kpi-editor__grid,.kpi-owners__head,.kpi-units__grid,.kpi-reg__grid,.kpi-close__grid,.kpi-spine__ctl,.kpi-compare__bandin,.kpi-il__low{grid-template-columns:1fr}
 .kpi-pv{position:relative;top:auto}
 .kpi-dropthread{left:calc(28px + min(440px,100% - 56px) * .78)}
 .kpi-tree{grid-template-columns:1fr}
 .kpi-stripe{grid-template-columns:128px minmax(0,1fr) 28px;gap:8px;padding:8px 10px!important}
 .kpi-lrail__cards{grid-template-columns:1fr}
 .kpi-lcard{min-height:0}
 .kpi-oh-row{grid-template-columns:1fr}
 .kpi-oh__eyes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
 .kpi-oh__eyes li{grid-template-columns:1fr;grid-template-rows:auto;justify-items:start;min-height:0;padding:6px 0;border-bottom:0}
 .kpi-oh__eyes li .kpi-oh__m,.kpi-oh__eyes li .kpi-oh__tag,.kpi-oh__open{display:none}
 .kpi-oh__eye{grid-row:auto}
 .kpi-oh__bnote{left:0;top:auto;bottom:-46px;width:220px}
 .kpi-oh__foot{min-height:0}
 .kpi-cread{justify-self:start}
 .kpi-cx__row{grid-template-columns:1fr auto;grid-template-areas:'n d' 'p p' 'v v'}
 .kpi-cx__name{grid-area:n}.kpi-cx__d{grid-area:d}.kpi-cx__pair{grid-area:p}.kpi-cx__vals{grid-area:v;grid-auto-flow:column;justify-content:start;gap:16px}
 .kpi-actions{grid-template-columns:1fr 1fr}
 .kpi-tagthreads{display:none}
 .kpi-tags{grid-template-columns:1fr}
 .kpi-tag b{font-size:52px}
 .kpi-tag{grid-template-columns:auto 1fr;align-items:center;column-gap:16px}
 .kpi-tag small{grid-column:2}
 .kpi-tag::before,.kpi-tag::after{display:none}
 .kpi-vessel__chute{display:none}
 .kpi-cl--h{display:none}.kpi-cl--v{display:block;max-height:36svh;width:auto;max-width:100%}
 .kpi-il__cv{display:none}
 .kpi-il__in{grid-template-rows:auto auto auto auto}
 .kpi-il__head h2{font-size:clamp(1.6rem,6vw,2.2rem)}
 .kpi-il__eq{display:none}
 .kpi-il__n{font-size:64px}.kpi-il__n--eq{font-size:44px}
 .kpi-il__fig p{font-size:17px!important}
 .kpi-cl-lab{font-size:14px}
 .kpi-lat{position:sticky;top:0;z-index:2;padding:14px 16px}
 .kpi-lat__big{font-size:16px!important}
 .kpi-lat__big output{font-size:28px}
 .kpi-lat__grid{grid-template-columns:repeat(10,minmax(0,1fr));gap:2px;margin-block:10px}
 .kpi-lat__grid .kpi-knot{width:100%;min-height:30px}
 .kpi-lat__grid .kpi-knot:nth-child(n){transform:none}
 .kpi-knot i{width:16px;height:16px}
 .kpi-lat__out{display:none}
 .kpi-reg table,.kpi-reg tbody,.kpi-reg tr,.kpi-reg th,.kpi-reg td{display:block}
 .kpi-reg thead{display:flex;flex-wrap:wrap}.kpi-reg thead tr{display:flex;flex-wrap:wrap;gap:6px}.kpi-reg thead th:not([aria-sort]){display:none}
 .kpi-reg tbody tr{height:auto;padding:12px 0;border-bottom:1px solid #ffffff22}
 .kpi-reg tbody :is(th,td){border:0;padding:2px 4px}
 .kpi-regbar{grid-template-columns:auto auto 1fr}.kpi-regbar__of{grid-column:1/-1}
 .kpi-sp{min-width:0}
 .kpi-sp .kpi-sp-ml,.kpi-sp .kpi-sp-note,.kpi-sp .kpi-sp-mono,.kpi-sp .kpi-sp-sl,.kpi-sp-forum text{display:none}
 .kpi-sn-row{grid-template-columns:1fr}
 .kpi-sn{grid-template-columns:auto 1fr;align-items:center;column-gap:12px;min-height:48px}
 .kpi-rel{grid-template-columns:1fr}
 .kpi-pull5{display:none}
 .kpi-cns{grid-template-columns:repeat(3,minmax(0,1fr))}
 .kpi-board__cv{display:none}
 .kpi-bd__head{display:none}
 .kpi-bd__row{grid-template-columns:24px minmax(0,1fr) auto;grid-template-areas:'e m t' 'e c r';row-gap:4px;padding:10px}
 .kpi-bd__eye{grid-area:e}.kpi-bd__m{grid-area:m}.kpi-bd__t{grid-area:t}.kpi-bd__c{grid-area:c}.kpi-bd__r{grid-area:r}
 .kpi-close__band-in{flex-direction:column;align-items:flex-start}
 .kpi-tofoot{right:calc(28px + 96px)}
}
@media(max-width:640px){
 .kpi-sec{--g:20px;--cw:calc(100% - 40px)}
 .kpi-console__grid{padding-inline:20px}
 .kpi-sec h2{font-size:clamp(1.9rem,8.4vw,2.6rem)}
 .kpi-gauge{padding:20px}
 .kpi-ct{padding-left:0}.kpi-ct::before,.kpi-ct__row::before{display:none}
 .kpi-ct__row{grid-template-columns:1fr;gap:8px;min-height:0}
 .kpi-ct__thread{display:none}
 .kpi-ct__row:not([data-selected=true]) .kpi-ct__leaves{display:none}
 .kpi-presets .kpi-buttons{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
 .kpi-presets button{flex:none}
 .kpi-form{grid-template-columns:1fr;padding:16px}
 .kpi-pv__row{grid-template-columns:1fr 1fr}
 .kpi-stripe{grid-template-columns:1fr auto;grid-template-areas:'m c' 't t';row-gap:6px}
 .kpi-stripe__meta{grid-area:m}.kpi-stripe__count{grid-area:c}.kpi-stripe__track{grid-area:t}
 .kpi-cx__strip i{height:16px}
 .kpi-cx__pre{flex-wrap:nowrap;overflow-x:auto;max-width:100%}
 .kpi-cx__pre button{flex:none}
 .kpi-tofoot{right:116px}
 body[data-page="kpi-cascade"] .gft-footer__next::before{right:96px}
}
@media(prefers-reduced-motion:reduce){.kpi-cin-cam,.kpi-cl-seg,.kpi-card,.kpi-card>*,.kpi-il__fig,.kpi-il__eq li,.kpi-il__rec,.kpi-sp-lit,.kpi-dial__needle{transition:none!important}}
:root[data-motion=calm] :is(.kpi-cin-cam,.kpi-cl-seg,.kpi-card,.kpi-card>*,.kpi-il__fig,.kpi-il__eq li,.kpi-il__rec,.kpi-sp-lit,.kpi-dial__needle){transition:none!important}