:root { --ink:#261b25; --pink:#ef3f8d; --hot:#ff187a; --cream:#fffaf4; --plum:#4d183b; --line:#eadde3; --muted:#786974; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
button,textarea,input { font:inherit; }
button { cursor:pointer; }
.topbar { height:76px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #eadde3; background:rgba(255,250,244,.94); position:sticky; top:0; z-index:20; backdrop-filter:blur(16px); }
.brand { color:var(--ink); text-decoration:none; display:grid; grid-template-columns:30px auto; font-weight:900; letter-spacing:.09em; line-height:1; }
.brand .spark { grid-row:1/3; font-size:26px; color:var(--pink); align-self:center; }
.brand small { font-size:8px; letter-spacing:.32em; margin-top:5px; color:var(--pink); }
.header-actions { display:flex; gap:18px; align-items:center; }
.status { color:var(--muted); font-size:12px; }.status i{display:inline-block;width:7px;height:7px;background:#42b883;border-radius:50%;margin-right:6px}
.ghost { border:1px solid var(--line); background:white; border-radius:99px; padding:10px 17px; color:var(--ink); font-weight:700; }
.hero { padding:76px 5vw 48px; background:radial-gradient(circle at 85% 20%,#ffdcea 0,transparent 28%),linear-gradient(135deg,#fffaf4,#fff3f7); border-bottom:1px solid var(--line); }
.kicker,.section-head p,.preview-title p { font-size:11px; letter-spacing:.25em; font-weight:900; color:var(--pink); }
h1 { font-family:Georgia,serif; font-size:clamp(46px,6.2vw,84px); line-height:.94; letter-spacing:-.045em; margin:18px 0; max-width:900px; font-weight:500; }
h1 em { color:var(--pink); font-weight:500; }
.lede { color:var(--muted); max-width:620px; font-size:18px; line-height:1.55; }
.project-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:42px; max-width:1200px; }
.project { position:relative; text-align:left; border:1px solid var(--line); background:white; border-radius:14px; padding:18px; min-height:122px; color:var(--ink); transition:.2s ease; box-shadow:0 4px 18px rgba(57,20,43,.03); }
.project:hover { transform:translateY(-2px); border-color:#f6a8ca; }.project.active { border:2px solid var(--pink); background:#fff5f9; padding:17px; box-shadow:0 8px 25px rgba(239,63,141,.13); }
.project-icon { display:block; color:var(--pink); font-size:22px; margin-bottom:16px; }.project b,.project small{display:block}.project b{font-size:14px}.project small{color:var(--muted);font-size:10px;margin-top:6px}.check{display:none;position:absolute;right:10px;top:10px;background:var(--pink);color:white;width:20px;height:20px;text-align:center;border-radius:50%;font-size:12px;line-height:20px}.active .check{display:block}
.workspace { max-width:1400px; margin:auto; padding:64px 5vw 100px; display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:72px; align-items:start; }
.form-section { display:grid; grid-template-columns:180px minmax(0,1fr); gap:30px; padding:0 0 55px; margin-bottom:55px; border-bottom:1px solid var(--line); }
.section-head p { margin:2px 0 10px; font-size:9px; }.section-head h2,.preview h2 { font-family:Georgia,serif; font-size:27px; font-weight:500; margin:0; text-transform:capitalize; }
.fields { min-width:0; }.field+ .field { margin-top:30px; }.field label { display:block; font-size:12px; font-weight:800; margin-bottom:12px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }.chips button { border:1px solid var(--line); background:white; border-radius:99px; padding:9px 12px; color:#554750; font-size:12px; transition:.15s; }.chips button span{color:#ad9aa6;margin-left:7px}.chips button:hover{border-color:#ef91b9}.chips button.selected{background:var(--plum);border-color:var(--plum);color:white}.chips button.selected span{color:#f7bfd9}
textarea,input[type=number] { width:100%; border:1px solid var(--line); background:white; border-radius:12px; padding:14px; color:var(--ink); outline:none; resize:vertical; }textarea:focus,input:focus{border-color:var(--pink);box-shadow:0 0 0 3px #ffe0ee}input[type=number]{width:110px}
.switch { border:0;background:#efe6ea;border-radius:99px;padding:6px 14px 6px 6px;color:var(--muted);font-size:12px;font-weight:700}.switch span{display:inline-block;width:24px;height:24px;background:white;border-radius:50%;vertical-align:middle;margin-right:8px;box-shadow:0 2px 8px #cebfc7}.switch.on{background:var(--pink);color:white}
.preview { position:sticky; top:108px; }.preview-card { background:var(--plum); color:white; padding:28px; border-radius:20px; box-shadow:0 20px 50px rgba(57,20,43,.2); }.preview-title { display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:20px}.preview-title p{margin:0 0 8px;color:#ff83bb}.preview-title h2{font-size:26px}.preview-title>span{background:rgba(255,255,255,.12);padding:6px 9px;border-radius:99px;font-size:10px;color:#f2ccdF}
.prompt-text { margin:22px 0; max-height:380px; overflow:auto; font-family:Georgia,serif; font-size:15px; line-height:1.75; color:#fff5fa; padding-right:8px; }.prompt-text::-webkit-scrollbar{width:5px}.prompt-text::-webkit-scrollbar-thumb{background:#a35d88;border-radius:10px}
.copy { width:100%; border:0; border-radius:10px; padding:14px; background:var(--pink); color:white; font-weight:900; box-shadow:0 6px 18px rgba(255,24,122,.24); }.copy:hover{background:var(--hot)}
.tip { background:rgba(255,255,255,.08); padding:13px; border-radius:9px; font-size:10px; line-height:1.5; color:#dfbfd2; margin:14px 0 0; }.tip b{color:white;display:block;margin-bottom:2px}
.quality { display:flex;gap:12px;padding:18px 8px}.quality>span{color:var(--pink)}.quality b{font-size:11px}.quality p{font-size:10px;line-height:1.45;color:var(--muted);margin:4px 0}
footer{background:#24131f;color:#d8bdcd;padding:32px 5vw;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.15em}footer span{color:white;font-weight:900}footer p{margin:0}
@media(max-width:1000px){.project-grid{grid-template-columns:repeat(3,1fr)}.workspace{grid-template-columns:1fr;gap:30px}.preview{position:relative;top:auto;order:-1}.form-section{grid-template-columns:150px 1fr}}
@media(max-width:650px){.topbar{padding:0 20px}.status{display:none}.hero{padding:52px 20px 34px}.project-grid{grid-template-columns:1fr 1fr;margin-top:30px}.project{min-height:105px;padding:14px}.workspace{padding:38px 20px 70px}.form-section{grid-template-columns:1fr;gap:20px;margin-bottom:38px;padding-bottom:38px}h1{font-size:47px}.lede{font-size:15px}footer{display:block;text-align:center}footer p{margin-top:10px}}