/* Play-cluster skin, usefulHQ design language, indigo "game/fun" accent. */
:root{
  --bg:#eeeef7; --card:#ffffff; --ink:#151322; --mut:#5c5870;
  --acc:#4f46e5; --acc2:#ec4899; --line:#dedcf0;
  --best:rgba(79,70,229,.12); --good:#4f46e5; --yes:#16a34a;
}
@media(prefers-color-scheme:dark){:root{
  --bg:#100f1a; --card:#191826; --ink:#efeef7; --mut:#a29eb8;
  --acc:#818cf8; --acc2:#f472b6; --line:#242236;
  --best:rgba(129,140,248,.16); --good:#818cf8; --yes:#4ade80;
}}
body{font-family:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif !important;
  background-image:radial-gradient(rgba(110,100,200,.18) .5px,transparent .5px);background-size:22px 22px}
h1,h2,h3,.brand{font-family:'Bricolage Grotesque',system-ui,sans-serif !important;letter-spacing:-.02em}
h1{font-weight:800 !important}
.adslot{display:none !important}
.tnav{padding:14px 0 4px;text-align:center}
.tnav a{display:inline-block;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:13px;
  color:var(--ink);text-decoration:none;background:var(--card);border:2.5px solid var(--ink);border-radius:999px;
  padding:6px 14px;box-shadow:3px 3px 0 var(--ink)}
.tnav a:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}

/* Tap targets on phones. Measured at 375px: the model links inside the price tables were 22 to
   24px tall, which is half the 44px a thumb needs, and they are the step between reading the
   table and opening the listings. Scoped to table cells and the model chips: prose links stay
   inline, because a 44px box around a word in a sentence tears the paragraph apart. */
@media (max-width: 640px) {
  table td a, table th a { display: block; padding: 11px 2px; min-height: 22px; }
  #models button, #models a, .chip { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .vtab td a, .vtab .vlink { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
}