/* Queepo Vibelist: follows the site's fonts and colors (currentColor), with Queepo's rounded cards */
.queepo-vl { --qvl-accent: #4d6bff; --qvl-line: color-mix(in srgb, currentColor 18%, transparent); --qvl-card: color-mix(in srgb, currentColor 5%, transparent); margin: 1.5em 0; }
.queepo-vl a { text-decoration: none; color: inherit; }
.queepo-vl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; }
.queepo-vl-name { font-size: 1.2em; font-weight: 800; }
.queepo-vl-name:hover { color: var(--qvl-accent); }
.queepo-vl-by { opacity: .7; font-size: .85em; }
.queepo-vl-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.queepo-vl-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.queepo-vl-items li { margin: 0; padding: 0; }
.queepo-vl-items li::before { content: none; }
.queepo-vl-items a { display: flex; flex-direction: column; height: 100%; border: 2px solid var(--qvl-line); background: var(--qvl-card); border-radius: 14px; overflow: hidden; transition: transform .15s, border-color .15s; }
.queepo-vl-items a:hover { transform: translateY(-2px); border-color: var(--qvl-accent); }
.queepo-vl-thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, #e3e8ff, #ffe1f1); }
.queepo-vl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; max-width: none; }
.queepo-vl-text { display: grid; gap: 4px; padding: 10px 12px 12px; }
.queepo-vl-text strong { font-size: .95em; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.queepo-vl-text em { font-style: normal; font-size: .8em; opacity: .65; }
.queepo-vl-list a { flex-direction: row; align-items: center; }
.queepo-vl-list .queepo-vl-thumb { flex: none; width: 96px; aspect-ratio: 1; }
.queepo-vl-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: .85em; opacity: .8; }
.queepo-vl-foot a:hover, .queepo-vl-brand b { color: var(--qvl-accent); }
.queepo-vl-frame { display: block; width: 100%; max-width: 100%; border: 0; margin: 1.5em 0; }
.queepo-vl-note { padding: 10px 14px; border: 2px dashed currentColor; border-radius: 12px; opacity: .75; font-size: .9em; }