/* Window picking follows the second recording: notes → files → settings,
   then one click confirms. No annotation or copy sequence. */
.capture-workflow {
  --cycle: 7.5s;
  container-type: size;
  overflow: hidden;
  padding: 0;
  background:
    radial-gradient(ellipse at 85% 85%, #a9bfdf, transparent 70%), #dce7f5;
}
.capture-desktop-label {
  position: absolute;
  inset: 10px 17px auto;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #617694;
  font-size: 8px;
}
.capture-desktop-label svg {
  width: 11px;
  height: 11px;
}
.capture-desktop-label > span:last-child {
  margin-left: auto;
}
.capture-app-window {
  position: absolute;
  inset: 13% 8% 23%;
  border-radius: 9px;
  overflow: hidden;
  background: #fcfdff;
  border: 1px solid #aebdd1;
  box-shadow: 0 10px 25px #233c5d24;
}
.capture-app-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 27px;
  padding: 0 12px;
  background: linear-gradient(#f8fafc, #e9eef5);
  border-bottom: 1px solid #dfe6ef;
  color: #788aa2;
  font-size: 8px;
}
.capture-app-title .traffic {
  gap: 4px;
}
.capture-app-title .traffic i {
  width: 6px;
  height: 6px;
}
.capture-app-title svg {
  width: 11px;
  height: 11px;
}
.capture-workflow .capture-paper {
  height: calc(100% - 27px);
  padding: 21px 27px;
  box-shadow: none;
}
.capture-workflow .paper-eyebrow {
  margin-bottom: 12px;
  font-size: 6px;
}
.capture-workflow .capture-paper h4 {
  font-size: clamp(19px, 4.3cqw, 27px);
  line-height: 1.45;
}
.capture-workflow .capture-paper > p {
  font-size: 9px;
  margin-top: 13px;
}
.capture-workflow .capture-paper img {
  width: 52%;
  right: -9%;
  bottom: -12%;
}
.capture-window-target,
.capture-workflow .capture-frame {
  position: absolute;
  inset: 13% 8% 23%;
  border-radius: 8px;
  pointer-events: none;
  box-shadow: 0 0 0 500px #101c3763;
}
.capture-window-target {
  border: 1px solid #f4f8ff;
  opacity: 0;
  animation: window-hover var(--cycle) linear infinite;
}
.capture-window-target > span {
  position: absolute;
  top: -16px;
  left: 0;
  background: #162139d9;
  color: white;
  font-size: 7px;
  border-radius: 3px;
  padding: 2px 6px;
}
.capture-workflow .capture-frame {
  border: 1.2px solid #2dcc96;
  border-radius: 0;
  opacity: 1;
  animation: window-confirm var(--cycle) linear infinite;
}
.capture-workflow .capture-frame i {
  width: 4px;
  height: 4px;
}
.capture-workflow .capture-frame i:nth-child(5) {
  top: 0;
  left: 50%;
}
.capture-workflow .capture-frame i:nth-child(6) {
  top: 50%;
  left: 0;
}
.capture-workflow .capture-frame i:nth-child(7) {
  top: 50%;
  left: 100%;
}
.capture-workflow .capture-frame i:nth-child(8) {
  top: 100%;
  left: 50%;
}
.capture-edit-tools {
  position: absolute;
  top: 80%;
  left: 50%;
  width: 90%;
  transform: translateX(-50%);
  filter: drop-shadow(0 4px 9px #15233d30);
  animation: window-confirm var(--cycle) linear infinite;
}
.capture-native-toolbar {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.capture-workflow .demo-cursor {
  inset: 0 auto auto 0;
  z-index: 3;
  color: #17253b;
  filter: drop-shadow(0 1px 1px white);
  animation: workflow-cursor var(--cycle) linear infinite;
}
.capture-workflow .demo-cursor svg {
  width: 17px;
  height: 20px;
  fill: #fcfdff;
}
.capture-click {
  position: absolute;
  left: 33%;
  top: 31%;
  width: 18px;
  height: 18px;
  border: 1px solid white;
  border-radius: 50%;
  opacity: 0;
  animation: confirm-click var(--cycle) linear infinite;
}
.capture-workflow .capture-key {
  bottom: 10px;
  height: 20px;
  color: #566f91;
}
.capture-step {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  padding: 4px 10px;
  border-radius: 5px;
  color: #536c8e;
  background: #f6f9fdf2;
}
.step-hover {
  opacity: 0;
  animation: caption-hover var(--cycle) linear infinite;
}
.step-confirm {
  opacity: 0;
  animation: caption-confirm var(--cycle) linear infinite;
}
.capture-playback {
  position: absolute;
  z-index: 4;
  right: 14px;
  bottom: 9px;
  padding: 5px 7px;
  font-size: 8px;
  color: #4e688a;
  border-radius: 5px;
  background: #f6f9fce8;
}
.capture-playback:hover {
  background: white;
}
.capture-workflow .capture-frame,
.capture-workflow .demo-cursor,
.capture-workflow .capture-window-target,
.capture-workflow .capture-edit-tools,
.capture-workflow .capture-step,
.capture-workflow .capture-click {
  animation-play-state: var(--zone-animation, running);
}
.capture-workflow.is-paused *,
.feature-panel:not(.is-active) .capture-workflow * {
  animation-play-state: paused;
}

/* Three independent hit regions; highlight jumps to the hovered window. */
.capture-workflow .capture-app-window,
.capture-workflow .target-notes {
  inset: 19% 42% 23% 6%;
}
.capture-workflow .capture-paper {
  padding: 18px 16px;
}
.capture-workflow .capture-paper h4 {
  font-size: clamp(17px, 3.8cqw, 23px);
}
.capture-workflow .capture-paper > p {
  font-size: 8px;
  line-height: 1.9;
}
.capture-workflow .capture-paper img {
  width: 72%;
  right: -13%;
  bottom: -33%;
}
.capture-small-window {
  position: absolute;
  border: 1px solid #aebdd1;
  border-radius: 8px;
  overflow: hidden;
  background: #fafcff;
  box-shadow: 0 7px 18px #233c5d20;
}
.capture-workflow .capture-files,
.capture-workflow .target-files {
  inset: 49% 6% 23% 63%;
}
.capture-workflow .capture-settings,
.capture-workflow .target-settings,
.capture-workflow .capture-frame {
  inset: 12% 6% 55% 63%;
}
.capture-file-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px 12px;
  font-size: 10px;
  color: #75a7df;
}
.capture-file-list b {
  color: #72839a;
  font-weight: 400;
  font-size: 8px;
  margin-left: 6px;
}
.capture-settings-body {
  padding: 12px;
  font-size: 8px;
  color: #70829c;
}
.settings-demo-title {
  display: block;
  margin-bottom: 10px;
  font-weight: 550;
}
.mini-appearance {
  display: flex;
  gap: 4px;
  background: #eaf0f8;
  border-radius: 5px;
  padding: 3px;
}
.mini-appearance span {
  flex: 1;
  padding: 4px;
  text-align: center;
}
.mini-appearance span:first-child {
  background: white;
  color: #3079d7;
  border-radius: 3px;
}
.mini-setting {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 13px;
  font-size: 7px;
}
.mini-setting i {
  position: relative;
  width: 18px;
  height: 11px;
  border-radius: 9px;
  background: #3388fa;
}
.mini-setting i:after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: white;
}
.capture-window-target {
  animation-name: hover-notes;
}
.capture-workflow .target-files {
  animation-name: hover-files;
}
.capture-workflow .target-settings {
  animation-name: hover-settings;
}
.capture-click {
  left: 78%;
  top: 29%;
}
.capture-workflow .capture-key {
  z-index: 2;
}
@keyframes hover-notes {
  0%,
  9% {
    opacity: 0;
  }
  10%,
  29.9% {
    opacity: 1;
  }
  30%,
  100% {
    opacity: 0;
  }
}
@keyframes hover-files {
  0%,
  29.9% {
    opacity: 0;
  }
  30%,
  49.9% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
@keyframes hover-settings {
  0%,
  49.9% {
    opacity: 0;
  }
  50%,
  67.9% {
    opacity: 1;
  }
  68%,
  100% {
    opacity: 0;
  }
}
@keyframes window-confirm {
  0%,
  67.9% {
    opacity: 0;
  }
  68%,
  91% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}
@keyframes workflow-cursor {
  0% {
    transform: translate(15cqw, 83cqh);
    opacity: 0;
  }
  7% {
    opacity: 1;
  }
  10%,
  24% {
    transform: translate(31cqw, 42cqh);
    opacity: 1;
  }
  30%,
  44% {
    transform: translate(78cqw, 65cqh);
  }
  50%,
  91% {
    transform: translate(78cqw, 29cqh);
    opacity: 1;
  }
  96%,
  100% {
    transform: translate(78cqw, 29cqh);
    opacity: 0;
  }
}
@keyframes confirm-click {
  0%,
  66% {
    opacity: 0;
    transform: scale(0.4);
  }
  68% {
    opacity: 1;
    transform: scale(0.4);
  }
  73%,
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}
@keyframes caption-hover {
  0%,
  67.9% {
    opacity: 1;
  }
  68%,
  100% {
    opacity: 0;
  }
}
@keyframes caption-confirm {
  0%,
  67.9% {
    opacity: 0;
  }
  68%,
  100% {
    opacity: 1;
  }
}
@media (max-width: 1100px) {
  .capture-app-title {
    padding-inline: 8px;
  }
  .capture-workflow .capture-paper {
    padding: 15px 12px;
  }
  .capture-file-list {
    gap: 9px;
    padding: 12px 9px;
  }
  .capture-settings-body {
    padding: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .capture-window-target,
  .capture-workflow .demo-cursor,
  .capture-click,
  .capture-playback,
  .step-hover {
    display: none;
  }
  .capture-workflow .capture-frame,
  .capture-edit-tools,
  .step-confirm {
    opacity: 1;
    clip-path: none;
  }
}