* { box-sizing: border-box }
html { background: #eeeaf8; color: #282333; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif }
body { margin: 0; min-height: 100dvh; display: grid; place-items: center }
button { font: inherit; cursor: pointer }
#phone { position: relative; width: min(100vw, calc(100dvh * 6 / 13), 600px); aspect-ratio: 6 / 13; overflow: hidden; background: #eeeefa; box-shadow: 0 8px 55px #65528624; container-type: inline-size }
#screen { display: block; width: 100%; height: 100%; pointer-events: none }
#controls { position: absolute; inset: 0 }
.hotspot, .layer { position: absolute }
.hotspot { background: transparent; border: 0; padding: 0; border-radius: 10px; -webkit-tap-highlight-color: #a676fa24 }
.hotspot:focus-visible { outline: 3px solid #7544e1; outline-offset: -2px; background: #b091fa18 }
.layer { display: grid; place-items: center; overflow: hidden; pointer-events: none; font-weight: 700; font-size: 4.2cqw }
.layer img { width: 100%; height: 100%; object-fit: cover }
.cover { border-radius: 5cqw; background: #d3c3f2 }
.grid-cover { border-radius: 4.35cqw; background: #d3c3f2 }
.grid-cover::after { content: ''; position: absolute; inset: auto 0 0; height: 15cqw; background: linear-gradient(transparent, #1c1424bf) }
.template-stats { position: absolute; z-index: 1; bottom: 2.9cqw; left: 2.25cqw; display: grid; gap: .5cqw; color: #fffD; font-size: 2.2cqw; font-weight: 550; line-height: 1.25; text-shadow: 0 1px 3px #21152e99 }
.template-stats span { display: flex; align-items: baseline; gap: .8cqw; white-space: nowrap }
.template-stats strong { color: #fff; font-size: 2.4cqw; font-weight: 750 }
.template-banner { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.65cqw; isolation: isolate; padding: 0 3.3cqw; border: 2px solid #fff8; border-radius: 4.8cqw; background: linear-gradient(106deg, #ffe5f4, #f7a5e6); color: #871c57 }
.template-banner::after { content: ''; position: absolute; inset: 0 0 0 auto; width: 35cqw; z-index: -1; background: url('screens/02-video-show.png') -60.7cqw -26.5cqw / 100cqw auto no-repeat; mask-image: linear-gradient(90deg, transparent, black 17%) }
.template-banner strong { font-size: 5cqw; line-height: 1.28; font-weight: 850 }
.template-banner span { font-size: 3.35cqw; line-height: 1.35; color: #9f3976; font-weight: 650 }
.loop-cover video { width: 100%; height: 100%; max-height: none; border-radius: 0; object-fit: cover }
.generated-cover { pointer-events: auto }
.generated-cover video { object-fit: contain; background: #231a30 }
.generated-cover .preview-avatar { pointer-events: none }
.hotspot.shoot { border-radius: 999px; background: #f7eaff; color: #5f27a4; font-weight: 750; font-size: 3.65cqw; box-shadow: 0 2px 14px #24132f55 }
.hotspot.shoot:active { background: #e5d0ff }
.work-title { background: #fcfcfd; justify-items: start; padding-left: 1cqw }
.work-title { font-size: 5cqw }
.cover .preview-avatar { position: absolute; width: 15%; height: auto; aspect-ratio: 1; border-radius: 50%; border: 2px solid white; top: 4%; right: 5% }
.create-backdrop { background: radial-gradient(ellipse at 60% -18%, #e8d8fc, transparent 55%), linear-gradient(#ded2f9, #ecebfc 43%, #ecebfb 96%, #ebeafb) }
.shoot-heading { margin: 0; font-size: 6.3cqw; font-weight: 850 }
.hotspot.music-toggle { border-radius: 999px; background: #f3ebfb; color: #6a537e; font-size: 3.2cqw; font-weight: 700 }
.hotspot.music-toggle[aria-pressed="true"] { background: #ead8fe; color: #6830b7 }
.back-arrow::before { content: ''; width: 2.5cqw; height: 2.5cqw; border: solid #2a2830; border-width: 0 0 0.45cqw 0.45cqw; border-radius: 1px; transform: rotate(45deg) }
.create-footer { background: #ebeafb }
.studio-panel { position: absolute; display: flex; flex-direction: column; gap: 2.5cqw; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none }
.studio-video { flex: 0 0 84cqw; width: 72cqw; align-self: center; overflow: hidden; border-radius: 5cqw; background: #d3c3f2 }
.studio-video video { object-position: center 33% }
.studio-upload { position: relative; flex: none; overflow: hidden; border-radius: 4.8cqw; background: #fcfcff }
#photo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0 }
#photo::file-selector-button { width: 100%; height: 100%; cursor: pointer }
.studio-upload:focus-within { outline: 2px solid #915bf1; outline-offset: -2px }
.studio-upload-info { min-height: 17cqw; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 3.6cqw; padding: 2cqw 4cqw; font-size: 4.5cqw; font-weight: 800 }
.upload-thumb { display: block; width: 12cqw; height: 12cqw; object-fit: cover; border-radius: 3cqw; background: #eee4fd }
.studio-upload-info small { display: block; margin-top: 0.5cqw; color: #777183; font-size: 3.1cqw; font-weight: 500 }
.upload-action { display: grid; place-items: center; min-width: 11cqw; min-height: 9cqw; border-radius: 3cqw; background: #eee4fd; color: #7d45cf }
.studio-card { flex: none; min-width: 0; margin: 0; padding: 1.8cqw 4cqw 2.5cqw; border: 0; border-radius: 4.8cqw; background: #fcfcff; font-size: 4.1cqw; font-weight: 800 }
.studio-card legend { float: left; width: 100%; padding: 0; margin-bottom: 1.4cqw }
.scene-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6cqw 2cqw; clear: both }
.scene-options button { white-space: nowrap; border: 1px solid transparent; border-radius: 999px; background: #f1edf8; color: #61546f; padding: 1.5cqw 1cqw; font-size: 3.15cqw; font-weight: 650 }
.scene-options button::before { content: ''; display: inline-block; width: 1.65cqw; height: 1.65cqw; margin-right: 1.1cqw; border-radius: 50%; background: #9c8daf }
.scene-options button[data-scene="lawn"]::before { background: #8cac82 }
.scene-options button[data-scene="bedroom"]::before { background: #d98ec4 }
.scene-options button[data-scene="city"]::before { background: #7778b2 }
.scene-options button[data-scene="studio"]::before { background: #e7b26d }
.scene-options button[aria-pressed="true"] { background: #eee3ff; border-color: #ac7cf2; color: #6b35bc }
.thought-input { display: grid; gap: 1cqw }
.thought-input textarea { width: 100%; min-height: 11cqw; resize: none; border: 0; border-radius: 2.8cqw; background: #f5f1fb; padding: 1.8cqw 2.6cqw; color: #322940; font: 500 max(16px, 3.65cqw)/1.35 -apple-system, BlinkMacSystemFont, sans-serif }
.thought-input textarea::placeholder { color: #847b91 }
.preview-backdrop { background: linear-gradient(#f0e4fb, #ecebfb 32%, #edeafa) }
.thought-preview { position: absolute; overflow: auto; border-radius: 4.6cqw; background: #fcfcff; padding: 2.5cqw 4cqw; font-size: 3.55cqw }
.thought-preview strong { color: #7544ca; font-size: 3.65cqw }
.thought-preview p, #video-thought { margin: 1.1cqw 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.42 }
#video-thought { padding: 7px 3px 2px }
.hotspot.make-video { border-radius: 999px; background: linear-gradient(100deg, #844be6, #9d5cf1); color: white; font-size: 5.2cqw; font-weight: 800 }
.hotspot.make-video:disabled { background: #d9d6e5; color: #746e82; cursor: default }
.hotspot.make-video:focus-visible { outline-offset: 2px }
.label { border-radius: 2cqw; background: #eeedfb }
.empty { background: #eeeefa; color: #89819d; border-radius: 5cqw; font-weight: 500 }
.works-heading { justify-items: start; padding-left: .5cqw; background: #ecebf7; font-size: 4.8cqw; font-weight: 850 }
.works-list { position: absolute; display: flex; flex-direction: column; gap: 3.2cqw; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 1.33cqw 3.67cqw 4cqw; background: #ecebf7 }
.work-row { flex: none; width: 100%; min-height: 36.7cqw; display: grid; grid-template-columns: 31.8cqw 1fr; align-items: center; gap: 3.4cqw; text-align: left; color: #272532; border: 0; padding: 2cqw; border-radius: 5.7cqw; background: #fcfcfd }
.work-thumb { width: 100%; height: 32.7cqw; object-fit: cover; border-radius: 4.6cqw }
.work-info { min-width: 0 }
.work-thought-label { display: block; color: #7544ca; font-size: 2.8cqw; font-weight: 750; margin-bottom: .6cqw }
.work-thought { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-size: 4.35cqw; line-height: 1.22; margin-bottom: .8cqw }
.work-date { color: #85838d; font-size: 3.65cqw }
.work-stats { display: grid; grid-template-columns: 1fr 1.17fr; gap: 1.5cqw; margin-top: 2.6cqw }
.work-stats > span { color: #827e89; font-size: 3.25cqw; font-weight: 650 }
.work-stats > span + span { border-left: 1px solid #dcd9e4; padding-left: 2.6cqw }
.work-stats strong { display: block; color: #272532; font-size: 5.4cqw; line-height: 1.2; margin-top: 0.6cqw; white-space: nowrap }
.work-stats > span + span strong { color: #8343ef }
.work-stats small { font-size: 3.35cqw }
dialog { width: min(92vw, 380px); max-height: 94dvh; padding: 13px; border: 0; border-radius: 23px; background: #f9f6ff; color: #282333; box-shadow: 0 12px 50px #22143655 }
dialog::backdrop { background: #2013329c }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 3px 8px }
h2 { font-size: 17px; margin: 0 }
.dialog-head button { border: 0; border-radius: 50%; width: 34px; height: 34px; background: #ede3fe; color: #6b45b4; font-size: 23px }
video { display: block; width: 100%; max-height: 68dvh; border-radius: 14px; background: #251b33 }
.month-option { width: 100%; border: 0; padding: 12px; border-radius: 18px; font-weight: 700; background: #ede3fe; color: #593397; margin-top: 8px }
#notice { position: fixed; z-index: 4; bottom: 7dvh; left: 50%; transform: translateX(-50%); width: max-content; max-width: 88vw; color: white; background: #392752ed; border-radius: 16px; padding: 11px 16px; font-size: 14px; text-align: center; pointer-events: none }
#notice:empty { display: none }