/* ===========================================================================
   SwapLords 3 — "Selene"

   An exchange run from a lunar station. Graphite and moonlight, a planet
   rising behind the console, orbital paths and an asset belt. Everything here
   is drawn in CSS and SVG: no photographs, no stock renders, nothing fetched
   from anywhere. A page that loads its atmosphere from a third party is a page
   that breaks when that third party does, and this one has to work on an
   operator's own domain with no outside requests at all.

   THE RESTRAINT, because this direction goes wrong when it is loud:
   - ONE cold accent. Lunar ice (--ice). Everything else is metal and shadow.
   - SILVER IS THE MATERIAL. Headings, the mark and the rules are a brushed
     metal gradient, not a colour. Gold belongs to SwapLords 2; this is silver.
   - Neon is used as LIGHT, never as fill: rims, halos and hairlines, so the
     page reads lit rather than painted.
   - No more than two things move at once in any viewport.

   The operator's accent still owns every interactive element, as in every
   theme here. Ice and silver are the theme's own tones.
   =========================================================================== */

:root{
  --bg:#0a0b10; --bg2:#101219; --bg3:#181b24;
  --ln:#1e2230; --ln2:#2b3142;
  --tx:#eef2f8; --mu:#9aa5b8; --fa:#646e80;
  --ok:#4ade80; --wa:#fbbf24; --no:#fb7185;

  /* the theme's own tones */
  --ice:#9fe8ff;                        /* lunar ice: the single neon */
  --ice-deep:#2d8fb5;
  --ice-line:rgba(159,232,255,.26);
  --ice-glow:rgba(159,232,255,.11);
  --moon:#e8edf5;                       /* moonlight */
  --silver:linear-gradient(170deg,#ffffff 6%,#c9d2e0 38%,#8e99ab 62%,#e6ecf6 88%);
  --glass:rgba(16,19,27,.68);
}

body{background:var(--bg);color:var(--tx);
  font-family:'PBody',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'PDisplay','PBody',sans-serif;letter-spacing:-.035em}
a{color:var(--ice)}
a:hover{color:#c9f3ff}

/* Headings are struck in metal rather than coloured. The sheen is a slow sweep
   across the gradient, and it stops entirely for reduced motion via base.css. */
.s3-metal{background:var(--silver);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:s3-sheen 9s ease-in-out infinite}
@keyframes s3-sheen{0%,100%{background-position:0% 0}50%{background-position:100% 0}}

/* ---------------------------------------------------------------------------
   The sky. One fixed field behind the whole document so the stars do not
   restart at every section seam.
   --------------------------------------------------------------------------- */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1200px 700px at 78% -10%,rgba(45,143,181,.16),transparent 62%),
    radial-gradient(900px 600px at 10% 8%,rgba(90,70,140,.12),transparent 64%),
    linear-gradient(180deg,#090a0f,#0a0b10 60%)}
/* three star layers, different sizes and speeds, so the field has depth */
body::after{content:'';position:fixed;inset:-10%;z-index:0;pointer-events:none;opacity:.85;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 68% 11%,#d7ecff,transparent),
    radial-gradient(1.7px 1.7px at 33% 56%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 86% 42%,#bcdcff,transparent),
    radial-gradient(1.4px 1.4px at 22% 74%,#eaf4ff,transparent),
    radial-gradient(1px 1px at 55% 30%,#a8c9ea,transparent),
    radial-gradient(1.6px 1.6px at 6% 48%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 92% 70%,#d7ecff,transparent),
    radial-gradient(1px 1px at 44% 88%,#9fb7d4,transparent),
    radial-gradient(1.3px 1.3px at 74% 84%,#eaf4ff,transparent);
  animation:s3-sky 160s linear infinite}
@keyframes s3-sky{from{transform:translate3d(0,0,0)}to{transform:translate3d(-70px,36px,0)}}
body>*{position:relative;z-index:1}

/* ---------------------------------------------------------------------------
   Header: a thin instrument bar, metal wordmark, ice underline on the live tab.
   --------------------------------------------------------------------------- */
.p-head{background:rgba(10,11,16,.72);backdrop-filter:blur(20px) saturate(1.2);
  border-bottom:1px solid var(--ln)}
.p-brand{color:var(--tx);font-family:'PDisplay',sans-serif;font-weight:700;letter-spacing:-.045em}
.p-brand-n{background:var(--silver);-webkit-background-clip:text;background-clip:text;color:transparent}
.p-logo{border-radius:50%;background:linear-gradient(150deg,#f4f7fc,#9aa6ba 55%,#5c6578);color:#0b0d12;
  box-shadow:0 0 0 1px rgba(255,255,255,.18),0 10px 26px -12px rgba(159,232,255,.5)}
.p-nav a{color:var(--mu);font-weight:600;font-size:.87rem;position:relative}
.p-nav a:hover{color:var(--tx)}
.p-nav a.on{color:var(--tx)}
.p-nav a.on::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:1px;
  background:linear-gradient(90deg,transparent,var(--ice),transparent);
  box-shadow:0 0 10px var(--ice)}
.p-nav-cta,.p-cta,.p-nav a.p-nav-cta{border-radius:100px;font-weight:700;letter-spacing:.02em;
  color:#06212b;background:linear-gradient(135deg,#dff6ff,var(--ice) 45%,var(--a));
  box-shadow:0 12px 30px -14px var(--ice),inset 0 1px 0 rgba(255,255,255,.5)}
.p-cta:hover{filter:brightness(1.06)}
.p-burger{border-color:var(--ln2);border-radius:100px;width:36px;height:36px}
.p-burger span{background:var(--tx)}
.p-lang summary{color:var(--mu);border:1px solid var(--ln);border-radius:100px}
.p-lang summary:hover{color:var(--tx);border-color:var(--ice-line)}
.p-lang-pop{background:#0e1117;border:1px solid var(--ln2);border-radius:14px;
  box-shadow:0 34px 80px -34px #000}
.p-lang-pop a{color:var(--mu);border-radius:8px}
.p-lang-pop a:hover,.p-lang-pop a.on{background:var(--bg3);color:var(--tx)}
@media(max-width:860px){.p-nav{background:#0d0f15;border-color:var(--ln)}}

/* ---------------------------------------------------------------------------
   THE HERO. A body rises at the lower right, lit from the upper left, with the
   console in front of it and orbital paths crossing behind.
   --------------------------------------------------------------------------- */
.x-wrap{position:relative;overflow:hidden;padding-top:clamp(2rem,5vw,4rem);
  padding-bottom:clamp(2rem,5vw,4rem)}
/* The reading scrim. Everything behind the hero is decoration and decoration
   does not get to win against text, so the left half keeps a dark wash over
   whatever the sky and the body are doing. */
.x-wrap .s3-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,11,16,.95) 0%,rgba(10,11,16,.9) 30%,rgba(10,11,16,.62) 46%,rgba(10,11,16,.2) 60%,transparent 72%)}
[dir=rtl] .x-wrap .s3-scrim{transform:scaleX(-1)}

/* the body itself: a sphere shaded by one light source, maria and craters laid
   in as soft radial gradients, a terminator shadow, and an atmosphere rim */
.s3-moon{position:absolute;right:-9%;bottom:-46%;width:min(1180px,94vw);aspect-ratio:1;
  border-radius:50%;pointer-events:none;z-index:0;
  background:
    /* craters and maria, lightest first */
    radial-gradient(circle at 36% 30%,rgba(255,255,255,.1),transparent 7%),
    radial-gradient(circle at 58% 22%,rgba(10,12,18,.16),transparent 9%),
    radial-gradient(circle at 30% 52%,rgba(10,12,18,.20),transparent 13%),
    radial-gradient(circle at 48% 62%,rgba(10,12,18,.14),transparent 10%),
    radial-gradient(circle at 66% 48%,rgba(10,12,18,.12),transparent 8%),
    radial-gradient(circle at 22% 38%,rgba(10,12,18,.12),transparent 6%),
    radial-gradient(circle at 44% 40%,rgba(255,255,255,.07),transparent 5%),
    radial-gradient(circle at 70% 68%,rgba(10,12,18,.10),transparent 7%),
    /* the lit limb */
    radial-gradient(circle at 32% 24%,#dfe6f1 0%,#b3bdcd 22%,#7c8698 46%,#3a4252 68%,#171b24 86%,#0c0e14 100%);
  box-shadow:
    0 0 170px 30px rgba(159,232,255,.09),
    inset -46px -34px 130px rgba(6,8,12,.8);
  /* it is scenery, not a subject: it must never out-shout the words in front
     of it, which is what the first pass did to the lede and the stat rail */
  opacity:.9}
/* the atmosphere rim: a hairline of ice on the lit edge only */
.s3-moon::after{content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 32% 24%,transparent 60%,rgba(159,232,255,.26) 77%,transparent 88%);
  box-shadow:inset 0 0 70px rgba(159,232,255,.10)}

/* orbital paths, drawn as ellipses in perspective and turning very slowly */
.s3-orbits{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.s3-orbit{position:absolute;left:62%;top:62%;border:1px solid rgba(159,232,255,.13);
  border-radius:50%;transform:translate(-50%,-50%) rotateX(74deg) rotate(0deg);
  transform-style:preserve-3d}
.s3-orbit-1{width:860px;height:860px;animation:s3-spin 90s linear infinite}
.s3-orbit-2{width:1180px;height:1180px;border-color:rgba(159,232,255,.09);animation:s3-spin 150s linear infinite reverse}
.s3-orbit-3{width:1500px;height:1500px;border-color:rgba(159,232,255,.06);animation:s3-spin 220s linear infinite}
@keyframes s3-spin{from{transform:translate(-50%,-50%) rotateX(74deg) rotate(0deg)}
                   to{transform:translate(-50%,-50%) rotateX(74deg) rotate(360deg)}}
/* a marker riding each path, so the motion is readable rather than abstract */
.s3-orbit i{position:absolute;top:-4px;left:50%;width:7px;height:7px;margin-left:-3.5px;
  border-radius:50%;background:var(--ice);box-shadow:0 0 12px var(--ice),0 0 26px rgba(159,232,255,.5)}
.s3-orbit-2 i{width:5px;height:5px;margin-left:-2.5px;opacity:.75}
.s3-orbit-3 i{width:4px;height:4px;margin-left:-2px;opacity:.5}

.x-wrap .wrap{position:relative;z-index:2}
.x-grid{grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:clamp(2rem,5vw,4.4rem);align-items:center}

.x-badge{border-radius:100px;border-color:var(--ln2);background:rgba(159,232,255,.06);
  color:var(--ice);font-size:.68rem;letter-spacing:.22em;padding:.45rem .9rem}
.x-copy h1{font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.03;letter-spacing:-.04em;max-width:17ch}
.x-claims{color:var(--mu);font-size:.7rem;letter-spacing:.22em;gap:.3rem 1rem;margin:1.2rem 0 1.1rem}
.x-claims span{color:var(--ice)}
.x-claims span+span::before{color:var(--ln2);opacity:1}
.x-copy .lede{color:var(--mu);font-size:1.02rem;max-width:44ch;line-height:1.72}

/* the readout rail: hairline cells, silver figures */
.x-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:2rem;gap:0;
  border:1px solid var(--ln2);border-radius:100px;background:rgba(10,12,18,.82);overflow:hidden;
  backdrop-filter:blur(10px);box-shadow:0 20px 50px -30px #000}
.x-stats div{border:0;border-inline-start:1px solid var(--ln);padding:.9rem 1.1rem;min-width:0;text-align:center}
.x-stats div:first-child{border-inline-start:0}
.x-stats div::before{display:none}
.x-stats dt{font-family:'PMono',monospace;font-variant-numeric:tabular-nums;font-size:1.35rem;font-weight:600;
  background:var(--silver);-webkit-background-clip:text;background-clip:text;color:transparent}
.x-stats dd{color:var(--fa);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;margin-top:.25rem}

/* ---------------------------------------------------------------------------
   THE CONSOLE. A pane of glass with an iridescent rim, as if cut from the same
   material as everything else on the station.
   --------------------------------------------------------------------------- */
.x-box{position:relative;border-radius:22px;border:1px solid transparent;
  background:
    linear-gradient(170deg,var(--glass),rgba(9,11,16,.9)) padding-box,
    conic-gradient(from 210deg at 50% 50%,
      rgba(159,232,255,.5),rgba(255,255,255,.22) 22%,rgba(139,92,246,.35) 45%,
      rgba(159,232,255,.14) 62%,rgba(255,255,255,.3) 82%,rgba(159,232,255,.5)) border-box;
  backdrop-filter:blur(26px) saturate(1.25);
  box-shadow:0 60px 120px -50px #000,inset 0 1px 0 rgba(255,255,255,.08)}
/* a soft pool of light under the glass, following the pointer when there is one */
.x-box::before{content:'';position:absolute;inset:1px;border-radius:21px;pointer-events:none;
  background:radial-gradient(440px 320px at var(--mx,50%) var(--my,0%),rgba(159,232,255,.10),transparent 70%)}
.x-inner{padding:clamp(1.15rem,2.3vw,1.7rem);position:relative;z-index:1}

.x-toggle{background:rgba(8,10,15,.6);border:1px solid var(--ln);border-radius:100px;padding:.24rem;gap:.2rem}
.x-toggle button{border-radius:100px;font-size:.76rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fa);padding:.5rem}
.x-toggle button[aria-pressed=true]{background:linear-gradient(170deg,#262c3a,#171b24);color:var(--tx);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}

.x-leg{background:rgba(8,10,15,.55);border:1px solid var(--ln);border-radius:16px;padding:1.05rem 1.1rem;
  transition:border-color .2s ease,background .2s ease}
.x-leg:focus-within{border-color:var(--ice-line);background:rgba(12,15,22,.78);
  box-shadow:0 0 0 4px var(--ice-glow)}
.x-leg label{color:var(--fa);font-size:.64rem;letter-spacing:.2em}
.x-amt{font-family:'PMono',monospace;font-variant-numeric:tabular-nums;
  font-size:1.6rem;font-weight:600;letter-spacing:-.03em;color:var(--moon)}
.x-amt::placeholder{color:#4a5365}
.x-usd{color:var(--mu);font-family:'PMono',monospace;font-size:.75rem;margin-top:.2rem;opacity:.8}

.x-pick{background:linear-gradient(170deg,#232835,#161a23);border:1px solid var(--ln2);
  border-radius:100px;color:var(--tx);padding:.42rem .8rem .42rem .45rem;font-weight:700;font-size:.93rem}
.x-pick:hover{border-color:var(--ice-line);box-shadow:0 0 0 4px var(--ice-glow)}
.x-pick .net{display:inline-block;margin-inline-start:.42rem;padding:.08rem .36rem;border-radius:100px;
  background:rgba(159,232,255,.12);color:var(--ice);font-size:.6rem;font-weight:700;opacity:1;
  letter-spacing:.06em;vertical-align:1px}

.x-flip{position:relative;margin:.65rem 0}
.x-flip::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,var(--ln2) 20%,var(--ln2) 80%,transparent)}
.x-flip button{position:relative;width:42px;height:42px;border-radius:50%;
  background:linear-gradient(170deg,#232835,#12151d);border-color:var(--ln2);color:var(--ice);font-size:1rem}
.x-flip button:hover{border-color:var(--ice);box-shadow:0 0 0 5px var(--ice-glow),0 0 24px -6px var(--ice)}

.x-rate{color:var(--mu);font-size:.8rem;font-family:'PMono',monospace}
/* while a quote is being fetched the rate line carries a small orbiting dot
   instead of a spinner, which is the only loading state on the page */
.x-rate:empty::after{content:'';display:inline-block;width:14px;height:14px;border-radius:50%;
  border:1px solid var(--ln2);border-top-color:var(--ice);animation:s3-orbit-load .9s linear infinite;
  vertical-align:-3px}
@keyframes s3-orbit-load{to{transform:rotate(360deg)}}

.x-field label{color:var(--tx);font-weight:600;font-size:.83rem}
.x-field input{background:rgba(8,10,15,.6);border:1px solid var(--ln2);border-radius:13px;
  color:var(--tx);padding:.85rem .95rem;font-family:'PMono',monospace;font-size:.85rem}
.x-field input::placeholder{color:#4a5365;font-family:'PBody',sans-serif}
.x-field input:focus{border-color:var(--ice);box-shadow:0 0 0 4px var(--ice-glow)}
.x-hint{color:var(--fa)}

.x-go{border-radius:100px;padding:1.1rem;font-size:.9rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#06212b;
  background:linear-gradient(135deg,#eafaff,var(--ice) 42%,var(--a));
  box-shadow:0 18px 40px -16px var(--ice),inset 0 1px 0 rgba(255,255,255,.55)}
.x-go:hover{filter:brightness(1.06)}
.x-note{color:var(--fa);text-align:center;font-size:.74rem;margin-top:.9rem}
.x-err{background:rgba(251,113,133,.08);border-color:rgba(251,113,133,.34);color:#fecdd3;border-radius:13px}

/* coin picker */
.cp-box{background:#0e1117;border:1px solid var(--ln2);border-radius:20px;box-shadow:0 44px 100px -44px #000}
.cp-search input{background:rgba(8,10,15,.6);border:1px solid var(--ln2);border-radius:100px;color:var(--tx)}
.cp-search input:focus{border-color:var(--ice)}
.cp-item{color:var(--tx);border-radius:12px}
.cp-item:hover{background:var(--bg3)}
.cp-item span{color:var(--mu)}
.cp-item b{color:var(--moon)}

/* ---------------------------------------------------------------------------
   Sections. Separated by a thin lit rule rather than a block of colour, each
   introduced by a small mission marker.
   --------------------------------------------------------------------------- */
.sec{position:relative}
.sec::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--ln2) 18%,var(--ln2) 82%,transparent)}
.sec:first-of-type::before{display:none}
.sec-alt{background:linear-gradient(180deg,rgba(159,232,255,.022),transparent 62%)}
.sec-h{color:var(--moon);font-size:clamp(1.5rem,3.1vw,2.3rem);letter-spacing:-.038em}
.sec-lede{color:var(--mu);line-height:1.72}
.sec-link{color:var(--ice);font-weight:600;font-size:.85rem}

.s3-eye{display:flex;align-items:center;gap:.8rem;margin:0 0 1rem;
  font-size:.66rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--ice)}
.s3-eye b{font-weight:700;font-family:'PMono',monospace;color:var(--fa)}
.s3-eye span{flex:1;height:1px;max-width:150px;
  background:linear-gradient(90deg,var(--ice-line),transparent)}

.card{background:linear-gradient(170deg,rgba(24,27,36,.56),rgba(14,17,23,.56));
  border:1px solid var(--ln);border-radius:18px}
.kv{border-color:var(--ln);color:var(--mu)}
.kv b{color:var(--moon)}
.addr{background:rgba(8,10,15,.6);border:1px solid var(--ln2);color:var(--moon);border-radius:13px}
.btn-primary{background:linear-gradient(135deg,#eafaff,var(--ice) 42%,var(--a));color:#06212b;
  border-radius:100px;font-weight:700}
.btn-ghost{background:var(--bg3);border-color:var(--ln2);color:var(--tx);border-radius:100px}
.btn-ghost:hover{border-color:var(--ice);color:var(--ice)}
.pill{border-color:var(--ln2);color:var(--mu);border-radius:100px}
.pill-ok{color:#86efac;border-color:rgba(74,222,128,.32);background:rgba(74,222,128,.08)}
.pill-wa{color:#fcd34d;border-color:rgba(251,191,36,.32);background:rgba(251,191,36,.08)}
.pill-no{color:#fda4af;border-color:rgba(251,113,133,.32);background:rgba(251,113,133,.08)}
.pill-a{color:var(--ice);border-color:var(--ice-line);background:var(--ice-glow)}
.steps div{background:var(--ln2)}
.steps div.on{background:linear-gradient(90deg,var(--ice),var(--a))}
.steps div.done{background:var(--ok)}
th{color:var(--fa);border-color:var(--ln)}
td{border-color:var(--ln)}
.muted{color:var(--mu)}
.faint{color:var(--fa)}
.ord-amt{color:var(--moon);font-variant-numeric:tabular-nums}
.ord-dep{background:rgba(14,17,23,.6);border-color:var(--ln2);border-radius:18px}
.ord-qr{background:#fff;border-radius:14px;padding:10px}

/* promise cards, lit along the top edge rather than filled */
.why-card{position:relative;overflow:hidden;
  background:linear-gradient(170deg,rgba(24,27,36,.6),rgba(13,16,22,.6));
  border-color:var(--ln);border-radius:18px;transition:border-color .22s ease,transform .22s ease}
.why-card::before{content:'';position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,var(--ice-line),transparent);opacity:0;transition:opacity .22s ease}
.why-card:hover{border-color:var(--ln2);transform:translateY(-3px)}
.why-card:hover::before{opacity:1}
.why-card h3{color:var(--moon);font-size:1.04rem}
.why-ico{width:42px;height:42px;border-radius:50%;border:1px solid var(--ln2);
  background:radial-gradient(circle at 34% 30%,rgba(159,232,255,.16),rgba(12,15,21,.9));
  color:var(--ice);box-shadow:inset 0 0 20px -10px var(--ice)}
.why-card:hover .why-ico{border-color:var(--ice-line)}

.coin-chip{background:rgba(14,17,23,.6);border-color:var(--ln);color:var(--tx);border-radius:100px;
  transition:border-color .16s ease,background .16s ease,transform .16s ease}
.coin-chip:hover{border-color:var(--ice-line);background:var(--bg3);transform:translateY(-2px)}
.coin-chip b{color:var(--moon)}
.coin-chip em{color:var(--fa);opacity:1}

.faq details{border-bottom:1px solid var(--ln)}
.faq summary{color:var(--moon);font-weight:600;font-size:.97rem;padding:1.15rem 0}
.faq summary:hover,.faq details[open] summary{color:var(--ice)}
.faq p{color:var(--mu);line-height:1.72}
.faq-x{color:var(--ice);opacity:1}

/* closing band: a crescent of light along the bottom */
.cta-band{position:relative;overflow:hidden;border:1px solid var(--ln2);border-radius:22px;
  background:linear-gradient(170deg,rgba(26,30,40,.7),rgba(10,12,18,.85))}
.cta-band::before{content:'';position:absolute;left:50%;bottom:-150%;width:180%;aspect-ratio:2/1;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  border-top:1px solid var(--ice-line);
  background:radial-gradient(58% 50% at 50% 0,rgba(159,232,255,.12),transparent 72%)}
.btn-go{background:linear-gradient(135deg,#eafaff,var(--ice) 42%,var(--a));color:#06212b;
  border-radius:100px;padding:.95rem 1.8rem;font-weight:700;letter-spacing:.06em;
  box-shadow:0 16px 36px -14px var(--ice);transition:transform .2s ease,filter .2s ease}
.btn-go:hover{transform:translateY(-1px);filter:brightness(1.06)}

/* ---------------------------------------------------------------------------
   Market readouts.
   --------------------------------------------------------------------------- */
.p-ticker{background:rgba(10,12,18,.8);border-color:var(--ln);backdrop-filter:blur(12px)}
.p-tick{border-color:var(--ln);color:var(--tx)}
.p-tick .px{color:var(--moon);font-family:'PMono',monospace;font-variant-numeric:tabular-nums}
.p-tick .up{color:var(--ok)}
.p-tick .dn{color:var(--no)}
.p-tick .flat{color:var(--fa)}

.mk-live{color:var(--ok)}
.mk-card{background:rgba(14,17,23,.55);border-color:var(--ln);color:var(--tx);border-radius:14px}
.mk-card:hover{border-color:var(--ice-line)}
.mk-find{background:rgba(8,10,15,.6);border:1px solid var(--ln2);border-radius:100px;color:var(--tx)}
.mk-find:focus{border-color:var(--ice);box-shadow:0 0 0 4px var(--ice-glow)}
.mk-find::placeholder{color:var(--fa)}
.mk th{color:var(--fa);border-color:var(--ln2);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase}
.mk th[data-mk-sort]:hover{color:var(--ice)}
.mk td{border-color:var(--ln);color:var(--tx)}
.mk tbody tr{transition:background .14s ease}
.mk tbody tr:hover{background:rgba(159,232,255,.04)}
.mk-asset{color:var(--moon)}
.mk-asset em{color:var(--fa)}
.mk .c-price{color:var(--moon);font-family:'PMono',monospace;font-variant-numeric:tabular-nums}
.mk .c-cap,.mk .c-vol{color:var(--mu);font-variant-numeric:tabular-nums}
.mk .up{color:var(--ok)}
.mk .down{color:var(--no)}
.mk .flat{color:var(--fa)}
.mk-spark.up{color:var(--ok)}
.mk-spark.down{color:var(--no)}
.mk-go{background:var(--bg3);border-color:var(--ln2);color:var(--tx);border-radius:100px}
.mk-go:hover{border-color:var(--ice);color:var(--ice)}
.mk-count{color:var(--fa)}

/* blog and reviews inherit the station's materials */
.bl-card{background:linear-gradient(170deg,rgba(24,27,36,.55),rgba(14,17,23,.55));border-color:var(--ln);border-radius:18px}
.bl-card:hover{border-color:var(--ice-line)}
.bl-body h2{color:var(--moon)}
.bl-tag{background:rgba(8,10,15,.72);border:1px solid var(--ice-line);color:var(--ice)}
.po-body h2,.po-body h3{color:var(--moon)}
.po-cover{border:1px solid var(--ln)}
.rv-card{background:linear-gradient(170deg,rgba(24,27,36,.55),rgba(14,17,23,.55));border-color:var(--ln);border-radius:18px}
.rv-score strong{background:var(--silver);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-family:'PMono',monospace}

.p-foot{background:#070810;border-top:1px solid var(--ln);color:var(--fa)}
.p-foot a{color:var(--mu)}
.p-foot a:hover{color:var(--ice)}
.p-foot strong{color:var(--ice);font-size:.65rem;letter-spacing:.22em;text-transform:uppercase}

/* ---------------------------------------------------------------------------
   Motion, all of it killed by the reduced motion rule in base.css.
   --------------------------------------------------------------------------- */
.x-go,.p-cta,.btn-go{transition:filter .2s ease,transform .2s ease,box-shadow .2s ease}
.x-pick{transition:border-color .18s ease,box-shadow .18s ease,transform .16s ease}
.x-pick:hover{transform:translateY(-1px)}
.x-flip button{transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .2s ease,box-shadow .2s ease}

/* ---------------------------------------------------------------------------
   Narrower screens. The body shrinks and moves behind the copy rather than
   being hidden: it is the whole identity of the page.
   --------------------------------------------------------------------------- */
@media(max-width:980px){
  .x-grid{grid-template-columns:minmax(0,1fr)}
  .s3-moon{right:-38%;bottom:-34%;width:min(820px,118vw);opacity:.45}
  .s3-orbit-3{display:none}
}
@media(max-width:620px){
  .x-copy h1{font-size:clamp(1.95rem,8.6vw,2.5rem);max-width:none}
  .s3-moon{right:-50%;bottom:-20%;width:min(680px,140vw);opacity:.32}
  .s3-orbit-2{display:none}
  .x-stats{border-radius:20px;grid-template-columns:minmax(0,1fr)}
  .x-stats div{border-inline-start:0;border-top:1px solid var(--ln)}
  .x-stats div:first-child{border-top:0}
}

/* ===========================================================================
   SwapLords 3's own components.
   =========================================================================== */

.s3-mark{display:grid;place-items:center;color:var(--ice);flex:0 0 auto}
.s3-mark svg{display:block;filter:drop-shadow(0 0 14px rgba(159,232,255,.4))}
.s3-mark-f{color:var(--ln2)}
.s3-mark-f svg{filter:none}

/* ---- the asset belt ------------------------------------------------------ */
.s3-belt-sec{overflow:hidden}
.s3-belt{position:relative;margin-top:1.6rem;padding:.4rem 0;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.s3-belt-row{display:flex;gap:.6rem;width:max-content;animation:s3-belt 72s linear infinite}
.s3-belt-row:nth-child(2){animation-duration:92s;animation-direction:reverse;margin-top:.6rem}
@keyframes s3-belt{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.s3-belt:hover .s3-belt-row{animation-play-state:paused}

.s3-orb{flex:0 0 auto;display:flex;align-items:center;gap:.6rem;padding:.5rem .95rem .5rem .5rem;
  border-radius:100px;text-decoration:none;color:var(--tx);
  background:linear-gradient(170deg,rgba(26,30,40,.7),rgba(13,16,22,.7));
  border:1px solid var(--ln);
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.s3-orb:hover{border-color:var(--ice-line);transform:translateY(-2px);color:var(--tx);text-decoration:none;
  box-shadow:0 0 0 4px var(--ice-glow)}
/* each coin sits on a lit disc, like a body catching the sun */
.s3-orb-disc{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.18),rgba(10,12,18,.9));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 6px 18px -10px rgba(159,232,255,.7)}
.s3-orb-disc img{width:24px;height:24px;border-radius:50%;display:block}
.s3-orb-tx{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.s3-orb-tx b{font-size:.85rem;color:var(--moon);letter-spacing:-.01em}
.s3-orb-tx em{font-style:normal;font-size:.66rem;color:var(--fa);white-space:nowrap}

/* ---- transit routes ------------------------------------------------------ */
.s3-routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.s3-transit{display:block;padding:1.05rem 1.1rem;border-radius:18px;text-decoration:none;color:var(--tx);
  background:linear-gradient(170deg,rgba(24,27,36,.56),rgba(13,16,22,.56));
  border:1px solid var(--ln);
  transition:border-color .2s ease,transform .2s ease,background .2s ease}
.s3-transit:hover{border-color:var(--ice-line);transform:translateY(-3px);color:var(--tx);text-decoration:none;
  background:linear-gradient(170deg,rgba(30,35,47,.66),rgba(16,20,28,.66))}
/* the two bodies and the arc of travel between them */
.s3-transit-arc{display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem}
.s3-transit-arc img{width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.s3-transit-arc i{flex:1;height:1px;position:relative;
  background:linear-gradient(90deg,var(--ln2),var(--ice-line),var(--ln2))}
.s3-transit-arc i::after{content:'';position:absolute;top:-2px;left:0;width:5px;height:5px;border-radius:50%;
  background:var(--ice);box-shadow:0 0 10px var(--ice);
  animation:s3-travel 3.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes s3-travel{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
.s3-transit b{display:block;font-size:.92rem;font-weight:700;letter-spacing:-.015em;color:var(--moon)}
.s3-transit em{display:block;font-style:normal;font-size:.73rem;color:var(--mu);margin-top:.3rem;
  font-family:'PMono',monospace;font-variant-numeric:tabular-nums;line-height:1.45;word-break:break-word}
.s3-note{margin:1.3rem 0 0;font-size:.8rem;color:var(--fa)}

/* ---- the sequence -------------------------------------------------------- */
.s3-seq{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem;position:relative}
.s3-seq::before{content:'';position:absolute;top:5px;left:5%;right:5%;height:1px;
  background:linear-gradient(90deg,transparent,var(--ln2) 12%,var(--ln2) 88%,transparent)}
.s3-seq li{position:relative;padding-top:2.2rem}
.s3-seq-node{position:absolute;top:0;inset-inline-start:0;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,var(--ice) 55%,var(--ice-deep));
  box-shadow:0 0 0 4px rgba(159,232,255,.1),0 0 16px var(--ice)}
.s3-seq-n{display:block;font-family:'PMono',monospace;font-size:.72rem;font-weight:700;letter-spacing:.16em;
  color:var(--fa);margin-bottom:.45rem}
.s3-seq h3{font-size:1.02rem;margin:0 0 .35rem;color:var(--moon)}
.s3-seq p{margin:0;color:var(--mu);font-size:.9rem;line-height:1.62}

/* ---- comparison ---------------------------------------------------------- */
.s3-wide{max-width:960px}
.s3-cmp{margin-top:1.3rem;border:1px solid var(--ln);border-radius:18px;overflow:hidden;
  background:linear-gradient(170deg,rgba(24,27,36,.42),rgba(13,16,22,.48))}
.s3-cmp table{width:100%;border-collapse:collapse;font-size:.91rem}
.s3-cmp th,.s3-cmp td{padding:.95rem 1.15rem;text-align:start;border-bottom:1px solid var(--ln)}
.s3-cmp tbody tr:last-child th,.s3-cmp tbody tr:last-child td{border-bottom:0}
.s3-cmp thead th{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fa);
  border-bottom:1px solid var(--ln2);background:rgba(8,10,15,.4)}
.s3-cmp tbody th{font-weight:500;color:var(--mu);width:42%}
.s3-cmp td{color:var(--mu)}
.s3-cmp .us{color:var(--moon);font-weight:600;background:rgba(159,232,255,.045)}
.s3-cmp thead .us{color:var(--ice);background:rgba(159,232,255,.08)}

/* ---- footer -------------------------------------------------------------- */
.s3-foot-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1.4rem;
  flex-wrap:wrap;padding-bottom:1.6rem;border-bottom:1px solid var(--ln)}
.s3-foot-brand{display:flex;align-items:flex-start;gap:.85rem}
.s3-foot-brand b{color:var(--moon);font-family:'PDisplay',sans-serif;font-size:1rem;letter-spacing:-.035em}
.s3-foot-brand .tiny{color:var(--fa);line-height:1.6}
.s3-foot-lang{font:inherit;font-size:.82rem;padding:.42rem .7rem;border-radius:100px;background:#0e1117;
  color:var(--mu);border:1px solid var(--ln2)}
.s3-foot-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.5rem 1.2rem;padding:1.6rem 0}
.s3-foot-grid>div{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.s3-foot-grid strong{margin-bottom:.25rem}
.s3-foot-grid a{font-size:.82rem;color:var(--mu);text-decoration:none;line-height:1.45}
.s3-foot-grid a:hover{color:var(--ice)}
.s3-foot-grid .faint{opacity:.5;font-size:.73rem}
.s3-foot-end{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-top:1.3rem;border-top:1px solid var(--ln);color:var(--fa)}

.grid.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}

@media(max-width:1040px){
  .s3-routes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s3-seq{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.8rem 1.4rem}
  .s3-seq::before{display:none}
  .s3-foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:620px){
  .s3-routes{grid-template-columns:minmax(0,1fr)}
  .grid.g4{grid-template-columns:minmax(0,1fr)}
  .s3-seq{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .s3-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s3-cmp table{font-size:.83rem}
  .s3-cmp th,.s3-cmp td{padding:.75rem .65rem}
  .s3-cmp tbody th{width:38%}
  .s3-belt-row{animation-duration:48s}
}