.tools-page .cg-hero{background:radial-gradient(90% 60% at 50% 0%, #ff7a451f 0%, transparent 70%), var(--dark-bg);padding:150px 0 2.5rem;position:relative}.tools-page .cg-hero-inner{text-align:center;flex-direction:column;align-items:center;max-width:860px;margin:0 auto;display:flex}.tools-page .cg-hero-title{letter-spacing:-.03em;color:#fff;margin:1.25rem 0 .9rem;font-size:clamp(2rem,4.4vw,3.1rem);font-weight:700;line-height:1.1}.tools-page .cg-hero-lead{color:#ffffff73;max-width:620px;margin:0 auto 1.75rem;line-height:1.8}.tools-page .cg-badges{color:#ffffff8c;flex-wrap:wrap;justify-content:center;gap:.75rem 1.5rem;margin:0;padding:0;font-size:.85rem;list-style:none;display:flex}.tools-page .cg-badges li{align-items:center;gap:.5rem;display:inline-flex}.tools-page .cg-badge-glyph{width:16px;height:16px;color:var(--primary-color);flex:none}.tools-page .cg-tool{background:var(--dark-bg);padding:2rem 0 3.5rem}.tools-page .cg-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start;gap:1.5rem;display:grid}.tools-page .cg-preview-col{flex-direction:column;gap:1.5rem;min-width:0;display:flex}.tools-page .cg-panel{background:var(--card-bg);border-radius:18px;padding:1.5rem}.tools-page .cg-stage{aspect-ratio:16/9;background-position:50%;background-size:cover;border-radius:12px;place-items:center;display:grid;position:relative;overflow:hidden}.tools-page .cg-stage:after{content:"";pointer-events:none;background:#0000002e;position:absolute;inset:0}.tools-page .cg-stage svg{z-index:1;width:60%;height:60%;position:relative}.tools-page .cg-stage-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-top:.9rem;display:flex}.tools-page .cg-maps{flex-wrap:wrap;gap:.4rem;display:flex}.tools-page .cg-map{min-height:36px;color:var(--text-muted);text-transform:capitalize;cursor:pointer;background:#00000059;border:0;border-radius:10px;padding:.4rem .85rem;font-family:inherit;font-size:.82rem;font-weight:600;transition:background .18s,color .18s}.tools-page .cg-map:hover{color:var(--white-color);background:#ffffff0d}.tools-page .cg-map.is-active{background:var(--accent-color-transparent-1);box-shadow:inset 0 0 0 1px var(--accent-color-transparent-5);color:var(--white-color)}.tools-page .cg-zoom{color:var(--text-muted);align-items:center;gap:.6rem;font-size:.85rem;display:inline-flex}.tools-page .cg-zoom input{accent-color:var(--primary-color);cursor:pointer}.tools-page .cg-hint{background:var(--accent-color-transparent-1);color:var(--text-muted);border-radius:12px;margin:.9rem 0 0;padding:.75rem .9rem;font-size:.85rem}.tools-page .cg-out-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.9rem;display:flex}.tools-page .cg-out-title{color:var(--white-color);margin:0;font-size:1.1rem;font-weight:700}.tools-page .cg-out-actions{gap:.5rem;display:flex}.tools-page .cg-btn{min-height:44px;color:var(--white-color);white-space:nowrap;cursor:pointer;background:#ffffff12;border:0;border-radius:12px;padding:.55rem 1.1rem;font-family:inherit;font-size:.88rem;font-weight:600;transition:background .18s,filter .18s}.tools-page .cg-btn:hover{background:#ffffff1c}.tools-page .cg-btn:focus-visible{outline:2px solid var(--white-color);outline-offset:2px}.tools-page .cg-btn--primary{background:var(--primary-color);color:var(--dark-bg);font-weight:700}.tools-page .cg-btn--primary:hover{background:var(--primary-color);filter:brightness(1.07)}.tools-page .cg-commands{color:#ffffffc7;white-space:pre;background:#00000059;border-radius:12px;max-height:260px;margin:0;padding:1rem 1.1rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;line-height:1.7;overflow:auto}.tools-page .cg-code{gap:.9rem;margin-top:1rem;display:grid}.tools-page .cg-code-row{gap:.5rem;display:flex}.tools-page .cg-code-row .cg-input{flex:1;min-width:0}.tools-page .cg-controls{flex-direction:column;gap:1rem;display:flex;position:sticky;top:90px}.tools-page .cg-field{flex-direction:column;gap:.45rem;display:flex}.tools-page .cg-label{color:var(--text-muted);justify-content:space-between;align-items:center;gap:.5rem;font-size:.85rem;display:flex}.tools-page .cg-label code{color:#ffffff4d;font-size:.72rem}.tools-page .cg-label b{color:var(--white-color);font-variant-numeric:tabular-nums;font-size:.88rem}.tools-page .cg-input{width:100%;min-height:44px;color:var(--white-color);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#00000059;border:0;border-radius:12px;outline:none;padding:.6rem .85rem;font-family:inherit;font-size:.9rem}.tools-page .cg-input:focus-visible{outline:2px solid var(--primary-color);outline-offset:0}.tools-page .cg-input--mono{letter-spacing:.02em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.tools-page .cg-input.is-invalid{outline:2px solid var(--danger-color);outline-offset:0}.tools-page .cg-error{color:#fca5a5;font-size:.8rem}.tools-page select.cg-input{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,#0000 50%,#ffffff8c 50%),linear-gradient(135deg,#ffffff8c 50%,#0000 50%);background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;background-repeat:no-repeat;background-size:5px 5px,5px 5px;padding-right:2.25rem}.tools-page select.cg-input:hover{background-color:#00000073}.tools-page select.cg-input:focus{background-image:linear-gradient(45deg, transparent 50%, var(--primary-color) 50%), linear-gradient(135deg, var(--primary-color) 50%, transparent 50%)}.tools-page select.cg-input option{background:var(--card-bg);color:var(--white-color)}.tools-page .cg-swatches{flex-wrap:wrap;gap:.5rem;display:flex}.tools-page .cg-swatch{background:var(--swatch,#fff);cursor:pointer;border:0;border-radius:10px;width:34px;height:34px;padding:0;transition:transform .15s,box-shadow .15s,border-color .15s;box-shadow:inset 0 0 0 2px #00000059}.tools-page .cg-swatch:hover{transform:translateY(-1px)}.tools-page .cg-swatch:focus-visible{outline:2px solid var(--white-color);outline-offset:2px}.tools-page .cg-swatch.is-active{box-shadow:inset 0 0 0 2px #00000073, 0 0 0 2px var(--card-bg), 0 0 0 4px var(--primary-color)}.tools-page .cg-swatch--custom{background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.tools-page .cg-swatch--sm{border-radius:7px;width:26px;height:26px}.tools-page .cg-color-row{align-items:center;gap:.5rem;display:flex}.tools-page .cg-color-row .cg-input{text-transform:uppercase;flex:1;min-width:0}.tools-page .cg-color-well{background:var(--swatch,#fff);cursor:pointer;border-radius:12px;flex:none;width:44px;height:44px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 2px #00000059}.tools-page .cg-color-well input{opacity:0;cursor:pointer;background:0 0;border:0;width:calc(100% + 20px);height:calc(100% + 20px);padding:0;position:absolute;inset:-10px}.tools-page .cg-suggestions{flex-wrap:wrap;gap:.4rem;margin-top:.6rem;display:flex}.tools-page .cg-field input[type=range]{width:100%;accent-color:var(--primary-color);cursor:pointer}.tools-page .cg-toggles{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;display:grid}.tools-page .cg-toggle{min-height:44px;color:var(--text-muted);cursor:pointer;-webkit-user-select:none;user-select:none;background:#00000059;border-radius:12px;align-items:center;gap:.6rem;padding:.55rem .8rem;font-size:.85rem;transition:background .18s,color .18s;display:flex}.tools-page .cg-toggle:hover{color:var(--white-color);background:#00000073}.tools-page .cg-toggle:has(input:checked){background:var(--accent-color-transparent-1);box-shadow:inset 0 0 0 1px var(--accent-color-transparent-5);color:var(--white-color)}.tools-page .cg-toggle input{width:16px;height:16px;accent-color:var(--primary-color);cursor:pointer}.tools-page .cg-presets{flex-direction:column;gap:.6rem;display:flex}.tools-page .cg-preset-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;display:grid}.tools-page .cg-preset{color:var(--text-muted);cursor:pointer;background:#00000059;border:0;border-radius:14px;flex-direction:column;align-items:center;gap:.45rem;padding:.7rem .3rem;font-family:inherit;font-size:.8rem;font-weight:600;transition:background .18s,color .18s;display:flex}.tools-page .cg-preset:hover{background:var(--accent-color-transparent-1);color:var(--white-color)}.tools-page .cg-preset:focus-visible{outline:2px solid var(--white-color);outline-offset:2px}.tools-page .cg-preset-thumb{background:#ffffff0a;border-radius:10px;place-items:center;width:46px;height:46px;display:grid}.tools-page .cg-about{background:var(--dark-bg);padding:3.5rem 0 4rem}.tools-page .cg-about-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:start;gap:2.5rem;display:grid}.tools-page .cg-about-title{margin:.75rem 0 1.25rem}.tools-page .cg-text{color:#ffffff80;margin:0 0 1rem;line-height:1.9}.tools-page .cg-steps{gap:.75rem;margin:0;padding:0;list-style:none;display:grid}.tools-page .cg-steps li{background:var(--card-bg);color:#ffffffb3;border-radius:18px;align-items:flex-start;gap:.9rem;padding:1.1rem 1.2rem;font-size:.9rem;line-height:1.6;display:flex}.tools-page .cg-step-no{background:var(--accent-color-transparent-1);width:26px;height:26px;color:var(--primary-color);border-radius:8px;flex:none;place-items:center;font-size:.8rem;font-weight:700;display:grid}.tools-page .cg-section-title{margin:3rem 0 1.25rem}.tools-page .cg-table-card{background:var(--card-bg);border-radius:18px;padding:.5rem}.tools-page .cg-table th,.tools-page .cg-table td{border-bottom:0}.tools-page .cg-table td{vertical-align:top}.tools-page .cg-table tbody tr:nth-child(odd){background:#00000040}.tools-page .cg-table tbody tr td:first-child{border-radius:10px 0 0 10px}.tools-page .cg-table tbody tr td:last-child{border-radius:0 10px 10px 0}.tools-page .cg-tips{gap:.75rem;margin:0;padding:0;list-style:none;display:grid}.tools-page .cg-tips li{color:#fff9;align-items:flex-start;gap:.65rem;line-height:1.7;display:flex}.tools-page .cg-cta{background:var(--card-bg);color:#fff;border-radius:18px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-top:2.5rem;padding:1.5rem;text-decoration:none;display:flex}.tools-page .cg-cta b{margin-bottom:.25rem;font-size:1.05rem;display:block}.tools-page .cg-cta-text{color:#ffffff8c;font-size:.9rem}.tools-page .cg-cta-btn{background:var(--primary-color);color:var(--dark-bg);white-space:nowrap;border-radius:14px;padding:.7rem 1.4rem;font-size:.92rem;font-weight:700;transition:filter .18s}.tools-page .cg-cta:hover .cg-cta-btn{filter:brightness(1.07)}@media (max-width:1023px){.tools-page .cg-grid,.tools-page .cg-about-grid{grid-template-columns:minmax(0,1fr)}.tools-page .cg-controls{position:static}}@media (max-width:640px){.tools-page .cg-hero{padding-top:120px}.tools-page .cg-preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tools-page .cg-toggles{grid-template-columns:minmax(0,1fr)}}.tools-page .chp-svg{shape-rendering:crispedges;width:100%;height:100%;display:block}.tools-page .ti-hero,.tools-page .cg-hero{padding-top:190px}@media (max-width:768px){.tools-page .ti-hero,.tools-page .cg-hero{padding-top:130px}}