body{margin:0;padding:0;background:#1a1a1a;height:100vh;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;touch-action:manipulation}main{width:100%;height:100%}.sketch-menu{position:fixed;top:20px;left:20px;z-index:1000}.hamburger-btn{background:#2a2a2a;border:1px solid #444;padding:12px;border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;justify-content:center;align-items:center;width:40px;height:40px;gap:4px}.hamburger-btn:hover{background:#3a3a3a;border-color:#555}.hamburger-line{width:18px;height:2px;background:#fff;transition:all .3s ease;border-radius:1px}.hamburger-btn.open .hamburger-line:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.hamburger-btn.open .hamburger-line:nth-child(2){opacity:0}.hamburger-btn.open .hamburger-line:nth-child(3){transform:rotate(-45deg) translate(7px,-6px)}.menu-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;z-index:999;opacity:0;visibility:hidden;transition:all .2s ease}.menu-overlay.open{opacity:1;visibility:visible}.menu-dropdown{position:absolute;top:20px;left:70px;background:#2a2a2a;border:1px solid #444;border-radius:6px;padding:8px;display:flex;flex-direction:column;gap:4px;min-width:150px;transform:translate(-10px);transition:all .2s ease}.menu-overlay.open .menu-dropdown{transform:translate(0)}.sketch-btn{background:transparent;border:none;color:#ccc;padding:8px 12px;border-radius:4px;cursor:pointer;font-size:14px;transition:all .2s ease;text-align:left;white-space:nowrap}.sketch-btn:hover{background:#3a3a3a;color:#fff}.sketch-btn.active{background:#4a4a4a;color:#fff}.control-btn{background:#2a2a2a;border:1px solid #444;padding:6px;border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;justify-content:center;align-items:center;width:40px;height:40px;margin-top:8px;position:relative;z-index:10000}.control-btn:hover{background:#3a3a3a;border-color:#555}.control-btn svg{color:#fff}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;justify-content:flex-start;align-items:flex-start;z-index:10001;padding:20px}.modal-content{background:#2a2a2a;border:1px solid #444;border-radius:12px;padding:24px;min-width:300px;box-shadow:0 8px 32px #00000080;margin-left:50px;margin-top:48px}@media (max-width: 768px){.modal-overlay{justify-content:center;align-items:center;padding:0}.modal-content{max-width:90vw;margin:20px}}.modal-content h3{margin:0 0 16px;color:#fff;font-size:18px;font-weight:600}.modal-content p{margin:0 0 16px;color:#ccc;font-size:14px}.input-group{margin-bottom:32px}.input-group:last-child{margin-bottom:0}.input-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.input-label{font-weight:500;color:#fff;font-size:14px}.input-value{color:#aaa;font-size:14px;background:#333;padding:4px 8px;border-radius:4px;min-width:40px;text-align:center}.grid-select{width:100%;background:#444;color:#fff;outline:1px solid #555;border:none;border-right:8px solid transparent;padding:8px;border-radius:4px;font-size:14px;cursor:pointer}.grid-select:hover{background:#555;outline-color:#666}.grid-select:focus{outline-color:#777}.rule-controls{display:flex;align-items:center;gap:12px}.rule-btn{background:#444;border:1px solid #555;color:#fff;width:32px;height:32px;border-radius:4px;cursor:pointer;font-size:18px;font-weight:700;display:flex;justify-content:center;align-items:center;transition:all .2s ease;flex-shrink:0}.rule-btn:hover{background:#555;border-color:#666}.rule-btn:active{background:#333}.rule-slider{width:100%;height:6px;background:#444;border-radius:3px;outline:none;-webkit-appearance:none;appearance:none}.rule-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#fff;border-radius:50%;cursor:pointer;box-shadow:0 2px 8px #0000004d;transition:all .2s ease}.rule-slider::-webkit-slider-thumb:hover{background:#f0f0f0;transform:scale(1.1)}.rule-slider::-moz-range-thumb{width:20px;height:20px;background:#fff;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 8px #0000004d;transition:all .2s ease}.rule-slider::-moz-range-thumb:hover{background:#f0f0f0;transform:scale(1.1)}.modal-buttons{display:flex;gap:12px;justify-content:flex-end}.modal-btn{padding:10px 20px;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease}.cancel-btn{background:#444;color:#ccc}.cancel-btn:hover{background:#555;color:#fff}.apply-btn{background:#fff;color:#1a1a1a}.apply-btn:hover{background:#f0f0f0}.checkbox-group{display:flex;flex-direction:column;gap:8px}.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;color:#ccc;font-size:14px;transition:color .2s ease}.checkbox-label:hover{color:#fff}.checkbox-label input[type=checkbox]{width:16px;height:16px;background:#444;border:1px solid #555;border-radius:3px;cursor:pointer;-webkit-appearance:none;appearance:none;position:relative;transition:all .2s ease}.checkbox-label input[type=checkbox]:checked{background:#fff;border-color:#fff}.checkbox-label input[type=checkbox]:checked:after{content:"✓";position:absolute;top:0;left:2px;color:#1a1a1a;font-size:12px;font-weight:700}.checkbox-label input[type=checkbox]:hover{border-color:#666}.checkbox-text{-webkit-user-select:none;user-select:none}.button-group{margin-top:24px;padding-top:16px;border-top:1px solid #444;display:flex;justify-content:center}.reset-btn{background:#444;border:1px solid #555;color:#ccc;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease}.reset-btn:hover{background:#555;border-color:#666;color:#fff}.radio-group{display:flex;flex-direction:column;gap:8px}.radio-group.horizontal{flex-direction:row;gap:16px}.radio-label{display:flex;align-items:center;gap:8px;cursor:pointer;color:#ccc;font-size:14px;transition:color .2s ease}.radio-label:hover{color:#fff}.radio-label input[type=radio]{width:16px;height:16px;background:#444;border:1px solid #555;border-radius:50%;cursor:pointer;-webkit-appearance:none;appearance:none;position:relative;transition:all .2s ease}.radio-label input[type=radio]:checked{background:#fff;border-color:#fff}.radio-label input[type=radio]:checked:after{content:"";position:absolute;top:4px;left:4px;width:6px;height:6px;background:#1a1a1a;border-radius:50%}.radio-label input[type=radio]:hover{border-color:#666}.radio-text{-webkit-user-select:none;user-select:none}.slider-container{display:flex;align-items:center;gap:12px;width:100%}.slider-label{color:#aaa;font-size:12px;font-weight:500;-webkit-user-select:none;user-select:none;flex-shrink:0}.range-slider{flex:1;height:6px;background:#444;border-radius:3px;outline:none;-webkit-appearance:none;appearance:none}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#fff;border-radius:50%;cursor:pointer;box-shadow:0 2px 8px #0000004d;transition:all .2s ease}.range-slider::-webkit-slider-thumb:hover{background:#f0f0f0;transform:scale(1.1)}.range-slider::-moz-range-thumb{width:20px;height:20px;background:#fff;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 8px #0000004d;transition:all .2s ease}.range-slider::-moz-range-thumb:hover{background:#f0f0f0;transform:scale(1.1)}