@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{--ink:#20251f;--muted:#747a70;--green:#b8f36b;--green-dark:#294e22;--paper:#f7f8f3;--line:#e4e8dd;--white:#fff;--shadow:0 20px 70px rgba(35,49,24,.07)}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;min-height:100vh;overflow-x:hidden}
.ambient{position:fixed;z-index:-1;border-radius:50%;filter:blur(2px);pointer-events:none}
.ambient-one{width:430px;height:430px;background:rgba(184,243,107,.15);top:60px;right:-200px}
.ambient-two{width:320px;height:320px;background:rgba(210,225,190,.25);bottom:30px;left:-190px}
.topbar{height:78px;max-width:1220px;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(225,230,218,.8)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:800 18px 'Manrope',sans-serif;letter-spacing:-.7px}
.brand-mark{width:34px;height:34px;border-radius:11px;background:var(--ink);color:var(--green);display:grid;place-items:center;font-size:19px;position:relative}
.brand-mark span{font-size:11px;position:absolute;right:4px;top:2px}
.brand-ai{color:#858b80;font-weight:500}
.topbar-right{display:flex;align-items:center;gap:22px;font-size:12px}
.privacy-pill{display:flex;align-items:center;gap:8px;border:1px solid #dce4d3;background:rgba(255,255,255,.65);padding:9px 12px;border-radius:30px;color:#52604b}
.status-dot{width:7px;height:7px;border-radius:50%;background:#78bd48;box-shadow:0 0 0 3px #e8f6dd}
.github-link{color:#596153;text-decoration:none;font-weight:700}
.github-link:hover{color:#1b2d16}
.page-shell{max-width:1160px;margin:0 auto;padding:0 28px}
.hero{text-align:center;padding:62px 0 38px}
.eyebrow{display:flex;justify-content:center;align-items:center;gap:9px;font-size:10px;font-weight:800;letter-spacing:2px;color:#65745a}
.eyebrow-line{height:1px;width:25px;background:#9ab77f}
h1{font:800 clamp(38px,5vw,60px)/1.08 'Manrope',sans-serif;letter-spacing:-3px;margin:19px 0 15px}
h1 span{color:#5d8d3c}
.hero-copy{max-width:610px;margin:0 auto;color:#73796e;line-height:1.75;font-size:14px}
.hero-points{display:flex;justify-content:center;flex-wrap:wrap;gap:20px;margin-top:24px;color:#5d6657;font-size:11px;font-weight:600}
.check{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#e4f5d5;color:#477a2e;font-weight:800;margin-right:5px}
.workspace{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.panel{background:rgba(255,255,255,.86);border:1px solid #e7eae2;border-radius:18px;box-shadow:var(--shadow);padding:25px 26px;min-width:0}
.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}
.step-label{font-size:9px;font-weight:800;letter-spacing:1.8px;color:#8b9b7e;margin-bottom:7px}
h2{font:800 18px 'Manrope',sans-serif;letter-spacing:-.6px;margin:0}
.spark-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#f0f8e9;color:#5d8d3c;font-size:20px}
label{display:block;font-size:11px;font-weight:700;color:#42493e;margin:16px 0 8px}
.required{color:#6b9d46}
input,textarea,select{width:100%;border:1px solid #e2e6dc;border-radius:9px;background:#fcfdf9;padding:12px 13px;font:12px 'DM Sans',sans-serif;color:#2d3429;outline:none;transition:border .2s,box-shadow .2s}
input:focus,textarea:focus,select:focus{border-color:#9cc77b;box-shadow:0 0 0 3px rgba(184,243,107,.18)}
input::placeholder,textarea::placeholder{color:#a5aa9f}
textarea{resize:vertical;min-height:118px;line-height:1.6}
select{appearance:auto;cursor:pointer}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{min-width:0}
.textarea-meta{display:flex;justify-content:space-between;font-size:10px;color:#92988c;margin-top:7px}
.generate-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:10px;background:var(--ink);color:white;padding:15px 17px;margin-top:23px;font:700 12px 'DM Sans',sans-serif;cursor:pointer;transition:transform .18s,background .18s}
.generate-btn:hover{background:#34452d;transform:translateY(-1px)}
.generate-btn:disabled{opacity:.65;cursor:wait;transform:none}
.button-spark{color:var(--green);font-size:16px}
.button-arrow{margin-left:auto;color:var(--green);font-size:17px}
.form-note{display:flex;align-items:center;gap:7px;justify-content:center;font-size:10px;color:#92988c;margin:13px 0 0}
.lock-icon{font-size:12px;color:#6e9560}
.output-panel{display:flex;flex-direction:column;min-height:600px}
.output-heading{margin-bottom:16px}
.mode-badge{font-size:8px;letter-spacing:1px;font-weight:800;background:#f2f3ee;color:#7c8275;border-radius:6px;padding:7px 8px}
.mode-badge.local{background:#e8f6dc;color:#477b2f}
.empty-state{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:18px 10px 25px}
.empty-illustration{width:170px;height:145px;position:relative;margin-bottom:20px}
.paper{position:absolute;width:90px;height:116px;border-radius:9px;background:#fff;border:1px solid #e3e8dc;box-shadow:0 8px 25px rgba(42,55,33,.07)}
.paper-back{top:17px;left:33px;transform:rotate(-12deg);background:#f0f7e8}
.paper-front{top:10px;left:55px;transform:rotate(7deg);padding:20px 12px;text-align:left}
.paper-star{font-size:18px;color:#7fae5a;display:block;margin-bottom:14px}
.paper-line{display:block;height:5px;width:58px;border-radius:5px;background:#dce6d4;margin:7px 0}
.paper-line.wide{width:63px;background:#b6d59f}
.paper-line.short{width:38px}
.paper-tag{display:inline-block;margin-top:10px;font-size:7px;color:#638d49;background:#eff8e7;padding:5px;border-radius:4px}
.floating-star{position:absolute;color:#9cc77b}.star-a{left:19px;top:30px;font-size:20px}.star-b{right:7px;bottom:27px;font-size:24px}
.empty-state h3{font:800 16px 'Manrope',sans-serif;letter-spacing:-.5px;margin:0 0 9px}
.empty-state>p{font-size:12px;line-height:1.7;color:#858b7f;max-width:290px;margin:0}
.empty-tip{margin-top:25px;padding:11px 13px;background:#f7f9f3;border:1px solid #edf0e8;border-radius:8px;font-size:10px;color:#7e8676}
.empty-tip span{color:#7ba955;margin-right:5px}
.hidden{display:none!important}
.results{display:flex;flex-direction:column;gap:0}
.result-block{padding:17px 0;border-bottom:1px solid #edf0e9}
.result-label{display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:1.1px;font-weight:800;color:#8a9183}
.result-label>span{color:#81a568}
.copy-btn{margin-left:auto;border:0;background:#f2f6ed;color:#5c7f45;border-radius:6px;padding:6px 8px;font-size:9px;font-weight:700;cursor:pointer}
.copy-btn:hover,.copy-all-btn:hover{background:#e4f2d9}
.result-title{font:700 17px/1.5 'Manrope',sans-serif;margin:12px 0 0;letter-spacing:-.3px}
.result-description{font-size:12px;line-height:1.8;color:#626a5d;white-space:pre-line;margin:12px 0 0}
.tag-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.tag{font-size:10px;background:#f1f6eb;color:#597847;border:1px solid #e5eddb;padding:7px 9px;border-radius:6px}
.copy-all-btn{border:1px solid #e4e9dc;background:#fff;border-radius:6px;padding:7px 10px;color:#67705f;font-size:10px;font-weight:700;margin-top:12px;cursor:pointer}
.result-footer{font-size:10px;color:#8a9184;margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:7px}
.result-check{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#e8f6dc;color:#56853a}
.error-message{margin-top:12px;background:#fff2ee;border:1px solid #f4d7cd;color:#9c4d37;padding:12px;border-radius:8px;font-size:11px;line-height:1.6}
.bottom-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0 35px;padding:20px 22px;background:#eef2e8;border:1px solid #e3e9dc;border-radius:14px}
.bottom-item{display:flex;gap:12px;align-items:center}
.bottom-icon{display:grid;place-items:center;flex:0 0 36px;height:36px;border-radius:10px;background:#fff;color:#638b49;font-size:18px}
.bottom-item strong,.bottom-item span{display:block}
.bottom-item strong{font-size:11px;margin-bottom:5px}.bottom-item div span{font-size:10px;line-height:1.5;color:#818879}
footer{display:flex;justify-content:space-between;padding:0 2px 24px;color:#9ba094;font-size:10px}
footer span:first-child{font-weight:800;color:#6c7663}
@media(max-width:850px){.workspace{grid-template-columns:1fr}.output-panel{min-height:520px}.bottom-strip{grid-template-columns:1fr;gap:16px}.hero{padding-top:48px}}
@media(max-width:560px){.topbar{padding:0 18px;height:68px}.topbar-right{gap:10px}.privacy-pill{font-size:0;padding:9px}.status-dot{width:8px;height:8px}.github-link{font-size:10px}.page-shell{padding:0 15px}.hero{padding:43px 0 30px}h1{letter-spacing:-2px}.hero-copy{font-size:13px}.hero-points{gap:10px;flex-direction:column;align-items:center}.panel{padding:20px 17px}.field-row{grid-template-columns:1fr;gap:0}.output-panel{min-height:500px}.bottom-strip{padding:17px}footer{gap:15px;line-height:1.6;flex-direction:column}}