/* /curve: the live curve as a page of its own. */
.curve-main { max-width: var(--max); margin: 0 auto; padding: 48px var(--gutter) 96px; }
.curve-page-head { display: grid; gap: 12px; max-width: 760px; margin-bottom: 32px; }
.curve-page-head h1 { margin: 0; font: 600 48px/56px var(--sans); letter-spacing: -.03em; background: linear-gradient(180deg, #fff, #9b9b9b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.curve-page-head p { margin: 0; font: 400 18px/28px var(--sans); color: var(--text-2); }
.curve-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.curve-page-head .curve-legend { font: 500 12px/16px var(--mono); color: var(--text-3); }
.lg { display: inline-flex; align-items: center; gap: 8px; }
.lg::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--panel-4); }
.lg-live::before { border-color: var(--up); }
.lg-near::before { border-color: var(--accent); }
.curve-ask { margin: 32px 0 0; font: 400 16px/24px var(--sans); color: var(--text-2); }
.curve-ask .client { color: var(--text); }
@media (max-width: 760px) {
  .curve-main { padding-top: 32px; }
  .curve-page-head h1 { font-size: 36px; line-height: 40px; }
  .curve-page-head p { font-size: 16px; line-height: 24px; }
}