:root{--color-background: rgb(29, 29, 29);--color-text: white;--color-text-muted: rgba(255, 255, 255, .8);--color-text-dimmed: rgba(255, 255, 255, .9);--controls-background: rgba(0, 0, 0, .7);--controls-width: 300px;--controls-padding: 20px;--controls-border-radius: 10px;--button-background: rgba(255, 255, 255, .1);--button-background-hover: rgba(255, 255, 255, .2);--button-background-active: rgba(255, 255, 255, .3);--button-border-color: rgba(255, 255, 255, .2);--spacing-xs: 5px;--spacing-sm: 8px;--spacing-md: 10px;--spacing-lg: 20px;--font-family-base: system-ui, -apple-system, sans-serif;--font-family-mono: monospace;--font-size-sm: .9em;--font-size-base: 1em;--font-size-lg: 1.1em}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;display:flex;gap:var(--spacing-lg);justify-content:center;align-items:center;background-color:var(--color-background);color:var(--color-text);font-family:var(--font-family-base)}canvas{display:block;width:100%;height:100%;user-select:none;-webkit-user-select:none;-moz-user-select:none;border-radius:var(--controls-border-radius)}#controls{position:relative;background:var(--controls-background);padding:var(--controls-padding);border-radius:var(--controls-border-radius);width:var(--controls-width);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.control-group{margin-bottom:var(--spacing-lg)}.control-group h3{margin:0 0 var(--spacing-md) 0;font-size:var(--font-size-base);opacity:.8}.control-tooltip{position:relative}.control-tooltip:before{content:attr(data-tooltip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);width:200px;padding:8px;border-radius:4px;background:var(--controls-background);color:var(--color-text);font-size:var(--font-size-sm);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;pointer-events:none;z-index:1000}.control-tooltip:hover:before{opacity:1;visibility:visible}label{position:relative;display:flex;align-items:center;margin-bottom:var(--spacing-sm);font-size:var(--font-size-sm);gap:var(--spacing-md)}input[type=range]{flex:1}.value{min-width:40px;text-align:right;opacity:.8}input[type=checkbox]{margin-right:var(--spacing-sm)}.stats{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-lg);margin-bottom:var(--spacing-md)}.button-group{display:flex;gap:var(--spacing-sm)}button{background:var(--button-background);border:1px solid var(--button-border-color);color:var(--color-text);padding:var(--spacing-xs) var(--spacing-md);border-radius:4px;cursor:pointer;font-size:var(--font-size-sm);transition:all .2s ease}button:hover{background:var(--button-background-hover)}button.active{background:var(--button-background-active)}#fpsCounter{font-family:var(--font-family-mono);opacity:var(--color-text-dimmed)}