@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/montserrat-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:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/montserrat-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/montserrat-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:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/montserrat-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:'Roboto';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/roboto-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';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/roboto-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/roboto-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';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/roboto-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="duel"] {
  
  --c-chrome: #161b24;
  --c-rail: #d4d9e1;

  
  --c-accent2: #c8102e;
  --c-accent2-700: #8f0f1e;
  --c-accent2-tint: #fadee2;
  --c-accent2-soft: color-mix(in srgb, #c8102e 12%, transparent);

  
  --shadow-md: 0 1px 2px rgba(16, 22, 34, .11), 0 12px 24px -14px rgba(16, 22, 34, .34), 0 28px 52px -28px rgba(16, 22, 34, .40);
  --shadow-lg: 0 4px 12px -4px rgba(16, 22, 34, .18), 0 34px 66px -30px rgba(16, 22, 34, .48);
  
  --edge: inset 0 0 0 1px color-mix(in srgb, #151922 12%, transparent);
  --ring: 0 0 0 3px color-mix(in srgb, var(--c-accent) 28%, transparent), 0 0 0 2px var(--c-accent);
}

html[data-family="duel"] h1 { letter-spacing: -.03em; overflow-wrap: break-word; }
html[data-family="duel"] h2 { letter-spacing: -.022em; overflow-wrap: break-word; }
html[data-family="duel"] h3 { letter-spacing: -.014em; overflow-wrap: break-word; }
html[data-family="duel"] .logo { letter-spacing: -.02em; }

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

html[data-family="duel"] .topbar--solid {
  background: var(--c-surface);
  box-shadow: inset 0 -1px 0 0 color-mix(in srgb, #151922 12%, transparent);
}
html[data-family="duel"] .crumbs {
  background: var(--c-rail);
  box-shadow: inset 0 -1px 0 0 color-mix(in srgb, #151922 10%, transparent);
}

html[data-family="duel"] .crumbs__link { color: #4a5261; }
html[data-family="duel"] .crumbs__link:hover { color: var(--c-accent-700); }
html[data-family="duel"] .crumbs__sep { color: color-mix(in srgb, #151922 42%, transparent); }
html[data-family="duel"] .footer {
  background-color: var(--c-chrome);
  background-image: linear-gradient(90deg, var(--c-accent) 0 50%, var(--c-accent2) 50% 100%);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: top left;
  color: #c9d0dc;
}

html[data-family="duel"] .footer__links a { color: #eef1f6; }
html[data-family="duel"] .footer__links a:hover { color: #9db2ff; }
html[data-family="duel"] .footer__note,
html[data-family="duel"] .footer__copy { color: #949eae; }

html[data-family="duel"] .hero::before {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--c-accent) 15%, transparent), transparent 46%),
    linear-gradient(270deg, color-mix(in srgb, var(--c-accent2) 14%, transparent), transparent 46%);
}
html[data-family="duel"][data-skeleton="versus"] .hero::after {
  background-image: url("/assets/family-duel.svg");
  width: 320px; height: 320px; right: -68px; bottom: -58px;
  opacity: .17;
}

@media (max-width: 860px) {
  html[data-family="duel"][data-skeleton="versus"] .hero::after {
    width: 210px; height: 210px; right: -58px; bottom: -46px; opacity: .1;
  }
}

@media (min-width: 900px) {
  html[data-family="duel"][data-skeleton="versus"] .cards::before {
    border-left: 2px solid color-mix(in srgb, var(--c-accent) 55%, transparent);
    border-right: 2px solid color-mix(in srgb, var(--c-accent2) 55%, transparent);
    transform: translateX(-2px);
  }
}
@media (min-width: 1000px) {
  html[data-family="duel"][data-skeleton="versus"] .hero__inner::after {
    border-left: 2px solid color-mix(in srgb, var(--c-accent) 58%, transparent);
    border-right: 2px solid color-mix(in srgb, var(--c-accent2) 58%, transparent);
    transform: translateX(-1px);
  }
}

@media (min-width: 1200px) {
  html[data-family="duel"][data-skeleton="versus"] .topbar__inner::after {
    background: linear-gradient(45deg, var(--c-accent) 0 50%, var(--c-accent2) 50% 100%);
    width: 13px; height: 13px; border-radius: 1px;
  }
}

html[data-family="duel"][data-skeleton="versus"] .cards > .card:nth-child(even) {
  border-top-color: var(--c-accent2);
}
html[data-family="duel"][data-skeleton="versus"] .cards > .card:nth-child(even) .card__tag {
  color: var(--c-accent2-700);
}
html[data-family="duel"][data-skeleton="versus"] .cards > .card:nth-child(even) .card__ic {
  background: var(--c-accent2-tint);
  color: var(--c-accent2-700);
}

html[data-family="duel"][data-skeleton="versus"] .link-cards > .link-card:nth-child(even) {
  border-top-color: color-mix(in srgb, var(--c-accent2) 50%, transparent);
}
html[data-family="duel"][data-skeleton="versus"] .link-cards > .link-card:nth-child(even) .link-card__label {
  color: var(--c-accent2-700);
}

html[data-family="duel"] .hero__badge {
  background: var(--c-accent-tint);
  box-shadow: inset 3px 0 0 0 var(--c-accent2);
}

html[data-family="duel"] .card,
html[data-family="duel"] .link-card,
html[data-family="duel"] .faq__item,
html[data-family="duel"] .toc__list,
html[data-family="duel"] .table__scroll,
html[data-family="duel"] .scheme__art {
  background-color: var(--c-surface);
}

html[data-family="duel"] .btn--primary {
  box-shadow: 0 1px 2px rgba(16, 22, 34, .16), 0 10px 22px -12px color-mix(in srgb, var(--c-accent) 72%, transparent);
}
html[data-family="duel"] .btn--primary:hover {
  box-shadow: 0 2px 4px rgba(16, 22, 34, .18), 0 14px 28px -12px color-mix(in srgb, var(--c-accent) 80%, transparent);
}
html[data-family="duel"] .btn--ghost {
  color: var(--c-accent2-700);
  border-color: color-mix(in srgb, var(--c-accent2) 48%, transparent);
}
html[data-family="duel"] .btn--ghost:hover { background: var(--c-accent2-soft); }

html[data-family="duel"] .table th:last-child:not(:first-child) {
  background: var(--c-accent2-tint);
  color: var(--c-accent2-700);
  border-bottom-color: color-mix(in srgb, var(--c-accent2) 55%, transparent);
}

html[data-family="duel"] .sale {
  box-shadow: var(--shadow), var(--edge);
}

html[data-family="duel"] .scheme .s-box { fill: #ffffff; stroke: color-mix(in srgb, #151922 24%, transparent); }
html[data-family="duel"] .scheme .s-line { stroke: color-mix(in srgb, #151922 38%, transparent); }
html[data-family="duel"] .scheme .s-box--accent { fill: var(--c-accent-tint); stroke: var(--c-accent); }
html[data-family="duel"] .scheme .s-line--accent { stroke: var(--c-accent); }
html[data-family="duel"] .scheme .s-t--accent { fill: var(--c-accent-800); }

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

@media (min-width: 1200px) {
  html[data-family="duel"] .nav__link { padding-left: 7px; padding-right: 7px; }
}