.upload{display:block;padding:18px;border:1px dashed #a88ae1;border-radius:9px;color:#e6d5ff}.upload input{display:block;max-width:100%;margin-top:12px}.hint,#dimensions{font-size:12px;color:#b1a4c4}.checker{position:relative;margin-top:18px;overflow:hidden;border:1px solid #9173b755;border-radius:8px;background-color:#ddd;background-image:conic-gradient(#aaa 25%,transparent 0 50%,#aaa 0 75%,transparent 0);background-size:20px 20px;line-height:0}canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair}#empty{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;color:#40364f;pointer-events:none}#empty[hidden]{display:none}.preview-controls,.button-row{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}.preview-controls label{margin:0;flex:1;min-width:120px}.preview-controls input{width:auto}button{min-height:44px;border-radius:7px;border:1px solid #a88ae155;background:#2d1c46;color:#eee;padding:10px 16px;cursor:pointer}button:disabled{opacity:.4;cursor:default}.button-row button{flex:1}select{min-height:44px}input[type=range]{min-height:32px}.settings-panel p{color:#c0b3d2}.settings-panel>label{display:block;margin-top:18px}.settings-panel output{float:right}.drag{outline:3px solid #a88ae1}.workspace{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}.source-panel,.settings-panel{min-width:0}:focus-visible{outline:2px solid #7df9ff;outline-offset:4px}@media(max-width:760px){.workspace{grid-template-columns:1fr}main{padding:30px 16px}.source-panel,.settings-panel{padding:20px}header{padding:15px;gap:14px}.brand{font-size:10px}}