:root{--bg:#f6f8fa;--paper:#fff;--ink:#182329;--muted:#667680;--line:#e1e8eb;--green:#16876d;--mint:#eaf8f2;--blue:#2795d2;--shadow:0 12px 35px rgba(28, 53, 65, 0.045)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}a{color:var(--green)}button,input,select,textarea{font:inherit}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #7ecdf5;outline-offset:2px}.top{position:sticky;top:0;z-index:40;background:#ffffffed;backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.nav{max-width:1160px;margin:auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{font-weight:800;letter-spacing:-.9px;text-decoration:none;color:var(--ink);font-size:23px}.brand b{color:var(--blue)}.navlinks{display:flex;gap:22px;align-items:center;flex-wrap:wrap}.navlinks a{color:#5c6871;text-decoration:none;font-size:13px;font-weight:650}.navlinks a:hover{color:var(--green)}.wrap{max-width:1160px;margin:auto;padding:0 22px}.crumb{padding:25px 0 0;font-size:13px;color:var(--muted)}.crumb a{text-decoration:none;color:var(--muted)}.hero{max-width:810px;padding:30px 0 26px}.eyebrow{display:inline-block;font-size:11px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--green);background:var(--mint);padding:7px 12px;border-radius:100px}.hero h1{font-size:clamp(34px, 4vw, 56px);letter-spacing:-2.2px;line-height:1.11;margin:17px 0}.hero p{font-size:17px;color:var(--muted);margin:0;max-width:720px}.workspace{background:var(--paper);border:1px solid var(--line);border-radius:23px;padding:25px;box-shadow:var(--shadow)}.headrow{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:20px;flex-wrap:wrap}.headrow h2{margin:0;font-size:21px;letter-spacing:-.5px}.status{font-size:12px;color:#497467;background:#f0faf5;border-radius:50px;padding:6px 10px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.field{display:flex;flex-direction:column;gap:7px;min-width:0}.field label,.field>span{font-size:12px;font-weight:750;color:#43525b}input:not([type=checkbox]):not([type=radio]):not([type=color]):not(
[type=range]
),select,textarea{width:100%;background:#fafcfd;border:1px solid #d7e1e6;border-radius:11px;padding:11px 13px;color:var(--ink);min-width:0}.mono,pre,textarea{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px}textarea{min-height:155px;resize:vertical;line-height:1.65}input[type=color]{width:48px;height:38px;padding:2px;border:1px solid var(--line);border-radius:9px;background:#fff}input[type=range]{width:100%;accent-color:var(--green)}.checks{display:flex;align-items:center;gap:15px;flex-wrap:wrap;font-size:13px}.checks label{display:flex;align-items:center;gap:7px}.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}.btn{background:var(--green);border:1px solid var(--green);border-radius:11px;color:#fff;padding:10px 17px;font-weight:700;font-size:13px}.btn.secondary{background:#fff;color:#375364;border-color:#d9e4e8}.btn:hover{filter:brightness(.95)}.result{background:#f8fafb;border:1px solid var(--line);border-radius:12px;padding:14px;white-space:pre-wrap;overflow-wrap:anywhere;overflow:auto;max-height:370px;min-height:65px;font-family:ui-monospace,Consolas,monospace;font-size:12px}.note{font-size:12px;color:var(--muted);margin-top:13px}.error{color:#bd384a;white-space:pre-wrap}.success{color:#147d59}.section{margin:32px 0;padding:27px 30px;background:#fff;border:1px solid var(--line);border-radius:22px}.section h2{font-size:23px;letter-spacing:-.5px;margin:0 0 14px}.section h3{font-size:16px;margin:20px 0 5px}.section p{color:#53636c;margin:6px 0 12px}.faq details{border-bottom:1px solid var(--line);padding:14px 0}.faq summary{font-weight:700;cursor:pointer}.faq details p{margin-bottom:3px}.related{display:flex;flex-wrap:wrap;gap:10px}.related a{padding:9px 13px;border:1px solid var(--line);border-radius:10px;text-decoration:none;font-size:13px;color:#376558;background:#fafcfc}.footer{border-top:1px solid var(--line);margin-top:45px;padding:30px 0 40px;font-size:13px;color:var(--muted)}.footer a{margin-right:16px;color:#526771}.preview{padding:25px;min-height:180px;background:#f5f7f8;border-radius:14px;display:grid;place-items:center}.pill{display:inline-block;background:#edf6f2;color:var(--green);border-radius:15px;padding:2px 9px;font-size:11px}.file{display:none}.minibox{background:#f9fbfa;border:1px solid var(--line);padding:14px;border-radius:12px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.columns{display:grid;grid-template-columns:1fr 1fr;gap:16px}.codebox{background:#13212a;color:#d4ebeb;padding:17px;border-radius:12px;overflow:auto;white-space:pre-wrap;word-break:break-word;min-height:100px}.warn{color:#875615;background:#fff8e5;padding:10px 13px;border-radius:9px;font-size:12px}.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:9px;margin-top:13px}.strip>div{border:1px solid var(--line);padding:10px;border-radius:11px;font-size:12px}.strip strong{display:block;font-size:16px}@media (max-width:720px){.nav{padding:12px 16px}.navlinks{gap:9px}.navlinks a{font-size:11px}.wrap{padding:0 14px}.hero{padding:23px 0}.hero h1{letter-spacing:-1.3px}.workspace{padding:16px;border-radius:17px}.columns,.grid,.grid.three{grid-template-columns:1fr}.section{padding:19px}.actions .btn{flex:1}.headrow h2{font-size:19px}}