.atlas-article { max-width: 1100px; }
.atlas-article .article-hero { max-width: 900px; }
.atlas-article .article-hero h1 { max-width: 900px; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.2; text-wrap: balance; }
.atlas-prose { max-width: none; }
.atlas-prose > p, .atlas-prose > h2, .atlas-prose > h3, .atlas-prose > hr { max-width: 760px; margin-left: auto; margin-right: auto; }
.atlas-prose > p { line-height: 1.95; }
.atlas-note { max-width: 760px; margin: 0 auto 40px; padding: 18px 22px; border: 1px solid var(--hairline); border-radius: 16px; color: var(--muted); line-height: 1.7; background: var(--panel); }
.atlas-overview { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 44px 0 64px; }
.atlas-body .atlas-prose a.atlas-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 22px 10px; border: 1px solid color-mix(in srgb, var(--tier) 35%, transparent); border-radius: 20px; background: radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--tier) 12%, transparent), transparent 70%), #09101e; color: var(--ink); text-decoration: none; transition: transform .2s, border-color .2s; }
.atlas-card:hover { transform: translateY(-4px); border-color: var(--tier); }
.atlas-card:focus-visible { outline: 2px solid var(--tier); outline-offset: 4px; }
.atlas-card img { width: 100%; max-width: 150px; height: auto; aspect-ratio: 1; object-fit: contain; }
.atlas-prose .atlas-card strong { font-size: 1.15rem; color: var(--tier); }
.atlas-card > span:last-child { font-size: .82rem; line-height: 1.6; color: var(--muted); }
.atlas-number { color: var(--tier); font-size: .75rem; letter-spacing: .12em; }
.atlas-1 { --tier: #9fe5ff; }.atlas-2 { --tier: #60d9ff; }.atlas-3 { --tier: #cca6ff; }.atlas-4 { --tier: #f7a7ce; }.atlas-5 { --tier: #f6d38b; }.atlas-6 { --tier: #e2c3ff; }
.atlas-prose .atlas-tier-heading { display: flex; gap: 20px; align-items: center; padding-top: 28px; border-top: 1px solid var(--hairline); scroll-margin-top: 120px; font-size: 1.8rem; }
.atlas-tier-heading img { width: 96px; height: 96px; object-fit: contain; flex-shrink: 0; }
.atlas-prose h2 { margin-top: 64px; scroll-margin-top: 120px; text-wrap: balance; }
.atlas-body .content-cta { margin: 48px auto; max-width: 760px; }
.atlas-body .primary-action { text-align: center; }
@media(max-width: 960px) { .atlas-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media(max-width: 560px) { .atlas-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .atlas-card img { max-width: 120px; } .atlas-prose .atlas-tier-heading { font-size: 1.5rem; gap: 12px; } .atlas-tier-heading img { width: 72px; height: 72px; } .atlas-body .nav-inner { flex-wrap: wrap; justify-content: space-between; gap: 10px; } .atlas-body .language-switcher { margin-left: 0; } }
@media(prefers-reduced-motion: reduce) { .atlas-card { transition: none; } }