:root{color-scheme:light;--ink:#18263c;--muted:#65758b;--blue:#176cf2;--line:#dce5f0;--surface:#f4f7fb}*{box-sizing:border-box}body{margin:0;background:var(--surface);color:var(--ink);font:14px/1.6 "Segoe UI",Arial,sans-serif}.page{max-width:780px;margin:0 auto;padding:32px 24px 20px}.brand{display:flex;align-items:center;justify-content:space-between;gap:12px}.brand-name{font-size:25px;font-weight:650;letter-spacing:-1px;display:flex;align-items:center}.brand-dot{display:inline-block;width:19px;height:19px;margin:0 3px;border:5px solid #167cf4;border-right-color:#6254f4;border-radius:50%}.badge{padding:5px 10px;border:1px solid #d7e5fe;background:#eef5ff;color:#2963ad;font-size:11px;border-radius:7px;white-space:nowrap}.intro{margin:30px 0 24px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.5px;color:#2864b0}h1{font-size:28px;line-height:1.25;letter-spacing:-.65px;margin:9px 0 11px}p{margin:5px 0;color:var(--muted)}.intro p{max-width:600px}.steps{display:flex;list-style:none;padding:0;margin:0 0 20px;border:1px solid var(--line);border-radius:10px;background:#fff}.steps li{flex:1;display:flex;align-items:center;gap:8px;padding:12px;font-size:11px;color:var(--muted)}.steps span{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;flex:0 0 23px;border:1px solid var(--line);border-radius:50%;font-weight:650}.steps .active{color:#165fc6}.steps .active span{background:#eaf2ff;border-color:#a5c8ff}.card{padding:25px;background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:0 8px 30px #20365507}.card-heading{display:flex;gap:13px;align-items:center;margin-bottom:22px}.icon{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;background:#edf4ff;color:var(--blue);border:1px solid #dae8ff;border-radius:10px}svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.icon svg{width:24px;height:24px}h2{font-size:16px;line-height:1.4;margin:0}.card-heading p{font-size:12px;margin:4px 0 0}label{display:block;font-size:12px;font-weight:650;margin:16px 0 7px}.optional{margin-left:6px;font-size:10px;color:var(--muted);font-weight:400}input,textarea{display:block;width:100%;border:1px solid #ccd8e7;background:#fff;border-radius:8px;color:var(--ink);padding:11px 12px;font:13px/1.5 "Segoe UI",Arial,sans-serif}textarea{resize:vertical;min-height:105px;font:12px/1.6 Consolas,monospace;overflow-wrap:anywhere}input:focus,textarea:focus{outline:3px solid #167cf413;border-color:#629ff4}input::placeholder,textarea::placeholder{color:#93a0b2}.hint{font-size:11px;color:var(--muted);margin-top:9px;line-height:1.75}.primary,.secondary{font:600 12px/1.5 "Segoe UI",Arial,sans-serif;border-radius:8px;padding:10px 15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:1px solid transparent}.primary{background:var(--blue);color:white}.primary:hover{background:#0e5bd4}.secondary{border-color:#cdd9e8;color:#325274;background:white}.primary:disabled{opacity:.6;cursor:wait}#generate{margin-top:20px;min-width:213px}#message{padding:10px 12px;border-radius:8px;font-size:12px;margin:15px 0 0;background:#fff4f0;color:#974322;border:1px solid #f2d8cc}#message.good{background:#edf8f3;color:#24704a;border-color:#d3ebdf}.result{margin-top:23px;padding-top:22px;border-top:1px solid var(--line)}.result-top{display:flex;justify-content:space-between;gap:10px;align-items:center}.result-top h2{color:#21674d}.result>p{font-size:12px;margin-top:7px}.result textarea{background:#f8fbff;min-height:116px}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.next{background:#f3f7fe;border:1px solid #e0eafa;border-radius:9px;margin-top:19px;padding:13px}h3{font-size:12px;margin:0 0 5px}.next p{font-size:12px;line-height:1.7}.note{font-size:11px;color:#66788e;margin:18px 4px;line-height:1.8}footer{padding-top:14px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;color:#75859b;font-size:10px}footer p{flex:1 1 100%;font-size:10px;line-height:1.7}button:focus-visible{outline:3px solid #6aa5ff;outline-offset:3px}[hidden]{display:none!important}@media(max-width:520px){.page{padding:20px 15px}.brand-name{font-size:22px}.brand>.badge{font-size:9px;padding:4px 7px}h1{font-size:24px}.intro{margin:24px 0 20px}.steps li{flex-direction:column;text-align:center;gap:5px;padding:10px 5px;font-size:10px}.card{padding:18px;border-radius:12px}.card-heading{gap:10px}h2{font-size:15px}.result-top{align-items:flex-start;flex-direction:column}#generate{width:100%}}