/* ===== GLOBAL VARIABLES & THEME DEFINITIONS ===== */

/* --- CSS Custom Properties --- */
body {
    --docs-max-width: 60rem;
    --homepage-max-width: 90rem;
    --sections-max-width: 80rem;
    --parallax-perspective: 2rem;
    --md-accent-fg-color: #555555 !important;
    --md-default-fg-color--light: #bebebe !important;
}

/* --- Default Theme Variables --- */
[data-md-color-scheme=default] {
    --md-default-fg-color--light: rgba(60, 60, 67) !important;
}

/* --- Dark Theme Variables --- */
[data-md-color-scheme=slate] {
    /* Main background colors - making them much darker */
    --md-default-bg-color: #000000;
    --md-default-bg-color--light: #0a0a0a;
    --md-default-bg-color--lighter: #111111;
    --md-default-bg-color--lightest: #1a1a1a;
    
    /* Code block backgrounds - very dark */
    --md-code-bg-color: #000000;
    --md-code-bg-color--light: #050505;
    
    /* Header/Primary colors - override indigo */
    --md-primary-fg-color: #ffffff;
    --md-primary-fg-color--light: #cccccc;
    --md-primary-fg-color--dark: #ffffff;
    --md-primary-bg-color: #000000;
    --md-primary-bg-color--light: #0a0a0a;
    
    /* Navigation and sidebar backgrounds */
    --md-nav-bg-color: #000000;
    --md-nav-fg-color: #ffffff;
    --md-nav-fg-color--light: #cccccc;
    
    /* Content area backgrounds */
    --md-content-bg-color: #000000;
    --md-footer-bg-color: #000000;
    --md-footer-bg-color--dark: #000000;
    
    /* Search and form backgrounds */
    --md-form-bg-color: #0a0a0a;
    --md-form-bg-color--light: #111111;
    
    /* Text colors for better visibility */
    --md-default-fg-color: #ffffff;
    --md-default-fg-color--light: #cccccc;
    --md-default-fg-color--lighter: #999999;
    --md-default-fg-color--lightest: #666666;
    
    /* Accent colors for better contrast */
    --md-accent-bg-color: #0d0d0d;
    --md-accent-bg-color--light: #1a1a1a;
    --md-accent-fg-color: #ffffff;
    --md-accent-fg-color--transparent: rgba(255, 255, 255, 0.1);
}

/* --- Logo Theme Switching --- */
[data-md-color-scheme=slate] {
    #logo_light_mode {
        display: none;
    }
    #logo_dark_mode {
        display: block;
    }
}

[data-md-color-scheme=default] {
    #logo_dark_mode {
        display: none;
    }
    #logo_light_mode {
        display: block;
    }
}

/* ===== TYPOGRAPHY & BASIC ELEMENTS ===== */

/* --- Headings --- */
.md-typeset h1 {
    font-size: clamp(1.2rem, 1.5vw, 1.3rem);
    font-weight: 600;
}

.md-typeset h2 {
    font-size: clamp(0.8rem, 1.5vw, 0.9rem);
    margin-top: 8px;
}

.md-content h2,
h3,
h4,
h5,
h6 {
    font-weight: 400 !important;
}

.md-content h2 {
    border-top: 1px solid #ccc;
    padding-top: 1.5rem;
}

.md-content h3,
h4,
h5,
h6 {
    border-top: 1px solid #e5e5e58a;
    padding-top: 1rem;
}

/* --- Text Elements --- */
p {
    font-size: clamp(0.6rem, 1.5vw, 0.65rem);
    line-height: 1.75;
}

li {
    font-size: clamp(0.6rem, 1.5vw, 0.75rem);
    line-height: 1.75;
}

.hyper-link {
    text-decoration: underline;
    color: rgba(0, 0, 0, 1)
}

/* --- Form Elements --- */
input {
    font-size: clamp(0.47rem, 1.5vw, 0.5rem) !important;
}

/* --- Media Elements --- */
img {
    user-select: none;
}

video {
    pointer-events: none;
}

/* --- Utility Classes --- */
.tagline {
    font-size: 0.9rem;
    letter-spacing: 1px;
    margin: 0;
    color: var(--md-default-fg-color--light);
}


/* ===== MAIN LAYOUT COMPONENTS ===== */

/* --- Header --- */
.md-header {
    box-shadow: none !important;
    z-index: 100;
    transition: transform 0.3s ease-in-out;
    position: fixed;
    width: 100%;
    transform: translateY(0);
}

.header-hidden {
    transform: translateY(-100%);
    transition: transform 0.15s ease-in-out;
}

.md-header__topic {
    display: none;
}

/* --- Logo --- */
.md-logo {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.md-logo img {
    height: 0.9rem !important;
}

/* --- Main Content Area --- */
.md-main {
    margin-top: 1rem;
    transition: padding-top 0.3s ease;
}

.header-hidden+.md-main {
    padding-top: 0;
}

.md-main__inner {
    gap: 2.25rem;
}

.md-grid {
    max-width: var(--docs-max-width);
    margin: 0 auto;
}

/* --- Sidebar --- */
.md-sidebar {
    width: 12rem;
}

[dir=ltr] .md-sidebar--primary {
    left: -15rem !important;
    z-index: 50 !important;
}

[dir=ltr] .md-sidebar__inner {
    padding-right: calc(100% - 12rem);
}

[data-md-toggle=drawer]:checked~.md-container .md-sidebar--primary {
    transform: translateX(15rem) !important;
    z-index: 10000 !important;
    position: fixed;
}

.md-overlay {
    display: none;
}

.md-nav--secondary {
    border-left: 0.05rem solid lightgray !important;
}

/* ===== NAVIGATION ===== */

/* --- Navigation Links --- */
.md-nav__title,
.md-nav__item {
    font-size: clamp(0.55rem, 1.5vw, 0.6rem) !important;
    box-shadow: none !important;
}

.md-nav__item--section>.md-nav__link {
    margin-bottom: 8px;
}

.md-nav__link {
    padding: 4px 16px;
    border-radius: 6px;
    margin: 0;
    margin-top: 4px;
}

.md-nav__link:hover {
    background: rgb(243, 243, 243);
}

.md-nav__link--active {
    color: #000000 !important;
    font-weight: 700;
    background: rgb(237, 237, 237);
}

/* --- Tab Navigation --- */
.md-tabs {
    border-top: .05rem solid #00000012;
}

.md-tabs__list {
    justify-content: space-around;
    border-left: .05rem solid #00000012;
    border-right: .05rem solid #00000012;
}

.md-tabs__item {
    display: flex;
    height: 1.5rem;
    width: 100%;
}

.md-tabs__link {
    font-size: clamp(0.55rem, 1.5vw, 0.6rem) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 0;
}

.md-tabs__item--active .md-tabs__link {
    position: relative;
    font-weight: 700;
}

/* ===== SEARCH COMPONENT ===== */

/* --- Search Form --- */
.md-search {
    margin-left: 1.8rem;
}

.md-search__inner {
    width: 8rem;
}

.md-search__form {
    height: 32px !important;
    padding: 0 8px !important;
}

.md-search__input {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.md-search__icon {
    top: 0.4rem !important;
    left: 0.3rem !important;
}

.md-search__icon svg {
    width: 16px;
    height: 16px;
}

/* --- Search Results --- */
.md-search-result__item h1,
.md-search-result__item h2 {
    font-size: clamp(0.7rem, 1.5vw, 0.8rem) !important;
}

.md-search-result__item h2 {
    font-weight: 500 !important;
}

.md-search-result__item summary div {
    font-size: clamp(0.5rem, 1.5vw, 0.55rem) !important;
}

.md-search-result__icon {
    width: 0.8rem;
    height: 0.8rem;
}

/* ===== SOURCE/GITHUB COMPONENT ===== */

.md-header__source {
    width: 10rem;
    padding: 0.6rem;
    margin-left: 0 !important;
}

.md-source {
    font-size: clamp(0.45rem, 1.5vw, 0.5rem);
    display: flex;
    justify-content: end;
    align-items: center;
}

.md-source__fact {
    font-size: clamp(0.35rem, 1.5vw, 0.4rem);
}

/* ===== HOMEPAGE STYLES ===== */

/* --- Homepage Main Container --- */
.custom-homepage-main {
    perspective: var(--parallax-perspective);
    overflow: hidden auto;
    scroll-behavior: smooth;
    height: 100vh;
    width: 100vw;
}

.custom-homepage-main [data-md-component="main"],
main:has(.custom-homepage-main) [data-md-component="main"] {
    display: none !important;
}

/* --- Homepage Header --- */
.custom-homepage-header {
    position: fixed;
    filter: invert(1);
    top: 0;
    z-index: 20 !important;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    border-bottom: 0px solid;
}

.custom-homepage-header .md-grid {
    max-width: var(--homepage-max-width);
}

.custom-homepage-header .md-tabs {
    background: #ffffff00 !important;
    border-bottom: 0;
}

.custom-homepage-header .md-logo {
    opacity: 0;
}

/* Hide VPSwitch theme toggle button on homepage */
.custom-homepage-header .VPSwitch {
    display: none !important;
}

/* Ensure homepage header always uses default theme colors */
.custom-homepage-header,
.custom-homepage-header .md-header__inner {
    background-color: transparent !important;
    border: none !important;
    border-bottom: none !important;
}

.custom-homepage-header .md-header__title,
.custom-homepage-header .md-tabs__link,
.custom-homepage-header .md-source,
.custom-homepage-header .md-source__repository,
.custom-homepage-header .md-source__fact {
    color: #000000 !important;
}

.custom-homepage-header .md-tabs,
.custom-homepage-header .md-tabs__list,
.custom-homepage-header .md-tabs__item {
    background-color: transparent !important;
    border: none !important;
    border-bottom: none !important;
}

/* Override ALL theme variations for homepage header */
[data-md-color-scheme="slate"] .custom-homepage-header,
[data-md-color-scheme="slate"] .custom-homepage-header .md-header__inner {
    background-color: transparent !important;
    border: none !important;
    border-bottom: none !important;
}

[data-md-color-scheme="slate"] .custom-homepage-header .md-header__title,
[data-md-color-scheme="slate"] .custom-homepage-header .md-tabs__link,
[data-md-color-scheme="slate"] .custom-homepage-header .md-source,
[data-md-color-scheme="slate"] .custom-homepage-header .md-source__repository,
[data-md-color-scheme="slate"] .custom-homepage-header .md-source__fact {
    color: #000000 !important;
}

[data-md-color-scheme="slate"] .custom-homepage-header .md-tabs,
[data-md-color-scheme="slate"] .custom-homepage-header .md-tabs__list,
[data-md-color-scheme="slate"] .custom-homepage-header .md-tabs__item {
    background-color: transparent !important;
    border: none !important;
    border-bottom: none !important;
}

/* --- Hero Container --- */
.hero-container {
    position: relative;
    height: 160vh;
    transform-style: preserve-3d;
}

.hero-content-wrapper {
    height: inherit;
}

.hero-floating-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: end;
    position: sticky;
    top: 0;
    z-index: 11;
    height: 100vh;
    margin-bottom: -100vh;
}

/* --- Hero Content Layout --- */
.hero-inner-content-middle {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;
    align-items: center;
    transition: all 1s;
    max-width: var(--homepage-max-width);
    width: 100%;
    padding: 2rem 0.8rem;
}

.hero-inner-content-bottom {
    display: flex;
    max-width: var(--homepage-max-width);
    margin-left: auto;
    margin-right: auto;
    transition: all 1s;
    width: 100%;
    padding: 1rem 0.8rem;
    gap: 2rem;
}

.hero-text-container {
    display: flex;
    flex-direction: column;
    flex: 1 0 0;
    transition: all 1s;
    align-items: start;
    justify-content: space-between;
}

/* --- Hero Typography --- */
.hero-detail {
    display: flex;
    flex-direction: column;
}

.hero-detail h1 {
    font-size: clamp(1.3rem, 1.5vw, 1.45rem) !important;
    margin: 0 !important;
    font-weight: 500 !important;
    color: white !important;
}

.hero-detail span {
    color: white !important;
    margin: 0;
}

.hero-main-heading h1 {
    font-size: clamp(1.8rem, 1.5vw, 2.0rem) !important;
    margin: 0 !important;
    font-weight: 500 !important;
    color: white !important;
}

.hero-main-heading h2 {
    color: white !important;
}

.hero-main-heading h2,
.hero-button-card p {
    font-size: clamp(0.55rem, 1.5vw, 0.6rem) !important;
    line-height: normal;
    margin: 0;
    font-weight: 500;
    text-align: left;
}

.hyperbeam-heading {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hyperbeam-heading img {
    width: 32px;
    filter: invert(1);
}

/* --- Hero Button Cards --- */
.hero-button-cards-container {
    display: flex;
    flex: 1 0 0;
    gap: 0.5rem;
    height: 40%;
    min-height: 7rem;
    backdrop-filter: blur(50px);
    justify-content: end;
}

.hero-button-cards-container a {
    display: flex;
    flex: 1 0 0;
}

.hero-button-card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 0 0;
    border-radius: 4px;
    border: 1px solid #2b2b2b;
    background: rgba(0, 0, 0, 0.75);
    justify-content: space-between;
    align-items: start;
    padding: 8px;
    cursor: pointer;
    transition: all 100ms;
    height: 100%;
}

.hero-button-card:hover {
    background: rgba(0, 0, 0, 1);
    border: 1px solid rgb(149, 149, 149);
    border-radius: 0px;
}

.hero-button-card h2 {
    font-size: clamp(0.9rem, 1.5vw, 1rem) !important;
    margin: 0 !important;
    font-weight: 500 !important;
    color: white !important;
}

.hero-button-card p {
    font-size: clamp(0.65rem, 1.5vw, 0.7rem) !important;
    color: #c0c0c0 !important;
    font-weight: 500;
}

.hero-button-header {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Hero Rocks */

.rocks {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    background-position: center;
    background-size: cover;
    transform:
        translateZ(calc(var(--parallax-perspective) * (var(--depth, 0) * -1))) scale(calc(1 + var(--depth, 1)));
    transform-origin: 50vw 50vh;
    will-change: transform;
    pointer-events: none;
    z-index: calc(10 - var(--depth, 0));
}

.rocks img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flicker-img {
    animation: flickerLight 10s infinite;
    will-change: filter;
}

.foreground-rocks {
    z-index: 3;
    padding-bottom: 200px;

}

.foreground-rocks-2 {
    z-index: 2;

}

.mid-rocks {
    z-index: 2;

}

.background-rocks {
    position: absolute;
    z-index: 1;
    height: 100%;
    object-fit: cover;
}

.background-chroma {
    position: absolute;
    z-index: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.background-chroma img {
    object-fit: cover;
}

.background-rocks img {
    object-fit: cover;
    transform: translateZ(0);
    image-rendering: smooth;
    /* filter: brightness(0.5); */
}

.scroll-button span {
    margin-left: 5px;
}



.dark-bottom {
    position: absolute;
    bottom: 0;
    background: linear-gradient(0deg, #000000 0%, rgba(255, 179, 0, 0) 100%);
    height: 100vh;
    width: 100%;
    z-index: 10;
}

/* Sections Customization */
.section-container {
    position: relative;
    display: flex;
    width: 100%;
}

.section-container-background-primary {
    background: white;
}

.section-container-background-secondary {
    background: #F9F9F9;
}

.section-inner-content h1 {
    font-size: clamp(1.2rem, 1.5vw, 1.4rem) !important;
    margin: 0 !important;
    font-weight: 500 !important;
}

.section-inner-content h2 {
    font-size: clamp(0.6rem, 1.5vw, 0.7rem) !important;
    color: #6E6E6E;
    font-weight: 500;
}

.section-inner-content span {
    margin: 0;
}

.section-header {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.section-header h1 {
    margin-block-start: 0.7em !important;
}

.divider {
    height: 1px;
    width: 100%;
    background: #D4D4D4;
}

.headerlink {
    transform: rotateY(180deg);
}

.section-inner-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--sections-max-width);
    z-index: 2;
    margin-left: auto;
    margin-right: auto;
    padding: 2rem 0.8rem;
    transition: all 1s;
    min-height: 70vh;
}

.section-monetize {

    position: relative;
    overflow: hidden;

}

.section-monetize>*:not(:last-child) {
    z-index: 3;
}

.double-column-content {
    display: flex;
    width: 100%;
    padding: 48px 0px;
    height: 100%;
}

.double-single-grid-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    gap: 4rem;
    width: 100%;
    padding: 92px 0px;
}

.column-container {
    width: 100%;
    height: 100%;
    min-height: 70vh;
}

.grid-container {
    position: relative;
    display: flex;
    min-height: 600px;
    width: 100%;
    background: white;
    overflow: hidden;
    border-radius: 4px;

}

.full-span {
    grid-column: span 2;
    min-height: 600px;
    overflow: hidden;
}

.column-half-text {
    display: flex;
    height: 100%;
    width: 100%;
    padding: 16px;
    gap: 5rem;
    justify-content: space-between;
    z-index: 10;
}

.column-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    gap: 16px;
    padding: 16px;
    z-index: 10;
}

.feature-cards {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-top: 4rem;
}

.feature-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;

}

.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #F9F9F9;
    border: 1px solid #E6E6E6;
    border-radius: 4px;
    min-height: 130px;
    padding: 8px;
    overflow: hidden;
}

.sub-p {
    margin-top: 2rem;
}

.card p,
.card span {
    font-size: clamp(0.55rem, 1.5vw, 0.6rem) !important;
    color: #6E6E6E !important;
    font-weight: 500;
    line-height: normal;
}

.transparent-card {
    min-height: 125px;
    display: flex;
    width: 100%;
    background: rgba(255, 255, 255, 0.559);
}

.transparent-card p {
    line-height: normal;
}

.card-row {
    position: relative;
    display: flex;
    width: 100%;
    overflow: hidden;
}

.grid-card-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.column-half-text a {
    margin-top: 15.5px;
}

.card span {
    /* background: white; */
    width: fit-content;
}

.card p {
    margin: 0;
}

.cta-wrapper {
    display: flex;
    gap: 8px;
    width: 100%;

    align-items: center;
}

.cta-right {
    justify-content: end;
}

.cta-left {
    justify-content: start;
}

.main-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #151515;
    padding: 12.5px 24px;
    border-radius: 4px;
    font-size: clamp(0.6rem, 1.5vw, 0.7rem);
    cursor: pointer;
    color: white;
    gap: 16px;
    transition: all 100ms;
    z-index: 5;
    min-width: 235px;

}

.main-button p {
    text-wrap: nowrap;
    margin: 0;
}

.main-button:hover {
    background: #151515d6;
    border-radius: 0px;
}

.bullet {
    display: flex;
    gap: 20px;
    align-items: center;
}

.fig-container {
    position: relative;
    display: flex;
    width: 100%;
    overflow: hidden;
    z-index: 5;
}

.absolute-half-img {
    position: absolute;
    bottom: 0;
    width: 100%;
    justify-content: center;
}

.absolute-full-img {
    position: absolute;
    justify-content: end;
    bottom: 0;
    right: 0;
    width: fit-content;
    margin-right: 3rem;
}

.absolute-full-img svg {
    height: 100%;
    padding: 4rem;
}


.absolute-half-img img {
    width: 100%;

}


.fig {
    width: 75%;
}

.what-is-hyperbeam-fig {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    max-width: 600px;
    transform: translate(-50%, -50%);
}

.monetize-fig {
    display: flex;
    height: 100%;
    align-items: center;
    width: 100%;
    justify-content: center;
}

.monetize-fig svg {
    width: 50%;
}

.monetize-button {
    margin-top: 24px;
}

.monetize-column {
    display: flex;
    height: 100%;
    align-items: start;
    justify-content: center;
    width: 100%;
    flex-direction: column;
    gap: 20px;
}

.monetize-row {
    display: flex;
    height: 100%;
}

.monetize-content {
    height: 100%;
}

/* ===== FOOTER ===== */

.md-footer {
    background-color: white;
    color: black;
}

.md-footer nav {
    padding: 2rem 0 2rem 0;
}

.md-footer__link {
    margin: 0;
}

.md-footer__direction {
    font-size: clamp(0.35rem, 1.5vw, 0.45rem);
}

.md-footer__title {
    font-size: clamp(0.75rem, 1.5vw, 0.85rem);
}

.md-footer-meta {
    display: none !important;
}

.md-footer__inner {
    display: none !important;
}

/* ===== CODE HIGHLIGHTING ===== */

/* --- Code Blocks --- */
pre {
    background-color: #f5f5f5 !important;
    border: 1px solid #e1e4e8 !important;
    border-radius: 6px !important;
    padding: 16px !important;
    overflow: auto !important;
    font-size: 0.85em !important;
    line-height: 1.45 !important;
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace !important;
    margin: 1em 0 !important;
}

pre code {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-size: inherit !important;
    color: #24292e !important;
    border-radius: 0 !important;
}

.highlight pre {
    background-color: #f5f5f5 !important;
    color: #24292e !important;
    border: 1px solid #e1e4e8 !important;
}

.highlight pre code {
    color: #24292e !important;
}

/* Syntax highlighting colors */
.highlight .k {
    color: #d73a49 !important;
}

/* Keywords */
.highlight .s {
    color: #22863a !important;
}

/* Strings */
.highlight .s1 {
    color: #22863a !important;
}

/* String single */
.highlight .s2 {
    color: #22863a !important;
}

/* String double */
.highlight .nb {
    color: #005cc5 !important;
}

/* Built-ins */
.highlight .nf {
    color: #6f42c1 !important;
}

/* Functions */
.highlight .nc {
    color: #6f42c1 !important;
}

/* Classes */
.highlight .nn {
    color: #6f42c1 !important;
}

/* Namespace */
.highlight .no {
    color: #005cc5 !important;
}

/* Constants */
.highlight .mi {
    color: #005cc5 !important;
}

/* Numbers */
.highlight .mf {
    color: #005cc5 !important;
}

/* Float numbers */
.highlight .c {
    color: #6a737d !important;
}

/* Comments */
.highlight .c1 {
    color: #6a737d !important;
}

/* Comment single line */
.highlight .cm {
    color: #6a737d !important;
}

/* Comment multiline */
.highlight .o {
    color: #d73a49 !important;
}

/* Operators */
.highlight .p {
    color: #24292e !important;
}

/* Punctuation */
.highlight .nt {
    color: #22863a !important;
}

/* HTML/XML tags */
.highlight .na {
    color: #6f42c1 !important;
}

/* HTML/XML attributes */
.highlight .nv {
    color: #24292e !important;
}

/* Variables */

/* Material theme code blocks for better contrast */
.md-typeset .codehilite {
    background-color: #f5f5f5 !important;
    color: #24292e !important;
    border-radius: 6px !important;
    border: 1px solid #e1e4e8 !important;
}

.md-typeset .codehilite pre {
    background-color: transparent !important;
    border: none !important;
    margin: 0 !important;
}


/* Code fence with language label */
.md-typeset .codehilite::before {
    background-color: #e1e4e8 !important;
    color: #586069 !important;
    font-size: 0.7rem !important;
    padding: 0.2em 0.5em !important;
    border-radius: 4px 4px 0 0 !important;
    position: absolute !important;
    right: 8px !important;
    top: 8px !important;
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace !important;
}

/* Enhanced keyboard shortcuts */
kbd {
    background-color: #fafbfc !important;
    border: 1px solid #c6cbd1 !important;
    border-bottom-color: #959da5 !important;
    border-radius: 3px !important;
    box-shadow: inset 0 -1px 0 #959da5 !important;
    color: #444d56 !important;
    display: inline-block !important;
    font-size: 11px !important;
    line-height: 10px !important;
    padding: 3px 5px !important;
    vertical-align: middle !important;
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace !important;
    font-weight: 600 !important;
}

/* Terminal/console styling */
.language-bash pre,
.language-shell pre,
.language-console pre,
.language-terminal pre {
    background-color: #f5f5f5 !important;
    color: #24292e !important;
    border: 1px solid #e1e4e8 !important;
}

.language-bash code,
.language-shell code,
.language-console code,
.language-terminal code {
    color: #24292e !important;
}

/* Enhanced bash/shell syntax highlighting */
.language-bash .highlight .nb {
    color: #005cc5 !important;
}

/* Built-in commands */
.language-bash .highlight .nv {
    color: #e36209 !important;
}

/* Variables */
.language-bash .highlight .s {
    color: #22863a !important;
}

/* Strings */
.language-bash .highlight .s1 {
    color: #22863a !important;
}

/* Single quoted strings */
.language-bash .highlight .s2 {
    color: #22863a !important;
}

/* Double quoted strings */
.language-bash .highlight .c {
    color: #6a737d !important;
}

/* Comments */
.language-bash .highlight .c1 {
    color: #6a737d !important;
}

/* Single line comments */
.language-bash .highlight .o {
    color: #d73a49 !important;
}

/* Operators */
.language-bash .highlight .p {
    color: #735c0f !important;
}

/* Punctuation */
.language-bash .highlight .k {
    color: #d73a49 !important;
}

/* Keywords */
.language-bash .highlight .kd {
    color: #d73a49 !important;
}

/* Keyword declarations */
.language-bash .highlight .mi {
    color: #005cc5 !important;
}

/* Numbers */
.language-bash .highlight .mf {
    color: #005cc5 !important;
}

/* Float numbers */

.language-shell .highlight .nb {
    color: #005cc5 !important;
}

/* Built-in commands */
.language-shell .highlight .nv {
    color: #e36209 !important;
}

/* Variables */
.language-shell .highlight .s {
    color: #22863a !important;
}

/* Strings */
.language-shell .highlight .s1 {
    color: #22863a !important;
}

/* Single quoted strings */
.language-shell .highlight .s2 {
    color: #22863a !important;
}

/* Double quoted strings */
.language-shell .highlight .c {
    color: #6a737d !important;
}

/* Comments */
.language-shell .highlight .c1 {
    color: #6a737d !important;
}

/* Single line comments */
.language-shell .highlight .o {
    color: #d73a49 !important;
}

/* Operators */
.language-shell .highlight .p {
    color: #735c0f !important;
}

/* Punctuation */
.language-shell .highlight .k {
    color: #d73a49 !important;
}

/* Keywords */
.language-shell .highlight .kd {
    color: #d73a49 !important;
}

/* Keyword declarations */
.language-shell .highlight .mi {
    color: #005cc5 !important;
}

/* Numbers */
.language-shell .highlight .mf {
    color: #005cc5 !important;
}

/* Float numbers */

/* JSON highlighting */
.language-json .highlight .s2 {
    color: #22863a !important;
}

/* JSON strings */
.language-json .highlight .kc {
    color: #005cc5 !important;
}

/* JSON booleans/null */

/* JavaScript/TypeScript highlighting enhancements */
.language-javascript .highlight .kd {
    color: #d73a49 !important;
}

/* var, let, const */
.language-typescript .highlight .kd {
    color: #d73a49 !important;
}

/* Python highlighting enhancements */
.language-python .highlight .k {
    color: #d73a49 !important;
}

/* def, class, import */
.language-python .highlight .bp {
    color: #005cc5 !important;
}

/* self, cls */

/* Last Updated Date */
.md-source-file {
    border-top: 1px solid #ddd;
    /* Adds a divider above the text */
    padding-top: 10px;
    /* Adds some space above the text */
    font-size: 0.9em;
    /* Makes the font size slightly smaller */
    font-style: italic;
    /* Makes the text italic */
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}

.md-source-file .md-source-file__fact {
    display: flex;
    align-items: center;
    gap: 0;
}

.md-source-file .md-icon {
    width: 1em;
    /* Adjusts the icon size proportionally */
    height: 1em;
    /* Adjusts the icon size proportionally */
    margin-right: 0.5em;
    /* Adds space between the icon and the text */
}

.md-source-file .git-revision-date-localized-plugin::before {
    content: "Last updated: ";
    /* Adds the prefix before the date */
}

.join-us-banner {
    background: #ffffff;
    border-top: 1px solid #E6E6E6;
    display: flex;
    padding: 1rem;
    align-items: center;
    justify-content: center;
}

.join-us-banner-alt {
    /* background: #F9F9F9; */
    display: flex;
    padding: 1rem;
    align-items: center;
    justify-content: center;
}

.join-us-banner-alt p {
    display: flex;
    align-items: center;
    gap: 8px;
}

.join-us-banner-alt:hover {
    opacity: 70%;
}

.join-us-banner p {
    display: flex;
    align-items: center;
    gap: 8px;
}

.join-us-banner:hover {
    opacity: 95%;
}

.core-concepts-flex {
    display: flex;
    gap: 2rem;
}

.core-concepts-flex p {
    width: 100%;
}

.core-concepts-fig {
    width: 25%
}

/* ===== DARK THEME OVERRIDES ===== */

/* --- Default Theme Specific Styles --- */
[data-md-color-scheme=default] .md-nav__title,
[data-md-color-scheme=default] .md-nav__item--section>.md-nav__link {
    color: #000000 !important;
}

[data-md-color-scheme=default] .md-tabs__item--active {
    background: rgb(239, 239, 239);
}

/* --- Dark Theme Navigation --- */
[data-md-color-scheme="slate"] .md-nav__link:hover {
    background: var(--md-default-bg-color--lightest) !important;
}

[data-md-color-scheme="slate"] .md-nav__link--active {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-md-color-scheme="slate"] .md-nav__title {
    color: #ffffff !important;
}

[data-md-color-scheme="slate"] .md-nav__link {
    color: #cccccc !important;
}

/* --- Dark Theme Header & Tabs --- */
[data-md-color-scheme="slate"] .md-header {
    background-color: #000000 !important;
    border-bottom: 1px solid #333333;
}

[data-md-color-scheme="slate"] .md-header__title {
    color: #ffffff !important;
}

[data-md-color-scheme="slate"] .md-tabs {
    background-color: #000000 !important;
}

[data-md-color-scheme="slate"] .md-tabs__link {
    color: #cccccc !important;
}

[data-md-color-scheme="slate"] .md-tabs__link--active {
    color: #ffffff !important;
}

/* --- Dark Theme Sidebar --- */
[data-md-color-scheme="slate"] .md-sidebar {
    background-color: #000000 !important;
}

/* --- Dark Theme Content --- */
[data-md-color-scheme="slate"] .md-content {
    color: #ffffff !important;
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4,
[data-md-color-scheme="slate"] .md-typeset h5,
[data-md-color-scheme="slate"] .md-typeset h6 {
    color: #ffffff !important;
}

[data-md-color-scheme="slate"] .md-typeset p {
    color: #cccccc !important;
}

/* --- Dark Theme Search --- */
[data-md-color-scheme="slate"] .md-search__form {
    background-color: #111111 !important;
    background-image: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.2s ease !important;
}

[data-md-color-scheme="slate"] .md-search__form:focus-within {
    background-color: #1a1a1a !important;
    background-image: linear-gradient(135deg, #111111 0%, #222222 100%) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(255, 255, 255, 0.1) !important;
}

[data-md-color-scheme="slate"] .md-search__input {
    background-color: transparent !important;
    color: #ffffff !important;
    border: none !important;
    outline: none !important;
}

[data-md-color-scheme="slate"] .md-search__input::placeholder {
    color: #999999 !important;
}

[data-md-color-scheme="slate"] .md-search__output {
    background-color: #000000 !important;
}

[data-md-color-scheme="slate"] .md-search-result__meta {
    color: #cccccc !important;
    background-color: #000000 !important;
}

[data-md-color-scheme="slate"] .md-search-result__list {
    background-color: #000000 !important;
}

[data-md-color-scheme="slate"] .md-search-result__item {
    background-color: #000000 !important;
    border-bottom: 1px solid #333333 !important;
}

[data-md-color-scheme="slate"] .md-search-result__item:hover {
    background-color: #1a1a1a !important;
}

[data-md-color-scheme="slate"] .md-search__icon svg {
    fill: #cccccc !important;
}

/* --- Dark Theme Source/GitHub Component --- */
[data-md-color-scheme="slate"] .md-header__source {
    background-color: #000000 !important;
}

[data-md-color-scheme="slate"] .md-source {
    color: #ffffff !important;
}

[data-md-color-scheme="slate"] .md-source__repository {
    color: #ffffff !important;
}

[data-md-color-scheme="slate"] .md-source__fact {
    color: #cccccc !important;
}

[data-md-color-scheme="slate"] .md-source__icon svg {
    fill: #cccccc !important;
}

/* --- Dark Theme Header Options --- */
[data-md-color-scheme="slate"] .md-header__option {
    background-color: transparent !important;
    color: #ffffff !important;
}

[data-md-color-scheme="slate"] .md-option {
    accent-color: #ffffff !important;
}

[data-md-color-scheme="slate"] #utc-time {
    color: #cccccc !important;
    border-radius: 4px !important;
    backdrop-filter: blur(10px) !important;
}

/* --- Dark Theme Footer Banners --- */
[data-md-color-scheme="slate"] .join-us-banner {
    background: var(--md-default-bg-color) !important;
}

[data-md-color-scheme="slate"] .join-us-banner-alt {
    background: var(--md-default-bg-color) !important;
}

[data-md-color-scheme="slate"] .join-us-banner p,
[data-md-color-scheme="slate"] .join-us-banner-alt p {
    color: #ffffff !important;
}

[data-md-color-scheme="slate"] .join-us-banner:hover,
[data-md-color-scheme="slate"] .join-us-banner-alt:hover {
    background: var(--md-default-bg-color--lightest) !important;
    opacity: 1 !important;
}

[data-md-color-scheme="slate"] .join-us-banner svg,
[data-md-color-scheme="slate"] .join-us-banner-alt svg {
    filter: invert(1) !important;
}

[data-md-color-scheme="slate"] .join-us-banner u,
[data-md-color-scheme="slate"] .join-us-banner-alt u {
    color: #ffffff !important;
    text-decoration-color: #cccccc !important;
}

[data-md-color-scheme="slate"] .join-us-banner s,
[data-md-color-scheme="slate"] .join-us-banner-alt s {
    color: #999999 !important;
}

/* --- Dark Theme Text & Logo --- */
[data-md-color-scheme="slate"] .logo-text h1 {
    color: #FFF;
}

[data-md-color-scheme="slate"] .tagline {
    color: #AAA;
}

/* ===== RESPONSIVE DESIGN ===== */

/* --- Mobile Styles (max-width: 700px) --- */
@media (max-width: 700px) {
    .hero-inner-content-bottom {
        flex-direction: column;
    }

    .hero-button-cards-container {
        flex-direction: column;
    }

    .monetize-fig svg {
        padding: 0;
    }

    .join-us-banner,
    .join-us-banner-alt {
        justify-content: unset;
        align-items: unset;
    }

    .join-us-banner-alt svg,
    .join-us-banner svg {
        width: 35px;
    }

    .join-us-banner-alt p,
    .join-us-banner p {
        flex-direction: column;
        width: 100%;
        align-items: start;
    }

    .what-is-hyperbeam-fig {
        width: 50%;
    }

    .column-container {
        min-height: fit-content;
        min-height: 25vh;
    }

    .bullet svg {
        display: none;
    }

    .double-single-grid-content {
        padding: 24px 0 0 0;
        gap: 2rem;
    }

    .cta-wrapper a {
        width: 100%;
    }

    .main-button {
        width: 100%;
    }

    .fig {
        width: 100%;
    }
}

/* --- Tablet Styles (max-width: 1200px) --- */
@media (max-width: 1200px) {
    .fig {
        width: 50%;
    }

    .hero-button-cards-container {
        gap: 1rem;
    }

    .column-half-text {
        flex-direction: column;
    }

    .grid-container {
        min-height: 400px;
    }

    .absolute-half-img {
        justify-content: end;
    }

    .absolute-full-img {
        display: none;
    }

    .absolute-half-img img {
        width: 75%;
    }

    .cta-right {
        justify-content: start;
    }

    .monetize-fig {
        justify-content: flex-start;
    }

    .monetize-fig svg {
        height: 500px;
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .monetize-row,
    .double-column-content {
        flex-direction: column;
    }

    .double-column-content {
        padding: 0;
    }

    .feature-cards {
        grid-template-columns: repeat(1, 1fr);
        gap: 2rem;
    }

    .column-text {
        gap: 64px;
    }

    .column-container {
        height: fit-content;
    }

    .double-single-grid-content {
        display: flex;
        flex-direction: column;
    }
}

/* ===== ANIMATIONS & KEYFRAMES ===== */

/* --- Keyframe Definitions --- */
@keyframes flickerLight {
    0%, 100% {
        filter: brightness(1.2);
    }
    10% {
        filter: brightness(1);
    }
    30% {
        filter: brightness(1.1);
    }
    50% {
        filter: brightness(0.9);
    }
    70% {
        filter: brightness(1.1);
    }
    90% {
        filter: brightness(1.3);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInSoft {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes dots {
    0% {
        content: "";
    }
    33% {
        content: ".";
    }
    66% {
        content: "..";
    }
    100% {
        content: "...";
    }
}

/* --- Animation Classes --- */
.md-main__inner.md-grid {
    opacity: 0;
    animation: fadeIn 175ms ease-in-out forwards !important;
}

.fade-in {
    opacity: 0;
}

.fade-in.visible {
    animation: fadeInSoft 1.5s ease-out forwards, flickerLight 10s infinite;
}

.nav {
    animation-delay: 2s;
}

.hero-text {
    animation-delay: 1.5s;
}

.picture,
.content-section {
    animation-delay: 0.1s;
}

/* --- Preloader --- */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    font-size: 0.5rem;
    font-family: sans-serif;
    color: #e3e3e3;
}

#preloader::after {
    content: "...";
    animation: dots 1.5s steps(3, jump-none) infinite;
    margin-left: 0.5rem;
}