:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#fff;background-color:#000;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body,#root{height:100%;width:100%;overflow:hidden}body{position:fixed;inset:0}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%;overflow:hidden;background:#000}.app{position:relative;height:100%;width:100%;background:#000;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.controls{position:absolute;top:0;left:0;right:0;display:flex;flex-wrap:wrap;align-items:center;padding:12px 16px;gap:8px 12px;z-index:10;pointer-events:none;padding-top:max(12px,env(safe-area-inset-top));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}.controls>*{pointer-events:auto}.material-dropdown{position:relative;flex-shrink:0;margin-right:80px}.material-dropdown-trigger{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:14px;font-weight:600;text-transform:capitalize;background:#222;color:var(--material-color);border:2px solid var(--material-color);border-radius:8px;cursor:pointer;transition:all .15s ease;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;box-shadow:0 0 12px color-mix(in srgb,var(--material-color) 30%,transparent);white-space:nowrap}.material-dropdown-trigger:hover{background:#2a2a2a}.dropdown-arrow{width:18px;height:18px;transition:transform .2s ease;flex-shrink:0}.material-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;display:inline-block}.material-dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;background:#1a1a1a;border:1px solid #333;border-radius:10px;padding:6px;max-height:80vh;overflow-y:auto;overflow-x:hidden;z-index:100;display:flex;flex-direction:column;gap:2px;min-width:400px;box-shadow:0 8px 32px #0009;scrollbar-width:thin;scrollbar-color:#444 transparent}.material-category{display:flex;flex-direction:column;gap:2px}.material-category-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#888;padding:6px 8px 2px}.material-category-items{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}.material-dropdown-menu::-webkit-scrollbar{width:6px}.material-dropdown-menu::-webkit-scrollbar-track{background:transparent}.material-dropdown-menu::-webkit-scrollbar-thumb{background:#444;border-radius:3px}.material-dropdown-item{display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:13px;font-weight:500;text-transform:capitalize;background:transparent;color:#999;border:1px solid transparent;border-radius:6px;cursor:pointer;transition:all .1s ease;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;white-space:nowrap}.material-dropdown-item:hover{background:#252525;color:#ccc}.material-dropdown-item.active{background:#252525;color:#fff;border-color:#444}.action-btns{display:flex;gap:6px;flex-shrink:0}.ctrl-btn{width:40px;height:40px;background:#1a1a1a;color:#aaa;border:none;border-radius:10px;cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;outline:none;padding:0}.ctrl-btn svg{width:18px;height:18px}.ctrl-btn:focus{outline:none}.ctrl-btn:focus-visible{outline:none}.ctrl-btn:hover:not(.disabled){background:#252525;color:#ccc}.ctrl-btn:active:not(.disabled){transform:scale(.92)}.ctrl-btn.disabled{background:#151515;color:#333;cursor:default}.ctrl-btn.playpause.playing{color:#4ade80}.ctrl-btn.playpause.paused{color:#60a5fa}.ctrl-btn.reset:hover{color:#a3a3a3}.ctrl-btn.reset.armed{color:#f87171;box-shadow:0 0 20px #f8717166,0 0 40px #f8717133,inset 0 0 20px #f871711a}.brush-size{display:flex;align-items:center;gap:4px;padding:6px 10px;background:#1a1a1a;border-radius:8px;color:#aaa;font-size:13px;font-weight:600;cursor:ew-resize;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent;transition:color .15s ease;flex-shrink:0}.brush-size:hover{color:#ccc}.brush-size svg{width:18px;height:18px}.canvas-container{position:relative;width:100%;height:100%;overflow:hidden;background:#1a1a1a;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.canvas-container canvas{display:block;width:100%;height:100%}.fps-counter{position:absolute;top:6px;right:8px;font:12px/1 monospace;color:#ffffff80;pointer-events:none}@media(max-width:600px){.controls{padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top));gap:8px}.material-dropdown-trigger{padding:6px 10px;font-size:12px}.material-dropdown-menu{min-width:200px}.material-category-items{grid-template-columns:repeat(2,1fr)}.material-dropdown-item{padding:6px 8px;font-size:12px}.action-btns{gap:5px}.ctrl-btn{width:36px;height:36px;border-radius:8px}.ctrl-btn svg{width:16px;height:16px}.brush-size{padding:5px 8px;font-size:12px}.brush-size svg{width:16px;height:16px}}body{overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}