html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
body.kr-idle, body.kr-idle * { cursor: none !important; }

.kr-stage {
  position: fixed; left: 0; top: 0;
  width: 1920px; height: 1080px;
  transform-origin: 0 0;
  overflow: hidden;
  contain: strict;
}
.kr-ground, .kr-scenes, .kr-scene, .kr-guides { position: absolute; inset: 0; }
.kr-scenes { z-index: 1; pointer-events: none; }
.kr-scene { overflow: hidden; }
.kr-chrome { z-index: 5; }
.kr-guides { z-index: 9; pointer-events: none; }
.kr-broken { margin: 200px; font: 700 32px/1.4 sans-serif; color: #fff; background: #b00e17; padding: 24px; }

.kr-guides i { position: absolute; border: 2px dashed rgba(0, 255, 200, .8); }
.kr-guides i::after { position: absolute; left: 8px; top: 4px; font: 700 18px/1 sans-serif; color: rgba(0, 255, 200, .9); }
.kr-guides .kr-guides__action { inset: 37.8px 67.2px; }
.kr-guides .kr-guides__action::after { content: 'action safe 93%'; }
.kr-guides .kr-guides__title { inset: 54px 96px; }
.kr-guides .kr-guides__title::after { content: 'title safe 90%'; }

.kr-hud {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  padding: 28px 20px 12px;
  background: linear-gradient(to top, rgba(10, 10, 20, .92), rgba(10, 10, 20, .75) 70%, transparent);
  color: #e8e8f2; font: 13px/1.3 'Century Gothic', 'Segoe UI', Tahoma, sans-serif;
  transition: opacity .25s, transform .25s;
  user-select: none;
}
.kr-hud.is-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }
.kr-hud button {
  font: inherit; color: inherit; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 6px; padding: 5px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.kr-hud button:hover { background: rgba(255, 255, 255, .16); }
.kr-hud button svg { width: 16px; height: 16px; fill: currentColor; }
.kr-hud [data-k="play"] span { display: inline-flex; pointer-events: none; }
.kr-hud [data-k="play"] .kr-hud__ico-pause,
.kr-hud [data-k="play"][data-playing] .kr-hud__ico-play { display: none; }
.kr-hud [data-k="play"][data-playing] .kr-hud__ico-pause { display: inline-flex; }

.kr-hud__track { position: relative; height: 34px; cursor: pointer; touch-action: none; }
.kr-hud__chs { position: absolute; inset: 14px 0 0; display: flex; gap: 3px; }
.kr-hud__ch { position: relative; min-width: 0; background: rgba(255, 255, 255, .16); border-radius: 2px; height: 6px; }
.kr-hud__ch span {
  position: absolute; bottom: 10px; left: 0; right: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 11px; color: rgba(255, 255, 255, .6);
}
.kr-hud__ch i { position: absolute; top: -2px; width: 2px; height: 10px; background: rgba(10, 10, 20, .9); }
.kr-hud__fill { position: absolute; left: 0; top: 14px; height: 6px; background: #5a58d8; border-radius: 2px; mix-blend-mode: screen; pointer-events: none; }
.kr-hud__head { position: absolute; top: 9px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(90, 88, 216, .6); pointer-events: none; }
.kr-hud__tip {
  position: absolute; bottom: 30px; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  background: #000; color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 12px;
}
.kr-hud__bar { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.kr-hud__time { font-variant-numeric: tabular-nums; margin: 0 10px 0 6px; min-width: 120px; }
.kr-hud__where { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255, 255, 255, .85); }
.kr-hud__where b { color: #5a58d8; margin: 0 4px; }
.kr-hud__where i { font-style: normal; color: rgba(255, 255, 255, .5); margin-left: 6px; }
.kr-hud__gap { flex: 1; }
.kr-hud .kr-hud__errors { background: #b00e17; border-color: #de121c; font-weight: 700; }
.kr-hud__help {
  position: absolute; right: 20px; bottom: 84px; width: 440px; padding: 16px 18px;
  background: rgba(10, 10, 20, .96); border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px;
}
.kr-hud__help dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; margin: 0 0 12px; }
.kr-hud__help dt { font-weight: 700; color: #fff; }
.kr-hud__help dd { margin: 0; color: rgba(255, 255, 255, .8); }
.kr-hud__help p { margin: 0; color: rgba(255, 255, 255, .7); }
.kr-hud__errlist { margin: 12px 0 0; padding-left: 18px; color: #ff8a8f; }
.kr-hud__errlist:empty { display: none; }
[hidden] { display: none !important; }

.kr-cc { position: absolute; left: 80px; right: 80px; bottom: 16px; z-index: 6; display: flex; justify-content: center; pointer-events: none; }
.kr-cc span {
  display: inline-block; max-width: 1560px; padding: 9px 22px 10px; border-radius: 8px;
  background: rgba(8, 8, 26, .82); color: #fff; text-align: center;
  font: 400 28px/1.42 'Century Gothic', 'Segoe UI', Tahoma, sans-serif; letter-spacing: 0;
  text-wrap: pretty;
}
.kr-cc.is-empty span { display: none; }
.kr-cc.has-jump { right: var(--kr-jump-room, 500px); }

.kr-jump {
  position: fixed; right: 20px; bottom: 16px; z-index: 101; box-sizing: border-box; width: 360px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 50px 11px 16px;
  border: 1.5px solid transparent; border-radius: 10px; cursor: pointer; text-align: left; color: #fff;
  background: linear-gradient(rgba(8, 8, 26, .9), rgba(8, 8, 26, .9)) padding-box,
    linear-gradient(120deg, #3d3cb4, #fa1e29, #9a28e7, #3d3cb4) border-box;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  font-family: 'Century Gothic', 'Segoe UI', Tahoma, sans-serif;
  transition: bottom .25s, background .2s;
}
.kr-hud-on .kr-jump { bottom: 116px; }
.kr-jump:hover { background: linear-gradient(rgba(36, 34, 92, .96), rgba(36, 34, 92, .96)) padding-box,
  linear-gradient(120deg, #3d3cb4, #fa1e29, #9a28e7, #3d3cb4) border-box; }
.kr-jump:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.kr-jump__eyebrow { font-weight: 700; font-size: 11px; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.kr-jump__title { font-weight: 700; font-size: 15.5px; line-height: 1.25; }
.kr-jump__arrow { position: absolute; right: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; fill: currentColor; }
.kr-jump[data-kind="back"] .kr-jump__arrow { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) { .kr-jump { transition: none; } }
.kr-hud__cc { font-weight: 700 !important; letter-spacing: .04em; }
@media (max-width: 560px) {
  .kr-hud [data-k="prev"], .kr-hud [data-k="next"], .kr-hud .kr-hud__where { display: none; }
  .kr-hud .kr-hud__time { min-width: 0; margin: 0 4px; }
  .kr-hud .kr-hud__bar { gap: 6px; }
}

.kr-hud .kr-hud__gear { padding: 5px 7px; }
.kr-hud .kr-hud__gear svg { width: 17px; height: 17px; }
.kr-hud .kr-hud__gear[aria-expanded="true"] { background: rgba(255, 255, 255, .22); }
.kr-hud__set {
  position: absolute; right: 20px; bottom: 84px; width: 330px; padding: 14px 16px 10px; box-sizing: border-box;
  background: rgba(10, 10, 20, .96); border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
}
.kr-hud--embed .kr-hud__set { bottom: 78px; right: 14px; }
.kr-hud__sethead { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.kr-hud__setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; border-top: 1px solid rgba(255, 255, 255, .08); }
.kr-hud__setrow:first-of-type { border-top: 0; }
.kr-hud__setrow > span:first-child { color: #fff; }
.kr-hud__speeds { display: flex; gap: 3px; }
.kr-hud .kr-hud__speeds button { padding: 4px 6px; font-size: 12px; font-variant-numeric: tabular-nums; }
.kr-hud .kr-hud__speeds button[aria-pressed="true"] { background: rgba(255, 255, 255, .92); color: #14142a; border-color: transparent; font-weight: 700; }
.kr-hud .kr-hud__switch { position: relative; width: 38px; height: 22px; padding: 0; border-radius: 11px; background: rgba(255, 255, 255, .18); transition: background .15s; }
.kr-hud .kr-hud__switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.kr-hud .kr-hud__switch[aria-checked="true"] { background: #5a58d8; border-color: #5a58d8; }
.kr-hud .kr-hud__switch[aria-checked="true"] i { transform: translateX(16px); }
.kr-hud .kr-hud__link { background: none; border-color: rgba(255, 255, 255, .24); }
@media (prefers-reduced-motion: reduce) { .kr-hud .kr-hud__switch, .kr-hud .kr-hud__switch i { transition: none; } }
.kr-hud__cc[aria-pressed="true"] { background: rgba(255, 255, 255, .92) !important; color: #14142a !important; }

.rec-win { position: absolute; overflow: hidden; border-radius: 10px; background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 80px -20px rgba(0, 0, 0, .55), 0 8px 24px rgba(0, 0, 0, .25); }
.rec-cam { position: absolute; inset: 0; transform-origin: 0 0; }
.rec-scr, .rec-menu, .rec-cur { position: absolute; inset: 0; }
.rec-scr { border-radius: 10px; overflow: hidden; transform-origin: 50% 50%; }
.rec-dim { position: absolute; inset: 0; z-index: 1; background: #14132e; pointer-events: none; }
.rec-menu { z-index: 3; }
.rec-cur { z-index: 4; }
.rec-scr svg, .rec-menu svg, svg.rec-cur { display: block; width: 100%; height: 100%; }
.rec-cur { pointer-events: none; overflow: visible; }
@keyframes dod-win-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }