:root {
    --color-accent: #34bfff;
    --color-accent-light: #60caff;
    --color-accent-soft: #00b7ff;
    --color-bg: #F4F1EA;
    --color-bg-alt: #ffffff;
    --color-surface: #ffffff;
    --color-surface-alt: #F6F5F1;
    --color-border: #e4e0d4;
    --color-text: #0B1330;
    --color-text-muted: #6C7488;
    --color-logo-bg: #0B1330;

    /* Premium extensions (new, additive — do not remove tokens above) */
    --color-ink: #0B1330;
    --color-ink-soft: #16204a;
    --color-gold: #C9A24B;
    --shadow-soft: 0 20px 60px rgba(11, 19, 48, .08);
    --shadow-lift: 0 30px 80px rgba(11, 19, 48, .14);
    --radius-md: 16px;
    --radius-lg: 22px;
    --ease-premium: cubic-bezier(.16, 1, .3, 1);
}

#transition-container {
    position: absolute;
    z-index: 1000;
    width: 200vw;
    bottom: -100%;
    transform: rotate(20deg);
    left: -40%;
    pointer-events: none
}

#transition-wave-svg {
    transform: translateY(20px)
}

#transition-wave-svg-bottom {
    transform: rotate(180deg) translateY(20px)
}

.hideTopTransition {
    animation: hideTopTransition ease-in .7s;
    animation-fill-mode: forwards
}

@keyframes hideTopTransition {
    0% {
        bottom: -120%;
        left: -40%
    }
    to {
        bottom: 100%;
        left: 40%
    }
}

.showTransition {
    animation: showTransition ease-in .7s;
    animation-fill-mode: forwards
}

@keyframes showTransition {
    0% {
        bottom: -450%;
        left: -60%
    }
    to {
        bottom: -120%;
        left: -40%
    }
}

#transition-push {
    height: 200vh;
    background: var(--color-accent)
}

@media (max-aspect-ratio: 12/10) {
    #transition-container {
        transform: translateY(-20%) scale(1.2) rotate(10deg)
    }
}

#overlay-container {
    position: absolute;
    height: calc(100% - 30px);
    padding: 15px 0;
    margin: 0 auto;
    right: 0;
    left: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0
}

#header-container {
    position: absolute;
    top: 0;
    width: 100%;
    transition: .25s;
    padding-top: 15px;
    pointer-events: none
}

.overlay-button {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    cursor: pointer;
    pointer-events: auto
}

#header-logo-svg {
    position: absolute;
    transform-origin: center center
}

#logo-dark-background {
    background: var(--color-logo-bg);
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 15px;
    clip-path: url(#logo-clip-path)
}

#logo-white-background {
    background: white;
    width: 200px
}

#logo-click-container {
    height: 53px;
    width: 49px;
    position: absolute;
    cursor: pointer;
    pointer-events: auto;
    transform-origin: top left
}

#lang-switch {
    right: 122px;
    top: 8px;
    width: auto;
    min-width: 56px;
    height: 32px;
    padding: 0 10px;
    gap: 5px;
    background: rgba(9, 20, 52, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 16px;
    z-index: 5
}

@media (max-width: 800px), (max-height: 800px) {
    #lang-switch {
        right: 112px;
        top: 6px;
        transform: scale(.9);
        transform-origin: top right
    }
}

@media (max-width: 550px), (max-height: 550px) {
    #lang-switch {
        right: 106px;
        top: 4px;
        transform: scale(.8);
        transform-origin: top right
    }
}

.lang-option {
    background: none;
    border: none;
    color: rgba(255, 255, 255, .55);
    font-family: Poppins, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    cursor: pointer;
    padding: 4px 2px;
    transition: color .2s ease
}

.lang-option.active {
    color: #fff
}

.lang-option:hover {
    color: #fff
}

.lang-divider {
    color: rgba(255, 255, 255, .3);
    font-size: 11px
}

#sound-button {
    right: 62px
}

#header-sound-svg {
    height: 48px;
    width: 48px;
    transform: translate(12px) scale(1.2)
}

#sound-button-scale-container {
    transform-origin: top right;
    position: relative
}

#menu-button {
    right: 0
}

.menu-button-bar {
    width: 26px;
    height: 4px;
    background: white;
    margin: 2.5px;
    border-radius: 2px
}

#menu-button-scale-container {
    transform-origin: top right
}

.scroll-container {
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: flex;
    justify-content: center
}

.scroll-border-container {
    width: 24px;
    height: 38px;
    border: 3px solid #091434;
    border-radius: 12px;
    box-sizing: border-box;
    display: flex;
    justify-content: center
}

.scroll-wheel {
    background: #091434;
    width: 4px;
    height: 11px;
    border-radius: 2px;
    margin-top: 4px
}

.scroll-touch-icon {
    height: 38px;
    width: 38px
}

@media (max-width: 800px),
(max-height: 800px) {
    #scroll-icon,
    #menu-button-scale-container,
    #sound-button-scale-container,
    .scroll-container,
    #logo-clip-path,
    #logo-click-container {
        transform: scale(.9)
    }
    #sound-button {
        right: 64px
    }
}

@media (max-width: 550px),
(max-height: 550px) {
    #scroll-icon,
    #menu-button-scale-container,
    #sound-button-scale-container,
    .scroll-container,
    #logo-clip-path,
    #logo-click-container {
        transform: scale(.8)
    }
    #sound-button {
        right: 60px
    }
}

#landing-page {
    height: 100%;
    width: 100%;
    top: 0;
    position: absolute
}

#landing-page-section {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: calc(100% - 30px);
    left: 0;
    position: relative
}

#landing-content-svg {
    width: 550px;
    max-width: 45%;
    max-height: 53%;
    position: relative
}

.landing-headline {
    transform-origin: left;
    font-size: 64px;
    font-weight: 600;
    fill: var(--color-text);
    letter-spacing: -.5px
}

.landing-subheading {
    font-size: 17px;
    fill: var(--color-text-muted);
    transform-origin: left
}

@media (max-aspect-ratio: 12/10) {
    #landing-content-svg {
        max-width: 94%;
        max-height: 80%
    }
    #landing-page {
        align-items: flex-start;
        padding-top: 45px;
        background-image: linear-gradient(180deg, var(--color-bg) 45%, transparent 50%)
    }
    #landing-page-section {
        max-height: 40vh;
        justify-content: center;
        align-items: center;
        position: unset
    }
}

#scroll-container {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%
}

.scroll-container-transitions {
    transition: left .9s cubic-bezier(.645, .045, .355, 1), top .7s cubic-bezier(.6, 0, .4, 1)
}

#hover-icon-color-switch {
    position: absolute;
    width: 300%;
    height: 50%;
    top: 0
}

#about-section {
    justify-content: flex-start;
    align-items: center;
    font-family: Electrolize, sans-serif;
    color: #34bfff;
    min-height: 100vh;
    padding-bottom: 90px
}

#about-content-container {
    width: 580px;
    max-width: 45%;
    display: flex;
    flex-direction: column
}

#about-content-container span {
    color: #34bfff
}

#skills-svg {
    margin-top: 120px;
    width: 100%
}

.about-box-line {
    fill: none;
    stroke: #00b7ff;
    stroke-width: 2
}

.about-up-animation-line,
.about-down-animation-line {
    fill: none;
    stroke: #00b7ff;
    opacity: 0;
    stroke-width: 2
}

.about-box-background {
    stroke-width: 0;
    fill: url(#about-background-gradient)
}

.about-header {
    font-weight: 700;
    font-size: 18px;
    fill: #34bfff
}

.about-text {
    font-weight: 700;
    font-size: 15px;
    fill: #34bfff
}

#about-skills-container {
    padding: 10px 0;
    font-weight: 700;
    font-size: 16px
}

#about-skills-render-container :nth-child(even),
#about-others-render-container :nth-child(odd) {
    background: #2d88dd18
}

.about-skill-container {
    height: 100%;
    box-sizing: border-box;
    padding: 6px 20px;
    display: flex;
    justify-content: center;
    align-items: center
}

.about-skill-container span {
    width: 250px;
    background: transparent !important
}

.about-skill-bar-container {
    width: 100%;
    height: 11px;
    background: #00b7ff33 !important;
    overflow: auto
}

.about-skill-bar {
    height: 100%;
    background: linear-gradient(to right, #2d88dd, #34bfff) !important;
    width: 30%
}

#about-svg-about image {
    image-rendering: pixelated;
    opacity: .9
}

.about-pixel-mask-rect {
    fill: #fff
}

@media (max-aspect-ratio: 12/10) {
    #about-section {
        justify-content: flex-start;
        padding-bottom: 6vh;
        min-height: unset
    }
    #about-content-container {
        max-width: 100%;
        justify-content: flex-start;
        align-items: flex-start
    }
    #skills-svg {
        margin-top: 55vh;
        margin-bottom: 110px;
        width: 94%
    }
    #about-music-player {
        max-width: 100%;
        margin-top: 0
    }
}

.landing-slow-transition {
    transition: top .7s cubic-bezier(.645, .045, .355, 1)
}

.slide-out-left-transition {
    transition: left .9s cubic-bezier(.6, 0, .4, 1), right .9s cubic-bezier(.6, 0, .4, 1)
}

#work-section {
    display: flex;
    flex-direction: column;
    margin-bottom: 3vh;
    position: relative;
    min-height: fit-content;
    width: 100%
}

#work-content {
    position: relative;
    padding: 90px 0;
    box-sizing: border-box;
    margin-top: 20px;
    justify-content: flex-start
}

#work-background {
    box-shadow: 0 30px 70px rgba(0, 0, 0, .25);
    background: var(--color-bg-alt);
    width: 300%;
    height: 100%;
    position: absolute;
    z-index: -1
}

#work-render-container {
    position: relative;
    width: 350px;
    height: 570px;
    max-width: 100%;
    display: flex;
    justify-content: center;
    margin: 80px auto 0
}

/* ===== Experience Timeline ===== */

#experience-container {
    margin-top: 70px;
    max-width: 760px
}

#experience-list {
    position: relative;
    margin-top: 8px;
    padding-left: 26px;
    border-left: 2px solid var(--color-border)
}

.experience-item {
    position: relative;
    padding-bottom: 34px
}

.experience-item:last-child {
    padding-bottom: 0
}

.experience-marker {
    position: absolute;
    left: -33px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-bg-alt), 0 0 0 5px var(--color-border)
}

.experience-body h4 {
    color: var(--color-text);
    margin: 0
}

.experience-top-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 8px
}

.experience-period {
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-accent-soft);
    white-space: nowrap;
    letter-spacing: .3px
}

.experience-body p {
    color: var(--color-text-muted);
    font-size: .92rem;
    line-height: 1.7;
    max-width: 640px
}

@media (max-width: 640px) {
    #experience-container {
        margin-top: 50px
    }
    #experience-list {
        padding-left: 20px
    }
    .experience-marker {
        left: -27px
    }
}

.work-item-container {
    background: var(--color-surface);
    height: 100%;
    position: absolute;
    padding: 2px;
    border-radius: 20px;
    width: 100%;
    overflow: hidden
}

.work-item-container-transition {
    transition: transform .4s ease-in-out, opacity .35s ease-in-out, filter .35s ease-in-out
}

.work-inactive-item-container {
    opacity: .7 !important;
    filter: grayscale(.5) !important;
    cursor: pointer
}

.work-inactive-item-container * {
    cursor: unset !important;
    pointer-events: none
}

.work-inactive-item-container:hover {
    border: 2px solid #7C8594;
    padding: 0
}

.work-item-image {
    width: calc(100% - 16px);
    margin: 8px 8px 5px;
    object-fit: cover;
    min-height: 300px;
    border-radius: 13px
}

.work-item-content-container {
    padding: 8px 16px;
    box-sizing: border-box;
    flex: 1
}

.work-item-content-container a {
    text-decoration: underline
}

.work-item-tag-container {
    margin-top: 5px;
    margin-bottom: 15px;
    max-width: 100%;
    flex-wrap: wrap
}

.work-item-tag {
    font-size: .65rem;
    padding: 1px 7px;
    margin-right: 5px;
    color: #fff;
    border-radius: 10px;
    margin-bottom: 4px;
    display: flex;
    align-items: center
}

.work-item-button-container {
    margin: 8px
}

.work-item-orange-button {
    width: 100%;
    padding: 9px !important;
    margin-left: 8px
}

.work-item-gray-button {
    padding: 8px 14px;
    color: #fff;
    border-radius: 13px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer
}

.work-item-gray-button .code-icon {
    fill: #fff;
    height: 28px;
    width: 28px
}

.work-item-gray-button span {
    color: #fff;
    margin-left: 10px
}

.work-banner-container {
    height: 50px;
    width: 300px;
    background-color: var(--color-accent-light);
    position: absolute;
    transform: rotate(-45deg) translate(-92px, -30px)
}

.work-banner-container span {
    color: #091434;
    font-weight: 500;
    line-height: 1.3;
    font-size: 15px
}

.work-banner-container img {
    height: 30px;
    width: 30px;
    margin-right: 12px
}

#work-navigation-container {
    margin-top: 50px;
    margin-bottom: 20px
}

.work-navigation-button {
    height: 54px;
    width: 54px;
    border-radius: 50%;
    margin: 20px 20px 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s !important
}

.work-disabled-navigation-button {
    background: #a7adb8 !important;
    cursor: unset !important
}

.work-disabled-navigation-button:hover {
    background: #a7adb8 !important
}

@media (max-aspect-ratio: 12/10) {
    #work-content {
        align-items: center;
        justify-content: center
    }
    #work-header-container {
        width: 580px;
        max-width: 100%
    }
}

@media (max-width: 480px) {
    .work-inactive-item-container {
        opacity: 0
    }
}

#contact-section {
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 100vh;
    padding: 80px 0;
    box-sizing: border-box
}

#contact-header-container {
    position: relative;
    z-index: 2;
    margin-bottom: 20px
}

#contact-container {
    width: 100%;
    height: auto;
    margin-top: 40px
}

#contact-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 44px;
    max-width: 620px;
    box-sizing: border-box
}

#contact-lead {
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 26px;
    max-width: 520px
}

#contact-primary-row {
    margin-bottom: 26px
}

#contact-telegram-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #26A5E4;
    background-image: radial-gradient(circle at center, #4fc0f5 50%, transparent 50%)
}

#contact-telegram-button i {
    font-size: 1.15rem
}

#contact-divider-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px
}

.contact-divider-line {
    flex: 1;
    height: 1px;
    background: var(--color-border)
}

.contact-divider-text {
    font-size: .82rem;
    color: var(--color-text-muted);
    white-space: nowrap
}

#contact-form {
    display: flex;
    flex-direction: column;
    gap: 18px
}

.contact-field {
    display: flex;
    flex-direction: column;
    gap: 7px
}

.contact-field label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: .2px
}

.contact-field input,
.contact-field textarea {
    font-family: Poppins, sans-serif;
    font-size: .95rem;
    color: var(--color-text);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 12px 14px;
    resize: vertical;
    transition: border-color .2s ease, box-shadow .2s ease
}

.contact-field input:focus,
.contact-field textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(52, 191, 255, .15)
}

#contact-submit-button {
    border: none;
    font-family: Poppins, sans-serif;
    align-self: flex-start;
    margin-top: 4px
}

#contact-form-note {
    font-size: .78rem;
    color: var(--color-text-muted);
    margin-top: -6px
}

#contact-social-strip {
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px
}

#contact-social-label {
    font-size: .82rem;
    color: var(--color-text-muted);
    font-weight: 500
}

#contact-social-icons {
    display: flex;
    gap: 10px
}

#contact-social-icons a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-alt);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    transition: background .2s ease, color .2s ease, transform .2s ease
}

#contact-social-icons a:hover {
    background: var(--color-accent);
    color: #fff;
    transform: translateY(-2px)
}

@media (max-width: 640px) {
    #contact-card {
        padding: 28px 22px
    }
    #contact-social-strip {
        flex-direction: column;
        align-items: flex-start
    }
}

@media (max-aspect-ratio: 12/10) {
    #contact-section {
        margin-top: 6vh;
        align-items: center;
        justify-content: flex-start;
        height: fit-content;
        margin-bottom: 8vh;
        padding: 0;
        min-height: unset
    }
    #contact-header-container {
        width: 580px;
        max-width: 100%
    }
}

/* ===== Footer ===== */

#site-footer {
    --footer-bg: #0a1128;
    --footer-surface: #11193a;
    --footer-border: rgba(96, 202, 255, .18);
    --footer-text: #eaf2ff;
    --footer-text-muted: #8fa1c7;
    width: 100%;
    background: var(--footer-bg);
    border-top: 2px solid var(--color-accent);
    box-sizing: border-box;
    padding: 64px 0 40px;
    margin-top: 40px
}

#footer-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.2fr;
    gap: 60px
}

.footer-brand-name {
    font-family: Electrolize, sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--footer-text);
    letter-spacing: .5px
}

.footer-brand-description {
    margin-top: 14px;
    max-width: 320px;
    color: var(--footer-text-muted);
    font-size: .95rem;
    line-height: 1.65
}

.footer-status-badge {
    margin-top: 22px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    background: rgba(52, 191, 255, .1);
    border: 1px solid var(--color-accent-soft);
    color: var(--footer-text);
    font-size: .85rem;
    font-weight: 500;
    width: fit-content
}

.footer-status-dot {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background: #38d67a;
    box-shadow: 0 0 8px #38d67a
}

.footer-column-title {
    color: var(--footer-text);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    margin-bottom: 20px
}

.footer-nav-list {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.footer-nav-list a {
    color: var(--footer-text-muted);
    font-size: .95rem;
    transition: color .2s
}

.footer-nav-list a:hover {
    color: var(--color-accent-light)
}

.footer-social-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 26px;
    flex-wrap: wrap
}

.footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    width: 22px;
    background: none;
    border: none;
    border-radius: 0;
    transition: transform .2s, opacity .2s;
    opacity: .8
}

.footer-social-link:hover {
    transform: translateY(-2px);
    opacity: 1;
    box-shadow: none
}

.footer-social-link svg {
    height: 20px;
    width: 20px;
    fill: var(--footer-text-muted);
    transition: fill .2s
}

.footer-social-link:hover svg {
    fill: var(--color-accent-light)
}

.footer-legal-card {
    border: 1px solid var(--footer-border);
    border-left: 3px solid var(--color-accent-soft);
    border-radius: 10px;
    padding: 16px 18px;
    background: var(--footer-surface);
    color: var(--footer-text-muted);
    font-size: .8rem;
    line-height: 1.65
}

#footer-bottom-bar {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--footer-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px
}

#footer-bottom-bar span {
    color: var(--footer-text-muted);
    font-size: .85rem
}

.footer-bottom-links {
    display: flex;
    gap: 26px;
    flex-wrap: wrap
}

.footer-bottom-links a {
    color: var(--footer-text-muted);
    font-size: .85rem;
    transition: color .2s
}

.footer-bottom-links a:hover {
    color: var(--color-accent-light)
}

@media (max-width: 800px) {
    #footer-grid {
        grid-template-columns: 1fr 1fr;
        row-gap: 44px
    }
    .footer-brand-description {
        max-width: 100%
    }
}

@media (max-width: 480px) {
    #site-footer {
        padding: 48px 0 30px
    }
    #footer-grid {
        grid-template-columns: 1fr;
        row-gap: 36px
    }
    .footer-column-title {
        margin-bottom: 16px
    }
    .footer-social-row {
        gap: 22px;
        margin-bottom: 22px
    }
    .footer-legal-card {
        font-size: .78rem
    }
    #footer-bottom-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px
    }
    .footer-bottom-links {
        gap: 18px 22px
    }
}

/* ===== Music Player ===== */

#about-music-player {
    margin: 24px auto 0;
    width: 100%;
    max-width: 420px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-surface);
    box-shadow: 0 12px 28px rgba(9, 20, 52, .08);
    padding: 16px 20px;
    box-sizing: border-box;
    font-family: Electrolize, sans-serif
}

#about-music-player-header {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px
}

#about-music-track-title {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border)
}

#about-music-controls {
    display: flex;
    align-items: center;
    gap: 12px
}

.music-control-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
    border-radius: 12px;
    border: 1px solid var(--color-accent-soft);
    background: rgba(0, 183, 255, .08);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .2s, transform .2s, box-shadow .2s
}

.music-control-button:hover {
    background: rgba(0, 183, 255, .18);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 183, 255, .18)
}

.music-control-button:active {
    transform: translateY(0)
}

.music-control-button svg {
    height: 17px;
    width: 17px;
    fill: var(--color-accent)
}

#about-music-progress-track {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: rgba(0, 183, 255, .14);
    position: relative;
    overflow: hidden
}

#about-music-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-accent-soft), var(--color-accent));
    border-radius: 3px;
    transition: width .1s linear
}

#about-music-fallback {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border)
}

@media (max-aspect-ratio: 12/10) {
    #about-music-player {
        max-width: 100%
    }
}

#hover-icon {
    position: absolute;
    border-radius: 50%;
    border-style: solid;
    top: 0;
    left: 0;
    z-index: 999;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: height .2s, width .2s, border-color .2s, border-width .2s;
    opacity: 0
}

.clickCTA:after {
    content: "Click to enable\asounds.";
    line-height: 17px;
    white-space: pre-wrap;
    text-align: center;
    min-width: 200px;
    position: relative;
    top: 50px;
    color: var(--color-text-muted)
}

.hover-spread {
    height: 16px;
    min-width: 16px;
    background: var(--color-accent);
    position: absolute;
    opacity: .1;
    border-radius: 50%
}

#menu-container {
    position: absolute;
    right: 0;
    width: calc(300px + (100vw - 90rem)/2);
    height: 100%;
    background: var(--color-bg-alt);
    z-index: 2;
    max-width: 45vw;
    box-sizing: border-box;
    padding: 50px 50px 70px
}

#menu-content-container {
    position: relative;
    height: 100%;
    width: 240px
}

#menu-brand-row {
    display: flex;
    flex-direction: column;
    padding-top: 6px
}

#menu-brand-name {
    font-family: Electrolize, sans-serif;
    font-size: 1.05rem;
    letter-spacing: 2.5px;
    color: var(--color-text);
    font-weight: 400
}

#menu-brand-tagline {
    font-size: .82rem;
    color: var(--color-text-muted);
    margin-top: 6px;
    line-height: 1.5;
    max-width: 220px
}

#menu-items-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center
}

#menu-footer-row {
    margin-bottom: 18px
}

.menu-footer-item {
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    letter-spacing: .3px;
    transition: color .2s ease
}

.menu-footer-item:hover {
    color: var(--color-accent)
}

.menu-items-column-container {
    width: 100%
}

.menu-item {
    border-radius: 15px;
    margin: 15px 0;
    font-weight: 600;
    font-size: 1.8rem;
    letter-spacing: -.3px;
    width: fit-content;
    color: var(--color-text);
    cursor: pointer;
    transition: color .2s ease
}

.menu-item:hover {
    color: var(--color-accent-soft)
}

.active-menu-item {
    position: relative
}

.active-menu-item {
    cursor: unset !important;
    transform: translate(28px)
}

.active-menu-item:after {
    position: absolute;
    height: 14px;
    width: 14px;
    display: flex;
    border-radius: 50%;
    content: "";
    color: #fff;
    background: var(--color-accent);
    left: -10px;
    top: 50%;
    transform: translate(-16px, -50%)
}

#menu-container .social-icon {
    margin-right: 15px
}

#music-credit-container {
    margin-bottom: 10px
}

#music-credit-container a,
#music-credit-container span {
    font-size: .9rem;
    color: var(--color-text-muted)
}

#music-credit-container a:hover {
    text-decoration: underline
}

@media (max-aspect-ratio: 12/10) {
    #menu-container {
        right: -100%;
        width: 100% !important;
        max-width: unset;
        align-items: center
    }
    .menu-items-column-container {
        align-items: center
    }
    #menu-social-container,
    #music-credit-container {
        justify-content: center
    }
    .active-menu-item:after {
        position: absolute;
        height: 3px;
        margin: 0 auto;
        content: "";
        background: var(--color-accent);
        width: 100%;
        bottom: -2px;
        left: 0;
        transform: translateY(16px);
        border-radius: 0
    }
    .active-menu-item {
        transform: unset
    }
}

@media (max-height: 600px) {
    .menu-item {
        font-size: 1.3rem;
        margin: 10px 0
    }
    #menu-container .social-icon {
        height: 24px;
        width: 24px
    }
    #menu-container hr {
        margin: 15px 0
    }
    #music-credit-container a,
    #music-credit-container span {
        font-size: 12px
    }
    .menu-items-column-container {
        justify-content: center
    }
}

@media (max-height: 450px) {
    #menu-items-container {
        flex-direction: row
    }
    #menu-container {
        padding: 30px 30px 45px
    }
}

#intro-container {
    z-index: 998;
    background: var(--color-bg);
    height: 100%;
    width: 100%;
    position: absolute;
    cursor: wait
}

* {
    margin: 0;
    padding: 0
}

html,
body {
    height: 100%;
    overflow: hidden
}

#main-canvas {
    position: fixed;
    top: 0;
    left: 0;
    outline: none;
    max-width: 100%;
    max-height: 100%;
    pointer-events: all
}

body {
    font-family: Poppins, sans-serif;
    color: var(--color-text);
    background: var(--color-bg);
    position: relative;
    display: flex;
    justify-content: center;
    transition: background-color .3s, color .3s
}

.content-width {
    width: 92rem;
    max-width: calc(100% - 60px)
}

.hide {
    display: none !important
}

.pointer {
    cursor: pointer
}

.center {
    display: flex;
    justify-content: center;
    align-items: center
}

.row {
    display: flex;
    flex-direction: row
}

.column {
    display: flex;
    flex-direction: column
}

.width-100 {
    width: 100%
}

.height-100 {
    height: 100%
}

.no-transition {
    transition: none !important
}

h1 {
    font-size: 4.3rem;
    font-family: Poppins, sans-serif;
    line-height: 1.16667;
    font-weight: 600;
    letter-spacing: -.5px
}

h3 {
    font-size: 1.6rem;
    font-weight: 600
}

h4 {
    font-size: 1.4rem;
    font-weight: 600
}

h5 {
    color: var(--color-accent);
    font-size: 1.2rem;
    font-weight: 500
}

span {
    color: var(--color-text-muted);
    font-size: 1rem
}

a {
    cursor: pointer !important;
    text-decoration: none;
    color: inherit
}

hr {
    height: 2px;
    width: 100%;
    background-color: var(--color-border);
    margin: 25px 0;
    border: none
}

.section-subheader-container {
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    align-items: center
}

.section-subheader-container hr {
    width: 40px;
    background-color: var(--color-accent);
    margin: 0 20px 0 0
}

::-moz-selection {
    color: #ffffff;
    background: rgba(52, 191, 255, .35)
}

::selection {
    color: #ffffff;
    background: rgba(52, 191, 255, .35)
}

.big-button {
    padding: 13px 34px;
    border-radius: 26px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    width: max-content
}

.small-button {
    padding: 9px 36px;
    color: #fff;
    border-radius: 13px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer
}

.orange-hover {
    background-color: var(--color-accent);
    background-image: radial-gradient(circle at center, var(--color-accent-light) 50%, transparent 50%);
    background-repeat: no-repeat;
    transition: background-size .3s;
    background-size: 0 0;
    background-position: 50% 50%
}

.orange-hover:hover {
    background-size: 200% 200%
}

.gray-hover {
    background-color: #b9bbbe;
    background-image: radial-gradient(circle at center, #caccce 50%, transparent 50%);
    background-repeat: no-repeat;
    transition: background-size .3s;
    background-size: 0 0;
    background-position: 50% 50%
}

.gray-hover:hover {
    background-size: 200% 200%
}

.social-icon {
    cursor: pointer;
    filter: grayscale(1) brightness(8);
    transition: .125s ease-in
}

.social-icon:hover {
    filter: unset;
    transform: scale(1.05)
}

section {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1
}

.content-container {
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center
}

@media (max-aspect-ratio: 12/10) {
    .content-width {
        max-width: calc(100% - 30px)
    }
}

@media (max-width: 800px),
(max-height: 800px) {
    h1 {
        font-size: 3.8rem
    }
}

@media (max-width: 480px),
(max-height: 480px) {
    h1 {
        font-size: 3rem
    }
}

@font-face {
    font-family: Electrolize;
    font-style: normal;
    font-weight: 400;
    src: url(/electrolize-v14-latin-regular.woff2) format("woff2");
    font-display: swap
}

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 400;
    src: url(/poppins-v19-latin-regular.woff2) format("woff2");
    font-display: swap
}

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 500;
    src: url(/poppins-v19-latin-500.woff2) format("woff2");
    font-display: swap
}

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;
    src: url(/poppins-v19-latin-600.woff2) format("woff2");
    font-display: swap
}

.social-icon {
    opacity: 1 !important; /* Force icons to be visible */
    transition: transform 0.2s ease; /* Optional: smooth transform on hover */
}

.social-icon:hover {
    transform: scale(1.1); /* Optional: slight scale up on hover */
}