:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#0a0a0a;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;padding:0;min-width:320px;min-height:100vh;overflow:hidden}#root{width:100%;height:100%;margin:0;padding:0}button{font-family:inherit;cursor:pointer}button:focus,button:focus-visible{outline:2px solid #646cff;outline-offset:2px}.sidebar-wrapper{position:fixed;top:0;left:0;z-index:999;width:280px;height:100%;transform:translate(-100%);transition:transform .3s ease-in-out}.sidebar-wrapper.open{transform:translate(0)}.sidebar-wrapper .sidebar{background-color:#1a1a1a;color:#fff;height:100%;overflow-y:auto;box-shadow:2px 0 10px #0000004d}.sidebar-wrapper .sidebar-content{padding:1.5rem}.sidebar-wrapper .sidebar-title{font-size:1.5rem;font-weight:600;margin:0 0 1.5rem;color:#fff;border-bottom:1px solid #333;padding-bottom:1rem}.sidebar-wrapper .sidebar-nav{width:100%}.sidebar-wrapper .shader-list{list-style:none;padding:0;margin:0}.sidebar-wrapper .shader-item{margin-bottom:.5rem}.sidebar-wrapper .shader-button{width:100%;padding:1rem;background-color:#2a2a2a;border:1px solid #333;border-radius:8px;color:#fff;text-align:left;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;gap:.25rem}.sidebar-wrapper .shader-button:hover,.sidebar-wrapper .shader-button:focus-visible{background-color:#3a3a3a;border-color:#555;transform:translate(4px)}.sidebar-wrapper .shader-button.active{background-color:#4a4a4a;border-color:#666;box-shadow:0 2px 8px #0000004d}.sidebar-wrapper .shader-name{font-size:1rem;font-weight:500;color:#fff}.sidebar-wrapper .shader-description{font-size:.875rem;color:#aaa}.sidebar-wrapper .toggle-button{position:absolute;top:1rem;right:-4rem;z-index:1000;background-color:#1a1a1ae6;border:1px solid #333;border-radius:8px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.sidebar-wrapper .toggle-button:hover,.sidebar-wrapper .toggle-button:focus-visible{background-color:#2a2a2ae6;border-color:#555}.sidebar-wrapper .toggle-button .toggle-button-icon{display:flex;flex-direction:column;gap:5px;width:24px;height:18px;justify-content:space-between}.sidebar-wrapper .toggle-button .hamburger-line{width:100%;height:2px;background-color:#fff;transition:all .3s ease;border-radius:2px}.sidebar-wrapper .toggle-button .hamburger-line.open:nth-child(1){transform:rotate(45deg) translate(6px,6px)}.sidebar-wrapper .toggle-button .hamburger-line.open:nth-child(2){opacity:0}.sidebar-wrapper .toggle-button .hamburger-line.open:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}.app,.main-content{position:relative;width:100%;height:100vh}.app{display:flex;overflow:hidden;background-color:#0a0a0a}.main-content{flex:1;margin-left:0;transition:margin-left .3s ease}.main-content.sidebar-open{margin-left:280px}.shader-container,.shader-viewer{width:100%;height:100%;position:relative}.shader-viewer canvas{width:100%;height:100%;touch-action:none;cursor:crosshair}.shader-viewer .touch-indicator{position:absolute;transform:translate(-50%,-50%);z-index:10;width:20px;height:20px;border-radius:50%;border:2px solid rgba(255 255 255 / .6);background:#ffffff1a;pointer-events:none;opacity:1;box-shadow:0 0 20px #ffffff4d;transition:opacity .2s ease-out,transform .2s ease-out}.shader-viewer .touch-indicator.fading{opacity:0;transform:translate(-50%,-50%) scale(1.3)}@media(pointer:fine){.shader-viewer .touch-indicator{display:none}}.loading{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#fff;font-size:1.2rem}