*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;background:#000;overflow:hidden}canvas{display:block;width:100vw;height:100vh}:root{--row-gap: 8px;--section-gap: 12px;--panel-pad: 20px;--label-w: 64px;--val-w: 40px}.mode-toggle{display:flex;gap:2px;background:#ffffff12;border-radius:5px;padding:2px}.mode-btn{flex:1;font-family:Courier New,Courier,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#fff6;background:transparent;border:none;border-radius:3px;padding:5px 0;cursor:pointer;transition:background .15s,color .15s}.mode-btn.active{background:#ffffff24;color:#ffffffe0}.mode-btn:hover:not(.active){color:#fff9}#controls{position:fixed;bottom:28px;left:28px;display:flex;flex-direction:column;gap:var(--section-gap);z-index:10;background:#0000008c;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:var(--panel-pad);min-width:264px;container-type:inline-size;container-name:ctrl-panel}#panel-3d,#panel-mesh,#panel-trails,#panel-2d,#sub-grid,#sub-radial,#sub-trails,#sub-motion,#sub-smoke-3d,#sub-pulse,#sub-wave,#sub-grad-anim,#sub-grad-smoke,#sub-dot-grad,#grad-anim-section,#grad-dot-section,.ctrl-advanced-body{display:flex;flex-direction:column;gap:var(--row-gap)}#grad-ramp-group{display:flex;flex-direction:column;gap:6px}#anim-mode-toggle{flex-wrap:wrap}#anim-mode-toggle .mode-btn{flex:1 1 22%}.ctrl-row{display:flex;align-items:center;gap:12px;min-height:32px}.ctrl-label{font-family:Courier New,Courier,monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#ffffff8c;width:var(--label-w);flex-shrink:0}.ctrl-val{font-family:Courier New,Courier,monospace;font-size:10px;color:#ffffff73;width:var(--val-w);flex-shrink:0;text-align:right}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;min-width:0;height:2px;background:#ffffff2e;outline:none;cursor:pointer;border:none;padding:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:9px;border-radius:50%;background:#fffc;cursor:pointer;transition:background .15s}input[type=range]::-webkit-slider-thumb:hover{background:#fff}input[type=range]::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:#fffc;cursor:pointer;border:none}input[type=range]::-moz-range-track{background:#ffffff2e;height:2px}.ctrl-sep{height:1px;background:#ffffff14;margin:4px 0}details.ctrl-advanced>summary{font-family:Courier New,Courier,monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#ffffff59;cursor:pointer;list-style:none;display:flex;align-items:center;min-height:28px;padding:2px 0;-webkit-user-select:none;user-select:none}details.ctrl-advanced>summary::-webkit-details-marker,details.ctrl-advanced>summary::marker{display:none}details.ctrl-advanced>summary:after{content:"▾";margin-left:auto;font-size:9px;color:#ffffff40;display:inline-block;transition:transform .15s}details.ctrl-advanced[open]>summary:after{transform:rotate(-180deg)}.ramp-section{display:flex;flex-direction:column;gap:8px}.ramp-label{display:block;font-family:Courier New,Courier,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#ffffffb3}.ramp-bar{height:14px;border-radius:3px;border:1px solid rgba(255,255,255,.12);cursor:pointer}.ramp-stops{display:flex;justify-content:space-between}.ramp-stop{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}.ramp-swatch{width:22px;height:14px;border-radius:2px;border:1px solid rgba(255,255,255,.25)}.ramp-stop-label{font-family:Courier New,Courier,monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#ffffff59}.ramp-mid-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:14px;background:transparent;outline:none;cursor:ew-resize;padding:0;margin:-3px 0 0}.ramp-mid-slider::-webkit-slider-runnable-track{background:transparent;height:0}.ramp-mid-slider::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;background:#ffffffe6;border:1px solid rgba(0,0,0,.5);border-radius:1px;transform:rotate(45deg);cursor:ew-resize;margin-top:2px}.ramp-mid-slider::-moz-range-track{background:transparent;height:0}.ramp-mid-slider::-moz-range-thumb{width:10px;height:10px;background:#ffffffe6;border:1px solid rgba(0,0,0,.5);border-radius:1px;transform:rotate(45deg);cursor:ew-resize}input[type=color]{display:none}#ramp3d-outer{position:relative;height:30px;-webkit-user-select:none;user-select:none}#ramp3d-bar{height:14px;border-radius:3px;border:1px solid rgba(255,255,255,.12);cursor:default}#ramp3d-handles{position:absolute;bottom:0;left:0;width:100%;height:14px;pointer-events:none}#ramp-mesh-outer{position:relative;height:30px;-webkit-user-select:none;user-select:none}#ramp-mesh-bar{height:14px;border-radius:3px;border:1px solid rgba(255,255,255,.12);cursor:default}#ramp-mesh-handles{position:absolute;bottom:0;left:0;width:100%;height:14px;pointer-events:none}#ramp2d-outer{position:relative;height:30px;-webkit-user-select:none;user-select:none}#ramp2d-bar{height:14px;border-radius:3px;border:1px solid rgba(255,255,255,.12);cursor:default}#ramp2d-handles{position:absolute;bottom:0;left:0;width:100%;height:14px;pointer-events:none}.ramp2d-handle{position:absolute;width:10px;height:10px;transform:translate(-50%) rotate(45deg);border:1px solid rgba(255,255,255,.4);border-radius:1px;cursor:ew-resize;pointer-events:all;box-sizing:border-box;transition:border-color .1s}.ramp2d-handle.selected{border-color:#ffffffe6;box-shadow:0 0 0 1px #ffffff59}.ramp2d-actions{display:flex;gap:4px}.ramp2d-actions .mode-btn{flex:0 0 auto;padding:4px 10px}#gizmo-canvas{position:fixed;bottom:28px;right:28px;width:88px;height:88px;z-index:10;cursor:grab;border-radius:50%}#gizmo-canvas:active{cursor:grabbing}#panel-grad{position:fixed;bottom:28px;right:28px;display:flex;flex-direction:column;gap:10px;z-index:10;background:#0000008c;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:var(--panel-pad);min-width:240px;container-type:inline-size;container-name:grad-panel}@container ctrl-panel (max-width: 220px){.ctrl-row{flex-wrap:wrap;min-height:auto;gap:6px}.ctrl-label{width:100%;flex-basis:100%}}@container grad-panel (max-width: 180px){.ctrl-row{flex-wrap:wrap;min-height:auto;gap:6px}.ctrl-label{width:100%;flex-basis:100%}}