.ctxd {
  position: relative;
  --cursor-accent: #14b8a6;
  overflow: visible;
  display: flex;
  align-items: flex-start;
  margin-bottom: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.ctxd-scene {
  position: relative;
  display: flex;
  align-items: flex-start;
  animation: ctxd-scene 8s ease-in-out infinite;
}
@keyframes ctxd-scene {
  0%, 58%   { opacity: 1; visibility: visible; }
  63%, 80%  { opacity: 0; visibility: hidden; }
  83%, 100% { opacity: 1; visibility: visible; }
}

/* ── Cursor ── */
.ctxd-cur {
  position: absolute; top: 0; left: 0;
  pointer-events: none; z-index: 40;
  display: flex; flex-direction: column; align-items: flex-start;
  animation: ctxd-cur 8s cubic-bezier(.4,0,.2,1) infinite, ctxd-cur-visibility 8s linear infinite;
}
.ctxd-cur-label {
  background: var(--cursor-accent);
  color: #fff;
  font-size: 10.5px; font-weight: 500;
  padding: 3px 8px 4px;
  border-radius: 999px;
  margin-top: -6px; margin-left: 18px;
  white-space: nowrap;
  border: 1px solid #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .16);
  letter-spacing: .01px;
}
.ctxd-cur-label.is-message {
  max-width: 190px;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  padding: 4px 9px 5px;
}
.ctxd-cur svg {
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, .18));
}
.ctxd-cur path {
  fill: var(--cursor-accent);
}
@keyframes ctxd-cur-visibility {
  0% { opacity: 0; }
  2% { opacity: 1; }
  85% { opacity: 1; }
  87.5% { opacity: 0; }
  100% { opacity: 0; }
}
.ctxd.is-paused .ctxd-scene,
.ctxd.is-paused .ctxd-cur,
.ctxd.is-paused .ctxd-sub,
.ctxd.is-paused .ctxd-anim1,
.ctxd.is-paused .ctxd-anim2,
.ctxd.is-paused .ctxd-ann1,
.ctxd.is-paused .ctxd-ann2,
.ctxd.is-paused .ctxd-done {
  animation-play-state: paused !important;
}
@keyframes ctxd-cur {
  0%,  2%  { transform: translate(74px, 232px) scale(1); }
  7%       { transform: translate(80px, 271px) scale(1); }
  9%       { transform: translate(80px, 271px) scale(.76); }
  11%      { transform: translate(80px, 271px) scale(1); }
  24%      { transform: translate(292px, 139px) scale(1); }
  27%      { transform: translate(292px, 139px) scale(.76); }
  30%      { transform: translate(292px, 139px) scale(1); }
  50%      { transform: translate(292px, 139px) scale(1); }
  60%      { transform: translate(352px, -8px) scale(1); }
  62%      { transform: translate(352px, -8px) scale(.94); }
  64%      { transform: translate(352px, -8px) scale(1); }
  76%      { transform: translate(74px, 232px) scale(1); }
  100%     { transform: translate(74px, 232px) scale(1); }
}

/* ── Annotations ── */
.ctxd-ann {
  position: absolute;
  pointer-events: none;
  font-size: 11px; line-height: 1.55;
  color: rgba(100, 116, 139, .8);
  width: 130px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}
@keyframes ctxd-ann-in {
  0%   { opacity: 0; transform: translateY(5px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes ctxd-ann-out {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}
/* ann1: left, appears at start */
.ctxd-ann1 {
  right: calc(100% + 8px); top: 246px; text-align: right;
  text-align: right;
  animation: ctxd-fann1 8s ease-in-out infinite;
}
@keyframes ctxd-fann1 {
  0%, 2%    { opacity: 0; transform: translateY(5px); }
  6%, 22%   { opacity: 1; transform: translateY(0); }
  28%, 100% { opacity: 0; transform: translateY(-3px); }
}
/* ann2: right of submenu, appears on Convert to WebP */
.ctxd-ann2 {
  left: calc(100% + 14px); top: 152px;
  animation: ctxd-fann2 8s ease-in-out infinite;
}
@keyframes ctxd-fann2 {
  0%, 28%   { opacity: 0; transform: translateY(5px); }
  35%, 51%  { opacity: 1; transform: translateY(0); }
  60%, 100% { opacity: 0; transform: translateY(-3px); }
}
.ctxd-done {
  position: absolute;
  left: 211px;
  top: 196px;
  width: 216px;
  border-radius: 12px;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,248,252,.96));
  border: 1px solid rgba(145, 158, 171, .34);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .22), 0 1px 0 rgba(255,255,255,.75) inset;
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  transform: translateY(-5px);
  animation: ctxd-done 8s ease-in-out infinite;
}
.ctxd-done-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px;
  color: #0f172a;
  font-weight: 600;
  letter-spacing: .01em;
}
.ctxd-done-badge {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(20, 184, 166, .16);
  color: #0d9488;
  display: grid;
  place-items: center;
  flex: 0 0 16px;
}
.ctxd-done-row svg { width: 10px; height: 10px; stroke-width: 2.6; }
.ctxd-sep-done { height: 1px; margin: 7px 0 6px; background: rgba(15, 23, 42, .1); }
.ctxd-done-sub {
  font-size: 10px;
  line-height: 1.4;
  color: #64748b;
}
@keyframes ctxd-done {
  0%, 31%   { opacity: 0; transform: translateY(-5px); }
  37%, 52%  { opacity: 1; transform: translateY(0); }
  60%, 100% { opacity: 0; transform: translateY(-3px); }
}
.ctxd-menu {
  flex: 0 0 auto;
  border-radius: 11px;
  padding: 4px;
  background: rgba(246,246,249,.97);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 10px 36px rgba(0,0,0,.35);
}
.ctxd-main { width: 195px; }
.ctxd-sub  { width: 216px; margin-top: 25px; margin-left: 16px; }

/* ── Animations ── */
@keyframes ctxd-step1 {
  0%, 8%    { background: transparent; color: #1c1c1e; }
  10.5%, 52%  { background: #1475ff;     color: #fff; }
  62%, 100% { background: transparent; color: #1c1c1e; }
}
@keyframes ctxd-sub-in {
  0%, 16%   { opacity: 0; transform: translateX(-7px); }
  24%, 52%  { opacity: 1; transform: translateX(0); }
  62%, 100% { opacity: 0; transform: translateX(-7px); }
}
@keyframes ctxd-step2 {
  0%, 24%   { background: transparent; color: #1c1c1e; }
  26.5%, 52%  { background: #1475ff;     color: #fff; }
  62%, 100% { background: transparent; color: #1c1c1e; }
}

.ctxd-anim1 { animation: ctxd-step1 8s ease-in-out infinite; }
.ctxd-sub   { animation: ctxd-sub-in 8s cubic-bezier(.25,0,.25,1) infinite; }
.ctxd-anim2 { animation: ctxd-step2 8s ease-in-out infinite; }

.ctxd-item {
  display: flex; align-items: center; gap: 7px;
  padding: 0 8px; height: 20px;
  border-radius: 6px;
  font-size: 11.5px; font-weight: 400;
  color: #1c1c1e; white-space: nowrap; cursor: default;
  letter-spacing: -.05px;
}
.ctxd-chev { margin-left: auto; font-size: 10px; font-weight: 500; color: inherit; opacity: .5; }
.ctxd-ico  { width:14px; height:14px; flex:0 0 14px; display:flex; align-items:center; justify-content:center; color: inherit; opacity: .6; }
.ctxd-ico svg { width:11px; height:11px; stroke-width:1.8; }
.ctxd-sep  { height:1px; margin:3px 5px; background:rgba(0,0,0,.1); }
.ctxd-tags { display:flex; align-items:center; gap:5px; padding:3px 8px; height:22px; }
.ctxd-dot  { width:13px; height:13px; border-radius:50%; flex:0 0 13px; }
.ctxd-muted { color:#8e8e93; }

/* ── Responsive ── */

/* Аннотации видны полностью только при ≥720px (расчёт: scene 427 + 2×143 + отступы страницы) */
@media (max-width: 719px) {
  .ctxd-ann1, .ctxd-ann2 { display: none; }
}

/* Clip-зона + сдвиг курсора влево до 600px */
@media (max-width: 600px) {
  .ctxd-card { overflow: hidden; }
  /* is-message: nowrap + без max-width, курсор сдвинут влево (x≤240) */
  .ctxd-cur-label.is-message { white-space: nowrap; max-width: none; }
  @keyframes ctxd-cur {
    0%,  2%  { transform: translate(74px, 232px) scale(1); }
    7%       { transform: translate(80px, 271px) scale(1); }
    9%       { transform: translate(80px, 271px) scale(.76); }
    11%      { transform: translate(80px, 271px) scale(1); }
    24%      { transform: translate(240px, 139px) scale(1); }
    27%      { transform: translate(240px, 139px) scale(.76); }
    30%      { transform: translate(240px, 139px) scale(1); }
    50%      { transform: translate(240px, 139px) scale(1); }
    60%      { transform: translate(240px, -8px) scale(1); }
    62%      { transform: translate(240px, -8px) scale(.94); }
    64%      { transform: translate(240px, -8px) scale(1); }
    76%      { transform: translate(74px, 232px) scale(1); }
    100%     { transform: translate(74px, 232px) scale(1); }
  }
}

/* Масштабирование всего мокапа под ширину карточки.
   Карточка: screen − 48px (wrap) − 48px (card padding) = content.
   Сцена: 427px. Переполнение начинается при screen < 523px.
   transform-origin: center top — масштаб от центра,
   соответствует justify-content:center карточки.
   margin-bottom: −(height × (1−scale)) — убирает пустое пространство под мокапом. */

/* 480–523px: контент 384–427px → scale 0.92 */
@media (max-width: 523px) {
  .ctxd {
    transform: scale(0.92);
    transform-origin: center top;
    margin-bottom: -23px; /* 287 × 0.08 */
  }
}
/* 420–479px: контент 324–383px → scale 0.83 */
@media (max-width: 479px) {
  .ctxd {
    transform: scale(0.83);
    transform-origin: center top;
    margin-bottom: -49px; /* 287 × 0.17 */
  }
}
/* 376–419px: контент 280–323px → scale 0.72 */
@media (max-width: 419px) {
  .ctxd {
    transform: scale(0.72);
    transform-origin: center top;
    margin-bottom: -80px; /* 287 × 0.28 */
  }
}
/* ≤375px: контент ≤279px → scale 0.65 */
@media (max-width: 375px) {
  .ctxd {
    transform: scale(0.65);
    transform-origin: center top;
    margin-bottom: -100px; /* 287 × 0.35 */
  }
}