.canonical-tool-head{max-width:920px;margin:0 auto var(--s-4);text-align:center}.canonical-tool-head .lead{max-width:760px;margin-inline:auto}.workspace-editor{padding-top:var(--s-3);max-width:1400px;min-height:60vh;margin:0 auto}.hidden{display:none!important}.workspace-landing{margin-top:var(--s-4);margin-bottom:var(--s-4)}.upload-zone{border:2px dashed var(--border);border-radius:var(--radius-2);background:var(--panel);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;height:280px;transition:all .2s;display:flex}.upload-zone:hover,.upload-zone.drag-over{background:var(--panel2);border-color:var(--b1)}.upload-icon{margin-bottom:15px;font-size:48px}.upload-text{text-align:center}.upload-sub{margin-top:6px}.toolbar{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:20px;display:flex}.toolbar-head-group{align-items:center;gap:12px;display:flex}.remove-btn{color:#f55;cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px;font-size:18px}.remove-btn:hover{background:#ff55551a}.back-link{color:var(--muted);font-size:14px;font-weight:500;text-decoration:none}.preview-container{text-align:center;border:1px solid var(--border);background-color:#f0f0f0;background-image:linear-gradient(45deg,#0000000d 25%,#0000 25%),linear-gradient(-45deg,#0000000d 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#0000000d 75%),linear-gradient(-45deg,#0000 75%,#0000000d 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;border-radius:12px;margin-bottom:20px;padding:20px}html[data-theme=dark] .preview-container{background-color:#111;background-image:linear-gradient(45deg,#ffffff0d 25%,#0000 25%),linear-gradient(-45deg,#ffffff0d 25%,#0000 25%)}.preview-container img{max-width:100%;max-height:500px;box-shadow:var(--shadow-2);object-fit:contain;border-radius:4px}.grid-layout{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:15px;margin-bottom:20px;display:grid}.tile-card{border:1px solid var(--border);background:var(--panel);border-radius:12px;flex-direction:column;height:240px;transition:all .2s;display:flex;position:relative;overflow:hidden}.tile-card:hover{border-color:var(--b1);box-shadow:var(--shadow-2);transform:translateY(-2px)}.tile-preview{background-color:#fff;background-image:linear-gradient(45deg,#eee 25%,#0000 25%),linear-gradient(-45deg,#eee 25%,#0000 25%);background-position:0 0,0 10px;background-repeat:repeat;background-size:20px 20px;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;flex:1;justify-content:center;align-items:center;padding:10px;display:flex;position:relative;overflow:hidden}.tile-preview img{object-fit:contain;width:auto;max-width:100%;height:auto;max-height:100%;box-shadow:none;border-radius:0}.tile-info{border-top:1px solid var(--border);background:var(--panel);text-align:left;flex-direction:column;gap:4px;padding:10px;display:flex}.tile-title{white-space:nowrap;text-overflow:ellipsis;color:var(--text);font-size:13px;font-weight:600;overflow:hidden}.tile-sub{color:var(--muted);font-size:11px}.settings-panel{border:1px solid var(--border);background:#ffffff05;border-radius:12px;margin-bottom:20px;padding:14px}.set-row{border-top:1px solid var(--border);align-items:center;gap:14px;padding:10px 0;display:flex}.set-row:first-child{border-top:none}.set-label{width:180px;color:var(--text);font-size:14px;font-weight:600}.set-controls{flex-wrap:wrap;flex:1;align-items:center;gap:12px;display:flex}.pill{border:1px solid var(--border);color:var(--muted);border-radius:99px;align-items:center;padding:6px 10px;font-size:13px;display:inline-flex}.text-input{border:1px solid var(--border);color:var(--text);background:0 0;border-radius:6px;width:120px;padding:6px 10px}.btn-primary{background:var(--b1);color:#000;cursor:pointer;border:none;border-radius:8px;padding:10px 24px;font-weight:700;transition:all .2s}.btn-primary:disabled{opacity:.6}.btn-success{background:var(--b3);color:#000;cursor:pointer;border-radius:8px;padding:10px 24px;font-weight:700;text-decoration:none;display:inline-block}.result-box{background:color-mix(in srgb, var(--b3) 15%, var(--panel));border:1px solid var(--b3);border-radius:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:20px;display:flex}.png-ico-page .canonical-tool-head{text-align:left;max-width:none;margin:0 0 30px}.png-ico-page .canonical-tool-head .h1{letter-spacing:-.035em;max-width:980px;margin-bottom:10px;font-size:clamp(34px,4vw,56px);line-height:1.05}.png-ico-page .canonical-tool-head .lead{color:#b5bfd5;max-width:880px;margin:0;font-size:clamp(16px,1.6vw,20px);line-height:1.6}.workspace-editor.png-ico-editor{max-width:none;min-height:0;padding-top:0}.png-ico-editor .toolbar-nav{margin-bottom:24px}.png-ico-editor .back-link{color:#b4b9c6;font-size:15px}.png-app-frame{--ico-panel:#1f222a;--ico-panel-2:#242832;--ico-border:#303540;--ico-text:#f5f6f8;--ico-muted:#abb6cf;--ico-accent:#94c7f5;--ico-green:#83d7a6;min-height:480px;color:var(--ico-text);background:#17191e;border:1px solid #292d36;border-radius:28px;padding:clamp(24px,3vw,42px)}.image-steps{align-items:center;max-width:720px;margin:0 0 32px;padding:0;list-style:none;display:flex}.image-steps li{color:#8992a6;align-items:center;gap:10px;min-width:0;font-size:13px;display:flex}.image-steps li:not(:last-child):after{content:"";background:#343943;width:clamp(28px,5vw,76px);height:2px;margin:0 14px 0 6px}.image-steps li>span{border:1px solid #4a5160;border-radius:50%;flex:none;place-items:center;width:34px;height:34px;font-weight:750;display:grid}.image-steps li.is-active{color:var(--ico-text)}.image-steps li.is-active>span{border-color:var(--ico-accent);background:var(--ico-accent);color:#102131}.image-steps li.is-complete{color:#c7d0e4}.image-steps li.is-complete>span{border-color:var(--ico-green);background:var(--ico-green);color:#11271b}.image-steps li.is-complete>span:before{content:"✓"}.image-steps li.is-complete>span{font-size:0}.image-steps li.is-complete:not(:last-child):after{background:var(--ico-green)}.png-app-frame>.tool-status-message{margin:0 0 22px}.png-app-frame>.center-msg{color:var(--ico-muted);margin:10px 0 18px}.png-app-frame[data-image-stage=start]>.center-msg{text-align:center}.png-ico-editor .workspace-landing{margin:0}.png-ico-editor .upload-zone{text-align:center;background:#1c1f26;border:1.5px dashed #485262;border-radius:22px;height:auto;min-height:360px;padding:36px}.png-ico-editor .upload-zone:hover,.png-ico-editor .upload-zone.drag-over{border-color:var(--ico-accent);background:#202630}.png-ico-editor .upload-icon{width:72px;height:72px;color:var(--ico-accent);background:#243343;border-radius:22px;place-items:center;margin:0 0 20px;display:grid}.png-ico-editor .upload-text strong{color:var(--ico-text);font-size:clamp(18px,2vw,24px)}.png-ico-editor .upload-sub{color:var(--ico-muted);margin-top:10px;font-size:15px}.png-ico-editor .upload-privacy{color:#8f9ab1;max-width:680px;margin:18px auto 0;font-size:13px;line-height:1.55}.png-ico-editor #editor-ui{grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:22px}.png-ico-editor #editor-ui:not(.hidden){display:grid!important}.png-ico-editor .toolbar{border-color:var(--ico-border);grid-column:1/-1;min-height:58px;margin:0;padding:0 0 18px}.png-ico-editor .toolbar-head-group{min-width:0}.png-ico-editor #file-name-heading{max-width:min(58vw,620px);color:var(--ico-text);text-overflow:ellipsis;white-space:nowrap;margin:0;overflow:hidden}.png-ico-editor .remove-btn{border:1px solid var(--ico-border);color:#ef907b;border-radius:12px;flex:none;width:42px;height:42px}.png-ico-editor .actions{flex:none}.png-ico-editor .btn-primary,.png-ico-editor .btn-success{border:1px solid var(--ico-accent);background:var(--ico-accent);color:#0b1a26;border-radius:14px;min-height:48px;padding:12px 20px;font-size:14px}.png-ico-editor #main-view-area{min-width:0}.png-ico-editor .preview-container{border-color:var(--ico-border);min-height:390px;box-shadow:none;background-color:#101217;background-image:linear-gradient(45deg,#ffffff0b 25%,#0000 25%),linear-gradient(-45deg,#ffffff0b 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ffffff0b 75%),linear-gradient(-45deg,#0000 75%,#ffffff0b 75%);border-radius:20px;place-items:center;margin:0;display:grid}.png-ico-editor .preview-container img{max-height:350px;box-shadow:0 16px 34px #0000004d}.png-ico-editor .grid-layout{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));margin:0}.png-ico-editor .tile-card,.png-ico-editor .tile-info{border-color:var(--ico-border);background:var(--ico-panel)}.png-ico-editor .ico-summary{border:1px solid var(--ico-border);background:var(--ico-panel);border-radius:20px;flex-direction:column;gap:12px;min-width:0;padding:22px;display:flex}.png-ico-editor .ico-summary>div{border-bottom:1px solid var(--ico-border);justify-content:space-between;align-items:center;gap:14px;padding-bottom:12px;display:flex}.png-ico-editor .ico-summary span{color:var(--ico-muted);font-size:13px}.png-ico-editor .ico-summary strong{color:var(--ico-text)}.png-ico-editor .ico-summary p{color:var(--ico-muted);margin:4px 0 0;font-size:13px;line-height:1.6}.png-ico-editor .result-box{background:#1b2921;border-color:#3f7f5b;border-radius:18px;grid-column:1/-1;margin-top:2px;padding:20px 22px}.png-ico-editor .result-box h3{color:var(--ico-text);margin:0 0 5px}.png-ico-editor .result-box .muted{color:#b4c8bb;margin:0}@media (width<=820px){.png-app-frame{border-radius:24px;padding:24px}.png-ico-editor #editor-ui{grid-template-columns:1fr}.png-ico-editor .toolbar,.png-ico-editor .result-box{grid-column:1}.png-ico-editor .preview-container{min-height:330px}}@media (width<=520px){.png-ico-page .canonical-tool-head{margin-bottom:22px}.png-ico-page .canonical-tool-head .h1{font-size:34px}.png-app-frame{border-radius:22px;min-height:0;padding:20px 16px}.image-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:24px;display:grid}.image-steps li{text-align:center;flex-direction:column;gap:6px;font-size:10px;position:relative}.image-steps li:not(:last-child):after{width:calc(100% - 40px);margin:0;position:absolute;top:13px;left:calc(50% + 20px)}.image-steps li>span{width:27px;height:27px}.image-steps li strong{overflow-wrap:normal;max-width:100%;line-height:1.3}.png-ico-editor .upload-zone{min-height:310px;padding:26px 18px}.png-ico-editor .toolbar{flex-direction:column;align-items:stretch;gap:14px}.png-ico-editor #file-name-heading{max-width:calc(100vw - 138px)}.png-ico-editor .actions,.png-ico-editor .actions .btn-primary{width:100%}.png-ico-editor .preview-container{min-height:270px;padding:14px}.png-ico-editor .result-box{flex-direction:column;align-items:stretch}.png-ico-editor .result-box .btn-success{text-align:center;width:100%}}.png-tool-page{max-width:1400px!important;padding-top:44px!important}.png-back{color:#b4b9c6;margin-bottom:24px;text-decoration:none;display:inline-block}.png-heading{max-width:900px;margin-bottom:34px}.png-heading h1{color:#f3f4f7;margin:0 0 12px;font-size:clamp(38px,4vw,56px);line-height:1.08}.png-heading p{color:#b4b9c6;margin:0;font-size:18px;line-height:1.6}.png-app{color:#f3f4f7;background:#17191e;border:1px solid #2a2e38;border-radius:28px;padding:32px 40px}.png-app [hidden]{display:none!important}.png-steps{align-items:center;gap:12px;margin:0 0 26px;padding:0;list-style:none;display:flex}.png-steps li{color:#8d93a3;align-items:center;gap:9px;display:flex}.png-steps li:not(:last-child):after{content:"";background:#333844;width:clamp(24px,5vw,72px);height:2px;margin-left:3px}.png-steps span{border:2px solid #444b59;border-radius:50%;place-items:center;width:32px;height:32px;font-size:14px;display:grid}.png-steps .is-active{color:#f3f4f7}.png-steps .is-active span{color:#0b1a26;background:#86c9f7;border-color:#86c9f7}.png-steps .is-complete span{color:#0b1a26;background:#5fd39b;border-color:#5fd39b}.png-steps .is-complete:after{background:#5fd39b}.png-start-panel label{text-align:center;cursor:pointer;background:#1b1d23;border:2px dashed #3a3f4b;border-radius:22px;flex-direction:column;justify-content:center;align-items:center;gap:10px;min-height:430px;display:flex}.png-start-panel label:hover,.png-start-panel label.is-over{background:#202630;border-color:#86c9f7}.png-upload-icon{color:#86c9f7;background:#1c2f40;border-radius:50%;place-items:center;width:74px;height:74px;font-size:36px;display:grid}.png-start-panel strong{font-size:26px}.png-start-panel span,.png-start-panel small{color:#9aa0af}.png-start-panel b{color:#0b1a26;background:#86c9f7;border-radius:14px;margin-top:14px;padding:14px 24px}.png-editor{grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);gap:32px;display:grid}.png-preview-column,.png-options{min-width:0}.png-canvas-wrap{background-color:#111318;background-image:repeating-conic-gradient(#23262e 0 25%,transparent 0 50%);touch-action:none;cursor:grab;background-size:20px 20px;border-radius:20px;place-items:center;min-height:440px;display:grid;position:relative;overflow:hidden}.png-canvas-wrap:active{cursor:grabbing}.png-canvas-wrap canvas{object-fit:contain;width:min(100%,540px);height:auto;max-height:520px;display:block}.png-drag-hint{color:#b4b9c6;background:#0e0f12cc;border-radius:8px;padding:6px 9px;font-size:12px;position:absolute;bottom:14px;right:14px}.png-file-row{justify-content:space-between;align-items:center;gap:16px;padding:16px 2px;display:flex}.png-file-row>div{flex-direction:column;gap:3px;min-width:0;display:flex}.png-file-row span,.png-file-row small{color:#9aa0af;font-size:12px}.png-file-row strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.png-file-row button{color:#ff8a73;background:0 0;border:1px solid #3a3f4b;border-radius:12px;width:42px;height:42px;font-size:24px}.png-options{flex-direction:column;gap:16px;display:flex}.png-options-title{min-height:120px}.png-options-title h2{margin:0 0 9px;font-size:27px}.png-options-title p{color:#b4b9c6;margin:0;font-size:14px;line-height:1.6}.png-field{color:#9aa0af;text-transform:uppercase;flex-direction:column;gap:7px;font-size:12px;font-weight:700;display:flex}.png-field select{color:#f3f4f7;height:52px;font:inherit;text-transform:none;background:#1f222a;border:1px solid #333844;border-radius:14px;padding:0 13px;font-size:14px}.png-options fieldset{border:0;margin:0;padding:0}.png-options legend{color:#9aa0af;text-transform:uppercase;margin-bottom:9px;font-size:12px;font-weight:700}.png-presets,.png-segment,.png-secondary{gap:7px;display:flex}.png-app button,.png-app a{font:inherit}.png-presets button,.png-segment button,.png-secondary button{color:#b4b9c6;background:#1f222a;border:1px solid #3a3f4b;border-radius:10px;flex:1;min-width:0;padding:9px;font-size:12px;font-weight:700}.png-presets button.is-active,.png-segment button.is-active{color:#f3f4f7;background:#1c2f40;border-color:#86c9f7}.png-sizes{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.png-sizes label{cursor:pointer}.png-sizes input{opacity:0;position:absolute}.png-sizes span{color:#b4b9c6;text-align:center;border:1px solid #3a3f4b;border-radius:9px;min-width:42px;padding:8px;font-size:12px;display:block}.png-sizes input:checked+span{color:#f3f4f7;background:#1c2f40;border-color:#86c9f7}.png-primary{color:#0b1a26;background:#86c9f7;border:0;border-radius:15px;min-height:56px;font-size:16px;font-weight:800}.png-adjust-grid{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;display:grid}.png-adjust-grid article{background:#1f222a;border-radius:18px;min-width:0;padding:16px}.png-adjust-grid h3{margin:0 0 14px;font-size:15px}.png-slider{color:#b4b9c6;grid-template-columns:1fr auto;gap:7px;margin-top:11px;font-size:12px;display:grid}.png-slider input{accent-color:#86c9f7;grid-column:1/-1;width:100%}.png-colors{gap:8px;margin-top:12px;display:flex}.png-colors button{background:var(--swatch);border:1px solid #3a3f4b;border-radius:8px;width:30px;height:30px}.png-colors button[data-bg=transparent]{background:repeating-conic-gradient(#3a3f4b 0 25%,transparent 0 50%);background-size:8px 8px}.png-colors button[data-bg=\#ffffff]{background:#fff}.png-colors button[data-bg=\#111318]{background:#111318}.png-colors button[data-bg=\#86c9f7]{background:#86c9f7}.png-colors button.is-active{outline-offset:2px;outline:2px solid #86c9f7}.png-range-field label{color:#b4b9c6;justify-content:space-between;font-size:13px;display:flex}.png-range-field input{accent-color:#86c9f7;width:100%}.png-result{background:#19241f;border:1px solid #2b5b45;border-radius:18px;grid-column:1/-1;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:18px;padding:20px;display:grid}.png-result-previews{align-items:end;gap:7px;display:flex}.png-result-previews canvas{border-radius:7px;width:44px;height:44px}.png-result-previews canvas:nth-child(2){width:34px;height:34px}.png-result-previews canvas:nth-child(3){width:26px;height:26px}.png-result-previews canvas:nth-child(4){width:18px;height:18px}.png-result h2{margin:0 0 4px;font-size:20px}.png-result p{color:#b4b9c6;margin:0 0 6px;font-size:12px}.png-result a,.png-result button{color:#f3f4f7;background:#1f222a;border:1px solid #3a3f4b;border-radius:12px;padding:12px 16px;font-weight:700;text-decoration:none}.png-result a{color:#0b1a26;background:#86c9f7;border-color:#86c9f7}.png-local{color:#9aa0af;grid-column:1/-1;margin:0;font-size:13px}@media (width<=900px){.png-app{padding:24px}.png-editor,.png-adjust-grid{grid-template-columns:1fr}.png-canvas-wrap{min-height:360px}.png-result{grid-template-columns:1fr}.png-result-previews{justify-content:center}.png-result a,.png-result button{text-align:center}.png-heading p{font-size:16px}}@media (width<=560px){.png-tool-page{padding-top:28px!important}.png-heading h1{font-size:34px}.png-app{border-radius:20px;padding:18px}.png-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;display:grid}.png-steps li{text-align:center;flex-direction:column;gap:5px;min-width:0}.png-steps li:not(:last-child):after{display:none}.png-steps strong{overflow-wrap:anywhere;font-size:11px;line-height:1.25}.png-start-panel label{min-height:360px;padding:22px}.png-canvas-wrap{min-height:300px}.png-options-title{min-height:0}.png-secondary{flex-direction:column}.png-adjust-grid{gap:10px}}