.kd { font-family: var(--kp-font); }

body.kd-before .kr-hud { display: none; }

.kd-start .ks__col { position: relative; }
.kd-start__below {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: max-content;
  display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2.2vmin, 22px);
  margin-top: clamp(12px, 2.2vmin, 22px);
}
@media (max-height: 400px) { .kd-start__below { gap: 8px; margin-top: 8px; } }

@media (max-height: 320px) {
  .kd-start .ks__play { width: 64px; height: 64px; box-shadow: 0 8px 28px rgba(8, 8, 30, .4), 0 0 0 7px rgba(255, 255, 255, .14); }
  .kd-start .ks__col { gap: 8px; }
  .kd-start__below { gap: 8px; margin-top: 8px; }
  .kd-start .ks__label { margin: 2px 0 0; font-size: 13px; }
  .kd-start .ks__where { display: none; }
  .kd-start .ks__btn { display: none; }
}

.kd-cover { display: none; }
body.kd-before .kd-cover { display: block; position: fixed; inset: 0; z-index: 109; overflow: hidden; background: #1e1e2f; }
.kd-cover__box {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden;
  width: max(100vw, 177.78vh); height: max(56.25vw, 100vh); container-type: size;
}
.kd-cover__shot { position: absolute; left: 5.15%; top: -2.155%; width: 116.38%; height: 116.38%; max-width: none; display: block; }
.kd-cover__box::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(52% 70% at 10% 118%, rgba(250, 30, 41, .17) 0%, transparent 68%),
    linear-gradient(90deg, #232265 0%, #222163 28%, rgba(34, 33, 99, .9) 38%, rgba(37, 36, 120, .5) 50%, rgba(37, 36, 120, .1) 64%, transparent 76%),
    linear-gradient(rgba(26, 25, 74, .34), rgba(26, 25, 74, .34));
}
.kd-cover__copy {
  position: absolute; z-index: 2; left: 6cqw; top: 0; bottom: 0; width: 40cqw;
  display: flex; flex-direction: column; justify-content: center; font-family: var(--kp-font); color: #fff;
}
.kd-cover__eyebrow {
  display: flex; align-items: center; gap: 1.2cqw; margin: 0 0 1.9cqw;
  font-size: 1.5cqw; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .78);
}
.kd-cover__eyebrow::before { content: ''; width: 2.5cqw; height: max(2px, .25cqw); background: var(--kp-red, #FA1E29); }
.kd-cover__title { margin: 0; font-size: 4.4cqw; line-height: 1.12; font-weight: 700; }
.kd-cover__title span { display: block; white-space: nowrap; }
.kd-cover__em { color: var(--kp-on-dark-em); }
.kd-cover__logo { position: absolute; z-index: 2; left: 6cqw; bottom: 8.9cqh; height: 7.3cqh; width: auto; }
@container (max-width: 560px) { .kd-cover__eyebrow { display: none; } }
@media (max-aspect-ratio: 1/1) { .kd-cover__box { width: 100vw; height: 56.25vw; } }

.kr-cc { transition: transform .25s; }
body.kr-hud-on .kr-cc { transform: translateY(calc(-1 * var(--kd-cc-lift, 0px))); }

.kd-turn { display: none; }
@media (max-aspect-ratio: 1/1) and (pointer: coarse) {
  body.kr-full .kd-turn {
    display: block; position: fixed; left: 16px; right: 16px; top: calc(50vh - 28.125vw - 52px); z-index: 99; margin: 0;
    text-align: center; font: 400 14px/1.4 var(--kp-font); color: rgba(255, 255, 255, .72);
  }
}

.kd-rel {
  position: fixed; left: 18px; bottom: 106px; z-index: 105; display: inline-flex; align-items: center; gap: 10px;
  max-width: calc(100% - 36px); box-sizing: border-box; padding: 10px 14px 10px 16px; border-radius: 999px;
  font: 700 14px/1.2 var(--kp-font); color: #fff; text-decoration: none;
  background: rgba(12, 12, 36, .74); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(6px);
  box-shadow: 0 6px 24px rgba(8, 8, 30, .25);
  opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .35s, transform .35s, background-color .15s, border-color .15s;
}
.kd-rel.is-on { opacity: 1; transform: none; pointer-events: auto; }
.kd-rel__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-rel svg { flex: none; width: 16px; height: 16px; fill: currentColor; transition: transform .2s; }
.kd-rel:hover { background: rgba(12, 12, 36, .9); border-color: rgba(255, 255, 255, .45); }
.kd-rel:hover svg { transform: translateX(3px); }
.kd-rel:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-height: 299px) { .kd-rel { display: none; } }

.kd-share {
  position: fixed; left: 50%; top: calc(max(0px, (100vh - 56.25vw) / 2) + min(100vh, 56.25vw) * .03);
  z-index: 105; display: inline-flex; align-items: center; gap: 12px;
  max-width: calc(100% - 36px); box-sizing: border-box; padding: 15px 26px 15px 21px; border-radius: 999px;
  font: 700 18px/1.2 var(--kp-font); color: #fff; cursor: pointer;
  background: rgba(12, 12, 36, .82); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(8px);
  box-shadow: 0 10px 36px rgba(8, 8, 30, .35);
  opacity: 0; transform: translate(-50%, -8px); pointer-events: none; transition: opacity .3s, transform .3s, background-color .15s, border-color .15s;
}
.kd-share.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.kd-share__ico { display: inline-flex; flex: none; }
.kd-share svg { width: 22px; height: 22px; fill: currentColor; }
.kd-share__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-share__at { font-weight: 400; color: rgba(255, 255, 255, .72); }
.kd-share__dot { margin: 0 .24em 0 .06em; }
.kd-share:hover { background: rgba(12, 12, 36, .94); border-color: rgba(255, 255, 255, .5); }
.kd-share:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.kd-share.is-copied .kd-share__ico { color: #8fe3a6; }
.kd-share.is-copied .kd-share__text { user-select: all; -webkit-user-select: all; }
.kd-share__said { position: fixed; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
@media (max-height: 360px), (max-width: 480px) {
  .kd-share { gap: 8px; padding: 9px 16px 9px 13px; font-size: 14px; }
  .kd-share svg { width: 17px; height: 17px; }
}

.kr-hud--embed { padding: 22px 18px 10px; }
.kr-hud--embed .kr-hud__bar { gap: 10px; }
.kr-hud--embed button { padding: 7px 9px; }
.kr-hud--embed button svg { width: 18px; height: 18px; }
.kr-hud--embed .kr-hud__time { min-width: 0; margin: 0 4px; }
.kr-hud--embed .kr-hud__where b { color: rgba(255, 255, 255, .45); margin: 0 6px; }
.kr-hud--embed .kr-hud__fill { background: #6b69e6; }
.kr-hud--embed .kr-hud__fs { padding: 7px 12px 7px 10px; font-weight: 700; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .34); }
.kr-hud--embed .kr-hud__fs:hover { background: rgba(255, 255, 255, .26); }
.kr-hud--embed .kr-hud__fs[hidden] { display: none; }
.kr-hud--embed .kr-hud__fs .kr-hud__ico-unfs,
.kr-hud--embed .kr-hud__fs[data-full] .kr-hud__ico-fs,
.kr-hud--embed .kr-hud__fs[data-full] span { display: none; }
.kr-hud--embed .kr-hud__fs[data-full] { padding: 7px 9px; font-weight: 400; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); }
.kr-hud--embed .kr-hud__fs[data-full] .kr-hud__ico-unfs { display: inline; }
@media (max-width: 560px) {
  .kr-hud--embed { padding: 16px 10px 6px; font-size: 12px; }
  .kr-hud--embed .kr-hud__bar { gap: 6px; }
  .kr-hud--embed button { padding: 7px 8px; }
  .kr-hud--embed .kr-hud__time { white-space: nowrap; margin: 0 2px; }
  .kr-hud--embed .kr-hud__where, .kr-hud--embed .kr-hud__ch span { display: none; }
  .kr-hud--embed .kr-hud__track { height: 22px; }
  .kr-hud--embed .kr-hud__chs { top: 8px; }
  .kr-hud--embed .kr-hud__fill { top: 8px; }
  .kr-hud--embed .kr-hud__head { top: 3px; }
  .kr-hud--embed .kr-hud__fs { padding: 7px 9px; }
  .kr-hud--embed .kr-hud__fs span { display: none; }
}