/* The Robinhood Chain ecosystem browse page (/ecosystem). Docs layout in the v6.2 house style: charcoal ground, parchment
   type, gold for live elements. No hairlines: surfaces separate by shade and spacing, pills are filled.
   The project sheet itself comes from sheet.css (a copy of the map popup). Page classes carry an e- prefix. */
:root{
  --panel:rgba(12,14,18,.80);--well:rgba(255,255,255,.045);--fill:rgba(255,255,255,.08);--fill-hi:rgba(255,255,255,.15);
  --gold:#E2B04F;--text:#fff;--muted:rgba(255,255,255,.62);--cream:#EFE6CF;--r:14px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --char:#1c1d1b;--char-top:#2b2c2a;--parch:#ede6d3;--glow:#f4d27a;--card:#232422;--card-hi:#2a2b29;
  --head:"Cinzel","Cormorant Garamond",serif;--corm:"Cormorant Garamond",Georgia,serif;
}
*{box-sizing:border-box}
html{background:var(--char);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100svh;color:var(--parch);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  background:linear-gradient(180deg,var(--char-top) 0,var(--char) 60vh) var(--char);overflow-x:hidden}
body.lock{overflow:hidden}
button{font:inherit;color:inherit}
a{color:inherit}

/* top bar */
.e-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;height:56px;padding:0 14px;
  padding-top:env(safe-area-inset-top);box-sizing:content-box;
  background:linear-gradient(180deg,rgba(18,19,17,.96),rgba(28,29,27,.9));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.e-brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--parch);white-space:nowrap;margin-right:auto}
.e-brand img{height:28px;width:auto;filter:drop-shadow(0 0 3px rgba(244,210,122,.4))}
.e-brand span{font:700 20px/1 var(--corm);letter-spacing:.02em}
.e-brand i{font-style:italic;font-weight:500;color:var(--glow)}
.e-pill{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px;border:0;border-radius:999px;cursor:pointer;
  text-decoration:none;font-size:13px;font-weight:600;color:var(--parch);background:var(--fill);transition:background .15s ease;white-space:nowrap}
.e-pill:hover,.e-pill:focus-visible{background:var(--fill-hi);outline:none}
.e-pill svg{width:15px;height:15px;flex:none}
.e-map{background:var(--gold);color:#17120a}
.e-map:hover,.e-map:focus-visible{background:#EEC26A}

/* art band, the map art muted to warm grey under a charcoal fade, as on the docs pages */
.e-band{position:relative;height:250px;overflow:hidden;background:var(--char)}
.e-band-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  filter:grayscale(1) sepia(.22) brightness(.62) contrast(1.05);opacity:.7}
.e-band-fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,29,27,.35) 0%,rgba(28,29,27,.15) 40%,rgba(28,29,27,.96) 100%),
  radial-gradient(60% 80% at 50% 70%,rgba(28,29,27,.55),transparent 70%)}
.e-lights{position:absolute;inset:0;pointer-events:none}
.e-lights span{position:absolute;border-radius:50%;background:var(--glow);opacity:0;
  box-shadow:0 0 6px 1px rgba(244,210,122,.75),0 0 16px rgba(244,210,122,.3);animation:e-drift ease-in-out infinite}
@keyframes e-drift{0%{opacity:0;transform:translate(0,0)}20%{opacity:.9}50%{opacity:.55;transform:translate(14px,-10px)}80%{opacity:.85}100%{opacity:0;transform:translate(26px,-22px)}}
.e-hero{position:absolute;inset:auto 0 0 0;padding:0 18px 22px;text-align:center}
.e-hero h1{margin:0 auto;max-width:820px;font-family:var(--head);font-weight:500;font-size:clamp(25px,5.4vw,46px);line-height:1.12;letter-spacing:1.2px;
  color:var(--parch);text-shadow:0 2px 18px rgba(0,0,0,.6)}
.e-hero p{margin:10px auto 0;max-width:600px;font-family:var(--corm);font-size:18px;line-height:1.35;color:rgba(237,230,211,.82)}

/* tools: search and category pills */
.e-main{max-width:1180px;margin:0 auto;padding:6px 14px 56px}
.e-tools{position:sticky;top:calc(56px + env(safe-area-inset-top));z-index:10;margin:0 -14px;padding:10px 14px 12px;
  background:linear-gradient(180deg,rgba(28,29,27,.98) 78%,rgba(28,29,27,0))}
.e-search{display:flex;align-items:center;gap:9px;height:44px;padding:0 16px;border-radius:999px;background:var(--card);color:var(--muted)}
.e-search svg{width:17px;height:17px;flex:none}
.e-search input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;color:var(--parch);font:500 16px Inter,system-ui,sans-serif}
.e-search input::placeholder{color:rgba(237,230,211,.45)}
.e-search input::-webkit-search-cancel-button{filter:invert(.8) sepia(.3)}
.e-search:focus-within{background:var(--card-hi)}
.e-cats{display:flex;gap:7px;margin-top:10px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-right:-14px;padding-right:14px}
.e-cats::-webkit-scrollbar{display:none}
.e-cat{flex:none;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border:0;border-radius:999px;cursor:pointer;
  font-size:13px;font-weight:600;color:rgba(237,230,211,.86);background:var(--fill);transition:background .15s ease}
.e-cat i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.e-cat small{font-size:11px;font-weight:500;color:rgba(237,230,211,.5)}
.e-cat:hover,.e-cat:focus-visible{background:var(--fill-hi);outline:none}
.e-cat[aria-selected="true"]{background:var(--gold);color:#17120a}
.e-cat[aria-selected="true"] i{background:#17120a}
.e-cat[aria-selected="true"] small{color:rgba(23,18,10,.65)}

.e-h{margin:22px 0 12px;font-family:var(--serif);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(239,230,207,.62)}
.e-h b{margin-left:6px;color:var(--gold);letter-spacing:.06em}

/* cards, the popup look in small */
.e-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -14px;padding:0 14px 4px}
.e-row::-webkit-scrollbar{display:none}
.e-row .e-card{flex:0 0 250px;scroll-snap-align:start}
.e-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:600px){.e-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.e-grid{grid-template-columns:repeat(3,1fr)}.e-main{padding:6px 24px 72px}.e-tools{margin:0 -24px;padding:12px 24px 14px}}
.e-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:18px;background:var(--card);cursor:pointer;
  text-align:left;color:var(--parch);transition:background .15s ease,transform .15s ease;min-width:0}
.e-card:hover{background:var(--card-hi)}
.e-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.e-id{display:flex;align-items:center;gap:12px;min-width:0}
.e-logo{width:46px;height:46px;flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  font-family:var(--serif);font-weight:600;font-size:16px;color:#fff;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 75%,#fff 8%),color-mix(in srgb,var(--c) 32%,#0b0e12))}
.e-logo img{width:100%;height:100%;object-fit:cover;display:block}
.e-logo.ours{background:radial-gradient(circle at 35% 30%,#4a3a1c,#14110b);color:var(--gold)}
.e-nm{min-width:0;flex:1}
.e-nm b{display:block;font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.15;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.e-nm span{display:block;margin-top:3px;font-size:12px;color:rgba(237,230,211,.55);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.e-blurb{margin:0;font-size:13.5px;line-height:1.45;color:rgba(237,230,211,.82);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.e-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:auto}
.e-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:600;
  background:color-mix(in srgb,var(--c) 22%,transparent);color:color-mix(in srgb,var(--c) 40%,#fff)}
.e-chip i{width:6px;height:6px;border-radius:50%;background:var(--c)}
.e-chip.n{background:var(--fill);color:rgba(255,255,255,.78)}
.e-chip.warn{background:rgba(226,176,79,.14);color:#F1D79C}
.e-lk{display:flex;gap:6px;margin-left:auto}
.e-lk a{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--fill);color:var(--parch);transition:background .15s ease}
.e-lk a:hover,.e-lk a:focus-visible{background:var(--fill-hi);outline:none}
.e-lk a svg{width:14px;height:14px}
.e-none{margin:28px 0;text-align:center;color:var(--muted);font-size:14px}
.e-feat[hidden]{display:none}

/* the sheet over the page */
.modal{z-index:40}
.foot .all{cursor:pointer}

@media (min-width:900px){
  .e-top{height:64px;padding:0 24px}
  .e-brand img{height:32px}.e-brand span{font-size:23px}
  .e-tools{top:calc(64px + env(safe-area-inset-top));display:flex;align-items:center;gap:14px}
  .e-search{width:300px;flex:none}
  .e-cats{margin-top:0;flex-wrap:wrap;margin-right:0;padding-right:0}
  .e-band{height:300px}
  .e-hero{padding-bottom:30px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.e-lights span{opacity:.7}}

/* p31 (t1171u-t1173u): full width page like ethereum.org/apps. The top bar sits on the art with no slab, the art fades out with a long mask
   (no hard edge above search), wider content (max 1440, responsive gutters), full bleed sticky tools and featured row, denser grid. */
:root{--g:16px;--vw:100vw}
@media (min-width:600px){:root{--g:28px}}
@media (min-width:1100px){:root{--g:48px}}
.e-top{position:absolute;left:0;right:0;top:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding-left:var(--g);padding-right:var(--g)}
.e-band{height:320px;background:none}
.e-band-img{opacity:.55;filter:grayscale(.85) sepia(.25) brightness(.7) contrast(1.02);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 35%,rgba(0,0,0,.55) 65%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 35%,rgba(0,0,0,.55) 65%,transparent 100%)}
.e-band-fade{background:radial-gradient(60% 80% at 50% 75%,rgba(28,29,27,.5),transparent 70%),linear-gradient(180deg,rgba(28,29,27,.35),rgba(28,29,27,0) 45%)}
.e-hero{padding:0 var(--g) 26px}
.e-main{max-width:1440px;padding:6px var(--g) 72px}
.e-tools,.e-row{margin-left:calc((100% - var(--vw)) / 2);margin-right:calc((100% - var(--vw)) / 2);
  padding-left:calc((var(--vw) - 100%) / 2);padding-right:calc((var(--vw) - 100%) / 2)}
.e-tools{top:0;background:linear-gradient(180deg,rgba(28,29,27,.97) 75%,rgba(28,29,27,0))}
.e-row{scroll-padding-left:calc((var(--vw) - 100%) / 2);scroll-padding-right:calc((var(--vw) - 100%) / 2);gap:12px;padding-bottom:6px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--g),#000 calc(100% - var(--g)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--g),#000 calc(100% - var(--g)),transparent 100%)}
.e-row .e-card{flex:0 0 270px}
.e-cats{margin-right:0;padding-right:0}
@media (max-width:899px){.e-cats{margin-right:calc((var(--vw) - 100%) / -2);padding-right:calc((var(--vw) - 100%) / 2)}}
.e-grid{gap:12px}
@media (min-width:900px){
  .e-tools{top:0;margin-left:calc((100% - var(--vw)) / 2);margin-right:calc((100% - var(--vw)) / 2);padding:14px calc((var(--vw) - 100%) / 2) 16px}
  .e-cats{flex-wrap:wrap;justify-content:flex-start;gap:8px;flex:1;min-width:0}
  .e-band{height:380px}
  .e-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
  .e-row .e-card{flex-basis:300px}
}
@media (min-width:900px){.e-search{width:260px}.e-cat{padding:0 12px}.e-tools{gap:14px}}
.e-row{scroll-padding-left:max(var(--g),(var(--vw) - 1440px) / 2 + var(--g));scroll-padding-right:max(var(--g),(var(--vw) - 1440px) / 2 + var(--g))}