/* Talisman slot diagrams of this guide. Colours, surfaces and radii come from the Content UI Kit tokens (--mcui-*,
   content-ui-kit/README.md); the fallback after each comma keeps the look on pages without the kit. Item quality
   colours are named --d4-*; each slot shows its colour as a small marker before its name, and the name says it too. */
.blog-wrapper { --d4-set: oklch(0.8 0.17 145); --d4-set-second: oklch(0.76 0.11 235); --d4-unique: oklch(0.8 0.12 80); --d4-mythic: oklch(0.72 0.17 305); }
.tsg-talisman { container-type: inline-size; margin-block: 1.5rem; padding: 1rem; border-radius: var(--mcui-radius, 8px); background: var(--mcui-reference, #202436); }
.blog-wrapper .tsg-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
@container (max-width: 26rem) { .blog-wrapper .tsg-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.blog-wrapper .tsg-slots > li { --tsg-slot: var(--mcui-muted, #afb5cf); display: flex; flex-direction: column; justify-content: center; gap: 0.15rem; min-block-size: 2.75rem; margin: 0; padding: 0.5rem 0.75rem; border: 1px solid var(--mcui-row-line, rgb(175 181 207 / .07)); border-radius: var(--mcui-radius-sm, 4px); background: var(--mcui-canvas, #1d2030); font-size: 0.875rem; line-height: 1.3; }
.tsg-slot__name { font-weight: 700; color: var(--mcui-ink, #eff0f5); hyphens: auto; overflow-wrap: break-word; }
.tsg-slot__name::before { content: ""; display: inline-block; inline-size: 0.55rem; block-size: 0.55rem; margin-inline-end: 0.45rem; border-radius: 2px; background: var(--tsg-slot); vertical-align: 0.05em; }
.tsg-slot__note { color: var(--mcui-muted, #afb5cf); }
.blog-wrapper .tsg-slots > .tsg-seal { grid-column: 1 / -1; }
.blog-wrapper .tsg-slots > .tsg-set-a { --tsg-slot: var(--d4-set); }
.blog-wrapper .tsg-slots > .tsg-set-b { --tsg-slot: var(--d4-set-second); }
.blog-wrapper .tsg-slots > .tsg-unique { --tsg-slot: var(--d4-unique); }
.blog-wrapper .tsg-slots > .tsg-mythic { --tsg-slot: var(--d4-mythic); }
.tsg-talisman figcaption { margin-block-start: 0.75rem; color: var(--mcui-muted, #afb5cf); font-size: 0.875rem; font-style: normal; text-align: start; }
.blog-wrapper .tsg-status { padding: 0.75rem 1rem; border-radius: var(--mcui-radius, 8px); background: var(--mcui-reference, #202436); color: var(--mcui-copy, #cfd3e2); }