body{display:block}main.demo-stage{min-height:100dvh;padding:32px;gap:72px;align-items:center;justify-content:center}#phone{flex:none}.demo-context{width:230px;align-self:center}.demo-context>span{font-size:32px;font-weight:700;letter-spacing:-1px}.demo-context p{color:#c9c4d9;font-size:15px;margin:14px 0 8px}.demo-context small{display:block;color:#888598;font-size:12px;line-height:1.8}.demo-context button{display:block;text-align:left;color:#b8a5da;font-size:12px;padding:0;margin-top:28px}.demo-context .demo-note{margin-top:38px;font-size:11px;color:#767183}.phone{box-shadow:0 18px 90px #0007}.content{overflow-y:auto;scrollbar-width:none}.content::-webkit-scrollbar{display:none}.content .bottom{flex-shrink:0}.sheet .content>.bottom:last-child{padding-bottom:0}.head{flex-shrink:0}.sub{flex-shrink:0}.hero{overflow:hidden;min-height:263px}.modules,.options,.field{flex-shrink:0}.video-reserved{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border:1px dashed #3c374d;border-radius:12px;background:#15151f;color:#736b83;font-size:11px;min-height:190px;margin-top:22px;flex-shrink:0}.video-reserved .reserved-symbol{font-size:28px;font-weight:300;color:#9e8cb7}.video-reserved small{color:#736c81;font-size:10px}.preview-video{width:100%;height:225px;object-fit:contain;background:#0c0d13;border-radius:12px;margin-top:22px}.summary{flex-shrink:0}.summary span{max-width:100%;overflow-wrap:anywhere}.section-title{overflow-wrap:anywhere}.progress.indeterminate:before{width:34%;animation:loading 1.5s ease-in-out infinite}.generation-status{margin:12px 0 0;font-size:11px;color:#aaa1b9}@keyframes loading{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}.creation-list{overflow-y:auto;flex-shrink:1;padding:2px 0}.creation-card{cursor:pointer;min-width:0}.creation-card h3{overflow-wrap:anywhere}.creation-card:focus-visible{outline:2px solid #c7aaff}.creation-card .preview-link{top:87px}.creation-card .check{top:12px;right:12px}.create-card{min-height:182px}.list{overflow-y:auto}.task{flex-shrink:0}.task h3{overflow-wrap:anywhere}.task .task-copy{min-width:0}.phone[data-state="live"]::after{display:none}.live-entry{position:absolute;left:20px;right:20px;bottom:27px;background:#1b1529ed;backdrop-filter:blur(12px);border:1px solid #ffffff12;border-radius:14px;padding:15px 18px;display:flex;align-items:center;gap:15px}.live-entry b{font-size:17px}.live-entry p{font-size:10px;color:#b4a6c8;margin:4px 0 0}.live-entry button{margin-left:auto;padding:9px 16px;border-radius:7px;background:#7b35ff;font-size:12px}.live-toast{top:auto;bottom:118px}.live-toast .mini .vehicle{height:48px}.live-pending{position:absolute;left:20px;right:20px;bottom:118px;padding:13px 16px;border-radius:12px;background:#181422ee;display:flex;align-items:center;gap:12px;color:#c9bcdd;font-size:11px}.live-pending button{margin-left:auto;color:#cba9ff;font-size:11px}.live-video-space{position:absolute;left:20px;right:20px;top:288px}.live-video-space .video-reserved{height:230px;background:#0b0d14b8;border-color:#ffffff20;margin-top:0;backdrop-filter:blur(6px)}.live-video-space video{width:100%;height:230px;object-fit:contain}.live-attribution{text-align:center;margin-top:14px;background:#17121ccc;padding:10px;border-radius:8px;font-size:11px;color:#dbd2e5}.live-attribution b{color:#b593f1}.live-video-space .dismiss-gift{display:block;margin:12px auto;color:#c5b5d8;font-size:11px}.inline-error{font-size:11px;color:#f2a29d;margin:8px 0 0}.link-row{display:flex;justify-content:space-between;align-items:center;margin-top:20px;font-size:11px;color:#a99bbb}.link-row button{font-size:11px;color:#bba0e4}.modal-shade{position:absolute;z-index:30}.modal{max-height:90%;overflow-y:auto}.modal .secondary{margin-top:9px}.notice{flex-shrink:0}.toast{position:fixed;z-index:100;bottom:26px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 32px);padding:12px 18px;background:#30263f;box-shadow:0 5px 35px #0008;color:#eadff8;border:1px solid #6d518e;border-radius:10px;font-size:12px;text-align:center}.field label{line-height:1.4}.field input[aria-invalid="true"]{border-color:#efaaa3}.creation-list .create-card{font-size:11px}.task-state{display:block;color:#9f96ad;font-size:10px;margin-top:5px}.status-header{flex-shrink:0}.rules{overflow-y:auto}.qa-controls{margin-top:30px;font-size:11px;color:#9785b0}.qa-controls label{display:block;margin-top:10px}.phone[data-state="home"] .theme-copy{flex:1;min-height:0;margin:0 10px;display:flex;align-items:center;justify-content:center;text-align:center}.phone[data-state="home"] .bottom{margin-top:0;padding-top:0}.saved-name{margin:18px 0 0;font-size:20px;line-height:1.35;overflow-wrap:anywhere}.reserved-preview{flex-shrink:0}.media-placeholder-note{font-size:10px;color:#8d809e;text-align:center;margin-top:8px}.pending-label{font-size:10px;color:#9b8cab}.live-toast .toast-copy{min-width:0}.live-toast h2{overflow-wrap:anywhere}.task .mini .vehicle{width:65px;height:53px}.theme-card.small{cursor:pointer}.options .option:focus-visible{outline-offset:1px}.field textarea:disabled{opacity:.6}.head .back{min-width:14px}.bottom .primary:disabled{opacity:.48}
@media(max-width:740px){main.demo-stage{padding:0;display:block;min-height:100dvh}.demo-context{display:none}#phone{width:100%;display:flex;justify-content:center}.phone{width:390px;max-width:100vw;border-radius:0;box-shadow:none;height:max(844px,100dvh)}body{background:#10111b}.sheet{bottom:0}.live-entry{bottom:max(27px,env(safe-area-inset-bottom))}}
@media(max-width:389px){.phone{height:max(844px,100dvh)}.sheet{padding-left:16px;padding-right:16px}.theme-carousel{margin-left:-16px;width:100vw}.head h1{font-size:27px}.hero{margin-left:-4px;margin-right:-4px}.option span{font-size:8px}.modules{column-gap:8px}.modules button{font-size:10px}}
@media(prefers-reduced-motion:reduce){.progress.indeterminate:before{animation:none;transform:none}}
/* Preserve the supplied edge-to-edge carousel and preview margins. */
.phone[data-state="home"] .content,.phone[data-state="editor"] .content,.phone[data-state="wheels"] .content,.phone[data-state="color"] .content{overflow:visible}
/* Mobile product experience: use the real visual viewport, including the keyboard. */
@media(max-width:740px),(max-width:1024px) and (hover:none) and (pointer:coarse){
 html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
 main.demo-stage{padding:0;display:block;min-height:0;height:var(--app-height,100dvh)}
 .demo-context{display:none}#phone{width:100%;height:100%;display:block}
 .phone{width:100%;max-width:none;height:var(--app-height,100dvh);border-radius:0;box-shadow:none;background-size:100% auto;background-position:center top}
 .sheet{top:clamp(78px,16.59dvh,140px);bottom:0;padding-bottom:max(12px,env(safe-area-inset-bottom));padding-left:20px;padding-right:20px}
 .phone::after{display:none}
 .sheet .content,.phone[data-state="editor"] .content,.phone[data-state="wheels"] .content,.phone[data-state="color"] .content{overflow:hidden auto;overscroll-behavior:contain;margin:0 -8px;padding:0 8px;scroll-padding:12px 0 90px}
 .phone[data-state="home"] .content{overflow:hidden auto;margin:0 -20px;padding:0 20px}
 .hero{height:clamp(165px,31.16dvh,263px);min-height:clamp(165px,31.16dvh,263px);margin-left:-8px;margin-right:-8px}
 .theme-carousel{width:100vw;margin:clamp(16px,5.68dvh,48px) -20px 0}
 .theme-card.current{width:clamp(190px,55.9vw,240px);height:clamp(190px,35.19dvh,297px)}
 .theme-card.current .theme-cover{height:100%}
 .theme-card.small .theme-cover{height:clamp(145px,24.64dvh,208px)}
 .sheet .content>.bottom{position:sticky;bottom:0;z-index:8;padding-top:12px;padding-bottom:2px;background:var(--bg);margin-bottom:0}
 .phone[data-state="home"] .bottom{padding-top:8px}
 .field{padding-bottom:4px}
 .field textarea,.field input{font-size:16px;line-height:1.4;padding:10px 12px}
 .field textarea{height:68px;min-height:68px}
 .modules button{height:30px;line-height:18px;font-size:12px}
 .option span{font-size:10px;min-height:26px}
 .thumb{height:57px}.options{gap:8px}
 .head-actions button,.back{position:relative;touch-action:manipulation}
 .head-actions button::before,.back::before{content:'';position:absolute;inset:-9px}
 .primary,.secondary{min-height:46px;touch-action:manipulation}
 .creation-list,.list,.rules{overscroll-behavior:contain}
 .preview-link{min-width:32px;min-height:32px}
 .live-entry{bottom:max(16px,env(safe-area-inset-bottom))}
 .live-toast,.live-pending{bottom:calc(110px + env(safe-area-inset-bottom))}
 .live-video-space{top:clamp(140px,30dvh,288px)}
 .live-video-space .video-reserved,.live-video-space video{height:clamp(150px,27.25dvh,230px);min-height:150px}
 .keyboard-open .sheet{top:8px}
 .keyboard-open .handle{margin-bottom:10px}
 .keyboard-open .content{scroll-padding-bottom:90px}
 .modal-shade{padding:20px}.modal{max-height:calc(100% - 20px)}
 .toast{bottom:calc(16px + env(safe-area-inset-bottom))}
}
@media(max-width:359px){
 .sheet{padding-left:16px;padding-right:16px}.head h1{font-size:26px}
 .phone[data-state="home"] .content{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
 .theme-carousel{margin-left:-16px;margin-right:-16px}
 .modules{column-gap:6px}.modules button{font-size:11px}.option span{font-size:9px}
}
