/* utility-protocol / infographic-docs
   A protocol's documentation site: paper-white page tinted by the brand, sticky
   "on this page" rail, blueprint grid behind the header, the art in a window frame,
   numbered chapters, diagrams on white cards, the contract in a dark code block. */

:root {
  --v-bg: color-mix(in srgb, var(--wl-bg) 3%, #fcfcfd);
  --v-fg: color-mix(in srgb, var(--wl-bg) 22%, #0e1117);
  --v-accent: var(--wl-accent-on-light);
  --v-accent-text: var(--wl-accent-on-light);
  --v-on-accent: #ffffff;
  --v-secondary: var(--wl-secondary-on-light);
  --v-surface: #ffffff;
  --v-surface-2: color-mix(in srgb, var(--v-fg) 6%, #ffffff);
  --v-card-bg: #ffffff;
  --v-line: color-mix(in srgb, var(--v-fg) 11%, transparent);
  --v-line-strong: color-mix(in srgb, var(--v-fg) 22%, transparent);
  --v-seg-1: var(--wl-accent);
  --v-seg-2: var(--wl-secondary);
  --v-seg-3: color-mix(in srgb, var(--wl-accent) 50%, #0e1117);
  --v-seg-4: color-mix(in srgb, var(--wl-secondary) 55%, #ffffff);
  --v-font-body: "Inter", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif;
  --v-font-display: "Inter Display", "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --v-display-weight: 700;
  --v-display-tracking: -0.04em;
  --v-display-lh: 1;
  --v-title-size: clamp(2rem, 3.6vw, 3.2rem);
  --v-radius: 16px;
  --v-radius-lg: 22px;
  --v-shadow: 0 1px 1px rgb(15 20 30 / 0.04), 0 8px 24px -8px rgb(15 20 30 / 0.12);
  --v-sec-gap: clamp(72px, 9vw, 128px);
  --v-maxw: 1040px;

  --wl-label-lore: "Overview";
  --wl-label-features: "Capabilities";
  --wl-label-supply: "Tokenomics";
  --wl-label-flow: "How it works";
  --wl-label-timeline: "Changelog";
  --wl-label-comparison: "Benchmarks";
  --wl-label-tweet: "Referenced";
  --wl-label-facts: "Verified";
  --wl-label-faq: "FAQ";
  --wl-label-access: "Integration";
}

body { background: var(--v-bg); }
:root { --up-side-w: 236px; --up-hero-cols: minmax(0, 1.18fr) minmax(0, 0.82fr); }

/* chrome */
.up-top {
  background: color-mix(in srgb, var(--v-bg) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--v-line);
}
.up-brand__mark { border: 1px solid var(--v-line); }
.up-top__nav .wl-nav__link { color: var(--v-soft); border-radius: 8px; }
.up-top__nav .wl-nav__link:hover, .up-top__nav .wl-nav__link.is-active { color: var(--v-fg); background: var(--v-surface-2); }
.up-top__status { color: var(--v-soft); padding: 7px 12px; border: 1px solid var(--v-line); border-radius: 999px; background: #fff; }

.up-side { border-right: 1px solid var(--v-line); }
.up-side__label { color: var(--v-faint); }
.up-side__nav .wl-nav__link { color: var(--v-soft); }
.up-side__nav .wl-nav__link:hover { color: var(--v-fg); }
.up-side__nav .wl-nav__link.is-active { color: var(--v-accent-text); border-left-color: var(--v-accent); font-weight: 600; background: color-mix(in srgb, var(--wl-accent) 7%, transparent); }
.up-side__ca { background: var(--v-surface-2); }
.up-side__ca-label { color: var(--v-faint); }

/* hero: a documentation page header on blueprint paper */
.up-hero__grid {
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--wl-accent) 9%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--wl-accent) 9%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 75% at 70% 40%, #000 30%, transparent 78%);
}
.up-hero::after {
  content: ""; position: absolute; width: 60vw; height: 60vw; right: -18vw; top: -22vw; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--wl-accent) 16%, transparent), transparent);
}
.up-chip { background: #fff; border: 1px solid var(--v-line-strong); color: var(--v-soft); box-shadow: var(--v-shadow); }
.up-hero__headline .wl-w { background: linear-gradient(180deg, var(--v-fg) 60%, color-mix(in srgb, var(--v-fg) 70%, var(--wl-accent))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.up-hero__subhead { color: var(--v-soft); }
.up-hero__cta .wl-btn { border-radius: 12px; }
.up-hero__cta .wl-btn:not(.wl-btn--primary) { background: #fff; box-shadow: var(--v-shadow); }
.up-tele { background: #fff; border: 1px solid var(--v-line); }
.up-tele dt { color: var(--v-faint); }

.up-panel {
  background: #fff;
  border: 1px solid var(--v-line-strong);
  box-shadow: 0 2px 4px rgb(15 20 30 / 0.04), 0 40px 80px -30px color-mix(in srgb, var(--wl-accent) 45%, rgb(15 20 30 / 0.4));
  transform: perspective(1400px) rotateX(var(--up-tilt-x, 2deg)) rotateY(var(--up-tilt-y, -6deg));
  transition: transform 0.6s var(--v-ease);
}
.up-panel__bar { color: var(--v-faint); border-bottom: 1px solid var(--v-line); background: color-mix(in srgb, var(--v-fg) 2%, #fff); }
.up-dots i:nth-child(1) { background: #ff5f57; }
.up-dots i:nth-child(2) { background: #febc2e; }
.up-dots i:nth-child(3) { background: #28c840; }
.up-panel__live { color: var(--v-faint); }
.up-radar, .up-corner { display: none; }

.up-ticker { border-block: 1px solid var(--v-line); background: #fff; color: var(--v-soft); }
.up-ticker .wl-marquee__item::before { content: "✓"; margin-right: 0.7em; color: var(--v-accent-text); font-weight: 800; }

/* chapters: a hairline halfway between two, never touching either */
.wl-sec + .wl-sec { padding-top: calc(var(--v-sec-gap) * 0.55); }
.wl-sec + .wl-sec .wl-sec__inner { border-top: 1px solid var(--v-line); padding-top: calc(var(--v-sec-gap) * 0.55); }
.wl-sec:first-child { padding-top: clamp(64px, 8vw, 110px); }
.wl-kicker { font-size: 0.74rem; letter-spacing: 0.16em; color: var(--v-accent-text); }
.wl-kicker .wl-ord { padding: 3px 7px; border-radius: 6px; background: color-mix(in srgb, var(--wl-accent) 12%, transparent); opacity: 1; }
.wl-sec__title { color: var(--v-fg); }
.wl-lore__lead { color: var(--v-fg); font-weight: 500; }

.wl-feature { box-shadow: var(--v-shadow); }
.wl-feature:hover { border-color: color-mix(in srgb, var(--wl-accent) 45%, transparent); }
.wl-feature__icon { border-radius: 14px; background: color-mix(in srgb, var(--wl-accent) 10%, #fff); border: 1px solid color-mix(in srgb, var(--wl-accent) 25%, transparent); }

.wl-graphic--supply, .wl-graphic--comparison {
  padding: clamp(24px, 4vw, 48px);
  background: #fff; border: 1px solid var(--v-line); border-radius: var(--v-radius-lg); box-shadow: var(--v-shadow);
}
.wl-donut__ticks line { stroke: color-mix(in srgb, var(--v-fg) 18%, transparent); }
.wl-stats { border-radius: var(--v-radius); box-shadow: var(--v-shadow); }
.wl-stat { background: #fff; }
.wl-stat__value { color: var(--v-fg); }

.wl-node__card { box-shadow: var(--v-shadow); }
.wl-node__card .wl-ord { background: var(--v-fg); color: #fff; }

.wl-fact { box-shadow: var(--v-shadow); }
.wl-fact__mark { background: color-mix(in srgb, var(--wl-secondary) 22%, #fff); color: var(--v-secondary); }
.wl-qa { box-shadow: var(--v-shadow); }
.wl-post { box-shadow: var(--v-shadow); }

/* the contract as a code block */
.wl-ca { background: #0f131b; border-color: #0f131b; color: #e8ecf4; }
.wl-ca__label { color: #8b94a7; }
.wl-ca__value::before { content: "$ "; color: #6c7589; }
.wl-copy { background: var(--wl-accent); color: var(--wl-on-accent); }
.wl-link { background: #fff; box-shadow: var(--v-shadow); }

.up-footer { border-top: 1px solid var(--v-line); color: var(--v-soft); }