:root { color-scheme: light dark; }
body {
  margin: 0; padding: 28px; background: var(--page-bg);
  font-family: Inter, Geist, "IBM Plex Sans", system-ui, sans-serif;
}
body { color: var(--page-text, #1f2937); }
html[data-mode='dark'] body { color: var(--page-text, #e6eaf0); }
h1 { font-size: 18px; font-weight: 600; margin: 0 0 18px; letter-spacing: -.01em; }
#grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.card {
  background: var(--card-bg, #fff); border-radius: 14px; padding: 14px 14px 6px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 16px -6px rgba(15, 23, 42, .10);
  border: 1px solid rgba(15, 23, 42, .06); min-width: 0;
}
html[data-mode='dark'] .card { border-color: rgba(255, 255, 255, .06); box-shadow: none; }
.card.wide { grid-column: span 2; }
.card h2 { font-size: 13px; font-weight: 600; margin: 2px 6px 4px; opacity: .8; }

/* narrow screens: one card per row */
@media (max-width: 700px) {
  #grid { grid-template-columns: 1fr; }
  .card.wide { grid-column: auto; }
}

/* inside the showcase (?embed=sc) */
html[data-sc='1'] body { padding: 6px 2px 10px; background: transparent; }
html[data-sc='1'] h1 { display: none; }
@media (max-width: 1100px) { html[data-sc='1'] #grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the rule above outranks the plain 700px rule, so narrow cards (phones) kept two columns
   and cut off legends and axis labels; one column again below 700px */
@media (max-width: 700px) { html[data-sc='1'] #grid { grid-template-columns: minmax(0, 1fr); } }