/*
 * Research and Perspective: interactive figures
 * Research and Perspective (rp) — draft, not yet on the release allowlist.
 * Generated from the reviewed design canvas; see docs/research-perspective.md.
 * Scoped to body.rp-page so shared pages are unaffected.
 */
@keyframes bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes panR{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes panL{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes casInLast{from{opacity:.2;transform:translateX(-16px);background:#fff;border-color:rgba(18,18,20,.14);color:#121214}to{opacity:1;transform:none;background:#0b0b0c;border-color:#0b0b0c;color:#f4f2ee}}
@keyframes casIn{from{opacity:.2;transform:translateX(-16px);background:#fff;border-color:rgba(18,18,20,.14)}to{opacity:1;transform:none;background:#ecebfd;border-color:#4a52ff}}
@keyframes travelY{from{transform:translateY(0)}to{transform:translateY(100%)}}
@keyframes cntUp{from{--c:0}to{--c:var(--to)}}
@keyframes clipIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes litOn{from{background:#fff;color:#68686f;border-color:rgba(18,18,20,.2)}to{background:#4a52ff;color:#fff;border-color:#4a52ff}}
@keyframes sqO{from{opacity:0}to{opacity:1}}
@keyframes sqIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fR{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes fL{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
@keyframes fB{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fT{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:none}}
@keyframes bfIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes critOn{from{background:#fff;border-color:rgba(18,18,20,.2);color:#68686f}to{background:#fbeee5;border-color:#e0722f;color:#a8471a}}
@keyframes travel{from{top:0}to{top:calc(100% - 14px)}}
@keyframes ndOnLast{from{background:#fff;border-color:rgba(18,18,20,.16);color:#121214}to{background:#0b0b0c;border-color:#0b0b0c;color:#f4f2ee}}
@keyframes ndOn{from{background:#fff;border-color:rgba(18,18,20,.16)}to{background:#ecebfd;border-color:#4a52ff}}
@keyframes errOn{from{background:#fff;color:#68686f;border-color:rgba(18,18,20,.2)}to{background:#e0722f;color:#fff;border-color:#e0722f}}
@keyframes attOn{from{background:rgba(74,82,255,.16)}to{background:#4a52ff}}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.xb{appearance:none;margin-left:auto;min-height:32px;padding:0 10px;border:1px solid rgba(18,18,20,.18);border-radius:4px;background:#fff;color:#43434a;font:600 11px 'Inter Tight',Inter,sans-serif;letter-spacing:.14em;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.xb:hover,.xb:focus-visible{background:#121214;color:#fff;border-color:#121214;outline:none}
.fig{margin:48px 0 56px;padding:0;border:1px solid rgba(18,18,20,.14);border-radius:8px;background:#fff}
.fighead{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 14px 12px 22px;border-bottom:1px solid rgba(18,18,20,.1);border-radius:8px 8px 0 0;font:600 11px 'Inter Tight',Inter,sans-serif;letter-spacing:.16em;color:#68686f}
.figbody{padding:28px 22px}
.figcap{display:block;padding:16px 22px 18px;font-size:15px;line-height:1.55;color:#43434a;border-top:1px solid rgba(18,18,20,.08)}
.figcap b{font-family:'Inter Tight',Inter,sans-serif;letter-spacing:.12em;font-size:11px;margin-right:8px;color:#121214}
.ft{margin:0 0 6px;font:600 22px/1.2 'Inter Tight',Inter,sans-serif;letter-spacing:-.01em;color:#121214}
.fs{margin:0 0 24px;font-size:15px;color:#68686f}
.cell{border-top:2px solid #121214;background:#f4f2ee;border-radius:0 0 6px 6px;padding:16px 18px}
.cell .k{display:block;font:600 11px 'Inter Tight',Inter,sans-serif;letter-spacing:.14em;color:#3b42e6;margin-bottom:8px}
.cell .t{display:block;font:600 16px/1.3 'Inter Tight',Inter,sans-serif;color:#121214;margin-bottom:6px}
.cell .d{display:block;font-size:15px;line-height:1.5;color:#43434a}
.cell .e{display:block;margin-top:14px;font:600 11px 'Inter Tight',Inter,sans-serif;letter-spacing:.14em;color:#68686f}
.cell .ed{display:block;font-size:15px;line-height:1.5;color:#2a2a30;margin-top:4px}
.lbl{font:600 11px 'Inter Tight',Inter,sans-serif;letter-spacing:.16em;color:#68686f;margin:0 0 12px}
@property --c{syntax:'<integer>';inherits:false;initial-value:0}
.fs{max-width:560px}
.dot{position:relative;z-index:1;width:44px;height:44px;box-sizing:border-box;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#4a52ff;color:#fff;border:2px solid #4a52ff;box-shadow:0 0 0 6px #fff;font:600 13px 'Inter Tight',Inter,sans-serif;letter-spacing:.04em}
.ftt{font:600 16px/1.3 'Inter Tight',Inter,sans-serif;color:#121214}
.fdd{max-width:150px;font-size:14px;line-height:1.45;color:#43434a}
.dia{position:absolute;top:-4px;width:10px;height:10px;margin-left:-5px;box-sizing:border-box;background:#fff;border:2px solid #4a52ff;transform:rotate(45deg)}
.wf .gm,.wf .gx{transition:opacity .45s cubic-bezier(.22,1,.36,1)}
.wf[data-sel="met"] .gx,.wf[data-sel="miss"] .gm{opacity:.12}
.wfb{appearance:none;display:flex;flex-direction:column;align-items:flex-start;padding:16px 18px;border:1px solid rgba(18,18,20,.14);border-radius:6px;background:#fff;text-align:left;cursor:pointer;transition:border-color .3s,box-shadow .3s}
.wfb:hover{border-color:rgba(18,18,20,.4)}
.wfb[aria-pressed="true"]{border-color:#121214;box-shadow:0 0 0 1px #121214}
.wfk{display:flex;align-items:center;gap:8px;font:600 11px 'Inter Tight',Inter,sans-serif;letter-spacing:.14em;color:#43434a}
.sw{width:10px;height:10px;border-radius:50%;display:inline-block}
.cnt{--c:var(--to);counter-reset:cn var(--c);display:block;margin:12px 0 6px;font:600 36px/1 'Inter Tight',Inter,sans-serif;letter-spacing:-.02em;color:#121214;font-variant-numeric:tabular-nums}
.cnt::after{content:counter(cn)}
.wfd{font-size:14px;line-height:1.45;color:#43434a}
.seg{display:inline-flex;padding:4px;border-radius:999px;background:#f1efeb;gap:2px}
.seg button{appearance:none;min-height:40px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:#43434a;font:600 13px Inter,sans-serif;cursor:pointer;transition:background .3s,color .3s,box-shadow .3s}
.seg button[aria-pressed="true"]{background:#fff;color:#121214;box-shadow:0 1px 3px rgba(18,18,20,.16)}
.ntv{display:block;margin-top:10px;font:600 52px/1 'Inter Tight',Inter,sans-serif;letter-spacing:-.025em;color:#121214;font-variant-numeric:tabular-nums}
.tick{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:rgba(18,18,20,.35);border-radius:1px}
.pinin{top:96px}
.ptw{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;align-items:start}
.ptl{display:flex;flex-direction:column;border-left:2px solid rgba(18,18,20,.1)}
.ptb{appearance:none;display:flex;gap:10px;align-items:baseline;min-height:44px;margin-left:-2px;padding:11px 12px;border:0;border-left:2px solid transparent;border-bottom:0 solid transparent;background:none;text-align:left;font:500 15px/1.3 Inter,sans-serif;cursor:pointer;transition:color .3s,border-color .3s}
.ptn{font:600 11px 'Inter Tight',Inter,sans-serif;letter-spacing:.08em}
.ptp{min-height:290px}
.chip{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;border:1px solid rgba(18,18,20,.12);background:#f4f2ee;font-size:14px;line-height:1.3;color:#2a2a30}
.fadein{animation:fadeUp .55s cubic-bezier(.22,1,.36,1) both}
.mxc{transition:filter .35s cubic-bezier(.22,1,.36,1),box-shadow .35s cubic-bezier(.22,1,.36,1)}
.mxc.ok{border-top-color:#121214}
.mxc.ok .k{color:#43434a}
.mxc.er{background:#fbeee5;border-top-color:#e0722f}
.mxc.er .k{color:#a8471a}
.mxc.un{padding:18px 20px;border-radius:0 0 6px 6px;border-top:2px solid #8b7cf6;background:#0b0b0c}
.mxw[data-any="1"] .mxc[data-hl="0"]{filter:opacity(.32) saturate(.5)}
.mxc[data-hl="1"]{box-shadow:0 0 0 2px #4a52ff,0 14px 30px rgba(18,18,20,.14)}
.mxm{display:none;margin-bottom:8px;font:600 11px 'Inter Tight',Inter,sans-serif;letter-spacing:.14em;color:#68686f}
.stb{appearance:none;display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid rgba(18,18,20,.12);border-left:3px solid #e0722f;border-radius:6px;background:#fff;text-align:left;cursor:pointer;transition:box-shadow .3s,border-color .3s}
.stb:hover{border-top-color:rgba(18,18,20,.3);border-right-color:rgba(18,18,20,.3);border-bottom-color:rgba(18,18,20,.3)}
.stb[aria-pressed="true"]{box-shadow:0 0 0 2px #4a52ff}
.stt{font:600 15px/1.3 'Inter Tight',Inter,sans-serif;color:#121214}
.std{font-size:14px;line-height:1.45;color:#43434a}
.stp{margin-top:6px;font:600 11px 'Inter Tight',Inter,sans-serif;letter-spacing:.14em;color:#3b42e6}
.rst{display:flex;gap:4px;border-bottom:2px solid rgba(18,18,20,.1);margin:4px 0 0}
.rtb{appearance:none;display:flex;gap:8px;align-items:baseline;min-height:44px;margin-bottom:-2px;padding:10px 12px;border:0;border-bottom:2px solid transparent;background:none;font:500 15px/1.3 Inter,sans-serif;cursor:pointer;transition:color .3s,border-color .3s}
.chain{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr);align-items:stretch;margin:22px 0 24px}
.cnode{display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:104px;padding:16px;border:2px solid;border-radius:6px;box-sizing:border-box;transition:background .5s cubic-bezier(.22,1,.36,1),border-color .5s cubic-bezier(.22,1,.36,1)}
.cn-l{font:600 11px 'Inter Tight',Inter,sans-serif;letter-spacing:.14em;color:#43434a}
.cn-s{font:600 16px/1.3 'Inter Tight',Inter,sans-serif;transition:color .4s}
.carr{display:flex;align-items:center;justify-content:center;font-size:18px;color:#a09d98}
.vcard{appearance:none;display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:0;border-top:2px solid #121214;border-radius:0 0 6px 6px;text-align:left;cursor:pointer;transition:background .35s,border-color .35s,box-shadow .35s}
.vcard[aria-pressed="true"]{box-shadow:0 0 0 1px rgba(18,18,20,.12),0 14px 30px rgba(18,18,20,.1)}
.vk{font:600 11px 'Inter Tight',Inter,sans-serif;letter-spacing:.14em;color:#3b42e6}
.vtt{font:600 17px/1.25 'Inter Tight',Inter,sans-serif;color:#121214}
.vq{font-size:15px;line-height:1.45;color:#121214}
.vm{font-size:13.5px;line-height:1.45;color:#68686f}
.nchip{display:inline-flex;gap:6px;align-items:center;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.2);font-size:14px;color:#f4f2ee}
.exs{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1.2fr) 28px minmax(0,1fr);align-items:center;margin-top:20px}
.exb{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid rgba(18,18,20,.14);border-radius:6px;background:#f4f2ee}
.exl{font:600 11px 'Inter Tight',Inter,sans-serif;letter-spacing:.14em;color:#68686f}
.ext{font:600 15px/1.35 'Inter Tight',Inter,sans-serif;color:#121214}
.rp-stat{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:18px 16px 20px;border-radius:6px;background:#0b0b0c;color:#f4f2ee}
.rp-stat .sn{display:flex;align-items:baseline;font:600 42px/1 'Inter Tight',Inter,sans-serif;letter-spacing:-.025em;color:#f4f2ee;font-variant-numeric:tabular-nums}
.rp-stat .cnt{display:inline;margin:0;font:inherit;letter-spacing:inherit;color:inherit}
.rp-stat .sk{display:block;margin:14px 0 6px;font:600 11px 'Inter Tight',Inter,sans-serif;letter-spacing:.14em;color:#a9a2ff}
.rp-stat .sd{display:block;font-size:13.5px;line-height:1.45;color:#d3d0ca}
.srule{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.08)}
.sfill{display:block;height:100%;background:linear-gradient(90deg,#4a52ff,#8b7cf6);transform-origin:left}
.pil{position:relative;border-top-color:rgba(18,18,20,.14)}
.pline{position:absolute;left:0;right:0;top:-2px;height:2px;background:#121214;transform-origin:left}
.dim{position:relative;padding:22px 18px 18px;background:#f4f2ee;border-radius:0 0 6px 6px}
.dim .t{display:block;font:600 16px/1.3 'Inter Tight',Inter,sans-serif;color:#121214;margin-bottom:6px}
.dim .d{display:block;font-size:15px;line-height:1.5;color:#43434a}
.dnode{position:absolute;top:-6px;left:18px;width:10px;height:10px;box-sizing:border-box;border-radius:50%;background:#4a52ff;border:2px solid #4a52ff;box-shadow:0 0 0 4px #fff}
.howto{position:relative;padding:18px 20px 18px 24px;border-radius:6px;background:#ecebfd;overflow:hidden}
.hrule{position:absolute;left:0;top:0;bottom:0;width:3px;background:#4a52ff;transform-origin:top}
.att{display:block;height:8px;border-radius:2px;background:#4a52ff}
@supports (animation-timeline: view()){
  .sfill{animation:grow linear both;animation-timeline:--vt;animation-range:cover calc(8% + var(--i,0) * 3%) cover calc(30% + var(--i,0) * 3%)}
  .pline{animation:grow linear both;animation-timeline:--vt;animation-range:cover calc(6% + var(--i,0) * 3.5%) cover calc(20% + var(--i,0) * 3.5%)}
  .dimfill{animation:grow linear both;animation-timeline:--vt;animation-range:cover 42% cover 62%}
  .hrule{animation:growY linear both;animation-timeline:--vt;animation-range:cover calc(6% + 14 * 3.5%) cover calc(22% + 14 * 3.5%)}
  .att{animation:attOn linear both;animation-timeline:--vt;animation-range:cover calc(10% + var(--i,0) * 3.5%) cover calc(12% + var(--i,0) * 3.5%)}
  #f1 .cnt{animation-range:cover 8% cover 34%}
}
@media (max-width:720px){
  .dimtrack{display:none}
  .rp-stat .sn{font-size:36px}
}
.vtrack{position:absolute;left:0;right:0;top:0;height:2px;z-index:1;background:rgba(18,18,20,.12);pointer-events:none}
.vfill{height:100%;background:#4a52ff;transform-origin:left}
.vcard{position:relative}
.cl{position:relative}
.cline{display:block;width:70%;height:2px;background:#4a52ff;transform-origin:left;position:relative}
.cline::after{content:"";position:absolute;right:-4px;top:-4px;border:5px solid transparent;border-left:7px solid #4a52ff}
.stb{position:relative;border-left:1px solid rgba(18,18,20,.12);padding-left:20px}
.sedge{position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;border-radius:6px 0 0 6px;transform-origin:top}
.mxc.er{border-top-color:rgba(224,114,47,.25)}
.stb[data-auto="1"]{box-shadow:0 0 0 2px #4a52ff}
@supports (animation-timeline: view()){
  .vfill{animation:grow linear both;animation-timeline:--vt;animation-range:cover 14% cover 34%}
  .cline{animation:grow linear both;animation-timeline:--vt;animation-range:cover 18% cover 34%}
  .sedge{animation:growY linear both;animation-timeline:--vt;animation-range:cover calc(6% + var(--i,0) * 3.5%) cover calc(16% + var(--i,0) * 3.5%)}
}
@media (max-width:720px){
  .cline{width:2px;height:20px;transform-origin:top;margin:0 auto;animation-name:growY}
  .cline::after{right:-4px;top:auto;bottom:-6px;border:5px solid transparent;border-top:7px solid #4a52ff}
  .carr.cl{transform:none}
}
.ckl{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.ckr{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;border-radius:6px;background:#f4f2ee;font-size:16px;line-height:1.4;color:#121214}
.ckr.bad{background:#fbeee5}
.ckm{width:28px;height:28px;box-sizing:border-box;border-radius:50%;border:2px solid;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.ckm.ok{background:#4a52ff;border-color:#4a52ff;color:#fff}
.ckm.er{background:#e0722f;border-color:#e0722f;color:#fff}
.ckt{font:600 11px 'Inter Tight',Inter,sans-serif;letter-spacing:.14em;color:#3b42e6}
.ckt.er{color:#a8471a}
.props{position:relative;margin:4px 0 36px;padding:4px 0 4px 30px;display:flex;flex-direction:column;gap:16px}
.ptrack{position:absolute;left:0;top:6px;bottom:6px;width:2px;background:rgba(18,18,20,.12)}
.pfill{display:block;width:100%;height:100%;background:#4a52ff;transform-origin:top}
.prop{display:flex;gap:14px;align-items:baseline;font:600 19px/1.35 'Inter Tight',Inter,sans-serif;letter-spacing:-.005em;color:#121214}
.pn{flex:none;font:600 11px 'Inter Tight',Inter,sans-serif;letter-spacing:.1em;color:#3b42e6}
.gates{position:relative;display:flex;flex-direction:column;gap:10px;margin-top:6px;padding-left:40px}
.gtrack{position:absolute;left:14px;top:20px;bottom:20px;width:2px;background:rgba(18,18,20,.12)}
.gtok{position:absolute;left:-6px;top:calc(100% - 14px);width:14px;height:14px;border-radius:50%;background:#4a52ff;box-shadow:0 0 0 4px #fff,0 0 0 5px rgba(74,82,255,.35)}
.gate{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:6px;background:#f4f2ee}
.gk{font:600 11px 'Inter Tight',Inter,sans-serif;letter-spacing:.14em;color:#3b42e6}
.gt{font:600 16px/1.4 'Inter Tight',Inter,sans-serif;color:#121214}
.bfg{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));gap:8px;max-width:540px;margin:8px 0 22px}
.bfd{display:block;aspect-ratio:1;border-radius:50%}
.cntb{display:block}
.cntb .cnt{margin:2px 0 8px;font-size:32px}
.sys{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px 18px;align-items:center;justify-items:center;margin-top:18px;padding:34px 20px 26px;border:1.5px dashed rgba(74,82,255,.55);border-radius:10px}
.syslabel{position:absolute;top:-9px;left:16px;padding:0 8px;background:#fff;font:600 11px 'Inter Tight',Inter,sans-serif;letter-spacing:.14em;color:#2f35c4}
.sysmodel{padding:16px 28px;border-radius:8px;background:#0b0b0c;color:#f4f2ee;font:600 17px 'Inter Tight',Inter,sans-serif}
.sys .chip{background:#fff}
.upan{display:flex;flex-direction:column;padding:18px;border-radius:6px;background:#f4f2ee}
.ubox{flex:1;padding:16px;border-radius:6px;background:#fff;border:1px solid rgba(18,18,20,.1)}
.ubl{display:block;font:600 11px 'Inter Tight',Inter,sans-serif;letter-spacing:.14em;color:#121214}
.ubs{display:block;margin-top:12px;font-size:13.5px;line-height:1.45;color:#43434a}
.ufoot{display:block;margin-top:14px;font:600 14.5px/1.4 'Inter Tight',Inter,sans-serif;color:#121214}
.tree{flex:1;display:flex;flex-direction:column;align-items:center;padding:16px 8px;border-radius:6px;background:#fff;border:1px solid rgba(18,18,20,.1)}
.troot{padding:9px 14px;border-radius:999px;background:#e0722f;color:#fff;font:600 13px 'Inter Tight',Inter,sans-serif}
.tstem{width:2px;height:16px;background:#e0722f;transform-origin:top}
.thor{width:75%;height:2px;background:#e0722f;transform-origin:center}
.tkids{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
.tkid{display:flex;flex-direction:column;align-items:center}
.tdrop{width:2px;height:14px;background:#e0722f}
.tcrit{padding:6px 6px;border-radius:4px;border:1px solid #e0722f;background:#fbeee5;color:#a8471a;font:600 11px 'Inter Tight',Inter,sans-serif;letter-spacing:.02em}
.vlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.vlist li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45;color:#2a2a30}
.vn{flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#121214;color:#fff;font:600 11px 'Inter Tight',Inter,sans-serif}
.vlist.rec .vn{background:#4a52ff}
.casc{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column}
.cnod{display:flex;flex-direction:row;align-items:baseline;gap:14px;margin-left:calc(var(--d,0) * 8%);padding:14px 18px;box-sizing:border-box;border:2px solid #4a52ff;border-radius:6px;background:#ecebfd;font:600 16px/1.3 'Inter Tight',Inter,sans-serif;color:#121214}
.cnod.last{background:#0b0b0c;border-color:#0b0b0c;color:#f4f2ee}
.ck2{font:600 11px 'Inter Tight',Inter,sans-serif;letter-spacing:.12em;color:#3b42e6}
.cnod.last .ck2{color:#a9a2ff}
.cconn{display:flex;flex-direction:row;align-items:center;gap:12px;height:38px;margin-left:calc(var(--d,0) * 8% + 26px)}
.cclab{font:600 11px 'Inter Tight',Inter,sans-serif;letter-spacing:.1em;color:#68686f;text-transform:uppercase}
.ccline{position:relative;display:block;order:-1;width:2px;height:100%;background:rgba(18,18,20,.12)}
.ccfill{display:block;width:100%;height:100%;background:#4a52ff;transform-origin:top}
.span1,.span2{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:6px}
.span1{background:#ecebfd}
.span2{background:#f4f2ee}
.srow{display:flex;align-items:center;gap:10px;font:600 15px/1.35 'Inter Tight',Inter,sans-serif;color:#121214}
.sic{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#4a52ff;color:#fff;font-size:12px;font-weight:700}
.sic.no{background:transparent;border:1.5px solid #68686f;color:#43434a;box-sizing:border-box}
.tdes{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:16px;align-items:start}
.chip.lk{gap:6px;color:#43434a}
.road{position:relative;margin-top:16px;padding-left:34px}
.rtrack{position:absolute;left:8px;top:10px;bottom:10px;width:2px;background:rgba(18,18,20,.12)}
.rfill{display:block;width:100%;height:100%;background:#4a52ff;transform-origin:top}
.rlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.rstep{position:relative;display:flex;flex-direction:column;gap:4px}
.rdot{position:absolute;left:-32px;top:2px;width:14px;height:14px;box-sizing:border-box;border-radius:50%;background:#4a52ff;border:2px solid #4a52ff;box-shadow:0 0 0 4px #fff}
.rk{font:600 11px 'Inter Tight',Inter,sans-serif;letter-spacing:.14em;color:#3b42e6}
.rt{font:600 18px/1.25 'Inter Tight',Inter,sans-serif;color:#121214}
.rd{font-size:15px;line-height:1.5;color:#43434a}
.rsep{display:flex;flex-direction:column;gap:4px;margin:24px 0 0 34px;padding:16px 18px;border:1.5px dashed #e0722f;border-radius:6px;background:#fff}
@supports (animation-timeline: view()){
  .errOn{animation:errOn linear both;animation-timeline:--vt;animation-range:cover calc(10% + var(--i,0) * 3.5%) cover calc(15% + var(--i,0) * 3.5%)}
  .pfill,.rfill{animation:growY linear both;animation-timeline:--vt;animation-range:cover 10% cover 45%}
  .gtok{animation:travel linear both;animation-timeline:--vt;animation-range:cover 14% cover 42%}
  .bfd{animation:bfIn linear both;animation-timeline:--vt;animation-range:cover calc(8% + var(--i,0) * .5%) cover calc(13% + var(--i,0) * .5%)}
  .fromT,.fromB,.fromL,.fromR{animation-timeline:--vt;animation-range:cover 14% cover 32%;animation-fill-mode:both;animation-timing-function:linear}
  .fromT{animation-name:fT}
  .fromB{animation-name:fB}
  .fromL{animation-name:fL}
  .fromR{animation-name:fR}
  .tstem{animation:growY linear both;animation-timeline:--vt;animation-range:cover 18% cover 24%}
  .thor{animation:growX linear both;animation-timeline:--vt;animation-range:cover 22% cover 30%}
  .tcrit{animation:critOn linear both;animation-timeline:--vt;animation-range:cover calc(10% + var(--i,0) * 3%) cover calc(14% + var(--i,0) * 3%)}
  .lit3{animation:ndOn linear both;animation-timeline:--vt;animation-range:cover calc(10% + var(--i,0) * 3.5%) cover calc(15% + var(--i,0) * 3.5%)}
  .lit3.last{animation-name:ndOnLast}
  .ccfill{animation:grow linear both;animation-timeline:--vt;animation-range:cover calc(10% + var(--i,0) * 3.5%) cover calc(16% + var(--i,0) * 3.5%)}
}
@media (max-width:720px){
  .cnod{margin-left:calc(var(--d,0) * 5%)}
  .cconn{margin-left:calc(var(--d,0) * 5% + 22px)}
  .pinin{padding:16px 16px 14px!important}
  .pinin .fs{display:none}
  .pinin .ft{margin-bottom:12px}
  .chain{margin:14px 0 16px}
  .cnode{padding:10px 12px;gap:6px}
  .carr{height:18px}
  .tdes{grid-template-columns:minmax(0,1fr)}
  .bfg{gap:5px}
  .sys{padding:30px 10px 20px;gap:10px 8px}
  .sysmodel{padding:12px 16px}
  .prop{font-size:17px}
}
@supports (animation-timeline: view()){
  .vt{view-timeline:--vt block}
  .sq{animation:sqIn linear both;animation-timeline:--vt;animation-range:cover calc(6% + var(--i,0) * 3.5%) cover calc(18% + var(--i,0) * 3.5%)}
  .sqo{animation:sqO linear both;animation-timeline:--vt;animation-range:cover calc(6% + var(--i,0) * 3.5%) cover calc(18% + var(--i,0) * 3.5%)}
  .lit{animation:litOn linear both;animation-timeline:--vt;animation-range:cover calc(10% + var(--i,0) * 3.5%) cover calc(15% + var(--i,0) * 3.5%)}
  .trk{animation:grow linear both;animation-timeline:--vt;animation-range:cover 12% cover 42%}
  .wfr{animation:clipIn linear both;animation-timeline:--vt;animation-range:cover 18% cover 42%}
  .growx{animation:grow linear both;animation-timeline:--vt;animation-range:cover 10% cover 30%}
  .cnt{animation:cntUp linear both;animation-timeline:--vt;animation-range:cover 12% cover 40%}
}
@supports (animation-timeline: view()){
  .sq,.sqo,.lit,.errOn,.lit3,.critOn,.att,.sfill,.pline,.cnt,.dimfill,.trk,.vfill,.cline,.ccfill,.hrule,.sedge,.tstem,.thor{animation-timeline:view()}
  .sq,.sqo,.sfill,.pline,.sedge{animation-range:cover calc(3% + mod(var(--i,0), 6) * 2.2%) cover calc(19% + mod(var(--i,0), 6) * 2.2%)}
  .lit,.errOn,.lit3,.critOn,.att{animation-range:cover calc(8% + mod(var(--i,0), 10) * 1.6%) cover calc(14% + mod(var(--i,0), 10) * 1.6%)}
  .cnt,#f1 .cnt{animation-range:cover 5% cover 30%}
  .dimfill,.trk,.vfill,.cline,.ccfill{animation-range:cover 10% cover 34%}
  .hrule{animation-range:cover 5% cover 28%}
  .tstem{animation-range:cover 8% cover 16%}
  .thor{animation-range:cover 12% cover 22%}
  .ccfill{animation-name:growY}
  .lit3.last{animation-name:ndOnLast}
  .ptrack{view-timeline:--pt block}
  .pfill{animation-timeline:--pt}
  .rtrack{view-timeline:--rt block}
  .rfill{animation-timeline:--rt}
  .gtrack{view-timeline:--gt block}
  .gtok{animation-timeline:--gt;animation-range:cover 15% cover 55%}
}
.prose > p,.prose > h2,.prose > h3,.prose > blockquote,.prose > .props,.prose > .tag,.prose > ol,.prose > .wc{max-width:640px}
.fig.inl{margin:36px 0 44px;border:0;background:transparent}
.fig.inl .fighead{display:none}
.fig.inl .figbody{padding:0}
.fig.inl .figcap{padding:12px 0 0;border-top:0;font-size:13.5px;color:#68686f}
.fig.inl .gate{border:1px solid rgba(18,18,20,.08)}
.fig.inl .gate:first-of-type{background:#fff!important}
.gtok{top:0;height:calc(100% - 14px);width:14px;background:none;box-shadow:none;transform:translateY(100%)}
.gtok::before{content:"";position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;background:#4a52ff;box-shadow:0 0 0 4px #fff,0 0 0 5px rgba(74,82,255,.35)}
@supports (animation-timeline: view()){
  .gtok{animation-name:travelY}
}
.stack{display:grid}
.stk{grid-area:1 / 1;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1),visibility 0s linear .45s}
.stk[data-on="1"]{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s}
.ntpill{opacity:0;transform:translateY(4px);transition:opacity .4s cubic-bezier(.22,1,.36,1),transform .4s cubic-bezier(.22,1,.36,1)}
.ntpill[data-on="1"]{opacity:1;transform:none}
.ptp,.ptp .stack{min-height:0}
@supports (animation-timeline: view()){
  .fig.vt:not(#f1):not(#f6):not(#g7):not(#g8) .sq,.fig.vt:not(#f1):not(#f6):not(#g7):not(#g8) .sqo,.fig.vt:not(#f1):not(#f6):not(#g7):not(#g8) .lit,.fig.vt:not(#f1):not(#f6):not(#g7):not(#g8) .errOn,.fig.vt:not(#f1):not(#f6):not(#g7):not(#g8) .critOn,.fig.vt:not(#f1):not(#f6):not(#g7):not(#g8) .att,.fig.vt:not(#f1):not(#f6):not(#g7):not(#g8) .sedge{animation-timeline:--vt;animation-range:cover calc(12% + var(--i,0) * 3%) cover calc(22% + var(--i,0) * 3%)}
  .fig.vt:not(#f1):not(#f6):not(#g7):not(#g8) .trk,.fig.vt:not(#f1):not(#f6):not(#g7):not(#g8) .vfill,.fig.vt:not(#f1):not(#f6):not(#g7):not(#g8) .cline{animation-timeline:--vt;animation-range:cover 16% cover 42%}
  #g7 .cnod{animation:casIn linear both;animation-timeline:--vt;animation-range:cover calc(16% + var(--d,0) * 7%) cover calc(24% + var(--d,0) * 7%)}
  #g7 .cnod.last{animation-name:casInLast}
  #g7 .cclab{animation:sqO linear both;animation-timeline:--vt;animation-range:cover calc(22% + var(--d,0) * 7%) cover calc(27% + var(--d,0) * 7%)}
  #g7 .ccfill{animation:growY linear both;animation-timeline:--vt;animation-range:cover calc(20% + var(--d,0) * 7%) cover calc(25% + var(--d,0) * 7%)}
  #g7 .sq{animation:sqIn linear both;animation-timeline:--vt;animation-range:cover 42% cover 52%}
  #g8 .span1{animation:panL linear both;animation-timeline:--vt;animation-range:cover 12% cover 26%}
  #g8 .span2{animation:panR linear both;animation-timeline:--vt;animation-range:cover 22% cover 36%}
  #g8 .srow{animation:sqIn linear both;animation-timeline:--vt;animation-range:cover calc(14% + var(--i,0) * 4%) cover calc(22% + var(--i,0) * 4%)}
  #g8 .sic{animation:pop linear both;animation-timeline:--vt;animation-range:cover calc(18% + var(--i,0) * 4%) cover calc(24% + var(--i,0) * 4%)}
}
.fig[style*="position: fixed"] *{animation:none!important}
@media (max-width:999px){
  .pinin{top:160px}
}
@media (max-width:720px){
  .trackbg{display:none}
  .ptw{grid-template-columns:minmax(0,1fr);gap:18px}
  .ptl{flex-direction:row;border-left:0;border-bottom:2px solid rgba(18,18,20,.1)}
  .ptb{flex:1;justify-content:center;margin:0 0 -2px;border-left-width:0;border-bottom-width:2px}
  .ptt{display:none}
  .ptn{font-size:13px}
  .ptp{min-height:330px}
  .mxm{display:block}
  .chain,.exs{grid-template-columns:minmax(0,1fr)}
  .carr{transform:rotate(90deg);height:24px}
  .cnode{min-height:0}
  .rtb{flex:1;flex-direction:column;gap:2px;font-size:13px}
  .ntv{font-size:42px}
}
.bar{transform-origin:left}
@supports (animation-timeline: scroll()){
  .bar{animation:bar linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
}
@media (max-width:720px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .g2,.g3,.rowg{grid-template-columns:minmax(0,1fr)!important}
  .mx{grid-template-columns:minmax(0,1fr)!important}
  .mxh{display:none!important}
  .figbody{padding:22px 16px}
}
@media (prefers-reduced-motion: reduce){.rp-page .fig *,.rp-page .props *,.rp-page .aph *{animation:none!important;transition:none!important}}
/* Bank-World visual notes (web-only, unnumbered): #bw1 dot sort, #bw2 grader checks.
 * Additive and scoped to these two figures (and #bw1's runway, #bw1-run). #bw1's counters deliberately follow their cluster's arrival rather than FIG 2's convention. Static markup is
 * the finished state. Motion is scroll-driven and reversible, translate/clip-path/opacity
 * on ~90 dot strips, and runs only when js/research-figures.js sets data-hold on the runway
 * (scroll timelines supported, motion allowed). The runway then holds the figure centred
 * while the sort plays; without it the figure sits in flow in its final state. */
@keyframes bwFill{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes bwGlide{from{translate:calc((var(--fx) - var(--x)) * var(--u)) calc((var(--fy) - var(--y)) * var(--u))}to{translate:0 0}}
@keyframes bwFade{from{opacity:0}to{opacity:1}}
@keyframes bwLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
#bw1-run{margin:40px 0 48px}
#bw1-run #bw1{margin:0}
#bw1 .fighead{padding-top:7px;padding-bottom:7px}
#bw1 .figbody{padding:16px 22px 18px}
#bw1 .ft{margin-bottom:2px;font-size:20px}
#bw1 .fs{margin-bottom:8px;font-size:14px}
#bw1 .bwx{position:relative;width:100%;max-width:610px;aspect-ratio:83 / 25.8;margin:4px 0 10px;container-type:inline-size;--u:calc(100cqw / 83)}
#bw1 .bwg,#bw1 .bwlabels{position:absolute;inset:0}
#bw1 .bwg{transition:opacity .45s cubic-bezier(.22,1,.36,1)}
#bw1 .bwx[data-sel="a"] .bwg:not(.ga),#bw1 .bwx[data-sel="b"] .bwg:not(.gb),#bw1 .bwx[data-sel="c"] .bwg:not(.gc),#bw1 .bwx[data-sel="d"] .bwg:not(.gd){opacity:.12}
#bw1 .bws,#bw1 .bwl,#bw1 .bwn,#bw1 .bwln{position:absolute;--x:var(--dx,0);--y:var(--dy,0);--fx:var(--dfx,0);--fy:var(--dfy,0);left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u))}
#bw1 .bws{display:block;width:calc(var(--w) * var(--u));height:var(--u);background-image:radial-gradient(circle,var(--dc) 0 33%,transparent 36%);background-size:calc(100% / var(--w)) 100%}
#bw1 .ga .bws,#bw1 .gb .bws{--dc:#2a2a30}
#bw1 .gc .bws{--dc:#8a8782}
#bw1 .gd .bws{--dc:#c6c3bd}
#bw1 .gb .bws::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,#4a52ff 0 40%,transparent 43%);background-size:inherit}
#bw1 .bwl{font:600 10px/1 'Inter Tight',Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:#68686f}
#bw1 .bwc{color:#43434a}
#bw1 .bwn{translate:-100% 0;font:600 14px/1 'Inter Tight',Inter,sans-serif;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:#121214}
#bw1 .bwnb{color:#3b42e6}
#bw1 .bwln{width:100%;height:1px;background:rgba(18,18,20,.14);transform-origin:left}
#bw1 .bwsum{margin:0 0 12px;font:600 14px/1.4 'Inter Tight',Inter,sans-serif;color:#121214}
#bw1 .bwb{gap:8px!important}
#bw1 .wfb{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:14px;row-gap:4px;align-items:start;padding:10px 14px}
#bw1 .wfk{grid-column:2;text-transform:uppercase;font-size:10px}
#bw1 .cnt{grid-column:1;grid-row:1 / 3;min-width:2.1em;margin:0;font-size:26px}
#bw1 .wfd{grid-column:2;font-size:13px;line-height:1.4}
#bw1 .wfb:focus-visible{outline:2px solid #4a52ff;outline-offset:2px}
#bw1 .figcap{padding:12px 22px 14px;font-size:14px}
#bw2 .bwk{list-style:none;margin:6px 0 0;padding:0}
#bw2 .bwkr{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr) minmax(0,1.9fr);gap:6px 20px;align-items:baseline;padding:16px 0}
#bw2 .bwkr:last-child{padding-bottom:0}
#bw2 .bwkh{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(18,18,20,.16);transform-origin:left}
#bw2 .bwkc{font:600 11px/1.4 'Inter Tight',Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#3b42e6}
#bw2 .bwkv{font:600 20px/1.2 'Inter Tight',Inter,sans-serif;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:#121214}
#bw2 .bwkd{font-size:14.5px;line-height:1.5;color:#43434a}
@media (max-width:720px){
  #bw1 .figbody{padding:18px 16px 20px}
  #bw1 .bwx{max-width:none;aspect-ratio:43 / 46.2;--u:calc(100cqw / 43)}
  #bw1 .bws,#bw1 .bwl,#bw1 .bwn,#bw1 .bwln{--x:var(--mx,0);--y:var(--my,0);--fx:var(--mfx,0);--fy:var(--mfy,0)}
  #bw1 .bws{background-image:radial-gradient(circle,var(--dc) 0 35%,transparent 38%)}
  #bw1 .bwl{font-size:9.5px;letter-spacing:.12em}
  #bw1 .bwn{translate:none;font-size:13px}
  #bw1 .cnt{font-size:24px}
  #bw2 .bwkr{grid-template-columns:minmax(0,1fr) auto}
  #bw2 .bwkv{justify-self:end;font-size:18px}
  #bw2 .bwkd{grid-column:1 / -1}
}
@supports (animation-timeline: view()){
  #bw1-run[data-hold]{view-timeline:--bwt block}
  #bw1-run[data-hold] .bws{will-change:translate;animation:bwFill linear both,bwGlide cubic-bezier(.65,0,.35,1) both;animation-timeline:--bwt,--bwt;animation-range:cover calc(100vh - var(--fht) + var(--fhrun) * ((-0.03 + var(--f) * .0085) * .986)) cover calc(100vh - var(--fht) + var(--fhrun) * ((0.005 + var(--f) * .0085) * .986)),cover calc(100vh - var(--fht) + var(--fhrun) * ((0.14 + (var(--g) - 26) * .0148) * .986)) cover calc(100vh - var(--fht) + var(--fhrun) * ((0.21 + (var(--g) - 26) * .0148) * .986))}
  #bw1-run[data-hold] .gb .bws::after{animation:bwFade linear both;animation-timeline:--bwt;animation-range:cover calc(100vh - var(--fht) + var(--fhrun) * ((0.58 + (var(--h) - 57) * .0167) * .986)) cover calc(100vh - var(--fht) + var(--fhrun) * ((0.61 + (var(--h) - 57) * .0167) * .986))}
  #bw1-run[data-hold] .bwl,#bw1-run[data-hold] .bwln{animation:bwFade linear both;animation-timeline:--bwt;animation-range:cover calc(100vh - var(--fht) + var(--fhrun) * ((0.10) * .986)) cover calc(100vh - var(--fht) + var(--fhrun) * ((0.18) * .986))}
  #bw1-run[data-hold] .bwln{animation-name:bwLine}
  #bw1-run[data-hold] .bwn{animation:bwFade linear both;animation-timeline:--bwt;animation-range:cover calc(100vh - var(--fht) + var(--fhrun) * ((var(--k) / 100) * .986)) cover calc(100vh - var(--fht) + var(--fhrun) * ((var(--k) / 100 + .04) * .986))}
  #bw1-run[data-hold] .bwsum{animation:sqIn linear both;animation-timeline:--bwt;animation-range:cover calc(100vh - var(--fht) + var(--fhrun) * ((0.66) * .986)) cover calc(100vh - var(--fht) + var(--fhrun) * ((0.74) * .986))}
  #bw1-run[data-hold] .wfb .cnt{animation:cntUp linear both;animation-timeline:--bwt}
  #bw1-run[data-hold] .wfb[data-k="a"] .cnt{animation-range:cover calc(100vh - var(--fht) + var(--fhrun) * ((0.14) * .986)) cover calc(100vh - var(--fht) + var(--fhrun) * ((0.32) * .986))}
  #bw1-run[data-hold] .wfb[data-k="d"] .cnt{animation-range:cover calc(100vh - var(--fht) + var(--fhrun) * ((0.31) * .986)) cover calc(100vh - var(--fht) + var(--fhrun) * ((0.44) * .986))}
  #bw1-run[data-hold] .wfb[data-k="c"] .cnt{animation-range:cover calc(100vh - var(--fht) + var(--fhrun) * ((0.40) * .986)) cover calc(100vh - var(--fht) + var(--fhrun) * ((0.49) * .986))}
  #bw1-run[data-hold] .wfb[data-k="b"] .cnt{animation-range:cover calc(100vh - var(--fht) + var(--fhrun) * ((0.52) * .986)) cover calc(100vh - var(--fht) + var(--fhrun) * ((0.74) * .986))}
  #bw2 .bwkh{animation:bwLine linear both;animation-timeline:--vt;animation-range:cover calc(9% + var(--r) * 6%) cover calc(15% + var(--r) * 6%)}
}
#bw1[style*="position: fixed"] .bws::after,#bw1[style*="position: fixed"] .bws{animation:none!important}
@media (prefers-reduced-motion: reduce){.rp-page #bw1 .bws::after{animation:none!important}}

/* === disclosure figures (PR: feat/research-disclosure-figures) ===
 * Two additive elements, scoped to #g4 and #dm1 only.
 * #g4  "Agents are systems": scroll-in (Model first, spokes and boundary draw
 *      outward, components settle, label last) and a highlight micro-interaction.
 * #dm1 Section 04 disclosure matrix: headers draw, cells fill row by row, and a
 *      row or column can be isolated. Not a ranking; no totals; essay order.
 * Static markup is the finished state. Motion is scroll-driven (reversible),
 * opacity/transform/stroke-dashoffset only, and only with no-preference. */
@keyframes g4Model{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
@keyframes g4Bound{from{opacity:0;transform:scale(.34,.42)}to{opacity:1;transform:none}}
@keyframes g4Draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes g4Chip{from{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px))}to{opacity:1;transform:none}}
@keyframes g4Label{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes dmRule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes dmIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes dmPop{from{transform:scale(.3)}to{transform:none}}
#g4 .g4c{appearance:none;position:relative;z-index:1;margin:0;font-family:inherit;cursor:pointer;transition:border-color .2s ease,background-color .2s ease,color .2s ease,filter .2s ease}
#g4 .g4c:hover{border-color:rgba(18,18,20,.3)}
#g4 .g4c:focus-visible{outline:2px solid #4a52ff;outline-offset:2px}
#g4 .g4m{position:relative;z-index:1}
#g4 .g4w{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
#g4 .g4w line{fill:none;stroke:#4a52ff;stroke-width:1;stroke-opacity:.26;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-opacity .2s ease,stroke-width .2s ease}
#g4 .g4s .g4c[data-on="1"]{border-color:#4a52ff;background:#ecebfd;color:#121214}
#g4 .g4s[data-hl]:not([data-hl="none"]) .g4c:not([data-on="1"]){filter:opacity(.5)}
#g4 .g4s[data-hl]:not([data-hl="none"]) .g4w line{stroke-opacity:.1}
#g4 .g4s .g4w line[data-on="1"]{stroke-opacity:1;stroke-width:1.5}
#dm1 .dmx{width:100%;margin:6px 0 0;border-collapse:collapse;table-layout:fixed}
#dm1 .dmcorner{width:21%;padding:0}
#dm1 .dmch{position:relative;padding:0 6px 0 0;text-align:left;vertical-align:bottom;font-weight:inherit}
#dm1 .dmch::after{content:"";position:absolute;left:0;right:6px;bottom:0;height:2px;background:#121214;transform-origin:left}
#dm1 .dmb{appearance:none;display:block;width:100%;margin:0;padding:8px 0 10px;border:0;background:none;text-align:left;cursor:pointer;color:#68686f;font:600 11px/1.35 'Inter Tight',Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;transition:color .3s}
#dm1 .dmb:hover{color:#121214}
#dm1 .dmb:focus-visible{outline:2px solid #4a52ff;outline-offset:2px;border-radius:2px}
#dm1 .dmch .dmb[aria-pressed="true"]{color:#2f35c4}
#dm1 .dmrh{padding:14px 12px 14px 0;text-align:left;vertical-align:top;font-weight:inherit;border-top:1px solid rgba(18,18,20,.1)}
#dm1 .dmrh .dmb{padding:0;text-transform:none;letter-spacing:0}
#dm1 .dmn{display:block;font:600 15px/1.3 'Inter Tight',Inter,sans-serif;color:#121214;transition:color .3s}
#dm1 .dms{display:block;margin-top:4px;font:400 12.5px/1.4 Inter,sans-serif;color:#68686f}
#dm1 .dmrh .dmb[aria-pressed="true"] .dmn{color:#2f35c4}
#dm1 .dmc{padding:14px 10px 14px 0;vertical-align:top;border-top:1px solid rgba(18,18,20,.1)}
#dm1 .dmi{display:flex;flex-direction:column;gap:8px}
#dm1 .dml{display:none}
#dm1 .dmv{display:flex;gap:8px;align-items:baseline;font-size:13.5px;line-height:1.4;color:#121214}
#dm1 .dmv.np{color:#43434a}
#dm1 .dmv.nx{color:#68686f}
#dm1 .dmg{flex:none;position:relative;top:1px;width:9px;height:9px;box-sizing:border-box;border-radius:50%}
#dm1 .pub .dmg{background:#4a52ff}
#dm1 .np .dmg{border:1.5px solid #121214}
#dm1 .nx .dmg{border:1.5px dashed #a09d98}
#dm1 .dmc,#dm1 .dmrh,#dm1 .dmch{transition:filter .45s cubic-bezier(.22,1,.36,1)}
#dm1 .dmx[data-row="0"] .dmc:not([data-r="0"]),#dm1 .dmx[data-row="0"] .dmrh:not([data-r="0"]),
#dm1 .dmx[data-row="1"] .dmc:not([data-r="1"]),#dm1 .dmx[data-row="1"] .dmrh:not([data-r="1"]),
#dm1 .dmx[data-row="2"] .dmc:not([data-r="2"]),#dm1 .dmx[data-row="2"] .dmrh:not([data-r="2"]),
#dm1 .dmx[data-row="3"] .dmc:not([data-r="3"]),#dm1 .dmx[data-row="3"] .dmrh:not([data-r="3"]),
#dm1 .dmx[data-col="0"] .dmc:not([data-c="0"]),#dm1 .dmx[data-col="0"] .dmch:not([data-c="0"]),
#dm1 .dmx[data-col="1"] .dmc:not([data-c="1"]),#dm1 .dmx[data-col="1"] .dmch:not([data-c="1"]),
#dm1 .dmx[data-col="2"] .dmc:not([data-c="2"]),#dm1 .dmx[data-col="2"] .dmch:not([data-c="2"]),
#dm1 .dmx[data-col="3"] .dmc:not([data-c="3"]),#dm1 .dmx[data-col="3"] .dmch:not([data-c="3"]),
#dm1 .dmx[data-col="4"] .dmc:not([data-c="4"]),#dm1 .dmx[data-col="4"] .dmch:not([data-c="4"]){filter:opacity(.2)}
#dm1 .dmk{display:flex;flex-wrap:wrap;gap:8px 20px;margin:18px 0 0;padding-top:14px;border-top:1px solid rgba(18,18,20,.1)}
#dm1 .dmk .dmv{font-size:13px;color:#43434a}
@media (max-width:720px){
  #dm1 .dmx,#dm1 .dmx thead,#dm1 .dmx tbody,#dm1 .dmr,#dm1 .dmrh,#dm1 .dmc{display:block;width:auto}
  #dm1 .dmhr{display:flex;flex-wrap:wrap;gap:6px}
  #dm1 .dmcorner{display:none}
  #dm1 .dmch{display:block;padding:0}
  #dm1 .dmch::after{display:none}
  #dm1 .dmch .dmb{min-height:36px;padding:8px 11px;border:1px solid rgba(18,18,20,.14);border-radius:999px;letter-spacing:.08em;font-size:10.5px}
  #dm1 .dmch .dmb[aria-pressed="true"]{border-color:#4a52ff;background:#ecebfd}
  #dm1 .dmr{margin-top:14px;padding:4px 16px 8px;border-top:2px solid #121214;border-radius:0 0 6px 6px;background:#f4f2ee}
  #dm1 .dmrh{padding:12px 0 10px;border-top:0}
  #dm1 .dmc{padding:10px 0;border-top:1px solid rgba(18,18,20,.1)}
  #dm1 .dml{display:block;font:600 10.5px/1.3 'Inter Tight',Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#68686f}
  #dm1 .dmi{gap:6px}
  #dm1 .dmv{font-size:14px}
}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    #g4 .g4s{view-timeline:--g4t block;border-color:transparent}
    #g4 .g4s::before{content:"";position:absolute;inset:-1.5px;border:1.5px dashed rgba(74,82,255,.55);border-radius:10px;pointer-events:none;will-change:transform,opacity;animation:g4Bound linear both;animation-timeline:--g4t;animation-range:cover 17% cover 30%}
    #g4 .g4m{animation:g4Model linear both;animation-timeline:--g4t;animation-range:cover 8% cover 16%}
    #g4 .g4w line{animation:g4Draw linear both;animation-timeline:--g4t;animation-range:cover calc(14% + var(--d,0) * 1.5%) cover calc(24% + var(--d,0) * 1.5%)}
    #g4 .g4c{animation:g4Chip linear both;animation-timeline:--g4t;animation-range:cover calc(18% + var(--d,0) * 2%) cover calc(28% + var(--d,0) * 2%)}
    #g4 .syslabel{animation:g4Label linear both;animation-timeline:--g4t;animation-range:cover 33% cover 39%}
    #dm1 .dmx{view-timeline:--dmt block}
    #dm1 .dmch::after{animation:dmRule linear both;animation-timeline:--dmt;animation-range:cover calc(6% + var(--c,0) * 1.5%) cover calc(12% + var(--c,0) * 1.5%)}
    #dm1 .dmch .dmb{animation:dmIn linear both;animation-timeline:--dmt;animation-range:cover calc(7% + var(--c,0) * 1.5%) cover calc(13% + var(--c,0) * 1.5%)}
    #dm1 .dmrh,#dm1 .dmc{view-timeline:--dmc block}
    #dm1 .dmrh .dmb{animation:dmIn linear both;animation-timeline:--dmc;animation-range:cover 4% cover 12%}
    #dm1 .dmi{animation:dmIn linear both;animation-timeline:--dmc;animation-range:cover calc(5% + var(--c,0) * 2%) cover calc(14% + var(--c,0) * 2%)}
    #dm1 .dmc .dmg{animation:dmPop linear both;animation-timeline:--dmc;animation-range:cover calc(8% + var(--c,0) * 2%) cover calc(15% + var(--c,0) * 2%)}
  }
}
#dm1[style*="position: fixed"] .dmch::after{animation:none!important}
@media (prefers-reduced-motion: reduce){
  #g4 .g4w line{stroke-opacity:0}
  #g4 .g4s .g4w line[data-on="1"]{stroke-opacity:1}
}
/* === end disclosure figures === */

/* === figure holds (PR: feat/research-figure-holds) ===
 * Shared scroll hold ("weighting"), generalised from #bw1: a runway (.fhold) wraps
 * the figure (.fhpin) and a spacer (.fhspace). js/research-figures.js sets
 * data-hold when scroll timelines exist, motion is allowed, and the figure fits;
 * the figure then sticks, centred under the header (desktop) or the phone contents
 * bar, for --fhrun of scroll and its sequence plays against the runway. Without
 * data-hold or while the figure is
 * expanded, the spacer is gone and the figure sits in flow in its normal state.
 * --fhcore is the measured height used for centring. Sequence points are
 * written as P = share of the pinned span:
 * cover offset = 100vh - top + P * --fhrun. */
.fhold{--fhoff:96px;--fhview:100vh;--fhroom:calc(var(--fhview) - var(--fhoff));--fhrun:150vh;--fht:max(var(--fhoff),calc(var(--fhoff) + (var(--fhroompx,var(--fhroom)) - var(--fhcore)) / 2))}
@supports (height:100svh){.fhold{--fhview:100svh}}
@media (max-width:999px){.fhold{--fhoff:calc(64px + env(safe-area-inset-top,0px))}}
/* Resolve fit and runway sizes without changing spacers before a resize is measured. */
.fhold::before{content:none;height:var(--fhroom);width:150vh}
.fhold > .fhspace{display:none}
#f3-run,#f5-run,#f7-run{margin:48px 0 56px}
#f3-run > .fhpin > .fig,#f5-run > .fhpin > .fig,#f7-run > .fhpin > .fig{margin:0}
/* FIG 2 compacted (as #bw1) so its dots and counts stay in view while held. */
#f3 .fighead{padding-top:7px;padding-bottom:7px}
#f3 .figbody{padding:16px 22px 18px}
#f3 .ft{margin-bottom:2px;font-size:20px}
#f3 .fs{margin-bottom:8px;font-size:14px}
#f3 .wf{margin:4px 0 12px!important}
#f3 .g2{gap:8px!important}
#f3 .wfb{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:14px;row-gap:4px;align-items:start;padding:10px 14px}
#f3 .wfk{grid-column:2;font-size:10px}
#f3 .cnt{grid-column:1;grid-row:1 / 3;min-width:2.1em;margin:0;font-size:26px}
#f3 .wfd{grid-column:2;font-size:13px;line-height:1.4}
#f3 .figbody > p:last-child{margin-top:10px!important}
#f3 .figcap{padding:12px 22px 14px;font-size:14px}
@media (max-width:720px){#f3 .figbody{padding:18px 16px 20px}}
/* FIG 5 on phones: the rotated arrows span the column and swallowed taps on tab 02. */
#f7 .carr{pointer-events:none}
/* Reserve the height of the longest status so changing states keeps the hold steady. */
#f7 .cn-states{display:grid}
#f7 .cn-states > .cn-s{grid-area:1 / 1}
#f7 .cn-states > .cn-s[aria-hidden="true"]{visibility:hidden}
@supports (animation-timeline: view()){
  .fhold[data-hold]{view-timeline:--fhtl block}
  .fhold[data-hold] > .fhpin{position:sticky;z-index:1;top:var(--fht)}
  .fhold[data-hold] > .fhspace{display:block;height:var(--fhrun)}
  .fhold[data-hold]:has(> .fhpin > .fig[style*="position: fixed"]) > .fhpin{position:static}
  .fhold[data-hold]:has(> .fhpin > .fig[style*="position: fixed"]) > .fhspace{display:none}
  /* FIG 2: dark dots and 949 first, then the 201 blue dots; settled by P = .73. */
  #f3-run[data-hold]:not(:has(#f3[style*="position: fixed"])) #f3 :is(.sqo,.wfr,.cnt){animation-timeline:--fhtl!important;will-change:opacity,clip-path}
  #f3-run[data-hold]:not(:has(#f3[style*="position: fixed"])) #f3 .gm .sqo:nth-child(1){animation-range:cover calc(100vh - var(--fht) + var(--fhrun) * -.04) cover calc(100vh - var(--fht) + var(--fhrun) * .26)!important}
  #f3-run[data-hold]:not(:has(#f3[style*="position: fixed"])) #f3 .gm .sqo:nth-child(2){animation-range:cover calc(100vh - var(--fht) + var(--fhrun) * .20) cover calc(100vh - var(--fht) + var(--fhrun) * .32)!important}
  #f3-run[data-hold]:not(:has(#f3[style*="position: fixed"])) #f3 .wfb:nth-child(1) .cnt{animation-range:cover calc(100vh - var(--fht) + var(--fhrun) * 0) cover calc(100vh - var(--fht) + var(--fhrun) * .32)!important}
  #f3-run[data-hold]:not(:has(#f3[style*="position: fixed"])) #f3 .gx .wfr:nth-child(1){animation-range:cover calc(100vh - var(--fht) + var(--fhrun) * .36) cover calc(100vh - var(--fht) + var(--fhrun) * .46)!important}
  #f3-run[data-hold]:not(:has(#f3[style*="position: fixed"])) #f3 .gx .wfr:nth-child(2){animation-range:cover calc(100vh - var(--fht) + var(--fhrun) * .42) cover calc(100vh - var(--fht) + var(--fhrun) * .73)!important}
  #f3-run[data-hold]:not(:has(#f3[style*="position: fixed"])) #f3 .wfb:nth-child(2) .cnt{animation-range:cover calc(100vh - var(--fht) + var(--fhrun) * .40) cover calc(100vh - var(--fht) + var(--fhrun) * .73)!important}
}
/* === end figure holds === */