* { /* NXD CSS Reset 2.0 */
    
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0;

    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;

    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    
    box-sizing: border-box;
    
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	
}

:root {

    --default-purple: #6c47ff;
    --default-red: color(display-p3 1 .25 .39); /* #ff1b5f */ 
    --default-green: color(display-p3 .2824 .8353 .5922); /* #00d992 */ 
    --default-yellow: #ffb747;
    --default-blue: #3ed1ff;
    
    --txt-primary: #c5c6dd;
    --txt-secondary: #8b8b9f;
    --txt-light: #383847;
    --txt-focus: #d468ff;
    --txt-hover: #e3e4f5;

    --bg-primary: #1c1c23;
    --bg-dark: #111117;

    --border-light: #2c2c39;

    --site-padding: 2.5em;
    --default-padding: 2em;
    --section-padding: 1.5em;

    --scrollbar-handle: rgba(255, 255, 255, 0.10);
    --scrollbar-handle-hover: rgba(255, 255, 255, 0.15);  

}

::-webkit-scrollbar {

    width: 20px;
    background: #1f1f27;
    border-left: 1px solid rgb(37 37 49); 

}

textarea::-webkit-scrollbar {

    width: 25px;

}

::-webkit-scrollbar-track {

    background-color: transparent;

}

::-webkit-scrollbar-thumb {
    
    background-color: var(--scrollbar-handle);
    border-radius: 20px;
    border: 7px solid transparent;
    background-clip: content-box;
    cursor: default;

}

::-webkit-scrollbar-thumb:hover {
    
    background-color: var(--scrollbar-handle-hover);

}

textarea::-webkit-scrollbar-thumb {
    
    background-color: var(--scrollbar-handle);
    border: 9px solid transparent;

}

textarea::-webkit-scrollbar-thumb:hover {
    
    background-color: var(--scrollbar-handle-hover);

}

@font-face {

    font-display: swap;
    font-family: 'Geist Mono';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/geist-mono-vf.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/geist-mono-vf.woff') format('woff'), /* Modern Browsers */
         url('../fonts/geist-mono-vf.ttf') format('truetype'); /* Safari, Android, iOS */

}

img {

    pointer-events: none;

}

a {

    color: var(--txt-primary);
    text-decoration: none;
    
}

a:hover {

    color: var(--txt-primary);
    text-decoration: none;
    
}

a:active {

    color: var(--default-purple);
    text-decoration: none;
    
}

a[href^="tel"] {

    color: inherit;
    text-decoration: none;
    
}

html,
body {

    height: 100%;
    font-family: "Geist Mono",Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace;
    cursor: default;
    font-size: 18px;
    line-height: 100%;
    background: var(--bg-dark);
    color: var(--txt-primary);
    overflow: hidden;
    touch-action: pan-y;
    transition: padding 0.2s;
    font-weight: 600;

}

.wrapper {

    display: flex;
    position: relative;
    height: 100%;
    flex-direction: row;

}

.wrapper-site {

    position: relative;
    flex-basis: 50%;
    flex-shrink: 0; 
    border-right: 1px solid rgb(79 79 104 / 30%);      

}

.wrapper-display {

    position: relative;
    flex-basis: 50%;

}

.wrapper-display-frame {

    width: 100%;
    height: 100%;
    pointer-events: none;

}

.section {

    position: relative;
    padding: var(--site-padding);

}

.section-divider {

    display: block;
    position: relative;
    border-bottom: 1px dashed rgb(79 79 104 / 30%);

}

.section-divider-blink-a {

    border-bottom: 1px solid rgb(79 79 104 / 40%);

}

.section-divider-blink-b {

    border-bottom: 1px dashed rgb(79 79 104 / 60%);

}

.section-divider-blink-b::before {

    display: block;
    position: absolute;
    content: '';
    width: 100%;
    height: 0.1em;
    border-bottom: 1px dashed rgb(79 79 104 / 20%);
    top: -1em;
    left: 0;

}

.section-divider-blink-c {

    border-bottom: 1px dotted rgb(79 79 104 / 90%);

}

.section-divider-blink-c::before {

    display: block;
    position: absolute;
    content: '';
    width: 100%;
    height: 0.1em;
    border-bottom: 1px solid rgb(79 79 104 / 20%);
    top: 1em;
    left: 0;

}

.section-divider-blink-d {

    border-bottom: 1px solid rgb(79 79 104 / 40%);

}

.section-divider-blink-d::before {

    display: block;
    position: absolute;
    content: '';
    width: 100%;
    height: 1em;
    background: rgb(79 79 104 / 10%);
    top: 0;
    left: 0;

}

.section-divider-blink-e {

    border-bottom: 1px solid rgb(79 79 104 / 40%);

}

.section-divider-blink-e::before {

    display: block;
    position: absolute;
    content: '';
    width: 100%;
    height: 1em;
    background: rgb(79 79 104 / 10%);
    top: -1em;
    left: 0;

}

#particle {

    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;

}

.header {

    display: flex;
    position: relative;
    align-items: center;
    gap: var(--default-padding);
    z-index: 9;

}

.header-left {

    flex-basis: 100%;

}

.header-right {

    flex-shrink: 0;

}

.logo-white {

    display: none;

}

.logo-gray {

    display: block;

}

#nxdco-logo {

    display: inline-block;
    margin: 0;
    vertical-align: top;
    position: relative;

}

#nxdco-logo img {

    display: block;
    height: 2.5em;

}

.header-right img {

    display: block;
    height: 2.25em;

}

.main {

    display: block;
    position: relative;
    z-index: 9;    

}

.main-section {

    display: block;
    position: relative;
    line-height: 130%;
    white-space: nowrap; 

}

.main-section::before {

    display: block;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    content: '';
    width: 2em;
    height: 1em;
    background: #6c47ff;
    top: 0.25em;
    left: -4.5em;
    border-radius: 0.1em;
    transition: left 0.1s ease-out, opacity 0.1s ease-out, visibility 0.1s ease-out;

}

.main-section:hover::before {

    opacity: 1;
    visibility: visible;
    left: -4em;

}

.main-section-gap {

    margin-bottom: var(--section-padding);
    transition: margin 0.2s;

}

#code {

    color: var(--txt-light);
    word-break: break-all;
    padding-bottom: 0.15em;

}

.code-highlight {

    color: var(--txt-secondary);
    border-bottom: 0.15em solid var(--default-green);

}

.code-error {

    color: var(--txt-light);
    border-bottom: 0.15em solid var(--default-red);

}

.truncate {

    display: inline;

}

@media screen and (max-width: 1000px) {

    .wrapper-site {

        flex-basis: 100%;
        flex-shrink: 0; 
        border-right: none;      

    }

    .wrapper-display {

        display: none;

    }

    .logo-white {

        display: block;

    }

    .logo-gray {

        display: none;

    }    

}

@media screen and (max-width: 700px) {

    body {

        font-size: 0.85em;

    }

    .truncate {

        display: none;

    }

}

@supports (corner-shape: superellipse(2)) {

    a:active {

        corner-shape: superellipse(2);
        border-radius: 0.4em;

    }

}