*{box-sizing:border-box}body{margin:0;background:#eef2f6;color:#243649;font-family:Arial,Helvetica,sans-serif;min-height:100svh;display:grid;place-items:center;padding:36px 24px}main{width:min(1100px,100%)}.preview{position:relative;overflow:hidden;border-radius:18px;background:#dce5ed;box-shadow:0 16px 50px #16304713;border:1px solid #fff}canvas{display:block;width:100%;height:auto;aspect-ratio:16/9}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#eef2f6d9;font-size:14px}#loading[hidden]{display:none}form{display:grid;grid-template-columns:minmax(240px,1.1fr) minmax(330px,1fr) auto;align-items:end;gap:22px;padding:28px 6px 0}label,legend{display:block;font-size:12px;font-weight:600;color:#627183;margin-bottom:10px}input{width:100%;height:48px;background:#fff;border:1px solid #d9e1e9;border-radius:9px;padding:0 14px;font:16px Arial;color:#20374e;outline:none}input:focus{border-color:#027ac1;box-shadow:0 0 0 3px #027ac116}input::placeholder{color:#98a4b0;font-size:14px}fieldset{border:0;margin:0;padding:0;min-width:0}legend{padding:0}.swatches{display:flex;gap:9px;align-items:center;min-height:48px;flex-wrap:wrap;padding:5px 0;row-gap:12px}.swatch{position:relative;border:1px solid #172f491f;background:var(--color);width:29px;height:29px;border-radius:50%;cursor:pointer;padding:0;outline-offset:4px;flex-shrink:0}.swatch[aria-checked=true]{outline:2px solid #027ac1}.swatch[aria-checked=true]:after{content:'';position:absolute;inset:10px;background:var(--check,#fff);border-radius:50%}.swatch:focus-visible{outline:3px solid #027ac1}.download{height:48px;display:flex;align-items:center;justify-content:center;gap:9px;padding:0 20px;border:0;border-radius:9px;background:#027ac1;color:white;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s}.download:hover{background:#0068aa}.download:disabled{opacity:.5;cursor:wait}.download svg{width:18px;height:18px}#status{grid-column:1/-1;font-size:12px;min-height:16px;margin:-12px 0 0;color:#6c7c8b;text-align:right}@media(min-width:1500px){main{width:1180px}}@media(max-width:800px){body{padding:24px 16px;align-items:start;padding-top:7vh}.preview{border-radius:12px}form{grid-template-columns:1fr;gap:22px;padding-top:24px}.swatches{gap:15px}.swatch{width:34px;height:34px}.swatch[aria-checked=true]:after{inset:12px}.download{width:100%}#status{text-align:center;margin:-10px 0 0}}

select{width:100%;height:48px;background:#fff;color:#20374e;border:1px solid #d9e1e9;border-radius:9px;padding:0 10px;font:14px Arial;outline-offset:3px}select:focus-visible{outline:2px solid #027ac1}@media(min-width:801px) and (max-width:1000px){form{grid-template-columns:1fr 150px}.download{align-self:end}}

.previews{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:22px;align-items:center}.profile-preview{overflow:hidden;border-radius:18px;border:1px solid #fff;box-shadow:0 16px 50px #16304713}.profile-preview canvas{aspect-ratio:1}.downloads{display:grid;gap:9px}.secondary{background:#fff;border:1px solid #ccd9e4;color:#35546a}.secondary:hover{background:#e2eaf0}.downloads .download{width:100%}form{align-items:center}@media(min-width:1500px){.previews{grid-template-columns:minmax(0,1fr) 260px}}@media(max-width:800px){.previews{grid-template-columns:1fr}.profile-preview{width:min(220px,65%);justify-self:center}.downloads{grid-template-columns:1fr}form{grid-template-columns:1fr}}

@font-face{font-family:'DehaFont';src:url('assets/DehaFont-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block}

.custom-panel{margin-top:22px;background:#ffffffb8;border:1px solid #dbe3eb;border-radius:12px;overflow:hidden}.custom-panel summary{cursor:pointer;padding:18px 20px;font-size:14px;font-weight:600}.custom-panel summary span{font-size:12px;font-weight:400;color:#758497;margin-left:12px}.custom-inner{padding:4px 20px 20px}.enable{display:flex;gap:9px;align-items:center;margin:4px 0 22px;font-size:14px}.enable input{width:17px;height:17px;accent-color:#027ac1}.custom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.custom-grid label{margin:0}.custom-grid select{display:block;margin-top:9px}.color-stops{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:22px 0}.color-pair{display:flex;gap:9px;margin:8px 0 14px}.color-pair input[type=color]{width:52px;padding:4px;cursor:pointer}.color-pair input[type=text]{min-width:0;font-family:monospace}.color-pair input[aria-invalid=true]{border-color:#b74444}.custom-inner input[type=range]{height:24px;width:100%;padding:0;accent-color:#027ac1;border:0;background:transparent;box-shadow:none}.ranges{grid-template-columns:repeat(4,1fr);margin-top:22px}.range-control input{display:block;margin-top:12px}.custom-inner output{float:right;color:#35546a;font-variant-numeric:tabular-nums}.custom-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:20px}.custom-bottom p{font-size:12px;color:#748293;margin:0}.custom-bottom button{border:1px solid #d5dfe8;border-radius:7px;padding:9px 12px;background:white;color:#35546a;cursor:pointer;white-space:nowrap}.custom-inner input:disabled,.custom-inner select:disabled{opacity:.45}.color-stop[hidden]{display:none}@media(max-width:800px){.custom-panel summary span{display:block;margin:8px 0 0}.custom-grid,.color-stops{grid-template-columns:1fr}.ranges{grid-template-columns:1fr 1fr}.custom-bottom{align-items:start;flex-direction:column}}