:root {
    --saturation-factor: 1;
    --bg-hue: 210;
    --bg-sat: 13%;
    --background-interactive: hsl(var(--bg-hue), var(--bg-sat), 40%);
    --background-interactive-hover: hsl(var(--bg-hue), calc(2 * var(--bg-sat)), 40%);
    --background-interactive-active: hsl(var(--bg-hue), calc(2 * var(--bg-sat)), 30%);
    --background-interactive-disabled: hsl(var(--bg-hue), var(--bg-sat), 28%);
    --background-secondary: hsl(var(--bg-hue), var(--bg-sat), 30%);
    --background-tertiary: hsl(var(--bg-hue), var(--bg-sat), 20%);
    --background-tertiary-alt: hsl(var(--bg-hue), var(--bg-sat), 19%);
    --background-titlebar-alt: hsl(var(--bg-hue), var(--bg-sat), 16.5%);
    --background-titlebar: hsl(var(--bg-hue), var(--bg-sat), 14%);
    --background-accent: hsl(var(--bg-hue), var(--bg-sat), 50%);
    --background-gutter: hsl(var(--bg-hue), var(--bg-sat), 60%);

    --hitbox: green;
    --hitbox: none;

    --error-dim: #cd5c5c;
    --error: #f97070;
    --warn: #ecb474;

    --text-normal: rgb(250, 250, 255);
    --text-low-priority: rgb(210, 210, 213);
    --text-link: var(--text-normal);
    --text-black: hsl(240, 20%, 20%);
    --text-dark: var(--text-black);
    --focus-ring: hsl(240, 20%, 50%);
    --text-error: var(--error);
    --text-warn: var(--warn);
    --text-titlebar: var(--text-normal);

    --selected-konva-stage: hsl(204, 40%, 75%);

    --play-color: #74ecb0;
    --pause-color: #ecb474;
    --stop-color: #ec7474;
    --selected-keyframe-color: hwb(204 55% 5%);
    --pause-keyframe-color: var(--pause-color);
    --stop-keyframe-color: var(--stop-color);

    --delete-color: var(--stop-color);

    --control-point-select-rect-fill: #8cc9f230;
    --control-point-stroke: #f5fffa;
    --control-point-stroke-selected: var(--selected-keyframe-color);
    --control-point-line-stroke: var(--play-color);
    --control-point-pause: var(--pause-color);
    --control-point-pause-selected: var(--selected-keyframe-color);
    --control-point-stop: var(--stop-color);
    --control-point-stop-selected: var(--selected-keyframe-color);

    --pattern-playback-vis-high: #74d4ec;
    /* --pattern-playback-vis-low: #126f87; */
    /* --pattern-playback-vis-low: #22465b; */
    --pattern-playback-vis-low: #263d4e;
    /* --pattern-playback-vis-low: #273948; */
    /* --pattern-playback-vis-low: #283744; */

    --pattern-boundary: var(--background-tertiary);
    --pattern-axis: var(--pattern-boundary);
    --pattern-background: var(--background-tertiary-alt);


    --keyframe-flag-fill: var(--control-point-stroke);
    --keyframe-flag-fill-selected: var(--control-point-stroke-selected);
    --keyframe-flag-text: var(--text-black);
    --keyframe-flag-shadow: rgba(0,0,0,0.5);

    --cjump-flag-fill: hsl(261, 35%, 55%);
    --cjump-flag-fill-selected: hsl(204 35% 55% / 1);
    --cjump-flag-text: hsl(0, 0%, 100%);
    --cjump-arrow-fill: var(--cjump-flag-fill);

    --timeline-background: var(--background-tertiary-alt);
    --timeline-timestamp-rect-fill: var(--background-tertiary);
    --timeline-select-rect-fill: var(--control-point-select-rect-fill);
    --timeline-major-gridline-stroke: hsl(var(--bg-hue), var(--bg-sat), 12%);
    --timeline-major-gridline-text: hsl(var(--bg-hue), var(--bg-sat), 2%);
    --timeline-minor-gridline-stroke: hsl(var(--bg-hue), var(--bg-sat), 16%);

    --timeline-playback-head-color: var(--control-point-stroke);
    --timeline-playback-head-opacity: 0.5;

    --scrollbar-track-color: var(--background-titlebar);
    --scrollbar-thumb-color: var(--background-interactive);
}
/* for light mode */
@media (prefers-color-scheme: light) {
    :root.enable-light-mode { /* disable light mode by default */
        --saturation-factor: 1;
        --bg-hue: 350;
        --bg-sat: 13%;
        --background-interactive: hsl(var(--bg-hue), var(--bg-sat), 90%);
        --background-interactive-hover: hsl(var(--bg-hue), calc(2 * var(--bg-sat)), 90%);
        --background-interactive-active: hsl(var(--bg-hue), calc(2 * var(--bg-sat)), 80%);
        --background-interactive-disabled: hsl(var(--bg-hue), var(--bg-sat), 78%);
        --background-secondary: hsl(var(--bg-hue), var(--bg-sat), 80%);
        --background-tertiary: hsl(var(--bg-hue), var(--bg-sat), 69%);
        --background-tertiary-alt: hsl(var(--bg-hue), var(--bg-sat), 68%);
        --background-titlebar-alt: hsl(var(--bg-hue), var(--bg-sat), 60%);
        --background-titlebar: hsl(var(--bg-hue), var(--bg-sat), 57%);
        --background-accent: hsl(var(--bg-hue), var(--bg-sat), 100%);
        --background-gutter: hsl(var(--bg-hue), var(--bg-sat), 90%);

        --text-normal: rgb(10, 10, 10);
        --text-low-priority: rgb(45, 45, 48);
        --text-dark: hsl(240, 20%, 80%);
        --text-titlebar: #000000;
        --text-link: var(--background-interactive);

        --selected-konva-stage: hsl(204, 40%, 25%);

        --pattern-boundary: hsl(var(--bg-hue), calc(var(--bg-sat) * 0.8), 47%);
        --pattern-background: hsl(var(--bg-hue), calc(var(--bg-sat) * 0.8), 49%);

        /* --control-point-select-rect-fill: #8cc9f230; unchanged */
        /* --control-point-stroke: #0a0a0a; */ /* Adjusted for light background */

        --pattern-playback-vis-high: #f4b8d9;
        --pattern-playback-vis-high: #f3a0ce;
        --pattern-playback-vis-low: #c4a1ae;

        --timeline-background: hsl(var(--bg-hue), calc(var(--bg-sat) * 0.9), 50%);
        --timeline-timestamp-rect-fill: hsl(var(--bg-hue), calc(var(--bg-sat) * 0.9), 54%);
        --timeline-major-gridline-stroke: hsl(var(--bg-hue), calc(var(--bg-sat) * 0.9), 40%);
        --timeline-major-gridline-text: hsl(var(--bg-hue), calc(var(--bg-sat) * 0.9), 35%);
        --timeline-minor-gridline-stroke: hsl(var(--bg-hue), calc(var(--bg-sat) * 0.9), 45%);

        --timeline-playback-head-color: #0a0a0a;
        --timeline-playback-head-opacity: 0.5;
    }
}

span.material-symbols-outlined {
    vertical-align: bottom;
    align-self: center;
}
h1 > span.material-symbols-outlined {
    font-size: 1em;
    font-variation-settings: 'FILL' 0,
        'wght' 300,
        'GRAD' 100,
        'opsz' 48;
}

hr {
    margin: 1ex 0;
    border: none;
    border-bottom: 1px solid var(--background-titlebar);
    grid-column: 1 / -1;
}

dialog {
    background-color: var(--background-tertiary);
    color: var(--text-normal);
    border: 2px solid var(--background-titlebar);
    box-shadow: 0 0 1em 0.5em var(--background-titlebar);
}
dialog::backdrop {
    backdrop-filter: blur(2px);
}
dialog > form {
    display: flex;
    flex-direction: column;
    gap: 1ex;
}
dialog > form > div.buttons {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1ex;
}
dialog > form > div.buttons > button {
    padding: 1ex;
}
div.dialogtitlebar {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    gap: 1ex;
    align-items: end;
}
div.dialogtitlebar > span.titletext {
    font-size: 1.5em;
}
div.dialogtitlebar > button {
    padding: 0.5ex;
}

.betterscroll::-webkit-scrollbar {
    width: 1.5ex;
}

.betterscroll::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color);
    /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
}

.betterscroll::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color);
    /* outline: 1px solid slategrey; */
}
.betterscroll::-webkit-scrollbar-corner {
    background: var(--scrollbar-track-color);
}

dynamic-f64-input > label {
    display: contents;
}
dynamic-f64-input div.vinput {
    display: grid;
    position: relative;
}
dynamic-f64-input div.menulist.autocomplete {
    z-index: 50;
    position: absolute;
    box-sizing: border-box;
    min-width: 100%;
    top: 100%;
    outline: 2px solid var(--background-tertiary);
    border-color: var(--background-tertiary);
    border-style: solid;
    border-width: 0px 0.2ex 0.2ex;
    visibility: hidden;
}
dynamic-f64-input:focus-within div.menulist.autocomplete {
    visibility: visible;
}
dynamic-f64-input div.menulist.autocomplete button.df64autocompletion.autoaction {
    background-color: var(--background-interactive-active);
}
dynamic-f64-input div.menulist.autocomplete button.df64autocompletion {
    grid-template-columns: 1fr auto;
}
dynamic-f64-input div.menulist.autocomplete button.df64autocompletion span.value {
    justify-self: start;
    font-weight: bold;
}
dynamic-f64-input div.menulist.autocomplete button.df64autocompletion span.type {
    color: var(--text-low-priority);
    font-family: monospace;
}

div.labelinputgrid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5ex 1ex;
    align-items: center;
}
div.labelinputgrid > label, div.labelinputgrid > dynamic-f64-input, div.labelinputgrid > div.optionalinput {
    display: contents;
}
div.labelinputgrid > * > .labeltext {
    justify-self: end;
}
div.labelinputgrid > div.optionalinput > div.inputs {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5ex;
    align-items: center;
}
.labeltext > span.material-symbols-outlined {
    margin-right: 0.5ex;
}

.material-symbols-outlined.infoicon {
    font-size: 0.8em;
    vertical-align: initial;
    color: var(--text-low-priority);
}

span.unit {
    font-family: monospace;
    /* font-size: 1.1em; */
}

.errortext {
    color: #f97070;
}


*:disabled {
    cursor: not-allowed;
}

select, option, input, button {
    background-color: var(--background-interactive);
    color: var(--text-normal);
}
select:hover, option:hover, input:hover, button:hover {
    background-color: var(--background-interactive-hover);
    color: var(--text-normal);
}
option:active, input[type="checkbox"]:active, button:active {
    background-color: var(--background-interactive-active);
    color: var(--text-normal);
}
select:disabled, option:disabled, input:disabled, button:disabled {
    background-color: var(--background-interactive-disabled);
    color: var(--text-low-priority);
}
input::placeholder {
    color: var(--text-low-priority);
}
:is(select, option, input, button):is(:focus, :focus-visible) {
    outline: none;
    box-shadow: 0 0 0 2px var(--focus-ring);
}

select, option, input {
    padding: 1ex;
    border: none;
    min-width: 4ex;
}

a {
    color: var(--text-link);
    text-decoration: none;
}
button {
    font-size: 1em;
    padding: 0.25ex 1ex;
    border: none;
    cursor: pointer;
    /* text-transform: uppercase; */
    /* border-radius: 1px; */
}
button.textonly {
    background-color: transparent;
    /* color: var(--background-interactive); */
    /* border: solid 2px var(--background-interactive); */
}
button.textonly.delete {
    color: var(--delete-color);
}

input[type="checkbox"] {
    appearance: none;
    width: 4ex;
    min-height: 4ex;
    height: 100%;
    cursor: pointer;
    position: relative;
    margin: 0px;
}
input[type="checkbox"]::before {
    content: "check";
    font-family: "Material Symbols Outlined";
    font-variation-settings: 'FILL' 0,
        'wght' 100,
        'GRAD' 100,
        'opsz' 24;
    font-size: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* transition: all 0.05s linear; */
    visibility: hidden;
}
input[type="checkbox"]:hover:not(:checked)::before {
    color: var(--text-low-priority);
    visibility: visible;
}
input[type="checkbox"]:checked::before {
    visibility: visible;
    font-variation-settings: 'FILL' 0,
        'wght' 350,
        'GRAD' 200,
        'opsz' 24;
}


html,
body {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text-normal);
    margin: 0;
    /* --bg-hue: 315 !important; */
    /* --bg-sat: 31% !important; */
}

div.app {
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-rows: auto 1fr;
}

div.titlebar {
    background-color: var(--background-titlebar);
    color: var(--text-titlebar);
    padding: 1.2ex;
    display: flex;
    gap: 3ex;
    justify-content: start;
    /* align-items: center; */
}

div.verticalrule {
    width: 1px;
    height: 100%;
    background-color: var(--background-accent);
}

div.titlebar > div.isection {
    display: flex;
    gap: 1ex;
    justify-content: start;
    align-items: center;
}
div.titlebar span.status {
    font-size: 0.9em;
    color: var(--text-low-priority);
}
div.titlebar span.icon {
    text-align: center;
}
div.titlebar button {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0.5ex;
}
div.titlebar a {
    display: flex;
    align-items: center;
    justify-content: center;
}
div.titlebar div.end {
    /* display: contents; */
    margin-left: auto;
    display: flex;
    gap: 2ex;
    align-items: center;
}
div.titlebar img {
    height: 3.5ex;
}
div.isection.file span.filename.unsaved::after {
    content: '*';
    color: var(--text-low-priority);
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
div.isection.file span.savedstate span.pending {
    animation: spin 1s infinite linear;
}
div.isection.file span.savedstate.committed span.pending {
    display: none;
}
div.isection.file span.savedstate:not(.committed) span.committed {
    display: none;
}
div.isection.file .filemenu {
    position: relative;
}
div.isection.file .filemenu > div.menulist {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index: 70;
    border: solid 1ex var(--background-secondary);
    border-color: var(--background-titlebar-alt);
}
div.isection.file .filemenu:focus-within > div.menulist {
    visibility: visible;
    opacity: 1;
}

div.mainsplitgrid {
    display: grid;
    grid-template-columns: 18% 1px 1fr 1px 30%;
    grid-template-rows: 65% 1px 35%;
    overflow: hidden;
}

div.bottom {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns: 15% 1px 85%;
}

div.left,
div.right,
div.bottom {
    background-color: var(--background-secondary);
}

div.center {
    display: grid;
    grid-template-rows: auto 1fr;
}
div.center > div.tabpanelscontainer {
    display: grid;
    grid-template-rows: auto;
}
div.center.tabpanel > div.tabs {
    padding: 0ex 1ex;
    gap: 0.5ex;
    grid-template-columns: auto auto 1fr;
    background: var(--background-titlebar-alt);
}
div.center.tabpanel > div.tabs > button.tab.active {
    background-color: var(--background-tertiary);
}
div.center.tabpanel > div.tabs > button.tab {
    /* border-radius: 3px 3px 0px 0px; */
}
div.right.tabpanel > div.tabs > button.tab {
    /* border-radius: 3px 3px 0px 0px; */
}

div.patternstagecontainer {
    background-color: var(--background-tertiary);
    display: flex;
    justify-content: center;
    align-items: center;
}

div.designlibrary {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    gap: 0.5ex;
    background-color: var(--background-tertiary-alt);
}
div.designlibrary > div.searchbox {
    display: grid;
    grid-template-columns: auto 1fr auto;
    background-color: var(--background-interactive);
    border: solid 2px var(--background-accent);
    /* align-items: center; */
}
div.designlibrary > div.searchbox > label {
    display: contents;
}
div.designlibrary > div.searchbox:has(> label > input:hover) {
    background-color: var(--background-interactive-hover);
}
div.designlibrary > div.searchbox > button.close {
    padding: 0.5ex;
}
div.designlibrary div.designtree {
    font-size: 1.2em;
    background-color: var(--background-tertiary-alt);
    overflow: auto;
}
div.designlibrary div.designtree div.children {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: min-content;
    gap: 0.5ex;
}
div.designlibrary div.designtree details.folder div.children {
    margin-left: 0.5ex;
}
div.designlibrary div.designtree div.file {
    position: relative;
    display: grid;
}
div.designlibrary div.designtree div.file button {
    padding: 0.6ex;
    /* margin: 0 0.3ex; */
    margin-right: 0.5ex;
}
div.designlibrary div.designtree div.file div.preview {
    background-color: var(--background-titlebar);
    z-index: 10;
    position: fixed;

    /* causes horizontal scrollbars */
    /* position: absolute; */
    /* left: 100%; */
    /* top: 0; */

    border: solid 1.5ex var(--background-titlebar);
}
div.designlibrary div.designtree details.folder {
    background-color: var(--background-tertiary-alt);
    border-left: 2px solid var(--background-titlebar-alt);
    /* border-radius: 4px; */
}
div.designlibrary div.designtree summary {
    background-color: var(--background-secondary);
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.7ex;
    padding: 0.7ex;
}
div.designlibrary div.designtree details.folder > summary::before {
    content: "expand_more";
    font-family: "Material Symbols Outlined";
    margin-right: 0.7ex;
}
div.designlibrary div.designtree details.folder[open] > summary::before {
    content: "expand_less";
}
div.designlibrary div.designtree details.folder[open] > summary {
    border-bottom: 1px solid var(--background-titlebar);
    margin-bottom: 0.5ex;
}

div.threejscontainer {
    position: relative;
    overflow: hidden;
}
div.threejscontainer div.three-modal-message {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    background-color: rgba(0,0,0, 0.7);
    padding: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    font-size: 2em;
}

div.konvastagecontainer {
    position: relative;
    overflow: hidden;
}
div.konvastagecontainer:focus:before, div.konvastagecontainer:focus:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0px 0px 1px 1px var(--selected-konva-stage);
    z-index: 1;
    pointer-events: none;
}
div.konvastage {
    position: absolute;
}

div.patternstage {
    background-color: var(--pattern-background);
}

div.timeline {
    background-color: var(--background-tertiary);
}

div.timelinestage {
    background-color: var(--timeline-background);
}

div.gutter {
    background-color: var(--background-gutter);
    position: relative;
}

div.gutter::after {
    background-color: var(--hitbox);
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 50;
}

div.gutter.column::after {
    width: 8px;
    left: -4px;
}

div.gutter.row::after {
    height: 8px;
    top: -4px;
}

div.gutter.column {
    cursor: col-resize;
}

div.gutter.row {
    cursor: row-resize;
}

div.gutter.topbottom {
    grid-column: 1 / -1;
}

div.right {
    display: grid;
    grid-template-rows: auto 1fr auto;
}
div.tabpanel > div.tabs {
    display: grid;
    gap: 0.2ex;
    grid-auto-flow: column;
    background-color: var(--background-titlebar);
}
div.tabpanel > div.tabs > button.tab {
    padding: 1ex;
}
div.tabpanel > div.tabs > button.tab.active:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}
div.tabpanel > div.tabs > button.tab.active {
    background-color: var(--background-tertiary-alt);
    position: relative;
}
div.tabpanel > div.tabs > button.tab.active::after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 0.3ex;
    height: 2px;
    background-color: var(--text-normal);
    background-color: var(--text-low-priority);
}
div.actionbuttons {
    display: flex;
    gap: 1ex;
    justify-content: center;
    background-color: var(--background-titlebar);
    padding: 1ex;
}
div.actionbuttons > button {
    padding: 1ex;
    display: flex;
    gap: 0.5ex;
    align-items: center;
}
div.actionbuttons .material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 200,
        'opsz' 48;
}
div.tabpanelscontainer {
    overflow: auto;
    background-color: var(--background-tertiary);
}
div.tabpanelscontainer > *.hidden {
    display: none;
}
div.right div.help {
    padding: 1.5ex;
    background-color: var(--background-tertiary-alt);
}
div.right form.postprocessing {
    padding: 1.5ex;
    background-color: var(--background-tertiary-alt);
    padding-top: 0;
}
form.postprocessing > div.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
form.postprocessing div.transformcontrol {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1ex;
    align-items: center;
}
form.postprocessing div.transformcontrol > h3 {
    grid-column: 1/-1;
    margin-bottom: 1ex;
}
form.postprocessing div.transformcontrol > h3 > span.material-symbols-outlined {
    margin-left: 0.5ex;
    font-variation-settings: 'FILL' 0,
        'wght' 300,
        'GRAD' 100,
        'opsz' 24;
}
form.postprocessing button[type="reset"] {
    grid-column: 1/-1;
    justify-self: end;
    padding: 1ex
}
div.ukfecontainer {
    background-color: var(--background-tertiary-alt);
}
div.ukfecontainer > h1 {
    padding: 1ex;
    margin: 0px;
}
div.ukfecontainer > div.helptext {
    color: var(--text-low-priority);
    padding: 2ex;
    display: none;
}
div.ukfecontainer.noneselected > div.helptext {
    display: flex;
    flex-direction: column;
    gap: 0.75ex;
}
div.ukfecontainer.noneselected > form.ukfe {
    display: none;
}
form.ukfe {
    display: flex;
    flex-direction: column;
    background-color: var(--background-tertiary-alt);
}

div.typecontainer {
    background-color: var(--background-tertiary-alt);
    padding: 1ex;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1ex;
    align-items: center;
    border: 1px solid var(--background-titlebar);
}

form.ukfe summary, div.typecontainer select, div.typecontainer option {
    font-weight: bold;
    text-transform: capitalize;
    padding: 1ex;
}

form.ukfe details {
    background-color: var(--background-tertiary-alt);
    border: 1px solid var(--background-titlebar);
    border-radius: 4px;
    padding: 1ex 1ex 0;
}

form.ukfe summary {
    margin: -1ex -1ex 0;
    background-color: var(--background-secondary);
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.7ex;
}

form.ukfe details summary::before {
    content: "expand_more";
    font-family: "Material Symbols Outlined";
    margin-right: 0.7ex;
}
form.ukfe details[open] summary::before {
    content: "expand_less";
}

form.ukfe details[open] {
    padding: 1ex;
}

form.ukfe details[open] summary {
    border-bottom: 1px solid var(--background-titlebar);
    margin-bottom: 1ex;
}
form.ukfe details div.transition h4 {
    margin-bottom: 1ex;
}
form.ukfe details div.transition div.transitionconfig {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1ex;
    align-items: center;
}

div.cjumpconfig {
    display: flex;
    flex-direction: column;
    gap: 1ex;
    /* align-items: center; */
}
div.table {
    display: grid;
    gap: 1ex;
}
div.table > div.thead {
    display: contents;
}
div.table > div.thead > div {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
div.table > div.tbody {
    display: contents;
}
div.table > div.tbody > div, div.table > div.thead > div {
    /* display: contents; */
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr 1fr 1fr 1fr auto;
    gap: 1ex;
}
div.table button.remove {
    background-color: var(--delete-color);
}
div.table div.draghandle {
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    cursor: grab;
}
div.cjumpconfig > button.add {
    /* grid-column: 1 / -1; */
    padding: 1ex
}

div.parametereditor {
    display: flex;
    flex-direction: column;
    /* padding: 1ex; */
    /* gap: 1ex; */
    background-color: var(--background-tertiary);
    overflow: hidden auto;
}

div.parametereditor div.userparameters {
    display: grid;
    grid-template-columns: 1.5fr auto 1fr auto;
    gap: 1ex;
    align-items: center;
    justify-content: center;
}
div.parametereditor div.userparameters > div:first-child {
    font-weight: bold;
}
div.parametereditor div.userparameters > div:first-child, div.parametereditor div.userparameters > user-param-control {
    display: contents;
}
div.parametereditor div.userparameters > div.unusedcontainer {
    display: contents;
}
div.parametereditor div.userparameters > div.unusedcontainer > hr {
    margin: 0;
}
div.parametereditor div.userparameters > div.unusedcontainer > span.unusedheader {
    grid-column: 1 / -2;
    font-weight: bold;
    color: var(--text-low-priority);
    font-size: 1.2em;
}
div.parametereditor div.userparameters > user-param-control span.eq {
    font-weight: bold;
}
user-param-control.unused, user-param-control.unused input {
    color: var(--text-low-priority);
}

.hide {
    display: none;
}
div.parametereditor span.helpmsg {
    grid-column: 1 / -1;
    color: var(--text-low-priority);
}
div.parametereditor button.addparam {
    grid-column: 1 / -1;
    padding: 1ex;
}
div.parametereditor > div {
    padding: 1.5ex;
    display: flex;
    flex-direction: column;
    gap: 1ex;
}
div.parametereditor > div > h2 {
    margin: 0.2ex 0ex 0ex;
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: 0.5ex;
    align-items: center;
}
div.parametereditor > div > h2 > button {
    display: flex;
}
div.parametereditor div.playback {
    background-color: var(--background-titlebar);
}
div.parametereditor div.playback span.warning {
    visibility: hidden;
    justify-self: end;
    color: var(--warn);
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 100, 'opsz' 24;
    animation: warning 1.5s infinite alternate-reverse;
    user-select: none;
    cursor: pointer;
}
div.parametereditor div.playback.warning span.warning {
    visibility: visible;
}
@keyframes warning {
    0% {
        font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 100, 'opsz' 24;
    }
    15% {
        font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 50, 'opsz' 24;
    }
    30% {
        font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 100, 'opsz' 24;
    }
}
div.parametereditor div.timecontrol {
    display: grid;
    grid-template-columns: auto minmax(6ex, 100%);
    grid-template-rows: 1fr 1fr;
    gap: 1ex;
    align-items: center;
}
div.parametereditor div.timecontrol > label {
    display: contents;
}
div.parametereditor div.timecontrol > label > span.labeltext {
    white-space: nowrap;
}

div.parametereditor div.timecontrol button {
    font-size: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5ex;
}
div.parametereditor div.timecontrol button span.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 500,
        'GRAD' 50,
        'opsz' 24;
}

div.parametereditor div.timecontrol button.play {
    background-color: var(--play-color);
    color: var(--text-black);
}
div.parametereditor div.timecontrol button.pause {
    background-color: var(--pause-color);
    color: var(--text-black);
}

div.contextmenu {
    position: fixed;
    background-color: var(--background-tertiary);
    z-index: 100;

    --contextmenu-border: 0.7ex;
    user-select: none;
}

div.menulist {
    /* border: 5px solid var(--background-titlebar); */
    padding: var(--contextmenu-border);
    display: grid;
    grid-template-columns: minmax(max-content, auto);
    background-color: var(--background-titlebar);
    gap: 1px;
}

div.menulist span.nestedtitle,
div.menulist button {
    padding: 1ex;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: min-content;
    align-items: center;
    gap: 0.75ex;
}
div.menulist button.noicon {
    grid-template-columns: 1fr;
}

div.menulist div.nested {
    position: relative;
    display: grid;
}

div.menulist span.nestedtitle {
    background-color: var(--background-interactive);
}

div.menulist span.nestedtitle::after {
    content: "navigate_next";
    font-family: "Material Symbols Outlined";
    /* margin-left: 1ex; */
}

div.menulist div.nested div.menulist {
    position: absolute;
    left: 100%;
    top: calc(-1 * var(--contextmenu-border));

    visibility: hidden;
    opacity: 0;
    transition: 200ms;
    transition-delay: 200ms;
}

div.menulist div.nested:hover span.nestedtitle {
    background-color: var(--background-interactive-hover);
}
div.menulist div.nested:hover div.menulist {
    visibility: visible;
    opacity: 1;
    transition-delay: 0ms;
}

#userparamdialog:not(.add) span.titletext.add {
    display: none;
}
#userparamdialog:not(.edit) span.titletext.edit {
    display: none;
}
#userparamdialog:not(.edit) button.delete {
    display: none;
}