*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:14px Arial,Helvetica,sans-serif;color:#081747;background:#fff}button,input,textarea{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}.header{height:58px;border-bottom:1px solid #e5eaf6}.header-inner{max-width:1410px;height:100%;margin:auto;display:flex;align-items:center;gap:22px;padding:0 18px}.brand img{height:42px;max-width:215px;object-fit:contain}.divider{height:30px;border-left:1px solid #c5d2e9}.header-inner>b{font-size:22px}.header nav{margin-left:auto;display:flex;gap:30px;font-size:13px}.header nav a:hover{color:#087aff}.hero{background:radial-gradient(ellipse 300px 170px at 0 120%,#c1c0ff 0 68%,transparent 69%),radial-gradient(ellipse 370px 180px at 102% -20%,#d5c1ff 0 65%,transparent 66%),linear-gradient(110deg,#e0dfff,#e9f5ff 60%,#e0dcff);min-height:132px}.hero-inner{max-width:1410px;margin:auto;display:flex;align-items:center;gap:42px;padding:14px 18px}.hero-illustration{width:285px;min-width:285px;display:flex;align-items:center;justify-content:center;gap:18px}.file-symbol{height:96px;width:92px;background:#fff;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 12px #5b79b51a}.file-symbol span{font-size:24px;font-weight:800;color:#fff;padding:9px 11px}.file-symbol strong{font-size:19px;color:#fff;padding:5px 14px}.css-symbol span{background:#aa4aff}.css-symbol strong{background:#7300d5}.js-symbol span{background:#ffc250}.js-symbol strong{background:#b76b04}.hero-arrow{font-size:34px;color:#0879fa}.pill{background:#c3e4ff;color:#0073f8;border-radius:5px;font-weight:700;padding:3px 9px;font-size:13px}.hero h1{font-size:34px;letter-spacing:-1px;margin:6px 0 3px;color:#0869e8}.hero-copy>p{font-size:16px;margin:0 0 9px}.checks{display:flex;gap:34px;flex-wrap:wrap}.checks span:before{content:'✓';display:inline-grid;place-items:center;background:#04b75a;color:white;width:18px;height:18px;border-radius:50%;margin-right:9px;font-weight:bold}.wrap{max-width:1410px;margin:auto;padding:8px 18px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 282px;gap:13px}.workspace{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.editor-panel,.output-panel,.side{border:1px solid #e0e8f3;border-radius:6px;background:#fff;padding:11px 14px}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}.panel-heading h2{font-size:17px;margin:0;display:flex;align-items:center;gap:10px;white-space:nowrap}.file-badge{height:32px;width:32px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px;border-radius:4px}.css-badge{background:#9822fa}.js-badge{background:#ffb42f}.panel-actions{display:flex;gap:8px}.outline{background:#fff;border:1px solid #0a73ff;border-radius:5px;padding:7px 12px;font-size:12px;color:#006cff;white-space:nowrap}.red-outline{border-color:#ff3653;color:#fa2140}.outline:hover{background:#f2f7ff}.code-area{height:220px;display:flex;overflow:hidden;border:1px solid #dfe8f2;border-radius:5px;background:#fcfdff}.line-numbers{width:42px;min-width:42px;white-space:pre;text-align:right;padding:7px 9px 7px 0;background:#f5f8fc;color:#7490aa;line-height:16px;font:12px/16px Consolas,monospace;overflow:hidden}.code-area textarea{border:0;resize:none;outline:0;flex:1;min-width:0;padding:7px 9px;white-space:pre;tab-size:2;color:#092158;background:transparent;font:12px/16px Consolas,monospace}.editor-panel h3{font-size:13px;margin:9px 0 7px}.options{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;min-height:54px}.options label{font-size:12px;display:flex;align-items:center;gap:6px;white-space:normal}.options input{accent-color:#087aff;width:17px;height:17px;margin:0}.options span{color:#6390c1}.output-panel{padding:10px 12px}.output-buttons{display:grid;grid-template-columns:1.25fr .8fr 1.08fr;gap:8px}.action{border-radius:5px;border:1px solid transparent;padding:11px 6px;font-size:13px;font-weight:700;white-space:nowrap}.purple{background:#8900fa;color:#fff}.orange{background:#ff9c00;color:#fff}.green{background:#00b96a;color:#fff}.copy{color:#066af9;background:#fff;border-color:#0876ff}.result{border:1px solid #dfe8f4;border-radius:5px;margin-top:10px;overflow:hidden;min-height:95px}.result-head{background:#edf6ff;display:flex;justify-content:space-between;align-items:center;padding:7px 9px;font-size:12px}.result-head span{background:#ddf7e6;color:#07753c;border-radius:4px;padding:2px 5px}.result pre{margin:0;padding:10px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:140px;overflow:auto;font:12px/17px Consolas,monospace;color:#09387e}.status{font-size:12px;color:#bd3b3b;margin-top:4px;min-height:0}.side{margin-bottom:8px;padding:12px 15px}.side h3{font-size:14px;margin:0 0 12px}.benefits{list-style:none;padding:0;margin:0}.benefits li{position:relative;padding-left:25px;margin:0 0 9px;font-size:13px}.benefits li:before{content:'✓';position:absolute;left:0;top:-1px;border-radius:50%;background:#00b75d;color:#fff;font-weight:700;width:17px;height:17px;display:grid;place-items:center;font-size:12px}.popular a{display:flex;justify-content:space-between;padding:6px 0 6px 22px;font-size:13px;position:relative}.popular a:before{content:'▣';position:absolute;left:0;color:#0a79f6}.popular a:nth-child(3n):before{color:#fa2c44}.popular a:nth-child(3n+1):before{color:#00b766}.popular a span{font-size:19px;line-height:12px}.popular a:hover{color:#0678ff}.tips{padding-left:20px;margin:0;color:#263d73;font-size:12px;line-height:1.5}.how{grid-column:1/-1;background:linear-gradient(90deg,#f0f8ff,#f9fcff);padding:7px 20px 15px;border-radius:6px}.how h2,.faq h2{text-align:center;margin:0;font-size:22px}.how>p,.faq>p{text-align:center;color:#627eb6;font-size:12px;margin:4px 0 13px}.steps{display:flex;align-items:center;justify-content:space-around;gap:10px}.step{display:flex;align-items:center;gap:10px}.step b{font-size:13px}.step p{color:#5e78b0;font-size:12px;max-width:180px;line-height:1.35;margin:4px 0}.step-icon{width:65px;height:65px;flex:0 0 65px;border-radius:50%;display:grid;place-items:center;font-size:33px;position:relative}.purple-step{color:#8d20ed;background:#eee6ff}.blue-step{color:#007bff;background:#e4f1ff}.step-icon i{position:absolute;top:-5px;right:-4px;background:#0878fb;color:#fff;border-radius:50%;font:13px Arial;width:25px;height:25px;display:grid;place-items:center}.step:first-child i{background:#8d20ed}.chevron{font-size:34px;color:#087aff}.faq{padding-top:5px}.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px}.faq details{border:1px solid #e1e9f3;border-radius:5px;font-size:12px}.faq summary{cursor:pointer;padding:7px 13px}.faq details p{padding:4px 13px 12px;margin:0;line-height:1.5;color:#476497}footer{text-align:center;font-size:12px;color:#6980aa;padding:20px}@media(max-width:1100px){.layout{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.hero h1{font-size:28px}}@media(max-width:760px){.header-inner{gap:10px;padding:0 10px}.brand img{height:33px;max-width:140px}.header-inner>b{font-size:17px}.header nav{gap:10px;font-size:11px}.hero-inner{gap:12px;padding:14px}.hero-illustration{min-width:100px;width:100px;transform:scale(.65);margin:0 -30px}.hero h1{font-size:23px}.hero-copy>p{font-size:13px}.checks{gap:9px;font-size:11px}.wrap{padding:8px}.workspace{grid-template-columns:1fr}.how{grid-column:1}.sidebar{grid-template-columns:1fr}.faq-grid{grid-template-columns:1fr}.steps{flex-direction:column;align-items:stretch}.chevron{display:none}}@media(max-width:420px){.hero-illustration{display:none}.header nav a:nth-child(2){display:none}.panel-heading h2{font-size:14px}.outline{padding:6px}.output-buttons{grid-template-columns:1fr 1fr}.output-buttons .green{grid-column:1/-1}}