/* ================================================================ qy-compare-results-2 (2026-10-03): results-1.css plus the
   image-to-video page's start picture and a second card on /compare. results-1.css stays on the server, unused.
   qy-compare-results-1 (2026-10-03): /compare/{showdown},
   one prompt run once on every model of a tool, and its card on /compare. Loaded after qy-models/models-1.css (the #qmd
   tokens and shared parts) and qy-compare/compare-2.css; .qcr-* only, everything scoped to #qmd. The site keeps a static
   file for 7 days, so a changed stylesheet gets a new name (results-2.css), never the same one. */

/* ---------------------------------------------------------------- hero: the claim and the prompt */
#qmd .qcr-hero { align-items: center; }
#qmd .qcr-hero .qmd-facts li > span { display: inline; }
#qmd .qcr-prompt {
  position: relative; display: flex; flex-direction: column; gap: 16px; padding: 26px 26px 22px;
  border: 1px solid rgba(209, 254, 23, .28); border-radius: 22px;
  background: radial-gradient(120% 140% at 100% 0%, rgba(177, 77, 255, .16), transparent 55%), var(--md-card);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9);
}
#qmd .qcr-prompt-text { color: #fff; font-size: 16px; line-height: 1.7; }
/* the picture every image-to-video model was given, above its prompt */
#qmd .qcr-start { margin: 0 0 2px; overflow: hidden; border: 1px solid var(--md-line-2); border-radius: 16px; background: #000; }
#qmd .qcr-start img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
#qmd .qcr-start figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 14px; background: var(--md-card-2); }
#qmd .qcr-start figcaption small { color: var(--md-faint); font-size: 12px; }
#qmd .qcr-prompt-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 16px; border-top: 1px solid var(--md-line);
}
#qmd .qcr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#qmd .qcr-chips li {
  padding: 4px 10px; border: 1px solid var(--md-line-2); border-radius: 999px; color: var(--md-dim);
  font-size: 12px; font-weight: 600; line-height: 1.4;
}
#qmd .qcr-copy {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--md-line-2);
  border-radius: 999px; background: rgba(255, 255, 255, .03); color: #fff; font: inherit; font-size: 13px; font-weight: 700;
  line-height: 1; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
#qmd .qcr-copy:hover { border-color: rgba(209, 254, 23, .55); background: var(--md-lime-soft); }
#qmd .qcr-copy.is-done { border-color: rgba(209, 254, 23, .7); color: var(--md-lime); }
#qmd .qcr-copy svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- the results */
#qmd .qcr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
#qmd .qcr-card {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--md-line); border-radius: 20px;
  background: var(--md-card); transition: border-color .15s ease;
}
#qmd .qcr-card:hover { border-color: rgba(209, 254, 23, .35); }
/* the frame is 16:9 for every clip and the picture is never cropped: H3's 1280x732 and FLUX's 1280x704 sit in it with
   thin bars, as they were made */
#qmd .qcr-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
#qmd .qcr-play {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  background: #000; cursor: pointer;
}
#qmd .qcr-play img, #qmd .qcr-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#qmd .qcr-play-btn {
  position: absolute; left: 50%; top: 50%; display: flex; width: 58px; height: 58px; margin: -29px 0 0 -29px;
  align-items: center; justify-content: center; border-radius: 50%; background: var(--md-lime); color: var(--md-ink);
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .75); transition: transform .15s ease;
}
#qmd .qcr-play-btn svg { width: 24px; height: 24px; margin-left: 3px; }
#qmd .qcr-play:hover .qcr-play-btn, #qmd .qcr-play:focus-visible .qcr-play-btn { transform: scale(1.08); }
#qmd .qcr-play:focus-visible { outline: 2px solid var(--md-lime); outline-offset: -2px; }
#qmd .qcr-sound {
  position: absolute; top: 10px; left: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border-radius: 999px; background: rgba(10, 11, 13, .74); color: var(--md-lime); font-size: 11px; font-weight: 700;
  line-height: 1.2; letter-spacing: .02em; pointer-events: none; transition: opacity .2s ease;
}
#qmd .qcr-sound svg { width: 14px; height: 14px; }
#qmd .qcr-media.is-playing .qcr-sound { opacity: 0; }
#qmd .qcr-body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 16px 18px 18px; }
#qmd .qcr-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
#qmd .qcr-name { color: #fff; font-family: var(--md-display); font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
#qmd .qcr-maker { color: var(--md-faint); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
#qmd .qcr-facts { display: flex; flex-wrap: wrap; gap: 6px; }
#qmd .qcr-facts li {
  padding: 3px 9px; border: 1px solid var(--md-line); border-radius: 999px; color: var(--md-dim); font-size: 12px;
  font-weight: 600; line-height: 1.4;
}
#qmd .qcr-price { color: var(--md-dim); font-size: 13px; }
#qmd .qcr-price b {
  margin-right: 3px; color: #fff; font-family: var(--md-display); font-size: 22px; font-weight: 700; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
#qmd .qcr-go { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 4px; }
#qmd .qcr-create { width: 100%; min-height: 46px; padding: 0 18px; font-size: 14px; }
#qmd .qcr-more { align-self: center; color: var(--md-faint); font-size: 12px; font-weight: 600; }
#qmd .qcr-more:hover { color: var(--md-lime); }

/* ---------------------------------------------------------------- /compare: this page's card above the comparisons */
#qmd .qcr-feature-sec { padding-top: 48px; }
#qmd .qcr-feature {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); overflow: hidden;
  border: 1px solid rgba(209, 254, 23, .3); border-radius: 22px;
  background: radial-gradient(120% 140% at 100% 0%, rgba(177, 77, 255, .18), transparent 55%), var(--md-card);
  transition: transform .15s ease, border-color .15s ease;
}
#qmd .qcr-feature:hover { transform: translateY(-2px); border-color: rgba(209, 254, 23, .6); }
#qmd .qcr-feature + .qcr-feature { margin-top: 16px; }
#qmd .qcr-feature-pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; background: #000; }
#qmd .qcr-feature-pics img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
#qmd .qcr-feature-body { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 28px 30px; }
#qmd .qcr-feature-h {
  color: #fff; font-family: var(--md-display); font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em;
}

/* ---------------------------------------------------------------- small screens */
@media (max-width: 1024px) {
  #qmd .qcr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  #qmd .qcr-feature { grid-template-columns: 1fr; }
  #qmd .qcr-feature-body { padding: 22px 20px 24px; }
}
@media (max-width: 600px) {
  #qmd .qcr-grid { grid-template-columns: 1fr; }
  #qmd .qcr-prompt { padding: 20px 18px 18px; }
  #qmd .qcr-prompt-text { font-size: 15px; }
  #qmd .qcr-copy { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  #qmd .qcr-card, #qmd .qcr-play-btn, #qmd .qcr-sound, #qmd .qcr-feature, #qmd .qcr-copy { transition: none; }
}