:root{color-scheme:dark;--bg:#080717;--panel:#11132b;--text:#faf8ff;--muted:#c9c7e4;--cyan:#5ae8ff;--purple:#9d31ec}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:16px/1.6 Inter,'Segoe UI',Arial,Helvetica,sans-serif;background:radial-gradient(ellipse at 10% 9%,#2e125a,transparent 40%),radial-gradient(ellipse at 100% 45%,#052e53,transparent 38%),var(--bg);color:var(--text)}a{color:inherit}button,input,textarea,select{font:inherit}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #e5ff75;outline-offset:3px}.skip{position:absolute;top:-80px;left:10px;background:#fff;color:black;padding:12px;z-index:15}.skip:focus{top:10px}
header{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:18px max(24px,calc((100% - 1390px)/2));border-bottom:1px solid #8730d9;background:#09081fd9;box-shadow:0 0 25px #8b2ae52c}header .logo{text-decoration:none;font-weight:950;letter-spacing:.4px;font-style:italic;font-size:29px;text-shadow:0 0 15px #a95fff}header .logo span{font-size:20px;color:#7bf1ff}header nav{display:flex;gap:22px}header nav a{font-size:13px;font-weight:800;text-decoration:none;color:#dedbf0}header nav a:hover{color:var(--cyan)}.pill{border:1px solid #62479d;border-radius:50px;padding:7px 13px;font-size:10px;font-weight:900;letter-spacing:1px;color:#9aebfc}
main{max-width:1430px;padding:0 25px;margin:auto}.intro{max-width:1160px;padding:100px 10px 75px}.eyebrow{font-size:12px;letter-spacing:1.5px;font-weight:900;color:var(--cyan)}h1{font-size:clamp(43px,6vw,82px);font-weight:950;letter-spacing:-3px;line-height:1.04;margin:22px 0}h1 span{background:linear-gradient(90deg,#f4bbff,#ca5efb,#76e9fa);color:transparent;background-clip:text;-webkit-background-clip:text}.intro p{font-size:clamp(16px,1.6vw,20px);color:var(--muted);max-width:780px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 18px;border-radius:11px;font-size:13px;font-weight:850;text-decoration:none;color:#fff;border:1px solid transparent}.btn.primary{background:linear-gradient(115deg,#ae13ed,#028bd4);box-shadow:0 0 17px #791bc968}.btn.secondary{background:#151531;border-color:#7855ac}.btn:hover{filter:brightness(1.15)}.badges{display:flex;flex-wrap:wrap;gap:11px;margin-top:30px}.badges span{font-size:12px;padding:7px 12px;border-radius:30px;background:#22173f;border:1px solid #463e81;color:#ddd9ef}
.panel{border:1px solid #793bba;border-radius:24px;padding:37px;background:linear-gradient(120deg,#181037,#091a35);box-shadow:0 0 45px #4c0a9930}.head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:32px;flex-wrap:wrap}.head h2,.process h2,.constraints h2,.close h2{font-size:clamp(27px,3vw,41px);line-height:1.12;letter-spacing:-1px;margin:12px 0}.head p,.constraints p,.process p{max-width:760px;color:var(--muted)}.availability{border:1px solid #38cca3;color:#b4ffda;background:#0a322a;border-radius:30px;font-size:11px;font-weight:900;letter-spacing:.5px;padding:8px 11px}
.builder{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(340px,1.2fr);gap:24px}.builder-options{border:1px solid #4e438e;background:#0b1130;border-radius:18px;padding:23px}.builder-options form label,.snippet-area label{display:block;margin:10px 0 7px;font-size:13px;font-weight:800}.builder-options form label span{font-weight:500;color:#b9b5d3}.builder-options form input,.builder-options form select,.snippet-area textarea{width:100%;border:1px solid #5369aa;background:#101431;color:#f8f7ff;padding:11px;border-radius:10px;min-height:48px}.builder-options form button{margin-top:15px;width:100%}.note{font-size:12px;color:#b5b1d1;margin:9px 0 15px}.snippet-area{border-top:1px solid #4d427b;margin-top:20px;padding-top:18px}.snippet-area textarea{resize:vertical;min-height:150px;font:12px/1.6 Consolas,'Courier New',monospace}.snippet-area .btn{font-size:11px}.feedback{min-height:20px;color:#a6f9e9;font-size:13px}
.preview-panel{border:1px solid #474e98;border-radius:18px;background:#0b1230;padding:21px;min-width:0}.preview-label{font-size:12px;letter-spacing:1.1px;font-weight:900;color:#98eaff}.preview-disclosure{font-size:12px;color:#bbb5d1;margin:18px 0 0}.process{padding:100px 10px 65px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-top:24px}.steps article{border:1px solid #4f438b;padding:25px;border-radius:17px;background:#14102f}.steps strong{font-size:13px;color:#83e9ff}.steps h3{font-size:19px;margin:17px 0 9px}.steps p{font-size:14px}.constraints{display:grid;grid-template-columns:1fr 1fr;gap:40px}.tags{display:flex;flex-wrap:wrap;gap:10px}.tags span{border-radius:30px;padding:8px 12px;border:1px solid #5d499b;background:#231a49;color:#d8d5ed;font-size:12px}.close{text-align:center;padding:115px 15px 100px}.close p{color:var(--muted)}.close .actions{justify-content:center}
footer{border-top:1px solid #573a84;display:flex;justify-content:space-between;flex-wrap:wrap;gap:15px;padding:26px max(24px,calc((100% - 1390px)/2)) 40px;color:#b7b3d6;font-size:12px}footer a{text-decoration:none;color:#fff;font-weight:900;font-style:italic;font-size:20px}
@media(max-width:1000px){.builder{grid-template-columns:1fr}.steps{grid-template-columns:repeat(2,1fr)}.constraints{grid-template-columns:1fr}}@media(max-width:620px){header{padding:15px}header nav{width:100%;gap:12px;justify-content:center;flex-wrap:wrap}.pill{display:none}header .logo{font-size:24px}main{padding:0 14px}.intro{padding:60px 4px 55px}h1{font-size:clamp(40px,10vw,52px);letter-spacing:-2px}.panel{padding:19px}.builder-options,.preview-panel{padding:15px}.steps{grid-template-columns:1fr}.actions .btn{width:100%}.process{padding:65px 4px 40px}.constraints{gap:15px}.close{padding:75px 10px}footer{padding:25px 18px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}