*{box-sizing:border-box}html,body,*{scrollbar-width:none}::-webkit-scrollbar{width:0;height:0;display:none}:root{color:#183d3a;font-synthesis:none;background:#f3f6ef;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}body{margin:0}.shell{max-width:680px;min-height:100vh;min-height:100dvh;padding:max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));margin:auto}header{border-bottom:1px solid #ccd9ce;margin-bottom:28px}.eyebrow{letter-spacing:.12em;font-size:.75rem;font-weight:750}header p,.note,small{color:#52675e;font-size:.8rem}h1{font-size:clamp(1.7rem,6vw,2.5rem)}p{line-height:1.6}label{gap:8px;margin:18px 0;font-weight:600;display:grid}input,select,textarea,button{font:inherit;border-radius:10px;min-height:48px;padding:12px}input,select,textarea{color:#183d3a;background:#fff;border:1px solid #86998e;width:100%}textarea{resize:vertical;min-height:90px}button{cursor:pointer;color:#fff;background:#145e4c;border:1px solid #145e4c;font-weight:650}button:disabled{opacity:.45;cursor:default}button:focus-visible{outline-offset:3px;outline:3px solid #c37b0a}input:focus-visible{outline-offset:3px;outline:3px solid #c37b0a}select:focus-visible{outline-offset:3px;outline:3px solid #c37b0a}textarea:focus-visible{outline-offset:3px;outline:3px solid #c37b0a}.actions{flex-wrap:wrap;gap:12px;display:flex}.secondary{color:#145e4c;background:0 0}.scene{color:#fff;text-align:center;background:linear-gradient(#162f50 65%,#356b73 65%);border-radius:20px;min-height:260px;margin:0;padding:20px;position:relative;overflow:hidden}.scene-b{background:linear-gradient(#403058 65%,#466b6e 65%)}.moon{background:#f7e7a4;border-radius:50%;width:42px;height:42px;margin:0 0 20px auto}.krathong{color:#e9d777;font-size:3rem}.preset-b{color:#f4b4c9}figcaption{overflow-wrap:anywhere}figcaption p{white-space:pre-wrap}.scene small{color:#dae4e9}.option-picker{border:0;min-width:0;margin:22px 0;padding:0}.option-picker legend{margin-bottom:12px;padding:0;font-weight:650}.option-track{scroll-snap-type:x proximity;overscroll-behavior-x:contain;gap:12px;padding:4px 4px 12px;display:flex;overflow-x:auto}.option-card{cursor:pointer;scroll-snap-align:start;background:#fff;border:2px solid #ccd9ce;border-radius:16px;flex-direction:column;flex:0 0 176px;gap:0;margin:0;padding:6px;display:flex;position:relative}.option-card.is-selected{background:#e8f3ed;border-color:#145e4c}.option-card:focus-within{outline-offset:1px;outline:3px solid #c37b0a}.option-card input{opacity:0;cursor:pointer;width:100%;height:100%;min-height:0;margin:0;padding:0;position:absolute;top:0;bottom:0;left:0;right:0}.option-thumbnail{color:#e9d777;background:#183753;border-radius:10px;place-items:center;height:88px;font-size:3rem;display:grid}.option-thumbnail.preset-b{color:#f4b4c9}.background-option{background:linear-gradient(#162f50 65%,#356b73 65%)}.background-option.scene-b{background:linear-gradient(#403058 65%,#466b6e 65%)}.option-moon{background:#f7e7a4;border-radius:50%;width:24px;height:24px;margin:-25px -80px 0 0}.option-caption{color:#183d3a;justify-content:space-between;gap:8px;padding:12px 6px 6px;display:flex}form>button[type=submit]{margin-top:16px}.onboarding{text-align:center;flex-direction:column;min-height:65vh;display:flex}.tutorial-progress{border-bottom:1px solid #ccd9ce;padding-bottom:16px}.tutorial-card{margin:auto 0;padding:12px 0}.tutorial-card img{border-radius:24px;width:min(60vw,240px);height:auto}.tutorial-card h1{font-size:1.6rem}.tutorial-card p{max-width:440px;margin:auto}.tutorial-dots{justify-content:center;gap:8px;margin:24px 0;padding:0;list-style:none;display:flex}.tutorial-dots li{background:#c4cec8;border-radius:50%;width:8px;height:8px}.tutorial-dots .active{background:#145e4c}.tutorial-actions{gap:10px;margin-top:auto;padding-top:16px;display:flex}.tutorial-actions button:last-child{flex:1}.sr-only{clip-path:inset(50%);width:1px;height:1px;padding:0;position:absolute;overflow:hidden}@media (max-height:720px){.tutorial-card img{width:180px}.tutorial-card h1{margin:14px 0;font-size:1.35rem}.tutorial-card p{font-size:.9rem}.tutorial-progress{margin-top:0}}.build-tabs{border-bottom:1px solid #ccd9ce;margin-top:12px;display:flex}.build-tabs button{color:#52675e;background:0 0;border:0;border-bottom:3px solid #0000;border-radius:0;flex:1;padding:12px 6px}.build-tabs button[aria-selected=true]{color:#145e4c;border-bottom-color:#145e4c}.character-count{margin-bottom:0;font-size:.85rem}.character-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:20px 0;display:grid}.character-option{color:#183d3a;background:#fff;border-color:#ccd9ce;justify-items:center;gap:8px;font-size:.8rem;display:grid}.character-option[aria-pressed=true]{background:#e8f3ed;border-color:#145e4c}.character-avatar{background:#dce8df;border-radius:50%;place-items:center;width:36px;height:36px;display:grid}.scene-characters{flex-wrap:wrap;justify-content:center;gap:6px;margin:10px 0;display:flex}.scene-character{color:#183d3a;background:#f3e4be;border-radius:20px;padding:6px 10px;font-size:.8rem}.step-action{width:100%;margin-top:20px}.wish-options{border:0;min-width:0;margin:20px 0 0;padding:20px 0 0}.wish-options legend{margin-bottom:12px}.wish-chip{cursor:pointer;background:#fff;border:1px solid #86998e;border-radius:28px;min-height:48px;margin:0 8px 10px 0;padding:12px 16px;font-size:.9rem;display:inline-flex;position:relative}.wish-chip.selected{background:#e8f3ed;border-color:#145e4c}.wish-chip input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;top:0;bottom:0;left:0;right:0}.wish-chip:focus-within{outline-offset:2px;outline:3px solid #c37b0a}.scene{aspect-ratio:4/3;min-height:0;padding:0}.scene .moon{position:absolute;top:7%;right:7%}.scene .krathong{position:absolute;top:55%;left:44%}.scene figcaption{pointer-events:none;position:absolute;bottom:9%;left:8%;right:8%}.scene>small{pointer-events:none;font-size:.65rem;position:absolute;bottom:3%;left:0;right:0}.scene-editable{touch-action:pan-y}.sticker{aspect-ratio:1;z-index:2;position:absolute}.sticker-selected{z-index:3;outline-offset:2px;outline:2px dashed #fff}.sticker-body{color:#183d3a;text-align:center;background:#f3e4be;border:1px solid #f3e4be;border-radius:50%;place-items:center;width:100%;height:100%;min-height:0;padding:3px;font-size:clamp(.55rem,2vw,.8rem);display:grid}button.sticker-body{touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}button.sticker-body:active{cursor:grabbing}.sticker-handle{color:#fff;touch-action:none;background:#145e4c;border:2px solid #fff;border-radius:50%;width:32px;height:32px;min-height:32px;padding:0;position:absolute}.resize-handle{cursor:nwse-resize;bottom:0;right:0}.rotate-handle{cursor:crosshair;top:0;right:0}.sticker-tools{border:1px solid #ccd9ce;border-radius:12px;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;padding:12px;display:flex}.sticker-tools strong{width:100%}.sticker-tools label{flex:120px;min-width:0;margin:0;font-size:.85rem}.sticker-tools input{accent-color:#145e4c;border:0;min-height:36px;padding:0}.is-floating .krathong{transform-origin:50%;will-change:transform;filter:drop-shadow(0 0 10px #f9db77);animation:5s ease-in-out forwards krathong-release}@keyframes krathong-release{0%{opacity:.3;transform:translate(-38px,34px)scale(.75)rotate(-8deg)}18%{opacity:1}40%{transform:translate(-15px,-5px)scale(.95)rotate(5deg)}65%{transform:translate(6px,5px)scale(1)rotate(-3deg)}85%{transform:translate(-3px,-3px)rotate(2deg)}to{opacity:1;transform:translate(0)scale(1)rotate(0)}}.water-ripples{pointer-events:none;width:0;height:0;position:absolute;top:73%;left:49%}.water-ripples i{opacity:0;border:2px solid #cfefec;border-radius:50%;width:84px;height:20px;animation:2s ease-out infinite water-ripple;position:absolute;top:-10px;left:-42px}.water-ripples i:nth-child(2){animation-delay:.65s}.water-ripples i:nth-child(3){animation-delay:1.3s}@keyframes water-ripple{0%{opacity:.7;transform:scale(.4)}to{opacity:0;transform:scale(2.3)}}.result-details{flex-wrap:wrap;gap:18px;margin:24px 0;font-size:.9rem;display:flex}.result-details dt{color:#52675e;font-size:.8rem}.result-details dd{margin:4px 0 0;font-weight:650}@media (prefers-reduced-motion:reduce){.is-floating .krathong{animation:none;transform:none}.water-ripples{display:none}}.character-art{width:100%;height:100%}.scene .krathong-placement .krathong{width:100%;height:100%;font-size:inherit;color:#e9d777;position:static}.scene .krathong-placement .krathong.preset-b{color:#f4b4c9}.krathong-placement .sticker-body{color:inherit;background:0 0;border:0;border-radius:0}.krathong-placement svg{pointer-events:none;width:100%;height:100%;display:block}.result-image-actions{margin-top:20px}.download-image{color:#145e4c;border:1px solid #145e4c;border-radius:10px;align-items:center;min-height:48px;padding:12px;font-weight:650;text-decoration:none;display:inline-flex}.download-image:focus-visible{outline-offset:3px;outline:3px solid #c37b0a}.fullscreen-image{width:100vw;height:100vh;cursor:pointer;background:#000;border:0;outline:none;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;position:fixed;top:0;bottom:0;left:0;right:0;overflow:hidden}.fullscreen-image[open]{justify-content:center;align-items:center;display:flex}.fullscreen-image::backdrop{background:#000}.fullscreen-image img{object-fit:contain;width:100%;height:100%;display:block}.screenshot-hint{left:16px;right:16px;bottom:max(24px, env(safe-area-inset-bottom));color:#fff;text-align:center;pointer-events:none;background:#000b;border-radius:12px;padding:12px;position:absolute}.tutorial-card{touch-action:pan-y;-webkit-user-select:none;user-select:none}.tutorial-card img{-webkit-user-drag:none}.tutorial-stage{width:100%;margin:auto 0;overflow:hidden}.tutorial-track{width:100%;transition:transform .45s cubic-bezier(.22,.61,.36,1);display:flex}.tutorial-stage .tutorial-card{box-sizing:border-box;flex:0 0 100%;width:100%;min-width:0;margin:0}.tutorial-stage .tutorial-card[aria-hidden=true]{pointer-events:none}@media (prefers-reduced-motion:reduce){.tutorial-track{transition:none}}.shell{width:100%;padding:max(clamp(12px, 3vw, 24px), env(safe-area-inset-top)) max(clamp(12px, 4vw, 20px), env(safe-area-inset-right)) max(clamp(16px, 3vw, 24px), env(safe-area-inset-bottom)) max(clamp(12px, 4vw, 20px), env(safe-area-inset-left));flex-direction:column;display:flex}.shell>section{flex:1;min-width:0}header{flex-shrink:0;margin-bottom:clamp(12px,3vh,28px)}h1,p,button,.download-image,.result-details dd{overflow-wrap:anywhere}.onboarding{gap:8px;min-height:0}.tutorial-stage{flex-shrink:0}.tutorial-card img{width:min(60vw,28vh,240px);width:min(60vw,28svh,240px)}.tutorial-actions{flex-wrap:wrap}.tutorial-actions button{min-width:0}.build-tabs button{min-width:0;font-size:clamp(.8rem,3.5vw,1rem)}.character-options{grid-template-columns:repeat(auto-fit,minmax(min(90px,100%),1fr))}.character-option{min-width:0;padding:10px 6px}.option-card{flex-basis:clamp(150px,52vw,176px)}.wish-chip{max-width:100%}.actions>button,.actions>.download-image{text-align:center;flex:140px;justify-content:center}.step-action{bottom:max(8px, env(safe-area-inset-bottom));z-index:4;position:sticky;box-shadow:0 0 0 8px #f3f6ef}.scene figcaption p{margin:.5em 0;font-size:clamp(.75rem,3.6vw,1rem)}@media (max-height:600px){.shell{padding-top:max(12px, env(safe-area-inset-top))}header{margin-bottom:8px}header p{margin:6px 0}h1,.tutorial-dots{margin:12px 0}.tutorial-actions{padding-top:8px}}@media (orientation:landscape) and (max-height:600px){.scene{width:min(100%,75vh);width:min(100%,75svh);margin-inline-start:auto;margin-inline-end:auto}}.music-toggle{top:max(10px, env(safe-area-inset-top));right:max(10px, env(safe-area-inset-right));z-index:8;color:#f2dc9e;background:#103c3dee;border:1px solid #d7bd7d80;border-radius:50%;place-items:center;width:44px;height:44px;min-height:44px;padding:10px;display:grid;position:fixed;box-shadow:0 3px 14px #06282b22}.music-toggle svg{width:22px;height:22px}header{padding-right:44px}