@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local('Inter'),
       url('https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcviYwY.woff2') format('woff2'),
       url('../../shared/fonts/InterVariable.woff2') format('woff2');
}

:root {
  --radius-4:  4px;
  --radius-6:  6px;
  --radius-8:  8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-32: 32px;
  --spacing-2:  2px;
  --spacing-4:  4px;
  --spacing-6:  6px;
  --spacing-8:  8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-44: 44px;
  --spacing-52: 52px;
  --spacing-60: 60px;
  --spacing-80: 80px;
  --color-gray-0:   #ffffff;
  --color-gray-25:  #f6f6f8;
  --color-gray-50:  #e9ebed;
  --color-gray-100: #dde0e4;
  --color-gray-200: #bac1c9;
  --color-gray-300: #9ba4b0;
  --color-gray-400: #8791a1;
  --color-gray-500: #657181;
  --color-gray-600: #535d6a;
  --color-gray-700: #3d434c;
  --color-gray-800: #24282e;
  --color-gray-900: #121417;
  --color-accent-25:  #f5f9ff;
  --color-accent-50:  #ebf5ff;
  --color-accent-100: #cce1ff;
  --color-accent-300: #006aeb;
  --color-accent-400: #0059de;
  --color-accent-600: #003e94;
  --color-accent-700: #00265c;
  --color-positive-25:  #eefbf2;
  --color-positive-50:  #c7f5d5;
  --color-positive-100: #a3f0be;
  --color-positive-200: #6bd18f;
  --color-positive-300: #2cba67;
  --color-positive-400: #00a352;
  --color-positive-500: #00803e;
  --color-positive-600: #006b32;
  --color-negative-25:  #fef6f6;
  --color-negative-50:  #fce4e4;
  --color-negative-100: #fbd5d5;
  --color-negative-200: #f8afaf;
  --color-negative-300: #f67e7e;
  --color-negative-400: #f55b5b;
  --color-negative-500: #db2424;
  --color-negative-600: #b51c1c;
  --color-information-25:  #f2f7ff;
  --color-information-50:  #e0edff;
  --color-information-100: #cce1ff;
  --color-information-200: #99c3ff;
  --color-information-300: #66a6ff;
  --color-information-400: #3d8eff;
  --color-information-500: #006aeb;
  --color-information-600: #0059d6;
  --color-warning-25:  #fff6db;
  --color-warning-50:  #ffe8a3;
  --color-warning-100: #ffdd75;
  --color-warning-200: #ffb429;
  --color-warning-300: #f78f08;
  --color-warning-400: #e56b00;
  --color-warning-500: #c24a00;
  --color-warning-600: #a83200;
  --color-rating-mid: #85b129;
  --color-purple-25:  #f7f5fd;
  --color-purple-50:  #eee8fa;
  --color-purple-100: #e4dcf7;
  --color-purple-200: #cabaef;
  --color-purple-500: #5140de;
  --color-teal-25:  #e4f5f8;
  --color-teal-400: #03a48e;
  --color-teal-500: #0497a0;
  --color-teal-700: #044960;
  --color-navy-900: #16263f;
  --color-alpha-light-12: rgba(255, 255, 255, 0.12);
  --color-alpha-light-24: rgba(255, 255, 255, 0.24);
  --color-alpha-light-44: rgba(255, 255, 255, 0.44);
  --color-alpha-light-76: rgba(255, 255, 255, 0.76);
  --color-alpha-light-84: rgba(255, 255, 255, 0.84);
  --color-alpha-dark-12: rgba(20, 20, 20, 0.12);
  --color-alpha-dark-24: rgba(20, 20, 20, 0.24);
  --color-alpha-dark-44: rgba(20, 20, 20, 0.44);
  --color-alpha-dark-76: rgba(20, 20, 20, 0.76);
  --color-alpha-dark-84: rgba(20, 20, 20, 0.84);
  --color-alpha-gray-24: rgba(194, 194, 194, 0.24);
  --color-loot-poor:      #c2c2c2;
  --color-loot-common:    #939393;
  --color-loot-uncommon:  #119400;
  --color-loot-rare:      #0070dd;
  --color-loot-epic:      #a048e5;
  --color-loot-legendary: #ff8000;
  --color-loot-artifact:  #c6a957;
  --color-loot-heirloom:  #31abc9;
  --color-class-death-knight:      #b2313e;
  --color-class-death-knight-25:   #ffdcdc;
  --color-class-demon-hunter:      #943dc1;
  --color-class-demon-hunter-25:   #f7e8f7;
  --color-class-druid:             #ec8334;
  --color-class-druid-25:          #ffe9be;
  --color-class-evoker:            #439a85;
  --color-class-evoker-25:         #cef7f2;
  --color-class-hunter:            #91ad5f;
  --color-class-hunter-25:         #e4f0cb;
  --color-class-mage:              #6ec4e7;
  --color-class-mage-25:           #dbf0ff;
  --color-class-monk:              #5dd29a;
  --color-class-monk-25:           #e0ffe5;
  --color-class-paladin:           #e591b8;
  --color-class-paladin-25:        #ffeff6;
  --color-class-priest:            #ffffff;
  --color-class-priest-invert:     #9ba4b0;
  --color-class-rogue:             #eadb11;
  --color-class-rogue-25:          #fff8d3;
  --color-class-shaman:            #3370d7;
  --color-class-shaman-25:         #ecf6ff;
  --color-class-warlock:           #8788e6;
  --color-class-warlock-25:        #d7d6f6;
  --color-class-warrior:           #bf9e74;
  --color-class-warrior-25:        #f0e0d6;
}

:root {
  --color-social-facebook:            #0866ff;
  --color-social-facebook-hover:      #3b86ff;
  --color-social-facebook-active:     #0058e6;
  --color-social-pinterest:           #e60023;
  --color-social-pinterest-hover:     #ff304f;
  --color-social-pinterest-active:    #cf1935;
  --color-social-youtube:             #ff0000;
  --color-social-youtube-hover:       #ff3f3f;
  --color-social-youtube-active:      #df0000;
  --color-social-discord:             #5c6bc0;
  --color-social-discord-hover:       #7f8cd5;
  --color-social-discord-active:      #5563b3;
  --color-social-twitter-old:         #1da1f2;
  --color-social-twitter-old-hover:   #48baff;
  --color-social-twitter-old-active:  #2491d3;
}

:root {
  --gradient-scrim-image: linear-gradient(180deg, rgba(13, 13, 13, 0) 0%, rgba(13, 13, 13, 0.64) 100%);
  --gradient-scrim-game: linear-gradient(180deg, rgba(20, 20, 20, 0.01) 0%, rgba(20, 20, 20, 0.88) 100%);
  --gradient-social-instagram-icon: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1 1' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect width='1' height='1' fill='url(../../shared/%23g)'/><defs><radialGradient id='g' cx='0' cy='0' r='10' gradientTransform='matrix(0.0977 -0.0953125 0.0886475 0.671675 0 1)'><stop stop-color='rgb(255,221,85)' offset='0'/><stop stop-color='rgb(255,153,74)' offset='0.17282'/><stop stop-color='rgb(255,118,68)' offset='0.25923'/><stop stop-color='rgb(255,84,62)' offset='0.34564'/><stop stop-color='rgb(241,77,89)' offset='0.50923'/><stop stop-color='rgb(228,70,117)' offset='0.67282'/><stop stop-color='rgb(200,55,171)' offset='1'/></radialGradient></defs></svg>");
  --gradient-social-instagram-icon-hover: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1 1' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect width='1' height='1' fill='url(../../shared/%23g)'/><defs><radialGradient id='g' cx='0' cy='0' r='10' gradientTransform='matrix(0.0977 -0.0953125 0.0886475 0.671675 0 1)'><stop stop-color='rgb(255,221,85)' offset='0.057292'/><stop stop-color='rgb(255,153,74)' offset='0.35937'/><stop stop-color='rgb(255,118,68)' offset='0.51042'/><stop stop-color='rgb(255,84,62)' offset='0.66146'/><stop stop-color='rgb(241,77,89)' offset='0.74609'/><stop stop-color='rgb(228,70,117)' offset='0.83073'/><stop stop-color='rgb(200,55,171)' offset='1'/></radialGradient></defs></svg>");
  --gradient-social-instagram-icon-active: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1 1' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect width='1' height='1' fill='url(../../shared/%23g)'/><defs><radialGradient id='g' cx='0' cy='0' r='10' gradientTransform='matrix(0.0977 -0.0953125 0.0886475 0.671675 0 1)'><stop stop-color='rgb(255,84,62)' offset='0'/><stop stop-color='rgb(241,77,89)' offset='0.25'/><stop stop-color='rgb(228,70,117)' offset='0.5'/><stop stop-color='rgb(200,55,171)' offset='1'/></radialGradient></defs></svg>");
  --gradient-social-instagram-label: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1 1' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect width='1' height='1' fill='url(../../shared/%23g)'/><defs><radialGradient id='g' cx='0' cy='0' r='10' gradientTransform='matrix(0.0977 -0.0953125 0.0886475 0.671675 0 1)'><stop stop-color='rgb(255,221,85)' offset='0'/><stop stop-color='rgb(255,153,74)' offset='0.067561'/><stop stop-color='rgb(255,118,68)' offset='0.10134'/><stop stop-color='rgb(255,84,62)' offset='0.13512'/><stop stop-color='rgb(241,77,89)' offset='0.3396'/><stop stop-color='rgb(227,69,117)' offset='0.54407'/><stop stop-color='rgb(200,55,171)' offset='1'/></radialGradient></defs></svg>");
  --gradient-social-instagram-label-hover: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1 1' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect width='1' height='1' fill='url(../../shared/%23g)'/><defs><radialGradient id='g' cx='0' cy='0' r='10' gradientTransform='matrix(0.0977 -0.0953125 0.0886475 0.671675 0 1)'><stop stop-color='rgb(255,221,85)' offset='0'/><stop stop-color='rgb(255,153,74)' offset='0.16146'/><stop stop-color='rgb(255,118,68)' offset='0.24219'/><stop stop-color='rgb(255,84,62)' offset='0.32292'/><stop stop-color='rgb(241,77,89)' offset='0.59115'/><stop stop-color='rgb(227,69,117)' offset='0.85938'/><stop stop-color='rgb(200,55,171)' offset='1'/></radialGradient></defs></svg>");
  --gradient-social-instagram-label-active: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1 1' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect width='1' height='1' fill='url(../../shared/%23g)'/><defs><radialGradient id='g' cx='0' cy='0' r='10' gradientTransform='matrix(0.0977 -0.0953125 0.0886475 0.671675 0 1)'><stop stop-color='rgb(255,84,62)' offset='0'/><stop stop-color='rgb(241,77,89)' offset='0.15104'/><stop stop-color='rgb(227,69,117)' offset='0.30208'/><stop stop-color='rgb(200,55,171)' offset='1'/></radialGradient></defs></svg>");
}

:root {
  --shadow-4: 0 2px 4px rgba(20, 20, 20, 0.04);
  --shadow-12: 0 4px 12px rgba(20, 20, 20, 0.12);
}

:root {
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --text-display-48-size:        48px;
  --text-display-48-line-height: 48px;
  --text-display-48-weight:      600;
  --text-display-40-size:        40px;
  --text-display-40-line-height: 44px;
  --text-display-40-weight:      600;
  --text-display-36-size:        36px;
  --text-display-36-line-height: 40px;
  --text-display-36-weight:      600;
  --text-display-32-size:        32px;
  --text-display-32-line-height: 38px;
  --text-display-32-weight:      600;
  --text-display-28-size:        28px;
  --text-display-28-line-height: 34px;
  --text-display-28-weight:      600;
  --text-display-24-size:        24px;
  --text-display-24-line-height: 32px;
  --text-display-24-weight:      600;
  --text-display-22-size:        22px;
  --text-display-22-line-height: 28px;
  --text-display-22-weight:      600;
  --text-display-20-size:        20px;
  --text-display-20-line-height: 28px;
  --text-display-20-weight:      600;
  --text-display-18-size:        18px;
  --text-display-18-line-height: 24px;
  --text-display-18-weight:      600;
  --text-display-16-size:        16px;
  --text-display-16-line-height: 22px;
  --text-display-16-weight:      600;
  --text-display-14-size:        14px;
  --text-display-14-line-height: 20px;
  --text-display-14-weight:      600;
  --text-display-12-size:        12px;
  --text-display-12-line-height: 20px;
  --text-display-12-weight:      600;
  --text-display-12c-size:        12px;
  --text-display-12c-line-height: 16px;
  --text-display-12c-weight:      600;
  --text-body-18-size:        18px;
  --text-body-18-line-height: 28px;
  --text-body-18-weight:      400;
  --text-body-16-size:        16px;
  --text-body-16-line-height: 24px;
  --text-body-16-weight:      400;
  --text-body-14-size:        14px;
  --text-body-14-line-height: 20px;
  --text-body-14-weight:      400;
  --text-body-12-size:        12px;
  --text-body-12-line-height: 16px;
  --text-body-12-weight:      400;
  --text-body-18m-size:        18px;
  --text-body-18m-line-height: 28px;
  --text-body-18m-weight:      500;
  --text-body-16m-size:        16px;
  --text-body-16m-line-height: 24px;
  --text-body-16m-weight:      500;
  --text-body-14m-size:        14px;
  --text-body-14m-line-height: 20px;
  --text-body-14m-weight:      500;
  --text-body-12m-size:        12px;
  --text-body-12m-line-height: 16px;
  --text-body-12m-weight:      500;
  --text-body-11m-size:        11px;
  --text-body-11m-line-height: 12px;
  --text-body-11m-weight:      500;
  --text-body-8m-size:         8px;
  --text-body-8m-line-height:  8px;
  --text-body-8m-weight:       500;
}

.text-display-48 { font-family: var(--font-family-base); font-size: var(--text-display-48-size); line-height: var(--text-display-48-line-height); font-weight: var(--text-display-48-weight); }
.text-display-40 { font-family: var(--font-family-base); font-size: var(--text-display-40-size); line-height: var(--text-display-40-line-height); font-weight: var(--text-display-40-weight); }
.text-display-36 { font-family: var(--font-family-base); font-size: var(--text-display-36-size); line-height: var(--text-display-36-line-height); font-weight: var(--text-display-36-weight); }
.text-display-32 { font-family: var(--font-family-base); font-size: var(--text-display-32-size); line-height: var(--text-display-32-line-height); font-weight: var(--text-display-32-weight); }
.text-display-28 { font-family: var(--font-family-base); font-size: var(--text-display-28-size); line-height: var(--text-display-28-line-height); font-weight: var(--text-display-28-weight); }
.text-display-24 { font-family: var(--font-family-base); font-size: var(--text-display-24-size); line-height: var(--text-display-24-line-height); font-weight: var(--text-display-24-weight); }
.text-display-22 { font-family: var(--font-family-base); font-size: var(--text-display-22-size); line-height: var(--text-display-22-line-height); font-weight: var(--text-display-22-weight); }
.text-display-20 { font-family: var(--font-family-base); font-size: var(--text-display-20-size); line-height: var(--text-display-20-line-height); font-weight: var(--text-display-20-weight); }
.text-display-18 { font-family: var(--font-family-base); font-size: var(--text-display-18-size); line-height: var(--text-display-18-line-height); font-weight: var(--text-display-18-weight); }
.text-display-16 { font-family: var(--font-family-base); font-size: var(--text-display-16-size); line-height: var(--text-display-16-line-height); font-weight: var(--text-display-16-weight); }
.text-display-14 { font-family: var(--font-family-base); font-size: var(--text-display-14-size); line-height: var(--text-display-14-line-height); font-weight: var(--text-display-14-weight); }
.text-display-12 { font-family: var(--font-family-base); font-size: var(--text-display-12-size); line-height: var(--text-display-12-line-height); font-weight: var(--text-display-12-weight); }

.text-body-18   { font-family: var(--font-family-base); font-size: var(--text-body-18-size);  line-height: var(--text-body-18-line-height);  font-weight: var(--text-body-18-weight);  }
.text-body-16   { font-family: var(--font-family-base); font-size: var(--text-body-16-size);  line-height: var(--text-body-16-line-height);  font-weight: var(--text-body-16-weight);  }
.text-body-14   { font-family: var(--font-family-base); font-size: var(--text-body-14-size);  line-height: var(--text-body-14-line-height);  font-weight: var(--text-body-14-weight);  }
.text-body-12   { font-family: var(--font-family-base); font-size: var(--text-body-12-size);  line-height: var(--text-body-12-line-height);  font-weight: var(--text-body-12-weight);  }

.text-body-18m  { font-family: var(--font-family-base); font-size: var(--text-body-18m-size); line-height: var(--text-body-18m-line-height); font-weight: var(--text-body-18m-weight); }
.text-body-16m  { font-family: var(--font-family-base); font-size: var(--text-body-16m-size); line-height: var(--text-body-16m-line-height); font-weight: var(--text-body-16m-weight); }
.text-body-14m  { font-family: var(--font-family-base); font-size: var(--text-body-14m-size); line-height: var(--text-body-14m-line-height); font-weight: var(--text-body-14m-weight); }
.text-body-12m  { font-family: var(--font-family-base); font-size: var(--text-body-12m-size); line-height: var(--text-body-12m-line-height); font-weight: var(--text-body-12m-weight); }
.text-body-11m  { font-family: var(--font-family-base); font-size: var(--text-body-11m-size); line-height: var(--text-body-11m-line-height); font-weight: var(--text-body-11m-weight); }
.text-body-8m   { font-family: var(--font-family-base); font-size: var(--text-body-8m-size);  line-height: var(--text-body-8m-line-height);  font-weight: var(--text-body-8m-weight);  }

.prose {
  --prose-heading-weight: var(--text-display-36-weight);
  --prose-h1-size:        var(--text-display-36-size);
  --prose-h1-line-height: var(--text-display-36-line-height);
  --prose-h2-size:        var(--text-display-28-size);
  --prose-h2-line-height: var(--text-display-28-line-height);
  --prose-h3-size:        var(--text-display-24-size);
  --prose-h3-line-height: var(--text-display-24-line-height);
  --prose-h4-size:        var(--text-display-20-size);
  --prose-h4-line-height: var(--text-display-20-line-height);
  --prose-h5-size:        var(--text-display-18-size);
  --prose-h5-line-height: var(--text-display-18-line-height);
  --prose-h6-size:        var(--text-display-16-size);
  --prose-h6-line-height: var(--text-display-16-line-height);
  --prose-gap-h1: var(--spacing-32);
  --prose-gap-h2: var(--spacing-24);
  --prose-gap-h3: var(--spacing-20);
  --prose-gap-h4: var(--spacing-16);
  --prose-gap-h5: var(--spacing-12);
  --prose-gap-h6: var(--spacing-8);
  --prose-flow:    var(--spacing-16);
  --prose-section: var(--spacing-60);
  --prose-marker-size:   var(--spacing-8);
  --prose-marker-gap:    var(--spacing-12);
  --prose-list-offset:   var(--spacing-8);
  --prose-list-indent:   var(--spacing-16);
  --prose-list-flow:     var(--spacing-8);
  --prose-list-flow-top: var(--spacing-16);
  font-family: var(--font-family-base);
  color: var(--color-gray-700);
}

.prose-page {
  container-type: inline-size;
  container-name: prose-page;
}

.prose > * + * {
  padding-top: var(--prose-flow);
}

.prose > * + :where(h1, h2, h3, h4, h5, h6) {
  padding-top: var(--prose-section);
}

.prose > :where(h1) + * { padding-top: var(--prose-gap-h1); }
.prose > :where(h2) + * { padding-top: var(--prose-gap-h2); }
.prose > :where(h3) + * { padding-top: var(--prose-gap-h3); }
.prose > :where(h4) + * { padding-top: var(--prose-gap-h4); }
.prose > :where(h5) + * { padding-top: var(--prose-gap-h5); }
.prose > :where(h6) + * { padding-top: var(--prose-gap-h6); }

.prose :where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--prose-heading-weight);
  color: var(--color-gray-900);
  font-optical-sizing: none;
}

.prose :where(h1) { font-size: var(--prose-h1-size); line-height: var(--prose-h1-line-height); }
.prose :where(h2) { font-size: var(--prose-h2-size); line-height: var(--prose-h2-line-height); }
.prose :where(h3) { font-size: var(--prose-h3-size); line-height: var(--prose-h3-line-height); }
.prose :where(h4) { font-size: var(--prose-h4-size); line-height: var(--prose-h4-line-height); }
.prose :where(h5) { font-size: var(--prose-h5-size); line-height: var(--prose-h5-line-height); }
.prose :where(h6) { font-size: var(--prose-h6-size); line-height: var(--prose-h6-line-height); }

.prose :where(p) {
  margin: 0;
  font-size: var(--text-body-16-size);
  line-height: var(--text-body-16-line-height);
  font-weight: var(--text-body-16-weight);
  color: var(--color-gray-700);
}

.prose :where(a) {
  color: var(--color-accent-400);
  font-weight: var(--text-body-16m-weight);
  text-decoration: none;
}

.prose :where(strong, b) {
  font-weight: var(--text-body-16m-weight);
  color: var(--color-gray-900);
}

.prose :where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-gray-900);
  font-size: var(--text-body-16-size);
  line-height: var(--text-body-16-line-height);
  font-weight: var(--text-body-16-weight);
}

.prose :where(ul) { padding-left: var(--prose-list-offset); }

.prose :where(li) + :where(li)   { padding-top: var(--prose-list-flow); }
.prose > :where(ul, ol) > :where(li) + :where(li) { padding-top: var(--prose-list-flow-top); }

.prose :where(li) > :where(ul, ol) {
  padding-top: var(--prose-list-flow);
  padding-left: var(--prose-list-indent);
}

.prose :where(ul) > :where(li) {
  display: grid;
  grid-template-columns: var(--prose-marker-size) 1fr;
  column-gap: var(--prose-marker-gap);
}

.prose :where(ul) > :where(li)::before {
  content: "";
  width: var(--prose-marker-size);
  height: var(--prose-marker-size);
  border-radius: 50%;
  background: var(--color-accent-400);
  margin-top: var(--spacing-8);
}

.prose :where(li) > :where(ul, ol) { grid-column: 1 / -1; }

.prose :where(li li li) {
  color: var(--color-gray-700);
}

.prose :where(ul) :where(li li li)::before {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--color-accent-400);
}

.prose :where(ol) {
  counter-reset: prose-ol;
}

.prose :where(ol) > :where(li) {
  display: block;
  counter-increment: prose-ol;
}

.prose :where(ol) > :where(li)::before {
  content: counters(prose-ol, ".") ". ";
}

@container prose-page (max-width: 767px) {
  .prose > * {
    --prose-h1-size:        var(--text-display-24-size) !important;
    --prose-h1-line-height: var(--text-display-24-line-height) !important;
    --prose-h2-size:        var(--text-display-22-size) !important;
    --prose-h2-line-height: var(--text-display-22-line-height) !important;
    --prose-h3-size:        var(--text-display-20-size) !important;
    --prose-h3-line-height: var(--text-display-20-line-height) !important;
    --prose-h4-size:        var(--text-display-18-size) !important;
    --prose-h4-line-height: var(--text-display-18-line-height) !important;
    --prose-h5-size:        var(--text-display-16-size) !important;
    --prose-h5-line-height: var(--text-display-16-line-height) !important;
    --prose-h6-size:        var(--text-display-14-size) !important;
    --prose-h6-line-height: var(--text-display-14-line-height) !important;
    --prose-gap-h1: var(--spacing-20) !important;
    --prose-gap-h2: var(--spacing-16) !important;
    --prose-gap-h3: var(--spacing-16) !important;
    --prose-gap-h4: var(--spacing-12) !important;
    --prose-gap-h5: var(--spacing-8) !important;
    --prose-gap-h6: var(--spacing-8) !important;
    --prose-section: var(--spacing-40) !important;
  }
}

.prose--compact > * {
  --prose-h2-size:        var(--text-display-20-size);
  --prose-h2-line-height: var(--text-display-20-line-height);
  --prose-h3-size:        var(--text-display-18-size);
  --prose-h3-line-height: var(--text-display-18-line-height);
  --prose-h4-size:        var(--text-display-16-size);
  --prose-h4-line-height: var(--text-display-16-line-height);
  --prose-gap-h2: var(--spacing-12);
  --prose-gap-h3: var(--spacing-12);
  --prose-gap-h4: var(--spacing-12);
  --prose-flow:    var(--spacing-24);
  --prose-section: var(--spacing-40);
}

:root {
  --grid-columns: 4;
  --grid-gutter: var(--spacing-16);
}

@media (min-width: 768px) {
  :root { --grid-columns: 12; }
}

@media (min-width: 1280px) {
  :root { --grid-gutter: var(--spacing-24); }
}

.container {
  box-sizing: border-box;
  width: 100%;
  margin-inline: auto;
  --container-pad: var(--spacing-20);
  padding-inline: var(--container-pad);
}

@media (min-width: 1280px) {
  .container {
    max-width: 1440px;
    --container-pad: 64px;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
}

.bp-container { container-type: inline-size; }

.bp-scope {
  --grid-columns: 4;
  --grid-gutter: var(--spacing-16);
  --bp-tablet: 0;
  --bp-desktop: 0;
  --only-desktop: none;
  --below-desktop: flex;
  --only-tablet: none;
  --only-mobile: inline;
  --from-tablet: none;
  --from-tablet-flex: none;
  --below-tablet-flex: flex;
  --bp-mlandscape: 0;
  --bp-tlandscape: 0;
  --from-mlandscape: none;
  --below-mlandscape: inline;
  --from-tlandscape: none;
  --below-tlandscape: flex;
  --sticky-below-tablet: sticky;
  --absolute-from-tablet: static;
  --scrollx-below-desktop: auto;
  --scrollx-below-tablet: auto;
}

@container (min-width: 536px) {
  .bp-scope {
    --bp-mlandscape: 1 !important;
    --from-mlandscape: inline !important;
    --below-mlandscape: none !important;
  }
}

@container (min-width: 728px) {
  .bp-scope {
    --grid-columns: 12 !important;
    --bp-tablet: 1 !important;
    --only-tablet: inline !important;
    --only-mobile: none !important;
    --from-tablet: block !important;
    --from-tablet-flex: flex !important;
    --below-tablet-flex: none !important;
    --sticky-below-tablet: static !important;
    --absolute-from-tablet: absolute !important;
    --scrollx-below-tablet: visible !important;
  }
}

@container (min-width: 960px) {
  .bp-scope {
    --bp-tlandscape: 1 !important;
    --from-tlandscape: flex !important;
    --below-tlandscape: none !important;
  }
}

@container (min-width: 1152px) {
  .bp-scope {
    --grid-gutter: var(--spacing-24) !important;
    --bp-desktop: 1 !important;
    --only-desktop: flex !important;
    --below-desktop: none !important;
    --only-tablet: none !important;
    --scrollx-below-desktop: visible !important;
  }
}

.bp-scope {
  --bleed-below-tablet:  calc((1 - var(--bp-tablet))  * var(--container-pad, 0px));
  --bleed-below-desktop: calc((1 - var(--bp-desktop)) * var(--container-pad, 0px));
  --bleed: 0px;
}

.bleed {
  align-self: stretch;
  width: auto;
  margin-inline: calc(-1 * var(--bleed));
  padding-inline: var(--bleed);
  scroll-padding-inline: var(--bleed);
}

.acc {
  --acc-divider: inset 0 -1px 0 0 var(--color-gray-50);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  box-shadow: var(--acc-divider);
  font-family: var(--font-family-base);
  font-optical-sizing: none;
}

.acc__header {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-20);
  width: 100%;
  padding: var(--spacing-20) 0;
  box-sizing: border-box;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.acc__title {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  color: var(--color-gray-900);
  overflow-wrap: break-word;
}

.acc__header:hover .acc__title,
.acc__header:focus-visible .acc__title,
.acc--hover .acc__title { color: var(--color-gray-500); }

.acc__header:focus-visible {
  outline: 2px solid var(--color-accent-400);
  outline-offset: 2px;
}

.acc__icon {
  display: inline-flex;
  flex: none;
  width: var(--spacing-20);
  height: var(--spacing-20);
  color: var(--color-gray-900);
}
.acc__icon svg { display: block; width: 100%; height: 100%; }

.acc__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-32);
  width: 100%;
  box-sizing: border-box;
  padding-bottom: var(--spacing-36);
}

.acc__text {
  margin: 0;
  width: 100%;
  color: var(--color-gray-700);
  overflow-wrap: break-word;
}

.acc--closed .acc__content { display: none; }

.acc--accent { padding-left: var(--spacing-32); }
.acc--accent .acc__content { padding-right: var(--spacing-32); }

.acc--accent.acc--open {
  background: var(--color-gray-0);
  box-shadow: inset var(--spacing-4) 0 0 0 var(--color-accent-400), var(--acc-divider);
}

.acc--accent.acc--open .acc__icon { display: none; }

.badge {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  border-radius: var(--radius-4);
  overflow: hidden;
  font-family: var(--font-family-base);
  white-space: nowrap;
}

.badge__dot {
  flex: none;
  width: 6px;
  height: 6px;
}
.badge__dot svg { display: block; width: 100%; height: 100%; }

.badge--sm { padding: var(--spacing-4); }
.badge--md { gap: var(--spacing-6); padding: var(--spacing-4) var(--spacing-8); }
.badge--lg { gap: var(--spacing-6); padding: var(--spacing-4) var(--spacing-10); }

.badge--primary { color: var(--color-gray-0); }
.badge--primary.badge--brand  { background: var(--color-accent-400); }
.badge--primary.badge--gray   { background: var(--color-gray-400); }
.badge--primary.badge--orange { background: var(--color-warning-300); }
.badge--primary.badge--green  { background: var(--color-positive-400); }
.badge--primary.badge--blue   { background: var(--color-information-400); }
.badge--primary.badge--red    { background: var(--color-negative-400); }
.badge--primary.badge--purple { background: var(--color-loot-epic); }
.badge--primary.badge--teal   { background: var(--color-teal-400); }

.badge--secondary.badge--brand  { background: var(--color-accent-25);      color: var(--color-accent-600); }
.badge--secondary.badge--gray   { background: var(--color-gray-25);        color: var(--color-gray-500); }
.badge--secondary.badge--orange { background: var(--color-warning-25);     color: var(--color-warning-400); }
.badge--secondary.badge--green  { background: var(--color-positive-50);    color: var(--color-positive-500); }
.badge--secondary.badge--blue   { background: var(--color-information-25);  color: var(--color-information-500); }
.badge--secondary.badge--red    { background: var(--color-negative-50);    color: var(--color-negative-500); }
.badge--secondary.badge--purple { background: var(--color-purple-25);      color: var(--color-loot-epic); }
.badge--secondary.badge--teal   { background: var(--color-teal-25);        color: var(--color-teal-500); }

.badge--timer { background: var(--color-gray-0); color: var(--color-gray-900); }
.badge--sale  { padding: var(--spacing-4) var(--spacing-6); }

.brc {
  display: flex;
  align-items: center;
}

.brc--s { gap: var(--spacing-4); }
.brc--m { gap: var(--spacing-8); }

.brc__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-gray-500);
  cursor: pointer;
}

.brc__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  opacity: 0;
}
.brc--m .brc__link::after { bottom: 0; }
.brc--s .brc__link::after { bottom: 1px; }

.brc__link:hover,
.brc__link--hover { color: var(--color-gray-600); }

.brc__link:hover::after,
.brc__link--hover::after { opacity: 1; }

.brc__link:active,
.brc__link--active { color: var(--color-gray-700); }

.brc__link:active::after,
.brc__link--active::after { opacity: 0; }

.brc__current {
  color: var(--color-gray-200);
  cursor: default;
}
.brc__current::after { content: none; }

.brc__sep {
  flex: none;
  display: block;
  color: var(--color-gray-200);
}
.brc--m .brc__sep { width: 16px; height: 16px; stroke-width: 2.4; }
.brc--s .brc__sep { width: 12px; height: 12px; stroke-width: 3.2; }

.btn {
  --btn-icon-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: none;
  border-radius: var(--radius-8);
  background: transparent;
  font-family: var(--font-family-base);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
}

.btn__label { display: inline-block; }

.btn__icon {
  display: inline-flex;
  flex: none;
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
}
.btn__icon svg { display: block; width: 100%; height: 100%; }

.btn--sm { gap: var(--spacing-4); padding: var(--spacing-6) var(--spacing-12); --btn-icon-size: 16px; }
.btn--md { gap: var(--spacing-8); padding: var(--spacing-10) var(--spacing-16); --btn-icon-size: 16px; }
.btn--lg { gap: var(--spacing-8); padding: var(--spacing-10) var(--spacing-16); --btn-icon-size: 20px; }

.btn--icon-only.btn--sm { padding: var(--spacing-8); }
.btn--icon-only.btn--md { padding: var(--spacing-12); }
.btn--icon-only.btn--lg { padding: var(--spacing-12); }

.btn--primary { background: var(--color-accent-400); color: var(--color-gray-0); }
.btn--primary.btn--hover,
.btn--primary:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { background: var(--color-accent-300); }
.btn--primary.btn--active,
.btn--primary:not(.btn--disabled):not(.btn--loading):not(:disabled):active { background: var(--color-accent-600); }
.btn--primary.btn--disabled,
.btn--primary:disabled { background: var(--color-accent-100); }
.btn--primary.btn--loading { background: var(--color-accent-100); }

.btn--secondary {
  background: var(--color-gray-0);
  color: var(--color-gray-900);
  box-shadow: inset 0 0 0 1px var(--color-gray-100), var(--shadow-4);
}
.btn--secondary.btn--hover,
.btn--secondary:not(.btn--disabled):not(.btn--loading):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px var(--color-accent-400), var(--shadow-4);
  color: var(--color-accent-400);
}
.btn--secondary.btn--active,
.btn--secondary:not(.btn--disabled):not(.btn--loading):not(:disabled):active {
  box-shadow: inset 0 0 0 1px var(--color-accent-600), var(--shadow-4);
  color: var(--color-accent-600);
}
.btn--secondary.btn--disabled,
.btn--secondary:disabled {
  box-shadow: inset 0 0 0 1px var(--color-gray-50); color: var(--color-gray-100);
}
.btn--secondary.btn--loading { box-shadow: inset 0 0 0 1px var(--color-gray-50); }

.btn--tertiary {
  background: var(--color-accent-25);
  color: var(--color-accent-400);
  box-shadow: inset 0 0 0 1px var(--color-accent-100), var(--shadow-4);
}
.btn--tertiary.btn--hover,
.btn--tertiary:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { color: var(--color-accent-300); }
.btn--tertiary.btn--active,
.btn--tertiary:not(.btn--disabled):not(.btn--loading):not(:disabled):active { color: var(--color-accent-600); }
.btn--tertiary.btn--disabled,
.btn--tertiary:disabled { box-shadow: none; color: var(--color-accent-100); }
.btn--tertiary.btn--loading { box-shadow: none; }

.btn--ghost { background: transparent; color: var(--color-gray-800); }
.btn--ghost.btn--hover,
.btn--ghost:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { color: var(--color-accent-400); }
.btn--ghost.btn--active,
.btn--ghost:not(.btn--disabled):not(.btn--loading):not(:disabled):active { color: var(--color-accent-600); }
.btn--ghost.btn--disabled,
.btn--ghost:disabled { color: var(--color-gray-100); }

.btn--primary.btn--positive { background: var(--color-positive-500); }
.btn--primary.btn--positive.btn--hover,
.btn--primary.btn--positive:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { background: var(--color-positive-400); }
.btn--primary.btn--positive.btn--active,
.btn--primary.btn--positive:not(.btn--disabled):not(.btn--loading):not(:disabled):active { background: var(--color-positive-600); }
.btn--primary.btn--positive.btn--disabled,
.btn--primary.btn--positive:disabled { background: var(--color-positive-50); }
.btn--primary.btn--positive.btn--loading { background: var(--color-positive-500); }

.btn--primary.btn--negative { background: var(--color-negative-500); }
.btn--primary.btn--negative.btn--hover,
.btn--primary.btn--negative:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { background: var(--color-negative-400); }
.btn--primary.btn--negative.btn--active,
.btn--primary.btn--negative:not(.btn--disabled):not(.btn--loading):not(:disabled):active { background: var(--color-negative-600); }
.btn--primary.btn--negative.btn--disabled,
.btn--primary.btn--negative:disabled { background: var(--color-negative-50); }
.btn--primary.btn--negative.btn--loading { background: var(--color-negative-500); }

.btn--ghost.btn--negative { color: var(--color-negative-500); }
.btn--ghost.btn--negative.btn--hover,
.btn--ghost.btn--negative:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { color: var(--color-negative-400); }
.btn--ghost.btn--negative.btn--active,
.btn--ghost.btn--negative:not(.btn--disabled):not(.btn--loading):not(:disabled):active { color: var(--color-negative-600); }
.btn--ghost.btn--negative.btn--disabled,
.btn--ghost.btn--negative:disabled { color: var(--color-negative-50); }

.btn--primary.btn--overlay { background: var(--color-accent-400); color: var(--color-gray-0); }
.btn--primary.btn--overlay.btn--hover,
.btn--primary.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { background: var(--color-accent-300); }
.btn--primary.btn--overlay.btn--active,
.btn--primary.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):active { background: var(--color-accent-600); }

.btn--primary.btn--overlay.btn--disabled,
.btn--primary.btn--overlay:disabled { background: var(--color-gray-700); color: var(--color-gray-500); }
.btn--primary.btn--overlay.btn--loading { background: var(--color-gray-700); }

.btn--primary.btn--positive.btn--overlay { background: var(--color-positive-400); }
.btn--primary.btn--positive.btn--overlay.btn--hover,
.btn--primary.btn--positive.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { background: var(--color-positive-300); }
.btn--primary.btn--positive.btn--overlay.btn--active,
.btn--primary.btn--positive.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):active { background: var(--color-positive-500); }
.btn--primary.btn--positive.btn--overlay.btn--disabled,
.btn--primary.btn--positive.btn--overlay:disabled { background: var(--color-gray-700); color: var(--color-gray-500); }
.btn--primary.btn--positive.btn--overlay.btn--loading { background: var(--color-positive-400); }

.btn--primary.btn--negative.btn--overlay { background: var(--color-negative-500); }
.btn--primary.btn--negative.btn--overlay.btn--hover,
.btn--primary.btn--negative.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { background: var(--color-negative-400); }
.btn--primary.btn--negative.btn--overlay.btn--active,
.btn--primary.btn--negative.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):active { background: var(--color-negative-600); }
.btn--primary.btn--negative.btn--overlay.btn--disabled,
.btn--primary.btn--negative.btn--overlay:disabled { background: var(--color-gray-700); color: var(--color-gray-500); }
.btn--primary.btn--negative.btn--overlay.btn--loading { background: var(--color-negative-500); }

.btn--secondary.btn--overlay {
  background: transparent;
  color: var(--color-gray-0);
  box-shadow: inset 0 0 0 1px var(--color-alpha-light-24), var(--shadow-4);
}
.btn--secondary.btn--overlay.btn--hover,
.btn--secondary.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):hover {
  box-shadow: inset 0 0 0 1px var(--color-gray-0), var(--shadow-4);
  color: var(--color-gray-0);
}
.btn--secondary.btn--overlay.btn--active,
.btn--secondary.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):active {
  box-shadow: inset 0 0 0 1px var(--color-alpha-light-84), var(--shadow-4);
  color: var(--color-alpha-light-84);
}
.btn--secondary.btn--overlay.btn--disabled,
.btn--secondary.btn--overlay:disabled {
  box-shadow: inset 0 0 0 1px var(--color-alpha-light-24);
  color: var(--color-alpha-light-24);
}
.btn--secondary.btn--overlay.btn--loading { box-shadow: inset 0 0 0 1px var(--color-alpha-light-24); }

.btn--tertiary.btn--overlay {
  background: transparent;
  color: var(--color-accent-400);
  box-shadow: none;
}
.btn--tertiary.btn--overlay.btn--hover,
.btn--tertiary.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { color: var(--color-accent-300); }
.btn--tertiary.btn--overlay.btn--active,
.btn--tertiary.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):active { color: var(--color-accent-600); }
.btn--tertiary.btn--overlay.btn--disabled,
.btn--tertiary.btn--overlay:disabled { color: var(--color-gray-600); }

.btn--ghost.btn--overlay { color: var(--color-gray-0); }
.btn--ghost.btn--overlay.btn--hover,
.btn--ghost.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { color: var(--color-gray-200); }
.btn--ghost.btn--overlay.btn--active,
.btn--ghost.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):active { color: var(--color-gray-300); }
.btn--ghost.btn--overlay.btn--disabled,
.btn--ghost.btn--overlay:disabled { color: var(--color-gray-600); }

.btn--ghost.btn--negative.btn--overlay { color: var(--color-negative-400); }
.btn--ghost.btn--negative.btn--overlay.btn--hover,
.btn--ghost.btn--negative.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):hover { color: var(--color-negative-500); }
.btn--ghost.btn--negative.btn--overlay.btn--active,
.btn--ghost.btn--negative.btn--overlay:not(.btn--disabled):not(.btn--loading):not(:disabled):active { color: var(--color-negative-600); }
.btn--ghost.btn--negative.btn--overlay.btn--disabled,
.btn--ghost.btn--negative.btn--overlay:disabled { color: var(--color-gray-600); }

.btn--primary.btn--overlay .btn__spinner,
.btn--secondary.btn--overlay .btn__spinner,
.btn--ghost.btn--overlay .btn__spinner { color: var(--color-gray-0); }
.btn--tertiary.btn--overlay .btn__spinner { color: var(--color-accent-400); }
.btn--ghost.btn--negative.btn--overlay .btn__spinner { color: var(--color-negative-400); }

.btn:focus-visible {
  outline: 2px solid var(--color-accent-400);
  outline-offset: 2px;
}

.btn--disabled, .btn:disabled { cursor: default; }

.btn--loading { cursor: default; }
.btn--loading .btn__icon,
.btn--loading .btn__label { visibility: hidden; }
.btn__spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
}
.btn__spinner svg {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  animation: btn-spinner-rotate 0.8s linear infinite;
}
.btn--loading .btn__spinner { display: inline-flex; }

@keyframes btn-spinner-rotate {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .btn__spinner svg { animation: none; }
}

.btn--secondary .btn__spinner,
.btn--tertiary .btn__spinner,
.btn--ghost .btn__spinner { color: var(--color-accent-400); }
.btn--ghost.btn--negative .btn__spinner { color: var(--color-negative-500); }

.btn__indicator {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}

.btn-social {
  --bs-bg: var(--color-gray-900);
  --bs-bg-hover: var(--color-gray-700);
  --bs-bg-active: var(--color-gray-900);
  --bs-img: none;
  --bs-img-hover: none;
  --bs-img-active: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  box-sizing: border-box;
  border: 0;
  border-radius: var(--radius-8);
  color: var(--color-gray-0);
  background-color: var(--bs-bg);
  background-image: var(--bs-img);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-family-base);
}

.btn-social--md { padding: var(--spacing-10) var(--spacing-16); }
.btn-social--sm { padding: var(--spacing-6) var(--spacing-12); }
.btn-social--md.btn-social--icon-only { padding: var(--spacing-12); }
.btn-social--sm.btn-social--icon-only { padding: var(--spacing-8); }

.btn-social__icon {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.btn-social__label { white-space: nowrap; }

.btn-social:hover,
.btn-social:focus-visible,
.btn-social--hover {
  background-color: var(--bs-bg-hover);
  background-image: var(--bs-img-hover);
}

.btn-social:focus-visible { outline: none; }

.btn-social:active,
.btn-social--active {
  background-color: var(--bs-bg-active);
  background-image: var(--bs-img-active);
}

.btn-social:disabled,
.btn-social:disabled:hover,
.btn-social:disabled:active,
.btn-social--disabled,
.btn-social--disabled:hover,
.btn-social--disabled:active {
  background-color: var(--color-gray-100);
  background-image: none;
  cursor: default;
}

.btn-social--facebook {
  --bs-bg: var(--color-social-facebook);
  --bs-bg-hover: var(--color-social-facebook-hover);
  --bs-bg-active: var(--color-social-facebook-active);
}

.btn-social--pinterest {
  --bs-bg: var(--color-social-pinterest);
  --bs-bg-hover: var(--color-social-pinterest-hover);
  --bs-bg-active: var(--color-social-pinterest-active);
}

.btn-social--youtube {
  --bs-bg: var(--color-social-youtube);
  --bs-bg-hover: var(--color-social-youtube-hover);
  --bs-bg-active: var(--color-social-youtube-active);
}

.btn-social--discord {
  --bs-bg: var(--color-social-discord);
  --bs-bg-hover: var(--color-social-discord-hover);
  --bs-bg-active: var(--color-social-discord-active);
}

.btn-social--twitter-old {
  --bs-bg: var(--color-social-twitter-old);
  --bs-bg-hover: var(--color-social-twitter-old-hover);
  --bs-bg-active: var(--color-social-twitter-old-active);
}

.btn-social--instagram {
  --bs-bg: transparent;
  --bs-bg-hover: transparent;
  --bs-bg-active: transparent;
  --bs-img: var(--gradient-social-instagram-label);
  --bs-img-hover: var(--gradient-social-instagram-label-hover);
  --bs-img-active: var(--gradient-social-instagram-label-active);
}

.btn-social--instagram.btn-social--icon-only {
  --bs-img: var(--gradient-social-instagram-icon);
  --bs-img-hover: var(--gradient-social-instagram-icon-hover);
  --bs-img-active: var(--gradient-social-instagram-icon-active);
}

.chips {
  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  gap: var(--spacing-4);
  border-radius: var(--radius-32);
  font-family: var(--font-family-base);
  white-space: nowrap;
  cursor: pointer;
}

.chips--s { padding: var(--spacing-6) var(--spacing-12); }
.chips--m { padding: var(--spacing-8) var(--spacing-16); }

.chips--s.chips--trailing-counter,
.chips--s.chips--trailing-cross   { padding-right: var(--spacing-6); }
.chips--m.chips--trailing-counter { padding-right: var(--spacing-8); }
.chips--m.chips--trailing-cross   { padding-right: var(--spacing-12); }

.chips--default  { background: var(--color-gray-0);     color: var(--color-gray-900);   box-shadow: inset 0 0 0 1px var(--color-gray-100); }
.chips--hover    { background: var(--color-gray-0);     color: var(--color-accent-600); box-shadow: inset 0 0 0 1px var(--color-accent-600); }
.chips--active   { background: var(--color-accent-400); color: var(--color-gray-0); }
.chips--disabled { background: var(--color-gray-25);    color: var(--color-gray-200); }

.chips--removable.chips--default  { background: var(--color-accent-400); color: var(--color-gray-0); box-shadow: none; }
.chips--removable.chips--hover    { background: var(--color-accent-300); color: var(--color-gray-0); box-shadow: none; }
.chips--removable.chips--active   { background: var(--color-accent-400); color: var(--color-gray-0); box-shadow: none; }
.chips--removable.chips--disabled { background: var(--color-gray-25);    color: var(--color-gray-200); box-shadow: none; }

.chips__cross { flex: none; display: block; }
.chips__cross svg { display: block; width: 100%; height: 100%; }
.chips--s .chips__cross { width: 12px; height: 12px; }
.chips--m .chips__cross { width: 16px; height: 16px; }

.chips__indicator { position: absolute; top: -1px; right: -1px; }
.chips--active .chips__indicator { top: 0; right: 0; }
.chips .indicator { color: var(--color-positive-300); }

.chips--default:not(.chips--removable):not(.chips--disabled):hover {
  color: var(--color-accent-600);
  box-shadow: inset 0 0 0 1px var(--color-accent-600);
}

.chips--removable.chips--default:not(.chips--disabled):hover {
  background: var(--color-accent-300);
}
.chips:focus-visible {
  outline: 2px solid var(--color-accent-400);
  outline-offset: 2px;
}

.combobox {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  width: 320px;
  font-family: var(--font-family-base);
}

.combobox__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  width: 100%;
}
.combobox__label-text { color: var(--color-gray-900); }
.combobox__req        { color: var(--color-negative-500); }
.combobox__optional   { color: var(--color-gray-300); }

.combobox__tooltip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  color: var(--color-gray-200);
}
.combobox__tooltip svg { display: block; width: 16px; height: 16px; }

.combobox__field {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  width: 100%;
  padding: var(--spacing-10) var(--spacing-16);
  border-radius: var(--radius-8);
  background: var(--color-gray-0);
  box-shadow: inset 0 0 0 1px var(--color-gray-100), var(--shadow-4);
  overflow: hidden;
  cursor: pointer;
}

.combobox__lead {
  flex-shrink: 0;
  display: flex;
  color: var(--color-gray-400);
}
.combobox__lead svg { display: block; width: 20px; height: 20px; }

.combobox__lead-avatar {
  flex-shrink: 0;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 200px;
  object-fit: cover;
}

.combobox__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.combobox__placeholder { color: var(--color-gray-300); white-space: nowrap; }
.combobox__value       { color: var(--color-gray-800); white-space: nowrap; }

.combobox__caret {
  flex-shrink: 0;
  width: 1px;
  height: 18px;
  background: var(--color-gray-800);
}

.combobox__clear {
  flex-shrink: 0;
  display: flex;
  color: var(--color-gray-200);
}
.combobox__clear svg { display: block; width: 16px; height: 16px; }

.combobox__chevron {
  flex-shrink: 0;
  display: flex;
  color: var(--color-gray-400);
}
.combobox__chevron svg { display: block; width: 20px; height: 20px; }

.combobox__hint { margin: 0; color: var(--color-gray-400); width: 100%; }
.combobox__hint--error { color: var(--color-negative-500); }

.combobox--hover .combobox__field { box-shadow: inset 0 0 0 1px var(--color-gray-200), var(--shadow-4); }
.combobox--focus .combobox__field { box-shadow: inset 0 0 0 2px var(--color-accent-400), var(--shadow-4); }

.combobox--status-error .combobox__field { box-shadow: inset 0 0 0 1px var(--color-negative-500), var(--shadow-4); }
.combobox--status-error.combobox--hover .combobox__field { box-shadow: inset 0 0 0 1px var(--color-negative-600), var(--shadow-4); }
.combobox--status-error.combobox--focus .combobox__field { box-shadow: inset 0 0 0 2px var(--color-negative-500), var(--shadow-4); }

.combobox--disabled .combobox__field {
  box-shadow: inset 0 0 0 1px var(--color-gray-50), var(--shadow-4);
  background: var(--color-gray-25);
  cursor: not-allowed;
}
.combobox--disabled .combobox__label-text,
.combobox--disabled .combobox__optional,
.combobox--disabled .combobox__tooltip,
.combobox--disabled .combobox__lead,
.combobox--disabled .combobox__placeholder,
.combobox--disabled .combobox__value,
.combobox--disabled .combobox__chevron,
.combobox--disabled .combobox__hint {
  color: var(--color-gray-100);
}
.combobox--disabled .combobox__lead-avatar { opacity: 0.4; }

.combobox--focus .combobox__field { overflow: visible; }

.combobox__menu {
  position: absolute;
  left: -2px;
  right: -2px;
  top: 46px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-4);
  background: var(--color-gray-0);
  border: 1px solid var(--color-gray-50);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-4);
  max-height: calc(
    8 * (var(--text-body-16-line-height) + var(--spacing-8) * 2) + var(--spacing-4) * 2
  );
  overflow-y: auto;
  overscroll-behavior: contain;
  cursor: default;
}

.combobox__menu .di { width: 100%; }

.combobox__group {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--spacing-8) var(--spacing-12);
  border-radius: var(--radius-4);
  color: var(--color-gray-600);
}

.combobox__scrollbar {
  position: absolute;
  top: var(--spacing-8);
  right: 3px;
  bottom: var(--spacing-8);
  width: 4px;
}
.combobox__scrollbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 75%;
  background: var(--color-gray-50);
  border-radius: var(--radius-8);
}

.combobox--live .combobox__input {
  flex: 1 1 0;
  min-width: 0;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  background: transparent;
  color: var(--color-gray-800);
  font-family: inherit;
}
.combobox--live .combobox__input::placeholder { color: var(--color-gray-300); opacity: 1; }

.combobox--live .combobox__menu { display: none; }
.combobox--live.combobox--open .combobox__menu { display: flex; }
.combobox--live.combobox--open .combobox__field { overflow: visible; }
.combobox--live .combobox__field:focus-within {
  box-shadow: inset 0 0 0 2px var(--color-accent-400), var(--shadow-4);
}

.combobox--live.combobox--status-error .combobox__field,
.combobox--live.combobox--status-error .combobox__field:focus-within {
  box-shadow: inset 0 0 0 2px var(--color-negative-500), var(--shadow-4);
}

.combobox--live .combobox__clear { cursor: pointer; }
.combobox--live:not(.combobox--filled) .combobox__clear { display: none; }

.combobox--live .combobox__lead-avatar { display: none; }
.combobox--live.combobox--filled .combobox__lead-avatar { display: block; }

.combobox--live .di[hidden],
.combobox--live .combobox__group[hidden] { display: none; }

.combobox--live .di--active { background: var(--color-gray-25); }
.combobox--live .di--live .di__check { display: none; }
.combobox--live .di--live.di--selected .di__check { display: block; }

.counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: var(--radius-24);
  font-family: var(--font-family-base);
  text-align: center;
  white-space: nowrap;
}

.counter--s { min-width: var(--spacing-16); height: var(--spacing-16); padding-inline: var(--spacing-4); }
.counter--m { min-width: var(--spacing-20); height: var(--spacing-20); padding-inline: var(--spacing-6); }
.counter--l { min-width: var(--spacing-24); height: var(--spacing-24); padding-inline: var(--spacing-8); }

.counter--primary { color: var(--color-gray-0); }
.counter--primary.counter--default  { background: var(--color-accent-400); }
.counter--primary.counter--disabled { background: var(--color-gray-100); }
.counter--primary.counter--error    { background: var(--color-negative-500); }

.counter--secondary.counter--default  { background: var(--color-gray-25);     color: var(--color-gray-900); }
.counter--secondary.counter--disabled { background: var(--color-gray-0);      color: var(--color-gray-100); }
.counter--secondary.counter--error    { background: var(--color-negative-25); color: var(--color-negative-500); }

.di {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 236px;
  border-radius: var(--radius-4);
  background: transparent;
  color: var(--color-gray-900);
  font-family: var(--font-family-base);
  cursor: pointer;
}
.di--s { padding: var(--spacing-8); }
.di--m { padding: var(--spacing-8) var(--spacing-12); }

.di__content {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: center;
  gap: var(--spacing-8);
  overflow: hidden;
}

.di__label {
  flex: 1 0 0;
  min-width: 0;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.di__icon {
  flex-shrink: 0;
  display: block;
  color: var(--color-gray-400);
}
.di__icon svg { display: block; width: 100%; height: 100%; }
.di--s .di__icon { width: 16px; height: 16px; }
.di--m .di__icon { width: 20px; height: 20px; }

.di__avatar {
  flex-shrink: 0;
  display: block;
  border-radius: 200px;
  object-fit: cover;
}
.di--s .di__avatar { width: 16px; height: 16px; }
.di--m .di__avatar { width: 20px; height: 20px; }

.di__box {
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-4);
  border: 1px solid var(--color-gray-200);
  background: var(--color-gray-0);
  color: var(--color-gray-0);
}
.di--s .di__box { width: 16px; height: 16px; }
.di--m .di__box { width: 20px; height: 20px; }
.di__box svg { display: none; width: 100%; height: 100%; }
.di__box--checked {
  background: var(--color-accent-400);
  border-color: var(--color-accent-400);
}
.di__box--checked svg { display: block; }

.di__check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: block;
  color: var(--color-accent-400);
}
.di__check svg { display: block; width: 100%; height: 100%; }

.di__counter {
  flex-shrink: 0;
  color: var(--color-gray-300);
  white-space: nowrap;
}

.di__spinner { flex-shrink: 0; }
.di--s .di__spinner { width: 16px; height: 16px; }
.di--m .di__spinner { width: 20px; height: 20px; }

.di--hover { background: var(--color-gray-25); }

.di--selected { background: var(--color-gray-25); }
.di--selected.di--checkbox { background: var(--color-gray-0); }

.di--disabled { cursor: default; }
.di--disabled .di__label,
.di--disabled .di__counter,
.di--disabled .di__icon { color: var(--color-gray-100); }
.di--disabled .di__avatar { opacity: 0.4; }
.di--disabled .di__box {
  background: var(--color-gray-25);
  border-color: var(--color-gray-50);
}

.di--live:not(.di--disabled):not(.di--selected):hover { background: var(--color-gray-25); }
.di--live:focus-visible {
  outline: 2px solid var(--color-accent-400);
  outline-offset: -2px;
}

.di--live .di__check { display: none; }
.di--live.di--selected .di__check { display: block; }

.fq {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  font-family: var(--font-family-base);
  font-optical-sizing: none;
  gap: var(--spacing-12);
}
.fq *,
.fq *::before,
.fq *::after { box-sizing: border-box; }
.fq p { margin: 0; }

.fq--l {
  gap: var(--spacing-24);
  padding-block: var(--spacing-60);
  box-shadow: inset 0 1px 0 var(--color-gray-100);
}

.fq--s.fq--reasons,
.fq--s.fq--other { gap: var(--spacing-20); }

.fq__head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  width: 100%;
}
.fq__title { color: var(--color-gray-900); }
.fq__subtitle { color: var(--color-gray-500); }

.fq__text {
  color: var(--color-gray-500);
  width: 100%;
}

.fq__buttons {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
}

.fq--l .fq__btn { width: 92px; }
.fq__btn { width: 80px; }

.fq__reasons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8);
  width: 100%;
}
.fq__reason { width: 100%; }

.textarea.fq__textarea {
  width: 100%;
  gap: var(--spacing-4);
}
.fq__textarea .textarea__field { height: 136px; }
.fq__textarea .textarea__control { height: 100%; min-height: 0; resize: none; }

.fq__field-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-8);
  flex-wrap: wrap;
  width: 100%;
}
.textarea__hint.fq__counter { color: var(--color-gray-400); margin: 0; width: auto; }

.fq__error {
  display: none;
  margin: 0;
  color: var(--color-negative-500);
}
.textarea--status-error .fq__error { display: block; }

.notif.fq__notif {
  width: 100%;
  box-shadow: inset 0 0 0 1px var(--color-positive-100);
}
.fq__notif .notif__body {
  padding: var(--spacing-12) var(--spacing-16);
  gap: var(--spacing-8);
}

.fq__step { display: none; width: 100%; }
.fq--default .fq__step--default,
.fq--success .fq__step--success,
.fq--reasons .fq__step--form,
.fq--other   .fq__step--form { display: flex; }

.fq__step--form {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-24);
}
.fq--s .fq__step--form { gap: var(--spacing-20); }

.fq__step--form .fq__textarea { display: none; }
.fq--other .fq__step--form .fq__textarea { display: flex; }

.radio {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  font-family: var(--font-family-base);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.radio__control {
  display: flex;
  align-items: center;
  min-height: var(--text-body-16-line-height);
  flex-shrink: 0;
}

.radio__box {
  box-sizing: border-box;
  flex-shrink: 0;
  width: var(--spacing-20);
  height: var(--spacing-20);
  border-radius: var(--radius-32);
  border: 1px solid var(--color-gray-200);
  background: var(--color-gray-0);
}

.radio--checked .radio__box {
  border-width: 5px;
  border-color: var(--color-accent-400);
}

.radio--hover .radio__box { border-color: var(--color-accent-400); }
.radio--hover.radio--checked .radio__box { border-color: var(--color-accent-600); }

.radio--disabled { cursor: not-allowed; }
.radio--disabled .radio__box {
  background: var(--color-gray-25);
  border-color: var(--color-gray-50);
}
.radio--disabled.radio--checked .radio__box {
  background: var(--color-gray-0);
  border-color: var(--color-accent-100);
}

.radio__text {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  min-height: var(--text-body-16-line-height);
  word-break: break-word;
  white-space: nowrap;
}

.radio__label { color: var(--color-gray-900); }
.radio__desc { color: var(--color-gray-400); }
.radio__suffix { color: var(--color-positive-500); }
.radio__emoji { color: var(--color-warning-400); }

.radio--disabled .radio__label,
.radio--disabled .radio__desc,
.radio--disabled .radio__emoji { color: var(--color-gray-100); }
.radio--disabled .radio__suffix { color: var(--color-positive-50); }

.radio:not(.radio--disabled):hover .radio__box {
  border-color: var(--color-accent-400);
}
.radio:not(.radio--disabled):hover.radio--checked .radio__box {
  border-color: var(--color-accent-600);
}
.radio:focus-visible { outline: none; }
.radio:focus-visible .radio__box {
  outline: 2px solid var(--color-accent-400);
  outline-offset: 2px;
}

.textarea {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  width: 320px;
  font-family: var(--font-family-base);
}

.textarea__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  width: 100%;
}
.textarea__label-text { color: var(--color-gray-900); }
.textarea__req        { color: var(--color-negative-500); }
.textarea__optional   { color: var(--color-gray-300); }

.textarea__label .tooltip { flex-shrink: 0; }

.textarea__field {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  width: 100%;
  padding: var(--spacing-10) var(--spacing-16);
  border-radius: var(--radius-8);
  background: var(--color-gray-0);
  box-shadow: inset 0 0 0 1px var(--color-gray-100), var(--shadow-4);
}

.textarea__control {
  box-sizing: content-box;
  width: 100%;
  min-height: calc(var(--text-body-16-line-height) * 3);
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--color-gray-800);
  resize: vertical;
}
.textarea__control::placeholder { color: var(--color-gray-300); opacity: 1; }

.textarea__value       { color: var(--color-gray-800); }
.textarea__placeholder { color: var(--color-gray-300); }
.textarea__content {
  min-height: calc(var(--text-body-16-line-height) * 3);
  color: var(--color-gray-800);
}
.textarea__caret {
  display: inline-block;
  width: 1px;
  height: 20px;
  vertical-align: text-bottom;
  background: var(--color-gray-800);
}

.textarea__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-8);
}
.textarea__counter { color: var(--color-gray-300); white-space: nowrap; }
.textarea--status-error .textarea__counter { color: var(--color-negative-500); }

.textarea__hint { margin: 0; width: 100%; color: var(--color-gray-400); }
.textarea__hint--error { color: var(--color-negative-500); }
.textarea__hint--warning {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  color: var(--color-warning-400);
}
.textarea__hint--warning .textarea__hint-icon {
  flex-shrink: 0;
  display: flex;
  color: var(--color-warning-300);
}
.textarea__hint--warning .textarea__hint-icon svg { display: block; width: 16px; height: 16px; }

.textarea--hover .textarea__field { box-shadow: inset 0 0 0 1px var(--color-gray-200), var(--shadow-4); }
.textarea--focus .textarea__field { box-shadow: inset 0 0 0 2px var(--color-accent-400), var(--shadow-4); }

.textarea--status-error .textarea__field { box-shadow: inset 0 0 0 1px var(--color-negative-500), var(--shadow-4); }
.textarea--status-error.textarea--focus .textarea__field { box-shadow: inset 0 0 0 2px var(--color-negative-500), var(--shadow-4); }

.textarea--live .textarea__field:hover { box-shadow: inset 0 0 0 1px var(--color-gray-200), var(--shadow-4); }
.textarea--live .textarea__field:focus-within { box-shadow: inset 0 0 0 2px var(--color-accent-400), var(--shadow-4); }
.textarea--live.textarea--status-error .textarea__field,
.textarea--live.textarea--status-error .textarea__field:hover { box-shadow: inset 0 0 0 1px var(--color-negative-500), var(--shadow-4); }
.textarea--live.textarea--status-error .textarea__field:focus-within { box-shadow: inset 0 0 0 2px var(--color-negative-500), var(--shadow-4); }

.textarea--disabled .textarea__field {
  box-shadow: inset 0 0 0 1px var(--color-gray-50), var(--shadow-4);
  background: var(--color-gray-25);
}
.textarea--disabled .textarea__label-text,
.textarea--disabled .textarea__optional,
.textarea--disabled .tooltip__trigger,
.textarea--disabled .textarea__value,
.textarea--disabled .textarea__placeholder,
.textarea--disabled .textarea__content,
.textarea--disabled .textarea__control,
.textarea--disabled .textarea__counter,
.textarea--disabled .textarea__hint {
  color: var(--color-gray-100);
}
.textarea--disabled .textarea__control::placeholder { color: var(--color-gray-100); }
.textarea--disabled .textarea__control { cursor: not-allowed; resize: none; }

.rate {
  --rate-value: 5;
  --rate-color: var(--color-positive-400);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.rate--5   { --rate-value: 5;   --rate-color: var(--color-positive-400); }
.rate--4-5 { --rate-value: 4.5; --rate-color: var(--color-positive-400); }
.rate--4   { --rate-value: 4;   --rate-color: var(--color-positive-400); }
.rate--3-5 { --rate-value: 3.5; --rate-color: var(--color-rating-mid); }
.rate--3   { --rate-value: 3;   --rate-color: var(--color-rating-mid); }
.rate--2-5 { --rate-value: 2.5; --rate-color: var(--color-warning-300); }
.rate--2   { --rate-value: 2;   --rate-color: var(--color-warning-300); }
.rate--1-5 { --rate-value: 1.5; --rate-color: var(--color-negative-500); }
.rate--1   { --rate-value: 1;   --rate-color: var(--color-negative-500); }

.rate__star {
  position: relative;
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
}

.rate__star:nth-child(1) { --rate-index: 0; }
.rate__star:nth-child(2) { --rate-index: 1; }
.rate__star:nth-child(3) { --rate-index: 2; }
.rate__star:nth-child(4) { --rate-index: 3; }
.rate__star:nth-child(5) { --rate-index: 4; }

.rate--16 .rate__star { width: 16px; height: 16px; }

.rate__layer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.rate__layer svg { display: block; height: 100%; }

.rate__empty {
  width: 100%;
  color: var(--color-gray-100);
}
.rate__empty svg { width: 100%; }

.rate__fill {
  width: var(--rate-fill, clamp(0%, calc((var(--rate-value) - var(--rate-index)) * 100%), 100%));
  overflow: hidden;
  color: var(--rate-color);
}
.rate__fill svg { width: 20px; }
.rate--16 .rate__fill svg { width: 16px; }

.input {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  width: 320px;
  font-family: var(--font-family-base);
}

.input__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  width: 100%;
}
.input__label-text { color: var(--color-gray-900); }
.input__req        { color: var(--color-negative-500); }
.input__optional   { color: var(--color-gray-300); }

.input__label .tooltip { flex-shrink: 0; }

.input__field {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  width: 100%;
  padding: var(--spacing-10) var(--spacing-16);
  border-radius: var(--radius-8);
  background: var(--color-gray-0);
  box-shadow: inset 0 0 0 1px var(--color-gray-100), var(--shadow-4);
  overflow: hidden;
}
.input__icon {
  flex-shrink: 0;
  display: flex;
  color: var(--color-gray-400);
}
.input__icon svg { display: block; width: 20px; height: 20px; }

.input__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.input__value       { color: var(--color-gray-800); white-space: nowrap; }
.input__placeholder { color: var(--color-gray-300); white-space: nowrap; }
.input__caret {
  flex-shrink: 0;
  width: 1px;
  height: 20px;
  background: var(--color-gray-800);
}

.input__clear {
  flex-shrink: 0;
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-gray-200);
  cursor: pointer;
}
.input__clear svg { display: block; width: 16px; height: 16px; }

.input__suffix {
  flex-shrink: 0;
  color: var(--color-positive-500);
  text-align: right;
  white-space: nowrap;
}

.input__hint { margin: 0; color: var(--color-gray-400); width: 100%; }
.input__hint--error { color: var(--color-negative-500); }
.input__hint--warning {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  color: var(--color-warning-400);
}
.input__hint--warning .input__hint-icon {
  flex-shrink: 0;
  display: flex;
  color: var(--color-warning-300);
}
.input__hint--warning .input__hint-icon svg { display: block; width: 16px; height: 16px; }

.input--hover .input__field { box-shadow: inset 0 0 0 1px var(--color-gray-200), var(--shadow-4); }
.input--focus .input__field { box-shadow: inset 0 0 0 2px var(--color-accent-400), var(--shadow-4); }

.input--status-error .input__field { box-shadow: inset 0 0 0 1px var(--color-negative-500), var(--shadow-4); }
.input--status-error.input--focus .input__field { box-shadow: inset 0 0 0 2px var(--color-negative-500), var(--shadow-4); }

.input__input {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--color-gray-800);
}
.input__input::placeholder { color: var(--color-gray-300); opacity: 1; }

.input__input:placeholder-shown + .input__clear { display: none; }

.input--live .input__field:hover { box-shadow: inset 0 0 0 1px var(--color-gray-200), var(--shadow-4); }
.input--live .input__field:focus-within { box-shadow: inset 0 0 0 2px var(--color-accent-400), var(--shadow-4); }

.input--live.input--status-error .input__field,
.input--live.input--status-error .input__field:hover { box-shadow: inset 0 0 0 1px var(--color-negative-500), var(--shadow-4); }
.input--live.input--status-error .input__field:focus-within { box-shadow: inset 0 0 0 2px var(--color-negative-500), var(--shadow-4); }

.input--disabled .input__field {
  box-shadow: inset 0 0 0 1px var(--color-gray-50), var(--shadow-4);
  background: var(--color-gray-25);
}
.input--disabled .input__label-text,
.input--disabled .input__optional,
.input--disabled .tooltip__trigger,
.input--disabled .input__icon,
.input--disabled .input__value,
.input--disabled .input__placeholder,
.input--disabled .input__input,
.input--disabled .input__suffix,
.input--disabled .input__hint {
  color: var(--color-gray-100);
}
.input--disabled .input__input::placeholder { color: var(--color-gray-100); }
.input--disabled .input__input { cursor: not-allowed; }

.link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  font-optical-sizing: none;
}

.link__text { white-space: nowrap; }

.link__icon { flex: 0 0 auto; display: block; }

.link__icon path { stroke-width: 2.4; }

.link--xs { gap: var(--spacing-4); }
.link--s  { gap: var(--spacing-4); }
.link--m  { gap: var(--spacing-8); }
.link--xs .link__icon { width: 12px; height: 12px; }
.link--s  .link__icon { width: 16px; height: 16px; }
.link--m  .link__icon { width: 16px; height: 16px; }

.link--disabled { cursor: default; pointer-events: none; }

.link--live { color: var(--link-c); transition: color .12s ease; }
.link--live:hover,
.link--live:focus-visible { color: var(--link-h); }
.link--live:active { color: var(--link-a); }
.link--live:focus-visible { outline: 2px solid var(--color-accent-400); outline-offset: 2px; border-radius: 2px; }

.logo {
  display: inline-block;
  color: var(--color-gray-900);
  line-height: 0;
}

.logo svg {
  display: block;
  height: 32px;
  width: auto;
}

.logo--inverse { color: var(--color-gray-0); }

.logo--word-only svg { height: 32px; }

.logo__word path { fill: currentColor; }
.logo__mark path { fill: var(--color-accent-400); }

.notif {
  box-sizing: border-box;
  width: 400px;
  border-radius: var(--radius-12);
  background: var(--notif-bg);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  font-family: var(--font-family-base);
}

.notif--info {
  --notif-bg: var(--color-information-25);
  --notif-border: var(--color-information-50);
  --notif-icon: var(--color-information-400);
  --notif-action: var(--color-accent-400);
  --notif-action-h: var(--color-accent-600);
  --notif-action-a: var(--color-accent-400);
}
.notif--positive {
  --notif-bg: var(--color-positive-25);
  --notif-border: var(--color-positive-50);
  --notif-icon: var(--color-positive-400);
  --notif-action: var(--color-positive-500);
  --notif-action-h: var(--color-positive-400);
  --notif-action-a: var(--color-positive-500);
}
.notif--attention {
  --notif-bg: var(--color-warning-25);
  --notif-border: var(--color-warning-50);
  --notif-icon: var(--color-warning-300);
  --notif-action: var(--color-warning-400);
  --notif-action-h: var(--color-warning-300);
  --notif-action-a: var(--color-warning-500);
}
.notif--negative {
  --notif-bg: var(--color-negative-50);
  --notif-border: var(--color-negative-100);
  --notif-icon: var(--color-negative-500);
  --notif-action: var(--color-negative-500);
  --notif-action-h: var(--color-negative-400);
  --notif-action-a: var(--color-negative-600);
}

.notif--l { border: 1px solid var(--notif-border); }

.notif__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: var(--spacing-12);
  align-items: flex-start;
}
.notif--l .notif__body { padding: var(--spacing-24); flex-direction: row; }
.notif--m .notif__body { padding: var(--spacing-16); flex-direction: row; }
.notif--s .notif__body { padding: var(--spacing-16); flex-direction: column; }

.notif__icon { flex: none; color: var(--notif-icon); display: flex; }
.notif__icon svg { display: block; }
.notif--l .notif__icon { padding-top: 2px; }
.notif--l .notif__icon svg { width: 20px; height: 20px; }
.notif--m .notif__icon,
.notif--s .notif__icon { height: 20px; align-items: center; }
.notif--m .notif__icon svg,
.notif--s .notif__icon svg { width: 16px; height: 16px; }

.notif__main { flex: 1 1 auto; min-width: 0; display: flex; }
.notif--l .notif__main { flex-direction: column; gap: var(--spacing-20); }
.notif--m .notif__main { flex-direction: row; align-items: flex-start; gap: var(--spacing-12); }
.notif--s .notif__main { flex-direction: column; gap: var(--spacing-12); align-self: stretch; }

.notif__text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.notif--l .notif__text { gap: var(--spacing-8); }
.notif--m .notif__text,
.notif--s .notif__text { gap: var(--spacing-4); }
.notif__title { margin: 0; color: var(--color-gray-800); word-break: break-word; }
.notif__message { margin: 0; color: var(--color-gray-800); word-break: break-word; }

.notif__actions { display: flex; flex-wrap: wrap; }
.notif--l .notif__actions { gap: var(--spacing-16); }
.notif--m .notif__actions { flex: none; }
.notif--s .notif__actions { row-gap: var(--spacing-8); column-gap: var(--spacing-16); }

.notif__action--primary {
  --link-c: var(--notif-action);
  --link-h: var(--notif-action-h);
  --link-a: var(--notif-action-a);
}
.notif__action--secondary {
  --link-c: var(--color-gray-500);
  --link-h: var(--color-gray-600);
  --link-a: var(--color-gray-500);
}

.notif__close { flex: none; display: flex; align-items: flex-start; }
.notif--l .notif__close { padding: var(--spacing-8) var(--spacing-8) 0 0; }
.notif--m .notif__close,
.notif--s .notif__close { padding: var(--spacing-4) var(--spacing-4) 0 0; }

.popover {
  position: relative;
  display: flex;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  filter: drop-shadow(var(--shadow-4));
  --pop-arrow-offset: var(--spacing-8);
  --popover-bg: var(--color-gray-0);
  --popover-border: var(--color-gray-100);
  --popover-arrow-stroke: var(--popover-border);
}
.popover--large { --pop-arrow-offset: 18px; }

.popover__content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 160px;
  padding: var(--spacing-4) var(--spacing-8);
  border-radius: var(--radius-4);
  background: var(--popover-bg);
  box-shadow: 0 0 0 1px var(--popover-border);
  word-break: break-word;
}
.popover--large .popover__content {
  gap: var(--spacing-4);
  max-width: 280px;
  padding: var(--spacing-12) var(--spacing-16);
  border-radius: var(--radius-8);
}

.popover__title { color: var(--color-gray-900); }
.popover__text  { color: var(--color-gray-500); white-space: nowrap; }

.popover__arrow {
  position: relative;
  z-index: 2;
  display: flex;
  flex: none;
  overflow: hidden;
}
.popover__arrow-shape { position: relative; flex: none; }

.popover__arrow-shape svg {
  position: absolute;
  top: -1px;
  left: -1px;
  display: block;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
}

.popover__arrow-shape svg path {
  fill: var(--popover-bg);
  stroke: var(--popover-arrow-stroke);
}
.popover__content { position: relative; z-index: 1; }

.popover--top-left,
.popover--top-center,
.popover--top-right { flex-direction: column; }

.popover--bottom-left,
.popover--bottom-center,
.popover--bottom-right { flex-direction: column-reverse; }

.popover--top-left .popover__arrow,
.popover--top-center .popover__arrow,
.popover--top-right .popover__arrow,
.popover--bottom-left .popover__arrow,
.popover--bottom-center .popover__arrow,
.popover--bottom-right .popover__arrow { align-self: stretch; }

.popover--top-left .popover__arrow-shape,
.popover--top-center .popover__arrow-shape,
.popover--top-right .popover__arrow-shape,
.popover--bottom-left .popover__arrow-shape,
.popover--bottom-center .popover__arrow-shape,
.popover--bottom-right .popover__arrow-shape { width: 8px; height: 4px; }

.popover--top-left .popover__arrow,
.popover--top-center .popover__arrow,
.popover--top-right .popover__arrow { padding-top: 2px; }

.popover--bottom-left .popover__arrow,
.popover--bottom-center .popover__arrow,
.popover--bottom-right .popover__arrow { padding-bottom: 2px; }

.popover--bottom-left .popover__arrow-shape svg,
.popover--bottom-center .popover__arrow-shape svg,
.popover--bottom-right .popover__arrow-shape svg { transform: scaleY(-1); }

.popover--top-center .popover__arrow,
.popover--bottom-center .popover__arrow { justify-content: center; }

.popover--top-left .popover__arrow,
.popover--bottom-left .popover__arrow {
  justify-content: flex-start;
  padding-left: var(--pop-arrow-offset);
}
.popover--top-right .popover__arrow,
.popover--bottom-right .popover__arrow {
  justify-content: flex-end;
  padding-right: var(--pop-arrow-offset);
}

.popover--left  { flex-direction: row; align-items: stretch; }
.popover--right { flex-direction: row-reverse; align-items: stretch; }

.popover--left .popover__arrow,
.popover--right .popover__arrow { align-items: center; }

.popover--left .popover__arrow-shape,
.popover--right .popover__arrow-shape { width: 4px; height: 8px; }

.popover--left .popover__arrow  { padding-left: 2px; }
.popover--right .popover__arrow { padding-right: 2px; }

.popover--left .popover__arrow-shape svg { transform: scaleX(-1); }

.progress-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  --progress-label-width: var(--spacing-32);
}

.progress-bar__track {
  box-sizing: border-box;
  flex: 1 0 0;
  min-width: 0;
  height: var(--spacing-4);
  border-radius: var(--radius-4);
  background: var(--color-gray-50);
  overflow: hidden;
}

.progress-bar__scale {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--progress-fill, var(--color-accent-400));
}

.progress-bar__label {
  flex: 0 0 auto;
  width: var(--progress-label-width);
  color: var(--color-gray-700);
}

.progress-bar--m { --progress-label-width: 41px; }

.progress-bar--m .progress-bar__track {
  height: var(--spacing-6);
  border-radius: var(--radius-8);
}

.progress-bar--positive,
.progress-bar__track--positive { --progress-fill: var(--color-positive-400); }

.select {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  width: 320px;
  font-family: var(--font-family-base);
}

.select__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  width: 100%;
}
.select__label-text { color: var(--color-gray-900); }
.select__req        { color: var(--color-negative-500); }
.select__optional   { color: var(--color-gray-300); }

.select__tooltip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  color: var(--color-gray-200);
}
.select__tooltip svg { display: block; width: 16px; height: 16px; }

.select__field {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  width: 100%;
  padding: var(--spacing-10) var(--spacing-16);
  border-radius: var(--radius-8);
  background: var(--color-gray-0);
  box-shadow: inset 0 0 0 1px var(--color-gray-100), var(--shadow-4);
  overflow: hidden;
  cursor: pointer;
}

.select__icon {
  flex-shrink: 0;
  display: flex;
  color: var(--color-gray-400);
}
.select__icon svg { display: block; width: 20px; height: 20px; }

.select__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  overflow: hidden;
}
.select__placeholder { color: var(--color-gray-300); white-space: nowrap; }
.select__value       { color: var(--color-gray-800); white-space: nowrap; }
.select__caption {
  flex: 1 1 0;
  min-width: 0;
  color: var(--color-gray-300);
  text-align: right;
  white-space: nowrap;
}

.select__chevron {
  flex-shrink: 0;
  display: flex;
  color: var(--color-gray-400);
}
.select__chevron svg { display: block; width: 20px; height: 20px; }

.select__hint { margin: 0; color: var(--color-gray-400); width: 100%; }
.select__hint--error { color: var(--color-negative-500); }

.select--hover .select__field { box-shadow: inset 0 0 0 1px var(--color-gray-200), var(--shadow-4); }
.select--focus .select__field { box-shadow: inset 0 0 0 2px var(--color-accent-400), var(--shadow-4); }

.select--status-error .select__field { box-shadow: inset 0 0 0 1px var(--color-negative-500), var(--shadow-4); }
.select--status-error.select--hover .select__field { box-shadow: inset 0 0 0 1px var(--color-negative-600), var(--shadow-4); }
.select--status-error.select--focus .select__field { box-shadow: inset 0 0 0 2px var(--color-negative-500), var(--shadow-4); }

.select--disabled .select__field {
  box-shadow: inset 0 0 0 1px var(--color-gray-50), var(--shadow-4);
  background: var(--color-gray-25);
  cursor: not-allowed;
}
.select--disabled .select__label-text,
.select--disabled .select__optional,
.select--disabled .select__tooltip,
.select--disabled .select__icon,
.select--disabled .select__placeholder,
.select--disabled .select__value,
.select--disabled .select__caption,
.select--disabled .select__chevron,
.select--disabled .select__hint {
  color: var(--color-gray-100);
}

.select--focus .select__field { overflow: visible; }

.select__menu {
  position: absolute;
  left: -2px;
  right: -2px;
  top: 46px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-4);
  background: var(--color-gray-0);
  border: 1px solid var(--color-gray-50);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-4);
  overflow: hidden;
  cursor: default;
}

.select__menu .di { width: 100%; }

.select__scrollbar {
  position: absolute;
  top: var(--spacing-8);
  right: 3px;
  bottom: var(--spacing-8);
  width: 4px;
}
.select__scrollbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 75%;
  background: var(--color-gray-50);
  border-radius: var(--radius-8);
}

.select--live .select__menu { display: none; }
.select--live.select--open .select__menu { display: flex; }
.select--live.select--open .select__field { overflow: visible; box-shadow: inset 0 0 0 2px var(--color-accent-400), var(--shadow-4); }
.select--live .select__field:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-accent-400), var(--shadow-4); }

.spinner {
  display: inline-block;
  color: var(--color-accent-400);
  line-height: 0;
}

.spinner svg {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  animation: spinner-rotate 0.8s linear infinite;
}

.spinner path {
  stroke: currentColor;
}

.spinner--inverted {
  color: var(--color-gray-0);
}

.spinner--xs { width: 16px; height: 16px; }
.spinner--sm { width: 24px; height: 24px; }
.spinner--md { width: 32px; height: 32px; }
.spinner--lg { width: 44px; height: 44px; }

@keyframes spinner-rotate {
  to { transform: rotate(360deg); }
}

.spinner--static svg { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .spinner svg { animation: none; }
}

.tabs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  font-family: var(--font-family-base);
}
.tabs--s { padding-bottom: var(--spacing-16); }
.tabs--m { padding-bottom: var(--spacing-24); }

.tabs__group {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  width: 100%;
  border-bottom: 1px solid var(--color-gray-100);
}

.tab {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  white-space: nowrap;
  cursor: pointer;
  color: var(--color-gray-900);
}
.tabs--s .tab { height: 46px; padding: var(--spacing-12) var(--spacing-8); }
.tabs--m .tab { height: 60px; padding: var(--spacing-16) var(--spacing-12); }

.tab__label { color: inherit; }

.tab--selected,
.tab--hover { }
.tab--selected::after,
.tab--hover::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
}
.tab--hover::after    { background: var(--color-gray-100); }
.tab--selected::after { background: var(--color-accent-400); }

.tab--selected { color: var(--color-accent-400); }
.tab--disabled { color: var(--color-gray-100); cursor: default; }

.tabs__more { position: relative; }

.dropdown-list {
  position: absolute;
  right: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-4);
  background: var(--color-gray-0);
  border: 1px solid var(--color-gray-50);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-4);
  overflow: hidden;
}
.tabs--s .dropdown-list { top: 50px; width: 100px; }
.tabs--m .dropdown-list { top: 64px; width: 120px; }

.dropdown-item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  border-radius: var(--radius-4);
  color: var(--color-gray-900);
  cursor: pointer;
}
.tabs--s .dropdown-item { padding: var(--spacing-8); }
.tabs--m .dropdown-item { padding: var(--spacing-8) var(--spacing-12); }
.dropdown-item--hover { background: var(--color-gray-25); }
.dropdown-item__label { flex: 1 0 0; min-width: 0; color: inherit; }

.dropdown-scroll {
  position: absolute;
  top: -1px; right: -1px; bottom: -1px;
  box-sizing: border-box;
  width: 12px;
  padding: var(--spacing-8) var(--spacing-4);
  display: flex;
}
.dropdown-scroll__track { position: relative; width: 4px; height: 100%; }
.dropdown-scroll__bar {
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 75%;
  background: var(--color-gray-50);
  border-radius: var(--radius-8);
}

.tab:not(.tab--disabled):not(.tab--selected):hover::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--color-gray-100);
}
.tab:focus-visible {
  outline: 2px solid var(--color-accent-400);
  outline-offset: -2px;
  border-radius: var(--radius-4);
}

.dropdown-item:hover { background: var(--color-gray-25); }

.tabs__more[data-menu] .dropdown-list { display: none; }
.tabs__more[data-menu].is-open .dropdown-list { display: flex; }

.timer {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  height: 32px;
  font-family: var(--font-family-base);
}

.timer__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
}

.timer__digits {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
}

.timer__digit {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 32px;
  overflow: hidden;
  border: 1px solid var(--color-alpha-light-24);
  border-radius: var(--radius-8);
  background: var(--color-alpha-light-12);
  color: var(--color-gray-0);
}

.timer__label {
  align-self: stretch;
  text-align: center;
  color: var(--color-alpha-light-76);
}

.timer__sep {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4px;
  height: 32px;
  color: var(--color-gray-200);
}

.timer--negative .timer__digit {
  border-color: var(--color-negative-100);
  background: var(--color-negative-100);
  color: var(--color-negative-500);
}

.tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  font-family: var(--font-family-base);
  --tt-corner: -2px;
}
.tooltip--large { --tt-corner: -12px; }

.tooltip .popover { --popover-arrow-stroke: var(--color-alpha-dark-12); }
.tooltip .popover--short { --popover-border: var(--color-alpha-dark-12); }

.tooltip__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--color-gray-200);
  cursor: pointer;
}
.tooltip__trigger svg { display: block; width: 16px; height: 16px; }

.tooltip .popover {
  position: absolute;
  width: max-content;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.tooltip:hover .popover,
.tooltip:focus-within .popover,
.tooltip.tooltip--open .popover {
  opacity: 1;
  visibility: visible;
}

.tooltip--top-left .popover,
.tooltip--top-center .popover,
.tooltip--top-right .popover { bottom: 20px; }

.tooltip--bottom-left .popover,
.tooltip--bottom-center .popover,
.tooltip--bottom-right .popover { top: 20px; }

.tooltip--top-center .popover,
.tooltip--bottom-center .popover { left: 50%; transform: translateX(-50%); }

.tooltip--top-left .popover,
.tooltip--bottom-left .popover { right: var(--tt-corner); }
.tooltip--top-right .popover,
.tooltip--bottom-right .popover { left: var(--tt-corner); }

.tooltip--left .popover  { right: 20px; top: 50%; transform: translateY(-50%); }
.tooltip--right .popover { left: 20px;  top: 50%; transform: translateY(-50%); }

.hm {
  position: relative;
  z-index: 3;
  background: var(--color-gray-0);
  font-family: var(--font-family-base);
  font-optical-sizing: none;
  box-shadow: inset 0 -1px 0 var(--color-gray-100);
}

.hm *,
.hm *::before,
.hm *::after { box-sizing: border-box; }

.hm__top { background: var(--color-gray-25); }

.hm__row {
  --container-pad: calc(
    var(--spacing-20) +
    var(--spacing-16) * var(--bp-tlandscape) * (1 - var(--bp-desktop)) +
    (64px - var(--spacing-20)) * var(--bp-desktop)
  );
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
}

.hm__top .hm__row { padding-block: 11px; }

.hm__menu .hm__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: calc(60px + 8px * var(--bp-tlandscape));
  padding-block: calc(8px + 4px * var(--bp-tlandscape));
}

.hm__lang {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.hm__flag { display: block; width: 16px; height: auto; }

.hm__lang-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-gray-900);
  cursor: pointer;
  font-family: inherit;
}

.hm__lang-btn svg { width: 16px; height: 16px; color: var(--color-gray-400); }

.hm__lang-long  { display: var(--from-mlandscape, inline); }
.hm__lang-short { display: var(--below-mlandscape, none); }

.hm__lang-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + var(--spacing-8));
  left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  border-radius: var(--radius-8);
  background: var(--color-gray-0);
  box-shadow: var(--shadow-12);
}

.hm__lang-menu[hidden] { display: none; }

.hm__lang-item {
  width: auto;
  min-width: 160px;
  text-decoration: none;
}

.hm__lang-item .di__content { display: flex; align-items: center; gap: var(--spacing-8); }

.hm__logo {
  --hm-lock: calc(0.8 + 0.2 * var(--bp-tlandscape));
  display: flex;
  align-items: flex-start;
  margin-top: calc(-4px * var(--hm-lock));
  gap: calc(var(--spacing-8) * var(--hm-lock));
  text-decoration: none;
}

.hm__logo .logo svg { height: calc(28px * var(--hm-lock)); }

.hm__label {
  display: flex;
  align-items: center;
  padding-inline: calc(var(--spacing-6) * var(--hm-lock));
  padding-block: calc(2px * var(--hm-lock));
  border-radius: var(--radius-32);
  background: var(--color-accent-400);
  color: var(--color-gray-0);
  font-size: calc(var(--text-body-12m-size) * var(--hm-lock));
  line-height: calc(var(--text-body-12m-line-height) * var(--hm-lock));
  font-weight: var(--text-body-12m-weight);
  white-space: nowrap;
}

.hm__nav {
  display: var(--from-tlandscape);
  align-items: stretch;
  gap: var(--spacing-32);
  align-self: stretch;
  margin-block: calc(-1 * (8px + 4px * var(--bp-tlandscape)));
}

.hm__nav-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  color: var(--color-gray-900);
  text-decoration: none;
}

.hm__nav-link svg { width: 16px; height: 16px; }

.hm__nav-link:hover { color: var(--color-accent-400); }

.hm__nav-text {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.hm__nav-link:focus-visible { outline: none; }

.hm__nav-link:focus-visible .hm__nav-text {
  outline: 2px solid var(--color-accent-400);
  outline-offset: 4px;
  border-radius: var(--radius-4);
}

.hm__nav-link--active {
  position: relative;
  color: var(--color-accent-600);
}

.hm__nav-link--active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--color-accent-400);
}

.bcd {
  --d: var(--bp-desktop, 1);
  --t: var(--bp-tablet, 1);
  --bcd-zoom: calc(var(--d) * 1.6 + (1 - var(--d)) * 1.2);
  position: relative;
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-12);
  background: var(--color-teal-700);
  font-family: var(--font-family-base);
  font-optical-sizing: none;
  text-decoration: none;
  cursor: pointer;
  padding: calc(var(--t) * var(--spacing-24) + (1 - var(--t)) * 120px)
           var(--spacing-24)
           var(--spacing-24);
}
.bcd, .bcd *, .bcd *::before, .bcd *::after { box-sizing: border-box; }
.bcd p { margin: 0; }

.bcd--large  { --bp-desktop: 1 !important; --bp-tablet: 1 !important; --only-desktop: flex !important; }
.bcd--medium { --bp-desktop: 0 !important; --bp-tablet: 1 !important; --only-desktop: none !important; }
.bcd--small  { --bp-desktop: 0 !important; --bp-tablet: 0 !important; --only-desktop: none !important; }

.bcd__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.bcd__cell {
  position: absolute;
  top: 0;
  left: calc((var(--t) - var(--d)) * 50%);
  width: calc(
    var(--d) * 25% +
    (var(--t) - var(--d)) * 50% +
    (1 - var(--t)) * 100%
  );
  height: calc(var(--t) * 100% + (1 - var(--t)) * 50%);
  overflow: hidden;
}

.bcd__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: transform 0.2s ease-out;
}

.bcd__scrim { position: absolute; inset: 0; }

.bcd__scrim--l {
  opacity: var(--d);
  background: linear-gradient(to right, transparent 50%, var(--color-teal-700) 100%);
}
.bcd__scrim--m {
  opacity: calc(var(--t) - var(--d));
  background: linear-gradient(to right, var(--color-teal-700) 0%, transparent 50%);
}
.bcd__scrim--s {
  opacity: calc(1 - var(--t));
  background: linear-gradient(to bottom, transparent 50%, var(--color-teal-700) 100%);
}

.bcd--hover .bcd__art,
.bcd:hover .bcd__art,
.bcd:focus-visible .bcd__art {
  transform: scale(var(--bcd-zoom));
}
@media (prefers-reduced-motion: reduce) {
  .bcd__art { transition: none; }
}

.bcd:focus-visible {
  outline: 2px solid var(--color-gray-0);
  outline-offset: 2px;
}

.bcd__content {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--spacing-24);
  row-gap: calc(
    (var(--t) - var(--d)) * var(--spacing-16) +
    (1 - var(--t)) * var(--spacing-24)
  );
  padding-right: calc((var(--t) - var(--d)) * var(--spacing-80));
}

.bcd__spacer {
  display: var(--only-desktop, flex);
  flex: 1 1 0;
  max-width: 280px;
  align-self: stretch;
}

.bcd__text {
  flex: 1 1 calc((1 - var(--d)) * 100%);
  min-width: calc(var(--d) * 400px);
  display: flex;
  flex-direction: column;
  gap: calc((1 - var(--t)) * var(--spacing-4));
  color: var(--color-gray-0);
}

.bcd__group {
  flex: none;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing-12);
}

.bcd__group .btn { flex-grow: calc(1 - var(--t)); }

.bcd__group .timer {
  height: calc(var(--d) * 32px + (1 - var(--d)) * 42px);
}

.bcd .btn--secondary { box-shadow: var(--shadow-4); }

.cw {
  font-family: var(--font-family-base);
  font-optical-sizing: none;
}
.cw .text-body-14,
.cw .text-body-14m,
.cw .text-body-12m,
.cw .text-display-12 { font-optical-sizing: auto; }

.cw__card {
  --cw-pad: calc(var(--spacing-20) + var(--spacing-12) * var(--bp-tablet));
  --cw-gap: calc(var(--spacing-20) + var(--spacing-4) * var(--bp-tablet));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--cw-gap);
  padding: var(--cw-pad);
  border-radius: var(--radius-12);
  background: var(--color-gray-25);
  box-shadow: inset 0 0 0 1px var(--color-information-50), var(--shadow-4);
}

.cw__card--empty {
  --cw-pad: calc(var(--spacing-20) + var(--spacing-12) * var(--bp-mlandscape));
  --cw-gap: var(--spacing-24);
}

.cw .progress-bar__track { background: var(--color-alpha-dark-12); }

.cw__divider {
  align-self: stretch;
  height: 1px;
  background: var(--color-gray-100);
}

.cw__char--desk    { display: var(--only-desktop); align-items: center; }
.cw__char--compact { display: var(--below-desktop); flex-direction: column; align-items: flex-start; }

.cw__char {
  gap: var(--spacing-16);
}

.cw__avatar {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-16);
  box-shadow: 0 0 0 4px var(--color-gray-0), var(--shadow-12);
  overflow: hidden;
}
.cw__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cw__ident {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
}
.cw__char--compact .cw__ident { align-self: auto; width: 100%; }

.cw__name { margin: 0; color: var(--color-gray-900); }

.cw__meta { margin: 0; color: var(--color-gray-500); white-space: pre-wrap; }

.cw__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--spacing-8);
  row-gap: var(--spacing-24);
}
.cw__meta-row .cw__meta { flex: 1 1 464px; min-width: 0; }

.cw__updated {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  margin: 0;
  color: var(--color-positive-500);
  white-space: nowrap;
}
.cw__updated-icon { flex: none; width: 16px; height: 16px; }
.cw__updated-icon svg { display: block; width: 100%; height: 100%; }

.cw__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.cw__progress-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: var(--spacing-24);
  row-gap: var(--spacing-12);
}
.cw__percent { flex: none; margin: 0; color: var(--color-gray-900); }
.cw__progress {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.cw__progress-labels {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-8);
}
.cw__progress-labels p { flex: 0 1 auto; min-width: 0; margin: 0; color: var(--color-gray-700); }
.cw__progress-labels p:last-child { flex: none; text-align: right; }

.cw__stats {
  --bleed: var(--cw-pad);
  display: flex;
  gap: var(--spacing-8);
  overflow-x: auto;
  scrollbar-width: none;
}
.cw__stats::-webkit-scrollbar { display: none; }

.cw__stat {
  box-sizing: border-box;
  flex-grow: var(--bp-desktop);
  flex-shrink: 0;
  flex-basis: calc(
      160.6px * (1 - var(--bp-mlandscape))
    + 149.6px * (var(--bp-mlandscape) - var(--bp-tablet))
    + 159.4px * (var(--bp-tablet) - var(--bp-desktop)));
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-16);
  border-radius: var(--radius-12);
  background: var(--color-gray-0);
}
.cw__stat-icon { flex: none; width: 20px; height: 20px; color: var(--color-gray-400); }
.cw__stat-icon svg { display: block; width: 100%; height: 100%; }
.cw__stat-text { display: flex; flex-direction: column; }
.cw__stat-value { margin: 0; color: var(--color-gray-900); }
.cw__stat-total { color: var(--color-gray-400); }
.cw__stat-name  { margin: 0; color: var(--color-gray-400); }
.cw__stat-bar   { align-self: stretch; }

.cw__intro { display: flex; flex-direction: column; gap: var(--spacing-4); }
.cw__title { margin: 0; color: var(--color-gray-900); }

.cw__title--mobile { display: var(--below-mlandscape); }
.cw__title--wide   { display: var(--from-mlandscape); }
.cw__desc  { margin: 0; color: var(--color-gray-500); }

.cw__form { display: flex; flex-direction: column; gap: var(--spacing-24); }

.cw__fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: var(--spacing-12);
  row-gap: var(--spacing-20);
}
.cw__field {
  flex: 1 1 calc(100% * (1 - var(--bp-tablet)) + 200px * var(--bp-tablet));
  width: auto;
  min-width: 0;
}

.cw__add--wide   { display: var(--from-tlandscape); flex: none; align-self: flex-end; }
.cw__add--narrow { display: var(--below-tlandscape); }

.cw__chars { display: flex; flex-direction: column; gap: var(--spacing-8); }
.cw__chars-label { margin: 0; color: var(--color-gray-500); }

.cw__chips-scroll {
  --bleed: calc(var(--cw-pad) * (1 - var(--bp-tablet)));
  overflow-x: auto;
  scrollbar-width: none;
}
.cw__chips-scroll::-webkit-scrollbar { display: none; }
.cw__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  width: max-content;
  max-width: calc(100% * var(--bp-tablet) + 9999px * (1 - var(--bp-tablet)));
}

.cw--bp320 .bp-scope {
  --bp-mlandscape: 0 !important; --bp-tablet: 0 !important; --bp-tlandscape: 0 !important; --bp-desktop: 0 !important;
  --only-desktop: none !important; --below-desktop: flex !important;
  --from-mlandscape: none !important; --below-mlandscape: inline !important;
  --from-tlandscape: none !important; --below-tlandscape: flex !important;
}
.cw--bp576 .bp-scope {
  --bp-mlandscape: 1 !important; --bp-tablet: 0 !important; --bp-tlandscape: 0 !important; --bp-desktop: 0 !important;
  --only-desktop: none !important; --below-desktop: flex !important;
  --from-mlandscape: inline !important; --below-mlandscape: none !important;
  --from-tlandscape: none !important; --below-tlandscape: flex !important;
}
.cw--bp768 .bp-scope {
  --bp-mlandscape: 1 !important; --bp-tablet: 1 !important; --bp-tlandscape: 0 !important; --bp-desktop: 0 !important;
  --only-desktop: none !important; --below-desktop: flex !important;
  --from-mlandscape: inline !important; --below-mlandscape: none !important;
  --from-tlandscape: none !important; --below-tlandscape: flex !important;
}
.cw--bp1024 .bp-scope {
  --bp-mlandscape: 1 !important; --bp-tablet: 1 !important; --bp-tlandscape: 1 !important; --bp-desktop: 0 !important;
  --only-desktop: none !important; --below-desktop: flex !important;
  --from-mlandscape: inline !important; --below-mlandscape: none !important;
  --from-tlandscape: flex !important; --below-tlandscape: none !important;
}
.cw--bp1280 .bp-scope {
  --bp-mlandscape: 1 !important; --bp-tablet: 1 !important; --bp-tlandscape: 1 !important; --bp-desktop: 1 !important;
  --only-desktop: flex !important; --below-desktop: none !important;
  --from-mlandscape: inline !important; --below-mlandscape: none !important;
  --from-tlandscape: flex !important; --below-tlandscape: none !important;
}

.sci {
  box-sizing: border-box;
  container-type: inline-size;
  padding: var(--spacing-12) var(--spacing-16);
  background: var(--color-gray-0);
  font-family: var(--font-family-base);
}

.sci * { box-sizing: border-box; }

.sci__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: calc(var(--spacing-12) + var(--spacing-24) * var(--bp-desktop));
}

.sci__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing-12) + var(--spacing-8) * var(--bp-desktop));
  flex: 1 1 0;
  min-width: calc(100cqw * (1 - var(--bp-desktop)));
}

.sci__icon {
  display: flex;
  flex: none;
  align-items: center;
  padding: var(--spacing-4);
  border: 2px solid var(--color-gray-100);
  border-radius: var(--radius-8);
}

.sci__img {
  display: block;
  flex: none;
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-12);
}

.sci__text {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  min-width: calc(100cqw * (1 - var(--bp-desktop)));
  word-break: break-word;
}

.sci__title {
  margin: 0;
  color: var(--color-gray-900);
}

.sci__desc {
  margin: 0;
  color: var(--color-gray-500);
}

.sci__side {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--spacing-12) + var(--spacing-12) * var(--bp-desktop));
  min-width: calc(100cqw * (1 - var(--bp-desktop)));
  max-width: 100%;
}

.sci__reward {
  margin: 0;
  min-width: calc(140px * var(--bp-desktop) + 100cqw * (1 - var(--bp-desktop)));
  overflow: hidden;
  color: var(--color-gray-900);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sci__actions {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-16);
  min-width: calc(280px * var(--bp-desktop) + 100cqw * (1 - var(--bp-desktop)));
  max-width: calc(280px * var(--bp-desktop) + 100cqw * (1 - var(--bp-desktop)));
}

.sci__deadline {
  display: flex;
  flex: 0 1 auto;
  max-width: 100%;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0;
  min-width: calc(100cqw * (1 - var(--bp-desktop)));
  color: var(--color-negative-500);
}

.sci__clock {
  display: block;
  flex: none;
  width: 12px;
  height: 12px;
  stroke-width: 3.2;
}

.sci .btn {
  min-width: calc(100cqw * (1 - var(--bp-desktop)));
  max-width: 100%;
}

.sci--desktop .bp-scope { --bp-desktop: 1 !important; }
.sci--mobile  .bp-scope { --bp-desktop: 0 !important; }

.footer {
  background: var(--color-gray-800);
  font-family: var(--font-family-base);
  font-optical-sizing: none;
}
.footer *,
.footer *::before,
.footer *::after { box-sizing: border-box; }
.footer p { margin: 0; }

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding-inline: calc(
    var(--spacing-20) + var(--bp-desktop) * (64px - var(--spacing-20))
  );
  padding-bottom: calc(
    var(--spacing-16) + var(--bp-desktop) * (var(--spacing-32) - var(--spacing-16))
  );
  max-width: 1440px;
  margin-inline: auto;
}

.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: calc(
    var(--spacing-20) + var(--bp-desktop) * (var(--spacing-24) - var(--spacing-20))
  );
  border-bottom: 1px solid var(--color-gray-700);
  flex-wrap: wrap;
  row-gap: var(--spacing-12);
}

.footer__logo svg {
  height: calc(24px + var(--bp-tablet) * 8px);
}

.footer__methods {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  flex-basis: calc(100% * (1 - var(--bp-tablet)));
  justify-content: space-between;
}
@supports (width: 1px) {
  .footer__methods { flex-grow: 0; flex-shrink: 0; }
}

.footer__method {
  display: block;
  flex: none;
  width: 34px;
  height: 24px;
}

.footer__trust-row { padding-top: var(--spacing-20); }

.footer--simple .footer__trust-row {
  padding-bottom: calc(var(--spacing-20) * (1 - var(--bp-tablet)));
}

.footer__trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}

.footer__rate .rate__star {
  width: calc(16px + var(--bp-tablet) * 4px);
  height: calc(16px + var(--bp-tablet) * 4px);
}
.footer__rate .rate__fill svg { width: calc(16px + var(--bp-tablet) * 4px); }

.footer__trust-text {
  flex: 1 0 calc(100% * (1 - var(--bp-tablet)));
  color: var(--color-gray-0);
  font-size: calc(
    var(--text-body-12-size) + var(--bp-tablet) *
    (var(--text-body-14-size) - var(--text-body-12-size))
  );
  line-height: calc(
    var(--text-body-12-line-height) + var(--bp-tablet) *
    (var(--text-body-14-line-height) - var(--text-body-12-line-height))
  );
  font-weight: calc(
    var(--text-body-12-weight) + var(--bp-tablet) *
    (var(--text-body-14m-weight) - var(--text-body-12-weight))
  );
}

.footer__columns {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: var(--spacing-24);
  row-gap: var(--f-stack-gap);
  padding-block: calc(
    var(--spacing-52) + var(--bp-tablet) * (56px - var(--spacing-52))
  );
}

.footer__colgroup {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: var(--spacing-24);
  row-gap: var(--f-stack-gap);
  flex: 1 0 calc(100% * (1 - var(--bp-tablet)));
  min-width: 0;
}

.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--f-stack-gap);
  flex: 1 0 calc(100% * (1 - var(--bp-desktop)));
  min-width: 0;
}

.footer__inner {
  --f-stack-gap: calc(
    var(--spacing-40) + var(--bp-tablet) * (var(--spacing-52) - var(--spacing-40))
  );
}

.footer__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-20);
  width: 100%;
}

.footer__list-title {
  width: 100%;
  color: var(--color-gray-300);
}

.footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8);
}

.footer__link {
  --link-c: var(--color-gray-25);
  --link-h: var(--color-gray-200);
  --link-a: var(--color-gray-25);
  color: var(--link-c);
}

.footer__link-icon {
  flex: none;
  width: 16px;
  height: 16px;
}

.footer__social { gap: var(--spacing-12); }

.footer__social-group {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
}

.footer__policy {
  display: flex;
  align-items: flex-end;
  color: var(--color-gray-500);
  padding-block: calc(var(--spacing-32) * var(--bp-tablet));
}
.footer--simple .footer__policy {
  padding-block: calc(
    var(--spacing-32) * var(--bp-tablet) +
    var(--spacing-16) * (1 - var(--bp-tablet))
  );
}

.footer--simple .footer__policy { padding-bottom: 0; }

.tabbar,
.tabbar * { box-sizing: border-box; }

.tabbar {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: var(--spacing-4);
  background: var(--color-gray-0);
  box-shadow:
    inset 0 1px 0 var(--color-gray-50),
    0 -4px 12px rgba(20, 20, 20, 0.08);
  font-family: var(--font-family-base);
  font-optical-sizing: none;
}

.tabbar__tab {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  padding: var(--spacing-8) 0 var(--spacing-4);
  border-radius: var(--radius-12);
  color: var(--color-gray-400);
  text-decoration: none;
  position: relative;
}

.tabbar__icon {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--color-gray-900);
}

.tabbar__label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabbar__tab--active {
  background: var(--color-accent-25);
  color: var(--color-accent-600);
}

.tabbar__tab--active .tabbar__icon { color: var(--color-accent-600); }

.tabbar__counter {
  position: absolute;
  top: 0;
  left: calc(50% + var(--spacing-4));
}

body {
  margin: 0;
  background: var(--color-gray-0);
  color: var(--color-gray-900);
  font-family: var(--font-family-base);
  font-optical-sizing: none;
}

*, *::before, *::after { box-sizing: border-box; }

.page { position: relative; overflow-x: clip; }

.st-wrap {
  padding-inline: calc(var(--container-pad) + 16px * var(--bp-tlandscape) * (1 - var(--bp-desktop)));
}

.st-wrap { padding-block: var(--spacing-24) 0; }

[data-dragscroll] {
  overflow-x: var(--scrollx-below-tablet, visible);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

[data-dragscroll]::-webkit-scrollbar { display: none; }

.st-brc {
  --bleed: var(--bleed-below-tablet);
  flex-wrap: nowrap;
  margin-bottom: var(--spacing-24);
}

.st-brc > * { flex: none; }

.st-content { padding-bottom: var(--spacing-60); }

.st-seasons {
  --bleed: var(--bleed-below-tablet);
  padding-bottom: var(--spacing-20);
}

.st-seasons .tabs__group { width: auto; }

.st-season-tab {
  flex: none;
  margin: 0;
  border: 0;
  background: none;
  font-family: inherit;
}

.st-seasons .st-season-tab:hover::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--color-gray-100);
}

.st-seasons .st-season-tab.tab--selected:hover::after { background: var(--color-accent-400); }

.st-seasons .st-season-tab:focus-visible {
  outline: 2px solid var(--color-accent-400);
  outline-offset: 2px;
}

.st-seasons .tab--selected { cursor: default; }

.st-h1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacing-12) + var(--spacing-8) * var(--bp-mlandscape));
  padding-bottom: calc(var(--spacing-20) + var(--spacing-4) * var(--bp-mlandscape));
}

.st-h1__title {
  margin: 0;
  color: var(--color-gray-900);
  font-size: calc(
    var(--text-display-24-size) +
    var(--bp-mlandscape) * (var(--text-display-36-size) - var(--text-display-24-size))
  );
  line-height: calc(
    var(--text-display-24-line-height) +
    var(--bp-mlandscape) * (var(--text-display-36-line-height) - var(--text-display-24-line-height))
  );
}

.st-banner { padding-bottom: var(--spacing-24); }

.st-banner .bcd { background: var(--color-purple-500); cursor: default; }
.st-banner .bcd:hover .bcd__art { transform: scale(1); }
.st-banner .bcd__scrim--l { background: linear-gradient(to right, transparent 50%, var(--color-purple-500) 100%); }
.st-banner .bcd__scrim--m { background: linear-gradient(to right, var(--color-purple-500) 0%, transparent 50%); }
.st-banner .bcd__scrim--s { background: linear-gradient(to bottom, transparent 50%, var(--color-purple-500) 100%); }

.st-filters {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
}

.st-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  background: var(--color-gray-25);
  color: var(--color-gray-400);
}

.st-avatar svg { width: 24px; height: 24px; }

.st-avatar[data-avatar="true"] { background: none; }
.st-avatar[data-avatar="true"] svg { display: none; }

.st-account .st-armory {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  color: inherit;
  text-decoration: none;
}

.st-account .st-armory:hover { color: var(--color-accent-600); }
.st-account .st-armory:hover span { text-decoration: underline; }

.st-account .st-armory:focus-visible {
  outline: 2px solid var(--color-accent-400);
  outline-offset: 2px;
  border-radius: var(--radius-4);
}

.st-armory__icon {
  flex: none;
  width: 16px;
  height: 16px;
}

.st-account { position: relative; z-index: 3; }

.st-account .combobox__hint,
.st-account .st-add__field--name .input__hint {
  position: var(--absolute-from-tablet);
  top: 100%;
  left: 0;
  margin-top: calc(var(--spacing-4) * var(--bp-tablet));
}

.st-account .combobox__hint[hidden],
.st-account .st-add__field--name .input__hint[hidden] { display: none; }

.st-account .st-add__field--name { position: relative; }

.st-app[data-form-error="true"] .st-add {
  padding-bottom: calc((var(--text-body-14-line-height) + var(--spacing-4)) * var(--bp-tablet));
}

.st-add__field--name:not([data-filled="true"]) .input__clear { display: none; }

.st-account .chips__cross {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.st-account .st-status {
  display: none;
  width: auto;
  align-self: stretch;
}

.st-app[data-state="loading"]     .st-loading  { display: block; }
.st-app[data-state="notfound"]    .st-notfound { display: block; }
.st-app[data-state="private"]     .st-private  { display: block; }
.st-app[data-state="offline"]     .st-offline  { display: block; }

.st-app[data-partial="true"][data-state="idle"] .st-partial,
.st-app[data-state="ratelimited"] .st-partial { display: block; }

.st-account .st-loading { --notif-bg: var(--color-gray-0); }

.st-loading .notif__icon .spinner { display: flex; width: 16px; height: 16px; }
.st-loading .notif__icon svg { width: 100%; height: 100%; }

.cw__updated-icon .st-updated__stale { display: none; }

[data-updated-row][data-stale="true"] { color: var(--color-negative-500); }
[data-updated-row][data-stale="true"] .st-updated__fresh { display: none; }
[data-updated-row][data-stale="true"] .st-updated__stale { display: block; }

.st-app[data-has-chars="false"] .st-when-chars { display: none; }
.st-app[data-has-chars="true"]:not([data-adding="true"]) .st-when-empty { display: none; }

.st-app[data-adding="true"] .st-when-chars:not(.cw__chars):not(.cw__divider) { display: none; }

.st-account .st-char-chip { cursor: pointer; }

.st-account .st-char-chip[data-current="true"] { cursor: default; }
.st-account .st-char-chip[data-current="true"] .chips__cross { cursor: pointer; }

.st-account .st-char-chip:not([data-current="true"]) {
  background: var(--color-gray-0);
  color: var(--color-gray-900);
  box-shadow: inset 0 0 0 1px var(--color-gray-100);
}

.st-account .st-char-chip:not([data-current="true"]):hover {
  background: var(--color-accent-300);
  color: var(--color-gray-0);
  box-shadow: none;
}

.st-account .cw__chars[hidden] { display: none; }

.st-account .st-char-chip:focus-visible {
  outline: 2px solid var(--color-accent-600);
  outline-offset: 2px;
}

.st-app[data-state="loading"]     .st-when-empty,
.st-app[data-state="notfound"]    .st-when-empty,
.st-app[data-state="private"]     .st-when-empty,
.st-app[data-state="offline"]     .st-when-empty,
.st-app[data-state="ratelimited"] .st-when-empty { display: none; }

.st-add[hidden] { display: none; }

.st-toolbar {
  --bleed: var(--bleed-below-tablet);
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--spacing-20);
  margin-top: var(--spacing-32);
  padding-bottom: var(--spacing-20);
  background: var(--color-gray-0);
}

.st-toolbar--stuck {
  --stuck-bleed: calc(var(--container-pad, 0px) * (1 - var(--bp-tablet)));
  margin-inline: calc(-1 * var(--stuck-bleed));
  margin-bottom: var(--spacing-20);
  padding: 0 var(--stuck-bleed);
}

.st-toolbar--stuck::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--color-gray-0);
  box-shadow: var(--shadow-12);
}

.st-toolbar--stuck .tabs__group { border-bottom-color: transparent; }

.st-toolbar__tabs {
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 0;
}

.st-toolbar__tabs .tabs__group {
  width: auto;
  overflow-x: auto;
  scrollbar-width: none;
}

.st-toolbar__tabs .tabs__group::-webkit-scrollbar { display: none; }

.st-tab {
  flex: none;
  margin: 0;
  border: 0;
  background: none;
  font-family: inherit;
}

.st-toolbar__sorting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--spacing-32);
  row-gap: var(--spacing-12);
  padding-block: 0 var(--spacing-32);
}

.st-app[data-has-chars="false"] [data-missing-toggle] { display: none; }

.st-app[data-has-chars="false"][data-has-staying="false"] .st-toolbar__sorting { display: none; }

.st-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-gray-900);
  cursor: pointer;
  font-family: inherit;
}

.st-toggle__track {
  display: flex;
  align-items: center;
  width: 36px;
  height: 20px;
  padding: 2px;
  border-radius: var(--radius-32);
  background: var(--color-gray-200);
  transition: background .15s ease;
}

.st-toggle__knob {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-32);
  background: var(--color-gray-0);
  transition: transform .15s ease;
}

.st-toggle[aria-checked="true"] .st-toggle__track { background: var(--color-accent-400); }
.st-toggle[aria-checked="true"] .st-toggle__knob  { transform: translateX(16px); }

.st-toggle:focus-visible { outline: 2px solid var(--color-accent-400); outline-offset: 2px; }

.st-grabbable { cursor: grab; }

.st-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}

.st-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  padding-bottom: var(--spacing-80);
  scroll-margin-top: calc(var(--st-panel-h, 60px) + var(--spacing-8));
}

.st-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
  scroll-margin-top: calc(var(--st-panel-h, 60px) + var(--spacing-8));
  overflow: hidden;
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-12);
  background: var(--color-gray-100);
}

.st-group__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  padding: var(--spacing-12)
           calc(var(--spacing-16) + var(--spacing-4) * var(--bp-tlandscape));
  overflow: hidden;
  background: var(--color-accent-400);
  color: var(--color-gray-0);
}

.st-group__pattern {
  position: absolute;
  top: calc(50% - 140px);
  left: 0;
  width: 400px;
  height: 280px;
  pointer-events: none;
}

.st-group__title {
  position: relative;
  flex: 1 1 auto;
  margin: 0;
  font-size: calc(
    var(--text-display-16-size) +
    var(--bp-tlandscape) * (var(--text-display-18-size) - var(--text-display-16-size))
  );
  line-height: calc(
    var(--text-display-16-line-height) +
    var(--bp-tlandscape) * (var(--text-display-18-line-height) - var(--text-display-16-line-height))
  );
}

.st-group__count {
  position: relative;
  flex: none;
  margin: 0;
  color: var(--color-alpha-light-76);
  white-space: nowrap;
}

.st-wrap { --st-row-desktop: var(--bp-tlandscape); }

.st-list .sci { container-type: normal; }
.st-list .sci__inner { --bp-desktop: var(--st-row-desktop) !important; }

.st-list .sci__icon {
  position: relative;
  border-color: var(--st-quality, var(--color-gray-100));
}

.st-list .sci__title { color: var(--st-name, var(--color-gray-900)); }

.st-list .st-row__wh {
  color: inherit;
  text-decoration: none;
}

.st-list .st-row__wh:focus-visible {
  outline: 2px solid var(--color-accent-400);
  outline-offset: 2px;
}

.st-row__glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-4);
  background: var(--color-gray-25);
  color: var(--color-gray-400);
  box-shadow: none;
}

.st-row__glyph svg { width: 20px; height: 20px; }

.st-list .sci__deadline--stays { color: var(--color-positive-500); }

.st-row__check {
  position: absolute;
  top: -8px;
  left: -8px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-32);
  background: var(--color-gray-0);
  color: var(--color-positive-400);
}

.st-row__check svg { width: 18px; height: 18px; }

.st-list .sci[data-owned="true"] { background: var(--color-positive-25); }
.st-list .sci[data-owned="true"] .sci__icon { border-color: var(--color-positive-400); }
.st-list .sci[data-owned="true"] .sci__title { color: var(--color-gray-900); }
.st-list .sci[data-owned="true"] .sci__deadline { color: var(--color-gray-500); }
.st-list .sci[data-owned="true"] .st-row__check { display: flex; }

.st-list .sci[data-owned="true"] .st-row__cta {
  background: var(--color-accent-100);
  pointer-events: none;
}

.st-app[data-only-missing="true"][data-has-chars="true"] .st-list .sci[data-owned="true"] { display: none; }
.st-app[data-only-missing="true"][data-has-chars="true"] .st-group[data-left="0"] { display: none; }

.st-app[data-only-expiring="true"] .st-list .sci[data-expires="false"] { display: none; }
.st-app[data-only-expiring="true"] .st-group[data-expiring="0"] { display: none; }

.st-app[data-has-staying="false"] [data-expiring-toggle] { display: none; }

.st-deadline-note {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-16);
  color: var(--color-gray-500);
}
.st-deadline-note__clock {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--color-gray-400);
}

.st-deadline-note__mark { color: var(--color-positive-500); font-weight: inherit; }

.st-group[data-hidden="true"] { display: none; }

.st-hiw {
  --bleed: var(--bleed-below-desktop);
  padding-bottom: var(--spacing-80);
}

.st-hiw__title { margin: 0 0 var(--spacing-24); color: var(--color-gray-900); }

.st-steps {
  display: flex;
  gap: var(--spacing-8);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.st-steps::-webkit-scrollbar { display: none; }

.st-step {
  display: flex;
  flex: var(--bp-tlandscape) var(--bp-tlandscape) calc(250px * (1 - var(--bp-tlandscape)));
  flex-direction: column;
  gap: var(--spacing-20);
  padding: var(--spacing-24);
  border-radius: var(--radius-8);
  background: var(--color-accent-25);
}

.st-step__num {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-8);
  background: var(--color-gray-0);
  color: var(--color-gray-800);
}

.st-step__text { margin: 0; color: var(--color-gray-800); }

.st-seo { padding-bottom: var(--spacing-80); }
.st-seo__title { margin: 0 0 var(--spacing-24); color: var(--color-gray-900); }
.st-seo__text { margin: 0; color: var(--color-gray-900); }

.st-faq { padding-bottom: var(--spacing-60); }

.st-faq__title {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  margin: 0 0 var(--spacing-20);
  color: var(--color-gray-900);
}

.st-faq__list { display: flex; flex-direction: column; }

.st-tabbar-slot { position: sticky; bottom: 0; z-index: 4; }

.st-tabbar { display: var(--below-tlandscape); }

.st-h1__row {
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
}

.st-share { position: relative; flex: none; }
.st-share__btn { white-space: nowrap; }

.st-share__menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 6;
}
.st-share__menu[hidden] { display: none; }

.st-share .popover__content {
  gap: var(--spacing-12);
  width: 264px;
  max-width: none;
  padding: var(--spacing-12);
  border-radius: var(--radius-8);
}

.st-share__row {
  display: flex;
  align-self: stretch;
  align-items: center;
  gap: var(--spacing-8);
}

.st-share__url {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--color-gray-500);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-share__copy { flex: none; }
.st-share__socials { display: flex; gap: var(--spacing-8); }

.st-locked { overflow: hidden; }

.st-modal {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-20);
}
.st-modal[hidden] { display: none; }

.st-modal__scrim {
  position: absolute;
  inset: 0;
  background: var(--color-alpha-dark-44);
}

.st-modal__card {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  width: 440px;
  max-width: 100%;
  max-height: 100%;
  overflow-y: auto;
  padding: var(--spacing-24);
  border-radius: var(--radius-16);
  background: var(--color-gray-0);
  box-shadow: var(--shadow-12);
}

.st-modal__close {
  position: absolute;
  top: var(--spacing-12);
  right: var(--spacing-12);
}

.st-modal__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding-right: var(--spacing-32);
}
.st-modal__title { margin: 0; color: var(--color-gray-900); }
.st-modal__note { margin: 0; color: var(--color-gray-500); }

.st-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}
.st-modal__field { position: relative; width: auto; }
.st-modal__field .input__hint { position: absolute; top: 100%; margin-top: var(--spacing-4); }
.st-modal__submit { width: 100%; }

.st-modal__status { display: none; width: auto; }
.st-modal__done { display: none; }

.st-modal[data-state="done"] .st-modal__form { display: none; }
.st-modal[data-state="done"] .st-modal__status--done { display: flex; }
.st-modal[data-state="done"] .st-modal__done { display: inline-flex; }
.st-modal[data-state="fail"] .st-modal__status--fail { display: flex; }

.st-alldone {
  display: none;
  width: auto;
  margin-bottom: var(--spacing-40);
}
.st-app[data-all-done="true"] .st-alldone { display: flex; }
.st-app[data-all-done="true"] .st-list { display: none; }