/* pact-protocol.com's own layer over pact-web-kit: the open/closed network pictures, the comparison
 * matrix and the battery beside the protocol's refusals. Orange means "allowed" and nothing else. */

.nets{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.net{margin:0;border:1px solid var(--line);border-radius:18px;padding:1.3rem;background:#fff}
.net svg{width:100%;height:auto;max-height:13rem;display:block;margin-bottom:1rem}
.net h3{font-size:1.15rem;margin-bottom:.35rem}
.net p{margin:0;color:var(--muted);font-size:.95rem}
.n-hub{fill:var(--bg-3);stroke:var(--line-2)}
.n-hub-t{font:600 11px var(--sans);fill:var(--muted)}
.n-spokes path{stroke:var(--line-2);stroke-width:1.5}
.n-dot circle{fill:#8A8D94}
.n-end{fill:var(--ink)}
.n-end-t{font:600 15px var(--display);fill:#fff}
.n-line{stroke:var(--accent);stroke-width:3}
.n-gate{fill:#fff;stroke:var(--accent);stroke-width:2.5}
.n-tick{stroke:var(--accent-ink);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.n-strangers circle{fill:#B8BBC1}
.n-block{stroke:var(--line-2);stroke-width:1.5;stroke-dasharray:3 4}
@media (max-width:760px){.nets{grid-template-columns:1fr}}

.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.cmp{width:100%;border-collapse:collapse;min-width:720px;font-size:.93rem}
.cmp th,.cmp td{padding:.75rem .8rem;border-bottom:1px solid var(--line);text-align:center}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp thead th{font-family:var(--display);font-weight:600;color:var(--ink);background:var(--bg-2)}
.cmp tbody th{text-align:left;font-weight:500;color:var(--ink)}
.cmp .pact{background:var(--accent-soft)}
.cmp thead .pact{color:var(--accent-ink)}
.m{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;font-size:.85rem;font-weight:700;line-height:1}
.m.y{background:var(--ink);color:#fff}
.m.p{background:var(--bg-3);color:var(--ink);border:1px solid var(--line-2)}
.m.n{background:#fff;color:#8A8D94;border:1px solid var(--line-2)}
.m.d{background:#fff;color:var(--accent-ink);border:1px dashed var(--accent-ink)}
.m.a{color:var(--faint)}
@media (max-width:720px){
  .cmp{min-width:600px;font-size:.84rem}
  .cmp th,.cmp td{padding:.6rem .5rem}
  .cmp tbody th{position:sticky;left:0;z-index:1;background:#fff;box-shadow:1px 0 0 var(--line);min-width:9rem;max-width:10rem}
  .cmp thead th:first-child{position:sticky;left:0;z-index:1;background:var(--bg-2)}
}
.cmp-legend{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:1rem 0 1.4rem;font-size:.88rem;color:var(--muted)}
.cmp-legend span{display:inline-flex;align-items:center;gap:.45rem}
.cmp-notes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,4vw,3rem);margin-bottom:1rem}
.cmp-notes p{margin:0;color:var(--text);max-width:36rem}
@media (max-width:760px){.cmp-notes{grid-template-columns:1fr}}

.two-col-p{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,4rem);align-items:center}
.two-col-p>*{min-width:0}
.two-col-p p.muted{max-width:38rem}
.two-col-p .battery{margin:0}
@media (max-width:900px){.two-col-p{grid-template-columns:1fr}}
.two-col-p .ticks+p{margin-top:1.2rem}

/* Motion (the kit's site.js adds .rv/.in as blocks scroll in; reduced motion stops all of it).
   The hero enters once, from CSS; the diagrams show what they mean: strangers call a directory,
   a message crosses the consent gate while a stranger is turned back, the table fills column by
   column. Travelling dots are transparent outside their keyframes, so a still page shows none. */

.in .n-spokes path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .55s var(--ease-out) forwards}
.n-spokes path:nth-child(2){animation-delay:.06s}.n-spokes path:nth-child(3){animation-delay:.12s}.n-spokes path:nth-child(4){animation-delay:.18s}
.n-spokes path:nth-child(5){animation-delay:.24s}.n-spokes path:nth-child(6){animation-delay:.3s}.n-spokes path:nth-child(7){animation-delay:.36s}
.n-dot circle,.n-tick,.n-gate{transform-box:fill-box;transform-origin:center}
.in .n-dot circle{animation:pop .4s cubic-bezier(.3,1.3,.5,1) both;animation-delay:.5s}
.n-call{fill:var(--accent);opacity:0}
.in .n-call{animation:call-in 2.8s ease-in-out infinite}
.in .n-call.c1{--dx:112px;--dy:54px;animation-delay:1s}
.in .n-call.c2{--dx:-118px;--dy:-30px;animation-delay:1.9s}
.in .n-call.c3{--dx:76px;--dy:-84px;animation-delay:2.8s}
@keyframes call-in{0%{opacity:0;transform:none}12%{opacity:1}55%{opacity:1;transform:translate(var(--dx),var(--dy))}62%,100%{opacity:0;transform:translate(var(--dx),var(--dy))}}

.in .n-line{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .7s var(--ease-out) .15s forwards}
.in .n-gate{animation:pop .45s cubic-bezier(.3,1.3,.5,1) .5s both}
.in .n-tick{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .35s var(--ease-out) .85s forwards}
.n-msg{fill:var(--ink);opacity:0}
.in .n-msg{animation:cross 3.2s ease-in-out 1.4s infinite}
@keyframes cross{0%{opacity:0;transform:none}10%{opacity:1}80%{opacity:1;transform:translateX(84px)}90%,100%{opacity:0;transform:translateX(84px)}}
.n-probe{fill:#8A8D94;opacity:0}
.in .n-probe{animation:turned-back 3.2s ease-in-out 2.2s infinite}
@keyframes turned-back{0%{opacity:0;transform:none}12%{opacity:1}42%{opacity:1;transform:translateY(34px)}62%{opacity:.8;transform:translateY(8px)}75%,100%{opacity:0;transform:none}}

.in .cmp .m{animation:pop .35s cubic-bezier(.3,1.3,.5,1) both;animation-delay:calc(.2s + var(--c,0) * 110ms + var(--r,0) * 22ms)}
.cmp td:nth-child(3){--c:1}.cmp td:nth-child(4){--c:2}.cmp td:nth-child(5){--c:3}.cmp td:nth-child(6){--c:4}.cmp td:nth-child(7){--c:5}
.cmp tr:nth-child(2){--r:1}.cmp tr:nth-child(3){--r:2}.cmp tr:nth-child(4){--r:3}.cmp tr:nth-child(5){--r:4}
.cmp tr:nth-child(6){--r:5}.cmp tr:nth-child(7){--r:6}.cmp tr:nth-child(8){--r:7}.cmp tr:nth-child(9){--r:8}.cmp tr:nth-child(10){--r:9}

/* ------------------------------------------------------------------ the hero: PACT at a glance */
.hero-p{padding:clamp(3.5rem,8vw,6.5rem) 0 clamp(3rem,6vw,5rem);position:relative;overflow:clip}
.hero-p::before{content:"";position:absolute;inset:0 0 auto;height:620px;z-index:-1;pointer-events:none;background:radial-gradient(60rem 26rem at 78% -10%,rgb(var(--accent-rgb) / .12),transparent 70%)}
.hero-p-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero-p-grid>*{min-width:0}
.hero-p .ver{margin:0 0 1rem;font-size:.9rem;color:var(--muted)}
.hero-p h1{font-size:clamp(2.6rem,5.2vw,4.6rem);font-weight:700;letter-spacing:-.04em;line-height:.98;margin:0 0 1.3rem;max-width:13ch}
.hero-p .lede{max-width:36rem;margin-bottom:1.6rem}
.hero-p .hero-actions{margin:0}
.glance{margin:0}
.glance svg{width:100%;height:auto;display:block}
.g-wallet{fill:var(--ink)}
.g-host{fill:#fff;stroke:var(--ink);stroke-width:2}
.g-t{font:600 17px var(--display);fill:var(--ink)}
.g-t.light{fill:#fff}
.g-s{font:500 12.5px var(--sans);fill:var(--muted)}
.g-s.light{fill:var(--dark-muted)}
.g-issue{stroke:var(--ink);stroke-width:2;stroke-dasharray:4 5;fill:none}
.g-link{stroke:var(--accent);stroke-width:3;fill:none}
.g-ok circle{fill:#fff;stroke:var(--accent);stroke-width:2.5}
.g-ok path{fill:none;stroke:var(--accent-ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.g-okt{fill:var(--accent-ink);font-weight:600}
.g-env{opacity:0}
.g-env rect{fill:var(--ink)}
.g-env path{fill:none;stroke:#fff;stroke-width:1.6}
.g-call{font-weight:600;fill:var(--ink)}
.g-none rect{fill:#fff;stroke:var(--line-2);stroke-dasharray:4 4}
.g-none text{font:500 13px var(--sans);fill:var(--faint);text-decoration:line-through}
@media (max-width:900px){.hero-p-grid{grid-template-columns:1fr}.hero-p h1{max-width:15ch}.glance{max-width:34rem}}

/* ------------------------------------------------------------------ the sequence */
.seq{list-style:none;margin:0;padding:1.2rem 0 .6rem;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:.3rem;
  background:
    linear-gradient(var(--line-2),var(--line-2)) 12.5% 0/1px 100% no-repeat,
    linear-gradient(var(--line-2),var(--line-2)) 37.5% 0/1px 100% no-repeat,
    linear-gradient(var(--line-2),var(--line-2)) 62.5% 0/1px 100% no-repeat,
    linear-gradient(var(--line-2),var(--line-2)) 87.5% 0/1px 100% no-repeat}
.seq .lanes{grid-column:1/5;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:.8rem}
.seq .lanes span{justify-self:center;background:var(--ink);color:#fff;font:600 .9rem var(--display);padding:.5rem 1rem;border-radius:10px;white-space:nowrap}
.seq .lanes span:nth-child(n+2):nth-child(-n+3){background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
.sm{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:3.9rem;padding-bottom:.35rem;margin-inline:calc(100% / (2 * var(--k)))}
.sm .who{display:none}
.sm .lb{text-align:center;font-size:.9rem;color:var(--text);padding:0 .6rem .45rem;line-height:1.35}
.sm .lb code{font-size:.85em}
.sm .ln{position:relative;height:2px;background:var(--ink);transform-origin:left center}
.sm .ln::after{content:"";position:absolute;right:-1px;top:-5px;border:6px solid transparent;border-left:9px solid var(--ink);border-right:0}
.sm.l .ln{transform-origin:right center}
.sm.l .ln::after{right:auto;left:-1px;border-left:0;border-right:9px solid var(--ink)}
.sm.sealed .ln{background:var(--accent);height:3px}.sm.sealed .ln::after{border-left-color:var(--accent)}.sm.sealed.l .ln::after{border-right-color:var(--accent)}
.sm.s14{grid-column:1/5;--k:4}.sm.s23{grid-column:2/4;--k:2}.sm.s34{grid-column:3/5;--k:2}.sm.s12{grid-column:1/3;--k:2}
.sm.n3{grid-column:2/5;--k:1;margin-inline:0;align-items:center}
.sm.n3 .lb{background:var(--accent-soft);border:1px solid rgb(var(--accent-rgb) / .35);border-radius:10px;padding:.55rem .8rem;color:var(--accent-ink);max-width:24rem}
@media (max-width:760px){
  .seq{display:block;background:none;padding:0}
  .seq .lanes{display:none}
  .sm{margin:0 0 .6rem;min-height:0;padding:.8rem 1rem;background:#fff;border:1px solid var(--line);border-radius:12px;display:block}
  .sm .who{display:block;font:600 .8rem var(--sans);color:var(--accent-ink);margin-bottom:.25rem}
  .sm .lb{text-align:left;padding:0}
  .sm .ln{display:none}
  .sm.n3 .lb{background:none;border:0;padding:0}
}

/* ------------------------------------------------------------------ the tier funnel */
.funnel{display:grid;justify-items:center;gap:0}
.fn-step,.fn-q{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:.8rem 1.2rem;border-radius:14px;min-width:min(22rem,100%)}
.fn-step{background:var(--ink);color:#fff}
.fn-step span{color:var(--dark-muted);font-size:.88rem}
.fn-q{background:#fff;border:1.5px solid var(--ink);margin-top:2.2rem}
.fn-q::before,.fn-tiers::before{content:"";position:absolute;left:50%;top:-2.2rem;height:2.2rem;width:2px;background:var(--ink);transform-origin:top}
.fn-no{font-size:.85rem;color:#8A8D94}
.fn-tiers{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;width:100%;margin-top:2.2rem}
.tier{background:#fff;border:1px solid var(--line-2);border-radius:16px;padding:1.1rem 1.2rem}
.tier.on{border-color:var(--accent-ui);box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .12)}
.tier h3{margin:0 0 .3rem;font-size:1.15rem}
.tier p{margin:0 0 .7rem;color:var(--muted);font-size:.9rem}
.tier .lim{margin:.7rem 0 0;font-size:.82rem;color:var(--faint)}
.tl{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.tl li{font:500 .78rem var(--mono);padding:.3rem .5rem;border-radius:7px;background:var(--bg-2);border:1px solid var(--line);color:var(--ink)}
.tier.on .tl li{background:var(--accent-soft);border-color:rgb(var(--accent-rgb) / .35);color:var(--accent-ink)}
.tier.on .tl li.off{background:#fff;border-style:dashed;border-color:var(--line-2);color:var(--faint);text-decoration:line-through}
@media (max-width:820px){.fn-tiers{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ root and leaves */
.idc{margin:0;display:grid;gap:0;justify-items:stretch}
.id-root{background:var(--ink);color:#fff;border-radius:16px;padding:1rem 1.2rem;display:grid;gap:.15rem}
.id-root b{font:600 1.1rem var(--display)}
.id-root span{color:var(--dark-muted);font-size:.88rem}
.id-root code{background:none;border:0;padding:0;color:var(--accent-2);font-size:.85rem}
.id-arrow{height:1.6rem;width:2px;margin-left:2rem;background:repeating-linear-gradient(var(--ink) 0 4px,transparent 4px 8px)}
.leaf{background:#fff;border:1.5px solid var(--ink);border-radius:14px;padding:.85rem 1.1rem;margin-bottom:.7rem}
.leaf code{background:none;border:0;padding:0;font-size:.85rem;color:var(--text)}
.lf-h{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.lf-h b{font-size:.98rem}
.leaf .tag{font-size:.75rem;padding:.2rem .5rem;border-radius:999px;background:var(--bg-3);color:var(--muted)}
.leaf .tag.now{background:var(--accent-soft);color:var(--accent-ink)}
.leaf .bar{height:6px;border-radius:6px;background:var(--bg-3);margin:.6rem 0 .35rem;overflow:hidden}
.leaf .bar i{display:block;height:100%;width:100%;background:var(--accent);border-radius:6px;transform-origin:left}
.leaf.la{opacity:.6;border-color:var(--line-2)}
.leaf.la .bar i{background:#B8BBC1}
.lf-d{font-size:.8rem;color:var(--faint)}

/* ------------------------------------------------------------------ 1.x and 2.x */
.gens{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.gen{margin:0;border-radius:18px;padding:1.4rem;border:1px solid var(--line)}
.gen.v1{background:var(--bg-2)}
.gen.v2{background:#fff;border-color:var(--accent-ui);box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .1)}
.gen-tag{margin:0 0 .3rem;font:600 .85rem var(--sans);color:var(--muted)}
.gen.v2 .gen-tag{color:var(--accent-ink)}
.gen h3{margin:0 0 1rem;font-size:1.3rem}
.gen svg{width:100%;height:auto;display:block;margin-bottom:1rem}
.gen-list{margin:0;padding-left:1.1rem;display:grid;gap:.45rem;color:var(--text);font-size:.95rem}
.gv-host{fill:#fff;stroke:var(--ink);stroke-width:1.8}
.gv-relay{fill:var(--bg-3);stroke:#8A8D94;stroke-width:1.8;stroke-dasharray:5 4}
.gv-wallet{fill:var(--ink)}
.gv-t{font:600 13px var(--display);fill:var(--ink)}
.gv-t.light{fill:#fff}
.gv-s{font:500 10.5px var(--sans);fill:var(--muted)}
.gv-line{stroke:#8A8D94;stroke-width:2;fill:none}
.gv-line.on{stroke:var(--accent);stroke-width:3}
.gv-route{stroke:#B8BBC1;stroke-width:1.5;stroke-dasharray:3 4;fill:none}
.gv-issue{stroke:var(--ink);stroke-width:1.8;stroke-dasharray:3 3}
.gv-env{opacity:0}
.gv-env rect{fill:var(--ink)}
.gv-env text{font:600 10px var(--mono);fill:#fff}
.v2e rect{fill:var(--accent-ink)}
.kept{margin-top:1.4rem;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.kept-h{margin:0;font-weight:600;color:var(--ink)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.chips li{font-size:.85rem;padding:.35rem .7rem;border-radius:999px;background:var(--bg-2);border:1px solid var(--line);color:var(--text)}
@media (max-width:820px){.gens{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ motion for the new visuals
   The hero plays once on load, from CSS: roots, leaves issued, both approvals, the link, then a
   sealed call crosses back and forth. Below the fold each visual plays when it arrives (.in). */
@media (prefers-reduced-motion:no-preference){
  .hero-p .ver,.hero-p h1,.hero-p .lede,.hero-p .hero-actions{animation:rise .7s var(--ease-out) both}
  .hero-p h1{animation-delay:.07s}.hero-p .lede{animation-delay:.14s}.hero-p .hero-actions{animation-delay:.21s}
  .g-wallet,.g-host{transform-box:fill-box;transform-origin:center;animation:pop .5s cubic-bezier(.3,1.3,.5,1) both}
  .g-r .g-wallet{animation-delay:.12s}.g-l .g-host{animation-delay:.55s}.g-r .g-host{animation-delay:.67s}
  .g-side text{animation:rise .5s var(--ease-out) both;animation-delay:.3s}
  .g-issue{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .5s var(--ease-out) .35s forwards}
  .g-link{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .7s var(--ease-out) 1.1s forwards}
  .g-ok{transform-box:fill-box;transform-origin:center;animation:pop .45s cubic-bezier(.3,1.3,.5,1) both}
  .g-ok1{animation-delay:1.6s}.g-ok2{animation-delay:1.85s}
  .g-okt,.g-call{animation:rise .5s var(--ease-out) 2.1s both}
  .g-env{animation:g-cross 4.4s ease-in-out 2.6s infinite}
  .g-none rect,.g-none text{animation:rise .5s var(--ease-out) 2.3s both}
}
@keyframes g-cross{0%{opacity:0;transform:translate(214px,176px)}8%{opacity:1}42%{opacity:1;transform:translate(306px,176px)}50%{opacity:0;transform:translate(306px,176px)}58%{opacity:1;transform:translate(306px,176px)}92%{opacity:1;transform:translate(214px,176px)}100%{opacity:0;transform:translate(214px,176px)}}
.in.sm .ln,.in .sm .ln{animation:grow-x .5s var(--ease-out) both;animation-delay:calc(.15s + var(--r,0) * 110ms)}
.in.sm .lb,.in .sm .lb{animation:rise .45s var(--ease-out) both;animation-delay:calc(.25s + var(--r,0) * 110ms)}
.fn-q.in::before,.fn-tiers.in::before{animation:fn-drop .45s var(--ease-out) both}
@keyframes fn-drop{from{transform:scaleY(0)}to{transform:none}}
.in .tier.on .tl li{animation:pop .35s cubic-bezier(.3,1.3,.5,1) both}
.tier.on .tl li:nth-child(2){animation-delay:.06s}.tier.on .tl li:nth-child(3){animation-delay:.12s}.tier.on .tl li:nth-child(4){animation-delay:.18s}.tier.on .tl li:nth-child(5){animation-delay:.24s}.tier.on .tl li:nth-child(6){animation-delay:.3s}
.in .tier.on .tl li.off{animation:pop .35s cubic-bezier(.3,1.3,.5,1) .24s both,sw-strike .4s ease-out 1.4s both}
@keyframes sw-strike{from{background:var(--accent-soft);color:var(--accent-ink);text-decoration-color:transparent}to{background:#fff;color:var(--faint)}}
.in.idc .leaf.la .bar i,.in .leaf.la .bar i{animation:grow-x 1.4s var(--ease-out) .3s both}
.in.idc .leaf.la{animation:la-fade .5s ease-out 2.4s both}
@keyframes la-fade{from{opacity:1;border-color:var(--ink)}to{opacity:.6;border-color:var(--line-2)}}
.in.idc .leaf.lb{animation:rise .6s var(--ease-out) 1.8s both}
.in.idc .leaf.lb .bar i{animation:grow-x 1.2s var(--ease-out) 2.3s both}
.in.idc .leaf .tag{animation:pop .4s cubic-bezier(.3,1.3,.5,1) 2.6s both}
.in .v1e{animation:v1-go 4.6s ease-in-out .6s infinite}
@keyframes v1-go{0%{opacity:0;transform:translate(54px,30px)}8%{opacity:1}35%{transform:translate(170px,30px)}55%{transform:translate(170px,30px)}88%{opacity:1;transform:translate(286px,30px)}100%{opacity:0;transform:translate(286px,30px)}}
.in .gv-relay{animation:relay-look 4.6s ease-in-out .6s infinite}
@keyframes relay-look{0%,30%,60%,100%{fill:var(--bg-3)}38%,52%{fill:#FFE9D2}}
.in .v2e{animation:v2-go 3s ease-in-out .6s infinite}
@keyframes v2-go{0%{opacity:0;transform:translate(118px,82px)}10%{opacity:1}85%{opacity:1;transform:translate(222px,82px)}100%{opacity:0;transform:translate(222px,82px)}}
.in .chips li,.chips.in li{animation:pop .35s cubic-bezier(.3,1.3,.5,1) both;animation-delay:calc(.1s + var(--c,0) * 60ms)}
.chips li:nth-child(2){--c:1}.chips li:nth-child(3){--c:2}.chips li:nth-child(4){--c:3}.chips li:nth-child(5){--c:4}.chips li:nth-child(6){--c:5}.chips li:nth-child(7){--c:6}
.seq .sm:nth-child(3){--r:1}.seq .sm:nth-child(4){--r:2}.seq .sm:nth-child(5){--r:3}.seq .sm:nth-child(6){--r:4}.seq .sm:nth-child(7){--r:5}.seq .sm:nth-child(8){--r:6}.seq .sm:nth-child(9){--r:7}