.atlas { background: #f9f7ef; }
.atlas-head { display: grid; grid-template-columns: 1fr 220px; gap: 7vw; align-items: end; }
.atlas-head h2, .api-pricing h2 { font: 400 clamp(40px, 5vw, 70px)/1 Georgia, serif; margin: 0 0 22px; max-width: 780px; }
.atlas-head > div > p:last-child { max-width: 760px; color: #52685c; }
.atlas-count { border-left: 1px solid rgba(23,53,42,.16); padding-left: 35px; display: grid; }
.atlas-count strong { font: 400 72px/.9 Georgia, serif; color: #2f6a4f; }
.atlas-count span { text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 800; }
.atlas-count small { margin-top: 12px; color: #718077; }
.atlas-search { margin: 45px 0 28px; display: flex; border-bottom: 1px solid #17352a; }
.atlas-search input { flex: 1; border: 0; background: transparent; padding: 15px 2px; outline: none; }
.atlas-search button { border: 0; background: transparent; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; cursor: pointer; }
.poster-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.poster-card { min-width: 0; background: #fff; border: 1px solid rgba(23,53,42,.13); overflow: hidden; }
.poster-card img { width: 100%; aspect-ratio: 7/9; object-fit: cover; background: #f5f1e5; display: block; }
.poster-copy { padding: 16px; }
.poster-rank { font: italic 13px Georgia, serif; color: #bf643f; }
.poster-card h3 { font: 400 23px/1.08 Georgia, serif; margin: 9px 0 4px; }
.poster-card em { color: #2f6a4f; font: 13px Georgia, serif; }
.poster-parts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 13px; }
.poster-parts span { background: #edf0e6; padding: 4px 6px; font-size: 9px; }
.poster-credit { display: block; margin-top: 13px; color: #52685c; font-size: 10px; line-height: 1.35; }
.atlas-empty { grid-column: 1/-1; padding: 45px; text-align: center; border: 1px dashed #8ca08f; color: #607267; }
.api-pricing { background: #dfe8d7; display: grid; grid-template-columns: 1fr minmax(360px,.72fr); gap: 8vw; align-items: center; }
.api-pricing pre { overflow: auto; background: #0d2a20; color: #dcebc5; padding: 20px; font-size: 12px; margin-top: 30px; }
.api-card { background: #fbfaf5; padding: 35px; box-shadow: 0 30px 80px rgba(13,42,32,.14); }
.api-free { display: flex; align-items: center; gap: 16px; margin-top: 0; }
.api-free strong { font: 400 72px/.8 Georgia, serif; }
.api-free span { text-transform: uppercase; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.api-unit { border-top: 1px solid rgba(23,53,42,.16); border-bottom: 1px solid rgba(23,53,42,.16); padding: 15px 0; }
.api-unit strong { font: 400 32px Georgia, serif; }
.api-card label { display: grid; gap: 6px; margin: 20px 0 12px; text-transform: uppercase; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.api-card select { height: 45px; border: 1px solid rgba(23,53,42,.2); background: white; padding: 0 10px; }
.api-card .secondary { margin-top: 9px; }
#apiKeyOutput { display: block; margin-top: 12px; padding: 10px; font: 11px ui-monospace, monospace; overflow-wrap: anywhere; color: #2f6a4f; }
@media (max-width: 950px) { .poster-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 850px) { .atlas-head, .api-pricing { grid-template-columns: 1fr; } .atlas-count { border-left: 0; padding: 0; } }
@media (max-width: 500px) { .poster-grid { grid-template-columns: 1fr; } .atlas-head h2, .api-pricing h2 { font-size: 42px; } .api-card { padding: 23px; } }