/*
  Web KDE - a KDE 1.0 theme for the websites
  by: sirlan (ff00ff) tomma

  written in stylus css
*/
/* # main config */
:root {
/* highlight and shading colours for beveling */
  --c-highlight: #fffdf9;
  --c-shading: #0d0d0f;
/* desktop background */
  --c-desktop: #4682b3;
/* panel (window) background colour */
  --c-panel: #c0c0c0;
/* file manager/text background colour */
  --c-area: #fff;
/* terminal background colour */
  --c-terminal: #0d0d0f;
/* window title start (left) colour */
  --c-title-start: #00007e;
/* window title end (right) colour */
  --c-title-end: #06062f;
/* default text colour */
  --c-text: #000;
/* window title text colour */
  --c-title-text: #fff;
/* default terminal text colour */
  --c-terminal-text: #fff;
/* colour s for links/file names */
  --c-link-text: #f00;
  --c-link-visited-text: #f0f;
/* boarder size */
  --s-borders: 0.15rem;
/* time for transitions */
  --t-transition: 0.125s;
/*  height for menu bars (imo don't change these) */
  --s-menu-bar-height: 1.75rem;
/* default font */
  --f-font: Abaddon;
/* monospace/terminal font */
  --f-mono-font: "Kitchen Sink";
/* default font size */
  --s-font-size: 13pt;
/* default monospace font size */
  --s-mono-font-size: calc(var(--s-font-size) - 3pt);
/*
    the height/width of the desktop bars
    for use when maximizing windows
    [i] override these in `body` or `.desktop`
  */
  --s-desk-top-bar: 0rem;
  --s-desk-left-bar: 0rem;
  --s-desk-right-bar: 0rem;
  --s-desk-bottom-bar: 0rem;
/* preferably don't change ones with _ as there are more of consts */
  --_p-check: repeating-conic-gradient(var(--c-highlight) 0% 25%, transparent 0% 50%) 50% / 3px 3px;
/* !! this one has to be edited in the .styl source file to match theme colours*/
  --_p-handle-border: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg width='60' height='60' viewBox='0 0 15 15' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E :root %7B --c-light: %23eceae7; --c-dark: %23545455; %7D %3C/style%3E%3Cg id='layer1'%3E%3Cpath d='m 13.408203,5 v 8.408203 H 5 V 15 H 15 V 5 Z' style='fill:var(--c-dark);' id='path17' inkscape:label='outside' /%3E%3Cpath d='m 11.591797,5 v 6.591797 H 5 v 1.816406 h 8.408203 V 5 Z' style='fill:var(--c-light);' id='path16' inkscape:label='inside' /%3E%3Crect style='fill:var(--c-dark);' id='rect4' width='5.000001' height='1.7041655' x='10' y='3.2958341' inkscape:label='top-in' /%3E%3Crect style='fill:var(--c-light);' id='rect5' width='5' height='1.7041252' x='10' y='1.5917084' ry='0' inkscape:label='top-out' /%3E%3Crect style='fill:var(--c-dark);' id='rect6' width='5.0000005' height='1.7041249' x='-15' y='3.2958746' transform='rotate(-90)' inkscape:label='left-in' /%3E%3Crect style='fill:var(--c-light);' id='rect7' width='4.9999995' height='1.7041681' x='-14.999999' y='1.5917063' ry='0' transform='rotate(-90)' inkscape:label='left-out' /%3E%3C/g%3E%3C/svg%3E%0A");
}
:root {
  --_p-stripes: repeating-linear-gradient(-45deg, var(--c-panel), var(--c-panel) 0.1em, color-mix(in oklab, var(--c-panel), var(--c-shading)) 0.1em, color-mix(in oklab, var(--c-panel), var(--c-shading)) 0.2em, color-mix(in oklab, var(--c-panel), var(--c-highlight)) 0.2em, color-mix(in oklab, var(--c-panel), var(--c-highlight)) 0.3em);
  --_p-stripes-active: repeating-linear-gradient(-45deg, var(--c-title-start), var(--c-title-start) 0.1em, color-mix(in oklab, var(--c-panel), var(--c-shading)) 0.1em, color-mix(in oklab, var(--c-panel), var(--c-shading)) 0.2em, color-mix(in oklab, var(--c-panel), var(--c-highlight)) 0.2em, color-mix(in oklab, var(--c-panel), var(--c-highlight)) 0.3em);
}
/* # actual theme */
body.desktop,
.desktop {
  font-family: var(--f-font, sans-serif);
  font-size: var(--s-font-size, 12pt);
  background: var(--c-desktop);
}
/* ## base components */
.panel {
  --c-pan-bg: var(--c-panel);
  --c-hl: var(--c-highlight);
  --c-sd: var(--c-shading);
  --c-pan-hl: color-mix(in oklab, var(--c-pan-bg), var(--c-hl));
  --c-pan-sd: color-mix(in oklab, var(--c-pan-bg), var(--c-sd));
  background: var(--c-pan-bg);
  border: var(--s-borders) solid var(--c-pan-bg);
  border-radius: 1px;
  border-color: color-mix(in oklab, var(--c-pan-hl), var(--c-hl) 20%) var(--c-pan-sd) color-mix(in oklab, var(--c-pan-sd), var(--c-sd) 10%) var(--c-pan-hl);
}
.inset {
  --c-pan-bg: var(--c-panel);
  --c-hl: var(--c-highlight);
  --c-sd: var(--c-shading);
  --c-pan-hl: color-mix(in oklab, var(--c-pan-bg), var(--c-hl));
  --c-pan-sd: color-mix(in oklab, var(--c-pan-bg), var(--c-sd));
  background: var(--c-pan-bg);
  border: var(--s-borders) solid var(--c-pan-bg);
  border-radius: 1px;
  border-color: color-mix(in oklab, var(--c-pan-sd), var(--c-sd) 10%) var(--c-pan-hl) color-mix(in oklab, var(--c-pan-hl), var(--c-hl) 20%) var(--c-pan-sd);
}
.area {
  --c-pan-bg: var(--c-panel);
  --c-hl: var(--c-highlight);
  --c-sd: var(--c-shading);
  --c-pan-hl: color-mix(in oklab, var(--c-pan-bg), var(--c-hl));
  --c-pan-sd: color-mix(in oklab, var(--c-pan-bg), var(--c-sd));
  background: var(--c-pan-bg);
  border: var(--s-borders) solid var(--c-pan-bg);
  border-radius: 1px;
  border-color: color-mix(in oklab, var(--c-pan-sd), var(--c-sd) 10%) var(--c-pan-hl) color-mix(in oklab, var(--c-pan-hl), var(--c-hl) 20%) var(--c-pan-sd);
  background: var(--c-area);
}
pre {
  margin: 0;
}
.terminal,
pre {
  --c-pan-bg: var(--c-panel);
  --c-hl: var(--c-highlight);
  --c-sd: var(--c-shading);
  --c-pan-hl: color-mix(in oklab, var(--c-pan-bg), var(--c-hl));
  --c-pan-sd: color-mix(in oklab, var(--c-pan-bg), var(--c-sd));
  background: var(--c-pan-bg);
  border: var(--s-borders) solid var(--c-pan-bg);
  border-radius: 1px;
  border-color: color-mix(in oklab, var(--c-pan-sd), var(--c-sd) 10%) var(--c-pan-hl) color-mix(in oklab, var(--c-pan-hl), var(--c-hl) 20%) var(--c-pan-sd);
  background: var(--c-terminal);
  color: var(--c-terminal-text);
  font-family: var(--f-mono-font);
  font-size: var(--s-mono-font-size);
  overflow-x: auto;
}
.terminal .panel {
  background: transparent;
  border: var(--s-borders) solid var(--c-terminal-text);
  padding: var(--s-borders);
  color: var(--c-terminal-text);
}
/* ## item components */
button,
.button {
  --c-pan-bg: var(--c-panel);
  --c-hl: var(--c-highlight);
  --c-sd: var(--c-shading);
  --c-pan-hl: color-mix(in oklab, var(--c-pan-bg), var(--c-hl));
  --c-pan-sd: color-mix(in oklab, var(--c-pan-bg), var(--c-sd));
  background: var(--c-pan-bg);
  border: var(--s-borders) solid var(--c-pan-bg);
  border-radius: 1px;
  border-color: color-mix(in oklab, var(--c-pan-hl), var(--c-hl) 20%) var(--c-pan-sd) color-mix(in oklab, var(--c-pan-sd), var(--c-sd) 10%) var(--c-pan-hl);
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-size: inherit;
  padding: var(--s-borders);
  display: flex;
  justify-content: start;
  align-items: center;
  font-family: inherit;
  font-size: inherit;
  transition: border-color var(--t-transition), background var(--t-transition);
  user-select: none;
}
button:hover,
.button:hover {
  background: color-mix(in oklab, var(--c-pan-bg), var(--c-highlight) 15%);
}
button:active,
.button:active {
  border-color: color-mix(in oklab, var(--c-pan-sd), var(--c-sd) 10%) var(--c-pan-hl) color-mix(in oklab, var(--c-pan-hl), var(--c-hl) 20%) var(--c-pan-sd);
  background: color-mix(in oklab, var(--c-pan-bg), var(--c-shading) 5%);
}
a.button {
  display: inline-flex;
  align-items: center;
}
.button {
  color: inherit;
  display: inline-block;
}
button:has(img),
.button:has(img) {
  padding: 0;
}
button img,
.button img {
  height: 100%;
  user-select: none;
  pointer-events: none;
}
button:has(input[type="checkbox"]):hover,
.button:has(input[type="checkbox"]):hover {
  border-color: transparent;
}
button:has(input[type="checkbox"]):active,
.button:has(input[type="checkbox"]):active {
  border-color: transparent;
}
:is(button,
.button)[disabled] {
  border-color: color-mix(in oklab, var(--c-pan-sd), var(--c-sd) 10%) var(--c-pan-hl) color-mix(in oklab, var(--c-pan-hl), var(--c-hl) 20%) var(--c-pan-sd);
  background: var(--_p-check);
  color: color-mix(in oklab, var(--c-panel), #000000 45%);
  padding-left: calc(var(--s-borders) * 1.6669);
/*
  text-shadow -1px -1px 0px var(--c-panel), 
               1px  1px 0px var(--c-panel), 
               1px -1px 0px var(--c-panel), 
              -1px  1px 0px var(--c-panel)
  */
}
.terminal :is(button,
.terminal .button) {
  background: transparent;
  border: var(--s-borders) solid var(--c-terminal-text);
  padding: var(--s-borders);
  color: var(--c-terminal-text);
  background: color-mix(in oklab, var(--c-terminal-text), transparent 77.5%);
}
.terminal :is(button:hover,
.terminal .button):hover {
  background: var(--c-terminal-text);
  color: var(--c-terminal);
  opacity: 90%;
}
.terminal :is(button:active,
.terminal .button):active {
  font-weight: bold;
  opacity: 100%;
}
input {
  --c-pan-bg: var(--c-panel);
  --c-hl: var(--c-highlight);
  --c-sd: var(--c-shading);
  --c-pan-hl: color-mix(in oklab, var(--c-pan-bg), var(--c-hl));
  --c-pan-sd: color-mix(in oklab, var(--c-pan-bg), var(--c-sd));
  background: var(--c-pan-bg);
  border: var(--s-borders) solid var(--c-pan-bg);
  border-radius: 1px;
  border-color: color-mix(in oklab, var(--c-pan-sd), var(--c-sd) 10%) var(--c-pan-hl) color-mix(in oklab, var(--c-pan-hl), var(--c-hl) 20%) var(--c-pan-sd);
  background: var(--c-area);
  font-family: var(--f-font);
  font-size: var(--s-font-size);
}
.terminal input {
  background: transparent;
  border: var(--s-borders) solid var(--c-terminal-text);
  padding: var(--s-borders);
  color: var(--c-terminal-text);
  font-family: var(--f-mono-font);
  background: color-mix(in oklab, var(--c-terminal-text), transparent 90%);
}
a {
  color: var(--c-link-text);
  text-decoration: underline;
}
a:visited {
  color: var(--c-link-visited-text);
}
.file {
  display: inline-grid;
  grid-auto-flow: row;
  margin: calc(var(--s-borders) * 1.3337);
  padding: calc(var(--s-borders) * 3.3335);
  gap: calc(var(--s-borders) * 1.6669);
  border: 1px solid transparent;
  width: 4rem;
  max-height: 7.75rem;
  justify-content: center;
  align-items: center;
  overflow-y: clip;
  font-size: calc(var(--s-font-size) - 0.5pt);
}
.file img {
  height: 2.5rem;
  justify-self: center;
  pointer-events: none;
  user-select: none;
}
.file span {
  color: var(--c-link-text);
  text-decoration: underline;
  text-align: center;
}
.file.no-link {
  text-decoration: none;
}
.file.no-link > span {
  --c-link-text: var(--c-text);
  --c-link-visited-text: var(--c-text);
  text-decoration: none;
}
.file.inline {
  display: flex;
  flex-direction: row;
  width: fit-content;
  padding: calc(var(--s-borders) * 1.6669);
  align-items: center;
  justify-content: center;
}
.file.inline img {
  height: 1rem;
}
.file.inline span {
  text-align: start;
}
.desktop > .file span,
.desktop > a.file.no-link span {
  background: var(--c-text);
  color: var(--c-title-text);
  padding: calc(var(--s-borders));
  padding-left: calc(var(--s-borders) * 1.3337);
}
.desktop > .file:active span,
.desktop > a.file.no-link:active span {
  background: var(--c-title-start);
}
.file:active {
  background: color-mix(in oklab, var(--c-title-start), transparent 90%);
  border: 1px dotted var(--c-link-text);
}
.desktop > .file:active,
.desktop > a.file.no-link:active {
  background: transparent;
  border: 1px solid transparent;
}
.file:visited span {
  color: var(--c-link-visited-text);
}
a.button {
  color: color-mix(in oklab, var(--c-text), var(--c-link-text));
}
a.button:visited {
  color: color-mix(in oklab, var(--c-text), var(--c-link-visited-text));
}
a.button.no-link,
a.button.no-link:visited {
  color: var(--c-text);
}
.terminal :is(a,
.terminal a.button) {
  color: var(--c-terminal-text);
  text-decoration: underline;
}
.terminal :is(a:active,
.terminal a.button):active {
  font-weight: bold;
}
.terminal :is(a:visited,
.terminal a.button):visited {
  opacity: 90%;
}
.terminal :is(a.no-link,
.terminal a.button).no-link {
  color: var(--c-terminal-text);
  text-decoration: none;
}
.terminal :is(a.no-link:hover,
.terminal a.button).no-link:hover {
  color: var(--c-terminal);
}
.terminal :is(a.no-link:active,
.terminal a.button).no-link:active {
  color: var(--c-terminal);
  font-weight: bold;
}
img {
  image-rendering: pixelated;
}
/* ## theme components */
.bar-top {
  position: absolute;
  box-sizing: border-box;
  z-index: 0;
  top: 0;
  left: 0;
  margin: 0;
  width: 100vw;
  height: var(--s-desk-top-bar);
}
.bar-bottom {
  position: absolute;
  box-sizing: border-box;
  z-index: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  width: 100vw;
  height: var(--s-desk-bottom-bar);
}
.bar-left {
  position: absolute;
  box-sizing: border-box;
  z-index: 0;
  top: 0;
  left: 0;
  margin: 0;
  height: 100vh;
  width: var(--s-desk-left-bar);
}
.bar-right {
  position: absolute;
  box-sizing: border-box;
  z-index: 0;
  top: 0;
  right: 0;
  margin: 0;
  height: 100vh;
  width: var(--s-desk-right-bar);
}
.window {
  --c-pan-bg: var(--c-panel);
  --c-hl: var(--c-highlight);
  --c-sd: var(--c-shading);
  --c-pan-hl: color-mix(in oklab, var(--c-pan-bg), var(--c-hl));
  --c-pan-sd: color-mix(in oklab, var(--c-pan-bg), var(--c-sd));
  background: var(--c-pan-bg);
  border: var(--s-borders) solid var(--c-pan-bg);
  border-radius: 1px;
  border-color: color-mix(in oklab, var(--c-pan-hl), var(--c-hl) 20%) var(--c-pan-sd) color-mix(in oklab, var(--c-pan-sd), var(--c-sd) 10%) var(--c-pan-hl);
  box-shadow: calc(var(--s-borders) * 1.75) calc(var(--s-borders) * 1.75) 0 color-mix(in oklab, var(--c-shading), transparent 75%);
  display: flex;
  flex-direction: column;
  gap: var(--s-borders);
  padding: var(--s-borders);
  position: relative;
  padding: calc(var(--s-borders) * 1.25);
  min-height: calc(var(--s-menu-bar-height) + var(--s-borders) * 2);
  min-width: 14rem;
  max-height: 100vh;
  max-width: 100vw;
}
.window > :is(header,
.header) {
  display: grid;
  grid-template-columns: auto 1fr auto;
  height: calc(var(--s-menu-bar-height) + var(--s-borders));
  gap: var(--s-borders);
  width: calc(100% - var(--s-borders) * 1);
  overflow-x: clip;
  overflow-y: visible;
}
.window > :is(header .title,
.header) .title {
  --c-pan-bg: var(--c-panel);
  --c-hl: var(--c-highlight);
  --c-sd: var(--c-shading);
  --c-pan-hl: color-mix(in oklab, var(--c-pan-bg), var(--c-hl));
  --c-pan-sd: color-mix(in oklab, var(--c-pan-bg), var(--c-sd));
  background: var(--c-pan-bg);
  border: var(--s-borders) solid var(--c-pan-bg);
  border-radius: 1px;
  border-color: color-mix(in oklab, var(--c-pan-sd), var(--c-sd) 10%) var(--c-pan-hl) color-mix(in oklab, var(--c-pan-hl), var(--c-hl) 20%) var(--c-pan-sd);
  background: linear-gradient(90deg, var(--c-title-start), var(--c-title-end));
  color: var(--c-title-text);
  font-weight: bold;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  width: auto;
  box-sizing: border-box;
  height: inherit;
  padding-left: calc(var(--s-borders) * 1.5);
  user-select: none;
}
.window > :is(header .left,
.header) .left,
.window > :is(header .right,
.header) .right {
  display: flex;
  flex-direction: row;
  height: inherit;
}
.window > :is(header button,
.header) button {
  border-color: transparent;
  aspect-ratio: 1/1;
  height: inherit;
  display: block;
}
.window > :is(header button:hover,
.header) button:hover {
  border-color: color-mix(in oklab, var(--c-pan-hl), var(--c-hl) 20%) var(--c-pan-sd) color-mix(in oklab, var(--c-pan-sd), var(--c-sd) 10%) var(--c-pan-hl);
}
.window > :is(header button:active,
.header) button:active {
  border-color: color-mix(in oklab, var(--c-pan-sd), var(--c-sd) 10%) var(--c-pan-hl) color-mix(in oklab, var(--c-pan-hl), var(--c-hl) 20%) var(--c-pan-sd);
}
.window > :is(header button:disabled,
.header) button:disabled {
  background: var(--_p-check);
  user-select: none;
  color: var(--c-text);
}
.window > :is(header button:disabled:hover,
.header) button:disabled:hover {
  border-color: transparent;
}
.window > :is(header button:disabled:active,
.header) button:disabled:active {
  border-color: transparent;
}
.window::after {
  content: " ";
  height: calc(var(--s-borders) * 13);
  aspect-ratio: 1/1;
  position: absolute;
  bottom: calc(var(--s-borders) * -1.75);
  right: calc(var(--s-borders) * -1.75);
  z-index: 0;
  box-sizing: border-box;
  border: calc(var(--s-borders) * 2.5) solid;
  border-image: var(--_p-handle-border) 20;
}
.window > * {
  z-index: 1;
}
.window.no-handle::after {
  content: none;
}
.window > :is(main,
.main) {
  flex-grow: 1;
}
.menu-bar {
  position: relative;
  display: flex;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 0;
  height: calc(var(--s-menu-bar-height));
}
.menu-bar :is(button,
.menu-bar .button) {
  border-color: transparent;
  height: 100%;
}
.menu-bar :is(button:hover,
.menu-bar .button):hover {
  border-color: color-mix(in oklab, var(--c-pan-hl), var(--c-hl) 20%) var(--c-pan-sd) color-mix(in oklab, var(--c-pan-sd), var(--c-sd) 10%) var(--c-pan-hl);
}
.menu-bar :is(button:active,
.menu-bar .button):active {
  border-color: color-mix(in oklab, var(--c-pan-sd), var(--c-sd) 10%) var(--c-pan-hl) color-mix(in oklab, var(--c-pan-hl), var(--c-hl) 20%) var(--c-pan-sd);
}
.menu-bar :is(button:disabled,
.menu-bar .button):disabled {
  background: var(--_p-check);
  user-select: none;
  color: var(--c-text);
}
.menu-bar :is(button:disabled:hover,
.menu-bar .button):disabled:hover {
  border-color: transparent;
}
.menu-bar :is(button:disabled:active,
.menu-bar .button):disabled:active {
  border-color: transparent;
}
.menu-bar :is(button.no-flat,
.menu-bar .button).no-flat {
  --c-pan-bg: var(--c-panel);
  --c-hl: var(--c-highlight);
  --c-sd: var(--c-shading);
  --c-pan-hl: color-mix(in oklab, var(--c-pan-bg), var(--c-hl));
  --c-pan-sd: color-mix(in oklab, var(--c-pan-bg), var(--c-sd));
  background: var(--c-pan-bg);
  border: var(--s-borders) solid var(--c-pan-bg);
  border-radius: 1px;
  border-color: color-mix(in oklab, var(--c-pan-hl), var(--c-hl) 20%) var(--c-pan-sd) color-mix(in oklab, var(--c-pan-sd), var(--c-sd) 10%) var(--c-pan-hl);
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-size: inherit;
  padding: var(--s-borders);
  display: flex;
  justify-content: start;
  align-items: center;
  font-family: inherit;
  font-size: inherit;
  transition: border-color var(--t-transition), background var(--t-transition);
  padding-left: calc(var(--s-borders) * 1.6669);
}
.menu-bar :is(button.no-flat:hover,
.menu-bar .button).no-flat:hover {
  background: color-mix(in oklab, var(--c-pan-bg), var(--c-highlight) 15%);
}
.menu-bar :is(button.no-flat:active,
.menu-bar .button).no-flat:active {
  border-color: color-mix(in oklab, var(--c-pan-sd), var(--c-sd) 10%) var(--c-pan-hl) color-mix(in oklab, var(--c-pan-hl), var(--c-hl) 20%) var(--c-pan-sd);
  background: color-mix(in oklab, var(--c-pan-bg), var(--c-shading) 5%);
}
.menu-bar.no-flat :is(button,
.menu-bar.no-flat .button) {
  --c-pan-bg: var(--c-panel);
  --c-hl: var(--c-highlight);
  --c-sd: var(--c-shading);
  --c-pan-hl: color-mix(in oklab, var(--c-pan-bg), var(--c-hl));
  --c-pan-sd: color-mix(in oklab, var(--c-pan-bg), var(--c-sd));
  background: var(--c-pan-bg);
  border: var(--s-borders) solid var(--c-pan-bg);
  border-radius: 1px;
  border-color: color-mix(in oklab, var(--c-pan-hl), var(--c-hl) 20%) var(--c-pan-sd) color-mix(in oklab, var(--c-pan-sd), var(--c-sd) 10%) var(--c-pan-hl);
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-size: inherit;
  padding: var(--s-borders);
  display: flex;
  justify-content: start;
  align-items: center;
  font-family: inherit;
  font-size: inherit;
  transition: border-color var(--t-transition), background var(--t-transition);
}
.menu-bar.no-flat :is(button:hover,
.menu-bar.no-flat .button):hover {
  background: color-mix(in oklab, var(--c-pan-bg), var(--c-highlight) 15%);
}
.menu-bar.no-flat :is(button:active,
.menu-bar.no-flat .button):active {
  border-color: color-mix(in oklab, var(--c-pan-sd), var(--c-sd) 10%) var(--c-pan-hl) color-mix(in oklab, var(--c-pan-hl), var(--c-hl) 20%) var(--c-pan-sd);
  background: color-mix(in oklab, var(--c-pan-bg), var(--c-shading) 5%);
}
.menu-bar > li {
  margin: 0;
  height: inherit;
}
.menu-bar > li.shortcut > :is(a,
.menu-bar > li.shortcut button) {
  display: inline-block;
  padding-left: calc(var(--s-borders) * 2);
}
.menu-bar > li.shortcut :is(button,
.menu-bar > li.shortcut a)::first-letter {
  text-decoration: underline;
}
.menu-bar.decor {
  width: calc(100% - var(--s-borders) * 4);
}
.menu-bar.decor::before {
  content: "";
  height: inherit;
  width: calc(var(--s-borders) * 4.5);
  position: relative;
  margin-right: var(--s-borders);
  background: var(--_p-stripes);
}
.menu-bar.decor:hover::before {
  background: var(--_p-stripes-active);
}
.menu-bar:has(.menu-list) {
  z-index: 2;
}
.menu-list {
  --c-pan-bg: var(--c-panel);
  --c-hl: var(--c-highlight);
  --c-sd: var(--c-shading);
  --c-pan-hl: color-mix(in oklab, var(--c-pan-bg), var(--c-hl));
  --c-pan-sd: color-mix(in oklab, var(--c-pan-bg), var(--c-sd));
  background: var(--c-pan-bg);
  border: var(--s-borders) solid var(--c-pan-bg);
  border-radius: 1px;
  border-color: color-mix(in oklab, var(--c-pan-hl), var(--c-hl) 20%) var(--c-pan-sd) color-mix(in oklab, var(--c-pan-sd), var(--c-sd) 10%) var(--c-pan-hl);
  box-shadow: calc(var(--s-borders) * 1.75) calc(var(--s-borders) * 1.75) 0 color-mix(in oklab, var(--c-shading), transparent 75%);
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  min-width: 5rem;
  position: absolute;
  z-index: 1;
}
.menu-list > * {
  width: 100%;
}
.menu-list > li {
  position: relative;
  display: flex;
  align-items: center;
  height: fit-content;
}
.menu-list > li > img {
  height: 1rem;
  padding: calc(var(--s-borders) * 1.6669);
  display: inline-block;
  margin: 0;
}
.menu-list > li > :is(button,
.menu-list > li .button) {
  height: 1.5rem;
  margin: 0;
}
.menu-bar > li > .menu-list::before {
  content: "";
  position: absolute;
  width: 2.75rem;
  height: var(--s-menu-bar-height);
  background: transparent;
  top: calc(var(--s-menu-bar-height) * -1);
}
.menu-list .menu-list {
  margin-left: 100%;
  top: 0;
}
.menu-list > li > :is(button,
.button) {
  width: 100%;
  text-align: left;
  padding: calc(var(--s-borders) / 2);
}
.menu-list > li > :is(button:hover,
.button):hover {
  background: var(--c-title-start);
  color: var(--c-title-text);
  border: var(--s-borders) solid var(--c-title-start);
}
.menu-list > li:has(.menu-list) > button,
.menu-list > li:has(.menu-list) > .button {
  padding-right: 1rem;
}
.menu-list > li:has(.menu-list) > button::after,
.menu-list > li:has(.menu-list) > .button::after {
  content: "⏵";
  height: inherit;
  font-size: 2em;
  position: absolute;
  right: 0;
  bottom: calc(var(--s-borders) * 4.25);
}
.menu-list > li:has(.menu-list:hover) > :is(button,
.menu-list > li:has(.menu-list:hover) .button) {
  background: var(--c-title-start);
  color: var(--c-title-text);
  border: var(--s-borders) solid var(--c-title-start);
}
.menu-list hr {
  --c-pan-bg: var(--c-panel);
  --c-hl: var(--c-highlight);
  --c-sd: var(--c-shading);
  --c-pan-hl: color-mix(in oklab, var(--c-pan-bg), var(--c-hl));
  --c-pan-sd: color-mix(in oklab, var(--c-pan-bg), var(--c-sd));
  background: var(--c-pan-bg);
  border: var(--s-borders) solid var(--c-pan-bg);
  border-radius: 1px;
  border-color: color-mix(in oklab, var(--c-pan-sd), var(--c-sd) 10%) var(--c-pan-hl) color-mix(in oklab, var(--c-pan-hl), var(--c-hl) 20%) var(--c-pan-sd);
  border-left: none;
  border-right: none;
  margin: 0;
  padding: 0;
}
:is(button:has(input[type="checkbox"]),
.button):has(input[type="checkbox"]) {
  padding: 0;
  border: var(--s-borders) solid transparent;
}
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] + label {
  position: relative;
  display: inline-block;
  padding: var(--s-borders);
  padding-left: calc(var(--s-borders) + 1.4rem);
}
input[type="checkbox"] + label::before {
  --c-pan-bg: var(--c-panel);
  --c-hl: var(--c-highlight);
  --c-sd: var(--c-shading);
  --c-pan-hl: color-mix(in oklab, var(--c-pan-bg), var(--c-hl));
  --c-pan-sd: color-mix(in oklab, var(--c-pan-bg), var(--c-sd));
  background: var(--c-pan-bg);
  border: var(--s-borders) solid var(--c-pan-bg);
  border-radius: 1px;
  border-color: color-mix(in oklab, var(--c-pan-sd), var(--c-sd) 10%) var(--c-pan-hl) color-mix(in oklab, var(--c-pan-hl), var(--c-hl) 20%) var(--c-pan-sd);
  content: "__";
  color: transparent;
  height: calc(100% - var(--s-borders) * 2);
  aspect-ratio: 3/4;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  overflow: clip;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  box-sizing: border-box;
  margin-right: 0;
  font-family: sans-serif;
  text-align: center;
  font-size: var(--s-mono-font-size);
}
input:checked + label::before {
  content: "✔";
  color: var(--c-text);
}
/* ## logic stuff */
.window[float] {
  position: fixed;
  margin: 0;
  left: var(--w-x, 0px);
  top: var(--w-y, 0px);
  z-index: var(--w-z, 1);
}
.window {
  width: var(--w-w, initial);
  height: var(--w-h, initial);
}
.window[roll-up]:not([maximized]) {
  height: calc(var(--s-menu-bar-height) + var(--s-borders) * 2);
}
.window[roll-up]:not([maximized]) > :not(:is(header,
.window[roll-up]:not([maximized]) .header)) {
  visibility: hidden;
  height: 0;
  overflow: clip;
}
.window[maximized] {
  position: fixed;
  box-sizing: border-box;
  top: calc(var(--s-desk-top-bar, 0px));
  left: calc(var(--s-desk-left-bar, 0px));
  height: calc(100vh - var(--s-desk-top-bar, 0px) - var(--s-desk-bottom-bar, 0px));
  width: calc(100vw - var(--s-desk-left-bar, 0px) - var(--s-desk-right-bar, 0px));
  margin: 0;
  padding: var(--s-borders);
  box-shadow: none;
}
.window[maximized]::after {
  content: none;
}
.window[closed] {
  visibility: hidden;
}
.window[inactive] {
  --c-title-end: color-mix(in oklab, var(--c-panel), #ffffff00);
  --c-title-start: color-mix(in oklab, var(--c-panel), #00000090);
  --c-title-text: color-mix(in oklab, var(--c-panel), #ffffff 55%);
}
.window[inactive] > :is(header,
.window[inactive] .header) > .title {
  border: var(--s-borders) solid var(--c-panel);
}
.menu-list {
  visibility: hidden;
}
.menu-bar > li:has(button:active) > .menu-list,
.menu-list > li:has(button:hover) > .menu-list,
.menu-bar > li:has(.menu-list:hover) > .menu-list,
.menu-list > li:has(.menu-list:hover) > .menu-list {
  visibility: inherit;
}