:root { --ink:#3c1830; --muted:#7b596c; --paper:#fffafd; --pink:#ed4d94; --pink2:#ffb7d4; --line:#edcad9; --shadow:rgba(104,28,67,.13); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 10% 0%, #ffe2ef 0, transparent 30%),radial-gradient(circle at 95% 8%, #eee0ff 0, transparent 28%),#fff8fb; font-family:Arial,Helvetica,sans-serif; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
main { max-width:1180px; margin:auto; padding:34px 24px 64px; }
.hero { display:flex; justify-content:space-between; gap:24px; align-items:end; margin-bottom:28px; }
.hero div { max-width:730px; }
.eyebrow { color:#b62667; text-transform:uppercase; letter-spacing:.15em; font-size:.75rem; font-weight:700; }
h1 { margin:.35rem 0 .55rem; font-family:Georgia,serif; font-size:clamp(2.3rem,5vw,4.6rem); line-height:.96; color:#76184a; }
.hero p { margin:0; color:var(--muted); font-size:1.08rem; line-height:1.6; }
.button { border:0; border-radius:14px; padding:13px 18px; font-weight:700; color:white; background:linear-gradient(135deg,#c82370,#ef5fa0); box-shadow:0 8px 20px rgba(181,34,102,.22); }
.button:hover { transform:translateY(-1px); }
.sparkle { white-space:nowrap; }
.studio { display:grid; grid-template-columns:minmax(0,1fr) minmax(350px,.82fr); gap:24px; align-items:start; }
.controls,.prompt-panel { background:rgba(255,255,255,.82); border:1px solid rgba(202,127,163,.28); border-radius:24px; padding:24px; box-shadow:0 18px 50px var(--shadow); backdrop-filter:blur(12px); }
.controls { display:grid; gap:18px; }
label,legend { display:grid; gap:8px; font-weight:700; }
small { color:var(--muted); font-weight:400; }
fieldset { border:0; padding:0; margin:0; }
input[type=text],input:not([type]),select,textarea { width:100%; border:1px solid #e5bed1; border-radius:12px; padding:11px 12px; color:var(--ink); background:white; outline:none; }
input:focus,select:focus,textarea:focus { border-color:#d6387e; box-shadow:0 0 0 3px rgba(214,56,126,.13); }
.chips,.palettes,.toggles { display:flex; flex-wrap:wrap; gap:8px; }
.chip { border:1px solid #e7bfd2; background:#fff7fb; color:#70405a; border-radius:999px; padding:8px 11px; text-transform:capitalize; }
.chip.active { color:white; border-color:#c92b70; background:#c92b70; }
.palettes { gap:10px; }
.palette { width:82px; height:52px; border:3px solid white; border-radius:12px; box-shadow:0 0 0 1px #dcb5c7; display:flex; align-items:end; padding:0; overflow:hidden; }
.palette span { width:100%; padding:3px; background:rgba(255,255,255,.86); color:#4c263b; font-size:.67rem; font-weight:700; }
.palette.active { box-shadow:0 0 0 3px #bd2869; }
.custom-color { display:flex; flex-direction:column; font-size:.75rem; color:var(--muted); }
.custom-color input { width:82px; height:34px; padding:2px; border:1px solid #e0b6ca; border-radius:9px; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
input[type=range] { accent-color:#d42d77; width:100%; }
.toggles label { display:flex; align-items:center; gap:7px; background:#fff0f7; border-radius:10px; padding:9px 11px; font-weight:600; }
.toggles input { accent-color:#d42d77; }
.result { position:sticky; top:20px; display:grid; gap:18px; }
.page-preview { --accent:#ee5f9f;--soft:#ffd4e6; width:min(100%,380px); margin:auto; aspect-ratio:4/5; position:relative; overflow:hidden; border-radius:26px; background:linear-gradient(145deg,#fff,var(--soft)); border:10px solid var(--accent); box-shadow:0 20px 50px rgba(92,28,60,.2),inset 0 0 28px rgba(255,255,255,.8); }
.lines { position:absolute; inset:22% 14% 12%; background:repeating-linear-gradient(to bottom,transparent 0 23px,color-mix(in srgb,var(--accent) 42%,transparent) 23px 24px); }
.page-quote { position:absolute; z-index:2; top:7%; left:13%; right:13%; text-align:center; color:color-mix(in srgb,var(--accent) 70%,#55152f); font-family:Georgia,serif; font-weight:700; font-size:clamp(.8rem,2.2vw,1.2rem); }
.dec { position:absolute; z-index:3; font-size:2rem; filter:drop-shadow(0 3px 3px rgba(80,20,50,.2)); }.d1{top:3%;left:4%}.d2{top:3%;right:4%}.d3{bottom:3%;left:4%}.d4{bottom:3%;right:4%}
.prompt-panel { padding:18px; }
.prompt-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.prompt-heading h2 { margin:0; font-family:Georgia,serif; color:#741647; }
.prompt-heading span { color:var(--muted); font-size:.78rem; }
textarea { min-height:190px; resize:vertical; line-height:1.5; }
.copy { width:100%; margin-top:10px; }
.status { min-height:1.3em; text-align:center; color:var(--muted); font-size:.85rem; margin:9px 0 0; }
@media (max-width:800px){.hero{align-items:start;flex-direction:column}.studio{grid-template-columns:1fr}.result{position:static}.result{order:-1}.page-preview{width:min(100%,330px)}}
@media (max-width:480px){main{padding:24px 14px 44px}.controls,.prompt-panel{padding:17px;border-radius:18px}.two-col{grid-template-columns:1fr}.hero{margin-bottom:20px}}