:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #09090b; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { min-height: 100svh; background: #09090b; }
button, a { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.generator { width: clamp(380px, 50vw, 620px); min-height: 100svh; margin: 0 auto; padding: 45px 38px 56px; overflow: hidden; color: #fff; background: #09090b; }
.brand { margin: 0 auto 16px; color: #fff; font-size: clamp(42px, 12vw, 58px); font-style: italic; font-weight: 1000; letter-spacing: -.09em; line-height: .9; text-align: center; transform: skewX(-7deg); }
.brand__pink { color: #ef79b9; }
.brand__white { color: #fff; }
h1 { margin: 0; color: #fff; font-size: clamp(25px, 7.3vw, 34px); font-weight: 900; letter-spacing: -.06em; line-height: 1.2; text-align: center; }

.segment-control { display: grid; height: 66px; margin: 31px 0 30px; grid-template-columns: 1fr 1.34fr 1.28fr; gap: 3px; padding: 5px; border: 1px solid #323235; border-radius: 999px; background: #101011; }
.segment-control__item { display: grid; place-items: center; gap: 8px; grid-auto-flow: column; min-width: 0; padding: 0 7px; color: #aaa9ae; border: 0; border-radius: 999px; background: transparent; font-size: clamp(15px, 4.2vw, 20px); font-weight: 800; white-space: nowrap; }
.segment-control__item span { color: #c9c8cc; font-size: 24px; line-height: 1; }
.segment-control__item.is-selected { color: #fff; background: #363636; }

.style-grid { display: grid; margin-right: -13px; margin-left: -13px; grid-template-columns: 1fr 1fr; gap: 19px; }
.style-card { position: relative; display: block; min-width: 0; aspect-ratio: .62; padding: 0; overflow: hidden; color: #fff; border: 2px solid #77747b; border-radius: 30px; background: #161619; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.style-card.is-selected { border-color: #f448a7; box-shadow: 0 0 0 3px rgba(244,72,167,.4), 0 6px 16px rgba(244,72,167,.16); }
.image-frame { position: absolute; inset: -18px 0; display: block; overflow: hidden; background: linear-gradient(145deg, #5f657c, #1c1d27 47%, #0d0d10); animation: image-float 2.8s ease-in-out infinite alternate; }
.image-frame--anime { background: linear-gradient(145deg, #b7ccf1, #6f82ba 45%, #292a4a); animation-delay: -2.4s; }
.image-frame::after { position: absolute; inset: 0; content: "图片位置"; display: grid; place-items: center; color: rgba(255,255,255,.43); background: linear-gradient(0deg, rgba(0,0,0,.46), transparent 58%); font-size: 12px; font-weight: 750; letter-spacing: .1em; }
.image-frame img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; }
.image-frame img[src=""] { opacity: 0; }
.image-frame:has(.preview-image.is-visible[src]:not([src=""]))::after { display: none; }
.image-frame .preview-image { position: absolute; inset: 0; z-index: 1; opacity: 0; transform: translateY(14px) scale(1.04); transition: opacity .28s ease, transform .34s ease; }
.image-frame .preview-image.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.image-frame.is-changing { animation: image-swap .38s cubic-bezier(.2,.8,.25,1); }
@keyframes image-swap { 0% { opacity: .45; transform: translateY(12px) scale(.97); } 65% { opacity: 1; transform: translateY(-2px) scale(1.01); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes image-float { from { transform: translateY(-13px) scale(1.035); } to { transform: translateY(13px) scale(1.035); } }
@media (prefers-reduced-motion: reduce) { .image-frame .preview-image { transition: none; }.image-frame, .image-frame.is-changing { animation: none; } }
.style-card strong { position: absolute; z-index: 3; right: 0; bottom: 20px; left: 0; color: #fff; font-size: clamp(23px, 6.4vw, 31px); font-weight: 950; letter-spacing: -.05em; text-shadow: 0 2px 8px rgba(0,0,0,.55); }
.style-card.is-selected strong { color: #ff60b2; }
.selected-mark { position: absolute; z-index: 4; top: 17px; right: 17px; display: grid; width: 30px; height: 30px; place-items: center; color: #fff; border-radius: 50%; background: #f448a7; font-size: 19px; font-weight: 900; }

.start-button { display: flex; min-height: 72px; margin-top: 38px; align-items: center; justify-content: center; gap: 13px; color: #fff; border-radius: 999px; background: linear-gradient(180deg, #ff72c7, #ef159e); box-shadow: 0 17px 29px rgba(255,31,167,.27), inset 0 1px rgba(255,255,255,.3); font-size: 20px; font-weight: 900; }
.start-button:hover { filter: brightness(1.08); }
.start-button span { font-size: 25px; }

@media (max-width: 700px) { .generator { width: 100%; } }
@media (max-width: 360px) { .generator { padding-right: 27px; padding-left: 27px; }.segment-control { margin-top: 25px; }.segment-control__item { gap: 5px; font-size: 14px; }.segment-control__item span { font-size: 20px; }.style-grid { gap: 14px; } }