/* Public DOM renderer: 紫卡 + 答卡 only. */

.free-card,
.free-card * { box-sizing: border-box; }
.free-card * { margin: 0; padding: 0; }

.free-card {
  width: 390px;
  min-height: 0;
  height: auto;
  flex: 0 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  color: #26272d;
  font-synthesis: none;
}
.free-card-panel { width: 100%; }
.free-card-body { position: relative; padding: 0; overflow: visible; }
.free-card-body::before { display: none; }
.free-card-body a { color: inherit; text-decoration-thickness: .06em; text-underline-offset: .14em; }
.free-card-body pre { max-width: 100%; margin: 0 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.free-card-body table { width: 100%; margin: 0 0 12px; border-collapse: collapse; }
.free-card-body th,
.free-card-body td { padding: 5px 6px; border: 1px solid rgba(38, 37, 35, .16); text-align: left; vertical-align: top; }

.free-inline-image { margin: 6px 0 12px; font-size: 0; line-height: 0; }
.free-inline-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(38, 37, 35, .12), 0 10px 22px rgba(38, 37, 35, .14);
}

/* Purple — mirrors legacy template F. */
.free-card--purple {
  padding: 22px 22px 8px;
  overflow: visible;
  background: linear-gradient(135deg, #1a0034 0%, #3a005c 48%, #5a008e 100%);
  box-shadow: 0 1px 14px rgba(0, 0, 0, .2);
}
.free-card--purple .free-card-panel {
  padding: 14px 16px;
  background: #fff;
  border-radius: 12px;
}
.free-card--purple .free-card-body h1,
.free-card--purple .free-card-body h2,
.free-card--purple .free-card-body h3,
.free-card-measure--purple .free-card-body h1,
.free-card-measure--purple .free-card-body h2,
.free-card-measure--purple .free-card-body h3 {
  margin: 0 0 14px;
  padding: 0;
  color: #26272d;
  background: none !important;
  font-family: "Heiti SC", "Heiti TC", "PingFang SC", sans-serif;
  font-size: 20.3px;
  font-weight: 750;
  line-height: 1.45;
  letter-spacing: 0;
  -webkit-text-fill-color: currentColor !important;
}
.free-card--purple .free-card-body h1::after,
.free-card--purple .free-card-body h2::after,
.free-card--purple .free-card-body h3::after { display: none; }
.free-card--purple .free-card-body p,
.free-card--purple .free-card-body li,
.free-card--purple .free-card-body blockquote p,
.free-card-measure--purple .free-card-body p,
.free-card-measure--purple .free-card-body li,
.free-card-measure--purple .free-card-body blockquote p {
  margin: 0 0 12px;
  color: #2f3036;
  font-family: "Heiti SC", "Heiti TC", "PingFang SC", sans-serif;
  font-size: 13.3px;
  font-weight: 450;
  line-height: 1.58;
}
.free-card--purple .free-card-body strong,
.free-card-measure--purple .free-card-body strong { color: #22242a; font-weight: 700; }
.free-card--purple .free-card-body em,
.free-card-measure--purple .free-card-body em { color: #2f3036; font-style: normal; }
.free-card--purple .free-card-body ul,
.free-card--purple .free-card-body ol,
.free-card-measure--purple .free-card-body ul,
.free-card-measure--purple .free-card-body ol { margin: 0 0 10px; padding-left: 20px; }
.free-card--purple .free-card-body li,
.free-card-measure--purple .free-card-body li { margin-bottom: 6px; }
.free-card--purple .free-card-body li::marker { color: #4a4b52; font-weight: 700; }
.free-card--purple .free-card-body blockquote,
.free-card-measure--purple .free-card-body blockquote {
  margin: 0 0 12px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.free-card--purple .free-card-body blockquote p,
.free-card-measure--purple .free-card-body blockquote p { margin-bottom: 0; }
.free-card--purple .free-card-body code,
.free-card-measure--purple .free-card-body code {
  padding: 1px 5px;
  color: #4f5160;
  background: #dfe1e9;
  border-radius: 3px;
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 12px;
}
.free-card--purple .free-card-body hr,
.free-card-measure--purple .free-card-body hr {
  height: 1px;
  margin: 12px 0;
  background: #d3d4dc;
  border: 0;
}
.free-card--purple .free-card-watermark {
  margin-top: 6px;
  color: rgba(255, 255, 255, .95);
  font-family: "Heiti SC", "Heiti TC", "PingFang SC", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: .3px;
  text-align: center;
}
.free-card--purple.is-fixed-ratio { height: 520px; }
.free-card--purple.is-fixed-ratio .free-card-panel { flex: 1; padding-bottom: 6px; overflow: hidden; }

/* Answer — mirrors legacy template I / card-y. */
.free-card--answer {
  --free-answer-scale: 1;
  --free-answer-ink: #262523;
  --free-answer-panel: #fffaf2;
  --free-answer-accent: #c87358;
  --free-answer-dark: #9f4f39;
  --free-answer-soft: #ead7ca;
  --free-answer-title-start: rgba(200, 115, 88, .18);
  --free-answer-title-end: rgba(234, 215, 202, .42);
  --free-answer-title-ring: rgba(159, 79, 57, .12);
  padding: calc(18px * var(--free-answer-scale)) calc(18px * var(--free-answer-scale)) calc(7px * var(--free-answer-scale));
  overflow: hidden;
  background: var(--free-answer-accent);
  box-shadow: 0 1px 14px rgba(38, 37, 35, .18);
}
.free-card--answer .free-card-panel {
  position: relative;
  z-index: 1;
  padding: calc(22px * var(--free-answer-scale)) calc(17px * var(--free-answer-scale)) calc(17px * var(--free-answer-scale));
  background: var(--free-answer-panel);
  border: calc(1px * var(--free-answer-scale)) solid rgba(38, 37, 35, .1);
  border-radius: calc(13px * var(--free-answer-scale));
  box-shadow:
    0 0 0 calc(.75px * var(--free-answer-scale)) rgba(255, 250, 242, .7),
    0 calc(10px * var(--free-answer-scale)) calc(24px * var(--free-answer-scale)) rgba(38, 37, 35, .1);
}
.free-card--answer .free-card-body,
.free-card-measure--answer .free-card-body { counter-reset: free-answer-section; }
.free-card--answer .free-card-body h1,
.free-card-measure--answer .free-card-body h1 {
  margin: 0 0 calc(15px * var(--free-answer-scale, 1));
  padding: 0 0 calc(12px * var(--free-answer-scale, 1));
  color: #111;
  background: none !important;
  border-bottom: calc(1px * var(--free-answer-scale, 1)) solid rgba(38, 37, 35, .16);
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: calc(26px * var(--free-answer-scale, 1));
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: 0;
  -webkit-text-fill-color: #111 !important;
}
.free-card--answer .free-card-body h1::after,
.free-card--answer .free-card-body h3::after { display: none; }
.free-card--answer .free-card-body h2,
.free-card-measure--answer .free-card-body h2 {
  position: relative;
  display: block;
  margin: calc(16px * var(--free-answer-scale, 1)) 0 calc(9px * var(--free-answer-scale, 1));
  padding: calc(7px * var(--free-answer-scale, 1)) calc(10px * var(--free-answer-scale, 1)) calc(7px * var(--free-answer-scale, 1)) calc(14px * var(--free-answer-scale, 1));
  overflow: hidden;
  color: var(--free-answer-ink, #262523);
  background: linear-gradient(90deg, var(--free-answer-title-start, rgba(200, 115, 88, .18)), var(--free-answer-title-end, rgba(234, 215, 202, .42))) !important;
  border: 0;
  border-radius: calc(8px * var(--free-answer-scale, 1));
  box-shadow:
    inset calc(3px * var(--free-answer-scale, 1)) 0 0 var(--free-answer-accent, #c87358),
    inset 0 0 0 calc(1px * var(--free-answer-scale, 1)) var(--free-answer-title-ring, rgba(159, 79, 57, .12));
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: calc(18px * var(--free-answer-scale, 1));
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: 0;
  -webkit-text-fill-color: currentColor !important;
}
.free-card--answer .free-card-body h2::before,
.free-card--answer .free-card-body h2::after { display: none; }
.free-card--answer .free-card-body h3,
.free-card-measure--answer .free-card-body h3 {
  display: inline-block;
  margin: calc(10px * var(--free-answer-scale, 1)) 0 calc(7px * var(--free-answer-scale, 1));
  padding: calc(4px * var(--free-answer-scale, 1)) calc(8px * var(--free-answer-scale, 1));
  color: #fff;
  background: var(--free-answer-accent, #c87358) !important;
  border-radius: calc(4px * var(--free-answer-scale, 1));
  font-family: "Heiti SC", "Heiti TC", "PingFang SC", sans-serif;
  font-size: calc(12px * var(--free-answer-scale, 1));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .02em;
  -webkit-text-fill-color: #fff !important;
}
.free-card--answer .free-card-body p,
.free-card--answer .free-card-body li,
.free-card--answer .free-card-body blockquote p,
.free-card-measure--answer .free-card-body p,
.free-card-measure--answer .free-card-body li,
.free-card-measure--answer .free-card-body blockquote p {
  margin: 0 0 calc(11px * var(--free-answer-scale, 1));
  color: #252321;
  font-family: "Heiti SC", "Heiti TC", "PingFang SC", sans-serif;
  font-size: calc(13.4px * var(--free-answer-scale, 1));
  font-weight: 450;
  line-height: 1.62;
}
.free-card--answer .free-card-body strong,
.free-card-measure--answer .free-card-body strong { color: var(--free-answer-dark, #9f4f39); font-weight: 800; }
.free-card--answer .free-card-body em,
.free-card-measure--answer .free-card-body em { color: #252321; font-style: normal; }
.free-card--answer .free-card-body ul,
.free-card--answer .free-card-body ol,
.free-card-measure--answer .free-card-body ul,
.free-card-measure--answer .free-card-body ol {
  margin: 0 0 calc(11px * var(--free-answer-scale, 1));
  padding-left: calc(20px * var(--free-answer-scale, 1));
}
.free-card--answer .free-card-body li,
.free-card-measure--answer .free-card-body li { margin-bottom: calc(5px * var(--free-answer-scale, 1)); }
.free-card--answer .free-card-body li::marker { color: var(--free-answer-accent); font-weight: 800; }
.free-card--answer .free-card-body blockquote,
.free-card-measure--answer .free-card-body blockquote {
  margin: 0 0 calc(12px * var(--free-answer-scale, 1));
  padding: calc(9px * var(--free-answer-scale, 1)) calc(11px * var(--free-answer-scale, 1));
  background: var(--free-answer-soft, #ead7ca);
  border: 0;
  border-left: calc(4px * var(--free-answer-scale, 1)) solid var(--free-answer-accent, #c87358);
  border-radius: 0 calc(5px * var(--free-answer-scale, 1)) calc(5px * var(--free-answer-scale, 1)) 0;
}
.free-card--answer .free-card-body blockquote p,
.free-card-measure--answer .free-card-body blockquote p { margin-bottom: 0; color: #292521; }
.free-card--answer .free-card-body code,
.free-card-measure--answer .free-card-body code {
  padding: calc(1px * var(--free-answer-scale, 1)) calc(5px * var(--free-answer-scale, 1));
  color: #f6d4c4;
  background: var(--free-answer-ink, #262523);
  border-radius: calc(3px * var(--free-answer-scale, 1));
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: calc(12px * var(--free-answer-scale, 1));
}
.free-card--answer .free-card-body hr,
.free-card-measure--answer .free-card-body hr {
  height: calc(1px * var(--free-answer-scale, 1));
  margin: calc(14px * var(--free-answer-scale, 1)) 0;
  background: rgba(38, 37, 35, .18);
  border: 0;
}
.free-card--answer .free-inline-image,
.free-card-measure--answer .free-inline-image {
  margin: calc(8px * var(--free-answer-scale, 1)) 0 calc(12px * var(--free-answer-scale, 1));
}
.free-card--answer .free-inline-image img {
  border-radius: calc(8px * var(--free-answer-scale));
  box-shadow:
    0 calc(1px * var(--free-answer-scale)) calc(2px * var(--free-answer-scale)) rgba(38, 37, 35, .12),
    0 calc(10px * var(--free-answer-scale)) calc(22px * var(--free-answer-scale)) rgba(38, 37, 35, .14);
}
.free-card--answer .free-card-watermark {
  margin-top: calc(8px * var(--free-answer-scale));
  color: rgba(255, 250, 242, .84);
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: calc(10px * var(--free-answer-scale));
  font-weight: 700;
  line-height: normal;
  letter-spacing: .02em;
  text-align: center;
}
.free-card--answer.is-fixed-ratio { height: 520px; }
.free-card--answer.is-fixed-ratio .free-card-panel { flex: 1; overflow: hidden; }

/* Hidden measurement node uses the legacy 314px content width. */
.free-card-measure {
  position: fixed;
  top: 0;
  left: -100000px;
  width: 314px;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
}
.free-card-measure,
.free-card-measure * { box-sizing: border-box; margin: 0; padding: 0; }
.free-card-measure--answer {
  --free-answer-scale: 1;
  --free-answer-ink: #262523;
  --free-answer-accent: #c87358;
  --free-answer-dark: #9f4f39;
  --free-answer-soft: #ead7ca;
  --free-answer-title-start: rgba(200, 115, 88, .18);
  --free-answer-title-end: rgba(234, 215, 202, .42);
  --free-answer-title-ring: rgba(159, 79, 57, .12);
}

/* Existing preview carousel integration. */
.free-preview-page {
  overflow: visible;
  background: transparent !important;
  box-shadow: none !important;
}
.free-card-scale-frame {
  position: relative;
  width: 100%;
  min-height: 1px;
  overflow: visible;
}
.free-card-scale-frame > .free-card {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  will-change: transform;
}

/* Local high-resolution export stage. */
.free-card-export-stage {
  position: fixed;
  top: 0;
  left: -100000px;
  z-index: -1;
  pointer-events: none;
}
.free-card--purple.is-export-card {
  width: 1080px;
  min-height: 0;
  height: auto;
  padding: 61px 61px 22px;
  border-radius: 0 !important;
  box-shadow: none;
}
.free-card--purple.is-export-card .free-card-panel { padding: 39px 44px; border-radius: 14px; }
.free-card--purple.is-export-card .free-card-body h1,
.free-card--purple.is-export-card .free-card-body h2,
.free-card--purple.is-export-card .free-card-body h3 {
  margin: 0 0 39px;
  font-size: 56px;
  line-height: 1.45;
}
.free-card--purple.is-export-card .free-card-body p,
.free-card--purple.is-export-card .free-card-body li,
.free-card--purple.is-export-card .free-card-body blockquote p {
  margin: 0 0 33px;
  font-size: 37px;
  line-height: 1.58;
}
.free-card--purple.is-export-card .free-card-body ul,
.free-card--purple.is-export-card .free-card-body ol { margin-bottom: 28px; padding-left: 55px; }
.free-card--purple.is-export-card .free-card-body li { margin-bottom: 17px; }
.free-card--purple.is-export-card .free-card-body blockquote { margin-bottom: 33px; }
.free-card--purple.is-export-card .free-card-body code { padding: 3px 14px; border-radius: 8px; font-size: 33px; }
.free-card--purple.is-export-card .free-card-body hr { margin: 33px 0; }
.free-card--purple.is-export-card .free-inline-image { margin: 17px 0 33px; }
.free-card--purple.is-export-card .free-inline-image img {
  border-radius: 22px;
  box-shadow: 0 3px 6px rgba(38, 37, 35, .12), 0 28px 61px rgba(38, 37, 35, .14);
}
.free-card--purple.is-export-card .free-card-watermark { margin-top: 17px; font-size: 29px; letter-spacing: .8px; }
.free-card--purple.is-export-card.is-fixed-ratio { height: 1440px; }
.free-card--purple.is-export-card.is-fixed-ratio .free-card-panel { padding-bottom: 17px; }

.free-card--answer.is-export-card {
  --free-answer-scale: 2.7692308;
  width: 1080px;
  min-height: 0;
  height: auto;
  border-radius: 0 !important;
  box-shadow: none;
}
.free-card--answer.is-export-card.is-fixed-ratio { height: 1440px; }

@media (prefers-reduced-motion: reduce) {
  .free-card-scale-frame > .free-card { will-change: auto; }
}
