: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;


   /* 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);
 } */


/* @font-face {
   font-family: 'JetBrains Mono';
   src: url('JetBrainsMono-Regular.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
} */

html,
body {
   font-family: "JetBrains Mono", 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;
}


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

h1 {
   font-weight: 800;
   letter-spacing: 0.15em;
}

h2 {
   font-weight: 700;
}

h3 {
   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;
}


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);
}

#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-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-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;
}




/* ------------------ 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: 12px;
   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);
}



/* ------------------ 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;
}

/* .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: 0 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;
}



/* ---------- SETTINGS ----------- */

.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;
}

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

.formContainer .btn {
   padding: 0;
}

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


/* ------------------ 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;
   margin-bottom: 1px;
   /* margin:  0 0  var(--padding) 0 ; */
}




/* ---------- 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;
}

.imageWrapper,
.readerBlock>.embed {
   position: relative;
   width: 100%;
   margin: var(--lineH) 0 var(--margin) 0;
}

.imageWrapper>img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: contain;
}


.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;
}


/* 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;
}


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


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

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

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

.inputLine {
   display: flex;
   gap: 0.5em;
}

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

.inputLine>input {
   flex-grow: 1;
   display: inline-block;
   background: none;
   outline: none;
   border: none;
   font-family: 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;
}


/* Default (list) view */
.fileList .finderIcon {
   width: 16px;
   height: 16px;
}

/* Grid view overrides */
.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: 3;
   /* 48/16 */
}




/* ------------------ 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);
}

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

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

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


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

.btn:hover {
   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;
}






/* ---------- 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;
}






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

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

.writer-textarea {
   flex: 1;
   background: var(--backCol);
   color: var(--frontCol);
   border: none;
   outline: none;
   resize: none;
   padding: 4px;
   line-height: 1.4;
   caret-color: var(--frontCol);
}

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