.intro{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.intro::before,.intro::after{content:none}

.count{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  max-width:760px;
}

.stat-mini{
  min-width:0;
  padding:10px 11px;
  border:1px solid #ffffff20;
  border-radius:12px;
  background:#ffffff0d;
  backdrop-filter:blur(7px);
}

.stat-mini b{display:block;color:#fff;font-size:19px;line-height:1.15}
.stat-mini span{display:block;margin-top:4px;color:#d2d4d7;font-size:10px;line-height:1.35}

.search-card{position:relative;overflow:hidden}
.search-card::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:3px;
  background:linear-gradient(90deg,#111 0 22%,#c6a45e 22% 78%,#111 78%);
}

.code-tile{
  --tile:#5f7182;
  --tile-soft:#f7f4ed;
  --tile-glow:#5f718233;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-color:#c6a45e55;
  background:linear-gradient(145deg,#fff 35%,#f7f4ed);
}

.code-tile::before,.code-tile::after{content:none}

.code-tile>b,.code-tile>small,.code-tile>.icon{position:relative;z-index:1}

.code-tile .icon{
  position:relative;
  background:var(--tile);
  background:linear-gradient(145deg,color-mix(in srgb,var(--tile),#fff 16%),var(--tile));
  color:#fff;
  box-shadow:0 9px 22px var(--tile-glow),inset 0 1px 0 #ffffff66;
}

.code-tile .icon::after{content:none}

.code-tile:hover::before,.code-tile:focus-visible::before{transform:scale(1.22)}
.code-tile:hover .icon,.code-tile:focus-visible .icon{transform:rotate(-4deg) scale(1.06)}
.code-tile .icon{transition:transform .22s ease}

.code-tile:nth-child(1){--tile:#5f7182;--tile-glow:#5f718233}
.code-tile:nth-child(2){--tile:#8a7345;--tile-glow:#8a734533}
.code-tile:nth-child(3){--tile:#62766c;--tile-glow:#62766c33}
.code-tile:nth-child(4){--tile:#607784;--tile-glow:#60778433}
.code-tile:nth-child(5){--tile:#736978;--tile-glow:#73697833}
.code-tile:nth-child(6){--tile:#85675f;--tile-glow:#85675f33}
.code-tile:nth-child(7){--tile:#6f755e;--tile-glow:#6f755e33}
.code-tile:nth-child(8){--tile:#806f5c;--tile-glow:#806f5c33}
.code-tile:nth-child(9){--tile:#8a6d58;--tile-glow:#8a6d5833}
.code-tile:nth-child(10){--tile:#5e7476;--tile-glow:#5e747633}

.actions.single{grid-template-columns:1fr}
.results-head[hidden],.results:empty{display:none}

@media(prefers-reduced-motion:reduce){
  .code-tile,.code-tile::before,.code-tile .icon{transition:none}
}

@media(max-width:620px){
  .count{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-mini{padding:9px 10px}
  .stat-mini b{font-size:17px}
}