/*
 * What the market adds to the landing's design system (landing.css).
 *
 * landing.css is the landing's own CSS, copied verbatim. This file holds only
 * what the landing does not have, built from the same tokens: the few tokens
 * its rules use but never declare, the accessibility floor, the header held
 * formed, and the market's own parts (the orbit in the hero, the seal, the
 * shelf's cards, the entry, the plugin page's copy buttons and lightbox).
 * Dark only, as the landing is.
 */

/* ── tokens ───────────────────────────────────────────────────── */
:root{
 /* Named by landing rules (.pl-act, .pl-go, .pl-fact, the footer mark) but
    never declared there. */
 --fg:var(--txt);--bg:var(--void);--success:var(--run);
 /* The landing's curves, named once. */
 --out:cubic-bezier(.16,1,.3,1);
 --lift:cubic-bezier(.2,.7,.3,1);
  --card-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 24px 60px -34px rgba(0,0,0,.9);
 --card-shadow-up:0 1px 0 rgba(255,255,255,.05) inset,0 34px 80px -34px rgba(0,0,0,.95),0 0 0 1px rgba(167,139,250,.08);
 --glow:rgba(167,139,250,.16);
}

/* ── the header, formed ───────────────────────────────────────────
   On the landing the market's planet flies into the header as the page
   scrolls, and the header builds itself once it has landed. Here it is
   already home: every part of that build held at its end. The mark keeps its
   orbit, the caret its blink, the rule its sweep. */
.hd-bar,.hd-nav{opacity:1;animation:none;transform:none}
.hd-bar{height:calc(62px + var(--safe))}
.hd-lock .mk,.hd-lock .lk-cue,.hd-lock .lk-pl,.hd-lock .lk-wi,.hd-lock .lk-d1,.hd-lock .lk-d2,.hd-lock .lk-d3{
 animation:none;opacity:1;transform:none;clip-path:none}
.hd-lock .lk-car{animation:blink 1.15s steps(1) infinite;transform:none}
.hd-rule{animation:none;transform:scaleX(1)}
.hd-sweep{opacity:1;top:calc(61px + var(--safe));
 animation:sweep 7s cubic-bezier(.55,0,.45,1) infinite;animation-timeline:auto;animation-range:normal}

/* ── page furniture ───────────────────────────────────────────── */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ic-s{width:14px;height:14px;display:inline-block;flex:none;vertical-align:-2px}
.skip{position:absolute;left:16px;top:-60px;z-index:95;padding:10px 16px;border-radius:10px;
 font:13px var(--mono);background:var(--vio);color:var(--void)}
.skip:focus{top:12px}
main{display:block}
code{font-family:var(--mono)}
/* The browser's own surfaces, in the landing's colours: the selection, the
   text caret (the lockup's green one), the scrollbar. A focused control
   scrolled into view clears the fixed header. */
::selection{background:rgba(167,139,250,.32)}
input{caret-color:var(--run)}
html{scrollbar-color:rgba(167,139,250,.28) var(--void);scroll-padding-top:calc(76px + var(--safe))}
/* The page's scroll padding already clears the header; the landing's own
   section margin would add a second 84px on top of it. */
.sec{scroll-margin-top:0}
.pl-count,.pl-chip-n,.seal-rows dd,.pl-fact dd{font-variant-numeric:tabular-nums}
/* The landing positions its sections only inside its scroll scene; the
   market has no scene, and the orbs need a box to sit in. */
.sec{position:relative}
.sec>.w{position:relative;z-index:1}

/* ── the hero: the pass, the sentence, the seal ───────────────── */
.one{isolation:isolate;overflow-x:clip;justify-content:flex-start;gap:0;padding-top:calc(88px + var(--safe));padding-bottom:8px}
/* Rhythm: the landing's 104px between sections, and its last section's
   shorter foot (#get: 104px 72px), so the page ends on the footer, not on
   a band of nothing. */
#browse{padding-bottom:56px}
#list-yours{padding-bottom:72px}
/* The pass: the mark's own drawing at the size of a hero. The world, its
   steep orbit, the live contact, and one satellite for each listed plugin,
   passing behind the world and in front of it. */
/* Sized by the screen's height too, so on a laptop the seal's title clears
   the fold. */
.pass{position:relative;width:min(400px,84vw,40vh);aspect-ratio:1;margin-bottom:6px}
.pass::before{content:"";position:absolute;inset:-18%;z-index:-1;border-radius:50%;pointer-events:none;
 background:radial-gradient(closest-side,rgba(167,139,250,.24),rgba(124,92,245,.08) 55%,transparent 100%);
 animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.75;transform:scale(.97)}50%{opacity:1;transform:scale(1.03)}}
.pass svg{display:block;width:100%;height:100%;overflow:visible;transform:translate3d(var(--px,0),var(--py,0),0)}
.pass .sat-p{color:#c4b5fd}
.pass .far{color:#8b88a4}
.pass .star{fill:#f2f1f8;animation:twinkle 4.6s ease-in-out infinite}
.pass .star:nth-of-type(2n){animation-duration:6.1s;animation-delay:-2s}
.pass .star:nth-of-type(3n){animation-duration:3.7s;animation-delay:-1.1s}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.7}}
.one .kick{margin-top:4px}
.one .oneline{margin:22px auto 0}
/* The claim on its own line, as the landing sets it on a phone. */
.one .oneline b{display:block;margin-top:.04em}
.one .cta{margin-top:30px}
.ctap{text-decoration:none}
.ctap .cmd b{font-weight:400}
.ctad{margin-top:14px}
.seal{width:min(660px,100%);margin-top:64px;text-align:left}
.seal-file{margin-left:8px;font:10.5px var(--mono);color:var(--dim2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seal-body{padding:18px 22px 16px}
.seal-title{display:inline-block;font-size:19px;font-weight:650;letter-spacing:-.01em;color:var(--txt)}
.seal-title:hover{color:var(--vio)}
.seal-rows{margin-top:12px;border-top:1px solid var(--line)}
.seal-rows>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.seal-rows dt{font:10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim2);padding-top:2px}
.seal-rows dd{margin:0;font:12.5px/1.6 var(--mono);color:var(--txt);overflow-wrap:anywhere}
.seal .sha{color:var(--run);transition:text-shadow .6s var(--out)}
.seal.sealed .sha{text-shadow:0 0 18px rgba(52,211,153,.35)}
.seal-foot{display:flex;gap:9px;align-items:flex-start;margin-top:12px;font:12px/1.6 var(--mono);color:var(--dim)}
.seal-foot .ic-s{color:var(--run);margin-top:2px}
/* When the hash has settled, a green line reads down the window once, the
   way the app reads the files, and the check lands. */
.seal{position:relative}
.seal::after{content:"";position:absolute;left:0;right:0;top:0;height:40%;pointer-events:none;opacity:0;
 background:linear-gradient(180deg,transparent,rgba(52,211,153,.10) 70%,rgba(52,211,153,.55) 99%,transparent);
 transform:translateY(-100%)}
.seal.sealed::after{animation:read-down 1.1s cubic-bezier(.55,0,.45,1) .1s}
@keyframes read-down{0%{opacity:1;transform:translateY(-100%)}90%{opacity:1}100%{opacity:0;transform:translateY(250%)}}
.seal.sealed .seal-foot .ic-s{animation:pop .6s var(--pop) 1s both}
.hero-facts{margin-top:16px;font:12px var(--mono);color:var(--dim2);text-align:center;min-height:1.6em}

/* ── the catalogue ────────────────────────────────────────────── */
.sec .sub code{font:13px var(--mono);color:var(--vio)}
.pl-tools{margin-top:8px}
.pl-pick{display:contents}
.pl-sort{cursor:pointer}
.pl-q .ic{color:var(--dim2)}
.pl-q input::-webkit-search-cancel-button{filter:grayscale(1)}
.pl-chip{transition:color .15s,border-color .15s,background .15s,transform .16s var(--out)}
.pl-chip:active{transform:scale(.96)}
.pl-chip.more{border-style:dashed}
.pl-shelf,.pl-grid{position:relative}
/* Two cards a row down to a tablet held upright (the landing's 380px floor
   drops to one a row at 860px). */
.pl-grid{grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr))}
.pl-none-more{margin:16px 0 0;font-size:13.5px;color:var(--dim)}
.pl-none-more a{color:var(--vio)}
/* Key caps promise keys; a touch screen has none. */
@media (pointer:coarse){.pl-q kbd,.ctap .enter{display:none}}
@media(max-width:560px){.pl-sort{flex:1 1 calc(50% - 5px);min-width:0}}

/* The card: the landing's, with the whole card one link, a light that
   follows the pointer, and a lift that the shadow answers. Its tint sits on
   a solid ground, so an orb or the satellite passing behind stays behind. */
.pl-card{position:relative;isolation:isolate;box-shadow:var(--card-shadow);
 background:linear-gradient(180deg,rgba(167,139,250,.07),rgba(167,139,250,.02)),#0a0912;
 transition:border-color .2s,transform .35s var(--lift),box-shadow .35s var(--lift)}
.pl-card.pre{opacity:0}
/* The light sits under the card's content (z-index -1 inside the card's own
   stacking context). Nothing between the title link and the card is
   positioned, so the link's ::after stretches over the whole card. */
.pl-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;
 background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),var(--glow),transparent 60%);
 transition:opacity .3s}
.pl-card .pl-shot{isolation:isolate}
.pl-card .pl-shot img{transition:transform .7s var(--out)}
.pl-card .pl-shot::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 48%,transparent 62%);
 transform:translateX(-120%);transition:transform .9s var(--out)}
.pl-name::after{content:"";position:absolute;inset:0;border-radius:16px;z-index:2}
.pl-card:has(.pl-name:focus-visible){outline:2px solid var(--vio);outline-offset:3px}
.pl-name:focus-visible{outline:none}
.pl-card .pl-links a{position:relative;z-index:3}
@media (hover:hover) and (pointer:fine){
 .pl-card:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-up);border-color:var(--line2)}
 .pl-card:hover::before{opacity:1}
 .pl-card:hover .pl-shot img{transform:scale(1.035)}
 .pl-card:hover .pl-shot::after{transform:translateX(120%)}
 .pl-card:hover .pl-name{color:var(--vio)}
}
.pl-card:active{transform:translateY(-2px) scale(.99)}
.pl-card h3{margin:0;font:inherit}
/* The landing lets the description grow to fill a tall card, which shows a
   fifth, cut line under the four it clamps to. The box stays four lines; the
   install row keeps the card's foot. */
.pl-card .pl-desc{flex:none}
/* No screenshot: the manifest, a small window leaning in the frame, that
   straightens when the card is picked up. */
.pl-manifest{position:absolute;left:11%;right:11%;top:12%;border:1px solid var(--line2);border-radius:10px;overflow:hidden;
 background:rgba(11,10,19,.92);box-shadow:0 30px 60px -30px #000;transform:rotate(-2.2deg) translateY(3%);
 transition:transform .7s var(--out)}
.pl-manifest .wbar{padding:5px 10px}
.pl-manifest .wbar s{width:7px;height:7px}
.pl-manifest code{display:block;padding:12px 14px 14px;font:11.5px/1.75 var(--mono);color:var(--dim)}
/* Long values wrap under themselves rather than being cut. */
.pl-manifest .l{display:block;padding-left:2ch;text-indent:-2ch;overflow-wrap:anywhere}
.pl-manifest .k{color:var(--vio)}
.pl-manifest .v{color:var(--txt)}
.pl-manifest .v.s{color:var(--run)}
.pl-manifest .v.w{color:var(--wait)}
@media (hover:hover) and (pointer:fine){.pl-card:hover .pl-manifest{transform:none}}
.pl-ic .ic{width:20px;height:20px}
.pl-inst{gap:10px;padding:9px 12px}
.pl-inst .ic-s{color:var(--run)}
.pl-inst code{color:var(--dim)}
.pl-inst code b{font-weight:400;color:var(--txt)}
.pl-inst .lic{flex:none;font:11px var(--mono);color:var(--dim)}
.pl-links{flex-wrap:wrap;align-items:center}
.pl-links a{display:inline-flex;align-items:center;gap:5px}
.pl-links .ic-s{width:12px;height:12px}

/* No hole in the grid: a card left alone on the last row (one match, or an
   odd count) takes the whole row, its picture beside its text. */
@media(min-width:761px){
 .pl-grid>.pl-card:last-child:nth-child(odd):not(.ghost){grid-column:1/-1;display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:28px;row-gap:12px;align-content:start}
 .pl-grid>.pl-card:last-child:nth-child(odd):not(.ghost)>*{grid-column:2}
 .pl-grid>.pl-card:last-child:nth-child(odd):not(.ghost)>.pl-shot{grid-column:1;grid-row:1/span 8;
  align-self:center;margin:0;border-radius:12px}
 /* The picture keeps the card's 16:9 beside the text, centred in the row,
    rather than stretched to the text's height and cropped to its middle. */
}

/* A skeleton in the grid's shape while the catalogue loads. */
.pl-card.ghost{min-height:420px;pointer-events:none}
.pl-card.ghost i{display:block;height:12px;border-radius:6px;background:var(--line);width:60%}
.pl-card.ghost i+i{width:90%}
.pl-card.ghost i+i+i{width:40%}
.pl-card.ghost .pl-shot{overflow:hidden}
.pl-card.ghost .pl-shot::after{content:"";position:absolute;inset:0;
 background:linear-gradient(100deg,transparent 30%,rgba(167,139,250,.14) 50%,transparent 70%);
 animation:shimmer 1.4s linear infinite}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.pl-none p{margin:0 0 14px}
.pl-none.err{border-color:rgba(251,191,36,.45);color:var(--txt)}

.audit{display:flex;gap:14px;align-items:flex-start;margin-top:26px}
.audit>.ic{flex:none;width:20px;height:20px;color:var(--vio);margin-top:2px}
.audit h3{margin:0 0 6px;font-size:15px;color:var(--txt)}
/* The page's most important caution, in the body face at a reading measure
   rather than the landing's small mono footnote. */
.audit .pl-hint{max-width:78ch;font-family:inherit;font-size:14px;line-height:1.65;color:var(--dim)}

/* ── list yours ───────────────────────────────────────────────── */
.list-grid{margin-top:34px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:22px;align-items:start}
.list-grid .steps{margin-top:0}
/* The steps and then the call to act on them, beside the example and its
   promises: two columns of content that end near each other. */
.list-main{display:grid;gap:18px;align-content:start;min-width:0}
.list-main .pick{margin-top:0}
.steps>div>div>b{display:block;font-size:15px;font-weight:600;color:var(--txt);margin-bottom:5px}
.steps>div>div>span{display:block;color:var(--dim);font-size:14px;line-height:1.6}
.steps code{overflow-wrap:anywhere}
/* A window, but not the hero's: it is there from the start, not scaled in. */
.win.entry{width:100%;margin:0;opacity:1;transform:none}
/* Each line is its own block, so the newlines between them in the markup
   must not print: whitespace collapses in the <pre>, and each line keeps its
   own indentation. */
.entry pre{margin:0;padding:16px 0;font:12px/1.75 var(--mono);color:var(--dim);white-space:normal}
.entry code{display:block;min-width:0}
/* A long value wraps under itself, hanging, so the lit lines read whole at
   any width. */
.entry .l{display:block;white-space:pre-wrap;overflow-wrap:anywhere;padding:0 18px 0 calc(18px + 4ch);text-indent:-4ch;border-left:2px solid transparent;
 transition:background .5s var(--out),border-color .5s var(--out),color .5s var(--out)}
.entry .l.k{color:var(--txt)}
.entry .l.lit{background:rgba(167,139,250,.1);border-left-color:var(--vio);color:var(--txt)}
.entry .l.lit[data-k="sha"]{background:rgba(52,211,153,.09);border-left-color:var(--run)}
.entry-foot{display:flex;gap:9px;align-items:center;padding:12px 18px;border-top:1px solid var(--line);
 font:12px var(--mono);color:var(--dim)}
.entry-foot .ic-s{color:var(--run)}
/* The window and the three promises share the column beside the steps, so
   neither column ends early. */
.list-side{display:grid;gap:16px;min-width:0}
.list-side .facts{margin-top:0;grid-template-columns:1fr}
.promise span{display:block}
.promise b{display:flex;align-items:center;gap:8px}
.promise b .ic-s{color:var(--vio)}
.promise b code{font:600 13px var(--mono);color:var(--txt)}
.promise span code{font:11px var(--mono);color:var(--vio)}
.pick{margin-top:18px}
.pick .grab{display:inline-block}
.pick .grab:active{transform:translateY(0) scale(.97)}
@media(max-width:860px){.list-grid{grid-template-columns:minmax(0,1fr)}}

/* ── a plugin's own page ──────────────────────────────────────── */
.page{min-height:80vh;position:relative;z-index:1;padding-bottom:72px}
/* The landing's generic .page rules (a, p, li) outrank the pl-* parts they
   hold, which is why its own plugin page shows a violet-on-violet button,
   footnotes at body size and a stray bullet. Put the parts back. */
.page .pl-big{color:var(--void)}
.page .pl-big:hover{color:var(--void)}
.page .pl-hint{margin-top:14px;font-size:12px;line-height:1.7;color:var(--dim)}
.page .pl-aside .pl-hint{margin-top:0;max-width:78ch;font-family:inherit;font-size:14px;line-height:1.65}
/* Cards drawn on a page (the not-found page offers the catalogue) keep the
   shelf's type, not the page's paragraph rules. */
.page .pl-card .pl-name{color:var(--txt)}
.page .pl-card p{margin:0}
.page .pl-card .pl-by{margin-top:3px;font-size:12px;line-height:1.5}
.page .pl-card .pl-desc{font-size:13.5px;line-height:1.6}
.pl-chips[hidden]{display:none}
.page .pl-one-sub{margin-top:6px;font-size:12.5px;line-height:1.6}
.page .pl-lead p{margin-top:0;font-size:16.5px;line-height:1.65;color:var(--txt)}
.page .pl-lead p+p{margin-top:12px}
.pl-draws li:before{content:none}
/* .pl-one h2 is the landing's title rule; these h2 are section heads. */
.pl-one .pl-sec-h{margin:0 0 12px;font-size:18px;font-weight:650;line-height:1.3;letter-spacing:-.01em;color:var(--txt)}
.pl-one .pl-aside .pl-sec-h{font-size:15px}
/* One column: where it draws, then the note, each the page's width, so
   neither leaves a box half empty beside the other. */
.pl-close{grid-template-columns:minmax(0,1fr);gap:24px}
.pl-one h1{margin:0;font-size:clamp(26px,4.4vw,38px);line-height:1.08;letter-spacing:-.025em;font-weight:650;color:var(--txt)}
/* Headings take the focus only to move a screen reader's place; they are
   not controls, so they show no ring. */
#view h1:focus,#view h2:focus{outline:none}
.pl-missing h1{font-size:clamp(26px,4.4vw,38px);line-height:1.1;letter-spacing:-.025em;font-weight:650}
.pl-missing .pl-grid{margin-top:32px}
.pl-stage-manifest{display:grid;place-items:center;padding:34px 20px;min-height:260px;cursor:default;
 background:linear-gradient(135deg,rgba(167,139,250,.16),rgba(167,139,250,.03))}
.pl-stage-manifest .pl-manifest{position:relative;left:auto;right:auto;top:auto;width:min(620px,100%);transform:none}
.pl-stage-manifest .pl-manifest code{font-size:13px}
.pl-crumb{display:flex;align-items:center;gap:8px}
.pl-crumb a{display:inline-flex;align-items:center;gap:6px}
.pl-one-ic .ic{width:30px;height:30px}
/* The plugin on its own page sits inside the mark's drawing: a steep orbit
   round its icon and one live contact on it, in front for half the turn and
   behind for the other, on the mark's 16 seconds. */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
.pl-one-ic{--r:48px;position:relative;isolation:isolate}
.pl-one-ic::before{content:"";position:absolute;left:50%;top:50%;width:calc(var(--r) * 2);height:calc(var(--r) * .58);
 margin:calc(var(--r) * -.29) 0 0 calc(var(--r) * -1);z-index:-1;
 border-radius:50%;border:1.5px solid rgba(167,139,250,.5);transform:rotate(-52deg);pointer-events:none}
@media(max-width:759px){.pl-one-ic{--r:40px}}
.pl-one-ic::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;z-index:2;
 border-radius:50%;background:var(--run);box-shadow:0 0 0 4px rgba(52,211,153,.18);pointer-events:none;
 transform:rotate(-52deg) scaleY(.29) rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))) scaleY(3.45) rotate(52deg);
 animation:contact 16s linear infinite}
@keyframes contact{0%{--a:0deg;z-index:2}49.9%{z-index:2}50%{z-index:-1}99.9%{z-index:-1}100%{--a:360deg;z-index:2}}
.pl-lead p+p{margin-top:12px}
.pl-lead code,.pl-hint code{font:.9em var(--mono);color:var(--vio);background:rgba(167,139,250,.09);border-radius:4px;padding:1px 5px}
.pl-big,.pl-ghost{text-decoration:none;transition:filter .15s,transform .16s var(--out),border-color .15s,color .15s}
.pl-big:active,.pl-ghost:active{transform:scale(.97)}
.pl-hint b{color:var(--txt);font-weight:600}
.pl-spec dd{display:flex;justify-content:flex-end;min-width:0}
.pl-fact dd code{overflow-wrap:anywhere}
.copyable{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%}
.copyable code{min-width:0;overflow-wrap:anywhere;text-align:right}
.copy{flex:none;position:relative;display:grid;place-items:center;width:30px;height:30px;padding:0;
 color:var(--dim);background:transparent;border:1px solid var(--line2);border-radius:8px;cursor:pointer;
 transition:color .15s,border-color .15s,transform .16s var(--out)}
.copy:hover{color:var(--txt);border-color:var(--vio)}
.copy:active{transform:scale(.94)}
.copy .ic-ok{display:none;color:var(--run)}
.copy.done{border-color:rgba(52,211,153,.5)}
.copy.done .ic-copy{display:none}
.copy.done .ic-ok{display:block;animation:pop .5s var(--pop)}
@keyframes pop{from{transform:scale(.6)}to{transform:none}}
.pl-stage{display:block;width:100%;font:inherit;color:inherit;text-align:left;cursor:zoom-in}
.pl-stage:focus-visible{outline:2px solid var(--vio);outline-offset:4px}
.pl-zoom .ic-s{width:13px;height:13px}
.pl-draws li{list-style:none}
.pl-sec.install{margin-top:36px}
.pl-sec.install .steps{margin-top:14px}
.pl-missing{padding:40px 0}
.pl-missing p{margin-top:12px;color:var(--dim)}
.pl-missing .pl-ghost{margin-top:22px}
/* The lightbox is a dialog: a scrim, the picture, one way out. */
.pl-lb:focus{outline:none}
.pl-lb-x:focus-visible{outline:2px solid var(--vio);outline-offset:2px}

/* ── the view transitions between the shelf and a plugin's page ── */
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:var(--out)}
::view-transition-group(vt-shot),::view-transition-group(vt-title){animation-duration:.42s;animation-timing-function:var(--out)}

/* ── phones ───────────────────────────────────────────────────── */
@media(max-width:759px){
 .one{padding-top:calc(76px + var(--safe));padding-left:16px;padding-right:16px}
 .pass{width:min(300px,78vw,38vh)}
 .pl-cta>*{flex:1 1 100%;justify-content:center}
 .pl-zoom{padding:9px}
 .pl-zoom span{display:none}
 .seal{margin-top:48px}
 .seal-body{padding:16px}
 .seal-rows>div{grid-template-columns:1fr;gap:2px}
 .sec{padding-inline:16px}
 .page{padding-inline:16px}
 .pl-hero{padding:22px}
 .pl-card{padding:16px}
 .pl-shot{margin:-16px -16px 4px}
 .pl-fact{flex-direction:column;align-items:flex-start;gap:4px}
 .pl-fact dd{text-align:left;justify-content:flex-start}
 .copyable code{text-align:left}
}
/* Touch: every target at least 44px. */
@media (pointer:coarse){
 .pl-chip,.pl-more,.pl-ghost,.pl-big,.copy,.pl-sort{min-height:44px}
 .copy{min-width:44px}
 .pl-chip{padding-inline:14px}
 .pl-links a{padding-block:10px}
 /* Text links in the header and the breadcrumb: a finger-sized target,
    without moving the layout. */
 .hd-nav a,.pl-crumb a{padding-block:14px;margin-block:-14px}
}

/* ── the visitor's settings ───────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 /* The landing's kill switch names every element but no pseudo-element;
    the orbit round a plugin's icon, the seal's read-down line and the
    picture's sheen live on ::before and ::after. */
 *::before,*::after{animation:none!important;transition:none!important}
 .hd-sweep{display:none}
 /* The landing's reduced-motion hero drops to 110px; the market's hero
    keeps its own top, moving or not. */
 .one{padding-top:calc(88px + var(--safe))!important}
 .pass::before{animation:none}
 .pl-card.ghost .pl-shot::after{display:none}
 /* The sentence stays still, its gradient drawn once rather than swept. */
 .oneline b{-webkit-text-fill-color:transparent}
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
@media (prefers-reduced-motion:reduce) and (max-width:759px){.one{padding-top:calc(76px + var(--safe))!important}}
@media (prefers-reduced-transparency:reduce){
 .hd-bar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--void)}
 .pl-zoom,.pl-lb,.pl-lb-x{backdrop-filter:none}
}
@media (prefers-contrast:more){
 :root{--line:rgba(167,139,250,.4);--line2:rgba(167,139,250,.7);--dim:#b9b6cf}
}