/* stylelint-disable */
@font-face {
  font-family: roboto_wf;
  src: url(https://obs.duel.me/assets/fonts/roboto/roboto-regular-webfont.woff2) format('woff2'),url(https://obs.duel.me/assets/fonts/roboto/roboto-regular-webfont.woff) format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: roboto_wf;
  src: url(https://obs.duel.me/assets/fonts/roboto/roboto-regularitalic-webfont.woff2) format('woff2'),url(https://obs.duel.me/assets/fonts/roboto/roboto-regularitalic-webfont.woff) format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: roboto_wf;
  src: url(https://obs.duel.me/assets/fonts/roboto/roboto-light-webfont.woff2) format('woff2'),url(https://obs.duel.me/assets/fonts/roboto/roboto-light-webfont.woff) format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: roboto_wf;
  src: url(https://obs.duel.me/assets/fonts/roboto/roboto-medium-webfont.woff2) format('woff2'),url(https://obs.duel.me/assets/fonts/roboto/roboto-medium-webfont.woff) format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: roboto_wf;
  src: url(https://obs.duel.me/assets/fonts/roboto/roboto-mediumitalic-webfont.woff2) format('woff2'),url(https://obs.duel.me/assets/fonts/roboto/roboto-mediumitalic-webfont.woff) format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
.cookie-consent {
  position: fixed;
  display: -webkit-flex;
  display: flex;
  font-size: .95em;
  bottom: 16px;
  left: 16px;
  pointer-events: none;
  right: 16px;
  z-index: 10;
  --color: #222;
  --weakColor: #bbb;
  --radius: var(--primaryActionRadius,var(--btnRadius));
  color: var(--color)
}
.cookie-consent > div {
  pointer-events: auto;
  background: rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(5px);
  border-bottom: 0;
  padding: 1em 1em 1em 1.2rem;
  -webkit-box-shadow: 0 0 3px rgba(0,0,0,.4);
  box-shadow: 0 0 3px rgba(0,0,0,.4);
  border-radius: var(--radius);
  display: -webkit-flex;
  display: flex;
  margin: auto;
  max-width: 40em;
  -webkit-align-items: baseline;
  align-items: baseline
}
.cookie-consent > div a {
  color: inherit;
  padding-bottom: .3em;
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline;
  -webkit-text-decoration-color: var(--weakColor);
  text-decoration-color: var(--weakColor)
}
.cookie-consent > div a:active,
.cookie-consent > div a:focus,
.cookie-consent > div a:hover {
  -webkit-text-decoration-color: inherit;
  text-decoration-color: inherit
}
.cookie-consent button {
  color: #555;
  font-size: .9em;
  border-radius: var(--radius);
  font-weight: 700;
  margin-left: 1.3em;
  background: rgba(0,0,0,.05);
  padding: .4em 1em;
  white-space: nowrap;
  display: inline-block
}
.cookie-consent button:active,
.cookie-consent button:focus,
.cookie-consent button:hover {
  color: var(--color);
  cursor: pointer;
  text-decoration: none
}
.cookie-consent button * {
  pointer-events: none
}
@media (max-width:650px) {
  .cookie-consent {
    font-size: .9rem
  }
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%
}
body {
  margin: 0;
  background: #fdfdfd;
  background: var(--mpBgColor)
}
h1,
input[type=checkbox],
input[type=radio] {
  font-size: 2em
}
hr {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
  overflow: visible
}
code,
kbd,
pre,
samp {
  font-family: monospace,monospace;
  font-size: 1em
}
a {
  background-color: transparent
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted
}
b,
strong {
  font-weight: bolder
}
small {
  font-size: 80%
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}
sub {
  bottom: -.25em
}
sup {
  top: -.5em
}
img {
  border-style: none
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0
}
button,
input {
  overflow: visible
}
button,
select {
  text-transform: none
}
[type=button],
[type=reset],
[type=submit],
button {
  -webkit-appearance: button
}
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0
}
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
  outline: ButtonText dotted 1px
}
fieldset {
  padding: .35em .75em .625em
}
legend {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal
}
progress {
  vertical-align: baseline
}
textarea {
  overflow: auto;
  resize: vertical
}
[type=checkbox],
[type=radio] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto
}
[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}
details {
  display: block
}
summary {
  display: list-item
}
[hidden],
template {
  display: none
}
input[type=password] {
  font-family: Verdana,sans-serif!important;
  letter-spacing: 1px
}
input[type=number] {
  appearance: textfield
}
:disabled {
  -webkit-text-fill-color: currentColor
}
input,
textarea {
  border-radius: var(--inputRadius)
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  opacity: 1;
  color: #999;
  font-family: var(--baseFontFamily,'roboto_wf',Roboto,Arial,sans-serif);
  letter-spacing: 0
}
input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: #999;
  font-family: var(--baseFontFamily,'roboto_wf',Roboto,Arial,sans-serif);
  letter-spacing: 0
}
.control {
  display: block;
  width: 100%;
  padding: .475rem .65rem;
  font-size: max(16px,1rem);
  font-family: inherit;
  line-height: 1.5;
  color: inherit;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: var(--inputRadius)
}
.control:focus {
  border-color: #555
}
.control:disabled {
  background-color: rgba(0,0,0,.025);
  color: #999
}
.control[readonly=readOnly] {
  pointer-events: none;
  color: inherit;
  background-color: rgba(0,0,0,.025);
  border-color: transparent
}
.control[type=checkbox] {
  width: auto;
  padding: 0
}
select.control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font: inherit;
  padding-left: .5rem
}
select.control::-ms-expand {
  display: none
}
.dropdown-bg,
select.control {
  background-image: url("data:image/svg+xml,%3Csvg width%3D%228%22 viewBox%3D%220 0 10 17%22 fill%3D%22black%22 fill-opacity%3D%22.8%22 xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath d%3D%22M1%2C7 l4%2C-6 l4%2C6 zM1%2C10 l4%2C6 l4%2C-6 z%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 8px auto;
  padding-right: 20px
}
.form-group label {
  display: block;
  margin-bottom: .25em;
  font-weight: 700;
  font-size: .8em
}
.form-group .hint {
  color: var(--weakColor);
  display: block;
  font-size: .9em;
  padding-bottom: .2em;
  font-weight: 400
}
.form-group .hint.-inline {
  display: inline;
  padding: 0;
  margin-left: .5rem
}
.form-group + .form-group {
  margin-top: 1.2rem
}
.form-actions {
  margin: 2rem 0 0
}
.form-actions.-standalone {
  margin-top: 0
}
.form-actions .btn {
  min-width: 9em
}
.form-sections {
  display: grid;
  grid-template-columns: clamp(200px,30%,400px) 1fr
}
.form-sections > * {
  min-width: 0
}
.form-sections .form-section__h2 {
  font-size: 1em;
  margin: 0
}
.form-sections .form-section__header,
.form-sections .form-section__header + * {
  padding: 1.85em 0;
  border-top: 1px solid currentColor;
  border-top-color: color-mix(in sRGB,currentColor 7%,transparent)
}
.form-sections .form-section__header:first-child,
.form-sections .form-section__header:first-child + * {
  padding-top: 0;
  border-top: 0
}
.form-sections .form-section__actions[class] {
  border: 0
}
.form-sections .form-section__actions[class] > * {
  margin-top: 0
}
@media (max-width:650px) {
  .form-sections {
    display: block
  }
  .form-sections .form-section__header {
    padding-bottom: 1em
  }
  .form-sections .form-section__header + * {
    border-top: 0;
    padding-top: 0
  }
}
.ng-cloak,
.ng-hide:not(.ng-hide-animate),
.x-ng-cloak,
[data-ng-cloak],
[ng-cloak],
[ng\:cloak],
[x-ng-cloak] {
  display: none!important
}
ng\:form {
  display: block
}
.ng-animate-shim {
  visibility: hidden
}
.ng-anchor {
  position: absolute
}
* {
  margin: 0;
  -webkit-tap-highlight-color: transparent
}
*,
:after,
:before {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit
}
:root {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -ms-overflow-style: scrollbar;
  min-height: 100vh;
  font-family: var(--baseFontFamily,'roboto_wf',Roboto,Arial,sans-serif);
  font-size: var(--baseFontSize,15px);
  line-height: var(--baseLineHeight,1.4)
}
@media (max-width:650px) {
  :root {
    font-size: 18px;
    font-size: var(--mobileBaseFontSize,18px)
  }
}
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative
}
[hidden] {
  display: none!important;
  visibility: hidden!important
}
h1,
h2,
h3,
h4 {
  margin: 0
}
ul {
  padding: 0;
  margin: 0
}
li {
  list-style: none
}
[btn-link],
a {
  color: var(--weakColor);
  text-decoration: none;
  text-decoration-thickness: .1em;
  text-underline-offset: .2em
}
svg[icon][class] {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  pointer-events: none
}
svg[icon][class][icon=notification] {
  width: 1em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2
}
svg[icon][class][icon=chevron-down],
svg[icon][class][icon=chevron-left],
svg[icon][class][icon=chevron-right],
svg[icon][class][icon=chevron-up] {
  stroke: currentColor;
  stroke-width: 2
}
svg[icon][class][icon=logo] {
  width: 2.6em
}
svg[icon][class][icon=clock] {
  stroke-width: 5
}
svg[icon][class][icon=flag] {
  fill: none;
  stroke: currentColor
}
svg[icon][class][icon=check-circle],
svg[icon][class][icon=circle-attention],
svg[icon][class][icon=lightbulb] {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6687
}
svg[icon][class][icon=spin] {
  -webkit-animation: .7s cubic-bezier(.64,.17,.42,.91) infinite spin;
  animation: .7s cubic-bezier(.64,.17,.42,.91) infinite spin;
  stroke-width: 2;
  stroke: currentColor
}
svg[icon][class][icon=spin].off {
  -webkit-animation: none;
  animation: none;
  visibility: hidden
}
@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}
@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}
.btn,
[btn] {
  color: #222;
  margin: 0;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-decoration: none;
  line-height: 1;
  font-family: inherit;
  padding: .9em 1em;
  border-radius: var(--btnRadius);
  border: 1px solid rgba(0,0,0,.125);
  width: var(--btnWidth);
  min-width: var(--btnMinWidth);
  text-align: center;
  cursor: pointer;
  background-color: #f2f2f2;
  vertical-align: bottom;
  white-space: nowrap
}
.btn svg,
[btn] svg {
  pointer-events: none;
  -webkit-flex-shrink: 0;
  flex-shrink: 0
}
.btn > svg:first-child,
[btn] > svg:first-child {
  margin-right: .7rem
}
.btn:active:focus,
[btn]:active:focus {
  outline: 0
}
.btn:disabled,
[btn]:disabled {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  background: #eee;
  color: #999;
  pointer-events: none;
  cursor: help
}
.btn:active,
.btn:focus,
.btn:hover,
[btn]:active,
[btn]:focus,
[btn]:hover {
  -webkit-box-shadow: inset 0 0 10rem 0 rgba(0,0,0,.03);
  box-shadow: inset 0 0 10rem 0 rgba(0,0,0,.03);
  text-decoration: none
}
.btn-primary,
[btn=primary] {
  background-color: var(--primaryAction);
  color: var(--primaryActionText);
  text-transform: var(--primaryActionTextTransform,none);
  border-radius: var(--primaryActionRadius,var(--btnRadius));
  font-weight: var(--primaryActionFontWeight);
  border-width: 0;
  -webkit-transition: .2s;
  transition: .2s;
  font-size: 1em;
  padding: 1em 1.6em
}
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover,
[btn=primary]:active,
[btn=primary]:focus,
[btn=primary]:hover {
  background-color: var(--primaryActionHover);
  color: var(--primaryActionHoverText,var(--primaryActionText))
}
.btn-danger {
  background: #d04f38;
  color: #fff
}
.btn-facebook {
  background: #0076fb;
  border-color: transparent;
  color: #fff
}
.btn > svg[icon=facebook],
.btn > svg[icon=flickr],
.btn > svg[icon=instagram],
.btn > svg[icon=pinterest],
.btn > svg[icon=strava],
.btn > svg[icon=tiktok],
.btn > svg[icon=tumblr],
.btn > svg[icon=twitch],
.btn > svg[icon=twitter],
.btn > svg[icon=vimeo],
.btn > svg[icon=youtube] {
  font-size: 1.25em;
  margin: -.2em .5em -.2em -.2em
}
.btn > svg[icon=strava] {
  font-size: 1.8em;
  margin: -.3em .2em -.3em -.2em
}
.btn.-icon-facebook {
  background: #0076fb;
  color: #fff
}
.btn.-icon-instagram {
  background: -webkit-radial-gradient(circle at bottom left,#ffde8b,#ffd882 1%,#ff8539 13%,#e32978 58%,#ad2dab 80%,#565bca);
  background: radial-gradient(circle at bottom left,#ffde8b,#ffd882 1%,#ff8539 13%,#e32978 58%,#ad2dab 80%,#565bca);
  color: #fff
}
.btn.-icon-youtube {
  background: #ec1b22;
  color: #fff
}
.btn.-icon-twitter {
  background: #00b0ed;
  color: #fff
}
.btn.-icon-tiktok {
  background: #000;
  color: #fff
}
.btn.-icon-strava {
  background: #fc5200;
  color: #fff
}
.btn.-icon-twitch {
  background: #9146ff;
  color: #fff
}
.btn.-icon-pinterest {
  background: #bd081c;
  color: #fff
}
.btn.-icon-vimeo {
  background: #45bbff;
  color: #fff
}
.btn.-icon-tumblr {
  background: #001935;
  color: #fff
}
.btn.-icon-flickr {
  background: #000;
  color: #fff
}
[btn-link] {
  display: inline;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  background: 0;
  -webkit-text-fill-color: unset
}
[btn-link][btn-link=warning] {
  color: var(--textWarning)
}
[btn-link]:active,
[btn-link]:focus,
[btn-link]:hover {
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0
}
.nowrap {
  white-space: nowrap
}
:root {
  --mobile-breakpoint: (max-width: 650px);
  --mobile-breakpoint-up: (min-width: 651px);
  --listItemBg: #f7f7f7;
  --hrColor: #ccc;
  --brandingFacebookLogo: url(https://obs.duel.me/assets/branding/facebook-logo.svg);
  --brandingInstagramLogo: url(https://obs.duel.me/assets/branding/instagram-logo.svg);
  --brandingPinterestLogo: url(https://obs.duel.me/assets/branding/pinterest-logo.svg);
  --brandingStravaLogo: url(https://obs.duel.me/assets/branding/strava-logo.svg);
  --brandingTiktokLogo: url(https://obs.duel.me/assets/branding/tiktok-logo.svg);
  --brandingTwitchLogo: url(https://obs.duel.me/assets/branding/twitch-logo.svg);
  --brandingYoutubeLogo: url(https://obs.duel.me/assets/branding/youtube-logo.svg);
  --textWarning: #de0000;
  --logoShadow: 0 0 1px 0 currentColor,0 0 1px 0 currentColor;
  --underscoreColor: currentColor;
  --underscoreThickness: .18em;
  --underscoreOpacity: .3;
  --edgePadding: 16px;
  --baseFontSize: 16px;
  --border: 1px color-mix(in sRGB,var(--weakColor) 10%,transparent) solid;
  --sectionMargin: 1.5rem;
  --imgBorderRadius: .4rem;
  --displayPicSize: 164px
}
.btn,
button {
  background: 0;
  color: inherit
}
main > .column {
  max-width: 500px;
  margin: 0 auto
}
main a {
  text-decoration: none;
  text-underline-offset: .175em;
  text-decoration-thickness: .1em;
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline;
  color: inherit
}
main a:active,
main a:focus,
main a:hover {
  text-decoration-thickness: .1em
}
main p {
  margin-bottom: .7em;
  max-width: 22em;
  margin-left: auto;
  margin-right: auto
}
.read-more button {
  font-weight: 700;
  color: var(--baseColor);
  cursor: pointer
}
.read-more [data-show=expanded] {
  display: none
}
.read-more [data-show=collapsed],
.read-more.expanded [data-show=expanded] {
  display: inline
}
.read-more.expanded [data-show=collapsed] {
  display: none
}
main section {
  margin: 0 auto;
  padding-top: 1.5rem;
  max-width: 1200px
}
main section > .h1 {
  font-size: 1.5em;
  text-align: left;
  margin-bottom: 1em
}
.tooltip {
  --bg: #454545;
  position: absolute;
  z-index: 2;
  padding: .7em;
  background: var(--bg);
  color: #fff;
  border-radius: .5em
}
.tooltip:after {
  content: '';
  position: absolute;
  -webkit-transform: translateX(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) rotate(45deg);
  transform: translateX(-50%) rotate(45deg);
  border: 8px solid;
  border-radius: 4px
}
.tooltip,
tooltip:after {
  -webkit-box-shadow: rgba(0,0,0,.3) 2px 2px 2px;
  box-shadow: rgba(0,0,0,.3) 2px 2px 2px;
  opacity: 0;
  visibility: hidden
}
.tooltip.top {
  bottom: -webkit-calc(100% + 12px);
  bottom: calc(100% + 12px);
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%)
}
.tooltip.top:after {
  bottom: -8px;
  left: 50%;
  border-color: transparent var(--bg) var(--bg) transparent
}
.tippy-box {
  background: var(--tooltipBackground,#454545);
  padding-bottom: 3px
}
.tippy-content {
  font-weight: 400;
  padding: 10px 15px
}
.tippy-content a {
  color: var(--tooltipTextColor,#fff);
  text-decoration: underline
}
svg[class][icon=check-circle-broken] {
  display: none
}
[copied] .tooltip {
  opacity: 1;
  -webkit-transition: opacity .1s ease-in;
  transition: opacity .1s ease-in;
  visibility: visible
}
[copied] svg[class][icon=copy] {
  display: none
}
[copied] svg[class][icon=check-circle-broken] {
  display: block
}
.catalog-selection .grid {
  display: -webkit-flex;
  display: flex;
  gap: 16px
}
.catalog-selection .grid-col {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -webkit-flex-basis: 20%;
  flex-basis: 20%
}
.catalog-selection .grid-col--2,
.catalog-selection .grid-col--3,
.catalog-selection .grid-col--4 {
  display: none
}
.catalog-selection .grid-item {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  margin-bottom: 16px
}
.catalog-selection .grid-item a {
  display: block;
  text-decoration: none;
  border-radius: var(--imgBorderRadius);
  overflow: hidden;
  margin-bottom: .75rem
}
.catalog-selection .grid-item img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto
}
.catalog-selection .grid-item .catalog-selection__desc {
  display: block;
  font-size: .9em;
  line-height: 1.2;
  color: currentColor
}
@media (min-width:768px) {
  .catalog-selection .grid-col--2 {
    display: block
  }
}
@media (min-width:1000px) {
  .catalog-selection .grid-col--3 {
    display: block
  }
}
@media (min-width:1200px) {
  .catalog-selection .grid-col--4 {
    display: block
  }
}
@supports (display:-webkit-box) {
  .catalog-selection__desc[class][class] {
    display: box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden
  }
}
header {
  background-color: var(--mpHeaderBgColor);
  color: var(--mpHeaderColor);
  padding-bottom: 2.5rem
}
header .container {
  padding: 1.4rem 0
}
header h2 {
  margin-right: auto;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 5px 10px;
  position: relative;
  z-index: 3
}
header h2 small,
header h2 span {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap
}
header h2 span {
  padding: 5px 0
}
header h2 span[tooltip] {
  cursor: pointer;
  gap: 8px
}
header h2 span.separator {
  padding: 0 5px
}
header h2 small {
  font-size: .5em;
  vertical-align: middle;
  opacity: .75
}
header h2 svg[icon=info][class] {
  width: 16px;
  height: 16px;
  min-width: 16px
}
header .row {
  display: -webkit-flex;
  display: flex;
  width: 100%;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  gap: 1.4rem
}
header .row.hide {
  display: none
}
header .brand__logo {
  display: -webkit-flex;
  display: flex;
  padding: 1.4rem 0
}
header .brand__logo > img {
  width: var(--mpLogoSize);
  height: -webkit-calc(var(--aspectRatio) * var(--mpLogoSize));
  height: calc(var(--aspectRatio) * var(--mpLogoSize))
}
header .header__logo {
  display: block;
  position: relative;
  -webkit-flex-basis: var(--displayPicSize);
  flex-basis: var(--displayPicSize);
  -webkit-align-self: flex-start;
  align-self: flex-start;
  padding: 0
}
header .header__logo > img {
  width: var(--displayPicSize);
  border-radius: 50%;
  border: 4px solid #fff;
  -webkit-box-shadow: 0 8px 16px rgba(0,0,0,.25);
  box-shadow: 0 8px 16px rgba(0,0,0,.25)
}
header .header__logo svg {
  position: absolute;
  top: -webkit-calc(85% - 12px);
  top: calc(85% - 12px);
  left: -webkit-calc(85% - 12px);
  left: calc(85% - 12px)
}
header .header__logo .icon-verified {
  width: 24px;
  height: 24px
}
header .wrapper {
  -webkit-flex: 1 0 -webkit-calc(100% - 2.8rem - var(--displayPicSize) - 180px);
  -webkit-flex: 1 0 calc(100% - 2.8rem - var(--displayPicSize) - 180px);
  flex: 1 0 -webkit-calc(100% - 2.8rem - var(--displayPicSize) - 180px);
  flex: 1 0 calc(100% - 2.8rem - var(--displayPicSize) - 180px)
}
header .affiliate {
  -webkit-align-self: start;
  align-self: start;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -webkit-flex-basis: 164px;
  flex-basis: 164px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  border-radius: var(--btnRadius);
  color: var(--primaryActionText);
  background-color: var(--primaryAction);
  font-weight: 700;
  -webkit-transition: .2s;
  transition: .2s
}
header .referral-code {
  margin: 1.4rem 0 0;
  -webkit-justify-content: flex-start;
  justify-content: flex-start
}
header .code {
  -webkit-flex-basis: -webkit-calc(var(--displayPicSize) + .7rem);
  -webkit-flex-basis: calc(var(--displayPicSize) + .7rem);
  flex-basis: -webkit-calc(var(--displayPicSize) + .7rem);
  flex-basis: calc(var(--displayPicSize) + .7rem);
  text-align: center
}
header .bio {
  margin: .7em 0;
  max-width: 100%;
  display: box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden
}
header .header__main,
header .navigation {
  position: relative;
  padding: 0 var(--edgePadding);
  max-width: 1200px;
  margin: 0 auto;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center
}
header .navigation__container {
  border-bottom: var(--border)
}
header .brand__name {
  -webkit-flex: 1;
  flex: 1
}
header .navigation__links {
  -webkit-flex: 3;
  flex: 3
}
header .header__row {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  width: 100%
}
header .header__column {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center
}
.hide {
  display: none
}
.menu__nav {
  display: -webkit-flex;
  display: flex;
  font-size: var(--mpMenuFontSize,.85em)
}
.menu__nav a {
  color: color-mix(in sRGB,var(--mpHeaderColor) 80%,var(--mpHeaderBgColor));
  display: block;
  padding: 1.6em 0;
  font-size: 1em;
  font-style: normal;
  font-weight: 600;
  line-height: 1.6em;
  -webkit-transition: .2s;
  transition: .2s
}
.menu__nav a:hover {
  color: var(--mpHeaderColor)
}
@media (max-width:650px) {
  :root {
    --displayPicSize: 100px
  }
  .menu__toggle {
    display: -webkit-flex;
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 0 var(--edgePadding);
    cursor: pointer
  }
  .menu__toggle > svg {
    display: none;
    margin: auto;
    font-size: 1.7em;
    stroke-width: 2.8
  }
  .menu__toggle > svg.icon-cross {
    stroke-width: 1;
    display: none
  }
  .menu__toggle > svg.icon-menu {
    display: none
  }
  .menu__toggle[aria-expanded=false] .icon-menu,
  .menu__toggle[aria-expanded=true] .icon-cross {
    display: block
  }
  .menu__nav {
    display: none
  }
  .menu__toggle[aria-expanded=true] + .menu__nav {
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--mpHeaderBgColor);
    padding-bottom: 1em;
    z-index: 99
  }
  .menu__toggle[aria-expanded=true] + .menu__nav a {
    padding: var(--edgePadding)
  }
  .menu__toggle[aria-expanded=true] + .menu__nav a:hover {
    text-decoration: underline
  }
  header .header__column {
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
    max-width: 100%
  }
  header h2 {
    -webkit-flex-basis: -webkit-calc(100% - var(--displayPicSize) - .7rem);
    -webkit-flex-basis: calc(100% - var(--displayPicSize) - .7rem);
    flex-basis: -webkit-calc(100% - var(--displayPicSize) - .7rem);
    flex-basis: calc(100% - var(--displayPicSize) - .7rem);
    padding-left: 10px
  }
  header h2 span {
    padding: 2px 0
  }
  header h2 small {
    display: block;
    margin-top: 3px
  }
  header .affiliate,
  header .bio,
  header .wrapper {
    -webkit-flex-basis: 100%;
    flex-basis: 100%;
    min-width: 200px
  }
  header .referral-code {
    margin: 0
  }
  header .referral-code .code {
    -webkit-justify-content: center;
    justify-content: center
  }
  header .code + * {
    text-align: center;
    margin-top: .5em
  }
  header .row {
    gap: .7rem
  }
  header .affiliate {
    -webkit-flex-basis: 100%;
    flex-basis: 100%;
    -webkit-justify-content: center;
    justify-content: center;
    gap: .5em
  }
  .hide-m,
  .row.hide-m {
    display: none
  }
  .row.hide.show-m,
  .row.show-m,
  .show-m {
    display: block
  }
}
@media (min-width:651px) {
  .menu {
    margin-left: auto
  }
  .menu a {
    margin-left: 1.7em
  }
  .menu__toggle {
    display: none
  }
}
.referral-code {
  margin: var(--sectionMargin) 0
}
.referral-code p {
  margin-bottom: .8em
}
.referral-code .code {
  width: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding: .75em 1.25em;
  border: 1px solid var(--Black-200,#d1d1d1);
  border-radius: var(--listItemRadius);
  cursor: pointer;
  -webkit-transition: .2s;
  transition: .2s
}
.referral-code .code:active,
.referral-code .code:focus,
.referral-code .code:hover {
  background-color: color-mix(in sRGB,var(--mpHeaderBgColor) 95%,var(--mpHeaderColor))
}
.referral-code .code .code-prefix {
  font-size: .925em;
  margin-right: .2rem
}
.referral-code .code .code-prefix:after {
  content: ':';
  margin-left: .1ch
}
.referral-code .code .code-text {
  font-weight: 700;
  margin-right: .5rem
}
.referral-code .code span {
  margin-left: .25rem
}
.disclaimer {
  margin: var(--sectionMargin) 0;
  font-size: .9em;
  color: var(--weakColor);
  line-height: 1.3
}
.disclaimer p {
  max-width: 28em
}
main {
  display: block;
  display: -webkit-flex;
  display: flex;
  position: relative;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%
}
.duel-tabs {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
  width: 100%;
  background-color: #fff;
  max-width: 1200px;
  margin: 0 auto;
  top: -2.5rem
}
@media (width > 650px) {
  .duel-tabs {
    -webkit-justify-content: flex-start;
    justify-content: flex-start
  }
}
.duel-tab {
  -webkit-order: 0;
  order: 0;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 2.5rem;
  border-bottom: 2px solid #2029390d;
  border-radius: 0;
  padding-inline: 1rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  color: #000
}
@media (width > 650px) {
  .duel-tab {
    -webkit-flex: 0 0 8rem;
    flex: 0 0 8rem
  }
}
input[type=radio].duel-tab {
  font-size: 1rem
}
.duel-tab:after {
  content: attr(aria-label)
}
.duel-tab:first-of-type {
  margin-inline-start: var(--edgePadding)
}
.duel-tab:last-of-type {
  margin-inline-end: var(--edgePadding)
}
.duel-tab:checked {
  border-bottom-color: var(--primaryAction);
  font-weight: 700;
  color: var(--primaryAction)
}
.duel-tab-content {
  -webkit-order: 1;
  order: 1;
  display: none;
  width: 100%;
  border-top: none;
  padding: 0 var(--edgePadding) 3rem;
  background-color: var(--mpBgColor)
}
:is(.duel-tab:checked) + .duel-tab-content {
  display: block
}
.duel-main-content-placeholder {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  gap: .25rem;
  max-width: 17rem;
  margin-block: 3.5rem;
  margin-inline: auto;
  text-align: center
}
.duel-main-content-placeholder-icon {
  font-size: 1.25rem
}
.duel-main-content-placeholder-primary {
  font-weight: 600
}
.duel-main-content-placeholder-secondary {
  text-wrap: pretty
}
.product-ugc .grid {
  display: -webkit-flex;
  display: flex;
  gap: 16px
}
.product-ugc .grid-col {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -webkit-flex-basis: 20%;
  flex-basis: 20%
}
.product-ugc .grid-col--5 {
  margin-right: 0
}
.product-ugc .grid-col--2,
.product-ugc .grid-col--3,
.product-ugc .grid-col--4 {
  display: none
}
.product-ugc .grid-item {
  display: -webkit-flex;
  display: flex;
  margin-bottom: 16px
}
.product-ugc .grid-item .play-button {
  position: absolute;
  inset: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  pointer-events: none
}
.product-ugc .grid-item .play-button svg {
  width: 2.5rem;
  height: 2.5rem
}
.product-ugc .grid-item button {
  cursor: pointer;
  width: 100%;
  border-radius: var(--imgBorderRadius);
  overflow: hidden
}
.product-ugc .grid-item:not(.-complete) button {
  aspect-ratio: 1/1
}
.product-ugc .grid-item img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto
}
@media (min-width:768px) {
  .product-ugc .grid-col--2 {
    display: block
  }
}
@media (min-width:1000px) {
  .product-ugc .grid-col--3 {
    display: block
  }
}
@media (min-width:1200px) {
  .product-ugc .grid-col--4 {
    display: block
  }
}
.modal {
  opacity: 0;
  --speed: .2s;
  -webkit-transition: var(--speed);
  transition: var(--speed);
  display: -webkit-flex;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  background: rgba(0,0,0,.5);
  overflow-x: hidden;
  overflow-y: auto
}
.modal .modal__body {
  -webkit-transition: var(--speed);
  transition: var(--speed)
}
body.modal-active {
  overflow: hidden
}
body.modal-active .modal {
  opacity: 1
}
.modal__inner {
  padding: var(--edgePadding);
  width: 100%
}
.modal__body {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  background: #fff;
  overflow-y: auto
}
.modal__header {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  border-bottom: var(--border);
  padding: 1.5rem var(--edgePadding);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: var(--mpHeaderBgColor);
  z-index: 2
}
.modal__close {
  display: -webkit-flex;
  display: flex;
  --inset: .7rem;
  cursor: pointer;
  color: var(--weakColor)
}
.modal__close:active,
.modal__close:focus,
.modal__close:hover {
  color: var(--baseColor)
}
.modal__close svg {
  pointer-events: none;
  stroke-width: 2;
  margin: auto;
  font-size: 1.7em
}
.modal__content {
  padding: var(--edgePadding)
}
.modal__items {
  margin-top: .5rem
}
@media (max-width:650px) {
  .modal__body {
    top: 2rem;
    right: 0;
    width: 100%;
    border-top-left-radius: var(--listItemRadius);
    border-top-right-radius: var(--listItemRadius)
  }
  body.modal-active .modal .modal__body {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
  }
  .modal .modal__body {
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%)
  }
}
@media (min-width:651px) {
  body.modal-active .modal .modal__body {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
  }
  .modal .modal__body {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%)
  }
}
.modal .entry .img-pane {
  border-radius: var(--listItemRadius);
  display: block;
  width: 100%;
  padding-top: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover
}
.modal .entry .video-container {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  margin-bottom: 1.3rem
}
.modal .entry .video-container iframe {
  width: 100%;
  min-height: 400px;
  overflow: hidden;
  border-radius: .4rem
}
.modal .entry h2 {
  margin-top: 2rem
}
.modal .entry .entry__products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: .5rem;
  margin: var(--edgePadding) auto
}
.modal .entry .entry__caption {
  margin-top: var(--edgePadding);
  color: var(--weakColor)
}
.modal .entry .product {
  width: 100%;
  margin: 0;
  position: relative;
  line-height: 1.5;
  overflow: hidden
}
.modal .entry .product > a {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0
}
.modal .entry .product .product__img {
  width: 100%
}
.modal .entry .product .product__img .icon-external-link {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: .75em;
  height: .75em;
  border-radius: .4rem;
  padding: .25rem;
  background: rgba(0,0,0,.2);
  backdrop-filter: blur(1rem)
}
.modal .entry .product .product__name {
  margin: .75rem 0;
  font-size: 1em;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden
}