styles.css

body {color: white;position: relative;display: flex;height: 100vh;max-width: 66vw;min-height: 100vh;line-height: 1.2;margin: 0 auto;padding: 0 5.5em;overflow-y: hidden;overflow-x: hidden;background: linear-gradient(to right, #4bca3a9e, #f9f9f996, #7341eaa6);font-family: Arial, sans-serif;flex-direction: column;align-items: center;justify-content: space-between;}

.toggles {
margin-top: 16px;
display: contents;
}

#chat {
display: flex;
margin: 10px;
flex-direction: column;
align-items: flex-end;
}

::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #ff000000;
}

#container {
/* color: #ffffff; */
overflow: auto;
box-shadow: 0px 13px 15px 8px rgba(0, 0, 0, 0.2);
margin-top: 20px;
min-height: 90vh;
transition: all ease-in 0.3s;
min-width: 33vh;
overflow-x: hidden;
display: flex;
background: #bcbbbad9;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
max-width: 90vw;
margin-bottom: 20px;
animation: slideFromTop 1s cubic-bezier(0, 0, 0, 1.63);
max-height: 44vh;
border-radius: 43px;
}

main {display: flex;gap: 1em;flex-grow: 2;margin-top: 8px;overflow-y: auto;overflow-x: hidden;min-width: 60vw;background: #ffffff61;transition: all 0.5s ease-in-out;box-shadow: 0px 2px 11px 3px rgb(0 0 0 / 19%);border-radius: 8px;margin-bottom: 4px;animation: flyInFromRight 1.2s cubic-bezier(0.4, 0, 1, 1);padding: 10px;justify-content: center;}



@font-face {
font-family: 'Sunny Spells';
src: url('./assets/fonts/Sunny\ Spells.otf') format('opentype'),
        url('./assets/fonts/Sunny\ Spells.ttf') format('truetype');
}

a {color: #54349f;}

p {
/* overflow-wrap: break-word; */
word-wrap: break-word;
hyphens: auto;
color: #e6d2b8;
/* background: black; */
/* width: 90%; */
/* justify-content: center; */
/* padding: 15px; */
/* border-radius: 24px; */
margin-top: 0.5em;
margin-bottom: 0.5em;
}

p.strong {
color: aliceblue;
}


#write form {
margin: 1em 0 0 0;
display: flex;
width: 100%;
flex-direction: column;
gap: 0.5em;
text-align: center;
align-items: stretch;
}

.right {
display: flex;
flex-direction: row;
gap: 0.5em;
margin-bottom: 30px;
justify-content: center;
animation: fade-in 3s ease;
}

fieldset {
border: none;
padding: 0;
margin: 0;
}

fieldset.two {display: grid;justify-content: center;border: 1px solid #fff;margin-top: 7px;padding: 12px;width: fit-content;text-shadow: 1px 0px 1px black;box-shadow: inset 0px 5px 7px 0px rgb(141 141 141 / 60%);background: linear-gradient(to left, #4185369e, #5e439e87);border-radius: 21px;border-color: #0a0a0a00;grid-template:
"a a";gap: 1em;justify-items: center;}

fieldset.two {
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* smooth transition for the hover effect */
}

fieldset.two:hover {
    box-shadow: inset 0 4px 8px rgb(0 0 0 / 77%); /* inset shadow */
    transform: scale(0.98); /* slightly scale down */
}

fieldset.three {
display: grid;
grid-template: "a a a";
gap: 1em;
}

.greenHighlight {
    color: green;
    font-size: 12;
    text-shadow: 1px 0px 1px black;
}

.yellowHighlight {
    color: yellow;
}

.redHighlight {
    color: red;
    background: black;
    letter-spacing: 2px;
    word-spacing: 5px;
    padding: 2px;
    border-radius: 3px;
}

details {
border: 1px solid #fff;
/* background: #919191; */
border-radius: 16px;
/* padding: 0.5em 0.5em 0; */
margin-top: 0.5em;
}

summary {
font-weight: bold;
margin: 0.02em -0.5em 0;
padding: 0.5em;
cursor: pointer;
}

textarea {
padding: 10px;
height: 10vh;
width: 100%;
flex-grow: 1;
border-radius: 8px;
transition: all 0.8s ease-in-out;
/* box-shadow: 1px -4px 20px 4px rgba(0, 0, 0, 0.2); */
color: black;
background: #000000a8;
/* border-radius: 12px; */
}

textarea#inputarea {
width: 50vw;
}

textarea#inputarea:hover {
transform: scale(0.98) translateY(-4px); 
}

textarea:hover {
transform: scale(0.98) translateY(4px); 
}


pre code {
display: block;
color: #000;
}

pre {
position: relative;
}

#codeblock {
width: fit-content;
height: fit-content;
margin-top: 18px;
margin-right: 20px;
margin-bottom: -43px;
margin-left: 23px;
}

.editButton, .codeblock-checkbox ,.diffbutton, .saveButton, .copyButton, .runButton {
display: flex;
align-items: center;
justify-content: space-around;
height: 23px;
border-radius: 20px;
border: none;
cursor: pointer;
position: absolute;
top: 4px;
padding: 4px;
}

.editButton, .diffbutton, .saveButton, .copyButton, .runButton {
top: 6px;
width: 24px;
}

.codeblock-checkbox {
left: 30px;
margin:inherit 4px;
width: 15px;
}

.diffButton {right: 136px;}

.copyButton {right: 65px;}

.saveButton {right: 100px;}

.runButton {
right: 30px;
transition: all 0.2s ease-in-out;
}

.runButton:hover {
color: green;
width: 30px;
transform: translateX(8px);
}


.editButton {
right: 170px;
}

code {
font-family: monospace;
color: #0fa78f;
}

label {
color: #21201f;
font-style: italic;
font-size: 16px;
}

fieldset label {
margin: 0.5em 0;
display: block;
}

header, footer {
text-align: center;
}

footer {
font-size: 60%;
padding-top: 5px;
padding-right: 60px;
padding-bottom: 5px;
padding-left: 60px;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
background: linear-gradient(to left, #005c4f47, #b93e0054);
color: #888;
}

code[class*=language-],
pre[class*=language-] {
color: #f8f8f2;  /* Bright text color */
white-space: pre-line;
word-spacing: normal;
word-break: normal;
border-radius: 40px;
margin: 14px;
background: #282a36;  /* Dark Background */
word-wrap: normal;
justify-content: center;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 2;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}

code[class*=language-] ::-moz-selection,
code[class*=language-]::-moz-selection,
pre[class*=language-] ::-moz-selection,
pre[class*=language-]::-moz-selection {
text-shadow: none;
background: #44475a  /* Moderate dark color for selection */
}

code[class*=language-] ::selection,
code[class*=language-]::selection,
pre[class*=language-] ::selection,
pre[class*=language-]::selection {
text-shadow: none;
background: #44475a;  /* Moderate dark color for selection */
}

@media print {
code[class*=language-],
pre[class*=language-] {
    text-shadow: none;
}
}

pre[class*=language-] {
/* padding-left: 5em; */
margin-bottom: -3.5em;
margin-left: -5px;
}

:not(pre)>code[class*=language-],
pre[class*=language-] {
background: #00000000;  /* Black background */
}

:not(pre)>code[class*=language-] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}

.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
color: #8be9fd;  /* Cyan color */
font-style: italic;
}

#logo {
display: inline-block;
font-size: 24px;
transition: transform 0.5s;
}

.spinning {
animation: spin 1s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }
}

.token.punctuation {
color: #f8f8f2;  /* Bright text color */
font-weight: bold;
}

.token.namespace {
opacity: .7
}

.token.boolean,
.token.constant,
.token.deleted,
.token.number,
.token.property,
.token.symbol,
.token.tag {
font-weight: bold;
color: #ff5555;  /* Bright red color */
font-style: italic;
}

.token.attr-name,
.token.builtin,
.token.char,
.token.inserted,
.token.selector,
.token.string {
color: #50fa7b;  /* Green color */
}

.language-css .token.string,
.style .token.string,
.token.entity,
.token.operator,
.token.url {
color: #f1fa8c;  /* Yellow color */
    /* Black background */
}

.token.atrule,
.token.attr-value,
.token.keyword {
color: #bd93f9;  /* Purple color */
}

.token.class-name,
.token.function {
color: #f8f8f2;  /* Bright text color */
}

.token.important,
.token.regex,
.token.variable {
color: #ffb86c;  /* Orange color */
}

.token.bold,
.token.important {
font-weight: 700;
}

.token.italic {
font-style: italic;
}

.token.entity {
cursor: help;
}


button {
border: none;
background-color: #ffffff;
/* Removes background color */
border: none;
/* Removes border */
color: black;
width: 55px;
height: 25px;
cursor: pointer;
border-radius: 5px;
}

button:hover {
}

/* Crash in from the top with bounce */
@keyframes crashInFromTop {
0% {
    transform: translateY(-100vh);
    animation-timing-function: ease-in;
}

38% {
    transform: translateY(0);
    animation-timing-function: ease-out;
}

55% {
    transform: translateY(-65vh);
    animation-timing-function: ease-in;
}

72% {
    transform: translateY(0);
    animation-timing-function: ease-out;
}

81% {
    transform: translateY(-28vh);
    animation-timing-function: ease-in;
}

90% {
    transform: translateY(0);
    animation-timing-function: ease-out;
}

95% {
    transform: translateY(-8vh);
    animation-timing-function: ease-in;
}

100% {
    transform: translateY(0);
    animation-timing-function: ease-out;
}
}

@keyframes slideFromTop {
0% {
    transform: translateY(-100vh);
}

100% {
    transform: translateY(0);
}
}

/* Fly in from the left */
@keyframes flyInFromLeft {
0% {
    transform: translateX(-100vw);
}

100% {
    transform: translateX(0);
}
}

/* Fly in from the right */
@keyframes flyInFromRight {
0% {
    transform: translateX(100vw);
}

100% {
    transform: translateX(0);
}
}

/* Fly in from the bottom */
@keyframes flyInFromBottom {
0% {
    transform: translateY(100vh);
}

100% {
    transform: translateY(0);
}
}

@keyframes flyOutToBottom {
0% {
    transform: translateY(0);
}

100% {
    transform: translateY(100vh);
}
}

#main_output_container {
margin-top: 15px;
flex-direction: row-reverse;
}

@keyframes slide {
0% {
    transform: translateX(0);
}

100% {
    transform: translateX(-50%);
}

/* For two slide-tracks */
}

@keyframes bounce {

0%,
20%,
50%,
80%,
100% {
    transform: translateY(0);
}

40% {
    transform: translateY(-10px);
}

60% {
    transform: translateY(-5px);
}
}



@keyframes TitleGradientAnimation {
0% {
    background-position: 100% 0px;
}

25% {
    background-position: 25% 25%;
}

50% {
    background-position: 0px 50%;
}

75% {
    background-position: 75% 25%;
}

100% {
    background-position: 100% 0px;
}
}

@keyframes fade-in {
0% {
    opacity: 0;
}

100% {
    opacity: 1;
}
}

@keyframes fade-out {
0% {
    opacity: 1;
}
100% {
    opacity: 0;
}
}

.rotate-icon {
display: inline-block;  /* This ensures that the transform property works as expected */
transform-origin: center;
transition: all 0.3s ease; /* This will ensure a smooth transition in both directions */
}

#randButton {
margin-right: -10px;
}

#sendButton:hover .rotate-icon {
color: #69c95c;
transform: rotate(-30deg) translate3d(6px, -2px, 3px);
}

#sendButton:hover {
background-color: transparent; /* Background becomes transparent on hover */
}

#sendButton {
background-color: #00d600a1; /* Initial background color */
transition: all 0.3s ease-in-out; /* Transition for smooth animation */
}

/* Hover effect for the send button */
#sendButton:hover, #sendButton:hover .rotate-icon {
background-color: transparent; /* Background becomes transparent on hover */
}

.container pre {
display: flex;
flex-wrap: nowrap;
justify-content: space-evenly;
align-items: flex-start;
flex-direction: row-reverse;
}

.container::before {
color: #ffffff8e; /* Placeholder text color */
text-align: center;
opacity: 0.0;
display: var(--empty, flex);
justify-content: center;
align-items: center;
overflow-y: auto;
position: absolute;
width: 100%;
height: 100%;
}

code.language-python {
    background-color: #87c25e52;
    max-width: 60vmax;
    white-space: pre-wrap;
    margin-bottom: -70px;
    text-align: start;
    transition: all ease-in 0.2s;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    border-radius: 44px;
}

.container:not(:empty)::before {
--empty: none;
}

.bottom-bar {
    display: flex;
    justify-content: space-between;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    align-items: center;
    width: 100vw;
    height: 60px; /* Adjust as needed */
    background-color: #124f598c; /* Adjust color as needed */
}

.carousel-container {
    flex: 0.7;
    display: flex;
    overflow-x: auto;
    gap: 10px; /* Space between chat cards */
}

.chat-card {
    min-width: 100px; /* Adjust as needed */
    cursor: grabbing;
    height: 40px; /* Adjust as needed */
    background-color: #e0e0e0; /* Adjust color as needed */
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.buttons-container {
    flex: inherit;
    display: flex;
    margin-right: 16px;
    gap: 10px; /* Space between buttons */
    margin-bottom: 20px;
}




p.user {
    background: #0088ff;
    text-align: start;
    margin-left:14px;
    overflow-wrap: anywhere;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right:14px;
    width: fit-content;
    display: inline-block;
    animation: flyInFromRight 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all ease-in 0.2s;
    padding: 16px;
    border-radius: 32px;
}

p.char {
    background: black;
    border-radius: 32px;
    margin-right: 48px;
    max-width: 900px;
    /* text-align: start; */
    padding: 16px;
    margin-left: 10px;
    transition: all ease-in 0.3s;
}


p.user:hover {
transform: translateX(-6px);
}

.language-python.error {
background-color: #d65c5c6e; /* Change this to the color you want for failed execution */
transition: all ease-in 0.2s;
}

.language-python:hover {
transform: translateY(2px);
}

.language-python {
transition: all 0.8s ease-in-out;
}

@keyframes rotateIn {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}

@keyframes rotateOut {
from {
    transform: rotate(360deg);
}
to {
    transform: rotate(0deg);
}
}

/* Apply the animation on hover */
#resetButton:hover .fas.fa-redo {
animation: rotateIn 0.5s forwards;
}

/* Reset the animation when not hovered */
#resetButton .fas.fa-redo {
animation: rotateOut 0.5s forwards;
}

fieldset div label {
    display: block; /* Make the label block-level so it takes up the full width */
    border-bottom: 1px solid #100f0f;
    margin-bottom: 10px;
    padding-bottom: 5px;
}

#randomizeButton {
transition: all 0.3s ease; /* This will ensure a smooth transition in both directions */  
background-color: #9b00d661; /* Initial background color */
}

#randomizeButton:hover {
background-color: #9b00d600; /* Initial background color */
}

#randomizeButton i {
transition: all 0.3s ease; /* This will ensure a smooth transition in both directions */  
}

/* Randomize Button Icon Hover Animation */
#randomizeButton:hover i, #randomizeButton i:hover {
color: #af79c1;
background-color: #9b00d600;
animation: rotisserieSpin 1.4s cubic-bezier(0.32, 0, 0.67, 1) infinite;
}

@keyframes rotisserieSpin {
0% { transform: scale(1.2) rotateX(0deg); }
50% { transform: scale(0.7) rotateX(180deg); }
100% { transform: scale(1.2) rotateX(360deg); }
}
@keyframes shrinkAndToss {
0% {
    transform: scale(1);
    opacity: 1;
}
30% {
    transform: scale(0.9);
    opacity: 0.8;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}

.shrink-and-toss {
animation: shrinkAndToss 1s forwards;
}

/* Initial styles for the stop button and its icon */
#stopButton {
cursor: pointer;
background-color: #ff0000a1; /* Initial background color */
transition: background-color 0.3s ease-in-out; /* Transition for smooth animation */
}

#stopButton i {
color: white; /* Initial icon color */
transition: all 0.3s ease-in-out; /* Transition for smooth animation */
}

/* Hover styles for the stop button and its icon */
#stopButton:hover {
background-color: transparent; /* Background becomes transparent on hover */
}

#stopButton:hover i {
transform: scale(1.2) translateY(-4px);
color: red; /* Icon color changes to red on hover */
}

#diff-overlay {
display: none;
position: absolute;
width: 100%;
height: 100%;
background-color: rgb(0 0 0 / 0%);
z-index: 9999;
overflow: auto;
padding: 20px;
/* opacity: 0; */
/* visibility: hidden; */
transition: opacity 0.3s ease-out;
}

#diff-result {      
text-wrap: balance;
}

#diff-content {
background-color: #1c2f29;
margin: 15% auto;
padding: 20px;
width: fit-content;
max-width: 70vw;
border-radius: 16px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
box-shadow: 0 4px 8px 0 darkslategrey;
position: relative;
}

#diff-content.visible {
opacity: 1;
visibility: visible;
}


#diff-close {
width: 50px;
height: 50px;
cursor: pointer;
position: absolute;
top: 0;
right: -20px;
cursor: pointer;
font-size: 25px;
color: red;
}


#diff-result .addition {
color: #00c500;
    /* Light green background */
}

#diff-result .deletion {
color: #cc0000;
    /* Light red background */
}

.flyInFromBottom {
animation: flyInFromBottom 0.5s forwards;
}

.flyOutToBottom {
animation: flyOutToBottom 0.5s forwards;
}

#score-container-left, #score-container-right {
position: fixed;
top: 10px;
width: 120px;
color: rgb(0, 0, 0);
background: #ffffff9c;
letter-spacing: 2px;
text-align: center;
font-size:18px;
text-shadow: rgb(53 44 44 / 19%) -3px 4px 2px;
font-family: "Sunny Spells", fallbackFont, sans-serif;
padding: 5px 10px;
border-radius: 5px;
font-weight: bold;
}

#score-container-left {
animation: 1.9s cubic-bezier(0.4, 0, 1, 1) 0s 1 normal none running flyInFromLeft;
left: 10px;
}

#score-container-right {
animation: 2.1s cubic-bezier(0.4, 0, 1, 1) 0s 1 normal none running flyInFromRight;
right: 10px;
}


@keyframes dotScroll {
    0% {
        background-position-y: 140px
    }

    to {
        background-position-y: 0
    }
}

*,:before,:after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #161e29
}

:before,:after {
    --tw-content: ""
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: Google Sans Text,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";
    font-feature-settings: normal;
    font-variation-settings: normal
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px
}

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

h1,h2,h3,h4,h5,h6 {
    font-weight: inherit;
}

a {
    text-decoration: inherit
}

b,strong {
    font-weight: bolder
}

code,kbd,samp,pre {
    font-size: 1em;
}

small {
    font-size: 80%
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}



table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
}

button,input,optgroup,select,textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin-right: 0px;
    margin-left: 0px;
    padding: 6px;
}

button,select {
    text-transform: none
}

button,[type=button],[type=reset],[type=submit] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none
}

:-moz-focusring {
    outline: auto
}

:-moz-ui-invalid {
    box-shadow: none
}

progress {
    vertical-align: baseline
}

::-webkit-inner-spin-button,::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre {
    margin: 2px;
}

fieldset {
    margin: 0;
    padding: 0
}

legend {
    padding: 0
}

ol,ul,menu {
    list-style: none;
    margin: 0;
    padding: 0
}

dialog {
    padding: 0
}

input::-moz-placeholder,textarea::-moz-placeholder {
    opacity: 1;
    color: #808c9c
}

input::placeholder,textarea::placeholder {
    opacity: 1;
    color: #808c9c
}

button,[role=button] {
    cursor: pointer
}

:disabled {
    cursor: default
}

img,svg,video,canvas,audio,iframe,embed,object {
    display: block;
    vertical-align: middle
}

img,video {
    max-width: 100%;
    height: auto
}

[hidden] {
    display: none
}

:root {
    color-scheme: dark;
}

html {
    position: relative;
    scroll-padding: 2rem;
    scroll-behavior: smooth;
    --tw-bg-opacity: 1;
    
    --tw-text-opacity: 1;
    color: rgb(128 140 156 / var(--tw-text-opacity));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

@media screen and (prefers-reduced-motion) {
    html {
        scroll-behavior: auto
    }
}

@media (prefers-contrast: more) {
    html {
        --tw-text-opacity: 1;
        color: rgb(191 199 210 / var(--tw-text-opacity))
    }
}

::-moz-selection {
    background-color: #a87ffb80;
    --tw-text-opacity: 1;
    color: rgb(191 199 210 / var(--tw-text-opacity))
}

::selection {
    background-color: #a87ffb80;
    --tw-text-opacity: 1;
}

@media (prefers-contrast: more) {
    ::-moz-selection {
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity))
    }

    ::selection {
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity))
    }
}


@media (prefers-contrast: more) {
    #terminal main:after {
        --tw-border-opacity: 1;
        border-color: rgb(128 140 156 / var(--tw-border-opacity));
        --tw-bg-opacity: 1;
        background-color: rgb(16 21 29 / var(--tw-bg-opacity))
    }
}

@media (min-width: 768px) {
    #terminal main:after {
        border-top-left-radius:.5rem;
        border-top-right-radius: .5rem
    }

    #terminal main:after:before {
        content: "";
        background: linear-gradient(133.61deg,#a87ffb 17.33%,#25a6e9 100.47%);
        opacity: .5;
        pointer-events: none;
        position: absolute;
        left: 5rem;
        right: 5rem;
        top: .5rem;
        bottom: 0;
        z-index: -10;
        transform: translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-blur: blur(64px);
        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: opacity .5s ease
    }

    #terminal main:after:after {
        content: "";
        background: linear-gradient(to right,#2E3C51 0%,#2E3C51 34%,#2E3C51 49%,#fff 57%,#fff 64%,#A87FFB 66%,#25A6E9 100%);
        background-size: 300% 100%;
        background-position: 0% 50%;
        background-repeat: no-repeat;
        transition: background-position .8s ease;
        inset: -1px;
        border-top-left-radius: 9px;
        border-top-right-radius: 9px;
        pointer-events: none;
        position: absolute;
        z-index: -10;
        transform: translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    @media screen and (prefers-reduced-motion: no-preference) {
        #terminal.is-nudging main:after:after,#terminal:hover main:after:after {
            animation: .7s pulseshimmer 1s cubic-bezier(.8,0,.2,1) infinite alternate;
            animation-fill-mode: backwards
        }

        @keyframes pulseshimmer {
        }

        #terminal.is-nudging main:after {
            transform: translateY(0);
            animation: .7s pulsepeek .4s ease-in-out infinite alternate
        }

        @keyframes pulsepeek {
        }

        #terminal.is-nudging main:after:before {
            opacity: .8
        }

        #terminal.is-nudging main:after:after {
            background-position: 100% 50%
        }

        #terminal:hover main:after {
            transform: none;
            animation: none
        }

        #terminal:hover main:after:before {
            opacity: 1
        }

        #terminal:hover main:after:after {
            background-position: 100% 50%
        }
    }
}

.terminal-open #terminal main:after {
    animation: none
}

.terminal-open #terminal main:after:before {
    opacity: 0
}

.terminal-open #terminal main:after:after {
    animation: none;
    opacity: 1;
    background: none;
    --tw-bg-opacity: 1;
    background-color: rgb(46 60 81 / var(--tw-bg-opacity))
}

main:after {
    position: absolute;
    inset: 0;
    z-index: -10
}

.terminal-open main:after {
    animation-play-state: paused
}

@media (prefers-reduced-motion) {
    main:after {
        animation: none
    }
}

@media (min-width: 768px) {
    main:after {
        background-size:calc(8.3333333333% - 1px) 140px
    }
}

.form-control-wrapper {
    position: relative;
    font-family: JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
    font-size: .875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(139 152 169 / var(--tw-text-opacity))
}

@media (max-width: 767px) {
    .form-control-wrapper {
        font-size:16px
    }
}

.form-control-wrapper:after {
    pointer-events: none;
    position: absolute;
    right: 0;
    display: block;
    content: "";
    width: 16px;
    height: 16px;
    opacity: 0;
    transform: translate(-4px);
    transition: transform .3s ease,opacity .3s ease;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="16" height="16" viewBox="0 0 16 16"%3E%3Cpath fill="%23F76769" fill-rule="evenodd" d="M7.56 1h.88l6.54 12.26l-.44.74H1.44L1 13.26L7.56 1zM8 2.28L2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z" clip-rule="evenodd"%2F%3E%3C%2Fsvg%3E')
}

.form-control-wrapper.form-control-error:after {
    opacity: 1;
    transform: translate(0)
}

.form-control {
    width: 100%;
    background-color: transparent;
    padding-right: 1.5rem;
    --tw-text-opacity: 1;
    color: rgb(191 199 210 / var(--tw-text-opacity));
    caret-color: #a87ffb;
    outline: 2px solid transparent;
    outline-offset: 2px
}

.form-control::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(71 83 101 / var(--tw-text-opacity))
}

.form-control::placeholder {
    --tw-text-opacity: 1;
    color: rgb(71 83 101 / var(--tw-text-opacity))
}

.form-control:-webkit-autofill {
    -webkit-text-fill-color: #ffffff!important;
    -webkit-box-shadow: 0 0 0px 100px rgb(22,30,41) inset
}

.form-control:autofill,.form-control:-webkit-autofill,.form-control:auto-fill {
    -webkit-text-fill-color: #ffffff!important;
    -webkit-box-shadow: 0 0 0px 100px rgb(22,30,41) inset
}

.form-control:-webkit-autofill::-webkit-contacts-auto-fill-button {
    --tw-bg-opacity: 1;
    background-color: rgb(128 140 156 / var(--tw-bg-opacity))
}

.form-control:autofill::-webkit-contacts-auto-fill-button,.form-control:-webkit-autofill::-webkit-contacts-auto-fill-button,.form-control:auto-fill::-webkit-contacts-auto-fill-button {
    --tw-bg-opacity: 1;
    background-color: rgb(128 140 156 / var(--tw-bg-opacity))
}

.form-control:-webkit-autofill::-webkit-contacts-auto-fill-button:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(168 127 251 / var(--tw-bg-opacity))
}

.form-control:autofill::-webkit-contacts-auto-fill-button:hover,.form-control:-webkit-autofill::-webkit-contacts-auto-fill-button:hover,.form-control:auto-fill::-webkit-contacts-auto-fill-button:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(168 127 251 / var(--tw-bg-opacity))
}

.form-control:not(input:-webkit-autofill)::-webkit-contacts-auto-fill-button {
    --tw-bg-opacity: 1;
    background-color: rgb(128 140 156 / var(--tw-bg-opacity))
}

.form-control:not(input:-webkit-autofill)::-webkit-contacts-auto-fill-button:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(168 127 251 / var(--tw-bg-opacity))
}

.form-control-error .form-control {
    --tw-text-opacity: 1;
    color: rgb(247 103 105 / var(--tw-text-opacity))
}

.select-group {
    position: relative
}

.select-group select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 0;
    background-color: transparent;
    padding-top: .75rem;
    padding-bottom: .75rem;
    padding-bottom: 1px;
    padding-right: 1.5rem;
    caret-color: #a87ffb;
    outline: 2px solid transparent;
    outline-offset: 2px
}

.select-group:after {
    content: "";
    pointer-events: none;
    position: absolute;
    right: 0;
    bottom: 5px;
    height: .75rem;
    width: .75rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 11 6'%3E%3Cpath fill='%23BFC7D2' d='M5 5.08.68.707l-.64.64 4.693 4.64h.587l4.693-4.64-.64-.64L5 5.08Z'/%3E%3C/svg%3E")
}

.select-group:focus-within:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 11 6'%3E%3Cpath fill='%23A87FFB' d='M5 5.08.68.707l-.64.64 4.693 4.64h.587l4.693-4.64-.64-.64L5 5.08Z'/%3E%3C/svg%3E")
}

.select-group:focus-within select {
    --tw-text-opacity: 1;
    color: rgb(168 127 251 / var(--tw-text-opacity))
}

input.form-control[type=checkbox]:focus {
    outline-color: #a87ffb;
    outline-offset: 1px;
    outline-width: 1px;
    border-radius: 4px
}

.title {
    font-family: Google Sans Display,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";
    font-weight: 500;
    letter-spacing: -.025em;
    --tw-text-opacity: 1;
    color: rgb(191 199 210 / var(--tw-text-opacity))
}

@media (prefers-contrast: more) {
    .title {
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity))
    }
}

.link,.rich-text a {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
    text-decoration-line: underline;
    text-decoration-color: #2e3c51;
    text-underline-offset: 2px;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s
}

.link:hover,.rich-text a:hover {
    --tw-text-opacity: 1;
    color: rgb(168 127 251 / var(--tw-text-opacity));
    text-decoration-color: #a87ffb
}

.button {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border-radius: 9999px;
    padding: .625rem 1.5rem;
    text-align: center;
    font-family: Google Sans Display,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";
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 700;
    letter-spacing: -.025em;
    transition-property: color,border-color,transform,opacity,background-color;
    transition-duration: .3s;
    transition-timing-function: ease
}

@media (min-width: 768px) {
    .button {
        width:auto;
        padding: .875rem 1.5rem
    }
}

.button:before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    transform: translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 0;
    transition: opacity .3s ease,transform .3s ease
}

.button.has-arrow:after {
    content: "~>";
    margin-left: .375rem;
    display: inline-block;
    font-family: JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
    font-weight: 500;
    letter-spacing: 0em;
    transition: transform .3s ease
}

.button-outline {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(46 60 81 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(16 21 29 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(191 199 210 / var(--tw-text-opacity))
}

.button-outline:before {
    --tw-bg-opacity: 1;
    background-color: rgb(168 127 251 / var(--tw-bg-opacity))
}

.button-outline:hover,.button-outline:focus {
    --tw-border-opacity: 1;
    border-color: rgb(168 127 251 / var(--tw-border-opacity))
}

.button-outline:hover:before,.button-outline:focus:before {
    opacity: .1
}

.button-outline:active:before {
    opacity: .2
}

@media (prefers-contrast: more) {
    .button-outline {
        --tw-border-opacity: 1;
        border-color: rgb(255 255 255 / var(--tw-border-opacity));
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity))
    }
}

.button-primary {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(168 127 251 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(168 127 251 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(16 21 29 / var(--tw-text-opacity))
}

.button-primary:hover,.button-primary:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}

.button-primary:active:before {
    opacity: 1
}

.button-link {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

.button-link:before {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}

.button-link:hover,.button-link:focus {
    --tw-border-opacity: 1;
    border-color: rgb(168 127 251 / var(--tw-border-opacity));
    --tw-text-opacity: 1;
    color: rgb(191 199 210 / var(--tw-text-opacity))
}

.button-link:hover:before,.button-link:focus:before {
    opacity: .05
}

.button-link:active:before {
    opacity: .1
}

.squiggly-arrow {
    display: inline-block
}

.squiggly-arrow:after {
    content: "~>";
    font-family: JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace
}

.obscure-stars {
    border-radius: .75rem;
    --tw-bg-opacity: 1;
    background-color: rgb(16 21 29 / var(--tw-bg-opacity));
    --tw-shadow: 0 0 20px 20px #10151D;
    --tw-shadow-colored: 0 0 20px 20px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
}

.shine {
    background-image: radial-gradient(200px 100px at 50% 0%,#131f33 20%,rgba(19,30,49,0) 100%)
}

@media (min-width: 768px) {
    .shine {
        background-image:radial-gradient(500px 200px at 50% 0%,#131f33 20%,rgba(19,30,49,0) 100%)
    }
}

*,: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(70 153 191 / 50%);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    /* --tw-shadow-colored: 0 0 #ff2828b5; */
    --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(0 138 201 / .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:
}

.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto
}

@media (min-width: 360px) {
    .container {
        max-width:360px
    }
}

@media (min-width: 400px) {
    .container {
        max-width:400px
    }
}

@media (min-width: 640px) {
    .container {
        max-width:640px
    }
}

@media (min-width: 768px) {
    .container {
        max-width:768px
    }
}

@media (min-width: 1024px) {
    .container {
        max-width:1024px
    }
}

@media (min-width: 1280px) {
    .container {
        max-width:1280px
    }
}

@media (min-width: 1536px) {
    .container {
        max-width:1536px
    }
}

#sidebar {
    display: flex;
    justify-content: space-between;
    padding-left: 1rem;
    padding-right: 1rem
}

@media (max-width: 767px) {
    #sidebar {
        position:absolute;
        left: 0;
        right: 0;
        top: 0
    }
}

@media (min-width: 768px) {
    #sidebar {
        position:sticky;
        top: 0;
        height: 100vh;
        width: 70px;
        flex-direction: column;
        align-items: stretch;
        border-right-width: 1px;
        --tw-border-opacity: 1;
        border-color: rgb(46 60 81 / var(--tw-border-opacity));
        --tw-bg-opacity: 1;
        background-color: rgb(22 30 41 / var(--tw-bg-opacity));
        padding-top: 1rem;
        padding-bottom: 1rem
    }
}

.dynamic-dropdown-icon {
    display: inline-block;
    width: 1rem
}

.dynamic-dropdown-icon:before,.dynamic-dropdown-icon:after {
    position: absolute;
    right: 1.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    content: "";
    top: 50%;
    width: 12px;
    height: 1.2px;
    transform-origin: center;
    transition: transform .3s ease .3s
}

@media (prefers-reduced-motion) {
    .dynamic-dropdown-icon:before,.dynamic-dropdown-icon:after {
        transition: none
    }
}

.dynamic-dropdown-icon:before {
    transform: rotate(45deg) scaleX(.5) translate(-3px,1px)
}

.dynamic-dropdown-icon:after {
    transform: rotate(-45deg) scaleX(.5) translate(3px,1px)
}

.terminal-open .dynamic-dropdown-icon:before {
    transform: rotate(45deg) scaleX(1) translate(0)
}

.terminal-open .dynamic-dropdown-icon:after {
    transform: rotate(-45deg) scaleX(1) translate(0)
}

#terminal {
    pointer-events: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    transform: translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

@media (min-width: 768px) {
    #terminal {
        left:5rem
    }
}

#terminal {
    transform: translateY(100%)
}

@media screen and (prefers-reduced-motion: no-preference) {
    #terminal {
        transition: transform .3s ease
    }
}

#terminal .container {
    pointer-events: auto;
    position: relative;
    max-width: 640px;
    --tw-bg-opacity: 1;
    background-color: rgb(22 30 41 / var(--tw-bg-opacity))
}

@media (prefers-contrast: more) {
    #terminal .container {
        --tw-border-opacity: 1;
        border-color: rgb(128 140 156 / var(--tw-border-opacity));
        --tw-bg-opacity: 1;
        background-color: rgb(16 21 29 / var(--tw-bg-opacity))
    }
}

#terminal .bg {
    z-index: -1;
    position: absolute;
    inset: 0;
    --tw-bg-opacity: 1;
    background-color: rgb(22 30 41 / var(--tw-bg-opacity))
}

@media (prefers-contrast: more) {
    #terminal .bg {
        --tw-bg-opacity: 1;
        background-color: rgb(16 21 29 / var(--tw-bg-opacity))
    }
}

@media (min-width: 768px) {
    #terminal .container,#terminal .bg {
        border-top-left-radius:.5rem;
        border-top-right-radius: .5rem
    }
}

@media (max-width: 767px) {
    .terminal-open #terminal:before {
        content:"";
        background: linear-gradient(133.61deg,#a87ffb 17.33%,#25a6e9 100.47%);
        opacity: .5;
        pointer-events: none;
        position: absolute;
        left: 5rem;
        right: 5rem;
        top: .5rem;
        bottom: 0;
        z-index: -10;
        transform: translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-blur: blur(64px);
        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: opacity .5s ease
    }

    .terminal-open #terminal:after {
        content: "";
        background: linear-gradient(to right,#A87FFB 0%,#25A6E9 100%);
        background-repeat: no-repeat;
        inset: -1px;
        pointer-events: none;
        position: absolute;
        z-index: -10;
        transform: translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }
}

@media (min-width: 768px) {
    #terminal {
        transform:translateY(calc(100% - 52px))
    }

    #terminal .container:before {
        content: "";
        background: linear-gradient(133.61deg,#a87ffb 17.33%,#25a6e9 100.47%);
        opacity: .5;
        pointer-events: none;
        position: absolute;
        left: 5rem;
        right: 5rem;
        top: .5rem;
        bottom: 0;
        z-index: -10;
        transform: translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        --tw-blur: blur(64px);
        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: opacity .5s ease
    }

    #terminal .container:after {
        content: "";
        background: linear-gradient(to right,#2E3C51 0%,#2E3C51 34%,#2E3C51 49%,#fff 57%,#fff 64%,#A87FFB 66%,#25A6E9 100%);
        background-size: 300% 100%;
        background-position: 0% 50%;
        background-repeat: no-repeat;
        transition: background-position .8s ease;
        inset: -1px;
        border-top-left-radius: 9px;
        border-top-right-radius: 9px;
        pointer-events: none;
        position: absolute;
        z-index: -10;
        transform: translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    @media screen and (prefers-reduced-motion: no-preference) {
        #terminal.is-nudging .container:after,#terminal:hover .container:after {
            animation: .7s pulseshimmer 1s cubic-bezier(.8,0,.2,1) infinite alternate;
            animation-fill-mode: backwards
        }

        @keyframes pulseshimmer {
            0% {
                opacity: 1
            }

            to {
                opacity: .4
            }
        }

        #terminal.is-nudging .container {
            transform: translateY(0);
            animation: .7s pulsepeek .4s ease-in-out infinite alternate
        }

        @keyframes pulsepeek {
            0% {
                transform: translateY(0)
            }

            to {
                transform: translateY(-4px)
            }
        }

        #terminal.is-nudging .container:before {
            opacity: .8
        }

        #terminal.is-nudging .container:after {
            background-position: 100% 50%
        }

        #terminal:hover {
            transform: translateY(calc(100% - 60px))
        }

        #terminal:hover .container {
            transform: none;
            animation: none
        }

        #terminal:hover .container:before {
            opacity: 1
        }

        #terminal:hover .container:after {
            background-position: 100% 50%
        }
    }
}

.terminal-open #terminal {
    animation: none;
    transform: translateY(0)
}

.terminal-open #terminal .container {
    animation: none
}

.terminal-open #terminal .container:before {
    opacity: 0
}

.terminal-open #terminal .container:after {
    animation: none;
    opacity: 1;
    background: none;
    --tw-bg-opacity: 1;
    background-color: rgb(46 60 81 / var(--tw-bg-opacity))
}

#terminal-overlay {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 40;
    --tw-bg-opacity: 1;
    background-color: rgb(20 26 35 / var(--tw-bg-opacity));
    opacity: 0;
    transition: opacity .3s ease
}

.terminal-open #terminal-overlay {
    pointer-events: auto;
    opacity: .5
}

.grecaptcha-badge {
    display: none!important
}

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

.fixed {
    position: fixed
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.inset-0 {
    inset: 0
}

.top-1 {
    top: .25rem
}

.-z-10 {
    z-index: -10
}

.z-10 {
    z-index: 10
}

.z-20 {
    z-index: 20
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.my-16 {
    margin-top: 4rem;
    margin-bottom: 4rem
}

.my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem
}

.-mb-1 {
    margin-bottom: -.25rem
}

.-ml-3 {
    margin-left: -.75rem
}

.mb-10 {
    margin-bottom: 2.5rem
}

.mb-12 {
    margin-bottom: 3rem
}

.mb-2 {
    margin-bottom: .5rem
}

.mb-5 {
    margin-bottom: 1.25rem
}

.mb-6 {
    margin-bottom: 1.5rem
}

.mb-8 {
    margin-bottom: 2rem
}

.ml-12 {
    margin-left: 3rem
}

.ml-4 {
    margin-left: 1rem
}

.ml-8 {
    margin-left: 2rem
}

.mt-24 {
    margin-top: 6rem
}

.mt-5 {
    margin-top: 1.25rem
}

.box-border {
    box-sizing: border-box
}

.block {
    display: block
}

.inline-block {
    display: inline-block
}

.flex {
    display: flex
}

.grid {
    display: grid
}

.hidden {
    display: none
}

.aspect-\[4\/3\] {
    aspect-ratio: 4/3
}

.aspect-square {
    aspect-ratio: 1 / 1
}

.h-10 {
    height: 2.5rem
}

.h-14 {
    height: 3.5rem
}

.h-16 {
    height: 4rem
}

.h-3 {
    height: .75rem
}

.h-4 {
    height: 1rem
}

.h-5 {
    height: 1.25rem
}

.h-9 {
    height: 2.25rem
}

.h-full {
    height: 100%
}

.h-screen {
    height: 100vh
}

.max-h-\[1280px\] {
    max-height: 1280px
}

.min-h-\[480px\] {
    min-height: 480px
}

.w-10 {
    width: 2.5rem
}

.w-14 {
    width: 3.5rem
}

.w-16 {
    width: 4rem
}

.w-20 {
    width: 5rem
}

.w-3 {
    width: .75rem
}

.w-4 {
    width: 1rem
}

.w-5 {
    width: 1.25rem
}

.w-9 {
    width: 2.25rem
}

.w-full {
    width: 100%
}

.min-w-0 {
    min-width: 0px
}

.max-w-\[160px\] {
    max-width: 160px
}

.max-w-\[420px\] {
    max-width: 420px
}

.max-w-\[520px\] {
    max-width: 520px
}

.max-w-screen-md {
    max-width: 768px
}

.flex-1 {
    flex: 1 1 0%
}

.flex-shrink-0 {
    flex-shrink: 0
}

.-translate-x-1 {
    --tw-translate-x: -.25rem;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.translate-x-0 {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.rotate-180 {
    --tw-rotate: 180deg;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.rotate-90 {
    --tw-rotate: 90deg;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(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)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.resize {
    resize: both
}

.list-disc {
    list-style-type: disc
}

.flex-col {
    flex-direction: column
}

.flex-col-reverse {
    flex-direction: column-reverse
}

.flex-wrap {
    flex-wrap: wrap
}

.items-start {
    align-items: flex-start
}

.items-end {
    align-items: flex-end
}

.items-center {
    align-items: center
}

.items-baseline {
    align-items: baseline
}

.items-stretch {
    align-items: stretch
}

.justify-end {
    justify-content: flex-end
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.justify-stretch {
    justify-content: stretch
}

.gap-1 {
    gap: .25rem
}

.gap-2 {
    gap: .5rem
}

.gap-3 {
    gap: .75rem
}

.gap-6 {
    gap: 1.5rem
}

.gap-x-6 {
    -moz-column-gap: 1.5rem;
    column-gap: 1.5rem
}

.gap-x-8 {
    -moz-column-gap: 2rem;
    column-gap: 2rem
}

.gap-y-4 {
    row-gap: 1rem
}

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

.self-stretch {
    align-self: stretch
}

.rounded-full {
    border-radius: 9999px
}

.rounded-lg {
    border-radius: .5rem
}

.rounded-md {
    border-radius: .375rem
}

.border {
    border-width: 1px
}

.border-t {
    border-top-width: 1px
}

.border-gray-300 {
    --tw-border-opacity: 1;
    border-color: rgb(46 60 81 / var(--tw-border-opacity))
}

.bg-blue {
    --tw-bg-opacity: 1;
    background-color: rgb(37 166 233 / var(--tw-bg-opacity))
}

.bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(16 21 29 / var(--tw-bg-opacity))
}

.bg-gray-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(22 30 41 / var(--tw-bg-opacity))
}

.bg-gray-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(46 60 81 / var(--tw-bg-opacity))
}

.bg-purple {
    --tw-bg-opacity: 1;
    background-color: rgb(168 127 251 / var(--tw-bg-opacity))
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}

.bg-yellow {
    --tw-bg-opacity: 1;
    background-color: rgb(255 194 110 / var(--tw-bg-opacity))
}

.fill-blue-400 {
    fill: #25a6e9
}

.fill-current {
    fill: currentColor
}

.fill-green-400 {
    fill: #17b877
}

.fill-purple-500 {
    fill: #8964e8
}

.fill-yellow-400 {
    fill: #ffa23e
}

.object-contain {
    -o-object-fit: contain;
    object-fit: contain
}

.object-center {
    -o-object-position: center;
    object-position: center
}

.p-3 {
    padding: .75rem
}

.p-4 {
    padding: 1rem
}

.p-6 {
    padding: 1.5rem
}

.p-8 {
    padding: 2rem
}

.px-3 {
    padding-left: .75rem;
    padding-right: .75rem
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

.py-1 {
    padding-top: .25rem;
    padding-bottom: .25rem
}

.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem
}

.py-2 {
    padding-top: .5rem;
    padding-bottom: .5rem
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
}

.py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem
}

.pb-14 {
    padding-bottom: 3.5rem
}

.pb-24 {
    padding-bottom: 6rem
}

.pt-16 {
    padding-top: 4rem
}

.pt-3 {
    padding-top: .75rem
}

.pt-8 {
    padding-top: 2rem
}

.text-left {
    text-align: left
}

.font-display {
    font-family: Google Sans Display,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"
}

.font-mono {
    font-family: Google Sans Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace
}

.font-mono-fancy {
    font-family: JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace
}

.font-sans {
    font-family: Google Sans Text,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"
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem
}

.text-\[12px\]\/\[18px\] {
    font-size: 12px;
    line-height: 18px
}

.text-\[13px\] {
    font-size: 13px
}

.text-\[24px\]\/\[29px\] {
    font-size: 24px;
    line-height: 29px
}

.text-\[36px\]\/\[43px\] {
    font-size: 36px;
    line-height: 43px
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem
}

.text-sm {
    font-size: .875rem;
    line-height: 1.25rem
}

.text-xs {
    font-size: .75rem;
    line-height: 1rem
}

.font-medium {
    font-weight: 500
}

.text-\[\#25A6E9\] {
    --tw-text-opacity: 1;
    color: rgb(37 166 233 / var(--tw-text-opacity))
}

.text-gray-300 {
    --tw-text-opacity: 1;
    color: rgb(46 60 81 / var(--tw-text-opacity))
}

.text-gray-350 {
    --tw-text-opacity: 1;
    color: rgb(51 62 79 / var(--tw-text-opacity))
}

.text-gray-400 {
    --tw-text-opacity: 1;
    color: rgb(128 140 156 / var(--tw-text-opacity))
}

.text-gray-425 {
    --tw-text-opacity: 1;
    color: rgb(139 152 169 / var(--tw-text-opacity))
}

.text-gray-450 {
    --tw-text-opacity: 1;
    color: rgb(164 175 189 / var(--tw-text-opacity))
}

.text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(191 199 210 / var(--tw-text-opacity))
}

.text-green {
    --tw-text-opacity: 1;
    color: rgb(23 184 119 / var(--tw-text-opacity))
}

.text-purple {
    --tw-text-opacity: 1;
    color: rgb(168 127 251 / var(--tw-text-opacity))
}

.text-red-500 {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity))
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}

.accent-purple-500 {
    accent-color: #8964E8
}

.opacity-0 {
    opacity: 0
}

.opacity-100 {
    opacity: 1
}

.opacity-40 {
    opacity: .4
}

.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(.4,0,.2,1);
    transition-duration: .15s
}

.transition-colors {
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s
}

.duration-500 {
    transition-duration: .5s
}

@media (min-width: 400px) {
    .xs\:has-arrow.button:after {
        content:"~>";
        margin-left: .375rem;
        display: inline-block;
        font-family: JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
        font-weight: 500;
        letter-spacing: 0em;
        transition: transform .3s ease
    }
}

.hover\:text-gray-500:hover {
    --tw-text-opacity: 1;
    color: rgb(191 199 210 / var(--tw-text-opacity))
}

.group:hover .group-hover\:text-gray-400 {
    --tw-text-opacity: 1;
    color: rgb(128 140 156 / var(--tw-text-opacity))
}

@media (min-width: 360px) {
    .xxs\:flex {
        display:flex
    }

    .xxs\:flex-row {
        flex-direction: row
    }

    .xxs\:justify-center {
        justify-content: center
    }
}

@media (min-width: 400px) {
    .xs\:w-auto {
        width:auto
    }
}

@media (max-width: 767px) {
    .max-md\:my-24 {
        margin-top:6rem;
        margin-bottom: 6rem
    }

    .max-md\:mb-16 {
        margin-bottom: 4rem
    }

    .max-md\:hidden {
        display: none
    }

    .max-md\:space-y-1>:not([hidden])~:not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(.25rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(.25rem * var(--tw-space-y-reverse))
    }

    .max-md\:text-\[\#56657d\] {
        --tw-text-opacity: 1;
        color: rgb(86 101 125 / var(--tw-text-opacity))
    }
}

@media (max-width: 1023px) {
    .max-lg\:border-t-0 {
        border-top-width:0px
    }
}

@media (min-width: 640px) {
    .sm\:items-center {
        align-items:center
    }
}

@media (min-width: 768px) {
    .md\:relative {
        position:relative
    }

    .md\:-right-6 {
        right: -1.5rem
    }

    .md\:my-32 {
        margin-top: 8rem;
        margin-bottom: 8rem
    }

    .md\:mb-10 {
        margin-bottom: 2.5rem
    }

    .md\:mb-16 {
        margin-bottom: 4rem
    }

    .md\:mt-0 {
        margin-top: 0
    }

    .md\:inline-block {
        display: inline-block
    }

    .md\:flex {
        display: flex
    }

    .md\:hidden {
        display: none
    }

    .md\:h-48 {
        height: 12rem
    }

    .md\:min-h-\[600px\] {
        min-height: 600px
    }

    .md\:w-20 {
        width: 5rem
    }

    .md\:w-8 {
        width: 2rem
    }

    .md\:max-w-\[850px\] {
        max-width: 850px
    }

    .md\:flex-1 {
        flex: 1 1 0%
    }

    .md\:flex-col {
        flex-direction: column
    }

    .md\:justify-end {
        justify-content: flex-end
    }

    .md\:p-12 {
        padding: 3rem
    }

    .md\:p-16 {
        padding: 4rem
    }

    .md\:px-12 {
        padding-left: 3rem;
        padding-right: 3rem
    }

    .md\:py-24 {
        padding-top: 6rem;
        padding-bottom: 6rem
    }

    .md\:pb-60 {
        padding-bottom: 15rem
    }

    .md\:pt-2 {
        padding-top: .5rem
    }

    .md\:text-center {
        text-align: center
    }

    .md\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem
    }

    .md\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem
    }

    .md\:text-\[32px\]\/\[38px\] {
        font-size: 32px;
        line-height: 38px
    }

    .md\:text-\[52px\]\/\[62px\] {
        font-size: 52px;
        line-height: 62px
    }

    .md\:text-base {
        font-size: 1rem;
        line-height: 1.5rem
    }
}

@media (min-width: 1024px) {
    .lg\:h-\[650px\] {
        height:650px
    }

    .lg\:w-1\/3 {
        width: 33.333333%
    }

    .lg\:w-2\/3 {
        width: 66.666667%
    }

    .lg\:flex-row {
        flex-direction: row
    }

    .lg\:flex-row-reverse {
        flex-direction: row-reverse
    }

    .lg\:items-start {
        align-items: flex-start
    }

    .lg\:border-l-0 {
        border-left-width: 0px
    }

    .lg\:border-r-0 {
        border-right-width: 0px
    }
}

@media (min-width: 1280px) {
    .xl\:mb-4 {
        margin-bottom:1rem
    }
}


input {
    margin-right:4px;
}