/* Design system page: the rulebook. Live samples sit in dashed frames, every name sits in a code tag.
   Nothing here changes a shared class. It only lays the samples out. */

/* ---------- code tags ---------- */
.page-design main code{padding:.18em .5em;border-radius:7px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--line);color:var(--green-pale);font:500 .84em/1.35 var(--mono);overflow-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.page-design .band code{background:rgba(0,0,0,.07);box-shadow:inset 0 0 0 1px rgba(0,0,0,.22);color:inherit}
.page-design .band .sample{color:inherit;border-color:rgba(0,0,0,.5)}

/* ---------- first screen ---------- */
.dhero{padding:clamp(20px,5vw,60px) 0 clamp(16px,4vw,52px)}
.dhero__grid{display:grid;gap:20px}
.dhero__grid>*{min-width:0}
.dhero h1{margin-top:12px;max-width:14ch}
.dhero .lead{margin-top:12px;max-width:46ch}
.dhero .phead__act{margin-top:18px}
.plate{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 20px;padding:12px 14px;border-radius:var(--r-lg);border:1px dashed var(--line-3);background:rgba(255,255,255,.02)}
.plate__logo{display:block}
.plate__logo img{width:clamp(96px,27vw,118px);height:auto;filter:drop-shadow(0 16px 22px rgba(0,0,0,.85)) drop-shadow(0 0 30px rgba(99,217,54,.24))}
.plate__pulls{display:grid;gap:6px}
.plate__pull{position:relative;display:flex;align-items:center;gap:10px;min-height:40px;padding:4px 12px;border-radius:13px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid var(--line-2)}
.plate__pull::before{content:"";position:absolute;right:100%;top:50%;width:20px;border-top:1px dashed var(--line-3)}
.plate__pull .coin{font-size:1.3rem}
.plate__gloss{flex:none;width:1.5rem;height:1.5rem;border-radius:.42rem;background:linear-gradient(180deg,#444b44 0,#1a1e1a 47%,#000 48%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)}
.plate__pull>span:last-child{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
.plate__pull b{font:800 .98rem/1.25 var(--display);white-space:nowrap}
.page-design main .plate__pull code{padding:0;background:none;box-shadow:none;font-size:.76rem}
.plate figcaption{grid-column:1/-1;font-size:.86rem;font-weight:600;color:var(--text-3)}
@media (max-width:759.98px) and (max-height:720px){.plate{display:none}} /* short phones: keep the section list on the first screen */
@media (min-width:1000px){
  .dhero__grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:56px}
  .dhero .lead{margin-top:16px}
  .dhero .phead__act{margin-top:24px}
  .plate{gap:18px 34px;padding:28px 28px 24px}
  .plate__logo img{width:204px}
  .plate__pulls{gap:12px}
  .plate__pull{min-height:66px;padding:10px 18px;gap:16px;border-radius:16px}
  .plate__pull::before{width:34px}
  .plate__pull>span:last-child{display:grid;gap:2px}
  .plate__pull b{font-size:1.2rem}
  .plate__pull .coin{font-size:2.1rem}
  .plate__gloss{width:2.4rem;height:2.4rem;border-radius:.7rem}
  .page-design main .plate__pull code{font-size:.84rem}
  .plate figcaption{font-size:.92rem}
}

/* ---------- table of contents: sticks under the top bar ---------- */
.toc{position:sticky;top:var(--top);z-index:45;background:rgba(5,6,5,.8);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border-block:1px solid var(--line)}
.toc__in{position:relative}
.toc__list{--l:0px;--r:0px;position:relative;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:8px 0;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,transparent calc(var(--l)*.5),#000 var(--l),#000 calc(100% - var(--r)),transparent calc(100% - var(--r)*.5));mask-image:linear-gradient(90deg,transparent calc(var(--l)*.5),#000 var(--l),#000 calc(100% - var(--r)),transparent calc(100% - var(--r)*.5))}
.toc__list::-webkit-scrollbar{display:none}
.toc__list li{flex:none}
.toc.can-l .toc__list{--l:96px}
.toc.can-r .toc__list{--r:96px}
.toc .chip[aria-current]{background:rgba(99,217,54,.16);border-color:rgba(99,217,54,.6);color:#fff}
.toc__nudge{position:absolute;top:8px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#1a1f1a;border:1px solid var(--line-3);color:#fff;box-shadow:0 6px 18px -6px #000}
.toc__nudge:hover{background:#262c26}
.toc__nudge--l{left:var(--gut)}
.toc__nudge--r{right:var(--gut)}
.toc__nudge svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- sections: a sticky heading beside the samples ---------- */
.ds{padding-block:clamp(44px,7vw,92px);scroll-margin-top:60px;border-top:1px solid var(--line)}
#mark.ds,.ds--band,.ds--band+.ds{border-top:0}
.ds--flush{padding-bottom:0}
.ds__grid{display:grid;gap:24px}
.ds__grid>*{min-width:0}
.ds__head h2:focus{outline:none}
.ds__rule{margin-top:12px;max-width:34ch;font-size:var(--fs-lead);line-height:1.45;color:var(--text-2)}
.ds__body{display:grid;align-content:start;gap:18px}
.ds__body>*{min-width:0}
.ds__h3{margin-top:22px;font-size:1.32rem}
.ds__body>.ds__h3:first-child,.comp>.ds__h3:first-child{margin-top:0}
.ds__p{max-width:62ch;color:var(--text-2)}
.ds__now{font-size:.95rem;font-weight:600;color:var(--green-pale)}
.ds__now:empty{display:none}
.band .ds__rule,.band .ds__p{color:inherit;opacity:.86}
@media (min-width:1000px){
  .ds__grid{grid-template-columns:250px minmax(0,1fr);gap:64px}
  .ds__head{position:sticky;top:calc(var(--top) + 90px);align-self:start}
}

/* ---------- the sample frame ---------- */
.spec{display:grid;grid-template-rows:1fr auto;border-radius:var(--r-lg);border:1px dashed var(--line-3);background:rgba(255,255,255,.016)}
.spec--top{position:relative;z-index:6}
.spec__stage{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:clamp(16px,2.6vw,26px)}
.spec__stage--col{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:14px}
.spec__cap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:12px clamp(16px,2.6vw,26px) 14px;border-top:1px dashed var(--line-2);font-size:.9rem;line-height:1.45;color:var(--text-2)}
.spec__cap strong{color:var(--text)}
.spec__cap>span:not(.sample):not(.pill){flex-basis:100%}
.rules{display:grid;gap:10px}
.rules li{position:relative;padding:14px 16px 14px 48px;border-radius:var(--r-md);background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text-2)}
.rules li::before{content:"";position:absolute;left:16px;top:16px;width:20px;height:20px;border-radius:50%;background:var(--green);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 12px rgba(99,217,54,.5)}
.rules li::after{content:"";position:absolute;left:22px;top:22px;width:8px;height:5px;border-left:2.5px solid var(--green-ink);border-bottom:2.5px solid var(--green-ink);transform:rotate(-45deg)}
.rules b{display:block;color:var(--text)}
@media (min-width:760px){.rules{grid-template-columns:1fr 1fr}}

/* ---------- 1. the mark ---------- */
.markpair{display:grid;gap:18px}
.clear{justify-content:center;padding:18px;background:#000;border-radius:25px 25px 0 0}
.clear__zone{position:relative;flex:1;max-width:520px;aspect-ratio:1992/1552;border:1px dashed rgba(255,255,255,.42)}
.clear__mark{position:absolute;left:24.9%;top:31.96%;display:block;width:50.2%}
.clear__mark img{display:block;width:100%;height:auto}
.clear__mark::after{content:"";position:absolute;inset:0;border:1px dashed rgba(140,240,96,.6)}
.clear__l{position:absolute;left:45.7%;top:32.05%;width:14.9%;height:31.93%;border:1.5px solid var(--orange-hi);border-radius:3px}
.clear__l i,.clear__m i{position:absolute;padding:1px 6px;border-radius:6px;background:var(--orange);color:var(--orange-ink);font:800 .72rem/1.4 var(--sans);font-style:normal;white-space:nowrap}
.clear__l i{left:50%;top:100%;transform:translate(-50%,4px)}
.clear__m{position:absolute;background:var(--orange-hi)}
.clear__m--t,.clear__m--b{left:33%;width:1.5px;height:31.96%}
.clear__m--t{top:0}
.clear__m--b{bottom:0}
.clear__m--l,.clear__m--r{top:50%;height:1.5px;width:24.9%}
.clear__m--l{left:0}
.clear__m--r{right:0}
.clear__m--t i,.clear__m--b i{left:6px;top:50%;transform:translateY(-50%)}
.clear__m--l i,.clear__m--r i{left:50%;bottom:5px;transform:translateX(-50%)}
.clear__m::before,.clear__m::after{content:"";position:absolute;background:var(--orange-hi)}
.clear__m--t::before,.clear__m--t::after,.clear__m--b::before,.clear__m--b::after{left:-4px;width:9.5px;height:1.5px}
.clear__m--t::before,.clear__m--b::before{top:0}
.clear__m--t::after,.clear__m--b::after{bottom:0}
.clear__m--l::before,.clear__m--l::after,.clear__m--r::before,.clear__m--r::after{top:-4px;width:1.5px;height:9.5px}
.clear__m--l::before,.clear__m--r::before{left:0}
.clear__m--l::after,.clear__m--r::after{right:0}
.tileon{align-items:stretch;gap:0;padding:0;border-radius:25px 25px 0 0;overflow:hidden}
.tileon__half{flex:1;display:grid;justify-items:center;align-content:center;gap:10px;min-height:210px;padding:22px 12px 14px;background:var(--bone);color:#0b0e0b}
.tileon__half--busy{background:repeating-linear-gradient(135deg,#63d936 0 14px,#ff8a24 14px 28px,#eef3ea 28px 42px)}
.tileon__half img{width:min(100%,128px);height:auto;filter:drop-shadow(0 16px 16px rgba(0,0,0,.4))}
.tileon__half em{padding:2px 10px;border-radius:999px;background:#0b0e0b;color:#fff;font-style:normal;font-size:.76rem;font-weight:700}
.donts{display:grid;gap:12px}
.dont{display:grid;grid-template-columns:132px minmax(0,1fr);align-items:center;gap:14px}
.dont__stage{position:relative;display:grid;place-items:center;height:92px;border-radius:var(--r-md);background:#000;border:1px solid var(--line-2);overflow:hidden}
.dont__stage img{width:104px;height:auto}
.dont__stage--stretch img{transform:scale(1.5,.6)}
.dont__stage--tint img{filter:hue-rotate(75deg) saturate(1.35)}
.dont__stage--light{background:var(--bone)}
.dont__stage::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - 1.6px),var(--danger) calc(50% - 1.6px),var(--danger) calc(50% + 1.6px),transparent calc(50% + 1.6px))}
.dont p{display:flex;align-items:center;gap:8px;font-size:.98rem;font-weight:700}
.dont .icon{color:var(--danger)}
.files{border-radius:var(--r-md);border:1px solid var(--line);background:rgba(255,255,255,.03)}
.files li{display:grid;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line);font-size:.95rem;color:var(--text-2)}
.files li:last-child{border-bottom:0}
.files li>span:first-child{display:flex;flex-wrap:wrap;gap:6px}
@media (min-width:620px){
  .donts{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .dont{grid-template-columns:1fr;align-items:start;gap:10px}
  .dont__stage{height:150px}
  .dont__stage img{width:150px}
  .dont p{align-items:flex-start}
}
@media (min-width:760px){
  .markpair{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .files li{grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:center;gap:20px}
}

/* ---------- 2. color ---------- */
.mean{display:grid;gap:12px}
.mean__i{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 16px;padding:18px 20px}
.mean__i .coin,.mean__w{grid-row:1/3;font-size:2.3rem}
.mean__w{flex:none;display:block;width:1.15em;height:1.15em;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff 0,#eef3ea 46%,#a9b3a5 100%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5),0 0 14px rgba(255,255,255,.35)}
.mean__i b{font:800 1.55rem/1.1 var(--display)}
.mean__i span:last-child{color:var(--text-2)}
.sws{display:grid;gap:8px}
.sw{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:5px 14px;padding:8px 12px 8px 8px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid var(--line)}
.sw__chip{grid-row:1/3;display:block;width:56px;height:56px;border-radius:12px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),inset 0 1px 0 rgba(255,255,255,.3)}
.sw--line .sw__chip{background:#0b0d0b;box-shadow:inset 0 0 0 4px var(--c)}
.sw__id{align-self:end;display:flex;flex-wrap:wrap;gap:6px}
.page-design main .sw [data-val]{color:var(--text-2)}
.sw__role{align-self:start;font-size:.92rem;line-height:1.35;color:var(--text-2)}
.sw__role .pill{height:20px;margin-left:2px;font-size:.68rem;vertical-align:1px}
.cons{display:grid;gap:10px}
.con{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:3px 14px;padding:8px 14px 8px 8px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid var(--line)}
.con__aa{grid-row:1/3;display:grid;place-items:center;width:64px;height:64px;border-radius:12px;background:var(--b);color:var(--f);font:800 1.7rem/1 var(--display);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.con__id{grid-column:2;align-self:end;font-size:.88rem;color:var(--text-2)}
.con__n{grid-column:2;align-self:start;font-size:.95rem;color:var(--text-2)}
.con__n b{margin-right:3px;font:800 1.5rem/1 var(--display);color:var(--text);font-variant-numeric:tabular-nums}
.con .pill{grid-column:3;grid-row:1/3}
@media (min-width:760px){
  .mean{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mean__i{grid-template-columns:1fr;gap:6px;padding:24px}
  .mean__i .coin,.mean__w{grid-row:auto;margin-bottom:8px;font-size:2.7rem}
  .sws,.cons{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- 3. type ---------- */
.fams{display:grid;gap:14px}
.fam{display:grid;align-content:start;gap:8px;padding:22px}
.fam__role{font:700 .78rem/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--text-3)}
.fam__big{display:flex;align-items:center;min-height:86px}
.fam__big--d{font:800 3.1rem/1 var(--display);letter-spacing:-.012em;color:var(--orange-hi)}
.fam__big--s{font:500 1.36rem/1.3 var(--sans)}
.page-design main .fam__big--m code{padding:.3em .6em;font-size:1.3rem}
.fam__name{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:800 1.35rem/1.2 var(--display)}
.fam__use{font-size:.96rem;color:var(--text-2)}
.scale__row{display:grid;gap:10px;padding:18px 0;border-bottom:1px solid var(--line)}
.scale__row:first-child{border-top:1px solid var(--line)}
.scale__s{overflow-wrap:anywhere}
.scale__s--hero{font:800 var(--fs-hero)/.98 var(--display);letter-spacing:-.02em;color:var(--green-hi)}
.scale__s--h1{font:800 var(--fs-h1)/1.04 var(--display);letter-spacing:-.012em}
.scale__s--h2{font:800 var(--fs-h2)/1.04 var(--display);letter-spacing:-.012em;color:var(--orange-hi)}
.scale__s--h3{font:800 var(--fs-h3)/1.15 var(--display);letter-spacing:-.012em}
.scale__s--lead{font-size:var(--fs-lead);line-height:1.5;color:var(--text-2)}
.scale__s--body{max-width:60ch;color:var(--text-2)}
.scale__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.scale__meta .pill:empty{display:none}
.wts{display:grid;gap:8px}
.wts li{display:grid;grid-template-columns:52px 44px minmax(0,1fr);align-items:center;gap:12px;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid var(--line);font-size:.95rem;color:var(--text-2)}
.wts__aa{font-size:1.8rem;line-height:1;color:var(--text)}
.wts__aa--d{font-family:var(--display)}
.wts b{font:800 1.08rem/1 var(--display);color:var(--text)}
.typekv,.bps,.lay__kv{padding:2px 16px;border-radius:var(--r-md);background:rgba(255,255,255,.035);border:1px solid var(--line)}
.typekv dd{font-weight:600}
@media (max-width:759.98px){.typekv>div{flex-direction:column;align-items:flex-start;gap:4px}.typekv dd{text-align:left}}
@media (min-width:760px){.wts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.fams{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- 4. shape and space ---------- */
.radii{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.radii li{display:grid;justify-items:start;align-content:start;gap:6px;padding:16px;border-radius:var(--r-md);background:rgba(255,255,255,.035);border:1px solid var(--line);font-size:.9rem;line-height:1.4;color:var(--text-2)}
.radii i{display:block;width:78px;height:78px;margin-bottom:8px;background:linear-gradient(180deg,#2e352e,#101310);box-shadow:inset 0 0 0 1.5px var(--green),inset 0 2px 0 rgba(255,255,255,.2)}
.radii .radii__pill{width:min(100%,128px);height:48px;margin:15px 0 23px}
.radii b{font:800 1.25rem/1 var(--display);color:var(--text)}
.radii .pill{height:20px;font-size:.68rem}
.lay{display:grid;gap:16px}
.lay__page{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;grid-template-rows:auto 132px auto;border-radius:18px;border:1px solid var(--line-3);background:#0a0c0a;overflow:hidden;font-size:.84rem;color:var(--text-2)}
.lay__top,.lay__tab{grid-column:1/-1;padding:9px 12px;background:rgba(255,255,255,.075)}
.lay__top{border-bottom:1px solid var(--line-2)}
.lay__tab{border-top:1px solid var(--line-2)}
.lay__gut{display:grid;place-items:center;background:repeating-linear-gradient(135deg,rgba(255,138,36,.3) 0 6px,transparent 6px 12px)}
.lay__gut i{font-style:normal;writing-mode:vertical-rl}
.lay__wrap{display:grid;place-items:center;border-inline:1px dashed var(--line-3);background:rgba(99,217,54,.08)}
.lay__kv dt,.bps dt{flex:none}
.lay__kv dd,.bps dd{flex:1;text-align:left;font-weight:500;color:var(--text-2)}
.lay__kv dt{width:96px}
.bps dt{width:74px;font:800 1.05rem/1.3 var(--display);color:var(--text)}
.rhy{display:grid;gap:16px;align-items:start}
.rhy__box{border-radius:18px;border:1px solid var(--line-2);overflow:hidden;background:repeating-linear-gradient(135deg,rgba(99,217,54,.24) 0 6px,transparent 6px 12px)}
.rhy__sec span{display:grid;place-items:center;height:44px;background:#0d100d;border-block:1px dashed var(--line-3);font-size:.84rem;color:var(--text-2)}
.rhy figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:10px}
.rhy .pill:empty{display:none}
@media (min-width:760px){
  .radii{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rhy{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){.lay{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:26px}}

/* ---------- 5. surfaces ---------- */
.surf{display:grid;gap:16px}
.surf__demo{flex:1;display:grid;align-content:end;gap:4px;min-height:150px;padding:22px;color:var(--text-2)}
.surf__t{font:800 1.4rem/1.1 var(--display);color:var(--text)}
.bands{margin-top:clamp(30px,5vw,56px)}
.bands__in{display:grid;justify-items:start;gap:10px;padding-block:clamp(26px,4vw,42px)}
.bands__t{font:800 var(--fs-h2)/1.04 var(--display);letter-spacing:-.012em}
@media (min-width:760px){
  .surf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bands__in{grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:28px}
}

/* ---------- 6. components ---------- */
.comps{gap:6px 20px}
.comp{display:grid;align-content:start;gap:14px;margin-top:22px}
.comp:first-child{margin-top:0}
.onbone{display:inline-flex;padding:7px;border-radius:999px;background:var(--bone)}
.spec__stage .link{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px}
.coins{gap:22px}
.coins>.coin{font-size:2.6rem}
.fields{display:grid;align-items:start;gap:16px}
.field.is-focus .input{border-color:var(--green);box-shadow:0 0 0 4px rgba(99,217,54,.18)}
.spec__stage .tabs{align-self:flex-start}
.spec__stage .tabs--o{margin-top:8px}
.page-design .tab{position:relative}
.page-design .tab::after,.page-design .tube__clear::after{content:"";position:absolute;inset:-4px 0}
.page-design .tube__clear::after{inset:-4px}
.tabp{padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text-2)}
.tubeopen{display:grid;gap:8px}
.tubeopen .tube{border-color:var(--green);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -14px 26px -16px rgba(99,217,54,.55),0 0 0 4px rgba(99,217,54,.16),0 0 50px -8px rgba(99,217,54,.5)}
.tubeopen .suggest{position:static;max-height:none;animation:none}
.calm .tube.is-loading .tube__liquid{animation:none;opacity:1;transform:translateX(-36%)}
.is-paused .tube__liquid,.is-paused.tube .tube__liquid,.is-paused .sk{animation-play-state:paused}
.page-design .steps h4{margin:0;font:800 1.25rem/1.15 var(--display);letter-spacing:-.012em}
.spec__stage .timeline p{color:var(--text-2)}
.spec__stage .meter+.meter{margin-top:2px}
.parts{gap:14px 24px}
.parts__stat{display:grid}
.parts .stat__n{font-size:2.1rem}
@media (min-width:760px){
  .fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fields__wide{grid-column:1/-1}
}
@media (min-width:900px){
  .comps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .comp{grid-column:1/-1}
  .comp--half{grid-column:auto}
  .comp:nth-child(2),.comp:nth-child(3){margin-top:22px}
}

/* ---------- 7. motion ---------- */
.rvdemo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rvdemo__i{display:grid;justify-items:start;gap:6px;padding:14px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid var(--line-2)}
.rvdemo__i:last-child{grid-column:1/-1}
.rvdemo__i .icon{color:var(--green-hi)}
.rvdemo__i b{font:800 1.05rem/1.2 var(--display)}
.page-design main .rvdemo__i code{font-size:.72rem;white-space:nowrap;padding-inline:.4em}
.eases{display:grid;gap:12px}
.easeq{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:14px;padding:16px;border-radius:var(--r-md);background:rgba(255,255,255,.035);border:1px solid var(--line);font-size:.93rem;color:var(--text-2)}
.easeq__c{width:72px;height:auto;overflow:visible}
.easeq__ax{fill:none;stroke:var(--line-3);stroke-width:1.5}
.easeq__p{fill:none;stroke:var(--green-hi);stroke-width:4.5;stroke-linecap:round}
.easeq__p--o{stroke:var(--orange-hi)}
.easeq p{display:flex;flex-wrap:wrap;gap:6px}
.page-design main .easeq code{white-space:nowrap}
.easeq p+p{margin-top:8px}
.run{position:relative;display:block;height:22px;margin-top:12px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.run i{position:absolute;inset:3px;display:block}
.run i::before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:var(--green);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 10px rgba(99,217,54,.8)}
.run--o i::before{background:var(--orange);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 10px rgba(255,138,36,.8)}
.anim .run i{transition:transform var(--dur,.7s) var(--fn,var(--ease))}
.run.go i,.calm .run i{transform:translateX(calc(88% - 16px))}
.anim .run.reset i{transition:none}
.durs{display:grid;gap:10px}
.durs li{padding:14px 16px;border-radius:var(--r-md);background:rgba(255,255,255,.035);border:1px solid var(--line);font-size:.93rem;color:var(--text-2)}
.durs b{margin-inline:4px;font:800 1.1rem/1 var(--display);color:var(--text)}
.durs .pill{height:20px;font-size:.68rem}
.keys{display:flex;flex-wrap:wrap;gap:8px}
@media (min-width:760px){
  .rvdemo{grid-template-columns:repeat(5,minmax(0,1fr))}
  .rvdemo__i:last-child{grid-column:auto}
  .eases{grid-template-columns:repeat(2,minmax(0,1fr))}
  .easeq{grid-template-columns:92px minmax(0,1fr);gap:16px}
  .easeq__c{width:92px}
  .durs{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- 8. voice, on the bone band ---------- */
.brandline{font:800 clamp(2.5rem,6.3vw,4.6rem)/1 var(--display);letter-spacing:-.02em}
.brandline span{display:inline-block;white-space:nowrap}
.vrules{display:grid;gap:10px;margin-top:10px}
.vrules li{display:grid;gap:2px;padding:14px 16px 14px 18px;border-radius:var(--r-md);background:rgba(255,255,255,.62);border:1px solid rgba(11,14,11,.12);border-left:4px solid #0b0e0b}
.vrules b{font:800 1.14rem/1.2 var(--display)}
.vrules li>span{opacity:.86}
.vrules .sample{vertical-align:1px}
.vpair{display:grid;gap:14px;margin-top:10px}
.vname,.vsay{padding:22px;border-radius:var(--r-lg);background:#0b0e0b;color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 26px 50px -30px rgba(11,14,11,.8)}
.vname>p:last-child{color:var(--text-2)}
.vname__k{font:700 .78rem/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--text-3)}
.vname__n{margin:12px 0 6px;font:800 3.3rem/1 var(--display);letter-spacing:-.02em;color:var(--green-hi)}
.vsay ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.vsay li{padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.07);font-weight:600}
@media (min-width:760px){
  .vrules{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vpair{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
}

/* ---------- 9. access ---------- */
.acc{display:grid;gap:14px}
.acc__i{display:grid;align-content:start;gap:8px}
.acc__i h3{font-size:1.3rem}
.acc__i>p{font-size:.97rem;color:var(--text-2)}
.acc__i>.acc__demo{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:8px;padding-top:16px;border-top:1px dashed var(--line-2)}
.acc__i>.acc__taps{padding-top:38px}
.tapm{position:relative;display:inline-flex;outline:1.5px dashed var(--orange-hi);outline-offset:1px;border-radius:4px}
.tapm::after{content:attr(data-size);position:absolute;left:50%;bottom:calc(100% + 7px);transform:translateX(-50%);font:700 .74rem/1 var(--sans);color:var(--orange-hi);white-space:nowrap}
.ring{outline:2px solid var(--green-hi);outline-offset:3px;pointer-events:none}
.ring--k{outline-color:#000}
.acc__band{display:inline-flex;padding:11px 14px;border-radius:16px;background:linear-gradient(180deg,#9df273,#62d835)}
.acc__small{font-size:.68rem;font-weight:700;letter-spacing:.12em;color:var(--text-3)}
.acc__i>.acc__marks{display:grid;gap:4px}
.acc__marks span{padding:5px 10px;border-radius:8px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);font-size:.8rem;font-weight:600;color:var(--text-2)}
.acc__marks .is-main{padding-block:14px;border-color:rgba(99,217,54,.6);background:rgba(99,217,54,.14);color:#fff}
.dsend{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:22px;padding:22px 24px;border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid var(--line-2)}
.dsend p{font:800 1.35rem/1.2 var(--display)}
.sheet__p{margin-bottom:18px;color:var(--text-2)}
@media (min-width:760px){.acc{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* keep every specimen inside a 320 px screen: grid tracks may shrink, long code may wrap */
.spec{grid-template-columns:minmax(0,1fr)}
.spec>*,.spec__stage>*,.tubeopen>*{min-width:0}
.tubeopen{grid-template-columns:minmax(0,1fr)}
.spec__stage--col>.tube,.spec__stage--col>form.tube{width:100%;max-width:100%}
.spec__cap code,.ds code{overflow-wrap:anywhere;white-space:normal}
.page-design main .easeq code{white-space:normal;overflow-wrap:anywhere}
.page-design main .easeq p{min-width:0;display:flex;flex-wrap:wrap;gap:4px 6px}
.comp{grid-template-columns:minmax(0,1fr)}
.comp>*,.ds__body>*,.fields>*{min-width:0}
.run{overflow:hidden}
@media (max-width:379.98px){.page-design main .rvdemo__i code{white-space:normal;overflow-wrap:anywhere}}