body {
 --bottom-accent: 0 1.5px var(--fg-mode-est);
 --bottom-shadow: 0 2px 7px #0002;
 --icon-size: 29px;
 --spacing: 14px;
 --title-bar-icon-size: 22px;
 --title-bar-height: calc(var(--title-bar-icon-size) + var(--spacing));
 --default-font-size: 13px;
 --border-color: var(--bg-un-mode);
 font: var(--default-font-size) var(--system-ui);
}

body,
task-bar {
 background-color: var(--bg-mode-er);
 --task-bar-height: calc(var(--icon-size) + 2 * var(--spacing));
}

title-bar {
 --icon-size: var(--title-bar-icon-size);
 box-shadow: inset 0 0 0 1px var(--border-color);
}

title-bar>button {
 width: var(--title-bar-height);
 box-shadow: inset 2px 0 0 -1px var(--border-color);
}

title-bar>.part-icon {
 margin: calc(var(--spacing) / 2);
}

.toggle-control {
 cursor: pointer;
 position: relative;
}

.toggle-control:hover {
 color: var(--accent);
}

.toggle-control .base {
 width: 100%;
 border-radius: var(--spacing);
 width: calc(var(--spacing) * 2);
 box-shadow: 0 0 0 1px var(--bg-light), inset 0px 0px 12px #000a;
 flex: 0 0 auto;
 overflow: hidden;
 display: flex;
}

scroller- {
 width: 100%;
}

scroll-bar>thumb- {
 transition: background-color 0.3s ease;
 background-color: transparent;
 --track-height: 100%;
 --thumb-start: 0px;
}

:hover>scroll-bar>thumb- {
 background-color: #fff3;
}

scroll-bar>:is(.scroll-up, .scroll-down) {
 display: none;
}

body.light :hover>scroll-bar>thumb- {
 background-color: #0003;
}

task-menu {
 opacity: var(--menu-tween);
}

button:hover {
 color: var(--accent);
 cursor: pointer;
}

task-bar>button {
 height: var(--icon-size);
 line-height: var(--icon-size);
 font-size: calc(var(--icon-size) * 1.2);
 position: relative;
}

task-bar>button>img {
 width: var(--icon-size);
 height: var(--icon-size);
}

task-bar>button>span {
 display: none;
}

body:not(.menu-pressed) task-bar>button.task.pressed::before {
 position: absolute;
 top: calc(0px - var(--spacing));
 left: calc(var(--spacing) / -2);
 right: calc(var(--spacing) / -2);
 height: 4px;
 content: "";
 background-color: var(--accent);
}

task-menu {
 box-shadow: 0px 0px 22px var(--spacing) #0001;
 background: var(--bg-light);
 padding: 0;
 --bottom: calc(var(--task-bar-height) - var(--spacing) / 2);
 border-radius: calc(var(--spacing) / 2);
 bottom: var(--bottom);
 left: calc(var(--spacing) + (var(--menu-tween) - 1) * 256px);
 height: auto;
 max-height: calc(var(--h) - var(--bottom) - var(--spacing));
 width: auto;
}

task-menu hr {
 display: none;
}

task-menu>* {
 white-space: nowrap;
 line-height: var(--spacing);
}

#app-control,
#settings {
 padding: var(--spacing);
 display: flex;
 margin: 0;
 flex-flow: column;
}

#app-control {
 counter-reset: item;
 flex: 0 1 auto;
 line-height: var(--icon-size);
}

#settings {
 gap: 1ch;
 background-color: var(--bg-dark);
}

#settings>span,
#settings>a,
.toggle-control {
 gap: 1ch;
 height: var(--spacing);
 box-sizing: content-box;
}

#settings .label2 {
 min-width: 3.5em;
 text-align: right;
}

.handle {
 display: block;
 position: relative;
 background: var(--light-bg);
 box-shadow: 0px 0px 6px #000;
 width: calc(var(--spacing) - 4px);
 height: calc(var(--spacing) - 4px);
 text-align: center;
 border-radius: var(--spacing);
 left: 2px;
 top: 2px;
}

.toggle-control[data-state="enabled"] .handle {
 left: calc(var(--spacing) + 2px);
}

.task-link[data-here]>a::before {
 content: "";
 position: absolute;
 left: calc(var(--spacing) * -1);
 top: 0;
 bottom: 0;
 width: 4px;
 background: var(--accent);
}

.task-link>a,
.task-link>a:visited {
 line-height: 25px;
 gap: var(--spacing);
 padding: 8px;
 cursor: pointer;
}

.task-link[data-here]>a {
 color: var(--accent);
}

#settings>a[disabled] {
 color: var(--fg-mode-er);
 cursor: default;
}

.task-link:not([data-here]):hover,
#settings>a:not([disabled]):hover {
 color: var(--accent);
 cursor: pointer;
}

task-bar {
 gap: var(--spacing);
 padding: var(--spacing);
 box-shadow: inset 0 2px 0 -1px var(--border-color);
}

tray- {
 position: relative;
 display: flex;
 flex-flow: row nowrap;
 gap: var(--spacing);
 height: 100%;
 margin: 0;
 width: auto;
}

#clock-tray-item {
 white-space: nowrap;
 overflow: hidden;
 width: max-content;
}

#clock-tray-item,
#stats-tray-item {
 vertical-align: top;
 display: inline-block;
 line-height: var(--icon-size);
}

#stats-tray-item {
 background-color: var(--fg);
 color: var(--bg);
 border-radius: 50%;
 font-weight: 800;
 margin-left: var(--icon-size);
 position: relative;
 text-align: center;
 width: var(--icon-size);
}

#stats-tray-item::before {
 color: var(--fg);
 content: "FPS";
 position: absolute;
 right: var(--icon-size);
 width: var(--icon-size);
 text-align: center;
 font-weight: 500;
 font-size: 75%;
}