/* ---------------------------------------- */
/* Cascade Layers Declaration               */
/* Reference https://css-tricks.com/css-cascade-layers/
/* ---------------------------------------- */
@layer reset,           // 1. Browser reset styles
       variables,       // 2. Declare framework variables
       elements,        // 3. HTML elements and typography
       blocks,          // 4. Block styles which are used across applications
       applications,    // 5. Application-specific rules
       layouts,         // 6. Page layouts
       system,          // 7. Default game system styles
       modules,         // 8. Default module styles
       exceptions;
/* ---------------------------------------- */
/*  Browser Reset                           */
/* ---------------------------------------- */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    user-select: none;
  }
  body {
    width: 100%;
    height: 100vh;
    margin: 0;
    text-rendering: optimizeSpeed;
    line-height: 1.25;
    user-select: none;
  }
  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }
  ul[role="list"],
  ol[role="list"] {
    list-style: none;
  }
  html:focus-within {
    scroll-behavior: smooth;
  }
  img {
    max-width: 100%;
    display: block;
  }
  input,
  button,
  textarea,
  select {
    font: inherit;
  }
}
/* ---------------------------------------- */
/*  Variable Declaration                    */
/* ---------------------------------------- */
@layer variables {
  /* ---------------------------------------- */
  /*  Font Declarations                       */
  /* ---------------------------------------- */
  @font-face {
    font-family: 'Modesto Condensed';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/modesto-condensed/modesto-condensed.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Modesto Condensed';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/modesto-condensed/modesto-condensed-bold.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Amiri';
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/amiri/amiri-regular.woff2") format('woff2');
  }
  @font-face {
    font-family: 'Amiri';
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/amiri/amiri-bold.woff2") format('woff2');
  }
  @font-face {
    font-family: 'Signika';
    src: url('../fonts/signika/signika-regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
  }
  @font-face {
    font-family: 'Signika';
    src: url('../fonts/signika/signika-bold.woff2') format('woff2');
    font-style: normal;
    font-weight: 700;
  }
  @font-face {
    font-family: 'Bruno Ace';
    src: url('../fonts/bruno-ace/bruno-ace.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
  }
  @font-face {
    font-family: 'Bruno Ace SC';
    src: url('../fonts/bruno-ace/bruno-ace-sc.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
  }
  /* ---------------------------------------- */
  /*  Colors                                  */
  /* ---------------------------------------- */
  body {
    --color-warm-1: #ee9b3a;
    --color-warm-2: #c9593f;
    --color-warm-3: #5d142b;
    --color-cool-3: #584a75;
    --color-cool-4: #302831;
    --color-cool-5: #0b0a13;
    --color-cool-5-25: rgba(11, 10, 19, 0.25);
    --color-cool-5-50: rgba(11, 10, 19, 0.5);
    --color-cool-5-75: rgba(11, 10, 19, 0.75);
    --color-cool-5-90: rgba(11, 10, 19, 0.9);
    --color-light-1: #f7f3e8;
    --color-light-2: #efe6d8;
    --color-light-3: #e7d1b1;
    --color-light-4: #d0b8a3;
    --color-light-5: #9f8475;
    --color-light-6: #816b66;
    --color-dark-1: #111;
    --color-dark-2: #222;
    --color-dark-3: #444;
    --color-dark-4: #555;
    --color-dark-5: #666;
    --color-dark-6: #777;
    --color-level-error: #ce0707;
    --color-level-error-bg: rgba(105, 0, 8, 0.8);
    --color-level-error-border: #750003;
    --color-level-info: #59a1f6;
    --color-level-info-bg: rgba(47, 80, 132, 0.8);
    --color-level-info-border: #5c87b9;
    --color-level-success: #26b231;
    --color-level-success-bg: rgba(26, 107, 34, 0.8);
    --color-level-success-border: #1b8f23;
    --color-level-warning: #ee9b3a;
    --color-level-warning-bg: rgba(214, 150, 0, 0.8);
    --color-level-warning-border: #b18404;
    --color-scrollbar: #5d142b;
    --color-scrollbar-track: transparent;
    --color-scrollbar-border: #8d151b;
    --color-text-selection: #f7f3e8;
    --color-text-selection-bg: #584a75;
  }
  /* ---------------------------------------- */
  /*  Typography                              */
  /* ---------------------------------------- */
  body {
    --font-body: "Signika", "Palatino Linotype", sans-serif;
    --font-awesome: "Font Awesome 6 Pro";
    --font-awesome-duotone: "Font Awesome 6 Duotone";
    --font-monospace: monospace;
    --font-blockquote: "Signika", "Palatino Linotype", sans-serif;
    --font-size-10: 0.625rem;
    --font-size-11: 0.6875rem;
    --font-size-12: 0.75rem;
    --font-size-13: 0.8125rem;
    --font-size-14: 0.875rem;
    --font-size-15: 0.9375rem;
    --font-size-16: 1rem;
    --font-size-18: 1.125rem;
    --font-size-20: 1.25rem;
    --font-size-24: 1.5rem;
    --font-size-28: 1.75rem;
    --font-size-32: 2rem;
    --font-size-36: 2.25rem;
    --font-size-48: 3rem;
    --font-size-64: 4rem;
    --font-size-80: 5rem;
    --font-h1: "Modesto Condensed", serif;
    --font-h2: "Amiri", serif;
    --font-h3: "Signika", "Palatino Linotype", sans-serif;
    --font-h4: "Amiri", serif;
    --font-h5: "Signika", "Palatino Linotype", sans-serif;
    --font-h6: "Modesto Condensed", serif;
    --font-h1-size: var(--font-size-48);
    --font-h2-size: var(--font-size-32);
    --font-h3-size: var(--font-size-24);
    --font-h4-size: var(--font-size-24);
    --font-h5-size: var(--font-size-20);
    --font-h6-size: var(--font-size-24);
  }
  /* ---------------------------------------- */
  /*  Layout                                  */
  /* ---------------------------------------- */
  body {
    --input-height: 2rem;
    --z-index-background: -1;
    --z-index-main: 0;
    --z-index-canvas: 0;
    --z-index-app: 30;
    --z-index-ui: 60;
    --z-index-window: 100;
    --z-index-tooltip: 9999;
    --z-index-notification: 99999;
  }
  /* ---------------------------------------- */
  /*  Aesthetics                              */
  /* ---------------------------------------- */
  body {
    --background-url: url("../ui/backgrounds/setup.webp");
    --main-logo: url("../icons/vtt-512.png");
  }
  /* ---------------------------------------- */
  /*  Applications                            */
  /* ---------------------------------------- */
  .window-app,
  .application {
    --header-height: 36px;
    --minimized-width: 200px;
    --background: var(--color-cool-5-90);
    --color-text-primary: var(--color-light-2);
    --color-header-background: rgba(0, 0, 0, 0.5);
    --color-border: var(--color-cool-4);
    --color-fieldset-border: var(--color-light-6);
    --color-form-hint: var(--color-light-5);
    --color-form-hint-hover: var(--color-light-4);
    --color-form-label: var(--color-light-4);
    --color-form-label-hover: var(--color-light-2);
    --color-select-option-bg: transparent;
  }
  /* ---------------------------------------- */
  /*  Forms and Form Elements                 */
  /* ---------------------------------------- */
  input,
  select {
    --input-background-color: var(--color-cool-4);
    --input-border-color: transparent;
    --input-text-color: var(--color-light-3);
    --input-placeholder-color: var(--color-light-4);
    --input-focus-outline-color: var(--color-cool-3);
  }
  input:focus,
  select:focus {
    --input-text-color: var(--color-light-1);
  }
  input:disabled,
  select:disabled {
    --input-background-color: var(--color-cool-5);
    --input-border-color: var(--color-cool-4);
    --input-text-color: var(--color-light-4);
  }
  .standard-form label.icon {
    --input-background-color: var(--color-cool-4);
    --input-border-color: transparent;
    --input-text-color: var(--color-light-3);
    --input-focus-outline-color: var(--color-cool-3);
  }
  .standard-form label.icon:focus-within {
    --input-text-color: var(--color-light-1);
  }
  .standard-form label.icon:has(> input:disabled) {
    --input-background-color: var(--color-cool-5);
    --input-border-color: var(--color-cool-4);
    --input-text-color: var(--color-light-4);
  }
  input[readonly] {
    --input-background-color: var(--color-cool-5);
    --input-border-color: var(--color-cool-4);
    --input-text-color: var(--color-light-4);
  }
  input[type="checkbox"] {
    --checkbox-checked-color: var(--color-warm-1);
    --checkbox-disabled-color: var(--color-cool-4);
    --checkbox-background-color: var(--color-cool-4);
    --checkbox-checkmark-color: transparent;
    --checkbox-font-weight: bold;
  }
  input[type=range] {
    --range-track-color: var(--input-background-color);
    --range-thumb-background-color: rgba(11, 10, 19, 0.9);
    --range-thumb-border-color: var(--color-warm-1);
  }
  a.button,
  button {
    --button-background-color: var(--color-cool-5-50);
    --button-border-color: var(--color-light-5);
    --button-text-color: var(--color-light-3);
    --button-focus-outline-color: var(--color-warm-2);
    --button-hover-background-color: var(--color-warm-2);
    --button-hover-border-color: var(--color-light-3);
    --button-hover-text-color: var(--color-light-1);
  }
  a.button:disabled,
  button:disabled {
    --button-background-color: var(--color-cool-5);
    --button-border-color: transparent;
    --button-text-color: var(--color-light-5);
  }
  a.button.bright,
  button.bright {
    --button-background-color: var(--color-warm-1);
    --button-border-color: var(--color-cool-5);
    --button-text-color: var(--color-cool-5);
    --button-hover-background-color: #fda948;
    --button-hover-border-color: var(--color-warm-3);
    --button-hover-text-color: #000000;
  }
  a.button.bright:disabled,
  button.bright:disabled {
    --button-background-color: var(--color-cool-4);
  }
  /* ---------------------------------------- */
  /*  Setup Views Specifically                */
  /* ---------------------------------------- */
  body.auth {
    --header-size: 160px;
    --header-font-size: var(--font-size-80);
    --form-padding: 1.5rem;
    --max-width: 600px;
  }
  /* ---------------------------------------- */
  /*  Tables                                  */
  /* ---------------------------------------- */
  table {
    --table-background-color: var(--color-cool-5-50);
  }
  body.theme-fantasy {
    /* ---------------------------------------- */
    /*  Colors                                  */
    /* ---------------------------------------- */
    --color-warm-1: #ee9b3a;
    --color-warm-2: #603032;
    --color-warm-3: #372021;
    --color-cool-3: #251a1c;
    --color-cool-4: #0c0609;
    --color-cool-5: #0b090a;
    --color-cool-5-25: rgba(11, 9, 10, 0.25);
    --color-cool-5-50: rgba(11, 9, 10, 0.5);
    --color-cool-5-75: rgba(11, 9, 10, 0.75);
    --color-cool-5-90: rgba(11, 9, 10, 0.9);
    --color-light-2: #ede9de;
    --color-light-4: #c9b793;
    --color-scrollbar: var(--color-warm-2);
    --color-scrollbar-border: var(--color-warm-2);
    /* ---------------------------------------- */
    /*  Forms and Form Elements                 */
    /* ---------------------------------------- */
    /* ---------------------------------------- */
    /*  Packages                                */
    /* ---------------------------------------- */
  }
  body.theme-fantasy input,
  body.theme-fantasy select {
    --input-background-color: var(--color-warm-3);
  }
  body.theme-fantasy input[type=checkbox] {
    --checkbox-background-color: var(--color-warm-3);
  }
  body.theme-fantasy #setup-packages header.controls .filter input {
    --input-background-color: var(--color-cool-3);
  }
  body.theme-scifi {
    /* ---------------------------------------- */
    /*  Backgrounds                              */
    /* ---------------------------------------- */
    --background-url: url("../ui/backgrounds/setup-scifi.webp");
    --main-logo: url("../icons/logo-scifi-blank.png");
    /* ---------------------------------------- */
    /*  Colors                                  */
    /* ---------------------------------------- */
    --color-warm-1: #3a9bee;
    --color-warm-2: #303260;
    --color-warm-3: #202137;
    --color-cool-3: #202137;
    --color-cool-4: #15151e;
    --color-cool-5: #0b090a;
    --color-cool-5-25: rgba(11, 9, 10, 0.25);
    --color-cool-5-50: rgba(11, 9, 10, 0.5);
    --color-cool-5-75: rgba(11, 9, 10, 0.75);
    --color-cool-5-90: rgba(11, 9, 10, 0.9);
    --color-light-1: #f3f7f7;
    --color-light-2: #dee9ed;
    --color-light-3: #c2daea;
    --color-light-4: #899fad;
    --color-light-5: #79849b;
    --color-light-6: #6c7288;
    --color-scrollbar: #303260;
    --color-scrollbar-border: #3a9bee;
    /* ---------------------------------------- */
    /*  Typography                              */
    /* ---------------------------------------- */
    --font-h1: "Bruno Ace SC", serif;
    --font-h2: "Bruno Ace", serif;
    --font-h3: "Bruno Ace", serif;
    --font-h4: "Bruno Ace", serif;
    --font-h5: "Bruno Ace", serif;
    --font-h6: "Bruno Ace", serif;
    --font-h1-size: var(--font-size-64);
    --font-h3-size: var(--font-size-20);
    --font-h4-size: var(--font-size-20);
    --font-h6-size: var(--font-size-18);
    /* ---------------------------------------- */
    /*  Applications                            */
    /* ---------------------------------------- */
    /* ---------------------------------------- */
    /*  Forms and Form Elements                 */
    /* ---------------------------------------- */
  }
  body.theme-scifi .app,
  body.theme-scifi .application {
    --color-border: #303260;
  }
  body.theme-scifi input,
  body.theme-scifi select {
    --input-background-color: #202137;
    --input-focus-outline-color: #3a9bee;
  }
  body.theme-scifi input[type="checkbox"] {
    --checkbox-checked-color: #3a9bee;
    --checkbox-background-color: #202137;
  }
  body.theme-scifi button.bright {
    --button-hover-background-color: #42a5fc;
  }
  /* ---------------------------------------- */
  /*  Setup Specifically                      */
  /* ---------------------------------------- */
  body.auth.theme-scifi {
    --header-font-size: var(--font-size-64);
  }
  body.auth.theme-scifi .app,
  body.auth.theme-scifi .application {
    --color-border: #3a9bee;
  }
}
/* ---------------------------------------- */
/*  Typography                              */
/* ---------------------------------------- */
@layer elements.typography {
  /* ---------------------------------------- */
  /*  Headers                                 */
  /* ---------------------------------------- */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 2rem 0 1rem;
    line-height: 1;
    text-shadow: 1px 1px 4px #000;
  }
  h1:first-child,
  h2:first-child,
  h3:first-child,
  h4:first-child,
  h5:first-child,
  h6:first-child {
    margin-top: 0;
  }
  h1 {
    font-family: var(--font-h1);
    font-size: var(--font-h1-size);
    color: var(--color-light-1);
  }
  h2 {
    font-family: var(--font-h2);
    font-size: var(--font-h2-size);
    color: var(--color-light-1);
  }
  h3 {
    font-family: var(--font-h3);
    font-size: var(--font-h3-size);
    color: var(--color-light-1);
  }
  h4 {
    font-family: var(--font-h4);
    font-size: var(--font-h4-size);
    color: var(--color-light-2);
  }
  h5 {
    font-family: var(--font-h5);
    font-size: var(--font-h5-size);
    color: var(--color-light-2);
  }
  h6 {
    font-family: var(--font-h6);
    font-size: var(--font-h6-size);
    color: var(--color-light-2);
  }
  /** Bordered Header */
  h1.border,
  h2.border,
  h3.border,
  h4.border {
    clear: both;
    padding: 1rem 0 0.6rem;
    position: relative;
    text-indent: 0.5rem;
  }
  h1.border::before,
  h2.border::before,
  h3.border::before,
  h4.border::before {
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    border-top: 2px solid var(--color-warm-2);
    border-bottom: 2px solid var(--color-warm-2);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 50%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, black 50%, transparent 100%);
  }
  h3.border::before,
  h4.border::before {
    border-top: 2px solid var(--color-warm-3);
    border-bottom: 2px solid var(--color-warm-3);
  }
  /** Divider Header */
  h1.divider,
  h2.divider,
  h3.divider,
  h4.divider {
    clear: both;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    border: none;
  }
  h1.divider::before,
  h2.divider::before,
  h3.divider::before,
  h4.divider::before {
    content: "";
    width: 50%;
    margin-right: 0.5rem;
    border-top: 2px ridge var(--color-warm-1);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 100%);
    mask-image: linear-gradient(90deg, transparent 0%, black 100%);
  }
  h1.divider::after,
  h2.divider::after,
  h3.divider::after,
  h4.divider::after {
    content: "";
    width: 50%;
    margin-left: 0.5rem;
    border-top: 2px ridge var(--color-warm-1);
    -webkit-mask-image: linear-gradient(270deg, transparent 0%, black 100%);
    mask-image: linear-gradient(270deg, transparent 0%, black 100%);
  }
  /* ---------------------------------------- */
  /*  Text                                    */
  /* ---------------------------------------- */
  p {
    margin: 0.5rem 0;
  }
  p.inactive {
    color: var(--color-light-5);
  }
  span.highlight {
    color: var(--color-warm-1);
  }
  ::selection {
    background: var(--color-text-selection-bg);
    color: var(--color-text-selection);
  }
  .ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  /* ---------------------------------------- */
  /*  Blockquotes                             */
  /* ---------------------------------------- */
  blockquote {
    margin: 0;
    padding: 0.5rem 1rem;
    font-family: var(--font-blockquote);
    font-style: italic;
  }
  /* ---------------------------------------- */
  /*  Lists                                   */
  /* ---------------------------------------- */
  ul,
  ol {
    margin: 1rem 0;
    padding: 0 0 0 1.25rem;
  }
  ul li,
  ol li {
    margin-bottom: 0.25rem;
  }
  ul li:last-child,
  ol li:last-child {
    margin-bottom: 0;
  }
  ul ul,
  ol ul,
  ul ol,
  ol ol {
    margin: 0.25rem 0 0;
  }
  ul ul li,
  ol ul li,
  ul ol li,
  ol ol li {
    margin: 0;
  }
  /** Lists without list style */
  ul.plain,
  ol.plain {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  dl dt {
    display: inline-block;
    color: var(--color-light-2);
    text-shadow: 1px 1px #000;
    margin: 0 0 0.25rem;
  }
  dl dd {
    margin: 0 0 1rem 1rem;
  }
  /* ---------------------------------------- */
  /*  Links                                   */
  /* ---------------------------------------- */
  a[href] {
    color: var(--color-warm-1);
    overflow-wrap: break-word;
  }
  a[href]:hover {
    text-shadow: 0 0 8px var(--color-warm-2);
  }
  a.control {
    cursor: pointer;
  }
  a.control > i {
    margin-right: 0.25rem;
  }
  a.control:hover {
    color: var(--color-light-2);
    text-shadow: 0 0 8px var(--color-warm-2);
  }
  /* ---------------------------------------- */
  /*  Tables                                  */
  /* ---------------------------------------- */
  table {
    margin: 1rem;
    background: var(--table-background-color);
    border-spacing: 0;
    border-radius: 8px;
    overflow: hidden;
  }
  table th,
  table td {
    padding: 0.5rem 1rem;
  }
  table thead {
    background: var(--color-cool-4);
    font-size: 1.1em;
    color: var(--color-light-1);
    font-weight: bold;
    text-align: left;
  }
  table thead th {
    line-height: 1.5;
    border-bottom: 1px solid var(--color-cool-4);
  }
  table tfoot {
    background: var(--color-cool-4);
    font-size: 1.1em;
    font-weight: bold;
    color: var(--color-light-1);
  }
  table tfoot td {
    line-height: 1.5;
    border-top: 1px solid var(--color-cool-4);
  }
  /* ---------------------------------------- */
  /*  Dividers                                */
  /* ---------------------------------------- */
  hr {
    clear: both;
    border: 0;
    height: 2px;
    margin: 1rem 0;
    color: var(--color-light-3);
    background-image: linear-gradient(90deg, transparent 0%, #e7d1b1 50%, transparent 100%);
  }
  /* ---------------------------------------- */
  /*  Code Blocks                             */
  /* ---------------------------------------- */
  /* Inline Code Blocks */
  p code,
  li code,
  span code {
    display: inline-block;
    padding: 1px 0.25rem;
    margin: -1px 0;
    font-size: var(--font-size-14);
    word-break: keep-all;
    white-space: nowrap;
  }
  code {
    display: block;
    padding: 0.5rem;
    color: var(--color-light-2);
    background: var(--color-cool-4);
    border: 1px solid var(--color-cool-3);
    border-radius: 3px;
    user-select: text;
    --color-text-selection-bg: var(--color-cool-3);
  }
  span.reference {
    flex: none;
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: var(--font-size-14);
    color: #c5dbe3;
    border: 1px solid #def7ff;
    border-radius: 3px;
  }
}
/* ---------------------------------------- */
/*  Media Elements                          */
/* ---------------------------------------- */
@layer elements.media {
  /* Images */
  img,
  iframe,
  video {
    max-width: 100%;
  }
  /* Figures */
  figure {
    width: 100%;
    margin: 1rem 0;
  }
  figure img,
  figure iframe,
  figure video {
    display: block;
    margin: 0 auto;
    clear: both;
    border: 1px solid var(--color-cool-4);
    box-shadow: 0 0 4px #000;
  }
  figure figcaption {
    margin: 1rem 0 0;
    color: var(--color-light-1);
    font-style: italic;
    text-align: center;
  }
  figure.video {
    position: relative;
  }
  figure.video::before {
    content: '';
    display: block;
    padding-bottom: calc(100% * 9/16 + 1.75rem);
  }
  figure.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 1.75rem);
  }
  figure.video figcaption {
    margin: 0;
  }
  /* Alignment */
  figure.left,
  img.left,
  iframe.left,
  video.left {
    clear: left;
    float: left;
    max-width: 30%;
    margin: 0 1rem 1rem 0;
  }
  figure.right,
  img.right,
  iframe.right,
  video.right {
    clear: right;
    float: right;
    max-width: 30%;
    margin: 0 0 1rem 1rem;
  }
  figure.noborder,
  img.noborder,
  iframe.noborder,
  video.noborder {
    border: none;
    box-shadow: none;
  }
}
/* ---------------------------------------- */
/*  Forms and Form Elements                 */
/* ---------------------------------------- */
@layer elements.forms {
  /* ---------------------------------------- */
  /*  Text Input Fields                       */
  /* ---------------------------------------- */
  input[type="text"],
  input[type="number"],
  input[type="password"],
  input[type="date"],
  input[type="time"],
  input[type="search"],
  input[type="file"],
  select {
    width: 100%;
    height: var(--input-height);
    line-height: var(--input-height);
    padding: 0 0.5rem;
    background: var(--input-background-color);
    border: 1px solid var(--input-border-color);
    border-radius: 4px;
    outline: 1px solid transparent;
    color: var(--input-text-color);
    user-select: text;
    font-size: var(--font-size-14);
    transition: outline-color 0.5s;
  }
  input[type="text"]:focus,
  input[type="number"]:focus,
  input[type="password"]:focus,
  input[type="date"]:focus,
  input[type="time"]:focus,
  input[type="search"]:focus,
  input[type="file"]:focus,
  select:focus {
    outline: 2px solid var(--input-focus-outline-color);
  }
  input[type="text"]:disabled,
  input[type="number"]:disabled,
  input[type="password"]:disabled,
  input[type="date"]:disabled,
  input[type="time"]:disabled,
  input[type="search"]:disabled,
  input[type="file"]:disabled,
  select:disabled {
    opacity: 1;
    pointer-events: none;
  }
  input[readonly] {
    pointer-events: none;
  }
  select {
    user-select: none;
  }
  select option {
    background: var(--color-select-option-bg);
  }
  /** Browser Time/Date Icons */
  ::-webkit-calendar-picker-indicator {
    display: none;
  }
  /** Placeholder Text */
  ::placeholder {
    color: var(--input-placeholder-color);
  }
  /** Icon Decorated Inputs */
  label.username,
  label.password,
  label.search {
    display: flex;
    align-items: center;
  }
  label.username > input,
  label.password > input,
  label.search > input {
    padding-right: 30px;
  }
  label.username::after,
  label.password::after,
  label.search::after {
    flex: 0 0 30px;
    margin-left: -30px;
    display: inline-block;
    line-height: var(--input-height);
    font-size: 12px;
    font-family: var(--font-awesome);
    font-weight: 900;
    text-align: center;
    color: var(--color-light-5);
  }
  label.username::after {
    content: "\F007";
  }
  label.password::after {
    content: "\F084";
  }
  label.search::after {
    content: "\F002";
  }
  /** Search Fields */
  input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 0.5rem;
    background: linear-gradient(45deg, transparent 0%, transparent 43%, var(--color-light-5) 45%, var(--color-light-5) 55%, transparent 57%, transparent 100%), linear-gradient(135deg, transparent 0%, transparent 43%, var(--color-light-5) 45%, var(--color-light-5) 55%, transparent 57%, transparent 100%);
    cursor: pointer;
  }
  /** Number Fields */
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }
  /** File Input Fields */
  input[type="file"] {
    font-size: 0.75rem;
  }
  /** Hint Icons in Labels */
  label.hint {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
  }
  label.hint > i {
    cursor: pointer;
    transition: 0.5s;
  }
  label.hint > i:hover {
    color: var(--color-warm-1);
  }
  /* ---------------------------------------- */
  /*  Checkboxes                              */
  /* ---------------------------------------- */
  input[type="checkbox"] {
    --checkbox-size: 20px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }
  input[type="checkbox"]:disabled,
  input[type="checkbox"][readonly] {
    cursor: initial;
  }
  input[type="checkbox"]:focus {
    color: inherit;
    outline: none;
  }
  input[type="checkbox"]:focus-visible::before {
    outline: 2px solid var(--input-focus-outline-color);
  }
  input[type="checkbox"]:checked:focus-visible::before {
    outline: 2px solid var(--input-focus-outline-color);
  }
  input[type="checkbox"]::before,
  input[type="checkbox"]::after {
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    font-size: var(--checkbox-size);
    line-height: var(--checkbox-size);
    border-radius: 3px;
  }
  input[type="checkbox"]::before {
    font-family: var(--font-awesome);
    font-weight: var(--checkbox-font-weight);
    color: var(--checkbox-background-color);
    content: "\f0c8";
    outline: 1px solid transparent;
    transition: outline-color 0.5s;
  }
  input[type="checkbox"]:checked {
    position: relative;
  }
  input[type="checkbox"]:checked::before,
  input[type="checkbox"]:checked::after {
    font-family: var(--font-awesome-duotone);
  }
  input[type="checkbox"]:checked::after {
    color: var(--checkbox-checked-color);
    content: "\f14a\f14a";
  }
  input[type="checkbox"]:checked::before {
    color: var(--checkbox-checkmark-color);
    content: "\f14a";
    position: absolute;
  }
  input[type="checkbox"]:disabled::before,
  input[type="checkbox"][readonly]::before {
    color: var(--checkbox-disabled-color);
  }
  /** Labeled Checkboxes */
  label.checkbox {
    flex: auto;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
    font-size: var(--font-size-12);
  }
  label.checkbox > input[type="checkbox"] {
    --checkbox-size: 16px;
    flex: none;
    top: 0;
    margin: 0;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
  }
  /* Text Areas */
  textarea {
    --color-text-selection-bg: var(--color-cool-3);
    min-height: 50px;
    padding: 1rem;
    background: transparent;
    border: 1px solid var(--color-cool-4);
    border-radius: 4px;
    font-family: var(--font-monospace);
    font-size: var(--font-size-14);
    color: var(--input-text-color);
    user-select: text;
    resize: vertical;
  }
  textarea:focus {
    box-shadow: 0 0 6px var(--color-warm-1);
    outline: 1px solid transparent;
  }
  textarea:read-only {
    color: var(--color-light-4);
    box-shadow: none;
  }
  /* ---------------------------------------- */
  /*  Range Inputs                            */
  /* ---------------------------------------- */
  input[type=range] {
    --thumb-size: 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    height: 20px;
    margin: 0;
    width: 100%;
    border-radius: 4px;
  }
  input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: calc(var(--thumb-size) / 2);
    background: var(--range-track-color);
    cursor: pointer;
  }
  input[type=range]::-webkit-slider-thumb {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    height: var(--thumb-size);
    width: var(--thumb-size);
    background: var(--range-thumb-background-color);
    border: 1px solid var(--range-thumb-border-color);
  }
  input[type=range]::-moz-range-track {
    width: 100%;
    height: calc(var(--thumb-size) / 2);
    background: var(--range-track-color);
    cursor: pointer;
  }
  input[type=range]::-moz-range-thumb {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    height: var(--thumb-size);
    width: var(--thumb-size);
    background: var(--range-thumb-background-color);
    border: 1px solid var(--range-thumb-border-color);
  }
  input[type=range]:disabled,
  input[type=range][readonly] {
    pointer-events: none;
    filter: grayscale(1) opacity(0.33);
  }
  input[type=range]:focus {
    outline: none;
  }
  /* ---------------------------------------- */
  /*  Buttons                                 */
  /* ---------------------------------------- */
  a.button,
  button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    background: var(--button-background-color);
    border: 1px solid var(--button-border-color);
    border-radius: 4px;
    color: var(--button-text-color);
    text-decoration: none;
    cursor: pointer;
    font-size: var(--font-size-14);
  }
  a.button > i,
  button > i {
    pointer-events: none;
    margin-right: 0.25rem;
  }
  a.button > label,
  button > label {
    pointer-events: none;
  }
  a.button:disabled,
  button:disabled {
    pointer-events: none;
  }
  a.button:hover,
  button:hover {
    background: var(--button-hover-background-color);
    color: var(--button-hover-text-color);
    border-color: var(--button-hover-border-color);
    transition: background-color 0.5s, border-color 0.5s;
  }
  a.button:focus,
  button:focus {
    outline: 1px solid var(--button-focus-outline-color);
    box-shadow: 0 0 4px var(--button-focus-outline-color);
  }
  a.button.icon > i,
  button.icon > i {
    margin: 0;
  }
  a.button.active,
  button.active {
    outline: 1px solid var(--button-focus-outline-color);
    box-shadow: 0 0 4px var(--button-focus-outline-color);
  }
  /** Bright Buttons */
  a.button.bright,
  button.bright {
    text-transform: uppercase;
  }
}
/* ---------------------------------------- */
/*  Custom Elements                         */
/* ---------------------------------------- */
@layer elements.custom {
  /* ----------------------------------------- */
  /*  Common Sub-Elements                      */
  /* ----------------------------------------- */
  .tags.input-element-tags {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.25rem;
  }
  .tags.input-element-tags .tag {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    padding: 1px 0.25rem;
    font-size: var(--font-size-12);
    border: 1px solid var(--color-border-dark-3);
    border-radius: 4px;
  }
  /* ----------------------------------------- */
  /*  ColorPicker Element                      */
  /* ----------------------------------------- */
  color-picker {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }
  color-picker > input[type=text] {
    flex: 1;
  }
  color-picker > input[type=color] {
    flex: 0 0 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
  }
  /* ----------------------------------------- */
  /*  MultiSelect Element                      */
  /* ----------------------------------------- */
  multi-select {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  multi-select select {
    width: 100%;
  }
  multi-checkbox {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
  /* ----------------------------------------- */
  /*  ProseMirror Editor Element               */
  /* ----------------------------------------- */
  prose-mirror {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 150px;
  }
  prose-mirror .editor-content {
    flex: 1;
    padding: 0.25rem;
  }
  prose-mirror button.toggle {
    display: none;
    position: absolute;
    top: 2px;
    right: 2px;
    width: var(--form-field-height);
    height: var(--form-field-height);
    line-height: var(--form-field-height);
    padding: 0;
  }
  prose-mirror.inactive:hover button.toggle {
    display: block;
  }
  /* ----------------------------------------- */
  /*  RangePicker Element                      */
  /* ----------------------------------------- */
  range-picker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  range-picker > input[type=range] {
    flex: 1;
  }
  range-picker > input[type=number] {
    flex: 0 0 40px;
    text-align: center;
    padding: 0;
    font-size: 0.8em;
  }
  /* ----------------------------------------- */
  /*  Tags Elements                            */
  /* ----------------------------------------- */
  document-tags,
  string-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
  }
  document-tags > input,
  string-tags > input {
    flex: 1;
  }
  document-tags > button,
  string-tags > button {
    margin: -2px 0;
    padding: 0;
    flex: 0 0 36px;
    line-height: var(--form-field-height);
  }
  /* ----------------------------------------- */
  /*  FilePicker Element                       */
  /* ----------------------------------------- */
  file-picker {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
  }
  file-picker > button {
    margin: -2px 0;
    padding: 0;
    flex: 0 0 36px;
    line-height: var(--form-field-height);
  }
  /* ----------------------------------------- */
  /*  Content Links                            */
  /* ----------------------------------------- */
  .content-link,
  .inline-roll {
    --content-link-background: rgba(0, 0, 0, 0.1);
    background: var(--content-link-background);
  }
}
/* ---------------------------------------- */
/*  Block-Specific Rules                    */
/* ---------------------------------------- */
@layer blocks.basic {
  /* ---------------------------------------- */
  /*  Flexbox                                 */
  /* ---------------------------------------- */
  .flexrow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .flexrow > * {
    flex: 1;
  }
  .flexcol {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .flexcol > * {
    flex: none;
  }
  .flexrow > .flex0,
  .flexcol > .flex0 {
    flex: 0;
  }
  .flexrow > .flex1,
  .flexcol > .flex1 {
    flex: 1;
  }
  .flexrow > .flex2,
  .flexcol > .flex2 {
    flex: 2;
  }
  .flexrow > .flex3,
  .flexcol > .flex3 {
    flex: 3;
  }
  /* ---------------------------------------- */
  /*  Global Classes                          */
  /* ---------------------------------------- */
  .disabled {
    cursor: default;
    pointer-events: none;
  }
  .hidden {
    display: none !important;
  }
  /** Scrollable Containers */
  .scrollable {
    --scroll-margin: 0.75rem;
    margin-right: calc(-1 * var(--scroll-margin)) !important;
    padding-right: var(--scroll-margin) !important;
    overflow: hidden auto;
  }
  /* ---------------------------------------- */
  /*  Global Notifications                    */
  /* ---------------------------------------- */
  #notifications {
    --position-top: 2rem;
    position: fixed;
    width: 100%;
    top: var(--position-top);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    z-index: var(--z-index-notification);
    pointer-events: none;
  }
  #notifications .notification {
    position: relative;
    width: 95%;
    max-width: 1200px;
    pointer-events: all;
  }
  .notification {
    background: rgba(0, 0, 0, 0.5);
    padding: 0.5rem 1rem;
    line-height: 1rem;
    border-radius: 5px;
    box-shadow: 0 0 10px black;
    color: var(--color-light-1);
    font-size: var(--font-size-14);
    filter: drop-shadow(0 0 2px black);
  }
  .notification .close {
    position: absolute;
    top: -6px;
    right: -6px;
  }
  .notification::before {
    font-family: var(--font-awesome);
    font-weight: 900;
    margin-right: 0.5rem;
  }
  .notification.info {
    background: var(--color-level-info-bg);
    border: 1px solid var(--color-level-info-border);
  }
  .notification.info::before {
    content: "\f05a";
  }
  .notification.warning {
    background: var(--color-level-warning-bg);
    border: 1px solid var(--color-level-warning-border);
  }
  .notification.warning::before {
    content: "\f071";
  }
  .notification.error {
    background: var(--color-level-error-bg);
    border: 1px solid var(--color-level-error-border);
  }
  .notification.error::before {
    content: "\f06a";
  }
  .notification.stable {
    background: rgba(138, 211, 4, 0.4);
  }
  .notification.stable::before {
    content: "\f6d9";
  }
  .notification.testing {
    background: rgba(211, 192, 4, 0.4);
  }
  .notification.testing::before {
    content: "\f0ad";
  }
  .notification.development {
    background: rgba(211, 119, 4, 0.4);
  }
  .notification.development::before {
    content: "\f6e3";
  }
  .notification.prototype {
    background: rgba(211, 20, 4, 0.4);
  }
  .notification.prototype::before {
    content: "\f1e2";
  }
  /* ---------------------------------------- */
  /*  Tabbed Navigation                       */
  /* ---------------------------------------- */
  nav.tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 1rem;
  }
  nav.tabs .item {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-light-3);
    cursor: pointer;
  }
  nav.tabs .item i {
    font-size: var(--font-size-24);
  }
  nav.tabs .item.active {
    color: var(--color-light-1);
    text-shadow: 0 0 8px var(--color-warm-1);
  }
  .tab[data-tab]:not(.active) {
    display: none;
  }
  /* ----------------------------------------- */
  /*  Context Dropdown Menu
/* ----------------------------------------- */
  #context-menu {
    width: 100%;
    height: max-content;
    min-width: 150px;
    max-width: 360px;
    position: absolute;
    left: 0;
    background: var(--color-cool-5);
    border: 1px solid var(--color-cool-3);
    border-radius: 5px;
    color: var(--color-text-light-1);
    z-index: calc(var(--z-index-app) + 1);
  }
  #context-menu.expand-down {
    top: calc(100% + 2px);
  }
  #context-menu.expand-up {
    bottom: calc(100% + 2px);
  }
  #context-menu ol.context-items,
  #context-menu li.context-group > ol {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #context-menu li.context-group {
    border-bottom: 1px solid var(--color-cool-4);
  }
  #context-menu li.context-group:last-child {
    border: none;
  }
  #context-menu li.context-item {
    border: 1px solid transparent;
    padding: 0.25rem 0.5rem;
    line-height: 32px;
    cursor: pointer;
    transition: 0.1s;
  }
  #context-menu li.context-item > i {
    margin-right: 0.5rem;
  }
  #context-menu li.context-item:hover {
    border: 1px solid var(--color-cool-4);
    background: black;
    color: var(--color-light-1);
  }
  .window-app #context-menu {
    z-index: calc(var(--z-index-window) + 1);
  }
  /* ----------------------------------------- */
  /* Dialog Windows
/* ----------------------------------------- */
  .dialog .dialog-content {
    font-size: var(--font-size-14);
  }
  .dialog .dialog-buttons {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
  }
  .dialog .dialog-buttons button {
    flex: 2;
    height: 40px;
  }
  .dialog .dialog-buttons button.default {
    flex: 3;
  }
  /* ---------------------------------------- */
  /*  Global Tooltip                          */
  /* ---------------------------------------- */
  #tooltip,
  .locked-tooltip {
    position: fixed;
    width: max-content;
    max-width: 320px;
    padding: 0.5rem 1rem;
    background: var(--color-cool-5-90);
    font-family: var(--font-primary);
    font-size: var(--font-size-14);
    line-height: var(--font-size-16);
    color: var(--color-light-1);
    border-radius: 4px;
    box-shadow: 0 0 4px #000;
    z-index: var(--z-index-tooltip);
    pointer-events: none;
    overflow-wrap: break-word;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 500ms, opacity 500ms;
  }
  #tooltip.text-right,
  .locked-tooltip.text-right {
    text-align: right;
  }
  #tooltip.active,
  .locked-tooltip.active {
    visibility: visible;
    opacity: 1;
    transition: opacity 500ms;
  }
  #tooltip.tour,
  .locked-tooltip.tour {
    pointer-events: all;
  }
  .locked-tooltip {
    pointer-events: all;
    border: 1px solid var(--color-warm-2);
  }
}
@layer blocks.forms {
  .standard-form {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 1rem;
    /** Tabs */
    /** Fieldsets */
    /** Buttons */
    /* Icon Inputs */
    /** Form Groups */
    /** Hint Text */
    /** Form Footers */
  }
  .standard-form .tab {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 1rem;
  }
  .standard-form .tab.active {
    display: flex;
  }
  .standard-form fieldset {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 1rem;
    border-color: var(--color-fieldset-border);
    border-radius: 8px;
  }
  .standard-form fieldset legend {
    font-size: var(--font-size-15);
    font-weight: bold;
  }
  .standard-form fieldset:disabled .form-group {
    pointer-events: none;
  }
  .standard-form fieldset.input-grid {
    --grid-cols: 2;
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: 0.5rem;
  }
  .standard-form button {
    height: var(--input-height);
  }
  .standard-form label.icon:has(> input) {
    background: var(--input-background-color);
    border: 1px solid var(--input-border-color);
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
  }
  .standard-form label.icon:has(> input):has(> input:disabled) {
    border: none;
  }
  .standard-form label.icon:has(> input):focus-within {
    outline: 2px solid var(--input-focus-outline-color);
  }
  .standard-form label.icon:has(> input) > input {
    flex: 1;
    border: none;
    border-radius: 0;
    width: unset;
    padding: 0;
    background: none;
  }
  .standard-form label.icon:has(> input) > input:focus {
    box-shadow: none;
    outline: none;
  }
  .standard-form label.icon:has(> input) > i {
    flex: none;
  }
  .standard-form .form-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    gap: 0.5rem;
  }
  .standard-form .form-group > * {
    flex: 2;
  }
  .standard-form .form-group > input[type=checkbox] {
    flex: none;
  }
  .standard-form .form-group > label {
    flex: 1;
    color: var(--color-form-label);
    font-weight: bold;
    line-height: var(--input-height);
  }
  .standard-form .form-group > label > i {
    margin-right: 0.25rem;
  }
  .standard-form .form-group > label > input {
    font-weight: initial;
  }
  .standard-form .form-group > label.icon {
    flex: 0 0 1rem;
  }
  .standard-form .form-group > label.icon > i {
    margin: 0;
  }
  .standard-form .form-group.stacked > * {
    flex: 0 0 100%;
  }
  .standard-form .form-group:hover > label {
    color: var(--color-form-label-hover);
  }
  .standard-form .form-fields {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
  }
  .standard-form .form-fields > * {
    flex: 1;
  }
  .standard-form .form-fields > input[type="checkbox"],
  .standard-form .form-fields > label {
    flex: none;
  }
  .standard-form .form-fields.flexcol {
    flex-direction: column;
  }
  .standard-form .hint {
    margin: 0;
    font-size: var(--font-size-14);
    color: var(--color-form-hint);
  }
  .standard-form .form-group .hint {
    flex: 0 0 100%;
  }
  .standard-form .form-group:hover .hint {
    color: var(--color-form-hint-hover);
  }
  .standard-form .form-footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }
  .standard-form .form-footer > button,
  .standard-form .form-footer a.button {
    flex: 1;
    height: calc(1.25 * var(--input-height));
    min-width: 180px;
  }
}
@layer blocks.dialog {
  /* ---------------------------------- */
  /*  Dialog V2                         */
  /* ---------------------------------- */
  .application.dialog {
    padding: 0;
    margin: 0;
  }
  .application.dialog:not([open]) {
    display: none;
  }
  .application.dialog .standard-form .form-footer {
    flex-wrap: nowrap;
  }
}
/* ---------------------------------------- */
/*  Application-Specific Rules              */
/* ---------------------------------------- */
@layer applications {
  /* ---------------------------------------- */
  /*  Applications                            */
  /* ---------------------------------------- */
  .app {
    max-height: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    background: var(--background);
    box-shadow: 0 0 20px black;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 8px;
    z-index: var(--z-index-app);
    transform-origin: top left;
  }
  /**
 * Pop-Out Window Application
 */
  .window-app {
    --headerHeight: 30px;
    --paddingX: 1.5rem;
    --paddingY: 1rem;
    position: fixed;
    z-index: var(--z-index-window);
    border: 2px solid var(--color-border);
  }
  .window-app .window-header {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 calc(var(--headerHeight) + 0.5rem);
    overflow: hidden;
    padding: 0 1rem;
    border-bottom: 2px groove var(--color-cool-4);
    cursor: pointer;
  }
  .window-app .window-header .window-title {
    margin: 0;
    font-size: var(--font-size-16);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .window-app .window-header .document-id-link {
    opacity: 0.5;
  }
  .window-app .window-header .header-button {
    flex: none;
  }
  .window-app .window-content {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: var(--paddingY) var(--paddingX);
    overflow: hidden auto;
  }
  .window-app.zhover {
    z-index: calc(var(--z-index-window) + 1);
  }
  .window-app.minimized > * {
    display: none;
  }
  .window-app.minimized .window-header {
    display: flex;
    border: none;
  }
  .window-app.minimized .window-header > * {
    display: none;
  }
  .window-app.minimized .window-header .window-title,
  .window-app.minimized .window-header .close {
    display: block;
  }
  /* ----------------------------------------- */
  /*  World Configuration                      */
  /* ----------------------------------------- */
  #world-config .editor {
    height: 300px;
  }
  #world-config .form-fields {
    flex: 4;
  }
  /* ----------------------------------------- */
  /* File Picker                               */
  /* ----------------------------------------- */
  .filepicker .filepicker-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .filepicker .filepicker-header .current-dir button {
    flex: 0 0 32px;
    text-align: center;
  }
  .filepicker .filepicker-header .filter-dir label {
    flex: none;
  }
  .filepicker .filepicker-header .display-modes a {
    color: var(--color-light-4);
  }
  .filepicker .filepicker-header .display-modes a.active {
    color: var(--color-light-1);
    text-shadow: 0 0 4px var(--color-warm-1);
  }
  .filepicker .filepicker-body {
    font-size: var(--font-size-13);
    border-bottom: 1px solid var(--color-light-3);
    border-top: 1px solid var(--color-light-3);
  }
  .filepicker .directory {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 600px;
    overflow: hidden auto;
  }
  .filepicker .directory > li {
    cursor: pointer;
    padding: 0.5rem;
    margin: 0;
    word-break: break-all;
    overflow: hidden;
  }
  .filepicker .directory > li > i {
    margin-right: 0.25rem;
  }
  .filepicker .directory > li.picked {
    color: var(--color-light-1);
    font-weight: bold;
  }
  .filepicker .directory > li.file {
    border-bottom: 1px solid var(--color-light-5);
  }
  .filepicker .directory > li.file:last-child {
    border-bottom: none;
  }
  .filepicker .directory > li.file:hover {
    color: var(--color-light-1);
  }
  .filepicker .directory > li.dir {
    background: var(--color-cool-4);
    border: 1px solid var(--color-cool-5);
    border-radius: 4px;
    transition: 0.25s;
  }
  .filepicker .directory > li.dir:hover {
    border-color: var(--color-cool-3);
    color: var(--color-light-1);
  }
  .filepicker .details-list img {
    display: none;
  }
  .filepicker .thumbs-list img {
    flex: 0 0 48px;
    object-fit: cover;
    object-position: 50% 50%;
    margin-right: 1rem;
    border: none;
  }
  .filepicker .tiles-list {
    display: grid;
    grid-template-columns: repeat(5, 100px);
  }
  .filepicker .tiles-list li {
    padding: 0;
    border: 1px solid transparent;
    border-right: 1px solid var(--color-light-5);
    border-bottom: 1px solid var(--color-light-5);
  }
  .filepicker .tiles-list li img {
    border: none;
    margin: 0;
    object-fit: contain;
  }
  .filepicker .tiles-list li.picked {
    background: var(--color-cool-5);
    outline: 1px solid var(--color-warm-1);
    box-shadow: 0 0 4px var(--color-warm-1) inset;
  }
  .filepicker .images-list li {
    position: relative;
    height: 200px;
    padding: 0;
  }
  .filepicker .images-list li img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    object-position: 50% 50%;
    border: none;
  }
  .filepicker .images-list li span.filename {
    position: absolute;
    top: 0;
    width: 400px;
    padding: 0.5rem 0;
    left: calc(50% - 200px);
    background: var(--color-cool-5-75);
    border-radius: 0 0 6px 6px;
    text-align: center;
  }
  .filepicker .private button.privacy {
    background: rgba(115, 49, 255, 0.05);
    box-shadow: 0 0 4px #7331FF inset;
  }
  .filepicker .private .directory,
  .filepicker .public .private.dir {
    background: rgba(115, 49, 255, 0.05);
  }
  .filepicker .upload-file label,
  .filepicker .selected-file label {
    flex: 1;
  }
  .filepicker button[type="submit"] {
    flex: 0 0 100%;
  }
  /* ---------------------------------------- */
  /*  Category Filter Application             */
  /* ---------------------------------------- */
  .category-filter .window-content {
    flex: 0.5rem;
    gap: 1rem;
  }
  .category-filter .disabled {
    color: var(--color-light-5);
  }
  .category-filter section.body {
    flex: 1;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 1rem;
    overflow: hidden;
  }
  .category-filter nav.categories {
    height: 100%;
    flex: 0 0 220px;
    gap: 0.5rem;
    padding-right: 1rem;
    border-right: 1px solid var(--color-cool-4);
    font-size: var(--font-size-14);
  }
  .category-filter nav.categories label {
    font-weight: bold;
    line-height: var(--input-height);
    border-bottom: 1px solid var(--color-cool-4);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .category-filter nav.categories .category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }
  .category-filter nav.categories .category.active {
    color: var(--color-warm-1);
    text-shadow: 0 0 4px black;
  }
  .category-filter nav.categories .category.active.disabled {
    color: var(--color-light-5);
  }
  .category-filter nav.visibilities {
    flex: 0 0 var(--input-height);
    gap: 1rem;
    justify-content: flex-end;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-cool-4);
    font-size: var(--font-size-14);
  }
  .category-filter nav.visibilities label {
    font-weight: bold;
  }
  .category-filter nav.visibilities a.button {
    height: var(--input-height);
    flex: none;
  }
  .category-filter nav.visibilities a.button.active {
    background: var(--button-hover-background-color);
    color: var(--button-hover-text-color);
    border-color: var(--button-hover-border-color);
  }
  .category-filter nav.visibilities .visibility-toggle {
    flex: none;
  }
  .category-filter nav.visibilities .visibility-toggle a {
    border-radius: 0;
  }
  .category-filter nav.visibilities .visibility-toggle a:first-child {
    border-right: none;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .category-filter nav.visibilities .visibility-toggle a:last-child {
    border-left: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .category-filter .bulk-actions {
    flex: 0 0 var(--input-height);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-cool-4);
    font-size: var(--font-size-14);
    justify-content: space-between;
  }
  .category-filter .bulk-actions .button {
    height: var(--input-height);
    flex: none;
  }
  .category-filter .bulk-actions label.checkbox {
    font-weight: bold;
    font-size: var(--font-size-14);
    gap: 1rem;
  }
  .category-filter .checkbox-row {
    gap: 1rem;
    border-bottom: 1px solid var(--color-cool-4);
    align-items: start;
  }
  .category-filter .checkbox-row > input[type=checkbox] {
    flex: none;
    position: relative;
    top: -5px;
  }
  .category-filter .checkbox-row > .entry {
    border: none;
    overflow: hidden;
  }
  .category-filter .entries {
    height: 100%;
    overflow: visible hidden;
    gap: 1rem;
  }
  .category-filter .entry-list {
    width: 100%;
    overflow: hidden auto;
    padding-right: 0.75rem;
    gap: 0.5rem;
    flex: 1;
  }
  .category-filter .entry-list.loading {
    justify-content: center;
  }
  .category-filter .entry-list .progress {
    width: 60%;
    margin: 0 auto;
    text-align: center;
  }
  .category-filter .entry-list .entry {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-cool-4);
    gap: 0.5rem;
  }
  .category-filter .entry-list .entry-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
  }
  .category-filter .entry-list .entry-title > h3 {
    flex: 1;
    margin: 0;
    font-size: var(--font-size-16);
    cursor: pointer;
  }
  .category-filter .entry-list .entry-title a.control {
    color: var(--color-light-5);
  }
  .category-filter .entry-list .entry-title button {
    font-size: var(--font-size-12);
  }
  .category-filter .entry-list .entry-title button > span {
    line-height: 1.5rem;
    font-weight: normal;
    font-family: var(--font-body);
  }
  .category-filter .entry-list .entry-title > * {
    line-height: 1.5rem;
    flex: none;
  }
  .category-filter .entry-list .entry-description {
    font-size: var(--font-size-12);
    margin: 0;
  }
  .category-filter .entry-list .entry-description br {
    display: none;
  }
  .category-filter .entry-list .entry-metadata {
    font-size: var(--font-size-12);
    gap: 0.25rem;
    justify-content: end;
  }
  .category-filter .entry-list .entry-metadata .tag {
    padding: 2px 0.5rem;
    opacity: 1;
  }
  .category-filter form.install label.hint,
  .category-filter form.install button[type="submit"] {
    flex: 0 0 160px;
  }
  /* ---------------------------------------- */
  /* Tours                                    */
  /* ---------------------------------------- */
  .tour-fadeout {
    box-shadow: rgba(33, 33, 33, 0.8) 0px 0px 1px 2px, rgba(33, 33, 33, 0.6) 0px 0px 0px 5000px;
    border-radius: 4px;
    transition: all 0.3s ease-out;
    z-index: calc(var(--z-index-tooltip) - 2);
    position: fixed;
  }
  .tour-overlay {
    position: fixed;
    inset: 0px;
    box-sizing: content-box;
    transition: all 0.3s ease-out;
    z-index: calc(var(--z-index-tooltip) - 1);
  }
  .tour-center-step {
    position: fixed;
    width: max-content;
    max-width: 400px;
    padding: 0.25rem 0.5rem;
    background: rgba(0, 0, 0, 0.95);
    border-radius: 3px;
    box-shadow: 0 0 4px #000;
    z-index: var(--z-index-tooltip);
  }
  .tour [data-action="exit"] {
    position: absolute;
    right: 0.5rem;
    top: 1rem;
  }
  .tour [data-action="exit"] > i {
    cursor: pointer;
  }
  .tour .step-title {
    text-align: center;
    margin-top: 0.5rem;
  }
  .tour .step-header:after {
    width: 100%;
    content: "";
    --webkit-mask-image: linear-gradient(90deg, transparent 0%, black 30%, black 70%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 30%, transparent 100%);
  }
  .tour .step-button > i {
    cursor: pointer;
  }
  .tour .content {
    text-align: center;
  }
  .tour .step-controls .step-button {
    flex: 0;
  }
  .tour .step-controls .step-button > i {
    cursor: pointer;
  }
  .tour .step-controls [data-action="previous"] {
    text-align: left;
  }
  .tour .step-controls .progress {
    text-align: center;
    flex: 1;
  }
  .tour .step-controls [data-action="next"] {
    text-align: right;
  }
  .application {
    position: absolute;
    z-index: var(--z-index-window);
    transform-origin: top left;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    min-width: 200px;
    max-height: 100%;
    max-width: 100%;
    overflow: hidden;
    background: var(--background);
    font-size: var(--font-size-14);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 0 0 10px #000;
  }
  .application:not(.minimized) {
    min-height: calc(var(--header-height) + 1rem);
  }
  .application .window-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 1rem;
    overflow: hidden;
  }
  .application.minimizing {
    transition: max-height 0.25s ease-out, max-width 0.25s ease-out;
  }
  .application.maximizing {
    transition: max-height 0.25s ease-in, max-width 0.25s ease-in;
  }
  .application.minimized .window-content,
  .application.minimizing .window-content,
  .application.maximizing .window-content {
    display: none;
  }
  .application .window-header {
    --button-size: 24px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    flex: 0 0 var(--header-height);
    position: relative;
    overflow: hidden;
    padding: 0 0.5rem;
    gap: 0.25rem;
    z-index: 1;
    cursor: grab;
    background: var(--color-header-background);
    font-size: var(--font-size-13);
    color: var(--color-light-1);
    border-bottom: 1px solid var(--color-border);
  }
  .application .window-header .window-icon {
    flex: none;
  }
  .application .window-header .window-title {
    flex: 1;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    text-shadow: none;
    margin: 0;
    line-height: var(--header-height);
    border: none;
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .application .window-header button.header-control {
    flex: 0 0 var(--button-size);
    height: var(--button-size);
    padding: 0;
    margin: 0;
    border: none;
  }
  .application .controls-dropdown {
    position: absolute;
    overflow: hidden auto;
    top: var(--header-height);
    right: 0;
    width: max-content;
    min-width: 100px;
    max-width: 300px;
    max-height: 0;
    z-index: 1;
    list-style: none;
    margin: 0 0.25rem;
    padding: 0;
    background: var(--background);
    border-radius: 0 0 4px 4px;
    transition: max-height 0.5s;
    pointer-events: none;
  }
  .application .controls-dropdown.expanded {
    max-height: calc(100% - var(--header-height));
    pointer-events: all;
    box-shadow: 0 0 8px var(--color-cool-3);
  }
  .application .controls-dropdown .header-control {
    margin: 0.25rem;
  }
  .application .controls-dropdown .header-control > button {
    --button-background-color: none;
    --button-text-color: var(--color-text-primary);
    width: 100%;
    display: flex;
    justify-content: space-between;
    border: none;
    font-size: var(--font-size-12);
  }
  .application .window-resize-handle {
    position: absolute;
    inset: auto -2px -3px auto;
    width: 11px;
    height: 11px;
    cursor: nwse-resize;
    background: transparent url("../ui/resize-handle.webp") no-repeat center / contain;
  }
  .application.minimized .window-resize-handle {
    display: none;
  }
  .theme-dark .application .window-content {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .theme-dark .application .window-resize-handle {
    filter: invert(1);
  }
  /**
 * Reduced Transparency Preferences
 */
  @media (prefers-reduced-transparency) {
    .theme-dark .application,
    .theme-foundry .application {
      --background: var(--color-cool-5);
    }
    .application .window-content {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .app {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    #tooltip,
    .locked-tooltip {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }
}
/* ---------------------------------------- */
/*  Page Layouts                            */
/* ---------------------------------------- */
@layer layouts.full {
  /* ---------------------------------------- */
  /*  Body Container                          */
  /* ---------------------------------------- */
  body {
    overflow: hidden auto;
    margin: 0;
    padding: 1rem;
    background: black;
    font-family: var(--font-body);
    font-size: var(--font-size-15);
    color: var(--color-light-3);
  }
  #main-background {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--background-url) no-repeat;
    background-size: cover;
    background-attachment: fixed;
    opacity: 0.5;
    z-index: var(--z-index-background);
  }
  /* ----------------------------------------- */
  /*  Scrollbar                                */
  /* ----------------------------------------- */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    border-radius: 3px;
  }
  ::-webkit-scrollbar-thumb {
    outline: 1px solid transparent;
    border-radius: 2px;
    background: var(--color-scrollbar);
    border: 1px solid var(--color-scrollbar-border);
  }
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--color-scrollbar) var(--color-scrollbar-track);
  }
}
@layer layouts.views {
  /* ---------------------------------------- */
  /*  Setup Authentication Views              */
  /* ---------------------------------------- */
  body.auth {
    gap: 1rem;
    justify-content: space-evenly;
    align-items: center;
  }
  body.auth #main-header {
    height: var(--header-size);
    flex: none;
    justify-content: center;
    background: var(--main-logo) 50% 50% no-repeat;
    background-size: var(--header-size) var(--header-size);
    width: 100%;
  }
  body.auth #main-header h1 {
    flex: none;
    margin: 0;
    font-size: var(--header-font-size);
    text-align: center;
    filter: drop-shadow(0 0 4px black);
  }
  body.auth .application.framed {
    position: relative;
    width: 100%;
    max-width: var(--max-width);
    padding: var(--form-padding);
  }
  body.auth .application.framed h2 {
    text-align: center;
    margin: 0;
  }
  body.auth #watermark {
    flex: none;
  }
  body.auth #watermark #software-version {
    flex: none;
    margin: 0;
    font-family: var(--font-h2);
    font-size: var(--font-size-24);
    font-weight: bold;
    color: var(--color-light-4);
    text-align: center;
    filter: drop-shadow(0 0 4px black);
  }
  /* ---------------------------------------- */
  /*  EULA Application                        */
  /* ---------------------------------------- */
  #eula {
    max-height: 90vh;
    z-index: calc(var(--z-index-notification) - 1);
  }
  #eula #eula-content h1,
  #eula #eula-content h2 {
    text-align: center;
  }
  #eula #eula-content .terms li {
    margin: 1rem 0;
  }
  #eula #eula-content .copyright {
    margin-top: 2rem;
    font-size: var(--font-size-14);
    color: var(--color-light-5);
  }
  #eula #eula-form {
    margin-top: 2rem;
  }
  #eula #eula-form h2 {
    margin: 0;
  }
  #eula #eula-form button#sign {
    flex: 2;
  }
  /* ---------------------------------------- */
  /*  Setup Layout                            */
  /* ---------------------------------------- */
  body.setup {
    --max-width: 1200px;
    --sidebarWidth: 480px;
    padding: 1rem 0;
    gap: 2rem;
  }
  #setup {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    padding: 0 2rem;
    overflow: hidden;
  }
  /* ---------------------------------------- */
  /*  Setup Menu                              */
  /* ---------------------------------------- */
  #setup-menu {
    --button-size: 40px;
    --pip-size: 16px;
    position: fixed;
    top: 2rem;
    right: 2rem;
    width: 320px;
  }
  #setup-menu #setup-menu-buttons {
    width: 100%;
    justify-content: flex-end;
    padding: 0.5rem;
    gap: 0.5rem;
  }
  #setup-menu button {
    position: relative;
    flex: 0 0 var(--button-size);
    height: var(--button-size);
    font-size: var(--font-size-20);
  }
  #setup-menu button .pip {
    position: absolute;
    top: -4px;
    right: -4px;
    width: var(--pip-size);
    height: var(--pip-size);
    font-size: var(--font-size-10);
    line-height: var(--pip-size);
    text-align: center;
    color: black;
    border: 1px solid black;
    border-radius: calc(var(--pip-size) / 2);
  }
  #setup-menu button .pip.warning {
    background: var(--color-warm-1);
  }
  #setup-menu button .pip.error {
    background: #ec0f0f;
  }
  /* ---------------------------------------- */
  /*  Setup Sidebar                           */
  /* ---------------------------------------- */
  #setup-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    flex: 0 0 var(--sidebarWidth);
    container: setup-sidebar / size;
  }
  #setup-sidebar #setup-sidebar-news,
  #setup-sidebar #setup-sidebar-featured {
    position: relative;
    padding: var(--form-padding);
    gap: 1rem;
    border-radius: 8px;
  }
  #setup-sidebar #setup-sidebar-news h2,
  #setup-sidebar #setup-sidebar-featured h2 {
    margin: 0;
  }
  #setup-sidebar #setup-sidebar-news {
    flex: 1;
  }
  #setup-sidebar #setup-sidebar-news .container {
    position: relative;
    flex: 1;
  }
  #setup-sidebar #setup-sidebar-news #news-articles {
    gap: 1rem;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  #setup-sidebar #setup-sidebar-featured {
    height: 320px;
    background-size: cover;
    justify-content: space-between;
  }
  #setup-sidebar .news {
    position: relative;
    flex: 1;
    min-height: 60px;
    justify-content: center;
    border: 1px solid var(--color-cool-4);
    border-radius: 4px;
    color: inherit;
    text-decoration: none;
  }
  #setup-sidebar .news > img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.75);
    transition: 0.5s;
  }
  #setup-sidebar .news > h3 {
    margin: 1rem;
    text-align: center;
    text-shadow: none;
    filter: drop-shadow(0 0 4px black);
  }
  #setup-sidebar .news .caption {
    background: var(--color-cool-5-75);
    backdrop-filter: blur(4px);
    margin: 1rem;
    padding: 1rem;
    border: 1px solid #000;
    border-radius: 3px;
    font-size: var(--font-size-12);
    color: var(--color-light-2);
    text-align: center;
  }
  #setup-sidebar .news:hover {
    border-color: var(--color-warm-1);
    box-shadow: 0 0 4px var(--color-warm-1);
  }
  #setup-sidebar .news:hover > img {
    filter: none;
  }
  @container setup-sidebar (max-height: 850px) {
    #setup-sidebar #setup-sidebar-featured {
      height: 200px;
    }
    #setup-sidebar #setup-sidebar-featured .news .caption {
      display: none;
    }
  }
  @container setup-sidebar (max-height: 580px) {
    #setup-sidebar #setup-sidebar-featured {
      height: 100px;
    }
    #setup-sidebar #setup-sidebar-featured > h2 {
      display: none;
    }
  }
  /* ---------------------------------------- */
  /*  Setup Packages                          */
  /* ---------------------------------------- */
  #setup-packages {
    flex: 1;
    padding: 0;
    gap: 0;
    /** No filter results found */
    /** Locked */
    /** Single Package */
    /** Gallery View */
    /** Tile View */
    /** Details View */
  }
  #setup-packages nav.tabs {
    padding: var(--form-padding);
    padding-bottom: 0;
  }
  #setup-packages nav.tabs .item {
    font-size: var(--font-size-24);
  }
  #setup-packages nav.tabs .item.disabled {
    color: var(--color-light-5);
  }
  #setup-packages section.tab {
    flex: 1;
    flex-direction: column;
    padding: var(--form-padding);
    gap: 1rem;
    overflow: hidden;
  }
  #setup-packages section.tab.active {
    display: flex;
  }
  #setup-packages header.controls {
    --control-height: 40px;
    --view-mode-height: 32px;
    gap: 1rem;
  }
  #setup-packages header.controls .filter {
    flex: 2 1 380px;
  }
  #setup-packages header.controls .filter input {
    height: var(--control-height);
  }
  #setup-packages header.controls button {
    height: var(--control-height);
    flex: 1 1 120px;
  }
  #setup-packages header.controls button#moduleCreate {
    flex: 0 0 var(--control-height);
  }
  #setup-packages header.controls .view-modes {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  #setup-packages header.controls .view-modes button {
    height: var(--view-mode-height);
    width: var(--view-mode-height);
    border: none;
  }
  #setup-packages .no-results {
    font-style: italic;
  }
  #setup-packages .no-results .button.search-packages {
    display: inline-block;
    line-height: 32px;
    margin-left: 1rem;
  }
  #setup-packages .locked {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  #setup-packages .locked h3 {
    width: 50%;
  }
  #setup-packages .locked i {
    font-size: var(--font-size-28);
  }
  #setup-packages .package {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    border: 1px solid var(--color-cool-4);
    border-radius: 3px;
    /** Package Tags */
  }
  #setup-packages .package .status-icons {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    display: flex;
    gap: 0.5rem;
    font-size: var(--font-size-14);
    color: var(--color-light-2);
    text-shadow: 0 0 4px black;
  }
  #setup-packages .package .package-title {
    width: 100%;
    margin: 1rem 0;
    padding: 1rem;
    font-size: var(--font-size-20);
    text-align: center;
  }
  #setup-packages .package img.thumbnail {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    object-fit: cover;
    filter: brightness(0.25);
    transition: 0.5s;
  }
  #setup-packages .package .tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap-reverse;
    gap: 0.25rem;
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
  }
  #setup-packages .package .tags.left {
    max-width: 50%;
  }
  #setup-packages .package .tags.right {
    max-width: 50%;
    left: auto;
    right: 0.5rem;
    justify-content: flex-end;
  }
  #setup-packages .package .tags .play {
    cursor: pointer;
  }
  #setup-packages .package:hover,
  #setup-packages .package.loading {
    border-color: var(--color-warm-1);
    box-shadow: 0 0 4px var(--color-warm-2);
  }
  #setup-packages .package:hover .package-title::after,
  #setup-packages .package.loading .package-title::after {
    border-color: var(--color-light-1);
  }
  #setup-packages .package:hover img.thumbnail,
  #setup-packages .package.loading img.thumbnail {
    filter: none;
  }
  #setup-packages .package:hover .tags .tag,
  #setup-packages .package.loading .tags .tag {
    opacity: 1;
  }
  #setup-packages .package-list.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: max-content;
    grid-gap: 1rem;
  }
  #setup-packages .package-list.gallery .package {
    height: 200px;
  }
  #setup-packages .package-list.gallery .package .package-title {
    background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.5) 25%, rgba(0, 0, 0, 0.5) 75%, transparent 100%);
  }
  #setup-packages .package-list.gallery .package .package-title::after {
    display: block;
    content: "";
    width: 80%;
    margin: 0.5rem auto 0;
    border-top: 2px solid var(--color-light-4);
    -webkit-mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
    mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
  }
  #setup-packages .package-list.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    grid-auto-rows: max-content;
    grid-gap: 1rem;
  }
  #setup-packages .package-list.tiles .package {
    height: 68px;
    background: var(--color-cool-5);
  }
  #setup-packages .package-list.tiles .package .package-title {
    margin: 0;
    padding: 0.5rem;
    text-align: left;
    font-size: var(--font-size-16);
  }
  #setup-packages .package-list.tiles .package .tags.left {
    max-width: 25%;
  }
  #setup-packages .package-list.tiles .package .tags.right {
    flex-wrap: nowrap;
    overflow: hidden;
    max-width: 75%;
  }
  #setup-packages .package-list.details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  #setup-packages .package-list.details .package {
    flex: 0 0 180px;
    height: 180px;
    display: flex;
    flex-direction: row;
    gap: 0;
  }
  #setup-packages .package-list.details .package .package-thumbnail {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 320px;
    height: 100%;
    border-right: 1px solid var(--color-cool-4);
  }
  #setup-packages .package-list.details .package .package-content {
    flex: 1;
    gap: 0.5rem;
    height: 100%;
    font-size: var(--font-size-14);
  }
  #setup-packages .package-list.details .package .package-description {
    width: 100%;
    flex: 1;
    padding: 0.5rem 1rem;
  }
  #setup-packages .package-list.details .package .package-footer {
    position: relative;
    flex: 0 0 30px;
  }
  #setup-packages .package-list {
    height: 100%;
    min-height: 400px;
    list-style: none;
    margin: 0;
    padding: 0.25rem 0 1rem;
  }
  #setup-packages .package-list.empty {
    display: none;
  }
  #setup-packages .package-list.gallery .play,
  #setup-packages .package-list.details .play {
    position: absolute;
    top: 100px;
    visibility: hidden;
    font-size: var(--font-size-48);
    color: var(--color-light-5);
    filter: drop-shadow(0 0 4px black);
    transition: 0.5s;
  }
  #setup-packages .package-list.gallery .play:hover,
  #setup-packages .package-list.details .play:hover {
    color: var(--color-light-1);
    text-shadow: 0 0 8px var(--color-warm-1);
  }
  #setup-packages .package-list.gallery .package:hover .play,
  #setup-packages .package-list.details .package:hover .play {
    visibility: visible;
  }
  #setup-packages .package-list.gallery .package.loading .play,
  #setup-packages .package-list.details .package.loading .play {
    visibility: visible;
    color: var(--color-light-1);
    text-shadow: 0 0 8px var(--color-warm-1);
  }
  #setup-packages #progress {
    --color-progress-background: #5D49FF;
    --color-progress-border: #B2C3FF;
    display: flex;
    flex-direction: column;
    margin: 1rem;
    gap: 1rem;
  }
  #setup-packages #progress:empty {
    display: none;
  }
  #setup-packages #progress .progress-bar {
    flex: 0 0 16px;
    width: 100%;
    background: black;
    border: 1px solid var(--color-cool-3);
    border-radius: 4px;
  }
  #setup-packages #progress .bar {
    position: relative;
    height: 10px;
    margin: 2px;
    display: block;
    background: var(--color-progress-background);
    border: 1px solid var(--color-progress-border);
    border-radius: 2px;
    max-width: calc(100% - 4px);
    transition: 0.25s;
    line-height: 10px;
    text-align: right;
  }
  #setup-packages #progress .pct {
    display: block;
    position: absolute;
    top: -3px;
    left: -3px;
    padding: 1px 5px;
    color: var(--color-light-1);
    text-shadow: 1px 1px 4px black;
    background: var(--color-cool-5-75);
    border: 1px solid black;
    border-radius: 2px;
    white-space: nowrap;
  }
  #setup-packages a.launch-tour {
    color: var(--color-warm-1);
    text-decoration: underline;
  }
  #setup-packages a.launch-tour:hover {
    cursor: pointer;
  }
  /** Tags */
  .tags .tag {
    flex: none;
    height: 24px;
    padding: 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--color-cool-4);
    border: 1px solid var(--color-cool-3);
    border-radius: 2px;
    font-size: var(--font-size-12);
    color: var(--color-light-2);
    opacity: 0.75;
  }
  .tags .tag.error {
    color: var(--color-light-2);
    background: var(--color-level-error-bg);
    border-color: var(--color-level-error-border);
  }
  .tags .tag.warning {
    color: var(--color-light-2);
    background: var(--color-level-warning-bg);
    border-color: var(--color-level-warning-border);
  }
  .tags .tag.success {
    color: var(--color-light-2);
    background: var(--color-level-success-bg);
    border-color: var(--color-level-success-border);
  }
  /* ---------------------------------------- */
  /*  Setup Package Warnings                  */
  /* ---------------------------------------- */
  #setup-warnings #setup-warnings-packages {
    gap: 2rem;
  }
  #setup-warnings #setup-warnings-packages section.flexcol {
    gap: 2rem;
  }
  #setup-warnings #setup-warnings-packages h2.divider {
    margin-bottom: 0;
  }
  #setup-warnings .package {
    gap: 1rem;
  }
  #setup-warnings .package header {
    justify-content: flex-end;
    gap: 1rem;
  }
  #setup-warnings .package header h4 {
    flex: 3;
    font-size: var(--font-size-20);
    margin: 0;
  }
  #setup-warnings .package header .reference {
    flex: 1;
  }
  #setup-warnings .package header button {
    flex: none;
    padding: 0.25rem 0.5rem;
  }
  #setup-warnings .package code {
    max-height: 250px;
    overflow: auto;
    white-space: pre;
    border: 2px solid;
  }
  #setup-warnings .package code.warnings {
    border-color: var(--color-level-warning);
  }
  #setup-warnings .package code.errors {
    border-color: var(--color-level-error);
  }
  #setup-warnings .package .control {
    flex: none;
  }
  /* ---------------------------------------- */
  /*  Application Configuration               */
  /* ---------------------------------------- */
  #setup-configuration .form-group.ssl {
    align-items: flex-start;
  }
  #setup-configuration .form-group.highlight label::after {
    font-family: var(--font-awesome);
    font-weight: 900;
    margin-left: 0.5rem;
    content: "\f071";
    color: var(--color-level-warning);
  }
  #setup-configuration .form-group.highlight p.hint {
    color: var(--color-level-warning);
  }
  /* ---------------------------------------- */
  /*  Miscellaneous                           */
  /* ---------------------------------------- */
  #confirm-code {
    margin: 1rem 0;
  }
  #confirm-code span {
    display: block;
    font-size: var(--font-size-24);
    text-align: center;
  }
  #delete-confirm {
    text-align: center;
  }
  .updated-packages {
    margin: 0;
  }
  .updated-packages .header > div {
    line-height: 1.5;
    font-weight: bold;
    border-bottom: 1px solid var(--color-cool-4);
    font-size: 1.1em;
  }
  .updated-packages :is(.header, .result) > div {
    padding: 0.5rem 1rem;
  }
  .updated-packages .package {
    flex: 0 0 200px;
  }
  .updated-packages .action {
    flex: 0 0 110px;
    font-weight: bold;
  }
  .updated-packages .description {
    overflow-wrap: anywhere;
  }
  .updated-packages .warning {
    color: yellow;
  }
  .updated-packages .warning > i::before {
    content: "\f071";
  }
  .updated-packages .error {
    color: red;
  }
  .updated-packages .error > i::before {
    content: "\f06a";
  }
  .updated-packages .success {
    color: limegreen;
  }
  .updated-packages .success > i::before {
    content: "\f05a";
  }
  .dependencies-info {
    align-items: unset;
  }
  .dependencies-info > .automatic {
    border-right: 2px var(--color-cool-4) solid;
    padding-right: 0.5rem;
  }
  .dependencies-info > .manual {
    padding-left: 0.5rem;
  }
  .dependencies-info .hint {
    line-height: 1rem;
    color: var(--color-light-5);
  }
  /* ---------------------------------------- */
  /*  Backups                                 */
  /* ---------------------------------------- */
  #backup-manager .categories footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
  }
  .backup-list form {
    gap: 1rem;
  }
  #create-backup {
    font-size: var(--font-size-14);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  #create-backup > input {
    top: -8px;
  }
  .snapshot-dialog .disk-space {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  /* ---------------------------------------- */
  /*  Compatibility Checker                   */
  /* ---------------------------------------- */
  #compatibility-checker aside {
    height: 100%;
    flex: 0 0 220px;
    padding-right: 1rem;
    border-right: 1px solid var(--color-cool-4);
  }
  #compatibility-checker aside nav.categories {
    height: unset;
    flex: unset;
    padding-right: unset;
    border-right: unset;
    flex: 1;
  }
  #compatibility-checker aside .summary {
    flex: none;
    list-style: none;
    padding-left: 0;
    font-size: var(--font-size-14);
  }
  #compatibility-checker aside .summary > li.understated {
    opacity: 0.75;
  }
  #compatibility-checker aside .summary > li > i {
    margin-right: 0.375rem;
  }
  #compatibility-checker aside .summary > li.success > i {
    color: var(--color-level-success);
  }
  #compatibility-checker aside .summary > li.warning > i {
    color: var(--color-level-warning);
  }
  #compatibility-checker aside .summary > li.error > i {
    color: var(--color-level-error);
  }
  #compatibility-checker aside .summary > li.neutral > i {
    color: var(--color-cool-3);
  }
  /* ---------------------------------------- */
  /*  Software Update View                    */
  /* ---------------------------------------- */
  body.update {
    --max-width: 960px;
  }
  body.update #update-progress {
    --color-progress-background: #5D49FF;
    --color-progress-border: #B2C3FF;
    display: none;
    flex: 0 0 16px;
    width: 100%;
    background: black;
    border: 1px solid var(--color-cool-3);
    border-radius: 4px;
  }
  body.update #update-progress .bar {
    position: relative;
    height: 10px;
    margin: 2px;
    display: block;
    background: var(--color-progress-background);
    border: 1px solid var(--color-progress-border);
    border-radius: 2px;
    max-width: calc(100% - 4px);
    transition: 0.25s;
    line-height: 10px;
    text-align: right;
  }
  body.update #update-progress .pct {
    display: block;
    position: absolute;
    top: -3px;
    right: -3px;
    padding: 1px 5px;
    color: var(--color-light-1);
    text-shadow: 1px 1px 4px black;
    background: var(--color-cool-5-75);
    border: 1px solid black;
    border-radius: 2px;
  }
  #update-notes {
    max-height: 80vh;
  }
  #update-notes article {
    padding-right: 0.75rem;
    margin-right: -0.75rem;
    overflow: hidden auto;
  }
  #update-notes footer {
    margin-top: 1rem;
    border-top: 1px solid var(--color-cool-4);
  }
  #update-notes footer .buttons {
    gap: 0.5rem;
  }
  #update-notes button {
    width: 100%;
    height: 2.5rem;
  }
  #module-create .tabs {
    margin: 0 -1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px ridge var(--color-cool-4);
  }
  /* ---------------------------------------- */
  /*  Join Game View                          */
  /* ---------------------------------------- */
  body.join {
    --max-width: 1040px;
  }
  body.join #main-background {
    background-position: center;
  }
  body.join #join-game {
    width: 100%;
    max-width: var(--max-width);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content min-content 1fr;
    gap: 1rem;
  }
  body.join #join-game-details .form-group > label {
    flex: 2;
  }
  body.join #join-game-details .form-fields > span {
    flex: none;
  }
  body.join #join-game-world {
    grid-row: 1 / span 3;
    grid-column: 2;
  }
  body.join #world-description {
    max-height: 500px;
  }
  body.join.join-theme-minimal {
    --max-width: 460px;
  }
  body.join.join-theme-minimal #main-header {
    background: none;
    flex: 1;
  }
  body.join.join-theme-minimal #join-game {
    flex: 2;
    display: flex;
    flex-direction: column;
  }
  body.join.join-theme-minimal #join-game h2 {
    display: none;
  }
  body.join.join-theme-minimal #join-game #join-game-setup p {
    display: none;
  }
  body.join.join-theme-minimal #watermark {
    display: none;
  }
  /* ---------------------------------------- */
  /*  User Management View                    */
  /* ---------------------------------------- */
  body.players {
    --max-width: 720px;
    /* ----------------------------------------- */
    /*  Permissions Config                       */
    /* ----------------------------------------- */
  }
  body.players #manage-players {
    width: 100%;
    max-width: var(--max-width);
  }
  body.players #manage-players header.player {
    margin-bottom: -0.5rem;
  }
  body.players #manage-players #player-list {
    display: flex;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    flex-direction: column;
    gap: 0.5rem;
    margin: -0.75rem;
    padding: 0.75rem;
  }
  body.players #manage-players #player-list li {
    margin: 0;
  }
  body.players #manage-players .show {
    flex: 0 0 32px;
    text-align: center;
  }
  body.players #manage-players .show > i {
    margin: 0;
  }
  body.players #manage-players .controls {
    flex: 0 0 24px;
    justify-content: flex-end;
    text-align: center;
  }
  body.players #permissions-config header {
    text-align: center;
    font-weight: bold;
  }
  body.players #permissions-config .index {
    flex: 0 0 200px;
    text-align: left;
  }
  body.players #permissions-config .permissions-list {
    padding: 0;
  }
  body.players #permissions-config .permission {
    border-bottom: 2px ridge var(--color-cool-3);
  }
  body.players #permissions-config .form-fields {
    justify-content: space-around;
  }
  body.players #permissions-config button {
    height: calc(1.25 * var(--input-height));
  }
  body.players #permissions-config header.table-header {
    background: var(--color-cool-4);
    padding: 0.5rem;
    color: var(--color-text-light-highlight);
    border: 1px solid var(--color-cool-4);
    text-align: center;
    font-weight: bold;
  }
  body.players #permissions-config ul.permissions-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 600px;
    overflow: hidden auto;
  }
  body.players #permissions-config li.permission {
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--color-border-dark-4);
  }
  body.players #permissions-config li.permission .form-fields {
    justify-content: space-around;
  }
  body.players #permissions-config .index {
    flex: 0 0 200px;
    text-align: left;
    font-weight: bold;
  }
}
@layer layouts.responsive {
  @media (max-width: 1440px) {
    body.setup {
      height: unset;
    }
    body.auth {
      min-height: 100vh;
    }
    #setup {
      display: unset;
      overflow: unset;
      margin: 2rem 0;
    }
    #setup-packages {
      max-width: unset;
    }
    #setup-sidebar {
      width: 100%;
      flex-direction: row;
      justify-content: center;
      margin: 1rem auto 0;
      container: unset;
    }
    #setup-sidebar #setup-sidebar-news,
    #setup-sidebar #setup-sidebar-featured {
      flex: 0 0 400px;
    }
    #setup-sidebar #news-articles {
      position: unset;
    }
    #setup-sidebar #news-articles .news {
      flex: 0 0 100px;
    }
  }
  @media (max-width: 960px) {
    #setup-packages .tabs h2.divider::before,
    #setup-packages .tabs h2.divider::after {
      content: unset;
    }
    #setup-sidebar {
      flex-direction: column;
    }
    .tour-center-step {
      top: 1rem;
    }
  }
  @media (max-height: 960px) {
    #main-header {
      --header-size: 80px;
    }
    .tour-center-step {
      top: 1rem;
    }
  }
  @media (max-width: 720px) {
    #setup-packages .tabs .tab-icon + .tab-title {
      display: none;
    }
  }
  @media (max-width: 480px) {
    :root {
      --font-size-10: 0.5rem;
      --font-size-11: 0.625rem;
      --font-size-12: 0.625rem;
      --font-size-13: 0.75rem;
      --font-size-14: 0.75rem;
      --font-size-15: 0.875rem;
      --font-size-16: 0.875rem;
      --font-size-18: 1rem;
      --font-size-20: 1.125rem;
      --font-size-24: 1.25rem;
      --font-size-28: 1.5rem;
      --font-size-32: 1.75rem;
      --font-size-36: 2rem;
      --font-size-48: 2.25rem;
      --font-size-64: 2.5rem;
      --font-size-80: 3rem;
    }
    /* ---------------------------------------- */
    /*  classes.less                            */
    /* ---------------------------------------- */
    #notifications {
      --position-top: 0.5rem;
    }
    /* ---------------------------------------- */
    /*  views/auth.less                         */
    /* ---------------------------------------- */
    body.auth {
      --header-size: 100px;
      --form-padding: 1rem;
    }
  }
}
/* ---------------------------------------- */
/*  Special Exceptions                      */
/* ---------------------------------------- */
@layer exceptions.prosemirror {
  .ProseMirror {
  position: relative;
}

.ProseMirror {
  word-wrap: break-word;
  white-space: pre-wrap;
  white-space: break-spaces;
  -webkit-font-variant-ligatures: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
}

.ProseMirror pre {
  white-space: pre-wrap;
}

.ProseMirror li {
  position: relative;
}

.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-hideselection *::-moz-selection { background: transparent; }
.ProseMirror-hideselection { caret-color: transparent; }

/* See https://github.com/ProseMirror/prosemirror/issues/1421#issuecomment-1759320191 */
.ProseMirror [draggable][contenteditable=false] { user-select: text }

.ProseMirror-selectednode {
  outline: 2px solid #8cf;
}

/* Make sure li selections wrap around markers */

li.ProseMirror-selectednode {
  outline: none;
}

li.ProseMirror-selectednode:after {
  content: "";
  position: absolute;
  left: -32px;
  right: -2px; top: -2px; bottom: -2px;
  border: 2px solid #8cf;
  pointer-events: none;
}

/* Protect against generic img rules */

img.ProseMirror-separator {
  display: inline !important;
  border: none !important;
  margin: 0 !important;
}

  .ProseMirror-gapcursor {
  display: none;
  pointer-events: none;
  position: absolute;
}

.ProseMirror-gapcursor:after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  width: 20px;
  border-top: 1px solid black;
  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
}

@keyframes ProseMirror-cursor-blink {
  to {
    visibility: hidden;
  }
}

.ProseMirror-focused .ProseMirror-gapcursor {
  display: block;
}

  .prosemirror {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    --color-control-bg: #d9d8c8;
    --color-hover-bg: #f0f0e0;
    --height-button: 28px;
  }
  .prosemirror menu {
    display: flex;
    flex-wrap: wrap;
    flex: none;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0.25rem;
    background: var(--color-cool-4);
    border-radius: 6px;
  }
  .prosemirror menu > li {
    margin: 0 2px;
  }
  .prosemirror menu .source-code {
    margin-right: 4px;
  }
  .prosemirror menu .concurrent-users {
    display: none;
    justify-content: center;
    align-items: center;
    padding: 0 6px;
    background: var(--color-control-bg);
    border: 1px solid var(--color-shadow-highlight);
    border-radius: 3px;
    box-shadow: 0 0 4px var(--color-shadow-highlight);
  }
  .prosemirror menu .concurrent-users i {
    margin-right: 6px;
  }
  .prosemirror menu button {
    background: transparent;
    cursor: pointer;
    padding: 0.5rem;
    border: none;
    border-radius: 4px;
  }
  .prosemirror menu button i {
    margin: 0;
  }
  .prosemirror menu button.source-code-action {
    background: var(--color-control-bg);
  }
  .prosemirror menu button:hover,
  .prosemirror menu button.active {
    box-shadow: none;
    background: var(--color-hover-bg);
    color: var(--color-cool-5);
  }
  .prosemirror menu .pm-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 4px;
    text-align: left;
  }
  .prosemirror menu .pm-dropdown > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 5em;
    font-size: var(--font-size-12);
    align-self: end;
  }
  .prosemirror menu .pm-dropdown .html {
    display: none;
  }
  .prosemirror menu .pm-dropdown i.fa-chevron-down {
    color: var(--color-text-light-7);
    font-size: var(--font-size-11);
    margin-left: 10px;
  }
  .prosemirror menu .pm-dropdown ul {
    display: none;
  }
  .prosemirror .editor-container {
    flex: 1;
    position: relative;
    border: 1px dashed var(--color-light-4);
    border-radius: 4px;
  }
  .prosemirror .editor-container .editor-content {
    outline: 0 solid transparent;
    height: unset;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 1rem 0.5rem 1rem 1rem;
    padding: 0 0.5rem 0 0;
    overflow: hidden scroll;
  }
  .collaborating menu .source-code-edit {
    display: none;
  }
  .collaborating menu .concurrent-users {
    display: flex;
  }
  .collaborating menu .concurrent-users .scene-player {
    width: 14px;
    height: 15px;
    border-radius: 50%;
    margin-right: -3px;
    line-height: var(--line-height-12);
    font-size: 0.625rem;
    text-align: center;
    color: black;
    font-weight: 700;
  }
  .collaborating menu .concurrent-users .scene-player:last-child {
    margin: 0;
  }
  /* ----------------------------------------- */
  /*  Source Code Editing                      */
  /* ----------------------------------------- */
  .prosemirror.editing-source menu .text {
    display: none;
  }
  .prosemirror.editing-source menu .html {
    display: initial;
  }
  .prosemirror.editing-source menu .right {
    margin-left: auto;
  }
  .prosemirror.editing-source menu .right ~ .right {
    margin-left: unset;
  }
  .prosemirror.editing-source .editor-container {
    display: none;
  }
  .prosemirror.editing-source textarea {
    flex: 1;
    border: 1px dashed var(--color-light-4);
    border-radius: 4px;
    white-space: pre-wrap;
    tab-size: 4;
    resize: none;
  }
  /* ----------------------------------------- */
  /*  Drop-downs                               */
  /* ----------------------------------------- */
  #prosemirror-dropdown {
    --color-control-bg: var(--color-cool-4);
    --color-hover-bg: #f0f0e0;
    position: fixed;
    z-index: var(--z-index-tooltip);
    color: var(--color-light-3);
  }
  #prosemirror-dropdown .html {
    display: none;
  }
  #prosemirror-dropdown ul {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 90px;
    padding: 6px;
    margin: 0;
    list-style: none;
    background: var(--color-control-bg);
    border-radius: 3px;
    border: 1px solid var(--color-cool-3);
    font-size: var(--font-size-12);
    line-height: var(--font-size-24);
    z-index: 1;
  }
  #prosemirror-dropdown > ul {
    display: block;
  }
  #prosemirror-dropdown li {
    padding: 1px 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 3px;
    position: relative;
    white-space: nowrap;
  }
  #prosemirror-dropdown li i {
    font-size: var(--font-size-14);
  }
  #prosemirror-dropdown li.divider {
    pointer-events: none;
    margin-bottom: 4px;
    border-bottom: 1px solid #999;
  }
  #prosemirror-dropdown li.level1 {
    font-size: 2em;
  }
  #prosemirror-dropdown li.level2 {
    font-size: 1.5em;
  }
  #prosemirror-dropdown li.level3 {
    font-size: 1.25em;
  }
  #prosemirror-dropdown li.level5 {
    font-size: 0.83em;
    font-weight: bold;
  }
  #prosemirror-dropdown li.level6 {
    font-size: 0.67em;
    font-weight: bold;
  }
  #prosemirror-dropdown li:hover {
    background: var(--color-hover-bg);
  }
  #prosemirror-dropdown li:hover ul {
    display: block;
  }
  #prosemirror-dropdown li:hover > :is(span, i) {
    color: black;
  }
  /* ----------------------------------------- */
  /*  Insertion Dialogs                        */
  /* ----------------------------------------- */
  .prosemirror.menu-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
  }
  .prosemirror.menu-dialog form {
    width: 400px;
    position: fixed;
    background: var(--color-control-bg);
    border-radius: 4px;
    padding: 8px;
    box-shadow: 0 0 8px 0 var(--color-shadow-dark);
  }
}