:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#1a1a1a;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden}#root{width:100%;height:100%}.app-container{width:100vw;height:100vh;transition:background-color .3s;position:relative;overflow:hidden}.app-container.dark{background-color:#1a1a1a}.app-container.light{background-color:#f0f0f0}.controls{color:#fff;z-index:1;background:#1e1e1ee6;border-radius:8px;min-width:200px;padding:16px 20px;font-size:14px;position:absolute;top:16px;left:16px}.controls label{flex-direction:column;gap:8px;display:flex}.control-row{align-items:center;gap:4px;margin-bottom:8px;display:flex}.z-cutoff-value{cursor:pointer;background:#ffffff1a;border-radius:3px;padding:2px 6px;font-family:monospace;transition:background-color .15s}.z-cutoff-value:hover{background:#fff3}.z-cutoff-input{color:#fff;background:#0000004d;border:1px solid #fff6;border-radius:3px;width:70px;padding:2px 6px;font-family:monospace;font-size:14px}.z-cutoff-input:focus{border-color:#fff9;outline:none}.controls input[type=range]{cursor:pointer;width:100%}.theme-toggle{color:#fff;cursor:pointer;background:#ffffff26;border:1px solid #ffffff4d;border-radius:4px;width:100%;margin-top:12px;padding:8px 12px;font-size:13px;transition:background-color .15s}.theme-toggle:hover{background:#ffffff40}.legend{color:#fff;z-index:1;background:#1e1e1ee6;border-radius:8px;padding:12px 16px;font-size:12px;position:absolute;bottom:16px;right:16px}.legend-title{border-bottom:1px solid #fff3;margin-bottom:8px;padding-bottom:6px;font-size:13px;font-weight:600}.legend-item{align-items:center;gap:8px;margin:4px 0;display:flex}.legend-color{border-radius:2px;flex-shrink:0;width:16px;height:16px;display:inline-block}.legend-gradient{border-radius:2px;flex-shrink:0;width:40px;height:16px;display:inline-block}.legend-gradient-item{margin:4px 0}.legend-item-clickable{cursor:pointer;border-radius:4px;margin:-4px -6px;padding:4px 6px;transition:background-color .15s}.legend-item-clickable:hover{background-color:#ffffff1a}.gradient-editor{background:#0000004d;border-radius:4px;flex-direction:column;gap:12px;margin-top:8px;padding:10px;display:flex}.gradient-endpoint{flex-direction:column;gap:6px;display:flex}.endpoint-label{color:#ffffffe6;font-size:11px;font-weight:600}.color-preview{border:1px solid #fff3;border-radius:3px;width:100%;height:20px}.gradient-editor label{color:#ffffffb3;align-items:center;gap:8px;font-size:11px;display:flex}.gradient-editor input[type=range]{cursor:pointer;accent-color:#fff;flex:1;height:4px}.tooltip{pointer-events:none;z-index:2;color:#fff;white-space:nowrap;background:#1e1e1eeb;border-radius:6px;padding:8px 10px;font-family:monospace;font-size:12px;line-height:1.5;position:absolute}.tooltip-pinned{pointer-events:auto;border:1px solid #ffffff4d}.highlight-toggle{cursor:pointer;border-top:1px solid #ffffff26;align-items:center;gap:6px;margin-top:6px;padding-top:6px;font-family:sans-serif;font-size:11px;display:flex}