body{width:100vw;height:100vh;padding:0;margin:0}#root{width:100%;height:100%;background-color:#98fb98;display:flex;align-items:center;justify-content:center;flex-direction:column}.app-title{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:28px;font-weight:700;color:#333;margin-bottom:20px}.mobile-notice{display:none;padding:10px 20px;margin-bottom:12px;background:#00000012;border-radius:10px;font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:13px;color:#555;text-align:center;max-width:400px}@media (max-width: 600px){.mobile-notice{display:block}}.hidden{display:none!important}canvas{outline:solid 1px black}.controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px}.upload-area{width:400px;height:200px;border:2px dashed #999;border-radius:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s,background-color .2s}.upload-area:hover,.upload-area.dragover{border-color:#333;background-color:#ffffff4d}.file-input{display:none}.upload-label{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:16px;color:#555}.slideshow-container{width:1000px;height:65px;margin-top:15px;position:relative;display:flex;align-items:center;justify-content:center}.mySlides{display:none;padding:25px;text-align:center}.arrow-div{cursor:pointer;position:absolute;height:55px;width:55px;background-color:#98fb98}.arrow-div>img{height:100%;width:100%}.arrow-div>img:hover{opacity:.6}.left-arrow{top:5px;left:10px}.right-arrow{top:5px;right:10px}.myslide{width:840px;height:55px;outline:solid rgba(189,187,187,.705) 1px;border-radius:25px;display:flex;align-items:center;justify-content:center;text-align:center;font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:large;font-weight:300}.dim{opacity:.2}.draw-controls{margin-top:12px;width:1000px;max-width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}.progress-wrap{width:100%;height:22px;background:#00000014;border-radius:11px;position:relative;overflow:hidden}.progress-bar{height:100%;width:0%;background:linear-gradient(90deg,#6a9f4d,#3d8b37);border-radius:11px;transition:width .25s ease}.progress-label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:11px;font-weight:700;color:#333;pointer-events:none}.speed-control{display:flex;align-items:center;gap:8px}.speed-label{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:12px;color:#555;white-space:nowrap}.speed-slider{width:100px;accent-color:#3d8b37;cursor:pointer}.speed-value{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:12px;font-weight:700;color:#3d8b37;min-width:24px}.btn-bro{cursor:pointer;width:170px;height:35px;border-radius:25px;border:solid 1px white;margin:10px;color:#fff;font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:large}.btn-1{background-color:green}.btn-2{background-color:red}.presets{display:flex;align-items:center;gap:10px;margin-top:18px}.presets-label{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:14px;color:#777}.btn-preset{width:auto;padding:0 18px;height:36px;font-size:14px;background-color:#555}.btn-preset:hover{opacity:.85}.loading{position:fixed;top:0;right:0;bottom:0;left:0;background:#90ee90d9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;z-index:100}.spinner{width:48px;height:48px;border:5px solid #ccc;border-top-color:#333;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:16px;color:#333}