/* Market rail: calm rows of live markets on a soft lime panel. The hero's current idea lights its matches in place. */
.market-ribbon{--mr-ease:cubic-bezier(.22,.61,.36,1);--mr-up:#21876b;--mr-down:#c4404f;position:relative;max-width:1328px;width:calc(100% - 96px);margin:96px auto 0;padding:0;isolation:isolate;scroll-margin-top:40px}
.mr-heading{text-align:center;padding:0 0 36px}
.mr-heading h2{font-size:58px;font-weight:500;letter-spacing:-2.6px;line-height:1.04}
.mr-heading h2 span{color:var(--purple)}
.mr-heading p{max-width:480px;text-wrap:balance;margin:18px auto 0;font-size:17px;line-height:1.6;color:var(--muted)}
.mr-defs{position:absolute;width:0;height:0;overflow:hidden}

.mr-panel{position:relative;overflow:hidden;isolation:isolate;padding:0 0 8px}

/* The idea chip */
.mr-idea{display:flex;justify-content:center;margin-bottom:28px}
.mr-chip{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin:0;padding:10px 20px 10px 14px;border-radius:999px;background:var(--purple);color:#fff;font-size:17px;font-weight:500;letter-spacing:-.2px;white-space:nowrap;box-shadow:0 1px 1px rgba(46,22,128,.22),0 2px 6px rgba(46,22,128,.14),0 10px 22px rgba(46,22,128,.14)}
.mr-lash{display:block;width:26px;height:11px;fill:#fff;transform:translateY(1px)}
.mr-q{display:inline-flex;align-items:center}
.mr-slot{position:relative;display:block;overflow:hidden;font-weight:600}
.mr-word{position:relative;display:block;white-space:nowrap;will-change:transform,opacity}
.mr-word.is-leaving{position:absolute;top:0}
/* (a) the word in a small white pill */
.mr-chip.is-inset .mr-slot{box-sizing:content-box;height:28px;margin-left:7px;padding:0 8px;border-radius:999px;background:#fff;color:var(--purple);box-shadow:0 1px 2px rgba(30,10,90,.2),0 2px 6px rgba(30,10,90,.12)}
.mr-chip.is-inset .mr-word{line-height:28px}
.mr-chip.is-inset .mr-word.is-leaving{left:8px}
.mr-chip.is-inset .mr-qm{margin-left:4px}
/* (b) the word in lime, the brightest thing in the chip */
.mr-chip.is-lime .mr-pre,.mr-chip.is-lime .mr-qm{opacity:.85}
.mr-chip.is-lime .mr-slot{height:24px;margin-left:5px;color:var(--lime);font-size:18px}
.mr-chip.is-lime .mr-word{line-height:24px}
.mr-chip.is-lime .mr-word.is-leaving{left:0}
.mr-chip.is-lime .mr-qm{margin-left:3px}

/* Rows: one constant speed, alternating directions (driven by app.js) */
.mr-rows{display:flex;flex-direction:column;gap:20px;padding-block:36px;margin-block:-30px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.mr-row{height:44px}
.mr-track{display:flex;gap:14px;width:max-content;will-change:transform}
.mr-group{display:flex;flex:none;gap:14px;margin:0;padding:0;list-style:none}

/* Market pill: logo, name, price, day change */
.mr-pill{display:flex;align-items:center;gap:8px;flex:none;height:44px;padding:0 15px 0 8px;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);color:var(--ink);white-space:nowrap;transition:background 450ms var(--mr-ease),box-shadow 450ms var(--mr-ease),transform 450ms var(--mr-ease);transition-delay:var(--mr-d,0ms)}
.mr-pill>.mr-tok{--s:28px;flex:none}
.mr-name{font-size:15px;font-weight:600;letter-spacing:-.2px}
.mr-px{margin-left:4px;font-size:15px;font-weight:600;letter-spacing:-.2px;font-variant-numeric:tabular-nums}
.mr-ch{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.mr-ch.is-up{color:var(--mr-up)}.mr-ch.is-down{color:var(--mr-down)}
.mr-pill>*{opacity:.35;transition:opacity 450ms var(--mr-ease),filter 450ms var(--mr-ease);transition-delay:var(--mr-d,0ms)}
.mr-pill>.mr-tok{filter:grayscale(1)}
.mr-pill.is-match{background:#fff;transform:scale(1.06);box-shadow:0 2px 4px rgba(33,34,31,.07),0 14px 30px rgba(33,34,31,.13)}
.mr-pill.is-match>*{opacity:1}
.mr-pill.is-match>.mr-tok{filter:none}

/* Tokens: real marks on white, or designed objects (metal coins, ingot, drop, barrel) */
.mr-tok{--s:28px;--k:.6;position:relative;display:grid;place-items:center;width:var(--s);height:var(--s);border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px rgba(33,34,31,.08);overflow:hidden}
.mr-tok img{width:calc(var(--s) * var(--k));height:calc(var(--s) * var(--k));object-fit:contain}
.mr-tok svg{width:calc(var(--s) * var(--k));height:calc(var(--s) * var(--k))}
/* Sculpted commodities share the same image path through the glass reveal. */
.mr-tok-object{--k:1;background:transparent;box-shadow:none}
.mr-tok-nvidia{--k:.74}.mr-tok-amd{--k:.46}.mr-tok-amd img{filter:brightness(0)}.mr-tok-asml{--k:.86}.mr-tok-avgo{--k:.78}.mr-tok-arm{--k:.82}.mr-tok-intel{--k:.8}
.mr-tok-msft{--k:.52}.mr-tok-google{--k:.56}.mr-tok-meta{--k:.7}.mr-tok-amazon{--k:.62}.mr-tok-amazon img{border-radius:22%;object-fit:cover}.mr-tok-oracle{--k:.76}
.mr-tok-xom{--k:.9}.mr-tok-shell{--k:.7}.mr-tok-chevron{--k:.56}
.mr-tok-btc,.mr-tok-sol,.mr-tok-eth{--k:1;box-shadow:none}
.mr-tok-coinbase{--k:1;box-shadow:none}
/* Metal coins */
.mr-coin{box-shadow:inset 0 0 0 1px rgba(255,240,190,.55),inset 0 -2px 3px rgba(80,52,0,.32),0 1px 2px rgba(60,40,0,.18);font-size:calc(var(--s) * .38);font-weight:700;letter-spacing:-.03em}
.mr-coin::before{content:'';position:absolute;inset:12%;border-radius:50%;box-shadow:inset 0 1px 1.5px rgba(70,45,0,.42),0 1px 0 rgba(255,248,222,.65)}
.mr-coin b{position:relative;line-height:1}
.mr-coin-gold{background:radial-gradient(120% 120% at 30% 20%,#fff6d2 0%,#f5d677 20%,#d9a835 48%,#ad7c15 74%,#7a5608 100%);color:#86600c;text-shadow:0 1px 0 rgba(255,244,200,.85),0 -1px 0 rgba(90,60,0,.3)}
.mr-coin-silver{background:radial-gradient(120% 120% at 30% 20%,#ffffff 0%,#e9ebef 22%,#c2c6cd 50%,#959aa3 76%,#6c717a 100%);color:#5d626b;text-shadow:0 1px 0 rgba(255,255,255,.9),0 -1px 0 rgba(40,44,52,.25);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 -2px 3px rgba(40,44,52,.28),0 1px 2px rgba(20,24,30,.16)}
.mr-coin-silver::before{box-shadow:inset 0 1px 1.5px rgba(40,44,52,.38),0 1px 0 rgba(255,255,255,.7)}
.mr-coin-plat{background:radial-gradient(120% 120% at 30% 20%,#ffffff 0%,#e3e8ee 22%,#b8c1cc 50%,#8794a3 76%,#5d6a79 100%);color:#4f5b69;text-shadow:0 1px 0 rgba(255,255,255,.9),0 -1px 0 rgba(30,40,55,.25);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 -2px 3px rgba(30,40,55,.28),0 1px 2px rgba(20,24,30,.16)}
.mr-coin-plat::before{box-shadow:inset 0 1px 1.5px rgba(30,40,55,.38),0 1px 0 rgba(255,255,255,.7)}
.mr-coin-btc{background:radial-gradient(120% 120% at 30% 20%,#ffe1b0 0%,#ffb44d 22%,#f7931a 50%,#c86d05 78%,#8f4b00 100%);color:#9a5300;text-shadow:0 1px 0 rgba(255,226,180,.8),0 -1px 0 rgba(90,45,0,.3)}
.mr-coin-btc b{font-size:calc(var(--s) * .46)}
.mr-tok-gld{--k:.8}
.mr-tok-graphite{background:radial-gradient(120% 120% at 30% 20%,#4b4945 0%,#2a2926 55%,#151513 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.mr-tok-gdx{--k:.6}.mr-tok-gdx svg{fill:none;stroke:url(#mr-gold);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mr-tok-wgmi{--k:.6}.mr-tok-wgmi svg{fill:none;stroke:#f7931a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mr-tok-wti{--k:.66}.mr-tok-brent{--k:.68}


.mr-tok-ink{background:radial-gradient(120% 120% at 30% 20%,#3a3936 0%,#1d1d1b 60%,#0f0f0e 100%);box-shadow:none;color:#fff}
.mr-tok-pltr{--k:.62}.mr-tok-pltr svg{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mr-tok-xyz{--k:.62}.mr-tok-xyz svg{fill:none;stroke:#fff;stroke-width:2}
.mr-tok-mstr b{font-size:calc(var(--s) * .5);font-weight:700;color:#ff8a1f;line-height:1}
.mr-tok-ng{--k:.66}
.mr-coin-pd{background:radial-gradient(120% 120% at 30% 20%,#fffdf8 0%,#ece6dc 22%,#c9bfb0 50%,#9d9282 76%,#71685b 100%);color:#625849;text-shadow:0 1px 0 rgba(255,255,255,.9),0 -1px 0 rgba(60,50,35,.25);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 -2px 3px rgba(60,50,35,.28),0 1px 2px rgba(30,25,20,.16)}
.mr-coin-pd::before{box-shadow:inset 0 1px 1.5px rgba(60,50,35,.38),0 1px 0 rgba(255,255,255,.7)}


/* Pause control under the panel, on the content edge */
.mr-foot{display:flex;justify-content:flex-end;margin-top:14px}
.market-ribbon .mr-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid #e6e4dd;border-radius:50%;background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(33,34,31,.05);backdrop-filter:none;transition:background 300ms ease,color 300ms ease,transform 150ms ease}
.market-ribbon .mr-toggle:hover{background:#f3effe;color:var(--purple)}
.market-ribbon .mr-toggle:active{transform:translateY(1px)}
.market-ribbon .mr-toggle:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.market-ribbon .mr-toggle svg{width:16px;height:16px;stroke-width:2}
.market-ribbon .mr-toggle .play-icon{fill:currentColor;stroke:none}
.market-ribbon .mr-toggle[hidden]{display:none}

.market-ribbon+.vp-section{padding-top:72px}

@keyframes mr-flow{from{transform:translate(-4%,-3%) rotate(0deg)}to{transform:translate(5%,4%) rotate(8deg)}}

@media(max-width:1180px){.market-ribbon{width:calc(100% - 64px)}}
@media(max-width:900px){.market-ribbon{margin-top:80px}.mr-heading h2{font-size:50px;letter-spacing:-2.2px}}
@media(max-width:680px){
  .market-ribbon{width:calc(100% - 32px);margin-top:72px}
  .mr-heading{padding:0 4px 24px}
  .mr-heading h2{font-size:40px;letter-spacing:-1.6px;line-height:1.06}
  .mr-heading p{max-width:330px;margin-top:14px;font-size:15px}
  .mr-panel{padding:0 0 4px}
  .mr-chip{font-size:16px;padding:9px 18px 9px 13px;min-height:44px}
  .mr-rows{gap:16px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
  .mr-row:nth-child(3){display:none}
  .mr-row{height:40px}
  .mr-track,.mr-group{gap:12px}
  .mr-pill{height:40px;gap:6px;padding:0 12px 0 6px}
  .mr-pill>.mr-tok{--s:24px}
  .mr-name,.mr-px{font-size:14px}
  .mr-px{margin-left:3px}
  .mr-ch{font-size:13px}
  .mr-pill:not(.is-match) .mr-ch{display:none}
  .mr-pill.is-match{transform:scale(1.04)}
  .market-ribbon+.vp-section{padding-top:60px}
}
@media(prefers-reduced-motion:reduce){.mr-pill,.mr-pill>*{transition:none}}

/* Lit pills: solid white, ink text, full strength, no filter */
.mr-pill.is-match{background:#fff;color:#21221f;opacity:1;filter:none}
.mr-pill.is-match>*{opacity:1}
.mr-pill.is-match>.mr-tok{filter:none}
.mr-chip.is-inset .mr-slot,.mr-chip.is-inset .mr-word{color:#7250ed}

/* On the paper ground: unlit pills keep a faint ink hairline so the rows still read as chips */
.mr-pill{box-shadow:inset 0 0 0 1px rgba(33,34,31,.07)}
.mr-pill.is-match{box-shadow:0 2px 4px rgba(33,34,31,.07),0 14px 30px rgba(33,34,31,.13)}

/* Glass reveal (glass-reveal.js): a newly lit pill waits in its unlit look (.is-glassing). When the glass
   starts (.is-popping) the unlit pill fades away while a canvas inside it draws the lit pill easing in
   through soft glass; at the end the canvas is exactly the lit pill and fades off it. */
.mr-pill{position:relative}
.mr-pill.is-match.is-glassing{background:transparent;box-shadow:inset 0 0 0 1px rgba(33,34,31,.07)}
.mr-pill.is-match.is-glassing:not(.is-popping){transform:none}
.mr-pill.is-match.is-glassing>*{opacity:.35}
.mr-pill.is-match.is-glassing>.mr-tok{filter:grayscale(1)}
.mr-pill.is-match.is-popping{box-shadow:inset 0 0 0 1px rgba(33,34,31,0);transition:box-shadow 140ms linear,transform 700ms cubic-bezier(.22,1,.36,1);transition-delay:0ms}
.mr-pill.is-match.is-popping>*{opacity:0;transition:opacity 110ms linear;transition-delay:0ms}
.mr-pill.is-landing,.mr-pill.is-landing>*{transition:none}
.mr-pill>canvas.mr-glass,.mr-pill.is-match.is-glassing>canvas.mr-glass{position:absolute;z-index:1;display:block;opacity:1;filter:none;transition:none;pointer-events:none}
/* Unlit again: a quick, soft fade back */
.mr-pill:not(.is-match),.mr-pill:not(.is-match)>*{transition-duration:300ms;transition-timing-function:cubic-bezier(.22,1,.36,1)}

/* shadows: panel clipped vertically; clip only horizontally (mask on .mr-rows handles the edge fade) */
.mr-panel{overflow:visible;overflow-x:clip;overflow-y:visible}
.mr-rows{padding-block:44px;margin-block:-38px}
