.kc-status {
  display: grid;
  place-items: center;
  width: clamp(12px, 2.6cqi, 18px);
  height: clamp(10px, 2.3cqi, 16px);
  border-radius: 4px;
  background: rgba(10, 18, 28, 0.14);
  flex: none;
}

.kc-mark {
  display: block;
  width: clamp(8px, 1.9cqi, 13px);
  height: clamp(8px, 1.9cqi, 13px);
}

html.kc-embed .kc-pop {
  transform-origin: top right;
  transform: scale(min(1, calc(100cqi / 1076px)));
}

.kc-pop {
  position: absolute;
  z-index: 10;
  top: 34px;
  right: 12px;
  width: 372px;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 22px;
  background: #f2f2f7;
  color: #1c1c1e;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  font-size: 13px;
  line-height: 1.2;
  zoom: 0.75;
  -webkit-font-smoothing: antialiased;
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.18),
    0 18px 50px rgba(20, 24, 40, 0.28),
    0 2px 8px rgba(20, 24, 40, 0.12);
}

.kc-pop::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 146px;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: #f2f2f7;
  transform: rotate(45deg);
  box-shadow: -0.5px -0.5px 0 rgba(0, 0, 0, 0.12);
}

.kc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 10px;
}

.kc-head .kc-mark {
  width: 16px;
  height: 16px;
}

.kc-head strong {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.kc-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #6e6e73;
}

.kc-tools svg {
  display: block;
}

.kc-label {
  margin: 2px 6px 6px;
  color: #6e6e73;
  font-size: 12px;
  font-weight: 500;
}

.kc-add {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 6px;
  border-radius: 12px;
  background: #fff;
}

.kc-field {
  flex: 1;
  min-width: 0;
  height: 32px;
  box-sizing: border-box;
  padding: 0 10px;
  border-radius: 8px;
  background: #e5e5ea;
  color: #8e8e93;
  font-size: 13px;
  line-height: 32px;
}

.kc-save {
  flex: none;
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  background: #e07a5f;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 32px;
}

.kc-import {
  display: inline-block;
  margin: 0 0 12px 2px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #e4e4e9;
  color: #3a3a3c;
  font-size: 12.5px;
}

.kc-search {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin: 0 0 8px;
  padding: 0 10px;
  border-radius: 10px;
  background: #e4e4e9;
  color: #8e8e93;
  font-size: 13px;
}

.kc-search svg {
  flex: none;
}

.kc-list {
  margin: 0;
  padding: 2px 0;
  list-style: none;
  border-radius: 12px;
  background: #fff;
}

.kc-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}

.kc-list li + li {
  box-shadow: inset 0 1px #ececf1;
}

.kc-list .logo {
  display: block;
  width: 28px;
  height: 28px;
  flex: none;
  object-fit: contain;
}

.kc-list .meta {
  min-width: 0;
  flex: 1;
}

.kc-list .name {
  display: block;
  color: #1c1c1e;
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.kc-list .used {
  display: block;
  margin-top: 2px;
  color: #8e8e93;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.kc-list .acts {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #8e8e93;
}

.kc-list .acts svg {
  display: block;
}

.dock-item.kc-dock {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dock-item.kc-dock img {
  width: 86%;
  height: 86%;
}

.kc-list li.apify .used {
  position: relative;
}

.kc-list li.apify .used-b {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  color: #1c1c1e;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.kc-auth {
  position: absolute;
  z-index: 15;
  left: 50%;
  top: 50%;
  width: 258px;
  box-sizing: border-box;
  padding: 19px 12px 15px;
  border-radius: 12px;
  --auth-scale: 0.88;
  background: #5e5b58;
  color: #fff;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.16),
    0 24px 70px rgba(0, 0, 0, 0.55);
}

.kc-auth .lock {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
}

.kc-auth .title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 16px;
}

.kc-auth .lead,
.kc-auth .ask {
  margin: 0;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: -0.006em;
  line-height: 14px;
}

.kc-auth .lead { margin-top: 9px; }

.kc-auth .ask { margin-top: 16px; }

.kc-auth .field {
  position: relative;
  display: flex;
  align-items: center;
  height: 26px;
  margin: 9px 0 0;
  padding: 0 8px;
  border-radius: 5px;
  background: #736f6c;
  box-shadow: 0 0 0 3.5px #296390;
  text-align: left;
}

.kc-auth .caret {
  width: 2px;
  height: 15px;
  margin-right: 1px;
  border-radius: 1px;
  background: #156ef8;
  flex: none;
}

.kc-auth .placeholder {
  color: #b0adaa;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.006em;
}

.kc-auth .bullets {
  position: absolute;
  left: 8px;
  top: 0;
  display: flex;
  align-items: center;
  height: 26px;
  color: #fff;
  font-size: 13px;
  line-height: 26px;
}

.kc-auth .bullets i {
  display: block;
  width: 8px;
  flex: none;
  font-style: normal;
  text-align: center;
  opacity: 0;
}

.kc-auth .actions {
  display: flex;
  gap: 6px;
  margin: 18px 0 0;
}

.kc-auth .actions span {
  flex: 1;
  height: 28px;
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.006em;
  line-height: 28px;
}

.kc-auth .cancel { background: #8d8a87; }

.kc-auth .ok { background: linear-gradient(#2174dc, #1c62c4); }

.kc-cursor {
  position: absolute;
  z-index: 30;
  left: 0;
  top: 0;
  width: 17px;
  height: 23px;
  pointer-events: none;
  transform-origin: 4px 4px;
  opacity: 0;
  user-select: none;
  -webkit-user-drag: none;
}

.screen.kc-play .kc-cursor {
  opacity: 1;
  animation: kc-cursor 7.85s linear infinite;
  will-change: transform;
}

.screen.kc-play .kc-auth {
  animation: kc-dialog 7.85s linear infinite;
  will-change: transform, opacity;
}

.screen.kc-play .kc-auth .placeholder { animation: kc-ph 7.85s linear infinite; }
.screen.kc-play .kc-auth .caret { animation: kc-caret 7.85s linear infinite; }
.screen.kc-play .kc-auth .bullets i { animation: 7.85s linear infinite; }
.screen.kc-play .kc-auth .bullets i:nth-child(1) { animation-name: kc-b1; }
.screen.kc-play .kc-auth .bullets i:nth-child(2) { animation-name: kc-b2; }
.screen.kc-play .kc-auth .bullets i:nth-child(3) { animation-name: kc-b3; }
.screen.kc-play .kc-auth .bullets i:nth-child(4) { animation-name: kc-b4; }
.screen.kc-play .kc-auth .bullets i:nth-child(5) { animation-name: kc-b5; }
.screen.kc-play .kc-auth .bullets i:nth-child(6) { animation-name: kc-b6; }
.screen.kc-play .kc-auth .bullets i:nth-child(7) { animation-name: kc-b7; }
.screen.kc-play .kc-auth .bullets i:nth-child(8) { animation-name: kc-b8; }
.screen.kc-play .kc-list li.apify .used-a { animation: kc-used-a 7.85s linear infinite; }
.screen.kc-play .kc-list li.apify .used-b { animation: kc-used-b 7.85s linear infinite; }

@keyframes kc-cursor {
  0% { transform: translate(var(--o0x), var(--o0y)) scale(1); animation-timing-function: linear; }
  1.274% { transform: translate(var(--o1x), var(--o1y)) scale(1); animation-timing-function: linear; }
  2.548% { transform: translate(var(--o2x), var(--o2y)) scale(1); animation-timing-function: linear; }
  3.822% { transform: translate(var(--o3x), var(--o3y)) scale(1); animation-timing-function: linear; }
  5.096% { transform: translate(var(--o4x), var(--o4y)) scale(1); animation-timing-function: linear; }
  6.369% { transform: translate(var(--o5x), var(--o5y)) scale(1); animation-timing-function: linear; }
  7.643% { transform: translate(var(--o6x), var(--o6y)) scale(1); animation-timing-function: linear; }
  8.917% { transform: translate(var(--o7x), var(--o7y)) scale(1); animation-timing-function: linear; }
  10.191% { transform: translate(var(--o8x), var(--o8y)) scale(1); animation-timing-function: linear; }
  11.465% { transform: translate(var(--o9x), var(--o9y)) scale(1); animation-timing-function: linear; }
  12.739% { transform: translate(var(--o10x), var(--o10y)) scale(1); animation-timing-function: linear; }
  14.013% { transform: translate(var(--o11x), var(--o11y)) scale(1); animation-timing-function: linear; }
  15.287% { transform: translate(var(--o12x), var(--o12y)) scale(1); animation-timing-function: linear; }
  15.541% { transform: translate(var(--ceye-x), var(--ceye-y)) scale(1); }
  15.796%, 17.580% { transform: translate(var(--ceye-x), var(--ceye-y)) scale(0.92); }
  17.834% { transform: translate(var(--m0x), var(--m0y)) scale(1); }
  42.675% { transform: translate(var(--m0x), var(--m0y)) scale(1); animation-timing-function: linear; }
  43.949% { transform: translate(var(--m1x), var(--m1y)) scale(1); animation-timing-function: linear; }
  45.223% { transform: translate(var(--m2x), var(--m2y)) scale(1); animation-timing-function: linear; }
  46.497% { transform: translate(var(--m3x), var(--m3y)) scale(1); animation-timing-function: linear; }
  47.771% { transform: translate(var(--m4x), var(--m4y)) scale(1); animation-timing-function: linear; }
  49.045% { transform: translate(var(--m5x), var(--m5y)) scale(1); animation-timing-function: linear; }
  50.318% { transform: translate(var(--m6x), var(--m6y)) scale(1); animation-timing-function: linear; }
  51.592% { transform: translate(var(--m7x), var(--m7y)) scale(1); animation-timing-function: linear; }
  52.866% { transform: translate(var(--m8x), var(--m8y)) scale(1); animation-timing-function: linear; }
  54.140% { transform: translate(var(--m9x), var(--m9y)) scale(1); animation-timing-function: linear; }
  55.414% { transform: translate(var(--m10x), var(--m10y)) scale(1); animation-timing-function: linear; }
  56.688% { transform: translate(var(--m11x), var(--m11y)) scale(1); animation-timing-function: linear; }
  57.962%, 58.217% { transform: translate(var(--m12x), var(--m12y)) scale(1); }
  58.726%, 60% { transform: translate(var(--m12x), var(--m12y)) scale(0.92); }
  60.764% { transform: translate(var(--m12x), var(--m12y)) scale(1); }
  85.350% { transform: translate(var(--h0x), var(--h0y)) scale(1); animation-timing-function: linear; }
  86.571% { transform: translate(var(--h1x), var(--h1y)) scale(1); animation-timing-function: linear; }
  87.792% { transform: translate(var(--h2x), var(--h2y)) scale(1); animation-timing-function: linear; }
  89.013% { transform: translate(var(--h3x), var(--h3y)) scale(1); animation-timing-function: linear; }
  90.234% { transform: translate(var(--h4x), var(--h4y)) scale(1); animation-timing-function: linear; }
  91.454% { transform: translate(var(--h5x), var(--h5y)) scale(1); animation-timing-function: linear; }
  92.675% { transform: translate(var(--h6x), var(--h6y)) scale(1); animation-timing-function: linear; }
  93.896% { transform: translate(var(--h7x), var(--h7y)) scale(1); animation-timing-function: linear; }
  95.117% { transform: translate(var(--h8x), var(--h8y)) scale(1); animation-timing-function: linear; }
  96.338% { transform: translate(var(--h9x), var(--h9y)) scale(1); animation-timing-function: linear; }
  97.558% { transform: translate(var(--h10x), var(--h10y)) scale(1); animation-timing-function: linear; }
  98.779% { transform: translate(var(--h11x), var(--h11y)) scale(1); animation-timing-function: linear; }
  100% { transform: translate(var(--h12x), var(--h12y)) scale(1); }
}

@keyframes kc-dialog {
  0%, 17.834% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(calc(var(--auth-scale) * 0.96));
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  22.930%, 61.783% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(var(--auth-scale));
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  68.153%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(calc(var(--auth-scale) * 0.96));
  }
}

@keyframes kc-ph {
  0%, 22.930% { opacity: 1; }
  25.159%, 100% { opacity: 0; }
}

@keyframes kc-caret {
  0%, 22.929% { transform: translateX(0); }
  22.930% { transform: translateX(8px); }
  25.159% { transform: translateX(16px); }
  27.389% { transform: translateX(24px); }
  29.618% { transform: translateX(32px); }
  31.847% { transform: translateX(40px); }
  34.076% { transform: translateX(48px); }
  36.306% { transform: translateX(56px); }
  38.535%, 100% { transform: translateX(64px); }
}

@keyframes kc-b1 { 0%, 22.929% { opacity: 0; } 22.930%, 100% { opacity: 1; } }
@keyframes kc-b2 { 0%, 25.158% { opacity: 0; } 25.159%, 100% { opacity: 1; } }
@keyframes kc-b3 { 0%, 27.388% { opacity: 0; } 27.389%, 100% { opacity: 1; } }
@keyframes kc-b4 { 0%, 29.617% { opacity: 0; } 29.618%, 100% { opacity: 1; } }
@keyframes kc-b5 { 0%, 31.846% { opacity: 0; } 31.847%, 100% { opacity: 1; } }
@keyframes kc-b6 { 0%, 34.075% { opacity: 0; } 34.076%, 100% { opacity: 1; } }
@keyframes kc-b7 { 0%, 36.305% { opacity: 0; } 36.306%, 100% { opacity: 1; } }
@keyframes kc-b8 { 0%, 38.534% { opacity: 0; } 38.535%, 100% { opacity: 1; } }

@keyframes kc-used-a {
  0%, 68.153% { opacity: 1; }
  76.433%, 85.350% { opacity: 0; }
  93.631%, 100% { opacity: 1; }
}

@keyframes kc-used-b {
  0%, 68.153% { opacity: 0; }
  76.433%, 85.350% { opacity: 1; }
  93.631%, 100% { opacity: 0; }
}

@media (max-width: 800px) {
  html:not(.kc-embed) .mac-stage .display-shell {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
  }

  html:not(.kc-embed) .mac-stage .screen {
    aspect-ratio: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    border-radius: 0;
    background: transparent;
  }

  html:not(.kc-embed) .mac-stage .wallpaper,
  html:not(.kc-embed) .mac-stage .menu-bar,
  html:not(.kc-embed) .mac-stage .notch,
  html:not(.kc-embed) .mac-stage .dock,
  html:not(.kc-embed) .mac-hinge,
  html:not(.kc-embed) .mac-base {
    display: none;
  }

  html:not(.kc-embed) .frame {
    min-width: 0;
  }

  html:not(.kc-embed) .kc-pop {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-width: 372px;
    margin: 0 auto;
  }

  html:not(.kc-embed) .kc-pop::before {
    display: none;
  }

  html:not(.kc-embed) .kc-cursor,
  html:not(.kc-embed) .kc-auth {
    display: none;
  }

  html:not(.kc-embed) .screen.kc-play .kc-list li.apify .used-a,
  html:not(.kc-embed) .screen.kc-play .kc-list li.apify .used-b {
    animation: none;
  }

  html:not(.kc-embed) .kc-list li.apify .used-a { opacity: 1; }
  html:not(.kc-embed) .kc-list li.apify .used-b { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .kc-cursor,
  .kc-auth {
    display: none;
  }

  .screen.kc-play .kc-list li.apify .used-a,
  .screen.kc-play .kc-list li.apify .used-b {
    animation: none;
  }
}
