@layer components{.earn-hero{isolation:isolate;background:var(--ink);color:var(--on-brand);position:relative;overflow:hidden}.earn-hero__scene{inset-inline:0;z-index:-1;pointer-events:none;position:absolute;bottom:0}.earn-card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-3xl)}.earn-tile{border-radius:var(--radius-xl);background:var(--ground);padding:14px}.earn-chart{flex-direction:column;gap:10px;margin:0;display:flex}.earn-chart__caption{flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:16px;display:flex}.earn-chart__caption span{color:var(--ink-3);font-size:13px}.earn-chart__grid{grid-template-columns:52px minmax(0,1fr);gap:8px;display:grid}.earn-chart__axis{height:180px;color:var(--ink-3);text-align:end;flex-direction:column;justify-content:space-between;font-size:11px;display:flex}.earn-chart__plot{border-block-end:1px solid var(--line);height:180px;position:relative}.earn-chart__svg{width:100%;height:100%;display:block;overflow:visible}.earn-chart__line{stroke:var(--line-soft);stroke-width:1px;vector-effect:non-scaling-stroke}.earn-chart__bar{outline:none}.earn-chart__bar rect{fill:var(--brand-700)}.earn-chart__bar.is-peak rect{fill:var(--accent)}.earn-chart__bar:focus-visible rect{stroke:var(--focus);stroke-width:3px;vector-effect:non-scaling-stroke}.earn-chart__tip-col{pointer-events:none;justify-content:center;width:8.33333%;padding-block-end:6px;display:flex;position:absolute}.earn-chart__tip{white-space:nowrap;background:var(--ink);color:var(--on-brand);border-radius:var(--radius-sm);padding:6px 8px;font-size:12px;font-weight:600}.earn-chart__months{color:var(--ink-3);text-align:center;grid-template-columns:repeat(12,minmax(0,1fr));font-size:11px;display:grid}}