/* 


LIGATURES: 

-- --- == === != !== =!= =:= =/= <= >= && &&& &= ++ +++ *** ;; !! ?? ??? ?: ?. ?= <: :< :> >: <:< <> <<< >>> << >> || -| _|_ |- ||- |= ||= ## ### #### #{ #[ ]# #( #? #_ #_( #: #! #= ^= <$> <$ $> <+> <+ +> <*> <* *> </ </> /> <!-- <#-- --> -> ->> <<- <- <=< =<< <<= <== <=> <==> ==> => =>> >=> >>= >>- >- -< -<< >-> <-< <-| <=| |=> |-> <-> <~~ <~ <~> ~~ ~~> ~> ~- -~ ~@ [||] |] [| |} {| [< >] |> <| ||> <|| |||> <||| <|> ... .. .= ..< .? :: ::: := ::= :? :?> // /// /= //= /== @_ __ ??? <:< ;;;

. , : ; … ! ¡ ? ¿ · • * ⁅ ⁆ # ․ ‾ / \ ‿ ( ) { } [ ] ❰ ❮ ❱ ❯ ⌈ ⌊ ⌉ ⌋ ⦇ ⦈ - – — ‐ _ ‚ „ “ ” ‘ ’ « » ‹ › ‴ " ' ⟨ ⟪ ⟦ ⟩ ⟫ ⟧ · ;

₿ ¢ ¤ $ ₫ € ƒ ₴ ₽ £ ₮ ¥ ≃ ∵ ≬ ⋈ ∙ ≔ ∁ ≅ ∐ ⎪ ⋎ ⋄ ∣ ∕ ∤ ∸ ⋐ ⋱ ∈ ∊ ⋮ ∎ ⁼ ≡ ≍ ∹ ∃ ∇ ≳ ∾ ⥊ ⟜ ⎩ ⎨ ⎧ ⋉ ⎢ ⎣ ⎡ ≲ ⋯ ∓ ≫ ≪ ⊸ ⊎ ⨀ ⨅ ⨆ ⊼ ⋂ ⋃ ≇ ⊈ ⊉ ⊽ ⊴ ≉ ∌ ∉ ≭ ≯ ≱ ≢ ≮ ≰ ⋢ ⊄ ⊅ +− × ÷ = ≠ > < ≥ ≤ ± ≈ ¬ ~ ^ ∞ ∅ ∧ ∨ ∩ ∪ ∫ ∆ ∏ ∑ √ ∂ µ ∥ ⎜ ⎝ ⎛ ⎟ ⎠ ⎞ % ‰ ﹢ ⁺ ≺ ≼ ∷ ≟ ∶ ⊆ ⊇ ⤖ ⎭ ⎬ ⎫ ⋊ ⎥ ⎦ ⎤ ⊢ ≗ ∘ ∼ ⊓ ⊔ ⊡ ⊟ ⊞ ⊠ ⊏ ⊑ ⊐ ⊒ ⋆ ≣ ⊂ ≻ ∋ ⅀ ⊃ ⊤ ⊣ ∄ ∴ ≋ ∀ ⋰ ⊥ ⊻ ⊛ ⊝ ⊜ ⊘ ⊖ ⊗ ⊙ ⊕ ↑ ↗ → ↘ ↓ ↙ ← ↖ ↔ ↕ ↝ ↭↞ ↠ ↢ ↣ ↥ ↦ ↧ ⇥↩ ↪ ↾ ⇉ ⇑ ⇒ ⇓ ⇐ ⇔ ⇛ ⇧ ⇨ ⌄ ⌤ ➔ ➜ ➝ ➞ ⟵ ⟶ ⟷ ● ○ ◯ ◔ ◕ ◶ ◌ ◉ ◎ ◦ ◆ ◇ ◈ ◊ ■ □ ▪▫ ◧ ◨ ◩ ◪ ◫ ▲ ▶ ▼ ◀ △ ▷ ▽ ◁ ► ◄ ▻ ◅ ▴ ▸ ▾ ◂ ▵ ▹ ▿ ◃ ⌶ ⍺ ⍶ ⍀ ⍉ ⍥ ⌾ ⍟ ⌽ ⍜ ⍪ ⍢ ⍒ ⍋ ⍙ ⍫ ⍚ ⍱ ⍦ ⍎ ⍊ ⍖ ⍷ ⍩ ⍳ ⍸ ⍤ ⍛ ⍧ ⍅ ⍵ ⍹ ⎕ ⍂ ⌼ ⍠ ⍔ ⍍ ⌺ ⌹ ⍗ ⍌ ⌸ ⍄ ⌻ ⍇ ⍃ ⍯ ⍰ ⍈ ⍁ ⍐ ⍓ ⍞ ⍘ ⍴ ⍆ ⍮ ⌿ ⌷ ⍣ ⍭ ⍨ ⍲ ⍝ ⍡ ⍕ ⍑ ⍏ ⍬ ⚇ ⚠ ⚡ ✓ ✕ ✗ ✶ @ & ¶ § © ® ™ ° ′ ″ | ¦ † ℓ ‡ № ℮ ␣ ⎋ ⌃ ⌞ ⌟ ⌝ ⌜ ⎊ ⎉ ⌂ ⇪ ⌫ ⌦ ⌨ ⌥ ⇟ ⇞ ⌘ ⏎ ⏻ ⏼ ⭘ ⏽ ⏾ ⌅ � ˳ ˷

▁ ▂ ▃ ▄ ▅ ▆ ▇ █ ▀ ▔ ▏ ▎ ▍ ▌ ▋ ▊ ▉ ▐ ▕ ▖ ▗ ▘ ▙ ▚ ▛ ▜ ▝ ▞ ▟ ░▒▓ ▉▉▉▉▉▉▉▉▉▉▉

 ┌ └ ┐ ┘ ┼ ┬ ┴ ├ ┤ ─ │ ╡ ╢ ╖ ╕ ╣ ║ ╗ ╝ ╜ ╛ ╞ ╟ ╚ ╔ ╩ ╦ ╠ ═ ╬ ╧ ╨ ╤ ╥ ╙ ╘ ╒ ╓ ╫ ╪ ━ ┃ ┄ ┅ ┆ ┇ ┈ ┉ ┊ ┋ ┍ ┎ ┏ ┑ ┒ ┓ ┕ ┖ ┗ ┙ ┚ ┛ ┝ ┞ ┟ ┠ ┡ ┢ ┣ ┥ ┦ ┧ ┨ ┩ ┪ ┫ ┭ ┮ ┯ ┰ ┱ ┲ ┳ ┵ ┶ ┷ ┸ ┹ ┺ ┻ ┽ ┾ ┿ ╀ ╁ ╂ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊ ╋ ╌ ╍ ╎ ╏ ╭ ╮ ╯ ╰ ╱ ╲ ╳ ╴ ╵ ╶ ╷ ╸ ╹ ╺ ╻ ╼ ╽ ╾ ╿


*/


:root {
   --BLUE: #0032AB;
   --LIGHTBLUE: #00A9FF;
   --DARKBLUE: #111726;
   --LIGHTGREY: #EEE;
   --WHITE: #FFF;

   --backCol: var(--LIGHTGREY);
   --frontCol: var(--DARKBLUE);

   --screenMargin: 8px;
   --lineH: 32px;
   --headerH: 40px;
   --footerH: 18px;
   --margin: 16px;
   --padding: 8px;
   --fontSize: 13px;
   --systemFontSize: 13px;
   --titleBarH: 24px;
   --desktopGrid: 100px;
   --iconSize: 48px;

   /* CURSORS */
   /* url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><circle cx='8' cy='8' r='7' fill='%23f00'/></svg>") 8 8, auto; */
   --pointer: pointer;


   /* TEXTURES */
   --desktopBG: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAABJJREFUGFdj/P///39GEGCAAgA+HQQDCeJWEQAAAABJRU5ErkJggg==");
   --dottedTextureA: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAABJJREFUGFdj/P///39GEGCAAgA+HQQDCeJWEQAAAABJRU5ErkJggg==");
   --dottedTextureB: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAABJJREFUGFdj/P///39GEGCAAgA+HQQDCeJWEQAAAABJRU5ErkJggg==");
   --dottedTextureC: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAABJJREFUGFdj/P///39GEGCAAgA+HQQDCeJWEQAAAABJRU5ErkJggg==");
   --dottedTextureD: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAABJJREFUGFdj/P///39GEGCAAgA+HQQDCeJWEQAAAABJRU5ErkJggg==");


   --titleBarActiveTexture: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAABJJREFUGFdj/P///39GEGCAAgA+HQQDCeJWEQAAAABJRU5ErkJggg==");
}


* {
   margin: 0;
   padding: 0;
   image-rendering: pixelated;
   box-sizing: border-box;
   border-radius: 0;
   outline: none;
}

/* * {
   outline: 1px solid red;
   pointer-events: auto !important;
   cursor: auto !important;
   background-color: rgba(255, 0, 0, 0.05);
 } */


 /* src: url('JetBrainsMono-VariableFont_wght.ttf') format('ttf'); */

@font-face {
   font-family: 'JetBrains';
   src: url('JetBrainsMono-Regular.woff2') format('woff2');
}
@font-face {
   font-family: 'JetBrains Bold';
   src: url('JetBrainsMono-ExtraBold.woff2') format('woff2');
   font-weight: bold;
}
@font-face {
   font-family: 'JetBrains Light';
   src: url('JetBrainsMono-Light.woff2') format('woff2');
}



html,
body {
   font-family: "JetBrains", monospace;
   /* font-family: "IBM Plex Mono", monospace; */
   font-feature-settings: "calt" 1, "liga" 1;
   font-variant-ligatures: contextual;
   /* white-space: pre; */
   /* font-weight: 400; */
   font-style: normal;
   font-size: var(--fontSize);
   background-color: var(--backCol);
   color: var(--frontCol);
   min-width: 100vw;
   height: 100%;
   overflow: hidden;
   user-select: none;

   font-variant-ligatures: common-ligatures contextual;

  font-feature-settings: "liga" 1, "calt" 1;

}


h1,
h2,
h3,
h4,
h5,
h6 {
   font-size: inherit;
   line-height: 2;
   vertical-align: middle;
}

h1 {
   font-family: "JetBrains Bold", monospace;
   font-weight: 800;
   letter-spacing: 0.15em;
}

h2 {
   font-family: "JetBrains Bold", monospace;
   font-weight: 700;
   letter-spacing: 0.1em;
}

h3 {
   font-family: "JetBrains Bold", monospace;
   font-weight: 600;
}

h4,
h5,
h6 {
   font-weight: 500;
}

p {
   font-size: inherit;
   font-weight: 400;
   line-height: 1.5;
}

hr {
   border: none;
   border-top: 1px dotted var(--frontCol);
   margin: var(--padding) 0;
}

.window h1,
.modalView h1 {
   margin-bottom: var(--padding);
}

.window p {
   padding: 8px;
}

.readerBlock h3, .readerBlock h4 {
   padding: 0 8px;
}

a {
   text-decoration: underline;
   font-style: italic;
   color: var(--frontCol);
}

p,
h1,
h2,
h3,
li {
   user-select: text;
}

::selection {
   background: var(--frontCol);
   color: var(--backCol);
}

header h1 {
   padding: 0 8px;
}


body {
   display: flex;
   justify-content: center;
   align-items: stretch;
   padding: var(--screenMargin);
   box-sizing: border-box;
   background-color: var(--frontCol);
}


#os-root {
   width: 100%;
   height: 100%;
   margin: 0;
}

#screen {
   position: relative;
   /* max-width: 1440px; */
   width: 100%;
   height: 100%;
   overflow: hidden;
   /* outline: 3px solid var(--frontCol); */
   gap: 1px;
   display: grid;
   background-color: var(--frontCol);
   grid-template-rows: var(--headerH) auto;
}

header,
main,
footer {
   background-color: var(--backCol);
}

input {
   border: none;
   outline: none;
   padding: 0 2px;
   font-family: inherit;
   background-color: var(--backCol);
   color: var(--frontCol);
}

input::placeholder {
   color: var(--frontCol);
   font-family: "JetBrains Light", monospace;
   font-weight: 100;
}


/* ------------------ HEADER -------------------- */


header#header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 8px 0 4px;
   overflow: hidden;
}

header * {
   user-select: none;
}

header#header>* {
   max-height: 100%;
}

header>section,
header>nav {
   display: flex;
   align-items: center;
}

header>nav {
   margin-left: 32px;
   gap: 32px;
}

header>nav.headerToolbar {
   gap: 8px;
}

#logo {
   width: var(--headerH);
   height: var(--headerH);
}

#siteHeader {
   cursor: var(--pointer);
}

nav>h3 {
   cursor: var(--pointer);
   font-weight: 400;
}

[data-href].current {
   font-family: "JetBrains Bold", monospace;
   font-weight: 800;
   text-decoration: underline;
}


.fullPage {
   background-color: var(--frontCol);
   color: var(--backCol);
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1000;
}

#bootLoader {
   display: block;
}

#screenSaver {
   display: none;
   z-index: 100000;
}

.bootText {
   position: absolute;
   bottom: 32px;
   left: 32px;
}

.bootCenter {
   width: 100%;
   height: 100%;
   display: grid;
   justify-content: center;
   align-items: center;
}

#bootAnim {
   width: 128px;
   height: 128px;
}



/* ------------------ MAIN -------------------- */

main {
   width: 100%;
   height: 100%;
   position: relative;
   background-color: transparent;
   overflow: hidden;
   min-height: 0;
}

#desktop,
#windowContainer,
#modalContainer {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   font-size: var(--systemFontSize);
}

#windowContainer,
#modalContainer {
   pointer-events: none;
}

#windowContainerInner {
   position: relative;
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}


.window {
   position: absolute;
   top: 100px;
   left: 200px;
   width: 480px;
   height: 320px;
   border: 2px solid var(--frontCol);
   outline: 1px solid var(--backCol);
   background-color: var(--backCol);
   overflow: hidden;
   user-select: none;
   pointer-events: all;
   min-width: 128px;
   min-height: 64px;
   max-width: calc(100vw - var(--screenMargin) * 2);
   box-sizing: border-box;
}


.window.fullscreen {
   top: 0px !important;
   left: 0px !important;
   right: 0px !important;
   bottom: 0px !important;
   width: auto !important;
   height: auto !important;
   z-index: 1000;
   border: none;
}

.titleBar {
   height: var(--titleBarH);
   line-height: calc(var(--titleBarH) - 1px);
   color: var(--backCol);
   background-color: var(--frontCol);
   width: 100%;
   letter-spacing: 0.15em;
   padding: 0 5px;
   cursor: move;
   display: flex;
   gap: 4px;
   justify-content: space-between;
}


.spacer {
   flex-grow: 1;
   height: 6px;
   margin: 5px 8px;
}

.window.active {
   box-shadow: 6px 6px 0px var(--frontCol);
}

.titleBar>* {
   text-transform: uppercase;
   line-height: inherit;
}

.windowBody {
   background-color: var(--backCol);
   width: 100%;
   height: calc(100% - var(--titleBarH));
   overflow-y: auto;
   overflow-x: hidden;
   font-size: var(--fontSize);
   position: relative;
}

.window.resizable .resizeHandle {
   display: block;
   z-index: 100;
}

.window.fullscreen .resizeHandle,
.window.fullscreen .resizeHandle::after {
   display: none !important;
}

.resizeHandle {
   display: none;
   position: absolute;
   bottom: 0;
   right: 0;
   width: 8px;
   height: 8px;
   /* background-color: var(--frontCol); */
   cursor: nwse-resize;
}

.window.resizable .resizeHandle::after {
   content: "";
   position: absolute;
   right: 0;
   bottom: 0;
   width: 0;
   height: 0;
   border-top: 8px solid transparent;
   border-right: 8px solid var(--frontCol);
}



/* ------------------ Command menu  -------------------- */

.windowCommandMenu {
  position: absolute;
  top: var(--titleBarH);
  right: 0;
  z-index: 1000;

  min-width: 128px;

  background: var(--backCol);
  color: var(--frontCol);
  border-bottom: 2px solid var(--frontCol);
  border-left: 2px solid var(--frontCol);
  font: inherit;
  line-height: var(--lineH);
  padding: 0;
}

.windowCommandMenuItem {
  display: block;
  width: 100%;

  appearance: none;
  border: 0;
  border-radius: 0;

  background: var(--backCol);
  color: var(--frontCol);

  font: inherit;
  text-align: left;

  padding: 0.1em 0.6em;
  cursor: pointer;
}

.windowCommandMenuItem:hover,
.windowCommandMenuItem:focus {
  background: var(--frontCol);
  color: var(--backCol);
  font-family: "JetBrains Bold", monospace;
  font-weight: 700;
  outline: none;
}

.windowCommandMenuItem.isDisabled,
.windowCommandMenuItem:disabled {
  opacity: 0.4;
  cursor: default;
}

.windowCommandMenuItem.isDisabled:hover,
.windowCommandMenuItem:disabled:hover {
  background: var(--backCol);
  color: var(--frontCol);
  font-weight: inherit;
}

.windowCommandMenuSep {
  height: 0;
  border-top: 1px dotted var(--frontCol);
  margin: 0.2em 0;
}







/* ------------------ MODAL  -------------------- */
#modalContainer {
   z-index: 10000;
}

#modal {
   width: 100%;
   height: 100%;
   pointer-events: all;
   display: grid;
   align-items: center;
   justify-content: center;
   background: var(--dottedTextureD);
   display: none;
   font-size: var(--fontSize);
}


#modal .modalView {
   min-width: 256px;
   min-height: 128px;
   justify-self: center;
   max-width: 75%;
   max-height: 75%;
   overflow: hidden;
   background-color: var(--backCol);
   border: 4px double var(--frontCol);
   outline: 2px solid var(--backCol);
   display: grid;
   grid-template-rows: 1fr 48px;
}

.modalContent {
   padding: 12px;
   overflow-y: auto;
}

.modalActions {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 8px;
   background: var(--dottedTextureD);
}

.modalActions .btn {
   background: var(--backCol);
   padding: 4px;
   height: 2em;
}


/* ------------------ DESKTOP -------------------- */


#desktop {
   color: var(--frontCol);

   background-image: var(--desktopBG);
   background-repeat: repeat;

   position: relative;

   background-color: var(--backCol);
   width: 100%;
   height: 100%;
   overflow: hidden;
   display: grid;
   grid-template-columns: repeat(auto-fill, var(--desktopGrid));
   grid-auto-rows: var(--desktopGrid);
   gap: 4px;
   grid-auto-flow: dense;
}

.shortcut {
   /* background-color: red; */
   padding: 16px;
   display: flex;
   justify-content: space-around;
   align-items: center;
   flex-direction: column;
   height: max-content;
   gap: 4px;
   width: var(--desktopGrid);
   min-height: var(--desktopGrid);
   cursor: var(--pointer);
   width: 100px;
   height: 100px;
   position: absolute;
}


.icon {
   width: 48px;
   height: 48px;
   display: grid;
   justify-content: center;
   align-items: center;
}



.shortcut>.title {
   background-color: var(--backCol);
   color: var(--frontCol);
   padding: 2px 4px;
   user-select: none;
   text-transform: uppercase;
}

.osIcon {
  width: calc(var(--titleBarH) * var(--iconSize, 1));
  height: calc(var(--titleBarH) * var(--iconSize, 1));
  display: block;
}


/* .shortcut:hover>.icon {
   outline: 1px dotted var(--frontCol);
}

.shortcut:hover>.title {
   font-weight: 700;
} */

.selection-box {
   position: absolute;
   border: 1px dotted var(--frontCol);
   pointer-events: none;
   z-index: 1000;
}

.shortcut.selected .title {
   /* outline: 1px solid var(--frontCol); */
   background-color: var(--frontCol);
   color: var(--backCol);
}


/* ------------------ FOOTER -------------------- */

footer {
   font-size: var(--systemFontSize);
   line-height: calc(var(--footerH) + 4px);
   padding-top: 4px;
   color: var(--backCol);
   background-color: var(--frontCol);
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   display: none;
   pointer-events: none;
}

#tooltip {
   font-weight: 400;
}





/* ------------------ CUSTOM ELEMENTS -------------------- */


.list {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}

.Hlist {
   display: flex;
   flex-wrap: wrap;
   border: 1px solid var(--frontCol);
   border-width: 1px;
   align-items: stretch;
   background-color: var(--frontCol);
   gap: 1px;
}


.Vlist {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   background-color: var(--frontCol);
   gap: 0px;
}

.Vlist>* {
   border-bottom: 1px dotted var(--frontCol);
}


.spacelist {
   display: flex;
   justify-content: space-between;
   /* background-color: var(--frontCol); */
   /* gap: 1px; */
}

.spaceList>*,
.Hlist>*,
.Vlist>* {
   flex: 1 1 max-content;
   min-width: 0;
   text-align: left;
   background-color: var(--backCol);
   color: var(--frontCol);
   white-space: normal;
   word-break: break-word;
}

.gridList {
   column-width: 200px;
   column-gap: 1px;
   align-items: start;
   grid-auto-flow: dense;
}

.gridList>section {
   break-inside: avoid;
   padding: var(--padding);
   outline: 1px solid var(--frontCol);
}


/* ------------ FORMS and grid layout -------------------- */

/* TODO: gridList and formContainer are duplicate selectors???  */
/* TODO:  UIlistContainer and appTable are duplicates?? */
.formContainer {
   padding: var(--padding);
}

.formContainer>section {
   padding: var(--padding);
   outline: 1px solid var(--frontCol);
}

.formContainer>section>h3 {
   padding: 0;
   margin: 0 0 var(--padding) 0;
}

.UIblockContainer {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   width: calc(var(--titleBarH) * 5);
   /* background-color: var(--frontCol); */
}

.UIlistContainer {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   outline: 1px solid var(--frontCol);
}

.UIblock {
   height: var(--titleBarH);
   line-height: var(--titleBarH);
   vertical-align: middle;
   cursor: var(--pointer);
   font-size: var(--systemFontSize);
   outline: 0.5px solid var(--frontCol)
}

.UIblockContainer .UIblock {
   text-align: center;
}

.UIlistContainer .UIblock {
   margin-bottom: 1px;
   padding: 0 var(--padding);
   outline: 1px dotted var(--frontCol);
}

/* Remove outline from the last item */
.UIlistContainer .UIblock:last-child {
   outline: none;
   margin-bottom: 0;
}


.UIlistContainer .UIblock.selected {
   color: var(--backCol);
   background-color: var(--frontCol);
}


.formContainer>section>* {
   margin: 0 0 var(--padding) 0;
}


.formContainer .btn {
   padding: 0;
}

.formContainer .field {
   padding: 0 var(--padding);
}



/* ------------------ appTable -------------------- */

.appTable {
   display: grid;
   gap: 1px;
   border: 1px solid var(--frontCol);
}

.appTableRow {
   display: grid;
   grid-template-columns: 160px minmax(0, 1fr);
   gap: var(--lineH);
   padding: calc(var(--lineH) * 0.125);
   border-bottom: 1px solid var(--frontCol);
   max-width: 100%;
}

.appTableRow>* {
   min-width: 0;
   overflow-wrap: anywhere;
   word-break: break-word;
}

.appTableValue {
   white-space: normal;
}

.appTableKey {
   font-family: "JetBrains Bold", monospace;
   font-weight: bold;
}


















/* Base styles for unordered and ordered lists */
ul,
ol {
   padding-left: 2em;
   margin-top: 1em;
   margin-bottom: 1em;
   list-style-position: outside;
}

/* Optional: nicer bullets */
ul {
   list-style-type: disc;
}

ol {
   list-style-type: decimal;
}

/* Style for list items */
li {
   margin-bottom: 0.5em;
   line-height: 1.5;
}





/* ------------------ HELPERS -------------------- */


.btn {
   user-select: none;
   cursor: pointer !important;
   white-space: nowrap;
   overflow-x: hidden;
}

.btn:hover {
   font-family: "JetBrains Bold", monospace;
   font-weight: 800;
}


#hidden {
   display: none;
   position: fixed;
   bottom: 0;
   right: 0;
}



/* ------------------ SCROLLING -------------------- */

*::-webkit-scrollbar-track {
   -webkit-box-shadow: none;
   background-color: var(--backCol);
   background: var(--dottedTextureB);
}

*::-webkit-scrollbar {
   width: 8px;
   background-color: var(--backCol);
   /* border-left: 1px solid var(--frontCol); */
}

*::-webkit-scrollbar-thumb {
   background-color: var(--frontCol);
   border-right: none;
}



.bootLogo {
   position: absolute;
   display: grid;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
}

.bootLogo div {
   /* background-color: var(--frontCol); */
   color: var(--backCol);
   padding: 0 4px;
}




/* ------------------ OS IMAGE -------------------- */

.osImage {
   position: relative;
   display: block;
   width: 100%;
   background: var(--backCol);
   overflow: hidden;
}

.osImage[data-aspect] {
   height: auto;
}

.osImageMask {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   background: var(--frontCol);

   mask-image: var(--mask-url);
   mask-size: contain;
   mask-repeat: no-repeat;
   mask-position: center;

   -webkit-mask-image: var(--mask-url);
   -webkit-mask-size: contain;
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-position: center;
}





/*  NOT ANYMORE!  */

.embed {
   background-color: #000;
   position: relative;
   width: 100%;
   padding-bottom: 56.25%;
   /* 16:9 aspect ratio */
   height: 0;
   overflow: hidden;
   margin: 1em 0;
}

.embed iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: none;
}





/* --------------------------------------------------------- */
/* --------------------------------------------------------- */
/* ------------------------APPS ---------------------------- */
/* --------------------------------------------------------- */
/* --------------------------------------------------------- */



/* ---------- SETTINGS ----------- */
.colorFlip {
   color: var(--backCol);
   background-color: var(--frontCol);
   border-color: var(--backCol);
}

.themeFlash {
   position: fixed;
   inset: 0;
   background: var(--flashColor);
   pointer-events: none;
   z-index: 999999;
}

/* ---------- READER ----------- */


.readerBlock {
   max-width: 640px;
   margin: 0 auto;
   padding: var(--padding);
   margin-bottom: var(--lineH);
}

.readerBlock>section {
   /* border-bottom: 1px dotted var(--frontCol); */
   /* padding-bottom: 48px; */
   margin-bottom: var(--lineH);
}

.metablocks {
   padding-bottom: 0px !important;
   margin: var(--lineH) 0;
}

.readerBlock h2 {
   text-transform: uppercase;
   letter-spacing: 0.12em;
   position: sticky;
   top: 0px;
   padding: 0 8px;
   /* color: var(--backCol); */
   background: var(--backCol);
   border: 1px solid var(--frontCol);
   z-index: 100;
   line-height: var(--lineH);
   margin: var(--lineH) 0 var(--lineH) 0;
   border-width: 1px 0;
}

.readerBlock h3 {
   line-height: var(--lineH);
   padding: 8px;
   text-transform: uppercase;
   letter-spacing: 0.15em;
   line-height: 1.5;
}

.readerBlock>section:not(.metablocks) p {
   margin-bottom: 16px;
}


.readerBlock .osImage {
   margin: var(--lineH) 0 var(--margin) 0;
}


/* ------------------ TERMINAL -------------------- */


.terminal {
   color: var(--backCol);
   background-color: var(--frontCol);
   border: 1px solid var(--backCol);
   overflow: auto;
}

.terminalText {
   margin: 2px;
   width: calc(100% - 4px);
   min-height: calc(100% - 4px);
}

.output,
.inputLine {
   line-height: 1.5;
}

.output .line {
   white-space: pre-wrap;
   overflow-wrap: anywhere;
}

.inputLine {
   display: flex;
   gap: 0.5em;
   align-items: baseline;
}

.inputPath {
   font-weight: 800;
   white-space: pre;
   flex: 0 0 auto;
}

.inputLine>div {
   flex-grow: 0;
}

.inputLine>input {
   flex-grow: 1;
   min-width: 4ch;
   display: inline-block;
   background: none;
   outline: none;
   border: none;
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
   color: inherit;
}

.terminalText ::selection {
   background: var(--backCol);
   color: var(--frontCol);
}


/* ------------------ FINDER -------------------- */

.toolbar {
   color: var(--backCol);
   background-color: var(--frontCol);
   border: 1px solid var(--backCol);
   display: flex;
   gap: 8px;
   padding: 3px 8px;
   font-size: var(--systemFontSize);
   position: sticky;
   letter-spacing: 0.13em;
   top: 0;
   flex-wrap: nowrap;
   overflow-x: hidden;
}

.fileList {
   list-style: none;
   padding: 0;
   margin: 0;
}

.fileList li {
   display: flex;
   align-items: center;
   padding: 4px 8px;
   gap: 8px;
   border-bottom: 1px dotted var(--frontCol);
}

.fileList.gridView {
   padding: var(--padding);
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
}

.fileList.gridView li {
   padding: 0;
   display: flex;
   justify-content: space-around;
   align-items: center;
   flex-direction: column;
   height: max-content;
   gap: 4px;
   width: var(--desktopGrid);
   /* min-height: var(--desktopGrid); */
   cursor: var(--pointer);
   border: none;
   text-align: center;
}

.fileList.gridView span {
   max-width: 100px;
   display: block;
   display: inline-block;
   white-space: normal;
   word-break: break-word;
}


/* Grid view overrides */
.fileList .finderIcon {
   width: 24px;
   height: 24px;
   --stroke-width: 1;
}

.fileList.gridView .finderIcon {
   width: 48px;
   height: 48px;
   --stroke-width: 1;
}

.finderIcon {
   stroke-width: var(--stroke-width, 1);
}

/* List view (12px icons) uses thicker stroke */
.fileList:not(.gridView) .finderIcon {
   --stroke-width: 1;
   /* 48/16 */
}

.aboutModalIcon{
   width: 96px;
   height: 96px;
}

.aboutModal{
   display: flex;
}
.aboutModalVersion{
font-family: "Jetbrains Mono Light", monospace;
}

.aboutModalContent{
   padding: 13px;
}


/* ------------------ INTERBET -------------------- */

.browser {
   /* display: flex; */
   /* flex-direction: column; */
   /* height: 100%; */
   padding: 0;
   display: flex;
   flex-direction: column;
}

.browser-header {
   display: flex;
   gap: 4px;
   padding: 2px;
   background: var(--backCol);
   font-size: var(--systemFontSize);
   color: var(--backCol);
   background-color: var(--frontCol);
   line-height: var(--titleBarH);
}

.browser-header input {
   flex: 1;
   border: none;
   outline: none;
   padding: 2px;
   background: var(--backCol);
   color: var(--frontCol);
   font-family: inherit;
   font-size: var(--systemFontSize);
}

.browserBody {
   /* height: calc(100% - var(--lineH)); */
   width: 100%;
   flex-grow: 1;
}


/* ------------------ CANVAS WINDOW -------------------- */

.canvasContainer {
   width: 100%;
   height: 100%;
   position: relative;
}


/* ------------------ HATCHING/TEXTURES -------------------- */


.hatch {
   position: relative;
   width: 100%;
   height: 100%;
   min-height: 100px;
   background: url(textureA.png);
   background-color: var(--backCol);

   background-size: 16px 16px;
   background-position: 0 0;
   background-repeat: repeat;
}


/* ------------------ TV -------------------- */


.TV {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: var(--frontCol);
   padding: 6px 12px 10px 10px;
}

.TVwrapper {
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   width: 420px;
   height: 380px;
   padding: 20px;
}

.TVwrapper>section {
   outline: 4px solid var(--frontCol);
   background-color: var(--backCol);
   position: absolute;
}

.TVmain {
   top: 0;
   left: 0;
   width: 360px;
   height: 360px;
   display: grid;
   justify-content: center;
   align-items: center;
}

.TVright {

   top: 0;
   left: 364px;
   height: 360px;
   width: 60px;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   flex-direction: column;
}

.TVbottom {
   height: 20px;
   width: 400px;
   left: 12px;
   top: 364px;
   background: var(--dottedTextureC);
}

.TVscreen {
   position: relative;
   width: 320px;
   height: 320px;
   outline: 8px solid var(--frontCol);
   overflow: hidden;
}

.TVgrill {
   width: 40px;
   height: 240px;
   background: var(--dottedTextureD);
}

.TVbtn {
   border-radius: 50%;
   width: 32px;
   height: 32px;
   margin: 4px;
   background-color: var(--frontCol);
}

.TVtransition {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   z-index: 2;
}





/* ---------- PLAYER ----------- */


.playerWindow {}

.playerWindow .panel {
   width: 100%;
   height: 256px;
   display: grid;
   align-items: center;
   justify-content: center;
   display: flex;
}

.playerWindow .reel {
   width: 222px;
   height: 222px;
   border: 1px solid var(--frontCol);
   border-radius: 50%;
}


.playerWindow .buttonRow {
   display: flex;
   height: 64px;
}

.playerWindow .buttonRow .playerBtn {
   height: 100%;
   flex-grow: 1;
   outline: 1px solid var(--frontCol);
   text-align: center;
   vertical-align: middle;
   line-height: 64px;
   cursor: var(--pointer);
}

.playerWindow .buttonRow .playerBtn.pressed,
.playerWindow .buttonRow .playerBtn:active {
   background-color: var(--frontCol);
   color: var(--backCol);
}

.timeDisplay {
   position: absolute;
   top: 10px;
   left: 4px;
}

.playerTimeline {
   position: absolute;
   top: 0px;
   left: 0;
   width: 0%;
   height: 8px;
   background: var(--dottedTextureD);
}

.playerLevel {
   position: absolute;
   bottom: 65px;
   left: 0;
   width: 8px;
   height: 0%;
   background: var(--dottedTextureD);
}

/* ---------- FIELD ----------- */


.fieldAppContainer .controls {
   position: absolute;
   bottom: var(--margin);
   right: var(--margin);
   z-index: 10;
   touch-action: none;
   user-select: none;
}

#joystick-base {
   width: 128px;
   height: 128px;
   border-radius: 50%;
   position: relative;
   background-color: var(--backCol);
   background: var(--dottedTextureD);
   outline: 2px solid var(--frontCol)
}

#joystick-stick {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   position: absolute;
   top: 48px;
   left: 48px;
   transform: translate(0, 0);
   background-color: var(--backCol);
   cursor: move;
}



/* ------------------ VIEWER -------------------- */

.IV {
   display: flex;
   flex-direction: column;
   gap: 0;
}

.viewerScroller {
   position: relative;
   flex: 1;
   overflow: auto;
   display: flex;
   justify-content: center;
}

.viewerScroller>.osImage {
   margin: auto;
   display: block;
   max-width: none;
   max-height: none;
}



/* ------------------ EDITOR -------------------- */

.writer-body {
   display: flex;
   flex-direction: column;
}

.writer-textarea {
   flex: 1;
   width: 100%;
   resize: none;
   box-sizing: border-box;
   border: none;
   outline: none;
   background: var(--backCol);
   color: var(--frontCol);
   font: inherit;
   padding: 0.5rem;
}

/* Selection inversion */
.writer-textarea::selection {
   background: var(--frontCol);
   color: var(--backCol);
}



/* ------------------ LOADER -------------------- */

.osLoader {
   font-family: inherit;
   color: inherit;
   background: inherit;
   padding: var(--padding);
   white-space: pre;
}