/* ---------------------------------------- */
/* 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 */ compatibility, /* 6. V1 compatibility layer */ layouts, /* 7. Page layouts */ system, /* 8. Default game system styles */ modules, /* 9. Default module styles */ exceptions;
/* 10. Special exceptions */
/* ---------------------------------------- */
/*  Browser Reset                           */
/* ---------------------------------------- */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  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.base {
  /* ----------------------------------------- */
  /*  Root                                     */
  /* ----------------------------------------- */
  body.game .app {
    --color-text-light-highlight: #f0f0e0;
    --color-text-light-heading: #c9c7b8;
    --color-text-light-primary: #b5b3a4;
    --color-text-dark-primary: #191813;
    --color-text-dark-secondary: #4b4a44;
    --color-text-dark-header: #23221d;
    --color-text-dark-inactive: #7a7971;
    --color-text-hyperlink: #ff6400;
    --color-text-selection: #f7f3e8;
    --color-text-selection-bg: #777;
    --color-text-primary: var(--color-text-dark-primary);
    --color-text-emphatic: var(--color-text-dark-primary);
    --color-text-light-0: #fff;
    --color-text-light-1: #eee;
    --color-text-light-2: #ddd;
    --color-text-light-3: #ccc;
    --color-text-light-4: #bbb;
    --color-text-light-5: #aaa;
    --color-text-light-6: #999;
    --color-text-light-7: #888;
    --color-text-dark-1: #111;
    --color-text-dark-2: #222;
    --color-text-dark-3: #444;
    --color-text-dark-4: #555;
    --color-text-dark-5: #666;
    --color-text-dark-6: #777;
    --color-border-light-1: #ddd;
    --color-border-light-2: #999;
    --color-border-dark-1: #111;
    --color-border-dark-2: #222;
    --color-border-dark-3: #333;
    --color-border-dark-4: #444;
    --color-border-dark-5: #666;
    --color-shadow-primary: #ff0000;
    --color-shadow-highlight: #ff6400;
    --color-shadow-dark: #000;
    --color-underline-inactive: #7a7971;
    --color-underline-active: #44191A;
    --color-underline-header: #782e22;
    --color-border-light-highlight: #f0f0e0;
    --color-border-light-primary: #b5b3a4;
    --color-border-light-secondary: #c9c7b8;
    --color-border-light-tertiary: #7a7971;
    --color-border-dark: #000;
    --color-border-dark-primary: #191813;
    --color-border-dark-secondary: #23221d;
    --color-border-dark-tertiary: #4b4a44;
    --color-border-highlight: #ff6400;
    --color-border-highlight-alt: #ff0000;
    --color-bg-btn-minor-inactive: #c9c7b8;
    --color-bg-btn-minor-active: #b5b3a4;
    --color-select-option-bg: #dad8cc;
    --color-checkbox-checked: #666;
    --color-ownership-none: #5500ff;
    --color-ownership-observer: #7a7971;
    --color-ownership-owner: #b5b3a4;
    --sidebar-width: 300px;
    --sidebar-header-height: 32px;
    --sidebar-item-height: 48px;
    --hotbar-width: 578px;
    --macro-size: 50px;
    --color-blind-bg: #f5eaf5;
    --color-blind-border: #6b476b;
    --color-emote-bg: #f3edde;
    --color-emote-border: #887c5d;
    --color-whisper-bg: #e8e8ef;
    --color-whisper-border: #545469;
    --color-scrollbar: #782e22;
    --color-scrollbar-track: transparent;
    --form-field-height: 26px;
    --font-primary: "Signika", sans-serif;
    --line-height-12: 0.75rem;
    --line-height-16: 1rem;
    --line-height-20: 1.25rem;
    --line-height-30: 1.875rem;
    --background-parchment: url(../ui/parchment.jpg) repeat;
  }
  /* ---------------------------------------- */
  /*  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-scheme: dark;
    --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: #333;
    --color-dark-4: #444;
    --color-dark-5: #555;
    --color-dark-6: #666;
    --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-text-emphatic: var(--color-dark-1);
    --color-text-primary: var(--color-dark-2);
    --color-text-secondary: var(--color-dark-3);
    --color-text-subtle: var(--color-dark-4);
    --color-text-accent: var(--color-warm-1);
    --color-text-selection: var(--color-light-1);
    --color-text-selection-bg: var(--color-dark-6);
    --color-shadow-dark: var(--color-dark-1);
    --color-shadow-primary: var(--color-warm-2);
    --color-shadow-highlight: var(--color-warm-1);
  }
  /* ---------------------------------------- */
  /*  Typography                              */
  /* ---------------------------------------- */
  body {
    --font-sans: "Signika", "Palatino Linotype", sans-serif;
    --font-serif: "Amiri", serif;
    --font-body: var(--font-sans);
    --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-40: 2.5rem;
    --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: var(--font-h1);
    --font-h5: var(--font-h2);
    --font-h6: var(--font-h3);
    --font-h1-size: var(--font-size-48);
    --font-h2-size: var(--font-size-32);
    --font-h3-size: var(--font-size-28);
    --font-h4-size: var(--font-size-24);
    --font-h5-size: var(--font-size-20);
    --font-h6-size: var(--font-size-16);
  }
  section.secret {
    --color-secret-bg: rgba(53, 0, 121, 0.05);
    --color-revealed-bg: rgba(0, 53, 0, 0.05);
    --color-secret-border: var(--color-dark-6);
  }
  code,
  code.block {
    --color-code-bg: var(--color-cool-4);
    --color-code-border: var(--color-cool-3);
  }
  /* ---------------------------------------- */
  /*  Layout                                  */
  /* ---------------------------------------- */
  body {
    --input-height: 2rem;
    --hotbar-height: 52px;
    --sidebar-width: 300px;
    --chat-input-height: 100px;
    --ui-scale: 1;
    --ui-fade-opacity: 0.4;
    --ui-fade-duration: 0.5s;
    --ui-fade-delay: 0.5s;
    --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-header-background: rgba(0, 0, 0, 0.5);
    --color-border: var(--color-cool-4);
    --color-tabs-border: var(--color-light-5);
    --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;
  }
  /* ----------------------------------------- */
  /*  Content Links and Inline Rolls           */
  /* ----------------------------------------- */
  body {
    --content-link-background: rgba(0, 0, 0, 0.1);
    --content-link-border-color: var(--color-light-6);
    --content-link-icon-color: var(--color-light-3);
    --content-link-text-color: var(--color-light-2);
  }
  /* ---------------------------------------- */
  /*  Forms and Form Elements                 */
  /* ---------------------------------------- */
  input,
  select,
  textarea,
  code-mirror {
    --input-background-color: var(--color-cool-4);
    --input-border-color: transparent;
    --input-box-shadow: none;
    --input-focus-outline-color: var(--color-cool-3);
  }
  input:disabled,
  select:disabled,
  textarea:disabled,
  code-mirror:disabled {
    --input-background-color: var(--color-cool-5);
    --input-border-color: var(--color-cool-4);
    --input-text-color: var(--color-light-4);
  }
  input,
  select,
  textarea {
    --input-text-color: var(--color-light-3);
    --input-placeholder-color: var(--color-light-5);
  }
  input:focus,
  select:focus,
  textarea:focus {
    --input-text-color: var(--color-light-1);
  }
  .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-3);
    --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-track-border-color: var(--input-border-color);
    --range-thumb-background-color: rgba(11, 10, 19, 0.9);
    --range-thumb-border-color: var(--color-warm-1);
  }
  a.button,
  button,
  kbd {
    --button-size: 2em;
    --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],
  kbd[disabled] {
    --button-background-color: var(--color-cool-5);
    --button-border-color: transparent;
    --button-text-color: var(--color-light-5);
    --button-hover-background-color: var(--button-background-color);
    --button-hover-border-color: var(--button-border-color);
    --button-hover-text-color: var(--button-text-color);
  }
  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);
  }
  .prosemirror,
  #prosemirror-dropdown,
  prose-mirror {
    --menu-background: var(--color-cool-4);
    --dropdown-background: var(--color-cool-4);
    --dropdown-border: var(--color-cool-3);
    --dialog-background: var(--color-cool-5);
    --dialog-border: var(--color-cool-4);
    --color-control-hover: rgba(0, 0, 0, 0.25);
    --color-form-label-hover: var(--color-light-2);
    --button-text-color: var(--color-light-3);
    --menu-height: 26px;
    --min-height: 150px;
  }
  /* ---------------------------------------- */
  /*  Chat Cards                              */
  /* ---------------------------------------- */
  .chat-message {
    --color-blind-background: #f5eaf5;
    --color-blind-border: #6b476b;
    --color-emote-background: #f3edde;
    --color-emote-border: #887c5d;
    --color-whisper-background: #e8e8ef;
    --color-whisper-border: #545469;
    --chat-message-background: url(../ui/parchment.jpg) repeat;
    --chat-message-border-color: #6f6c66;
  }
  /* ---------------------------------------- */
  /*  Setup Views Specifically                */
  /* ---------------------------------------- */
  body.auth {
    --header-size: 160px;
    --header-font-size: var(--font-size-80);
    --form-padding: 1.5rem;
    --max-width: 600px;
  }
  /* ---------------------------------------- */
  /*  Tables                                  */
  /* ---------------------------------------- */
  body {
    --table-background-color: var(--color-cool-5-50);
    --table-header-bg-color: var(--color-cool-4);
    --table-header-border-color: var(--color-cool-4);
    --table-header-text-color: inherit;
    --table-row-color-even: rgba(255, 255, 255, 0.1);
    --table-row-color-odd: transparent;
    --table-row-color-highlight: var(--color-cool-3);
  }
  /* ---------------------------------------- */
  /*  UI                                      */
  /* ---------------------------------------- */
  #context-menu {
    --background-color: var(--color-cool-5);
    --border-color: var(--color-cool-3);
    --text-color: var(--color-text-secondary);
    --hover-text-color: var(--color-text-emphatic);
    --group-separator: var(--color-cool-4);
    --hover-entry-border: var(--color-cool-4);
    --hover-entry-background: var(--color-dark-1);
  }
  .ui-control,
  .placeable-hud,
  #measurement .waypoint-label {
    --control-size: 32px;
    --control-bg-color: var(--color-cool-5-75);
    --control-border-color: var(--color-cool-4);
    --control-icon-color: var(--color-light-2);
    --control-hover-bg-color: var(--color-cool-5);
    --control-hover-border-color: var(--color-cool-3);
    --control-hover-icon-color: var(--color-light-1);
    --control-active-bg-color: var(--color-cool-5);
    --control-active-border-color: var(--color-warm-2);
    --control-active-icon-color: var(--color-light-1);
    --control-button-border-color: var(--color-warm-1);
    --control-button-hover-bg-color: var(--color-warm-2);
    --control-button-hover-border-color: var(--color-light-1);
    --toggle-bg-color: rgba(34, 34, 72, 0.75);
    --toggle-border-color: #5252d7;
    --toggle-active-bg-color: #5252d7;
    --toggle-active-border-color: #8484ff;
  }
  .ui-control:disabled,
  .placeable-hud:disabled,
  #measurement .waypoint-label:disabled {
    --control-hover-bg-color: var(--control-bg-color);
    --control-hover-border-color: var(--control-border-color);
    --control-hover-icon-color: var(--control-icon-color);
  }
  .placeable-hud {
    --control-icon-color: rgba(255 255 255 / 70%);
    --control-active-icon-color: rgba(255 255 255 / 70%);
    --control-hover-icon-color: #FFF;
    --control-active-icon-color: #FFF;
    --control-icon-filter: none;
  }
  #players {
    --background-color: var(--color-cool-5-75);
    --border-color: var(--color-cool-4);
    --text-color: var(--color-text-secondary);
    --player-name-color: var(--color-text-primary);
    --player-name-idle-color: #baaddc;
    --player-name-self-color: #c0eddb;
    --color-rating-good: #58e558;
    --color-rating-fair: #e3e365;
    --color-rating-poor: #e85555;
  }
  #players button {
    --button-text-color: var(--color-text-emphatic);
    --button-hover-text-color: var(--button-text-color);
  }
  /* ---------------------------------------- */
  /*  CodeMirror                              */
  /* ---------------------------------------- */
  code-mirror {
    --active-line-color: #2f393c44;
    --gutter-background-color: var(--color-dark-2);
    --gutter-border-color: var(--color-dark-3);
    --gutter-text-color: var(--color-light-2);
    --tooltip-background-color: var(--color-light-1);
    --tooltip-text-color: var(--color-dark-2);
    --syntax-keyword-color: #c678dd;
    --syntax-comment-color: var(--color-light-4);
    --syntax-operator-color: #56b6c2;
    --syntax-separator-color: var(--syntax-operator-color);
    --syntax-brace-color: var(--input-text-color);
    --syntax-parenthesis-color: var(--syntax-brace-color);
    --syntax-square-bracket-color: var(--input-brace-color);
    --syntax-var-name-color: #e06c75;
    --syntax-func-name-color: #61afef;
    --syntax-method-name-color: var(--syntax-func-name-color);
    --syntax-local-var-color: #fff;
    --syntax-class-name-color: #e5c07b;
    --syntax-prop-def-color: #e06c75;
    --syntax-prop-name-color: var(--input-text-color);
    --syntax-boolean-color: #d19a66;
    --syntax-number-color: #e5c07b;
    --syntax-string-color: #98c379;
    --syntax-regexp-color: #56b6c2;
    --syntax-angle-bracket-color: var(--input-text-color);
    --syntax-tag-color: var(--syntax-class-name-color);
    --syntax-attr-name-color: var(--syntax-prop-def-color);
    --syntax-attr-value-color: var(--syntax-string-color);
    --syntax-meta-color: var(--syntax-tag-color);
    --syntax-separator-color: var(--syntax-meta-color);
    --syntax-link-color: var(--input-text-color);
    --syntax-link-url-color: var(--syntax-string-color);
    --syntax-blockquote-color: var(--syntax-string-color);
    --syntax-code-bg-color: var(--syntax-code-bg-color);
  }
  code-mirror:disabled {
    --gutter-background-color: var(--input-background-color);
    --gutter-border-color: var(--input-text-color);
    --gutter-text-color: var(--color-light-4);
  }
}
@layer variables.themes {
  /* ---------------------------------------- */
  /*  Theme Variables                         */
  /* ---------------------------------------- */
  .mixin-theme-dark-variables {
    --color-scheme: dark;
    --color-text-emphatic: var(--color-light-1);
    --color-text-primary: var(--color-light-2);
    --color-text-secondary: var(--color-light-3);
    --color-text-subtle: var(--color-light-5);
    --color-text-selection: var(--color-light-1);
    --color-text-selection-bg: var(--color-cool-3);
    /* Applications */
    /* Forms */
    --table-background-color: var(--color-cool-5-50);
    --table-header-bg-color: var(--color-cool-4);
    --table-header-border-color: var(--color-cool-4);
    --table-header-text-color: inherit;
    --table-row-color-even: rgba(255, 255, 255, 0.1);
    --table-row-color-odd: transparent;
    --table-row-color-highlight: var(--color-cool-3);
    /* Context Menu */
    --content-link-background: var(--color-cool-5-90);
    --content-link-border-color: var(--color-light-6);
    --content-link-icon-color: var(--color-light-4);
    --content-link-text-color: var(--color-light-2);
    /* UI */
    --sidebar-background: var(--color-cool-5-90);
    --sidebar-separator: 1px solid var(--color-cool-4);
    --sidebar-entry-hover-bg: rgba(255, 255, 255, 0.1);
    --sidebar-folder-color: var(--color-dark-1);
    /* AV */
  }
  .mixin-theme-dark-variables .application,
  .mixin-theme-dark-variables.application {
    --background: var(--color-cool-5-90);
    --color-header-background: rgba(0, 0, 0, 0.5);
    --color-border: var(--color-cool-4);
    --color-tabs-border: var(--color-light-5);
    --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;
  }
  .mixin-theme-dark-variables .application .window-content,
  .mixin-theme-dark-variables.application .window-content {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .mixin-theme-dark-variables .application .window-resize-handle,
  .mixin-theme-dark-variables.application .window-resize-handle {
    filter: invert(1);
  }
  @media (prefers-reduced-transparency) {
    .mixin-theme-dark-variables .application,
    .mixin-theme-dark-variables.application {
      --background: var(--color-cool-5);
    }
  }
  .mixin-theme-dark-variables input,
  .mixin-theme-dark-variables select,
  .mixin-theme-dark-variables textarea,
  .mixin-theme-dark-variables code-mirror {
    --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);
  }
  .mixin-theme-dark-variables input:disabled,
  .mixin-theme-dark-variables select:disabled,
  .mixin-theme-dark-variables textarea:disabled,
  .mixin-theme-dark-variables code-mirror:disabled {
    --input-background-color: var(--color-cool-5);
    --input-border-color: var(--color-cool-4);
    --input-text-color: var(--color-light-4);
  }
  .mixin-theme-dark-variables input,
  .mixin-theme-dark-variables select,
  .mixin-theme-dark-variables textarea {
    --input-placeholder-color: var(--color-light-5);
  }
  .mixin-theme-dark-variables input:focus,
  .mixin-theme-dark-variables select:focus,
  .mixin-theme-dark-variables textarea:focus {
    --input-text-color: var(--color-light-1);
  }
  .mixin-theme-dark-variables code-mirror {
    --input-focus-text-color: var(--color-light-2);
    --gutter-background-color: var(--color-dark-2);
    --gutter-border-color: var(--color-dark-3);
    --gutter-text-color: var(--color-light-4);
    --active-line-color: #2f393c44;
    --input-background-color: var(--color-cool-4);
    --input-border-color: transparent;
    --tooltip-background-color: var(--color-light-1);
    --tooltip-text-color: var(--color-dark-2);
    --syntax-keyword-color: #c678dd;
    --syntax-comment-color: #7d8799;
    --syntax-operator-color: #56b6c2;
    --syntax-separator-color: var(--syntax-operator-color);
    --syntax-var-name-color: #e06c75;
    --syntax-func-name-color: #61afef;
    --syntax-local-var-color: #fff;
    --syntax-class-name-color: #e5c07b;
    --syntax-prop-def-color: #e06c75;
    --syntax-prop-name-color: var(--input-text-color);
    --syntax-boolean-color: #d19a66;
    --syntax-number-color: #e5c07b;
    --syntax-string-color: #98c379;
    --syntax-regexp-color: #56b6c2;
    --syntax-angle-bracket-color: var(--syntax-separator-color);
    --syntax-tag-color: var(--syntax-class-name-color);
    --syntax-code-bg-color: var(--color-cool-5-25);
  }
  .mixin-theme-dark-variables code-mirror:disabled {
    --gutter-background-color: var(--color-dark-1);
    --gutter-border-color: var(--input-border-color);
    --gutter-text-color: var(--color-light-4);
  }
  .mixin-theme-dark-variables code,
  .mixin-theme-dark-variables code.block {
    --color-code-bg: var(--color-cool-4);
    --color-code-border: var(--color-cool-3);
  }
  .mixin-theme-dark-variables input[type=checkbox],
  .mixin-theme-dark-variables input[type=radio] {
    --checkbox-checked-color: var(--color-warm-1);
    --checkbox-disabled-color: var(--color-cool-3);
    --checkbox-background-color: var(--color-cool-4);
    --checkbox-checkmark-color: transparent;
    --checkbox-font-weight: bold;
  }
  .mixin-theme-dark-variables 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);
  }
  .mixin-theme-dark-variables label.icon:focus-within {
    --input-text-color: var(--color-light-1);
  }
  .mixin-theme-dark-variables 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);
  }
  .mixin-theme-dark-variables input[readonly] {
    --input-background-color: var(--color-cool-5);
    --input-border-color: var(--color-cool-4);
    --input-text-color: var(--color-light-4);
  }
  .mixin-theme-dark-variables a.button,
  .mixin-theme-dark-variables button,
  .mixin-theme-dark-variables kbd {
    --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);
  }
  .mixin-theme-dark-variables a.button[disabled],
  .mixin-theme-dark-variables button[disabled],
  .mixin-theme-dark-variables kbd[disabled] {
    --button-background-color: var(--color-cool-5);
    --button-border-color: transparent;
    --button-text-color: var(--color-light-5);
    --button-hover-background-color: var(--button-background-color);
    --button-hover-border-color: var(--button-border-color);
    --button-hover-text-color: var(--button-text-color);
  }
  .mixin-theme-dark-variables a.button.bright,
  .mixin-theme-dark-variables 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;
  }
  .mixin-theme-dark-variables a.button.bright:disabled,
  .mixin-theme-dark-variables button.bright:disabled {
    --button-background-color: var(--color-cool-4);
    --button-text-color: var(--color-text-subtle);
    --button-hover-background-color: var(--button-background-color);
    --button-hover-border-color: var(--button-border-color);
    --button-hover-text-color: var(--button-text-color);
  }
  .mixin-theme-dark-variables .prosemirror,
  .mixin-theme-dark-variables prose-mirror,
  .mixin-theme-dark-variables #prosemirror-dropdown,
  .mixin-theme-dark-variables .menu-dialog.prosemirror,
  .mixin-theme-dark-variables#prosemirror-dropdown,
  .mixin-theme-dark-variables.menu-dialog.prosemirror {
    --menu-background: var(--color-cool-4);
    --dropdown-background: var(--color-cool-4);
    --dropdown-border: var(--color-cool-3);
    --dialog-background: var(--color-cool-5);
    --dialog-border: var(--color-cool-4);
    --color-control-hover: rgba(0, 0, 0, 0.25);
    --color-form-label-hover: var(--color-light-2);
    --button-text-color: var(--color-light-3);
  }
  .mixin-theme-dark-variables #context-menu,
  .mixin-theme-dark-variables#context-menu {
    --background-color: var(--color-cool-5);
    --border-color: var(--color-cool-3);
    --text-color: var(--color-text-secondary);
    --hover-text-color: var(--color-text-emphatic);
    --group-separator: var(--color-cool-4);
    --hover-entry-border: var(--color-cool-4);
    --hover-entry-background: var(--color-dark-1);
  }
  .mixin-theme-dark-variables.compendium-directory,
  .mixin-theme-dark-variables .compendium-directory {
    --header-mask: linear-gradient(black, transparent);
    --header-border: none;
  }
  .mixin-theme-dark-variables .ui-control,
  .mixin-theme-dark-variables .placeable-hud,
  .mixin-theme-dark-variables #measurement .waypoint-label {
    --control-bg-color: var(--color-cool-5-75);
    --control-border-color: var(--color-cool-4);
    --control-icon-color: var(--color-light-2);
    --control-hover-bg-color: var(--color-cool-5);
    --control-hover-border-color: var(--color-cool-3);
    --control-hover-icon-color: var(--color-light-1);
    --control-active-bg-color: var(--color-cool-5);
    --control-active-border-color: var(--color-warm-2);
    --control-active-icon-color: var(--color-light-1);
    --control-button-border-color: var(--color-warm-1);
    --control-button-hover-bg-color: var(--color-warm-2);
    --control-button-hover-border-color: var(--color-light-1);
    --toggle-bg-color: rgba(34, 34, 72, 0.75);
    --toggle-border-color: #5252d7;
    --toggle-active-bg-color: #5252d7;
    --toggle-active-border-color: #8484ff;
  }
  .mixin-theme-dark-variables .ui-control:disabled,
  .mixin-theme-dark-variables .placeable-hud:disabled,
  .mixin-theme-dark-variables #measurement .waypoint-label:disabled {
    --control-hover-bg-color: var(--control-bg-color);
    --control-hover-border-color: var(--control-border-color);
    --control-hover-icon-color: var(--control-icon-color);
  }
  .mixin-theme-dark-variables .placeable-hud,
  .mixin-theme-dark-variables #measurement .waypoint-label {
    --control-icon-color: rgba(255 255 255 / 70%);
    --control-active-icon-color: rgba(255 255 255 / 70%);
    --control-hover-icon-color: #FFF;
    --control-active-icon-color: #FFF;
    --control-icon-filter: none;
  }
  .mixin-theme-dark-variables #hotbar {
    --slot-color: var(--color-cool-5-90);
    --key-bg-color-empty: var(--color-cool-5);
    --key-bg-color-full: var(--color-cool-5);
    --key-text-color: var(--color-light-1);
    --page-control-color: var(--color-cool-5);
  }
  .mixin-theme-dark-variables #chat-message {
    --text-color: var(--color-light-2);
    --placeholder-color: var(--color-light-5);
    --background-color: var(--color-cool-5);
    --border-color: var(--color-cool-4);
  }
  .mixin-theme-dark-variables #players {
    --background-color: var(--color-cool-5-75);
    --border-color: var(--color-cool-4);
    --player-name-idle-color: #baaddc;
    --player-name-self-color: #c0eddb;
    --color-rating-good: #58e558;
    --color-rating-fair: #e3e365;
    --color-rating-poor: #e85555;
  }
  .mixin-theme-dark-variables #players button {
    --button-text-color: var(--color-text-emphatic);
    --button-hover-text-color: var(--button-text-color);
  }
  .mixin-theme-dark-variables .combat-tracker {
    --active-input-bg-color: var(--color-cool-5);
    --entry-hover-bg: rgba(255, 255, 255, 0.1);
    --entry-active-bg: rgba(255, 255, 255, 0.15);
    --token-effect-filter: none;
  }
  .mixin-theme-dark-variables #token-hud,
  .mixin-theme-dark-variables #measurement {
    --hud-icon-filter: none;
  }
  .mixin-theme-dark-variables #camera-views,
  .mixin-theme-dark-variables#camera-views {
    --av-background-color: var(--color-cool-5-90);
    --av-border-color: var(--color-cool-4);
  }
  /* ---------------------------------------- */
  /*  Theme Layers                            */
  /* ---------------------------------------- */
  @layer general {
    body.theme-dark {
      --color-scheme: dark;
      --color-text-emphatic: var(--color-light-1);
      --color-text-primary: var(--color-light-2);
      --color-text-secondary: var(--color-light-3);
      --color-text-subtle: var(--color-light-5);
      --color-text-selection: var(--color-light-1);
      --color-text-selection-bg: var(--color-cool-3);
      /* Applications */
      /* Forms */
      --table-background-color: var(--color-cool-5-50);
      --table-header-bg-color: var(--color-cool-4);
      --table-header-border-color: var(--color-cool-4);
      --table-header-text-color: inherit;
      --table-row-color-even: rgba(255, 255, 255, 0.1);
      --table-row-color-odd: transparent;
      --table-row-color-highlight: var(--color-cool-3);
      /* Context Menu */
      --content-link-background: var(--color-cool-5-90);
      --content-link-border-color: var(--color-light-6);
      --content-link-icon-color: var(--color-light-4);
      --content-link-text-color: var(--color-light-2);
      /* UI */
      --sidebar-background: var(--color-cool-5-90);
      --sidebar-separator: 1px solid var(--color-cool-4);
      --sidebar-entry-hover-bg: rgba(255, 255, 255, 0.1);
      --sidebar-folder-color: var(--color-dark-1);
      /* AV */
    }
    body.theme-dark .application,
    body.theme-dark.application {
      --background: var(--color-cool-5-90);
      --color-header-background: rgba(0, 0, 0, 0.5);
      --color-border: var(--color-cool-4);
      --color-tabs-border: var(--color-light-5);
      --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;
    }
    body.theme-dark .application .window-content,
    body.theme-dark.application .window-content {
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
    body.theme-dark .application .window-resize-handle,
    body.theme-dark.application .window-resize-handle {
      filter: invert(1);
    }
    @media (prefers-reduced-transparency) {
      body.theme-dark .application,
      body.theme-dark.application {
        --background: var(--color-cool-5);
      }
    }
    body.theme-dark input,
    body.theme-dark select,
    body.theme-dark textarea,
    body.theme-dark code-mirror {
      --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);
    }
    body.theme-dark input:disabled,
    body.theme-dark select:disabled,
    body.theme-dark textarea:disabled,
    body.theme-dark code-mirror:disabled {
      --input-background-color: var(--color-cool-5);
      --input-border-color: var(--color-cool-4);
      --input-text-color: var(--color-light-4);
    }
    body.theme-dark input,
    body.theme-dark select,
    body.theme-dark textarea {
      --input-placeholder-color: var(--color-light-5);
    }
    body.theme-dark input:focus,
    body.theme-dark select:focus,
    body.theme-dark textarea:focus {
      --input-text-color: var(--color-light-1);
    }
    body.theme-dark code-mirror {
      --input-focus-text-color: var(--color-light-2);
      --gutter-background-color: var(--color-dark-2);
      --gutter-border-color: var(--color-dark-3);
      --gutter-text-color: var(--color-light-4);
      --active-line-color: #2f393c44;
      --input-background-color: var(--color-cool-4);
      --input-border-color: transparent;
      --tooltip-background-color: var(--color-light-1);
      --tooltip-text-color: var(--color-dark-2);
      --syntax-keyword-color: #c678dd;
      --syntax-comment-color: #7d8799;
      --syntax-operator-color: #56b6c2;
      --syntax-separator-color: var(--syntax-operator-color);
      --syntax-var-name-color: #e06c75;
      --syntax-func-name-color: #61afef;
      --syntax-local-var-color: #fff;
      --syntax-class-name-color: #e5c07b;
      --syntax-prop-def-color: #e06c75;
      --syntax-prop-name-color: var(--input-text-color);
      --syntax-boolean-color: #d19a66;
      --syntax-number-color: #e5c07b;
      --syntax-string-color: #98c379;
      --syntax-regexp-color: #56b6c2;
      --syntax-angle-bracket-color: var(--syntax-separator-color);
      --syntax-tag-color: var(--syntax-class-name-color);
      --syntax-code-bg-color: var(--color-cool-5-25);
    }
    body.theme-dark code-mirror:disabled {
      --gutter-background-color: var(--color-dark-1);
      --gutter-border-color: var(--input-border-color);
      --gutter-text-color: var(--color-light-4);
    }
    body.theme-dark code,
    body.theme-dark code.block {
      --color-code-bg: var(--color-cool-4);
      --color-code-border: var(--color-cool-3);
    }
    body.theme-dark input[type=checkbox],
    body.theme-dark input[type=radio] {
      --checkbox-checked-color: var(--color-warm-1);
      --checkbox-disabled-color: var(--color-cool-3);
      --checkbox-background-color: var(--color-cool-4);
      --checkbox-checkmark-color: transparent;
      --checkbox-font-weight: bold;
    }
    body.theme-dark 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);
    }
    body.theme-dark label.icon:focus-within {
      --input-text-color: var(--color-light-1);
    }
    body.theme-dark 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);
    }
    body.theme-dark input[readonly] {
      --input-background-color: var(--color-cool-5);
      --input-border-color: var(--color-cool-4);
      --input-text-color: var(--color-light-4);
    }
    body.theme-dark a.button,
    body.theme-dark button,
    body.theme-dark kbd {
      --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);
    }
    body.theme-dark a.button[disabled],
    body.theme-dark button[disabled],
    body.theme-dark kbd[disabled] {
      --button-background-color: var(--color-cool-5);
      --button-border-color: transparent;
      --button-text-color: var(--color-light-5);
      --button-hover-background-color: var(--button-background-color);
      --button-hover-border-color: var(--button-border-color);
      --button-hover-text-color: var(--button-text-color);
    }
    body.theme-dark a.button.bright,
    body.theme-dark 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;
    }
    body.theme-dark a.button.bright:disabled,
    body.theme-dark button.bright:disabled {
      --button-background-color: var(--color-cool-4);
      --button-text-color: var(--color-text-subtle);
      --button-hover-background-color: var(--button-background-color);
      --button-hover-border-color: var(--button-border-color);
      --button-hover-text-color: var(--button-text-color);
    }
    body.theme-dark .prosemirror,
    body.theme-dark prose-mirror,
    body.theme-dark #prosemirror-dropdown,
    body.theme-dark .menu-dialog.prosemirror,
    body.theme-dark#prosemirror-dropdown,
    body.theme-dark.menu-dialog.prosemirror {
      --menu-background: var(--color-cool-4);
      --dropdown-background: var(--color-cool-4);
      --dropdown-border: var(--color-cool-3);
      --dialog-background: var(--color-cool-5);
      --dialog-border: var(--color-cool-4);
      --color-control-hover: rgba(0, 0, 0, 0.25);
      --color-form-label-hover: var(--color-light-2);
      --button-text-color: var(--color-light-3);
    }
    body.theme-dark #context-menu,
    body.theme-dark#context-menu {
      --background-color: var(--color-cool-5);
      --border-color: var(--color-cool-3);
      --text-color: var(--color-text-secondary);
      --hover-text-color: var(--color-text-emphatic);
      --group-separator: var(--color-cool-4);
      --hover-entry-border: var(--color-cool-4);
      --hover-entry-background: var(--color-dark-1);
    }
    body.theme-dark.compendium-directory,
    body.theme-dark .compendium-directory {
      --header-mask: linear-gradient(black, transparent);
      --header-border: none;
    }
    body.theme-dark .ui-control,
    body.theme-dark .placeable-hud,
    body.theme-dark #measurement .waypoint-label {
      --control-bg-color: var(--color-cool-5-75);
      --control-border-color: var(--color-cool-4);
      --control-icon-color: var(--color-light-2);
      --control-hover-bg-color: var(--color-cool-5);
      --control-hover-border-color: var(--color-cool-3);
      --control-hover-icon-color: var(--color-light-1);
      --control-active-bg-color: var(--color-cool-5);
      --control-active-border-color: var(--color-warm-2);
      --control-active-icon-color: var(--color-light-1);
      --control-button-border-color: var(--color-warm-1);
      --control-button-hover-bg-color: var(--color-warm-2);
      --control-button-hover-border-color: var(--color-light-1);
      --toggle-bg-color: rgba(34, 34, 72, 0.75);
      --toggle-border-color: #5252d7;
      --toggle-active-bg-color: #5252d7;
      --toggle-active-border-color: #8484ff;
    }
    body.theme-dark .ui-control:disabled,
    body.theme-dark .placeable-hud:disabled,
    body.theme-dark #measurement .waypoint-label:disabled {
      --control-hover-bg-color: var(--control-bg-color);
      --control-hover-border-color: var(--control-border-color);
      --control-hover-icon-color: var(--control-icon-color);
    }
    body.theme-dark .placeable-hud,
    body.theme-dark #measurement .waypoint-label {
      --control-icon-color: rgba(255 255 255 / 70%);
      --control-active-icon-color: rgba(255 255 255 / 70%);
      --control-hover-icon-color: #FFF;
      --control-active-icon-color: #FFF;
      --control-icon-filter: none;
    }
    body.theme-dark #hotbar {
      --slot-color: var(--color-cool-5-90);
      --key-bg-color-empty: var(--color-cool-5);
      --key-bg-color-full: var(--color-cool-5);
      --key-text-color: var(--color-light-1);
      --page-control-color: var(--color-cool-5);
    }
    body.theme-dark #chat-message {
      --text-color: var(--color-light-2);
      --placeholder-color: var(--color-light-5);
      --background-color: var(--color-cool-5);
      --border-color: var(--color-cool-4);
    }
    body.theme-dark #players {
      --background-color: var(--color-cool-5-75);
      --border-color: var(--color-cool-4);
      --player-name-idle-color: #baaddc;
      --player-name-self-color: #c0eddb;
      --color-rating-good: #58e558;
      --color-rating-fair: #e3e365;
      --color-rating-poor: #e85555;
    }
    body.theme-dark #players button {
      --button-text-color: var(--color-text-emphatic);
      --button-hover-text-color: var(--button-text-color);
    }
    body.theme-dark .combat-tracker {
      --active-input-bg-color: var(--color-cool-5);
      --entry-hover-bg: rgba(255, 255, 255, 0.1);
      --entry-active-bg: rgba(255, 255, 255, 0.15);
      --token-effect-filter: none;
    }
    body.theme-dark #token-hud,
    body.theme-dark #measurement {
      --hud-icon-filter: none;
    }
    body.theme-dark #camera-views,
    body.theme-dark#camera-views {
      --av-background-color: var(--color-cool-5-90);
      --av-border-color: var(--color-cool-4);
    }
  }
  @layer specific {
    .themed.theme-dark {
      --color-scheme: dark;
      --color-text-emphatic: var(--color-light-1);
      --color-text-primary: var(--color-light-2);
      --color-text-secondary: var(--color-light-3);
      --color-text-subtle: var(--color-light-5);
      --color-text-selection: var(--color-light-1);
      --color-text-selection-bg: var(--color-cool-3);
      /* Applications */
      /* Forms */
      --table-background-color: var(--color-cool-5-50);
      --table-header-bg-color: var(--color-cool-4);
      --table-header-border-color: var(--color-cool-4);
      --table-header-text-color: inherit;
      --table-row-color-even: rgba(255, 255, 255, 0.1);
      --table-row-color-odd: transparent;
      --table-row-color-highlight: var(--color-cool-3);
      /* Context Menu */
      --content-link-background: var(--color-cool-5-90);
      --content-link-border-color: var(--color-light-6);
      --content-link-icon-color: var(--color-light-4);
      --content-link-text-color: var(--color-light-2);
      /* UI */
      --sidebar-background: var(--color-cool-5-90);
      --sidebar-separator: 1px solid var(--color-cool-4);
      --sidebar-entry-hover-bg: rgba(255, 255, 255, 0.1);
      --sidebar-folder-color: var(--color-dark-1);
      /* AV */
    }
    .themed.theme-dark .application,
    .themed.theme-dark.application {
      --background: var(--color-cool-5-90);
      --color-header-background: rgba(0, 0, 0, 0.5);
      --color-border: var(--color-cool-4);
      --color-tabs-border: var(--color-light-5);
      --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;
    }
    .themed.theme-dark .application .window-content,
    .themed.theme-dark.application .window-content {
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
    .themed.theme-dark .application .window-resize-handle,
    .themed.theme-dark.application .window-resize-handle {
      filter: invert(1);
    }
    @media (prefers-reduced-transparency) {
      .themed.theme-dark .application,
      .themed.theme-dark.application {
        --background: var(--color-cool-5);
      }
    }
    .themed.theme-dark input,
    .themed.theme-dark select,
    .themed.theme-dark textarea,
    .themed.theme-dark code-mirror {
      --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);
    }
    .themed.theme-dark input:disabled,
    .themed.theme-dark select:disabled,
    .themed.theme-dark textarea:disabled,
    .themed.theme-dark code-mirror:disabled {
      --input-background-color: var(--color-cool-5);
      --input-border-color: var(--color-cool-4);
      --input-text-color: var(--color-light-4);
    }
    .themed.theme-dark input,
    .themed.theme-dark select,
    .themed.theme-dark textarea {
      --input-placeholder-color: var(--color-light-5);
    }
    .themed.theme-dark input:focus,
    .themed.theme-dark select:focus,
    .themed.theme-dark textarea:focus {
      --input-text-color: var(--color-light-1);
    }
    .themed.theme-dark code-mirror {
      --input-focus-text-color: var(--color-light-2);
      --gutter-background-color: var(--color-dark-2);
      --gutter-border-color: var(--color-dark-3);
      --gutter-text-color: var(--color-light-4);
      --active-line-color: #2f393c44;
      --input-background-color: var(--color-cool-4);
      --input-border-color: transparent;
      --tooltip-background-color: var(--color-light-1);
      --tooltip-text-color: var(--color-dark-2);
      --syntax-keyword-color: #c678dd;
      --syntax-comment-color: #7d8799;
      --syntax-operator-color: #56b6c2;
      --syntax-separator-color: var(--syntax-operator-color);
      --syntax-var-name-color: #e06c75;
      --syntax-func-name-color: #61afef;
      --syntax-local-var-color: #fff;
      --syntax-class-name-color: #e5c07b;
      --syntax-prop-def-color: #e06c75;
      --syntax-prop-name-color: var(--input-text-color);
      --syntax-boolean-color: #d19a66;
      --syntax-number-color: #e5c07b;
      --syntax-string-color: #98c379;
      --syntax-regexp-color: #56b6c2;
      --syntax-angle-bracket-color: var(--syntax-separator-color);
      --syntax-tag-color: var(--syntax-class-name-color);
      --syntax-code-bg-color: var(--color-cool-5-25);
    }
    .themed.theme-dark code-mirror:disabled {
      --gutter-background-color: var(--color-dark-1);
      --gutter-border-color: var(--input-border-color);
      --gutter-text-color: var(--color-light-4);
    }
    .themed.theme-dark code,
    .themed.theme-dark code.block {
      --color-code-bg: var(--color-cool-4);
      --color-code-border: var(--color-cool-3);
    }
    .themed.theme-dark input[type=checkbox],
    .themed.theme-dark input[type=radio] {
      --checkbox-checked-color: var(--color-warm-1);
      --checkbox-disabled-color: var(--color-cool-3);
      --checkbox-background-color: var(--color-cool-4);
      --checkbox-checkmark-color: transparent;
      --checkbox-font-weight: bold;
    }
    .themed.theme-dark 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);
    }
    .themed.theme-dark label.icon:focus-within {
      --input-text-color: var(--color-light-1);
    }
    .themed.theme-dark 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);
    }
    .themed.theme-dark input[readonly] {
      --input-background-color: var(--color-cool-5);
      --input-border-color: var(--color-cool-4);
      --input-text-color: var(--color-light-4);
    }
    .themed.theme-dark a.button,
    .themed.theme-dark button,
    .themed.theme-dark kbd {
      --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);
    }
    .themed.theme-dark a.button[disabled],
    .themed.theme-dark button[disabled],
    .themed.theme-dark kbd[disabled] {
      --button-background-color: var(--color-cool-5);
      --button-border-color: transparent;
      --button-text-color: var(--color-light-5);
      --button-hover-background-color: var(--button-background-color);
      --button-hover-border-color: var(--button-border-color);
      --button-hover-text-color: var(--button-text-color);
    }
    .themed.theme-dark a.button.bright,
    .themed.theme-dark 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;
    }
    .themed.theme-dark a.button.bright:disabled,
    .themed.theme-dark button.bright:disabled {
      --button-background-color: var(--color-cool-4);
      --button-text-color: var(--color-text-subtle);
      --button-hover-background-color: var(--button-background-color);
      --button-hover-border-color: var(--button-border-color);
      --button-hover-text-color: var(--button-text-color);
    }
    .themed.theme-dark .prosemirror,
    .themed.theme-dark prose-mirror,
    .themed.theme-dark #prosemirror-dropdown,
    .themed.theme-dark .menu-dialog.prosemirror,
    .themed.theme-dark#prosemirror-dropdown,
    .themed.theme-dark.menu-dialog.prosemirror {
      --menu-background: var(--color-cool-4);
      --dropdown-background: var(--color-cool-4);
      --dropdown-border: var(--color-cool-3);
      --dialog-background: var(--color-cool-5);
      --dialog-border: var(--color-cool-4);
      --color-control-hover: rgba(0, 0, 0, 0.25);
      --color-form-label-hover: var(--color-light-2);
      --button-text-color: var(--color-light-3);
    }
    .themed.theme-dark #context-menu,
    .themed.theme-dark#context-menu {
      --background-color: var(--color-cool-5);
      --border-color: var(--color-cool-3);
      --text-color: var(--color-text-secondary);
      --hover-text-color: var(--color-text-emphatic);
      --group-separator: var(--color-cool-4);
      --hover-entry-border: var(--color-cool-4);
      --hover-entry-background: var(--color-dark-1);
    }
    .themed.theme-dark.compendium-directory,
    .themed.theme-dark .compendium-directory {
      --header-mask: linear-gradient(black, transparent);
      --header-border: none;
    }
    .themed.theme-dark .ui-control,
    .themed.theme-dark .placeable-hud,
    .themed.theme-dark #measurement .waypoint-label {
      --control-bg-color: var(--color-cool-5-75);
      --control-border-color: var(--color-cool-4);
      --control-icon-color: var(--color-light-2);
      --control-hover-bg-color: var(--color-cool-5);
      --control-hover-border-color: var(--color-cool-3);
      --control-hover-icon-color: var(--color-light-1);
      --control-active-bg-color: var(--color-cool-5);
      --control-active-border-color: var(--color-warm-2);
      --control-active-icon-color: var(--color-light-1);
      --control-button-border-color: var(--color-warm-1);
      --control-button-hover-bg-color: var(--color-warm-2);
      --control-button-hover-border-color: var(--color-light-1);
      --toggle-bg-color: rgba(34, 34, 72, 0.75);
      --toggle-border-color: #5252d7;
      --toggle-active-bg-color: #5252d7;
      --toggle-active-border-color: #8484ff;
    }
    .themed.theme-dark .ui-control:disabled,
    .themed.theme-dark .placeable-hud:disabled,
    .themed.theme-dark #measurement .waypoint-label:disabled {
      --control-hover-bg-color: var(--control-bg-color);
      --control-hover-border-color: var(--control-border-color);
      --control-hover-icon-color: var(--control-icon-color);
    }
    .themed.theme-dark .placeable-hud,
    .themed.theme-dark #measurement .waypoint-label {
      --control-icon-color: rgba(255 255 255 / 70%);
      --control-active-icon-color: rgba(255 255 255 / 70%);
      --control-hover-icon-color: #FFF;
      --control-active-icon-color: #FFF;
      --control-icon-filter: none;
    }
    .themed.theme-dark #hotbar {
      --slot-color: var(--color-cool-5-90);
      --key-bg-color-empty: var(--color-cool-5);
      --key-bg-color-full: var(--color-cool-5);
      --key-text-color: var(--color-light-1);
      --page-control-color: var(--color-cool-5);
    }
    .themed.theme-dark #chat-message {
      --text-color: var(--color-light-2);
      --placeholder-color: var(--color-light-5);
      --background-color: var(--color-cool-5);
      --border-color: var(--color-cool-4);
    }
    .themed.theme-dark #players {
      --background-color: var(--color-cool-5-75);
      --border-color: var(--color-cool-4);
      --player-name-idle-color: #baaddc;
      --player-name-self-color: #c0eddb;
      --color-rating-good: #58e558;
      --color-rating-fair: #e3e365;
      --color-rating-poor: #e85555;
    }
    .themed.theme-dark #players button {
      --button-text-color: var(--color-text-emphatic);
      --button-hover-text-color: var(--button-text-color);
    }
    .themed.theme-dark .combat-tracker {
      --active-input-bg-color: var(--color-cool-5);
      --entry-hover-bg: rgba(255, 255, 255, 0.1);
      --entry-active-bg: rgba(255, 255, 255, 0.15);
      --token-effect-filter: none;
    }
    .themed.theme-dark #token-hud,
    .themed.theme-dark #measurement {
      --hud-icon-filter: none;
    }
    .themed.theme-dark #camera-views,
    .themed.theme-dark#camera-views {
      --av-background-color: var(--color-cool-5-90);
      --av-border-color: var(--color-cool-4);
    }
  }
  /* ---------------------------------------- */
  /*  Theme Variables                         */
  /* ---------------------------------------- */
  .mixin-theme-fantasy-variables {
    /* ---------------------------------------- */
    /*  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-text-emphatic: var(--color-light-1);
    --color-text-primary: var(--color-light-2);
    --color-text-secondary: var(--color-light-3);
    --color-text-subtle: var(--color-light-5);
    --color-text-selection: var(--color-light-1);
    --color-text-selection-bg: var(--color-cool-3);
    /* ---------------------------------------- */
    /*  Forms and Form Elements                 */
    /* ---------------------------------------- */
    /* ---------------------------------------- */
    /*  Packages                                */
    /* ---------------------------------------- */
  }
  .mixin-theme-fantasy-variables input,
  .mixin-theme-fantasy-variables select {
    --input-background-color: var(--color-warm-3);
  }
  .mixin-theme-fantasy-variables input[type="checkbox"],
  .mixin-theme-fantasy-variables input[type="radio"] {
    --checkbox-background-color: var(--color-warm-3);
  }
  .mixin-theme-fantasy-variables #setup-packages header.controls .filter input {
    --input-background-color: var(--color-cool-3);
  }
  /* ---------------------------------------- */
  /*  Theme Layers                            */
  /* ---------------------------------------- */
  @layer general {
    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-text-emphatic: var(--color-light-1);
      --color-text-primary: var(--color-light-2);
      --color-text-secondary: var(--color-light-3);
      --color-text-subtle: var(--color-light-5);
      --color-text-selection: var(--color-light-1);
      --color-text-selection-bg: var(--color-cool-3);
      /* ---------------------------------------- */
      /*  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"],
    body.theme-fantasy input[type="radio"] {
      --checkbox-background-color: var(--color-warm-3);
    }
    body.theme-fantasy #setup-packages header.controls .filter input {
      --input-background-color: var(--color-cool-3);
    }
  }
  @layer specific {
    .application.theme-fantasy,
    .themed.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-text-emphatic: var(--color-light-1);
      --color-text-primary: var(--color-light-2);
      --color-text-secondary: var(--color-light-3);
      --color-text-subtle: var(--color-light-5);
      --color-text-selection: var(--color-light-1);
      --color-text-selection-bg: var(--color-cool-3);
      /* ---------------------------------------- */
      /*  Forms and Form Elements                 */
      /* ---------------------------------------- */
      /* ---------------------------------------- */
      /*  Packages                                */
      /* ---------------------------------------- */
    }
    .application.theme-fantasy input,
    .themed.theme-fantasy input,
    .application.theme-fantasy select,
    .themed.theme-fantasy select {
      --input-background-color: var(--color-warm-3);
    }
    .application.theme-fantasy input[type="checkbox"],
    .themed.theme-fantasy input[type="checkbox"],
    .application.theme-fantasy input[type="radio"],
    .themed.theme-fantasy input[type="radio"] {
      --checkbox-background-color: var(--color-warm-3);
    }
    .application.theme-fantasy #setup-packages header.controls .filter input,
    .themed.theme-fantasy #setup-packages header.controls .filter input {
      --input-background-color: var(--color-cool-3);
    }
  }
  /* ---------------------------------------- */
  /*  Theme Variables                         */
  /* ---------------------------------------- */
  .mixin-theme-scifi-variables {
    /* ---------------------------------------- */
    /*  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-text-emphatic: #f3f7f7;
    --color-text-primary: #dee9ed;
    --color-text-secondary: #c2daea;
    --color-text-subtle: #899fad;
    --color-text-selection: #f3f7f7;
    --color-text-selection-bg: #202137;
    --color-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                 */
    /* ---------------------------------------- */
  }
  .mixin-theme-scifi-variables .app,
  .mixin-theme-scifi-variables .application {
    --color-border: #303260;
  }
  .mixin-theme-scifi-variables input,
  .mixin-theme-scifi-variables select {
    --input-background-color: #202137;
    --input-focus-outline-color: #3a9bee;
  }
  .mixin-theme-scifi-variables input[type="checkbox"],
  .mixin-theme-scifi-variables input[type="radio"] {
    --checkbox-checked-color: #3a9bee;
    --checkbox-background-color: #202137;
  }
  .mixin-theme-scifi-variables button.bright {
    --button-hover-background-color: #42a5fc;
  }
  /* ---------------------------------------- */
  /*  Theme Layers                            */
  /* ---------------------------------------- */
  @layer general {
    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-text-emphatic: #f3f7f7;
      --color-text-primary: #dee9ed;
      --color-text-secondary: #c2daea;
      --color-text-subtle: #899fad;
      --color-text-selection: #f3f7f7;
      --color-text-selection-bg: #202137;
      --color-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"],
    body.theme-scifi input[type="radio"] {
      --checkbox-checked-color: #3a9bee;
      --checkbox-background-color: #202137;
    }
    body.theme-scifi button.bright {
      --button-hover-background-color: #42a5fc;
    }
  }
  @layer specific {
    .application.theme-scifi,
    .themed.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-text-emphatic: #f3f7f7;
      --color-text-primary: #dee9ed;
      --color-text-secondary: #c2daea;
      --color-text-subtle: #899fad;
      --color-text-selection: #f3f7f7;
      --color-text-selection-bg: #202137;
      --color-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                 */
      /* ---------------------------------------- */
    }
    .application.theme-scifi .app,
    .themed.theme-scifi .app,
    .application.theme-scifi .application,
    .themed.theme-scifi .application {
      --color-border: #303260;
    }
    .application.theme-scifi input,
    .themed.theme-scifi input,
    .application.theme-scifi select,
    .themed.theme-scifi select {
      --input-background-color: #202137;
      --input-focus-outline-color: #3a9bee;
    }
    .application.theme-scifi input[type="checkbox"],
    .themed.theme-scifi input[type="checkbox"],
    .application.theme-scifi input[type="radio"],
    .themed.theme-scifi input[type="radio"] {
      --checkbox-checked-color: #3a9bee;
      --checkbox-background-color: #202137;
    }
    .application.theme-scifi button.bright,
    .themed.theme-scifi button.bright {
      --button-hover-background-color: #42a5fc;
    }
  }
  /* ---------------------------------------- */
  /*  Theme Variables                         */
  /* ---------------------------------------- */
  .mixin-theme-light-variables {
    --color-scheme: light;
    --color-text-emphatic: var(--color-dark-1);
    --color-text-primary: var(--color-dark-2);
    --color-text-secondary: var(--color-dark-3);
    --color-text-subtle: var(--color-dark-5);
    --color-text-selection: var(--color-light-1);
    --color-text-selection-bg: var(--color-dark-6);
    /* Context Menu */
    --content-link-background: #ddd;
    --content-link-border-color: var(--color-dark-4);
    --content-link-icon-color: var(--color-dark-6);
    --content-link-text-color: var(--color-dark-2);
    /* UI */
    --sidebar-background: url("../ui/parchment.jpg");
    --sidebar-separator: 2px groove var(--color-light-2);
    --sidebar-entry-hover-bg: rgba(255, 255, 255, 0.25);
    --sidebar-folder-color: #a19e78;
    /* AV */
  }
  .mixin-theme-light-variables #context-menu,
  .mixin-theme-light-variables#context-menu {
    --background-color: #d9d8c8;
    --border-color: #999;
    --text-color: var(--color-text-secondary);
    --hover-text-color: var(--color-text-emphatic);
    --group-separator: #999;
    --hover-entry-border: #999;
    --hover-entry-background: #f0f0e0;
  }
  .mixin-theme-light-variables.compendium-directory,
  .mixin-theme-light-variables .compendium-directory {
    --header-mask: none;
    --header-border: 2px groove var(--color-light-2);
  }
  .mixin-theme-light-variables .ui-control,
  .mixin-theme-light-variables .placeable-hud,
  .mixin-theme-light-variables #measurement .waypoint-label {
    --control-bg-color: rgba(255, 255, 255, 0.6);
    --control-border-color: rgba(255, 255, 255, 0.8);
    --control-icon-color: var(--color-dark-2);
    --control-hover-bg-color: rgba(255, 255, 255, 0.85);
    --control-hover-border-color: rgba(255, 255, 255, 0.9);
    --control-hover-icon-color: var(--color-dark-1);
    --control-active-bg-color: rgba(255, 255, 255, 0.85);
    --control-active-border-color: var(--color-warm-2);
    --control-active-icon-color: var(--color-dark-1);
    --control-button-border-color: var(--color-warm-1);
    --control-button-hover-bg-color: var(--color-warm-2);
    --control-button-hover-border-color: var(--color-light-1);
    --toggle-bg-color: rgba(255, 255, 255, 0.6);
    --toggle-border-color: #5252d7;
    --toggle-active-bg-color: #5252d7;
    --toggle-active-border-color: #8484ff;
  }
  .mixin-theme-light-variables .ui-control:disabled,
  .mixin-theme-light-variables .placeable-hud:disabled,
  .mixin-theme-light-variables #measurement .waypoint-label:disabled {
    --control-hover-bg-color: var(--control-bg-color);
    --control-hover-border-color: var(--control-border-color);
    --control-hover-icon-color: var(--control-icon-color);
  }
  .mixin-theme-light-variables .placeable-hud,
  .mixin-theme-light-variables #measurement .waypoint-label {
    --control-icon-color: rgba(0 0 0 / 70%);
    --control-active-icon-color: rgba(0 0 0 / 70%);
    --control-hover-icon-color: #000;
    --control-active-icon-color: #000;
    --control-icon-filter: invert(1);
  }
  .mixin-theme-light-variables #hotbar {
    --slot-color: rgba(255, 255, 255, 0.6);
    --key-bg-color-empty: transparent;
    --key-bg-color-full: rgba(255, 255, 255, 0.6);
    --key-text-color: var(--color-dark-1);
    --page-control-color: rgba(255, 255, 255, 0.8);
  }
  .mixin-theme-light-variables #chat-message {
    --text-color: var(--color-dark-2);
    --placeholder-color: var(--color-dark-4);
    --background-color: rgba(255, 255, 255, 0.6);
    --border-color: rgba(255, 255, 255, 0.8);
  }
  .mixin-theme-light-variables #players {
    --background-color: rgba(255, 255, 255, 0.6);
    --border-color: rgba(255, 255, 255, 0.8);
    --player-name-idle-color: var(--color-text-subtle);
    --player-name-self-color: var(--color-text-emphatic);
    --color-rating-good: #1e7e34;
    --color-rating-fair: #cc9a06;
    --color-rating-poor: #a72a35;
  }
  .mixin-theme-light-variables #players button {
    --button-text-color: var(--color-text-emphatic);
    --button-hover-text-color: var(--button-text-color);
  }
  .mixin-theme-light-variables .combat-tracker {
    --active-input-bg-color: rgba(0, 0, 0, 0.05);
    --entry-hover-bg: rgba(255, 255, 255, 0.25);
    --entry-active-bg: rgba(255, 255, 255, 0.35);
    --token-effect-filter: invert(1);
  }
  .mixin-theme-light-variables #token-hud,
  .mixin-theme-light-variables #measurement {
    --hud-icon-filter: invert(1);
  }
  .mixin-theme-light-variables #camera-views,
  .mixin-theme-light-variables#camera-views {
    --av-background-color: rgba(255, 255, 255, 0.2);
    --av-border-color: rgba(255, 255, 255, 0.1);
  }
  /* ---------------------------------------- */
  /*  Applications                            */
  /* ---------------------------------------- */
  .mixin-theme-light-application {
    --background: url("../ui/parchment.jpg") repeat;
    --color-header-background: var(--color-dark-3);
    --color-border: var(--color-cool-4);
    --color-tabs-border: var(--color-dark-5);
    --color-fieldset-border: var(--color-light-2);
    --color-form-label: var(--color-dark-2);
    --color-form-label-hover: var(--color-dark-1);
    --color-form-hint: var(--color-dark-4);
    --color-form-hint-hover: var(--color-dark-2);
    --color-select-option-bg: var(--color-light-1);
  }
  /* ---------------------------------------- */
  /*  Forms and Form Elements                 */
  /* ---------------------------------------- */
  .mixin-theme-light-forms {
    --table-background-color: none;
    --table-header-bg-color: rgba(0, 0, 0, 0.1);
    --table-header-border-color: var(--color-dark-1);
    --table-header-text-color: inherit;
    --table-row-color-even: rgba(0, 0, 0, 0.1);
    --table-row-color-odd: transparent;
    --table-row-color-highlight: var(--color-cool-5-75);
  }
  .mixin-theme-light-forms input,
  .mixin-theme-light-forms select,
  .mixin-theme-light-forms textarea,
  .mixin-theme-light-forms code-mirror {
    --input-border-color: var(--color-dark-6);
    --input-box-shadow: inset 0 0 6px var(--input-background-color);
    --input-text-color: var(--color-dark-2);
    --input-focus-outline-color: var(--color-warm-2);
  }
  .mixin-theme-light-forms input:disabled,
  .mixin-theme-light-forms select:disabled,
  .mixin-theme-light-forms textarea:disabled,
  .mixin-theme-light-forms code-mirror:disabled {
    --input-background-color: rgba(0, 0, 0, 0.2);
    --input-border-color: transparent;
    --input-box-shadow: none;
    --input-text-color: var(--color-dark-3);
  }
  .mixin-theme-light-forms input,
  .mixin-theme-light-forms select,
  .mixin-theme-light-forms textarea {
    --input-background-color: rgba(0, 0, 0, 0.1);
    --input-placeholder-color: var(--color-dark-4);
  }
  .mixin-theme-light-forms input:focus,
  .mixin-theme-light-forms select:focus,
  .mixin-theme-light-forms textarea:focus {
    --input-text-color: var(--color-dark-1);
  }
  .mixin-theme-light-forms code-mirror {
    --input-background-color: var(--color-light-1);
    --input-focus-text-color: var(--color-dark-1);
    --gutter-background-color: #f5f5f5;
    --gutter-border-color: #ddd;
    --gutter-text-color: var(--color-dark-5);
    --active-line-color: #cceeff44;
    --syntax-keyword-color: #708;
    --syntax-comment-color: var(--color-dark-3);
    --syntax-operator-color: var(--input-text-color);
    --syntax-var-name-color: #00f;
    --syntax-func-name-color: var(--syntax-var-name-color);
    --syntax-method-name-color: var(--syntax-func-name-color);
    --syntax-local-var-color: #30a;
    --syntax-class-name-color: #167;
    --syntax-prop-def-color: #00c;
    --syntax-prop-name-color: var(--input-text-color);
    --syntax-boolean-color: #219;
    --syntax-number-color: #164;
    --syntax-string-color: #a11;
    --syntax-regexp-color: #e40;
    --syntax-invalid-color: #f00;
    --syntax-angle-bracket-color: var(--syntax-separator-color);
    --syntax-tag-color: #085;
    --syntax-attr-name-color: var(--syntax-prop-name-color);
    --syntax-attr-value-color: var(--syntax-string-color);
    --syntax-meta-color: var(--syntax-tag-color);
    --syntax-separator-color: #00f;
  }
  .mixin-theme-light-forms code-mirror:disabled {
    --gutter-background-color: rgba(0, 0, 0, 0.1);
    --gutter-border-color: var(--input-border-color);
    --gutter-text-color: var(--color-dark-4);
  }
  .mixin-theme-light-forms code,
  .mixin-theme-light-forms code.block {
    --color-code-bg: #cceeff44;
    --color-code-border: var(--color-dark-6);
  }
  .mixin-theme-light-forms input[type=checkbox],
  .mixin-theme-light-forms input[type=radio] {
    --checkbox-font-weight: unset;
    --checkbox-background-color: var(--color-dark-6);
    --checkbox-checked-color: var(--color-warm-1);
    --checkbox-checkmark-color: var(--color-dark-1);
  }
  .mixin-theme-light-forms input[type=checkbox]:disabled,
  .mixin-theme-light-forms input[type=radio]:disabled,
  .mixin-theme-light-forms input[type=checkbox][readonly],
  .mixin-theme-light-forms input[type=radio][readonly] {
    --checkbox-font-weight: bold;
    --checkbox-checkmark-color: transparent;
    --checkbox-disabled-color: var(--color-dark-6);
  }
  .mixin-theme-light-forms label.icon {
    --input-background-color: rgba(0, 0, 0, 0.1);
    --input-border-color: var(--color-dark-6);
    --input-text-color: var(--color-dark-2);
    --input-focus-outline-color: var(--color-warm-2);
  }
  .mixin-theme-light-forms label.icon:focus-within {
    --input-text-color: var(--color-dark-1);
  }
  .mixin-theme-light-forms label.icon:has(> input:disabled) {
    --input-background-color: rgba(0, 0, 0, 0.2);
    --input-border-color: transparent;
    --input-text-color: var(--color-dark-3);
  }
  .mixin-theme-light-forms input[readonly] {
    --input-background-color: rgba(0, 0, 0, 0.2);
    --input-border-color: transparent;
    --input-text-color: var(--color-dark-3);
  }
  .mixin-theme-light-forms a.button,
  .mixin-theme-light-forms button,
  .mixin-theme-light-forms kbd {
    --button-background-color: rgba(0 0 0 / 10%);
    --button-border-color: var(--color-dark-5);
    --button-text-color: var(--color-dark-1);
    --button-focus-outline-color: var(--color-warm-2);
    --button-hover-background-color: var(--color-warm-2);
    --button-hover-text-color: var(--color-light-1);
  }
  .mixin-theme-light-forms a.button[disabled],
  .mixin-theme-light-forms button[disabled],
  .mixin-theme-light-forms kbd[disabled] {
    --button-background-color: rgba(0 0 0 / 20%);
    --button-border-color: transparent;
    --button-text-color: var(--color-dark-3);
    --button-hover-background-color: var(--button-background-color);
    --button-hover-border-color: var(--button-border-color);
    --button-hover-text-color: var(--button-text-color);
  }
  .mixin-theme-light-forms .prosemirror,
  .mixin-theme-light-forms prose-mirror,
  .mixin-theme-light-forms #prosemirror-dropdown,
  .mixin-theme-light-forms .menu-dialog.prosemirror,
  .mixin-theme-light-forms#prosemirror-dropdown,
  .mixin-theme-light-forms.menu-dialog.prosemirror {
    --color-control-hover: #f0f0e0;
    --menu-background: rgba(0, 0, 0, 0.1);
    --dropdown-background: #d9d8c8;
    --dropdown-border: #999;
    --dialog-background: var(--dropdown-background);
    --dialog-border: transparent;
    --color-form-label-hover: var(--color-dark-1);
    --button-text-color: var(--color-text-primary);
  }
  /* ---------------------------------------- */
  /*  Theme Layers                            */
  /* ---------------------------------------- */
  @layer general {
    body.theme-light {
      --color-scheme: light;
      --color-text-emphatic: var(--color-dark-1);
      --color-text-primary: var(--color-dark-2);
      --color-text-secondary: var(--color-dark-3);
      --color-text-subtle: var(--color-dark-5);
      --color-text-selection: var(--color-light-1);
      --color-text-selection-bg: var(--color-dark-6);
      /* Context Menu */
      --content-link-background: #ddd;
      --content-link-border-color: var(--color-dark-4);
      --content-link-icon-color: var(--color-dark-6);
      --content-link-text-color: var(--color-dark-2);
      /* UI */
      --sidebar-background: url("../ui/parchment.jpg");
      --sidebar-separator: 2px groove var(--color-light-2);
      --sidebar-entry-hover-bg: rgba(255, 255, 255, 0.25);
      --sidebar-folder-color: #a19e78;
      /* AV */
      --table-background-color: none;
      --table-header-bg-color: rgba(0, 0, 0, 0.1);
      --table-header-border-color: var(--color-dark-1);
      --table-header-text-color: inherit;
      --table-row-color-even: rgba(0, 0, 0, 0.1);
      --table-row-color-odd: transparent;
      --table-row-color-highlight: var(--color-cool-5-75);
    }
    body.theme-light #context-menu,
    body.theme-light#context-menu {
      --background-color: #d9d8c8;
      --border-color: #999;
      --text-color: var(--color-text-secondary);
      --hover-text-color: var(--color-text-emphatic);
      --group-separator: #999;
      --hover-entry-border: #999;
      --hover-entry-background: #f0f0e0;
    }
    body.theme-light.compendium-directory,
    body.theme-light .compendium-directory {
      --header-mask: none;
      --header-border: 2px groove var(--color-light-2);
    }
    body.theme-light .ui-control,
    body.theme-light .placeable-hud,
    body.theme-light #measurement .waypoint-label {
      --control-bg-color: rgba(255, 255, 255, 0.6);
      --control-border-color: rgba(255, 255, 255, 0.8);
      --control-icon-color: var(--color-dark-2);
      --control-hover-bg-color: rgba(255, 255, 255, 0.85);
      --control-hover-border-color: rgba(255, 255, 255, 0.9);
      --control-hover-icon-color: var(--color-dark-1);
      --control-active-bg-color: rgba(255, 255, 255, 0.85);
      --control-active-border-color: var(--color-warm-2);
      --control-active-icon-color: var(--color-dark-1);
      --control-button-border-color: var(--color-warm-1);
      --control-button-hover-bg-color: var(--color-warm-2);
      --control-button-hover-border-color: var(--color-light-1);
      --toggle-bg-color: rgba(255, 255, 255, 0.6);
      --toggle-border-color: #5252d7;
      --toggle-active-bg-color: #5252d7;
      --toggle-active-border-color: #8484ff;
    }
    body.theme-light .ui-control:disabled,
    body.theme-light .placeable-hud:disabled,
    body.theme-light #measurement .waypoint-label:disabled {
      --control-hover-bg-color: var(--control-bg-color);
      --control-hover-border-color: var(--control-border-color);
      --control-hover-icon-color: var(--control-icon-color);
    }
    body.theme-light .placeable-hud,
    body.theme-light #measurement .waypoint-label {
      --control-icon-color: rgba(0 0 0 / 70%);
      --control-active-icon-color: rgba(0 0 0 / 70%);
      --control-hover-icon-color: #000;
      --control-active-icon-color: #000;
      --control-icon-filter: invert(1);
    }
    body.theme-light #hotbar {
      --slot-color: rgba(255, 255, 255, 0.6);
      --key-bg-color-empty: transparent;
      --key-bg-color-full: rgba(255, 255, 255, 0.6);
      --key-text-color: var(--color-dark-1);
      --page-control-color: rgba(255, 255, 255, 0.8);
    }
    body.theme-light #chat-message {
      --text-color: var(--color-dark-2);
      --placeholder-color: var(--color-dark-4);
      --background-color: rgba(255, 255, 255, 0.6);
      --border-color: rgba(255, 255, 255, 0.8);
    }
    body.theme-light #players {
      --background-color: rgba(255, 255, 255, 0.6);
      --border-color: rgba(255, 255, 255, 0.8);
      --player-name-idle-color: var(--color-text-subtle);
      --player-name-self-color: var(--color-text-emphatic);
      --color-rating-good: #1e7e34;
      --color-rating-fair: #cc9a06;
      --color-rating-poor: #a72a35;
    }
    body.theme-light #players button {
      --button-text-color: var(--color-text-emphatic);
      --button-hover-text-color: var(--button-text-color);
    }
    body.theme-light .combat-tracker {
      --active-input-bg-color: rgba(0, 0, 0, 0.05);
      --entry-hover-bg: rgba(255, 255, 255, 0.25);
      --entry-active-bg: rgba(255, 255, 255, 0.35);
      --token-effect-filter: invert(1);
    }
    body.theme-light #token-hud,
    body.theme-light #measurement {
      --hud-icon-filter: invert(1);
    }
    body.theme-light #camera-views,
    body.theme-light#camera-views {
      --av-background-color: rgba(255, 255, 255, 0.2);
      --av-border-color: rgba(255, 255, 255, 0.1);
    }
    body.theme-light input,
    body.theme-light select,
    body.theme-light textarea,
    body.theme-light code-mirror {
      --input-border-color: var(--color-dark-6);
      --input-box-shadow: inset 0 0 6px var(--input-background-color);
      --input-text-color: var(--color-dark-2);
      --input-focus-outline-color: var(--color-warm-2);
    }
    body.theme-light input:disabled,
    body.theme-light select:disabled,
    body.theme-light textarea:disabled,
    body.theme-light code-mirror:disabled {
      --input-background-color: rgba(0, 0, 0, 0.2);
      --input-border-color: transparent;
      --input-box-shadow: none;
      --input-text-color: var(--color-dark-3);
    }
    body.theme-light input,
    body.theme-light select,
    body.theme-light textarea {
      --input-background-color: rgba(0, 0, 0, 0.1);
      --input-placeholder-color: var(--color-dark-4);
    }
    body.theme-light input:focus,
    body.theme-light select:focus,
    body.theme-light textarea:focus {
      --input-text-color: var(--color-dark-1);
    }
    body.theme-light code-mirror {
      --input-background-color: var(--color-light-1);
      --input-focus-text-color: var(--color-dark-1);
      --gutter-background-color: #f5f5f5;
      --gutter-border-color: #ddd;
      --gutter-text-color: var(--color-dark-5);
      --active-line-color: #cceeff44;
      --syntax-keyword-color: #708;
      --syntax-comment-color: var(--color-dark-3);
      --syntax-operator-color: var(--input-text-color);
      --syntax-var-name-color: #00f;
      --syntax-func-name-color: var(--syntax-var-name-color);
      --syntax-method-name-color: var(--syntax-func-name-color);
      --syntax-local-var-color: #30a;
      --syntax-class-name-color: #167;
      --syntax-prop-def-color: #00c;
      --syntax-prop-name-color: var(--input-text-color);
      --syntax-boolean-color: #219;
      --syntax-number-color: #164;
      --syntax-string-color: #a11;
      --syntax-regexp-color: #e40;
      --syntax-invalid-color: #f00;
      --syntax-angle-bracket-color: var(--syntax-separator-color);
      --syntax-tag-color: #085;
      --syntax-attr-name-color: var(--syntax-prop-name-color);
      --syntax-attr-value-color: var(--syntax-string-color);
      --syntax-meta-color: var(--syntax-tag-color);
      --syntax-separator-color: #00f;
    }
    body.theme-light code-mirror:disabled {
      --gutter-background-color: rgba(0, 0, 0, 0.1);
      --gutter-border-color: var(--input-border-color);
      --gutter-text-color: var(--color-dark-4);
    }
    body.theme-light code,
    body.theme-light code.block {
      --color-code-bg: #cceeff44;
      --color-code-border: var(--color-dark-6);
    }
    body.theme-light input[type=checkbox],
    body.theme-light input[type=radio] {
      --checkbox-font-weight: unset;
      --checkbox-background-color: var(--color-dark-6);
      --checkbox-checked-color: var(--color-warm-1);
      --checkbox-checkmark-color: var(--color-dark-1);
    }
    body.theme-light input[type=checkbox]:disabled,
    body.theme-light input[type=radio]:disabled,
    body.theme-light input[type=checkbox][readonly],
    body.theme-light input[type=radio][readonly] {
      --checkbox-font-weight: bold;
      --checkbox-checkmark-color: transparent;
      --checkbox-disabled-color: var(--color-dark-6);
    }
    body.theme-light label.icon {
      --input-background-color: rgba(0, 0, 0, 0.1);
      --input-border-color: var(--color-dark-6);
      --input-text-color: var(--color-dark-2);
      --input-focus-outline-color: var(--color-warm-2);
    }
    body.theme-light label.icon:focus-within {
      --input-text-color: var(--color-dark-1);
    }
    body.theme-light label.icon:has(> input:disabled) {
      --input-background-color: rgba(0, 0, 0, 0.2);
      --input-border-color: transparent;
      --input-text-color: var(--color-dark-3);
    }
    body.theme-light input[readonly] {
      --input-background-color: rgba(0, 0, 0, 0.2);
      --input-border-color: transparent;
      --input-text-color: var(--color-dark-3);
    }
    body.theme-light a.button,
    body.theme-light button,
    body.theme-light kbd {
      --button-background-color: rgba(0 0 0 / 10%);
      --button-border-color: var(--color-dark-5);
      --button-text-color: var(--color-dark-1);
      --button-focus-outline-color: var(--color-warm-2);
      --button-hover-background-color: var(--color-warm-2);
      --button-hover-text-color: var(--color-light-1);
    }
    body.theme-light a.button[disabled],
    body.theme-light button[disabled],
    body.theme-light kbd[disabled] {
      --button-background-color: rgba(0 0 0 / 20%);
      --button-border-color: transparent;
      --button-text-color: var(--color-dark-3);
      --button-hover-background-color: var(--button-background-color);
      --button-hover-border-color: var(--button-border-color);
      --button-hover-text-color: var(--button-text-color);
    }
    body.theme-light .prosemirror,
    body.theme-light prose-mirror,
    body.theme-light #prosemirror-dropdown,
    body.theme-light .menu-dialog.prosemirror,
    body.theme-light#prosemirror-dropdown,
    body.theme-light.menu-dialog.prosemirror {
      --color-control-hover: #f0f0e0;
      --menu-background: rgba(0, 0, 0, 0.1);
      --dropdown-background: #d9d8c8;
      --dropdown-border: #999;
      --dialog-background: var(--dropdown-background);
      --dialog-border: transparent;
      --color-form-label-hover: var(--color-dark-1);
      --button-text-color: var(--color-text-primary);
    }
    body.theme-light .application {
      --background: url("../ui/parchment.jpg") repeat;
      --color-header-background: var(--color-dark-3);
      --color-border: var(--color-cool-4);
      --color-tabs-border: var(--color-dark-5);
      --color-fieldset-border: var(--color-light-2);
      --color-form-label: var(--color-dark-2);
      --color-form-label-hover: var(--color-dark-1);
      --color-form-hint: var(--color-dark-4);
      --color-form-hint-hover: var(--color-dark-2);
      --color-select-option-bg: var(--color-light-1);
    }
  }
  @layer specific {
    .themed.theme-light {
      --color-scheme: light;
      --color-text-emphatic: var(--color-dark-1);
      --color-text-primary: var(--color-dark-2);
      --color-text-secondary: var(--color-dark-3);
      --color-text-subtle: var(--color-dark-5);
      --color-text-selection: var(--color-light-1);
      --color-text-selection-bg: var(--color-dark-6);
      /* Context Menu */
      --content-link-background: #ddd;
      --content-link-border-color: var(--color-dark-4);
      --content-link-icon-color: var(--color-dark-6);
      --content-link-text-color: var(--color-dark-2);
      /* UI */
      --sidebar-background: url("../ui/parchment.jpg");
      --sidebar-separator: 2px groove var(--color-light-2);
      --sidebar-entry-hover-bg: rgba(255, 255, 255, 0.25);
      --sidebar-folder-color: #a19e78;
      /* AV */
      --table-background-color: none;
      --table-header-bg-color: rgba(0, 0, 0, 0.1);
      --table-header-border-color: var(--color-dark-1);
      --table-header-text-color: inherit;
      --table-row-color-even: rgba(0, 0, 0, 0.1);
      --table-row-color-odd: transparent;
      --table-row-color-highlight: var(--color-cool-5-75);
    }
    .themed.theme-light #context-menu,
    .themed.theme-light#context-menu {
      --background-color: #d9d8c8;
      --border-color: #999;
      --text-color: var(--color-text-secondary);
      --hover-text-color: var(--color-text-emphatic);
      --group-separator: #999;
      --hover-entry-border: #999;
      --hover-entry-background: #f0f0e0;
    }
    .themed.theme-light.compendium-directory,
    .themed.theme-light .compendium-directory {
      --header-mask: none;
      --header-border: 2px groove var(--color-light-2);
    }
    .themed.theme-light .ui-control,
    .themed.theme-light .placeable-hud,
    .themed.theme-light #measurement .waypoint-label {
      --control-bg-color: rgba(255, 255, 255, 0.6);
      --control-border-color: rgba(255, 255, 255, 0.8);
      --control-icon-color: var(--color-dark-2);
      --control-hover-bg-color: rgba(255, 255, 255, 0.85);
      --control-hover-border-color: rgba(255, 255, 255, 0.9);
      --control-hover-icon-color: var(--color-dark-1);
      --control-active-bg-color: rgba(255, 255, 255, 0.85);
      --control-active-border-color: var(--color-warm-2);
      --control-active-icon-color: var(--color-dark-1);
      --control-button-border-color: var(--color-warm-1);
      --control-button-hover-bg-color: var(--color-warm-2);
      --control-button-hover-border-color: var(--color-light-1);
      --toggle-bg-color: rgba(255, 255, 255, 0.6);
      --toggle-border-color: #5252d7;
      --toggle-active-bg-color: #5252d7;
      --toggle-active-border-color: #8484ff;
    }
    .themed.theme-light .ui-control:disabled,
    .themed.theme-light .placeable-hud:disabled,
    .themed.theme-light #measurement .waypoint-label:disabled {
      --control-hover-bg-color: var(--control-bg-color);
      --control-hover-border-color: var(--control-border-color);
      --control-hover-icon-color: var(--control-icon-color);
    }
    .themed.theme-light .placeable-hud,
    .themed.theme-light #measurement .waypoint-label {
      --control-icon-color: rgba(0 0 0 / 70%);
      --control-active-icon-color: rgba(0 0 0 / 70%);
      --control-hover-icon-color: #000;
      --control-active-icon-color: #000;
      --control-icon-filter: invert(1);
    }
    .themed.theme-light #hotbar {
      --slot-color: rgba(255, 255, 255, 0.6);
      --key-bg-color-empty: transparent;
      --key-bg-color-full: rgba(255, 255, 255, 0.6);
      --key-text-color: var(--color-dark-1);
      --page-control-color: rgba(255, 255, 255, 0.8);
    }
    .themed.theme-light #chat-message {
      --text-color: var(--color-dark-2);
      --placeholder-color: var(--color-dark-4);
      --background-color: rgba(255, 255, 255, 0.6);
      --border-color: rgba(255, 255, 255, 0.8);
    }
    .themed.theme-light #players {
      --background-color: rgba(255, 255, 255, 0.6);
      --border-color: rgba(255, 255, 255, 0.8);
      --player-name-idle-color: var(--color-text-subtle);
      --player-name-self-color: var(--color-text-emphatic);
      --color-rating-good: #1e7e34;
      --color-rating-fair: #cc9a06;
      --color-rating-poor: #a72a35;
    }
    .themed.theme-light #players button {
      --button-text-color: var(--color-text-emphatic);
      --button-hover-text-color: var(--button-text-color);
    }
    .themed.theme-light .combat-tracker {
      --active-input-bg-color: rgba(0, 0, 0, 0.05);
      --entry-hover-bg: rgba(255, 255, 255, 0.25);
      --entry-active-bg: rgba(255, 255, 255, 0.35);
      --token-effect-filter: invert(1);
    }
    .themed.theme-light #token-hud,
    .themed.theme-light #measurement {
      --hud-icon-filter: invert(1);
    }
    .themed.theme-light #camera-views,
    .themed.theme-light#camera-views {
      --av-background-color: rgba(255, 255, 255, 0.2);
      --av-border-color: rgba(255, 255, 255, 0.1);
    }
    .themed.theme-light input,
    .themed.theme-light select,
    .themed.theme-light textarea,
    .themed.theme-light code-mirror {
      --input-border-color: var(--color-dark-6);
      --input-box-shadow: inset 0 0 6px var(--input-background-color);
      --input-text-color: var(--color-dark-2);
      --input-focus-outline-color: var(--color-warm-2);
    }
    .themed.theme-light input:disabled,
    .themed.theme-light select:disabled,
    .themed.theme-light textarea:disabled,
    .themed.theme-light code-mirror:disabled {
      --input-background-color: rgba(0, 0, 0, 0.2);
      --input-border-color: transparent;
      --input-box-shadow: none;
      --input-text-color: var(--color-dark-3);
    }
    .themed.theme-light input,
    .themed.theme-light select,
    .themed.theme-light textarea {
      --input-background-color: rgba(0, 0, 0, 0.1);
      --input-placeholder-color: var(--color-dark-4);
    }
    .themed.theme-light input:focus,
    .themed.theme-light select:focus,
    .themed.theme-light textarea:focus {
      --input-text-color: var(--color-dark-1);
    }
    .themed.theme-light code-mirror {
      --input-background-color: var(--color-light-1);
      --input-focus-text-color: var(--color-dark-1);
      --gutter-background-color: #f5f5f5;
      --gutter-border-color: #ddd;
      --gutter-text-color: var(--color-dark-5);
      --active-line-color: #cceeff44;
      --syntax-keyword-color: #708;
      --syntax-comment-color: var(--color-dark-3);
      --syntax-operator-color: var(--input-text-color);
      --syntax-var-name-color: #00f;
      --syntax-func-name-color: var(--syntax-var-name-color);
      --syntax-method-name-color: var(--syntax-func-name-color);
      --syntax-local-var-color: #30a;
      --syntax-class-name-color: #167;
      --syntax-prop-def-color: #00c;
      --syntax-prop-name-color: var(--input-text-color);
      --syntax-boolean-color: #219;
      --syntax-number-color: #164;
      --syntax-string-color: #a11;
      --syntax-regexp-color: #e40;
      --syntax-invalid-color: #f00;
      --syntax-angle-bracket-color: var(--syntax-separator-color);
      --syntax-tag-color: #085;
      --syntax-attr-name-color: var(--syntax-prop-name-color);
      --syntax-attr-value-color: var(--syntax-string-color);
      --syntax-meta-color: var(--syntax-tag-color);
      --syntax-separator-color: #00f;
    }
    .themed.theme-light code-mirror:disabled {
      --gutter-background-color: rgba(0, 0, 0, 0.1);
      --gutter-border-color: var(--input-border-color);
      --gutter-text-color: var(--color-dark-4);
    }
    .themed.theme-light code,
    .themed.theme-light code.block {
      --color-code-bg: #cceeff44;
      --color-code-border: var(--color-dark-6);
    }
    .themed.theme-light input[type=checkbox],
    .themed.theme-light input[type=radio] {
      --checkbox-font-weight: unset;
      --checkbox-background-color: var(--color-dark-6);
      --checkbox-checked-color: var(--color-warm-1);
      --checkbox-checkmark-color: var(--color-dark-1);
    }
    .themed.theme-light input[type=checkbox]:disabled,
    .themed.theme-light input[type=radio]:disabled,
    .themed.theme-light input[type=checkbox][readonly],
    .themed.theme-light input[type=radio][readonly] {
      --checkbox-font-weight: bold;
      --checkbox-checkmark-color: transparent;
      --checkbox-disabled-color: var(--color-dark-6);
    }
    .themed.theme-light label.icon {
      --input-background-color: rgba(0, 0, 0, 0.1);
      --input-border-color: var(--color-dark-6);
      --input-text-color: var(--color-dark-2);
      --input-focus-outline-color: var(--color-warm-2);
    }
    .themed.theme-light label.icon:focus-within {
      --input-text-color: var(--color-dark-1);
    }
    .themed.theme-light label.icon:has(> input:disabled) {
      --input-background-color: rgba(0, 0, 0, 0.2);
      --input-border-color: transparent;
      --input-text-color: var(--color-dark-3);
    }
    .themed.theme-light input[readonly] {
      --input-background-color: rgba(0, 0, 0, 0.2);
      --input-border-color: transparent;
      --input-text-color: var(--color-dark-3);
    }
    .themed.theme-light a.button,
    .themed.theme-light button,
    .themed.theme-light kbd {
      --button-background-color: rgba(0 0 0 / 10%);
      --button-border-color: var(--color-dark-5);
      --button-text-color: var(--color-dark-1);
      --button-focus-outline-color: var(--color-warm-2);
      --button-hover-background-color: var(--color-warm-2);
      --button-hover-text-color: var(--color-light-1);
    }
    .themed.theme-light a.button[disabled],
    .themed.theme-light button[disabled],
    .themed.theme-light kbd[disabled] {
      --button-background-color: rgba(0 0 0 / 20%);
      --button-border-color: transparent;
      --button-text-color: var(--color-dark-3);
      --button-hover-background-color: var(--button-background-color);
      --button-hover-border-color: var(--button-border-color);
      --button-hover-text-color: var(--button-text-color);
    }
    .themed.theme-light .prosemirror,
    .themed.theme-light prose-mirror,
    .themed.theme-light #prosemirror-dropdown,
    .themed.theme-light .menu-dialog.prosemirror,
    .themed.theme-light#prosemirror-dropdown,
    .themed.theme-light.menu-dialog.prosemirror {
      --color-control-hover: #f0f0e0;
      --menu-background: rgba(0, 0, 0, 0.1);
      --dropdown-background: #d9d8c8;
      --dropdown-border: #999;
      --dialog-background: var(--dropdown-background);
      --dialog-border: transparent;
      --color-form-label-hover: var(--color-dark-1);
      --button-text-color: var(--color-text-primary);
    }
    .application.theme-light {
      --background: url("../ui/parchment.jpg") repeat;
      --color-header-background: var(--color-dark-3);
      --color-border: var(--color-cool-4);
      --color-tabs-border: var(--color-dark-5);
      --color-fieldset-border: var(--color-light-2);
      --color-form-label: var(--color-dark-2);
      --color-form-label-hover: var(--color-dark-1);
      --color-form-hint: var(--color-dark-4);
      --color-form-hint-hover: var(--color-dark-2);
      --color-select-option-bg: var(--color-light-1);
    }
    .app.theme-light .standard-form {
      --color-scheme: light;
      --color-text-emphatic: var(--color-dark-1);
      --color-text-primary: var(--color-dark-2);
      --color-text-secondary: var(--color-dark-3);
      --color-text-subtle: var(--color-dark-5);
      --color-text-selection: var(--color-light-1);
      --color-text-selection-bg: var(--color-dark-6);
      /* Context Menu */
      --content-link-background: #ddd;
      --content-link-border-color: var(--color-dark-4);
      --content-link-icon-color: var(--color-dark-6);
      --content-link-text-color: var(--color-dark-2);
      /* UI */
      --sidebar-background: url("../ui/parchment.jpg");
      --sidebar-separator: 2px groove var(--color-light-2);
      --sidebar-entry-hover-bg: rgba(255, 255, 255, 0.25);
      --sidebar-folder-color: #a19e78;
      /* AV */
      --background: url("../ui/parchment.jpg") repeat;
      --color-header-background: var(--color-dark-3);
      --color-border: var(--color-cool-4);
      --color-tabs-border: var(--color-dark-5);
      --color-fieldset-border: var(--color-light-2);
      --color-form-label: var(--color-dark-2);
      --color-form-label-hover: var(--color-dark-1);
      --color-form-hint: var(--color-dark-4);
      --color-form-hint-hover: var(--color-dark-2);
      --color-select-option-bg: var(--color-light-1);
      --table-background-color: none;
      --table-header-bg-color: rgba(0, 0, 0, 0.1);
      --table-header-border-color: var(--color-dark-1);
      --table-header-text-color: inherit;
      --table-row-color-even: rgba(0, 0, 0, 0.1);
      --table-row-color-odd: transparent;
      --table-row-color-highlight: var(--color-cool-5-75);
    }
    .app.theme-light .standard-form #context-menu,
    .app.theme-light .standard-form#context-menu {
      --background-color: #d9d8c8;
      --border-color: #999;
      --text-color: var(--color-text-secondary);
      --hover-text-color: var(--color-text-emphatic);
      --group-separator: #999;
      --hover-entry-border: #999;
      --hover-entry-background: #f0f0e0;
    }
    .app.theme-light .standard-form.compendium-directory,
    .app.theme-light .standard-form .compendium-directory {
      --header-mask: none;
      --header-border: 2px groove var(--color-light-2);
    }
    .app.theme-light .standard-form .ui-control,
    .app.theme-light .standard-form .placeable-hud,
    .app.theme-light .standard-form #measurement .waypoint-label {
      --control-bg-color: rgba(255, 255, 255, 0.6);
      --control-border-color: rgba(255, 255, 255, 0.8);
      --control-icon-color: var(--color-dark-2);
      --control-hover-bg-color: rgba(255, 255, 255, 0.85);
      --control-hover-border-color: rgba(255, 255, 255, 0.9);
      --control-hover-icon-color: var(--color-dark-1);
      --control-active-bg-color: rgba(255, 255, 255, 0.85);
      --control-active-border-color: var(--color-warm-2);
      --control-active-icon-color: var(--color-dark-1);
      --control-button-border-color: var(--color-warm-1);
      --control-button-hover-bg-color: var(--color-warm-2);
      --control-button-hover-border-color: var(--color-light-1);
      --toggle-bg-color: rgba(255, 255, 255, 0.6);
      --toggle-border-color: #5252d7;
      --toggle-active-bg-color: #5252d7;
      --toggle-active-border-color: #8484ff;
    }
    .app.theme-light .standard-form .ui-control:disabled,
    .app.theme-light .standard-form .placeable-hud:disabled,
    .app.theme-light .standard-form #measurement .waypoint-label:disabled {
      --control-hover-bg-color: var(--control-bg-color);
      --control-hover-border-color: var(--control-border-color);
      --control-hover-icon-color: var(--control-icon-color);
    }
    .app.theme-light .standard-form .placeable-hud,
    .app.theme-light .standard-form #measurement .waypoint-label {
      --control-icon-color: rgba(0 0 0 / 70%);
      --control-active-icon-color: rgba(0 0 0 / 70%);
      --control-hover-icon-color: #000;
      --control-active-icon-color: #000;
      --control-icon-filter: invert(1);
    }
    .app.theme-light .standard-form #hotbar {
      --slot-color: rgba(255, 255, 255, 0.6);
      --key-bg-color-empty: transparent;
      --key-bg-color-full: rgba(255, 255, 255, 0.6);
      --key-text-color: var(--color-dark-1);
      --page-control-color: rgba(255, 255, 255, 0.8);
    }
    .app.theme-light .standard-form #chat-message {
      --text-color: var(--color-dark-2);
      --placeholder-color: var(--color-dark-4);
      --background-color: rgba(255, 255, 255, 0.6);
      --border-color: rgba(255, 255, 255, 0.8);
    }
    .app.theme-light .standard-form #players {
      --background-color: rgba(255, 255, 255, 0.6);
      --border-color: rgba(255, 255, 255, 0.8);
      --player-name-idle-color: var(--color-text-subtle);
      --player-name-self-color: var(--color-text-emphatic);
      --color-rating-good: #1e7e34;
      --color-rating-fair: #cc9a06;
      --color-rating-poor: #a72a35;
    }
    .app.theme-light .standard-form #players button {
      --button-text-color: var(--color-text-emphatic);
      --button-hover-text-color: var(--button-text-color);
    }
    .app.theme-light .standard-form .combat-tracker {
      --active-input-bg-color: rgba(0, 0, 0, 0.05);
      --entry-hover-bg: rgba(255, 255, 255, 0.25);
      --entry-active-bg: rgba(255, 255, 255, 0.35);
      --token-effect-filter: invert(1);
    }
    .app.theme-light .standard-form #token-hud,
    .app.theme-light .standard-form #measurement {
      --hud-icon-filter: invert(1);
    }
    .app.theme-light .standard-form #camera-views,
    .app.theme-light .standard-form#camera-views {
      --av-background-color: rgba(255, 255, 255, 0.2);
      --av-border-color: rgba(255, 255, 255, 0.1);
    }
    .app.theme-light .standard-form input,
    .app.theme-light .standard-form select,
    .app.theme-light .standard-form textarea,
    .app.theme-light .standard-form code-mirror {
      --input-border-color: var(--color-dark-6);
      --input-box-shadow: inset 0 0 6px var(--input-background-color);
      --input-text-color: var(--color-dark-2);
      --input-focus-outline-color: var(--color-warm-2);
    }
    .app.theme-light .standard-form input:disabled,
    .app.theme-light .standard-form select:disabled,
    .app.theme-light .standard-form textarea:disabled,
    .app.theme-light .standard-form code-mirror:disabled {
      --input-background-color: rgba(0, 0, 0, 0.2);
      --input-border-color: transparent;
      --input-box-shadow: none;
      --input-text-color: var(--color-dark-3);
    }
    .app.theme-light .standard-form input,
    .app.theme-light .standard-form select,
    .app.theme-light .standard-form textarea {
      --input-background-color: rgba(0, 0, 0, 0.1);
      --input-placeholder-color: var(--color-dark-4);
    }
    .app.theme-light .standard-form input:focus,
    .app.theme-light .standard-form select:focus,
    .app.theme-light .standard-form textarea:focus {
      --input-text-color: var(--color-dark-1);
    }
    .app.theme-light .standard-form code-mirror {
      --input-background-color: var(--color-light-1);
      --input-focus-text-color: var(--color-dark-1);
      --gutter-background-color: #f5f5f5;
      --gutter-border-color: #ddd;
      --gutter-text-color: var(--color-dark-5);
      --active-line-color: #cceeff44;
      --syntax-keyword-color: #708;
      --syntax-comment-color: var(--color-dark-3);
      --syntax-operator-color: var(--input-text-color);
      --syntax-var-name-color: #00f;
      --syntax-func-name-color: var(--syntax-var-name-color);
      --syntax-method-name-color: var(--syntax-func-name-color);
      --syntax-local-var-color: #30a;
      --syntax-class-name-color: #167;
      --syntax-prop-def-color: #00c;
      --syntax-prop-name-color: var(--input-text-color);
      --syntax-boolean-color: #219;
      --syntax-number-color: #164;
      --syntax-string-color: #a11;
      --syntax-regexp-color: #e40;
      --syntax-invalid-color: #f00;
      --syntax-angle-bracket-color: var(--syntax-separator-color);
      --syntax-tag-color: #085;
      --syntax-attr-name-color: var(--syntax-prop-name-color);
      --syntax-attr-value-color: var(--syntax-string-color);
      --syntax-meta-color: var(--syntax-tag-color);
      --syntax-separator-color: #00f;
    }
    .app.theme-light .standard-form code-mirror:disabled {
      --gutter-background-color: rgba(0, 0, 0, 0.1);
      --gutter-border-color: var(--input-border-color);
      --gutter-text-color: var(--color-dark-4);
    }
    .app.theme-light .standard-form code,
    .app.theme-light .standard-form code.block {
      --color-code-bg: #cceeff44;
      --color-code-border: var(--color-dark-6);
    }
    .app.theme-light .standard-form input[type=checkbox],
    .app.theme-light .standard-form input[type=radio] {
      --checkbox-font-weight: unset;
      --checkbox-background-color: var(--color-dark-6);
      --checkbox-checked-color: var(--color-warm-1);
      --checkbox-checkmark-color: var(--color-dark-1);
    }
    .app.theme-light .standard-form input[type=checkbox]:disabled,
    .app.theme-light .standard-form input[type=radio]:disabled,
    .app.theme-light .standard-form input[type=checkbox][readonly],
    .app.theme-light .standard-form input[type=radio][readonly] {
      --checkbox-font-weight: bold;
      --checkbox-checkmark-color: transparent;
      --checkbox-disabled-color: var(--color-dark-6);
    }
    .app.theme-light .standard-form label.icon {
      --input-background-color: rgba(0, 0, 0, 0.1);
      --input-border-color: var(--color-dark-6);
      --input-text-color: var(--color-dark-2);
      --input-focus-outline-color: var(--color-warm-2);
    }
    .app.theme-light .standard-form label.icon:focus-within {
      --input-text-color: var(--color-dark-1);
    }
    .app.theme-light .standard-form label.icon:has(> input:disabled) {
      --input-background-color: rgba(0, 0, 0, 0.2);
      --input-border-color: transparent;
      --input-text-color: var(--color-dark-3);
    }
    .app.theme-light .standard-form input[readonly] {
      --input-background-color: rgba(0, 0, 0, 0.2);
      --input-border-color: transparent;
      --input-text-color: var(--color-dark-3);
    }
    .app.theme-light .standard-form a.button,
    .app.theme-light .standard-form button,
    .app.theme-light .standard-form kbd {
      --button-background-color: rgba(0 0 0 / 10%);
      --button-border-color: var(--color-dark-5);
      --button-text-color: var(--color-dark-1);
      --button-focus-outline-color: var(--color-warm-2);
      --button-hover-background-color: var(--color-warm-2);
      --button-hover-text-color: var(--color-light-1);
    }
    .app.theme-light .standard-form a.button[disabled],
    .app.theme-light .standard-form button[disabled],
    .app.theme-light .standard-form kbd[disabled] {
      --button-background-color: rgba(0 0 0 / 20%);
      --button-border-color: transparent;
      --button-text-color: var(--color-dark-3);
      --button-hover-background-color: var(--button-background-color);
      --button-hover-border-color: var(--button-border-color);
      --button-hover-text-color: var(--button-text-color);
    }
    .app.theme-light .standard-form .prosemirror,
    .app.theme-light .standard-form prose-mirror,
    .app.theme-light .standard-form #prosemirror-dropdown,
    .app.theme-light .standard-form .menu-dialog.prosemirror,
    .app.theme-light .standard-form#prosemirror-dropdown,
    .app.theme-light .standard-form.menu-dialog.prosemirror {
      --color-control-hover: #f0f0e0;
      --menu-background: rgba(0, 0, 0, 0.1);
      --dropdown-background: #d9d8c8;
      --dropdown-border: #999;
      --dialog-background: var(--dropdown-background);
      --dialog-border: transparent;
      --color-form-label-hover: var(--color-dark-1);
      --button-text-color: var(--color-text-primary);
    }
  }
}
/* ---------------------------------------- */
/*  Typography                              */
/* ---------------------------------------- */
@layer elements.typography {
  /* ---------------------------------------- */
  /*  Headers                                 */
  /* ---------------------------------------- */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 2rem 0 1rem;
    line-height: 1;
  }
  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-text-emphatic);
  }
  h2 {
    font-family: var(--font-h2);
    font-size: var(--font-h2-size);
    color: var(--color-text-emphatic);
  }
  h3 {
    font-family: var(--font-h3);
    font-size: var(--font-h3-size);
    color: var(--color-text-primary);
  }
  h4 {
    font-family: var(--font-h4);
    font-size: var(--font-h4-size);
    color: var(--color-text-primary);
  }
  h5 {
    font-family: var(--font-h5);
    font-size: var(--font-h5-size);
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
  }
  h6 {
    font: 500 var(--font-h6-size) var(--font-h6);
    color: var(--color-text-secondary);
    margin-bottom: 0;
  }
  /** 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-text-subtle);
  }
  span.highlight {
    color: var(--color-text-accent);
  }
  ::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;
  }
  menu {
    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 {
    cursor: var(--cursor-pointer);
  }
  a[href] {
    overflow-wrap: break-word;
    color: var(--color-text-accent);
  }
  a:hover {
    text-shadow: 0 0 8px var(--color-shadow-primary);
  }
  a[disabled] {
    pointer-events: none;
    cursor: inherit;
  }
  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 0;
    background: var(--table-background-color);
    border-spacing: 0;
    overflow: hidden;
    width: 100%;
    border-collapse: collapse;
  }
  table th,
  table td {
    padding: 0.5rem 1rem;
  }
  table tbody tr:nth-child(even) {
    background-color: var(--table-row-color-even);
  }
  table tbody tr:nth-child(odd) {
    background-color: var(--table-row-color-odd);
  }
  table thead,
  table tfoot {
    background: var(--table-header-bg-color);
    border: 1px solid var(--table-header-border-color);
    color: var(--table-header-text-color);
    font-weight: bold;
  }
  table thead td,
  table tfoot td {
    line-height: 1.5;
  }
  table thead {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    text-align: left;
  }
  table tfoot {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  /** Embedded Roll Tables */
  .roll-table-embed th:first-child,
  .roll-table-embed td:first-child {
    padding: 0.5rem;
    text-align: center;
  }
  .roll-table-embed td > h4 {
    margin: 0.5rem 0;
    font-weight: bold;
    font-family: var(--font-body);
  }
  /* ---------------------------------------- */
  /*  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%);
  }
  /* ---------------------------------------- */
  /*  Inline Code and Code Blocks             */
  /* ---------------------------------------- */
  p code,
  li code,
  span code,
  code.inline {
    display: inline-block;
    padding: 1px 0.25rem;
    margin: -1px 0;
    word-break: keep-all;
    white-space: nowrap;
  }
  h1 code,
  h2 code,
  h3 code,
  h4 code,
  h5 code,
  h6 code {
    display: inline;
    font-size: 0.75em;
    padding: 0.25em;
  }
  code,
  code.block {
    display: block;
    padding: 0.5rem;
    margin: initial;
    color: var(--color-text-primary);
    background: var(--color-code-bg);
    border: 1px solid var(--color-code-border);
    border-radius: 3px;
    user-select: text;
    cursor: var(--cursor-text);
    word-break: normal;
    white-space: pre-wrap;
  }
  span.reference {
    flex: none;
    display: inline-block;
    padding: 1px 4px;
    margin: -1px 0;
    font-size: var(--font-size-14);
    background: #282e33;
    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-text-emphatic);
    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=datetime-local],
  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;
    box-shadow: var(--input-box-shadow);
    outline: 1px solid transparent;
    font-family: inherit;
    font-size: inherit;
    color: var(--input-text-color);
    user-select: text;
    transition: outline-color 0.5s;
    cursor: var(--cursor-text);
  }
  input[type=text]:focus,
  input[type=number]:focus,
  input[type=password]:focus,
  input[type=date]:focus,
  input[type=time]:focus,
  input[type=datetime-local]:focus,
  input[type=search]:focus,
  input[type=file]:focus,
  select:focus {
    outline: 2px solid var(--input-focus-outline-color);
    outline-offset: -2px;
  }
  input[type=text]:disabled,
  input[type=number]:disabled,
  input[type=password]:disabled,
  input[type=date]:disabled,
  input[type=time]:disabled,
  input[type=datetime-local]:disabled,
  input[type=search]:disabled,
  input[type=file]:disabled,
  select:disabled {
    cursor: inherit;
    opacity: 1;
  }
  select {
    box-shadow: none;
    user-select: none;
    cursor: var(--cursor-pointer);
  }
  select option,
  select optgroup {
    font-family: inherit;
    background: var(--color-select-option-bg);
  }
  /** Placeholder Text */
  ::placeholder {
    color: var(--input-placeholder-color);
  }
  /** Font Awesome icon as placeholder text */
  input.placeholder-fa-solid::placeholder {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
  }
  /** 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: var(--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: var(--cursor-pointer);
    transition: 0.5s;
  }
  label.hint > i:hover {
    color: var(--color-warm-1);
  }
  /* ---------------------------------------- */
  /*  Checkboxes                              */
  /* ---------------------------------------- */
  input[type="checkbox"],
  input[type="radio"] {
    --checkbox-size: var(--font-size-20);
    cursor: var(--cursor-pointer);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }
  input[type="checkbox"]:focus,
  input[type="radio"]:focus {
    color: inherit;
    outline: none;
  }
  input[type="checkbox"]:focus-visible::before,
  input[type="radio"]:focus-visible::before {
    outline: 2px solid var(--input-focus-outline-color);
    outline-offset: -2px;
  }
  input[type="checkbox"]:checked:focus-visible::before,
  input[type="radio"]:checked:focus-visible::before {
    outline: 2px solid var(--input-focus-outline-color);
    outline-offset: -2px;
  }
  input[type="checkbox"]::before,
  input[type="radio"]::before,
  input[type="checkbox"]::after,
  input[type="radio"]::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,
  input[type="radio"]::before {
    font-family: var(--font-awesome);
    font-weight: var(--checkbox-font-weight);
    color: var(--checkbox-background-color);
    outline: 1px solid transparent;
    transition: outline-color 0.5s;
  }
  input[type="checkbox"]:checked,
  input[type="radio"]:checked {
    position: relative;
  }
  input[type="checkbox"]:checked::before,
  input[type="radio"]:checked::before,
  input[type="checkbox"]:checked::after,
  input[type="radio"]:checked::after {
    font-family: var(--font-awesome-duotone);
  }
  input[type="checkbox"]:checked::after,
  input[type="radio"]:checked::after {
    color: var(--checkbox-checked-color);
  }
  input[type="checkbox"]:checked::before,
  input[type="radio"]:checked::before {
    color: var(--checkbox-checkmark-color);
    position: absolute;
  }
  input[type="checkbox"]:disabled,
  input[type="radio"]:disabled,
  input[type="checkbox"][readonly],
  input[type="radio"][readonly] {
    --checkbox-background-color: var(--checkbox-disabled-color);
    --checkbox-checked-color: var(--checkbox-disabled-color);
    cursor: inherit;
  }
  input[type="checkbox"][readonly],
  input[type="radio"][readonly] {
    pointer-events: none;
  }
  input[type="checkbox"]::before {
    content: "\f0c8";
  }
  input[type="checkbox"]:checked::before {
    content: "\f14a";
  }
  input[type="checkbox"]:checked::after {
    content: "\f14a\f14a";
  }
  input[type="radio"]::before {
    content: "\f111";
  }
  input[type="radio"]:checked::before {
    content: "\f192";
  }
  input[type="radio"]:checked::after {
    content: "\f192\f192";
  }
  /** Labeled Checkboxes and Radio Buttons */
  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],
  label.checkbox > input[type=radio] {
    --checkbox-size: var(--font-size-16);
    flex: none;
  }
  /* Text Areas */
  textarea {
    --color-text-selection-bg: var(--color-cool-3);
    min-height: 60px;
    padding: 0.25rem 0.5rem;
    background: var(--input-background-color);
    border: 1px solid var(--input-border-color);
    border-radius: 4px;
    box-shadow: var(--input-box-shadow);
    font-family: var(--font-monospace);
    font-size: var(--font-size-14);
    color: var(--input-text-color);
    user-select: text;
    cursor: var(--cursor-text);
    resize: vertical;
  }
  textarea:focus {
    outline: 2px solid var(--input-focus-outline-color);
    outline-offset: -2px;
  }
  textarea:disabled {
    cursor: inherit;
  }
  textarea:read-only {
    color: var(--color-light-4);
    box-shadow: none;
  }
  textarea::placeholder {
    color: var(--input-placeholder-color);
  }
  /* ---------------------------------------- */
  /*  Range Inputs                            */
  /* ---------------------------------------- */
  input[type=range] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    height: var(--input-height);
    margin: 0;
    width: 100%;
    border-radius: 4px;
  }
  input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: var(--range-track-color);
    border: 1px solid var(--range-track-border-color);
    border-radius: 2px;
    cursor: var(--cursor-pointer);
  }
  input[type=range]::-moz-range-track {
    width: 100%;
    height: 4px;
    background: var(--range-track-color);
    border: 1px solid var(--range-track-border-color);
    border-radius: 2px;
    cursor: var(--cursor-pointer);
  }
  input[type=range]::-webkit-slider-thumb {
    cursor: var(--cursor-pointer);
    appearance: none;
    -webkit-appearance: none;
    height: 12px;
    width: 12px;
    margin-top: -5px;
    background: var(--range-thumb-background-color);
    border: 1px solid var(--range-thumb-border-color);
    border-radius: 4px;
  }
  input[type=range]::-moz-range-thumb {
    cursor: var(--cursor-pointer);
    appearance: none;
    -webkit-appearance: none;
    height: 12px;
    width: 12px;
    margin-top: -5px;
    background: var(--range-thumb-background-color);
    border: 1px solid var(--range-thumb-border-color);
    border-radius: 4px;
  }
  input[type=range]:disabled,
  input[type=range][readonly] {
    cursor: inherit;
    opacity: 0.33;
    filter: grayscale(1);
  }
  input[type=range]:disabled::-webkit-slider-runnable-track,
  input[type=range][readonly]::-webkit-slider-runnable-track {
    cursor: inherit;
  }
  input[type=range]:disabled::-moz-range-track,
  input[type=range][readonly]::-moz-range-track {
    cursor: inherit;
  }
  input[type=range]:disabled::-webkit-slider-thumb,
  input[type=range][readonly]::-webkit-slider-thumb {
    cursor: inherit;
  }
  input[type=range]:disabled::-moz-range-thumb,
  input[type=range][readonly]::-moz-range-thumb {
    cursor: inherit;
  }
  input[type=range][readonly] {
    pointer-events: none;
  }
  input[type=range]:focus {
    outline: none;
  }
  /* ---------------------------------------- */
  /*  Buttons                                 */
  /* ---------------------------------------- */
  a.button,
  button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--button-size);
    min-height: var(--button-size);
    gap: 0.25rem;
    padding: 0 0.5rem;
    background: var(--button-background-color);
    border: 1px solid var(--button-border-color);
    border-radius: 4px;
    color: var(--button-text-color);
    font-family: var(--font-sans);
    font-size: var(--font-size-14);
    line-height: normal;
    text-decoration: none;
    cursor: var(--cursor-pointer);
    transition: 0.5s;
  }
  a.button > *,
  button > * {
    pointer-events: none;
  }
  a.button:disabled,
  button:disabled {
    cursor: inherit;
  }
  a.button:hover,
  button:hover {
    background: var(--button-hover-background-color);
    color: var(--button-hover-text-color);
    border-color: var(--button-hover-border-color);
  }
  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.active,
  button.active {
    outline: 1px solid var(--button-focus-outline-color);
    box-shadow: 0 0 4px var(--button-focus-outline-color);
  }
  /** Bright Buttons */
  button.bright,
  a.button.bright {
    text-transform: uppercase;
  }
}
/* ---------------------------------------- */
/*  Custom Elements                         */
/* ---------------------------------------- */
@layer elements.custom {
  .ͼ1.cm-focused {
    outline: 1px dotted #212121;
  }
  .ͼ1 {
    position: relative !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
  }
  .ͼ1 .cm-scroller {
    display: flex !important;
    align-items: flex-start !important;
    font-family: monospace;
    line-height: 1.4;
    height: 100%;
    overflow-x: auto;
    position: relative;
    z-index: 0;
    overflow-anchor: none;
  }
  .ͼ1 .cm-content[contenteditable="true"] {
    -webkit-user-modify: read-write-plaintext-only;
  }
  .ͼ1 .cm-content {
    margin: 0;
    flex-grow: 2;
    flex-shrink: 0;
    display: block;
    white-space: pre;
    word-wrap: normal;
    box-sizing: border-box;
    min-height: 100%;
    padding: 4px 0;
    outline: none;
  }
  .ͼ1 .cm-lineWrapping {
    white-space: pre-wrap;
    white-space: break-spaces;
    word-break: break-word;
    overflow-wrap: anywhere;
    flex-shrink: 1;
  }
  .ͼ2 .cm-content {
    caret-color: black;
  }
  .ͼ3 .cm-content {
    caret-color: white;
  }
  .ͼ1 .cm-line {
    display: block;
    padding: 0 2px 0 6px;
  }
  .ͼ1 .cm-layer > * {
    position: absolute;
  }
  .ͼ1 .cm-layer {
    position: absolute;
    left: 0;
    top: 0;
    contain: size style;
  }
  .ͼ2 .cm-selectionBackground {
    background: #d9d9d9;
  }
  .ͼ3 .cm-selectionBackground {
    background: #222;
  }
  .ͼ2.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground {
    background: #d7d4f0;
  }
  .ͼ3.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground {
    background: #233;
  }
  .ͼ1 .cm-cursorLayer {
    pointer-events: none;
  }
  .ͼ1.cm-focused > .cm-scroller > .cm-cursorLayer {
    animation: steps(1) cm-blink 1.2s infinite;
  }
  @keyframes cm-blink {
    50% {
      opacity: 0;
    }
  }
  @keyframes cm-blink2 {
    50% {
      opacity: 0;
    }
  }
  .ͼ1 .cm-cursor,
  .ͼ1 .cm-dropCursor {
    border-left: 1.2px solid black;
    margin-left: -0.6px;
    pointer-events: none;
  }
  .ͼ1 .cm-cursor {
    display: none;
  }
  .ͼ3 .cm-cursor {
    border-left-color: #444;
  }
  .ͼ1 .cm-dropCursor {
    position: absolute;
  }
  .ͼ1.cm-focused > .cm-scroller > .cm-cursorLayer .cm-cursor {
    display: block;
  }
  .ͼ1 .cm-iso {
    unicode-bidi: isolate;
  }
  .ͼ1 .cm-announced {
    position: fixed;
    top: -10000px;
  }
  @media print {
    .ͼ1 .cm-announced {
      display: none;
    }
  }
  .ͼ2 .cm-activeLine {
    background-color: #cceeff44;
  }
  .ͼ3 .cm-activeLine {
    background-color: #99eeff33;
  }
  .ͼ2 .cm-specialChar {
    color: red;
  }
  .ͼ3 .cm-specialChar {
    color: #f78;
  }
  .ͼ1 .cm-gutters {
    flex-shrink: 0;
    display: flex;
    height: 100%;
    box-sizing: border-box;
    inset-inline-start: 0;
    z-index: 200;
  }
  .ͼ2 .cm-gutters {
    background-color: #f5f5f5;
    color: #6c6c6c;
    border-right: 1px solid #ddd;
  }
  .ͼ3 .cm-gutters {
    background-color: #333338;
    color: #ccc;
  }
  .ͼ1 .cm-gutter {
    display: flex !important;
    flex-direction: column;
    flex-shrink: 0;
    box-sizing: border-box;
    min-height: 100%;
    overflow: hidden;
  }
  .ͼ1 .cm-gutterElement {
    box-sizing: border-box;
  }
  .ͼ1 .cm-lineNumbers .cm-gutterElement {
    padding: 0 3px 0 5px;
    min-width: 20px;
    text-align: right;
    white-space: nowrap;
  }
  .ͼ2 .cm-activeLineGutter {
    background-color: #e2f2ff;
  }
  .ͼ3 .cm-activeLineGutter {
    background-color: #222227;
  }
  .ͼ1 .cm-panels {
    box-sizing: border-box;
    position: sticky;
    left: 0;
    right: 0;
    z-index: 300;
  }
  .ͼ2 .cm-panels {
    background-color: #f5f5f5;
    color: black;
  }
  .ͼ2 .cm-panels-top {
    border-bottom: 1px solid #ddd;
  }
  .ͼ2 .cm-panels-bottom {
    border-top: 1px solid #ddd;
  }
  .ͼ3 .cm-panels {
    background-color: #333338;
    color: white;
  }
  .ͼ1 .cm-tab {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
  }
  .ͼ1 .cm-widgetBuffer {
    vertical-align: text-top;
    height: 1em;
    width: 0;
    display: inline;
  }
  .ͼ1 .cm-placeholder {
    color: #888;
    display: inline-block;
    vertical-align: top;
  }
  .ͼ1 .cm-highlightSpace {
    background-image: radial-gradient(circle at 50% 55%, #aaa 20%, transparent 5%);
    background-position: center;
  }
  .ͼ1 .cm-highlightTab {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="20"><path stroke="%23888" stroke-width="1" fill="none" d="M1 10H196L190 5M190 15L196 10M197 4L197 16"/></svg>');
    background-size: auto 100%;
    background-position: right 90%;
    background-repeat: no-repeat;
  }
  .ͼ1 .cm-trailingSpace {
    background-color: #ff332255;
  }
  .ͼ1 .cm-button {
    vertical-align: middle;
    color: inherit;
    font-size: 70%;
    padding: 0.2em 1em;
    border-radius: 1px;
  }
  .ͼ2 .cm-button:active {
    background-image: linear-gradient(#b4b4b4, #d0d3d6);
  }
  .ͼ2 .cm-button {
    background-image: linear-gradient(#eff1f5, #d9d9df);
    border: 1px solid #888;
  }
  .ͼ3 .cm-button:active {
    background-image: linear-gradient(#111, #333);
  }
  .ͼ3 .cm-button {
    background-image: linear-gradient(#393939, #111);
    border: 1px solid #888;
  }
  .ͼ1 .cm-textfield {
    vertical-align: middle;
    color: inherit;
    font-size: 70%;
    border: 1px solid silver;
    padding: 0.2em 0.5em;
  }
  .ͼ2 .cm-textfield {
    background-color: white;
  }
  .ͼ3 .cm-textfield {
    border: 1px solid #555;
    background-color: inherit;
  }
  .ͼ1 .cm-diagnostic {
    padding: 3px 6px 3px 8px;
    margin-left: -1px;
    display: block;
    white-space: pre-wrap;
  }
  .ͼ1 .cm-diagnostic-error {
    border-left: 5px solid #d11;
  }
  .ͼ1 .cm-diagnostic-warning {
    border-left: 5px solid orange;
  }
  .ͼ1 .cm-diagnostic-info {
    border-left: 5px solid #999;
  }
  .ͼ1 .cm-diagnostic-hint {
    border-left: 5px solid #66d;
  }
  .ͼ1 .cm-diagnosticAction {
    font: inherit;
    border: none;
    padding: 2px 4px;
    background-color: #444;
    color: white;
    border-radius: 3px;
    margin-left: 8px;
    cursor: var(--cursor-pointer);
  }
  .ͼ1 .cm-diagnosticSource {
    font-size: 70%;
    opacity: 0.7;
  }
  .ͼ1 .cm-lintRange {
    background-position: left bottom;
    background-repeat: repeat-x;
    padding-bottom: 0.7px;
  }
  .ͼ1 .cm-lintRange-error {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="3">%3Cpath%20d%3D%22m0%202.5%20l2%20-1.5%20l1%200%20l2%201.5%20l1%200%22%20stroke%3D%22%23d11%22%20fill%3D%22none%22%20stroke-width%3D%22.7%22%2F%3E</svg>');
  }
  .ͼ1 .cm-lintRange-warning {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="3">%3Cpath%20d%3D%22m0%202.5%20l2%20-1.5%20l1%200%20l2%201.5%20l1%200%22%20stroke%3D%22orange%22%20fill%3D%22none%22%20stroke-width%3D%22.7%22%2F%3E</svg>');
  }
  .ͼ1 .cm-lintRange-info {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="3">%3Cpath%20d%3D%22m0%202.5%20l2%20-1.5%20l1%200%20l2%201.5%20l1%200%22%20stroke%3D%22%23999%22%20fill%3D%22none%22%20stroke-width%3D%22.7%22%2F%3E</svg>');
  }
  .ͼ1 .cm-lintRange-hint {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="3">%3Cpath%20d%3D%22m0%202.5%20l2%20-1.5%20l1%200%20l2%201.5%20l1%200%22%20stroke%3D%22%2366d%22%20fill%3D%22none%22%20stroke-width%3D%22.7%22%2F%3E</svg>');
  }
  .ͼ1 .cm-lintRange-active {
    background-color: #ffdd9980;
  }
  .ͼ1 .cm-tooltip-lint {
    padding: 0;
    margin: 0;
  }
  .ͼ1 .cm-lintPoint:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -2px;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 4px solid #d11;
  }
  .ͼ1 .cm-lintPoint {
    position: relative;
  }
  .ͼ1 .cm-lintPoint-warning:after {
    border-bottom-color: orange;
  }
  .ͼ1 .cm-lintPoint-info:after {
    border-bottom-color: #999;
  }
  .ͼ1 .cm-lintPoint-hint:after {
    border-bottom-color: #66d;
  }
  .ͼ1 .cm-panel.cm-panel-lint ul [aria-selected] u {
    text-decoration: underline;
  }
  .ͼ1 .cm-panel.cm-panel-lint ul [aria-selected] {
    background-color: #ddd;
  }
  .ͼ1 .cm-panel.cm-panel-lint ul:focus [aria-selected] {
    background: #bdf;
    background-color: Highlight;
    color: white;
    color: HighlightText;
  }
  .ͼ1 .cm-panel.cm-panel-lint ul u {
    text-decoration: none;
  }
  .ͼ1 .cm-panel.cm-panel-lint ul {
    max-height: 100px;
    overflow-y: auto;
    padding: 0;
    margin: 0;
  }
  .ͼ1 .cm-panel.cm-panel-lint [name="close"] {
    position: absolute;
    top: 0;
    right: 2px;
    background: inherit;
    border: none;
    font: inherit;
    padding: 0;
    margin: 0;
  }
  .ͼ1 .cm-panel.cm-panel-lint {
    position: relative;
  }
  .ͼ1 .cm-gutter-lint .cm-gutterElement {
    padding: 0.2em;
  }
  .ͼ1 .cm-gutter-lint {
    width: 1.4em;
  }
  .ͼ1 .cm-lint-marker {
    width: 1em;
    height: 1em;
  }
  .ͼ1 .cm-lint-marker-info {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">%3Cpath%20fill%3D%22%23aaf%22%20stroke%3D%22%2377e%22%20stroke-width%3D%226%22%20stroke-linejoin%3D%22round%22%20d%3D%22M5%205L35%205L35%2035L5%2035Z%22%2F%3E</svg>');
  }
  .ͼ1 .cm-lint-marker-warning {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">%3Cpath%20fill%3D%22%23fe8%22%20stroke%3D%22%23fd7%22%20stroke-width%3D%226%22%20stroke-linejoin%3D%22round%22%20d%3D%22M20%206L37%2035L3%2035Z%22%2F%3E</svg>');
  }
  .ͼ1 .cm-lint-marker-error {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2215%22%20fill%3D%22%23f87%22%20stroke%3D%22%23f43%22%20stroke-width%3D%226%22%2F%3E</svg>');
  }
  .ͼ1 .cm-selectionMatch {
    background-color: #99ff7780;
  }
  .ͼ1 .cm-searchMatch .cm-selectionMatch {
    background-color: transparent;
  }
  .ͼ1 .cm-tooltip.cm-tooltip-autocomplete > ul > li,
  .ͼ1 .cm-tooltip.cm-tooltip-autocomplete > ul > completion-section {
    padding: 1px 3px;
    line-height: 1.2;
  }
  .ͼ1 .cm-tooltip.cm-tooltip-autocomplete > ul > li {
    overflow-x: hidden;
    text-overflow: ellipsis;
    cursor: var(--cursor-pointer);
  }
  .ͼ1 .cm-tooltip.cm-tooltip-autocomplete > ul > completion-section {
    display: list-item;
    border-bottom: 1px solid silver;
    padding-left: 0.5em;
    opacity: 0.7;
  }
  .ͼ1 .cm-tooltip.cm-tooltip-autocomplete > ul {
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden auto;
    max-width: 700px;
    max-width: min(700px, 95vw);
    min-width: 250px;
    max-height: 10em;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .ͼ2 .cm-tooltip-autocomplete ul li[aria-selected] {
    background: #17c;
    color: white;
  }
  .ͼ2 .cm-tooltip-autocomplete-disabled ul li[aria-selected] {
    background: #777;
  }
  .ͼ3 .cm-tooltip-autocomplete ul li[aria-selected] {
    background: #347;
    color: white;
  }
  .ͼ3 .cm-tooltip-autocomplete-disabled ul li[aria-selected] {
    background: #444;
  }
  .ͼ1 .cm-completionListIncompleteTop:before,
  .ͼ1 .cm-completionListIncompleteBottom:after {
    content: "···";
    opacity: 0.5;
    display: block;
    text-align: center;
  }
  .ͼ1 .cm-tooltip.cm-completionInfo {
    position: absolute;
    padding: 3px 9px;
    width: max-content;
    max-width: 400px;
    box-sizing: border-box;
    white-space: pre-line;
  }
  .ͼ1 .cm-completionInfo.cm-completionInfo-left {
    right: 100%;
  }
  .ͼ1 .cm-completionInfo.cm-completionInfo-right {
    left: 100%;
  }
  .ͼ1 .cm-completionInfo.cm-completionInfo-left-narrow {
    right: 30px;
  }
  .ͼ1 .cm-completionInfo.cm-completionInfo-right-narrow {
    left: 30px;
  }
  .ͼ2 .cm-snippetField {
    background-color: #00000022;
  }
  .ͼ3 .cm-snippetField {
    background-color: #ffffff22;
  }
  .ͼ1 .cm-snippetFieldPosition {
    vertical-align: text-top;
    width: 0;
    height: 1.15em;
    display: inline-block;
    margin: 0 -0.7px -0.7em;
    border-left: 1.4px dotted #888;
  }
  .ͼ1 .cm-completionMatchedText {
    text-decoration: underline;
  }
  .ͼ1 .cm-completionDetail {
    margin-left: 0.5em;
    font-style: italic;
  }
  .ͼ1 .cm-completionIcon {
    font-size: 90%;
    width: 0.8em;
    display: inline-block;
    text-align: center;
    padding-right: 0.6em;
    opacity: 0.6;
    box-sizing: content-box;
  }
  .ͼ1 .cm-completionIcon-function:after,
  .ͼ1 .cm-completionIcon-method:after {
    content: "ƒ";
  }
  .ͼ1 .cm-completionIcon-class:after {
    content: "○";
  }
  .ͼ1 .cm-completionIcon-interface:after {
    content: "◌";
  }
  .ͼ1 .cm-completionIcon-variable:after {
    content: "𝑥";
  }
  .ͼ1 .cm-completionIcon-constant:after {
    content: "𝐶";
  }
  .ͼ1 .cm-completionIcon-type:after {
    content: "𝑡";
  }
  .ͼ1 .cm-completionIcon-enum:after {
    content: "∪";
  }
  .ͼ1 .cm-completionIcon-property:after {
    content: "□";
  }
  .ͼ1 .cm-completionIcon-keyword:after {
    content: "🔑︎";
  }
  .ͼ1 .cm-completionIcon-namespace:after {
    content: "▢";
  }
  .ͼ1 .cm-completionIcon-text:after {
    content: "abc";
    font-size: 50%;
    vertical-align: middle;
  }
  .ͼ1 .cm-tooltip {
    z-index: 100;
    box-sizing: border-box;
  }
  .ͼ2 .cm-tooltip {
    border: 1px solid #bbb;
    background-color: #f5f5f5;
  }
  .ͼ2 .cm-tooltip-section:not(:first-child) {
    border-top: 1px solid #bbb;
  }
  .ͼ3 .cm-tooltip {
    background-color: #333338;
    color: white;
  }
  .ͼ1 .cm-tooltip-arrow:before,
  .ͼ1 .cm-tooltip-arrow:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
  }
  .ͼ1 .cm-tooltip-above .cm-tooltip-arrow:before {
    border-top: 7px solid #bbb;
  }
  .ͼ1 .cm-tooltip-above .cm-tooltip-arrow:after {
    border-top: 7px solid #f5f5f5;
    bottom: 1px;
  }
  .ͼ1 .cm-tooltip-above .cm-tooltip-arrow {
    bottom: -7px;
  }
  .ͼ1 .cm-tooltip-below .cm-tooltip-arrow:before {
    border-bottom: 7px solid #bbb;
  }
  .ͼ1 .cm-tooltip-below .cm-tooltip-arrow:after {
    border-bottom: 7px solid #f5f5f5;
    top: 1px;
  }
  .ͼ1 .cm-tooltip-below .cm-tooltip-arrow {
    top: -7px;
  }
  .ͼ1 .cm-tooltip-arrow {
    height: 7px;
    width: 14px;
    position: absolute;
    z-index: -1;
    overflow: hidden;
  }
  .ͼ3 .cm-tooltip .cm-tooltip-arrow:before {
    border-top-color: #333338;
    border-bottom-color: #333338;
  }
  .ͼ3 .cm-tooltip .cm-tooltip-arrow:after {
    border-top-color: transparent;
    border-bottom-color: transparent;
  }
  .ͼ1.cm-focused .cm-matchingBracket {
    background-color: #328c8252;
  }
  .ͼ1.cm-focused .cm-nonmatchingBracket {
    background-color: #bb555544;
  }
  .ͼ1 .cm-foldPlaceholder {
    background-color: #eee;
    border: 1px solid #ddd;
    color: #888;
    border-radius: 0.2em;
    margin: 0 1px;
    padding: 0 1px;
    cursor: var(--cursor-pointer);
  }
  .ͼ1 .cm-foldGutter span {
    padding: 0 1px;
    cursor: var(--cursor-pointer);
  }
  .ͼ4 .cm-line ::selection,
  .ͼ4 .cm-line::selection {
    background-color: transparent !important;
  }
  .ͼ4 .cm-line {
    caret-color: transparent !important;
  }
  .ͼ4 .cm-content :focus::selection,
  .ͼ4 .cm-content :focus ::selection {
    background-color: Highlight !important;
  }
  .ͼ4 .cm-content :focus {
    caret-color: initial !important;
  }
  .ͼ4 .cm-content {
    caret-color: transparent !important;
  }
  /* ----------------------------------------- */
  /*  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-dark-3);
    border-radius: 4px;
  }
  :is(document-tags, string-tags, multi-select):is(:disabled, [readonly]) .tags.input-element-tags .tag .remove {
    display: none;
  }
  .tags.input-element-tags:empty {
    display: none;
  }
  /* ----------------------------------------- */
  /*  CodeMirror Element                       */
  /* ----------------------------------------- */
  code-mirror {
    background: var(--input-background-color);
    border-radius: 4px;
    height: 100%;
    min-height: 150px;
    outline: 1px solid transparent;
    overflow: hidden;
    transition: outline-color 0.5s;
  }
  code-mirror:disabled .cm-editor {
    --color-scrollbar-track: var(--input-background-color);
    background-color: transparent;
    cursor: var(--cursor-default);
  }
  code-mirror:disabled .cm-editor .cm-content {
    background-color: var(--input-background-color);
  }
  code-mirror:disabled .cm-editor .cm-activeLineGutter,
  code-mirror:disabled .cm-editor .cm-activeLine {
    background-color: transparent;
  }
  code-mirror:has(.cm-content:focus) {
    --input-text-color: var(--input-focus-text-color);
  }
  code-mirror:has(.cm-content:focus)::after {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    top: -100%;
    margin-bottom: -100%;
    z-index: 999999;
    pointer-events: none;
    content: "";
    outline: 2px solid var(--input-focus-outline-color);
    outline-offset: -2px;
  }
  code-mirror .cm-editor {
    background: var(--input-background-color);
    height: inherit;
    cursor: var(--cursor-text);
  }
  code-mirror .cm-editor .cm-scroller {
    border: 1px solid var(--input-border-color);
    border-radius: 4px;
    overflow-y: auto;
  }
  code-mirror .cm-editor .cm-gutters {
    color: var(--gutter-text-color);
    background-color: var(--gutter-background-color);
    border-color: var(--gutter-border-color);
  }
  code-mirror .cm-editor .cm-content {
    color: var(--input-text-color);
  }
  code-mirror .cm-editor .cm-line::selection,
  code-mirror .cm-editor .cm-line ::selection {
    --color-text-selection: initial;
  }
  code-mirror .cm-editor .cm-activeLineGutter,
  code-mirror .cm-editor .cm-activeLine {
    background-color: var(--active-line-color);
  }
  code-mirror .cm-editor .cm-cursor {
    border-left: 2px solid var(--input-text-color);
  }
  code-mirror .cm-editor > .cm-scroller > .cm-selectionLayer .cm-selectionBackground {
    background-color: var(--color-text-selection-bg);
  }
  code-mirror .cm-editor.cm-focused .cm-line {
    color: var(--input-focus-text-color);
  }
  code-mirror .cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground {
    background-color: var(--color-text-selection-bg);
  }
  code-mirror .cm-editor .cm-tooltip {
    color: var(--tooltip-text-color);
    background: var(--tooltip-background-color);
  }
  code-mirror .stx-keyword {
    color: var(--syntax-keyword-color);
  }
  code-mirror .stx-comment {
    color: var(--syntax-comment-color);
  }
  code-mirror .stx-operator {
    color: var(--syntax-operator-color);
  }
  code-mirror .stx-brace {
    color: var(--syntax-brace-color);
  }
  code-mirror .stx-parenthesis {
    color: var(--syntax-parenthesis-color);
  }
  code-mirror .stx-square-bracket {
    color: var(--syntax-square-bracket-color);
  }
  code-mirror .stx-separator {
    color: var(--syntax-separator-color);
  }
  code-mirror .stx-literal {
    color: var(--syntax-literal-color);
  }
  code-mirror .stx-var-name {
    color: var(--syntax-var-name-color);
  }
  code-mirror .stx-local-var {
    color: var(--syntax-local-var-color);
  }
  code-mirror .stx-func-name {
    color: var(--syntax-func-name-color);
  }
  code-mirror .stx-method-name {
    color: var(--syntax-method-name-color);
  }
  code-mirror .stx-class-name {
    color: var(--syntax-class-name-color);
  }
  code-mirror .stx-prop-name {
    color: var(--syntax-prop-name-color);
  }
  code-mirror .stx-prop-def {
    color: var(--syntax-prop-def-color);
  }
  code-mirror .stx-boolean {
    color: var(--syntax-boolean-color);
  }
  code-mirror .stx-number {
    color: var(--syntax-number-color);
  }
  code-mirror .stx-string {
    color: var(--syntax-string-color);
  }
  code-mirror .stx-regexp {
    color: var(--syntax-regexp-color);
  }
  code-mirror .stx-angle-bracket {
    color: var(--syntax-angle-bracket-color);
  }
  code-mirror .stx-tag-name {
    color: var(--syntax-tag-color);
  }
  code-mirror .stx-attr-name {
    color: var(--syntax-prop-def-color);
  }
  code-mirror .stx-attr-value {
    color: var(--syntax-string-color);
  }
  code-mirror[language=json] .stx-prop-name {
    color: var(--syntax-prop-name-color);
  }
  code-mirror[language=markdown] .stx-meta {
    color: var(--syntax-meta-color);
  }
  code-mirror :not(.stx-meta).stx-heading {
    font-weight: 900;
    text-decoration: underline;
  }
  code-mirror :not(.stx-meta).stx-link {
    color: var(--syntax-link-color);
    text-decoration: underline;
  }
  code-mirror :not(.stx-meta).stx-link.stx-url {
    color: var(--syntax-link-url-color);
  }
  code-mirror :not(.stx-meta).stx-emphasis {
    font-style: italic;
  }
  code-mirror :not(.stx-meta).stx-strong {
    font-weight: 600;
  }
  code-mirror :not(.stx-meta).stx-strikethrough {
    text-decoration: line-through;
  }
  code-mirror :not(.stx-meta).stx-separator {
    color: var(--syntax-separator-color);
    font-weight: 700;
  }
  code-mirror :not(.stx-meta).stx-list.stx-processing-instruction:first-of-type {
    font-weight: 700;
    padding-left: 0.5em;
  }
  code-mirror :not(.stx-meta).stx-blockquote {
    color: var(--syntax-blockquote-color);
    font-style: italic;
  }
  code-mirror :not(.stx-meta).stx-codeblock {
    background-color: var(--stx-code-bg-color);
  }
  /* ----------------------------------------- */
  /*  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;
    margin: -4px;
    background: transparent;
    border: none;
    cursor: var(--cursor-pointer);
  }
  color-picker > input[type=color]:disabled {
    cursor: var(--cursor-default);
  }
  /* ----------------------------------------- */
  /* Hue Slider                                */
  /* ----------------------------------------- */
  hue-slider > input,
  hue-slider > input:focus {
    --color-thumb: #ffffff;
    --range-thumb-border-color: var(--input-border-color);
    --gradient: linear-gradient(to right, #ff0000 0%, #ffff00 16.667%, #00ff00 33.333%, #00ffff 50%, #0000ff 66.667%, #ff00ff 83.333%, #ff0000 100%);
    height: 1.6em;
    width: 100%;
    padding: 0;
    border: none;
    outline: none;
  }
  hue-slider > input::-webkit-slider-thumb,
  hue-slider > input:focus::-webkit-slider-thumb {
    -webkit-appearance: none;
    cursor: var(--cursor-pointer);
    height: 18px;
    width: 18px;
    margin-top: -4px;
    background: var(--color-thumb);
    border-radius: 15%;
  }
  hue-slider > input::-webkit-slider-thumb:hover,
  hue-slider > input:focus::-webkit-slider-thumb:hover {
    height: 24px;
    width: 24px;
    margin-top: -7px;
  }
  hue-slider > input::-moz-range-thumb,
  hue-slider > input:focus::-moz-range-thumb {
    cursor: var(--cursor-pointer);
    height: 18px;
    width: 18px;
    background: var(--color-thumb);
    border-radius: 15%;
  }
  hue-slider > input::-moz-range-thumb:hover,
  hue-slider > input:focus::-moz-range-thumb:hover {
    height: 24px;
    width: 24px;
  }
  hue-slider > input::-webkit-slider-runnable-track,
  hue-slider > input:focus::-webkit-slider-runnable-track {
    height: 12px;
    width: 100%;
    background: var(--gradient);
    border-radius: 6px;
  }
  hue-slider > input::-moz-range-track,
  hue-slider > input:focus::-moz-range-track {
    height: 12px;
    width: 100%;
    background: var(--gradient);
    border-radius: 6px;
  }
  hue-slider > input:disabled,
  hue-slider > input:focus:disabled {
    --gradient: linear-gradient(to right, #454545 0%, #bbbbbb 50%, #454545 100%);
  }
  hue-slider > input:disabled::-webkit-slider-thumb,
  hue-slider > input:focus:disabled::-webkit-slider-thumb {
    cursor: var(--cursor-default);
    opacity: 0;
  }
  hue-slider > input:disabled::-moz-range-thumb,
  hue-slider > input:focus:disabled::-moz-range-thumb {
    cursor: var(--cursor-default);
    opacity: 0;
  }
  hue-slider > input:disabled::-webkit-slider-runnable-track,
  hue-slider > input:focus:disabled::-webkit-slider-runnable-track {
    cursor: var(--cursor-default);
    opacity: 0.5;
  }
  hue-slider > input:disabled::-moz-range-track,
  hue-slider > input:focus:disabled::-moz-range-track {
    cursor: var(--cursor-default);
    opacity: 0.5;
  }
  /* ----------------------------------------- */
  /*  Enriched Content                         */
  /* ----------------------------------------- */
  enriched-content {
    display: inline-block;
  }
  document-embed {
    display: block;
  }
  /* ----------------------------------------- */
  /*  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;
  }
  /* ----------------------------------------- */
  /*  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;
  }
  /* ----------------------------------------- */
  /*  FilePicker Element                       */
  /* ----------------------------------------- */
  file-picker {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
  }
  /* ----------------------------------------- */
  /*  Content Links and Inline Rolls           */
  /* ----------------------------------------- */
  .content-link,
  .inline-roll {
    background: var(--content-link-background);
    border: 1px solid var(--content-link-border-color);
    border-radius: 2px;
    color: var(--content-link-text-color);
    margin: -1px 0;
    padding: 1px 4px 0;
    white-space: nowrap;
    word-break: break-all;
  }
  .content-link > i,
  .inline-roll > i {
    color: var(--content-link-icon-color);
    font-size: 0.8em;
    margin-right: 0.25em;
  }
  /* ---------------------------------------- */
  /*  Secrets                                 */
  /* ---------------------------------------- */
  section.secret {
    padding: 0 6px;
    background: var(--color-secret-bg);
    border: solid var(--color-secret-border);
    border-width: 1px 0;
  }
  section.secret.revealed {
    background: var(--color-revealed-bg);
  }
  section.secret > button.reveal {
    width: unset;
    height: unset;
    line-height: unset;
    padding: 0 16px;
    margin-top: 8px;
    font-size: var(--font-size-13);
    border-style: dashed;
  }
}
/* ---------------------------------------- */
/*  Block-Specific Rules                    */
/* ---------------------------------------- */
@layer blocks.base {
  /* ---------------------------------------- */
  /*  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 > .noflex,
  .flexcol > .noflex {
    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;
  }
  /* ---------------------------------------- */
  /*  Draggable Containers                    */
  /* ---------------------------------------- */
  .draggable,
  .draggables {
    cursor: var(--cursor-grab);
  }
  #drag-preview {
    position: absolute;
    left: -1000px;
    height: -1000px;
    z-index: -1;
  }
  #drag-preview > img {
    object-fit: contain;
  }
  .standard-form {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 1rem;
    /** Tabs */
    /** Fieldsets */
    /** Buttons */
    /** Editable Images */
    /* 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.flexrow {
    flex-direction: row;
  }
  .standard-form fieldset.input-grid {
    --grid-cols: 2;
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: 0.5rem;
  }
  .standard-form button {
    --button-size: var(--input-height);
  }
  .standard-form img[data-edit] {
    cursor: var(--cursor-pointer);
  }
  .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);
    outline-offset: -2px;
  }
  .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,
  .standard-form .form-group > span.label {
    flex: 1;
    color: var(--color-form-label);
    font-weight: bold;
    line-height: var(--input-height);
    cursor: var(--cursor-default);
  }
  .standard-form .form-group > label > i,
  .standard-form .form-group > span.label > i {
    margin-right: 0.25rem;
  }
  .standard-form .form-group > label > input,
  .standard-form .form-group > span.label > input {
    font-weight: initial;
  }
  .standard-form .form-group > label > .units,
  .standard-form .form-group > span.label > .units {
    color: var(--color-text-subtle);
    font-size: var(--font-size-12);
  }
  .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.inline {
    justify-content: space-between;
  }
  .standard-form .form-group.inline > label,
  .standard-form .form-group.inline > span.label {
    flex: none;
  }
  .standard-form .form-group.inline > .form-fields {
    flex: 1;
  }
  .standard-form .form-group.slim .form-fields {
    flex: 1;
  }
  .standard-form .form-group.slim .form-fields > label,
  .standard-form .form-group.slim .form-fields > span.label {
    flex: none;
    font-size: var(--font-size-12);
    color: var(--color-text-secondary);
    text-align: right;
  }
  .standard-form .form-group.slim .form-fields > input[type="number"],
  .standard-form .form-group.slim .form-fields > input[type="text"] {
    flex: 0 0 50px;
    padding: 0;
    text-align: center;
  }
  .standard-form .form-group:hover > label,
  .standard-form .form-group:hover > span.label {
    color: var(--color-form-label-hover);
  }
  .standard-form.scrollable > .form-group:first-child {
    margin-top: 1rem;
  }
  .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 > button,
  .standard-form .form-fields > a.button {
    flex: none;
  }
  .standard-form .form-fields > input[type="checkbox"],
  .standard-form .form-fields > input[type="radio"],
  .standard-form .form-fields > label {
    flex: none;
    color: var(--color-form-label);
  }
  .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 {
    --button-size: calc(1.25 * var(--input-height));
    flex: 1;
  }
  /* ---------------------------------- */
  /*  Dialog V2                         */
  /* ---------------------------------- */
  .application.dialog {
    padding: 0;
    margin: 0;
  }
  .application.dialog:not([open]) {
    display: none;
  }
  /* ----------------------------------------- */
  /* 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 {
    --button-size: var(--input-height);
    flex: 2;
  }
  .dialog .dialog-buttons button.default {
    flex: 3;
  }
  /* ----------------------------------------- */
  /*  Roll Message                             */
  /* ----------------------------------------- */
  .dice-roll {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    cursor: var(--cursor-pointer);
  }
  .dice-roll .dice-result,
  .dice-roll .dice-tooltip {
    flex: 0 0 100%;
  }
  .dice-roll .dice-tooltip {
    display: grid;
    grid-template-rows: 0fr;
    order: 1;
    transition: grid-template-rows 250ms ease;
  }
  .dice-roll .dice-tooltip > .wrapper {
    overflow: hidden;
  }
  .dice-roll.expanded .dice-tooltip {
    grid-template-rows: 1fr;
  }
  .dice-roll .dice-result {
    order: 2;
  }
  .dice-roll .dice-formula,
  .dice-roll .dice-total {
    flex: 0 0 100%;
    position: relative;
    margin: 0;
    line-height: 24px;
    text-align: center;
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid #999;
    border-radius: 3px;
    box-shadow: 0 0 2px #FFF inset;
    word-break: break-all;
  }
  .dice-roll .dice-formula {
    margin-bottom: 5px;
  }
  .dice-roll .dice-total {
    flex: 0;
    font-size: var(--font-size-20);
    font-weight: bold;
  }
  .dice-roll .dice-total.success {
    color: green;
  }
  .dice-roll .dice-total.failure {
    color: red;
  }
  .dice-roll + .dice-roll {
    margin-top: 5px;
  }
  /* ----------------------------------------- */
  /*  Dice Tooltip                             */
  /* ----------------------------------------- */
  .dice-tooltip .part-header {
    margin: 0;
    line-height: 24px;
    border-bottom: 1px solid #999;
  }
  .dice-tooltip .part-header .part-method {
    flex: none;
    margin-right: 4px;
  }
  .dice-tooltip .part-header .part-formula {
    font-weight: bold;
    flex: 1;
  }
  .dice-tooltip .part-header .part-flavor {
    flex: none;
    margin-right: 5px;
    font-size: var(--font-size-12);
    color: var(--color-dark-5);
  }
  .dice-tooltip .part-header .part-total {
    flex: none;
    font-size: var(--font-size-16);
    font-weight: bold;
    padding: 0 5px;
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid #999;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
  }
  .dice-tooltip .dice-rolls {
    list-style: none;
    margin: 5px 0;
    padding: 0;
    overflow: hidden;
  }
  .dice-tooltip .dice-rolls .roll {
    position: relative;
    min-width: 24px;
    line-height: 24px;
    float: left;
    margin-right: 1px;
    background-image: url("../icons/svg/d6-grey.svg");
    background-repeat: no-repeat;
    background-size: 24px 24px;
    font-size: var(--font-size-16);
    color: #000;
    font-weight: bold;
    text-align: center;
  }
  .dice-tooltip .dice-rolls .roll.d4 {
    background-image: url("../icons/svg/d4-grey.svg");
  }
  .dice-tooltip .dice-rolls .roll.d6 {
    background-image: url("../icons/svg/d6-grey.svg");
  }
  .dice-tooltip .dice-rolls .roll.d8 {
    background-image: url("../icons/svg/d8-grey.svg");
  }
  .dice-tooltip .dice-rolls .roll.d10 {
    background-image: url("../icons/svg/d10-grey.svg");
  }
  .dice-tooltip .dice-rolls .roll.d12 {
    background-image: url("../icons/svg/d12-grey.svg");
  }
  .dice-tooltip .dice-rolls .roll.d20 {
    background-image: url("../icons/svg/d20-grey.svg");
  }
  .dice-tooltip .dice-rolls .roll.success,
  .dice-tooltip .dice-rolls .roll.max {
    color: #18520b;
    filter: sepia(0.5) hue-rotate(60deg);
  }
  .dice-tooltip .dice-rolls .roll.failure,
  .dice-tooltip .dice-rolls .roll.min {
    color: #aa0200;
    filter: sepia(0.5) hue-rotate(-60deg);
  }
  .dice-tooltip .dice-rolls .roll.discarded,
  .dice-tooltip .dice-rolls .roll.rerolled {
    color: inherit;
    filter: sepia(0.5) contrast(0.75) opacity(0.4);
  }
  .dice-tooltip .dice-rolls .roll.exploded:before {
    font-size: 0.5rem;
    font-family: var(--font-awesome);
    content: "\f666";
    position: absolute;
    top: -8px;
    right: 0;
  }
  .inline-roll .dice-tooltip {
    width: 280px;
    background: url(../ui/parchment.jpg) repeat;
    border: 1px solid black;
    border-radius: 5px;
    padding: 5px 5px 0;
    box-shadow: 0 0 10px black;
    margin: 0;
  }
  .inline-roll .dice-tooltip:not(:popover-open) {
    position: absolute;
  }
  .inline-roll:hover .dice-tooltip {
    text-shadow: none;
  }
  /* ---------------------------------------- */
  /*  Display States                          */
  /* ---------------------------------------- */
  .disabled {
    cursor: var(--cursor-default);
    pointer-events: none;
  }
  .hidden,
  [hidden]:not([hidden="until-found"]) {
    display: none !important;
  }
  /** Scrollable Containers */
  .scrollable {
    --scroll-margin: 0.75rem;
    margin-right: calc(-1 * var(--scroll-margin));
    padding-right: var(--scroll-margin);
    overflow: hidden auto;
    scrollbar-gutter: stable;
  }
  /** Ellipsis Font */
  .ellipsis {
    overflow: hidden;
    white-space: nowrap;
    word-break: break-all;
    text-overflow: ellipsis;
  }
  /* ---------------------------------------- */
  /*  Tabbed Navigation                       */
  /* ---------------------------------------- */
  nav.tabs {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 1rem;
    line-height: 2.5;
    border-top: 1px solid var(--color-tabs-border);
    border-bottom: 1px solid var(--color-tabs-border);
  }
  nav.tabs.vertical {
    align-items: start;
    border: none;
    flex: 1;
    flex-direction: column;
    gap: 0.25rem;
    height: 0;
    justify-content: start;
    line-height: normal;
  }
  nav.tabs.vertical [data-tab] {
    border-color: var(--color-tabs-border);
    border-width: 0 0 1px 0;
    flex: none;
    font-size: var(--font-size-12);
    outline: none;
    padding: 0.5rem 0;
    text-align: left;
    width: 100%;
  }
  nav.tabs.vertical [data-tab]:first-of-type {
    padding-top: 0;
  }
  nav.tabs.vertical [data-tab]:hover {
    border-bottom-color: var(--color-tabs-border);
  }
  nav.tabs.vertical [data-tab].active {
    border-bottom-color: var(--color-shadow-primary);
  }
  nav.tabs [data-tab] {
    color: var(--color-text-secondary);
    text-align: center;
    cursor: var(--cursor-pointer);
  }
  nav.tabs [data-tab] > * {
    pointer-events: none;
  }
  nav.tabs [data-tab].active,
  nav.tabs [data-tab]:hover {
    text-shadow: 0 0 10px var(--color-shadow-primary);
  }
  nav.tabs [data-tab].active {
    color: var(--color-text-emphatic);
  }
  nav.tabs [data-tab]:hover {
    color: var(--color-text-primary);
  }
  .tab[data-tab]:not(.active) {
    display: none;
  }
  .tab[data-tab] > nav.tabs {
    border-top-color: var(--color-cool-5-25);
    border-bottom-color: var(--color-cool-5-25);
  }
}
@layer blocks.ui {
  /* ----------------------------------------- */
  /*  Context Dropdown Menu                    */
  /* ----------------------------------------- */
  #context-menu {
    height: max-content;
    min-width: 150px;
    max-width: 360px;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-color);
    position: absolute;
    width: 100%;
    left: 0;
    z-index: calc(var(--z-index-app) + 1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.45);
  }
  #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(--group-separator);
  }
  #context-menu li.context-group:last-child {
    border: none;
  }
  #context-menu li.context-item {
    border: 1px solid transparent;
    padding: 8px;
    line-height: 15px;
    font-size: var(--font-size-12);
    cursor: var(--cursor-pointer);
    transition: 0.1s;
  }
  #context-menu li.context-item > i {
    margin-right: 8px;
  }
  #context-menu li.context-item:hover {
    border: 1px solid var(--hover-entry-border);
    background: var(--hover-entry-background);
    color: var(--hover-text-color);
  }
  #context-menu[popover] {
    position: fixed;
    width: max-content;
    z-index: unset;
    inset: unset;
    margin: 0;
    padding: 0;
  }
  .window-app #context-menu:not([popover]) {
    z-index: calc(var(--z-index-window) + 1);
  }
  /* ---------------------------------------- */
  /*  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-body);
    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:where([popover]),
  .locked-tooltip:where([popover]) {
    display: block;
    margin: unset;
    inset: unset;
    border: unset;
  }
  #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;
  }
  #tooltip .toolclip p,
  .locked-tooltip .toolclip p {
    text-align: left;
  }
  #tooltip .toolclip p.faint,
  .locked-tooltip .toolclip p.faint {
    text-align: center;
    font-size: var(--font-size-14);
    color: #c9c7b8;
  }
  #tooltip .toolclip h4,
  .locked-tooltip .toolclip h4 {
    text-align: center;
    font-size: var(--font-size-18);
    font-weight: bold;
    font-family: var(--font-sans);
  }
  #tooltip .toolclip video,
  .locked-tooltip .toolclip video {
    max-width: calc(320px - 2rem);
    height: calc(320px - 2rem);
  }
  .locked-tooltip {
    pointer-events: all;
    border: 1px solid var(--color-warm-2);
  }
  /* ---------------------------------------- */
  /*  Alternative Buttons                     */
  /* ---------------------------------------- */
  button.plain,
  a.button.plain {
    --button-background-color: transparent;
    --button-border-color: transparent;
    --button-hover-background-color: transparent;
    --button-focus-outline-color: transparent;
  }
  button.icon,
  a.button.icon {
    font-family: var(--font-awesome);
    flex: 0 0 var(--button-size);
    width: var(--button-size);
  }
  button.icon.fa-duotone,
  a.button.icon.fa-duotone {
    font-family: var(--font-awesome-duotone);
  }
  file-picker > button.icon,
  document-tags > button.icon,
  string-tags > button.icon {
    flex-basis: 36px;
  }
  button.ui-control,
  a.ui-control,
  li.ui-control,
  .placeable-hud .control-icon,
  .placeable-hud input {
    flex: none;
    width: var(--control-size);
    height: var(--control-size);
    justify-content: center;
    align-content: center;
    background: var(--control-bg-color);
    border: 1px solid var(--control-border-color);
    border-radius: 4px;
    color: var(--control-icon-color);
    font-size: var(--font-size-16);
    pointer-events: all;
    transition: border 0.25s, color 0.25s;
    text-shadow: none;
  }
  button.ui-control:focus,
  a.ui-control:focus,
  li.ui-control:focus,
  .placeable-hud .control-icon:focus,
  .placeable-hud input:focus {
    outline: none;
    box-shadow: none;
    text-shadow: none;
  }
  button.ui-control:hover,
  a.ui-control:hover,
  li.ui-control:hover,
  .placeable-hud .control-icon:hover,
  .placeable-hud input:hover {
    text-shadow: none;
    background: var(--control-hover-bg-color);
    border-color: var(--control-hover-border-color);
    color: var(--control-hover-icon-color);
  }
  button.ui-control.toggle,
  a.ui-control.toggle,
  li.ui-control.toggle,
  .placeable-hud .control-icon.toggle,
  .placeable-hud input.toggle {
    --control-bg-color: var(--toggle-bg-color);
    --control-border-color: var(--toggle-border-color);
    --control-active-bg-color: var(--toggle-active-bg-color);
    --control-active-border-color: var(--toggle-active-border-color);
    --control-hover-border-color: var(--toggle-active-border-color);
  }
  button.ui-control.button,
  a.ui-control.button,
  li.ui-control.button,
  .placeable-hud .control-icon.button,
  .placeable-hud input.button {
    --control-border-color: var(--control-button-border-color);
    --control-hover-bg-color: var(--control-button-hover-bg-color);
    --control-hover-border-color: var(--control-button-hover-border-color);
  }
  button.ui-control[aria-pressed=true],
  a.ui-control[aria-pressed=true],
  li.ui-control[aria-pressed=true],
  .placeable-hud .control-icon[aria-pressed=true],
  .placeable-hud input[aria-pressed=true] {
    background: var(--control-active-bg-color);
    border-color: var(--control-active-border-color);
    color: var(--control-active-icon-color);
    cursor: var(--cursor-default);
  }
  button.ui-control[disabled],
  a.ui-control[disabled],
  li.ui-control[disabled],
  .placeable-hud .control-icon[disabled],
  .placeable-hud input[disabled],
  button.ui-control.disabled,
  a.ui-control.disabled,
  li.ui-control.disabled,
  .placeable-hud .control-icon.disabled,
  .placeable-hud input.disabled {
    opacity: 0.4;
  }
  button.ui-control,
  .placeable-hud button.control-icon {
    --button-size: var(--control-size);
  }
  .split-button {
    display: flex;
  }
  .split-button .ui-control {
    border-radius: 0;
    border-inline-end-width: 0;
  }
  .split-button .ui-control:first-child {
    border-start-start-radius: 4px;
    border-end-start-radius: 4px;
  }
  .split-button .ui-control:last-child {
    border-start-end-radius: 4px;
    border-end-end-radius: 4px;
    border-inline-end-width: 1px;
  }
  .split-button .ui-control:hover + .ui-control {
    border-inline-start-color: var(--control-hover-border-color);
  }
  .split-button .ui-control[aria-pressed=true] + .ui-control {
    border-inline-start-color: var(--control-active-border-color);
  }
  .split-button .ui-control:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--control-active-border-color);
  }
  .split-button .ui-control:focus + .ui-control {
    border-inline-start-color: var(--control-active-border-color);
  }
  .split-button.vertical {
    writing-mode: tb;
  }
  .inline-control {
    --button-size: 24px;
    --button-background-color: transparent;
    --button-border-color: transparent;
    --button-hover-border-color: transparent;
  }
  .inline-control:disabled {
    --button-text-color: var(--color-text-subtle);
    opacity: 0.75;
  }
  /* ---------------------------------- */
  /*  Notification Pips                 */
  /* ---------------------------------- */
  .notification-pip {
    background: var(--color-warm-2);
    text-shadow: 1px 1px 3px black;
    position: absolute;
    top: -1px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 100%;
  }
  .notification-pip:not(.active) {
    display: none;
  }
}
/* ---------------------------------------- */
/*  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: var(--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;
  }
  /* ---------------------------------------- */
  /* Controls Configuration                   */
  /* ---------------------------------------- */
  #controls-config:not(.minimizing, .minimized, .maximizing) {
    min-width: 600px;
    min-height: 300px;
  }
  #controls-config .categories > .tab {
    flex-wrap: nowrap;
  }
  #controls-config .form-group {
    border-bottom: var(--sidebar-separator);
    padding-bottom: 0.25rem;
  }
  #controls-config .form-group span.label {
    align-self: start;
  }
  #controls-config ul.form-fields {
    flex: 1;
    margin: 0;
    padding-left: 0;
  }
  #controls-config li {
    gap: 0.5rem;
    line-height: 1.25rem;
    width: 100%;
  }
  #controls-config li.editing .binding-input {
    position: relative;
  }
  #controls-config li.editing .binding-input i {
    color: var(--color-text-secondary);
    position: absolute;
    top: 30%;
    right: 0.5rem;
  }
  #controls-config li.editing .controls {
    flex: 0;
  }
  #controls-config kbd {
    background: var(--button-background-color);
    border: 1px solid var(--button-border-color);
    border-radius: 5px;
    box-shadow: 1px 1px var(--button-text-color);
    color: var(--button-text-color);
    flex: none;
    font-family: var(--font-body);
    gap: 0.25rem;
    justify-content: center;
    min-width: 1.5rem;
    padding: 0 0.25rem;
    text-align: center;
    white-space: nowrap;
  }
  #controls-config i.conflict {
    --fa-primary-color: var(--color-dark-2);
    --fa-secondary-color: var(--color-level-warning);
    --fa-secondary-opacity: 1;
  }
  #controls-config i.conflict::after {
    text-shadow: 1px 1px var(--color-dark-4);
  }
  #controls-config .controls {
    flex-wrap: nowrap;
    justify-content: end;
  }
  /* ----------------------------------------- */
  /*  World Configuration                      */
  /* ----------------------------------------- */
  #world-config .editor {
    height: 300px;
  }
  /* ----------------------------------------- */
  /* File Picker                               */
  /* ----------------------------------------- */
  #file-picker .subheader .current-dir button {
    flex: 0 0 var(--button-size);
  }
  #file-picker .subheader .set-favorite {
    flex: none;
  }
  #file-picker .subheader .tag {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    flex: none;
    padding-left: 4px;
  }
  #file-picker .subheader .split-button {
    justify-content: end;
  }
  #file-picker .body {
    font-size: var(--font-size-13);
    gap: 1rem;
  }
  #file-picker ul.directory {
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-border);
    border-radius: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #file-picker ul.directory > li {
    cursor: var(--cursor-pointer);
    padding: 0.5rem;
    margin: 0;
    word-break: break-all;
    overflow: hidden;
    border-bottom: 1px solid var(--color-dark-6);
  }
  #file-picker ul.directory > li:last-child {
    border-bottom: none;
  }
  #file-picker ul.directory > li:hover {
    text-shadow: 0 0 10px var(--color-shadow-primary);
  }
  #file-picker ul.directory > li.picked {
    color: var(--color-text-selection);
    background: var(--color-text-selection-bg);
    font-weight: 600;
  }
  #file-picker ul.directory > li > i {
    margin-right: 0.25rem;
  }
  #file-picker ul.details img {
    display: none;
  }
  #file-picker ul.thumbs img {
    flex: 0 0 48px;
    object-fit: cover;
    object-position: 50% 50%;
    margin-right: 1rem;
    border: none;
  }
  #file-picker ul.tiles {
    display: grid;
    grid-template-columns: repeat(5, 105px);
  }
  #file-picker ul.tiles li {
    padding: 0;
    border: 1px solid transparent;
    border-right: 1px solid var(--color-light-5);
    border-bottom: 1px solid var(--color-light-5);
  }
  #file-picker ul.tiles li img {
    object-fit: contain;
    height: 105px;
    width: 105px;
  }
  #file-picker ul.tiles li.picked {
    background: var(--color-cool-5);
    outline: 1px solid var(--color-warm-1);
    box-shadow: 0 0 4px var(--color-warm-1) inset;
  }
  #file-picker ul.images li {
    position: relative;
    height: 200px;
    padding: 0;
  }
  #file-picker ul.images li img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    object-position: 50% 50%;
    border: none;
  }
  #file-picker ul.images li span.filename {
    color: var(--color-light-2);
    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;
  }
  #file-picker.private button.privacy {
    background: rgba(115, 49, 255, 0.05);
    box-shadow: 0 0 4px #7331FF inset;
  }
  #file-picker.private .directory,
  #file-picker li.private.dir {
    background: rgba(115, 49, 255, 0.05);
  }
  body.theme-light .file-picker .demarcated {
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-dark-5);
    color: var(--color-dark-1);
  }
  /* ---------------------------------------- */
  /* Font Configuration                       */
  /* ---------------------------------------- */
  #font-config .font-preview {
    text-align: center;
    padding: 16px;
    font-size: var(--font-size-28);
  }
  #font-config .custom-font {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border: 2px groove var(--color-cool-3);
    cursor: var(--cursor-pointer);
    border-radius: 4px;
    font-size: var(--font-size-16);
  }
  #font-config .custom-font.selected {
    border: 2px solid var(--color-warm-1);
  }
  /* ---------------------------------------- */
  /* Frame Viewer                             */
  /* ---------------------------------------- */
  #frame-viewer iframe {
    flex-grow: 1;
  }
  /* ---------------------------------------- */
  /* Invitation Links                         */
  /* ---------------------------------------- */
  #invitation-links label {
    flex: 0 0 7.5rem;
  }
  #invitation-links input:read-only {
    pointer-events: unset;
  }
  #invitation-links .connection.open {
    color: var(--color-level-success-border);
  }
  #invitation-links .connection.unknown {
    color: var(--color-level-warning-border);
  }
  #invitation-links .connection.closed {
    color: var(--color-level-error-border);
  }
  #invitation-links a.recheck {
    padding-left: 0.25rem;
  }
  #invitation-links a.show-hide {
    flex: 0;
    font-size: 130%;
  }
  /* ---------------------------------------- */
  /* Support Details Report                   */
  /* ---------------------------------------- */
  #support-details .tab > ul {
    padding-left: 0;
  }
  #support-details p {
    margin: 0;
  }
  #support-details ul {
    list-style: none;
  }
  #support-details summary {
    cursor: var(--cursor-pointer);
  }
  #support-details .issues {
    padding: 0;
  }
  #support-details .issues .issue {
    cursor: var(--cursor-text);
    margin-bottom: 1rem;
    user-select: text;
  }
  #support-details .tab[data-tab=support] {
    height: 0;
    flex: 1;
  }
  #support-details .tab[data-tab=support] fieldset.report {
    height: 0;
    flex: 1;
  }
  #support-details pre {
    background: rgba(0, 0, 0, 0.025);
    border: 2px dashed #c9baa7;
    display: block;
    flex: 1;
    font-size: var(--font-size-12);
    margin: 0;
    max-height: 350px;
    overflow-x: auto;
    padding: 0.5em;
    user-select: all;
    white-space: pre-wrap;
  }
  #support-details pre:focus {
    animation: selectSwap 100ms step-end forwards;
  }
  @keyframes selectSwap {
    to {
      -webkit-user-select: text;
      user-select: text;
    }
  }
  #support-details .summary-tree {
    --spacing: 1rem;
    --control-size: 10px;
    --line-width: 1px;
    --node-padding: 0.25rem;
  }
  #support-details .summary-tree ul {
    margin-top: 0;
    margin-left: calc(var(--control-size) - var(--spacing));
    padding-left: 0;
  }
  #support-details .summary-tree li {
    display: block;
    position: relative;
    padding-left: calc(2 * var(--spacing) - var(--control-size) - var(--line-width));
    border-left: var(--line-width) solid var(--color-border-dark);
    font-size: var(--font-size-12);
  }
  #support-details .summary-tree li:last-child {
    border-color: transparent;
  }
  #support-details .summary-tree li::before {
    content: "";
    display: block;
    position: absolute;
    top: calc(var(--spacing) / -2);
    left: calc(var(--line-width) * -1);
    width: calc(var(--spacing) + var(--line-width));
    height: calc(var(--spacing) + var(--line-width));
    border: solid var(--color-border-dark);
    border-width: 0 0 var(--line-width) var(--line-width);
  }
  #support-details .summary-tree.summary-tree-root {
    padding: 0;
    margin: 0;
  }
  #support-details .summary-tree.summary-tree-root > li {
    border: none;
  }
  #support-details .summary-tree.summary-tree-root > li::before {
    display: none;
  }
  #support-details .summary-tree summary {
    display: block;
    cursor: var(--cursor-pointer);
    padding: var(--node-padding);
    font-size: var(--font-size-12);
  }
  #support-details .summary-tree summary::marker {
    display: none;
  }
  #support-details .summary-tree li::after,
  #support-details .summary-tree summary::before {
    content: "";
    display: block;
    position: absolute;
    top: calc(var(--spacing) / 2 - var(--control-size) + var(--node-padding));
    left: calc(var(--spacing) - var(--control-size) - var(--line-width));
    width: calc(2 * var(--control-size));
    height: calc(2 * var(--control-size));
  }
  #support-details .summary-tree summary::before {
    content: "\f0fe";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    z-index: 1;
    line-height: calc(2 * var(--control-size) - var(--line-width));
    text-align: center;
  }
  #support-details .summary-tree details[open] > summary::before {
    content: "\f146";
  }
  /* ---------------------------------------- */
  /* Tours Management                         */
  /* ---------------------------------------- */
  #tours-management:not(.minimizing, .minimized, .maximized) {
    min-width: 500px;
    min-height: 300px;
  }
  #tours-management .form-group {
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 0 5px 5px;
  }
  #tours-management .form-group:hover {
    border-color: var(--color-warm-2);
  }
  #tours-management .form-group .status {
    font-size: var(--font-size-12);
    font-weight: normal;
    color: var(--color-text-secondary);
    margin-left: 0.25rem;
  }
  #tours-management .form-group .form-fields {
    flex: 0;
    flex-wrap: nowrap;
  }
  #tours-management .form-group.completed span.label {
    color: var(--color-text-dark-5);
  }
  /* ---------------------------------------- */
  /* 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);
  }
  body.game .tour-center-step {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .tour [data-action="exit"] {
    position: absolute;
    right: 0.5rem;
    top: 1rem;
  }
  .tour [data-action="exit"] > i {
    cursor: var(--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 {
    color: var(--color-text-emphatic);
  }
  .tour .step-button > i {
    cursor: var(--cursor-pointer);
  }
  .tour .content {
    color: var(--color-text-secondary);
    font-size: var(--font-size-16);
    text-align: center;
  }
  .tour .step-controls .step-button {
    flex: 0;
  }
  .tour .step-controls .step-button > i {
    cursor: var(--cursor-pointer);
  }
  .tour .step-controls [data-action="previous"] {
    text-align: left;
  }
  .tour .step-controls .progress {
    color: var(--color-text-emphatic);
    text-align: center;
    flex: 1;
  }
  .tour .step-controls [data-action="next"] {
    text-align: right;
  }
  /* ---------------------------------------- */
  /*  Module Management                       */
  /* ---------------------------------------- */
  .package-list {
    list-style: none;
  }
  .package-list .package {
    padding: 4px 0;
    border-top: none;
    border-bottom: 1px solid var(--color-border);
  }
  .package-list .package:last-child {
    border-bottom: none;
  }
  .package-list .package.hidden {
    display: none;
  }
  .package-list .package .package-overview {
    flex: 0 0 100%;
    gap: 0.25rem;
    justify-content: end;
  }
  .package-list .package .package-overview .package-title {
    flex: 1;
    font-size: var(--font-size-14);
    margin: 0;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .package-list .package .package-description {
    flex: 0 0 100%;
    margin: 3px 0;
    color: var(--color-text-primary);
    font-size: var(--font-size-12);
  }
  .package-list .package .package-description > * {
    margin: 0;
  }
  .package-list .package .package-description.hidden {
    display: none;
  }
  .package-list .package .package-metadata,
  .package-list .package .package-controls {
    margin: 0;
    flex: 0 0 50%;
  }
  .package-list .package .package-metadata ul,
  .package-list .package .package-controls ul {
    margin: 0;
  }
  .package-list .package .package-metadata {
    font-size: var(--font-size-12);
    padding: 0;
    color: var(--color-text-primary);
  }
  .package-list .package .package-controls {
    padding: 5px 0;
    text-align: right;
  }
  .package-list .package .package-controls button {
    width: 110px;
    height: 25px;
    font-size: var(--font-size-12);
    line-height: 24px;
    border: 1px solid var(--color-text-dark-1);
  }
  .package-list .package .package-controls buttonnot[hidden] {
    display: inline;
  }
  .package-list .package .package-url {
    margin: 0.25em 0 0;
    color: var(--color-border);
  }
  .package-list .package .package-footer {
    height: 32px;
    padding: 5px 0 0;
  }
  .package-list .package .tags > .tag {
    flex: none;
    gap: 2px;
    height: 1.25rem;
    background: var(--color-cool-4);
    border: 1px solid var(--color-cool-3);
    border-radius: 2px;
    padding: 0 0.25rem;
    font-size: var(--font-size-12);
    color: var(--color-light-2);
  }
  .package-list .package .tags > .tag.javascript {
    background: #803c62;
  }
  .package-list .package .tags > .tag.css {
    background: #1e5c6f;
  }
  .package-list .package .tags > .tag.compendium {
    background: #3b3a80;
  }
  .package-list .package .tags > .tag.unavailable {
    background: #750000;
  }
  .package-list .package .tags > .tag.unknown {
    background: #b07900;
    min-width: 50px;
  }
  .package-list .package .tags > .tag.languages {
    background: #224224;
  }
  .package-list .package .tags > .tag.requires {
    position: relative;
    top: -2px;
  }
  .package-list .package .tags > .tag.badge {
    text-shadow: 1px 1px var(--color-dark-2);
  }
  .package-list .package .tags > .tag.badge.neutral {
    background: var(--color-dark-3);
    border-color: var(--color-dark-5);
  }
  .package-list .package .tags > .tag.badge.warning {
    background: var(--color-level-warning-bg);
    border-color: var(--color-level-warning-border);
    color: var(--color-light-1);
  }
  .package-list .package .tags > .tag.badge.error {
    background: var(--color-level-error-bg);
    border-color: var(--color-level-error-border);
  }
  .package-list .package .tags > .tag.badge.verified,
  .package-list .package .tags > .tag.badge.safe,
  .package-list .package .tags > .tag.badge.success {
    background: var(--color-level-success-bg);
    border-color: var(--color-level-success-border);
  }
  #module-management search {
    gap: 12px;
  }
  #module-management search input[type=search] {
    flex: 1;
  }
  #module-management search .filter {
    flex: none;
    color: var(--color-text-secondary);
  }
  #module-management search .filter.active,
  #module-management search .filter:hover {
    text-shadow: 0 0 10px var(--color-shadow-primary);
  }
  #module-management search .filter.active {
    color: var(--color-text-emphatic);
  }
  #module-management search .filter:hover {
    color: var(--color-text-primary);
  }
  #module-management .package-list {
    height: min(600px, 60vh);
  }
  #module-management .package-list li.package:first-of-type {
    border-top: 1px solid var(--color-border);
  }
  #module-management .package-list li.package .package-overview .package-title {
    gap: 4px;
    justify-content: start;
  }
  #module-management .package-list li.package .package-overview .package-title > input {
    flex: none;
  }
  #module-management .package-list li.package .package-overview .package-title .title-group {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  #module-management .package-list li.package .package-overview .package-title .title-group .title,
  #module-management .package-list li.package .package-overview .package-title .title-group .subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 400px;
  }
  #module-management .package-list li.package .package-overview .package-title .title-group .title {
    font-weight: bold;
  }
  #module-management .package-list li.package .package-overview .package-title .title-group .subtitle {
    font-size: var(--font-size-12);
    line-height: 1rem;
    color: var(--color-text-secondary);
    font-weight: normal;
  }
  #module-management .package-list li.package .package-overview .package-title,
  #module-management .package-list li.package .package-metadata,
  #module-management .package-list li.package .package-description {
    color: var(--color-text-primary);
  }
  #module-management .package-list li.package .package-metadata {
    flex: 0 0 100%;
  }
  #module-management .package-list:not(.expanded) .package-description {
    display: none;
  }
  .application.dependency-resolution fieldset {
    gap: unset;
  }
  .application {
    position: absolute;
    z-index: var(--z-index-window);
    transform-origin: top left;
    display: flex;
    flex-flow: column nowrap;
    min-height: calc(var(--header-height) + 1rem);
    min-width: 200px;
    max-height: calc(100vh - 1.5 * var(--hotbar-height));
    max-width: 100%;
    overflow: hidden;
    background: var(--background);
    font-size: var(--font-size-14);
    color: var(--color-text-primary);
    color-scheme: var(--color-scheme);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 0 0 10px #000;
  }
  .application.minimizing,
  .application.minimized,
  .application.maximizing {
    min-width: unset;
    min-height: unset;
  }
  .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-content {
    flex: 1;
    display: flex;
    flex-flow: column nowrap;
    padding: 1rem;
    overflow: hidden;
  }
  .application .window-header {
    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: var(--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:active {
    cursor: var(--cursor-grab-down);
  }
  .application .window-header .window-icon {
    flex: none;
  }
  .application .window-header .window-title {
    flex: 1;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    margin: 0;
    line-height: var(--header-height);
    border: none;
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--color-light-1);
  }
  .application .window-header button.header-control {
    --button-text-color: var(--color-light-1);
    --button-background-color: none;
    --button-size: 1.5rem;
    border: none;
    line-height: normal;
    margin: 0;
  }
  .application .controls-dropdown {
    position: absolute;
    top: var(--header-height);
    right: 0;
    width: max-content;
    min-width: 100px;
    max-width: 300px;
    max-height: 0;
    overflow: hidden;
    z-index: 1;
    list-style: none;
    margin: 0 0.25rem;
    padding: 0;
    background: var(--background);
    border-radius: 4px;
    visibility: hidden;
    transition: max-height 500ms;
    pointer-events: none;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.45);
  }
  .application .controls-dropdown.expanding,
  .application .controls-dropdown.collapsing {
    visibility: visible;
    overflow: hidden;
    pointer-events: none;
  }
  .application .controls-dropdown.expanding {
    max-height: 50%;
  }
  .application .controls-dropdown.expanded {
    max-height: 50%;
    visibility: visible;
    overflow: hidden auto;
    pointer-events: all;
  }
  .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: start;
    border: none;
    font-size: var(--font-size-12);
  }
  .application.minimized .header-control {
    display: none;
  }
  .application.minimized .header-control[data-action=close] {
    display: initial;
  }
  .application .window-resize-handle {
    position: absolute;
    inset: auto 1px 1px 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;
  }
  /* ---------------------------------------- */
  /* Category Browser                         */
  /* ---------------------------------------- */
  .category-browser .window-content {
    flex-direction: row;
    gap: 0;
  }
  .category-browser .loading {
    margin: 45% 1rem;
    text-align: center;
  }
  .category-browser aside {
    flex: 0 0 220px;
    border-right: var(--sidebar-separator);
    margin-right: 16px;
    padding-right: 16px;
  }
  .category-browser aside input[type=search]::placeholder {
    font-family: var(--font-awesome);
    font-weight: 900;
    position: relative;
    top: 1px;
  }
  .category-browser aside nav.tabs {
    padding: 1rem var(--scroll-margin) 1rem 0.5rem;
  }
  .category-browser aside nav.tabs > button {
    border-radius: 0;
    flex-wrap: nowrap;
    gap: 1rem;
    height: initial;
    justify-content: space-between;
    transition: none;
  }
  .category-browser aside nav.tabs > button.no-matches {
    color: var(--color-text-subtle);
  }
  .category-browser aside nav.tabs > button.no-matches .count {
    color: inherit;
  }
  .category-browser aside nav.tabs > button .count {
    color: var(--color-text-secondary);
  }
  .category-browser aside button.reset-defaults {
    margin-top: auto;
  }
  .category-browser .main {
    flex: 0 1 100%;
    gap: 1rem;
  }
  .category-browser .main .categories {
    flex: 1;
    height: 0;
  }
  .category-browser .main .categories section.tab {
    flex: 1;
    height: 0;
    padding-top: 0.5rem;
  }
  .category-browser .main.interstitial .categories {
    overflow: hidden;
  }
  /**
 * Reduced Transparency Preferences
 */
  @media (prefers-reduced-transparency) {
    .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;
    }
  }
  /* -------------------------------------------- */
  /*  Document Ownership                          */
  /* -------------------------------------------- */
  .document-ownership p.instructions {
    margin: 0;
  }
  .document-ownership.no-gm .gm {
    display: none;
  }
  .document-ownership .author {
    color: var(--color-text-secondary);
  }
  .document-ownership .role-icon {
    color: var(--color-text-subtle);
    font-size: var(--font-size-12);
  }
  /* ---------------------------------------- */
  /* Roll Fulfillment                         */
  /* ---------------------------------------- */
  .application.roll-resolver {
    --flash-color: #ffff004d;
  }
  .application.roll-resolver section[data-application-part] {
    gap: 0.5rem;
  }
  .application.roll-resolver .input-grid {
    --grid-cols: 3;
  }
  .application.roll-resolver .formula {
    padding: 0.5rem 0.5rem 0;
    font-size: var(--font-size-18);
    text-align: center;
  }
  .application.roll-resolver label.die-input > input {
    text-align: center;
    font-size: var(--font-size-16);
  }
  .application.roll-resolver .form-fields {
    display: flex;
    gap: 0.125rem;
  }
  .application.roll-resolver .form-fields > label {
    flex: 1;
  }
  .application.roll-resolver .form-fields > button {
    flex: none;
    width: unset;
  }
  .application.roll-resolver .form-fields > button > i {
    margin: 0;
  }
  .application.roll-resolver .new-addition {
    animation: background-flash 400ms ease-in-out;
  }
  @keyframes background-flash {
    0% {
      background-color: transparent;
    }
    50% {
      background-color: var(--flash-color);
    }
    100% {
      background-color: transparent;
    }
  }
  /* ----------------------------------------- */
  /*  Region Legend                            */
  /* ----------------------------------------- */
  #region-legend {
    max-height: calc(100% - 200px);
  }
  #region-legend .window-content {
    padding: 0.5rem;
  }
  #region-legend #region-legend-list {
    height: 0;
    flex: 1;
    gap: 0.5rem;
  }
  #region-legend .region-filters {
    gap: 0.5rem;
  }
  #region-legend .region-filters input[name="elevationBottom"],
  #region-legend .region-filters input[name="elevationTop"] {
    flex: 0 0 50px;
  }
  #region-legend .region-filters input[name="elevationBottom"]::placeholder,
  #region-legend .region-filters input[name="elevationTop"]::placeholder {
    font-size: var(--font-size-12);
  }
  #region-legend .region-list {
    --scroll-margin: 0.5rem;
    flex: 1;
    margin: 0;
    padding-left: 0;
  }
  #region-legend .region {
    gap: 0.25rem;
    padding: 0.25rem 0;
    border-top: 2px groove transparent;
    border-bottom: 2px groove transparent;
  }
  #region-legend .region.hovered {
    border-color: var(--color-border-dark-secondary);
  }
  #region-legend .region.controlled {
    border-color: var(--color-border-highlight);
  }
  #region-legend .region-color {
    flex: none;
    height: 16px;
    width: 16px;
    border: 2px solid #000;
    border-radius: 3px;
  }
  #region-legend .region-name {
    margin: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  #region-legend .region-meta {
    flex: none;
    color: var(--color-form-hint);
    font-size: var(--font-size-12);
  }
  #region-legend button.icon {
    font-size: var(--font-size-12);
  }
  /* ----------------------------------------- */
  /*  Image Popout                             */
  /* ----------------------------------------- */
  .application.image-popout {
    background: var(--color-cool-5-75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .application.image-popout figure {
    margin: 0;
    padding: 1rem;
    flex-grow: 1;
  }
  .application.image-popout figure img,
  .application.image-popout figure video {
    border: none;
    box-shadow: none;
    flex: 1;
    object-fit: contain;
    object-position: 50% 50%;
  }
  .application.image-popout figure figcaption {
    font-size: var(--font-size-16);
    margin-top: 1rem;
  }
  .application.image-popout .window-resize-handle {
    filter: invert(1);
  }
  @media (max-height: 850px) {
    .application {
      max-height: 100vh;
    }
  }
  /* --------------------------------------- */
  /*  Shared DocumentSheet Styling           */
  /* --------------------------------------- */
  .sheet .standard-form header.img-name {
    align-items: center;
    display: flex;
    gap: 1rem;
  }
  .sheet .standard-form header.img-name img {
    height: 64px;
    flex: 0 0 64px;
    object-fit: contain;
  }
  .sheet .standard-form header.img-name input {
    flex: 1;
    font-size: var(--font-size-32);
    height: initial;
  }
  /* --------------------------------------- */
  /*  Active Effect Configuration            */
  /* --------------------------------------- */
  .active-effect-config prose-mirror {
    --min-height: 200px;
  }
  .active-effect-config .tab.changes {
    gap: 0.5rem;
    overflow-y: hidden;
  }
  .active-effect-config .tab.changes header,
  .active-effect-config .tab.changes ol {
    align-items: center;
    display: grid;
    gap: 0.25rem;
    grid-template-columns: 12rem 7rem 7rem 4rem 1rem;
    margin: 0;
    padding: 2px;
    position: relative;
  }
  .active-effect-config .tab.changes header .controls,
  .active-effect-config .tab.changes ol .controls {
    text-align: right;
  }
  .active-effect-config .tab.changes header {
    text-align: left;
  }
  .active-effect-config .tab.changes ol li {
    display: contents;
  }
  /* -------------------------------------------- */
  /*  Adventure Exporter                          */
  /* -------------------------------------------- */
  #adventure-exporter prose-mirror {
    height: 300px;
  }
  #adventure-exporter .tab.contents a.control {
    color: var(--color-text-secondary);
    font-size: var(--font-size-12);
    height: 2rem;
    width: 2rem;
  }
  #adventure-exporter .tab.contents .document-type {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  #adventure-exporter .tab.contents .document-type.collapsed a.control.bullet {
    transform: rotate(-90deg);
    transition-duration: 0.25s;
  }
  #adventure-exporter .tab.contents .document-type.collapsed .tree {
    max-height: 0;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
  }
  #adventure-exporter .tab.contents .document-type header {
    display: flex;
    align-items: center;
    line-height: 2rem;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }
  #adventure-exporter .tab.contents .document-type header > a.control {
    text-align: center;
  }
  #adventure-exporter .tab.contents .document-type header > a.control.bullet {
    transform-origin: 1rem 50%;
    transition: 0.5s transform ease;
  }
  #adventure-exporter .tab.contents .document-type header > a.control.bullet i {
    margin: 0;
  }
  #adventure-exporter .tab.contents .document-type header .name-count {
    flex: 1;
    text-align: center;
  }
  #adventure-exporter .tab.contents .document-type .tree {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 9999px;
    overflow-y: hidden;
    transition: max-height 1s ease-in-out;
  }
  #adventure-exporter .tab.contents ul {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #adventure-exporter .tab.contents ul.document-list {
    flex-flow: row wrap;
  }
  #adventure-exporter .tab.contents ul > li > ul {
    margin-left: 0.5rem;
  }
  #adventure-exporter .tab.contents ul li {
    margin: 0;
  }
  #adventure-exporter .tab.contents ul li.document {
    border: 1px solid var(--color-border);
    border-radius: 3px;
    font-size: var(--font-size-12);
    padding: 2px 4px;
    white-space: nowrap;
    width: fit-content;
  }
  #adventure-exporter .tab.contents ul li.document.update {
    background: rgba(255, 255, 255, 0.2);
  }
  #adventure-exporter .tab.contents ul li.document.add {
    background: rgba(0, 255, 0, 0.1);
  }
  #adventure-exporter .tab.contents ul li.document.missing {
    background: rgba(252, 173, 12, 0.2);
  }
  #adventure-exporter .tab.contents ul li.document.remove {
    background: rgba(255, 0, 0, 0.1);
  }
  #adventure-exporter .tab.contents ul li.document i.warning {
    color: var(--color-warm-3);
  }
  #adventure-exporter .tab.contents ul li a.control {
    position: relative;
    top: 1px;
    margin-left: 4px;
  }
  #adventure-exporter .tab.contents .drop-zone {
    line-height: 100px;
    text-align: center;
    border: 2px dashed var(--color-border);
    border-radius: 5px;
  }
  /* --------------------------------------- */
  /*  Adventure Importer                     */
  /* --------------------------------------- */
  .adventure-importer .adventure-header h1 {
    margin: 0;
    text-align: center;
  }
  .adventure-importer figure.adventure-banner {
    margin: 0;
  }
  .adventure-importer figure.adventure-banner img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 5px;
  }
  .adventure-importer .adventure-contents {
    gap: 2rem;
    align-items: start;
  }
  .adventure-importer .adventure-contents h2 {
    margin-bottom: 0.5rem;
  }
  .adventure-importer .adventure-overview {
    flex: 2;
  }
  .adventure-importer .import-controls ul li i {
    color: var(--color-text-subtle);
    margin-right: 0.5rem;
  }
  .adventure-importer .import-controls label.checkbox {
    --input-height: 1rem;
    font-size: var(--font-size-14);
  }
  .adventure-importer .import-controls label.checkbox > i {
    color: var(--color-text-subtle);
  }
  /* -------------------------------------------- */
  /*  Base Sheet                                  */
  /* -------------------------------------------- */
  .base-sheet .no-data h1 {
    --size-h1: var(--font-size-36);
    margin-bottom: 0;
  }
  .base-sheet .no-data .uuid {
    color: var(--color-text-subtle);
    font-size: var(--font-size-16);
  }
  /* --------------------------------------- */
  /*  Card Configuration                     */
  /* --------------------------------------- */
  .card-config .tab.faces,
  .card-config .faces-list {
    height: 0;
    flex: 1;
  }
  .card-config .faces-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .card-config prose-mirror {
    height: 200px;
  }
  /* --------------------------------------- */
  /*  Cards Configuration                    */
  /* --------------------------------------- */
  .cards-config {
    --card-height: 48px;
  }
  .cards-config.deck .tab.cards {
    flex: 1;
    gap: 0;
    height: 0;
  }
  .cards-config.deck .tab.cards .controls {
    flex: 0 0 48px;
  }
  .cards-config.hand header.sheet-header input,
  .cards-config.pile header.sheet-header input {
    font-size: var(--font-size-32);
    height: initial;
  }
  .cards-config img.face {
    flex: 0 0 48px;
    height: 48px;
    object-fit: contain;
  }
  .cards-config .cards-header {
    background: rgba(0, 0, 0, 0.1);
    border-top: 2px groove #444;
    border-bottom: 2px groove #444;
    padding: 3px 0.5rem 3px 0;
    align-items: center;
    text-align: left;
    font-weight: bold;
  }
  .cards-config ol.cards {
    max-height: 600px;
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
  }
  .cards-config ol.cards > li {
    height: var(--card-height);
    align-items: center;
  }
  .cards-config ol.cards > li:first-of-type {
    margin-top: 0.5rem;
  }
  .cards-config .sort-mode {
    flex: 0 0 48px;
    text-align: center;
  }
  .cards-config .sort-mode > i {
    margin-right: 0;
  }
  .cards-config .face {
    flex: 0 0 calc(var(--card-height) * 2 / 3);
    height: var(--card-height);
    width: calc(var(--card-height) * 2 / 3);
  }
  .cards-config .name {
    flex: 3;
    margin: 0 0 0 8px;
    font-weight: bold;
  }
  .cards-config .suit,
  .cards-config .value,
  .cards-config .faces {
    text-align: center;
  }
  .cards-config .drawn {
    flex: 0 0 64px;
    text-align: right;
  }
  .cards-config .faces {
    flex: 0 0 48px;
  }
  .cards-config .controls {
    flex: 0 0 24px;
    text-align: right;
    padding-right: 4px;
  }
  .cards-config .controls > a {
    margin: 0 2px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-12);
    text-align: center;
  }
  .cards-config .controls > a[disabled] {
    color: var(--color-text-inactive);
  }
  .cards-config .form-footer > button {
    min-width: unset;
  }
  /* --------------------------------------- */
  /*  Macro Configuration                    */
  /* --------------------------------------- */
  .macro-config {
    min-width: 460px;
    min-height: 460px;
  }
  /* -------------------------------------------- */
  /*  Region Configuration                        */
  /* -------------------------------------------- */
  .region-config .tab {
    gap: 0.5rem;
    overflow: hidden;
  }
  .region-config .tab header {
    font-weight: bold;
    font-size: var(--font-size-16);
  }
  .region-config .tab .region-element-controls {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
  }
  .region-config .tab .scrollable {
    --scroll-margin: 0.5rem;
    width: 100%;
    flex: 1;
  }
  .region-config .tab.inactive {
    background: rgba(0, 0, 0, 0.05);
    opacity: 0.8;
    border-style: dotted;
  }
  .region-config fieldset.region-behavior > a.draggable {
    cursor: var(--cursor-pointer);
  }
  .region-config input[name="elevation.bottom"]::placeholder,
  .region-config input[name="elevation.top"]::placeholder {
    font-size: var(--font-size-12);
  }
  /* ---------------------------------------- */
  /* RollTable Sheet                          */
  /* ---------------------------------------- */
  .roll-table-sheet {
    min-width: 360px;
  }
  .roll-table-sheet.edit-mode {
    min-width: 480px;
  }
  .roll-table-sheet table {
    flex: 1;
    height: 0;
    margin: 0;
    padding: 0;
  }
  .roll-table-sheet table thead,
  .roll-table-sheet table tbody {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  .roll-table-sheet table tbody {
    flex: inherit;
    height: inherit;
  }
  .roll-table-sheet table tr {
    border: 1px solid transparent;
    flex-wrap: nowrap;
    gap: 2px;
  }
  .roll-table-sheet table tr.drawn > td.details {
    color: var(--color-text-subtle);
  }
  .roll-table-sheet table tr.roulette {
    background: var(--table-row-color-highlight);
    border-color: var(--color-border);
  }
  .roll-table-sheet table th.controls {
    margin-right: 0.5rem;
  }
  .roll-table-sheet table th,
  .roll-table-sheet table td {
    justify-content: center;
    padding: 4px 0;
  }
  .roll-table-sheet table th.image,
  .roll-table-sheet table td.image {
    flex: 0 0 48px;
    padding-left: 4px;
  }
  .roll-table-sheet table th.details,
  .roll-table-sheet table td.details {
    justify-content: start;
    text-align: left;
  }
  .roll-table-sheet table th {
    font-weight: 600;
  }
  .roll-table-sheet table td.image {
    align-self: start;
  }
  .roll-table-sheet table td.image > img {
    flex: 0 0 32px;
    height: 32px;
    object-fit: contain;
  }
  .roll-table-sheet table td.details {
    user-select: text;
  }
  .roll-table-sheet table td.details > strong.name {
    flex-basis: 100%;
  }
  .roll-table-sheet table td.details > .description > p:last-of-type {
    margin-bottom: 0;
  }
  .roll-table-sheet table td.controls {
    gap: 1px;
  }
  .roll-table-sheet.edit-mode header.sheet-header button {
    flex: 0;
    margin-left: auto;
  }
  .roll-table-sheet.edit-mode input[name=formula] {
    flex: 0 0 200px;
  }
  .roll-table-sheet.edit-mode section[data-tab=results] {
    flex: 1;
    height: 0;
  }
  .roll-table-sheet.edit-mode table .details > .uuid {
    color: var(--color-text-secondary);
    font-size: var(--font-size-12);
  }
  .roll-table-sheet.edit-mode table .details > .description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .roll-table-sheet.edit-mode table .weight {
    flex: 0 0 64px;
  }
  .roll-table-sheet.edit-mode table .range {
    flex: 0 0 120px;
    gap: 2px;
  }
  .roll-table-sheet.edit-mode table .range .dash {
    flex: none;
  }
  .roll-table-sheet.edit-mode table .controls {
    flex: 0 0 80px;
    padding-right: 0;
  }
  .roll-table-sheet.edit-mode table input {
    flex: 0 0 48px;
    text-align: center;
  }
  .roll-table-sheet.view-mode header.sheet-header {
    display: grid;
    gap: 0 1rem;
    grid-template: "img title button" auto "img subtitle button" 2rem / 4rem auto min-content;
  }
  .roll-table-sheet.view-mode header.sheet-header img {
    align-self: start;
    grid-area: img;
  }
  .roll-table-sheet.view-mode header.sheet-header h1 {
    align-self: baseline;
    font-size: 2.5rem;
    grid-area: title;
    margin: 0;
  }
  .roll-table-sheet.view-mode header.sheet-header h4 {
    color: var(--color-text-subtle);
    grid-area: subtitle;
    margin: 0;
  }
  .roll-table-sheet.view-mode header.sheet-header button {
    grid-area: button;
  }
  .roll-table-sheet.view-mode table tbody {
    width: 100%;
  }
  .roll-table-sheet.view-mode table tbody tr.drawn > .range {
    color: var(--color-text-subtle);
  }
  .roll-table-sheet.view-mode table th.range,
  .roll-table-sheet.view-mode table td.range,
  .roll-table-sheet.view-mode table th.controls,
  .roll-table-sheet.view-mode table td.controls {
    flex: 0 0 64px;
  }
  /* ---------------------------------------- */
  /* TableResult Config                       */
  /* ---------------------------------------- */
  .table-result-config .range .form-fields {
    flex: 0;
    flex-wrap: nowrap;
  }
  .table-result-config prose-mirror {
    --min-height: 200px;
  }
  /* ---------------------------------------- */
  /* Scene Config                             */
  /* ---------------------------------------- */
  .scene-config .tab {
    flex: 1;
    height: 0;
  }
  /* ---------------------------------------- */
  /* Token Config                             */
  /* ---------------------------------------- */
  .token-config .bar-data .sep {
    flex: 0 0 16px;
    text-align: center;
    font-size: 1.5em;
    line-height: 24px;
  }
  .token-config input[name="sight.range"],
  .token-config .detection-mode .range > input::placeholder {
    font-size: var(--font-size-12);
  }
  .token-config .detection-mode {
    display: grid;
    grid-template-columns: 5fr 3fr 2fr 1fr;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: 0;
    border: none;
  }
  .token-config .detection-mode .enabled {
    justify-self: center;
  }
  .token-config .detection-mode .controls {
    justify-self: end;
  }
  /* ---------------------------------------- */
  /* User Config                              */
  /* ---------------------------------------- */
  .user-config img.avatar {
    flex: 0 0 64px;
    height: 64px;
    object-fit: contain;
  }
  /* ---------------------------------------- */
  /* Wall Config                              */
  /* ---------------------------------------- */
  .wall-config input.threshold {
    flex: 0 0 3rem;
  }
  .wall-config .form-group.door-sound .form-fields {
    gap: 1rem;
  }
  .wall-config .form-group.door-sound .form-fields a {
    flex-grow: 0;
    font-size: var(--font-size-16);
  }
  /* ----------------------------------------- */
  /*  Main Menu                                */
  /* ----------------------------------------- */
  #menu {
    width: 360px;
    flex: none;
    overflow: hidden;
    background: var(--color-cool-5-75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 0 30px #000;
    border-radius: 6px;
    pointer-events: all;
    z-index: calc(var(--z-index-window) + 1);
    outline: none;
    border: none;
    /* Open and Close Animation */
    visibility: hidden;
    max-height: 0;
    transition: visibility 0s 250ms, max-height 250ms ease-in-out;
    /* Menu Items */
  }
  #menu.active {
    transition: max-height 250ms ease-in-out;
    visibility: visible;
    max-height: 50%;
  }
  #menu #main-menu-items {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.5rem;
  }
  #menu #main-menu-items li {
    align-items: center;
    cursor: var(--cursor-pointer);
    gap: 1.5rem;
    color: var(--color-light-1);
  }
  #menu #main-menu-items li > i {
    flex: 0 0 24px;
    font-size: var(--font-size-18);
    opacity: 0.5;
  }
  #menu #main-menu-items li h2 {
    font-size: var(--font-size-24);
    margin: 0;
  }
  #menu #main-menu-items li:hover {
    text-shadow: 0 0 10px var(--color-shadow-primary);
  }
  @media (prefers-reduced-transparency) {
    #menu {
      background: var(--color-cool-5);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }
  /* ----------------------------------------- */
  /*  Hotbar                                   */
  /* ----------------------------------------- */
  #hotbar {
    --hotbar-size: 60px;
    --button-size: 24px;
    flex: none;
    width: max-content;
    height: var(--hotbar-size);
    margin: 0 0 16px;
    gap: 8px;
    /** Page Controls */
  }
  #hotbar.compact,
  #hotbar.md.offset,
  #hotbar.sm {
    height: calc((var(--hotbar-size) * 2) + 8px);
  }
  #hotbar.compact #action-bar,
  #hotbar.md.offset #action-bar,
  #hotbar.sm #action-bar {
    width: calc((var(--hotbar-size) * 5) + 32px);
  }
  #hotbar.offset:not(.lg, .min) {
    --offset: 0;
    transform: translateX(var(--offset));
  }
  #hotbar.min {
    transform: translateX(-70px);
  }
  #hotbar.faded-ui {
    transition: opacity var(--ui-fade-delay) var(--ui-fade-duration), transform 250ms ease;
  }
  #hotbar.faded-ui:hover {
    transition: opacity var(--ui-fade-duration), transform 250ms ease;
  }
  #hotbar #action-bar {
    flex: none;
    width: auto;
    height: 100%;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    pointer-events: all;
  }
  #hotbar #action-bar .slot {
    position: relative;
    flex: none;
    width: var(--hotbar-size);
    height: var(--hotbar-size);
    border: 2px solid transparent;
    border-radius: 10px;
    background: var(--slot-color, var(--color-cool-5-90));
    cursor: var(--cursor-pointer);
  }
  #hotbar #action-bar .slot .key {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    line-height: 20px;
    padding-right: 2px;
    background: var(--key-bg-color-empty, var(--color-cool-5));
    border-radius: 10px 0 8px 0;
    color: var(--key-text-color, var(--color-light-1));
    text-align: center;
    pointer-events: none;
  }
  #hotbar #action-bar .slot.full .key {
    background: var(--key-bg-color-full, var(--color-cool-5));
  }
  #hotbar #action-bar .slot .slot-icon {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px;
    pointer-events: none;
  }
  #hotbar #action-bar .slot:hover {
    border: 2px solid var(--color-warm-1);
  }
  #hotbar #action-bar .slot.drop-target {
    background: var(--color-cool-4);
    border: 2px solid var(--color-warm-2);
  }
  #hotbar button {
    --button-text-color: var(--color-light-1);
    --button-hover-text-color: var(--color-warm-2);
    padding: 0;
    transition: opacity 0.25s;
    pointer-events: all;
  }
  #hotbar button:hover {
    opacity: 1;
    box-shadow: none;
  }
  #hotbar button:focus {
    outline: none;
    box-shadow: none;
  }
  #hotbar .hotbar-controls {
    flex: none;
    height: var(--hotbar-size);
    justify-content: space-evenly;
    flex-wrap: nowrap;
    gap: 4px;
  }
  #hotbar .hotbar-controls button {
    --button-size: 1.5rem;
    --control-size: 1.5rem;
  }
  #hotbar #hotbar-controls-left {
    align-content: flex-end;
  }
  #hotbar #hotbar-controls-right {
    align-items: stretch;
  }
  #hotbar #hotbar-controls-right > div.flexcol {
    justify-content: space-evenly;
  }
  #hotbar #hotbar-page-controls {
    position: relative;
    justify-content: space-between;
  }
  #hotbar #hotbar-page-controls .hotbar-page-control {
    --button-text-color: var(--page-control-color, var(--color-cool-5));
    --fa-display: inline-grid;
    font-size: var(--font-size-18);
  }
  #hotbar #hotbar-page-controls .page-next::before {
    transform: scaleX(0.75);
  }
  #hotbar #hotbar-page-controls .page-prev::before {
    transform: scaleX(0.75) scaleY(-1);
  }
  #hotbar #hotbar-page-controls .hotbar-page-number {
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    color: var(--color-light-2);
  }
  /* ----------------------------------------- */
  /*  Game Pause                               */
  /* ----------------------------------------- */
  #pause {
    width: 100%;
    height: 180px;
    position: fixed;
    top: calc(50vh - 100px);
    left: 0;
    background: linear-gradient(to right, transparent 0%, var(--color-cool-5-50) 40%, var(--color-cool-5-50) 60%, transparent 100%);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    pointer-events: none;
    z-index: calc(var(--z-index-canvas) + 1);
  }
  #pause.paused {
    display: flex;
    animation: pulse 3s ease-in-out infinite;
  }
  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.025);
    }
    100% {
      transform: scale(1);
    }
  }
  #pause img {
    height: 100px;
    width: 100px;
    border: none;
    box-shadow: none;
    --fa-animation-duration: 5s;
  }
  #pause figcaption {
    margin: 0;
    padding: 0;
    font-size: var(--font-size-24);
    font-family: var(--font-serif);
    text-transform: uppercase;
    font-weight: bold;
    color: #ada7b8;
    letter-spacing: 0.3em;
    line-height: 1rem;
    font-style: normal;
  }
  /* ------------------------------------------ */
  /*  Players                                   */
  /* ------------------------------------------ */
  #players {
    flex: none;
    gap: 8px;
    color: var(--text-color);
    font-size: var(--font-size-12);
    /* Inactive Players (Expand and Collapse) */
    /* Performance Monitoring */
  }
  #players #players-active,
  #players #players-inactive {
    pointer-events: all;
    width: 200px;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 8px;
  }
  #players #players-active {
    flex: none;
  }
  #players #players-inactive {
    max-height: 0;
    visibility: hidden;
    transition: max-height 0.5s ease-in-out, visibility 0.5s 0s;
  }
  #players #players-expand {
    transition: transform 0.25s;
  }
  #players.expanded #players-inactive {
    visibility: visible;
    max-height: 300px;
  }
  #players.expanded #players-expand {
    transform: rotate(180deg);
  }
  #players .players-list {
    gap: 4px;
  }
  #players .player {
    color: var(--player-name-color);
    line-height: 20px;
    gap: 4px;
  }
  #players .player.idle .player-name {
    color: var(--player-name-idle-color);
  }
  #players .player.idle .player-name::after {
    content: "\f880";
    font-family: var(--font-awesome);
    margin-left: 0.5em;
  }
  #players .player.self .player-name {
    color: var(--player-name-self-color);
  }
  #players .player::before {
    content: "";
    display: block;
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    background: var(--player-color);
    border: 1px solid var(--player-border);
    border-radius: 100%;
  }
  #players #performance-stats {
    font-family: var(--font-monospace);
    gap: 8px;
  }
  #players #performance-stats #latency {
    flex: none;
  }
  #players #performance-stats #fps {
    flex: 1;
  }
  #players #performance-stats label {
    margin-right: 4px;
  }
  #players #performance-stats .good .average {
    color: var(--color-rating-good);
  }
  #players #performance-stats .fair .average {
    color: var(--color-rating-fair);
  }
  #players #performance-stats .poor .average {
    color: var(--color-rating-poor);
  }
  #players #performance-stats button {
    --button-size: 20px;
    background: none;
    border: none;
    pointer-events: all;
  }
  /* ----------------------------------------- */
  /*  Scene Controls                           */
  /* ----------------------------------------- */
  #scene-controls {
    flex: 1;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    pointer-events: none;
  }
  #scene-controls > menu {
    flex: none;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 8px;
  }
  #scene-controls #scene-controls-controls {
    width: var(--control-size);
  }
  #scene-controls #scene-controls-tools {
    flex-wrap: wrap;
  }
  /* ---------------------------------------- */
  /*  Scene Navigation                        */
  /* ---------------------------------------- */
  #scene-navigation {
    flex: 1;
    overflow: visible;
    max-height: 100%;
    padding-right: 30px;
    gap: 0.5rem;
    position: relative;
  }
  #scene-navigation #scene-navigation-expand {
    position: absolute;
    top: 4px;
    right: 0;
    width: 24px;
    height: 24px;
    font-size: var(--font-size-12);
    text-align: center;
    line-height: 24px;
    pointer-events: all;
  }
  #scene-navigation #scene-navigation-expand > i {
    pointer-events: none;
    transition: transform 0.25s;
  }
  #scene-navigation .scene-navigation-menu {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #scene-navigation .scene-navigation-menu .scene {
    width: 100%;
    max-width: 20vw;
    position: relative;
    padding: 0.5rem;
    font-size: var(--font-size-12);
    transition: background-color, opacity, color 0.25s;
    display: block;
  }
  #scene-navigation .scene-navigation-menu .scene .scene-name {
    display: block;
  }
  #scene-navigation .scene-navigation-menu .scene.active,
  #scene-navigation .scene-navigation-menu .scene.view,
  #scene-navigation .scene-navigation-menu .scene.gm {
    padding-right: 1.5rem;
  }
  #scene-navigation .scene-navigation-menu .scene.active::after,
  #scene-navigation .scene-navigation-menu .scene.view::after,
  #scene-navigation .scene-navigation-menu .scene.gm::after {
    display: flex;
    height: 100%;
    position: absolute;
    right: 0.5rem;
    top: 0;
    justify-content: center;
    align-items: center;
    content: "\f070";
    font-family: var(--font-awesome);
    font-size: var(--font-size-10);
    color: var(--color-text-emphatic);
    opacity: 0.5;
  }
  #scene-navigation .scene-navigation-menu .scene.active {
    border-color: var(--toggle-border-color);
  }
  #scene-navigation .scene-navigation-menu .scene.active::after {
    content: "\f005";
  }
  #scene-navigation .scene-navigation-menu .scene.view {
    border-color: var(--toggle-border-color);
  }
  #scene-navigation .scene-navigation-menu .scene.view::after {
    content: "\f192";
  }
  #scene-navigation .scene-navigation-menu .scene:hover .scene-name {
    text-shadow: 0 0 2px var(--color-shadow-highlight);
  }
  #scene-navigation .scene-navigation-menu .scene.drop-target-before::before,
  #scene-navigation .scene-navigation-menu .scene.drop-target-after::before {
    display: block;
    content: "";
    border-top: 2px solid var(--color-border-highlight);
    width: 100%;
    position: absolute;
    left: 0;
    top: -6px;
  }
  #scene-navigation .scene-navigation-menu .scene.drop-target-after::before {
    top: unset;
    bottom: -6px;
  }
  #scene-navigation .scene-navigation-menu .scene-players {
    display: flex;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: -6px;
    left: 2px;
  }
  #scene-navigation .scene-navigation-menu .scene-players .scene-player {
    width: 12px;
    height: 12px;
    line-height: 10px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 100%;
    color: #FFF;
    font-size: 8px;
    text-align: center;
  }
  #scene-navigation #scene-navigation-active {
    flex: none;
  }
  #scene-navigation #scene-navigation-inactive {
    flex: 1;
    height: 0;
    padding-bottom: calc(var(--hotbar-height) + 1rem);
    visibility: hidden;
  }
  #scene-navigation.expanded #scene-navigation-inactive {
    visibility: visible;
  }
  #scene-navigation.expanded #scene-navigation-expand > i {
    transform: rotate(180deg);
  }
  /* ---------------------------------------- */
  /* Notifications                            */
  /* ---------------------------------------- */
  #notifications {
    position: fixed;
    top: 10vh;
    width: 100%;
    margin: 0;
    padding: 0 20%;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    list-style: none;
    z-index: var(--z-index-notification);
    pointer-events: none;
  }
  #notifications > .notification {
    box-shadow: 0 0 10px black;
  }
  #notifications > .notification::after {
    content: "\f057";
    font-family: var(--font-awesome);
    font-weight: 900;
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    line-height: 16px;
  }
  .notification {
    --border-color: transparent;
    --background-color: rgba(0, 0, 0, 0.5);
    --icon-glyph: "";
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0.5rem 1rem;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--color-light-3);
    font-size: var(--font-size-14);
    line-height: 1em;
    text-shadow: 1px 1px black;
    pointer-events: all;
    /** Progress Bars */
    /** Software Update Channels */
  }
  .notification > p {
    margin: 0;
    order: 1;
  }
  .notification > .pct {
    display: none;
    font-weight: bold;
    margin-right: 0.5rem;
    order: 0;
  }
  .notification::before {
    content: var(--icon-glyph);
    font-family: var(--font-awesome);
    font-weight: 900;
    margin-right: 8px;
  }
  .notification.info {
    --icon-glyph: "\f05a";
    --background-color: var(--color-level-info-bg);
    --border-color: var(--color-level-info);
  }
  .notification.warning {
    --background-color: var(--color-level-warning-bg);
    --border-color: var(--color-level-warning);
    --icon-glyph: "\f071";
    color: var(--color-light-2);
  }
  .notification.error {
    --background-color: var(--color-level-error-bg);
    --border-color: var(--color-level-error);
    --icon-glyph: "\f06a";
  }
  .notification.success {
    --background-color: var(--color-level-success-bg);
    --border-color: var(--color-level-success);
    --icon-glyph: "\f00c";
  }
  .notification.progress {
    background: linear-gradient(90deg, var(--background-color) var(--pct), var(--border-color) calc(var(--pct) + 2px), rgba(0, 0, 0, 0.8) calc(var(--pct) + 2px), rgba(0, 0, 0, 0.5) 100%);
  }
  .notification.progress > .pct {
    display: inline-block;
  }
  .notification.channel-hint {
    width: 100%;
    flex: none;
  }
  .notification.stable {
    --background-color: rgba(138, 211, 4, 0.4);
    --icon-glyph: "\f6d9";
  }
  .notification.testing {
    --background-color: rgba(211, 192, 4, 0.4);
    --icon-glyph: "\f0ad";
  }
  .notification.development {
    --background-color: rgba(211, 119, 4, 0.4);
    --icon-glyph: "\f6e3";
  }
  .notification.prototype {
    --background-color: rgba(211, 20, 4, 0.4);
    --icon-glyph: "\f1e2";
  }
  /* ---------------------------------------- */
  /*  Faded Elements                          */
  /* ---------------------------------------- */
  .faded-ui {
    opacity: var(--ui-fade-opacity);
    transition: opacity var(--ui-fade-delay) var(--ui-fade-duration);
  }
  .faded-ui:hover {
    transition: opacity var(--ui-fade-duration);
    opacity: 1;
  }
  /* ---------------------------------------- */
  /* HUD Container                            */
  /* ---------------------------------------- */
  #hud {
    position: absolute;
    transform-origin: top left;
    pointer-events: none;
    z-index: calc(var(--z-index-canvas) + 1);
  }
  #hud > * {
    position: absolute;
    text-align: center;
    pointer-events: none;
    transform-origin: top left;
  }
  /* ---------------------------------------- */
  /* HUD Application                          */
  /* ---------------------------------------- */
  .placeable-hud {
    --column-width: 50px;
    --control-size: 35px;
  }
  .placeable-hud .palette {
    visibility: hidden;
    position: absolute;
    background: var(--control-bg-color);
    border: 1px solid var(--control-border-color);
    border-radius: 4px;
    pointer-events: all;
    box-shadow: 0 0 10px var(--color-shadow-dark);
  }
  .placeable-hud .palette.active {
    visibility: visible;
  }
  .placeable-hud .col {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    height: 100%;
    gap: 8px;
  }
  .placeable-hud .col.left {
    left: calc(-1 * var(--column-width) - 8px);
    width: var(--column-width);
    justify-content: flex-start;
    align-items: flex-end;
  }
  .placeable-hud .col.left .palette {
    right: calc(var(--column-width) + 8px);
  }
  .placeable-hud .col.middle {
    width: 100%;
    left: 0;
    justify-content: space-between;
  }
  .placeable-hud .col.middle .palette {
    top: -8px;
    transform: translate(0, -100%);
  }
  .placeable-hud .col.right {
    right: calc(-1 * var(--column-width) - 8px);
    width: var(--column-width);
    justify-content: flex-start;
    align-items: flex-start;
  }
  .placeable-hud .col.right .palette {
    left: calc(var(--column-width) + 8px);
  }
  .placeable-hud input[type="text"] {
    --input-background-color: var(--control-bg-color);
    --input-border-color: var(--control-border-color);
    --input-text-color: var(--control-icon-color);
    width: 100%;
    box-shadow: 0 0 10px var(--color-shadow-dark);
    height: var(--control-size);
    line-height: var(--control-size);
    border-radius: 8px;
    font-size: var(--font-size-24);
    font-weight: bold;
    text-align: center;
  }
  .placeable-hud .control-icon {
    flex: 0 0 var(--control-size);
    padding: 4px;
    line-height: var(--control-size);
    font-size: var(--font-size-24);
    box-shadow: 0 0 10px var(--color-shadow-dark);
    border-radius: 4px;
  }
  .placeable-hud .control-icon img {
    width: 100%;
    height: 100%;
    opacity: 0.7;
    filter: var(--control-icon-filter);
  }
  .placeable-hud .control-icon:hover img {
    opacity: 1;
  }
  .placeable-hud .control-icon.active {
    --control-bg-color: var(--control-active-bg-color);
    --control-hover-bg-color: var(--control-active-bg-color);
    --control-border-color: var(--control-active-border-color);
    --control-hover-border-color: var(--control-active-border-color);
    --control-icon-color: var(--control-active-icon-color);
    --control-hover-icon-color: var(--control-active-icon-color);
    outline: none;
    text-shadow: none;
  }
  .placeable-hud .control-icon.active img {
    opacity: 1;
  }
  .placeable-hud .attribute {
    flex: 0 0 var(--control-size);
  }
  .placeable-hud .attribute.elevation {
    color: var(--control-icon-color);
    position: relative;
    width: var(--column-width);
  }
  .placeable-hud .attribute.elevation > i.fas {
    position: absolute;
    top: -5px;
    left: -5px;
    font-size: var(--font-size-15);
  }
  /* ---------------------------------------- */
  /* Token HUD                                */
  /* ---------------------------------------- */
  #token-drop {
    opacity: 0.5;
    z-index: calc(var(--z-index-window) + 1);
    border: none;
  }
  #token-hud .col {
    height: calc(100% + 100px);
    top: -50px;
  }
  #token-hud .col.left {
    justify-content: center;
  }
  #token-hud .col.right {
    --column-width: var(--control-size);
    justify-content: center;
  }
  #token-hud .attribute.bar1 {
    bottom: 0;
  }
  #token-hud .attribute.bar1 input {
    border: 1px solid #7cd000;
  }
  #token-hud .attribute.bar2 {
    top: 0;
  }
  #token-hud .attribute.bar2 input {
    border: 1px solid #659db5;
  }
  #token-hud .status-effects {
    --effect-columns: 5;
    --effect-size: 24px;
    display: grid;
    grid-template-columns: repeat(var(--effect-columns), var(--effect-size));
    padding: 3px;
    gap: 3px;
  }
  #token-hud .status-effects .effect-control {
    width: var(--effect-size);
    height: var(--effect-size);
    margin: 0;
    padding: 0;
    border: none;
    opacity: 0.5;
    filter: var(--control-icon-filter);
    cursor: var(--cursor-pointer);
  }
  #token-hud .status-effects .effect-control:hover {
    opacity: 0.7;
  }
  #token-hud .status-effects .effect-control.active {
    opacity: 1;
  }
  #token-hud .status-effects .effect-control.overlay {
    opacity: 1;
    border: 1px solid var(--control-active-border-color);
  }
  #token-hud .movement-actions {
    display: flex;
    flex-direction: column;
    width: auto;
    min-width: 140px;
    padding: 3px;
    gap: 3px;
    text-align: left;
    font-size: var(--font-size-13);
    color: var(--control-icon-color);
  }
  #token-hud .movement-actions .movement-action-control {
    flex: 1;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 3px;
    white-space: nowrap;
  }
  #token-hud .movement-actions .movement-action-control:hover {
    color: var(--control-hover-icon-color);
    border-color: var(--control-hover-border-color);
  }
  #token-hud .movement-actions .movement-action-control:hover img {
    opacity: 1;
  }
  #token-hud .movement-actions .movement-action-control.active {
    color: var(--control-active-icon-color);
    border-color: var(--control-active-border-color);
  }
  #token-hud .movement-actions .movement-action-control > span {
    display: inline-flex;
    gap: 4px;
  }
  #token-hud .movement-actions .movement-action-control > span:has(> i) {
    align-items: center;
  }
  #token-hud .movement-actions .movement-action-control img {
    width: 16px;
    height: 16px;
    opacity: 0.7;
    filter: var(--hud-icon-filter, none);
  }
  /* ---------------------------------------- */
  /* Ruler Labels                             */
  /* ---------------------------------------- */
  #measurement {
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  #measurement .ruler-labels {
    width: 100%;
    height: 100%;
  }
  #measurement .waypoint-label {
    --transformX: -50%;
    --transformY: 0%;
    position: absolute;
    top: var(--position-y);
    left: var(--position-x);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--control-bg-color);
    border-radius: 8px;
    transform-origin: top left;
    transform: scale(var(--ui-scale)) translate(var(--transformX), var(--transformY));
  }
  #measurement .waypoint-label .icon {
    color: var(--control-icon-color);
    font-size: var(--font-size-20);
  }
  #measurement .waypoint-label .img {
    width: 20px;
    height: 20px;
    opacity: 0.7;
    filter: var(--hud-icon-filter, none);
    background: transparent no-repeat center / contain;
  }
  #measurement .waypoint-label .total-measurement,
  #measurement .waypoint-label .total-elevation {
    color: var(--color-text-emphatic);
    font-size: var(--font-size-24);
  }
  #measurement .waypoint-label .delta-measurement,
  #measurement .waypoint-label .delta-elevation {
    color: var(--color-text-subtle);
    font-size: var(--font-size-16);
  }
  #measurement .waypoint-label.secret {
    background: var(--toggle-bg-color);
    border: 2px solid var(--toggle-active-border-color);
  }
  #measurement .distance-ruler-labels .waypoint-label {
    --transformY: -100%;
  }
  #sidebar {
    --sidebar-scroll-gutter: 12px;
    --sidebar-full-width: calc(var(--sidebar-width) + var(--sidebar-scroll-gutter));
    flex: none;
    height: 100%;
    display: flex;
    align-items: start;
  }
  #sidebar .tabs li {
    position: relative;
  }
  #sidebar-content {
    flex: none;
    width: var(--sidebar-full-width);
    height: 100%;
    align-items: flex-end;
    overflow: hidden;
    pointer-events: all;
    margin-right: calc(var(--sidebar-full-width) * -1);
    margin-left: 0;
    transition: margin-right 250ms ease, margin-left 250ms ease;
  }
  #sidebar-content .tab {
    flex: 1;
    width: var(--sidebar-width);
  }
  #sidebar-content.expanded {
    margin-right: 0;
    margin-left: calc(var(--sidebar-scroll-gutter) * -1);
  }
  /* The Sidebar Tabs Container */
  #sidebar-tabs {
    flex: none;
    padding: 16px 16px 16px 0;
    border: none;
    line-height: 1;
  }
  #sidebar-tabs > menu {
    gap: 8px;
    pointer-events: all;
  }
  #sidebar-tabs > menu .ui-control[data-action="tab"] {
    cursor: var(--cursor-pointer);
  }
  .sidebar-tab {
    --sidebar-item-height: 48px;
    --sidebar-header-height: 32px;
    --sidebar-folder-height: 24px;
    background: var(--sidebar-background, var(--color-cool-5-90));
  }
  .sidebar-tab:not(.sidebar-popout) {
    border-radius: 5px 0 0 5px;
  }
  .sidebar-tab button {
    --button-size: 2rem;
  }
  .sidebar-tab button.icon,
  .sidebar-tab button.inline-control {
    --button-size: 1.5rem;
  }
  /* Sidebar Popouts */
  .sidebar-popout {
    width: var(--sidebar-width);
  }
  /* ---------------------------------- */
  /*  Directories                       */
  /* ---------------------------------- */
  .directory {
    color: var(--color-text-primary);
    overflow: hidden;
    /* Directory Header */
    /* Directory Lists */
    /* Directory Items */
    /* Directory Footer */
  }
  .directory.sidebar-tab .window-content {
    padding: 0;
  }
  .directory .directory-header {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    line-height: var(--sidebar-header-height);
    text-align: center;
    margin-block: 8px;
  }
  .directory .directory-header .action-buttons {
    padding-inline: 8px;
    gap: 8px;
  }
  .directory .directory-header .action-buttons button {
    font-size: var(--font-size-13);
    padding: 0 0.25rem;
  }
  .directory .directory-header .action-buttons button span {
    max-width: 240px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .directory .directory-header search {
    display: flex;
    align-items: center;
    padding-inline: 8px;
    gap: 8px;
  }
  .directory .directory-header search input {
    flex: 1;
    background: transparent;
  }
  .directory .directory-list {
    flex: 1;
    overflow: hidden auto;
  }
  .directory .directory-item {
    position: relative;
    border-top: var(--sidebar-separator, 1px solid var(--color-dark-1));
    margin-bottom: 0;
    /* Subdirectories */
  }
  .directory .directory-item img {
    flex: 0 0 var(--sidebar-item-height);
    height: var(--sidebar-item-height);
    width: var(--sidebar-item-height);
    object-fit: cover;
    object-position: 50% 0;
    border: none;
  }
  .directory .directory-item .entry-name {
    line-height: var(--sidebar-item-height);
  }
  .directory .directory-item.folder {
    border-top: 1px solid var(--color-dark-1);
  }
  .directory .directory-item.folder .directory-item {
    border-left: 1px solid var(--color-dark-1);
  }
  .directory .directory-item.document {
    gap: 8px;
  }
  .directory .directory-item:is(.context, .active)::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 1px solid var(--color-warm-2);
  }
  .directory .directory-item .subdirectory {
    border-left: 6px solid var(--sidebar-folder-color, var(--color-dark-1));
  }
  .directory .directory-item .subdirectory:empty {
    border: none;
  }
  .directory .directory-item .subdirectory > .directory-item:first-child {
    border-top: 1px solid var(--color-dark-1);
  }
  .directory .directory-item.entry:hover {
    background: var(--sidebar-entry-hover-bg, rgba(255, 255, 255, 0.1));
  }
  .directory .directory-item.entry:hover .entry-name {
    text-shadow: none;
  }
  .directory .directory-footer {
    flex: none;
    font-size: var(--font-size-14);
    line-height: var(--sidebar-header-height);
    gap: 8px;
  }
  .directory .directory-footer:not(:empty) {
    padding: 8px;
    background: rgba(0, 0, 0, 0.1);
  }
  /* Journal */
  .journal-sidebar .directory-item.entry {
    padding-inline: 8px;
  }
  .journal-sidebar .directory-item.entry .entry-name {
    line-height: var(--sidebar-header-height);
  }
  /* ---------------------------------- */
  /*  Folders                           */
  /* ---------------------------------- */
  li.folder {
    --folder-padding: 6px;
    /* Folder Headers */
    /* Drop Target */
  }
  li.folder > .folder-header {
    color: var(--color-light-2);
    display: flex;
    align-items: center;
    padding: var(--folder-padding);
    line-height: var(--sidebar-folder-height);
    background: var(--sidebar-folder-color, var(--color-dark-1));
    text-shadow: 0 0 3px var(--color-dark-1);
    position: sticky;
    top: 0;
    z-index: 4;
  }
  li.folder > .folder-header + .subdirectory > .folder > .folder-header {
    top: calc((var(--sidebar-folder-height) + var(--folder-padding) * 2) * 1);
    z-index: calc(4 - 1);
  }
  li.folder > .folder-header + .subdirectory > .folder > .folder-header + .subdirectory > .folder > .folder-header {
    top: calc((var(--sidebar-folder-height) + var(--folder-padding) * 2) * 2);
    z-index: calc(4 - 2);
  }
  li.folder > .folder-header + .subdirectory > .folder > .folder-header + .subdirectory > .folder > .folder-header + .subdirectory > .folder > .folder-header {
    top: calc((var(--sidebar-folder-height) + var(--folder-padding) * 2) * 3);
    z-index: calc(4 - 3);
  }
  li.folder > .folder-header > i {
    margin-right: 10px;
  }
  li.folder > .folder-header .folder-name {
    flex: 1;
    font-size: var(--font-size-16);
    line-height: var(--sidebar-folder-height);
  }
  li.folder > .folder-header .create-button {
    --button-text-color: var(--color-light-2);
    --button-border-color: transparent;
    --button-background-color: transparent;
    --button-hover-background-color: transparent;
    --button-hover-border-color: transparent;
    height: var(--sidebar-folder-height);
    position: relative;
    width: 20px;
    margin: 0 0 0 3px;
    text-align: center;
    text-shadow: inherit;
    padding: 0;
  }
  li.folder > .folder-header .create-button.create-folder {
    font-size: 120%;
  }
  li.folder > .folder-header .create-button.icon-plus::after {
    content: "\2b";
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 0.5rem;
    background: black;
    color: var(--color-light-1);
    padding: 1px;
    border-radius: 100%;
  }
  li.folder > .folder-header .create-button:hover {
    text-shadow: 0 0 6px var(--color-shadow-primary);
  }
  li.folder > .folder-header .create-button.icon-plus:hover::after {
    color: var(--color-text-accent);
  }
  li.folder.droptarget > .folder-header .folder-name {
    font-size: 120%;
  }
  li.folder.droptarget > .folder-header > i {
    text-shadow: 0 0 4px var(--color-shadow-primary);
    transform: scale(1.2);
    transform-origin: left;
    margin-right: 12px;
  }
  /* Collapsed */
  .directory li.folder:not(.expanded) .subdirectory {
    display: none;
  }
  .directory li.folder:not(.expanded) > .folder-header > i::before {
    content: "\f07b";
  }
  .directory li.folder:not(.expanded) > .folder-header .create-folder {
    display: none;
  }
  /* ---------------------------------- */
  /*  Scenes                            */
  /* ---------------------------------- */
  .scenes-sidebar {
    --sidebar-scene-height: 100px;
  }
  .scenes-sidebar .scene {
    color: var(--color-light-3);
    height: var(--sidebar-scene-height);
    border-top: var(--color-dark-1);
    background: var(--color-cool-5-90);
    gap: 0;
  }
  .scenes-sidebar .scene > img {
    width: 100%;
    height: 100%;
    flex: 0 0 100%;
    object-fit: cover;
    object-position: center;
  }
  .scenes-sidebar .scene .entry-name {
    position: absolute;
    inset: 0;
    padding: 0 0.25rem;
    place-content: center;
    text-align: center;
    font-size: 1.3em;
    font-weight: normal;
    text-shadow: 1px 1px 3px var(--color-shadow-dark);
    box-shadow: 0 0 20px var(--color-shadow-dark) inset;
    line-height: normal;
    overflow: hidden;
  }
  .scenes-sidebar .scene .entry-name:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  .scenes-sidebar .directory-item.entry:hover {
    background: var(--color-cool-5-90);
  }
  /* ---------------------------------- */
  /*  Compendium Packs                  */
  /* ---------------------------------- */
  .compendium-sidebar .compendium {
    height: 70px;
    position: relative;
    color: var(--color-light-2);
    border-top: 1px solid var(--color-dark-1);
  }
  .compendium-sidebar .compendium::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    pointer-events: none;
    transition: 500ms;
    z-index: 0;
  }
  .compendium-sidebar .compendium .compendium-banner {
    width: 100%;
    height: 100%;
    flex: 0 0 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.8;
    transition: 500ms;
  }
  .compendium-sidebar .compendium .compendium-name {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: normal;
    gap: 6px;
    padding: 0 8px;
    z-index: 1;
  }
  .compendium-sidebar .compendium .compendium-name strong {
    font-size: 1.3em;
    font-weight: normal;
    text-shadow: 1px 1px 3px var(--color-shadow-dark);
    text-align: center;
  }
  .compendium-sidebar .compendium .compendium-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: var(--font-size-12);
    padding: 1px 8px 0 4px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 0 3px 0 0;
    pointer-events: none;
    z-index: 1;
  }
  .compendium-sidebar .compendium .status-icons {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px;
    gap: 4px;
    font-size: var(--font-size-12);
    line-height: 16px;
    text-align: right;
    text-shadow: 0 0 4px black;
  }
  .compendium-sidebar .compendium.locked {
    color: var(--color-light-3);
  }
  .compendium-sidebar .compendium.locked::after {
    background: rgba(0, 0, 0, 0.4);
  }
  .compendium-sidebar .compendium:hover {
    color: var(--color-light-1);
  }
  .compendium-sidebar .compendium:hover .compendium-name i {
    text-shadow: none;
  }
  .compendium-sidebar .compendium:hover::after {
    background: rgba(0, 0, 0, 0);
  }
  /* ---------------------------------- */
  /*  Playlists                         */
  /* ---------------------------------- */
  .playlists-sidebar {
    --entry-height: 20px;
  }
  .playlists-sidebar .global-control,
  .playlists-sidebar .directory-list {
    font-size: var(--font-size-14);
  }
  .playlists-sidebar .global-control header,
  .playlists-sidebar .directory-list header {
    display: flex;
    gap: 5px;
    line-height: var(--entry-height);
    align-items: center;
  }
  .playlists-sidebar .global-control header strong,
  .playlists-sidebar .directory-list header strong,
  .playlists-sidebar .global-control header label,
  .playlists-sidebar .directory-list header label {
    flex: 1;
  }
  .playlists-sidebar .global-control button,
  .playlists-sidebar .directory-list button {
    --button-size: 1rem;
    --button-hover-background-color: transparent;
    --button-text-color: var(--color-text-primary);
    --button-hover-text-color: var(--color-text-accent);
    border: none;
    font-size: var(--font-size-11);
    transition: color 0.5s;
  }
  .playlists-sidebar .global-control button.fa-square,
  .playlists-sidebar .directory-list button.fa-square {
    --button-text-color: var(--color-text-accent);
  }
  .playlists-sidebar .global-control button.inactive,
  .playlists-sidebar .directory-list button.inactive,
  .playlists-sidebar .global-control button:disabled,
  .playlists-sidebar .directory-list button:disabled {
    --button-text-color: var(--color-text-subtle);
  }
  .playlists-sidebar .playlist.directory-item.document {
    display: flex;
    flex-direction: column;
    padding: 0 8px;
    gap: 0;
  }
  .playlists-sidebar .playlist.directory-item.document .playlist-sounds {
    padding-block: 4px;
  }
  .playlists-sidebar .expandable {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 250ms ease;
  }
  .playlists-sidebar .expandable .wrapper {
    overflow: hidden;
  }
  .playlists-sidebar .playlist header,
  .playlists-sidebar .global-volume header {
    cursor: var(--cursor-pointer);
  }
  .playlists-sidebar .playlist .expand,
  .playlists-sidebar .global-volume .expand {
    transition: all 250ms ease;
  }
  .playlists-sidebar .playlist.expanded .expand,
  .playlists-sidebar .global-volume.expanded .expand {
    transform: rotate(180deg);
  }
  .playlists-sidebar .playlist.expanded .expandable,
  .playlists-sidebar .global-volume.expanded .expandable {
    grid-template-rows: 1fr;
  }
  .playlists-sidebar .playlist-sounds,
  .playlists-sidebar .global-volume ol {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .playlists-sidebar .global-volume ol {
    padding: 8px;
  }
  .playlists-sidebar .sound {
    display: flex;
    flex-direction: column;
  }
  .playlists-sidebar .sound-controls {
    flex: 0 0 32px;
    justify-content: end;
  }
  .playlists-sidebar .sound-timer {
    font-size: var(--font-size-11);
    color: var(--color-text-secondary);
  }
  .playlists-sidebar .sound-playback,
  .playlists-sidebar .global-volume li {
    line-height: var(--entry-height);
    margin: 0;
    gap: 4px;
  }
  .playlists-sidebar .sound-playback strong,
  .playlists-sidebar .global-volume li strong,
  .playlists-sidebar .sound-playback .sound-timer,
  .playlists-sidebar .global-volume li .sound-timer {
    flex: 1;
  }
  .playlists-sidebar .sound-playback .volume-icon,
  .playlists-sidebar .global-volume li .volume-icon,
  .playlists-sidebar .sound-playback button,
  .playlists-sidebar .global-volume li button {
    flex-grow: 0;
    flex-shrink: 0;
  }
  .playlists-sidebar .sound-playback range-picker,
  .playlists-sidebar .global-volume li range-picker {
    flex: 2;
  }
  .playlists-sidebar .sound-playback range-picker input[type=range],
  .playlists-sidebar .global-volume li range-picker input[type=range] {
    height: unset;
  }
  .playlists-sidebar .sound-playback range-picker input[type=number],
  .playlists-sidebar .global-volume li range-picker input[type=number] {
    display: none;
  }
  .playlists-sidebar .playlist-header .playlist-name {
    line-height: var(--sidebar-header-height);
  }
  .playlists-sidebar .playlist-header .sound-controls {
    flex-basis: 64px;
  }
  .playlists-sidebar .global-control > header {
    padding: 8px;
    background: var(--color-dark-1);
    border-top: 1px solid var(--color-dark-1);
    border-bottom: 1px solid var(--color-dark-1);
    color: var(--color-light-2);
  }
  .playlists-sidebar .global-control .playlist-sounds {
    padding: 8px;
  }
  .playlists-sidebar .global-control .pin {
    font-size: var(--font-size-14);
  }
  /* ---------------------------------- */
  /*  Compendium                        */
  /* ---------------------------------- */
  .compendium-directory .window-header {
    background: none;
    border: none;
  }
  .compendium-directory .window-header .window-title {
    visibility: hidden;
  }
  .compendium-directory .window-content {
    overflow: visible;
  }
  .compendium-directory .window-content > .wrapper {
    flex: 1;
    position: relative;
  }
  .compendium-directory .compendium-header {
    margin-top: calc(var(--header-height) * -1);
  }
  .compendium-directory .header-banner {
    position: relative;
    height: 100px;
    color: var(--color-light-2);
  }
  .compendium-directory .header-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    mask-image: var(--header-mask, linear-gradient(black, transparent));
    border-bottom: var(--header-border, none);
    opacity: 0.8;
  }
  .compendium-directory .header-banner .compendium-name {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .compendium-directory .header-banner .compendium-name strong {
    width: 100%;
    padding: 16px;
    font-size: var(--font-size-20);
    font-family: var(--font-sans);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.5) 25%, rgba(0, 0, 0, 0.5) 75%, transparent);
  }
  .compendium-directory .header-banner .compendium-name strong::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--color-light-4), transparent);
  }
  .compendium-directory .directory-list {
    position: absolute;
    inset: 0;
  }
  .compendium-directory .directory-list .directory-item.entry > i {
    flex: none;
    margin-left: 8px;
  }
  /* ---------------------------------- */
  /*  Chat                              */
  /* ---------------------------------- */
  #sidebar-content #chat {
    padding: 4px 0;
    overflow: hidden;
    align-items: flex-end;
    width: 100%;
    gap: 8px;
  }
  #sidebar-content #chat .chat-scroll {
    direction: rtl;
  }
  #sidebar-content #chat .chat-log {
    direction: ltr;
    max-width: var(--sidebar-width);
  }
  #sidebar-content.active-chat {
    pointer-events: none;
  }
  /* ---------------------------------- */
  .chat-sidebar {
    --chat-message-spacing: 4px;
  }
  .chat-sidebar:not(.sidebar-popout) {
    background: transparent;
  }
  .chat-sidebar .chat-scroll {
    flex: 1;
    width: 100%;
    overflow: hidden auto;
    position: relative;
  }
  .chat-sidebar .chat-scroll.scrolled {
    mask-image: linear-gradient(to bottom, black 95%, transparent);
  }
  .chat-sidebar .chat-scroll.overflowed {
    pointer-events: all;
  }
  .chat-sidebar .chat-log {
    width: 100%;
  }
  .chat-sidebar .chat-form {
    position: relative;
    flex: none;
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-inline: var(--chat-message-spacing);
    pointer-events: all;
  }
  .chat-sidebar .jump-to-bottom {
    position: absolute;
    bottom: calc(100% + var(--chat-message-spacing));
  }
  .chat-sidebar .chat-controls {
    flex: none;
    display: flex;
    justify-content: space-between;
  }
  .chat-sidebar .chat-controls .control-buttons {
    display: flex;
    gap: 4px;
  }
  .chat-sidebar .chat-input {
    flex: 0 0 var(--chat-input-height);
  }
  #chat-message {
    --input-text-color: var(--text-color, var(--color-light-2));
    --input-placeholder-color: var(--placeholder-color, var(--color-light-5));
    margin: 0;
    padding: var(--chat-message-spacing);
    width: 100%;
    resize: none;
    background: var(--background-color, var(--color-cool-5));
    border: 2px solid var(--border-color, var(--color-cool-4));
    font-family: var(--font-body);
    transition: box-shadow 250ms, outline 250ms;
  }
  #chat-message::placeholder {
    font-size: var(--font-size-16);
    font-style: italic;
  }
  #chat-message:placeholder-shown:not(:focus) {
    place-content: center;
    text-align: center;
  }
  #chat-message:focus {
    outline-color: var(--color-warm-1);
  }
  #chat-message:focus::placeholder {
    color: transparent;
  }
  /* Popout-specific Styles */
  #chat-popout .window-content {
    padding: 0;
  }
  /* Chat Notifications */
  #chat-notifications {
    --chat-message-spacing: 4px;
    display: grid;
    grid-template-rows: 1fr calc(var(--chat-input-height) + 10px);
    align-items: end;
    position: relative;
    height: 0;
    width: var(--sidebar-width);
    flex: 1;
    order: 99;
  }
  #chat-notifications.active {
    --ui-fade-delay: 0;
    --ui-fade-duration: 100ms;
    opacity: 1;
  }
  #chat-notifications .chat-input {
    pointer-events: all;
    width: 100%;
    height: 60px;
    margin: 0 0 2px;
    min-height: unset;
    transition: all var(--ui-fade-duration) ease, opacity var(--ui-fade-delay) var(--ui-fade-duration);
  }
  #chat-notifications .chat-input:focus {
    --ui-fade-delay: 0;
    height: var(--chat-input-height);
    opacity: 1;
  }
  #chat-notifications .chat-input:hover {
    transition: all var(--ui-fade-duration) ease, opacity var(--ui-fade-duration);
  }
  #chat-notifications #roll-privacy {
    position: absolute;
    inset: auto auto 0 calc(100% + 16px);
  }
  #chat-notifications .overflow {
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    overflow: hidden auto;
  }
  #chat-notifications .chat-log {
    height: unset;
    flex: none;
  }
  #chat-notifications .chat-log .spacer,
  #chat-notifications .chat-log .deleting {
    flex: none;
  }
  /* ---------------------------------- */
  /*  Single Chat Message               */
  /* ---------------------------------- */
  .chat-message {
    margin: var(--chat-message-spacing);
    padding: 8px;
    font-size: var(--font-size-14);
    color: var(--color-dark-1);
    background: var(--chat-message-background);
    border: 2px solid var(--chat-message-border-color);
    border-radius: 6px;
    pointer-events: all;
  }
  .chat-message h4 {
    font-family: var(--font-sans);
    line-height: unset;
    color: inherit;
  }
  .chat-message button {
    height: var(--input-height);
  }
  .chat-message.deleting {
    padding: 0;
    overflow: hidden;
  }
  .chat-message .message-header {
    align-items: start;
    line-height: 20px;
    color: var(--color-dark-4);
  }
  .chat-message .message-header h4 {
    font-size: inherit;
    font-weight: inherit;
  }
  .chat-message .message-header .message-sender {
    flex: 3;
    margin: 0;
    white-space: nowrap;
  }
  .chat-message .message-header .message-metadata {
    flex: 2;
    text-align: right;
    font-size: var(--font-size-12);
    display: flex;
    justify-content: end;
    gap: 4px;
  }
  .chat-message .message-header .message-metadata .message-dismiss {
    margin-inline: 4px;
    font-size: var(--font-size-14);
  }
  .chat-message .message-header .flavor-text,
  .chat-message .message-header .whisper-to {
    flex: 0 0 100%;
    font-size: var(--font-size-12);
  }
  .chat-message .message-content {
    overflow: hidden;
    user-select: text;
    word-break: break-word;
  }
  .chat-message.emote {
    background: var(--color-emote-background);
    border: 2px solid var(--color-emote-border);
  }
  .chat-message.whisper {
    background: var(--color-whisper-background);
    border: 2px solid var(--color-whisper-border);
  }
  .chat-message.blind {
    background: var(--color-blind-background);
    border: 2px solid var(--color-blind-border);
  }
  .chat-message .cards-notification {
    align-items: center;
  }
  .chat-message .cards-notification > .icon {
    flex: 0 0 32px;
    height: 32px;
    margin-right: 8px;
  }
  .chat-message .cards-notification > p {
    margin: 0;
  }
  /* Roll Table Results */
  .chat-message .table-draw .table-description {
    border-top: 1px solid #b5b3a4;
    color: var(--color-dark-4);
    font-size: var(--font-size-12);
    padding: 5px 0;
  }
  .chat-message .table-draw ul.table-results {
    list-style: none;
    margin: 5px 0 0;
    padding: 0;
  }
  .chat-message .table-draw ul.table-results li {
    justify-content: start;
    border-bottom: 1px solid #b5b3a4;
    padding: 0.25rem 0;
  }
  .chat-message .table-draw ul.table-results li:last-of-type {
    padding-bottom: 0;
  }
  .chat-message .table-draw ul.table-results li > img {
    flex: 0 0 32px;
    width: 32px;
    margin-right: 4px;
    object-fit: cover;
  }
  .chat-message .table-draw ul.table-results li > a.content-link {
    flex: 0;
  }
  .chat-message .table-draw ul.table-results li > .description {
    flex-basis: 100%;
    padding-top: 0.25rem 0;
  }
  .chat-message .table-draw ul.table-results li > .description > p:first-of-type {
    margin-top: 0.125rem;
  }
  .chat-message .table-draw ul.table-results li > .description > p:last-of-type {
    margin-bottom: 0;
  }
  .chat-message .table-draw ul.table-results li:last-child {
    border-bottom: none;
  }
  /* ---------------------------------- */
  /*  Combat Tracker                    */
  /* ---------------------------------- */
  .combat-sidebar {
    --element-spacing: 8px;
    --element-spacing-half: 4px;
  }
  .combat-sidebar.active {
    display: flex;
    height: 0;
  }
  .combat-sidebar .window-content {
    padding: 0;
  }
  .combat-sidebar:not(.sidebar-popout),
  .combat-sidebar.sidebar-popout .window-content {
    flex-direction: column;
    gap: var(--element-spacing);
  }
  .combat-sidebar .combat-tracker-header,
  .combat-sidebar .combat-controls {
    flex: none;
    display: flex;
    padding: var(--element-spacing);
    gap: var(--element-spacing);
  }
  .combat-sidebar .combat-tracker-header {
    flex-direction: column;
    padding-bottom: 0;
  }
  .combat-sidebar .combat-tracker-header .encounters,
  .combat-sidebar .combat-tracker-header .encounter-controls {
    display: flex;
    align-items: center;
    gap: var(--element-spacing-half);
  }
  .combat-sidebar .combat-tracker-header .encounters.tabbed [data-action=trackerSettings] {
    margin-left: auto;
  }
  .combat-sidebar .combat-tracker-header .encounters.cycle {
    justify-content: space-between;
  }
  .combat-sidebar .combat-tracker-header .encounters .cycle-combats {
    flex: 1;
    display: flex;
    gap: var(--element-spacing);
    align-items: center;
    justify-content: center;
  }
  .combat-sidebar .combat-tracker-header .encounters .cycle-combats .encounter-count {
    color: var(--color-text-secondary);
  }
  .combat-sidebar .combat-tracker-header .encounter-controls .inline-control:disabled {
    visibility: hidden;
  }
  .combat-sidebar .combat-tracker-header .encounter-controls .control-buttons {
    gap: var(--element-spacing-half);
  }
  .combat-sidebar .combat-tracker-header .encounter-controls .spacer {
    flex: 0 0 24px;
    width: 24px;
  }
  .combat-sidebar .combat-tracker-header .encounter-controls .encounter-title {
    flex: 1;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-15);
  }
  .combat-sidebar .combat-tracker {
    flex: 1;
    overflow: hidden auto;
  }
  .combat-sidebar .combat-tracker .combatant {
    display: flex;
    align-items: center;
    gap: var(--element-spacing);
    padding: var(--element-spacing);
    margin: 0;
    cursor: var(--cursor-pointer);
    border-radius: 4px;
    color: var(--color-text-primary);
    font-size: var(--font-size-14);
  }
  .combat-sidebar .combat-tracker .combatant.hover,
  .combat-sidebar .combat-tracker .combatant:hover {
    background: var(--entry-hover-bg, rgba(255, 255, 255, 0.1));
  }
  .combat-sidebar .combat-tracker .combatant.active {
    background: var(--entry-active-bg, rgba(255, 255, 255, 0.15));
    position: relative;
  }
  .combat-sidebar .combat-tracker .combatant.active::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 1px solid var(--color-warm-2);
    border-radius: 4px;
  }
  .combat-sidebar .combat-tracker .combatant.active .token-initiative input {
    --input-background-color: var(--active-input-bg-color, var(--color-cool-5));
  }
  .combat-sidebar .combat-tracker .combatant.hide,
  .combat-sidebar .combat-tracker .combatant.defeated {
    color: var(--color-text-subtle);
  }
  .combat-sidebar .combat-tracker .combatant.hide img,
  .combat-sidebar .combat-tracker .combatant.defeated img {
    opacity: 0.3;
  }
  .combat-sidebar .combat-tracker .combatant.defeated .name {
    color: var(--color-warm-3);
    text-decoration: line-through;
  }
  .combat-sidebar .combat-tracker .token-image {
    flex: 0 0 var(--sidebar-item-height);
    height: var(--sidebar-item-height);
    width: var(--sidebar-item-height);
    object-fit: cover;
    object-position: center 0;
    border: none;
    border-radius: 4px;
  }
  .combat-sidebar .combat-tracker .token-name {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-self: stretch;
  }
  .combat-sidebar .combat-tracker .combatant-controls {
    display: flex;
    align-items: center;
    gap: var(--element-spacing-half);
  }
  .combat-sidebar .combat-tracker .token-effects {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    gap: 2px;
    height: 14px;
  }
  .combat-sidebar .combat-tracker .token-effect {
    --button-size: 14px;
    flex: 0 0 var(--button-size);
    width: var(--button-size);
    height: var(--button-size);
    filter: var(--token-effect-filter, none);
  }
  .combat-sidebar .combat-tracker .inline-control {
    --button-text-color: var(--color-text-subtle);
    font-size: var(--font-size-12);
  }
  .combat-sidebar .combat-tracker .inline-control.active {
    --button-text-color: var(--color-text-emphatic);
    --button-focus-outline-color: transparent;
  }
  .combat-sidebar .combat-tracker .token-resource {
    color: var(--color-text-secondary);
    flex: 0 0 24px;
    text-align: center;
  }
  .combat-sidebar .combat-tracker .token-initiative {
    flex: 0 0 var(--input-height);
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-text-emphatic);
  }
  .combat-sidebar .combat-tracker .token-initiative button {
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: var(--initiative-icon) no-repeat center / contain;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.45));
    transition: none;
  }
  .combat-sidebar .combat-tracker .token-initiative button:hover {
    background-image: var(--initiative-icon-hover);
    filter: drop-shadow(0 0 4px color-mix(in oklab, var(--color-warm-2), transparent 45%));
  }
  .combat-sidebar .combat-tracker .token-initiative input {
    padding: 0;
    text-align: center;
  }
  .combat-sidebar .combat-controls {
    padding-top: 0;
    align-items: center;
  }
  .combat-sidebar .combat-controls:empty {
    display: none;
  }
  .combat-sidebar button.combat-control-lg {
    flex: 1;
  }
  .combat-sidebar button.combat-control-lg span {
    line-height: var(--sidebar-header-height);
  }
  .themed.theme-light .combat-sidebar .combat-tracker .token-initiative button:not(:hover) {
    filter: invert(1) drop-shadow(0 0 4px rgba(0, 0, 0, 0.45));
  }
  .effects-tooltip li {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .effects-tooltip li img {
    width: 16px;
    height: 16px;
  }
  /* ----------------------------------------- */
  /*  Settings                                 */
  /* ----------------------------------------- */
  .settings-sidebar {
    flex-direction: column;
    overflow-y: auto;
    color: var(--color-text-secondary);
  }
  .settings-sidebar.active {
    display: flex;
    gap: 1.5rem;
    padding: 1rem;
  }
  .settings-sidebar section {
    gap: 0.5rem;
  }
  .settings-sidebar section h4 {
    margin: 0;
  }
  .settings-sidebar section a.button {
    flex-basis: 2rem;
  }
  .settings-sidebar .info {
    font-size: var(--font-size-13);
  }
  .settings-sidebar .info .title {
    margin: 0;
    font-size: var(--font-size-32);
    text-align: center;
    letter-spacing: -0.3px;
  }
  .settings-sidebar .info .subtitle {
    margin: -0.5rem 0 0;
    color: var(--color-text-subtle);
    text-align: center;
  }
  .settings-sidebar .info > div {
    display: flex;
    justify-content: space-between;
  }
  .settings-sidebar .info > div .label {
    color: var(--color-text-emphatic);
  }
  .settings-sidebar .info > div .value {
    color: var(--color-text-secondary);
  }
  .settings-sidebar .info .notification-pip {
    margin-left: 0.25rem;
    color: var(--color-text-accent);
    position: initial;
  }
  #settings-popout {
    overflow-y: hidden;
  }
  #settings-popout .window-content {
    gap: 1.5rem;
    overflow-y: auto;
  }
  #settings-config .main .form-fields {
    flex: 1;
  }
  #settings-config .main .form-fields > button {
    flex-basis: 100%;
  }
  /* ---------------------------------------- */
  /* Prototype Token Overrides                */
  /* ---------------------------------------- */
  #prototype-token-overrides .window-content {
    display: grid;
    grid-template-columns: 1fr 3fr;
  }
  #prototype-token-overrides .subtab {
    padding-bottom: 2px;
  }
  #prototype-token-overrides footer {
    grid-column: span 2;
  }
  /* ----------------------------------------- */
  /*  Journal Entries & Pages                  */
  /* ----------------------------------------- */
  .journal-sheet {
    /* Header */
    /* Footer */
  }
  .journal-sheet .journal-header {
    flex: none;
    margin: 1rem;
  }
  .journal-sheet .journal-header .title {
    margin: 0;
    font-size: var(--font-size-32);
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .journal-sheet .journal-footer {
    margin: 8px;
  }
  /* ----------------------------------------- */
  /*  Journal Entry Sheet                      */
  /* ----------------------------------------- */
  .sheet.journal-entry {
    --sidebar-width-expanded: 300px;
    --sidebar-width-collapsed: 40px;
    --level-indent: 16px;
    --color-header-background: transparent;
    background: var(--color-cool-5-90);
    border-radius: 6px 6px 0 6px;
    /* Sidebar */
    /* Pages */
    /* Single Page */
  }
  .sheet.journal-entry:not(.minimized, .minimizing, .maximizing) {
    min-width: 680px;
    min-height: 680px;
  }
  .sheet.journal-entry .window-header {
    border-bottom: none;
  }
  .sheet.journal-entry .window-content {
    padding: 0;
    flex-direction: row;
    height: 100%;
  }
  .sheet.journal-entry.collapsing {
    transition: all 250ms ease-in-out;
  }
  .sheet.journal-entry.collapsing .journal-sidebar {
    transition: flex-basis 250ms ease-in-out;
  }
  .sheet.journal-entry .journal-sidebar {
    flex: 0 0 var(--sidebar-width-expanded);
    color: var(--color-light-1);
    overflow: hidden;
    /* Search */
  }
  .sheet.journal-entry .journal-sidebar button {
    --button-text-color: var(--color-light-1);
    --button-border-color: var(--color-light-5);
    --button-hover-border-color: var(--color-light-3);
  }
  .sheet.journal-entry .journal-sidebar input {
    --input-background-color: var(--color-cool-4);
    --input-text-color: var(--color-light-3);
    --input-focus-outline-color: var(--color-cool-3);
    --input-border-color: transparent;
    --input-placeholder-color: var(--color-light-5);
  }
  .sheet.journal-entry .journal-sidebar search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 8px;
    gap: 8px;
  }
  .sheet.journal-entry .journal-sidebar search .inline-control {
    --button-border-color: transparent;
    --button-hover-border-color: transparent;
  }
  .sheet.journal-entry .journal-sidebar search input {
    --input-background-color: transparent;
    flex: 1;
    order: 3;
  }
  .sheet.journal-entry .journal-sidebar search .view-mode {
    order: 1;
  }
  .sheet.journal-entry .journal-sidebar search .toggle-search-mode {
    order: 2;
  }
  .sheet.journal-entry .journal-sidebar search .collapse-toggle {
    order: 4;
  }
  .sheet.journal-entry .journal-entry-content {
    flex: 1;
    height: 100%;
    background: var(--background);
    border-radius: 6px 0 0 0;
    overflow: hidden;
  }
  .sheet.journal-entry .journal-header .title {
    text-align: center;
  }
  .sheet.journal-entry .journal-entry-pages {
    flex: 1;
    height: 0;
    margin: 0 8px 16px 16px;
  }
  .sheet.journal-entry .journal-entry-page {
    position: relative;
  }
  .sheet.journal-entry .journal-entry-page * {
    user-select: text;
  }
  .sheet.journal-entry .journal-entry-page + .journal-entry-page {
    margin-top: 32px;
  }
  .sheet.journal-entry .journal-entry-page h1,
  .sheet.journal-entry .journal-entry-page h2,
  .sheet.journal-entry .journal-entry-page h3,
  .sheet.journal-entry .journal-entry-page h4,
  .sheet.journal-entry .journal-entry-page h5,
  .sheet.journal-entry .journal-entry-page h6,
  .sheet.journal-entry .journal-entry-page p,
  .sheet.journal-entry .journal-entry-page blockquote {
    cursor: var(--cursor-text);
  }
  .sheet.journal-entry .journal-entry-page .edit-container {
    position: absolute;
    top: 5px;
    right: 5px;
    height: 100%;
    pointer-events: none;
  }
  .sheet.journal-entry .journal-entry-page .edit-container button {
    position: sticky;
    pointer-events: none;
    visibility: hidden;
    top: 0;
  }
  .sheet.journal-entry .journal-entry-page:hover .edit-container button {
    visibility: visible;
    pointer-events: all;
  }
  .sheet.journal-entry .journal-entry-page :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
    margin-top: 16px;
  }
  .sheet.journal-entry .journal-entry-page img:not(.nopopout) {
    cursor: var(--cursor-pointer);
  }
  .sheet.journal-entry .journal-entry-page .content-embed.broken {
    font-style: italic;
  }
  .sheet.journal-entry .journal-entry-page .content-embed.broken > i {
    color: var(--color-level-error);
  }
  /* Expanded */
  .sheet.journal-entry.application .journal-sidebar {
    /* Table of Contents */
  }
  .sheet.journal-entry.application .journal-sidebar .action-buttons {
    flex: none;
    padding: 16px;
    gap: 8px;
  }
  .sheet.journal-entry.application .journal-sidebar .action-buttons button {
    margin: 0;
  }
  .sheet.journal-entry.application .journal-sidebar .action-buttons button.create {
    flex: 1;
  }
  .sheet.journal-entry.application .journal-sidebar .action-buttons button.next,
  .sheet.journal-entry.application .journal-sidebar .action-buttons button.previous {
    flex: 0 0 30px;
  }
  .sheet.journal-entry.application .journal-sidebar .toc {
    --line-height: 32px;
    flex: 1;
    height: 0;
    overflow: hidden auto;
    /* Page Title Entries */
    /* Page Heading Entries */
    /* Page Level Indentation */
    /* Heading Indentation */
  }
  .sheet.journal-entry.application .journal-sidebar .toc ol {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .sheet.journal-entry.application .journal-sidebar .toc ol li {
    margin: 0;
  }
  .sheet.journal-entry.application .journal-sidebar .toc li.page {
    line-height: var(--line-height);
    border-top: 1px solid var(--color-dark-1);
    border-bottom: 1px solid var(--color-dark-3);
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .sheet.journal-entry.application .journal-sidebar .toc li.page:first-child {
    border-top-color: transparent;
  }
  .sheet.journal-entry.application .journal-sidebar .toc li.page:last-child {
    border-bottom-color: transparent;
  }
  .sheet.journal-entry.application .journal-sidebar .toc li.page.active .headings {
    display: block;
  }
  .sheet.journal-entry.application .journal-sidebar .toc li.page.active:first-of-type {
    border-top-color: var(--color-warm-2);
  }
  .sheet.journal-entry.application .journal-sidebar .toc li.page.active:last-of-type {
    border-bottom-color: var(--color-warm-2);
  }
  .sheet.journal-entry.application .journal-sidebar .toc li.page:not(.active) + .active {
    border-top-color: var(--color-warm-2);
  }
  .sheet.journal-entry.application .journal-sidebar .toc li.page.active + :not(.active) {
    border-top-color: var(--color-warm-2);
  }
  .sheet.journal-entry.application .journal-sidebar .toc li.category {
    border-top: 1px solid var(--color-dark-1);
    border-bottom: 1px solid var(--color-dark-3);
  }
  .sheet.journal-entry.application .journal-sidebar .toc li.category:first-child {
    border-top-color: transparent;
  }
  .sheet.journal-entry.application .journal-sidebar .toc li.category strong {
    width: 100%;
    font-family: var(--font-h1);
    font-size: var(--font-size-24);
    text-transform: uppercase;
    line-height: calc(var(--line-height) * 1.5);
    display: inline-block;
    text-align: center;
    letter-spacing: 1px;
  }
  .sheet.journal-entry.application .journal-sidebar .toc .page-heading {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: var(--font-size-14);
  }
  .sheet.journal-entry.application .journal-sidebar .toc .page-heading .page-number,
  .sheet.journal-entry.application .journal-sidebar .toc .page-heading .page-index {
    pointer-events: none;
    width: var(--sidebar-width-collapsed);
    color: var(--color-dark-6);
    text-align: center;
  }
  .sheet.journal-entry.application .journal-sidebar .toc .page-heading .page-title {
    flex: 1;
  }
  .sheet.journal-entry.application .journal-sidebar .toc .page-heading .page-ownership {
    width: var(--sidebar-width-collapsed);
    margin-left: 8px;
    text-align: center;
    pointer-events: none;
  }
  .sheet.journal-entry.application .journal-sidebar .toc .page-heading .page-ownership.none {
    color: var(--color-ownership-none);
  }
  .sheet.journal-entry.application .journal-sidebar .toc .page-heading .page-ownership.observer {
    color: var(--color-ownership-observer);
  }
  .sheet.journal-entry.application .journal-sidebar .toc .page-heading .page-ownership.owner {
    color: var(--color-ownership-owner);
  }
  .sheet.journal-entry.application .journal-sidebar .toc .page-heading .page-number:hover,
  .sheet.journal-entry.application .journal-sidebar .toc .page-heading .page-index:hover,
  .sheet.journal-entry.application .journal-sidebar .toc .page-heading .page-title:hover {
    cursor: var(--cursor-pointer);
    text-shadow: 0 0 8px var(--color-shadow-primary);
  }
  .sheet.journal-entry.application .journal-sidebar .toc .headings {
    display: none;
    margin: 0 0 0 var(--sidebar-width-collapsed);
    padding: 0;
    list-style: none;
    border: none;
  }
  .sheet.journal-entry.application .journal-sidebar .toc .headings li {
    height: var(--line-height);
    line-height: var(--line-height);
  }
  .sheet.journal-entry.application .journal-sidebar .toc .heading-link {
    width: 100%;
    font-size: var(--font-size-14);
    display: inline-block;
  }
  .sheet.journal-entry.application .journal-sidebar .toc .level2 .page-title {
    text-indent: var(--level-indent);
  }
  .sheet.journal-entry.application .journal-sidebar .toc .level2 .headings {
    margin-left: calc(2 * var(--level-indent));
  }
  .sheet.journal-entry.application .journal-sidebar .toc .level3 .page-title {
    text-indent: calc(2 * var(--level-indent));
  }
  .sheet.journal-entry.application .journal-sidebar .toc .level3 .headings {
    margin-left: calc(3 * var(--level-indent));
  }
  .sheet.journal-entry.application .journal-sidebar .toc .h2 .heading-link {
    text-indent: var(--level-indent);
  }
  .sheet.journal-entry.application .journal-sidebar .toc .h3 .heading-link {
    text-indent: calc(2 * var(--level-indent));
  }
  /* Collapsed */
  .sheet.journal-entry.application:not(.expanded) .journal-sidebar {
    flex-basis: var(--sidebar-width-collapsed);
  }
  .sheet.journal-entry.application:not(.expanded) .journal-sidebar search input,
  .sheet.journal-entry.application:not(.expanded) .journal-sidebar search .toggle-search-mode,
  .sheet.journal-entry.application:not(.expanded) .journal-sidebar search .lock-mode {
    display: none;
  }
  .sheet.journal-entry.application:not(.expanded) .journal-sidebar search .collapse-toggle {
    order: 0;
  }
  .sheet.journal-entry.application:not(.expanded) .journal-sidebar .page-heading {
    justify-content: center;
  }
  .sheet.journal-entry.application:not(.expanded) .journal-sidebar .page-heading .page-title,
  .sheet.journal-entry.application:not(.expanded) .journal-sidebar .page-heading .page-ownership {
    display: none;
  }
  .sheet.journal-entry.application:not(.expanded) .journal-sidebar .page-heading .page-number,
  .sheet.journal-entry.application:not(.expanded) .journal-sidebar .page-heading .page-index {
    pointer-events: all;
  }
  .sheet.journal-entry.application:not(.expanded) .journal-sidebar .action-buttons {
    justify-content: center;
    padding: 4px;
    gap: 4px;
  }
  .sheet.journal-entry.application:not(.expanded) .journal-sidebar .action-buttons button.create {
    display: none;
  }
  .sheet.journal-entry.application:not(.expanded) .journal-sidebar .toc li.category strong {
    display: none;
  }
  .sheet.journal-entry.application:not(.expanded) .journal-sidebar .toc li.category::after {
    content: "\f219";
    font-family: var(--font-awesome);
    display: block;
    line-height: var(--line-height);
    text-align: center;
    font-size: var(--font-size-10);
  }
  .sheet.journal-entry.application:not(.expanded) .journal-sidebar .toc .active ol.headings {
    display: none;
  }
  /* ----------------------------------------- */
  /*  Journal Entry Category Config            */
  /* ----------------------------------------- */
  .journal-category-config {
    --input-height: 28px;
  }
  .journal-category-config legend.control {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .journal-category-config legend.control > button,
  .journal-category-config button[data-action=removeCategory] {
    --button-background-color: transparent;
    --button-border-color: transparent;
    --button-focus-outline-color: transparent;
    --button-hover-border-color: transparent;
    --button-hover-background-color: transparent;
    --button-hover-text-color: var(--button-text-color);
    --button-size: unset;
    padding: 0;
  }
  .journal-category-config legend.control > button:hover,
  .journal-category-config button[data-action=removeCategory]:hover {
    text-shadow: 0 0 6px var(--color-shadow-primary);
  }
  .journal-category-config ol {
    counter-reset: priorities;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .journal-category-config ol li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
  }
  .journal-category-config ol li::before {
    counter-increment: priorities;
    content: counter(priorities);
    width: 2em;
    text-align: center;
    font-size: var(--font-size-16);
  }
  .journal-category-config .sort {
    display: flex;
    gap: 4px;
  }
  /* ----------------------------------------- */
  /*  Journal Entry Pages                      */
  /* ----------------------------------------- */
  .journal-entry-page {
    --font-h1: var(--font-sans);
    --font-h2: var(--font-sans);
    --font-h3: var(--font-sans);
    --font-h4: var(--font-sans);
    --font-h5: var(--font-sans);
    --font-h6: var(--font-sans);
    --font-h1-size: 2em;
    --font-h2-size: 1.5em;
    --font-h3-size: 1.25em;
    --font-h4-size: 1em;
    --font-h5-size: 0.83em;
    --font-h6-size: 0.67em;
    /* Headings */
    /* Tables */
  }
  .journal-entry-page h1,
  .journal-entry-page h2,
  .journal-entry-page h3,
  .journal-entry-page h4,
  .journal-entry-page h5,
  .journal-entry-page h6 {
    text-shadow: none;
    font-weight: normal;
    margin: 0 0 8px;
  }
  .journal-entry-page h1,
  .journal-entry-page h2 {
    border-bottom: 1px solid var(--color-warm-3);
  }
  .journal-entry-page h1 {
    border-width: 2px;
  }
  .journal-entry-page table {
    margin: 0;
  }
  .sheet.journal-entry-page {
    /** Page Header */
    /** Text Editor */
  }
  .sheet.journal-entry-page .window-content {
    padding: 0 1rem;
  }
  .sheet.journal-entry-page .window-content > .standard-form {
    flex: 1;
  }
  .sheet.journal-entry-page .window-content > form.editable {
    overflow: hidden;
  }
  .sheet.journal-entry-page .journal-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .sheet.journal-entry-page .journal-header .page-metadata {
    flex: 0 0 100%;
    gap: 1rem;
  }
  .sheet.journal-entry-page .journal-header .page-metadata > div.flexrow {
    max-width: 25%;
    gap: 0.5rem;
  }
  .sheet.journal-entry-page .form-footer {
    gap: 8px;
  }
  .sheet.journal-entry-page .editor.prosemirror {
    flex: 1;
    margin: 0 1rem;
  }
  .sheet.journal-entry-page .editor.prosemirror menu {
    border-radius: 0;
  }
  /* ----------------------------------------- */
  /*  Show To Players Dialog                   */
  /* ----------------------------------------- */
  .show-to-players .users {
    display: grid;
    grid-template-columns: repeat(3, 30%);
    gap: 16px;
  }
  .show-to-players .users label.checkbox {
    justify-content: space-between;
  }
  .show-to-players .users label.checkbox > span {
    max-width: 100px;
  }
  /* ----------------------------------------- */
  /*  Journal Markdown Page                    */
  /* ----------------------------------------- */
  .journal-entry-page.text .window-content {
    padding: 0;
  }
  .journal-entry-page.text code-mirror.markdown-editor {
    flex: 1 1 0;
    background: transparent;
    resize: none;
    white-space: pre-wrap;
    border: none;
    border-radius: 0;
    border-top: 1px dashed var(--color-border-dark-4);
  }
  .journal-entry-page.text code-mirror.markdown-editor:focus {
    box-shadow: none;
  }
  /* ----------------------------------------- */
  /*  Journal Entry Image Page                 */
  /* ----------------------------------------- */
  .journal-entry-page.image figure img {
    border: none;
  }
  .journal-entry-page.image.sheet .image-preview {
    margin: 0;
  }
  .journal-entry-page.image.sheet .image-preview img {
    max-height: max(40vh, 360px);
  }
  /* ----------------------------------------- */
  /*  Journal Video Page                       */
  /* ----------------------------------------- */
  .journal-entry-page.video {
    /** 16/9 Aspect Ratio */
  }
  .journal-entry-page.video .video-time .sep {
    flex: none;
  }
  .journal-entry-page.video .video-time input {
    flex: 0 0 72px;
  }
  .journal-entry-page.video figure.flex-ratio {
    position: relative;
  }
  .journal-entry-page.video figure.flex-ratio iframe,
  .journal-entry-page.video figure.flex-ratio video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .journal-entry-page.video figure.flex-ratio::before {
    content: "";
    display: block;
    padding-bottom: calc(9 / 16 * 100%);
  }
  .journal-entry-page.video.sheet figure {
    margin: 0;
  }
  /* ----------------------------------------- */
  /*  Journal PDF Page                         */
  /* ----------------------------------------- */
  .journal-entry-page.pdf {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 4px;
  }
  .journal-entry-page.pdf .load-pdf {
    flex-grow: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .journal-entry-page.pdf .load-pdf > button {
    max-width: 250px;
  }
  .journal-entry-page.pdf iframe {
    flex-grow: 1;
    width: 100%;
    min-height: 620px;
    border: none;
  }
  .single-page .journal-entry-page.pdf {
    height: 100%;
  }
  .multi-page .journal-entry-page.pdf iframe {
    flex-basis: 620px;
  }
  /* -------------------------------------------- */
  /*  Camera Views                                */
  /* -------------------------------------------- */
  #camera-views {
    --av-width: 300px;
    --av-height: calc(var(--av-width) * 3 / 4);
    --av-minimized-icon-size: 64px;
    z-index: calc(var(--z-index-app) - 1);
    background: var(--av-background-color, var(--color-cool-5-90));
    display: flex;
    gap: 8px;
    /* Minimized */
  }
  #camera-views.vertical {
    width: var(--av-width);
    flex-direction: column;
    min-height: 100vh;
  }
  #camera-views.vertical > .user-controls {
    padding-block: 8px;
  }
  #camera-views.vertical > .scrollable {
    margin-right: 2px;
  }
  #camera-views.vertical .video-container .user-avatar {
    width: 100%;
  }
  #camera-views.vertical .camera-container {
    flex-direction: column;
    justify-content: center;
    padding-inline: 16px 2px;
  }
  #camera-views.horizontal {
    height: var(--av-height);
    min-width: 100vw;
  }
  #camera-views.horizontal > .user-controls {
    flex-direction: column;
    padding-inline: 8px;
  }
  #camera-views.horizontal > .scrollable {
    scrollbar-gutter: auto;
    overflow: auto hidden;
  }
  #camera-views.horizontal .camera-container {
    align-items: center;
    /* We cannot use justify-content: center to center the camera views in the horizontal container, as it results
         in camera views at the start being cut off and unable to be scrolled into view if the container overflows. */
  }
  #camera-views.horizontal .camera-container .video-container .user-avatar {
    width: calc(var(--av-width) * 0.9);
  }
  #camera-views.horizontal .camera-container > .camera-view:first-child {
    margin-left: auto;
  }
  #camera-views.horizontal .camera-container > .camera-view:last-child {
    margin-right: auto;
  }
  #camera-views.left {
    border-right: 1px solid var(--av-border-color, var(--color-cool-4));
  }
  #camera-views.right {
    border-left: 1px solid var(--av-border-color, var(--color-cool-4));
  }
  #camera-views.top {
    border-bottom: 1px solid var(--av-border-color, var(--color-cool-4));
  }
  #camera-views.bottom {
    border-top: 1px solid var(--av-border-color, var(--color-cool-4));
  }
  #camera-views > .scrollable {
    flex: 1;
    position: relative;
    margin: unset;
    padding: unset;
  }
  #camera-views .camera-container {
    display: flex;
    gap: 16px;
    min-height: 100%;
  }
  #camera-views > .user-controls {
    display: flex;
    justify-content: space-evenly;
  }
  #camera-views.minimized.vertical {
    width: calc(var(--av-minimized-icon-size) + 16px);
  }
  #camera-views.minimized.vertical .camera-container {
    padding: 0 0 0 8px;
  }
  #camera-views.minimized.vertical > .scrollable {
    margin-right: -12px;
  }
  #camera-views.minimized.horizontal {
    height: calc(var(--av-minimized-icon-size) + 16px);
  }
  #camera-views.minimized.horizontal .camera-container {
    padding: 0;
  }
  #camera-views.minimized.horizontal > .scrollable {
    margin: 0;
  }
  #camera-views.minimized .camera-view {
    width: var(--av-minimized-icon-size);
    height: var(--av-minimized-icon-size);
    flex: 0 0 var(--av-minimized-icon-size);
    border-radius: 100%;
  }
  #camera-views.minimized .camera-view::after {
    border-radius: 100%;
  }
  #camera-views.minimized .camera-view .player-name,
  #camera-views.minimized .camera-view .notification-bar,
  #camera-views.minimized .camera-view .user-camera {
    display: none;
  }
  #camera-views.minimized .camera-view .user-avatar {
    aspect-ratio: 1;
  }
  #camera-views.minimized > .user-controls {
    flex-wrap: wrap;
    gap: 8px;
  }
  .camera-view {
    position: relative;
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 10px black;
    overflow: hidden;
    flex: none;
    /* Popout */
  }
  .camera-view::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
  }
  .camera-view:hover :is(.control-bar, .bottom .user-controls) {
    display: flex;
  }
  .camera-view.speaking::after {
    border: 3px solid var(--av-border-color-speaking, #3ba55d);
  }
  .camera-view .control-bar,
  .camera-view .notification-bar {
    position: absolute;
    top: 0;
  }
  .camera-view .bottom {
    position: absolute;
    inset: auto 0 0 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 75%, transparent);
    display: flex;
    flex-direction: column;
  }
  .camera-view .bottom .user-controls {
    display: none;
    justify-content: space-evenly;
    position: relative;
    top: 12px;
  }
  .camera-view .player-name {
    padding: 12px 8px 8px 20px;
    text-align: center;
    min-height: 40px;
  }
  .camera-view .player-name::before {
    content: "";
    width: 12px;
    height: 12px;
    display: block;
    background: var(--player-color);
    border: 1px solid var(--player-border);
    border-radius: 100%;
    position: absolute;
    inset: auto auto 10px 8px;
  }
  .camera-view .player-name strong {
    line-height: 36px;
    position: absolute;
    inset: auto 0 0 0;
  }
  .camera-view .player-name:not(.noanimate) strong:first-child {
    opacity: 1;
    animation: 16s infinite fadeoutin;
  }
  .camera-view .player-name:not(.noanimate) strong:last-child {
    opacity: 0;
    animation: 16s infinite fadeinout;
  }
  @keyframes fadeoutin {
    from {
      opacity: 1;
    }
    30% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    80% {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes fadeinout {
    from {
      opacity: 0;
    }
    30% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  .camera-view .video-container {
    position: relative;
  }
  .camera-view .video-container::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.25);
  }
  .camera-view .video-container .user-avatar {
    aspect-ratio: 4 / 3;
    width: 100%;
    object-fit: cover;
  }
  .camera-view .video-container .user-camera {
    position: absolute;
    inset: 0;
  }
  .camera-view .notification-bar {
    right: 0;
    color: #ba2200;
    gap: 8px;
    padding: 8px;
    font-size: 20px;
    filter: drop-shadow(0 0 6px black);
  }
  .camera-view .control-bar {
    left: 0;
    gap: 8px;
    padding: 8px;
    display: none;
  }
  .camera-view .control-bar > button {
    --control-size: 24px;
    font-size: var(--font-size-14);
  }
  .camera-view .volume-bar {
    flex: 1;
    padding-inline: 8px;
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .camera-view .volume-bar i {
    font-size: var(--font-size-12);
  }
  .camera-view .volume-bar range-picker {
    flex: 1;
  }
  .camera-view .volume-bar input[type=number] {
    display: none;
  }
  .camera-view.popout {
    position: fixed;
    min-width: 240px;
  }
}
/* ---------------------------------------- */
/*  Compatibility                           */
/* ---------------------------------------- */
@layer compatibility {
  /* ---------------------------------------- */
  /* Controls Reference                       */
  /* ---------------------------------------- */
  #controls-reference .window-content {
    max-height: 75vh;
  }
  #controls-reference h2 {
    padding: 2px 0;
    border-top: 1px solid var(--color-border-dark-tertiary);
    border-bottom: 1px solid var(--color-border-dark-tertiary);
  }
  #controls-reference h3 {
    padding: 2px 0;
    border-top: 1px solid var(--color-border-light-primary);
    border-bottom: 1px solid var(--color-border-light-primary);
    font-weight: bold;
  }
  #controls-reference ol.hotkey-list {
    list-style: none;
    padding: 0;
  }
  #controls-reference ol.hotkey-list > li {
    display: flex;
    flex-wrap: wrap;
    margin: 5px 0;
  }
  #controls-reference ol.hotkey-list h4 {
    margin: 0;
    flex: 2;
    line-height: 24px;
  }
  #controls-reference ol.hotkey-list .keys {
    flex: 3;
  }
  #controls-reference ol.hotkey-list .key {
    display: inline-block;
    margin: 0 1px;
    padding: 2px 4px;
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid var(--color-border-light-2);
    border-radius: 5px;
    box-shadow: 1px 1px #444;
    text-align: center;
    min-width: 24px;
  }
  #controls-reference ol.hotkey-list li.gm .key {
    background: var(--color-blind-bg);
  }
  /* ---------------------------------------- */
  /*  Package Configuration Apps              */
  /* ---------------------------------------- */
  .package-configuration {
    /** Sidebar */
    /** Main Column */
  }
  .package-configuration .window-content {
    padding: 0;
  }
  .package-configuration .window-content > div {
    height: 100%;
    flex-wrap: nowrap;
  }
  .package-configuration aside.sidebar {
    flex: 0 0 220px;
    height: 100%;
    padding: 1rem;
    border-right: 1px solid var(--color-border-light-primary);
    font-size: var(--font-size-12);
    /** Entry Filter */
    /** Category Filters */
    /** Reset Defaults */
  }
  .package-configuration aside.sidebar .entry-filter {
    flex: 0;
    margin: 0 0 1rem;
  }
  .package-configuration aside.sidebar nav.tabs {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    overflow: hidden auto;
  }
  .package-configuration aside.sidebar nav.tabs .category-tab {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border-light-primary);
    text-align: left;
    width: 100%;
  }
  .package-configuration aside.sidebar nav.tabs .category-tab.active {
    font-weight: bold;
    border-bottom: 1px solid var(--color-underline-active);
  }
  .package-configuration aside.sidebar nav.tabs .category-tab > a {
    flex: 1;
  }
  .package-configuration aside.sidebar .reset-all {
    flex: 0;
    margin-right: 0.5rem;
  }
  .package-configuration .categories {
    height: 100%;
  }
  .package-configuration .categories .scrollable {
    flex: 1;
    padding: 1rem;
    overflow: hidden auto;
  }
  .package-configuration .categories footer {
    margin: 1rem;
    flex: 0;
  }
  .package-configuration .form-group {
    margin-bottom: 1rem;
  }
  /** Client Settings Subclass */
  #client-settings .submenu button {
    flex: 2;
  }
  #client-settings form .form-group > label {
    line-height: 1.25;
  }
  /** Combat Config Subclass */
  #combat-tracker-config button.preview-theme {
    flex: 0 0 2.25rem;
    padding: 0;
  }
  /* ---------------------------------------- */
  /* New User Experience                      */
  /* ---------------------------------------- */
  a.nue-tab,
  a.nue-action {
    color: var(--color-text-hyperlink);
    text-decoration: underline;
  }
  h3.nue {
    padding: 8px 0;
    border-top: 2px groove var(--color-border-light-highlight);
    border-bottom: 2px groove var(--color-border-light-highlight);
  }
  footer.nue {
    border-top: 2px groove var(--color-border-light-highlight);
    font-size: var(--font-size-11);
    color: var(--color-text-dark-inactive);
    padding-top: 6px;
  }
  p.nue {
    font-size: var(--font-size-12);
  }
  /* ----------------------------------------- */
  /* General Sheet Styling                     */
  /* ----------------------------------------- */
  body.game .sheet.app {
    display: flex;
    flex-direction: column;
  }
  body.game .sheet.app header.sheet-header {
    display: flex;
    align-items: center;
  }
  body.game .sheet.app header.sheet-header img {
    flex: 0 0 64px;
    height: 64px;
    margin-right: 6px;
  }
  body.game .sheet.app header.sheet-header h1 {
    flex: 1;
    margin: 0;
    border-bottom: none;
  }
  body.game .sheet.app header.sheet-header h1 input {
    height: 48px;
    line-height: 48px;
    margin: 8px 2%;
    width: 96%;
  }
  body.game .sheet.app nav.sheet-tabs {
    border-top: 1px solid var(--color-border-light-primary);
    border-bottom: 1px solid var(--color-border-light-primary);
  }
  body.game .sheet.app footer.sheet-footer {
    display: flex;
    flex: 0 0 32px;
    line-height: 32px;
  }
  body.game .sheet.app .editor-content {
    height: 100%;
    overflow-y: auto;
    word-break: break-word;
  }
  body.game .sheet.app img[data-edit] {
    cursor: var(--cursor-pointer);
  }
  #document-create .cards-presets.form-group {
    margin: 8px 0;
    padding-top: 8px;
    border-top: 1px solid var(--color-text-light-primary);
  }
  /* ---------------------------------------- */
  /* Chat Bubbles                             */
  /* ---------------------------------------- */
  .chat-bubble {
    padding: 8px;
    background: #f5f2ec;
    min-width: 100px;
    max-width: 400px;
    max-height: 100px;
    color: var(--color-text-primary);
    border: 2px solid #6f6c66;
    box-shadow: 0 0 10px var(--color-shadow-dark);
    overflow: hidden;
    position: absolute;
  }
  .chat-bubble .bubble-content {
    position: relative;
    top: 0;
  }
  .chat-bubble.left {
    border-radius: 16px 8px 16px 4px;
  }
  .chat-bubble.right {
    border-radius: 8px 16px 4px 16px;
  }
  .chat-bubble.emote {
    background: #f3edde;
    border: 2px solid #887c5d;
    color: var(--color-text-dark-3);
    font-style: italic;
  }
  .chat-bubble.chatter {
    padding: 4px;
    background: rgba(0, 0, 0, 0.25);
    box-shadow: none;
    border: none;
    border-radius: 10px;
    color: var(--color-text-light-highlight);
  }
  /* ---------------------------------------- */
  /*  Sidebar                                 */
  /* ---------------------------------------- */
  #sidebar,
  .sidebar-popout {
    --sidebar-item-height: 48px;
    --input-background: rgba(255, 255, 245, 0.8);
  }
  .sidebar-tab {
    box-shadow: none;
  }
  /* A Directory Listing */
  .app.sidebar-tab.directory,
  .app.sidebar-popout .directory {
    color: var(--color-text-light-highlight);
  }
  .app.sidebar-tab.directory .directory-header,
  .app.sidebar-popout .directory .directory-header {
    flex: none;
  }
  .app.sidebar-tab.directory .directory-header .header-filter,
  .app.sidebar-popout .directory .directory-header .header-filter {
    flex: 1;
    justify-content: center;
    align-items: center;
  }
  .app.sidebar-tab.directory .directory-header .header-filter > *,
  .app.sidebar-popout .directory .directory-header .header-filter > * {
    flex: 0 0 24px;
  }
  .app.sidebar-tab.directory .directory-header .header-search,
  .app.sidebar-popout .directory .directory-header .header-search {
    flex: 1;
    justify-content: center;
    align-items: center;
  }
  .app.sidebar-tab.directory .directory-header .header-search > *,
  .app.sidebar-popout .directory .directory-header .header-search > * {
    flex: 0 0 24px;
  }
  .app.sidebar-tab.directory .directory-header .header-search input,
  .app.sidebar-popout .directory .directory-header .header-search input {
    flex: 1;
    margin: 0 3px;
    background: var(--input-background);
  }
  .app.sidebar-tab.directory .directory-list,
  .app.sidebar-popout .directory .directory-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .app.sidebar-tab.directory .directory-item h3,
  .app.sidebar-popout .directory .directory-item h3,
  .app.sidebar-tab.directory .directory-item h4,
  .app.sidebar-popout .directory .directory-item h4 {
    white-space: nowrap;
    overflow: hidden;
  }
  .app.sidebar-tab.directory .directory-item .document-name,
  .app.sidebar-popout .directory .directory-item .document-name {
    margin: 0 0 0 8px;
  }
  .app.sidebar-tab.directory .directory-item img[data-src],
  .app.sidebar-popout .directory .directory-item img[data-src] {
    visibility: hidden;
  }
  .app.sidebar-tab.directory .action-buttons button,
  .app.sidebar-popout .directory .action-buttons button {
    --button-background-color: rgba(255, 255, 245, 0.8);
    --button-size: 28px;
    margin: 4px;
    min-width: max-content;
    white-space: nowrap;
  }
  /* ----------------------------------------- */
  /*  Folders and Sub-folders                  */
  /* ----------------------------------------- */
  .app li.folder > .folder-header {
    line-height: 24px;
  }
  .app li.folder > .folder-header h3 {
    margin: 0;
    color: var(--color-text-light-highlight);
    font-size: var(--font-size-16);
    line-height: 24px;
  }
  .app li.folder > .folder-header h3 > i {
    margin-right: 10px;
  }
  .app li.folder > .folder-header .create-button {
    flex: 0 0 20px;
  }
  .app li.folder > .folder-header .create-button .fa-plus {
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 0.5rem;
    background: black;
    color: var(--color-text-light-highlight);
    padding: 1px;
    border-radius: 4px;
  }
  .app li.folder > .folder-header .create-button:hover .fa-plus {
    color: var(--color-text-hyperlink);
  }
  .app li.folder.collapsed .subdirectory {
    display: none;
  }
  .app li.folder.collapsed > .folder-header {
    background: rgba(0, 0, 0, 0.5);
  }
  .app li.folder.collapsed > .folder-header h3 > i:before {
    content: "\f07b";
  }
  .app li.folder.collapsed > .folder-header .create-folder {
    display: none;
  }
  .app li.folder.droptarget > header h3 {
    font-size: 1.2em;
  }
  .app li.folder.droptarget > header h3 i {
    text-shadow: 0 0 4px var(--color-shadow-primary);
    transform: scale(1.2);
    transform-origin: left;
    margin-right: 12px;
  }
  /**
 * Subdirectory Styles
 */
  .subdirectory {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  /* ----------------------------------------- */
  /*  1.0 - Chat Panel                         */
  /* ----------------------------------------- */
  /** Card Draws */
  .chat-message .card-draw {
    align-items: center;
  }
  .chat-message .card-draw .card-face {
    height: 48px;
    flex: 0;
    margin-right: 8px;
  }
  .chat-message .card-draw .card-name {
    line-height: 48px;
    margin: 0;
    font-weight: bold;
  }
  /* Popped-out Message */
  .chat-popout .window-content {
    padding: 1px;
  }
  /* ----------------------------------------- */
  /*  Journal Directory                        */
  /* ----------------------------------------- */
  .journal-sidebar .document {
    line-height: 32px;
  }
  /**
 * Single Compendium Pack
 */
  .compendium.directory .directory-header {
    border-bottom: none;
  }
  .compendium.directory .directory-header .header-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 84px;
    flex: 0 0 84px;
    border-radius: 2px;
    background-size: cover;
  }
  .compendium.directory .directory-header .compendium-name {
    text-align: center;
    z-index: 1;
    margin: 0 1rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--color-border-dark);
    border-radius: 5px;
    padding: 0 0.5rem;
  }
  .compendium.directory .directory-header .compendium-name > i {
    margin-right: 0.25rem;
  }
  .compendium.directory .directory-list .directory-item {
    line-height: 48px;
  }
  /* ----------------------------------------- */
  /*  Permissions Config                       */
  /* ----------------------------------------- */
  #permissions-config header.table-header {
    background: var(--color-text-dark-inactive);
    padding: 0.5rem;
    color: var(--color-text-light-highlight);
    border: 1px solid var(--color-border-dark-4);
    text-align: center;
    font-weight: bold;
    text-shadow: 1px 1px var(--color-shadow-dark);
  }
  #permissions-config ul.permissions-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 400px;
    overflow: hidden auto;
  }
  #permissions-config li.permission {
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--color-border-dark-4);
  }
  #permissions-config li.permission .form-fields {
    justify-content: space-around;
  }
  #permissions-config .index {
    flex: 0 0 200px;
    text-align: left;
    font-weight: bold;
  }
  .theme-dark #permissions-config header.table-header {
    background-color: var(--color-cool-4);
    border-color: var(--color-cool-4);
  }
  /* ----------------------------------------- */
  /*  Sidebar Pop-out                          */
  /* ----------------------------------------- */
  .app.sidebar-popout {
    min-height: 33vh;
    max-height: 90vh;
    border: 1px solid var(--color-border-dark-1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
  .app.sidebar-popout .window-content {
    background: none;
    color: var(--color-border-light-1);
    padding: 0;
    height: calc(100% - var(--header-height));
  }
  /* ---------------------------------------- */
  /* Compendium Art                           */
  /* ---------------------------------------- */
  #compendium-art-config .priority-list {
    counter-reset: priorities;
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  #compendium-art-config .priority-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
  #compendium-art-config .priority-list li::before {
    counter-increment: priorities;
    content: counter(priorities);
    width: 2em;
    text-align: center;
    font-size: var(--font-size-16);
  }
  #compendium-art-config .priority-list li > label {
    flex: 1;
  }
  #compendium-art-config .priority-list li > .form-fields {
    width: unset;
  }
  #compendium-art-config .priority-list li > .form-fields label {
    display: flex;
    align-items: center;
  }
  #compendium-art-config .priority-adjust {
    display: flex;
  }
  #compendium-art-config .priority-adjust button {
    width: 24px;
    height: 24px;
    font-size: var(--font-size-11);
    display: grid;
    place-content: center;
  }
  #compendium-art-config .priority-adjust button > i {
    margin: 0;
  }
  /* ----------------------------------------- */
  /*  V1 Journal Entry Sheets                  */
  /* ----------------------------------------- */
  .app.journal-entry.sheet {
    --sidebar-width-collapsed: 32px;
    /** Journal Header */
    /** Main Container */
    /** Sidebar Navigation */
    /** Pages Navigation */
    /** Collapsed Sidebar */
    /** Pages Content */
  }
  .app.journal-entry.sheet .window-content {
    padding: 0;
    background: transparent;
  }
  .app.journal-entry.sheet .journal-header {
    flex: none;
  }
  .app.journal-entry.sheet .journal-header .title {
    font-size: var(--font-size-32);
    height: 50px;
    line-height: 50px;
  }
  .app.journal-entry.sheet .scrollable {
    position: absolute;
    inset: 0;
    padding-right: 0;
    overflow: hidden auto;
    scrollbar-gutter: auto;
  }
  .app.journal-entry.sheet .journal-sheet-container {
    display: flex;
    flex-direction: row;
    height: 100%;
  }
  .app.journal-entry.sheet .journal-sidebar {
    background: transparent;
    color: var(--color-text-light-highlight);
    /** Search Header */
    /** Control Buttons */
    /* Collapsed */
  }
  .app.journal-entry.sheet .journal-sidebar .directory-header {
    flex: none;
    margin: 0.5rem 0;
  }
  .app.journal-entry.sheet .journal-sidebar .directory-header .action-button {
    flex: 0 0 30px;
  }
  .app.journal-entry.sheet .journal-sidebar .directory-header .view-mode {
    order: 1;
  }
  .app.journal-entry.sheet .journal-sidebar .directory-header .toggle-search-mode {
    order: 2;
  }
  .app.journal-entry.sheet .journal-sidebar .directory-header .header-search input {
    order: 3;
  }
  .app.journal-entry.sheet .journal-sidebar .directory-header .collapse-toggle {
    order: 4;
  }
  .app.journal-entry.sheet .journal-sidebar .action-buttons {
    flex: none;
    justify-content: space-between;
  }
  .app.journal-entry.sheet .journal-sidebar .action-buttons button.next,
  .app.journal-entry.sheet .journal-sidebar .action-buttons button.previous {
    margin: 0.5rem;
    flex: 0 0 30px;
  }
  .app.journal-entry.sheet .journal-sidebar .action-buttons button.create {
    margin: 0.5rem 0;
  }
  .app.journal-entry.sheet .journal-sidebar.collapsed {
    flex-basis: var(--sidebar-width-collapsed);
  }
  .app.journal-entry.sheet .journal-sidebar.collapsed .directory-header input,
  .app.journal-entry.sheet .journal-sidebar.collapsed .directory-header .toggle-search-mode {
    display: none;
  }
  .app.journal-entry.sheet .journal-sidebar.collapsed .directory-header .collapse-toggle {
    order: 0;
  }
  .app.journal-entry.sheet .journal-sidebar.collapsed .page-heading {
    justify-content: center;
  }
  .app.journal-entry.sheet .journal-sidebar.collapsed .page-heading .page-title,
  .app.journal-entry.sheet .journal-sidebar.collapsed .page-heading .page-ownership {
    display: none;
  }
  .app.journal-entry.sheet .journal-sidebar.collapsed .page-heading .page-number {
    pointer-events: all;
  }
  .app.journal-entry.sheet .journal-sidebar.collapsed .action-buttons button.create {
    display: none;
  }
  .app.journal-entry.sheet .journal-sidebar.collapsed .action-buttons button.next,
  .app.journal-entry.sheet .journal-sidebar.collapsed .action-buttons button.previous {
    margin: 2px;
  }
  .app.journal-entry.sheet .journal-sidebar.collapsed .pages-list .active ol.headings {
    display: none;
  }
  .app.journal-entry.sheet .pages-list {
    flex: 1;
    position: relative;
    /** Sidebar Page Titles */
    /** Page Heading Links */
    /** Sidebar Links */
    /** Page Level Indentation */
    /** Heading Indentation */
  }
  .app.journal-entry.sheet .pages-list .directory-item {
    line-height: 32px;
    border-top: 1px solid var(--color-border-dark);
    border-bottom: 1px solid var(--color-border-dark-3);
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .app.journal-entry.sheet .pages-list .directory-item:first-child {
    border-top: 1px solid transparent;
  }
  .app.journal-entry.sheet .pages-list .directory-item:last-child {
    border-bottom: 1px solid transparent;
  }
  .app.journal-entry.sheet .pages-list .directory-item.hidden {
    display: none;
  }
  .app.journal-entry.sheet .pages-list .directory-item.active .headings {
    display: block;
  }
  .app.journal-entry.sheet .pages-list .directory-item.active:first-of-type {
    border-top: 1px solid var(--color-border-highlight);
  }
  .app.journal-entry.sheet .pages-list .directory-item.active:last-of-type {
    border-bottom: 1px solid var(--color-border-highlight);
  }
  .app.journal-entry.sheet .pages-list .directory-item:not(.active) + .active {
    border-top: 1px solid var(--color-border-highlight);
  }
  .app.journal-entry.sheet .pages-list .directory-item.active + :not(.active) {
    border-top: 1px solid var(--color-border-highlight);
  }
  .app.journal-entry.sheet .pages-list .page-heading {
    display: flex;
    align-items: center;
    margin: 0;
    border: none;
    font-size: var(--font-size-14);
  }
  .app.journal-entry.sheet .pages-list .page-heading .page-number {
    pointer-events: none;
    width: var(--sidebar-width-collapsed);
    color: var(--color-text-light-7);
    text-align: center;
  }
  .app.journal-entry.sheet .pages-list .page-heading .page-title {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .app.journal-entry.sheet .pages-list .page-heading .page-ownership {
    width: var(--sidebar-width-collapsed);
    margin-left: 8px;
    text-align: center;
    pointer-events: none;
  }
  .app.journal-entry.sheet .pages-list .page-heading .page-ownership.none {
    color: var(--color-ownership-none);
  }
  .app.journal-entry.sheet .pages-list .page-heading .page-ownership.observer {
    color: var(--color-ownership-observer);
  }
  .app.journal-entry.sheet .pages-list .page-heading .page-ownership.owner {
    color: var(--color-ownership-owner);
  }
  .app.journal-entry.sheet .pages-list .page-heading .page-number:hover,
  .app.journal-entry.sheet .pages-list .page-heading .page-title:hover {
    cursor: pointer;
    color: inherit;
    text-shadow: 0 0 8px var(--color-shadow-primary);
  }
  .app.journal-entry.sheet .pages-list .active .page-heading .page-number {
    color: inherit;
  }
  .app.journal-entry.sheet .pages-list .headings {
    display: none;
    height: auto;
    margin: 0 0 0 var(--page-number-width);
    padding: 0;
    list-style: none;
    font-weight: normal;
    border: none;
  }
  .app.journal-entry.sheet .pages-list .headings li {
    height: 32px;
    line-height: 32px;
  }
  .app.journal-entry.sheet .pages-list .headings li:last-child {
    margin-bottom: 0.5rem;
  }
  .app.journal-entry.sheet .pages-list .heading-link {
    width: 100%;
    line-height: 32px;
    font-size: var(--font-size-14);
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .app.journal-entry.sheet .pages-list .level2 .page-title {
    text-indent: var(--level-indent);
  }
  .app.journal-entry.sheet .pages-list .level3 .page-title {
    text-indent: calc(2 * var(--level-indent));
  }
  .app.journal-entry.sheet .pages-list .level2 .headings {
    margin-left: calc(2 * var(--level-indent));
  }
  .app.journal-entry.sheet .pages-list .level3 .headings {
    margin-left: calc(3 * var(--level-indent));
  }
  .app.journal-entry.sheet .pages-list .h2 .heading-link {
    text-indent: var(--level-indent);
  }
  .app.journal-entry.sheet .pages-list .h3 .heading-link {
    text-indent: calc(2 * var(--level-indent));
  }
  .app.journal-entry.sheet .journal-sidebar.collapsed .directory-header .header-search input {
    display: none;
  }
  .app.journal-entry.sheet .journal-sidebar.collapsed .directory-header .collapse-toggle {
    order: 0;
  }
  .app.journal-entry.sheet .directory-item {
    line-height: 32px;
  }
  .app.journal-entry.sheet .directory-item:first-child {
    border-top: 1px solid transparent;
  }
  .app.journal-entry.sheet .directory-item:last-child {
    border-bottom: 1px solid transparent;
  }
  .app.journal-entry.sheet .directory-item.hidden {
    display: none;
  }
  .app.journal-entry.sheet .directory-item.active .headings {
    display: block;
  }
  .app.journal-entry.sheet .directory-item.active:first-of-type {
    border-top: 1px solid var(--color-border-highlight);
  }
  .app.journal-entry.sheet .directory-item.active:last-of-type {
    border-bottom: 1px solid var(--color-border-highlight);
  }
  .app.journal-entry.sheet .directory-item:not(.active) + .active {
    border-top: 1px solid var(--color-border-highlight);
  }
  .app.journal-entry.sheet .directory-item.active + :not(.active) {
    border-top: 1px solid var(--color-border-highlight);
  }
  .app.journal-entry.sheet .directory-item.active::after {
    content: unset;
  }
  .app.journal-entry.sheet .directory-item .page-heading .page-title,
  .app.journal-entry.sheet .directory-item .heading .heading-link {
    overflow: hidden;
    white-space: nowrap;
    word-break: break-all;
    text-overflow: ellipsis;
  }
  .app.journal-entry.sheet .journal-entry-content {
    background: url("../ui/parchment.jpg") repeat;
    border: 2px solid #000;
  }
  .app.journal-entry.sheet .journal-header .title {
    text-align: center;
  }
  .app.journal-entry.sheet .journal-entry-pages {
    position: relative;
  }
  .app.journal-entry.sheet .journal-entry-pages .editor-edit {
    display: none;
    position: sticky;
    pointer-events: all;
  }
  .app.journal-entry.sheet .journal-entry-pages .journal-entry-page:hover .editor-edit {
    display: block;
  }
  /* ----------------------------------------- */
  /*  V1 Journal Entry Page                    */
  /* ----------------------------------------- */
  .app.journal-entry-page.sheet {
    /** Form Fields */
  }
  .app.journal-entry-page.sheet .editor.tinymce {
    margin: 0 1rem;
  }
  .app.journal-entry-page.sheet .editor.tinymce div[role=application] {
    height: 100%;
  }
  .app.journal-entry-page.sheet .form-group {
    flex: none;
    margin: 1rem 1rem 0;
  }
  .app.journal-entry-page.sheet .form-group label {
    font-weight: bold;
  }
  .app.journal-entry-page.sheet .journal-header {
    flex: none;
  }
  .app.journal-entry-page.sheet .journal-header .title {
    margin: 0;
    font-size: var(--font-size-32);
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .app.journal-entry-page.sheet .journal-header .page-level {
    flex: 0 0 100%;
    align-items: center;
    gap: 1rem;
  }
  .app.journal-entry-page.sheet .journal-header .page-level > .flexrow {
    align-items: center;
    gap: 0.5rem;
  }
  @layer base {
    body.game .app {
      /* ---------------------------------------- */
      /*  Text                                    */
      /* ---------------------------------------- */
      /* Headers */
      /* Links */
      /* Paragraph */
      /* Images */
      /** Unstyled Lists */
      /* Definition Lists */
      /* HR separators */
      /* Buttons */
      /* Blockquote */
      /* Info Tooltip Icons */
      /* Reference */
      /* ---------------------------------------- */
      /* Tables                                   */
      /* ---------------------------------------- */
      /* ----------------------------------------- */
      /* Images
/* ----------------------------------------- */
    }
    body.game .app h1,
    body.game .app h2,
    body.game .app h3,
    body.game .app h4 {
      margin: 0 0 0.5rem;
      padding: 0;
      font-weight: normal;
    }
    body.game .app h1 {
      font-size: 2em;
      border-bottom: 2px solid var(--color-underline-header);
    }
    body.game .app h2 {
      font-size: 1.5em;
      border-bottom: 1px solid var(--color-underline-header);
    }
    body.game .app h3 {
      font-size: 1.25em;
      border-bottom: 1px solid var(--color-underline-header);
    }
    body.game .app :is(h1, h2, h3, h4, h5, h6):is(.noborder, .divider) {
      border: none;
    }
    body.game .app a {
      cursor: var(--cursor-pointer);
    }
    body.game .app a[href] {
      color: var(--color-text-hyperlink);
    }
    body.game .app a:hover {
      text-shadow: 0 0 8px var(--color-shadow-primary);
    }
    body.game .app a[disabled] {
      pointer-events: none;
      cursor: inherit;
    }
    body.game .app a.content-link,
    body.game .app a.inline-roll {
      background: #DDD;
      padding: 1px 4px;
      border: 1px solid var(--color-border-dark-tertiary);
      border-radius: 2px;
      white-space: nowrap;
      word-break: break-all;
    }
    body.game .app a.content-link i,
    body.game .app a.inline-roll i {
      color: var(--color-text-dark-inactive);
      margin-right: 0.25em;
    }
    body.game .app a.content-link.playing i:before,
    body.game .app a.inline-roll.playing i:before {
      content: "\f0c8";
    }
    body.game .app a.content-link.disabled,
    body.game .app a.inline-roll.disabled {
      cursor: var(--cursor-default);
      color: var(--color-text-dark-inactive);
      border-color: var(--color-border-light-primary);
    }
    body.game .app a.content-link.disabled:hover,
    body.game .app a.inline-roll.disabled:hover {
      text-shadow: unset;
    }
    body.game .app a.content-link.broken {
      cursor: var(--cursor-default);
      background: rgba(255, 0, 0, 0.05);
      border: 1px dashed red;
    }
    body.game .app a.inline-roll.gmroll {
      background: var(--color-whisper-bg);
      border-color: var(--color-whisper-border);
    }
    body.game .app a.inline-roll.blindroll {
      background: var(--color-blind-bg);
      border-color: var(--color-blind-border);
    }
    body.game .app p {
      margin: 0.5em 0;
    }
    body.game .app p:empty {
      min-height: 1rem;
    }
    body.game .app img.centered {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    body.game .app ul.plain,
    body.game .app ol.plain {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    body.game .app dl {
      margin: 0.5em 0;
    }
    body.game .app dt {
      font-weight: bold;
    }
    body.game .app dd {
      padding-left: 5px;
      margin: 3px 0;
    }
    body.game .app menu {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    body.game .app hr {
      border: none;
      border-top: 1px solid var(--color-border-light-primary);
      border-bottom: 1px solid var(--color-border-light-highlight);
    }
    body.game .app button[hidden] {
      display: none;
    }
    body.game .app blockquote {
      margin: 0.5em 0 0.5em 10px;
      padding: 0 0 0 20px;
      border-left: 3px solid var(--color-border-light-tertiary);
      font-style: italic;
    }
    body.game .app blockquote em {
      font-style: normal;
    }
    body.game .app i.tip {
      font-size: var(--font-size-12);
      color: var(--color-text-dark-5);
    }
    body.game .app span.reference {
      display: inline-block;
      padding: 0.25rem;
      color: #c5dbe3;
      border: 1px solid #def7ff;
      border-radius: 3px;
    }
    body.game .app table {
      width: 100%;
      border-collapse: collapse;
      background: rgba(0, 0, 0, 0.05);
      border-top: 1px solid var(--color-border-light-tertiary);
      border-bottom: 1px solid var(--color-border-light-tertiary);
      margin: 0.5em 0;
    }
    body.game .app table thead {
      background: rgba(0, 0, 0, 0.5);
      color: var(--color-text-light-highlight);
      text-shadow: 1px 1px var(--color-shadow-dark);
      border-bottom: 1px solid var(--color-border-dark);
    }
    body.game .app table tr:nth-child(even) {
      background-color: rgba(255, 255, 255, 0.2);
    }
    body.game .app table td:first-child {
      padding-left: 2px;
    }
    body.game .app table td,
    body.game .app table th {
      padding: 0.25em 0;
    }
    body.game .app table.roll-table-rollable th button[data-action] {
      display: inline-block;
      background: none;
      border: none;
      width: 28px;
      padding: 0;
      color: var(--color-text-light-highlight);
    }
    body.game .app table.roll-table-rollable tr:not(.drawn) > td:first-child {
      padding-left: 20px;
    }
    body.game .app table.roll-table-rollable tr.drawn {
      background: rgba(0, 0, 0, 0.15);
    }
    body.game .app table.roll-table-rollable tr.drawn > td:first-child::before {
      content: "\f023";
      font-family: var(--font-awesome);
      font-weight: bold;
      font-size: var(--font-size-12);
      padding-inline: 4px;
    }
    body.game .app img {
      box-sizing: border-box;
      border: 1px solid var(--color-border-dark);
      border-radius: 2px;
      max-width: 100%;
    }
    body.game .app img.noborder {
      border: none;
      box-shadow: none;
      outline: none;
    }
    body.game .app figure {
      margin: 1rem 0;
    }
    body.game .app figure img {
      display: block;
      margin: 0 auto;
    }
    body.game .app figure figcaption {
      margin-top: 0.5rem;
      padding: 0 1rem;
      text-align: center;
      font-weight: bold;
    }
    body.game .app {
      /* ---------------------------------------- */
      /*  Forms                                   */
      /* ---------------------------------------- */
      /* ---------------------------------------- */
      /* Form Inputs                              */
      /* ---------------------------------------- */
      /* Text Input */
      /* Checkbox Labels */
      /* Select Boxes */
      /* Text Areas */
      /* Buttons */
      /* Color Picker V1 (deprecated) */
      /* File Pickers */
      /* Range Input */
      /* ----------------------------------------- */
      /* Custom Hue Slider Web Component           */
      /* ----------------------------------------- */
      /* ----------------------------------------- */
      /*  Deprecated Styles                        */
      /* ----------------------------------------- */
      /* Color Picker V1 (deprecated) */
      /* File Picker V1 (deprecated) */
      /* ----------------------------------------- */
      /*  FilePicker Element                       */
      /* ----------------------------------------- */
      /* ----------------------------------------- */
      /* TinyMCE Editor
/* ----------------------------------------- */
      /* Oxide Theme Overrides */
    }
    body.game .app form.standard-form {
      gap: 0;
    }
    body.game .app form .form-group,
    body.game .app form .form-group-stacked {
      clear: both;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin: 3px 0;
      align-items: center;
    }
    body.game .app form .form-group > * {
      flex: 3;
    }
    body.game .app form .form-group > label {
      flex: 2;
    }
    body.game .app form .form-group label {
      line-height: var(--form-field-height);
      cursor: var(--cursor-default);
    }
    body.game .app form .form-group .form-fields {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-end;
      align-items: center;
      gap: 4px;
    }
    body.game .app form .form-group .form-fields > * {
      flex: 1;
    }
    body.game .app form .form-group .form-fields > label {
      flex: 0;
      padding: 0 4px;
      text-align: center;
    }
    body.game .app form .form-group .form-fields > label.checkbox {
      flex: none;
      padding: 0;
    }
    body.game .app form .form-group .form-fields > input[type="checkbox"] {
      flex: 0 0 20px;
    }
    body.game .app form .form-group .form-fields button {
      flex: 0;
      line-height: calc(var(--form-field-height) - 4px);
    }
    body.game .app form .form-group .form-fields span.sep {
      flex: none;
    }
    body.game .app form .form-group span.units {
      flex: 0;
      line-height: 28px;
      font-size: var(--font-size-12);
      color: var(--color-text-dark-secondary);
    }
    body.game .app form .form-group-stacked > *,
    body.game .app form .form-group.stacked > * {
      flex: 0 0 100%;
    }
    body.game .app form .form-group.slim .form-fields {
      flex: 1;
    }
    body.game .app form .form-group.slim .form-fields > label {
      flex: none;
      font-size: var(--font-size-12);
      color: var(--color-text-dark-secondary);
      text-align: right;
    }
    body.game .app form .form-group.slim .form-fields > input[type="number"],
    body.game .app form .form-group.slim .form-fields > input[type="text"] {
      flex: 0 0 50px;
      padding: 0;
      text-align: center;
    }
    body.game .app form .form-group.hidden {
      display: none;
    }
    body.game .app form h1.form-header,
    body.game .app form h2.form-header,
    body.game .app form h3.form-header {
      margin: 0 0 5px;
      padding: 3px 0;
      color: var(--color-text-dark-header);
      border-top: 1px solid var(--color-border-light-primary);
      border-bottom: 1px solid var(--color-border-light-primary);
    }
    body.game .app form .notes,
    body.game .app form .hint {
      flex: 0 0 100%;
      font-size: var(--font-size-12);
      line-height: var(--line-height-16);
      color: var(--color-text-dark-secondary);
      margin: 3px 0;
    }
    body.game .app input:focus {
      outline: none;
    }
    body.game .app input[type="text"],
    body.game .app input[type="number"],
    body.game .app input[type="password"],
    body.game .app input[type="date"],
    body.game .app input[type="time"],
    body.game .app input[type="search"] {
      width: calc(100% - 2px);
      min-width: 20px;
      height: var(--form-field-height);
      background: rgba(0, 0, 0, 0.05);
      padding: 1px 3px;
      margin: 0;
      color: var(--color-text-dark-primary);
      font-family: inherit;
      font-size: inherit;
      text-align: inherit;
      line-height: inherit;
      border: 1px solid var(--color-border-light-tertiary);
      border-radius: 3px;
      -webkit-user-select: text;
      -moz-user-select: text;
      -ms-user-select: text;
      user-select: text;
    }
    body.game .app input[type="text"]:focus,
    body.game .app input[type="number"]:focus,
    body.game .app input[type="password"]:focus,
    body.game .app input[type="date"]:focus,
    body.game .app input[type="time"]:focus,
    body.game .app input[type="search"]:focus {
      box-shadow: 0 0 5px var(--color-shadow-primary);
    }
    body.game .app input[type="number"]::-webkit-inner-spin-button,
    body.game .app input[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: none;
    }
    body.game .app input[type="number"] {
      -moz-appearance: textfield;
    }
    body.game .app 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, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 43%, #333 45%, #333 55%, rgba(0, 0, 0, 0) 57%, rgba(0, 0, 0, 0) 100%), linear-gradient(135deg, transparent 0%, transparent 43%, #333 45%, #333 55%, transparent 57%, transparent 100%);
      cursor: var(--cursor-pointer);
    }
    body.game .app input[type="checkbox"] {
      flex: 0 0 20px;
      width: 20px;
      height: 20px;
      margin: 3px 5px;
    }
    body.game .app input[type="radio"] {
      position: relative;
      top: 2px;
      margin: 0 0 0 5px;
    }
    body.game .app input[type="checkbox"]:checked,
    body.game .app input[type="radio"]:checked {
      accent-color: var(--color-checkbox-checked);
    }
    body.game .app input[type="checkbox"]:focus-visible,
    body.game .app input[type="radio"]:focus-visible {
      box-shadow: 0 0 5px var(--color-shadow-primary);
      outline: 1px solid transparent;
    }
    body.game .app input.placeholder-fa-solid::placeholder {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      font-family: "Font Awesome 6 Pro";
      font-weight: 900;
      font-style: normal;
      font-variant: normal;
      line-height: 1;
      text-rendering: auto;
    }
    body.game .app label.checkbox {
      flex: auto;
      padding: 0;
      margin: 0;
      height: 22px;
      line-height: 22px;
      font-size: var(--font-size-11);
    }
    body.game .app label.checkbox > input[type="checkbox"] {
      width: 16px;
      height: 16px;
      margin: 0 3px;
      position: relative;
      top: 4px;
    }
    body.game .app label.checkbox.right > input[type="checkbox"] {
      margin: 0 0 0 2px;
    }
    body.game .app select {
      height: calc(var(--form-field-height) + 1px);
      background: rgba(0, 0, 0, 0.05);
      border: 1px solid var(--color-border-light-tertiary);
      border-radius: 3px;
      padding: 0 3px;
      text-overflow: ellipsis;
      font-family: inherit;
      font-size: inherit;
      color: inherit;
    }
    body.game .app select:focus {
      box-shadow: 0 0 5px var(--color-shadow-primary);
      outline: none;
    }
    body.game .app select[multiple] {
      height: auto;
      padding: 3px;
    }
    body.game .app option,
    body.game .app optgroup {
      font-family: inherit;
      background: var(--color-select-option-bg);
    }
    body.game .app textarea {
      width: 100%;
      min-height: 50px;
      padding: 5px;
      background: rgba(0, 0, 0, 0.05);
      border: 1px solid var(--color-border-dark);
      border-radius: 3px;
      color: var(--color-text-dark-primary);
      font-family: var(--font-monospace);
      -webkit-user-select: text;
      -moz-user-select: text;
      -ms-user-select: text;
      user-select: text;
    }
    body.game .app textarea:focus {
      box-shadow: 0 0 6px var(--color-shadow-primary);
      outline: none;
    }
    body.game .app textarea:read-only {
      color: var(--color-text-dark-secondary);
      box-shadow: none;
    }
    body.game .app button {
      width: 100%;
      margin: 0 1px;
      background: rgba(255, 255, 240, 0.8);
      border: 1px solid var(--color-border-light-primary);
      border-radius: 3px;
      font-size: var(--font-size-14);
      line-height: 28px;
      font-family: var(--font-primary);
      cursor: var(--cursor-pointer);
      color: revert;
    }
    body.game .app button > i {
      margin-right: 3px;
    }
    body.game .app button > * {
      cursor: inherit;
    }
    body.game .app button:hover,
    body.game .app button:focus {
      outline: none;
      box-shadow: 0 0 5px var(--color-shadow-primary);
    }
    body.game .app button:disabled {
      color: var(--color-text-dark-secondary);
      box-shadow: none;
    }
    body.game .app button.hidden {
      display: none;
    }
    body.game .app form button {
      background: rgba(0, 0, 0, 0.1);
      border: 2px groove var(--color-border-light-highlight);
    }
    body.game .app input:disabled {
      border: none;
      color: var(--color-text-dark-secondary);
    }
    body.game .app input:disabled:hover {
      border: none;
      box-shadow: none;
      outline: none;
    }
    body.game .app input::placeholder {
      color: var(--color-text-dark-secondary);
      opacity: 1;
    }
    body.game .app input[type="text"].color {
      flex: 1.45;
    }
    body.game .app input[type="color"][data-edit] {
      height: var(--form-field-height);
      background: transparent;
      border: 2px groove var(--color-border-light-highlight);
    }
    body.game .app input[type="color"][data-edit][data-edit] {
      margin-left: 5px;
      flex: 1.45;
    }
    body.game .app button.file-picker {
      flex: 0 0 24px;
      line-height: 24px;
      margin: -1px 0 -1px 4px;
      order: 99;
    }
    body.game .app button.file-picker + input[type="text"] {
      height: 28px;
      margin-right: 5px !important;
    }
    body.game .app input[type=range] {
      -webkit-appearance: none;
      background: transparent;
      height: 20px;
      margin: 0;
      width: 100%;
    }
    body.game .app input[type=range]::-webkit-slider-runnable-track {
      width: 100%;
      height: 6px;
      cursor: var(--cursor-pointer);
      box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
      background: #999999;
      border-radius: 3px;
      border: 1px solid #111;
    }
    body.game .app input[type=range]::-webkit-slider-thumb {
      box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
      border: 1px solid var(--color-border-dark);
      height: 12px;
      width: 12px;
      border-radius: 2px;
      background: #c85019;
      cursor: var(--cursor-pointer);
      -webkit-appearance: none;
      margin-top: -4px;
    }
    body.game .app input[type=range]::-moz-range-track {
      width: 100%;
      height: 6px;
      cursor: var(--cursor-pointer);
      box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
      background: #999999;
      border-radius: 3px;
      border: 1px solid var(--color-border-dark-1);
    }
    body.game .app input[type=range]::-moz-range-thumb {
      box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
      border: 1px solid var(--color-border-dark);
      height: 12px;
      width: 12px;
      border-radius: 2px;
      background: #c85019;
      cursor: var(--cursor-pointer);
    }
    body.game .app input[type=range]::-ms-track {
      width: 100%;
      height: 6px;
      cursor: var(--cursor-pointer);
      background: transparent;
      border-color: transparent;
      color: transparent;
    }
    body.game .app input[type=range]::-ms-fill-lower {
      background: #8c8c8c;
      border: 1px solid var(--color-border-dark-1);
      border-radius: 6px;
      box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    }
    body.game .app input[type=range]::-ms-fill-upper {
      background: #999999;
      border: 1px solid var(--color-border-dark-1);
      border-radius: 6px;
      box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    }
    body.game .app input[type=range]::-ms-thumb {
      box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
      border: 1px solid var(--color-border-dark);
      height: 12px;
      width: 12px;
      border-radius: 2px;
      background: #c85019;
      cursor: var(--cursor-pointer);
    }
    body.game .app input[type=range]:focus::-ms-fill-lower {
      background: #999999;
    }
    body.game .app input[type=range]:focus::-ms-fill-upper {
      background: #a6a6a6;
    }
    body.game .app input[type="range"] + .range-value {
      display: block;
      flex: 0 1 48px;
      text-align: center;
      border: 1px solid var(--color-border-light-primary);
      padding: 2px;
      margin-left: 10px;
    }
    body.game .app input[type="range"]:disabled {
      filter: grayscale(1) opacity(0.33);
    }
    body.game .app input[type="range"]:disabled + .range-value {
      opacity: 0.67;
    }
    body.game .app input[type="range"]:disabled:hover {
      text-shadow: none;
      cursor: var(--cursor-default);
    }
    body.game .app input[type="range"]:disabled::-moz-range-thumb,
    body.game .app input[type="range"].disabled::-webkit-slider-thumb {
      background-color: var(--color-text-dark-4);
    }
    body.game .app input[type="range"]:focus {
      outline: none;
    }
    body.game .app input[type="range"]:focus::-webkit-slider-runnable-track {
      background: #a6a6a6;
    }
    body.game .app input[type="range"]:focus::-moz-range-track {
      background: #a6a6a6;
    }
    body.game .app input[type="range"]:focus::-webkit-slider-runnable-track {
      box-shadow: 0 0 5px var(--color-shadow-primary);
    }
    body.game .app input[type="range"]:focus::-moz-range-track {
      box-shadow: 0 0 5px var(--color-shadow-primary);
    }
    body.game .app input[type="range"]:focus::-webkit-slider-thumb {
      box-shadow: 0 0 5px var(--color-shadow-primary);
    }
    body.game .app input[type="range"]:focus::-moz-range-thumb {
      box-shadow: 0 0 5px var(--color-shadow-primary);
    }
    body.game .app input.color-range,
    body.game .app input.color-range:focus {
      --color-thumb: #ffffff;
      --gradient: linear-gradient(to right, #ff0000 0%, #ffff00 16.667%, #00ff00 33.333%, #00ffff 50%, #0000ff 66.667%, #ff00ff 83.333%, #ff0000 100%);
      appearance: none;
      height: 1.6em;
      width: 100%;
      padding: 0;
      border: none;
      outline: none;
    }
    body.game .app input.color-range::-webkit-slider-thumb,
    body.game .app input.color-range:focus::-webkit-slider-thumb {
      -webkit-appearance: none;
      cursor: var(--cursor-pointer);
      height: 18px;
      width: 18px;
      margin-top: -4px;
      background: var(--color-thumb);
      border-radius: 15%;
      border: 1px solid var(--color-border-dark-1);
      box-shadow: 1px 1px 1px var(--color-border-dark-2), 1px 1px 0px var(--color-border-dark-3);
    }
    body.game .app input.color-range::-webkit-slider-thumb:hover,
    body.game .app input.color-range:focus::-webkit-slider-thumb:hover {
      height: 24px;
      width: 24px;
      margin-top: -7px;
    }
    body.game .app input.color-range::-moz-range-thumb,
    body.game .app input.color-range:focus::-moz-range-thumb {
      cursor: var(--cursor-pointer);
      height: 18px;
      width: 18px;
      background: var(--color-thumb);
      border-radius: 15%;
      border: 1px solid var(--color-border-dark-1);
      box-shadow: 1px 1px 1px var(--color-border-dark-2), 1px 1px 0px var(--color-border-dark-3);
    }
    body.game .app input.color-range::-moz-range-thumb:hover,
    body.game .app input.color-range:focus::-moz-range-thumb:hover {
      height: 24px;
      width: 24px;
    }
    body.game .app input.color-range::-webkit-slider-runnable-track,
    body.game .app input.color-range:focus::-webkit-slider-runnable-track {
      cursor: var(--cursor-pointer);
      height: 12px;
      width: 100%;
      background: var(--gradient);
      border-radius: 6px;
      border: 1px solid var(--color-border-dark-1);
      box-shadow: 1px 1px 1px var(--color-border-dark-2), 1px 1px 2px var(--color-border-dark-3);
    }
    body.game .app input.color-range::-moz-range-track,
    body.game .app input.color-range:focus::-moz-range-track {
      cursor: var(--cursor-pointer);
      height: 12px;
      width: 100%;
      background: var(--gradient);
      border-radius: 6px;
      border: 1px solid var(--color-border-dark-1);
      box-shadow: 1px 1px 1px var(--color-border-dark-2), 1px 1px 2px var(--color-border-dark-3);
    }
    body.game .app input[disabled].color-range {
      --gradient: linear-gradient(to right, #454545 0%, #bbbbbb 50%, #454545 100%);
    }
    body.game .app input[disabled].color-range::-webkit-slider-thumb {
      cursor: var(--cursor-default);
      opacity: 0;
    }
    body.game .app input[disabled].color-range::-moz-range-thumb {
      cursor: var(--cursor-default);
      opacity: 0;
    }
    body.game .app input[disabled].color-range::-webkit-slider-runnable-track {
      cursor: var(--cursor-default);
      opacity: 0.5;
    }
    body.game .app input[disabled].color-range::-moz-range-track {
      cursor: var(--cursor-default);
      opacity: 0.5;
    }
    body.game .app input[type="text"].color {
      flex: 1.45;
    }
    body.game .app input[type="color"][data-edit] {
      height: var(--form-field-height);
      background: transparent;
      border: 2px groove var(--color-border-light-highlight);
    }
    body.game .app input[type="color"][data-edit][data-edit] {
      margin-left: 5px;
      flex: 1.45;
    }
    body.game .app button.file-picker {
      flex: 0 0 24px;
      line-height: 24px;
      margin: -1px 0 -1px 4px;
      order: 99;
    }
    body.game .app button.file-picker + input[type="text"] {
      height: 28px;
      margin-right: 5px !important;
    }
    body.game .app form .form-group .form-fields string-tags > button,
    body.game .app form .form-group .form-fields document-tags > button,
    body.game .app form .form-group .form-fields file-picker > button {
      flex: 0 0 36px;
      line-height: var(--form-field-height);
    }
    body.game .app .editor {
      position: relative;
      max-height: 100%;
      max-width: 100%;
      overflow: auto;
    }
    body.game .app .editor-content * {
      -webkit-user-select: text;
      -moz-user-select: text;
      -ms-user-select: text;
      user-select: text;
    }
    body.game .app .editor-edit {
      display: none;
      font-size: 1.25em;
      position: absolute;
      top: 5px;
      right: 5px;
      background: rgba(187, 187, 187, 0.75);
      border: 1px solid var(--color-border-dark-1);
      border-radius: 4px;
      padding: 1px 2px;
      box-shadow: 0 0 1px var(--color-shadow-dark);
    }
    body.game .app .editor:hover .editor-edit {
      display: block;
    }
    body.game .app .tox.tox-tinymce {
      border: none;
    }
    body.game .app .tox.tox-tinymce .tox-toolbar {
      background: transparent;
    }
    body.game .app .tox.tox-tinymce .tox-tbtn {
      font-size: var(--font-size-12);
      padding: 0 2px;
    }
    body.game .app .tox.tox-tinymce .tox-tbtn[title="Formats"] {
      width: 90px;
    }
    body.game .app .tox.tox-tinymce .tox-edit-area__iframe {
      background: transparent;
    }
    body.game .app {
      line-height: normal;
      background: url("../ui/denim075.png") repeat;
      border-radius: 5px;
      color: var(--color-text-light-highlight);
      font-size: var(--font-size-14);
      backdrop-filter: unset;
      -webkit-backdrop-filter: unset;
      /* Elements */
      /* Forms */
      /* Tabs */
      /* Dice */
      /* Dialogs */
      /* Sidebar */
      /* Journal Sheet */
      /* Adventure Importer */
    }
    body.game .app.window-app {
      border: unset;
      color-scheme: var(--color-scheme);
    }
    body.game .app.window-app > * {
      flex: 1;
    }
    body.game .app.window-app .window-header {
      flex: 0 0 30px;
      padding: 0 8px;
      gap: 0;
    }
    body.game .app.window-app .window-header .window-title {
      margin: 0;
    }
    body.game .app.window-app .window-header .document-id-link {
      opacity: unset;
    }
    body.game .app.window-app .window-header a {
      flex: none;
      margin: 0 0 0 8px;
    }
    body.game .app.window-app .window-content {
      background: url("../ui/parchment.jpg") repeat;
      padding: 8px;
      color: var(--color-text-dark-primary);
    }
    body.game .app.window-app .window-content > * {
      flex: 1;
    }
    body.game .app.window-app .flexrow {
      align-items: initial;
    }
    body.game .app.window-app .flexrow.window-header {
      align-items: center;
    }
    body.game .app .window-resizable-handle {
      width: 20px;
      height: 20px;
      position: absolute;
      bottom: -1px;
      right: 0;
      background: #444;
      padding: 2px;
      border: 1px solid var(--color-border-dark-1);
      border-radius: 4px 0 0 0;
    }
    body.game .app .window-resizable-handle i.fa-rotate-by {
      --fa-rotate-angle: 45deg;
    }
    body.game .app .scrollable {
      margin-right: unset;
      padding-right: unset;
    }
    body.game .app h1,
    body.game .app h2,
    body.game .app h3,
    body.game .app h4,
    body.game .app h5,
    body.game .app h6 {
      font-family: var(--font-primary);
      font-weight: normal;
      line-height: unset;
      color: inherit;
    }
    body.game .app h4 {
      font-size: revert;
    }
    body.game .app :is(h1, h2, h3, h4).border {
      text-indent: unset;
    }
    body.game .app :is(h1, h2, h3, h4).border::before {
      content: unset;
      position: unset;
      border-bottom: unset;
      mask-image: unset;
      -webkit-mask-image: unset;
    }
    body.game .app hr {
      margin: unset;
      margin-block-start: 0.5em;
      margin-block-end: 0.5em;
    }
    body.game .app ul li,
    body.game .app ol li {
      margin: unset;
    }
    body.game .app figure {
      width: unset;
    }
    body.game .app figure img {
      margin: unset;
      box-shadow: none;
    }
    body.game .app .flexcol > * {
      flex: 1;
    }
    body.game .app button {
      display: unset;
      height: unset;
      min-height: unset;
      padding: revert;
    }
    body.game .app button:hover {
      --button-hover-text-color: var(--button-text-color);
    }
    body.game .app button.icon {
      font-family: var(--font-awesome);
    }
    body.game .app file-picker > button {
      margin: -2px 0;
      padding: 0;
    }
    body.game .app label.checkbox {
      display: unset;
    }
    body.game .app input[type=checkbox],
    body.game .app input[type=radio] {
      appearance: revert;
      -webkit-appearance: revert;
      -moz-appearance: revert;
    }
    body.game .app input[type=checkbox]::before,
    body.game .app input[type=radio]::before,
    body.game .app input[type=checkbox]::after,
    body.game .app input[type=radio]::after {
      content: unset;
    }
    body.game .app input[type=file] {
      width: revert;
      height: revert;
      line-height: revert;
      padding: revert;
      background: revert;
      border: revert;
      border-radius: revert;
      outline: revert;
      color: revert;
    }
    body.game .app select {
      width: auto;
    }
    body.game .app .directory .directory-header .header-search input {
      --input-background: rgba(255, 255, 245, 0.8);
    }
    body.game .app .tabs {
      align-items: center;
      display: flex;
      flex-flow: row nowrap;
      gap: 0;
      line-height: unset;
      justify-content: space-around;
    }
    body.game .app .tabs.sheet-tabs {
      margin: 4px 0;
    }
    body.game .app .tabs.sheet-tabs [data-tab] {
      padding: 8px 12px;
    }
    body.game .app .tabs:not(.sheet-tabs) {
      border: none;
    }
    body.game .app .tabs > [data-tab].active {
      text-shadow: 0 0 10px var(--color-shadow-primary);
    }
    body.game .app nav.list-filters {
      display: flex;
      justify-content: end;
    }
    body.game .app nav.list-filters label {
      font-weight: bold;
    }
    body.game .app nav.list-filters a.filter {
      flex: none;
      margin-left: 10px;
      border-bottom: 2px solid var(--color-underline-inactive);
    }
    body.game .app nav.list-filters a.filter.active {
      font-weight: bold;
      border-bottom: 2px solid var(--color-underline-active);
    }
    body.game .app.tab:not(.active, .sidebar-popout) {
      display: none;
    }
    body.game .app .dice-roll .dice-total {
      margin: 0;
      line-height: 24px;
      font-size: var(--font-size-20);
      font-weight: bold;
    }
    body.game .app.dialog .dialog-buttons {
      gap: 0;
      margin: 0;
    }
    body.game .app.dialog .dialog-buttons button {
      background: rgba(0, 0, 0, 0.1);
      border: 2px groove var(--color-border-light-highlight);
      margin: 0 5px 0 0;
      flex: 1;
    }
    body.game .app.dialog .dialog-buttons button:last-child {
      margin-right: 0;
    }
    body.game .app.dialog .dialog-buttons button.default {
      background: rgba(0, 0, 0, 0.05);
      border-color: var(--color-border-light-secondary);
      text-transform: unset;
    }
    body.game .app .notification-pip {
      background: none;
      display: inline-block;
      color: var(--color-text-hyperlink);
      text-shadow: 1px 1px 3px var(--color-shadow-dark);
      position: absolute;
      top: -1px;
      right: -2px;
    }
    body.game .app .notification-pip.update {
      position: relative;
      padding-right: 2px;
    }
    body.game .app .directory-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    body.game .app .directory .directory-item img {
      border: none;
    }
    body.game .app.journal-sheet .journal-sidebar input {
      background: rgba(255, 255, 245, 0.8);
    }
    body.game .app.adventure-importer .window-content {
      padding: 0.5rem 1rem;
    }
    body.game .app.adventure-importer .adventure-header {
      flex-basis: 100%;
    }
    body.game .app.adventure-importer .adventure-header h1 {
      margin: 0;
      line-height: 50px;
      text-align: center;
      font-size: 2.5rem;
      border: none;
    }
    body.game .app.adventure-importer figure.adventure-banner {
      flex: 0 0 100%;
      margin: 0.5rem 0;
    }
    body.game .app.adventure-importer figure.adventure-banner img {
      width: 100%;
      height: 300px;
      object-fit: cover;
      border-radius: 5px;
    }
    body.game .app.adventure-importer .adventure-overview {
      flex: 2;
      margin-left: 0;
    }
    body.game .app.adventure-importer .adventure-overview p {
      font-size: var(--font-size-14);
      line-height: var(--line-height-20);
    }
    body.game .app.adventure-importer .adventure-contents {
      margin-left: 1rem;
    }
    body.game .app.adventure-importer .adventure-contents ul {
      padding: 0;
      list-style: none;
    }
    body.game .app.adventure-importer .adventure-contents ul li i {
      color: var(--color-text-dark-inactive);
      margin-right: 0.5rem;
    }
    body.game .app.adventure-importer .import-controls label.checkbox {
      font-size: var(--font-size-14);
    }
    body.game .app.adventure-importer .import-controls label.checkbox > i {
      color: var(--color-text-dark-inactive);
    }
    body.game .app.adventure-importer .import-controls label.checkbox > input[type=checkbox] {
      top: 3px;
    }
    body.game .app.adventure-importer .adventure-footer {
      flex: 0 0 100%;
      margin-top: 0.5rem;
    }
  }
  .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 .tableWrapper {
  overflow-x: auto;
}
.ProseMirror table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  overflow: hidden;
}
.ProseMirror td,
.ProseMirror th {
  vertical-align: top;
  box-sizing: border-box;
  position: relative;
}

.ProseMirror td:not([data-colwidth]):not(.column-resize-dragging),
.ProseMirror th:not([data-colwidth]):not(.column-resize-dragging) {
  /* if there's no explicit width set and the column is not being resized, set a default width */
  min-width: var(--default-cell-min-width);
}

.ProseMirror .column-resize-handle {
  position: absolute;
  right: -2px;
  top: 0;
  bottom: 0;
  width: 4px;
  z-index: 20;
  background-color: #adf;
  pointer-events: none;
}
.ProseMirror.resize-cursor {
  cursor: ew-resize;
  cursor: col-resize;
}
/* Give selected cells a blue overlay */
.ProseMirror .selectedCell:after {
  z-index: 2;
  position: absolute;
  content: '';
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(200, 200, 255, 0.4);
  pointer-events: none;
}

  .prosemirror,
  prose-mirror {
    display: flex;
    flex-direction: column;
    gap: 0.5rem 0;
    min-height: var(--min-height);
    position: relative;
    /* ----------------------------------------- */
    /*  Collaborating                            */
    /* ----------------------------------------- */
    /* ----------------------------------------- */
    /*  Source Code Editing                      */
    /* ----------------------------------------- */
    /* ----------------------------------------- */
    /*  Tables                                   */
    /* ----------------------------------------- */
  }
  .prosemirror button.toggle,
  prose-mirror button.toggle {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
  }
  .prosemirror button.toggle[disabled],
  prose-mirror button.toggle[disabled] {
    display: none;
  }
  .prosemirror:hover button.toggle:enabled,
  prose-mirror:hover button.toggle:enabled {
    display: block;
  }
  .prosemirror .editor-container,
  prose-mirror .editor-container {
    flex: 1;
    position: relative;
    overflow: hidden;
  }
  .prosemirror .editor-content,
  prose-mirror .editor-content {
    position: absolute;
    overflow: hidden auto;
    padding-right: 0.5rem;
    inset: 0;
    outline: 0 solid transparent;
    cursor: var(--cursor-text);
    user-select: text;
  }
  .prosemirror .editor-content[contenteditable=""],
  prose-mirror .editor-content[contenteditable=""],
  .prosemirror .editor-content[contenteditable="true"],
  prose-mirror .editor-content[contenteditable="true"] {
    cursor: auto;
  }
  .prosemirror menu,
  prose-mirror menu {
    display: flex;
    flex-wrap: wrap;
    flex: none;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 8px;
    gap: 4px;
    background: var(--menu-background);
    border-radius: 6px;
  }
  .prosemirror menu .source-code,
  prose-mirror menu .source-code {
    margin-right: 4px;
  }
  .prosemirror menu .concurrent-users,
  prose-mirror menu .concurrent-users {
    display: none;
    justify-content: center;
    align-items: center;
    padding: 0 6px;
    background: var(--color-control-hover);
    border: 1px solid var(--color-shadow-highlight);
    border-radius: 3px;
    box-shadow: 0 0 4px var(--color-shadow-highlight);
  }
  .prosemirror menu .concurrent-users i,
  prose-mirror menu .concurrent-users i {
    margin-right: 6px;
  }
  .prosemirror menu button,
  prose-mirror menu button {
    background: transparent;
    cursor: var(--cursor-pointer);
    border: none;
    border-radius: 4px;
    height: var(--menu-height);
    line-height: var(--menu-height);
    outline: none;
  }
  .prosemirror menu button i,
  prose-mirror menu button i {
    margin: 0;
  }
  .prosemirror menu button.source-code-action,
  prose-mirror menu button.source-code-action {
    background: var(--color-control-hover);
  }
  .prosemirror menu button:focus,
  prose-mirror menu button:focus {
    outline: none;
  }
  .prosemirror menu button:hover,
  prose-mirror menu button:hover,
  .prosemirror menu button.active,
  prose-mirror menu button.active {
    box-shadow: none;
    background: var(--color-control-hover);
    color: var(--color-form-label-hover);
  }
  .prosemirror menu .pm-dropdown,
  prose-mirror menu .pm-dropdown {
    width: min-content;
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 4px;
  }
  .prosemirror menu .pm-dropdown > span,
  prose-mirror menu .pm-dropdown > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-12);
  }
  .prosemirror menu .pm-dropdown .html,
  prose-mirror menu .pm-dropdown .html {
    display: none;
  }
  .prosemirror menu .pm-dropdown i.fa-chevron-down,
  prose-mirror menu .pm-dropdown i.fa-chevron-down {
    font-size: var(--font-size-11);
  }
  .prosemirror menu .pm-dropdown ul,
  prose-mirror menu .pm-dropdown ul {
    display: none;
  }
  .prosemirror.collaborating menu .source-code-edit,
  prose-mirror.collaborating menu .source-code-edit {
    display: none;
  }
  .prosemirror.collaborating menu .concurrent-users,
  prose-mirror.collaborating menu .concurrent-users {
    display: flex;
    height: var(--menu-height);
  }
  .prosemirror.collaborating menu .concurrent-users .scene-player,
  prose-mirror.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;
  }
  .prosemirror.collaborating menu .concurrent-users .scene-player:last-child,
  prose-mirror.collaborating menu .concurrent-users .scene-player:last-child {
    margin: 0;
  }
  .prosemirror.collaborating:has(code-mirror[disabled]) menu [data-action=save],
  prose-mirror.collaborating:has(code-mirror[disabled]) menu [data-action=save] {
    display: none;
  }
  .prosemirror.editing-source menu .text,
  prose-mirror.editing-source menu .text {
    display: none;
  }
  .prosemirror.editing-source menu .html,
  prose-mirror.editing-source menu .html {
    display: initial;
  }
  .prosemirror.editing-source menu .right,
  prose-mirror.editing-source menu .right {
    margin-left: auto;
  }
  .prosemirror.editing-source menu .right ~ .right,
  prose-mirror.editing-source menu .right ~ .right {
    margin-left: unset;
  }
  .prosemirror.editing-source .editor-container,
  prose-mirror.editing-source .editor-container {
    display: none;
  }
  .prosemirror.editing-source code-mirror.source-editor,
  prose-mirror.editing-source code-mirror.source-editor {
    border: 1px dashed var(--color-light-4);
    border-radius: 4px;
    margin: 2px;
  }
  .prosemirror .tableWrapper th,
  prose-mirror .tableWrapper th,
  .prosemirror .tableWrapper td,
  prose-mirror .tableWrapper td {
    border-left: 1px solid black;
    border-right: 1px solid black;
  }
  .prosemirror .ProseMirror .selectedCell::after,
  prose-mirror .ProseMirror .selectedCell::after {
    z-index: unset;
  }
  prose-mirror.inactive {
    overflow: hidden auto;
  }
  /* ----------------------------------------- */
  /*  Drop-downs                               */
  /* ----------------------------------------- */
  #prosemirror-dropdown {
    position: fixed;
    z-index: var(--z-index-tooltip);
    color: var(--button-text-color);
  }
  #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(--dropdown-background);
    border-radius: 3px;
    border: 1px solid var(--dropdown-border);
    font-size: var(--font-size-12);
    line-height: var(--font-size-24);
    z-index: 1;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.45);
  }
  #prosemirror-dropdown > ul {
    display: block;
  }
  #prosemirror-dropdown > ul:not(:has(> li > ul)) {
    max-height: 400px;
    overflow: hidden auto;
  }
  #prosemirror-dropdown li {
    padding: 1px 6px;
    cursor: var(--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-control-hover);
  }
  #prosemirror-dropdown li:hover ul {
    display: block;
  }
  #prosemirror-dropdown li:hover > :is(span, i) {
    color: var(--color-form-label-hover);
  }
  /* ----------------------------------------- */
  /*  Insertion Dialogs                        */
  /* ----------------------------------------- */
  .prosemirror.menu-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  .prosemirror.menu-dialog form {
    width: 460px;
    position: fixed;
    background: var(--dialog-background);
    border: 1px solid var(--dialog-border);
    border-radius: 4px;
    padding: 8px;
    box-shadow: 0 0 8px 0 var(--color-shadow-dark);
    gap: 8px;
  }
}
/* ---------------------------------------- */
/*  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);
    color-scheme: var(--color-scheme);
  }
  #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                                */
  /* ----------------------------------------- */
  * {
    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);
    text-shadow: 1px 1px 4px #000;
  }
  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;
    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: var(--button-size);
    right: var(--button-size);
    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);
    font-family: var(--font-body);
    line-height: calc(var(--pip-size) - var(--pip-size) / 16);
    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 {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    flex: 0 0 480px;
    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;
    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;
    height: 100%;
    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;
    border: none;
  }
  #setup-packages nav.tabs [data-tab] {
    flex: 1;
    margin: 0;
    gap: 0.5rem;
    font-size: var(--font-size-24);
  }
  #setup-packages nav.tabs [data-tab] i {
    font-size: var(--font-size-24);
  }
  #setup-packages nav.tabs [data-tab].disabled {
    color: var(--color-light-5);
  }
  #setup-packages nav.tabs [data-tab].active {
    color: var(--color-light-1);
    text-shadow: 0 0 8px var(--color-warm-1);
  }
  #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 {
    --button-size: 32px;
    display: inline-block;
    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 {
    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: end;
  }
  #setup-packages .package .tags .play {
    cursor: var(--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;
    padding: 0;
  }
  #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 calc(var(--scroll-margin) * -1) 0 0;
    padding: 0.25rem var(--scroll-margin) 1rem 0;
  }
  #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: var(--cursor-pointer);
  }
  /** Tags */
  body.setup .tags,
  body.update .tags {
    flex-basis: 100%;
    gap: 3px;
    justify-content: end;
  }
  body.setup .tags .tag,
  body.update .tags .tag {
    height: 2em;
    opacity: 0.75;
  }
  /* ---------------------------------------- */
  /*  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;
  }
  /* ---------------------------------------- */
  /*  Server Settings Configuration           */
  /* ---------------------------------------- */
  #server-settings-config .form-group.warning {
    --color-form-label: var(--color-text-primary);
    --input-background-color: var(--color-cool-5-90);
    --color-form-hint: var(--color-text-secondary);
  }
  #server-settings-config .form-group.upnp .form-fields label {
    white-space: nowrap;
  }
  #server-settings-config .form-group.ssl-cert {
    align-items: start;
  }
  #server-settings-config .form-group.ssl-cert .form-fields {
    flex: 2;
  }
  #server-settings-config .form-group.ssl-cert .form-fields label {
    flex-basis: 100%;
    gap: 0.5rem;
  }
  /* ---------------------------------------- */
  /*  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 form {
    height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .updated-packages form .dialog-content {
    height: inherit;
    flex: inherit;
  }
  .updated-packages .header {
    font-size: var(--font-size-15);
    font-weight: bold;
    gap: 1rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--color-cool-4);
  }
  .updated-packages ul {
    padding-left: 0;
    margin: 0 calc(-1 * var(--scroll-margin)) 0 0;
  }
  .updated-packages ul li {
    gap: 1rem;
    padding: 1rem 0;
    margin-bottom: 0;
  }
  .updated-packages .package {
    flex: 0 0 240px;
  }
  .updated-packages .action {
    flex: 0 0 110px;
    font-weight: bold;
  }
  .updated-packages .description {
    overflow-wrap: anywhere;
  }
  .updated-packages .info {
    color: var(--color-level-info);
  }
  .updated-packages .info > i::before {
    content: "\f05a";
  }
  .updated-packages .warning {
    color: var(--color-level-warning);
  }
  .updated-packages .warning > i::before {
    content: "\f071";
  }
  .updated-packages .error {
    color: var(--color-level-error);
  }
  .updated-packages .error > i::before {
    content: "\f06a";
  }
  .updated-packages .success {
    color: var(--color-level-success);
  }
  .updated-packages .success > i::before {
    content: "\f00c";
  }
  .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 .window-header button.supplemental,
  .backup-list .window-header button.supplemental {
    font-size: inherit;
    padding: 0 0.5rem;
    white-space: nowrap;
  }
  #backup-manager .form-group,
  .backup-list .form-group {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5rem;
  }
  #backup-manager .form-group label.checkbox,
  .backup-list .form-group label.checkbox {
    line-height: normal;
  }
  #backup-manager .form-group button,
  .backup-list .form-group button {
    --input-height: 1.5rem;
    font-size: var(--font-size-12);
  }
  #backup-manager aside > footer {
    justify-content: space-between;
  }
  #backup-manager aside > footer .size {
    color: var(--color-text-secondary);
  }
  #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 ul.summary {
    flex: none;
    list-style: none;
    padding-left: 0;
    font-size: var(--font-size-14);
  }
  #compatibility-checker aside ul.summary > li.understated {
    opacity: 0.75;
  }
  #compatibility-checker aside ul.summary > li > i {
    margin-right: 0.375rem;
  }
  #compatibility-checker aside ul.summary > li.success > i {
    color: var(--color-level-success);
  }
  #compatibility-checker aside ul.summary > li.warning > i {
    color: var(--color-level-warning);
  }
  #compatibility-checker aside ul.summary > li.error > i {
    color: var(--color-level-error);
  }
  #compatibility-checker aside ul.summary > li.neutral > i {
    color: var(--color-cool-3);
  }
  #compatibility-checker nav.filters span.label {
    color: var(--color-text-secondary);
  }
  #compatibility-checker nav.filters button {
    --control-border-color: var(--color-light-5);
    --control-hover-border-color: var(--control-border-color);
    --control-icon-color: var(--color-text-secondary);
    --control-size: 2em;
    flex: 1;
    font-size: var(--font-size-14);
  }
  #compatibility-checker nav.filters button:hover,
  #compatibility-checker nav.filters button[aria-pressed=true] {
    text-shadow: 0 0 10px var(--color-shadow-primary);
  }
  #compatibility-checker nav.filters button[aria-pressed=true] {
    cursor: var(--cursor-pointer);
  }
  #compatibility-checker .form-group {
    border-bottom: 1px solid var(--sidebar-separator);
    padding-bottom: 0.5rem;
  }
  #compatibility-checker .form-group label.checkbox {
    line-height: normal;
  }
  #compatibility-checker .form-group .form-fields {
    gap: 0.25rem;
  }
  #compatibility-checker .form-group .form-fields > :where(a, button) {
    --button-size: 2em;
    font-size: var(--font-size-12);
  }
  #compatibility-checker .form-group p.hint {
    font-size: var(--font-size-12);
    width: 0;
  }
  #compatibility-checker .form-group .tags > a {
    width: 0;
  }
  /* ---------------------------------------- */
  /*  Install Package                         */
  /* ---------------------------------------- */
  #install-package .window-content {
    display: grid;
    grid-template: "sidebar main" minmax(0, 1fr) "footer footer" auto / 220px minmax(0, 1fr);
  }
  #install-package .window-content > aside {
    grid-area: sidebar;
    margin-right: 0;
  }
  #install-package .window-content > .main {
    grid-area: main;
    padding-left: 1rem;
  }
  #install-package .window-content > footer {
    border-top: var(--sidebar-separator);
    flex-wrap: nowrap;
    grid-area: footer;
    margin-top: auto;
    padding-top: 1rem;
  }
  #install-package .window-content > footer label {
    color: var(--color-text-secondary);
    white-space: nowrap;
  }
  #install-package .window-content > footer button {
    --button-size: 2em;
  }
  #install-package nav.filters {
    gap: 1rem;
  }
  #install-package nav.filters .controls {
    justify-content: end;
  }
  #install-package nav.filters .controls button {
    --control-icon-color: var(--color-text-secondary);
    flex: 0 0 fit-content;
    font-size: var(--font-size-14);
    white-space: nowrap;
  }
  #install-package .form-group {
    padding-bottom: 0.5rem;
  }
  #install-package .form-group .form-fields span.protected {
    color: var(--color-text-secondary);
    flex: 0;
    font-size: var(--font-size-12);
    position: relative;
    top: 1px;
  }
  #install-package .form-group .form-fields button.install-package {
    color: var(--color-text-secondary);
  }
  #install-package .tags a {
    width: 0;
  }
  #setup-install-dependencies .scrollable {
    max-height: 600px;
  }
  /* ---------------------------------------- */
  /*  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 Software                         */
  /* ---------------------------------------- */
  #setup-update .update-channels {
    gap: 8px;
  }
  /* ---------------------------------------- */
  /*  Update Notes                            */
  /* ---------------------------------------- */
  #update-notes {
    max-height: 80vh;
  }
  #update-notes article h1 {
    font-size: var(--font-size-32);
  }
  #update-notes article h2 {
    font-size: var(--font-size-24);
  }
  #update-notes article h3 {
    font-size: var(--font-size-20);
  }
  #update-notes article h4 {
    font-size: var(--font-size-18);
  }
  #update-notes article h5 {
    font-size: var(--font-size-16);
  }
  #module-config .tab {
    min-height: 50px;
  }
  #module-config .tab button.icon {
    --button-size: 1.75rem;
  }
  /* ---------------------------------------- */
  /*  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 - 450px);
    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.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;
    font-weight: bold;
    text-align: left;
  }
  body.players #permissions-config button {
    --button-size: calc(1.25 * var(--input-height));
  }
  /* ----------------------------------------- */
  /*  Game Layout                              */
  /* ----------------------------------------- */
  body.game {
    position: fixed;
    display: flex;
    padding: 0;
    overflow: hidden;
    cursor: var(--cursor-default);
  }
  #interface {
    display: flex;
    flex: 1;
    justify-content: center;
    overflow: visible;
    position: relative;
  }
  #ui-middle {
    flex: none;
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    z-index: var(--z-index-app);
    transform: scale(var(--ui-scale));
    transform-origin: top center;
    height: calc(100% / var(--ui-scale));
  }
  #ui-middle #ui-top {
    width: 100%;
    height: 50%;
    justify-content: flex-start;
    align-items: center;
  }
  #ui-middle #ui-bottom {
    width: 100%;
    height: 50%;
    justify-content: flex-end;
    align-items: center;
  }
  #ui-middle #ui-bottom > #camera-views {
    justify-content: flex-start;
  }
  #ui-left {
    --control-columns: 2;
    --control-size: 32px;
    position: absolute;
    left: 0;
    width: 50%;
    align-items: flex-start;
    flex-wrap: nowrap;
    padding: 16px;
    gap: 16px;
    pointer-events: none;
    z-index: var(--z-index-app);
    transform: scale(var(--ui-scale));
    transform-origin: top left;
    height: calc(100% / var(--ui-scale));
  }
  #ui-left #ui-left-column-1 {
    flex: none;
    width: calc((var(--control-columns) * var(--control-size)) + ((var(--control-columns) - 1) * 8px));
    height: 100%;
    justify-content: space-between;
    gap: 16px;
  }
  #ui-left #ui-left-column-2 {
    flex: 0 0 200px;
    height: 100%;
  }
  #ui-right {
    position: absolute;
    inset: 0 0 0 auto;
    align-items: flex-start;
    gap: 16px;
    pointer-events: none;
    z-index: var(--z-index-app);
    transform: scale(var(--ui-scale));
    transform-origin: top right;
    height: calc(100% / var(--ui-scale));
  }
  #ui-right #ui-right-column-1 {
    flex: 1;
    height: 100%;
    padding: 16px 0 14px;
    gap: 16px;
  }
  canvas#board {
    z-index: var(--z-index-canvas);
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  body.stream {
    background: lime;
    box-shadow: none;
    /* Stream Chat */
  }
  body.stream .tab[data-tab] {
    position: absolute;
    top: 20px;
    display: block;
    width: 300px;
    height: calc(100vh - 40px);
  }
  body.stream #chat {
    left: 20px;
    display: flex;
    overflow: hidden;
  }
  body.stream #chat .chat-form {
    display: none;
  }
}
@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;
    }
  }
  @media (max-height: 960px) {
    #main-header {
      --header-size: 80px;
    }
  }
  @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;
    }
    /* ---------------------------------------- */
    /*  views/auth.less                         */
    /* ---------------------------------------- */
    body.auth {
      --header-size: 100px;
      --form-padding: 1rem;
    }
  }
}
/* ---------------------------------------- */
/*  Special Exceptions                      */
/* ---------------------------------------- */
@layer exceptions {
  /* ---------------------------------- */
  /*  Applications                      */
  /* ---------------------------------- */
  body.game:is(.performance-low, .noblur) :is(#menu, .app, .application) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.game:is(.performance-low, .noblur) :is(#menu, .app, .application) .window-content {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* ---------------------------------- */
  /*  Chat                              */
  /* ---------------------------------- */
  #chat-notifications .overflow {
    scrollbar-width: none;
  }
}