:root{color-scheme:dark;--bg:#070c14;--surface:#101827;--line:#263447;--teal:#75ecd4;--pink:#ff49b7;--muted:#9aadc4;font:16px/1.5 system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:white}header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 4vw;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:white;font-weight:650}.brand span{display:grid;place-items:center;width:34px;height:38px;border-radius:8px;background:linear-gradient(135deg,var(--teal),#338b88);box-shadow:2px 3px 0 #78315b;color:var(--bg);font-size:23px}nav{display:flex;gap:8px}button,.button,.upload{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:white;font:inherit;font-size:.9rem;text-decoration:none;cursor:pointer}button:hover,.button:hover,.upload:hover{border-color:var(--teal)}button:disabled{opacity:.45;cursor:default}.primary,.upload{background:var(--teal);color:#082323;border-color:var(--teal);font-weight:600}nav .active{color:var(--teal);border-color:var(--teal)}main{max-width:1200px;margin:auto;padding:28px 4vw}h1{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.2;margin:0 0 12px;letter-spacing:-.04em}p{color:var(--muted)}.eyebrow{font-size:.7rem;text-transform:uppercase;letter-spacing:.13em;color:var(--teal);margin-bottom:20px}.heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:15px;margin:24px 0}.grid button{display:block;padding:0;overflow:hidden;text-align:left}.grid img{display:block;width:100%;height:180px;object-fit:cover}.grid span{display:block;padding:10px}.workspace{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:24px}.preview{display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;height:48vh;min-height:200px;overflow:hidden}.preview img{width:100%;height:100%;object-fit:contain}.actions{display:flex;gap:8px;margin-top:12px}.actions .button{margin-left:auto}form{display:flex;flex-direction:column;gap:12px}label{font-weight:600}input,textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:white;font:inherit}textarea{resize:vertical}#login-form{max-width:420px}.small{font-size:.75rem;margin:0}#status{color:var(--teal);min-height:24px}footer{padding:20px 4vw;color:var(--muted);font-size:.7rem;border-top:1px solid var(--line)}[hidden]{display:none!important}:focus-visible{outline:2px solid var(--pink);outline-offset:4px}@media(max-width:720px){header{flex-wrap:wrap}nav{width:100%}nav button{flex:1}.workspace{grid-template-columns:1fr}.preview{height:32vh}main{padding-top:18px}.grid{grid-template-columns:1fr 1fr}}

/* Original generated artwork stays separate from the public photo catalog. */
.inspiration-hero{position:relative;isolation:isolate;min-height:350px;display:flex;align-items:center;overflow:hidden;border:1px solid #2b4b57;border-radius:18px;background:#0b1420;box-shadow:0 16px 60px #0005}
.collage-art{position:absolute;inset:-18px -15px -18px 25%;z-index:-2;overflow:hidden;animation:collage-drift 12s ease-in-out infinite alternate}
.collage-art img{width:100%;height:100%;object-fit:cover;display:block}
.inspiration-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0b1420 0%,#0b1420f5 18%,#0b1420bf 35%,#0b142024 62%,transparent 100%);pointer-events:none}
.inspiration-copy{padding:40px;width:48%;text-shadow:0 2px 18px #0008}
.inspiration-copy h1{font-size:clamp(2rem,4vw,3.2rem);line-height:1.08;max-width:340px}
.inspiration-copy p{font-size:.9rem;color:#d2dde9;max-width:250px;margin:18px 0 0}
.collage-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 25%,#ff49b729,transparent 48%),radial-gradient(ellipse at 35% 80%,#00ffd01f,transparent 50%);mix-blend-mode:screen;animation:collage-light 6s ease-in-out infinite alternate}
.motion-toggle{position:absolute;right:12px;bottom:12px;width:32px;height:32px;padding:0;border-radius:50%;background:#091320bd;backdrop-filter:blur(8px);font-size:14px;color:var(--teal);line-height:1}
.inspiration-hero.motion-paused .collage-art,.inspiration-hero.motion-paused .collage-glow{animation-play-state:paused}
@keyframes collage-drift{from{transform:translate3d(-5px,3px,0) scale(1.02) rotate(-.6deg)}to{transform:translate3d(7px,-6px,0) scale(1.075) rotate(.6deg)}}
@keyframes collage-light{from{opacity:.25}to{opacity:1}}
@media(max-width:720px){.inspiration-hero{min-height:355px;align-items:flex-end}.collage-art{inset:-8px -12px 68px -12px}.inspiration-hero::after{background:linear-gradient(0deg,#0b1420 0%,#0b1420fa 18%,#0b14207a 44%,transparent 72%)}.inspiration-copy{width:100%;padding:24px 24px 30px}.inspiration-copy h1{font-size:2rem;max-width:280px}.inspiration-copy p{margin-top:10px;font-size:.8rem;max-width:240px}.motion-toggle{bottom:14px;right:14px}}
@media(prefers-reduced-motion:reduce){.collage-art,.collage-glow{animation:none}.motion-toggle{display:none}}

.water-motion,.aurora-motion,.sand-motion{position:absolute;pointer-events:none;mix-blend-mode:screen;will-change:transform,opacity}
.water-motion{left:0;top:28%;width:32%;height:38%;border-radius:30%;background:repeating-radial-gradient(ellipse at 8% 100%,transparent 0 19px,#48ffe626 21px,#7cf9ff38 23px,transparent 28px 46px);filter:blur(2px);transform:rotate(16deg);animation:water-flow 5s ease-in-out infinite alternate;mask-image:radial-gradient(ellipse,#000 10%,transparent 70%)}
.aurora-motion{left:32%;top:5%;width:36%;height:38%;background:repeating-linear-gradient(102deg,transparent 0 26px,#1fffc224 42px,#7afde937 53px,transparent 79px);filter:blur(9px);mask-image:radial-gradient(ellipse,#000,transparent 70%);animation:aurora-flow 9s ease-in-out infinite alternate}
.sand-motion{right:0;bottom:6%;width:31%;height:35%;background:repeating-linear-gradient(155deg,transparent 0 14px,#ffd08028 17px,transparent 21px 40px);filter:blur(3px);mask-image:radial-gradient(ellipse,#000,transparent 70%);animation:sand-flow 7s ease-in-out infinite alternate}
@keyframes water-flow{from{transform:translate(-10px,9px) rotate(16deg);opacity:.2}to{transform:translate(12px,-12px) rotate(18deg);opacity:.8}}
@keyframes aurora-flow{from{transform:translateX(-15px) skewX(-6deg);opacity:.3}to{transform:translateX(15px) skewX(9deg);opacity:.85}}
@keyframes sand-flow{from{transform:translate(-14px,3px);opacity:.15}to{transform:translate(14px,-6px);opacity:.6}}
.inspiration-hero.motion-paused .water-motion,.inspiration-hero.motion-paused .aurora-motion,.inspiration-hero.motion-paused .sand-motion{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.water-motion,.aurora-motion,.sand-motion{animation:none;display:none}}

.fog-motion{position:absolute;left:0;bottom:1%;width:38%;height:35%;pointer-events:none;background:radial-gradient(ellipse at 20% 55%,#d5efff70,transparent 42%),radial-gradient(ellipse at 65% 40%,#e2f5ff60,transparent 46%),radial-gradient(ellipse at 90% 65%,#cedde948,transparent 35%);filter:blur(9px);mask-image:radial-gradient(ellipse,#000,transparent 70%);animation:forest-fog 14s ease-in-out infinite alternate}
@keyframes forest-fog{from{transform:translate3d(-20px,5px,0);opacity:.18}to{transform:translate3d(24px,-8px,0);opacity:.55}}
.inspiration-hero.motion-paused .fog-motion{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.fog-motion{animation:none;display:none}}

.petal-drop{position:absolute;top:10%;width:4px;height:7px;border-radius:60% 40% 60% 60%;background:linear-gradient(140deg,#fff,#e2a8ff88);box-shadow:0 0 5px #ffa4e4;pointer-events:none;animation:petal-drip 5s ease-in infinite;opacity:0}
.drop-one{right:15%}.drop-two{right:8%;top:16%;animation-delay:1.8s}.drop-three{right:21%;top:7%;animation-delay:3.2s}
@keyframes petal-drip{0%{transform:translate(0,0);opacity:0}15%{opacity:.8}65%{transform:translate(13px,35px);opacity:.75}85%,100%{transform:translate(16px,65px);opacity:0}}
.inspiration-hero.motion-paused .petal-drop{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.petal-drop{animation:none;display:none}}