@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/robotomono-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/robotomono-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/robotomono-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/robotomono-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/sourcesans-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/sourcesans-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/sourcesans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/sourcesans-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

html[data-family="signal"] {
  
  --c-chrome: #061a20;

  
  --c-accent2: #e8c07b;
  --c-accent2-700: #f3d9a8;   
  --c-accent2-tint: #372d15;  

  
  --shadow-md: 0 2px 4px rgba(2, 18, 26, .5), 0 10px 22px -8px rgba(2, 18, 26, .6), 0 26px 54px -20px rgba(1, 12, 18, .72);
  --shadow-lg: 0 8px 18px -6px rgba(2, 18, 26, .54), 0 34px 70px -22px rgba(1, 12, 18, .78);
  --edge: inset 0 1px 0 0 color-mix(in srgb, #d7f4f8 9%, transparent), inset 0 0 0 1px color-mix(in srgb, #d7f4f8 10%, transparent);
  --ring: 0 0 0 3px color-mix(in srgb, var(--c-accent) 30%, transparent), 0 0 0 2px var(--c-accent);

  
  --f-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

html[data-family="signal"] h1 { letter-spacing: -.035em; overflow-wrap: break-word; }
html[data-family="signal"] h2 { letter-spacing: -.028em; overflow-wrap: break-word; }
html[data-family="signal"] h3 { letter-spacing: -.015em; overflow-wrap: break-word; }
html[data-family="signal"] .logo { letter-spacing: -.03em; font-size: 17px; }

html[data-family="signal"] .hero__badge,
html[data-family="signal"] .card__tag { letter-spacing: .12em; }

html[data-family="signal"] .topbar--solid,
html[data-family="signal"] .crumbs { background-color: var(--c-chrome); }
html[data-family="signal"] .footer {
  background-color: var(--c-chrome);
  box-shadow: inset 0 1px 0 0 color-mix(in srgb, #d7f4f8 7%, transparent);
  
  background-image: repeating-linear-gradient(
    to right,
    color-mix(in srgb, var(--c-accent) 26%, transparent) 0 3px,
    transparent 3px 14px
  );
  background-size: 14px 2px;
  background-position: left top;
  background-repeat: repeat-x;
}

html[data-family="signal"] .hero::before {
  background:
    repeating-radial-gradient(
      circle at 100% 0%,
      color-mix(in srgb, var(--c-accent) 15%, transparent) 0 1.5px,
      transparent 1.5px 34px
    ),
    radial-gradient(600px 360px at 94% -8%, color-mix(in srgb, var(--c-accent) 20%, transparent), transparent 62%),
    radial-gradient(520px 320px at 74% 118%, color-mix(in srgb, var(--c-accent2) 15%, transparent), transparent 64%),
    repeating-linear-gradient(
      to right,
      color-mix(in srgb, var(--c-accent) 34%, transparent) 0 2px,
      transparent 2px 26px
    );
  background-size: 660px 660px, auto, auto, 26px 10px;
  background-position: right top, right top, right bottom, left bottom;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat-x;
}
html[data-family="signal"] .hero {
  border-bottom-color: color-mix(in srgb, var(--c-accent) 42%, transparent);
}

html[data-family="signal"][data-skeleton="relay"] .hero::after {
  background-image: url("/assets/family-signal.svg");
  opacity: .5;
}

@media (max-width: 899px) {
  html[data-family="signal"] .hero::before {
    background:
      radial-gradient(420px 260px at 100% 0%, color-mix(in srgb, var(--c-accent) 18%, transparent), transparent 64%),
      radial-gradient(360px 240px at 0% 110%, color-mix(in srgb, var(--c-accent2) 12%, transparent), transparent 66%);
    background-size: auto;
    background-position: 0 0;
    background-repeat: no-repeat;
  }
}

html[data-family="signal"] .card,
html[data-family="signal"] .dl,
html[data-family="signal"] .link-card,
html[data-family="signal"] .faq__item,
html[data-family="signal"] .toc__list,
html[data-family="signal"] .scheme__art,
html[data-family="signal"] .figure__img {
  background-image: linear-gradient(180deg, color-mix(in srgb, #d7f4f8 6%, transparent), transparent 44%);
}
html[data-family="signal"] .table__scroll {
  background-image: linear-gradient(180deg, color-mix(in srgb, #d7f4f8 6%, transparent), transparent 22%);
}

html[data-family="signal"][data-skeleton="relay"] .card {
  background-image:
    linear-gradient(180deg, color-mix(in srgb, #d7f4f8 6%, transparent), transparent 44%),
    repeating-linear-gradient(
      to right,
      color-mix(in srgb, var(--c-accent) 30%, transparent) 0 3px,
      transparent 3px 12px
    );
  background-size: auto, 12px 2px;
  background-position: left top, left 24px bottom 13px;
  background-repeat: no-repeat, repeat-x;
}

html[data-family="signal"][data-skeleton="relay"] .card::before {
  background: var(--c-accent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--c-bg) 55%, transparent),
    0 0 16px -2px color-mix(in srgb, var(--c-accent) 75%, transparent);
}

html[data-family="signal"][data-skeleton="relay"] .block__title::before {
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--c-accent) 13%, transparent),
    0 0 14px -2px color-mix(in srgb, var(--c-accent) 60%, transparent);
}
html[data-family="signal"][data-skeleton="relay"] .toc__list li::before {
  box-shadow: 0 0 10px -1px color-mix(in srgb, var(--c-accent) 55%, transparent);
}

html[data-family="signal"] .dl__icon { background: var(--c-chrome); }
html[data-family="signal"] .dl__go {
  border-radius: var(--r-btn);
  color: var(--c-accent-ink);
}
html[data-family="signal"] .dl:hover .dl__go {
  background: var(--c-accent-600);
  color: var(--c-accent-ink);
}

html[data-family="signal"] .btn--primary {
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--c-accent) 75%, transparent), var(--edge);
}
html[data-family="signal"] .btn--primary:hover {
  box-shadow: 0 14px 32px -12px color-mix(in srgb, var(--c-accent) 85%, transparent), var(--edge);
}

html[data-family="signal"] .callout--warn {
  border-left-color: #e0a53c;
  background: rgba(224, 165, 60, .16);
}
html[data-family="signal"] .callout--danger {
  border-left-color: #e2705a;
  background: rgba(226, 112, 90, .15);
}

html[data-family="signal"] .scheme .s-box { fill: var(--c-chrome); stroke: color-mix(in srgb, #d7f4f8 22%, transparent); }
html[data-family="signal"] .scheme .s-line { stroke: color-mix(in srgb, #d7f4f8 34%, transparent); }
html[data-family="signal"] .scheme .s-box--accent { fill: var(--c-accent-tint); stroke: var(--c-accent); }
html[data-family="signal"] .scheme .s-line--accent { stroke: var(--c-accent); }

html[data-family="signal"] ::selection { background: color-mix(in srgb, var(--c-accent) 32%, transparent); }