body{margin:0;padding:0;font-family:Playfair Display,serif;background:#121212;color:#eee}.app-container{display:flex;height:100vh;width:100vw;overflow:hidden}.sidebar{font-size:16px;line-height:1.6;color:#bbb;width:300px;min-width:250px;padding:20px 30px;display:flex;flex-direction:column;background:#121212;border-right:1px solid #222;box-shadow:5px 0 20px #00000080;z-index:10;overflow-y:auto}h1{margin:8px 0 12px;font-size:42px;font-weight:400;letter-spacing:-1px;color:#69f0ae}h1{text-shadow:0 0 12px rgba(255,255,255,.4),0 0 20px rgba(255,255,255,.1)}.control-group:nth-of-type(1) h3{text-shadow:0 0 10px rgba(255,128,171,.5)}.control-group:nth-of-type(2) h3{text-shadow:0 0 10px rgba(128,216,255,.5)}.control-group:nth-of-type(3) h3{text-shadow:0 0 10px rgba(255,229,127,.5)}label:hover span{color:#fff;text-shadow:0 0 8px rgba(255,255,255,.3);transition:all .3s ease}.canvas-container{flex:1;background:#050509;position:relative}#canvas{display:block;width:100%;height:100%}.decorative-line{display:block;transform:translateY(-36px);pointer-events:none}.description{display:block;margin-top:-10px;margin-bottom:30px;font-size:16px;font-style:italic;color:#999}.controls{display:flex;flex-direction:column;gap:24px}.control-group h3{font-size:12px;text-transform:uppercase;letter-spacing:2px;margin:0 0 12px;font-weight:700;border-bottom:1px solid #222;padding-bottom:5px;transition:color .3s ease}label{display:flex;flex-direction:column;margin-bottom:12px;gap:8px}label span{font-size:15px;color:#ddd}control-group h3{font-size:12px;text-transform:uppercase;letter-spacing:2px;margin:0 0 12px;font-weight:700;border-bottom:1px solid #222;padding-bottom:5px;transition:color .3s ease;display:flex;justify-content:space-between;align-items:center}.header-with-action{display:flex;justify-content:space-between;align-items:center;gap:10px}.inline-color-label{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;gap:8px;cursor:pointer;margin-bottom:0}.inline-color-label span{font-size:9px;letter-spacing:.5px;color:#666;text-transform:uppercase;font-weight:400;transition:color .3s}.inline-color-label:hover span{color:#999;text-shadow:none}input[type=color]{-webkit-appearance:none;border:none;width:14px;height:14px;background:none;padding:0;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:50%;box-shadow:0 0 4px #fff6,inset 0 0 2px #0003}input[type=color]::-moz-color-swatch{border:none;border-radius:50%;box-shadow:0 0 4px #fff6}.zoom-label,.cursor-position{position:absolute;top:16px;background:#12121233;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:40px;padding:10px 18px;border:1px solid rgba(43,90,5,.32);font-size:10px;letter-spacing:.5px;color:#b9f6ca78;font-variant-numeric:tabular-nums;box-shadow:0 4px 12px #0000004d,0 0 10px #69f0ae1a;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .3s ease;z-index:100}.zoom-label{left:16px}.cursor-position{right:16px;text-align:right}.zoom-label span,.cursor-position span{color:#b9f6ca}.pan-label{position:absolute;top:16px;left:126px;background:#12121233;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:40px;padding:10px 18px;border:1px solid rgba(43,90,5,.32);font-size:10px;letter-spacing:.5px;color:#b9f6ca78;box-shadow:0 4px 12px #0000004d,0 0 10px #69f0ae1a;pointer-events:none}input[type=range]{-webkit-appearance:none;width:100%;background:transparent;cursor:pointer;--thumb-size: 8px}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:1px;cursor:pointer;background:#fff3;transition:background .3s}input[type=range]:hover::-webkit-slider-runnable-track{background:#fff6}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:var(--thumb-size);width:var(--thumb-size);border-radius:50%;background:#fff;cursor:pointer;margin-top:calc(var(--thumb-size) / -2 + .5px);box-shadow:0 0 6px #ffffff80;transition:box-shadow .2s ease}input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 6px #ffffff1a,0 0 15px #fffc}input[type=range]::-moz-range-track{width:100%;height:1px;background:#fff3}input[type=range]::-moz-range-thumb{height:var(--thumb-size);width:var(--thumb-size);border:none;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 0 6px #ffffff80}.control-group:nth-of-type(1) h3{color:#ff80ab;border-bottom-color:#ff80ab33}#brushSize::-webkit-slider-thumb,#brushDensity::-webkit-slider-thumb,#tailLength::-webkit-slider-thumb{box-shadow:0 0 10px #ff80ab99}#brushSize:active::-webkit-slider-thumb,#brushDensity:active::-webkit-slider-thumb,#tailLength:active::-webkit-slider-thumb{background:#fff0f6;box-shadow:0 0 0 6px #ff80ab1a,0 0 20px #ff80abcc}#brushSize::-moz-range-thumb,#brushDensity::-moz-range-thumb,#tailLength::-moz-range-thumb{box-shadow:0 0 10px #ff80ab99}.control-group:nth-of-type(2) h3{color:#80d8ff;border-bottom-color:#80d8ff33}#flowAmount::-webkit-slider-thumb,#inertia::-webkit-slider-thumb{box-shadow:0 0 10px #80d8ff99}#flowAmount:active::-webkit-slider-thumb,#inertia:active::-webkit-slider-thumb{background:#f0fbff;box-shadow:0 0 0 6px #80d8ff1a,0 0 20px #80d8ffcc}#flowAmount::-moz-range-thumb,#inertia::-moz-range-thumb{box-shadow:0 0 10px #80d8ff99}.control-group:nth-of-type(3) h3{color:#ffe57f;border-bottom-color:#ffe57f33}#glow::-webkit-slider-thumb{box-shadow:0 0 10px #ffe57f99}#glow:active::-webkit-slider-thumb{background:#fffcf0;box-shadow:0 0 0 6px #ffe57f1a,0 0 20px #ffe57fcc}#glow::-moz-range-thumb{box-shadow:0 0 10px #ffe57f99}select{appearance:none;background-color:transparent;border:1px solid rgba(255,255,255,.2);color:#fff;padding:8px 12px;font-family:inherit;font-size:14px;border-radius:2px;cursor:pointer;transition:all .3s ease;background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);background-position:calc(100% - 15px) calc(1em + 2px),calc(100% - 10px) calc(1em + 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}select:hover{border-color:#ffffff80;background-color:#ffffff0d}select:focus{outline:none;border-color:#ffe57f;box-shadow:0 0 10px #ffe57f33}select option{background-color:#121212;color:#eee}.actions{display:flex;flex-direction:row;gap:10px;margin-top:20px}button{flex:1;background:transparent;border:1px solid rgba(255,255,255,.2);color:#ccc;font-family:inherit;font-size:13px;text-transform:uppercase;letter-spacing:1px;padding:12px;cursor:pointer;transition:all .4s cubic-bezier(.25,1,.5,1)}button:hover{color:#fff;border-color:#fffc;box-shadow:0 0 15px #ffffff1a;text-shadow:0 0 8px rgba(255,255,255,.5)}button:active{transform:scale(.98)}