:root { color-scheme:light; --ink:#382c55; --purple:#8054bb; --purple-dark:#614194; --lav:#f0e7ff; --mint:#d6f9dc; --white:#fff; --border:#e8def3; }
* { box-sizing:border-box; }
html { min-height:100%; background:#fcf9ff; }
body { margin:0; min-height:100vh; color:var(--ink); font-family: ui-rounded, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: radial-gradient(ellipse at 6% 4%,#f5e6ff,transparent 40%), radial-gradient(ellipse at 99% 13%,#fff0d6,transparent 42%),#fcf9ff; }
button,input { font:inherit; }
button { cursor:pointer; touch-action:manipulation; }
button:disabled { opacity:.55; cursor:not-allowed; }
.hidden { display:none!important; }
.app-shell { max-width:1120px; padding:clamp(16px,4vw,34px); padding-bottom:56px; margin:0 auto; }
.brand { display:flex; align-items:center; gap:16px; margin:12px 0 32px; }
.brand-icon { display:grid; place-items:center; width:82px; height:82px; border-radius:24px; font-size:45px; background:#eadcff; box-shadow:0 9px 23px #a683cc30; }
h1,h2,h3,p { margin-top:0; }
h1 { margin:4px 0 0; font-size:clamp(30px,5vw,49px); line-height:1; letter-spacing:-.04em; color:#5b3c88; }
h1 span { font-size:.57em; vertical-align:top; }
.eyebrow { color:#9475b2; font-size:11px; font-weight:900; letter-spacing:.22em; }
h2 { font-size:clamp(22px,3vw,29px); margin-bottom:7px; color:#53397e; letter-spacing:-.02em; }
.intro p,.panel p { color:#806b99; line-height:1.5; }
.intro { margin-bottom:20px; }
.panel { background:#fff; border:2px solid var(--border); border-radius:30px; padding:clamp(18px,3vw,26px); box-shadow:0 12px 28px #69518e12; }
.center { max-width:560px; margin:30px auto; text-align:center; padding:36px; }
.center p { max-width:400px; margin:10px auto 20px; }
.big-emoji { font-size:78px; margin:12px 0 16px; }
.activate-form { display:flex; flex-direction:column; gap:10px; max-width:330px; text-align:left; margin:20px auto; }
.activate-form label { font-weight:800; font-size:14px; }
.activate-form input { width:100%; border:2px solid var(--border); border-radius:14px; padding:14px; font-size:16px; }
.maker-grid { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:22px; }
.step-label { font-size:17px; font-weight:900; display:flex; align-items:center; gap:10px; margin:0 0 15px; }
.step-bubble { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--lav); color:var(--purple-dark); }
.dropzone { display:block; height:260px; overflow:hidden; cursor:pointer; border:3px dashed #cdb5eb; border-radius:22px; background:#faf6ff; }
.dropzone:active { background:#f3e8ff; }
#upload-placeholder { width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:9px; text-align:center; padding:10px; }
#upload-placeholder strong { font-size:20px; }
#upload-placeholder>span:last-child { color:#9685a7; font-size:14px; }
.upload-icon { font-size:58px; }
.photo-preview,.puppy-animation { height:100%; width:100%; object-fit:contain; }
.hint { color:#8e7c9e; font-size:13px; line-height:1.45; margin-top:13px; }
.moves-title { margin-top:25px; }
.move-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.move { display:flex; align-items:center; justify-content:center; gap:6px; background:#fbf8ff; border:2px solid #e6d9f6; padding:13px 7px; font-weight:800; font-size:14px; color:#665080; border-radius:15px; }
.move span { font-size:22px; }
.move.selected { border-color:#8a61c1; background:#efe4ff; color:#54367e; }
.primary { background:linear-gradient(130deg,#9364cf,#6e49ad); color:white; border:0; padding:15px 20px; border-radius:16px; font-size:17px; font-weight:900; box-shadow:0 8px 20px #8b67b53f; }
.primary:active { transform:scale(.99); }
.make-button { width:100%; margin-top:22px; padding:18px 14px; }
.result-canvas { width:100%; aspect-ratio:1; max-height:440px; border-radius:24px; overflow:hidden; background:linear-gradient(145deg,#fff1dc,#f0e5ff 65%,#e5f7f0); display:grid; place-items:center; }
.result-empty,.busy { text-align:center; padding:30px; display:flex; flex-direction:column; gap:10px; align-items:center; }
.result-empty>span { font-size:92px; }
.result-empty strong { font-size:22px; color:#624888; }
.result-empty p { font-size:14px; margin:0; }
.busy h3 { font-size:23px; margin:0; }
.busy p { font-size:14px; max-width:240px; }
.floating-paw { font-size:80px; animation:bob 1.1s ease-in-out infinite alternate; }
@keyframes bob { 0%{transform:translateY(8px) rotate(-12deg)}100%{transform:translateY(-10px) rotate(12deg)} }
.result-actions { display:flex; gap:10px; margin-top:14px; }
.secondary { flex:1; color:#704b9e; border:2px solid #e5d4f7; background:#faf5ff; font-weight:800; padding:13px 10px; border-radius:15px; }
.privacy { margin-bottom:0; }
.message { max-width:680px; background:#fff7e9; color:#6d4a22; border:2px solid #f5e1b8; border-radius:15px; padding:13px 19px; margin:20px auto; text-align:center; font-weight:750; }
.small { font-size:12px!important; }
footer { color:#a191b4; font-size:12px; text-align:center; margin-top:28px; }
@media(max-width:740px) { .maker-grid{grid-template-columns:1fr} .brand-icon{width:60px;height:60px;font-size:35px;} .brand{gap:10px;margin-bottom:25px;} .dropzone{height:230px;} .result-canvas{max-height:none;} }
@media(prefers-reduced-motion:reduce) { .floating-paw { animation:none; } }