/* CSPricer — one stylesheet, no framework. Dark is the default (the audience lives in dark UIs); light is a full second theme, chosen ONLY by the toggle (data-theme on , remembered in localStorage). The OS preference is deliberately ignored: every first visit is dark (owner decision 2026-09-21). Every colour is a token. Components never name a colour directly. */ @font-face{font-family:"Archivo";src:url("/static/fonts/archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap} @font-face{font-family:"JetBrains Mono";src:url("/static/fonts/jbmono.woff2") format("woff2");font-weight:100 800;font-display:swap} :root{ --ground:#0A1013;--surface:#10191D;--raised:#152127;--sunk:#0D1518;--line:#20313A;--line2:#2C424D; --ink:#E9F1F3;--ink2:#B4C5CB;--mut:#7D939B;--accent:#2ED3C0;--accent-ink:#04211E;--accent-soft:#0F2E2C; --curve:#62B6F3;--good:#4FCB8E;--good-bg:#0F2A1D;--warn:#E6B15A;--warn-bg:#2E240F;--bad:#F2837A;--bad-bg:#351917; --fn:#47B27B;--mw:#97C05F;--ft:#E0BD50;--ww:#E2984C;--bs:#D4624E; --r-consumer:#B0C3D9;--r-industrial:#5E98D9;--r-milspec:#4B69FF;--r-restricted:#8847FF;--r-classified:#D32CE6; --r-covert:#EB4B4B;--r-contraband:#E4AE39;--r-extraordinary:#E4AE39;--r-stock:#7D939B; --shadow:0 12px 40px rgba(0,0,0,.45); --disp:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --body:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:"JetBrains Mono",ui-monospace,"SF Mono",Consolas,monospace; --w:1180px;--gut:24px; color-scheme:dark; } :root[data-theme="light"]{ --ground:#F1F5F5;--surface:#FFFFFF;--raised:#FFFFFF;--sunk:#E6ECEC;--line:#D3DDDE;--line2:#BCCACC; --ink:#0C1A1D;--ink2:#35484D;--mut:#5F747A;--accent:#08796F;--accent-ink:#FFFFFF;--accent-soft:#DAEFEC; --curve:#0B5F8A;--good:#1B7A4B;--good-bg:#DDF2E6;--warn:#8A5A08;--warn-bg:#F8ECD3;--bad:#B0372F;--bad-bg:#F9E3E1; --fn:#3E9B6B;--mw:#86AE4E;--ft:#CBA433;--ww:#D48538;--bs:#BE4D3D;--r-consumer:#6F8296;--r-stock:#5F747A; --shadow:0 12px 40px rgba(12,26,29,.14);color-scheme:light; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-padding-top:84px} body{margin:0;background:var(--ground);color:var(--ink);font:400 16px/1.6 var(--body);font-stretch:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:3px} h1,h2,h3,h4{font-family:var(--disp);margin:0;line-height:1.1;text-wrap:balance;font-stretch:110%} h1{font-size:clamp(2rem,4.6vw,3.1rem);font-weight:800;letter-spacing:-.02em} h2{font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:700} h3{font-size:1.02rem;font-weight:700} p{margin:0;max-width:70ch} ul,ol{margin:0;padding-left:1.2em} button,input,select{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px} [hidden]{display:none!important} .num,.mono,td.n,th.n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"zero"} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .wrap{max-width:var(--w);margin-inline:auto;padding-inline:var(--gut)} .stack{display:flex;flex-direction:column;gap:var(--g,20px)} .row{display:flex;flex-wrap:wrap;gap:var(--g,12px);align-items:center} .mut{color:var(--mut)}.ink2{color:var(--ink2)}.small{font-size:.86rem}.tiny{font-size:.76rem} .eyebrow{font:500 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)} .lede{font-size:1.12rem;color:var(--ink2);max-width:62ch} main{display:block;padding-block:36px 72px} main>.wrap{display:flex;flex-direction:column;gap:44px;min-width:0} main>.wrap>*{min-width:0} html,body{overflow-x:clip} section{display:flex;flex-direction:column;gap:16px} /* ── header ─────────────────────────────────────────── */ .hdr{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--ground) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .hdr .wrap{display:flex;align-items:center;gap:18px;height:62px} .logo{display:flex;flex-direction:column;gap:3px;color:var(--ink);font:800 1.22rem/1 var(--disp);font-stretch:118%;letter-spacing:-.01em} .logo:hover{text-decoration:none}.logo b{color:var(--accent);font-weight:800} .logo i{display:flex;height:3px;gap:1px;width:100%}.logo i s{display:block;height:100%} .nav{display:flex;gap:4px;margin-left:6px} .nav a{color:var(--ink2);font-size:.9rem;font-weight:500;padding:7px 10px;border-radius:4px;white-space:nowrap} .nav a:hover,.nav a[aria-current="page"]{color:var(--ink);background:var(--raised);text-decoration:none} .searchbtn{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:min(340px,38vw);padding:8px 12px;background:var(--surface);border:1px solid var(--line2);border-radius:6px;color:var(--mut);cursor:text;font-size:.9rem} .searchbtn:hover{border-color:var(--accent)}.searchbtn span{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} kbd{font:500 .68rem/1 var(--mono);padding:3px 6px;border:1px solid var(--line2);border-radius:3px;color:var(--ink2);background:var(--sunk)} .iconbtn{display:grid;place-items:center;width:36px;height:36px;border-radius:6px;border:1px solid transparent;background:none;cursor:pointer;color:var(--ink2)} .iconbtn:hover{background:var(--raised);color:var(--ink)} .burger{display:none} @media (max-width:860px){.nav{display:none}.burger{display:grid}.searchbtn{min-width:0;flex:1}.searchbtn kbd{display:none} .nav.open{display:flex;position:absolute;top:62px;left:0;right:0;flex-direction:column;background:var(--surface);border-bottom:1px solid var(--line);padding:10px var(--gut)}} /* ── pieces ─────────────────────────────────────────── */ .crumb{font:400 .74rem/1.4 var(--mono);color:var(--mut);display:flex;flex-wrap:wrap;gap:6px} .crumb a{color:var(--mut)}.crumb a:hover{color:var(--ink)}.crumb span::before{content:"/";margin-right:6px;opacity:.5} .pill{display:inline-flex;align-items:center;gap:6px;font:500 .68rem/1 var(--mono);letter-spacing:.03em;padding:4px 8px;border-radius:3px;background:var(--sunk);color:var(--ink2);white-space:nowrap} .pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c,var(--mut))} .pill.plain::before{display:none} .p-good{color:var(--good);background:var(--good-bg);--c:var(--good)}.p-warn{color:var(--warn);background:var(--warn-bg);--c:var(--warn)} .p-bad{color:var(--bad);background:var(--bad-bg);--c:var(--bad)}.p-acc{color:var(--accent);background:var(--accent-soft);--c:var(--accent)} .rar-consumer{--c:var(--r-consumer)}.rar-industrial{--c:var(--r-industrial)}.rar-milspec{--c:var(--r-milspec)}.rar-restricted{--c:var(--r-restricted)} .rar-classified{--c:var(--r-classified)}.rar-covert{--c:var(--r-covert)}.rar-contraband{--c:var(--r-contraband)}.rar-extraordinary{--c:var(--r-extraordinary)}.rar-stock{--c:var(--r-stock)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:5px;border:1px solid var(--line2);background:var(--surface);color:var(--ink);font-weight:600;font-size:.9rem;cursor:pointer;white-space:nowrap} .btn:hover{border-color:var(--accent);text-decoration:none}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .btn.primary:hover{filter:brightness(1.08)}.btn.sm{padding:6px 10px;font-size:.8rem}.btn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)} .panel{background:var(--surface);border:1px solid var(--line);border-radius:6px} .pad{padding:18px 20px} .grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(var(--min,230px),1fr))} .tw{overflow-x:auto;border:1px solid var(--line);border-radius:6px;background:var(--surface)} table{border-collapse:collapse;width:100%;font-size:.88rem} th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap} th{font:500 .66rem/1.2 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--mut);background:var(--sunk);position:sticky;top:0} th button{all:unset;cursor:pointer;display:inline-flex;gap:5px;align-items:center}th button:hover{color:var(--ink)} th[aria-sort="ascending"] button::after{content:"\2191"}th[aria-sort="descending"] button::after{content:"\2193"} tr:last-child td{border-bottom:0}td.n,th.n{text-align:right} tbody tr.rowlink{cursor:pointer}tbody tr.rowlink:hover{background:var(--raised)} td .tn{display:flex;align-items:center;gap:10px;min-width:220px;white-space:normal} td .tn img{width:48px;height:36px;object-fit:contain;flex:none} .wearstrip{display:flex;height:6px;gap:2px;border-radius:2px;overflow:hidden} .wearstrip s{display:block;height:100%;opacity:.22}.wearstrip s.on{opacity:1} .w-fn{background:var(--fn)}.w-mw{background:var(--mw)}.w-ft{background:var(--ft)}.w-ww{background:var(--ww)}.w-bs{background:var(--bs)} /* ── skin card ──────────────────────────────────────── */ .card{display:flex;flex-direction:column;gap:10px;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:6px;color:var(--ink);position:relative;overflow:hidden} .card:hover{border-color:var(--line2);text-decoration:none;transform:translateY(-1px)} .card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--c,var(--line))} .card .im{aspect-ratio:4/3;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 60%,var(--raised),transparent 70%)} .card .im img{width:86%;height:auto;object-fit:contain} .card .nm{font-weight:600;font-size:.92rem;line-height:1.25}.card .nm small{display:block;color:var(--mut);font-weight:400;font-size:.76rem} .card .pr{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.84rem} .card .pr b{font-family:var(--mono);font-weight:500} @media (prefers-reduced-motion:no-preference){.card{transition:transform .12s,border-color .12s}} /* ── skin page ──────────────────────────────────────── */ .shead{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,360px);gap:24px;align-items:center} .shead .art{aspect-ratio:4/3;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 55%,color-mix(in srgb,var(--c,var(--accent)) 16%,transparent),transparent 68%)} .shead .art img{width:100%;view-transition-name:skin-art} @media (max-width:760px){.shead{grid-template-columns:1fr}.shead .art{order:-1;max-width:320px;margin-inline:auto}} .vtabs{display:flex;gap:6px;flex-wrap:wrap} .pricer{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(250px,1fr);background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden} @media (max-width:860px){.pricer{grid-template-columns:minmax(0,1fr)}} .pchart{padding:14px 12px 4px 16px;min-width:0} .pchart svg{width:100%;height:auto;display:block;touch-action:none;cursor:ew-resize;user-select:none} @media (max-width:700px){.pchart{overflow-x:auto}.pchart svg{min-width:620px;touch-action:pan-x}} .pread{padding:18px 20px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:14px;background:var(--raised)} @media (max-width:860px){.pread{border-left:0;border-top:1px solid var(--line)}} .bigp{font:800 2.7rem/1 var(--disp);font-stretch:112%;letter-spacing:-.02em} .kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.86rem;margin:0} .kv dt{color:var(--mut)}.kv dd{margin:0;text-align:right} .scrub{grid-column:1/-1;padding:4px 18px 14px;display:flex;gap:12px;align-items:center;border-top:1px solid var(--line)} .scrub input[type=range]{flex:1;accent-color:var(--accent);min-width:0} .scrub input[type=number]{width:96px;padding:7px 9px;background:var(--sunk);border:1px solid var(--line2);border-radius:4px;font-family:var(--mono)} .wears{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden} .wear{background:var(--surface);box-shadow:0 0 0 .5px var(--line);padding:14px 16px;display:flex;flex-direction:column;gap:4px;font-size:.84rem;color:var(--ink2);cursor:pointer;border:0;text-align:left} .wear:hover{background:var(--raised)}.wear i{display:block;height:3px;border-radius:2px;margin-bottom:6px} .wear b{font:500 .7rem/1.2 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink)} .wear .p{font:500 1rem/1.2 var(--mono);color:var(--ink)} .buy{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden} .buy a{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--surface);color:var(--ink)} .buy a:hover{background:var(--raised);text-decoration:none}.buy a b{flex:1;font-weight:600}.buy a .go{color:var(--accent);font-size:.84rem} .sponsored{background:var(--accent-soft)!important} .splabel{font:500 .62rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)} .answer{font-size:1.04rem;color:var(--ink2);max-width:72ch}.answer b{color:var(--ink);font-weight:600} .note{font-size:.82rem;color:var(--mut)} .callout{border-left:3px solid var(--accent);padding:12px 16px;background:var(--surface);border-radius:0 6px 6px 0} /* ── palette ────────────────────────────────────────── */ .pal{position:fixed;inset:0;z-index:100;display:grid;place-items:start center;padding:9vh 16px 16px;background:rgba(3,8,10,.62);backdrop-filter:blur(4px)} .palbox{width:min(680px,100%);background:var(--surface);border:1px solid var(--line2);border-radius:10px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;max-height:78vh} .palbox input{width:100%;padding:18px 20px;background:none;border:0;border-bottom:1px solid var(--line);font-size:1.08rem;outline:none} .palres{overflow-y:auto;padding:6px} .palres a{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:6px;color:var(--ink)} .palres a[aria-selected="true"],.palres a:hover{background:var(--raised);text-decoration:none} .palres img{width:56px;height:42px;object-fit:contain;flex:none} .palres .t{flex:1;min-width:0}.palres .t small{display:block;color:var(--mut);font-size:.76rem} .palhint{padding:9px 16px;border-top:1px solid var(--line);display:flex;gap:16px;flex-wrap:wrap;font-size:.74rem;color:var(--mut)} .palgroup{font:500 .64rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);padding:10px 12px 4px} /* ── home ───────────────────────────────────────────── */ .hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:36px;align-items:center;padding-block:20px 8px} @media (max-width:900px){.hero{grid-template-columns:1fr}} .herosearch{display:flex;gap:10px;align-items:center;padding:14px 16px;background:var(--surface);border:1px solid var(--line2);border-radius:8px;color:var(--mut);cursor:text;font-size:1.02rem;width:100%} .herosearch:hover{border-color:var(--accent)} .stat{display:flex;flex-direction:column;gap:2px}.stat b{font:800 1.7rem/1 var(--disp);font-stretch:112%}.stat span{font-size:.8rem;color:var(--mut)} /* ── filters / explorer ─────────────────────────────── */ .filters{display:flex;flex-wrap:wrap;gap:10px;align-items:end} .field{display:flex;flex-direction:column;gap:4px;font-size:.74rem;color:var(--mut)} .field input,.field select{padding:8px 10px;background:var(--surface);border:1px solid var(--line2);border-radius:5px;font-size:.88rem;color:var(--ink);min-width:120px} tr.expand td{background:var(--sunk);white-space:normal;padding:16px} .chips{display:flex;flex-wrap:wrap;gap:6px} /* ── prose pages ────────────────────────────────────── */ .prose{max-width:74ch;display:flex;flex-direction:column;gap:16px} .prose h2{margin-top:18px}.prose li{margin-block:4px}.prose code{font-family:var(--mono);font-size:.88em;background:var(--sunk);padding:1px 5px;border-radius:3px} /* ── footer ─────────────────────────────────────────── */ .ftr{border-top:1px solid var(--line);background:var(--surface);padding-block:36px 44px;font-size:.88rem;color:var(--ink2)} .ftr .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:26px} .ftr h4{font:500 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:10px} .ftr ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:7px}.ftr a{color:var(--ink2)}.ftr a:hover{color:var(--ink)} .spfoot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 18px;min-height:64px;border:1px dashed var(--line2);border-radius:6px;margin-bottom:28px} .toast{position:fixed;left:50%;bottom:24px;translate:-50% 0;z-index:120;background:var(--ink);color:var(--ground);padding:10px 16px;border-radius:6px;font-size:.86rem;box-shadow:var(--shadow)} .copy{cursor:copy;border-bottom:1px dotted var(--line2)} @view-transition{navigation:auto} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}} @media print{.hdr,.ftr,.pal,.scrub,.buy{display:none}body{background:#fff;color:#000}} /* browse: image tiles, the filter bar, the sort switch */ .browsebar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;position:sticky;top:64px;z-index:5;padding:10px 0;background:linear-gradient(var(--ground) 70%,transparent)} .bb-search{display:flex;align-items:center;gap:8px;flex:1 1 260px;max-width:420px;padding:9px 12px;background:var(--surface);border:1px solid var(--line2);border-radius:999px;color:var(--mut)} .bb-search:focus-within{border-color:var(--accent);color:var(--ink)} .bb-search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);font:inherit;font-size:.92rem} .seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;background:var(--sunk);border:1px solid var(--line);border-radius:999px} .seg button{padding:6px 12px;border:0;border-radius:999px;background:none;color:var(--ink2);font:inherit;font-size:.8rem;cursor:pointer} .seg button:hover{color:var(--ink)}.seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)} .tile{display:flex;flex-direction:column;gap:8px;padding:12px 14px 14px;background:var(--surface);border:1px solid var(--line);border-radius:10px;color:var(--ink);overflow:hidden;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease} .tile:hover{text-decoration:none;border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow)} .tile .im{aspect-ratio:16/10;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 62%,var(--raised),transparent 72%)} .tile .im img{width:88%;height:auto;object-fit:contain;transition:transform .25s ease}.tile:hover .im img{transform:scale(1.06) rotate(-2deg)} .tile .nm{font-weight:650;font-size:.95rem;line-height:1.25} .tile .meta{display:flex;justify-content:space-between;gap:8px;align-items:baseline;font-size:.78rem;color:var(--mut)} .tile .meta b{font-family:var(--mono);font-weight:500;color:var(--ink2)} [data-gone]{display:none!important} @media (prefers-reduced-motion:reduce){.tile,.tile .im img{transition:none}.tile:hover,.tile:hover .im img{transform:none}} @media (max-width:640px){.browsebar{top:56px}.seg{width:100%;overflow-x:auto;flex-wrap:nowrap}.seg button{white-space:nowrap}} /* pattern-tier ladders: one card per tier, one rung per float window */ .ladders{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))} .ladder{padding:14px 16px;display:flex;flex-direction:column;gap:10px} .ladder header{display:flex;flex-direction:column;gap:2px}.ladder h3{font-size:.95rem;line-height:1.25} .rungs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px} .rungs li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline;padding:7px 9px;border-radius:6px;background:var(--sunk)} .rungs li .win{font-size:.78rem;color:var(--ink2)}.rungs li b{font-family:var(--mono);font-weight:600;color:var(--accent)} .rungs li .small{grid-column:1/-1} /* sticker cards */ .card.stk{cursor:default}.card.stk:hover{transform:none} .card.stk .im{aspect-ratio:1/1}.card.stk .im img{width:78%;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))} .noimg{display:grid;place-items:center;width:56%;aspect-ratio:1/1;border-radius:50%;border:1px dashed var(--line2);color:var(--mut);font-family:var(--mono)} .chips .btn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)} /* ═══════════════════════════════════════════════════════════════════════════════ THE DESIGN SYSTEM (2026-09-21). Ported from the sister site's front end: display headings in Big Shoulders, a monospace body, 2–3 px radii, hairline borders, corner brackets, a blueprint-grid hero, a full-bleed ticker, lift-and-glow hovers. The accent is CSPricer's teal where the original is amber. Everything above this line is the structure the templates rely on; this block is the look, and it wins by coming last. ═══════════════════════════════════════════════════════════════════════════════ */ @font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:100 900;font-display:swap;src:url("/static/fonts/big-shoulders-display-var.woff2") format("woff2")} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/static/fonts/ibm-plex-mono-400.woff2") format("woff2")} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/static/fonts/ibm-plex-mono-500.woff2") format("woff2")} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("/static/fonts/ibm-plex-mono-600.woff2") format("woff2")} @font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url("/static/fonts/ibm-plex-sans-var.woff2") format("woff2")} :root{ --disp:"Big Shoulders Display","Archivo",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Consolas,monospace; --body:"IBM Plex Mono",ui-monospace,Consolas,monospace; --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --w:1680px;--gut:40px;--accent2:#6FE7D8;--red:#FF4B3E; } :root:not([data-theme="light"]){ --ground:#0A0C10;--surface:#0D1015;--raised:#11151C;--sunk:#0C0E12; --line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.16); --ink:#E8EAED;--ink2:#B9C1CC;--mut:#7B8492;--accent:#2ED3C0;--accent-ink:#04211E;--accent-soft:rgba(46,211,192,.10); --shadow:0 24px 60px rgba(0,0,0,.45); } @media (max-width:1239px){:root{--gut:22px}} body{font:400 14px/1.65 var(--body);letter-spacing:.005em} ::selection{background:var(--accent);color:var(--accent-ink)} a{transition:opacity .15s ease,color .15s ease,border-color .15s ease,background-color .15s ease,box-shadow .18s ease,transform .18s ease} a:hover{text-decoration:none} p,.answer,.lede,.prose,.note,.prose li{font-family:var(--sans)} p{max-width:78ch} h1,h2,h3,h4{font-family:var(--disp);font-stretch:100%;text-transform:uppercase;letter-spacing:.04em} h1{font-size:clamp(2.6rem,5.2vw,4.6rem);font-weight:800;line-height:.95;letter-spacing:.02em} h2{font-size:clamp(1.7rem,2.6vw,2.5rem);font-weight:800;letter-spacing:.04em} h3{font-size:1.25rem;font-weight:700;letter-spacing:.05em} h2 .mut,h2 .small{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;vertical-align:middle} .eyebrow{font:500 11px/1 var(--mono);letter-spacing:2px;color:var(--accent)} .lede{font-size:15px;line-height:1.75;color:var(--ink2);max-width:62ch} .answer{font-size:15px;line-height:1.75} .note{font-size:12.5px} main{padding-block:34px 84px} main>.wrap{gap:56px} .num,.mono,td.n,th.n{font-family:var(--mono)} /* header: sticky, blurred, 64 px, uppercase mono links, the diamond next to the wordmark */ .hdr{background:rgba(10,12,16,.94);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.08)} :root[data-theme="light"] .hdr{background:color-mix(in srgb,var(--ground) 92%,transparent)} .hdr .wrap{height:64px;gap:22px} .logo{flex-direction:row;align-items:center;gap:10px;font:800 21px/1 var(--disp);font-stretch:100%;letter-spacing:3px;text-transform:uppercase} .logo::before{content:"";width:11px;height:11px;flex:none;background:var(--accent);transform:rotate(45deg);animation:dmdGlow 2.6s ease-in-out infinite} .logo i{display:none} .nav{gap:22px;margin-left:14px} .nav a{font:400 11px/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--mut);padding:6px 0;border-radius:0;background:none!important;border-bottom:1px solid transparent} .nav a:hover{color:var(--ink)}.nav a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)} .searchbtn{border-radius:2px;background:var(--ground);border-color:var(--line2);font-size:12px;letter-spacing:.3px;min-width:min(460px,40vw);padding:10px 14px} .searchbtn:hover{border-color:var(--accent)} kbd{border-radius:2px;background:none} .iconbtn{border-radius:2px} /* the full-bleed ticker under the header */ .ticker{border-bottom:1px solid rgba(255,255,255,.08);overflow:hidden;background:var(--sunk)} .ticker .track{display:flex;width:max-content;animation:pfTicker 70s linear infinite} .ticker:hover .track{animation-play-state:paused} .ticker .set{display:flex;font-size:11px;letter-spacing:1px;padding:11px 0;white-space:nowrap} .ticker .set a{padding:0 22px;color:var(--mut);display:inline-flex;gap:10px;align-items:baseline} .ticker .set a:hover{color:var(--ink)} .ticker .set b{color:var(--accent);font-weight:500}.ticker .set i{font-style:normal;color:var(--ink2)} /* pieces */ .crumb{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase} .pill{border-radius:2px;font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;padding:5px 9px;background:none;border:1px solid var(--line2)} .p-good,.p-warn,.p-bad,.p-acc{border-color:currentColor} .btn{position:relative;border-radius:2px;background:none;font:500 10.5px/1.2 var(--mono);letter-spacing:1px;text-transform:uppercase;padding:12px 20px; transition:transform .18s cubic-bezier(.2,.8,.25,1),box-shadow .18s cubic-bezier(.2,.8,.25,1),border-color .15s ease,background .15s ease,color .15s ease,filter .15s ease} .btn:hover{border-color:rgba(255,255,255,.4);transform:translateY(-2px);box-shadow:0 12px 24px -16px rgba(0,0,0,.95),0 2px 6px -3px rgba(0,0,0,.55)} .btn:active{transform:translateY(0);transition-duration:.06s} .btn.sm{padding:8px 12px;font-size:10px} .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600;overflow:hidden} .btn.primary:hover{background:var(--accent2);border-color:var(--accent2);filter:none;box-shadow:0 14px 30px -14px rgba(46,211,192,.6),0 2px 8px -4px rgba(0,0,0,.7)} .btn.primary::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.4) 50%,transparent 68%);transform:translateX(-130%)} .btn.primary:hover::after{opacity:1;animation:pf-sheen .6s cubic-bezier(.3,.7,.3,1) 1} .btn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)} .panel,.tw,.pricer,.wears,.buy{border-radius:3px} .panel{background:var(--surface)} .tick{position:relative} .tick::before,.tick::after{content:"";position:absolute;top:-1px;width:18px;height:18px;border-top:2px solid var(--accent);pointer-events:none} .tick::before{left:-1px;border-left:2px solid var(--accent)}.tick::after{right:-1px;border-right:2px solid var(--accent)} th{font-size:10px;letter-spacing:1.5px;background:var(--sunk)} td{font-size:12.5px} tbody tr:hover{background:rgba(255,255,255,.02)} /* cards and tiles: hairline, 3 px, lift + accent border + deep shadow */ .card,.tile{border-radius:3px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease} .card:hover,.tile:hover{border-color:rgba(46,211,192,.45);transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.35)} .card .nm,.tile .nm{font:700 1.05rem/1.15 var(--disp);letter-spacing:.05em;text-transform:uppercase} .card .nm small{font:400 10px/1.5 var(--mono);letter-spacing:1px;text-transform:uppercase;margin-top:4px} .card .pr b,.tile .meta b{color:var(--accent);font-weight:500} .tile .meta{font-size:10px;letter-spacing:1px;text-transform:uppercase} .grid{gap:16px} /* browse bar */ .bb-search{border-radius:2px;background:var(--ground)}.seg{border-radius:2px}.seg button{border-radius:2px;font-size:10px;letter-spacing:1px;text-transform:uppercase} .field input,.field select,.scrub input[type=number]{border-radius:2px;background:var(--ground);font-family:var(--mono);font-size:12px} .field{font-size:10px;letter-spacing:1.5px;text-transform:uppercase} .field input:focus,.field select:focus,.bb-search:focus-within{border-color:var(--accent)} /* stats */ .stat b{font:800 2.3rem/1 var(--disp);letter-spacing:.03em}.stat span{font-size:10px;letter-spacing:1.5px;text-transform:uppercase} .bigp{font:800 3.4rem/1 var(--disp);letter-spacing:.02em;color:var(--accent)} /* home hero: blueprint grid, outline headline, live panel */ .hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;padding:56px 0 40px;align-items:start; background-image:repeating-linear-gradient(rgba(255,255,255,.024) 0 1px,transparent 1px 64px),repeating-linear-gradient(90deg,rgba(255,255,255,.024) 0 1px,transparent 1px 64px)} .hero h1{font-size:clamp(3rem,6.4vw,5.9rem);line-height:.92} .hero h1 .stroke{color:transparent;-webkit-text-stroke:1.5px var(--accent)} .herosearch{border-radius:2px;background:var(--ground);font:400 13px/1.2 var(--mono);padding:16px 18px;max-width:620px} .live-chip{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:2px;color:var(--accent);border:1px solid rgba(46,211,192,.35);padding:7px 12px;border-radius:2px;text-transform:uppercase;width:max-content} .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pfPulse 1.6s infinite} .feedbox{border:1px solid rgba(255,255,255,.1);background:var(--surface);border-radius:3px;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow);position:relative} .feedbox .hd{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08);font-size:11px;letter-spacing:2px;color:var(--accent);text-transform:uppercase} .feedbox .hd span:last-child{color:var(--mut);letter-spacing:1px} .frow{display:grid;grid-template-columns:48px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:9px 18px;color:var(--ink);border-bottom:1px solid rgba(255,255,255,.04)} .frow:hover{background:rgba(46,211,192,.05)} .frow img{width:48px;height:36px;object-fit:contain} .frow .nm{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.frow .sb{display:block;font-size:10px;color:var(--mut);font-weight:400;margin-top:2px} .frow .pr{font-size:11px;color:var(--ink2);text-align:right;white-space:nowrap} .frow .x{font:800 1.15rem/1 var(--disp);color:var(--accent);letter-spacing:.04em;min-width:58px;text-align:right} .feedbox .ft{display:flex;justify-content:space-between;padding:12px 18px;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mut)} .feedbox .ft a{color:var(--accent)} .sec-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px} .sec-h a{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase} .g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} @media (max-width:1100px){.g3{grid-template-columns:1fr}} .fcard{position:relative;padding:26px;display:flex;flex-direction:column;gap:10px} /* skin page: a wide working area and a sticky side rail */ .skinlayout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:36px;align-items:start} .skinlayout>.maincol{display:flex;flex-direction:column;gap:56px;min-width:0} .skinlayout>.side{position:sticky;top:84px;display:flex;flex-direction:column;gap:28px;min-width:0} .side h2{font-size:1.35rem} .side .wears{grid-template-columns:1fr 1fr} @media (max-width:1180px){.skinlayout{grid-template-columns:minmax(0,1fr)}.skinlayout>.side{position:static}} .shead{grid-template-columns:minmax(0,1fr) minmax(260px,520px);gap:40px} .shead .art{background:radial-gradient(ellipse at 50% 55%,color-mix(in srgb,var(--c,var(--accent)) 20%,transparent),transparent 66%), repeating-linear-gradient(rgba(255,255,255,.03) 0 1px,transparent 1px 32px),repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 32px);border:1px solid var(--line);border-radius:3px;position:relative} .pread{background:var(--sunk)} .wear b{letter-spacing:1.5px;font-size:10px}.wear .p{color:var(--accent)} .buy a b{font:700 1.05rem/1 var(--disp);letter-spacing:.06em;text-transform:uppercase} .buy a .go{font-size:10px;letter-spacing:1.5px;text-transform:uppercase} .ladder,.rungs li{border-radius:3px}.rungs li{border-radius:2px} /* palette */ .palbox{border-radius:3px}.palbox input{font-family:var(--mono);font-size:14px}.palres a{border-radius:2px} /* footer: full-bleed, uppercase, quiet */ .ftr{border-top:1px solid rgba(255,255,255,.08);margin-top:0;padding-block:44px 34px;background:var(--sunk)} .ftr h4{font:500 10px/1 var(--mono);letter-spacing:2px;color:var(--accent);margin-bottom:12px} .ftr ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px} .ftr a{color:var(--mut);font-size:11px;letter-spacing:1px;text-transform:uppercase}.ftr a:hover{color:var(--ink)} .ftr .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:30px} /* motion */ @keyframes pfPulse{0%,100%{opacity:1}50%{opacity:.25}} @keyframes pfTicker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} @keyframes pfPage{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}} @keyframes dmdGlow{0%,100%{box-shadow:0 0 5px 1px rgba(46,211,192,.55)}50%{box-shadow:0 0 15px 2px rgba(46,211,192,.9)}} @keyframes pf-sheen{from{transform:translateX(-130%)}to{transform:translateX(130%)}} main>.wrap{animation:pfPage .3s ease} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} .btn:hover,.card:hover,.tile:hover{transform:none}} @media (pointer:coarse){.btn{min-height:44px}} @media (max-width:720px){h1,.hero h1{font-size:2.6rem}.hero{padding-top:28px;gap:28px}.frow{grid-template-columns:40px minmax(0,1fr) auto}.frow .pr{display:none}} /* skin page cockpit: everything that matters on the first screen */ .cockpit{gap:28px;grid-template-columns:minmax(0,1fr) minmax(300px,380px)} .cockpit>.maincol{gap:30px} .cockpit-h{display:block} .cockpit-h h1{font-size:clamp(1.9rem,3.1vw,3.2rem);line-height:1} .cockpit-h .answer{font-size:13px;line-height:1.6;max-width:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .cockpit-h .answer:hover{-webkit-line-clamp:unset} .cockpit section>h2#h-curve{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .cockpit .side{gap:16px;top:76px} .cockpit .side .art{aspect-ratio:16/10;display:grid;place-items:center;padding:6px} .cockpit .side .art img{max-height:100%;width:auto;max-width:92%;object-fit:contain} .cockpit .pricer{grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr)} @media (max-width:860px){.cockpit .pricer{grid-template-columns:minmax(0,1fr)}} .cockpit .pread{gap:10px;padding:16px 18px} .cockpit .kv{font-size:12px;gap:4px 12px} .how summary{cursor:pointer;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mut);list-style:none} .how summary::before{content:"+ ";color:var(--accent)}.how[open] summary::before{content:"− "}.how p{margin-top:8px} /* the markets, inside the readout */ .mkwrap{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)} .mk{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:6px} .mk a{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line2);border-radius:2px;color:var(--ink);background:var(--ground);min-width:0; transition:transform .18s cubic-bezier(.2,.8,.25,1),border-color .15s ease,box-shadow .18s ease,background .15s ease} .mk a:hover{transform:translateY(-2px);border-color:var(--accent);background:var(--accent-soft);box-shadow:0 12px 24px -16px rgba(0,0,0,.95)} .mk a b{flex:1;min-width:0;font:700 .92rem/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mk a .go{color:var(--accent);font-size:12px}.mk a .splabel{display:none} .mki{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:2px;font:800 12px/1 var(--disp);font-style:normal;color:#0A0C10;background:var(--mut)} .mk-csfloat{background:#3E8BFF}.mk-skinport{background:#FA490A;color:#fff}.mk-dmarket{background:#1DDB8B}.mk-tradeit{background:#8C5BFF;color:#fff}.mk-steam{background:#66C0F4} .mk-buff163,.mk-buff{background:#F5B800}.mk-csmoney{background:#7A5CFA;color:#fff}.mk-bitskins{background:#E0383E;color:#fff}.mk-waxpeer{background:#F6A623}.mk-lisskins,.mk-lis{background:#FF5E3A;color:#fff} /* suggestions: small-icon rows that read like a list, not a wall of cards */ .sugg{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px} .sg{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 12px;border:1px solid var(--line);border-left:2px solid var(--c,var(--line2));border-radius:2px;background:var(--surface);color:var(--ink); transition:transform .18s ease,border-color .18s ease,background .15s ease} .sg:hover{transform:translateX(4px);border-color:rgba(46,211,192,.45);border-left-color:var(--accent);background:var(--raised)} .sg img{width:64px;height:48px;object-fit:contain} .sg .nm{font:700 .98rem/1.15 var(--disp);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sg .nm small{display:block;font:400 10px/1.5 var(--mono);letter-spacing:1px;color:var(--mut);margin-top:3px} .sg b{color:var(--accent);font-weight:500;font-size:12.5px} @media (prefers-reduced-motion:reduce){.mk a:hover,.sg:hover{transform:none}} /* home: the example curve shares a band with the three reasons */ .samerow{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:20px;align-items:stretch} .samerow>a.panel{display:flex!important;flex-direction:column;justify-content:center;max-height:440px;overflow:hidden} .samerow>a.panel svg{max-height:330px;width:100%} .whycol{display:flex;flex-direction:column;gap:14px}.whycol .fcard{flex:1;padding:18px 20px;gap:6px}.whycol h3{font-size:1.15rem} @media (max-width:1100px){.samerow{grid-template-columns:1fr}} /* group tabs */ .gtabs{display:flex;flex-wrap:wrap;gap:6px;padding:12px;border:1px solid var(--line);border-radius:3px;background:var(--sunk)} [data-off]{display:none!important} /* contrast pass (2026-09-21): dark mode reads brighter; light mode is warm paper, not white */ :root:not([data-theme="light"]){ --ground:#0A0C10;--surface:#10141B;--raised:#151A23;--sunk:#0D1016; --line:rgba(255,255,255,.13);--line2:rgba(255,255,255,.22); --ink:#F2F4F7;--ink2:#C9D0DA;--mut:#98A2B3; } :root[data-theme="light"]{ --ground:#ECE5D6;--surface:#F6F0E3;--raised:#FBF6EB;--sunk:#E2DAC8;--line:rgba(58,44,20,.18);--line2:rgba(58,44,20,.32); --ink:#1C1A16;--ink2:#433E33;--mut:#6B6455;--accent:#0A6B62;--accent2:#0E8A7E;--accent-ink:#FFFDF7;--accent-soft:rgba(10,107,98,.10); --curve:#0B5F8A;--good:#1B6E45;--good-bg:#DDE9D6;--warn:#7A4E05;--warn-bg:#EFE2C2;--bad:#A4322B;--bad-bg:#F0D9D2; --shadow:0 18px 44px rgba(58,44,20,.18);color-scheme:light; } :root[data-theme="light"] .hdr{background:rgba(236,229,214,.94);border-bottom-color:var(--line)} :root[data-theme="light"] .ticker,:root[data-theme="light"] .ftr{border-color:var(--line)} :root[data-theme="light"] .hero,:root[data-theme="light"] .shead .art,:root[data-theme="light"] .cockpit .side .art{ background-image:repeating-linear-gradient(rgba(58,44,20,.05) 0 1px,transparent 1px 64px),repeating-linear-gradient(90deg,rgba(58,44,20,.05) 0 1px,transparent 1px 64px)} :root[data-theme="light"] .frow{border-bottom-color:rgba(58,44,20,.08)} :root[data-theme="light"] .feedbox,:root[data-theme="light"] .feedbox .hd{border-color:var(--line)} :root[data-theme="light"] .btn:hover{border-color:rgba(58,44,20,.55)} :root[data-theme="light"] .card:hover,:root[data-theme="light"] .tile:hover{border-color:rgba(10,107,98,.55);box-shadow:0 14px 30px rgba(58,44,20,.16)} :root[data-theme="light"] tbody tr:hover{background:rgba(58,44,20,.04)} :root[data-theme="light"] .mki{color:#fff} body{font-size:14.5px} .crumb,.nav a,.ftr a{font-size:11.5px} .card .nm small,.tile .meta,.sg .nm small,.field,.pill,.seg button,.btn.sm{font-size:10.5px} th{font-size:10.5px;color:var(--ink2)} td{font-size:13px} .kv dt{color:var(--ink2)} .frow .sb,.stat span{color:var(--ink2)} /* the wordmark carries the CSPricer mark (CS over the wear scale), the same picture as the favicon */ .logo::before{width:28px;height:28px;transform:none;animation:none;border-radius:3px;background:url("/static/icon.svg") center/cover no-repeat;box-shadow:0 0 0 1px var(--line2)} .logo:hover::before{box-shadow:0 0 0 1px var(--accent),0 0 14px rgba(46,211,192,.45)} /* real marketplace marks */ img.mki{background:none;object-fit:contain;border-radius:3px} /* type pass (2026-09-21): one smooth, professional family. IBM Plex Sans carries headings and text; the monospace stays only where digits must line up (prices, floats, tables) and on tiny labels. */ :root{--disp:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif} body{font:400 15px/1.6 var(--body);letter-spacing:0} h1,h2,h3,h4{text-transform:none;letter-spacing:-.015em;font-weight:650} h1{font-size:clamp(2.1rem,3.6vw,3.4rem);line-height:1.05;font-weight:700;letter-spacing:-.025em} .hero h1{font-size:clamp(2.6rem,4.8vw,4.4rem);line-height:1.02} .hero h1 .stroke{-webkit-text-stroke:0;color:var(--accent)} h2{font-size:clamp(1.35rem,2vw,1.85rem);font-weight:650} h3{font-size:1.02rem;font-weight:600;letter-spacing:-.005em} .cockpit-h h1{font-size:clamp(1.7rem,2.6vw,2.6rem)} .side h2{font-size:1.1rem} .logo{font:700 19px/1 var(--disp);letter-spacing:.01em;text-transform:none} .nav a{font:500 13px/1 var(--body);letter-spacing:0;text-transform:none} .btn{font:600 13px/1.2 var(--body);letter-spacing:0;text-transform:none;padding:10px 16px}.btn.sm{font-size:12px;padding:7px 11px} .card .nm,.tile .nm,.sg .nm,.buy a b,.mk a b{font:600 .95rem/1.25 var(--body);letter-spacing:0;text-transform:none} .mk a b{font-size:.86rem} .card .nm small,.sg .nm small,.tile .meta{font:400 11.5px/1.5 var(--body);letter-spacing:0;text-transform:none} .stat b{font:700 2rem/1 var(--body);letter-spacing:-.02em}.stat span{font:400 12px/1.4 var(--body);letter-spacing:0;text-transform:none} .bigp{font:700 3rem/1 var(--body);letter-spacing:-.03em;font-variant-numeric:tabular-nums} .frow .x{font:700 1rem/1 var(--mono);letter-spacing:0} .frow .nm{font-family:var(--body);font-size:13px}.frow .sb{font-size:11.5px} .crumb{font:400 12px/1.4 var(--body);letter-spacing:0;text-transform:none} .pill,.seg button,.field{font-family:var(--body);letter-spacing:.02em;text-transform:none;font-size:11.5px} .ftr a{font:400 13px/1.4 var(--body);letter-spacing:0;text-transform:none} .ftr h4,.eyebrow,.splabel,th,.live-chip,.feedbox .hd,.feedbox .ft,.how summary,.ticker .set{font-family:var(--mono)} .searchbtn,.herosearch,.bb-search input,.palbox input{font-family:var(--body);font-size:14px;letter-spacing:0} .ladder h3{font-size:.98rem} /* item-page visualisations */ .vizgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .vizcard{padding:16px 18px;display:flex;flex-direction:column;gap:12px;min-width:0}.vizcard.wide{grid-column:1/-1} .vizcard header{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;justify-content:space-between} .vizcard svg{width:100%;height:auto;display:block;overflow:visible} .vizcard svg rect{transition:opacity .15s ease,filter .15s ease}.vizcard svg rect[tabindex]:hover{filter:brightness(1.35)} .vt{font:400 10px var(--mono);fill:var(--mut)}.vl{font:500 12px var(--body);fill:var(--ink2)}.vn{font:500 12px var(--mono);fill:var(--ink)} .viztip{position:fixed;z-index:120;pointer-events:none;padding:8px 11px;border:1px solid var(--line2);border-radius:3px;background:var(--raised);color:var(--ink);font-size:12.5px;line-height:1.45;box-shadow:var(--shadow);max-width:280px} .viztip b{font-family:var(--mono);font-weight:600;color:var(--accent)}.viztip span{color:var(--ink2);font-size:11.5px} .supbig{display:flex;align-items:baseline;gap:10px}.supbig b{font:700 1.9rem/1 var(--body);letter-spacing:-.02em}.supbig span{font-size:12px;color:var(--ink2)} .supbar{display:flex;height:16px;gap:2px;border-radius:3px;overflow:hidden}.supbar span{min-width:3px;transition:filter .15s ease}.supbar span:hover{filter:brightness(1.3)} .suplegend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--ink2)}.suplegend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px} .suplegend b{color:var(--ink);font-weight:500} @media (max-width:1100px){.vizgrid{grid-template-columns:1fr}} /* pattern premiums strip: understood at a glance (a gem, a multiple, a price, a bar) */ .tierstrip{gap:10px;padding:14px 16px;border:1px solid rgba(228,174,57,.35);border-radius:3px; background:linear-gradient(100deg,rgba(228,174,57,.10),rgba(46,211,192,.05) 60%,transparent),var(--surface)} .ts-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}.ts-h h2{font-size:1.05rem;display:flex;align-items:center;gap:9px} .ts-h a{margin-left:auto} .gem{width:12px;height:12px;flex:none;transform:rotate(45deg);background:linear-gradient(135deg,#FFE08A,#E4AE39 55%,#B9791B);box-shadow:0 0 12px rgba(228,174,57,.7);animation:gemPulse 2.4s ease-in-out infinite} @keyframes gemPulse{0%,100%{box-shadow:0 0 6px rgba(228,174,57,.5)}50%{box-shadow:0 0 16px rgba(228,174,57,.95)}} .ts-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin} .ts{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:2px 10px;align-items:center;padding:10px 12px 13px;border:1px solid var(--line2);border-radius:3px;background:var(--ground);color:var(--ink);overflow:hidden; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease} .ts:hover{transform:translateY(-2px);border-color:#E4AE39;box-shadow:0 10px 24px -12px rgba(228,174,57,.6)} .ts-x{grid-row:1/3;font:700 1.55rem/1 var(--mono);color:#E4AE39;letter-spacing:-.03em} .ts-n{font:600 .84rem/1.2 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ts-p{display:flex;gap:8px;align-items:baseline;min-width:0}.ts-p b{color:var(--accent);font-weight:500}.ts-p small{color:var(--mut);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ts i{position:absolute;left:0;bottom:0;height:3px;background:linear-gradient(90deg,#E4AE39,#FF6A4B);border-radius:0 2px 2px 0} :root[data-theme="light"] .ts-x{color:#8A5A08} /* no dead space on item pages */ .side .wears{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .side .wears .wear:last-child:nth-child(odd){grid-column:1/-1} .sugg.one{grid-template-columns:1fr;gap:6px}.sugg.one .sg{grid-template-columns:52px minmax(0,1fr) auto;padding:6px 10px}.sugg.one .sg img{width:52px;height:39px} .cockpit .side{position:static} .cockpit>.maincol{gap:26px} .ladders{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))} /* visualisation colours are tokens, so both themes get marks that read */ :root{--heat-lo:#2ED3C0;--heat-mid:#F2C94C;--heat-hi:#FF5A4D;--viz-track:rgba(255,255,255,.07)} :root[data-theme="light"]{--heat-lo:#0E8A7E;--heat-mid:#C98A0A;--heat-hi:#C2362C;--viz-track:rgba(58,44,20,.10); --fn:#2E8B5C;--mw:#6E9A33;--ft:#B98A12;--ww:#C4701F;--bs:#B3412F} #viz h2{display:flex;align-items:center;gap:10px}#viz h2::before{content:"";width:10px;height:10px;background:var(--accent);transform:rotate(45deg)} .vizcard{padding:18px 20px;border-color:var(--line2)} .vizcard header h3{font-size:1.06rem} .vizcard.wide{background:linear-gradient(180deg,var(--accent-soft),transparent 55%),var(--surface)} .vt{font-size:11.5px;fill:var(--ink2)}.vl{font-size:13.5px;font-weight:600;fill:var(--ink)}.vn{font-size:13.5px;font-weight:600} .heatlegend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:12px;color:var(--ink2)} .heatlegend i{flex:0 1 220px;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--heat-lo),var(--heat-mid),var(--heat-hi))} .heatlegend .fresh{margin-left:auto;display:inline-flex;align-items:center;gap:8px}.heatlegend .fresh b{width:26px;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--accent-soft),var(--accent))} .supbar{height:24px;border-radius:4px}.supbig b{font-size:2.3rem;color:var(--accent)}.suplegend{font-size:13px} /* tier cards */ .ladder{border-color:rgba(228,174,57,.32);border-left:3px solid #E4AE39;background:linear-gradient(135deg,rgba(228,174,57,.07),transparent 45%),var(--surface);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} .ladder:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.3);border-color:#E4AE39} .ladder h3{display:flex;align-items:center;gap:9px} .rungs li{grid-template-columns:1fr auto;padding:9px 11px;background:var(--ground);border:1px solid var(--line)} .rungs li b{font-size:1.02rem} .rungs .track{grid-column:1/-1;position:relative;height:8px;border-radius:4px;background:var(--viz-track);margin:3px 0 2px} .rungs .track i{position:absolute;top:0;bottom:0;border-radius:4px;background:linear-gradient(90deg,#E4AE39,#FF6A4B)} .rungs .track u{position:absolute;top:-3px;width:2px;height:14px;background:var(--ink);border-radius:1px;text-decoration:none} :root[data-theme="light"] .ladder:hover{box-shadow:0 14px 30px rgba(58,44,20,.16)} /* browse groups sit side by side instead of one long column */ .groups{display:flex;flex-direction:column;gap:44px} .groups.many{display:grid;grid-template-columns:repeat(auto-fill,minmax(520px,1fr));gap:34px 28px;align-items:start} .groups.many .grid.tiles{--min:150px} .groups.many section>h2{font-size:1.2rem;padding-bottom:8px;border-bottom:1px solid var(--line)} @media (max-width:640px){.groups.many{grid-template-columns:1fr}} /* pattern seed tiers: cards in a grid, seeds as chips */ .seedgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;max-width:none} .seedcard{padding:16px 18px;display:flex;flex-direction:column;gap:10px;border-left:3px solid #E4AE39;background:linear-gradient(135deg,rgba(228,174,57,.07),transparent 45%),var(--surface)} .seedcard header{display:flex;align-items:center;justify-content:space-between;gap:10px}.seedcard h2{font-size:1.05rem;display:flex;align-items:center;gap:9px;margin:0} .seeds{display:flex;flex-wrap:wrap;gap:4px;max-width:none;max-height:210px;overflow:auto;font-size:12px;scrollbar-width:thin} .seeds span{padding:2px 6px;border:1px solid var(--line);border-radius:2px;background:var(--ground)} .prose:has(.seedgrid){max-width:none} /* colour codes for numbers: one meaning per colour on every page */ .c-price{color:var(--accent)}.c-good{color:var(--good)}.c-warn{color:var(--warn)}.c-bad{color:var(--bad)} .c-gold{color:#E4AE39}.c-hot{color:#FF6A4B}.c-flat{color:var(--ink2)}.c-fresh{color:var(--ink2)}.c-dim{color:var(--mut)}.c-na{color:var(--mut)} :root[data-theme="light"] .c-gold{color:#8A5A08}:root[data-theme="light"] .c-hot{color:#B93A1E} td.n b,.wear span b{font-weight:600} .wtag{display:inline-block;min-width:30px;text-align:center;padding:2px 6px;border-radius:2px;font:600 11px/1.3 var(--mono);color:#0A0C10} .wear b{font-size:12px;letter-spacing:.08em} /* At a glance, compact */ #viz{gap:10px}#viz h2{font-size:1.15rem} .vizgrid{gap:10px}.vizcard{padding:12px 14px;gap:8px}.vizcard header h3{font:600 .92rem/1.2 var(--body)} .vizcard header .small{font-size:11.5px} .vt{font:500 10.5px var(--body);fill:var(--ink2)}.vl{font:600 12px var(--mono);fill:var(--ink)}.vn{font:600 12px var(--mono)} .heatlegend{font-size:11.5px;gap:6px 10px}.heatlegend i{flex-basis:160px;height:6px} .supbig b{font-size:1.6rem}.supbar{height:16px}.suplegend{font-size:12px;gap:4px 12px} /* a live counter that just changed */ .tick-up{color:var(--good)!important;transition:color .3s ease}.tick-down{color:var(--warn)!important;transition:color .3s ease}