: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{flex-shrink:0}.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;touch-action: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-modal-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:flex-start;justify-content:center;padding-top:60px;z-index:200;overflow:hidden}.material-modal{background:#1a1a1a;border:1px solid #333;border-radius:12px;padding:16px;max-height:min(80vh,100dvh - 24px);max-width:calc(100vw - 24px);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:4px;min-width:420px;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:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#888;padding:8px 8px 4px}.material-category-items{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}.material-modal::-webkit-scrollbar{width:6px}.material-modal::-webkit-scrollbar-track{background:transparent}.material-modal::-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.pan-toggle.active{color:#6cb4ee;background:#1a2a3a}.view-controls{position:absolute;top:0;left:0;display:flex;gap:6px;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));padding-left:max(16px,env(safe-area-inset-left));z-index:10;pointer-events:auto}.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-modal{min-width:0;width:calc(100vw - 24px);max-height:min(85vh,100dvh - 24px);padding:12px;gap:2px}.material-category-label{padding:6px 6px 2px;font-size:11px}.material-category-items{grid-template-columns:repeat(3,1fr)}.material-dropdown-item{padding:6px;font-size:12px;gap:5px}.action-btns{gap:5px}.ctrl-btn{width:36px;height:36px;border-radius:8px}.ctrl-btn svg{width:16px;height:16px}.view-controls{padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top));padding-left:max(10px,env(safe-area-inset-left));gap:5px}}body{overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}.settings-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:200}.settings-modal{background:#1a1a1a;border:1px solid #333;border-radius:12px;padding:20px;min-width:280px;max-width:360px}.settings-title{font-size:16px;font-weight:700;color:#ddd;margin-bottom:4px}.settings-subtitle{font-size:12px;color:#666;margin-bottom:16px}.settings-options{display:flex;flex-direction:column;gap:6px}.settings-option{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#222;border:1px solid #333;border-radius:8px;color:#ccc;cursor:pointer;transition:all .15s ease;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.settings-option:hover{background:#2a2a2a;border-color:#555;color:#fff}.settings-option:active{transform:scale(.98)}.settings-option-label{font-size:14px;font-weight:600}.settings-option-dims{font-size:12px;color:#888;font-family:monospace}.settings-warn{font-size:11px;color:#665;margin-top:12px;text-align:center}.settings-section{display:flex;flex-direction:column}.settings-divider{height:1px;background:#333;margin:16px 0}.settings-option-icon{width:18px;height:18px;color:#888;flex-shrink:0}