/* 首页与专题的视频预览限定在各自页面内，避免影响工作台。 */
.home-tools .generator-section { padding-top: 28px; }
.home-tools .generator-heading { text-align: left; margin-bottom: 20px; }
.home-tools .generator-heading h1 { max-width: 780px; font-size: clamp(28px, 3.3vw, 44px); margin-bottom: 10px; }
.home-tools .generator-heading p { margin: 0; max-width: 740px; color: #a7b0a0; font-size: 14px; line-height: 1.65; }
.home-tools .generator-kicker { margin-bottom: 10px; }
.home-tool-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 22px; }
.home-tool-option { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.home-tool-choice { position: relative; display: flex; align-items: center; width: 100%; min-height: 86px; gap: 14px; padding: 12px 14px; border: 1px solid #353c31; border-radius: 13px; background: #181c17; color: var(--text); text-align: left; transition: border-color 160ms, background 160ms, box-shadow 160ms, transform 160ms; }
.home-tool-choice:hover { border-color: #7d8e6b; background: #20261c; }
.home-tool-choice[aria-pressed="true"] { border-color: var(--accent); background: #232c1d; box-shadow: 0 0 0 1px rgba(213, 235, 158, 0.35), 0 12px 28px -12px rgba(213, 235, 158, 0.25); }
.home-tool-choice img { flex: 0 0 58px; width: 58px; height: 60px; object-fit: cover; border-radius: 8px; border: 1px solid #ffffff18; }
.home-tool-choice > span { display: grid; min-width: 0; gap: 4px; }
.home-tool-choice strong { font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; color: #eff4ea; }
.home-tool-choice small { color: #a8b39e; font-size: 12px; line-height: 1.4; }
.home-tool-choice > svg { flex: 0 0 28px; color: var(--accent); margin-left: 4px; }
.home-tool-detail { display: inline-flex; align-items: center; min-height: 32px; padding: 0 6px; color: #b5c5a4; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; width: fit-content; }
.home-tool-detail:hover { color: var(--accent); }
.home-tool-choice:focus-visible, .home-tool-detail:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.home-tools .home-creation-grid { grid-template-columns: minmax(350px, .86fr) minmax(0, 1.14fr); gap: 22px; }
.home-tools .home-preview-stage { aspect-ratio: 16 / 10; border-radius: 10px; border: 1px solid #ffffff12; background: #0e110e; }
.home-tools .home-preview-stage :is(img, video) { object-fit: contain; background: #0e110e; }
.home-tools #previewStage #exampleVideo:not([hidden]) { max-height: none; }
.home-tools .home-preview-stage [hidden] { display: none; }
.home-tools .example-description { display: grid; gap: 14px; padding: 16px 4px 4px; margin: 0; }
.home-tools .example-description > span { min-width: 0; }
.home-tools .example-description strong { font-size: 15px; color: #ecf2e6; }
.home-tools .example-description small { max-width: 65ch; font-size: 12px; color: #9eab94; line-height: 1.65; }
.home-tools .home-preview .home-tool-detail { padding: 0; min-height: 36px; }
.home-tools .home-sections { padding-top: 12px; }
.home-tools .home-sections .content-section { padding-block: 48px; }
.home-tools .home-sections .section-intro { text-align: left; max-width: 680px; margin: 0 0 28px; }
.home-tools .home-sections .section-intro h2 { font-size: clamp(23px, 2.5vw, 31px); letter-spacing: -.7px; text-wrap: balance; }
.home-tools .home-sections .section-intro p { max-width: 60ch; font-size: 13px; line-height: 1.75; }
.home-tools .home-effects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-tools .home-effects-grid .step { padding: 24px; border-radius: 12px; background: #171b16; }
.home-tools .home-effects-grid h3 { margin: 0 0 12px; }
.home-tools .home-effects-grid h3 a { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #e7eedd; font-size: 17px; line-height: 1.5; text-decoration: none; }
.home-tools .home-effects-grid h3 a svg { flex-shrink: 0; color: var(--accent); transition: transform 160ms; }
.home-tools .home-effects-grid h3 a:hover { color: var(--accent); }
.home-tools .home-effects-grid h3 a:hover svg { transform: translateX(3px); }
.home-tools .home-effects-grid h3 a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.home-tools .steps-section .step { border: 0; border-top: 1px solid #394230; border-radius: 0; background: transparent; padding: 20px 0 0; }
.home-tools .steps-section .step h3 { margin: 14px 0 10px; }
.home-tools .steps-section .centered-link { margin-left: 0; min-height: 44px; }
.trend-tools .trend-example { margin: 0; padding: 18px 20px 14px; }
.trend-tools .trend-example-stage { display: flex; align-items: center; justify-content: center; overflow: hidden; width: 100%; border: 1px solid #ffffff12; border-radius: 10px; background: #0e110e; }
.trend-tools .trend-example-portrait { aspect-ratio: 4 / 5; max-height: 520px; }
.trend-tools .trend-example-landscape { aspect-ratio: 1344 / 768; }
.trend-tools .trend-example-stage video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0e110e; }
.trend-tools .trend-example figcaption { margin-top: 10px; color: #a6b09d; font-size: 12px; }
@media (max-width: 900px) {
  .home-tools .home-effects-grid { grid-template-columns: minmax(0, 1fr); }
  .home-tool-picker { grid-template-columns: 1fr 1fr; gap: 10px; }
  .home-tools .home-creation-grid { grid-template-columns: minmax(0, 1fr); }
  .home-tools .home-preview, .trend-tools .home-preview { order: -1; }
}
@media (max-width: 480px) {
  .home-tools .generator-section { padding-top: 18px; }
  .home-tools .generator-heading { margin-bottom: 16px; }
  .home-tools .generator-heading h1 { font-size: 26px; line-height: 1.2; }
  .home-tools .generator-heading p { font-size: 13px; line-height: 1.55; }
  .home-tool-picker { margin-bottom: 16px; gap: 8px; }
  .home-tool-choice { min-height: 72px; gap: 10px; padding: 10px; border-radius: 11px; }
  .home-tool-choice img { flex: 0 0 44px; width: 44px; height: 48px; border-radius: 6px; }
  .home-tool-choice strong { font-size: 13px; }
  .home-tool-choice small { font-size: 11px; }
  .home-tool-detail { min-height: 36px; padding-inline: 2px; font-size: 11px; }
  .home-tools .example-description { padding-inline: 2px; }
  .home-tools .home-preview-stage { aspect-ratio: 4 / 5; max-height: 420px; }
  .home-tools #generator[data-home-template="burning-bridges"] .home-preview-stage { aspect-ratio: 1344 / 768; }
  .trend-tools .trend-example { padding: 12px; }
  .trend-tools .trend-example-portrait { max-height: 420px; }
  .home-tools .home-sections { padding-top: 18px; }
  .home-tools .home-sections .content-section { padding-block: 32px; }
  .home-tools .home-effects-grid .step { padding: 20px; }
  .home-tools .home-effects-grid h3 a { font-size: 15px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-tool-choice, .home-tools .home-effects-grid h3 a svg { transition: none; }
}