@layer pages {
  .chart-live{display:flex;align-items:center;gap:7px;font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}.chart-live i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime)}.chart-wrap{position:relative;height:280px;touch-action:pan-y;cursor:crosshair}.chart-wrap canvas{width:100%;height:100%}.chart-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:12px}.chart-wrap.loaded .chart-empty{display:none}.chart-crosshair,.chart-marker,.chart-tooltip{position:absolute;opacity:0;pointer-events:none;z-index:3;transition:opacity .12s ease}.chart-crosshair{width:1px;background:linear-gradient(180deg,rgba(185,243,75,.12),rgba(185,243,75,.78),rgba(185,243,75,.12));box-shadow:0 0 14px rgba(185,243,75,.25)}.chart-marker{width:13px;height:13px;border:2px solid var(--surface);border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px rgba(185,243,75,.12),0 0 22px rgba(185,243,75,.45);transform:translate(-50%,-50%)}.chart-tooltip{min-width:190px;max-width:min(245px,calc(100% - 18px));padding:10px 12px;border:1px solid var(--line-strong);border-radius:10px;background:color-mix(in srgb,var(--surface) 94%,#000);box-shadow:var(--shadow);transform:translate(-50%,calc(-100% - 13px))}.chart-tooltip[data-place="bottom"]{transform:translate(-50%,13px)}.chart-crosshair.show,.chart-marker.show,.chart-tooltip.show{opacity:1}.chart-tooltip span,.chart-tooltip strong{display:block}.chart-tooltip-time{color:var(--muted);font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.chart-tooltip-main{margin-top:3px;color:var(--text);font-size:16px}.chart-tooltip-extra{margin-top:2px;color:var(--muted);font-size:10px}.chart-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}.chart-summary[hidden]{display:none}.chart-summary article{min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:var(--bg-2)}.chart-summary small{display:block;color:var(--muted);font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.chart-summary strong{display:block;margin-top:3px;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chart-summary span{display:block;margin-top:2px;color:var(--muted);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

@layer responsive {
  @media(max-width:650px){.chart-wrap{height:220px}.chart-summary{grid-template-columns:1fr 1fr}.chart-summary strong{font-size:15px}.chart-tooltip{min-width:176px}}
}
