/* =========================================================
   MEDIA KIT
========================================================= */

.media-kit-page {
  --mk-bg: color-mix(in srgb, var(--bg, #09090d) 96%, #11131a);
  --mk-card: color-mix(in srgb, var(--panel, #12141b) 92%, transparent);
  --mk-card-strong: color-mix(in srgb, var(--panel, #12141b) 98%, #000);
  --mk-border: color-mix(in srgb, var(--line, rgba(255, 255, 255, .1)) 88%, transparent);
  --mk-text: var(--text, #f7f8fb);
  --mk-soft: var(--text-soft, #a6adbd);
  --mk-faint: var(--text-faint, #6f7788);
  --mk-accent: var(--accent, #7c3aed);

  --mk-twitch: #9146ff;
  --mk-instagram: #e1306c;
  --mk-youtube: #ff0033;
  --mk-discord: #5865f2;
  --mk-tiktok: #25f4ee;
  --mk-tiktok-pink: #fe2c55;

  position: relative;
  overflow: hidden;

  color: var(--mk-text);

  background:
    radial-gradient(
      circle at 15% 8%,
      rgba(124, 58, 237, .08),
      transparent 30%
    ),
    radial-gradient(
      circle at 85% 28%,
      rgba(0, 255, 170, .035),
      transparent 26%
    ),
    var(--mk-bg);
}


.media-kit-page *,
.media-kit-page *::before,
.media-kit-page *::after {
  box-sizing: border-box;
}


/* =========================================================
   SHARED
========================================================= */

.mk-section {
  position: relative;
  padding: 86px 0;
}


.mk-section + .mk-section {
  border-top: 1px solid var(--mk-border);
}


.mk-section-heading {
  max-width: 760px;
  margin-bottom: 34px;
}


.mk-section-heading .section-kicker,
.mk-cooperation-card .section-kicker,
.mk-vod-panel .section-kicker {
  display: inline-flex;
  margin-bottom: 12px;
  letter-spacing: .16em;
}


.mk-section-heading h2,
.mk-cooperation-card h2 {
  margin: 0;

  font-size: clamp(
    2rem,
    4vw,
    3.6rem
  );

  line-height: 1.02;
  letter-spacing: -.045em;
}


.mk-section-heading p,
.mk-cooperation-card p {
  margin: 18px 0 0;

  color: var(--mk-soft);

  font-size: 1rem;
  line-height: 1.75;
}


.mk-section-heading-split {
  display: grid;

  grid-template-columns:
    minmax(0, .92fr)
    minmax(320px, .7fr);

  align-items: end;

  gap: 50px;

  max-width: none;
}


.mk-section-heading-split > p {
  margin: 0;
}


/* =========================================================
   HERO
========================================================= */

.mk-hero {
  position: relative;

  isolation: isolate;

  min-height: 650px;

  padding: 92px 0 76px;

  overflow: hidden;

  border-bottom:
    1px solid
    var(--mk-border);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .015),
      transparent 42%
    ),
    radial-gradient(
      circle at 72% 42%,
      rgba(145, 70, 255, .14),
      transparent 30%
    );
}


.mk-hero-grid {
  position: absolute;

  inset: 0;

  z-index: -3;

  opacity: .34;

  background-image:
    linear-gradient(
      var(--mk-border) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      var(--mk-border) 1px,
      transparent 1px
    );

  background-size: 52px 52px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 86%
    );
}


.mk-hero-orb {
  position: absolute;

  z-index: -2;

  width: 420px;

  aspect-ratio: 1;

  border-radius: 50%;

  filter: blur(80px);

  opacity: .18;

  pointer-events: none;
}


.mk-hero-orb-one {
  top: -170px;
  right: 4%;

  background: var(--mk-twitch);
}


.mk-hero-orb-two {
  bottom: -240px;
  left: 22%;

  background: var(--mk-accent);
}


.mk-hero-inner {
  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(380px, .72fr);

  align-items: center;

  gap: clamp(
    50px,
    7vw,
    110px
  );
}


/* =========================================================
   HERO KICKER ROW
========================================================= */

.mk-kicker-row {
  display: flex;

  align-items: center;
  justify-content: space-between;

  flex-wrap: wrap;

  gap: 14px;

  width: 100%;

  margin-bottom: 22px;
}


.mk-kicker-row-main {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 12px;
}


.mk-kicker-row .section-kicker {
  margin: 0;
}


/* =========================================================
   LIVE SOURCE
========================================================= */

.mk-live-source {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 6px 10px;

  border:
    1px solid
    rgba(255, 255, 255, .1);

  border-radius: 999px;

  color: var(--mk-soft);

  background:
    rgba(255, 255, 255, .035);

  font-size: .68rem;
  font-weight: 800;

  letter-spacing: .08em;

  text-transform: uppercase;
}


.mk-live-source i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #52e88a;

  box-shadow:
    0 0 0 5px
    rgba(82, 232, 138, .08);
}


/* =========================================================
   LANGUAGE SWITCH
========================================================= */

.mk-language-switch {
  position: relative;

  z-index: 4;

  display: inline-flex;

  align-items: center;

  gap: 4px;

  flex: 0 0 auto;

  padding: 4px;

  border:
    1px solid
    var(--mk-border);

  border-radius: 12px;

  background:
    rgba(255, 255, 255, .028);

  box-shadow:
    inset 0 1px
    rgba(255, 255, 255, .035),
    0 8px 24px
    rgba(0, 0, 0, .12);

  backdrop-filter: blur(16px);
}


.mk-language-switch > span {
  color: var(--mk-faint);

  font-size: .62rem;

  opacity: .35;

  user-select: none;
}


.mk-language-link {
  display: grid;

  place-items: center;

  min-width: 38px;
  height: 31px;

  padding: 0 9px;

  border-radius: 8px;

  color: var(--mk-faint);

  font-size: .67rem;
  font-weight: 900;

  letter-spacing: .06em;

  text-decoration: none;

  transition:
    color .2s ease,
    background .2s ease,
    box-shadow .2s ease,
    transform .15s ease;
}


.mk-language-link:hover {
  color: var(--mk-text);

  background:
    rgba(255, 255, 255, .055);
}


.mk-language-link.is-active {
  color: #fff;

  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--mk-accent) 74%,
        #fff
      ),
      var(--mk-accent)
    );

  box-shadow:
    0 7px 22px
    rgba(124, 58, 237, .26),
    inset 0 1px
    rgba(255, 255, 255, .18);
}


.mk-language-link:active {
  transform: scale(.94);
}


/* =========================================================
   HERO TITLE
========================================================= */

.mk-hero h1 {
  margin: 0;

  max-width: 760px;

  font-size: clamp(
    3rem,
    7vw,
    6.7rem
  );

  line-height: .91;

  letter-spacing: -.065em;
}


.mk-hero h1 span {
  display: block;

  color: transparent;

  background:
    linear-gradient(
      110deg,
      #fff 0%,
      #cbb6ff 38%,
      #8c60ff 74%,
      #fff 135%
    );

  background-clip: text;

  -webkit-background-clip: text;
}


.mk-hero-lead {
  max-width: 730px;

  margin: 28px 0 0;

  color: var(--mk-soft);

  font-size: clamp(
    1rem,
    1.6vw,
    1.15rem
  );

  line-height: 1.75;
}


.mk-hero-note {
  max-width: 680px;

  margin: 14px 0 0;

  color: var(--mk-faint);

  font-size: .86rem;

  line-height: 1.65;
}


.mk-hero-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 30px;
}


.mk-hero-actions .button,
.mk-cooperation-card .button {
  display: inline-flex;

  align-items: center;

  gap: 9px;
}


/* =========================================================
   UPDATE LINE
========================================================= */

.mk-update-line {
  display: flex;

  align-items: center;

  gap: 9px;

  margin-top: 24px;

  color: var(--mk-faint);

  font-size: .74rem;

  transition:
    color .3s ease;
}


.mk-update-line i {
  color:
    color-mix(
      in srgb,
      var(--mk-accent) 78%,
      white
    );

  transition:
    color .3s ease;
}


.media-kit-page.is-live-connected
.mk-update-line {
  color:
    color-mix(
      in srgb,
      #52e88a 58%,
      var(--mk-faint)
    );
}


.media-kit-page.is-live-connected
.mk-update-line i {
  color: #52e88a;
}


.media-kit-page.is-live-disconnected
.mk-update-line {
  color: #d99b5d;
}


/* =========================================================
   COMMAND CARD
========================================================= */

.mk-command-card {
  position: relative;

  overflow: hidden;

  padding: 27px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--mk-accent) 28%,
      var(--mk-border)
    );

  border-radius: 28px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .06),
      transparent 42%
    ),
    color-mix(
      in srgb,
      var(--mk-card-strong) 94%,
      transparent
    );

  box-shadow:
    0 30px 80px
    rgba(0, 0, 0, .3),
    inset 0 1px
    rgba(255, 255, 255, .05);

  backdrop-filter: blur(22px);

  animation:
    mkCardEnter .76s .08s
    cubic-bezier(.16, 1, .3, 1)
    both;
}


.mk-command-card::before {
  content: "";

  position: absolute;

  inset:
    auto -80px -130px auto;

  width: 260px;

  aspect-ratio: 1;

  border-radius: 50%;

  background:
    rgba(145, 70, 255, .17);

  filter: blur(25px);

  pointer-events: none;
}


.mk-command-top {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  color: var(--mk-soft);

  font-size: .74rem;
  font-weight: 800;

  letter-spacing: .12em;

  text-transform: uppercase;
}


.mk-command-top i {
  color: #b89cff;
}


.mk-total-number {
  display: block;

  margin-top: 18px;

  font-size: clamp(
    3.2rem,
    6vw,
    5.6rem
  );

  line-height: .95;

  letter-spacing: -.07em;

  animation:
    mkNumberEnter .7s .22s
    cubic-bezier(.16, 1, .3, 1)
    both;
}


.mk-command-card > p {
  position: relative;

  max-width: 430px;

  margin: 16px 0 0;

  color: var(--mk-faint);

  font-size: .78rem;

  line-height: 1.6;
}


.mk-command-divider {
  height: 1px;

  margin: 24px 0;

  background:
    var(--mk-border);
}


.mk-command-mini-grid {
  position: relative;

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 12px;
}


.mk-command-mini-grid > div {
  min-width: 0;

  padding: 15px;

  border:
    1px solid
    var(--mk-border);

  border-radius: 16px;

  background:
    rgba(255, 255, 255, .025);

  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}


.mk-command-mini-grid > div:hover {
  transform:
    translateY(-2px);

  border-color:
    color-mix(
      in srgb,
      var(--mk-accent) 24%,
      var(--mk-border)
    );

  background:
    rgba(255, 255, 255, .037);
}


.mk-command-mini-grid span {
  display: block;

  margin-bottom: 7px;

  color: var(--mk-faint);

  font-size: .64rem;
  font-weight: 800;

  letter-spacing: .05em;

  text-transform: uppercase;
}


.mk-command-mini-grid strong {
  display: block;

  overflow: hidden;

  font-size: 1.08rem;

  white-space: nowrap;

  text-overflow: ellipsis;
}


.mk-status-value.is-live {
  color: #65ef95;
}


/* =========================================================
   AUDIENCE
========================================================= */

.mk-audience-section {
  padding-top: 70px;
  padding-bottom: 70px;
}


.mk-audience-card {
  padding: 24px;

  border:
    1px solid
    var(--mk-border);

  border-radius: 24px;

  background:
    var(--mk-card);

  box-shadow:
    0 22px 60px
    rgba(0, 0, 0, .16);

  animation:
    mkCardEnter .7s .12s
    cubic-bezier(.16, 1, .3, 1)
    both;
}


/* =========================================================
   AUDIENCE BAR
========================================================= */

.mk-audience-track {
  position: relative;

  display: flex;

  width: 100%;
  height: 16px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(255, 255, 255, .04);

  box-shadow:
    inset 0 1px 3px
    rgba(0, 0, 0, .34);
}


.mk-audience-track span {
  position: relative;

  width: 0;
  min-width: 0;

  overflow: hidden;

  transition:
    width 1s
    cubic-bezier(.16, 1, .3, 1),
    filter .35s ease;
}


.mk-audience-track span::after {
  content: "";

  position: absolute;

  inset: 0;

  opacity: 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .28),
      transparent
    );

  transform:
    translateX(-110%);

  pointer-events: none;
}


.mk-audience-track .is-twitch {
  background:
    var(--mk-twitch);
}


.mk-audience-track .is-instagram {
  background:
    linear-gradient(
      90deg,
      #f09433,
      #e6683c 30%,
      #dc2743 60%,
      #cc2366 80%,
      #bc1888
    );
}


.mk-audience-track .is-youtube {
  background:
    var(--mk-youtube);
}


.mk-audience-track .is-discord {
  background:
    var(--mk-discord);
}


.mk-audience-track .is-tiktok {
  background:
    linear-gradient(
      90deg,
      var(--mk-tiktok),
      #101114 48%,
      var(--mk-tiktok-pink)
    );
}


/* =========================================================
   AUDIENCE LEGEND
========================================================= */

.mk-audience-legend {
  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );

  gap: 14px;

  margin-top: 20px;
}


.mk-audience-legend > div {
  display: grid;

  grid-template-columns:
    auto 1fr;

  gap: 4px 10px;

  align-items: center;

  min-width: 0;

  padding: 14px 15px;

  border:
    1px solid
    transparent;

  border-radius: 16px;

  background:
    rgba(255, 255, 255, .025);

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease;
}


.mk-audience-legend > div:hover {
  transform:
    translateY(-2px);

  border-color:
    var(--mk-border);

  background:
    rgba(255, 255, 255, .038);
}


.mk-audience-legend i {
  grid-row:
    1 / 3;

  width: 9px;
  height: 9px;

  border-radius: 50%;
}


.mk-audience-legend i.is-twitch {
  background:
    var(--mk-twitch);
}


.mk-audience-legend i.is-instagram {
  background:
    var(--mk-instagram);
}


.mk-audience-legend i.is-youtube {
  background:
    var(--mk-youtube);
}


.mk-audience-legend i.is-discord {
  background:
    var(--mk-discord);
}


.mk-audience-legend i.is-tiktok {
  background:
    linear-gradient(
      135deg,
      var(--mk-tiktok) 0%,
      var(--mk-tiktok) 44%,
      var(--mk-tiktok-pink) 56%,
      var(--mk-tiktok-pink) 100%
    );

  box-shadow:
    0 0 12px
    rgba(37, 244, 238, .18);
}


.mk-audience-legend span {
  color: var(--mk-soft);

  font-size: .74rem;
  font-weight: 700;
}


.mk-audience-legend strong {
  font-size: 1.05rem;
}


.mk-audience-legend small {
  grid-column: 2;

  color: var(--mk-faint);

  font-size: .66rem;
}


/* =========================================================
   PLATFORM GRID
========================================================= */

.mk-platform-section {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .015),
      transparent 24%
    ),
    color-mix(
      in srgb,
      var(--bg-soft, #0d0f14) 70%,
      transparent
    );
}


.mk-platform-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 18px;
}


.mk-platform-card {
  --platform-accent:
    var(--mk-accent);

  position: relative;

  overflow: hidden;

  min-width: 0;

  padding: 24px;

  border:
    1px solid
    var(--mk-border);

  border-radius: 25px;

  background:
    linear-gradient(
      150deg,
      color-mix(
        in srgb,
        var(--platform-accent) 7%,
        transparent
      ),
      transparent 46%
    ),
    var(--mk-card);

  box-shadow:
    0 20px 55px
    rgba(0, 0, 0, .15);

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease;

  animation:
    mkCardEnter .65s
    cubic-bezier(.16, 1, .3, 1)
    both;
}


.mk-platform-card:nth-child(1) {
  animation-delay: .08s;
}


.mk-platform-card:nth-child(2) {
  animation-delay: .14s;
}


.mk-platform-card:nth-child(3) {
  animation-delay: .20s;
}


.mk-platform-card:nth-child(4) {
  animation-delay: .26s;
}


.mk-platform-card:nth-child(5) {
  animation-delay: .32s;
}


.mk-platform-card:hover {
  transform:
    translateY(-3px);

  border-color:
    color-mix(
      in srgb,
      var(--platform-accent) 34%,
      var(--mk-border)
    );

  box-shadow:
    0 26px 70px
    rgba(0, 0, 0, .23);
}


.mk-platform-card::after {
  content: "";

  position: absolute;

  top: -100px;
  right: -90px;

  width: 220px;

  aspect-ratio: 1;

  border-radius: 50%;

  background:
    color-mix(
      in srgb,
      var(--platform-accent) 15%,
      transparent
    );

  filter: blur(24px);

  pointer-events: none;
}


/* =========================================================
   PLATFORM COLORS
========================================================= */

.mk-platform-twitch {
  --platform-accent:
    var(--mk-twitch);

  grid-column:
    1 / -1;
}


.mk-platform-instagram {
  --platform-accent:
    var(--mk-instagram);
}


.mk-platform-youtube {
  --platform-accent:
    var(--mk-youtube);
}


.mk-platform-discord {
  --platform-accent:
    var(--mk-discord);
}


.mk-platform-tiktok {
  --platform-accent:
    var(--mk-tiktok);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(37, 244, 238, .08),
      transparent 31%
    ),
    radial-gradient(
      circle at 88% 23%,
      rgba(254, 44, 85, .07),
      transparent 35%
    ),
    linear-gradient(
      150deg,
      rgba(255, 255, 255, .025),
      transparent 48%
    ),
    var(--mk-card);
}


.mk-platform-tiktok::after {
  background:
    linear-gradient(
      135deg,
      rgba(37, 244, 238, .18),
      rgba(254, 44, 85, .12)
    );
}


.mk-platform-card.is-unavailable {
  opacity: .68;
}


/* =========================================================
   PLATFORM HEADER
========================================================= */

.mk-platform-card-head {
  position: relative;

  z-index: 2;

  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;
}


.mk-platform-identity {
  display: flex;

  align-items: center;

  min-width: 0;

  gap: 15px;
}


/* =========================================================
   PLATFORM AVATAR
========================================================= */

.mk-platform-avatar-wrap {
  position: relative;

  flex:
    0 0 auto;

  width: 60px;
  height: 60px;

  overflow: hidden;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--platform-accent) 30%,
      var(--mk-border)
    );

  border-radius: 17px;

  background:
    rgba(255, 255, 255, .04);

  box-shadow:
    0 10px 28px
    rgba(0, 0, 0, .24),
    inset 0 1px
    rgba(255, 255, 255, .05);
}


.mk-platform-avatar-wrap > img {
  display: block;

  width: 100%;
  height: 100%;

  border: 0;

  border-radius: inherit;

  object-fit: cover;
}


/* =========================================================
   PLATFORM COPY
========================================================= */

.mk-platform-copy {
  min-width: 0;
}


.mk-platform-brand {
  display: flex;

  align-items: center;

  gap: 7px;

  min-width: 0;

  margin-bottom: 4px;
}


.mk-platform-brand small {
  display: block;

  min-width: 0;

  margin: 0;

  color:
    color-mix(
      in srgb,
      var(--platform-accent) 72%,
      white
    );

  font-size: .62rem;
  font-weight: 900;

  letter-spacing: .14em;

  line-height: 1;

  text-transform: uppercase;
}


/* =========================================================
   PLATFORM BRAND ICON
========================================================= */

.mk-platform-icon {
  position: static;

  display: grid;

  place-items: center;

  flex:
    0 0 auto;

  width: 22px;
  height: 22px;

  padding: 0;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, .14);

  border-radius: 7px;

  color: #fff;

  background:
    var(--platform-accent);

  box-shadow:
    0 3px 10px
    rgba(0, 0, 0, .3),
    inset 0 1px
    rgba(255, 255, 255, .12);

  line-height: 1;

  transform: none;

  transition:
    transform .22s
    cubic-bezier(.16, 1, .3, 1),
    box-shadow .22s ease;
}


/* =========================================================
   FONT AWESOME ICON BASIS
========================================================= */

.mk-platform-icon > i,
.mk-platform-icon > svg {
  display: block;

  flex:
    0 0 auto;

  margin: 0;
  padding: 0;

  color: inherit;

  line-height: 1;

  transform-origin: center;
}


/* =========================================================
   TWITCH LOGO
========================================================= */

.mk-platform-twitch
.mk-platform-icon {
  background:
    linear-gradient(
      145deg,
      #a970ff,
      #772ce8
    );

  box-shadow:
    0 4px 13px
    rgba(145, 70, 255, .28),
    0 3px 9px
    rgba(0, 0, 0, .28);
}


.mk-platform-twitch
.mk-platform-icon > i {
  font-size: 11px;
}


.mk-platform-twitch
.mk-platform-icon > svg {
  width: 11px;
  height: 11px;
}


/* =========================================================
   INSTAGRAM LOGO
========================================================= */

.mk-platform-instagram
.mk-platform-icon {
  background:
    radial-gradient(
      circle at 30% 105%,
      #fdf497 0%,
      #fdf497 5%,
      #fd5949 45%,
      #d6249f 62%,
      #285aeb 100%
    );

  box-shadow:
    0 4px 13px
    rgba(225, 48, 108, .27),
    0 3px 9px
    rgba(0, 0, 0, .28);
}


.mk-platform-instagram
.mk-platform-icon > i {
  font-size: 12px;
}


.mk-platform-instagram
.mk-platform-icon > svg {
  width: 12px;
  height: 12px;
}


/* =========================================================
   YOUTUBE LOGO
========================================================= */

.mk-platform-youtube
.mk-platform-icon {
  background: #ff0033;

  box-shadow:
    0 4px 13px
    rgba(255, 0, 51, .26),
    0 3px 9px
    rgba(0, 0, 0, .28);
}


.mk-platform-youtube
.mk-platform-icon > i {
  font-size: 11px;

  transform:
    translateX(.25px);
}


.mk-platform-youtube
.mk-platform-icon > svg {
  width: 11px;
  height: 11px;

  transform:
    translateX(.25px);
}


/* =========================================================
   DISCORD LOGO
========================================================= */

.mk-platform-discord
.mk-platform-icon {
  background: #5865f2;

  box-shadow:
    0 4px 13px
    rgba(88, 101, 242, .27),
    0 3px 9px
    rgba(0, 0, 0, .28);
}


.mk-platform-discord
.mk-platform-icon > i {
  font-size: 10px;
}


.mk-platform-discord
.mk-platform-icon > svg {
  width: 11px;
  height: 11px;
}


/* =========================================================
   TIKTOK LOGO
========================================================= */

.mk-platform-tiktok
.mk-platform-icon {
  border-color:
    rgba(37, 244, 238, .35);

  background: #08090c;

  box-shadow:
    inset 1px 0
    rgba(37, 244, 238, .28),
    inset -1px 0
    rgba(254, 44, 85, .28),
    0 3px 10px
    rgba(0, 0, 0, .3);
}


.mk-platform-tiktok
.mk-platform-icon > i {
  font-size: 11px;
}


.mk-platform-tiktok
.mk-platform-icon > svg {
  width: 11px;
  height: 11px;
}


/* =========================================================
   PLATFORM BRAND HOVER
========================================================= */

.mk-platform-card:hover
.mk-platform-icon {
  transform:
    translateY(-1px)
    scale(1.06);
}


/* =========================================================
   PLATFORM IDENTITY
========================================================= */

.mk-platform-copy > strong,
.mk-platform-copy > span {
  display: block;

  max-width: 280px;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;
}


.mk-platform-copy > strong {
  font-size: 1rem;
}


.mk-platform-copy > span {
  margin-top: 3px;

  color: var(--mk-faint);

  font-size: .72rem;
}


/* =========================================================
   PLATFORM HEAD ACTIONS
========================================================= */

.mk-platform-head-actions {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 9px;
}


.mk-profile-link,
.mk-platform-state,
.mk-tiktok-verified {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  min-height: 34px;

  padding: 7px 10px;

  border:
    1px solid
    var(--mk-border);

  border-radius: 10px;

  font-size: .67rem;
  font-weight: 800;
}


/* =========================================================
   PROFILE LINK
========================================================= */

.mk-profile-link {
  position: relative;

  z-index: 3;

  color: var(--mk-text);

  text-decoration: none;

  background:
    rgba(255, 255, 255, .035);

  transition:
    border-color .2s ease,
    background .2s ease,
    transform .2s ease;
}


.mk-profile-link:hover {
  transform:
    translateY(-1px);

  border-color:
    color-mix(
      in srgb,
      var(--platform-accent) 48%,
      var(--mk-border)
    );

  background:
    color-mix(
      in srgb,
      var(--platform-accent) 10%,
      transparent
    );
}


.mk-profile-link[hidden] {
  display: none;
}


/* =========================================================
   TWITCH STATE
========================================================= */

.mk-platform-state {
  color: var(--mk-soft);

  background:
    rgba(255, 255, 255, .025);
}


.mk-platform-state > i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--mk-faint);
}


.mk-platform-state.is-live {
  color: #7ff0a5;

  border-color:
    rgba(82, 232, 138, .2);

  background:
    rgba(82, 232, 138, .06);

  box-shadow:
    0 8px 25px
    rgba(82, 232, 138, .035);
}


.mk-platform-state.is-live > i {
  background: #52e88a;

  box-shadow:
    0 0 0 4px
    rgba(82, 232, 138, .08);

  animation:
    mkLivePulse 1.8s
    ease-out infinite;
}


/* =========================================================
   TIKTOK VERIFIED
========================================================= */

.mk-tiktok-verified {
  color:
    color-mix(
      in srgb,
      var(--mk-tiktok) 72%,
      white
    );

  border-color:
    rgba(37, 244, 238, .16);

  background:
    rgba(37, 244, 238, .04);
}


.mk-tiktok-verified[hidden] {
  display: none;
}


.mk-tiktok-verified i {
  font-size: .75rem;
}


/* =========================================================
   PLATFORM MAIN STATS
========================================================= */

.mk-platform-main-stats {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    1fr 1fr 1.2fr;

  gap: 10px;

  margin-top: 25px;
}


.mk-platform-main-stats.is-two {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
}


.mk-platform-main-stats.is-three {
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );
}


.mk-platform-main-stats > div,
.mk-platform-secondary-grid > div {
  min-width: 0;

  padding: 15px;

  border:
    1px solid
    var(--mk-border);

  border-radius: 15px;

  background:
    rgba(255, 255, 255, .025);

  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}


.mk-platform-main-stats > div:hover,
.mk-platform-secondary-grid > div:hover {
  transform:
    translateY(-2px);

  border-color:
    color-mix(
      in srgb,
      var(--platform-accent) 22%,
      var(--mk-border)
    );

  background:
    rgba(255, 255, 255, .038);

  box-shadow:
    0 10px 30px
    rgba(0, 0, 0, .1);
}


.mk-platform-main-stats span,
.mk-platform-secondary-grid span,
.mk-twitch-now > span {
  display: block;

  margin-bottom: 7px;

  color: var(--mk-faint);

  font-size: .63rem;
  font-weight: 800;

  letter-spacing: .055em;

  text-transform: uppercase;
}


.mk-platform-main-stats strong,
.mk-platform-secondary-grid strong {
  display: block;

  overflow: hidden;

  font-size: clamp(
    1.2rem,
    2vw,
    1.8rem
  );

  letter-spacing: -.035em;

  white-space: nowrap;

  text-overflow: ellipsis;
}


.mk-platform-main-stats strong.is-text {
  font-size: 1rem;

  letter-spacing: -.015em;
}


/* =========================================================
   PLATFORM SECONDARY GRID
========================================================= */

.mk-platform-secondary-grid {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 10px;

  margin-top: 10px;
}


.mk-platform-secondary-grid.is-single {
  grid-template-columns: 1fr;
}


.mk-platform-secondary-grid strong {
  font-size: 1.08rem;
}


/* =========================================================
   TWITCH NOW
========================================================= */

.mk-twitch-now {
  position: relative;

  z-index: 2;

  margin-top: 10px;

  padding: 15px;

  border:
    1px solid
    var(--mk-border);

  border-radius: 15px;

  background:
    rgba(255, 255, 255, .02);

  transition:
    border-color .25s ease,
    background .25s ease;
}


.mk-twitch-now:hover {
  border-color:
    color-mix(
      in srgb,
      var(--mk-twitch) 20%,
      var(--mk-border)
    );

  background:
    rgba(255, 255, 255, .03);
}


.mk-twitch-now strong {
  display: block;

  color: var(--mk-soft);

  font-size: .82rem;
  font-weight: 700;

  line-height: 1.55;
}


/* =========================================================
   PLATFORM AVAILABILITY
========================================================= */

.mk-platform-availability {
  position: relative;

  z-index: 2;

  display: none;

  margin-top: 12px;

  padding: 10px 12px;

  border:
    1px solid
    rgba(255, 175, 80, .16);

  border-radius: 12px;

  color: #ffc177;

  background:
    rgba(255, 175, 80, .05);

  font-size: .7rem;

  line-height: 1.5;
}


.mk-platform-card.is-unavailable
.mk-platform-availability {
  display: block;
}


/* =========================================================
   TWITCH PERFORMANCE
========================================================= */

.mk-twitch-performance {
  background:
    radial-gradient(
      circle at 78% 34%,
      rgba(145, 70, 255, .09),
      transparent 30%
    );
}


.mk-performance-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(350px, .72fr);

  gap: 18px;

  align-items: stretch;
}


.mk-performance-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 12px;
}


.mk-performance-grid article {
  position: relative;

  min-height: 150px;

  overflow: hidden;

  padding: 20px;

  border:
    1px solid
    var(--mk-border);

  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(145, 70, 255, .065),
      transparent 56%
    ),
    var(--mk-card);

  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;

  animation:
    mkMetricEnter .6s
    cubic-bezier(.16, 1, .3, 1)
    both;
}


.mk-performance-grid article:nth-child(1) {
  animation-delay: .04s;
}


.mk-performance-grid article:nth-child(2) {
  animation-delay: .08s;
}


.mk-performance-grid article:nth-child(3) {
  animation-delay: .12s;
}


.mk-performance-grid article:nth-child(4) {
  animation-delay: .16s;
}


.mk-performance-grid article:nth-child(5) {
  animation-delay: .20s;
}


.mk-performance-grid article:nth-child(6) {
  animation-delay: .24s;
}


.mk-performance-grid article:nth-child(7) {
  animation-delay: .28s;
}


.mk-performance-grid article:nth-child(8) {
  animation-delay: .32s;
}


.mk-performance-grid article:nth-child(9) {
  animation-delay: .36s;
}


.mk-performance-grid article:last-child {
  grid-column:
    1 / -1;
}


.mk-performance-grid article:hover {
  transform:
    translateY(-2px);

  border-color:
    color-mix(
      in srgb,
      var(--mk-twitch) 24%,
      var(--mk-border)
    );

  background:
    linear-gradient(
      145deg,
      rgba(145, 70, 255, .09),
      transparent 56%
    ),
    var(--mk-card);

  box-shadow:
    0 16px 45px
    rgba(0, 0, 0, .16);
}


.mk-performance-grid span {
  position: relative;

  z-index: 2;

  display: block;

  max-width: 70%;

  color: var(--mk-soft);

  font-size: .72rem;

  line-height: 1.4;
}


.mk-performance-grid strong {
  position: relative;

  z-index: 2;

  display: block;

  margin-top: 18px;

  font-size: clamp(
    1.8rem,
    3vw,
    3rem
  );

  line-height: 1;

  letter-spacing: -.055em;
}


.mk-performance-grid i {
  position: absolute;

  right: 18px;
  bottom: 16px;

  color:
    rgba(184, 156, 255, .12);

  font-size: 3.2rem;

  transition:
    color .25s ease,
    transform .25s ease;
}


.mk-performance-grid article:hover i {
  color:
    rgba(184, 156, 255, .18);

  transform:
    scale(1.06);
}


/* =========================================================
   TWITCH VIEWER TRACKING
========================================================= */

.mk-viewer-tracking-note {
  margin-top: 12px;

  padding: 18px 20px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--mk-twitch) 18%,
      var(--mk-border)
    );

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      rgba(145, 70, 255, .055),
      transparent 64%
    ),
    var(--mk-card);

  box-shadow:
    inset 0 1px
    rgba(255, 255, 255, .025);
}


.mk-viewer-tracking-note > div {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 9px;

  color: var(--mk-soft);

  font-size: .72rem;
}


.mk-viewer-tracking-note > div > i {
  color: #b89cff;
}


.mk-viewer-tracking-note > div > span {
  color: var(--mk-faint);

  font-weight: 700;
}


.mk-viewer-tracking-note > div > strong {
  color: var(--mk-text);
}


.mk-viewer-tracking-note > p {
  margin: 11px 0 0;

  color: var(--mk-faint);

  font-size: .7rem;

  line-height: 1.55;
}


/* =========================================================
   TWITCH MEDIA GRID
========================================================= */

.mk-twitch-media-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  align-items: start;

  gap: 18px;

  margin-top: 18px;
}


/* =========================================================
   VOD + CLIP PANEL
========================================================= */

.mk-vod-panel {
  min-width: 0;

  overflow: hidden;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--mk-twitch) 24%,
      var(--mk-border)
    );

  border-radius: 22px;

  background:
    var(--mk-card);

  box-shadow:
    0 18px 48px
    rgba(0, 0, 0, .12);
}


.mk-clips-panel {
  border-color:
    color-mix(
      in srgb,
      var(--mk-twitch) 18%,
      var(--mk-border)
    );
}


.mk-vod-panel-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  min-height: 86px;

  padding: 20px;

  border-bottom:
    1px solid
    var(--mk-border);

  background:
    linear-gradient(
      135deg,
      rgba(145, 70, 255, .09),
      transparent
    );
}


.mk-clips-panel
.mk-vod-panel-head {
  background:
    linear-gradient(
      135deg,
      rgba(145, 70, 255, .07),
      rgba(255, 255, 255, .018) 48%,
      transparent
    );
}


.mk-vod-panel-head > div {
  min-width: 0;
}


.mk-vod-panel-head .section-kicker {
  margin: 0 0 4px;

  font-size: .6rem;
}


.mk-vod-panel-head strong {
  display: block;

  font-size: .95rem;
}


.mk-panel-subtitle {
  display: block;

  margin-top: 5px;

  color: var(--mk-faint);

  font-size: .64rem;
  font-weight: 700;

  line-height: 1.35;
}


.mk-vod-panel-head > i {
  flex:
    0 0 auto;

  color: #b89cff;

  font-size: 1.5rem;
}


.mk-clips-panel
.mk-vod-panel-head > i {
  color:
    color-mix(
      in srgb,
      var(--mk-twitch) 74%,
      white
    );
}


/* =========================================================
   VOD + CLIP LIST
========================================================= */

.mk-vod-list,
.mk-clip-list {
  display: grid;
}


.mk-vod-item,
.mk-clip-item {
  display: grid;

  grid-template-columns:
    112px
    minmax(0, 1fr);

  gap: 13px;

  min-width: 0;

  padding: 14px;

  color: inherit;

  text-decoration: none;

  border-bottom:
    1px solid
    var(--mk-border);

  transition:
    background .2s ease,
    transform .2s ease;
}


.mk-vod-item:last-child,
.mk-clip-item:last-child {
  border-bottom: 0;
}


.mk-vod-item:hover,
.mk-clip-item:hover {
  background:
    rgba(145, 70, 255, .055);
}


/* =========================================================
   MEDIA THUMBNAIL
========================================================= */

.mk-vod-thumb,
.mk-clip-thumb {
  position: relative;

  overflow: hidden;

  aspect-ratio:
    16 / 9;

  border-radius: 10px;

  background:
    rgba(255, 255, 255, .04);
}


.mk-vod-thumb img,
.mk-clip-thumb img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform .3s ease;
}


.mk-vod-item:hover
.mk-vod-thumb img,
.mk-clip-item:hover
.mk-clip-thumb img {
  transform:
    scale(1.035);
}


.mk-vod-thumb span,
.mk-clip-thumb span {
  position: absolute;

  right: 5px;
  bottom: 5px;

  padding: 3px 5px;

  border-radius: 5px;

  color: #fff;

  background:
    rgba(0, 0, 0, .72);

  font-size: .58rem;
  font-weight: 800;
}


/* =========================================================
   CLIP RANK
========================================================= */

.mk-clip-rank {
  position: absolute;

  top: 5px;
  left: 5px;

  z-index: 2;

  display: grid;

  place-items: center;

  min-width: 25px;
  height: 22px;

  padding: 0 6px;

  border:
    1px solid
    rgba(255, 255, 255, .14);

  border-radius: 7px;

  color: #fff;

  background:
    rgba(16, 13, 24, .82);

  box-shadow:
    0 4px 12px
    rgba(0, 0, 0, .28);

  backdrop-filter:
    blur(8px);

  font-size: .58rem;
  font-weight: 900;
}


/* =========================================================
   VOD + CLIP COPY
========================================================= */

.mk-vod-copy,
.mk-clip-copy {
  min-width: 0;
}


.mk-vod-copy strong,
.mk-clip-copy strong {
  display:
    -webkit-box;

  overflow: hidden;

  color: var(--mk-text);

  font-size: .75rem;

  line-height: 1.4;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp: 2;
}


.mk-vod-copy span,
.mk-clip-copy span {
  display: block;

  margin-top: 7px;

  color: var(--mk-faint);

  font-size: .64rem;

  line-height: 1.45;
}


.mk-clip-meta {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 5px 8px;

  margin-top: 7px;

  color: var(--mk-faint);

  font-size: .64rem;

  line-height: 1.45;
}


.mk-clip-meta strong {
  display: inline;

  color: var(--mk-soft);

  font-size: inherit;
  font-weight: 800;

  line-height: inherit;
}


.mk-vod-empty {
  padding: 28px 20px;

  color: var(--mk-faint);

  font-size: .75rem;
}


/* =========================================================
   CONTENT
========================================================= */

.mk-content-section {
  background:
    color-mix(
      in srgb,
      var(--bg-soft, #0d0f14) 72%,
      transparent
    );
}


.mk-content-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 14px;
}


.mk-content-grid article {
  position: relative;

  min-height: 250px;

  padding: 24px;

  overflow: hidden;

  border:
    1px solid
    var(--mk-border);

  border-radius: 22px;

  background:
    var(--mk-card);

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


.mk-content-grid article:hover {
  transform:
    translateY(-3px);

  border-color:
    color-mix(
      in srgb,
      var(--mk-accent) 24%,
      var(--mk-border)
    );

  box-shadow:
    0 22px 55px
    rgba(0, 0, 0, .15);
}


.mk-content-index {
  position: absolute;

  top: 18px;
  right: 18px;

  color: var(--mk-faint);

  font-size: .62rem;
  font-weight: 900;

  letter-spacing: .1em;
}


.mk-content-grid article > i {
  display: grid;

  place-items: center;

  width: 42px;
  height: 42px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--mk-accent) 28%,
      var(--mk-border)
    );

  border-radius: 13px;

  color: #c6b2ff;

  background:
    rgba(124, 58, 237, .07);

  font-size: 1rem;

  transition:
    transform .25s ease,
    background .25s ease;
}


.mk-content-grid article:hover > i {
  transform:
    translateY(-2px)
    scale(1.04);

  background:
    rgba(124, 58, 237, .11);
}


.mk-content-grid h3 {
  margin: 54px 0 0;

  font-size: 1.35rem;

  letter-spacing: -.03em;
}


.mk-content-grid p {
  margin: 12px 0 0;

  color: var(--mk-soft);

  font-size: .84rem;

  line-height: 1.65;
}


/* =========================================================
   COOPERATION
========================================================= */

.mk-cooperation-section {
  padding: 78px 0 92px;

  border-top:
    1px solid
    var(--mk-border);
}


.mk-cooperation-card {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 50px;

  overflow: hidden;

  padding: clamp(
    28px,
    5vw,
    52px
  );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--mk-accent) 32%,
      var(--mk-border)
    );

  border-radius: 28px;

  background:
    linear-gradient(
      135deg,
      rgba(124, 58, 237, .1),
      transparent 54%
    ),
    var(--mk-card-strong);

  box-shadow:
    0 30px 80px
    rgba(0, 0, 0, .2);
}


.mk-cooperation-card >
div:not(.mk-cooperation-glow),
.mk-cooperation-card > button {
  position: relative;

  z-index: 2;
}


.mk-cooperation-card p {
  max-width: 760px;
}


.mk-cooperation-glow {
  position: absolute;

  right: -80px;
  top: -130px;

  width: 340px;

  aspect-ratio: 1;

  border-radius: 50%;

  background:
    rgba(145, 70, 255, .16);

  filter: blur(40px);
}


/* =========================================================
   TOAST
========================================================= */

.mk-toast {
  position: fixed;

  right: 22px;
  bottom: 22px;

  z-index: 80;

  max-width:
    min(
      360px,
      calc(100vw - 44px)
    );

  padding: 11px 14px;

  border:
    1px solid
    var(--mk-border);

  border-radius: 12px;

  color: var(--mk-soft);

  background:
    color-mix(
      in srgb,
      var(--mk-card-strong) 94%,
      transparent
    );

  box-shadow:
    0 18px 55px
    rgba(0, 0, 0, .3);

  backdrop-filter: blur(18px);

  font-size: .72rem;

  opacity: 0;

  transform:
    translateY(12px);

  pointer-events: none;

  transition:
    opacity .2s ease,
    transform .2s ease,
    border-color .2s ease;
}


.mk-toast.is-visible {
  opacity: 1;

  transform:
    translateY(0);
}


.mk-toast.is-error {
  color: #ffc7c7;

  border-color:
    rgba(255, 90, 90, .22);
}


/* =========================================================
   PAGE OPEN ANIMATIONS
========================================================= */

.mk-hero-copy {
  animation:
    mkHeroEnter .72s
    cubic-bezier(.16, 1, .3, 1)
    both;
}


/* =========================================================
   VALUE ANIMATIONS
========================================================= */

.mk-total-number,
.mk-command-mini-grid strong,
.mk-platform-main-stats strong,
.mk-platform-secondary-grid strong,
.mk-performance-grid strong,
.mk-audience-legend strong,
.mk-audience-legend small {
  will-change:
    transform,
    opacity;
}


.media-kit-page
.is-value-updated {
  animation:
    mkValueUpdate .55s
    cubic-bezier(.16, 1, .3, 1);
}


/* =========================================================
   AUDIENCE BAR UPDATE
========================================================= */

.mk-audience-track
span.is-bar-updated {
  animation:
    mkBarGlow .85s
    cubic-bezier(.16, 1, .3, 1);
}


.mk-audience-track
span.is-bar-updated::after {
  animation:
    mkBarSweep .8s ease;
}


/* =========================================================
   PLATFORM LIVE UPDATE FLASH
========================================================= */

.mk-platform-card.is-live-updated {
  animation:
    mkPlatformUpdate .8s
    cubic-bezier(.16, 1, .3, 1);
}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes mkHeroEnter {

  from {
    opacity: 0;

    translate:
      0 20px;
  }

  to {
    opacity: 1;

    translate:
      0 0;
  }

}


@keyframes mkCardEnter {

  from {
    opacity: 0;

    translate:
      0 18px;

    scale: .985;
  }

  to {
    opacity: 1;

    translate:
      0 0;

    scale: 1;
  }

}


@keyframes mkMetricEnter {

  from {
    opacity: 0;

    translate:
      0 12px;

    scale: .98;
  }

  to {
    opacity: 1;

    translate:
      0 0;

    scale: 1;
  }

}


@keyframes mkNumberEnter {

  from {
    opacity: .15;

    translate:
      0 8px;

    scale: .96;
  }

  to {
    opacity: 1;

    translate:
      0 0;

    scale: 1;
  }

}


@keyframes mkValueUpdate {

  0% {
    opacity: .45;

    transform:
      translateY(5px)
      scale(.94);

    filter:
      blur(2px);
  }

  48% {
    opacity: 1;

    color:
      color-mix(
        in srgb,
        var(
          --platform-accent,
          var(--mk-accent)
        ) 48%,
        var(--mk-text)
      );

    transform:
      translateY(-1px)
      scale(1.055);

    filter:
      blur(0);
  }

  100% {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);

    filter:
      blur(0);
  }

}


@keyframes mkBarGlow {

  0% {
    filter:
      brightness(1);
  }

  45% {
    filter:
      brightness(1.5)
      saturate(1.25);
  }

  100% {
    filter:
      brightness(1);
  }

}


@keyframes mkBarSweep {

  from {
    opacity: 0;

    transform:
      translateX(-110%);
  }

  35% {
    opacity: .85;
  }

  to {
    opacity: 0;

    transform:
      translateX(110%);
  }

}


@keyframes mkLivePulse {

  0% {
    box-shadow:
      0 0 0 0
      rgba(82, 232, 138, .38);
  }

  70% {
    box-shadow:
      0 0 0 7px
      rgba(82, 232, 138, 0);
  }

  100% {
    box-shadow:
      0 0 0 0
      rgba(82, 232, 138, 0);
  }

}


@keyframes mkPlatformUpdate {

  0% {
    border-color:
      var(--mk-border);

    box-shadow:
      0 20px 55px
      rgba(0, 0, 0, .15);
  }

  35% {
    border-color:
      color-mix(
        in srgb,
        var(--platform-accent) 68%,
        var(--mk-border)
      );

    box-shadow:
      0 24px 72px
      color-mix(
        in srgb,
        var(--platform-accent) 13%,
        transparent
      );
  }

  100% {
    border-color:
      var(--mk-border);

    box-shadow:
      0 20px 55px
      rgba(0, 0, 0, .15);
  }

}


/* =========================================================
   RESPONSIVE · 1200
========================================================= */

@media (max-width: 1200px) {

  .mk-audience-legend {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

}


/* =========================================================
   RESPONSIVE · 1100
========================================================= */

@media (max-width: 1100px) {

  .mk-hero-inner,
  .mk-performance-layout,
  .mk-twitch-media-grid {
    grid-template-columns: 1fr;
  }


  .mk-command-card {
    max-width: 760px;
  }


  .mk-section-heading-split {
    grid-template-columns: 1fr;

    gap: 18px;
  }

}


/* =========================================================
   RESPONSIVE · 820
========================================================= */

@media (max-width: 820px) {

  .mk-section {
    padding: 64px 0;
  }


  .mk-hero {
    min-height: 0;

    padding:
      70px 0 60px;
  }


  .mk-hero h1 {
    font-size:
      clamp(
        3.2rem,
        15vw,
        5.6rem
      );
  }


  .mk-kicker-row {
    align-items:
      flex-start;
  }


  .mk-platform-grid,
  .mk-content-grid {
    grid-template-columns: 1fr;
  }


  .mk-platform-twitch {
    grid-column: auto;
  }


  .mk-platform-main-stats,
  .mk-platform-main-stats.is-three {
    grid-template-columns:
      1fr 1fr;
  }


  .mk-platform-main-stats >
  div:last-child:nth-child(3) {
    grid-column:
      1 / -1;
  }


  .mk-audience-legend {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .mk-cooperation-card {
    grid-template-columns: 1fr;

    gap: 26px;
  }

}


/* =========================================================
   RESPONSIVE · 620
========================================================= */

@media (max-width: 620px) {

  .mk-hero {
    padding-top: 54px;
  }


  .mk-kicker-row {
    flex-direction: column;

    align-items:
      flex-start;
  }


  .mk-language-switch {
    margin-top: 2px;
  }


  .mk-hero-actions,
  .mk-hero-actions .button {
    width: 100%;
  }


  .mk-hero-actions .button {
    justify-content: center;
  }


  .mk-command-mini-grid,
  .mk-audience-legend,
  .mk-performance-grid,
  .mk-platform-main-stats,
  .mk-platform-main-stats.is-two,
  .mk-platform-main-stats.is-three,
  .mk-platform-secondary-grid {
    grid-template-columns: 1fr;
  }


  .mk-platform-main-stats >
  div:last-child:nth-child(3) {
    grid-column: auto;
  }


  .mk-platform-card {
    padding: 20px;
  }


  .mk-platform-card-head {
    align-items: stretch;

    flex-direction: column;
  }


  .mk-platform-head-actions {
    justify-content: flex-start;
  }


  .mk-profile-link {
    width: fit-content;
  }


  .mk-platform-avatar-wrap {
    width: 58px;
    height: 58px;

    border-radius: 16px;
  }


  .mk-platform-avatar-wrap > img {
    width: 100%;
    height: 100%;

    border-radius: inherit;
  }


  .mk-platform-brand {
    gap: 6px;
  }


  .mk-platform-icon {
    width: 21px;
    height: 21px;

    border-radius: 7px;
  }


  .mk-performance-grid article:last-child {
    grid-column: auto;
  }


  .mk-vod-item,
  .mk-clip-item {
    grid-template-columns:
      96px
      minmax(0, 1fr);
  }


  .mk-viewer-tracking-note {
    padding: 16px;
  }

}


/* =========================================================
   RESPONSIVE · 420
========================================================= */

@media (max-width: 420px) {

  .mk-platform-card {
    border-radius: 21px;
  }


  .mk-platform-identity {
    gap: 13px;
  }


  .mk-platform-copy > strong,
  .mk-platform-copy > span {
    max-width: 210px;
  }


  .mk-language-link {
    min-width: 36px;
    height: 29px;
  }


  .mk-audience-card {
    padding: 18px;
  }


  .mk-audience-track {
    height: 13px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .mk-hero-copy,
  .mk-command-card,
  .mk-audience-card,
  .mk-platform-card,
  .mk-performance-grid article,
  .mk-total-number,
  .media-kit-page .is-value-updated,
  .mk-audience-track span.is-bar-updated,
  .mk-audience-track span.is-bar-updated::after,
  .mk-platform-state.is-live > i,
  .mk-platform-card.is-live-updated {
    animation: none !important;
  }


  .mk-platform-card,
  .mk-audience-track span,
  .mk-toast,
  .mk-profile-link,
  .mk-platform-icon,
  .mk-content-grid article,
  .mk-command-mini-grid > div,
  .mk-platform-main-stats > div,
  .mk-platform-secondary-grid > div,
  .mk-performance-grid article {
    transition: none !important;
  }

}