/* Local layout preview. Featured order is editorial, not usage statistics. */
#asa-portal .asa-home {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: 26px 0 22px;
  gap: 32px;
}
#asa-portal .asa-top3 {
  width: min(790px, calc(100% - 64px));
  margin: 0 auto;
  position: relative;
  z-index: 4;
}
#asa-portal .asa-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 3px 20px;
}
#asa-portal .asa-section-heading h1,
#asa-portal .asa-section-heading h2 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #e7eaee;
}
#asa-portal .asa-section-heading small {
  font: 10px/1.5 Consolas, monospace;
  letter-spacing: 2px;
  color: #92979e;
}
#asa-portal .asa-podium {
  display: grid;
  grid-template-columns: 1fr 1.13fr 1fr;
  gap: 22px;
  align-items: start;
}
#asa-portal .asa-top-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  height: 282px;
  padding: 17px;
  border: 1px solid #44494f;
  border-radius: 19px;
  background: linear-gradient(145deg, #20242bea, #12151aee 80%);
  box-shadow: 0 18px 40px #0007, inset 0 1px 0 #ffffff10;
  text-align: left;
  overflow: hidden;
  transition: translate .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#asa-portal .asa-top-card[data-rank="2"] { margin-top: 48px; }
#asa-portal .asa-top-card[data-rank="3"] { margin-top: 68px; }
#asa-portal .asa-top-card[data-rank="1"] {
  height: 322px;
  padding: 20px;
  border-color: #8795a6;
  background: linear-gradient(145deg, #272f3bef, #12171fed 78%);
  box-shadow: 0 22px 56px #0009, 0 0 35px #6085b014, inset 0 1px 0 #e1eaff24;
}
#asa-portal .asa-top-card:hover,
#asa-portal .asa-top-card:focus-visible {
  translate: 0 -5px;
  border-color: #c3cfdf;
  box-shadow: 0 24px 46px #0009;
}
#asa-portal .asa-top-card .asa-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: #9ba4b1;
  font: 9px/1.4 Consolas, monospace;
  letter-spacing: .5px;
}
#asa-portal .asa-rank {
  border: 1px solid #59616b;
  border-radius: 6px;
  padding: 4px 7px;
  color: #d0d7df;
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: 1px;
}
#asa-portal .asa-top-card[data-rank="1"] .asa-rank {
  color: #101722;
  background: #d7e1ee;
  border-color: #d7e1ee;
}
#asa-portal .asa-top-card .asa-art {
  height: 109px;
  background: radial-gradient(ellipse at 50% 80%, #24436430, transparent 70%), #0b0e13b0;
  border-color: #343d49;
  border-radius: 10px;
}
#asa-portal .asa-top-card[data-rank="1"] .asa-art { height: 137px; }
#asa-portal .asa-top-card .asa-art img { width: 92px; height: 92px; object-fit: contain; }
#asa-portal .asa-top-card[data-rank="1"] .asa-art img { width: 116px; height: 116px; }
#asa-portal .asa-top-card .asa-tool-name { font-size: 17px; line-height: 1.35; }
#asa-portal .asa-top-card[data-rank="1"] .asa-tool-name { font-size: 19px; }
#asa-portal .asa-top-card .asa-tool-description { font-size: 11px; line-height: 1.6; color: #aeb5c0; }
#asa-portal .asa-top-card .asa-tool-foot { font-size: 10px; color: #bec7d3; }
#asa-portal .asa-top-card .asa-tool-foot svg { width: 14px; height: 14px; }
#asa-portal .asa-carousel-area { width: 100%; position: relative; z-index: 3; }
#asa-portal .asa-carousel-area > .asa-section-heading {
  width: min(1280px, calc(100% - 64px));
  margin: 0 auto;
  padding-bottom: 0;
}
#asa-portal .asa-carousel-area .asa-section-heading h2 { font-size: 12px; color: #b8bec7; }
#asa-portal .asa-carousel-area .asa-section-heading small { font-size: 9px; letter-spacing: .5px; }
#asa-portal .asa-fan { height: 300px; margin-top: 0; }
#asa-portal .asa-website-card { text-decoration: none; color: inherit; }
#asa-portal .asa-website-card .asa-tool-name { font-size: 14px; letter-spacing: -.3px; overflow-wrap: anywhere; }
#asa-portal .asa-art-website {
  background: radial-gradient(ellipse at 50% 100%, #48627d44, transparent 80%), #101319;
  flex-direction: column;
  gap: 1px;
  color: #d5e3f1;
}
#asa-portal .asa-art-website strong { font: 600 37px/1.1 "Segoe UI", sans-serif; letter-spacing: -3px; }
#asa-portal .asa-art-website small { font: 7px/1.4 Consolas, monospace; letter-spacing: 2px; color: #9faebf; }
@media (max-width: 800px) {
  #asa-portal .asa-home { padding: 20px 0 16px; gap: 24px; }
  #asa-portal .asa-top3 { width: min(690px, calc(100% - 36px)); }
  #asa-portal .asa-podium { gap: 15px; }
  #asa-portal .asa-top-card { padding: 14px; gap: 12px; height: 276px; }
  #asa-portal .asa-top-card[data-rank="1"] { padding: 16px; height: 310px; }
  #asa-portal .asa-top-card .asa-topbar > span:last-child { display: none; }
  #asa-portal .asa-carousel-area > .asa-section-heading { width: calc(100% - 36px); }
  #asa-portal .asa-fan { height: 290px; }
}
@media (max-width: 600px) {
  #asa-portal .asa-home { padding: 24px 0 12px; gap: 24px; }
  #asa-portal .asa-top3 { width: calc(100% - 24px); }
  #asa-portal .asa-section-heading { gap: 8px; padding-bottom: 18px; }
  #asa-portal .asa-section-heading h1 { font-size: 13px; letter-spacing: .4px; }
  #asa-portal .asa-section-heading small { font-size: 8px; letter-spacing: 1px; }
  #asa-portal .asa-podium { gap: 8px; grid-template-columns: 1fr 1.08fr 1fr; }
  #asa-portal .asa-top-card { height: 222px; padding: 9px; gap: 10px; border-radius: 12px; }
  #asa-portal .asa-top-card[data-rank="2"] { margin-top: 34px; }
  #asa-portal .asa-top-card[data-rank="3"] { margin-top: 47px; }
  #asa-portal .asa-top-card[data-rank="1"] { height: 247px; padding: 10px; }
  #asa-portal .asa-rank { font-size: 8px; padding: 3px 5px; letter-spacing: .3px; }
  #asa-portal .asa-top-card .asa-art { height: 72px; border-radius: 7px; }
  #asa-portal .asa-top-card[data-rank="1"] .asa-art { height: 87px; }
  #asa-portal .asa-top-card .asa-art img { width: 60px; height: 60px; }
  #asa-portal .asa-top-card[data-rank="1"] .asa-art img { width: 75px; height: 75px; }
  #asa-portal .asa-top-card .asa-tool-name { font-size: 11px; letter-spacing: -.3px; line-height: 1.45; }
  #asa-portal .asa-top-card[data-rank="1"] .asa-tool-name { font-size: 12px; }
  #asa-portal .asa-top-card .asa-tool-description { font-size: 9px; line-height: 1.5; }
  #asa-portal .asa-top-card .asa-tool-foot { font-size: 8px; gap: 3px; }
  #asa-portal .asa-top-card .asa-tool-foot svg { width: 11px; height: 11px; }
  #asa-portal .asa-carousel-area > .asa-section-heading { width: calc(100% - 26px); }
  #asa-portal .asa-carousel-area .asa-section-heading small { font-size: 8px; }
  #asa-portal .asa-fan { height: 252px; }
}
@media (prefers-reduced-motion: reduce) {
  #asa-portal .asa-top-card { transition: none; }
}

/* Three actual podium bases. Each card stands over its rank's platform. */
#asa-portal .asa-home { gap: 27px; padding-top: 24px; padding-bottom: 20px; }
#asa-portal .asa-podium {
  grid-template-columns: 1fr 1.13fr 1fr;
  align-items: end;
  gap: 18px;
}
#asa-portal .asa-podium-slot {
  --podium-height: 76px;
  height: 418px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
}
#asa-portal .asa-podium-slot[data-rank="1"] { --podium-height: 110px; }
#asa-portal .asa-podium-slot[data-rank="3"] { --podium-height: 46px; }
#asa-portal .asa-podium-slot .asa-top-card {
  margin: 0;
  height: 268px;
  flex: 0 0 auto;
  border-radius: 16px;
  background: linear-gradient(145deg, #26282ce8, #111315ed 85%);
}
#asa-portal .asa-podium-slot[data-rank="1"] .asa-top-card {
  height: 300px;
  background: linear-gradient(145deg, #272f3bef, #12171fed 78%);
}
#asa-portal .asa-podium-slot .asa-top-card .asa-art { height: 98px; }
#asa-portal .asa-podium-slot[data-rank="1"] .asa-top-card .asa-art { height: 121px; }
#asa-portal .asa-podium-step {
  position: relative;
  flex: 0 0 var(--podium-height);
  height: var(--podium-height);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #5e6570;
  border-top: 1px solid #9299a2;
  border-radius: 2px 2px 8px 8px;
  background: linear-gradient(120deg, #343940, #20242a 55%, #13161b);
  box-shadow: 0 16px 28px #0009, inset 1px 0 0 #bfc7d025;
}
#asa-portal .asa-podium-step::before {
  content: "";
  position: absolute;
  top: -9px;
  left: -1px;
  right: -1px;
  height: 9px;
  background: linear-gradient(110deg, #5b626d, #383e46);
  clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%);
}
#asa-portal .asa-podium-step::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: #00000024;
  border-left: 1px solid #ffffff08;
  border-radius: 0 0 7px 0;
}
#asa-portal .asa-step-rank {
  font: 500 35px/1 "Segoe UI", sans-serif;
  color: #d2d8e0;
  text-shadow: 0 2px 8px #0008;
}
#asa-portal .asa-podium-slot[data-rank="1"] .asa-step-rank { font-size: 50px; color: #edf1f6; }
#asa-portal .asa-podium-slot[data-rank="3"] .asa-step-rank { font-size: 29px; }
#asa-portal .asa-art-symbol { background: radial-gradient(ellipse at 50% 100%, #626c7c29, transparent 85%), #101216; }
#asa-portal .asa-function-mark { width: 72px; height: 72px; display: block; flex: 0 0 auto; }
#asa-portal .asa-top-card .asa-function-mark { width: 90px; height: 90px; }
@media(max-width:800px) {
  #asa-portal .asa-podium { gap: 14px; }
  #asa-portal .asa-podium-slot { height: 398px; --podium-height: 66px; }
  #asa-portal .asa-podium-slot[data-rank="1"] { --podium-height: 104px; }
  #asa-portal .asa-podium-slot[data-rank="3"] { --podium-height: 40px; }
  #asa-portal .asa-podium-slot .asa-top-card { height: 266px; }
  #asa-portal .asa-podium-slot[data-rank="1"] .asa-top-card { height: 286px; }
  #asa-portal .asa-podium-slot[data-rank="1"] .asa-top-card .asa-art { height: 106px; }
}
@media(max-width:600px) {
  #asa-portal .asa-home { gap: 20px; padding-top: 20px; padding-bottom: 10px; }
  #asa-portal .asa-podium { gap: 8px; grid-template-columns: 1fr 1.08fr 1fr; }
  #asa-portal .asa-podium-slot { height: 326px; --podium-height: 53px; gap: 6px; }
  #asa-portal .asa-podium-slot[data-rank="1"] { --podium-height: 80px; }
  #asa-portal .asa-podium-slot[data-rank="3"] { --podium-height: 32px; }
  #asa-portal .asa-podium-slot .asa-top-card { height: 215px; border-radius: 12px; }
  #asa-portal .asa-podium-slot[data-rank="1"] .asa-top-card { height: 240px; }
  #asa-portal .asa-podium-slot .asa-top-card .asa-art { height: 72px; }
  #asa-portal .asa-podium-slot[data-rank="1"] .asa-top-card .asa-art { height: 84px; }
  #asa-portal .asa-podium-step { border-radius: 2px 2px 5px 5px; }
  #asa-portal .asa-podium-step::before { top: -6px; height: 6px; }
  #asa-portal .asa-step-rank { font-size: 25px; }
  #asa-portal .asa-podium-slot[data-rank="1"] .asa-step-rank { font-size: 38px; }
  #asa-portal .asa-podium-slot[data-rank="3"] .asa-step-rank { font-size: 21px; }
  #asa-portal .asa-top-card .asa-function-mark { width: 62px; height: 62px; }
  #asa-portal .asa-function-mark { width: 66px; height: 66px; }
}

/* The third podium place links to mingyangzhai.com. */
#asa-portal .asa-top-card .asa-art-website strong { font-size: 54px; }
@media(max-width:600px) {
  #asa-portal .asa-top-card .asa-art-website strong { font-size: 38px; }
}