/* One Page Toys — gallery design system, Geist-inspired.
 * Clean, precise, monochrome with a single restrained red accent.
 * Geist Sans + Geist Mono, hairline borders, small radii, minimal shadows.
 * The hub uses this; individual toys carry their own (more ambitious) visuals.
 */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap");

:root{
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --ink: #000000;       /* headings / primary */
  --text: #171717;      /* body */
  --muted: #666666;
  --faint: #8f8f8f;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --line: #eaeaea;      /* hairline border */
  --line-strong: #d4d4d4;

  --accent: #941e1e;    /* restrained brand red */
  --accent-hover: #7a1818;
  --accent-soft: rgba(148, 30, 30, 0.09);

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.05);

  --radius: 10px;
  --radius-sm: 6px;
  --radius-pill: 9999px;

  --ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(0, 0, 0, 0.16);
  --maxw: 1080px;
}

:root[data-theme="dark"]{
  --ink: #ffffff;
  --text: #ededed;
  --muted: #8f8f8f;
  --faint: #6e6e6e;
  --bg: #000000;
  --surface: #0a0a0a;
  --surface-2: #111111;
  --line: #2a2a2a;
  --line-strong: #3a3a3a;

  --accent: #e5484d;
  --accent-hover: #f06a6e;
  --accent-soft: rgba(229, 72, 77, 0.14);

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4);
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(255, 255, 255, 0.22);
}

*,
*::before,
*::after{ box-sizing: border-box; }

[hidden]{ display: none !important; }

html{ scroll-behavior: smooth; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection{ background: var(--accent-soft); }

a{ color: inherit; text-decoration: none; }
code, kbd{ font-family: var(--font-mono); font-size: 0.9em; }

/* Small mono label used throughout (eyebrows, meta, stat labels) */
.eyebrow,
.tools-find__label,
.tools-find__sort-label,
.tools-tags__label,
.tools-meta,
.card__category,
.site-footer__madeby-label,
.site-footer__copyright{
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============================================================
 * Top bar
 * ============================================================ */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: saturate(1.1) blur(8px);
  -webkit-backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--line);
}

.topbar__inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.topbar__start{
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 28px);
  flex-wrap: wrap;
  min-width: 0;
}

.topbar__nav{ display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }

.topbar__link{
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: color 120ms ease, background 120ms ease;
}
.topbar__link:hover{ color: var(--ink); background: var(--surface-2); }
.topbar__link:focus-visible{ outline: none; box-shadow: var(--ring); }
.topbar__link[aria-current="page"]{ color: var(--ink); font-weight: 600; }

.topbar__actions{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }

.brand{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand::before{
  content: "";
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
  border: 1px solid var(--ink);
  border-radius: 5px;
  background: linear-gradient(90deg, var(--ink) 0 50%, var(--surface) 50% 100%);
}
.brand:focus-visible{ outline: none; box-shadow: var(--ring); border-radius: 6px; }

.skip-link{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link:focus{
  position: fixed; left: 12px; top: 12px; z-index: 200;
  width: auto; height: auto; margin: 0; clip: auto; overflow: visible; white-space: normal;
  padding: 10px 16px; font-size: 0.85rem; font-weight: 600;
  color: var(--bg); background: var(--ink); border-radius: var(--radius-sm);
}

/* Icon button (theme toggle) */
.iconbtn{
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 0.95rem;
  line-height: 1;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.iconbtn:hover{ border-color: var(--line-strong); background: var(--surface-2); }
.iconbtn:focus-visible{ outline: none; box-shadow: var(--ring); }
.theme-toggle__sun, .theme-toggle__moon, .theme-toggle__auto{ display: none; }
:root[data-theme-mode="system"] .theme-toggle__auto{ display: inline; }
:root[data-theme-mode="light"] .theme-toggle__sun{ display: inline; }
:root[data-theme-mode="dark"] .theme-toggle__moon{ display: inline; }

/* ============================================================
 * Layout
 * ============================================================ */
.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(36px, 6vw, 64px) 24px 80px;
  flex: 1 0 auto;
  width: 100%;
}

/* Page header (All toys) */
.pagehead{
  padding-bottom: clamp(24px, 4vw, 40px);
  margin-bottom: clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--line);
}
.pagehead__eyebrow{
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.pagehead h1{
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.1rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.pagehead__lede{
  margin: 16px 0 0;
  max-width: 56ch;
  font-size: 1rem;
  color: var(--muted);
}
.pagehead__lede strong{ color: var(--text); font-weight: 600; }

/* ============================================================
 * Buttons
 * ============================================================ */
.btn{
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}
.btn:hover{ border-color: var(--ink); background: var(--surface-2); }
.btn:active{ transform: translateY(0.5px); }
.btn:focus-visible{ outline: none; box-shadow: var(--ring); }

.btn--primary{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.btn--primary:hover{ background: var(--ink); border-color: var(--ink); opacity: 0.85; }

/* ============================================================
 * Home — hero + featured spotlight
 * ============================================================ */
.home-hero{ padding: clamp(8px, 3vw, 24px) 0 clamp(22px, 4vw, 36px); }
.home-hero__title{
  margin: 0;
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  font-weight: 600; line-height: 1.03; letter-spacing: -0.04em;
  color: var(--ink);
}
.home-hero__lede{
  margin: 16px 0 0; max-width: 54ch;
  font-size: clamp(1rem, 1.6vw, 1.12rem); color: var(--muted);
}
.home-hero__lede strong{ color: var(--text); font-weight: 600; }
.home-hero__cta{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(20px, 3vw, 28px); }
.home-hero__cta .btn{ height: 44px; padding: 0 20px; font-size: 0.92rem; }

.home-featured{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
  padding: clamp(18px, 2.5vw, 26px);
  margin-bottom: clamp(34px, 5vw, 52px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.home-featured__media{ display: block; text-decoration: none; }
.home-featured__media .card__preview{
  height: clamp(180px, 26vw, 280px); margin: 0; border-radius: 14px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.home-featured__media:hover .card__preview{ transform: translateY(-2px); box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(255,255,255,0.05); }
.home-featured__body{ min-width: 0; }
.home-featured__title{
  margin: 10px 0 0;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink);
}
.home-featured__cat{
  margin: 8px 0 0;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.home-featured__desc{ margin: 12px 0 0; max-width: 48ch; font-size: 0.98rem; color: var(--muted); line-height: 1.5; }
.home-featured__cta{ margin-top: clamp(16px, 2.5vw, 22px); height: 44px; padding: 0 20px; }

@media (max-width: 720px){
  .home-featured{ grid-template-columns: 1fr; }
}

/* ============================================================
 * Section header
 * ============================================================ */
.tools{ margin-top: 4px; }

.tools__header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.tools__header h2{
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.tools-meta{
  font-size: 0.7rem;
  font-weight: 500;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: var(--surface);
}
.tools-subtle{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.tools-subtle__link{
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.tools-subtle__link:hover{ color: var(--accent-hover); border-bottom-color: var(--accent); }

/* ============================================================
 * Search / filters (All toys)
 * ============================================================ */
/* Hero search — the centerpiece of the page */
.tools-find{
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 16px;
}
.tools-find__field{
  position: relative; flex: 1 1 320px; min-width: 0;
  display: flex; align-items: center;
}
.tools-find__icon{
  position: absolute; left: 17px; color: var(--muted); pointer-events: none;
}
.tools-find__input{
  width: 100%;
  height: 54px;
  padding: 0 46px;
  font-family: var(--font-sans);
  font-size: 1.02rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.tools-find__input::placeholder{ color: var(--faint); }
.tools-find__input:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.tools-find__field:focus-within .tools-find__icon{ color: var(--accent); }
.tools-find__kbd{
  position: absolute; right: 14px;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.74rem; line-height: 1;
  color: var(--muted); padding: 4px 8px;
  border: 1px solid var(--line-strong); border-radius: 7px; background: var(--bg);
  transition: opacity 120ms ease; pointer-events: none;
}
.tools-find__input:focus ~ .tools-find__kbd{ opacity: 0; }

.tools-find__aux{ display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tools-find__clear{ flex-shrink: 0; }

.tools-find__sort{ display: flex; flex-direction: row; align-items: center; gap: 8px; flex-shrink: 0; }
.tools-find__sort-label{ font-size: 0.66rem; font-weight: 500; color: var(--muted); white-space: nowrap; }
.tools-find__select{
  height: 40px;
  padding: 0 40px 0 14px; /* room so the custom caret never crowds the right border */
  min-width: 11rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  color: var(--text);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23888888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8 9.5 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
}
.tools-find__select:focus{ outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-soft); }

.tools-cats-wrap{ margin-bottom: 14px; }

/* Category chips — the primary way to browse */
.tools-tags--cats{ gap: 9px; }
.tools-tags--cats .tools-tag{
  font-size: 0.86rem; font-weight: 500;
  padding: 9px 16px; border-radius: 999px;
}
.tools-tag__n{
  margin-left: 7px; font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--muted); font-size: 0.92em;
}
.tools-tag[aria-pressed="true"] .tools-tag__n{ color: color-mix(in srgb, var(--bg) 55%, var(--ink)); }

/* Result count bar, right above the grid */
.tools-resultbar{ display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }

@media (hover: none) { .tools-find__kbd{ display: none; } }

/* Mobile: de-crowd the finder — compact sort row + a single swipeable
 * category strip instead of three wrapped rows, so search stays the focus. */
@media (max-width: 560px){
  .tools-find{ gap: 8px; margin-bottom: 12px; }
  .tools-find__input{ height: 50px; }
  .tools-find__aux{ width: 100%; gap: 8px; }
  .tools-find__sort{ flex: 1 1 auto; min-width: 0; }
  .tools-find__sort-label{ display: none; }
  .tools-find__select{ width: 100%; min-width: 0; height: 44px; }
  .tools-find__clear{ flex: 0 0 auto; height: 44px; }

  /* Category chips: a tidy, compact WRAP (no horizontal scroll) — smaller
   * chips so all categories sit in ~2 calm rows instead of a crowded 3. */
  .tools-cats-wrap{ margin-bottom: 10px; }
  .tools-tags--cats{ gap: 7px; }
  .tools-tags--cats .tools-tag{ font-size: 0.8rem; padding: 7px 12px; }
  .tools-tag__n{ margin-left: 5px; }

  .tools-resultbar{ margin-bottom: 14px; }
}

.tools-filter-types{
  margin-bottom: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.tools-filter-types__summary{
  list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 16px; padding: 12px 16px; cursor: pointer; user-select: none;
}
.tools-filter-types__summary::-webkit-details-marker{ display: none; }
.tools-filter-types__title{
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.78rem; font-weight: 600; color: var(--ink);
}
.tools-filter-types__title::before{
  content: ""; width: 0.42em; height: 0.42em;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg); transition: transform 140ms ease; flex-shrink: 0;
}
.tools-filter-types[open] .tools-filter-types__title::before{ transform: rotate(45deg); margin-top: 2px; }
.tools-filter-types__meta{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 0.8rem; color: var(--muted); }
.tools-filter-types__picked{ font-weight: 600; color: var(--accent); }
.tools-filter-types__picked:not([hidden])::before{ content: "· "; color: var(--muted); }
.tools-filter-types__body{ padding: 4px 16px 16px; border-top: 1px solid var(--line); }
.tools-filter-types__lede{ margin: 12px 0 14px; font-size: 0.85rem; color: var(--muted); }

.tools-tags__label{
  display: block;
  font-size: 0.68rem; font-weight: 500; color: var(--muted); margin-bottom: 10px;
}
.tools-tags{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.tools-tag{
  appearance: none;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.tools-tag:hover{ border-color: var(--ink); }
.tools-tag:focus-visible{ outline: none; box-shadow: var(--ring); }
.tools-tag[aria-pressed="true"]{ background: var(--ink); border-color: var(--ink); color: var(--bg); }
.tools-tag--category[aria-pressed="true"]{ background: var(--ink); border-color: var(--ink); color: var(--bg); }

.tools-empty{
  margin: 0;
  padding: 56px 24px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}

.muted{ color: var(--muted); }

/* ============================================================
 * Card grid
 * ============================================================ */
.grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.card{
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 22px 22px 20px;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

/* Static preview thumbnail — a framed, inset still of the toy (reads as a
 * deliberate screenshot in both light and dark, not a heavy edge-to-edge band). */
.card__preview{
  height: 118px;
  margin: 0 0 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #120606;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Meeting Cost Meter — the burn odometer */
.card__preview[data-slug="meeting-cost-meter"]{
  background: radial-gradient(125% 130% at 50% 138%, #43100f 0%, #1c0808 58%, #110505 100%);
}
.card__preview[data-slug="meeting-cost-meter"]::after{
  content: "$342.45";
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(2rem, 6.5vw, 2.7rem);
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(176deg, #ffd2d2 0%, #e63b3b 48%, #9c1717 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 4px 18px rgba(214, 50, 50, 0.45));
}

/* Countdown to Anything — a live days-remaining counter (teal) */
.card__preview[data-slug="countdown"]{
  background: radial-gradient(125% 130% at 50% 138%, #0a3b37 0%, #072421 58%, #04140f 100%);
}
.card__preview[data-slug="countdown"]::after{
  content: "12 days";
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(176deg, #c7f5ee 0%, #14b8a6 48%, #0a7267 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 4px 18px rgba(20, 184, 166, 0.45));
}

/* Sleep Cycle Calculator — the recommended wake time (night blue) */
.card__preview[data-slug="sleep-cycle"]{
  background: radial-gradient(125% 130% at 50% 138%, #1a2150 0%, #0e1330 58%, #080a1c 100%);
}
.card__preview[data-slug="sleep-cycle"]::after{
  content: "7:15 AM";
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(176deg, #dbe3ff 0%, #5a7be6 48%, #33469f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 4px 18px rgba(90, 123, 230, 0.45));
}

/* Time Is Money — live earnings odometer (money green) */
.card__preview[data-slug="time-is-money"]{
  background: radial-gradient(125% 130% at 50% 138%, #0d3a24 0%, #071e14 58%, #04120b 100%);
}
.card__preview[data-slug="time-is-money"]::after{
  content: "$427.16";
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(176deg, #c9f5d8 0%, #22b866 48%, #0f7a3f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 4px 18px rgba(34, 184, 102, 0.4));
}

/* Life in Numbers — seconds-alive counter (cosmic violet) */
.card__preview[data-slug="life-in-numbers"]{
  background: radial-gradient(125% 130% at 50% 138%, #201b45 0%, #0f0d26 58%, #070613 100%);
}
.card__preview[data-slug="life-in-numbers"]::after{
  content: "1,084,320,000";
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.05rem, 3.6vw, 1.6rem);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(176deg, #e6e2ff 0%, #6c63e0 48%, #3f3aa8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 4px 18px rgba(108, 99, 224, 0.45));
}

/* The Latte Factor — the shocking long-term total (coffee amber) */
.card__preview[data-slug="latte-factor"]{
  background: radial-gradient(125% 130% at 50% 138%, #3a2810 0%, #1e1409 58%, #120b05 100%);
}
.card__preview[data-slug="latte-factor"]::after{
  content: "$20,075";
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(176deg, #f5e2c4 0%, #c98b3a 48%, #7a4f18 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 4px 18px rgba(201, 139, 58, 0.4));
}

/* Goo Cursor — a still iridescent liquid-metal bead */
.card__preview[data-slug="goo-cursor"]{
  background: radial-gradient(circle at 50% 62%, #15131f 0%, #08070c 72%);
}
.card__preview[data-slug="goo-cursor"]::before{
  content: "";
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transform: translate(38px, 20px);
  background:
    radial-gradient(circle at 36% 30%, rgba(255,255,255,0.9) 0%, transparent 30%),
    conic-gradient(from 150deg, #fda4af, #c084fc, #818cf8, #67e8f9, #fda4af);
  filter: blur(0.5px);
  opacity: 0.92;
}
.card__preview[data-slug="goo-cursor"]::after{
  content: "";
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,0.96) 0%, transparent 26%),
    radial-gradient(circle at 72% 80%, rgba(0,0,0,0.5) 0%, transparent 55%),
    conic-gradient(from 210deg, #67e8f9, #818cf8, #c084fc, #f0abfc, #fda4af, #fcd34d, #6ee7b7, #67e8f9);
  box-shadow: 0 10px 34px rgba(150, 120, 255, 0.35);
}

/* Breathing Pacer — a serene glowing orb */
.card__preview[data-slug="breathing-pacer"]{
  background: radial-gradient(circle at 50% 58%, #16294a 0%, #0a1326 72%);
}
.card__preview[data-slug="breathing-pacer"]::after{
  content: "";
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, #f4fbff 0%, #b8f0ec 16%, #62c3d6 46%, #3566b0 76%, #20337a 100%);
  box-shadow: 0 0 48px rgba(120, 200, 220, 0.5), 0 0 92px rgba(90, 120, 230, 0.32);
}

/* Coin Flip — a gold coin on dark */
.card__preview[data-slug="coin-flipper"]{
  background: radial-gradient(circle at 50% 58%, #2a1d08 0%, #120c04 72%);
}
.card__preview[data-slug="coin-flipper"]::after{
  content: "";
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff3c4 0%, #f2c14e 42%, #b8860b 80%, #6e4e0e 100%);
  box-shadow:
    0 8px 28px rgba(210, 160, 40, 0.4),
    inset 0 0 0 4px rgba(255, 244, 200, 0.32),
    inset 0 0 0 6px rgba(120, 88, 20, 0.5);
}

/* Dice Roller — real 3D dice on green felt (rendered card) */
.card__preview[data-slug="dice-roller"]{
  background: #0c2b1c url("cards/dice-roller.png?v=3") center/cover no-repeat;
}

/* Magic 8-Ball — glossy black sphere + blue triangle */
.card__preview[data-slug="magic-eight-ball"]{
  background: radial-gradient(circle at 50% 55%, #0e1426 0%, #06080f 72%);
}
.card__preview[data-slug="magic-eight-ball"]::after{
  content: "";
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #5a5a5a 0%, #1a1a1a 22%, #000 64%);
  box-shadow: inset 0 -10px 24px rgba(0, 0, 0, 0.85), 0 10px 26px rgba(0, 0, 0, 0.6);
}
.card__preview[data-slug="magic-eight-ball"]::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%);
  width: 30px;
  height: 30px;
  z-index: 1;
  clip-path: polygon(50% 12%, 90% 86%, 10% 86%);
  background: linear-gradient(160deg, #4f86ff, #2f6bff 55%, #1740c0);
  box-shadow: 0 0 16px rgba(47, 107, 255, 0.7);
}

/* Blob Choir — a cluster of colorful gooey blobs */
.card__preview[data-slug="blob-choir"]{
  background:
    radial-gradient(20px 20px at 38% 46%, #a78bfa, transparent 72%),
    radial-gradient(26px 26px at 55% 40%, #f0abfc, transparent 72%),
    radial-gradient(18px 18px at 65% 58%, #67e8f9, transparent 72%),
    radial-gradient(22px 22px at 45% 62%, #fda4af, transparent 72%),
    radial-gradient(16px 16px at 70% 44%, #fcd34d, transparent 72%),
    radial-gradient(70% 60% at 50% 45%, #14102e 0%, #08061a 70%);
}

/* Tic-Tac-Toe — neon O and X */
.card__preview[data-slug="tic-tac-toe"]{ background: radial-gradient(circle at 50% 55%, #131829 0%, #0b0e1a 72%); gap: 10px; }
.card__preview[data-slug="tic-tac-toe"]::before{ content: "◯"; font-size: 2.4rem; color: #22d3ee; text-shadow: 0 0 16px rgba(34,211,238,0.6); }
.card__preview[data-slug="tic-tac-toe"]::after{ content: "✕"; font-size: 2.4rem; font-weight: 700; color: #f0398b; text-shadow: 0 0 16px rgba(240,57,139,0.6); }

/* Rock Paper Scissors — the three hands */
.card__preview[data-slug="rock-paper-scissors"]{ background: radial-gradient(circle at 50% 55%, #111a2e 0%, #0a0f1e 72%); }
.card__preview[data-slug="rock-paper-scissors"]::after{ content: "✊ ✋ ✌️"; font-size: 1.9rem; letter-spacing: 2px; }

/* Three Doors — a gold door on crimson */
.card__preview[data-slug="three-doors"]{ background: radial-gradient(circle at 50% 30%, #3a0f16 0%, #1a0a0e 70%); }
.card__preview[data-slug="three-doors"]::after{
  content: ""; width: 46px; height: 76px; border-radius: 6px 6px 3px 3px;
  background: linear-gradient(160deg, #ffe79a, #f4c430 42%, #b8860b);
  box-shadow: inset 0 0 0 2px rgba(120,86,18,0.5), 0 8px 20px rgba(0,0,0,0.5);
}

/* Memory Match — a flip card */
.card__preview[data-slug="memory-match"]{ background: radial-gradient(circle at 50% 55%, #0a1f18 0%, #06140f 72%); }
.card__preview[data-slug="memory-match"]::after{
  content: "?"; display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: 12px;
  background: linear-gradient(145deg, #2dd4bf, #34d399); color: #042b22;
  font-weight: 800; font-size: 1.7rem; box-shadow: 0 0 18px rgba(45,212,191,0.5);
}

/* Snake — neon segments on a grid */
.card__preview[data-slug="snake-mini"]{
  background:
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(74,222,128,0.05) 15px 16px),
    repeating-linear-gradient(90deg, transparent 0 15px, rgba(74,222,128,0.05) 15px 16px),
    radial-gradient(circle at 50% 55%, #0a2618 0%, #04130c 72%);
}
.card__preview[data-slug="snake-mini"]::after{
  content: ""; width: 16px; height: 16px; border-radius: 5px; margin-left: 44px;
  background: #bbf7d0;
  box-shadow: 0 0 14px #4ade80, -22px 0 0 #4ade80, -44px 0 0 rgba(74,222,128,0.85), 22px 22px 0 #fb7185;
}

/* Weird Generative Canvas — fanned flow-field streaks (matches the Flow mode) */
.card__preview[data-slug="weird-generative-canvas"]{
  background:
    repeating-conic-gradient(from 188deg at 42% 150%,
      rgba(34,211,238,0.85) 0deg 0.8deg, transparent 0.8deg 6deg,
      rgba(129,140,248,0.85) 6deg 6.8deg, transparent 6.8deg 12deg,
      rgba(192,132,252,0.85) 12deg 12.8deg, transparent 12.8deg 18deg,
      rgba(240,171,252,0.8) 18deg 18.8deg, transparent 18.8deg 24deg,
      rgba(251,113,133,0.8) 24deg 24.8deg, transparent 24.8deg 30deg,
      rgba(252,211,77,0.8) 30deg 30.8deg, transparent 30.8deg 36deg),
    #07070e;
}
.card__preview[data-slug="weird-generative-canvas"]::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,7,14,0.55), transparent 40%, rgba(7,7,14,0.5));
}

/* Star Click Sky — a tiny starfield + nebula */
.card__preview[data-slug="star-click-sky"]{
  background:
    radial-gradient(1.5px 1.5px at 30% 42%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 55% 28%, #fff, transparent),
    radial-gradient(2px 2px at 68% 56%, #cfe0ff, transparent),
    radial-gradient(1.5px 1.5px at 44% 64%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 80% 40%, #fff, transparent),
    radial-gradient(1px 1px at 22% 66%, #fff, transparent),
    radial-gradient(45% 55% at 62% 42%, rgba(108,72,180,0.42), transparent 70%),
    radial-gradient(120% 90% at 50% 0%, #0a1030 0%, #03040f 80%);
}

.card__preview[data-slug="tiny-idle-garden"]{
  background:
    radial-gradient(2px 2px at 22% 30%, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 68% 24%, rgba(255,255,255,0.7), transparent),
    radial-gradient(circle at 80% 26%, rgba(255,238,180,0.95) 0 4%, rgba(255,224,150,0) 18%),
    linear-gradient(180deg, #7fc1e6 0%, #aedcf0 46%, #6fb86a 46%, #4f9a52 100%);
  overflow: hidden;
}
.card__preview[data-slug="tiny-idle-garden"]::before{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background:
    radial-gradient(circle at 26% 100%, #ec6f9b 0 5%, transparent 6%),
    radial-gradient(circle at 50% 100%, #ffd24d 0 5%, transparent 6%),
    radial-gradient(circle at 74% 100%, #7aa6ff 0 5%, transparent 6%);
  background-repeat: no-repeat;
}
.card__preview[data-slug="tiny-idle-garden"]::after{
  content: ""; position: absolute; left: 18%; right: 18%; bottom: 38%; height: 30%;
  background:
    linear-gradient(#3f8a45, #3f8a45) 26% 100% / 2px 60% no-repeat,
    linear-gradient(#3f8a45, #3f8a45) 50% 100% / 2px 78% no-repeat,
    linear-gradient(#3f8a45, #3f8a45) 74% 100% / 2px 66% no-repeat;
}

.card__preview[data-slug="echo"]{
  background:
    radial-gradient(40% 40% at 30% 30%, rgba(60,240,170,0.7) 0 22%, transparent 60%),
    radial-gradient(40% 40% at 70% 30%, rgba(245,190,60,0.45) 0 22%, transparent 60%),
    radial-gradient(40% 40% at 30% 70%, rgba(90,150,255,0.45) 0 22%, transparent 60%),
    radial-gradient(40% 40% at 70% 70%, rgba(255,90,170,0.45) 0 22%, transparent 60%),
    radial-gradient(120% 100% at 50% -10%, #131a33 0%, #07080f 80%);
}
.card__preview[data-slug="echo"]::after{
  content: ""; width: 26%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, #1a2138, #0c1020 72%); border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 0 0 6px rgba(10,14,30,0.5);
}
.card__preview[data-slug="chimp-test"]{
  background:
    radial-gradient(120% 100% at 50% -10%, #211a12 0%, #0a0807 82%);
  gap: 8px; padding: 16px;
}
.card__preview[data-slug="chimp-test"]::after{
  content: "3   1   4"; font-family: var(--font-mono, "Geist Mono", monospace);
  font-size: 1.35rem; font-weight: 700; letter-spacing: 0.5em; color: #f4b740;
  text-shadow: 0 0 18px rgba(244,183,64,0.55);
}
.card__preview[data-slug="chimp-test"]::before{
  content: ""; position: absolute; inset: 22% 18%;
  background:
    linear-gradient(#f4b740, #d9971f) 8% 70% / 20% 30% no-repeat,
    linear-gradient(#3a2c18, #241a10) 46% 26% / 20% 30% no-repeat,
    linear-gradient(#3a2c18, #241a10) 82% 64% / 20% 30% no-repeat;
  border-radius: 8px; opacity: 0.9;
}

.card__preview[data-slug="beat-maker"]{
  background:
    repeating-linear-gradient(90deg, transparent 0 11.4%, rgba(255,255,255,0.07) 11.4% 12.5%),
    radial-gradient(120% 100% at 50% -10%, #141838 0%, #07080f 82%);
}
.card__preview[data-slug="beat-maker"]::after{
  content: ""; position: absolute; inset: 22% 14%;
  background:
    radial-gradient(circle, #b06bf0 60%, transparent) 8% 18% / 11% 22% no-repeat,
    radial-gradient(circle, #6b7bff 60%, transparent) 30% 50% / 11% 22% no-repeat,
    radial-gradient(circle, #2fd0e0 60%, transparent) 52% 30% / 11% 22% no-repeat,
    radial-gradient(circle, #3fd17a 60%, transparent) 64% 74% / 11% 22% no-repeat,
    radial-gradient(circle, #ff9b4a 60%, transparent) 86% 82% / 11% 22% no-repeat;
}
.card__preview[data-slug="falling-sand"]{
  background: #0c0a07 url("cards/falling-sand.png?v=2") center / cover no-repeat;
  image-rendering: pixelated;
}

/* Lava Lamp — deep warm amber blobs, no yellow */
/* Real rendered thumbnails of each toy (authentic representation) */
.card__preview[data-slug="lava-lamp"]{ background: #080207 url("cards/lava-lamp.png") center / cover no-repeat; }
.card__preview[data-slug="bubble-wrap"]{ background: #0c1a28 url("cards/bubble-wrap.png") center / cover no-repeat; }
.card__preview[data-slug="newtons-cradle"]{ background: #0b0c10 url("cards/newtons-cradle.png?v=2") center / cover no-repeat; }
.card__preview[data-slug="spirograph"]{ background: #06060f url("cards/spirograph.png") center / cover no-repeat; }
.card__preview[data-slug="plasma-ball"]{ background: #04030c url("cards/plasma-ball.png") center / cover no-repeat; }
.card__preview[data-slug="kaleidoscope"]{ background: #07061a url("cards/kaleidoscope.png") center / cover no-repeat; }
.card__preview[data-slug="ripple-pond"]{ background: #06151c url("cards/ripple-pond.png") center / cover no-repeat; }
.card__preview[data-slug="wind-chimes"]{ background: #1a1430 url("cards/wind-chimes.png") center / cover no-repeat; }
.card__preview[data-slug="marble-drop"]{ background: #0b1622 url("cards/marble-drop.png") center / cover no-repeat; }
.card__preview[data-slug="zen-sand-garden"]{ background: #cdb585 url("cards/zen-sand-garden.png") center / cover no-repeat; }
.card__preview[data-slug="floating-lanterns"]{ background: #0b1026 url("cards/floating-lanterns.png") center / cover no-repeat; }
.card__preview[data-slug="aurora-drift"]{ background: #060a1a url("cards/aurora-drift.png") center / cover no-repeat; }
.card__preview[data-slug="campfire"]{ background: #0a0604 url("cards/campfire.png?v=2") center / cover no-repeat; }
.card__preview[data-slug="fireworks"]{ background: #070512 url("cards/fireworks.png") center / cover no-repeat; }
.card__preview[data-slug="rain-window"]{ background: #0a1424 url("cards/rain-window.png") center / cover no-repeat; }
.card__preview[data-slug="perfect-circle"]{ background: #07091a url("cards/perfect-circle.png") center / cover no-repeat; }
.card__preview[data-slug="pin-art"]{ background: #1a1a1a url("cards/pin-art.png") center / cover no-repeat; }
.card__preview[data-slug="chladni-plate"]{ background: #000 url("cards/chladni-plate.png") center / cover no-repeat; }
.card__preview[data-slug="pottery-wheel"]{ background: #241812 url("cards/pottery-wheel.png") center / cover no-repeat; }
.card__preview[data-slug="aurebesh-translator"]{ background: #060a12 url("cards/aurebesh-translator.png") center / cover no-repeat; }
.card__preview[data-slug="double-pendulum"]{ background: #05060c url("cards/double-pendulum.png") center / cover no-repeat; }
.card__preview[data-slug="cloth"]{ background: #0b0a12 url("cards/cloth.png") center / cover no-repeat; }
.card__preview[data-slug="gravity-orbits"]{ background: #03040a url("cards/gravity-orbits.png") center / cover no-repeat; }
.card__preview[data-slug="wooly-willy"]{ background: #d9ccb0 url("cards/wooly-willy.png") center / cover no-repeat; }
.card__preview[data-slug="solitaire"]{ background: #0c5238 url("cards/solitaire.png") center / cover no-repeat; }
.card__preview[data-slug="slice-it"]{ background: #08050f url("cards/slice-it.png") center / cover no-repeat; }
.card__preview[data-slug="vapor"]{ background: #05060b url("cards/vapor.png") center / cover no-repeat; }
.card__preview[data-slug="dot-loop"]{ background: #14161b url("cards/dot-loop.png") center / cover no-repeat; }
.card__preview[data-slug="paper-plane"]{ background: #241f47 url("cards/paper-plane.png") center / cover no-repeat; }
.card__preview[data-slug="nova-coil"]{ background: #05060f url("cards/nova-coil.png") center / cover no-repeat; }
.card__preview[data-slug="random-maze"]{ background: #05070d url("cards/random-maze.png") center / cover no-repeat; }
.card__preview[data-slug="trio"]{ background: #17131f url("cards/trio.png") center / cover no-repeat; }
.card__preview[data-slug="coin-pusher"]{ background: #0b141c url("cards/coin-pusher.png") center / cover no-repeat; }
.card__preview[data-slug="stack-tower"]{ background: #0e1430 url("cards/stack-tower.png?v=2") center / cover no-repeat; }
.card__preview[data-slug="music-box"]{ background: #1a2440 url("cards/music-box.png") center / cover no-repeat; }
.card__preview[data-slug="theremin"]{ background: #0a0a1e url("cards/theremin.png") center / cover no-repeat; }
.card__preview[data-slug="mini-golf"]{ background: #14663a url("cards/mini-golf.png") center / cover no-repeat; }
.card__preview[data-slug="murmuration"]{ background: #0e1130 url("cards/murmuration.png") center / cover no-repeat; }
.card__preview[data-slug="blackjack"]{ background: #0b5238 url("cards/blackjack.png") center / cover no-repeat; }
.card__preview[data-slug="tongue-drum"]{ background: #0a1216 url("cards/tongue-drum.png") center / cover no-repeat; }
.card__preview[data-slug="kalimba"]{ background: #070818 url("cards/kalimba.png") center / cover no-repeat; }
.card__preview[data-slug="jigsaw-puzzle"]{ background: #12151f url("cards/jigsaw-puzzle.png") center / cover no-repeat; }
.card__preview[data-slug="slide-puzzle"]{ background: #10131c url("cards/slide-puzzle.png") center / cover no-repeat; }
.card__preview[data-slug="deep-descent"]{ background: #08060a url("cards/deep-descent.png") center / cover no-repeat; }
.card__preview[data-slug="puffling"]{ background: #7ec8e3 url("cards/puffling.png?v=6") center / cover no-repeat; }
.card__preview[data-slug="marble-machine"]{ background: #150f0e url("cards/marble-machine.png?v=2") center / cover no-repeat; }
.card__preview[data-slug="rain-stick"]{ background: #2a1730 url("cards/rain-stick.png") center / cover no-repeat; }
.card__preview[data-slug="sky-fortress"]{ background: #060913 url("cards/sky-fortress.png") center / cover no-repeat; }
.card__preview[data-slug="alpenglow"]{ background: #262040 url("cards/alpenglow.png") center / cover no-repeat; }
.card__preview[data-slug="tip-splitter"]{ background: #eef4ef url("cards/tip-splitter.png") center / cover no-repeat; }
.card__preview[data-slug="pomodoro"]{ background: #f3eeec url("cards/pomodoro.png") center / cover no-repeat; }
.card__preview[data-slug="world-clock"]{ background: #0e1420 url("cards/world-clock.png") center / cover no-repeat; }
.card__preview[data-slug="pool"]{ background: #0d3f26 url("cards/pool.png") center / cover no-repeat; }
.card__preview[data-slug="minesweeper"]{ background: #0c0f14 url("cards/minesweeper.png") center / cover no-repeat; }

/* Default — clean neutral preview for any future toy */
.card__preview:not([data-slug="meeting-cost-meter"]):not([data-slug="goo-cursor"]):not([data-slug="breathing-pacer"]):not([data-slug="coin-flipper"]):not([data-slug="dice-roller"]):not([data-slug="magic-eight-ball"]):not([data-slug="blob-choir"]):not([data-slug="tic-tac-toe"]):not([data-slug="rock-paper-scissors"]):not([data-slug="three-doors"]):not([data-slug="memory-match"]):not([data-slug="snake-mini"]):not([data-slug="weird-generative-canvas"]):not([data-slug="star-click-sky"]):not([data-slug="tiny-idle-garden"]):not([data-slug="echo"]):not([data-slug="chimp-test"]):not([data-slug="beat-maker"]):not([data-slug="falling-sand"]):not([data-slug="lava-lamp"]):not([data-slug="bubble-wrap"]):not([data-slug="newtons-cradle"]):not([data-slug="spirograph"]):not([data-slug="plasma-ball"]):not([data-slug="kaleidoscope"]):not([data-slug="ripple-pond"]):not([data-slug="wind-chimes"]):not([data-slug="marble-drop"]):not([data-slug="zen-sand-garden"]):not([data-slug="floating-lanterns"]):not([data-slug="aurora-drift"]):not([data-slug="campfire"]):not([data-slug="fireworks"]):not([data-slug="rain-window"]):not([data-slug="perfect-circle"]):not([data-slug="pin-art"]):not([data-slug="chladni-plate"]):not([data-slug="pottery-wheel"]):not([data-slug="aurebesh-translator"]):not([data-slug="double-pendulum"]):not([data-slug="cloth"]):not([data-slug="gravity-orbits"]):not([data-slug="wooly-willy"]):not([data-slug="slide-puzzle"]):not([data-slug="jigsaw-puzzle"]):not([data-slug="kalimba"]):not([data-slug="tongue-drum"]):not([data-slug="time-is-money"]):not([data-slug="life-in-numbers"]):not([data-slug="latte-factor"]):not([data-slug="sleep-cycle"]):not([data-slug="countdown"]):not([data-slug="slice-it"]):not([data-slug="solitaire"]):not([data-slug="blackjack"]):not([data-slug="stack-tower"]):not([data-slug="music-box"]):not([data-slug="theremin"]):not([data-slug="mini-golf"]):not([data-slug="murmuration"]):not([data-slug="trio"]):not([data-slug="coin-pusher"]):not([data-slug="random-maze"]):not([data-slug="nova-coil"]):not([data-slug="paper-plane"]):not([data-slug="dot-loop"]):not([data-slug="vapor"]):not([data-slug="deep-descent"]):not([data-slug="puffling"]):not([data-slug="marble-machine"]):not([data-slug="rain-stick"]):not([data-slug="sky-fortress"]):not([data-slug="alpenglow"]):not([data-slug="tip-splitter"]):not([data-slug="pomodoro"]):not([data-slug="world-clock"]):not([data-slug="pool"]):not([data-slug="minesweeper"]){
  background:
    radial-gradient(120% 120% at 50% 130%, var(--accent-soft), transparent 60%),
    var(--surface-2);
}
.card:hover{ border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card:focus-visible{ outline: none; box-shadow: var(--ring); }

.card__top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.card__title-stack{ min-width: 0; flex: 1 1 auto; }
.card__title-stack h3{
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
}
.card__title-stack:has(.card__category) h3{ margin-bottom: 4px; }
.card__category{
  margin: 0 0 10px;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}
.card p{
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
  flex: 1 1 auto;
}

.badge{
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.badge--live{
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  background: var(--accent-soft);
}
.badge--experimental{ color: var(--ink); border-color: var(--line-strong); }
.badge--beta{ color: var(--muted); }

.card__cta{
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: auto;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent);
  transition: gap 140ms ease, color 140ms ease;
}
.card__cta::after{ content: "→"; transition: transform 160ms ease; }
.card:hover .card__cta{ color: var(--accent-hover); }
.card:hover .card__cta::after{ transform: translateX(3px); }

.error{
  margin-top: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: var(--accent-soft);
  color: var(--ink);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

/* ============================================================
 * Friends / partners
 * ============================================================ */
.tools-partners{
  margin-top: 56px;
  padding: 28px 26px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.tools-partners__title{
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.tools-partners__subtitle{
  margin: 0 0 18px;
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 56ch;
}
/* Featured friend — one rotating partner shown as a rich card (favicon +
 * blurb) with a gentle breathing accent glow. JS renders it on load. */
.tools-partners__featured{ margin: 0 0 16px; }
.tools-partners.js-reveal .tools-partners__featured{ opacity: 0; transform: translateY(8px); }
.tools-partners.js-reveal .tools-partners__featured.is-in{
  opacity: 1; transform: translateY(0);
  transition: opacity 460ms ease, transform 460ms cubic-bezier(.2, .7, .3, 1);
}
.tools-partners__feature-link{
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 13px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line-strong));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--text);
  text-decoration: none;
  animation: partnerGlow 3.6s ease-in-out infinite;
  transition: transform 200ms cubic-bezier(.2, .7, .3, 1), border-color 160ms ease, background 160ms ease;
}
.tools-partners__feature-link:hover{
  transform: translateY(-2px);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.tools-partners__feature-link:focus-visible{ outline: none; box-shadow: var(--ring); }
.tools-partners__feature-icon{
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 11px;
  background: #fff; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.tools-partners__feature-icon img{ width: 30px; height: 30px; object-fit: contain; display: block; }
.tools-partners__feature-body{ flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tools-partners__feature-name{ font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.tools-partners__feature-blurb{ font-size: 0.85rem; color: var(--muted); }
.tools-partners__feature-cta{
  flex: 0 0 auto; margin-left: 6px;
  font-size: 0.8rem; font-weight: 600; color: var(--accent);
  transition: transform 200ms ease;
}
.tools-partners__feature-link:hover .tools-partners__feature-cta{ transform: translateX(3px); }
@keyframes partnerGlow{
  0%, 100%{ filter: drop-shadow(0 1px 4px color-mix(in srgb, var(--accent) 16%, transparent)); }
  50%{ filter: drop-shadow(0 4px 14px color-mix(in srgb, var(--accent) 48%, transparent)); }
}

/* The rest of the friends — a quiet, compact row of small pill links
 * (every partner stays a real, crawlable link; the featured one is hidden). */
.tools-partners__badges{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.tools-partners__badge{
  display: inline-flex; align-items: center;
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  text-decoration: none;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.tools-partners__badge:hover{ color: var(--ink); border-color: var(--line-strong); background: var(--surface); }
.tools-partners__badge:focus-visible{ outline: none; box-shadow: var(--ring); }
.tools-partners__badge-label{ font-size: 0.78rem; font-weight: 500; }
.tools-partners__badge.is-featured-hidden{ display: none; }

.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
 * Footer
 * ============================================================ */
.site-footer{
  flex-shrink: 0;
  margin-top: auto;
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding: 40px 24px 48px;
}
.site-footer__inner{ max-width: var(--maxw); margin: 0 auto; }
.site-footer__top{
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 24px 48px; padding-bottom: 26px; border-bottom: 1px solid var(--line);
}
.site-footer__intro{ max-width: 48ch; }
.site-footer__name{
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  color: var(--ink);
}
.site-footer__tagline{ margin: 0; font-size: 0.875rem; color: var(--muted); }
.site-footer__nav{
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
  font-size: 0.85rem; font-weight: 500;
}
.site-footer__nav a{
  color: var(--muted);
  border-bottom: 1px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
}
.site-footer__nav a:hover{ color: var(--ink); border-bottom-color: var(--accent); }
.site-footer__bottom{
  padding-top: 22px;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px 28px;
}
.site-footer__bottom-right{ display: flex; align-items: center; justify-content: flex-end; }
a.site-footer__madeby{ display: flex; align-items: center; gap: 6px; color: inherit; outline-offset: 3px; transition: opacity 140ms ease; }
a.site-footer__madeby:hover{ opacity: 0.7; }
a.site-footer__madeby:focus-visible{ outline: 1px solid var(--ink); }
.site-footer__madeby-label{ font-size: 8px; font-weight: 500; letter-spacing: 0.06em; white-space: nowrap; color: var(--muted); }
.site-footer__synergy-logo{ height: 13px; width: auto; display: block; }
.site-footer__copyright{ margin: 0; font-size: 0.7rem; font-weight: 500; color: var(--muted); }

@media (max-width: 640px){
  .site-footer__bottom-right{ justify-content: flex-start; }
  .topbar__inner{ padding-inline: 18px; }
  .container{ padding-inline: 18px; }
}

/* ============================================================
 * Reduced motion
 * ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .btn, .card, .card__cta::after, .tools-partners__badge{ transition-duration: 0.01ms !important; }
  .card:hover{ transform: none; }
  .tools-partners__feature-link{ animation: none; }   /* keep the static accent card, drop the breathing glow */
}