`;
diff --git a/src/documentation/more/bonus.ts b/src/documentation/more/bonus.ts
index a262288..f78a709 100644
--- a/src/documentation/more/bonus.ts
+++ b/src/documentation/more/bonus.ts
@@ -9,6 +9,24 @@ export const bonus = (application: Editor): string => {
Some features have been included as a bonus. These features are often about patterning over things that are not directly related to sound: pictures, video, etc.
+## Editor theme configuration
+
+The editor theme can be changed using the
functions. The following example will use a random color scheme for every beat:
+
+${makeExample(
+ "Random theme on each beat",
+ `
+beat(1)::randomTheme()
+`, true)}
+
+You can also pick a theme using the
function with a string as only argument:
+
+${makeExample(
+ "Picking a theme",
+ `
+beat(1)::theme("Batman")
+`, true)}
+
## Hydra Visual Live Coding
diff --git a/src/documentation/patterns/generators.ts b/src/documentation/patterns/generators.ts
index c397f64..ba80105 100644
--- a/src/documentation/patterns/generators.ts
+++ b/src/documentation/patterns/generators.ts
@@ -6,9 +6,48 @@ export const generators = (application: Editor): string => {
return `
# Generator functions
+JavaScript
generators are powerful functions for generating value sequences. They can be used to generate melodies, rhythms or control parameters.
+
+In Topos generator functions should be called using the
cache(key, function) function to store the current state of the generator. This function takes two arguments: the name for the cache and the generator instance.
+
+Once the generator is cached the values will be returned from the named cache even if the generator function is modified. To clear the current cache and to re-evaluate the modified generator use the **Shift+Ctrl+Backspace** shortcut. Alternatively you can cache the modified generator using a different name.
+
+The resulted values can be played using either
pitch() or
freq() or as Ziffers patterns. When playing the values using
pitch() different scales and chained methods can be used to alter the result, for example
mod(value: number) to limit the integer range or
scale(name: string) etc. to change the resulting note.
${makeExample(
- "More complex function generating chaotic frequencies",
+"Simple looping generator function",
+`
+function* simple() {
+ let x = 0;
+ while (x < 12) {
+ yield x+x;
+ x+=1;
+ }
+}
+
+beat(.25) && sound("triangle").pitch(cache("simple",simple())).scale("minor").out()
+`,
+true,
+)};
+
+${makeExample(
+"Infinite frequency generator",
+`
+ function* poly(x=0) {
+ while (true) {
+ const s = Math.tan(x/10)+Math.sin(x/20);
+ yield 2 * Math.pow(s, 3) - 6 * Math.pow(s, 2) + 5 * s + 200;
+ x++;
+ }
+ }
+
+ beat(.125) && sound("triangle").freq(cache("mathyshit",poly())).out()
+`,
+true,
+)};
+
+${makeExample(
+ "Truly scale free chaos inspired by Lorentz attractor",
`
function* strange(x = 0.1, y = 0, z = 0, rho = 28, beta = 8 / 3, zeta = 10) {
while (true) {
@@ -33,5 +72,48 @@ ${makeExample(
true,
)};
-`;
+## OEIS integer sequences
+
+To find some inspiration - or to enter into the void - one can visit
The On-Line Encyclopedia of Integer Sequences (OEIS) to find some interesting integer sequences.
+
+Many of the sequences are implemented by
JISG (Javascript Integer Sequence Generators) project. Those sequences can be referenced directly with the identifiers using the cache function.
+
+One of these implemented generators is the Inventory sequence
A342585 made famous by
Neil Sloane.
+
+${makeExample(
+ "Inventory sequence",
+ `
+ rhythm(0.5,[8,7,5,6].bar(4),9) :: sound("triangle")
+ .pitch(cache("Inventory",A342585))
+ .mod(11).scale("minor")
+ .adsr(.25,.05,.5,.5)
+ .room(2.0).size(0.5)
+ .gain(1).out()
+ `,
+ true,
+ )};
+
+## Using generators with Ziffers
+
+Alternatively generators can be used with Ziffers to generate longer patterns. In this case the generator function should be passed as an argument to the ziffers function. Ziffers patterns are cached separately so there is no need for using **cache()** function. Ziffers expects values from the generators to be integers or strings in ziffers syntax.
+
+${makeExample(
+ "Ziffers patterns using a generator functions",
+`
+function* poly(x) {
+ while (true) {
+ yield 64 * Math.pow(x, 6) - 480 * Math.pow(x, 4) + 720 * Math.pow(x, 2);
+ x++;
+ }
+ }
+
+z0(poly(1)).noteLength(0.5).semitones(2,2,3,2,2,2).sound("sine").out()
+z1(poly(8)).noteLength(0.25).semitones(2,1,2,1,2,2).sound("sine").out()
+z2(poly(-3)).noteLength(1.0).semitones(2,2,2,1,3,2).sound("sine").out()
+`,
+ true,
+ )};
+
+
+`
};
diff --git a/src/documentation/patterns/ziffers/ziffers_syncing.ts b/src/documentation/patterns/ziffers/ziffers_syncing.ts
index 70b3003..ccd4396 100644
--- a/src/documentation/patterns/ziffers/ziffers_syncing.ts
+++ b/src/documentation/patterns/ziffers/ziffers_syncing.ts
@@ -12,14 +12,14 @@ Ziffers patterns can be synced to any event by using **cue**, **sync**, **wait**
The
cue(name: string) methods can be used to send cue messages for ziffers patterns. The
wait(name: string) method is used to wait for the cue message to be received before starting the next cycle.
- ${makeExample(
- "Sending cue from event and wait",
- `
- beat(4.0) :: sound("bd").cue("foo").out();
- z1("e 0 3 2 1 2 1").wait("foo").sound("sine").out();
- `,
- true,
- )}
+${makeExample(
+"Sending cue from event and wait",
+`
+beat(4.0) :: sound("bd").cue("foo").out()
+z1("e 0 3 2 1 2 1").wait("foo").sound("sine").out()
+`,
+true,
+)}
The
sync(name: string) method is used to sync the ziffers pattern to the cue message.
diff --git a/src/main.ts b/src/main.ts
index ce043f7..724f913 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,6 +5,7 @@ import { javascript } from "@codemirror/lang-javascript";
import { markdown } from "@codemirror/lang-markdown";
import { Extension } from "@codemirror/state";
import { outputSocket } from "./IO/OSC";
+import { getCodeMirrorTheme } from "./EditorSetup";
import {
initializeSelectedUniverse,
AppSettings,
@@ -32,6 +33,7 @@ import { installWindowBehaviors } from "./WindowBehavior";
import { makeNumberExtensions } from "./extensions/NumberExtensions";
// @ts-ignore
import { registerSW } from "virtual:pwa-register";
+import colors from "./colors.json";
if ("serviceWorker" in navigator) {
registerSW();
@@ -51,6 +53,7 @@ export class Editor {
hidden_interface: boolean = false;
fontSize!: Compartment;
withLineNumbers!: Compartment;
+ themeCompartment!: Compartment;
vimModeCompartment!: Compartment;
hoveringCompartment!: Compartment;
completionsCompartment!: Compartment;
@@ -68,6 +71,7 @@ export class Editor {
public _mouseX: number = 0;
public _mouseY: number = 0;
show_error: boolean = false;
+ currentThemeName: string = "Everblush";
buttonElements: Record
= {};
interface: ElementMap = {};
blinkTimeouts: Record = {};
@@ -206,6 +210,15 @@ export class Editor {
// Loading universe from URL (if needed)
loadUniverserFromUrl(this);
+
+ // Set the color scheme for the application
+ let available_themes = Object.keys(colors);
+ if (this.settings.theme in available_themes) {
+ this.readTheme(this.settings.theme);
+ } else {
+ this.settings.theme = "Everblush";
+ this.readTheme(this.settings.theme);
+ }
}
private getBuffer(type: string): any {
@@ -261,7 +274,7 @@ export class Editor {
let list = document.createElement("ul");
list.className =
- "lg:h-80 lg:text-normal text-sm h-auto lg:w-80 w-auto lg:pb-2 lg:pt-2 overflow-y-scroll text-white lg:mb-4 border rounded-lg bg-neutral-800";
+ "lg:h-80 lg:text-normal text-normal h-auto lg:w-80 w-auto lg:pb-2 lg:pt-2 overflow-y-scroll text-brightwhite bg-background lg:mb-4 border rounded-lg";
list.append(
...Object.keys(this.universes).map((it) => {
let item = itemTemplate.content.cloneNode(true) as DocumentFragment;
@@ -293,9 +306,9 @@ export class Editor {
*/
const tabs = document.querySelectorAll('[id^="tab-"]');
const tab = tabs[i] as HTMLElement;
- tab.classList.add("bg-orange-300");
+ tab.classList.add("bg-foreground");
for (let j = 0; j < tabs.length; j++) {
- if (j != i) tabs[j].classList.remove("bg-orange-300");
+ if (j != i) tabs[j].classList.remove("bg-foreground_selection");
}
let tab_id = tab.id.split("-")[1];
this.local_index = parseInt(tab_id);
@@ -318,15 +331,15 @@ export class Editor {
let changeColor = (button: HTMLElement) => {
interface_buttons.forEach((button) => {
let svg = button.children[0] as HTMLElement;
- if (svg.classList.contains("text-orange-300")) {
- svg.classList.remove("text-orange-300");
- button.classList.remove("text-orange-300");
+ if (svg.classList.contains("text-foreground_selection")) {
+ svg.classList.remove("text-foreground_selection");
+ button.classList.remove("text-foreground_selection");
}
});
button.children[0].classList.remove("text-white");
- button.children[0].classList.add("text-orange-300");
- button.classList.add("text-orange-300");
- button.classList.add("fill-orange-300");
+ button.children[0].classList.add("text-foreground_selection");
+ button.classList.add("text-foreground_selection");
+ button.classList.add("fill-foreground_selection");
};
switch (mode) {
@@ -441,7 +454,7 @@ export class Editor {
unfocusPlayButtons() {
document.querySelectorAll('[id^="play-button-"]').forEach((button) => {
- button.children[0].classList.remove("fill-orange-300");
+ button.children[0].classList.remove("fill-foreground_selection");
button.children[0].classList.remove("animate-pulse");
});
}
@@ -570,6 +583,45 @@ export class Editor {
ctx.scale(dpr, dpr);
}
}
+
+ private updateInterfaceTheme(selected_theme: {[key: string]: string}): void {
+ function hexToRgb(hex: string): {r: number, g: number, b: number} | null {
+ let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+ return result ? {
+ r: parseInt(result[1], 16),
+ g: parseInt(result[2], 16),
+ b: parseInt(result[3], 16)
+ } : null;
+ };
+ for (const [key, value] of Object.entries(selected_theme)) {
+ let color = hexToRgb(value);
+ if (color) {
+ let colorString = `${color.r} ${color.g} ${color.b}`
+ document.documentElement.style.setProperty("--" + key, colorString);
+ }
+ }
+ }
+
+ getColorScheme(theme_name: string): {[key: string]: string} {
+ // Check if the theme exists in colors.json
+ let themes: Record = colors;
+ return themes[theme_name];
+ }
+
+ readTheme(theme_name: string): void {
+ // Check if the theme exists in colors.json
+ let themes: Record = colors;
+ let selected_theme = themes[theme_name];
+ if (selected_theme) {
+ this.currentThemeName = theme_name;
+ this.updateInterfaceTheme(selected_theme);
+ let codeMirrorTheme = getCodeMirrorTheme(selected_theme);
+ // Reconfigure the view with the new theme
+ this.view.dispatch({
+ effects: this.themeCompartment.reconfigure(codeMirrorTheme),
+ });
+ }
+ }
}
let app = new Editor();
diff --git a/src/style.css b/src/style.css
index ea83325..e0eb2d7 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,10 +1,2658 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/*
+! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
+*/
-@layer utilities {
- .striped .col-span-3,
- .striped .col-span-2 {
- @apply bg-neutral-300;
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+ box-sizing: border-box;
+ /* 1 */
+ border-width: 0;
+ /* 2 */
+ border-style: solid;
+ /* 2 */
+ border-color: currentColor;
+ /* 2 */
+}
+
+::before,
+::after {
+ --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+*/
+
+html {
+ line-height: 1.5;
+ /* 1 */
+ -webkit-text-size-adjust: 100%;
+ /* 2 */
+ -moz-tab-size: 4;
+ /* 3 */
+ -o-tab-size: 4;
+ tab-size: 4;
+ /* 3 */
+ font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ /* 4 */
+ font-feature-settings: normal;
+ /* 5 */
+ font-variation-settings: normal;
+ /* 6 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+ margin: 0;
+ /* 1 */
+ line-height: inherit;
+ /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+ height: 0;
+ /* 1 */
+ color: inherit;
+ /* 2 */
+ border-top-width: 1px;
+ /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+ -webkit-text-decoration: underline dotted;
+ text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-size: inherit;
+ font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+ color: inherit;
+ text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+ font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+ /* 1 */
+ font-size: 1em;
+ /* 2 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+ font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+ text-indent: 0;
+ /* 1 */
+ border-color: inherit;
+ /* 2 */
+ border-collapse: collapse;
+ /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit;
+ /* 1 */
+ font-feature-settings: inherit;
+ /* 1 */
+ font-variation-settings: inherit;
+ /* 1 */
+ font-size: 100%;
+ /* 1 */
+ font-weight: inherit;
+ /* 1 */
+ line-height: inherit;
+ /* 1 */
+ color: inherit;
+ /* 1 */
+ margin: 0;
+ /* 2 */
+ padding: 0;
+ /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+ text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+ -webkit-appearance: button;
+ /* 1 */
+ background-color: transparent;
+ /* 2 */
+ background-image: none;
+ /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+ outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+ box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+ vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+ -webkit-appearance: textfield;
+ /* 1 */
+ outline-offset: -2px;
+ /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ /* 1 */
+ font: inherit;
+ /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+ display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+ margin: 0;
+}
+
+fieldset {
+ margin: 0;
+ padding: 0;
+}
+
+legend {
+ padding: 0;
+}
+
+ol,
+ul,
+menu {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+/*
+Reset default styling for dialogs.
+*/
+
+dialog {
+ padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+ resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+ opacity: 1;
+ /* 1 */
+ color: #9ca3af;
+ /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+ opacity: 1;
+ /* 1 */
+ color: #9ca3af;
+ /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+ cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+ cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+ This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+ display: block;
+ /* 1 */
+ vertical-align: middle;
+ /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+ max-width: 100%;
+ height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden] {
+ display: none;
+}
+
+:root {
+ --black: 40 42 54;
+ --red: 68 71 90;
+ --green: 248 248 242;
+ --yellow: 98 114 164;
+ --blue: 139 233 253;
+ --magenta: 80 250 123;
+ --cyan: 255 184 108;
+ --white: 255 121 198;
+ --brightblack: 189 147 249;
+ --brightred: 255 85 85;
+ --brightgreen: 241 250 140;
+ --brightyellow: 139 233 253;
+ --brightblue: 80 250 123;
+ --brightmagenta: 255 184 108;
+ --brightcyan: 255 121 198;
+ --brightwhite: 189 147 249;
+ --background: 40 42 54;
+ --selection_foreground: 68 71 90;
+ --cursor: 139 233 253;
+ --foreground: 248 248 242;
+ --selection_background: 189 147 249;
+}
+
+*, ::before, ::after {
+ --tw-border-spacing-x: 0;
+ --tw-border-spacing-y: 0;
+ --tw-translate-x: 0;
+ --tw-translate-y: 0;
+ --tw-rotate: 0;
+ --tw-skew-x: 0;
+ --tw-skew-y: 0;
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ --tw-pan-x: ;
+ --tw-pan-y: ;
+ --tw-pinch-zoom: ;
+ --tw-scroll-snap-strictness: proximity;
+ --tw-gradient-from-position: ;
+ --tw-gradient-via-position: ;
+ --tw-gradient-to-position: ;
+ --tw-ordinal: ;
+ --tw-slashed-zero: ;
+ --tw-numeric-figure: ;
+ --tw-numeric-spacing: ;
+ --tw-numeric-fraction: ;
+ --tw-ring-inset: ;
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgb(59 130 246 / 0.5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ --tw-blur: ;
+ --tw-brightness: ;
+ --tw-contrast: ;
+ --tw-grayscale: ;
+ --tw-hue-rotate: ;
+ --tw-invert: ;
+ --tw-saturate: ;
+ --tw-sepia: ;
+ --tw-drop-shadow: ;
+ --tw-backdrop-blur: ;
+ --tw-backdrop-brightness: ;
+ --tw-backdrop-contrast: ;
+ --tw-backdrop-grayscale: ;
+ --tw-backdrop-hue-rotate: ;
+ --tw-backdrop-invert: ;
+ --tw-backdrop-opacity: ;
+ --tw-backdrop-saturate: ;
+ --tw-backdrop-sepia: ;
+}
+
+::backdrop {
+ --tw-border-spacing-x: 0;
+ --tw-border-spacing-y: 0;
+ --tw-translate-x: 0;
+ --tw-translate-y: 0;
+ --tw-rotate: 0;
+ --tw-skew-x: 0;
+ --tw-skew-y: 0;
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ --tw-pan-x: ;
+ --tw-pan-y: ;
+ --tw-pinch-zoom: ;
+ --tw-scroll-snap-strictness: proximity;
+ --tw-gradient-from-position: ;
+ --tw-gradient-via-position: ;
+ --tw-gradient-to-position: ;
+ --tw-ordinal: ;
+ --tw-slashed-zero: ;
+ --tw-numeric-figure: ;
+ --tw-numeric-spacing: ;
+ --tw-numeric-fraction: ;
+ --tw-ring-inset: ;
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgb(59 130 246 / 0.5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ --tw-blur: ;
+ --tw-brightness: ;
+ --tw-contrast: ;
+ --tw-grayscale: ;
+ --tw-hue-rotate: ;
+ --tw-invert: ;
+ --tw-saturate: ;
+ --tw-sepia: ;
+ --tw-drop-shadow: ;
+ --tw-backdrop-blur: ;
+ --tw-backdrop-brightness: ;
+ --tw-backdrop-contrast: ;
+ --tw-backdrop-grayscale: ;
+ --tw-backdrop-hue-rotate: ;
+ --tw-backdrop-invert: ;
+ --tw-backdrop-opacity: ;
+ --tw-backdrop-saturate: ;
+ --tw-backdrop-sepia: ;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+.pointer-events-none {
+ pointer-events: none;
+}
+
+.visible {
+ visibility: visible;
+}
+
+.invisible {
+ visibility: hidden;
+}
+
+.static {
+ position: static;
+}
+
+.fixed {
+ position: fixed;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.relative {
+ position: relative;
+}
+
+.\!sticky {
+ position: sticky !important;
+}
+
+.sticky {
+ position: sticky;
+}
+
+.inset-y-0 {
+ top: 0px;
+ bottom: 0px;
+}
+
+.bottom-0 {
+ bottom: 0px;
+}
+
+.bottom-12 {
+ bottom: 3rem;
+}
+
+.bottom-2 {
+ bottom: 0.5rem;
+}
+
+.bottom-2\.5 {
+ bottom: 0.625rem;
+}
+
+.left-0 {
+ left: 0px;
+}
+
+.right-0 {
+ right: 0px;
+}
+
+.right-2 {
+ right: 0.5rem;
+}
+
+.right-2\.5 {
+ right: 0.625rem;
+}
+
+.top-0 {
+ top: 0px;
+}
+
+.z-0 {
+ z-index: 0;
+}
+
+.col-span-1 {
+ grid-column: span 1 / span 1;
+}
+
+.col-span-3 {
+ grid-column: span 3 / span 3;
+}
+
+.mx-0 {
+ margin-left: 0px;
+ margin-right: 0px;
+}
+
+.mx-12 {
+ margin-left: 3rem;
+ margin-right: 3rem;
+}
+
+.mx-2 {
+ margin-left: 0.5rem;
+ margin-right: 0.5rem;
+}
+
+.mx-4 {
+ margin-left: 1rem;
+ margin-right: 1rem;
+}
+
+.mx-48 {
+ margin-left: 12rem;
+ margin-right: 12rem;
+}
+
+.mx-6 {
+ margin-left: 1.5rem;
+ margin-right: 1.5rem;
+}
+
+.mx-auto {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.my-1 {
+ margin-top: 0.25rem;
+ margin-bottom: 0.25rem;
+}
+
+.my-2 {
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+}
+
+.my-4 {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+}
+
+.my-6 {
+ margin-top: 1.5rem;
+ margin-bottom: 1.5rem;
+}
+
+.-mt-2 {
+ margin-top: -0.5rem;
+}
+
+.mb-0 {
+ margin-bottom: 0px;
+}
+
+.mb-2 {
+ margin-bottom: 0.5rem;
+}
+
+.mb-24 {
+ margin-bottom: 6rem;
+}
+
+.mb-4 {
+ margin-bottom: 1rem;
+}
+
+.mb-6 {
+ margin-bottom: 1.5rem;
+}
+
+.ml-0 {
+ margin-left: 0px;
+}
+
+.ml-1 {
+ margin-left: 0.25rem;
+}
+
+.ml-12 {
+ margin-left: 3rem;
+}
+
+.ml-2 {
+ margin-left: 0.5rem;
+}
+
+.ml-4 {
+ margin-left: 1rem;
+}
+
+.ml-5 {
+ margin-left: 1.25rem;
+}
+
+.ml-6 {
+ margin-left: 1.5rem;
+}
+
+.mr-2 {
+ margin-right: 0.5rem;
+}
+
+.mr-4 {
+ margin-right: 1rem;
+}
+
+.mt-2 {
+ margin-top: 0.5rem;
+}
+
+.mt-4 {
+ margin-top: 1rem;
+}
+
+.mt-48 {
+ margin-top: 12rem;
+}
+
+.mt-6 {
+ margin-top: 1.5rem;
+}
+
+.ml-8 {
+ margin-left: 2rem;
+}
+
+.box-border {
+ box-sizing: border-box;
+}
+
+.block {
+ display: block;
+}
+
+.inline-block {
+ display: inline-block;
+}
+
+.inline {
+ display: inline;
+}
+
+.flex {
+ display: flex;
+}
+
+.inline-flex {
+ display: inline-flex;
+}
+
+.table {
+ display: table;
+}
+
+.grid {
+ display: grid;
+}
+
+.hidden {
+ display: none;
+}
+
+.h-12 {
+ height: 3rem;
+}
+
+.h-4 {
+ height: 1rem;
+}
+
+.h-48 {
+ height: 12rem;
+}
+
+.h-6 {
+ height: 1.5rem;
+}
+
+.h-7 {
+ height: 1.75rem;
+}
+
+.h-8 {
+ height: 2rem;
+}
+
+.h-auto {
+ height: auto;
+}
+
+.h-screen {
+ height: 100vh;
+}
+
+.max-h-96 {
+ max-height: 24rem;
+}
+
+.max-h-fit {
+ max-height: -moz-fit-content;
+ max-height: fit-content;
+}
+
+.w-12 {
+ width: 3rem;
+}
+
+.w-14 {
+ width: 3.5rem;
+}
+
+.w-32 {
+ width: 8rem;
+}
+
+.w-4 {
+ width: 1rem;
+}
+
+.w-6 {
+ width: 1.5rem;
+}
+
+.w-7 {
+ width: 1.75rem;
+}
+
+.w-8 {
+ width: 2rem;
+}
+
+.w-auto {
+ width: auto;
+}
+
+.w-fit {
+ width: -moz-fit-content;
+ width: fit-content;
+}
+
+.w-full {
+ width: 100%;
+}
+
+.w-screen {
+ width: 100vw;
+}
+
+.flex-shrink-0 {
+ flex-shrink: 0;
+}
+
+.grow {
+ flex-grow: 1;
+}
+
+.border-collapse {
+ border-collapse: collapse;
+}
+
+.border-spacing-y-4 {
+ --tw-border-spacing-y: 1rem;
+ border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+}
+
+.rotate-180 {
+ --tw-rotate: 180deg;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.transform {
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+@keyframes pulse {
+ 50% {
+ opacity: .5;
}
}
+
+.animate-pulse {
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.select-none {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+}
+
+.resize {
+ resize: both;
+}
+
+.list-disc {
+ list-style-type: disc;
+}
+
+.flex-row {
+ flex-direction: row;
+}
+
+.flex-col {
+ flex-direction: column;
+}
+
+.flex-wrap {
+ flex-wrap: wrap;
+}
+
+.items-center {
+ align-items: center;
+}
+
+.justify-center {
+ justify-content: center;
+}
+
+.justify-between {
+ justify-content: space-between;
+}
+
+.gap-x-2 {
+ -moz-column-gap: 0.5rem;
+ column-gap: 0.5rem;
+}
+
+.gap-y-2 {
+ row-gap: 0.5rem;
+}
+
+.space-x-1 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-x-reverse: 0;
+ margin-right: calc(0.25rem * var(--tw-space-x-reverse));
+ margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-6 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-x-reverse: 0;
+ margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+ margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-y-reverse: 0;
+ margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+ margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
+
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-y-reverse: 0;
+ margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+ margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
+.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-y-reverse: 0;
+ margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+ margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+
+.overflow-hidden {
+ overflow: hidden;
+}
+
+.overflow-scroll {
+ overflow: scroll;
+}
+
+.overflow-y-auto {
+ overflow-y: auto;
+}
+
+.overflow-x-hidden {
+ overflow-x: hidden;
+}
+
+.overflow-y-hidden {
+ overflow-y: hidden;
+}
+
+.overflow-y-scroll {
+ overflow-y: scroll;
+}
+
+.whitespace-pre {
+ white-space: pre;
+}
+
+.break-words {
+ overflow-wrap: break-word;
+}
+
+.rounded {
+ border-radius: 0.25rem;
+}
+
+.rounded-full {
+ border-radius: 9999px;
+}
+
+.rounded-lg {
+ border-radius: 0.5rem;
+}
+
+.rounded-md {
+ border-radius: 0.375rem;
+}
+
+.rounded-b {
+ border-bottom-right-radius: 0.25rem;
+ border-bottom-left-radius: 0.25rem;
+}
+
+.border {
+ border-width: 1px;
+}
+
+.border-4 {
+ border-width: 4px;
+}
+
+.border-b {
+ border-bottom-width: 1px;
+}
+
+.border-b-2 {
+ border-bottom-width: 2px;
+}
+
+.border-b-4 {
+ border-bottom-width: 4px;
+}
+
+.border-l-2 {
+ border-left-width: 2px;
+}
+
+.border-l-4 {
+ border-left-width: 4px;
+}
+
+.border-l-8 {
+ border-left-width: 8px;
+}
+
+.border-r {
+ border-right-width: 1px;
+}
+
+.border-t {
+ border-top-width: 1px;
+}
+
+.border-none {
+ border-style: none;
+}
+
+.border-background {
+ --tw-border-opacity: 1;
+ border-color: rgb(var(--background) / var(--tw-border-opacity));
+}
+
+.border-background\/0 {
+ border-color: rgb(var(--background) / 0);
+}
+
+.border-background\/10 {
+ border-color: rgb(var(--background) / 0.1);
+}
+
+.border-background\/100 {
+ border-color: rgb(var(--background) / 1);
+}
+
+.border-background\/20 {
+ border-color: rgb(var(--background) / 0.2);
+}
+
+.border-background\/25 {
+ border-color: rgb(var(--background) / 0.25);
+}
+
+.border-background\/30 {
+ border-color: rgb(var(--background) / 0.3);
+}
+
+.border-background\/40 {
+ border-color: rgb(var(--background) / 0.4);
+}
+
+.border-background\/5 {
+ border-color: rgb(var(--background) / 0.05);
+}
+
+.border-background\/50 {
+ border-color: rgb(var(--background) / 0.5);
+}
+
+.border-background\/60 {
+ border-color: rgb(var(--background) / 0.6);
+}
+
+.border-background\/70 {
+ border-color: rgb(var(--background) / 0.7);
+}
+
+.border-background\/75 {
+ border-color: rgb(var(--background) / 0.75);
+}
+
+.border-background\/80 {
+ border-color: rgb(var(--background) / 0.8);
+}
+
+.border-background\/90 {
+ border-color: rgb(var(--background) / 0.9);
+}
+
+.border-background\/95 {
+ border-color: rgb(var(--background) / 0.95);
+}
+
+.border-black {
+ --tw-border-opacity: 1;
+ border-color: rgb(var(--black) / var(--tw-border-opacity));
+}
+
+.border-cursor {
+ --tw-border-opacity: 1;
+ border-color: rgb(var(--cursor) / var(--tw-border-opacity));
+}
+
+.border-cursor\/0 {
+ border-color: rgb(var(--cursor) / 0);
+}
+
+.border-cursor\/10 {
+ border-color: rgb(var(--cursor) / 0.1);
+}
+
+.border-cursor\/100 {
+ border-color: rgb(var(--cursor) / 1);
+}
+
+.border-cursor\/20 {
+ border-color: rgb(var(--cursor) / 0.2);
+}
+
+.border-cursor\/25 {
+ border-color: rgb(var(--cursor) / 0.25);
+}
+
+.border-cursor\/30 {
+ border-color: rgb(var(--cursor) / 0.3);
+}
+
+.border-cursor\/40 {
+ border-color: rgb(var(--cursor) / 0.4);
+}
+
+.border-cursor\/5 {
+ border-color: rgb(var(--cursor) / 0.05);
+}
+
+.border-cursor\/50 {
+ border-color: rgb(var(--cursor) / 0.5);
+}
+
+.border-cursor\/60 {
+ border-color: rgb(var(--cursor) / 0.6);
+}
+
+.border-cursor\/70 {
+ border-color: rgb(var(--cursor) / 0.7);
+}
+
+.border-cursor\/75 {
+ border-color: rgb(var(--cursor) / 0.75);
+}
+
+.border-cursor\/80 {
+ border-color: rgb(var(--cursor) / 0.8);
+}
+
+.border-cursor\/90 {
+ border-color: rgb(var(--cursor) / 0.9);
+}
+
+.border-cursor\/95 {
+ border-color: rgb(var(--cursor) / 0.95);
+}
+
+.border-foreground {
+ --tw-border-opacity: 1;
+ border-color: rgb(var(--foreground) / var(--tw-border-opacity));
+}
+
+.border-foreground\/0 {
+ border-color: rgb(var(--foreground) / 0);
+}
+
+.border-foreground\/10 {
+ border-color: rgb(var(--foreground) / 0.1);
+}
+
+.border-foreground\/100 {
+ border-color: rgb(var(--foreground) / 1);
+}
+
+.border-foreground\/20 {
+ border-color: rgb(var(--foreground) / 0.2);
+}
+
+.border-foreground\/25 {
+ border-color: rgb(var(--foreground) / 0.25);
+}
+
+.border-foreground\/30 {
+ border-color: rgb(var(--foreground) / 0.3);
+}
+
+.border-foreground\/40 {
+ border-color: rgb(var(--foreground) / 0.4);
+}
+
+.border-foreground\/5 {
+ border-color: rgb(var(--foreground) / 0.05);
+}
+
+.border-foreground\/50 {
+ border-color: rgb(var(--foreground) / 0.5);
+}
+
+.border-foreground\/60 {
+ border-color: rgb(var(--foreground) / 0.6);
+}
+
+.border-foreground\/70 {
+ border-color: rgb(var(--foreground) / 0.7);
+}
+
+.border-foreground\/75 {
+ border-color: rgb(var(--foreground) / 0.75);
+}
+
+.border-foreground\/80 {
+ border-color: rgb(var(--foreground) / 0.8);
+}
+
+.border-foreground\/90 {
+ border-color: rgb(var(--foreground) / 0.9);
+}
+
+.border-foreground\/95 {
+ border-color: rgb(var(--foreground) / 0.95);
+}
+
+.border-selection_background {
+ --tw-border-opacity: 1;
+ border-color: rgb(var(--selection_background) / var(--tw-border-opacity));
+}
+
+.border-selection_background\/0 {
+ border-color: rgb(var(--selection_background) / 0);
+}
+
+.border-selection_background\/10 {
+ border-color: rgb(var(--selection_background) / 0.1);
+}
+
+.border-selection_background\/100 {
+ border-color: rgb(var(--selection_background) / 1);
+}
+
+.border-selection_background\/20 {
+ border-color: rgb(var(--selection_background) / 0.2);
+}
+
+.border-selection_background\/25 {
+ border-color: rgb(var(--selection_background) / 0.25);
+}
+
+.border-selection_background\/30 {
+ border-color: rgb(var(--selection_background) / 0.3);
+}
+
+.border-selection_background\/40 {
+ border-color: rgb(var(--selection_background) / 0.4);
+}
+
+.border-selection_background\/5 {
+ border-color: rgb(var(--selection_background) / 0.05);
+}
+
+.border-selection_background\/50 {
+ border-color: rgb(var(--selection_background) / 0.5);
+}
+
+.border-selection_background\/60 {
+ border-color: rgb(var(--selection_background) / 0.6);
+}
+
+.border-selection_background\/70 {
+ border-color: rgb(var(--selection_background) / 0.7);
+}
+
+.border-selection_background\/75 {
+ border-color: rgb(var(--selection_background) / 0.75);
+}
+
+.border-selection_background\/80 {
+ border-color: rgb(var(--selection_background) / 0.8);
+}
+
+.border-selection_background\/90 {
+ border-color: rgb(var(--selection_background) / 0.9);
+}
+
+.border-selection_background\/95 {
+ border-color: rgb(var(--selection_background) / 0.95);
+}
+
+.border-white {
+ --tw-border-opacity: 1;
+ border-color: rgb(var(--white) / var(--tw-border-opacity));
+}
+
+.bg-background {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--background) / var(--tw-bg-opacity));
+}
+
+.bg-background\/0 {
+ background-color: rgb(var(--background) / 0);
+}
+
+.bg-background\/10 {
+ background-color: rgb(var(--background) / 0.1);
+}
+
+.bg-background\/100 {
+ background-color: rgb(var(--background) / 1);
+}
+
+.bg-background\/20 {
+ background-color: rgb(var(--background) / 0.2);
+}
+
+.bg-background\/25 {
+ background-color: rgb(var(--background) / 0.25);
+}
+
+.bg-background\/30 {
+ background-color: rgb(var(--background) / 0.3);
+}
+
+.bg-background\/40 {
+ background-color: rgb(var(--background) / 0.4);
+}
+
+.bg-background\/5 {
+ background-color: rgb(var(--background) / 0.05);
+}
+
+.bg-background\/50 {
+ background-color: rgb(var(--background) / 0.5);
+}
+
+.bg-background\/60 {
+ background-color: rgb(var(--background) / 0.6);
+}
+
+.bg-background\/70 {
+ background-color: rgb(var(--background) / 0.7);
+}
+
+.bg-background\/75 {
+ background-color: rgb(var(--background) / 0.75);
+}
+
+.bg-background\/80 {
+ background-color: rgb(var(--background) / 0.8);
+}
+
+.bg-background\/90 {
+ background-color: rgb(var(--background) / 0.9);
+}
+
+.bg-background\/95 {
+ background-color: rgb(var(--background) / 0.95);
+}
+
+.bg-black {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--black) / var(--tw-bg-opacity));
+}
+
+.bg-brightblack {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--brightblack) / var(--tw-bg-opacity));
+}
+
+.bg-brightwhite {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--brightwhite) / var(--tw-bg-opacity));
+}
+
+.bg-cursor {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--cursor) / var(--tw-bg-opacity));
+}
+
+.bg-cursor\/0 {
+ background-color: rgb(var(--cursor) / 0);
+}
+
+.bg-cursor\/10 {
+ background-color: rgb(var(--cursor) / 0.1);
+}
+
+.bg-cursor\/100 {
+ background-color: rgb(var(--cursor) / 1);
+}
+
+.bg-cursor\/20 {
+ background-color: rgb(var(--cursor) / 0.2);
+}
+
+.bg-cursor\/25 {
+ background-color: rgb(var(--cursor) / 0.25);
+}
+
+.bg-cursor\/30 {
+ background-color: rgb(var(--cursor) / 0.3);
+}
+
+.bg-cursor\/40 {
+ background-color: rgb(var(--cursor) / 0.4);
+}
+
+.bg-cursor\/5 {
+ background-color: rgb(var(--cursor) / 0.05);
+}
+
+.bg-cursor\/50 {
+ background-color: rgb(var(--cursor) / 0.5);
+}
+
+.bg-cursor\/60 {
+ background-color: rgb(var(--cursor) / 0.6);
+}
+
+.bg-cursor\/70 {
+ background-color: rgb(var(--cursor) / 0.7);
+}
+
+.bg-cursor\/75 {
+ background-color: rgb(var(--cursor) / 0.75);
+}
+
+.bg-cursor\/80 {
+ background-color: rgb(var(--cursor) / 0.8);
+}
+
+.bg-cursor\/90 {
+ background-color: rgb(var(--cursor) / 0.9);
+}
+
+.bg-cursor\/95 {
+ background-color: rgb(var(--cursor) / 0.95);
+}
+
+.bg-foreground {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--foreground) / var(--tw-bg-opacity));
+}
+
+.bg-foreground\/0 {
+ background-color: rgb(var(--foreground) / 0);
+}
+
+.bg-foreground\/10 {
+ background-color: rgb(var(--foreground) / 0.1);
+}
+
+.bg-foreground\/100 {
+ background-color: rgb(var(--foreground) / 1);
+}
+
+.bg-foreground\/20 {
+ background-color: rgb(var(--foreground) / 0.2);
+}
+
+.bg-foreground\/25 {
+ background-color: rgb(var(--foreground) / 0.25);
+}
+
+.bg-foreground\/30 {
+ background-color: rgb(var(--foreground) / 0.3);
+}
+
+.bg-foreground\/40 {
+ background-color: rgb(var(--foreground) / 0.4);
+}
+
+.bg-foreground\/5 {
+ background-color: rgb(var(--foreground) / 0.05);
+}
+
+.bg-foreground\/50 {
+ background-color: rgb(var(--foreground) / 0.5);
+}
+
+.bg-foreground\/60 {
+ background-color: rgb(var(--foreground) / 0.6);
+}
+
+.bg-foreground\/70 {
+ background-color: rgb(var(--foreground) / 0.7);
+}
+
+.bg-foreground\/75 {
+ background-color: rgb(var(--foreground) / 0.75);
+}
+
+.bg-foreground\/80 {
+ background-color: rgb(var(--foreground) / 0.8);
+}
+
+.bg-foreground\/90 {
+ background-color: rgb(var(--foreground) / 0.9);
+}
+
+.bg-foreground\/95 {
+ background-color: rgb(var(--foreground) / 0.95);
+}
+
+.bg-green {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--green) / var(--tw-bg-opacity));
+}
+
+.bg-magenta {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--magenta) / var(--tw-bg-opacity));
+}
+
+.bg-red {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--red) / var(--tw-bg-opacity));
+}
+
+.bg-selection_background {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--selection_background) / var(--tw-bg-opacity));
+}
+
+.bg-selection_background\/0 {
+ background-color: rgb(var(--selection_background) / 0);
+}
+
+.bg-selection_background\/10 {
+ background-color: rgb(var(--selection_background) / 0.1);
+}
+
+.bg-selection_background\/100 {
+ background-color: rgb(var(--selection_background) / 1);
+}
+
+.bg-selection_background\/20 {
+ background-color: rgb(var(--selection_background) / 0.2);
+}
+
+.bg-selection_background\/25 {
+ background-color: rgb(var(--selection_background) / 0.25);
+}
+
+.bg-selection_background\/30 {
+ background-color: rgb(var(--selection_background) / 0.3);
+}
+
+.bg-selection_background\/40 {
+ background-color: rgb(var(--selection_background) / 0.4);
+}
+
+.bg-selection_background\/5 {
+ background-color: rgb(var(--selection_background) / 0.05);
+}
+
+.bg-selection_background\/50 {
+ background-color: rgb(var(--selection_background) / 0.5);
+}
+
+.bg-selection_background\/60 {
+ background-color: rgb(var(--selection_background) / 0.6);
+}
+
+.bg-selection_background\/70 {
+ background-color: rgb(var(--selection_background) / 0.7);
+}
+
+.bg-selection_background\/75 {
+ background-color: rgb(var(--selection_background) / 0.75);
+}
+
+.bg-selection_background\/80 {
+ background-color: rgb(var(--selection_background) / 0.8);
+}
+
+.bg-selection_background\/90 {
+ background-color: rgb(var(--selection_background) / 0.9);
+}
+
+.bg-selection_background\/95 {
+ background-color: rgb(var(--selection_background) / 0.95);
+}
+
+.bg-selection_foreground {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--selection_foreground) / var(--tw-bg-opacity));
+}
+
+.bg-yellow {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--yellow) / var(--tw-bg-opacity));
+}
+
+.bg-white {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--white) / var(--tw-bg-opacity));
+}
+
+.bg-opacity-50 {
+ --tw-bg-opacity: 0.5;
+}
+
+.bg-opacity-0 {
+ --tw-bg-opacity: 0;
+}
+
+.p-1 {
+ padding: 0.25rem;
+}
+
+.p-2 {
+ padding: 0.5rem;
+}
+
+.p-2\.5 {
+ padding: 0.625rem;
+}
+
+.p-4 {
+ padding: 1rem;
+}
+
+.p-1\.5 {
+ padding: 0.375rem;
+}
+
+.px-1 {
+ padding-left: 0.25rem;
+ padding-right: 0.25rem;
+}
+
+.px-2 {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+}
+
+.px-4 {
+ padding-left: 1rem;
+ padding-right: 1rem;
+}
+
+.px-5 {
+ padding-left: 1.25rem;
+ padding-right: 1.25rem;
+}
+
+.px-6 {
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+}
+
+.px-8 {
+ padding-left: 2rem;
+ padding-right: 2rem;
+}
+
+.py-0 {
+ padding-top: 0px;
+ padding-bottom: 0px;
+}
+
+.py-1 {
+ padding-top: 0.25rem;
+ padding-bottom: 0.25rem;
+}
+
+.py-2 {
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+}
+
+.py-2\.5 {
+ padding-top: 0.625rem;
+ padding-bottom: 0.625rem;
+}
+
+.py-4 {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+}
+
+.pb-1 {
+ padding-bottom: 0.25rem;
+}
+
+.pb-2 {
+ padding-bottom: 0.5rem;
+}
+
+.pb-3 {
+ padding-bottom: 0.75rem;
+}
+
+.pb-32 {
+ padding-bottom: 8rem;
+}
+
+.pb-36 {
+ padding-bottom: 9rem;
+}
+
+.pb-4 {
+ padding-bottom: 1rem;
+}
+
+.pl-10 {
+ padding-left: 2.5rem;
+}
+
+.pl-2 {
+ padding-left: 0.5rem;
+}
+
+.pl-3 {
+ padding-left: 0.75rem;
+}
+
+.pl-4 {
+ padding-left: 1rem;
+}
+
+.pl-5 {
+ padding-left: 1.25rem;
+}
+
+.pl-8 {
+ padding-left: 2rem;
+}
+
+.pr-2 {
+ padding-right: 0.5rem;
+}
+
+.pr-4 {
+ padding-right: 1rem;
+}
+
+.pt-0 {
+ padding-top: 0px;
+}
+
+.pt-0\.5 {
+ padding-top: 0.125rem;
+}
+
+.pt-1 {
+ padding-top: 0.25rem;
+}
+
+.pt-12 {
+ padding-top: 3rem;
+}
+
+.pt-2 {
+ padding-top: 0.5rem;
+}
+
+.pt-4 {
+ padding-top: 1rem;
+}
+
+.text-left {
+ text-align: left;
+}
+
+.text-center {
+ text-align: center;
+}
+
+.align-top {
+ vertical-align: top;
+}
+
+.font-mono {
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+.text-2xl {
+ font-size: 1.5rem;
+ line-height: 2rem;
+}
+
+.text-base {
+ font-size: 1rem;
+ line-height: 1.5rem;
+}
+
+.text-sm {
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+}
+
+.text-xl {
+ font-size: 1.25rem;
+ line-height: 1.75rem;
+}
+
+.text-xs {
+ font-size: 0.75rem;
+ line-height: 1rem;
+}
+
+.font-bold {
+ font-weight: 700;
+}
+
+.font-medium {
+ font-weight: 500;
+}
+
+.font-normal {
+ font-weight: 400;
+}
+
+.font-semibold {
+ font-weight: 600;
+}
+
+.uppercase {
+ text-transform: uppercase;
+}
+
+.italic {
+ font-style: italic;
+}
+
+.leading-normal {
+ line-height: 1.5;
+}
+
+.text-background {
+ --tw-text-opacity: 1;
+ color: rgb(var(--background) / var(--tw-text-opacity));
+}
+
+.text-background\/0 {
+ color: rgb(var(--background) / 0);
+}
+
+.text-background\/10 {
+ color: rgb(var(--background) / 0.1);
+}
+
+.text-background\/100 {
+ color: rgb(var(--background) / 1);
+}
+
+.text-background\/20 {
+ color: rgb(var(--background) / 0.2);
+}
+
+.text-background\/25 {
+ color: rgb(var(--background) / 0.25);
+}
+
+.text-background\/30 {
+ color: rgb(var(--background) / 0.3);
+}
+
+.text-background\/40 {
+ color: rgb(var(--background) / 0.4);
+}
+
+.text-background\/5 {
+ color: rgb(var(--background) / 0.05);
+}
+
+.text-background\/50 {
+ color: rgb(var(--background) / 0.5);
+}
+
+.text-background\/60 {
+ color: rgb(var(--background) / 0.6);
+}
+
+.text-background\/70 {
+ color: rgb(var(--background) / 0.7);
+}
+
+.text-background\/75 {
+ color: rgb(var(--background) / 0.75);
+}
+
+.text-background\/80 {
+ color: rgb(var(--background) / 0.8);
+}
+
+.text-background\/90 {
+ color: rgb(var(--background) / 0.9);
+}
+
+.text-background\/95 {
+ color: rgb(var(--background) / 0.95);
+}
+
+.text-black {
+ --tw-text-opacity: 1;
+ color: rgb(var(--black) / var(--tw-text-opacity));
+}
+
+.text-brightred {
+ --tw-text-opacity: 1;
+ color: rgb(var(--brightred) / var(--tw-text-opacity));
+}
+
+.text-brightwhite {
+ --tw-text-opacity: 1;
+ color: rgb(var(--brightwhite) / var(--tw-text-opacity));
+}
+
+.text-cursor {
+ --tw-text-opacity: 1;
+ color: rgb(var(--cursor) / var(--tw-text-opacity));
+}
+
+.text-cursor\/0 {
+ color: rgb(var(--cursor) / 0);
+}
+
+.text-cursor\/10 {
+ color: rgb(var(--cursor) / 0.1);
+}
+
+.text-cursor\/100 {
+ color: rgb(var(--cursor) / 1);
+}
+
+.text-cursor\/20 {
+ color: rgb(var(--cursor) / 0.2);
+}
+
+.text-cursor\/25 {
+ color: rgb(var(--cursor) / 0.25);
+}
+
+.text-cursor\/30 {
+ color: rgb(var(--cursor) / 0.3);
+}
+
+.text-cursor\/40 {
+ color: rgb(var(--cursor) / 0.4);
+}
+
+.text-cursor\/5 {
+ color: rgb(var(--cursor) / 0.05);
+}
+
+.text-cursor\/50 {
+ color: rgb(var(--cursor) / 0.5);
+}
+
+.text-cursor\/60 {
+ color: rgb(var(--cursor) / 0.6);
+}
+
+.text-cursor\/70 {
+ color: rgb(var(--cursor) / 0.7);
+}
+
+.text-cursor\/75 {
+ color: rgb(var(--cursor) / 0.75);
+}
+
+.text-cursor\/80 {
+ color: rgb(var(--cursor) / 0.8);
+}
+
+.text-cursor\/90 {
+ color: rgb(var(--cursor) / 0.9);
+}
+
+.text-cursor\/95 {
+ color: rgb(var(--cursor) / 0.95);
+}
+
+.text-foreground {
+ --tw-text-opacity: 1;
+ color: rgb(var(--foreground) / var(--tw-text-opacity));
+}
+
+.text-foreground\/0 {
+ color: rgb(var(--foreground) / 0);
+}
+
+.text-foreground\/10 {
+ color: rgb(var(--foreground) / 0.1);
+}
+
+.text-foreground\/100 {
+ color: rgb(var(--foreground) / 1);
+}
+
+.text-foreground\/20 {
+ color: rgb(var(--foreground) / 0.2);
+}
+
+.text-foreground\/25 {
+ color: rgb(var(--foreground) / 0.25);
+}
+
+.text-foreground\/30 {
+ color: rgb(var(--foreground) / 0.3);
+}
+
+.text-foreground\/40 {
+ color: rgb(var(--foreground) / 0.4);
+}
+
+.text-foreground\/5 {
+ color: rgb(var(--foreground) / 0.05);
+}
+
+.text-foreground\/50 {
+ color: rgb(var(--foreground) / 0.5);
+}
+
+.text-foreground\/60 {
+ color: rgb(var(--foreground) / 0.6);
+}
+
+.text-foreground\/70 {
+ color: rgb(var(--foreground) / 0.7);
+}
+
+.text-foreground\/75 {
+ color: rgb(var(--foreground) / 0.75);
+}
+
+.text-foreground\/80 {
+ color: rgb(var(--foreground) / 0.8);
+}
+
+.text-foreground\/90 {
+ color: rgb(var(--foreground) / 0.9);
+}
+
+.text-foreground\/95 {
+ color: rgb(var(--foreground) / 0.95);
+}
+
+.text-red {
+ --tw-text-opacity: 1;
+ color: rgb(var(--red) / var(--tw-text-opacity));
+}
+
+.text-selection_background {
+ --tw-text-opacity: 1;
+ color: rgb(var(--selection_background) / var(--tw-text-opacity));
+}
+
+.text-selection_background\/0 {
+ color: rgb(var(--selection_background) / 0);
+}
+
+.text-selection_background\/10 {
+ color: rgb(var(--selection_background) / 0.1);
+}
+
+.text-selection_background\/100 {
+ color: rgb(var(--selection_background) / 1);
+}
+
+.text-selection_background\/20 {
+ color: rgb(var(--selection_background) / 0.2);
+}
+
+.text-selection_background\/25 {
+ color: rgb(var(--selection_background) / 0.25);
+}
+
+.text-selection_background\/30 {
+ color: rgb(var(--selection_background) / 0.3);
+}
+
+.text-selection_background\/40 {
+ color: rgb(var(--selection_background) / 0.4);
+}
+
+.text-selection_background\/5 {
+ color: rgb(var(--selection_background) / 0.05);
+}
+
+.text-selection_background\/50 {
+ color: rgb(var(--selection_background) / 0.5);
+}
+
+.text-selection_background\/60 {
+ color: rgb(var(--selection_background) / 0.6);
+}
+
+.text-selection_background\/70 {
+ color: rgb(var(--selection_background) / 0.7);
+}
+
+.text-selection_background\/75 {
+ color: rgb(var(--selection_background) / 0.75);
+}
+
+.text-selection_background\/80 {
+ color: rgb(var(--selection_background) / 0.8);
+}
+
+.text-selection_background\/90 {
+ color: rgb(var(--selection_background) / 0.9);
+}
+
+.text-selection_background\/95 {
+ color: rgb(var(--selection_background) / 0.95);
+}
+
+.text-selection_foreground {
+ --tw-text-opacity: 1;
+ color: rgb(var(--selection_foreground) / var(--tw-text-opacity));
+}
+
+.text-white {
+ --tw-text-opacity: 1;
+ color: rgb(var(--white) / var(--tw-text-opacity));
+}
+
+.underline {
+ text-decoration-line: underline;
+}
+
+.line-through {
+ text-decoration-line: line-through;
+}
+
+.underline-offset-4 {
+ text-underline-offset: 4px;
+}
+
+.placeholder-brightwhite::-moz-placeholder {
+ --tw-placeholder-opacity: 1;
+ color: rgb(var(--brightwhite) / var(--tw-placeholder-opacity));
+}
+
+.placeholder-brightwhite::placeholder {
+ --tw-placeholder-opacity: 1;
+ color: rgb(var(--brightwhite) / var(--tw-placeholder-opacity));
+}
+
+.placeholder-white::-moz-placeholder {
+ --tw-placeholder-opacity: 1;
+ color: rgb(var(--white) / var(--tw-placeholder-opacity));
+}
+
+.placeholder-white::placeholder {
+ --tw-placeholder-opacity: 1;
+ color: rgb(var(--white) / var(--tw-placeholder-opacity));
+}
+
+.outline {
+ outline-style: solid;
+}
+
+.outline-0 {
+ outline-width: 0px;
+}
+
+.invert {
+ --tw-invert: invert(100%);
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.filter {
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.transition {
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-duration: 150ms;
+}
+
+.transition-colors {
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-duration: 150ms;
+}
+
+.duration-200 {
+ transition-duration: 200ms;
+}
+
+.hover\:bg-background:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--background) / var(--tw-bg-opacity));
+}
+
+.hover\:bg-brightblack:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--brightblack) / var(--tw-bg-opacity));
+}
+
+.hover\:bg-brightgreen:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--brightgreen) / var(--tw-bg-opacity));
+}
+
+.hover\:bg-brightmagenta:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--brightmagenta) / var(--tw-bg-opacity));
+}
+
+.hover\:bg-foreground:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--foreground) / var(--tw-bg-opacity));
+}
+
+.hover\:bg-selection_background:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--selection_background) / var(--tw-bg-opacity));
+}
+
+.hover\:bg-white:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--white) / var(--tw-bg-opacity));
+}
+
+.hover\:fill-black:hover {
+ fill: rgb(var(--black) / 1);
+}
+
+.hover\:text-background:hover {
+ --tw-text-opacity: 1;
+ color: rgb(var(--background) / var(--tw-text-opacity));
+}
+
+.hover\:text-brightwhite:hover {
+ --tw-text-opacity: 1;
+ color: rgb(var(--brightwhite) / var(--tw-text-opacity));
+}
+
+.hover\:text-selection_foreground:hover {
+ --tw-text-opacity: 1;
+ color: rgb(var(--selection_foreground) / var(--tw-text-opacity));
+}
+
+.hover\:text-black:hover {
+ --tw-text-opacity: 1;
+ color: rgb(var(--black) / var(--tw-text-opacity));
+}
+
+.focus\:outline-none:focus {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+}
+
+.focus\:ring-2:focus {
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-4:focus {
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+:is([dir="rtl"] .rtl\:border-l) {
+ border-left-width: 1px;
+}
+
+:is([dir="rtl"] .rtl\:border-r-0) {
+ border-right-width: 0px;
+}
+
+@media (prefers-color-scheme: dark) {
+ .dark\:text-white {
+ --tw-text-opacity: 1;
+ color: rgb(var(--white) / var(--tw-text-opacity));
+ }
+}
+
+@media (min-width: 640px) {
+ .sm\:my-1 {
+ margin-top: 0.25rem;
+ margin-bottom: 0.25rem;
+ }
+
+ .sm\:text-sm {
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+ }
+
+ .sm\:text-xs {
+ font-size: 0.75rem;
+ line-height: 1rem;
+ }
+}
+
+@media (min-width: 768px) {
+ .md\:bottom-0 {
+ bottom: 0px;
+ }
+
+ .md\:top-0 {
+ top: 0px;
+ }
+}
+
+@media (min-width: 1024px) {
+ .lg\:mx-12 {
+ margin-left: 3rem;
+ margin-right: 3rem;
+ }
+
+ .lg\:mx-20 {
+ margin-left: 5rem;
+ margin-right: 5rem;
+ }
+
+ .lg\:mx-4 {
+ margin-left: 1rem;
+ margin-right: 1rem;
+ }
+
+ .lg\:mx-48 {
+ margin-left: 12rem;
+ margin-right: 12rem;
+ }
+
+ .lg\:mx-6 {
+ margin-left: 1.5rem;
+ margin-right: 1.5rem;
+ }
+
+ .lg\:my-1 {
+ margin-top: 0.25rem;
+ margin-bottom: 0.25rem;
+ }
+
+ .lg\:my-12 {
+ margin-top: 3rem;
+ margin-bottom: 3rem;
+ }
+
+ .lg\:my-4 {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ }
+
+ .lg\:mb-4 {
+ margin-bottom: 1rem;
+ }
+
+ .lg\:ml-12 {
+ margin-left: 3rem;
+ }
+
+ .lg\:ml-4 {
+ margin-left: 1rem;
+ }
+
+ .lg\:mt-12 {
+ margin-top: 3rem;
+ }
+
+ .lg\:mt-16 {
+ margin-top: 4rem;
+ }
+
+ .lg\:block {
+ display: block;
+ }
+
+ .lg\:flex {
+ display: flex;
+ }
+
+ .lg\:grid {
+ display: grid;
+ }
+
+ .lg\:h-8 {
+ height: 2rem;
+ }
+
+ .lg\:h-80 {
+ height: 20rem;
+ }
+
+ .lg\:h-auto {
+ height: auto;
+ }
+
+ .lg\:w-1\/3 {
+ width: 33.333333%;
+ }
+
+ .lg\:w-8 {
+ width: 2rem;
+ }
+
+ .lg\:w-80 {
+ width: 20rem;
+ }
+
+ .lg\:grid-cols-4 {
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ }
+
+ .lg\:flex-row {
+ flex-direction: row;
+ }
+
+ .lg\:items-center {
+ align-items: center;
+ }
+
+ .lg\:justify-center {
+ justify-content: center;
+ }
+
+ .lg\:gap-4 {
+ gap: 1rem;
+ }
+
+ .lg\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-x-reverse: 0;
+ margin-right: calc(2rem * var(--tw-space-x-reverse));
+ margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
+ }
+
+ .lg\:space-y-8 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-y-reverse: 0;
+ margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+ margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+ }
+
+ .lg\:overflow-x-auto {
+ overflow-x: auto;
+ }
+
+ .lg\:overflow-y-auto {
+ overflow-y: auto;
+ }
+
+ .lg\:p-6 {
+ padding: 1.5rem;
+ }
+
+ .lg\:px-12 {
+ padding-left: 3rem;
+ padding-right: 3rem;
+ }
+
+ .lg\:px-16 {
+ padding-left: 4rem;
+ padding-right: 4rem;
+ }
+
+ .lg\:px-2 {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ }
+
+ .lg\:px-4 {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+
+ .lg\:px-8 {
+ padding-left: 2rem;
+ padding-right: 2rem;
+ }
+
+ .lg\:py-1 {
+ padding-top: 0.25rem;
+ padding-bottom: 0.25rem;
+ }
+
+ .lg\:py-1\.5 {
+ padding-top: 0.375rem;
+ padding-bottom: 0.375rem;
+ }
+
+ .lg\:py-4 {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ }
+
+ .lg\:pb-0 {
+ padding-bottom: 0px;
+ }
+
+ .lg\:pb-2 {
+ padding-bottom: 0.5rem;
+ }
+
+ .lg\:pb-4 {
+ padding-bottom: 1rem;
+ }
+
+ .lg\:pl-0 {
+ padding-left: 0px;
+ }
+
+ .lg\:pl-6 {
+ padding-left: 1.5rem;
+ }
+
+ .lg\:pr-6 {
+ padding-right: 1.5rem;
+ }
+
+ .lg\:pt-2 {
+ padding-top: 0.5rem;
+ }
+
+ .lg\:pt-4 {
+ padding-top: 1rem;
+ }
+
+ .lg\:text-center {
+ text-align: center;
+ }
+
+ .lg\:text-2xl {
+ font-size: 1.5rem;
+ line-height: 2rem;
+ }
+
+ .lg\:text-3xl {
+ font-size: 1.875rem;
+ line-height: 2.25rem;
+ }
+
+ .lg\:text-4xl {
+ font-size: 2.25rem;
+ line-height: 2.5rem;
+ }
+
+ .lg\:text-sm {
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+ }
+
+ .lg\:text-xl {
+ font-size: 1.25rem;
+ line-height: 1.75rem;
+ }
+}
+
+@media (min-width: 1280px) {
+ .xl\:block {
+ display: block;
+ }
+}
\ No newline at end of file
diff --git a/src/tailwind.css b/src/tailwind.css
new file mode 100644
index 0000000..09abbda
--- /dev/null
+++ b/src/tailwind.css
@@ -0,0 +1,29 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ :root {
+ --black: 40 42 54;
+ --red: 68 71 90;
+ --green: 248 248 242;
+ --yellow: 98 114 164;
+ --blue: 139 233 253;
+ --magenta: 80 250 123;
+ --cyan: 255 184 108;
+ --white: 255 121 198;
+ --brightblack: 189 147 249;
+ --brightred: 255 85 85;
+ --brightgreen: 241 250 140;
+ --brightyellow: 139 233 253;
+ --brightblue: 80 250 123;
+ --brightmagenta: 255 184 108;
+ --brightcyan: 255 121 198;
+ --brightwhite: 189 147 249;
+ --background: 40 42 54;
+ --selection_foreground: 68 71 90;
+ --cursor: 139 233 253;
+ --foreground: 248 248 242;
+ --selection_background: 189 147 249;
+ }
+}
\ No newline at end of file
diff --git a/src/themes/toposTheme.ts b/src/themes/toposTheme.ts
deleted file mode 100644
index 23c613a..0000000
--- a/src/themes/toposTheme.ts
+++ /dev/null
@@ -1,221 +0,0 @@
-import { EditorView } from "@codemirror/view";
-import { Extension } from "@codemirror/state";
-import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
-import { tags as t } from "@lezer/highlight";
-
-const base00 = "#262626",
- base01 = "#3B4252",
- base02 = "#BBBBBB",
- base03 = "#4C566A",
- base04 = "#D8DEE9",
- base05 = "#E5E9F0",
- base07 = "#8FBCBB",
- base_red = "#BF616A",
- base_deeporange = "#D08770",
- base_pink = "#B48EAD",
- base_cyan = "#FBCF8B",
- base_yellow = "#88C0D0",
- base_orange = "#D08770",
- base_indigo = "#5E81AC",
- base_purple = "#B48EAD",
- base_green = "#A3BE8C",
- base_lightgreen = "#A3BE8C";
-
-const invalid = base_red,
- darkBackground = "#262626",
- highlightBackground = "#252525",
- // background = base00,
- tooltipBackground = base01,
- cursor = base04;
-
-/// The editor theme styles for Material Dark.
-export const toposDarkTheme = EditorView.theme(
- {
- "&": {
- color: base05,
- // backgroundColor: background,
- backgroundColor: "transparent",
- fontSize: "24px",
- fontFamily: "IBM Plex Mono",
- },
- ".cm-content": {
- caretColor: cursor,
- fontFamily: "IBM Plex Mono",
- },
- ".cm-cursor, .cm-dropCursor": {
- borderLeftColor: cursor,
- },
- "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
- {
- backgroundColor: base00,
- border: `0.5px solid ${base00}`,
- },
- ".cm-panels": {
- backgroundColor: darkBackground,
- color: base05,
- },
- ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
- ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
- ".cm-search.cm-panel": { backgroundColor: "transparent" },
- ".cm-searchMatch": {
- outline: `1px solid ${base_cyan}`,
- },
- ".cm-searchMatch.cm-searchMatch-selected": {
- backgroundColor: highlightBackground,
- },
- ".cm-activeLine": {
- // backgroundColor: highlightBackground
- backgroundColor: "rgb(76,76,106, 0.1)",
- },
- ".cm-selectionMatch": {
- backgroundColor: base04,
- outline: `1px solid ${base_red}`,
- },
-
- "&.cm-focused .cm-matchingBracket": {
- color: base02,
- // outline: `1px solid ${base02}`,
- },
-
- "&.cm-focused .cm-nonmatchingBracket": {
- color: base_red,
- },
-
- ".cm-gutters": {
- //backgroundColor: base00,
- backgroundColor: "transparent",
- color: base02,
- },
-
- ".cm-activeLineGutter": {
- backgroundColor: highlightBackground,
- color: base02,
- },
-
- ".cm-foldPlaceholder": {
- border: "none",
- color: `${base07}`,
- },
-
- ".cm-tooltip": {
- border: "none",
- backgroundColor: tooltipBackground,
- },
- ".cm-tooltip .cm-tooltip-arrow:before": {},
- ".cm-tooltip .cm-tooltip-arrow:after": {
- borderTopColor: tooltipBackground,
- borderBottomColor: tooltipBackground,
- },
- ".cm-tooltip-autocomplete": {
- "& > ul > li[aria-selected]": {
- backgroundColor: highlightBackground,
- color: base03,
- },
- },
- },
- { dark: true },
-);
-
-/// The highlighting style for code in the Material Dark theme.
-export const toposDarkHighlightStyle = HighlightStyle.define([
- { tag: t.keyword, color: base_purple },
- {
- tag: [t.name, t.deleted, t.character, t.macroName],
- color: base_cyan,
- },
- { tag: [t.propertyName], color: base_yellow },
- { tag: [t.variableName], color: base05 },
- { tag: [t.function(t.variableName)], color: base_cyan },
- { tag: [t.labelName], color: base_purple },
- {
- tag: [t.color, t.constant(t.name), t.standard(t.name)],
- color: base_yellow,
- },
- { tag: [t.definition(t.name), t.separator], color: base_pink },
- { tag: [t.brace], color: base_purple },
- {
- tag: [t.annotation],
- color: invalid,
- },
- {
- tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
- color: base_orange,
- },
- {
- tag: [t.typeName, t.className],
- color: base_orange,
- },
- {
- tag: [t.operator, t.operatorKeyword],
- color: base_indigo,
- },
- {
- tag: [t.tagName],
- color: base_deeporange,
- },
- {
- tag: [t.squareBracket],
- color: base_red,
- },
- {
- tag: [t.angleBracket],
- color: base02,
- },
- {
- tag: [t.attributeName],
- color: base05,
- },
- {
- tag: [t.regexp],
- color: invalid,
- },
- {
- tag: [t.quote],
- color: base_green,
- },
- { tag: [t.string], color: base_lightgreen },
- {
- tag: t.link,
- color: base_cyan,
- textDecoration: "underline",
- textUnderlinePosition: "under",
- },
- {
- tag: [t.url, t.escape, t.special(t.string)],
- color: base_yellow,
- },
- { tag: [t.meta], color: base03 },
- { tag: [t.comment], color: base02, fontStyle: "italic" },
- { tag: t.monospace, color: base05 },
- { tag: t.strong, fontWeight: "bold", color: base_red },
- { tag: t.emphasis, fontStyle: "italic", color: base_lightgreen },
- { tag: t.strikethrough, textDecoration: "line-through" },
- { tag: t.heading, fontWeight: "bold", color: base_yellow },
- { tag: t.heading1, fontWeight: "bold", color: base_yellow },
- {
- tag: [t.heading2, t.heading3, t.heading4],
- fontWeight: "bold",
- color: base_yellow,
- },
- {
- tag: [t.heading5, t.heading6],
- color: base_yellow,
- },
- { tag: [t.atom, t.bool, t.special(t.variableName)], color: base_cyan },
- {
- tag: [t.processingInstruction, t.inserted],
- color: base_red,
- },
- {
- tag: [t.contentSeparator],
- color: base_cyan,
- },
- { tag: t.invalid, color: base02, borderBottom: `1px dotted ${base_red}` },
-]);
-
-/// Extension to enable the Material Dark theme (both the editor theme and
-/// the highlight style).
-export const toposTheme: Extension = [
- toposDarkTheme,
- syntaxHighlighting(toposDarkHighlightStyle),
-];
diff --git a/tailwind.config.js b/tailwind.config.js
index 3eecb2f..9b7342d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,21 +1,33 @@
/** @type {import('tailwindcss').Config} */
export default {
- content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
- safelist: [
- {
- pattern: /hljs+/,
- },
- ],
+ content: ["./src/**/*.html", "./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
- extend: {},
- hljs: {
- theme: "nord",
- custom: {
- general: {
- comment: "#FEFEFE",
- },
- },
- },
- },
- plugins: [require("tailwind-highlightjs")],
+ colors: {
+ black: "rgb(var(--black) / )",
+ red: "rgb(var(--red) / )",
+ green: "rgb(var(--green) / )",
+ yellow: "rgb(var(--yellow) / )",
+ blue: "rgb(var(--blue) / )",
+ magenta: "rgb(var(--magenta) / )",
+ cyan: "rgb(var(--cyan) / )",
+ white: "rgb(var(--white) / )",
+ brightblack: "rgb(var(--brightblack) / )",
+ brightred: "rgb(var(--brightred) / )",
+ brightgreen: "rgb(var(--brightgreen) / )",
+ brightyellow: "rgb(var(--brightyellow) / )",
+ brightblue: "rgb(var(--brightblue) / )",
+ brightmagenta: "rgb(var(--brightmagenta) / )",
+ brightcyan: "rgb(var(--brightcyan) / )",
+ brightwhite: "rgb(var(--brightwhite) / )",
+ background: "rgb(var(--background) / )",
+ selection_foreground: "rgb(var(--selection_foreground) / )",
+ cursor: "rgb(var(--cursor) / )",
+ foreground: "rgb(var(--foreground) / )",
+ selection_background: "rgb(var(--selection_background) / )",
+ }
+ },
+ extend: {},
+ safelist: [{
+ pattern: /(bg|text|border)-(transparent|color0|color1|color2|color3|color4|color5|color6|color7|color8|color9|color10|color11|color12|color13|color14|color15|background|selection_background|cursor|foreground|selection_background)/,
+ }],
};
diff --git a/vite.config.js b/vite.config.js
index 866a9e1..22d1e67 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -10,11 +10,10 @@ const vitePWAconfiguration = {
workbox: {
sourcemap: false,
- cleanupOutdatedCaches: true,
+ cleanupOutdatedCaches: false,
globPatterns: [
"**/*.{js,js.gz,css,html,gif,png,json,woff,woff2,json,ogg,wav,mp3,ico,png,svg}",
],
- // Thanks Froos :)
runtimeCaching: [
{
urlPattern: ({ url }) =>
diff --git a/yarn.lock b/yarn.lock
index cdcd727..d32d3cc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2476,6 +2476,11 @@ highlight.js@^11.5.0:
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.8.0.tgz#966518ea83257bae2e7c9a48596231856555bb65"
integrity sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==
+highlight.js@^11.9.0:
+ version "11.9.0"
+ resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.9.0.tgz#04ab9ee43b52a41a047432c8103e2158a1b8b5b0"
+ integrity sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==
+
html-encoder-decoder@^1.3.9:
version "1.3.9"
resolved "https://registry.yarnpkg.com/html-encoder-decoder/-/html-encoder-decoder-1.3.9.tgz#d5ec7d249cd525709f7640ae9340f482cc86e94a"