*{box-sizing:border-box} :root{--bg:#07100d;--panel:#0d1814;--panel2:#12221b;--line:#244536;--text:#edf7f1;--muted:#9db6a9;--green:#45d483;--green2:#1f8d55;--warn:#f2b84b;--bad:#ff6b6b;--code:#050907}body{margin:0;background:radial-gradient(circle at 15% 0,#123322 0,#07100d 35%),var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;line-height:1.45}a{color:inherit}.top{position:sticky;top:0;z-index:20;background:rgba(7,16,13,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.nav{max-width:1240px;margin:auto;padding:12px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}.brand{font-weight:800;text-decoration:none;font-size:18px}.brand span{color:var(--green)}.navlinks{display:flex;gap:8px;flex:1;flex-wrap:wrap}.navlinks a{font-size:13px;text-decoration:none;color:var(--muted);padding:7px 10px;border-radius:8px}.navlinks a:hover{background:var(--panel2);color:var(--text)}.wrap{max-width:1240px;margin:auto;padding:24px 18px 60px}.hero{padding:34px 0 20px}.hero h1{font-size:clamp(30px,5vw,56px);line-height:1.03;margin:0 0 10px}.hero p{color:var(--muted);max-width:760px;margin:0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:14px}.card,.panel{background:linear-gradient(180deg,var(--panel),#0a130f);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 26px rgba(0,0,0,.17)}.card{padding:17px;text-decoration:none;display:block;transition:.15s}.card:hover{transform:translateY(-2px);border-color:var(--green2)}.card h3{margin:0 0 6px;font-size:17px}.card p{margin:0;color:var(--muted);font-size:13px}.badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.badge{font-size:11px;border:1px solid var(--line);background:#0a1510;color:#b9d4c5;padding:3px 7px;border-radius:999px}.section{margin-top:30px}.section h2{font-size:21px;margin:0 0 12px}.toolhead{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}.toolhead h1{margin:0;font-size:30px}.toolhead p{margin:4px 0 0;color:var(--muted);font-size:13px}.panel{padding:16px;margin-bottom:14px}.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}.field{display:grid;gap:5px;margin-bottom:11px}.field label{font-size:12px;color:#c7dbd0;font-weight:650}.row{display:flex;gap:9px;flex-wrap:wrap;align-items:end}.row>.field{flex:1;min-width:130px}input,select,textarea,button{font:inherit}input,select,textarea{width:100%;background:#07100d;color:var(--text);border:1px solid #2c4b3c;border-radius:9px;padding:9px 10px;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--green2)}textarea{min-height:90px;resize:vertical}button,.btn{border:1px solid #2e6747;background:#123824;color:#eafff2;border-radius:9px;padding:9px 12px;cursor:pointer;text-decoration:none;display:inline-block;font-weight:700;font-size:13px}button:hover,.btn:hover{background:#18502f}.btn.secondary,button.secondary{background:#0a1410;border-color:var(--line);color:#c8ddd1}.btn.danger,button.danger{border-color:#6f2f2f;background:#2b1212}.out,pre,code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.out,pre{background:var(--code);border:1px solid #20372d;border-radius:10px;padding:12px;white-space:pre-wrap;word-break:break-word;min-height:44px}.note{font-size:12px;color:var(--muted)}.ok{color:var(--green)}.warn{color:var(--warn)}.bad{color:var(--bad)}table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:9px;border-bottom:1px solid #1d372b;text-align:left}th{color:#b8cfc3}.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}.tabs button.active{background:#1c6139}.canvaswrap{overflow:auto;background:#030705;border:1px solid var(--line);border-radius:10px;padding:8px}canvas{image-rendering:pixelated;max-width:100%;height:auto}.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:6px;max-height:260px;overflow:auto}.swatch{display:flex;align-items:center;gap:7px;font-size:12px;padding:5px;border:1px solid #1d372b;border-radius:8px}.swatch i{width:18px;height:18px;border-radius:4px;border:1px solid rgba(255,255,255,.16)}.footer{color:#748b7e;font-size:11px;margin-top:40px;padding-top:16px;border-top:1px solid #15281f}@media(max-width:650px){.wrap{padding:18px 12px 45px}.nav{padding:10px 12px}.hero{padding-top:24px}.toolhead h1{font-size:25px}}