input#show-settings-toggle {
    display: none;
}
label[for="show-settings-toggle"] svg {
    stroke: white;
    fill: black;
}
label[for="show-settings-toggle"] {
    z-index: 2;
    position: fixed;
    top: 10px;
    left: 10px;
    cursor: pointer;
    -webkit-user-select: none;
    font-size: 25px;
    user-select: none;
    opacity: 0.4;
    transition: transform 200ms, opacity 200ms;
}
label[for="show-settings-toggle"]:hover, label[for="show-settings-toggle"]:active {
    opacity: 0.8;
    transform: rotate(15deg);
}
input#show-settings-toggle:checked + label[for="show-settings-toggle"] {
    transform: rotate(45deg);
    opacity: 1.0;
}
.loading-app label[for="show-settings-toggle"] {
    pointer-events: none;
    transform: translateX(calc(-100% - 10px)) rotate(-90deg);
}

/* label[for="show-menu-toggle"] .icon:before, label[for="show-menu-toggle"] .icon:after { */
/* } */

/* gear rotates but nothing moves? doesnt look that nice anyway */
/* input#show-settings-toggle:checked + label:active { */
/*     transform: rotate(30deg); */
/* } */


/* right side 3-bar button for voice menu */
.side-panel ~ .toggleable-x {
    z-index: 2;
    position: fixed;
    top: 7px;
    right: 10px;
    --size: var(--ui-size);
    opacity: 1;
    transform: translateX(0);
    will-change: transform;
    transition: transform 0.3s;
}
body:not(.toggle-sidepanel) .side-panel + .toggleable-x,
.loading-app #toggle-side-panel.toggleable-x,
.hide-ui #toggle-side-panel.toggleable-x {
    pointer-events: none;
    transform: translateX(calc(100% + 10px));
}

.toggleable-x {
    position: relative;
    display: block;
    /* --size: 24px; */
    --size: var(--ui-size);
    /* --thickness: 50%; */
    width: var(--size);
    height: var(--size);
    cursor: pointer;
    transition: transform 0.3s;
    user-select: none;
    -webkit-user-select: none;
}

.toggleable-x .middle-bar, .toggleable-x:before, .toggleable-x:after {
    content: '';
    position: absolute;
    top: calc(50% - 7.5%); /* vertical align + height/2 */
    left: 0;
    display: inline-block;
    width: 100%;
    height: 12.5%;
    background-color: var(--fg-color);
    /* border: 1px solid white; */
    border-radius: var(--size);
    /* transform-origin-x: 50%; */
    opacity: 0.4;
    will-change: transform, opacity;
    transition: transform 0.3s, opacity 0.3s;
}
.toggleable-x .middle-bar:before, .toggleable-x .middle-bar:after { 
    content: '';
    position: absolute;
    /* top: 0; */
    /* bottom: 0; */
    left: 0;
    width: 50%;
    height: 100%;
    background-color: inherit;
    border-radius: inherit;
    transform-origin: 10% 50%;
    transition: transform 0.3s;
    /* transition-delay: 0.3s; */
}
.toggleable-x:before {
    transform: translateY(-220%);
}
.toggleable-x:after {
    transform: translateY(220%);
}

.toggleable-x .middle-bar:before {
    --rotate: -45deg;
}
.toggleable-x .middle-bar:after {
    --rotate: 45deg;
}


/* hover state */
.toggleable-x:hover:before, .toggleable-x:hover:after, .toggleable-x:hover .middle-bar {
    opacity: 0.8;
}
/* mousedown state */
.toggleable-x:active:before, .toggleable-x:active:after {
    opacity: 0.8;
    transform: translateY(0) !important;
}
.toggleable-x:active .middle-bar {
    transform: translateX(-25%) !important;
}
.toggleable-x:active .middle-bar:before, .toggleable-x:active .middle-bar:after {
    /* animation: pulse 1s infinite; */
    transform: translateX(-100%) rotate(calc(0.25 * var(--rotate))) !important;
}


/* activated state */
.side-panel:not(.hidden) ~ .toggleable-x {
    transform: rotate(-90deg);
}
/* .side-panel:not(.hidden) ~ .toggleable-x .middle-bar {
    transform: translateX(-100%);
    opacity: 0.3;
} */
.side-panel:not(.hidden) ~ .toggleable-x .middle-bar {
    transform: translateX(-100%);
    opacity: 0.01;
    pointer-events: none;
}
.side-panel:not(.hidden) ~ .toggleable-x:before {
    transform: translateY(0) rotateZ(45deg);
    opacity: 1;
}
.side-panel:not(.hidden) ~ .toggleable-x:after {
    transform: translateY(0) rotateZ(-45deg);
    opacity: 1;
}
.side-panel:not(.hidden) ~ .toggleable-x .middle-bar:before,
.side-panel:not(.hidden) ~ .toggleable-x .middle-bar:after {
    /* animation: pulse 1s infinite; */
    transform: translateX(-100%) rotate(var(--rotate));
}
@keyframes pulse {
    50% {
        transform: translateX(-100%) rotate(var(--rotate));
    }
}



/* "Toggleable X" (no 3 bars) deprecated
/* .toggleable-x { */
/*     position: relative; */
/*     display: block; */
/*     --size: 0.75em; */
/*     /\* --thickness: 50%; *\/ */
/*     width: var(--size); */
/*     height: var(--size); */
/*     cursor: pointer; */
/*     user-select: none; */
/*     -webkit-user-select: none; */
/* } */
/* .toggleable-x:before, .toggleable-x:after { */
/*     content: ''; */
/*     position: absolute; */
/*     top: calc(50% - 7.5%); /\* vertical align + height/2 *\/ */
/*     left: 0; */
/*     display: inline-block; */
/*     width: 100%; */
/*     height: 15%; */
/*     background-color: var(--fg-color); */
/*     /\* border: 1px solid white; *\/ */
/*     border-radius: var(--size); */
/*     /\* transform-origin-x: 50%; *\/ */
/*     opacity: 0.4; */
/*     will-change: transform, opacity; */
/*     transition: transform 300ms linear, opacity 300ms linear; */
/* } */
/* /\* .toggleable-x:hover:before, .toggleable-x:hover:after { *\/ */
/* /\*     transform: translateY(0); *\/ */
/* /\*     opacity: 0.8; *\/ */
/* /\* } *\/ */
/* .toggleable-x:hover:before, .toggleable-x:hover:after { */
/*     opacity: 0.8; */
/* } */
/* .toggleable-x:active:before, .toggleable-x:active:after { */
/*     opacity: 0.8; */
/*     transform: translateY(0); */
/* } */
/* .toggleable-x:before { */
/*     transform: translateY(-125%); */
/* } */
/* .toggleable-x:after { */
/*     transform: translateY(125%); */
/* } */
/* .toggleable-x.activated:before { */
/*     transform: translateY(0) rotateZ(45deg); */
/*     opacity: 1; */
/* } */
/* .toggleable-x.activated:after { */
/*     transform: translateY(0) rotateZ(-45deg); */
/*     opacity: 1; */
/* } */


/* side button temporarily deprecated (december) */
/* .side-panel #side-button { */
/*     position: relative; */
/*     width: 85%; */
/*     --color1: skyblue; */
/*     --color2: blue; */
/*     /\* width: calc(100% - 30px); *\/ */
/*     background-color: var(--color1); */
/*     color: var(--color2); */
/*     border: 2px solid; */
/*     border-color: var(--color2); */
/*     border-radius: 30px; */
/*     cursor: pointer; */
/*     user-select: none; */
/*     font-size: 12px; */
/*     transition: background-color 300ms, border-color 300ms, color 300ms; */
/* } */
/* #side-button:before { */
/*     content: ''; */
/*     z-index: -1; */
/*     position: absolute; */
/*     top: 0; */
/*     left: 0; */
/*     width: 100%; */
/*     height: 100%; */
/*     border-radius: inherit; */
/*     color: white; */
/*     background-color: var(--color2); */
/*     transform: scaleY(0); */
/*     transition: transform 200ms; */
/* } */
/* #side-button:hover:before { */
/*     transform: scaleY(1); */
/* } */
/* #side-button:hover { */
/*     color: white; */
/*     background-color: transparent; */
/*     border-color: var(--color1); */
/* } */
/* #side-button:active { */
/*     color: transparent; */
/* } */
/* #side-button.loading { */
/*     --color1: grey; */
/*     --color2: darkgrey; */
/*     color: white; */
/*     cursor: wait; */
/* } */
/* #side-button.loading:before { */
/*     transform: scaleX(0); */
/* } */
/* #side-button.stop { */
/*     --color1: orange; */
/*     --color2: orangered; */
/* } */


#center-button-container {
    /* position: sticky; */
    /* position: -webkit-sticky; */
    /* z-index needed for pause button animation to fire if clicked right after appearing, has to do with side-panel z-index but makes scrolling slow */
    /* z-index: 3;  */
    z-index: 0; 
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* below 2 lines for persistent sidepanel resize */
    /* NOT NEEDED FOR NOW: because you can't even see the button while settings panel is open */
    /* width: 100%; */
    /* transition: width 0.5s; */
}

/* FLOATING CENTER BTN */
.floating-center-button {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: auto;
    padding: 0;
    white-space: nowrap;
    /* height: 35px; */
    height: 1.8em;
    /* width: 11em; */ /* width moved to near pause button since it's tied to that */
    /* font-size: 15px; */
    /* font-size: max(15px, 3vh); */
    /* font-size: max(15px, 4vh); */
    font-size: max(15px, 4vh, 3vw); /* this is new */
    border: 2px solid black;
    /* border-radius: 30px; */
    border-radius: 0.75em;
    box-shadow: 0px 10px 2px 0px var(--shadow-color);
    cursor: pointer;
    user-select: none;
    will-change: transform, opacity, width, left;
    transform: translateY(0px);
    transition: transform 300ms, background-color 300ms, border-color 300ms, box-shadow 300ms, width 300ms, left 300ms, opacity 300ms;
    /* transition: transform 300ms, background-color 300ms, color 300ms, border-color 300ms, box-shadow 300ms, width 300ms, left 300ms, opacity 300ms; */
}
.floating-center-button:hover {
    box-shadow: 0px 6px 2px 0px var(--shadow-color);
    transform: translateY(2px);
    border-color: transparent;
}
.floating-center-button:active {
    box-shadow: 0px 0px 0px 0px var(--shadow-color);
    transform: translateY(5px);
    border-color: transparent;
}

#nav-panel:not(.hidden) ~ #center-button-container .floating-center-button,
#nav-panel.hidden:focus-within ~ #center-button-container .floating-center-button,
.loading-app .floating-center-button,
.hide-ui .floating-center-button,
.hide-buttons .floating-center-button {
    /* transform: translateY(calc(20px + 100%)) !important; */
    transform: scale(0.01) !important;
    opacity: 0 !important;
    transition-timing-function: cubic-bezier(0.36, 0, 0.66, -0.56);
    /* transform: translateY(3.5em) scaleX(0) scaleY(2) !important; */
}

/* START UNIVERSAL BUTTON */
#universal-button {
    /* z-index: 2; */
    color: var(--icon-color); /* for the arrows */
    /* --blue: #1a73e8; /\* (from google buttons) *\/ */
    /* --lightblue: #e8f0fe; /\* from i'm feeling lucky button:hover *\/ */
    /* --darkblue: #1967d2; /\* darker blue *\/ */
    
    --load: #1a73e8F0; 
    --load-outer: white;
    --load-inner: white;
    --load-hover: #1967d2; 
    --loading: #e8f0fe;
    --loading-outer: var(--load); 
    --loading-inner: var(--load); 
    /* --play: white;  */
    --play: var(--bg-color-stark);
    --play-outer: var(--load); 
    --play-inner: var(--load); 
    --play-hover: var(--loading);
    --stop: var(--play);
    --stop-outer: red;
    --stop-inner: orange;
}
#universal-button.universal-load {
    background-color: var(--load);
    --icon-color: var(--load-inner);
    --arrow-opacity: 0;
    /* --arrow-opacity: 0.5; */
}
#universal-button.universal-load:hover {
    background-color: var(--load-hover);
}
#universal-button.universal-loading {
    background-color: var(--loading);
    border-color: var(--loading-outer); 
    --icon-color: var(--loading-inner);
    box-shadow: 0px 0px 2px 0px var(--shadow-color);
    transform: translateY(5px);
    /* cursor: default; */
    /* cursor: progress; */ /* <-- is this more appropriate? */
    --arrow-opacity: 0.2;
    cursor: wait;
}
#universal-button.universal-play {
    background-color: var(--play);
    border-color: var(--play-outer);
    --icon-color: var(--play-inner);
    --arrow-opacity: 1;
}
#universal-button.universal-play:hover {
    /* background-color: var(--lightblue); */
    background-color: var(--play-hover);
}
#universal-button.universal-play:after {
    content: 'click button to confirm';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-transform: capitalize;
    font-family: var(--menu-font);
    font-size: 0.8em;
    color: var(--load);
    text-shadow: 2px 2px 3px var(--fg-color);
    pointer-events: none;
    animation: button-toast 2.5s forwards;
}
@keyframes button-toast {
    to {
        transform: translateY(-200%);
        opacity: 0;
    }
}
#universal-button.universal-stop {
    background-color: var(--stop);
    border-color: var(--stop-outer);
    --icon-color: var(--stop-inner);
    --arrow-opacity: 0;
}
#universal-button > span {
    position: relative;
    display: inline-block;
    --icon-size: 0.75em;
    line-height: var(--icon-size); /* for chrome */
    height: var(--icon-size);
    width: var(--icon-size);
    /* display: inline-flex; */
    /* justify-content: center; */
    /* align-items: center; */
    /* border-radius: 0.1em; */
    /* background-color: transparent; */
    /* transition: opacity 300ms, transform 300ms, background-color 300ms; */
    /* transition: opacity 300ms, transform 300ms; */
    /* border: 1px dotted pink; */
}

/* BETA - UNIVERSAL BUTTIN HELPTEXT */
/* #universal-button #universal-btn-helptext { */
/*     position: absolute; */
/*     display: block; */
/*     left: 0; */
/*     right: 0; */
/*     top: 0; */
/*     margin: auto; */
/*     padding: 0.2em 0.5em; */
/*     width: min-content; */
/*     font-size: 0.5em; */
/*     border-radius: 0.5em 0.5em 0 0; */
/*     border: inherit; */
/*     border-bottom: none; */
/*     color: inherit; */
/*     background-color: inherit; */
/*     transition: transform 0.3s, opacity 0.3s; */
/*     opacity: 0; */
/*     transform: none; */
/* } */
/* #universal-button.universal-play #universal-btn-helptext { */
/*     transform: translateY(-100%); */
/*     opacity: 1; */
/* } */

/* UNIVERSAL BUTTON SVG STUFF */
#universal-button > span svg {
    width: auto;
    height: 100%; /* since box-sizing is border-box */
    /* margin-top: 0.5px; /\* ugh *\/ */
    stroke-width: 0px; /* needed for bg-color to work for some reason */
    border-radius: 10%;
    background-color: transparent;
    fill: var(--icon-color);
    stroke: var(--icon-color);
    transition: transform 400ms, background-color 200ms, fill 200ms, stroke 200ms; 
}
#universal-button.universal-stop > span svg {
    transform: rotate(-90deg);
}
    
#universal-button > span svg polygon {
    stroke-width: 0.2;
    stroke-linejoin: round;
    /* transition: stroke 3000ms, fill 3000ms; /\* only want fadeout when going into loading mode *\/ */
}
#universal-button.universal-loading > span svg, #universal-button.universal-load:active > span svg {
    fill: transparent;
    /* fill: var(--icon-color); */
}
#universal-button.universal-stop > span svg {
    background-color: var(--icon-color); /* makes it a square */
}

/* UNIVERSAL BUTTON ARROWS */
#universal-button > span:before, #universal-button > span:after {
    position: absolute;
    /* margin: 0em 1em; */
    bottom: 0.5px; /* the character is not perfectly centered */
    opacity: var(--arrow-opacity);
    transition: opacity 200ms, transform 0.5s;
    pointer-events: none;
}
#universal-button > span:before {
    left: -2em;
    content: '\21e8';
}
#universal-button > span:after {
    right: -2em;
    content: '\21e6';
}

/* styling spans (inner text with arrows for univBtns */
/* .universal-loading > span:before, .universal-loading > span:after { */
/*     animation-play-state: paused !important; */
/* } */

.universal-play:hover > span:before, .universal-play:hover > span:after,
.universal-play:active > span:before, .universal-play:active > span:after {
    transform: translateX(var(--arrow-translate)) rotateX(180deg);
    /* animation: arrow-animate 1s ease-in-out infinite; */
}
.universal-play > span:before {
    --arrow-translate: 0.6em;
}
.universal-play > span:after {
    --arrow-translate: -0.6em;
}

/* .universal-stop > span { */
/*     background-color: currentcolor !important; */
/*     transform: scale(0.9); */
/* } */

.universal-stop > span:before, .universal-stop > span:after {
    opacity: 0;
}
/* END UNIVERSAL BUTTON ARROWS */
/* END UNIVERSAL BUTTON */

/* START PAUSE BUTTON */
#pause-button {
    /* font-weight: 900; */
    border: 2px solid #777;
    /* background-color: var(--highlight-color); */
    background: linear-gradient(45deg, var(--bg-color-stark), var(--highlight-color));
    color: var(--font-color);
    --icon-size: 0.78em;
    --translate-x: translateX(calc(0.5 * var(--icon-size)));
}
#pause-button.paused {
    /* background-color: #FFFF77; */
    /* border: 2px solid #777; */
    /* color: black; */
    border: 2px solid currentcolor;
    --translate-x: translateX(-25%);
}
#pause-button .bar {
    /* display: inline-block; */
    position: relative;
    margin: auto;
    width: calc(0.2 * var(--icon-size));
    height: var(--icon-size);
    /* transform: translateX(-75%); */
    transform: translateX(-150%);
    /* background-color: black; */
    background-color: currentcolor; /* var(--font-color) */
    border-radius: var(--icon-size);
    outline: 1px solid transparent; /* needed for chrome antialiasing */
    --translate-x: translateX(200%);
}
#universal-button.universal-stop + #pause-button .bar {
}

#pause-button.fancy {
    --translate-x: translateX(-25%);
}

#pause-button .bar:before, #pause-button .bar:after {
    content: '';
    /* display: block; */
    position: absolute;
    top: 0;
    /* right: 25%; */
    right: 0;
    width: calc(0.2 * var(--icon-size));
    --translate-x: translateX(-25%);
    height: var(--icon-size);
    /* --scale: scaleY(1); */
    border: none;
    outline: inherit;
    border-radius: inherit;
    background-color: inherit;
    /* transform: var(--translate-x); */
    transform-origin: 50% 0%;
    transform: translateX(calc(0.4 * var(--icon-size))); /* don't do 200%, will not aliase on safari */
    will-change: transform;
    /* transition: transform 300ms; */
    transition: transform 0.3s ease-in-out;
}
#pause-button.fancy .bar:before, #pause-button.fancy .bar:after {
    transition-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
#pause-button.fancy .bar:before {
    left: 0;
}
#pause-button.fancy .bar:after {
    transform: translateX(0);
    transform-origin: 50% 0%;
    /* opacity: 0; */
    /* transition: transform 300ms, opacity 300ms; */
    /* transform: translateX(0); /\* counterintuitive i know *\/ */
    /* transition: transform 300ms; */
}
#pause-button:not(.fancy) .bar:after {
    transform: translateX(0);
    transform-origin: 50% var(--icon-size);
}
#pause-button.paused .bar:before, #pause-button:active .bar:before {
    transform: var(--translate-x) translateY(0.5px) rotateZ(-60deg);
    /* background-color: red; */
}
#pause-button.old.paused .bar:after {
    transform: var(--translate-x) translateY(-0.5px) rotateZ(60deg);
}
#pause-button.paused .bar:after, #pause-button:active .bar:after {
    transform: var(--translate-x) translateY(-0.5px) rotate(60deg);
    /* background-color: blue; */
}
#pause-button.fancy.paused .bar:after, #pause-button.fancy:active .bar:after {
    transform: var(--translate-x) translateY(calc(var(--icon-size) - 0.5px)) rotateZ(60deg) rotateX(180deg);
    /* opacity: 1; */
}

#pause-button .center {
    position: absolute;
    left: 0; right: 0;
    top: 0; bottom: 0;
    --color: currentcolor;
    --size: calc(0.33 * var(--icon-size));
    margin: auto;
    display: inline-block;
    width: 0;
    height: 0;
    background-color: transparent;
    border-top: var(--size) solid transparent;
    border-right: var(--size) solid #0000;
    border-bottom: var(--size) solid #1110;
    border-left: var(--size) solid var(--color);
    transform-origin: 0% 50%;
    --translate-x: translateX(calc(0.2 * var(--size)));
    transform: scale(0, 1) var(--translate-x);
    transition: transform 300ms;
}
#pause-button.fancy .center { /* shrinks/disappears into the middle */
    --translate-x: translateX(calc(0.55 * var(--size)));
    transform: scale(0, 0) var(--translate-x);
    transform-origin: 50% 50%;
}
/* #pause-button.paused:hover .center { */
#pause-button.paused:not(:active) .center {
    transform: scale(1.6, 1) var(--translate-x);
}

/* transition (how it comes to be) of PAUSE BUTTON */
#universal-button + #pause-button {
    z-index: -1;
    /* width: 5.25em; */
    width: min(5.25em, calc(50vw - 10px));
    /* opacity: 1; */
    opacity: 0;
}
#universal-button.universal-stop + #pause-button {
    /* left: 5.75em; */
    /* left: min(calc(5.25em + 20px), calc(50% - 10px)); */
    left: min(calc(5.75em), calc(50vw - 10px));
    opacity: 1;
}
#universal-button {
    width: min(11em, calc(100vw - 20px));
}
#universal-button.universal-stop {
    /* left: -5.75em; */
    /* width: 5.25em; */
    left: max(-5.75em, calc(-50vw + 10px));
    width: min(5.25em, calc(50vw - 10px));
}
/* END PAUSE BUTTON */


#settings-menu #show-savepanel-button,
#settings-menu #show-loadpanel-button {
    justify-content: center;
}
/* START SHOW SAVE PANEL BUTTON */
#show-savepanel-button {
    /* background-color: var(--save-color); */
    color: var(--save-color-dark);
    transition: background-color 300ms, color 150ms, border-color 150ms;
}
/* #show-savepanel-button:hover {
    border-color: var(--save-color-dark);
    background-color: var(--save-color);
}
#show-savepanel-button:active {
    border-color: var(--save-color-dark);
    background-color: var(--save-color);
} */
/* END SHOW SAVE PANEL BUTTON */

/* START SHOW LOAD PANEL BUTTON */
#show-loadpanel-button {
    --hover-color: var(--load-color);
    border-color: var(--load-color-border);
    color: var(--load-color-dark);
    transition: background-color 300ms, color 150ms, border-color 150ms;
}
#show-loadpanel-button:hover > div {
    transform: scale(0.5);
}
#show-loadpanel-button:active {
}
/* END SHOW LOAD PANEL BUTTON */

/* TRIPLE-DOT-BUTTON */
/* #wrapper:hover #side-buttons-container, */
/* #wrapper:active #side-buttons-container, */
/* #wrapper:focus-within #side-buttons-container { */
/*     /\* display: flex; *\/ */
/*     transform: scale(1); */
/* } */
body.hide-dots-menu .side-buttons-container,
body.hide-ui .side-buttons-container {
    display: none !important;
}
#wrapper:hover .side-buttons-container {
    transform: scale(1);
    opacity: 1;
}


.side-buttons-container {
    /* display: none; */
    display: flex;
    z-index: 1;
    overflow: visible;
    position: absolute;
    /* --size: 2em; */
    top: -100px;
    --horiz-offset: 0;
    left: var(--horiz-offset);
    /* font-size: calc(0.5 * var(--font-size)); */
    padding-top: calc(0.2 * var(--scaled-font-size)); /* var(--min-padding) */
    margin-left: calc(0.2 * var(--scaled-font-size));
    /* margin-left: calc(0.2 * var(--scaled-font-size));
    margin-left: calc(2 * var(--scaled-font-size));
    margin-left: var(--ui-size); */
    
    /* right: 2em; */
    /* right: 0; */
    /* height: var(--size); */
    /* width: var(--size); */

    /* display: flex; */
    flex-direction: column;
    /* justify-content: space-evenly; */
    /* align-items: center; */
    
    background-color: transparent;
    transform: scale(0);
    transition: transform 0.2s;
    /* transition: all 0.5s; */
}
.side-buttons-container:active {
    transform: scale(0.9);
}
.side-buttons-container.left {
    left: auto;
    right: var(--horiz-offset);
    margin-right: calc(1.6 * var(--scaled-font-size));
    /* margin-right: auto;
    --padding-left: calc(2 * var(--scaled-font-size));
    margin-left: calc(-1 * var(--editor-width) + var(--padding-left)); */
    /* padding-left: 2em; */
    background-color: var(--bg-color);
    opacity: 0;
    transform: translateX(-150%) scale(2, 0.1);
    transition: transform 0.2s, opacity 0.2s;
}
.persistent-menus .side-buttons-container.left {

}
button.alt-play-btn {
    width: 1.75em;
    height: 1.75em;
    border-radius: 0.5em;
    border: 1px solid;
    border-color: currentColor;
    background-color: inherit;
    fill: currentColor;
    padding: 0.25em;
    padding-left: 0.3em;
    cursor: pointer;
    --text-tip-opacity: 1;
    opacity: 0.5;
    transition: transform 0.2s, opacity 0.2s, background-color 0.2s, border-color 0.2s, fill 0.2s, border-radius 0.2s;
}
button.alt-play-btn:hover {
    opacity: 0.7;

}
button.alt-play-btn:active {
    opacity: 1;
}
button.alt-play-btn.stop {
    border-radius: 0.2em;
    border-color: transparent;
    transform: scale(0.7);
    background-color: orange;
    fill: orange;
    --text-tip-opacity: 0;
}
button.alt-play-btn.loading {
    cursor: progress;
    border-radius: 2em;
    border-top-color: transparent;
    fill: transparent;
    --text-tip-opacity: 0;
    /* opacity: 0.4; */
    animation: spin 1.5s infinite;
}
button.alt-play-btn.hidden {
    display: none;
}
button.alt-play-btn:after {
    content: '1';
    font-size: 0.8em;
    display: inline-block;
    position: absolute;
    bottom: -0.4em;
    right: 0;
    background-color: var(--bg-color);
    opacity: var(--text-tip-opacity);
    transition: opacity 0.2s;
}
button.alt-play-btn svg {
    width: auto;
    height: 100%;
}
button.alt-play-btn * {
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}
input#dot-menu-toggle {
    opacity: 0;
    order: 1;
    pointer-events: none;
    /* fake invisible so it still responds to :focus events for #wrapper box-outlines above */
    /* display: none; */
}
label[for="dot-menu-toggle"] {
    /* margin-right: 4vw; */
    /* border-radius: 1.5em; */
    /* border: 1px solid; */
    /* border-color: var(--ui-bg-color); */
    /* background-color: rgba(200,50,50,0.2); */
    cursor: pointer;
    transition: border-color 0.2s, transform 0.3s;
}
/* label[for="dot-menu-toggle"]:before { */
/*     content: ''; */
/*     position: absolute; */
/*     background-color: transparent; */
/*     border-radius: 50%; */
/*     height: 2.25em; */
/*     width: 2.25em; */
/*     transition: background-color 0.5s; */
/* } */
label[for="dot-menu-toggle"]:hover {
    border-color: var(--ui-bg-color-opaque);
}
/* label[for="dot-menu-toggle"]:active { */
/*     transform: scale(0.8); */
/* } */


#dot-menu-icon {
    display: grid;
    font: inherit;
    width: 1em; /* important for chrome */
    /* font-size: 0.35em; */
    font-size: calc(0.5 * var(--font-size));
    /* line-height: 1em; */
    line-height: 0.75em;
    transition: transform 0.3s, opacity 0.3s;
}
/* #dot-menu-icon span { */
/*     transition: transform 0.3s, opacity 0.3s; */
/* } */

label[for="dot-menu-toggle"]:hover #dot-menu-icon {
    text-shadow: 0 1px 0 var(--fg-color),
                 0 -1px 0 var(--fg-color),
                 1px 0 0 var(--fg-color),
                 -1px 0 0 var(--fg-color);
    color: var(--bg-color);
}
#dot-menu-icon:active {
    transform: scale(0.8);
}

#dot-menu-icon:before, #dot-menu-icon:after {
    content: '\2022';
    display: inline-block;
    transition: inherit;
}
input#dot-menu-toggle:checked + label #dot-menu-icon:before,
input#dot-menu-toggle:checked + label #dot-menu-icon:after {
    transform: translateX(120%);
    opacity: 0.25;
}
input#dot-menu-toggle:checked + label #dot-menu-icon {
    transform: translateX(-100%);
    /* background-color: var(--ui-bg-color); */
    /* border-radius: 0 1em 1em 0; */
}

#dot-menu-options {
    z-index: -1;
    position: absolute;
    right: 2em;
    background-color: var(--ui-bg-color);
    color: var(--ui-fg-color);
    border-radius: 3px 0 3px 3px;
    transition: transform 0.3s, opacity 0.3s;
}
#dot-menu-options:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    width: 1em;
    height: var(--font-size);
    background-color: var(--ui-bg-color);
    border-radius: 0 1em 1em 0;
    transform: translateX(100%);
    transition: transform 0.2s, opacity 0.2s;
}
input#dot-menu-toggle:not(:checked) ~ #dot-menu-options {
    opacity: 0;
    transform: translateX(25%);
    pointer-events: none;
}
input#dot-menu-toggle:not(:checked) ~ #dot-menu-options:after {
    transform: translateX(0);
}
#dot-menu-options > div {
    white-space: nowrap;
    padding: 0.4em;
    fill: currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#dot-menu-options > div > span {
    margin-left: 0.5em;
}
#dot-menu-options > div:hover,
#dot-menu-options > div:active {
    outline: 0.1em solid;
    outline-offset: -0.3em;
}

#dot-menu-options .icon {
    width: 1em;
    height: 1em;
}
#download-mp3-btn .icon {
    width: 1.5em;
    height: 1.5em;
    padding: 0.25em;
}



/* OLD (DEPRECATED) TRIPLE SIDE-BUTTONS CONTAINER */
/* #side-buttons-container #selection-box { */
/*     z-index: 0; */
/*     position: absolute; */
/*     width: 100%; */
/*     height: 100%; */
/*     top: 0; */
/*     right: 0; */
/*     border-top: 2px solid; */
/*     border-bottom: 2px solid; */
/*     border-color: grey; */
/*     border-radius: 25% 0 0 25%; */

/*     /\* box-sizing: border-box; *\/ */
/*     /\* border-right: 4px solid; *\/ */
/*     /\* border-color: blue; *\/ */
/*     /\* border-radius: 0.2em 0 0 0.2em; *\/ */
/*     transition: width 0.3s, border-radius 0.3s; */
/* } */
/* #side-buttons-container #selection-box:before, #side-buttons-container #selection-box:after { */
/*     content: ''; */
/*     position: absolute; */
/*     width: 100%; */
/*     height: 100%; */
/*     top: 0; */
/*     left: 0; */
/*     border-left: 4px solid; */
/*     opacity: 0; */
/*     border-color: blue; */
/* } */
/* #side-buttons-container #selection-box:before { */
/*     opacity: 0; */
/*     transform: scaleY(0); */
/*     transition: opacity 0.2s; */
/* } */
/* #side-buttons-container #selection-box:after { */
/*     background-color: transparent; */
/*     /\* backdrop-filter: brightness(2); *\/ */
/*     /\* -webkit-backdrop-filter: brightness(2); *\/ */
/*     backdrop-filter: blur(2px); */
/*     -webkit-backdrop-filter: blur(2px); */
/*     box-sizing: border-box; */
/*     border: 4px solid; */
/*     border-color: blue; */
    
/*     opacity: 0; */
/*     transform: scaleX(0); */
/*     transform-origin: 0 100%; */
/*     transition: opacity 0.2s; */
/*     transition-delay: 0; */
/* } */
/* #side-buttons-container:hover #selection-box { */
/*     width: calc(100vw - 1em); */
/*     border-radius: 0; */
/* } */
/* #side-buttons-container:hover #selection-box:before { */
/*     opacity: 1; */
/*     transform: scaleY(1); */
/*     transition: transform 0.2s; */
/*     transition-delay: 0.3s; */
/* } */
/* #side-buttons-container:hover #selection-box:after { */
/*     opacity: 1; */
/*     transform: scaleX(1); */
/*     transition: transform 0.2s; */
/*     transition-delay: 0.5s; /\* 0.2 + 0.3 *\/ */
/* } */

/* #side-buttons-container > button { */
/*     z-index: 1; */
/*     align-self: flex-end; */
/*     --btn-size: calc(1.2 * var(--font-size)); */
/*     width: var(--btn-size); */
/*     height: var(--btn-size); */
/*     margin-right: calc(var(--btn-size) / 2); */
/*     border-radius: calc(var(--btn-size) / 2); */
/*     border: 2px solid; */
/*     border-color: currentcolor; */
/*     box-shadow: 0 2px 5px currentcolor; */
/*     cursor: pointer; */
/*     opacity: 0.7; */
/*     transition: opacity 0.3s, width 0.3s; */
/* } */
/* #side-buttons-container:hover > button { */
/*     /\* width: calc(var(--font-size) * 6); *\/ */
/*     width: 8em; */
/* } */
/* #side-buttons-container > button:hover { */
/*     opacity: 1; */
/* } */
/* #side-buttons-container > button#start-here-btn { */
/*     color: lightblue; */
/*     background-color: blue; */
/* } */
/* #side-buttons-container > button#add-effects-btn { */
/*     color: black; */
/*     background-color: var(--panel-color); */
/* } */
/* #side-buttons-container > button#download-btn { */
/*     color: var(--load-color-dark); */
/*     background-color: var(--load-color); */
/* } */
/* #side-buttons-container > button#reset-btn { */
/*     color: orangered; */
/*     background-color: red; */
/* } */