/* pickthetcg.com: the Vibes price guide. An arctic card table: ice and snow surfaces, navy ink, Pudgy sky blue, and one
   signature, the foil (a moving iridescent sheen) on real cards. Fredoka for display, Figtree for reading, JetBrains Mono
   for every price. Light and dark from the same tokens. */
:root{
  --ice:#EDF4FB; --snow:#FFFFFF; --frost:#DCE8F5; --ink:#0D1C3A; --ink-2:#2A3D63; --muted:#5B6D8E; --line:#D3E0EE; --line-2:#C3D4E8;
  --sky:#2F8CFF; --sky-deep:#1663D6; --sky-ghost:#E3EFFF; --ask:#A86A0C; --ask-ghost:#FBF0DD; --sold:#0B8A4F; --sold-ghost:#E1F5EA;
  --shock:#D93D42; --shock-ghost:#FDE8E8; --gold:#B8860B; --arctic:#0E8FB3; --promo:#7B5CFF; --sketch:#C2410C;
  --display:"Fredoka","Baloo 2",ui-rounded,system-ui,sans-serif; --body:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --lift:0 1px 2px rgba(13,28,58,.06),0 18px 40px rgba(13,28,58,.10); --lift-2:0 2px 4px rgba(13,28,58,.12),0 28px 60px rgba(13,28,58,.22);
  --ease:cubic-bezier(.2,.7,.2,1); --spring:cubic-bezier(.34,1.56,.64,1); --r:22px;
  --foil:linear-gradient(100deg,#2F8CFF,#7B5CFF 28%,#FF7AC8 48%,#FFD25C 66%,#4FE0C8 84%,#2F8CFF);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ice:#081329; --snow:#0F1F3E; --frost:#162B52; --ink:#E9F1FF; --ink-2:#C3D3EE; --muted:#8FA4C8; --line:#1F3560; --line-2:#2A4475;
  --sky:#5AA8FF; --sky-deep:#8DC2FF; --sky-ghost:#14305C; --ask:#F0B45C; --ask-ghost:#3A2A10; --sold:#3DD68C; --sold-ghost:#0F3A27;
  --shock:#FF6B70; --shock-ghost:#3E1517; --gold:#E8BE4E; --arctic:#55CBEA; --promo:#A592FF; --sketch:#FB923C;
  --lift:0 1px 2px rgba(0,0,0,.3),0 18px 40px rgba(0,0,0,.35); --lift-2:0 2px 4px rgba(0,0,0,.4),0 28px 60px rgba(0,0,0,.5); color-scheme:dark}}
:root[data-theme="dark"]{
  --ice:#081329; --snow:#0F1F3E; --frost:#162B52; --ink:#E9F1FF; --ink-2:#C3D3EE; --muted:#8FA4C8; --line:#1F3560; --line-2:#2A4475;
  --sky:#5AA8FF; --sky-deep:#8DC2FF; --sky-ghost:#14305C; --ask:#F0B45C; --ask-ghost:#3A2A10; --sold:#3DD68C; --sold-ghost:#0F3A27;
  --shock:#FF6B70; --shock-ghost:#3E1517; --gold:#E8BE4E; --arctic:#55CBEA; --promo:#A592FF; --sketch:#FB923C;
  --lift:0 1px 2px rgba(0,0,0,.3),0 18px 40px rgba(0,0,0,.35); --lift-2:0 2px 4px rgba(0,0,0,.4),0 28px 60px rgba(0,0,0,.5); color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ice);color:var(--ink);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
a{color:var(--sky-deep)}
button{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--sky);outline-offset:3px;border-radius:8px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--snow);padding:8px 12px;border-radius:8px;z-index:100}
.skip:focus{left:12px}

/* header */
.hdr{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--ice) 86%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.hdr.scrolled{border-bottom-color:var(--line)}
.hdr-in{display:flex;align-items:center;gap:14px;height:62px}
.logo{font:700 22px/1 var(--display);letter-spacing:-.01em;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px;flex:none}
.logo b{background:var(--foil);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 7s linear infinite}
.logo-mark{width:26px;height:26px;flex:none}
.nav{display:flex;gap:2px;margin-left:12px;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1}
.nav::-webkit-scrollbar{display:none}
.nav a{white-space:nowrap;text-decoration:none;color:var(--ink-2);font:600 14.5px var(--body);padding:8px 12px;border-radius:999px;transition:background .2s,color .2s}
.nav a:hover,.nav a[aria-current="page"]{background:var(--snow);color:var(--ink)}
.logo + .nav + .hdr-btn{margin-left:auto}
.hdr-btn{flex:none;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--snow);display:grid;place-items:center;cursor:pointer;transition:transform .25s var(--spring),border-color .2s}
.hdr-btn:hover{transform:translateY(-1px);border-color:var(--sky)}
.hdr-btn svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round}
@keyframes sheen{to{background-position:-220% 0}}

/* type */
.eyebrow{font:600 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sky-deep);margin:0 0 10px}
h1,h2,h3{font-family:var(--display);letter-spacing:-.015em;text-wrap:balance;margin:0}
h1{font-weight:700;font-size:clamp(38px,6vw,72px);line-height:.98}
h2{font-weight:700;font-size:clamp(28px,3.8vw,44px);line-height:1.04}
h3{font-weight:600;font-size:20px;line-height:1.2}
.lede{font-size:clamp(17px,1.8vw,20px);color:var(--ink-2);max-width:52ch;margin:16px 0 0}
.foilword{background:var(--foil);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 7s linear infinite}
.sec{padding-block:clamp(48px,7vw,88px) 0}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.sec-head p{margin:8px 0 0;color:var(--ink-2);max-width:60ch}
.more{font:700 14.5px var(--body);text-decoration:none;color:var(--sky-deep);white-space:nowrap}
.more:hover{text-decoration:underline}
.note{font-size:13.5px;color:var(--muted);max-width:72ch}
.crumbs{font:500 13px var(--mono);color:var(--muted);padding-top:18px;display:flex;flex-wrap:wrap;gap:6px}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:12px 18px;font:700 15px var(--body);text-decoration:none;border:1.5px solid var(--line-2);background:var(--snow);color:var(--ink);cursor:pointer;transition:transform .25s var(--spring),border-color .2s,background .2s}
.btn:hover{transform:translateY(-2px);border-color:var(--sky)}
.btn.primary{background:var(--ink);color:var(--snow);border-color:var(--ink)}
.btn.ebay{background:var(--sky);border-color:var(--sky);color:#fff}
.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.chip{display:inline-flex;align-items:center;gap:6px;font:600 12px var(--mono);border-radius:999px;padding:4px 10px;background:var(--frost);color:var(--ink-2);white-space:nowrap}
.conf{display:inline-flex;align-items:center;gap:6px;font:700 12px var(--mono);border-radius:999px;padding:4px 10px}
.conf::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.conf.high{background:var(--sold-ghost);color:var(--sold)}.conf.good{background:var(--sky-ghost);color:var(--sky-deep)}.conf.guess{background:var(--ask-ghost);color:var(--ask)}

/* the holo card: tilt, foil and glare follow the pointer */
.holo{position:relative;aspect-ratio:400/545;border-radius:5.5%/4%;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease),box-shadow .3s;box-shadow:var(--lift-2);--mx:50%;--my:50%;touch-action:pan-y;will-change:transform}
.holo img{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;display:block;user-select:none;-webkit-user-drag:none}
.holo .foil,.holo .glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.holo .foil{opacity:0;mix-blend-mode:color-dodge;transition:opacity .45s var(--ease);background:repeating-linear-gradient(115deg,rgba(255,80,160,.55) 0%,rgba(255,220,90,.5) 6%,rgba(80,255,200,.5) 12%,rgba(80,160,255,.55) 18%,rgba(255,80,160,.55) 24%);background-size:300% 300%;background-position:var(--mx) var(--my)}
[data-foil="holo"] .holo .foil,.holo[data-foil="holo"] .foil{opacity:.6}
[data-foil="arctic"] .holo .foil,.holo[data-foil="arctic"] .foil{opacity:.75;background:repeating-linear-gradient(120deg,rgba(210,240,255,.85) 0%,rgba(140,200,255,.6) 7%,rgba(255,255,255,.9) 13%,rgba(160,220,255,.55) 20%,rgba(210,240,255,.85) 26%);background-size:280% 280%;background-position:var(--mx) var(--my)}
[data-foil="gold"] .holo .foil,.holo[data-foil="gold"] .foil{opacity:.7;mix-blend-mode:overlay;background:repeating-linear-gradient(110deg,rgba(255,215,90,.95) 0%,rgba(190,130,20,.7) 8%,rgba(255,240,170,.95) 15%,rgba(170,110,10,.7) 22%,rgba(255,215,90,.95) 30%);background-size:260% 260%;background-position:var(--mx) var(--my)}
[data-foil="promo"] .holo .foil,.holo[data-foil="promo"] .foil{opacity:.55;background:repeating-linear-gradient(135deg,rgba(160,120,255,.6) 0%,rgba(255,120,200,.5) 8%,rgba(120,200,255,.5) 16%,rgba(160,120,255,.6) 24%);background-size:280% 280%;background-position:var(--mx) var(--my)}
[data-foil="sketch"] .holo img{filter:grayscale(1) contrast(1.15) sepia(.25)}
.holo .glare{background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.6),rgba(255,255,255,0) 45%);mix-blend-mode:soft-light;opacity:0;transition:opacity .3s}
.holo:hover .glare,.holo.active .glare{opacity:1}

/* home hero */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:center;padding-block:clamp(24px,5vw,56px) 8px}
.find{position:relative;margin-top:24px;max-width:540px}
.find input{width:100%;height:58px;border-radius:18px;border:1.5px solid var(--line-2);background:var(--snow);padding:0 18px 0 50px;font:600 17px var(--body);color:var(--ink);box-shadow:var(--lift);transition:border-color .2s,box-shadow .2s}
.find input:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 4px var(--sky-ghost),var(--lift)}
.find svg{position:absolute;left:18px;top:19px;width:20px;height:20px;stroke:var(--muted);fill:none;stroke-width:2.2;stroke-linecap:round}
.suggest{position:absolute;left:0;right:0;top:64px;background:var(--snow);border:1px solid var(--line);border-radius:16px;box-shadow:var(--lift-2);overflow:hidden;z-index:30}
.suggest a{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 14px;text-decoration:none;color:var(--ink)}
.suggest a:hover,.suggest a.on{background:var(--sky-ghost)}
.suggest img{width:34px;height:46px;border-radius:4px;object-fit:cover;background:var(--frost)}
.suggest b{font:700 15px var(--body);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest small{font:500 12px var(--mono);color:var(--muted)}
.suggest .p{font:700 14px var(--mono)}
.suggest .none{padding:14px;color:var(--muted);font-size:14px}
.stats{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:20px;font:600 13px var(--mono);color:var(--muted)}
.stats b{color:var(--ink);font-weight:700}
.fan{position:relative;height:clamp(380px,44vw,520px)}
.fan .slot{position:absolute;top:50%;left:50%;width:clamp(170px,19vw,236px);transform:translate(-50%,-50%) translate(var(--tx,0),var(--ty,0)) rotate(var(--rot,0deg))}
.fan .slot:nth-child(1){--tx:-60%;--ty:5%;--rot:-10deg;z-index:1}.fan .slot:nth-child(2){--tx:0%;--ty:-3%;z-index:3}.fan .slot:nth-child(3){--tx:60%;--ty:6%;--rot:10deg;z-index:2}
.fan .slot:not(:nth-child(2)) .tag{bottom:auto;top:-22px}
.fan .tag{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);background:var(--snow);border:1px solid var(--line);border-radius:12px;padding:5px 10px;box-shadow:var(--lift);white-space:nowrap;text-align:center;z-index:4;text-decoration:none;color:var(--ink)}
.fan .tag b{display:block;font:700 15px var(--mono)}.fan .tag span{font:600 11px var(--body);color:var(--muted)}
.finishbar{display:inline-flex;gap:4px;background:var(--snow);border:1px solid var(--line);border-radius:999px;padding:4px;box-shadow:var(--lift);flex-wrap:wrap}
.finishbar button{border:0;background:transparent;border-radius:999px;padding:8px 13px;font:700 13px var(--body);color:var(--muted);cursor:pointer;transition:background .25s,color .25s;display:inline-flex;gap:7px;align-items:center}
.finishbar button .p{font:700 12px var(--mono);opacity:.85}
.finishbar button[aria-pressed="true"]{background:var(--ink);color:var(--snow)}
.fan .finishbar{position:absolute;left:50%;bottom:-62px;transform:translateX(-50%);white-space:nowrap;flex-wrap:nowrap;z-index:5}

/* facts strip */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--lift);margin-top:84px}
.fact{background:var(--snow);padding:16px 18px;min-width:0}
.fact b{display:block;font:700 clamp(24px,3vw,32px)/1.05 var(--display)}
.fact span{font-size:13.5px;color:var(--muted);line-height:1.35;display:block;margin-top:3px}

/* card grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:16px}
.tile{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink);background:var(--snow);border:1px solid var(--line);border-radius:18px;padding:10px 10px 12px;transition:transform .3s var(--spring),border-color .2s,box-shadow .3s;min-width:0}
.tile:hover{transform:translateY(-4px);border-color:var(--sky);box-shadow:var(--lift)}
.tile-art{display:block;aspect-ratio:400/545;border-radius:9px;overflow:hidden;background:var(--frost);position:relative}
.tile-art img{width:100%;height:100%;object-fit:cover;display:block}
.tile-art .rk{position:absolute;top:6px;left:6px;font:700 12px var(--mono);background:var(--ink);color:var(--snow);border-radius:8px;padding:2px 7px}
.tile-name{font:700 15px/1.25 var(--body);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tile-meta{font:500 12px var(--mono);color:var(--muted)}
.tile-price{display:flex;flex-direction:column;gap:1px;margin-top:auto}
.tile-price b{font:700 18px var(--mono)}
.tile-price small{font:600 11.5px var(--body);color:var(--muted)}
.tile-price .na{font:600 13px var(--body);color:var(--muted)}
.tile[hidden]{display:none}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,190px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 18px;scrollbar-width:thin}
.rail .tile{scroll-snap-align:start}

/* sets */
.sets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.set{position:relative;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);background:var(--snow);border:1px solid var(--line);border-radius:var(--r);padding:18px;overflow:hidden;min-width:0;transition:transform .3s var(--spring),border-color .2s}
.set:hover{transform:translateY(-4px);border-color:var(--sky)}
.set .n{font:700 12px var(--mono);color:var(--sky-deep)}
.set h3{font-size:22px}
.set .peek{display:flex;margin-top:4px;height:96px}
.set .peek img{width:70px;height:96px;border-radius:6px;object-fit:cover;box-shadow:var(--lift);margin-right:-26px;transition:transform .35s var(--spring)}
.set:hover .peek img:nth-child(1){transform:rotate(-6deg) translateY(-3px)}.set:hover .peek img:nth-child(3){transform:rotate(6deg) translateY(-3px)}
.set dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:6px 0 0;font-size:13.5px}
.set dt{color:var(--muted)}.set dd{margin:0;font:700 13.5px var(--mono);text-align:right}

/* price shocks */
.shocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.shock{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;background:var(--snow);border:1px solid var(--line);border-radius:var(--r);padding:16px;align-items:start;min-width:0}
.shock img{width:76px;height:104px;border-radius:7px;object-fit:cover;box-shadow:var(--lift)}
.shock .x{font:700 34px/1 var(--display);color:var(--shock)}
.shock p{margin:6px 0 10px;font-size:14.5px;color:var(--ink-2)}
.shock .acts{display:flex;gap:8px;flex-wrap:wrap}
.shock .acts a{font:700 13px var(--body);text-decoration:none;color:var(--sky-deep)}

/* card page */
.card-hero{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;padding-top:18px}
.card-hero .holo{max-width:340px}
.card-side .finishbar{margin-top:16px;box-shadow:none}
.title-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.big{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:22px}
.big .v{font:700 clamp(54px,8vw,92px)/.9 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.big .v.guess{color:var(--ask)}
.big .lbl{display:flex;flex-direction:column;gap:6px}
.big .lbl b{font:700 18px var(--body)}
.big .lbl small{font:500 13px var(--mono);color:var(--muted)}
.range{font:600 13.5px var(--mono);color:var(--muted);margin-top:8px}
.sold-link{margin:10px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.sold-link a{font:700 14px var(--body);color:var(--sky-deep)}
.sold-link small{font-size:12.5px;color:var(--muted)}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.panel{background:var(--snow);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--lift);padding:clamp(16px,2.6vw,26px)}
.vtable{width:100%;border-collapse:collapse;font-size:15px}
.vtable th{font:600 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 10px 10px}
.vtable td{padding:12px 10px;border-top:1px solid var(--line);vertical-align:middle}
.vtable td.p{font:700 17px var(--mono);white-space:nowrap}
.vtable .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;background:var(--c)}
.tablewrap{overflow-x:auto}
.showcase{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:620px){.showcase{grid-template-columns:1fr}.showcase>a{width:min(150px,45%)}}
@media (max-width:620px){
  /* phones: each version is a small block (name, then price and range, then how sure) instead of four squeezed columns */
  .vtable.stack thead{display:none}
  .vtable.stack tr{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
  .vtable.stack tr:first-child{border-top:0;padding-top:0}
  .vtable.stack td{border:0;padding:0}
  .vtable.stack td:first-child{grid-column:1/-1;font-weight:700}
  .vtable.stack td[data-l]::before{content:attr(data-l);display:block;font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
  .vtable.stack td:last-child{grid-column:1/-1}
  .vtable.stack td.nr{display:none}
  .vtable.stack.sealed tr{grid-template-columns:repeat(3,1fr)}
  .vtable.stack.sealed td.p{font-size:15px;white-space:normal}
  .vtable.stack.sealed .conf{font-size:10.5px;padding:3px 8px}
}
.facts-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:0}
.facts-list div{background:var(--ice);border-radius:12px;padding:10px 12px}
.facts-list dt{font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.facts-list dd{margin:2px 0 0;font:700 15px var(--body)}
.cardtext{font-size:15px;color:var(--ink-2);margin:14px 0 0;max-width:62ch}

/* lanes: every version of a card on one price scale */
.lanes{display:grid;grid-template-columns:132px minmax(0,1fr);row-gap:8px;position:relative}
.lane-n{grid-column:1;display:flex;flex-direction:column;justify-content:center;font:700 14px var(--body);padding-right:10px;min-width:0}
.lane-n small{font:500 11.5px var(--mono);color:var(--muted)}
.lane-t{grid-column:2;position:relative;height:44px;border-radius:12px;background:var(--ice)}
.lane-t::before{content:"";position:absolute;left:8px;right:8px;top:50%;height:2px;margin-top:-1px;background:var(--line)}
.band{position:absolute;top:13px;bottom:13px;left:var(--a);width:calc(var(--b) - var(--a));min-width:6px;border-radius:9px;background:var(--c);opacity:.25;transition:left .9s var(--ease),width .9s var(--ease),opacity .4s}
.med{position:absolute;top:8px;bottom:8px;left:var(--x);width:4px;margin-left:-2px;border-radius:3px;background:var(--c);transition:left .9s var(--ease)}
.medlab{position:absolute;top:50%;left:var(--x);transform:translate(10px,-50%);font:700 13px var(--mono);color:var(--c);white-space:nowrap;background:var(--snow);border-radius:6px;padding:0 5px;transition:left .9s var(--ease),opacity .4s}
.medlab.flip{transform:translate(calc(-100% - 10px),-50%)}
.ticks{grid-column:2;position:relative;height:22px}
.ticks span{position:absolute;transform:translateX(-50%);font:500 11px var(--mono);color:var(--muted)}
.lanes .ov{grid-column:2;position:relative;pointer-events:none}
.blend{position:absolute;top:-26px;bottom:-6px;left:var(--x);border-left:2px dashed var(--shock);opacity:0;transition:opacity .5s}
.blend span{position:absolute;top:0;right:8px;font:700 12px var(--mono);color:var(--shock);white-space:nowrap;background:var(--snow);padding:0 4px;border-radius:4px}
.lanes.mixed .blend{opacity:1}.lanes.mixed .band{left:calc(var(--m) - 3px)!important;width:6px!important;opacity:.9}.lanes.mixed .med,.lanes.mixed .medlab{opacity:0}

/* shopping (owner, 24 Oct 2026: get people to the eBay listings). One dark "ticket" surface in both themes: the price
   check and the buy bar sit on it, framed by the foil. Its own tokens, so each theme keeps contrast */
:root{--tk:#0D1C3A;--tk-2:#172C55;--tk-ink:#F2F7FF;--tk-muted:#A9BCDD;--tk-line:rgba(255,255,255,.14);--great:#3DD68C;--fair:#8DC2FF;--high:#F0B45C;--over:#FF7A7F}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--tk:#112553;--tk-2:#1A3266;--tk-line:rgba(255,255,255,.16)}}
:root[data-theme="dark"]{--tk:#112553;--tk-2:#1A3266;--tk-line:rgba(255,255,255,.16)}
@property --x{syntax:"<percentage>";inherits:true;initial-value:50%}
@property --lo{syntax:"<percentage>";inherits:true;initial-value:30%}
@property --mid{syntax:"<percentage>";inherits:true;initial-value:50%}
@property --hi{syntax:"<percentage>";inherits:true;initial-value:70%}
.promise{display:flex;align-items:center;gap:8px;margin:12px 0 0;font:600 14.5px var(--body);color:var(--ink-2)}
.promise svg{width:17px;height:17px;flex:none;stroke:var(--sold);fill:none;stroke-width:2;stroke-linejoin:round}
.promise b{font:700 15px var(--mono);color:var(--sold)}
.btn.ebay{box-shadow:0 8px 22px color-mix(in srgb,var(--sky) 34%,transparent)}
.btn.ebay:hover{filter:brightness(1.07) saturate(1.1)}
.deal{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(22px,4vw,52px);align-items:center;
  padding:clamp(22px,3.6vw,44px);border-radius:30px;background:var(--tk);color:var(--tk-ink);box-shadow:var(--lift-2);
  transition:--lo .9s var(--ease),--mid .9s var(--ease),--hi .9s var(--ease),--x .85s var(--spring)}
.deal::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--foil);background-size:220% 100%;animation:sheen 7s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.deal::after{content:"";position:absolute;z-index:-1;width:560px;height:560px;right:-200px;top:-260px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--fair) 30%,transparent),transparent)}
.deal .eyebrow{color:var(--fair)}
.deal h2{color:var(--tk-ink)}
.deal-sub{margin:10px 0 0;color:var(--tk-muted);font-size:16px;max-width:44ch}
.deal-in{display:flex;align-items:center;gap:4px;margin-top:22px;height:72px;max-width:300px;padding:0 18px;border-radius:20px;background:var(--tk-2);border:1.5px solid var(--tk-line);cursor:text;transition:border-color .2s,box-shadow .2s}
.deal-in:focus-within{border-color:var(--fair);box-shadow:0 0 0 5px color-mix(in srgb,var(--fair) 22%,transparent)}
.deal-in .cur{font:700 30px var(--mono);color:var(--tk-muted)}
.deal-in input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--tk-ink);font:700 34px var(--mono);font-variant-numeric:tabular-nums;outline:none}
.deal-in input::placeholder{color:color-mix(in srgb,var(--tk-muted) 55%,transparent)}
.vchips{display:flex;gap:6px;margin-top:14px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px;mask-image:linear-gradient(90deg,#000 88%,transparent)}
.vchips::-webkit-scrollbar{display:none}
.vchips button{flex:none;display:inline-flex;gap:7px;align-items:center;border:1px solid var(--tk-line);background:transparent;color:var(--tk-muted);border-radius:999px;padding:7px 12px;font:700 13px var(--body);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.vchips button span{font:700 12px var(--mono);opacity:.8}
.vchips button:hover{border-color:var(--fair);color:var(--tk-ink)}
.vchips button[aria-pressed="true"]{background:var(--tk-ink);border-color:var(--tk-ink);color:var(--tk)}
.vone{margin:14px 0 0;font:700 13px var(--mono);color:var(--tk-muted)}
.meter{position:relative;height:132px}
.meter-track{position:absolute;left:0;right:0;top:64px;height:16px;border-radius:999px;overflow:hidden;
  background:linear-gradient(90deg,var(--great) 0 var(--lo),color-mix(in srgb,var(--great) 55%,var(--fair)) var(--lo) var(--mid),var(--fair) var(--mid) var(--hi),var(--high) var(--hi) calc(var(--hi) + 10%),var(--over) calc(var(--hi) + 24%));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);opacity:.92}
.meter-track::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(13,28,58,.18) 9px 10px)}
.meter-needle{position:absolute;top:8px;left:clamp(34px,var(--x),calc(100% - 34px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none}
.meter-needle span{font:700 15px var(--mono);white-space:nowrap;background:var(--tk-ink);color:var(--tk);padding:5px 11px;border-radius:11px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.meter-needle::after{content:"";width:3px;height:44px;margin-top:4px;border-radius:2px;background:var(--tk-ink);box-shadow:0 0 14px var(--fair)}
.meter-ticks{position:absolute;left:0;right:0;top:88px;height:20px;font:600 12px var(--mono);color:var(--tk-muted)}
.meter-ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.meter-ticks .t-lo{left:var(--lo)}.meter-ticks .t-mid{left:var(--mid);color:var(--tk-ink)}.meter-ticks .t-hi{left:var(--hi)}
.meter-ticks .t-mid::before{content:"";position:absolute;left:50%;top:-12px;width:2px;height:8px;margin-left:-1px;background:var(--tk-ink);border-radius:1px}
.meter-zones{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;pointer-events:none;font:700 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--tk-muted) 70%,transparent)}
.verdict{margin:10px 0 0;min-height:76px}
.verdict b{display:block;font:700 clamp(25px,3.2vw,34px)/1.08 var(--display);letter-spacing:-.01em;color:var(--vc,var(--tk-ink));transition:color .3s}
.verdict span{display:block;margin-top:6px;color:var(--tk-muted);font-size:15px;max-width:52ch}
.verdict.great,.verdict.good{--vc:var(--great)}.verdict.fair{--vc:var(--fair)}.verdict.high,.verdict.odd{--vc:var(--high)}.verdict.over{--vc:var(--over)}
.deal-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.btn.ghost{background:transparent;color:var(--tk-ink);border-color:var(--tk-line)}
.btn.ghost:hover{border-color:var(--fair)}
.vtable td.shopc{text-align:right;white-space:nowrap}
.vtable a.shop{font:700 13.5px var(--body);text-decoration:none;color:var(--sky-deep);padding:6px 10px;border-radius:999px;border:1px solid var(--line-2);transition:background .2s,border-color .2s}
.vtable a.shop:hover{background:var(--sky-ghost);border-color:var(--sky)}
.buybar{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:55;transform:translate(-50%,calc(100% + 40px));opacity:0;
  display:flex;align-items:center;gap:12px;width:min(580px,calc(100vw - 20px));padding:8px 8px 8px 10px;border-radius:20px;background:var(--tk);color:var(--tk-ink);
  box-shadow:0 18px 50px rgba(8,19,41,.45);transition:transform .55s var(--spring),opacity .3s}
.buybar.on{transform:translate(-50%,0);opacity:1}
.cookie:not([hidden]) ~ .buybar{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
.buybar img{width:34px;height:auto;border-radius:5px;flex:none;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.bb-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.bb-t b{font:700 15px var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bb-t span{font:600 12.5px var(--mono);color:var(--tk-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.buybar .btn{padding:10px 15px;font-size:14px;flex:none;box-shadow:none}
.bb-short{display:none}
.bb-x{flex:none;width:34px;height:34px;border:0;border-radius:10px;background:transparent;color:var(--tk-muted);display:grid;place-items:center;cursor:pointer}
.bb-x:hover{background:var(--tk-2);color:var(--tk-ink)}
.bb-x svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.4;fill:none}
@media (max-width:860px){.deal{grid-template-columns:minmax(0,1fr)}.deal-in{max-width:none}}
.deal-l,.deal-r{min-width:0}
@media (max-width:620px){
  .vtable.stack td.cf{grid-column:1}
  .vtable.stack td.shopc{grid-column:2;justify-self:end}
  .bb-t b{font-size:14px}.bb-long{display:none}.bb-short{display:inline!important}.buybar .btn{padding:10px 13px}
}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px}
.filters input,.filters select{height:44px;border-radius:12px;border:1.5px solid var(--line-2);background:var(--snow);color:var(--ink);font:600 15px var(--body);padding:0 12px}
.filters input{flex:1 1 220px;min-width:0}
.filters .count{font:600 13px var(--mono);color:var(--muted);margin-left:auto}

/* lists */
.rank{display:grid;grid-template-columns:44px 56px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 12px;border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}
.rank:hover{background:var(--sky-ghost)}
.rank .no{font:700 18px var(--mono);color:var(--muted)}
.rank img{width:56px;height:76px;border-radius:6px;object-fit:cover;background:var(--frost)}
.rank b{font:700 16px var(--body);display:block}
.rank small{font:500 12.5px var(--mono);color:var(--muted)}
.rank .p{font:700 18px var(--mono);text-align:right}
.rank .p small{display:block;text-align:right}

/* quiz */
.quiz{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(12px,3vw,32px);align-items:center}
.qcard{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.qcard .holo{width:min(240px,100%)}
.qcard b{font:700 18px var(--body)}
.qcard .qp{font:700 30px var(--mono)}
.qcard .qp.hide{color:transparent;background:var(--frost);border-radius:10px;min-width:120px}
.qgame{display:inline-flex;gap:4px;background:var(--snow);border:1px solid var(--line);border-radius:14px;padding:4px;margin-top:14px}
.qgame a{font:600 15px var(--body);color:var(--ink-2);text-decoration:none;padding:8px 16px;border-radius:10px}
.qgame a[aria-current="page"]{background:var(--ink);color:var(--snow)}
.qvs{font:700 22px var(--display);color:var(--muted)}
.qacts{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.qscore{text-align:center;font:700 15px var(--mono);margin-top:14px;color:var(--muted)}
.qflash{animation:flash .6s var(--ease)}
@keyframes flash{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}

/* agents + network */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.box{background:var(--snow);border:1px solid var(--line);border-radius:var(--r);padding:20px;min-width:0}
.box h3{margin-bottom:8px}
.box p{margin:0 0 12px;color:var(--ink-2);font-size:15px}
.code{font:500 13px var(--mono);background:var(--ice);border-radius:12px;padding:12px 14px;overflow-x:auto;white-space:pre;color:var(--ink-2)}
.family{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.fam{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:16px;background:var(--snow);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:transform .3s var(--spring),border-color .2s;min-width:0}
.fam:hover{transform:translateY(-3px);border-color:var(--sky)}
.fam b{font:700 15px var(--body)}
.fam span{font-size:13px;color:var(--muted)}

/* prose */
.prose{max-width:70ch}
.prose h2{font-size:28px;margin:34px 0 10px}
.prose p,.prose li{color:var(--ink-2);font-size:16.5px}

/* footer, cookie bar, search dialog */
.foot{margin-top:clamp(56px,8vw,96px);border-top:1px solid var(--line);padding-block:32px 40px;font-size:14px;color:var(--muted)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px}
.foot h4{font:700 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:0 0 10px}
.foot a{color:var(--muted);text-decoration:none;display:block;padding:3px 0}
.foot a:hover{color:var(--ink)}
.foot .legal{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px}
.foot .legal a{display:inline;padding:0}
.foot .agents{margin-top:10px;font:500 12.5px var(--mono)}
.foot .agents a{display:inline}
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:0 max(12px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));display:flex;justify-content:center;pointer-events:none}
.cookie div{pointer-events:auto;max-width:640px;display:flex;gap:14px;align-items:center;background:var(--ink);color:var(--snow);border-radius:16px;padding:12px 14px 12px 18px;box-shadow:var(--lift-2);font-size:14px}
.cookie button{flex:none;border:0;border-radius:10px;background:var(--snow);color:var(--ink);font:700 14px var(--body);padding:9px 14px;cursor:pointer}
dialog.search{border:0;padding:0;background:transparent;width:min(620px,calc(100vw - 32px));margin-top:12vh}
dialog.search::backdrop{background:rgba(8,19,41,.45);backdrop-filter:blur(4px)}
dialog.search .find{margin:0;max-width:none}
.hero-trade{margin:14px 0 0;font-size:15px;color:var(--muted)}
.hero-trade a{font-weight:700;color:var(--sky-deep)}

/* responsive */
@media (max-width:980px){
  .hero,.card-hero{grid-template-columns:1fr}
  .card-hero .holo{max-width:280px;margin:0 auto}
  .sets,.shocks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .family{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .hdr-in{flex-wrap:wrap;height:auto;padding-block:8px 6px;gap:8px 10px}
  .hdr-btn{width:38px;height:38px}
  .nav{order:3;flex-basis:100%;margin:0 calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding-inline:max(12px,env(safe-area-inset-left,0px))}
  .nav a{font-size:14px;padding:7px 11px}
  .fan{height:clamp(320px,92vw,420px)}
  .fan .slot{width:clamp(120px,35vw,180px)}.fan .slot:nth-child(1){--tx:-52%}.fan .slot:nth-child(3){--tx:52%}
  .fan .finishbar{bottom:-58px}
  .fan .slot:not(:nth-child(2)) .tag span{display:none}
  .sets,.shocks,.family{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .lanes{grid-template-columns:92px minmax(0,1fr)}.lane-n{font-size:12.5px}
  .ticks .minor,.ticks .mid{display:none}
  .quiz{gap:8px;align-items:start}.qvs{font-size:16px;align-self:center}
  .qcard{gap:6px}.qcard b{font-size:14px;line-height:1.25}.qcard small{font-size:11px}.qcard .qp{font-size:22px}.qcard .qp.hide{min-width:64px}
  .rank{grid-template-columns:30px 44px minmax(0,1fr) auto;gap:10px}.rank img{width:44px;height:60px}
  .foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}