.d5ag-layout { container: d5ag-layout / inline-size; width: 100%; min-width: 0; color: #f5f5f7; font-family: inherit; }
.d5ag-layout, .d5ag-layout * { box-sizing: border-box; }
.d5ag-grid { --d5ag-gap: var(--d5ag-gap-desktop, 24px); --d5ag-row-gap: var(--d5ag-row-gap-desktop, 24px); display: flex; flex-wrap: wrap; align-items: stretch; justify-content: var(--d5ag-grid-align, flex-start); column-gap: var(--d5ag-gap); row-gap: var(--d5ag-row-gap); min-width: 0; }
.d5ag-card { --d5ag-columns: var(--d5ag-desktop-columns, 3); --d5ag-image-height: calc(var(--d5ag-image-height-desktop, 230px) + var(--d5ag-wide-boost, 0px)); --d5ag-image-ratio: var(--d5ag-image-ratio-desktop, 1.8); flex: 0 0 calc((100% - (var(--d5ag-columns) - 1) * var(--d5ag-gap)) / var(--d5ag-columns)); max-width: 100%; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: #16171b; border: 1px solid #2c2f39; border-radius: 12px; overflow-wrap: anywhere; }
.d5ag-natural-height .d5ag-grid { align-items: flex-start; }
.d5ag-media { position: relative; display: block; flex-shrink: 0; overflow: hidden; height: var(--d5ag-image-height); text-decoration: none; color: inherit; isolation: isolate; }
.d5ag-image-ratio .d5ag-media { height: auto; aspect-ratio: var(--d5ag-image-ratio); }
.d5ag-image { display: block; width: 100%; height: 100%; max-width: none; object-fit: var(--d5ag-image-fit, cover); object-position: var(--d5ag-focal-point, var(--d5ag-image-x, 50%) var(--d5ag-image-y, 50%)); transition: transform 300ms ease; }
.d5ag-card:hover .d5ag-image { transform: scale(var(--d5ag-image-zoom, 1.04)); }
.d5ag-image-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #69707b; background: linear-gradient(130deg,#303740,#171b21); }
.d5ag-image-placeholder svg { width: 48px; height: 48px; }
.d5ag-darken { position: absolute; inset: 0; background: #000; opacity: var(--d5ag-image-darken, 10%); pointer-events: none; }
.d5ag-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent var(--d5ag-fade-start, 35%), var(--d5ag-fade-color, #16171b) 100%); pointer-events: none; }
.d5ag-badge { position: absolute; top: var(--d5ag-badge-top, 16px); left: var(--d5ag-badge-left, 16px); z-index: 1; max-width: calc(100% - var(--d5ag-badge-left, 16px) - 16px); display: inline-block; background: #171717dd; color: #eeeeef; padding: 5px 8px; border: 1px solid #ffffff35; border-radius: 3px; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: 800; line-height: 1.3; }
.d5ag-badge-inline { position: static; align-self: flex-start; margin-bottom: 12px; }
.d5ag-content { position: relative; display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 0 24px 24px; margin-top: calc(-1 * var(--d5ag-content-overlap, 8px)); }
.d5ag-content-no-image { margin-top: 0; padding-top: 24px; }
.d5ag-main { padding-bottom: var(--d5ag-footer-top-space, 20px); }
.d5ag-main:only-child { padding-bottom: 0; }
.d5ag-title { margin: 0; padding: 0; color: #f5f5f7; font-family: Impact, 'Arial Narrow', sans-serif; font-size: 34px; font-weight: 800; line-height: 1.05; text-transform: var(--d5ag-title-transform, uppercase); }
.d5ag-title a { color: inherit; font: inherit; text-decoration: none; }
.d5ag-description { margin: var(--d5ag-description-top-space, 8px) 0 0; padding: 0; color: #acafbc; font-size: 12px; line-height: 1.5; }
.d5ag-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--d5ag-meta-gap, 16px); margin-top: var(--d5ag-meta-top-space, 20px); color: #acafbc; font-size: 11px; line-height: 1.5; }
.d5ag-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.d5ag-meta-item svg { flex-shrink: 0; width: var(--d5ag-meta-icon-size, 13px); height: var(--d5ag-meta-icon-size, 13px); color: var(--d5ag-meta-icon-color, #ffb511); }
.d5ag-difficulty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: var(--d5ag-difficulty-top-space, 12px); color: #acafbc; font-size: 11px; line-height: 1.5; }
.d5ag-meter { display: inline-flex; align-items: center; gap: 8px; }
.d5ag-segments { display: inline-flex; align-items: center; gap: var(--d5ag-segment-gap, 4px); }
.d5ag-segment { display: block; width: var(--d5ag-segment-width, 17px); height: var(--d5ag-segment-height, 5px); overflow: hidden; background: var(--d5ag-segment-empty-color, #2c2f39); border-radius: var(--d5ag-segment-radius, 4px); }
.d5ag-segment > span { display: block; height: 100%; background: var(--d5ag-segment-color, #ffb511); }
.d5ag-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--d5ag-footer-gap, 16px); margin-top: auto; padding-top: var(--d5ag-footer-padding-top, 20px); border-top: var(--d5ag-divider-width, 1px) solid var(--d5ag-divider-color, #2c2f39); }
.d5ag-footer-left { justify-content: flex-start; }
.d5ag-footer-center { justify-content: center; }
.d5ag-footer-stack { flex-direction: column; align-items: stretch; }
.d5ag-learn, .d5ag-book { display: inline-flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; font-weight: 700; line-height: 1.4; transition: color 160ms, background-color 160ms; }
.d5ag-learn { color: #f5f5f7; font-size: 12px; }
.d5ag-book { color: #111; background: #ffb511; border: 1px solid transparent; border-radius: 8px; padding: 12px 16px; font-size: 11px; min-height: 38px; }
.d5ag-learn svg, .d5ag-book svg { width: var(--d5ag-button-icon-size, 14px); height: var(--d5ag-button-icon-size, 14px); flex-shrink: 0; }
.d5ag-footer .d5ag-learn:hover { color: var(--d5ag-learn-hover-color, #ffb511) !important; }
.d5ag-footer .d5ag-book:hover { color: var(--d5ag-book-hover-color, #111) !important; background: var(--d5ag-book-hover-background, #ffc744) !important; }
.d5ag-card a:focus-visible { outline: 2px solid var(--d5ag-focus-color, #ffb511); outline-offset: -3px; }
.d5ag-preview-note, .d5ag-builder-error { padding: 10px 14px; margin: 0 0 12px; background: #f7f7fa; border: 1px dashed #9296a4; border-radius: 6px; color: #363845; font: 12px/1.5 system-ui,sans-serif; }
@media (prefers-reduced-motion: reduce) { .d5ag-layout *, .d5ag-layout *::after { transition: none !important; } .d5ag-card:hover .d5ag-image { transform: none; } }