/* Home hero, launchpad slides: one glass card per slide (launch, HYPE Wars, bridge) over field.js's scenes.
 * The card colours follow each slide's field: mint, violet, deep blue. field.js prepends a .panel-frost canvas. */
.launch-scene,.wars-scene,.bridge-scene{z-index:2;display:flex;align-items:center;justify-content:center}
.hero-card{position:relative;width:100%;max-width:360px;padding:18px 20px;border:1px solid #92cec055;border-radius:12px;background:linear-gradient(125deg,rgba(56,83,79,.46),rgba(11,31,28,.64));-webkit-backdrop-filter:blur(30px) saturate(125%);backdrop-filter:blur(30px) saturate(125%);box-shadow:0 18px 42px #0004,inset 0 1px 0 #d4f4eb1c;overflow:hidden;color:#e6f6f2}
.hero-card>:not(.panel-frost){position:relative;z-index:1}
@media(min-width:701px){.launch-scene .launch-card{translate:var(--launch-card-shift,0px) 0}}

.hero-card-head{display:flex;align-items:center;gap:12px}
.hero-card-head>div{flex:1;min-width:0;display:grid;gap:3px}
.hero-card-head strong{font:700 17px Manrope,sans-serif;letter-spacing:-.02em;color:#f2fffb}
.hero-card-head>div>span{font-size:11px;color:#b5cbc6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-card-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid #a6d5ce40;border-radius:999px;background:#06121040;font-size:10px;font-weight:700;letter-spacing:.04em;color:#d9f8f0;white-space:nowrap}
.hero-card-chip img{width:14px;height:14px}
.hero-card-foot{display:flex;align-items:center;gap:9px;margin:14px -20px -18px;padding:12px 20px;border-top:1px solid #bacfcc2b;background:#06121026;font-size:11px;color:#cfe5e0}
.hero-card-foot svg{width:16px;height:16px;flex-shrink:0;color:#b6f9e8}

/* Launch: the token on its bonding curve, the graduation point and the locked pool it graduates into. */
.launch-mark,.wars-mark{display:grid;place-items:center;width:42px;height:42px;flex-shrink:0;border:1px solid #a6d5ce45;border-radius:11px;background:linear-gradient(135deg,#263c39,#142724)}
.launch-mark img{width:28px;height:auto}
.launch-chart{position:relative;height:84px;margin-top:16px}
.launch-chart svg{display:block;width:100%;height:100%;overflow:visible}
.launch-target{stroke:#b6f9e8;stroke-opacity:.42;stroke-width:1;stroke-dasharray:4 5;vector-effect:non-scaling-stroke}
.launch-line{stroke:#c6fff0;stroke-width:2;vector-effect:non-scaling-stroke}
.launch-point{position:absolute;right:calc(1.25% - 6px);top:calc(15.2% - 6px);width:12px;height:12px;border-radius:50%;background:#c6fff0;box-shadow:0 0 0 5px #9ff8e22a,0 0 18px #9ff8e2aa}
.launch-point:after{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid #c6fff0;animation:launch-point-ring 2.4s ease-out infinite}
@keyframes launch-point-ring{0%{transform:scale(1);opacity:.75}100%{transform:scale(2.8);opacity:0}}
.launch-caption{display:flex;justify-content:space-between;margin-top:8px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#9fb9b4}

/* HYPE Wars: ranked rows without names (the real standings live on hype-wars.html) and the published score weights. */
.wars-card{border-color:#daa1e05c;background:linear-gradient(120deg,#64467288,#27162ecc);box-shadow:0 18px 42px #08000e55,inset 0 1px #ffeaff19}
.wars-card .hero-card-head>div>span{color:#d8c3e2}
.wars-card .hero-card-chip{border-color:#e8bce855;background:#1b102844;color:#f6e6ff}
.wars-mark{border-color:#e8bce860;background:linear-gradient(135deg,#4a2f58,#24152b);color:#f2d4ff}
.wars-mark svg{width:22px;height:22px}
.wars-rows{display:grid;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.wars-rows li{display:grid;grid-template-columns:20px 1fr;align-items:center;gap:12px;height:20px}
/* Gold, silver and bronze medals on violet ribbons for the top three; fourth place gets a plain glass badge. */
.wars-rows span{position:relative;display:grid;place-items:center;width:20px;height:20px;border:1px solid #f0c8ff45;border-radius:50%;background:#ffffff0d;font:700 10px/1 Manrope,sans-serif;color:#e9d3f3}
.wars-rows li:nth-child(-n+3) span{border-color:var(--medal-edge);background:radial-gradient(circle at 34% 28%,var(--medal-hi),var(--medal) 48%,var(--medal-lo));box-shadow:inset 0 0 0 2px #ffffff2e,0 2px 6px #0008;color:var(--medal-ink)}
.wars-rows li:nth-child(-n+3) span:before,.wars-rows li:nth-child(-n+3) span:after{content:'';position:absolute;z-index:-1;top:-6px;width:6px;height:10px;background:linear-gradient(#e2b4f5,#8b56b8)}
.wars-rows li:nth-child(-n+3) span:before{left:3px;rotate:-22deg}
.wars-rows li:nth-child(-n+3) span:after{right:3px;rotate:22deg}
.wars-rows li:nth-child(1) span{--medal-hi:#fff6cf;--medal:#efc451;--medal-lo:#8f5c0e;--medal-edge:#ffe08a;--medal-ink:#3f2904}
.wars-rows li:nth-child(2) span{--medal-hi:#fff;--medal:#d3d8e3;--medal-lo:#666e80;--medal-edge:#eef2f8;--medal-ink:#2a303c}
.wars-rows li:nth-child(3) span{--medal-hi:#ffdfc2;--medal:#d18c57;--medal-lo:#6c3818;--medal-edge:#f2b98a;--medal-ink:#391c0a}
.wars-rows b{height:8px;border-radius:4px;background:linear-gradient(90deg,#f0bdf5,#c08ae2 60%,#a7f5e3)}
.wars-rows li:nth-child(1) b{width:92%;opacity:.9}
.wars-rows li:nth-child(2) b{width:74%;opacity:.72}
.wars-rows li:nth-child(3) b{width:57%;opacity:.58}
.wars-rows li:nth-child(4) b{width:41%;opacity:.46}
.wars-score{display:grid;grid-template-columns:repeat(3,1fr);margin:14px -20px -18px;border-top:1px solid #e8bce830;background:#1b10283d}
.wars-score span{display:grid;gap:2px;padding:10px 0;text-align:center;font-size:10px;color:#d8c3e2}
.wars-score span+span{border-left:1px solid #e8bce826}
.wars-score b{font:700 13px Manrope,sans-serif;color:#fbefff}

/* Bridge: the funding page's swap card in brief, what is sent on HyperEVM and what arrives on Elysium. */
.bridge-card{border-color:#779ed44d;background:linear-gradient(120deg,#20375b66,#0b1730bb);box-shadow:0 18px 42px #06162155,inset 0 1px #d2ecff1a}
.bridge-leg{display:grid;gap:5px;padding:9px 14px;border:1px solid #9dc3e033;border-radius:10px;background:#77b3e10f}
.bridge-leg small{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#a9c4d8}
.bridge-leg>div{display:flex;align-items:center;gap:10px}
.bridge-leg img{width:26px;height:26px}
.bridge-leg strong{font:700 18px Manrope,sans-serif;color:#eef7ff}
.bridge-leg span{margin-left:auto;padding:4px 10px;border:1px solid #9dc3e040;border-radius:999px;font-size:11px;color:#c5d9e8;white-space:nowrap}
.bridge-card .bridge-turn{z-index:2;display:grid;place-items:center;width:30px;height:30px;margin:-9px auto;border:1px solid #9dc3e055;border-radius:50%;background:#10223f;color:#cfe7ff}
.bridge-turn svg{width:16px;height:16px}
.bridge-card .hero-card-foot{margin-top:10px;border-color:#9dc3e033;background:#77b3e10a;color:#c5d9e8}
.bridge-card .hero-card-foot svg{color:#a7d0ef}
/* Bridge orbs (field.js): HYPE leaves HyperEVM along the left lanes (the HYPE mark on mint glass) and comes out on Elysium
   along the right ones (the funding page's Elysium mark on blue glass). field.js fits this layer over the canvas and moves
   each orb with transform and opacity only; the halo breathes in place and holds still under reduced motion. */
.field-orbs{position:absolute;pointer-events:none;overflow:hidden;contain:strict}
.field-orb{--orb:38px;--glow:#97fce4;position:absolute;left:0;top:0;display:grid;place-items:center;width:var(--orb);height:var(--orb);margin:calc(var(--orb)/-2) 0 0 calc(var(--orb)/-2);opacity:0;will-change:transform,opacity}
.field-orb:before,.field-orb:after{content:'';position:absolute;border-radius:50%}
.field-orb:before{inset:-16px;background:radial-gradient(closest-side,color-mix(in srgb,var(--glow) 36%,transparent),color-mix(in srgb,var(--glow) 12%,transparent) 60%,transparent);animation:field-orb-breathe 4.2s ease-in-out infinite}
.field-orb:after{inset:0;border:1px solid #adf0df5c;background:linear-gradient(135deg,#4b6662,#1b302d 42%,#091715);box-shadow:0 7px 16px #00000080,inset 1px 1px 0 #d9fff42e}
.field-orb>*{position:relative;z-index:1}
.field-orb img{width:64%;height:64%}
.field-orb.elysium{--glow:#8ff1f1}
.field-orb.elysium:after{border-color:#8ec0e75c;background:linear-gradient(135deg,#365c70,#132f40 42%,#091923);box-shadow:0 7px 16px #00000080,inset 1px 1px 0 #d3f7ff2e}
.field-orb i{display:grid;place-items:center;width:64%;height:64%;border-radius:50%;background:linear-gradient(140deg,#8ff1f1,#33b4cf);box-shadow:inset 0 0 0 1px #2b9ab4aa}
.field-orb i img{width:88%;height:88%}
.field-orb:nth-child(3n+2):before{animation-delay:-1.4s}
.field-orb:nth-child(3n):before{animation-delay:-2.8s}
@keyframes field-orb-breathe{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}

@media(max-width:1100px) and (min-width:701px){.hero-card{padding:16px 16px}.hero-card-foot,.wars-score{margin-left:-16px;margin-right:-16px;margin-bottom:-16px}.hero-card-foot{padding-left:16px;padding-right:16px}}
@media(max-width:700px){
 .hero-slider .hero-art{height:200px}
 .hero-card{width:92%;padding:14px 16px}
 .hero-card-head{gap:10px}.hero-card-head strong{font-size:15px}
 .launch-mark,.wars-mark{width:36px;height:36px;border-radius:9px}.launch-mark img{width:24px}
 .launch-chart{height:52px;margin-top:10px}
 .launch-caption{margin-top:6px}
 .hero-card-foot{margin:10px -16px -14px;padding:10px 16px}
 .wars-rows{gap:7px;margin-top:10px}.wars-rows li{grid-template-columns:18px 1fr;height:18px}.wars-rows span{width:18px;height:18px;font-size:9px}.wars-rows li:nth-child(4){display:none}
 .wars-score{margin:10px -16px -14px}.wars-score span{padding:8px 0}
 .bridge-leg{gap:3px;padding:7px 12px}.bridge-leg small{font-size:9px}.bridge-leg img{width:22px;height:22px}.bridge-leg strong{font-size:15px}.bridge-leg span{padding:3px 8px;font-size:10px}
 .bridge-card .bridge-turn{width:26px;height:26px;margin:-8px auto}.bridge-card .hero-card-foot{margin-top:8px;padding-top:8px;padding-bottom:8px}
}
/* The launch copy runs a line longer than the stock copy it replaced: taller rows, and smaller headlines on narrow tablets. */
@media(min-width:701px){.hero-slider{grid-template-rows:260px 30px}.hero-slider .hero-art{height:260px}}
@media(min-width:701px) and (max-width:1100px){.hero-slider .hero-copy h1,.hero-slider .hero-copy h2{font-size:clamp(26px,3.6vw,40px)}}
@media(max-width:700px){.hero-slider{grid-template-rows:214px 206px 32px}}
@media(max-width:600px){.hero-slider{grid-template-rows:214px 206px 44px}}
@media(max-width:360px){.hero-slider{grid-template-rows:232px 200px 44px}.hero-slider .hero-copy h1,.hero-slider .hero-copy h2{font-size:24px}.bridge-leg small{display:none}}
@media(max-width:600px){.field-orb{--orb:28px}.field-orb:before{inset:-11px}}
@media(prefers-reduced-motion:reduce){.launch-point:after{animation:none;opacity:0}.field-orb:before{animation:none;opacity:.8}}

/* The narrowest phones: the card subtitle wraps instead of being cut short. */
@media(max-width:360px){.hero-card-head>div>span{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}}
/* Start trading on Elysium: the three set-up steps on the home page (wallet and RPC, HYPE, a project). */
.get-started{margin:34px 0 8px;padding:26px 28px 24px;border:1px solid #3f565266;border-radius:12px;background:linear-gradient(120deg,#1d302d99,#121c1bcc)}.get-started-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}.get-started-head h2{margin:0;font-size:clamp(22px,2.4vw,30px);color:#eafaf6}.get-started-head p{margin:0;max-width:520px;color:#b5c7c5;font-size:14px;line-height:1.6}.get-started-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0 0;padding:0}.get-started-steps li{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:10px;background:#0f1a19aa;border:1px solid #2e4441}.get-started-steps .step-number{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#bdf7e71a;color:#bdf7e7;font-weight:750;font-size:13px}.get-started-steps h3{margin:4px 0 0;font-size:16px;color:#e6f5f1}.get-started-steps p{margin:0;flex:1;color:#b5c7c5;font-size:13px;line-height:1.6}.get-started code{font-size:12px;padding:1px 5px;border-radius:5px;background:#ffffff0d;color:#cff7ec}.get-started-action{align-self:flex-start;margin-top:8px;display:inline-flex;align-items:center;min-height:40px;padding:9px 15px;border-radius:9px;border:1px solid #79c9b566;background:transparent;color:#d9f6ee;font:inherit;font-size:13px;font-weight:700;text-decoration:none;cursor:pointer}.get-started-action:hover{border-color:#bdf7e7;color:#fff}.get-started-action.primary{background:#bdf7e7;border-color:#bdf7e7;color:#132724}.get-started-action.primary:hover{background:#d3fbf0;color:#0d1f1c}.get-started-action:focus-visible{outline:2px solid #b4f3e2;outline-offset:2px}.get-started-note{margin:16px 0 0;color:#93aaa6;font-size:12.5px;line-height:1.6}.get-started-note a{color:#bdf7e7}
@media(max-width:900px){.get-started-steps{grid-template-columns:1fr}.get-started{padding:22px 18px}}
/* The hero copy rows fit the longest slide copy (the Launch slide's facts), on desktop and on phones. */
@media(min-width:701px){.hero-slider{grid-template-rows:276px 30px}.hero-slider .hero-art{height:276px}}
@media(max-width:700px){.hero-slider{grid-template-rows:236px 206px 32px}}
@media(max-width:600px){.hero-slider{grid-template-rows:236px 206px 44px}}
@media(max-width:360px){.hero-slider{grid-template-rows:262px 200px 44px}}
@media(max-width:700px){.hero-card-foot{font-size:12px}}

/* Launch facts: the numbers behind every launch, in the product shortcuts' glass. */
.launch-facts{margin:14px 0 0}
.launch-facts ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;border:1px solid #3f565244;border-radius:8px;overflow:hidden;background:#3f565244}
.launch-facts li{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;padding:13px 16px;background:linear-gradient(120deg,#1d2f2c,#141e1d)}
.launch-facts strong{font:750 15px/1.25 Manrope,sans-serif;letter-spacing:-.01em;color:#e6f7f2}
.launch-facts span{font-size:12px;line-height:1.35;color:#a6b8b5}
@media(max-width:1100px){.launch-facts ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Phones: one row that scrolls sideways, like the ticker, instead of a block of cells. */
@media(max-width:700px){
 .launch-facts{margin-top:10px}
 .launch-facts ul{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}
 .launch-facts ul::-webkit-scrollbar{display:none}
 .launch-facts li{flex:0 0 auto;width:136px;padding:10px 12px;justify-content:flex-start;scroll-snap-align:start}
 .launch-facts strong{font-size:14px;white-space:nowrap}
}

/* Phones: the set-up steps side by side in a row that swipes (the next card peeks in), less than half their stacked height. */
@media(max-width:700px){
 .get-started{margin-top:22px;padding:18px 16px}
 .get-started-head{gap:8px}.get-started-head p{font-size:13px;line-height:1.5}
 .get-started-steps{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;gap:10px;margin:14px -16px 0;padding:0 16px 4px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none}
 .get-started-steps::-webkit-scrollbar{display:none}
 .get-started-steps li{gap:6px;padding:14px;scroll-snap-align:start}
 .get-started-steps h3{margin:2px 0 0;font-size:15px;line-height:1.3}
 .get-started-steps p{font-size:12px;line-height:1.5}
 .get-started-action{margin-top:6px;min-height:42px;padding:8px 13px;font-size:12px}
 .get-started-note{margin-top:12px;font-size:12px;line-height:1.5}
}

/* About to graduate: up to six launches on the curve, closest to graduation first (direct-discover.mjs hides the strip
   while none is on the curve). One row of six on a wide screen; narrower, the row scrolls sideways inside itself and
   the next item peeks in, never the page. */
.graduation-strip{margin:0 0 34px;min-width:0}
.graduation-strip-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin-bottom:14px}
.graduation-strip-heading h2{margin:0;font:700 22px/1.25 Manrope,sans-serif;letter-spacing:-.025em}
.graduation-strip-heading p{margin:0;color:var(--muted);font-size:13px}
.graduation-strip-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.strip-item{min-width:0}
.strip-open{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-areas:'mark name' 'bar bar' 'foot foot';align-items:center;gap:11px 10px;height:100%;box-sizing:border-box;padding:12px;border:1px solid #46605c55;border-radius:12px;background:linear-gradient(160deg,#20302eb3,#101b1a99);color:#eef7f4;text-decoration:none;transition:border-color .2s,background .2s}
.strip-open:hover{border-color:#73b5a4;background:linear-gradient(150deg,#293b38,#152523)}
/* The focus ring sits inside the item: the row scrolls sideways and would clip a ring drawn outside it. */
.strip-open:focus-visible{outline:2px solid #b1f7e4;outline-offset:-2px}
.strip-item.is-ready .strip-open{border-color:#5b998999}
.strip-mark{grid-area:mark;width:40px;height:40px;border-radius:9px;overflow:hidden;background:radial-gradient(ellipse at 45% 30%,#415854,#11201e 75%)}
.strip-mark .project-mark{--project-mark-size:40px;border-radius:0}
.strip-identity{grid-area:name;display:grid;gap:2px;min-width:0}
.strip-identity strong,.strip-identity span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:isolate}
.strip-identity strong{font:750 14px/1.3 Manrope,sans-serif;letter-spacing:-.02em}
.strip-identity span{font-size:12px;line-height:1.3;color:#afc3c0}
.strip-progress{grid-area:bar;display:flex;align-items:center;gap:9px;min-width:0}
.strip-track{flex:1;min-width:0;height:6px;border-radius:4px;overflow:hidden;background:#2c3d3b}
.strip-fill{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8db9db,#b9f4e4);transform-origin:left center;transform:scaleX(var(--progress,0))}
.strip-progress b{flex-shrink:0;font-size:12px;font-weight:700;color:#b9f4e4;font-variant-numeric:tabular-nums}
.strip-foot{grid-area:foot;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 8px;min-width:0;min-height:24px;font-size:12px;color:#afc3c0}
.strip-cap{white-space:nowrap}
.strip-cap strong{font-size:14px;font-weight:750;color:#eef7f4;font-variant-numeric:tabular-nums}
.strip-ready{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 7px;border:1px solid #5b9989;border-radius:6px;background:#243632;color:#cbf5e9;font-size:12px;font-weight:650}
@media(max-width:1100px){
 .graduation-strip-list{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:6px}
 .strip-item{flex:0 0 220px;scroll-snap-align:start}
}
@media(max-width:700px){
 .graduation-strip{margin-bottom:26px}
 .graduation-strip-heading{margin-bottom:12px}
 .graduation-strip-heading h2{font-size:20px}
 .graduation-strip-heading p{font-size:12px}
 .graduation-strip-list{gap:10px;padding-bottom:2px;scrollbar-width:none}
 .graduation-strip-list::-webkit-scrollbar{display:none}
 .strip-item{flex-basis:min(72%,240px)}
}

/* Explore: three tabs, each with its count (All, On the curve, Trading in pools); a hidden tab (Multi-pool before any
   multi-pool launch) and a sort order the tab does not offer (Closest to graduation outside the curve tab) take no
   room. On phones the tabs share the toolbar's width with each count under its name, so the three fit even a 320px
   screen; should they ever not fit (with Multi-pool), they scroll and direct-discover.mjs keeps the selected tab in view. */
.explore-toolbar .tabs button[hidden],.sort-option[hidden]{display:none}
.explore-toolbar .tabs{scroll-behavior:smooth}
.explore-toolbar .tab-count{margin-left:2px;font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.explore-toolbar .tabs{scroll-behavior:auto}}
@media(max-width:700px){
 .explore-toolbar .tabs{gap:2px}
 .explore-toolbar .tabs button{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:7px 6px;font-size:12px;line-height:1.2}
 .explore-toolbar .tab-count{margin-left:0;font-size:12px}
}

/* Discover cards on phones: no text under 12px, and the price change stays on the market cap's line (the MC label moves under the figure). */
@media(max-width:700px){
 #discover .compact-card .token-symbol,#discover .compact-card .price-change,#discover .compact-card .metric-label,#discover .compact-card .corner-status,
 #discover .compact-card .pool-context>strong,#discover .compact-card .creation-age,#discover .compact-card .copy-contract,#discover .compact-card .card-graduation-label,
 #discover .compact-card .card-pool-detail,#discover .compact-card .launch-official-badge{font-size:12px}
 #discover .compact-card .card-valuation{flex-wrap:nowrap;align-items:baseline;gap:6px}
 #discover .compact-card .compact-cap{min-width:0;flex-direction:column;align-items:flex-start;gap:1px}#discover .compact-card .compact-cap strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #discover .compact-card .card-valuation strong{font-size:17px}
 #discover .compact-card .price-change{flex-shrink:0}
 #discover .compact-card .pool-context>strong{white-space:normal;line-height:1.35}
}

/* How it works: each card's "Explore" row sits on the card's bottom edge, whatever the copy above it. */
.mechanism{display:flex;flex-direction:column}
.mechanism-copy{flex:1;display:flex;flex-direction:column}
.mechanism-copy>details{margin-top:auto}
@media(max-width:700px){.diagram-caption,.diagram-footer{font-size:12px}}
/* Five stock logos in one row, without an empty cell. */
.universe-logos{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:700px){.universe-logos>div{padding:18px 4px;gap:10px}.universe-logos img{width:34px;height:34px}.universe-logos span{font-size:12px;letter-spacing:.04em}}

/* A launch that really graduated: its card's border carries a slowly turning gradient (direct-discover.mjs adds
 * .is-graduated; the user, 4 Nov). Only the angle of a conic gradient turns, inside the 1.5px ring; still under
 * reduced motion. */
@property --graduated-turn{syntax:'<angle>';inherits:false;initial-value:0deg}
.market-card.is-graduated{position:relative;border-color:transparent}
.market-card.is-graduated::after{content:"";position:absolute;inset:0;z-index:3;padding:1.5px;border-radius:inherit;pointer-events:none;background:conic-gradient(from var(--graduated-turn),#7ee2b8,#8fc3ff 30%,#c9a7ff 55%,#7ee2b8 80%,#7ee2b8);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:graduated-turn 6s linear infinite}
@keyframes graduated-turn{to{--graduated-turn:360deg}}
@media(prefers-reduced-motion:reduce){.market-card.is-graduated::after{animation:none}}

/* "Start trading on Elysium." as a one-time pop-up (get-started-popup.mjs; the user, 4 Nov). */
.get-started-dialog{position:fixed;inset:0;width:min(980px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 40px);margin:auto;overflow:auto;overscroll-behavior:contain;padding:30px 30px 26px;color:inherit;border-color:#56807a88;background:linear-gradient(150deg,#1b2e2b,#0f1a19 70%);box-shadow:0 40px 80px -30px #000}
.get-started-dialog[open]{animation:get-started-in .35s cubic-bezier(.2,.8,.2,1) both}
.get-started-dialog::backdrop{background:#030a09b8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.get-started-dialog .get-started-head{padding-right:40px}
.get-started-close{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #46605c;border-radius:50%;background:#132522;color:#d6ece7;cursor:pointer}
.get-started-close:hover{background:#1f3633}
.get-started-close:focus-visible{outline:2px solid var(--accent,#baf1e2);outline-offset:2px}
.get-started-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@keyframes get-started-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:600px){.get-started-dialog{width:calc(100vw - 24px);padding:22px 16px 18px}.get-started-dialog .get-started-head h2{font-size:22px}}
@media(prefers-reduced-motion:reduce){.get-started-dialog[open]{animation:none}}