:root{
  color-scheme: dark;
  /* ── palette: Pricempire's own token set ──────────────────────────────
     Lifted from their `--token-color-*` scale (entry.css) rather than
     re-solved, because the brief is to match their page side by side. It is a
     blue-tinted navy ladder with a single bright-green accent, which is a
     different animal from the neutral slate this site shipped with: the
     surfaces are cooler and a step darker, and the accent is now light enough
     that type ON it must be dark — which is exactly what --on-brand exists for.

       base-950 #0c1017   page          base-500 #232e43   line
       base-900 #10151e   rail/sunk     base-300 #6d7790   dim ink
       base-800 #141925   card          base-200 #8992a6   muted ink
       base-700 #171d2b   card-hi       base-100 #cfd4de   body ink
       base-600 #1e2739   bar           base-0   #e7eaee   bright ink

     ── lifted, 2026-08-27 ────────────────────────────────────────────────
     That ladder bottoms out at #0c1017, which is 0.5% luminance — near enough
     to black that the cards read as the page and the page reads as a hole.
     Every SURFACE moved up together; the whole point of a ladder is that it
     keeps its steps, and half-swapping two of them is what makes a palette
     look broken rather than different (themes.css says the same thing).

     Two knock-ons, both forced rather than chosen. --ink-3 is the dimmest
     type on the site and it sat 4.79:1 over --bar, so lifting --bar without
     lifting it would have dropped the site under AA — it moves the same
     distance the surfaces did. And --s4/--s5 are the two series colours held
     at the lower lightness step; they are measured against the PLOT FLOOR,
     and the floor moved, so they move with it. Both by the same amount, so
     the deliberate two-tier step in the series survives (see --s1..--s5).

     Still validated, not trusted: `node site/xf-contrast.mjs` re-reads these
     from this file and every text/surface pair must clear AA 4.5:1. */
  --bg:#151b27; --rail:#1a2130; --bar:#2a3348;
  --card:#1e2634; --card-hi:#232c3d; --sunk:#1a2130;
  --line:#333e57; --line-soft:#232c3d;
  --ink:#e7eaee; --ink-2:#cfd4de; --ink-3:#98a2b6;
  /* --on-brand is the nav mark's own text colour. Pricempire's accent is a
     bright green, so this is dark type on a light accent — the token was put
     here for precisely this case. */
  --brand:#4bf364; --on-brand:#0c1017;
  /* fills, not type: two meter bars and one chart line, held to 3:1 */
  --t-top:#4bf364; --t-good:#37b9d5;
  --up:#a7f3b2; --down:#f3a7bd;
  --bid:#a7f3b2; --gap:#f3c087;
  /* CS2 wear colours, theirs: the ladder every CS2 site uses, cold to hot */
  --fn:#3ed17a; --mw:#cce342; --ft:#f0c33b; --ww:#fb8f38; --bs:#ec4a52;
  --st:#f3c087; --sv:#f3f3a7;
  /* every surface, gutter and radius on the site comes from these three, so
     the nav, the page and the footer cannot drift out of alignment.
     --pagew is theirs: --token-default-max-width 1600px. */
  --pagew:1600px; --gut:clamp(14px,2.1vw,38px); --r:12px;
  /* --s1..--s5 clear the all-pairs colour-vision check on EVERY candidate
     palette's plot floor, light and dark. Their pairs are separated by hue and
     by a deliberate lightness step (three at L .62, two at L .54) — re-solving
     them to an equal contrast ratio flattens that step and collapses violet
     into blue. A sixth series repeats a hue on a new dash rather than adding a
     sixth colour; --s6..--s8 only ever label separate cards. */
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c22ea9;
  --s5:#8a5ae2; --s6:#9a5500; --s7:#00a5b5; --s8:#d7243d;
  --up-bg:rgba(167,243,178,.12); --down-bg:rgba(243,167,189,.12);
  --exit-ok:#a7f3b2;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* How a nav weapon render is turned into a flat silhouette. brightness(0)
     zeroes the colour channels and leaves alpha alone, so any artwork becomes
     a solid black shape; invert(1) then flips it to white for a dark surface.
     It is a TOKEN because the direction is a property of the palette — the
     light candidate overrides it to plain brightness(0). See CS2-16. */
  --ni-f:brightness(0) invert(1);
}
/* Text for a screen reader and nothing else. One user: the collection tile,
   which shows its rarity as a colour bar and would otherwise have thrown the
   word away entirely rather than merely hidden it. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:14px;line-height:1.45;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0}
a{color:inherit}
button,select,input{font:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important}}
.up{color:var(--up)} .down{color:var(--down)} .flat{color:var(--ink-3)}
.mono{font-family:var(--mono)}

/* ── palette preview bar (build --themes only) ────────────────────────── */
/* fixed to the viewport, so the last table row would sit under it */
body.has-tsw{padding-bottom:66px}
.tsw{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:200;display:flex;
  align-items:center;gap:4px;padding:6px 8px;border-radius:11px;background:#111;
  border:1px solid #3a3a3a;box-shadow:0 8px 30px rgba(0,0,0,.55);font-size:12.5px;
  color:#ddd;max-width:calc(100vw - 20px);flex-wrap:wrap}
.tsw-l{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#888;padding:0 6px 0 3px}
.tsw button{display:flex;align-items:center;gap:6px;background:transparent;border:1px solid transparent;
  color:#bbb;border-radius:7px;padding:5px 10px;cursor:pointer;font-size:12.5px}
.tsw button:hover{color:#fff;border-color:#4a4a4a}
.tsw button[aria-pressed="true"]{background:#2b2b2b;border-color:#5c5c5c;color:#fff}
.tsw button i{width:11px;height:11px;border-radius:3px;border:1px solid rgba(255,255,255,.28)}
.tsw button[data-t="ember"] i{background:#141312}
.tsw button[data-t="slate"] i{background:#11161a}
.tsw button[data-t="carbon"] i{background:#151515}
.tsw button[data-t="midnight"] i{background:#0e1523}
.tsw button[data-t="paper"] i{background:#f5f4f1}
.tsw-n{color:#8a8a8a;font-size:11.5px;padding:0 6px 0 4px}
@media (max-width:700px){.tsw-n{display:none}}

/* ── inline search results (landing page) ─────────────────────────────── */
/* Anchored under the box rather than over the page: the landing page's search
   IS the page, so a modal would bury what you came for. */
.si-host{position:relative}
/* text-align:left is not decoration: the landing hero centres its text and the
   panel is a child of that form, so the skin names centred in their column */
.si{position:absolute;left:0;right:0;top:calc(100% + 7px);z-index:60;background:var(--card);
  border:1px solid var(--line);border-radius:11px;overflow:hidden;text-align:left;
  box-shadow:0 18px 44px rgba(0,0,0,.5)}
.si[hidden]{display:none}
.si .so-row{height:54px}
.si-more{padding:9px 16px;background:var(--sunk);border-top:1px solid var(--line-soft);
  font-size:11.5px;color:var(--ink-3)}

/* ── search overlay ───────────────────────────────────────────────────── */
/* Sits above the palette bar (z 200) and the sticky nav (z 30). */
.so{position:fixed;inset:0;z-index:300;display:flex;justify-content:center;align-items:flex-start}
.so[hidden]{display:none}
body.so-on{overflow:hidden}
.so-back{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(2.5px)}
.so-box{position:relative;margin-top:min(13vh,120px);width:min(660px,calc(100vw - 28px));
  background:var(--card);border:1px solid var(--line);border-radius:13px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);overflow:hidden}
.so-in{display:flex;align-items:center;gap:11px;padding:15px 16px;border-bottom:1px solid var(--line-soft)}
.so-ico{width:19px;height:19px;color:var(--ink-3);flex:none}
.so-in input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--ink);
  font-size:18px;letter-spacing:-.01em}
.so-in input::placeholder{color:var(--ink-3)}
.so kbd{font-family:var(--mono);font-size:10px;color:var(--ink-3);border:1px solid var(--line);
  border-radius:4px;padding:2px 5px;background:var(--sunk);line-height:1.3}
.so-list{max-height:min(58vh,540px);overflow-y:auto}
/* one grid so the prices form a column the eye can run down */
.so-row{display:grid;grid-template-columns:46px minmax(0,1fr) auto 92px 68px;gap:12px;align-items:center;
  padding:0 16px;height:56px;text-decoration:none;color:inherit;border-bottom:1px solid var(--line-soft)}
.so-im{width:46px;height:40px;display:grid;place-items:center;background:var(--sunk);
  border:1px solid var(--line-soft);border-radius:6px;overflow:hidden}
.so-im img{max-width:38px;max-height:32px;object-fit:contain}
.so-row:last-child{border-bottom:0}
.so-row.on{background:var(--card-hi)}
.so-row.on .so-n{color:var(--ink)}
.so-n{font-size:14.5px;font-weight:600;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.so-c{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--line-soft);border-radius:4px;padding:2px 6px;white-space:nowrap}
.so-p{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--ink);text-align:right;
  font-variant-numeric:tabular-nums}
.so-d{font-family:var(--mono);font-size:12px;text-align:right;font-variant-numeric:tabular-nums}
.so-empty{padding:28px 16px;text-align:center;color:var(--ink-3);font-size:13.5px}
.so-foot{display:flex;gap:16px;align-items:center;padding:9px 16px;background:var(--sunk);
  border-top:1px solid var(--line-soft);font-size:11.5px;color:var(--ink-3)}
.so-foot .so-count{margin-left:auto;font-family:var(--mono);font-size:10.5px}
@media (max-width:560px){
  .so-box{margin-top:0;width:100vw;border-radius:0;border-left:0;border-right:0;height:100%}
  .so-list{max-height:calc(100vh - 132px)}
  .so-row{grid-template-columns:40px minmax(0,1fr) 84px;gap:9px}
  .so-im{width:40px;height:34px}
  .so-c,.so-d{display:none}
}

/* ── nav ──────────────────────────────────────────────────────────────── */
.nav{background:var(--bar);border-bottom:1px solid var(--line-soft);position:sticky;top:0;z-index:30}
/* nowrap, and the padding is trimmed to pay for the tab row's own padding, so
   the bar is the height it was before the tabs gained icons. WRAPPING HERE IS
   WHAT DROPPED THE SEARCH BOX ONTO A SECOND LINE: .navin is brand | nav |
   search, so the moment the three exceed the width the last one wraps. The
   tabs wrap INSIDE nav instead (see .navin nav), which keeps search where it
   belongs; below 900px the whole bar is allowed to stack again. */
.navin{max-width:var(--pagew);margin:0 auto;padding:9px var(--gut);display:flex;align-items:center;
  gap:16px;flex-wrap:nowrap}
.nav .brand{font-size:15px;font-weight:500;text-decoration:none;letter-spacing:-.01em;white-space:nowrap}
.nav .brand .mark{background:var(--brand);color:var(--on-brand);padding:2px 6px;border-radius:4px;font-weight:700;
  font-size:12px;letter-spacing:.04em;margin-right:7px}
.nav nav{display:flex;gap:16px}
.nav nav a{color:var(--ink-2);text-decoration:none;font-size:13.5px;padding:3px 0;border-bottom:2px solid transparent}
.nav nav a:hover{color:var(--ink)}
.nav nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--brand)}
.navsearch{margin-left:auto;display:flex;flex:0 0 auto}
.navsearch input{background:var(--sunk);border:1px solid var(--line);color:var(--ink);border-radius:6px;
  padding:6px 11px;min-width:200px;font:inherit;font-size:13px}
.navsearch input:focus{outline:none;border-color:var(--brand)}
.navsearch input::placeholder{color:var(--ink-3)}

/* ── theme picker ───────────────────────────────────────────────────────
   A <details class="nd">, so it inherits the nav menus' light-dismiss, their
   keyboard behaviour and their panel styling for free. Each swatch is the
   candidate's own page colour and accent, split on the diagonal — the two
   tokens that actually decide whether a palette reads as warm or cold. */
.thm{flex:0 0 auto}
.thm>summary{padding:5px 8px}
.thm>summary::after{display:none}
.thm .ti{width:17px;height:17px;display:block}
.thm .nd-p{left:auto;right:0;min-width:216px}
.tb{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;
  padding:7px 9px;border-radius:7px;color:var(--ink-2);font:inherit;font-size:13px;
  font-weight:500;cursor:pointer;text-align:left}
.tb:hover{background:var(--card-hi);color:var(--ink)}
.tb[aria-pressed="true"]{color:var(--ink);font-weight:600}
.tb[aria-pressed="true"]::after{content:"";width:6px;height:11px;margin-left:auto;flex:none;
  border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:translateY(-2px) rotate(45deg)}
.sw{width:24px;height:24px;border-radius:6px;flex:none;border:1px solid var(--line);
  background:linear-gradient(135deg,var(--a) 0 50%,var(--b) 50% 100%)}

.page{max-width:var(--pagew);margin:0 auto;padding:18px var(--gut) 64px}
/* The board is a wide table and wants every pixel. The item page is a rail plus
   one list of sixteen short rows, and at 1600px that list is stretched thin. */
/* Sized so the market table has NO slack to distribute: at this width the six
   columns and their gaps exactly fill the row, which is why there is no longer
   a gap between the marketplace name and its price. Changing this width without
   changing .of's columns puts the empty space back. */
/* 1160 fit a rail and a market list. The third column is 236 plus its gutter,
   and the list was already snug at 1160, so the page grew by exactly what was
   added rather than taking it out of the prices. */
.page.item{max-width:1410px}
.crumbs{font-size:12px;color:var(--ink-3);margin-bottom:14px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--ink-2);text-decoration:underline}
.crumbs b{color:var(--ink-2);font-weight:400}

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.phead{display:flex;align-items:center;gap:9px;padding:9px 13px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.phead .ttl,.bar .ttl,.rhead .ttl{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-2)}
.phead .sub,.rhead .sub{font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-left:auto}
.bar{display:flex;align-items:center;gap:6px;padding:7px 10px;border-bottom:1px solid var(--line-soft);
  background:var(--card);flex-wrap:wrap}
.bar .ttl{margin-right:auto}
/* .mini is gone with the board's old view toggle. It was the last rule on the
   site putting #fff on --brand, which is 1.7:1 — the palette has --on-brand
   for exactly this, and .vb uses it. */

/* ── item page ──────────────────────────────────────────────────────────
   Identity rail on the left, ranked marketplace offers as the hero on the
   right, then history, related and FAQ. The offer rows are also the chart's
   legend, so they carry a colour once they are plotted. */
/* Three columns: identity, the market list, and the alternatives to it. The
   third one is the whole reason .page.item got wider — see .pe-side. */
.pe-wrap{display:grid;grid-template-columns:376px minmax(0,1fr) 236px;gap:14px;align-items:start}
/* a family with no priced neighbours has no third column, and an empty 236px
   track is a hole in the right of the page (cf. .vwrap.norail) */
.pe-wrap.norel{grid-template-columns:376px minmax(0,1fr)}
/* Under 1280 the offer row cannot afford the track: six numeric columns need
   ~604px and the rail takes 376 of whatever is left. So the neighbours drop
   under the main column and go back to filling the width. */
@media (max-width:1280px){
  .pe-wrap{grid-template-columns:376px minmax(0,1fr)}
  .pe-side{grid-column:1/-1}
  .pe-rel{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
}
@media (max-width:1040px){.pe-wrap{grid-template-columns:minmax(0,1fr)}}
.pe-side{min-width:0}
.pe-rail{min-width:0}
/* tall windows only: the rail is ~800px, so pinning it on a short screen
   would clip the facts off the bottom */
@media (min-width:1041px) and (min-height:940px){.pe-rail{position:sticky;top:62px}}
.pe-main{min-width:0;display:flex;flex-direction:column;gap:14px}
.pe-main > *{margin-bottom:0}

.pe-card{margin-bottom:0}
.pe-idhd{padding:15px 16px 12px;border-bottom:1px solid var(--line-soft)}
.pe-idhd h1{font-size:clamp(19px,2vw,25px);font-weight:700;letter-spacing:-.025em;line-height:1.16}
.pe-cat{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-2);text-decoration:none;border:1px solid var(--line);
  border-radius:20px;padding:3px 10px}
.pe-cat:hover{color:var(--ink);border-color:var(--ink-3)}
.pe-art{height:210px;display:grid;place-items:center;background:var(--sunk);
  background-image:radial-gradient(var(--line-soft) 1px,transparent 1px);background-size:13px 13px;
  border-bottom:1px solid var(--line-soft);padding:12px}
.pe-art img{max-width:88%;max-height:186px;object-fit:contain}

.pe-hv{font-size:clamp(30px,3.4vw,40px);font-weight:700;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums}
.pe-hl{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin-top:7px}
.pe-hd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:11px}
.pe-hd{background:var(--sunk);border:1px solid var(--line-soft);border-radius:8px;padding:9px 11px}
.pe-hd .w{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.pe-hd .v{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px;display:block}

/* the slot Pricempire fills with wear conditions; Rust skins have none, so it
   carries the three price bases the rest of the site quotes */
.pe-basis{padding:10px 12px;display:flex;flex-direction:column;gap:6px;
  border-bottom:1px solid var(--line-soft)}
.pe-brow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;
  border:1px solid var(--line-soft);background:var(--sunk)}
.pe-brow.on{border-left:3px solid var(--s1);padding-left:8px;background:var(--card-hi);
  box-shadow:inset 0 0 0 1px rgba(57,135,229,.18)}
.pe-brow .bl{min-width:0;display:flex;flex-direction:column}
.pe-brow .bl b{font-size:13.5px;font-weight:600;color:var(--ink)}
.pe-brow .bl span{font-size:11px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pe-brow .bv{margin-left:auto;font-family:var(--mono);font-size:17px;font-weight:500;
  color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

.pe-facts{padding:4px 0}
.pe-frow{display:flex;justify-content:space-between;gap:10px;padding:7px 16px;font-size:13px;
  align-items:baseline}
.pe-frow + .pe-frow{border-top:1px solid var(--line-soft)}
.pe-frow b{color:var(--ink-2);font-weight:400;font-size:12.5px}
.pe-frow span{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}

/* ── offers ───────────────────────────────────────────────────────────── */
.pe-strip{display:flex;align-items:baseline;gap:9px;padding:12px 16px;flex-wrap:wrap;
  border-bottom:1px solid var(--line-soft);background:var(--bar);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.pe-strip b{color:var(--ink);font-size:15px;letter-spacing:0;font-weight:700}
.pe-strip .sep{color:var(--line)}
.pe-strip .s2{margin-left:auto;text-transform:none;letter-spacing:.04em}

.pe-offers{display:flex;flex-direction:column}
/* The switch that changes what every price under it means, so it sits ON the
   table instead of in a toolbar somewhere above it. Buttons rather than a
   <select>: four options, all worth reading at once, and the chosen one has to
   stay visible while the reader looks at what it did to the list. */
.payx{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px;
  border-bottom:1px solid var(--line)}
.payx-l{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin-right:2px}
.payb{background:var(--card);border:1px solid var(--line);border-radius:8px;color:var(--ink-2);
  padding:7px 13px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s}
.payb:hover{color:var(--ink);border-color:var(--ink-3)}
.payb[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
/* ── the line under Steam ────────────────────────────────────────────────
   Whitespace alone read as a rendering fault — a gap in a list of rows looks
   like a row failed to draw. So the gap carries a caption, which is also the
   only place the page says out loud what the split is for. */
.of-cut{display:flex;align-items:center;gap:10px;padding:10px 14px 9px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);background:var(--sunk);border-bottom:1px solid var(--line-soft)}
.of-cut::after{content:"";flex:1;height:1px;background:var(--line)}
/* A sparkline stretched to 800px is a flat line, not information, so it stays
   at a readable aspect ratio and the name column carries the slack instead. */
.of{display:grid;grid-template-columns:24px 44px minmax(150px,1fr) minmax(220px,760px) 74px 132px 96px 34px;gap:13px;
  align-items:center;width:100%;text-align:left;font:inherit;color:inherit;position:relative;
  background:transparent;border:0;border-left:3px solid transparent;
  border-bottom:1px solid var(--line-soft);padding:13px 16px 13px 13px;
  transition:background-color .1s,opacity .1s}
.of:last-child{border-bottom:0}
.of:hover{background:var(--card-hi)}
.of[data-on="1"]{border-left-color:var(--c);background:var(--sunk)}
.of.lit{background:var(--card-hi)}
.of.dim{opacity:.35}
.of .lg{width:44px;height:44px;display:grid;place-items:center;border-radius:10px;
  background:var(--sunk);border:1px solid var(--line-soft)}
.of .lg img{width:28px;height:28px;object-fit:contain;border-radius:5px}
.of .nm{min-width:0;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
/* The stretched link: the anchor's ::after covers the whole row, so clicking
   anywhere that is not the plot button opens the marketplace. Real anchor text
   (the market name), so it is announced and middle-clickable like any link. */
/* Wraps rather than truncating. A truncated marketplace name needed a column
   wide enough never to truncate, and that width was the empty space in the
   middle of every row; letting "White.Market" take two lines instead lets the
   column be narrow enough that the numbers sit next to the name. */
.of .of-go{font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.01em;
  white-space:normal;overflow-wrap:break-word;line-height:1.22;padding-right:6px;
  text-decoration:none}
.of .of-go::after{content:"";position:absolute;inset:0;z-index:1}
.of:hover .of-go{text-decoration:underline;text-underline-offset:3px}
/* no per-item page there — the row still goes somewhere, just not to the item */
.of .of-go.shallow{text-decoration-style:dotted}
.of-plot{position:relative;z-index:2;width:30px;height:30px;display:grid;place-items:center;
  border:1px solid var(--line-soft);border-radius:7px;background:var(--sunk);color:var(--ink-3);
  cursor:pointer;padding:0;transition:color .1s,border-color .1s}
.of-plot svg{width:15px;height:15px;display:block}
.of-plot:hover{color:var(--ink);border-color:var(--ink-3)}
.of-plot[aria-pressed="true"]{color:var(--c);border-color:var(--c);background:transparent}
.of.of-hd .pl,.of .pl{display:block}
.of .sp{display:block;min-width:0}
/* taller as well as wider: at 26px a 30-day line is a squiggle, and the extra
   width would only have made it a flatter one */
.of .sp svg{display:block;width:100%;height:40px;overflow:visible}
.of .ch{font-family:var(--mono);font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums;
  white-space:nowrap}
/* the header repeats the row grid so the two percentage columns are named:
   30d is a price trend (up is green), vs fair is a buyer's view (above fair
   value costs more, so it is red) */
.of-hd{cursor:default;background:var(--bar);padding-top:8px;padding-bottom:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3)}
.of-hd:hover{background:var(--bar)}
/* .of.of-hd outranks the .of cell rules that follow it, which otherwise put
   the PRICE label back into 15px mono */
.of.of-hd .nm,.of.of-hd .sp,.of.of-hd .ch,.of.of-hd .px,.of.of-hd .dw{font:inherit;color:inherit}
.of.of-hd .sp{text-align:left}
.of.of-hd .ch,.of.of-hd .px,.of.of-hd .dw{text-align:right}
.of .px{font-family:var(--mono);font-size:23px;font-weight:600;text-align:right;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.03em}
.of.best .px{color:var(--bid);font-weight:700}
.of.soft .of-go,.of.soft .px{color:var(--ink-2)}
/* The deposit shown as an addition under the ask, not folded into it. Stacked
   rather than run on one line because the column is 132px and "$62.00 + $3.45"
   at headline size is half again too wide for it — the reading is the same, it
   just wraps. Only drawn when the fee is non-zero, so most rows carry nothing
   here at all. */
.of .px .px-fee{display:block;margin-top:4px;font-size:12.5px;letter-spacing:0;
  white-space:nowrap}
.of .px .px-fee b{color:var(--down);font-weight:700}
.of .px .px-fee i{font-style:normal;font-family:var(--mono);font-size:9px;font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-left:6px}
.of .px i{font-style:normal;color:var(--ink-3)}
.of .dw{text-align:right}
/* a tinted fill alone reads as a faint wash at this size; the ring is what
   makes the pill a chip you can find without hunting for it */
.of .dl{display:inline-block;font-size:14px;font-weight:700;padding:6px 10px;border-radius:8px;
  background:var(--sunk);color:var(--ink-2);font-variant-numeric:tabular-nums;min-width:62px;
  text-align:center;letter-spacing:-.01em;border:1px solid var(--line-soft)}
.of .dl.up{color:var(--down);background:var(--down-bg);   /* above fair value costs more */
  border-color:color-mix(in oklab,var(--down) 45%,transparent)}
.of .dl.down{color:var(--up);background:var(--up-bg);
  border-color:color-mix(in oklab,var(--up) 45%,transparent)}
.tg{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:4px;padding:2px 6px;color:var(--ink-2);white-space:nowrap}
.tg.best{color:var(--bid);border-color:var(--bid)}
.tg.old{color:var(--gap);border-color:var(--gap)}
/* Same caution tone as a stale quote, and for the same reason: both are the
   row telling you its number is softer than it looks. */
.tg.est{color:var(--gap);border-color:var(--gap)}
/* Ask panel: above fair value is red, because it costs the buyer more.
   Sell panel: every bid sits under fair value — that gap IS the spread, not a
   fault — so red there would paint the whole table with a warning that carries
   no information. Only the exception is coloured: a bid ABOVE fair value. */
.pe-offers.sell .of .dl{color:var(--ink-2);background:var(--sunk)}
.pe-offers.sell .of .dl.up{color:var(--up);background:var(--up-bg)}
.pe-offers.sell .of.best .px{color:var(--exit-ok)}
/* a caveated row is already muted; its percentage pill has to mute with it or
   a wallet-funds bid still shouts a green premium it cannot actually pay */
.of.soft .dl{background:var(--sunk) !important;color:var(--ink-3) !important;
  border-color:var(--line-soft) !important}
.of .nt{font-size:11px;color:var(--ink-3);flex-basis:100%}
.pe-brow.sell{border-top:1px dashed var(--line);margin-top:2px;padding-top:10px}
.pe-brow.sell .bv{color:var(--up)}
.pe-sub{padding:9px 16px;background:var(--sunk);border-bottom:1px solid var(--line-soft);
  border-top:1px solid var(--line-soft);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.pe-sub span{letter-spacing:.03em;text-transform:none;opacity:.8}

/* ── chart ────────────────────────────────────────────────────────────── */
.plotbox{position:relative;background:var(--sunk);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.plot{display:block;width:100%}
/* faint, dashed, and only at a printed price — see the note in lineChart */
.gridln{stroke:var(--ink-3);stroke-width:1;opacity:.22;stroke-dasharray:4 6}
.plot text{font-family:var(--mono);font-size:10.5px;fill:var(--ink-3)}
.plot text.ylab{font-size:13px;fill:var(--ink-2)}
.plot .empty{font-size:12px;font-family:var(--sans)}
.plot .logtag{font-size:9px}
.axisln{stroke:var(--line);stroke-width:1}
.plot .endlab{font-size:10.5px}
.plot .endv{fill:var(--ink-2)}
.plot .endage{fill:var(--gap)}
.nojs{padding:2px 0;margin:0;color:var(--ink-3);font-size:12px}

.pe-legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 12px;
  border-top:1px solid var(--line-soft);background:var(--card)}
.lg-btn{display:inline-flex;align-items:center;gap:7px;background:var(--sunk);
  border:1px solid var(--line-soft);border-radius:20px;padding:4px 12px 4px 9px;cursor:pointer;
  color:var(--ink-2);font:inherit;font-size:12px}
.lg-btn:hover{border-color:var(--ink-3);color:var(--ink)}
.lg-btn[aria-pressed="true"]{color:var(--ink);border-color:var(--line);background:var(--card-hi)}
.lg-btn.lit{border-color:var(--ink-2)}
.lg-btn.dim{opacity:.4}
.lg-btn b{font-variant-numeric:tabular-nums}
.lg-btn .sw{width:18px;height:8px;flex:none;overflow:visible}
.lg-btn .sw.off{width:18px;height:2px;background:var(--line);border-radius:1px}
.lg-hint{background:none;border:0;color:var(--ink-3);font-size:11px;cursor:default;
  margin-left:auto;font-family:var(--mono)}

/* ── about + FAQ ──────────────────────────────────────────────────────── */
.pe-about{padding:14px 16px 6px;margin:0;color:var(--ink-2);font-size:14px;line-height:1.6;max-width:96ch}
.pe-about b{color:var(--ink);font-weight:500}
.pe-faq{padding:6px 15px 13px;columns:2;column-gap:26px}
@media (max-width:900px){.pe-faq{columns:1}}
.pe-faq details{border-bottom:1px solid var(--line-soft);break-inside:avoid}
.pe-faq summary{cursor:pointer;padding:9px 0;font-size:13px;font-weight:500;list-style:none}
.pe-faq summary::-webkit-details-marker{display:none}
.pe-faq summary::before{content:"+";color:var(--ink-3);font-family:var(--mono);margin-right:8px}
.pe-faq details[open] summary::before{content:"–"}
.pe-faq summary:hover{color:var(--ink)}  /* --brand is 3.3:1 as text; fine as a fill, not as a label */
.pe-faq p{margin:0 0 11px;padding-left:19px;color:var(--ink-2);font-size:13px;line-height:1.62}

/* The two breakpoints that used to live here were inherited from the Rust site
   and described an EIGHT-column row: rank, logo, name, sparkline, change,
   listed, price, vs-fair, plot. This row has six cells and none of the dropped
   ones exist any more, so `@media (max-width:1180px)` was re-templating a
   6-cell row onto 8 tracks — the logo into a 22px track, the name into 34px —
   on every window narrower than 1180px, which since .page.item is capped at
   1160px meant most laptops. The one responsive rule this row still needs is
   the max-width:900px block further down. */
@media (max-width:640px){
  .pe-art{height:150px}
  .pe-art img{max-height:130px}
}

/* ── related ──────────────────────────────────────────────────────────── */
.relgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line-soft)}
.rel{background:var(--card);padding:11px;text-decoration:none;display:flex;flex-direction:column;
  align-items:center;gap:7px;text-align:center;min-width:0}
.rel:hover{background:var(--card-hi)}
.rel .im{height:58px;display:grid;place-items:center;width:100%}
.rel .im img{max-height:58px;max-width:100%;object-fit:contain}
.rel .rn{font-size:12px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  width:100%}
.rel .rp{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}

/* ── footer ───────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line-soft);color:var(--ink-3);font-size:12px;line-height:1.6}
.footin{max-width:var(--pagew);margin:0 auto;padding:22px var(--gut)}
.foot p{max-width:92ch;margin:0 0 8px}
.foot b{color:var(--ink-2);font-weight:500}
.foot a{color:var(--ink-2)}
.foot .fine{color:#615b56;font-size:11px}

/* ── tooltip ──────────────────────────────────────────────────────────── */
.tip{position:fixed;z-index:80;pointer-events:none;background:var(--card);border:1px solid var(--line);
  border-radius:7px;padding:8px 10px;box-shadow:0 8px 26px rgba(0,0,0,.6);font-size:12px;opacity:0;
  transition:opacity .09s;max-width:320px;left:0;top:0}
.tip[data-on="1"]{opacity:1}
/* the day's high-low printed beside the average, so the ribbon behind the
   line is a number you can read rather than a decoration */
.tip .rng{font-style:normal;color:var(--ink-3);font-size:10.5px;margin-left:6px}
.tip .tt{font-weight:700;font-size:11.5px;margin-bottom:5px}
.tip .tr{display:flex;justify-content:space-between;gap:14px;font-family:var(--mono);font-size:11px;line-height:1.6}
.tip .tr b{font-weight:400;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
.tip .tr.on b,.tip .tr.on span{color:var(--ink);font-weight:500}
.tico{border-radius:3px;flex:none}
.tip .tr span{font-variant-numeric:tabular-nums;color:var(--ink)}
.tdot{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block}

/* Brand + ten tabs + search + palette need roughly 1360px of content box, so
   below ~1450px of viewport they do not fit on one line and something has to
   give. The tabs take a full-width row of their own — DELIBERATELY, and with
   the search box left where it belongs at top right. That is the difference
   between this and what it replaced: .navin used to wrap, and since search is
   the last flex item, IT was the thing that dropped. */
@media (max-width:1450px){
  .navin{flex-wrap:wrap}
  .navin nav{order:3;flex:1 1 100%;margin-top:2px}
}
@media (max-width:700px){
  .navin{gap:10px;padding:10px 14px}
  .navsearch{margin-left:0;flex:1 1 auto}
  .navsearch input{min-width:0;width:100%}
  .page{padding:12px 14px 40px}
}

/* ── board ────────────────────────────────────────────────────────────── */
.bhead{margin-bottom:14px}
.bhead h1{font-size:clamp(22px,3vw,30px);font-weight:700;letter-spacing:-.025em}
.bhead p{color:var(--ink-2);margin:6px 0 0;max-width:70ch}
/* ── the filter panel ───────────────────────────────────────────────────
   Four bands, coarse to fine: search, the four dropdowns, wear + view, then
   the on/off chips. Every control carries a glyph, because someone scanning
   this panel is hunting for a KIND of control ("where's the price one?")
   before they are reading any label. The 9px uppercase mono labels this
   replaced were a trader's header row, not a signpost. */
.toolbar{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:13px;margin-bottom:14px}

/* search is the control most readers actually want, so it gets a band of its
   own and a size no dropdown has */
.thead{display:flex;align-items:stretch;gap:10px}
.tsearch{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:var(--sunk);
  border:1px solid var(--line);border-radius:9px;padding:0 12px}
/* Hiding a section that changes the results is a trap unless the closed state
   says so, hence the count: the badge is how a shut panel admits it is still
   filtering. Search is deliberately OUTSIDE the panel and outside the count —
   it is the control most readers came for, and it stays on screen. */
.tfx{display:inline-flex;align-items:center;gap:8px;flex:none;background:var(--sunk);
  border:1px solid var(--line);border-radius:9px;padding:0 15px;font:inherit;font-size:13.5px;
  font-weight:600;color:var(--ink-2);cursor:pointer;transition:border-color .12s,color .12s}
.tfx:hover{border-color:var(--ink-3);color:var(--ink)}
.tfx .ti{width:15px;height:15px;color:var(--ink-3)}
.tfx:hover .ti{color:var(--ink-2)}
.tfx[aria-expanded="false"]{background:var(--card-hi)}
.tfn{font-style:normal;font-family:var(--mono);font-size:10.5px;font-weight:700;
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:inline-flex;
  align-items:center;justify-content:center;background:var(--brand);color:var(--on-brand)}
.tfn[hidden]{display:none}
.tbody[hidden]{display:none}
.tsearch:focus-within{border-color:var(--brand)}
.tsearch>.ti{color:var(--ink-3);flex:none}
.tsearch:focus-within>.ti{color:var(--brand)}
.tsearch input{flex:1;min-width:0;background:none;border:0;color:var(--ink);
  font:inherit;font-size:15px;padding:12px 0}
.tsearch input:focus{outline:none}
.tsearch input::placeholder{color:var(--ink-3)}
.tsearch input::-webkit-search-cancel-button{display:none}
.tx{background:none;border:0;color:var(--ink-3);cursor:pointer;padding:5px;
  display:flex;border-radius:5px;flex:none}
.tx:hover{color:var(--ink);background:var(--card-hi)}
.tx[hidden]{display:none}

/* ── the type picker ─────────────────────────────────────────────────────
   Two <select>s, one of them 63 names deep, became one wide panel of pictures.
   "Which gun?" is a question a player answers by RECOGNISING one; a dropdown
   made them read the whole list in listing-count order. Grouped from the same
   derived taxonomy the nav browse menu uses, so the two can never disagree
   about what a rifle is. */
.wpick{margin-top:12px}
.wpick>summary{display:flex;align-items:center;gap:9px;list-style:none;cursor:pointer;
  background:var(--sunk);border:1px solid var(--line);border-radius:9px;padding:11px 14px;
  font:inherit;font-size:14px;font-weight:600;color:var(--ink);user-select:none}
.wpick>summary::-webkit-details-marker{display:none}
.wpick>summary>.ti{color:var(--ink-3);flex:none}
.wpick>summary em{margin-left:auto;font-style:normal;font-family:var(--mono);
  font-size:11px;font-weight:500;color:var(--ink-3)}
.wpick>summary::after{content:"";width:6px;height:6px;margin-left:10px;flex:none;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.wpick>summary:hover{border-color:var(--ink-3)}
.wpick[open]>summary{border-color:var(--brand);border-radius:9px 9px 0 0}
.wpick[open]>summary::after{transform:translateY(2px) rotate(225deg)}
.wp-p{border:1px solid var(--brand);border-top:0;border-radius:0 0 9px 9px;
  background:var(--rail);padding:2px 14px 14px;max-height:58vh;overflow:auto}
.wp-g{padding-top:13px}
.wp-h{display:flex;align-items:baseline;gap:11px;margin-bottom:8px;flex-wrap:wrap}
.wp-h b{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.wp-all{background:none;border:0;padding:0;color:var(--ink-3);font:inherit;font-size:11.5px;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.wp-all:hover{color:var(--ink)}
.wp-all[aria-pressed="true"]{color:var(--brand)}
.wp-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(102px,1fr));gap:7px}
.wt{display:flex;flex-direction:column;align-items:center;gap:3px;
  background:var(--card);border:1px solid var(--line);border-radius:9px;padding:9px 5px 7px;
  font:inherit;font-size:11.5px;font-weight:500;color:var(--ink-2);cursor:pointer;
  transition:border-color .12s,background .12s,color .12s}
.wt img,.wt .wt-x,.wt .wt-i{width:54px;height:40px;object-fit:contain;display:block}
/* "All types" has no photograph to show, so it wears the picker's own crosshair
   and takes the tile's colour with it — pressed, hovered or resting. */
.wt .wt-i{display:grid;place-items:center;color:inherit;opacity:.85}
.wt span{text-align:center;line-height:1.22}
.wt i{font-style:normal;font-family:var(--mono);font-size:9.5px;color:var(--ink-3)}
.wt:hover{border-color:var(--ink-3);color:var(--ink);background:var(--card-hi)}
.wt[aria-pressed="true"]{border-color:var(--brand);color:var(--ink);background:var(--card-hi);
  box-shadow:inset 0 0 0 1px var(--brand)}

/* ── the Demand slider ───────────────────────────────────────────────────
   Replaces a "High liquidity" chip whose threshold (>= 70) was never written
   anywhere the reader could see it. The number is theirs to pick now, and it
   is printed on the control.

   The track was pinned at a fixed width twice — 90px, then 150px — on the
   argument that a coarse filter with 21 stops should not be the widest thing
   on its row. The operator asked for it wider, and the row it now shares says
   why: Price is TWO typed bounds and needs only enough box to type in, while
   Demand is a thing you DRAG, and a drag is only as precise as the track is
   long. So Price is fixed and Demand grows into whatever the row has left.
   The field is sized by its LABEL, so the readout can never be clipped by the
   track it sits over. */
.liqf{flex:1 1 230px;min-width:0}
.liqf label b{font-style:normal;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
.field label .ti.bolt{width:15px;height:15px;color:var(--brand)}
.liqf input[type=range]{appearance:none;-webkit-appearance:none;width:100%;background:none;
  cursor:pointer;margin:0;height:22px}
.liqf input[type=range]:focus{outline:none}
.liqf input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;
  background:var(--sunk);border:1px solid var(--line)}
.liqf input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;
  width:18px;height:18px;border-radius:50%;background:var(--brand);border:0;margin-top:-7px}
.liqf input[type=range]::-moz-range-track{height:6px;border-radius:3px;
  background:var(--sunk);border:1px solid var(--line)}
.liqf input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;
  background:var(--brand);border:0}
.liqf datalist{display:none}

.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:10px}
.controls.row2{margin-top:10px}

/* ── the two bands ────────────────────────────────────────────────────────
   The panel had grown to thirteen controls in four rows with nothing saying
   what any row was, and the one honest complaint about it was that Demand — a
   real filter — sat in a row with Sort, Price shown and View, none of which
   remove a single skin. Two headings, and the split is the only one that
   matters: above, things that change WHICH skins; below, things that change
   how the same skins look. "Clear filters" belongs to the first, so it lives
   in its heading rather than floating at the bottom of the panel. */
.bandh{display:flex;align-items:center;gap:10px;margin-top:15px;padding-top:12px;
  border-top:1px solid var(--line)}
.bandh:first-child{margin-top:0;padding-top:0;border-top:0}
.bandh>span{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3)}
.bandh .tclear{margin-left:auto}

/* the rarity mark: CS2's own tier colour, which is what a player means when
   they say "a red". A ring for the same reason the swatches have one — the
   Consumer white and the tile behind it are not far apart in a light theme. */
.rdot{flex:none;display:inline-block;width:10px;height:10px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(127,127,127,.5)}
.nsel-i .rdot{width:11px;height:11px}

/* price is TWO bounds and one unit, so it is one control with a rule around it
   rather than two fields that happen to sit together */
/* The box is built the SAME WAY as a menu summary — 13.5px text, 10px/12px
   padding, 1px border — rather than being given a height that guesses at the
   result. The guess was 40px against their 41.6px, and 1.6px of difference on
   a row aligned to its bottom edge is exactly enough to look broken without
   being obviously wrong. Match the construction and the heights cannot drift
   again when the font changes.

   `$` prefixes each input instead of one "USD" after both. Trailing it read as
   a unit belonging to Max alone, and the pair is symmetric, so its marks
   should be too.

   The SEPARATOR takes the slack, not the inputs. Two inputs at flex:1 1 0 do
   split the box evenly, but an empty one is then a wide field with its
   placeholder stranded at the left end and dead space after it — Max looked
   detached from the right edge it was supposed to bound. Sizing the inputs and
   letting the dash between them stretch pins Min to the left wall and Max to
   the right one, which is what the control means. */
.pxf{flex:0 1 184px;min-width:0}
.pxf .pxr{display:flex;align-items:center;gap:5px;background:var(--sunk);
  border:1px solid var(--line);border-radius:8px;padding:10px 12px;
  font-size:13.5px;transition:border-color .12s}
.pxf .pxr:focus-within{border-color:var(--brand)}
/* shrink-only: each input asks for 54px (five digits at 13.5px) and gives it
   back before the box overflows */
.pxf input{flex:0 1 54px;min-width:0;width:54px;background:none;border:0;padding:0;
  font:inherit;color:var(--ink);appearance:textfield;-moz-appearance:textfield}
.pxf input::-webkit-outer-spin-button,.pxf input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.pxf input:focus{outline:none}
.pxf input::placeholder{color:var(--ink-3)}
.pxf .pxr i{flex:1 1 auto;min-width:6px;text-align:center;font-style:normal;color:var(--ink-3)}
.pxf .pxr b{flex:none;font-weight:400;color:var(--ink-3)}
.field{display:flex;flex-direction:column;gap:5px}
.field.grow{flex:1 1 400px;min-width:0}
/* Menu fields SHARE the row rather than each claiming a fixed 212px. Six of
   them at a fixed width came to 1,322px and left a ragged gap at the end of a
   1,520px row; grown from a small basis they divide the width evenly, still
   wrap in pairs on a laptop and stack on a phone. min-width:0 is what lets a
   flex item shrink below its content — without it the long tournament labels
   would push the row wider than the toolbar. */
.field.mf{flex:1 1 190px;min-width:0}
.field.mf>details{min-width:0}
/* The six item facets are a GRID, not a flex line. Flex divides the SLACK, so
   six menus left a ragged gap at the right end of the row; auto-fit columns
   divide the ROW, and every menu ends up the same width with nothing left
   over. It also degrades honestly: 6 across on a desktop, 3 on a laptop, 2 on
   a tablet, 1 on a phone, and the menus stay equal at every step. */
.controls.facets{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:10px;align-items:end}
.field label,.field .lb{display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;color:var(--ink-2)}
.field label .ti,.field .lb .ti{width:14px;height:14px;color:var(--ink-3)}

/* ── the sort and price-basis menus ──────────────────────────────────────
   These were native <select>s and the argument for keeping them was a good
   one: a select brings its own state, keyboard and mobile behaviour free. It
   fails on exactly one requirement — an <option> can hold text and nothing
   else, in every browser — so per-option icons cost the select.

   What is bought back is worth the trade: the CLOSED menu wears the chosen
   option's own icon, so the control says which sort is running without being
   opened. Light-dismiss, Escape and mutual exclusion come from the `pick`
   class, handled once in search.js for every menu on the site. */
.nsel{position:relative}
.nsel>summary{display:flex;align-items:center;gap:9px;list-style:none;cursor:pointer;
  width:100%;min-width:0;background:var(--sunk);border:1px solid var(--line);border-radius:8px;
  padding:10px 32px 10px 12px;font:inherit;font-size:13.5px;color:var(--ink);user-select:none;
  transition:border-color .12s}
.nsel>summary::-webkit-details-marker{display:none}
.nsel>summary:hover{border-color:var(--ink-3)}
.nsel[open]>summary{border-color:var(--brand)}
.nsel>summary::after{content:"";position:absolute;right:13px;top:50%;width:6px;height:6px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:translateY(-5px) rotate(45deg);transition:transform .15s}
.nsel[open]>summary::after{transform:translateY(-1px) rotate(225deg)}
.nsel-i{display:flex;flex:none;color:var(--ink-3)}
.nsel-i .ti{width:15px;height:15px}
.nsel[open] .nsel-i,.nsel>summary:hover .nsel-i{color:var(--ink-2)}
.nsel-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nsel-p{position:absolute;z-index:60;top:calc(100% + 6px);left:0;min-width:100%;
  background:var(--rail);border:1px solid var(--line);border-radius:9px;padding:5px;
  box-shadow:0 16px 38px rgba(0,0,0,.45);max-height:62vh;overflow:auto}
.nopt{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;
  border-radius:6px;padding:8px 11px;font:inherit;font-size:13.5px;color:var(--ink-2);
  cursor:pointer;white-space:nowrap;text-align:left}
.nopt .ti{width:15px;height:15px;color:var(--ink-3);flex:none}
.nopt:hover{background:var(--card-hi);color:var(--ink)}
.nopt:hover .ti{color:var(--ink-2)}
.nopt[aria-pressed="true"]{color:var(--ink);font-weight:600;background:var(--card-hi)}
.nopt>span{flex:1 1 auto}
.nopt em{flex:none;font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.nopt:hover em,.nopt[aria-pressed="true"] em{color:var(--ink-2)}
.nopt[aria-pressed="true"] .ti{color:var(--brand)}
/* Two menus outgrew the 15px glyph box. The Side marks are letterforms — "CT"
   is two of them and cannot be read in a square built for one — and Sticker
   Type and Tournament wear photographs, which need to be seen rather than
   merely noticed. `haspic` puts a floor under EVERY row in those two menus,
   the plain-dot "Any ..." row included: without it the first row sits 11px
   shorter than the rest and the list reads as if it starts mid-scroll. */
.nopt .ti.sidem,.nsel-i .ti.sidem{width:29px;height:15px}
.nopt .oimg{width:26px;height:26px;flex:none;object-fit:contain;border-radius:3px}
.nsel-p.haspic .nopt{min-height:42px}
/* Smaller in the CLOSED summary than in the open list. The summary only
   confirms a choice already made, and it sits in a row of fields that has to
   stay one height — 18px fits inside its 38px without growing it. */
.nsel-i .oimg{width:18px;height:18px;flex:none;object-fit:contain}

/* ── colour ───────────────────────────────────────────────────────────────
   The swatches are the only colours on the site that are NOT theme tokens and
   are not in xf-contrast's ink/surface lists, and that is deliberate: a black
   swatch forced to 4.5:1 against a dark card would have to stop being black,
   at which point the control is lying about the thing it is filtering on. They
   are graphics whose colour IS the content, like the wear dots above.

   What makes them legible in both themes instead is the ring — one neutral
   grey at 55%, which reads as a border against a light card and against a dark
   one, so `white` and `black` both keep an edge. Every swatch carries a WORD
   next to it in the picker, in ink, so nothing here is colour-only. */
.sw{flex:none;display:inline-block;width:11px;height:11px;border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(127,127,127,.55)}
.sw-black{background:#1c1f24}
.sw-blue{background:#3b6fd4}
.sw-brown{background:#8a5a34}
.sw-cyan{background:#2fb8c6}
.sw-gold{background:#d9a441}
.sw-green{background:#3f9e52}
.sw-grey{background:#8b9199}
.sw-orange{background:#e5762e}
.sw-pink{background:#e070a8}
.sw-purple{background:#8b5cd6}
.sw-red{background:#d33f3f}
.sw-white{background:#eceff3}
.sw-yellow{background:#e3c53a}

/* the shut control wears the picked swatches, since a multi-select summary
   cannot wear "the chosen option" the way sort and basis do */
.cpick{position:relative}
.cpick>summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;
  width:100%;min-width:0;background:var(--sunk);border:1px solid var(--line);border-radius:8px;
  padding:10px 32px 10px 12px;font:inherit;font-size:13.5px;color:var(--ink);user-select:none;
  transition:border-color .12s}
.cpick>summary::-webkit-details-marker{display:none}
.cpick>summary:hover{border-color:var(--ink-3)}
.cpick[open]>summary{border-color:var(--brand)}
.cpick>summary::after{content:"";position:absolute;right:13px;top:50%;width:6px;height:6px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:translateY(-5px) rotate(45deg);transition:transform .15s}
.cpick[open]>summary::after{transform:translateY(-1px) rotate(225deg)}
.co-cur{display:flex;align-items:center;gap:5px;min-width:0}
.co-cur span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize}
.co-p{position:absolute;z-index:60;top:calc(100% + 6px);left:0;min-width:max-content;
  background:var(--rail);border:1px solid var(--line);border-radius:9px;padding:6px;
  box-shadow:0 16px 38px rgba(0,0,0,.45);max-height:62vh;overflow:auto}
/* two columns: thirteen rows in one column is a scroll on a laptop, and the
   list is short enough that both columns are read at once */
.co-g{display:grid;grid-template-columns:repeat(2,minmax(148px,1fr));gap:1px}
/* the two columns are the reason this panel has a width worth guarding: at
   ~330px it is wider than the control it hangs off, and on a phone that is
   most of the screen. One column below that, rather than a sideways scroll. */
@media (max-width:420px){.co-p{max-width:92vw}.co-g{grid-template-columns:1fr}}
.cob{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;
  border-radius:6px;padding:7px 10px;font:inherit;font-size:13.5px;color:var(--ink-2);
  cursor:pointer;white-space:nowrap;text-align:left;text-transform:capitalize}
.cob>span{flex:1 1 auto}
.cob em{flex:none;font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.cob:hover{background:var(--card-hi);color:var(--ink)}
.cob[aria-pressed="true"]{color:var(--ink);font-weight:600;background:var(--card-hi)}
.cob[aria-pressed="true"] em{color:var(--ink-2)}
.co-f{display:flex;align-items:center;gap:10px;margin-top:5px;padding:8px 10px 3px;
  border-top:1px solid var(--line)}
.co-f span{font-size:11px;line-height:1.45;color:var(--ink-3)}
.co-clear{flex:none;align-self:flex-start;background:var(--sunk);border:1px solid var(--line);
  border-radius:6px;padding:5px 9px;font:inherit;font-size:12px;color:var(--ink-2);cursor:pointer}
.co-clear:hover{border-color:var(--ink-3);color:var(--ink)}

/* on the tile, and only while the filter is on. The picked colours are marked
   with the ring the rest do not get, so a secondary-colour match explains
   itself: three dots, one ringed, is "it has red on it" without a sentence. */
.sc-c{display:flex;align-items:center;gap:4px;padding:8px 13px 0}
.sc-c .sw{width:9px;height:9px;border-radius:2px}
.sc-c .sw.m{width:12px;height:12px;border-radius:3px}
.sc-c .sw.on{box-shadow:inset 0 0 0 1px rgba(127,127,127,.55),0 0 0 2px var(--brand)}
.cmeta .sc-c{display:inline-flex;padding:0 0 0 7px;vertical-align:-2px}

/* wear: CS2's five conditions in CS2's five colours, spelled out. The dot
   carries the colour and the word carries the meaning, so the row still reads
   for anyone who cannot separate the hues — and it beats a dropdown, which
   hid all five behind a click. */
.wsel{display:flex;flex-wrap:wrap;gap:6px}
.wb{display:inline-flex;align-items:center;gap:7px;background:var(--sunk);
  border:1px solid var(--line);color:var(--ink-2);border-radius:8px;
  padding:9px 13px;font:inherit;font-size:13px;font-weight:500;cursor:pointer;
  white-space:nowrap;transition:border-color .12s,color .12s,background .12s}
.wb em{width:9px;height:9px;border-radius:2px;flex:none;background:var(--ink-3)}
.wb:hover{border-color:var(--ink-3);color:var(--ink)}
.wb[aria-pressed="true"]{color:var(--ink);background:var(--card-hi)}
.wb.any[aria-pressed="true"]{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.w-fn em{background:var(--fn)}
.w-mw em{background:var(--mw)}
.w-ft em{background:var(--ft)}
.w-ww em{background:var(--ww)}
.w-bs em{background:var(--bs)}
.w-fn[aria-pressed="true"]{border-color:var(--fn);box-shadow:inset 0 0 0 1px var(--fn)}
.w-mw[aria-pressed="true"]{border-color:var(--mw);box-shadow:inset 0 0 0 1px var(--mw)}
.w-ft[aria-pressed="true"]{border-color:var(--ft);box-shadow:inset 0 0 0 1px var(--ft)}
.w-ww[aria-pressed="true"]{border-color:var(--ww);box-shadow:inset 0 0 0 1px var(--ww)}
.w-bs[aria-pressed="true"]{border-color:var(--bs);box-shadow:inset 0 0 0 1px var(--bs)}

/* a segmented control, so the two choices read as one either/or rather than
   as two buttons that might both be on */
.vsel{display:flex;background:var(--sunk);border:1px solid var(--line);border-radius:8px;padding:3px}
.vb{display:inline-flex;align-items:center;gap:6px;background:none;border:0;border-radius:6px;
  color:var(--ink-3);padding:7px 12px;font:inherit;font-size:13px;font-weight:500;
  cursor:pointer;white-space:nowrap}
.vb .ti{width:15px;height:15px}
.vb:hover{color:var(--ink)}
.vb[aria-pressed="true"]{background:var(--brand);color:var(--on-brand);font-weight:600}

/* pressed is a FILLED pill, not a tinted border and an 11px tick: in a row of
   eight, the ones that are on have to be findable from across the page */
/* only shown when there is something to clear — a permanent reset button just
   reads as a ninth filter to work out */
.tclear{display:inline-flex;align-items:center;gap:6px;margin-left:auto;background:none;
  border:1px solid var(--line);color:var(--ink-2);border-radius:20px;padding:7px 13px;
  font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap}
.tclear .ti{width:13px;height:13px}
.tclear:hover{color:var(--ink);border-color:var(--down)}
.tclear[hidden]{display:none}
.statusline{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-bottom:12px}
.statusline b{color:var(--ink-2)}
.toolbar .statusline{margin:11px 0 0}

/* three grids, one per view. `.grid` alone is the DETAILED one, which is what
   all the tile CSS below was written against; simple and compact override the
   track size only. */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(274px,1fr));gap:12px}
/* at most five across, and never narrower than 216px. max() inside minmax is
   what caps the count: once (100% - 4 gaps)/5 exceeds the floor, the track
   size IS a fifth of the row and auto-fill can only fit five. */
.grid.simple{grid-template-columns:repeat(auto-fill,minmax(max(216px,calc((100% - 56px) / 5)),1fr));gap:14px}
.grid.compact{grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:9px}

/* ── the simple tile ─────────────────────────────────────────────────────
   Rarity strip, picture, name, price. The strip is the only piece of CS2
   jargon on this card, and it is the one that needs no explaining: a player
   has been reading that colour ladder since their first case, and a visitor
   who has not still gets a grid that is easy to scan.

   The picture takes the most space of anything here, deliberately. It is what
   a visitor recognises the item BY, and on the detailed tile it was a 132px
   thumbnail crowded against eight numbers and a chart. */
.card.sc{padding:0 0 13px;gap:0;border-radius:10px}
.sc-r{display:block;width:100%;height:3px;flex:none;border-radius:10px 10px 0 0}
/* a soft pool of light under the render, so a dark skin on a dark card has a
   floor to sit on — the nav icons' problem, one size up */
.sc-a{display:grid;place-items:center;height:134px;padding:14px 14px 4px;
  background:radial-gradient(ellipse at 50% 58%,rgba(255,255,255,.06),transparent 68%)}
.sc-a img{max-width:100%;max-height:116px;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 5px 11px rgba(0,0,0,.5))}
.sc-a .noimg{display:block;width:100%;height:100%}
/* two lines, always: a one-line name and a two-line name must not make the
   price jump up and down across a row of tiles */
.sc-n{padding:0 13px;font-size:14px;font-weight:600;line-height:1.3;letter-spacing:-.008em;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  min-height:2.6em;color:var(--ink-2)}
.sc-p{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:6px 13px 0;
  font-size:20px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sc-p b{font-weight:400;color:var(--ink-3);margin:0 1px;font-size:16px}
/* Every exterior and its price, in the tile. This was an on-hover overlay over
   the artwork; it is a plain list now, because the answer to "which one is the
   cheap one?" should not require a pointer — half the readers do not have one.
   Rules, not a table: the label truncates and the price is pinned right by
   `margin-left:auto`, so a long wear name can never push a price off the tile. */
.sc-w{display:flex;flex-direction:column;gap:2px;padding:9px 13px 0;font-size:11.5px}
.sc-w>span{display:flex;align-items:center;gap:7px;line-height:1.5}
.sc-w em{flex:none;width:6px;height:6px;border-radius:50%}
.sc-w i{font-style:normal;color:var(--ink-3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.sc-w b{margin-left:auto;padding-left:6px;font-family:var(--mono);font-size:11.5px;
  font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-w .fn{background:var(--fn)} .sc-w .mw{background:var(--mw)} .sc-w .ft{background:var(--ft)}
.sc-w .ww{background:var(--ww)} .sc-w .bs{background:var(--bs)}
/* ── filtered to one exterior ────────────────────────────────────
   All five rows stay; one is lit and the rest go grey. `.dim em` is two classes
   AND an element, so it outranks the `.sc-w .fn` wear colours without needing
   !important — and `.sel` is left alone, so the chosen row keeps its colour.
   Both greys are --ink-3, which the contrast harness already holds to AA on
   every surface in every palette; nothing here dims by opacity. */
.sc-w .sel{background:var(--card-hi);margin:0 -6px;padding:1px 6px;border-radius:4px}
.sc-w .sel i{color:var(--ink)}
.sc-w .sel b{color:var(--ink)}
.sc-w .dim em{background:var(--ink-3)}
.sc-w .dim i,.sc-w .dim b{color:var(--ink-3);font-weight:400}
/* The sweet-spot mark. --up, not --brand: the contrast harness classifies brand
   as a FILL and holds it to 3:1, and this is type. --up is ink, checked to AA on
   every surface in every palette, and green is already the site's word for
   "good news about a price". */
.sc-w .hot i{color:var(--ink-2)}
/* A quiet inline label, NOT a pill. It lands on roughly two thirds of the tiles
   on page one — not because the test is loose but because that is how CS2 wear
   pricing actually works: a 70-90% drop one or two wears down is the norm on a
   modern skin, not the exception. A bordered badge repeated 39 times on a
   screen is decoration; a small green word in the same place on every tile is a
   convention the eye learns in one page and can then skip to. */
.sc-w .hot u{flex:none;text-decoration:none;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--up);white-space:nowrap;opacity:.9}
.sc-w .hot b{color:var(--ink)}
.sc-t{display:flex;gap:5px;flex-wrap:wrap;padding:9px 13px 0}
.tg{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 6px;border-radius:4px;background:var(--sunk);
  border:1px solid var(--line-soft);color:var(--ink-3);white-space:nowrap;line-height:1.3}
.tg.st{color:var(--st)}
.tg.sv{color:var(--sv)}
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:8px;padding:12px;text-decoration:none;color:inherit;overflow:hidden;
  position:relative;transition:border-color .12s,background-color .12s,transform .12s}
.card:hover{border-color:var(--ink-2);background:var(--card-hi);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.34)}
/* The numbers a card has no room for, revealed where the sparkline was. Only on
   a real pointer: on touch there is no hover, and a panel that needs one would
   sit permanently on top of the chart. */
.cx{position:absolute;left:0;right:0;bottom:0;padding:11px 12px 12px;background:var(--card-hi);
  border-top:1px solid var(--line);opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .13s,transform .13s}
@media (hover:hover){
  .card:hover .cx{opacity:1;transform:none}
  /* the panel repeats Supply and Liquidity, so fading the footer under it is a
     swap — leaving it visible would just put two labels behind a panel edge */
  .card .cfoot{transition:opacity .13s}
  .card:hover .cfoot{opacity:0}
}
.cxg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px 10px}
.cxi{display:flex;flex-direction:column;gap:1px;min-width:0}
.cxi i{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);font-style:normal}
.cxi b{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.chead{display:block;min-height:46px}
.cnm{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.16;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cmeta{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chero{display:flex;align-items:center;gap:10px;height:126px;margin-top:6px}
.cmoney{display:flex;flex-direction:column;min-width:0}
.cpx{font-size:27px;font-weight:700;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.cchg{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:5px}
/* the cheapest live listing, under the headline and deliberately quiet: it is
   shown only when it is BELOW the headline, so its whole job is to say "there
   is a gap here" without competing with the number it sits under */
.ccheap{display:block;margin-top:3px;font-family:var(--mono);font-size:12px;
  font-weight:500;color:var(--ink-3);font-variant-numeric:tabular-nums;line-height:1.2}
.ccheap i{font-style:normal;font-family:var(--sans);font-size:11px}
.grid.compact .ccheap{font-size:11px}
.cchg .cw{color:var(--ink-3);font-weight:400}
.cbasis{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-top:4px}
.cart{margin-left:auto;flex:0 0 132px;height:112px;display:grid;place-items:center;overflow:hidden}
.cart img{max-width:100%;max-height:112px;object-fit:contain;width:auto;height:auto}
.cchart{display:block;height:84px;margin:2px -12px 0}
.cchart svg{display:block;width:100%;height:84px}
.grid.compact .chero{height:96px}
.grid.compact .cart{flex-basis:96px;height:84px}
.grid.compact .cart img{max-height:84px}
.grid.compact .cpx{font-size:21px}
.grid.compact .cnm{font-size:15px}
.grid.compact .chead{min-height:38px}
.grid.compact .cchart,.grid.compact .cchart svg{height:46px}
.cfoot{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:9px}
.cm{display:block;min-width:0}
.cml{display:flex;justify-content:space-between;gap:6px;font-family:var(--mono);font-size:10px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.cml b{color:var(--ink-2);font-weight:500}
.cmt{display:block;height:3px;background:var(--sunk);border-radius:2px;margin-top:3px;overflow:hidden}
.cmt i{display:block;height:100%;border-radius:2px}
.empty{padding:40px;text-align:center;color:var(--ink-3);grid-column:1/-1}

.pager{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-top:16px}
.pager button{background:var(--sunk);border:1px solid var(--line);color:var(--ink-2);border-radius:5px;
  padding:5px 10px;cursor:pointer;font-size:12.5px;font-variant-numeric:tabular-nums}
.pager button:hover:not(:disabled){border-color:var(--ink-3);color:var(--ink)}
.pager button[aria-current="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.pager button:disabled{opacity:.4;cursor:default}
.pager .gap{color:var(--ink-3);padding:0 3px}
.pager .count{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--ink-3)}
@media (max-width:700px){
  .sel select{min-width:0;width:100%}
  .controls .field{flex:1 1 150px}
  .field.grow{flex:1 1 100%}
  .wb{flex:1 1 auto;justify-content:center;padding:9px 10px}
  .tclear{margin-left:0}
  .grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:9px}
  .grid.simple{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
  .sc-a{height:106px;padding:11px 11px 4px}
  .sc-w{padding:8px 10px 0;font-size:11px}
  .sc-a img{max-height:92px}
  .sc-n{font-size:13px;padding:0 10px}
  .sc-p{font-size:17px;padding:5px 10px 0}
  .sc-t{padding:8px 10px 0}
  .cnm{font-size:15px}.cpx{font-size:20px}
  .chero{height:96px}.cart{flex-basis:84px;height:80px}.cart img{max-height:80px}
  .cchart,.cchart svg{height:56px}
}

/* ── landing ──────────────────────────────────────────────────────────── */
.home .hero{padding:34px 0 26px;text-align:center}
.home .hero h1{font-size:clamp(27px,4.6vw,46px);font-weight:700;letter-spacing:-.035em;line-height:1.08}
.home .hero p{color:var(--ink-2);max-width:62ch;margin:13px auto 0;font-size:15.5px}
.bigsearch{display:flex;gap:8px;max-width:620px;margin:24px auto 0}
.bigsearch input{flex:1;min-width:0;background:var(--sunk);border:1px solid var(--line);color:var(--ink);
  border-radius:7px;padding:13px 16px;font-size:15px}
.bigsearch input::placeholder{color:var(--ink-3)}
.bigsearch button{background:var(--brand);border:1px solid var(--brand);color:#fff;border-radius:7px;
  padding:0 22px;font-size:15px;font-weight:500;cursor:pointer}
.bigsearch button:hover{filter:brightness(1.1)}
.quick{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.quick a{font-size:12.5px;color:var(--ink-2);text-decoration:none;background:var(--sunk);
  border:1px solid var(--line);border-radius:20px;padding:5px 13px}
.quick a:hover{border-color:var(--ink-3);color:var(--ink)}

.statband{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:var(--line-soft);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:16px}
.statband div{background:var(--card);padding:14px 16px;display:flex;flex-direction:column;gap:3px}
.statband .k{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.statband .v{font-size:25px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.05}
.statband .d{font-family:var(--mono);font-size:10px;color:var(--ink-3)}
.statband .d.up{color:var(--up)} .statband .d.down{color:var(--down)}

.phead .more{margin-left:auto;font-size:11.5px;color:var(--ink-2);text-decoration:none;font-family:var(--mono)}
.phead .more:hover{color:var(--ink)}
.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--line-soft)}
@media (max-width:1100px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{background:var(--card);padding:12px;display:flex;flex-direction:column;align-items:center;gap:5px;
  text-decoration:none;text-align:center;min-width:0}
.tile:hover{background:var(--card-hi)}
.tile .im{height:62px;display:grid;place-items:center;width:100%}
.tile .im img{max-height:62px;max-width:100%;object-fit:contain}
.tile .tn{font-size:12px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
.tile .tp{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.tile .ts{display:block;width:100%;height:24px}
.tile .ts svg{display:block;width:100%;height:24px}
.tile .tc{font-family:var(--mono);font-size:9.5px}

.twocol{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:820px){.twocol{grid-template-columns:1fr}}
.mvlist{display:flex;flex-direction:column}
.mv{display:grid;grid-template-columns:22px 1fr auto auto;gap:10px;align-items:baseline;padding:7px 13px;
  border-bottom:1px solid var(--line-soft);text-decoration:none}
.mv:last-child{border-bottom:0}
.mv:hover{background:var(--card-hi)}
.mv .r{font-family:var(--mono);font-size:10px;color:var(--ink-3)}
.mv .n{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mv .p{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.mv .c{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;min-width:62px;text-align:right}

.expl .exgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line-soft)}
.expl .exgrid > div{background:var(--card);padding:14px 16px}
.expl h3{font-size:13.5px;font-weight:500;margin-bottom:5px}
.expl p{color:var(--ink-3);font-size:12.5px;margin:0;line-height:1.55}

/* ── market cap page ──────────────────────────────────────────────────── */
.mc-ctl{display:flex;align-items:center;gap:6px;min-width:0}
.mc-ctl label{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap}
.mc-sel,.mc-inp{background:var(--sunk);border:1px solid var(--line);color:var(--ink);border-radius:5px;
  padding:4px 7px;font-size:12.5px;max-width:min(100%,230px);min-width:0}
.mc-inp::placeholder{color:var(--ink-3)}
.mc-inp:disabled,.mc-sel:disabled{opacity:.5}

.mc-hero{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:16px;padding:14px;
  align-items:start}
@media (min-width:1560px){.mc-hero{grid-template-columns:minmax(0,420px) minmax(0,1fr)}}
@media (max-width:900px){.mc-hero{grid-template-columns:1fr}}
/* the summary paragraph that used to fill this column was removed, so the
   facts grid is pushed to the bottom instead of leaving a hole under it */
.mc-heroL{min-width:0;display:flex;flex-direction:column;gap:12px}
.mc-heroL .mc-facts{margin-top:auto}
.mc-heroR{min-width:0}
.mc-heroL h1{font-size:clamp(19px,2.4vw,26px);font-weight:700;letter-spacing:-.025em;line-height:1.14}
.mc-lab{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-2);margin-top:11px}
.mc-big{font-size:clamp(32px,5.2vw,48px);font-weight:700;letter-spacing:-.045em;line-height:1;
  font-variant-numeric:tabular-nums;margin-top:1px}
.mc-deltas{display:flex;gap:15px;margin-top:8px;flex-wrap:wrap}
.mc-deltas div{display:flex;flex-direction:column}
.mc-deltas .w{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3)}
.mc-deltas .v{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.mc-sum{color:var(--ink-2);font-size:13px;margin:12px 0 0;max-width:60ch}
.mc-sum b{color:var(--ink);font-weight:500}
.mc-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);border-radius:6px;overflow:hidden;
  margin-top:13px}
.mc-facts div{background:var(--sunk);padding:6px 9px;display:flex;flex-direction:column;gap:1px;min-width:0}
.mc-facts .k{font-family:var(--mono);font-size:8px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-facts .v{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
.mc-note{padding:10px 13px;border-top:1px solid var(--line-soft);background:var(--sunk);
  color:var(--ink-3);font-size:11.5px;line-height:1.65;max-width:150ch}
.mc-note b{color:var(--ink-2);font-weight:500}

/* eight segments, so four columns land as a clean 4x2 — auto-fit strands one
   card on its own row at most page widths */
.mc-idx{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-soft)}
@media (min-width:1680px){.mc-idx{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media (max-width:1080px){.mc-idx{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.mc-idx{grid-template-columns:minmax(0,1fr)}}
.mc-card{display:flex;flex-direction:column;gap:3px;text-align:left;background:var(--card);border:0;
  border-left:3px solid transparent;padding:9px 11px;cursor:pointer;color:var(--ink);min-width:0;font:inherit}
.mc-card:hover{background:var(--card-hi)}
.mc-card[aria-pressed="true"]{background:var(--card-hi);border-left-color:var(--pin)}
.mc-card .nm{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.mc-card .nm i{width:7px;height:7px;border-radius:2px;background:var(--pin);flex:none}
.mc-card .row{display:flex;align-items:baseline;gap:6px}
.mc-card .big{font-size:18px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mc-card .sm{font-family:var(--mono);font-size:8.5px;color:var(--ink-3)}
.mc-card .n{font-family:var(--mono);font-size:9px;color:var(--ink-3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.mc-card .spk{display:block;margin:2px 0}
.mc-card .spk svg{display:block;width:100%;height:30px;overflow:visible}

.mc-mov{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft)}
@media (max-width:780px){.mc-mov{grid-template-columns:1fr}}
.mc-movcol{background:var(--card);min-width:0}
.mc-movcol h3{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400;padding:7px 12px;border-bottom:1px solid var(--line-soft)}
.mc-mrow{display:grid;grid-template-columns:20px 40px minmax(0,1fr) auto 58px;gap:9px;align-items:center;
  padding:5px 12px;border-bottom:1px solid var(--line-soft);text-decoration:none;color:inherit}
.mc-mrow:last-child{border-bottom:0}
.mc-mrow:hover{background:var(--card-hi)}
.mc-mrow .r{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);text-align:right}
/* the art is what makes a mover recognisable before the name is read */
.mc-mrow .mi{width:40px;height:34px;display:grid;place-items:center;background:var(--sunk);
  border:1px solid var(--line-soft);border-radius:6px;overflow:hidden}
.mc-mrow .mi img{max-width:34px;max-height:28px;object-fit:contain}
.mc-mrow .nm{font-size:12.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-mrow .nm .s2{display:block;font-family:var(--mono);font-size:9px;color:var(--ink-3)}
.mc-mrow .d{font-family:var(--mono);font-size:10.5px;color:var(--ink-2);text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.mc-mrow .c{font-size:12.5px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.mc-empty{padding:16px 12px;color:var(--ink-3);font-size:12.5px;text-align:center}

.mc-tblwrap{overflow-x:auto}
.mc-tbl{border-collapse:collapse;width:100%;min-width:920px;font-size:12.5px}
.mc-tbl th{background:var(--bar);text-align:left;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:400;padding:7px 9px;
  border-bottom:1px solid var(--line);white-space:nowrap}
.mc-tbl th[data-k]{cursor:pointer;-webkit-user-select:none;user-select:none}
.mc-tbl th[data-k]:hover{color:var(--ink)}
.mc-tbl th[aria-sort]{color:var(--ink)}
.mc-tbl th[aria-sort="descending"]::after{content:" \\25BE"}
.mc-tbl th[aria-sort="ascending"]::after{content:" \\25B4"}
.mc-tbl th.r,.mc-tbl td.r{text-align:right}
.mc-tbl td{padding:4px 9px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.mc-tbl td.r{font-variant-numeric:tabular-nums;white-space:nowrap}
.mc-tbl tbody tr:hover{background:var(--card-hi)}
.mc-tbl .rk{color:var(--ink-3);font-family:var(--mono);font-size:10px}
.mc-tbl .ls{color:var(--ink-2)}
.mc-item{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit;min-width:0}
.mc-item .im{width:32px;height:28px;flex:none;display:grid;place-items:center}
.mc-item .im img{max-width:32px;max-height:28px;object-fit:contain}
.mc-item .tx{min-width:0}
.mc-item .nm{display:block;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-item .cat{display:block;font-family:var(--mono);font-size:8.5px;color:var(--ink-3)}
.mc-item:hover .nm{text-decoration:underline}
.mc-share{display:grid;grid-template-columns:minmax(0,1fr) 46px;gap:6px;align-items:center;
  width:116px;margin-left:auto}
.mc-share i{display:block;height:6px;border-radius:2px;background:var(--t-good);opacity:.55;min-width:1px}
.mc-share span{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);text-align:right}
.mc-spk{width:88px}
.mc-spk svg{display:block;width:78px;height:22px;overflow:visible}
.mc-pager{display:flex;align-items:center;gap:5px;padding:9px 12px;border-top:1px solid var(--line-soft);
  flex-wrap:wrap}
.mc-pager button{background:var(--sunk);border:1px solid var(--line);color:var(--ink-2);border-radius:4px;
  padding:3px 9px;font-family:var(--mono);font-size:11px;cursor:pointer}
.mc-pager button:hover:not(:disabled){border-color:var(--ink-3);color:var(--ink)}
.mc-pager button:disabled{opacity:.4;cursor:default}
.mc-pager button[aria-current="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.mc-pager .gap{color:var(--ink-3);font-family:var(--mono);font-size:11px}
.mc-pager .count{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--ink-3)}
@media (max-width:700px){
  .mc-hero{padding:11px;gap:12px}
  .mc-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toolbar{padding:10px}
}

/* ── shared marks ─────────────────────────────────────────────────────── */
.vico{border-radius:3px;flex:none;object-fit:contain;display:block}
.buy .vico{width:16px;height:16px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:5px;overflow:hidden}
.seg button{background:var(--sunk);border:0;border-right:1px solid var(--line);color:var(--ink-3);
  padding:3px 10px;font-family:var(--mono);font-size:11px;cursor:pointer}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--brand);color:#fff}

/* ── landing: the markets we actually watch ───────────────────────────── */
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1px;background:var(--line-soft)}
.mrow{background:var(--card);display:flex;align-items:center;gap:10px;padding:12px 14px;
  text-decoration:none;min-width:0}
.mrow:hover{background:var(--card-hi)}
.mrow img{width:22px;height:22px;border-radius:4px;flex:none;object-fit:contain}
.mrow .mn{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow .mk{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}

/* ══════════════════════════════════════════════════════════════════════════
   CS2 additions — components the Rust site had no need for.

   Appended rather than woven in, so the inherited sheet stays byte-comparable
   with the one it came from. Every colour here is an existing token: no new
   value enters the palette, which is what keeps xf-contrast.mjs's reading of
   :root the whole story.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the wear x quality matrix ───────────────────────────────────────────
   The one genuinely new piece of UI. A CS2 skin is a family and this grid is
   the page: rows are quality, columns are wear, and a cell is its own
   market_hash_name with its own book. */
.pe-mx{margin:14px 0 4px}
/* ── Pricempire row shape ────────────────────────────────────────────────
   Their `listings-table` is a card of cards: a --bar container with 2px of
   padding, and each row a --card-hi tile separated by a 1px gap rather than a
   border. The inherited Rust geometry was a bordered list on a flat surface,
   which is what made the palette swap alone still read as "the old site".
   Everything below overrides geometry only — the columns and their meanings
   are unchanged. */
.pe-offers{background:var(--bar);border-radius:12px;padding:2px;gap:1px}
.of{border:0;border-left:3px solid transparent;background:var(--card-hi);
  border-radius:3px;padding:12px 16px 12px 13px}
.of:first-of-type{border-radius:10px 10px 3px 3px}
.of:last-child{border-radius:3px 3px 10px 10px}
.of:hover{background:var(--line)}
.of.of-hd{background:transparent;border-radius:10px 10px 0 0}
.of.of-hd:hover{background:transparent}
/* their framed logo: a 2px ring in the container colour, generously rounded */
.of .lg{border:2px solid var(--bar);border-radius:12px;background:var(--card);width:46px;height:46px}
.of .lg img{width:30px;height:30px}
/* the Buy affordance. Every link it carries is aimed at THIS item — Steam by
   canonical URL, the rest through their own search on the exact
   market_hash_name — so the button lands the reader on the item, which is what
   Addendum 4 actually requires of it. The three venues with no usable URL get
   no button rather than a dead one. */
.of-buy{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;
  min-width:76px;height:32px;padding:0 12px;border-radius:8px;font-size:12px;font-weight:600;
  text-decoration:none;background:var(--brand);color:var(--on-brand);
  border:1px solid var(--brand);transition:filter .12s}
.of-buy:hover{filter:brightness(1.08)}
.of.of-hd .bt{text-align:right}

/* ── order book: their two-panel Highest Buy / Lowest Sell ──────────────── */
.pe-bids{background:var(--bar);border-radius:12px;padding:2px;gap:1px}


/* ── browse bar ──────────────────────────────────────────────────────────
   The header reads as the categories themselves — All skins · Rifles · Pistols
   · … — with each class opening its own guns. <details> rather than a scripted
   popover: it opens with no JavaScript and is keyboard-operable for free, and
   every entry is a real link to a filtered board (?cat= / ?wp=), so each is
   bookmarkable and crawlable rather than a click handler. */
/* wraps, never scrolls: overflow-x:auto here would establish a scroll container
   and CLIP every dropdown panel below it, since the panels are absolutely
   positioned children of the bar */
.navin nav{display:flex;align-items:center;gap:1px;min-width:0;flex:0 1 auto;flex-wrap:wrap;row-gap:3px}
.nd-flat,.nd>summary{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:4px 7px;border-radius:7px;font-size:13.5px;font-weight:600;line-height:1.5;
  color:var(--ink-2);text-decoration:none;cursor:pointer;border:1px solid transparent}
.nd-flat:hover,.nd>summary:hover{color:var(--ink);background:var(--card)}
.nd{position:relative}
.nd>summary{list-style:none;user-select:none}
.nd>summary::-webkit-details-marker{display:none}
.nd>summary::after{content:"";width:5px;height:5px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);
  transition:transform .15s;opacity:.7}
.nd[open]>summary{color:var(--ink);background:var(--card);border-color:var(--line)}
.nd[open]>summary::after{transform:translateY(1px) rotate(225deg)}
/* the panel is NOT .si — that class belongs to the board's search island and
   carries position:absolute;left:0;right:0 of its own */
.nd-p{position:absolute;top:calc(100% + 7px);left:0;z-index:60;min-width:250px;
  background:var(--rail);border:1px solid var(--line);border-radius:11px;
  box-shadow:0 18px 44px rgba(0,0,0,.5);padding:7px;max-height:70vh;overflow:auto}
.nd-wide{min-width:344px;display:grid;grid-template-columns:1fr 1fr;gap:1px 7px}
.nd-p a{display:flex;align-items:center;gap:10px;
  padding:6px 9px;border-radius:7px;font-size:13px;font-weight:500;
  color:var(--ink-2);text-decoration:none;white-space:nowrap}
.nd-p a .nl{flex:1;min-width:0}
/* a weapon render is wide and short, so the box is too — object-fit keeps the
   silhouette rather than squaring it off.

   These are Steam CDN artwork, not an icon set: dark, busy, mostly-navy
   renders that on a navy bar were invisible at 30px. The first fix was a lit
   tile behind each one, which worked but made every tab 26px tall and pushed
   the header onto two lines. This is the better answer to both: --ni-f
   flattens the render to a single-colour SILHOUETTE, which needs no tile to
   separate it from the bar, is legible at 22px, and gives a clean mark rather
   than a small picture of a gun. Dark palettes get white, the light one gets
   black — the direction is a token, so it follows the theme. */
.ni{width:22px;height:16px;flex:none;object-fit:contain;display:block;
  filter:var(--ni-f);opacity:.72;transition:opacity .12s}
span.ni{opacity:0}
/* the BAR keeps the silhouettes; a menu has room for the real thing, and
   build-data picks the artwork so every weapon in a group wears the same
   collection or the same finish — a group reads as a set, and two groups never
   read as each other. */
.nd-p .ni{width:32px;height:23px;filter:none;opacity:1}
.nd-flat:hover>.ni,.nd>summary:hover .ni,.nd[open]>summary .ni,
.nd-p a:hover .ni{opacity:1}
.nd-flat .nl,.nd>summary .nl{white-space:nowrap}
.nd-p a:hover{background:var(--card-hi);color:var(--ink)}
.nd-p a i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--ink-3)}
.nd-h{font-weight:600;color:var(--ink);border-bottom:1px solid var(--line-soft);
  border-radius:6px 6px 0 0;margin-bottom:3px;padding-bottom:8px}
.nd-search{grid-column:1/-1;margin-top:4px;padding:7px 9px;border-radius:6px;
  border:1px solid var(--line-soft);background:var(--card);color:var(--ink-2);
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;text-align:left}
.nd-search:hover{color:var(--ink);border-color:var(--brand)}

/* ── the wear selector: quality tabs over a list of wear rows ────────────
   Pricempire's `wear-options`. A row has width, so it carries the wear's float
   band and the logo of whichever market is cheapest for it — neither fits in a
   grid cell, which is why the grid this replaced had to go. */
.mx-t{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2);margin-bottom:8px}
.wo{display:flex;flex-direction:column;gap:12px;width:100%}
.wo-tabs{display:flex;border-bottom:1px solid var(--line)}
.wo-tab{flex:1 1 0;min-width:0;background:none;border:0;border-bottom:2px solid transparent;
  margin-bottom:-1px;padding:10px 4px;cursor:pointer;font:inherit;font-size:13.5px;font-weight:600;
  color:var(--ink-3);transition:color .12s,border-color .12s}
.wo-tab:hover{color:var(--ink-2)}
.wo-tab.on{color:var(--ink);border-bottom-color:var(--brand)}
.wo-list{display:flex;flex-direction:column;gap:6px;width:100%}
/* The exterior rows are the control the reader actually uses — every other
   number on the page follows whichever one is selected — so they are sized as
   the primary control rather than as a list of labels. */
.wo-o{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;background:var(--bar);border:0;border-radius:11px;cursor:pointer;
  font:inherit;text-align:left;position:relative;overflow:hidden;transition:background .12s}
.wo-o:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:28px;background:var(--brand);border-radius:0 999px 999px 0;opacity:0;transition:opacity .12s}
.wo-o:hover:not(.on){background:var(--line)}
.wo-o.on{background:linear-gradient(0deg,rgba(75,243,100,.10),rgba(75,243,100,.10)),var(--line)}
.wo-o.on:before{opacity:1}
.wo-l{display:flex;flex-direction:column;gap:2px;min-width:0}
.wo-n{font-size:14.5px;font-weight:600;color:var(--ink-2)}
.wo-o.on .wo-n{color:var(--ink)}
/* Only the WORD is tinted. StatTrak orange over the whole row put the wear —
   the thing the row selects — in a colour that means something else. */
.wq{font-weight:700;font-size:13px}
.wq.st{color:var(--st)}
.wq.sv{color:var(--sv)}
.wo-f{font-size:11.5px;font-weight:500;color:var(--ink-3);font-family:var(--mono)}
.wo-o.on .wo-f{color:var(--ink-2)}
.wo-m{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}
.wo-p{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--ink-2)}
.wo-o.on .wo-p{color:var(--ink)}
.wo-b{width:22px;height:22px;border-radius:5px;overflow:hidden;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;background:var(--line)}
.wo-b img{width:100%;height:100%;object-fit:contain}
.mx-n{font-size:11px;color:var(--ink-3);line-height:1.5;margin:10px 0 0}

/* ── the float ladder: their `wear-limits` bar ───────────────────────────
   Five segments sized by how much of the 0..1 float axis each wear tier
   actually spans — FN is 7% of the axis, BS is 55% — so the bar is a true
   picture of the ladder rather than five equal blocks. Tiers this skin has no
   variant for are dimmed rather than removed, because the ladder is the same
   for every skin and a gap in it is information. */
.fl-w{width:100%;padding:14px;background:var(--card);border-radius:10px;
  display:flex;flex-direction:column;gap:10px;margin-top:12px}
.fl-t{font-size:12px;font-weight:600;color:var(--ink-2);margin:0}
.fl-bar{display:flex;align-items:center;gap:1px;width:100%;height:5px;
  background:var(--rail);border-radius:8px;overflow:hidden}
.fl-s{height:100%;min-width:1px}
.fl-s:first-child{border-radius:99px 0 0 99px}
.fl-s:last-child{border-radius:0 99px 99px 0}
.fl-s.off{opacity:.22}
.fl-s.fn{background:var(--fn)}.fl-s.mw{background:var(--mw)}.fl-s.ft{background:var(--ft)}
.fl-s.ww{background:var(--ww)}.fl-s.bs{background:var(--bs)}
.fl-r{display:flex;justify-content:space-between;align-items:center;width:100%;
  font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--ink-2)}
.fl-k{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:10px;color:var(--ink-3)}
.fl-k b{font-weight:600;color:var(--ink-2)}
.fl-k i{font-style:normal;display:inline-flex;align-items:center;gap:4px}
.fl-k em{width:7px;height:7px;border-radius:2px;display:inline-block}
/* ── the title, on one line ──────────────────────────────────────────────
   The h1 carries its own font-size, computed from the name (rows.js nameSize),
   so the rail always opens with exactly one line instead of a three-line
   paragraph. nowrap is what makes the size mean anything; the ellipsis is the
   backstop under the 12px floor, which about one name in twenty reaches. */
.pe-nm{display:flex;align-items:center;gap:8px;margin:12px 0 9px}
.pe-nm h1{margin:0;min-width:0;flex:1;font-weight:700;letter-spacing:-.02em;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the button is 26px and never shrinks, which is the 34px rows.js holds back
   out of the rail's 376 when it sizes the text */
.cpn{flex:none;width:26px;height:26px;display:grid;place-items:center;position:relative;
  padding:0;border:1px solid var(--line);border-radius:6px;background:var(--card);
  color:var(--ink-3);cursor:pointer;transition:color .12s,border-color .12s}
.cpn:hover{color:var(--ink);border-color:var(--ink-3)}
.cpn.ok{color:var(--brand);border-color:var(--brand)}
/* the only feedback a copy can give. Absolute so it cannot reflow the title
   under it, and pointer-events:none so it cannot swallow a second click. */
.cpn.ok::after{content:"Copied";position:absolute;top:calc(100% + 5px);right:0;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--brand);background:var(--card);border:1px solid var(--line);border-radius:5px;
  padding:2px 6px;white-space:nowrap;pointer-events:none;z-index:5}

.pe-act{margin:0 0 11px}
.pe-act a{font-size:11.5px;color:var(--ink-2);text-decoration:none;border:1px solid var(--line);
  border-radius:6px;padding:4px 10px;display:inline-block;background:var(--card)}
.pe-act a:hover{border-color:var(--brand);color:var(--ink)}
/* the collection list: rarity, name, price. Text only — see build-data.mjs on
   why these tiles carry no artwork. */
/* ── where it comes from ─────────────────────────────────────────────────
   One row, above the collection list, because "which case" is asked before
   "what else is in it". The picture earns its bytes here in a way the twelve
   sibling tiles never could: a case is recognised by its lid. */
.pe-ctr{display:flex;align-items:center;gap:13px;margin:9px;padding:10px 13px;
  background:var(--sunk);border:1px solid var(--line);border-radius:9px;
  text-decoration:none;transition:border-color .12s,background .12s}
.pe-ctr:hover{background:var(--card-hi);border-color:var(--ink-3)}
.ct-a{flex:none;display:grid;place-items:center;width:88px;height:66px}
.ct-a img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.ct-a .noimg{display:block;width:100%;height:100%;background:var(--card-hi);border-radius:6px}
.ct-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.ct-l{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3)}
.ct-n{font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.008em}
.ct-m{font-size:11px;color:var(--ink-3)}
.ct-p{margin-left:auto;flex:none;font-family:var(--mono);font-size:16px;color:var(--ink)}
@media (max-width:520px){.pe-ctr{gap:10px}.ct-a{width:56px;height:44px}.ct-p{font-size:14px}}

/* the colour row in the facts list */
.f-co{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.f-co span{text-transform:capitalize}

.pe-col{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px;padding:9px}
.cl{display:flex;align-items:center;gap:9px;padding:5px 8px;border-radius:5px;
  text-decoration:none;border:1px solid transparent}
.cl:hover{background:var(--card-hi);border-color:var(--line-soft)}
/* the rarity, as the colour rather than the word — see rarStyle in
   render-item.mjs. 74px of type became a 4px bar, and the name got the rest. */
.cl-r{flex:none;width:4px;height:20px;border-radius:2px;background:var(--line)}
.cl-n{flex:1;min-width:0;font-size:12px;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-p{flex:none;font-family:var(--mono);font-size:11px;color:var(--ink)}

/* A feed with a current quote but no series. Twelve of the sixteen
   marketplaces are in this state, and an empty cell that says so beats a flat
   line, which would read as a price that did not move. */
.sp.none{display:flex;align-items:center;font-size:10.5px;color:var(--ink-3);
  font-family:"IBM Plex Mono",ui-monospace,monospace}
.of-plot[disabled]{opacity:.3;cursor:default}

/* ── related skins ─────────────────────────────────────────────────────── */
/* one card per row: the side column is 236px and these names are long, so a
   second card across would ellipsis every one of them into uselessness */
.pe-rel{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:9px}
/* ── the card ────────────────────────────────────────────────────────────
   Picture on top at the card's full width, name and price sharing the line
   under it. Two grid columns with the art spanning both, so the shape needs
   no wrapper element around the caption row — the three spans that were a
   flex row are the same three spans.

   The row shape it replaced gave the art a 52px box in a 236px column, which
   is not enough to tell a Redline from a Point Disarray, and telling those
   apart is the only question this list exists to answer. */
.rl{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
  gap:0 8px;padding:0;overflow:hidden;border:1px solid var(--line-soft);
  border-radius:7px;background:var(--bar);text-decoration:none;color:inherit;min-width:0;
  transition:border-color .12s,background .12s}
.rl:hover{border-color:var(--ink-3);background:var(--card-hi)}
/* the same dotted well the rail gives the main artwork (.pe-art), at a third
   the height — one treatment for "this is a skin render", not two */
.rl-i{grid-column:1/-1;height:96px;display:flex;align-items:center;justify-content:center;
  padding:8px;background:var(--sunk);
  background-image:radial-gradient(var(--line-soft) 1px,transparent 1px);background-size:13px 13px;
  border-bottom:1px solid var(--line-soft)}
.rl-i img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.rl-n{padding:7px 0 8px 9px;font-size:12px;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rl-p{padding:7px 9px 8px 0;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12.5px;color:var(--ink)}

.bnote{margin:22px 0 0;color:var(--ink-3);font-size:12px;line-height:1.6;max-width:70ch}
.bnote b{color:var(--ink-2)}
.pe-ig{font-size:11px;color:var(--ink-3);line-height:1.55;margin:14px 0 0}
.plot-n{font-size:11px;color:var(--ink-3);line-height:1.55;margin:0;padding:8px 12px 11px}

/* ── search overlay ────────────────────────────────────────────────────── */
.sx{position:fixed;inset:0;z-index:80}
.sx-b{position:absolute;inset:0;background:rgba(0,0,0,.62)}
.sx-p{position:absolute;left:50%;top:64px;transform:translateX(-50%);width:min(620px,calc(100vw - 24px));
  max-height:min(70vh,560px);display:flex;flex-direction:column;overflow:hidden;
  background:var(--card);border:1px solid var(--line);
  border-radius:8px;box-shadow:0 18px 48px rgba(0,0,0,.5)}
/* The panel's own search box. It is pinned and the RESULTS scroll under it, so
   the query never leaves the screen while the reader is looking down a long
   list of matches for it. */
.sx-q{display:flex;align-items:center;gap:10px;flex:none;padding:11px 13px;
  border-bottom:1px solid var(--line)}
.sx-q svg{width:17px;height:17px;flex:none;color:var(--ink-3)}
.sx-q input{flex:1;min-width:0;background:none;border:0;color:var(--ink);font:inherit;
  font-size:16px;padding:2px 0}
.sx-q input:focus{outline:none}
.sx-q input::placeholder{color:var(--ink-3)}
.sx-q input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.sx-q kbd{flex:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line);
  border-radius:4px;padding:2px 5px;line-height:1.3}
.sx-i{overflow:auto}
body.sx-lock{overflow:hidden}
.sx-r{display:flex;align-items:center;gap:10px;padding:7px 11px;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--line-soft)}
.sx-r:last-child{border-bottom:0}
.sx-r.on{background:var(--card-hi)}
.sx-g{width:46px;height:36px;flex:none;display:flex;align-items:center;justify-content:center}
.sx-g img{max-width:100%;max-height:100%;object-fit:contain}
.sx-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sx-t b{font-size:12.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-t i{font-style:normal;font-size:10px;color:var(--ink-3)}
.sx-v{flex:none;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;text-align:right}
.sx-v em{display:block;font-style:normal;font-size:10px}
.sx-n{padding:14px;color:var(--ink-3);font-size:12.5px;margin:0}
/* The panel is a jump list and stops at CAP matches. When it is holding some
   back it says how many and hands the same query to the board, which is the
   surface that can actually page through them. Sticky so it stays on screen
   while the reader scrolls the matches it is counting. */
.sx-all{position:sticky;bottom:0;display:block;padding:9px 11px;text-decoration:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);background:var(--sunk);border-top:1px solid var(--line)}
.sx-all b{color:var(--ink-2);font-weight:600}
.sx-all:hover{color:var(--ink);background:var(--card-hi)}

/* The inherited .pe-facts styles a dl the Rust rail built differently; this one
   is a two-column key/value list, so it says so rather than stacking. */
.pe-facts{display:grid;grid-template-columns:1fr auto;gap:4px 12px;margin:14px 0 0;
  border-top:1px solid var(--line-soft);padding-top:10px}
.pe-facts dt{font-size:11.5px;color:var(--ink-3);margin:0}
.pe-facts dd{margin:0;text-align:right;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px}

/* ── the offer row gains a Listed column ─────────────────────────────────
   Pricempire prints how many are listed at each market beside the price, and
   the count is already in the payload — a market showing one $3 listing and one
   showing four hundred are not the same offer. The inherited grid was eight
   columns; this is the same shape with `ls` inserted before the price. */
/* ── the row was mostly empty space, and the cause was the PAGE ─────────
   The market list sat in a 1134px column because the layout was sized for a
   chart that is no longer there. Widening the columns to fill it only spread
   the void around: a left-aligned name in a 350px track has 270px of air after
   it, and right-aligned numbers in wide tracks drift apart. So the item page
   is narrower now (see .page.item) and the columns are snug, which is what
   makes six numbers read as one row instead of six islands. */
.of{grid-template-columns:52px minmax(96px,1fr) 96px 104px 76px 84px;
  gap:14px;padding:11px 14px 11px 12px}
.of .lg{width:52px;height:52px;border-radius:12px}
.of .lg img{width:34px;height:34px}
.of .px{font-size:19px}
/* not bold: the pill already carries a tint and a ring, and at 700 it competed
   with the price beside it for the same glance */
.of .dl{font-size:12.5px;font-weight:500;padding:4px 8px;min-width:54px}
.of .of-go{font-size:17px}
/* The crate sits immediately before the count, and the pair is LEFT-aligned in
   its column. Right-aligned, the icon and its number floated at the far edge of
   a 96px track with a gap between them and the marketplace they describe, which
   read as the icon belonging to nothing. The header label is aligned the same
   way so the column has one edge, not two. */
.of .ls{display:flex;align-items:center;justify-content:flex-start;gap:6px}
.of .stk{width:15px;height:15px;flex:none;color:var(--ink-3);display:block;position:static}
.of.of-hd .ls{display:block;text-align:left}
.of-buy{min-width:0;width:100%;height:29px;font-size:11.5px}
.of.of-hd{padding-top:6px;padding-bottom:6px}
.of .ls{text-align:right;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;
  color:var(--ink-2)}
.of .ls i{font-style:normal;color:var(--ink-3)}
.of-hd .ls{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
@media (max-width:900px){
  /* the inherited sheet collapses this row to five columns on a phone; the
     listing count is the first thing to go, not the price */
  .of{grid-template-columns:42px minmax(0,1fr) 92px 76px;gap:10px;padding:9px 10px}
  .of .ls,.of .dw{display:none}
  .of .lg{width:42px;height:42px}
  .of .lg img{width:28px;height:28px}
}

/* ── video pages ─────────────────────────────────────────────────────────
   The page a YouTube description links to. A viewer has just watched twenty
   combos go past in four minutes and cannot write any of it down; this answers
   the only two questions they actually have, which are what does it cost and
   where do I buy it.

   Two things drive this layout, and the first cut got both wrong.

   The PLAYER lives in a sticky rail, not at the top. At the top it scrolls
   away, and then a page that exists so you can see the clip and the price
   together shows you one or the other. Sticky, it stays beside the list, and
   clicking a timestamp seeks it without losing your place in the cards.

   A SKIN IS A PICTURE. Full-width rows spent nine hundred pixels of a twelve
   hundred pixel column on two 62px thumbnails and a lot of whitespace. Cards
   two-across put the picture at 158px — big enough to actually tell a Mangrove
   from a Rattler, which is the entire reason someone is on this page. */
.navin nav .nvl{margin-left:10px}

/* The player used to sit in a sticky 360px rail so a clip and its prices were
   on screen together. It reads as an afterthought at that size — a 360px
   thumbnail of a video the whole page is about — so it is now the full width of
   the list, directly under the counts, where it is the first thing below the
   title. What the rail bought (the player staying reachable from row 60 of 94)
   video.js buys back by scrolling it into view on a timestamp click. */
.vwrap{display:block}
.vmain{min-width:0}
.vfilm{margin:0 0 20px}
/* ── how big, and whether at all ─────────────────────────────────────────
   A PERCENTAGE of the list, never a pixel width: the player and the cards
   under it then share a left edge at every window size, which is most of the
   reason it is here rather than in a rail. The default is 80% because full
   bleed made a 5-minute clip the whole first screen on a page whose job is
   the prices below it.

   Hiding hides the PLAYER and never the buttons — a control that removes
   itself leaves the reader no way back. The state lives on <html>, applied
   before first paint by the inline script in build-pages.mjs, so a reader who
   hid it does not watch it appear and vanish on the next page. */
.vfilm .vfac{max-width:80%;transition:max-width .18s}
html[data-vz="m"] .vfilm .vfac{max-width:50%}
html[data-vz="s"] .vfilm .vfac{max-width:25%}
html[data-vz="off"] .vfilm .vfac{display:none}
/* Centred on the list, not hugging its left edge: at 25% a left-aligned player
   reads as something that failed to load rather than something the reader
   picked. The buttons and the YouTube link centre with it — they are one
   block, and a control row hard against the left under a centred quarter-width
   player looks like a bug. */
.vfilm .vfac{margin-inline:auto}
.vfilm .vh-yt{text-align:center}
.vfz{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:12px 0 0}
.vz{background:var(--card);border:1px solid var(--line);border-radius:9px;color:var(--ink-2);
  padding:10px 17px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s}
.vz:hover{color:var(--ink);border-color:var(--ink-3)}
.vz[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
/* hiding is not a size, so it sits a little apart from the three that are */
.vz-x{margin-left:10px}

.vid .vhead{margin:2px 0 16px}
.vid h1{font-size:clamp(22px,3vw,31px);line-height:1.15;letter-spacing:-.02em;margin:0 0 10px}
.vh-b{margin:0 0 12px;color:var(--ink-2);font-size:14.5px;max-width:62ch}
.vh-m{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;font-size:12.5px;color:var(--ink-3)}
.vh-m b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.vh-n{margin:10px 0 0;font-size:12.5px;color:var(--ink-3)}
.vh-yt{margin:8px 0 0;font-size:12.5px}
.vh-yt a{color:var(--ink-3)}
.vh-yt a:hover{color:var(--brand)}

/* A thumbnail and a play button, not an iframe. An embedded player is well
   over a megabyte of third-party script plus cookies on EVERY view, including
   the ones that came for a price and never touch the video — and it is the
   difference between needing a consent banner and not needing one. video.js
   builds the frame on the first click. 16/9 with object-fit:cover crops the
   letterboxing off YouTube's 4:3 hqdefault thumbnail. */
.vfac{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:12px;
  overflow:hidden;background:var(--sunk);border:1px solid var(--line);cursor:pointer}
.vfac img,.vfac iframe{width:100%;height:100%;display:block;border:0;object-fit:cover}
.vplay{position:absolute;inset:0;margin:auto;width:62px;height:62px;border-radius:50%;border:0;
  background:var(--brand);color:var(--on-brand);display:flex;align-items:center;
  justify-content:center;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.35);transition:transform .12s}
.vfac:hover .vplay{transform:scale(1.07)}
.vfac.on{cursor:default}
.vfac.on .vplay{display:none}

.vbar{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:12px 0 0;
  border-top:1px solid var(--line)}
.vpb{flex:0 1 240px}
.vsf{flex:0 1 auto}
.vb-p{margin:9px 0 14px;font-size:12.5px;color:var(--ink-3)}
.vb-p b{color:var(--ink-2);font-weight:600}
.vsort{display:flex;flex:none;background:var(--sunk);border:1px solid var(--line);
  border-radius:8px;padding:3px}
.vs{background:none;border:0;border-radius:6px;color:var(--ink-3);padding:7px 12px;font:inherit;
  font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
.vs:hover{color:var(--ink)}
.vs[aria-pressed="true"]{background:var(--brand);color:var(--on-brand);font-weight:600}
/* the menu rows without a favicon still line up with the ones that have one */
.nsel .nb{display:inline-block;width:15px;height:15px;flex:none}
.nsel-p .nopt img{border-radius:3px;flex:none}

.vlist{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:12px;align-items:stretch}
.ve{display:flex;flex-direction:column;gap:9px;background:var(--card);
  border:1px solid var(--line);border-radius:13px;padding:12px 13px}
.ve-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ve-n{font-family:var(--mono);font-size:11px;color:var(--ink-3);min-width:18px}
.ve-t{display:inline-flex;align-items:center;gap:5px;background:var(--sunk);
  border:1px solid var(--line);border-radius:999px;padding:3px 10px;font:inherit;font-size:11.5px;
  font-family:var(--mono);color:var(--ink-2);cursor:pointer}
.ve-t:hover{border-color:var(--brand);color:var(--ink)}
.ve-t.off{cursor:default}
.ve-sh{font-size:11px;color:var(--ink-3);text-transform:capitalize;margin-left:auto}
.ve-tot{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  border-top:1px solid var(--line-soft);padding-top:9px;margin-top:auto}
.ve-tot i{font-style:normal;font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--ink-3)}
.ve-tot b{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.ve.part .ve-tot b{color:var(--ink-2)}

.vp{display:grid;grid-template-columns:158px minmax(0,1fr);gap:12px;align-items:center}
.vp-i{display:block;background:var(--sunk);border:1px solid var(--line-soft);border-radius:9px;
  padding:6px 4px}
.vp-i img{display:block;width:100%;height:auto;object-fit:contain}
.vp-b{min-width:0}
.vp-r{display:block;font-family:var(--mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--ink-3)}
.vp-n{display:block;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;
  line-height:1.25;margin:1px 0 2px}
.vp-n:hover{color:var(--brand)}
.vp-w{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-3)}
.vp-f,.vp-s{font-style:normal;font-family:var(--mono);font-size:9.5px;color:var(--ink-3);
  border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.vp-p{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:7px}
.vp-pl{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
/* How deep the book is behind that number. A price is only as real as the
   listings under it, and one listing at a third of everyone else's price is
   someone dumping — not a market rate. Printed rather than hidden or
   corrected: the number IS what it costs, right now, if you are quick. */
.vp-t{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gap,var(--ink-3));margin-top:1px}

/* The price is a BUTTON. Hovering it lists every marketplace that has this
   exact variant; pressing it goes to the page that has all of them, the
   history and every wear. Hover alone would have left touch screens with no
   way in, and a plain <span> would have left the keyboard with none either. */
.vp-px{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:2px 0;
  font:inherit;color:var(--ink);cursor:pointer}
.vp-px b{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.vp-px .cv{color:var(--ink-3);transition:transform .12s}
.vp-px:hover .cv{transform:translateY(1px);color:var(--ink-2)}
.vp-px:hover b{color:var(--brand)}

/* The one filled button on the page: the thing it exists to have clicked, and
   the only outbound link that carries rel="sponsored" once a tag rides on it. */
.vp-buy{display:inline-flex;align-items:center;gap:6px;background:var(--brand);
  color:var(--on-brand);border-radius:8px;padding:7px 13px;font-size:12.5px;font-weight:600;
  text-decoration:none;white-space:nowrap}
.vp-buy:hover{filter:brightness(1.08)}
.vp-buy img{border-radius:3px}
.vp-buy.off{background:none;color:var(--ink-3);border:1px dashed var(--line);cursor:default;
  padding:6px 12px}
.tip .tf{margin-top:6px;padding-top:5px;border-top:1px solid var(--line-soft);
  font-size:10px;color:var(--ink-3)}
.tip .tr i{font-style:normal;color:var(--ink-3);font-size:10px;margin-left:5px}

.vfoot{margin:22px 0 0;font-size:13px;color:var(--ink-3)}
.vfoot a{color:var(--brand)}

/* Back to where they came from. A reader who clicked a skin out of a video
   page has one thing they want next, and the browser's own Back button is not
   it when they have opened three tabs on the way. */
.vback{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:13px}
.vback a{display:inline-flex;align-items:center;gap:7px;background:var(--sunk);
  border:1px solid var(--line);border-radius:999px;padding:6px 14px;color:var(--ink-2);
  text-decoration:none}
.vback a:hover{border-color:var(--brand);color:var(--ink)}

.vidx .bhead p{margin:6px 0 0;color:var(--ink-3);font-size:14px;max-width:70ch}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:18px}
.vcard{display:block;text-decoration:none;color:inherit;background:var(--card);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.vcard:hover{border-color:var(--brand)}
.vcard img,.vcard-x{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.vcard-x{background:var(--sunk)}
.vcard b{display:block;padding:11px 12px 3px;font-size:14px;font-weight:600;line-height:1.3}
.vcard i{display:block;padding:0 12px 12px;font-style:normal;font-size:11.5px;color:var(--ink-3)}

@media (max-width:1180px){
  /* the rail stops being sticky before it stops fitting: a 360px player beside
     a single column of cards is worse than one above them */
  .vwrap{grid-template-columns:minmax(0,1fr);gap:16px}
  .vrail{position:static;max-width:520px;order:-1}
}
@media (max-width:760px){
  .vlist{grid-template-columns:minmax(0,1fr)}
  .vp{grid-template-columns:112px minmax(0,1fr);gap:10px}
  .vp-px b{font-size:16px}
}