.hero{
  background:
    radial-gradient(900px 400px at 85% -10%, rgba(244,185,66,.28), transparent 60%),
    radial-gradient(700px 400px at 0% 110%, rgba(15,118,110,.55), transparent 60%),
    #10223a;
}
.no-scrollbar{scrollbar-width:none}
.no-scrollbar::-webkit-scrollbar{display:none}

.chip{height:2.5rem;padding:0 1rem;border-radius:9999px;font-size:.875rem;font-weight:500;white-space:nowrap;
  background:#eef3f7;color:#10223a;transition:background .15s,color .15s}
.chip:hover{background:#dbe5ee}
.chip[aria-pressed="true"]{background:#0f766e;color:#fff}
.chip:focus-visible,.card:focus-visible,.border-btn:focus-visible{outline:3px solid #f4b942;outline-offset:2px}

.card{display:block;width:100%;text-align:left;background:#fff;border-radius:1rem;overflow:hidden;
  border:1px solid #e4ebf2;transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 30px -12px rgba(16,34,58,.25);border-color:#cbd8e4}
.card .flag{aspect-ratio:3/2;width:100%;object-fit:cover;background:#e4ebf2;display:block}

.skeleton{background:linear-gradient(90deg,#e8eef4 25%,#f3f6f9 37%,#e8eef4 63%);background-size:400% 100%;
  animation:shimmer 1.4s ease infinite;border-radius:1rem;height:21rem}
@keyframes shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

dialog.detail{padding:0;border:0;border-radius:1.25rem;width:min(720px,calc(100% - 1.5rem));max-height:calc(100dvh - 2rem);
  overflow:auto;background:#fff;color:#10223a;margin:auto}
dialog.detail::backdrop{background:rgba(16,34,58,.6);backdrop-filter:blur(3px)}
dialog.detail[open]{animation:pop .22s ease}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

.fact{background:#f5f7fa;border-radius:.875rem;padding:.75rem .9rem}
.fact dt{font-size:.75rem;color:#5b6b7e}
.fact dd{margin-top:.15rem;font-weight:600;font-size:.95rem;overflow-wrap:anywhere}
.border-btn{padding:.35rem .75rem;border-radius:9999px;background:#e6f2f0;color:#115e59;font-size:.85rem;font-weight:500}
.border-btn:hover{background:#cfe7e3}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}