/* OddsQ r79: shared graphite stage for the separately served API page. */

@media (min-width: 1181px) {
  :root {
    --api-stage-edge: max(20px, calc((100% - var(--api-page-width)) / 2));
    --api-stage-tone: 142, 137, 124;
  }

  body {
    position: relative;
    isolation: isolate;
    background:
      radial-gradient(ellipse at 50% 7%, rgba(var(--api-stage-tone), 0.045), transparent 34rem),
      linear-gradient(180deg, #050707 0%, #030505 52%, #070909 100%) !important;
  }

  body::before {
    position: fixed;
    z-index: -2;
    display: block;
    opacity: 1;
    background:
      radial-gradient(ellipse 270px 860px at calc(var(--api-stage-edge) - 34px) 35%, rgba(var(--api-stage-tone), 0.12), rgba(var(--api-stage-tone), 0.035) 48%, transparent 77%),
      radial-gradient(ellipse 270px 860px at calc(100% - var(--api-stage-edge) + 34px) 35%, rgba(var(--api-stage-tone), 0.12), rgba(var(--api-stage-tone), 0.035) 48%, transparent 77%),
      radial-gradient(circle 280px at var(--api-stage-edge) 96px, rgba(var(--api-stage-tone), 0.055), transparent 74%),
      radial-gradient(circle 280px at calc(100% - var(--api-stage-edge)) 96px, rgba(var(--api-stage-tone), 0.055), transparent 74%);
    background-size: auto;
    pointer-events: none;
  }

  body::after {
    position: fixed;
    z-index: -1;
    top: 0;
    right: var(--api-stage-edge);
    bottom: 0;
    left: var(--api-stage-edge);
    content: "";
    background:
      linear-gradient(90deg, rgba(var(--api-stage-tone), 0.038), transparent 11%, transparent 89%, rgba(var(--api-stage-tone), 0.038)),
      linear-gradient(180deg, rgba(14, 17, 18, 0.99), rgba(6, 9, 9, 0.995) 50%, rgba(10, 12, 12, 0.995));
    box-shadow:
      -24px 0 72px rgba(var(--api-stage-tone), 0.07),
      24px 0 72px rgba(var(--api-stage-tone), 0.07),
      inset 2px 0 12px rgba(var(--api-stage-tone), 0.035),
      inset -2px 0 12px rgba(var(--api-stage-tone), 0.035),
      inset 0 18px 48px rgba(255, 255, 255, 0.011);
    pointer-events: none;
  }

  .site-header,
  main#api,
  footer {
    position: relative;
    z-index: 1;
  }

  .site-header {
    padding-right: calc(var(--api-stage-edge) + 14px) !important;
    padding-left: calc(var(--api-stage-edge) + 14px) !important;
    border-bottom-color: rgba(var(--api-stage-tone), 0.14) !important;
    background: rgba(10, 13, 14, 0.94) !important;
  }

  .site-header::before,
  .site-header::after {
    position: absolute;
    top: 9px;
    bottom: 8px;
    width: 2px;
    border-radius: 999px;
    content: "";
    background: linear-gradient(180deg, transparent 0%, rgba(var(--api-stage-tone), 0.08) 8%, rgba(var(--api-stage-tone), 0.3) 42%, rgba(var(--api-stage-tone), 0.16) 82%, transparent 100%);
    box-shadow: 0 0 16px rgba(var(--api-stage-tone), 0.1);
    pointer-events: none;
  }

  .site-header::before { left: var(--api-stage-edge); }
  .site-header::after { right: var(--api-stage-edge); }

  main#api {
    padding: 20px 12px 16px !important;
    border-radius: 0 0 18px 18px;
    background:
      linear-gradient(90deg, rgba(var(--api-stage-tone), 0.022), transparent 8%, transparent 92%, rgba(var(--api-stage-tone), 0.022)),
      rgba(7, 10, 10, 0.32);
  }

  main#api > .section,
  main#api > .section:nth-child(even) {
    background:
      radial-gradient(circle at 100% 0, rgba(var(--api-stage-tone), 0.035), transparent 28rem),
      linear-gradient(145deg, rgba(255, 255, 255, 0.024), transparent 58%),
      #111516;
  }

  footer {
    margin: 12px auto 0 !important;
    padding: 21px 24px 25px !important;
    border-top-color: rgba(var(--api-stage-tone), 0.16) !important;
    border-radius: 22px 22px 0 0;
    background:
      radial-gradient(ellipse at 50% 0, rgba(var(--api-stage-tone), 0.055), transparent 58%),
      linear-gradient(90deg, rgba(var(--api-stage-tone), 0.03), transparent 15%, transparent 85%, rgba(var(--api-stage-tone), 0.03)),
      linear-gradient(180deg, rgba(16, 19, 19, 0.99), rgba(6, 9, 9, 0.995));
    box-shadow: inset 0 1px 0 rgba(var(--api-stage-tone), 0.12), 0 -14px 38px rgba(0, 0, 0, 0.24);
  }
}