/* thefluidtheme.com site layer: only what the core does not do. */
.theme-grid { --grid-min: 18rem; }
.theme-card { overflow: clip; }
.theme-card__frame {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
  border-block-end: var(--border-width, 1px) solid color-mix(in oklch, currentColor 15%, transparent);
  background: var(--color-surface, Canvas);
}
.theme-card__frame iframe {
  position: absolute; inset: 0;
  inline-size: 1280px; block-size: 960px;
  transform: scale(var(--thumb-scale, 0.25)); transform-origin: 0 0;
  border: 0; pointer-events: none;
}
.theme-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2, 0.5rem); }
.eyebrow .badge { margin-inline-start: var(--space-1, 0.25rem); vertical-align: middle; }
.detail-frame, .compare__panes iframe {
  border: var(--border-width, 1px) solid color-mix(in oklch, currentColor 20%, transparent);
  border-radius: var(--radius-card, 0.5rem);
  overflow: hidden;
}
.detail-frame iframe { display: block; inline-size: 100%; block-size: min(80vh, 52rem); border: 0; }
.detail-grid { display: grid; gap: var(--space-8, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }
pre { overflow-x: auto; max-inline-size: 100%; white-space: pre; }
.changelog li, .feed__item { padding-block: var(--space-3, 0.75rem); border-block-end: 1px solid color-mix(in oklch, currentColor 12%, transparent); }
.changelog time, .feed__item time { display: block; font-size: var(--text-sm, 0.875rem); opacity: 0.8; }
.feed { padding: 0; }
.feed__item h2 { font-size: var(--text-xl, 1.25rem); margin-block: 0 var(--space-2, 0.5rem); }
.container-wide { inline-size: min(100% - 2 * var(--space-gutter, 1.25rem), 120rem); margin-inline: auto; }
.compare__controls { display: flex; flex-wrap: wrap; gap: var(--space-4, 1rem); align-items: end; margin-block-end: var(--space-6, 1.5rem); }
.compare__controls label { display: grid; gap: var(--space-1, 0.25rem); font-weight: 600; }
.compare__panes { display: grid; gap: var(--space-4, 1rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.compare__pane h2 { font-size: var(--text-lg, 1.125rem); margin-block: 0 var(--space-2, 0.5rem); }
.compare__panes iframe { display: block; inline-size: 100%; block-size: 75vh; background: Canvas; }
.prose { max-inline-size: var(--measure, 70ch); }
.prose table { display: block; overflow-x: auto; }
.layers { padding: 0; }
.review-shelf .theme-card { outline: 2px dashed color-mix(in oklch, var(--accent) 60%, transparent); outline-offset: 4px; }