:root { --ink:#5b315f; --paper:#fff7fb; --pink:#ff8fc4; --hot:#f657a4; --lilac:#c6a7ff; --purple:#8566d5; --yellow:#ffe58d; --mint:#bdebdc; --blue:#a8d6ff; --line:#ead7e8; --white:#fffdfd; --shadow:#dcbfe0; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; background-image:radial-gradient(circle at 20% 20%,rgba(255,195,222,.26) 0 2px,transparent 3px),radial-gradient(circle at 80% 40%,rgba(198,167,255,.18) 0 2px,transparent 3px); background-size:36px 36px,46px 46px; }
button,input,textarea,select{font:inherit} button{cursor:pointer} main{min-height:100vh;overflow:hidden}
.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 max(28px,calc((100vw - 1400px)/2));background:rgba(255,250,253,.9);backdrop-filter:blur(14px);border-bottom:2px solid #f3d7e8;position:relative;z-index:5}
.topbar:after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;background:radial-gradient(circle at 10px 0,#f3d7e8 9px,transparent 10px) 0 0/20px 10px repeat-x;opacity:.8}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-weight:900;font-size:20px;letter-spacing:-.8px}.brand i{color:var(--hot);font-family:Georgia,serif}.brand-mark{width:39px;height:39px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;background:linear-gradient(145deg,#fff,var(--pink));color:white;text-shadow:0 1px var(--hot);transform:rotate(-8deg);box-shadow:0 4px 0 #cba5cf}.top-actions{display:flex;align-items:center;gap:18px}.option-count{font-size:10px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:#99759c}.ghost,.reset{border:1.5px solid #d6b5d8;border-radius:999px;background:#fff;padding:10px 17px;color:var(--ink);font-weight:900;box-shadow:0 4px 0 #edd7ec;transition:.18s}.ghost:hover,.reset:hover{transform:translateY(-2px);box-shadow:0 6px 0 #edd7ec}.ghost:active,.reset:active{transform:translateY(2px);box-shadow:0 2px 0 #edd7ec}
.hero{position:relative;max-width:1400px;margin:0 auto;min-height:430px;padding:78px 34px 58px}.hero:before{content:"";position:absolute;width:390px;height:390px;border-radius:50%;background:linear-gradient(145deg,#ffd7e9,#e2d4ff);right:5%;top:16px;filter:blur(1px);opacity:.68}.eyebrow{display:flex;gap:10px;align-items:center;color:var(--hot);font-size:11px;letter-spacing:1.7px;font-weight:900;text-transform:uppercase}.eyebrow b{color:var(--hot);background:#fff;border:1.5px solid #efb5d2;border-radius:50%;width:27px;height:27px;display:grid;place-items:center;font-size:14px;box-shadow:0 3px 0 #f0d7e7}.hero h1{margin:20px 0 20px;font-size:clamp(58px,7vw,105px);line-height:.88;letter-spacing:-7px;font-weight:1000;max-width:980px;position:relative;z-index:1}.hero h1 em{color:var(--hot);font-family:Georgia,serif;font-weight:700;letter-spacing:-6px;text-shadow:3px 3px 0 white}.hero h1 span{color:var(--purple);-webkit-text-stroke:1px var(--ink);text-shadow:4px 4px 0 var(--yellow)}.hero>p{max-width:615px;font-size:18px;line-height:1.6;color:#775c79;margin:0;position:relative;z-index:1}.hero-stickers{position:absolute;right:4%;top:74px;width:28%;height:280px;z-index:1}.hero-stickers span,.hero-stickers i{position:absolute;font-weight:1000;font-style:normal}.hero-stickers span:first-child{right:12%;font-size:66px;color:white;text-shadow:0 3px 0 var(--lilac);transform:rotate(12deg)}.hero-stickers span:nth-child(2){top:112px;right:1%;background:var(--yellow);border:2px solid var(--ink);border-radius:14px;padding:12px 18px;transform:rotate(-6deg);box-shadow:0 6px 0 #cba5cf;font-size:12px;letter-spacing:1px}.hero-stickers span:nth-child(3){top:205px;left:20%;color:var(--hot);font-size:53px;transform:rotate(12deg);text-shadow:2px 2px 0 white}.hero-stickers i{top:192px;right:4%;font-size:34px;background:var(--mint);border:2px solid;border-radius:50%;width:54px;height:54px;display:grid;place-items:center;transform:rotate(9deg);box-shadow:0 5px 0 #add7ca}
.studio{max-width:1400px;margin:0 auto 68px;padding:9px;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(390px,.82fr);background:linear-gradient(135deg,#ffd0e4,#d6c5ff,#bdebdc);border-radius:30px;box-shadow:0 18px 45px rgba(95,46,100,.16)}.controls-panel{background:rgba(255,253,253,.96);padding:36px;border-radius:23px 12px 12px 23px}.panel-heading,.output-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:25px}.step{color:var(--hot);letter-spacing:1.6px;font-size:10px;font-weight:900}h2{margin:7px 0 0;font-size:29px;letter-spacing:-1.3px}.reset{font-size:11px;padding:8px 14px}
.panel-actions{display:flex;align-items:center;gap:9px}.surprise{border:1.5px solid var(--ink);border-radius:999px;background:linear-gradient(135deg,var(--yellow),#ffb8d8);padding:9px 15px;color:var(--ink);font-size:11px;font-weight:1000;box-shadow:0 4px 0 #cba5cf;transition:.18s}.surprise:hover{transform:translateY(-2px);box-shadow:0 6px 0 #cba5cf}.surprise:active{transform:translateY(2px);box-shadow:0 2px 0 #cba5cf}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);background:#faedf5;border:1px solid #eed9e8;padding:5px;border-radius:16px;margin-bottom:28px;gap:5px}.tabs button{border:0;background:transparent;padding:13px 10px;border-radius:11px;color:#a081a2;text-transform:capitalize;font-size:12px;font-weight:900;transition:.2s}.tabs button.active{color:var(--ink);background:#fff;box-shadow:0 3px 10px rgba(98,48,100,.11)}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}label>span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1.1px;font-weight:900;margin-bottom:8px;color:#6d496f}label.wide{grid-column:1/-1}.select-wrap{position:relative}.select-wrap:after{content:"⌄";position:absolute;right:15px;top:50%;transform:translateY(-58%);pointer-events:none;font-size:21px;color:var(--hot)}select,input,textarea{width:100%;border:1.5px solid #e5cfe0;border-radius:13px;background:#fff;color:var(--ink);padding:13px 40px 13px 14px;outline:none;box-shadow:inset 0 -2px 0 #fbecf5}select{appearance:none;min-height:49px}input{padding-right:14px}textarea{min-height:100px;resize:vertical;padding-right:14px;line-height:1.45}select:hover,input:hover,textarea:hover{border-color:#d6acd0}select:focus,input:focus,textarea:focus{border-color:var(--pink);box-shadow:0 0 0 4px rgba(255,143,196,.15)}label small{display:block;margin:6px 0 0 4px;color:#a88da7;font-size:10px}.text-fields{display:grid;gap:17px;margin-bottom:22px}.extras{border-top:2px dashed #efdce9;margin-top:29px;padding-top:26px;display:grid;gap:22px}.range-label span{display:flex;justify-content:space-between}.range-label span b{color:var(--hot)}input[type="range"]{appearance:none;height:7px;padding:0;border:0;border-radius:10px;background:linear-gradient(90deg,var(--pink),var(--lilac),var(--mint));box-shadow:none}input[type="range"]::-webkit-slider-thumb{appearance:none;width:21px;height:21px;border-radius:50%;background:var(--yellow);border:2px solid var(--ink);box-shadow:0 2px 0 #d3aed5}.switch-row{display:flex;align-items:center;gap:15px;position:relative;cursor:pointer}.switch-row>span{flex:1;margin:0;text-transform:none;letter-spacing:0}.switch-row>span b{display:block;font-size:13px}.switch-row>span small{font-weight:400;margin-left:0}.switch-row input{position:absolute;opacity:0}.switch-row i{width:48px;height:27px;border-radius:20px;background:#d8c5d7;position:relative;transition:.2s}.switch-row i:after{content:"♥";font-style:normal;color:#d5b8d3;text-align:center;font-size:11px;line-height:21px;width:21px;height:21px;background:white;border-radius:50%;position:absolute;top:3px;left:3px;transition:.2s;box-shadow:0 1px 4px rgba(70,35,72,.2)}.switch-row input:checked+i{background:var(--pink)}.switch-row input:checked+i:after{left:24px;color:var(--hot)}
.output-panel{background:linear-gradient(160deg,#9b7ce5,#765bc7);color:white;padding:36px;border-radius:12px 23px 23px 12px;position:relative;overflow:hidden}.output-panel:before{content:"";position:absolute;width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.08);right:-90px;top:-70px}.step.light{color:#fff1ad}.live-dot{font-size:9px;font-weight:900;letter-spacing:1px;border:1px solid rgba(255,255,255,.55);border-radius:20px;padding:7px 10px;background:rgba(255,255,255,.1)}.live-dot:before{content:"";display:inline-block;width:6px;height:6px;background:#b8ffcf;border-radius:50%;margin-right:6px;box-shadow:0 0 8px #b8ffcf}
.mini-poster{height:225px;background:linear-gradient(145deg,#fff7fb,#f4e9ff);color:var(--ink);border:0;border-radius:19px;position:relative;margin-bottom:24px;overflow:hidden;box-shadow:0 8px 0 #6549b4,0 12px 25px rgba(49,30,103,.3)}.mini-poster:after{content:"";position:absolute;inset:8px;border:2px dashed #ebc7df;border-radius:13px;pointer-events:none}.poster-copy{position:absolute;left:25px;top:25px;z-index:2;transform:rotate(-2deg)}.poster-copy small{font-weight:1000;letter-spacing:1px;color:#7b5a7d}.poster-copy strong{display:block;font-size:47px;line-height:.78;margin-top:7px;color:var(--hot);-webkit-text-stroke:1px var(--ink);text-shadow:3px 3px 0 white;letter-spacing:-4px}.poster-copy strong i{color:var(--purple);font-family:Georgia,serif;font-size:61px}.poster-copy b{display:block;background:var(--yellow);border:1.5px solid;border-radius:8px;margin-top:9px;padding:5px 8px;font-size:9px;width:max-content;box-shadow:0 3px 0 #d5b3d8}.figure{position:absolute;right:39px;bottom:16px;width:110px;height:184px;z-index:1}.hair{position:absolute;width:76px;height:68px;background:#543046;border-radius:50%;left:16px;z-index:1;box-shadow:-12px 5px 0 -4px #543046,12px 5px 0 -4px #543046}.head{position:absolute;width:49px;height:53px;background:#9a5335;border:2px solid var(--ink);border-radius:48%;top:28px;left:30px;z-index:2}.head:after{content:"♡";position:absolute;right:-16px;top:3px;color:var(--hot);font-size:18px}.body{position:absolute;top:75px;left:18px;width:74px;height:65px;background:var(--pink);border:2px solid var(--ink);border-radius:22px 22px 10px 10px;display:grid;place-items:center;color:white;font-weight:1000;font-size:25px}.leg{position:absolute;top:134px;width:28px;height:42px;background:#a8d6ff;border:2px solid var(--ink)}.leg.l{left:22px;transform:rotate(3deg)}.leg.r{right:22px;transform:rotate(-3deg)}.shoe{position:absolute;bottom:0;width:43px;height:18px;background:white;border:2px solid var(--ink);border-radius:12px 12px 6px 6px}.shoe.sl{left:9px;transform:rotate(-5deg)}.shoe.sr{right:8px;transform:rotate(5deg)}.spark{position:absolute;font-weight:900;color:var(--hot);z-index:2}.spark.one{right:13px;top:11px;font-size:29px}.spark.two{left:9px;bottom:11px;color:var(--purple);font-size:22px}.spark.three{right:8px;bottom:14px;color:var(--yellow);font-size:24px;-webkit-text-stroke:1px var(--ink)}
.prompt-box{background:rgba(70,46,137,.55);border:1px solid rgba(255,255,255,.32);border-radius:17px;overflow:hidden;box-shadow:inset 0 1px rgba(255,255,255,.1)}.prompt-label{display:flex;justify-content:space-between;padding:12px 15px;border-bottom:1px solid rgba(255,255,255,.2);font-size:9px;letter-spacing:1.3px;font-weight:900;color:#f0eaff}pre{font-family:var(--font-geist-mono),monospace;white-space:pre-wrap;word-break:break-word;margin:0;max-height:330px;overflow:auto;padding:18px;font-size:11px;line-height:1.65;color:#fff;scrollbar-color:var(--yellow) transparent}.output-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:17px}.output-actions button{padding:14px;font-weight:900;border:1.5px solid #52395b;border-radius:13px;box-shadow:0 5px 0 #4e3698;transition:.15s}.primary{background:var(--yellow);color:var(--ink)}.secondary{background:#fff;color:var(--ink)}.output-actions button:hover{transform:translateY(-2px);box-shadow:0 7px 0 #4e3698}.output-actions button:active{transform:translateY(3px);box-shadow:0 2px 0 #4e3698}.tip{color:#e9e1ff;font-size:11px;line-height:1.55;margin:19px 3px 0}.tip b{color:white}
footer{max-width:1400px;margin:0 auto;padding:27px 34px 42px;display:flex;align-items:center;gap:28px;font-size:11px;border-top:2px dashed #eddae8}footer>span{font-weight:900;letter-spacing:1.3px;color:var(--hot)}footer p{color:#927893;flex:1}footer button{border:0;background:transparent;color:var(--ink);font-weight:900}
@media(max-width:900px){.hero:before{right:-170px;opacity:.45}.hero-stickers{display:none}.studio{grid-template-columns:1fr;margin:0 16px 55px}.controls-panel{border-radius:23px 23px 12px 12px}.output-panel{border-radius:12px 12px 23px 23px}}
@media(max-width:600px){.topbar{padding:0 17px}.option-count{display:none}.ghost{font-size:0;padding:10px 13px}.ghost:after{content:"✦ Magic";font-size:11px}.hero{padding:58px 19px 40px;min-height:auto}.hero h1{font-size:51px;line-height:.92;letter-spacing:-4px}.hero h1 em{letter-spacing:-3px}.hero>p{font-size:16px}.controls-panel,.output-panel{padding:25px 18px}.field-grid{grid-template-columns:1fr}.field-grid label.wide{grid-column:auto}.output-actions{grid-template-columns:1fr}.mini-poster{height:210px}.poster-copy strong{font-size:42px}.figure{right:22px}footer{align-items:flex-start;flex-wrap:wrap}.tabs button{font-size:10px}.studio{padding:6px;border-radius:25px}h2{font-size:26px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.mini-poster img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;border-radius:19px}
@media(max-width:600px){.ghost:after{content:"✦ Surprise"}.panel-heading{gap:16px}.panel-actions{align-items:flex-end;flex-direction:column}}