:root { --ink:#201927; --muted:#786d7e; --paper:#fffafc; --purple:#5726a2; --pink:#ee488d; --line:#e8dce7; --lavender:#f3edff; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 7% 0%, #f4e8ff 0, transparent 27rem), var(--paper); font-family:"DM Sans",Arial,sans-serif; }
main, footer { max-width:1240px; margin:auto; padding-left:24px; padding-right:24px; }
.hero { padding:72px 0 35px; max-width:780px; }.eyebrow { color:var(--purple); font:500 .73rem "DM Mono",monospace; letter-spacing:.15em; margin:0 0 14px; }
h1 { font-size:clamp(2.6rem,6vw,5.6rem); line-height:.93; letter-spacing:-.065em; margin:0; } h1 span { color:var(--pink); display:block; }
.lede { color:var(--muted); font-size:1.15rem; line-height:1.55; max-width:580px; margin:24px 0; }.badges { display:flex; gap:8px; flex-wrap:wrap; }.badges span { border:1px solid #d9c8e8; border-radius:999px; color:#624a78; font-size:.78rem; padding:6px 11px; }
.notice { background:#27133f; color:#fff8ff; border-radius:14px; padding:15px 18px; font-size:.92rem; line-height:1.45; margin:0 0 22px; }.notice strong { color:#ffb8d8; }
.studio { display:grid; grid-template-columns:1fr 1.35fr 1.1fr; gap:16px; align-items:start; }.panel { background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:0 8px 22px rgba(65,31,80,.035); }.panel-heading { display:flex; gap:10px; align-items:center; margin-bottom:18px; }.panel-heading h2 { font-size:1.03rem; margin:0; }.step { color:var(--pink); font:500 .75rem "DM Mono",monospace; }
.dropzone { min-height:250px; border:1.5px dashed #c4a4d9; border-radius:11px; display:grid; place-items:center; position:relative; overflow:hidden; cursor:pointer; background:linear-gradient(135deg,#fbf7ff,#fff8fb); text-align:center; padding:16px; }.dropzone input { position:absolute; inset:0; opacity:0; cursor:pointer; }.dropzone img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; }.dropzone strong, .dropzone small { display:block; }.dropzone small,.hint,label span { color:var(--muted); font-size:.76rem; }.upload-mark { color:var(--purple); display:block; font-size:1.9rem; line-height:1; margin-bottom:8px; }.text-button { border:0; background:none; color:var(--purple); padding:12px 0 0; cursor:pointer; }.hint { color:var(--muted); font-size:.8rem; line-height:1.5; }
label { display:block; color:#433747; font-size:.83rem; font-weight:600; margin:16px 0 7px; } textarea,input,select { width:100%; color:var(--ink); border:1px solid #dcd0de; background:#fffdfd; border-radius:8px; padding:10px; font:400 .88rem "DM Sans",sans-serif; outline:none; } textarea { resize:vertical; line-height:1.45; } textarea:focus,input:focus,select:focus { border-color:var(--purple); box-shadow:0 0 0 3px #eee4fb; }.two-up { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.two-up label { margin-top:16px; }.presets { display:flex; flex-wrap:wrap; gap:6px; }.presets button,.secondary { background:var(--lavender); color:var(--purple); border:1px solid #d9c8f3; }.presets button { border-radius:999px; padding:6px 9px; font-size:.72rem; cursor:pointer; }
pre { white-space:pre-wrap; word-break:break-word; min-height:310px; margin:0; padding:15px; background:#201827; color:#f8eefe; border-radius:10px; font:400 .79rem/1.6 "DM Mono",monospace; }.actions { display:flex; gap:8px; margin-top:12px; }.actions button { flex:1; border-radius:8px; padding:10px; font:600 .8rem "DM Sans",sans-serif; cursor:pointer; } #copy-prompt { border:1px solid var(--purple); color:white; background:var(--purple); }.status { color:var(--purple); min-height:1em; font-size:.78rem; }.workflow-link { border-top:1px solid var(--line); padding-top:14px; font-size:.8rem; display:flex; flex-direction:column; gap:4px; }.workflow-link span { color:var(--muted); }.workflow-link a,footer a { color:var(--purple); font-weight:600; }
.guide { padding:72px 0; }.guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }.guide h3 { margin:0 0 8px; font-size:1rem; }.guide article p { color:var(--muted); font-size:.9rem; line-height:1.5; margin:0; } footer { border-top:1px solid var(--line); padding-top:22px; padding-bottom:32px; color:var(--muted); display:flex; justify-content:space-between; gap:15px; font-size:.76rem; }
@media (max-width:900px) { .studio { grid-template-columns:1fr 1fr; }.output-panel { grid-column:span 2; } pre { min-height:200px; } }
@media (max-width:620px) { .hero { padding-top:48px; }.studio,.guide-grid { grid-template-columns:1fr; }.output-panel { grid-column:auto; }.two-up { grid-template-columns:1fr; gap:0; } footer { flex-direction:column; } }