:root{--slider-height: .9rem;--font-height1: 1rem;--font-height2: 2rem;--font-height3: 1.2rem;--number-box-width: 3.5rem;--number-ease-box-width: 2.5rem;--ease-box-width: 1.25rem;--view-grid: 57%;--ui-grid-l: 18%;--ui-grid-r: 25%;--ease-channel-grid: 8%;--arm-channel-grid: 5%;--number-slider-grid: 58%;--number-value-grid: 15%;--slider-grid: 80%;--number-grid: 20%;--menu-bar-size: 1.75rem;--input-margin: .1rem;--input-text-top-padding: .1rem;--input-text-btm-padding: .1rem;--clr-bg-main: #2f2f2f;--clr-bg-secondary: #3b3b3b;--clr-bg-input-light:#d3d3d3;--clr-bg-input-dark: #d3d3d355;--clr-font-main: #b5c9d8;--clr-text-input: #17385e;--clr-default-input: #768daa;--clr-channel-1: #768daa;--clr-channel-focused-1: #7ae1ed;--clr-channel-2: #8a76aa;--clr-channel-focused-2: #b27aed;--clr-channel-3: #76aa80;--clr-channel-focused-3: #7aed82;--clr-channel-4: #a8aa76;--clr-channel-focused-4: #edeb7a;--clr-channel-5: #aa7676;--clr-channel-focused-5: #ed7a7a;--clr-channel-0: #a4a4a4;--clr-channel-focused-0: #eeecee;--clr-selected-input: #d7903fdd;--clr-selected-input-hover: #b48148dd;--clr-highlight-input: #fdfdfd;--clr-border: #5c6d84cc;--clr-border-focus: #e4e1e1cc;--clr-channel-checkbox-1: #505050;--clr-channel-checkbox-2: #606060}@media (max-width: 1100px){:root{--slider-height: .7rem;--font-height1: .7rem;--font-height2: 16px;--view-grid: 40%;--ui-grid-l: 30%;--ui-grid-r: 30%;--slider-grid: 75%;--number-grid: 25%;--input-margin: .03rem;--number-box-width: 2.75rem}}@media (max-width: 1400px){.channel-columns{grid-template-columns:auto 1fr 1fr 1fr auto;font-size:.85rem}}*{margin:0;padding:0;font-family:Inconsolata,monospace;font-optical-sizing:auto;font-weight:300;color:var(--clr-font-main);font-style:normal;font-size:var(--font-height1)}*::selection{color:#050b11;background:#aaaaaa}html,body{width:100%;height:100%;overflow:hidden;background-color:#0b1724}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield}input[type=checkbox]{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:var(--slider-height);height:var(--slider-height);border-radius:3px;background-color:var(--clr-bg-input-dark);border:1px solid #5c6d84cc;cursor:pointer;position:relative;flex-shrink:0;margin:0;align-self:center}input[type=checkbox]:hover{background-color:#d3d3d399}input[type=checkbox]:checked{background-color:var(--clr-selected-input);border-color:var(--clr-default-input)}input[type=checkbox]:checked:hover{background-color:var(--clr-selected-input-hover);border-color:var(--clr-default-input)}input[type=checkbox]:focus{outline-width:1px;outline-color:var(--clr-border-focus);outline-style:groove}input[type=checkbox]{transition:background-color .2s ease,border-color .2s ease}input[type=color]{padding:0}input[type=color]::-moz-color-swatch{border:none}input[type=color]::-webkit-color-swatch-wrapper{padding:0;border-radius:0}input[type=color]::-webkit-color-swatch{border:none}input[type=range]::-webkit-slider-runnable-track{height:15px;background:#ccc;border-radius:16px}.medium-font{font-style:normal;font-size:var(--font-height1)}.header-text{font-size:var(--font-height2);font-weight:400}.sub-header-text{font-size:var(--font-height3);font-weight:400;padding-top:var(--input-text-top-padding);padding-bottom:0rem}.label-text{padding-top:var(--input-text-top-padding);padding-bottom:var(--input-text-btm-padding)}#menu-bar{position:relative;display:flex;align-items:center;gap:0;background-color:color-mix(in srgb,var(--clr-bg-main),black 20%);height:var(--menu-bar-size);padding:0 .5rem;z-index:500}#menu-bar[hidden]{display:none}.menu-title{font-size:.9rem;font-weight:500;padding:0 1rem 0 .25rem;color:var(--clr-font-main)}.menu-dropdown{position:relative}.menu-dropdown-btn{background:transparent;border:none;color:var(--clr-font-main);padding:.25rem .75rem;cursor:pointer;font-size:.85rem;border-radius:.2rem;transition:background-color .15s ease}.menu-dropdown-btn:hover{background-color:var(--clr-bg-secondary)}.menu-dropdown-content{display:none;position:absolute;top:100%;left:0;min-width:160px;background-color:var(--clr-bg-main);border:1px solid var(--clr-border);border-radius:.25rem;box-shadow:0 4px 12px #0000004d;z-index:600;padding:.25rem 0}.menu-dropdown:hover .menu-dropdown-content{display:block}.menu-item{display:block;width:100%;background:transparent;border:none;color:var(--clr-font-main);padding:.4rem 1rem;text-align:left;cursor:pointer;font-size:.85rem;transition:background-color .15s ease}.menu-item:hover{background-color:var(--clr-bg-secondary)}.menu-divider{height:1px;background-color:var(--clr-border);margin:.25rem 0}.menu-settings-btn{margin-left:auto;background:transparent;border:none;color:var(--clr-font-main);font-size:1.4rem;cursor:pointer;padding:.15rem .5rem;border-radius:.2rem;transition:background-color .15s ease;display:flex;align-items:center}.menu-settings-btn:hover{background-color:var(--clr-bg-secondary)}#settings .modal{width:auto;min-width:20rem;max-width:30rem}.settings-container{display:grid;grid-template-columns:auto 10rem 3.5rem;column-gap:.75rem;row-gap:.35rem;align-items:center;padding:1rem 1.5rem 1.5rem}.settings-container .sub-header-text{grid-column:1 / -1;margin-top:.5rem}.settings-container .sub-header-text:first-child{margin-top:0}.settings-container .bottom-outline{grid-column:1 / -1}.settings-row{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:center}.settings-row .label-text{white-space:nowrap;padding:0}.settings-row .control-select{grid-column:2 / -1}.settings-value{padding:.15rem .25rem}#main-grid{order:2;display:grid;grid-template-columns:var(--ui-grid-l) var(--view-grid) var(--ui-grid-r);grid-template-areas:"ui-l center ui-r";width:100%;height:calc(100% - var(--menu-bar-size))}#main-grid.expanded{height:100%}#main-grid.expanded #ui-grid-l{transform:translate(-100%);opacity:0;pointer-events:none}#main-grid.expanded #ui-grid-r{transform:translate(100%);opacity:0;pointer-events:none}#ui-grid-l{position:relative;grid-area:ui-l;background-color:var(--clr-bg-main);padding:.5rem;display:grid;grid-template-rows:8fr 1fr;grid-template-areas:"controls" "footer";overflow-y:auto;overflow-x:hidden;transition:transform .4s ease,opacity .4s ease}#ui-grid-l::-webkit-scrollbar{width:4px}#ui-grid-l::-webkit-scrollbar-track{background:#1a1a1a;border-radius:4px}#ui-grid-l::-webkit-scrollbar-thumb{background:#5c6d84cc;border-radius:4px}#ui-grid-l::-webkit-scrollbar-thumb:hover{background:var(--clr-default-input)}#center-grid{z-index:0;display:grid;grid-template-rows:1fr auto;grid-template-areas:"viewer" "timeline";height:100%;grid-column:2}#center-grid.expanded{grid-column:1 / -1;grid-row:1;z-index:1}#viewer{position:relative;grid-area:viewer;border:none}.modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000}.modal-backdrop[hidden]{display:none}.modal{position:relative;width:80%;max-height:80vh;padding-top:2.5rem;background-color:var(--clr-bg-secondary);border-radius:.5rem;box-shadow:0 8px 32px #0006;overflow-y:auto;overflow-x:hidden}.modal:has(.modal-header){padding-top:0}.modal::-webkit-scrollbar{width:8px}.modal::-webkit-scrollbar-track{background:#1a1a1a;border-radius:4px}.modal::-webkit-scrollbar-thumb{background:#5c6d84cc;border-radius:4px}.modal::-webkit-scrollbar-thumb:hover{background:var(--clr-default-input)}.modal-header{display:flex;align-items:center;gap:.5rem;padding:.5rem;background-color:color-mix(in srgb,var(--clr-bg-secondary),black 15%);border-bottom:1px solid var(--clr-border)}.modal-title{font-size:1rem;font-weight:400;color:var(--clr-font-main)}.modal-close-btn{position:absolute;top:.5rem;left:.5rem;width:2rem;height:2rem;background-color:#0006;border:1px solid rgba(255,255,255,.2);border-radius:.25rem;color:#ffffffb3;font-size:1.4rem;line-height:1;cursor:pointer;z-index:10;transition:background-color .2s ease,color .2s ease}.modal-header .modal-close-btn{position:static;flex-shrink:0}.modal-close-btn:hover{background-color:#0009;color:#fff}.fullscreen-btn{position:absolute;bottom:.75rem;right:.75rem;width:2rem;height:2rem;background-color:#0006;border:1px solid rgba(255,255,255,.2);border-radius:.25rem;color:#fff9;font-size:1.2rem;cursor:pointer;opacity:.5;transition:opacity .2s ease,background-color .2s ease;display:flex;align-items:center;justify-content:center;z-index:10}.fullscreen-btn:hover{opacity:1;background-color:#0009;color:#ffffffe6}#main-grid.expanded .fullscreen-btn{opacity:0;pointer-events:none;transition:opacity .3s ease}#main-grid.expanded .fullscreen-btn.visible{opacity:.7;pointer-events:auto}#main-grid.expanded .fullscreen-btn.visible:hover{opacity:1}#timeline{padding:0;grid-area:timeline}#ui-grid-r{position:relative;grid-area:ui-r;background-color:var(--clr-bg-main);padding:.5rem;display:grid;grid-template-rows:8fr 1fr;grid-template-areas:"controls" "footer";overflow-y:auto;overflow-x:hidden;transition:transform .4s ease,opacity .4s ease}#ui-grid-r::-webkit-scrollbar{width:8px}#ui-grid-r::-webkit-scrollbar-track{background:#1a1a1a;border-radius:4px}#ui-grid-r::-webkit-scrollbar-thumb{background:#5c6d84cc;border-radius:4px}#ui-grid-r::-webkit-scrollbar-thumb:hover{background:var(--clr-default-input)}#controls-grid{grid-area:controls}.webgl-container{order:-1;cursor:crosshair;width:100%}.webgl{position:fixed;outline:none}.select-container{grid-area:controls;position:relative;display:flex}.slider-container{position:relative;margin:var(--input-margin)}.button-container{position:relative;justify-content:space-between;display:flex;margin:auto;width:100%;margin-top:.2rem;padding:.2rem .1rem 0}.container{width:100%;height:100%;justify-self:stretch}.timeline-slider-container{padding:0;border-width:2px;border-style:solid;border-color:var(--clr-border)}#channels-container{background-color:var(--clr-bg-secondary);padding:.4rem;margin:.3rem 0 0;border-radius:.3rem}.channel-columns{position:relative;background-color:var(--clr-bg-main);padding:0;display:grid;grid-template-columns:1fr 2fr 4fr 4fr 3fr 3fr;grid-template-areas:"number checkbox ease duration offset clear"}.channel-number-container{background-color:var(--clr-channel-checkbox-1);text-align:center;grid-area:number}.channel-checkbox-container{background-color:var(--clr-channel-checkbox-2);text-align:center;grid-area:checkbox}.channel-ease-container{background-color:var(--clr-channel-checkbox-1);padding:0;text-align:center;grid-area:ease}.channel-duration-container{background-color:var(--clr-channel-checkbox-2);padding:0;text-align:center;grid-area:duration}.channel-offset-container{background-color:var(--clr-channel-checkbox-1);padding:0;text-align:center;grid-area:offset}.channel-clear-btn-container{background-color:var(--clr-channel-checkbox-2);padding:0;text-align:center;grid-area:clear}input.channel-checkbox{border-radius:0;border-width:1.5px;border-color:#818181;width:100%;height:100%}.channel-number-input{width:100%;height:100%;background-color:transparent;border-width:0;text-align:center;overflow:hidden;text-overflow:ellipsis}.channel-number-input:focus-visible{outline-style:solid;outline-color:var(--clr-font-main);outline-offset:-2px;outline-width:2px;border-width:0}.channel-select-input{border-width:0;background-color:transparent;overflow:hidden;text-overflow:ellipsis}.channel-select-input:focus-visible,.channel-select-input:focus{outline-style:solid;outline-color:var(--clr-font-main);outline-offset:-2px;outline-width:2px;border-width:0}.channel-clear-btn{width:100%;height:100%;border-width:0;background-color:transparent;cursor:pointer;transition:background-color .2s ease}.channel-clear-btn:hover{background-color:#3e3e3edd}#colors-container{padding-top:.4rem}.colorpicker{width:100%;height:22px;padding:0;margin:.2rem 0;border-radius:.2rem;border:1px solid #d3d3d3cc}.three-width-btn{width:31%}.control-button{padding:.2rem;border-radius:.2rem;border-width:0;cursor:pointer;transition:background-color .2s ease,border-color .2s ease}.control-button:disabled,button:disabled,input:disabled,select:disabled{opacity:.5;cursor:not-allowed}.default-button{background-color:#d3d3d3cc;color:var(--clr-text-input)}.default-button:hover:not(:disabled){background-color:#d3d3d399}.selected-button{background-color:var(--clr-selected-input);color:var(--clr-text-input)}.selected-button:hover:not(:disabled){background-color:var(--clr-selected-input-hover)}.timeline-button{width:19%;display:flex;justify-content:center;align-items:center;padding:.05rem;margin:.05rem;border-radius:.2rem;border-width:0;cursor:pointer;transition:background-color .2s ease,border-color .2s ease}.timeline-button.active{background-color:var(--clr-selected-input)}#timeline-button-container{grid-area:buttons;margin-top:auto;margin-bottom:auto;justify-content:space-between;display:flex;padding:.25rem 0rem 0 0}#export-controls{display:flex;align-items:center;gap:.25rem;padding:.25rem 0}#export-controls .timeline-button{width:auto;padding:.05rem .4rem}#export-video-duration{width:3.5rem}#export-video-status{font-size:.7rem;white-space:nowrap}.dual-input-grid{grid-template-columns:auto 16%;display:grid;grid-template-areas:"slider number";gap:.25rem}.dual-input-grid .control-slider{grid-area:slider}.dual-input-grid .control-number{grid-area:number}.number-input-header{display:grid;grid-template-columns:var(--ease-channel-grid) var(--arm-channel-grid) auto var(--arm-channel-grid) var(--number-value-grid);gap:.25rem;margin-bottom:.1rem}.number-input-header-item{text-align:center;color:var(--clr-font-main);opacity:.7;padding:0 .25rem 0 0}.number-input-label-wrapper{text-align:left;grid-column:3;padding:0}.number-input-grid{grid-template-columns:var(--ease-channel-grid) var(--arm-channel-grid) auto var(--arm-channel-grid) var(--number-value-grid);display:grid;grid-template-areas:"easeArea startBtn slider endBtn number";gap:.25rem}.number-input-grid .control-slider{grid-area:slider}.control-select{border-radius:.5rem;background-color:#d3d3d3cc;color:var(--clr-text-input)}.control-select:focus{outline-width:2px;outline-color:var(--clr-font-main);outline-style:solid}.select-sm{padding:.05rem}.select-md{padding:.25rem}#fractal-select{margin-bottom:.5rem}.control-number{border-radius:5px;border-width:0;text-align:center;background-color:var(--clr-bg-input-dark)}.control-number:focus{outline-width:1px;outline-color:var(--clr-border-focus);outline-style:groove}.number-input-grid .control-number{grid-area:number;width:var(--number-box-width);height:var(--slider-height);margin:0}.control-number-dual{width:var(--number-box-width);height:var(--slider-height)}.control-number-ease{width:var(--number-ease-box-width);height:var(--slider-height);max-width:100%;overflow:hidden}.control-text{border-radius:5px;border-width:0;padding:.2rem;width:100%;background-color:var(--clr-bg-input-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.control-text:focus{outline-width:2px;outline-color:var(--clr-border-focus);outline-style:groove}.control-ease{grid-area:easeArea;width:var(--ease-box-width);height:var(--slider-height);border-radius:5px;border-width:0;text-align:center;color:#e4e7f0;margin:0;background-color:var(--clr-bg-input-dark)}.control-ease:focus{outline-width:1px;outline-color:var(--clr-border-focus);outline-style:groove}.set-value-btn{width:1rem;height:var(--slider-height);border:none;border-radius:3px;background-color:var(--clr-bg-input-dark);color:var(--clr-font-main);font-size:.5rem;cursor:pointer;opacity:.6;transition:opacity .15s ease,background-color .15s ease;padding:0}.set-value-btn:hover:not(:disabled){opacity:1;background-color:var(--clr-default-input)}.set-value-btn:disabled{opacity:.2;cursor:not-allowed}[data-channel="0"]{--ch-clr: var(--clr-channel-0);--ch-clr-focus: var(--clr-channel-focused-0)}[data-channel="1"]{--ch-clr: var(--clr-channel-1);--ch-clr-focus: var(--clr-channel-focused-1)}[data-channel="2"]{--ch-clr: var(--clr-channel-2);--ch-clr-focus: var(--clr-channel-focused-2)}[data-channel="3"]{--ch-clr: var(--clr-channel-3);--ch-clr-focus: var(--clr-channel-focused-3)}[data-channel="4"]{--ch-clr: var(--clr-channel-4);--ch-clr-focus: var(--clr-channel-focused-4)}[data-channel="5"]{--ch-clr: var(--clr-channel-5);--ch-clr-focus: var(--clr-channel-focused-5)}.channel-color{background-color:color-mix(in srgb,var(--ch-clr),black 30%)}.channel-color-active{background-color:color-mix(in srgb,var(--ch-clr-focus),black 30%);animation:pulse-glow 2s ease-in-out infinite}@keyframes pulse-glow{0%,to{box-shadow:0 0 1px #ffffff1a,0 0 3px currentColor}50%{box-shadow:0 0 3px #ffffff4d,0 0 5px currentColor}}.control-slider{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:100%;height:var(--slider-height);border-radius:5px;background:var(--clr-bg-input-light);outline:none;opacity:.7}.control-slider:focus{outline-width:2px;outline-color:var(--clr-highlight-input);outline-style:solid}.control-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:var(--slider-height);height:var(--slider-height);border-radius:50%;background:var(--clr-default-input);cursor:pointer;transition:background-color .2s ease}.control-slider::-moz-range-thumb{width:var(--slider-height);height:var(--slider-height);border-radius:50%;background:var(--clr-default-input);cursor:pointer;transition:background-color .2s ease}.timeline-slider{grid-area:timeline;display:grid;width:100%;-moz-appearance:none;appearance:none;-webkit-appearance:none;height:var(--slider-height);border-radius:2px;background:var(--clr-bg-input-light);outline:none;overflow:hidden;opacity:.7}.timeline-slider:focus{outline-width:2px;outline-color:var(--clr-highlight-input);outline-style:solid}.timeline-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:var(--slider-height);height:var(--slider-height);border-radius:0%;cursor:pointer;transition:background-color .2s ease}.timeline-slider-default::-webkit-slider-thumb{background:var(--ch-clr, var(--clr-default-input));box-shadow:-607px 0 0 607px var(--ch-clr, var(--clr-default-input))}.timeline-slider-has-content::-webkit-slider-thumb{background:var(--ch-clr-focus, var(--clr-highlight-input));box-shadow:-607px 0 0 607px var(--ch-clr-focus, var(--clr-highlight-input))}.timeline-slider::-moz-range-thumb{width:var(--slider-height);height:var(--slider-height);border-radius:50%;background:#91a8c0;cursor:pointer;transition:background-color .2s ease}.bottom-outline{height:.1rem;margin-top:.2rem;margin-bottom:.2rem;border-bottom:solid .15rem #5c6d84cc}.projects-container{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:1rem}.project-card{display:flex;flex-direction:column;background-color:var(--clr-bg-main);border-radius:.5rem;overflow:hidden;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.project-card:hover{transform:translateY(-4px);box-shadow:0 4px 12px #0000004d}.project-image{width:100%;aspect-ratio:16 / 9;object-fit:cover;background-color:var(--clr-bg-secondary)}.project-name{padding:.75rem;text-align:center;font-size:var(--font-height1);color:var(--clr-font-main);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 1400px){.projects-container{grid-template-columns:repeat(2,1fr)}}@media (max-width: 900px){.projects-container{grid-template-columns:1fr}}.tooltip-enabled{position:relative}.tooltip-enabled:before{content:attr(data-tooltip);visibility:hidden;opacity:0;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background-color:#1a1a1acc;color:var(--clr-font-main);padding:.4rem .6rem;border-radius:.3rem;border:1px solid var(--clr-border);white-space:normal;min-width:80px;z-index:1000;font-size:.85rem;transition:opacity .2s ease,visibility .2s ease;pointer-events:none}.tooltip-enabled:after{content:"";visibility:hidden;opacity:0;position:absolute;bottom:calc(100% + 3px);left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:#1a1a1a;transition:opacity .2s ease,visibility .2s ease;z-index:1001}.tooltip-enabled:hover:before,.tooltip-enabled:hover:after{visibility:visible;opacity:1}.w-100{width:100%}.w-75{width:75%}.w-50{width:50%}