.trend{--trend-views:#9a7b4f;--trend-visitors:#16181a;position:relative}.trend__plot{touch-action:pan-y;height:240px;position:relative}.trend__plot svg{width:100%;height:100%;display:block;overflow:visible}.trend__grid{stroke:#16181a14;stroke-width:1px}.trend__area{fill:color-mix(in srgb, var(--trend-views) 12%, transparent)}.trend__line{fill:none;stroke-width:2px;stroke-linejoin:round;stroke-linecap:round}.trend__line--views{stroke:var(--trend-views)}.trend__line--visitors{stroke:var(--trend-visitors);stroke-dasharray:4 4}.trend__cursor{stroke:#16181a59;stroke-width:1px}.trend__tip{border:1px solid var(--a-line,#e3ded4);border-radius:var(--a-radius,4px);background:var(--a-surface,#fff);min-width:7.5rem;color:var(--a-ink,#16181a);white-space:nowrap;pointer-events:none;gap:.2rem;padding:.65rem .8rem;font-size:.74rem;line-height:1.35;display:grid;position:absolute;top:0;transform:translate(-50%);box-shadow:0 14px 32px -18px #16181a47}.trend__axis{color:#8a8c8b;justify-content:space-between;margin-top:.5rem;font-size:.72rem;display:flex}.trend__legend{color:#52565a;gap:1.2rem;margin-top:.7rem;font-size:.76rem;display:flex}.trend__key:before{content:"";vertical-align:middle;border-top:2px solid var(--trend-views);width:14px;height:0;margin-right:.45rem;display:inline-block}.trend__key--visitors:before{border-top:2px dashed var(--trend-visitors)}.trend__plot svg{animation:trendReveal 1.4s var(--ease-out,cubic-bezier(.22, 1, .36, 1)) .15s both}@keyframes trendReveal{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}.trend__dot{background:var(--trend-views);width:10px;height:10px;box-shadow:0 0 0 4px color-mix(in srgb, var(--trend-views) 25%, transparent);pointer-events:none;border:2px solid #fff;border-radius:50%;margin:-5px 0 0 -5px;position:absolute}.trend__tip{border-radius:6px;transition:left .12s ease-out}@media (prefers-reduced-motion:reduce){.trend__plot svg{animation:none}}