:root{--bg: #1a1c29;--surface: rgba(40, 44, 60, .6);--shade: #2c3e50;--accent: #1abc9c;--text: #ecf0f1}html,body{margin:0;padding:0;height:100%;overscroll-behavior:none;-ms-scroll-chaining:none;-webkit-overflow-scrolling:auto}body{display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:var(--bg);touch-action:none;-webkit-user-select:none;user-select:none}canvas{display:block;max-width:100vw;max-height:100vh;width:auto;height:auto;touch-action:none;-webkit-user-select:none;user-select:none;z-index:0}.popup{font-family:Arial,Helvetica,sans-serif;font-size:35px;width:800px;background:var(--shade);border-radius:16px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;padding:0 40px 20px;color:var(--text);visibility:hidden;z-index:10}.close-popup{display:none!important}.popup img{width:200px;margin-top:40px}.popup button{width:40%;padding:20px 0;margin-top:20px;border-radius:20px;font-size:40px;font-weight:700;color:var(--text);background:var(--surface);border:0;box-shadow:0 2px 6px var(--bg)}.popup button:active{background:var(--accent);color:var(--text);box-shadow:0 4px 16px var(--accent);transform:scale(.97);transition:background .1s,color .1s,box-shadow .1s,transform .1s}.sidebar{position:fixed;top:0;right:0;width:250px;height:100%;background-color:var(--surface);padding:20px;transform:translate(100%);transition:transform .3s ease;transform-origin:top right;z-index:1000;overflow-y:auto;scrollbar-color:var(--shade) var(--bg);touch-action:none;-webkit-user-select:none;user-select:none}.sidebar.active{transform:translate(0)}.sidebar.active.portrait-size{transform:translate(0) scale(2)}.sidebar.portrait-size~#toggle-btn,.sidebar.active.portrait-size~#toggle-btn{font-size:3rem;padding:20px 30px;border-radius:8px}.sidebar ul{list-style:none;margin:0;padding:0}.sidebar-btn{display:block;width:100%;padding:12px;border:none;background:none;cursor:pointer;text-align:center}.sidebar-btn img{display:inline-block;width:100px;height:100px}.sidebar-btn.active,.sidebar-btn:hover{background:var(--shade)}#toggle-btn{position:fixed;top:20px;right:20px;background-color:var(--shade);color:var(--text);border:none;padding:10px 15px;font-size:1.2rem;cursor:pointer;z-index:1100;border-radius:4px}.drag-preview{position:absolute;pointer-events:none;opacity:.5;transform:translate(-50%,-50%);z-index:1000;touch-action:none;-webkit-user-select:none;user-select:none}button,.sidebar-btn,.slider-controls button{-webkit-tap-highlight-color:transparent}.slidecontainer{width:100%}.slider{-webkit-appearance:none;width:100%;height:3px;border-radius:5px;background:var(--shade);outline:none;transition:opacity .2s}.slider:hover{opacity:1}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background:var(--accent);cursor:pointer}.slider::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--accent);cursor:pointer}.slider-output{color:var(--text);font-family:Arial,Helvetica,sans-serif;letter-spacing:.1vh;opacity:1}.slider-controls{display:flex;justify-content:space-between;align-items:center}.slider-controls button{background:none;border:none;padding:0;font:inherit;color:var(--text);cursor:pointer;appearance:none}.slider-controls button:focus{outline:none}