/* Soft spectrum accents. Market, trading and wallet state colors stay untouched. */
@property --chroma { syntax:'<color>'; inherits:true; initial-value:#80cfa9; }
@property --chroma-ink { syntax:'<color>'; inherits:true; initial-value:#28704e; }
@property --chroma-wash { syntax:'<color>'; inherits:true; initial-value:rgba(128,207,169,.12); }
:root { --chroma:#80cfa9; --chroma-ink:#28704e; --chroma-wash:rgba(128,207,169,.12); }
html.chroma-motion { animation:chroma-breathe 80s ease-in-out infinite; }
@keyframes chroma-breathe {
  0%,100% { --chroma:#80cfa9; --chroma-ink:#28704e; --chroma-wash:rgba(128,207,169,.12); }
  20% { --chroma:#8bbadd; --chroma-ink:#315f84; --chroma-wash:rgba(139,186,221,.12); }
  40% { --chroma:#b5a4d4; --chroma-ink:#665083; --chroma-wash:rgba(181,164,212,.12); }
  60% { --chroma:#d3a0b1; --chroma-ink:#865065; --chroma-wash:rgba(211,160,177,.12); }
  80% { --chroma:#d4b08d; --chroma-ink:#82562f; --chroma-wash:rgba(212,176,141,.12); }
}
body { background:
  radial-gradient(1000px 560px at 6% -8%,rgba(128,207,169,.10),transparent 65%),
  radial-gradient(850px 560px at 98% 3%,rgba(139,186,221,.10),transparent 65%),
  radial-gradient(800px 600px at 4% 70%,rgba(211,160,177,.065),transparent 65%),
  radial-gradient(850px 600px at 98% 90%,rgba(181,164,212,.07),transparent 65%),#f8f8f8; }
nav.main a::after { background:var(--chroma); }
nav.main a.active { border-bottom-color:var(--chroma); }
.display em { background-image:linear-gradient(105deg,#28704e,#315f84 28%,#665083 56%,#865065 78%,#28704e);
  background-size:220% 100%; animation:chroma-sheen 24s ease-in-out infinite alternate; }
@keyframes chroma-sheen { from { background-position:0% 50%; } to { background-position:100% 50%; } }
.stats-row>div::after,.grid-stats>div::after,.tre-cards>div::after { background:var(--chroma); }
.lcard::before { border-color:var(--chroma); }
.lcard:hover::before { box-shadow:0 0 0 3px var(--chroma-wash),0 0 18px -4px var(--chroma); }
.card-grid>*:hover { border-color:var(--chroma); box-shadow:0 24px 44px -30px var(--chroma-ink); }
.lcard:hover { border-color:var(--chroma); box-shadow:0 0 0 1.5px var(--chroma),0 0 22px var(--chroma-wash); }
.sec-head h2::after { background:linear-gradient(90deg,var(--chroma-ink),var(--chroma)); }
.rate:hover { background:var(--chroma-wash); border-color:var(--chroma); }
.hero .btn.accent { background:linear-gradient(115deg,var(--chroma),#e1eee9); color:#1e302a; border-color:var(--chroma); }
.hero .btn.accent:hover { background:var(--chroma); }
@media (prefers-reduced-motion:reduce) {
  html.chroma-motion,.display em,.lcard::before,.lcard::after,nav.main a::after,
  .stats-row>div::after,.grid-stats>div::after,.tre-cards>div::after,.sec-head h2::after {
    animation:none!important; transition:none!important;
  }
}