@font-face { font-family: StageRounded; src: url('../assets/stage-design/v20261110/rounded-400.woff') format('woff'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: StageRounded; src: url('../assets/stage-design/v20261110/rounded-700.woff') format('woff'); font-style: normal; font-weight: 700; font-display: swap; }
:root { color-scheme: light; font-family: StageRounded, 'Microsoft JhengHei', system-ui, sans-serif; color: #632642; background: #f58da1 url('../assets/stage-design/v20261110/pink-bg.webp') center / cover; accent-color: #fff; }
:root:has(.studio[data-view="processing"]) { background-image: url('../assets/stage-design/v20261110/purple-bg.webp'); }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; }
[hidden] { display: none !important; }
button, input, select { font: inherit; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, select:focus-visible, .upload-zone:focus-within, .option:has(input:focus-visible) { outline: 3px solid #662e50; outline-offset: 4px; }
button, input, fieldset, figure, h1, h2, p { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
fieldset:disabled { opacity: .55; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.studio { width: 100%; max-width: 480px; margin: 0 auto; padding-top: env(safe-area-inset-top, 0px); container-type: inline-size; }
.experience-screen { position: relative; width: 100%; min-height: max(177.778cqw, calc(100vh - env(safe-area-inset-top, 0px))); min-height: max(177.778cqw, calc(100dvh - env(safe-area-inset-top, 0px))); overflow: hidden; background: #f58da1 url('../assets/stage-design/v20261110/pink-bg.webp') center / 100% 100%; }
/* Keep the home artwork behind translucent browser controls from the first paint.
   The large viewport plus 64px of painted space extends the document itself;
   native scrolling, pull-to-refresh and the fixed pink under-page color stay intact. */
.intro-screen {
  min-height: calc(max(177.778cqw, calc(100vh - env(safe-area-inset-top, 0px))) + 64px);
  min-height: calc(max(177.778cqw, calc(100lvh - env(safe-area-inset-top, 0px))) + 64px);
  background-image: url('../assets/stage-design/v20261110/purple-bg.webp');
  background-size: cover;
  background-position: center bottom;
}
.intro-screen::before { content: ''; position: absolute; inset: 0 0 auto; height: 128cqw; background: url('../assets/stage-design/v20261110/pink-bg.webp') center top / 100% 177.778cqw no-repeat; pointer-events: none; }
.experience-screen h1, .experience-screen h2 { position: relative; margin: 0 auto; color: transparent; font-size: 0; line-height: 0; background-repeat: no-repeat; background-position: center; background-size: contain; }
.intro-screen, .instructions-screen { padding-top: 13cqw; }
.intro-screen h1, .instructions-screen h2 { width: 83.056cqw; height: 44.445cqw; background-image: url('../assets/stage-design/v20261110/hero-title.webp'); }
.intro-screen h1 { transform-origin: 50% 70%; animation: hero-float 5.6s ease-in-out infinite; }
.intro-artwork { position: absolute; top: 58.426cqw; left: 0; display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(to bottom, #000 70cqw, transparent 80cqw); mask-image: linear-gradient(to bottom, #000 70cqw, transparent 80cqw); }
.pill-button { display: inline-flex; justify-content: center; align-items: center; padding: 0; border: 0; background: transparent; text-align: center; font-weight: 700; min-height: 44px; }
.experience-screen .screen-bottom > .pill-button { position: absolute; left: 50%; top: 135.55cqw; transform: translateX(-50%); width: 58.5cqw; height: 11.6cqw; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; color: transparent; font-size: 0; }
#instructions-next, #photo-next { background-image: url('../assets/stage-design/v20261110/button-next.webp'); }
#generate-button { background-image: url('../assets/stage-design/v20261110/button-generate.webp'); }
.intro-screen .screen-bottom { position: absolute; top: 135.55cqw; left: 0; width: 100%; text-align: center; }
.intro-screen .screen-bottom > .start-button { position: static; transform: none; min-height: 44px; }
.stage-line #start-button { background-image: url('../assets/stage-design/v20261110/button-login.webp'); }
.stage-web #start-button, .stage-line #start-button[data-authenticated="true"], #retry-job-button { color: #632642; font-size: 4.1cqw; border-radius: 99px; background: linear-gradient(120deg,#ffe6a5,#fff4d6 45%,#ffedb4); box-shadow: inset 0 0 0 1px #f6d39b; padding: 8px 24px; min-width: 58.5cqw; }
.consent-copy { width: 70cqw; margin: 2.5cqw auto 0; }
.consent-copy img { display: block; width: 100%; height: auto; }
.instructions-copy { width: 64.445cqw; margin: 12.8cqw auto 0; }
.instructions-copy img { display: block; width: 100%; height: auto; }
.instructions-screen::after, .processing-panel::after { content: ''; position: absolute; left: 0; bottom: 8cqw; width: 100%; height: 21.852cqw; background: url('../assets/stage-design/v20261110/lamp-ornament.webp') center / contain no-repeat; pointer-events: none; }
.controls, #portrait-form { border: 0; padding: 0; }
.upload-screen, .background-screen { padding-top: 16.4cqw; }
.upload-screen h2 { width: 81.76cqw; height: 17.315cqw; background-image: url('../assets/stage-design/v20261110/photo-title.webp'); }
.background-screen h2 { width: 88.8cqw; height: 17.223cqw; background-image: url('../assets/stage-design/v20261110/scene-title.webp'); }
#photo-fieldset { width: 64.074cqw; margin: 2.7cqw auto 0; }
.upload-zone { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 692 / 694; cursor: pointer; background: url('../assets/stage-design/v20261110/upload-paper.webp') center / 96% 96% no-repeat; }
.upload-zone::after { content: ''; position: absolute; inset: 0; background: url('../assets/stage-design/v20261110/photo-frame.webp') center / 100% 100% no-repeat; pointer-events: none; }
.upload-zone.drag-over { outline: 3px dashed #fff; outline-offset: 6px; }
.upload-empty { display: block; width: 44.815cqw; height: 33.889cqw; background: url('../assets/stage-design/v20261110/upload-copy.webp') center / contain no-repeat; color: transparent; font-size: 0; }
.upload-empty strong, .upload-empty small { font-size: 0; }
#photo-preview { position: absolute; inset: 2.5%; width: 95%; height: 95%; object-fit: cover; border-radius: 4px; }
#pose-fieldset { position: absolute; top: 108.3cqw; left: 15%; width: 70%; }
#pose-fieldset legend { width: 100%; text-align: center; color: #fff9f3; font-size: 3.5cqw; margin-bottom: 3.2cqw; }
.options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5cqw; }
.option { display: flex; align-items: center; justify-content: center; gap: 2cqw; min-height: 44px; color: #fffaf4; cursor: pointer; white-space: nowrap; font-size: 4.5cqw; }
.option input { appearance: none; width: 5.7cqw; height: 5.7cqw; border: 2px solid #fff9f2; border-radius: 50%; margin: 0; flex-shrink: 0; }
.option input:checked { background: #fff9f2; box-shadow: inset 0 0 0 3px #f694a7; }
.upload-screen::after, .background-screen::after { content: ''; position: absolute; bottom: 0; left: 14.17%; width: 71.667cqw; height: 26.945cqw; background: url('../assets/stage-design/v20261110/stage-ornament.webp') center / contain no-repeat; pointer-events: none; }
.background-figure { position: relative; width: 83.89cqw; height: 72.13cqw; margin: 1.9cqw auto 0; }
.background-figure::after { content: ''; position: absolute; inset: 0; background: url('../assets/stage-design/v20261110/scene-frame.webp') center / 100% 100% no-repeat; pointer-events: none; }
#background-preview { position: absolute; inset: 2%; width: 96%; height: 96%; border-radius: 5px; object-fit: cover; }
#background-preview-message { position: absolute; z-index: 1; bottom: 6%; left: 5%; width: 90%; padding: 8px; background: #fff4e2ed; text-align: center; font-size: 12px; }
#background-fieldset { position: absolute; top: 115cqw; left: 14%; width: 72%; z-index: 3; }
.stage-background-picker { position: relative; }
.stage-background-select { appearance: none; display: flex; align-items: center; width: 100%; min-height: 44px; height: 10.5cqw; border: 1.5px solid #ddc4b5; border-radius: 2cqw; padding: 4px 11cqw 4px 4cqw; color: #632642; background: #fff5e5; text-align: left; font-size: 4.5cqw; font-weight: 700; outline: none; box-shadow: none; }
.stage-background-select:focus-visible { outline: 2px dashed #fff5e5; outline-offset: 3px; }
.stage-select-arrow { position: absolute; top: 15%; bottom: 15%; right: 0; width: 10cqw; border-left: 1px solid #ddc4b5; display: grid; place-items: center; }
.stage-select-arrow::after { content: ''; width: 2.1cqw; height: 2.1cqw; border-right: 2px solid #7b3e60; border-bottom: 2px solid #7b3e60; transform: translateY(-.5cqw) rotate(45deg); }
.stage-background-options { position: absolute; z-index: 4; bottom: calc(100% - 1px); left: 0; width: 100%; max-height: max(47.5cqw, 200px); margin: 0; padding: 0 3cqw 0 2cqw; list-style: none; overflow-y: auto; overscroll-behavior-y: none; border: 1.5px solid #ddc4b5; border-radius: 2cqw 2cqw 0 0; background: #fff5e5; color: #632642; font-size: 4.5cqw; font-weight: 700; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.stage-background-options li { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 40px; height: 9.5cqw; padding: 5px 2cqw; border-bottom: 1px solid #e6d0c2; cursor: pointer; }
.stage-background-options li:last-child { border-bottom: 0; }
.stage-background-options li[aria-selected="true"]::before, .stage-background-options li.is-active::before { content: ''; position: absolute; inset: 5px 0; z-index: -1; border-radius: 5px; background: #f6d8df; pointer-events: none; }
.stage-background-options::-webkit-scrollbar { display: none; }
.stage-options-scroll { display: none; position: absolute; z-index: 5; right: 1.5cqw; bottom: calc(100% + 7px); height: calc(max(47.5cqw, 200px) - 16px); width: 2px; border-radius: 4px; background: #ddc4c5; pointer-events: none; opacity: var(--picker-scroll-visible, 0); }
.stage-options-scroll > span { position: absolute; top: var(--picker-thumb-top, 0%); width: 100%; height: var(--picker-thumb-size, 50%); border-radius: inherit; background: #8f486d; }
.stage-background-picker.is-open .stage-options-scroll { display: block; }
.stage-background-picker.is-open .stage-background-select { border-radius: 0 0 2cqw 2cqw; }
.button-hint { position: absolute; top: 148.3cqw; z-index: 2; left: 10%; width: 80%; text-align: center; font-size: 12px; line-height: 1.6; color: #5a203e; background: #fff5e8ed; border-radius: 8px; padding: 5px 9px; }
.processing-panel { isolation: isolate; text-align: center; padding-top: 16.4cqw; background-image: url('../assets/stage-design/v20261110/purple-bg.webp'); }
.processing-panel h2 { z-index: 1; width: 100%; height: 19.334cqw; background-image: url('../assets/stage-design/v20261110/processing-title.webp'); }
/* All four tips meet at 45.09cqw / 109cqw: the ground shadow's centre
   (about 200 / 705 in the 506 x 726 mascot asset), not the image's bottom centre.
   Rotate each cone around that ground point, never around its centre. */
.processing-lights { position: absolute; z-index: 0; top: 39cqw; left: 0; width: 100%; height: 72cqw; pointer-events: none; }
.spotlight { position: absolute; left: 45.09%; bottom: 2cqw; width: 21cqw; height: 72cqw; margin-left: -10.5cqw; transform-origin: 50% 100%; transform: rotate(var(--beam-rest)); opacity: .78; filter: blur(.45cqw); animation: stage-beam-sweep var(--beam-duration) ease-in-out var(--beam-delay) infinite alternate; }
.spotlight::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(255,242,188,.65), rgba(255,247,210,.48) 45%, rgba(255,250,226,.3) 80%, rgba(255,250,226,0)); clip-path: polygon(0 0,100% 0,51% 100%,49% 100%); }
.spotlight-one { --beam-rest: -30deg; --beam-from: -36deg; --beam-to: -18deg; --beam-duration: 5.7s; --beam-delay: -1.1s; }
.spotlight-two { --beam-rest: -10deg; --beam-from: -17deg; --beam-to: 2deg; --beam-duration: 7.3s; --beam-delay: -4.3s; }
.spotlight-three { --beam-rest: 12deg; --beam-from: 3deg; --beam-to: 23deg; --beam-duration: 6.4s; --beam-delay: -2.6s; }
.spotlight-four { --beam-rest: 32deg; --beam-from: 22deg; --beam-to: 40deg; --beam-duration: 8.2s; --beam-delay: -6.1s; }
.processing-mascot { position: absolute; z-index: 1; width: 46.852cqw; height: auto; top: 43.7cqw; left: 26.574%; }
.twinkle { position: absolute; height: auto; animation: twinkle 2.8s ease-in-out infinite; }
.star-big { top: 8cqw; left: 69%; width: 6.39cqw; }
.star-small { top: 15.5cqw; left: 75%; width: 3.61cqw; animation-delay: 1.1s; }
.processing-copy { position: absolute; z-index: 1; top: 117.5cqw; left: 17.78%; width: 64.444%; color: #fff9f3; }
.processing-caption { display: block; width: 100%; height: auto; }
#retry-job-button { position: absolute; top: 141cqw; left: 50%; transform: translateX(-50%); z-index: 2; font-size: 13px; }
@keyframes stage-beam-sweep { from { transform: rotate(var(--beam-from)); } to { transform: rotate(var(--beam-to)); } }
@keyframes hero-float { 0%,100% { transform: translateY(0) rotate(-.35deg); } 50% { transform: translateY(-.85cqw) rotate(.35deg); } }
@keyframes twinkle { 0%,100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
.result-panel { padding-top: 12cqw; }
.result-panel h2 { width: 58.056cqw; height: 31.111cqw; background-image: url('../assets/stage-design/v20261110/result-title.webp'); }
.result-image { display: block; position: relative; width: 78.426cqw; aspect-ratio: 847 / 823; margin: 4.5cqw auto 0; }
.result-image::after { content: ''; position: absolute; inset: 0; background: url('../assets/stage-design/v20261110/result-frame.webp') center / 100% 100% no-repeat; pointer-events: none; }
.result-image img { position: absolute; inset: 2%; width: 96%; height: 96%; object-fit: contain; border-radius: 5px; }
.web-result-toolbar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4cqw; width: 80%; margin: 9cqw auto 0; }
.web-result-toolbar .pill-button { width: 100%; min-width: 0; height: 10.5cqw; min-height: 44px; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; color: transparent; font-size: 0; }
#save-image-button { background-image: url('../assets/stage-design/v20261110/button-download.webp'); }
#share-image-button { background-image: url('../assets/stage-design/v20261110/button-share.webp'); }
#regenerate-button { background-image: url('../assets/stage-design/v20261110/button-replay.webp'); }
#policy-link { background-image: url('../assets/stage-design/v20261110/button-policy.webp'); }
.result-action-message { font-size: 12px; line-height: 1.7; color: #632642; text-align: center; margin: 3cqw 10% 0; padding: 8px; background: #fff3e4dd; border-radius: 10px; }
.notice { position: relative; z-index: 5; border: 2px solid #9c4964; background: #fff3e3; padding: 12px 18px; color: #632642; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .spotlight, .twinkle, .intro-screen h1 { animation: none; } }
@media (max-width: 359px) { .option { font-size: 4.25cqw; gap: 1.5cqw; } .button-hint { font-size: 11px; } }
@media (min-width: 481px) { .studio { box-shadow: 0 0 40px #a3456030; } }