:root {
  --dark0_x: 46, 52, 64; /* #2e3440 */
  --dark0: rgb(var(--dark0_x));
  --dark1_x: 59, 66, 82; /* #3b4252 */
  --dark1: rgb(var(--dark1_x));
  --dark2_x: 67, 76, 94; /* #434c5e */
  --dark2: rgb(var(--dark2_x));
  --dark3_x: 76, 86, 106; /* #4c566a */
  --dark3: rgb(var(--dark3_x));

  --light0_x: 216, 222, 233; /* #d8dee9 */
  --light0: rgb(var(--light0_x));
  --light1_x: 229, 233, 240; /* #e5e9f0 */
  --light1: rgb(var(--light1_x));
  --light2_x: 236, 239, 244; /* #eceff4 */
  --light2: rgb(var(--light2_x));
  --light3_x: 255, 255, 255; /* #ffffff */
  --light3: rgb(var(--light3_x));

  --frost0_x: 143, 188, 187; /* #8fbcbb */
  --frost0: rgb(var(--frost0_x));
  --frost1_x: 136, 192, 208; /* #88c0d0 */
  --frost1: rgb(var(--frost1_x));
  --frost2_x: 129, 161, 193; /* #81a1c1 */
  --frost2: rgb(var(--frost2_x));
  --frost3_x: 94, 129, 172; /* #5e81ac */
  --frost3: rgb(var(--frost3_x));

  --red_x: 191, 97, 106; /* #bf616a */
  --red: rgb(var(--red_x));
  --orange_x: 208, 135, 112; /* #d08770 */
  --orange: rgb(var(--orange_x));
  --yellow_x: 235, 203, 139; /* #ebcb8b */
  --yellow: rgb(var(--yellow_x));
  --green_x: 163, 190, 140; /* #a3be8c */
  --green: rgb(var(--green_x));
  --purple_x: 180, 142, 173; /* #b48ead */
  --purple: rgb(var(--purple_x));
}

body {
  /* --frost3 */
  --accent-h: 213;
  --accent-s: 32%;
  --accent-l: 52%;

  --link-decoration: underline;
  --link-decoration-hover: underline;
  --link-external-decoration: underline;
  --link-external-decoration-hover: underline;

  --tag-decoration: none;
  --tag-decoration-hover: underline;
  --tag-padding-x: 0.4em;
  --tag-padding-y: 0.2em;
  --tag-radius: 0.5em;

  --tab-font-weight: 600;
  --tab-curve: 0.6em;
  --tab-radius: 0.5em;
  --tab-radius-active: 0.5em;
  --tab-outline-color: var(--dark2);
  --tab-outline-width: 2px;
  --tab-text-color-focused-highlighted: var(--frost1);
  --tab-text-color-focused-active: var(--frost1);

  --titlebar-background: var(--dark1);
  --titlebar-background-focused: var(--dark1);
  --titlebar-border-width: 0em;

  --ribbon-background: var(--dark1);
  --status-bar-background: var(--dark1);
  --status-bar-border-color: var(--dark3);

  --bold-weight: 600;

  --divider-width: 0.2em;

  --embed-border-left: 6px double var(--interactive-accent);
}

.theme-dark {
  --color-red-rgb: var(--red_x);
  --color-red: var(--red);
  --color-purple-rgb: var(--purple_x);
  --color-purple: var(--purple);
  --color-green-rgb: var(--green_x);
  --color-green: var(--green);
  --color-cyan-rgb: var(--frost1_x);
  --color-cyan: var(--frost1);
  --color-blue-rgb: var(--frost3_x);
  --color-blue: var(--frost3);
  --color-yellow-rgb: var(--yellow_x);
  --color-yellow: var(--yellow);
  --color-orange-rgb: var(--orange_x);
  --color-orange: var(--orange);
  --background-primary: var(--dark0);
  --background-primary-alt: var(--dark0);
  --background-secondary: var(--dark1);
  --background-secondary-alt: var(--dark2);
  --background-modifier-border: var(--dark2);
  --color-base-40: var(--dark1);
  --color-base-20: var(--dark1);
  /* button colors  */
  --color-base-25: var(--dark0);
  --color-base-30: var(--dark1);
  --color-base-35: var(--dark2);

  --text-normal: var(--light2);
  --text-faint: var(--light0);
  --text-muted: var(--light1);

  --text-highlight-bg: var(--frost1);
  --text-highlight-fg: var(--dark0);
  --text-accent: var(--frost0);
  --text-accent-hover: var(--frost1);
  --bold-color: var(--frost3);
  --italic-color: var(--frost0);

  --cursor-line-background: rgba(var(--frost0_x), 0.2);
  --text-selection: rgba(var(--frost3_x), 0.6);
  --flashing-background: rgba(var(--frost3_x), 0.3);

  --titlebar-text-color-focused: var(--frost0);
  --inline-title-color: var(--frost0);

  --tab-text-color-focused-active: var(--frost3);
  --tab-text-color-focused-active-current: var(--frost1);

  --link-url: var(--green);
  --link-color: var(--purple);
  --link-unresolved-color: var(--purple);
  --link-external-color: var(--purple);

  --h1-color: var(--frost1);
  --h2-color: var(--frost2);
  --h3-color: var(--orange);
  --h4-color: var(--yellow);
  --h5-color: var(--red);
  --h6-color: var(--green);

  --tag-color: var(--frost2);
  --tag-background: var(--dark1);
  --tag-background-hover: var(--dark0);

  --code-normal: var(--light0);
  --code-background: var(--dark1);

  --table-header-background: hsl(220, 16%, 16%);
  --table-header-background-hover: var(--dark3);
  --table-row-even-background: hsl(220, 16%, 20%);
  --table-row-odd-background: hsl(220, 16%, 24%);
  --table-row-background-hover: var(--dark3);

  --mermaid-note: var(--frost3);
  --mermaid-loopline: var(--frost1);
  --mermaid-exclude: var(--dark3);
  --mermaid-seqnum: var(--dark0);

  --icon-color-hover: var(--frost3);
  --icon-color-focused: var(--frost1);

  --nav-item-color-hover: var(--frost3);
  --nav-item-color-active: var(--frost1);
  --nav-file-tag: rgba(var(--yellow_x), 0.9);

  --graph-line: var(--dark3);
  --graph-node: var(--light3);
  --graph-node-unresolved: var(--dark1);
  --graph-node-tag: var(--frost1);
  --graph-node-attachment: var(--purple);

  --calendar-hover: var(--red);
  --calendar-background-hover: var(--dark3);
  --calendar-week: var(--yellow);
  --calendar-today: var(--yellow);

  --dataview-key: var(--text-faint);
  --dataview-key-background: rgba(var(--frost2_x), 0.3);
  --dataview-value: var(--text-faint);
  --dataview-value-background: rgba(var(--red_x), 0.3);

  --search-clear-button-color: var(--red);
}

table {
  border: 1px solid var(--background-secondary) !important;
  border-collapse: collapse;
}
thead {
  border-bottom: 2px solid var(--background-modifier-border) !important;
}
th {
  font-weight: 600 !important;
  border: 1px solid var(--background-secondary) !important;
}
td {
  border-left: 1px solid var(--background-secondary) !important;
  border-right: 1px solid var(--background-secondary) !important;
  border-bottom: 1px solid var(--background-secondary) !important;
}

.markdown-rendered tbody tr:nth-child(even) {
  background-color: var(--table-row-even-background) !important;
}
.markdown-rendered tbody tr:nth-child(odd) {
  background-color: var(--table-row-odd-background) !important;
}
.markdown-rendered tbody tr:nth-child(even):hover,
.markdown-rendered tbody tr:nth-child(odd):hover {
  background-color: var(--table-row-background-hover) !important;
}
.markdown-rendered mark {
  background-color: var(--text-highlight-bg);
  color: var(--text-highlight-fg);
}
.markdown-rendered mark a {
  color: var(--red) !important;
  font-weight: 600;
}

.search-result-file-matched-text {
  color: var(--text-highlight-fg) !important;
}

.cm-hashtag-begin:hover,
.cm-hashtag-end:hover {
  color: var(--text-accent);
  /* background-color: var(--tag-background-hover); */
  text-decoration: underline;
}

.cm-url {
  color: var(--link-url) !important;
}
.cm-url:hover {
  color: var(--text-accent-hover) !important;
}
/* Keep highlight/marks the same between viewer and editor. */
.cm-highlight {
  color: var(--text-highlight-fg) !important;
}
/* Keep inline code the same between viewer and editor. */
.cm-inline-code {
  border-radius: var(--radius-s);
  font-size: var(--code-size);
  padding: 0.1em 0.25em;
}
.cm-formatting-code + .cm-inline-code {
  border-radius: 0;
  padding: 0.1em 0;
}
.cm-formatting-code {
  border-radius: var(--radius-s) 0 0 var(--radius-s);
  padding: 0.1em 0 0.1em 0.25em;
}
.cm-inline-code + .cm-formatting-code {
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  padding: 0.1em 0.25em 0.1em 0;
}
.cm-line .cm-strong {
  color: var(--bold-color) !important;
}

*/ .mermaid .note {
  fill: var(--mermaid-note) !important;
}
.mermaid .loopLine {
  stroke: var(--mermaid-loopline) !important;
}
.mermaid .loopText > tspan,
.mermaid .entityLabel {
  fill: var(--red) !important;
}
.mermaid .exclude-range {
  fill: var(--mermaid-exclude) !important;
}

.mermaid .sequenceNumber {
  fill: var(--mermaid-seqnum) !important;
}

.calendar .week-num {
  color: var(--calendar-week) !important;
}
.calendar .today {
  color: var(--calendar-today) !important;
}
.calendar .week-num:hover,
.calendar .day:hover {
  color: var(--calendar-hover) !important;
  background-color: var(--calendar-background-hover) !important;
}

.markdown-embed-title {
  color: var(--yellow);
  font-weight: 600 !important;
}

.cm-active {
  background-color: var(--cursor-line-background) !important;
}

.nav-file-tag {
  color: var(--nav-file-tag) !important;
}

.is-flashing {
  background-color: var(--flashing-background) !important;
}

.dataview.inline-field-key {
  border-top-left-radius: var(--radius-s);
  border-bottom-left-radius: var(--radius-s);
  padding-left: 4px;
  font-family: var(--font-monospace);
  font-size: var(--font-smaller);
  color: var(--dataview-key) !important;
  background-color: var(--dataview-key-background) !important;
}

.dataview.inline-field-value {
  border-top-right-radius: var(--radius-s);
  border-bottom-right-radius: var(--radius-s);
  padding-right: 4px;
  font-family: var(--font-monospace);
  font-size: var(--font-smaller);
  color: var(--dataview-value) !important;
  background-color: var(--dataview-value-background) !important;
}

.suggestion-highlight {
  color: var(--red);
}

/* Empty (unchecked) checkboxes */
.HyperMD-list-line input[type="checkbox"]:not(:checked),
.markdown-preview-view input[type="checkbox"]:not(:checked) {
  border: 1px solid var(--light0);
}

/* Base: remove default checkmark and borders */
input[type="checkbox"]:checked::after {
  display: none !important;
  border: 0px solid var(--light0);
}

/* Default checkbox styling */
.HyperMD-list-line input[type="checkbox"],
.markdown-preview-view input[type="checkbox"] {
  -webkit-appearance: none;
  position: center;
  width: 1.3em;
  height: 1.3em;
  margin-right: 10px;
  border: 0px;
  border-radius: 5px;
  transition: background-color 200ms ease-out;
  cursor: pointer;
}

/* Checked base pseudo-element (used for mask icons) */
.HyperMD-list-line input[type="checkbox"]:checked::before,
.markdown-preview-view input[type="checkbox"]:checked::before {
  content: "";
  position: absolute;
  inset: 2px;
  height: 1em;
  width: 1em;
  background-color: var(--light3);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* Preview hover effect */

.HyperMD-list-line input[type="checkbox"]:checked:hover,
.markdown-preview-view input[type="checkbox"]:checked:hover {
  background-color: var(--dark3) !important;
}

/* ----- Task Types ----- */

/* DONE | [x] */
.HyperMD-list-line input[data-task="x"]:checked::before,
.markdown-preview-view
  li[data-task="x"]
  > input[type="checkbox"]:checked::before {
  top: 50%;
  left: 50%;
  transform: translate(-45%, -50%);
  width: 1em;
  height: 1em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpolygon points='5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039'/%3E%3C/svg%3E");
}
.HyperMD-task-line[data-task="x"] span,
.markdown-preview-view ul > li[data-task="x"] {
  color: var(--frost3);
  text-decoration: var(--checklist-done-decoration);
}

/* DEFERRED | [>] */
.HyperMD-list-line input[data-task=">"]:checked,
.markdown-preview-view li[data-task=">"] > input[type="checkbox"]:checked {
  background-color: var(--frost2);
}
.HyperMD-list-line input[data-task=">"]:checked::before,
.markdown-preview-view
  li[data-task=">"]
  > input[type="checkbox"]:checked::before {
  top: 50%;
  left: 55%;
  transform: translate(-45%, -50%);
  width: 1em;
  height: 1em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.12 7L3.26667 11.76L4.57333 13.0667L10.7333 7L4.57333 0.933332L3.26667 2.24L8.12 7Z'/%3E%3C/svg%3E");
}
.HyperMD-task-line[data-task=">"],
.markdown-preview-view ul > li[data-task=">"] {
  color: var(--checklist-done-color);
}

/* CANCELLED | [-] */
.HyperMD-list-line input[data-task="-"]:checked,
.markdown-preview-view li[data-task="-"] > input[type="checkbox"]:checked {
  background-color: var(--red);
}
.HyperMD-list-line input[data-task="-"]:checked::before,
.markdown-preview-view
  li[data-task="-"]
  > input[type="checkbox"]:checked::before {
  top: 50%;
  left: 79%;
  transform: translate(-49%, -48%);
  width: 1.8em;
  height: 1.8em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 2048'%3E%3Cpath fill='currentColor' d='M600 360q163 0 301 80.5t218.5 218.5t80.5 301.5t-80.5 301.5t-218.5 218t-301 80t-301 -80t-218.5 -218t-80.5 -301.5t80.5 -301.5t218.5 -218.5t301 -80.5zM600 478q-175 0 -296 104l673 674q104 -144 104 -296q0 -129 -64.5 -240.5t-176 -176.5t-240.5 -65zM896 1337l-673 -673q-104 121 -104 296q0 129 64.5 240.5t176 176.5t240.5 65q175 -1 296 -105z'/%3E%3C/svg%3E");
}
.HyperMD-task-line[data-task="-"],
.markdown-preview-view ul > li[data-task="-"] {
  color: var(--red);
  text-decoration: var(--checklist-done-decoration);
}

/* QUESTION | [?] */
.HyperMD-list-line input[data-task="?"]:checked,
.markdown-preview-view li[data-task="?"] > input[type="checkbox"]:checked {
  background-color: var(--purple);
}
.HyperMD-list-line input[data-task="?"]:checked::before,
.markdown-preview-view
  li[data-task="?"]
  > input[type="checkbox"]:checked::before {
  top: 51%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.7em;
  height: 1.7em;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 0 1200 1950"><path fill="currentColor" d="M0 960q0 -122 48 -233t128 -191t191 -128t233 -48t232 48q111 48 192 128q80 80 128 191t47 233q0 122 -47 233q-48 111 -128 191t-192 128q-111 48 -232 48q-122 0 -233 -48t-191 -128t-128 -191t-48 -233zM600 473q-99 0 -189 38q-90 39 -156 104q-65 65 -104 156q-39 90 -38 189q0 99 38 190q39 90 104 155t156 104q90 39 189 39t189 -39t155 -104t104 -155t39 -190q0 -99 -39 -189t-104 -156q-65 -65 -155 -104q-90 -38 -189 -38zM519 817q-15 31 -50 31q-23 0 -40 -17t-17 -40q0 -13 6 -25q23 -46 64 -73q49 -33 118 -33h1q68 0 122 40q65 49 64 129q0 49 -24 86q-18 27 -53 50q-5 3 -13 9q-9 6 -10 6h-1q-7 4 -19 12q-13 8 -21 18q-17 25 -46 25q-23 0 -40 -17t-16 -40q0 -17 9 -30q20 -29 52 -50q4 -2 11 -7t12 -7l1 -1q17 -10 19 -12q12 -7 21 -18q6 -9 6 -24v-2q0 -24 -20 -37q-25 -17 -54 -17h-1q-35 0 -56 13q-17 13 -25 31zM675 1185q0 31 -22 53t-53 22t-53 -22t-22 -53t22 -53t53 -22t53 22t22 53z"/></svg>');
}

/* IMPORTANT | [!] */
.HyperMD-list-line input[data-task="!"]:checked,
.markdown-preview-view li[data-task="!"] > input[type="checkbox"]:checked {
  background-color: var(--orange);
}
.HyperMD-list-line input[data-task="!"]:checked::before,
.markdown-preview-view
  li[data-task="!"]
  > input[type="checkbox"]:checked::before {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.5em;
  height: 1.5em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1220 1950'%3E%3Cpath fill='black' d='M599 435q25 0 46 13q22 13 35 34l506 862q27 46 0 94q-13 22 -35 35t-46 12h-1011q-25 0 -47 -12q-22 -13 -34 -35q-13 -22 -13 -47t13 -47l506 -862q13 -21 34 -34t46 -13zM599 735q-23 0 -39 17t-17 40v262q0 23 17 40q16 16 39 16t40 -16q16 -16 16 -40v-262q0 -23 -16 -40q-17 -17 -40 -17zM674 1260q0 -31 -22 -53t-53 -22t-52 22q-22 22 -22 53t22 53t52 22q31 0 53 -22t22 -53z'/%3E%3C/svg%3E");
}
.HyperMD-list-line[data-task="!"] span,
.markdown-preview-view ul > li[data-task="!"] {
  color: var(--orange);
  text-decoration: underline;
}

/* In Progress | [/] */
.HyperMD-list-line input[data-task="/"]:checked,
.markdown-preview-view li[data-task="/"] > input[type="checkbox"]:checked {
  background-color: var(--frost2);
}
.HyperMD-list-line input[data-task="/"]:checked::before,
.markdown-preview-view
  li[data-task="/"]
  > input[type="checkbox"]:checked::before {
  top: 50%;
  left: 50%;
  transform: translate(-49%, -50%);
  width: 1.55em;
  height: 1.55em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1220 1850'%3E%3Cpath fill='currentColor' d='M658 359v2v119q130 17 232.5 94.5t152.5 196.5t35 248q-22 164 -139.5 281t-280.5 137v121q164 -17 293.5 -111.5t195.5 -239.5t49 -306q-11 -141 -85.5 -260t-193 -193.5t-259.5 -88.5zM539 361q-184 17 -321 133l84 87q104 -82 237 -98v-122zM133 579q-116 139 -133 322h119q20 -133 99 -237zM0 1019q17 181 133 322l85 -84q-82 -107 -97 -238h-121zM302 1344l-84 82q141 116 321 135v-118q-130 -17 -237 -99zM630 658v316l271 161l-45 76l-317 -192v-361h91z'/%3E%3C/svg%3E");
}


/* @settings
name: 12 Domains Callouts
id: domains-12
settings:
  - id: global-width
    title: Global Callout Width (%)
    description: Shrink or inflate the overall width of the callouts (100 = full width).
    type: variable-number-slider
    default: 50
    min: 20
    max: 100
  - id: global-padding
    title: Global Callout Padding (px)
    description: Adjust the internal spacing/padding inside the callouts.
    type: variable-number-slider
    default: 4
    min: 0
    max: 50
  - id: global-saturation
    title: Global Callout Saturation (%)
    description: Adjusts color intensity for all 12 domain callouts.
    type: variable-number-slider
    default: 100
    min: 0
    max: 200
  - id: global-brightness
    title: Global Callout Brightness (%)
    description: Adjusts lightness/darkness for all 12 domain callouts.
    type: variable-number-slider
    default: 100
    min: 50
    max: 150
  - id: heading-physics
    title: 1. Physics (Cyan)
    type: heading
    level: 2
  - id: physics-icon
    title: Icon
    type: variable-text
    default: lucide-orbit
  - id: physics-color
    title: Color
    type: variable-color
    format: rgb-split
    default: '#99FFFF'
  - id: heading-chem
    title: 2. Chem/EarthSci (Mint/Pine)
    type: heading
    level: 2
  - id: chem-icon
    title: Icon
    type: variable-text
    default: lucide-hexagon
  - id: chem-color
    title: Color
    type: variable-color
    format: rgb-split
    default: '#99FFCC'
  - id: heading-biology
    title: 3. Biology/LifeSci (Green)
    type: heading
    level: 2
  - id: biology-icon
    title: Icon
    type: variable-text
    default: lucide-dna
  - id: biology-color
    title: Color
    type: variable-color
    format: rgb-split
    default: '#99FF99'
  - id: heading-medicine
    title: 4. Medicine (Sprout)
    type: heading
    level: 2
  - id: medicine-icon
    title: Icon
    type: variable-text
    default: lucide-activity
  - id: medicine-color
    title: Color
    type: variable-color
    format: rgb-split
    default: '#CCFF99'
  - id: heading-psych
    title: 5. Psych/CogniSci (Yellow)
    type: heading
    level: 2
  - id: psych-icon
    title: Icon
    type: variable-text
    default: lucide-brain-circuit
  - id: psych-color
    title: Color
    type: variable-color
    format: rgb-split
    default: '#FFFF99'
  - id: heading-sociology
    title: 6. Sociology/Culture (Orange)
    type: heading
    level: 2
  - id: sociology-icon
    title: Icon
    type: variable-text
    default: lucide-network
  - id: sociology-color
    title: Color
    type: variable-color
    format: rgb-split
    default: '#FFCC99'
  - id: heading-history
    title: 7. History (Red)
    type: heading
    level: 2
  - id: history-icon
    title: Icon
    type: variable-text
    default: lucide-hourglass
  - id: history-color
    title: Color
    type: variable-color
    format: rgb-split
    default: '#FF9999'
  - id: heading-law
    title: 8. Econ/Rlg/Pol/Law (Pink)
    type: heading
    level: 2
  - id: law-icon
    title: Icon
    type: variable-text
    default: lucide-scale
  - id: law-color
    title: Color
    type: variable-color
    format: rgb-split
    default: '#FF99CC'
  - id: heading-tech
    title: 9. Tech/Engineering (Magenta)
    type: heading
    level: 2
  - id: tech-icon
    title: Icon
    type: variable-text
    default: lucide-cpu
  - id: tech-color
    title: Color
    type: variable-color
    format: rgb-split
    default: '#FF99FF'
  - id: heading-art
    title: 10. Art/Humanities (Purple)
    type: heading
    level: 2
  - id: art-icon
    title: Icon
    type: variable-text
    default: lucide-sparkles
  - id: art-color
    title: Color
    type: variable-color
    format: rgb-split
    default: '#CC99FF'
  - id: heading-philosophy
    title: 11. Philosophy/Logic (Deep Blue)
    type: heading
    level: 2
  - id: philosophy-icon
    title: Icon
    type: variable-text
    default: lucide-compass
  - id: philosophy-color
    title: Color
    type: variable-color
    format: rgb-split
    default: '#9999FF'
  - id: heading-math
    title: 12. Math (Aqua/Azure)
    type: heading
    level: 2
  - id: math-icon
    title: Icon
    type: variable-text
    default: lucide-sigma
  - id: math-color
    title: Color
    type: variable-color
    format: rgb-split
    default: '#99CCFF'
  - id: heading-void
    title: N/A. Outside / Void
    type: heading
    level: 2
  - id: void-icon
    title: Icon
    type: variable-text
    default: lucide-ghost
  - id: void-color
    title: Color
    type: variable-color
    format: rgb-split
    default: '#CCCCCC'
  - id: global-background-opacity
    title: Background Opacity (%)
    description: Controls the opacity of the domain color gradients.
    type: variable-number-slider
    default: 40
    min: 0
    max: 100

  - id: global-rainbow-opacity
    title: Rainbow Overlay Opacity (%)
    description: Controls how visible the rainbow overlay is.
    type: variable-number-slider
    default: 15
    min: 0
    max: 100
*/

/* --------------------------------------------------------- */
/* Global Structure, High Opacity Gradients, Glow & Rainbow  */
/* --------------------------------------------------------- */
.callout[data-callout="physics"],
.callout[data-callout="chem"],
.callout[data-callout="biology"],
.callout[data-callout="medicine"],
.callout[data-callout="psych"],
.callout[data-callout="sociology"],
.callout[data-callout="history"],
.callout[data-callout="law"],
.callout[data-callout="tech"],
.callout[data-callout="art"],
.callout[data-callout="philosophy"],
.callout[data-callout="math"],
.callout[data-callout="void"] {

    filter: saturate(calc(var(--domains-12-global-saturation, 100) * 1%))
            brightness(calc(var(--domains-12-global-brightness, 100) * 1%));

    --domain-opacity: calc(var(--domains-12-global-background-opacity, 40) / 100);
    --domain-opacity-light: calc(var(--domain-opacity) * 0.54);
    --rainbow-opacity: calc(var(--domains-12-global-rainbow-opacity, 15) / 100);

    margin-bottom: 1rem;
    background-color: transparent !important;
    /* Layer 1: High opacity domain color gradient. Layer 2: Subtle horizontal pastel rainbow */

  background-image:
    linear-gradient(
        135deg,
        rgba(var(--callout-color), var(--domain-opacity)) 0%,
        rgba(var(--callout-color), var(--domain-opacity-light)) 100%
    ),
    linear-gradient(
        to right,
        rgba(255,153,153,var(--rainbow-opacity)),
        rgba(255,204,153,var(--rainbow-opacity)),
        rgba(255,255,153,var(--rainbow-opacity)),
        rgba(153,255,153,var(--rainbow-opacity)),
        rgba(153,255,255,var(--rainbow-opacity)),
        rgba(153,153,255,var(--rainbow-opacity)),
        rgba(204,153,255,var(--rainbow-opacity)),
        rgba(255,153,204,var(--rainbow-opacity))
    );

    box-shadow: 0 0 15px rgba(var(--callout-color), 0.5);
    color: var(--text-normal);
}

/* Title centered, justified, def.color, text shadow, AND STRIPPED PADDING */
  .callout[data-callout="physics"] .callout-title,
  .callout[data-callout="chem"] .callout-title,
  .callout[data-callout="biology"] .callout-title,
  .callout[data-callout="medicine"] .callout-title,
  .callout[data-callout="psych"] .callout-title,
  .callout[data-callout="sociology"] .callout-title,
  .callout[data-callout="history"] .callout-title,
  .callout[data-callout="law"] .callout-title,
  .callout[data-callout="tech"] .callout-title,
  .callout[data-callout="art"] .callout-title,
  .callout[data-callout="philosophy"] .callout-title,
  .callout[data-callout="math"] .callout-title,
  .callout[data-callout="void"] .callout-title 
  {
    justify-content: center;
    text-align: center;
    color: var(--text-normal);
    text-shadow: 0px 1px 2px rgba(0,0,0,0.1);
    
    /* Strips the default Obsidian fatness */
    padding: 0 !important; 
    margin: 0 !important;
    line-height: normal;
  }

/* Center Flexbox Inner Container */
.callout[data-callout="physics"] .callout-title-inner,
.callout[data-callout="chem"] .callout-title-inner,
.callout[data-callout="biology"] .callout-title-inner,
.callout[data-callout="medicine"] .callout-title-inner,
.callout[data-callout="psych"] .callout-title-inner,
.callout[data-callout="sociology"] .callout-title-inner,
.callout[data-callout="history"] .callout-title-inner,
.callout[data-callout="law"] .callout-title-inner,
.callout[data-callout="tech"] .callout-title-inner,
.callout[data-callout="art"] .callout-title-inner,
.callout[data-callout="philosophy"] .callout-title-inner,
.callout[data-callout="math"] .callout-title-inner,
.callout[data-callout="void"] .callout-title-inner {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* --------------------------------------------------------- */
/* Global Structure: Rainbow Gradient */
/* --------------------------------------------------------- */
.callout[data-callout="physics"],
.callout[data-callout="math"],
.callout[data-callout="art"],
.callout[data-callout="chem"],
.callout[data-callout="biology"],
.callout[data-callout="psych"],
.callout[data-callout="sociology"],
.callout[data-callout="law"],
.callout[data-callout="tech"],
.callout[data-callout="philosophy"],
.callout[data-callout="history"],
.callout[data-callout="medicine"],
.callout[data-callout="void"] 
{
    filter: saturate(calc(var(--domains-12-global-saturation, 100) * 1%))
            brightness(calc(var(--domains-12-global-brightness, 100) * 1%));

    --domain-opacity: calc(var(--domains-12-global-background-opacity, 40) / 100);
    --rainbow-opacity: calc(var(--domains-12-global-rainbow-opacity, 15) / 100);

    /* --- ADJUSTABLE SIZING & PADDING VIA STYLE SETTINGS --- */
    margin-bottom: 0rem;
    width: calc(var(--domains-12-global-width, 50) * 1%);
    margin-left: auto; /* Centers the reduced width */
    margin-right: auto;
    
    /* Aggressively shrunk default padding */
    padding: calc(var(--domains-12-global-padding, 4) * 1px) !important;
    
    background-color: transparent !important;

    /* Rainbow is the FIRST layer (bottom), Domain color is the SECOND layer (top) */
    background-image:
    linear-gradient(
        to right,
        rgba(255,153,153,var(--rainbow-opacity)),
        rgba(255,204,153,var(--rainbow-opacity)),
        rgba(255,255,153,var(--rainbow-opacity)),
        rgba(153,255,153,var(--rainbow-opacity)),
        rgba(153,255,255,var(--rainbow-opacity)),
        rgba(153,153,255,var(--rainbow-opacity)),
        rgba(204,153,255,var(--rainbow-opacity)),
        rgba(255,153,204,var(--rainbow-opacity))
    ),
    linear-gradient(
        135deg,
        rgba(var(--callout-color), var(--domain-opacity)) 0%,
        rgba(var(--callout-color), calc(var(--domain-opacity) * 0.5)) 100%
    );

    box-shadow: 0 0 15px rgba(var(--callout-color), 0.3);
    color: var(--text-normal);
}

/* --------------------------------------------------------- */
/* Individual Domains: Core Vars (Pastels), Borders & Glows  */
/* --------------------------------------------------------- */

/* 1. Physics - Pastel Cyan (180°) */
.callout[data-callout="physics"] 
  {
    --callout-color: var(--domains-12-physics-color, 153, 255, 255);
    --callout-icon: var(--domains-12-physics-icon, lucide-orbit);
    border: 1px solid rgba(var(--callout-color), 0.8);
    box-shadow: 0 0 15px rgba(var(--callout-color), 0.5), 
    inset 0 0 8px rgba(var(--callout-color), 0.3);
    border-radius: 12px;
  }

/* 2. Chem/EarthSci - Pastel Mint/Pine (150°) */
.callout[data-callout="chem"] {
    --callout-color: var(--domains-12-chem-color, 153, 255, 204);
    --callout-icon: var(--domains-12-chem-icon, lucide-hexagon);
    border: 0px dashed rgba(var(--callout-color), 0.8);
    border-radius: 6px;
}

/* 3. Biology/LifeSci - Pastel Green (120°) */
.callout[data-callout="biology"] {
    --callout-color: var(--domains-12-biology-color, 153, 255, 153);
    --callout-icon: var(--domains-12-biology-icon, lucide-dna);
    border: 0px solid rgba(var(--callout-color), 0.7);
    border-radius: 18px 2px 18px 2px;
}

/* 4. Medicine - Pastel Sprout/Chartreuse (90°) */
.callout[data-callout="medicine"] {
    --callout-color: var(--domains-12-medicine-color, 204, 255, 153);
    --callout-icon: var(--domains-12-medicine-icon, lucide-activity);
    border: 2px double rgba(var(--callout-color), 0.8);
    border-radius: 0px;
}

/* 5. Psych/CogniSci - Pastel Yellow (60°) */
.callout[data-callout="psych"] {
    --callout-color: var(--domains-12-psych-color, 255, 255, 153);
    --callout-icon: var(--domains-12-psych-icon, lucide-brain-circuit);
    border: 0px dotted rgba(var(--callout-color), 0.9);
    border-radius: 20px;
}

/* 6. Sociology/Culture - Pastel Orange (30°) */
.callout[data-callout="sociology"] {
    --callout-color: var(--domains-12-sociology-color, 255, 204, 153);
    --callout-icon: var(--domains-12-sociology-icon, lucide-network);
    border-top: 1px solid rgba(var(--callout-color), 0.4);
    border-bottom: 1px solid rgba(var(--callout-color), 0.4);
    border-left: 0px solid rgba(var(--callout-color), 1);
    border-right: 0px solid rgba(var(--callout-color), 1);
    border-radius: 0px;
}

/* 7. History - Pastel Red (0°) */
.callout[data-callout="history"] {
    --callout-color: var(--domains-12-history-color, 255, 153, 153);
    --callout-icon: var(--domains-12-history-icon, lucide-hourglass);
    border: 0px groove rgba(var(--callout-color), 0.9);
    border-radius: 0;
}

/* 8. Law - Pastel Pink (330°) */
.callout[data-callout="law"] {
    --callout-color: var(--domains-12-law-color, 255, 153, 204);
    --callout-icon: var(--domains-12-law-icon, lucide-scale);
    border: 3px ridge rgba(var(--callout-color), 0.9);
    border-radius: 4px;
}

/* 9. Tech/Engineering - Pastel Magenta (300°) */
.callout[data-callout="tech"] {
    --callout-color: var(--domains-12-tech-color, 255, 153, 255);
    --callout-icon: var(--domains-12-tech-icon, lucide-cpu);
    border: 1px solid rgba(var(--callout-color), 1);
    border-radius: 0;
    box-shadow: 4px 4px 0px rgba(var(--callout-color), 0.6), 0 0 15px rgba(var(--callout-color), 0.5);
}

/* 10. Art/Humanities - Pastel Purple (270°) */
.callout[data-callout="art"] {
    --callout-color: var(--domains-12-art-color, 204, 153, 255);
    --callout-icon: var(--domains-12-art-icon, lucide-sparkles);
    border: 2px solid rgba(var(--callout-color), 0.8);
    border-radius: 24px 6px 24px 6px;
}

/* 11. Philosophy/Logic - Pastel Deep Blue (240°) */
.callout[data-callout="philosophy"] {
    --callout-color: var(--domains-12-philosophy-color, 153, 153, 255);
    --callout-icon: var(--domains-12-philosophy-icon, lucide-compass);
    border-top: 1px solid rgba(var(--callout-color), 0.5);
    border-bottom: 1px solid rgba(var(--callout-color), 0.5);
    border-radius: 0;
}

/* 12. Math - Pastel Aqua/Azure (210°) & Layered Graph Paper */
.callout[data-callout="math"] {
    --callout-color: var(--domains-12-math-color, 153, 204, 255);
    --callout-icon: var(--domains-12-math-icon, lucide-sigma);
    border: 1px solid rgba(var(--callout-color), 0.8);
    border-radius: 4px;
    background-image: 
        linear-gradient(rgba(var(--callout-color), 0.25) 1px, transparent 1px), 
        linear-gradient(90deg, rgba(var(--callout-color), 0.25) 1px, transparent 1px),
        linear-gradient(135deg, rgba(var(--callout-color), 0.65) 0%, rgba(var(--callout-color), 0.35) 100%),
        linear-gradient(to right, rgba(255,153,153,var(--rainbow-opacity)), rgba(255,204,153,var(--rainbow-opacity)), rgba(255,255,153,var(--rainbow-opacity)), rgba(153,255,153,var(--rainbow-opacity)), rgba(153,255,255,var(--rainbow-opacity)), rgba(153,153,255,var(--rainbow-opacity)), rgba(204,153,255,var(--rainbow-opacity)), rgba(255,153,204,var(--rainbow-opacity)));
    background-size: 15px 15px, 15px 15px, auto, auto;
}

/* N/A. Outside/Void - Pastel Grey (Inner + Outer Glow) */
.callout[data-callout="void"] {
    --callout-color: var(--domains-12-void-color, 204, 204, 204);
    --callout-icon: var(--domains-12-void-icon, lucide-ghost);
    border: 1px solid rgba(var(--callout-color), 0.5);
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(var(--callout-color), 0.3), inset 0 0 20px rgba(0, 0, 0, 0.2);
}

/* --------------------------------------------------------- */
/* Permanent Hardcoded Overrides: Hide Symbols, Icons & Folds  */
/* --------------------------------------------------------- */
.callout[data-callout="physics"] .callout-title-inner::before, .callout[data-callout="physics"] .callout-title-inner::after,
.callout[data-callout="chem"] .callout-title-inner::before, .callout[data-callout="chem"] .callout-title-inner::after,
.callout[data-callout="biology"] .callout-title-inner::before, .callout[data-callout="biology"] .callout-title-inner::after,
.callout[data-callout="medicine"] .callout-title-inner::before, .callout[data-callout="medicine"] .callout-title-inner::after,
.callout[data-callout="psych"] .callout-title-inner::before, .callout[data-callout="psych"] .callout-title-inner::after,
.callout[data-callout="sociology"] .callout-title-inner::before, .callout[data-callout="sociology"] .callout-title-inner::after,
.callout[data-callout="history"] .callout-title-inner::before, .callout[data-callout="history"] .callout-title-inner::after,
.callout[data-callout="law"] .callout-title-inner::before, .callout[data-callout="law"] .callout-title-inner::after,
.callout[data-callout="tech"] .callout-title-inner::before, .callout[data-callout="tech"] .callout-title-inner::after,
.callout[data-callout="art"] .callout-title-inner::before, .callout[data-callout="art"] .callout-title-inner::after,
.callout[data-callout="philosophy"] .callout-title-inner::before, .callout[data-callout="philosophy"] .callout-title-inner::after,
.callout[data-callout="math"] .callout-title-inner::before, .callout[data-callout="math"] .callout-title-inner::after,
.callout[data-callout="void"] .callout-title-inner::before, .callout[data-callout="void"] .callout-title-inner::after,
.callout[data-callout="physics"] .callout-icon,
.callout[data-callout="chem"] .callout-icon,
.callout[data-callout="biology"] .callout-icon,
.callout[data-callout="medicine"] .callout-icon,
.callout[data-callout="psych"] .callout-icon,
.callout[data-callout="sociology"] .callout-icon,
.callout[data-callout="history"] .callout-icon,
.callout[data-callout="law"] .callout-icon,
.callout[data-callout="tech"] .callout-icon,
.callout[data-callout="art"] .callout-icon,
.callout[data-callout="philosophy"] .callout-icon,
.callout[data-callout="math"] .callout-icon,
.callout[data-callout="void"] .callout-icon,
.callout[data-callout="physics"] .callout-fold,
.callout[data-callout="chem"] .callout-fold,
.callout[data-callout="biology"] .callout-fold,
.callout[data-callout="medicine"] .callout-fold,
.callout[data-callout="psych"] .callout-fold,
.callout[data-callout="sociology"] .callout-fold,
.callout[data-callout="history"] .callout-fold,
.callout[data-callout="law"] .callout-fold,
.callout[data-callout="tech"] .callout-fold,
.callout[data-callout="art"] .callout-fold,
.callout[data-callout="philosophy"] .callout-fold,
.callout[data-callout="math"] .callout-fold,
.callout[data-callout="void"] .callout-fold {
    display: none !important;
    content: none !important;
}

/* Apply this class to any <pre> block in your markdown */
.ascii-art-container {
  /* Forces the art to stay exactly as typed */
  white-space: pre;
  font-family: 'Courier New', 'Monaco', 'Consolas', monospace;
  
  /* The magic scaling logic */
  /* This scales the art between 50% and 100% of the screen width */
  width: 100%;
  overflow-x: auto;
  
  /* This shrinks the font size dynamically based on screen width (vw = viewport width) */
  font-size: clamp(0.5rem, 2vw, 1rem);
  
  /* Ensures line spacing remains rigid for ASCII alignment */
  line-height: 1.2;
  
  /* Visual styling */
  background: var(--background-primary);
  padding: 10px;
  border-radius: 5px;
}

.ascii-fit-container {
  /* Center the container horizontally */
  margin: 0 auto;
  
  /* Ensure the art itself doesn't wrap */
  white-space: pre;
  
  /* Use a container that respects the parent width */
  width: 100%;
  
  /* The scaling magic */
  /* We use a CSS variable to calculate the scale based on width */
  transform-origin: left center;
  
  /* Adjust this width (800px) to match the original width of your ASCII art */
  --art-width: 800px; 
  
  /* Scales the container to fit the available space */
  transform: scale(min(1, calc(100% / var(--art-width))));
  
  /* Necessary to prevent the scaled element from pushing other content */
  display: block;
}

.ascii-auto-fit {
  /* This makes the container only as wide as the art inside it */
  display: table; 
  
  /* Centers the table-like container horizontally */
  margin: 0 auto;
  
  /* Prevents line wrapping */
  white-space: pre;
  
  /* Ensures it doesn't spill off the screen */
  max-width: 100%;
  
  /* This makes it zoom down if it's too wide */
  transform-origin: center;
  transform: scale(min(1, calc(100vw / var(--art-width, 800px))));
}/* ===================================================================== */
/* OBSIDIAN MASTER CALLOUTS & ASCII ENGINE                               */
/* ===================================================================== */

/* --- PART 1: CORE RESET ENGINE --- */
.callout[data-callout="quote"],
.callout[data-callout="ornate"],
.callout[data-callout="retro-3d"],
.callout[data-callout="void-gazer"],
.callout[data-callout="magi-tekk"],
.callout[data-callout="location"],
.callout[data-callout^="ascii-"] {
    --callout-color: var(--text-normal);
    --callout-icon: none;
    background: transparent;
    border: none;
}

/* --- PART 2: ASCII & LOCATION STRUCTURAL SKELETON --- */
.callout[data-callout="location"],
.callout[data-callout^="ascii-"] {
    font-family: "Unifont", monospace !important;
    position: relative;
    overflow: hidden;
    line-height: 1.2;
    padding: 1.5em 3ch; 
}

/* Base Positioning Hooks for ASCII Walls and Borders (Armored with white-space: pre) */
.callout[data-callout="location"]::before, .callout[data-callout^="ascii-"]::before { position: absolute; left: 0; white-space: pre !important; top: 1em; z-index: 1; }
.callout[data-callout="location"]::after, .callout[data-callout^="ascii-"]::after { position: absolute; right: 0; white-space: pre !important; top: 1em; z-index: 1; }
.callout[data-callout="location"] .callout-title::before, .callout[data-callout^="ascii-"] .callout-title::before { position: absolute; top: 0; left: 0; white-space: pre !important; overflow: hidden; right: 0; z-index: 1; }
.callout[data-callout="location"] .callout-title::after, .callout[data-callout^="ascii-"] .callout-title::after { position: absolute; top: 0; right: 0; white-space: pre !important; z-index: 1; }
.callout[data-callout="location"] .callout-content::before, .callout[data-callout^="ascii-"] .callout-content::before { position: absolute; bottom: 0; left: 0; white-space: pre !important; overflow: hidden; right: 0; z-index: 1; }
.callout[data-callout="location"] .callout-content::after, .callout[data-callout^="ascii-"] .callout-content::after { position: absolute; right: 0; bottom: 0; white-space: pre !important; z-index: 1; }

/* Keep clicky fold arrow visible above ASCII art */
.callout-fold { z-index: 5; position: relative; }


/* --- PART 3: THE BULLETPROOF COLLAPSE FIX --- */

/* 1. Keep the bottom of the ASCII frame open when collapsed */
.callout.is-collapsed[data-callout^="ascii-"] .callout-content, 
.callout.is-collapsed[data-callout="location"] .callout-content,
.callout.is-collapsed[data-callout="magi-tekk"] .callout-content { 
    display: block !important; 
    height: 0px !important; 
    margin: 0 !important; 
    padding: 0 !important; 
    visibility: hidden; 
    overflow: visible; 
}

/* 2. Ensure borders stay visible when text hides */
.callout.is-collapsed[data-callout^="ascii-"] .callout-content::before, 
.callout.is-collapsed[data-callout^="ascii-"] .callout-content::after,
.callout.is-collapsed[data-callout="location"] .callout-content::before, 
.callout.is-collapsed[data-callout="location"] .callout-content::after,
.callout.is-collapsed[data-callout="magi-tekk"] .callout-content::before, 
.callout.is-collapsed[data-callout="magi-tekk"] .callout-content::after { 
    visibility: visible !important; 
}


/* ===================================================================== */
/* STANDARD CUSTOM CALLOUTS & QUOTES                                     */
/* ===================================================================== */

/* --- Fixed Bracket Quotes --- */
.markdown-rendered blockquote, .callout[data-callout="quote"] {
    position: relative; padding: 0.75em 1.5em; border-left: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.markdown-rendered blockquote::before, .callout[data-callout="quote"]::before { content: "「"; position: absolute; top: 5px; left: 5px; font-size: 1.5em; line-height: 1; font-weight: bold; color: var(--text-muted); }
.markdown-rendered blockquote::after, .callout[data-callout="quote"]::after { content: "」"; position: absolute; bottom: 5px; right: 5px; font-size: 1.5em; line-height: 1; font-weight: bold; color: var(--text-muted); }

/* --- Ornate --- */
.callout[data-callout="ornate"] {
    --bracket-color: var(--text-accent); --bracket-thick: 3px; --bracket-length: 30px;
    background-color: var(--background-primary-alt); padding: 2em;
    background-image: 
        linear-gradient(var(--bracket-color), var(--bracket-color)), linear-gradient(var(--bracket-color), var(--bracket-color)),
        linear-gradient(var(--bracket-color), var(--bracket-color)), linear-gradient(var(--bracket-color), var(--bracket-color)),
        linear-gradient(var(--bracket-color), var(--bracket-color)), linear-gradient(var(--bracket-color), var(--bracket-color)),
        linear-gradient(var(--bracket-color), var(--bracket-color)), linear-gradient(var(--bracket-color), var(--bracket-color));
    background-repeat: no-repeat;
    background-size: 
        var(--bracket-length) var(--bracket-thick), var(--bracket-thick) var(--bracket-length),
        var(--bracket-length) var(--bracket-thick), var(--bracket-thick) var(--bracket-length),
        var(--bracket-length) var(--bracket-thick), var(--bracket-thick) var(--bracket-length),
        var(--bracket-length) var(--bracket-thick), var(--bracket-thick) var(--bracket-length);
    background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
}
.callout[data-callout="ornate"] .callout-title { background: transparent; }

/* --- Retro 3D --- */
.callout[data-callout="retro-3d"] { border: 1px solid var(--text-normal); padding: 20px 25px; margin: 15px 15px 25px 0; border-radius: 0; box-shadow: 12px 12px 0px 0px var(--text-normal); }
.callout[data-callout="retro-3d"]::before { content: "┌"; position: absolute; top: -9px; left: -4px; background: var(--background-primary); padding: 0 2px; font-size: 1.2em; line-height: 1; }
.callout[data-callout="retro-3d"]::after { content: "┘"; position: absolute; bottom: -9px; right: -4px; background: var(--background-primary); padding: 0 2px; font-size: 1.2em; line-height: 1; }
.callout[data-callout="retro-3d"] .callout-title { font-family: monospace; text-transform: uppercase; border-bottom: 1px dashed var(--text-muted); padding-bottom: 10px; margin-bottom: 10px; }

/* --- Void Gazer --- */
.callout[data-callout="void-gazer"] { border-left: 2px solid var(--text-normal); border-right: 2px solid var(--text-normal); border-bottom: 2px solid var(--text-normal); border-top: none; border-radius: 0; padding: 15px 20px; margin-top: 30px; font-family: monospace; }
.callout[data-callout="void-gazer"]::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--text-normal); }
.callout[data-callout="void-gazer"] .callout-title { position: absolute; top: -25px; left: -2px; background: var(--background-primary); padding: 0 10px 0 0; font-weight: normal; }
.callout[data-callout="void-gazer"] .callout-title-inner::before { content: "⟦ LOG_FILE: ⟨ "; }
.callout[data-callout="void-gazer"] .callout-title-inner::after { content: " ⟩ ⟧"; }

/* --- Magi-Tekk (Original) --- */
.callout[data-callout="magi-tekk"] { padding: 25px 40px; overflow: hidden; position: relative; }
.callout[data-callout="magi-tekk"]::before { content: "║\A║  ▞▞\A║\A║\A║\A║  ▞▞\A║"; white-space: pre; position: absolute; left: 0; top: 25px; bottom: 25px; line-height: 1.2; overflow: hidden; }
.callout[data-callout="magi-tekk"]::after { content: "║\A▞▞  ║\A║\A║\A║\A▞▞  ║\A║"; white-space: pre; position: absolute; right: 0; top: 25px; bottom: 25px; line-height: 1.2; text-align: right; overflow: hidden; }
.callout[data-callout="magi-tekk"] .callout-title { position: absolute; top: 0; left: 0; right: 0; justify-content: center; white-space: nowrap; }
.callout[data-callout="magi-tekk"] .callout-title-inner::before { content: "╔═════════════════════════════════════════════════════[ ✧ "; }
.callout[data-callout="magi-tekk"] .callout-title-inner::after { content: " ✧ ]═════════════════════════════════════════════════════╗"; }
.callout[data-callout="magi-tekk"] .callout-content::after { content: "╚══════════════════════════════════════════════════════════════════════════════════════════════════════════╝"; position: absolute; bottom: 0; left: 0; right: 0; white-space: nowrap; }

/* --- Location (RPG Node) --- */
.callout[data-callout="location"] { padding: 2.5em 4ch 2.5em 4ch; box-shadow: 10px 10px 0px rgba(128, 128, 128, 0.3) !important; margin-bottom: 25px; background-color: var(--background-primary) !important; background-image: repeating-linear-gradient(-45deg, rgba(128, 128, 128, 0.08), rgba(128, 128, 128, 0.08) 2px, transparent 2px, transparent 8px) !important; }
.callout[data-callout="location"]::before { content: "^\A▲\A𒃯\A^\A▲\A𐄢\A^\A⛨\A^\A▲\A𒃯\A^\A▲\A𐄢\A^\A⛒\A^\A▲\A𒃯\A^\A▲\A𐄢\A^\A❌\A^\A▲\A𒃯\A^\A▲\A𐄢\A^\A⛨\A^\A▲\A𒃯\A^\A▲\A𐄢\A^\A⛒\A^\A▲\A𒃯\A^\A▲\A𐄢\A^\A❌\A^\A▲"; color: var(--text-muted); opacity: 0.6; font-size: 0.9em; }
.callout[data-callout="location"]::after { content: "▲\A^\A𐄢\A^\A▲\A𒃯\A^\A⛒\A^\A▲\A𐄢\A^\A▲\A𒃯\A^\A❌\A^\A▲\A𐄢\A^\A▲\A𒃯\A^\A⛨\A^\A▲\A𐄢\A^\A▲\A𒃯\A^\A⛒\A^\A▲\A𐄢\A^\A▲\A𒃯\A^\A❌\A^\A▲\A𐄢\A^\A▲\A𒃯\A^\A⛨\A^\A▲\A^\A"; color: var(--text-muted); opacity: 0.6; font-size: 0.9em; }
.callout[data-callout="location"] .callout-title::before { content: "~~^~~𒃯~~^~~~𐄢~~~~~^~⛨~^~~𒃯~~^~~~𐄢~~~~~^~⛒~^~~𒃯~~^~~~𐄢~~~~~^~❌~^~~𒃯~~^~~~𐄢~~~~~^~⛨~^~~𒃯~~^~~~𐄢~~~~~^~⛒~^~~𒃯~~^~~~𐄢~~~~~^~❌~^~~𒃯~~^~~~𐄢~~~~~^~⛨~^~~𒃯~~^~~~𐄢~~~~~^~⛒~^~~𒃯~~^~~~𐄢~~~~~^~❌~^~~𒃯~~^~~~𐄢~~~~~^~⛨~^~~"; color: var(--text-accent); opacity: 0.5; letter-spacing: -0.05em; right: 3ch; }
.callout[data-callout="location"] .callout-content::before { content: "~~^~~𒃯~~^~~~𐄢~~~~~^~⛒~^~~𒃯~~^~~~𐄢~~~~~^~❌~^~~𒃯~~^~~~𐄢~~~~~^~⛨~^~~𒃯~~^~~~𐄢~~~~~^~⛒~^~~𒃯~~^~~~𐄢~~~~~^~❌~^~~𒃯~~^~~~𐄢~~~~~^~⛨~^~~𒃯~~^~~~𐄢~~~~~^~⛒~^~~𒃯~~^~~~𐄢~~~~~^~❌~^~~𒃯~~^~~~𐄢~~~~~^~⛨~^~~𒃯~~^~~~𐄢~~~~~^~⛒~^~~𒃯~~^~~~𐄢~~~~~^~❌~^~~𒃯~~^~~~𐄢~~~~~^~⛨~^~~𒃯~~^~~~𐄢~~~~~^~⛒~^~~"; color: var(--text-accent); opacity: 0.5; letter-spacing: -0.05em; right: 3ch; }
.callout[data-callout="location"] .callout-title::after { content: "✪"; color: var(--text-accent); right: 0.5ch; background: var(--background-primary); padding: 0 4px; background-image: repeating-linear-gradient(-45deg, rgba(128, 128, 128, 0.08), rgba(128, 128, 128, 0.08) 2px, transparent 2px, transparent 8px); }
.callout[data-callout="location"] .callout-content::after { content: "☠"; color: var(--text-accent); right: 0.5ch; background: var(--background-primary); padding: 0 4px; background-image: repeating-linear-gradient(-45deg, rgba(128, 128, 128, 0.08), rgba(128, 128, 128, 0.08) 2px, transparent 2px, transparent 8px); }
.callout[data-callout="location"] .callout-title-inner::before { content: "⯏ ⌊ QUEST_LOG: "; color: var(--text-normal); font-weight: bold; }
.callout[data-callout="location"] .callout-title-inner::after { content: " ⌋ ⯍"; position: absolute; right: 4ch; color: var(--text-normal); font-weight: bold; padding-left: 1ch; background: var(--background-primary); background-image: repeating-linear-gradient(-45deg, rgba(128, 128, 128, 0.08), rgba(128, 128, 128, 0.08) 2px, transparent 2px, transparent 8px); }


/* ===================================================================== */
/* REFACTORED ASCII CALLOUT DESIGNS                                      */
/* ===================================================================== */

/* --- ASCII Double --- */
.callout[data-callout="ascii-double"]::before { content: "║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A"; }
.callout[data-callout="ascii-double"]::after { content: "║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A"; }
.callout[data-callout="ascii-double"] .callout-title::before { content: "╔══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════"; right: 1ch; }
.callout[data-callout="ascii-double"] .callout-title::after { content: "╗"; }
.callout[data-callout="ascii-double"] .callout-content::before { content: "╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════"; right: 1ch; }
.callout[data-callout="ascii-double"] .callout-content::after { content: "╝"; }

/* --- ASCII Alchemical --- */
.callout[data-callout="ascii-alchemical"] { padding: 2em 4ch; }
.callout[data-callout="ascii-alchemical"]::before { content: "🜂\A🜃\A🜄\A🜁\A🜂\A🜃\A🜄\A🜁\A🜂\A🜃\A🜄\A🜁\A🜂\A🜃\A🜄\A🜁\A🜂\A🜃\A🜄\A🜁\A🜂\A🜃\A🜄\A🜁\A🜂\A🜃\A🜄\A🜁\A🜂\A🜃\A🜄\A🜁\A🜂\A🜃\A🜄\A🜁\A🜂\A🜃\A🜄\A🜁"; top: 1.5em; }
.callout[data-callout="ascii-alchemical"]::after { content: "🜂\A🜃\A🜄\A🜁\A🜂\A🜃\A🜄\A🜁\A🜂\A🜃\A🜄\A🜁\A🜂\A🜃\A🜄\A🜁\A🜂\A🜃\A🜄\A🜁\A🜂\A🜃\A🜄\A🜁\A🜂\A🜃\A🜄\A🜁\A🜂\A🜃\A🜄\A🜁\A🜂\A🜃\A🜄\A🜁\A🜂\A🜃\A🜄\A🜁"; top: 1.5em; }
.callout[data-callout="ascii-alchemical"] .callout-title::before, .callout[data-callout="ascii-alchemical"] .callout-content::before { content: "🜁══🜂══🜃══🜄════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════"; right: 8ch; }
.callout[data-callout="ascii-alchemical"] .callout-title::after, .callout[data-callout="ascii-alchemical"] .callout-content::after { content: "🜄══🜃══🜂══🜁"; background: var(--background-primary); }

/* --- ASCII 3D --- */
.callout[data-callout="ascii-3d"] { padding: 1.5em 3.5ch 2em 2ch; }
.callout[data-callout="ascii-3d"]::before { content: "│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A"; }
.callout[data-callout="ascii-3d"]::after { content: "│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█\A│█"; background: var(--background-primary); }
.callout[data-callout="ascii-3d"] .callout-title::before { content: "┌────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────"; right: 2ch; }
.callout[data-callout="ascii-3d"] .callout-title::after { content: "┐"; right: 2ch; }
.callout[data-callout="ascii-3d"] .callout-content::before { content: "└────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────"; bottom: 1.1em; right: 2ch; background: var(--background-primary); }
.callout[data-callout="ascii-3d"] .callout-title-inner::after { content: "┘█"; position: absolute; bottom: 1.1em; right: 0; z-index: 2; }
.callout[data-callout="ascii-3d"] .callout-content::after { content: "  █████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████"; line-height: 1.2; }

/* --- ASCII Void --- */
.callout[data-callout="ascii-void"] { padding: 2.5em 2ch 1.5em 2ch; }
.callout[data-callout="ascii-void"]::before { 
  content: "|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A"; top: 1.5em; }
.callout[data-callout="ascii-void"]::after { 
  content: "|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A"; top: 1.5em; }
.callout[data-callout="ascii-void"] .callout-title { position: absolute; top: 0; left: 0; }
.callout[data-callout="ascii-void"] .callout-title::before { 
  content: " ____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________"; top: 1em; }
.callout[data-callout="ascii-void"] .callout-content::after { 
  content: "|____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________"; right: 1ch; }
.callout[data-callout="ascii-void"] .callout-title-inner::after { content: "|"; position: absolute; bottom: 0; right: 0; }
.callout[data-callout="ascii-void"] .callout-title-inner::before { content: "⟦ LOG_FILE: ⟨ _"; }
.callout[data-callout="ascii-void"] .callout-title-inner { content: " ⟩ ⟧"; }















/* --- ASCII Shinra --- */
.callout[data-callout="ascii-shinra"] { padding: 2.5em 3ch; }
.callout[data-callout="ascii-shinra"]::before { content: "█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓\A█▓"; }
.callout[data-callout="ascii-shinra"]::after { content: "▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█\A▓█"; }
.callout[data-callout="ascii-shinra"] .callout-title::before { content: "████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████"; line-height: 1; }
.callout[data-callout="ascii-shinra"] .callout-title { margin-bottom: 15px; text-align: center; }
.callout[data-callout="ascii-shinra"] .callout-title-inner::before { content: "█▓▒░ [ "; }
.callout[data-callout="ascii-shinra"] .callout-title-inner::after { content: " ] ░▒▓█"; position: absolute; right: 0; background: var(--background-primary); }
.callout[data-callout="ascii-shinra"] .callout-content::before { content: "█▓▒░ ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── ░▒▓█"; bottom: 1em; }
.callout[data-callout="ascii-shinra"] .callout-content::after { content: "████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████"; line-height: 1; }

/* --- ASCII Aviator --- */
.callout[data-callout="ascii-aviator"] { padding: 1.5em 2ch; }
.callout[data-callout="ascii-aviator"]::before { content: "│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A"; }
.callout[data-callout="ascii-aviator"]::after { content: "│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A"; }
.callout[data-callout="ascii-aviator"] .callout-title-inner::before { content: "╭─◖[ "; }
.callout[data-callout="ascii-aviator"] .callout-title-inner::after { content: " ]◗─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮"; display: inline-block; vertical-align: bottom; max-width: 100%; }
.callout[data-callout="ascii-aviator"] .callout-title::after { content: "╮"; background: var(--background-primary); }
.callout[data-callout="ascii-aviator"] .callout-content::before { content: "╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────"; right: 12ch; }
.callout[data-callout="ascii-aviator"] .callout-content::after { content: "◖[VOL.11]◗─╯"; background: var(--background-primary); }

/* --- ASCII Arrow Brackets --- */
.callout[data-callout="ascii-arrow-brackets"] { padding: 1em 1.5em; font-family: monospace; }
.callout[data-callout="ascii-arrow-brackets"] .callout-title { font-weight: bold; margin-bottom: 0.5em; }
.callout[data-callout="ascii-arrow-brackets"] .callout-title-inner::before { content: "ࡔ><>→ [ "; opacity: 0.8; }
.callout[data-callout="ascii-arrow-brackets"] .callout-title-inner::after { content: " ] ←<><ࡔ"; opacity: 0.8; }


/* ===================================================================== */
/* ARMORED ASCII MONUMENT                                                */
/* ===================================================================== */
.callout[data-callout="ascii-monument"] { 
    padding: 3.5em 3.5ch !important; 
    line-height: 1.1 !important; 
}
.callout[data-callout="ascii-monument"]::before { 
    content: "┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃"; 
    position: absolute !important; top: 3em !important; left: 0 !important; white-space: pre !important; 
}
.callout[data-callout="ascii-monument"]::after { 
    content: "┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃\A┃┃"; 
    position: absolute !important; top: 3em !important; right: 0 !important; white-space: pre !important; 
}
.callout[data-callout="ascii-monument"] .callout-title::before { 
    content: "┏━┳━┳━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\A┣━┻━┛\A┣┓"; 
    position: absolute !important; top: 0 !important; left: 0 !important; right: 6ch !important; white-space: pre !important; overflow: hidden !important; 
}
.callout[data-callout="ascii-monument"] .callout-title::after { 
    content: "━┳━┳━┓\A┗━┻━┫\A    ┏┫"; 
    position: absolute !important; top: 0 !important; right: 0 !important; white-space: pre !important; text-align: right !important; background: var(--background-primary) !important; 
}
.callout[data-callout="ascii-monument"] .callout-content::before { 
    content: "┣┛\A┣━┳━┓\A┗━┻━┻━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"; 
    position: absolute !important; bottom: 0 !important; left: 0 !important; right: 7ch !important; white-space: pre !important; overflow: hidden !important; 
}
.callout[data-callout="ascii-monument"] .callout-content::after { 
    content: "    ┗┫\A┏━┳━┫\A━┻━┻━┛"; 
    position: absolute !important; bottom: 0 !important; right: 0 !important; white-space: pre !important; text-align: right !important; background: var(--background-primary) !important; 
}

/* ===================================================================== */
/* CONTINUING STANDARD ASCII CALLOUTS                                    */
/* ===================================================================== */

/* --- ASCII Fade --- */
.callout[data-callout="ascii-fade"] { padding: 2em 5ch; }
.callout[data-callout="ascii-fade"]::before { content: "██▓▒░\A██▓▒░\A██▓▒░\A██▓▒░\A██▓▒░\A██▓▒░\A██▓▒░\A██▓▒░\A██▓▒░\A██▓▒░\A██▓▒░\A██▓▒░\A██▓▒░\A██▓▒░\A██▓▒░\A██▓▒░\A██▓▒░\A██▓▒░\A██▓▒░\A██▓▒░\A██▓▒░\A██▓▒░\A██▓▒░\A██▓▒░\A██▓▒░\A██▓▒░\A██▓▒░\A██▓▒░\A██▓▒░\A██▓▒░"; }
.callout[data-callout="ascii-fade"]::after { content: "░▒▓██\A░▒▓██\A░▒▓██\A░▒▓██\A░▒▓██\A░▒▓██\A░▒▓██\A░▒▓██\A░▒▓██\A░▒▓██\A░▒▓██\A░▒▓██\A░▒▓██\A░▒▓██\A░▒▓██\A░▒▓██\A░▒▓██\A░▒▓██\A░▒▓██\A░▒▓██\A░▒▓██\A░▒▓██\A░▒▓██\A░▒▓██\A░▒▓██\A░▒▓██\A░▒▓██\A░▒▓██\A░▒▓██\A░▒▓██"; }
.callout[data-callout="ascii-fade"] .callout-title::before, .callout[data-callout="ascii-fade"] .callout-content::before { content: "██▓▓▒▒░░─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────"; right: 10ch; }
.callout[data-callout="ascii-fade"] .callout-title::after, .callout[data-callout="ascii-fade"] .callout-content::after { content: "░░▒▒▓▓██"; background: var(--background-primary); }

/* --- ASCII Dashed --- */
.callout[data-callout="ascii-dashed"] { padding: 1.5em 2ch; }
.callout[data-callout="ascii-dashed"]::before { content: "┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆"; }
.callout[data-callout="ascii-dashed"]::after { content: "┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆\A┆"; }
.callout[data-callout="ascii-dashed"] .callout-title::before, .callout[data-callout="ascii-dashed"] .callout-content::before { content: "╭╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌"; right: 1ch; }
.callout[data-callout="ascii-dashed"] .callout-title::after { content: "╮"; background: var(--background-primary); }
.callout[data-callout="ascii-dashed"] .callout-content::after { content: "╯"; background: var(--background-primary); }

/* --- ASCII Hollow --- */
.callout[data-callout="ascii-hollow"] { padding: 1.5em 4ch; }
.callout[data-callout="ascii-hollow"]::before { content: "░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│\A░▒│"; }
.callout[data-callout="ascii-hollow"]::after { content: "│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░\A│▒░"; }
.callout[data-callout="ascii-hollow"] .callout-title::before, .callout[data-callout="ascii-hollow"] .callout-content::before { content: "░▒▓──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────"; right: 3ch; }
.callout[data-callout="ascii-hollow"] .callout-title::after, .callout[data-callout="ascii-hollow"] .callout-content::after { content: "▓▒░"; background: var(--background-primary); }

/* --- ASCII Blueprint --- */
.callout[data-callout="ascii-blueprint"] { padding: 3.5em 5ch; }
.callout[data-callout="ascii-blueprint"]::before { content: " ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃\A ┃ ┃"; top: 2em; }
.callout[data-callout="ascii-blueprint"]::after { content: "┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ \A┃ ┃ "; top: 2em; }
.callout[data-callout="ascii-blueprint"] .callout-title::before { content: "   ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\A ┏━╋━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"; right: 8ch; white-space: pre; }
.callout[data-callout="ascii-blueprint"] .callout-title::after { content: "━━━━┓   \A━━━━╋━┓ "; white-space: pre; text-align: right; background: var(--background-primary); }
.callout[data-callout="ascii-blueprint"] .callout-content::before { content: " ┗━╋━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\A   ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"; right: 8ch; white-space: pre; }
.callout[data-callout="ascii-blueprint"] .callout-content::after { content: "━━━━╋━┛ \A━━━━┛   "; white-space: pre; text-align: right; background: var(--background-primary); }

/* --- ASCII Singularity --- */
.callout[data-callout="ascii-singularity"] { padding: 3.5em 5ch; }
.callout[data-callout="ascii-singularity"]::before { content: " ◆  ▲\A ◆  ▼\A ◆  ▲\A ◆  ▼\A ◆  ▲\A ◆  ▼\A ◆  ▲\A ◆  ▼\A ◆  ▲\A ◆  ▼\A ◆  ▲\A ◆  ▼\A ◆  ▲\A ◆  ▼\A ◆  ▲\A ◆  ▼\A ◆  ▲\A ◆  ▼\A ◆  ▲\A ◆  ▼\A ◆  ▲\A ◆  ▼\A ◆  ▲\A ◆  ▼\A ◆  ▲\A ◆  ▼\A ◆  ▲\A ◆  ▼\A ◆  ▲\A ◆  ▼\A ◆  ▲\A ◆  ▼\A ◆  ▲\A ◆  ▼\A ◆  ▲\A ◆  ▼\A ◆  ▲\A ◆  ▼\A ◆  ▲\A ◆  ▼"; top: 3em; }
.callout[data-callout="ascii-singularity"]::after { content: "◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ \A◆ "; top: 3em; }
.callout[data-callout="ascii-singularity"] .callout-title { margin-bottom: 2em; }
.callout[data-callout="ascii-singularity"] .callout-title::before { content: "       ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆\A    ◆◆◆ [ "; right: 8ch; white-space: pre; }
.callout[data-callout="ascii-singularity"] .callout-title::after { content: " ◆◆◆       \A ] ◆◆◆    "; white-space: pre; text-align: right; background: var(--background-primary); }
.callout[data-callout="ascii-singularity"] .callout-title-inner::after { content: " ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆"; position: absolute; top: 2.3em; left: 0; right: 0; white-space: nowrap; overflow: hidden; }
.callout[data-callout="ascii-singularity"] .callout-content::before { content: " ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆\A    ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆"; right: 0; white-space: pre; }

/* --- ASCII Corrupted --- */
.callout[data-callout="ascii-corrupted"] { padding: 2em 3ch; }
.callout[data-callout="ascii-corrupted"]::before { content: "║ ╟─[0x00A] >>\A║ ╟─[0x08F] >>\A║ ╟─[0x01A] >>\A║ ╟─[DATA_ERR]\A║ \A║ \A║ \A║ \A║ \A║ \A║ \A║ \A║ \A║ \A║ \A║ \A║ \A║ \A║ \A║ \A║ \A║ \A║ \A║ \A║ \A║ \A║ \A║ \A║ \A║ \A║ \A║ \A║ \A║ \A║ \A║ "; }
.callout[data-callout="ascii-corrupted"]::after { content: "║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║"; }
.callout[data-callout="ascii-corrupted"] .callout-title::before, .callout[data-callout="ascii-corrupted"] .callout-content::before { content: "╔══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════"; right: 1ch; }
.callout[data-callout="ascii-corrupted"] .callout-title::after { content: "╗"; background: var(--background-primary); }
.callout[data-callout="ascii-corrupted"] .callout-title-inner::before { content: "[ ▒▒▒ "; opacity: 0.8; }
.callout[data-callout="ascii-corrupted"] .callout-title-inner::after { content: " ▒▒▒ ]"; opacity: 0.8; }
.callout[data-callout="ascii-corrupted"] .callout-content::after { content: "╝"; background: var(--background-primary); }

/* --- ASCII Wireframe --- */
.callout[data-callout="ascii-wireframe"] { padding: 3.5em 5ch; }
.callout[data-callout="ascii-wireframe"]::before { content: " │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │\A │ │"; top: 2em; }
.callout[data-callout="ascii-wireframe"]::after { content: "│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ \A│ │ "; top: 2em; }
.callout[data-callout="ascii-wireframe"] .callout-title::before { content: "   ┌──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────\A ┌─┼──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────"; right: 8ch; white-space: pre; }
.callout[data-callout="ascii-wireframe"] .callout-title::after { content: "──────┐  \A────┐ │  "; white-space: pre; text-align: right; background: var(--background-primary); }
.callout[data-callout="ascii-wireframe"] .callout-content::before { content: " │ └──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────\A └──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────"; right: 8ch; white-space: pre; }
.callout[data-callout="ascii-wireframe"] .callout-content::after { content: "──────┼─┘\A────────┘"; white-space: pre; text-align: right; background: var(--background-primary); }

/* --- ASCII Hologram --- */
.callout[data-callout="ascii-hologram"] { padding: 2.5em 3ch 4em 3ch; }
.callout[data-callout="ascii-hologram"]::before { content: " ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓\A ░▒▓"; }
.callout[data-callout="ascii-hologram"]::after { content: "▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░\A▓▒░"; }
.callout[data-callout="ascii-hologram"] .callout-title::before { content: " ░▒▓██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████"; right: 5ch; }
.callout[data-callout="ascii-hologram"] .callout-title::after { content: "████▓▒░"; background: var(--background-primary); }
.callout[data-callout="ascii-hologram"] .callout-content::before { content: " ░▒▓██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████\A    ╲ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒\A     ╲ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░\A      ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀"; right: 9ch; white-space: pre; }
.callout[data-callout="ascii-hologram"] .callout-content::after { content: "████▓▒░\A▒▒▒▒ ╱ \A░░░░ ╱  \A▀▀▀▀▀▀   "; white-space: pre; text-align: right; background: var(--background-primary); }

/* --- ASCII Cascade --- */
.callout[data-callout="ascii-cascade"] { padding: 2em 12ch; }
.callout[data-callout="ascii-cascade"]::before { content: "║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ \A║ ╎ ┊ ╎ "; top: 0; opacity: 0.7; }
.callout[data-callout="ascii-cascade"]::after { content: " ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║\A ╎ ┊ ╎ ║"; top: 0; opacity: 0.7; }

/* --- ASCII Overhang --- */
.callout[data-callout="ascii-overhang"] { padding: 4.5em 4ch 2em 4ch; }
.callout[data-callout="ascii-overhang"]::before { content: "░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░"; top: 3em; }
.callout[data-callout="ascii-overhang"]::after { content: "░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░\A░░"; top: 3em; }
.callout[data-callout="ascii-overhang"] .callout-title::before { content: "██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████\A▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓\A▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒"; white-space: pre; line-height: 1.1; }
.callout[data-callout="ascii-overhang"] .callout-content::before { content: "╰╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌"; right: 1ch; }
.callout[data-callout="ascii-overhang"] .callout-content::after { content: "╯"; background: var(--background-primary); }

/* --- ASCII Mako Core --- */
.callout[data-callout="ascii-makocore"] { padding: 3.5em 5ch 2em 5ch; }
.callout[data-callout="ascii-makocore"]::before { content: "│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║\A│ ║"; top: 2em; }
.callout[data-callout="ascii-makocore"]::after { content: "║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │\A║ │"; top: 2em; }
.callout[data-callout="ascii-makocore"] .callout-title::before { content: "╒══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════\A╞═╦══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════"; right: 4ch; white-space: pre; }
.callout[data-callout="ascii-makocore"] .callout-title::after { content: "╕\A╦═╡"; white-space: pre; text-align: right; background: var(--background-primary); }
.callout[data-callout="ascii-makocore"] .callout-title-inner::before { content: "╒══[ ⚠ "; position: absolute; top: 0; left: 0; background: var(--background-primary); padding-right: 1ch; }
.callout[data-callout="ascii-makocore"] .callout-title-inner::after { content: " ]"; background: var(--background-primary); }
.callout[data-callout="ascii-makocore"] .callout-content::before { content: "╞═╩══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════\A╘══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════"; right: 29ch; white-space: pre; }
.callout[data-callout="ascii-makocore"] .callout-content::after { content: "╩═╡\A[ SECTOR_1_MAKO_PLANT ]═══╛"; white-space: pre; text-align: right; background: var(--background-primary); }

/* --- ASCII Gilded --- */
.callout[data-callout="ascii-gilded"] { padding: 2em 4ch; }
.callout[data-callout="ascii-gilded"]::before { content: "┃▓┃\A┃▒┃\A┃░┃\A┣━┫\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃"; }
.callout[data-callout="ascii-gilded"]::after { content: "┃▓┃\A┃▒┃\A┃░┃\A┣━┫\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃\A┃ ┃"; }
.callout[data-callout="ascii-gilded"] .callout-title::before, .callout[data-callout="ascii-gilded"] .callout-content::before { content: "┏━┳━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"; right: 3ch; }
.callout[data-callout="ascii-gilded"] .callout-title::after { content: "┳━┓"; background: var(--background-primary); }
.callout[data-callout="ascii-gilded"] .callout-content::before { content: "┗━┻━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"; }
.callout[data-callout="ascii-gilded"] .callout-content::after { content: "┻━┛"; background: var(--background-primary); }

/* --- ASCII Arasaka --- */
.callout[data-callout="ascii-arasaka"] { padding: 1.5em 3ch; }
.callout[data-callout="ascii-arasaka"]::before { content: "⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇"; }
.callout[data-callout="ascii-arasaka"]::after { content: "⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇\A⡇"; }
.callout[data-callout="ascii-arasaka"] .callout-title::before { content: "█▓▒░ ARASAKA_DB_ERR ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"; right: 5ch; }
.callout[data-callout="ascii-arasaka"] .callout-title::after { content: " ░▒▓█"; background: var(--background-primary); }
.callout[data-callout="ascii-arasaka"] .callout-content::before { content: "█▓▒░ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"; right: 16ch; }
.callout[data-callout="ascii-arasaka"] .callout-content::after { content: " REBOOTING_ ░▒▓█"; background: var(--background-primary); }

/* --- ASCII Override --- */
.callout[data-callout="ascii-override"] { padding: 1.5em 3ch; }
.callout[data-callout="ascii-override"]::before { content: "▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌\A▌"; }
.callout[data-callout="ascii-override"]::after { content: "▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐\A▐"; }
.callout[data-callout="ascii-override"] .callout-title::before { content: "▶_ SYSTEM.OVERRIDE_ ▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰"; }
.callout[data-callout="ascii-override"] .callout-content::before { content: "▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀"; right: 6ch; }
.callout[data-callout="ascii-override"] .callout-content::after { content: " ▗▄▄▄▖"; background: var(--background-primary); }

/* --- ASCII Cyberscan --- */
.callout[data-callout="ascii-cyberscan"] { padding: 1.5em 3ch; }
.callout[data-callout="ascii-cyberscan"]::before { content: "█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█"; }
.callout[data-callout="ascii-cyberscan"]::after { content: "█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█\A█"; }
.callout[data-callout="ascii-cyberscan"] .callout-title::before, .callout[data-callout="ascii-cyberscan"] .callout-content::before { content: "▐▍▎▏▎▍▌▋▊▉████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████"; right: 12ch; }
.callout[data-callout="ascii-cyberscan"] .callout-title::after, .callout[data-callout="ascii-cyberscan"] .callout-content::after { content: "██▉▊▋▌▍▎▏▎▍▐"; background: var(--background-primary); }

/* --- ASCII Calligraph --- */
.callout[data-callout="ascii-calligraph"] { padding: 2.5em 5ch; }
.callout[data-callout="ascii-calligraph"]::before { content: " ⹜⎧\A﴾¢\A ⹚⎩\A ⹜⎧\A﴾¢\A ⹚⎩\A ⹜⎧\A﴾¢\A ⹚⎩\A ⹜⎧\A﴾¢\A ⹚⎩\A ⹜⎧\A﴾¢\A ⹚⎩\A ⹜⎧\A﴾¢\A ⹚⎩\A ⹜⎧\A﴾¢\A ⹚⎩\A ⹜⎧\A﴾¢\A ⹚⎩"; top: 1.5em; }
.callout[data-callout="ascii-calligraph"]::after { content: "⎫⹛ \A ¢﴿\A⎭⹙ \A⎫⹛ \A ¢﴿\A⎭⹙ \A⎫⹛ \A ¢﴿\A⎭⹙ \A⎫⹛ \A ¢﴿\A⎭⹙ \A⎫⹛ \A ¢﴿\A⎭⹙ \A⎫⹛ \A ¢﴿\A⎭⹙ \A⎫⹛ \A ¢﴿\A⎭⹙ \A⎫⹛ \A ¢﴿\A⎭⹙ "; top: 1.5em; text-align: right; }
.callout[data-callout="ascii-calligraph"] .callout-title::before { content: "      ⎰"; }
.callout[data-callout="ascii-calligraph"] .callout-title::after { content: "⎱      "; }
.callout[data-callout="ascii-calligraph"] .callout-content::before { content: "      ⎱"; }
.callout[data-callout="ascii-calligraph"] .callout-content::after { content: "⎰      "; }

/* --- ASCII Resonance --- */
.callout[data-callout="ascii-resonance"] { padding: 2em 3ch; }
.callout[data-callout="ascii-resonance"]::before { content: "║\A╟\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║"; }
.callout[data-callout="ascii-resonance"]::after { content: "║\A╢\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║"; }
.callout[data-callout="ascii-resonance"] .callout-title::before { content: "╔══════════════════[ ⌠ R E S O N A N C E ⌡ ]═════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════"; right: 1ch; }
.callout[data-callout="ascii-resonance"] .callout-title::after { content: "╗"; background: var(--background-primary); }
.callout[data-callout="ascii-resonance"] .callout-content::before { content: "╚════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════"; right: 1ch; }
.callout[data-callout="ascii-resonance"] .callout-content::after { content: "╝"; background: var(--background-primary); }

/* --- ASCII Siphon --- */
.callout[data-callout="ascii-siphon"] { padding: 2em 3ch 4em 3ch; }
.callout[data-callout="ascii-siphon"]::before { content: "║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║"; }
.callout[data-callout="ascii-siphon"]::after { content: "║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║"; }
.callout[data-callout="ascii-siphon"] .callout-title::before { content: "╓──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────"; right: 1ch; }
.callout[data-callout="ascii-siphon"] .callout-title::after { content: "╖"; background: var(--background-primary); }
.callout[data-callout="ascii-siphon"] .callout-content::before { content: "╙──╖─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────\A   ║ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒\A   ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════"; right: 4ch; white-space: pre; }
.callout[data-callout="ascii-siphon"] .callout-content::after { content: "╖──╜\A▒▒ ║\A═══╝"; white-space: pre; text-align: right; background: var(--background-primary); }

/* --- ASCII Stardust --- */
.callout[data-callout="ascii-stardust"] { padding: 2em 3ch; }
.callout[data-callout="ascii-stardust"]::before { content: "╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏"; }
.callout[data-callout="ascii-stardust"]::after { content: "╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏\A╏"; }
.callout[data-callout="ascii-stardust"] .callout-title::before, .callout[data-callout="ascii-stardust"] .callout-content::before { content: "⌖ ━━╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍"; right: 6ch; }
.callout[data-callout="ascii-stardust"] .callout-title::after, .callout[data-callout="ascii-stardust"] .callout-content::after { content: "╍╍━━ ⌖"; background: var(--background-primary); }

/* --- ASCII Fantasy --- */
.callout[data-callout="ascii-fantasy"] { padding: 2em 3ch; }
.callout[data-callout="ascii-fantasy"]::before { content: "│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│"; }
.callout[data-callout="ascii-fantasy"]::after { content: "│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│"; }
.callout[data-callout="ascii-fantasy"] .callout-title::before, .callout[data-callout="ascii-fantasy"] .callout-content::before { content: "꧁༺ ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────"; right: 4ch; }
.callout[data-callout="ascii-fantasy"] .callout-title::after, .callout[data-callout="ascii-fantasy"] .callout-content::after { content: " ༻꧂"; background: var(--background-primary); }

/* --- ASCII Poetry --- */
.callout[data-callout="ascii-poetry"] { padding: 2em 3ch; }
.callout[data-callout="ascii-poetry"]::before { content: "│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│"; }
.callout[data-callout="ascii-poetry"]::after { content: "│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│"; }
.callout[data-callout="ascii-poetry"] .callout-title::before { content: "╭⋟──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────"; right: 1ch; }
.callout[data-callout="ascii-poetry"] .callout-title::after { content: "╮"; background: var(--background-primary); }
.callout[data-callout="ascii-poetry"] .callout-content::before { content: "╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────"; right: 2ch; }
.callout[data-callout="ascii-poetry"] .callout-content::after { content: "⋞╯"; background: var(--background-primary); }

/* --- ASCII Mythology --- */
.callout[data-callout="ascii-mythology"] { padding: 2em 3ch; }
.callout[data-callout="ascii-mythology"]::before { content: "║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║"; }
.callout[data-callout="ascii-mythology"]::after { content: "║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║\A║"; }
.callout[data-callout="ascii-mythology"] .callout-title::before, .callout[data-callout="ascii-mythology"] .callout-content::before { content: "╔═══*.·:·.☽✧    ✦    ✧☾.·:·.*════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════"; right: 1ch; }
.callout[data-callout="ascii-mythology"] .callout-title::after { content: "╗"; background: var(--background-primary); }
.callout[data-callout="ascii-mythology"] .callout-content::after { content: "╝"; background: var(--background-primary); }


/* ===================================================================== */
/* PART 5: MISC CLASSES (ASCII FRAME & MAP VIEW)                         */
/* ===================================================================== */

/* --- ASCII Art Frame Classes --- */
.ascii-art-container {
  white-space: pre; font-family: 'Courier New', 'Monaco', 'Consolas', monospace; width: 100%; overflow-x: auto;
  font-size: clamp(0.5rem, 2vw, 1rem); line-height: 1.2; background: var(--background-primary); padding: 10px; border-radius: 5px;
}
.ascii-fit-container {
  margin: 0 auto; white-space: pre; width: 100%; transform-origin: left center; --art-width: 800px; 
  transform: scale(min(1, calc(100% / var(--art-width)))); display: block;
}
.ascii-auto-fit {
  display: table; margin: 0 auto; white-space: pre; max-width: 100%; transform-origin: center;
  transform: scale(min(1, calc(100vw / var(--art-width, 800px))));
}

/* --- Map View Fixes --- */
.map-view-plugin-container, .map-view-pin-label, .map-view-sidebar-header, .map-view-search-input {
    font-family: "Unifont", monospace !important;
}
.map-view-pin-label {
    background-color: var(--background-primary) !important; border: 1px solid var(--text-accent) !important;
    padding: 2px 4px !important; color: var(--text-normal) !important;
}

/* ========================================= */
/* WRITER'S INLINE TEXT EFFECTS              */
/* ========================================= */

/* 1. The "Ancient Tome" Effect */
.tome {
    font-family: "Times New Roman", serif;
    color: #b8860b; /* Dark Goldenrod */
    font-size: 1.2em;
    font-style: italic;
}

/* 2. The "Redacted" Secret Text Effect */
.redacted {
    background-color: #333;
    color: #333; /* Text blends into the background */
    border-radius: 3px;
    padding: 0 4px;
}
/* This makes the redacted text appear only when you hover your mouse over it! */
.redacted:hover {
    color: #fff;
}

/* 3. The "Telepathy" Voice Effect */
.telepathy {
    color: #7d5fff; /* Purple */
    letter-spacing: 2px;
    text-shadow: 0px 0px 5px rgba(125, 95, 255, 0.5);
}





/* ================================================== */
/* WRITER'S CUSTOM ASCII DIVIDERS                     */
/* ================================================== */

/* 1. THE SHARED SKELETON */
/* This strips away the boring default line and centers our art */
hr.sword, 
hr.fairy, 
hr.cyber, 
hr.flourish {
    border: none;             /* Hides the default Obsidian line */
    text-align: center;       /* Centers the ASCII art */
    height: 0px;              /* Collapses the invisible box */
    margin: 2.5em 0;          /* Adds breathing room above and below */
    overflow: visible;        /* Lets the art show up */
}

/* 2. THE UNIQUE DESIGNS */
/* We use ::after to magically "inject" the text into the page */

/* Variant A: The Fantasy Sword */
hr.sword::after {
    content: "O===[====================>";
    font-family: monospace;
    color: var(--text-muted); /* Uses Obsidian's faded text color */
    font-size: 1.2em;
    position: relative;
    top: -12px; /* Nudges it perfectly into the center */
}

/* Variant B: The Fairy Dust */
hr.fairy::after {
    content: "⋆ ˚｡⋆୨୧˚ ˚୨୧⋆｡˚ ⋆";
    color: #ffb86c; /* Soft orange/pink */
    font-size: 1.5em;
    letter-spacing: 4px;
    position: relative;
    top: -15px;
}

/* Variant C: The Sci-Fi Data Transfer */
hr.cyber::after {
    content: "▰▰▰▰▰▰▰▰▰▱▱▱▱▱▱▱▱▱";
    color: #50fa7b; /* Neon green */
    font-family: monospace;
    font-size: 1.2em;
    position: relative;
    top: -12px;
}

/* Variant D: The Elegant Book Flourish (Line fading into a center star) */
hr.flourish {
    /* We give this one a custom gradient line! */
    background-image: linear-gradient(to right, transparent, var(--text-accent), transparent);
    height: 1px; 
}
hr.flourish::after {
    content: "✧";
    color: var(--text-accent); /* Uses your vault's main accent color */
    background: var(--background-primary); /* Masks the line behind the star */
    padding: 0 15px; /* Creates space around the star */
    font-size: 1.5em;
    position: relative;
    top: -15px;
}




/* Update your CSS to target divs instead of hr */
div.sword, 
div.fairy, 
div.cyber, 
div.flourish {
    border: none;
    text-align: center;
    margin: 2.5em 0;
    /* We add this to make sure Live Preview sees the box */
    display: block; 
    width: 100%;
}

/* Everything else stays exactly the same! */
div.sword::after { content: "O===[====================>"; ... }






/* ================================================== */
/* DIV-BASED DIVIDERS (Live Preview Friendly)         */
/* ================================================== */

/* 1. THE SHARED SKELETON */
/* Using div instead of hr to guarantee Live Preview rendering */
div.sword, 
div.fairy, 
div.cyber, 
div.flourish,
div.crystal,
div.galaxy,
div.rune {
    border: none;
    text-align: center;
    width: 100%;
    margin: 2.5em 0;
    display: block;
    height: 1.5em; /* Gives the div enough height to hold the art */
}

/* 2. THE DESIGNS */

/* Variant A: The Fairy Dust */
div.fairy::after {
    content: "⋆ ˚｡⋆୨୧˚ ˚୨୧⋆｡˚ ⋆";
    color: #ffb86c;
    font-size: 1.5em;
    letter-spacing: 4px;
}

/* Variant B: The Crystal Spark (New!) */
div.crystal::after {
    content: "◈  ◈  ◈  ◈  ◈";
    color: #8be9fd;
    font-size: 1.5em;
    letter-spacing: 8px;
    font-family: monospace;
}

/* Variant C: The Galaxy Swirl (New!) */
div.galaxy::after {
    content: "✵ ☄ ✵ ☄ ✵";
    color: #bd93f9;
    font-size: 1.5em;
    letter-spacing: 10px;
    font-family: monospace;
}

/* Variant D: The Ancient Rune (New!) */
div.rune::after {
    content: "᚛    ᛟ    ᚜";
    color: #ff5555;
    font-size: 1.8em;
    letter-spacing: 12px;
    font-family: monospace;
}
/* Strip base callout wrapper styling */
.callout[data-callout="embed"],
.callout[data-callout="cleanembed"],
.callout[data-callout="embedclean"] {
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	box-shadow: none;
}

/* Remove padding from the callout content wrapper to align left */
.callout[data-callout="embed"] .callout-content,
.callout[data-callout="cleanembed"] .callout-content,
.callout[data-callout="embedclean"] .callout-content {
	padding: 0;
	margin: 0;
}

/* Hide the callout icon */
.callout[data-callout="embed"] .callout-icon,
.callout[data-callout="cleanembed"] .callout-icon,
.callout[data-callout="embedclean"] .callout-icon {
	display: none;
}

/* Hide the title entirely IF it does not contain an embed */
.callout[data-callout="embed"] .callout-title:not(:has(.markdown-embed, .internal-embed)),
.callout[data-callout="cleanembed"] .callout-title:not(:has(.markdown-embed, .internal-embed)),
.callout[data-callout="embedclean"] .callout-title:not(:has(.markdown-embed, .internal-embed)) {
	display: none;
}

/* If the title DOES contain an embed, remove flex formatting so it acts like normal content */
.callout[data-callout="embed"] .callout-title:has(.markdown-embed, .internal-embed),
.callout[data-callout="cleanembed"] .callout-title:has(.markdown-embed, .internal-embed),
.callout[data-callout="embedclean"] .callout-title:has(.markdown-embed, .internal-embed) {
	display: block;
	padding: 0;
	margin: 0;
	background: transparent;
}

/* Hide the child embed side bar and link icon by DEFAULT */
.callout[data-callout="embed"] .markdown-embed-link,
.callout[data-callout="cleanembed"] .markdown-embed-link,
.callout[data-callout="embedclean"] .markdown-embed-link,
.callout[data-callout="embed"] .markdown-embed,
.callout[data-callout="cleanembed"] .markdown-embed,
.callout[data-callout="embedclean"] .markdown-embed {
	border-left: none !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
}

/* Strip left padding from the internal embed content layers to make it completely flush */
.callout[data-callout="embed"] .markdown-embed-content,
.callout[data-callout="cleanembed"] .markdown-embed-content,
.callout[data-callout="embedclean"] .markdown-embed-content,
.callout[data-callout="embed"] .markdown-preview-view,
.callout[data-callout="cleanembed"] .markdown-preview-view,
.callout[data-callout="embedclean"] .markdown-preview-view {
	padding-left: 0 !important;
	margin-left: 0 !important;
}

/* Title Toggles */
.callout[data-callout-metadata~="noembedtitle"] .markdown-embed-title {
	display: none !important;
}
.callout[data-callout-metadata~="embedtitle"] .markdown-embed-title {
	display: block !important;
}

/* Line Toggle (Restores the line if |embedline is used) */
.callout[data-callout-metadata~="embedline"] .markdown-embed-link,
.callout[data-callout-metadata~="embedline"] .markdown-embed {
	border-left: 2px solid var(--quote-line-color, var(--background-modifier-border)) !important;
	padding-left: var(--size-4-3) !important;
}

/* Heading Toggles */
.callout[data-callout-metadata~="noembedheadings"] .markdown-embed-content h1,
.callout[data-callout-metadata~="noembedheadings"] .markdown-embed-content h2,
.callout[data-callout-metadata~="noembedheadings"] .markdown-embed-content h3,
.callout[data-callout-metadata~="noembedheadings"] .markdown-embed-content h4,
.callout[data-callout-metadata~="noembedheadings"] .markdown-embed-content h5,
.callout[data-callout-metadata~="noembedheadings"] .markdown-embed-content h6 {
	display: none !important;
}
.callout[data-callout-metadata~="embedheadings"] .markdown-embed-content h1,
.callout[data-callout-metadata~="embedheadings"] .markdown-embed-content h2,
.callout[data-callout-metadata~="embedheadings"] .markdown-embed-content h3,
.callout[data-callout-metadata~="embedheadings"] .markdown-embed-content h4,
.callout[data-callout-metadata~="embedheadings"] .markdown-embed-content h5,
.callout[data-callout-metadata~="embedheadings"] .markdown-embed-content h6 {
	display: block !important;
}/* ==========================================================================
   Album Callout (`album`) - True Markdown Line-Break Engine
   ========================================================================== */

.callout[data-callout="album"] {
    background: rgba(18, 18, 24, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    border-radius: 8px !important;
}

/* 1. Main callout body stacks distinct rows vertically */
.callout[data-callout="album"] > .callout-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 8px 0 !important;
}

/* 2. Forces each paragraph and wrapper div to act as a horizontal row */
.callout[data-callout="album"] > .callout-content > p,
.callout[data-callout="album"] > .callout-content > div,
.callout[data-callout="album"] .cm-line {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;        /* Keeps images on the same line from wrapping */
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

/* 3. Inline embed handles */
.callout[data-callout="album"] .image-embed,
.callout[data-callout="album"] span.internal-embed {
    display: inline-flex !important;
    flex: 1 1 0px !important;            /* Shares row space equally */
    min-width: 0 !important;
    margin: 0 !important;
}

/* 4. Responsive Image Sizing */
.callout[data-callout="album"] img {
    width: 100% !important;
    height: auto !important;
    max-height: 220px !important;        /* Scales nicely for 1, 2, or 3-up rows */
    object-fit: contain !important;
    border-radius: 6px !important;
    margin: 0 !important;
    transition: transform 0.15s ease !important;
}

.callout[data-callout="album"] img:hover {
    transform: scale(1.03) !important;
    z-index: 10 !important;
}
/* ==========================================================================
   Code Box Callout (`code`) - Windows Terminal Glass & Retro CRT Vibe
   Usage: > [!code]- Title
   ========================================================================== */

/* 1. Structural Reset */
.callout[data-callout="code"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 1em 0 !important;
    overflow: hidden !important; /* Fixes left/right clipping */
    mix-blend-mode: normal !important;
}

/* 2. Title Bar (Windows Terminal Header Style) */
.callout[data-callout="code"] > .callout-title {
    position: relative;
    z-index: 2;
    background: rgba(16, 32, 39, 0.85) !important; /* Deep Terminal Slate Teal */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(82, 148, 172, 0.4) !important;
    border-bottom: 1px solid rgba(82, 148, 172, 0.2) !important;
    border-radius: 6px 6px 0 0 !important;
    padding: 6px 14px !important;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.callout[data-callout="code"] > .callout-title > .callout-title-inner {
    font-family: var(--font-monospace) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #92cad6 !important; /* Soft Terminal Teal Text */
    text-shadow: 0px 0px 6px rgba(146, 202, 214, 0.5) !important; /* Subtle CRT Phosphor Glow */
    letter-spacing: -0.3px !important;
}

/* 3. Frosted Translucent Glass Body (Matches Terminal Photo) */
.callout[data-callout="code"] > .callout-content {
    position: relative;
    z-index: 1;
    /* Semi-transparent slate-tint for see-through backdrop blur */
    background: rgba(12, 24, 30, 0.75) !important; 
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    
    color: #b3deee !important;
    border: 1px solid rgba(82, 148, 172, 0.3) !important;
    border-top: none !important;
    border-radius: 0 0 6px 6px !important;
    
    /* Fixed margins to prevent clipping/overflow off-screen */
    margin: 0 !important;
    padding: 10px 14px !important;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.5) !important;
}

/* 4. Retro CRT Scanline Overlay Effect */
.callout[data-callout="code"] > .callout-content::before {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(
        rgba(18, 16, 16, 0) 50%, 
        rgba(0, 0, 0, 0.25) 50%
    ) !important;
    background-size: 100% 4px !important; /* Tiny 4px scanlines */
    z-index: 2;
    pointer-events: none !important; /* Lets you select/copy text beneath it */
    opacity: 0.6 !important;
}

/* 5. Code Block Text & Dense Kerning Engine */
.callout[data-callout="code"] > .callout-content pre,
.callout[data-callout="code"] > .callout-content code,
.callout[data-callout="code"] > .callout-content p {
    position: relative;
    z-index: 3;
    font-family: var(--font-monospace) !important;
    font-size: 0.78rem !important;        /* Compact code size */
    line-height: 1.18 !important;        /* Tight line spacing */
    letter-spacing: -0.5px !important;    /* Horizontal condensation */
    word-spacing: -1px !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    color: #b3deee !important;
}

.callout[data-callout="code"] > .callout-content pre {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* === Reading Mode H1 Styles === */
.markdown-preview-view h1 {
  text-align: center;
  margin-top: 0em;
  padding-top: 0em; }
.markdown-preview-view h1::before {
  content: "";
  display: block;
  border-top: 1px 
    solid rgba(128, 128, 128, 0.3);
  margin-top: 0em;
  margin-bottom: 0em; }
.markdown-preview-view h1::after {
  content: "";
  display: block;
  border-bottom: 1px solid rgba(128, 128, 128, 0.3);
  width: 40%;
  margin: 0em auto 0em auto; }

/* Remove spacing from first visible H1 in Reading Mode */
.markdown-preview-view h1:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important; }
.markdown-preview-view h1:first-of-type::before,
.markdown-preview-view h1:first-of-type::after{
  display: none !important; }

/* === Live Preview H1 Styles === */
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-1 {
  text-align: center;
  margin-top: 0em;
  padding-top: 0em;}
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-1::before {
  content: "";
  display: block;
  border-top: 1px 
    solid rgba(15, 10, 30, 0.3);
  width: 50%;
  margin-top: 0em auto;
  margin-bottom: 0em auto;
  margin: 0em auto 0em auto; }
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header-1::after {
  content: "";
  display: block;
  border-bottom: 1px solid 
    rgba(128, 128, 128, 0.3);
  width: 40%;
  margin: 0em auto 0em auto; }
/* Remove spacing from first visible H1 in Live Preview */
.markdown-source-view.mod-cm6 .cm-content > .cm-line.HyperMD-header-1:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;}
.markdown-source-view.mod-cm6 .cm-content > .cm-line.HyperMD-header-1:first-of-type::before,
.markdown-source-view.mod-cm6 .cm-content > .cm-line.HyperMD-header-1:first-of-type::after {
  display: none !important;}/* ==========================================================
   1. System Override: Kill the Default Checkmark SVG
   ========================================================== */
.task-list-item-checkbox[data-task="/"]::after,
.task-list-item-checkbox[data-task="-"]::after,
.task-list-item-checkbox[data-task="1"]::after,
.task-list-item-checkbox[data-task="2"]::after,
.task-list-item-checkbox[data-task="3"]::after,
.task-list-item-checkbox[data-task="?"]::after {
    /* Destroys the default checkmark shape */
    -webkit-mask-image: none !important; 
    mask-image: none !important;
    /* Clears the default checkmark color */
    background-color: transparent !important; 
    /* Stops Obsidian from rotating our custom text */
    transform: none !important; 
    position: static !important;
}

/* Flexbox magic to center your custom text perfectly */
.task-list-item-checkbox[data-task="/"],
.task-list-item-checkbox[data-task="-"],
.task-list-item-checkbox[data-task="1"],
.task-list-item-checkbox[data-task="2"],
.task-list-item-checkbox[data-task="3"],
.task-list-item-checkbox[data-task="?"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ==========================================================
   2. Tilde Box for In-Progress / Alternative Tasks ([/] or [-])
   ========================================================== */
.task-list-item-checkbox[data-task="/"],
.task-list-item-checkbox[data-task="-"] {
    background-color: rgba(136, 136, 136, 0.1) !important;
    border-color: #888888 !important;
}
.task-list-item-checkbox[data-task="/"]::after,
.task-list-item-checkbox[data-task="-"]::after {
    content: "~" !important;
    color: #888888 !important;
    font-size: 19px !important;
    font-weight: 900 !important;
}

/* ==========================================================
   3. Fractional Progressive Tasks ([1], [2], [3], [x])
   ========================================================== */

/* --- 1/4 (Quarter) - Soft Orange --- */
.task-list-item-checkbox[data-task="1"] 
{
    /* 25% solid fill, 75% faint track background */
    background: linear-gradient(130deg, #fce8d5 25%, #8d5d30 85%) !important;
    border-color: #702f00 !important;
}
.task-list-item-checkbox[data-task="1"]::after 
{
    content: "¼" !important;
    color: #c2410c !important;
    font-size: 13px !important; 
    font-weight: 900 !important;
}

/* --- 2/4 or 1/2 (Half) - Soft Yellow --- */
.task-list-item-checkbox[data-task="2"] {
    /* 50% solid fill, 50% faint track background */
    background: linear-gradient(130deg, #fef3c7 50%, #4b8e10 100%) !important;
    border-color: #eab308 !important;
}
.task-list-item-checkbox[data-task="2"]::after {
    content: "½" !important;
    color: #a16207 !important;
    font-size: 14px !important; 
    font-weight: 900 !important;
}

/* --- 3/4 (Three Quarters) - Soft Green --- */
.task-list-item-checkbox[data-task="3"] {
    /* 75% solid fill, 25% faint track background */
    background: linear-gradient(130deg, #d1fae5 75%, #51c88c 25%) !important;
    border-color: #10b981 !important;
}
.task-list-item-checkbox[data-task="3"]::after 
{
    content: "¾" !important;
    color: #047857 !important;
    font-size: 14px !important; 
    font-weight: 900 !important;
}

/* --- Fully Done [x] - Cool Soft Mint / Pine --- */
.task-list-item-checkbox[data-task="x"],
.task-list-item-checkbox[data-task="X"] {
    background-color: #3e6a56 !important;
    border-color: #0d3629 !important;
}
.task-list-item-checkbox[data-task="x"]::after,
.task-list-item-checkbox[data-task="X"]::after 
  {background-color: #548779 !important;}

/* ==========================================================
   4. Detective / Unknown Status ([?]) - Noir Interrobang
   ========================================================== */
.task-list-item-checkbox[data-task="?"] {
    background-color: #d4d4d4 !important; /* Fog / Light Noir Grey */
    border-color: #262626 !important;     /* Hard Charcoal Border */
}
.task-list-item-checkbox[data-task="?"]::after {
    content: "‽" !important;              /* The Interrobang */
    color: #171717 !important;            /* Pitch Noir Text */
    font-size: 1.4em !important;           
    font-weight: bolder !important;          
    font-style: italic !important;        
}

/*
MIT License

Copyright (c) 2022 kneecaps

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/

/* reading mode */
.markdown-rendered pre {
  border: solid var(--color-accent);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-lm-only);
}

/* live preview */
.cm-s-obsidian div.HyperMD-codeblock-begin-bg {
  background: var(--code-background);
  border-top: solid var(--color-accent);
  /* stylelint-disable-next-line declaration-no-important */
  border-top-right-radius: 8px !important;
  /* stylelint-disable-next-line declaration-no-important */
  border-top-left-radius: 8px !important;
  margin-top: 8px;
}

.cm-s-obsidian div.HyperMD-codeblock-end-bg {
  background: var(--code-background);
  border-bottom: solid var(--color-accent);
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

.cm-s-obsidian div.HyperMD-codeblock-bg {
  border-right: solid var(--color-accent);
  border-left: solid var(--color-accent);
}/* Makes comments faint by default */
.cm-comment {
    opacity: 0.11 !important;
    transition: opacity 0.1s ease-out;
}

/* Restores visibility when hovering over the comment */
.cm-comment:hover {
    opacity: 0.55 !important;
}/* =================================================================v
   CYBERPUNK TARGETED CALLOUTS SNIPPET
   Only affects specific callout tags. Your default callouts stay safe.
   ================================================================ */

/* 1. THE TERMINAL / SYSTEM LOG (> [!terminal] or > [!code]) */
.markdown-rendered .callout[data-callout="terminal"],
.is-live-preview .callout[data-callout="terminal"],
.markdown-rendered .callout[data-callout="code"],
.is-live-preview .callout[data-callout="code"] {
  background-color: rgba(2, 10, 5, 0.9) !important;
  border: 1px solid rgba(0, 255, 102, 0.25) !important;
  border-left-width: 4px !important;
  border-left-color: #00ff66 !important;
  border-radius: 2px !important;
  box-shadow: inset 0 0 15px rgba(0, 255, 102, 0.03), 0 0 8px rgba(0, 255, 102, 0.1);
}
.markdown-rendered .callout[data-callout="terminal"] .callout-title,
.is-live-preview .callout[data-callout="terminal"] .callout-title,
.markdown-rendered .callout[data-callout="code"] .callout-title,
.is-live-preview .callout[data-callout="code"] .callout-title {
  font-family: var(--font-monospace, monospace);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #00ff66 !important;
  background-color: rgba(0, 255, 102, 0.06);
  border-bottom: 1px solid rgba(0, 255, 102, 0.2);
  padding: 6px 10px;
}

/* 2. THE ICE ALERT / WARNING (> [!ice] or > [!warning-cyber]) */
.markdown-rendered .callout[data-callout="ice"],
.is-live-preview .callout[data-callout="ice"],
.markdown-rendered .callout[data-callout="warning-cyber"],
.is-live-preview .callout[data-callout="warning-cyber"] {
  background-color: rgba(12, 2, 5, 0.9) !important;
  border: 1px solid rgba(255, 0, 85, 0.3) !important;
  border-left-width: 4px !important;
  border-left-color: #ff0055 !important;
  border-radius: 2px !important;
  box-shadow: inset 0 0 15px rgba(255, 0, 85, 0.05), 0 0 10px rgba(255, 0, 85, 0.15);
}
.markdown-rendered .callout[data-callout="ice"] .callout-title,
.is-live-preview .callout[data-callout="ice"] .callout-title,
.markdown-rendered .callout[data-callout="warning-cyber"] .callout-title,
.is-live-preview .callout[data-callout="warning-cyber"] .callout-title {
  font-family: var(--font-monospace, monospace);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ff0055 !important;
  background-color: rgba(255, 0, 85, 0.08);
  border-bottom: 1px solid rgba(255, 0, 85, 0.25);
  padding: 6px 10px;
}

/* 3. THE MANIFESTO / INTEL (> [!intel] or > [!manifesto]) */
.markdown-rendered .callout[data-callout="intel"],
.is-live-preview .callout[data-callout="intel"],
.markdown-rendered .callout[data-callout="manifesto"],
.is-live-preview .callout[data-callout="manifesto"] {
  background-color: rgba(10, 10, 2, 0.9) !important;
  border: 1px solid rgba(255, 230, 0, 0.25) !important;
  border-left-width: 4px !important;
  border-left-color: #ffe600 !important;
  border-radius: 2px !important;
  box-shadow: inset 0 0 15px rgba(255, 230, 0, 0.03), 0 0 8px rgba(255, 230, 0, 0.1);
}
.markdown-rendered .callout[data-callout="intel"] .callout-title,
.is-live-preview .callout[data-callout="intel"] .callout-title,
.markdown-rendered .callout[data-callout="manifesto"] .callout-title,
.is-live-preview .callout[data-callout="manifesto"] .callout-title {
  font-family: var(--font-monospace, monospace);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffe600 !important;
  background-color: rgba(255, 230, 0, 0.06);
  border-bottom: 1px solid rgba(255, 230, 0, 0.2);
  padding: 6px 10px;
}

/* 4. THE CORPO / SECURE DROP (> [!corpo] or > [!secure]) */
.markdown-rendered .callout[data-callout="corpo"],
.is-live-preview .callout[data-callout="corpo"],
.markdown-rendered .callout[data-callout="secure"],
.is-live-preview .callout[data-callout="secure"] {
  background-color: rgba(8, 2, 12, 0.9) !important;
  border: 1px solid rgba(157, 0, 255, 0.25) !important;
  border-left-width: 4px !important;
  border-left-color: #9d00ff !important;
  border-radius: 2px !important;
  box-shadow: inset 0 0 15px rgba(157, 0, 255, 0.03), 0 0 8px rgba(157, 0, 255, 0.1);
}
.markdown-rendered .callout[data-callout="corpo"] .callout-title,
.is-live-preview .callout[data-callout="corpo"] .callout-title,
.markdown-rendered .callout[data-callout="secure"] .callout-title,
.is-live-preview .callout[data-callout="secure"] .callout-title {
  font-family: var(--font-monospace, monospace);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #bf40ff !important;
  background-color: rgba(157, 0, 255, 0.06);
  border-bottom: 1px solid rgba(157, 0, 255, 0.2);
  padding: 6px 10px;
}

/* Shared content padding and font safety for these specific callouts */
.markdown-rendered .callout[data-callout="terminal"] .callout-content,
.markdown-rendered .callout[data-callout="code"] .callout-content,
.markdown-rendered .callout[data-callout="ice"] .callout-content,
.markdown-rendered .callout[data-callout="warning-cyber"] .callout-content,
.markdown-rendered .callout[data-callout="intel"] .callout-content,
.markdown-rendered .callout[data-callout="manifesto"] .callout-content,
.markdown-rendered .callout[data-callout="corpo"] .callout-content,
.markdown-rendered .callout[data-callout="secure"] .callout-content {
  color: #d0d0d8;
  padding: 10px 12px;
}
/* =================================================================v
   ULTRA-LEAN MICRO-CYBER CALLOUT (DASHBOARD COMPACT)
   Triggered via: > [!cyber] or > [!cyber]- or > [!cyber]+
   ================================================================ */

.markdown-rendered .callout[data-callout="cyber"],
.is-live-preview .callout[data-callout="cyber"] {
  background-color: #030306 !important;
  background-image: linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px) !important;
  background-size: 100% 4px !important;
  border: 1px solid #00f0ff !important;
  border-left-width: 3px !important;
  border-left-color: #00f0ff !important;
  border-radius: 0px !important;
  box-shadow: 0 0 6px rgba(0, 240, 255, 0.2);
  margin: 2px 0 !important;
  padding: 0 !important;
}

/* Micro Header */
.markdown-rendered .callout[data-callout="cyber"] .callout-title,
.is-live-preview .callout[data-callout="cyber"] .callout-title {
  font-family: var(--font-monospace, monospace) !important;
  font-weight: 700 !important;
  font-size: 0.8em !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #030306 !important;
  background-color: #00f0ff !important;
  border-bottom: 1px solid #00f0ff !important;
  padding: 2px 6px !important;
  min-height: unset !important;
  line-height: 1.2 !important;
}

/* Eradicate default icons */
.markdown-rendered .callout[data-callout="cyber"] .callout-title .callout-icon,
.is-live-preview .callout[data-callout="cyber"] .callout-title .callout-icon {
  display: none !important;
}

/* Tighten collapse caret */
.markdown-rendered .callout[data-callout="cyber"] .callout-fold,
.is-live-preview .callout[data-callout="cyber"] .callout-fold {
  color: #030306 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 2px !important;
}

/* Micro Content Area */
.markdown-rendered .callout[data-callout="cyber"] .callout-content,
.is-live-preview .callout[data-callout="cyber"] .callout-content {
  font-family: var(--font-text) !important;
  font-size: 0.9em !important;
  color: #f0f0f5 !important;
  padding: 4px 6px !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}
/* Converts the summary tag into a full-width clickable banner */
summary.dataview-folder-banner {
    display: block; 
    background-color: #313338;
    color: var(--text-normal);
    padding: 6px 16px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer; 
    margin-top: 8px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    box-sizing: border-box; 
}

/* Hides the default HTML disclosure triangle for a clean banner */
summary.dataview-folder-banner::-webkit-details-marker,
summary.dataview-folder-banner::marker {
    display: none;
}

/* Keeps file names wrapping correctly inside the details block */
.block-language-dataviewjs details ul li,
.block-language-dataviewjs details ul li a.internal-link {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}
/* Indents the nested subfolders from the left margin */
details.dataview-subfolder {
    margin-left: 24px;
}/* Special Divider - Reading Mode */
.markdown-rendered hr {
    border: none !important;
    background-color: transparent !important;
    margin-block-start: .2em;
    margin-block-end: .2em;
}

.markdown-rendered hr::after {
    content: "༺☾═══════◈═══════☽༻" !important;
    display: block !important;
    text-align: center !important;
    font-family: var(--font-monospace) !important;
    color: var(--text-muted) !important;
    font-size: 1.2em !important;
}

/* Special Divider - Live Preview (Native Element Injection) */
.markdown-source-view.mod-cm6 hr {
    border: none !important;
    background-color: transparent !important;
    margin-block-start: .2em !important;
    margin-block-end: .2em !important;
    display: block !important;
    height: auto !important;
}

.markdown-source-view.mod-cm6 hr::after {
    content: "༺☾═══════◈═══════☽༻" !important;
    display: block !important;
    text-align: center !important;
    font-family: var(--font-monospace) !important;
    color: var(--text-muted) !important;
    /* Scales dynamically: 4vw on mobile, maxes out at 1.2rem on tablets/desktop */
    font-size: clamp(0.6rem, 4vw, 1.2rem) !important; 
    white-space: nowrap !important;
    overflow: hidden !important;
}

/* Fallback: Live Preview (Legacy Span Targeting for older Obsidian builds) */
.markdown-source-view.mod-cm6 .cm-line:not(.cm-active) .cm-formatting-hr {
    color: transparent !important;
    display: block !important;
    text-align: center !important;
}

.markdown-source-view.mod-cm6 .cm-line:not(.cm-active) .cm-formatting-hr::after {
    content: "༺☾═══════◈═══════☽༻" !important;
    color: var(--text-muted) !important;
    display: block !important;
    text-align: center !important;
    font-family: var(--font-monospace) !important;
    font-size: clamp(0.6rem, 4vw, 1.2rem) !important;
    visibility: visible !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}
/* 1. Erases properties block */
.markdown-reading-view:has(.moc-board) .metadata-container,
.markdown-source-view:has(.moc-board) .metadata-container {
    display: none !important;
}

/* 2. Erases inline title */
.markdown-reading-view:has(.moc-board) .inline-title,
.markdown-source-view:has(.moc-board) .inline-title {
    display: none !important;
}

/* 3. Blocks mobile OS magnifying glass and native context menus */
.markdown-reading-view:has(.moc-board),
.markdown-source-view:has(.moc-board) {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

/* 4. THE SHIELD: Disables tapping on empty space and text */
.markdown-reading-view:has(.moc-board) .markdown-preview-section,
.markdown-source-view:has(.moc-board) .cm-content {
    pointer-events: none !important;
}

/* 5. PUNCHING HOLES: Re-enables tapping specifically for interactive elements */
/* Reading View elements */
.markdown-reading-view:has(.moc-board) a.internal-link,
.markdown-reading-view:has(.moc-board) a.external-link,
.markdown-reading-view:has(.moc-board) .tag,
.markdown-reading-view:has(.moc-board) .task-list-item-checkbox,
.markdown-reading-view:has(.moc-board) .collapse-indicator,
.markdown-reading-view:has(.moc-board) .callout-title,
/* Live Preview elements */
.markdown-source-view:has(.moc-board) .cm-hmd-internal-link,
.markdown-source-view:has(.moc-board) .cm-link,
.markdown-source-view:has(.moc-board) .cm-url,
.markdown-source-view:has(.moc-board) .cm-hashtag,
.markdown-source-view:has(.moc-board) input[type="checkbox"],
.markdown-source-view:has(.moc-board) .cm-fold-indicator,
.markdown-source-view:has(.moc-board) .callout-title,
.markdown-source-view:has(.moc-board) a.internal-link,
.markdown-source-view:has(.moc-board) a.external-link {
    pointer-events: auto !important;
    cursor: pointer;
}

/* --------------------------------------
   6. CENTER & STYLE HEADINGS 
   (Split to protect Live Preview math)
--------------------------------------- */

/* Reading View: Margins are safe here */
.markdown-reading-view:has(.moc-board) h1,
.markdown-reading-view:has(.moc-board) h2,
.markdown-reading-view:has(.moc-board) h3,
.markdown-reading-view:has(.moc-board) h4,
.markdown-reading-view:has(.moc-board) h5,
.markdown-reading-view:has(.moc-board) h6 {
    text-align: center !important;
    padding-left: -1.75em !important; 
    padding-right: -1.75em !important; 
    margin: 1em 0 !important; 
}

/* Live Preview: MARGINS WILL CRASH THE VIEWPORT. Use padding instead. */
.markdown-source-view:has(.moc-board) .cm-line.HyperMD-header {
    text-align: center !important;
    padding-left: 3em !important; 
    padding-right: 3em !important; 
    padding-top: 1em !important; 
    padding-bottom: 1em !important; 
}

/* --------------------------------------
   7. THE INVISIBLE BUTTON HACK 
--------------------------------------- */

/* --- READING VIEW HACK --- */
/* 1. Trap the arrow inside the actual Obsidian DOM elements */
.markdown-reading-view:has(.moc-board) .el-h1,
.markdown-reading-view:has(.moc-board) .el-h2,
.markdown-reading-view:has(.moc-board) .el-h3,
.markdown-reading-view:has(.moc-board) .el-h4,
.markdown-reading-view:has(.moc-board) .el-h5,
.markdown-reading-view:has(.moc-board) .el-h6 {
    position: relative !important;
}

/* 2. Stretch the arrow, make it invisible, and push it to the top */
.markdown-reading-view:has(.moc-board) .collapse-indicator {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important; 
    z-index: 10 !important; 
}


/* --- LIVE PREVIEW HACK --- */
/* 1. Anchor the gutter element for the specific line */
.markdown-source-view:has(.moc-board) .cm-foldGutter .cm-gutterElement {
    position: relative !important;
}

/* 2. Stretch the gutter's folding arrow to the right, overlaying the editor text */
.markdown-source-view:has(.moc-board) .cm-fold-indicator {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 2000px !important; /* Forces the hit-box to stretch across the screen */
    height: 100% !important;
    opacity: 0 !important; 
    z-index: 10 !important; 
    cursor: pointer !important;
}.markdown-preview-view .image-embed,
.markdown-source-view.mod-cm6 .image-embed {
  display: flex;
  justify-content: center;
}

.markdown-preview-view .image-embed img,
.markdown-source-view.mod-cm6 .image-embed img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
/* Custom hanging indent for all bullets in Reading View */
.markdown-reading-view ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.markdown-reading-view ul li {
  position: relative;
  padding-left: 1.5em;
  text-indent: 0;
}

.markdown-reading-view ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--text-muted);
}
/* =========================================
   INVISIBLE EMPTY HEADINGS (FOLD SPACERS)
   (Bulletproofed to override Advanced Heading Tweaks)
   ========================================= */

/* LIVE PREVIEW: Strips backgrounds, borders, and padding */
.cm-line.HyperMD-header:not(:has(.cm-header:not(.cm-formatting))) {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important; 
    width: 100% !important; /* Overrides the 75% / 60% width on H2/H3 */
}

/* LIVE PREVIEW: Makes the actual hashtags (#) invisible */
.cm-line.HyperMD-header:not(:has(.cm-header:not(.cm-formatting))) .cm-formatting {
    color: transparent !important;
}

/* LIVE PREVIEW: Kills the dotted ::after line on empty H1s */
.cm-line.HyperMD-header-1:not(:has(.cm-header:not(.cm-formatting)))::after {
    display: none !important;
    content: none !important;
}

/* READING VIEW: Strips everything from empty headers */
.markdown-rendered h1:empty, .markdown-rendered h1:has(br),
.markdown-rendered h2:empty, .markdown-rendered h2:has(br),
.markdown-rendered h3:empty, .markdown-rendered h3:has(br),
.markdown-rendered h4:empty, .markdown-rendered h4:has(br),
.markdown-rendered h5:empty, .markdown-rendered h5:has(br),
.markdown-rendered h6:empty, .markdown-rendered h6:has(br) {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: transparent !important;
    padding: 0 !important;
    width: auto !important; /* Overrides the H2/H3 width limits */
    
    /* Reset margins so they don't inherit the slider settings, but keep the whitespace */
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 2em !important; /* Your nice chunk of whitespace */
}

/* READING VIEW: Kills the dotted ::after line on empty H1s */
.markdown-rendered h1:empty::after, 
.markdown-rendered h1:has(br)::after {
    display: none !important;
    content: none !important;
}

/* Hides the bookmark status icon in the active tab header */
.view-header-title-container .view-header-icon.is-bookmarked,
.view-header .clickable-icon[aria-label*="Bookmark"] {
    display: none !important;
}

/* Target ONLY tables that contain the #log tag */
table:has(.tag[href="#log"]) {
    border: none !important;
    width: 100%;
}

/* 1. Pull the table into the left margin to give the text more room */
table:has(.tag[href="#log"]) {
    border: none !important;
    /*width: 105%; /* Makes the table wider than the normal reading view */
    margin-left: -2.5%; /* Pulls the extra width out into the left margin */
}

/* Hide the table header completely */
table:has(.tag[href="#log"]) thead {
    display: none;
}

/* Remove borders, backgrounds, and align text to the top */
table:has(.tag[href="#log"]) td {
    border: none !important;
    background-color: transparent !important;
    vertical-align: top;
    padding: 6px 0px;
}

/* Style the FIRST column (The Timestamp) */
table:has(.tag[href="#log"]) td:first-child 
    {
    white-space: nowrap; 
    /*font-style: strong;*/
    width: min-content; /* Hugs the text horizontally as tight as possible */
    padding-left: 0px !important; /* Removes Obsidian's default left padding */
    padding-right: 0px !important; /* Adjust this to change the gap between the time and the text */
    color: var(--text-muted);
    letter-spacing: -0.98px; /* Pulls the characters closer together horizontally */
    /*font-size: 0.85em; /* Shrinks the timestamp text */
    }

/* Style the SECOND column (The Log Entry) */
table:has(.tag[href="#log"]) td:nth-child(2) {
    width: 99%; 
    font-style: italic;
    padding-left: 0px !important;
    padding-right: 0px !important;
    line-height: 1.35;
}


/* custom-margins.css */

/* Narrower options for focused reading */
.margin50ch { --file-line-width: 50ch; }
.margin60ch { --file-line-width: 60ch; }

/* The standard mid-range */
.margin70ch { --file-line-width: 70ch; }
.margin80ch { --file-line-width: 80ch; }

/* Wider options for heavy data, tables, or code */
.margin90ch { --file-line-width: 90ch; }
.margin100ch { --file-line-width: 100ch; }
.margin120ch { --file-line-width: 120ch; }

/* Maximum width (uses the full window, bypassing the limit) */
.margin-full { --file-line-width: 100%; }

/* @settings
name: Bold & Underscore Tweaks
id: bold-underscore-tweaks
settings:
    - id: toggle-bold-underline
      title: Underline Bold Text
      description: Turn on to automatically underline all bold words and letters.
      type: class-toggle
      add-to-body: true
      default: true
    - id: underscore-opacity
      title: Underscore Visibility
      description: Adjust how visible or invisible formatting punctuation is.
      type: variable-number-slider
      default: 0.2
      min: 0
      max: 10
      step: 0.1
      format: "0.0"
*/

/* --- 1. Underline Bold Text --- */
/* This triggers only if the toggle is turned ON in Style Settings */
body.toggle-bold-underline .cm-strong, 
body.toggle-bold-underline strong {
    text-decoration: underline;
    text-underline-offset: 3px; 
}

/* --- 2. Slidable Underscore Visibility --- */
/* Maps your Style Settings slider variable so the rest of the CSS can use it */
body {
    --underscore-alpha: var(--underscore-opacity, 0.2);
}

/* Dim Markdown formatting characters using your slider's variable */
.cm-s-obsidian span.cm-formatting-em,
.cm-s-obsidian span.cm-formatting-strong {
    opacity: var(--underscore-alpha); 
    transition: opacity 0.2s ease-in-out; 
}

/* Make them fully visible again when your cursor is actively on that line */
.cm-active span.cm-formatting-em,
.cm-active span.cm-formatting-strong {
    opacity: 1.0; 
}/* Only affects the mobile app */
.is-mobile .suggestion-item {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 13px;
    border-bottom: 1px solid var(--background-modifier-border);
}

.is-mobile .suggestion-item-content {
    white-space: normal; /* Allows long list names to wrap instead of cutting off */
}
/* @settings
name: Readable Line Length
id: readable-line-width-config
settings:
  - 
    id: file-line-width
    title: Line Width Options
    description: Choose a preset typographical width.
    type: variable-select
    default: 60ch
    options:
      - label: Multi Column Narrow (45 Characters)
        value: 45ch
      - label: Web "Optimal" Narrow (50 Characters)
        value: 50ch
      - label: Web "Optimal" (60 Characters)
        value: 60ch
      - label: All Types "Optimal"? (66 Characters)
        value: 66ch
      - label: Big Dense Fantasy Paperback start (70ch)
        value: 70ch
      - label: Bigger (75)
        value: 75ch
      - label: Maximum good (80ch), min 12pt TimesNewRoman
        value: 80ch
      - label: Max(ish) Fat Paperback (85ch)
        value: 85ch
      - label: Max Word Doc (90ch), 12pt TimesNewRoman
        value: 90ch
*/
body { --file-line-width: 60ch; /* Exactly 66 characters wide */ }
/*
RippleText
RippleTextFast
RippleTextSlow
ani + ____ "anishiver" or "ani3d"
	3d
	base
	dizzy
	flip
	pop
	shiver
	sticker
	wave
		wave
		waveslow
		waveintense
	jitter
	jitterfast
	
NeonSign
LootText
RedactedText

*/

/* =========================================
   MASTER FONT OVERRIDE
   Forces GNU Unifont across all views
========================================= */
:is(.RippleText, .RippleTextFast, .RippleTextSlow, .anibase, .anisticker, .ani3d, .anishiver, .anipop, .aniwave, .aniwaveslow, .aniwaveintense, .anijitter, .anijitterfast, .anidizzy, .aniflip),
:is(.RippleText, .RippleTextFast, .RippleTextSlow) span {
    font-family: "GNU Unifont", "Unifont", monospace !important;
}

/* =========================================
   Paper Mario Wavy Text Effect
========================================= */

:root {
    --BounceHeight: -6px;
    --SpeedNormal: 1s;
    --SpeedFast: 0.4s;
    --SpeedSlow: 2s;
}

/* Base container setup for all speeds */
:is(.RippleText, .RippleTextFast, .RippleTextSlow) {
    display: inline-block;
    white-space: pre; 
}

/* Base span setup and default Normal animation */
:is(.RippleText, .RippleTextFast, .RippleTextSlow) span {
    display: inline-block;
    animation: RippleBounce var(--SpeedNormal) infinite ease-in-out;
}

/* Speed Overrides */
.RippleTextFast span {
    animation-duration: var(--SpeedFast);
}

.RippleTextSlow span {
    animation-duration: var(--SpeedSlow);
}

/* The Keyframe Animation */
@keyframes RippleBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(var(--BounceHeight)); }
}

/* Staggering the animation delay for the wave effect */
:is(.RippleText, .RippleTextFast, .RippleTextSlow) span:nth-child(1) { animation-delay: -1.0s; }
:is(.RippleText, .RippleTextFast, .RippleTextSlow) span:nth-child(2) { animation-delay: -0.9s; }
:is(.RippleText, .RippleTextFast, .RippleTextSlow) span:nth-child(3) { animation-delay: -0.8s; }
:is(.RippleText, .RippleTextFast, .RippleTextSlow) span:nth-child(4) { animation-delay: -0.7s; }
:is(.RippleText, .RippleTextFast, .RippleTextSlow) span:nth-child(5) { animation-delay: -0.6s; }
:is(.RippleText, .RippleTextFast, .RippleTextSlow) span:nth-child(6) { animation-delay: -0.5s; }
:is(.RippleText, .RippleTextFast, .RippleTextSlow) span:nth-child(7) { animation-delay: -0.4s; }
:is(.RippleText, .RippleTextFast, .RippleTextSlow) span:nth-child(8) { animation-delay: -0.3s; }
:is(.RippleText, .RippleTextFast, .RippleTextSlow) span:nth-child(9) { animation-delay: -0.2s; }
:is(.RippleText, .RippleTextFast, .RippleTextSlow) span:nth-child(10) { animation-delay: -0.1s; }
:is(.RippleText, .RippleTextFast, .RippleTextSlow) span:nth-child(11) { animation-delay: 0.0s; }
:is(.RippleText, .RippleTextFast, .RippleTextSlow) span:nth-child(12) { animation-delay: 0.1s; }
:is(.RippleText, .RippleTextFast, .RippleTextSlow) span:nth-child(13) { animation-delay: 0.2s; }
:is(.RippleText, .RippleTextFast, .RippleTextSlow) span:nth-child(14) { animation-delay: 0.3s; }
:is(.RippleText, .RippleTextFast, .RippleTextSlow) span:nth-child(15) { animation-delay: 0.4s; }
:is(.RippleText, .RippleTextFast, .RippleTextSlow) span:nth-child(16) { animation-delay: 0.5s; }
:is(.RippleText, .RippleTextFast, .RippleTextSlow) span:nth-child(17) { animation-delay: 0.6s; }
:is(.RippleText, .RippleTextFast, .RippleTextSlow) span:nth-child(18) { animation-delay: 0.7s; }
:is(.RippleText, .RippleTextFast, .RippleTextSlow) span:nth-child(19) { animation-delay: 0.8s; }
:is(.RippleText, .RippleTextFast, .RippleTextSlow) span:nth-child(20) { animation-delay: 0.9s; }
/* =========================================
   Loading Wave Text Effect
========================================= */

:root {
    --LoadingBounceHeight: -6px; /* Increased height for more movement */
    --LoadingSpeed: 3.5s; /* Longer duration creates the pause at the end */
}

/* Include font override for the new class */
.LoadingWaveText,
.LoadingWaveText span {
    font-family: "GNU Unifont", "Unifont", monospace !important;
}

.LoadingWaveText {
    display: inline-block;
    white-space: pre; 
}

.LoadingWaveText span {
    display: inline-block;
    animation: LoadingBounce var(--LoadingSpeed) infinite ease-in-out;
}

/* 
   Squishing the jump into the first 12% of the animation creates 
   a ~0.42s jump window. The rest of the time (12% to 100%) is the wait.
*/
@keyframes LoadingBounce {
    0%, 12%, 100% { transform: translateY(0); }
    6% { transform: translateY(var(--LoadingBounceHeight)); }
}

/* 
   Positive delays ensure the letters fire sequentially.
   The wave finishes around 2.3s, leaving a clean pause before looping.
*/
.LoadingWaveText span:nth-child(1) { animation-delay: 0.0s; }
.LoadingWaveText span:nth-child(2) { animation-delay: 0.1s; }
.LoadingWaveText span:nth-child(3) { animation-delay: 0.2s; }
.LoadingWaveText span:nth-child(4) { animation-delay: 0.3s; }
.LoadingWaveText span:nth-child(5) { animation-delay: 0.4s; }
.LoadingWaveText span:nth-child(6) { animation-delay: 0.5s; }
.LoadingWaveText span:nth-child(7) { animation-delay: 0.6s; }
.LoadingWaveText span:nth-child(8) { animation-delay: 0.7s; }
.LoadingWaveText span:nth-child(9) { animation-delay: 0.8s; }
.LoadingWaveText span:nth-child(10) { animation-delay: 0.9s; }
.LoadingWaveText span:nth-child(11) { animation-delay: 1.0s; }
.LoadingWaveText span:nth-child(12) { animation-delay: 1.1s; }
.LoadingWaveText span:nth-child(13) { animation-delay: 1.2s; }
.LoadingWaveText span:nth-child(14) { animation-delay: 1.3s; }
.LoadingWaveText span:nth-child(15) { animation-delay: 1.4s; }
.LoadingWaveText span:nth-child(16) { animation-delay: 1.5s; }
.LoadingWaveText span:nth-child(17) { animation-delay: 1.6s; }
.LoadingWaveText span:nth-child(18) { animation-delay: 1.7s; }
.LoadingWaveText span:nth-child(19) { animation-delay: 1.8s; }
.LoadingWaveText span:nth-child(20) { animation-delay: 1.9s; }

/* ==========================================
   1. CORE BASE DESIGN STYLES
   ========================================== */

/* The Standard Paper Mario Font Aesthetic */
.anibase {
  display: inline-block !important;
  font-weight: 900;
  text-shadow: 3px 3px 0px #000;
  transform-origin: center center;
}

/* Sticker Look: Adds a crisp, thick cartoon border */
.anisticker {
  display: inline-block !important;
  font-weight: 900;
  color: #fff;
  text-shadow: 
    -2px -2px 0 #000,  2px -2px 0 #000, -2px  2px 0 #000,  2px  2px 0 #000,
    -3px  0px 0 #000,  3px  0px 0 #000,  0px -3px 0 #000,  0px  3px 0 #000,
     4px  4px 0px rgba(0,0,0,0.3);
}

/* Retro 3D Extrusion: Simulates chunky, thick plastic/cardboard text */
.ani3d {
  display: inline-block !important;
  font-weight: 900;
  text-shadow: 
    1px 1px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000, 
    4px 4px 0 #000, 5px 5px 0 #000, 6px 6px 0px rgba(0,0,0,0.4);
}

/* Shiver / Fear Jitter */
@keyframes pmShiver {
  0% { transform: translate(-1px, 0); text-shadow: 2px 3px 0 #000; }
  100% { transform: translate(1px, 0); text-shadow: 4px 3px 0 #000; }
}
.anishiver {
  display: inline-block !important;
  animation: pmShiver 0.05s linear infinite alternate;
}

/* Item Pop / Flash */
@keyframes pmPop {
  0% { transform: scale(1); color: #ffcc00; }
  100% { transform: scale(1.1); color: #ff3300; }
}
.anipop {
  display: inline-block !important;
  text-shadow: 2px 2px 0px #000;
  animation: pmPop 0.3s ease-in-out infinite alternate;
}

/* ==========================================
   2. REUSABLE ANIMATION KEYFRAMES
   ========================================== */

@keyframes pmTrueWave {
  0% { 
    transform: translateY(0px) rotate(-1.5deg); 
    text-shadow: 3px 3px 0 #000; 
  }
  25% { 
    transform: translateY(-5px) rotate(0deg); 
    text-shadow: 3px 7px 0 #000; 
  }
  50% { 
    transform: translateY(0px) rotate(1.5deg); 
    text-shadow: 3px 3px 0 #000; 
  }
  75% { 
    transform: translateY(5px) rotate(0deg); 
    text-shadow: 3px -1px 0 #000; 
  }
  100% { 
    transform: translateY(0px) rotate(-1.5deg); 
    text-shadow: 3px 3px 0 #000; 
  }
}

/* Base modifications for the wave classes */
.aniwave, .aniwaveslow, .aniwaveintense {
  display: inline-block !important;
  transform-origin: 50% 50% !important; 
}

/* Chaotic Jitter Engine */
@keyframes pmJitter {
  0% { transform: translate(0, 0); text-shadow: 2px 2px 0 #000; }
  20% { transform: translate(-2px, 1px); text-shadow: 4px 1px 0 #000; }
  40% { transform: translate(1px, -2px); text-shadow: 1px 4px 0 #000; }
  60% { transform: translate(-1px, -1px); text-shadow: 3px 3px 0 #000; }
  80% { transform: translate(2px, 2px); text-shadow: 1px 1px 0 #000; }
  100% { transform: translate(-1px, 2px); text-shadow: 4px 2px 0 #000; }
}

/* Dizzy / Confused Swirl */
@keyframes pmDizzy {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(5deg) scale(0.95); text-shadow: 5px 1px 0 #000; }
  100% { transform: rotate(-5deg) scale(1.05); text-shadow: 1px 5px 0 #000; }
}

/* 2D Paper Flip */
@keyframes pmFlip {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(90deg); filter: brightness(0.7); }
  100% { transform: rotateY(0deg); }
}

/* ==========================================
   3. SPECIFIC ANIMATION CLASSES
   ========================================== */

/* --- Category A: Wave Modifiers --- */
.aniwave {
  animation: pmTrueWave 0.8s ease-in-out infinite;
}
.aniwaveslow {
  animation: pmTrueWave 1.6s ease-in-out infinite;
}
.aniwaveintense {
  animation: pmTrueWave 0.4s ease-in-out infinite;
}

/* --- Category B: Jitter Modifiers --- */
.anijitter {
  display: inline-block !important;
  animation: pmJitter 0.30s linear infinite;
}
.anijitterfast {
  display: inline-block !important;
  animation: pmJitter 0.05s linear infinite;
}

/* --- Category C: Unique Text Statuses --- */
.anidizzy {
  display: inline-block !important;
  animation: pmDizzy 1.2s ease-in-out infinite alternate;
}
.aniflip {
  display: inline-block !important;
  animation: pmFlip 2s ease-in-out infinite;
}




/* Holographic Shimmer */
.LootText {
    background: linear-gradient(
        90deg, 
        #ff5e00, #ff0080, #bf00ff, #00e5ff, #00ff55, #ffcc00, #ff5e00
    );
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: ShimmerEffect 3s linear infinite;
    font-weight: 900;
    display: inline-block;
}

@keyframes ShimmerEffect {
    to { background-position: 200% center; }
}
/* Redacted / Hover Reveal */
.RedactedText {
    background-color: var(--text-normal);
    color: transparent;
    border-radius: 3px;
    padding: 0 4px;
    transition: all 0.3s ease;
    user-select: none; 
}

.RedactedText:hover {
    background-color: #222; 
    color: #fff; 
    text-shadow: none;
}


/* Neon Glow & Flicker */
.NeonSign {
    color: #fff;
    text-shadow:
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #0ff, 
        0 0 40px #0ff,
        0 0 80px #0ff;
    animation: NeonFlicker 3s infinite alternate;
    display: inline-block;
}

@keyframes NeonFlicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        opacity: 1;
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #0ff, 0 0 40px #0ff, 0 0 80px #0ff;
    }
    20%, 24%, 55% {
        opacity: 0.4;
        text-shadow: none;
    }
}



/* Cyberpunk Glitch Effect */
.GlitchText {
    display: inline-block;
    position: relative;
    color: var(--text-normal);
    font-weight: 900;
    /* Needs a solid background to block the original text during the glitch */
    background-color: var(--background-primary); 
}

.GlitchText::before,
.GlitchText::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-primary);
}

.GlitchText::before {
    left: 2px;
    text-shadow: -1px 0 red;
    clip: rect(24px, 550px, 90px, 0);
    animation: GlitchAnim 3s infinite linear alternate-reverse;
}

.GlitchText::after {
    left: -2px;
    text-shadow: -1px 0 cyan;
    clip: rect(85px, 550px, 140px, 0);
    animation: GlitchAnim 2.5s infinite linear alternate-reverse;
}

@keyframes GlitchAnim {
    0% { clip: rect(10px, 9999px, 83px, 0); transform: skew(0.5deg); }
    5% { clip: rect(69px, 9999px, 46px, 0); transform: skew(0.2deg); }
    10% { clip: rect(13px, 9999px, 98px, 0); transform: skew(0.8deg); }
    15% { clip: rect(98px, 9999px, 20px, 0); transform: skew(0.1deg); }
    20% { clip: rect(32px, 9999px, 12px, 0); transform: skew(0.9deg); }
    25%, 100% { clip: rect(0, 0, 0, 0); transform: skew(0deg); }
}
/* 1980s Synthwave Chrome */
.RetroWaveText {
    display: inline-block;
    font-weight: 900;
    background: linear-gradient(
        to bottom, 
        #00d2ff 0%, 
        #3a7bd5 48%, 
        #ffffff 50%, /* The chrome reflection line */
        #ff00c8 52%, 
        #2a0845 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0px 2px 2px rgba(255, 0, 200, 0.4));
}
/* Floating Ghost / Memory Text */
.GhostText {
    display: inline-block;
    color: #e0f7fa; /* Pale ghostly blue */
    font-weight: bold;
    animation: SpiritFloat 4s ease-in-out infinite;
}

@keyframes SpiritFloat {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.6;
        text-shadow: 0 0 5px rgba(224, 247, 250, 0.4);
        filter: blur(0.5px);
    }
    50% {
        transform: translateY(-4px);
        opacity: 0.9;
        text-shadow: 0 0 15px rgba(224, 247, 250, 0.8), 0 0 30px rgba(224, 247, 250, 0.5);
        filter: blur(0px);
    }
}



















/* Pesterchum Rainbow Strobe */
.TrollStrobeText {
    display: inline-block;
    font-family: "Courier New", Courier, monospace !important;
    font-weight: bold;
    animation: RainbowStrobe 0.5s infinite;
}

@keyframes RainbowStrobe {
    0%   { color: #ff0000; }
    16%  { color: #ff9900; }
    33%  { color: #ffff00; }
    50%  { color: #00ff00; }
    66%  { color: #00ffff; }
    83%  { color: #0000ff; }
    100% { color: #ff00ff; }
}
/* Violent Webcomic Shaking */
.RageQuakeText {
    display: inline-block;
    font-weight: 900;
    color: #ff0000;
    text-transform: uppercase;
    text-shadow: 2px 2px 0px #000;
    animation: PureRage 0.6s infinite;
}

@keyframes PureRage {
    0%   { transform: translate(2px, 1px) rotate(0deg); }
    10%  { transform: translate(-1px, -2px) rotate(-2deg); }
    20%  { transform: translate(-3px, 0px) rotate(2deg); }
    30%  { transform: translate(0px, 3px) rotate(0deg); }
    40%  { transform: translate(2px, -1px) rotate(2deg); }
    50%  { transform: translate(-1px, 2px) rotate(-2deg); }
    60%  { transform: translate(-3px, 1px) rotate(0deg); }
    70%  { transform: translate(3px, 1px) rotate(-2deg); }
    80%  { transform: translate(-1px, -1px) rotate(2deg); }
    90%  { transform: translate(2px, 3px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-2deg); }
}
/* Early 2000s WordArt Vibe */
.ClassicWordArtText {
    display: inline-block;
    font-family: "Impact", sans-serif !important;
    font-size: 1.3em;
    background: linear-gradient(180deg, #ff0000, #ffff00, #0000ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* We use drop-shadow instead of text-shadow so it applies to the clipped gradient */
    filter: drop-shadow(2px 2px 0px #000) drop-shadow(-1px -1px 0px #fff);
    transform: skewY(-8deg) scaleY(1.3);
    margin: 5px 10px; /* Needs a little breathing room so it doesn't clip */
}
/* DDLC - Sudden Script Corruption */
.CorruptedScriptText {
    display: inline-block;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    animation: ScriptGlitch 4s infinite;
}

@keyframes ScriptGlitch {
    0%, 93%, 100% { 
        transform: none; 
        color: inherit; 
        background: transparent; 
        letter-spacing: normal; 
    }
    94% { 
        transform: skewX(-20deg); 
        color: #000; 
        background: #fff; 
        letter-spacing: 4px; 
    }
    96% { 
        transform: skewX(15deg) translate(2px, -3px); 
        color: #ff0000; 
        background: #000; 
        text-shadow: 2px 0 #0ff, -2px 0 #f00;
    }
    98% { 
        transform: skewX(-5deg); 
        color: inherit; 
        background: transparent; 
    }
}
/* OneShot - The Entity Speaking Directly to the Player */
.EntityTerminalText {
    display: inline-block;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #f7d51d; /* World Machine Gold */
    text-shadow: 0 0 4px rgba(247, 213, 29, 0.6);
    animation: EntityBreathe 3.5s ease-in-out infinite alternate;
}

@keyframes EntityBreathe {
    0% { 
        opacity: 0.8; 
        filter: brightness(0.9);
        text-shadow: 0 0 2px rgba(247, 213, 29, 0.5); 
    }
    100% { 
        opacity: 1; 
        filter: brightness(1.2);
        text-shadow: 0 0 8px #f7d51d, 0 0 15px rgba(247, 213, 29, 0.8); 
    }
}
/* Undertale - Genocide / Void Text */
.AbyssCreepText {
    display: inline-block;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #cc0000;
    text-shadow: 1px 1px 0px #000;
    /* We use both and forwards so the animation resets seamlessly */
    animation: CreepingVoid 6s linear infinite alternate;
}

@keyframes CreepingVoid {
    0% { 
        letter-spacing: 0px; 
        filter: blur(0px); 
        opacity: 1; 
    }
    100% { 
        letter-spacing: 8px; 
        filter: blur(1.5px); 
        opacity: 0.6; 
    }
}


/* Cave Story - Red Flower / Demon Crown Corruption */
.DemonFlowerText {
    display: inline-block;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    animation: MutationPulse 4s infinite;
}

@keyframes MutationPulse {
    0%, 75%, 100% { 
        color: inherit; 
        text-shadow: none; 
        transform: translate(0, 0); 
    }
    78% { 
        color: #ff0000; 
        text-shadow: 0 0 5px #ff0000, 2px 2px 0px #8b0000; 
        transform: translate(-1.5px, 1.5px); 
    }
    81% { 
        transform: translate(1.5px, -1.5px) skewX(5deg); 
    }
    84% { 
        color: #ff0000; 
        transform: translate(-1px, 0px) skewX(-5deg); 
    }
    87% { 
        color: inherit; 
        text-shadow: none; 
        transform: translate(0, 0); 
    }
}
/* Cave Story - The Core / System Malfunction */
.SystemCoreText {
    display: inline-block;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #00ffff;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.8);
    animation: CoreFlicker 6s infinite;
}

@keyframes CoreFlicker {
    0%, 42%, 48%, 100% { 
        color: #00ffff; 
        text-shadow: 0 0 5px rgba(0, 255, 255, 0.8); 
        transform: none; 
    }
    44%, 46% { 
        color: #ff0044; 
        text-shadow: 0 0 8px #ff0044, 0 0 15px #ff0000; 
        transform: skewX(-8deg); 
    }
}

/* Undertale - Gaster / Void Entity */
.ScatteredVoidText {
    display: inline-block;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #a0a0a0;
    animation: VoidDescent 5s infinite;
}

@keyframes VoidDescent {
    0% { 
        filter: blur(0px); 
        opacity: 1; 
        transform: translateY(0); 
        letter-spacing: normal; 
    }
    70% { 
        filter: blur(3px); 
        opacity: 0.3; 
        transform: translateY(6px); 
        letter-spacing: 6px; 
    }
    95% { 
        filter: blur(6px); 
        opacity: 0; 
        transform: translateY(10px); 
        letter-spacing: 10px; 
    }
    100% { 
        filter: blur(0px); 
        opacity: 1; 
        transform: translateY(0); 
        letter-spacing: normal; 
    }
}

/* Bad Connection / Frame-Skipping Stutter */
.NetrunnerStutterText {
    display: inline-block;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #00ffcc;
    /* step-end forces hard cuts between keyframes, no smooth gliding */
    animation: CyberStutter 2s infinite step-end; 
}

@keyframes CyberStutter {
    0% { transform: translate(0px, 0px); opacity: 1; text-shadow: none; }
    10% { transform: translate(-2px, 1px); opacity: 0.8; text-shadow: 2px 0px 0px #ff0055; }
    15% { transform: translate(2px, -2px); opacity: 1; text-shadow: none; }
    18% { transform: translate(0px, 0px); opacity: 0.4; }
    20% { transform: translate(-1px, 2px); opacity: 1; text-shadow: -2px 0px 0px #00ffff; }
    25%, 100% { transform: translate(0px, 0px); opacity: 1; text-shadow: none; }
}
/* Violent High-Voltage Neon Flicker */
.OverclockedNeonText {
    display: inline-block;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #fff;
    /* step-start makes the color and glow changes immediate and hostile */
    animation: NeonSurge 0.6s infinite step-start;
}

@keyframes NeonSurge {
    0% { 
        text-shadow: 0 0 4px #ff00ff, 0 0 8px #ff00ff; 
        color: #fff; 
    }
    20% { 
        text-shadow: 0 0 2px #ff00ff; 
        color: #ff99ff; 
        transform: skewX(-5deg); 
    }
    40% { 
        text-shadow: 0 0 10px #ff00ff, 0 0 20px #00ffff, 0 0 40px #00ffff; 
        color: #fff; 
        transform: skewX(5deg); 
    }
    60% { 
        /* The tube briefly dies */
        text-shadow: none; 
        color: #220022; 
        transform: none; 
    }
    80% { 
        text-shadow: 0 0 5px #ff00ff, 0 0 15px #ff00ff; 
        color: #fff; 
    }
    100% { 
        text-shadow: 0 0 4px #ff00ff, 0 0 8px #ff00ff; 
        color: #fff; 
    }
}
/* Hostile Code Injection / Block Glitch */
.TerminalBreachText {
    display: inline-block;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    background-color: #39ff14; /* Acid Terminal Green */
    color: #000;
    padding: 0 4px;
    /* steps(3, end) breaks the animation into exactly 3 choppy frames */
    animation: DataBreachBlock 0.9s infinite steps(3, end);
}

@keyframes DataBreachBlock {
    0% { 
        background-color: #39ff14; 
        color: #000; 
        transform: scaleX(1); 
    }
    33% { 
        background-color: #000; 
        color: #39ff14; 
        transform: scaleX(1.02); 
    }
    66% { 
        background-color: #ff003c; /* Cyberpunk Red */
        color: #fff; 
        transform: scaleX(0.98); 
    }
    100% { 
        background-color: #39ff14; 
        color: #000; 
        transform: scaleX(1); 
    }
}

/* Ghostly Typewriter Reveal */

/* The trigger zone */
.PoltergeistContainer {
    display: inline-block;
    border-bottom: 1px dotted #444; /* A subtle hint that something is here */
    cursor: text;
}

/* The hidden text */
.PoltergeistText {
    display: inline-block;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #ff5555; /* Unsettling pale red */
    text-shadow: 2px 2px 0px #330000;
    /* Uses a clip-path to slice the text down to 0% width initially */
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    /* This makes it chop out in 15 rough steps */
    transition: clip-path 1.5s steps(15, end); 
}

/* When the container is hovered, the text reveals itself */
.PoltergeistContainer:hover .PoltergeistText {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Corrupted Save File / Static Block */
.StaticMemoryText {
    display: inline-block;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    /* Hide the actual text, show a fuzzy grey shadow */
    color: transparent;
    text-shadow: 0px 0px 4px rgba(150, 150, 150, 0.9);
    cursor: crosshair;
    /* The step-end makes it snap rather than fade */
    transition: color 0.4s step-end, text-shadow 0.4s step-end;
}

.StaticMemoryText:hover {
    color: #c4f3ff; /* Pale ghost-tech blue */
    text-shadow: none;
    /* Instantly reveals the text on hover */
    transition: color 0.1s step-start, text-shadow 0.1s step-start;
}/* Eerie Slow-Focus Hover Reveal */
.PhantomRevealText {
    display: inline-block;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: rgba(255, 255, 255, 0.15); /* Barely visible */
    filter: blur(3px);
    letter-spacing: 6px;
    cursor: help; /* Changes the mouse icon to a question mark */
    transition: all 1.5s ease-in-out;
}

.PhantomRevealText:hover {
    color: rgba(255, 255, 255, 0.9);
    filter: blur(0px);
    letter-spacing: normal;
    text-shadow: 0 0 10px rgba(200, 220, 255, 0.6);
}
/* ==========================================
   RETRO CYBERPUNK / CREEPYPASTA EFFECTS
   ========================================== */

/* 1. Sentient Glitch (Haunted Chromatic Aberration) */
.SentientGlitchText {
    display: inline-block;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #d3d3d3;
    /* steps(4) makes it chunky and unsettling instead of smooth */
    animation: GhostAberration 4s infinite steps(4, end);
}

@keyframes GhostAberration {
    0%, 100% { 
        text-shadow: 0 0 0 rgba(255, 0, 0, 0.5), 0 0 0 rgba(0, 255, 255, 0.5); 
        transform: none; 
    }
    25% { 
        text-shadow: -2px 0 0 rgba(200, 0, 0, 0.7), 2px 0 0 rgba(0, 200, 200, 0.7); 
        transform: skewX(1deg); 
    }
    50% { 
        text-shadow: 3px 1px 0 rgba(255, 0, 0, 0.4), -3px -1px 0 rgba(0, 255, 255, 0.4); 
        transform: skewX(-1deg); 
        color: #fff; 
    }
    75% { 
        text-shadow: -1px -1px 0 rgba(150, 0, 0, 0.8), 1px 1px 0 rgba(0, 150, 150, 0.8); 
        transform: none; 
        color: #aaa; 
    }
}

/* 2. Deleted Entity (Blood Scanline) */
.DeletedEntityText {
    display: inline-block;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #555; /* Dead gray */
    position: relative;
    background: linear-gradient(180deg, transparent 0%, rgba(139, 0, 0, 0.9) 50%, transparent 100%);
    background-size: 100% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: PurgeScanline 5s linear infinite;
}

@keyframes PurgeScanline {
    0% { 
        background-position: 0% -100%; 
        text-shadow: 0 0 2px rgba(255, 0, 0, 0); 
    }
    50% { 
        background-position: 0% 100%; 
        text-shadow: 0 0 5px rgba(139, 0, 0, 0.5); 
        color: #222; /* Darkens the text as the scanline passes */
    }
    100% { 
        background-position: 0% 300%; 
        text-shadow: 0 0 2px rgba(255, 0, 0, 0); 
    }
}

/* 3. Cursed Terminal (Data Bleed) */
.CursedTerminalText {
    display: inline-block;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #39ff14; /* Acid green */
    animation: DataBleed 6s ease-in-out infinite;
}

@keyframes DataBleed {
    0%, 100% {
        text-shadow: 0 0 4px #39ff14;
        transform: translateY(0);
        opacity: 1;
    }
    40% {
        /* The glow drags heavily downward like wet paint */
        text-shadow: 0 4px 6px #005500, 0 8px 10px rgba(0, 50, 0, 0.5);
        transform: translateY(1px);
        opacity: 0.6;
    }
    42% {
        /* A harsh, tiny glitch right before it repairs itself */
        text-shadow: 2px 0 0px #39ff14, -2px 0 0px #000;
        opacity: 0.9;
        transform: skewX(-4deg);
    }
}
/* ==========================================
   ABANDONED MAINFRAME / HAUNTED HARDWARE
   ========================================== */

/* 1. Memory Leak (Choppy Vertical Melt) */
.MemoryLeakText {
    display: inline-block;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #ffaa00; /* System warning orange */
    animation: LeakData 5s infinite steps(5, end);
    transform-origin: top; /* Makes it melt downward */
}

@keyframes LeakData {
    0% { transform: scaleY(1); color: #ffaa00; opacity: 1; }
    40% { transform: scaleY(1.1) translateY(2px); color: #aa5500; opacity: 0.8; }
    60% { transform: scaleY(1.3) translateY(4px); color: #552200; opacity: 0.5; filter: blur(1px); }
    80% { transform: scaleY(1.5) translateY(6px); color: #220000; opacity: 0.2; filter: blur(2px); }
    85% { transform: scaleY(1); color: #ff0000; opacity: 1; text-shadow: 2px 0 0 red; } /* Harsh snap back */
    100% { transform: scaleY(1); color: #ffaa00; opacity: 1; }
}

/* 2. Kill Screen (Arcade Horizontal Tearing) */
.KillScreenText {
    display: inline-block;
    position: relative;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #9900ff; /* Bruised purple */
}

.KillScreenText::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    color: #ff00ff;
    /* Cuts a thin horizontal slice out of the middle of the text */
    clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%); 
    animation: TearScreen 3s infinite steps(3, end);
}

@keyframes TearScreen {
    0%, 100% { transform: translateX(0); opacity: 0; }
    10% { transform: translateX(-3px); opacity: 1; }
    15% { transform: translateX(4px); opacity: 0.8; filter: invert(1); }
    20% { transform: translateX(0); opacity: 0; }
    60% { transform: translateX(2px); opacity: 1; text-shadow: -2px 0 cyan; }
    65% { transform: translateX(-2px); opacity: 0; }
}

/* 3. Haunted Output (Claustrophobic Crushing) */
.HauntedOutputText {
    display: inline-block;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #aaccff; /* Cold, dead digital blue */
    animation: CrushWords 7s infinite steps(4, end);
}

@keyframes CrushWords {
    0%, 100% { 
        letter-spacing: normal; 
        opacity: 1; 
        text-shadow: 0 0 4px rgba(170, 204, 255, 0.5); 
    }
    20% { 
        letter-spacing: -1px; 
        opacity: 0.8; 
    }
    40% { 
        /* The text gets squeezed together */
        letter-spacing: -3px; 
        opacity: 0.5; 
        transform: skewX(2deg); 
    }
    45% { 
        /* Sudden violent burst outward */
        letter-spacing: 5px; 
        opacity: 1; 
        color: #fff; 
        text-shadow: 0 0 10px #fff; 
        transform: skewX(-10deg); 
    }
    50% { 
        letter-spacing: normal; 
        opacity: 0.2; 
    }
    80% { 
        opacity: 0.9; 
    }
}
/* ==========================================
   ABANDONED MAINFRAME / HAUNTED HARDWARE
   ========================================== */

/* 1. Memory Leak (Choppy Vertical Melt) */
.MemoryLeakText {
    display: inline-block;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #ffaa00; /* System warning orange */
    animation: LeakData 5s infinite steps(5, end);
    transform-origin: top; /* Makes it melt downward */
}

@keyframes LeakData {
    0% { transform: scaleY(1); color: #ffaa00; opacity: 1; }
    40% { transform: scaleY(1.1) translateY(2px); color: #aa5500; opacity: 0.8; }
    60% { transform: scaleY(1.3) translateY(4px); color: #552200; opacity: 0.5; filter: blur(1px); }
    80% { transform: scaleY(1.5) translateY(6px); color: #220000; opacity: 0.2; filter: blur(2px); }
    85% { transform: scaleY(1); color: #ff0000; opacity: 1; text-shadow: 2px 0 0 red; } /* Harsh snap back */
    100% { transform: scaleY(1); color: #ffaa00; opacity: 1; }
}

/* 2. Kill Screen (Arcade Horizontal Tearing) */
.KillScreenText {
    display: inline-block;
    position: relative;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #9900ff; /* Bruised purple */
}

.KillScreenText::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    color: #ff00ff;
    /* Cuts a thin horizontal slice out of the middle of the text */
    clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%); 
    animation: TearScreen 3s infinite steps(3, end);
}

@keyframes TearScreen {
    0%, 100% { transform: translateX(0); opacity: 0; }
    10% { transform: translateX(-3px); opacity: 1; }
    15% { transform: translateX(4px); opacity: 0.8; filter: invert(1); }
    20% { transform: translateX(0); opacity: 0; }
    60% { transform: translateX(2px); opacity: 1; text-shadow: -2px 0 cyan; }
    65% { transform: translateX(-2px); opacity: 0; }
}

/* 3. Haunted Output (Claustrophobic Crushing) */
.HauntedOutputText {
    display: inline-block;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #aaccff; /* Cold, dead digital blue */
    animation: CrushWords 7s infinite steps(4, end);
}

@keyframes CrushWords {
    0%, 100% { 
        letter-spacing: normal; 
        opacity: 1; 
        text-shadow: 0 0 4px rgba(170, 204, 255, 0.5); 
    }
    20% { 
        letter-spacing: -1px; 
        opacity: 0.8; 
    }
    40% { 
        /* The text gets squeezed together */
        letter-spacing: -3px; 
        opacity: 0.5; 
        transform: skewX(2deg); 
    }
    45% { 
        /* Sudden violent burst outward */
        letter-spacing: 5px; 
        opacity: 1; 
        color: #fff; 
        text-shadow: 0 0 10px #fff; 
        transform: skewX(-10deg); 
    }
    50% { 
        letter-spacing: normal; 
        opacity: 0.2; 
    }
    80% { 
        opacity: 0.9; 
    }
}


/* ==========================================
   PSYCHOLOGICAL HORROR / CORRUPTED DATA
   ========================================== */

/* 1. Reality Tear (Horizontal Severing) */
.RealityTearText {
    display: inline-block;
    position: relative;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #c0c0c0; /* Pale dead pixel gray */
}

.RealityTearText::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    color: #c0c0c0;
    /* Slices the text perfectly in half horizontally */
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
    /* step-end makes it jarring and sudden */
    animation: TearApart 5s infinite step-end;
}

@keyframes TearApart {
    0%, 100% { 
        transform: translateX(0) translateY(0); 
        opacity: 0; 
    }
    85% { 
        /* The top half slides away, revealing a red shadow */
        transform: translateX(-4px) translateY(-1px); 
        opacity: 1; 
        filter: drop-shadow(2px 2px 0 #990000); 
    }
    88% { 
        /* Glitches in the opposite direction in blue */
        transform: translateX(3px) translateY(1px); 
        opacity: 1; 
        filter: drop-shadow(-2px -2px 0 #000099); 
    }
    91% { 
        transform: translateX(0) translateY(0); 
        opacity: 0; 
    }
}

/* 2. Power Failure (System Dimming and Surge) */
.PowerFailureText {
    display: inline-block;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #2b702b; /* Dim, dying terminal green */
    animation: BrownOut 8s infinite steps(6, end);
}

@keyframes BrownOut {
    0% { color: #2b702b; text-shadow: none; }
    40% { color: #163816; } /* Getting darker */
    60% { color: #050d05; }
    75% { color: transparent; } /* Total power failure */
    94% { color: transparent; } /* Leaves you in the dark */
    95% { 
        /* Violent power surge */
        color: #ccffcc; 
        text-shadow: 0 0 10px #ccffcc, 0 0 20px #00ff00; 
    } 
    97% { color: #2b702b; text-shadow: none; }
}

/* 3. The Mimic (Sudden Vertical Stretching) */
.MimicEntityText {
    display: inline-block;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: var(--text-normal);
    transform-origin: bottom; /* Anchors the stretch to the floor */
    animation: MimicReveal 7s infinite step-end;
}

@keyframes MimicReveal {
    0%, 100% { 
        transform: scaleY(1); 
        color: var(--text-normal); 
        text-shadow: none; 
    }
    92% { 
        /* The entity drops its disguise for 1 frame */
        transform: scaleY(2.8) scaleX(0.9); 
        color: #660000; 
        text-shadow: 0 2px 5px #ff0000; 
    }
    94% { 
        /* Instantly snaps back to looking normal */
        transform: scaleY(1); 
        color: var(--text-normal); 
        text-shadow: none; 
    }
}

/* ==========================================
   ASCII / TERMINAL DATA CORRUPTION
   ========================================== */

/* 1. Cipher Decode (Brute Force ASCII Encryption) */
.CipherDecodeText {
    display: inline-block;
    position: relative;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #00ff66; /* Bright terminal green */
}

.CipherDecodeText::before {
    /* We use a pseudo-element to cover the real text with ASCII gibberish */
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-primary); /* Blocks the real text */
    color: #00ff66;
    animation: BruteForceDecrypt 4s infinite step-end;
}

@keyframes BruteForceDecrypt {
    0% { content: "&%$#@!"; }
    5% { content: "]{>+-["; color: #fff; }
    10% { content: "!!?*&^"; }
    15% { content: "010110"; color: #00ff66; }
    20% { content: "x7F#@!"; }
    25% { 
        /* The decryption succeeds, the pseudo-element vanishes */
        content: ""; 
        background-color: transparent; 
    }
    90% { 
        /* Stays readable for a while, then encrypts again */
        content: ""; 
        background-color: transparent; 
    }
    95% { content: "###***"; background-color: var(--background-primary); }
    100% { content: "&%$#@!"; }
}

/* 2. ASCII Static (Shifting Block Censor) */
.AsciiStaticText {
    display: inline-block;
    position: relative;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #a0a0a0;
}

.AsciiStaticText::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-primary);
    color: #888;
    letter-spacing: -1px; /* Crams the blocks together */
    animation: ShiftingBlocks 0.3s infinite step-end;
}

@keyframes ShiftingBlocks {
    0%   { content: "▓▒░█▓"; opacity: 1; }
    20%  { content: "▒█▓░▒"; opacity: 0.9; color: #555; }
    40%  { content: "░▒▓█▓"; opacity: 1; color: #aaa; }
    60%  { content: "█░▒▓░"; opacity: 0.8; color: #777; }
    80%  { 
        /* The static briefly clears so you can read the word */
        content: "▒▓█░▒"; 
        opacity: 0.1; 
    }
    100% { content: "▓▒░█▓"; opacity: 1; }
}

/* 3. Binary Bleed (Raw Data Ghost) */
.BinaryBleedText {
    display: inline-block;
    position: relative;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #ff3333; /* Hostile red */
}

.BinaryBleedText::after {
    /* Pulls the 1s and 0s from your HTML data attribute */
    content: attr(data-binary);
    position: absolute;
    left: 0;
    top: 0;
    color: #00ffff; /* Cyan data ghost */
    background-color: var(--background-primary);
    /* Keeps the binary hidden most of the time */
    opacity: 0; 
    animation: DropMachineCode 5s infinite step-end;
}

@keyframes DropMachineCode {
    0%, 100% { opacity: 0; transform: translateY(0); }
    70% { 
        /* Binary appears and blocks the text */
        opacity: 1; 
        transform: translateY(0); 
        background-color: var(--background-primary);
    }
    75% { 
        /* The binary detaches and bleeds downward */
        opacity: 0.8; 
        transform: translateY(4px); 
        background-color: transparent; 
        text-shadow: 0 0 5px #00ffff;
    }
    80% { 
        opacity: 0.4; 
        transform: translateY(8px); 
    }
    85% { 
        opacity: 0; 
        transform: translateY(12px); 
    }
}
/* ==========================================
   THE BACKROOMS / LIMINAL SPACE EFFECTS
   ========================================== */

/* 1. The No-Clip (Sinking out of bounds) */
.NoClipText {
    display: inline-block;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: var(--text-normal);
    animation: SinkIntoCarpet 7s infinite;
}

@keyframes SinkIntoCarpet {
    0%, 75% { 
        transform: translateY(0); 
        filter: blur(0px); 
        opacity: 1; 
    }
    85% { 
        /* The text begins to fall through the floor */
        transform: translateY(6px); 
        filter: blur(2px); 
        opacity: 0.4; 
    }
    92% { 
        transform: translateY(12px); 
        filter: blur(5px); 
        opacity: 0; 
    }
    93%, 100% { 
        /* Snaps back into reality instantly */
        transform: translateY(0); 
        filter: blur(0px); 
        opacity: 1; 
    }
}

/* 2. Fluorescent Hum (Failing Yellow Lights) */
.FluorescentHumText {
    display: inline-block;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #e8e8ba; /* Sickly liminal yellow */
    animation: DyingFluorescent 8s infinite step-end;
}

@keyframes DyingFluorescent {
    0%, 100% { 
        opacity: 1; 
        text-shadow: 0 0 8px rgba(232, 232, 186, 0.6); 
    }
    30% { 
        /* A subtle dip in power */
        opacity: 0.8; 
        text-shadow: 0 0 2px rgba(232, 232, 186, 0.3); 
    }
    32% { 
        opacity: 1; 
        text-shadow: 0 0 8px rgba(232, 232, 186, 0.6); 
    }
    65% { 
        /* The bulb almost completely dies */
        opacity: 0.3; 
        color: #555; 
        text-shadow: none; 
    }
    66% { 
        opacity: 1; 
        color: #e8e8ba; 
        text-shadow: 0 0 10px rgba(232, 232, 186, 0.8); 
    }
    85% { 
        opacity: 0.4; 
        color: #777; 
        text-shadow: none; 
    }
    87% { 
        opacity: 1; 
        color: #e8e8ba; 
        text-shadow: 0 0 8px rgba(232, 232, 186, 0.6); 
    }
}

/* 3. Hallway Echo (Sanity Loss / Vision Doubling) */
.HallwayEchoText {
    display: inline-block;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: var(--text-normal);
    animation: VisionBlur 6s ease-in-out infinite alternate;
}

@keyframes VisionBlur {
    0%, 20% { 
        text-shadow: 0 0 0 transparent, 0 0 0 transparent; 
        color: var(--text-normal);
    }
    80%, 100% { 
        /* Faint ghosts of the text slowly drift sideways */
        text-shadow: 
            -4px 1px 2px rgba(150, 150, 50, 0.5), /* Sick yellow echo */
            4px -1px 2px rgba(100, 50, 150, 0.5); /* Bruised purple echo */
        color: rgba(255, 255, 255, 0.7); /* The core text fades slightly */
    }
}


/* ==========================================
   CHONKY PIXEL / 8-BIT SPRITE CORRUPTION
   ========================================== */

/* 1. Grid Stutter (Rigid 8-Bit Frame Snapping) */
.GridStutterText {
    display: inline-block;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #ffffff;
    text-shadow: 4px 4px 0px #222222;
    /* steps(5) forces the text to snap instantly between positions */
    animation: GridMove 4s infinite steps(5, end);
}

@keyframes GridMove {
    0%, 100% { 
        transform: translate(0px, 0px); 
        text-shadow: 4px 4px 0px #222222; 
    }
    20% { 
        transform: translate(-4px, 4px); 
        text-shadow: 8px -4px 0px #550000; /* Blood red shadow step */
    }
    40% { 
        transform: translate(4px, -4px); 
        text-shadow: -4px 8px 0px #004444; /* Glitched cyan shadow step */
        color: #cccccc; 
    }
    60% { 
        transform: translate(-8px, 0px); 
        text-shadow: 4px 4px 0px #000000; 
    }
    80% { 
        transform: translate(0px, 4px); 
        color: #ff0033; 
    }
}

/* 2. Save Corruption (Blocky Horizontal Slicing) */
.SaveCorruptionText {
    display: inline-block;
    position: relative;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #00ffcc; /* Corrupted file cyan */
    text-shadow: 3px 3px 0px #000;
}

.SaveCorruptionText::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    color: #ff0055; /* Static red layer */
    background: var(--background-primary);
    /* Steps force harsh cuts through the blocky percentages */
    animation: BlockSlice 2.5s infinite steps(4, end);
}

@keyframes BlockSlice {
    0%, 100% { 
        clip-path: inset(0 0 100% 0); 
        transform: none; 
    }
    25% { 
        /* Slices a block out of the middle and snaps it left */
        clip-path: inset(30% 0 40% 0); 
        transform: translateX(-6px); 
    }
    50% { 
        /* Slices a block out of the top and snaps it right */
        clip-path: inset(10% 0 70% 0); 
        transform: translateX(6px); 
    }
    75% { 
        /* Slices a block out of the bottom and snaps it further left */
        clip-path: inset(60% 0 10% 0); 
        transform: translateX(-10px); 
    }
}

/* 3. Chunky Melt (Low-FPS Sprite Deformation) */
.ChunkyMeltText {
    display: inline-block;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #8b0000; /* Deep warning red */
    text-shadow: 4px 4px 0px #000000;
    transform-origin: bottom center;
    /* Slow, jagged step animation prevents smooth scaling */
    animation: ChunkyMelt 6s infinite steps(5, end);
}

@keyframes ChunkyMelt {
    0%, 100% { 
        transform: scaleY(1) skewX(0deg); 
        text-shadow: 4px 4px 0px #000000; 
    }
    20% { 
        transform: scaleY(1.4) skewX(-4deg); 
        text-shadow: 4px 8px 0px #220000; 
    }
    40% { 
        transform: scaleY(1.8) skewX(-8deg); 
        text-shadow: 4px 12px 0px #110000; 
        color: #ff0000;
    }
    60% { 
        transform: scaleY(0.7) skewX(6deg); 
        text-shadow: -4px 4px 0px #000000; 
    }
    80% { 
        transform: scaleY(1.2) skewX(0deg); 
        text-shadow: 4px 4px 0px #440000; 
    }
}

/* ==========================================
   SNES PIXEL / DISCO NOIR ANOMALIES
   ========================================== */

/* 1. Inland Boogie (Slow, Chunky Jazz Sway) */
.InlandBoogieText {
    display: inline-block;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #8a2be2; /* Velvet purple */
    /* steps(4) forces the rotation and movement to snap, not slide */
    animation: DiscoSway 1.8s infinite steps(4, end);
    transform-origin: bottom center;
}

@keyframes DiscoSway {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg); 
        text-shadow: 4px 4px 0px #000000; 
    }
    25% { 
        transform: translateY(-4px) rotate(4deg); 
        text-shadow: 6px 6px 0px #220022; 
        color: #ba55d3; /* Manic magenta */
    }
    50% { 
        transform: translateY(0px) rotate(0deg); 
        text-shadow: 4px 4px 0px #000000; 
    }
    75% { 
        transform: translateY(4px) rotate(-4deg); 
        text-shadow: 2px 6px 0px #110011; 
        color: #4b0082; /* Deep indigo */
    }
}

/* 2. Tragic Neon (4-Step Low-Res Sunset) */
.TragicNeonText {
    display: inline-block;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    background: linear-gradient(90deg, #ff007f, #ffaa00, #ff007f);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(4px 4px 0px #000000);
    /* Immediate step cuts give it that retro palette-swap feel */
    animation: TragicGradient 1.2s infinite steps(4, end);
}

@keyframes TragicGradient {
    0% { background-position: 0% 0%; }
    100% { background-position: 300% 0%; }
}

/* 3. Reptilian Rumble (Subwoofer Shadow Bounce) */
.ReptilianRumbleText {
    display: inline-block;
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #d2b48c; /* Dusty ledger tan */
    text-shadow: 4px 4px 0px #000000;
    animation: BassRumble 1s infinite steps(4, end);
}

@keyframes BassRumble {
    0%, 100% { 
        text-shadow: 4px 4px 0px #000000; 
        transform: scale(1); 
    }
    25% { 
        /* Shadow stretches wide to the right */
        text-shadow: 10px 4px 0px #3e2723; 
        transform: translateX(-2px); 
        color: #a0522d;
    }
    50% { 
        /* Shadow drops heavily down */
        text-shadow: 4px 10px 0px #1a0c00; 
        transform: translateY(-2px); 
    }
    75% { 
        /* The text slightly squashes horizontally on the beat */
        text-shadow: 2px 4px 0px #000000; 
        transform: scaleX(1.08); 
    }
}/*
author: sailKite
source: https://discord.com/channels/686053708261228577/702656734631821413/1155147566615367680
*/

/* aside functionality as a custom callout */
:is(.markdown-source-view .cm-callout, div:not([class])):has(
    > .callout[data-callout-metadata*="aside"]
  ) {
  position: relative;
  overflow: visible;
  contain: none !important;
}
.callout[data-callout-metadata*="aside"] {
  --aside-width: 200px;
  --aside-offset: var(--size-4-4);
  position: absolute;
}
.callout[data-callout-metadata*="aside-l"] {
  left: calc(-1 * (var(--aside-width) + var(--aside-offset)));
  right: calc(100% + var(--aside-offset));
}
.callout[data-callout-metadata*="aside-r"] {
  left: calc(100% + var(--aside-offset));
  right: calc(-1 * (var(--aside-width) + var(--aside-offset)));
}
@media (hover: hover) {
  .markdown-source-view.mod-cm6
    .cm-embed-block:has(> div > [data-callout-metadata*="aside"]):hover {
    overflow: visible;
  }
}/* Refined styling for moc-btn */
.moc-btn .internal-link,
.moc-btn > button,
.moc-btn a {
    position: relative !important; /* Required for z-index to work */
    z-index: 20 !important;        /* Pops the button ABOVE the invisible folding blanket (which is 10) */
    
    display: inline-block !important; /* Prevents stretching to 100% width */
    padding: 4px 6px !important;      /* Reduced padding for a smaller profile */
    margin: 4px !important;           /* Keeps a nice gap between buttons */
    background-color: #a8e5d3 !important;
    border: 2px double #363b4a !important; 
    border-radius: 0px !important;    
    color: #000000 !important;
    text-align: justify; 
    height: 2em;
    font-variant: small-caps;
    font-family: unifont !important;
    font-size: 0.9em !important;      /* Smaller font for a compact look */
    line-height: 1 !important;
    text-decoration: none !important; /* Removes underlines from markdown links */
    cursor: pointer;
}

.moc-btn > button:hover,
.moc-btn .internal-link:hover,
.moc-btn a:hover {
    background-color: #a8e5d3 !important;
    color: #2b2f3a !important;
}/*@settings
name: Sticky Notes
id: sticky-notes
settings:
  -
    id: info-text-sticky-notes
    type: info-text
    title: Sticky Notes by *Daniel Hansen*
    description: Derived from *ITS Callout snippet*
    markdown: true
  -
    id: sticky-color
    title: Sticky Notes color
    description: Default color for Sticky Notes. Used when not color is specified in markdown.
    type: variable-color
    format: hex
    opacity: true
    default: '#fabd2fcc'
    alt-format:
      -
        id: sticky-color-rgb
        format: rgb
  -
    id: sticky-font
    title: Sticky Notes font
    description: Font used for sticky notes.
    type: variable-select
    default: Roboto
    options:
      -
        label: IBM Plex Sans
        value: IBM Plex Sans
      -
        label: IBM Plex Mono
        value: IBM Plex Mono
      -
        label: Roboto
        value: Roboto
      -
        label: Chilanka
        value: Chilanka
      -
        label: Kalam
        value: Kalam
      -
        label: Architects Daughter
        value: Architects Daughter
      -
        label: Edu SA Beginner
        value: Edu SA Beginner
      -
        label: Playpen Sans
        value: Playpen Sans
      -
        label: Shantell Sans
        value: Shantell Sans
  -
    id: sticky-font-size
    title: Sticky Notes font size
    description: Size of the Sticky Notes text
    type: variable-text
    default: 1.2em
  -
    id: sticky-zoom
    title: Zoom on hover
    description: Zooms on sticky notes on mouse hover
    type: class-toggle
*/
/* STICKY NOTES */
@charset "UTF-8";

:root {
  --sticky-color-text: #282828;

  --sticky-color-green: #b8bb26;
  --sticky-color-red: #fb4934;
  --sticky-color-yellow: #FABD2F;
  --sticky-color-blue: #83a598;
  --sticky-color-purple: #d3869b;
  --sticky-color-aqua: #8ec07c;
  --sticky-color-orange: #fe8019;
  --sticky-color-green-transparent: #b8bb26cc;
  --sticky-color-red-transparent: #fb4934cc;
  --sticky-color-yellow-transparent: #FABD2Fcc;
  --sticky-color-blue-transparent: #83a598cc;
  --sticky-color-purple-transparent: #d3869bcc;
  --sticky-color-aqua-transparent: #8ec07ccc;
  --sticky-color-orange-transparent: #fe8019cc;

  --sticky-note-max-width: 600px;
  --sticky-border-radius: 8px;
}

.callout.callout.callout[data-callout~=sticky]:is([data-callout-metadata~=left]):not([data-callout-metadata~=nofloat]) {
  float: left;
  margin: unset;
  margin-right: 8px;
}

.callout.callout.callout[data-callout~=sticky]:is([data-callout-metadata~=nofloat]) {
  float: unset !important;
  margin-bottom: 20px !important;
}

.callout.callout[data-callout~=sticky]:is([data-callout-metadata~=right]) {
  float: right;
  margin: unset;
  margin-left: 8px;
}

.callout.callout.callout[data-callout~=sticky]:is([data-callout-metadata~=ctr],
[data-callout-metadata~=center]) {
  display: block;
  margin: auto;
  float: unset;
}

.callout[data-callout~=sticky] {
  --callout-icon: sticky-note;
  background-color: var(--sticky-color) !important;
  color: var(--sticky-color-text);
  font-family: var(--sticky-font);
  font-size: var(--sticky-font-size);
  max-width: var(--sticky-note-max-width); 
  margin: auto;
  display: block;
  float: unset;
}

.callout[data-callout~=sticky] { width: 30%; }
.callout[data-callout~=sticky]:is([data-callout-metadata~=s-35]) { width: 35%; }
.callout[data-callout~=sticky]:is([data-callout-metadata~=s-40]) { width: 40%; }
.callout[data-callout~=sticky]:is([data-callout-metadata~=s-45]) { width: 45%; }
.callout[data-callout~=sticky]:is([data-callout-metadata~=s-50]) { width: 50%; }
.callout[data-callout~=sticky]:is([data-callout-metadata~=s-55]) { width: 55%; }
.callout[data-callout~=sticky]:is([data-callout-metadata~=s-60]) { width: 60%; }


.callout[data-callout~=sticky] .callout-title { display: none; }
.callout[data-callout~=sticky] .callout-title-inner { padding-top: 0.25em; }
.callout[data-callout~=sticky] .callout-content { padding: 10px; }

.callout[data-callout~=sticky] {
  border-radius: var(--sticky-border-radius) !important;
  border-width: 1px !important;
  padding: 0px;
  > .callout-content > :first-child {
      margin-top: 0px;
  }
  > .callout-content > :last-child {
      margin-bottom: 0px;
  }
}

.callout[data-callout~=sticky] .callout-content strong,
.callout[data-callout~=sticky] .callout-content em {
  color: var(--sticky-color-text);
  text-decoration: none;
}

.callout[data-callout~=sticky] .callout-content a.internal-link,
.callout[data-callout~=sticky] .callout-content a.external-link { 
  color:var(--sticky-color-text); 
}

.callout[data-callout~=sticky]:is([data-callout-metadata~=green]) { background-color: var(--sticky-color-green-transparent) !important; }
.callout[data-callout~=sticky]:is([data-callout-metadata~=red]) { background-color: var(--sticky-color-red-transparent) !important; }
.callout[data-callout~=sticky]:is([data-callout-metadata~=yellow]) { background-color: var(--sticky-color-yellow-transparent) !important; }
.callout[data-callout~=sticky]:is([data-callout-metadata~=blue]) { background-color: var(--sticky-color-blue-transparent) !important; }
.callout[data-callout~=sticky]:is([data-callout-metadata~=purple]) { background-color: var(--sticky-color-purple-transparent) !important; }
.callout[data-callout~=sticky]:is([data-callout-metadata~=aqua]) { background-color: var(--sticky-color-aqua-transparent) !important; }
.callout[data-callout~=sticky]:is([data-callout-metadata~=orange]) { background-color: var(--sticky-color-orange-transparent) !important; }

.callout[data-callout~=sticky]:is([data-callout-metadata~=green]) mark { background-color: var(--sticky-color-green-transparent) !important; }
.callout[data-callout~=sticky]:is([data-callout-metadata~=red]) mark { background-color: var(--sticky-color-red-transparent) !important; }
.callout[data-callout~=sticky]:is([data-callout-metadata~=yellow]) mark { background-color: var(--sticky-color-yellow-transparent) !important; }
.callout[data-callout~=sticky]:is([data-callout-metadata~=blue]) mark { background-color: var(--sticky-color-blue-transparent) !important; }
.callout[data-callout~=sticky]:is([data-callout-metadata~=purple]) mark { background-color: var(--sticky-color-purple-transparent) !important; }
.callout[data-callout~=sticky]:is([data-callout-metadata~=aqua]) mark { background-color: var(--sticky-color-aqua-transparent) !important; }
.callout[data-callout~=sticky]:is([data-callout-metadata~=orange]) mark { background-color: var(--sticky-color-orange-transparent) !important; }
.callout[data-callout~=sticky] .callout-content mark { opacity: 1;}

.callout[data-callout~=sticky]:is([data-callout-metadata~=title]) .callout-content:first-line {
  font-weight: bold;
} 

.sticky-zoom .callout[data-callout~=sticky]:hover, .callout[data-callout~=sticky]:focus{
  box-shadow:10px 10px 7px rgba(40,40,40,.7);
  transform: scale(1.25);
  position:relative;
  z-index:5;
  opacity: 1;
  transition: transform 0.5s ease 0s;
  display: block;
}

/*
author: FireIsGood
source: https://discord.com/channels/686053708261228577/702656734631821413/1092995965583114341
*/

[data-callout="tabbed"] {
  outline: 1px solid var(--color-base-30);
  border-radius: 0.5rem;
}
[data-callout="tabbed"] > .callout-content {
  padding: 0.25rem;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, max-content));
  gap: 0 1rem;
}
[data-callout="tabbed"] > .callout-title {
  display: none;
}
[data-callout="tabbed"] > .callout-content p {
  margin: 0;
}
[data-callout="tabbed"] > .callout-content label > input {
  display: none;
}
[data-callout="tabbed"] > .callout-content label {
  width: 100%;
  display: inline-block;
  padding: 0.15rem 0.75ch;
  border-radius: 1rem;

  color: #ccc;
  background-color: #2e7d32;

  text-align: center;
  font-weight: bold;
  font-size: 1.15rem;
  cursor: pointer;
}
[data-callout="tabbed"] > .callout-content label:has(input:checked) {
  color: white;
  background-color: #8bc34a;
}
[data-callout="tabbed"]
  > .callout-content
  p:not(:has(label input:checked))
  + blockquote {
  display: none;
}
[data-callout="tabbed"] > .callout-content > blockquote {
  order: 999;
  grid-column: 1 / -1;

  background-color: transparent;
  padding-left: 0;
  border: 0;
}/* Sticky Hub Panel */
.sticky-hub-panel .cm-header,
.sticky-hub-panel .hypermd-header,
.sticky-hub-panel .markdown-rendered h1,
.sticky-hub-panel .markdown-rendered h2,
.sticky-hub-panel .markdown-rendered h3 {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    background-color: var(--background-primary) !important;
    border-bottom: 2px solid var(--interactive-accent);
}


/* TableSettings.css */
/*
author: zamsyt
source:discord 
*/

:is(.cm-table-widget, .markdown-preview-section > div):has(+ * .left-thead) th {
  font-weight: unset;
}

:is(.cm-table-widget, .markdown-preview-section > div):has(+ * .left-thead)>table>*>tr> :first-child {
  font-weight: var(--table-header-weight);
  background-color: var(--background-secondary);
}



/*
author: FireIsGood
source: https://discord.com/channels/686053708261228577/702656734631821413/1112164539975340032
*/

:root table {
  border-collapse: separate;
  border-spacing: 0;
}

th:first-of-type {
  border-top-left-radius: 8px;
}

th:last-of-type {
  border-top-right-radius: 8px;
}

tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 8px;
}

tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 8px;
}

:root :is(td, th) {
  border-width: 0 var(--table-border-width) var(--table-border-width) 0;
}


/* ========================================= */
/* STANDOUT TABLE HEADERS                    */
/* ========================================= */

.markdown-rendered table th {
    /* Changes the background to a slightly darker/offset shade */
    background-color: var(--background-modifier-border) !important;
    
    /* Makes the text bolder */
    font-weight: 900 !important;
    
    /* Optional: Changes the text color to your theme's accent color. 
       Change this to var(--text-normal) if you prefer standard text color. */
    color: var(--text-accent) !important;
    
    /* Adds a strong border directly under the header row */
    border-bottom: 2px solid var(--text-normal) !important; 
    
    /* Adds a little extra breathing room around the text */
    padding: 10px 15px !important;
}



/*Code Block*/
/*
MIT License

Copyright (c) 2022 kneecaps

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/

/* ============================ */
/*        READING MODE          */
/* ============================ */

.markdown-rendered pre {
  border: solid var(--color-yellow);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-lm-only);
  
  /* Give the text a gutter from the left border */
  padding-left: 20px !important;
  
  /* Cool soft pattern background */
  background-color: var(--code-background);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 8px,
    rgba(127, 127, 127, 0.05) 8px,
    rgba(127, 127, 127, 0.05) 16px
  );
}

/* Wrap lines cleanly and reduce font size in Reading Mode */
.markdown-rendered pre > code {
  white-space: pre-wrap !important;
  word-break: break-word !important;
  font-size: 0.8em !important; /* <-- Shrinks text to fit more per line */
}

/* ============================ */
/*   LIVE PREVIEW     */
/* ============================ */

/* Give the Live Preview text a gutter and reduce font size */
.cm-s-obsidian .cm-line.HyperMD-codeblock {
  padding-left: 20px !important;
  font-size: 0.8em !important; /* <-- Shrinks text to fit more per line */
}

/* Base soft pattern applied to all Live Preview code backgrounds */
.cm-s-obsidian div.HyperMD-codeblock-begin-bg,
.cm-s-obsidian div.HyperMD-codeblock-end-bg,
.cm-s-obsidian div.HyperMD-codeblock-bg {
  background-color: var(--code-background);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 8px,
    rgba(127, 127, 127, 0.05) 8px,
    rgba(127, 127, 127, 0.05) 16px
  );
}

.cm-s-obsidian div.HyperMD-codeblock-begin-bg {
  border-top: solid var(--color-yellow);
  /* stylelint-disable-next-line declaration-no-important */
  border-top-right-radius: 8px !important;
  /* stylelint-disable-next-line declaration-no-important */
  border-top-left-radius: 8px !important;
  margin-top: 8px;
}

.cm-s-obsidian div.HyperMD-codeblock-end-bg {
  border-bottom: solid var(--color-yellow);
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

.cm-s-obsidian div.HyperMD-codeblock-bg {
  border-right: solid var(--color-yellow);
  border-left: solid var(--color-yellow);
}




/* Target ONLY Hubs sitting inside the Right Sidebar */
.mod-right-split .cm-header,
.mod-right-split .hypermd-header,
.mod-right-split .markdown-rendered h1,
.mod-right-split .markdown-rendered h2,
.mod-right-split .markdown-rendered h3 {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    background-color: var(--background-secondary-alt, var(--background-primary)) !important;
    padding-top: 6px;
    padding-bottom: 6px;
    margin-top: 0 !important;
    border-bottom: 2px solid var(--interactive-accent);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Ensure smooth scrolling inside the sidebar leaf */
.mod-right-split .view-content 
	{overflow-y: auto !important;}/* ========================================================== */
/* COMBINED TABLE SNIPPET: #nomargin, #shrink, and #nolines   */
/* ========================================================== */

/* -------------------------------------- */
/* 1. Hide Header Row for All Tags        */
/* -------------------------------------- */
.cm-table-widget:has(th a.tag[href="#nomargin"]) thead,
.markdown-rendered table:has(th a.tag[href="#nomargin"]) thead,
.cm-table-widget:has(th a.tag[href="#shrink"]) thead,
.markdown-rendered table:has(th a.tag[href="#shrink"]) thead,
.cm-table-widget:has(th a.tag[href="#nolines"]) thead,
.markdown-rendered table:has(th a.tag[href="#nolines"]) thead {
    display: none !important;
}

/* -------------------------------------- */
/* 2. #nomargin - Expand table past margins */
/* -------------------------------------- */
.cm-table-widget:has(th a.tag[href="#nomargin"]),
.markdown-rendered table:has(th a.tag[href="#nomargin"]) {
    width: max-content !important;
    max-width: max-content !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
}

.cm-table-widget:has(th a.tag[href="#nomargin"]) .cm-table-widget-inner {
    width: 100% !important;
    max-width: none !important;
}

/* -------------------------------------- */
/* 3. #shrink - Dynamically scale to fit  */
/* -------------------------------------- */
.cm-table-widget:has(th a.tag[href="#shrink"]),
.markdown-rendered table:has(th a.tag[href="#shrink"]) {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

.cm-table-widget:has(th a.tag[href="#shrink"]) .cm-table-widget-inner {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.cm-table-widget:has(th a.tag[href="#shrink"]) td,
.markdown-rendered table:has(th a.tag[href="#shrink"]) td {
    font-size: clamp(0.55em, 1.2vw, 0.85em) !important; 
    padding: clamp(1px, 0.3vw, 3px) clamp(2px, 0.5vw, 5px) !important; 
    letter-spacing: -0.06em !important; 
    white-space: normal !important; 
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}

/* -------------------------------------- */
/* 4. #nolines - Remove all borders       */
/* -------------------------------------- */
.cm-table-widget:has(th a.tag[href="#nolines"]),
.cm-table-widget:has(th a.tag[href="#nolines"]) .cm-table-widget-inner,
.cm-table-widget:has(th a.tag[href="#nolines"]) table,
.cm-table-widget:has(th a.tag[href="#nolines"]) tr,
.cm-table-widget:has(th a.tag[href="#nolines"]) th,
.cm-table-widget:has(th a.tag[href="#nolines"]) td,
.markdown-rendered table:has(th a.tag[href="#nolines"]),
.markdown-rendered table:has(th a.tag[href="#nolines"]) table,
.markdown-rendered table:has(th a.tag[href="#nolines"]) tr,
.markdown-rendered table:has(th a.tag[href="#nolines"]) th,
.markdown-rendered table:has(th a.tag[href="#nolines"]) td {
    border: none !important;
    box-shadow: none !important; 
}

/* -------------------------------------- */
/* 5. Transparent Backgrounds             */
/* -------------------------------------- */
:is(.cm-table-widget, .markdown-rendered table):has(th a.tag[href="#nomargin"], th a.tag[href="#shrink"], th a.tag[href="#nolines"]) :is(table, tr, td, th, .cm-table-widget-inner) {
    background-color: transparent !important;
    background: none !important;
}
:is(.cm-table-widget, .markdown-rendered table):has(th a.tag[href="#nomargin"], th a.tag[href="#shrink"], th a.tag[href="#nolines"]) {
    background-color: transparent !important;
    background: none !important;
}/* --- GOOGLE FONTS IMPORT --- */ /*region*/
/* Must remain at the top of the CSS file */
@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Rubik+Glitch&family=Special+Elite&display=swap');
/*endregion*/

/* 
88 88b           d88 88888888888 ad88888ba   ad88888ba        db        ,ad8888ba,  88888888888
"" 888b         d888 88         d8"     "8b d8"     "8b      d88b      d8"'    `"8b 88
   88`8b       d8'88 88         Y8,         Y8,             d8'`8b    d8'           88
88 88 `8b     d8' 88 88aaaaa    `Y8aaaaa,   `Y8aaaaa,      d8'  `8b   88            88aaaaa
88 88  `8b   d8'  88 88"""""      `"""""8b,   `"""""8b,   d8YaaaaY8b  88      88888 88"""""
88 88   `8b d8'   88 88                 `8b         `8b  d8""""""""8b Y8,        88 88
88 88    `888'    88 88         Y8a     a8P Y8a     a8P d8'        `8b Y8a.    .a88 88
88 88     `8'     88 88888888888 "Y88888P"   "Y88888P" d8'          `8b `"Y88888P"  88888888888
*/
/*region*/


/* Main container for the whole chat */
.MessageThread {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Space between different people talking */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #ffffff;
}

/* Grouping bubbles from the same sender */
.SentMessage,
.ReceivedMessage {
  display: flex;
  flex-direction: column;
  gap: 4px; /* Small gap between bubbles in the same block */
}

/* Align sent messages to the right */
.SentMessage {
  align-items: flex-end; 
}

/* Align received messages to the left */
.ReceivedMessage {
  align-items: flex-start; 
}

/* Base styling for all individual bubbles */
.SentMessage p,
.ReceivedMessage p {
  margin: 0;
  padding: 10px 15px;
  border-radius: 20px;
  max-width: 75%;
  line-height: 1.4;
  font-size: 16px;
}

/* Specific colors and tail-corners for Sent messages */
.SentMessage p {
  background-color: #007aff; /* Classic blue */
  color: white;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}

/* Rounds out the very top and bottom right corners for the sent stack */
.SentMessage p:first-child {
  border-top-right-radius: 20px;
}
.SentMessage p:last-child {
  border-bottom-right-radius: 20px;
}

/* Specific colors and tail-corners for Received messages */
.ReceivedMessage p {
  background-color: #e5e5ea; /* Classic gray */
  color: black;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

/* Rounds out the very top and bottom left corners for the received stack */
.ReceivedMessage p:first-child {
  border-top-left-radius: 20px;
}
.ReceivedMessage p:last-child {
  border-bottom-left-radius: 20px;
}
/* Hide the default callout title and icon */
.callout[data-callout="SentMessage" i] .callout-title,
.callout[data-callout="ReceivedMessage" i] .callout-title {
  display: none;
}

/* Remove default callout background and borders */
.callout[data-callout="SentMessage" i],
.callout[data-callout="ReceivedMessage" i] {
  background: transparent;
  border: none;
  padding: 0;
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  box-shadow: none;
}

/* Align Sent to the right, Received to the left */
.callout[data-callout="SentMessage" i] .callout-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.callout[data-callout="ReceivedMessage" i] .callout-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* Base styling for all individual bubbles */
.callout[data-callout="SentMessage" i] .callout-content p,
.callout[data-callout="ReceivedMessage" i] .callout-content p {
  margin: 0;
  padding: 10px 15px;
  border-radius: 20px;
  max-width: 75%;
  line-height: 1.4;
  font-size: 16px;
}

/* Specific colors and tail-corners for Sent messages */
.callout[data-callout="SentMessage" i] .callout-content p {
  background-color: #007aff; /* Classic blue */
  color: white;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}

/* Specific colors and tail-corners for Received messages */
.callout[data-callout="ReceivedMessage" i] .callout-content p {
  background-color: #e5e5ea; /* Classic gray */
  color: black;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

/* Corners for stacking */
.callout[data-callout="SentMessage" i] .callout-content p:first-child { 
  border-top-right-radius: 20px; 
}
.callout[data-callout="SentMessage" i] .callout-content p:last-child { 
  border-bottom-right-radius: 20px; 
}
.callout[data-callout="ReceivedMessage" i] .callout-content p:first-child { 
  border-top-left-radius: 20px; 
}
.callout[data-callout="ReceivedMessage" i] .callout-content p:last-child { 
  border-bottom-left-radius: 20px; 
}
/*endregion*/








/* 
88888888ba  88888888888 888888888888 88888888ba    ,ad8888ba,      8b           d8  ,ad8888ba,
88      "8b 88               88      88      "8b  d8"'    `"8b     `8b         d8' d8"'    `"8b
88      ,8P 88               88      88      ,8P d8'        `8b     `8b       d8' d8'
88aaaaaa8P' 88aaaaa          88      88aaaaaa8P' 88          88      `8b     d8'  88
88""""88'   88"""""          88      88""""88'   88          88       `8b   d8'   88      88888
88    `8b   88               88      88    `8b   Y8,        ,8P        `8b d8'    Y8,        88
88     `8b  88               88      88     `8b   Y8a.    .a8P          `888'      Y8a.    .a88
88      `8b 88888888888      88      88      `8b   `"Y8888Y"'            `8'        `"Y88888P"
*/
/*region*/
/* ==========================================
   DONKEY KONG COUNTRY / RAREWARE 90s ERA
   ========================================== */
/* ==========================================
   DONKEY KONG COUNTRY / RAREWARE 90s ERA
   (Part 2: 16-Bit Environments)
   ========================================== */

/* --- TEMPLE RUINS STONE --- */
/* Heavy, weathered stone blocks mimicking the Aztec/Ruins levels */
.TempleRuinsStone {
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #aebcb0;
    text-shadow:
        -1px -1px 0px #d8e5d8, /* Mossy highlight */
        1px 1px 0px #798c7d,   /* Mid stone */
        2px 2px 0px #526356,   /* Deep stone */
        3px 3px 0px #344238,   /* Shadow extrusion */
        4px 4px 0px #1a241d,   /* Darker extrusion */
        5px 5px 0px #000000;   /* Hard black base */
    letter-spacing: 2px;
    font-weight: 900;
    display: inline-block;
    text-transform: uppercase;
    transform: scaleY(1.1);
}

/* --- TOXIC FACTORY SLUDGE --- */
/* Acidic green and yellow hazard from the Kremkroc Industries levels */
.ToxicFactorySludge {
    font-family: "GNU Unifont", "Unifont", monospace !important;
    font-weight: 900;
    /* Hard-stepped gradient to simulate limited SNES color depth */
    background: linear-gradient(
        180deg,
        #ccff00 0%, #ccff00 33%,
        #33cc00 33%, #33cc00 66%,
        #006600 66%, #006600 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(2px 2px 0px #003300) drop-shadow(4px 4px 0px #000000);
    letter-spacing: 2px;
    display: inline-block;
    /* steps(4) prevents smooth interpolation for a retro feel */
    animation: SludgeBubble 1.2s infinite steps(4, end);
}

@keyframes SludgeBubble {
    0%, 100% { 
        filter: drop-shadow(2px 2px 0px #003300) drop-shadow(4px 4px 0px #000000) brightness(1); 
        transform: skewX(0deg); 
    }
    50% { 
        filter: drop-shadow(3px 3px 0px #336600) drop-shadow(5px 5px 0px #000000) brightness(1.2); 
        transform: skewX(-2deg) translateY(-1px); 
    }
}

/* --- MINECART RUSTED IRON --- */
/* Chunky, oxidized metal from the minecart carnage tracks */
.MinecartIron {
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #b56c42; /* Rust orange */
    text-shadow:
        0px 2px 0px #8b4a25,
        0px 4px 0px #5c2f15,
        0px 6px 0px #2e1508,
        2px 8px 0px #000000;
    background-color: #2b2b2b;
    padding: 4px 12px;
    box-shadow: 
        inset 0px 4px 0px #4d4d4d,
        inset 0px -4px 0px #1a1a1a,
        4px 4px 0px #000000;
    border-radius: 4px;
    letter-spacing: 1px;
    font-weight: 900;
    display: inline-block;
    text-transform: uppercase;
}

/* --- KREMLING SCALES --- */
/* Heavy, reptilian pattern simulating King K. Rool's forces */
.KremlingScales {
    font-family: "GNU Unifont", "Unifont", monospace !important;
    font-weight: 900;
    background: repeating-linear-gradient(
        45deg,
        #1e5927 0px, #1e5927 4px,
        #2e803a 4px, #2e803a 8px,
        #17401d 8px, #17401d 12px
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(-1px -1px 0px #63d176) drop-shadow(3px 3px 0px #0b1f0e) drop-shadow(5px 5px 0px #000000);
    letter-spacing: 3px;
    display: inline-block;
    transform: scale(1.1) rotate(-1deg);
}


/* ==========================================
   DONKEY KONG COUNTRY / RAREWARE 90s ERA
   (16-Bit Unifont SNES Aesthetic)
   ========================================== */

/* --- RAREWARE SGI 3D (CHUNKY PIXEL) --- */
/* A pixelated approximation of early pre-rendered 3D text using hard stacked shadows */
.Rareware3D {
    font-family: "GNU Unifont", "Unifont", monospace !important;
    color: #cc0000; /* Diddy Kong Red */
    text-shadow:
        1px 1px 0px #ff6666, /* Hard top-left highlight */
        2px 2px 0px #990000, /* Mid-shadow 1 */
        3px 3px 0px #660000, /* Mid-shadow 2 */
        4px 4px 0px #330000, /* Deep shadow */
        5px 5px 0px #000000; /* Flat black outline base */
    letter-spacing: 2px;
    font-weight: 900;
    display: inline-block;
    transform: scaleY(1.2); /* Chunky vertical stretch */
}

/* --- KONG BARREL WOOD (16-BIT) --- */
/* Rigid, boxy barrel texture with hard pixel borders instead of smooth shading */
.KongBarrelWood {
    font-family: "GNU Unifont", "Unifont", monospace !important;
    font-weight: 900;
    color: #e6c280; /* Light wood interior */
    background-color: #5c3a21; /* Dark wood base */
    padding: 4px 10px;
    /* Simulates pixel-art beveling without actual blurring */
    box-shadow: 
        inset 2px 2px 0px #8a5a33,
        inset -2px -2px 0px #2e1d10,
        4px 4px 0px #000000;
    border-left: 4px solid #8899a6; /* Steel band left */
    border-right: 4px solid #8899a6; /* Steel band right */
    border-top: none;
    border-bottom: none;
    text-transform: uppercase;
    display: inline-block;
    letter-spacing: 1px;
}

/* --- BANANA HOARD GOLD (PALETTE SWAP) --- */
/* Uses a hard-stepped gradient to simulate limited 16-bit SNES color palettes */
.BananaHoardGold {
    font-family: "GNU Unifont", "Unifont", monospace !important;
    font-weight: 900;
    background: linear-gradient(
        180deg, 
        #ffffaa 0%, #ffffaa 25%, 
        #ffcc00 25%, #ffcc00 50%, 
        #ff9900 50%, #ff9900 75%, 
        #aa5500 75%, #aa5500 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(2px 2px 0px #3d2300) drop-shadow(4px 4px 0px #000000);
    letter-spacing: 2px;
    display: inline-block;
    /* steps(3) forces the animation to snap jarringly rather than transition smoothly */
    animation: SnesGoldGleam 1.5s infinite steps(3, end);
}

@keyframes SnesGoldGleam {
    0%, 100% { 
        filter: drop-shadow(2px 2px 0px #3d2300) drop-shadow(4px 4px 0px #000000) brightness(1); 
    }
    50% { 
        filter: drop-shadow(2px 2px 0px #3d2300) drop-shadow(4px 4px 0px #000000) brightness(1.4); 
    }
}










/* --- RUBIK GLITCH ANOMALY --- */
/* Utilizes a heavy, displaced block font that appears corrupted */
.RubikGlitchAnomaly {
    font-family: 'Rubik Glitch', system-ui;
    white-space: pre-wrap;
    color: #ff3333;
    font-size: 1.5em;
    letter-spacing: 2px;
    text-shadow: 2px 2px 0px rgba(100, 0, 0, 0.8);
    line-height: 1.3;
}

/* --- CREEPSTER SLUDGE --- */
/* A dripping, chunky typeface with a slow, dark shadow pulse */
.CreepsterSludge {
    white-space: pre-wrap;
    color: #88cc88;
    font-size: 1.4em;
    letter-spacing: 3px;
    animation: SludgePulse 6s infinite alternate ease-in-out;
    line-height: 1.4;
}

@keyframes SludgePulse {
    0% { filter: drop-shadow(0 5px 2px rgba(0, 50, 0, 0.4)); transform: translateY(0px); }
    100% { filter: drop-shadow(0 10px 5px rgba(0, 30, 0, 0.8)); transform: translateY(2px); }
}

/* --- SPECIAL ELITE DOSSIER --- */
/* A grungy, uneven typewriter font imitating degraded physical documents */
.SpecialEliteDossier {
    white-space: pre-wrap;
    color: #b0b0b0;
    font-size: 1.1em;
    background-color: #111111;
    padding: 20px;
    border: 1px solid #333333;
    box-shadow: inset 0 0 15px #000000;
    line-height: 1.6;
}

/* --- CHUNKY RETRO 3D --- */
.chunky-3d {
    font-family: 'Unifont', monospace;
    color: #dfdfdf;
    text-shadow:
        1px 1px 0px #555555,
        2px 2px 0px #444444,
        3px 3px 0px #333333,
        4px 4px 0px #222222,
        5px 5px 0px #111111,
        6px 6px 0px #000000;
    letter-spacing: 2px;
    font-weight: bold;
}
/*endregion*/







/* ======================================================================
8b           d8 88        88  ad88888ba
`8b         d8' 88        88 d8"     "8b
 `8b       d8'  88        88 Y8,
  `8b     d8'   88aaaaaaaa88 `Y8aaaaa,
   `8b   d8'    88""""""""88   `"""""8b,
    `8b d8'     88        88         `8b
     `888'      88        88 Y8a     a8P
      `8'       88        88  "Y88888P"


  ,ad8888ba, 8b        d8 88888888ba  88888888888 88888888ba
 d8"'    `"8b Y8,    ,8P  88      "8b 88          88      "8b
d8'            Y8,  ,8P   88      ,8P 88          88      ,8P
88              "8aa8"    88aaaaaa8P' 88aaaaa     88aaaaaa8P'
88               `88'     88""""""8b, 88"""""     88""""88'
Y8,               88      88      `8b 88          88    `8b
 Y8a.    .a8P     88      88      a8P 88          88     `8b
  `"Y8888Y"'      88      88888888P"  88888888888 88      `8b


88888888ba  88        88 888b      88 88      a8P
88      "8b 88        88 8888b     88 88    ,88'
88      ,8P 88        88 88 `8b    88 88  ,88"
88aaaaaa8P' 88        88 88  `8b   88 88,d88'
88""""""'   88        88 88   `8b  88 8888"88,
88          88        88 88    `8b 88 88P   Y8b
88          Y8a.    .a8P 88     `8888 88     "88,
88           `"Y8888Y"'  88      `888 88       Y8b
=========================================================================

*/
/*region*/


/* --- EERIE NEON GLOW --- */
.eerie-neon {
    font-family: 'Unifont', monospace;
    color: #c8ffc8; /* Pale sickly green */
    text-shadow:
        0 0 5px rgba(50, 255, 50, 0.4),
        0 0 10px rgba(0, 150, 0, 0.3),
        0 0 20px rgba(0, 50, 0, 0.8);
    animation: slow-breathe 5s ease-in-out infinite alternate;
}

@keyframes slow-breathe {
    0% { 
        opacity: 0.85; 
        text-shadow: 0 0 4px rgba(50, 255, 50, 0.3), 0 0 12px rgba(0, 50, 0, 0.7); 
    }
    100% { 
        opacity: 1; 
        text-shadow: 0 0 8px rgba(50, 255, 50, 0.6), 0 0 25px rgba(0, 150, 0, 0.9); 
    }
}

/* --- STATIC PARALLAX / SAFE GLITCH --- */
/* Creates a chromatic aberration separation without rapid movement */
.static-parallax {
    font-family: 'Unifont', monospace;
    position: relative;
    display: inline-block;
    color: #bbbbbb;
    letter-spacing: 1px;
}

.static-parallax::before, 
.static-parallax::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.6;
    pointer-events: none;
}

.static-parallax::before {
    left: 2px;
    top: -1px;
    color: #ff003c; /* Deep red channel */
    z-index: -1;
    mix-blend-mode: screen;
}

.static-parallax::after {
    left: -2px;
    top: 1px;
    color: #00e5ff; /* Cyan channel */
    z-index: -2;
    mix-blend-mode: screen;
}

/* --- VOID SHADOW --- */
/* Text that appears to sink into the background */
.void-shadow {
    font-family: 'Unifont', monospace;
    color: transparent;
    text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);
    background-color: #000000;
    padding: 2px 5px;
    box-shadow: inset 0 0 10px #000000;
}




/* --- AMBER CRT SCANLINE --- */
/* Simulates an old, degraded amber terminal monitor */
.crt-scanline {
    font-family: 'Unifont', monospace;
    color: #ffb000; 
    position: relative;
    display: inline-block;
    padding: 2px 4px;
    background-color: #110d00;
}

.crt-scanline::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.4) 50%);
    z-index: 2;
    background-size: 100% 4px;
    pointer-events: none;
}

/* --- THE WHISPER (HOVER FOCUS) --- */
/* Text remains blurred and indistinct until the cursor hovers over it */
.whisper-text {
    font-family: 'Unifont', monospace;
    color: #555555;
    filter: blur(1.5px);
    transition: filter 2.5s ease, color 2.5s ease;
    letter-spacing: 3px;
}

.whisper-text:hover {
    filter: blur(0px);
    color: #dfdfdf;
}

/* --- DEEP RED SLOW PULSE --- */
/* A heavy, low-frequency glowing effect */
.slow-pulse {
    font-family: 'Unifont', monospace;
    color: #550000; 
    animation: slow-throb 6s infinite ease-in-out;
    font-weight: bold;
    letter-spacing: 1px;
}

@keyframes slow-throb {
    0%, 100% { 
        text-shadow: 0 0 2px #cc0000, 0 0 4px #550000; 
        color: #550000; 
    }
    50% { 
        text-shadow: 0 0 10px #ff0000, 0 0 20px #880000; 
        color: #aa0000; 
    }
}

/* --- DARK MATTER CORRUPTION --- */
/* Heavy background masking to simulate corrupted text blocks */
.dark-matter {
    font-family: 'Unifont', monospace;
    color: #8a8a8a;
    background-color: #0f0f0f;
    padding: 3px 6px;
    box-shadow: 
        0 0 15px rgba(0, 0, 0, 0.9) inset,
        0 0 3px rgba(80, 0, 80, 0.5);
    border: 1px solid #220022;
    text-decoration: line-through;
    text-decoration-color: #444444;
}


/* --- SYNTHWAVE CHROME --- */
/* Simulates the classic 80s chrome text reflecting a neon sunset */
.SynthwaveChrome {
    font-family: 'Unifont', monospace;
    background: linear-gradient(to bottom, #00d2ff 0%, #3a7bd5 40%, #ff007c 50%, #f9c449 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    letter-spacing: 2px;
    filter: drop-shadow(0px 2px 2px rgba(255, 0, 124, 0.4));
}

/* --- CYBER DECK TERMINAL --- */
/* A chunky, high-contrast block terminal with an idle cursor */
.CyberDeckTerminal {
    font-family: 'Unifont', monospace;
    color: #00ff00;
    background-color: #001100;
    border: 2px solid #005500;
    padding: 4px 8px;
    box-shadow: 4px 4px 0px #003300;
    text-transform: uppercase;
}

.CyberDeckTerminal::after {
    content: '\2588'; /* Solid block cursor character */
    animation: SlowBlink 2s steps(2, start) infinite;
    margin-left: 5px;
    color: #00ff00;
}

@keyframes SlowBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* --- DEGRADED VHS TRACKING --- */
/* Warped text with a subtle cyan and magenta color bleed */
.VhsTracking {
    font-family: 'Unifont', monospace;
    color: #e0e0e0;
    text-shadow: 
        2px 0 1px rgba(0, 255, 255, 0.5),
        -2px 0 1px rgba(255, 0, 255, 0.5);
    display: inline-block;
    transform: skewX(-10deg);
    letter-spacing: 1px;
}

/* --- NEON OVERDRIVE --- */
/* A heavy pink laser glow that under-lights the text */
.NeonOverdrive {
    font-family: 'Unifont', monospace;
    color: #ffffff;
    text-shadow:
        0 0 5px #ff007c,
        0 0 10px #ff007c,
        0 0 20px #ff007c,
        0 0 40px #ff007c;
    border-bottom: 2px solid #ff007c;
    padding-bottom: 2px;
    box-shadow: 0 4px 4px -2px rgba(255, 0, 124, 0.5);
}



/* --- CYAN NEON TUBE --- */
/* A standard, high-intensity cyan glow that slowly breathes */
.CyanNeonTube {
    font-family: 'Unifont', monospace;
    color: #e0ffff;
    text-shadow:
        0 0 4px rgba(0, 255, 255, 0.4),
        0 0 10px rgba(0, 255, 255, 0.6),
        0 0 20px rgba(0, 200, 255, 0.8);
    animation: SlowCyanBreathe 4s ease-in-out infinite alternate;
}

@keyframes SlowCyanBreathe {
    0% { 
        opacity: 0.8; 
        text-shadow: 0 0 2px rgba(0, 255, 255, 0.3), 0 0 8px rgba(0, 150, 200, 0.5); 
    }
    100% { 
        opacity: 1; 
        text-shadow: 0 0 6px rgba(0, 255, 255, 0.7), 0 0 15px rgba(0, 255, 255, 1); 
    }
}

/* --- HOLOGRAPHIC FRAGMENT --- */
/* Cyan text laid over a faint, repeating scanline background */
.HolographicFragment {
    font-family: 'Unifont', monospace;
    color: #00ffff;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 40, 60, 0.8) 0px,
        rgba(0, 40, 60, 0.8) 2px,
        rgba(0, 0, 0, 0) 2px,
        rgba(0, 0, 0, 0) 4px
    );
    padding: 2px 6px;
    border-left: 3px solid #00ffff;
    letter-spacing: 1px;
}

/* --- DEEP WATER TERMINAL --- */
/* Subdued cyan that flares into a bright, offset glow only when focused/hovered */
.DeepWaterTerminal {
    font-family: 'Unifont', monospace;
    color: #0088aa;
    text-shadow: 2px 2px 0px rgba(0, 255, 255, 0.1);
    transition: color 3s ease, text-shadow 3s ease;
}

.DeepWaterTerminal:hover {
    color: #00ffff;
    text-shadow: 
        0 0 8px rgba(0, 255, 255, 0.6),
        4px 4px 0px rgba(0, 100, 150, 0.4);
}

/* --- CYAN ICE BLOCK --- */
/* A thick, 3D structure that resembles a glowing console unit */
.CyanIceBlock {
    font-family: 'Unifont', monospace;
    color: #ffffff;
    background-color: #001a1a;
    text-shadow: 0px 0px 4px #00ffff;
    box-shadow: 
        inset 0 0 10px rgba(0, 255, 255, 0.5),
        2px 2px 0px #005555,
        4px 4px 0px #003333;
    padding: 4px 8px;
    font-weight: bold;
    letter-spacing: 2px;
}

/* --- GLASS TUBE NEON --- */
/* Simulates physical glass tubing with a bright core, outer gas glow, and a drop shadow for the tube itself */
.GlassTubeNeon {
    font-family: 'Unifont', monospace;
    color: #fff4f4;
    text-shadow:
        0 0 1px #ffffff,
        0 0 3px #ffaaee,
        0 0 6px #ff44cc,
        0 0 12px #ff00aa,
        2px 2px 2px rgba(0, 0, 0, 0.9); 
    font-weight: bold;
    letter-spacing: 2px;
}

/* --- FAULTY BALLAST FLICKER --- */
/* A long power cycle with a brief, subtle dimming event to simulate failing hardware */
.FaultyBallastFlicker {
    font-family: 'Unifont', monospace;
    color: #ffd000;
    text-shadow:
        0 0 4px rgba(255, 200, 0, 0.8),
        0 0 10px rgba(255, 100, 0, 0.6);
    animation: SlowFlicker 8s infinite;
}

@keyframes SlowFlicker {
    0%, 94%, 96%, 98%, 100% { 
        opacity: 1; 
        text-shadow: 0 0 4px rgba(255, 200, 0, 0.8), 0 0 10px rgba(255, 100, 0, 0.6); 
    }
    95% { 
        opacity: 0.6; 
        text-shadow: 0 0 1px rgba(255, 200, 0, 0.3); 
    }
    97% { 
        opacity: 0.8; 
        text-shadow: 0 0 2px rgba(255, 200, 0, 0.4); 
    }
}

/* --- AMBIENT GAS PULSE --- */
/* A deep, heavy violet glow that takes several seconds to warm up and cool down */
.AmbientGasPulse {
    font-family: 'Unifont', monospace;
    color: #e6ccff;
    animation: GasWarmup 6s ease-in-out infinite alternate;
    letter-spacing: 1px;
}

@keyframes GasWarmup {
    0% {
        text-shadow: 0 0 2px #9900ff, 0 0 5px #440099;
        color: #cc99ff;
    }
    100% {
        text-shadow: 0 0 5px #cc66ff, 0 0 15px #9900ff, 0 0 30px #6600cc;
        color: #ffffff;
    }
}

/* --- DEAD TUBE (OFF STATE) --- */
/* Unlit glass, highly useful for simulating broken letters in a larger neon sign */
.DeadTube {
    font-family: 'Unifont', monospace;
    color: #2a2a2a;
    text-shadow:
        1px 1px 0px rgba(255, 255, 255, 0.1),
        -1px -1px 0px rgba(0, 0, 0, 0.8);
}


/* --- DEEP ISOMETRIC --- */
/* A chunky, heavy 3D block text that casts a long, angled shadow */
.DeepIsometric {
    font-family: 'Unifont', monospace;
    color: #d0d0d0;
    text-shadow:
        -1px 1px 0 #555555,
        -2px 2px 0 #444444,
        -3px 3px 0 #333333,
        -4px 4px 0 #222222,
        -5px 5px 0 #111111,
        -6px 6px 0 #000000;
    letter-spacing: 2px;
    transform: skewX(-5deg);
    display: inline-block;
    font-weight: bold;
}

/* --- ANAGLYPH SHIFT --- */
/* Simulates old red/cyan 3D glasses offset on a dark background */
.AnaglyphShift {
    font-family: 'Unifont', monospace;
    color: #222222; 
    text-shadow: 
        -2px 0 0 rgba(255, 0, 0, 0.8),
        2px 0 0 rgba(0, 255, 255, 0.8);
    letter-spacing: 3px;
    background-color: #050505;
    padding: 2px 6px;
}

/* --- HOVER PARALLAX GHOST --- */
/* Text that separates into distinct depth layers moving at different speeds when the cursor hovers over it */
.HoverParallaxGhost {
    font-family: 'Unifont', monospace;
    position: relative;
    display: inline-block;
    color: #aaaaaa;
    cursor: crosshair;
}

.HoverParallaxGhost::before,
.HoverParallaxGhost::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: transform 1.5s ease, opacity 1.5s ease;
    pointer-events: none;
}

.HoverParallaxGhost::before {
    color: #555555;
    z-index: -1;
}

.HoverParallaxGhost::after {
    color: #333333;
    z-index: -2;
}

.HoverParallaxGhost:hover::before {
    transform: translate(-4px, -4px);
    opacity: 0.8;
}

.HoverParallaxGhost:hover::after {
    transform: translate(-8px, -8px);
    opacity: 0.5;
}

/* --- FLOATING MONOLITH --- */
/* A 3D object that slowly bobs along the Y-axis, altering its shadow to simulate depth */
.FloatingMonolith {
    font-family: 'Unifont', monospace;
    color: #ffffff;
    background-color: #1a1a1a;
    padding: 4px 10px;
    border: 1px solid #444444;
    display: inline-block;
    animation: SlowLevitate 6s ease-in-out infinite alternate;
}

@keyframes SlowLevitate {
    0% {
        transform: translateY(0px);
        box-shadow: 0px 5px 0px #000000, 0px 10px 15px rgba(0,0,0,0.5);
    }
    100% {
        transform: translateY(-5px);
        box-shadow: 0px 10px 0px #000000, 0px 20px 25px rgba(0,0,0,0.8);
    }
}


/* --- UNIVERSAL HIDDEN TOGGLE --- */
/* This class hides the physical checkbox, leaving only the label visible for interaction */
.HiddenToggle {
    display: none;
}

/* --- NEON COLD BOOT --- */
/* A dead tube that surges to life with a steady cyan glow when tapped */
.NeonColdBoot {
    font-family: 'Unifont', monospace;
    color: #333333;
    cursor: pointer;
    transition: color 2s ease, text-shadow 2s ease;
    letter-spacing: 2px;
}

.HiddenToggle:checked + .NeonColdBoot {
    color: #e0ffff;
    text-shadow:
        0 0 4px rgba(0, 255, 255, 0.4),
        0 0 10px rgba(0, 255, 255, 0.8),
        0 0 20px rgba(0, 200, 255, 1);
}

/* --- TACTILE DECK BUTTON --- */
/* A chunky, isometric 3D block that physically depresses along the Y-axis when activated */
.TactileDeckButton {
    font-family: 'Unifont', monospace;
    color: #888888;
    background-color: #111111;
    border: 2px solid #333333;
    padding: 6px 12px;
    display: inline-block;
    cursor: pointer;
    box-shadow: 0px 6px 0px #000000;
    transition: transform 0.1s ease, box-shadow 0.1s ease, color 0.5s ease;
    text-transform: uppercase;
}

.HiddenToggle:checked + .TactileDeckButton {
    transform: translateY(6px);
    box-shadow: 0px 0px 0px #000000;
    color: #00ff00;
    border-color: #005500;
}

/* --- RED SECTOR CONTAINMENT --- */
/* A dormant text block that, upon interaction, activates a slow, heavy red pulse associated with color G */
.RedSectorContainment {
    font-family: 'Unifont', monospace;
    color: #440000;
    border: 1px solid transparent;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 1.5s ease;
}

.HiddenToggle:checked + .RedSectorContainment {
    color: #ff0000;
    border: 1px solid #660000;
    background-color: #1a0000;
    box-shadow: inset 0 0 15px rgba(255, 0, 0, 0.2);
    animation: SlowRedPulse 4s infinite alternate;
}

@keyframes SlowRedPulse {
    0% { text-shadow: 0 0 2px #550000; }
    100% { text-shadow: 0 0 10px #ff0000, 0 0 20px #cc0000; }
}

/* --- CRYPTOGRAPHIC DECRYPTION --- */
/* Text that appears heavily corrupted and compressed, expanding and clarifying when tapped */
.CryptographicDecryption {
    font-family: 'Unifont', monospace;
    color: #555555;
    letter-spacing: -3px;
    filter: blur(2px);
    cursor: pointer;
    transition: letter-spacing 3s ease, filter 3s ease, color 3s ease;
    user-select: none;
}

.HiddenToggle:checked + .CryptographicDecryption {
    letter-spacing: 2px;
    filter: blur(0px);
    color: #ffffff;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
/*endregion*/







/* 
88888888ba 888888888888        88
88      "8b     88           ,d88
88      ,8P     88         888888
88aaaaaa8P'     88             88
88""""""'       88             88
88              88             88
88              88  888        88
88              88  888        88


 ad88888ba    ,ad8888ba,  88888888ba    ,ad8888ba,   88          88
d8"     "8b  d8"'    `"8b 88      "8b  d8"'    `"8b  88          88
Y8,         d8'           88      ,8P d8'        `8b 88          88
`Y8aaaaa,   88            88aaaaaa8P' 88          88 88          88
  `"""""8b, 88            88""""88'   88          88 88          88
        `8b Y8,           88    `8b   Y8,        ,8P 88          88
Y8a     a8P  Y8a.    .a8P 88     `8b   Y8a.    .a8P  88          88
 "Y88888P"    `"Y8888Y"'  88      `8b   `"Y8888Y"'   88888888888 88888888888


 */
/*region*/

/* --- SCROLL FOCUS ANOMALY --- */
/* Text is highly blurred and translucent, becoming crystal clear only when in the center of the screen */
.ScrollFocusAnomaly {
    font-family: 'Unifont', monospace;
    color: #e0e0e0;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    animation: ScrollFocus linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
    display: inline-block;
}

@keyframes ScrollFocus {
    0% { filter: blur(8px); opacity: 0; transform: scale(0.9); }
    40%, 60% { filter: blur(0px); opacity: 1; transform: scale(1); }
    100% { filter: blur(8px); opacity: 0; transform: scale(1.1); }
}

/* --- SCROLL SPECTRAL SHIFT --- */
/* Text that warps its spacing, shadow depth, and color spectrum as it moves up or down the page */
.ScrollSpectralShift {
    font-family: 'Unifont', monospace;
    font-weight: bold;
    animation: SpectralShift linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
    display: inline-block;
}

@keyframes SpectralShift {
    0% { 
        color: #330000; 
        text-shadow: 2px 2px 0px #000000; 
        letter-spacing: -2px; 
    }
    50% { 
        color: #00ffcc; 
        text-shadow: -4px -4px 0px #005555; 
        letter-spacing: 5px; 
    }
    100% { 
        color: #330033; 
        text-shadow: 2px -2px 0px #000000; 
        letter-spacing: -2px; 
    }
}

/* --- SCROLL DEPTH DECAY --- */
/* Text that lies flat at the edges of the screen but extrudes into a heavy 3D block in the center */
.ScrollDepthDecay {
    font-family: 'Unifont', monospace;
    color: #aaaaaa;
    animation: DepthDecay linear both;
    animation-timeline: view();
    animation-range: entry 10% exit 90%;
    display: inline-block;
}

@keyframes DepthDecay {
    0% { 
        text-shadow: 0px 0px 0 #000000; 
        transform: translateY(0); 
    }
    50% { 
        text-shadow: 
            -1px 1px 0 #555555, 
            -2px 2px 0 #444444, 
            -3px 3px 0 #333333, 
            -4px 4px 0 #222222, 
            -5px 5px 0 #111111,
            -6px 6px 0 #000000; 
        transform: translateY(-6px); 
        color: #ffffff;
    }
    100% { 
        text-shadow: 0px 0px 0 #000000; 
        transform: translateY(0); 
    }
}

/* --- SCROLL CHRONO GLITCH --- */
/* Applies a fixed gradient background to the text that shifts hue and position based on scroll velocity and location */
.ScrollChronoGlitch {
    font-family: 'Unifont', monospace;
    color: transparent;
    background: repeating-linear-gradient(
        0deg,
        #ff0055 0%,
        #00ffff 50%,
        #ff0055 100%
    );
    background-size: 100% 400%;
    -webkit-background-clip: text;
    animation: BackgroundScrollShift linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
    display: inline-block;
    font-weight: bold;
}

@keyframes BackgroundScrollShift {
    0% { background-position: 0% 0%; filter: hue-rotate(0deg); }
    100% { background-position: 0% 100%; filter: hue-rotate(360deg); }
}




/* --- SCROLL REVEAL DARKNESS --- */
/* The paragraph remains cloaked in shadow at the edges of the screen, illuminating only when dead center */
.ScrollRevealDarkness {
    font-family: 'Unifont', monospace;
    color: #dfdfdf;
    background-color: #050505;
    padding: 15px 20px;
    border-left: 4px solid #333333;
    animation: RevealFromDarkness linear both;
    animation-timeline: view();
    animation-range: cover 10% cover 90%;
    line-height: 1.6;
}

@keyframes RevealFromDarkness {
    0% { 
        color: #111111; 
        text-shadow: 0 0 10px #000000; 
        border-color: #050505; 
        filter: blur(2px);
    }
    50% { 
        color: #dfdfdf; 
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.4); 
        border-color: #ffffff; 
        filter: blur(0px);
    }
    100% { 
        color: #111111; 
        text-shadow: 0 0 10px #000000; 
        border-color: #050505; 
        filter: blur(2px);
    }
}

/* --- RED SECTOR DATA BLOCK --- */
/* A heavy, contained block that shifts its internal glow based on scroll position, simulating a scanning laser */
.RedSectorDataBlock {
    font-family: 'Unifont', monospace;
    color: #ccaaaa;
    background-color: #1a0505;
    padding: 20px;
    border: 1px solid #440000;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.9);
    animation: RedSectorScan linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
    line-height: 1.5;
    text-align: justify;
}

@keyframes RedSectorScan {
    0% { 
        background: linear-gradient(180deg, #330000 0%, #1a0505 20%, #1a0505 100%);
        border-top-color: #ff0000;
        border-bottom-color: #440000;
    }
    50% { 
        background: linear-gradient(180deg, #1a0505 40%, #440000 50%, #1a0505 60%);
        border-top-color: #440000;
        border-bottom-color: #440000;
    }
    100% { 
        background: linear-gradient(180deg, #1a0505 0%, #1a0505 80%, #330000 100%);
        border-top-color: #440000;
        border-bottom-color: #ff0000;
    }
}

/* --- DEEP INSET TERMINAL --- */
/* Simulates a physical recess in the screen. The shadows shift as the scrollbar moves, mimicking a change in perspective */
.DeepInsetTerminal {
    font-family: 'Unifont', monospace;
    color: #889988;
    background-color: #0a0e0a;
    padding: 25px;
    margin: 20px 0;
    animation: InsetPerspectiveShift linear both;
    animation-timeline: view();
    animation-range: cover 10% cover 90%;
    line-height: 1.6;
}

@keyframes InsetPerspectiveShift {
    0% { 
        box-shadow: inset 0px 30px 20px -15px rgba(0, 20, 0, 0.8), inset 0px -5px 10px rgba(0,0,0,0.9); 
        transform: scale(0.98) translateY(-5px);
    }
    50% { 
        box-shadow: inset 0px 0px 25px 5px rgba(0, 30, 0, 0.5); 
        transform: scale(1) translateY(0px);
    }
    100% { 
        box-shadow: inset 0px -30px 20px -15px rgba(0, 20, 0, 0.8), inset 0px 5px 10px rgba(0,0,0,0.9); 
        transform: scale(0.98) translateY(5px);
    }
}

/* --- DEGRADED PARAGRAPH MATRIX --- */
/* Text that suffers from severe chromatic aberration and structural decay at the viewport edges, stabilizing in the middle */
.DegradedParagraphMatrix {
    font-family: 'Unifont', monospace;
    color: #bbbbbb;
    padding: 15px;
    border-left: 2px dashed #555555;
    animation: MatrixStabilization linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
    line-height: 1.4;
    letter-spacing: 1px;
}

@keyframes MatrixStabilization {
    0% {
        text-shadow: 4px 0 0 rgba(255, 0, 0, 0.7), -4px 0 0 rgba(0, 255, 255, 0.7);
        opacity: 0.4;
        transform: skewX(-5deg);
    }
    40%, 60% {
        text-shadow: 1px 0 0 rgba(255, 0, 0, 0.3), -1px 0 0 rgba(0, 255, 255, 0.3);
        opacity: 1;
        transform: skewX(0deg);
    }
    100% {
        text-shadow: -4px 0 0 rgba(255, 0, 0, 0.7), 4px 0 0 rgba(0, 255, 255, 0.7);
        opacity: 0.4;
        transform: skewX(5deg);
    }
}



/* --- CYAN CRT TERMINAL --- */
/* Simulates a curved CRT monitor with a dark cyan background, heavy text glow, and a static scanline overlay */
.CyanCrtTerminal {
    font-family: 'Unifont', monospace;
    color: #00ffff;
    background-color: #001111;
    padding: 25px;
    position: relative;
    border-radius: 12px;
    box-shadow: inset 0 0 25px #004444, 0 0 15px rgba(0, 0, 0, 0.8);
    text-shadow: 0 0 4px #00ffff;
    line-height: 1.6;
    overflow: hidden;
}

/* The physical scanline filter */
.CyanCrtTerminal::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.2) 0px,
        rgba(0, 0, 0, 0.2) 2px,
        transparent 2px,
        transparent 4px
    );
    pointer-events: none;
    border-radius: 12px;
    z-index: 2;
}
/*endregion*/









/*
 ad88888ba    ,ad8888ba,  88888888ba    ,ad8888ba,   88          88
d8"     "8b  d8"'    `"8b 88      "8b  d8"'    `"8b  88          88
Y8,         d8'           88      ,8P d8'        `8b 88          88
`Y8aaaaa,   88            88aaaaaa8P' 88          88 88          88
  `"""""8b, 88            88""""88'   88          88 88          88
        `8b Y8,           88    `8b   Y8,        ,8P 88          88
Y8a     a8P  Y8a.    .a8P 88     `8b   Y8a.    .a8P  88          88
 "Y88888P"    `"Y8888Y"'  88      `8b   `"Y8888Y"'   88888888888 88888888888
*/
/*region*/

/* --- PHOSPHOR GHOST SCROLL --- */
/* A scroll-driven effect where the text leaves a glowing, lagging vertical trail simulating phosphor burn-in on an old screen */
.PhosphorGhostScroll {
    font-family: 'Unifont', monospace;
    color: #bbf7f7;
    background-color: #000808;
    padding: 20px;
    border: 1px solid #004444;
    animation: GhostBurnIn linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
    line-height: 1.5;
}
@keyframes GhostBurnIn {
    0% { 
        text-shadow: 0 -20px 15px rgba(0, 255, 255, 0.3), 0 0 2px #00ffff; 
        opacity: 0.6; 
    }
    50% { 
        text-shadow: 0 0 8px rgba(0, 255, 255, 0.9), 0 0 2px #00ffff; 
        opacity: 1; 
    }
    100% { 
        text-shadow: 0 20px 15px rgba(0, 255, 255, 0.3), 0 0 2px #00ffff; 
        opacity: 0.6; 
    }
}
/* --- DEEP CYAN MAINFRAME --- */
/* A heavy, structural data block with a solid cyan border that brightens significantly when the mouse hovers over the block */
.DeepCyanMainframe {
    font-family: 'Unifont', monospace;
    color: #66bbbb;
    background-color: #00151a;
    padding: 20px 25px;
    border-left: 6px solid #008888;
    box-shadow: -5px 0 20px -5px rgba(0, 255, 255, 0.2);
    transition: color 3s ease, text-shadow 3s ease, border-color 3s ease, box-shadow 3s ease;
    line-height: 1.6;}
.DeepCyanMainframe:hover {
    color: #ffffff;
    border-left: 6px solid #00ffff;
    text-shadow: 0 0 8px #00ffff, 0 0 15px #00aaaa;
    box-shadow: -5px 0 20px -5px rgba(0, 255, 255, 0.8);
}

/* --- SUBMERGED DATA FEED --- */
/* Text that constantly cycles between a blurred, out-of-focus state and sharp clarity, simulating a faulty data connection */
.SubmergedDataFeed {
    font-family: 'Unifont', monospace;
    color: rgba(0, 255, 255, 0.5);
    background-color: #000a0a;
    padding: 20px;
    border: 1px dashed #005555;
    animation: SubmergedBreathe 7s ease-in-out infinite alternate;
    line-height: 1.5;
}
@keyframes SubmergedBreathe {
    0% { 
        filter: blur(1.5px); 
        color: rgba(0, 200, 255, 0.4); 
        text-shadow: 0 0 15px rgba(0, 100, 150, 0.8); 
    }
    100% { 
        filter: blur(0px); 
        color: rgba(0, 255, 255, 0.95); 
        text-shadow: 0 0 5px #00ffff; 
    }
}
/* --- IRIDESCENT OIL SPILL --- */
/* Text that cycles slowly through muted, eerie spectrums over a dark background */
.IridescentOilSpill {
    font-family: 'Unifont', monospace;
    white-space: pre-wrap; 
    color: transparent;
    background: linear-gradient(90deg, #554455, #445555, #555544, #554455);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: SlowIridescence 12s ease-in-out infinite alternate;
    font-weight: bold;
    background-color: #0a0a0a;
    padding: 20px;
    border: 1px solid #222222;
    line-height: 1.5;
}

@keyframes SlowIridescence {
    0% { background-position: 0% 50%; filter: drop-shadow(0 0 2px rgba(85, 68, 85, 0.5)); }
    100% { background-position: 100% 50%; filter: drop-shadow(0 0 6px rgba(68, 85, 85, 0.8)); }
}

/* --- TRANSLUCENT VEIL --- */
/* A frosted glass effect using a backdrop filter. Text is barely visible until focused by a cursor hover */
.TranslucentVeil {
    font-family: 'Unifont', monospace;
    white-space: pre-wrap;
    color: rgba(220, 220, 220, 0.3);
    background-color: rgba(15, 15, 15, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
    transition: color 4s ease, background-color 4s ease;
    line-height: 1.6;
}

.TranslucentVeil:hover {
    color: rgba(220, 220, 220, 0.9);
    background-color: rgba(15, 15, 15, 0.7);
}

/* --- OPAQUE MONOLITH --- */
/* A completely dense, light-absorbing block that casts a stark, pitch-black geometric shadow */
.OpaqueMonolith {
    font-family: 'Unifont', monospace;
    white-space: pre-wrap;
    color: #999999;
    background-color: #030303;
    padding: 25px;
    border-top: 4px solid #333333;
    border-left: 4px solid #222222;
    box-shadow: 12px 12px 0px #000000;
    text-shadow: 1px 1px 0px #000000;
    line-height: 1.6;
}

/* --- PEARLESCENT DECAY --- */
/* A semi-opaque block with text that faintly shifts between pale sickly green and pale magenta */
.PearlescentDecay {
    font-family: 'Unifont', monospace;
    white-space: pre-wrap;
    background-color: rgba(5, 5, 5, 0.85);
    padding: 20px;
    border: 1px solid rgba(200, 220, 200, 0.1);
    color: #d8d8d8;
    text-shadow: 
        0 0 4px rgba(200, 255, 200, 0.3), 
        0 0 8px rgba(255, 200, 255, 0.2);
    animation: PearlBreathe 8s ease-in-out infinite alternate;
    line-height: 1.5;
}

@keyframes PearlBreathe {
    0% {
        text-shadow: 0 0 4px rgba(200, 255, 200, 0.3), 0 0 8px rgba(255, 200, 255, 0.2);
        box-shadow: inset 0 0 10px rgba(20, 40, 20, 0.4);
    }
    100% {
        text-shadow: 0 0 6px rgba(200, 255, 255, 0.4), 0 0 12px rgba(255, 255, 200, 0.3);
        box-shadow: inset 0 0 30px rgba(40, 20, 40, 0.6);
    }
}

/* --- GHOST IRIDESCENCE --- */
/* Text that cycles slowly through an iridescent gradient using background-clip, without an actual background box */
.GhostIridescence {
    font-family: 'Unifont', monospace;
    white-space: pre-wrap;
    color: transparent;
    background: linear-gradient(90deg, #556677, #8899aa, #aabbcc, #556677);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: SlowTextIridescence 10s ease-in-out infinite alternate;
    text-shadow: 0 0 10px rgba(136, 153, 170, 0.1);
    line-height: 1.6;
}

@keyframes SlowTextIridescence {
    0% { background-position: 0% 50%; filter: drop-shadow(0 0 1px rgba(85, 102, 119, 0.3)); }
    100% { background-position: 100% 50%; filter: drop-shadow(0 0 4px rgba(170, 187, 204, 0.6)); }
}

/* --- FROSTED GLASS TEXT --- */
/* Text that is highly translucent and low-contrast, stepping into sharp focus only when hovered over */
.FrostedGlassText {
    font-family: 'Unifont', monospace;
    white-space: pre-wrap;
    color: rgba(200, 200, 200, 0.15);
    text-shadow:
        1px 1px 0px rgba(0, 0, 0, 0.4),
        0 0 8px rgba(255, 255, 255, 0.05);
    transition: color 4s ease, text-shadow 4s ease;
    line-height: 1.6;
}

.FrostedGlassText:hover {
    color: rgba(220, 220, 220, 0.85);
    text-shadow:
        1px 1px 0px rgba(0, 0, 0, 0.9),
        0 0 12px rgba(255, 255, 255, 0.3);
}

/* --- VOID OPAQUE TEXT --- */
/* Ultra-dense, dark text that creates the illusion of a physical void or hole cut out of the page */
.VoidOpaqueText {
    font-family: 'Unifont', monospace;
    white-space: pre-wrap;
    color: #070707;
    text-shadow:
        -1px -1px 0 rgba(255, 255, 255, 0.1),
        1px 1px 0 #000000,
        2px 2px 3px rgba(0, 0, 0, 0.9);
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 1.6;
}

/* --- ETHEREAL SHIMMER --- */
/* A phantom text block that slowly breathes in and out of the environment, shifting its blur and opacity */
.EtherealShimmer {
    font-family: 'Unifont', monospace;
    white-space: pre-wrap;
    color: #cceebb; /* Pale sickly bioluminescent green */
    animation: EtherealBreathe 9s ease-in-out infinite alternate;
    line-height: 1.6;
}

@keyframes EtherealBreathe {
    0% {
        opacity: 0.25;
        filter: blur(2px);
        text-shadow: 0 0 2px rgba(204, 238, 187, 0.1);
    }
    100% {
        opacity: 0.9;
        filter: blur(0px);
        text-shadow: 0 0 8px rgba(204, 238, 187, 0.5), 0 0 15px rgba(150, 200, 120, 0.3);
    }
}
/*endregion*/




/*
  ,ad8888ba,  88        88 88888888ba   ad88888ba  88
 d8"'    `"8b 88        88 88      "8b d8"     "8b 88
d8'           88        88 88      ,8P Y8,         88
88            88        88 88aaaaaa8P' `Y8aaaaa,   88
88            88        88 88""""88'     `"""""8b, 88
Y8,           88        88 88    `8b           `8b 88
 Y8a.    .a8P Y8a.    .a8P 88     `8b  Y8a     a8P 88
  `"Y8888Y"'   `"Y8888Y"'  88      `8b  "Y88888P"  88

*/
/*region*/



/* --- REDACTED CENSOR BAR --- */
/* Completely masks text with a black floating bar, revealing it on hover */
.redacted-bar {
    font-family: 'Unifont', monospace;
    background-color: #000000;
    color: #000000;
    text-shadow: none;
    padding: 0px 4px;
    border-radius: 2px;
    user-select: none;
    transition: color 0.3s ease, background-color 0.3s ease, text-shadow 0.3s ease;
}

.redacted-bar:hover {
    background-color: #1a1a1a;
    color: #00ff00; /* Turns glowing terminal green on hover; change to #ffffff for plain white text */
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
    user-select: text;
}

/* --- REDACTED FLOATING CENSOR BAR (HARD CRISP SHADOW) --- */
.redacted {
    font-family: 'Unifont', monospace;
    background-color: #16161D;
    color: #16161D;
    text-shadow: none;
    padding: 1px 6px;
    margin: 0px 2px;
    display: inline; /* Keeps it inline so multi-line text wraps naturally */
    box-shadow: 
        2px 2px 0px #050505, 
        4px 4px 0px #101010; /* Hard, pixel-crisp retro shadow */
    transform: translateY(-2px);
    user-select: none;
    transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.redacted:hover {
    background-color: #1a1a1a;
    color: #dfdfdf;
    box-shadow: 1px 1px 0px #000000; /* Depresses slightly on hover */
    transform: translateY(0px);
    user-select: text;
}

/* --- RANSOM NOTE SERIF --- */
/* A stark, high-contrast serif block that sits at an unnatural angle, simulating a cutout pasted onto the page */
.RansomNoteSerif {
    font-family: 'Times New Roman', Times, serif;
    white-space: pre-wrap;
    color: #dfdfdf;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1.1em;
    text-shadow: 
        2px 2px 0px #000000, 
        -1px -1px 0px rgba(0, 0, 0, 0.8);
    filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.6));
    transform: rotate(-0.5deg);
    line-height: 1.4;
}

/* --- DISTRESSED TYPEWRITER --- */
/* Monospace serif mimicking faded, bleeding ink from an old typewriter ribbon that slowly shifts in clarity */
.DistressedTypewriter {
    font-family: 'Courier New', Courier, monospace;
    white-space: pre-wrap;
    color: rgba(190, 190, 190, 0.75);
    text-shadow: 
        0 0 1px rgba(200, 200, 200, 0.4), 
        1px 1px 2px rgba(0, 0, 0, 0.9);
    animation: RibbonFlicker 7s infinite alternate ease-in-out;
    line-height: 1.5;
}

@keyframes RibbonFlicker {
    0% { opacity: 0.65; filter: blur(0px); text-shadow: 0 0 1px rgba(190, 190, 190, 0.3); }
    50% { opacity: 0.9; filter: blur(0.6px); text-shadow: 0 0 3px rgba(190, 190, 190, 0.6); }
    100% { opacity: 0.5; filter: blur(1.2px); text-shadow: 0 0 1px rgba(190, 190, 190, 0.2); }
}

/* --- VICTORIAN BROADSHEET --- */
/* Heavy, formal serif text mimicking an old 1800s newspaper with dark ink that bleeds slowly into the page */
.VictorianBroadsheet {
    font-family: 'Georgia', 'Times New Roman', serif;
    white-space: pre-wrap;
    color: #c4b5a2; /* Aged paper/ink hybrid color */
    letter-spacing: -0.5px;
    line-height: 1.2;
    animation: InkBleed 10s infinite alternate;
}

@keyframes InkBleed {
    0% { 
        text-shadow: 0 0 2px rgba(196, 181, 162, 0.3), 1px 1px 1px #000000; 
    }
    100% { 
        text-shadow: 0 0 5px rgba(196, 181, 162, 0.5), 0 0 15px rgba(0, 0, 0, 0.9); 
    }
}

/* --- COLLAGE CUTOUT SHIFT --- */
/* Uses CSS pseudo-elements to force the first letter and first line of a paragraph into entirely different fonts, creating a chaotic ransom note collage effect automatically */
.CollageCutoutShift {
    font-family: 'Times New Roman', Times, serif;
    white-space: pre-wrap;
    color: #cccccc;
    line-height: 1.6;
    text-shadow: 2px 2px 4px #000000;
}

.CollageCutoutShift::first-letter {
    font-family: 'Courier New', monospace;
    font-size: 2.5em;
    color: #990000;
    float: left;
    padding-right: 6px;
    line-height: 0.8;
    text-shadow: 3px 3px 0px #110000;
    transform: rotate(6deg);
}

.CollageCutoutShift::first-line {
    font-family: 'Arial Black', Impact, sans-serif;
    font-size: 1.05em;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #999999;
}
/* --- MASS COLLAGE BLOCK (COMPLETE) --- */
.MassCollageBlock {
    position: relative;
    background-color: #dcd6c8;
    background-image: url('data:image/svg+xml;utf8,<svg width="10" height="10" xmlns="http://www.w3.org/2000/svg"><rect width="10" height="10" fill="rgba(0,0,0,0.05)"/></svg>');
    padding: 25px;
    border: 1px solid #c0b59b;
    box-shadow: 4px 4px 5px rgba(0,0,0,0.2);
    transform: rotate(-0.5deg);
    font-family: 'Courier New', 'Times New Roman', serif;
    font-weight: bold;
    color: #1a1a1a;
    line-height: 1.5;
    white-space: pre-wrap;
    margin: 20px 0;
}

.MassCollageBlock::before {
    content: " ";
    position: absolute;
    top: -8px;
    left: 40%;
    width: 70px;
    height: 18px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    transform: rotate(2deg);
    pointer-events: none;
}
/*endregion*/






/*
88          ,ad8888ba,        db        88888888ba,   88 888b      88   ,ad8888ba,
88         d8"'    `"8b      d88b       88      `"8b  88 8888b     88  d8"'    `"8b
88        d8'        `8b    d8'`8b      88        `8b 88 88 `8b    88 d8'
88        88          88   d8'  `8b     88         88 88 88  `8b   88 88
88        88          88  d8YaaaaY8b    88         88 88 88   `8b  88 88      88888
88        Y8,        ,8P d8""""""""8b   88         8P 88 88    `8b 88 Y8,        88
88         Y8a.    .a8P d8'        `8b  88      .a8P  88 88     `8888  Y8a.    .a88
88888888888 `"Y8888Y"' d8'          `8b 88888888Y"'   88 88      `888   `"Y88888P"
*/
/* =========================================
   Loading Wave Text Effect
========================================= */
/*region*/

:root {
    --LoadingBounceHeight: -6px; /* Increased height for more movement */
    --LoadingSpeed: 3.5s; /* Longer duration creates the pause at the end */
}

/* Include font override for the new class */
.LoadingWaveText,
.LoadingWaveText span {
    font-family: "GNU Unifont", "Unifont", monospace !important;
}

.LoadingWaveText {
    display: inline-block;
    white-space: pre; 
}

.LoadingWaveText span {
    display: inline-block;
    animation: LoadingBounce var(--LoadingSpeed) infinite ease-in-out;
}

/* 
   Squishing the jump into the first 12% of the animation creates 
   a ~0.42s jump window. The rest of the time (12% to 100%) is the wait.
*/
@keyframes LoadingBounce {
    0%, 12%, 100% { transform: translateY(0); }
    6% { transform: translateY(var(--LoadingBounceHeight)); }
}

/* 
   Positive delays ensure the letters fire sequentially.
   The wave finishes around 2.3s, leaving a clean pause before looping.
*/
.LoadingWaveText span:nth-child(1) { animation-delay: 0.0s; }
.LoadingWaveText span:nth-child(2) { animation-delay: 0.1s; }
.LoadingWaveText span:nth-child(3) { animation-delay: 0.2s; }
.LoadingWaveText span:nth-child(4) { animation-delay: 0.3s; }
.LoadingWaveText span:nth-child(5) { animation-delay: 0.4s; }
.LoadingWaveText span:nth-child(6) { animation-delay: 0.5s; }
.LoadingWaveText span:nth-child(7) { animation-delay: 0.6s; }
.LoadingWaveText span:nth-child(8) { animation-delay: 0.7s; }
.LoadingWaveText span:nth-child(9) { animation-delay: 0.8s; }
.LoadingWaveText span:nth-child(10) { animation-delay: 0.9s; }
.LoadingWaveText span:nth-child(11) { animation-delay: 1.0s; }
.LoadingWaveText span:nth-child(12) { animation-delay: 1.1s; }
.LoadingWaveText span:nth-child(13) { animation-delay: 1.2s; }
.LoadingWaveText span:nth-child(14) { animation-delay: 1.3s; }
.LoadingWaveText span:nth-child(15) { animation-delay: 1.4s; }
.LoadingWaveText span:nth-child(16) { animation-delay: 1.5s; }
.LoadingWaveText span:nth-child(17) { animation-delay: 1.6s; }
.LoadingWaveText span:nth-child(18) { animation-delay: 1.7s; }
.LoadingWaveText span:nth-child(19) { animation-delay: 1.8s; }
.LoadingWaveText span:nth-child(20) { animation-delay: 1.9s; }
/*endregion*/
/* ==========================================================================
   Base Shared Callout Styles (Structural Reset & Hovering Effect)
   ========================================================================== */
.callout[data-callout^="fake-heading"],
.callout[data-callout^="fh"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 1em 0;
    overflow: visible !important;
}

/* Use > to target ONLY the outer icon, title, and content. Prevents leaking into nested callouts! */
.callout[data-callout^="fake-heading"] > .callout-icon,
.callout[data-callout^="fh"] > .callout-icon {
    display: none !important;
}

.callout[data-callout^="fake-heading"] > .callout-title,
.callout[data-callout^="fh"] > .callout-title {
    position: relative;
    z-index: 2;
    padding: 4px;
    box-shadow: -5px 5px 1px black, 7px 7px 0px white;
}

.callout[data-callout^="fake-heading"] > .callout-title > .callout-title-inner,
.callout[data-callout^="fh"] > .callout-title > .callout-title-inner {
    font-weight: bold;
    text-align: center;
    width: 100%;
}

.callout[data-callout^="fake-heading"] > .callout-content,
.callout[data-callout^="fh"] > .callout-content {
    position: relative;
    z-index: 1;
    margin: -4px 20px 25px 20px !important;
    border-radius: 0 !important;
    padding: 30px 20px 20px 20px !important;
    box-shadow: -5px 5px 0px black, -10px 10px 0px #ffb3ff, 10px 9px 0px #b3e6ff !important;
}


/* ==========================================================================
   Variant 1: Original / Default (`fake-heading` / `fh`)
   ========================================================================== */
.callout[data-callout="fake-heading"] > .callout-title,
.callout[data-callout="fh"] > .callout-title {
    background-color: bisque;
    border: 4px double black !important;
    padding: 1px;
}
.callout[data-callout="fake-heading"] > .callout-title > .callout-title-inner,
.callout[data-callout="fh"] > .callout-title > .callout-title-inner {
    font-size: 1.5em;
    color: white;
    text-shadow: -3px 3px 0px green, -6px 6px 0px orange, -9px 9px 0px papayawhip, -12px 12px 0px rgba(255, 113, 206, 0.1);
}
.callout[data-callout="fake-heading"] > .callout-title .callout-fold,
.callout[data-callout="fh"] > .callout-title .callout-fold { color: black; }
.callout[data-callout="fake-heading"] > .callout-content,
.callout[data-callout="fh"] > .callout-content {
    background-color: #f0f4ff !important;
    color: #111 !important;
    border: 3px solid black !important;
}


/* ==========================================================================
   Variant 2: Lavender (`fake-heading-lavender` / `fhl`)
   ========================================================================== */
.callout[data-callout="fake-heading-lavender"] > .callout-title,
.callout[data-callout="fhl"] > .callout-title {
    background-color: #d8bfd8;
    border: 4px double #4b0082 !important;
}
.callout[data-callout="fake-heading-lavender"] > .callout-title > .callout-title-inner,
.callout[data-callout="fhl"] > .callout-title > .callout-title-inner {
    font-size: 1.3rem;
    color: #4b0082;
    text-shadow: -2px 2px 0px white, -4px 4px 0px rgba(75, 0, 130, 0.2);
}
.callout[data-callout="fake-heading-lavender"] > .callout-title .callout-fold,
.callout[data-callout="fhl"] > .callout-title .callout-fold { color: #4b0082; }
.callout[data-callout="fake-heading-lavender"] > .callout-content,
.callout[data-callout="fhl"] > .callout-content {
    background-color: #fcf4fc !important;
    color: #111 !important;
    border: 3px solid #4b0082 !important;
}


/* ==========================================================================
   Variant 3: Terminal (`fake-heading-terminal` / `fht`)
   ========================================================================== */
.callout[data-callout="fake-heading-terminal"] > .callout-title,
.callout[data-callout="fht"] > .callout-title {
    background-color: #000000;
    border: 2px solid #00ff00 !important;
    padding: 6px;
}
.callout[data-callout="fake-heading-terminal"] > .callout-title > .callout-title-inner,
.callout[data-callout="fht"] > .callout-title > .callout-title-inner {
    font-family: monospace;
    font-size: 1.1rem;
    color: #00ff00;
    text-align: left;
    text-indent: 10px;
    text-shadow: 0px 0px 8px #00ff00;
}
.callout[data-callout="fake-heading-terminal"] > .callout-title .callout-fold,
.callout[data-callout="fht"] > .callout-title .callout-fold { color: #00ff00; }
.callout[data-callout="fake-heading-terminal"] > .callout-content,
.callout[data-callout="fht"] > .callout-content {
    background-color: #050f05 !important;
    color: #00ff00 !important;
    border: 2px solid #00ff00 !important;
    margin-top: -2px !important;
}


/* ==========================================================================
   Variant 4: Sunset (`fake-heading-sunset` / `fhsu`)
   ========================================================================== */
.callout[data-callout="fake-heading-sunset"] > .callout-title,
.callout[data-callout="fhsu"] > .callout-title {
    background-color: #ff7f50;
    border: 4px double #ffffff !important;
    padding: 2px;
}
.callout[data-callout="fake-heading-sunset"] > .callout-title > .callout-title-inner,
.callout[data-callout="fhsu"] > .callout-title > .callout-title-inner {
    font-size: 1.4em;
    color: #ffffff;
    text-shadow: -2px 2px 0px #8b0000, -4px 4px 0px #ff4500, -6px 6px 0px rgba(0, 0, 0, 0.5);
}
.callout[data-callout="fake-heading-sunset"] > .callout-title .callout-fold,
.callout[data-callout="fhsu"] > .callout-title .callout-fold { color: #ffffff; }
.callout[data-callout="fake-heading-sunset"] > .callout-content,
.callout[data-callout="fhsu"] > .callout-content {
    background-color: #fff8f0 !important;
    color: #111 !important;
    border: 3px solid #8b0000 !important;
}


/* ==========================================================================
   Variant 5: Mint (`fake-heading-mint` / `fhm`)
   ========================================================================== */
.callout[data-callout="fake-heading-mint"] > .callout-title,
.callout[data-callout="fhm"] > .callout-title {
    background-color: #e0f8ea;
    border: 3px dashed #2e8b57 !important;
    padding: 5px;
}
.callout[data-callout="fake-heading-mint"] > .callout-title > .callout-title-inner,
.callout[data-callout="fhm"] > .callout-title > .callout-title-inner {
    font-size: 1.2rem;
    color: #2e8b57;
    text-shadow: 1px 1px 0px #a3e4d7, 2px 2px 0px #ffffff;
}
.callout[data-callout="fake-heading-mint"] > .callout-title .callout-fold,
.callout[data-callout="fhm"] > .callout-title .callout-fold { color: #2e8b57; }
.callout[data-callout="fake-heading-mint"] > .callout-content,
.callout[data-callout="fhm"] > .callout-content {
    background-color: #f4fcf7 !important;
    color: #111 !important;
    border: 2px dashed #2e8b57 !important;
}


/* ==========================================================================
   Variant 6: Neon Blue (`fake-heading-neon-blue` / `fhnb`)
   ========================================================================== */
.callout[data-callout="fake-heading-neon-blue"] > .callout-title,
.callout[data-callout="fhnb"] > .callout-title {
    background-color: #0b0c10;
    border: 4px solid #66fcf1 !important;
}
.callout[data-callout="fake-heading-neon-blue"] > .callout-title > .callout-title-inner,
.callout[data-callout="fhnb"] > .callout-title > .callout-title-inner {
    font-size: 1.3em;
    color: #66fcf1;
    text-shadow: -2px 2px 0px #45a29e, -4px 4px 0px rgba(102, 252, 241, 0.4);
}
.callout[data-callout="fake-heading-neon-blue"] > .callout-title .callout-fold,
.callout[data-callout="fhnb"] > .callout-title .callout-fold { color: #66fcf1; }
.callout[data-callout="fake-heading-neon-blue"] > .callout-content,
.callout[data-callout="fhnb"] > .callout-content {
    background-color: #12161a !important;
    color: #c5c6c7 !important;
    border: 3px solid #45a29e !important;
}


/* ==========================================================================
   Variant 7: Obsidian Gold (`fake-heading-obsidian-gold` / `fhog`)
   ========================================================================== */
.callout[data-callout="fake-heading-obsidian-gold"] > .callout-title,
.callout[data-callout="fhog"] > .callout-title {
    background-color: #2c221e;
    border: 4px double #d4af37 !important;
    padding: 2px;
}
.callout[data-callout="fake-heading-obsidian-gold"] > .callout-title > .callout-title-inner,
.callout[data-callout="fhog"] > .callout-title > .callout-title-inner {
    font-size: 1.3rem;
    color: #f3e5ab;
    text-shadow: -2px 2px 0px #d4af37, -4px 4px 0px rgba(0, 0, 0, 0.9);
}
.callout[data-callout="fake-heading-obsidian-gold"] > .callout-title .callout-fold,
.callout[data-callout="fhog"] > .callout-title .callout-fold { color: #f3e5ab; }
.callout[data-callout="fake-heading-obsidian-gold"] > .callout-content,
.callout[data-callout="fhog"] > .callout-content {
    background-color: #201815 !important;
    color: #f3e5ab !important;
    border: 3px solid #d4af37 !important;
}


/* ==========================================================================
   Variant 8: Retro Amber (`fake-heading-retro-amber` / `fhra`)
   ========================================================================== */
.callout[data-callout="fake-heading-retro-amber"] > .callout-title,
.callout[data-callout="fhra"] > .callout-title {
    background-color: #1a0f00;
    border: 3px solid #ffb000 !important;
    padding: 3px;
}
.callout[data-callout="fake-heading-retro-amber"] > .callout-title > .callout-title-inner,
.callout[data-callout="fhra"] > .callout-title > .callout-title-inner {
    font-family: monospace;
    font-size: 1.2rem;
    color: #ffb000;
    text-shadow: 0px 0px 6px #ffb000, -2px 2px 0px #552b00;
}
.callout[data-callout="fake-heading-retro-amber"] > .callout-title .callout-fold,
.callout[data-callout="fhra"] > .callout-title .callout-fold { color: #ffb000; }
.callout[data-callout="fake-heading-retro-amber"] > .callout-content,
.callout[data-callout="fhra"] > .callout-content {
    background-color: #120a00 !important;
    color: #ffb000 !important;
    border: 2px solid #ffb000 !important;
    margin-top: -3px !important;
}


/* ==========================================================================
   Variant 9: Crimson Void (`fake-heading-crimson-void` / `fhcv`)
   ========================================================================== */
.callout[data-callout="fake-heading-crimson-void"] > .callout-title,
.callout[data-callout="fhcv"] > .callout-title {
    background-color: #3d0c11;
    border: 4px double #ff6b6b !important;
    padding: 2px;
}
.callout[data-callout="fake-heading-crimson-void"] > .callout-title > .callout-title-inner,
.callout[data-callout="fhcv"] > .callout-title > .callout-title-inner {
    font-size: 1.4em;
    color: #ffe3e3;
    text-shadow: -3px 3px 0px #ff2a2a, -6px 6px 0px rgba(0, 0, 0, 0.8);
}
.callout[data-callout="fake-heading-crimson-void"] > .callout-title .callout-fold,
.callout[data-callout="fhcv"] > .callout-title .callout-fold { color: #ffe3e3; }
.callout[data-callout="fake-heading-crimson-void"] > .callout-content,
.callout[data-callout="fhcv"] > .callout-content {
    background-color: #26070b !important;
    color: #ffe3e3 !important;
    border: 3px solid #ff6b6b !important;
}


/* ==========================================================================
   Variant 10: Cyber Yellow (`fake-heading-cyber-yellow` / `fhcy`)
   ========================================================================== */
.callout[data-callout="fake-heading-cyber-yellow"] > .callout-title,
.callout[data-callout="fhcy"] > .callout-title {
    background-color: #ffeb3b;
    border: 4px solid black !important;
    padding: 2px;
}
.callout[data-callout="fake-heading-cyber-yellow"] > .callout-title > .callout-title-inner,
.callout[data-callout="fhcy"] > .callout-title > .callout-title-inner {
    font-size: 1.3rem;
    color: #000000;
    text-shadow: 2px 2px 0px #ffffff, -2px -2px 0px rgba(255, 87, 34, 0.4);
}
.callout[data-callout="fake-heading-cyber-yellow"] > .callout-title .callout-fold,
.callout[data-callout="fhcy"] > .callout-title .callout-fold { color: #000000; }
.callout[data-callout="fake-heading-cyber-yellow"] > .callout-content,
.callout[data-callout="fhcy"] > .callout-content {
    background-color: #fffde6 !important;
    color: #111 !important;
    border: 3px solid black !important;
}


/* ==========================================================================
   Variant 11: Deep Indigo (`fake-heading-deep-indigo` / `fhdi`)
   ========================================================================== */
.callout[data-callout="fake-heading-deep-indigo"] > .callout-title,
.callout[data-callout="fhdi"] > .callout-title {
    background-color: #1b1b2f;
    border: 4px double #e43f5a !important;
    padding: 2px;
}
.callout[data-callout="fake-heading-deep-indigo"] > .callout-title > .callout-title-inner,
.callout[data-callout="fhdi"] > .callout-title > .callout-title-inner {
    font-size: 1.3em;
    color: #e43f5a;
    text-shadow: -2px 2px 0px #1f4068, -4px 4px 0px rgba(228, 63, 90, 0.3);
}
.callout[data-callout="fake-heading-deep-indigo"] > .callout-title .callout-fold,
.callout[data-callout="fhdi"] > .callout-title .callout-fold { color: #e43f5a; }
.callout[data-callout="fake-heading-deep-indigo"] > .callout-content,
.callout[data-callout="fhdi"] > .callout-content {
    background-color: #12121d !important;
    color: #e43f5a !important;
    border: 3px solid #e43f5a !important;
}


/* ==========================================================================
   Variant 12: Salmon (`fake-heading-salmon` / `fhsa`)
   ========================================================================== */
.callout[data-callout="fake-heading-salmon"] > .callout-title,
.callout[data-callout="fhsa"] > .callout-title {
    background-color: lightcoral;
    border: 4px double black !important;
    padding: 1px;
}
.callout[data-callout="fake-heading-salmon"] > .callout-title > .callout-title-inner,
.callout[data-callout="fhsa"] > .callout-title > .callout-title-inner {
    color: white;
    text-shadow: -1.5px 1.5px 0px lightcyan, -1.5px 1.5px 0px lightcyan, -1.9px 1.9px 0px rgba(0, 0, 0, 0.9), -2.7px 2.7px 0px rgba(0,0,0, 0.981);
}
.callout[data-callout="fake-heading-salmon"] > .callout-title .callout-fold,
.callout[data-callout="fhsa"] > .callout-title .callout-fold { color: white; }
.callout[data-callout="fake-heading-salmon"] > .callout-content,
.callout[data-callout="fhsa"] > .callout-content {
    background-color: #fff0f0 !important;
    color: #111 !important;
    border: 3px solid black !important;
}


/* ==========================================================================
   Variant 13: Salmon 2 (`fake-heading-salmon-2` / `fhsa2`)
   ========================================================================== */
.callout[data-callout="fake-heading-salmon-2"] > .callout-title,
.callout[data-callout="fhsa2"] > .callout-title {
    background-color: mediumseagreen;
    border: 5px double black !important;
    padding: 1px;
}
.callout[data-callout="fake-heading-salmon-2"] > .callout-title > .callout-title-inner,
.callout[data-callout="fhsa2"] > .callout-title > .callout-title-inner {
    font-family: unifont;
    font-size: .95em;
    color: white;
    text-shadow: 1px -1px 0px black, -1px .5px 0px black, -1.5px 1.5px 0px lightcyan, -1.9px 1.9px 0px rgba(0, 0, 0, 0.9), -2.7px 2.7px 0px rgba(0,0,0, 0.981);
}
.callout[data-callout="fake-heading-salmon-2"] > .callout-title .callout-fold,
.callout[data-callout="fhsa2"] > .callout-title .callout-fold { color: white; }
.callout[data-callout="fake-heading-salmon-2"] > .callout-content,
.callout[data-callout="fhsa2"] > .callout-content {
    background-color: #f0f8f4 !important;
    color: #111 !important;
    border: 3px solid black !important;
}


/* ==========================================================================
   Variant 14: Cactus (`fake-heading-cactus` / `fhc`)
   ========================================================================== */
.callout[data-callout="fake-heading-cactus"] > .callout-title,
.callout[data-callout="fhc"] > .callout-title {
    background-color: mediumaquamarine;
    border: 4px double black !important;
    padding: 1px;
}
.callout[data-callout="fake-heading-cactus"] > .callout-title > .callout-title-inner,
.callout[data-callout="fhc"] > .callout-title > .callout-title-inner {
    font-size: .9rem;
    color: black;
    text-shadow: -3px 3px 0px slategrey, -6px 6px 0px grey, -9px 9px 0px rgba(255, 113, 206, 0.3), -12px 12px 0px rgba(255, 113, 206, 0.1);
}
.callout[data-callout="fake-heading-cactus"] > .callout-title .callout-fold,
.callout[data-callout="fhc"] > .callout-title .callout-fold { color: black; }
.callout[data-callout="fake-heading-cactus"] > .callout-content,
.callout[data-callout="fhc"] > .callout-content {
    background-color: #f0f9f6 !important;
    color: #111 !important;
    border: 3px solid black !important;
}


/* ==========================================================================
   Variant 15: Teal (`fake-heading-teal` / `fhte`)
   ========================================================================== */
.callout[data-callout="fake-heading-teal"] > .callout-title,
.callout[data-callout="fhte"] > .callout-title {
    background-color: #f3e8ff;
    border: 4px solid #a8e6cf !important;
    padding: 15px;
}
.callout[data-callout="fake-heading-teal"] > .callout-title > .callout-title-inner,
.callout[data-callout="fhte"] > .callout-title > .callout-title-inner {
    color: #3d2c5e;
    text-shadow: -3px 3px 0px rgba(168, 230, 207, 0.9), -6px 6px 0px rgba(168, 230, 207, 0.6), -9px 9px 0px rgba(168, 230, 207, 0.3), -12px 12px 0px rgba(168, 230, 207, 0.1);
}
.callout[data-callout="fake-heading-teal"] > .callout-title .callout-fold,
.callout[data-callout="fhte"] > .callout-title .callout-fold { color: #3d2c5e; }
.callout[data-callout="fake-heading-teal"] > .callout-content,
.callout[data-callout="fhte"] > .callout-content {
    background-color: #faf5ff !important;
    color: #3d2c5e !important;
    border: 3px solid #a8e6cf !important;
}


/* ==========================================================================
   Variant 16: Pink (`fake-heading-pink` / `fhp`)
   ========================================================================== */
.callout[data-callout="fake-heading-pink"] > .callout-title,
.callout[data-callout="fhp"] > .callout-title {
    background-color: pink;
    border: 4px double black !important;
    padding: 1px;
}
.callout[data-callout="fake-heading-pink"] > .callout-title > .callout-title-inner,
.callout[data-callout="fhp"] > .callout-title > .callout-title-inner {
    font-size: 1.5em;
    color: white;
    text-shadow: -3px 3px 0px rgba(255, 113, 206, 0.9), -6px 6px 0px rgba(255, 113, 206, 0.6), -9px 9px 0px rgba(255, 113, 206, 0.3), -12px 12px 0px rgba(255, 113, 206, 0.1);
}
.callout[data-callout="fake-heading-pink"] > .callout-title .callout-fold,
.callout[data-callout="fhp"] > .callout-title .callout-fold { color: white; }
.callout[data-callout="fake-heading-pink"] > .callout-content,
.callout[data-callout="fhp"] > .callout-content {
    background-color: #fff0f5 !important;
    color: #111 !important;
    border: 3px solid black !important;
}


/* ==========================================================================
   Variant 17: Pink Smaller (`fake-heading-pink-smaller` / `fhps`)
   ========================================================================== */
.callout[data-callout="fake-heading-pink-smaller"] > .callout-title,
.callout[data-callout="fhps"] > .callout-title {
    background-color: pink;
    border: 4px double white !important;
    padding: 1px;
}
.callout[data-callout="fake-heading-pink-smaller"] > .callout-title > .callout-title-inner,
.callout[data-callout="fhps"] > .callout-title > .callout-title-inner {
    font-size: 1.3rem;
    color: white;
    text-shadow: -3px 3px 0px rgba(255, 113, 206, 0.9), -6px 6px 0px rgba(255, 113, 206, 0.6), -9px 9px 0px rgba(255, 113, 206, 0.3), -12px 12px 0px rgba(255, 113, 206, 0.1);
}
.callout[data-callout="fake-heading-pink-smaller"] > .callout-title .callout-fold,
.callout[data-callout="fhps"] > .callout-title .callout-fold { color: white; }
.callout[data-callout="fake-heading-pink-smaller"] > .callout-content,
.callout[data-callout="fhps"] > .callout-content {
    background-color: #fff0f5 !important;
    color: #111 !important;
    border: 3px solid white !important;
}


/* ==========================================================================
   Variant 18: White Pink (`fake-heading-white-pink` / `fhwp`)
   ========================================================================== */
.callout[data-callout="fake-heading-white-pink"] > .callout-title,
.callout[data-callout="fhwp"] > .callout-title {
    background-color: #f3e8ff;
    border: 4px solid #a8e6cf !important;
    padding: 15px;
    box-shadow: 10px 10px 0px #ffb7b2;
}
.callout[data-callout="fake-heading-white-pink"] > .callout-title > .callout-title-inner,
.callout[data-callout="fhwp"] > .callout-title > .callout-title-inner {
    color: #3d2c5e;
    text-shadow: -3px 3px 0px rgba(168, 230, 207, 0.9), -6px 6px 0px rgba(168, 230, 207, 0.6), -9px 9px 0px rgba(168, 230, 207, 0.3), -12px 12px 0px rgba(168, 230, 207, 0.1);
}
.callout[data-callout="fake-heading-white-pink"] > .callout-title .callout-fold,
.callout[data-callout="fhwp"] > .callout-title .callout-fold { color: #3d2c5e; }
.callout[data-callout="fake-heading-white-pink"] > .callout-content,
.callout[data-callout="fhwp"] > .callout-content {
    background-color: #faf5ff !important;
    color: #3d2c5e !important;
    border: 3px solid #a8e6cf !important;
    box-shadow: 10px 10px 0px #ffb7b2 !important;
}


/* ==========================================================================
   Variant 19: Purple (`fake-heading-purple` / `fhpu`)
   ========================================================================== */
.callout[data-callout="fake-heading-purple"] > .callout-title,
.callout[data-callout="fhpu"] > .callout-title {
    background-color: #2b1055;
    border: 4px double black !important;
    padding: 1px;
    box-shadow: 4px 4px 15px rgba(0, 0, 0, .99);
}
.callout[data-callout="fake-heading-purple"] > .callout-title > .callout-title-inner,
.callout[data-callout="fhpu"] > .callout-title > .callout-title-inner {
    color: white;
    text-shadow: -3px 3px 0px rgba(255, 113, 206, 0.9), -6px 6px 0px rgba(255, 113, 206, 0.6), -9px 9px 0px rgba(255, 113, 206, 0.3), -12px 12px 0px rgba(255, 113, 206, 0.1);
}
.callout[data-callout="fake-heading-purple"] > .callout-title .callout-fold,
.callout[data-callout="fhpu"] > .callout-title .callout-fold { color: white; }
.callout[data-callout="fake-heading-purple"] > .callout-content,
.callout[data-callout="fhpu"] > .callout-content {
    background-color: #1a0a33 !important;
    color: white !important;
    border: 3px solid black !important;
    box-shadow: 4px 4px 15px rgba(0, 0, 0, .99) !important;
}


/* ==========================================================================
   Variant 20: Gray (`fake-heading-gray` / `fhg`)
   ========================================================================== */
.callout[data-callout="fake-heading-gray"] > .callout-title,
.callout[data-callout="fhg"] > .callout-title {
    background: slategray;
    border: 4px double beige;
    padding: 4px;
    box-shadow: 3px 3px 0px black;
}
.callout[data-callout="fake-heading-gray"] > .callout-title > .callout-title-inner,
.callout[data-callout="fhg"] > .callout-title > .callout-title-inner {
    font-family: unifont;
    font-size: 1.5em;
    color: white;
    text-shadow: 2px 2px 0px black, 2px 2px 0px mediumaquamarine;
}
.callout[data-callout="fake-heading-gray"] > .callout-title .callout-fold,
.callout[data-callout="fhg"] > .callout-title .callout-fold { color: white; }
.callout[data-callout="fake-heading-gray"] > .callout-content,
.callout[data-callout="fhg"] > .callout-content {
    background-color: #2f3e4e !important;
    color: white !important;
    border: 3px solid beige !important;
    box-shadow: 3px 3px 0px black !important;
}


/* ==========================================================================
   Variant 21: Black (`fake-heading-black` / `fhb`)
   ========================================================================== */
.callout[data-callout="fake-heading-black"] > .callout-title,
.callout[data-callout="fhb"] > .callout-title {
    background-color: Black;
    border: 4px double white !important;
    padding: 1px;
    box-shadow: 4px 4px 2px rgba(0, 0, 0, .99);
}
.callout[data-callout="fake-heading-black"] > .callout-title > .callout-title-inner,
.callout[data-callout="fhb"] > .callout-title > .callout-title-inner {
    font-size: 1.3rem;
    color: white;
    text-shadow: -3px 3px 0px rgba(255, 113, 206, 0.9), -6px 6px 0px rgba(255, 113, 206, 0.6), -9px 9px 0px rgba(255, 113, 206, 0.3), -12px 12px 0px rgba(255, 113, 206, 0.1);
}
.callout[data-callout="fake-heading-black"] > .callout-title .callout-fold,
.callout[data-callout="fhb"] > .callout-title .callout-fold { color: white; }
.callout[data-callout="fake-heading-black"] > .callout-content,
.callout[data-callout="fhb"] > .callout-content {
    background-color: #111111 !important;
    color: white !important;
    border: 3px solid white !important;
    box-shadow: 4px 4px 2px rgba(0, 0, 0, .99) !important;
}

/* ==========================================================================
   NESTED CALLOUT FIX (The "Invisible Bleach" Kill-Switch)
   Forces Obsidian to stop using mix-blend-mode on nested callouts
   ========================================================================== */
.callout[data-callout^="fake-heading"] .callout,
.callout[data-callout^="fh"] .callout {
    mix-blend-mode: normal !important;
}

/* ==========================================================================
   CALLOUT MODIFIERS (Descriptive Size & Width via Metadata)
   Usage: > [!fake-heading-color|modifier1 modifier2]
   Modifiers available: smallfont, bigfont, thinpaper, widepaper, extrawidepaper
   ========================================================================== */

/* --- TITLE BOX / FONT SIZES --- */

/* Small Font & Title Box */
.callout[data-callout-metadata*="smallfont"] > .callout-title > .callout-title-inner {
    font-size: 1rem !important;
}
.callout[data-callout-metadata*="smallfont"] > .callout-title {
    padding: 1px !important;
}

/* Big Font & Title Box */
.callout[data-callout-metadata*="bigfont"] > .callout-title > .callout-title-inner {
    font-size: 2.2rem !important;
}
.callout[data-callout-metadata*="bigfont"] > .callout-title {
    padding: 12px !important;
}

/* --- PAPER WIDTHS --- */

/* Thinner Paper (increases the indent on both sides) */
.callout[data-callout-metadata*="thinpaper"] > .callout-content {
    margin-left: 60px !important;
    margin-right: 60px !important;
}

/* Wider Paper (stretches out to align exactly with the title edges) */
.callout[data-callout-metadata*="widepaper"] > .callout-content {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

/* Extra Wide Paper (pushes the paper out past the title edges to the vault margins) */
.callout[data-callout-metadata*="extrawidepaper"] > .callout-content {
    margin-left: -15px !important;
    margin-right: -15px !important;
}

/* ==========================================================================
   CALLOUT MODIFIERS (Link Buttons)
   Usage: > [!fake-heading-color|buttonlinks]
   ========================================================================== */

/* Turns standard text links into sharp light blue buttons */
.callout[data-callout-metadata*="buttonlinks"] > .callout-content a {
    background-color: #d8f0aa !important; /* Light sharp blue */
    color: #474747 !important; 
    /* Dark blue text */
    border: 2px double black!important; 
    /* Sharp box */
    border-radius: 0px !important; 
    /* No rounded corners */
    /*padding: 4px 10px !important;
    margin: 4px 2px !important;*/
    display: inline-block !important;
    font-weight: bold !important;
    text-decoration: none !important;
    box-shadow: 2px 2px 0px #000000 !important; /* Hard shadow to match the paper style */
    transition: all 0.1s ease-in-out !important;
}

/* Hover effect to make the button feel tactile and clickable */
.callout[data-callout-metadata*="buttonlinks"] > .callout-content a:hover {
    background-color: #005bb5 !important; /* Inverts to dark blue */
    color: #ffffff !important; /* Text turns white */
    transform: translate(2px, 2px) !important; /* Pushes the button down */
    box-shadow: 1px 1px 0px #005bb5 !important; /* Shrinks the shadow */
}




/* ==========================================================================
   THE FINAL BOSS: DESKTOP READING MODE TEXT FIX
   (Bypasses Obsidian's variables by creating a unique un-hijackable variable)
   ========================================================================== */

/* Default fallback for the light paper ones (Dark Text) */
.callout[data-callout^="fake-heading"] > .callout-content,
.callout[data-callout^="fh"] > .callout-content {
    --custom-paper-text: #111111;
}

/* White Text Group (Dark Papers) */
.callout[data-callout="fake-heading-purple"] > .callout-content,
.callout[data-callout="fhpu"] > .callout-content,
.callout[data-callout="fake-heading-gray"] > .callout-content,
.callout[data-callout="fhg"] > .callout-content,
.callout[data-callout="fake-heading-black"] > .callout-content,
.callout[data-callout="fhb"] > .callout-content,
.callout[data-callout="fake-heading-crimson-void"] > .callout-content,
.callout[data-callout="fhcv"] > .callout-content,
.callout[data-callout="fake-heading-deep-indigo"] > .callout-content,
.callout[data-callout="fhdi"] > .callout-content {
    --custom-paper-text: #ffffff !important;
}

/* Teal / White-Pink Group (Dark Purple Text) */
.callout[data-callout="fake-heading-teal"] > .callout-content,
.callout[data-callout="fhte"] > .callout-content,
.callout[data-callout="fake-heading-white-pink"] > .callout-content,
.callout[data-callout="fhwp"] > .callout-content {
    --custom-paper-text: #3d2c5e !important;
}

/* Custom Color Group */
.callout[data-callout="fake-heading-terminal"] > .callout-content,
.callout[data-callout="fht"] > .callout-content { --custom-paper-text: #00ff00 !important; }
.callout[data-callout="fake-heading-neon-blue"] > .callout-content,
.callout[data-callout="fhnb"] > .callout-content { --custom-paper-text: #c5c6c7 !important; }
.callout[data-callout="fake-heading-obsidian-gold"] > .callout-content,
.callout[data-callout="fhog"] > .callout-content { --custom-paper-text: #f3e5ab !important; }
.callout[data-callout="fake-heading-retro-amber"] > .callout-content,
.callout[data-callout="fhra"] > .callout-content { --custom-paper-text: #ffb000 !important; }

/* Forcibly apply this unique variable to the paragraph/list tags Reading Mode generates */
.markdown-rendered .callout[data-callout^="fake-heading"] > .callout-content p,
.markdown-rendered .callout[data-callout^="fh"] > .callout-content p,
.markdown-rendered .callout[data-callout^="fake-heading"] > .callout-content ul,
.markdown-rendered .callout[data-callout^="fh"] > .callout-content ul,
.markdown-rendered .callout[data-callout^="fake-heading"] > .callout-content ol,
.markdown-rendered .callout[data-callout^="fh"] > .callout-content ol,
.markdown-rendered .callout[data-callout^="fake-heading"] > .callout-content li,
.markdown-rendered .callout[data-callout^="fh"] > .callout-content li,
.markdown-rendered .callout[data-callout^="fake-heading"] > .callout-content div,
.markdown-rendered .callout[data-callout^="fh"] > .callout-content div {
    color: var(--custom-paper-text) !important;
}

/* Save nested standard callouts from being painted over */
.markdown-rendered .callout[data-callout^="fake-heading"] > .callout-content .callout p,
.markdown-rendered .callout[data-callout^="fh"] > .callout-content .callout p,
.markdown-rendered .callout[data-callout^="fake-heading"] > .callout-content .callout ul,
.markdown-rendered .callout[data-callout^="fh"] > .callout-content .callout ul,
.markdown-rendered .callout[data-callout^="fake-heading"] > .callout-content .callout ol,
.markdown-rendered .callout[data-callout^="fh"] > .callout-content .callout ol,
.markdown-rendered .callout[data-callout^="fake-heading"] > .callout-content .callout li,
.markdown-rendered .callout[data-callout^="fh"] > .callout-content .callout li,
.markdown-rendered .callout[data-callout^="fake-heading"] > .callout-content .callout div,
.markdown-rendered .callout[data-callout^="fh"] > .callout-content .callout div {
    color: var(--text-normal) !important;
}







/* ==========================================================================
   CALLOUT MODIFIERS (Text Alignment, Spacing, & Font Size)
   Modifiers: centerbody, justifybody, centertitle, singlespace, smallfontbody, notitlebreak
   ========================================================================== */

/* --- 1 & 2. BODY TEXT ALIGNMENT --- */

/* Center Body */
.callout[data-callout-metadata*="centerbody"] > .callout-content,
.callout[data-callout-metadata*="centerbody"] > .callout-content p {
    text-align: center !important;
}

/* Justify Body */
.callout[data-callout-metadata*="justifybody"] > .callout-content,
.callout[data-callout-metadata*="justifybody"] > .callout-content p {
    text-align: justify !important;
}

/* Combo: Justify + Center (Justifies the text, but centers the last line) */
.callout[data-callout-metadata*="justifybody"][data-callout-metadata*="centerbody"] > .callout-content,
.callout[data-callout-metadata*="justifybody"][data-callout-metadata*="centerbody"] > .callout-content p {
    text-align: justify !important;
    text-align-last: center !important; 
}

/* --- 3. CENTER TITLE --- */
/* (Forces the title to the middle, which is especially useful for the Terminal variant which defaults to left-aligned) */
.callout[data-callout-metadata*="centertitle"] > .callout-title > .callout-title-inner {
    text-align: center !important;
    text-indent: 0px !important;
}

/* --- 4. SINGLE SPACE TEXT --- */
.callout[data-callout-metadata*="singlespace"] > .callout-content,
.callout[data-callout-metadata*="singlespace"] > .callout-content p {
    line-height: 1.2 !important; /* Tightens line spacing */
    margin-bottom: 0.5em !important; /* Shrinks the gap between paragraph breaks */
}

/* --- 5. SMALL FONT BODY --- */
.callout[data-callout-metadata*="smallfontbody"] > .callout-content,
.callout[data-callout-metadata*="smallfontbody"] > .callout-content p,
.callout[data-callout-metadata*="smallfontbody"] > .callout-content ul,
.callout[data-callout-metadata*="smallfontbody"] > .callout-content ol {
    font-size: 0.85em !important;
}

/* --- 6. REDUCE TITLE BREAK GAP --- */
/* Cuts the top padding of the paper so the text sits directly beneath the title box */
.callout[data-callout-metadata*="notitlebreak"] > .callout-content {
    padding-top: 10px !important; /* Overrides the default 30px */
}

/* ==========================================================================
   CALLOUT MODIFIERS (Stretch Buttons for Hubs)
   Usage: > [!fake-heading-color|buttonlinks stretchbuttons]
   ========================================================================== */

/* 1. Turns the paragraph holding the links into a flexible container */
.callout[data-callout-metadata*="stretchbuttons"] > .callout-content p {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important; /* Clean, uniform spacing between the buttons */
}

/* 2. Forces the links/buttons to expand and eat up all the dead white space */
.callout[data-callout-metadata*="stretchbuttons"] > .callout-content a {
    flex: 1 1 auto !important; /* Tells the button it is allowed to grow to fill space */
    min-width: 120px !important; /* Stops the buttons from getting too squished on mobile screens */
    text-align: center !important;
    margin: 0 !important; /* Overrides the static margin from the standard buttonlinks snippet */
}

/* Optional: If you want to center regular text that happens to sit inside a stretchbuttons hub */
.callout[data-callout-metadata*="stretchbuttons"] > .callout-content {
    text-align: center !important;
}





/* ==========================================================================
   CALLOUT MODIFIERS (Button Squishing & Kerning)
   Modifiers: smallfontbuttons, smallkernbuttons
   ========================================================================== */

/* 1. Small Font Buttons (Shrinks text, tightens padding, removes width limits) */
.callout[data-callout-metadata*="smallfontbuttons"] > .callout-content a {
    font-size: 0.8em !important; /* Drops the font size */
    padding: 2px 5px !important; /* Removes the bulky padding inside the button */
    min-width: 40px !important; /* Overrides the 120px limit from stretchbuttons */
}

/* 2. Small Kern Buttons (Tightens the literal space between letters) */
.callout[data-callout-metadata*="smallkernbuttons"] > .callout-content a {
    letter-spacing: -0.5px !important; /* Squishes the letters closer together */
}






/* ==========================================================================
   CALLOUT MODIFIERS (Button Heights)
   Modifiers: tallbuttons, extratallbuttons
   ========================================================================== */

/* 1. Tall Buttons (Increases the top and bottom padding) */
.callout[data-callout-metadata*="tallbuttons"] > .callout-content a {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    display: inline-flex !important; /* Required to center text vertically */
    align-items: center !important;
    justify-content: center !important;
}

/* 2. Extra Tall Buttons (Massive vertical stretch for chunky interface buttons) */
.callout[data-callout-metadata*="extratallbuttons"] > .callout-content a {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}



/* ==========================================================================
   THE "NUKE THE UGLY ICONS" FIX
   Kills the default pencil icon, the fold arrow, and the external link icons
   ========================================================================== */

/* 1. Kill the Pencil Icon */
.callout[data-callout^="fake-heading"] > .callout-title > .callout-icon,
.callout[data-callout^="fh"] > .callout-title > .callout-icon,
.callout[data-callout^="fake-heading"] .callout-icon,
.callout[data-callout^="fh"] .callout-icon {
    display: none !important;
}

/* 2. Kill the Drop-Down (Fold) Arrow */
.callout[data-callout^="fake-heading"] > .callout-title > .callout-fold,
.callout[data-callout^="fh"] > .callout-title > .callout-fold,
.callout[data-callout^="fake-heading"] .callout-fold,
.callout[data-callout^="fh"] .callout-fold {
    display: none !important;
}

/* 3. Kill the External Link Icons inside the callouts */
.callout[data-callout^="fake-heading"] a.external-link,
.callout[data-callout^="fh"] a.external-link {
    background-image: none !important; /* Removes the standard Obsidian external icon */
    padding-right: 0 !important; /* Removes the dead space Obsidian leaves for the icon */
}

/* Kills the newer SVG-based link icons used by some themes/updates */
.callout[data-callout^="fake-heading"] a.external-link::after,
.callout[data-callout^="fh"] a.external-link::after {
    display: none !important;
}



/* ==========================================================================
   CALLOUT MODIFIERS (Shrink-to-Fit & Narrow Columns)
   Modifiers: autowidth, narrowbox
   ========================================================================== */

/* 1. Auto-Width (Shrinks the entire callout box to perfectly fit the text) */
.callout[data-callout-metadata*="autowidth"] {
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important; /* Centers the shrunken box in the middle of the page */
}

/* 2. Narrow Box (Forces a skinny column limit, making long text wrap automatically) */
.callout[data-callout-metadata*="narrowbox"] {
    max-width: 350px !important;
    margin-left: auto !important;
    margin-right: auto !important; /* Centers the narrow column */
}


/* Custom Break Line Callout */
.callout[data-callout="break"],
.callout[data-callout="invisible"] {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 1.5em 0; /* Adjust vertical spacing as needed */
}

/* Hide the icon and the fold arrow */
.callout[data-callout="break"] .callout-icon,
.callout[data-callout="invisible"] .callout-icon,
.callout[data-callout="break"] .callout-fold,
.callout[data-callout="invisible"] .callout-fold {
    display: none;
}

/* Center the title content and remove default bolding */
.callout[data-callout="break"] .callout-title,
.callout[data-callout="invisible"] .callout-title {
    display: flex;
    justify-content: center;
    color: var(--text-muted); /* Makes the break line slightly subdued */
    font-weight: normal;
    padding: 0;
}

/* Ensure any content placed on a new line inside is also centered */
.callout[data-callout="break"] .callout-content,
.callout[data-callout="invisible"] .callout-content {
    text-align: center;
    display: flex;
    justify-content: center;
    background-color: transparent;
}

/* ==========================================================================
   CALLOUT MODIFIERS (Crisp Text Shadow)
   Usage: > [!fake-heading-color|crispshadow]
   ========================================================================== */
.callout[data-callout-metadata*="crispshadow"] > .callout-title > .callout-title-inner,
.callout[data-callout-metadata*="crispshadow"] > .callout-content,
.callout[data-callout-metadata*="crispshadow"] > .callout-content p {
    text-shadow: 9px 9px 0px rgba(0, 0, 0, 0.4) !important;
}
/* ==========================================================================
   GLASS CALLOUT (iOS Frosted Pill)
   Usage: > [!glass]
   ========================================================================== */
.callout[data-callout="glass"] {
    background: rgba(255, 255, 255, 0.08) !important; /* Very subtle white tint */
    backdrop-filter: blur(12px) !important; /* Frosted glass blur effect */
    -webkit-backdrop-filter: blur(12px) !important; /* Safari compatibility */
    border: 1px solid rgba(255, 255, 255, 0.2) !important; /* Soft light rim */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important; /* Soft floating shadow */
    border-radius: 50px !important; /* Extreme rounding for the pill shape */
    padding: 8px 24px !important; /* Pill proportions */
    
    /* Auto-width and center alignment */
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Hide default icons and fold arrows */
.callout[data-callout="glass"] > .callout-title > .callout-icon,
.callout[data-callout="glass"] > .callout-title > .callout-fold {
    display: none !important;
}

/* Center and clean up the text */
.callout[data-callout="glass"] > .callout-title {
    display: flex;
    justify-content: center;
    padding: 0 !important;
}

.callout[data-callout="glass"] > .callout-title > .callout-title-inner {
    font-weight: normal !important; /* Removes default callout bolding */
    text-align: center !important;
}

.callout[data-callout="glass"] > .callout-content {
    display: none !important; /* Hides the body text area to maintain the tight pill shape */
}

/* ==========================================================================
   FULL PAGE BACKGROUND: LOFI COZY RAIN
   Usage: Add `cssclasses: lofi-rain` to a note's properties
   ========================================================================== */

/* Targets the specific note and injects the GIF */
.lofi-rain .markdown-reading-view, 
.lofi-rain .markdown-source-view {
    /* The linear gradient applies a dark tint so the text is still readable over the GIF */
    background-image: 
        linear-gradient(rgba(15, 15, 20, 0.8), rgba(15, 15, 20, 0.85)), 
        url("https://i.gifer.com/origin/98/981f2f195e7b896be152327f2965e721_w200.gif") !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
}

/* Erases Obsidian's default opaque backgrounds on the text layer so the GIF shows through */
.lofi-rain .markdown-preview-view,
.lofi-rain .cm-scroller {
    background-color: transparent !important;
}

/* Optional: Gives the text a slight glowing haze to fit the lofi vibe */
.lofi-rain {
    --text-normal: #e0d8d8;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.9);
}

/* ==========================================================================
   THE DISPLAY CALLOUT (Fixed & Bulletproof)
   Usage: > [!display] ¯\_(ツ)_/¯
   ========================================================================== */
.callout[data-callout="display"] {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 2em 0 !important;
    mix-blend-mode: normal !important; /* Kills the bleaching bug */
}

/* Hide the icon and the fold arrow */
.callout[data-callout="display"] .callout-icon,
.callout[data-callout="display"] .callout-fold {
    display: none !important;
}

/* Center the title row */
.callout[data-callout="display"] .callout-title {
    display: block !important;
    text-align: center !important;
    padding: 0 !important;
    background-color: transparent !important;
}

/* The Scaling Text Magic (Now targets BOTH title and body text) */
.callout[data-callout="display"] .callout-title-inner,
.callout[data-callout="display"] .callout-content,
.callout[data-callout="display"] .callout-content p {
    font-size: clamp(3rem, 10vw, 8rem) !important; 
    line-height: 1.2 !important;
    font-weight: normal !important;
    text-align: center !important;
    color: var(--text-normal, #ffffff) !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    
    /* Default soft cinematic shadow */
    text-shadow: 0px 10px 30px rgba(0, 0, 0, 0.8), 0px 0px 20px rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   BONUS MODIFIER: CYBER GLITCH
   Usage: > [!display|cyberglitch]
   ========================================================================== */
.callout[data-callout-metadata*="cyberglitch"] .callout-title-inner,
.callout[data-callout-metadata*="cyberglitch"] .callout-content,
.callout[data-callout-metadata*="cyberglitch"] .callout-content p {
    color: #f4f4f4 !important;
    text-shadow: 4px 0px 0px rgba(255, 0, 85, 0.8), -4px 0px 0px rgba(0, 255, 255, 0.8) !important;
}

/* ==========================================================================
   CALLOUT MODIFIERS (Crisp Text Shadow FIX)
   Usage: > [!fake-heading-color|crispshadow]
   ========================================================================== */
/* Added "html" at the front to aggressively increase specificity and force it to win */
html .callout[data-callout-metadata*="crispshadow"] .callout-title-inner,
html .callout[data-callout-metadata*="crispshadow"] .callout-content,
html .callout[data-callout-metadata*="crispshadow"] .callout-content p {
    text-shadow: 9px 9px 0px rgba(0, 0, 0, 0.6) !important;
}


/* ==========================================================================
   BONUS MODIFIER: CYBER GLITCH
   Usage: > [!display|cyberglitch]
   ========================================================================== */
.callout[data-callout-metadata*="cyberglitch"] > .callout-title > .callout-title-inner {
    color: #f4f4f4 !important;
    /* Red offset left, Cyan offset right */
    text-shadow: 
        4px 0px 0px rgba(255, 0, 85, 0.8), 
        -4px 0px 0px rgba(0, 255, 255, 0.8) !important;
}



/* ==========================================================================
   CALLOUT MODIFIERS (Text Colors)
   Modifiers: txtblack, txtwhite, txtteal, txtmint, txteigengrau
   ========================================================================== */

/* 1. Define the specific color variables */
html .callout[data-callout-metadata*="txtblack"] { --override-color: #2b2c30 !important; } /* Soft rich ink */
html .callout[data-callout-metadata*="txtwhite"] { --override-color: #f0f0f4 !important; } /* Soft paper white */
html .callout[data-callout-metadata*="txtteal"]  { --override-color: #8fd4c1 !important; } /* Pastel teal */
html .callout[data-callout-metadata*="txtmint"]  { --override-color: #5cf2aa !important; } /* 16-bit SNES mint */
html .callout[data-callout-metadata*="txteigengrau"] { --override-color: #16161d !important; } /* Intrinsic dark gray */

/* 2. Apply them with maximum authority to the title, body, and reading mode tags */
html .callout[data-callout-metadata*="txt"] .callout-title-inner,
html .callout[data-callout-metadata*="txt"] .callout-content,
html .callout[data-callout-metadata*="txt"] .callout-content p,
html .callout[data-callout-metadata*="txt"] .callout-content ul,
html .callout[data-callout-metadata*="txt"] .callout-content ol,
html .callout[data-callout-metadata*="txt"] .callout-content li,
html .callout[data-callout-metadata*="txt"] .callout-content div {
    color: var(--override-color) !important;
    --custom-paper-text: var(--override-color) !important; /* Overrides the Desktop Reading Mode fix */
    --text-normal: var(--override-color) !important; /* Overrides Obsidian defaults */
}









/* ==========================================================================
   CALLOUT MODIFIERS (Inline / Side-by-Side Blocks - WRAPPER FIX)
   Usage: > [!fake-heading-color|inline]- TITLE
   ========================================================================== */

/* 1. Targets the invisible wrapper block Obsidian generates and forces it to shrink and sit side-by-side */
.markdown-rendered div:has(> .callout.is-collapsed[data-callout-metadata*="inline"]) {
    display: inline-block !important; 
    width: fit-content !important;
    vertical-align: top !important; /* Keeps them aligned at the top if heights differ */
    margin-right: 12px !important; /* The spacing between the inline callouts */
    margin-bottom: 8px !important;
}

/* 2. Ensures the callout strictly conforms to the newly shrunk wrapper */
.markdown-rendered .callout.is-collapsed[data-callout-metadata*="inline"] {
    width: fit-content !important;
    margin: 0 !important; /* Lets the wrapper handle the spacing */
}








/* 1. STRIPED BACKGROUND OVERLAY */
.callout[data-callout-metadata*="striped"] {
    background-image: repeating-linear-gradient(
        45deg,
        rgba(0, 0, 0, 0.15),
        rgba(0, 0, 0, 0.15) 10px,
        transparent 10px,
        transparent 20px
    ) !important;
}






/* ==========================================================================
   2. TRUE INLINE (FIXED: Restores the folding mechanism)
   ========================================================================== */

/* 1. Force the hidden wrapper OF THE PARAGRAPH BEFORE to be inline */
.markdown-rendered div:has(+ div > .callout[data-callout-metadata*="trueinline"]),
.markdown-rendered div:has(+ div > .callout[data-callout-metadata*="trueinline"]) > p {
    display: inline !important;
}

/* 2. Force the hidden wrapper OF THE CALLOUT ITSELF to be inline */
.markdown-rendered div:has(> .callout[data-callout-metadata*="trueinline"]) {
    display: inline !important;
}

/* 3. Force the hidden wrapper OF THE PARAGRAPH AFTER to be inline */
.markdown-rendered div:has(> .callout[data-callout-metadata*="trueinline"]) + div,
.markdown-rendered div:has(> .callout[data-callout-metadata*="trueinline"]) + div > p {
    display: inline !important;
}

/* 4. Flatten the callout core pieces (Title and Container) */
.markdown-rendered .callout[data-callout-metadata*="trueinline"],
.markdown-rendered .callout[data-callout-metadata*="trueinline"] .callout-title,
.markdown-rendered .callout[data-callout-metadata*="trueinline"] .callout-title-inner {
    display: inline !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

/* 5. ONLY force the content to be inline when EXPANDED (Leaves collapsed hidden) */
.markdown-rendered .callout[data-callout-metadata*="trueinline"]:not(.is-collapsed) .callout-content,
.markdown-rendered .callout[data-callout-metadata*="trueinline"]:not(.is-collapsed) .callout-content p {
    display: inline !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure Obsidian's native hiding mechanism works when folded */
.markdown-rendered .callout[data-callout-metadata*="trueinline"].is-collapsed .callout-content {
    display: none !important;
}

/* 6. Force icons and fold arrows to hide */
.markdown-rendered .callout[data-callout-metadata*="trueinline"] .callout-icon,
.markdown-rendered .callout[data-callout-metadata*="trueinline"] .callout-fold {
    display: none !important;
}

/* 7. Styling the clickable pill and the expanded text */
.markdown-rendered .callout[data-callout-metadata*="trueinline"] .callout-title {
    background-color: rgba(150, 150, 150, 0.15) !important;
    padding: 0px 6px !important;
    border-radius: 6px !important;
    margin: 0 4px !important;
}

.markdown-rendered .callout[data-callout-metadata*="trueinline"]:not(.is-collapsed) .callout-content p::before {
    content: " " !important;
}

.markdown-rendered .callout[data-callout-metadata*="trueinline"]:not(.is-collapsed) .callout-content p {
    color: var(--text-muted) !important;
}







/* ==========================================================================
   DASHBOARD ROW WRAPPER (Flexbox Engine - FIXED)
   Usage: > [!dashboard|centerboxes] OR > [!dashboard|justifyboxes]
   ========================================================================== */

/* 1. Strip the dashboard wrapper of all standard callout styling */
.callout[data-callout="dashboard"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. Hide the title line so it acts purely as an invisible folder */
.callout[data-callout="dashboard"] > .callout-title {
    display: none !important;
}

/* 3. The true Flexbox Engine: applies to the dashboard body itself */
.callout[data-callout="dashboard"] > .callout-content {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 15px !important; 
    align-items: flex-start !important; 
    padding: 0 !important;
}

/* 4. MODIFIER: Center the boxes */
.callout[data-callout-metadata*="centerboxes"] > .callout-content {
    justify-content: center !important;
}

/* 5. MODIFIER: Justify the boxes */
.callout[data-callout-metadata*="justifyboxes"] > .callout-content {
    justify-content: space-evenly !important; 
}

/* 6. CRUCIAL FIX: Force Obsidian's invisible child wrappers to shrink-wrap 
   so the Flexbox engine can properly align them side-by-side */
.callout[data-callout="dashboard"] > .callout-content > div,
.callout[data-callout="dashboard"] > .callout-content > p {
    width: fit-content !important;
    margin: 0 !important;
}











/* ==========================================================================
   1. THE BUTTON ROW WRAPPER (Flawless Centering & Alignment)
   Usage: > [!button-row]
   ========================================================================== */
.callout[data-callout="button-row"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 1.5em 0 !important;
}

/* Hide the wrapper's title so it remains completely invisible */
.callout[data-callout="button-row"] > .callout-title {
    display: none !important;
}

/* The Flex Engine: Centers and aligns the row */
.callout[data-callout="button-row"] > .callout-content {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* Centers the whole row horizontally */
    align-items: center !important; /* Perfectly aligns them vertically (Fixes the bumpy row!) */
    gap: 15px !important;
    padding: 0 !important;
}

/* 🎯 THE MAGIC BULLET: Pierce Obsidian's invisible Reading Mode wrappers */
.callout[data-callout="button-row"] > .callout-content > div {
    display: flex !important;
    width: max-content !important;
    margin: 0 !important;
}




/* ==========================================================================
   2. BUTTON STYLING (The "Flex Column" Centering Fix)
   ========================================================================== */
/* 1. Turn the entire callout into a vertical flexbox to force everything to center-align */
.callout[data-callout-metadata*="autowidth"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* 🎯 THIS is the magic lock! It forces the title and paper to share a center axis */
    width: fit-content !important;
    max-width: 100%;
    margin: 0 auto !important; /* Centers the whole block in your note */
}

/* 2. Keep the title box tight around its text */
.callout[data-callout-metadata*="autowidth"] > .callout-title {
    display: flex !important;
    justify-content: center !important; 
    width: fit-content !important; /* Shrink-wraps the border around the text */
    margin: 0 !important; /* Kills any lingering default Obsidian margins that push it left */
    z-index: 2 !important; /* Keeps it layered above your custom paper shadows */
}

/* 3. Center the text perfectly within the button */
.callout[data-callout-metadata*="autowidth"] > .callout-title > .callout-title-inner {
    text-align: center !important;
    margin: 0 auto !important; 
}/* =========================================
   GLOBAL FONT OVERRIDE: GNU UNIFONT
   Forces GNU Unifont in Source, Live Preview, and Reading View
========================================= */

/* 1. Hijack Obsidian's core font variables */
body {
    --font-text: "GNU Unifont", "Unifont", monospace !important;
    --font-editor: "GNU Unifont", "Unifont", monospace !important;
    --font-monospace: "GNU Unifont", "Unifont", monospace !important;
}

/* 2. Brute-force backup for stubborn themes */
.markdown-rendered,
.markdown-source-view,
.markdown-preview-view,
.cm-scroller,
.cm-editor,
.cm-content {
    font-family: "GNU Unifont", "Unifont", monospace !important;
}