*{margin:0;padding:0;box-sizing:border-box}body{margin:0;padding:0;overflow:hidden;font-family:Macan,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#000}#app{width:100vw;height:100vh;position:relative;overflow:hidden}canvas{display:block;width:100%;height:100%;cursor:crosshair}.controls-container{position:fixed;top:10px;left:10px;background:#0d0d0d;color:#f5f4f2;padding:20px;border-radius:24px;font-family:Macan,Arial,sans-serif;font-size:13px;z-index:1000;width:270px;max-height:calc(100vh - 20px);overflow-y:auto;overflow-x:hidden;scrollbar-width:none}.distortion-controls{margin-top:15px}.tab{padding:8px 12px;background:transparent;color:#727170;border:none;border-radius:8px;font-family:Macan,Arial,sans-serif;font-size:13px;cursor:pointer;transition:all .2s}.tab:hover{color:#f5f4f2;background:#7271701a}.tab.active{color:#f5f4f2;background:#72717033}.tab-content{display:none}.tab-content.active{display:block}.controls-container h3{margin:0 0 20px;font-size:13px;color:#727170;font-weight:600}.controls-container label{color:#f5f4f2;font-size:13px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.controls-container label span{color:#f5f4f2;font-size:13px}.controls-container [id$=Val]{color:#727170}input[type=range]{width:100%;height:16px;-webkit-appearance:none;appearance:none;background:#484848;border-radius:8px;outline:none;margin:0 0 15px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:17px;height:10px;background:#f5f4f2;border-radius:4px;cursor:pointer}input[type=range]::-moz-range-thumb{-webkit-appearance:none;appearance:none;width:17px;height:10px;background:#f5f4f2;border-radius:4px;cursor:pointer;border:none}input[type=range]::-ms-thumb{-webkit-appearance:none;appearance:none;width:17px;height:10px;background:#f5f4f2;border-radius:4px;cursor:pointer}input[type=color]{width:49px;height:23px;border:none;border-radius:4px;cursor:pointer;padding:0}input[type=text][id$=Hex]{width:80px;padding:0;background:transparent;color:#727170;border:none;font-family:Macan,monospace;font-size:13px}input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:#F5F4F2}select{background:transparent!important;border:none!important;appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;color:#727170;font-family:Macan,Arial,sans-serif;font-size:13px;padding:0;width:100%;margin-bottom:15px}select::-ms-expand{display:none}.color-preset,.gradient-preset{width:40px;height:40px;border:2px solid #484848;border-radius:4px;cursor:pointer;padding:0}#randomSeed,#randomNoiseSeed{padding:6px 12px;background:#1a1a1a;color:#f5f4f2;border:none;border-radius:12px;font-family:Macan,Arial,sans-serif;font-size:13px;cursor:pointer;width:100%;margin-bottom:15px}#textureFileBtn{flex:1;padding:8px 12px;background:#1a1a1a;color:#727170;border:none;border-radius:8px;font-family:Macan,Arial,sans-serif;font-size:13px;cursor:pointer;text-align:left}#clearTexture{width:24px;height:24px;background:transparent;border:none;color:#727170;cursor:pointer;font-size:16px;line-height:1}#exportBtn{position:fixed;top:10px;right:10px;padding:12px 24px;background:#f5f4f2;color:#0d0d0d;border:none;border-radius:12px;font-family:Macan,Arial,sans-serif;font-size:13px;font-weight:600;cursor:pointer;z-index:1001}.controls-container .section{margin-top:30px;padding-top:20px;border-top:1px solid rgba(114,113,112,.2)}.controls-container .section:first-child{margin-top:0;padding-top:0;border-top:none}.controls-container .control-group{margin-bottom:20px}.color-input-container{display:flex;align-items:center;gap:8px}.controls-container .preset-container{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px}.controls-container label[style*="display: flex"]{display:flex;align-items:center;gap:8px;margin-bottom:10px}.controls-container label[style*="justify-content: space-between"]{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.controls-container .slider-with-button{display:flex;gap:8px;align-items:center}.controls-container .slider-with-button input[type=range]{flex:1}.controls-container .file-input-container{position:relative;display:flex;align-items:center;gap:8px}#textureFileName{color:#727170;font-size:13px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}input[type=file]{display:none}.controls-container::-webkit-scrollbar{display:none}