:root {
  --desktop-bg: #ac9dbd;
  --window-bg: #e2d8ec;
  --selection-bg: #8570a0;
  --selection-inverse: #6C5F8F;
}

.top-panel,
.bottom-panel {
  background: linear-gradient(to bottom, #e1c9f5, #b495cd 3px, #9780b6, #ab85bd 50%, #b495cd, #b48fc9);
  box-shadow: inset 0 -1px #a780b6;
  border-top: 1px solid #8c69a1;
  border-bottom: 1px solid #8669a1;
}

.left-panel,
.right-panel {
  background: linear-gradient(to right, #dcc9f5, #b895cd 3px, #9c80b6, #a785bd 50%, #b795cd, #ad8fc9);
  box-shadow: inset -1px 0 #9780b6;
  border-left: 1px solid #8869a1;
  border-right: 1px solid #8669a1;
}

legend {
  color: #480a99;
}

button,
input[type=button],
input[type=submit],
input[type=reset],
.button {
  border-color: #350662;
  background: linear-gradient(to bottom, #faf6ff, #f0e5f9, #ede0f6);
  box-shadow: -1px -1px #e2daec, 1px 1px #f8f6fa, inset 0 -1px #d2b6e2, inset -1px -2px #d7c8eb, inset -2px -3px #e7dbf3;
}

button:disabled,
button.disabled,
input[type=button]:disabled,
input[type=button].disabled,
input[type=submit]:disabled,
input[type=submit].disabled,
input[type=reset]:disabled,
input[type=reset].disabled,
.button:disabled,
.button.disabled {
  background: #f0e9f6;
  border-color: #c0b8ca;
}

button:focus::after,
button.focus::after,
input[type=button]:focus::after,
input[type=button].focus::after,
input[type=submit]:focus::after,
input[type=submit].focus::after,
input[type=reset]:focus::after,
input[type=reset].focus::after,
.button:focus::after,
.button.focus::after {
  border-top: 1px solid #b38fd1;
  border-right: 2px solid #8964c6;
  border-bottom: 1px solid #8566a8;
  border-left: 2px solid #a467c7;
  box-shadow: inset 0 -1px #8754c1, inset 0 1px #a380cb;
}

button:not(:disabled, .disabled):hover,
button.hover,
input[type=button]:not(:disabled, .disabled):hover,
input[type=button].hover,
input[type=submit]:not(:disabled, .disabled):hover,
input[type=submit].hover,
input[type=reset]:not(:disabled, .disabled):hover,
input[type=reset].hover,
.button:not(:disabled, .disabled):hover,
.button.hover {
  background: linear-gradient(to bottom, #faf2ff, #ebe0f5);
}

button:not(:disabled, .disabled):hover::after,
button.hover::after,
input[type=button]:not(:disabled, .disabled):hover::after,
input[type=button].hover::after,
input[type=submit]:not(:disabled, .disabled):hover::after,
input[type=submit].hover::after,
input[type=reset]:not(:disabled, .disabled):hover::after,
input[type=reset].hover::after,
.button:not(:disabled, .disabled):hover::after,
.button.hover::after {
  border-top: 1px solid #c595fc;
  border-right: 2px solid #ac7dea;
  border-bottom: 1px solid #7425cf;
  border-left: 2px solid #b57dea;
  box-shadow: inset 0 -1px #8f4fe3, inset 0 -2px #e5dbf2, inset 0 1px #bf96ed;
}

button:focus-visible::after,
input[type=button]:focus-visible::after,
input[type=submit]:focus-visible::after,
input[type=reset]:focus-visible::after,
.button:focus-visible::after {
  outline-color: #5D2258;
}

button:not(:disabled, .disabled):active,
button.active,
input[type=button]:not(:disabled, .disabled):active,
input[type=button].active,
input[type=submit]:not(:disabled, .disabled):active,
input[type=submit].active,
input[type=reset]:not(:disabled, .disabled):active,
input[type=reset].active,
.button:not(:disabled, .disabled):active,
.button.active {
  background: linear-gradient(to bottom, #e5d5ee, #e0ceec);
  box-shadow: -1px -1px #e4daec, 1px 1px #f8f6fa, inset 0 1px #c7b2de, inset 1px 2px #d6c3e7, inset 2px 3px #dec8ea, inset 0 -1px #f2e4f8, inset 0 -2px #e5d8f2;
}

form:focus-within:not(:has(button:focus, input[type=button]:focus, input[type=submit]:focus, input[type=reset]:focus)) button:default::after,
form:focus-within:not(:has(button:focus, input[type=button]:focus, input[type=submit]:focus, input[type=reset]:focus)) input[type=button]:default::after,
form:focus-within:not(:has(button:focus, input[type=button]:focus, input[type=submit]:focus, input[type=reset]:focus)) input[type=submit]:default::after,
form:focus-within:not(:has(button:focus, input[type=button]:focus, input[type=submit]:focus, input[type=reset]:focus)) input[type=reset]:default::after,
form:focus-within:not(:has(button:focus, input[type=button]:focus, input[type=submit]:focus, input[type=reset]:focus)) .button:default::after {
  border-top: 1px solid #b18fd1;
  border-right: 2px solid #9764c6;
  border-bottom: 1px solid #8566a8;
  border-left: 2px solid #9467c7;
  box-shadow: inset 0 -1px #8c54c1, inset 0 1px #a780cb;
}

button.primary::after,
input[type=button].primary::after,
input[type=submit].primary::after,
input[type=reset].primary::after,
.button.primary::after {
  border-top: 1px solid #b78fd1;
  border-right: 2px solid #a264c6;
  border-bottom: 1px solid #7f66a8;
  border-left: 2px solid #9c67c7;
  box-shadow: inset 0 -1px #9054c1, inset 0 1px #b380cb;
}

.horizontal-scrollbar>button,
.vertical-scrollbar>button {
  border-color: #FAFAFA;
  background: linear-gradient(to bottom, #a48db3, #8c75a7);
  box-shadow: 0 1px #845aab, 1px 0 #9b81b1, inset 0 1px #c7bad7, inset 1px 0 #b6a2c7, inset -1px 0 #b5a2c7, inset 0 2px #b3a1c4;
}

.horizontal-scrollbar>button::after,
.horizontal-scrollbar>button:active::after,
.horizontal-scrollbar>button:hover::after,
.vertical-scrollbar>button::after,
.vertical-scrollbar>button:active::after,
.vertical-scrollbar>button:hover::after {
  background: #FFFFFF;
  border: 0;
  box-shadow: none;
}

.horizontal-scrollbar>button:not(:disabled, .disabled):hover,
.horizontal-scrollbar>button.hover,
.vertical-scrollbar>button:not(:disabled, .disabled):hover,
.vertical-scrollbar>button.hover {
  background: linear-gradient(to bottom, #c7aad5, #b696d0);
  box-shadow: 0 1px #8b5aab, 1px 0 #a381b1, inset 0 1px #d5b9e8, inset 1px 0 #d5b9e8, inset -1px 0 #d9b9e8;
}

.horizontal-scrollbar>button:not(:disabled, .disabled):active,
.vertical-scrollbar>button:not(:disabled, .disabled):active {
  background-color: #957cac;
  background-image: linear-gradient(to right, #827097, transparent 3px), linear-gradient(to bottom, #827097, transparent 3px), linear-gradient(to left, #817097, transparent 3px);
  box-shadow: 0 1px #7d5aab, 1px 0 #9e81b1, inset 0 -1px #FFFFFF, inset 0 -1px 0 1px #736183, inset 0 1px #736183;
}

.horizontal-scrollbar>.scrollbar-track>.scrollbar-thumb,
.vertical-scrollbar>.scrollbar-track>.scrollbar-thumb {
  box-shadow: 0 1px #847793, 1px 0 #776190, inset 1px 1px #89739d, inset -1px -1px #87739d, inset 2px 0 #ab9abb;
}

.horizontal-scrollbar>.scrollbar-track>.scrollbar-thumb:hover,
.vertical-scrollbar>.scrollbar-track>.scrollbar-thumb:hover {
  box-shadow: 0 1px #867793, 1px 0 #7b6190, inset 1px 1px #ad97c7, inset -1px -1px #b097c7, inset 2px 0 #cab5db;
}

.horizontal-scrollbar>.scrollbar-track>.scrollbar-thumb:active,
.vertical-scrollbar>.scrollbar-track>.scrollbar-thumb:active {
  box-shadow: 0 1px #857793, 1px 0 #796190, inset -1px -1px #8e76a4, inset 1px 1px #7a658b, inset 2px 2px #857195, inset 3px 3px #9078a4;
}

.horizontal-scrollbar>.scrollbar-track>.scrollbar-thumb {
  background: linear-gradient(to bottom, #9e8bb4, #8875a7);
}

.horizontal-scrollbar>.scrollbar-track>.scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #bdaad5, #af96d0);
}

.horizontal-scrollbar>.scrollbar-track>.scrollbar-thumb:active {
  background: linear-gradient(to bottom, #9882ad, #8f72a9);
}

.horizontal-scrollbar>.scrollbar-track>.scrollbar-thumb::after {
  background: repeating-linear-gradient(to right, #c6acdf, #c8acdf 1px, #8a739d 1px, #8c739d 2px);
}

.vertical-scrollbar>.scrollbar-track>.scrollbar-thumb {
  background: linear-gradient(to right, #a48bb4, #9175a7);
}

.vertical-scrollbar>.scrollbar-track>.scrollbar-thumb:hover {
  background: linear-gradient(to right, #c0aad5, #b196d0);
}

.vertical-scrollbar>.scrollbar-track>.scrollbar-thumb:active {
  background: linear-gradient(to right, #9482ad, #8c72a9);
}

.vertical-scrollbar>.scrollbar-track>.scrollbar-thumb::after {
  background: repeating-linear-gradient(to bottom, #c6acdf, #cbacdf 1px, #87739d 1px, #89739d 2px);
}

::-webkit-scrollbar-thumb {
  border-right-color: #776190;
  border-bottom-color: #857793;
  box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #89739d, inset 3px 0 #ac9abb;
  background: linear-gradient(to bottom, #9d8bb4, #8f75a7);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #c2aad5, #bb96d0);
  box-shadow: inset 0 0 0 1px #fff, inset 2px 2px #b897c7, inset -2px -2px #b097c7, inset 3px 0 #c5b5db;
}

::-webkit-scrollbar-thumb:active {
  background: linear-gradient(to bottom, #9BAD82, #94A972);
  box-shadow: inset 0 0 0 1px #fff, inset -2px -2px #90A476, inset 2px 2px #7B8B65, inset 3px 3px #879571, inset 4px 4px #92A478;
}

::-webkit-scrollbar-thumb:vertical {
  background: linear-gradient(to right, #A4B48B, #95A775);
}

::-webkit-scrollbar-thumb:vertical:hover {
  background: linear-gradient(to right, #C8D5AA, #C3D096);
}

::-webkit-scrollbar-thumb:vertical:active {
  background: linear-gradient(to right, #9BAD82, #94A972);
}

::-webkit-scrollbar-button:vertical:decrement {
  background-image: url(olive-green-scroll-up.svg);
}

::-webkit-scrollbar-button:vertical:increment {
  background-image: url(olive-green-scroll-down.svg);
}

::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url(olive-green-scroll-left.svg);
}

::-webkit-scrollbar-button:horizontal:increment {
  background-image: url(olive-green-scroll-right.svg);
}

input:not([type=button], [type=submit], [type=reset], [type=checkbox], [type=radio], [type=range]),
textarea,
.input,
select {
  border-color: #957fb9;
}

.dropdown>select:not(:disabled):hover+.dropdown-button {
  background: linear-gradient(to bottom, #c7aad5, #b496d0);
  border-color: #9277ab;
  box-shadow: -2px 0 #fff, inset 0 1px #cdb9e8, inset 1px 0 #d5b9e8, inset -1px 0 #d5b9e8;
}

.dropdown>select:not(:disabled):active+.dropdown-button {
  background-color: #957cac;
  background-image: linear-gradient(to right, #857097, transparent 3px), linear-gradient(to bottom, #877097, transparent 3px), linear-gradient(to left, #877097, transparent 3px);
  border-color: #756183;
  box-shadow: -2px 0 #fff;
}

.dropdown>.dropdown-button {
  background: linear-gradient(to bottom, #a28db3, #8f71a8);
  border-color: #8c7d99;
  box-shadow: -2px 0 #fff, inset 0 1px #CBD7BA, inset 1px 0 #b9a2c7, inset -1px 0 #b9a2c7, inset 0 2px #b3a1c4;
}

.dropdown>.dropdown-button::after {
  background: #FFFFFF;
}

.progress-bar:not([aria-valuenow])::after,
.progress-bar>.progress-bar-value {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6666666667), transparent 50%, rgba(255, 255, 255, 0.6666666667) 100%), repeating-linear-gradient(90deg, #9c45e4, #9c45e4 6px, transparent 6px, transparent 8px);
}

progress::-webkit-progress-value {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6666666667), transparent 50%, rgba(255, 255, 255, 0.6666666667) 100%), repeating-linear-gradient(90deg, #9c45e4, #9c45e4 6px, transparent 6px, transparent 8px);
}

progress::-moz-progress-bar {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6666666667), transparent 50%, rgba(255, 255, 255, 0.6666666667) 100%), repeating-linear-gradient(90deg, #9c45e4, #9c45e4 6px, transparent 6px, transparent 8px);
}

.list {
  border-color: #9a7fb9;
}

.list ul[role=tree] li>details>summary::before {
  border-color: #877d99;
  background-image: url(../expand.svg), linear-gradient(to top, #b8a6c0, transparent 3px), linear-gradient(to top left, #c4bbcf, transparent 5px);
}

.list ul[role=tree] li>details[open]>summary::before {
  background-image: url(../collapse.svg), linear-gradient(to top, #b6a6c0, transparent 3px), linear-gradient(to top left, #c4bbcf, transparent 5px);
}

.tabs>menu>button {
  background: linear-gradient(to bottom, #fbf6ff, #ebe0f5);
  border-color: #A6A1A6;
}

.tabs>menu>button:hover {
  background: linear-gradient(to bottom, #fbf6ff, #ebe0f5);
  border-top-color: #8b25cf;
  box-shadow: inset 0 2px 0 #b058e3;
}

.tabs>menu>button:hover::after {
  border: 0;
  box-shadow: none;
}

.tabs>menu>button[aria-selected=true] {
  border-top-color: #CF7225;
  box-shadow: inset 0 2px 0 #E39658;
}

.title-bar {
  background: linear-gradient(to bottom, #c9bbd7, #d1c3e1);
  box-shadow: inset 0 1px #e7daf1, inset 0 2px #e3d3ed, inset 1px 0 #c5b7d1, inset 2px 0 #ccbcd9, inset -1px 0 #bcaec5, inset -2px 0 #cbbcd9, inset 0 -1px #c4b6ce, inset 0 -2px #ccbad6;
  border-color: #cfbddb;
  border-right-color: #aea5b6;
  border-left-color: #c5b7d1;
  color: #FFFFFF;
}

.window,
.dialog,
.menu {
  border-color: #b4abbd;
  border-left-color: #c7b7d0;
  background: #cabed8;
  box-shadow: inset -1px -1px #bcb1c5, inset 1px 0 #cbbdd6, inset -2px -2px #d3c2dc, inset 2px 0 #d5c8e2;
}

.window.active,
.window:focus-within,
.window.menu,
.dialog.active,
.dialog:focus-within,
.dialog.menu,
.menu.active,
.menu:focus-within,
.menu.menu {
  border-color: #634f76;
  border-left-color: #785e8d;
  background: #9b7fb2;
  box-shadow: inset -1px -1px #7f6d9b, inset 1px 0 #8369a1, inset -2px -2px #ab91c8, inset 2px 0 #a285bd;
}

.window.active>.title-bar,
.window:focus-within>.title-bar,
.dialog.active>.title-bar,
.dialog:focus-within>.title-bar,
.title-bar.active,
.menu .title-bar {
  background: linear-gradient(to bottom, #b295cd, #a583b8 6px, #a285bd 50%, #b295cd 80%, #ad95cd 90%, #a88fc9);
  box-shadow: inset 0 1px #e0c9f5, inset 0 2px #d0b8e7, inset -1px 0 #896d9b, inset -2px 0 #a485bd, inset 1px 0 #8669a1, inset 2px 0 #9683ba, inset 0 -1px #8567a8, inset 0 -2px #927fb2;
  border-color: #8869a1;
  border-left-color: #8669a1;
  border-right-color: #5e4f76;
}

.window.active>.title-bar .title-bar-text,
.window:focus-within>.title-bar .title-bar-text,
.dialog.active>.title-bar .title-bar-text,
.dialog:focus-within>.title-bar .title-bar-text,
.title-bar.active .title-bar-text {
  text-shadow: 1px 1px 0 #260a41;
}

.title-bar-buttons button,
.title-bar-buttons button:active,
.title-bar-buttons button:hover {
  background: linear-gradient(135deg, #bcb4c7 0%, transparent 20%), linear-gradient(90deg, #a38fb6 0%, transparent 40%), linear-gradient(180deg, #9e8fb6 0%, transparent 30%), linear-gradient(to bottom right, #826a9e, #6c4f8d);
  box-shadow: inset 1px 1px #8b77a5, inset -1px -1px #6e5387;
}

.title-bar-buttons button[data-close] {
  background: linear-gradient(135deg, #E8B4A1 0%, transparent 20%), linear-gradient(90deg, #DB876C 0%, transparent 40%), linear-gradient(180deg, #DB876C 0%, transparent 30%), linear-gradient(to bottom right, #D57354, #CB4B16);
  box-shadow: inset 1px 1px #D36947, inset -1px -1px #9F3F1E, inset -2px -2px #C45024;
}

.title-bar-buttons button[data-close]::after,
.title-bar-buttons button[data-minimize]::after,
.title-bar-buttons button[data-maximize]::after,
.maximized .title-bar-buttons button[data-maximize]::after {
  border: 0;
  box-shadow: none;
}