/* The dotted menu shares the editor's local fonts and BopCut palette. */
.home-page { position: relative; isolation: isolate; height: calc(100dvh - var(--site-navigation-height)); overflow: auto; background: #090b10; color: #f0f1f2; }
.home-dots { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: radial-gradient(ellipse at 50% 27%, color-mix(in srgb, var(--accent-text) 2.7%, transparent), transparent 65%); }
.home-dots::before, .home-dots::after { content: ''; position: absolute; inset: -24px; background: radial-gradient(circle, #ffffff24 .85px, transparent 1px) 0 0 / 24px 24px; mask-image: linear-gradient(#000 30%, #0009 65%, transparent 100%); }
.home-dots::after { background-image: radial-gradient(circle, #ffffff75 1px, transparent 1.2px); mask-image: radial-gradient(ellipse at 25% 15%, #0009, transparent 60%); animation: home-dot-drift 18s ease-in-out infinite alternate; }
.home-dots-interactive::before { display: none; }
.home-dots canvas { position: absolute; inset: 0; width: 100%; height: 100%; mask-image: linear-gradient(#000 30%, #0009 65%, transparent 100%); }
@keyframes home-dot-drift { from { transform: translate(0, 0); opacity: .45; } to { transform: translate(24px, 24px); opacity: .85; } }
.home-main { width: calc(100% - 88px); margin: 22px 44px 0; padding-bottom: 44px; }
.home-featured-tools { width: 100%; max-width: 1080px; margin: 0 auto 36px; }
.home-tool-stage { position: relative; isolation: isolate; width: 100%; aspect-ratio: 3.55; }
.home-tool-banner { --tool-offset: 0%; --tool-scale: 1; position: absolute; top: 50%; left: 50%; z-index: 1; isolation: isolate; display: block; width: 42%; min-width: 0; aspect-ratio: 1.6; overflow: hidden; border: 1px solid #ffffff20; border-radius: 16px; background: #f3f2f1; color: #f0f1f2; text-decoration: none; box-shadow: 0 12px 36px #0003; transform: translate(calc(-50% + var(--tool-offset)), -50%) scale(var(--tool-scale)); transition: transform .65s cubic-bezier(.22,.61,.36,1), opacity .45s, border-color .25s, box-shadow .45s; }
.home-tool-banner[data-position="left"] { --tool-offset: -67%; --tool-scale: .86; opacity: .86; }
.home-tool-banner[data-position="right"] { --tool-offset: 67%; --tool-scale: .86; opacity: .86; }
.home-tool-banner[data-position="hidden"] { --tool-scale: .74; z-index: 0; opacity: 0; visibility: hidden; pointer-events: none; }
.home-tool-banner[data-position="center"] { z-index: 3; border-color: color-mix(in srgb, var(--accent) 34.9%, transparent); box-shadow: 0 20px 60px #0009, 0 0 0 1px color-mix(in srgb, var(--accent) 3.9%, transparent); }
.home-tool-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.home-tool-banner::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 65%, #fafafa40 80%, #fafafae6); pointer-events: none; }
.home-tool-caption { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 2; }
.home-tool-banner[data-position="left"] .home-tool-caption { right: 35%; }
.home-tool-banner[data-position="right"] .home-tool-caption { left: 35%; }
.home-tool-caption h2 { margin: 0; color: var(--accent); font-size: clamp(17px, 1.9vw, 26px); line-height: 1.2; font-weight: 750; letter-spacing: -.6px; text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 18%, transparent); }
.home-tool-banner[href]:hover { border-color: color-mix(in srgb, var(--accent) 50.2%, transparent); box-shadow: 0 12px 36px #0004, 0 0 0 1px color-mix(in srgb, var(--accent) 7.8%, transparent); }
.home-tool-banner[href]:hover .home-tool-image { transform: scale(1.04); }
.home-tool-banner[data-position="center"][href]:hover { box-shadow: 0 20px 60px #0009, 0 0 0 1px color-mix(in srgb, var(--accent) 14.9%, transparent); }
.home-tool-banner[href]:focus-visible { outline-color: var(--accent); outline-offset: 4px; }
.home-tool-coming { cursor: default; }
.home-tool-badge { position: absolute; top: 14px; right: 14px; z-index: 2; padding: 5px 9px; border: 1px solid #29133620; border-radius: 100px; background: #fffffff0; color: #654b70; font-size: 10px; font-weight: 500; }
.home-tool-pagination { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 10px; }
.home-tool-dot { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 50%; }
.home-tool-dot::before { content: ''; width: 8px; height: 8px; border: 1px solid #ffffff33; border-radius: 50%; background: #ffffff26; transition: background .2s, border-color .2s, transform .2s; }
.home-tool-dot[aria-pressed="true"]::before { background: var(--accent); border-color: var(--accent); transform: scale(1.2); }
.home-tool-dot:hover::before { border-color: var(--accent); }
.home-tool-dot:focus-visible { outline-color: var(--accent); outline-offset: 0; }
@media (max-width: 1000px) {
  .home-tool-banner { border-radius: 13px; }
  .home-tool-caption { left: 14px; right: 14px; bottom: 15px; }
  .home-tool-caption h2 { font-size: 18px; }
  .home-tool-banner:not([data-position="center"]) .home-tool-caption h2 { font-size: 16px; }
}
@media (max-width: 680px) {
  .home-featured-tools { margin-bottom: 32px; }
  .home-tool-stage { aspect-ratio: 1.5; overflow: hidden; }
  .home-tool-banner { width: 82%; }
  .home-tool-banner[data-position="left"] { --tool-offset: -62%; }
  .home-tool-banner[data-position="right"] { --tool-offset: 62%; }
  .home-tool-banner:not([data-position="center"]) .home-tool-caption, .home-tool-banner:not([data-position="center"]) .home-tool-badge { visibility: hidden; }
  .home-tool-caption { left: 16px; right: 16px; bottom: 16px; }
  .home-tool-caption h2 { font-size: 21px; }
  .home-tool-pagination { margin-top: 0; }
}
.home-tools { margin-top: 31px; text-align: left; }
.home-image-tools { margin-top: 36px; }
.home-image-banner { position: relative; isolation: isolate; display: block; flex: 0 0 calc((100% - 64px) / 5); min-width: 0; min-height: 128px; aspect-ratio: 2.3 / 1; scroll-snap-align: start; overflow: hidden; border: 1px solid #ffffff20; border-radius: 12px; background: #202328; color: inherit; text-decoration: none; transition: border-color .2s; }
.home-image-banner:hover { border-color: color-mix(in srgb, var(--accent) 50.2%, transparent); }
.home-image-banner:focus-visible { outline-offset: -3px; }
.home-image-banner > .image-artwork { position: absolute; inset: 0; }
.home-image-banner::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, #00000012, transparent 25%, #00000050 55%, #000000e9); pointer-events: none; }
.home-image-banner { container: home-model / inline-size; }
.home-image-unavailable { color: #a5aca5; font-size: 12px; }
@media (max-width: 900px) { .home-image-banner { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 680px) { .home-image-banner { flex-basis: 100%; }.home-image-banner .home-model-caption h3 { font-size: 18px; } }
.home-tools-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.home-tools-heading h2 { font-size: 15px; font-weight: 600; letter-spacing: -.3px; }
.home-model-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.home-carousel-button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #ffffff20; border-radius: 50%; background: #171a1d; color: #e0e4e7; }
.home-carousel-button:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 50.2%, transparent); color: var(--accent-text); background: #22272a; }
.home-carousel-button:disabled { opacity: .3; }
.home-carousel-button .icon { width: 16px; height: 16px; }
.home-tools-grid { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.home-tools-grid::-webkit-scrollbar { display: none; }
.home-model-banner { position: relative; isolation: isolate; display: block; flex: 0 0 calc((100% - 64px) / 5); min-width: 0; min-height: 128px; aspect-ratio: 2.3 / 1; scroll-snap-align: start; overflow: hidden; border: 1px solid #ffffff20; border-radius: 12px; background: #202328; color: inherit; text-decoration: none; transition: border-color .2s; container: home-model / inline-size; }
.home-model-banner:hover { border-color: color-mix(in srgb, var(--accent) 50.2%, transparent); }
.home-model-banner:focus-visible { outline-offset: -3px; }
.home-model-banner::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, #00000012, transparent 35%, #00000030 55%, #000000d9); pointer-events: none; }
.home-model-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.home-model-banner[data-ai-model^="minimax"] .home-model-video { object-position: center 20%; }
.home-model-caption { position: absolute; left: 13px; right: 13px; bottom: 13px; z-index: 2; pointer-events: none; text-shadow: 0 1px 4px #0008; }
.home-model-caption h3 { margin: 0; font: 700 18px/1.2 var(--font); letter-spacing: -.4px; color: var(--accent-text); }
.home-model-banner.has-price .home-model-caption, .home-image-banner.has-price .home-model-caption { bottom: 35px; }
.home-model-banner .ai-card-pricing, .home-image-banner .ai-card-pricing { position: absolute; right: 12px; bottom: 11px; z-index: 2; display: block; padding: 0; border: 0; background: transparent; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 5px #000b; }
.home-model-banner .ai-price-basis, .home-image-banner .ai-price-basis { position: absolute; left: 13px; bottom: 12px; z-index: 2; display: block; color: #e1e6eb; font-size: 10px; font-weight: 500; line-height: 1.3; text-shadow: 0 1px 4px #000; }
.home-model-banner .ai-price-context { position: absolute; top: 12px; left: 13px; z-index: 2; display: block; color: #e1e6eb; font-size: 9px; font-weight: 500; line-height: 1.2; text-shadow: 0 1px 5px #000b; }
.home-model-banner .ai-price-discount:not([hidden]), .home-image-banner .ai-price-discount:not([hidden]) { position: absolute; top: 8px; right: 0; z-index: 2; display: block; min-width: 64px; padding: 5px 11px 5px 15px; clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%); background: var(--accent); color: var(--accent-ink); text-align: center; font-size: 11px; font-weight: 800; line-height: 1.15; letter-spacing: .2px; }
.home-model-banner .ai-price-unavailable { position: absolute; right: 10px; top: 8px; z-index: 2; display: block; color: #c6cbd0; font-size: 10px; background: #121719d9; padding: 4px 6px; border-radius: 6px; }
@container home-model (max-width: 175px) { .home-model-banner .ai-price-context { left: 10px; font-size: 8px; } }
@container home-model (max-width: 175px) {
  .home-model-banner .ai-price-sale, .home-image-banner .ai-price-sale { font-size: 12px; }
  .home-model-banner .ai-price-unit, .home-image-banner .ai-price-unit { font-size: 9px; margin-left: 2px; }
}
@container home-model (max-width: 230px) { .home-image-banner .ai-price-quality { display: none; } }
.home-animations-paused *, .home-animations-paused::before, .home-animations-paused::after, .home-animations-paused *::before, .home-animations-paused *::after { animation-play-state: paused !important; }
@media (min-width: 1600px) { .home-main { margin-top: 40px; } }
@media (max-width: 900px) { .home-main { width: calc(100% - 48px); margin: 25px 24px 0; } .home-model-banner { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 680px) { .home-main { width: calc(100% - 40px); margin: 20px 20px 0; } .home-model-banner { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .home-page * { transition: none !important; } .home-tools-grid { scroll-behavior: auto; } }