.canvas-container{position:relative;width:100%;flex:1;min-height:0;background-color:#0a0a0a;touch-action:none;user-select:none;-webkit-user-select:none}.selection-toolbar{position:absolute;display:flex;gap:6px;transform:translate(-50%);pointer-events:auto;z-index:10}.sel-btn{padding:4px 10px;font-size:12px;font-weight:500;background:#3a3a3a;color:#ddd;border:1px solid #606060;border-radius:4px;cursor:pointer;white-space:nowrap;touch-action:manipulation;user-select:none;-webkit-user-select:none}.sel-btn:hover{background:#4a4a4a;color:#fff}.sel-btn-delete{border-color:#803030;color:#ff9090}.sel-btn-delete:hover{background:#5a2020;color:#fbb}.drawing-canvas{width:100%;height:100%;background-color:#1a1a1a;cursor:crosshair;display:block;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.app{display:flex;flex-direction:column;width:100%;height:100%;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.header{padding:15px 20px;padding-top:max(15px,calc(env(safe-area-inset-top) + 8px));padding-left:max(20px,calc(env(safe-area-inset-left) + 20px));padding-right:max(20px,calc(env(safe-area-inset-right) + 20px));background-color:#2a2a2a;border-bottom:2px solid #404040;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;flex-shrink:0;touch-action:none}.header h1{font-size:24px;margin:0;font-weight:600;letter-spacing:.5px}.controls{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.tool-group{display:flex;align-items:center;gap:8px;padding:0 10px;border-right:1px solid #404040}.tool-group label{font-size:14px;font-weight:500;color:#ddd}.tool-btn{padding:6px 12px;background-color:#3a3a3a;color:#aaa;border:1px solid #505050;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;transition:all .2s}.tool-btn:hover{background-color:#4a4a4a;color:#ddd}.tool-btn.active{background-color:#5a5a5a;color:#fff;border-color:#707070;box-shadow:0 0 8px #fff3}.tool-btn:disabled{opacity:.4;cursor:not-allowed;background-color:#3a3a3a;color:#aaa}.tool-btn:disabled:hover{background-color:#3a3a3a;color:#aaa}.control-group{display:flex;align-items:center;gap:8px}.control-group.info{color:#aaa;font-size:13px;margin-left:10px;padding-left:10px;border-left:1px solid #404040}.control-group label{font-size:14px;font-weight:500;color:#ddd}.control-group input[type=color]{width:40px;height:32px;border:2px solid #505050;border-radius:4px;cursor:pointer;background:none}.clear-btn{position:relative;overflow:hidden}.clear-btn:after{content:"";position:absolute;left:0;top:0;height:100%;width:0;background:rgba(220,60,60,.45);pointer-events:none}.clear-btn-pressing:after{width:100%;transition:width 2s linear}.width-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;padding:0}.width-dot{border-radius:50%;background-color:currentColor;display:block;min-width:2px;min-height:2px;max-width:20px;max-height:20px}.scene-info{color:#aaa;font-size:13px;padding:6px 12px;background-color:#3a3a3a;border-radius:4px;border:1px solid #505050}.scene-panel{padding:15px 20px;padding-bottom:max(15px,calc(env(safe-area-inset-bottom) + 8px));padding-left:max(20px,calc(env(safe-area-inset-left) + 20px));padding-right:max(20px,calc(env(safe-area-inset-right) + 20px));background-color:#2a2a2a;border-top:2px solid #404040;overflow-x:auto;overflow-y:hidden;flex-shrink:0;min-height:130px;display:flex;align-items:center;z-index:100;touch-action:pan-x}.scene-list{display:flex;gap:10px;flex-wrap:nowrap}.scene-btn{padding:4px;background-color:#3a3a3a;color:#ddd;border:2px solid #505050;border-radius:4px;cursor:pointer;font-size:12px;font-weight:500;min-width:120px;min-height:90px;transition:all .2s;white-space:nowrap;flex-shrink:0;background-size:cover;background-position:center;position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}.scene-btn-label{background:rgba(0,0,0,.6);padding:4px 8px;border-radius:2px;font-size:11px;margin-bottom:4px}.scene-btn:hover{background-color:#4a4a4a;color:#fff;border-color:#606060}.scene-btn.active{background-color:#0a6e3a;color:#fff;border-color:#1a9e5a;box-shadow:0 0 8px #1a9e5a66}.scene-btn.previewing{border-color:#4a9eff;box-shadow:0 0 10px #4a9eff99;outline:none}@keyframes anim-from-glow{0%,to{box-shadow:0 0 6px #1a9e5a80}50%{box-shadow:0 0 18px #1a9e5a,0 0 6px #1a9e5acc}}.scene-btn.animating-from{animation:anim-from-glow .4s ease-in-out infinite}.scene-btn.animating-to{border-color:#4a9eff;box-shadow:0 0 10px #4a9eff8c}.scene-btn.animating-to:hover{border-color:#4a9eff;box-shadow:0 0 14px #4a9effb3}.scene-btn.skipped{opacity:.38;filter:grayscale(.85);cursor:default}.scene-btn.skipped:hover{background-color:#3a3a3a;color:#ddd;border-color:#505050;box-shadow:none}.scene-btn.skipped.active{opacity:.6}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#1a1a1a;color:#fff;overflow:hidden}#root{display:flex;flex-direction:column}