/* /tools/ page. Every class, variable and keyframe is prefixed twl- (tools wall). Only the /tools/ route imports this
   file. Composed end state first; pre-states only under :root[data-m-go]; entrances once; transform, opacity, clip-path
   and filter only; sticky pins, never counter-translation; scroll-driven rules as longhands. Sheet: control/choreo/tools.md */
.twl{--tn:#072d2b;--tf:#0e4d4a;--tp:#f6f4ef;--ts:#e7efe9;--to:#c98a2b;--tol:#e0a64a;--tink:#10241f;--tmute:#3d5048;--tlab:#cfe3d8;--tbody:#e6efe9;--tease:cubic-bezier(.16,1,.3,1);--tcl:calc((100% - min(1440px, 100% - 96px)) / 2);overflow-x:clip}
.twl [hidden]{display:none!important}
.twl [data-fam=Operations]{--fd:#7fd0a4;--fl:#2f7a58}
.twl [data-fam=Industry]{--fd:#e9b55c;--fl:#8a5a12}
.twl [data-fam=Intelligence]{--fd:#aebdff;--fl:#2c3e7a}
.twl [data-fam=Resources]{--fd:#8edcd8;--fl:#1f6b69}
.twl [data-fam=Systems]{--fd:#ece6d4;--fl:#4a5752}
:where(.twl svg) :where(path,polyline){fill:none}
.twl-f__ring{fill:none}
.twl-b{position:relative}
.twl-b--night{background:var(--tn);color:var(--tbody)}
.twl-b--forest{background:var(--tf);color:var(--tbody)}
.twl-b--paper{background:var(--tp);color:var(--tink)}
.twl-b--sage{background:var(--ts);color:var(--tink)}
.twl-b h2{font-size:clamp(2.25rem,3.3vw,3rem);line-height:1.04;letter-spacing:-.045em;font-weight:850;max-width:18ch}
.twl-b .gft-eyebrow{font-size:13px;letter-spacing:.1em;margin-bottom:18px}
.twl-b--night .gft-eyebrow,.twl-b--forest .gft-eyebrow{color:var(--tlab)}
.twl-b--paper .gft-eyebrow,.twl-b--sage .gft-eyebrow{color:var(--tmute)}
.twl-b--night h2,.twl-b--forest h2{color:#fff}
.twl-chip{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid currentColor;font:14px var(--gft-font-mono);letter-spacing:.04em;text-decoration:none;color:inherit}
.twl-chip:hover{background:#ffffff14}
.twl-key{display:inline-block;width:14px;height:14px;flex-shrink:0}
.twl-key--oee{background:#6bb68f}.twl-key--q{background:#e0a64a}.twl-key--p{background:#8fa3ff}.twl-key--a{background:#c5d8cc}

/* Stage triggers: kit entrances inside a stage wait, paused, until about 38 percent of it is in view. */
:root[data-m-go] [data-twl-stage]:not([data-twl-on]) :is([data-m],.m-k,.m-ln,.m-fd,.m-c,.m-w){animation-play-state:paused!important}
:root[data-m-go] [data-twl-stage][data-m]:not([data-twl-on]){animation-play-state:paused!important}
/* the console's first bank row is already in frame under the splash: its deal plays at once */
:root[data-m-go] .twl-con:not([data-twl-on]) .twl-con__banks,:root[data-m-go] .twl-con:not([data-twl-on]) .twl-con__banks>.twl-bank{animation-play-state:running!important}

/* ---------- the face: one schematic instrument in a 128-unit box ---------- */
.twl-f{--fc:var(--fd,#7fd0a4)}
.twl-f__bg{fill:#0b3f3c;stroke:var(--fc);stroke-opacity:.6;stroke-width:2.5}
.twl-f__base{stroke:var(--tol);stroke-width:3}
.twl-f__bar{fill:var(--fc);transform-box:fill-box;transform-origin:50% 100%;transition:transform 420ms var(--tease)}
.twl-f__ring,.twl-f__tick{stroke:var(--fc);stroke-width:3.5}
.twl-f__needle{transform:rotate(var(--a,0deg));transition:transform 520ms var(--tease)}
.twl-f__pin{stroke:var(--tol);stroke-width:6;stroke-linecap:round}
.twl-f__hub{fill:var(--fc)}
.twl-f__trace{stroke:var(--fc);stroke-width:5;stroke-linejoin:round;stroke-linecap:round;transition:clip-path 420ms var(--tease),opacity 300ms}
.twl-f__trace--2{stroke:var(--tol);stroke-width:3.5;stroke-dasharray:7 6;opacity:0}
.twl-f__node{fill:var(--tol)}
.twl-f__k{transition:opacity 300ms}
.twl-f[data-kind="0"] :is(.twl-f__k1,.twl-f__k2),.twl-f[data-kind="1"] :is(.twl-f__k0,.twl-f__k2),.twl-f[data-kind="2"] :is(.twl-f__k0,.twl-f__k1){opacity:0}
.twl-f:not([data-kind="0"]) .twl-f__bar{transform:scaleY(0)}
.twl-f:not([data-kind="2"]) .twl-f__trace{clip-path:inset(0 100% 0 0)}
.twl-b--paper .twl-f,.twl-b--sage .twl-f{--fc:var(--fl,#2f7a58)}
.twl-b--paper .twl-f__bg,.twl-b--sage .twl-f__bg{fill:#fff;stroke-opacity:.5}
.twl-b--paper :is(.twl-f__pin),.twl-b--sage .twl-f__pin{stroke:#9a641a}
.twl-b--paper :is(.twl-f__node,.twl-f__base),.twl-b--paper .twl-f__base{fill:#9a641a;stroke:#9a641a}
.twl-b--paper .twl-f__base{fill:none}

/* ---------- 1. splash: the idle wall powers on ---------- */
.twl .gft-splash__caption,.twl .gft-splash__position,.twl .gft-splash__data{display:none}
.twl .gft-splash h1{font-size:clamp(4rem,6.9vw,6.25rem);font-weight:900;line-height:.98;max-width:none;letter-spacing:-.06em}
.twl .gft-splash h1 .gft-serif{font-size:1.08em;letter-spacing:-.04em}
.twl .gft-splash__lede{font-size:19px;line-height:1.6;color:var(--tbody);max-width:none;width:min(440px,100%)}
.twl .gft-splash__content{pointer-events:none}
.twl .gft-splash__actions{pointer-events:auto}
.twl .gft-splash__cue{font-size:15px}
.twl-hero{display:flex;gap:10px;width:min(480px,100%)}
.twl-hero input{flex:1 1 auto;min-width:0;min-height:56px;padding:10px 16px;border:1px solid #6bb68f;border-radius:0;background:#0b3b38;color:#fff;font:600 18px var(--gft-font-display)}
.twl-hero input::placeholder{color:#b9d3c5;opacity:1}
.twl-hero .gft-button{flex-shrink:0;gap:18px;min-height:56px;font-size:18px;cursor:pointer}
.twl-wall{position:relative;width:100%;height:100%;overflow-anchor:none}
.twl-wall__svg{display:block;width:100%;height:100%;overflow:visible}
.twl-wall__svg--ph,.twl-wall__phone{display:none}
.twl-wall__read{font:16px var(--gft-font-mono);letter-spacing:.08em;fill:var(--tlab)}
.twl-wall__cap{font:14px var(--gft-font-mono);letter-spacing:.08em;fill:#b9d3c5}
.twl-wall__rule{stroke:#6bb68f;stroke-opacity:.5;stroke-width:2}
.twl-wall__scan{fill:var(--tol)}
.twl-wall__a{pointer-events:auto;cursor:pointer;outline:none}
.twl-wall__a[data-off]{opacity:.25}
.twl-wall__on{transform-box:fill-box;transform-origin:center;transition:transform 260ms var(--tease)}
.twl-wall__a:hover .twl-wall__on,.twl-wall__a:focus-visible .twl-wall__on{transform:scale(1.07)}
.twl-wall__on[data-lit] .twl-f__bg{stroke:var(--tol);stroke-opacity:1;stroke-width:5;fill:#0e4d4a}
.twl-wall__a:focus-visible .twl-f__bg{stroke:#fff;stroke-opacity:1;stroke-width:6}
@media(min-width:1001px){
 .twl .gft-splash{min-height:max(640px,calc(100svh - 88px))}
 .twl .gft-splash__structure{inset:12px 1.5% 8px 41%;display:block;overflow:visible}
 .twl .gft-splash__structure::after{background:linear-gradient(90deg,#072d2b 0%,#072d2b99 4%,#072d2b00 16%)}
 .twl .gft-splash__content{padding-top:40px}
}
/* power-on: grounds clip in by row (row 1 already 40 percent in), then the glyphs draw */
:root[data-m-go] .twl-wall .twl-f__bg{transform-box:fill-box;transform-origin:50% 0;animation-name:twl-ground;animation-duration:330ms;animation-delay:calc(var(--r,0) * 85ms);animation-timing-function:var(--tease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes twl-ground{from{transform:scaleY(calc(.4 - var(--r,0) * .12));opacity:calc(.6 - var(--r,0) * .15)}to{transform:none;opacity:1}}
:root[data-m-go] .twl-wall .twl-f__bar{animation-name:twl-rise;animation-duration:520ms;animation-delay:calc(250ms + var(--i,0) * 8ms + var(--k,0) * 30ms);animation-timing-function:var(--tease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes twl-rise{from{transform:scaleY(0)}}
:root[data-m-go] .twl-wall .twl-f__needle{animation-name:twl-swing0;animation-duration:600ms;animation-delay:calc(250ms + var(--i,0) * 8ms);animation-timing-function:var(--tease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes twl-swing0{from{transform:rotate(0deg)}}
:root[data-m-go] .twl-wall .twl-f__trace{animation-name:twl-wipe;animation-duration:600ms;animation-delay:calc(250ms + var(--i,0) * 8ms);animation-timing-function:var(--tease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes twl-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* lives: needles sway, nodes pulse, a scan runs along the base rule (on screen only) */
:root[data-m-go] .twl-wall[data-m-on] .twl-f__sway{animation-name:twl-sway;animation-duration:6s;animation-delay:calc(var(--i,0) * -700ms);animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
@keyframes twl-sway{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
:root[data-m-go] .twl-wall[data-m-on] .twl-f__node{animation-name:twl-pulse;animation-duration:1.8s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
@keyframes twl-pulse{from{opacity:.5}to{opacity:1}}
:root[data-m-go] .twl-wall[data-m-on] .twl-wall__scan{animation-name:twl-scan;animation-duration:5s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal}
@keyframes twl-scan{from{transform:translateX(0)}to{transform:translateX(728px)}}
/* hand-over 1 to 2: as the splash leaves, every face slides part of the way toward its family bank */
@media(min-width:1001px){@supports (animation-timeline:view()){
 :root[data-m-go] .twl-wall__mv{animation-name:twl-resort;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--gft-splash;animation-range-start:exit 0%;animation-range-end:exit 80%}
}}
@keyframes twl-resort{from{transform:none;opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(.7);opacity:.1}}

/* ---------- 2. console: the wall banked by family ---------- */
.twl-con{padding:56px 0 104px}
.twl-con__grid{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);grid-template-areas:"count banks" "head banks" "head read" "filter filter" "cap cap";column-gap:56px;align-items:start}
.twl-con__count{grid-area:count}
.twl-con__n{display:inline-block;font:900 120px/.86 var(--gft-font-display);letter-spacing:-.06em;color:#fff;font-variant-numeric:tabular-nums;min-width:1.2em}
.twl-con__of{margin-top:14px;font-size:19px;line-height:1.45;color:var(--tbody)}
.twl-con__head{grid-area:head;margin-top:36px}
.twl-con__read{grid-area:read;margin-top:24px;padding-top:16px;border-top:1px solid #6bb68f55}
.twl-con__k{font:13px var(--gft-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tlab)}
.twl-con__name{margin-top:8px;font:700 22px/1.3 var(--gft-font-display);color:#fff;letter-spacing:-.01em}
.twl-con__banks{grid-area:banks;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;align-items:start}
.twl-bank__lab{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:12px 0 14px;border-top:3px solid var(--fd);font:600 16px var(--gft-font-display);color:#fff}
.twl-bank__lab b{font:700 16px var(--gft-font-mono);color:var(--fd)}
.twl-bank__faces{display:grid;grid-template-columns:repeat(2,76px);gap:8px}
.twl-bf{width:76px;height:76px;padding:0;border:0;background:none;cursor:pointer;transition:transform 200ms var(--tease),opacity 200ms}
.twl-bf__svg{width:100%;height:100%;overflow:visible}
.twl-bf:hover,.twl-bf:focus-visible{transform:translateY(-6px)}
.twl-bf[data-off]{opacity:.22}
.twl-bf[data-sel] .twl-f__bg{stroke:var(--tol);stroke-opacity:1;stroke-width:6}
.twl-bf:focus-visible{outline:3px solid var(--tol);outline-offset:3px}
.twl-filter{grid-area:filter;position:relative;display:grid;gap:16px;margin-top:40px;padding:26px 28px 28px;background:#0b3b38;border:1px solid #6bb68f66}
.twl-filter__k{font:14px var(--gft-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tlab)}
.twl-filter__top{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.twl-filter__top .twl-search{flex:1 1 420px}
.twl-filter__shown{margin-left:auto;font:600 20px var(--gft-font-display);color:var(--tbody);white-space:nowrap}
.twl-filter__shown b{display:inline-block;min-width:1.2em;text-align:right;font:900 40px/1 var(--gft-font-display);color:#fff;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.twl-filter__rule{position:absolute;left:0;right:0;top:0;height:2px;background:var(--to);transform-origin:0 50%}
.twl-search input{width:100%;min-height:64px;padding:10px 20px;border:1px solid #8fd1af;border-radius:0;background:var(--tn);color:#fff;font:500 20px var(--gft-font-display)}
.twl-search input::placeholder{color:#b9d3c5;opacity:1}
.twl-chips{display:grid;grid-template-columns:.7fr repeat(5,minmax(0,1fr));gap:10px;border:0;margin:0;padding:0;min-width:0}
.twl-chips label{position:relative;display:block}
.twl-chips input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.twl-chips span{display:flex;align-items:center;justify-content:center;gap:10px;min-height:64px;padding:8px 14px;border:1px solid #6bb68f;color:#fff;font:600 18px var(--gft-font-display);transition:background-color 200ms,color 200ms}
.twl-chips em{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--fd)}
.twl-chips i{font:normal 16px var(--gft-font-mono);color:var(--tlab)}
.twl-chips input:checked+span{background:var(--to);border-color:var(--to);color:var(--tn)}
.twl-chips input:checked+span i{color:var(--tn)}
.twl-chips input:focus-visible+span{outline:3px solid #fff;outline-offset:3px}
.twl-reset{min-height:64px;padding:8px 28px;background:transparent;border:1px solid var(--tlab);color:#fff;font:600 18px var(--gft-font-display);cursor:pointer}
.twl-reset:hover{background:#ffffff14}
.twl-con__cap{grid-area:cap;margin-top:22px;max-width:78ch;font-size:17px;line-height:1.6;color:var(--tbody)}
.twl-drop{position:absolute;z-index:4;bottom:0;left:calc(var(--tcl) + min(1440px, 100% - 96px) * .21 - 56px);width:112px;height:112px;transform:translateY(50%);pointer-events:none}
.twl-drop__line{position:absolute;left:55px;bottom:100%;height:40px;border-left:2px dashed var(--tol)}
.twl-drop__svg{display:block;width:112px;height:112px;overflow:visible}
.twl-drop .twl-f__bg{fill:var(--tn);stroke:var(--tol);stroke-opacity:1;stroke-width:4}
/* entrance, second phase at 38 percent: faces settle and take their colour; the filter rule draws */
:root[data-m-go] .twl-con:not([data-twl-on]) .twl-bf__svg{filter:saturate(.35) brightness(.85);transform:translateY(-10px)}
:root[data-m-go] .twl-con[data-twl-on] .twl-bf__svg{animation-name:twl-settle;animation-duration:620ms;animation-delay:calc(80ms + var(--c,0) * 45ms);animation-timing-function:var(--tease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes twl-settle{from{filter:saturate(.35) brightness(.85);transform:translateY(-10px)}to{filter:none;transform:none}}
.twl-bank[data-fam=Operations]{--c:0}.twl-bank[data-fam=Industry]{--c:1}.twl-bank[data-fam=Intelligence]{--c:2}.twl-bank[data-fam=Resources]{--c:3}.twl-bank[data-fam=Systems]{--c:4}
:root[data-m-go] .twl-con:not([data-twl-on]) .twl-filter__rule{transform:scaleX(.15)}
:root[data-m-go] .twl-con[data-twl-on] .twl-filter__rule{animation-name:twl-rule;animation-duration:520ms;animation-delay:200ms;animation-timing-function:var(--tease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes twl-rule{from{transform:scaleX(.15)}to{transform:none}}
:root[data-m-go] .twl-con:not([data-twl-on]) :is(.twl-filter>:not(.twl-filter__rule),.twl-con__read,.twl-con__cap){opacity:.6;transform:translateY(14px)}
:root[data-m-go] .twl-con[data-twl-on] :is(.twl-filter>:not(.twl-filter__rule),.twl-con__read,.twl-con__cap){animation-name:twl-up6;animation-duration:640ms;animation-delay:60ms;animation-timing-function:var(--tease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes twl-up{from{opacity:.3;transform:translateY(14px)}to{opacity:1;transform:none}}
:root[data-m-go] .twl-drawer:not([data-twl-on])::before{opacity:.3}
@keyframes twl-up55b{from{opacity:.55;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes twl-up55{from{opacity:.55;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes twl-up6{from{opacity:.6;transform:translateY(14px)}to{opacity:1;transform:none}}
/* lives: one face per bank breathes */
:root[data-m-go] .twl-con__grid[data-m-on] .twl-bank__faces>:first-child .twl-f__bg{animation-name:twl-breathe;animation-duration:2.8s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
@keyframes twl-breathe{from{opacity:.85}to{opacity:1}}
/* hand-over 2 to 3: the lifted face drops across the cut into the loupe */
@supports (animation-timeline:view()){
 :root[data-m-go] .twl-drop__svg{animation-name:twl-dropin;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range-start:cover 45%;animation-range-end:cover 85%}
}
@keyframes twl-dropin{0%{transform:none;opacity:1}70%{opacity:1}100%{transform:translateY(150px) scale(1.6);opacity:0}}

/* ---------- 3. register: the loupe and five drawers ---------- */
.twl-reg{padding:0;isolation:isolate}
.twl-reg__grid{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:56px;align-items:stretch}
.twl-loupe{--frame:#2f7a58;position:relative;z-index:1}
.twl-loupe[data-drawer=Industry]{--frame:#c98a2b}
.twl-loupe[data-drawer=Intelligence]{--frame:#2c3e7a}
.twl-loupe[data-drawer=Resources]{--frame:#3f8f6b}
.twl-loupe[data-drawer=Systems]{--frame:#10241f}
.twl-loupe__in{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:28px 0}
.twl-loupe__stage{--lf:min(272px,30svh);position:relative;height:calc(var(--lf) + 84px);margin-bottom:12px}
.twl-loupe__open{position:absolute;left:24px;top:12px;width:var(--lf);height:var(--lf);transform-origin:50% 100%}
.twl-loupe__face{display:block;width:100%;height:100%;overflow:visible;transform-origin:50% 50%;transition:transform 520ms var(--tease)}
.twl-loupe[data-drawer=Systems] .twl-loupe__face{transform:scale(1.2)}
.twl-loupe__frame{fill:#fff;stroke:var(--frame);stroke-width:5;transition:stroke 400ms}
.twl-loupe .twl-f__bg{fill:#f2f6f3;stroke:none}
.twl-loupe[data-drawer=Intelligence] .twl-f__trace--2{opacity:1}
.twl-loupe__banks{position:absolute;inset:0}
.twl-lbank{position:absolute;display:flex;gap:6px;opacity:0;transition:opacity 300ms;left:24px;top:calc(var(--lf) + 30px)}
.twl-lbank__f{width:38px;height:38px;overflow:visible;transition:transform 300ms var(--tease)}
.twl-lbank__f[data-cur]{transform:translateY(-5px) scale(1.12)}
.twl-lbank__f[data-cur] .twl-f__bg{stroke:var(--to);stroke-width:8;stroke-opacity:1}
.twl-loupe[data-drawer=Operations] .twl-lbank[data-fam=Operations],.twl-loupe[data-drawer=Industry] .twl-lbank[data-fam=Industry],.twl-loupe[data-drawer=Intelligence] .twl-lbank[data-fam=Intelligence],.twl-loupe[data-drawer=Resources] .twl-lbank[data-fam=Resources]{opacity:1}
.twl-lbank[data-fam=Industry]{left:calc(var(--lf) + 52px);top:12px;flex-direction:column;gap:7px}
.twl-lbank[data-fam=Industry] .twl-lbank__f{width:40px;height:40px}
.twl-lbank[data-fam=Resources] .twl-lbank__f{width:58px;height:58px}
.twl-lbank[data-fam=Resources]{gap:12px}
.twl-loupe__seq{font:500 22px var(--gft-font-mono);letter-spacing:.04em;color:var(--tmute)}
.twl-loupe__seq b{color:var(--tink);font-weight:700}
.twl-loupe__title{margin-top:10px;font-size:34px;line-height:1.1;letter-spacing:-.035em;max-width:16ch}
.twl-loupe__q{margin-top:14px;font-size:19px;line-height:1.55;color:#24352f;max-width:36ch}
.twl-loupe__m{margin-top:12px;font-size:16px;line-height:1.5;color:#24352f;max-width:40ch}
.twl-loupe__m span{display:block;font:13px var(--gft-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tmute)}
.twl-loupe__m b{font-weight:600;color:var(--tink)}
.twl-loupe__go{margin-top:18px;align-self:flex-start;min-height:56px;font-size:18px}
.twl-reg__list{padding-top:104px;min-width:0}
.twl-reg__lede{margin-top:18px;font-size:19px;line-height:1.55;color:#24352f;max-width:46ch}
.twl-drawer{position:relative;padding:56px 0 64px;--fc2:var(--fl)}
.twl-reg__head+.twl-drawer{margin-top:48px}
.twl-drawer::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:-100vw;right:-100vw;background:var(--band,#f6f4ef);transition:opacity 600ms var(--tease)}
.twl-drawer--operations{--band:#e5efe9}.twl-drawer--industry{--band:#f5ecdb}.twl-drawer--intelligence{--band:#e8ebf7}.twl-drawer--resources{--band:#ddeeed}.twl-drawer--systems{--band:#ebe9e2;padding-bottom:128px}
.twl-drawer__head{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:8px 16px;padding-top:16px;border-top:3px solid var(--fl);margin-bottom:14px}
.twl-drawer__head h3{font-size:28px;letter-spacing:-.03em}
.twl-drawer__n{font:800 28px var(--gft-font-display);color:var(--fl)}
.twl-drawer__bank{justify-self:end;height:32px;width:auto;max-width:100%;overflow:visible}
.twl-drawer__bank [data-cur] .twl-f__bg{stroke:var(--to);stroke-width:10;stroke-opacity:1}
.twl-drawer__line{grid-column:1/-1;font-size:17px;line-height:1.5;color:var(--tmute)}
.twl-drawer__rows{list-style:none;margin:0;padding:0}
.twl-row{position:relative;transition:opacity 200ms}
.twl-row__tip{position:absolute;z-index:6;left:62px;right:0;top:calc(100% - 6px);display:grid;gap:2px;padding:12px 16px 14px;background:var(--tn);color:#e6efe9;font-size:15px;line-height:1.5;opacity:0;visibility:hidden;transform:translateY(-6px);box-shadow:0 14px 34px #072d2b40;pointer-events:none;transition:opacity 180ms,transform 180ms var(--tease),visibility 0s 180ms}
.twl-row__tip em{font:normal 13px var(--gft-font-mono);letter-spacing:.08em;text-transform:uppercase;color:#cfe3d8}
.twl-row__tip em+*,.twl-row__tip em:not(:first-child){margin-top:6px}
.twl-row__a:is(:hover,:focus-visible) .twl-row__tip{opacity:1;visibility:visible;transform:none;transition:opacity 220ms 380ms,transform 260ms var(--tease) 380ms,visibility 0s 380ms}
.twl-drawer--intelligence .twl-row__tip{left:0;top:calc(100% - 4px)}
.twl-row[data-off]{opacity:.3}
.twl-row__a{display:grid;grid-template-columns:48px auto minmax(0,1fr) auto;align-items:center;gap:6px 14px;min-height:76px;padding:12px 14px;border-bottom:1px solid #0e4d4a22;color:inherit;text-decoration:none;transition:background-color 200ms,box-shadow 200ms}
.twl-row__a:hover,.twl-row[data-cur] .twl-row__a{background:#fff;box-shadow:inset 4px 0 0 var(--fl)}
.twl-row__a:focus-visible{outline:3px solid var(--to);outline-offset:-3px}
.twl-row__g{width:48px;height:48px;overflow:visible}
.twl-row__no{font:600 15px var(--gft-font-mono);color:var(--tmute)}
.twl-row__t{font-size:20px;font-weight:700;line-height:1.2;letter-spacing:-.02em}
.twl-row__q{display:none}
.twl-row__go{font-size:20px;color:var(--fl)}
.twl-drawer--operations .twl-drawer__rows{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
.twl-drawer--industry .twl-row__a{grid-template-columns:48px auto minmax(0,1fr) auto;grid-template-rows:auto auto;min-height:104px}
.twl-drawer--industry .twl-row__g{grid-row:1/3}
.twl-drawer--industry .twl-row__no{grid-row:1/3}
.twl-drawer--industry .twl-row__go{grid-row:1/3;grid-column:4}
.twl-drawer--industry .twl-row__q{display:block;grid-column:3;grid-row:2;font-size:15px;line-height:1.5;color:var(--tmute);opacity:0;transition:opacity 300ms}
.twl-drawer--industry .twl-row[data-cur] .twl-row__q,.twl-drawer--industry .twl-row__a:hover .twl-row__q{opacity:1}
.twl-drawer--intelligence .twl-drawer__rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.twl-drawer--intelligence .twl-row__a{grid-template-columns:auto minmax(0,1fr);grid-template-rows:72px auto;align-items:start;min-height:200px;padding:18px;border:1px solid #2c3e7a33;background:#fbfbf8}
.twl-drawer--intelligence .twl-row__g{width:72px;height:72px;grid-column:1/-1}
.twl-drawer--intelligence .twl-row__no{grid-column:1;grid-row:2}
.twl-drawer--intelligence .twl-row__t{grid-column:2;grid-row:2;font-size:19px}
.twl-drawer--intelligence .twl-row__go{position:absolute;right:16px;top:16px}
.twl-drawer--intelligence .twl-row__a{position:relative}
.twl-drawer--resources .twl-drawer__rows{background:#ffffffa6;padding:10px 22px}
.twl-drawer--resources .twl-row__a{min-height:92px;border-bottom-color:#1f6b6933}
.twl-drawer--systems .twl-row__a{grid-template-columns:200px minmax(0,1fr) auto;grid-template-rows:auto auto auto auto;gap:8px 32px;padding:36px;border:2px solid var(--fl);background:#fff;min-height:300px}
.twl-drawer--systems .twl-row__g{width:200px;height:200px;grid-row:1/5}
.twl-drawer--systems .twl-row__no{grid-column:2;grid-row:1}
.twl-drawer--systems .twl-row__t{grid-column:2;grid-row:2;font-size:34px;letter-spacing:-.03em}
.twl-drawer--systems .twl-row__q{display:block;grid-column:2;grid-row:3;font-size:19px;line-height:1.55;color:#24352f}
.twl-drawer--systems .twl-row__tip,.twl-drawer--systems .twl-row__a:is(:hover,:focus-visible) .twl-row__tip{position:static;grid-column:2;grid-row:4;opacity:1;visibility:visible;transform:none;box-shadow:none;transition:none;margin-top:6px}
.twl-drawer--systems .twl-row__go{grid-column:3;grid-row:1/5}
.twl-reg__empty{margin-top:40px;padding:28px;border:1px dashed #9a641a;font:15px/1.7 var(--gft-font-mono)}
/* entrance: the loupe's glyph draws after the curtain opens */
:root[data-m-go] .twl-reg:not([data-twl-on]) .twl-loupe__face{opacity:.35;transform:scale(.82) rotate(-6deg)}
:root[data-m-go] .twl-reg[data-twl-on] .twl-loupe__face{animation-name:twl-lens;animation-duration:620ms;animation-delay:280ms;animation-timing-function:var(--tease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes twl-lens{from{opacity:.35;transform:scale(.82) rotate(-6deg)}}
:root[data-m-go] .twl-reg:not([data-twl-on]) .twl-loupe__stage{clip-path:inset(0 0 62% 0)}
:root[data-m-go] .twl-reg[data-twl-on] .twl-loupe__stage{animation-name:twl-lclip;animation-duration:520ms;animation-timing-function:var(--tease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes twl-lclip{from{clip-path:inset(0 0 62% 0)}to{clip-path:inset(0 0 0 0)}}
:root[data-m-go] .twl-reg:not([data-twl-on]) :is(.twl-loupe__seq,.twl-loupe__title,.twl-loupe__q,.twl-loupe__m,.twl-loupe__go,.twl-reg__lede){opacity:.55;transform:translateY(16px)}
:root[data-m-go] .twl-reg[data-twl-on] :is(.twl-loupe__seq,.twl-loupe__title,.twl-loupe__q,.twl-loupe__m,.twl-loupe__go,.twl-reg__lede){animation-name:twl-up55;animation-duration:640ms;animation-delay:140ms;animation-timing-function:var(--tease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .twl-loupe[data-m-on] .twl-f[data-kind="0"] .twl-f__bar{animation-name:twl-bars;animation-duration:2.4s;animation-delay:calc(var(--k,0) * -.55s);animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
@keyframes twl-bars{from{transform:scaleY(.5)}to{transform:scaleY(1.08)}}
:root[data-m-go] .twl-loupe[data-m-on] .twl-f[data-kind="1"] .twl-f__sway{animation-name:twl-sweep;animation-duration:3.2s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
@keyframes twl-sweep{from{transform:rotate(-24deg)}to{transform:rotate(24deg)}}
:root[data-m-go] .twl-loupe[data-m-on] .twl-f[data-kind="2"] .twl-f__trace:not(.twl-f__trace--2){animation-name:twl-wipeloop;animation-duration:3.4s;animation-timing-function:var(--tease);animation-iteration-count:infinite;animation-direction:normal}
@keyframes twl-wipeloop{0%{clip-path:inset(0 72% 0 0)}55%,100%{clip-path:inset(0 0 0 0)}}
:root[data-m-go] .twl-loupe[data-m-on] .twl-f__hub{animation-name:twl-pulse;animation-duration:1.6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
/* hand-over 3 to 4: as the register leaves, the loupe's dial opens toward the stage dial */
@supports (animation-timeline:view()){
 .twl-reg{view-timeline-name:--twl-reg;view-timeline-axis:block}
 :root[data-m-go] .twl-loupe__open{animation-name:twl-open;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--twl-reg;animation-range-start:exit 0%;animation-range-end:exit 70%}
}
@keyframes twl-open{from{transform:none}to{transform:scale(1.3)}}

/* ---------- 4. path film: one sticky dial, four steps ---------- */
.twl-path{--D:min(620px,calc(100svh - 240px));--dtop:max(170px,calc((100svh - var(--D)) / 2 + 56px));--ct:calc(var(--dtop) + var(--D) / 2 - 130px)}
.twl-path__stage{position:sticky;top:0;height:100svh;overflow:clip;z-index:1}
.twl-path__frame{position:relative;height:100%}
.twl-path__head{position:absolute;z-index:2;left:0;top:clamp(28px,5svh,52px);max-width:620px;transition:opacity 400ms}
.twl-path__head h2{font-size:clamp(2.2rem,3.1vw,2.75rem);max-width:17ch}
.twl-path__dial{position:absolute;z-index:1;left:-12px;top:var(--dtop);width:var(--D);height:var(--D)}
.twl-path__dialmv{position:relative;width:100%;height:100%;transform-origin:0 62%;transition:transform 760ms var(--tease)}
.twl-path[data-step="2"] .twl-path__dialmv,.twl-path[data-step="3"] .twl-path__dialmv{transform:scale(.76)}
.twl-pd{display:block;width:100%;height:100%;overflow:visible}
.twl-pd__ticks path{stroke:#2f7a58;stroke-width:2}
.twl-pd__tickin,.twl-pd__ticks{transform-origin:280px 280px}
.twl-pd__axis{stroke:#2f7a58;stroke-opacity:.35}
.twl-pd__units text,.twl-pd__lab text{font:600 14px var(--gft-font-mono);letter-spacing:.05em;fill:#24352f}
.twl-pd__units{opacity:0;transition:opacity 400ms}
.twl-pd__r{stroke:#2f7a58;stroke-width:3;opacity:.16;transition:opacity 500ms,stroke 400ms}
.twl-pd__lab{opacity:0;transition:opacity 400ms}
/* Opaque padded plates separate the two inner labels from all later ring strokes. */
.twl-pd__labelback{fill:var(--ts);opacity:0}
/* Plates switch before the existing label fade, so no ring bleeds through an arriving glyph. */
.twl-path[data-step] .twl-pd__labelback1,.twl-path:is([data-step="1"],[data-step="2"],[data-step="3"]) .twl-pd__labelback2{opacity:1}
.twl-pd__lab path{stroke:#24352f;stroke-width:1.5}
.twl-pd__boundary{stroke:#3f8f6b;stroke-width:10;stroke-linecap:round;opacity:.3;transition:opacity 400ms}
.twl-pd__uticks path{stroke:#2f7a58;stroke-width:2}
.twl-pd__uticks{opacity:0;transition:opacity 400ms}
.twl-pd__wedge{fill:#c98a2b;fill-opacity:.3;stroke:#9a641a;stroke-width:2;opacity:0;transition:opacity 400ms}
.twl-pd__sweep{fill:#2c3e7a;fill-opacity:.14;opacity:0;transition:opacity 400ms}
.twl-pd__band{fill:#c98a2b;fill-opacity:.55;stroke:#9a641a;stroke-width:2;opacity:0;transition:opacity 400ms}
.twl-pd__stamp{font:700 14px var(--gft-font-mono);letter-spacing:.12em;fill:#7a4f0f;opacity:0;transition:opacity 400ms}
.twl-pd__leader{stroke:#9a641a;stroke-width:2;stroke-dasharray:5 5;opacity:0;transition:opacity 300ms}
.twl-pd__needle,.twl-pd__alt,.twl-pd__osc{transform-origin:280px 280px}
.twl-pd__needle{--na:-40deg;transform:rotate(var(--na));transition:transform 800ms var(--tease)}
.twl-pd__alt{transform:rotate(var(--alt));opacity:0;transition:opacity 400ms}
.twl-pd__alt path{stroke:#2c3e7a;stroke-width:4;stroke-dasharray:8 7;stroke-linecap:round}
.twl-pd__pin{stroke:#c98a2b;stroke-width:6;stroke-linecap:round}
.twl-pd__hub{fill:#3f8f6b;transition:fill 500ms}
.twl-path[data-step="0"] .twl-pd__boundary{opacity:1}
.twl-path[data-step] .twl-pd__r1,.twl-path[data-step] .twl-pd__lab1{opacity:1}
.twl-path:is([data-step="1"],[data-step="2"],[data-step="3"]) :is(.twl-pd__r2,.twl-pd__lab2,.twl-pd__uticks,.twl-pd__wedge,.twl-pd__units){opacity:1}
.twl-path:is([data-step="2"],[data-step="3"]) :is(.twl-pd__r3,.twl-pd__lab3){opacity:1}
.twl-path[data-step="3"] :is(.twl-pd__r4,.twl-pd__lab4,.twl-pd__band,.twl-pd__stamp){opacity:1}
.twl-path:is([data-step="2"],[data-step="3"]) .twl-pd__wedge{opacity:.45}
.twl-path[data-step="2"] :is(.twl-pd__sweep,.twl-pd__alt){opacity:1}
.twl-path[data-step="0"] .twl-pd__leader1,.twl-path[data-step="1"] .twl-pd__leader2{opacity:1}
.twl-path[data-step="1"] .twl-pd__needle{--na:15deg}
.twl-path:is([data-step="2"],[data-step="3"]) .twl-pd__needle{--na:60deg}
.twl-path[data-step="3"] .twl-pd__hub{fill:var(--tn)}
.twl-pd__ghost{position:absolute;z-index:1;width:220px;height:220px;left:calc(var(--D) * .76 + 40px);top:calc(var(--D) * .12);overflow:visible;opacity:0;transform:translateX(-200px) scale(.4);transition:opacity 500ms,transform 760ms var(--tease)}
.twl-path[data-step="2"] .twl-pd__ghost{opacity:1;transform:none}
.twl-pd__gring{stroke:#2c3e7a;stroke-width:3;stroke-dasharray:8 7;fill:none}
.twl-pd__gpin{stroke:#2c3e7a;stroke-width:5;stroke-linecap:round}
.twl-pd__ghub{fill:#2c3e7a}
.twl-pd__gtext{font:600 14px var(--gft-font-mono);letter-spacing:.06em;fill:#2c3e7a}
.twl-path__iris{position:absolute;z-index:2;top:0;bottom:0;left:-100vw;right:-100vw;background:var(--tn);pointer-events:none;--hx:calc(100vw - 12px + var(--D) * .38);--hy:calc(var(--dtop) + var(--D) * .5288);clip-path:circle(0px at var(--hx) var(--hy));transition:clip-path 1000ms cubic-bezier(.5,0,.25,1)}
.twl-path__iris--ring{background:var(--tol);opacity:0;clip-path:circle(12px at var(--hx) var(--hy));transition:clip-path 1000ms cubic-bezier(.5,0,.25,1),opacity 160ms}
.twl-path[data-iris] .twl-path__iris{clip-path:circle(125vmax at var(--hx) var(--hy))}
.twl-path[data-iris] .twl-path__iris--ring{opacity:1;clip-path:circle(calc(125vmax + 12px) at var(--hx) var(--hy))}
.twl-path[data-iris] :is(.twl-path__head,.twl-path__prog,.twl-path__sig){opacity:0}
.twl-path__apq{--fw:min(1440px,100vw - 96px);--adx:calc(var(--D) * .38 - 12px - var(--fw) / 2);--ady:calc(var(--dtop) + var(--D) * .5288 - 50svh);position:absolute;z-index:3;left:50%;top:50%;display:grid;justify-items:center;gap:18px;width:min(980px,92%);text-align:center;transform:translate(calc(-50% + var(--adx)),calc(-50% + var(--ady))) scale(.2);opacity:0;pointer-events:none;transition:opacity 260ms 0s,transform 900ms cubic-bezier(.5,0,.25,1) 0s}
.twl-path[data-iris] .twl-path__apq{opacity:1;transform:translate(-50%,-50%);transition:opacity 360ms 60ms,transform 1000ms cubic-bezier(.5,0,.25,1) 0s}
.twl-path__apqk{font:15px var(--gft-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tlab)}
.twl-path__apqh{font:850 clamp(2.2rem,3.4vw,3.1rem)/1.05 var(--gft-font-display);letter-spacing:-.045em;color:#fff;max-width:none}
.twl-path__apqrow{display:flex;align-items:center;justify-content:center;gap:36px;margin-top:12px}
.twl-path__apqc{display:grid;justify-items:center;gap:10px}
.twl-path__apqc b{font:800 30px/1 var(--gft-font-display);color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.twl-path__apqc--res{grid-auto-flow:column;align-items:center;gap:20px;align-self:center;padding-bottom:40px}
.twl-path__apqc--res span{font:300 64px/1 var(--gft-font-display);color:var(--tlab)}
.twl-path__apqc--res b{font-size:clamp(3.2rem,5vw,4.6rem);letter-spacing:-.05em;color:var(--tol)}
.twl-path__apqf{width:168px;height:168px;overflow:visible}
.twl-path__apqf circle{fill:#0b3f3c;stroke:#6bb68f;stroke-opacity:.6;stroke-width:2}
.twl-path__apqf>path{stroke:#6bb68f;stroke-opacity:.5;stroke-width:4;stroke-linecap:round}
.twl-path__apqpin{stroke:var(--tol);stroke-width:5;stroke-linecap:round}
.twl-path__apqf text{font:900 64px var(--gft-font-display);fill:#e6efe9}
.twl-path__apqcap{font-size:18px;line-height:1.55;color:var(--tbody);max-width:52ch}
.twl-path__prog{position:absolute;z-index:2;right:0;top:clamp(28px,5svh,52px);display:grid;justify-items:end;gap:12px;transition:opacity 400ms}
.twl-path__num{font:500 22px var(--gft-font-mono);color:var(--tmute)}
.twl-path__num b{font-size:22px;color:var(--tink)}
.twl-path__btns{display:flex;gap:6px}
.twl-path__btns button{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:6px 14px;border:1px solid #2f7a58;background:transparent;color:var(--tink);font:600 15px var(--gft-font-display)}
.twl-path__btns b{font:600 14px var(--gft-font-mono)}
.twl-path__btns [aria-pressed=true]{background:var(--tink);color:#fff;border-color:var(--tink)}
.twl-path__sig{position:absolute;z-index:2;right:0;top:calc(clamp(28px,5svh,52px) + 112px);width:min(420px,40%);padding:12px 16px;border-left:4px solid var(--to);background:#fff;text-align:left;transition:opacity 400ms}
.twl-path__sigk{display:block;font:13px var(--gft-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tmute)}
.twl-path__sig output{display:block;margin-top:4px;font:700 22px/1.25 var(--gft-font-display);color:var(--tink);letter-spacing:-.02em}
.twl-path__track{list-style:none;margin:-100svh 0 0;padding:0;position:relative;z-index:2;pointer-events:none}
.twl-step{position:relative;height:80svh}
.twl-step:first-child{height:100svh}
.twl-step:nth-child(3){height:100svh}
/* Keep the outgoing question and Calculation card below the controls until their fade completes.
   Extend native sticky containment, cancelling the extra height so the following steps do not move. */
@media(min-width:761px){
 .twl-step:is(:first-child,:nth-child(3)){height:200svh;margin-bottom:-100svh}
 /* Clear the complete outgoing dial before either iris layer expands. On reversal, close the iris first. */
 .twl-path__dial{transition:opacity 180ms 1000ms}
 .twl-path[data-iris] .twl-path__dial{opacity:0;transition-delay:0s}
 .twl-path[data-iris] .twl-path__iris{transition-delay:180ms}
 .twl-path[data-iris] .twl-path__apq{transition:opacity 360ms 240ms,transform 1000ms cubic-bezier(.5,0,.25,1) 180ms}
}
.twl-step:last-child{height:190svh}
.twl-step__in{position:sticky;top:var(--ct);margin-top:var(--ct);width:min(600px,calc(100% - 96px));margin-left:calc(var(--tcl) + min(1440px, 100% - 96px) - min(600px, 100% - 96px) - 40px);pointer-events:auto;opacity:0;transition:opacity 380ms}
.twl-step[data-active] .twl-step__in{opacity:1}
.twl-step:nth-child(n+3) .twl-step__in{top:calc(100svh - 250px);margin-top:0;width:calc(min(1440px, 100% - 96px) - 540px);margin-left:calc(var(--tcl) + 540px)}
.twl-card{position:relative;padding:26px 30px;background:#fff;border:1px solid #2f7a5840;box-shadow:0 18px 50px #0e4d4a1f}
.twl-card::before{content:'';position:absolute;left:-96px;top:130px;width:96px;border-top:2px dashed #9a641a}
.twl-step:nth-child(n+3) .twl-card{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);column-gap:32px}
.twl-step:nth-child(n+3) .twl-card::before{left:-48px;top:50%;width:48px}
.twl-card__k{font:600 14px var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tmute)}
.twl-card__k b{color:#9a641a}
.twl-card h3{margin-top:10px;font-size:26px;line-height:1.15;letter-spacing:-.03em}
.twl-card__t{margin-top:12px;font-size:18px;line-height:1.6;color:#24352f}
.twl-step:nth-child(n+3) .twl-card__t{grid-column:2;grid-row:1/3;margin-top:0}
.twl-path__end{position:absolute;left:0;right:0;bottom:0;height:90svh;pointer-events:none}
.twl-path[data-iris] .twl-step__in{opacity:0}
/* entrance: the tick ring turns in, then the needle swings to the owner tick and ring 1 draws */
:root[data-m-go] .twl-path:not([data-twl-on]) .twl-pd__tickin{opacity:.3;transform:rotate(-40deg) scale(.9)}
:root[data-m-go] .twl-path[data-twl-on] .twl-pd__tickin{animation-name:twl-tickin;animation-duration:560ms;animation-timing-function:var(--tease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes twl-tickin{from{opacity:.3;transform:rotate(-40deg) scale(.9)}}
:root[data-m-go] .twl-path[data-twl-on] .twl-pd__needle{animation-name:twl-swing0;animation-duration:520ms;animation-delay:380ms;animation-timing-function:var(--tease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .twl-path:not([data-twl-on]) .twl-pd__r1{transform:scale(.4);opacity:.2}
.twl-pd__r1{transform-box:fill-box;transform-origin:center}
:root[data-m-go] .twl-path[data-twl-on] .twl-pd__r1{animation-name:twl-ring;animation-duration:520ms;animation-delay:420ms;animation-timing-function:var(--tease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes twl-ring{from{transform:scale(.4);opacity:.2}}
/* lives: the tick ring turns slowly; in step 3 the two needles oscillate between the cases */
:root[data-m-go] .twl-pd[data-m-on] .twl-pd__ticks{animation-name:twl-turn;animation-duration:720s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal}
@keyframes twl-turn{to{transform:rotate(360deg)}}
:root[data-m-go] .twl-path[data-step="2"] .twl-pd[data-m-on] .twl-pd__osc{animation-name:twl-osc;animation-duration:1.9s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
:root[data-m-go] .twl-path[data-step="2"] .twl-pd[data-m-on] .twl-pd__osc--alt{animation-delay:-.95s}
@keyframes twl-osc{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}

/* ---------- 5. interlude: A x P x Q ---------- */
.twl-oee{padding:64px 0 96px;overflow:clip;--m-particle:170,220,196}
.twl-oee__atmos{position:absolute;inset:0;background-image:linear-gradient(#b4d4c50d 1px,transparent 1px),linear-gradient(90deg,#b4d4c50d 1px,transparent 1px);background-size:96px 96px;pointer-events:none;overflow-anchor:none}
.twl-oee__in{position:relative}
.twl-oee__head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:end}
.twl-oee__head h2{max-width:22ch;font-size:clamp(2.4rem,3.5vw,3.1rem)}
.twl-oee__cap{font-size:17px;line-height:1.6;color:var(--tbody);max-width:52ch}
.twl-oee__faces{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:32px;align-items:start}
.twl-oee__f{display:grid;justify-items:center;text-align:center;gap:8px;min-width:0}
.twl-oee__svg{width:min(196px,100%);aspect-ratio:1;overflow:visible;touch-action:none;cursor:grab}
.twl-oee__f--res .twl-oee__svg{cursor:default}
.twl-oee__bg{fill:#0b3f3c;stroke:#6bb68f;stroke-opacity:.5;stroke-width:2}
.twl-oee__bg--res{fill:#0e4d4a;stroke:var(--tol);stroke-opacity:.9;stroke-width:3}
.twl-oee__track{stroke:#6bb68f;stroke-opacity:.5;stroke-width:6;stroke-linecap:round}
.twl-oee__tick{stroke:#cfe3d8;stroke-opacity:.7;stroke-width:2.5}
.twl-oee__letter{font:900 132px var(--gft-font-display);fill:#e6efe9;fill-opacity:.9;transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(var(--s,1));transition:transform 420ms var(--tease)}
.twl-oee__needle{transform:rotate(var(--a,0deg));transition:transform 420ms var(--tease)}
.twl-oee__pin{stroke:var(--tol);stroke-width:6;stroke-linecap:round}
.twl-oee__hub{fill:#6bb68f}
.twl-oee__v{font:800 36px/1.1 var(--gft-font-display);color:#fff;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.twl-oee__lab{font-size:16px;line-height:1.45;color:var(--tbody);max-width:30ch;min-height:2.9em}
.twl-oee__lab strong{color:#fff}
.twl-oee__f input{width:100%;height:36px;margin:4px 0 0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;accent-color:#e0a64a}
.twl-oee__f input::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:#cfe3d8}
.twl-oee__f input::-moz-range-track{height:8px;border-radius:4px;background:#cfe3d8}
.twl-oee__f input::-moz-range-progress{height:8px;border-radius:4px;background:#e0a64a}
.twl-oee__f input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;margin-top:-11px;border-radius:50%;background:#e0a64a;border:4px solid var(--tn);box-shadow:0 0 0 2px #e0a64a}
.twl-oee__f input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#e0a64a;border:4px solid var(--tn);box-shadow:0 0 0 2px #e0a64a}
.twl-oee__f input:focus-visible{outline:3px solid #fff;outline-offset:4px}
.twl-oee__scale{display:flex;justify-content:space-between;gap:8px;width:100%;font:13px var(--gft-font-mono);letter-spacing:.04em;color:var(--tlab)}
.twl-oee__scale i{font-style:normal}
.twl-oee__eq{font:15px var(--gft-font-mono);letter-spacing:.06em;color:var(--tlab)}
.twl-oee__res{font:850 clamp(4rem,6.6vw,6rem)/1 var(--gft-font-display);letter-spacing:-.06em;color:#fff;font-variant-numeric:tabular-nums}
.twl-oee__reset{display:inline-flex;align-items:center;gap:10px;min-height:52px;margin-top:6px;padding:8px 20px;background:var(--tol);border:0;color:var(--tn);font:700 16px var(--gft-font-display);cursor:pointer}
.twl-oee__reset span{font-size:20px}
.twl-oee__reset:focus-visible{outline:3px solid #fff;outline-offset:3px}
.twl-oee__loss{margin-top:32px}
.twl-oee__barwrap{transform-origin:50% 100%}
.twl-oee__bar{position:relative;height:40px;overflow:hidden;background:#ffffff14}
.twl-oee__seg{position:absolute;inset:0;transform-origin:0 50%;transform:translateX(calc(var(--x) * 100%)) scaleX(var(--w));transition:transform 420ms var(--tease)}
.twl-oee__seg--oee{background:#6bb68f}.twl-oee__seg--q{background:#e0a64a}.twl-oee__seg--p{background:#8fa3ff}.twl-oee__seg--a{background:#c5d8cc}
.twl-oee__legend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;list-style:none;margin:16px 0 0;padding:0}
.twl-oee__legend li{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:17px;color:var(--tbody)}
.twl-oee__legend b{font:800 26px var(--gft-font-display);color:#fff;font-variant-numeric:tabular-nums}
.twl-oee__foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:28px}
.twl-oee__cap2{flex:1 1 460px;font-size:17px;line-height:1.6;color:var(--tbody);max-width:64ch}
.twl-oee__foot .gft-button{font-size:16px}
/* entrance: iris from the hub point, then the needles sweep and the loss bar grows from the left */
:root[data-m-go] .twl-oee:not([data-twl-on]) .twl-oee__needle{transform:rotate(-120deg)}
:root[data-m-go] .twl-oee[data-twl-on] .twl-oee__needle{animation-name:twl-spin;animation-duration:560ms;animation-delay:calc(380ms + var(--n,0) * 60ms);animation-timing-function:var(--tease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes twl-spin{from{transform:rotate(-120deg)}}
.twl-oee__f:nth-child(2){--n:1}.twl-oee__f:nth-child(3){--n:2}.twl-oee__f:nth-child(4){--n:3}
:root[data-m-go] .twl-oee:not([data-twl-on]) .twl-oee__letter{transform:scaleY(.05)}
:root[data-m-go] .twl-oee[data-twl-on] .twl-oee__letter{animation-name:twl-letter;animation-duration:600ms;animation-delay:calc(300ms + var(--n,0) * 60ms);animation-timing-function:var(--tease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes twl-letter{from{transform:scaleY(.05)}}
:root[data-m-go] .twl-oee:not([data-twl-on]) .twl-oee__bar{clip-path:inset(0 85% 0 0)}
:root[data-m-go] .twl-oee[data-twl-on] .twl-oee__bar{animation-name:twl-bar;animation-duration:520ms;animation-delay:400ms;animation-timing-function:var(--tease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes twl-bar{from{clip-path:inset(0 85% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* hand-over 5 to 6: the loss bar narrows to a rule and sinks toward the limits baseline */
@supports (animation-timeline:view()){
 :root[data-m-go] .twl-oee__barwrap{animation-name:twl-narrow;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range-start:cover 62%;animation-range-end:cover 96%}
}
@keyframes twl-narrow{from{transform:none}to{transform:scaleY(.12)}}

/* ---------- 6. limits: faces on four bases ---------- */
.twl-lim{padding:96px 0 120px;overflow:clip}
.twl-lim__base{position:absolute;top:0;left:var(--tcl);width:min(1440px,calc(100% - 96px));height:4px;display:flex}
.twl-lim__base i:nth-child(1){flex:777}.twl-lim__base i:nth-child(2){flex:24}.twl-lim__base i:nth-child(3){flex:79}.twl-lim__base i:nth-child(4){flex:120}
.twl-lim__head{margin-bottom:40px}
.twl-b .twl-lim__head h2{max-width:26ch}
.twl-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid #cfe3d8}
.twl-seg__tab{display:flex;align-items:center;justify-content:center;gap:12px;min-height:64px;padding:8px 14px;background:transparent;border:0;border-right:1px solid #cfe3d8;color:#fff;font:600 18px var(--gft-font-display);transition:background-color 220ms,color 220ms}
.twl-seg__tab:last-child{border-right:0}
.twl-seg__tab b{font:600 15px var(--gft-font-mono)}
.twl-seg__tab[aria-selected=true]{background:var(--to);color:var(--tn)}
.twl-seg__tab:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.twl-seg__face{width:40px;height:40px;flex-shrink:0}
.twl-seg__face circle:first-child{fill:none;stroke:currentColor;stroke-width:2.5}
.twl-seg__face path{stroke:currentColor;stroke-width:3;stroke-linecap:round}
.twl-seg__face circle:last-child{fill:currentColor}
.twl-lim__stage{display:grid;margin-top:28px}
.twl-pane{grid-area:1/1;display:grid;grid-template-columns:minmax(0,64fr) minmax(0,36fr);gap:48px;align-items:start;visibility:hidden;opacity:0;transition:opacity 300ms,visibility 0s 300ms}
.twl-pane[data-sel]{visibility:visible;opacity:1;transition:opacity 300ms}
.twl-pane__over{display:flex;align-items:center;gap:10px;font:16px var(--gft-font-mono);letter-spacing:.04em;color:var(--tlab)}
.twl-pane__dot{width:10px;height:10px;border-radius:50%;background:var(--tol)}
.twl-pane__over output{color:#fff}
.twl-pane__svg{display:block;width:100%;height:auto;max-height:min(420px,48svh);margin-top:12px;overflow:visible}
.twl-cmp__base{stroke:var(--tol);stroke-width:5}
.twl-cmp__stem{stroke:#cfe3d8;stroke-width:4}
.twl-cmp__tick{stroke:#cfe3d8;stroke-width:3}
.twl-cmp__hg{transform-box:fill-box;transform-origin:50% 50%;transition:transform 320ms var(--tease)}
.twl-cmp[data-hot] .twl-cmp__hg{transform:scale(1.18)}
.twl-cmp[data-hot] .twl-cmp__stem{stroke:var(--tol)}
.twl-cmp__head{fill:#0b3f3c;stroke:#8fd1af;stroke-width:3;transition:stroke 200ms}
.twl-cmp__pin{stroke:var(--tol);stroke-width:6;stroke-linecap:round}
.twl-cmp__hub{fill:#8fd1af}
.twl-cmp{transition:transform 720ms var(--tease)}
.twl-cmp[data-hot] .twl-cmp__head{stroke:var(--tol);stroke-width:5}
.twl-pane[data-on] .twl-cmp{transform:translateY(var(--dy))}
.twl-cmp__bracket,.twl-cmp__common{stroke:#8fd1af;stroke-width:3;opacity:0;transition:opacity 400ms}
.twl-cmp__common{stroke-dasharray:6 6}
.twl-pane[data-on] :is(.twl-cmp__bracket,.twl-cmp__common){opacity:1}
.twl-cmp__labs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;margin-top:8px;gap:12px}
.twl-cmp__lab{display:grid;align-content:start;gap:4px;min-height:64px;padding:10px 6px 6px;background:transparent;border:0;border-top:3px solid var(--tol);color:#fff;font:700 17px/1.3 var(--gft-font-display);text-align:center;cursor:pointer;transition:background-color 200ms}
.twl-cmp__lab span{font:500 14px/1.4 var(--gft-font-mono);color:var(--tlab)}
.twl-cmp__lab:hover{background:#ffffff12}
.twl-cmp__lab:focus-visible{outline:3px solid #fff;outline-offset:2px}
.twl-cmp__read{margin-top:14px;font:600 18px/1.4 var(--gft-font-display);color:#fff}
.twl-sens__axis{font:600 15px var(--gft-font-mono);letter-spacing:.08em;fill:var(--tlab)}
.twl-sens__tick{font:15px var(--gft-font-mono);fill:var(--tlab)}
.twl-sens__grid{stroke:#cfe3d8;stroke-opacity:.18}
.twl-sens__band{fill:#8fa3ff;fill-opacity:.2;transform-box:fill-box;transform-origin:50% 50%;transform:scaleY(var(--u,.4));transition:transform 300ms var(--tease)}
.twl-sens__pref{stroke:#8fd1af;stroke-width:4}
.twl-sens__alt{stroke:var(--tol);stroke-width:4;stroke-dasharray:10 7;opacity:0;transition:opacity 400ms}
.twl-sens__lab{font:600 14px var(--gft-font-mono);letter-spacing:.06em;fill:#e6efe9}
.twl-sens__lab--alt{fill:var(--tol);opacity:0;transition:opacity 400ms}
.twl-pane[data-on] :is(.twl-sens__alt,.twl-sens__lab--alt){opacity:1}
.twl-sens__probe{fill:var(--tol)}
.twl-eff__ring{fill:none;stroke:#cfe3d8;stroke-width:3;transform-box:fill-box;transform-origin:center}
.twl-eff__fill{fill:var(--tol);opacity:.15;transition:opacity 400ms}
.twl-eff__tick{stroke:var(--tn);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:0;transition:opacity 400ms}
.twl-eff__lab{font:600 15px var(--gft-font-mono);letter-spacing:.05em;fill:#e6efe9}
.twl-eff__thread{stroke:#cfe3d8;stroke-width:2;stroke-dasharray:4 6}
.twl-pane[data-on] .twl-eff__fill{opacity:.95}
.twl-pane[data-on] .twl-eff__tick{opacity:1}
:root[data-m-go] .twl-pane:not([data-on]) .twl-pane__svg[data-m-on] .twl-eff__fill{animation-name:twl-fill;animation-duration:2.4s;animation-delay:calc(var(--j,0) * .8s);animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:normal}
@keyframes twl-fill{0%,100%{opacity:.15}35%,55%{opacity:.8}}
.twl-pane__k{font:600 15px var(--gft-font-mono);letter-spacing:.08em;text-transform:uppercase;color:#f6d79a}
.twl-pane__copy h3{margin-top:10px;font-size:36px;color:#fff}
.twl-pane__t{margin-top:16px;font-size:20px;line-height:1.6;color:#f2f7f4}
.twl-unc{margin-top:22px;display:grid;gap:8px}
.twl-unc label{font-size:17px;color:#f2f7f4}
.twl-unc input{width:100%;accent-color:#e0a64a}
.twl-unc__pair{display:flex;justify-content:space-between;font-size:16px;color:var(--tlab)}
.twl-unc__pair b{display:block;font:800 28px var(--gft-font-display);color:#fff;font-variant-numeric:tabular-nums}
.twl-toggle{margin-top:24px;min-height:52px;padding:10px 20px;background:transparent;border:1px solid #fff;color:#fff;font:600 18px var(--gft-font-display)}
.twl-toggle[aria-pressed=true]{background:#fff;color:var(--tn)}
.twl-lim__drops{position:absolute;left:var(--tcl);width:min(1440px,calc(100% - 96px));bottom:0;height:96px;display:grid;grid-template-columns:repeat(3,1fr);pointer-events:none}
.twl-lim__drops i{justify-self:center;width:0;height:100%;border-left:2px dashed #cfe3d8;opacity:.55}
/* entrance: the stage opens from the tab line, then the stems beat up onto their bases */
:root[data-m-go] .twl-lim:not([data-twl-on]) .twl-lim__stage{clip-path:inset(0 0 70% 0)}
:root[data-m-go] .twl-lim[data-twl-on] .twl-lim__stage{animation-name:twl-shed;animation-duration:480ms;animation-delay:80ms;animation-timing-function:var(--tease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes twl-shed{from{clip-path:inset(0 0 70% 0)}to{clip-path:inset(0 0 0 0)}}
.twl-cmp__stem{transform-box:fill-box;transform-origin:50% 100%}
:root[data-m-go] .twl-lim:not([data-twl-on]) .twl-cmp__stem{transform:scaleY(.15)}
:root[data-m-go] .twl-lim[data-twl-on] .twl-cmp__stem{animation-name:twl-rise;animation-duration:460ms;animation-delay:calc(400ms + var(--j,0) * 60ms);animation-timing-function:var(--tease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
.twl-cmp[data-j="1"]{--j:1}.twl-cmp[data-j="2"]{--j:2}.twl-cmp[data-j="3"]{--j:3}

/* ---------- 7. programme: three stations on the route ---------- */
.twl-prog{padding:16px 0 120px;overflow:clip}
.twl-route__pick{font:14px var(--gft-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tlab);text-align:center;margin-top:24px}
.twl-route{position:relative;padding-top:20px}
.twl-route__line{position:absolute;left:calc(100% / 6);right:0;top:calc(20px + 84px);height:3px;pointer-events:none}
.twl-route__ink{position:absolute;inset:0;background:#cfe3d8;opacity:.75;transform-origin:0 50%}
.twl-route__flow{position:absolute;inset:-2px 0;background:linear-gradient(90deg,transparent 0,var(--tol) 5%,transparent 10%);opacity:0}
.twl-route__down{position:absolute;right:0;top:0;width:3px;height:2400px;background:var(--tol)}
.twl-route__st{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.twl-route__st li{display:flex;justify-content:center}
.twl-st{display:grid;justify-items:center;gap:6px;width:min(300px,100%);padding:0 0 14px;background:transparent;border:0;color:#fff;text-align:center;cursor:pointer}
.twl-st__face{width:168px;height:168px;overflow:visible;transition:transform 300ms var(--tease)}
.twl-st__bg{fill:#0b3f3c}
.twl-st__ring{fill:none;stroke:#cfe3d8;stroke-width:3}
.twl-st__ring--in{stroke-opacity:.4}
.twl-st__tick{stroke:#cfe3d8;stroke-width:3}
.twl-st__needle{transform:rotate(var(--a,0deg))}
.twl-st__pin{stroke:var(--tol);stroke-width:6;stroke-linecap:round}
.twl-st__hub{fill:#8fd1af}
.twl-st[aria-pressed=true] .twl-st__ring{stroke:var(--tol);stroke-width:5}
.twl-st[aria-pressed=true] .twl-st__face{transform:scale(1.08)}
.twl-st:hover .twl-st__face{transform:scale(1.04)}
.twl-st[aria-pressed=true] .twl-st__lab{color:#f6d79a}
.twl-st[aria-pressed=true] .twl-st__bg{fill:#0e4d4a}
.twl-st:focus-visible{outline:3px solid #fff;outline-offset:4px}
.twl-st__no{font:600 15px var(--gft-font-mono);color:#f6d79a}
.twl-st__lab{font:700 18px var(--gft-font-display)}
.twl-st__sum{font-size:15px;line-height:1.45;color:var(--tlab);max-width:30ch}
.twl-prog__low{margin-top:40px}
.twl-b .twl-prog__head h2{max-width:none}
.twl-route__panel{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"big body nav" "big body acts";align-items:start;gap:16px 48px;margin-top:32px;padding:40px 48px;background:#0b3f3c;border:1px solid #cfe3d850;border-top:4px solid var(--tol)}
.twl-route__body{grid-area:body}
.twl-route__nav{grid-area:nav;display:flex;align-items:center;justify-content:flex-end;gap:12px}
.twl-route__step{width:56px;height:56px;background:transparent;border:1px solid var(--tlab);color:#fff;font-size:22px;cursor:pointer}
.twl-route__step:hover{background:#ffffff14}
.twl-route__step:focus-visible{outline:3px solid #fff;outline-offset:3px}
.twl-route__pos{font:16px var(--gft-font-mono);letter-spacing:.04em;color:var(--tlab);white-space:nowrap}
.twl-route__pos b{color:#fff}
.twl-route__big{grid-area:big;font:900 160px/.82 var(--gft-font-display);letter-spacing:-.06em;color:var(--tol);font-variant-numeric:tabular-nums}
.twl-route__k{font:600 15px var(--gft-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tlab)}
.twl-route__body h3{margin-top:8px;font-size:38px;color:#fff}
.twl-route__text{margin-top:12px;font-size:19px;line-height:1.6;color:var(--tbody)}
.twl-route__acts{grid-area:acts;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px;align-self:end}
.twl-route__acts .gft-button{font-size:16px}
.twl-route__wait{font:15px var(--gft-font-mono);color:var(--tlab)}
.twl-route__more{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:36px;max-width:calc(100% - 40px)}
.twl-route__more p{flex:0 0 100%;font-size:17px;line-height:1.6;color:var(--tbody);max-width:76ch}
/* entrance: the route line sweeps left to right, the station faces are picked up from small */
:root[data-m-go] .twl-prog:not([data-twl-on]) .twl-route__ink{transform:scaleX(.08)}
:root[data-m-go] .twl-prog[data-twl-on] .twl-route__ink{animation-name:twl-rule;animation-duration:520ms;animation-timing-function:var(--tease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .twl-prog:not([data-twl-on]) .twl-st__face{transform:scale(.6);opacity:.5}
:root[data-m-go] .twl-prog[data-twl-on] .twl-st__face{animation-name:twl-pick;animation-duration:560ms;animation-delay:calc(280ms + var(--i,0) * 70ms);animation-timing-function:var(--tease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes twl-pick{from{transform:scale(.6);opacity:.5}}
:root[data-m-go] .twl-prog:not([data-twl-on]) :is(.twl-prog__low,.twl-route__more){opacity:.55;transform:translateY(18px)}
:root[data-m-go] .twl-prog[data-twl-on] :is(.twl-prog__low,.twl-route__more){animation-name:twl-up55b;animation-duration:640ms;animation-delay:60ms;animation-timing-function:var(--tease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
/* lives: a glint flows along the route toward the selected station, whose needle breathes */
.twl-route{--to-at:.2}
.twl-route[data-at="1"]{--to-at:.55}
.twl-route[data-at="2"]{--to-at:.9}
:root[data-m-go] .twl-route[data-m-on] .twl-route__flow{animation-name:twl-flow;animation-duration:3.2s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal}
@keyframes twl-flow{0%{opacity:0;transform:translateX(-10%)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(calc(var(--to-at) * 100% - 20%))}}
:root[data-m-go] .twl-route[data-m-on] .twl-st[aria-pressed=true] .twl-st__breathe{animation-name:twl-sway;animation-duration:2.6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}

/* ---------- 8. closing: the patch panel ---------- */
.twl-close{padding:72px 0 0;overflow:clip}
.twl-close__in{position:relative;z-index:2}
.twl-b .twl-close__h{max-width:none;font-size:clamp(2.2rem,3.4vw,3.1rem);line-height:1.14}
.twl-close__h .gft-serif{color:#8fd1af;font-size:1.04em}
/* The title and its wind wrapper follow their own kit visibility, independently of the wall's stage trigger.
   A prepared drop mask must stay entirely transparent until its own entrance starts. */
:root[data-m-go] .twl-close:not([data-twl-on]) :is(.twl-close__in,.twl-close__h .m-c){animation-play-state:running!important}
:root[data-m-go] .twl-close__h:not([data-m-in]) .m-c{opacity:0}
/* A short whole-word drop keeps the italic overhang intact in intermediate frames as well as the final still. */
.twl-close__h .m-w{overflow:visible}
/* The authored break already starts the italic line. The splitter adds a second leading break here;
   suppress only that duplicate so the animated words stay inside the heading's reserved height. */
.twl-close__h .gft-serif>.m-br:first-child{display:none}
:root[data-m-go] .twl-close__h[data-m=split][data-m-fx=drop][data-m-in] .m-c{animation-name:twl-close-title}
@keyframes twl-close-title{from{translate:0 -.15em;opacity:0}to{translate:0 0;opacity:1}}
.twl-close__grid{display:grid;grid-template-columns:minmax(0,60fr) minmax(0,40fr);gap:64px;margin-top:64px;padding-bottom:104px}
/* Keep flying faces below the heading, with room for selected faces and focus outlines in the final state. */
.twl-close__wall{display:grid;grid-template-columns:repeat(6,minmax(0,112px));gap:16px;align-content:start;justify-content:start;clip-path:inset(-32px)}
.twl-cf{position:relative;aspect-ratio:1;padding:0;border:0;background:none;cursor:pointer;transition:transform 320ms var(--tease)}
.twl-cf svg{display:block;width:100%;height:100%;overflow:visible}
.twl-cf:hover{transform:translateY(-4px)}
.twl-cf[data-sel]{z-index:2;transform:scale(1.25)}
.twl-cf[data-sel] .twl-f__bg{fill:#0e4d4a;stroke:var(--tol);stroke-opacity:1;stroke-width:5}
.twl-cf:focus-visible{outline:3px solid #fff;outline-offset:3px}
.twl-cf__station{fill:none;stroke:#8fd1af;stroke-width:4;stroke-dasharray:6 6}
.twl-close__panel{display:flex;flex-direction:column;gap:24px;min-width:0}
.twl-jacks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.twl-jack{display:grid;justify-items:center;gap:6px;padding:6px 0;background:transparent;border:0;color:#fff;cursor:pointer}
.twl-jack__sock{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:3px solid var(--fd);background:#0b3f3c;transition:background-color 200ms}
.twl-jack__sock i{width:16px;height:16px;border-radius:50%;background:#072d2b;border:2px solid var(--fd)}
.twl-jack[aria-pressed=true] .twl-jack__sock{background:var(--fd)}
.twl-jack[aria-pressed=true] .twl-jack__sock i{background:var(--tol);border-color:var(--tn)}
.twl-jack__name{font:600 16px var(--gft-font-display)}
.twl-jack__n{font:600 15px var(--gft-font-mono);color:var(--tlab)}
.twl-jack:focus-visible{outline:3px solid #fff;outline-offset:2px}
.twl-close__row{display:grid;grid-template-columns:56px minmax(0,1fr) 56px;gap:8px}
.twl-close__step{min-height:56px;background:transparent;border:1px solid var(--tlab);color:#fff;font-size:22px}
.twl-close__sel select{width:100%;min-height:56px;padding:8px 14px;border:1px solid var(--tlab);border-radius:0;background:#0b3f3c;color:#fff;font:600 18px var(--gft-font-display)}
.twl-close__title{font:850 44px/1.06 var(--gft-font-display);letter-spacing:-.045em;color:#fff}
.twl-close__meta{margin-top:10px;font:16px var(--gft-font-mono);letter-spacing:.04em;color:var(--tlab)}
.twl-close__open{margin-top:20px;min-height:56px;font-size:18px;max-width:100%}
.twl-close__note{margin-top:16px;font-size:17px;line-height:1.55;color:var(--tbody);max-width:44ch}
.twl-close__thread{position:absolute;left:0;top:0;width:100%;z-index:3;pointer-events:none;overflow:visible}
.twl-close__wire{fill:none;stroke:var(--to);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.twl-close__glint{fill:none;stroke:#ffd88f;stroke-width:5;stroke-linejoin:round;stroke-linecap:round;clip-path:inset(0 0 92% 0)}
/* entrance: the 21 missing faces fly back round the three stations, then the patch thread draws down */
:root[data-m-go] .twl-close:not([data-twl-on]) .twl-cf:not([data-station]) svg{opacity:.25;transform:translate(calc(var(--fx) * 70px),calc(var(--fy) * 70px)) scale(.55)}
:root[data-m-go] .twl-close[data-twl-on] .twl-cf:not([data-station]) svg{animation-name:twl-fly;animation-duration:520ms;animation-delay:calc(var(--i,0) * 7ms);animation-timing-function:var(--tease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes twl-fly{from{opacity:.25;transform:translate(calc(var(--fx) * 70px),calc(var(--fy) * 70px)) scale(.55)}}
:root[data-m-go] .twl-close:not([data-twl-on]) .twl-close__wire{clip-path:inset(0 0 86% 0)}
:root[data-m-go] .twl-close[data-twl-on] .twl-close__wire{animation-name:twl-down;animation-duration:520ms;animation-delay:400ms;animation-timing-function:var(--tease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes twl-down{from{clip-path:inset(0 0 86% 0)}to{clip-path:inset(0 0 0 0)}}
:root[data-m-go] .twl-close:not([data-twl-on]) .twl-close__panel>*{opacity:.3;transform:translateX(24px)}
:root[data-m-go] .twl-close[data-twl-on] .twl-close__panel>*{animation-name:twl-side;animation-duration:560ms;animation-delay:calc(200ms + var(--p,0) * 70ms);animation-timing-function:var(--tease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes twl-side{from{opacity:.3;transform:translateX(24px)}}
.twl-close__row{--p:1}.twl-close__read{--p:2}
/* live: a glint travels down the patch thread toward the footer */
:root[data-m-go] .twl-close__thread[data-m-on] .twl-close__glint{animation-name:twl-glint;animation-duration:3s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal}
@keyframes twl-glint{from{clip-path:inset(0 0 92% 0)}to{clip-path:inset(92% 0 0 0)}}

/* ---------- rail ---------- */
.twl-rail{display:none;position:fixed;left:2px;top:112px;bottom:96px;width:38px;z-index:30;pointer-events:none;overflow-anchor:none}
.twl-rail__line{position:absolute;left:18px;top:0;bottom:64px;width:2px;background:#3f8f6b55}
.twl-rail__fill{position:absolute;inset:0;background:#3f8f6b;transform-origin:top}
.twl-rail__nodes{list-style:none;margin:0;padding:0}
.twl-rail__nodes li{position:absolute;left:-4px;top:calc(var(--f,0) * 100%);width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--tp);border:2px solid #3f8f6b;transition:background-color 400ms}
.twl-rail__nodes li[data-on]{background:#3f8f6b}
.twl-rail__glyph{position:absolute;left:0;bottom:0;width:38px;height:38px;color:#3f8f6b}
.twl-rail__frame{fill:var(--tp);stroke:#3f8f6b;stroke-width:2}
.twl-rail__glyph g{opacity:0;transition:opacity 300ms}
.twl-rail__glyph g :is(rect,circle){fill:none;stroke:#2f7a58;stroke-width:2}
.twl-rail__glyph g path{stroke:#9a641a;stroke-width:2.5;fill:none}
.twl-rail__glyph g[data-s="1"] rect{fill:#2f7a58}
.twl-rail[data-state="0"] [data-s="0"],.twl-rail[data-state="1"] [data-s="1"],.twl-rail[data-state="2"] [data-s="2"],.twl-rail[data-state="3"] [data-s="3"],.twl-rail[data-state="4"] [data-s="4"],.twl-rail[data-state="5"] [data-s="5"],.twl-rail[data-state="6"] [data-s="6"],.twl-rail[data-state="7"] [data-s="7"]{opacity:1}
@media(min-width:1100px){.twl-rail{display:block}}
@supports (animation-timeline:scroll()){
 :root[data-m-go] .twl-rail__fill{animation-name:twl-railfill;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(root block)}
}
@keyframes twl-railfill{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ---------- tablet ---------- */
@media(max-width:1100px){
 .twl-con__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"count" "banks" "head" "read" "filter" "cap"}
 .twl-con__banks{margin-top:24px}
 .twl-oee__faces{grid-template-columns:repeat(2,minmax(0,1fr))}
 .twl-pane{grid-template-columns:minmax(0,1fr);gap:28px}
 .twl-close__grid{grid-template-columns:minmax(0,1fr);gap:40px}
 .twl-close__wall{grid-template-columns:repeat(6,minmax(0,1fr))}
 .twl-prog__low{grid-template-columns:minmax(0,1fr);gap:28px}
}

/* ---------- phone ---------- */
@media(max-width:760px){
 .twl-b h2{font-size:clamp(1.9rem,8.6vw,2.4rem);max-width:none}
 /* splash: headline and lede on top, the wall as 4 x 6 in its own band, search at the foot */
 .twl .gft-splash h1{font-size:clamp(3rem,15vw,4rem)}
 .twl .gft-splash__lede{font-size:17px;width:auto}
 .twl .gft-splash__content{padding-top:40px;padding-bottom:calc(min(52svh,470px) + 196px)}
 .twl .gft-splash__actions{position:absolute;left:0;right:0;bottom:0;margin:0}
 .twl-hero{width:100%;flex-wrap:wrap}
 .twl-hero input{flex:1 1 100%}
 .twl-hero .gft-button{flex:1 1 100%}
 .twl-hero .gft-button{font-size:16px;padding-inline:14px}
 .twl .gft-splash__structure{inset:auto 0 206px 0;height:min(52svh,470px);overflow:visible;display:block}
 .twl .gft-splash__structure::after{background:none}
 .twl-wall__svg--desk{display:none}
 .twl-wall__svg:not(.twl-wall__svg--ph){display:none}
 .twl-wall__svg--ph{display:block;height:calc(100% - 44px)}
 .twl-wall__phone{display:block;margin-top:10px;padding-inline:20px;font:15px/1.4 var(--gft-font-mono);letter-spacing:.06em;color:var(--tlab);text-align:center}
 /* console: chips in one scrolling row, banks as rows */
 .twl-con{padding:32px 0 96px}
 .twl-con__count{display:flex;align-items:flex-end;gap:16px}
 .twl-con__n{font-size:72px}
 .twl-con__of{font-size:17px;margin:0}
 .twl-con__banks{grid-template-columns:minmax(0,1fr);gap:10px}
 .twl-bank{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 10px;border-top:3px solid var(--fd);padding-top:6px}
 .twl-bank__lab{grid-column:1/-1;border:0;padding:0;font-size:15px}
 .twl-bank__lab b{display:none}
 .twl-bank__faces{grid-template-columns:repeat(8,36px);gap:4px}
 .twl-bank::after{content:attr(data-twl-bank);display:none}
 .twl-bf{width:36px;height:36px}
 .twl-con__name{font-size:20px}
 .twl-filter{margin-top:28px}
 .twl-search,.twl-search input{width:100%}
 .twl-chips{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;width:100%;padding-bottom:4px}
 .twl-chips span{min-height:52px;font-size:16px}
 .twl-filter{padding:18px 16px 20px}
 .twl-filter__top .twl-search{flex-basis:100%}
 .twl-filter__shown{margin-left:0;font-size:17px}
 .twl-filter__shown b{font-size:32px}
 .twl-reset{min-height:52px;margin-left:auto}
 .twl-row__tip{display:none}
 .twl-oee__scale i:nth-child(2){display:none}
 .twl-cmp__lab{font-size:14px;min-height:56px}
 .twl-cmp__lab span{font-size:13px}
 .twl-cmp__read{font-size:16px}
 .twl-chips label{flex:0 0 auto;scroll-snap-align:start}
 .twl-drop{left:20px;width:80px;height:80px}
 .twl-drop__svg{width:80px;height:80px}
 .twl-drop__line{left:39px;height:56px}
 /* register: a pinned band above the drawers */
 .twl-reg{padding-bottom:80px}
 .twl-reg__grid{grid-template-columns:minmax(0,1fr);gap:0}
 .twl-loupe{display:contents}
 .twl-loupe__in{z-index:3;height:auto;min-height:0;display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto auto auto;align-items:start;gap:4px 16px;padding:14px 0 16px;background:var(--tp);border-bottom:2px solid var(--frame)}
 .twl-loupe__stage{--lf:104px;grid-row:1/4;height:112px;margin:0}
 .twl-loupe__open{left:4px;top:4px}
 .twl-loupe__banks,.twl-loupe__q,.twl-loupe__m{display:none}
 .twl-loupe[data-drawer=Systems] .twl-loupe__face{transform:none}
 :root[data-m-go] .twl-loupe__open{animation-name:none}
 .twl-loupe__seq{font-size:15px}
 .twl-loupe__title{font-size:22px;margin:0}
 .twl-loupe__go{margin:4px 0 0;min-height:48px;font-size:16px}
 .twl-reg__list{padding-top:40px}
 .twl-drawer{margin-top:44px}
 .twl-drawer__head h3,.twl-drawer__n{font-size:24px}
 .twl-drawer__bank{display:none}
 .twl-drawer--operations .twl-drawer__rows{grid-template-columns:minmax(0,1fr)}
 .twl-row__a,.twl-drawer--industry .twl-row__a,.twl-drawer--intelligence .twl-row__a,.twl-drawer--systems .twl-row__a{grid-template-columns:40px minmax(0,1fr) auto;grid-template-rows:auto auto;gap:4px 12px;min-height:0;padding:14px 8px;border:0;border-bottom:1px solid #0e4d4a22;background:transparent;position:static}
 .twl-row__g,.twl-drawer--intelligence .twl-row__g,.twl-drawer--systems .twl-row__g{width:40px;height:40px;grid-column:1;grid-row:1/3}
 .twl-row__no,.twl-drawer--intelligence .twl-row__no,.twl-drawer--systems .twl-row__no,.twl-drawer--industry .twl-row__no{display:none}
 .twl-row__t,.twl-drawer--intelligence .twl-row__t,.twl-drawer--systems .twl-row__t{grid-column:2;grid-row:1;font-size:18px}
 .twl-row__q,.twl-drawer--industry .twl-row__q,.twl-drawer--systems .twl-row__q{display:block;grid-column:2;grid-row:2;font-size:15px;line-height:1.5;color:var(--tmute);opacity:1}
 .twl-row__go,.twl-drawer--industry .twl-row__go,.twl-drawer--intelligence .twl-row__go,.twl-drawer--systems .twl-row__go{grid-column:3;grid-row:1/3;position:static}
 .twl-drawer--intelligence .twl-drawer__rows{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
 .twl-drawer--intelligence .twl-row__a{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;border:1px solid #2c3e7a33;background:#fbfbf8;padding:12px}
 .twl-drawer--intelligence .twl-row__t{grid-column:1;grid-row:2;font-size:16px}
 .twl-drawer--intelligence .twl-row__g{grid-row:1}
 .twl-drawer--intelligence .twl-row__q,.twl-drawer--intelligence .twl-row__go{display:none}
 .twl-drawer--resources .twl-drawer__rows{padding:4px 12px}
 .twl-drawer--systems .twl-row__a{border:2px solid var(--fl);background:#fff;padding:16px}
 /* path: the dial pins in a band of 40svh, the cards scroll beneath it */
 .twl-path{--D:min(280px,34svh)}
 .twl-path__stage,.twl-path__frame{display:contents}
 .twl-path__head{position:static;padding:72px 20px 20px}
 .twl-path__dial{position:sticky;top:0;z-index:3;left:auto;width:100%;height:40svh;padding:12px 0;background:var(--ts);display:grid;place-items:center;border-bottom:1px solid #2f7a5840}
 .twl-path__dialmv{width:var(--D);height:var(--D)}
 .twl-path[data-step="2"] .twl-path__dialmv,.twl-path[data-step="3"] .twl-path__dialmv{transform:translateX(-22%) scale(.9)}
 .twl-pd__ghost{width:110px;height:110px;left:auto;right:12px;top:calc(50% - 55px)}
 .twl-path__iris,.twl-path__apq{display:none}
 .twl-path__prog{position:sticky;z-index:4;top:calc(40svh - 60px);margin:-56px 20px 0 auto;width:max-content;justify-items:end;pointer-events:none}
 .twl-path__btns{display:none}
 .twl-path__num{padding:4px 10px;background:var(--ts);font-size:20px}
 .twl-path__sig{display:none}
 .twl-path__track{margin:0;padding:20px 0 64px;pointer-events:auto}
 .twl-step,.twl-step:first-child,.twl-step:nth-child(3),.twl-step:last-child{height:auto;padding:18px 20px}
 .twl-step__in,.twl-step:nth-child(n+3) .twl-step__in{position:static;width:auto;margin:0;opacity:1}
 .twl-card,.twl-step:nth-child(n+3) .twl-card{display:block;padding:20px}
 .twl-card::before{display:none}
 .twl-card h3{font-size:22px}
 .twl-card__t{font-size:17px}
 .twl-step[data-active] .twl-card{border-color:#9a641a;box-shadow:inset 4px 0 0 #9a641a}
 .twl-path__end{display:none}
 /* interlude */
 .twl-oee{padding:72px 0 80px}
 .twl-oee__head{grid-template-columns:minmax(0,1fr);gap:16px}
 .twl-oee__faces{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
 .twl-oee__f--res{grid-column:1/-1;grid-template-columns:120px minmax(0,1fr);text-align:left;justify-items:start;align-items:center;column-gap:16px}
 .twl-oee__f--res .twl-oee__svg{grid-row:1/4;width:120px}
 .twl-oee__svg{width:104px}
 .twl-oee__v{font-size:24px}
 .twl-oee__lab{font-size:14px;min-height:0}
 .twl-oee__lab strong{display:block}
 .twl-oee__res{font-size:64px}
 .twl-oee__legend{grid-template-columns:repeat(2,minmax(0,1fr))}
 /* limits */
 .twl-lim{padding:72px 0 104px}
 .twl-lim__head{margin-bottom:32px}
 .twl-seg__tab{min-height:56px;flex-direction:column;gap:2px;font-size:15px;padding:6px 4px;text-align:center}
 .twl-seg__face{width:28px;height:28px}
 .twl-seg__tab b{display:none}
 .twl-pane__svg{max-width:none}
 .twl-pane__copy h3{font-size:26px}
 .twl-pane__t{font-size:17px}
 .twl-unc__pair b{font-size:22px}
 .twl-lim__drops{display:none}
 /* programme: the route turns vertical */
 .twl-prog{padding:48px 0 96px}
 .twl-route__line{left:47px;right:auto;top:68px;bottom:0;width:3px;height:auto}
 .twl-route__ink{transform-origin:50% 0}
 .twl-route__flow,.twl-route__down{display:none}
 .twl-route__st{grid-template-columns:minmax(0,1fr);gap:18px}
 .twl-route__st li{justify-content:flex-start}
 .twl-st{width:100%;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto auto;justify-items:start;text-align:left;column-gap:16px}
 .twl-st__face{width:96px;height:96px;grid-row:1/4}
 .twl-route__panel{grid-template-columns:minmax(0,1fr);grid-template-areas:"big" "body" "nav" "acts";gap:16px;padding:24px 20px}
 .twl-route__nav{justify-content:flex-start}
 .twl-route__acts{justify-content:flex-start}
 .twl-route__pick{text-align:left}
 .twl-route__big{font-size:64px}
 .twl-route__body h3{font-size:26px}
 .twl-route__more{max-width:none}
 /* closing */
 .twl-close{padding-top:56px}
 .twl-close__h{font-size:clamp(1.9rem,9vw,2.25rem)}
 .twl-close__grid{margin-top:28px;gap:28px;padding-bottom:104px}
 .twl-close__wall{gap:6px;padding-right:18px;clip-path:inset(-16px -32px -32px)}
 .twl-cf[data-sel]{transform:scale(1.3)}
 .twl-jacks{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 6px}
 .twl-jack__sock{width:40px;height:40px}
 .twl-jack__name{font-size:13px;letter-spacing:-.01em}
 .twl-close__title{font-size:28px}
 .twl-close__sel select{font-size:16px}
}

/* ---------- reduced motion and Calm: the finished state, no transitions ---------- */
@media(prefers-reduced-motion:reduce){.twl *,.twl *::before,.twl *::after{transition-duration:0s!important}.twl-path :is(.twl-path__dial,.twl-path__iris,.twl-path__apq){transition-delay:0s!important}}
:root[data-motion=calm] .twl *,:root[data-motion=calm] .twl *::before,:root[data-motion=calm] .twl *::after{transition-duration:0s!important}

:root[data-motion=calm] .twl-path :is(.twl-path__dial,.twl-path__iris,.twl-path__apq){transition-delay:0s!important}