.ex-steps{list-style:none;margin:clamp(28px,4vw,52px) 0 0;padding:0;display:grid;gap:clamp(48px,7vw,96px)}
.ex-step{display:grid;gap:22px;align-items:center}
@media (min-width:1024px){ .ex-step{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(40px,5vw,72px)} }
.ex-k{margin:0 0 10px;font-size:var(--fs-12);letter-spacing:var(--track-label-13);text-transform:uppercase;color:var(--blue-text)}
.ex-copy h3{margin:0 0 12px}
.ex-copy p:not(.ex-k){color:var(--mute);font-size:var(--fs-16)}
.ex-fig{position:relative;min-width:0}

.ex-fig-export{border:1px solid var(--stroke);border-radius:12px;background:rgba(5,8,12,.42);padding:16px 18px}
.ex-cap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 12px;
  font-size:var(--fs-11);letter-spacing:var(--track-label-11);text-transform:uppercase;color:var(--faint)}
.ex-cap .xs-tag{letter-spacing:.1em}
.ex-raw{font:400 var(--fs-11)/1.65 var(--mono);color:var(--mute)}
.ex-line{position:relative;isolation:isolate;display:flex;align-items:baseline;gap:10px;padding:3px 6px;margin:0 -6px;border-radius:4px}
.ex-ln{flex:0 0 2ch;text-align:right;color:rgba(255,255,255,.4);user-select:none}
.ex-lt{min-width:0}
.ex-line.is-head{color:var(--text)}
.ex-flag{flex:none;margin-left:auto;padding:0 7px;border:1px solid var(--stroke-hover);border-radius:999px;
  font-size:var(--fs-10);letter-spacing:.1em;text-transform:uppercase;color:var(--blue-text);white-space:nowrap}

.is-aside .ex-lt,.is-dupe .ex-lt{opacity:.8125}
.is-dupe::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:4px;background:rgba(43,127,212,.12);opacity:0}

.ex-msg{padding:20px 22px;background:var(--surface-lit);border:1px solid var(--stroke);border-top-color:var(--stroke-top);
  border-radius:var(--r-card);box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 24px 44px -30px rgba(0,0,0,.9)}
.ex-msg-h{margin:0 0 10px;font-size:var(--fs-11);letter-spacing:var(--track-label-11);text-transform:uppercase;color:var(--faint)}
.ex-msg-b{margin:0;font-size:var(--fs-15);line-height:1.62;color:var(--text)}
.ex-msg-f{margin:16px 0 0;font-size:var(--fs-14);color:var(--mute)}
.ex-press{position:relative;display:inline-block;margin-right:4px;padding:5px 12px;border:1px solid var(--blue);border-radius:999px;
  font:500 var(--fs-13)/1.2 var(--sans);color:var(--text)}

.ex-press::after{content:"";position:absolute;inset:-5px;border:1px solid var(--blue-text);border-radius:999px;opacity:.55}

.ex-own{position:relative;padding:20px 22px;background:var(--surface-lit);border:1px solid var(--stroke);border-radius:var(--r-card)}
.ex-own-h{margin:0 0 12px;font-size:var(--fs-11);letter-spacing:var(--track-label-11);text-transform:uppercase;color:var(--blue-text)}
.ex-own ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px}
.ex-own li{position:relative;padding-left:18px;font-size:var(--fs-15);color:var(--text)}
.ex-own li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--blue)}

.ex-own::before,.ex-own::after{content:"";position:absolute;inset:-7px;border:1px solid var(--blue);border-radius:calc(var(--r-card) + 7px);pointer-events:none}
.ex-own::before{border-left-color:transparent;border-right-color:transparent;transform-origin:left}
.ex-own::after{border-top-color:transparent;border-bottom-color:transparent;transform-origin:top}
@media (max-width:560px){ .ex-own ul{grid-template-columns:minmax(0,1fr)} .ex-fig-export{padding:14px 12px} }

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .ex-step{view-timeline:--ex block}
    
    .ex-line:not(.is-head){animation:ex-straight linear both;animation-timeline:--ex;animation-range:cover 8vh cover 34vh}
    .ex-line:nth-child(2){--x:7px;--a:-1.4deg}
    .ex-line:nth-child(3){--x:-5px;--a:1deg}
    .ex-line:nth-child(4){--x:4px;--a:-.8deg}
    .ex-line:nth-child(5){--x:-6px;--a:1.6deg}
    .ex-line:nth-child(6){--x:5px;--a:-1.1deg}
    .is-dupe{animation:ex-dupe linear both;animation-timeline:--ex;animation-range:cover 8vh cover 54vh}
    .is-dupe::after{animation:ex-mark linear both;animation-timeline:--ex;animation-range:cover 34vh cover 54vh}
    .is-aside .ex-lt,.is-dupe .ex-lt{animation:ex-dim linear both;animation-timeline:--ex;animation-range:cover 36vh cover 50vh}
    .ex-flag{animation:ex-on linear both;animation-timeline:--ex;animation-range:cover 44vh cover 54vh}
    
    .counts-cell::before{animation:ex-rule linear both;animation-timeline:--ex;
      animation-range:cover calc(14vh + var(--i,0) * 7vh) cover calc(26vh + var(--i,0) * 7vh)}
    .counts-cell:nth-child(2){--i:1}
    .counts-cell:nth-child(3){--i:2}
    .counts-cell:nth-child(4){--i:3}
    
    .xs-row:nth-child(2){--r:1}
    .xs-row:nth-child(3){--r:2}
    .xs-row{--d:calc(var(--f,0) - var(--r,0));--w:calc(6vh + max(var(--d),-1 * var(--d)) * 4vh);
      z-index:calc(10 - var(--r,0) + 10 * min(1,var(--d) * var(--d)));
      animation:ex-sort linear both;animation-timeline:--ex;animation-range:cover calc(34vh - var(--w)) cover calc(34vh + var(--w))}
    .xs-row::after{content:"";position:absolute;inset:0 -10px;z-index:-1;border-radius:8px;opacity:0;
      background:#fff;box-shadow:0 10px 22px -12px rgba(2,4,7,.5);
      animation:ex-lift2 linear both;animation-timeline:--ex;animation-range:cover calc(34vh - var(--w)) cover calc(34vh + var(--w))}
    .xs-rank{animation:ex-lit linear both;animation-timeline:--ex;
      animation-range:cover calc(44vh + var(--r,0) * 3vh) cover calc(50vh + var(--r,0) * 3vh)}
    
    .ex-msg{animation:ex-slide linear both;animation-timeline:--ex;animation-range:cover 6vh cover 40vh}
    .ex-press::after{animation:ex-on linear both;animation-timeline:--ex;animation-range:cover 40vh cover 52vh}
    
    .ex-own li{animation:ex-settle linear both;animation-timeline:--ex;
      animation-range:cover calc(10vh + var(--i,0) * 3vh) cover calc(30vh + var(--i,0) * 3vh)}
    .ex-own li:nth-child(2){--i:1}
    .ex-own li:nth-child(3){--i:2}
    .ex-own li:nth-child(4){--i:3}
    .ex-own li:nth-child(5){--i:4}
    .ex-own li:nth-child(6){--i:5}
    .ex-own::before{animation:ex-rule linear both;animation-timeline:--ex;animation-range:cover 30vh cover 44vh}
    .ex-own::after{animation:ex-side linear both;animation-timeline:--ex;animation-range:cover 36vh cover 50vh}
  }
}
@keyframes ex-straight{from{transform:translateX(var(--x,0)) rotate(var(--a,0deg))}}
@keyframes ex-dupe{from{transform:translateX(var(--x,0)) rotate(var(--a,0deg))}56%{transform:none}78%{transform:translate(10px,-4px)}to{transform:none}}
@keyframes ex-mark{0%{opacity:1;transform:none}50%{opacity:1;transform:translateY(-400%)}90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes ex-dim{from{opacity:1}}
@keyframes ex-on{from{opacity:0}}
@keyframes ex-rule{from{transform:scaleX(0)}}
@keyframes ex-side{from{transform:scaleY(0)}}
@keyframes ex-sort{from{transform:translateY(calc(var(--d) * 100%));animation-timing-function:cubic-bezier(.6,0,.3,1)}to{transform:none}}
@keyframes ex-lift2{0%,100%{opacity:0}12%,88%{opacity:min(1,var(--d) * var(--d))}}
@keyframes ex-lit{from{opacity:.42}}
@keyframes ex-slide{from{transform:translateY(-56px)}}
@keyframes ex-settle{from{transform:translateY(18px)}}
@media (prefers-reduced-motion:reduce){
  .ex-step *,.ex-step *::before,.ex-step *::after{animation:none!important}
}