/* CryptoHFT "Explore the datasets" cards. Utilities are scoped so they do not restyle the rest of the page. */
#data-grid.showcase{padding:112px 0 96px;border-top:1px solid #162124}
#data-grid .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#data-grid h3,#data-grid p{margin:0}
#data-grid .grid{display:grid;gap:1.25rem}
#data-grid .group{display:flex;flex-direction:column;overflow:hidden;border-radius:1rem;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);color:inherit;text-decoration:none;transition:border-color .2s,background .2s}
#data-grid .group:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.04)}
#data-grid .showcase-stage{content-visibility:auto;contain-intrinsic-size:auto 13rem;background:radial-gradient(120% 90% at 50% 0,rgba(255,255,255,.03),transparent 60%),#0d0d0d;height:13rem;position:relative;overflow:hidden}
#data-grid .font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
#data-grid .flex{display:flex}
#data-grid .inline-flex{display:inline-flex}
#data-grid .inline-block{display:inline-block}
#data-grid .flex-col{flex-direction:column}
#data-grid .flex-1{flex:1 1 0%}
#data-grid .items-center{align-items:center}
#data-grid .items-end{align-items:flex-end}
#data-grid .justify-center{justify-content:center}
#data-grid .justify-end{justify-content:flex-end}
#data-grid .justify-between{justify-content:space-between}
#data-grid .relative{position:relative}
#data-grid .absolute{position:absolute}
#data-grid .inset-y-0{top:0;bottom:0}
#data-grid .left-0{left:0}
#data-grid .top-0{top:0}
#data-grid .left-5{left:1.25rem}
#data-grid .right-5{right:1.25rem}
#data-grid .top-5{top:1.25rem}
#data-grid .h-full{height:100%}
#data-grid .h-\[70\%\]{height:70%}
#data-grid .h-2{height:.5rem}
#data-grid .h-2\.5{height:.625rem}
#data-grid .h-3{height:.75rem}
#data-grid .h-px{height:1px}
#data-grid .w-2{width:.5rem}
#data-grid .w-1\.5{width:.375rem}
#data-grid .w-8{width:2rem}
#data-grid .w-10{width:2.5rem}
#data-grid .w-14{width:3.5rem}
#data-grid .gap-3{gap:.75rem}
#data-grid .gap-1\.5{gap:.375rem}
#data-grid .gap-\[3px\]{gap:3px}
#data-grid .px-5{padding-left:1.25rem;padding-right:1.25rem}
#data-grid .py-2{padding-top:.5rem;padding-bottom:.5rem}
#data-grid .py-0\.5{padding-top:.125rem;padding-bottom:.125rem}
#data-grid .py-4{padding-top:1rem;padding-bottom:1rem}
#data-grid .p-5{padding:1.25rem}
#data-grid .pb-5{padding-bottom:1.25rem}
#data-grid .pb-3{padding-bottom:.75rem}
#data-grid .pb-px{padding-bottom:1px}
#data-grid .pl-2{padding-left:.5rem}
#data-grid .mt-1{margin-top:.25rem}
#data-grid .mt-2{margin-top:.5rem}
#data-grid .mt-3{margin-top:.75rem}
#data-grid .my-1\.5{margin-top:.375rem;margin-bottom:.375rem}
#data-grid .text-right{text-align:right}
#data-grid .text-center{text-align:center}
#data-grid .align-bottom{vertical-align:bottom}
#data-grid .align-middle{vertical-align:middle}
#data-grid .text-\[9px\]{font-size:9px}
#data-grid .text-\[10px\]{font-size:10px}
#data-grid .text-xs{font-size:.75rem}
#data-grid .text-base{font-size:1rem}
#data-grid .leading-none{line-height:1}
#data-grid .leading-5{line-height:1.25rem}
#data-grid .leading-relaxed{line-height:1.625}
#data-grid .font-medium{font-weight:500}
#data-grid .font-semibold{font-weight:600}
#data-grid .tracking-tight{letter-spacing:-.025em}
#data-grid .tracking-wider{letter-spacing:.05em}
#data-grid .rounded-2xl{border-radius:1rem}
#data-grid .rounded-\[2px\]{border-radius:2px}
#data-grid .rounded-t-\[2px\]{border-top-left-radius:2px;border-top-right-radius:2px}
#data-grid .rounded-sm{border-radius:.125rem}
#data-grid .rounded-full{border-radius:9999px}
#data-grid .border-t{border-top:1px solid transparent}
#data-grid .border-b{border-bottom:1px solid transparent}
#data-grid .border-white\/\[0\.08\]{border-color:rgba(255,255,255,.08)}
#data-grid .border-white\/\[0\.06\]{border-color:rgba(255,255,255,.06)}
#data-grid .border-white\/\[0\.04\]{border-color:rgba(255,255,255,.04)}
#data-grid .border-white\/10{border-color:rgba(255,255,255,.1)}
#data-grid .bg-white\/\[0\.02\]{background:rgba(255,255,255,.02)}
#data-grid .bg-white\/\[0\.08\]{background:rgba(255,255,255,.08)}
#data-grid .bg-white\/80{background:rgba(255,255,255,.8)}
#data-grid .bg-red-400\/10{background:rgba(248,113,113,.1)}
#data-grid .bg-red-400\/25{background:rgba(248,113,113,.25)}
#data-grid .bg-red-400\/60{background:rgba(248,113,113,.6)}
#data-grid .bg-emerald-400\/10{background:rgba(52,211,153,.1)}
#data-grid .bg-emerald-400\/25{background:rgba(52,211,153,.25)}
#data-grid .bg-emerald-400\/60{background:rgba(52,211,153,.6)}
#data-grid .bg-\[\#FF5F56\]{background:#FF5F56}
#data-grid .bg-\[\#FFBD2E\]{background:#FFBD2E}
#data-grid .bg-\[\#27C93F\]{background:#27C93F}
#data-grid .text-white{color:#fff}
#data-grid .text-red-300,#data-grid .text-red-300\/90{color:rgba(252,165,165,.9)}
#data-grid .text-emerald-300,#data-grid .text-emerald-300\/90{color:rgba(110,231,183,.9)}
#data-grid .text-neutral-300{color:#d4d4d4}
#data-grid .text-neutral-400{color:#a3a3a3}
#data-grid .text-neutral-500{color:#737373}
#data-grid .text-neutral-600{color:#525252}
#data-grid .text-brand-green{color:#6ee7b7}
#data-grid .group:hover .group-hover\:text-white{color:#fff}
#data-grid .transition-transform{display:inline-block;transition:transform .2s}
#data-grid .group:hover .group-hover\:translate-x-0\.5{transform:translateX(2px)}
#data-grid .ob-bar{width:var(--ob-width,50%);transform-origin:0;animation:ob-breathe 2.6s ease-in-out var(--ob-delay,0s) infinite alternate}
#data-grid .tape-mask{-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
#data-grid .tape-scroll{animation:tape-scroll 16s linear infinite}
#data-grid .liq-bar{height:var(--liq-height,20%);transform-origin:bottom;animation:liq-pop 9s cubic-bezier(.22,1,.36,1) var(--liq-delay,0s) infinite}
#data-grid .liq-caption{opacity:0;animation:liq-caption 9s ease-in-out var(--liq-caption-delay,0s) infinite}
#data-grid .term-type{white-space:nowrap;vertical-align:bottom;display:inline-block;overflow:hidden}
#data-grid .term-type--install{width:0;animation:term-type-install 1.3s steps(25) .5s both}
#data-grid .term-type--query{width:0;animation:term-type-query 1.3s steps(28) 2.6s both}
#data-grid .term-reveal{opacity:0;animation:term-reveal .4s ease-out both}
#data-grid .term-reveal--installed{animation-delay:2s}
#data-grid .term-reveal--row1{animation-delay:4.1s}
#data-grid .term-reveal--row2{animation-delay:4.35s}
#data-grid .term-reveal--row3{animation-delay:4.6s}
#data-grid .term-cursor{animation:term-cursor 1.1s step-end infinite}
@keyframes ob-breathe{0%{transform:scaleX(.55)}to{transform:scaleX(1)}}
@keyframes tape-scroll{0%{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes liq-pop{0%{transform:scaleY(.1)}6%{transform:scaleY(1)}55%{transform:scaleY(.72)}to{transform:scaleY(.1)}}
@keyframes liq-caption{0%,4%{opacity:0;transform:translateY(3px)}9%,27%{opacity:1;transform:none}33%,100%{opacity:0;transform:translateY(-3px)}}
@keyframes term-type-install{0%{width:0}to{width:25ch}}
@keyframes term-type-query{0%{width:0}to{width:28ch}}
@keyframes term-reveal{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
@keyframes term-cursor{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(min-width:640px){#data-grid .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){#data-grid .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:639px){#data-grid.showcase{padding:84px 0}}
@media(prefers-reduced-motion:reduce){
  #data-grid .ob-bar,#data-grid .tape-scroll,#data-grid .liq-bar,#data-grid .liq-caption,#data-grid .term-cursor,#data-grid .term-type--install,#data-grid .term-type--query,#data-grid .term-reveal{animation:none}
  #data-grid .term-type--install,#data-grid .term-type--query{width:auto}
  #data-grid .liq-caption:first-child,#data-grid .term-reveal{opacity:1}
}
