/* /company/principles/ only. Every class, custom property and keyframe is prefixed cpr-.
   One object is carried end to end: the principle cord (a sage sheath with an ochre core).
   HTML is the composed end state. Pre-states live only under :root[data-m-go]; a block's entrance starts when about
   36 percent of it is in view ([data-cpr-in], set by the page script), runs once and settles within about 900 ms.
   Animated properties: transform (and its translate/rotate/scale longhands), opacity, clip-path and filter.
   Scroll-linked hand-overs are longhands, guarded, alone on their element, transform and opacity only.
   Cords that cross a block boundary are absolutely placed and reach the section edge (--cpr-reach, measured on load). */

body[data-page=principles]{--cpr-g:48px;--cpr-cw:min(1440px,100vw - 96px);--cpr-night:#072d2b;--cpr-deep:#0a3d3a;--cpr-forest:#0e4d4a;--cpr-ink-deep:#05232a;--cpr-mist:#e8f1ec;--cpr-on:#eef5f0;--cpr-on2:#dbe9e1;--cpr-sage-l:#a8dcbf;--cpr-ochre-l:#f0c47e;--cpr-ink:#1f2a28;--cpr-ink2:#2b4a44;--cpr-cord:#6bb68f;--cpr-cord-ink:#3f8f6b;--cpr-mono:var(--gft-font-mono)}
body[data-page=principles] main{overflow-x:clip}
body[data-page=principles] :is(.gft-eyebrow,.gft-calm,.gft-brand span,.gft-desktop-nav .gft-nav-group summary,.gft-nav-panel .gft-eyebrow){font-size:13px!important}
body[data-page=principles] .gft-footer :is(.gft-eyebrow,.gft-footer__bottom a,.gft-footer__bottom button,.gft-footer__bottom>span,.gft-footer__next-k){font-size:13px!important}

/* The kit's section-level textile entrance is replaced by each block's authored choreography; the data-m names remain
   the blocks' entrance labels. */
:root[data-m-go] main .cpr-sec[data-m]{opacity:1;transform:none;clip-path:none;animation-name:none}

/* ---------------------------------------------------------------- shared pieces */
.cpr-sec{position:relative;overflow-x:clip}
.cpr-sec p{max-width:none}
.cpr-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);column-gap:5%;align-items:end}
.cpr-eyebrow{font-size:13px;letter-spacing:.08em;margin:0 0 14px}
.cpr-h{font-size:clamp(2.1rem,3.5vw,3.4rem);line-height:1.04;letter-spacing:-.05em;max-width:19ch}
.cpr-hw{display:inline-block}
.cpr-lede{font-size:17px;line-height:1.6;max-width:46ch}
.cpr-fold{margin-top:12px;font:13px/1.55 var(--cpr-mono);letter-spacing:.02em;color:var(--cpr-on2)}
.cpr-fold--ink{color:var(--cpr-ink2)}
.cpr-tag{display:inline-flex;align-self:start;padding:6px 10px;background:var(--cpr-sage-l);color:var(--cpr-night);font:700 13px/1.3 var(--cpr-mono);letter-spacing:.06em;text-transform:uppercase}
.cpr-tag--reject{background:var(--cpr-ochre-l)}
/* Swapping read-outs: every state stacks in one grid cell, so the tallest reserves the height; the old text leaves
   before the new one arrives. */
.cpr-pane{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .14s linear,transform .14s linear,visibility 0s linear .14s}
.cpr-pane[data-on]{opacity:1;visibility:visible;transform:none;transition:opacity .4s var(--gft-ease-out) .16s,transform .48s var(--gft-ease-out) .16s,visibility 0s}
:is(.cpr-bench__read,.cpr-dec__read,.cpr-bal__panes,.cpr-con__txt,.cpr-claim__panes,.cpr-bound__v,.cpr-bound__title,.cpr-bound__foot,.cpr-bound__panes,.cpr-close__read,.cpr-gate__outs){display:grid}
/* segmented control (native radios) */
.cpr-seg{display:flex;flex-wrap:wrap;margin:0;padding:0;border:0;min-width:0}
.cpr-seg legend{padding:0;margin-bottom:10px;font:700 13px/1.5 var(--cpr-mono);letter-spacing:.08em;text-transform:uppercase}
.cpr-seg label{position:relative;flex:1 1 120px;min-width:0}
.cpr-seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cpr-seg span{display:flex;align-items:center;justify-content:center;min-height:52px;padding:10px 14px;margin-left:-1px;border:1px solid #eef5f080;color:var(--cpr-on);font-size:17px;font-weight:750;line-height:1.2;text-align:center;transition:background-color .3s,color .3s}
.cpr-seg label:first-of-type span{margin-left:0}
.cpr-seg label:has(input:checked) span{background:var(--cpr-on);color:var(--cpr-night)}
.cpr-seg label:has(input:focus-visible) span{outline:3px solid var(--gft-ochre);outline-offset:3px}
/* The cord in HTML: a sage sheath with an ochre core. */
.cpr-cordh{height:3px;background:linear-gradient(var(--cpr-cord),var(--cpr-cord)) 0 0/100% 1px no-repeat,linear-gradient(var(--gft-ochre),var(--gft-ochre)) 0 1px/100% 1px no-repeat,linear-gradient(var(--cpr-cord),var(--cpr-cord)) 0 2px/100% 1px no-repeat}
:is(.cpr-bench__exit,.cpr-dec__in,.cpr-dec__out,.cpr-film__in,.cpr-bal__out,.cpr-con__in,.cpr-gate__in,.cpr-gate__run,.cpr-gate__out,.cpr-bound__in,.cpr-bound__out,.cpr-close__in){position:absolute;z-index:4;pointer-events:none;overflow-anchor:none;border:0 solid var(--cpr-cord)}

/* Heading entrances: whole words (the spaces stay), no masks, so nothing clips or overlaps mid-entrance. */
:root[data-m-go] [data-cpr-enter]:not([data-cpr-in]) .cpr-h .cpr-hw{opacity:0}
:root[data-m-go] [data-cpr-in] .cpr-h .cpr-hw{animation-duration:600ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(min(var(--w) * 34ms, 240ms));animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] [data-cpr-in] .cpr-h[data-fx=blur] .cpr-hw{animation-name:cpr-w-blur}
:root[data-m-go] [data-cpr-in] .cpr-h[data-fx=turn] .cpr-hw{animation-name:cpr-w-turn;transform-origin:50% 100%}
:root[data-m-go] [data-cpr-in] .cpr-h[data-fx=track] .cpr-hw{animation-name:cpr-w-track;transform-origin:0 100%}
:root[data-m-go] [data-cpr-in] .cpr-h[data-fx=zoom] .cpr-hw{animation-name:cpr-w-zoom}
:root[data-m-go] [data-cpr-in] .cpr-h[data-fx=wdth] .cpr-hw{animation-name:cpr-w-wdth;transform-origin:0 100%}
:root[data-m-go] [data-cpr-in] .cpr-h[data-fx=swing] .cpr-hw{animation-name:cpr-w-swing;transform-origin:0 50%}
:root[data-m-go] [data-cpr-in] .cpr-h[data-fx=drop] .cpr-hw{animation-name:cpr-w-drop}
:root[data-m-go] [data-cpr-in] .cpr-h[data-fx=rise] .cpr-hw{animation-name:cpr-w-rise}
@keyframes cpr-w-blur{from{opacity:0;transform:translateY(.3em);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes cpr-w-turn{from{opacity:0;transform:perspective(600px) rotateX(-80deg)}to{opacity:1;transform:none}}
@keyframes cpr-w-track{from{opacity:0;transform:scaleX(.5)}to{opacity:1;transform:none}}
@keyframes cpr-w-zoom{from{opacity:0;transform:scale(.62);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes cpr-w-wdth{from{opacity:.1;transform:scaleX(.55)}to{opacity:1;transform:none}}
@keyframes cpr-w-swing{from{opacity:0;transform:perspective(700px) rotateY(62deg)}to{opacity:1;transform:none}}
@keyframes cpr-w-drop{from{opacity:0;transform:translateY(-.7em)}to{opacity:1;transform:none}}
@keyframes cpr-w-rise{from{opacity:0;transform:translateY(.8em)}to{opacity:1;transform:none}}
:root[data-m-go] [data-cpr-enter]:not([data-cpr-in]) :is(.cpr-lede,.cpr-eyebrow){opacity:0;transform:translateY(14px)}
:root[data-m-go] [data-cpr-in] :is(.cpr-lede,.cpr-eyebrow){animation-name:cpr-up;animation-duration:560ms;animation-timing-function:var(--gft-ease-out);animation-delay:140ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] [data-cpr-in] .cpr-eyebrow{animation-delay:0ms}
@keyframes cpr-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes cpr-fade{from{opacity:0}to{opacity:1}}
@keyframes cpr-wipe-r{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes cpr-wipe-l{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes cpr-wipe-d{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

/* ================================================================ 1 splash: the cord ties six knots in a lattice */
[data-splash=principles] h1{font-size:clamp(3rem,min(5vw,8.4svh),4.6rem);max-width:min(600px,40vw);margin-top:28px}
[data-splash=principles] h1 .gft-serif{display:inline-block;color:var(--cpr-sage-l)}
[data-splash=principles] .gft-splash__lede{font-size:19px;max-width:37ch;color:var(--cpr-on2);margin-top:22px}
[data-splash=principles] .gft-splash__actions{margin-top:26px}
[data-splash=principles] .cpr-cta{min-height:48px}
[data-splash=principles] .gft-splash__content{pointer-events:none;padding-bottom:24px}
[data-splash=principles] .gft-splash__content :is(a,h1,.gft-splash__lede){pointer-events:auto}
[data-splash=principles] :is(.gft-splash__data,.gft-splash__data span,.gft-splash__caption,.gft-splash__position,.gft-splash__cue,.gft-splash__signal){font-size:13px!important;color:var(--cpr-on2)}
[data-splash=principles] .gft-splash__structure{inset:0}
[data-splash=principles] .gft-splash__structure::after{background:linear-gradient(90deg,#072d2b 0%,#072d2bb8 26%,#072d2b00 40%)}
:root[data-m-go] [data-splash=principles] h1[data-m-in]{animation-name:cpr-h1-skew;animation-duration:620ms;animation-timing-function:var(--gft-ease-out);animation-delay:0ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal;transform-origin:0 100%}
:root[data-m-go] [data-splash=principles] h1[data-m-in] .gft-serif{animation-name:cpr-h1-accent;animation-duration:560ms;animation-timing-function:var(--gft-ease-out);animation-delay:220ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal;transform-origin:0 100%}
@keyframes cpr-h1-skew{from{opacity:.1;transform:translateY(.4em) skewY(6deg)}to{opacity:1;transform:none}}
@keyframes cpr-h1-accent{from{opacity:0;transform:translateY(.5em) skewY(-7deg)}to{opacity:1;transform:none}}
.cpr-lat{position:absolute;inset:0;z-index:1;overflow-anchor:none}
.cpr-lat__band{position:absolute;top:0;bottom:0;left:41%;right:-4%}
.cpr-lat__band svg{display:block;width:100%;height:100%;overflow:visible}
.cpr-lat__warp path{stroke:var(--cpr-cord);stroke-width:1.2;stroke-opacity:.38}
.cpr-lat__weft path{stroke:#9aa6ee;stroke-width:1.1;stroke-opacity:.5;stroke-dasharray:3 9}
.cpr-lat__nodes circle{stroke:var(--cpr-cord);stroke-opacity:.45;transform-box:fill-box;transform-origin:center}
.cpr-lat__nodes{transform-box:fill-box;transform-origin:center}
.cpr-lat__sheath{stroke:var(--cpr-cord);stroke-width:3.4;stroke-linecap:round}
.cpr-lat__core{stroke:var(--gft-ochre);stroke-width:1.1;stroke-linecap:round}
.cpr-lat__pulse path{stroke:var(--cpr-ochre-l);stroke-width:5;stroke-linecap:round;opacity:0}
.cpr-lat__knot{pointer-events:all;cursor:pointer;outline:none}
.cpr-lat__in,.cpr-lat__hv,.cpr-lat__label,.cpr-lat__k1,.cpr-lat__dim{transform-box:fill-box;transform-origin:center}
.cpr-lat__hv{transition:transform .4s var(--gft-ease-out)}
.cpr-lat__knot:is(:hover,:focus-visible,[data-on]) .cpr-lat__hv{transform:scale(1.08)}
.cpr-lat__thread{stroke:var(--cpr-cord);stroke-width:2.4;stroke-linecap:round}
.cpr-lat__knot:nth-of-type(odd) .cpr-lat__thread{stroke:#8fcaa9}
.cpr-lat__glow{stroke:var(--cpr-ochre-l);stroke-width:5;stroke-linecap:round;opacity:0;transition:opacity .35s}
.cpr-lat__knot[data-on] .cpr-lat__glow{opacity:.8}
.cpr-lat__tie{fill:var(--gft-ochre);stroke:var(--cpr-night);stroke-width:2}
.cpr-lat__label{fill:#f4f8f5;font:italic 30px/1.2 var(--gft-font-serif);letter-spacing:-.02em;paint-order:stroke;stroke:#072d2b;stroke-width:8px;stroke-linejoin:round}
.cpr-lat__knot:focus-visible rect{stroke:var(--gft-ochre);stroke-width:3}
.cpr-lat__read{position:absolute;left:calc((100% - var(--cpr-cw)) / 2);bottom:calc(var(--splash-strip-h) + 20px);width:min(500px,36%);display:grid;gap:6px;margin:0;padding:16px 20px;border-left:3px solid var(--gft-ochre);background:#0a3d3ae6;color:var(--cpr-on);font-size:17px;line-height:1.5;pointer-events:auto;align-content:start}
.cpr-lat__read-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cpr-lat__num{font:700 13px/1.4 var(--cpr-mono);letter-spacing:.12em;color:var(--cpr-sage-l)}
.cpr-lat__dots{display:flex;gap:4px}
.cpr-lat__dot{min-width:28px;min-height:26px;padding:2px 6px;border:1px solid #a8dcbf55;background:#072d2b99;color:var(--cpr-sage-l);font:700 13px/1 var(--cpr-mono);cursor:pointer;transition:background-color .25s,color .25s,border-color .25s}
.cpr-lat__dot:is(:hover,:focus-visible,[data-on]){background:var(--gft-ochre);border-color:var(--gft-ochre);color:var(--cpr-night)}
.cpr-lat__dot:focus-visible{outline:2px solid var(--cpr-on);outline-offset:2px}
.cpr-lat__read strong{font-size:22px;letter-spacing:-.02em;line-height:1.2}
.cpr-lat__bar{position:relative;display:block;height:3px;margin-top:4px;background:#a8dcbf33;overflow:hidden}
.cpr-lat__bar i{display:block;width:42%;height:100%;background:var(--gft-ochre)}
:root[data-m-go] .cpr-lat__bar i[data-m-on]{animation-name:cpr-bar-x;animation-duration:3.6s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal}
@keyframes cpr-bar-x{from{transform:translateX(-100%)}to{transform:translateX(240%)}}
/* entrance: (a) warps and wefts draw, (b) the cord runs and each knot tightens as it is reached, (c) labels rise */
:root[data-m-go] .cpr-lat__warp{animation-name:cpr-wipe-d;animation-duration:520ms;animation-timing-function:var(--gft-ease-in-out);animation-delay:0ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .cpr-lat__weft{animation-name:cpr-wipe-r;animation-duration:520ms;animation-timing-function:var(--gft-ease-in-out);animation-delay:60ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .cpr-lat__run--a{animation-name:cpr-wipe-r;animation-duration:330ms;animation-timing-function:linear;animation-delay:300ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .cpr-lat__run--b{animation-name:cpr-wipe-l;animation-duration:260ms;animation-timing-function:var(--gft-ease-out);animation-delay:600ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .cpr-lat__in{animation-name:cpr-tighten;animation-duration:440ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(160ms + var(--cpr-i) * 60ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .cpr-lat__label{animation-name:cpr-label;animation-duration:280ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(540ms + var(--cpr-i) * 16ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .cpr-lat__read{animation-name:cpr-up;animation-duration:320ms;animation-timing-function:var(--gft-ease-out);animation-delay:560ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes cpr-tighten{from{opacity:.4;transform:scale(1.12) rotate(-4deg)}to{opacity:1;transform:none}}
@keyframes cpr-label{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* alive: a tension pulse runs the cord from knot 1 to knot 6 (a clip window, transform-free) */
:root[data-m-go] .cpr-lat__pulse[data-m-on] .cpr-lat__pulse-a{animation-name:cpr-pulse-a;animation-duration:3.6s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal;animation-delay:.2s}
:root[data-m-go] .cpr-lat__pulse[data-m-on] .cpr-lat__pulse-b{animation-name:cpr-pulse-b;animation-duration:3.6s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal;animation-delay:.2s}
@keyframes cpr-pulse-a{0%{opacity:1;clip-path:inset(0 100% 0 -12%)}46%{opacity:1;clip-path:inset(0 -12% 0 100%)}47%,100%{opacity:0;clip-path:inset(0 -12% 0 100%)}}
@keyframes cpr-pulse-b{0%,44%{opacity:0;clip-path:inset(0 -12% 0 100%)}45%{opacity:1;clip-path:inset(0 -12% 0 100%)}92%{opacity:1;clip-path:inset(0 100% 0 -12%)}93%,100%{opacity:0;clip-path:inset(0 100% 0 -12%)}}

/* ================================================================ 2 the knot bench */
.cpr-bench{--cpr-pb:44px;background:var(--cpr-night);color:var(--cpr-on);padding:clamp(28px,3vw,44px) 0 var(--cpr-pb)}
.cpr-bench .cpr-head{margin-bottom:18px}
.cpr-bench .cpr-h{max-width:22ch}
.cpr-bench .cpr-eyebrow{color:var(--cpr-sage-l)}
.cpr-bench .cpr-lede{color:var(--cpr-on2)}
.cpr-ambient{position:absolute;z-index:0;width:min(52vw,720px);height:auto;pointer-events:none;overflow:visible;overflow-anchor:none;right:-4%;top:2%}
.cpr-ambient path{stroke:var(--gft-leaf);stroke-width:1.4;stroke-opacity:.34}
.cpr-ambient circle{fill:var(--gft-ochre);opacity:.6}
.cpr-bench__panel{position:relative;z-index:1;display:grid;grid-template-columns:clamp(240px,20vw,290px) minmax(0,1fr) minmax(0,450px);grid-template-rows:auto 64px;column-gap:clamp(24px,2.8vw,40px);margin-right:calc((100% - 100vw) / 2);padding:26px calc((100vw - 100%) / 2) 0 26px;background:var(--cpr-deep);border-top:1px solid #a8dcbf30}
.cpr-bench__pick{grid-row:1/3;display:flex;flex-direction:column;justify-content:center;gap:10px;min-width:0;margin:0 0 26px;padding:0;border:0}
.cpr-bench__pick legend{padding:0;margin-bottom:12px;font:700 13px/1.5 var(--cpr-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cpr-sage-l)}
.cpr-opt{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"n name" "n tag";gap:2px 14px;align-items:center;min-height:60px;padding:12px 16px;border:1px solid #a8dcbf55;background:var(--cpr-night);cursor:pointer;transition:transform .4s var(--gft-ease-out),background-color .3s}
.cpr-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cpr-opt__n{grid-area:n;font:700 13px/1 var(--cpr-mono);color:var(--cpr-sage-l)}
.cpr-opt__name{grid-area:name;font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.cpr-opt__tag{grid-area:tag;font:600 13px/1.4 var(--cpr-mono);letter-spacing:.04em;color:var(--cpr-on2)}
.cpr-opt:has(input:checked){background:var(--cpr-on);color:var(--cpr-night);transform:translateX(14px)}
.cpr-opt:has(input:checked) :is(.cpr-opt__n,.cpr-opt__tag){color:var(--cpr-ink2)}
.cpr-opt:has(input:focus-visible){outline:3px solid var(--gft-ochre);outline-offset:3px}
.cpr-bench__knot{position:relative;container-type:inline-size;align-self:stretch;min-width:0}
.cpr-bench__knot svg{display:block;width:100%;height:auto;overflow:visible}
.cpr-bench__guide{stroke:#a8dcbf30;stroke-dasharray:2 8}
.cpr-bench__sheath{stroke:var(--cpr-cord);stroke-width:3.4}
.cpr-bench__core{stroke:var(--gft-ochre);stroke-width:1.1}
.cpr-bench__k{transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(.92);transition:opacity .14s linear,transform .14s linear}
.cpr-bench__k[data-on]{opacity:1;transform:none;transition:opacity .28s var(--gft-ease-out) .15s,transform .32s var(--gft-ease-out) .15s}
.cpr-bench__thread{stroke:var(--cpr-cord);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cpr-bench__k--speed .cpr-bench__thread{stroke:var(--cpr-ochre-l);stroke-dasharray:14 9}
.cpr-bench__node{fill:var(--gft-ochre);stroke:var(--cpr-deep);stroke-width:1.5}
.cpr-bench__nodewrap{transform-box:fill-box;transform-origin:center}
.cpr-bench__cap{fill:var(--cpr-sage-l);font:600 13px var(--cpr-mono);letter-spacing:.12em}
.cpr-bench__drop{position:absolute;right:0;top:calc(38.33cqw - 1px);bottom:-32px;width:18px;border:0 solid var(--cpr-cord);border-width:3px 3px 0 0;border-top-right-radius:16px;border-top-color:transparent;pointer-events:none}
.cpr-bench__read{min-width:0;margin-bottom:12px}
.cpr-bench__read .cpr-pane{display:flex;flex-direction:column;gap:9px}
.cpr-bench__read h3{font-size:26px;letter-spacing:-.03em;line-height:1.15;margin-top:2px}
.cpr-bench__read p{font-size:17px;line-height:1.5;color:var(--cpr-on2)}
.cpr-ledger{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:0;border-top:1px solid #a8dcbf40}
.cpr-ledger li{display:grid;grid-template-columns:104px minmax(0,1fr);gap:2px 14px;padding:7px 0;border-bottom:1px solid #a8dcbf40;font-size:16px;line-height:1.35}
.cpr-ledger b{font:700 13px/1.5 var(--cpr-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cpr-sage-l)}
.cpr-ledger i{grid-column:1;grid-row:2;font:600 13px/1.3 var(--cpr-mono);font-style:normal;color:var(--cpr-sage-l)}
.cpr-ledger span{grid-row:1/3;grid-column:2;color:var(--cpr-on)}
.cpr-ledger li.is-missing i{color:var(--cpr-ochre-l)}
.cpr-bench__read .cpr-verdict{font-size:21px;line-height:1.3;font-weight:750;color:var(--cpr-on);letter-spacing:-.02em}
.cpr-bench__read .cpr-fold{margin-top:0;font-size:13px;line-height:1.5;color:var(--cpr-on2)}
.cpr-bench__rail{grid-column:3;grid-row:2;position:relative;display:grid;grid-template-columns:repeat(4,1fr);align-items:center}
.cpr-bench__line{position:absolute;left:calc(-1 * clamp(24px,2.8vw,40px) - 2px);right:calc(var(--cpr-g) / -2 - 1.5px);top:calc(50% - 1.5px);height:3px;background:linear-gradient(var(--cpr-cord),var(--cpr-cord)) 0 0/100% 1px no-repeat,linear-gradient(var(--gft-ochre),var(--gft-ochre)) 0 1px/100% 1px no-repeat,linear-gradient(var(--cpr-cord),var(--cpr-cord)) 0 2px/100% 1px no-repeat}
.cpr-bench__scan{position:absolute;left:0;top:calc(50% - 4px);width:90px;height:8px;background:linear-gradient(90deg,#f0c47e00,#f0c47ecc,#f0c47e00);opacity:0;pointer-events:none;overflow-anchor:none}
.cpr-st{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:6px;font:600 13px/1.3 var(--cpr-mono);letter-spacing:.04em;text-transform:uppercase}
.cpr-st svg{width:26px;height:26px;background:var(--cpr-deep);border-radius:50%;margin-left:-2px}
.cpr-st path{stroke:var(--cpr-sage-l);stroke-width:2.6;stroke-linecap:round}
.cpr-st b{font-size:13px;font-weight:700;color:var(--cpr-on);position:absolute;left:0;top:calc(50% + 14px);white-space:nowrap}
.cpr-st em{position:absolute;left:30px;bottom:calc(50% + 6px);font-style:normal;white-space:nowrap;text-transform:none;color:var(--cpr-sage-l);opacity:0;transition:opacity .3s}
.cpr-st em.is-miss{color:var(--cpr-ochre-l)}
.cpr-st em[data-on]{opacity:1}
.cpr-bench__panel[data-s="0"] .cpr-st path{stroke:var(--cpr-ochre-l);stroke-dasharray:5 4}
.cpr-bench__exit{right:calc(var(--cpr-g) / -2 - 1.5px);top:calc(50% - 1.5px);bottom:calc(-1 * var(--cpr-reach,0px) - 2px);width:20px;border-width:3px 3px 0 0;border-top-color:transparent;border-top-right-radius:14px}
/* entrance (knot): the cord draws across the panel and the knot forms loose, then pulls tight while stations pop in
   and the picker rows cascade from the left */
:root[data-m-go] .cpr-bench:not([data-cpr-in]) :is(.cpr-bench__cord,.cpr-bench__line){clip-path:inset(0 100% 0 0)}
:root[data-m-go] .cpr-bench:not([data-cpr-in]) .cpr-bench__form{opacity:.35;transform:scale(1.1) rotate(-5deg)}
:root[data-m-go] .cpr-bench:not([data-cpr-in]) :is(.cpr-opt,.cpr-st,.cpr-bench__read){opacity:0}
:root[data-m-go] .cpr-bench[data-cpr-in] :is(.cpr-bench__cord,.cpr-bench__line){animation-name:cpr-wipe-r;animation-duration:450ms;animation-timing-function:var(--gft-ease-in-out);animation-delay:0ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
.cpr-bench__form{transform-box:fill-box;transform-origin:center}
:root[data-m-go] .cpr-bench[data-cpr-in] .cpr-bench__form{animation-name:cpr-knot-form;animation-duration:850ms;animation-timing-function:var(--gft-ease-out);animation-delay:0ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes cpr-knot-form{0%{opacity:.35;transform:scale(1.14) rotate(-6deg)}45%{opacity:.85;transform:scale(1.1) rotate(-3deg)}100%{opacity:1;transform:none}}
:root[data-m-go] .cpr-bench[data-cpr-in] .cpr-opt{animation-name:cpr-cascade;animation-duration:460ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(350ms + var(--cpr-i) * 70ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .cpr-bench[data-cpr-in] .cpr-st{animation-name:cpr-pop;animation-duration:360ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(420ms + var(--cpr-i) * 60ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .cpr-bench[data-cpr-in] .cpr-bench__read{animation-name:cpr-wipe-r;animation-duration:520ms;animation-timing-function:var(--gft-ease-out);animation-delay:300ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes cpr-cascade{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes cpr-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
/* alive: a scan runs along the rail and lights each station as it passes */
:root[data-m-go] .cpr-bench__scan[data-m-on]{animation-name:cpr-scan-x;animation-duration:6s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal}
@keyframes cpr-scan-x{0%{opacity:0;transform:translateX(-90px)}6%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateX(min(480px,30vw))}}
:root[data-m-go] .cpr-bench__rail:has(.cpr-bench__scan[data-m-on]) .cpr-st svg{animation-name:cpr-st-lit;animation-duration:6s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal;animation-delay:calc(var(--cpr-i) * 1.35s + .3s)}
@keyframes cpr-st-lit{0%,100%{filter:none}3%{filter:drop-shadow(0 0 6px #f0c47e)}12%{filter:none}}

/* ================================================================ 3 the tag wall */
.cpr-dec{background:var(--gft-paper);color:var(--cpr-ink);padding:30px 0 56px;view-timeline-name:--cpr-dec;view-timeline-axis:block}
.cpr-dec__box{display:grid;grid-template-columns:62% minmax(0,1fr);column-gap:4%;row-gap:26px;align-items:start}
.cpr-ruler{grid-column:1/-1;position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:30px 0 0;border:0;min-width:0}
.cpr-ruler legend{position:absolute;top:0;left:0;padding:0;font:700 13px/1.5 var(--cpr-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cpr-ink2)}
.cpr-ruler__cord{position:absolute;left:0;right:calc(var(--cpr-g) / -2 + 14px);top:46px;height:3px;background:linear-gradient(var(--cpr-cord-ink),var(--cpr-cord-ink)) 0 0/100% 1px no-repeat,linear-gradient(var(--gft-ochre),var(--gft-ochre)) 0 1px/100% 1px no-repeat,linear-gradient(var(--cpr-cord-ink),var(--cpr-cord-ink)) 0 2px/100% 1px no-repeat}
.cpr-dec__in{right:calc(var(--cpr-g) / -2 - 1.5px);top:calc(-1 * var(--cpr-reach,0px) - 2px);height:calc(var(--cpr-reach,0px) + 51px);width:16px;border-width:0 3px 3px 0;border-color:var(--cpr-cord-ink);border-bottom-color:transparent;border-bottom-right-radius:14px}
.cpr-ruler__st{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:84px;padding:0 8px 0 0;cursor:pointer}
.cpr-ruler__st input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.cpr-ruler__knot{width:34px;height:34px;margin-left:-2px;border-radius:50%;border:3px solid var(--cpr-cord-ink);background:var(--gft-paper);transition:background-color .3s,border-color .3s,transform .4s var(--gft-ease-out)}
.cpr-ruler__t{display:grid;gap:0}
.cpr-ruler__t b{font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.cpr-ruler__t em{font:600 13px/1.4 var(--cpr-mono);font-style:normal;letter-spacing:.04em;color:var(--cpr-ink2)}
.cpr-ruler__st:has(input:checked) .cpr-ruler__knot{background:var(--gft-ochre);border-color:#8a5a14;transform:scale(1.18)}
.cpr-ruler__st:has(input:focus-visible) .cpr-ruler__knot{outline:3px solid var(--gft-ochre);outline-offset:4px}
.cpr-dec__box[data-s="1"] .cpr-ruler__st:nth-of-type(-n+1) .cpr-ruler__knot,.cpr-dec__box[data-s="2"] .cpr-ruler__st:nth-of-type(-n+2) .cpr-ruler__knot,.cpr-dec__box[data-s="3"] .cpr-ruler__st:nth-of-type(-n+3) .cpr-ruler__knot,.cpr-dec__box[data-s="4"] .cpr-ruler__st:nth-of-type(-n+4) .cpr-ruler__knot{background:var(--cpr-cord-ink)}
.cpr-dec__wall{--pitch:118px;position:relative;container-type:inline-size;height:calc(var(--pitch) * 3 + 122px);min-width:0}
.cpr-dec__cord,.cpr-dec__front{position:absolute;left:0;right:0;top:calc(var(--r) * var(--pitch));height:3px;background:var(--cpr-cord-ink);opacity:.75}
.cpr-dec__front{--r:3;opacity:1;background:linear-gradient(var(--cpr-cord-ink),var(--cpr-cord-ink)) 0 0/100% 1px no-repeat,linear-gradient(var(--gft-ochre),var(--gft-ochre)) 0 1px/100% 1px no-repeat,linear-gradient(var(--cpr-cord-ink),var(--cpr-cord-ink)) 0 2px/100% 1px no-repeat}
.cpr-dec__out{left:calc(100% - 1.5px);top:calc(var(--pitch) * 3);bottom:calc(-1 * var(--cpr-reach,0px) - 2px);width:3px;border-left-width:3px;border-color:var(--cpr-cord-ink)}
.cpr-dec__stn{position:absolute;left:calc(var(--c) * 25%);top:calc(var(--pitch) * 3 + 106px);width:calc(25% - 14px);display:flex;align-items:center;gap:8px;font:700 13px/1.3 var(--cpr-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cpr-ink2)}
.cpr-dec__stn i{width:14px;height:14px;border-radius:50%;border:2px solid var(--cpr-cord-ink);background:var(--gft-paper);transition:background-color .3s}
.cpr-dec__box[data-s="1"] .cpr-dec__stn:nth-of-type(-n+1) i,.cpr-dec__box[data-s="2"] .cpr-dec__stn:nth-of-type(-n+2) i,.cpr-dec__box[data-s="3"] .cpr-dec__stn:nth-of-type(-n+3) i,.cpr-dec__box[data-s="4"] .cpr-dec__stn i{background:var(--gft-ochre);border-color:#8a5a14}
.cpr-tg{position:absolute;left:calc(var(--c) * 25%);top:calc(var(--r) * var(--pitch));width:calc(25% - 14px);height:var(--pitch);transition:translate .7s var(--gft-ease-out),opacity .5s;translate:0 0}
.cpr-tg__hand,.cpr-tg__sway,.cpr-tg__card{display:block;transform-origin:50% 0}
.cpr-tg__sway{padding-top:16px;background:linear-gradient(var(--cpr-ink2),var(--cpr-ink2)) 50% 0/2px 16px no-repeat}
.cpr-tg__card{position:relative;display:flex;align-items:flex-end;min-height:82px;padding:22px 12px 10px;background:#fff;border:1px solid #0e4d4a55;box-shadow:0 6px 18px #0e4d4a14;transition:border-color .4s,background-color .4s,box-shadow .4s}
.cpr-tg__card em{transition:color .4s}
.cpr-tg__card i{position:absolute;top:7px;left:calc(50% - 4px);width:8px;height:8px;border-radius:50%;border:2px solid var(--cpr-ink2)}
.cpr-tg__card em{font-style:normal;font-size:17px;font-weight:750;letter-spacing:-.02em;line-height:1.2;color:var(--cpr-ink)}
/* Retained outcomes stay legible while their cards carry the moving hand-over. */
.cpr-tg.is-kept .cpr-tg__card em{color:var(--cpr-night);opacity:1}
.cpr-dec__box[data-s="1"] .cpr-tg[data-f="1"],.cpr-dec__box[data-s="2"] .cpr-tg:is([data-f="1"],[data-f="2"]),.cpr-dec__box[data-s="3"] .cpr-tg:is([data-f="1"],[data-f="2"],[data-f="3"]),.cpr-dec__box[data-s="4"] .cpr-tg:not(.is-kept){translate:0 12px}
.cpr-dec__box[data-s="1"] .cpr-tg[data-f="1"] .cpr-tg__card,.cpr-dec__box[data-s="2"] .cpr-tg:is([data-f="1"],[data-f="2"]) .cpr-tg__card,.cpr-dec__box[data-s="3"] .cpr-tg:is([data-f="1"],[data-f="2"],[data-f="3"]) .cpr-tg__card,.cpr-dec__box[data-s="4"] .cpr-tg:not(.is-kept) .cpr-tg__card{background:transparent;border-style:dashed;border-color:#0e4d4a55;box-shadow:none}
.cpr-dec__box[data-s="1"] .cpr-tg[data-f="1"] .cpr-tg__card em,.cpr-dec__box[data-s="2"] .cpr-tg:is([data-f="1"],[data-f="2"]) .cpr-tg__card em,.cpr-dec__box[data-s="3"] .cpr-tg:is([data-f="1"],[data-f="2"],[data-f="3"]) .cpr-tg__card em,.cpr-dec__box[data-s="4"] .cpr-tg:not(.is-kept) .cpr-tg__card em{color:#55635f;text-decoration:line-through;text-decoration-thickness:1px}
.cpr-dec__box[data-s="1"] .cpr-tg[data-f="1"] .cpr-tg__sway,.cpr-dec__box[data-s="2"] .cpr-tg:is([data-f="1"],[data-f="2"]) .cpr-tg__sway,.cpr-dec__box[data-s="3"] .cpr-tg:is([data-f="1"],[data-f="2"],[data-f="3"]) .cpr-tg__sway,.cpr-dec__box[data-s="4"] .cpr-tg:not(.is-kept) .cpr-tg__sway{background-size:2px 0}
.cpr-dec__box[data-s="1"] .cpr-tg[data-f="1"] .cpr-tg__card i,.cpr-dec__box[data-s="2"] .cpr-tg:is([data-f="1"],[data-f="2"]) .cpr-tg__card i,.cpr-dec__box[data-s="3"] .cpr-tg:is([data-f="1"],[data-f="2"],[data-f="3"]) .cpr-tg__card i,.cpr-dec__box[data-s="4"] .cpr-tg:not(.is-kept) .cpr-tg__card i{opacity:.3}
.cpr-dec__box:not([data-s="0"]) .cpr-tg.is-kept .cpr-tg__card{border:2px solid var(--gft-ochre)}
.cpr-dec__box[data-s="4"] .cpr-tg.is-kept{translate:calc(var(--dx) * (100% + 14px)) calc(var(--dy) * 100%)}
.cpr-dec__box[data-s="4"] .cpr-tg.is-kept .cpr-tg__card{background:#fdf6ea}
.cpr-dec__bead{position:absolute;left:-7px;top:calc(var(--pitch) * 3 - 6px);width:14px;height:14px;opacity:0;transition:opacity .3s;pointer-events:none;overflow-anchor:none}
.cpr-dec__bead b{display:block;width:14px;height:14px;border-radius:50%;background:var(--gft-ochre);box-shadow:0 0 0 4px #c98a2b40;transform:translateX(calc((var(--to) - 25cqw) / 2))}
.cpr-dec__box:not([data-s="0"]) .cpr-dec__bead{opacity:1}
.cpr-dec__box[data-s="1"]{--to:12.5cqw}.cpr-dec__box[data-s="2"]{--to:37.5cqw}.cpr-dec__box[data-s="3"]{--to:62.5cqw}.cpr-dec__box[data-s="4"]{--to:87.5cqw}
:root[data-m-go] .cpr-dec__bead[data-m-on] b{animation-name:cpr-bead-x;animation-duration:2.6s;animation-timing-function:var(--gft-ease-in-out);animation-iteration-count:infinite;animation-direction:normal}
@keyframes cpr-bead-x{0%{transform:translateX(12.5cqw);opacity:0}12%{opacity:1}80%{transform:translateX(var(--to));opacity:1}100%{transform:translateX(var(--to));opacity:0}}
.cpr-dec__side{min-width:0;display:flex;flex-direction:column;gap:20px}
.cpr-dec__side .cpr-head{display:block}
.cpr-dec__side .cpr-h{max-width:12ch}
.cpr-dec__side .cpr-lede{margin-top:14px;color:var(--cpr-ink2)}
.cpr-dec .cpr-eyebrow{color:var(--cpr-ink2)}
.cpr-dec__read{border-top:3px solid var(--gft-ochre);padding-top:14px}
.cpr-pane__k{display:block;font:700 13px/1.4 var(--cpr-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cpr-ink2);margin-bottom:8px}
.cpr-dec__read h3{font-size:30px;line-height:1.1;letter-spacing:-.035em;margin-bottom:10px}
.cpr-dec__read p{font-size:19px;line-height:1.5;color:var(--cpr-ink)}
/* alive: the tags sway on their strings */
:root[data-m-go] .cpr-dec__wall[data-m-on] .cpr-tg__sway{animation-name:cpr-sway;animation-duration:5.6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:calc(var(--i) * -.47s)}
@keyframes cpr-sway{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
/* entrance (pick): the three cords draw in alternating directions, then tags drop on one by one and swing to rest */
:root[data-m-go] .cpr-dec:not([data-cpr-in]) :is(.cpr-dec__cord,.cpr-dec__front,.cpr-ruler__cord){clip-path:inset(0 100% 0 0)}
:root[data-m-go] .cpr-dec:not([data-cpr-in]) .cpr-tg__card{opacity:.3;transform:translateY(-26px)}
:root[data-m-go] .cpr-dec:not([data-cpr-in]) :is(.cpr-ruler__knot,.cpr-dec__stn i){transform:scale(0)}
:root[data-m-go] .cpr-dec:not([data-cpr-in]) .cpr-dec__read{opacity:0}
:root[data-m-go] .cpr-dec[data-cpr-in] :is(.cpr-dec__cord,.cpr-ruler__cord,.cpr-dec__front){animation-name:cpr-wipe-r;animation-duration:400ms;animation-timing-function:var(--gft-ease-in-out);animation-delay:calc(var(--r,0) * 40ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .cpr-dec[data-cpr-in] .cpr-dec__cord:nth-of-type(2){animation-name:cpr-wipe-l}
:root[data-m-go] .cpr-dec[data-cpr-in] .cpr-tg__card{animation-name:cpr-drop;animation-duration:560ms;animation-timing-function:linear;animation-delay:calc(250ms + var(--i) * 20ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes cpr-drop{0%{opacity:.3;transform:translateY(-26px) rotate(0);animation-timing-function:cubic-bezier(.4,0,1,1)}45%{opacity:1;transform:translateY(0) rotate(4deg);animation-timing-function:ease-out}72%{transform:rotate(-2deg)}100%{opacity:1;transform:none}}
:root[data-m-go] .cpr-dec[data-cpr-in] :is(.cpr-ruler__knot,.cpr-dec__stn i){animation-name:cpr-pop;animation-duration:320ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(300ms + var(--cpr-i,0) * 50ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .cpr-dec[data-cpr-in] .cpr-dec__read{animation-name:cpr-up;animation-duration:520ms;animation-timing-function:var(--gft-ease-out);animation-delay:320ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
/* hand-over: the kept tags slide along their cord to the right and shrink into knots */
@supports (animation-timeline:view()){
  :root[data-m-go] .cpr-tg.is-kept .cpr-tg__hand{animation-name:cpr-to-knot;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--cpr-dec;animation-range-start:exit 40%;animation-range-end:exit 90%}
}
@keyframes cpr-to-knot{to{transform:translateX(120px) scale(.3)}}

/* ================================================================ 4 the record film (sticky) */
.cpr-film{background:var(--cpr-mist);color:var(--cpr-ink)}
.cpr-film__box{position:relative}
.cpr-film__pin{position:sticky;top:0;height:100svh;overflow:clip;z-index:1;background-color:var(--cpr-mist)}
.cpr-film__ground{position:absolute;inset:0;background-color:var(--cpr-mist);background-image:linear-gradient(#0e4d4a0b 1px,transparent 1px),linear-gradient(90deg,#0e4d4a0b 1px,transparent 1px);background-size:48px 48px}
.cpr-film__out{position:absolute;left:calc(50% - 1.5px);bottom:0;width:3px;height:26px;background:var(--cpr-cord-ink);z-index:3;pointer-events:none}
.cpr-film__grid{position:relative;height:100%;display:grid;grid-template-columns:34% minmax(0,1fr) 40%;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"head head dash" "trace trace trace" "cards lede ledger";column-gap:3%;row-gap:10px;padding-block:26px 28px}
.cpr-film__head{grid-area:head;display:block}
.cpr-film__head .cpr-h{font-size:clamp(2rem,3.1vw,3.05rem);max-width:22ch}
.cpr-film .cpr-eyebrow{color:var(--cpr-ink2)}
.cpr-film__dash{grid-area:dash;justify-self:end;align-self:end;display:grid;justify-items:end;gap:12px}
.cpr-film__hud{font:600 22px/1.2 var(--cpr-mono);letter-spacing:.02em;color:var(--cpr-forest);white-space:nowrap}
.cpr-film__n{display:inline-block;min-width:1ch}
.cpr-film__sep{color:var(--gft-ochre)}
.cpr-film__st{display:inline-grid}
.cpr-film__st em{grid-area:1/1;font-style:normal;opacity:0;transition:opacity .3s}
.cpr-film__st em[data-on]{opacity:1}
.cpr-film__rail{display:flex;align-items:center;gap:6px}
.cpr-film__rail button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #0e4d4a55;background:#fff;color:var(--cpr-forest);font-size:22px;line-height:1}
.cpr-film__pip svg{width:26px;height:26px}
.cpr-film__pip path{stroke:var(--cpr-cord-ink);stroke-width:2.6;stroke-linecap:round}
.cpr-film__pip[data-on]{background:var(--cpr-forest)}
.cpr-film__pip[data-on] path{stroke:var(--cpr-ochre-l)}
.cpr-film__trace{grid-area:trace;position:relative;min-height:0;align-self:stretch}
.cpr-film__trace svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cpr-film__in{left:60%;top:calc(-1 * var(--cpr-reach,0px) - 2px);bottom:58%;width:calc(2% + 1.5px);border-width:0 3px 3px 0;border-bottom-right-radius:10px;border-color:var(--cpr-cord-ink)}
.cpr-tr__axis{stroke:#0e4d4a80;stroke-width:1.5}
.cpr-tr__ticks path{stroke:var(--cpr-forest);stroke-width:2.5}
.cpr-film__trace text{fill:var(--cpr-ink2);font:600 13px var(--cpr-mono);letter-spacing:.08em}
.cpr-tr__line{stroke:var(--cpr-forest);stroke-width:4;stroke-linecap:round}
.cpr-tr__gap{stroke:var(--gft-ochre);stroke-width:3;stroke-dasharray:8 9;stroke-linecap:round}
.cpr-tr__pulse{stroke:var(--gft-ochre);stroke-width:5;stroke-linecap:round;opacity:0}
:root[data-m-go] .cpr-tr__wave[data-m-on] .cpr-tr__pulse{animation-name:cpr-tr-flow;animation-duration:3.4s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal}
@keyframes cpr-tr-flow{0%{opacity:.95;clip-path:inset(-10% 100% -10% -8%)}82%{opacity:.95;clip-path:inset(-10% -8% -10% 100%)}83%,100%{opacity:0;clip-path:inset(-10% -8% -10% 100%)}}
.cpr-tr__knot{stroke:var(--cpr-forest);stroke-width:3.5;fill:var(--cpr-mist);stroke-linecap:round;transform-box:fill-box;transform-origin:center}
.cpr-tr__ring{stroke:var(--gft-ochre);stroke-width:3;stroke-dasharray:6 6}
.cpr-tr__ring--x{stroke-dasharray:none}
.cpr-tr__lead{stroke:var(--cpr-ink2);stroke-width:1.5}
.cpr-tr__ref path{stroke:var(--gft-indigo);stroke-width:3}
.cpr-tr__ref text{fill:var(--gft-indigo)}
.cpr-tr__flag{stroke:var(--gft-ochre);stroke-width:2}
.cpr-tr__splice{stroke:#2f7d5a;stroke-width:5;stroke-linecap:round}
.cpr-tr__tie{stroke:#2f7d5a;stroke-width:3.5;fill:var(--cpr-mist)}
.cpr-tr__wave{transition:clip-path .6s var(--gft-ease-in-out),opacity .4s}
.cpr-tr__b2{transition:stroke-dasharray .3s}
.cpr-film__box[data-s="2"] .cpr-tr__b2{stroke-dasharray:6 8;stroke-width:3;opacity:.7}
:is(.cpr-tr__s0,.cpr-tr__s1,.cpr-tr__s2,.cpr-tr__ref,.cpr-tr__ticks){opacity:0;transition:opacity .35s}
:is(.cpr-tr__s0,.cpr-tr__s1,.cpr-tr__s2,.cpr-tr__ref,.cpr-tr__ticks)[data-on]{opacity:1;transition:opacity .5s .15s}
.cpr-tr__ticks path,.cpr-tr__s2 .cpr-tr__splice{transform-box:fill-box;transform-origin:50% 100%}
.cpr-tr__ticks[data-on] path{animation-name:cpr-stamp;animation-duration:380ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(var(--i) * 18ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root:not([data-m-go]) .cpr-tr__ticks[data-on] path{animation-name:none}
.cpr-tr__s2[data-on] .cpr-tr__splice{animation-name:cpr-lift;animation-duration:620ms;animation-timing-function:var(--gft-ease-out);animation-delay:120ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root:not([data-m-go]) .cpr-tr__s2[data-on] .cpr-tr__splice{animation-name:none}
@keyframes cpr-stamp{from{transform:scaleY(0)}to{transform:none}}
@keyframes cpr-lift{from{transform:translateY(60px) scaleY(.2);opacity:0}to{transform:none;opacity:1}}
.cpr-film__cards{grid-area:cards;display:grid;align-self:end;min-width:0}
.cpr-fc{grid-area:1/1;align-self:end;padding:18px 20px;background:#fff;border:1px solid #0e4d4a40;border-left:4px solid var(--gft-ochre);opacity:0;visibility:hidden;transition:opacity .15s linear,visibility 0s linear .15s}
.cpr-fc[data-on]{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}
.cpr-fc small{display:block;font:700 13px/1.4 var(--cpr-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cpr-ink2)}
.cpr-fc h3{font-size:27px;line-height:1.12;letter-spacing:-.035em;margin:6px 0 8px}
.cpr-fc p{font-size:17px;line-height:1.5}
:root[data-m-go] .cpr-fc[data-on]{animation-duration:620ms;animation-timing-function:var(--gft-ease-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal;transform-origin:50% 100%}
:root[data-m-go] .cpr-fc[data-on][data-k="0"]{animation-name:cpr-card}
:root[data-m-go] .cpr-fc[data-on][data-k="1"]{animation-name:cpr-comb}
:root[data-m-go] .cpr-fc[data-on][data-k="2"]{animation-name:cpr-ply}
@keyframes cpr-card{from{opacity:0;transform:perspective(800px) rotateX(24deg) translateY(18px)}to{opacity:1;transform:none}}
@keyframes cpr-comb{from{opacity:0;transform:translateY(-26px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
@keyframes cpr-ply{from{opacity:0;transform:translateX(-30px) scale(.97)}to{opacity:1;transform:none}}
.cpr-film__lede{grid-area:lede;align-self:end;font-size:17px;line-height:1.6;color:var(--cpr-ink2);padding-bottom:4px}
.cpr-film__ledger{grid-area:ledger;align-self:end;padding:14px 18px 12px;background:#fbfdfb;border:1px solid #0e4d4a40}
.cpr-film__ledger dl{margin:0;display:grid}
.cpr-lr{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:5px 0 5px 10px;border-bottom:1px solid #0e4d4a22;border-left:3px solid transparent;transition:border-color .3s,background-color .3s}
.cpr-lr dt{font:700 13px/1.6 var(--cpr-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cpr-ink2)}
.cpr-lr dd{margin:0;display:grid;font-size:17px;line-height:1.4}
.cpr-lr dd span{grid-area:1/1;opacity:0;transition:opacity .25s}
.cpr-lr dd span[data-on]{opacity:1;transition:opacity .4s .12s}
.cpr-film__box[data-s="0"] :is(.cpr-lr--event,.cpr-lr--boundary,.cpr-lr--value),.cpr-film__box[data-s="1"] :is(.cpr-lr--check,.cpr-lr--value),.cpr-film__box[data-s="2"] :is(.cpr-lr--history,.cpr-lr--value){border-left-color:var(--gft-ochre);background:#c98a2b14}
.cpr-film__state{display:grid;margin-top:10px;font-size:17px;line-height:1.4;font-weight:650;color:var(--cpr-forest)}
.cpr-film__state span{grid-area:1/1;opacity:0;transition:opacity .25s}
.cpr-film__state span[data-on]{opacity:1;transition:opacity .4s .12s}
.cpr-film__cap{margin-top:8px;font:13px/1.4 var(--cpr-mono);color:var(--cpr-ink2)}
.cpr-film__steps{position:relative;margin-top:-100svh}
.cpr-film__spacer{height:101svh}
/* entrance (unspool): the stage starts at 70 percent, the trace unspools from the left, then knots stamp and the
   ledger rows wipe in */
:root[data-m-go] .cpr-film:not([data-cpr-in]) .cpr-film__grid{opacity:.7}
:root[data-m-go] .cpr-film:not([data-cpr-in]) .cpr-film__trace svg{clip-path:inset(-10% 100% -10% 0)}
:root[data-m-go] .cpr-film:not([data-cpr-in]) :is(.cpr-lr,.cpr-tr__knot){opacity:0}
:root[data-m-go] .cpr-film[data-cpr-in] .cpr-film__grid{animation-name:cpr-fade7;animation-duration:400ms;animation-timing-function:linear;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes cpr-fade7{from{opacity:.7}to{opacity:1}}
:root[data-m-go] .cpr-film[data-cpr-in] .cpr-film__trace svg{animation-name:cpr-unspool;animation-duration:460ms;animation-timing-function:var(--gft-ease-in-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes cpr-unspool{from{clip-path:inset(-10% 100% -10% 0)}to{clip-path:inset(-10% 0 -10% 0)}}
:root[data-m-go] .cpr-film[data-cpr-in] .cpr-tr__knot{animation-name:cpr-pop;animation-duration:340ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(320ms + var(--i) * 60ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .cpr-film[data-cpr-in] .cpr-lr{animation-name:cpr-wipe-r;animation-duration:380ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(300ms + var(--k,0) * 50ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
.cpr-lr--event{--k:0}.cpr-lr--boundary{--k:1}.cpr-lr--value{--k:2}.cpr-lr--check{--k:3}.cpr-lr--history{--k:4}

/* ================================================================ 5 the balance beam (dark interlude) */
.cpr-bal{--tilt:0deg;background:var(--cpr-night);color:var(--cpr-on);padding:0 0 48px;view-timeline-name:--cpr-bal;view-timeline-axis:block}
.cpr-bal__taut{position:relative;padding:56px 24px 36px;text-align:center;overflow:hidden}
.cpr-bal__taut-line{position:absolute;left:3%;right:3%;top:0;height:4px;background:var(--cpr-cord)}
.cpr-bal__taut-fulcrum{position:absolute;left:calc(50% - 14px);top:-12px;width:28px;height:28px;border-radius:50%;background:var(--gft-ochre)}
.cpr-bal__taut-fulcrum::after{content:'';position:absolute;left:12.5px;top:24px;width:3px;height:140px;background:#6bb68f80}
.cpr-bal__taut-cone{position:absolute;left:calc(50% - 170px);top:4px;width:340px;bottom:0;background:#6bb68f1c;clip-path:polygon(50% 0,100% 100%,0 100%);pointer-events:none}
.cpr-bal__taut-text{position:relative;margin:0 auto;font:italic 26px/1.3 var(--gft-font-serif);color:var(--cpr-on)}
.cpr-bal[data-s="0"]{--tilt:-4deg}.cpr-bal[data-s="2"]{--tilt:4deg}
.cpr-bal__air{position:absolute;inset:0;pointer-events:none;overflow:clip}
.cpr-bal__strands{position:absolute;left:0;width:100%;height:46%}
.cpr-bal__strands--up{top:0}
.cpr-bal__strands--down{bottom:0}
.cpr-bal__strands path{stroke:var(--cpr-cord);stroke-width:1.3;stroke-opacity:.3;vector-effect:non-scaling-stroke}
.cpr-bal__head{position:relative;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}
.cpr-bal__head .cpr-h{font-size:clamp(2.6rem,6vw,5.6rem);max-width:13ch;line-height:.98}
.cpr-bal .cpr-eyebrow{color:var(--cpr-sage-l)}
.cpr-bal .cpr-lede{color:var(--cpr-on2)}
.cpr-bal__stage{position:relative;height:330px;margin-top:30px;container-type:inline-size}
.cpr-bal__hand{position:absolute;left:0;right:0;top:20px;height:6px;overflow-anchor:none}
.cpr-bal__tilt{position:absolute;inset:0;rotate:var(--tilt);transition:rotate .8s cubic-bezier(.34,1.3,.5,1)}
.cpr-bal__idle,.cpr-bal__beam{display:block;height:6px}
.cpr-bal__beam{position:relative;background:var(--cpr-cord)}
.cpr-bal__beam i{position:absolute;left:0;right:0;top:2.5px;height:1px;background:var(--gft-ochre)}
.cpr-bal__pivot{position:absolute;left:calc(50% - 13px);top:-10px;width:26px;height:26px;border-radius:50%;background:var(--gft-ochre);border:4px solid var(--cpr-night)}
.cpr-bal__post{position:absolute;left:50%;top:10px;width:300px;height:290px;margin-left:-150px;background:linear-gradient(var(--cpr-cord),var(--cpr-cord)) 50% 0/2px 100% no-repeat;opacity:.35;clip-path:polygon(50% 0,100% 100%,0 100%);background-color:#6bb68f22}
.cpr-bal__fold{position:absolute;left:0;right:0;top:20px;overflow-anchor:none}
.cpr-bal__weights{margin:0;padding:0;border:0}
.cpr-w{--ww:min(300px,26cqw);position:absolute;top:0;left:calc(50% + var(--fx) * 100cqw);width:var(--ww);margin-left:calc(var(--ww) / -2);cursor:pointer}
.cpr-w input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.cpr-w__drop{display:block;translate:0 calc(var(--fx) * 100cqw * sin(var(--tilt)));transition:translate .8s cubic-bezier(.34,1.3,.5,1);transform-origin:50% 0}
.cpr-w__hang{display:block;width:2px;height:54px;margin:0 auto;background:var(--cpr-cord)}
.cpr-w__card{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"n name" "lead lead";align-items:end;gap:6px 14px;padding:14px 18px 16px;background:var(--cpr-deep);border:1px solid #a8dcbf55;transition:background-color .3s,border-color .3s}
.cpr-w__n{grid-area:n;font-size:64px;font-weight:850;letter-spacing:-.06em;line-height:.9;color:var(--cpr-sage-l)}
.cpr-w strong{grid-area:name;font-size:26px;letter-spacing:-.03em;line-height:1.1;padding-bottom:4px}
.cpr-w__lead{grid-area:lead;font-size:17px;line-height:1.45;color:var(--cpr-on2)}
.cpr-w:has(input:checked) .cpr-w__card{background:var(--cpr-forest);border:2px solid var(--gft-ochre)}
.cpr-w:has(input:checked) .cpr-w__n{color:var(--cpr-ochre-l)}
.cpr-w:has(input:checked) .cpr-w__hang{background:var(--cpr-ochre-l)}
.cpr-w:has(input:focus-visible) .cpr-w__card{outline:3px solid var(--gft-ochre);outline-offset:4px}
.cpr-bal__out{top:20px;bottom:calc(-1 * var(--cpr-reach,0px) - 2px);width:3px;border-left-width:3px}
.cpr-bal__out--l{left:calc(var(--cpr-g) / 2 - 1.5px)}
.cpr-bal__out--r{right:calc(var(--cpr-g) / 2 - 1.5px)}
.cpr-bal__foot{position:relative}
.cpr-bal__rule{text-align:center;font:italic 26px/1.3 var(--gft-font-serif);color:var(--cpr-on);margin:2px auto 18px}
.cpr-bal__panes dl{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;border-top:1px solid #a8dcbf40;padding-top:14px}
.cpr-bal__panes dt{font:700 13px/1.5 var(--cpr-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cpr-sage-l);margin-bottom:4px}
.cpr-bal__panes dd{margin:0;font-size:19px;line-height:1.45}
/* alive: the beam idles in a 0.4 degree balance oscillation; strands drift */
:root[data-m-go] .cpr-bal__idle[data-m-on]{animation-name:cpr-idle;animation-duration:5s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
@keyframes cpr-idle{from{transform:rotate(-.4deg)}to{transform:rotate(.4deg)}}
/* entrance (shed): the frame opens like a loom shed while the beam draws from the fulcrum outwards; then the weights
   drop on their hangers and swing to rest */
:root[data-m-go] .cpr-bal:not([data-cpr-in]) .cpr-bal__strands--up{transform:translateY(40px)}
:root[data-m-go] .cpr-bal:not([data-cpr-in]) .cpr-bal__strands--down{transform:translateY(-40px)}
:root[data-m-go] .cpr-bal:not([data-cpr-in]) .cpr-bal__beam{clip-path:inset(0 50% 0 50%)}
:root[data-m-go] .cpr-bal:not([data-cpr-in]) .cpr-w__drop{opacity:0}
:root[data-m-go] .cpr-bal:not([data-cpr-in]) :is(.cpr-bal__rule,.cpr-bal__panes){opacity:0}
:root[data-m-go] .cpr-bal[data-cpr-in] .cpr-bal__strands--up{animation-name:cpr-shed-up;animation-duration:420ms;animation-timing-function:var(--gft-ease-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .cpr-bal[data-cpr-in] .cpr-bal__strands--down{animation-name:cpr-shed-down;animation-duration:420ms;animation-timing-function:var(--gft-ease-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes cpr-shed-up{from{transform:translateY(40px)}to{transform:none}}
@keyframes cpr-shed-down{from{transform:translateY(-40px)}to{transform:none}}
:root[data-m-go] .cpr-bal[data-cpr-in] .cpr-bal__beam{animation-name:cpr-from-mid;animation-duration:420ms;animation-timing-function:var(--gft-ease-in-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes cpr-from-mid{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
:root[data-m-go] .cpr-bal[data-cpr-in] .cpr-w__drop{animation-name:cpr-hang;animation-duration:560ms;animation-timing-function:linear;animation-delay:calc(300ms + var(--cpr-i) * 0ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes cpr-hang{0%{opacity:0;transform:translateY(-60px) rotate(0);animation-timing-function:cubic-bezier(.4,0,1,1)}40%{opacity:1;transform:translateY(0) rotate(5deg);animation-timing-function:ease-out}70%{transform:rotate(-2.5deg)}100%{opacity:1;transform:none}}
:root[data-m-go] .cpr-bal[data-cpr-in] :is(.cpr-bal__rule,.cpr-bal__panes){animation-name:cpr-up;animation-duration:460ms;animation-timing-function:var(--gft-ease-out);animation-delay:380ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
/* hand-over: the beam lowers into the link, the weights fold up out of frame */
@supports (animation-timeline:view()){
  :root[data-m-go] .cpr-bal__hand{animation-name:cpr-lower;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--cpr-bal;animation-range-start:exit 35%;animation-range-end:exit 95%}
  :root[data-m-go] .cpr-bal__fold{animation-name:cpr-fold-up;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--cpr-bal;animation-range-start:exit 45%;animation-range-end:exit 85%}
}
@keyframes cpr-lower{to{transform:translateY(120px)}}
@keyframes cpr-fold-up{to{transform:translateY(-40px);opacity:0}}

/* ================================================================ 6 the link */
.cpr-con{background-color:var(--cpr-forest);background-image:linear-gradient(90deg,#eef5f00c 1px,transparent 1px),linear-gradient(#eef5f008 1px,transparent 1px);background-size:180px 100%,100% 60px;color:var(--cpr-on);padding:42px 0 48px;view-timeline-name:--cpr-con;view-timeline-axis:block}
.cpr-con .cpr-eyebrow{color:var(--cpr-sage-l)}
.cpr-con .cpr-lede{color:var(--cpr-on2)}
.cpr-con .cpr-head{align-items:end}
.cpr-con .cpr-h{max-width:20ch}
.cpr-con__side{display:grid;gap:14px}
.cpr-con__ctl{max-width:none}
.cpr-con__ctl legend{color:var(--cpr-sage-l)}
.cpr-con__art{position:relative;container-type:inline-size;margin-top:6px}
.cpr-con__wide{display:block;width:100%;height:auto;overflow:visible}
.cpr-con__tall{display:none}
.cpr-con__in{top:calc(-1 * var(--cpr-reach,0px) - 2px);height:calc(var(--cpr-reach,0px) + 100cqw * 100 / 1440 + 3.5px);width:calc(100cqw * 50 / 1440 - var(--cpr-g) / 2 + 3px);border-bottom-width:3px}
.cpr-con__in--l{left:calc(var(--cpr-g) / 2 - 1.5px);border-left-width:3px;border-bottom-left-radius:16px}
.cpr-con__in--r{right:calc(var(--cpr-g) / 2 - 1.5px);border-right-width:3px;border-bottom-right-radius:16px}
.cpr-con__out{position:absolute;z-index:4;right:0;top:calc(100cqw * 100 / 1440);bottom:calc(-1 * var(--cpr-reach,0px) - 2px);width:60px;height:auto;pointer-events:none;overflow-anchor:none}
.cpr-strand{stroke-width:2.4;fill:none}
.cpr-strand--0{stroke:var(--cpr-cord)}.cpr-strand--1{stroke:#8e9ee6}.cpr-strand--2{stroke:#e0a548;stroke-dasharray:6 5}.cpr-strand--3{stroke:#dfe8e2}
.cpr-con__hex{stroke:var(--cpr-sage-l);stroke-width:3;fill:#072d2b}
.cpr-con__dot{fill:var(--gft-ochre)}
.cpr-con__lab{fill:var(--cpr-on);font:700 16px var(--cpr-mono);letter-spacing:.14em}
.cpr-con__say text{fill:var(--cpr-ochre-l);font:600 16px var(--cpr-mono);letter-spacing:.1em;opacity:0;transition:opacity .3s}
.cpr-con__say text[data-on]{opacity:1}
.cpr-con__cord{stroke:var(--cpr-cord);stroke-width:4;stroke-linecap:round;transition:stroke .3s}
.cpr-con__cord--dash{stroke-dasharray:10 9}
.cpr-con__cord--weak{stroke-opacity:.7;stroke-dasharray:4 7}
.cpr-con__coil{stroke:var(--cpr-ochre-l);stroke-width:3;stroke-linecap:round}
.cpr-con__queue rect{fill:#0a3d3a;stroke:var(--cpr-ochre-l);stroke-width:2.5;transition:stroke .3s}
.cpr-con__queue--full rect{fill:#c98a2b55}
.cpr-con__packets circle{fill:var(--cpr-ochre-l);transition:fill .3s}
.cpr-con__fray{transform-box:fill-box;transform-origin:center}
.cpr-con__fray path{stroke:var(--cpr-ochre-l);stroke-width:3;stroke-linecap:round}
.cpr-con__resync{stroke:var(--cpr-sage-l);stroke-width:2;stroke-dasharray:3 7}
.cpr-con__st{opacity:0;transition:opacity .25s}
.cpr-con__st[data-on]{opacity:1;transition:opacity .45s .12s}
.cpr-con[data-seg="0"] .cpr-con__hex.cpr-seg-0,.cpr-con[data-seg="2"] .cpr-con__hex.cpr-seg-2{stroke:var(--cpr-ochre-l);stroke-width:6}
.cpr-con[data-seg="1"] .cpr-con__cord{stroke:var(--cpr-ochre-l)}
.cpr-con[data-seg="3"] :is(.cpr-con__packets circle){fill:#fff}
.cpr-con[data-seg="3"] .cpr-con__queue rect{stroke:#fff}
.cpr-con__read{margin-top:4px;font-size:22px;line-height:1.35;font-weight:650;letter-spacing:-.01em;color:var(--cpr-on);max-width:none}
.cpr-con__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:14px}
.cpr-con__col{display:grid;align-content:start;gap:6px;text-align:left;padding:12px 14px 14px;border:0;border-top:3px solid #a8dcbf66;background:#072d2b66;color:var(--cpr-on);min-height:44px;cursor:pointer;transition:background-color .3s,border-color .3s}
.cpr-con__col[aria-pressed=true],.cpr-con__col:hover{background:#072d2bcc;border-top-color:var(--gft-ochre)}
.cpr-con__col:focus-visible{outline:3px solid var(--gft-ochre);outline-offset:3px}
.cpr-con__ico svg{width:96px;height:42px}
.cpr-con__ico path,.cpr-con__ico circle{stroke:var(--cpr-sage-l);stroke-width:3;fill:none}
.cpr-con__ico .is-ochre{stroke:var(--gft-ochre)}
.cpr-con__ico .is-fill{fill:var(--gft-ochre);stroke:none}
.cpr-con__col b{font-size:19px;font-weight:800;letter-spacing:-.02em}
.cpr-con__txt{font-size:19px;line-height:1.4;color:var(--cpr-on2)}
:root[data-m-go] .cpr-con__packets[data-m-on] circle{animation-name:cpr-packet;animation-duration:3.4s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal}
.cpr-con__packets circle:nth-child(2){animation-delay:-1.1s}.cpr-con__packets circle:nth-child(3){animation-delay:-2.2s}
@keyframes cpr-packet{0%{transform:translateX(-200px);opacity:0}15%,85%{opacity:1}100%{transform:translateX(200px);opacity:0}}
:root[data-m-go] .cpr-con__queue[data-m-on] rect:last-child{animation-name:cpr-gain;animation-duration:2s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
@keyframes cpr-gain{from{opacity:.15}to{opacity:1}}
:root[data-m-go] .cpr-con__fray[data-m-on]{animation-name:cpr-twitch;animation-duration:.9s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
@keyframes cpr-twitch{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
/* entrance (heddle): the four columns lift alternately like heddles; anchors and cord stay, only the packets and the
   coil animate in */
:root[data-m-go] .cpr-con:not([data-cpr-in]) .cpr-con__col{opacity:.25;transform:translateY(18px)}
:root[data-m-go] .cpr-con:not([data-cpr-in]) .cpr-con__col:nth-child(even){transform:translateY(-18px)}
:root[data-m-go] .cpr-con:not([data-cpr-in]) :is(.cpr-con__packets,.cpr-con__queue){opacity:0}
:root[data-m-go] .cpr-con:not([data-cpr-in]) .cpr-con__coil{clip-path:inset(0 100% 0 0)}
:root[data-m-go] .cpr-con[data-cpr-in] .cpr-con__col{animation-name:cpr-heddle-a;animation-duration:420ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(var(--cpr-i) * 40ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .cpr-con[data-cpr-in] .cpr-con__col:nth-child(even){animation-name:cpr-heddle-b}
@keyframes cpr-heddle-a{from{opacity:.25;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes cpr-heddle-b{from{opacity:.25;transform:translateY(-18px)}to{opacity:1;transform:none}}
:root[data-m-go] .cpr-con[data-cpr-in] :is(.cpr-con__packets,.cpr-con__queue){animation-name:cpr-fade;animation-duration:500ms;animation-timing-function:linear;animation-delay:300ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .cpr-con[data-cpr-in] .cpr-con__coil{animation-name:cpr-wipe-r;animation-duration:560ms;animation-timing-function:var(--gft-ease-out);animation-delay:260ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .cpr-con[data-cpr-in] .cpr-con__wide .cpr-con__ends{animation-name:cpr-anchor;animation-duration:600ms;animation-timing-function:var(--gft-ease-out);animation-delay:250ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes cpr-anchor{from{opacity:.55}to{opacity:1}}
/* hand-over: the four strands spread as they leave the REVIEW anchor */
@supports (animation-timeline:view()){
  :root[data-m-go] .cpr-con__out{animation-name:cpr-unply;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--cpr-con;animation-range-start:exit 30%;animation-range-end:exit 90%;transform-origin:100% 0}
}
@keyframes cpr-unply{from{transform:scaleX(.4)}to{transform:none}}

/* ================================================================ 7 four strands */
.cpr-claim{--cpr-sy:28px;background-color:var(--cpr-ink-deep);background-image:linear-gradient(90deg,#2c3e7a55 1px,transparent 1px),linear-gradient(#2c3e7a55 1px,transparent 1px),linear-gradient(90deg,#2c3e7a22 2px,transparent 2px);background-size:44px 44px,44px 44px,11px 100%;color:var(--cpr-on);padding:42px 0 34px;view-timeline-name:--cpr-claim;view-timeline-axis:block}
.cpr-claim .cpr-eyebrow{color:var(--cpr-sage-l)}
.cpr-claim .cpr-lede{color:var(--cpr-on2)}
.cpr-claim .cpr-h{max-width:25ch}
.cpr-claim__sentence{position:relative;margin:16px auto 0;max-width:min(1060px,74%);text-align:center;font-size:clamp(2rem,3.8vw,3.5rem);line-height:1.22;font-weight:820;letter-spacing:-.04em;padding-block:34px 28px;color:var(--cpr-on)}
.cpr-sw{display:inline-block}
.cpr-claim__subj{position:relative;display:inline;color:#fff;background:linear-gradient(transparent 82%,#6bb68f55 82%)}
.cpr-claim__sheen{position:absolute;inset:-4px -6px;pointer-events:none;background:linear-gradient(100deg,#ffffff00 30%,#ffffff26 50%,#ffffff00 70%);background-size:220% 100%;opacity:0;overflow-anchor:none}
.cpr-claim__chips{position:absolute;left:0;bottom:calc(100% + 2px);display:flex;gap:8px;white-space:nowrap}
.cpr-claim__chips i{font:600 13px/1 var(--cpr-mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;padding:6px 8px;background:var(--cpr-sage-l);color:var(--cpr-night)}
.cpr-claim__inputs{position:absolute;left:0;right:0;top:calc(100% + 4px);font:600 15px/1.3 var(--cpr-mono);letter-spacing:.02em;color:#b8c3f2;white-space:normal}
.cpr-claim__line{position:relative;display:inline-block}
/* the four parts of the sentence are buttons: the chosen one carries an ochre rule under it */
.cpr-part{position:relative;display:inline-block;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;letter-spacing:inherit;line-height:inherit;text-align:inherit;cursor:pointer}
.cpr-part::after{content:"";position:absolute;left:0;right:0;bottom:-.08em;height:4px;background:var(--cpr-ochre-l);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--gft-ease-out)}
.cpr-part[aria-pressed=true]::after{transform:none}
.cpr-part:focus-visible{outline:3px solid var(--gft-ochre);outline-offset:4px}
.cpr-claim__bar{position:absolute;inset:.12em -.08em .08em;background:#020f12;border:1px solid #dfe8e255;clip-path:inset(0 100% 0 0);transition:clip-path .3s var(--gft-ease-out)}
.cpr-claim[data-s="3"] .cpr-claim__bar{clip-path:inset(0 0 0 0);transition:clip-path .6s var(--gft-ease-out) .1s}
.cpr-claim__tag{position:absolute;left:50%;bottom:calc(100% + 2px);transform:translateX(-50%);font:700 13px/1 var(--cpr-mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 8px;background:#dfe8e2;color:var(--cpr-night);white-space:nowrap}
.cpr-claim__basis{display:inline-block;vertical-align:middle;margin-left:10px;font:600 13px/1 var(--cpr-mono);letter-spacing:.06em;text-transform:uppercase;padding:7px 9px;border:2px dashed #e0a548;color:#f3c77e}
:is(.cpr-claim__chips,.cpr-claim__inputs,.cpr-claim__tag,.cpr-claim__basis){opacity:0;transition:opacity .3s}
.cpr-claim[data-s="0"] .cpr-claim__chips,.cpr-claim[data-s="1"] .cpr-claim__inputs,.cpr-claim[data-s="2"] .cpr-claim__basis,.cpr-claim[data-s="3"] .cpr-claim__tag{opacity:1;transition:opacity .45s .12s}
.cpr-claim[data-s="0"] .cpr-claim__subj{background:linear-gradient(transparent 82%,#6bb68faa 82%)}
.cpr-claim[data-s="1"] .cpr-claim__subj{background:linear-gradient(transparent 82%,#8e9ee6aa 82%)}
.cpr-claim[data-s="2"] .cpr-claim__subj{background:linear-gradient(transparent 82%,#e0a548aa 82%)}
.cpr-claim[data-s="3"] .cpr-claim__subj{background:none}
.cpr-claim__band{--cpr-bh:140px;position:relative;height:var(--cpr-bh);margin-top:-12px}
.cpr-claim__strands{position:absolute;inset:0;width:100%;height:140px;overflow:visible}
.cpr-claim__in{position:absolute;z-index:4;right:0;top:calc(-1 * var(--cpr-reach,0px) - 2px);height:calc(var(--cpr-reach,0px) + 36px);width:60px;pointer-events:none;overflow-anchor:none}
.cpr-claim__out{position:absolute;z-index:4;right:0;top:24px;bottom:calc(-1 * var(--cpr-reach,0px) - 2px);width:60px;height:auto;pointer-events:none;overflow-anchor:none}
.cpr-sd{transition:translate .6s var(--gft-ease-out),opacity .4s;opacity:.5}
.cpr-sd__spin{transform-box:view-box;transform-origin:0 50%}
.cpr-sd__base{stroke-width:2.5;fill:none}
.cpr-sd__flow{stroke-width:2.5;fill:none;stroke:#fff;stroke-opacity:0;stroke-dasharray:14 22}
.cpr-sd--0 .cpr-sd__base{stroke:var(--cpr-cord)}
.cpr-sd--1 .cpr-sd__base{stroke:#8e9ee6}
.cpr-sd--2 .cpr-sd__base{stroke:#e0a548;stroke-dasharray:9 7}
.cpr-sd--3 .cpr-sd__base{stroke:#dfe8e2}
/* the confidential strand runs behind a labelled night bar; a pale sweep crosses the bar while it is on screen */
.cpr-claim__veil{position:absolute;z-index:2;left:41.6%;top:calc(var(--cpr-bh) * .814 - 14px);height:28px;display:flex;align-items:center;padding:0 14px;background:#020f12;border:1px solid #dfe8e266;overflow:hidden;transition:translate .6s var(--gft-ease-out),border-color .4s}
.cpr-claim[data-s="3"] .cpr-claim__veil{translate:0 calc(var(--cpr-bh) * -.6);border-color:#dfe8e2}
.cpr-claim__veil-sweep{position:absolute;inset:0;background:linear-gradient(90deg,#dfe8e200 0%,#dfe8e230 50%,#dfe8e200 100%);transform:translateX(-100%);pointer-events:none}
.cpr-claim__veil-t{position:relative;font:700 13px/1 var(--cpr-mono);letter-spacing:.08em;text-transform:uppercase;color:#dfe8e2;white-space:nowrap}
:root[data-m-go] .cpr-claim__veil-sweep[data-m-on]{animation-name:cpr-veil;animation-duration:3.6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:normal}
@keyframes cpr-veil{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
.cpr-claim[data-s="0"] .cpr-sd--0,.cpr-claim[data-s="1"] .cpr-sd--1,.cpr-claim[data-s="2"] .cpr-sd--2,.cpr-claim[data-s="3"] .cpr-sd--3{opacity:1}
.cpr-claim[data-s="0"] .cpr-sd--0 .cpr-sd__base,.cpr-claim[data-s="1"] .cpr-sd--1 .cpr-sd__base,.cpr-claim[data-s="2"] .cpr-sd--2 .cpr-sd__base,.cpr-claim[data-s="3"] .cpr-sd--3 .cpr-sd__base{stroke-width:6}
.cpr-claim[data-s="0"] .cpr-sd--0 .cpr-sd__flow,.cpr-claim[data-s="1"] .cpr-sd--1 .cpr-sd__flow,.cpr-claim[data-s="2"] .cpr-sd--2 .cpr-sd__flow,.cpr-claim[data-s="3"] .cpr-sd--3 .cpr-sd__flow{stroke-opacity:.55}
/* the chosen strand rises to the front slot; the others keep their order below it */
.cpr-claim[data-s="1"] .cpr-sd--0{translate:0 28px}.cpr-claim[data-s="1"] .cpr-sd--1{translate:0 -28px}
.cpr-claim[data-s="2"] .cpr-sd--0,.cpr-claim[data-s="2"] .cpr-sd--1{translate:0 28px}.cpr-claim[data-s="2"] .cpr-sd--2{translate:0 -56px}
.cpr-claim[data-s="3"] :is(.cpr-sd--0,.cpr-sd--1,.cpr-sd--2){translate:0 28px}.cpr-claim[data-s="3"] .cpr-sd--3{translate:0 -84px}
.cpr-claim__body{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);column-gap:3%;row-gap:12px;margin-top:4px;align-items:stretch}
.cpr-chips{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;border:0;min-width:0}
.cpr-chips legend{grid-column:1/-1;padding:0;margin-bottom:10px;font:700 13px/1.5 var(--cpr-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cpr-sage-l)}
.cpr-chip{position:relative;min-width:0}
.cpr-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cpr-chip span{display:grid;align-content:start;gap:5px;min-height:48px;height:100%;padding:11px 16px;border:1px solid #a8dcbf55;border-left:5px solid var(--c);background:#072d2bcc;transition:background-color .3s}
.cpr-chip--0{--c:var(--cpr-cord)}.cpr-chip--1{--c:#8e9ee6}.cpr-chip--2{--c:#e0a548}.cpr-chip--3{--c:#dfe8e2}
.cpr-chip i{font:700 13px/1.3 var(--cpr-mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--cpr-sage-l)}
.cpr-chip b{font-size:19px;line-height:1.3;font-weight:700}
.cpr-chip:has(input:checked) span{background:var(--cpr-forest);border-color:var(--c);border-width:2px 2px 2px 5px}
.cpr-chip:has(input:focus-visible) span{outline:3px solid var(--gft-ochre);outline-offset:3px}
.cpr-claim__card{padding:14px 20px 12px;background:#0a3542;border-left:4px solid var(--gft-ochre);min-width:0}
.cpr-claim__panes .cpr-pane{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:6px;align-items:center;justify-items:start}
.cpr-claim__panes .cpr-pane>p{grid-column:1/-1}
.cpr-claim__badge{font:700 13px/1 var(--cpr-mono);letter-spacing:.08em;text-transform:uppercase;padding:7px 9px;background:var(--cpr-sage-l);color:var(--cpr-night)}
.cpr-claim__badge--1{background:#b8c3f2}.cpr-claim__badge--2{background:var(--cpr-ochre-l)}.cpr-claim__badge--3{background:#dfe8e2}
.cpr-claim__card .cpr-fold{margin-top:8px}
.cpr-claim__card h3{font-size:26px;line-height:1.15;letter-spacing:-.03em}
.cpr-claim__rule{font-size:19px;line-height:1.4;font-weight:650;color:var(--cpr-on)}
.cpr-claim__card p:not(.cpr-claim__rule):not(.cpr-fold){font-size:17px;line-height:1.5;color:var(--cpr-on2)}
/* the part read-out: one pane per part of the sentence, and four part buttons */
.cpr-claim__parts{display:grid;grid-template-rows:auto 1fr auto;gap:12px;padding:16px 20px;border:1px solid #a8dcbf55;border-left:4px solid var(--cpr-ochre-l);background:#072d2bcc;min-width:0}
.cpr-claim__pk{font:700 13px/1.5 var(--cpr-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cpr-sage-l)}
.cpr-claim__pread{display:grid;align-content:start}
.cpr-claim__pread .cpr-pane{display:grid;gap:8px;justify-items:start}
.cpr-claim__pn{font:700 15px/1.3 var(--cpr-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cpr-ochre-l)}
.cpr-claim__pread p{font-size:19px;line-height:1.45;color:var(--cpr-on)}
.cpr-claim__pticks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.cpr-ptick{min-height:44px;padding:6px 8px;font:700 13px/1.2 var(--cpr-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cpr-on);background:transparent;border:1px solid #eef5f066;cursor:pointer;transition:background-color .3s,color .3s}
.cpr-ptick[aria-pressed=true]{background:var(--cpr-ochre-l);border-color:var(--cpr-ochre-l);color:var(--cpr-night)}
.cpr-ptick:focus-visible{outline:3px solid var(--gft-ochre);outline-offset:2px}
/* alive: the sheen sweeps the subject; the chosen strand carries a slow dash flow; the others drift */
:root[data-m-go] .cpr-claim__sheen[data-m-on]{animation-name:cpr-sheen;animation-duration:4.8s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:normal}
@keyframes cpr-sheen{0%,100%{opacity:0;transform:translateX(-30%)}20%{opacity:1}60%{opacity:0;transform:translateX(30%)}}
:root[data-m-go] .cpr-claim__band[data-m-on] .cpr-sd__flow{animation-name:cpr-dash;animation-duration:2.4s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal}
@keyframes cpr-dash{from{transform:translateX(0)}to{transform:translateX(36px)}}
:root[data-m-go] .cpr-claim__band[data-m-on] .cpr-sd{animation-name:cpr-drift3;animation-duration:6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
.cpr-sd--1{animation-delay:-1.5s}.cpr-sd--2{animation-delay:-3s}.cpr-sd--3{animation-delay:-4.5s}
@keyframes cpr-drift3{from{transform:translateY(-3px)}to{transform:translateY(3px)}}
/* entrance (spin): the four strands spin out of one ply from the left, then the sentence words rise and the card
   wipes in from the strand side */
:root[data-m-go] .cpr-claim:not([data-cpr-in]) .cpr-sd__spin{opacity:.3;transform:scaleX(.18) translateY(calc((1.5 - var(--j)) * 28px))}
:root[data-m-go] .cpr-claim:not([data-cpr-in]) .cpr-claim__sentence .cpr-sw{opacity:0;transform:translateY(.5em)}
:root[data-m-go] .cpr-claim:not([data-cpr-in]) .cpr-claim__card{clip-path:inset(0 0 100% 0)}
:root[data-m-go] .cpr-claim:not([data-cpr-in]) .cpr-chip{opacity:0}
:root[data-m-go] .cpr-claim:not([data-cpr-in]) .cpr-claim__veil{clip-path:inset(0 100% 0 0)}
:root[data-m-go] .cpr-claim:not([data-cpr-in]) .cpr-claim__chips{opacity:0}
:root[data-m-go] .cpr-claim:not([data-cpr-in]) .cpr-part::after{opacity:0}
:root[data-m-go] .cpr-claim[data-cpr-in]:not([data-cpr-touched]) .cpr-part[aria-pressed=true]::after{animation-name:cpr-grow-x;animation-duration:520ms;animation-timing-function:var(--gft-ease-out);animation-delay:620ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes cpr-grow-x{from{transform:scaleX(0)}to{transform:none}}
:root[data-m-go] .cpr-claim:not([data-cpr-in]) .cpr-claim__parts{clip-path:inset(0 0 100% 0)}
:root[data-m-go] .cpr-claim[data-cpr-in] .cpr-claim__veil{animation-name:cpr-wipe-r;animation-duration:560ms;animation-timing-function:var(--gft-ease-out);animation-delay:240ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .cpr-claim[data-cpr-in] .cpr-claim__parts{animation-name:cpr-wipe-d;animation-duration:520ms;animation-timing-function:var(--gft-ease-out);animation-delay:400ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .cpr-claim[data-cpr-in] .cpr-sd__spin{animation-name:cpr-spin-out;animation-duration:480ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(var(--j) * 50ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes cpr-spin-out{from{opacity:.3;transform:scaleX(.18) translateY(calc((1.5 - var(--j)) * 28px))}to{opacity:1;transform:none}}
:root[data-m-go] .cpr-claim[data-cpr-in] .cpr-claim__sentence .cpr-sw{animation-name:cpr-rise-w;animation-duration:460ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(300ms + var(--w) * 30ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes cpr-rise-w{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:none}}
:root[data-m-go] .cpr-claim[data-cpr-in] .cpr-claim__card{animation-name:cpr-wipe-d;animation-duration:520ms;animation-timing-function:var(--gft-ease-out);animation-delay:330ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .cpr-claim[data-cpr-in] .cpr-chip{animation-name:cpr-up;animation-duration:420ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(360ms + var(--cpr-i) * 50ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
/* hand-over: the four strands converge as they leave toward the dial */
@supports (animation-timeline:view()){
  :root[data-m-go] .cpr-claim__out{animation-name:cpr-reply;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--cpr-claim;animation-range-start:exit 30%;animation-range-end:exit 90%;transform-origin:100% 100%}
}
@keyframes cpr-reply{from{transform:scaleX(1.6)}to{transform:scaleX(.5)}}

/* ================================================================ 8 the gate */
.cpr-gate{background:var(--cpr-night);color:var(--cpr-on);padding:42px 0 50px;view-timeline-name:--cpr-gate;view-timeline-axis:block}
.cpr-gate .cpr-eyebrow{color:var(--cpr-sage-l)}
.cpr-gate .cpr-lede{color:var(--cpr-on2)}
.cpr-gate__rings{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cpr-gate__rings circle{stroke:#a8dcbf1c;stroke-width:1.2;vector-effect:non-scaling-stroke}
.cpr-gate__body{position:relative;display:grid;grid-template-columns:56% minmax(0,1fr);column-gap:5%;margin-top:40px;align-items:start;container-type:inline-size}
.cpr-gate__in{right:calc(var(--cpr-g) / -2 - 1.5px);top:calc(-1 * var(--cpr-reach,0px) - 2px);height:calc(var(--cpr-reach,0px) - 19px);width:3px;border-right-width:3px}
.cpr-gate__run{top:-22px;left:35%;right:calc(var(--cpr-g) / -2 - 1.5px);height:calc(22px + 6.6cqw);border-width:3px 0 0 3px;border-top-left-radius:18px}
.cpr-gate__dial{position:relative;margin:0}
.cpr-gate__dial svg{display:block;width:100%;height:auto;overflow:visible}
.cpr-gate__out{left:calc(var(--cpr-g) / -2 - 1.5px);top:calc(86% - 1.5px);width:calc(var(--cpr-g) / 2 + 13.75% + 1.5px);bottom:calc(-1 * var(--cpr-reach,0px) - 2px);border-width:3px 0 0 3px;border-top-left-radius:18px}
.cpr-gate__zone{stroke-width:40;stroke-opacity:.92;transform-box:view-box;transform-origin:320px 320px}
.cpr-gate__zone--stop{stroke:#c98a2b}.cpr-gate__zone--adapt{stroke:#8e9ee6}.cpr-gate__zone--scale{stroke:var(--cpr-cord)}
.cpr-gate__inner{stroke:#a8dcbf40;stroke-width:1.5;stroke-dasharray:3 6}
.cpr-gate__tick{stroke:var(--cpr-on);stroke-width:2}
.cpr-gate__zlab{fill:var(--cpr-on);font:700 15px var(--cpr-mono);letter-spacing:.12em}
.cpr-gate__val{fill:var(--cpr-sage-l);font:600 13px var(--cpr-mono);letter-spacing:.1em}
.cpr-gate__needle{transform-box:view-box;transform-origin:320px 320px;rotate:var(--cpr-ang);transition:rotate .75s cubic-bezier(.3,1.45,.5,1)}
.cpr-gate__swing{transform-box:view-box;transform-origin:320px 320px}
.cpr-gate__cord{stroke:var(--cpr-cord);stroke-width:7;stroke-linecap:round}
.cpr-gate__core{stroke:var(--gft-ochre);stroke-width:2;stroke-linecap:round}
.cpr-gate__tip{transform-box:view-box;transform-origin:320px 140px}
.cpr-gate__kn{opacity:0;transition:opacity .25s}
.cpr-gate__kn[data-on]{opacity:1;transition:opacity .4s .1s}
.cpr-gate__kn path{stroke:var(--cpr-cord);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.cpr-gate__kn circle{fill:var(--gft-ochre)}
.cpr-gate__kn--slip path,.cpr-gate__kn--part path{stroke:var(--cpr-ochre-l)}
.cpr-gate__hub{fill:var(--cpr-night);stroke:var(--gft-ochre);stroke-width:5}
.cpr-gate__hubp{fill:none;stroke:var(--cpr-ochre-l);stroke-width:2;transform-box:fill-box;transform-origin:center}
.cpr-gate__side{display:grid;gap:16px;min-width:0}
.cpr-gate__read{display:grid;gap:2px;font:700 28px/1.2 var(--cpr-mono);letter-spacing:.02em;color:var(--cpr-on)}
.cpr-gate__read span{font:600 19px/1.35 var(--gft-font-display);letter-spacing:0;color:var(--cpr-on2)}
.cpr-gate__ctl{display:grid;gap:10px}
.cpr-gate__field{display:grid;grid-template-columns:1fr auto;align-items:end;gap:0 16px}
.cpr-gate__name{font-size:19px;font-weight:700;align-self:center}
.cpr-gate__field output{font-size:56px;font-weight:850;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;color:var(--cpr-on)}
.cpr-gate__field input{grid-column:1/-1;-webkit-appearance:none;appearance:none;width:100%;height:48px;margin:0;background:transparent;cursor:pointer}
.cpr-gate__field input::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:#a8dcbf55}
.cpr-gate__field input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:var(--cpr-ochre-l);border:3px solid var(--cpr-night)}
.cpr-gate__field input::-moz-range-track{height:6px;border-radius:3px;background:#a8dcbf55}
.cpr-gate__field input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--cpr-ochre-l);border:3px solid var(--cpr-night)}
.cpr-gate__field[data-weak] input::-webkit-slider-runnable-track{background:#f0c47e;box-shadow:0 0 12px #f0c47e99}
.cpr-gate__field[data-weak] input::-moz-range-track{background:#f0c47e;box-shadow:0 0 12px #f0c47e99}
.cpr-gate__field[data-weak] .cpr-gate__name::after{content:' (weaker)';font-weight:500;color:var(--cpr-ochre-l)}
.cpr-gate__lamps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cpr-gate__lamp{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #a8dcbf40;font:700 15px/1 var(--cpr-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cpr-on2);transition:background-color .3s,color .3s}
.cpr-gate__lamp i{width:14px;height:14px;border-radius:50%;border:2px solid currentColor}
.cpr-gate__lamp[data-on]{background:var(--cpr-on);color:var(--cpr-night)}
.cpr-gate__lamp--scale[data-on] i{background:#2f7d5a;border-color:#2f7d5a}.cpr-gate__lamp--adapt[data-on] i{background:var(--gft-indigo);border-color:var(--gft-indigo)}.cpr-gate__lamp--stop[data-on] i{background:#a8641e;border-color:#a8641e}
.cpr-gate__outs p{font-size:17px;line-height:1.5;color:var(--cpr-on2)}
.cpr-gate__outs strong{color:var(--cpr-on)}
.cpr-gate .cpr-fold{margin-top:0}
:root[data-m-go] .cpr-gate__tip[data-m-on]{animation-name:cpr-quiver;animation-duration:1.4s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
.cpr-gate{--cpr-q:calc(min(var(--cpr-gap), 40) * .05deg)}
@keyframes cpr-quiver{from{transform:rotate(calc(-1 * var(--cpr-q)))}to{transform:rotate(var(--cpr-q))}}
/* entrance (beat-up): the zones beat in from the ends like a reed, then the needle swings from zero with one overshoot
   and the tip knot forms */
:root[data-m-go] .cpr-gate:not([data-cpr-in]) .cpr-gate__zone--stop{transform:rotate(-24deg);opacity:.3}
:root[data-m-go] .cpr-gate:not([data-cpr-in]) .cpr-gate__zone--scale{transform:rotate(24deg);opacity:.3}
:root[data-m-go] .cpr-gate:not([data-cpr-in]) .cpr-gate__zone--adapt{opacity:.3}
:root[data-m-go] .cpr-gate:not([data-cpr-in]) .cpr-gate__swing{transform:rotate(calc(-90deg - var(--cpr-ang)))}
:root[data-m-go] .cpr-gate:not([data-cpr-in]) :is(.cpr-gate__side){opacity:0}
:root[data-m-go] .cpr-gate[data-cpr-in] .cpr-gate__zone--stop{animation-name:cpr-beat-l;animation-duration:400ms;animation-timing-function:var(--gft-ease-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .cpr-gate[data-cpr-in] .cpr-gate__zone--scale{animation-name:cpr-beat-r;animation-duration:400ms;animation-timing-function:var(--gft-ease-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .cpr-gate[data-cpr-in] .cpr-gate__zone--adapt{animation-name:cpr-beat-m;animation-duration:400ms;animation-timing-function:var(--gft-ease-out);animation-delay:80ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes cpr-beat-l{from{transform:rotate(-24deg);opacity:.3}to{transform:none;opacity:1}}
@keyframes cpr-beat-r{from{transform:rotate(24deg);opacity:.3}to{transform:none;opacity:1}}
@keyframes cpr-beat-m{from{opacity:.3}to{opacity:1}}
:root[data-m-go] .cpr-gate[data-cpr-in] .cpr-gate__swing{animation-name:cpr-swing;animation-duration:560ms;animation-timing-function:linear;animation-delay:300ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes cpr-swing{0%{transform:rotate(calc(-90deg - var(--cpr-ang)));animation-timing-function:cubic-bezier(.3,0,.4,1)}70%{transform:rotate(9deg);animation-timing-function:ease-in-out}100%{transform:none}}
:root[data-m-go] .cpr-gate[data-cpr-in] .cpr-gate__side{animation-name:cpr-up;animation-duration:460ms;animation-timing-function:var(--gft-ease-out);animation-delay:260ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
/* hand-over: the tested cord leaves the dial for the method sheet */
@supports (animation-timeline:view()){
  :root[data-m-go] .cpr-gate__out{animation-name:cpr-cord-go;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--cpr-gate;animation-range-start:exit 30%;animation-range-end:exit 80%}
}
@keyframes cpr-cord-go{from{opacity:.35}to{opacity:1}}

/* ================================================================ 9 the method sheet and the register */
.cpr-bound{background-color:var(--cpr-forest);background-image:linear-gradient(#eef5f00d 1px,transparent 1px),linear-gradient(90deg,transparent calc(var(--cpr-g) - 1px),#c98a2b33 calc(var(--cpr-g) - 1px),#c98a2b33 var(--cpr-g),transparent var(--cpr-g));background-size:100% 34px,100% 100%;color:var(--cpr-on);padding:38px 0 104px;view-timeline-name:--cpr-bound;view-timeline-axis:block}
.cpr-bound .cpr-eyebrow{color:var(--cpr-sage-l)}
.cpr-bound .cpr-h{max-width:24ch}
.cpr-bound__body{display:grid;grid-template-columns:56% minmax(0,1fr);column-gap:4%;margin-top:26px;align-items:start}
.cpr-bound__sheet{position:relative;z-index:2;padding:18px 26px 0;background:var(--gft-paper);color:var(--cpr-ink);min-width:0}
.cpr-sel{position:absolute;background:var(--gft-ochre);pointer-events:none}
.cpr-sel--t{left:0;right:0;top:0;height:3px;transform-origin:0 50%}.cpr-sel--b{left:0;right:0;bottom:0;height:3px;transform-origin:100% 50%}
.cpr-sel--l{left:0;top:0;bottom:0;width:3px;transform-origin:50% 100%}.cpr-sel--r{right:0;top:0;bottom:0;width:3px;transform-origin:50% 0}
.cpr-bound__in{left:calc(var(--cpr-g) / -2 - 1.5px);top:calc(-1 * var(--cpr-reach,0px) - 2px);height:calc(var(--cpr-reach,0px) + 34px);width:calc(var(--cpr-g) / 2 + 18px);border-width:0 0 3px 3px;border-bottom-left-radius:16px}
.cpr-bound__scan{position:absolute;left:3px;right:3px;top:0;height:2px;background:linear-gradient(90deg,#c98a2b00,#c98a2b,#c98a2b00);opacity:0;pointer-events:none;overflow-anchor:none}
.cpr-bound__title{font:700 13px/1.5 var(--cpr-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cpr-ink2);margin-bottom:6px}
.cpr-bound__rows{list-style:none;margin:0;padding:0}
.cpr-bound__rows li{display:grid;grid-template-columns:minmax(150px,.42fr) minmax(0,1fr);gap:16px;align-items:center;min-height:42px;padding:5px 0;border-bottom:3px solid var(--cpr-cord-ink)}
.cpr-bound__k{font:700 13px/1.4 var(--cpr-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cpr-ink2)}
.cpr-bound__v{position:relative;font-size:19px;line-height:1.35;font-weight:600}
.cpr-bar{display:block;position:absolute;left:0;top:-4px;bottom:-14px;width:var(--w);max-width:100%;background:var(--cpr-night);transform-origin:0 50%}
.cpr-bound__v .cpr-pane[data-k="0"]{min-height:26px}
.cpr-bound__foot{margin-top:8px;font-size:17px;line-height:1.45;font-style:italic;color:var(--cpr-ink2)}
.cpr-bound__reglab{margin-top:8px;font-size:15px;line-height:1.45;color:var(--cpr-ink2)}
.cpr-bound__reg{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.cpr-bound__reg li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 12px;border:1px solid #0e4d4a33;border-left:4px solid #0e4d4a33;transition:background-color .3s,border-color .3s}
.cpr-bound__reg b{font-size:18px;letter-spacing:-.02em}
.cpr-stamp{flex-shrink:0;font:700 13px/1.2 var(--cpr-mono);letter-spacing:.04em;text-transform:uppercase;padding:5px 7px;border:2px solid #8a5a14;color:#7a4e10;rotate:-1.5deg}
.cpr-bound__reg li[data-on]{background:#c98a2b1f;border-left-color:var(--gft-ochre)}
.cpr-filter{position:relative;margin:12px -26px 0;padding:12px 26px 16px;border:0;min-width:0;background:var(--cpr-mist)}
.cpr-filter legend{display:block;width:100%;padding:0;margin-bottom:8px;font:700 13px/1.5 var(--cpr-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cpr-ink2)}
.cpr-filter__cord{position:absolute;left:-26px;right:-26px;top:calc(50% - 1.5px);height:3px;background:linear-gradient(var(--cpr-cord-ink),var(--cpr-cord-ink)) 0 0/100% 1px no-repeat,linear-gradient(var(--gft-ochre),var(--gft-ochre)) 0 1px/100% 1px no-repeat,linear-gradient(var(--cpr-cord-ink),var(--cpr-cord-ink)) 0 2px/100% 1px no-repeat;pointer-events:none}
.cpr-bound__out{top:calc(100% - 42px);bottom:calc(-1 * var(--cpr-reach,0px) - 2px);width:calc(var(--cpr-g) / 2 + 1.5px);border-width:3px 0 0 0}
.cpr-bound__out--l{left:calc(var(--cpr-g) / -2 - 1.5px);border-left-width:3px;border-top-left-radius:16px}
.cpr-filter__row{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));overflow-anchor:none}
.cpr-filter__k{position:relative;display:grid;place-items:center;min-height:52px;cursor:pointer}
.cpr-filter__k input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.cpr-filter__k span{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:3px solid var(--cpr-cord-ink);background:var(--cpr-mist);transition:background-color .3s,transform .4s var(--gft-ease-out)}
.cpr-filter__k svg{position:absolute;inset:6px;width:32px;height:32px}
.cpr-filter__k path{stroke:var(--cpr-cord-ink);stroke-width:2.4;stroke-linecap:round}
.cpr-filter__k b{position:relative;font:800 15px/1 var(--cpr-mono);color:var(--cpr-ink)}
.cpr-filter__k:has(input:checked) span{background:var(--gft-ochre);border-color:#8a5a14;transform:scale(1.12)}
.cpr-filter__k:has(input:checked) b{color:var(--cpr-night)}
.cpr-filter__k:has(input:focus-visible) span{outline:3px solid var(--gft-forest);outline-offset:3px}
.cpr-bound__side{display:grid;gap:16px;min-width:0}
.cpr-bound .cpr-seg legend{color:var(--cpr-sage-l)}
.cpr-bound__lead{font-size:30px;line-height:1.15;font-weight:800;letter-spacing:-.035em}
.cpr-bound__text{font-size:17px;line-height:1.6;color:var(--cpr-on2)}
.cpr-bound__read{border-top:3px solid var(--gft-ochre);padding-top:12px;display:grid;gap:12px}
.cpr-bound__pl{font-size:22px;line-height:1.35;color:var(--cpr-on)}
.cpr-bound__ed{margin-top:6px;font-size:17px;line-height:1.45;color:var(--cpr-sage-l)}
.cpr-bound__fixed{font-size:17px;line-height:1.5;color:var(--cpr-on2)}
:root[data-m-go] .cpr-bound__scan[data-m-on]{animation-name:cpr-scan-y;animation-duration:7s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal}
@keyframes cpr-scan-y{0%{opacity:0;transform:translateY(0)}8%{opacity:.9}88%{opacity:.9}100%{opacity:0;transform:translateY(560px)}}
:root[data-m-go] .cpr-filter__k:has(input:checked) span{animation-name:cpr-knot-beat;animation-duration:1.8s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
@keyframes cpr-knot-beat{from{box-shadow:0 0 0 0 #c98a2b66}to{box-shadow:0 0 0 7px #c98a2b00}}
/* entrance (selvedge-draw): the border draws round four sides, then rows wipe in, bars slide over the protected rows,
   the register rows stamp and the cord runs across */
:root[data-m-go] .cpr-bound:not([data-cpr-in]) :is(.cpr-sel--t,.cpr-sel--b){transform:scaleX(0)}
:root[data-m-go] .cpr-bound:not([data-cpr-in]) :is(.cpr-sel--l,.cpr-sel--r){transform:scaleY(0)}
:root[data-m-go] .cpr-bound:not([data-cpr-in]) .cpr-bound__rows li{clip-path:inset(0 100% 0 0)}
:root[data-m-go] .cpr-bound:not([data-cpr-in]) .cpr-bar{transform:scaleX(0)}
:root[data-m-go] .cpr-bound:not([data-cpr-in]) :is(.cpr-bound__reg li,.cpr-bound__side,.cpr-filter__k){opacity:0}
:root[data-m-go] .cpr-bound[data-cpr-in] :is(.cpr-sel--t,.cpr-sel--b){animation-name:cpr-sx;animation-duration:300ms;animation-timing-function:var(--gft-ease-in-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .cpr-bound[data-cpr-in] :is(.cpr-sel--l,.cpr-sel--r){animation-name:cpr-sy;animation-duration:300ms;animation-timing-function:var(--gft-ease-in-out);animation-delay:150ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes cpr-sx{from{transform:scaleX(0)}to{transform:none}}
@keyframes cpr-sy{from{transform:scaleY(0)}to{transform:none}}
:root[data-m-go] .cpr-bound[data-cpr-in] .cpr-bound__rows li{animation-name:cpr-wipe-r;animation-duration:360ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(300ms + var(--cpr-i) * 45ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .cpr-bound[data-cpr-in] .cpr-bar{animation-name:cpr-sx;animation-duration:320ms;animation-timing-function:var(--gft-ease-out);animation-delay:560ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .cpr-bound[data-cpr-in] .cpr-bound__reg li{animation-name:cpr-stamp-in;animation-duration:300ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(480ms + var(--cpr-i) * 60ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes cpr-stamp-in{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
:root[data-m-go] .cpr-bound[data-cpr-in] .cpr-bound__side{animation-name:cpr-up;animation-duration:480ms;animation-timing-function:var(--gft-ease-out);animation-delay:260ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .cpr-bound[data-cpr-in] .cpr-filter__k{animation-name:cpr-pop;animation-duration:320ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(440ms + var(--cpr-i) * 40ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}

/* ================================================================ 10 the tally cord (closing) */
.cpr-close{--cpr-tc:62px;background:var(--cpr-night);color:var(--cpr-on);min-height:100svh;padding:0 0 56px;display:flex;flex-direction:column}
.cpr-close__lat{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.3;overflow-anchor:none}
.cpr-close__lat path{stroke:var(--cpr-cord);stroke-width:1.4;vector-effect:non-scaling-stroke}
.cpr-close__lat .is-weft{stroke:#9aa6ee;stroke-dasharray:3 9}
.cpr-close__tally{position:relative;height:126px;flex-shrink:0}
.cpr-close__cord{position:absolute;left:0;right:0;top:calc(var(--cpr-tc) - 2px);height:4px;background:linear-gradient(var(--cpr-cord),var(--cpr-cord)) 0 0/100% 1.5px no-repeat,linear-gradient(var(--gft-ochre),var(--gft-ochre)) 0 1.5px/100% 1px no-repeat,linear-gradient(var(--cpr-cord),var(--cpr-cord)) 0 2.5px/100% 1.5px no-repeat}
.cpr-close__in{top:calc(-1 * var(--cpr-reach,0px) - 2px);height:calc(var(--cpr-reach,0px) + var(--cpr-tc) + 1px);width:18px;border-bottom-width:3px}
.cpr-close__in--l{left:calc(var(--cpr-g) / 2 - 1.5px);border-left-width:3px;border-bottom-left-radius:14px}
.cpr-close__in--r{right:calc(var(--cpr-g) / 2 - 1.5px);border-right-width:3px;border-bottom-right-radius:14px}
.cpr-close__knots{position:relative;list-style:none;margin:0 auto;padding:0;width:var(--cpr-cw);height:100%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.cpr-close__knots li{position:relative;display:flex;justify-content:center}
.cpr-close__k{position:relative;display:grid;justify-items:center;align-content:start;width:72px;min-height:100%;padding-top:calc(var(--cpr-tc) - 22px);text-decoration:none;color:var(--cpr-on)}
.cpr-close__kb{display:block;width:44px;height:44px;border-radius:50%;background:var(--cpr-night)}
.cpr-close__kb svg{width:44px;height:44px}
.cpr-close__kb path{stroke:var(--cpr-sage-l);stroke-width:3;stroke-linecap:round}
.cpr-close__kb circle{fill:var(--gft-ochre)}
.cpr-close__k b{font:700 13px/1 var(--cpr-mono);letter-spacing:.1em;margin-top:6px;color:var(--cpr-sage-l)}
.cpr-close__k em{position:absolute;top:calc(var(--cpr-tc) + 40px);left:50%;transform:translateX(-50%);white-space:nowrap;font:600 13px/1 var(--cpr-mono);font-style:normal;letter-spacing:.04em;padding:6px 8px;background:var(--cpr-on);color:var(--cpr-night);opacity:0;pointer-events:none;transition:opacity .25s;z-index:5}
.cpr-close__k:is(:hover,:focus-visible) em{opacity:1}
.cpr-close__k:focus-visible{outline:3px solid var(--gft-ochre);outline-offset:2px}
.cpr-close__grid{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:40px;align-items:start}
.cpr-close__head{display:block;padding-top:18px;grid-column:1;grid-row:1}
.cpr-close__head .cpr-h{max-width:12ch}
.cpr-close .cpr-eyebrow{color:var(--cpr-sage-l)}
.cpr-close .cpr-lede{margin-top:16px;color:var(--cpr-on2)}
.cpr-close__pend{grid-column:2;grid-row:1/3;position:relative;align-self:stretch;margin:0;padding:0;border:0;min-width:0;min-height:600px}
.cpr-pd{--len:calc(var(--cpr-tc) + 200px + var(--k) * 92px);position:absolute;top:0;bottom:0;left:calc(40px + var(--k) * 24%);width:64px;margin-left:-32px;cursor:pointer}
.cpr-pd input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:2}
.cpr-pd__line{position:absolute;left:calc(50% - 1.5px);width:3px;top:calc(-1 * (126px - var(--cpr-tc)));bottom:calc(-1 * var(--cpr-reach,0px) - 2px);background:var(--cpr-cord);clip-path:inset(0 0 calc(100% - var(--len)) 0);transition:clip-path .8s var(--gft-ease-out);overflow:visible;overflow-anchor:none}
.cpr-pd__bead{position:absolute;left:-5px;top:0;width:13px;height:100%;background:radial-gradient(circle at 50% 7px,var(--cpr-ochre-l) 0 5px,transparent 6px) no-repeat;opacity:0;pointer-events:none}
.cpr-pd__end{position:absolute;left:32px;top:calc(var(--len) - (126px - var(--cpr-tc)) - 2px);display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:8px;row-gap:2px;align-items:start;width:190px;margin-left:-20px;text-align:left;transition:opacity .4s}
.cpr-pd__end svg{grid-row:1/3}
.cpr-pd__end em{grid-column:2;font-style:normal;font-size:15px;line-height:1.35;color:var(--cpr-on2)}
.cpr-pd__end svg{width:40px;height:40px}
.cpr-pd__end path{stroke:var(--cpr-cord);stroke-width:3;stroke-linecap:round}
.cpr-pd__end circle{fill:var(--gft-ochre)}
.cpr-pd__end b{grid-column:2;justify-self:start;font-size:17px;line-height:1.2;font-weight:750;padding:3px 6px;background:var(--cpr-night)}
.cpr-pd:has(input:checked){--len:100%}
.cpr-pd:has(input:checked) .cpr-pd__line{background:var(--cpr-ochre-l)}
.cpr-pd:has(input:checked) .cpr-pd__end{top:calc(var(--cpr-tc) + 120px)}
.cpr-pd:has(input:checked) .cpr-pd__end svg{opacity:0}
.cpr-pd:has(input:checked) .cpr-pd__end b{background:var(--cpr-on);color:var(--cpr-night)}
.cpr-pd:has(input:checked) .cpr-pd__bead{opacity:1}
.cpr-pd:has(input:focus-visible) .cpr-pd__end b{outline:3px solid var(--gft-ochre);outline-offset:3px}
.cpr-close__read{grid-column:1;grid-row:2;padding:24px 0 8px;align-self:end}
.cpr-close__read .cpr-pane{display:grid;justify-items:start;gap:12px;padding:22px 24px;background:#0a3d3ae6;border-left:3px solid var(--gft-ochre)}
.cpr-close__eyebrow{font:700 13px/1.4 var(--cpr-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cpr-sage-l)}
.cpr-close__name{font:italic 34px/1.15 var(--gft-font-serif);letter-spacing:-.02em}
.cpr-close__q{font-size:22px;line-height:1.3;color:var(--cpr-on2)}
.cpr-close__cta{min-height:48px}
:root[data-m-go] .cpr-pd__bead{animation-name:cpr-bead-y;animation-duration:4.2s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal}
:root[data-m-go] .cpr-pd__line:not([data-m-on]) .cpr-pd__bead{animation-play-state:paused}
@keyframes cpr-bead-y{from{transform:translateY(0)}to{transform:translateY(100%)}}
:root[data-m-go] .cpr-close__kb[data-m-on]{animation-name:cpr-breathe;animation-duration:6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:normal;animation-delay:calc(var(--cpr-i) * 1s)}
.cpr-close__knots li{--cpr-i:0}
@keyframes cpr-breathe{0%,100%{transform:none}8%{transform:scale(1.14)}16%{transform:none}}
/* entrance (wind): the tally cord winds in from the left and the knots tighten in order, then the pendants unwind
   downward with the chosen one longest */
:root[data-m-go] .cpr-close:not([data-cpr-in]) .cpr-close__cord{clip-path:inset(0 100% 0 0)}
:root[data-m-go] .cpr-close:not([data-cpr-in]) .cpr-close__k svg{opacity:.3;transform:scale(1.3) rotate(-30deg)}
:root[data-m-go] .cpr-close:not([data-cpr-in]) .cpr-pd__line{transform:scaleY(.05)}
:root[data-m-go] .cpr-close:not([data-cpr-in]) :is(.cpr-pd__end,.cpr-close__read){opacity:0}
:root[data-m-go] .cpr-close[data-cpr-in] .cpr-close__cord{animation-name:cpr-wipe-r;animation-duration:400ms;animation-timing-function:var(--gft-ease-in-out);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .cpr-close[data-cpr-in] .cpr-close__k svg{animation-name:cpr-tie;animation-duration:380ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(var(--cpr-i) * 40ms + 60ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes cpr-tie{from{opacity:.3;transform:scale(1.3) rotate(-30deg)}to{opacity:1;transform:none}}
.cpr-pd__line{transform-origin:50% 0}
:root[data-m-go] .cpr-close[data-cpr-in] .cpr-pd__line{animation-name:cpr-unwind;animation-duration:520ms;animation-timing-function:var(--gft-ease-out);animation-delay:calc(300ms + var(--k) * 70ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes cpr-unwind{from{transform:scaleY(.05)}to{transform:none}}
:root[data-m-go] .cpr-close[data-cpr-in] .cpr-pd__end{animation-name:cpr-fade;animation-duration:300ms;animation-timing-function:linear;animation-delay:calc(560ms + var(--k) * 50ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .cpr-close[data-cpr-in] .cpr-close__read{animation-name:cpr-up;animation-duration:460ms;animation-timing-function:var(--gft-ease-out);animation-delay:380ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
/* the How we work pendant continues as the footer bridge's rule: same stroke, same colour, same x */
body[data-page=principles] .gft-footer{border-top:0}
body[data-page=principles] .gft-footer__next{position:relative}
body[data-page=principles] .gft-footer__next::before{content:'';position:absolute;top:0;left:calc(var(--cpr-px, 520px) - 1.5px);width:3px;height:calc(44px + 1.3em + 10px + .5 * clamp(1.6rem,3.4vw,3.2rem) * 1.05);background:var(--cpr-ochre-l)}
body[data-page=principles] .gft-footer__next-line{height:3px;background:var(--cpr-ochre-l);overflow:visible}
body[data-page=principles] .gft-footer__next-line i{top:1px;height:1px;background:var(--gft-ochre);transform:none}
body[data-page=principles]{--cpr-px:520px}

/* ================================================================ wide screens only */
@media(min-width:1001px) and (max-height:820px){
  .cpr-bench__read h3{font-size:24px}
  .cpr-ledger li{padding:5px 0}
  .cpr-dec__wall{--pitch:108px}
}

/* ================================================================ tablets */
@media(max-width:1000px){
  body[data-page=principles]{--cpr-g:28px;--cpr-cw:calc(100vw - 56px)}
  .cpr-lat__band{left:30%}
  .cpr-bench__panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto 70px}
  .cpr-bench__pick{grid-column:1/-1;grid-row:1}
  .cpr-bench__knot{grid-column:1;grid-row:2}
  .cpr-bench__read{grid-column:2;grid-row:2/4}
  .cpr-bench__rail{grid-column:1/-1;grid-row:4}
  .cpr-bench__drop{display:none}
  .cpr-dec__box{grid-template-columns:1fr}
  .cpr-dec__out{display:none}
  .cpr-film__in{display:none}
  .cpr-bal__head{grid-template-columns:1fr}
  .cpr-con__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cpr-claim__body,.cpr-gate__body,.cpr-bound__body{grid-template-columns:1fr;row-gap:24px}
  .cpr-gate__run{display:none}
  .cpr-bound__out--r{display:none}
  .cpr-close__grid{grid-template-columns:minmax(0,320px) minmax(0,1fr)}
}

/* ================================================================ phones */
@media(max-width:760px){
  body[data-page=principles]{--cpr-g:20px;--cpr-cw:calc(100vw - 40px)}
  .cpr-h{font-size:clamp(1.9rem,8.4vw,2.4rem)}
  .cpr-head{grid-template-columns:1fr;row-gap:14px}
  .cpr-lede{font-size:17px}
  /* splash: heading on top, the lattice as a band that scrolls sideways, the read-out under it */
  [data-splash=principles] h1{font-size:clamp(2.6rem,12.4vw,3.2rem);margin-top:18px;max-width:none}
  [data-splash=principles] .gft-splash__content{order:1;padding-top:40px;padding-bottom:12px}
  [data-splash=principles] .gft-splash__lede{font-size:17px;max-width:none;margin-top:16px}
  [data-splash=principles] .gft-splash__actions{margin-top:18px}
  [data-splash=principles] .cpr-cta{display:flex;width:100%}
  [data-splash=principles] .gft-splash__structure{position:relative;inset:auto;height:auto;order:2;z-index:0;display:block;overflow:visible;pointer-events:auto}
  [data-splash=principles] .gft-splash__structure::after{display:none}
  [data-splash=principles] .gft-splash__bottom{order:3}
  [data-splash=principles] .gft-splash__data{display:none}
  [data-splash=principles] .gft-splash__caption{font-size:13px!important}
  .cpr-lat{position:relative;inset:auto}
  .cpr-lat__band{position:relative;left:auto;right:auto;height:44svh;min-height:300px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}
  .cpr-lat__band svg{width:calc(max(300px,44svh) * 1.3714);max-width:none;height:100%}
  .cpr-lat__label{font-size:36px}
  .cpr-lat__read{position:relative;left:auto;bottom:auto;width:auto;margin:10px 20px 16px}
  /* bench */
  .cpr-bench__panel{grid-template-columns:1fr;grid-template-rows:none;padding:18px 20px 0;margin-inline:-20px;column-gap:0}
  .cpr-bench__pick,.cpr-bench__knot,.cpr-bench__read,.cpr-bench__rail{grid-column:1;grid-row:auto}
  .cpr-opt{min-height:56px}
  .cpr-opt:has(input:checked){transform:none}
  .cpr-bench__knot{height:36svh;max-height:300px}
  .cpr-bench__knot svg{height:100%;width:100%}
  .cpr-bench__rail{display:none}
  .cpr-bench__read{margin-bottom:0}
  .cpr-bench{--cpr-pb:40px}
  .cpr-bench::after{content:'';position:absolute;right:calc(var(--cpr-g) / 2 - 1.5px);bottom:0;height:120px;width:3px;background:var(--cpr-cord);z-index:4}
  /* tag wall */
  .cpr-ruler{display:flex;overflow-x:auto;gap:14px;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}
  .cpr-ruler__st{flex:0 0 auto;min-width:126px;scroll-snap-align:center;min-height:76px}
  .cpr-ruler__cord{right:0}
  .cpr-dec__wall{--pitch:84px;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;padding-top:4px}
  .cpr-dec__cord,.cpr-dec__front,.cpr-dec__bead,.cpr-dec__stn,.cpr-dec__out{display:none}
  .cpr-tg{position:relative;left:auto;top:auto;width:auto;height:auto;border-top:3px solid var(--cpr-cord-ink)}
  .cpr-dec__box[data-s="4"] .cpr-tg.is-kept{translate:0 0}
  .cpr-tg__card{min-height:58px;padding:16px 10px 8px}
  .cpr-tg__card em{font-size:16px}
  .cpr-dec__read h3{font-size:26px}
  .cpr-dec__read p{font-size:17px}
  /* film: the heading scrolls away, the trace band and the card stay pinned */
  .cpr-film__pin{height:auto;min-height:calc(100svh + var(--cpr-head-h,0px));top:var(--cpr-pin-top,0px);--cpr-cy:34%}
  .cpr-film__grid{height:auto;grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"head" "dash" "trace" "ledger" "cards" "lede";row-gap:10px;padding-block:20px 18px}
  .cpr-film__dash{justify-self:stretch;justify-items:start;gap:8px}
  .cpr-film__hud{font-size:17px}
  .cpr-film__rail button{width:44px;height:44px}
  .cpr-film__rail .cpr-film__nav{display:none}
  .cpr-film__trace{height:176px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;margin-inline:-20px;padding-inline:20px}
  .cpr-film__trace svg{position:relative;inset:auto;width:700px;max-width:none;height:176px}
  .cpr-film__trace text{display:none}
  .cpr-film__ledger{padding:8px 12px}
  .cpr-lr:not(.cpr-lr--value):not(.cpr-lr--history){display:none}
  .cpr-film__state,.cpr-film__cap{font-size:13px}
  .cpr-film__state{display:none}
  .cpr-fc{padding:12px 14px}
  .cpr-fc h3{font-size:22px}
  .cpr-film__lede{font-size:17px}
  .cpr-film__steps{margin-top:0}
  .cpr-film__spacer{height:70svh}
  /* beam */
  .cpr-bal__taut{padding:36px 20px 24px}
  .cpr-bal__taut-text{font-size:20px}
  .cpr-bal__head .cpr-h{font-size:clamp(2.4rem,11vw,2.9rem)}
  .cpr-bal__stage{height:auto;margin-top:22px}
  .cpr-bal__hand{position:relative;top:0;height:6px}
  .cpr-bal__post{display:none}
  .cpr-bal__fold{position:relative;top:0;padding:0 20px}
  .cpr-bal__weights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .cpr-w{position:relative;left:auto;width:auto;margin-left:0}
  .cpr-w__hang{height:22px}
  .cpr-w__card{grid-template-columns:1fr;grid-template-areas:"n" "name";padding:8px 8px 10px;min-height:44px}
  .cpr-w__n{font-size:30px}
  .cpr-w strong{font-size:19px}
  .cpr-w__lead{display:none}
  .cpr-w__drop{translate:0 calc(var(--fx) * 100cqw * sin(var(--tilt)) * .5)}
  .cpr-bal__rule{font-size:20px;margin-top:22px}
  .cpr-bal__panes dl{grid-template-columns:1fr;gap:12px}
  .cpr-bal__panes dd{font-size:17px}
  /* link: portrait */
  .cpr-con__wide{display:none}
  .cpr-con__tall{display:block;width:auto;height:42svh;min-height:300px;margin:0 auto}
  .cpr-con__in{display:none}
  .cpr-con__out{top:auto;height:auto;bottom:calc(-1 * var(--cpr-reach,0px) - 2px);top:calc(100% - 24px)}
  .cpr-con__ctl{max-width:none}
  .cpr-con__ctl label{flex:1 1 0}
  :root[data-m-go] .cpr-filter__row{animation-name:none}
  .cpr-con__ctl span{font-size:15px;padding:8px 6px}
  .cpr-con__cols{grid-template-columns:1fr;gap:8px}
  .cpr-con__col{grid-template-columns:auto 1fr;column-gap:12px}
  .cpr-con__ico{grid-row:1/3}
  .cpr-con__ico svg{width:64px;height:30px}
  .cpr-con__txt,.cpr-con__col b{font-size:17px}
  .cpr-con__read{font-size:19px}
  /* claims */
  .cpr-claim__sentence{max-width:none;font-size:30px;padding-block:34px 44px}
  .cpr-claim__chips{position:static;display:flex;justify-content:center;flex-wrap:wrap;white-space:normal;margin:0 0 8px}
  .cpr-claim__subj{display:inline}
  :is(.cpr-claim__in,.cpr-claim__out,.cpr-con__out){width:18px}
  .cpr-claim__sentence{padding-top:10px}
  .cpr-claim__inputs{font-size:13px}
  .cpr-claim__band{--cpr-bh:120px}
  .cpr-claim__strands{height:120px}
  .cpr-claim__veil{left:16px;padding:0 10px}
  .cpr-claim__veil-x{display:none}
  .cpr-chips{grid-template-columns:1fr 1fr}
  .cpr-chip span{padding:12px 12px}
  .cpr-chip b{font-size:15px}
  .cpr-claim__parts{padding:14px 16px}
  .cpr-claim__panes .cpr-pane{grid-template-columns:minmax(0,1fr)}
  .cpr-claim__pread p{font-size:17px}
  .cpr-claim__pticks{grid-template-columns:1fr 1fr}
  /* gate */
  .cpr-gate__dial{max-width:358px}
  .cpr-gate__zlab{font-size:27px}
  .cpr-gate__val{font-size:23px}
  .cpr-gate__read{font-size:24px}
  .cpr-gate__field output{font-size:44px}
  .cpr-gate__lamps{grid-template-columns:repeat(3,1fr)}
  .cpr-gate__lamp{font-size:13px;padding:8px}
  .cpr-gate__out{display:none}
  .cpr-gate__in{display:none}
  /* sheet */
  .cpr-bound__sheet{padding:14px 16px 0}
  .cpr-bound__rows li{grid-template-columns:1fr;gap:4px;padding:8px 0}
  .cpr-bound__v{font-size:17px}
  .cpr-filter{margin-inline:-16px;padding-inline:8px}
  .cpr-bound__reg li{flex-direction:column;align-items:flex-start}
  .cpr-bound__lead{font-size:26px}
  .cpr-bound__pl{font-size:19px}
  /* closing */
  .cpr-close{--cpr-tc:46px}
  .cpr-close__tally{height:18svh;min-height:110px}
  .cpr-close__k{width:52px}
  .cpr-close__k em{display:none}
  .cpr-close__grid{grid-template-columns:1fr;grid-template-rows:none}
  .cpr-close__head,.cpr-close__pend,.cpr-close__read{grid-column:1;grid-row:auto}
  .cpr-pd__end{left:50%;margin-left:0;transform:translateX(-50%);grid-template-columns:1fr;justify-items:center;width:84px;text-align:center}
  .cpr-pd__end svg{grid-row:auto}
  .cpr-pd__end b,.cpr-pd__end em{grid-column:1;justify-self:center}
  .cpr-pd__end em{display:none}
  .cpr-close__pend{min-height:38svh;margin-top:18px;order:2}
  .cpr-close__read{order:3}
  .cpr-pd{--len:calc(70px + var(--k) * 26px);left:calc(12.5% + var(--k) * 25%);width:56px;margin-left:-28px}
  .cpr-pd__line{top:-18px}
  .cpr-pd__end{top:calc(var(--len) - 20px);width:84px}
  .cpr-pd__end b{font-size:13px}
  .cpr-pd:has(input:checked) .cpr-pd__end{top:calc(var(--len) - 20px)}
  .cpr-pd:has(input:checked){--len:100%}
  .cpr-pd:has(input:checked) .cpr-pd__end{top:150px}
  .cpr-close__read{position:relative;z-index:3;margin-top:12px}
  .cpr-close__name{font-size:30px}
  .cpr-close__q{font-size:19px}
  body[data-page=principles]{--cpr-px:calc(12.5vw - 5px)}
  body[data-page=principles] .gft-footer__next::before{height:calc(32px + 1.3em + 10px + clamp(1.6rem,3.4vw,3.2rem) * 1.05 + 10px)}
}

/* Reduced motion and Calm: every scroll-linked hand-over and every loop stops; each block shows its finished state. */
@media(prefers-reduced-motion:reduce){
  .cpr-lat__k1,.cpr-lat__dim,.cpr-tg.is-kept .cpr-tg__hand,.cpr-bal__hand,.cpr-bal__fold,.cpr-con__out,.cpr-claim__out,.cpr-gate__out,.cpr-filter__row{animation-name:none!important;animation-timeline:auto!important}
}
:root[data-motion=calm] :is(.cpr-lat__k1,.cpr-lat__dim,.cpr-tg__hand,.cpr-bal__hand,.cpr-bal__fold,.cpr-con__out,.cpr-claim__out,.cpr-gate__out,.cpr-filter__row){animation-name:none!important;animation-timeline:auto!important}

/* the splash hand-over: knot one drops toward the bench while the lattice dims */
@supports (animation-timeline:view()){
  :root[data-m-go] .cpr-lat__k1{animation-name:cpr-k1-drop;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--gft-splash;animation-range-start:exit 0%;animation-range-end:exit 90%}
  :root[data-m-go] .cpr-lat__dim{animation-name:cpr-dim;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--gft-splash;animation-range-start:exit 0%;animation-range-end:exit 70%}
}
@keyframes cpr-k1-drop{to{transform:translateY(140px) scale(1.6)}}
@keyframes cpr-dim{to{opacity:.35}}